/* Package default tokens: Classic's inputs, and everything derived from them.
   Tokens come in four kinds (AZCO-528, AZCO-491): a theme's inputs, which
   templates and apps set (Classic's values here); derived colours, resolved
   tokens and platform constants, which only this file defines (colours from
   the inputs, shape, heights, states); and retired names, kept here for one
   release for apps that read them. */
/* The type scale (AZCO-526): iOS's text styles, sized from one base.
   --ui-text-base is the person's body size: 17px, or on Apple phones the
   root's system body style (the rule below), so every control and app text
   sized from the scale follows iOS Text Size. The styles follow Apple's
   Dynamic Type table rather than the base's ratio: titles grow by a few
   pixels while the body grows (a large title is 40px at a 23px body, 60px at
   the largest accessibility size, 53px), small styles shrink no further than
   Apple's (footnote 12px, the rest 11px). Each is exact at the default 17px
   and within about 1.5px of Apple's table at every size. From 960px the scale
   is desktop's, in rem (AZCO-491, after ChatGPT's settings: title2 22px for
   page titles, headline 15px for section headings, body, callout and subhead
   14px for text, rows and controls, footnote 13px for secondary lines,
   caption 12px for meta), so it follows the browser's text size instead.
   Nothing is bolder than 500 (medium), for titles and headings only. Every style has an 11px floor. Size text
   with these tokens (or rem), never px. Templates set the same scale and never
   the base, which belongs to the root. */
:root {
  --ui-text-base: 17px;
  --ui-text-large-title: max(11px, min(calc(var(--ui-text-base) + 17px), calc(var(--ui-text-base) * 2 / 3 + 24.667px)));
  --ui-text-title1: max(11px, min(calc(var(--ui-text-base) + 11px), calc(var(--ui-text-base) * 0.8 + 15.6px)));
  --ui-text-title2: max(11px, min(calc(var(--ui-text-base) + 5px), calc(var(--ui-text-base) * 0.885 + 9.1px)));
  --ui-text-title3: max(11px, calc(var(--ui-text-base) + 3px));
  --ui-text-headline: max(11px, var(--ui-text-base));
  --ui-text-headline-weight: 500;
  --ui-text-body: max(11px, var(--ui-text-base));
  --ui-text-callout: max(11px, min(calc(var(--ui-text-base) - 1px), calc(var(--ui-text-base) * 0.96)));
  --ui-text-subhead: max(11px, min(calc(var(--ui-text-base) - 2px), calc(var(--ui-text-base) * 0.9 + 0.3px)));
  --ui-text-footnote: max(12px, min(calc(var(--ui-text-base) - 4px), calc(var(--ui-text-base) * 0.83)));
  --ui-text-caption: max(11px, min(calc(var(--ui-text-base) - 5px), calc(var(--ui-text-base) * 0.8)));
  --ui-text-caption2: max(11px, min(calc(var(--ui-text-base) - 6px), calc(var(--ui-text-base) * 0.74)));
  /* Text in fields: subhead, the step of the controls beside them. */
  --ui-text-field: var(--ui-text-subhead);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root {
    --ui-text-large-title: max(11px, 2.125rem);
    --ui-text-title1: max(11px, 1.75rem);
    --ui-text-title2: max(11px, 1.375rem);
    --ui-text-title3: max(11px, 1.125rem);
    --ui-text-headline: max(11px, 0.9375rem);
    --ui-text-body: max(11px, 0.875rem);
    --ui-text-callout: max(11px, 0.875rem);
    --ui-text-subhead: max(11px, 0.875rem);
    --ui-text-footnote: max(11px, 0.8125rem);
    --ui-text-caption: max(11px, 0.75rem);
    --ui-text-caption2: max(11px, 0.6875rem);
  }
}
/* Where iOS Safari zooms into a field with text under 16px when it takes
   focus (below 960px, coarse pointer), field text is at least 16px and grows
   with the body. Desktop fields keep subhead, as desktop controls do. */
@media (max-width: 959.98px) and (pointer: coarse) {
  :root {
    --ui-text-field: max(16px, var(--ui-text-body));
  }
}
/* Apple phones follow the person's Text Size (AZCO-523, AZCO-526): the root
   takes the system's body style, so 1rem is their chosen size (17px by
   default, about 14px at the smallest), and the base follows it. This is the
   one place the root's font is set: platform-web's --platform-body reads the
   base. Other phones, tablets from 960px and desktops keep 17px. */
@supports (font: -apple-system-body) {
  @media (max-width: 959.98px) and (pointer: coarse) {
    :root {
      font: -apple-system-body;
      --ui-text-base: 1rem;
    }
  }
}
/* Themes from a few brand colours (AZCO-491, item 34). A theme, a template or
   an app's own, sets only its inputs; every other colour derives from them
   below, with one set of rules for every theme, so the structural patterns
   (the sidebar's tint, separators, field edges, hover and current fills,
   grouped canvases, elevated surfaces, the focus edge) hold for any palette.

   Required inputs, with Classic's values as the package default:
   --ui-canvas            the page's background;
   --ink                  text, and the base of every neutral;
   --control-primary      the primary button, selected chips and the keyboard highlight;
   --control-on-primary   text and glyphs on the primary;
   color-scheme           light or dark (one value): picks each light-dark() pair. Set it in a
                          stylesheet rule or with data-ui-scheme on <html>, never as an inline style.
   Optional inputs, defaulted in the derived block: --ui-accent (links, the
   unread dot, the focus ring and edge; the primary), --control-danger,
   --control-danger-solid, --ui-tint-warm and --ui-tint-cool. Templates also
   set the faces (--ui-font-body, --ui-font-display, --ui-control-face) and the
   type scale, and nothing else (templates.test.ts). An app sets the inputs
   with createPlatformApp's `theme`, or in a rule on :root as specific as the
   template's (`:root[data-ui-template]`, or plain `:root` without one) loaded
   after the platform's styles. Setting a derived token there still works, as
   an escape hatch, but no template does. */
:root {
  --ui-canvas: #fafaf7;
  --ink: #173e35;
  --control-primary: #294a39;
  --control-on-primary: #fffdf5;
  /* Classic's scheme, declared here so a bundler's light-dark() polyfill resolves for an app with no template or
     theme: Lightning CSS sets its switch variables only beside a color-scheme declaration (AZCO-626). */
  color-scheme: light;
}
/* An app theme's scheme (createPlatformApp's `theme`, applyUiTheme): the data-ui-scheme attribute on <html>, over a
   template's. A stylesheet rule rather than an inline style, because bundlers that polyfill light-dark() (Vite's
   lightningcss) switch it with variables they attach to color-scheme declarations in stylesheets only. */
:root:root[data-ui-scheme="light"] {
  color-scheme: light;
}
:root:root[data-ui-scheme="dark"] {
  color-scheme: dark;
}
/* Platform constants that templates once set one by one (AZCO-491): corners,
   spacing and text roles, the same in every theme. */
:root {
  --layout-gap: 16px;
  --page-gutter: var(--layout-gap);
  /* Typography roles (section and item titles, metadata, navigation menus). */
  --ui-display-weight: 500;
  --ui-control-font-size: var(--ui-text-subhead);
  --ui-chip-font-size: var(--ui-text-subhead);
  --ui-title-size: var(--ui-text-subhead);
  --ui-title-weight: 500;
  --ui-meta-size: var(--ui-text-caption);
  --ui-navigation-font: 400 var(--ui-text-footnote)/1.385 var(--ui-font-body, Inter, system-ui, sans-serif);
  --ui-font-quote: var(--ui-font-body, Inter, system-ui, sans-serif);
  /* The control face: the device's own face; content keeps --ui-font-body. */
  --ui-control-face: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Toolbar glyphs and creation symbols. */
  --ui-icon-action-size: 18px;
  --ui-icon-action-stroke: 1.7;
  --ui-icon-create-size: 32px;
  /* Corners of panels and inner blocks. */
  --control-radius: 6px;
  --ui-radius-inner: 4px;
  --ui-radius-panel: 8px;
  --ui-radius-surface: 12px;
  /* Tiles and cards: containers, so the shape never changes them. A tile
     rests on a tight shadow (dark themes: an edge) and lifts on pointer hover. */
  --ui-radius-card: 16px;
  --ui-radius-card-compact: 10px;
  /* Corners under controls.shape "rectangular" (touch, then compact density). */
  --ui-rect-control: 12px;
  --ui-rect-field: 12px;
  --ui-rect-chip: 8px;
  --ui-rect-menu: 12px;
  --ui-rect-highlight: 6px;
  --ui-rect-control-compact: 8px;
  --ui-rect-field-compact: 8px;
  --ui-rect-chip-compact: 6px;
  --ui-rect-menu-compact: 8px;
  --ui-rect-highlight-compact: 4px;
  /* Actions, lists, tabs and toasts (AZCO-342). */
  --ui-list-surface-padding: var(--layout-gap);
  /* A record list's surface from 960px (AZCO-528): none, the table on the page. */
  --ui-record-surface-padding: 0;
  --ui-record-surface-radius: 0;
  --ui-record-surface-background: transparent;
  --ui-toast-radius: var(--ui-radius-panel);
  --ui-toast-font-size: var(--ui-text-footnote);
  --ui-field-padding: 6px 12px;
  --ui-field-touch-padding: 10px 12px;
  --ui-field-compact-padding: 5px 10px;
  --ui-field-font-size: var(--ui-text-subhead);
  --ui-step-screen-width: 560px;
  --ui-step-screen-layer: 50;
}
/* Derived colours (AZCO-491): from the inputs only, with color-mix(in srgb, …)
   and light-dark() where light and dark themes differ. Percentages are of the
   first colour; "ink n%" is n% ink over the canvas. Defined again on every
   element with its own template, so a nested template derives from its own
   inputs. Contrasts per palette are in docs/design.md (Themes and custom colours). */
:root,
[data-ui-template] {
  /* Optional inputs' defaults. */
  --ui-accent: var(--control-primary);
  --control-danger: light-dark(#934c38, #f0a58f);
  --control-danger-solid: light-dark(var(--control-danger), #b4472f);
  --ui-tint-warm: light-dark(#94704e, #b08a66);
  --ui-tint-cool: light-dark(#627b87, #7e9aa8);
  /* Text: secondary (≥4.5:1 on every row surface, with hover or current on it) and placeholder (≥3:1). */
  --ui-ink-secondary-base: light-dark(color-mix(in srgb, var(--ink) 80%, var(--ui-canvas)), color-mix(in srgb, var(--ink) 88%, var(--ui-canvas)));
  --muted: var(--ui-ink-secondary-base);
  --ui-placeholder: light-dark(color-mix(in srgb, var(--ink) 62%, var(--ui-canvas)), color-mix(in srgb, var(--ink) 58%, var(--ui-canvas)));
  /* Chrome: the sidebar, rail, tab bar and top bar (about 1.08–1.12:1 against the canvas), and quiet panels. */
  --ui-surface-subtle: color-mix(in srgb, var(--ink) 5%, var(--ui-canvas));
  /* Lines: separators and group edges (--line, about 1.25:1); control and field edges (≥2:1); the strong edge under
     prefers-contrast: more (≥3:1). */
  --line: light-dark(color-mix(in srgb, var(--ink) 12%, var(--ui-canvas)), color-mix(in srgb, var(--ink) 13%, var(--ui-canvas)));
  --control-border: light-dark(color-mix(in srgb, var(--ink) 38%, var(--ui-canvas)), color-mix(in srgb, var(--ink) 30%, var(--ui-canvas)));
  --control-border-hover: light-dark(color-mix(in srgb, var(--ink) 52%, var(--ui-canvas)), color-mix(in srgb, var(--ink) 42%, var(--ui-canvas)));
  --ui-field-border-strong: light-dark(color-mix(in srgb, var(--ink) 58%, var(--ui-canvas)), color-mix(in srgb, var(--ink) 45%, var(--ui-canvas)));
  /* Surfaces. Light: cards and controls a little whiter than the canvas, elevated surfaces white, the grouped canvas
     (phones' inset groups) ink 3.5%. Dark: the canvas is the grouped canvas, and each layer lifts it with ink: cards
     7%, cards in sheets 11%, menus and sheets 14%. */
  --control-surface: light-dark(color-mix(in srgb, var(--ui-canvas) 30%, #fff), color-mix(in srgb, var(--ink) 7%, var(--ui-canvas)));
  --ui-card: var(--control-surface);
  --ui-surface-grouped-base: light-dark(color-mix(in srgb, var(--ink) 3.5%, var(--ui-canvas)), var(--ui-canvas));
  --ui-surface-elevated: light-dark(#fff, color-mix(in srgb, var(--ink) 14%, var(--ui-canvas)));
  --ui-surface-grouped-elevated: light-dark(var(--ui-surface-grouped-base), var(--ui-card));
  --ui-surface-card-elevated: light-dark(var(--ui-card), color-mix(in srgb, var(--ink) 11%, var(--ui-canvas)));
  --ui-surface-card-media: color-mix(in srgb, var(--ink) 6%, var(--ui-canvas));
  --ui-surface-illustration: color-mix(in srgb, var(--ink) 2.5%, var(--ui-canvas));
  --ui-surface-matte: light-dark(color-mix(in srgb, var(--ink) 7%, var(--ui-canvas)), color-mix(in srgb, #000 30%, var(--ui-canvas)));
  --ui-surface-choice: light-dark(color-mix(in srgb, var(--ui-accent) 6%, var(--ui-canvas)), color-mix(in srgb, var(--ui-accent) 12%, var(--ui-canvas)));
  --ui-accent-soft: var(--ui-surface-choice);
  --ui-avatar-surface: var(--ui-surface-choice);
  --ui-avatar-ink: var(--ink);
  --ui-notice-surface: light-dark(color-mix(in srgb, var(--ui-accent) 7%, var(--ui-canvas)), color-mix(in srgb, var(--ui-accent) 12%, var(--ui-canvas)));
  --ui-record-header-background: var(--ui-canvas);
  /* Fills (AZCO-561): row hover 6% of ink (dark 8%), current and selected rows, the tab pill and a toggled
     toolbar icon 14% (dark 16%). Never on a merely tappable control. */
  --ui-surface-row-hover: light-dark(color-mix(in srgb, var(--ink) 6%, transparent), color-mix(in srgb, var(--ink) 8%, transparent));
  --ui-fill-current: light-dark(color-mix(in srgb, var(--ink) 14%, transparent), color-mix(in srgb, var(--ink) 16%, transparent));
  /* Legacy opaque fills for apps' own controls. */
  --control-hover: color-mix(in srgb, var(--ink) 6%, var(--control-surface));
  --control-hover-neutral: var(--control-hover);
  /* Actions: the primary's hover moves 12% toward its label; chips and selected choices take the primary. */
  --control-primary-hover: color-mix(in srgb, var(--control-primary) 88%, var(--control-on-primary));
  --control-primary-bg: var(--control-primary);
  --ui-selected: var(--control-primary);
  --ui-selected-hover: var(--control-primary-hover);
  --ui-on-selected: var(--control-on-primary);
  --ui-chip-ink: var(--control-primary);
  --ui-primary-missing-surface: color-mix(in srgb, var(--ink) 16%, var(--ui-canvas));
  --ui-primary-missing-ink: var(--ink);
  --ui-button-surface: var(--control-surface);
  --ui-button-border: 1px solid var(--control-border);
  --ui-list-surface-border: 1px solid var(--control-border);
  --ui-loading-track: var(--line);
  --ui-loading-bar: var(--control-primary);
  /* The keyboard focus ring, a focused field's edge and the keyboard row highlight: the accent. */
  --ui-focus-ring-color: var(--ui-accent);
  /* Danger, from its input. */
  --control-danger-surface: light-dark(color-mix(in srgb, var(--control-danger) 8%, var(--ui-canvas)), color-mix(in srgb, var(--control-danger) 16%, var(--ui-canvas)));
  --control-danger-border: color-mix(in srgb, var(--control-danger) 45%, var(--ui-canvas));
  --control-danger-hover: light-dark(color-mix(in srgb, var(--control-danger) 14%, var(--ui-canvas)), color-mix(in srgb, var(--control-danger) 24%, var(--ui-canvas)));
  --ui-notice-danger-surface: var(--control-danger-surface);
  --control-on-danger: #ffffff;
  /* Disabled states, distinct from enabled ones. */
  --control-disabled-surface: color-mix(in srgb, var(--ink) 6%, var(--ui-canvas));
  --control-disabled-ink: color-mix(in srgb, var(--ink) 45%, var(--ui-canvas));
  --control-primary-disabled: color-mix(in srgb, var(--control-primary) 35%, var(--ui-canvas));
  --ui-field-disabled-surface: color-mix(in srgb, var(--ink) 3%, var(--ui-canvas));
  --ui-field-disabled-border: var(--line);
  --ui-field-disabled-ink: color-mix(in srgb, var(--ink) 48%, var(--ui-canvas));
  /* Compact tooltips: the ink, with the canvas for text. */
  --ui-tooltip-surface: var(--ink);
  --ui-tooltip-ink: var(--ui-canvas);
  /* Shadows: ink-tinted in light themes, black in dark ones, where tiles rest on an edge instead. */
  --ui-shadow-overlay: 0 8px 22px light-dark(color-mix(in srgb, var(--ink) 9%, transparent), rgb(0 0 0 / 0.6));
  --ui-shadow-raised: 0 5px 18px light-dark(color-mix(in srgb, var(--ink) 12%, transparent), rgb(0 0 0 / 0.5)), 0 2px 5px light-dark(color-mix(in srgb, var(--ink) 6%, transparent), rgb(0 0 0 / 0.35));
  --ui-toast-shadow: var(--ui-shadow-overlay);
  --ui-tile-shadow: 0 0 0 1px light-dark(transparent, var(--line)), 0 1px 2px light-dark(color-mix(in srgb, var(--ink) 14%, transparent), transparent), 0 1px 4px light-dark(color-mix(in srgb, var(--ink) 6%, transparent), transparent);
  --ui-tile-hover-shadow: 0 0 0 1px light-dark(transparent, var(--control-border)), var(--ui-shadow-raised);
  /* A strip tile's height (AZCO-817): five fit a phone or desktop screen with a title. */
  --ui-tile-strip-height: 88px;
  /* Scrims: the modal backdrop, and the shade over the page a phone push or pop leaves (AZCO-491). */
  --ui-backdrop: light-dark(color-mix(in srgb, var(--ink) 35%, transparent), rgb(0 0 0 / 0.55));
  --ui-transition-shade: light-dark(color-mix(in srgb, var(--ink) 14%, transparent), rgb(0 0 0 / 0.3));
  /* A stacked step (StepLayer, AZCO-827): a lighter scrim than a modal's, so the screen beneath stays readable, and its
     card's corners. */
  --ui-step-layer-backdrop: light-dark(color-mix(in srgb, var(--ink) 18%, transparent), rgb(0 0 0 / 0.45));
  --ui-step-layer-radius: 18px; /* radius: shape the stacked step's card */
  /* platform-web's full-screen media stage, the document viewer's bar and its caption ink: neutral in every theme. */
  --ui-media-stage: #262626;
  --ui-media-bar: #1a1a1a;
  --ui-media-bar-ink-secondary: #d4d4d4;
  /* Feedback tones: neutral from the ink; the others carry their meaning in their hue, one set per scheme. */
  --feedback-neutral-background: color-mix(in srgb, var(--ink) 5%, var(--ui-canvas));
  --feedback-neutral-foreground: var(--ui-ink-secondary-base);
  --feedback-neutral-border: var(--line);
  --feedback-review-background: light-dark(#e7eef6, #1c2b3d);
  --feedback-review-foreground: light-dark(#395675, #a8c8ec);
  --feedback-review-border: light-dark(#c6d4e3, #2e4560);
  --feedback-ready-background: light-dark(#e5efdf, #1e3527);
  --feedback-ready-foreground: light-dark(#365328, #a6d99a);
  --feedback-ready-border: light-dark(#cbd7c1, #2e4d38);
  --feedback-working-background: light-dark(#f4efcf, #35301a);
  --feedback-working-foreground: light-dark(#6d6226, #e3d58c);
  --feedback-working-border: light-dark(#ddd4a3, #544b25);
  --feedback-attention-background: light-dark(#f8edd7, #3b2e16);
  --feedback-attention-foreground: light-dark(#785b22, #e9c78c);
  --feedback-attention-border: light-dark(#e0d2ac, #5a4520);
}
/* From 960px an in-page section heading is headline, 15px (AZCO-491). */
@media (min-width: 960px), (not (pointer: coarse)) {
  :root {
    --ui-title-size: var(--ui-text-headline);
  }
}
/* Sizes an app may set on :root (AZCO-407). The controls read them with these
   defaults as fallbacks. No template sets them, so an app's plain :root rule
   applies under any template:
   --ui-button-weight (400): the label weight of every .ui-button;
   --ui-button-primary-weight (500): the label weight of .ui-button--primary
     (AZCO-491: no label is bolder than 500);
   --ui-button-big-weight (500): the label weight of .ui-button--big, set
     independently of --ui-button-weight;
   --ui-button-big-height (56px): the height of .ui-button--big, and the side
     of a big icon button. The big tier and both big sizes apply to phones
     only (below 960px, AZCO-545); from 960px a --big button is a normal one;
   --ui-step-screen-title-size (--ui-text-large-title, 34px at the default
     size): StepScreen's title, at most 4px under the large title on screens
     up to 380px wide. */
/* Resolved tokens and platform constants (AZCO-528). Only this file defines
   them, never a template, so the shape, density and contrast rules below
   always apply. The shape comes from data-ui-shape on <html> (platform-web
   sets it from controls.shape) through --ui-shape-*: capsule by default.
   Elements that carry their own data-ui-template resolve them again, so a
   nested template keeps its own colours and corners. */
:root,
[data-ui-template] {
  --ui-radius-control: var(--ui-shape-control, 999px);
  --ui-radius-field: var(--ui-shape-field, 999px);
  --ui-radius-chip: var(--ui-shape-chip, 999px);
  /* Buttons are controls (D1): capsules by default, the template's control
     corners under controls.shape "rectangular". */
  --ui-radius-button: var(--ui-radius-control);
  --ui-radius-field-multiline: min(var(--ui-radius-field), 22px);
  /* Text must clear the curved corners, including the first and last lines (AZCO-755). */
  --ui-field-multiline-padding: 10px max(12px, var(--ui-radius-field-multiline));
  /* Navigation has no enclosing menu: capsule highlights remain pills at any row height. */
  --ui-radius-navigation: var(--ui-shape-highlight, 999px);
  /* Capsule menus: half a row plus the inset. */
  --ui-radius-menu: var(--ui-shape-menu, 28px);
  /* Row highlights inside menus and lists: concentric with the menu,
     unless a template's rectangular shape sets its own. */
  --ui-radius-highlight: var(
    --ui-shape-highlight,
    max(0px, calc(var(--ui-radius-menu) - var(--ui-menu-inset)))
  );
  /* Grouped canvas and secondary ink, resolved against this element's template. */
  --ui-surface-grouped: var(--ui-surface-grouped-base);
  --ui-ink-secondary: var(--ui-ink-secondary-base);
  --ui-field-border: var(--control-border);
  /* Thin scrollbars with no track (AZCO-552): an ink-based thumb, darker on hover. */
  --ui-scrollbar-thumb: color-mix(in srgb, var(--ink) 24%, transparent);
  --ui-scrollbar-thumb-hover: color-mix(in srgb, var(--ink) 40%, transparent);
  /* The phone's bar discs and capsules (AZCO-556, AZCO-585): the template's raised surface (white on Classic, #373d39
     on Night) under a saturate(180%) blur(12px) backdrop, with one soft shadow and no tight layer, border or ring. */
  --ui-disc-surface: color-mix(in srgb, var(--ui-surface-elevated) 88%, transparent);
  --ui-disc-shadow: 0 2px 10px rgb(0 0 0 / 0.08);
  /* Concentric inner corners: media inset in a tile; a block inside a grouped card. */
  --ui-radius-card-inner: max(4px, calc(var(--ui-radius-card) - 8px));
  --ui-radius-group-inner: max(4px, calc(var(--ui-radius-group) - 16px));
}
:root {
  /* Avatars, knobs, dots and spinners: never switched by the shape. */
  --ui-radius-round: 50%;
  --ui-menu-inset: 6px;
  /* Containers keep their radii in both shapes. */
  --ui-radius-sheet: 24px;
  --ui-radius-dialog: 20px;
  --ui-radius-alert: 24px;
  --ui-radius-group: 24px;
  --ui-radius-action-sheet: 20px;
  /* Heights (touch density). */
  --ui-height-large: 52px;
  --ui-height-row-2: 60px;
  --ui-height-record-row: 64px;
  /* Record lists (AZCO-528, record-list.css): how far a phone list reaches past its container (the page gutter where
     the shell pads its page by one), the band's height and its gaps to the tabs above and the first row below, and
     separators' extra leading inset after an icon or avatar. */
  --ui-list-bleed: 0px;
  /* The text edge inside a list that reaches the page's edges (AZCO-542): the band's and the first and last cells'
     inline padding, which the shell sets to its content edge. */
  --ui-list-edge: 0px;
  --ui-list-band-height: 44px;
  --ui-list-band-gap-before: 12px;
  --ui-list-band-gap-after: 4px;
  --ui-list-separator: var(--line, var(--control-border));
  --ui-list-separator-inset: 0px;
  /* Where sticky list chrome stops: under the shell's page header, which sets it. */
  --ui-sticky-top: 0px;
  --ui-height-menu-row: 44px;
  --ui-height-menu-row-2: 60px;
  /* A value pop-up's row (AZCO-549): the menu row on touch, a tight 26px one line in compact density. */
  --ui-height-menu-row-select: 44px;
  /* The control height (AZCO-576): controls that sit together share one height, 44px on phones and touch screens and
     36px in compact density (without a coarse pointer, AZCO-755). Buttons, chips, the segmented control, select triggers
     and fields all read it, through these names; templates never set them, so no template or shape changes them.
     ui-button--big (--ui-button-big-height) is the one exception: a primary pinned to the bottom of a phone screen. */
  --ui-height-control: 44px;
  --control-height: var(--ui-height-control);
  --ui-field-height: var(--ui-height-control);
  --ui-chip-height: var(--ui-height-control);
  --ui-height-segmented: var(--ui-height-control);
  /* Legacy small corner token; shared select triggers now follow --ui-radius-field (AZCO-748). */
  --ui-radius-small: 6px;
  /* Retired (AZCO-556): no bar button reads them; removed after 0.14. */
  --ui-disc: 40px;
  --ui-disc-target: 44px;
  /* Bar buttons (AZCO-556): a 44px target at every density. Phones draw a disc that fills it, 44px (AZCO-585), or one
     44px capsule for two or more, with a 22px glyph in ink; from 960px the glyph is plain, 20px, in secondary ink that
     darkens to ink on hover, over the row-hover fill. */
  --ui-bar-target: 44px;
  --ui-bar-disc: 44px;
  --ui-bar-glyph: 22px;
  --ui-bar-glyph-stroke: 2;
  --ui-bar-ink: var(--ink);
  --ui-avatar-face: 34px;
  /* States and motion. */
  --ui-scrollbar-size: 8px;
  --ui-pressed-opacity: 0.6;
  --ui-pressed-delay-touch: 90ms;
  --ui-pressed-release: 150ms;
  --ui-focus-ring-width: 2px;
  --ui-focus-ring-offset: 2px;
  --ui-ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ui-motion-sheet: 380ms;
  --ui-motion-menu-open: 300ms;
  --ui-motion-menu-close: 180ms;
  --ui-motion-indicator: 240ms;
  /* Programmatic closes and exits accelerate away. */
  --ui-ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ui-motion-exit: 200ms;
  /* The segment thumb's inset ring of secondary ink under prefers-contrast: more (AZCO-647). */
  --ui-segment-ring-width: 1px;
  /* Retired names, read by apps only, removed after 0.13 (AZCO-528). Platform
     controls no longer press in, and text buttons have no hover. */
  --ui-pressed-scale: 1;
  --ui-button-hover-surface: var(--control-hover);
  --ui-button-hover-shadow: var(--ui-tile-hover-shadow);
  --ui-tabs-rule: 0;
  --ui-tabs-line: var(--control-border);
  --ui-tabs-bleed: 8px;
  --ui-tabs-hover-ink: var(--ink);
  --ui-tabs-hover-surface: var(--control-hover-neutral);
}
:root[data-ui-shape="rectangular"],
:root[data-ui-shape="rectangular"] [data-ui-template] {
  --ui-shape-control: var(--ui-rect-control);
  --ui-shape-field: var(--ui-rect-field);
  --ui-shape-chip: var(--ui-rect-chip);
  --ui-shape-menu: var(--ui-rect-menu);
  --ui-shape-highlight: var(--ui-rect-highlight);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root[data-ui-shape="hybrid"],
  :root[data-ui-shape="hybrid"] [data-ui-template] {
    --ui-shape-control: var(--ui-rect-control);
    --ui-shape-field: var(--ui-rect-field);
    --ui-shape-chip: var(--ui-rect-chip);
    --ui-shape-menu: var(--ui-rect-menu);
    --ui-shape-highlight: var(--ui-rect-highlight);
  }
  :root {
    --ui-radius-group: 14px;
    --ui-radius-alert: 16px;
    --ui-bar-glyph: 20px;
    --ui-bar-glyph-stroke: 1.8;
    --ui-bar-ink: var(--ui-ink-secondary);
  }
}
/* Compact density: no coarse pointer, at any width (AZCO-637). Touch laptops and
   tablets keep touch sizes. */
@media (not (any-pointer: coarse)) {
  :root {
    --ui-height-large: 40px;
    --ui-height-row-2: 56px;
    --ui-height-record-row: 48px;
    --ui-height-menu-row: 32px;
    --ui-height-menu-row-2: 44px;
    --ui-height-menu-row-select: 26px;
    --ui-height-control: 36px;
    --ui-disc: 32px;
    --ui-disc-target: 32px;
    --ui-avatar-face: 28px;
    --ui-shape-menu: 22px;
  }
  :root[data-ui-shape="rectangular"],
  :root[data-ui-shape="rectangular"] [data-ui-template],
  :root[data-ui-shape="hybrid"],
  :root[data-ui-shape="hybrid"] [data-ui-template] {
    --ui-shape-control: var(--ui-rect-control-compact);
    --ui-shape-field: var(--ui-rect-field-compact);
    --ui-shape-chip: var(--ui-rect-chip-compact);
    --ui-shape-menu: var(--ui-rect-menu-compact);
    --ui-shape-highlight: var(--ui-rect-highlight-compact);
  }
}
@media (prefers-contrast: more) {
  :root,
  [data-ui-template] {
    --ui-ink-secondary: var(--ink);
    --ui-field-border: var(--ui-field-border-strong);
  }
  :root {
    --ui-segment-ring-width: 1.5px;
  }
}
@media (max-width: 600px) {
  :root {
    --layout-gap: 12px;
  }
}
/* Bar glyphs (AZCO-556): one ‹ and one × everywhere, sized by --ui-bar-glyph (22px on phones, 20px from 960px) at
   --ui-bar-glyph-stroke (2, then 1.8). */
.ui-bar-glyph {
  flex: none;
  width: var(--ui-bar-glyph, 22px);
  height: var(--ui-bar-glyph, 22px);
  stroke-width: var(--ui-bar-glyph-stroke, 2);
}
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* A link styled as a button matches a <button>, whose default box is the border box. */
  box-sizing: border-box;
  /* The control height (AZCO-576): 44px on phones and touch, 36px in compact density (tokens.css). The block padding
     only matters when a label wraps. */
  min-height: var(--control-height, 44px);
  padding: 4px 12px;
  /* Templates choose an outlined (default) or filled secondary action. */
  border: var(--ui-button-border);
  border-radius: var(--ui-radius-button, var(--ui-radius-control));
  background: var(--ui-button-surface);
  color: var(--control-primary);
  font-family: inherit;
  font-size: var(--ui-control-font-size, var(--ui-text-subhead));
  /* The label weight of every action (AZCO-407); the big tier reads --ui-button-big-weight. */
  font-weight: var(--ui-button-weight, 400);
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
}
.ui-button--primary {
  background: var(--control-primary);
  border-color: var(--control-primary);
  color: var(--control-on-primary);
  /* The one medium label among actions (AZCO-491); every other action is regular. */
  font-weight: var(--ui-button-primary-weight, 500);
}
@media (hover: hover) and (pointer: fine) {
  :is(.ui-button--primary):hover:not(:disabled) {
    background: var(--control-primary-hover);
    border-color: var(--control-primary-hover);
  }
}
.ui-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--control-primary);
}
.ui-button--danger {
  color: var(--control-danger);
}
:is(.ui-button):disabled {
  cursor: not-allowed;
}
.ui-field {
  display: grid;
  gap: 8px;
  font-size: var(--ui-field-font-size);
  font-weight: 400;
}
.ui-notice {
  border-radius: var(--ui-radius-card-compact);
  padding: 12px 16px;
  background: var(--ui-notice-surface, #edf1e5);
  color: var(--ink);
}
.ui-notice--error {
  background: var(--ui-notice-danger-surface, #faf0eb);
  color: var(--control-danger);
}
.ui-button.ui-button--compact,
.ui-input.ui-input--compact {
  min-height: 30px;
  padding: 5px 10px;
  font-size: var(--ui-text-footnote);
  line-height: 1.35;
}
.ui-input.ui-input--compact {
  padding: var(--ui-field-compact-padding);
}
@media (any-pointer: coarse) {
  .ui-button.ui-button--compact,
  .ui-input.ui-input--compact {
    min-height: 44px;
  }
  .ui-input.ui-input--compact {
    font-size: var(--ui-text-field);
  }
}
@media (any-pointer: coarse) {
  .ui-button {
    min-height: 44px;
    padding: 8px 12px;
  }
  .ui-button.ui-button--compact {
    min-height: 44px;
    padding: 6px 10px;
  }
}
/* Keyboard focus (AZCO-528, D6): a 2px ring in the template's accent, 2px
   outside the control, that follows its corners (outline follows
   border-radius). Only keyboard focus shows it: :focus-visible, minus focus a
   dialog or menu returned quietly (data-restored-focus) and, where
   platform-web tracks input modality, anything after a pointer or touch.
   Menus and lists move an accent row highlight instead of a ring. Text fields
   never ring (AZCO-540): focus turns their border the accent (below); a native
   select is a button-like picker and keeps the ring. The selectors stay at
   zero specificity, so a control's own corner wins. */
:where(
    .ui-button,
    select.ui-input,
    .ui-field :is(select, input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"])),
    .ui-toolbar-icon,
    .ui-navigation-trigger,
    .ui-select-trigger,
    .ui-action-menu-trigger,
    .ui-menu-trigger,
    .ui-tabs [role="tab"],
    .ui-underline-item,
    .ui-segment,
    .ui-tile,
    .ui-choice-field input,
    .ui-checkbox-field input,
    label.ui-choice input,
    .ui-switch-field,
    .ui-disclosure-panel > summary,
    .ui-table-scroll,
    .ui-data-table a,
    .ui-status-messages :is(a, button),
    .ui-update-banner :is(a, button),
    .ui-card-interaction,
    .ui-chip,
    .ui-email-chip :is(.ui-email-chip-label, .ui-email-chip-remove),
    .ui-search-select-clear,
    .ui-step-flow-back,
    .ui-carousel-arrow,
    .ui-carousel-dot,
    .ui-carousel-viewport,
    .ui-prose a,
    .ui-prose :is(pre, .ui-table-scroll)
  ):focus-visible:not([data-restored-focus]) {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: var(--ui-focus-ring-offset);
}
/* Rows flush with their card or scroller take the ring inside their edge. */
:where(.ui-switch-row):focus-visible:not([data-restored-focus]) {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}
/* Radio, segment and choice-card inputs are visually hidden: their label
   takes the ring. */
:where(.ui-choice-option, label.ui-choice-card):has(input:focus-visible:not([data-restored-focus])) {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: var(--ui-focus-ring-offset);
}
/* After a pointer or touch (platform-web sets data-input-modality), focus a
   script moved stays quiet until the next deliberate key. */
[data-input-modality="pointer"]
  :where(
    .ui-button,
    select.ui-input,
    .ui-field :is(select, input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"])),
    .ui-toolbar-icon,
    .ui-navigation-trigger,
    .ui-select-trigger,
    .ui-action-menu-trigger,
    .ui-menu-trigger,
    .ui-tabs [role="tab"],
    .ui-underline-item,
    .ui-segment,
    .ui-tile,
    .ui-switch-field,
    .ui-switch-row,
    .ui-chip,
    .ui-card-interaction,
    .ui-choice-option,
    label.ui-choice-card,
    button,
    a,
    summary,
    [role="button"]
  ):is(:focus-visible, :has(input:focus-visible)) {
  outline: none;
}
/* Focus a dialog or menu returned quietly shows no ring, not even the
   browser's own, until the next key or press clears the marker. */
:where([data-restored-focus]):focus-visible {
  outline: none;
}
/* Navigation and announcement targets (a page title or dialog heading that
   takes programmatic focus) are content, not controls: no ring. */
:where(h1, h2, h3, h4, h5, h6, main, [role="heading"], [role="main"])[tabindex="-1"]:focus {
  outline: none;
}
/* A toolbar toggle that is on takes the current fill (D11: grey means selected). */
.ui-toolbar-icon--toggle[aria-pressed="true"] {
  background: var(--ui-fill-current);
}
/* Clickable cards and tiles that opt in lift on pointer hover (a tile). */
@media (hover: hover) and (pointer: fine) {
  .ui-card-interaction:hover:not(:disabled) {
    box-shadow: var(--ui-tile-hover-shadow);
  }
}
@media (forced-colors: active) {
  :where(
      .ui-button,
      select.ui-input,
      .ui-field :is(select, input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"])),
      .ui-toolbar-icon,
      .ui-navigation-trigger,
      .ui-select-trigger,
      .ui-action-menu-trigger,
      .ui-menu-trigger,
      .ui-menu-item,
      .ui-tabs [role="tab"],
      .ui-underline-item,
      .ui-segment,
      .ui-tile,
      .ui-checkbox-field input,
      label.ui-choice input,
      .ui-switch-field,
      .ui-switch-row,
      .ui-chip,
      .ui-disclosure-panel > summary,
      .ui-data-table a,
      .ui-status-messages :is(a, button),
      .ui-update-banner :is(a, button),
      .ui-card-interaction
    ):focus-visible,
  :where(.ui-choice-option, label.ui-choice-card):has(input:focus-visible) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
/* Pressed (AZCO-524, AZCO-528): controls dip to 0.6 while held, after 90ms on
   touch so a scroll never flickers them, and release over 150ms. Nothing
   scales; an open menu's trigger doesn't dip; switches show their state. */
:where(
    .ui-button,
    .ui-toolbar-icon,
    .ui-navigation-trigger,
    .ui-select-trigger,
    .ui-action-menu-trigger,
    .ui-menu-trigger,
    .ui-chip,
    .ui-email-chip-remove,
    .ui-search-select-clear,
    .ui-step-flow-back,
    .ui-status-message-close,
    .ui-carousel-arrow
  ) {
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--ui-pressed-release);
}
:where(
    .ui-button,
    .ui-toolbar-icon,
    .ui-navigation-trigger,
    .ui-select-trigger,
    .ui-action-menu-trigger,
    .ui-menu-trigger,
    .ui-chip,
    .ui-email-chip-remove,
    .ui-search-select-clear,
    .ui-step-flow-back,
    .ui-status-message-close,
    .ui-carousel-arrow
  ):active:not(:disabled, [aria-disabled="true"], [aria-expanded="true"], :has(> input:disabled)) {
  opacity: var(--ui-pressed-opacity);
  transition: opacity 0ms;
}
/* Rows dip their content, not their surface. */
:where(.ui-switch-row, .ui-menu-item, .ui-underline-item, .ui-segment, .ui-tile:not([data-kind="plain"]), label.ui-choice-card):active:not(:disabled, [aria-disabled="true"], :has(> input:disabled)) > * {
  opacity: var(--ui-pressed-opacity);
  transition: opacity 0ms;
}
@media (pointer: coarse) {
  :where(
      .ui-button,
      .ui-toolbar-icon,
      .ui-navigation-trigger,
      .ui-select-trigger,
      .ui-action-menu-trigger,
      .ui-menu-trigger,
      .ui-chip,
      .ui-email-chip-remove,
      .ui-search-select-clear,
      .ui-step-flow-back,
      .ui-status-message-close,
      .ui-carousel-arrow
    ):active:not(:disabled, [aria-disabled="true"], [aria-expanded="true"], :has(> input:disabled)),
  :where(.ui-switch-row, .ui-menu-item, .ui-underline-item, .ui-segment, .ui-tile:not([data-kind="plain"]), label.ui-choice-card):active:not(:disabled, [aria-disabled="true"], :has(> input:disabled)) > * {
    transition: opacity 0ms var(--ui-pressed-delay-touch);
  }
}
label.ui-choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}
.ui-choice input:is([type="radio"], [type="checkbox"]) {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--control-primary);
}
@media (any-pointer: coarse) {
  label.ui-choice {
    min-height: 44px;
  }
}
/* Toolbar icons: a compact 32px tier with utility glyphs, a header tier that
   keeps 44px targets on touch, and a labeled variant whose short label stays
   visible at every width. */
.ui-button.ui-button--toolbar-icon {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  flex: none;
}
.ui-toolbar-icon {
  --toolbar-icon-size: var(--ui-icon-action-size, 18px);
  --toolbar-icon-stroke: var(--ui-icon-action-stroke, 1.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--control-primary);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.ui-toolbar-icon--header {
  width: 36px;
  height: 36px;
}
@media (any-pointer: coarse) {
  .ui-toolbar-icon,
  .ui-toolbar-icon--header {
    width: 44px;
    height: 44px;
  }
}
.ui-toolbar-icon svg {
  flex: none;
  width: var(--toolbar-icon-size);
  height: var(--toolbar-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--toolbar-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-toolbar-icon.ui-toolbar-icon--labeled {
  /* Sized by its label, even in a toolbar that fixes its icons' flex basis. */
  flex: 0 0 auto;
  width: auto;
  min-width: 32px;
  gap: 6px;
  padding-inline: 10px;
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  line-height: 1.385;
  white-space: nowrap;
}
.ui-toolbar-icon--header.ui-toolbar-icon--labeled {
  min-width: 36px;
}
@media (hover: hover) and (pointer: fine) {
  /* Icon-only buttons: a faint fill at the button's corners (D8). */
  .ui-toolbar-icon:hover:not(:disabled):not([aria-disabled="true"], [aria-pressed="true"], .ui-toolbar-icon--labeled) {
    background: var(--ui-surface-row-hover);
  }
}
.ui-toolbar-icon:is(:disabled, [aria-disabled="true"]) {
  opacity: 0.4;
  cursor: default;
}
/* Toggle state is conveyed by the glyph, aria-pressed and the current fill. */
.ui-toolbar-icon--toggle[aria-pressed="true"] svg {
  fill: currentColor;
}
@media (max-width: 600px) {
  .ui-table--stacked {
    display: block;
    width: 100%;
  }
  .ui-table--stacked > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ui-table--stacked > tbody {
    display: block;
  }
  .ui-table--stacked > tbody > tr {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--control-border);
  }
  .ui-table--stacked > tbody > tr:last-child {
    border-bottom: 0;
  }
  .ui-table--stacked[class] > tbody > tr > :is(th, td) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 6px 0;
    border: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
  }
  .ui-table--stacked[class] > tbody > tr > :is(th, td)::before {
    content: attr(data-label);
    font-weight: 400;
    color: var(--muted);
  }
  .ui-table--stacked[class] > tbody > tr > :is(th, td) > * {
    min-width: 0;
    max-width: 100%;
    justify-self: start;
  }
  .ui-table--stacked[class] > tbody > tr > :is(th, td):empty {
    display: none;
  }
}
/* Navigation openers share a quiet target. Like other labelled triggers they
   take no hover (D8). Gutter offsets belong to their layout. */
.ui-navigation-trigger,
.ui-button.ui-navigation-trigger {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
}
/* The container part stays at zero specificity, so an app's own field rules
   (a dialog's textarea height, say) override these defaults. */
.ui-input,
:where(.ui-field) :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--ui-field-height, 44px);
  padding: var(--ui-field-padding, 10px 12px);
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-field);
  background-color: var(--control-surface);
  color: var(--control-primary);
  font: inherit;
  /* --ui-text-field: subhead, or at least 16px where iOS Safari zooms into a
     smaller field on focus (tokens.css). */
  font-size: var(--ui-text-field);
}
/* Fields take the control height (AZCO-576): 44px with touch padding on touch screens. */
@media (any-pointer: coarse) {
  .ui-input,
  .ui-field :is(input, select, textarea) {
    min-height: 44px;
    padding: var(--ui-field-touch-padding);
  }
}
.ui-field :is(input, textarea, select) {
  box-sizing: border-box;
  font-family: inherit;
  font-size: var(--ui-text-field);
  font-weight: 400;
  line-height: 1.5;
}
/* AZCO-871: iOS temporal inputs can add padding outside a percentage width
   (WebKit 301648). Size their margin box against the available space instead.
   Keep the native appearance and picker; the prefixed value covers older Safari. */
:is(input.ui-input, .ui-field input):is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
  width: -webkit-fill-available;
  width: stretch;
}
.ui-field :is(input, textarea)[placeholder]::placeholder {
  color: var(--ui-placeholder, #858e85);
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  font-style: italic;
  opacity: 1;
}
/* Shared fields stay crisp whatever an app's legacy field styles say: their
   surface, ink, boundary and corners win over feature rules. States below
   keep the same weight. */
:root body :is(input, select, textarea).ui-input {
  background-color: var(--control-surface);
  color: var(--control-primary);
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-field);
}
/* Text areas grow: their corners stop at 22px (--ui-radius-field-multiline). */
:root body textarea.ui-input,
.ui-field textarea {
  border-radius: var(--ui-radius-field-multiline);
  padding: var(--ui-field-multiline-padding);
}
/* A focused text field (AZCO-540) never shows the ring: its border turns the accent and thickens to 2px, inside its
   box, so nothing moves. This is the one implementation of the text-entry edge (AZCO-591): the platform's own fields
   (the Settings search among them) carry no focus border of their own, and focus-edge.test.tsx checks every one at
   exactly 2px. Any focus, keyboard or pointer; :is() and :focus:hover keep a hover border from winning. A
   native select keeps the ring (above). */
:is(.ui-input:not(select), .ui-field :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], .ui-email-list-input, .ui-email-chip-input), textarea), .ui-search-select-input, .platform-section-search input):is(:focus, :focus:hover),
:root body :is(input, textarea).ui-input:focus {
  border-color: var(--ui-focus-ring-color);
  box-shadow: inset 0 0 0 1px var(--ui-focus-ring-color);
  outline: none;
}
/* Field boundaries are otherwise quiet: hover never changes them; invalid fields take the danger color, focused too. */
:root body :is(input, select, textarea).ui-input[aria-invalid="true"],
:is(.ui-input, .ui-field :is(input, select, textarea))[aria-invalid="true"] {
  border-color: var(--control-danger);
}
:root body :is(input, textarea).ui-input[aria-invalid="true"]:focus,
:is(.ui-input, .ui-field :is(input, textarea))[aria-invalid="true"]:is(:focus, :focus:hover) {
  border-color: var(--control-danger);
  box-shadow: inset 0 0 0 1px var(--control-danger);
}
@media (forced-colors: active) {
  .ui-field :is(input, textarea)[placeholder]::placeholder {
    color: GrayText;
  }
  /* Forced colours drop the shadow: a focused field takes a 2px Highlight border, never an outline. The 1px it grows
     comes back from its margin, so nothing around it moves. */
  :is(.ui-input:not(select), .ui-field :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], .ui-email-list-input, .ui-email-chip-input), textarea), .ui-search-select-input, .platform-section-search input):focus,
  .ui-email-list-box:has(:is(.ui-email-list-input, .ui-email-chip-input):focus) {
    margin: -1px;
    border-width: 2px;
    border-color: Highlight;
    outline: none;
  }
}
/* Focused account-entry controls share a comfortable touch target on every screen. */
.ui-entry-controls :is(.ui-button:not(.ui-button--quiet), input) {
  min-height: 48px;
  padding-inline: 16px;
  border-radius: var(--ui-radius-button);
}
.ui-entry-controls input {
  border-radius: var(--ui-radius-field);
}
.ui-entry-controls .ui-field-heading {
  min-height: 20px;
}
.ui-entry-controls input[placeholder]::placeholder {
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  font-style: normal;
}
.ui-form-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  line-height: 1.54;
}
.ui-form-divider::before,
.ui-form-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--control-border);
}
/* Provider branding lives in the common control set. Apps that ship Google's
   brand font load "Google Sans"; otherwise the body face is used. */
/* Continue with Google is the secondary button (AZCO-528): its surface and
   edge, the control's corners, ink text, no hover of its own, an 18px mark. */
.ui-button.ui-button--google {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  gap: 10px;
  border-radius: var(--ui-radius-control);
  color: var(--ink);
  font: 500 var(--ui-text-subhead)/1.43 "Google Sans", var(--ui-font-body, sans-serif);
}
.ui-button--google img {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  object-fit: contain;
}
/* Native file inputs stay hidden when a shared button owns the picker. */
.ui-field input[type="file"][hidden],
input.ui-input[type="file"][hidden] {
  display: none;
}
/* Disabled is a distinct state that keeps the action's shape: a faint fill for
   ordinary actions and a lighter charcoal for primary ones, never a faded copy
   of the enabled look. In-flight actions keep their hierarchy while
   unavailable. Destructive actions keep their meaning across states. The
   :root body prefix keeps these states above feature styles. */
:root body .ui-button.ui-button--danger {
  background: var(--control-danger-surface);
  color: var(--control-danger);
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  :root body .ui-button.ui-button--danger:hover:not(:disabled) {
    background: var(--control-danger-hover);
    color: var(--control-danger);
  }
}
:root body .ui-button:disabled {
  opacity: 1;
  background: var(--control-disabled-surface);
  border-color: transparent;
  color: var(--control-disabled-ink);
  box-shadow: none;
}
:root body .ui-button.ui-button--primary:disabled {
  background: var(--control-primary-disabled);
  color: var(--control-on-primary);
}
:root body .ui-button.ui-button--quiet:disabled {
  border-color: transparent;
  background: transparent;
}
:root body .ui-button:disabled[data-pending="true"] {
  background: var(--ui-button-surface);
  color: var(--control-primary);
  opacity: 0.65;
  cursor: wait;
}
:root body .ui-button.ui-button--primary:disabled[data-pending="true"] {
  background: var(--control-primary);
  border-color: var(--control-primary);
  color: var(--control-on-primary);
}
:root body :is(input, select, textarea).ui-input:disabled {
  opacity: 1;
  background: var(--ui-field-disabled-surface);
  border-color: var(--ui-field-disabled-border);
  color: var(--ui-field-disabled-ink);
  cursor: not-allowed;
}
/* Mobile button tiers (AZCO-390), as modifiers of .ui-button:
   - ui-button--big: a full-width, 56px action, only for a primary pinned to the bottom of a phone screen (a sticky
     footer or a flow's footer, AZCO-576). Everywhere else, buttons take the control height that every control sitting
     beside them shares (controls.css);
   - ui-button--icon: an icon-only action, a disc at the control height (56px with --big on phones);
   - ui-button--round: the same disc (kept as a name for Back or Close in content).
   The tiers dip like every pressable control (controls.css). A primary that can't go on yet
   (`data-missing`, with aria-disabled) stays legible and says why, in
   --ui-primary-missing-surface and --ui-primary-missing-ink. A busy button
   (data-busy-spinner with aria-busy) keeps its width under a spinner; see the
   end of this file.
   Sizes (AZCO-407): --ui-button-big-height (56px) sets the big tier's height,
   and the side of an icon button with --big; --ui-button-big-weight (500) sets
   the big tier's label weight. Both apply below 960px only: the big tier is
   phone-only (AZCO-545). Every other action's label reads
   --ui-button-weight (400, controls.css), and a primary's
   --ui-button-primary-weight (500). The weights are independent; none is
   bolder than 500 by default (AZCO-491). */
/* The big tier is phone-only (AZCO-545): from 960px a --big button is a normal button of its tier (the control height,
   its own width, --ui-button-weight). */
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-button.ui-button--big {
    width: 100%;
    min-height: var(--ui-button-big-height, 56px);
    padding: 8px 20px;
    font-size: var(--ui-text-body);
    font-weight: var(--ui-button-big-weight, 500);
    line-height: 1.2;
  }
}
/* Icon-only buttons are discs (AZCO-585, AZCO-573): the control height square (44px on phones and touch, 32px in
   compact density, so a disc matches the buttons beside it), the disc surface and one soft shadow (the bar discs'
   tokens), no border. controls.shape "rectangular" makes it a rounded square at --ui-radius-control. A primary or
   danger icon button keeps its own fill and ink. Text buttons keep their own styles. */
.ui-button:is(.ui-button--icon, .ui-button--round) {
  flex: none;
  width: var(--control-height, 44px);
  min-width: var(--control-height, 44px);
  height: var(--control-height, 44px);
  min-height: var(--control-height, 44px);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  box-shadow: var(--ui-disc-shadow);
}
.ui-button:is(.ui-button--icon, .ui-button--round):not(.ui-button--primary) {
  background: var(--ui-disc-surface);
  color: var(--ink);
}
.ui-button:is(.ui-button--icon, .ui-button--round).ui-button--danger {
  color: var(--control-danger);
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-button.ui-button--icon.ui-button--big {
    width: var(--ui-button-big-height, 56px);
    min-width: var(--ui-button-big-height, 56px);
    height: var(--ui-button-big-height, 56px);
  }
}
:is(.ui-button--icon, .ui-button--round) > svg {
  width: 22px;
  height: 22px;
}
:is(.ui-button--big, .ui-button--icon, .ui-button--round) {
  touch-action: manipulation;
}
.ui-button.ui-button--primary[data-missing] {
  border-color: var(--ui-primary-missing-surface, var(--control-border));
  background: var(--ui-primary-missing-surface, var(--control-border));
  color: var(--ui-primary-missing-ink, var(--ink));
  box-shadow: none;
  cursor: default;
}
/* Busy spinner (AZCO-390), opt-in: a button with data-busy-spinner keeps its
   label's width while aria-busy="true", so nothing beside it moves. The label
   hides under a centered spinner in the button's text color, and a disabled
   busy button keeps its fill rather than the disabled look. Buttons without
   data-busy-spinner are unchanged by aria-busy. Say the busy state in text
   too (a polite status beside the button). The :root body prefix holds
   against the disabled states in controls.css. */
:root body .ui-button[data-busy-spinner][aria-busy="true"] {
  --ui-button-busy-ink: var(--control-primary);
  position: relative;
  color: transparent !important;
  cursor: progress;
}
:root body .ui-button.ui-button--primary[data-busy-spinner][aria-busy="true"] {
  --ui-button-busy-ink: var(--control-on-primary);
}
:root body .ui-button.ui-button--danger[data-busy-spinner][aria-busy="true"] {
  --ui-button-busy-ink: var(--control-danger);
}
:root body .ui-button[data-busy-spinner][aria-busy="true"] > * {
  visibility: hidden;
}
:root body .ui-button[data-busy-spinner][aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: auto;
  border: 2px solid var(--ui-button-busy-ink);
  border-right-color: transparent;
  border-radius: var(--ui-radius-round);
  animation: ui-button-busy-spin 800ms linear infinite;
}
:root body .ui-button[data-busy-spinner][aria-busy="true"]:disabled {
  border: var(--ui-button-border);
  background: var(--ui-button-surface);
}
:root body .ui-button.ui-button--primary[data-busy-spinner][aria-busy="true"]:disabled {
  border-color: var(--control-primary);
  background: var(--control-primary);
}
:root body .ui-button.ui-button--quiet[data-busy-spinner][aria-busy="true"]:disabled {
  border-color: transparent;
  background: transparent;
}
:root body .ui-button.ui-button--danger[data-busy-spinner][aria-busy="true"]:disabled {
  background: var(--control-danger-surface);
}
@keyframes ui-button-busy-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  :root body .ui-button[data-busy-spinner][aria-busy="true"]::after {
    animation-duration: 2400ms;
  }
}
/* Forced colors repaint the label's color, so the busy button opts out and
   draws its own system colors. */
@media (forced-colors: active) {
  :root body .ui-button[data-busy-spinner][aria-busy="true"] {
    forced-color-adjust: none;
    border-color: ButtonText;
    background: ButtonFace;
  }
  :root body .ui-button[data-busy-spinner][aria-busy="true"]::after {
    border-color: ButtonText;
    border-right-color: transparent;
  }
}
/* Forced colours drop the shadow: a disc keeps a 1px system edge. */
@media (forced-colors: active) {
  .ui-button:is(.ui-button--icon, .ui-button--round) {
    border: 1px solid ButtonText;
  }
}
/* Shared collection and content scale; feature styles own layout only.
   Section and item titles are 15px/500 and metadata 12px, through role tokens. */
.ui-section-title.ui-section-title,
.ui-item-title.ui-item-title {
  font-family: var(--ui-font-display, inherit);
  font-size: var(--ui-title-size, var(--ui-text-subhead));
  font-weight: var(--ui-title-weight, 500);
  line-height: 1.35;
  letter-spacing: normal;
}
.ui-meta.ui-meta {
  font-size: var(--ui-meta-size, var(--ui-text-caption));
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted);
}
/* Dense review workspaces and document readers share one reading hierarchy. */
.ui-reading {
  font-size: var(--ui-text-footnote);
  line-height: 1.5;
}
.ui-reading.ui-reading h2 {
  font-size: var(--ui-title-size, var(--ui-text-subhead));
  font-weight: var(--ui-title-weight, 500);
  line-height: 1.4;
}
.ui-reading.ui-reading h3 {
  font-size: var(--ui-text-subhead);
  font-weight: 500;
  line-height: 1.4;
}
.ui-reading.ui-reading h4 {
  font-size: var(--ui-text-footnote);
  font-weight: 500;
  line-height: 1.5;
}
.ui-reading.ui-reading :is(p, blockquote, dd):not(.ui-meta) {
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  line-height: 1.5;
}
.ui-reading .ui-tabs [role="tab"] {
  font-size: min(var(--ui-text-footnote), 19px);
}
.ui-reading.ui-reading .ui-meta {
  font-size: var(--ui-meta-size, var(--ui-text-caption));
  font-weight: 400;
  line-height: 1.45;
}
/* Report readers: one reading order, aligned evidence and a bounded line length. */
.ui-report-document {
  display: grid;
  gap: 28px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  padding: 8px 0 32px;
}
.ui-report-document :is(p, h3, h4) {
  margin: 0;
}
.ui-report-document--wording {
  gap: 16px;
}
.ui-report-context {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.ui-report-section {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.ui-report-section > p {
  max-width: 88ch;
}
.ui-report-facts {
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr);
  gap: 14px 24px;
  margin: 0;
}
.ui-report-facts dt {
  color: var(--muted);
  font-size: var(--ui-meta-size, var(--ui-text-caption));
  font-weight: 400;
}
.ui-report-facts dd {
  max-width: 80ch;
  margin: 0;
}
.ui-report-facts--sections {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.ui-report-facts--sections dd {
  max-width: 88ch;
  padding: 14px 12px 28px;
  margin: 0;
}
.ui-report-findings {
  display: grid;
  gap: 20px;
}
.ui-report-findings > section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0;
}
.ui-report-findings p {
  max-width: 88ch;
  padding-inline: 12px;
}
/* Tinted bands mark long report sections without enclosing them in cards.
   Band titles stop growing at their size for a 23px body (AZCO-526). */
.ui-report-overview {
  display: grid;
  gap: 22px;
  padding: 18px;
  background: color-mix(in srgb, var(--ui-tint-warm) 7%, var(--control-surface));
  border-block: 1px solid
    color-mix(in srgb, var(--ui-tint-warm) 22%, var(--control-surface));
}
.ui-report-document .ui-report-band {
  margin: 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--ui-tint-cool) 9%, var(--control-surface));
  border-block: 1px solid
    color-mix(in srgb, var(--ui-tint-cool) 27%, var(--control-surface));
  color: var(--ink);
  font-size: min(var(--ui-text-footnote), 19px);
  font-weight: 400;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .ui-report-document {
    gap: 24px;
    padding: 4px 0 24px;
  }
  .ui-report-facts,
  .ui-report-findings > section {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ui-report-facts dd:not(:last-child) {
    margin-bottom: 10px;
  }
  .ui-report-overview {
    padding: 12px;
  }
  .ui-report-findings p,
  .ui-report-facts--sections dd {
    padding-inline: 8px;
  }
}
.ui-field-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 20px;
}
.ui-field-heading > label {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-form-error {
  color: var(--control-danger, #a33d29);
  font-size: var(--ui-text-caption);
  line-height: 1.4;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ui-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ui-form-actions > :is(.ui-form-error, .ui-form-hint) {
  margin-right: auto;
  min-height: 34px;
  display: flex;
  align-items: center;
  flex: 1;
}
.ui-form-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}
.ui-field-heading--hidden-label > label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.ui-field-heading--hidden-label:not(:has(.ui-form-error:not(:empty))) {
  display: none;
}
.ui-field-heading--hidden-label:has(.ui-form-error:not(:empty)) {
  justify-content: flex-end;
}
.ui-form-feedback {
  min-block-size: 4.5em;
  font-size: var(--ui-text-footnote);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ui-form-feedback .ui-form-error {
  white-space: normal;
}
@media (max-width: 600px) {
  .ui-field-heading {
    min-height: 20px;
  }
  .ui-form-feedback {
    min-block-size: 7.5em;
  }
  .ui-form-actions {
    flex-wrap: wrap;
  }
  .ui-form-actions > :is(.ui-form-error, .ui-form-hint) {
    flex-basis: 100%;
    min-height: 34px;
  }
}
/* Compact toolbar feedback reserves two lines; longer messages expand accessibly. */
.ui-form-feedback--compact {
  min-block-size: 3em;
}
.ui-form-feedback--unreserved {
  min-block-size: 0;
}
.ui-choice-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.ui-choice-field legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.5;
}
.ui-choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
label.ui-choice-option {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
  flex: 1 1 180px;
  gap: 8px;
  cursor: pointer;
}
.ui-choice-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.ui-choice-option:has(input:disabled) {
  opacity: 0.55;
  cursor: default;
}
.ui-choice-option svg {
  width: 20px;
  height: 20px;
  flex: none;
}
/* Match button typography even where legacy dialog label rules are denser. The weight is segmented.css's: regular,
   and 500 on the thumb (AZCO-647; a weight here outranked the thumb's). */
:root body label.ui-choice-option {
  font-size: var(--ui-control-font-size, var(--ui-text-subhead));
  line-height: 1.35;
}
/* Compose fields with the standard footer without adding two vertical gaps. */
/* Rows keep their content height when the stack is a bounded scroll body:
   a squeezed auto row would let a control with a fixed minimum overlap the next. */
.ui-form-stack {
  display: grid;
  grid-auto-rows: max-content;
  gap: 16px;
  margin: 0;
}
dialog .ui-form-stack > .ui-form-actions {
  margin-top: 8px;
}
/* Optional footer guidance reserves its wrapped footprint before selection. */
.ui-form-hint {
  color: var(--muted);
  font-size: var(--ui-text-caption);
  line-height: 1.4;
  font-weight: 400;
  white-space: normal;
  overflow-wrap: anywhere;
}
.ui-form-hint[data-visible="false"] {
  visibility: hidden;
}
/* Keep short action labels intact while feedback retains its own reserved row. */
.ui-form-action-buttons {
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-width: 100%;
}
.ui-form-action-buttons > :is(button, a) {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .ui-form-actions:not(:has(> .ui-form-action-status)) {
    flex-direction: column;
    align-items: stretch;
  }
  .ui-form-actions > :is(.ui-form-error, .ui-form-hint) {
    flex: none;
    width: 100%;
  }
}
.ui-field-heading--hidden-label:not(:has(.ui-form-error[role="alert"])) {
  display: none;
}
.ui-field-optional {
  font-weight: 400;
}
.ui-flow-fields .ui-field {
  display: grid;
  gap: 8px;
}
.ui-flow-fields .ui-field-heading {
  min-height: 20px;
}
:root body .ui-field-heading > label {
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.5;
}
.ui-field-heading > label {
  display: block;
}
.ui-flow-reserved-field .ui-field {
  gap: 4px;
}
.ui-form-action-status {
  margin-right: auto;
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.ui-form-action-status > .ui-form-error:empty {
  display: none;
}
/* The ordinary footer divider becomes progress without adding a status row. */
.ui-form-progress-track {
  position: absolute;
  inset: -2px 0 auto;
  height: 3px;
  overflow: hidden;
  background: linear-gradient(
    transparent 1px,
    var(--control-border) 1px,
    var(--control-border) 2px,
    transparent 2px
  );
}
.ui-form-progress-track > span {
  display: block;
  height: 100%;
  background: var(--control-primary-bg, var(--control-primary));
  transition: width 180ms ease;
}
.ui-form-progress-status {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0;
}
.ui-form-progress-status > .ui-meta {
  min-width: 0;
}
dialog .ui-form-progress-status .ui-button {
  padding: 0;
  justify-content: flex-start;
  text-align: left;
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  color: var(--muted);
  white-space: normal;
}
/* The ordinary footer divider becomes progress without adding a status row. */
.ui-form-actions--progress {
  position: relative;
  padding-top: 12px;
}
dialog .ui-form-actions.ui-form-actions--progress {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  min-height: 64px;
  box-sizing: border-box;
}
@media (prefers-reduced-motion: reduce) {
  .ui-form-progress-track > span {
    transition: none;
  }
}
/* Fixed-frame footers anchor buttons to the shared outer inset, not the center of spare height. */
.ui-flow-footer .ui-form-action-status,
.ui-form-actions--progress > .ui-form-action-status {
  min-height: 36px;
  align-content: center;
}
@media (pointer: coarse) {
  .ui-flow-footer .ui-form-action-status,
  .ui-form-actions--progress > .ui-form-action-status {
    min-height: 44px;
  }
}
@media (max-width: 600px) {
  .ui-form-actions--progress > .ui-form-action-status {
    flex-basis: 100%;
    min-height: 20px;
  }
  dialog .ui-form-actions.ui-form-actions--progress {
    flex-wrap: wrap;
  }
}
/* A readable error row precedes actions when narrow dialogs cannot fit both. */
@media (max-width: 600px) {
  .ui-form-actions:has(> .ui-form-action-status > .ui-form-error:not(:empty)) {
    flex-wrap: wrap;
  }
  .ui-form-actions > .ui-form-action-status:has(> .ui-form-error:not(:empty)) {
    flex-basis: 100%;
  }
}
/* Dialog content still arriving waits in the footer gutter: label over the shared progress track. */
.ui-form-actions--loading > .ui-form-action-status {
  min-height: 36px;
  align-content: center;
}
/* The status overlays the hint's reserved footprint, so the slot keeps one height. */
.ui-form-action-status > span:has(> .ui-form-loading) {
  display: grid;
  align-items: center;
}
.ui-form-action-status > span:has(> .ui-form-loading) > * {
  grid-area: 1 / 1;
}
.ui-form-hint-reserve {
  visibility: hidden;
}
/* Phones give the status and any reserved hint their own full-width row above the actions. */
@media (max-width: 600px) {
  .ui-form-actions--loading {
    flex-wrap: wrap;
  }
  .ui-form-actions--loading > .ui-form-action-status {
    flex-basis: 100%;
    min-height: 20px;
  }
}
.ui-form-loading {
  display: inline-grid;
  justify-items: start;
  align-content: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: opacity 180ms ease;
}
.ui-form-loading[data-loading-phase="hidden"] {
  visibility: hidden;
}
.ui-form-loading[data-loading-phase="leaving"] {
  opacity: 0;
}
.ui-form-loading-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-form-loading-track {
  display: block;
  width: 72px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px; /* radius: shape a progress track is a capsule */
  background: var(--line);
}
.ui-form-loading-track > i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--control-primary);
  animation: ui-form-loading-progress 1.15s ease-in-out infinite;
}
@keyframes ui-form-loading-progress {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(340%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-form-loading {
    transition: none;
  }
  .ui-form-loading-track > i {
    animation: none;
    transform: translateX(70%);
  }
}
/* Multiline entry: concise guidance below, input actions and a growing variant. */
.ui-field-hint {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.45;
  font-weight: 400;
}
.ui-field-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ui-field-toolbar > .ui-button {
  flex: none;
}
.ui-field.ui-field--grow {
  display: flex;
  flex: 1 0 128px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 128px;
}
.ui-field.ui-field--grow > .ui-field-heading {
  flex: none;
}
.ui-field.ui-field--grow > .ui-field-heading > label {
  flex: 0 1 auto;
  min-width: 0;
}
.ui-field.ui-field--grow > textarea {
  flex: 1;
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  max-height: none;
  margin: 0;
  resize: none;
}
.ui-field textarea[data-resizable="false"] {
  resize: none;
}
/* Choice appearances. Radios and rows keep visible native inputs. */
.ui-choice-field > .ui-choice-legend--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-choice-copy {
  display: grid;
  min-width: 0;
}
.ui-choice-option .ui-choice-copy {
  display: inline-grid;
  justify-items: center;
}
.ui-choice-options--radios {
  gap: 8px 24px;
}
.ui-choice-options--rows {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel, 8px);
  overflow: hidden;
}
.ui-choice-options--rows label.ui-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.ui-choice-options--rows label.ui-choice:last-child {
  border-bottom: 0;
}
/* The chosen row: a leading check, no fill (AZCO-528). The radio stays a
   native radio, drawn as the check's 20px slot. */
.ui-choice-options--rows label.ui-choice > input[type="radio"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--control-primary);
}
.ui-choice-options--rows label.ui-choice > input[type="radio"]:checked {
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.ui-choice-options--rows label.ui-choice:has(> input:focus-visible:not([data-restored-focus])) > input[type="radio"] {
  color: var(--control-on-primary);
}
@media (forced-colors: active) {
  .ui-choice-options--rows label.ui-choice > input[type="radio"]:checked {
    background: CanvasText;
  }
}
.ui-choice-options--rows .ui-choice-copy {
  gap: 2px;
  font-weight: 400;
}
.ui-choice-options--rows .ui-field-hint {
  font-size: var(--ui-text-caption);
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
}
/* Segmented radios: segmented.css, shared with Tabs (AZCO-528). ChoiceField's option buttons are retired
   (AZCO-647): `appearance="buttons"` renders the segmented control. */
/* Described rows: keyboard focus moves the accent highlight (D6). */
.ui-choice-options--rows label.ui-choice:has(> input:focus-visible:not([data-restored-focus])) {
  background: var(--control-primary);
  color: var(--control-on-primary);
}
.ui-choice-options--rows label.ui-choice > input:focus-visible {
  outline: none;
}
.ui-choice-options--rows label.ui-choice:has(> input:focus-visible:not([data-restored-focus])) .ui-field-hint {
  color: var(--control-on-primary);
}
/* Checkboxes: shared label, spacing and touch target. */
.ui-checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.ui-checkbox-field input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--control-primary);
}
.ui-checkbox-copy {
  min-width: 0;
}
@media (any-pointer: coarse) {
  .ui-checkbox-field {
    min-height: 44px;
  }
}
/* Checkbox choices with supporting copy use one aligned, clickable row. */
.ui-checkbox-field--described {
  align-items: flex-start;
  padding: 12px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel, 8px);
  background: var(--control-surface);
}
.ui-checkbox-field--described input {
  margin-top: 1px;
}
.ui-checkbox-field--described .ui-checkbox-copy {
  display: grid;
  gap: 4px;
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.43;
}
.ui-checkbox-field--described .ui-field-hint {
  font-size: var(--ui-text-caption);
  line-height: 1.5;
}
/* From 960px a choice's or a checkbox's description is a secondary line, footnote (AZCO-491). */
@media (min-width: 960px), (not (pointer: coarse)) {
  :is(.ui-choice-options--rows, .ui-checkbox-field--described) .ui-field-hint {
    font-size: var(--ui-text-footnote);
  }
}
.ui-checkbox-field:has(input:disabled) {
  opacity: 0.6;
  cursor: default;
}
/* Switches: Off is a light track and On the primary fill, so the states never read alike. */
.ui-switch-field {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--control-primary);
  font: inherit;
  cursor: pointer;
}
.ui-switch-track {
  display: inline-flex;
  align-items: center;
  flex: none;
  /* One switch (AZCO-528): iOS's 51 by 31 on touch, macOS's 40 by 24 compact. */
  width: 51px;
  height: 31px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 999px; /* radius: shape a switch track is always a capsule */
  background: var(--control-border-hover);
  transition: background-color 120ms ease;
}
.ui-switch-track > span {
  width: 25px;
  height: 25px;
  border-radius: var(--ui-radius-round);
  background: var(--control-surface);
  box-shadow: 0 1px 2px #00000033;
  transform: translateX(0);
  transition: transform 120ms ease;
}
.ui-switch-field[aria-checked="true"] .ui-switch-track {
  background: var(--control-primary);
}
.ui-switch-field[aria-checked="true"] .ui-switch-track > span {
  transform: translateX(20px);
}
@media (not (any-pointer: coarse)) {
  .ui-switch-track {
    width: 40px;
    height: 24px;
  }
  .ui-switch-track > span {
    width: 18px;
    height: 18px;
  }
  .ui-switch-field[aria-checked="true"] .ui-switch-track > span {
    transform: translateX(16px);
  }
}
/* Switches show their state; keyboard focus takes the ring (controls.css). */
.ui-switch-field:disabled {
  opacity: 0.55;
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .ui-switch-track,
  .ui-switch-track > span {
    transition: none;
  }
}
@media (forced-colors: active) {
  .ui-switch-track {
    border: 1px solid CanvasText;
  }
  .ui-switch-field[aria-checked="true"] .ui-switch-track {
    background: Highlight;
  }
}
/* Persistent completion area for a pane-based review workflow. */
.ui-workflow-footer {
  flex: none;
  padding: 12px var(--layout-gap);
  border-top: 1px solid var(--line);
  background: var(--control-surface);
}
.ui-workflow-footer:empty {
  display: none;
}
@media (max-width: 600px) {
  .ui-workflow-footer .ui-form-actions {
    flex-wrap: wrap;
  }
  .ui-workflow-footer .ui-form-actions > .ui-form-action-status {
    flex: 1 0 100%;
  }
  .ui-workflow-footer .ui-form-action-buttons {
    width: 100%;
    justify-content: flex-end;
  }
}
/* An action inside a field row, such as an inline upload or dictation button. */
.ui-input-action {
  gap: 8px;
}
.ui-input-action > svg {
  width: 18px;
  height: 18px;
  flex: none;
}
/* The segmented control (AZCO-528): one look for Tabs appearance="segmented"
   (.ui-segmented / .ui-segment, as tabs or radios) and ChoiceField
   appearance="segmented" (.ui-choice-options--segmented, kept as an alias for
   one release). One look in every layout (AZCO-647, after AZCO-572's option b), as iOS and macOS draw it: a
   borderless grey track (the canvas with 10% ink) inside a 2px padding, the control height tall (AZCO-755: 36px
   with a fine pointer, 44px on touch), and the selected segment a raised thumb on the elevated surface with one soft
   shadow, its label in ink at 500. Unselected labels are ink too, so the grey track carries the contrast. The thumb
   never takes the primary fill, so it never reads as a button in any template. No hover. Keyboard focus is the ring
   at offset 0. Segments fill the track's content box. The selection moves at once (the slide is a fast follow);
   segments sit above any indicator (z-index 1). The track's 1px edge is transparent, so forced colours draw it. */
.ui-segmented,
.ui-choice-options--segmented {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  width: fit-content;
  max-width: 100%;
  height: var(--ui-height-segmented);
  padding: 2px;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--ui-canvas, #f4f5f0) 90%, var(--ink));
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
}
/* Page tabs and view switchers that head a region fill it, in equal segments. */
.ui-segmented[data-fill] {
  display: flex;
  width: 100%;
}
.ui-segmented[data-fill] > .ui-segment {
  flex: 1 1 0;
}
.ui-segmented > .ui-segment,
.ui-choice-options--segmented label.ui-choice-option {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  /* The track's content box: the control height less its 1px edges and 2px padding. */
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: 0 14px;
  border: 0;
  border-radius: max(0px, calc(var(--ui-radius-control) - 2px));
  background: transparent;
  color: var(--ink);
  font-weight: 400;
}
/* In the phone layout a segmented ChoiceField spans its container, its segments sharing the width equally, as iOS forms
   draw it (AZCO-657). From 960px, or with a fine pointer, it hugs its options, as macOS does. Segmented Tabs keep their
   own `fill`. The query is layout-query.ts's phoneLayoutQuery. */
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-choice-options--segmented {
    display: flex;
    width: 100%;
  }
  .ui-choice-options--segmented label.ui-choice-option {
    flex: 1 1 0;
  }
}
.ui-segmented > .ui-segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--ui-pressed-release);
}
.ui-segmented > .ui-segment > .ui-tab-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Segment labels stop growing at their size for a 23px body (AZCO-526). */
:root body :is(.ui-segmented > .ui-segment, .ui-choice-options--segmented label.ui-choice-option) {
  font-size: min(var(--ui-control-font-size, var(--ui-text-subhead)), 21px);
}
.ui-segmented > .ui-segment:is([aria-selected="true"], [aria-checked="true"]),
.ui-choice-options--segmented label.ui-choice-option--selected {
  background: var(--ui-surface-elevated, #fff);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.14), 0 0 0 0.5px rgb(0 0 0 / 0.06);
}
.ui-segmented > .ui-segment[aria-disabled="true"] {
  color: var(--control-disabled-ink, var(--muted));
  cursor: default;
}
.ui-segmented > .ui-segment:focus-visible:not([data-restored-focus]),
.ui-choice-options--segmented label.ui-choice-option:has(input:focus-visible:not([data-restored-focus])) {
  outline-offset: 0;
}
/* Icon segments: a 20px glyph in a segment at least 44 wide (16 in 32, compact). */
.ui-segment > .ui-tab-icon {
  display: inline-flex;
  flex: none;
}
.ui-segment > .ui-tab-icon > svg {
  width: 20px;
  height: 20px;
}
.ui-segmented[data-icon-only] > .ui-segment {
  min-width: 44px;
  padding: 0 10px;
}
/* The count badge (addendum §5 #16): 18 high, the chip's corners, caption2
   500 on the primary. */
.ui-tab-badge {
  min-width: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: var(--ui-radius-chip);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font-size: var(--ui-text-caption2);
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}
/* The count's words, for assistive technology only. */
.ui-tab-badge-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (not (any-pointer: coarse)) {
  .ui-segmented > .ui-segment,
  .ui-choice-options--segmented label.ui-choice-option {
    padding: 0 10px;
  }
  .ui-segment > .ui-tab-icon > svg {
    width: 16px;
    height: 16px;
  }
  .ui-segmented[data-icon-only] > .ui-segment {
    min-width: 32px;
    padding: 0 8px;
  }
}
/* Increased contrast: the thumb also takes an inset ring of secondary ink (1.5px), so selection never rests on the
   thumb's lift alone. */
@media (prefers-contrast: more) {
  .ui-segmented > .ui-segment:is([aria-selected="true"], [aria-checked="true"]),
  .ui-choice-options--segmented label.ui-choice-option--selected {
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.14), 0 0 0 0.5px rgb(0 0 0 / 0.06), inset 0 0 0 var(--ui-segment-ring-width) var(--ui-ink-secondary);
  }
}
@media (forced-colors: active) {
  .ui-segmented > .ui-segment:is([aria-selected="true"], [aria-checked="true"]),
  .ui-choice-options--segmented label.ui-choice-option--selected {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }
}
/* Menu (AZCO-528): one surface for value pop-ups, pull-downs and navigation
   menus. Touch density (phones, any coarse pointer): 250px wide, growing to
   300px only when a label would wrap, 44px rows (60 with a detail) and body
   text. Compact density (960px, fine pointer): fitted to its content
   between 180 and 320px, 32px rows (44 with a detail) and subhead text; a
   value pop-up there is one 26px line per option, 120 to 320px wide. The
   surface is elevated with the overlay shadow and a 1px edge; rows are inset
   6px and carry the highlight radius, so the shape reaches them. A selected
   item has a leading check and no fill. Pointer hover is the faint row fill;
   keyboard focus moves the accent highlight. */
.ui-menu {
  --ui-menu-row-inset: 12px;
  --ui-menu-icon-width: 20px;
  --ui-menu-check-width: 20px;
  --ui-menu-check-space: calc(var(--ui-menu-check-width) + 8px);
  --ui-menu-icon-space: 0px;
  position: fixed;
  z-index: 1000;
  inset: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: max-content;
  min-width: 250px;
  max-width: min(300px, calc(100vw - 32px));
  margin: 0;
  padding: var(--ui-menu-inset);
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-menu);
  background: var(--ui-surface-elevated);
  box-shadow: 0 0 0 1px var(--line, var(--control-border)), var(--ui-shadow-overlay);
  color: var(--ink);
  font-family: var(--ui-control-face);
  font-size: var(--ui-text-body);
  /* A menu never inherits its trigger's weight (it renders right after it). */
  font-weight: 400;
  line-height: 1.3;
  text-align: start;
  overscroll-behavior: contain;
  animation: ui-menu-grow var(--ui-motion-menu-open) var(--ui-ease-sheet) both;
}
.ui-menu::backdrop {
  background: transparent;
}
.ui-menu-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.ui-menu-header {
  flex: none;
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--line, var(--control-border));
  margin-bottom: 6px;
}
.ui-menu-section + .ui-menu-section,
.ui-menu-separator {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line, var(--control-border));
}
.ui-menu-separator {
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.ui-menu-section-title {
  padding: 6px 12px 4px;
  color: var(--ui-ink-secondary);
  font-size: var(--ui-text-footnote);
}
.ui-menu-item {
  /* Navigation items set their nesting depth inline. */
  --ui-menu-depth: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "check label icon" "check detail icon";
  align-items: center;
  column-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--ui-height-menu-row);
  margin: 0;
  padding: 0 var(--ui-menu-row-inset);
  padding-inline-start: calc(var(--ui-menu-row-inset) + var(--ui-menu-depth) * 16px);
  border: 0;
  border-radius: var(--ui-radius-highlight);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--ui-pressed-release);
}
.ui-menu--actions .ui-menu-item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label icon" "detail icon";
}
.ui-menu[data-icons] .ui-menu-item {
  grid-template-columns: var(--ui-menu-check-width) minmax(0, 1fr) var(--ui-menu-icon-width);
}
.ui-menu--actions[data-icons] .ui-menu-item {
  grid-template-columns: minmax(0, 1fr) var(--ui-menu-icon-width);
}
.ui-menu-item:has(.ui-menu-detail) {
  min-height: var(--ui-height-menu-row-2);
}
.ui-menu-check-column {
  grid-area: check;
  display: inline-grid;
  place-items: center;
  width: 20px;
  color: var(--control-primary);
}
.ui-menu-check {
  width: 18px;
  height: 18px;
}
.ui-menu-label {
  grid-area: label;
  padding-block: 10px;
}
.ui-menu-item:has(.ui-menu-detail) .ui-menu-label {
  padding-block: 8px 0;
}
.ui-menu-detail {
  grid-area: detail;
  padding-bottom: 8px;
  color: var(--ui-ink-secondary);
  font-size: var(--ui-text-subhead);
}
.ui-menu-icon {
  grid-area: icon;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
.ui-menu-icon > svg {
  width: 20px;
  height: 20px;
}
.ui-menu-item.is-danger {
  color: var(--control-danger);
}
.ui-menu-item[aria-disabled="true"] {
  color: var(--control-disabled-ink);
  cursor: default;
}
.ui-menu-item:focus {
  outline: none;
}
/* Rows dip their content while pressed. */
.ui-menu-item:active:not([aria-disabled="true"]) > * {
  opacity: var(--ui-pressed-opacity);
}
@media (hover: hover) and (pointer: fine) {
  /* Only the row under the pointer: the checked row opens unfilled. */
  .ui-menu[data-modality="pointer"] .ui-menu-item:hover:not([aria-disabled="true"]) {
    background: var(--ui-surface-row-hover);
  }
}
/* Keyboard: the accent highlight moves, and everything in the row takes the
   on-accent ink (D6). Only one row carries it. */
.ui-menu[data-modality="keyboard"] .ui-menu-item.is-active {
  background: var(--control-primary);
  color: var(--control-on-primary);
}
.ui-menu[data-modality="keyboard"] .ui-menu-item.is-active :is(.ui-menu-detail, .ui-menu-check-column) {
  color: var(--control-on-primary);
}
/* The visually hidden dismiss button for screen readers. */
.ui-menu-dismiss {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
/* A context menu's invisible anchor. The menu is placed from the pointer's
   position, so the anchor only holds focus-return and outside-press checks:
   it sits at its containing block's corner and never adds overflow. */
.ui-menu-point {
  position: fixed;
  inset: 0 auto auto 0;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* Compact density. */
@media (not (any-pointer: coarse)) {
  .ui-menu {
    --ui-menu-row-inset: 10px;
    --ui-menu-icon-width: 16px;
    --ui-menu-check-width: 16px;
    min-width: 180px;
    max-width: 320px;
    font-size: var(--ui-text-subhead);
  }
  .ui-menu-item {

    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "check icon label" "check icon detail";
  }
  .ui-menu--actions .ui-menu-item {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon label" "icon detail";
  }
  .ui-menu[data-icons] .ui-menu-item {
    grid-template-columns: var(--ui-menu-check-width) var(--ui-menu-icon-width) minmax(0, 1fr);
  }
  .ui-menu--actions[data-icons] .ui-menu-item {
    grid-template-columns: var(--ui-menu-icon-width) minmax(0, 1fr);
  }
  .ui-menu-label {
    padding-block: 6px;
  }
  .ui-menu-detail {
    font-size: var(--ui-text-footnote);
  }
  .ui-menu-check-column {
    width: 16px;
  }
  .ui-menu-check {
    width: 12px;
    height: 12px;
  }
  .ui-menu-icon,
  .ui-menu-icon > svg {
    width: 16px;
    height: 16px;
    color: var(--ui-ink-secondary);
  }
  .ui-menu-section + .ui-menu-section,
  .ui-menu-separator {
    margin-top: 4px;
    padding-top: 4px;
  }
  .ui-menu-section-title {
    padding: 4px 10px 2px;
    font-size: var(--ui-text-caption);
    font-weight: 400;
  }
  /* Value pop-ups are compact and Mac-like (AZCO-549): one line per option (Menu leaves out the detail), tight 26px
     rows, the checked option's label exactly over the value, and a surface that hugs its content (120px to 320px). */
  .ui-menu.ui-menu--select {
    width: max-content;
    min-width: 120px;
    max-width: 320px;
  }
  .ui-menu--select .ui-menu-item {
    min-height: var(--ui-height-menu-row-select);
  }
  .ui-menu--select .ui-menu-label {
    overflow: hidden;
    padding-block: 3px;
    font-size: var(--ui-text-subhead);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
/* Motion: on phones the menu grows from the covered corner (300ms, iOS's
   curve, fading in over the first 120ms); on desktop it fades in over 80ms;
   with Reduce Motion it only fades, over 100ms. */
@keyframes ui-menu-grow {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  40% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ui-menu-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (min-width: 960px), (not (pointer: coarse)) {
  .ui-menu {
    animation: ui-menu-fade 80ms linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-menu {
    animation: ui-menu-fade 100ms linear both;
  }
  .ui-menu-item {
    transition: none;
  }
}
@media (forced-colors: active) {
  .ui-menu {
    border: 1px solid CanvasText;
  }
  .ui-menu-item.is-active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}
/* Thin scrollbars with no track (AZCO-552), for apps without platform-web too. */
.ui-menu-list {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) transparent;
}
@supports not (scrollbar-color: auto) {
  .ui-menu-list::-webkit-scrollbar {
    width: var(--ui-scrollbar-size);
    height: var(--ui-scrollbar-size);
    background: transparent;
  }
  .ui-menu-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px; /* radius: shape a scrollbar thumb */
    background: var(--ui-scrollbar-thumb) padding-box;
  }
  @media (hover: hover) and (pointer: fine) {
    .ui-menu-list::-webkit-scrollbar-thumb:hover {
      background: var(--ui-scrollbar-thumb-hover) padding-box;
    }
  }
  .ui-menu-list::-webkit-scrollbar-track,
  .ui-menu-list::-webkit-scrollbar-corner {
    background: transparent;
  }
}
/* A notification belongs to the label, never a second line or an icon column. */
.ui-menu-attention {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-start: 8px;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  vertical-align: middle;
}
.ui-menu[data-modality="keyboard"] .ui-menu-item.is-active .ui-menu-attention {
  background: var(--control-on-primary);
}
@media (forced-colors: active) {
  .ui-menu .ui-menu-attention,
  .ui-menu[data-modality="keyboard"] .ui-menu-item.is-active .ui-menu-attention {
    forced-color-adjust: none;
    background: currentColor;
  }
}
/* No phantom icon track/gap for iconless menus. Menus with icons reserve a
   shared column even for an occasional item without one. */
.ui-menu:not([data-icons]) .ui-menu-item {
  grid-template-columns: var(--ui-menu-check-width) minmax(0, 1fr);
  grid-template-areas: "check label" "check detail";
}
.ui-menu--actions:not([data-icons]) .ui-menu-item {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "label" "detail";
}
.ui-menu--actions { --ui-menu-check-space: 0px; }
@media (not (any-pointer: coarse)) {
  .ui-menu[data-icons] { --ui-menu-icon-space: calc(var(--ui-menu-icon-width) + 8px); }
}
.ui-menu[data-icons][data-icon-placement="leading"] {
  --ui-menu-icon-space: calc(var(--ui-menu-icon-width) + 8px);
}
.ui-menu[data-icons][data-icon-placement="leading"] .ui-menu-item {
  grid-template-columns: var(--ui-menu-check-width) var(--ui-menu-icon-width) minmax(0, 1fr);
  grid-template-areas: "check icon label" "check icon detail";
}
.ui-menu--actions[data-icons][data-icon-placement="leading"] .ui-menu-item {
  grid-template-columns: var(--ui-menu-icon-width) minmax(0, 1fr);
  grid-template-areas: "icon label" "icon detail";
}
.ui-menu[data-header-alignment="labels"] .ui-menu-header {
  padding-inline: var(--ui-menu-row-inset);
  padding-inline-start: calc(var(--ui-menu-row-inset) + var(--ui-menu-check-space) + var(--ui-menu-icon-space));
}
.ui-menu[data-modality="keyboard"] .ui-menu-item.is-active :is(.ui-menu-icon, .ui-menu-icon > svg) {
  color: inherit;
}
/* Submenu indicators follow writing direction. */
.ui-menu-submenu-arrow { margin-inline-start: auto; grid-column: -1; }
[dir="rtl"] .ui-menu-submenu-arrow { transform: rotate(180deg); }
.ui-menu.ui-menu--actions .ui-menu-item[aria-haspopup="menu"] {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow";
}
.ui-menu.ui-menu--actions[data-icons] .ui-menu-item[aria-haspopup="menu"] {
  grid-template-columns: var(--ui-menu-icon-width) minmax(0, 1fr) auto;
  grid-template-areas: "icon label arrow";
}
.ui-menu-submenu-arrow { grid-area: arrow; }
/* Radio choices in separate action-menu sections share the standard check column. */
.ui-menu--actions[data-checks] { --ui-menu-check-space: calc(var(--ui-menu-check-width) + 8px); }
.ui-menu--actions[data-checks]:not([data-icons]) .ui-menu-item {
  grid-template-columns: var(--ui-menu-check-width) minmax(0, 1fr);
  grid-template-areas: "check label" "check detail";
}
.ui-menu--actions[data-checks][data-icons] .ui-menu-item {
  grid-template-columns: var(--ui-menu-check-width) minmax(0, 1fr) var(--ui-menu-icon-width);
  grid-template-areas: "check label icon" "check detail icon";
}
@media (not (any-pointer: coarse)) {
  .ui-menu--actions[data-checks][data-icons] .ui-menu-item {
    grid-template-columns: var(--ui-menu-check-width) var(--ui-menu-icon-width) minmax(0, 1fr);
    grid-template-areas: "check icon label" "check icon detail";
  }
}
.ui-menu--actions[data-checks][data-icons][data-icon-placement="leading"] .ui-menu-item {
  grid-template-columns: var(--ui-menu-check-width) var(--ui-menu-icon-width) minmax(0, 1fr);
  grid-template-areas: "check icon label" "check icon detail";
}
.ui-select-field {
  position: relative;
  min-width: 0;
}
.ui-select-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--ui-text-subhead);
  line-height: 1.43;
}
.ui-select-field .ui-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  /* The control height (AZCO-576): 44px on phones, 36px in compact density. */
  min-height: var(--control-height, 44px);
  box-sizing: border-box;
  padding: 4px 10px;
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-field);
  background: var(--control-surface);
  color: var(--control-primary);
  font: inherit;
  font-size: var(--ui-text-subhead);
  line-height: 1.43;
  text-align: left;
  cursor: pointer;
}
.ui-select-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ui-select-chevron {
  flex: 0 0 16px;
  transition: transform 0.15s ease;
}
.ui-select-trigger[aria-expanded="true"] .ui-select-chevron {
  transform: rotate(180deg);
}
@media (any-pointer: coarse) {
  .ui-select-field .ui-select-trigger {
    min-height: 44px;
  }
}
/* Its list is the shared Menu (menu.css). */
.ui-select-label--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  margin: 0;
}
.ui-select-trigger:disabled {
  opacity: 0.55;
  cursor: default;
}
/* The filter pill: a compact field-shaped pop-up whose label is its name. */
.ui-select-field--pill {
  display: inline-block;
}
.ui-select-field--pill .ui-select-trigger {
  width: auto;
  min-height: var(--ui-chip-height, 44px);
  padding-inline: 14px 10px;
  border-radius: var(--ui-radius-field);
}
/* The desktop trigger (AZCO-590; shape consistency AZCO-748), after the pill's rules: 36px (the compact control height), the label and
   one ▾ that never turns (the pop-up opens over the value), and corners following controls.shape, field or
   pill. In a form it keeps the field's edge; in a toolbar or list band it has none, and takes the row hover fill.
   Phones keep the field-shaped trigger with its turning ˅. */
@media (min-width: 960px), (not (pointer: coarse)) {
  .ui-select-field .ui-select-trigger,
  .ui-select-field--pill .ui-select-trigger {
    gap: 4px;
    padding-inline: 14px 10px;
    border-radius: var(--ui-radius-field);
  }
  .ui-select-trigger[aria-expanded="true"] .ui-select-chevron {
    transform: none;
  }
  :is(.ui-list-band, .ui-table-toolbar) .ui-select-field .ui-select-trigger {
    border-color: transparent;
    background: transparent;
  }
}
@media (hover: hover) and (pointer: fine) {
  :is(.ui-list-band, .ui-table-toolbar) .ui-select-field .ui-select-trigger:hover:not(:disabled) {
    background: var(--ui-surface-row-hover);
  }
}
/* ActionMenu's "…" trigger: an icon-only button. Its menu is the shared
   Menu (menu.css). */
.ui-action-menu-trigger {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.ui-action-menu-trigger.ui-toolbar-icon {
  width: 32px;
  height: 32px;
  padding: 0;
}
.ui-action-menu-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
@media (hover: hover) and (pointer: fine) {
  .ui-action-menu-trigger:hover:not(:disabled) {
    background: var(--ui-surface-row-hover);
  }
}
.ui-action-menu-trigger:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (any-pointer: coarse) {
  .ui-action-menu-trigger,
  .ui-action-menu-trigger.ui-toolbar-icon {
    width: 44px;
    height: 44px;
  }
}
/* Shared semantic colors for feedback pills and update banners. */
/* Their colours (--feedback-*) derive in tokens.css (AZCO-491). */
/* Tabs and section links: tabs.css (AZCO-528). */
.ui-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: var(--ui-radius-chip);
  font-size: var(--ui-text-caption);
  font-weight: 400;
  line-height: 1.5;
}
.ui-status-pill--positive {
  background: var(--feedback-ready-background);
  color: var(--feedback-ready-foreground);
}
.ui-status-pill--progress {
  background: var(--feedback-working-background);
  color: var(--feedback-working-foreground);
}
.ui-status-pill--attention {
  background: var(--feedback-attention-background);
  color: var(--feedback-attention-foreground);
}
.ui-status-pill--review {
  background: var(--feedback-review-background);
  color: var(--feedback-review-foreground);
}
/* A plain tag with no state to report, such as "Soon" (AZCO-407). */
.ui-status-pill--neutral {
  background: var(--feedback-neutral-background);
  color: var(--feedback-neutral-foreground);
}
/* Dense tables: informational badges stay smaller than text actions. */
.ui-status-pill[data-size="compact"] {
  padding: 2px 7px;
  font-size: var(--ui-text-caption2);
  line-height: 1.455;
}
/* Underline tabs and section links (AZCO-528, Primer's UnderlineNav): the
   desktop strip. One 1px rule under it in every template; labels at 500 in
   every state, secondary ink until selected or current; a 2px ink bar under
   the selected tab or current link, as wide as its label, sitting on the
   rule. No hover (the pointer cursor is the only affordance); keyboard focus
   is the ring, drawn inside the item so it never crosses the rule or the
   bar. The bar moves at once (the slide is a fast follow). A strip too narrow
   for its items wraps to a second line rather than scrolling (the More
   button is a fast follow). .ui-tabs [role="tab"] keeps older markup. */
.ui-underline,
.ui-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line, var(--control-border));
  list-style: none;
}
.ui-underline > li {
  display: flex;
  margin: 0;
  padding: 0;
}
.ui-underline .ui-underline-item,
.ui-tabs [role="tab"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: none;
  color: var(--ui-ink-secondary);
  font: inherit;
  /* Tab labels stop growing at their size for a 23px body (AZCO-526). */
  font-size: min(var(--ui-text-subhead), 21px);
  font-weight: 400;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity var(--ui-pressed-release);
}
:is(.ui-underline .ui-underline-item, .ui-tabs [role="tab"]):is([aria-selected="true"], [aria-current="page"]) {
  color: var(--ink);
}
/* The indicator: under the label (inset by the item's padding), on the rule,
   below the label and the ring in paint order. */
:is(.ui-underline .ui-underline-item, .ui-tabs [role="tab"]):is([aria-selected="true"], [aria-current="page"])::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-inline: 10px;
  bottom: -1px;
  height: 2px;
  border-radius: 1px; /* radius: shape the indicator's rounded ends */
  background: var(--ink);
}
/* The first label sits on the content edge, the page title's left edge (AZCO-577): the first item has no leading
   padding, and its bar starts with its label. */
:is(.ui-underline > .ui-underline-item, .ui-underline > li > .ui-underline-item, .ui-tabs > [role="tab"]):is(:first-child, li:first-child > *) {
  padding-inline-start: 0;
}
:is(.ui-underline > .ui-underline-item, .ui-underline > li > .ui-underline-item, .ui-tabs > [role="tab"]):is(:first-child, li:first-child > *)::after {
  inset-inline-start: 0;
}
:is(.ui-underline .ui-underline-item, .ui-tabs [role="tab"]) > :not(.ui-tab-badge-label) {
  position: relative;
  z-index: 1;
}
:is(.ui-underline .ui-underline-item, .ui-tabs [role="tab"])[aria-disabled="true"] {
  color: var(--control-disabled-ink, var(--muted));
  cursor: default;
}
:is(.ui-underline .ui-underline-item, .ui-tabs [role="tab"]):focus-visible:not([data-restored-focus]) {
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}
.ui-underline-item > .ui-tab-icon {
  display: inline-flex;
  flex: none;
}
.ui-underline-item > .ui-tab-icon > svg {
  width: 16px;
  height: 16px;
}
/* Section links sit in a nav of their own. */
.ui-section-links {
  min-width: 0;
}
/* On a touch screen the strip keeps a 44px target. */
@media (any-pointer: coarse) {
  :is(.ui-underline .ui-underline-item, .ui-tabs [role="tab"]) {
    min-height: 44px;
  }
}
/* Phones' pop-up for 5 or more in-page tabs: the filter pill (select-field.css). */
.ui-tabs-popup {
  max-width: 100%;
}
@media (forced-colors: active) {
  .ui-underline,
  .ui-tabs {
    border-bottom: 1px solid CanvasText;
  }
  :is(.ui-underline .ui-underline-item, .ui-tabs [role="tab"]):is([aria-selected="true"], [aria-current="page"])::after {
    forced-color-adjust: none;
    background: Highlight;
  }
}
/* Tiles (AZCO-528): loyd's gallery and card treatment in every template.
   Borderless, --ui-radius-card (compact tiles --ui-radius-card-compact), a
   tight resting shadow (--ui-tile-shadow; Night an edge) that lifts to
   --ui-tile-hover-shadow under a fine pointer only. Nothing moves: no lift,
   no translate, no grey fill (grey means selected). Keyboard focus is the
   ring at the tile's corners (controls.css); pressing dips the content.
   Inside sheets and dialogs a tile takes the elevated card surface. Tiles
   are containers: the control shape never changes them. A chosen select
   tile takes the selected fill and edge, with no mark (AZCO-816, below). */
.ui-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Its own stacking context, so Safari clips its media to its corners in a carousel or any transformed or
     scroll-snapped parent (AZCO-574). */
  isolation: isolate;
  border: 0;
  border-radius: var(--ui-radius-card);
  background: var(--ui-card, var(--control-surface));
  box-shadow: var(--ui-tile-shadow);
  color: var(--ink);
  font: inherit;
  text-align: start;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow 180ms ease;
}
.ui-tile[data-presentation="compact"] {
  border-radius: var(--ui-radius-card-compact);
}
:is(a.ui-tile[href], button.ui-tile) {
  cursor: pointer;
  appearance: none;
}
:is(dialog, [role="dialog"], [role="alertdialog"]) .ui-tile {
  background: var(--ui-surface-card-elevated, var(--ui-card));
}
.ui-tile > * {
  transition: opacity var(--ui-pressed-release);
}
/* .ui-card-interaction (an app's own clickable card) is the link tile's states
   for one release: the lift on hover (controls.css), the ring and this motion. */
.ui-card-interaction {
  transition: box-shadow 180ms ease;
}
/* Clickable tiles lift on a fine pointer; plain tiles never hover. */
@media (hover: hover) and (pointer: fine) {
  .ui-tile:is(a[href], button):hover:not(:disabled) {
    box-shadow: var(--ui-tile-hover-shadow);
  }
}
@media (pointer: coarse) {
  .ui-tile:not([data-kind="plain"]):active:not(:disabled, [aria-disabled="true"]) > * {
    transition: opacity 0ms var(--ui-pressed-delay-touch);
  }
}
.ui-tile:is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
  opacity: 0.55;
  cursor: default;
}
.ui-tile[data-kind="select"]:disabled > .ui-tile-media {
  filter: grayscale(1);
}
/* Media: cover-fit on the media surface, or art on the matte with a 3px 8px
   inset; clipped by the tile's corners. */
.ui-tile-media {
  position: relative;
  display: block;
  flex: none;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  /* The tile's own top corners as well, so the media never relies on the tile's clip alone (AZCO-574). */
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: var(--ui-surface-card-media);
}
/* Media alone (an image tile) takes the bottom corners too. */
.ui-tile-media:last-child {
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.ui-tile-media[data-aspect="5:4"] {
  aspect-ratio: 5 / 4;
}
.ui-tile-media[data-aspect="1:1"] {
  aspect-ratio: 1;
}
/* A strip (AZCO-817): a full-width band of one height, whatever the tile's width. */
.ui-tile-media[data-aspect="strip"] {
  aspect-ratio: auto;
  height: var(--ui-tile-strip-height);
}
.ui-tile-media > :is(img, video, svg, picture) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ui-tile-media[data-fit="contain"] {
  box-sizing: border-box;
  padding: 3px 8px;
  background: var(--ui-surface-matte);
}
.ui-tile-media[data-fit="contain"] > :is(img, video, svg, picture) {
  object-fit: contain;
}
.ui-tile-badge {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  display: inline-flex;
}
.ui-tile-caption > .ui-tile-badge {
  position: static;
  justify-self: start;
  margin-top: 6px;
}
/* Caption: a minimum height, never a fixed one; titles and details clamp at
   two lines (unclamped at the largest text sizes). */
.ui-tile-caption {
  display: grid;
  flex: 1 0 auto;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: 12px;
}
.ui-tile[data-presentation="gallery"] > .ui-tile-caption {
  padding: 12px 16px;
}
.ui-tile[data-presentation="compact"] > .ui-tile-caption {
  padding: 8px 10px;
}
/* Room for a link tile's chevron. */
.ui-tile[data-kind="link"]:has(> .ui-tile-arrow) > .ui-tile-caption {
  padding-inline-end: 34px;
}
.ui-tile-eyebrow {
  color: var(--ui-ink-secondary);
  font-size: var(--ui-text-caption2);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.ui-tile-title,
.ui-tile-detail {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
.ui-tile-title {
  color: var(--ink);
  font-size: var(--ui-text-subhead);
  font-weight: 500;
  line-height: 1.35;
}
.ui-tile[data-presentation="gallery"] .ui-tile-title {
  font-size: var(--ui-text-body);
  line-height: 1.3;
}
.ui-tile[data-presentation="compact"] .ui-tile-title {
  font-size: var(--ui-text-footnote);
}
.ui-tile-detail {
  color: var(--ui-ink-secondary);
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  line-height: 1.4;
}
.ui-tile-arrow {
  position: absolute;
  inset-inline-end: 12px;
  bottom: 14px;
  width: 16px;
  height: 16px;
  color: var(--ui-ink-secondary);
}
:dir(rtl) .ui-tile-arrow {
  scale: -1 1;
}
/* A chosen select tile (AZCO-816): a pick is its fill and edge, with no mark,
   as a chosen choice card or chip. The tile takes the selected fill
   (--ui-accent-soft, the choice cards' fill) behind its caption, and an
   accent edge (--ui-selected) drawn on an overlay above the media, so a
   picture never covers it: 2px, as on a chosen card, and 3px on an image
   tile, whose media fills it. Inside the edge runs a 2px keyline of the
   selected fill: unseen against the caption's fill, it parts the edge from a
   picture that matches it (a dark photo under a dark primary, a light one
   under Night's light primary), so the edge reads over any media. The
   overlay is inset and takes no pointer: choosing moves nothing, and hover,
   focus and the pressed dip are the tile's own. */
.ui-tile[data-kind="select"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}
.ui-tile[data-kind="select"]:is([aria-pressed="true"], [aria-checked="true"]) {
  background: var(--ui-accent-soft, var(--ui-surface-choice));
}
.ui-tile[data-kind="select"]:is([aria-pressed="true"], [aria-checked="true"])::after {
  box-shadow:
    inset 0 0 0 2px var(--ui-selected, var(--control-primary)),
    inset 0 0 0 4px var(--ui-accent-soft, var(--ui-surface-choice));
}
.ui-tile[data-kind="select"][data-presentation="image"]:is([aria-pressed="true"], [aria-checked="true"])::after {
  box-shadow:
    inset 0 0 0 3px var(--ui-selected, var(--control-primary)),
    inset 0 0 0 5px var(--ui-accent-soft, var(--ui-surface-choice));
}
/* The create tile: a dashed edge on the illustration surface, no resting
   shadow. (loyd's SVG-mask dash is a fast follow; this is a 1px dashed border.) */
.ui-tile[data-kind="create"] {
  border: 1px dashed var(--control-border-hover);
  background: var(--ui-surface-illustration, var(--ui-card));
  box-shadow: none;
}
.ui-tile[data-kind="create"] > .ui-tile-caption {
  min-height: 64px;
  background: var(--ui-card, var(--control-surface));
}
.ui-tile[data-kind="create"][data-attention] {
  border-color: var(--feedback-attention-border, var(--control-border-hover));
}
.ui-tile[data-kind="create"][data-attention] .ui-tile-title {
  color: var(--feedback-attention-foreground, var(--ink));
}
/* Grids: gallery tracks at least 260 wide, standard 220, compact 120. The gap
   is never under 6, so a ring never overlaps a neighbour. */
.ui-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--layout-gap, 16px);
  min-width: 0;
}
.ui-tile-grid[data-presentation="gallery"] {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.ui-tile-grid:is([data-presentation="compact"], [data-presentation="image"]) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr));
}
/* A stack (AZCO-817): one full-width column, whatever the presentation. */
.ui-tile-grid[data-layout="stack"] {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 600px) {
  .ui-tile-grid:is([data-presentation="compact"], [data-presentation="image"]) {
    gap: 12px;
  }
}
/* prefers-contrast: more adds a 1px strong edge, 3:1 in every template. */
@media (prefers-contrast: more) {
  .ui-tile {
    box-shadow:
      0 0 0 1px var(--ui-field-border-strong),
      var(--ui-tile-shadow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-tile {
    transition: none;
  }
}
/* Forced colors drop the shadows: a tile is a 1px CanvasText edge, and a
   chosen one a 3px Highlight edge (its border and the overlay's 2px inside
   it) with a 2px Canvas keyline inside that, the outline drawn in from the
   overlay's edge, so it reads over a picture as the selected fill's keyline
   does. The Highlight focus ring stays outside the tile. */
@media (forced-colors: active) {
  .ui-tile {
    border: 1px solid CanvasText;
  }
  .ui-tile[data-kind="select"]:is([aria-pressed="true"], [aria-checked="true"]) {
    border-color: Highlight;
  }
  .ui-tile[data-kind="select"]:is([aria-pressed="true"], [aria-checked="true"])::after {
    border: 2px solid Highlight;
    outline: 2px solid Canvas;
    outline-offset: -4px;
  }
}
/* A plain tile's inner controls sit at the start, under its text. */
.ui-tile[data-kind="plain"] > .ui-tile-caption > :not(span) {
  justify-self: start;
  margin-top: 8px;
}
/* One content-driven geometry for updates in every workspace. Parents own spacing. */
.ui-update-banner {
  --banner-background: var(--feedback-neutral-background);
  --banner-foreground: var(--feedback-neutral-foreground);
  --banner-border: var(--feedback-neutral-border);
  display: flex;
  align-items: center;
  flex: none;
  gap: 16px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--banner-border);
  border-radius: var(--ui-toast-radius); /* radius: container a banner or toast keeps its own corners in both shapes */
  background: var(--banner-background);
  color: var(--banner-foreground);
}
/* The tone wins over the generic notice surface, whatever the load order. */
.ui-update-banner.ui-notice {
  background: var(--banner-background);
  color: var(--banner-foreground);
}
.ui-update-banner--ready {
  --banner-background: var(--feedback-ready-background);
  --banner-foreground: var(--feedback-ready-foreground);
  --banner-border: var(--feedback-ready-border);
}
.ui-update-banner--pending {
  --banner-background: var(--feedback-working-background);
  --banner-foreground: var(--feedback-working-foreground);
  --banner-border: var(--feedback-working-border);
}
.ui-update-banner--attention {
  --banner-background: var(--feedback-attention-background);
  --banner-foreground: var(--feedback-attention-foreground);
  --banner-border: var(--feedback-attention-border);
}
.ui-update-banner--review {
  --banner-background: var(--feedback-review-background);
  --banner-foreground: var(--feedback-review-foreground);
  --banner-border: var(--feedback-review-border);
}
.ui-update-banner--error {
  --banner-background: var(--ui-notice-danger-surface, #faf0eb);
  --banner-foreground: var(--control-danger);
  --banner-border: var(--control-danger-border);
}
.ui-update-copy {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-update-banner .ui-section-title {
  margin: 0;
  color: inherit;
}
.ui-update-banner p {
  margin: 4px 0 0;
  font-size: var(--ui-text-footnote);
  line-height: 1.45;
}
.ui-update-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
/* Secondary actions take the banner's tone for rest, hover and keyboard focus.
   Primary actions take the shared primary hover shade. Focus is a fill, never
   a ring or border change. */
.ui-update-banner .ui-button {
  flex-shrink: 0;
  margin: 0;
  color: var(--banner-foreground);
}
.ui-update-banner .ui-button:not(.ui-button--primary) {
  border: 1px solid var(--banner-border);
  background: transparent;
}
.ui-update-banner .ui-button--primary {
  border-color: var(--banner-foreground);
  background: var(--banner-foreground);
  color: var(--control-surface);
}
@media (hover: hover) and (pointer: fine) {
  .ui-update-banner .ui-button--primary:not(:disabled):hover {
    background: var(--control-primary-hover);
    border-color: var(--control-primary-hover);
    color: var(--control-surface);
  }
}
/* Phones: the title and its action share the first row; the message spans below. */
@media (max-width: 600px) {
  .ui-update-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 8px;
    padding: 10px 12px;
  }
  .ui-update-copy {
    display: contents;
  }
  .ui-update-copy > .ui-section-title {
    grid-column: 1;
    grid-row: 1;
  }
  .ui-update-copy > :not(.ui-section-title) {
    grid-column: 1 / -1;
    grid-row: auto;
    margin: 0;
  }
  .ui-update-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    justify-content: flex-end;
    gap: 6px;
    max-width: 100%;
  }
  .ui-update-actions .ui-button {
    padding-inline: 10px;
  }
  .ui-update-banner:not(:has(.ui-update-actions)) {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Guidance with several labeled actions keeps them readable below the message. */
  .ui-update-banner--actions-below {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .ui-update-banner--actions-below .ui-update-actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    justify-content: flex-start;
  }
}
/* Narrow phones need the full heading width before a long recovery action. */
@media (max-width: 420px) {
  .ui-update-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .ui-update-copy {
    display: block;
  }
  .ui-update-copy > :not(.ui-section-title) {
    margin: 4px 0 0;
  }
  .ui-update-actions {
    grid-column: 1;
    grid-row: auto;
  }
  .ui-update-actions .ui-button {
    max-width: 100%;
    white-space: normal;
  }
}
/* Setup guidance keeps its completion action beside the heading on phones. */
@media (max-width: 600px) {
  .ui-update-banner.ui-update-banner--compact-narrow {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .ui-update-banner--compact-narrow .ui-update-copy {
    display: block;
  }
  .ui-update-banner--compact-narrow .ui-update-copy > :not(.ui-section-title) {
    display: none;
  }
  .ui-update-banner--compact-narrow .ui-update-actions {
    flex: none;
  }
  .ui-update-banner--compact-narrow .ui-update-actions .ui-button {
    white-space: nowrap;
  }
}
/* The notification layer: one host that follows native modal stacking. */
.ui-status-messages {
  position: fixed;
  z-index: 80;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 8px;
  width: min(390px, calc(100vw - 32px));
  height: max-content;
  pointer-events: none;
}
.ui-status-messages[hidden] {
  display: none;
}
/* A manual popover shares the modal's top layer without its dimming backdrop. */
.ui-status-messages[popover] {
  inset: auto 20px 20px auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: inherit;
}
.ui-status-messages[popover]::backdrop {
  background: transparent;
  pointer-events: none;
}
/* Toast copy must not obstruct underlying controls; its actions stay usable. */
.ui-status-messages :is(button, a, input, select, textarea, summary, [role="button"]) {
  pointer-events: auto;
}
/* Receipt dialogs may reserve real space for persistent recovery actions. */
.ui-status-messages.ui-status-messages--inline {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  margin: 12px 0 0;
  overflow: visible;
}
/* Colliding notices reserve a bounded lane; both sets of actions remain usable. */
.ui-status-messages.ui-status-messages--docked {
  max-height: min(240px, 30dvh);
  overflow-y: auto;
  pointer-events: auto;
}
@media (max-width: 600px) {
  .ui-status-messages {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
  }
  .ui-status-messages[popover] {
    inset: auto 12px max(12px, env(safe-area-inset-bottom)) auto;
  }
}
/* Notifications own layout and semantic action colors, including hover and focus. */
.ui-status-message {
  --notice-background: var(--control-surface);
  --notice-foreground: var(--ink);
  --notice-border: var(--line, var(--control-border));
  --notice-hover: var(--control-hover-neutral);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  box-sizing: border-box;
  min-height: 48px;
  padding: 8px 12px 8px 16px;
  border: 1px solid var(--notice-border);
  border-radius: var(--ui-toast-radius); /* radius: container a banner or toast keeps its own corners in both shapes */
  background: var(--notice-background);
  color: var(--notice-foreground);
  box-shadow: var(--ui-toast-shadow);
  font-family: var(--ui-font-body, inherit);
  font-size: var(--ui-toast-font-size);
  line-height: 1.45;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  pointer-events: none;
}
.ui-status-message-error {
  --notice-background: var(--control-danger-surface);
  --notice-foreground: var(--control-danger);
  --notice-border: var(--control-danger-border);
  --notice-hover: var(--control-danger-hover);
}
.ui-status-message[data-closing="true"] {
  opacity: 0;
  transform: translateY(6px);
}
.ui-status-message-content {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ui-status-message-content > :first-child {
  margin-top: 0;
}
.ui-status-message-content > :last-child {
  margin-bottom: 0;
}
/* Single-line and multiline copy share the close glyph's vertical center. */
.ui-status-message-close {
  display: inline-grid;
  place-items: center;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ui-status-message-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
@media (hover: hover) and (pointer: fine) {
  .ui-status-message-close:hover {
    background: var(--notice-hover);
  }
}
@media (any-pointer: coarse) {
  .ui-status-message-close {
    width: 44px;
    height: 44px;
  }
}
.ui-status-message-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  grid-column: 1 / -1;
  gap: 8px;
  padding-top: 4px;
}
.ui-status-message-actions .ui-button {
  margin: 0;
  border-color: var(--notice-border);
  background: transparent;
  color: var(--notice-foreground);
}
.ui-status-message-actions .ui-button--primary {
  border-color: var(--notice-foreground);
  background: var(--notice-foreground);
  color: var(--notice-background);
}
@media (hover: hover) and (pointer: fine) {
  .ui-status-message-actions .ui-button--primary:not(:disabled):hover {
    background: color-mix(in srgb, var(--notice-foreground) 85%, black);
    border-color: color-mix(in srgb, var(--notice-foreground) 85%, black);
    color: var(--notice-background);
  }
}
/* Persistent feedback in normal flow accepts input outside the overlay. */
.ui-status-message--inline {
  box-shadow: none;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ui-status-message {
    transition: none;
  }
}
/* Shared loading visual: mark, label and track, centered by its host. */
.ui-loading-visual {
  display: grid;
  justify-items: center;
  gap: 14px;
  transition: opacity 180ms ease;
}
.ui-loading-visual[data-loading-phase="hidden"] {
  visibility: hidden;
}
.ui-loading-visual[data-loading-phase="leaving"] {
  opacity: 0;
}
.ui-loading-mark {
  display: grid;
  place-items: center;
  height: 48px;
}
.ui-loading-label {
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  letter-spacing: 0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}
.ui-loading-track {
  display: block;
  width: var(--ui-loading-track-width, 112px);
  height: var(--ui-loading-track-height, 2px);
  overflow: hidden;
  border-radius: 999px; /* radius: shape a progress track is a capsule */
  background: var(--ui-loading-track);
}
.ui-loading-track > i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: var(--ui-loading-bar);
  animation: ui-loading-progress 1.15s ease-in-out infinite;
}
/* The quiet variant stays neutral in every template. */
.ui-loading-visual[data-quiet="true"] .ui-loading-track {
  background: var(--line, var(--control-border));
}
.ui-loading-visual[data-quiet="true"] .ui-loading-track > i {
  background: var(--muted);
}
@keyframes ui-loading-progress {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(340%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-loading-visual {
    transition: none;
  }
  .ui-loading-track > i {
    animation: none;
    transform: translateX(70%);
  }
}
/* Live audio level meter: fills its row, drawn in the current color. */
.ui-audio-waveform {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 32px;
  color: var(--control-primary);
}
.ui-audio-waveform-fallback {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
/* One compact tooltip for data-tooltip controls: 12px/16px type, 5px/8px
   padding and a near-black surface (inverted in dark templates). */
.ui-tooltip {
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  width: max-content;
  max-width: min(260px, calc(100vw - 16px));
  margin: 0;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--ui-radius-inner, 4px);
  background: var(--ui-tooltip-surface);
  color: var(--ui-tooltip-ink);
  box-shadow: 0 4px 14px #24322214;
  font: 400 var(--ui-text-caption)/1.333 var(--ui-font-body, system-ui, sans-serif);
  letter-spacing: normal;
  text-align: left;
  overflow-wrap: anywhere;
  pointer-events: auto;
}
.ui-tooltip[hidden] {
  display: none;
}
.ui-tooltip:popover-open {
  overflow: visible;
}
@media (forced-colors: active) {
  .ui-tooltip {
    border: 1px solid CanvasText;
  }
}
.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-left: auto;
}
.ui-pagination-count {
  white-space: nowrap;
  min-width: 14ch;
  text-align: right;
}
.ui-pagination-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.ui-pagination-actions > span {
  white-space: nowrap;
}
@media (max-width: 600px) {
  .ui-pagination {
    width: 100%;
  }
}
.ui-pagination {
  font-variant-numeric: tabular-nums;
}
.ui-pagination-position {
  display: grid;
  text-align: center;
}
.ui-pagination-position > span {
  grid-area: 1 / 1;
}
.ui-pagination-position-reserve {
  visibility: hidden;
  pointer-events: none;
}
.ui-text-diff {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-panel, 8px);
  overflow: hidden;
}
.ui-text-diff > section {
  padding: 12px;
  min-width: 0;
}
.ui-text-diff > section + section {
  border-left: 1px solid var(--control-border);
}
.ui-text-diff h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  font-weight: 500;
}
.ui-text-diff p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.ui-text-diff del {
  color: var(--control-danger);
  background: color-mix(
    in srgb,
    var(--control-danger) 8%,
    var(--control-surface)
  );
}
.ui-text-diff ins {
  color: var(--feedback-ready-foreground);
  background: var(--feedback-ready-background);
  text-decoration: none;
}
@media (max-width: 600px) {
  .ui-text-diff {
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-text-diff > section + section {
    border-left: 0;
    border-top: 1px solid var(--control-border);
  }
}
.ui-list-surface {
  padding: var(--ui-list-surface-padding);
  border: var(--ui-list-surface-border);
  border-radius: var(--ui-radius-surface, 12px);
  background: var(--control-surface);
  font-size: var(--ui-text-footnote);
  box-sizing: border-box;
}
.ui-table-toolbar {
  --ui-table-options-gap: 8px;
  min-width: 0;
  min-height: 48px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  flex: none;
  padding-bottom: 12px;
  padding-inline: var(--ui-list-edge, 0px);
}
/* Search belongs to the list's toolbar, with independently labelled filters trailing. */
.ui-table-toolbar[data-search] .ui-table-identity {
  flex: 1 0 12rem;
  min-width: 12rem;
}
.ui-table-search,
.ui-table-search .ui-field {
  width: 100%;
  min-width: 0;
}
.ui-table-toolbar[data-search] .ui-table-tools {
  gap: 8px;
}
.ui-table-tools > * { flex: none; }
.ui-table-tools .ui-table-count { margin-left: 0; }
.ui-table-toolbar h2 {
  margin: 0;
}
.ui-table-count {
  margin-left: 8px;
  font-weight: 400;
  white-space: nowrap;
}
.ui-table-tools {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px 16px;
  min-width: 0;
}
.ui-table-identity {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px 24px;
  min-width: 0;
}
.ui-table-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ui-table-filters .ui-select-field {
  width: 156px;
  max-width: 100%;
}
.ui-table-filters--wide .ui-select-field {
  width: 320px;
}
.ui-table-tools .ui-pagination {
  margin: 0;
}
.ui-table-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  overflow: auto;
  scrollbar-gutter: stable;
}
.ui-data-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: var(--ui-text-footnote);
  line-height: 1.45;
}
.ui-data-table :is(th, td) {
  padding: 8px 12px;
  height: 44px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-weight: 400;
  width: auto;
  overflow-wrap: anywhere;
}
.ui-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--control-surface);
  color: var(--muted);
  font-weight: 400;
  height: 36px;
  white-space: nowrap;
}
/* The last row keeps its rule's height, so pages don't shift by a pixel. */
.ui-data-table tbody tr:last-child > * {
  border-bottom-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .ui-data-table tbody tr:hover {
    background: var(--ui-surface-row-hover);
  }
}
.ui-data-table .ui-table-primary {
  font-size: var(--ui-text-subhead);
}
.ui-data-table .ui-table-actions {
  white-space: nowrap;
  text-align: right;
}
.ui-data-table time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* Empty filtered lists occupy the available list body without moving the toolbar. */
.ui-table-empty {
  flex: 1;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--layout-gap);
  box-sizing: border-box;
  text-align: center;
}
.ui-table-empty > :is(h2, p) {
  max-width: 440px;
  margin: 0;
}
.ui-table-empty-action {
  margin-top: 4px;
}
@media (max-width: 600px) {
  .ui-table-toolbar {
    min-height: 56px;
  }
  .ui-data-table:not(.ui-record-table) colgroup {
    display: none;
  }
  .ui-data-table:not(.ui-record-table) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .ui-data-table:not(.ui-record-table) tbody {
    display: block;
  }
  .ui-data-table:not(.ui-record-table) tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
  }
  .ui-data-table:not(.ui-record-table) tbody tr:last-child {
    border-bottom-color: transparent;
  }
  .ui-data-table:not(.ui-record-table) tbody :is(th, td) {
    display: block;
    height: auto;
    width: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    grid-column: 1;
  }
  .ui-data-table:not(.ui-record-table) .ui-table-actions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: auto;
  }
  .ui-data-table:not(.ui-record-table) [data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }
  .ui-data-table:not(.ui-record-table) time {
    white-space: normal;
  }
}
.ui-disclosure-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  list-style: none;
  cursor: pointer;
  /* The keyboard ring follows the row highlight's corners. */
  border-radius: var(--ui-radius-highlight);
}
.ui-disclosure-panel > summary::-webkit-details-marker {
  display: none;
}
.ui-disclosure-panel > summary h2 {
  margin: 0;
}
.ui-disclosure-panel > summary svg {
  flex: none;
  transition: transform 200ms var(--ui-ease-sheet);
}
@media (prefers-reduced-motion: reduce) {
  .ui-disclosure-panel > summary svg {
    transition: none;
  }
}
.ui-disclosure-panel[open] > summary svg {
  transform: rotate(90deg);
}
.ui-disclosure-panel-content {
  padding-top: 12px;
}
@media (pointer: coarse) {
  .ui-disclosure-panel > summary {
    min-height: 44px;
  }
}
/* A list is an open surface. Filters and paging are quiet toolbar actions, not nested cards. */
.ui-table-filters {
  flex-wrap: wrap;
}
.ui-table-filters .ui-select-field {
  width: auto;
  min-width: 0;
}
.ui-table-filters:not(.ui-table-filters--wide) .ui-select-field {
  flex: 0 1 auto;
}
.ui-table-filters:not(.ui-table-filters--wide) .ui-select-trigger {
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
  gap: 8px;
}
/* Quiet filters lose their edge; a pill keeps its own (its rule is weaker). */
.ui-table-filters .ui-select-field:where(:not(.ui-select-field--pill)) .ui-select-trigger {
  border-color: transparent;
  padding-inline: 8px;
}
.ui-table-filters--wide .ui-select-field {
  width: 320px;
}
/* Cell text aligns with the toolbar title, on the content edge when the list reaches the page's edges (AZCO-542). */
.ui-data-table :is(th, td):first-child {
  padding-inline-start: var(--ui-list-edge, 0px);
}
.ui-data-table :is(th, td):last-child {
  padding-inline-end: var(--ui-list-edge, 0px);
}
.ui-data-table td a {
  border-radius: var(--ui-radius-inner, 4px);
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
}
/* Score and count columns align headers and values without changing density. */
.ui-data-table .ui-table-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Stacked cells (tables outside DataTable, such as prose tables) read left to right on phones, numbers and actions included. */
@media (max-width: 600px) {
  .ui-data-table:not(.ui-record-table) .ui-table-numeric,
  .ui-data-table:not(.ui-record-table) .ui-table-actions {
    text-align: left;
  }
}
.ui-data-table .ui-table-score {
  font-weight: 400;
}
.ui-table-score[data-result="pass"],
.ui-table-change[data-direction="gain"] {
  color: var(--feedback-ready-foreground);
}
.ui-table-score[data-result="fail"],
.ui-table-change[data-direction="loss"] {
  color: var(--feedback-attention-foreground);
}
.ui-table-score[data-result="uncertain"],
.ui-table-change[data-direction="neutral"] {
  color: var(--muted);
}
/* A quiet select can stand in for the list title. */
.ui-table-title-control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ui-table-title-control .ui-select-field {
  width: 180px;
}
.ui-table-title-control .ui-select-trigger {
  border-color: transparent;
  padding-inline: 0;
}
.ui-table-title-control > .ui-meta {
  white-space: nowrap;
}
/* Never clipped (AZCO-540): the scroller clips at its edges, so keyboard focus on a link or button flush with them
   rings inside the control. */
:where(.ui-table-scroll) :where(a, button):focus-visible:not([data-restored-focus]) {
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}
/* Thin scrollbars with no track (AZCO-552), for apps without platform-web too. */
.ui-table-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) transparent;
}
@supports not (scrollbar-color: auto) {
  .ui-table-scroll::-webkit-scrollbar {
    width: var(--ui-scrollbar-size);
    height: var(--ui-scrollbar-size);
    background: transparent;
  }
  .ui-table-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px; /* radius: shape a scrollbar thumb */
    background: var(--ui-scrollbar-thumb) padding-box;
  }
  @media (hover: hover) and (pointer: fine) {
    .ui-table-scroll::-webkit-scrollbar-thumb:hover {
      background: var(--ui-scrollbar-thumb-hover) padding-box;
    }
  }
  .ui-table-scroll::-webkit-scrollbar-track,
  .ui-table-scroll::-webkit-scrollbar-corner {
    background: transparent;
  }
}
/* Touch-first phones get exactly one full-width search row and one controls row.
   Mouse windows retain the single desktop toolbar even when narrow. */
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-table-toolbar[data-search] { flex-wrap: wrap; }
  .ui-table-toolbar[data-search] .ui-table-identity { flex: 1 0 100%; min-width: 0; }
  .ui-table-toolbar[data-search] .ui-table-tools { width: 100%; overflow-x: auto; justify-content: flex-start; }
}
.ui-table-options-toggle {
  min-height: 36px; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: var(--ui-radius-control); background: transparent; color: var(--ink);
  font: inherit; cursor: pointer; white-space: nowrap;
}
.ui-table-options { display: flex; align-items: center; gap: var(--ui-table-options-gap); }
.ui-table-options[hidden], .ui-table-tools > button[hidden] { display: none; }
.ui-table-toolbar[data-overflow] .ui-table-options {
  position: fixed; inset: auto; margin: 0; z-index: 20;
  display: grid; gap: 8px; padding: 12px; box-sizing: border-box;
  overflow: auto; border: 1px solid var(--line);
  border-radius: var(--ui-radius-surface); background: var(--control-surface);
  color: var(--ink); box-shadow: 0 4px 24px #0003;
}
.ui-table-toolbar[data-overflow] .ui-table-options[hidden] { display: none; }
.ui-table-toolbar .ui-table-options[data-measuring] {
  display: flex !important; position: fixed !important;
  width: max-content !important; max-height: none !important;
  padding: 0 !important; border: 0 !important; gap: var(--ui-table-options-gap) !important; visibility: hidden;
}
/* Keep the compact trailing controls at the far edge when options collapse. */
.ui-table-toolbar[data-overflow] .ui-table-tools > button:not([hidden]) { margin-inline-start: auto; }
.ui-table-options { margin-inline-start: auto; }
/* Record collections (AZCO-528). DataTable renders `.ui-data-table.ui-record-table`: a table from 960px and, below
   it, a plain full-bleed list (iOS's plain list, Mail, Files): no card, rows across the full width, content at the page
   gutter, hairline separators from the content's leading edge to the trailing edge, none above the first row or after
   the last. Each row reads its primary column on line 1 and its secondary columns on line 2, joined with " · ", with
   no "Label:" prefixes (the headers stay, visually hidden, for assistive technology); a status sits at the end of
   line 2 and the row's "…" at the trailing edge, centred, in a 44px target. DataTable's `columns` place each column
   (`phone: "primary" | "secondary" | "status" | "actions" | "hidden"`) as `data-phone-<role>` lists of 1-based
   column numbers, read here for the first 8 columns. Without them, `.ui-table-primary` or a `th[scope=row]` is
   primary, `.ui-table-status` a status, `.ui-table-actions` the actions, and every other cell secondary.

   Long tokens (an email, a URL, an ID) break at their natural points: `softBreaks` (RecordList.tsx) adds break
   opportunities after "@", ".", "/", "-" and "_", and cells wrap with `overflow-wrap: break-word`, which breaks inside
   a word only when nothing else fits.

   ListBand is the one row between the tabs or header and the list; ListEnd ends a continuous list (RecordList.tsx).

   Tokens:
   --ui-list-bleed            How far a phone list reaches past its container to the screen's edges: the page gutter
                              where the shell pads its page by one (platform-web sets it), else 0.
   --ui-list-band-gap-before  Tabs to the band: 12px (under a header, the page's own top padding only).
   --ui-list-band-gap-after   The band to the first row: 4px.
   --ui-list-band-height      The band's minimum height: 44px, a pill's target.
   --ui-height-record-row     A phone row's minimum height: 64px (tokens.css).
   --ui-sticky-top            Where the band and column header stick from 960px: under the shell's page header.
   --ui-list-separator-inset  Extra leading inset for separators after a leading icon or avatar: 0.
   They are defined in tokens.css, --ui-record-surface-* among them. */
/* From 960px: the table sits on the page, under its header rule, with no card. An app may keep a surface
   through --ui-record-surface-padding and --ui-record-surface-background (no template sets them since AZCO-491). */
.ui-list-surface:has(.ui-record-table) {
  padding: var(--ui-record-surface-padding);
  border: 0;
  border-radius: var(--ui-record-surface-radius); /* radius: container a template's record surface */
  background: var(--ui-record-surface-background);
  box-shadow: none;
}
.ui-record-table thead th {
  background: var(--ui-record-header-background, var(--ui-canvas, #f4f5f0));
}
/* A record table sits in the page's flow at every width: the page's own scroll is the only scrollbar, with no inner
   scroll container or fixed-height box, so a page's rows never scroll apart from its band. Only a wide table
   (DataTable `wide`) scrolls sideways in its own box, from 960px. */
.ui-table-scroll:has(> .ui-record-table) {
  flex: none;
  min-height: auto;
  overflow: visible;
  scrollbar-gutter: auto;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  .ui-table-scroll:has(> .ui-record-table[data-wide]) {
    overflow-x: auto;
  }
}
/* The band: one row, aligned to the gutter, no box. The count leads; one control (a filter or sort pill, or a Menu)
   trails. A paged table's compact pager takes the trailing slot instead, with rows per page beside it from 960px,
   and the pill moves to sit after the count. */
.ui-list-band {
  box-sizing: border-box;
  /* A list that reaches the page's edges keeps its band's text on the content edge (AZCO-542). */
  padding-inline: var(--ui-list-edge, 0px);
  display: flex;
  /* The band is interface, never a display or brand face (AZCO-562). */
  font-family: var(--ui-control-face);
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-width: 0;
  min-height: var(--ui-list-band-height);
  margin: 0 0 var(--ui-list-band-gap-after);
}
/* Under the page header the band takes the page's own top padding and no more; after tabs, 12px. */
:where(.ui-tabs, .ui-segmented, .ui-section-links, .ui-tabs-popup):has(~ .ui-list-band, ~ * .ui-list-band) {
  margin-bottom: var(--ui-list-band-gap-before);
}
.ui-list-band-count {
  /* On phones the count never shrinks under its controls; a band too narrow for both wraps them to the next line. In
     the desktop layout nothing wraps (AZCO-637): the band stays one line and the count truncates. */
  flex: 0 0 auto;
  font-family: var(--ui-control-face);
  min-width: 0;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-subhead);
  line-height: 1.33;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
  /* "9 reports · 5 unread" stays one line. */
  white-space: nowrap;
}
/* A reloading list's last count, holding its place unseen (AZCO-589). */
.ui-list-band-count[data-reserve] {
  visibility: hidden;
}
.ui-list-band-control,
.ui-list-band-pages {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ui-list-band-control .ui-select-field,
.ui-list-band-size .ui-select-field {
  min-width: 0;
  max-width: 100%;
}
.ui-list-band:not([data-paged]) .ui-list-band-control,
.ui-list-band-pages {
  margin-inline-start: auto;
}
/* In a pane's header row (ListBandPlacementProvider, AZCO-635): the controls alone, on one line that never wraps, with
   no box, no sticky row and no gap below; the count is the list's last line, on its text edge, in footnote type. */
.ui-list-band.ui-list-band--header {
  position: static;
  flex-wrap: nowrap;
  gap: 4px;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}
.ui-list-band--header > .ui-list-band-control,
.ui-list-band--header > .ui-list-band-pages {
  flex: none;
  margin-inline-start: 0;
}
.ui-list-band-foot {
  margin: 0;
  padding: 14px var(--ui-list-edge, 0px);
  font-family: var(--ui-control-face);
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
}
.ui-list-band-foot > .ui-list-band-count {
  font-size: inherit;
}
/* The list's "…" (ListBand `actions`): last in the band, a quiet icon button at the control height. */
.ui-list-band-more {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ui-height-control, 44px);
  height: var(--ui-height-control, 44px);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ui-list-band:not(:has(.ui-list-band-control, .ui-list-band-pages)) .ui-list-band-more {
  margin-inline-start: auto;
}
.ui-list-band-more:not(:disabled, [aria-expanded="true"]):active {
  opacity: var(--ui-pressed-opacity);
}
@media (hover: hover) and (pointer: fine) {
  .ui-list-band-more:hover,
  .ui-list-band-more[aria-expanded="true"] {
    background: var(--ui-surface-row-hover);
  }
}
/* The compact pager: ‹ 2 of 9 ›, 44px steps on touch, 32px with a fine pointer. */
.ui-compact-pager {
  display: flex;
  flex: none;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.ui-compact-pager-position {
  min-width: 6ch;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-subhead);
  text-align: center;
  white-space: nowrap;
}
.ui-compact-pager-range {
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-subhead); white-space: nowrap;
}
.ui-compact-pager-range-trigger {
  display: flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 6px 8px;
  border: 0; border-radius: var(--ui-radius-control); background: transparent;
  color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.ui-compact-pager-range-trigger:disabled { color: var(--control-disabled-ink); cursor: default; }
.ui-compact-pager-step {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ui-compact-pager-step:disabled {
  color: var(--control-disabled-ink);
  cursor: default;
}
.ui-compact-pager-step:not(:disabled, [aria-expanded="true"]):active {
  opacity: var(--ui-pressed-opacity);
}
@media (hover: hover) and (pointer: fine) {
  .ui-compact-pager-step {
    width: 32px;
    height: 32px;
  }
  .ui-compact-pager-step:not(:disabled):hover {
    background: var(--ui-surface-row-hover);
  }
}
/* A continuous list's end: the sentinel that loads ahead, and Show more, which is always there for the keyboard and
   assistive technology, and takes over when loading ahead can't (a failure, Reduce Motion, no IntersectionObserver). */
.ui-list-end {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  text-align: center;
}
.ui-list-end-sentinel {
  width: 100%;
  height: 1px;
}
.ui-list-end-error {
  margin: 0;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-subhead);
}
.ui-list-end-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* From 960px the band and the table's column header stick under the page header (--ui-sticky-top, which the shell
   sets) while the rows scroll with the page, so the pager stays in reach without a second scrollbar. The band's
   bottom gap is its own padding, so the header sits right under it. */
@media (min-width: 960px), (not (pointer: coarse)) {
  .ui-list-band {
    position: sticky;
    top: var(--ui-sticky-top);
    z-index: 4;
    flex-wrap: nowrap;
    box-sizing: content-box;
    margin-bottom: 0;
    padding-bottom: var(--ui-list-band-gap-after);
    background: var(--ui-record-header-background, var(--ui-canvas, #f4f5f0));
  }
  /* Nothing wraps on desktop (AZCO-637): the band is one line. Its controls keep their size and the count gives way,
     truncating with "…"; a page too narrow for even that scrolls sideways in its pane (platform-web). */
  .ui-list-band > :is(.ui-list-band-control, .ui-list-band-pages) {
    flex-shrink: 0;
  }
  .ui-list-band-count {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* A record table keeps its columns' minimum width (DataTable's --ui-table-min-width) and its cells stay one line,
     truncating with "…"; the pane scrolls sideways rather than squeezing it. A wide table scrolls in its own box. */
  .ui-record-table:not([data-wide]) {
    min-width: var(--ui-table-min-width, 0px);
  }
  .ui-record-table > tbody > tr > :is(th, td):not(.ui-table-actions),
  .ui-record-table > tbody > tr > :is(th, td):not(.ui-table-actions) > :not(.ui-status-pill) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Above the rows' own controls (a row's "…" is lifted to z-index 1 over its title link), so nothing paints over
     the header as rows scroll under it. Its rule is one inset line that travels with it, not a border a row's rule
     can double. */
  .ui-record-table thead th {
    top: var(--ui-sticky-top);
    z-index: 3;
    border-bottom-color: transparent;
    box-shadow: inset 0 -1px 0 var(--line);
  }
  :is(.ui-list-band ~ .ui-table-scroll, .ui-list-band ~ * .ui-table-scroll) > .ui-record-table thead th {
    top: calc(var(--ui-sticky-top) + var(--ui-list-band-height) + var(--ui-list-band-gap-after));
  }
}
/* Below 960px: the plain list. */
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-list-surface:has(.ui-record-table) {
    padding: 0;
    border: 0;
    border-radius: 0; /* radius: container no card on phones */
    background: transparent;
    box-shadow: none;
  }
  /* Rows per page is a desktop control. */
  .ui-list-band-size {
    display: none;
  }
  .ui-table-scroll:has(> .ui-record-table) {
    margin-inline: calc(-1 * var(--ui-list-bleed));
  }
  .ui-record-table {
    display: block;
    width: auto;
    font-size: var(--ui-text-subhead);
  }
  .ui-record-table colgroup {
    display: none;
  }
  .ui-record-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ui-record-table > tbody {
    display: block;
  }
  .ui-record-table > tbody > tr {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 2px 0;
    min-height: var(--ui-height-record-row);
    padding: 10px var(--ui-list-bleed);
  }
  /* Hairlines between rows, from the content's leading edge to the trailing edge. */
  .ui-record-table > tbody > tr + tr::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: calc(var(--ui-list-bleed) + var(--ui-list-separator-inset)) 0;
    border-top: 1px solid var(--ui-list-separator);
    pointer-events: none;
  }
  /* The row's fills span the full width. */
  .ui-record-table > tbody > tr:is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [data-selected]) {
    background: var(--ui-fill-current);
  }
  .ui-record-table > tbody > tr > :is(th, td) {
    display: block;
    box-sizing: border-box;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: start;
    overflow-wrap: break-word;
  }
  .ui-record-table time {
    white-space: normal;
  }
  /* Line 2: the secondary columns, subhead in secondary ink, each clamped to two lines (AZCO-562): a row reads at
     most three lines, and the full text lives in the detail. */
  .ui-record-table > tbody > tr > :is(th, td) {
    order: 1;
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--ui-ink-secondary, var(--muted));
    font-size: var(--ui-text-subhead);
    line-height: 1.33;
  }
  /* Meta inside a phone row is footnote: never larger than the supporting line (AZCO-562). */
  .ui-record-table > tbody > tr .ui-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ui-ink-secondary, var(--muted));
    font-size: var(--ui-text-footnote);
    line-height: 1.385;
  }
  .ui-record-table > tbody > tr > :is(th, td) a {
    color: inherit;
  }
  /* Line 1: the primary column, body. */
  .ui-record-table > tbody > tr > :is(.ui-table-primary, th[scope="row"]),
  .ui-record-table[data-phone-primary~="1"] > tbody > tr > :nth-child(1),  .ui-record-table[data-phone-primary~="2"] > tbody > tr > :nth-child(2),  .ui-record-table[data-phone-primary~="3"] > tbody > tr > :nth-child(3),  .ui-record-table[data-phone-primary~="4"] > tbody > tr > :nth-child(4),  .ui-record-table[data-phone-primary~="5"] > tbody > tr > :nth-child(5),  .ui-record-table[data-phone-primary~="6"] > tbody > tr > :nth-child(6),  .ui-record-table[data-phone-primary~="7"] > tbody > tr > :nth-child(7),  .ui-record-table[data-phone-primary~="8"] > tbody > tr > :nth-child(8) {
    order: 0;
    flex: 1 0 100%;
    /* The title: one line, with an ellipsis (AZCO-562). */
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
    font-size: var(--ui-text-body);
    line-height: 1.3;
  }
  .ui-record-table > tbody > tr > :is(.ui-table-primary, th[scope="row"]) a,
  .ui-record-table[data-phone-primary~="1"] > tbody > tr > :nth-child(1) a,
  .ui-record-table[data-phone-primary~="2"] > tbody > tr > :nth-child(2) a,
  .ui-record-table[data-phone-primary~="3"] > tbody > tr > :nth-child(3) a,
  .ui-record-table[data-phone-primary~="4"] > tbody > tr > :nth-child(4) a,
  .ui-record-table[data-phone-primary~="5"] > tbody > tr > :nth-child(5) a,
  .ui-record-table[data-phone-primary~="6"] > tbody > tr > :nth-child(6) a,
  .ui-record-table[data-phone-primary~="7"] > tbody > tr > :nth-child(7) a,
  .ui-record-table[data-phone-primary~="8"] > tbody > tr > :nth-child(8) a {
    color: var(--ink);
  }
  /* A status: inline at the end of line 2. */
  .ui-record-table > tbody > tr > .ui-table-status,
  .ui-record-table[data-phone-status~="1"] > tbody > tr > :nth-child(1),  .ui-record-table[data-phone-status~="2"] > tbody > tr > :nth-child(2),  .ui-record-table[data-phone-status~="3"] > tbody > tr > :nth-child(3),  .ui-record-table[data-phone-status~="4"] > tbody > tr > :nth-child(4),  .ui-record-table[data-phone-status~="5"] > tbody > tr > :nth-child(5),  .ui-record-table[data-phone-status~="6"] > tbody > tr > :nth-child(6),  .ui-record-table[data-phone-status~="7"] > tbody > tr > :nth-child(7),  .ui-record-table[data-phone-status~="8"] > tbody > tr > :nth-child(8) {
    order: 2;
    flex: none;
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    overflow: visible;
    margin-inline-start: 8px;
  }
  /* The row's "…": trailing, vertically centred, a 44px target. */
  .ui-record-table > tbody > tr > .ui-table-actions,
  .ui-record-table[data-phone-actions~="1"] > tbody > tr > :nth-child(1),  .ui-record-table[data-phone-actions~="2"] > tbody > tr > :nth-child(2),  .ui-record-table[data-phone-actions~="3"] > tbody > tr > :nth-child(3),  .ui-record-table[data-phone-actions~="4"] > tbody > tr > :nth-child(4),  .ui-record-table[data-phone-actions~="5"] > tbody > tr > :nth-child(5),  .ui-record-table[data-phone-actions~="6"] > tbody > tr > :nth-child(6),  .ui-record-table[data-phone-actions~="7"] > tbody > tr > :nth-child(7),  .ui-record-table[data-phone-actions~="8"] > tbody > tr > :nth-child(8) {
    position: absolute;
    top: 50%;
    inset-inline-end: max(0px, calc(var(--ui-list-bleed) - 8px));
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    transform: translateY(-50%);
  }
  .ui-record-table > tbody > tr:has(> .ui-table-actions),
  .ui-record-table[data-phone-actions~="1"] > tbody > tr:has(> :nth-child(1)),
  .ui-record-table[data-phone-actions~="2"] > tbody > tr:has(> :nth-child(2)),
  .ui-record-table[data-phone-actions~="3"] > tbody > tr:has(> :nth-child(3)),
  .ui-record-table[data-phone-actions~="4"] > tbody > tr:has(> :nth-child(4)),
  .ui-record-table[data-phone-actions~="5"] > tbody > tr:has(> :nth-child(5)),
  .ui-record-table[data-phone-actions~="6"] > tbody > tr:has(> :nth-child(6)),
  .ui-record-table[data-phone-actions~="7"] > tbody > tr:has(> :nth-child(7)),
  .ui-record-table[data-phone-actions~="8"] > tbody > tr:has(> :nth-child(8)) {
    padding-inline-end: calc(max(0px, calc(var(--ui-list-bleed) - 8px)) + 48px);
  }
  .ui-record-table > tbody > tr .ui-table-actions .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="1"] > tbody > tr > :nth-child(1) .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="2"] > tbody > tr > :nth-child(2) .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="3"] > tbody > tr > :nth-child(3) .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="4"] > tbody > tr > :nth-child(4) .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="5"] > tbody > tr > :nth-child(5) .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="6"] > tbody > tr > :nth-child(6) .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="7"] > tbody > tr > :nth-child(7) .ui-action-menu-trigger,
  .ui-record-table[data-phone-actions~="8"] > tbody > tr > :nth-child(8) .ui-action-menu-trigger {
    width: 44px;
    height: 44px;
  }
  /* A column a phone leaves out. */
  .ui-record-table[data-phone-hidden~="1"] > tbody > tr > :nth-child(1),  .ui-record-table[data-phone-hidden~="2"] > tbody > tr > :nth-child(2),  .ui-record-table[data-phone-hidden~="3"] > tbody > tr > :nth-child(3),  .ui-record-table[data-phone-hidden~="4"] > tbody > tr > :nth-child(4),  .ui-record-table[data-phone-hidden~="5"] > tbody > tr > :nth-child(5),  .ui-record-table[data-phone-hidden~="6"] > tbody > tr > :nth-child(6),  .ui-record-table[data-phone-hidden~="7"] > tbody > tr > :nth-child(7),  .ui-record-table[data-phone-hidden~="8"] > tbody > tr > :nth-child(8) {
    display: none;
  }
  /* A column marked secondary that would otherwise lead (a row header). */
  .ui-record-table[data-phone-secondary~="1"] > tbody > tr > :nth-child(1),  .ui-record-table[data-phone-secondary~="2"] > tbody > tr > :nth-child(2),  .ui-record-table[data-phone-secondary~="3"] > tbody > tr > :nth-child(3),  .ui-record-table[data-phone-secondary~="4"] > tbody > tr > :nth-child(4),  .ui-record-table[data-phone-secondary~="5"] > tbody > tr > :nth-child(5),  .ui-record-table[data-phone-secondary~="6"] > tbody > tr > :nth-child(6),  .ui-record-table[data-phone-secondary~="7"] > tbody > tr > :nth-child(7),  .ui-record-table[data-phone-secondary~="8"] > tbody > tr > :nth-child(8) {
    order: 1;
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    color: var(--ui-ink-secondary, var(--muted));
    font-size: var(--ui-text-subhead);
  }
  /* " · " between the secondary columns. */
  :is(
    .ui-record-table > tbody > tr > :not(
        .ui-table-primary,
        th[scope="row"],
        .ui-table-status,
        .ui-table-actions,
        .ui-record-table[data-phone-primary~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-primary~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-primary~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-primary~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-primary~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-primary~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-primary~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-primary~="8"] > tbody > tr > :nth-child(8),
        .ui-record-table[data-phone-status~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-status~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-status~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-status~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-status~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-status~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-status~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-status~="8"] > tbody > tr > :nth-child(8),
        .ui-record-table[data-phone-actions~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-actions~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-actions~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-actions~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-actions~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-actions~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-actions~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-actions~="8"] > tbody > tr > :nth-child(8),
        .ui-record-table[data-phone-hidden~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-hidden~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-hidden~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-hidden~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-hidden~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-hidden~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-hidden~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-hidden~="8"] > tbody > tr > :nth-child(8)
      ),
    .ui-record-table[data-phone-secondary~="1"] > tbody > tr > :nth-child(1),
    .ui-record-table[data-phone-secondary~="2"] > tbody > tr > :nth-child(2),
    .ui-record-table[data-phone-secondary~="3"] > tbody > tr > :nth-child(3),
    .ui-record-table[data-phone-secondary~="4"] > tbody > tr > :nth-child(4),
    .ui-record-table[data-phone-secondary~="5"] > tbody > tr > :nth-child(5),
    .ui-record-table[data-phone-secondary~="6"] > tbody > tr > :nth-child(6),
    .ui-record-table[data-phone-secondary~="7"] > tbody > tr > :nth-child(7),
    .ui-record-table[data-phone-secondary~="8"] > tbody > tr > :nth-child(8)
  )
    ~ :is(
    .ui-record-table > tbody > tr > :not(
        .ui-table-primary,
        th[scope="row"],
        .ui-table-status,
        .ui-table-actions,
        .ui-record-table[data-phone-primary~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-primary~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-primary~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-primary~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-primary~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-primary~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-primary~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-primary~="8"] > tbody > tr > :nth-child(8),
        .ui-record-table[data-phone-status~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-status~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-status~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-status~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-status~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-status~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-status~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-status~="8"] > tbody > tr > :nth-child(8),
        .ui-record-table[data-phone-actions~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-actions~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-actions~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-actions~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-actions~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-actions~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-actions~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-actions~="8"] > tbody > tr > :nth-child(8),
        .ui-record-table[data-phone-hidden~="1"] > tbody > tr > :nth-child(1),
        .ui-record-table[data-phone-hidden~="2"] > tbody > tr > :nth-child(2),
        .ui-record-table[data-phone-hidden~="3"] > tbody > tr > :nth-child(3),
        .ui-record-table[data-phone-hidden~="4"] > tbody > tr > :nth-child(4),
        .ui-record-table[data-phone-hidden~="5"] > tbody > tr > :nth-child(5),
        .ui-record-table[data-phone-hidden~="6"] > tbody > tr > :nth-child(6),
        .ui-record-table[data-phone-hidden~="7"] > tbody > tr > :nth-child(7),
        .ui-record-table[data-phone-hidden~="8"] > tbody > tr > :nth-child(8)
      ),
    .ui-record-table[data-phone-secondary~="1"] > tbody > tr > :nth-child(1),
    .ui-record-table[data-phone-secondary~="2"] > tbody > tr > :nth-child(2),
    .ui-record-table[data-phone-secondary~="3"] > tbody > tr > :nth-child(3),
    .ui-record-table[data-phone-secondary~="4"] > tbody > tr > :nth-child(4),
    .ui-record-table[data-phone-secondary~="5"] > tbody > tr > :nth-child(5),
    .ui-record-table[data-phone-secondary~="6"] > tbody > tr > :nth-child(6),
    .ui-record-table[data-phone-secondary~="7"] > tbody > tr > :nth-child(7),
    .ui-record-table[data-phone-secondary~="8"] > tbody > tr > :nth-child(8)
  )::before {
    content: "·";
    margin-inline: 0.35em;
    color: var(--ui-ink-secondary, var(--muted));
  }
}
/* The row's "…" (AZCO-570): one paradigm with platform-web's StackedList. The row opens its record; its "…" stays in the
   DOM, out of the Tab order: the context-menu key or Shift+F10 opens it from the row (useRovingRows). With a fine pointer it shows on the row's hover, while focus is in the row and while its menu
   is open, in the space its column (or, below 960px, the row's trailing padding) keeps, so nothing shifts. Without one
   (phones, tablets) it is never painted and takes no taps, and the phone row keeps no space for it: a long-press on the
   row opens the same menu (DataTable), and only a keyboard's focus shows it. */
@media (hover: hover) and (pointer: fine) {
  .ui-record-table > tbody > tr .ui-action-menu-trigger:not([aria-expanded="true"]) {
    opacity: 0;
  }
  .ui-record-table > tbody > tr:is(:hover, :focus-within) .ui-action-menu-trigger:not(:disabled) {
    opacity: 1;
  }
  .ui-record-table > tbody > tr:is(:hover, :focus-within) .ui-action-menu-trigger:disabled {
    opacity: 0.45;
  }
}
@media (hover: none), (pointer: coarse) {
  .ui-record-table > tbody > tr .ui-action-menu-trigger:not(:focus-visible) {
    opacity: 0;
    pointer-events: none;
  }
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-record-table > tbody > tr:has(> .ui-table-actions),
  .ui-record-table[data-phone-actions~="1"] > tbody > tr:has(> :nth-child(1)),
  .ui-record-table[data-phone-actions~="2"] > tbody > tr:has(> :nth-child(2)),
  .ui-record-table[data-phone-actions~="3"] > tbody > tr:has(> :nth-child(3)),
  .ui-record-table[data-phone-actions~="4"] > tbody > tr:has(> :nth-child(4)),
  .ui-record-table[data-phone-actions~="5"] > tbody > tr:has(> :nth-child(5)),
  .ui-record-table[data-phone-actions~="6"] > tbody > tr:has(> :nth-child(6)),
  .ui-record-table[data-phone-actions~="7"] > tbody > tr:has(> :nth-child(7)),
  .ui-record-table[data-phone-actions~="8"] > tbody > tr:has(> :nth-child(8)) {
    padding-inline-end: var(--ui-list-bleed);
  }
}
/* Unread rows (AZCO-491, item 29): RecordRow's `unread`. The dot (`--ui-unread-dot`: 8px on phones, 6px from 960px) is accent, centred in the row's leading gutter
   (the first cell's leading padding, at least 24px wherever a row tracks unread) on its first line, so the text never
   moves; the primary column is 500 while unread. "Unread, " leads the row for assistive technology only. Below 960px
   the row draws the dot itself, on its title line. */
.ui-record-table:has(> tbody > tr[data-unread]) :is(th, td):first-child {
  padding-inline-start: max(var(--ui-list-edge, 0px), 24px);
}
.ui-record-unread-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The unread dot's size: 8px on phones, as in Mail; 6px from 960px, beside desktop's 14px text (owner review). */
:root {
  --ui-unread-dot: 8px;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root {
    --ui-unread-dot: 6px;
  }
}
/* A zero-size mark on the cell's first line, middle-aligned to it, whose dot reaches back into the gutter. */
.ui-record-unread-dot {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  /* The accent (AZCO-491); a shell's keyboard highlight can turn it to its on-accent ink with the row's text. */
  color: var(--ui-accent, var(--control-primary));
}
.ui-record-unread-dot::before {
  content: "";
  position: absolute;
  top: calc(var(--ui-unread-dot) / -2);
  inset-inline-start: calc(-1 * max(var(--ui-list-edge, 0px), 24px) / 2 - var(--ui-unread-dot) / 2);
  width: var(--ui-unread-dot);
  height: var(--ui-unread-dot);
  border-radius: var(--ui-radius-round);
  background: currentColor;
}
.ui-record-table > tbody > tr[data-unread="true"] > :is(.ui-table-primary, th[scope="row"]) {
  font-weight: 500;
}
.ui-record-table > tbody > tr[data-unread="true"] > :is(.ui-table-primary, th[scope="row"]) :is(.ui-meta, .ui-status-pill) {
  font-weight: 400;
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-record-unread-dot {
    display: none;
  }
  .ui-record-table:has(> tbody > tr[data-unread]) > tbody > tr {
    padding-inline-start: max(var(--ui-list-bleed), 24px);
  }
  /* Line 1's middle: the row's top padding and half the title's line. */
  .ui-record-table > tbody > tr[data-unread="true"]::after {
    content: "";
    position: absolute;
    top: calc(10px + var(--ui-text-body) * 0.65 - 4px);
    inset-inline-start: calc(max(var(--ui-list-bleed), 24px) / 2 - 4px);
    width: 8px;
    height: 8px;
    border-radius: var(--ui-radius-round);
    background: var(--control-primary);
  }
}
@media (forced-colors: active) {
  .ui-record-unread-dot::before,
  .ui-record-table > tbody > tr[data-unread="true"]::after {
    background: CanvasText;
    forced-color-adjust: none;
  }
}
/* A record row with nothing to open is still one of the list's rows for the arrow keys (useRovingRows): its focus is
   a ring inside the row. */
.ui-record-table > tbody > tr:focus-visible {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}
/* A row's short date (ShortDate, AZCO-491): one line; the full date is for assistive technology only. */
.ui-short-date {
  white-space: nowrap;
}
.ui-short-date-full {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* AZCO-779: an already-open list-options surface exposes actions, never another ellipsis. */
.ui-list-band-expanded-actions, .ui-list-band-action-section { display: grid; gap: 4px; }
.ui-list-band-action-section + .ui-list-band-action-section { border-top: 1px solid var(--line); padding-top: 4px; }
.ui-list-band-expanded-actions .ui-button { justify-content: flex-start; text-align: start; height: auto; min-height: var(--control-height); white-space: normal; }
.ui-list-band-action-title, .ui-list-band-action-detail { display: block; color: var(--muted); font-size: var(--ui-text-footnote); }
.ui-list-band.ui-list-band--header[data-expanded-actions] { display: grid; gap: 8px; }
.ui-list-band-inline-actions { display: flex; }
.ui-list-band-inline-actions[hidden] { display: none; }
.ui-list-band[data-measuring] { display: flex !important; width: max-content; min-width: 0 !important; gap: 4px !important; }
.ui-list-band[data-measuring] .ui-list-band-control { width: auto !important; }
.ui-list-band[data-measuring] .ui-list-band-inline-actions[hidden] { display: flex; }
.ui-list-band[data-measuring] .ui-list-band-expanded-actions { display: none; }
.ui-list-band[data-expanded-actions] .ui-list-band-control { width: 100%; }
/* ChoiceCards (AZCO-318): large choice cards over visually hidden native
   radios, as selectable text tiles (AZCO-528): borderless at the grouped
   radius (--ui-radius-group, 24 on phones and 14 from 960px), on the tile's
   resting shadow, lifting to --ui-tile-hover-shadow under a fine pointer.
   A pick is the selected fill and edge, with no mark (AZCO-816): no radio
   ring and no check, for one answer or several. The chosen card takes the
   choice fill and a 2px primary ring drawn inset, so nothing shifts; titles
   stay 500 in every state. Keyboard focus is the ring at the corners;
   pressing dips the content. Tokens (AZCO-390): --ui-card (inside dialogs
   --ui-surface-card-elevated), --ui-selected (the chosen card's ring),
   --ui-accent-soft (its fill), --ui-font-quote (the sample line).
   The copy takes the card's whole width (AZCO-407), so preview art in an
   example spans the card instead of shrinking to the longest line of text.
   Several answers (AZCO-825, data-selection="multiple") are native checkboxes,
   hidden like the radios, in the same chosen look through the same rules.
   data-size="compact" shortens the cards so a screen can stack two groups. */
.ui-choice-cards {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ui-choice-cards > legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.5;
}
.ui-choice-cards > .ui-choice-cards-legend--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-choice-cards > .ui-form-error:empty {
  display: none;
}
.ui-choice-cards-list {
  display: grid;
  gap: 12px;
}
@media (min-width: 601px) {
  .ui-choice-cards-list[data-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
label.ui-choice-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 56px;
  box-sizing: border-box;
  margin: 0;
  padding: 16px;
  border: 0;
  border-radius: var(--ui-radius-group);
  background: var(--ui-card, var(--control-surface));
  box-shadow: var(--ui-tile-shadow);
  color: var(--ink);
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
:is(dialog, [role="dialog"], [role="alertdialog"]) label.ui-choice-card {
  background: var(--ui-surface-card-elevated, var(--ui-card));
}
@media (not (any-pointer: coarse)) {
  label.ui-choice-card {
    min-height: 48px;
  }
}
/* Compact: for a screen that stacks two groups, such as one answer above
   several. 10px above and below the copy (16 standard), 2px between title and
   hint (4) and 8px between cards (12): a title with a one-line hint is about
   63px at the default text size instead of 77, and stays two lines. The
   minimum stays a full touch target, 48px on coarse pointers and 44px under a
   fine one (56 and 48 standard), so a title-only card never drops below 44px. */
.ui-choice-cards-list[data-size="compact"] {
  gap: 8px;
}
.ui-choice-cards-list[data-size="compact"] > label.ui-choice-card {
  min-height: 48px;
  padding-block: 10px;
}
@media (not (any-pointer: coarse)) {
  .ui-choice-cards-list[data-size="compact"] > label.ui-choice-card {
    min-height: 44px;
  }
}
.ui-choice-cards-list[data-size="compact"] .ui-choice-card-copy {
  gap: 2px;
}
.ui-choice-card > :not(input) {
  transition: opacity var(--ui-pressed-release);
}
.ui-choice-card > input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
}
.ui-choice-card-copy {
  display: grid;
  flex: 1 1 0;
  gap: 4px;
  min-width: 0;
}
.ui-choice-card-title {
  font-size: var(--ui-text-subhead);
  font-weight: 500;
  line-height: 1.467;
}
.ui-choice-card-hint {
  color: var(--ui-ink-secondary);
  font-size: var(--ui-text-footnote);
  line-height: 1.45;
}
.ui-choice-card-example {
  display: block;
  box-sizing: border-box;
  justify-self: stretch;
  min-width: 0;
  margin-top: 4px;
  padding: 8px 12px;
  border-radius: var(--ui-radius-group-inner);
  background: var(--ui-surface-illustration);
  color: var(--ink);
  font-size: var(--ui-text-footnote);
  line-height: 1.45;
}
.ui-choice-card-sample {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-family: var(--ui-font-quote, inherit);
  font-size: var(--ui-text-body);
  line-height: 1.35;
}
/* The chosen card: the choice fill and a 2px primary ring, inset. With no
   mark the ring carries the pick on its own beside the fill, so it is 2px,
   not the 1.5px it was beside a radio ring or check: twice Night's 1px card
   edge, so a chosen card differs from its neighbours by weight as well as
   hue, and the same edge as a chosen select tile. */
label.ui-choice-card:has(> input:checked) {
  background: var(--ui-accent-soft, var(--ui-surface-choice));
  box-shadow:
    inset 0 0 0 2px var(--ui-selected, var(--control-primary)),
    var(--ui-tile-shadow);
}
.ui-choice-card:has(> input:checked) .ui-choice-card-example {
  background: var(--control-surface);
}
label.ui-choice-card:has(> input:disabled) {
  box-shadow: none;
  opacity: 0.55;
  cursor: default;
}
/* A fine pointer lifts an unchosen card; the chosen one keeps its ring. */
@media (hover: hover) and (pointer: fine) {
  label.ui-choice-card:hover:not(:has(> input:disabled)):not(:has(> input:checked)) {
    box-shadow: var(--ui-tile-hover-shadow);
  }
}
/* prefers-contrast: more adds a 1px strong edge, 3:1 in every template. */
@media (prefers-contrast: more) {
  label.ui-choice-card {
    box-shadow:
      0 0 0 1px var(--ui-field-border-strong),
      var(--ui-tile-shadow);
  }
  label.ui-choice-card:has(> input:checked) {
    box-shadow:
      inset 0 0 0 2px var(--ui-selected, var(--control-primary)),
      0 0 0 1px var(--ui-field-border-strong),
      var(--ui-tile-shadow);
  }
}
/* Keyboard focus rings the card at its corners (controls.css); pressing dips
   its content. */
.ui-choice-card > input:focus-visible {
  outline: none;
}
/* Forced colors drop the fill and ring: a card is a 1px CanvasText edge, and
   a chosen one a 3px Highlight edge, drawn over its border by an overlay
   that takes no pointer. Focus is the Highlight outline outside the card, a
   separate property, so a focused card shows both (several answers move
   focus apart from the pick). */
@media (forced-colors: active) {
  label.ui-choice-card {
    border: 1px solid CanvasText;
  }
  label.ui-choice-card:has(> input:checked)::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 3px solid Highlight;
    border-radius: inherit;
    pointer-events: none;
  }
  label.ui-choice-card:has(> input:focus-visible) {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
/* ChipPicker (AZCO-318) and ChipChoice (AZCO-390): chips with 44px targets
   on touch. A picked chip takes the selected fill (--ui-selected, default the
   primary) and nothing else: no check, so a chip is the same width picked or
   not, and an icon chip keeps its icon (AZCO-811). Keyboard focus takes the
   ring (controls.css). Tokens: --ui-chip-height, --ui-chip-font-size,
   --ui-chip-ink, --ui-radius-chip, --ui-card, --ui-selected, --ui-on-selected. */
.ui-chip-picker-label {
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.5;
}
.ui-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ui-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  /* The control height (AZCO-576): 44px on phones, 32px in compact density. */
  min-height: var(--ui-chip-height, 44px);
  max-width: 100%;
  padding: 5px 14px;
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-chip, 999px);
  background: var(--ui-card, var(--control-surface));
  color: var(--ui-chip-ink, var(--control-primary));
  font: inherit;
  font-size: var(--ui-chip-font-size, var(--ui-text-subhead));
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  touch-action: manipulation;
}
.ui-chip-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  margin-left: -2px;
}
.ui-chip[data-icon] .ui-chip-icon > svg {
  width: 18px;
  height: 18px;
}
.ui-chip-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-field-heading.ui-chip-heading--hidden-label:has(> .ui-form-error:empty) {
  display: none;
}
.ui-chip svg {
  flex: none;
  width: 16px;
  height: 16px;
}
.ui-chip:is([aria-pressed="true"], [aria-checked="true"]) {
  border-color: var(--ui-selected, var(--control-primary));
  background: var(--ui-selected, var(--control-primary));
  color: var(--ui-on-selected, var(--control-on-primary));
}
.ui-chip--add {
  border-style: dashed;
}
.ui-chip[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .ui-chip:is([aria-pressed="true"], [aria-checked="true"]):hover:not([aria-disabled="true"]) {
    border-color: var(--ui-selected-hover, var(--control-primary-hover));
    background: var(--ui-selected-hover, var(--control-primary-hover));
  }
}
.ui-chip-add-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  max-width: 100%;
}
.ui-input.ui-chip-input {
  flex: 1;
  min-height: var(--ui-chip-height, 44px);
  padding: 5px 14px;
  font-size: var(--ui-text-field);
}
/* The chip input sits among chips: it takes the chips' corners over the field's (controls.css). */
:root body .ui-input.ui-chip-input {
  border-radius: var(--ui-radius-chip);
}
.ui-chip-count {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  line-height: 1.45;
}
@media (any-pointer: coarse) {
  .ui-chip {
    min-height: max(44px, var(--ui-chip-height, 44px));
  }
  .ui-input.ui-chip-input {
    min-height: 44px;
  }
}
@media (forced-colors: active) {
  .ui-chip:is([aria-pressed="true"], [aria-checked="true"]) {
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }
  .ui-chip:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
/* EmailListField (AZCO-401): address chips and a field inside one box that
   looks like a text field. The box takes the field's boundary and the danger
   color when invalid; focus in it turns the box's border the accent (AZCO-540), and a focused chip
   action takes the ring inside its half. Chips and their actions are 44px
   on touch. Tokens: --control-surface, --control-border, --ui-radius-field-multiline,
   --control-danger, --control-hover, --ui-card, --ui-radius-chip,
   --ui-chip-ink, --muted. */
.ui-email-list-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: var(--ui-field-height, 44px);
  padding: 4px 6px;
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-field-multiline);
  background-color: var(--control-surface);
  color: var(--control-primary);
  cursor: text;
}
.ui-email-list-box[data-invalid] {
  border-color: var(--control-danger);
}
.ui-email-list[data-disabled] .ui-email-list-box {
  background-color: var(--control-disabled-surface, var(--control-surface));
  color: var(--control-disabled-ink, var(--muted));
  cursor: default;
}
.ui-email-list-items {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-email-chip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  min-height: 32px;
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-chip, 999px);
  background: var(--ui-card, var(--control-surface));
  color: var(--ui-chip-ink, var(--control-primary));
  font-size: var(--ui-text-subhead);
  line-height: 1.3;
}
/* A chip being edited reads as a field: the surface, and the boundary's hover shade. */
.ui-email-chip[data-editing] {
  border-color: var(--control-border-hover, var(--control-border));
  background: var(--control-surface);
}
/* A chip the parent marks invalid (`invalid`) takes the danger color. */
.ui-email-chip[data-invalid] {
  border-color: var(--control-danger);
  color: var(--control-danger);
}
.ui-email-chip-label,
.ui-email-chip-remove {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ui-email-chip-label {
  min-width: 0;
  padding: 0 4px 0 12px;
  border-radius: var(--ui-radius-chip, 999px) 0 0 var(--ui-radius-chip, 999px);
  text-align: left;
  overflow-wrap: anywhere;
}
.ui-email-chip-remove {
  justify-content: center;
  flex: none;
  width: 30px;
  padding: 0;
  border-radius: 0 var(--ui-radius-chip, 999px) var(--ui-radius-chip, 999px) 0;
}
.ui-email-chip-remove svg {
  width: 16px;
  height: 16px;
}
.ui-email-chip :is(.ui-email-chip-label, .ui-email-chip-remove):disabled {
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  /* The remove button is icon-only: the faint fill; the label is a chip. */
  .ui-email-chip .ui-email-chip-remove:hover:not(:disabled) {
    background: var(--ui-surface-row-hover);
  }
}
.ui-email-chip :is(.ui-email-chip-label, .ui-email-chip-remove):focus-visible:not([data-restored-focus]) {
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}
/* The fields inside the box draw no boundary of their own; the shared
   `.ui-field input` rules are lighter than these. */
.ui-email-list .ui-email-list-box .ui-email-list-input,
.ui-email-list .ui-email-list-box .ui-email-chip-input {
  display: block;
  box-sizing: border-box;
  min-width: 0;
  min-height: 32px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--ui-text-field);
  line-height: 1.5;
}
.ui-email-list .ui-email-list-box .ui-email-list-input {
  flex: 1 1 12ch;
  width: auto;
  padding: 4px 6px;
}
.ui-email-list .ui-email-list-box .ui-email-chip-input {
  width: auto;
  max-width: 100%;
  padding: 0 4px 0 12px;
}
.ui-email-list .ui-email-list-box :is(.ui-email-list-input, .ui-email-chip-input):focus {
  outline: none;
}
/* Its inputs draw nothing of their own: the box is the field (AZCO-540). Focus in either input, keyboard or pointer,
   turns its border the accent at 2px, inside its box, never a ring. */
.ui-email-list-box:has(:is(.ui-email-list-input, .ui-email-chip-input):focus) {
  border-color: var(--ui-focus-ring-color);
  box-shadow: inset 0 0 0 1px var(--ui-focus-ring-color);
}
.ui-email-list-box[data-invalid]:has(:is(.ui-email-list-input, .ui-email-chip-input):focus) {
  border-color: var(--control-danger);
  box-shadow: inset 0 0 0 1px var(--control-danger);
}
.ui-email-list-count {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  line-height: 1.45;
}
@media (any-pointer: coarse) {
  .ui-email-chip {
    min-height: 44px;
  }
  .ui-email-chip-label,
  .ui-email-chip-remove {
    min-height: 42px;
  }
  .ui-email-chip-remove {
    width: 42px;
  }
  .ui-email-list .ui-email-list-box .ui-email-list-input,
  .ui-email-list .ui-email-list-box .ui-email-chip-input {
    min-height: 42px;
  }
}
@media (forced-colors: active) {
  .ui-email-chip :is(.ui-email-chip-label, .ui-email-chip-remove):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}
/* SwitchRow and Avatar (AZCO-390). A switch row has the geometry of a
   grouped-list row (platform-web's ListRow): 48px tall, 16px leading inset,
   16px/22px label, a 32px icon tile; platform-web's list styles take over its
   height, inset, type and icon inside a ListSection. Tokens: --ink, --muted,
   --control-primary, --control-border-hover, --control-hover-neutral,
   --ui-accent-soft, --ui-avatar-surface, --ui-avatar-ink. */
.ui-switch-row {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px 10px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--ui-font-body, inherit);
  font-size: var(--ui-text-callout);
  font-weight: 400;
  line-height: 1.375;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 120ms ease;
}
.ui-switch-row:disabled {
  cursor: default;
  opacity: 0.55;
}
.ui-switch-row-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ui-radius-card-compact);
  background: var(--ui-accent-soft, var(--ui-surface-choice, #eef1e8));
  color: var(--control-primary);
}
.ui-switch-row-icon > svg {
  width: 20px;
  height: 20px;
}
.ui-switch-row-text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}
.ui-switch-row-label {
  overflow-wrap: anywhere;
}
.ui-switch-row-description {
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
  overflow-wrap: anywhere;
}
/* A toggle row: no hover and no pressed fill (D8, D11); it dips its content
   while held and takes an inset ring on keyboard focus (controls.css). */
/* SwitchRow: an iOS-sized track; Off is the line color, On the accent. */
.ui-switch-row-track {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 51px;
  height: 31px;
  /* The track overhangs the row's padding, so the text sets the height as on a list row. */
  margin-block: -4px;
  border-radius: 999px; /* radius: shape a switch track is always a capsule */
  background: var(--control-border-hover, var(--control-border));
  transition: background-color 160ms ease;
}
.ui-switch-row-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 25px;
  border-radius: var(--ui-radius-round);
  background: #ffffff;
  box-shadow: 0 1px 3px #00000033;
  transition: transform 160ms ease;
}
.ui-switch-row[aria-checked="true"] .ui-switch-row-track {
  background: var(--control-primary);
}
.ui-switch-row[aria-checked="true"] .ui-switch-row-track::after {
  transform: translateX(20px);
  /* The primary's label colour (AZCO-491), so the knob shows on a near-white primary (Night, Mono Dark). */
  background: var(--control-on-primary, #ffffff);
}
/* Compact density: the macOS switch, 40 by 24. */
@media (not (any-pointer: coarse)) {
  .ui-switch-row-track {
    width: 40px;
    height: 24px;
    margin-block: 0;
  }
  .ui-switch-row-track::after {
    width: 18px;
    height: 18px;
  }
  .ui-switch-row[aria-checked="true"] .ui-switch-row-track::after {
    transform: translateX(16px);
  }
}
.ui-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  border-radius: var(--ui-radius-round);
  background: var(--ui-avatar-surface, var(--ui-accent-soft, var(--ui-surface-choice, #eef1e8)));
  color: var(--ui-avatar-ink, var(--ink));
  font-family: var(--ui-font-display, inherit);
  font-weight: var(--ui-display-weight, 500);
  line-height: 1;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) {
  .ui-switch-row,
  .ui-switch-row-track,
  .ui-switch-row-track::after {
    transition: none;
  }
}
@media (forced-colors: active) {
  .ui-switch-row:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .ui-switch-row-track {
    border: 1px solid CanvasText;
  }
  .ui-switch-row[aria-checked="true"] .ui-switch-row-track {
    background: Highlight;
  }
}
/* SearchSelect (AZCO-318): a search field whose results drop below it, inside
   the field's own box so dialogs and sheets keep ownership of the list. */
.ui-search-select-control {
  position: relative;
}
.ui-search-select-control > .ui-input {
  padding-left: 36px;
}
.ui-search-select-control[data-has-value] > .ui-input {
  padding-right: 44px;
}
.ui-search-select-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.ui-search-select-clear {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
}
.ui-search-select-clear svg {
  width: 16px;
  height: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .ui-search-select-clear:hover {
    background: var(--ui-surface-row-hover);
  }
}
.ui-search-select-popup {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  box-sizing: border-box;
  max-height: min(280px, 50dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-menu);
  background: var(--control-surface);
  box-shadow: var(--ui-shadow-raised);
}
.ui-search-select-popup[hidden] {
  display: none;
}
.ui-search-select-list {
  margin: 0;
  padding: var(--ui-menu-inset);
  list-style: none;
}
.ui-search-select-list:empty {
  display: none;
}
.ui-search-select-list > [role="option"] {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  min-height: 44px;
  box-sizing: border-box;
  align-content: center;
  padding: 8px 10px;
  border-radius: var(--ui-radius-highlight);
  color: var(--ink);
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.35;
  cursor: pointer;
}
.ui-search-select-check {
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  color: var(--control-primary);
}
.ui-search-select-check > svg {
  width: 16px;
  height: 16px;
}
.ui-search-select-option-description {
  grid-column: 2;
}
@media (hover: hover) and (pointer: fine) {
  .ui-search-select-list[data-modality="pointer"] > [role="option"]:hover {
    background: var(--ui-surface-row-hover);
  }
}
/* Keyboard: the accent highlight (D6). */
.ui-search-select-list[data-modality="keyboard"] > [data-active] {
  background: var(--control-primary);
  color: var(--control-on-primary);
}
.ui-search-select-list[data-modality="keyboard"] > [data-active] :is(.ui-search-select-check, .ui-search-select-option-description) {
  color: var(--control-on-primary);
}
.ui-search-select-option-description {
  color: var(--muted);
  font-size: var(--ui-text-caption);
}
.ui-search-select-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  font-weight: 400;
  line-height: 1.45;
}
.ui-search-select-message[data-status="error"] {
  color: var(--control-danger);
}
.ui-search-select-spinner {
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid var(--line);
  border-top-color: var(--control-primary);
  border-radius: var(--ui-radius-round);
  animation: ui-search-select-spin 800ms linear infinite;
}
@keyframes ui-search-select-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-search-select-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .ui-search-select-spinner {
    animation: none;
  }
}
@media (forced-colors: active) {
  .ui-search-select-list > [data-active] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .ui-search-select-clear:focus-visible {
    outline: 2px solid Highlight;
  }
}
/* Thin scrollbars with no track (AZCO-552), for apps without platform-web too. */
.ui-search-select-list {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) transparent;
}
@supports not (scrollbar-color: auto) {
  .ui-search-select-list::-webkit-scrollbar {
    width: var(--ui-scrollbar-size);
    height: var(--ui-scrollbar-size);
    background: transparent;
  }
  .ui-search-select-list::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px; /* radius: shape a scrollbar thumb */
    background: var(--ui-scrollbar-thumb) padding-box;
  }
  @media (hover: hover) and (pointer: fine) {
    .ui-search-select-list::-webkit-scrollbar-thumb:hover {
      background: var(--ui-scrollbar-thumb-hover) padding-box;
    }
  }
  .ui-search-select-list::-webkit-scrollbar-track,
  .ui-search-select-list::-webkit-scrollbar-corner {
    background: transparent;
  }
}
/* StickyActionBar (AZCO-318): actions pinned to the bottom of the scroll
   container, padded above the safe area. */
.ui-sticky-action-bar {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  box-sizing: border-box;
  margin-top: auto;
  padding: 12px 0;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--control-surface);
}
.ui-sticky-action-status {
  flex: 1 1 200px;
  min-width: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.45;
}
.ui-sticky-action-status:empty {
  display: none;
}
.ui-sticky-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
@media (max-width: 600px) {
  .ui-sticky-action-bar {
    /* Bleed to the page gutters so the surface spans the screen. */
    margin-inline: calc(-1 * var(--page-gutter, 16px));
    padding-inline: var(--page-gutter, 16px);
  }
  .ui-sticky-action-status {
    flex-basis: 100%;
  }
  .ui-sticky-action-buttons {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .ui-sticky-action-buttons > :is(.ui-button, button, a) {
    flex: 1 1 0;
    min-height: 48px;
  }
}
/* StepFlow (AZCO-318): one question per screen. The flow fills its container's
   height so the action bar sits at the bottom even when a step is short. */
.ui-step-flow {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  min-width: 0;
  margin: 0;
}
.ui-step-flow-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
/* Back is a bar button (AZCO-556): on phones a 44px disc (--ui-bar-disc) on the raised surface with a soft shadow and
   no ring, in a 44px target (--ui-bar-target), its edge on the gutter; from 960px a plain ‹ in the same target, in
   secondary ink that darkens to ink on hover, with no fill. */
.ui-step-flow-back,
.ui-step-flow-back-space {
  flex: none;
  box-sizing: border-box;
  width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  margin-inline-start: calc((var(--ui-bar-disc) - var(--ui-bar-target)) / 2);
}
.ui-step-flow-back {
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-bar-ink);
  cursor: pointer;
  touch-action: manipulation;
}
.ui-step-flow-back::before {
  content: "";
  position: absolute;
  inset: calc((var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
  border-radius: var(--ui-radius-control);
  background: var(--ui-disc-surface);
  box-shadow: var(--ui-disc-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.ui-step-flow-back svg {
  position: relative;
}
.ui-step-flow-back:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  .ui-step-flow-back,
  .ui-step-flow-back-space {
    margin-inline-start: -12px;
  }
  .ui-step-flow-back::before {
    content: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .ui-step-flow-back:hover:not(:disabled) {
    color: var(--ink);
  }
}
/* From 960px, the header controls' row-hover fill at the button's corners (AZCO-580); no fill at rest. */
@media (min-width: 960px), (not (pointer: coarse)) {
  @media (hover: hover) and (pointer: fine) {
    .ui-step-flow-back:hover:not(:disabled) {
      background: var(--ui-surface-row-hover);
    }
  }
}
/* Determinate progress (AZCO-528): a 4px line track with the primary fill. */
.ui-step-flow-progress {
  flex: 1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px; /* radius: shape a progress track is a capsule */
  background: var(--line);
}
.ui-step-flow-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--control-primary);
  transition: width 200ms ease;
}
.ui-step-flow-count {
  flex: none;
  min-width: 48px;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ui-step-flow-body {
  display: grid;
  align-content: start;
  gap: 16px;
  flex: 1 0 auto;
  padding: 16px 0 24px;
}
.ui-step-flow-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--ui-font-display, inherit);
  font-size: var(--ui-text-title2);
  /* One-weight display faces (condensed poster fonts) set 400 so nothing is synthesized. */
  font-weight: var(--ui-display-weight, 500);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.ui-step-flow-title:focus {
  outline: none;
}
.ui-step-flow-description {
  margin-top: -8px;
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  line-height: 1.5;
}
.ui-step-flow-next {
  min-width: 120px;
}
.ui-step-flow-next[data-busy] {
  cursor: progress;
}
.ui-step-flow-spinner {
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--ui-radius-round);
  animation: ui-step-flow-spin 800ms linear infinite;
}
@keyframes ui-step-flow-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-step-flow-progress > span {
    transition: none;
  }
  .ui-step-flow-spinner {
    animation: none;
  }
}
@media (forced-colors: active) {
  .ui-step-flow-progress {
    border: 1px solid CanvasText;
  }
  .ui-step-flow-progress > span {
    background: Highlight;
  }
  .ui-step-flow-back:focus-visible {
    outline: 2px solid Highlight;
  }
}
/* Inside a flow frame (AZCO-546): no top bar of its own; the progress sits in the frame's heading and the actions in its
   pinned footer: Back leading, then Skip and the primary trailing. On phones Back is in the band instead, the primary
   is the big button and Skip a quiet text button above it. */
/* Two classes, so the frame's transparent surface outranks step-screen.css's canvas whatever the import order
   (AZCO-652): a framed step never paints a panel of its own inside the dialog. */
.ui-step-flow.ui-step-flow--framed,
.ui-step-screen.ui-step-screen--framed {
  min-height: 0;
  background: transparent;
}
.ui-step-screen--framed > .ui-step-screen-body {
  padding-inline: 0;
}
.ui-step-flow-frame-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ui-flow-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.ui-flow-actions > .ui-form-error:empty {
  display: none;
}
.ui-flow-actions > .ui-form-error,
.ui-flow-actions > .ui-step-screen-error {
  flex: 1 0 100%;
}
.ui-flow-actions-end {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .ui-flow-actions-back {
    display: none;
  }
  .ui-flow-actions-end {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
  }
}
/* StepScreen (AZCO-390): a phone's one-question screen. On phones it covers
   the screen (fixed, above the app's header and tabs at --ui-step-screen-layer)
   and scrolls itself; the top bar and the action stay pinned. Elsewhere it is
   a centered column that fills its container's height.
   Tokens: --ui-canvas, --ui-font-display, --ui-display-weight, --ink, --muted,
   --line, --control-primary, --ui-step-screen-width, and (AZCO-407)
   --ui-step-screen-title-size: the title's size, --ui-text-large-title (34px
   at the default text size). On screens up to 380px wide the title is at most
   4px under the large title (30px at the default), so a smaller size applies
   everywhere and a larger one stops there. Text sizes follow the type scale
   (AZCO-526). The action's height is the big button's
   (--ui-button-big-height, 56px).
   The pinned action never hides content for good (AZCO-407): it is the last
   part of the screen's flow, so scrolling to the end shows the body's last
   line above it, and the full-bleed scroller's scroll padding keeps a focused
   or scrolled-to field clear of the top bar and the action. */
.ui-step-screen {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: 100%;
  min-width: 0;
  margin: 0;
  background: var(--ui-canvas, var(--control-surface));
  color: var(--ink);
  font-family: var(--ui-font-body, inherit);
}
@media (max-width: 600px) {
  .ui-step-screen[data-full-bleed] {
    position: fixed;
    inset: 0;
    z-index: var(--ui-step-screen-layer, 50);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* The pinned top bar and action: a focused field or a scrolled-to
       element stops clear of them instead of under them. */
    scroll-padding-top: calc(max(12px, env(safe-area-inset-top)) + 52px);
    scroll-padding-bottom: calc(16px + var(--ui-button-big-height, 56px) + max(24px, env(safe-area-inset-bottom)));
  }
  /* Each stacked action (AZCO-686) adds its height and the foot's 8px gap. */
  .ui-step-screen[data-full-bleed][data-actions="1"] {
    scroll-padding-bottom: calc(16px + var(--ui-button-big-height, 56px) + var(--ui-height-control, 44px) + 8px + max(24px, env(safe-area-inset-bottom)));
  }
  .ui-step-screen[data-full-bleed][data-actions="2"] {
    scroll-padding-bottom: calc(16px + var(--ui-button-big-height, 56px) + 2 * (var(--ui-height-control, 44px) + 8px) + max(24px, env(safe-area-inset-bottom)));
  }
}
.ui-step-screen-top {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: var(--ui-step-screen-width, 560px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
  background: linear-gradient(var(--ui-canvas, var(--control-surface)) 80%, transparent);
}
.ui-step-screen-spacer {
  flex: none;
  width: 44px;
  height: 44px;
}
/* Back and Close are bar buttons (AZCO-556): on phones 44px discs (--ui-bar-disc) on the raised surface with a soft
   shadow and no ring, in 44px targets (--ui-bar-target); from 960px plain glyphs in secondary ink that darkens on hover.
   Skip stays a text button. */
.ui-button.ui-button--round:is(.ui-step-screen-back, .ui-step-screen-close) {
  position: relative;
  width: var(--ui-bar-target);
  min-width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  min-height: var(--ui-bar-target);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ui-bar-ink);
}
.ui-button.ui-button--round:is(.ui-step-screen-back, .ui-step-screen-close)::before {
  content: "";
  position: absolute;
  inset: calc((var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
  border-radius: var(--ui-radius-control);
  background: var(--ui-disc-surface);
  box-shadow: var(--ui-disc-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.ui-button.ui-button--round:is(.ui-step-screen-back, .ui-step-screen-close) > svg {
  position: relative;
  width: var(--ui-bar-glyph);
  height: var(--ui-bar-glyph);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  .ui-button.ui-button--round:is(.ui-step-screen-back, .ui-step-screen-close)::before {
    content: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  .ui-button.ui-button--round:is(.ui-step-screen-back, .ui-step-screen-close):hover:not(:disabled) {
    color: var(--ink);
  }
}
/* From 960px, the header controls' row-hover fill at the button's corners (AZCO-580); no fill at rest. */
@media (min-width: 960px), (not (pointer: coarse)) {
  @media (hover: hover) and (pointer: fine) {
    .ui-button.ui-button--round:is(.ui-step-screen-back, .ui-step-screen-close):hover:not(:disabled) {
      background: var(--ui-surface-row-hover);
    }
  }
}
.ui-step-screen-progress {
  flex: 1;
  display: flex;
  gap: 5px;
}
.ui-step-screen-progress > span {
  flex: 1;
  height: 4px;
  border-radius: 999px; /* radius: shape a progress track is a capsule */
  background: var(--control-border);
  transition: background-color 200ms ease;
}
.ui-step-screen-progress > span[data-done] {
  background: var(--control-primary);
}
.ui-button.ui-step-screen-skip {
  flex: none;
  min-width: 44px;
  padding-inline: 8px;
  color: var(--ink);
  font-size: var(--ui-text-callout);
  font-weight: 400;
}
.ui-step-screen-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--ui-step-screen-width, 560px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px 24px 24px;
}
.ui-step-screen-title {
  margin: 14px 0 0;
  color: var(--ink);
  font-family: var(--ui-font-display, inherit);
  font-size: var(--ui-step-screen-title-size, var(--ui-text-large-title));
  font-weight: var(--ui-display-weight, 500);
  letter-spacing: -0.02em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}
.ui-step-screen-title:focus {
  outline: none;
}
.ui-step-screen-description {
  margin: -6px 0 6px;
  color: var(--muted);
  font-size: var(--ui-text-body);
  line-height: 1.45;
}
.ui-step-screen-foot {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: var(--ui-step-screen-width, 560px);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16px 24px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, var(--ui-canvas, var(--control-surface)) 28%);
  /* Above the body's own layers (a transformed or masked preview, a raised
     field), as the top bar is. */
  z-index: 1;
}
/* The foot's other choices (AZCO-686): full width, stacked above the primary at the control height. */
.ui-step-screen-foot > .ui-button.ui-step-screen-action {
  width: 100%;
}
.ui-step-screen-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ui-step-screen-error {
  margin: 0;
  font-size: var(--ui-text-subhead);
  line-height: 1.4;
}
.ui-step-screen-note {
  opacity: 0.7;
  font-weight: 400;
}
@media (max-width: 380px) {
  .ui-step-screen-title {
    font-size: min(var(--ui-step-screen-title-size, var(--ui-text-large-title)), calc(var(--ui-text-large-title) - 4px));
  }
  .ui-step-screen-body,
  .ui-step-screen-foot {
    padding-inline: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-step-screen-progress > span {
    transition: none;
  }
}
@media (forced-colors: active) {
  .ui-step-screen-progress > span {
    border: 1px solid CanvasText;
  }
  .ui-step-screen-progress > span[data-done] {
    background: Highlight;
  }
}
/* A title and view controls share one bottom-aligned row. Controls stay outside the heading. */
.ui-step-screen-title-bar { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 14px; min-width: 0; }
.ui-step-screen-title-bar .ui-step-screen-title { margin: 0; flex: 1 1 200px; }
.ui-step-screen-title-controls { flex: none; margin-left: auto; }
/* StepLayer (AZCO-827): a step stacked over the screen it was opened from. It slides in from the end edge and stops
   short of the start, so the screen beneath stays in sight behind a light scrim: on phones a sliver of
   --ui-step-layer-peek (20px) at the start, full height; from 601px a card the step screen's width, centred over the
   column beneath so none of its text shows at the card's edge (AZCO-787: offset by 32px, the column's first 8px of
   text peeked out cut off), inset from the top and bottom. Back, Escape or a tap on the screen beneath
   sends it back to the end. The layer is the StepScreen's frame and scroller: the step's top bar and action stay
   pinned inside it.
   Tokens: --ui-step-screen-width, --ui-canvas, --ui-shadow-overlay, --ui-ease-sheet, --ui-motion-sheet,
   --ui-ease-exit, --ui-step-layer-peek, --ui-step-layer-backdrop, --ui-step-layer-radius. */
dialog.ui-step-layer {
  --ui-step-layer-peek: 20px;
  box-sizing: border-box;
  position: fixed;
  inset: 0 0 0 auto;
  width: calc(100% - var(--ui-step-layer-peek));
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-start-start-radius: var(--ui-step-layer-radius); /* radius: shape the card's leading corners */
  border-end-start-radius: var(--ui-step-layer-radius); /* radius: shape the card's leading corners */
  background: var(--ui-canvas, var(--control-surface));
  box-shadow: var(--ui-shadow-overlay);
  color: var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The step's pinned top bar and action: a focused field stops clear of them. */
  scroll-padding-top: calc(max(12px, env(safe-area-inset-top)) + 52px);
  scroll-padding-bottom: calc(16px + var(--ui-button-big-height, 56px) + max(24px, env(safe-area-inset-bottom)));
  animation: ui-step-layer-in var(--ui-motion-sheet, 380ms) var(--ui-ease-sheet, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
dialog.ui-step-layer:focus {
  outline: none;
}
dialog.ui-step-layer::backdrop {
  background: var(--ui-step-layer-backdrop);
  animation: ui-step-layer-fade-in var(--ui-motion-sheet, 380ms) var(--ui-ease-sheet, cubic-bezier(0.32, 0.72, 0, 1)) both;
}
dialog.ui-step-layer[data-leaving] {
  animation: ui-step-layer-out 280ms var(--ui-ease-exit, cubic-bezier(0.3, 0, 0.8, 0.15)) both;
}
dialog.ui-step-layer[data-leaving]::backdrop {
  animation: ui-step-layer-fade-out 280ms var(--ui-ease-exit, cubic-bezier(0.3, 0, 0.8, 0.15)) both;
}
/* The step fills its layer, which is its frame: no full-bleed cover of its own. */
dialog.ui-step-layer > .ui-step-screen {
  min-height: 100%;
}
@media (min-width: 601px) {
  dialog.ui-step-layer {
    --ui-step-layer-peek: 16px;
    inset: 16px auto 16px max(var(--ui-step-layer-peek), calc(50% - var(--ui-step-screen-width, 560px) / 2));
    width: min(var(--ui-step-screen-width, 560px), calc(100% - 2 * var(--ui-step-layer-peek)));
    height: auto;
    border-radius: var(--ui-step-layer-radius); /* radius: shape a floating card */
  }
}
@keyframes ui-step-layer-in {
  from {
    translate: calc(100% + 48px) 0;
  }
}
@keyframes ui-step-layer-out {
  to {
    translate: calc(100% + 48px) 0;
  }
}
@keyframes ui-step-layer-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes ui-step-layer-fade-out {
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.ui-step-layer {
    animation-name: ui-step-layer-fade-in;
  }
  dialog.ui-step-layer[data-leaving] {
    animation-name: ui-step-layer-fade-out;
  }
}
@media (forced-colors: active) {
  dialog.ui-step-layer {
    border: 1px solid CanvasText;
  }
}
/* Carousel (AZCO-318): a scroll-snapped row of cards with page dots. Arrows
   show only on devices with a fine, hovering pointer; touch swipes. */
.ui-carousel {
  --ui-carousel-item-width: min(85%, 340px);
  display: grid;
  gap: 8px;
  min-width: 0;
}
/* Positioned, so each card's offsetLeft is measured from the scroll origin. Its own stacking context (isolation)
   keeps Safari clipping the scrolled cards to its corners (AZCO-574). The scroller clips its cards' overflow, so it
   pads below them for their resting shadow and takes the room back with a negative margin: a card's bottom corners
   keep their shadow instead of ending in a flat cut. */
.ui-carousel-viewport {
  position: relative;
  isolation: isolate;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 2px 6px;
  margin-block: -2px -6px;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: var(--ui-radius-panel, 8px);
}
/* A scroller: the keyboard ring sits inside its edge. */
.ui-carousel-viewport:focus-visible:not([data-restored-focus]) {
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}
.ui-carousel-viewport::-webkit-scrollbar {
  display: none;
}
.ui-carousel-track {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ui-carousel-slide {
  display: flex;
  flex: 0 0 var(--ui-carousel-item-width);
  min-width: 0;
  scroll-snap-align: start;
}
.ui-carousel-slide > * {
  flex: 1;
  min-width: 0;
  /* A card is clipped by its own corners in its own stacking context, which Safari otherwise drops for a
     scroll-snapped child, painting square or torn bottom corners (AZCO-574). */
  isolation: isolate;
}
.ui-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ui-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* Each dot is a 44px target around an 8px mark. */
.ui-carousel-dot {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ui-carousel-dot > span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--control-border-hover);
  transition:
    width 160ms ease,
    background-color 160ms ease;
}
.ui-carousel-dot[aria-current="true"] > span {
  width: 20px;
  background: var(--control-primary);
}
/* The arrows are icon-only buttons: discs at the control height, no border (AZCO-585). */
.ui-carousel-arrow {
  display: none;
  place-items: center;
  width: var(--control-height, 44px);
  height: var(--control-height, 44px);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-disc-surface);
  box-shadow: var(--ui-disc-shadow);
  color: var(--ink);
  cursor: pointer;
}
.ui-carousel-arrow svg {
  width: 18px;
  height: 18px;
}
.ui-carousel-arrow:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .ui-carousel-arrow {
    display: inline-grid;
  }
  .ui-carousel-arrow:hover:not(:disabled) {
    background: var(--ui-surface-row-hover);
  }
  .ui-carousel-dot:hover > span {
    background: var(--control-primary-hover);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-carousel-viewport {
    scroll-behavior: auto;
  }
  .ui-carousel-dot > span {
    transition: none;
  }
}
@media (forced-colors: active) {
  .ui-carousel-dot > span {
    background: CanvasText;
  }
  .ui-carousel-dot[aria-current="true"] > span {
    background: Highlight;
  }
  .ui-carousel-viewport:focus-visible,
  .ui-carousel-arrow:focus-visible,
  .ui-carousel-dot:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}
/* MediaImage: cold images fade in over 360ms once the surface's shared reveal
   timing releases them; warm images and reduced motion show at once. */
.ui-media-image {
  opacity: 0;
  transition: opacity 360ms ease-in-out;
}
.ui-media-image[data-media-ready="true"] {
  opacity: 1;
}
.ui-media-image[data-media-warm="true"] {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .ui-media-image {
    transition: none;
  }
}
/* An inline preview is available before the network image. Keep the native
   image box intact and sharpen it with the same shared reveal timing. */
.ui-media-image[data-media-preview] {
  opacity: 1;
  transition: filter 360ms ease-in-out;
}
.ui-media-image[data-media-preview="true"] {
  filter: blur(2px);
}
.ui-media-image[data-media-preview="false"] {
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .ui-media-image[data-media-preview] {
    transition: none;
  }
}
/* useSettingFeedback: a setting keeps its value summary; a tinted surface and
   a check beside its label reinforce the configured state, and each committed
   change pulses once. The element that shows the setting carries the
   ui-setting-feedback class and the hook's attributes. */
.ui-setting-feedback {
  --setting-background: var(--control-surface);
  --setting-pulse-background: color-mix(
    in srgb,
    var(--control-primary) 28%,
    var(--control-surface)
  );
}
.ui-setting-feedback[data-configured="true"] {
  --setting-background: color-mix(
    in srgb,
    var(--control-primary) 5%,
    var(--control-surface)
  );
}
/* The check reinforces the configured value without resembling an unread dot. */
.ui-setting-feedback[data-configured="true"] [data-setting-label]::after {
  content: "✓";
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  margin-inline-start: 6px;
  font-size: var(--ui-text-caption);
  color: var(--control-primary);
  vertical-align: middle;
}
/* Alternating names restart the animation for every change. */
.ui-setting-feedback[data-setting-pulse="a"] {
  animation: ui-setting-change-a 800ms ease-out;
}
.ui-setting-feedback[data-setting-pulse="b"] {
  animation: ui-setting-change-b 800ms ease-out;
}
@keyframes ui-setting-change-a {
  0%,
  100% {
    background-color: var(--setting-background);
  }
  35% {
    background-color: var(--setting-pulse-background);
  }
}
@keyframes ui-setting-change-b {
  0%,
  100% {
    background-color: var(--setting-background);
  }
  35% {
    background-color: var(--setting-pulse-background);
  }
}
/* As specific as the pulse rules, so reduced motion always removes the pulse. */
@media (prefers-reduced-motion: reduce) {
  .ui-setting-feedback,
  .ui-setting-feedback[data-setting-pulse] {
    animation: none;
    transition: none;
  }
}

/* All style templates. Load after styles.css; apply one with
   data-ui-template="<name>" on the element it should style. The retired
   "studio" resolves to Mono (mono.css matches it). */
/* Classic: deep green actions on warm off-white, the package's default inputs.
   A template sets only its inputs, faces and the type scale (AZCO-491): every
   other token derives from the inputs in tokens.css. */
:root[data-ui-template="classic"],
[data-ui-template="classic"] {
  color-scheme: light;
  /* Inputs */
  --ui-canvas: #fafaf7;
  --ink: #173e35;
  --control-primary: #294a39;
  --control-on-primary: #fffdf5;
  /* Faces */
  --ui-font-body: Inter, system-ui, sans-serif;
  --ui-font-display: var(--ui-font-body);
  --ui-control-face: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The type scale (AZCO-526), from the root's --ui-text-base, which no
     template sets: it is the person's text size (tokens.css). */
  --ui-text-large-title: max(11px, min(calc(var(--ui-text-base) + 17px), calc(var(--ui-text-base) * 2 / 3 + 24.667px)));
  --ui-text-title1: max(11px, min(calc(var(--ui-text-base) + 11px), calc(var(--ui-text-base) * 0.8 + 15.6px)));
  --ui-text-title2: max(11px, min(calc(var(--ui-text-base) + 5px), calc(var(--ui-text-base) * 0.885 + 9.1px)));
  --ui-text-title3: max(11px, calc(var(--ui-text-base) + 3px));
  --ui-text-headline: max(11px, var(--ui-text-base));
  --ui-text-headline-weight: 500;
  --ui-text-body: max(11px, var(--ui-text-base));
  --ui-text-callout: max(11px, min(calc(var(--ui-text-base) - 1px), calc(var(--ui-text-base) * 0.96)));
  --ui-text-subhead: max(11px, min(calc(var(--ui-text-base) - 2px), calc(var(--ui-text-base) * 0.9 + 0.3px)));
  --ui-text-footnote: max(12px, min(calc(var(--ui-text-base) - 4px), calc(var(--ui-text-base) * 0.83)));
  --ui-text-caption: max(11px, min(calc(var(--ui-text-base) - 5px), calc(var(--ui-text-base) * 0.8)));
  --ui-text-caption2: max(11px, min(calc(var(--ui-text-base) - 6px), calc(var(--ui-text-base) * 0.74)));
  /* Text in fields: subhead, the step of the controls beside them. */
  --ui-text-field: var(--ui-text-subhead);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root[data-ui-template="classic"],
  [data-ui-template="classic"] {
    --ui-text-large-title: max(11px, 2.125rem);
    --ui-text-title1: max(11px, 1.75rem);
    --ui-text-title2: max(11px, 1.375rem);
    --ui-text-title3: max(11px, 1.125rem);
    --ui-text-headline: max(11px, 0.9375rem);
    --ui-text-body: max(11px, 0.875rem);
    --ui-text-callout: max(11px, 0.875rem);
    --ui-text-subhead: max(11px, 0.875rem);
    --ui-text-footnote: max(11px, 0.8125rem);
    --ui-text-caption: max(11px, 0.75rem);
    --ui-text-caption2: max(11px, 0.6875rem);
  }
}
/* Where iOS Safari zooms into a field with text under 16px when it takes
   focus (below 960px, coarse pointer), field text is at least 16px and grows
   with the body. Desktop fields keep subhead, as desktop controls do. */
@media (max-width: 959.98px) and (pointer: coarse) {
  :root[data-ui-template="classic"],
  [data-ui-template="classic"] {
    --ui-text-field: max(16px, var(--ui-text-body));
  }
}
:where([data-ui-template="classic"]) {
  color: var(--ink);
  background-color: var(--ui-canvas);
  font-family: var(--ui-font-body);
}
/* Editorial: warm paper, near-black warm ink and one deep blue accent, with a serif
   face for titles only (AZCO-491).
   A template sets only its inputs, faces and the type scale (AZCO-491): every
   other token derives from the inputs in tokens.css. */
:root[data-ui-template="editorial"],
[data-ui-template="editorial"] {
  color-scheme: light;
  /* Inputs */
  --ui-canvas: #f7f3ec;
  --ink: #1f1b16;
  --control-primary: #1f3f6b;
  --control-on-primary: #ffffff;
  /* Faces */
  --ui-font-body: "Avenir Next", Avenir, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --ui-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --ui-control-face: "Avenir Next", Avenir, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The type scale (AZCO-526), from the root's --ui-text-base, which no
     template sets: it is the person's text size (tokens.css). */
  --ui-text-large-title: max(11px, min(calc(var(--ui-text-base) + 17px), calc(var(--ui-text-base) * 2 / 3 + 24.667px)));
  --ui-text-title1: max(11px, min(calc(var(--ui-text-base) + 11px), calc(var(--ui-text-base) * 0.8 + 15.6px)));
  --ui-text-title2: max(11px, min(calc(var(--ui-text-base) + 5px), calc(var(--ui-text-base) * 0.885 + 9.1px)));
  --ui-text-title3: max(11px, calc(var(--ui-text-base) + 3px));
  --ui-text-headline: max(11px, var(--ui-text-base));
  --ui-text-headline-weight: 500;
  --ui-text-body: max(11px, var(--ui-text-base));
  --ui-text-callout: max(11px, min(calc(var(--ui-text-base) - 1px), calc(var(--ui-text-base) * 0.96)));
  --ui-text-subhead: max(11px, min(calc(var(--ui-text-base) - 2px), calc(var(--ui-text-base) * 0.9 + 0.3px)));
  --ui-text-footnote: max(12px, min(calc(var(--ui-text-base) - 4px), calc(var(--ui-text-base) * 0.83)));
  --ui-text-caption: max(11px, min(calc(var(--ui-text-base) - 5px), calc(var(--ui-text-base) * 0.8)));
  --ui-text-caption2: max(11px, min(calc(var(--ui-text-base) - 6px), calc(var(--ui-text-base) * 0.74)));
  /* Text in fields: subhead, the step of the controls beside them. */
  --ui-text-field: var(--ui-text-subhead);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root[data-ui-template="editorial"],
  [data-ui-template="editorial"] {
    --ui-text-large-title: max(11px, 2.125rem);
    --ui-text-title1: max(11px, 1.75rem);
    --ui-text-title2: max(11px, 1.375rem);
    --ui-text-title3: max(11px, 1.125rem);
    --ui-text-headline: max(11px, 0.9375rem);
    --ui-text-body: max(11px, 0.875rem);
    --ui-text-callout: max(11px, 0.875rem);
    --ui-text-subhead: max(11px, 0.875rem);
    --ui-text-footnote: max(11px, 0.8125rem);
    --ui-text-caption: max(11px, 0.75rem);
    --ui-text-caption2: max(11px, 0.6875rem);
  }
}
/* Where iOS Safari zooms into a field with text under 16px when it takes
   focus (below 960px, coarse pointer), field text is at least 16px and grows
   with the body. Desktop fields keep subhead, as desktop controls do. */
@media (max-width: 959.98px) and (pointer: coarse) {
  :root[data-ui-template="editorial"],
  [data-ui-template="editorial"] {
    --ui-text-field: max(16px, var(--ui-text-body));
  }
}
:where([data-ui-template="editorial"]) {
  color: var(--ink);
  background-color: var(--ui-canvas);
  font-family: var(--ui-font-body);
}
/* Night: light text on dark green-black, with a near-white primary carrying dark
   text (as ChatGPT's dark theme) and a pale green accent for links, focus and the unread dot.
   A template sets only its inputs, faces and the type scale (AZCO-491): every
   other token derives from the inputs in tokens.css. */
:root[data-ui-template="night"],
[data-ui-template="night"] {
  color-scheme: dark;
  /* Inputs */
  --ui-canvas: #111513;
  --ink: #e6ece8;
  --control-primary: #ecf0ed;
  --control-on-primary: #111513;
  --ui-accent: #9fd3b4;
  /* Faces */
  --ui-font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --ui-font-display: var(--ui-font-body);
  --ui-control-face: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The type scale (AZCO-526), from the root's --ui-text-base, which no
     template sets: it is the person's text size (tokens.css). */
  --ui-text-large-title: max(11px, min(calc(var(--ui-text-base) + 17px), calc(var(--ui-text-base) * 2 / 3 + 24.667px)));
  --ui-text-title1: max(11px, min(calc(var(--ui-text-base) + 11px), calc(var(--ui-text-base) * 0.8 + 15.6px)));
  --ui-text-title2: max(11px, min(calc(var(--ui-text-base) + 5px), calc(var(--ui-text-base) * 0.885 + 9.1px)));
  --ui-text-title3: max(11px, calc(var(--ui-text-base) + 3px));
  --ui-text-headline: max(11px, var(--ui-text-base));
  --ui-text-headline-weight: 500;
  --ui-text-body: max(11px, var(--ui-text-base));
  --ui-text-callout: max(11px, min(calc(var(--ui-text-base) - 1px), calc(var(--ui-text-base) * 0.96)));
  --ui-text-subhead: max(11px, min(calc(var(--ui-text-base) - 2px), calc(var(--ui-text-base) * 0.9 + 0.3px)));
  --ui-text-footnote: max(12px, min(calc(var(--ui-text-base) - 4px), calc(var(--ui-text-base) * 0.83)));
  --ui-text-caption: max(11px, min(calc(var(--ui-text-base) - 5px), calc(var(--ui-text-base) * 0.8)));
  --ui-text-caption2: max(11px, min(calc(var(--ui-text-base) - 6px), calc(var(--ui-text-base) * 0.74)));
  /* Text in fields: subhead, the step of the controls beside them. */
  --ui-text-field: var(--ui-text-subhead);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root[data-ui-template="night"],
  [data-ui-template="night"] {
    --ui-text-large-title: max(11px, 2.125rem);
    --ui-text-title1: max(11px, 1.75rem);
    --ui-text-title2: max(11px, 1.375rem);
    --ui-text-title3: max(11px, 1.125rem);
    --ui-text-headline: max(11px, 0.9375rem);
    --ui-text-body: max(11px, 0.875rem);
    --ui-text-callout: max(11px, 0.875rem);
    --ui-text-subhead: max(11px, 0.875rem);
    --ui-text-footnote: max(11px, 0.8125rem);
    --ui-text-caption: max(11px, 0.75rem);
    --ui-text-caption2: max(11px, 0.6875rem);
  }
}
/* Where iOS Safari zooms into a field with text under 16px when it takes
   focus (below 960px, coarse pointer), field text is at least 16px and grows
   with the body. Desktop fields keep subhead, as desktop controls do. */
@media (max-width: 959.98px) and (pointer: coarse) {
  :root[data-ui-template="night"],
  [data-ui-template="night"] {
    --ui-text-field: max(16px, var(--ui-text-body));
  }
}
:where([data-ui-template="night"]) {
  color: var(--ink);
  background-color: var(--ui-canvas);
  font-family: var(--ui-font-body);
}
/* Mono: black and white. A white canvas, near-black ink and black actions with
   white labels. Every neutral derives from them, so each is a pure grey (R = G = B);
   only danger and the feedback tones carry a hue. The retired Studio template
   (data-ui-template="studio") resolves here.
   A template sets only its inputs, faces and the type scale (AZCO-491): every
   other token derives from the inputs in tokens.css. */
:root[data-ui-template="mono"],
[data-ui-template="mono"],
:root[data-ui-template="studio"],
[data-ui-template="studio"] {
  color-scheme: light;
  /* Inputs */
  --ui-canvas: #ffffff;
  --ink: #0d0d0d;
  --control-primary: #0d0d0d;
  --control-on-primary: #ffffff;
  --control-danger: #c62828;
  --ui-tint-warm: #8a8a8a;
  --ui-tint-cool: #6e6e6e;
  /* Faces */
  --ui-font-body: Inter, system-ui, sans-serif;
  --ui-font-display: var(--ui-font-body);
  --ui-control-face: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The type scale (AZCO-526), from the root's --ui-text-base, which no
     template sets: it is the person's text size (tokens.css). */
  --ui-text-large-title: max(11px, min(calc(var(--ui-text-base) + 17px), calc(var(--ui-text-base) * 2 / 3 + 24.667px)));
  --ui-text-title1: max(11px, min(calc(var(--ui-text-base) + 11px), calc(var(--ui-text-base) * 0.8 + 15.6px)));
  --ui-text-title2: max(11px, min(calc(var(--ui-text-base) + 5px), calc(var(--ui-text-base) * 0.885 + 9.1px)));
  --ui-text-title3: max(11px, calc(var(--ui-text-base) + 3px));
  --ui-text-headline: max(11px, var(--ui-text-base));
  --ui-text-headline-weight: 500;
  --ui-text-body: max(11px, var(--ui-text-base));
  --ui-text-callout: max(11px, min(calc(var(--ui-text-base) - 1px), calc(var(--ui-text-base) * 0.96)));
  --ui-text-subhead: max(11px, min(calc(var(--ui-text-base) - 2px), calc(var(--ui-text-base) * 0.9 + 0.3px)));
  --ui-text-footnote: max(12px, min(calc(var(--ui-text-base) - 4px), calc(var(--ui-text-base) * 0.83)));
  --ui-text-caption: max(11px, min(calc(var(--ui-text-base) - 5px), calc(var(--ui-text-base) * 0.8)));
  --ui-text-caption2: max(11px, min(calc(var(--ui-text-base) - 6px), calc(var(--ui-text-base) * 0.74)));
  /* Text in fields: subhead, the step of the controls beside them. */
  --ui-text-field: var(--ui-text-subhead);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root[data-ui-template="mono"],
  [data-ui-template="mono"],
  :root[data-ui-template="studio"],
  [data-ui-template="studio"] {
    --ui-text-large-title: max(11px, 2.125rem);
    --ui-text-title1: max(11px, 1.75rem);
    --ui-text-title2: max(11px, 1.375rem);
    --ui-text-title3: max(11px, 1.125rem);
    --ui-text-headline: max(11px, 0.9375rem);
    --ui-text-body: max(11px, 0.875rem);
    --ui-text-callout: max(11px, 0.875rem);
    --ui-text-subhead: max(11px, 0.875rem);
    --ui-text-footnote: max(11px, 0.8125rem);
    --ui-text-caption: max(11px, 0.75rem);
    --ui-text-caption2: max(11px, 0.6875rem);
  }
}
/* Where iOS Safari zooms into a field with text under 16px when it takes
   focus (below 960px, coarse pointer), field text is at least 16px and grows
   with the body. Desktop fields keep subhead, as desktop controls do. */
@media (max-width: 959.98px) and (pointer: coarse) {
  :root[data-ui-template="mono"],
  [data-ui-template="mono"],
  :root[data-ui-template="studio"],
  [data-ui-template="studio"] {
    --ui-text-field: max(16px, var(--ui-text-body));
  }
}
:where([data-ui-template="mono"]),
:where([data-ui-template="studio"]) {
  color: var(--ink);
  background-color: var(--ui-canvas);
  font-family: var(--ui-font-body);
}
/* Mono Dark: white text and white actions on true black, Mono's dark counterpart.
   Every neutral is a pure grey; only danger and the feedback tones carry a hue.
   A template sets only its inputs, faces and the type scale (AZCO-491): every
   other token derives from the inputs in tokens.css. */
:root[data-ui-template="mono-dark"],
[data-ui-template="mono-dark"] {
  color-scheme: dark;
  /* Inputs */
  --ui-canvas: #000000;
  --ink: #ffffff;
  --control-primary: #ffffff;
  --control-on-primary: #000000;
  --control-danger: #ff7b72;
  --control-danger-solid: #c62828;
  --ui-tint-warm: #8a8a8a;
  --ui-tint-cool: #6e6e6e;
  /* Faces */
  --ui-font-body: Inter, system-ui, sans-serif;
  --ui-font-display: var(--ui-font-body);
  --ui-control-face: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* The type scale (AZCO-526), from the root's --ui-text-base, which no
     template sets: it is the person's text size (tokens.css). */
  --ui-text-large-title: max(11px, min(calc(var(--ui-text-base) + 17px), calc(var(--ui-text-base) * 2 / 3 + 24.667px)));
  --ui-text-title1: max(11px, min(calc(var(--ui-text-base) + 11px), calc(var(--ui-text-base) * 0.8 + 15.6px)));
  --ui-text-title2: max(11px, min(calc(var(--ui-text-base) + 5px), calc(var(--ui-text-base) * 0.885 + 9.1px)));
  --ui-text-title3: max(11px, calc(var(--ui-text-base) + 3px));
  --ui-text-headline: max(11px, var(--ui-text-base));
  --ui-text-headline-weight: 500;
  --ui-text-body: max(11px, var(--ui-text-base));
  --ui-text-callout: max(11px, min(calc(var(--ui-text-base) - 1px), calc(var(--ui-text-base) * 0.96)));
  --ui-text-subhead: max(11px, min(calc(var(--ui-text-base) - 2px), calc(var(--ui-text-base) * 0.9 + 0.3px)));
  --ui-text-footnote: max(12px, min(calc(var(--ui-text-base) - 4px), calc(var(--ui-text-base) * 0.83)));
  --ui-text-caption: max(11px, min(calc(var(--ui-text-base) - 5px), calc(var(--ui-text-base) * 0.8)));
  --ui-text-caption2: max(11px, min(calc(var(--ui-text-base) - 6px), calc(var(--ui-text-base) * 0.74)));
  /* Text in fields: subhead, the step of the controls beside them. */
  --ui-text-field: var(--ui-text-subhead);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root[data-ui-template="mono-dark"],
  [data-ui-template="mono-dark"] {
    --ui-text-large-title: max(11px, 2.125rem);
    --ui-text-title1: max(11px, 1.75rem);
    --ui-text-title2: max(11px, 1.375rem);
    --ui-text-title3: max(11px, 1.125rem);
    --ui-text-headline: max(11px, 0.9375rem);
    --ui-text-body: max(11px, 0.875rem);
    --ui-text-callout: max(11px, 0.875rem);
    --ui-text-subhead: max(11px, 0.875rem);
    --ui-text-footnote: max(11px, 0.8125rem);
    --ui-text-caption: max(11px, 0.75rem);
    --ui-text-caption2: max(11px, 0.6875rem);
  }
}
/* Where iOS Safari zooms into a field with text under 16px when it takes
   focus (below 960px, coarse pointer), field text is at least 16px and grows
   with the body. Desktop fields keep subhead, as desktop controls do. */
@media (max-width: 959.98px) and (pointer: coarse) {
  :root[data-ui-template="mono-dark"],
  [data-ui-template="mono-dark"] {
    --ui-text-field: max(16px, var(--ui-text-body));
  }
}
:where([data-ui-template="mono-dark"]) {
  color: var(--ink);
  background-color: var(--ui-canvas);
  font-family: var(--ui-font-body);
}

/* @azose-co/platform-web 0.81.3: shell, administration, reporter and feedback hub. Load after @azose-co/platform-ui/styles.css. */

/* 01-tokens.css */
/* Platform tokens build on @azose-co/platform-ui's, including its style templates
   (data-ui-template), so a template restyles the shell too. Rules reference
   the ui tokens directly; only values ui leaves to apps are defaulted here. */
:root {
  --platform-header-height: 64px;
  /* The desktop sidebar's width (AZCO-548), and the Settings page's left column that stands in for it. */
  --platform-sidebar-width: 264px;
  /* The collapsed sidebar (AZCO-539): icons only, each where it sits in the open sidebar. */
  --platform-rail-width: 60px;
  /* A navigation row's height (AZCO-491): the sidebar's, the rail's and the Settings column's, 2px apart. */
  --platform-nav-row-height: 36px;
  /* Page columns; apps may set either, `none` filling the content column (AZCO-405). A fixed page from 960px is the
     720px app column (AZCO-635, mixed widths), as Settings' sections are; tables, lists and splits fill. */
  --platform-page-width: var(--platform-app-column);
  --platform-record-width: 960px;
  /* The modal scrim: the template's --ui-backdrop (black in Night, Mono and Mono Dark; AZCO-491). */
  --platform-backdrop: var(--ui-backdrop, #1a2a2259);
  /* The phone's navigation (10-app-layout.css): tab bar, content column, the
     compact bar and large titles. Apps set the faces with `--platform-font-display`
     (titles; default `--ui-font-display`, then `--ui-font-body`) and `--ui-font-body`
     (everything else, tab labels included). The platform ships no font files. */
  /* Phone sizes follow iOS (AZCO-400): a 44px compact bar and 12px tab labels. The tab bar (AZCO-649) is a row of
     pills, one per tab: the current tab's fill covers its icon and label. Docked, the bar keeps 6px above the pills
     and 6px below them, or the home indicator's safe area; floating, it is a capsule over the page. */
  /* The brand's typeface for the app's name (AZCO-524): `brand.font` sets it; the interface font otherwise. */
  --platform-brand-font: var(--platform-ui-font);
  /* The row of tabs: the pill's height, 6px above a 24px icon row, a 2px gap, the label (14px) and 6px below. */
  --platform-tabbar-height: 52px;
  /* The docked bar (AZCO-649): its hairline, 6px above the pills, the pills, then 6px below them or the safe area
     (65px without a home indicator, 93px with one). */
  --platform-tabbar-inset-top: 6px;
  --platform-tabbar-inset-bottom: 6px;
  /* The pill (AZCO-649): one shared width, fitted to the equal columns; 6px above and below. */
  --platform-tab-pill-padding-block: 6px;
  --platform-tab-pill-padding-inline: 16px;
  --platform-tab-pill-min-width: 72px;
  --platform-tab-pill-width: 112px;
  /* The icon row, the glyph in it, and the You tab's initials (account.phone "nav") at the glyph's size. */
  --platform-tab-icon-row: 24px;
  --platform-tab-icon-size: 24px;
  --platform-tab-face-size: 22px;
  /* The floating capsule (AZCO-649, navigation.tabBar): 16px from the screen's sides and 24px above its bottom edge,
     or the home indicator's safe area where that is more (34px on iPhone), the pills 5px inside it so they sit concentric; the sidebar's tint at 86% over a blur
     (AZCO-659), a hairline edge of ink at 10% and one soft shadow. */
  --platform-tabbar-float-inset: 16px;
  --platform-tabbar-float-bottom: 24px;
  --platform-tabbar-float-padding: 5px;
  --platform-tabbar-float-background: color-mix(in srgb, var(--platform-chrome) 86%, transparent);
  --platform-tabbar-float-compact-background: color-mix(in srgb, var(--platform-chrome) 25%, transparent);
  --platform-tabbar-float-edge: color-mix(in srgb, var(--ink) 10%, transparent);
  --platform-tabbar-float-shadow: 0 8px 28px rgb(0 0 0 / 0.16);
  /* The body text size on phones (AZCO-523): an alias of platform-ui's --ui-text-base (AZCO-526), 17px, or on
     Apple phones the person's Text Size setting, through the root's -apple-system-body, which platform-ui's
     tokens.css sets. The platform's phone text is sized from it; the bar's title, Back and tab labels stop growing
     at a 23px body (AZCO-526), where larger text would overflow the bar. */
  --platform-body: var(--ui-text-base);
  --platform-tab-label: 400 min(var(--ui-text-caption2), 17px)/1.18 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  --platform-app-column: 720px;
  --platform-app-bar-height: 44px;
  /* The current tab's pill: the current fill (AZCO-528), behind its icon and label (AZCO-649). */
  --platform-tab-indicator: var(--ui-fill-current);
  /* The desktop type roles (AZCO-491, after ChatGPT's settings page), from platform-ui's --ui-text-* scale: a page's
     title (the header's h1, the Settings pane's and column's titles, a split's detail title) is title2, 22px from
     960px, medium; an in-page section heading is headline, 15px, medium; a group label ("Personal", the sidebar's
     headings) is subhead, 14px, regular, in secondary ink. Nothing in the interface is bolder than 500. */
  --platform-title: 500 var(--ui-text-title2)/1.3 var(--platform-font-display, var(--ui-font-display, var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif)));
  --platform-section-heading: 500 var(--ui-text-headline)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  --platform-group-label: 400 var(--ui-text-subhead)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  --platform-large-title: var(--ui-display-weight, 500) var(--ui-text-large-title)/1.15 var(--platform-font-display, var(--ui-font-display, var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif)));
  --platform-compact-title: 500 min(var(--platform-body), 23px)/1.3 var(--platform-font-display, var(--ui-font-display, var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif)));
  --platform-bar-background: color-mix(in srgb, var(--ui-canvas, #f4f5f0) 76%, transparent);
  --platform-bar-tint: var(--control-primary);
  --platform-sheet-radius: 14px; /* radius: container the sheet's top corners */
  /* AZCO-464, after the Google News comp: the space between the header (a tab's
     large title, or the bar on pages below a tab) and the page's first content;
     the translucent tab bar (a backdrop blur where supported, otherwise solid
     --control-surface) and its hairline, none by default as in the comp; and how
     much of the page the full-height account sheet leaves above it. */
  --platform-header-gap: 16px;
  /* The one left edge of the page area (AZCO-542): the header's title, tabs, a list's band and its rows' text all start
     here; 24px from 960px (below). */
  --platform-content-edge: 16px;
  /* Back in mobile navigation (AZCO-464): a round chevron button on the bar's disc, platform-ui's
     --ui-disc-surface and --ui-disc-shadow (AZCO-528). */
  --platform-back-color: var(--ink);
  --platform-back-surface: var(--ui-disc-surface);
  --platform-back-shadow: var(--ui-disc-shadow);
  --platform-back-label: none;
  /* The tab bar wears the sidebar's tint (AZCO-659, --platform-chrome, 10-navigation.css): docked it is solid, since
     nothing scrolls beneath it; floating, 86% of it over a blur (above). */
  --platform-tabbar-background: var(--platform-chrome);
  --platform-tabbar-border: transparent;
  --platform-sheet-top-gap: calc(max(env(safe-area-inset-top), 12px) + 8px);
  /* How far the tab bar reaches up from the viewport's bottom, for elements fixed there: set by the app layout on phones. Pages never scroll beneath the bar (AZCO-509). */
  --platform-tabbar-overlap: 0px;
  --platform-transition-shade: var(--ui-transition-shade, #0f1a1424);
  /* Grouped lists (10-lists.css, AZCO-397): ListSection and ListRow, the account,
     support and Administration index rows, and the app layout's stacked admin rows. */
  --platform-list-background: var(--control-surface);
  --platform-list-separator: var(--line);
  --platform-list-radius: var(--ui-radius-surface, 12px);
  --platform-list-row-height: 48px;
  /* Grouped lists' canvas (AZCO-519): a shade below the page so the cards stand out, as in native settings.
     platform-ui's --ui-surface-grouped (AZCO-528). */
  --platform-grouped-canvas: var(--ui-surface-grouped);
  /* Secondary text in lists: platform-ui's secondary ink, at least 4.5:1 on every surface (AZCO-528). */
  --platform-list-secondary: var(--ui-ink-secondary);
  /* The platform's own lists, menus and account page read in each device's interface face, as native settings
     do (AZCO-519): San Francisco on Apple devices, Segoe UI on Windows, then the theme's body face. */
  --platform-ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", var(--ui-font-body, Inter), Roboto, ui-sans-serif, system-ui, sans-serif;
  --platform-list-label: 400 var(--ui-text-callout)/1.375 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  --platform-list-heading: 400 var(--ui-text-footnote)/1.385 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  --platform-list-icon-background: var(--ui-surface-choice);
  --platform-list-icon-color: var(--platform-bar-tint);
  --platform-list-destructive: var(--control-danger);
  /* Page composition (AZCO-664): the rhythm of a page built from sections. A section's heading sits
     --platform-section-heading-gap above its group, and --platform-section-gap separates one section's foot from the
     next heading. ListSection and Section (10-page-section.css) both read them, so a page's groups share one rhythm. */
  --platform-section-gap: 32px;
  --platform-section-heading-gap: 8px;
  /* Section's output area: its padding and the height it keeps while empty, so a first result doesn't move the row. */
  --platform-section-output-padding: 20px 24px;
  --platform-section-output-min-height: 92px;
  /* The list-detail split (10-split.css, AZCO-555): the host width from which a stacked list and its detail show side
     by side, the list pane's width and the selected row's accent bar. */
  --platform-split-min: 720px;
  --platform-split-list-width: clamp(320px, 38%, 440px);
  --platform-split-accent-width: 3px;
  /* EmptyState's illustration (05-load-states.css, AZCO-824): the box the app's art fills, centred above the title.
     At most 320px wide; 30% of the window's height, from 140px to 280px, and on windows up to 560px tall (a phone on
     its side) at most 120px, so the title, sentence and action stay on screen. */
  --platform-empty-illustration-width: 320px;
  --platform-empty-illustration-height: clamp(140px, 30dvh, 280px);
  --platform-empty-illustration-height-short: clamp(72px, 24dvh, 120px);
  /* Personal invite links (10-invite-section.css, AZCO-456): the code in its
     row. The footer's error colour, `--platform-invite-error` (default
     `--control-danger`), is unset here, so a template set below the root
     still reaches it. */
  --platform-code-font: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* The account avatar's dot (AZCO-436): a colour apart from the avatar's own fill. */
  --platform-account-attention: var(--control-danger);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root {
    --platform-content-edge: 24px;
  }
}

/* 02-document.css */
/* createPlatformApp marks <html>; nothing here reaches pages that are not platform apps. */
html.platform-document {
  /* AZCO-829: containment stops chaining, but only none suppresses vertical bounce. */
  overscroll-behavior-y: none;
  height: 100%;
  background: var(--ui-canvas, #f4f5f0);
}
/* Thin scrollbars with no track (AZCO-552): every scroller in the document, since scrollbar-width doesn't inherit. */
:where(html.platform-document, html.platform-document *) {
  scrollbar-width: thin;
  scrollbar-color: var(--ui-scrollbar-thumb) transparent;
}
@supports not (scrollbar-color: auto) {
  html.platform-document ::-webkit-scrollbar {
    width: var(--ui-scrollbar-size);
    height: var(--ui-scrollbar-size);
    background: transparent;
  }
  html.platform-document ::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px; /* radius: shape a scrollbar thumb */
    background: var(--ui-scrollbar-thumb) padding-box;
  }
  @media (hover: hover) and (pointer: fine) {
    html.platform-document ::-webkit-scrollbar-thumb:hover {
      background: var(--ui-scrollbar-thumb-hover) padding-box;
    }
  }
  html.platform-document ::-webkit-scrollbar-track,
  html.platform-document ::-webkit-scrollbar-corner {
    background: transparent;
  }
}
html.platform-document body {
  overscroll-behavior-y: none;
  margin: 0;
  min-height: 100%;
  background: var(--ui-canvas, #f4f5f0);
  color: var(--ink);
  /* 14px, in proportion to the body size: on Apple phones it follows the person's Text Size (AZCO-523, AZCO-526). */
  font: calc(var(--platform-body) * 14 / 17)/1.5 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* No bold (AZCO-491): the browser's bold headings, emphasis and table headers are medium at most. Zero specificity,
   so every class rule (and an app's own) still decides. */
:where(html.platform-document) :where(h1, h2, h3, h4, h5, h6, b, strong, th) {
  font-weight: 500;
}
.platform-app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-width: 0;
  color: var(--ink);
  font-family: var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.platform-main {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  display: flex;
  flex-direction: column;
  padding: var(--page-gutter);
  padding-bottom: max(var(--page-gutter), env(safe-area-inset-bottom));
  box-sizing: border-box;
  /* Pages can size sticky regions to the visible page with container query units. */
  container-type: size;
}
.platform-main:focus {
  outline: none;
}
/* A full-bleed page (AZCO-367) owns its gutters and scrolling below the header:
   main neither pads nor scrolls, and the page fills it as a flex column. */
.platform-app[data-presentation="full-bleed"] .platform-main {
  padding: 0;
  overflow: hidden;
  container-type: normal;
}
.platform-app[data-presentation="full-bleed"] .platform-main > .platform-page {
  flex: 1 1 0;
  min-height: 0;
  max-width: none;
  margin: 0;
}
.platform-boot {
  display: grid;
  min-height: 100dvh;
}
.platform-skip-link {
  position: absolute;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  border-radius: var(--ui-radius-control);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font-weight: 400;
  text-decoration: none;
  transform: translateY(-200%);
}
.platform-skip-link:focus {
  transform: none;
}
.platform-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.platform-icon {
  flex: none;
}

/* 03-header.css */
/* One 64px header row from 960px: the app's icon (while the sidebar is hidden) or the top bar's name, joined to the
   page's parent control and title, then page actions, app tools and the account (AZCO-519, AZCO-527).
   Keyboard focus takes each control's hover fill (11-focus.css), never a ring;
   the header is tooltip-free (data-tooltips="off"). */
.platform-staging-banner {
  flex: none;
  padding: 4px var(--page-gutter);
  border-bottom: 1px solid var(--feedback-attention-border);
  background: var(--feedback-attention-background);
  color: var(--feedback-attention-foreground);
  font-size: var(--ui-text-caption);
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}
.platform-header {
  position: relative;
  z-index: 40;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  height: var(--platform-header-height);
  min-height: var(--platform-header-height);
  padding: 10px var(--page-gutter);
  border-bottom: 1px solid var(--line);
  background: var(--control-surface);
  color: var(--ink);
  font-family: var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  line-height: 1.2;
}

/* The navigation unit: brand mark, then the portaled parent control and title. */
.platform-navigation-unit {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  margin-right: auto;
}
.platform-brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
}
.platform-brand-mark > :is(img, svg) {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.platform-brand-monogram {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px; /* radius: shape the app's icon tile */
  background: var(--control-primary);
  color: var(--control-on-primary);
  font-size: 15px; /* type-scale: allow the monogram is a fixed glyph in its 28px tile */
  font-weight: 500;
  line-height: 1;
}
.platform-attention-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
}
.platform-brand-attention {
  position: absolute;
  top: -2px;
  right: -2px;
  box-shadow: 0 0 0 2px var(--control-surface);
}
/* AZCO-760: the shared mark greets from interactive branding only; lettering stays still. */
@media (hover: hover) and (pointer: fine) {
  @media (prefers-reduced-motion: no-preference) {
    :is(.platform-sidebar-expand[data-glyph="icon"], .platform-wide-wordmark, .platform-brand-home, .platform-brand)[href]:hover .platform-brand-mark,
    button:is(.platform-sidebar-expand[data-glyph="icon"], .platform-wide-wordmark):hover .platform-brand-mark {
      animation: platform-mark-greeting 480ms ease-out both;
      transform-origin: 50% 80%;
    }
    /* The greeting replaces the icon button's fill; reduced motion keeps its static cue. */
    .platform-app[data-layout="frame"] .platform-sidebar-expand[data-glyph="icon"]:hover {
      background: none;
    }
  }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes platform-mark-greeting {
    0%,
    100% {
      transform: translateY(0) rotate(0);
    }
    30% {
      transform: translateY(-2px) rotate(-7deg);
    }
    65% {
      transform: translateY(-1px) rotate(3deg);
    }
  }
}
.platform-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
}
.platform-wordmark-attention {
  align-self: flex-start;
  flex: none;
  margin-left: -4px;
}
/* The app's name in its brand typeface everywhere (AZCO-524): `brand.font` sets --platform-brand-font. */
.platform-wordmark-name {
  overflow: hidden;
  font-family: var(--platform-brand-font, var(--platform-ui-font));
  font-size: var(--ui-text-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The app layout's brand mark: a link home at the header's left edge (AZCO-361). */
.platform-brand-home {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: 48px;
  height: 44px;
  padding: 0 7px;
  margin: 0 8px 0 0;
  border-radius: var(--ui-radius-control);
  color: var(--ink);
  text-decoration: none;
}
/* The entry pages show the wordmark as a link home. */
.platform-brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  max-width: 100%;
  min-height: 44px;
  padding: 0 8px;
  margin-left: -8px;
  border-radius: var(--ui-radius-control);
  color: var(--ink);
  text-decoration: none;
}

/* The joined parent control and title: one raised white tile with 12px corners. */
.platform-page-host,
.platform-page-slot {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}
.platform-page-context {
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  height: 44px;
  border-radius: var(--ui-radius-control);
  background: var(--control-surface);
  box-shadow:
    0 2px 4px #20202008,
    0 6px 18px #20202012;
  transition:
    background-color 150ms ease,
    box-shadow 150ms ease;
}
.platform-page-back {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  border-radius: var(--ui-radius-control);
  color: var(--ink);
  text-decoration: none;
}
/* Bar buttons from 960px (AZCO-556): a plain glyph in a 44px target, no fill, border or ring at rest, in secondary
   ink that darkens to ink on hover; a press dims the glyph at once. Keyboard focus is the ring around the target. */
.platform-app[data-layout="frame"] :is(.platform-page-back, .ui-toolbar-icon.platform-header-action:not(.platform-header-action--labeled, .platform-header-action--danger), .platform-sidebar-toggle, .platform-sidebar-expand[data-glyph="hamburger"]) {
  color: var(--ui-bar-ink);
}
.platform-app[data-layout="frame"] :is(.platform-page-back, .platform-header-action, .platform-sidebar-toggle, .platform-sidebar-expand):active:not(:disabled) {
  opacity: var(--ui-pressed-opacity);
}
.platform-page-context .platform-page-title {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: 500 min(var(--ui-text-subhead), 21px)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: -0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-page-context .platform-page-title:not(:has(.platform-title-trigger)) {
  padding-inline: 0;
  line-height: 44px;
}
/* The title's text sits on the content edge (AZCO-542): a title menu's trigger reaches 12px past it. The heading, a
   flex item, takes the negative margin, not the trigger inside it: a margin inside the clipping heading shrank its
   max-content width, so a title that fit truncated ("Ca…") and the trigger's start was clipped (AZCO-569, AZCO-582). */
.platform-page-context .platform-title-trigger {
  min-height: 44px;
  margin-inline-start: 0;
  padding: 0 12px;
  border-radius: var(--ui-radius-control);
}
.platform-page-context .platform-page-title:has(> .platform-title-trigger) {
  margin-inline-start: -12px;
}
/* The desktop ‹ beside a title stands as tall as the title's capitals (AZCO-582): the chevron spans 14 of the glyph's 24
   units, so a 26px glyph draws it 15px tall, a 21–22px title's cap height, at a 2px stroke. */
.platform-app[data-layout="frame"] :is(.platform-page-context, .platform-section-context) .platform-page-back svg {
  width: 26px;
  height: 26px;
}
/* With Back, its 44px target starts 12px before the edge, so the ‹'s ink is on it, and the title follows 4px after. */
.platform-app[data-layout="frame"] .platform-page-back {
  margin-inline-start: -12px;
}
.platform-page-context[data-has-parent] .platform-page-title {
  margin-inline-start: 4px;
}
.platform-page-context[data-has-parent] .platform-page-title:has(> .platform-title-trigger) {
  margin-inline-start: -8px;
}
.platform-title-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.platform-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The ⌄ is SelectField's disclosure chevron scaled with the title (AZCO-701): at 1.05em a 21px title draws it 11px
   wide at a 2px stroke, the ‹ Back's, and a phone's 17px title 9px wide. It was a 7px-wide hairline at 16px. */
.platform-title-trigger svg {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  color: var(--muted);
  transition: transform 120ms;
}
.platform-title-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.platform-title-trigger:disabled {
  cursor: default;
}
.platform-title-pending {
  display: block;
  width: 12ch;
  max-width: 100%;
  height: 0.85em;
  border-radius: 4px; /* radius: shape a line of placeholder text */
  background: var(--ui-surface-card-media);
}
.platform-page-context .platform-title-pending {
  margin-block: 13px;
}
:is(.platform-page-back, .platform-title-trigger):focus-visible:not([data-restored-focus]) svg {
  color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .platform-app[data-layout="frame"] .platform-page-back:hover {
    color: var(--ink);
  }
}

/* Page actions: labels, then icons, then the Page actions menu. */
.platform-action-toolbar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
}
.platform-action-toolbar > [data-header-part="actions"] { flex: none; }
/* Standalone toolbars follow available width, not the viewport's 600px label cutoff. */
.platform-action-toolbar .platform-page-actions:not([data-icon-only]) .platform-header-action-label { display: inline; }
.platform-action-toolbar .platform-page-actions:not([data-icon-only]) .platform-header-action--labeled {
  width: auto;
  padding-inline: 10px;
  gap: 6px;
}
.platform-header-actions-host {
  flex: none;
  padding-left: 12px;
}
.platform-header-actions-host:has(> .platform-header-actions-slot:empty) {
  display: none;
}
.platform-page-action-host {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  min-height: 44px;
}
.platform-page-action-host .platform-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}
.platform-page-action-host .platform-page-actions[hidden] {
  display: none;
}
.platform-page-action-host .platform-page-actions > .ui-button {
  min-height: 44px;
}
/* Overflowed, the actions are platform-ui's Menu surface (.ui-menu, 10-navigation.css). */
/* Invisible intrinsic measurement of the mounted row, inline or overflowed. */
.platform-page-action-host .platform-page-actions[data-measuring] {
  display: flex !important;
  position: fixed !important;
  visibility: hidden !important;
  width: max-content !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}
.ui-toolbar-icon.platform-header-action {
  --toolbar-icon-size: 18px;
  --toolbar-icon-stroke: 1.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  min-height: var(--ui-bar-target);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
}
.ui-toolbar-icon.platform-header-action--labeled {
  width: auto;
  min-width: 44px;
  gap: 6px;
  padding-inline: 10px;
  font: 400 min(var(--ui-text-footnote), 19px)/1.385 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  white-space: nowrap;
}
/* From 960px a labelled header action reads at the buttons' size, 14px (AZCO-491). */
@media (min-width: 960px), (not (pointer: coarse)) {
  .ui-toolbar-icon.platform-header-action--labeled {
    font-size: var(--ui-text-subhead);
  }
}
.platform-page-actions[data-icon-only] .platform-header-action-label {
  display: none;
}
.platform-page-actions[data-icon-only] .ui-toolbar-icon.platform-header-action--labeled {
  width: 44px;
  gap: 0;
  padding: 0;
}
/* Every desktop header and toolbar control is the standard control height (AZCO-635): 32px with a fine pointer, 44px on
   touch (--control-height), in the page header, the Settings and Administration pane's title row and a split's pane
   headers alike. Icon-only actions are square at that height. Report a problem is the app bar's, not the page's (the
   sidebar's foot, the top bar's end, the floating shortcut), so it keeps the bar button's 44px target. */
.platform-app[data-layout="frame"] .ui-toolbar-icon.platform-header-action:not(.platform-report-action, .platform-report-float) {
  height: var(--control-height);
  min-height: var(--control-height);
}
.platform-app[data-layout="frame"] .ui-toolbar-icon.platform-header-action:not(.platform-header-action--labeled, .platform-report-action, .platform-report-float),
.platform-app[data-layout="frame"] .platform-page-actions[data-icon-only] .ui-toolbar-icon.platform-header-action--labeled:has(svg) {
  width: var(--control-height);
}
/* A destructive action (HeaderAction's `danger`): the danger ink on its glyph, in the pill and inline. */
.ui-toolbar-icon.platform-header-action--danger {
  color: var(--control-danger);
}
.ui-toolbar-icon.platform-header-action:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  /* Icon-only actions are bar glyphs (AZCO-556): the ink darkens on hover. */
  .ui-toolbar-icon.platform-header-action:not(.platform-header-action--labeled, .platform-header-action--danger, .platform-report-float):hover:not(:disabled) {
    color: var(--ink);
    box-shadow: none;
  }
}
/* Header controls on hover (AZCO-580, reversing AZCO-556 for hover only): from 960px every control in a header, text
   buttons (Compose, Refresh) and icon-only ones (‹, the sidebar's toggle, the title menu's trigger), takes the
   row-hover fill (6%, Night 8%) at its own corners, a capsule or a rounded rectangle with controls.shape. There is no
   fill at rest, and an open menu's trigger takes none; the sidebar's toggle, expanded while the sidebar is open, keeps
   it. */
@media (hover: hover) and (pointer: fine) {
  .platform-app[data-layout="frame"] :is(.platform-page-back, .platform-title-trigger, .ui-toolbar-icon.platform-header-action:not(.platform-report-float), .platform-split-back):hover:not(:disabled, [aria-haspopup]:not([aria-haspopup="false"])[aria-expanded]:not([aria-expanded="false"])),
  .platform-app[data-layout="frame"] :is(.platform-sidebar-toggle, .platform-sidebar-expand):hover {
    background: var(--ui-surface-row-hover);
  }
}
@media (max-width: 600px) {
  .platform-header-action-label {
    display: none;
  }
  .ui-toolbar-icon.platform-header-action--labeled {
    width: 44px;
    gap: 0;
    padding: 0;
  }
}

/* A lone app-contributed command may have no meaningful glyph (AZCO-875).
   Keep its name, with a bounded width so the title and close control still fit. */
.platform-page-action-host .platform-page-actions:not([role="menu"]) .ui-toolbar-icon.platform-header-action.platform-header-action--labeled:not(:has(svg)) {
  width: auto;
  max-width: min(160px, 35vw, var(--platform-action-available-width, 160px));
  padding-inline: 10px;
}
.platform-page-actions:not([role="menu"]) .platform-header-action:not(:has(svg)) .platform-header-action-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* App tools and the optional Report a problem button sit beside the page actions. */
.platform-header-tools {
  display: flex;
  align-items: center;
  flex: none;
  gap: 4px;
  padding-left: 4px;
}
/* The report icon (AZCO-493): left of the account, close to it, inside the account's divider. */
.platform-header .platform-report-action {
  margin-left: 4px;
}
.platform-account-host > .platform-report-action {
  margin: 0 2px 0 -6px;
}

/* On a page without a top bar (a focus page), the report icon floats in the corner. A page with
   its own bottom bar lifts it with --platform-report-float-lift. */
.platform-app .platform-report-float {
  position: fixed;
  /* Above a step screen (platform-ui's fixed StepScreen is z-index 50), which a focus page usually is. */
  z-index: 60;
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + var(--platform-report-float-lift, 0px));
  /* A disc over content, not a bar button (AZCO-556): 44px on the disc's surface and its ringless shadow, in a 44px
     target, so it stays legible over the page. */
  width: var(--ui-bar-disc);
  min-width: var(--ui-bar-disc);
  height: var(--ui-bar-disc);
  min-height: var(--ui-bar-disc);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-disc-surface);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--ui-disc-shadow);
}
.platform-app .platform-report-float::after {
  content: "";
  position: absolute;
  inset: -2px;
}
/* AZCO-500 review: a focus page's main action sits at its foot, so the float rests above it by default. */
.platform-app[data-presentation="focus"] {
  --platform-report-float-lift: 72px;
}
.platform-app[data-report-float] .platform-main {
  padding-bottom: calc(68px + env(safe-area-inset-bottom) + var(--platform-report-float-lift, 0px));
}

/* The account at the header's end (the top bar's avatar, or the sidebar's with account.desktop "header"). One
   divider separates it from actions, balanced against their visible content. */
.platform-account-host {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  padding-left: 12px;
}
.platform-header:has(.platform-page-action-host[data-has-actions], .platform-header-tools) .platform-account-host {
  --header-divider-gap: 12px;
  --header-action-end-inset: 13px;
  margin-left: var(--header-divider-gap);
  padding-left: calc(var(--header-divider-gap) + var(--header-action-end-inset) + 1px);
}
.platform-header:has(.platform-page-action-host[data-has-actions], .platform-header-tools) .platform-account-host::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 1px;
  height: 24px;
  background: var(--line);
}
@media (min-width: 601px) {
  .platform-header:has(.platform-page-action-host:not([data-compact]) .platform-page-actions:not([data-icon-only]) .platform-header-action--labeled:last-child) .platform-account-host {
    --header-action-end-inset: 10px;
  }
}
.platform-account {
  position: relative;
  flex: none;
}
/* The profile menu (platform-ui's Menu, AZCO-528) heads its items with the name and email. */
.platform-account-identity {
  display: grid;
  gap: 3px;
  overflow-wrap: anywhere;
}
.platform-account-identity strong {
  font-size: var(--ui-text-subhead);
  font-weight: 500;
}
.platform-account-identity span {
  color: var(--ui-ink-secondary);
  font-size: var(--ui-text-footnote);
}
@media (max-width: 700px) {
  .platform-header:has(.platform-page-action-host[data-has-actions], .platform-header-tools) .platform-account-host {
    --header-divider-gap: 4px;
  }
}
@media (max-width: 450px) {
  .platform-account-host {
    padding-left: 8px;
  }
  .platform-header-actions-host {
    padding-left: 4px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .platform-page-context,
  .platform-title-trigger svg {
    transition: none;
  }
}

/* A public page's companion header (AZCO-368): the static brand mark, nothing to operate. */
.platform-companion-header {
  justify-content: flex-start;
  padding-inline: var(--ui-page-gutter, 16px);
}
.platform-companion-brand {
  display: inline-flex;
  align-items: center;
}

/* App-wide controls share the existing page toolbar, after page-specific actions. */
.platform-page-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.platform-page-tools { display: flex; flex: none; align-items: center; gap: 8px; }
.platform-page-tools > :where(*) { margin-block: 0; }

/* Identity text aligns with the menu labels; the avatar uses their leading icon space. */
.platform-account-identity { position: relative; }
.platform-account-identity .platform-account-identity-avatar {
  position: absolute;
  inset-inline-start: -28px;
  top: 2px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font-size: var(--ui-text-caption);
}

.platform-header-command-set { display: contents; }

/* 04-page.css */
/* Page family: one identity row, then content on the canvas. The fixed width
   is internal: `--platform-page-width` here, `--platform-app-column` in the
   app layout (10-app-layout.css). */
.platform-page {
  --platform-content-width: var(--platform-page-width);
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  max-width: var(--platform-content-width);
  margin: 0 auto;
}
/* createPlatformApp's `content` (AZCO-429), set from the route beneath any
   sheet. Fill: the page takes the content area inside the gutters. Start and end: a
   fixed-width page sits against the start or end gutter (left or right in
   left-to-right text). The marks are main's own, so
   a slide's or swipe's copy of main keeps its page's width. The shell leaves
   both off a full-bleed page, which keeps its own rules (02-document.css). The
   leading `.platform-app` outranks the app layout's column rule. */
.platform-app .platform-main[data-content-width="fill"] > .platform-page {
  max-width: none;
}
/* Mixed widths from 960px (AZCO-635): the page reports its own width (page-width.tsx), so a table's or a list's page
   fills while a form or a grouped list keeps the fixed column. */
.platform-app[data-layout="frame"] .platform-main[data-page-width="fill"] > .platform-page {
  max-width: none;
}
.platform-app .platform-main[data-content-align="start"]:not([data-content-width="fill"]) > .platform-page {
  margin-inline: 0;
}
.platform-app .platform-main[data-content-align="end"]:not([data-content-width="fill"]) > .platform-page {
  margin-inline-start: auto;
  margin-inline-end: 0;
}
.platform-page > .platform-banner + * {
  margin-top: var(--layout-gap);
}
/* The inline page header, for pages outside the shell and `navigation={false}`:
   one title row with right-aligned actions and a separator. Inside the shell
   the title and actions render in the header instead (03-header.css). */
.platform-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  flex: none;
  min-width: 0;
  min-height: 44px;
  padding: 0 0 8px;
  margin: 0 0 var(--layout-gap);
  border-bottom: 1px solid var(--line);
}
.platform-page-header .platform-page-heading {
  flex: 1 1 180px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.platform-page-header .platform-page-title {
  margin: 0;
  color: var(--ink);
  font: 500 var(--ui-text-title3)/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  letter-spacing: normal;
}
.platform-page-header .platform-title-trigger {
  min-height: 44px;
  max-width: calc(100% + 8px);
  padding: 0 8px;
  margin: -8px 0 -8px -8px;
  border-radius: var(--ui-radius-control);
}
.platform-page-header > .platform-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
  margin-left: auto;
}
/* The title's menu trigger is a text button: no hover (AZCO-528, D8). */
/* Presentation: a single centered toolbar row; long titles ellipsize. */
.platform-page-header--presentation {
  flex-wrap: nowrap;
}
.platform-page-header--presentation .platform-page-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-page-header--presentation > .platform-page-actions {
  flex: none;
  flex-wrap: nowrap;
}

/* List family: tabs, then one list in the page's flow. */
/* Tabs carry the separator for a tabbed page, so an inline header does not add a second one. */
.platform-page-header:has(+ :is(.ui-tabs, .ui-section-links)) {
  padding-bottom: 0;
  margin-bottom: 4px;
  border-bottom: 0;
}
/* Block margins only: the tab strip's inline offset keeps a focused tab's fill unclipped. */
.platform-list-page > :is(.ui-tabs, .ui-section-links) {
  flex: none;
  margin-block: 0 var(--layout-gap);
}
.platform-tab-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
/* A list sits in the page's flow at every width (AZCO-528): the page's own scroll is the only scrollbar, and a
   paged table's band and column header stick under the page header instead (platform-ui's record-list.css). */
.platform-list {
  display: flex;
  flex: none;
  flex-direction: column;
  min-width: 0;
}
.platform-list > .platform-banner,
.platform-list > .platform-loading-region > .platform-banner {
  flex: none;
  margin-inline: var(--ui-list-edge, 0px);
  margin-bottom: 12px;
}
.platform-list .ui-data-table :is(th, td) {
  vertical-align: middle;
}
.platform-status-cell {
  white-space: nowrap;
}
/* One row-action paradigm (AZCO-570, AZCO-594): a record row's title (a link, or a button that opens its editor) covers
   the whole row, so a click anywhere on the row opens it; the row takes the hover and focus treatment. */
.platform-row-link {
  position: relative;
  cursor: pointer;
}
.platform-row-title {
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.platform-row-title::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* The row's own controls sit above the title's cover, so its actions menu and any other control in it stay reachable
   (AZCO-528, hello's History). The title itself stays below: lifted, it would hold its own cover, and only its text
   would open the row (AZCO-594). Content a row reveals in place (`.platform-row-detail`) stays above it too, so its
   text can be selected. */
.platform-row-link :is(.ui-table-actions, button, a[href], input, select, summary, .platform-row-detail):where(:not(.platform-row-title)) {
  position: relative;
  z-index: 1;
}
/* Keyboard focus on the title makes the whole row the accent highlight (11-focus.css). */

/* Status, empty and loading states. Banners (UpdateBanner), empty lists
   (TableEmpty) and the loading visual are @azose-co/platform-ui controls; the page
   only centers the loader in the remaining region. */
.platform-loading {
  display: grid;
  flex: 1;
  place-content: center;
  min-height: 120px;
}
/* A loader leaving as its content arrives fades over that content instead of
   pushing it down (AZCO-403). */
:has(> .platform-loading[data-loading-phase="leaving"]) {
  position: relative;
}
.platform-loading[data-loading-phase="leaving"]:not(:only-child) {
  position: absolute;
  inset: 0;
  min-height: 0;
  pointer-events: none;
}
.platform-notice {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: var(--layout-gap);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-surface, 12px);
  background: var(--control-surface);
}
.platform-notice p {
  margin: 0;
}

/* Small shared parts. */
.platform-icon-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.platform-icon-button:disabled {
  opacity: 0.5;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .platform-icon-button:hover:not(:disabled) {
    background: var(--ui-surface-row-hover);
    color: var(--ink);
  }
}
@media (any-pointer: coarse) {
  .platform-icon-button {
    width: 44px;
    height: 44px;
  }
}
.platform-fieldset {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.platform-fieldset > legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: var(--ui-text-subhead);
  font-weight: 400;
}
.platform-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 24px;
  margin: 0;
  font-size: var(--ui-text-footnote);
}
.platform-facts > div {
  display: contents;
}
.platform-facts dt {
  color: var(--muted);
}
.platform-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Initial leaf-page waits fill the same body that the result will occupy.
   Both platform pages and app extensions use these shared hosts (AZCO-805). */
.platform-app .platform-list:has(> .platform-loading-region > .platform-loading-boundary),
.platform-app .platform-list:has(> .platform-loading) {
  flex: 1 0 auto;
}
.platform-settings:has(> .platform-loading-region > .platform-loading-boundary),
.platform-settings:has(> .platform-loading) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

/* 05-entry.css */
/* Focused entry: sign-in, account linking and local accounts, with the app's optional hero. */
.platform-entry {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  /* AZCO-488: entry pages own scrolling even when the app clips its root. */
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 32px var(--page-gutter);
  box-sizing: border-box;
  background: var(--ui-canvas, #f4f5f0);
  color: var(--ink);
  font-family: var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.platform-entry-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(100%, 420px);
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-surface, 12px);
  background: var(--control-surface);
  box-sizing: border-box;
}
.platform-entry-brand {
  align-self: flex-start;
}
.platform-entry-header {
  display: grid;
  gap: 6px;
}
.platform-entry-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-caption);
  font-weight: 400;
  line-height: 1.5;
}
.platform-entry-title {
  margin: 0;
  font-size: var(--ui-text-title2);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.273;
}
.platform-entry-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  overflow-wrap: anywhere;
}
.platform-entry-email {
  color: var(--ink);
  font-weight: 400;
}
.platform-entry-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-entry-controls:not(:has(> :not([hidden]))) {
  display: none;
}
.platform-entry-controls > .ui-button {
  width: 100%;
}
.platform-entry-note {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
}
.platform-entry-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.platform-entry-form > .ui-button--primary {
  width: 100%;
  margin-top: 4px;
}
.platform-entry-hint {
  margin: -4px 0 0;
}
.platform-entry-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--ui-text-caption);
}
.platform-entry-divider::before,
.platform-entry-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}
.platform-entry-password {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.platform-entry-recovery {
  align-self: flex-end;
}
.platform-entry-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.platform-entry-links:empty {
  display: none;
}
.platform-entry-alternatives,
.platform-entry-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 12px;
}
.platform-entry-switch {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  text-align: center;
}
/* Continue with Google is a secondary button (AZCO-528, addendum §5 #2): the control's shape, the white surface and
   its edge, the ink label beside Google's 18px mark, and no hover of its own. */
.platform-google-button.ui-button {
  gap: 10px;
  min-height: 44px;
  border-radius: var(--ui-radius-control);
  color: var(--ink);
  font-size: var(--ui-text-subhead);
}
.platform-google-mark {
  flex: none;
}
.platform-local-accounts {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.platform-entry-header + .platform-local-accounts {
  padding-top: 0;
  border-top: 0;
}
.platform-local-accounts .ui-section-title,
.platform-local-accounts > .ui-meta {
  margin: 0;
}
.platform-local-account-list {
  display: grid;
  gap: 8px;
}
.platform-local-account.ui-button {
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 8px 12px;
  color: var(--ink);
  text-align: left;
}
.platform-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font-size: 11px; /* type-scale: allow a fixed-size glyph in its circle */
  font-weight: 500;
  letter-spacing: 0.02em;
}
.platform-local-account .platform-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px; /* type-scale: allow a fixed-size glyph in its circle */
}
.platform-local-current {
  margin-left: auto;
}
/*
 * The app's hero (AZCO-470) follows the panel in reading order: below it on
 * phones, beside it on wide screens. It keeps the panel's width and never moves.
 */
.platform-entry--hero {
  /* Center when it fits; overflowing content must begin at the reachable scroll origin. */
  align-content: safe center;
  gap: 24px;
}
.platform-entry-hero {
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  color: var(--ink);
}
.platform-entry-hero-illustration {
  max-width: 100%;
  margin-bottom: 8px;
}
.platform-entry-hero-illustration > :is(img, svg, picture, video) {
  display: block;
  max-width: 100%;
  height: auto;
}
.platform-entry-hero-title {
  margin: 0;
  font-size: var(--ui-text-body);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.333;
  text-wrap: balance;
}
.platform-entry-hero-body {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  line-height: 1.429;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.platform-entry-hero-body > :is(p, ul, ol) {
  margin: 0;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-entry--hero {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
    column-gap: 56px;
  }
  .platform-entry--hero .platform-entry-hero {
    width: auto;
  }
}
@media (max-width: 600px) {
  .platform-entry {
    place-items: start center;
    padding-top: 24px;
  }
  .platform-entry--hero {
    align-content: start;
  }
  .platform-entry-panel {
    gap: 20px;
    padding: 24px 20px;
  }
  .platform-entry-hero {
    padding-inline: 4px;
  }
}
@media (max-height: 560px) {
  .platform-entry {
    place-items: start center;
    padding-block: 16px;
  }
  .platform-entry--hero {
    align-content: start;
  }
  .platform-entry-panel {
    gap: 16px;
    padding-block: 20px;
  }
}
/* Invite codes (AZCO-385): six characters, read and typed as one. */
.platform-entry-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.platform-entry-code::placeholder {
  letter-spacing: 0.16em;
}

/* 05-load-states.css */
/* Loading, failing and refreshing (AZCO-390): ErrorState, StaleNote and
   Skeleton, and an illustrated EmptyState (AZCO-824). They read the platform-ui tokens an app sets: --ui-accent-soft,
   --control-primary, --ui-card, --ui-radius-card, --ui-radius-button, --line,
   --ink, --muted, --platform-font-display (titles) and --ui-skeleton
   (the placeholder fill). */
.platform-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 340px;
  margin: 12vh auto 0;
  padding: 0 var(--page-gutter);
  text-align: center;
}
.platform-error-state-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 6px;
  border-radius: var(--ui-radius-round);
  background: var(--ui-accent-soft, var(--ui-surface-choice));
  color: var(--control-primary);
}
.platform-error-state-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--platform-font-display, var(--ui-font-display, inherit));
  font-size: var(--ui-text-title2);
  font-weight: var(--ui-display-weight, 500);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.platform-error-state-text {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--ui-text-callout);
  line-height: 1.45;
}
.platform-error-state .platform-error-state-home {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* EmptyState's illustration (AZCO-824): the app's decorative art, large above the title. The platform owns its size
   and placement, so every app's art sits the same way: a centred box at most --platform-empty-illustration-width wide
   and --platform-empty-illustration-height tall (--platform-empty-illustration-height-short on windows up to 560px
   tall) that the art fills, scaled to fit, with currentColor the secondary ink. The title and sentence take the error
   state's sizes. As a page's content (a child of the page's flex column) it fills the space below the page header and
   sits at its optical centre, the free space split 2:3 above and below it; in a parent that doesn't grow it keeps its
   own height, from the top. Without art, EmptyState is TableEmpty alone. */
.platform-empty-state {
  --ui-title-size: var(--ui-text-title2);
  --ui-meta-size: var(--ui-text-callout);
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-block: clamp(16px, 5dvh, 48px) var(--layout-gap);
}
.platform-empty-state::before,
.platform-empty-state::after {
  content: "";
  flex: 2 1 0;
}
.platform-empty-state::after {
  flex-grow: 3;
}
.platform-empty-state-illustration {
  display: grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: min(100%, var(--platform-empty-illustration-width));
  height: var(--platform-empty-illustration-height);
  margin-bottom: 20px;
  /* Composed HTML art can size its parts to the box with container units (cqw, cqh, cqmin). */
  container-type: size;
  color: var(--ui-ink-secondary, var(--muted));
}
.platform-empty-state-illustration > * {
  width: 100%;
  height: 100%;
}
.platform-empty-state-illustration > img {
  object-fit: contain;
}
.platform-empty-state > .ui-table-empty {
  flex: none;
  width: 100%;
  min-height: 0;
  padding-block: 0;
}
.platform-empty-state > .ui-table-empty > .ui-section-title {
  font-family: var(--platform-font-display, var(--ui-font-display, inherit));
  font-weight: var(--ui-display-weight, 500);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.platform-empty-state > .ui-table-empty > p {
  text-wrap: pretty;
}
@media (max-height: 560px) {
  .platform-empty-state {
    padding-top: var(--layout-gap);
  }
  .platform-empty-state-illustration {
    height: var(--platform-empty-illustration-height-short);
    margin-bottom: 12px;
  }
}

.platform-stale-note {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: var(--ui-accent-soft, var(--ui-surface-choice));
  color: var(--ink);
  font: inherit;
  font-size: var(--ui-text-subhead);
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.platform-stale-note .platform-load-glyph {
  flex: none;
}

.platform-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* A Skeleton on its own keeps its place through the grace period (AZCO-461). */
.platform-skeleton[data-loading-phase="hidden"] {
  visibility: hidden;
}
/* A LoadingBoundary's visual: nothing through the grace period, then held for
   the minimum, then it fades out before the content fades in, so a skeleton
   never overlaps content of another shape (AZCO-461, AZCO-512). The region
   joins its parent's layout throughout, so content in a flex or grid parent
   keeps its gaps (AZCO-494). */
.platform-loading-region {
  display: contents;
}
.platform-loading-boundary {
  display: flex;
  flex: 1;
  flex-direction: column;
  transition: opacity 180ms ease;
}
.platform-loading-boundary[data-loading-phase="hidden"] {
  visibility: hidden;
}
.platform-loading-boundary[data-loading-phase="leaving"] {
  opacity: 0;
}
.platform-loading-region[data-entering] > * {
  animation: platform-loading-enter 180ms ease both;
}
@keyframes platform-loading-enter {
  from {
    opacity: 0;
  }
}
.platform-skeleton-line,
.platform-skeleton-thumb,
.platform-skeleton-button {
  border-radius: var(--ui-radius-card-compact);
  background: linear-gradient(
      100deg,
      var(--ui-skeleton, var(--ui-surface-card-media)) 40%,
      color-mix(in srgb, var(--ui-skeleton, var(--ui-surface-card-media)), #ffffff 55%) 50%,
      var(--ui-skeleton, var(--ui-surface-card-media)) 60%
    )
    0 0 / 300% 100%;
  animation: platform-shimmer 1.4s ease-in-out infinite;
}
.platform-skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  /* It stands in for a card or tile (AZCO-528 addendum §3.7): the tile's corners and resting shadow. */
  border-radius: var(--ui-radius-card);
  background: var(--ui-card, var(--control-surface));
  box-shadow: var(--ui-tile-shadow);
}
.platform-skeleton-card--rows {
  gap: 22px;
  padding: 20px 16px;
}
.platform-skeleton-row {
  display: flex;
  gap: 14px;
}
.platform-skeleton-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.platform-skeleton-line {
  height: 14px;
  border-radius: 7px; /* radius: shape a line of placeholder text */
}
.platform-skeleton-line--short {
  width: 45%;
}
.platform-skeleton-line--tiny {
  width: 28%;
  height: 10px;
  margin: 10px 6px 0;
}
.platform-skeleton-thumb {
  flex: none;
  width: 116px;
  aspect-ratio: 8.5 / 11;
  border-radius: var(--ui-radius-card-compact);
}
.platform-skeleton-grid .platform-skeleton-thumb {
  width: auto;
}
.platform-skeleton-button {
  height: 52px;
  border-radius: var(--ui-radius-control);
}
.platform-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px 16px;
}
.platform-skeleton-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@keyframes platform-shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .platform-skeleton-line,
  .platform-skeleton-thumb,
  .platform-skeleton-button {
    animation: none;
  }
  .platform-loading-boundary {
    transition: none;
  }
  .platform-loading-region[data-entering] > * {
    animation: none;
  }
}
@media (forced-colors: active) {
  .platform-skeleton-line,
  .platform-skeleton-thumb,
  .platform-skeleton-button {
    background: GrayText;
  }
}

/* 06-dialog.css */
/* The shared Modal (ui/Modal, `vs-dialog platform-dialog`). This file owns
   every width tier and layout, so features never add dialog geometry:
   - sizes: standard 560px (default), rich 720px, document (90vw), and
     presentation and fullscreen (the whole viewport);
   - `.platform-dialog--compact`: a 440px confirmation tier;
   - `.platform-sheet` (ui/Sheet): a bottom sheet on phones, standard above;
   - `.platform-document-viewer` (ui/DocumentViewer): a fullscreen page viewer,
     and `.platform-email-sheet`, its "Email this document" sheet;
   - layouts: form (content-sized, scrolling body), editor (a 760px
     viewport-capped frame with a scrolling .ui-editor-body), flow and upload
     (a fixed 440px paged frame), review (a 680px reading frame) and task
     (a 580px cross-owner task, sized to its content).
   Headings and footers never shrink; one body owns vertical scrolling, and on
   phones that is the whole body (AZCO-161, AZCO-239). Content-sized frames
   use intrinsic flex bases; definite-height frames may use zero bases. */
dialog.platform-dialog {
  --dialog-width: 560px;
  --dialog-padding: 24px;
  box-sizing: border-box;
  width: min(var(--dialog-width), calc(100vw - 32px));
  max-width: none;
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - 32px);
  padding: var(--dialog-padding);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-surface, 12px);
  background: var(--control-surface);
  color: var(--ink);
  box-shadow: var(--ui-shadow-overlay, 0 16px 48px #1a2e2430);
  font: calc(var(--platform-body) * 14 / 17)/1.5 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  /* A focused field never sits under the pinned heading (AZCO-550): modal-frame.tsx measures it. */
  scroll-padding-block-start: var(--dialog-heading-height, 0px);
}
dialog.platform-dialog::backdrop {
  background: var(--platform-backdrop);
}
dialog.platform-dialog[data-size="rich"] {
  --dialog-width: 720px;
}
dialog.platform-dialog.platform-dialog--compact {
  --dialog-width: 440px;
}
/* Document readers keep a viewport-sized frame across content changes. */
dialog.platform-dialog[data-size="document"] {
  width: 90vw;
  max-height: 90dvh;
}

/* Heading: the title and the × in one row. It is pinned (AZCO-550): the dialog is its own scroller, so the heading
   sticks at its top, on the dialog's surface, with a rule once content scrolls under it (data-scrolled, set by
   modal-frame.tsx). An alert keeps its own heading. */
.platform-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
:where(dialog.platform-dialog:not([data-modal-kind="alert"])) > .platform-dialog-heading {
  position: sticky;
  top: calc(-1 * var(--dialog-padding));
  z-index: 2;
  margin: calc(-1 * var(--dialog-padding)) calc(-1 * var(--dialog-padding)) 4px;
  padding: var(--dialog-padding) var(--dialog-padding) 12px;
  background: inherit;
}
:where(dialog.platform-dialog[data-scrolled]:not([data-modal-kind="alert"])) > .platform-dialog-heading {
  box-shadow: inset 0 -1px var(--line);
}
/* A modal's title is iOS's headline: 17px on phones, 15px from 960px, medium (AZCO-491). */
.platform-dialog-heading h2 {
  min-width: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--ui-text-headline);
  font-weight: 500;
  line-height: 1.444;
  overflow-wrap: anywhere;
}
.platform-dialog-heading h2:focus {
  outline: none;
}
/* × and a `back` modal's ‹ are bar buttons (AZCO-556): a plain glyph in a 44px target (--ui-bar-target), in secondary
   ink that darkens to ink on hover with no fill; keyboard focus is the ring. The target's trailing (or leading) edge
   sits 12px past the content edge, so the glyph's ink is on it. In a phone sheet they are discs (below). */
:is(button.platform-dialog-close, button.platform-dialog-back) {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  box-sizing: border-box;
  width: var(--ui-bar-target);
  min-width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  min-height: var(--ui-bar-target);
  padding: 0;
  margin: -8px -12px -8px 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-bar-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button.platform-dialog-back {
  order: -1;
  margin: -8px -4px -8px -12px;
}
:is(button.platform-dialog-close, button.platform-dialog-back) > svg {
  position: relative;
}
:is(button.platform-dialog-close, button.platform-dialog-back):active:not(:disabled) {
  opacity: var(--ui-pressed-opacity);
}
@media (hover: hover) and (pointer: fine) {
  :is(button.platform-dialog-close, button.platform-dialog-back):hover:not(:disabled) {
    color: var(--ink);
  }
}
/* From 960px they take the header controls' row-hover fill (AZCO-580); a phone sheet's discs keep their own. */
@media (min-width: 960px), (not (pointer: coarse)) {
  @media (hover: hover) and (pointer: fine) {
    :is(button.platform-dialog-close, button.platform-dialog-back):hover:not(:disabled) {
      background: var(--ui-surface-row-hover);
    }
  }
}
:is(button.platform-dialog-close, button.platform-dialog-back):disabled {
  opacity: 0.4;
  cursor: default;
}
/* A phone sheet's × and ‹: 44px discs (--ui-bar-disc) on the raised surface with a soft shadow and no ring; a press
   dims glyph and fill after the touch delay. */
@media (max-width: 959.98px) and (pointer: coarse) {
  dialog.platform-dialog.platform-sheet :is(button.platform-dialog-close:not(.platform-dialog-done), button.platform-dialog-back) {
    margin-block: -8px;
    margin-inline-end: calc(var(--platform-bar-inset, 8px) - var(--dialog-padding) - (var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
    color: var(--ink);
    transition: opacity var(--ui-pressed-release) ease;
  }
  dialog.platform-dialog.platform-sheet button.platform-dialog-back {
    margin-inline: calc(var(--platform-bar-inset, 8px) - var(--dialog-padding) - (var(--ui-bar-target) - var(--ui-bar-disc)) / 2) 0;
  }
  dialog.platform-dialog.platform-sheet :is(button.platform-dialog-close:not(.platform-dialog-done), button.platform-dialog-back)::before {
    content: "";
    position: absolute;
    inset: calc((var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
    border-radius: var(--ui-radius-control);
    background: var(--ui-disc-surface);
    box-shadow: var(--ui-disc-shadow);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
  dialog.platform-dialog.platform-sheet :is(button.platform-dialog-close:not(.platform-dialog-done), button.platform-dialog-back):active:not(:disabled) {
    transition-delay: var(--ui-pressed-delay-touch);
    transition-duration: 0ms;
  }
}
.platform-dialog-text {
  margin: 0;
  overflow-wrap: anywhere;
}

/* The standard footer: a separator above the actions. Without a status
   column, the reserved error row sits above the divider and the actions. */
dialog.platform-dialog .modal-footer {
  position: relative;
  flex: none;
  margin-top: 20px;
  padding-top: 12px;
}
dialog.platform-dialog .modal-footer::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-top: 1px solid var(--line);
}
dialog.platform-dialog .modal-footer.ui-form-actions:not(:has(> .ui-form-action-status)) {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 0;
}
dialog.platform-dialog .modal-footer.ui-form-actions:not(:has(> .ui-form-action-status))::before {
  display: none;
}
dialog.platform-dialog .ui-form-actions:not(:has(> .ui-form-action-status)) > .ui-form-action-buttons {
  box-sizing: border-box;
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Progress replaces the divider (FormActions progress). */
dialog.platform-dialog .modal-footer.ui-form-actions--progress::before {
  display: none;
}

/* Form: content-sized; heading and actions stay put while the body scrolls. */
dialog.platform-dialog[data-layout="form"][open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
dialog.platform-dialog[data-layout="form"] > .platform-dialog-heading {
  flex: none;
}
dialog.platform-dialog[data-layout="form"] > form,
.platform-dialog-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}
dialog.platform-dialog[data-layout="form"] > form[hidden] {
  display: none;
}
dialog.platform-dialog[data-layout="form"] > form > .ui-form-actions {
  margin-top: 16px;
}
/* The one scroll owner. Its inset keeps card elevation inside the scrolling box. */
.platform-dialog-body,
dialog.platform-dialog .ui-modal-form-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 4px;
  margin: -4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
}
.platform-dialog-body.ui-form-stack,
dialog.platform-dialog .ui-modal-form-body.ui-form-stack {
  gap: 16px;
}
.platform-dialog-body > :is(p, h3),
dialog.platform-dialog .ui-modal-form-body > :is(p, h3) {
  margin: 0;
}

/* Editor: one standard-width, 760px viewport-capped frame for every step.
   Only .ui-editor-body scrolls; the footer stays visible. */
dialog.platform-dialog[data-layout="editor"][open] {
  display: flex;
  flex-direction: column;
  height: min(760px, calc(100dvh - 32px));
  max-height: 90dvh;
  overflow: hidden;
}
dialog.platform-dialog[data-layout="editor"] > .platform-dialog-heading {
  flex: none;
}
dialog.platform-dialog[data-layout="editor"] > form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}
dialog.platform-dialog .ui-editor-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
}
/* Content scrolls rather than shrinking below its own height. */
dialog.platform-dialog .ui-editor-body > :not(.ui-field--grow) {
  flex-shrink: 0;
}
dialog.platform-dialog .ui-editor-context {
  display: flex;
  align-items: center;
  flex: none;
  min-height: 36px;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  line-height: 1.714;
}

/* Flow and upload: a fixed paged frame, capped to the viewport, whose height never changes between steps. A flow is
   min(640px, 100dvh − 64px) tall (AZCO-546), an upload 440px. The current step is the heading; progress sits in the
   footer or, for a step flow, the heading. */
dialog.platform-dialog:is([data-layout="flow"], [data-layout="upload"])[open] {
  display: flex;
  flex-direction: column;
  height: min(440px, calc(100dvh - 40px));
  overflow: hidden;
}
dialog.platform-dialog[data-layout="flow"][open] {
  height: min(640px, calc(100dvh - 64px));
}
dialog.platform-dialog:is([data-layout="flow"], [data-layout="upload"]) > .platform-dialog-heading {
  flex: none;
  min-height: 36px;
  margin-bottom: 8px;
}
dialog.platform-dialog .ui-flow-body,
dialog.platform-dialog .ui-upload-body {
  flex: 1;
  min-height: 0;
  padding: 2px;
  margin: -2px;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
}
dialog.platform-dialog .ui-flow-footer {
  flex: none;
}
dialog.platform-dialog:is([data-layout="flow"], [data-layout="upload"]) .ui-flow-footer > .modal-footer,
dialog.platform-dialog[data-layout="upload"] > .modal-footer {
  box-sizing: border-box;
  min-height: 64px;
  margin-top: 12px;
  justify-content: flex-end;
}
/* Fixed frames anchor footer actions to the bottom inset, not the middle of spare height. */
dialog.platform-dialog:is([data-layout="flow"], [data-layout="upload"]) .modal-footer:has(> .ui-form-action-status) {
  align-items: flex-end;
}
/* A flow step that fits its content keeps the frame width but not its height. */
dialog.platform-dialog[data-layout="flow"].ui-flow--content[open] {
  height: fit-content;
  max-height: calc(100dvh - 24px);
}
dialog.platform-dialog.ui-flow--content .ui-flow-body {
  flex: 0 1 auto;
}

/* Review: a stable 680px reading frame; navigation, toolbar and evidence stay
   put while one body scrolls. */
dialog.platform-dialog[data-layout="review"][open] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: min(680px, calc(100dvh - 48px));
  overflow: hidden;
}
dialog.platform-dialog[data-layout="review"] > :is(.platform-dialog-heading, .ui-review-navigation, .ui-review-toolbar, .ui-review-evidence) {
  flex: none;
  margin-bottom: 0;
}
dialog.platform-dialog[data-layout="review"][data-size="document"][open] {
  width: 90vw;
  height: 90dvh;
  max-height: 90dvh;
}
dialog.platform-dialog .ui-review-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  scrollbar-gutter: stable;
  overflow-wrap: anywhere;
}
dialog.platform-dialog .ui-review-body [hidden] {
  display: none;
}
dialog.platform-dialog[data-layout="review"] > .modal-footer {
  margin-top: 0;
}
dialog.platform-dialog .ui-review-navigation {
  display: grid;
  gap: 8px;
  min-width: 0;
}
dialog.platform-dialog .ui-review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  min-height: 44px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
}
/* Decisions use natural height; long forms still scroll within the viewport. */
dialog.platform-dialog[data-layout="review"].ui-review-fit-content[open] {
  height: fit-content;
  max-height: calc(100dvh - 48px);
}
dialog.platform-dialog.ui-review-fit-content .ui-review-body {
  flex: 0 1 auto;
}

/* Task: one native dialog carries a confirmed operation, sized to its content. */
dialog.platform-dialog[data-layout="task"][open] {
  display: block;
  width: min(580px, calc(100vw - 24px));
  height: fit-content;
  max-height: calc(100dvh - 24px);
  padding: 22px;
  overflow-y: auto;
}
dialog.platform-dialog[data-layout="task"] > form {
  display: block;
  min-height: 0;
}

/* Presentation and fullscreen fill the viewport; their content supplies the exit. */
dialog.platform-dialog:is([data-size="presentation"], [data-size="fullscreen"])[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--page-gutter);
  padding-bottom: max(var(--page-gutter), env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--ui-canvas, var(--control-surface));
  overflow: auto;
}
/* Immersive media: viewing actions overlay the image on a dark stage. */
dialog.platform-dialog[data-size="fullscreen"][open] {
  padding: 0;
  background: var(--ui-media-stage, #272e29);
  color: #ffffff;
  overflow: hidden;
}

/* Phones: a compact frame and 44px close target; the whole body scrolls. */
@media (max-width: 600px) {
  dialog.platform-dialog {
    --dialog-padding: 16px;
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }
  .platform-dialog-heading {
    margin-bottom: 12px;
  }
  dialog.platform-dialog[data-layout="editor"][open] {
    height: min(760px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
  }
  dialog.platform-dialog:is([data-layout="flow"], [data-layout="upload"])[open] {
    --dialog-padding: 12px;
    width: calc(100vw - 16px);
    height: min(440px, calc(100dvh - 24px));
  }
  dialog.platform-dialog[data-layout="review"][open] {
    height: calc(100dvh - 24px);
  }
  dialog.platform-dialog[data-layout="review"].ui-review-fit-content[open] {
    height: fit-content;
    max-height: calc(100dvh - 24px);
  }
  dialog.platform-dialog .ui-review-toolbar {
    gap: 8px;
  }
}

/* Short windows (landscape phones, keyboards): tighter rhythm, same scroll owner. */
@media (max-height: 520px) and (min-width: 601px) {
  dialog.platform-dialog:is([data-layout="flow"], [data-layout="upload"])[open] {
    --dialog-padding: 8px;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  dialog.platform-dialog:is([data-layout="flow"], [data-layout="upload"]) .ui-flow-footer > .modal-footer,
  dialog.platform-dialog[data-layout="upload"] > .modal-footer {
    margin-top: 4px;
  }
}
@media (max-height: 500px) {
  dialog.platform-dialog {
    --dialog-padding: 16px;
    max-height: calc(100dvh - 16px);
  }
  dialog.platform-dialog[data-layout="editor"][open] {
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
  }
  .platform-dialog-heading {
    margin-bottom: 8px;
  }
  dialog.platform-dialog .modal-footer {
    margin-top: 12px;
  }
  /* A keyboard-height review cannot fit fixed chrome and usable evidence:
     the whole dialog scrolls instead of squeezing the reading area to zero. */
  dialog.platform-dialog[data-layout="review"][open] {
    display: block;
    overflow-y: auto;
  }
  dialog.platform-dialog[data-layout="review"] > :is(.ui-review-toolbar, .ui-review-navigation, .ui-review-evidence) {
    margin-block: 12px;
  }
  dialog.platform-dialog[data-layout="review"] > .ui-review-body {
    overflow: visible;
    scrollbar-gutter: auto;
  }
}

/* Sheet (ui/Sheet, AZCO-318): the standard dialog on wide screens; on phones a
   bottom sheet that spans the width, rises from the bottom edge with a visual
   drag handle and pads its content above the safe area. While a sheet is
   open the page behind it does not scroll. */
html.platform-document.platform-scroll-locked .platform-main {
  overflow: hidden;
}
/* A phone's bottom sheet, with its grabber: a touch screen only (AZCO-637); a narrow mouse window keeps the dialog. */
@media (max-width: 600px) and (pointer: coarse) {
  dialog.platform-dialog.platform-sheet {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 24px);
    margin: auto 0 0;
    padding-top: 28px;
    padding-bottom: max(var(--dialog-padding), env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--ui-radius-surface, 12px) var(--ui-radius-surface, 12px) 0 0;
  }
  dialog.platform-dialog.platform-sheet::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 36px;
    height: 4px;
    border-radius: 999px; /* radius: shape the grabber is a capsule */
    background: var(--control-border-hover);
    transform: translateX(-50%);
  }
  @media (prefers-reduced-motion: no-preference) {
    dialog.platform-dialog.platform-sheet[open] {
      animation: platform-sheet-rise 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
  }
}
@keyframes platform-sheet-rise {
  from {
    transform: translateY(40px);
    opacity: 0.4;
  }
  to {
    transform: none;
    opacity: 1;
  }
}


/* The mobile kit's sheet (AZCO-384): a sheet with `detents`, or any sheet in the
   app layout. Below 960px it rises from the bottom edge with a grabber, follows a
   drag (Sheet sets its transform and --platform-sheet-dim) and rests at its
   detents; `data-detents~="medium"` gives it the large height so it can rest at
   half the screen. Other sheets keep the rules above. */
.platform-sheet-grabber {
  display: none;
}
@media (max-width: 959.98px) and (pointer: coarse) {
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents]) {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--platform-sheet-top-gap));
    margin: auto 0 0;
    padding-top: 28px;
    padding-bottom: max(var(--dialog-padding), env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--platform-sheet-radius) var(--platform-sheet-radius) 0 0; /* radius: container the sheet */
    box-shadow: 0 -8px 32px #0000001f;
  }
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])::before {
    content: none;
  }
  dialog.platform-dialog.platform-sheet[data-detents~="medium"],
  dialog.platform-dialog.platform-route-sheet--account {
    height: calc(100dvh - var(--platform-sheet-top-gap));
  }
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])::backdrop {
    opacity: var(--platform-sheet-dim, 1);
  }
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents]) > .platform-sheet-grabber {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    width: 36px;
    height: 5px;
    border-radius: 999px; /* radius: shape the grabber is a capsule */
    background: var(--control-border-hover);
    transform: translateX(-50%);
  }
  @media (prefers-reduced-motion: no-preference) {
    :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open] {
      animation: platform-sheet-slide-up 380ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open]::backdrop {
      animation: platform-backdrop-in 300ms ease-out;
    }
  }
  /* Reduced motion: the sheet fades in instead of sliding up (AZCO-464); Sheet fades it out. */
  @media (prefers-reduced-motion: reduce) {
    :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open],
    :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open]::backdrop {
      animation: platform-backdrop-in 150ms ease-out;
    }
  }
}
/* `translate`, not `transform`: a drag and a medium detent set the transform. */
@keyframes platform-sheet-slide-up {
  from {
    translate: 0 100%;
  }
  to {
    translate: 0 0;
  }
}
@keyframes platform-backdrop-in {
  from {
    opacity: 0;
  }
}

/* The account sheet (AZCO-464, after Google News): a launcher. Full height on
   phones and a steady height from 960px, on the canvas so grouped lists read
   as inset cards, with Done at the top right and its title for screen readers
   only. A bar keeps Done in reach as the sheet scrolls. A PageHeader's title
   inside it gives way to the bar, as the comp shows none. */
dialog.platform-dialog.platform-route-sheet--account,
.platform-app[data-layout="app"] dialog.platform-dialog.platform-route-sheet--account {
  padding-top: 0;
  background: var(--ui-canvas, #f4f5f0);
}
dialog.platform-route-sheet--account > .platform-dialog-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 44px;
  margin: 0 calc(-1 * var(--dialog-padding)) 8px;
  padding: 14px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));
  background: var(--ui-canvas, #f4f5f0);
}
dialog.platform-dialog button.platform-dialog-done {
  width: auto;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 8px;
  border-radius: var(--ui-radius-control);
  color: var(--platform-bar-tint);
  font: 500 min(var(--ui-text-body), 23px)/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
dialog.platform-dialog button.platform-dialog-done:active:not(:disabled) {
  opacity: var(--ui-pressed-opacity);
}
.platform-route-sheet--account .platform-page-header > .platform-page-heading,
.platform-route-sheet--account .platform-page-header:not(:has(.platform-page-actions)) {
  display: none;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  dialog.platform-dialog.platform-route-sheet--account {
    height: min(720px, calc(100dvh - 64px));
  }
}

/* ActionSheet (ui/ActionSheet, AZCO-384): grouped actions with Cancel apart,
   at the bottom on phones and centred from 960px. */
dialog.platform-action-sheet {
  box-sizing: border-box;
  width: calc(100% - 16px);
  max-width: 520px;
  /* Explicit intrinsic height and shrinkable flex children keep short sheets compact in WebKit (AZCO-863). */
  height: fit-content;
  min-height: 0;
  max-height: calc(100dvh - 24px);
  /* Phone sheets sit above the bottom safe area; desktop sheets use both insets to center. */
  inset-block-start: auto;
  margin: auto auto max(8px, env(safe-area-inset-bottom));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--ui-text-body)/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  overflow: visible;
}
dialog.platform-action-sheet[open] {
  display: flex;
  flex-direction: column;
  /* A fractional grid track stretches short sheets in WebKit; a max-content grid track fails to shrink long
     choices in Chromium. Flex shrinks only the action group while keeping Cancel at its content height. */
  gap: 8px;
}
dialog.platform-action-sheet::backdrop {
  background: var(--platform-backdrop);
}
.platform-action-sheet-group {
  display: grid;
  flex: 0 1 auto;
  min-height: 0;
  grid-auto-rows: min-content;
  overflow: auto;
  border-radius: var(--platform-sheet-radius); /* radius: container an action sheet group */
  background: var(--control-surface);
}
.platform-action-sheet-header {
  padding: 14px 16px 12px;
  text-align: center;
}
.platform-action-sheet-title,
.platform-action-sheet-message {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
  overflow-wrap: anywhere;
}
.platform-action-sheet-title {
  font-weight: 500;
}
.platform-action-sheet-item {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--platform-bar-tint);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.platform-action-sheet-group > .platform-action-sheet-item:first-child {
  border-top: 0;
}
.platform-action-sheet-item[data-destructive] {
  color: var(--control-danger);
}
.platform-action-sheet-item:disabled {
  color: var(--muted);
  opacity: 0.6;
  cursor: default;
}
.platform-action-sheet-cancel {
  flex: none;
  border-top: 0;
  border-radius: var(--platform-sheet-radius); /* radius: container an action sheet group */
  background: var(--control-surface);
  font-weight: 500;
}
@media (hover: hover) and (pointer: fine) {
  .platform-action-sheet-item:hover:not(:disabled) {
    background: var(--ui-surface-row-hover);
  }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.platform-action-sheet[open] {
    animation: platform-sheet-slide-up 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  dialog.platform-action-sheet[open]::backdrop {
    animation: platform-backdrop-in 240ms ease-out;
  }
}
@media (min-width: 960px), (not (pointer: coarse)) {
  dialog.platform-action-sheet {
    width: 360px;
    margin: auto;
    /* Centred again, between both insets. */
    inset-block-start: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    dialog.platform-action-sheet[open] {
      animation: platform-backdrop-in 160ms ease-out;
    }
  }
}

/* DocumentViewer (ui/DocumentViewer, AZCO-318): a full-screen page image on the
   immersive stage, with a top bar, a zoomable image and a bottom action area. */
dialog.platform-dialog.platform-document-viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.platform-document-viewer-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
  background: var(--ui-media-bar, #1d231f);
}
.platform-document-viewer-titles {
  display: grid;
  flex: 1;
  min-width: 0;
}
.platform-document-viewer-titles h2 {
  margin: 0;
  overflow: hidden;
  font-size: var(--ui-text-callout);
  font-weight: 500;
  line-height: 1.375;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-document-viewer-titles h2:focus {
  outline: none;
}
.platform-document-viewer-titles p {
  margin: 0;
  overflow: hidden;
  color: var(--ui-media-bar-ink-secondary, #d3dbd5);
  font-size: var(--ui-text-caption);
  line-height: 1.333;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-document-viewer-button {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: #ffffff;
  cursor: pointer;
}
.platform-document-viewer-button:disabled {
  opacity: 0.4;
  cursor: default;
}
@media (hover: hover) and (pointer: fine) {
  .platform-document-viewer-button:hover:not(:disabled) {
    background: #ffffff24;
  }
}
/* The dark stage keeps a light thumb (AZCO-552): the ink-based one would vanish on it. */
:where(.platform-document-viewer, .platform-document-viewer *) {
  scrollbar-color: rgb(255 255 255 / 0.35) transparent;
}
.platform-document-viewer-stage {
  position: relative;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: zoom-in;
}
.platform-document-viewer-stage[data-zoomed] {
  cursor: grab;
}
.platform-document-viewer-stage img {
  display: block;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  object-fit: contain;
  background: #ffffff;
  box-shadow: 0 6px 24px #00000059;
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
  -webkit-user-drag: none;
}
.platform-document-viewer-stage[data-settling] img {
  transition: transform 180ms ease-out;
}
.platform-document-viewer-zoom {
  position: absolute;
  bottom: 12px;
  left: 50%;
  padding: 4px 10px;
  border-radius: var(--ui-radius-control);
  background: #000000a6;
  color: #ffffff;
  font-size: var(--ui-text-caption);
  line-height: 1.333;
  transform: translateX(-50%);
  pointer-events: none;
}
.platform-document-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 12px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-radius: var(--ui-radius-surface, 12px) var(--ui-radius-surface, 12px) 0 0;
  background: var(--control-surface);
  color: var(--ink);
}
@media (max-width: 600px) and (pointer: coarse) {
  .platform-document-viewer-actions > :is(.ui-button, button, a) {
    flex: 1 1 0;
    min-height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .platform-document-viewer-stage[data-settling] img {
    transition: none;
  }
}

/* EmailDocumentSheet (ui/DocumentViewer, AZCO-401): the address form, then
   who it was sent to. The result region stays mounted, so it is announced;
   it takes no room while empty. The sent check takes
   `--platform-email-sent-icon` (default the bar tint). */
.platform-email-result {
  display: grid;
  gap: 8px;
}
.platform-email-result:empty {
  margin: 0;
}
.platform-email-sent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: var(--ui-text-callout);
  line-height: 1.375;
  overflow-wrap: anywhere;
}
.platform-email-sent svg {
  flex: none;
  color: var(--platform-email-sent-icon, var(--platform-bar-tint));
}
.platform-email-missed {
  margin: 0;
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  line-height: 1.429;
  overflow-wrap: anywhere;
}
.platform-email-note {
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.45;
}
.platform-email-note > p {
  margin: 0;
}

/* Notices docked beside a dialog reserve their lane. This comes after every
   frame family so an equal-specificity frame rule cannot cover the notices. */
dialog.platform-dialog[data-notification-dock][open] {
  margin-block-start: 12px;
  margin-block-end: auto;
  max-height: calc(100dvh - var(--notification-dock-height) - 44px);
}

/* ===== AZCO-528: one task modal at a time (owner ruling 13) =====
   Opening a task modal while another is open hands off (ui/modal-registry): the first, `[data-handoff-exit]`, is inert
   and leaves (down with the exit curve as a sheet on phones, a 150ms fade as a desktop dialog); the second is already
   open, `[data-handoff]`, parked out of sight with a transparent backdrop, so the first's backdrop is the only scrim.
   When the first closes, in the same frame, the second loses `[data-handoff]`: its backdrop shows at full strength at
   once (`[data-handoff-entered]` takes away its fade-in) and it enters: a sheet rises over 380ms with the sheet's ease;
   a desktop dialog fades in over 150ms as it scales from 0.98, on the sheet's curve; a full-screen modal (a
   DocumentViewer, a presentation) fades in over 200ms as it rises 16px, on the sheet's curve. With reduced motion the
   two crossfade over 200ms, a fade only. */
dialog.platform-dialog[data-handoff]::backdrop,
dialog.platform-dialog[data-handoff-entered]::backdrop {
  animation: none;
  transition: none;
}
dialog.platform-dialog[data-handoff]::backdrop {
  background: transparent;
}
dialog.platform-dialog[data-handoff-exit] {
  animation: platform-handoff-fade-out 150ms var(--ui-ease-exit) forwards;
  pointer-events: none;
}
dialog.platform-dialog[data-handoff] {
  animation: none;
  opacity: 0;
}
dialog.platform-dialog[data-handoff-entered] {
  animation: platform-handoff-dialog-in 150ms var(--ui-ease-sheet);
}
dialog.platform-dialog:is([data-size="presentation"], [data-size="fullscreen"])[open][data-handoff-entered] {
  animation: platform-handoff-rise-in 200ms var(--ui-ease-sheet);
}
@media (max-width: 959.98px) and (pointer: coarse) {
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open][data-handoff-exit] {
    animation: platform-handoff-exit-down var(--ui-motion-exit) var(--ui-ease-exit) forwards;
  }
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open][data-handoff] {
    animation: none;
    opacity: 1;
    translate: 0 100%;
  }
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open][data-handoff-entered] {
    animation: platform-sheet-slide-up var(--ui-motion-sheet) var(--ui-ease-sheet);
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.platform-dialog[data-handoff-exit],
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open][data-handoff-exit] {
    animation: platform-handoff-fade-out 200ms ease forwards;
  }
  dialog.platform-dialog[data-handoff],
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open][data-handoff] {
    animation: platform-handoff-fade-in 200ms ease;
    opacity: 1;
    translate: none;
  }
  dialog.platform-dialog[data-handoff-entered],
  dialog.platform-dialog:is([data-size="presentation"], [data-size="fullscreen"])[open][data-handoff-entered],
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents])[open][data-handoff-entered] {
    animation: none;
  }
}
@keyframes platform-handoff-exit-down {
  to {
    translate: 0 100%;
  }
}
@keyframes platform-handoff-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes platform-handoff-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes platform-handoff-dialog-in {
  from {
    opacity: 0;
    scale: 0.98;
  }
}
@keyframes platform-handoff-rise-in {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}
/* A task modal over the account takeover (carve-out T10). From 960px the takeover is the account dialog, and its
   backdrop stays the only scrim; on phones the takeover has none, so the task's own dims it. */
@media (min-width: 960px), (not (pointer: coarse)) {
  dialog.platform-dialog[data-over-page]::backdrop {
    background: transparent;
    animation: none;
    transition: none;
  }
}
/* An alert (`variant="alert"`, AZCO-528 proposal §7.1): a decision about what's beneath, centred at every size, over
   a task modal. No close button: Cancel or Escape dismisses it, and Cancel takes the initial focus.
   Phones (iOS 26): 300 wide (less 48 on the narrowest), the alert radius (24), 20 in, the elevated surface; a
   centred headline title and subhead message; 44px capsules, side by side for two and stacked for three or more.
   From 960px (macOS): 440 wide, radius 16, the title and a callout message left-aligned, buttons right-aligned at
   36. Cancel is the secondary button; the action is primary, or a solid danger button when it destroys. */
dialog.platform-dialog[data-modal-kind="alert"],
dialog.platform-dialog.platform-dialog--compact[data-modal-kind="alert"] {
  --dialog-width: 300px;
  --dialog-padding: 20px;
  width: min(var(--dialog-width), calc(100vw - 48px));
  border: 0;
  border-radius: var(--ui-radius-alert);
  background: var(--ui-surface-elevated, var(--control-surface));
}
dialog.platform-dialog[data-modal-kind="alert"] > .platform-dialog-heading {
  justify-content: center;
  margin-bottom: 8px;
  text-align: center;
}
dialog.platform-dialog[data-modal-kind="alert"] > .platform-dialog-heading h2 {
  font-size: var(--ui-text-headline);
  font-weight: var(--ui-text-headline-weight, 500);
  line-height: 1.3;
}
dialog.platform-dialog[data-modal-kind="alert"] .platform-dialog-text {
  font-size: var(--ui-text-subhead);
  line-height: 1.4;
  text-align: center;
}
/* The actions: no divider, no reserved error row until there is an error. */
dialog.platform-dialog[data-modal-kind="alert"] .modal-footer.ui-form-actions {
  margin-top: 20px;
  padding-top: 0;
}
dialog.platform-dialog[data-modal-kind="alert"] .modal-footer.ui-form-actions::before,
dialog.platform-dialog[data-modal-kind="alert"] .ui-form-actions > .ui-form-error:empty {
  display: none;
}
dialog.platform-dialog[data-modal-kind="alert"] .ui-form-actions > .ui-form-action-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}
/* Three or more stack, the action first is the app's order; Cancel stays where the app put it. */
dialog.platform-dialog[data-modal-kind="alert"] .ui-form-actions > .ui-form-action-buttons:has(> :nth-child(3)) {
  grid-auto-flow: row;
}
:root body dialog.platform-dialog[data-modal-kind="alert"] .ui-form-action-buttons > .ui-button {
  min-width: 0;
  min-height: 44px;
  border-radius: var(--ui-radius-button, var(--ui-radius-control));
  white-space: normal;
}
/* Destructive actions are solid in an alert. */
:root body dialog.platform-dialog[data-modal-kind="alert"] .ui-button.ui-button--danger:not(:disabled) {
  border-color: transparent;
  background: var(--control-danger-solid);
  color: var(--control-on-danger, #ffffff);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  dialog.platform-dialog[data-modal-kind="alert"],
  dialog.platform-dialog.platform-dialog--compact[data-modal-kind="alert"] {
    --dialog-width: 440px;
  }
  dialog.platform-dialog[data-modal-kind="alert"] > .platform-dialog-heading {
    justify-content: flex-start;
    text-align: start;
  }
  dialog.platform-dialog[data-modal-kind="alert"] .platform-dialog-text {
    font-size: var(--ui-text-callout);
    text-align: start;
  }
  dialog.platform-dialog[data-modal-kind="alert"] .ui-form-actions > .ui-form-action-buttons,
  dialog.platform-dialog[data-modal-kind="alert"] .ui-form-actions > .ui-form-action-buttons:has(> :nth-child(3)) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  :root body dialog.platform-dialog[data-modal-kind="alert"] .ui-form-action-buttons > .ui-button {
    min-height: 36px;
  }
}

/* A "flow" route (AZCO-546, AZCO-551): the step flow's frame. From 960px a 560px modal of a fixed height whose heading
   (the progress, else the title, and the plain ×) is pinned at the top and whose footer (Back leading; Skip and the
   primary trailing) is pinned at the bottom, with a rule above it; the body between them scrolls, and the dialog's
   scroll padding keeps a focused field clear of both. On phones a full-screen sheet: the band holds ‹ (from the second
   step) and ×, as discs, and the footer sits above the home indicator. */
dialog.platform-dialog.platform-flow-sheet[data-layout="flow"][open] {
  --dialog-width: 560px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 0;
  scroll-padding-block-end: var(--dialog-footer-height, 0px);
}
/* An explicit media-rich task frame; keep the host's viewport caps and phone takeover. */
@media (min-width: 960px), (not (pointer: coarse)) {
  dialog.platform-dialog.platform-flow-sheet.platform-flow-sheet--rich[data-layout="flow"][open] {
    --dialog-width: 960px;
    --ui-step-screen-width: 100%;
    height: min(740px, calc(100dvh - 64px));
  }
}
.platform-flow-band {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 8px;
  min-width: 0;
}
.platform-flow-heading {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.platform-flow-heading > * {
  flex: 1 1 auto;
}
.platform-flow-title:focus {
  outline: none;
}
/* Once a step renders its progress there, the title is the heading's name only. */
.platform-flow-heading:has(> :not(.platform-flow-title)) > .platform-flow-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.platform-flow-back:empty {
  display: none;
}
.platform-flow-body {
  flex: 1 0 auto;
  min-width: 0;
}
.platform-flow-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  flex: none;
  margin-inline: calc(-1 * var(--dialog-padding));
  padding: 12px var(--dialog-padding) var(--dialog-padding);
  border-top: 1px solid var(--line);
  background: inherit;
}
.platform-flow-footer:empty {
  display: none;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  /* Back is in the footer from 960px, except beside a step's extra choices, where it stays in the band (AZCO-651). */
  .platform-flow-back:not([data-band]) {
    display: none;
  }
}
@media (max-width: 959.98px) and (pointer: coarse) {
  dialog.platform-dialog.platform-flow-sheet[data-layout="flow"][open] {
    width: 100%;
    max-width: 100%;
    inset: var(--platform-flow-visible-top, 0px) 0 auto;
    height: var(--platform-flow-visible-height, 100dvh);
    max-height: var(--platform-flow-visible-height, 100dvh);
    margin: 0;
    padding-top: env(safe-area-inset-top);
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-flow-sheet, dialog.platform-dialog.platform-flow-sheet) > .platform-sheet-grabber {
    display: none;
  }
  /* The band: 56px, its discs 8px in from the screen's edges, as the account takeover's. */
  dialog.platform-dialog.platform-flow-sheet > .platform-dialog-heading {
    top: 0;
    box-sizing: border-box;
    min-height: 56px;
    margin: 0 calc(-1 * var(--dialog-padding)) 8px;
    padding: 6px max(var(--platform-bar-inset, 8px), env(safe-area-inset-right)) 6px max(var(--platform-bar-inset, 8px), env(safe-area-inset-left));
  }
  dialog.platform-dialog.platform-flow-sheet > .platform-dialog-heading > button.platform-dialog-close,
  .platform-flow-back .ui-step-flow-back {
    margin: 0;
  }
  .platform-flow-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    border-top-color: transparent;
  }
}

/* AZCO-638: the same viewer shows every page, keeping actions separate from page navigation. */
.platform-document-viewer-pages {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--line);
  background: var(--control-surface);
  color: var(--ink);
}
.platform-document-viewer-pages .ui-meta { margin: 0; }
dialog.platform-dialog.platform-document-viewer:has(.platform-document-viewer-pages)[open] { grid-template-rows: auto minmax(0, 1fr) auto auto; }

/* 07-reports-voice.css */
/* Reporter voice notes and dictation (AZCO-324). Rows reuse .platform-attachment. */
.platform-voice-note {
  row-gap: 8px;
}
.platform-voice-strip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 12px 4px 4px;
  border-radius: var(--ui-radius-field);
  background: var(--ui-canvas, #f4f5f0);
  color: var(--control-primary);
}
.platform-voice-strip > .ui-meta {
  padding-left: 8px;
}
.platform-voice-strip > .ui-button {
  flex: none;
}
.platform-voice-elapsed {
  flex: none;
  font-size: var(--ui-text-footnote);
  font-variant-numeric: tabular-nums;
}
.platform-voice-review {
  flex-wrap: wrap;
  padding: 4px;
  background: none;
}
.platform-voice-audio {
  flex: 1 1 220px;
  min-width: 0;
  height: 36px;
}
.platform-voice-actions {
  display: flex;
  flex: none;
  gap: 4px;
  margin-left: auto;
}
.platform-dictation-status,
.platform-dictation-error {
  flex: 1 1 200px;
  min-width: 0;
  margin: 0;
}

/* 07-reports.css */
.platform-report-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
@media (max-width: 420px) {
  .platform-report-context {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Reporter attachments and report records. */
.platform-attachments {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.platform-attachments-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 36px;
}
.platform-attachments-heading .ui-item-title {
  margin: 0;
}
.platform-attachments-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}
.platform-attachments-empty,
.platform-attachments > .ui-form-error {
  margin: 0;
}
.platform-attachment-list {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.platform-attachment {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel, 8px);
  background: var(--control-surface);
  font-size: var(--ui-text-footnote);
}
/* Thumbnails are compact tiles (AZCO-528, addendum §5 #19): the compact card radius on the media surface. */
.platform-attachment-preview {
  display: block;
  border-radius: var(--ui-radius-card-compact);
}
.platform-attachment-thumb {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--ui-radius-card-compact);
  background: var(--ui-surface-card-media);
  color: var(--muted);
  object-fit: cover;
  box-sizing: border-box;
}
img.platform-attachment-thumb {
  display: block;
  border: 1px solid var(--line);
}
.platform-attachment-copy {
  display: grid;
  min-width: 0;
}
.platform-attachment-name {
  overflow-wrap: anywhere;
}
.platform-attachment-audio {
  width: 100%;
  max-width: 280px;
  height: 36px;
  margin-top: 4px;
}
/* Page-level banners only; a section's own banner follows the section's spacing. */
/* The record's column centres in the page, as every fixed-width column does (AZCO-588). */
.platform-record-page > .platform-banner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--platform-record-width);
  margin-inline: auto;
  margin-bottom: var(--layout-gap);
}
.platform-record {
  display: grid;
  gap: var(--layout-gap);
  width: 100%;
  max-width: var(--platform-record-width);
  min-width: 0;
  margin-inline: auto;
}
.platform-record-section {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: var(--layout-gap);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-surface, 12px);
  background: var(--control-surface);
}
.platform-record-section > :is(h2, p) {
  margin: 0;
}
.platform-record-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.platform-record-heading .ui-section-title {
  margin: 0;
}
.platform-record-text {
  display: grid;
  gap: 4px;
}
.platform-record-text .ui-item-title {
  margin: 0;
  font-size: var(--ui-text-subhead);
}
.platform-record-text p,
.platform-record-response {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.platform-record-response {
  padding: 12px 14px;
  border: 1px solid var(--feedback-review-border);
  border-radius: var(--ui-radius-panel, 8px);
  background: var(--feedback-review-background);
  color: var(--feedback-review-foreground);
}
.platform-record-section .modal-footer.ui-form-actions {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.platform-triage .ui-select-field {
  max-width: 280px;
}
/* A report's conversation and history (AZCO-322): dated entries in one record section. */
.platform-thread-count {
  margin-left: 8px;
  font-weight: 400;
}
.platform-thread-status {
  margin: 0;
}
.platform-thread-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.platform-thread-entry {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.platform-thread-entry:first-child {
  padding-top: 4px;
  border-top: 0;
}
.platform-thread-entry:last-child {
  padding-bottom: 0;
}
.platform-thread-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--ui-radius-round);
  background: var(--ui-canvas, #f4f5f0);
  color: var(--ink);
  font-size: 13px; /* type-scale: allow a fixed-size glyph in its circle */
  font-weight: 500;
}
.platform-thread-avatar--team {
  background: var(--control-primary);
  color: var(--control-on-primary);
}
.platform-thread-content {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.platform-thread-content > p {
  margin: 0;
}
.platform-thread-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.platform-thread-title {
  font-weight: 500;
}
.platform-thread-body {
  max-width: 80ch;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
/* The composer is divided from the entries above it, never from the heading. */
.platform-thread-list + .platform-thread-composer {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* Session diagnostics (AZCO-322): the reporter's opt-in and included events. */
.platform-diagnostic-list {
  display: grid;
  gap: 4px;
  max-height: 200px;
  margin: 0;
  padding: 8px 12px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-panel, 8px);
  list-style: none;
  font-size: var(--ui-text-footnote);
}
.platform-diagnostic-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  overflow-wrap: anywhere;
}

/* AZCO-690: on phones (the app layout) a report's actions follow its text directly: no empty feedback row reserved
   above them, and the buttons span the section, one per row, primary last, so the floating Report button, which rests
   on the page's trailing edge, never sits over one once the page is scrolled to its end. */
.platform-app[data-layout="app"] .platform-record-section .ui-form-actions > .ui-form-error:empty {
  display: none;
}
.platform-app[data-layout="app"] .platform-record-section .ui-form-actions > .ui-form-action-buttons {
  display: grid;
  justify-content: stretch;
  width: 100%;
}
.platform-app[data-layout="app"] .platform-record-section .ui-form-actions > .ui-form-action-buttons > :is(button, a) {
  width: 100%;
}
/* Related report records are ordinary text links, including after visiting. */
.platform-report-context-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* 08-admin.css */
/* Administration: feature targeting, change history and diagnostic details. */
.platform-feature-targeting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 12px 24px;
}
.platform-feature-targeting .platform-checkbox {
  align-items: center;
  min-height: 44px;
}
.platform-feature-history {
  display: grid;
  gap: 4px;
}
.platform-feature-history .ui-item-title {
  margin: 0;
  font-size: var(--ui-text-subhead);
}
.platform-feature-history ol {
  display: grid;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: var(--ui-text-footnote);
}
.platform-feature-history li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.platform-feature-reason {
  color: var(--ink);
}
/* A failure's or a session event's record (AZCO-703): its fields as a two-column list, then related events. */
.platform-record-details {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  font-size: var(--ui-text-footnote);
}
.platform-record-details > div {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 12px;
}
.platform-record-details dt {
  color: var(--muted);
}
.platform-record-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.platform-record-related ol {
  display: grid;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
  font-size: var(--ui-text-footnote);
}
.platform-record-related li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  overflow-wrap: anywhere;
}
/* A related event's name in ink, not a default blue link: a link is underlined, the shown event is bold. */
.platform-record-related :is(a, [aria-current]) {
  width: fit-content;
  max-width: 100%;
  border-radius: var(--ui-radius-highlight);
  color: var(--ink);
  font-size: var(--ui-text-subhead);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.platform-record-related [aria-current] {
  font-weight: 500;
  text-decoration: none;
}
.platform-diagnostic-record .ui-item-title {
  margin: 0;
  font-size: var(--ui-text-subhead);
}
@media (max-width: 600px) {
  .platform-feature-targeting {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Invite codes (AZCO-385), and Users' places per account (AZCO-456). */
.platform-invite-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}
.platform-codes-setting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 0 0 8px;
}
.platform-codes-setting .ui-button--quiet {
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  font-size: var(--ui-text-footnote);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.platform-request-note {
  overflow-wrap: anywhere;
  white-space: pre-line;
}

/* The phone account page's Administration, grouped (AZCO-690): the area's name as a title3 heading above its groups,
   each group a ListSection headed by its name. */
.platform-hub-admin-groups {
  display: grid;
}
.platform-hub-admin-title {
  margin: 0 0 12px;
  padding: 0 20px;
  font: 400 var(--ui-text-title3, 1.25rem)/1.25 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: normal;
}

/* ===== AZCO-690: an Administration task, a full-screen focus page =====
   Its own bar: Cancel on the leading edge, the task's title centred, Done (primary) on the trailing edge, 64px tall
   and sticky. The body centres in the reading column (720px); a two-pane editor puts its panes side by side, and on
   phones shows one at a time under a segmented pair. */
.platform-admin-task {
  display: contents;
}
.platform-task {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.platform-task-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: var(--platform-header-height, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--ui-canvas, #f4f5f0);
}
.platform-task-cancel {
  justify-self: start;
}
.platform-task-done {
  justify-self: end;
}
.platform-task-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: var(--platform-title);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-task-title:focus {
  outline: none;
}
.platform-task-body {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--platform-app-column, 720px);
  margin: 0 auto;
  padding-block: 24px;
}
.platform-task-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.platform-task-panes[data-segmented] {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
.platform-task-pane {
  min-width: 0;
}
/* On phones (the app layout) the task's bar is the app bar's size: its title at the body size, between Cancel and Done. */
.platform-app[data-layout="app"] .platform-task-title {
  font: 500 var(--ui-text-body, 17px)/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* Record evidence stays accessible without overwhelming the primary workflow (AZCO-851). */
.platform-record-disclosure { border-top: 1px solid var(--line); padding-block: var(--ui-space-4, 16px); }
.platform-record-disclosure > summary { cursor: pointer; font-weight: 500; }
.platform-record-disclosure[open] > summary { margin-bottom: 16px; }
@media (max-width: 959.98px) and (pointer: coarse) {
  /* Preserve the native disclosure marker and enlarge its actual tap target (AZCO-863). */
  .platform-record-disclosure > summary { box-sizing: border-box; min-height: 44px; padding-block: 12px; }
}

/* Standalone record cross-links are touch actions, not prose links (AZCO-876).
   Keep fine-pointer density while providing a full target on touch devices. */
@media (any-pointer: coarse) {
  .platform-record-related a,
  .platform-report-context-link {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    min-width: 44px;
  }
}

/* 09-toasts.css */
/* Notifications are @azose-co/platform-ui StatusMessages in the shared notification
   layer (`.ui-status-messages`, also marked `platform-toasts`). Links inside a
   platform notice, such as the reporter's "View report", read as actions. */
.platform-toast-link {
  border-radius: var(--ui-radius-inner, 4px);
  color: inherit;
  font-weight: 500;
  text-underline-offset: 2px;
}

/* In the app layout, while the tabs run along the bottom, notices sit above
   the tab bar instead of covering it (AZCO-427). Only the document host lifts:
   a host inside a modal clears that modal, whose backdrop covers the tabs (AZCO-709). */
@media (max-width: 959.98px) and (pointer: coarse) {
  html.platform-document:has(.platform-app[data-layout="app"] .platform-tabs) body > .ui-status-messages {
    /* The docked bar's whole height (AZCO-557, AZCO-649), as --platform-tabbar-overlap sums it, then 12px. */
    bottom: calc(1px + var(--platform-tabbar-inset-top) + var(--platform-tabbar-height) + max(var(--platform-tabbar-inset-bottom), env(safe-area-inset-bottom)) + 12px);
  }
}
/* Over the floating capsule (AZCO-649, navigation.tabBar): its offset (24px, or the safe area where that is more) and its height, then 12px. The
   notices are in a layer of their own, outside the app, so they repeat the sum. */
html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="floating"] .platform-tabs) body > .ui-status-messages,
html.platform-document[data-installed]:has(.platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs) body > .ui-status-messages {
  bottom: calc(max(var(--platform-tabbar-float-bottom), env(safe-area-inset-bottom)) + 2 * var(--platform-tabbar-float-padding) + var(--platform-tabbar-height) + 12px);
}
@media (display-mode: standalone) {
  html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs) body > .ui-status-messages {
    bottom: calc(max(var(--platform-tabbar-float-bottom), env(safe-area-inset-bottom)) + 2 * var(--platform-tabbar-float-padding) + var(--platform-tabbar-height) + 12px);
  }
}

/* A floating bar leaves no menu or notice reservation on pushed pages (AZCO-729). */
html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-tab-root]) .platform-tabs),
html.platform-document[data-installed]:has(.platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) .platform-tabs) { --ui-menu-frame-bottom: 0px; }
html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-tab-root]) .platform-tabs) body > .ui-status-messages,
html.platform-document[data-installed]:has(.platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) .platform-tabs) body > .ui-status-messages { bottom: calc(env(safe-area-inset-bottom) + 12px); }
@media (display-mode: standalone) {
html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) .platform-tabs) { --ui-menu-frame-bottom: 0px; }
html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) .platform-tabs) body > .ui-status-messages { bottom: calc(env(safe-area-inset-bottom) + 12px); }
}

/* 10-app-layout.css */
/* The phone's navigation, below 960px (`data-layout="app"` on .platform-app, AZCO-384, AZCO-525): mobile first,
   with native navigation. A compact bar over the top of the page: Back (a chevron and the parent's name) at the
   leading edge, the title centred, then page actions and, when the app puts it there, the account (AZCO-527). The
   tab bar sits along the bottom, above the home indicator, or the sidebar opens from the app's icon (AZCO-519).
   From 960px `data-layout` is `frame` and the desktop's sidebar or top bar take over (10-navigation.css).
   A focus page takes the whole screen. Apps add `viewport-fit=cover` to their
   viewport meta so the safe-area insets apply. */
/* A focus page keeps the header mounted but hidden. !important because the layout
   rules below give the header a display and outrank a bare [hidden], which left
   its parent link over the page, taking taps meant for the page's Close (AZCO-453). */
.platform-header[hidden] {
  display: none !important;
}
/* Both navigations render the same wrapper around the header and the page, so
   dual's switch at 960px keeps the page mounted (AZCO-429). Desktop navigation
   lays its parts out as before: the wrapper takes no box of its own. */
.platform-app:not([data-layout="app"]) .platform-app-layout {
  display: contents;
}
.platform-app[data-layout="app"] .platform-app-layout {
  position: relative;
  display: grid;
  flex: 1 1 0;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "banner" "main" "tabs";
  /* Slides and swipes never widen the page. */
  overflow: clip;
}
.platform-app[data-layout="app"] .platform-staging-banner {
  grid-area: banner;
  padding-top: max(4px, env(safe-area-inset-top));
}

/* The compact bar: over the page area, so content scrolls beneath it. */
.platform-app[data-layout="app"] .platform-header {
  grid-area: main;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(min-content, 1fr);
  grid-template-rows: var(--platform-app-bar-height);
  align-items: center;
  height: auto;
  min-height: 0;
  padding: env(safe-area-inset-top) max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left));
  border-bottom: 1px solid transparent;
  background: transparent;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}
.platform-app[data-layout="app"] .platform-staging-banner + .platform-header {
  padding-top: 0;
}
.platform-app[data-layout="app"]:is([data-scrolled]:not([data-tab-root]), [data-tab-root][data-title-collapsed]) .platform-header {
  border-bottom-color: var(--line);
  background: var(--platform-bar-background);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.platform-app[data-layout="app"] :is(.platform-navigation-unit, .platform-page-host, .platform-page-slot, .platform-page-context) {
  display: contents;
}
.platform-app[data-layout="app"] .platform-brand-home {
  grid-area: 1 / 1;
  justify-self: start;
  margin: 0;
}
/* Back takes the leading edge; the brand mark returns on pages without one. */
.platform-app[data-layout="app"] .platform-header:has(.platform-page-context[data-has-parent]) .platform-brand-home {
  display: none;
}
/* Back (AZCO-464): a round chevron button, as in the owner's comps and today's
   iOS and Material apps, rather than a chevron and the parent's name. The 44px
   target is a disc (--platform-back-surface, 44px since AZCO-585) that stays legible over
   content scrolling beneath the bar. The parent's name stays the accessible
   name ("Back to People"); --platform-back-label: inline shows it beside the
   chevron again. */
.platform-app[data-layout="app"] .platform-page-back {
  grid-area: 1 / 1;
  justify-self: start;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  width: auto;
  min-width: 44px;
  max-width: 100%;
  height: 44px;
  margin-left: max(0px, calc(var(--page-gutter) - 8px));
  padding: 0;
  border-radius: var(--ui-radius-control);
  color: var(--platform-back-color);
  font: 400 min(var(--platform-body), 23px)/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  text-decoration: none;
}
/* The disc is the link's own ::before, and the ‹ a plain glyph centred on it (AZCO-568): an <svg> padded into a disc,
   with a backdrop filter of its own, drew as a tiny broken stroke with no disc in WebKit (a Home Screen app, Mono). */
.platform-app[data-layout="app"] .platform-page-back::before {
  content: "";
  position: absolute;
  top: calc((var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
  left: calc((var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
  width: var(--ui-bar-disc);
  height: var(--ui-bar-disc);
  border-radius: var(--ui-radius-control);
  background: var(--platform-back-surface);
  box-shadow: var(--platform-back-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.platform-app[data-layout="app"] .platform-page-back svg {
  position: relative;
  flex: none;
  width: var(--ui-bar-glyph);
  height: var(--ui-bar-glyph);
  /* Centred in the 44px target, its optical centre 1px left of the disc's. */
  margin: 0 calc((var(--ui-bar-target) - var(--ui-bar-glyph)) / 2 + 1px) 0 calc((var(--ui-bar-target) - var(--ui-bar-glyph)) / 2 - 1px);
  overflow: visible;
}
.platform-app[data-layout="app"] .platform-page-back .platform-page-back-label {
  display: var(--platform-back-label);
  padding-right: 8px;
  color: var(--platform-bar-tint);
}
@media (forced-colors: active) {
  .platform-app[data-layout="app"] .platform-page-back::before {
    border: 1px solid CanvasText;
  }
}
.platform-page-back-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-app[data-layout="app"] .platform-page-context .platform-compact-title {
  grid-area: 1 / 2;
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  color: var(--ink);
  font: var(--platform-compact-title);
  letter-spacing: normal;
  /* A floor of 1.2 leaves descenders room inside the clipping box; padding the
     box by 0.12em (and pulling it back with the margin) keeps deep descenders
     ("y", "g" in a display face) clear of the ellipsis' clip without moving the
     layout. */
  line-height: max(22px, 1.2em);
  padding-block: 0.12em;
  margin-block: -0.12em;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-page-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* On a tab's own page the bar's title waits until the large title scrolls under it. */
.platform-app[data-layout="app"] .platform-page-context[data-large-title] .platform-compact-title {
  opacity: 0;
  transition: opacity 180ms ease;
}
.platform-app[data-layout="app"][data-title-collapsed] .platform-page-context[data-large-title] .platform-compact-title {
  opacity: 1;
}
.platform-header-trailing {
  grid-area: 1 / 3;
  justify-self: end;
  display: flex;
  align-items: center;
  min-width: 0;
}
.platform-app[data-layout="app"] .platform-header-actions-host {
  padding-left: 0;
}
.platform-app[data-layout="app"] .platform-account-host {
  padding-left: 4px;
  padding-right: 4px;
}
.platform-more-mark {
  position: relative;
  display: grid;
  place-items: center;
}

/* The page area: content starts below the bar and scrolls beneath it. */
.platform-app[data-layout="app"] .platform-main {
  grid-area: main;
  padding-top: calc(var(--platform-app-bar-height) + env(safe-area-inset-top));
  padding-left: max(var(--page-gutter), env(safe-area-inset-left));
  padding-right: max(var(--page-gutter), env(safe-area-inset-right));
  /* The tab bar carries the bottom inset; a focus page pads for it itself. */
  padding-bottom: max(var(--page-gutter), var(--platform-report-scroll-clearance, 0px));
  background: var(--ui-canvas, #f4f5f0);
}
.platform-app[data-layout="app"] .platform-staging-banner ~ .platform-main {
  padding-top: var(--platform-app-bar-height);
}
/* Breathing room below the bar (AZCO-464), on a tab's own page too now that
   every title is in the bar (AZCO-519). */
.platform-app[data-layout="app"]:not([data-presentation]) .platform-main {
  padding-top: calc(var(--platform-app-bar-height) + env(safe-area-inset-top) + var(--platform-header-gap));
}
.platform-app[data-layout="app"]:not([data-presentation]) .platform-staging-banner ~ .platform-main {
  padding-top: calc(var(--platform-app-bar-height) + var(--platform-header-gap));
}
/* A StickyActionBar sticks to the scroller's edge, which the page's own bottom padding insets: below it, a strip of
   page showed between the bar and the tab bar (AZCO-528, hello's Compose). It reaches through that padding, so it
   rests flush on the tab bar, or on the screen's edge with the sidebar, where it pads for the home indicator itself. */
.platform-app[data-layout="app"]:not([data-presentation]) .platform-main .ui-sticky-action-bar {
  bottom: calc(-1 * var(--page-gutter));
}
/* Floating navigation shares the scroll viewport rather than occupying a grid
   row. Reserve its expanded reach above the capsule for pinned completion actions;
   keep that reach while labels collapse so the actions do not jump during scroll.
   Deeper pages without tabs retain their ordinary viewport-edge placement. */
/* Floating main uses a content spacer, with zero scroller bottom padding.
   Its edge therefore needs no negative gutter offset, including on deeper pages. */
.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-presentation]) .platform-main .ui-sticky-action-bar,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-presentation]) .platform-main .ui-sticky-action-bar {
  bottom: 0;
}
.platform-app[data-layout="app"][data-tab-root][data-tab-bar="floating"]:not([data-presentation]) .platform-main .ui-sticky-action-bar,
:root[data-installed] .platform-app[data-layout="app"][data-tab-root][data-tab-bar="auto"]:not([data-presentation]) .platform-main .ui-sticky-action-bar {
  bottom: calc(var(--platform-tabbar-overlap) + 12px);
}
@media (display-mode: standalone) {
  .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-presentation]) .platform-main .ui-sticky-action-bar {
    bottom: 0;
  }
  .platform-app[data-layout="app"][data-tab-root][data-tab-bar="auto"]:not([data-presentation]) .platform-main .ui-sticky-action-bar {
    bottom: calc(var(--platform-tabbar-overlap) + 12px);
  }
}
/* A focus page has no bars, so it pads for the notch and home indicator itself. */
.platform-app[data-layout="app"][data-presentation="focus"] .platform-main {
  padding: max(12px, env(safe-area-inset-top)) max(var(--page-gutter), env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(var(--page-gutter), env(safe-area-inset-left));
}
/* ... and clears the floating report icon (AZCO-493), which sits 12px above that edge. */
.platform-app[data-layout="app"][data-presentation="focus"][data-report-float] .platform-main {
  padding-bottom: calc(max(12px, env(safe-area-inset-bottom)) + 68px + var(--platform-report-float-lift, 0px));
}
/* A focus page that is a StepScreen pads nothing below it (AZCO-780). The step's action is pinned to the scroller's
   edge, which that padding insets: content showed in the strip below the action, and the report icon's clearance
   lifted it 152px. The StepScreen's foot pads for the home indicator itself, and the report icon rests above it. */
.platform-app[data-presentation="focus"] .platform-main:has(> .platform-page > .ui-step-screen) {
  padding-bottom: 0;
}
/* A full-bleed page keeps the bars and owns its gutters, so the column padding goes
   too; it still starts below the compact bar, which it doesn't scroll beneath. */
.platform-app[data-layout="app"][data-presentation="full-bleed"] .platform-main {
  padding: calc(var(--platform-app-bar-height) + env(safe-area-inset-top)) 0 0;
  padding-bottom: 0;
}
.platform-app[data-layout="app"][data-presentation="full-bleed"] .platform-staging-banner ~ .platform-main {
  padding-top: var(--platform-app-bar-height);
}
.platform-app[data-layout="app"][data-presentation="full-bleed"] .platform-header {
  border-bottom-color: var(--line);
}
.platform-app[data-layout="app"] .platform-page {
  --platform-content-width: var(--platform-app-column);
  max-width: var(--platform-content-width);
}
/* A tab's own page: its title, large, at the top of the content. */
.platform-large-title-host:has(> .platform-large-title-slot-host > .platform-large-title-slot:empty) {
  display: none;
}
/* With account.placement "top-right" (AZCO-436, AZCO-429), the account (the
   avatar, or the account menu without account.to) ends the large title's row,
   level with the title's first line, at every width. Once the large title
   scrolls under the bar, the bar's own copy takes over, so only one is ever on
   screen and in the focus order. */
.platform-large-title-host[data-account-avatar] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.platform-large-title-host[data-account-avatar] > .platform-large-title-slot-host {
  flex: 1 1 auto;
  min-width: 0;
}
/* The report icon (AZCO-493) and the account end the large-title row together. */
.platform-large-title-trailing {
  display: flex;
  align-items: center;
  flex: none;
}
.platform-app[data-layout="app"][data-title-collapsed] .platform-large-title-trailing > .platform-report-action {
  visibility: hidden;
}
/* The tile's edge meets the column's edge; its target reaches into the gutter. */
.platform-large-title-account {
  display: flex;
  align-items: center;
  flex: none;
  margin: -2px -5px 0 0;
}
.platform-app[data-layout="app"][data-title-collapsed] .platform-large-title-account {
  visibility: hidden;
}
/* The account avatar: a 44px target around a round tile of the account's initials. */
.platform-account-avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--ui-radius-round);
  color: var(--control-on-primary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.platform-account-avatar-face {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font: 500 14px/1 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif); /* type-scale: allow a fixed-size glyph in its circle */
  letter-spacing: 0.02em;
}
@media (hover: hover) and (pointer: fine) {
  .platform-account-avatar:hover {
    background: var(--ui-surface-row-hover);
  }
}
.platform-account-avatar-attention {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  background: var(--platform-account-attention);
  box-shadow: 0 0 0 2px var(--ui-canvas, #f4f5f0);
}
/* Forced colours drop fills: the tile keeps an outline and the dot a system colour. */
@media (forced-colors: active) {
  .platform-account-avatar-face {
    border: 1px solid CanvasText;
  }
  .platform-account-avatar-attention {
    forced-color-adjust: none;
    background: Highlight;
    box-shadow: 0 0 0 2px Canvas;
  }
}
/* Room for a display face's ascenders and descenders, even at a tight line
   height or when an app clips the title to one line: 0.12em of padding each
   way, taken back from the margins, so the layout doesn't move. */
.platform-large-title {
  margin: calc(2px - 0.12em) 0 calc(var(--platform-header-gap) - 0.12em);
  padding-block: 0.12em;
  color: var(--ink);
  font: var(--platform-large-title);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.platform-large-title:focus {
  outline: none;
}

/* Push and pop slides, and the edge swipe back: the page above slides over an
   inert copy of the page beneath, which sits a little to the left under a shade. */
.platform-app[data-layout="app"][data-transition] .platform-main {
  position: relative;
  box-shadow: -10px 0 28px #0000001f;
}
.platform-app[data-layout="app"][data-transition="pop"] .platform-main {
  box-shadow: none;
}
.platform-transition-layer,
.platform-transition-shade {
  position: fixed;
  overflow: hidden;
  pointer-events: none;
}
.platform-transition-layer {
  background: var(--ui-canvas, #f4f5f0);
}
.platform-app[data-transition="pop"] .platform-transition-layer {
  box-shadow: -10px 0 28px #0000001f;
}
.platform-transition-shade {
  background: var(--platform-transition-shade);
}
.platform-app .platform-transition-layer > .platform-transition-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  box-shadow: none;
}

/* Pull to refresh: the indicator waits above the content and follows the pull. */
.platform-pull-to-refresh {
  position: relative;
}
.platform-pull-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 14px 0 0 -18px;
  border-radius: var(--ui-radius-round);
  background: var(--control-surface);
  box-shadow: 0 2px 8px #00000024;
  color: var(--muted);
  pointer-events: none;
}
.platform-pull-to-refresh[data-phase="armed"] .platform-pull-indicator,
.platform-pull-to-refresh[data-phase="refreshing"] .platform-pull-indicator {
  color: var(--platform-bar-tint);
}
.platform-pull-to-refresh[data-phase="refreshing"] .platform-pull-spinner {
  animation: platform-pull-spin 800ms linear infinite;
}
@keyframes platform-pull-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The docked tab bar keeps a row of its own: nothing scrolls beneath it. iPhone's
   Safari hit-tests a scrolled page beneath an overlapping bar, so a tap on a
   tab opened the link under it (AZCO-509). The row is the fix; positioning,
   like the header's, is only extra protection. The floating capsule (AZCO-649, below) sits over the page instead. */
.platform-tabs {
  grid-area: tabs;
  position: relative;
  z-index: 30;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  /* Equal columns and a shared pill width keep selection independent of label length (AZCO-649). */
  align-items: center;
  justify-items: center;
  box-sizing: border-box;
  /* Docked (AZCO-649): 6px above the pills, then 6px below them or the home indicator's safe area. */
  padding: var(--platform-tabbar-inset-top) max(8px, env(safe-area-inset-right)) max(var(--platform-tabbar-inset-bottom), env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border-top: 1px solid var(--line);
  background: var(--platform-chrome);
}
/* Each tab is its pill (AZCO-649, after the owner's reference): the current tab's fill covers its icon and its label.
   6px above a 24px icon row, a 2px gap, the label and 6px below make it 52px tall. Each pill has the same width,
   up to 112px, fitting its column with the existing minimum target. Hover and current share the shape. */
.platform-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  width: min(100%, var(--platform-tab-pill-width));
  min-width: max(44px, var(--platform-tab-pill-min-width));
  min-height: max(44px, var(--platform-tabbar-height));
  padding: var(--platform-tab-pill-padding-block) var(--platform-tab-pill-padding-inline);
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink-secondary);
  font: var(--platform-tab-label);
  white-space: nowrap;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms ease;
}
.platform-tab-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.platform-tab-icon {
  position: relative;
  display: grid;
  place-items: center;
  height: var(--platform-tab-icon-row);
}
.platform-tab-icon > svg {
  width: var(--platform-tab-icon-size);
  height: var(--platform-tab-icon-size);
}
/* The current tab is its pill's fill alone, at the label's own weight (AZCO-528, owner decision 10). */
.platform-tab[aria-current="page"] {
  color: var(--ink);
  background: var(--platform-tab-indicator);
}
@media (hover: hover) and (pointer: fine) {
  .platform-tab:hover {
    background: var(--ui-surface-row-hover);
  }
  .platform-tab[aria-current="page"]:hover {
    background: var(--platform-tab-indicator);
  }
}
/* On the icon's top-trailing corner, with a 2px ring of the bar's surface (AZCO-528, addendum §5 #16; AZCO-649, AZCO-659). */
.platform-tab-attention {
  position: absolute;
  top: -2px;
  right: -5px;
  box-shadow: 0 0 0 2px var(--platform-chrome);
}
/* The account tab (account.placement "tray", AZCO-429): the account's initials as its icon. */
.platform-account-tab-face {
  display: grid;
  place-items: center;
  width: var(--platform-tab-face-size);
  height: var(--platform-tab-face-size);
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font: 500 10px/1 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif); /* type-scale: allow a fixed-size glyph in its circle */
  letter-spacing: 0.02em;
}
.platform-account-tab .platform-tab-attention {
  background: var(--platform-account-attention);
}
@media (forced-colors: active) {
  .platform-account-tab-face {
    border: 1px solid CanvasText;
  }
}

/* A grey fill means selected or current only (AZCO-524): no control shows the browser's grey tap highlight. */
.platform-app :is(a[href], button, summary, select, [role="button"], [role="menuitem"], [role="option"], [role="tab"]) {
  -webkit-tap-highlight-color: transparent;
}
/* Pressed states: every tappable control answers a touch at once. */
.platform-app[data-layout="app"] :is(.platform-tab, .platform-page-back, .platform-brand-home, .platform-account-avatar, .platform-header-action, .ui-button, .platform-dialog-close),
.platform-action-sheet-item {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition-property: transform, opacity, background-color, color, border-color, box-shadow;
  transition-duration: 120ms;
}
/* A press dips the opacity, never the size (AZCO-528, addendum §2.8): the tab's icon and label together. */
.platform-app[data-layout="app"] :is(.platform-page-back, .platform-brand-home, .platform-account-avatar, .platform-header-action, .ui-button):active:not(:disabled),
.platform-app[data-layout="app"] .platform-tab:active :is(.platform-tab-icon, .platform-tab-label) {
  opacity: var(--ui-pressed-opacity);
  transition-duration: 0ms;
}
/* A grey fill means selected or current only (AZCO-524): a pressed item dips its opacity. */
.platform-action-sheet-item {
  transition: opacity 100ms ease;
}
.platform-action-sheet-item:active:not(:disabled) {
  opacity: var(--ui-pressed-opacity);
  transition-duration: 0ms;
}
@media (hover: hover) and (pointer: fine) {
  .platform-action-sheet-item:hover:not(:disabled) {
    background: var(--ui-surface-row-hover);
  }
}
/* Controls that open a menu or a sheet (the title menu, a select row) never flash a grey fill or the browser's tap
   highlight before it covers them (AZCO-524): a press dips their opacity instead. */
.platform-app[data-layout="app"] :is(.platform-title-trigger, .platform-select-row) {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition-property: opacity;
  transition-duration: 120ms;
}
.platform-app[data-layout="app"] :is(.platform-title-trigger, .platform-select-row):active:not(:disabled) {
  opacity: var(--ui-pressed-opacity);
  transition-duration: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .platform-tab,
  .platform-app[data-layout="app"] .platform-header,
  .platform-app[data-layout="app"] .platform-header::before,
  .platform-app[data-layout="app"] .platform-page-context[data-large-title] .platform-compact-title {
    transition: none;
  }
  .platform-pull-to-refresh[data-phase="refreshing"] .platform-pull-spinner {
    animation-duration: 2400ms;
  }
}

/* Phones (below 960px, with the tab bar along the bottom; AZCO-407): the tabs
   are the way home, so the bar has no brand mark unless the app keeps it
   (`header.brandHome: "always"`, the only case the shell renders one). A tab's own page whose bar has nothing else
   at rest (no Back, page actions, app tools, Report a problem or account) keeps
   no empty row: its large title starts at the top of the page, below the notch
   or the staging banner. Page actions and app tools count by what they render:
   page actions with no button or link, or `header.actions` rendering no
   element, leave the bar bare. The bar stays, out of the accessibility tree and the
   hit test, with no height under the inset, so the collapsing title still
   works: once the large title scrolls up past the inset, the bar takes its
   row, turns translucent and shows the centred title, until the large title
   is back in full below it. Full-bleed pages keep the bar's row. */
@media (max-width: 959.98px) and (pointer: coarse) {
  /* The tab bar's translucent surface (AZCO-464). Pages no longer scroll
     beneath the docked bar (AZCO-509): on iPhone a tap on a tab reached the link scrolled
     under the bar, so the bar keeps its own row (above). An element fixed to
     the viewport's bottom still clears it with --platform-tabbar-overlap, the docked bar's whole height: its
     hairline, the inset above the pills, the pills, and the inset or the safe area below (AZCO-499, AZCO-649). */
  .platform-app[data-layout="app"]:not([data-presentation="focus"]) {
    --platform-tabbar-overlap: calc(1px + var(--platform-tabbar-inset-top) + var(--platform-tabbar-height) + max(var(--platform-tabbar-inset-bottom), env(safe-area-inset-bottom)));
  }
  /* platform-ui's menus keep clear of the tab bar (AZCO-528): menuFrame() reads this from the root, above the
     bottom safe area it already leaves (at least 8px). A plain length, so the script can read it: the docked bar's
     hairline, the 6px above the pills and the 52px pills. */
  html.platform-document:has(.platform-app[data-layout="app"]:not([data-presentation="focus"]) .platform-tabs) {
    --ui-menu-frame-bottom: 59px;
  }
  .platform-app[data-layout="app"] .platform-tabs {
    border-top-color: var(--platform-tabbar-border);
    background: var(--platform-tabbar-background);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  /* Without a backdrop blur, a see-through bar would muddle the labels: it stays solid. */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .platform-app[data-layout="app"] .platform-tabs {
      background: var(--platform-chrome);
    }
  }
  /* Forced colours paint their own opaque surfaces. */
  @media (forced-colors: active) {
    .platform-app[data-layout="app"] .platform-tabs {
      background: Canvas;
    }
  }
  .platform-app[data-layout="app"]:not([data-brand-home="always"], [data-presentation]) .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host)) {
    /* Only its painted layer and the centred title show, so no empty banner landmark remains. */
    visibility: hidden;
  }
  .platform-app[data-layout="app"]:not([data-brand-home="always"], [data-presentation], [data-title-collapsed]) .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host)) {
    grid-template-rows: 0;
  }
  .platform-app[data-layout="app"]:not([data-brand-home="always"], [data-presentation]) .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host))::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    visibility: visible;
    border-bottom: 1px solid transparent;
    transition:
      background-color 200ms ease,
      border-color 200ms ease;
  }
  .platform-app[data-layout="app"][data-title-collapsed]:not([data-brand-home="always"], [data-presentation]) .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host))::before {
    border-bottom-color: var(--line);
    background: var(--platform-bar-background);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .platform-app[data-layout="app"][data-title-collapsed]:not([data-brand-home="always"], [data-presentation]) .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host)) .platform-compact-title {
    visibility: visible;
  }
  .platform-app[data-layout="app"]:not([data-brand-home="always"], [data-presentation]) .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host)) ~ .platform-main {
    padding-top: calc(env(safe-area-inset-top) + var(--page-gutter));
  }
  .platform-app[data-layout="app"]:not([data-brand-home="always"], [data-presentation]) .platform-staging-banner + .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host)) ~ .platform-main {
    padding-top: var(--page-gutter);
  }
}

/* AZCO-519: one geometry for the top and bottom of
   every phone screen, so nothing moves between a tab, a page below it and a
   sheet.
   - The top band is 64px below the safe area, the desktop header's height.
     A tab's own page puts its large title in it, level with the controls; a
     page below a tab centres its title there.
   - Controls in the band are 44px targets centred in it, their outer edges
     8px in from the screen's (--platform-bar-inset). The back disc and the
     actions' disc or capsule fill their targets (44px, AZCO-585), so they sit
     8px in; the avatar's 36px face sits 12px in.
   - Content starts --platform-header-gap (16px) below the band.
   - A sheet's band is 56px; Done is plain text at the same 8px inset, its
     text meeting the sheet's 16px content edge.
   Phones only; desktop keeps its sizes. */
:root {
  --platform-bar-inset: 8px;
  --platform-large-title: 500 var(--ui-text-title1)/1.214 var(--platform-font-display, var(--ui-font-display, var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif)));
  --platform-tab-label: 400 min(calc(var(--platform-body) * 12 / 17), calc(23px * 12 / 17))/1.17 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-app[data-layout="app"] {
    --page-gutter: 16px;
    --platform-app-bar-height: 64px;
  }
  .platform-app[data-layout="app"] .platform-header {
    padding-left: max(var(--platform-bar-inset), env(safe-area-inset-left));
    padding-right: max(var(--platform-bar-inset), env(safe-area-inset-right));
  }
  .platform-app[data-layout="app"] .platform-page-back {
    margin-left: 0;
  }
  /* A tab's own page with nothing else in the bar: the large title's row is the band. */
  .platform-app[data-layout="app"]:not([data-brand-home="always"], [data-presentation]) .platform-header:has(.platform-page-context[data-large-title]):not(:has(.platform-page-back, .platform-header-actions-slot button, .platform-header-actions-slot a[href], .platform-header-actions-slot summary, .platform-header-tools > *, .platform-account-host)) ~ .platform-main {
    padding-top: calc(env(safe-area-inset-top) + (var(--platform-app-bar-height) - 44px) / 2);
  }
  .platform-app[data-layout="app"] .platform-large-title-host[data-account-avatar] {
    align-items: center;
    min-height: 44px;
    margin-bottom: calc((var(--platform-app-bar-height) - 44px) / 2 + var(--platform-header-gap));
  }
  .platform-app[data-layout="app"] .platform-large-title-host[data-account-avatar] .platform-large-title {
    margin-block: -0.12em;
  }
  .platform-app[data-layout="app"] .platform-large-title-account {
    margin: 0 calc(var(--platform-bar-inset) - var(--page-gutter)) 0 0;
  }
  .platform-app[data-layout="app"] .platform-large-title-trailing {
    gap: 0;
  }
  /* Header avatars and brand marks are 44px circles on phones, the bar discs' size (AZCO-585). */
  .platform-app[data-layout="app"] .platform-account-avatar-face {
    width: var(--ui-bar-disc);
    height: var(--ui-bar-disc);
  }
  /* The sheet's band. */
  .platform-app[data-layout="app"] dialog.platform-route-sheet--account > .platform-dialog-heading {
    min-height: 56px;
    margin-bottom: 0;
    padding: 6px max(var(--platform-bar-inset), env(safe-area-inset-right)) 6px max(var(--platform-bar-inset), env(safe-area-inset-left));
  }
}
/* Done is a text button in every mode: regular-weight tint, no fill. Keyboard focus is the ring (11-focus.css). */
dialog.platform-dialog button.platform-dialog-done {
  padding: 0 8px;
  background: transparent;
  font-weight: 500;
}
/* The current choice: an accent check where a chevron would be. */
.platform-list-check {
  flex: none;
  margin-right: -2px;
  color: var(--platform-bar-tint);
}
/* Every glyph in the band is 24px, like the tab bar's; the bug was 18. */
.platform-app .platform-report-action svg {
  width: 24px;
  height: 24px;
}
/* The hairline is drawn inside the band, so the band stays 64 and centres land on whole pixels. */
.platform-app[data-layout="app"] .platform-header {
  border-bottom: 0;
}
.platform-app[data-layout="app"]:is([data-scrolled]:not([data-tab-root]), [data-tab-root][data-title-collapsed]) .platform-header {
  box-shadow: inset 0 -1px var(--line);
}
@media (max-width: 959.98px) and (pointer: coarse) {
  /* The collapsed bar keeps the avatar and bug where the large-title row had them. */
  .platform-app[data-layout="app"] .platform-account-avatar-host {
    padding: 0;
  }
  /* The account sheet's band: exactly 56px, the grabber above it, 16px to the first group. */
  .platform-app[data-layout="app"] dialog.platform-route-sheet--account > .platform-dialog-heading {
    box-sizing: border-box;
    height: 56px;
    min-height: 56px;
    padding-block: 0;
  }
  :is(.platform-app[data-layout="app"] dialog.platform-dialog.platform-sheet, dialog.platform-dialog.platform-sheet[data-detents]) > .platform-sheet-grabber {
    z-index: 3;
  }
}
/* The focus page's report float: on the page gutter, 16px above the main button. */
.platform-app .platform-report-float {
  right: max(var(--page-gutter), env(safe-area-inset-right));
}
.platform-app[data-presentation="focus"] {
  --platform-report-float-lift: 84px;
}
/* The platform's own pages keep the app's reading column from 960px, as Home does; below it they fill the width
   (AZCO-519). */
:is(.platform-account-hub, .platform-account-page, .platform-settings) {
  box-sizing: border-box;
  width: 100%;
  margin-inline: auto;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :is(.platform-account-hub, .platform-account-page, .platform-settings) {
    max-width: var(--platform-app-column, 720px);
  }
}
/* A page inside the account sheet puts Back and its title in the sheet's band. */
dialog.platform-route-sheet--account[open] {
  display: flex;
  flex-direction: column;
}
dialog.platform-route-sheet--account > .platform-dialog-heading {
  position: sticky;
  flex: none;
}
/* The dialog owns scrolling. Fill its remaining height without shrinking long
   pages or making hidden navigation levels participate in layout. */
.platform-sheet-page,
.platform-takeover-level:not([hidden]) {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-width: 0;
}
.platform-sheet-back {
  position: absolute;
  left: max(var(--platform-bar-inset, 8px), env(safe-area-inset-left));
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--platform-bar-tint);
  transform: translateY(-50%);
  cursor: pointer;
}
.platform-sheet-title {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: calc(100% - 200px);
  overflow: hidden;
  color: var(--ink);
  font: 500 min(var(--ui-text-body), 23px)/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
/* Header → content (AZCO-560): a pushed level pads by the one gap token, as pages do under their header; the Account
   root keeps its profile header's own spacing. */
.platform-takeover-level[data-takeover-level]:not([data-takeover-level="0"]) {
  padding-top: var(--platform-header-gap);
}
.platform-profile-photo {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font: 500 30px/1 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif); /* type-scale: allow a fixed-size glyph in its circle */
}
/* A row's unread dot keeps its distance from the label. */
.platform-list-label .platform-list-attention {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

/* AZCO-519: on phones the bar holds the page's first action beside "…" when it has three or more. */
.platform-page-actions[data-split="primary"] > :first-child {
  display: none;
}

/* ===== AZCO-519: the phone's bar ===== */
/* Round buttons on both sides: 44px circles that fill their targets (AZCO-585), on the same frosted surface as Back,
   their outer edges on --platform-bar-inset. The right side is one surface: a circle for one button, one 44px capsule
   for two or more, as Safari's bottom bar buttons. */
.platform-app[data-layout="app"] {
  /* Retired alias of --ui-bar-disc (AZCO-556), removed after 0.58. */
  --platform-round: var(--ui-bar-disc);
}
/* The round surface holds the page's actions only; the home page's avatar is its own disc, with no ring. The frosted
   surface is a ::before behind the buttons, as Back's disc (AZCO-658): a backdrop-filter on the pill itself made it the
   containing block and, in WebKit, the backdrop root of the "…" menu inside it, which then opened against the 44px
   pill, off-screen, rather than the screen. z-index: 0 keeps the surface inside the pill's own stacking context. */
.platform-app[data-layout="app"] .platform-header-action-group:has(.platform-page-action-host[data-has-actions], .platform-header-tools > *) {
  position: relative;
  z-index: 0;
  height: var(--ui-bar-disc);
  margin-right: 0;
  border-radius: var(--ui-radius-control);
}
.platform-app[data-layout="app"] .platform-header-action-group:has(.platform-page-action-host[data-has-actions], .platform-header-tools > *)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--platform-back-surface);
  box-shadow: var(--platform-back-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  pointer-events: none;
}
.platform-app[data-layout="app"] .platform-header-trailing :is(.platform-page-action-host, .platform-page-actions) {
  min-height: 0;
  gap: 0;
}
.platform-app[data-layout="app"] .platform-header-trailing .ui-toolbar-icon.platform-header-action {
  width: var(--ui-bar-disc);
  height: var(--ui-bar-disc);
  min-height: 0;
  border-radius: var(--ui-radius-control);
}
/* The app's icon, as a circle, opens the sidebar on phones; Back replaces it below a destination. */
.platform-app[data-layout="app"] .platform-header > .platform-navigation-unit > .platform-sidebar-expand,
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand {
  grid-area: 1 / 1;
  justify-self: start;
  width: 44px;
  height: 44px;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand svg {
  width: var(--ui-bar-disc);
  height: var(--ui-bar-disc);
  border-radius: var(--ui-radius-control);
}
.platform-app[data-layout="app"] .platform-header:has(.platform-page-back) .platform-sidebar-expand {
  display: none;
}
/* The phone's sidebar: a modal dialog over the page from the leading edge (AZCO-528, ruling 14); the dialog places
   it, and the sidebar fills it. Its top row is the app bar's row: it clears the status bar as the bar does. */
.platform-app[data-layout="app"] .platform-wide-sidebar[data-overlay] {
  padding-top: env(safe-area-inset-top);
  /* The profile sits right above the home indicator, as in ChatGPT's and Claude's drawers (AZCO-524). */
  padding-bottom: calc(env(safe-area-inset-bottom) + 6px);
}
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand {
  display: grid;
  place-items: center;
}
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand svg {
  display: block;
  flex: none;
  min-width: var(--ui-bar-disc);
  max-width: var(--ui-bar-disc);
}
/* AZCO-871: tab headers retain the same opaque canvas before and after scrolling. */
.platform-app[data-layout="app"][data-tab-root]:not([data-scrolled]) .platform-header {
  border-bottom-color: transparent;
  background: var(--ui-canvas, #f4f5f0);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ===== AZCO-519: the floating Report button ===== */
/* The bar model's floating Report shortcut rests above the tabs. */
.platform-app[data-layout="app"][data-nav="bottombar"]:not([data-presentation="focus"]) {
  /* 14px above the bar (AZCO-557): the bar's whole height less the safe area the float already clears. */
  --platform-report-float-lift: calc(var(--platform-tabbar-overlap) - env(safe-area-inset-bottom) + 14px);
}
/* The floating Report button is the bar disc (03-header.css), the same at every size. */

/* ===== AZCO-519: the bar's background, the phone's sidebar, list pages ===== */
/* The phone's bar stays the page's own background, with no hairline or tint when the page scrolls. */
.platform-app[data-layout="app"] .platform-header,
.platform-app[data-layout="app"]:is([data-scrolled]:not([data-tab-root]), [data-tab-root][data-title-collapsed], [data-scrolled], [data-title-collapsed]) .platform-header {
  border-bottom-color: transparent;
  background: var(--ui-canvas, #f4f5f0);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* AZCO-871: opt-in phone scroll cues. Reuse the existing page/pane scroll signal; painting never changes layout.
   Opaque surfaces keep content readable. Desktop and inline/pane headers retain their own treatment. */
.platform-app[data-layout="app"][data-header-scroll-treatment="divider"][data-tabs-scrolled] .platform-header {
  box-shadow: inset 0 -2px var(--line);
}
.platform-app[data-layout="app"][data-header-scroll-treatment="surface"][data-tabs-scrolled] .platform-header {
  background: var(--ui-surface-subtle);
}
/* The phone's drawer (AZCO-519, AZCO-524; a modal dialog since AZCO-528, ruling 14). With `navigation.drawer:
   "push"` (the default) the page slides aside by the drawer's width, header and tab bar with it, as one piece, and the
   drawer sits in the space it leaves; the dialog's backdrop dims the pushed strip, which a tap closes. With
   `"overlay"` the page stays put and the drawer opens over it, raised, under the full scrim. Both open over 300ms with
   the sheet's ease and close over 240ms with the exit curve; with reduced motion nothing moves, and the drawer and
   its scrim fade (150ms). */
.platform-app[data-layout="app"][data-nav="sidebar"] {
  --platform-drawer-width: min(320px, 84vw);
}
.platform-app[data-layout="app"][data-nav="sidebar"] .platform-app-layout > :not(.platform-wide-sidebar, .platform-drawer) {
  transition: transform 240ms var(--ui-ease-exit);
}
.platform-app[data-layout="app"][data-drawer="open"]:not([data-drawer-mode="overlay"]) .platform-app-layout > :not(.platform-wide-sidebar, .platform-drawer) {
  transform: translateX(var(--platform-drawer-width));
  transition: transform 300ms var(--ui-ease-sheet);
}
.platform-app[data-layout="app"] dialog.platform-drawer {
  width: var(--platform-drawer-width, min(320px, 84vw));
  animation: platform-drawer-in 300ms var(--ui-ease-sheet);
}
.platform-app[data-layout="app"] dialog.platform-drawer::backdrop {
  animation: platform-drawer-scrim-in 300ms var(--ui-ease-sheet);
}
.platform-app[data-layout="app"] dialog.platform-drawer[data-closing] {
  animation: platform-drawer-out 240ms var(--ui-ease-exit) forwards;
}
.platform-app[data-layout="app"] dialog.platform-drawer[data-closing]::backdrop {
  animation: platform-drawer-scrim-out 240ms var(--ui-ease-exit) forwards;
}
/* Overlay: the full scrim, and the drawer raised over the page with its trailing corners rounded. */
.platform-app[data-layout="app"] dialog.platform-drawer[data-mode="overlay"]::backdrop {
  background: var(--ui-backdrop);
}
.platform-app[data-layout="app"] dialog.platform-drawer[data-mode="overlay"] > .platform-wide-sidebar {
  border-right: 0;
  border-radius: 0 var(--ui-radius-sheet) var(--ui-radius-sheet) 0;
  background: var(--ui-surface-elevated);
  box-shadow: var(--ui-shadow-overlay, 0 16px 48px #1a2e2430);
}
@keyframes platform-drawer-in {
  from {
    transform: translateX(-100%);
  }
}
@keyframes platform-drawer-out {
  to {
    transform: translateX(-100%);
  }
}
@keyframes platform-drawer-scrim-in {
  from {
    opacity: 0;
  }
}
@keyframes platform-drawer-scrim-out {
  to {
    opacity: 0;
  }
}
@keyframes platform-drawer-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes platform-drawer-fade-out {
  to {
    opacity: 0;
  }
}
/* The wordmark as a button (the drawer's, and the sidebar open over the page: their name and icon close them) is a
   plain button in every layout (AZCO-639): in the desktop layout it had kept the browser's border and grey fill. */
.platform-app button.platform-wide-wordmark {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The drawer's top: the app's name and icon close it (AZCO-524), where the hamburger was (AZCO-528, ruling 15): the
   app bar's row, 44px high, with the icon's leading edge on the hamburger's. */
.platform-app[data-layout="app"] dialog.platform-drawer .platform-wide-sidebar-top {
  height: var(--platform-app-bar-height, 44px);
  padding-left: 0;
}
.platform-app[data-layout="app"] dialog.platform-drawer button.platform-drawer-close {
  min-height: 44px;
  /* The icon's leading edge on the open button's (the header's padding plus the gutter less 8px), less the drawer's
     own 8px padding. */
  margin-left: max(0px, calc(var(--page-gutter) - 8px));
  padding-inline: 0 8px;
  border-radius: var(--ui-radius-control);
}
/* The drawer's rows, Report a problem among them, and the profile share one size: the phone's body text, 20px
   icons and 44px rows (AZCO-524). The profile keeps a 48px target. The current row is the fill alone, never bolder
   (owner decision 10). */
.platform-app[data-layout="app"] .platform-wide-sidebar[data-overlay] :is(.platform-wide-row, .platform-wide-profile, button.platform-wide-profile) {
  box-sizing: border-box;
  min-height: 44px;
  font: 400 var(--platform-body)/1.3 var(--platform-ui-font);
}
.platform-app[data-layout="app"] .platform-wide-sidebar[data-overlay] :is(.platform-wide-row, .platform-wide-report) svg {
  width: 20px;
  height: 20px;
}
.platform-app[data-layout="app"] .platform-wide-sidebar[data-overlay] :is(.platform-wide-profile, button.platform-wide-profile) {
  min-height: 48px;
  padding-block: 6px;
}
@media (prefers-reduced-motion: reduce) {
  .platform-app[data-layout="app"][data-nav="sidebar"] .platform-app-layout > :not(.platform-wide-sidebar, .platform-drawer),
  .platform-app[data-layout="app"][data-drawer="open"]:not([data-drawer-mode="overlay"]) .platform-app-layout > :not(.platform-wide-sidebar, .platform-drawer) {
    transition: none;
  }
  .platform-app[data-layout="app"] dialog.platform-drawer,
  .platform-app[data-layout="app"] dialog.platform-drawer::backdrop {
    animation: platform-drawer-fade-in 150ms ease-out;
  }
  .platform-app[data-layout="app"] dialog.platform-drawer[data-closing],
  .platform-app[data-layout="app"] dialog.platform-drawer[data-closing]::backdrop {
    animation: platform-drawer-fade-out 150ms ease-out forwards;
  }
}
/* List pages: no pane. The table sits on the page, under the band (platform-ui's ListBand: the count, a filter
   pill and, for a paged table, the pager), rules between rows. */
.platform-app .platform-list.ui-list-surface {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.platform-app .platform-list-footnote {
  padding-top: 12px;
}
/* The phone's header avatar (account.phone "header", AZCO-527): at the bar's trailing edge on every destination's own
   page, with either phone model. The shell renders it only there; a pushed page's Back hides it here too, so it never
   shows for a frame before the page registers its Back. Alone it is its own circle, the size of the app's icon
   opposite and of the bar's discs (44px, AZCO-585), its edge on --platform-bar-inset. */
.platform-app[data-layout="app"] .platform-header .platform-account-avatar-host {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
}
.platform-app[data-layout="app"] .platform-header:has(.platform-page-back) .platform-account-avatar-host {
  display: none;
}
.platform-app[data-layout="app"] .platform-header .platform-account-avatar {
  width: 44px;
  height: 44px;
}
.platform-app[data-layout="app"] .platform-header .platform-account-avatar-face {
  width: var(--ui-bar-disc);
  height: var(--ui-bar-disc);
  box-shadow: none;
  font: 500 14px/1 var(--platform-ui-font); /* type-scale: allow a fixed-size glyph in its circle */
  letter-spacing: 0;
}
/* AZCO-751: the avatar is its own disc, separated from the equally tall actions surface. */
.platform-app[data-layout="app"] .platform-header-trailing {
  gap: 8px;
}
.platform-app[data-layout="app"] .platform-header-action-group {
  --platform-pill-slot: 44px;
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  height: var(--platform-pill-slot);
  padding: 0;
}
.platform-app[data-layout="app"] .platform-header-action-group:not(:has(.platform-page-action-host[data-has-actions], .platform-header-tools > *)) {
  display: none;
}
.platform-app[data-layout="app"] .platform-header-action-group :is(.platform-header-actions-host, .platform-header-actions-slot, .platform-page-action-host, .platform-page-actions, .platform-header-tools) {
  gap: 0;
  margin: 0;
  padding: 0;
}
.platform-app[data-layout="app"] .platform-header-action-group :is(.platform-page-action-host > .ui-toolbar-icon.platform-header-action, .platform-page-actions:not([data-split]) > .ui-toolbar-icon.platform-header-action, .platform-header-tools > *) {
  box-sizing: border-box;
  width: var(--platform-pill-slot);
  min-width: var(--platform-pill-slot);
  height: var(--platform-pill-slot);
  margin: 0;
  padding: 0;
}
/* The column header keeps platform-ui's opaque record header (the canvas), so rows scroll under it when it sticks. */
.platform-app .platform-list.ui-list-surface {
  flex: none;
  min-height: 0;
}

/* ===== AZCO-519: the app's icon on phones ===== */
/* The app's icon keeps its own shape everywhere: the rounded square, at the bar discs' 44px on phones (AZCO-585), its
   edge on --platform-bar-inset. */
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand svg,
.platform-app[data-layout="app"] .platform-header .platform-home-mark svg {
  width: var(--ui-bar-disc);
  height: var(--ui-bar-disc);
  min-width: var(--ui-bar-disc);
  max-width: var(--ui-bar-disc);
  border-radius: 0;
  box-shadow: none;
}
.platform-app[data-layout="app"] .platform-header .platform-brand-home {
  width: var(--ui-bar-target);
  padding: 0;
}
.platform-app[data-layout="app"] .platform-header .platform-home-mark {
  grid-area: 1 / 1;
  justify-self: start;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: 0;
}

/* ===== AZCO-519: no fixed width below 960px =====
   Below 960px a page fills the width inside the gutters, at every width up to the desktop breakpoint (a tablet
   in portrait included); the reading column is a desktop measure. The account page's is set from 960px above. */
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-app[data-layout="app"] .platform-page {
    max-width: none;
  }
}

/* The account takeover (AZCO-524). On phones the account sheet fills the screen, over the tab bar, square and
   without a grabber; its band clears the status bar and holds the round Back (from the second level), the pushed
   page's centred title and actions, and the round close. Pages pushed inside it slide like the page area's. */
.platform-takeover-band:not([hidden]),
.platform-takeover-title,
.platform-takeover-title-slot {
  display: contents;
}
/* The band's trailing group (AZCO-560): the pushed page's actions, then the ×, last. With an action it is one pill (the
   header's rule, §3.1): the disc's fill and ringless shadow, equal 44px slots with no gap, and no disc on the × inside
   it. A lone × keeps its own disc. */
.platform-takeover-trailing {
  display: flex;
  align-items: center;
  flex: none;
  margin-inline-start: auto;
}
.platform-takeover-actions-host {
  display: contents;
}
.platform-takeover-actions {
  display: flex;
  align-items: center;
}
.platform-takeover-actions:is(:empty, [hidden]) {
  display: none;
}
/* Its frost is a ::before too, so a pushed page's "…" menu inside it opens against the screen (AZCO-658). */
.platform-takeover-trailing[data-pill] {
  position: relative;
  z-index: 0;
  height: var(--ui-bar-disc);
  margin-inline-end: calc((var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
  border-radius: var(--ui-radius-control);
}
.platform-takeover-trailing[data-pill]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--platform-back-surface);
  box-shadow: var(--platform-back-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  pointer-events: none;
}
.platform-takeover-trailing[data-pill] .platform-takeover-actions {
  gap: 0;
}
.platform-takeover-trailing[data-pill] :is(.platform-takeover-actions .ui-toolbar-icon.platform-header-action, button.platform-sheet-close) {
  box-sizing: border-box;
  width: var(--ui-bar-target);
  min-width: var(--ui-bar-target);
  height: var(--ui-bar-disc);
  min-height: 0;
  margin: 0;
  padding: 0;
}
:is(dialog.platform-dialog .platform-takeover-trailing[data-pill] button.platform-dialog-done.platform-sheet-close)::before {
  content: none;
}
.platform-takeover-level {
  position: relative;
  background: var(--ui-canvas);
}
.platform-takeover-copy {
  position: absolute;
  margin: 0;
  background: var(--ui-canvas);
  pointer-events: none;
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-app[data-layout="app"] dialog.platform-dialog.platform-route-sheet--takeover {
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .platform-app[data-layout="app"] dialog.platform-dialog.platform-route-sheet--takeover > .platform-sheet-grabber {
    display: none;
  }
  .platform-app[data-layout="app"] dialog.platform-route-sheet--takeover > .platform-dialog-heading {
    height: calc(56px + env(safe-area-inset-top));
    min-height: calc(56px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .platform-app[data-layout="app"] dialog.platform-route-sheet--takeover > .platform-dialog-heading :is(.platform-sheet-back, .platform-sheet-title) {
    top: calc(50% + env(safe-area-inset-top) / 2);
  }
}

/* The hamburger (navigation.menuButton, AZCO-524): three lines in the same 44px target. On phones it is a bar disc, as
   Back is (AZCO-556): the raised surface with a soft shadow and no ring. */
.platform-app .platform-sidebar-expand[data-glyph="hamburger"] {
  color: var(--ink);
}
/* The disc is the button's ::before, the lines a plain 24px svg on it, as Back's (AZCO-568). */
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand[data-glyph="hamburger"] {
  position: relative;
}
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand[data-glyph="hamburger"]::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--ui-bar-disc);
  height: var(--ui-bar-disc);
  margin: auto;
  border-radius: var(--ui-radius-control);
  background: var(--platform-back-surface);
  box-shadow: var(--platform-back-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.platform-app[data-layout="app"] .platform-header .platform-sidebar-expand[data-glyph="hamburger"] svg {
  position: relative;
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  overflow: visible;
}
/* The phone's Home with the hamburger keeps its branding (AZCO-524): the app's name centred on the bar, as any title
   is, at the bar's text size in the brand's typeface, truncating rather than colliding. */
.platform-home-wordmark {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
}
.platform-home-wordmark .platform-wordmark {
  min-width: 0;
  max-width: 100%;
}
.platform-home-wordmark .platform-wordmark-name {
  /* The bar's title size, which stops growing at a 23px body (AZCO-526). */
  font-size: min(var(--platform-body), 23px);
  font-weight: 500;
}
/* Centred on the bar itself, not in the space beside the button, so it stays put with or without an avatar; a long
   name truncates within the same margin on both sides. */
.platform-app[data-layout="app"] .platform-header .platform-compact-title:has(.platform-home-wordmark) {
  /* Out of the grid, so the header, not the title's grid area, places it. */
  grid-area: auto;
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--platform-app-bar-height, 64px) / 2);
  left: 50%;
  max-width: calc(100% - 2 * (max(0px, calc(var(--page-gutter) - 8px)) + 52px));
  translate: -50% -50%;
}

/* ===== AZCO-649: the tab bar's compact size and floating capsule ===== */
/* Compact (owner decision, round 4): five tabs below 360px keep the pill's shape a step smaller. 10px labels (the
   one exception to the 11px type floor, docs/design.md, matching Apple's 10pt tab labels) and 17px glyphs in a 20px
   row, the You tab's initials with them; the pill is at least 60 × 48, 6px above and below and 13px each side. The
   capsule moves to 8px from the screen's sides, its pills 4px inside it. */
@media (max-width: 359.98px) {
  .platform-tabs[data-tab-count="5"] {
    --platform-tabbar-height: 48px;
    --platform-tab-pill-padding-inline: 13px;
    --platform-tab-pill-min-width: 60px;
    --platform-tab-pill-width: 60px;
    --platform-tab-icon-row: 20px;
    --platform-tab-icon-size: 17px;
    --platform-tab-face-size: 17px;
    --platform-tab-label: 400 min(calc(var(--platform-body) * 10 / 17), calc(23px * 10 / 17))/1.2 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
    --platform-tabbar-float-inset: 8px;
    --platform-tabbar-float-padding: 4px;
  }
  .platform-tabs[data-tab-count="5"] .platform-account-tab-face {
    font-size: 8px; /* type-scale: allow a fixed-size glyph in its circle */
  }
}
/* The floating capsule (navigation.tabBar): `floating`, or `auto` in an installed app, which is a Home Screen web
   app (display-mode: standalone, below, so the first paint is right), iOS's navigator.standalone, or a native wrapper:
   both set data-installed on the root before the app renders. The capsule sits over the page, which scrolls beneath
   it and keeps room at its foot so its last content clears it; menus, notices and Report's floating button clear it
   too (--platform-tabbar-overlap). Its rules are written twice: for the attributes, and for the media query. */
.platform-app[data-layout="app"][data-tab-bar="floating"],
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"] {
  --platform-scroll-clearance: var(--platform-tabbar-overlap);
  --platform-tabbar-overlap: calc(max(var(--platform-tabbar-float-bottom), env(safe-area-inset-bottom)) + 2 * var(--platform-tabbar-float-padding) + var(--platform-tabbar-height));
}
.platform-app[data-layout="app"][data-tab-bar="floating"] .platform-tabs,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs {
  grid-area: main;
  align-self: end;
  margin: 0 max(var(--platform-tabbar-float-inset), env(safe-area-inset-right)) max(var(--platform-tabbar-float-bottom), env(safe-area-inset-bottom)) max(var(--platform-tabbar-float-inset), env(safe-area-inset-left));
  padding: var(--platform-tabbar-float-padding);
  border: 0;
  border-radius: calc(var(--ui-radius-control) + var(--platform-tabbar-float-padding)); /* radius: shape concentric with the pills inside it */
  background: var(--platform-tabbar-float-background);
  box-shadow:
    0 0 0 0.5px var(--platform-tabbar-float-edge),
    var(--platform-tabbar-float-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-presentation="full-bleed"]) .platform-main,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-presentation="full-bleed"]) .platform-main {
  padding-bottom: 0;
  --platform-main-end-space: max(calc(var(--page-gutter) + var(--platform-tabbar-overlap)), var(--platform-report-scroll-clearance, 0px));
}
/* AZCO-901: Safari 26 can omit a flex scroller's end padding from scrollHeight
   (WebKit 316902). A non-shrinking child makes the clearance real scrollable content.
   Keep the expanded clearance when tabs condense, so scrolling cannot erase its own range.
   Full-bleed pages own their scroll area and must not receive this spacer. */
.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-presentation="full-bleed"]) .platform-main::after,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-presentation="full-bleed"]) .platform-main::after {
  content: "";
  display: block;
  flex: 0 0 var(--platform-main-end-space);
  pointer-events: none;
}
@media (display-mode: standalone) {
  .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-presentation="full-bleed"]) .platform-main::after {
    content: "";
    display: block;
    flex: 0 0 var(--platform-main-end-space);
    pointer-events: none;
  }
}
/* menuFrame() adds the bottom safe area (at least 8px) to this plain length: the capsule's 24px offset and its 62px,
   which more than clears it over a home indicator, where the capsule rests 34px up. */
html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="floating"] .platform-tabs),
html.platform-document[data-installed]:has(.platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs) {
  --ui-menu-frame-bottom: 86px;
}
@media (display-mode: standalone) {
  .platform-app[data-layout="app"][data-tab-bar="auto"] {
    --platform-scroll-clearance: var(--platform-tabbar-overlap);
  --platform-tabbar-overlap: calc(max(var(--platform-tabbar-float-bottom), env(safe-area-inset-bottom)) + 2 * var(--platform-tabbar-float-padding) + var(--platform-tabbar-height));
  }
  .platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs {
    grid-area: main;
    align-self: end;
    margin: 0 max(var(--platform-tabbar-float-inset), env(safe-area-inset-right)) max(var(--platform-tabbar-float-bottom), env(safe-area-inset-bottom)) max(var(--platform-tabbar-float-inset), env(safe-area-inset-left));
    padding: var(--platform-tabbar-float-padding);
    border: 0;
    border-radius: calc(var(--ui-radius-control) + var(--platform-tabbar-float-padding)); /* radius: shape concentric with the pills inside it */
    background: var(--platform-tabbar-float-background);
    box-shadow:
      0 0 0 0.5px var(--platform-tabbar-float-edge),
      var(--platform-tabbar-float-shadow);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
  .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-presentation="full-bleed"]) .platform-main {
    padding-bottom: 0;
    --platform-main-end-space: max(calc(var(--page-gutter) + var(--platform-tabbar-overlap)), var(--platform-report-scroll-clearance, 0px));
  }
  html.platform-document:has(.platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs) {
    --ui-menu-frame-bottom: 86px;
  }
}
/* Forced colours drop the shadow: the capsule keeps a visible edge. */
@media (forced-colors: active) {
  .platform-app[data-layout="app"][data-tab-bar="floating"] .platform-tabs,
  :root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs {
    outline: 1px solid CanvasText;
  }
}
@media (forced-colors: active) and (display-mode: standalone) {
  .platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs {
    outline: 1px solid CanvasText;
  }
}

/* AZCO-729: icon-only tabs keep 44px touch targets and accessible link names. */
.platform-app[data-tab-labels="hidden"] .platform-tabs {
  --platform-tabbar-height: 44px;
  --platform-tab-pill-min-width: 44px;
  --platform-tab-pill-padding-inline: 10px;
}
.platform-app[data-tab-labels="hidden"] .platform-tab-label { display: none; }

.platform-app[data-layout="app"][data-tab-bar="floating"] .platform-tabs,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs {
  display: flex;
  justify-content: space-between;
  gap: var(--platform-tabbar-float-padding);
  justify-self: center;
  width: calc(100% - max(var(--platform-tabbar-float-inset), env(safe-area-inset-left)) - max(var(--platform-tabbar-float-inset), env(safe-area-inset-right)));
}
.platform-app[data-layout="app"][data-tab-bar="floating"][data-tabs-scrolled] .platform-tabs,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tabs {
  background: var(--platform-tabbar-float-compact-background);
  -webkit-backdrop-filter: saturate(180%) blur(2px);
  backdrop-filter: saturate(180%) blur(2px);
  width: min(calc(100% - max(var(--platform-tabbar-float-inset), env(safe-area-inset-left)) - max(var(--platform-tabbar-float-inset), env(safe-area-inset-right))), calc(var(--platform-tab-count) * 52px + 2 * var(--platform-tabbar-float-padding)));
}
.platform-app[data-layout="app"][data-tab-bar="floating"][data-tabs-scrolled] .platform-tab,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tab {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  gap: 0;
}
.platform-app[data-layout="app"][data-tab-bar="floating"][data-tabs-scrolled] .platform-tab-label,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tab-label { max-height: 0; opacity: 0; }
/* Keep the expanded page padding while compact, avoiding a scroll-height feedback loop near the foot. */
.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-tab-root]),
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) {
  --platform-tabbar-overlap: 0px;
  --platform-scroll-clearance: env(safe-area-inset-bottom);
  --platform-report-float-lift: 0px;
}
.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-tab-root]) .platform-tabs,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) .platform-tabs { display: none; }
.platform-app[data-layout="app"][data-tab-bar="floating"]:not([data-tab-root]):not([data-presentation="full-bleed"]) .platform-main,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]):not([data-presentation="full-bleed"]) .platform-main {
  padding-bottom: 0;
  --platform-main-end-space: max(calc(var(--page-gutter) + env(safe-area-inset-bottom)), var(--platform-report-scroll-clearance, 0px));
}

@media (display-mode: standalone) {

.platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tabs {
  display: flex;
  justify-content: space-between;
  gap: var(--platform-tabbar-float-padding);
  justify-self: center;
  width: calc(100% - max(var(--platform-tabbar-float-inset), env(safe-area-inset-left)) - max(var(--platform-tabbar-float-inset), env(safe-area-inset-right)));
}
.platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tabs {
  background: var(--platform-tabbar-float-compact-background);
  -webkit-backdrop-filter: saturate(180%) blur(2px);
  backdrop-filter: saturate(180%) blur(2px);
  width: min(calc(100% - max(var(--platform-tabbar-float-inset), env(safe-area-inset-left)) - max(var(--platform-tabbar-float-inset), env(safe-area-inset-right))), calc(var(--platform-tab-count) * 52px + 2 * var(--platform-tabbar-float-padding)));
}
.platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tab {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  gap: 0;
}
.platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tab-label { max-height: 0; opacity: 0; }
/* Keep the expanded page padding while compact, avoiding a scroll-height feedback loop near the foot. */
.platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) {
  --platform-tabbar-overlap: 0px;
  --platform-scroll-clearance: env(safe-area-inset-bottom);
  --platform-report-float-lift: 0px;
}
.platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]) .platform-tabs { display: none; }
.platform-app[data-layout="app"][data-tab-bar="auto"]:not([data-tab-root]):not([data-presentation="full-bleed"]) .platform-main {
  padding-bottom: 0;
  --platform-main-end-space: max(calc(var(--page-gutter) + env(safe-area-inset-bottom)), var(--platform-report-scroll-clearance, 0px));
}
}
/* Keep labels in layout while their line closes, so height and width settle together (AZCO-729).
   An explicit labels-off preference still uses display:none above. */
.platform-app .platform-tab-label {
  max-height: 1.2em;
  opacity: 1;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .platform-app .platform-tabs {
    transition: width 300ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 300ms ease, backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease;
  }
  .platform-app[data-layout="app"] .platform-tab {
    /* Match the pressed-state rule above so its transition longhands cannot override this resize. */
    transition: min-height 300ms cubic-bezier(0.22, 1, 0.36, 1),
      padding 300ms cubic-bezier(0.22, 1, 0.36, 1),
      gap 300ms cubic-bezier(0.22, 1, 0.36, 1),
      flex-basis 300ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms ease;
  }
  .platform-app .platform-tab-label {
    transition: max-height 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
  }
}

/* Equal outer padding: spare space belongs between tabs, never outside the end pills (AZCO-729). */
.platform-app[data-layout="app"][data-tab-bar="floating"] .platform-tab,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tab {
  flex: 0 1 var(--platform-tab-pill-width);
  min-width: 44px;
}
.platform-app[data-layout="app"][data-tab-bar="floating"][data-tabs-scrolled] .platform-tab,
:root[data-installed] .platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tab { flex-basis: 44px; }
@media (display-mode: standalone) {
  .platform-app[data-layout="app"][data-tab-bar="auto"] .platform-tab {
    flex: 0 1 var(--platform-tab-pill-width);
    min-width: 44px;
  }
  .platform-app[data-layout="app"][data-tab-bar="auto"][data-tabs-scrolled] .platform-tab { flex-basis: 44px; }
}

/* AZCO-788: full-bleed pages own their scroll viewport. Put capsule clearance
   inside that viewport, never on the non-scrolling shell around it. Consumers
   can use this class on the scrolling pane or its final content wrapper. */
.platform-app .platform-scroll-clearance {
  padding-bottom: max(calc(var(--platform-scroll-gutter, var(--page-gutter)) + var(--platform-scroll-clearance, 0px)), var(--platform-report-scroll-clearance, 0px));
}

/* AZCO-710: reserve the floating report disc's whole reach at the scroll end.
   Include it in each navigation padding formula rather than overriding the bar
   clearance. Full-bleed pages apply the same value in their scroll owner above. */
.platform-app[data-layout="app"][data-report-float] {
  --platform-report-scroll-clearance: calc(max(12px, env(safe-area-inset-bottom)) + var(--ui-bar-disc, 44px) + 12px + var(--platform-report-float-lift, 0px));
}

/* A pinned action footer already owns the bottom lane. useFloatClearance lifts
   the disc above it; reserving that disc again would lift the footer itself. */
.platform-app[data-layout="app"] .platform-main:has(.ui-sticky-action-bar, .ui-step-screen-foot) {
  --platform-report-scroll-clearance: 0px;
}

/* 10-install-guide.css */
/* InstallGuide and InstallCard (AZCO-655): numbered steps for adding the app to
   the home screen, each with a picture of the control to tap in a spotlight (a
   screenshot on iOS 26, a drawing elsewhere); and the card that offers it, a
   full-column content card. They
   take the surrounding Modal's, Sheet's or page's type, and the theme's
   colours through tokens, so both follow light and dark. */
.platform-install-guide {
  display: grid;
  gap: 16px;
}
.platform-install-button {
  justify-self: stretch;
}
.platform-install-or,
.platform-install-note {
  margin: 0;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-footnote, 13px);
}
.platform-install-steps {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: platform-install-step;
}
.platform-install-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  align-items: baseline;
  counter-increment: platform-install-step;
}
.platform-install-step::before {
  content: counter(platform-install-step);
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%; /* radius: shape step number disc */
  background: var(--ui-accent-soft);
  color: var(--control-primary);
  font-size: var(--ui-text-footnote, 13px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  align-self: start;
}
.platform-install-step > * {
  grid-column: 2;
}
.platform-install-step-says {
  font-size: var(--ui-text-body, 17px);
  line-height: 1.35;
}
.platform-install-step-note {
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-footnote, 13px);
  line-height: 1.4;
}
.platform-install-label {
  font-weight: 500;
}
.platform-install-glyph {
  display: inline-block;
  flex: none;
  vertical-align: -2px;
}

/* The pictures: a small drawing of the browser's control, at most 300px wide. */
.platform-install-pic {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  min-height: 44px;
  padding: 6px 10px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-card-compact, 10px);
  background: var(--ui-surface-card-elevated, var(--ui-card));
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-footnote, 13px);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.platform-install-pic-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  min-height: 30px;
  padding: 0 8px;
  box-sizing: border-box;
  color: var(--ink);
  font-weight: 500;
}
/* Where to tap, in the drawings: the control in a spotlight, the rest of the picture dimmed, as in the screenshots,
   never a filled button. The picture clips the shade. */
.platform-install-pic-ring,
.platform-install-pic-row {
  border-radius: var(--ui-radius-control, 999px);
  background: var(--ui-surface-card-elevated, var(--ui-card));
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 999px rgb(0 0 0 / 0.32);
}
.platform-install-pic--bar .platform-install-pic-address {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 6px 12px;
  border-radius: var(--ui-radius-control, 999px);
  background: var(--ui-canvas);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-install-pic--toolbar {
  justify-content: space-between;
  padding-inline: 16px;
}
.platform-install-pic--menu {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 6px;
}
.platform-install-pic-faint {
  height: 8px;
  margin-inline: 10px;
  border-radius: var(--ui-radius-small, 4px);
  background: var(--line);
  opacity: 0.6;
}
.platform-install-pic-row {
  border-radius: var(--ui-radius-highlight, 8px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px;
  color: var(--ink);
  font-weight: 500;
}
.platform-install-pic-row--leading {
  justify-content: flex-start;
}
.platform-install-pic--confirm {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.platform-install-pic-confirm-bar,
.platform-install-pic-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.platform-install-pic-close {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%; /* radius: shape close button */
  background: var(--ui-canvas);
  color: var(--ink);
}
.platform-install-pic-confirm-title {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-install-pic-confirm-app {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.platform-install-pic-confirm-name {
  display: grid;
  min-width: 0;
  color: var(--ink);
}
.platform-install-pic-confirm-name .platform-install-pic-muted {
  color: var(--ui-ink-secondary, var(--muted));
}
.platform-install-pic-confirm-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-install-pic-toggle-row {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.platform-install-pic-toggle {
  position: relative;
  flex: none;
  width: 36px;
  height: 22px;
  border-radius: 11px; /* radius: shape switch track */
  background: var(--control-primary);
}
.platform-install-pic-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%; /* radius: shape switch knob */
  background: var(--ui-card);
}
.platform-install-pic--home {
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 16px 6px;
}
.platform-install-pic-tile {
  width: 36px;
  height: 36px;
  border-radius: 9px; /* radius: container home-screen icon */
  background: var(--line);
  opacity: 0.6;
}
.platform-install-pic-app {
  display: grid;
  justify-items: center;
  gap: 2px;
}
/* The app's icon in the spotlight, as every other step's target: the edge follows the icon's own corners, and its
   name stays above the shade. */
.platform-install-pic-app-icon {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 0;
}
.platform-install-pic-app-icon > .platform-install-app-icon {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 999px rgb(0 0 0 / 0.32);
}
.platform-install-pic-app-name {
  position: relative;
  z-index: 2;
  max-width: 64px;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--ui-text-caption2, 11px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The app's home-screen icon: its own image, or its first letter on the accent. */
.platform-install-app-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  overflow: hidden;
  border-radius: 22%; /* radius: container home-screen icon */
  background: var(--control-primary);
  color: var(--control-on-primary, #fff);
  font-weight: 500;
}
.platform-install-app-icon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* InstallCard: a full-column content card (a grouped card: --ui-radius-group, no border). */
.platform-install-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px 16px;
  align-items: center;
  padding: 16px;
  border-radius: var(--ui-radius-group, 16px);
  background: var(--ui-card);
}
.platform-install-card-text {
  display: grid;
  gap: 2px;
}
.platform-install-card-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--ui-text-headline, 17px);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}
.platform-install-card-reason {
  margin: 0;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-subhead, 15px);
  line-height: 1.35;
}
.platform-install-card-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.platform-install-card-actions > .ui-button--primary {
  flex: 1 1 auto;
}
@media (min-width: 600px) {
  .platform-install-card {
    grid-template-columns: 56px minmax(0, 1fr) auto;
  }
  .platform-install-card-actions {
    grid-column: auto;
    flex-wrap: nowrap;
  }
}
@media (prefers-contrast: more) {
  .platform-install-card,
  .platform-install-pic {
    border: 1px solid var(--ui-field-border-strong, CanvasText);
  }
}

/* iPhone Safari's bottom bar (iOS 26 and later), and the share sheet's round actions with View More. */
.platform-install-pic--safari {
  justify-content: space-between;
}
.platform-install-pic--actions {
  justify-content: space-between;
  align-items: flex-start;
  padding-block: 8px;
}
.platform-install-pic-action {
  width: 30px;
  height: 30px;
  border-radius: 50%; /* radius: shape round share-sheet action */
  background: var(--line);
  opacity: 0.6;
}
.platform-install-pic-more {
  display: grid;
  justify-items: center;
  gap: 2px;
  font-size: var(--ui-text-caption2, 11px);
}

/* Chrome's choice after Install and create shortcut. */
.platform-install-pic--choice {
  justify-content: flex-end;
  gap: 16px;
}

/* Where there are no steps, the one line on why is the guide's whole content: body text, not a footnote. */
.platform-install-guide > .platform-install-note:only-child {
  color: var(--ink);
  font-size: var(--ui-text-body, 17px);
  line-height: 1.4;
}

/* InstallPrompt: the app's icon and one line on why, then the steps (or one tap). */
.platform-install-prompt-body {
  display: grid;
  gap: 20px;
}
.platform-install-prompt-lead {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

/* A screenshot of the real control (iOS 26): the rest dimmed, the target in a spotlight.
   The screenshots are Safari's light appearance, so the band over the add sheet's app row keeps its colours. */
.platform-install-shot {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-card-compact, 10px);
  background: #f2f2f7;
  isolation: isolate;
}
.platform-install-shot-image {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}
.platform-install-shot-app {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline: 4%;
  background: #fff;
  color: #000;
}
.platform-install-shot-app-name {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: var(--ui-text-caption, 12px);
}
.platform-install-shot-app-name > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-install-shot-app-host {
  color: #8e8e93;
}
.platform-install-shot-address {
  position: absolute;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: rgb(254 254 253);
  color: #000;
  font-size: var(--ui-text-caption, 12px);
  white-space: nowrap;
}
.platform-install-shot-spot {
  position: absolute;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 999px rgb(0 0 0 / 0.42);
  pointer-events: none;
}
.platform-install-shot-spot--row {
  border-radius: 12px; /* radius: shape spotlight on a menu row */
}
.platform-install-shot-spot--pill,
.platform-install-shot-spot--circle {
  border-radius: 999px; /* radius: shape spotlight on a round control */
}

/* 10-invite-section.css */
/* InviteSection (AZCO-456): an account's invite link, places, who joined, and
   New link or Turn off, as ListSection rows. Themed through the
   --platform-invite-* and --platform-code-font tokens (01-tokens.css). */
.platform-invite-section {
  display: contents;
}
.platform-invite-section .platform-invite-code {
  font-family: var(--platform-code-font);
}
.platform-invite-error {
  color: var(--platform-invite-error, var(--control-danger));
}

/* 10-list-switch-row.css */
/* ListSwitchRow (AZCO-390): platform-ui's SwitchRow inside a ListSection takes
   the section's row (10-lists.css): its height, insets, label type and icon
   tile, and the separator inset past an icon. The --platform-list-* tokens
   fall back to the same values. */
.platform-list-switch-item > .ui-switch-row {
  min-height: var(--platform-list-row-height, 48px);
  padding: 10px 12px 10px 16px;
  font: var(--platform-list-label, 400 var(--ui-text-callout)/1.375 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif));
}
.platform-list-switch-item > .ui-switch-row .ui-switch-row-icon {
  background: var(--platform-list-icon-background, var(--ui-surface-choice));
  color: var(--platform-list-icon-color, var(--control-primary));
}
.platform-list-item:has(.ui-switch-row-icon) + .platform-list-item::before,
.platform-list-item + .platform-list-item:has(.ui-switch-row-icon)::before {
  left: 60px;
}

/* 10-lists.css */
/* Grouped lists (AZCO-397), like iOS Settings: ListSection and ListRow, the
   platform's account and Settings pages (AZCO-500), the app layout's
   Administration index, and its stacked admin rows below 960px.
   Themed through the --platform-list-* tokens (01-tokens.css). */
.platform-list-section {
  margin: 0 0 24px;
}
.platform-list-section-title {
  margin: 0 0 6px;
  padding: 0 16px;
  color: var(--muted);
  font: var(--platform-list-heading);
  letter-spacing: normal;
}
.platform-list-section-footer {
  margin: 6px 0 0;
  padding: 0 16px;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
}
.platform-list-section-description {
  margin: 0 0 var(--platform-section-heading-gap);
}
.platform-list-group {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
/* The grouped surface, shared with Section's group (10-page-section.css, AZCO-664): phones' inset filled card. */
.platform-list-group,
.platform-page-section-group {
  border-radius: var(--platform-list-radius); /* radius: container a grouped card */
  background: var(--platform-list-background);
}
.platform-list-item {
  position: relative;
}
/* Separators start at the text, as on iOS. */
.platform-list-item + .platform-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  border-top: 1px solid var(--platform-list-separator);
}
.platform-list-item:has(.platform-list-icon) + .platform-list-item::before,
.platform-list-item + .platform-list-item:has(.platform-list-icon)::before {
  left: 60px;
}
.platform-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--platform-list-row-height);
  margin: 0;
  padding: 10px 12px 10px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: var(--platform-list-label);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 120ms ease;
}
.platform-list-row[data-static] {
  cursor: default;
}
.platform-list-row:disabled {
  color: var(--control-disabled-ink);
  cursor: default;
}
.platform-list-row[data-destructive] {
  color: var(--platform-list-destructive);
}
@media (hover: hover) and (pointer: fine) {
  /* Never over the current row (AZCO-555): it keeps its current fill. */
  .platform-list-row:is(a, button):not(:disabled, [aria-current="page"]):hover {
    background: var(--ui-surface-row-hover);
  }
}
/* A grey fill means selected or current only (AZCO-524): a pressed row dips its opacity. */
.platform-list-row:is(a, button):not(:disabled):active {
  opacity: var(--ui-pressed-opacity);
  transition-duration: 0ms;
}
/* Keyboard focus is the accent highlight (11-focus.css). */
.platform-list-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px; /* radius: shape an icon tile */
  background: var(--platform-list-icon-background);
  color: var(--platform-list-icon-color);
}
.platform-list-avatar {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font: 500 13px/1 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif); /* type-scale: allow a fixed-size glyph in its circle */
}
.platform-list-icon:has(> .platform-list-avatar) {
  border-radius: var(--ui-radius-round);
}
/* ListRow's avatar slot (AZCO-407): a round tile of the icon's size that the
   avatar fills with its own colours, such as platform-ui's Avatar. A larger
   Avatar is held to the tile. */
.platform-list-icon[data-avatar] {
  overflow: hidden;
  border-radius: var(--ui-radius-round);
  background: transparent;
  color: inherit;
}
.platform-list-icon[data-avatar] > :is(.ui-avatar, img, svg) {
  box-sizing: border-box;
  max-width: 100%;
  max-height: 100%;
}
.platform-list-icon[data-avatar] > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.platform-list-text {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}
.platform-list-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.platform-list-detail {
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
  overflow-wrap: anywhere;
}
.platform-list-value {
  flex: none;
  max-width: 40%;
  color: var(--muted);
  font-size: var(--ui-text-subhead);
  text-align: right;
}
.platform-list-status {
  flex: none;
  max-width: 45%;
}
.platform-list-status .ui-status-pill {
  white-space: nowrap;
}
.platform-list-chevron {
  flex: none;
  margin-right: -2px;
  color: var(--muted);
  opacity: 0.7;
}
/* A busy action row (AZCO-438): it keeps focus and its ink, and shows a spinner at the trailing edge. */
.platform-list-row[aria-busy="true"] {
  cursor: progress;
}
.platform-list-spinner {
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid var(--platform-list-icon-color);
  border-right-color: transparent;
  border-radius: var(--ui-radius-round);
  animation: platform-list-spin 800ms linear infinite;
}
@keyframes platform-list-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .platform-list-spinner {
    animation-duration: 2400ms;
  }
}

/* The Administration index and the app's settings tab: sections on the canvas. */
.platform-admin-index > .platform-list-section:last-child {
  margin-bottom: 8px;
}

/* The phone's navigation, below 960px: lists take their natural height
   and the page scrolls, as phones already do (04-page.css). */
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-app[data-layout="app"] .platform-list {
    flex: none;
    min-height: 0;
  }
  .platform-app[data-layout="app"] .platform-list .ui-table-scroll {
    flex: none;
    overflow-y: visible;
  }
  /* The table toolbar wraps its paging under the title, close to it. */
  .platform-app[data-layout="app"] .platform-list .ui-table-toolbar {
    min-height: 0;
    row-gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-list-row {
    transition: none;
  }
}

/* A group whose rows all render nothing (Settings for nobody, Administration for a member) draws no card. */
.platform-list-section:has(> .platform-list-group:empty) {
  display: none;
}

/* AZCO-519, after ChatGPT's account sheet: plain line icons on
   every row (no tinted tiles), taller rows, rounder groups, and group titles
   that read as quiet labels. */
:root {
  --platform-list-radius: 22px; /* radius: container a grouped card */
  --platform-list-row-height: 56px;
}
.platform-list-icon:not([data-avatar]) {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.platform-list-icon:not([data-avatar]) svg {
  width: 22px;
  height: 22px;
}
.platform-list-row {
  gap: 14px;
  padding-left: 18px;
  padding-right: 16px;
}
.platform-list-label {
  font-size: var(--ui-text-body);
  line-height: 1.294;
}
.platform-list-value {
  max-width: 60%;
}
.platform-list-section-title {
  padding: 0 20px;
  font: 400 var(--ui-text-subhead)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
.platform-list-section-footer {
  padding: 0 20px;
}
.platform-list-row[data-destructive] .platform-list-icon {
  color: inherit;
}
/* The pick-one row: the whole row opens its menu (platform-ui's Menu). Phones show the value and ⌃⌄; the desktop's
   single ▾ (.platform-select-chevron) shows from 960px only (the end of this file). */
.platform-select-row {
  cursor: pointer;
}
.platform-select-chevron {
  display: none;
}
.platform-select-chevrons {
  flex: none;
  margin-left: -6px;
  color: var(--muted);
}
/* The profile header. */
.platform-profile-header {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 4px 0 24px;
}
.platform-profile-face {
  position: relative;
  display: grid;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-round);
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.platform-profile-name {
  color: var(--ink);
  font: 500 var(--ui-text-title3)/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
/* The sheet's × and the takeover's ‹ (AZCO-556): bar discs, 44px (--ui-bar-disc) on the raised surface with a soft
   shadow and no ring, in 44px targets (--ui-bar-target). The disc is the button's ::before and the glyph a plain svg
   on it (AZCO-568): WebKit drew a padded, filtered svg as a broken stroke with no disc. */
dialog.platform-dialog button.platform-dialog-done.platform-sheet-close,
.platform-sheet-back {
  display: grid;
  place-items: center;
  width: var(--ui-bar-target);
  min-width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ink);
  opacity: 1;
}
dialog.platform-dialog button.platform-dialog-done.platform-sheet-close {
  position: relative;
}
:is(dialog.platform-dialog button.platform-dialog-done.platform-sheet-close, .platform-sheet-back)::before {
  content: "";
  position: absolute;
  inset: calc((var(--ui-bar-target) - var(--ui-bar-disc)) / 2);
  border-radius: var(--ui-radius-control);
  background: var(--platform-back-surface);
  box-shadow: var(--platform-back-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
:is(dialog.platform-dialog button.platform-dialog-done.platform-sheet-close, .platform-sheet-back) > svg {
  position: relative;
  width: var(--ui-bar-glyph);
  height: var(--ui-bar-glyph);
  overflow: visible;
}
/* From 960px a sheet's × is a plain glyph (AZCO-556). */
@media (min-width: 960px), (not (pointer: coarse)) {
  :is(dialog.platform-dialog button.platform-dialog-done.platform-sheet-close, .platform-sheet-back) {
    color: var(--ui-bar-ink);
  }
  :is(dialog.platform-dialog button.platform-dialog-done.platform-sheet-close, .platform-sheet-back)::before {
    content: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  :is(dialog.platform-dialog button.platform-sheet-close, .platform-sheet-back):hover {
    color: var(--ink);
  }
}
/* From 960px, the header controls' row-hover fill (AZCO-580). */
@media (min-width: 960px), (not (pointer: coarse)) {
  @media (hover: hover) and (pointer: fine) {
    :is(dialog.platform-dialog button.platform-sheet-close, .platform-sheet-back):hover {
      background: var(--ui-surface-row-hover);
    }
  }
}
:where(.platform-app) .ui-switch-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
:where(.platform-app) .ui-switch-row-icon svg {
  width: 22px;
  height: 22px;
}
:where(.platform-app) .ui-switch-row {
  padding-left: 18px;
}
.platform-list-group .ui-switch-row .ui-switch-row-icon {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.platform-list-group .ui-switch-row {
  gap: 14px;
  padding-left: 18px;
}

/* After ChatGPT's sheet, measured at 390pt: 48px rows, 17px labels, 20px
   icons 16px inside the card, labels from 47px, 16px semibold group titles
   on the same 16px inset, 20px corners. */
:root {
  --platform-list-radius: 20px; /* radius: container a grouped card */
  --platform-list-row-height: 48px;
}
.platform-list-row,
.platform-list-group .ui-switch-row {
  gap: 11px;
  padding: 8px 16px;
}
.platform-list-icon:not([data-avatar]),
.platform-list-group .ui-switch-row .ui-switch-row-icon {
  width: 20px;
  height: 20px;
}
.platform-list-icon:not([data-avatar]) svg,
.platform-list-group .ui-switch-row .ui-switch-row-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}
.platform-list-section-title {
  margin-bottom: 10px;
  padding: 0 16px;
  font: 400 var(--ui-text-callout)/1.25 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
.platform-list-section-footer {
  padding: 0 16px;
}
.platform-profile-photo {
  width: 72px;
  height: 72px;
  font-size: 26px; /* type-scale: allow a fixed-size glyph in its circle */
}
.platform-profile-name {
  font: 500 var(--ui-text-body)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
.platform-list-section {
  margin-bottom: 30px;
}
/* Separators start under the label, as ChatGPT's do. */
.platform-list-item:has(.platform-list-icon, .ui-switch-row-icon) + .platform-list-item::before,
.platform-list-item + .platform-list-item:has(.platform-list-icon, .ui-switch-row-icon)::before {
  left: 47px;
}
/* Cards clip again (AZCO-528): a row's menu is a popover in the top layer. The first and last rows still round
   their own corners for hover and press fills. */
.platform-list-item:first-child > :is(.platform-list-row, .ui-switch-row) {
  border-top-left-radius: var(--platform-list-radius); /* radius: container the grouped card's corner */
  border-top-right-radius: var(--platform-list-radius); /* radius: container the grouped card's corner */
}
.platform-list-item:last-child > :is(.platform-list-row, .ui-switch-row) {
  border-bottom-left-radius: var(--platform-list-radius); /* radius: container the grouped card's corner */
  border-bottom-right-radius: var(--platform-list-radius); /* radius: container the grouped card's corner */
}
/* After ChatGPT (AZCO-519): values at the label's size, small
   light chevrons, rounder cards, slightly taller rows and lighter separators. */
:root {
  --platform-list-radius: 24px; /* radius: container a grouped card */
  --platform-list-row-height: 50px;
}
.platform-list-value {
  font-size: var(--ui-text-body);
  line-height: 1.294;
}
.platform-list-chevron {
  width: 14px;
  height: 14px;
  margin-left: 2px;
  opacity: 0.45;
  stroke-width: 2.5;
}
.platform-select-chevrons {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.platform-list-item + .platform-list-item::before {
  border-top-color: color-mix(in srgb, var(--platform-list-separator) 70%, transparent);
}
.platform-list-section-title {
  font-weight: 400;
  letter-spacing: -0.005em;
}
/* Secondary text in lists: --platform-list-secondary, platform-ui's secondary ink (01-tokens.css). */
.platform-list-section-title,
.platform-list-value,
.platform-list-section-footer,
.platform-select-chevrons {
  color: var(--platform-list-secondary);
}


/* ===== AZCO-519: the account page's type, after ChatGPT's and Claude's settings =====
   One scale, set last so the earlier passes above no longer decide it. Phones read at the system's body size,
   --platform-body (17px, or the person's iOS Text Size, AZCO-523), with group titles and notes in
   proportion; from 960px (the account dialog, Settings, Administration) at a desktop 15px, as
   desktop settings do. The device's interface face throughout (--platform-ui-font), tracked a little tighter
   at display sizes. */
:root {
  --platform-list-label: 400 var(--platform-body)/1.3 var(--platform-ui-font);
  --platform-list-heading: 400 calc(var(--platform-body) * 15 / 17)/1.33 var(--platform-ui-font);
}
/* The account page and Settings sit on the grouped canvas, as a page and as the sheet or dialog. */
.platform-app:has(.platform-main :is(.platform-account-hub, .platform-settings)),
dialog.platform-dialog.platform-route-sheet--account,
.platform-app[data-layout="app"] dialog.platform-dialog.platform-route-sheet--account {
  --ui-canvas: var(--platform-grouped-canvas);
  background: var(--ui-canvas);
}
:is(.platform-list-section, .platform-list-group, .platform-account-hub, .platform-settings) {
  font-family: var(--platform-ui-font);
}
.platform-list-section-title {
  margin-bottom: var(--platform-section-heading-gap);
  color: var(--muted);
  font: var(--platform-list-heading);
  letter-spacing: 0;
}
:is(.platform-list-label, .platform-list-value) {
  font-family: var(--platform-ui-font);
  font-size: var(--platform-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
:is(.platform-list-detail, .platform-list-section-footer),
.platform-list-group .ui-switch-row-description {
  font-family: var(--platform-ui-font);
  font-size: calc(var(--platform-body) * 13 / 17);
  line-height: 1.38;
  letter-spacing: 0;
}
.platform-list-group .ui-switch-row-label {
  font: 400 var(--platform-body)/1.3 var(--platform-ui-font);
  letter-spacing: -0.01em;
}
.platform-sheet-title {
  font: 500 var(--platform-body)/1.3 var(--platform-ui-font);
  letter-spacing: -0.01em;
}
/* Who is signed in: a 72px photo with light initials, the name at the body size in semibold. */
.platform-profile-header {
  gap: 10px;
  margin: 0 0 32px;
}
.platform-profile-photo {
  width: 72px;
  height: 72px;
  font: 400 calc(var(--platform-body) * 28 / 17)/1 var(--platform-ui-font);
  letter-spacing: 0;
}
.platform-profile-name {
  font: 500 var(--platform-body)/1.3 var(--platform-ui-font);
  letter-spacing: -0.01em;
}
.platform-list-section {
  margin-bottom: var(--platform-section-gap);
}
@media (min-width: 960px), (not (pointer: coarse)) {
  :root {
    --platform-list-row-height: 44px;
    --platform-list-label: 400 var(--ui-text-callout)/1.333 var(--platform-ui-font);
    /* A group label is a heading above its group (AZCO-491, after ChatGPT's settings): headline, 15px, medium, in ink. */
    --platform-list-heading: 500 var(--ui-text-headline)/1.333 var(--platform-ui-font);
  }
  .platform-list-section-title {
    color: var(--ink);
  }
  :is(.platform-list-label, .platform-list-value),
  .platform-list-group .ui-switch-row-label {
    font-size: var(--ui-text-callout);
    line-height: 1.333;
    letter-spacing: -0.005em;
  }
  .platform-list-icon:not([data-avatar]) svg,
  .platform-list-group .ui-switch-row .ui-switch-row-icon svg {
    width: 18px;
    height: 18px;
  }
  /* Ample room between groups: --platform-section-gap (32px) from a group's foot (or its note) to the next heading. */
  .platform-list-section {
    margin-bottom: var(--platform-section-gap);
  }
  .platform-profile-header {
    margin-bottom: 24px;
  }
  .platform-profile-photo {
    width: 60px;
    height: 60px;
    font-size: 23px; /* type-scale: allow a fixed-size glyph in its circle */
  }
  .platform-profile-name {
    font-size: var(--ui-text-callout);
    line-height: 1.333;
  }
}

/* ===== AZCO-528: rows wrap, never clip =====
   A row's label, detail and value wrap at every Text Size (the review found them clipped at a 23px body and in Users'
   detail line). The text and the value share a line while they fit; when they don't, the value moves under the label,
   left-aligned: the large Text Size layout of iOS's Settings. Rows grow from their minimum height. A long token breaks
   at its natural points (ListRow adds them with platform-ui's softBreaks) and inside a word only when nothing else
   fits. */
.platform-list-body {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  min-width: 0;
}
.platform-list-body > .platform-list-text {
  flex: 1 1 auto;
  max-width: 100%;
}
.platform-list-label,
.platform-list-detail,
.platform-list-value {
  overflow: visible;
  overflow-wrap: break-word;
  text-overflow: clip;
  white-space: normal;
}
.platform-list-label {
  display: flex;
}
.platform-list-body > .platform-list-value {
  flex: 0 1 auto;
  max-width: 100%;
  text-align: start;
}
:is(.platform-list-section, .platform-account-hub) :is(.ui-switch-row-label, .ui-switch-row-description) {
  overflow-wrap: break-word;
  white-space: normal;
}
.platform-list-row,
.platform-list-group .ui-switch-row {
  height: auto;
  min-height: var(--platform-list-row-height);
}

/* ===== AZCO-528: record lists on phones are plain and full-bleed =====
   Users' and the report lists' stacked rows (StackedList), like platform-ui's DataTable below 960px: no card, rows
   across the full width with their content at the page gutter (--ui-list-bleed, set below), hairlines from the text to
   the trailing edge, none above the first row or after the last, and 64px rows whose meta wraps. */
.platform-stacked-list {
  margin-inline: calc(-1 * var(--ui-list-bleed, 0px));
  border-radius: 0; /* radius: container a plain list has no card */
  background: transparent;
  overflow: visible;
}
.platform-stacked-list .platform-list-item > .platform-list-row {
  min-height: var(--ui-height-record-row, 64px);
  padding: 10px var(--ui-list-bleed, 0px);
  border-radius: 0; /* radius: container plain rows fill the full width */
}
.platform-stacked-list .platform-list-item + .platform-list-item::before {
  left: var(--ui-list-bleed, 0px);
  right: 0;
}
/* A record row's supporting line is subhead in secondary ink, at most two lines (AZCO-562): never smaller than meta,
   never longer than the row. Grouped ListSection rows keep footnote details. */
.platform-stacked-list .platform-list-detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--ui-ink-secondary);
  font-size: calc(var(--platform-body) * 15 / 17);
  line-height: 1.33;
}
/* From 960px it is a secondary line: footnote, 13px (AZCO-491). */
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-stacked-list .platform-list-detail {
    font-size: var(--ui-text-footnote);
  }
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-app[data-layout="app"] :is(.platform-main, dialog.platform-route-sheet--account) {
    --ui-list-bleed: var(--page-gutter);
  }
}
/* Where a paged table's band and column header stick from 960px (platform-ui's --ui-sticky-top): right under the
   page header. The page scrolls in .platform-main, whose top padding is the gutter, so they reach up through it. */
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-app[data-layout="frame"] .platform-main {
    --ui-sticky-top: calc(-1 * var(--platform-header-gap));
  }
}
/* Tabs over a list stand 12px above its band (AZCO-528); a list page's tabs keep their gap otherwise. */
.platform-list-page > :is(.ui-tabs, .ui-section-links, .ui-segmented):has(~ .ui-list-band, ~ * .ui-list-band) {
  margin-bottom: var(--ui-list-band-gap-before);
}
/* Lists span the page from 960px (AZCO-542, AZCO-543, AZCO-544): a list page has no width cap, and its list reaches
   both edges of the page area, so rows' highlights and rules run full width, while the band's text, the first and last
   cells and stacked rows' text sit on the shared content edge (platform-ui's --ui-list-edge and --ui-list-bleed). The
   tab strip's first label sits on the edge too: its first item has no leading padding (tabs.css, AZCO-577). */
.platform-app .platform-main > .platform-page.platform-list-page {
  max-width: none;
}
/* Only the unframed platform lists bleed (AZCO-642): an app's own bordered ui-list-surface on a full-width page stays an
   inset card, its border inside the pane's gutters. */
.platform-app[data-layout="frame"] .platform-list-page :is(.platform-list.ui-list-surface, .platform-stacked-list):not(.platform-split-host[data-split="on"] *) {
  --ui-list-edge: var(--platform-content-edge);
  --ui-list-bleed: var(--platform-content-edge);
  margin-inline: calc(-1 * var(--platform-content-edge));
}
.platform-app[data-layout="frame"] .platform-list-page .ui-list-surface .platform-stacked-list:not(.platform-split-host[data-split="on"] *) {
  margin-inline: 0;
}

/* ===== AZCO-491: desktop grouped lists, after ChatGPT's settings =====
   From 960px, the same in every template: a grouped list (ListSection, ListRow, select and toggle rows, InviteSection,
   the account rows and identity row, Administration's grouped lists) is a bordered group on the page's own canvas: no
   fill, a 1px --line edge, and the template's card corners, which follow controls.shape (--ui-radius-card for capsule,
   --ui-radius-card-compact for rectangular). Separators are full-width hairlines inset 16px on both sides, never
   indented to the text. Rows that act take the row hover fill (above), clipped to the group's corners; static and
   toggle rows don't hover. A select row's value is the desktop compact select trigger (AZCO-590): the control height, the value and
   one ▾, shape-aware field corners, borderless. Phones keep the inset grouped cards. Record lists (StackedList) are plain. */
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-list-group:not(.platform-stacked-list),
  .platform-page-section-group {
    --platform-list-radius: var(--ui-radius-card, 16px); /* radius: container a grouped card */
    box-sizing: border-box;
    border: 1px solid var(--line);
    background: transparent;
  }
  :root[data-ui-shape="rectangular"] .platform-list-group:not(.platform-stacked-list),
  :root[data-ui-shape="rectangular"] .platform-page-section-group,
  :root[data-ui-shape="hybrid"] .platform-list-group:not(.platform-stacked-list),
  :root[data-ui-shape="hybrid"] .platform-page-section-group {
    --platform-list-radius: var(--ui-radius-card-compact, 10px); /* radius: container a grouped card */
  }
  /* The first and last rows' fills meet the edge's inner corner. */
  .platform-list-group:not(.platform-stacked-list) > .platform-list-item:first-child > :is(.platform-list-row, .ui-switch-row) {
    border-top-left-radius: calc(var(--platform-list-radius) - 1px); /* radius: container the grouped card's inner corner */
    border-top-right-radius: calc(var(--platform-list-radius) - 1px); /* radius: container the grouped card's inner corner */
  }
  .platform-list-group:not(.platform-stacked-list) > .platform-list-item:last-child > :is(.platform-list-row, .ui-switch-row) {
    border-bottom-left-radius: calc(var(--platform-list-radius) - 1px); /* radius: container the grouped card's inner corner */
    border-bottom-right-radius: calc(var(--platform-list-radius) - 1px); /* radius: container the grouped card's inner corner */
  }
  .platform-list-group:not(.platform-stacked-list) > .platform-list-item + .platform-list-item::before {
    right: 16px;
    left: 16px;
    border-top-color: var(--platform-list-separator);
  }
  /* The select row's value: the compact trigger, its ▾ on the row's trailing text edge. */
  .platform-select-row .platform-select-chevrons {
    display: none;
  }
  .platform-select-row .platform-select-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    min-height: var(--ui-height-control, 36px);
    margin-inline-end: -6px;
    padding-inline: 10px 6px;
    border-radius: var(--ui-radius-field);
    color: var(--ink);
  }
  .platform-select-row .platform-select-chevron {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--platform-list-secondary);
  }
}

/* Group labels and footnotes sit flush with the grouped card's edge from 960px (AZCO-635), so a fixed page's title,
   its group labels and its cards share one edge; phones keep their inset, as iOS's grouped lists do. */
.platform-app[data-layout="frame"] :is(.platform-list-section-title, .platform-list-section-footer) {
  padding-inline: 0;
}

/* 10-navigation.css */
/* The title menu is platform-ui's Menu (kind "navigation", AZCO-528), with its own styles. The shell's menus render
   right after their trigger, so inside a heading or a row they must not inherit its weight, tracking or wrapping. */
.ui-menu:is(.platform-title-menu, .platform-account-menu, .platform-wide-more-menu, .platform-page-actions) {
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
  white-space: normal;
}

/* AZCO-519: the app bar from 960px (data-wide): the sidebar or the top bar. */
/* Sidebar: a persistent 264px column (--platform-sidebar-width); the header and page move right of it. */
.platform-wide-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  width: var(--platform-sidebar-width);
  padding: 8px 8px 12px;
  /* No border (owner, after ChatGPT): the chrome's tint alone sets the sidebar apart from the page. */
  background: var(--ui-surface-subtle, var(--ui-canvas, #f4f5f0));
}
.platform-app[data-wide="sidebar"]:not([data-presentation="focus"]) :is(.platform-header, .platform-main, .platform-staging-banner) {
  margin-left: var(--platform-sidebar-width);
}
.platform-wide-sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  /* The wordmark's mark centred at x 30, where the rail's app icon is (AZCO-539). */
  padding-left: 4px;
}
.platform-wide-sidebar-tools {
  display: flex;
  align-items: center;
}
.platform-wide-wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.platform-wide-sidebar-nav,
.platform-wide-sidebar-footer {
  display: grid;
  gap: 2px;
}
/* On a short window the destinations scroll between the pinned top and foot, so Report a problem and the profile stay
   in reach (AZCO-625); the open sidebar, the rail and the drawer alike. */
.platform-wide-sidebar > :not(.platform-wide-sidebar-nav) {
  flex-shrink: 0;
}
.platform-wide-sidebar-nav {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  scrollbar-width: thin;
}
.platform-wide-sidebar-footer {
  margin-top: auto;
}
/* Navigation rows (AZCO-491, after ChatGPT's settings rows): the sidebar's and the Settings column's, Report a
   problem and your profile among them, are --platform-nav-row-height (36px) tall, 2px apart, their highlight inset
   8px from the column's edges (its padding) with shape-aware corners (AZCO-748): capsule pills or rectangular highlights. */
.platform-wide-row {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: var(--platform-nav-row-height);
  padding: 0 12px;
  border-radius: var(--ui-radius-navigation);
  color: var(--ink);
  font: 400 var(--ui-text-callout)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  text-decoration: none;
}
.platform-wide-row svg {
  width: 20px;
  height: 20px;
}
.platform-wide-row-icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
}
/* A badged destination in the rail (AZCO-539): a dot on its icon, top-trailing, as on the tab bar. */
.platform-wide-row-attention {
  position: absolute;
  top: -2px;
  right: -3px;
  box-shadow: 0 0 0 2px var(--platform-chrome);
}
@media (hover: hover) and (pointer: fine) {
  .platform-wide-row:not([aria-current]):hover {
    background: var(--ui-surface-row-hover);
  }
}
/* Current: the fill alone, never bolder (AZCO-528, owner decision 10). */
.platform-wide-row[aria-current] {
  background: var(--ui-fill-current);
}
.platform-wide-row--quiet {
  color: var(--muted);
}
.platform-wide-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: var(--platform-nav-row-height);
  /* The face's centre at x 30, where the rail's is (AZCO-539): 8 + 8 + 14. */
  padding: 0 12px 0 8px;
  border-radius: var(--ui-radius-navigation);
  color: var(--ink);
  font: 400 var(--ui-text-callout)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  text-decoration: none;
}
.platform-wide-sidebar-footer + .platform-wide-profile,
.platform-wide-sidebar-nav + .platform-wide-profile {
  margin-top: auto;
}
@media (hover: hover) and (pointer: fine) {
  .platform-wide-profile:hover {
    background: var(--ui-surface-row-hover);
  }
}
.platform-wide-profile-face {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ui-radius-round);
  background: var(--control-primary);
  color: var(--control-on-primary);
  font: 500 12px/1 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif); /* type-scale: allow a fixed-size glyph in its circle */
  position: relative;
}
/* The account's dot on the profile, as on the You tab. */
.platform-wide-profile-attention {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--platform-account-attention, var(--control-primary));
  box-shadow: 0 0 0 2px var(--ui-surface-subtle, var(--ui-canvas, #f4f5f0));
}
/* Top tabs: links beside the brand, the current one highlighted. */
.platform-wide-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 12px;
}
.platform-wide-tab {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--ui-radius-navigation);
  color: var(--ui-ink-secondary);
  font: 400 var(--ui-text-subhead)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  text-decoration: none;
}
/* The top bar's links are navigation rows (AZCO-528, addendum §2.9): a faint hover except on the current one, which
   is the current fill at the same weight. */
@media (hover: hover) and (pointer: fine) {
  .platform-wide-tab:not([aria-current], [data-current]):hover {
    background: var(--ui-surface-row-hover);
    color: var(--ink);
  }
}
.platform-wide-tab[aria-current] {
  background: var(--ui-fill-current);
  color: var(--ink);
}
.platform-wide-tab:active {
  opacity: var(--ui-pressed-opacity);
}
/* The avatar in a desktop header: the same 36px face as on phones. */
.platform-app[data-wide] .platform-header .platform-account-avatar .platform-account-avatar-face {
  width: 36px;
  height: 36px;
}
/* In the new layouts the page title is plain text, not a raised tile. */
.platform-app[data-wide] .platform-page-context {
  background: transparent;
  box-shadow: none;
}
.platform-app[data-wide] .platform-page-context .platform-page-title {
  font: var(--platform-title);
}

/* AZCO-519: the sidebar's states and the top bar's links. */
.platform-app[data-wide="sidebar"]:not([data-presentation="focus"])[data-sidebar="rail"] :is(.platform-header, .platform-main, .platform-staging-banner) {
  margin-left: var(--platform-rail-width);
}
.platform-app[data-wide="sidebar"]:not([data-presentation="focus"])[data-sidebar="hidden"] :is(.platform-header, .platform-main, .platform-staging-banner) {
  margin-left: 0;
}
/* AZCO-539: collapsing changes labels and width, never row heights or icon centres.
   Square rail targets use the same 36px navigation height as the open sidebar and stay centred at x 30.
   Shape-aware corners preserve circles in capsule mode; the app mark retains its separate 44px target. */
.platform-wide-sidebar[data-state="rail"] {
  width: var(--platform-rail-width);
  align-items: stretch;
  padding-inline: 8px;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-top {
  justify-content: flex-start;
  padding-left: 0;
  height: 48px;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-top .platform-sidebar-expand {
  width: var(--ui-bar-target);
  height: var(--ui-bar-target);
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-tools {
  width: 100%;
  justify-content: flex-start;
  padding-inline-start: 0;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-nav {
  width: 100%;
}
/* A hidden heading keeps its height, never its width. */
.platform-wide-sidebar[data-state="rail"] :is(.platform-wide-sidebar-nav, .platform-wide-sidebar-group) {
  grid-template-columns: minmax(0, 1fr);
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-heading {
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-row {
  flex-direction: row;
  gap: 0;
  width: var(--platform-nav-row-height);
  min-height: var(--platform-nav-row-height);
  margin-inline: auto;
  justify-content: center;
  border-radius: var(--ui-radius-control);
  padding: 0;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-profile {
  min-height: var(--platform-nav-row-height);
  border-radius: var(--ui-radius-control);
  justify-content: center;
  width: var(--platform-nav-row-height);
  margin-inline: auto;
  padding: 0;
}
/* Report shares the rail's square target and shape. */
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-tools .platform-report-action {
  width: var(--platform-nav-row-height);
  min-width: 0;
  height: var(--platform-nav-row-height);
  min-height: 0;
  margin-inline: auto;
  border-radius: var(--ui-radius-control);
}
/* The icon-only Report button must match its labelled row, rather than the top bar's 24px glyph. */
.platform-wide-sidebar[data-state="rail"] .platform-report-action svg {
  width: 20px;
  height: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-tools .platform-report-action:hover {
    background: var(--ui-surface-row-hover);
  }
}
.platform-sidebar-toggle {
  display: grid;
  place-items: center;
  width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
/* A bar glyph (AZCO-556): the ink darkens on hover, with no fill. */
@media (hover: hover) and (pointer: fine) {
  .platform-sidebar-toggle:hover {
    color: var(--ink);
  }
}
.platform-app[data-sidebar="hidden"] .platform-header .platform-sidebar-toggle {
  margin-right: 4px;
}
.platform-header:has(.platform-wide-tabs[data-at-destination]) .platform-page-host {
  display: none;
}
.platform-app[data-wide="topbar"] .platform-wide-wordmark {
  margin-right: 8px;
}
.platform-wide-sidebar-actions {
  display: flex;
  align-items: center;
}

/* AZCO-519: the foot holds what a top bar puts at its right end; the app's icon expands a collapsed sidebar. */
.platform-wide-sidebar-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin-top: auto;
}
.platform-wide-sidebar-foot .platform-wide-sidebar-tools {
  padding-inline-start: 2px;
}
.platform-wide-sidebar-foot .platform-wide-profile {
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 0;
}
.platform-wide-sidebar-foot .platform-wide-profile-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-wide-sidebar-footer + .platform-wide-sidebar-foot {
  margin-top: 8px;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-foot {
  align-items: flex-start;
  gap: 2px;
  width: 100%;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-foot .platform-wide-profile {
  flex: none;
}
.platform-sidebar-expand {
  display: grid;
  place-items: center;
  width: var(--ui-bar-target);
  height: var(--ui-bar-target);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .platform-sidebar-expand[data-glyph="hamburger"]:hover {
    color: var(--ink);
  }
}

/* AZCO-519: one place for page buttons, one rule for bar backgrounds.
   App bars (tab bar, sidebar, rail, the top app bar) always wear --platform-chrome;
   the tab bar and top bar have a hairline on the edge facing the page, the sidebar and rail only their tint. Page headers (Back, the title,
   the page's buttons) share the page's canvas, and take the chrome only when
   content scrolls beneath them. */
:root {
  --platform-chrome: var(--ui-surface-subtle, color-mix(in srgb, var(--ui-canvas, #f4f5f0) 94%, var(--ink)));
  --platform-bar-background: color-mix(in srgb, var(--platform-chrome) 88%, transparent);
}
.platform-tabs {
  background: var(--platform-chrome);
}
.platform-wide-sidebar {
  background: var(--platform-chrome);
}
/* The shared left edge from 960px (AZCO-542, AZCO-554): the header and the page pad by --platform-content-edge, and the
   page starts the one header gap below the header's rule. */
.platform-app[data-layout="frame"] .platform-header {
  padding-inline: var(--platform-content-edge);
}
.platform-app[data-layout="frame"] .platform-main {
  padding-inline: var(--platform-content-edge);
  padding-top: var(--platform-header-gap);
}
/* A fixed page's title sits on its centred column's leading edge, and its actions end on the column's trailing edge
   (AZCO-635): the header measures itself as a size container, and its page row moves in by the column's margin, the
   same margin main's content box gives the page. A filling page's title stays on the content edge. */
.platform-app[data-layout="frame"][data-title-edge="column"] .platform-header {
  container-type: inline-size;
  --platform-column-inset: max(0px, (100cqw - var(--platform-page-width)) / 2);
}
.platform-app[data-layout="frame"][data-title-edge="column"] .platform-header .platform-page-host {
  margin-inline-start: var(--platform-column-inset);
}
.platform-app[data-layout="frame"][data-title-edge="column"] .platform-header > .platform-header-actions-host:last-child,
.platform-app[data-layout="frame"][data-wide="topbar"][data-title-edge="column"] .platform-header > .platform-header-actions-host {
  margin-inline-end: var(--platform-column-inset);
}
/* A full-bleed page owns its gutters (AZCO-367), so neither the edge nor the gap applies to it (AZCO-623). */
.platform-app[data-layout="frame"][data-presentation="full-bleed"] .platform-main {
  padding: 0;
}
/* Desktop sidebar: the header is the page header, on the page's canvas with no rule under it, ever (AZCO-635 removed
   `header.separator`, which replaced AZCO-553's line). */
.platform-app[data-wide="sidebar"] .platform-header {
  border-bottom-color: transparent;
  background: var(--ui-canvas, #f4f5f0);
  box-shadow: none;
}
/* Desktop top bar, and a hidden sidebar (a top bar too): two rows. The app bar
   (brand, links, bug, account) on the chrome; then the page header (Back, the
   title menu, the page's buttons) on the page's canvas, with no line between
   them; `header.separator: "line"` rules the page row once the page scrolls. */
.platform-app[data-wide="topbar"] .platform-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 64px minmax(0, auto);
  grid-template-areas:
    "brand links account"
    "page page actions";
  align-items: center;
  column-gap: 8px;
  height: auto;
  min-height: 0;
  padding: 0 var(--platform-content-edge);
  border-bottom-color: transparent;
  background: linear-gradient(to bottom, var(--platform-chrome) 0 64px, var(--ui-canvas, #f4f5f0) 64px);
  /* The gradient fills the padding box once: repeated, its chrome band showed again in the 1px transparent border at
     the header's foot, a line under the page row (AZCO-635: no rule under any desktop header). */
  background-repeat: no-repeat;
}
.platform-app[data-wide="topbar"] .platform-header .platform-navigation-unit {
  display: contents;
}
.platform-app[data-wide="topbar"] .platform-header :is(.platform-wide-wordmark, .platform-sidebar-expand) {
  grid-area: brand;
}
.platform-app[data-wide="topbar"] .platform-header .platform-wide-tabs {
  grid-area: links;
}
.platform-app[data-wide="topbar"] .platform-header .platform-account-host {
  grid-area: account;
}
.platform-app[data-wide="topbar"] .platform-header .platform-page-host {
  grid-area: page;
  display: flex;
  align-items: center;
  min-height: 60px;
}
.platform-app[data-wide="topbar"] .platform-header .platform-header-actions-host {
  grid-area: actions;
  align-self: center;
}
.platform-app[data-wide="topbar"] .platform-header:has(.platform-wide-tabs[data-at-destination]) .platform-page-host {
  display: flex;
}
/* In the app bar the account cluster stands alone: no divider from page actions, which live in the page header. */
.platform-app[data-wide="topbar"] .platform-header .platform-account-host {
  margin: 0;
  padding: 0;
  gap: 4px;
}
.platform-app[data-wide="topbar"] .platform-header .platform-account-host::before {
  content: none;
}
.platform-app[data-wide="topbar"] .platform-header :is(.platform-account-host, .platform-header-actions-host) {
  justify-self: end;
}
/* AZCO-519: a hidden sidebar stays a sidebar. Its page header leads with
   the app's icon; the bug and account stay inside it. Opening it where there is
   no room slides it over the page, closed again by a click outside. */
.platform-app[data-wide="sidebar"]:not([data-presentation="focus"])[data-sidebar="overlay"][data-collapse="rail"] :is(.platform-header, .platform-main, .platform-staging-banner) {
  margin-left: var(--platform-rail-width);
}
.platform-app[data-wide="sidebar"]:not([data-presentation="focus"])[data-sidebar="overlay"][data-collapse="hidden"] :is(.platform-header, .platform-main, .platform-staging-banner) {
  margin-left: 0;
}
/* The sidebar open over the page, on phones and below 1200px (AZCO-528, ruling 14): a modal dialog in the top layer
   that places it at the leading edge; the sidebar fills it. The dialog's own backdrop is the cover, over the header
   too, at 40% of the backdrop's strength (the phone's overlay mode takes it whole, 10-app-layout.css). */
dialog.platform-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  box-sizing: border-box;
  width: var(--platform-sidebar-width);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: visible;
}
dialog.platform-drawer:focus {
  outline: none;
}
dialog.platform-drawer::backdrop {
  background: color-mix(in srgb, var(--ui-backdrop) 40%, transparent);
}
dialog.platform-drawer > .platform-wide-sidebar {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}
dialog.platform-drawer[data-wide] > .platform-wide-sidebar {
  box-shadow: var(--ui-shadow-overlay, 0 12px 48px rgb(0 0 0 / 0.2));
}
.platform-app[data-wide="sidebar"] .platform-header .platform-sidebar-expand {
  margin-right: 8px;
}

.platform-wide-sidebar-group {
  display: grid;
  gap: inherit;
}
.platform-wide-sidebar-group + .platform-wide-sidebar-group {
  margin-top: 14px;
}
.platform-wide-sidebar-heading {
  margin: 0;
  padding: 4px 12px;
  color: var(--muted);
  font-size: var(--ui-text-footnote);
  font-weight: 400;
}
/* From 960px a group label is the row's size, regular, in secondary ink (AZCO-491): "Personal", "Labs". */
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-wide-sidebar-heading {
    color: var(--ui-ink-secondary, var(--muted));
    font: var(--platform-group-label);
  }
}

/* AZCO-519: the page header never changes colour on scroll; it stays on the page's background. */

/* Top bar links that don't fit collapse into More (AZCO-519). */
.platform-wide-tabs {
  position: relative;
  min-width: 0;
}
.platform-wide-tabs-ruler {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.platform-wide-tab {
  flex: none;
  gap: 4px;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.platform-wide-tab[data-current] {
  background: var(--ui-fill-current);
  color: var(--ink);
}
.platform-wide-more {
  position: relative;
}
/* More's menu is platform-ui's Menu (kind "navigation", AZCO-528), with its own styles. */

/* Report a problem as a labelled row above your profile while the sidebar is open (AZCO-519). */
.platform-wide-report {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .platform-wide-report:hover {
    background: var(--ui-surface-row-hover);
  }
}
.platform-wide-sidebar-foot .platform-wide-sidebar-tools:has(.platform-wide-report) {
  padding-inline-start: 0;
}
/* The app's own tools (`header.actions`, AZCO-646) are app chrome: at the sidebar's foot beside Report a problem, after
   its row while the sidebar is open, and above its icon in the rail. */
.platform-wide-app-tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}
.platform-wide-sidebar-tools:has(> .platform-wide-app-tools) {
  gap: 2px;
}
.platform-wide-sidebar-tools > .platform-wide-report:has(~ .platform-wide-app-tools) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.platform-wide-sidebar[data-state="rail"] :is(.platform-wide-sidebar-tools:has(> .platform-wide-app-tools), .platform-wide-app-tools) {
  flex-direction: column;
  align-items: flex-start;
}

/* AZCO-519: in the top bar, the page starts close beneath the page row. */
.platform-app[data-wide="topbar"] .platform-header .platform-page-host {
  min-height: 56px;
}
.platform-app[data-wide="topbar"] #platform-main.platform-main {
  padding-top: var(--platform-header-gap);
}

/* AZCO-522: the profile menu, from 960px. The sidebar's profile and the header's or the top bar's avatar are buttons
   that open platform-ui's Menu (AZCO-528), placed adjacent to them by positionMenu. */
button:is(.platform-wide-profile, .platform-account-avatar, .platform-tab) {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
button.platform-wide-profile {
  width: 100%;
  font: 400 var(--ui-text-callout)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
}
button:is(.platform-account-avatar, .platform-tab) {
  padding: 0;
}
.platform-wide-sidebar-foot > .platform-profile-menu {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.platform-wide-sidebar[data-state="rail"] .platform-wide-sidebar-foot > .platform-profile-menu {
  width: 100%;
}
.platform-help-empty {
  margin: 0;
  padding: 16px;
  color: var(--muted);
}

/* Page actions overflowed into "…" (AZCO-528): platform-ui's Menu surface (.ui-menu) around the page's own
   controls, which are its menu items. Rows inset 6px at the highlight radius; touch density puts the glyph at the
   trailing end in ink, compact density leads with it in secondary ink. Pointer hover is the faint row fill;
   keyboard focus moves the accent highlight (11-focus.css). */
.platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  overflow-y: auto;
}
.platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item] {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: var(--ui-height-menu-row);
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: var(--ui-radius-highlight);
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font: 400 var(--ui-text-body)/1.3 var(--ui-control-face);
  text-align: start;
  text-decoration: none;
}
.platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item] .platform-header-action-label {
  display: inline;
  flex: 1 1 auto;
  min-width: 0;
}
.platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item] > svg {
  order: 1;
  flex: none;
  width: 20px;
  height: 20px;
}
/* A destructive action (HeaderAction's `danger`) is red and comes last, after a separator, as Menu's danger items. */
.platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item][data-danger] {
  order: 1;
  color: var(--control-danger);
}
.platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]):has([data-page-action-item]:not([data-danger])) [data-page-action-item][data-danger]:not([data-danger] ~ [data-danger]) {
  position: relative;
  margin-top: 13px;
}
.platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]):has([data-page-action-item]:not([data-danger])) [data-page-action-item][data-danger]:not([data-danger] ~ [data-danger])::before {
  content: "";
  position: absolute;
  inset: -7px calc(-1 * var(--ui-menu-inset)) auto;
  border-top: 1px solid var(--line, var(--control-border));
}
@media (not (any-pointer: coarse)) {
  .platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]):has([data-page-action-item]:not([data-danger])) [data-page-action-item][data-danger]:not([data-danger] ~ [data-danger]) {
    margin-top: 9px;
  }
  .platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]):has([data-page-action-item]:not([data-danger])) [data-page-action-item][data-danger]:not([data-danger] ~ [data-danger])::before {
    top: -5px;
  }
  .platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item][data-danger] > svg {
    color: inherit;
  }
}
@media (not (any-pointer: coarse)) {
  .platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item] {
    padding: 0 10px;
    font-size: var(--ui-text-subhead);
  }
  .platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item] > svg {
    order: 0;
    width: 16px;
    height: 16px;
    color: var(--ui-ink-secondary);
  }
}
@media (hover: hover) and (pointer: fine) {
  .platform-page-action-host .platform-page-actions.ui-menu[role="menu"]:not([data-measuring]) [data-page-action-item]:not(:disabled, [aria-disabled="true"]):hover {
    background: var(--ui-surface-row-hover);
  }
}

/* 10-page-layout.css */
/* AZCO-871 candidate contracts. All spacing belongs to the shared page, not app CSS. */
.platform-page-layout {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 0;
  container: page-layout / inline-size;
  --platform-layout-search-top: max(0px, var(--ui-sticky-top, 0px));
}
.platform-page-layout-tools {
  position: sticky;
  top: var(--platform-layout-search-top);
  z-index: 5;
  display: grid;
  gap: 12px;
  padding-block: 8px 16px;
  margin-block-start: calc(-1 * var(--page-gutter));
  margin-block-end: 24px;
  background: var(--ui-canvas, var(--control-surface));
}
/* An active split list starts flush under its own header: there is no top gutter to cancel. */
.platform-split-host[data-split="on"] > .platform-split-list .platform-page-layout { --ui-sticky-top: var(--platform-header-height); }
.platform-split-host[data-split="on"] > .platform-split-list .platform-page-layout-tools { margin-block-start: 0; }
.platform-page-layout-body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 0;
  padding-block-end: 24px;
}
.platform-page-layout-content { min-width: 0; flex: 1 0 auto; }
.platform-page-layout-content > :last-child { margin-block-end: 0; }
.platform-page-layout .platform-page-completion {
  margin-block-start: auto;
  background: var(--ui-canvas, var(--control-surface));
}
.platform-page-layout .platform-page-completion .ui-sticky-action-buttons {
  display: flex;
  flex: 1 1 100%;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-inline: 0;
}
.platform-page-layout .platform-page-completion .ui-sticky-action-buttons > :is(button, a) {
  flex: none;
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.platform-page-support { margin-inline-end: auto; color: var(--control-primary); }
.platform-page-layout[data-page-kind="reading"][data-reading-width="prose"] .platform-page-layout-content {
  inline-size: 100%;
  max-inline-size: 68ch;
  margin-inline: auto;
  font-size: 1rem; /* type-scale: allow long-form reading stays legible outside the dense control scale */
  line-height: 1.65;
}
.platform-page-layout[data-page-kind="reading"] :is(h2, h3) { font-weight: 500; }
.platform-page-layout[data-page-kind="reading"] [id] { scroll-margin-block-start: 7rem; }
.platform-page-layout[data-page-kind="reading"] :is(pre, table:not(.ui-data-table)) { display: block; max-inline-size: 100%; overflow-x: auto; }
.platform-page-layout[data-page-kind="workspace"] .platform-page-layout-body:has(> .platform-page-layout-inspector) { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); }
.platform-page-layout-inspector { min-width: 0; }
.platform-page-viewport { max-inline-size: 100%; max-block-size: max(8rem, min(65svh, calc(100svh - 16rem))); overflow: auto; overscroll-behavior: contain none; border: 1px solid var(--line); border-radius: var(--ui-radius-surface); }
.platform-page-viewport > svg { display: block; max-width: none; }
.platform-page-layout[data-keyboard] .platform-page-completion { position: static; }
@container page-layout (max-width: 36rem) {
  .platform-page-layout .platform-page-completion .ui-sticky-action-buttons > [data-page-primary] { inline-size: 100%; flex-basis: 100%; min-block-size: 48px; }
}
@container page-layout (max-width: 54rem) {
  .platform-page-layout[data-page-kind="workspace"] .platform-page-layout-body:has(> .platform-page-layout-inspector) { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 500px) {
  .platform-page-layout .platform-page-completion { position: static; }
}

.platform-page-layout[data-page-kind="reading"] th { font-weight: 500; text-align: start; }

/* AZCO-872 candidate: the owning pane reserves message space. */
.platform-page-layout .platform-page-notice { position: static; margin-block-end: 24px; }
/* Fit the actual pane, including narrow panes on a wide desktop. A short recovery
   stays beside its message; long copy/actions wrap without forcing every banner
   under 600px into a tall card. Explicit presentation options remain authoritative. */
.platform-page-layout .platform-banner { display: flex; flex-flow: row wrap; align-items: center; gap: 12px; }
.platform-page-layout .platform-banner .ui-update-copy { display: block; flex: 1 1 16rem; }
.platform-page-layout .platform-banner .ui-update-actions { flex: 0 1 auto; max-inline-size: 100%; margin-inline-start: auto; justify-content: flex-end; }
.platform-page-layout .platform-banner .ui-button { white-space: normal; max-inline-size: 100%; }
@container page-layout (max-width: 36rem) {
  .platform-page-layout .platform-banner.ui-update-banner--actions-below .ui-update-copy { flex-basis: 100%; }
  .platform-page-layout .platform-banner.ui-update-banner--actions-below .ui-update-actions { margin-inline-start: 0; justify-content: flex-start; }
}
@media (max-width: 600px) {
  .platform-page-layout .platform-banner.ui-update-banner--compact-narrow { flex-wrap: nowrap; }
  .platform-page-layout .platform-banner.ui-update-banner--compact-narrow .ui-update-copy { flex-basis: 0; }
}
/* The shell lifts Report above a sticky completion. Its scroll-end lane belongs
   before that completion, so the last field/row can clear the floating disc. */
.platform-app[data-layout="app"][data-report-float] .platform-page-layout:has(> .platform-page-completion) > .platform-page-layout-body {
  padding-block-end: calc(var(--ui-bar-disc, 44px) + 24px);
}

.platform-page-layout[data-page-kind="reading"] table { border-collapse: collapse; text-align: start; }
.platform-page-layout[data-page-kind="reading"] table:not(.ui-data-table) :is(th, td) { padding: 12px; border-bottom: 1px solid var(--line); }
.platform-page-layout[data-page-kind="reading"] caption { padding-block: 8px; text-align: start; font-size: var(--ui-text-footnote); }

/* A state owns the remaining content region, not a card at the top of it. */
.platform-page-layout[data-page-state] .platform-page-layout-body { display: flex; }
.platform-page-layout[data-page-state] .platform-page-layout-content,
.platform-page-layout-content:has(> :is(.ui-table-empty, .platform-empty-state)) { display: flex; flex-direction: column; }
.platform-page-state { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; min-block-size: 12rem; }
.platform-page-state > .platform-loading { border: 0; background: none; }
.platform-page-state > .ui-table-empty { flex: none; min-height: 0; padding-block: 24px; }
.platform-page-layout-content > :is(.ui-table-empty, .platform-empty-state) { flex: 1; }
.platform-page-identity { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: var(--platform-section-gap); }
.platform-page-identity > div:first-child { min-inline-size: 0; }
.platform-page-identity p { margin: 0; color: var(--muted); line-height: 1.45; }
.platform-page-identity-status { flex: none; }
/* Page compositions retain the shared ListSection/Section surface, padding and hover clipping.
   Internal separator policy must not erase the surrounding grouped control. */
/* Rows have two text tracks; the status spans both, retaining its trailing edge. */
.platform-page-layout .platform-stacked-list .platform-list-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.platform-page-layout .platform-stacked-title { grid-column: 1; grid-row: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.platform-page-layout .platform-stacked-support { display: contents; }
.platform-page-layout .platform-stacked-support > .platform-list-detail { grid-column: 1; grid-row: 2; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.platform-page-layout .platform-stacked-support > .platform-list-status { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.platform-page-layout .platform-stacked-list .platform-list-item::before { left: 0; right: 0; }
.platform-page-layout-tools > * { min-inline-size: 0; margin-block: 0; }
.platform-page-layout-tools .ui-choice-options--segmented { flex-wrap: nowrap; }
.platform-page-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.platform-page-summary > :last-child:not(:first-child) { margin-inline-start: auto; }
.platform-page-layout[data-page-kind="reading"] a:not(.ui-button) { color: var(--control-primary); text-decoration-color: color-mix(in srgb, var(--control-primary), transparent 55%); text-underline-offset: .2em; }
/* Form sections use the same inner and outer rhythm; nested field stacks add no last margin. */
.platform-page-layout[data-page-kind="form"] .platform-page-section-body > :last-child { margin-block-end: 0; }

@container page-layout (max-width: 22rem) {
  .platform-page-identity { flex-wrap: wrap; }
  .platform-page-identity > div:first-child { flex-basis: 100%; }
}

/* One filter/tool track alongside the optional search track; overflow belongs in a filter task. */
.platform-page-layout-toolbar { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
.platform-page-layout-tools[data-tools-layout="inline"] { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.platform-page-layout-tools[data-tools-layout="inline"] .platform-page-layout-toolbar { justify-content: flex-end; }
@container page-layout (max-width: 22rem) {
  .platform-page-layout-tools[data-tools-layout="inline"] { grid-template-columns: minmax(0, 1fr); }
}
.platform-page-layout-toolbar > * { min-inline-size: 0; max-inline-size: 100%; margin-block: 0; }
.platform-page-layout-toolbar > .ui-form-stack { flex: 1; }
.platform-page-layout[data-page-kind="collection"] .platform-page-layout-toolbar > .ui-choice-field { flex: 1; }

/* Opt-in anatomy review: viewport overlays never change the measured page geometry. */
.platform-page-anatomy { position: fixed; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; pointer-events: none; z-index: 2147483000; }
.platform-page-anatomy-overlays { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.platform-page-anatomy-box { position: absolute; box-sizing: border-box; outline: 1px solid #007b83; outline-offset: -1px; background: rgb(0 123 131 / 5%); }
.platform-page-anatomy-box[data-content] { outline-color: #a45c00; background: rgb(200 119 0 / 5%); }
.platform-page-anatomy-box > span { position: absolute; top: 0; left: 0; padding: 2px 5px; max-width: 100%; background: #00646b; color: white; font: var(--ui-text-caption2)/1.3 system-ui; white-space: nowrap; }
.platform-page-anatomy-box[data-content] > span { background: #854b00; }
.platform-page-anatomy-panel { pointer-events: auto; position: fixed; bottom: max(76px, env(safe-area-inset-bottom)); right: 12px; width: min(360px, calc(100vw - 24px)); max-height: calc(100dvh - 110px); overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: var(--ui-radius-card); background: var(--ui-canvas, #fafaf7); box-shadow: 0 4px 24px #0003; color: var(--text); font-size: var(--ui-text-footnote); }
.platform-page-anatomy-panel:not(:has(.platform-page-anatomy-controls)) { width: auto; }
.platform-page-anatomy-controls { display: grid; gap: 12px; padding: 12px 4px 4px; }
.platform-page-anatomy-controls label { display: grid; gap: 4px; font-weight: 500; }
.platform-page-anatomy-controls select { width: 100%; min-height: 44px; color: inherit; background: var(--ui-canvas, #fafaf7); border: 1px solid var(--line); border-radius: var(--ui-radius-field); padding: 6px; font: inherit; }
.platform-page-anatomy-controls p { margin: 6px 0 0; line-height: 1.45; }
.platform-page-anatomy-controls code { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: var(--ui-text-caption1); }
@media (max-height: 500px) { .platform-page-anatomy-panel { bottom: 8px; max-height: calc(100dvh - 16px); } }

.platform-page-anatomy-box[data-padding] { border-style: solid; border-color: rgb(137 76 197 / 24%); outline-color: #7942a8; background: transparent; }
.platform-page-anatomy-box[data-padding] > span { background: #69378f; }
.platform-page-anatomy-controls .platform-page-anatomy-check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.platform-page-anatomy-toggle { touch-action: none; user-select: none; cursor: grab; }
.platform-page-anatomy-toggle[data-dragging] { cursor: grabbing; }
.platform-page-anatomy-guide { position: absolute; pointer-events: none; border-color: rgb(0 123 131 / 60%); border-style: solid; border-width: 0; }
.platform-page-anatomy-guide[data-axis="x"] { top: 0; bottom: 0; border-left-width: 1px; }
.platform-page-anatomy-guide[data-axis="y"] { left: 0; right: 0; border-top-width: 1px; }
.platform-page-anatomy-guide[data-inset] { border-color: rgb(137 76 197 / 65%); border-style: dashed; }

/* Adopted platform leaves retain their shell's width and a single scroll owner. */
.platform-section-body > .platform-page-layout { width: 100%; margin-inline: auto; }
.platform-section-pane[data-page-width="fixed"] > .platform-section-body > .platform-page-layout { max-width: var(--platform-app-column); }
.platform-page-layout-content { display: flex; flex-direction: column; }
.platform-page-layout-content > :is(.platform-settings, .platform-account-hub, .platform-page, .platform-list) { flex: 1 0 auto; }
.platform-app .platform-page-layout .platform-list { flex: 1 0 auto; }
.platform-page-layout .platform-list > :is(.platform-empty-state, .ui-table-empty),
.platform-page-layout .platform-list > .platform-loading-region > :is(.platform-empty-state, .ui-table-empty) { flex: 1 0 auto; justify-content: center; min-block-size: 12rem; }
.platform-page-layout .platform-loading-boundary { flex: 1 0 auto; }
.platform-page-layout .platform-loading { border: 0; background: none; }
/* Each collection band keeps count left and paging right within its own pane.
   A narrow pane gets a second tools row rather than overflowing its header. */
.platform-page-layout .ui-list-band:not(.ui-list-band--header) { flex-wrap: wrap; }
.platform-page-layout .ui-list-band-count { margin-inline-end: auto; }
.platform-page-layout .ui-list-band-pages { margin-inline-start: auto; }
@container page-layout (max-width: 37.5rem) {
  .platform-page-layout .ui-list-band-control { order: 3; flex-basis: 100%; justify-content: flex-start; }
}

.platform-form-error-banner { flex: none; margin-block: 12px; }

.platform-page-layout-content > .platform-settings { display: flex; flex-direction: column; }
.platform-page-layout .platform-settings > :is(.ui-table-empty, .platform-empty-state) { flex: 1 0 auto; justify-content: center; min-block-size: 12rem; }

/* Pull-to-refresh preserves its transform wrapper while passing the host's remaining
   height to an adopted collection. Otherwise empty content collapses to its minimum. */
.platform-pull-to-refresh:has(.platform-page-layout),
.platform-pull-content:has(> .platform-page-layout) {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-inline-size: 0;
}

/* Table collections share the UI toolbar; single-column collections retain their band. */
.platform-page-layout[data-collection-layout="table"] > .ui-table-toolbar,
.platform-page-layout[data-collection-layout="table"] > .platform-page-layout-body > .platform-page-layout-content > section > .ui-table-toolbar {
  flex: none; position: sticky; top: var(--platform-layout-search-top); z-index: 5;
  background: var(--ui-canvas, var(--control-surface));
}
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-page-layout[data-collection-layout="table"]:has(.ui-table-toolbar) .ui-record-table:not([data-wide]) thead th {
    top: calc(var(--platform-layout-search-top) + var(--platform-layout-toolbar-height, 48px));
  }
}

/* 10-page-section.css */
/* Section (AZCO-664): a labelled section of a page, ListSection's sibling for anything that isn't a list of rows. Its
   heading is a grouped list's heading (.platform-list-section-title, 10-lists.css), --platform-section-heading-gap
   above its group, and the group is a grouped list's surface (10-lists.css): the inset filled card on phones, the
   bordered group on the page's canvas from 960px. Sections stand --platform-section-gap apart, as ListSections do, so
   a page built from both has one rhythm and no layout CSS of its own.
   With headerControls, the heading moves into a shared group header with trailing view selectors.
   Inside the group, in order: the optional header, output (a result, with no field edge), free content, and one row of controls on
   the leading edge with the primary action trailing. Each part after the first starts at a hairline. */
.platform-page-section {
  min-width: 0;
  margin: 0 0 var(--platform-section-gap);
}
.platform-page-section-group {
  min-width: 0;
}
.platform-page-section-group > * + * {
  border-top: 1px solid var(--platform-list-separator);
}
/* AZCO-968: rows and dependent fields share one surface, without nested card edges or body padding around rows. */
.platform-page-section-group > .platform-list-group--embedded {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.platform-list-group--embedded:not(:last-child) > .platform-list-item:last-child > :is(.platform-list-row, .ui-switch-row) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* The output: what the section produces, on the group's own surface. It keeps a minimum height, so the first result
   doesn't move the controls below it. */
.platform-page-section-output {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--platform-section-output-min-height);
  padding: var(--platform-section-output-padding);
  overflow-wrap: break-word;
}
/* An empty output (Section's `empty`, or this class on the app's own element): one line in secondary ink at the body
   size. Never hint text in a field-like box. */
.platform-page-section-empty {
  margin: 0;
  color: var(--platform-list-secondary);
  font-size: var(--ui-text-body);
  line-height: 1.45;
}
.platform-page-section-body {
  min-width: 0;
  padding: var(--platform-section-output-padding);
}
/* The control row: controls on the leading edge, the primary action on the trailing edge of the same row. Nothing in
   it wraps; when the controls and the action don't fit on one line, the action moves to a footer row of its own,
   still trailing, as FormActions does. */
.platform-page-section-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px 12px 24px;
}
.platform-page-section-controls {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.platform-page-section-actions {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}
/* From 960px a ChoiceField's legend (a segmented control's label) sits inline before its track, in secondary ink, as
   a toolbar labels its controls. Hidden legends stay hidden. */
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-page-section-controls .ui-choice-field {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
  }
  .platform-page-section-controls .ui-choice-field > legend:not(.ui-choice-legend--hidden) {
    float: left;
    margin: 0;
    padding: 0;
    color: var(--platform-list-secondary);
    font: inherit;
    white-space: nowrap;
  }
}
/* Phones: the row stacks. The controls fill the group's width (a segmented track too), each above the next, with
   their labels above them; the primary action is full width below, at the control height, as a phone's in-content
   primary is. The output and the row pad 16px, the grouped rows' inset. */
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-page-section-output,
  .platform-page-section-body {
    padding: 16px;
  }
  .platform-page-section-row {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }
  .platform-page-section-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .platform-page-section-controls .ui-choice-options--segmented {
    display: flex;
    width: 100%;
  }
  .platform-page-section-actions {
    flex-direction: column;
    align-items: stretch;
    margin-inline-start: 0;
  }
  .platform-page-section-actions > :is(.ui-button, button, a) {
    width: 100%;
  }
}

/* View controls belong to the section header; completion controls keep their footer row. */
.platform-page-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding: 12px 16px;
}
.platform-page-section-header > .platform-page-section-title {
  min-width: 0;
  margin: 0;
  padding: 0;
  color: var(--ink);
  font-size: var(--ui-text-subhead);
  line-height: 24px;
}
.platform-page-section-header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-inline-start: auto;
  min-width: 0;
  max-width: 100%;
}

/* 10-section-split.css */
/* AZCO-548, AZCO-555: Settings and Administration, one page from 960px. The content area (the viewport less the rail)
   holds two columns: a left column of --platform-sidebar-width with the title, the search and the groups' rows (no ‹:
   the rail is the way out, AZCO-491);
   then the section's pane, its title the page's h1. Each column scrolls on its own; the page never does. With the
   sidebar the header row is hidden; with the top bar only its app bar row shows. */
.platform-app[data-section-split] .platform-main {
  padding: 0;
  overflow: clip;
}
/* One canvas for the whole page, whichever section shows: the settings sections' cards don't turn it grouped
   (10-lists.css), so the left column never changes colour between sections. */
html.platform-document .platform-app[data-section-split] {
  --ui-canvas: inherit;
  background: var(--ui-canvas);
}
.platform-app[data-section-split][data-wide="topbar"] .platform-header {
  grid-template-rows: 64px;
}
.platform-app[data-section-split][data-wide="topbar"] .platform-header :is(.platform-page-host, .platform-header-actions-host) {
  display: none;
}
.platform-app[data-section-split][data-wide="topbar"] #platform-main.platform-main {
  padding-top: 0;
}
.platform-section-split {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: var(--platform-sidebar-width) minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}
.platform-section-split[data-narrow] {
  grid-template-columns: minmax(0, 1fr);
}
.platform-section-split :is(.platform-section-column, .platform-section-pane)[hidden] {
  display: none;
}
.platform-section-split[data-narrow] > .platform-section-column {
  border-inline-end: 0;
}
.platform-section-head > .platform-page-back {
  flex: none;
  margin-inline-start: -12px;
}

/* The left column: the page canvas, a divider on its trailing edge, rows inset 8px as in the sidebar. Its title row
   and search stay at its top while the rows scroll under them, and a focused row never hides beneath them. */
.platform-section-column {
  box-sizing: border-box;
  min-height: 0;
  padding: 0 8px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  scroll-padding-block-start: 112px;
  border-inline-end: 1px solid var(--line);
  background: var(--ui-canvas, #f4f5f0);
}
.platform-section-column-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--platform-header-height);
  background: var(--ui-canvas, #f4f5f0);
}
.platform-section-column-title {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: var(--platform-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* With no open button before it, the title starts on the rows' text edge. */
.platform-section-column-title:first-child {
  padding-inline-start: 12px;
}
.platform-section-column-head .platform-sidebar-expand {
  flex: none;
}

/* The search: a field at the control height, its magnifier on the column's text edge (20px). */
.platform-section-search {
  position: sticky;
  top: var(--platform-header-height);
  z-index: 1;
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  background: var(--ui-canvas, #f4f5f0);
}
.platform-section-search-glyph {
  position: absolute;
  inset-inline-start: 12px;
  top: calc((var(--control-height, 36px) - 16px) / 2);
  color: var(--ui-ink-secondary, var(--muted));
  pointer-events: none;
}
.platform-section-search-field {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height, 36px);
  margin: 0;
  padding: 0 36px;
  border: 1px solid var(--control-border);
  border-radius: var(--ui-radius-field);
  background: var(--control-surface);
  color: var(--ink);
  font: 400 var(--ui-text-field, var(--ui-text-body))/1.3 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  appearance: none;
}
.platform-section-search-field::-webkit-search-cancel-button {
  appearance: none;
}
.platform-section-search-field::placeholder {
  color: var(--ui-ink-secondary, var(--muted));
  opacity: 1;
}
/* Focus is platform-ui's one text-entry edge (controls.css, AZCO-540/AZCO-591): the accent at exactly 2px inside the
   box, so nothing moves. No copy here: two rules made it 3px. */
.platform-section-search-clear {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: var(--control-height, 36px);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-ink-secondary, var(--muted));
  cursor: pointer;
}
@media (any-pointer: coarse) {
  .platform-section-search-field,
  .platform-section-search-clear {
    height: 44px;
  }
  .platform-section-search-glyph {
    top: 14px;
  }
  .platform-section-column {
    scroll-padding-block-start: 120px;
  }
}

/* The area's rows (AZCO-636): links as the sidebar's rows. Administration's go under group headings once it has more
   than five sections (AZCO-690): footnote ink, 16px above each group but the first, the rows' text inset. */
.platform-section-nav {
  display: grid;
}
.platform-section-group + .platform-section-group {
  margin-top: 16px;
}
.platform-section-group-title {
  margin: 0;
  padding: 0 12px 4px;
  color: var(--ui-ink-secondary, var(--muted));
  font: 400 var(--ui-text-footnote)/1.333 var(--ui-font-body, Inter, ui-sans-serif, system-ui, sans-serif);
  letter-spacing: normal;
}
.platform-section-rows {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.platform-section-nav-row {
  min-width: 0;
}
/* A row search found by a label grows to its two lines, the 36px row's 8px inset above and below. */
.platform-section-nav-row:has(.platform-section-nav-match) {
  padding-block: 4px;
}
.platform-section-nav-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.platform-section-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The label search matched, under the title. Rows show no values (AZCO-491); news is a dot at the row's end. */
.platform-section-nav-match {
  overflow: hidden;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-footnote);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-section-empty {
  margin: 0;
  padding: 8px 12px;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-footnote);
}

/* The pane: its own scroller, padded to the content edge. Its 64px title row lines up with the left column's; the
   section's title is the page's h1, with the page's actions trailing. */
.platform-section-pane {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0 var(--platform-content-edge, 24px) 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  scroll-padding-block-start: var(--platform-header-height);
}
.platform-section-head {
  flex: none;
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--platform-header-height);
  margin-bottom: var(--platform-header-gap);
  background: var(--ui-canvas, #f4f5f0);
}
.platform-section-title-host {
  flex: 1 1 auto;
  min-width: 0;
}
.platform-section-context {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.platform-section-context .platform-page-back {
  margin-inline-start: -12px;
}
.platform-section-heading {
  display: grid;
  min-width: 0;
}
.platform-app .platform-section-context .platform-section-title {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  font: var(--platform-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-section-actions-host {
  display: flex;
  flex: none;
  align-items: center;
}
.platform-section-body {
  /* Fill short pages; grow naturally for the pane’s single scroller. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Mixed widths (AZCO-635, replacing AZCO-588's per-area rule): the pane marks its page's width, data-page-width
   (page-width.tsx), from the page itself: a table or a list fills the pane, a split owns it, and anything else (forms,
   grouped lists) is fixed, centred in the 720px app column. Settings and Administration follow the same rule. */
.platform-section-body > :is(.platform-page, .platform-settings) {
  flex: 1 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
}
.platform-section-pane[data-page-width="fixed"] > .platform-section-body > :is(.platform-page, .platform-settings) {
  max-width: var(--platform-app-column);
  margin-inline: auto;
}
/* Fixed section pages center the title over their content column. Equal side tracks keep Back and actions from
   shifting its center; the column's outer inset still follows the content's auto margins. Filling pages keep their
   title on the pane's content edge. */
.platform-section-pane[data-page-width="fixed"] > .platform-section-head {
  padding-inline: max(0px, (100% - var(--platform-app-column)) / 2);
  display: grid;
  grid-template-columns: var(--platform-section-side-width, 0px) minmax(0, 1fr) var(--platform-section-side-width, 0px);
}
.platform-section-pane[data-page-width="fixed"] > .platform-section-head :is(.platform-section-title-host, .platform-section-title-slot, .platform-section-context) {
  display: contents;
}
.platform-section-pane[data-page-width="fixed"] > .platform-section-head .platform-section-heading {
  grid-column: 2;
  grid-row: 1;
  text-align: center;
}
.platform-section-pane[data-page-width="fixed"] > .platform-section-head > .platform-section-actions-host {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-width: 0;
}
.platform-section-pane[data-page-width="fixed"] > .platform-section-head .platform-page-back {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  margin-inline-start: -12px;
}
/* Inside the pane the page's own header (a section's PageHeader) is in the pane's title row; the sticky band and table
   header stick to the pane's top, under that row. */
.platform-section-pane {
  --ui-sticky-top: var(--platform-header-height);
}

/* AZCO-548, AZCO-578: the sidebar moving between its open and collapsed forms, on and off the Settings page or from its
   toggle, over 200ms with one ease: its width and the content's margin together, or, to and from hidden, a slide. The
   open sidebar's contents keep their open width throughout, clipped by the moving edge, so no label reflows; its
   collapse button fades in once it has opened. Nothing moves with reduced motion (useSidebarMotion sets no motion). */
@media (prefers-reduced-motion: no-preference) {
  .platform-app[data-sidebar-motion] :is(.platform-header, .platform-main, .platform-staging-banner) {
    transition: margin-left 200ms ease;
  }
  .platform-app[data-sidebar-motion] .platform-wide-sidebar {
    overflow: clip;
    will-change: width, transform;
  }
  .platform-app[data-sidebar-motion] .platform-wide-sidebar[data-state="open"] > * {
    flex: none;
    /* The open sidebar's content box: its width less its 8px padding on each side and its 1px divider. */
    width: calc(var(--platform-sidebar-width) - 17px);
  }
  .platform-app[data-sidebar-motion="rail"] .platform-wide-sidebar[data-state="rail"] {
    animation: platform-sidebar-to-rail 200ms ease;
  }
  .platform-app[data-sidebar-motion="open"][data-collapse="rail"] .platform-wide-sidebar[data-state="open"] {
    animation: platform-sidebar-to-open 200ms ease;
  }
  .platform-app[data-sidebar-motion="open"][data-collapse="hidden"] .platform-wide-sidebar[data-state="open"] {
    animation: platform-sidebar-slide-in 200ms ease;
  }
  .platform-app[data-sidebar-motion="hidden"] .platform-wide-sidebar[data-state="open"] {
    animation: platform-sidebar-slide-out 200ms ease forwards;
  }
  .platform-app[data-sidebar-motion="open"] .platform-wide-sidebar[data-state="open"] .platform-sidebar-toggle {
    animation: platform-sidebar-tool-in 120ms ease 200ms backwards;
  }
}
@keyframes platform-sidebar-to-rail {
  from {
    width: var(--platform-sidebar-width);
  }
}
@keyframes platform-sidebar-to-open {
  from {
    width: var(--platform-rail-width);
  }
}
@keyframes platform-sidebar-slide-in {
  from {
    transform: translateX(-100%);
  }
}
@keyframes platform-sidebar-slide-out {
  to {
    transform: translateX(-100%);
  }
}
@keyframes platform-sidebar-tool-in {
  from {
    opacity: 0;
  }
}

/* A list-detail split inside the pane (Reports, AZCO-555, AZCO-635): the split owns the whole pane, edge to edge and
   top to bottom, and each of its panes owns its 64px header row, on the section column's baseline (10-split.css);
   the pane has no title row of its own and no padding, so the list/detail divider runs its full height. */
.platform-section-pane[data-page-width="split"] {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: clip;
}
.platform-section-pane[data-page-width="split"] > .platform-section-body {
  flex: 1 1 0;
  min-height: 0;
}
.platform-section-pane[data-page-width="split"] > .platform-section-body > .platform-page {
  flex: 1 1 0;
  min-height: 0;
}

/* 10-split.css */
/* ===== AZCO-555: the list-detail split =====
   A single-column list hinted `list: "stacked"` shows its detail beside it in the desktop layout once its box is at
   least --platform-split-min (720px) wide. The decision measures the host plus section gutters removed by splitting
   (useSplitWidth, split.tsx), written as data-split="on|off" on .platform-split-host; every split rule keys off that
   attribute, with no container queries. At the top level (History, Your reports) .platform-app carries
   data-presentation="split": main neither pads nor scrolls vertically. Each pane is its own scroller and nothing inside a pane scrolls vertically:
   the page never scrolls. Narrow, the list shows alone (or, on a detail's address, the detail shows alone with the
   list mounted, hidden and inert).

   Tokens (01-tokens.css):
   --platform-split-min           720px: the available host width from which both panes show. Below this width,
                                  one pane shows at a time, including on desktop (AZCO-729).
   --platform-split-list-width    The list pane: clamp(320px, 38%, 440px).
   --platform-split-accent-width  The selected row's leading accent bar: 3px.
   --platform-split-edge          The panes' text edge: the content edge (AZCO-542), else 16px. */
.platform-split-host {
  --platform-split-edge: var(--platform-content-edge, 16px);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}
.platform-app[data-layout="frame"][data-presentation="split"] .platform-main {
  padding: 0;
  overflow: clip;
}
.platform-app[data-presentation="split"] .platform-main > .platform-split-host {
  flex: 1 1 0;
  min-height: 0;
}
.platform-split-host[data-split="on"] {
  display: grid;
  grid-template-columns: var(--platform-split-list-width) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  /* The band and the detail bar stick within their own pane. */
  --ui-sticky-top: 0px;
  /* Rows run the pane's full width, their text on the shared edge. */
  --ui-list-bleed: var(--platform-split-edge);
}
/* Administration's pane holds the split under its title: the host fills the rest of the pane's height. */
.platform-admin-section:has(> .platform-tab-panel > .platform-split-host[data-split="on"]) {
  flex: 1 1 0;
  min-height: 0;
}
.platform-tab-panel > .platform-split-host[data-split="on"] {
  flex: 1 1 0;
  height: auto;
}
.platform-app[data-layout="frame"] .platform-main:has(> .platform-admin-section > .platform-tab-panel > .platform-split-host[data-split="on"]) {
  overflow: clip;
  padding-bottom: 0;
}
.platform-split-host[data-split="on"] > :is(.platform-split-list, .platform-split-detail) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
}
.platform-split-host[data-split="on"] > .platform-split-list {
  padding: 0 var(--platform-split-edge) 24px;
  border-inline-end: 1px solid var(--line);
  /* A row moved to with the keyboard is never under the sticky band. */
  scroll-padding-block-start: calc(var(--ui-list-band-height) + var(--ui-list-band-gap-after));
}
.platform-split-host[data-split="on"] > .platform-split-detail {
  position: relative;
  scroll-padding-block-start: var(--platform-header-height);
}
/* The panes' pages fill their pane. */
.platform-split-host[data-split="on"] :is(.platform-split-list, .platform-split-content) > .platform-page {
  max-width: none;
  margin: 0;
}
.platform-split-host[data-split="on"] > .platform-split-list > .platform-page {
  padding-top: var(--platform-header-gap);
}
/* A list pane that owns its header (inside the Settings and Administration pane, AZCO-635): the 64px row with the
   section's title and the list's controls sticks at the pane's top, on the canvas, with no rule under it; the rows
   start right under it, and the band's count is the list's last line. Text sits on the pane's 24px edge and the last
   control ends 24px before the divider (the pane's own padding); row fills run to the pane's edges. */
.platform-split-host[data-split="on"] > .platform-split-list[data-own-header] {
  scroll-padding-block-start: var(--platform-header-height);
}
.platform-split-host[data-split="on"] > .platform-split-list[data-own-header] > .platform-page {
  padding-top: 0;
}
.platform-split-list-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: var(--platform-header-height);
  min-width: 0;
  background: var(--ui-canvas, #f4f5f0);
}
.platform-split-list-title {
  flex: 1 1 auto;
  min-width: 0;
}
.platform-split-list-tools,
.platform-split-list-actions,
.platform-split-list-more-host {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
}
.platform-split-list-actions:has(> :is(.platform-section-actions-slot, .platform-header-actions-slot):empty) {
  display: none;
}
.platform-split-list-more-host {
  position: relative;
}
/* The controls that don't fit: a panel under "…", on the menu's surface, its trailing edge on the button's. */
.platform-split-list-panel {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  box-sizing: border-box;
  width: max-content;
  max-width: var(--platform-list-options-width, calc(100vw - 16px));
  max-height: var(--platform-list-options-height, calc(100dvh - 16px));
  overflow: auto;
  overscroll-behavior: contain;
  overscroll-behavior-y: none;
  gap: 8px;
  padding: 8px;
  border: 0;
  border-radius: var(--ui-radius-menu);
  background: var(--ui-surface-elevated);
  box-shadow: 0 0 0 1px var(--line, var(--control-border)), var(--ui-shadow-overlay);
}
.platform-split-list-panel[data-side="above"] {
  top: auto;
  bottom: calc(100% + 4px);
}
.platform-split-list-panel[hidden] {
  display: none;
}
.platform-split-list-panel .ui-list-band--header {
  display: grid;
  gap: 8px;
  min-width: 200px;
}
.platform-split-list-panel .ui-list-band-control { width: 100%; }
.platform-split-list-foot:empty {
  display: none;
}

.platform-split-list-panel:has(.ui-list-band[data-measuring]) {
  display: block;
  position: fixed;
  visibility: hidden;
  width: max-content;
  pointer-events: none;
}

/* A top-level split (History, Your reports; AZCO-646): each pane owns its header row and no shell header row spans
   them. With the sidebar the shell's header is hidden; with the top bar only its app row shows, which is app chrome.
   The list pane's 64px row holds the page's title (its h1, with Back and the title menu) on the pane's 24px text edge
   and the page's actions, ending 24px before the divider, on the detail bar's baseline; the divider runs from the
   window's top to its bottom. The page's own content (tabs, the band) stays under the row, and the band sticks
   beneath it. */
.platform-app[data-pane-headers][data-wide="topbar"] .platform-header {
  grid-template-rows: 64px;
}
.platform-app[data-pane-headers][data-wide="topbar"] .platform-header :is(.platform-page-host, .platform-header-actions-host) {
  display: none;
}
.platform-app[data-pane-headers][data-wide="topbar"] #platform-main.platform-main {
  padding-top: 0;
}
.platform-split-host[data-split="on"] > .platform-split-list[data-own-header="page"] {
  --ui-sticky-top: var(--platform-header-height);
  scroll-padding-block-start: calc(var(--platform-header-height) + var(--ui-list-band-height) + var(--ui-list-band-gap-after));
}
/* The row spans the pane, so rows scrolling under it never show in its gutters; its content keeps the 24px edges. */
.platform-split-list[data-own-header="page"] > .platform-split-list-head {
  margin-inline: calc(-1 * var(--platform-split-edge));
  padding-inline: var(--platform-split-edge);
}
/* The title keeps its own width (so the actions measure against what it needs, page-actions.tsx) and truncates
   before the actions do; the actions sit on the row's trailing edge. */
.platform-split-list[data-own-header="page"] .platform-split-list-title {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
}
.platform-split-list[data-own-header="page"] .platform-split-list-actions {
  margin-inline-start: auto;
}
.platform-split-list-head > .platform-sidebar-expand {
  flex: none;
  margin-inline-end: -8px;
}

/* The band spans the pane, so rows never show beside it as they scroll under. */
.platform-split-host[data-split="on"] > .platform-split-list .ui-list-band {
  margin-inline: calc(-1 * var(--platform-split-edge));
  padding-inline: var(--platform-split-edge);
}

/* The detail bar (AZCO-635): the pane's own 64px header row, on the list's and the section column's baseline, sticky
   at the pane's top on the canvas with no rule under it, ever: the detail's title (an h2) and its actions, which end
   24px before the pane's edge. A page below the detail (an edit page) gets Back to the detail at its leading edge. */
.platform-split-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  height: var(--platform-header-height);
  padding: 0 var(--platform-split-edge);
  background: var(--ui-canvas, #f4f5f0);
}
.platform-split-bar[hidden] {
  display: none;
}
.platform-split-back {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-start: -12px;
  border-radius: var(--ui-radius-control);
  color: var(--ui-ink-secondary, var(--muted));
}
@media (hover: hover) and (pointer: fine) {
  .platform-split-back:hover {
    color: var(--ink);
  }
}
.platform-split-back:active {
  opacity: var(--ui-pressed-opacity);
}
.platform-split-title {
  flex: 1 1 auto;
  min-width: 0;
}
.platform-split-heading {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font: var(--platform-title);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-split-heading:focus {
  outline: none;
}
.platform-split-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
/* The detail's reading column (AZCO-635): its content centres in the pane at up to the 720px app column, inside the
   pane's 24px edges, so its cards end 24px before the pane's edge however wide the pane. */
.platform-split-content {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--platform-app-column) + 2 * var(--platform-split-edge));
  margin-inline: auto;
  padding: 8px var(--platform-split-edge) 32px;
}
/* Nothing chosen: one quiet line, centred in the pane. */
.platform-split-empty {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  padding: 24px;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-subhead);
  line-height: 1.33;
  text-align: center;
}
/* No vertical scroller inside a pane: tables sit in the flow, a wide one scrolls sideways only (its header then
   doesn't stick), and a capped region opens to its full height. */
.platform-split-host[data-split="on"] .ui-table-scroll {
  overflow: visible;
}
.platform-split-host[data-split="on"] .ui-table-scroll:has(> .ui-record-table[data-wide]) {
  overflow-x: auto;
  overflow-y: clip;
}
.platform-split-host[data-split="on"] .ui-table-scroll > .ui-record-table[data-wide] thead th {
  position: static;
}
.platform-split-host[data-split="on"] .platform-diagnostic-list {
  max-height: none;
  overflow-y: visible;
}

/* ===== Stacked rows (AZCO-528, AZCO-555, AZCO-562) =====
   One tap target per row: the title, body on one line; the supporting line, subhead in secondary ink and at most
   two lines, with a compact status at its end; a chevron only on rows that navigate, and none beside a split list.
   Separators run full width from 960px (AZCO-543) and stay inset to the text on phones, as in iOS lists. */
.platform-stacked-list .platform-list-item > .platform-list-row {
  -webkit-touch-callout: none;
}
.platform-stacked-list .platform-stacked-title {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--ui-text-body);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.platform-stacked-support {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.platform-stacked-support > .platform-list-detail {
  flex: 0 1 auto;
  min-width: 0;
}
.platform-stacked-support > .platform-list-status {
  flex: none;
  max-width: 45%;
  /* AZCO-870: keep statuses at the trailing edge at every size and pointer type. */
  margin-inline-start: auto;
}
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-stacked-list .platform-list-item > .platform-list-row {
    min-height: var(--ui-height-row-2, 56px);
    padding-block: 8px;
  }
  .platform-stacked-list .platform-list-item + .platform-list-item::before {
    left: 0;
  }
}
/* The row's "…" (AZCO-555, AZCO-570): one paradigm with DataTable's. The row itself opens the record; the "…" is a 32px
   target at the trailing edge that stays in the DOM, out of the Tab order: the context-menu key or Shift+F10 opens it
   from the row (AZCO-491). With a fine pointer it shows on the row's hover
   and while focus is in the row, in space the row keeps for it, so nothing shifts. Without one (phones, tablets) it is
   never painted and the row keeps no space for it: a long-press opens the same menu, and only a keyboard's focus shows
   it. */
.platform-stacked-more {
  position: absolute;
  top: 50%;
  inset-inline-end: max(0px, calc(var(--ui-list-bleed, 0px) - 6px));
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-ink-secondary, var(--muted));
  opacity: 0;
  transform: translateY(-50%);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .platform-stacked-item[data-actions] > .platform-list-row {
    padding-inline-end: calc(var(--ui-list-bleed, 0px) + 40px);
  }
  .platform-stacked-item:is(:hover, :focus-within) > .platform-stacked-more,
  .platform-stacked-more[aria-expanded="true"] {
    opacity: 1;
  }
  .platform-stacked-more:hover {
    color: var(--ink);
  }
}
@media (hover: none), (pointer: coarse) {
  .platform-stacked-more {
    width: 44px;
    height: 44px;
    pointer-events: none;
  }
  .platform-stacked-more:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}
.platform-stacked-more:active {
  opacity: var(--ui-pressed-opacity);
}
/* The shown row: the current fill and a leading accent bar the row's full height; never bolder, and no hover over it. */
.platform-stacked-item[data-selected] > .platform-list-row {
  background: var(--ui-fill-current);
  box-shadow: inset var(--platform-split-accent-width, 3px) 0 0 var(--control-primary);
}
@media (forced-colors: active) {
  .platform-stacked-list .platform-list-item > .platform-list-row {
    border-inline-start: 3px solid transparent;
  }
  .platform-stacked-item[data-selected] > .platform-list-row {
    border-inline-start-color: Highlight;
  }
}

/* Unread rows (AZCO-491, item 29): StackedRow's `unread`. In a list whose rows track it, every row keeps a leading
   gutter of at least 24px (the content edge from 960px; on phones 8px past the 16px edge, as in Mail), so nothing
   shifts as rows are read; an unread row's dot (`--ui-unread-dot`, 8px on phones, 6px from 960px) is centred in it on the title's line, and its title is
   500 (read rows 400). */
.platform-stacked-list[data-unread-rows] .platform-list-item > .platform-list-row {
  padding-inline-start: max(var(--ui-list-bleed, 0px), 24px);
}
/* Phones' separators start at the text, so they follow it into the gutter. */
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-stacked-list[data-unread-rows] .platform-list-item + .platform-list-item::before {
    left: max(var(--ui-list-bleed, 0px), 24px);
  }
}
.platform-stacked-list[data-unread-rows] .platform-list-text {
  position: relative;
}
.platform-unread-dot {
  position: absolute;
  top: calc(var(--ui-text-body) * 0.65 - var(--ui-unread-dot, 8px) / 2);
  inset-inline-start: calc(-1 * max(var(--ui-list-bleed, 0px), 24px) / 2 - var(--ui-unread-dot, 8px) / 2);
  width: var(--ui-unread-dot, 8px);
  height: var(--ui-unread-dot, 8px);
  border-radius: var(--ui-radius-round);
  /* The accent (AZCO-491); the row's keyboard highlight turns it to the on-accent ink with the text (11-focus.css). */
  color: var(--ui-accent, var(--control-primary));
  background: currentColor;
}
.platform-stacked-item[data-unread="true"] .platform-stacked-title,
.ui-record-table > tbody > tr[data-unread="true"] .platform-row-title {
  font-weight: 500;
}
.platform-stacked-item[data-unread="false"] .platform-stacked-title {
  font-weight: 400;
}
@media (forced-colors: active) {
  .platform-unread-dot {
    background: CanvasText;
    forced-color-adjust: none;
  }
}

/* A record's name that opens it in place (Features, AZCO-562): the row-link pattern with a button. */
button.platform-row-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 400;
  text-align: start;
  cursor: pointer;
}
/* A deprecated subtitle (AZCO-562, AZCO-592): never under the title, the content's first line in footnote type. */
.platform-page-subtitle {
  margin: 0 0 4px;
  color: var(--ui-ink-secondary, var(--muted));
  font-size: var(--ui-text-footnote);
  line-height: 1.385;
}
@media (max-width: 959.98px) and (pointer: coarse) {
  .platform-page-subtitle {
    margin-top: 0;
  }
}

/* AZCO-792: the overflow surface owns its gutters; list bleed and desktop
   no-wrap rules must not leak into it. Keep page size and pager as separate
   wrapping groups, with a final fallback for enlarged page-count text. */
.platform-split-list-panel .ui-list-band.ui-list-band--header:not([data-measuring]) {
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
.platform-split-list-panel .ui-list-band:not([data-measuring]) .ui-list-band-pages {
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.platform-split-list-panel .ui-list-band:not([data-measuring]) .ui-list-band-size {
  min-width: 0;
  max-width: 100%;
}
.platform-split-list-panel .ui-list-band:not([data-measuring]) .ui-compact-pager {
  flex: 0 1 auto;
  flex-wrap: wrap;
  max-width: 100%;
}
.platform-split-list-panel .ui-list-band:not([data-measuring]) .ui-compact-pager-position {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
/* AZCO-774: each pane owns the remaining height below its header. Contained
   loading/empty states use it; long lists still grow inside the existing scroller. */
.platform-split-host[data-split="off"] {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.platform-split-host > :is(.platform-split-list, .platform-split-detail):not([hidden]) {
  display: flex;
  flex-direction: column;
}
.platform-split-host[data-split="off"] > :is(.platform-split-list, .platform-split-detail):not([hidden]) { flex: 1 0 auto; }
.platform-split-list > *, .platform-split-detail > * { flex-shrink: 0; }
.platform-split-content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
.platform-split-content > .platform-page { flex: 1 0 auto; }

/* AZCO-805: an empty collection owns the complete body, without an unused detail pane. */
.platform-split-host[data-split="on"][data-empty] > .platform-split-list {
  grid-column: 1 / -1;
  border-inline-end: 0;
}
.platform-split-list:has(:is(.platform-report-list, .platform-fill-empty) .ui-table-empty) > .platform-page,
.platform-tab-panel:has(> :is(.platform-report-list, .platform-fill-empty) .ui-table-empty),
:is(.platform-report-list, .platform-fill-empty):has(> .ui-table-empty),
:is(.platform-report-list, .platform-fill-empty):has(> .platform-loading-region > .ui-table-empty) {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}
:is(.platform-report-list, .platform-fill-empty) > .ui-table-empty,
:is(.platform-report-list, .platform-fill-empty) > .platform-loading-region > .ui-table-empty { flex: 1 0 auto; }

/* 10-squeeze.css */
/* ===== AZCO-637: squeezed content scrolls inside its pane =====
   The desktop layout ([data-layout="frame"]) holds at every width a mouse or trackpad window can take, so it gives up
   space in one order: the sidebar collapses (below 1200px), then a centred column's margins shrink, then the content
   pane scrolls sideways. Record tables (platform-ui's DataTable, at its columns' minimum, --ui-table-min-width) keep a
   minimum width; a page holding one is at least as wide as it, so its band spans the same width as its rows. When the pane is narrower than that, only the pane scrolls sideways: the
   Settings and Administration page's pane under its title row, pinned at its leading edge, or the main content area
   of any other page under the shell's header. The sidebar, the rail and the section column never move, and the
   document itself never scrolls sideways. The pane is the scroller in both directions, so the sticky band and table
   header keep their offsets: no wrapper between them adds a scroll container. Phones are unchanged. */

/* A page holding a record table is at least as wide as its columns. */
.platform-app[data-layout="frame"] :is(.platform-main, .platform-section-body) > .platform-page:has(.ui-record-table:not([data-wide])) {
  min-width: min-content;
}
/* List-detail hosts keep their available width, so useSplitWidth switches to one pane below the split threshold.
   Navigation stays fixed; only tables keep a minimum width and scroll inside the content pane (AZCO-729). */

/* The main content area scrolls sideways with its page, under the shell's header, which is outside it. */
.platform-app[data-layout="frame"]:not([data-section-split], [data-presentation="full-bleed"]) .platform-main {
  overflow-x: auto;
}
/* A top-level split (History, Your reports) or Administration's split: main has no height to scroll, only width; a
   hidden (not clipped) overflow, since one axis scrolls. */
.platform-app[data-layout="frame"][data-presentation="split"] .platform-main,
.platform-app[data-layout="frame"] .platform-main:has(> .platform-admin-section > .platform-tab-panel > .platform-split-host[data-split="on"]) {
  overflow-x: auto;
  overflow-y: hidden;
}

/* The Settings and Administration pane scrolls sideways too; its title row stays at the pane's leading edge. */
.platform-app[data-layout="frame"] .platform-section-pane {
  overflow-x: auto;
}
.platform-app[data-layout="frame"] .platform-section-pane:has(.platform-split-host[data-split="on"]) {
  overflow-x: auto;
  overflow-y: hidden;
}
/* Sticky offsets count from the pane's content edge, so the row, which reaches out to the pane's edge, pins one
   content edge before it. */
.platform-app[data-layout="frame"] .platform-section-pane > .platform-section-head {
  left: calc(-1 * var(--platform-content-edge, 24px));
}

/* ===== AZCO-637: nothing wraps on desktop =====
   A list row's label and value share one line and truncate with "…": the value keeps up to its cap and the label
   takes the rest. A grouped row's supporting line (its detail) keeps its own lines; a record row's is one line. Phones
   keep the large Text Size layout, where the value moves under the label (10-lists.css). */
@media (min-width: 960px), (not (pointer: coarse)) {
  .platform-list-body {
    flex-wrap: nowrap;
    align-items: center;
  }
  .platform-list-body > .platform-list-text {
    flex: 1 1 0;
    min-width: 0;
  }
  .platform-list-label {
    display: block;
  }
  .platform-list-label,
  .platform-list-value,
  .platform-select-value > [data-menu-value] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .platform-list-body > .platform-list-value {
    flex: 0 1 auto;
    max-width: 60%;
  }
  /* A record row's supporting line (a stacked list's, beside a detail) is one line too. */
  .platform-stacked-list .platform-list-detail {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 11-focus.css */
/* Keyboard focus (AZCO-528, D6) for the whole platform document: a 2px ring
   in the template's accent, 2px outside the control, following its corners.
   @azose-co/platform-ui rings its own controls the same way; this rule
   covers the shell's and the app's native controls and stays at zero
   specificity, so a control's own offset (an inset row) wins. Focus a dialog
   or menu returned quietly (data-restored-focus) shows no ring, and after a
   pointer or touch (data-input-modality, input-modality.ts) nothing does
   until the next Tab or arrow key. Forced-colors mode keeps the system
   indicator. Text entry (text inputs, text areas, editable regions) never rings
   (AZCO-540): a focused field turns its border the accent instead. */
:where(html.platform-document body) :where(button, a, input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"]), select, summary, [tabindex]:not([contenteditable], input, textarea)):where(:not([class*="ui-"])):focus-visible:not([data-restored-focus]) {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: var(--ui-focus-ring-offset);
}
html.platform-document[data-input-modality="pointer"] body :where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
}
/* Announcement and navigation targets (tabindex="-1") are readable content, not controls. */
:where(html.platform-document body) :where(h1, h2, h3, h4, h5, h6, main, [role="heading"], [role="main"])[tabindex="-1"]:focus {
  outline: none;
}

/* Rows (AZCO-528, D6): list and settings rows, the table's row links (and a record row with nothing to open, which the
   arrow keys still reach, AZCO-491), the sidebar's, rail's and drawer's rows, the
   profile row, the top bar's links and the action sheet's items take no ring. Keyboard focus is the accent
   highlight instead, every text in it in the on-accent ink, so exactly one row carries it. After a pointer or touch
   (data-input-modality="pointer") nothing shows, and neither does a row returned to quietly. platform-ui's Menu
   highlights its own rows the same way. */
html.platform-document body :is(.platform-list-row, .platform-row-title, .platform-wide-row, .platform-section-nav-row, .platform-wide-profile, .platform-wide-tab, .platform-navigation-row, .platform-action-sheet-item, .platform-page-actions[role="menu"] [data-page-action-item], .ui-record-table > tbody > tr):focus-visible {
  outline: none;
}
html.platform-document:not([data-input-modality="pointer"]) body :is(.platform-list-row, .platform-wide-row, .platform-section-nav-row, .platform-wide-profile, .platform-wide-tab, .platform-navigation-row, .platform-action-sheet-item, .platform-page-actions[role="menu"] [data-page-action-item]):focus-visible:not([data-restored-focus]),
html.platform-document:not([data-input-modality="pointer"]) body .platform-row-link:has(.platform-row-title:focus-visible:not([data-restored-focus])),
html.platform-document:not([data-input-modality="pointer"]) body .ui-record-table > tbody > tr:focus-visible:not([data-restored-focus]) {
  background: var(--control-primary);
  color: var(--control-on-primary);
}
/* Text takes the on-accent ink; chips, pills and badges keep their own fill and ink (AZCO-528 review): white on a
   pale pill can't be read, and each tone pair already meets contrast on its own fill. */
html.platform-document:not([data-input-modality="pointer"]) body :is(.platform-list-row, .platform-wide-row, .platform-section-nav-row, .platform-wide-profile, .platform-wide-tab, .platform-navigation-row, .platform-action-sheet-item, .platform-page-actions[role="menu"] [data-page-action-item]):focus-visible:not([data-restored-focus]) *:not(:is(.ui-status-pill, .ui-tile-badge, .ui-tab-badge, .ui-chip, .ui-email-chip), :is(.ui-status-pill, .ui-tile-badge, .ui-tab-badge, .ui-chip, .ui-email-chip) *),
html.platform-document:not([data-input-modality="pointer"]) body .platform-row-link:has(.platform-row-title:focus-visible:not([data-restored-focus])) *:not(:is(.ui-status-pill, .ui-tile-badge, .ui-tab-badge, .ui-chip, .ui-email-chip), :is(.ui-status-pill, .ui-tile-badge, .ui-tab-badge, .ui-chip, .ui-email-chip) *),
html.platform-document:not([data-input-modality="pointer"]) body .ui-record-table > tbody > tr:focus-visible:not([data-restored-focus]) *:not(:is(.ui-status-pill, .ui-tile-badge, .ui-tab-badge, .ui-chip, .ui-email-chip), :is(.ui-status-pill, .ui-tile-badge, .ui-tab-badge, .ui-chip, .ui-email-chip) *) {
  color: inherit;
}
/* A tab's ring goes around its pill, at the pill's radius (AZCO-528, addendum §2.8; the whole item since AZCO-649). */
:where(html.platform-document body) .platform-tab:focus-visible:not([data-restored-focus]) {
  outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring-color);
  outline-offset: var(--ui-focus-ring-offset);
}
html.platform-document[data-input-modality="pointer"] body .platform-tab:focus-visible {
  outline: none;
}
/* Panes that scroll and clip at their edges (AZCO-540): the list-detail split's panes and the section split's columns.
   Controls flush with an edge ring inside themselves, so the ring is never clipped. */
:where(html.platform-document body) :where(.platform-split-list, .platform-split-detail, .platform-section-nav, .platform-section-pane) :where(a, button, summary, [tabindex]):focus-visible:not([data-restored-focus]) {
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}
/* The document viewer's stage fills its frame: the ring sits inside it. */
:where(html.platform-document body) .platform-document-viewer-stage:focus-visible {
  outline-offset: calc(-1 * var(--ui-focus-ring-width));
}

/* Forced colours: controls take a 2px Highlight ring; text entry takes platform-ui's 2px Highlight edge instead, never
   an outline (AZCO-591). */
@media (forced-colors: active) {
  html.platform-document body :is(button, a, input:is([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"]), select, summary, [tabindex]:not(input, textarea, [contenteditable])):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
  html.platform-document body :is(.platform-list-row, .platform-row-title, .platform-wide-row, .platform-section-nav-row, .platform-wide-profile, .platform-wide-tab, .platform-navigation-row, .platform-action-sheet-item, .platform-page-actions[role="menu"] [data-page-action-item]):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}