/* Shared wa-page frame, navigation, commands, and public shell. */
@layer ripcity-app {
  /* Native sprite icons inherit the surrounding control or destination color. */
  .phosphor-icon {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
  }

  /* The Web Awesome page owns the frame. Features own only the routed region
     inside its default main slot. */
  wa-page {
    --menu-width: 15rem;
  }

  wa-page[view="mobile"] {
    --menu-width: auto;
  }

  wa-page[view="mobile"]::part(menu) {
    display: none;
    border-inline-end: 0;
  }

  wa-page[view="desktop"].desktop-navigation-hidden {
    --menu-width: 0;
  }

  wa-page[view="desktop"].desktop-navigation-hidden::part(menu) {
    display: none;
    border-inline-end: 0;
  }

  /* The signed-out shell authors no navigation, so it reserves no menu track. */
  wa-page.public-shell {
    --menu-width: 0;
  }

  wa-page.public-shell::part(menu) {
    display: none;
    border-inline-end: 0;
  }

  /* Fixed instruments consume the page's complete primary track and assign
     scrolling to their own report, ledger, matrix, or pane. */
  html:has(wa-page.instrument-shell),
  body:has(wa-page.instrument-shell) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  wa-page.instrument-shell {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  wa-page.instrument-shell::part(page) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  wa-page.instrument-shell::part(body),
  wa-page.instrument-shell::part(main),
  wa-page.instrument-shell::part(main-content) {
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }

  .instrument-main {
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
  }

  /* The slotted semantic elements own their insets. Page parts own only the
     shared frame separators. */
  wa-page::part(header) {
    border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    background-color: var(--wa-color-surface-default);
  }

  wa-page::part(menu) {
    border-inline-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  }

  wa-page:has(> [slot="subheader"])::part(subheader) {
    border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    background-color: var(--wa-color-surface-default);
  }

  wa-page > #app-main {
    min-width: 0;
    padding: 0;
  }

  .site-header {
    display: grid;
    grid-template-columns:
      minmax(max-content, 1fr) minmax(20ch, 64ch) minmax(0, 1fr) max-content;
    align-items: center;
    gap: var(--wa-space-s);
    width: 100%;
    padding: var(--wa-space-xs) var(--wa-space-m);
  }

  .site-identity {
    min-width: 0;
    justify-self: start;
  }

  /* Account command: always present, always reachable, even when the desktop
     navigation is collapsed. */
  .site-account {
    justify-self: end;
    align-items: center;
    min-width: 0;
    min-block-size: var(--wa-form-control-height);
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    color: var(--wa-color-text-normal);
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--wa-border-radius-s);
    transition:
      background-color var(--wa-transition-fast),
      color var(--wa-transition-fast);
  }

  .site-account:hover {
    background: var(--wa-color-neutral-fill-quiet);
    color: var(--wa-color-text-loud);
  }

  .site-account-icon {
    flex: none;
    color: var(--wa-color-text-loud);
    font-size: 1.25rem;
  }

  .site-account-label {
    overflow: hidden;
    font-size: var(--wa-font-size-s);
    text-overflow: ellipsis;
  }

  .site-desktop-nav-toggle {
    display: none;
  }

  :is(.site-desktop-nav-toggle, .site-nav-toggle, .site-color-scheme-toggle)::part(base) {
    inline-size: var(--wa-form-control-height);
    block-size: var(--wa-form-control-height);
    padding-inline: 0;
  }

  wa-page[view="desktop"] .site-desktop-nav-toggle {
    display: inline-block;
  }

  :is(.site-desktop-nav-toggle, .site-nav-toggle) .phosphor-icon {
    color: var(--wa-color-text-normal);
    font-size: 1.5rem;
  }

  .site-desktop-nav-toggle .desktop-nav-icon-collapsed,
  .site-desktop-nav-toggle[aria-expanded="false"] .desktop-nav-icon-expanded {
    display: none;
  }

  .site-desktop-nav-toggle[aria-expanded="false"] .desktop-nav-icon-collapsed {
    display: inline-block;
  }

  .site-color-scheme-toggle {
    justify-self: end;
  }

  :is(.site-color-scheme-toggle, .site-search-trigger) .phosphor-icon {
    color: var(--wa-color-text-loud);
  }

  .site-color-scheme-toggle .phosphor-icon {
    font-size: 1.25rem;
  }

  .site-color-scheme-toggle .color-scheme-icon-dark,
  html.wa-dark .site-color-scheme-toggle .color-scheme-icon-light {
    display: none;
  }

  html.wa-dark .site-color-scheme-toggle .color-scheme-icon-dark {
    display: inline-block;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    line-height: 1;
  }

  .brand-mark {
    display: inline-block;
    width: 4.75rem;
    height: 1.75rem;
    flex: none;
    background-color: currentColor;
    mask: var(--brand-mask) center / contain no-repeat;
  }

  .site-search-command,
  .site-search-trigger-desktop {
    width: 100%;
    min-width: 0;
  }

  .site-search-trigger-desktop::part(base) {
    width: 100%;
    justify-content: flex-start;
    box-shadow: none;
  }

  .site-search-trigger-desktop::part(label) {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    width: 100%;
    min-width: 0;
  }

  .site-search-trigger-icon {
    color: var(--wa-color-text-quiet);
    font-size: 1rem;
  }

  .site-search-trigger-copy {
    overflow: hidden;
    color: var(--wa-color-text-quiet);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-search-shortcut {
    margin-inline-start: auto;
    padding: 0 var(--wa-space-2xs);
    color: var(--wa-color-text-quiet);
    font: inherit;
    font-size: var(--wa-font-size-2xs);
    line-height: 1.5;
    background: var(--wa-color-surface-default);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
    box-shadow: none;
  }

  .site-search-trigger-mobile .phosphor-icon {
    font-size: 1.25rem;
  }

  /* Navigation command palette. One headerless, top-anchored dialog whose panel
     keeps a fixed block size, so filtering the destination list never resizes
     or repositions the surface under the pointer. The dialog body owns no
     padding and no scrolling: the form grid divides the panel into a fixed
     input row, the one scrolling results region, and a fixed footer. */
  .app-search-dialog {
    --app-command-panel-block-size: 33rem;
    --app-command-panel-inset-block-start: 6rem;
    --app-command-panel-inset-block-end: var(--wa-space-xl);
    --app-command-gutter: var(--wa-space-m);

    --width: min(42rem, calc(100vw - 2 * var(--wa-space-m)));
    --spacing: 0;
  }

  .app-search-dialog::part(dialog) {
    block-size: min(
      var(--app-command-panel-block-size),
      calc(
        100dvh - var(--app-command-panel-inset-block-start) -
          var(--app-command-panel-inset-block-end)
      )
    );
    max-block-size: none;
    /* The component centers the panel with auto margins on all sides; a real
       start margin with an auto end margin anchors it near the top instead. */
    margin-block: var(--app-command-panel-inset-block-start) auto;
    overflow: hidden;
  }

  .app-search-dialog::part(body) {
    display: grid;
    min-block-size: 0;
    padding: 0;
    overflow: hidden;
  }

  .app-command-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-block-size: 0;
    block-size: 100%;
    margin: 0;
  }

  /* Explicit rows keep the three visible regions in place no matter what else
     the form carries, such as the visually hidden native submit. */
  .app-command-input-row {
    grid-row: 1;
  }

  .app-command-results {
    grid-row: 2;
  }

  .app-command-footer {
    grid-row: 3;
  }

  .app-command-input-row {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    min-block-size: 3.25rem;
    padding-inline: var(--app-command-gutter);
    border-block-end: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  }

  .app-command-search-icon {
    flex: none;
    color: var(--wa-color-text-quiet);
    font-size: 1.125rem;
  }

  /* A native input carrying the shared typography. It contributes no border,
     background, or height of its own: the row above owns that geometry. */
  .app-command-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    color: var(--wa-color-text-normal);
    font: inherit;
    font-size: var(--wa-font-size-m);
    line-height: var(--wa-line-height-condensed);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    appearance: none;
  }

  .app-command-input-row:focus-within {
    outline: var(--wa-focus-ring);
    outline-offset: calc(-1 * var(--wa-focus-ring-width));
  }

  .app-command-input::placeholder {
    color: var(--wa-form-control-placeholder-color);
  }

  /* type="search" otherwise paints a browser cancel affordance that competes
     with the palette's own Esc control. */
  .app-command-input::-webkit-search-decoration,
  .app-command-input::-webkit-search-cancel-button,
  .app-command-input::-webkit-search-results-button,
  .app-command-input::-webkit-search-results-decoration {
    display: none;
    appearance: none;
  }

  .app-command-escape,
  .app-command-footer kbd {
    flex: none;
    padding: 0 var(--wa-space-2xs);
    color: var(--wa-color-text-quiet);
    font: inherit;
    font-size: var(--wa-font-size-2xs);
    line-height: 1.5;
    white-space: nowrap;
    background: var(--wa-color-surface-default);
    border: var(--wa-border-width-s) solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-s);
  }

  /* The one y-scroll owner inside the panel. */
  .app-command-results {
    min-block-size: 0;
    padding-block: var(--wa-space-xs);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--wa-space-xs);
  }

  .app-command-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .app-command-group + .app-command-group {
    margin-block-start: var(--wa-space-xs);
  }

  .app-command-group-label {
    margin: 0;
    padding: var(--wa-space-2xs) var(--app-command-gutter);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Dense destination rows in the sidebar's language: the icon carries the
     catalog group color at rest, the label stays on one line, and the active
     row uses the same neutral loud fill as the navigation's current page. */
  .app-command-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    min-block-size: 2.25rem;
    padding: var(--wa-space-2xs) var(--app-command-gutter);
    color: var(--wa-color-text-normal);
    text-decoration: none;
    scroll-margin-block: var(--wa-space-xs);
    transition:
      background-color var(--wa-transition-fast),
      color var(--wa-transition-fast);
  }

  /* The home group carries no catalog hue, so both the icon and the hover skin
     fall back to the neutral language. */
  .app-command-option-icon {
    flex: none;
    color: var(--catalog-group-color, var(--wa-color-text-loud));
    font-size: var(--wa-font-size-l);
  }

  .app-command-option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The palette's loud fill names keyboard selection, so current location uses
     an explicit quiet label instead of reusing the sidebar's selected fill. */
  .app-command-current {
    flex: none;
    margin-inline-start: auto;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xs);
    line-height: var(--wa-line-height-condensed);
    white-space: nowrap;
  }

  .app-command-option .app-nav-status {
    margin-inline-start: 0;
  }

  .app-command-option:hover {
    color: var(--catalog-group-color, var(--wa-color-text-loud));
    background: var(--catalog-group-soft, var(--wa-color-neutral-fill-quiet));
  }

  .app-command-option[aria-current="page"] {
    font-weight: var(--wa-font-weight-semibold);
  }

  .app-command-option[aria-selected="true"] {
    color: var(--wa-color-neutral-on-loud);
    font-weight: var(--wa-font-weight-semibold);
    background: var(--wa-color-neutral-fill-loud);
  }

  .app-command-option[aria-selected="true"] .app-command-option-icon,
  .app-command-option[aria-selected="true"] .app-command-current {
    color: var(--wa-color-neutral-on-loud);
  }

  /* The status capsule keeps its text and stays readable on the loud fill. */
  .app-command-option[aria-selected="true"] .app-nav-status {
    color: var(--wa-color-neutral-on-loud);
    background: color-mix(in oklab, var(--wa-color-neutral-on-loud) 20%, transparent);
  }

  /* Trailing activation affordance on the selected row only. It is decoration
       for the Enter hint already named in the footer, so it contributes no
       accessible text. */
  .app-command-option[aria-selected="true"]::after {
    content: "Enter" / "";
    flex: none;
    margin-inline-start: var(--wa-space-xs);
    padding: 0 var(--wa-space-2xs);
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-normal);
    line-height: 1.5;
    white-space: nowrap;
    border: var(--wa-border-width-s) solid
      color-mix(in oklab, currentColor 45%, transparent);
    border-radius: var(--wa-border-radius-s);
  }

  .app-command-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--wa-space-2xs);
    box-sizing: border-box;
    /* The note is the only visible content while it shows, so it centers in the
       results region the destinations otherwise occupy. */
    min-block-size: 100%;
    margin: 0;
    padding: var(--wa-space-l) var(--app-command-gutter);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    text-align: center;
    text-wrap: balance;
  }

  .app-command-footer {
    display: flex;
    align-items: center;
    gap: var(--wa-space-m);
    min-block-size: 2.5rem;
    padding: var(--wa-space-2xs) var(--app-command-gutter);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xs);
    border-block-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  }

  .app-command-footer > * {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-3xs);
  }

  /* The close hint is a real button; it reads as the same quiet footer text. */
  .app-command-footer button {
    appearance: none;
    min-height: 0;
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    color: inherit;
    font: inherit;
    background: none;
    border: 0;
    box-shadow: none;
    cursor: pointer;
  }

  .app-command-footer button:hover {
    color: var(--wa-color-text-normal);
  }

  @media (forced-colors: active) {
    .app-command-input-row,
    .app-command-footer {
      border-color: CanvasText;
    }

    /* The loud fill does not survive forced colors, so the selected row keeps
       an explicit boundary. */
    .app-command-option[aria-selected="true"] {
      outline: 2px solid CanvasText;
      outline-offset: -2px;
    }
  }

  /* Progressive-enhancement confirmation for the account command. Its native
     POST form is the only thing that signs out from inside the dialog. */
  .app-logout-dialog {
    --width: min(28rem, calc(100vw - 2 * var(--wa-space-m)));
    --spacing: var(--wa-space-m);
  }

  .app-logout-copy {
    margin: 0;
    color: var(--wa-color-text-normal);
  }

  .app-logout-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--wa-space-xs);
    width: 100%;
    margin: 0;
  }
  /* Signed-out documents: ordinary document scroll, one centered surface. */
  .public-main {
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding: var(--wa-space-2xl) var(--wa-space-m);
  }
  .page-context-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wa-space-s);
    width: 100%;
    min-width: 0;
    padding: var(--wa-space-xs) var(--wa-space-l);
  }

  .breadcrumbs {
    min-width: 0;
  }

  .page-about-trigger {
    display: none;
    flex: none;
  }

  wa-page:has(#page-about) .page-about-trigger {
    display: inline-block;
  }

  .breadcrumbs wa-breadcrumb-item:not(:last-of-type) {
    color: var(--wa-color-text-link);
  }

  .breadcrumbs wa-breadcrumb-item::part(start),
  .breadcrumbs wa-breadcrumb-item::part(end) {
    color: var(--wa-color-text-link);
  }

  .breadcrumbs wa-breadcrumb-item:last-of-type::part(label),
  .breadcrumbs wa-breadcrumb-item::part(separator),
  .page-about-trigger:not([disabled])::part(label),
  .page-about-trigger:not([disabled]) .phosphor-icon {
    color: var(--wa-color-text-loud);
  }

  /* Navigation is authored once. Web Awesome owns its desktop/mobile
     presentation; Rip City owns the selected and nested-rail language. */
  wa-page[view="desktop"] .app-navigation::after {
    content: "";
    display: block;
    flex: 0 0 var(--wa-space-m);
  }

  .app-nav-group {
    --spacing: 0;
  }

  .app-nav-group::part(header) {
    border-radius: var(--wa-border-radius-s);
    color: var(--wa-color-text-quiet);
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    transition:
      background-color var(--wa-transition-fast),
      color var(--wa-transition-fast);
  }

  .app-nav-group::part(header):hover,
  .app-nav-group[open]::part(header) {
    color: var(--wa-color-text-normal);
  }

  .app-nav-group::part(icon) {
    font-size: var(--wa-font-size-xs);
  }

  .app-nav-links {
    min-width: 0;
    margin-block-start: var(--wa-space-3xs);
    padding-inline-start: var(--wa-space-xs);
    border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
  }

  .app-nav-link {
    min-width: 0;
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    transition:
      background-color var(--wa-transition-fast),
      color var(--wa-transition-fast);
  }

  .app-nav-link-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Quiet status capsule after the label. Fixed compact type keeps the link's
     one-line target height in both the desktop rail and the mobile drawer. The
     capsule names the status in text, so meaning never rides on color alone. */
  .app-nav-status {
    flex: none;
    margin-inline-start: auto;
    padding: 0.0625rem var(--wa-space-2xs);
    border: var(--wa-border-width-s) solid
      color-mix(in oklab, currentColor 40%, transparent);
    border-radius: var(--wa-border-radius-pill);
    font-size: var(--wa-font-size-3xs);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .app-nav-status--new {
    color: var(--ripcity-color-indigo-on-soft);
    background: var(--ripcity-color-indigo-soft);
  }

  .app-nav-status--updated {
    color: var(--wa-color-neutral-on-quiet);
    background: var(--wa-color-neutral-fill-quiet);
  }

  .app-nav-icon {
    color: var(--catalog-group-color);
    font-size: var(--wa-font-size-l);
  }

  .app-nav-link:hover {
    color: var(--catalog-group-color);
    background: var(--catalog-group-soft);
  }

  .app-nav-link[aria-current="page"] {
    background: var(--wa-color-neutral-fill-loud);
    color: var(--wa-color-neutral-on-loud);
    font-weight: var(--wa-font-weight-semibold);
  }

  .app-nav-link[aria-current="page"] .app-nav-icon {
    color: var(--wa-color-neutral-on-loud);
  }

  wa-page[view="mobile"]::part(drawer) {
    --size: min(22.5rem, calc(100dvi - 1.5rem));
    --spacing: 0;
  }

  wa-page[view="mobile"]::part(drawer__header) {
    min-block-size: 3.75rem;
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    align-items: center;
  }

  wa-page[view="mobile"]::part(drawer__header-actions) {
    align-self: center;
    padding-inline-start: 0.5rem;
  }

  wa-page[view="mobile"]::part(drawer__close-button__base) {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    padding: 0;
  }

  wa-page[view="mobile"]::part(drawer__close-button) {
    font-size: 1.25rem;
  }

  wa-page[view="mobile"]::part(drawer__body) {
    padding: 0.25rem 0.75rem 1rem;
  }

  wa-page[view="mobile"]::part(drawer__footer) {
    padding: 0;
  }

  wa-page[view="mobile"] > :is(
    .app-navigation-header,
    .app-navigation
  ) {
    padding: 0;
  }

  wa-page[view="mobile"] .app-navigation-header .brand-mark {
    width: 6rem;
    height: 2.25rem;
  }

  wa-page[view="mobile"] .app-navigation {
    gap: 0.75rem;
  }

  wa-page[view="mobile"] .app-nav-group::part(header) {
    min-block-size: 2.75rem;
    padding: 0 0.5rem;
  }

  wa-page[view="mobile"] .app-nav-label {
    font-size: 1rem;
    line-height: 1.2;
  }

  wa-page[view="mobile"] .app-nav-group::part(icon) {
    font-size: 1rem;
  }

  wa-page[view="mobile"] .app-nav-links {
    gap: 0.125rem;
    margin-block-start: 0.125rem;
    padding-inline-start: 0.5rem;
  }

  wa-page[view="mobile"] .app-nav-link {
    min-block-size: 2.75rem;
    gap: 0.625rem;
    padding: 0 0.75rem;
    font-size: 1rem;
    line-height: 1.25;
  }

  wa-page[view="mobile"] .app-nav-icon {
    font-size: 1.5rem;
  }
  /* Keep the compact header aligned with APP_NAVIGATION_BREAKPOINT. */
  @media (width < 72rem) {
    .site-header {
      grid-template-areas: "identity search account color-scheme";
      grid-template-columns: minmax(0, 1fr) max-content max-content max-content;
      gap: var(--wa-space-xs);
    }

    .site-identity {
      grid-area: identity;
    }

    /* Narrow header: the account command condenses to its icon and keeps its
       accessible name from aria-label. */
    .site-account {
      grid-area: account;
      inline-size: var(--wa-form-control-height);
      justify-content: center;
      padding-inline: var(--wa-space-2xs);
    }

    .site-account-label {
      display: none;
    }

    .site-search-command {
      grid-area: search;
      width: var(--wa-form-control-height);
    }

    .site-search-trigger-mobile::part(base) {
      inline-size: var(--wa-form-control-height);
      block-size: var(--wa-form-control-height);
      padding-inline: 0;
    }

    .site-color-scheme-toggle {
      grid-area: color-scheme;
    }

    /* Narrow palette: near-full width under the safe-area inset, a viewport
       bounded panel, touch-sized rows, and no keyboard furniture. */
    .app-search-dialog {
      --app-command-panel-inset-block-start: calc(
        var(--wa-space-s) + env(safe-area-inset-top, 0px)
      );
      --app-command-panel-inset-block-end: var(--wa-space-s);
      --app-command-gutter: var(--wa-space-s);

      --width: calc(100vw - 2 * var(--wa-space-s));
    }

    /* Touch has no pointer position to preserve, so a filtered or empty result
       set can hug its measured content. The complete catalog keeps the stable,
       capped panel and its single results scroller. */
    .app-search-dialog.app-command-filtered::part(dialog) {
      block-size: min(
        var(--app-command-panel-block-size),
        calc(
          var(
              --app-command-results-content-block-size,
              var(--app-command-panel-block-size)
            ) + 6rem
        ),
        calc(
          100dvh - var(--app-command-panel-inset-block-start) -
            var(--app-command-panel-inset-block-end)
        )
      );
    }

    .app-command-input {
      /* iOS Safari zooms focused form controls whose computed text is below 16px. */
      font-size: 16px;
    }

    .app-command-option {
      min-block-size: 44px;
    }

    .app-command-empty {
      min-block-size: 10rem;
    }

    .app-command-footer {
      min-block-size: 2.75rem;
    }

    .app-command-footer > span,
    .app-command-escape,
    .app-command-option[aria-selected="true"]::after {
      display: none;
    }

    .page-context-band {
      padding-inline: var(--wa-space-m);
    }
    .public-main {
      padding: var(--wa-space-xl) var(--wa-space-m);
    }
  }
}