@layer sched.tokens, sched.base, sched.layout, sched.components, sched.postgrest;

/* This sheet imports nothing. A host links tokens.css, schedulance-fonts.css, and (login
   surfaces only) components/auth.css itself, each with its own fingerprint, so every sheet
   reaches the browser once and never in two versions. An @import here would load the child
   a second time at an unfingerprinted URL, and a warm client would keep that copy on a
   heuristic freshness guess across deploys, holding old tokens next to new rules.
   StylesheetDeliveryContractTests keeps it that way. */

@layer sched.base {
  .sched-app {
    color-scheme: light dark;
    min-height: 100%;
    background: var(--sched-bg);
    color: var(--sched-ink);
    font-family: var(--sched-font-ui);
    font-size: var(--sched-app-font-size);
    line-height: var(--sched-app-line-height);
    -webkit-font-smoothing: antialiased;
  }

  .sched-app :where(*, *::before, *::after) {
    box-sizing: border-box;
  }

  @media (prefers-reduced-motion: reduce) {
    .sched-app :where(*, *::before, *::after) {
      animation-duration: var(--sched-motion-reduced);
      animation-iteration-count: 1;
      scroll-behavior: auto;
      transition-duration: var(--sched-motion-reduced);
    }
  }

  .sched-app :where(a) {
    color: var(--sched-brand);
    text-decoration: none;
    transition: color var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where(a:hover) {
    color: var(--sched-brand-hover);
  }

  .sched-app :where(button, input, select, textarea) {
    font: inherit;
  }

  .sched-mono,
  .sched-app :where(.sched-mono, .sched-number, .sched-code, .sched-id, .sched-value) {
    font-family: var(--sched-font-mono);
    font-variant-numeric: tabular-nums;
  }

  .sched-eyebrow,
  .sched-app :where(.sched-eyebrow) {
    color: var(--sched-ink-4);
    font-size: var(--sched-eyebrow-font-size);
    font-weight: var(--sched-eyebrow-font-weight);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

@layer sched.layout {
  .sched-app :where(.sched-brand-name, .sched-brand-subtitle) {
    display: block;
  }

  .sched-app :where(.sched-brand-subtitle) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-breadcrumb, .sched-appbar-actions) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
  }

  /* Ultrawide cap: every visible stack child centers at the app measure. The explicit inline-size
     is load-bearing - auto margins disable the default grid-item stretch. A visually hidden child
     (a page's assistive-only h1) keeps the utility's 1px box: this layer would otherwise widen it
     to the measure and the absolute box would overflow a narrow viewport. */
  .sched-app :where(.sched-page-stack > :not(.sched-visually-hidden)) {
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: var(--sched-measure-app-page);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-detail-layout, .sched-detail-chrome, .sched-detail-tab-body) {
    align-content: start;
    display: grid;
    gap: var(--sched-frame-gap);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-toolbar) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
    padding: 0 var(--sched-space-5-5) var(--sched-space-4);
  }

  .sched-app :where(.sched-stat-grid) {
    display: grid;
    gap: var(--sched-space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .sched-app :where(.sched-kpi-row) {
    display: grid;
    gap: var(--sched-space-2);
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }

  .sched-app :where(.sched-detail-hero) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    display: grid;
    gap: var(--sched-space-4);
    padding: var(--sched-space-4-5);
  }

  .sched-app :where(.sched-dashboard-grid) {
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  }

  .sched-app :where(.sched-panel-grid) {
    align-content: start;
    display: grid;
    gap: var(--sched-space-4);
  }

  .sched-app :where(.sched-status-strip) {
    display: grid;
    gap: var(--sched-space-2-5);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .sched-app :where(.sched-dispatch-layout) {
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  .sched-app :where(.sched-report-grid) {
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @container (max-width: 720px) {
    .sched-app :where(.sched-dashboard-grid, .sched-dispatch-layout, .sched-report-grid) {
      grid-template-columns: 1fr;
    }
  }
}

@layer sched.components {
  .sched-app :where(.sched-button, .sched-icon-button, .sched-filter-chip, .sched-tab, .sched-nav-item) {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--sched-radius-control);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-2);
    justify-content: center;
    min-width: 0;
    text-decoration: none;
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
    white-space: nowrap;
  }

  .sched-app :where(.sched-button) {
    block-size: var(--sched-control-block-size);
    border: 1px solid var(--sched-line-strong);
    box-shadow: none;
    padding: 0 var(--sched-space-4);
  }

  .sched-app :where(.sched-button[data-size="sm"]) {
    block-size: var(--sched-control-compact-block-size);
    padding-inline: var(--sched-space-3);
  }

  .sched-app :where(.sched-button[data-size="lg"]) {
    block-size: var(--sched-size-control-lg);
    padding-inline: var(--sched-space-4-5);
  }

  .sched-app :where(.sched-button[data-size="icon"], .sched-icon-button) {
    aspect-ratio: 1;
    block-size: var(--sched-icon-button-size);
    inline-size: var(--sched-icon-button-size);
    padding: 0;
  }

  .sched-app :where(.sched-button[data-variant="primary"], .sched-icon-button[data-variant="primary"]) {
    background: var(--sched-brand);
    color: #ffffff;
  }

  .sched-app :where(.sched-button[data-variant="secondary"], .sched-icon-button[data-variant="secondary"], .sched-filter-chip, .sched-tab) {
    background: var(--sched-surface);
    border-color: var(--sched-line-strong);
    color: var(--sched-ink-2);
  }

  .sched-app :where(.sched-button[data-variant="quiet"], .sched-icon-button[data-variant="quiet"]) {
    background: transparent;
    color: var(--sched-ink-2);
  }

  .sched-app :where(.sched-button[data-variant="danger"], .sched-icon-button[data-variant="danger"]) {
    background: var(--sched-status-emer-bg);
    border-color: var(--sched-status-emer-bd);
    color: var(--sched-status-emer);
  }

  .sched-app :where(a.sched-button[data-variant="secondary"]) {
    background: var(--sched-surface);
    border-color: var(--sched-line-strong);
    color: var(--sched-ink-2);
  }

  .sched-app :where(.sched-button[data-variant="primary"]:hover, .sched-icon-button[data-variant="primary"]:hover) {
    background: var(--sched-brand-hover);
    border-color: var(--sched-brand-hover);
    color: #ffffff;
  }

  .sched-app :where(.sched-button[data-variant="secondary"]:hover, .sched-icon-button[data-variant="secondary"]:hover, .sched-filter-chip:hover, .sched-tab:hover) {
    background: var(--sched-surface-2);
    border-color: var(--sched-line-strong);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-button[data-variant="quiet"]:hover, .sched-icon-button[data-variant="quiet"]:hover) {
    background: var(--sched-surface-2);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-button[data-variant="danger"]:hover, .sched-icon-button[data-variant="danger"]:hover) {
    border-color: var(--sched-status-emer);
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-menu) {
    display: inline-block;
    position: relative;
  }

  .sched-app :where(.sched-menu-trigger) {
    align-items: center;
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line-strong);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: var(--sched-menu-trigger-font-size);
    font-weight: var(--sched-menu-trigger-font-weight);
    gap: var(--sched-menu-trigger-gap);
    justify-content: center;
    min-block-size: var(--sched-menu-trigger-block-size);
    min-inline-size: 0;
    padding: 0 var(--sched-menu-trigger-padding-inline);
    text-decoration: none;
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
    white-space: nowrap;
  }

  .sched-app :where(.sched-menu-trigger[data-size="sm"]) {
    min-block-size: var(--sched-menu-trigger-compact-block-size);
  }

  .sched-app :where(.sched-menu-trigger[data-size="icon"]) {
    aspect-ratio: 1;
    inline-size: var(--sched-menu-trigger-icon-size);
    min-block-size: var(--sched-menu-trigger-icon-size);
    padding: 0;
  }

  .sched-app :where(.sched-menu-trigger[data-variant="quiet"]) {
    background: transparent;
    border-color: transparent;
  }

  .sched-app :where(.sched-menu-trigger:hover, .sched-menu-trigger[aria-expanded="true"]) {
    background: var(--sched-surface-2);
    border-color: var(--sched-line-strong);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-menu-trigger[aria-expanded="true"]) {
    background: var(--sched-brand-soft);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-menu-trigger:focus-visible) {
    box-shadow: 0 0 0 var(--sched-space-0-75) var(--sched-brand-soft);
    outline: 0;
  }

  .sched-app :where(.sched-menu-content) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    box-shadow: var(--sched-shadow-lift);
    color: var(--sched-ink);
    display: none;
    gap: 0;
    inline-size: max-content;
    inset: auto;
    margin: 0;
    max-block-size: calc(100vh - (var(--sched-menu-viewport-margin) * 2));
    max-inline-size: var(--sched-menu-max-inline-size);
    min-inline-size: var(--sched-menu-min-inline-size);
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sched-menu-padding);
    pointer-events: none;
    position: fixed;
    text-align: start;
    transform: translateY(calc(-1 * var(--sched-menu-motion-offset))) scale(var(--sched-motion-popover-scale));
    transform-origin: top left;
    transition-behavior: allow-discrete;
    transition:
      opacity var(--sched-motion-base) var(--sched-ease-enter),
      transform var(--sched-motion-base) var(--sched-ease-enter),
      overlay var(--sched-motion-base) allow-discrete,
      display var(--sched-motion-base) allow-discrete;
    z-index: var(--sched-menu-z-index);
  }

  .sched-app :where(.sched-menu-content[data-side="top"]) {
    transform: translateY(var(--sched-menu-motion-offset)) scale(var(--sched-motion-popover-scale));
    transform-origin: bottom left;
  }

  .sched-app :where(.sched-menu-content:popover-open) {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .sched-app :where(.sched-menu-content)::backdrop,
  .sched-app :where(.sched-menu-content:popover-open)::backdrop {
    background: transparent;
    opacity: 1;
    pointer-events: none;
  }

  .sched-app :where(.sched-menu-content[data-align="stretch"]) {
    inline-size: anchor-size(width);
  }

  .sched-app :where(.sched-menu-content[data-placement="fallback"]) {
    inline-size: max-content;
  }

  @supports (position-area: bottom) {
    .sched-app :where(.sched-menu-content) {
      position-area: bottom span-right;
      position-try-fallbacks: flip-block, flip-inline;
    }

    .sched-app :where(.sched-menu-content[data-align="end"]) {
      position-area: bottom span-left;
      transform-origin: top right;
    }

    .sched-app :where(.sched-menu-content[data-align="stretch"]) {
      position-area: bottom center;
      transform-origin: top center;
    }

    .sched-app :where(.sched-menu-content[data-side="top"]) {
      position-area: top span-right;
    }

    .sched-app :where(.sched-menu-content[data-side="top"][data-align="end"]) {
      position-area: top span-left;
      transform-origin: bottom right;
    }

    .sched-app :where(.sched-menu-content[data-side="top"][data-align="stretch"]) {
      position-area: top center;
      transform-origin: bottom center;
    }
  }

  @starting-style {
    .sched-app :where(.sched-menu-content:popover-open) {
      opacity: 0;
      transform: translateY(calc(-1 * var(--sched-menu-motion-offset))) scale(var(--sched-motion-popover-scale));
    }

    .sched-app :where(.sched-menu-content[data-side="top"]:popover-open) {
      transform: translateY(var(--sched-menu-motion-offset)) scale(var(--sched-motion-popover-scale));
    }
  }

  .sched-app :where(.sched-menu-label) {
    color: var(--sched-ink-4);
    font-size: var(--sched-menu-label-font-size);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .06em;
    padding: var(--sched-menu-label-padding-block) var(--sched-menu-label-padding-inline);
    text-transform: uppercase;
  }

  .sched-app :where(.sched-menu-separator) {
    background: var(--sched-line-2);
    border: 0;
    block-size: var(--sched-size-rule);
    margin: var(--sched-menu-separator-margin-block) var(--sched-menu-separator-margin-inline);
  }

  .sched-app :where(.sched-menu-item, .sched-menu-submenu-trigger) {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--sched-menu-item-font-size);
    font-weight: var(--sched-font-weight-semibold);
    gap: var(--sched-menu-item-gap);
    inline-size: 100%;
    justify-content: flex-start;
    min-block-size: var(--sched-menu-item-min-block-size);
    min-inline-size: 0;
    padding: var(--sched-menu-item-padding-block) var(--sched-menu-item-padding-inline);
    position: relative;
    text-align: start;
    text-decoration: none;
    transition:
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      color var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-menu-item:hover, .sched-menu-item:focus-visible, .sched-menu-submenu-trigger:hover, .sched-menu-submenu-trigger:focus-visible) {
    background: var(--sched-surface-2);
    color: var(--sched-ink);
    outline: 0;
  }

  .sched-app :where(.sched-menu-item[data-variant="danger"]) {
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-menu-item[data-variant="danger"]:hover, .sched-menu-item[data-variant="danger"]:focus-visible) {
    background: var(--sched-status-emer-bg);
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-menu-item[data-state="checked"]) {
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-menu-item:disabled, .sched-menu-item[aria-disabled="true"], .sched-menu-submenu-trigger:disabled, .sched-menu-submenu-trigger[aria-disabled="true"]) {
    color: var(--sched-ink-4);
    cursor: not-allowed;
    opacity: .62;
  }

  .sched-app :where(.sched-menu-item:disabled:hover, .sched-menu-item[aria-disabled="true"]:hover) {
    background: transparent;
  }

  .sched-app :where(.sched-menu-icon) {
    color: var(--sched-ink-3);
    display: inline-flex;
    flex: 0 0 var(--sched-menu-item-icon-size);
    block-size: var(--sched-menu-item-icon-size);
    inline-size: var(--sched-menu-item-icon-size);
  }

  .sched-app :where(.sched-menu-icon)::before {
    background: currentColor;
    block-size: var(--sched-menu-item-icon-size);
    content: "";
    inline-size: var(--sched-menu-item-icon-size);
    mask: var(--sched-menu-icon-mask) center / contain no-repeat;
  }

  .sched-app :where(.sched-menu-icon[data-icon="profile"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="switch"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 2v5M12 17v5M2 12h5M17 12h5M5.6 5.6l3.5 3.5M14.9 14.9l3.5 3.5M18.4 5.6l-3.5 3.5M9.1 14.9l-3.5 3.5M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="settings"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7-3a7 7 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 0 0-1.7-1L14.5 3h-5l-.3 3a7 7 0 0 0-1.7 1L5.1 6l-2 3.5 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 1.7 1l.3 3h5l.3-3a7 7 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5c.1-.3.1-.7.1-1Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="filter"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16l-6 7v5l-4 2v-7Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="edit"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="download"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 3v12m0 0 4-4m-4 4-4-4M5 21h14'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="columns"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M4 5h16M4 12h16M4 19h16M9 5v14M15 5v14'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="clear"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="logout"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-menu-icon[data-icon="calendar"]) {
    --sched-menu-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M8 3v3M16 3v3M4 10h16M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E");
  }

  /* The caret on a labeled trigger (the planning window, a group-by): the chevron the account
     menu draws, in the trigger's own color, turned up while the menu is open. */
  .sched-app :where(.sched-menu-caret) {
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: var(--sched-space-0-5);
  }

  .sched-app :where(.sched-menu-caret)::before {
    border-color: currentColor;
    border-style: solid;
    border-width: 0 var(--sched-border-width-caret) var(--sched-border-width-caret) 0;
    content: "";
    display: block;
    block-size: var(--sched-menu-caret-size);
    inline-size: var(--sched-menu-caret-size);
    transform: rotate(45deg) translateY(calc(-1 * var(--sched-menu-caret-offset)));
    transition: transform var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-menu-trigger[aria-expanded="true"] .sched-menu-caret)::before {
    transform: rotate(225deg) translate(calc(-1 * var(--sched-menu-caret-offset)), calc(-.5 * var(--sched-menu-caret-offset)));
  }

  .sched-app :where(.sched-menu-item:hover .sched-menu-icon, .sched-menu-submenu-trigger:hover .sched-menu-icon) {
    color: var(--sched-ink-2);
  }

  .sched-app :where(.sched-menu-item[data-variant="danger"] .sched-menu-icon) {
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-menu-text) {
    display: grid;
    gap: var(--sched-space-0-5);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-menu-text > span, .sched-menu-item > span:first-child, .sched-menu-submenu-trigger > span:first-child) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-menu-text small, .sched-menu-meta) {
    color: var(--sched-ink-3);
    font-size: var(--sched-menu-item-meta-font-size);
    font-weight: var(--sched-font-weight-medium);
  }

  .sched-app :where(.sched-menu-shortcut) {
    background: var(--sched-surface-2);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-sm);
    color: var(--sched-ink-4);
    flex: 0 0 auto;
    font-family: var(--sched-font-mono);
    font-size: var(--sched-menu-item-meta-font-size);
    font-weight: var(--sched-font-weight-medium);
    margin-inline-start: auto;
    padding: 0 var(--sched-space-1-5);
  }

  .sched-app :where(.sched-menu-submenu) {
    position: relative;
  }

  .sched-app :where(.sched-menu-content form, .sched-menu-submenu-content form) {
    margin: 0;
  }

  /* The custom range form inside the planning window menu: the two date fields and the apply
     button stack at the item inset, so the panel keeps one column at every width. */
  .sched-app :where(.sched-planning-window-range) {
    display: grid;
    gap: var(--sched-space-2);
    padding: var(--sched-menu-item-padding-block) var(--sched-menu-item-padding-inline);
  }

  .sched-app :where(.sched-menu-submenu-trigger)::after {
    border-color: var(--sched-ink-4);
    border-style: solid;
    border-width: 0 var(--sched-border-width-caret) var(--sched-border-width-caret) 0;
    content: "";
    flex: 0 0 var(--sched-account-caret-size);
    block-size: var(--sched-account-caret-size);
    inline-size: var(--sched-account-caret-size);
    margin-inline-start: auto;
    transform: rotate(-45deg);
  }

  .sched-app :where(.sched-menu-submenu-content) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    box-shadow: var(--sched-shadow-lift);
    display: grid;
    gap: 0;
    inset-block-start: calc(-1 * var(--sched-menu-padding));
    inset-inline-start: calc(100% + var(--sched-menu-submenu-offset));
    max-block-size: calc(100vh - (var(--sched-menu-viewport-margin) * 2));
    min-inline-size: var(--sched-menu-min-inline-size);
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--sched-menu-padding);
    pointer-events: none;
    position: absolute;
    transform: translateX(calc(-1 * var(--sched-menu-motion-offset))) scale(var(--sched-motion-popover-scale));
    transform-origin: top left;
    transition:
      opacity var(--sched-motion-base) var(--sched-ease-enter),
      transform var(--sched-motion-base) var(--sched-ease-enter);
    z-index: calc(var(--sched-menu-z-index) + 1);
  }

  .sched-app :where(.sched-menu-submenu[data-side="left"] > .sched-menu-submenu-content) {
    inset-inline-end: calc(100% + var(--sched-menu-submenu-offset));
    inset-inline-start: auto;
    transform: translateX(var(--sched-menu-motion-offset)) scale(var(--sched-motion-popover-scale));
    transform-origin: top right;
  }

  /* The flyout stands one offset away from its trigger. A pointer crossing that strip used to leave
     the submenu, the close that followed dropped the flyout, and the next click fell through to the
     row under the menu. The bridge is a hit-only extension of the open submenu over the strip, so
     the pointer never leaves. The flyout itself clips its overflow, so the bridge is the wrapper's. */
  .sched-app :where(.sched-menu-submenu[data-state="open"])::after {
    content: "";
    inline-size: var(--sched-menu-submenu-offset);
    inset-block: 0;
    inset-inline-start: 100%;
    position: absolute;
  }

  .sched-app :where(.sched-menu-submenu[data-side="left"][data-state="open"])::after {
    inset-inline-end: 100%;
    inset-inline-start: auto;
  }

  .sched-app :where(.sched-menu-submenu[data-state="open"] > .sched-menu-submenu-content) {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
  }

  .sched-app :where(.sched-menu-submenu[data-state="open"] > .sched-menu-submenu-trigger) {
    background: var(--sched-surface-2);
  }

  @media (hover: hover) and (pointer: fine) {
    .sched-app :where(.sched-menu-submenu:hover > .sched-menu-submenu-content, .sched-menu-submenu:focus-within > .sched-menu-submenu-content) {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(0) scale(1);
    }

    .sched-app :where(.sched-menu-submenu:hover > .sched-menu-submenu-trigger, .sched-menu-submenu:focus-within > .sched-menu-submenu-trigger) {
      background: var(--sched-surface-2);
    }
  }

  .sched-app :where(.sched-account-menu .sched-menu) {
    display: block;
    inline-size: 100%;
  }

  .sched-app :where(.sched-account-menu .sched-menu-trigger) {
    background: transparent;
    border-color: transparent;
    display: grid;
    gap: var(--sched-account-summary-padding-inline);
    grid-template-columns: var(--sched-account-avatar-size) minmax(0, 1fr) var(--sched-account-caret-column-size);
    inline-size: 100%;
    justify-content: stretch;
    min-block-size: calc(var(--sched-account-avatar-size) + (var(--sched-account-summary-padding-block) * 2));
    padding: var(--sched-account-summary-padding-block) var(--sched-account-summary-padding-inline);
    text-align: start;
  }

  .sched-app :where(.sched-account-menu .sched-menu-trigger:hover, .sched-account-menu .sched-menu-trigger[aria-expanded="true"]) {
    background: var(--sched-surface-2);
    border-color: var(--sched-line);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-account-menu .sched-menu-trigger[aria-expanded="true"] .sched-account-caret)::before {
    transform: rotate(225deg) translate(calc(-1 * var(--sched-account-caret-offset)), calc(-.5 * var(--sched-account-caret-offset)));
  }

  .sched-app :where(.sched-account-panel.sched-menu-content) {
    background: var(--sched-surface-2);
    border-color: var(--sched-line);
    inline-size: min(var(--sched-account-menu-inline-size), calc(100vw - (var(--sched-menu-viewport-margin) * 2)));
    min-inline-size: 0;
    overflow: visible;
    padding: var(--sched-account-panel-padding);
  }

  .sched-app :where(.sched-account-panel .sched-menu-submenu-content) {
    min-inline-size: min(var(--sched-account-menu-inline-size), calc(100vw - (var(--sched-menu-viewport-margin) * 2)));
  }

  .sched-app :where(.sched-account-header) {
    display: grid;
    gap: var(--sched-space-2);
    padding: var(--sched-space-1) var(--sched-menu-item-padding-inline);
  }

  .sched-app :where(.sched-account-identity) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-account-appearance) {
    background: var(--sched-bg);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    display: grid;
    gap: var(--sched-space-0-5);
    grid-template-columns: repeat(3, var(--sched-icon-button-size));
    justify-self: start;
    padding: var(--sched-space-0-5);
  }

  .sched-app :where(.sched-account-team-mark) {
    align-items: center;
    background: var(--sched-brand);
    border-radius: var(--sched-radius-avatar);
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 var(--sched-account-team-mark-size);
    block-size: var(--sched-account-team-mark-size);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    inline-size: var(--sched-account-team-mark-size);
    justify-content: center;
  }

  .sched-app :where(.sched-account-panel .sched-menu-submenu-content form:nth-of-type(2n) .sched-account-team-mark) {
    background: var(--sched-status-enroute);
  }

  .sched-app :where(.sched-badge, .sched-meta-chip, .sched-gap-pill) {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--sched-radius-pill);
    display: inline-flex;
    font-size: var(--sched-font-size-xs-plus);
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-1-5);
    max-inline-size: 100%;
    min-height: 22px;
    overflow: hidden;
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
    padding: var(--sched-space-0-75) var(--sched-space-2-25) var(--sched-space-0-75) var(--sched-space-1-75);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-badge)::before {
    background: currentColor;
    block-size: var(--sched-badge-dot-size);
    border-radius: 50%;
    content: "";
    flex: 0 0 var(--sched-badge-dot-size);
    inline-size: var(--sched-badge-dot-size);
  }

  .sched-app :where([data-status="sched"]) {
    --sched-status-color: var(--sched-status-sched);
    --sched-status-bg-color: var(--sched-status-sched-bg);
    --sched-status-bd-color: var(--sched-status-sched-bd);
  }

  .sched-app :where([data-status="enroute"]) {
    --sched-status-color: var(--sched-status-enroute);
    --sched-status-bg-color: var(--sched-status-enroute-bg);
    --sched-status-bd-color: var(--sched-status-enroute-bd);
  }

  .sched-app :where([data-status="onsite"]) {
    --sched-status-color: var(--sched-status-onsite);
    --sched-status-bg-color: var(--sched-status-onsite-bg);
    --sched-status-bd-color: var(--sched-status-onsite-bd);
  }

  .sched-app :where([data-status="done"]) {
    --sched-status-color: var(--sched-status-done);
    --sched-status-bg-color: var(--sched-status-done-bg);
    --sched-status-bd-color: var(--sched-status-done-bd);
  }

  .sched-app :where([data-status="hold"]) {
    --sched-status-color: var(--sched-status-hold);
    --sched-status-bg-color: var(--sched-status-hold-bg);
    --sched-status-bd-color: var(--sched-status-hold-bd);
  }

  .sched-app :where([data-status="emer"]) {
    --sched-status-color: var(--sched-status-emer);
    --sched-status-bg-color: var(--sched-status-emer-bg);
    --sched-status-bd-color: var(--sched-status-emer-bd);
  }

  .sched-app :where(.sched-badge, .sched-meta-chip, .sched-gap-pill, .sched-alert, .sched-toast) {
    background: var(--sched-status-bg-color, var(--sched-status-sched-bg));
    border-color: var(--sched-status-bd-color, var(--sched-status-sched-bd));
    color: var(--sched-status-color, var(--sched-status-sched));
  }

  .sched-app :where(.sched-card, .sched-table-card, .sched-contact-card, .sched-ticket, .sched-stat-card) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
  }

  .sched-app :where(.sched-ticket:hover) {
    box-shadow: var(--sched-shadow-lift);
  }

  .sched-app :where(.sched-card-header, .sched-card-footer, .sched-table-header) {
    align-items: center;
    display: flex;
    gap: var(--sched-section-header-gap);
    justify-content: space-between;
    padding: var(--sched-section-header-padding-block-start) var(--sched-section-header-padding-inline) var(--sched-section-header-padding-block-end);
  }

  .sched-app :where(.sched-card-header, .sched-table-header) {
    border-bottom: 1px solid var(--sched-section-header-border-color);
  }

  .sched-app :where(.sched-card-footer) {
    border-top: 1px solid var(--sched-section-header-border-color);
  }

  .sched-app :where(.sched-card-title, .sched-table-header :is(h1, h2)) {
    color: var(--sched-ink);
    font-size: var(--sched-card-title-font-size);
    font-weight: var(--sched-card-title-font-weight);
    line-height: var(--sched-line-height-snug);
    margin: 0;
  }

  .sched-app :where(.sched-card-content, .sched-table-card) {
    padding: var(--sched-card-padding-block) var(--sched-card-padding-inline);
  }

  .sched-app :where(.sched-stat-label, .sched-stat-sub) {
    display: block;
  }

  .sched-app :where(.sched-stat-label) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-stat-value) {
    display: block;
    font-size: var(--sched-font-size-3xl);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-none);
    margin-block-start: var(--sched-space-1);
  }

  .sched-app :where(.sched-stat-sub) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs-plus);
    font-weight: var(--sched-font-weight-semibold);
    margin-block-start: var(--sched-space-1-75);
  }

  .sched-app :where(.sched-field) {
    display: grid;
    gap: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-form-grid) {
    display: grid;
    gap: var(--sched-space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .sched-app :where(.sched-form-actions) {
    display: flex;
    gap: var(--sched-space-2);
    margin-block-start: var(--sched-space-3-5);
  }

  .sched-app :where(.sched-card form, form.sched-card) {
    padding: var(--sched-card-padding-block) var(--sched-card-padding-inline);
  }

  .sched-app :where(fieldset) {
    border: 0;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .sched-app :where(fieldset > p) {
    display: grid;
    gap: var(--sched-space-1-5);
  }

  /* Base form flow: unclassed semantic form markup inside a card renders with the design system
     by default - a detail page's plain legend + label + control + button sequence must never
     collapse to browser defaults. Element-level and zero-specificity (:where), declared BEFORE
     the classed recipes (.sched-label, .sched-input, .sched-select, .sched-textarea) and every
     component-scoped recipe later in the file, so any opt-in class or data-attribute recipe still
     wins on conflict; .sched-button is declared earlier, so the base button rule excludes it
     explicitly. Direct-child selectors keep classed field structures (.sched-form-grid /
     .sched-field wrappers) untouched. The fieldset caps its own measure so bare full-width
     controls read as a form column inside a wide card. */
  .sched-app :where(.sched-card fieldset) {
    max-inline-size: var(--sched-measure-content);
  }

  .sched-app :where(.sched-card legend) {
    color: var(--sched-ink);
    font-size: var(--sched-card-title-font-size);
    font-weight: var(--sched-card-title-font-weight);
    line-height: var(--sched-line-height-snug);
    margin-block-end: var(--sched-space-3);
    padding: 0;
  }

  .sched-app :where(.sched-card fieldset > label) {
    color: var(--sched-ink-2);
    display: block;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-bold);
    margin-block: var(--sched-space-3) var(--sched-space-1-5);
  }

  /* Mirrors the .sched-input / .sched-select / .sched-textarea recipes (same literals) for bare
     controls; the wrapped select of an st-ref-search combobox is included so the JS-off base
     matches too. */
  .sched-app :where(
    .sched-card fieldset > input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]),
    .sched-card fieldset > select,
    .sched-card fieldset > textarea,
    .sched-card fieldset > st-ref-search select
  ) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line-strong);
    border-radius: var(--sched-radius-control);
    box-sizing: border-box;
    color: var(--sched-ink);
    display: block;
    inline-size: 100%;
    min-height: 36px;
    padding: 0 var(--sched-space-2-75);
  }

  .sched-app :where(.sched-card fieldset > textarea) {
    min-height: 92px;
    padding-block: var(--sched-space-2-25);
    resize: vertical;
  }

  .sched-app :where(
    .sched-card fieldset > input:focus,
    .sched-card fieldset > select:focus,
    .sched-card fieldset > textarea:focus,
    .sched-card fieldset > st-ref-search select:focus
  ) {
    border-color: var(--sched-brand);
    box-shadow: 0 0 0 3px var(--sched-brand-soft);
    outline: 0;
  }

  .sched-app :where(.sched-card fieldset > button:not(.sched-button)) {
    align-items: center;
    background: var(--sched-surface);
    block-size: var(--sched-control-block-size);
    border: 1px solid var(--sched-line-strong);
    border-radius: var(--sched-radius-control);
    box-sizing: border-box;
    color: var(--sched-ink-2);
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-2);
    justify-content: center;
    margin-block-start: var(--sched-space-3-5);
    padding: 0 var(--sched-space-4);
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
    white-space: nowrap;
  }

  .sched-app :where(.sched-card fieldset > button[type="submit"]:not(.sched-button)) {
    background: var(--sched-brand);
    border-color: transparent;
    color: #ffffff;
  }

  /* Page-level alert paragraphs (e.g. a failed mutation's message) read as a status chip, never
     as bare text. */
  .sched-app :where(.sched-page-stack > [role="alert"]) {
    background: var(--sched-status-emer-bg);
    border: 1px solid var(--sched-status-emer-bd);
    border-radius: var(--sched-radius-card);
    color: var(--sched-status-emer);
    font-weight: var(--sched-font-weight-semibold);
    margin: 0;
    padding: var(--sched-space-3) var(--sched-space-4);
  }

  /* Detail tab-body sections stack their cards with the same rhythm as the page stack. */
  .sched-app :where(.sched-equipment-section) {
    align-content: start;
    display: grid;
    gap: var(--sched-space-4);
  }

  .sched-app :where(.sched-label) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-input, .sched-select, .sched-textarea) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line-strong);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink);
    min-height: 36px;
    padding: 0 var(--sched-space-2-75);
    width: 100%;
  }

  .sched-app :where(.sched-textarea) {
    min-height: 92px;
    padding-block: var(--sched-space-2-25);
    resize: vertical;
  }

  .sched-app :where(.sched-input:focus, .sched-select:focus, .sched-textarea:focus) {
    border-color: var(--sched-brand);
    box-shadow: 0 0 0 3px var(--sched-brand-soft);
    outline: 0;
  }

  .sched-app :where(.sched-input[data-invalid="true"], .sched-select[data-invalid="true"], .sched-textarea[data-invalid="true"]) {
    border-color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-toggle) {
    --sched-switch-thumb-position: var(--sched-space-0-5);
    align-items: center;
    appearance: none;
    background-color: var(--sched-line);
    background-image: radial-gradient(
      circle,
      var(--sched-surface) 0 var(--sched-switch-thumb-radius),
      transparent calc(var(--sched-switch-thumb-radius) + var(--sched-size-rule))
    );
    background-position: var(--sched-switch-thumb-position) center;
    background-repeat: no-repeat;
    background-size: var(--sched-switch-thumb-size) var(--sched-switch-thumb-size);
    border: 0;
    border-radius: var(--sched-radius-pill);
    box-shadow: inset 0 0 0 var(--sched-size-rule) var(--sched-line-strong), var(--sched-choice-control-shadow);
    block-size: var(--sched-switch-block-size);
    cursor: pointer;
    display: inline-flex;
    inline-size: var(--sched-switch-inline-size);
    padding: var(--sched-space-0-5);
    transition:
      --sched-switch-thumb-position var(--sched-motion-base) var(--sched-ease-enter),
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      box-shadow var(--sched-motion-fast) var(--sched-ease-standard),
      scale var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-toggle[data-state="checked"], .sched-toggle[aria-checked="true"]) {
    --sched-switch-thumb-position: calc(100% - var(--sched-space-0-5));
    background-color: var(--sched-brand);
    box-shadow: inset 0 0 0 var(--sched-size-rule) color-mix(in srgb, var(--sched-brand) 88%, var(--sched-ink)), var(--sched-choice-control-shadow);
  }

  .sched-app :where(.sched-toggle:active) {
    scale: var(--sched-choice-control-press-scale);
  }

  .sched-app :where(.sched-toggle:focus-visible) {
    box-shadow: 0 0 0 3px var(--sched-brand-soft), inset 0 0 0 var(--sched-size-rule) var(--sched-brand), var(--sched-choice-control-shadow);
    outline: 0;
  }

  .sched-app :where(.sched-toggle:disabled, .sched-toggle[aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .48;
  }

  .sched-app :where(.sched-tabs) {
    align-items: center;
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    display: inline-flex;
    gap: var(--sched-space-0-5);
    padding: var(--sched-space-0-75);
  }

  .sched-app :where(.sched-tab) {
    border-color: transparent;
    min-height: 30px;
    padding: 0 var(--sched-space-3);
  }

  .sched-app :where(.sched-tab[data-active="true"], .sched-filter-chip[data-active="true"], .sched-nav-item[data-active="true"]) {
    background: var(--sched-brand-soft);
    border-color: transparent;
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-catalog-tabs.sched-tabs) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sched-line);
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-tabs-strip-gap);
    inline-size: 100%;
    padding: var(--sched-tabs-strip-padding-block) var(--sched-tabs-strip-padding-inline);
  }

  .sched-app :where(.sched-catalog-tabs .sched-tab) {
    background: transparent;
    border: 0;
    border-bottom: var(--sched-border-width-strong) solid transparent;
    border-radius: 0;
    color: var(--sched-ink-3);
    min-height: 0;
    padding: var(--sched-tabs-strip-tab-padding-block) var(--sched-tabs-strip-tab-padding-inline);
  }

  .sched-app :where(
    .sched-catalog-tabs .sched-tab:hover,
    .sched-catalog-tabs .sched-tab:focus-visible
  ) {
    color: var(--sched-ink);
    scale: 1;
    translate: none;
  }

  .sched-app :where(.sched-catalog-tabs .sched-tab:active, .sched-detail-tabs .sched-tab:active) {
    scale: 1;
    translate: none;
  }

  .sched-app :where(.sched-catalog-tabs .sched-tab[data-active="true"]) {
    background: transparent;
    border-bottom-color: var(--sched-brand);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-search) {
    align-items: center;
    display: flex;
    gap: var(--sched-space-2);
    min-width: min(320px, 100%);
  }

  .sched-app :where(.sched-alert, .sched-toast) {
    border: 1px solid;
    border-radius: var(--sched-radius-card);
    padding: var(--sched-space-3) var(--sched-space-3-5);
  }

  /* A stat card states one number. It was sized like a billboard - 1rem of block padding under a
     30px numeral - so four of them ate the top of a page before any content appeared. The strip is
     the default now: label above value, value at heading size rather than display size, and the
     status stripe narrowed to read as an accent instead of a border. The old billboard proportions
     survive on demand through [data-density="hero"]. */
  .sched-app :where(.sched-stat-card) {
    overflow: hidden;
    padding: var(--sched-space-2-5) var(--sched-space-3-5);
    position: relative;
  }

  /* A stat card rendered as a link is a whole-set filter toggle for the table it summarizes:
     card text colors stay the card's own, and the applied state mirrors the quick-filter chip
     active treatment so the two affordances read as one mechanism. */
  .sched-app :where(a.sched-stat-card) {
    color: inherit;
    cursor: pointer;
    display: block;
    text-decoration: none;
  }

  .sched-app :where(a.sched-stat-card[data-active="true"]) {
    box-shadow: 0 1px 2px rgba(20, 30, 50, .08);
    outline: 2px solid var(--sched-status-color, var(--sched-brand));
    outline-offset: -2px;
  }

  .sched-app :where(.sched-stat-card)::before {
    background: var(--sched-status-color, var(--sched-brand));
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    top: 0;
    width: 3px;
  }

  .sched-app :where(.sched-stat-grid[data-density="hero"] .sched-stat-card) {
    padding: var(--sched-space-4) var(--sched-space-4-25);
  }

  .sched-app :where(.sched-stat-grid[data-density="hero"] .sched-stat-value) {
    font-size: var(--sched-font-size-6xl);
    margin-block-start: var(--sched-space-2-25);
  }

  /* Compact density: detail-page count strips render as slim label+value chips instead of the
     dashboard's full stat cards, so a row of small counts stops dominating the page. */
  .sched-app :where(.sched-stat-grid[data-density="compact"]) {
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), max-content));
  }

  .sched-app :where(.sched-stat-grid[data-density="compact"] .sched-stat-card) {
    align-items: baseline;
    display: flex;
    gap: var(--sched-space-2-5);
    padding: var(--sched-space-2) var(--sched-space-3-5);
  }

  .sched-app :where(.sched-stat-grid[data-density="compact"] .sched-stat-value) {
    font-size: var(--sched-font-size-2xl);
    margin-top: 0;
  }

  .sched-app :where(.sched-kpi, .sched-mini-row, .sched-document-row) {
    align-items: center;
    border-bottom: 1px solid var(--sched-line-2);
    display: flex;
    gap: var(--sched-space-2-5);
    justify-content: space-between;
    min-height: 40px;
    padding: var(--sched-space-2) 0;
  }

  .sched-app :where(.sched-kpi[data-status]) {
    color: var(--sched-status-color);
  }

  .sched-app :where(.sched-status-strip .sched-kpi) {
    background: var(--sched-status-bg-color, var(--sched-surface));
    border: 1px solid var(--sched-status-bd-color, var(--sched-line));
    border-radius: var(--sched-radius-control);
    color: var(--sched-status-color, var(--sched-ink));
    padding: var(--sched-space-2-5) var(--sched-space-3);
  }

  .sched-app :where(.sched-spec-list) {
    display: grid;
    gap: var(--sched-space-2) var(--sched-space-4);
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
  }

  .sched-app :where(.sched-audit-timeline) {
    display: grid;
    gap: var(--sched-space-2-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sched-app :where(.sched-audit-item) {
    border-left: var(--sched-border-width-strong) solid var(--sched-status-bd-color, var(--sched-line-strong));
    padding: 0 0 var(--sched-space-2-5) var(--sched-space-3);
  }

  .sched-app :where(.sched-drawer) {
    background: var(--sched-surface);
    border-left: 1px solid var(--sched-line);
    box-shadow: var(--sched-shadow-lift);
    display: grid;
    gap: var(--sched-space-4);
    max-width: min(440px, 100vw);
    padding: var(--sched-space-4-5);
  }

  .sched-app :where(.sched-drawer[data-state="closed"]) {
    display: none;
  }

  .sched-app :where(.sched-progress-bars, .sched-coverage-bar, .sched-stack-bar, .sched-sparkline) {
    display: grid;
    gap: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-progress-bars [data-bar], .sched-coverage-bar [data-bar], .sched-stack-bar [data-segment]) {
    background: var(--sched-status-color, var(--sched-brand));
    border-radius: var(--sched-radius-pill);
    min-height: 8px;
  }

  .sched-app :where(.sched-bar-chart, .sched-donut, .sched-sparkline, .sched-stack-bar) {
    margin: 0;
  }

  .sched-app :where(.sched-dispatch-board) {
    display: grid;
    gap: var(--sched-space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    overflow-x: auto;
  }

  .sched-app :where(.sched-dispatch-lane, .sched-tech-cell, .sched-job-block, .sched-non-job-block) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
  }

  .sched-app :where(.sched-job-block) {
    border-color: var(--sched-status-bd-color, var(--sched-line));
    color: var(--sched-status-color, var(--sched-ink));
    display: grid;
    gap: var(--sched-space-1-75);
    padding: var(--sched-space-2);
  }

  .sched-app :where(.sched-dispatch-rail) {
    align-content: start;
    display: grid;
    gap: var(--sched-space-2-5);
  }

  .sched-app :where(.sched-dispatch-rail h2, .sched-report-card h2) {
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
  }

  .sched-app :where(.sched-ticket) {
    display: grid;
    gap: var(--sched-space-2);
    padding: var(--sched-space-3);
  }

  .sched-app :where(.sched-ticket h3, .sched-job-block h3) {
    font-size: var(--sched-font-size-md-plus);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
  }

  .sched-app :where(.sched-ticket p, .sched-job-block p, .sched-report-card p) {
    color: var(--sched-ink-2);
    margin: 0;
  }

  .sched-app :where(.sched-lane-header) {
    align-items: center;
    border-bottom: 1px solid var(--sched-line-2);
    display: grid;
    gap: var(--sched-space-2-5);
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    padding: var(--sched-space-3);
  }

  .sched-app :where(.sched-lane-header span span) {
    color: var(--sched-ink-3);
    display: block;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-avatar) {
    align-items: center;
    background: var(--sched-brand-soft);
    border-radius: var(--sched-radius-control);
    color: var(--sched-brand);
    display: inline-flex;
    flex: 0 0 32px;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    height: 32px;
    justify-content: center;
    width: 32px;
  }

  .sched-app :where(.sched-lane-jobs) {
    display: grid;
    gap: var(--sched-space-2-5);
    padding: var(--sched-space-3);
  }

  .sched-app :where(.sched-now-line) {
    background: var(--sched-status-emer);
    inline-size: var(--sched-size-0-5);
  }

  .sched-app :where(.sched-dispatch-legend) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
  }

  .sched-app :where(.sched-report-card) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    display: grid;
    gap: var(--sched-space-3);
    padding: var(--sched-space-4) var(--sched-space-4-5);
  }

  .sched-app :where(a.sched-report-link) {
    color: inherit;
    gap: var(--sched-space-2);
    text-decoration: none;
    transition: border-color 120ms ease;
  }

  .sched-app :where(a.sched-report-link:hover, a.sched-report-link:focus-visible) {
    border-color: var(--sched-brand);
  }

  .sched-app :where(.sched-report-bars) {
    align-items: end;
    display: grid;
    gap: var(--sched-space-2-5);
    grid-template-columns: repeat(7, minmax(34px, 1fr));
    min-height: 180px;
  }

  .sched-app :where(.sched-report-bars label) {
    align-items: center;
    display: grid;
    gap: var(--sched-space-1-5);
    grid-template-rows: max-content minmax(120px, 1fr) max-content;
    justify-items: center;
  }

  .sched-app :where(.sched-report-bars meter) {
    height: 100%;
    writing-mode: vertical-lr;
    width: 18px;
  }

  .sched-app :where(.sched-report-list) {
    display: grid;
    gap: var(--sched-space-2-25);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sched-app :where(.sched-report-list li) {
    align-items: center;
    display: grid;
    gap: var(--sched-space-2-5);
    grid-template-columns: minmax(120px, 1fr) minmax(120px, 1.4fr) max-content;
  }

  .sched-app :where(.sched-report-list meter) {
    accent-color: var(--sched-status-color, var(--sched-brand));
    width: 100%;
  }

  .sched-app :where(.sched-report-donut) {
    align-items: center;
    aspect-ratio: 1;
    background:
      radial-gradient(circle at center, var(--sched-surface) 0 52%, transparent 53%),
      conic-gradient(var(--sched-status-onsite) 0 91%, var(--sched-line) 91% 100%);
    border-radius: 50%;
    display: grid;
    justify-self: center;
    place-items: center;
    width: min(180px, 70%);
  }

  .sched-app :where(.sched-report-donut strong, .sched-report-donut span) {
    grid-area: 1 / 1;
  }

  .sched-app :where(.sched-report-donut strong) {
    font-size: var(--sched-font-size-6xl);
    font-weight: var(--sched-font-weight-extrabold);
    transform: translateY(-8px);
  }

  .sched-app :where(.sched-report-donut span) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-bold);
    transform: translateY(18px);
  }
}

@layer sched.postgrest {
  .sched-app :where([data-postgrest-table], [data-postgrest-relation]) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
  }

  .sched-app :where([data-postgrest-table] caption, [data-postgrest-relation] caption) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-extrabold);
    padding: var(--sched-section-header-padding-block-start) var(--sched-section-header-padding-inline) var(--sched-section-header-padding-block-end);
    text-align: left;
  }

  .sched-app :where([data-postgrest-table] table, [data-postgrest-relation] table) {
    border-collapse: collapse;
    width: 100%;
  }

  .sched-app :where([data-postgrest-table] th, [data-postgrest-table] td, [data-postgrest-relation] th, [data-postgrest-relation] td) {
    border-bottom: 1px solid var(--sched-line-2);
    padding: var(--sched-postgrest-head-padding-block) var(--sched-workbook-row-padding-inline);
  }

  .sched-app :where([data-postgrest-search], [data-postgrest-filter], [data-postgrest-pager]) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
  }

  .sched-app :where([data-postgrest-action]) {
    color: var(--sched-brand);
    font-weight: var(--sched-font-weight-bold);
  }
}

@layer sched.layout {
  /* The empty-BOM guidance is server-rendered; once the dialog's picker carries a real selection
     (the inline create commits in place without a re-render), the note is stale - hide it. */
  .sched-app :where([popover]:has(select[name="ModelPartId"] option:checked:not([value=""]))) :where([data-maintenance-empty-bom-note]) {
    display: none;
  }
}

/* v4 production lift: snow-tree/products/schedulance/schedulance-design/assets/reference-bundle/Schedulance - App v4.html */
@layer sched.base {
  html:has(body.sched-app) {
    block-size: 100%;
  }

  body.sched-app {
    block-size: 100vh;
    margin: 0;
    min-block-size: 100vh;
    overflow: hidden;
  }

  .sched-app :where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) {
    margin: 0;
  }

  .sched-app :where(
    .sched-visually-hidden,
    .sched-filter-control button[type="submit"],
    [data-postgrest-search-submit-label],
    [data-postgrest-search-clear-label],
    [data-postgrest-column-filter-button-label],
    .sched-resource-table[data-postgrest-table] > caption,
    .sched-resource-table[data-postgrest-relation] > caption,
    [data-postgrest-table-settings-summary],
    [data-postgrest-sort-instructions],
    st-ref-search [data-ref-search-status][data-ref-search-status-count]
  ) {
    block-size: var(--sched-size-a11y-hidden);
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: var(--sched-size-a11y-hidden);
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
  }
}

@layer sched.layout {
  .sched-app :where(.sched-shell) {
    background: var(--sched-bg);
    block-size: 100vh;
    container-type: inline-size;
    display: grid;
    grid-template-columns: var(--sched-shell-sidebar-inline-size) minmax(0, 1fr);
    min-block-size: 0;
    overflow: hidden;
  }

  .sched-app :where(.sched-sidebar) {
    background: var(--sched-surface);
    border-right: 1px solid var(--sched-line);
    display: flex;
    flex-direction: column;
    gap: 0;
    min-block-size: 0;
    overflow: hidden;
    padding: 0;
  }

  /* The brand row is the sidebar half of the same top chrome band the appbar draws in the main
     column, so it reads the band token rather than a padding pair of its own. Its own pair came to
     3.375rem around a 1.625rem mark - height the row never used - and it tracked the appbar only by
     coincidence, so trimming the appbar left the two rows nine pixels apart. One token, two
     columns, and the mark centres in the band. */
  .sched-app :where(.sched-brand) {
    align-items: center;
    color: var(--sched-ink);
    display: flex;
    flex: 0 0 auto;
    font-size: var(--sched-brand-font-size);
    font-weight: var(--sched-font-weight-extrabold);
    gap: var(--sched-space-2-5);
    letter-spacing: 0;
    min-block-size: var(--sched-shell-appbar-block-size);
    padding: 0 var(--sched-frame-gap);
  }

  .sched-app :where(.sched-brand:hover) {
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-brand-mark) {
    align-items: center;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='t' gradientUnits='userSpaceOnUse' x1='6' y1='2' x2='42' y2='46'%3E%3Cstop offset='0' stop-color='%232E6BD6'/%3E%3Cstop offset='1' stop-color='%23163C86'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' gradientUnits='userSpaceOnUse' x1='24' y1='0' x2='24' y2='20'%3E%3Cstop offset='0' stop-color='%23FFFFFF' stop-opacity='.16'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' gradientUnits='userSpaceOnUse' x1='24' y1='9' x2='24' y2='39'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.4' stop-color='%23FFFFFF'/%3E%3Cstop offset='.74' stop-color='%237FE0BC'/%3E%3Cstop offset='1' stop-color='%2316C98A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='48' height='48' fill='url(%23t)'/%3E%3Crect width='48' height='48' fill='url(%23h)'/%3E%3Cpath d='M36 13 H14 V24 H34 V35 H12' fill='none' stroke='url(%23s)' stroke-width='7.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    border-radius: var(--sched-brand-mark-radius);
    color: transparent;
    display: inline-flex;
    flex: 0 0 var(--sched-brand-mark-size);
    font-weight: var(--sched-font-weight-extrabold);
    justify-content: center;
    block-size: var(--sched-brand-mark-size);
    inline-size: var(--sched-brand-mark-size);
  }

  .sched-app :where(.sched-brand-name) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-sidebar-group) {
    display: grid;
    gap: 0;
    padding: 0 var(--sched-sidebar-inner-padding-inline);
  }

  .sched-app :where(.sched-sidebar-group:first-of-type .sched-nav-heading) {
    margin-block-start: var(--sched-space-1);
  }

  .sched-app :where(.sched-nav-heading) {
    color: var(--sched-ink-4);
    font-size: var(--sched-font-size-2xs-plus);
    font-weight: var(--sched-font-weight-bold);
    letter-spacing: .07em;
    margin: var(--sched-space-4) 0 var(--sched-space-1-5);
    padding: 0 var(--sched-sidebar-pill-padding-inline);
    text-transform: uppercase;
  }

  .sched-app :where(.sched-account-menu) {
    border-top: 1px solid var(--sched-line);
    margin-top: auto;
    padding: var(--sched-account-region-padding-block) var(--sched-account-region-padding-inline);
    position: relative;
    z-index: 4;
  }

  .sched-app :where(.sched-account-avatar, .sched-tech-avatar, .sched-avatar) {
    align-items: center;
    background: var(--sched-ink);
    border-radius: var(--sched-radius-avatar);
    color: #ffffff;
    display: inline-flex;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    justify-content: center;
  }

  .sched-app :where(.sched-account-avatar) {
    block-size: var(--sched-account-avatar-size);
    inline-size: var(--sched-account-avatar-size);
  }

  .sched-app :where(.sched-account-copy) {
    display: grid;
    gap: var(--sched-space-0-5);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-account-copy strong) {
    color: var(--sched-ink);
    font-size: var(--sched-account-font-size);
    font-weight: var(--sched-font-weight-bold);
    line-height: var(--sched-line-height-tight);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-account-copy span) {
    color: var(--sched-ink-3);
    font-size: var(--sched-account-meta-font-size);
  }

  .sched-app :where(.sched-account-caret)::before {
    border-color: var(--sched-ink-4);
    border-style: solid;
    border-width: 0 var(--sched-border-width-caret) var(--sched-border-width-caret) 0;
    content: "";
    display: block;
    block-size: var(--sched-account-caret-size);
    inline-size: var(--sched-account-caret-size);
    transform: rotate(45deg) translateY(calc(-1 * var(--sched-account-caret-offset)));
    transition: transform var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-account-panel) {
    display: grid;
    gap: var(--sched-account-panel-gap);
  }

  .sched-app :where(.sched-account-team) {
    display: grid;
    gap: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-account-team > span) {
    color: var(--sched-ink-4);
    font-size: var(--sched-account-team-label-font-size);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .sched-app :where(.sched-account-team strong) {
    color: var(--sched-ink);
    font-size: var(--sched-account-team-title-font-size);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-snug);
  }

  .sched-app :where(.sched-account-team form) {
    display: grid;
    gap: var(--sched-space-2);
  }

  .sched-app :where(.sched-account-team select) {
    appearance: none;
    background:
      linear-gradient(45deg, transparent 50%, var(--sched-ink-3) 50%),
      linear-gradient(135deg, var(--sched-ink-3) 50%, transparent 50%),
      var(--sched-surface);
    background-position:
      calc(100% - var(--sched-select-caret-position-end)) 50%,
      calc(100% - var(--sched-select-caret-position-start)) 50%,
      0 0;
    background-repeat: no-repeat;
    background-size: var(--sched-select-caret-size) var(--sched-select-caret-size), var(--sched-select-caret-size) var(--sched-select-caret-size), auto;
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink);
    font-size: var(--sched-account-select-font-size);
    font-weight: var(--sched-font-weight-bold);
    min-block-size: var(--sched-size-8-5);
    padding: 0 var(--sched-space-7-5) 0 var(--sched-space-2-5);
  }

  .sched-app :where(.sched-account-action) {
    align-items: center;
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    display: flex;
    font-size: var(--sched-account-action-font-size);
    font-weight: var(--sched-font-weight-medium);
    gap: var(--sched-space-2-5);
    justify-content: flex-start;
    min-block-size: var(--sched-postgrest-inline-control-block-size);
    padding: 0 var(--sched-space-2-5);
  }

  /* The item already pads its block; the two-line copy needs no second layer of it, or the team
     row stands almost twice as tall as the single-line rows under it. */
  .sched-app :where(.sched-account-action .sched-account-copy) {
    flex: 1;
  }

  .sched-app :where(.sched-account-action:hover, .sched-account-action:focus-visible) {
    background: var(--sched-surface);
    color: var(--sched-ink);
    outline: 0;
  }

  .sched-app :where(.sched-main) {
    background: var(--sched-bg);
    display: grid;
    /* max-content, not a number: the appbar states its own band once through
       --sched-shell-appbar-block-size, and a fixed track here would reserve height beside it. */
    grid-template-rows: max-content minmax(0, 1fr);
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
  }

  .sched-app :where(.sched-mobile-sidebar-backdrop) {
    display: none;
  }

  .sched-app :where(.sched-appbar) {
    align-items: center;
    background: var(--sched-surface);
    border-bottom: 1px solid var(--sched-line);
    display: flex;
    gap: var(--sched-space-4);
    justify-content: space-between;
    min-block-size: var(--sched-shell-appbar-block-size);
    padding: 0 var(--sched-frame-gap);
  }

  .sched-app :where(.sched-breadcrumb) {
    color: var(--sched-ink-3);
    flex: 0 1 auto;
    flex-wrap: nowrap;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-semibold);
    gap: var(--sched-space-2);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-breadcrumb a) {
    color: var(--sched-ink-3);
  }

  .sched-app :where(.sched-breadcrumb [aria-current="page"]) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-appbar-actions) {
    flex: 1 1 auto;
    gap: var(--sched-space-3);
    justify-content: flex-end;
    min-inline-size: 0;
  }

  .sched-app :where(.sched-page-stack) {
    align-content: start;
    display: grid;
    gap: var(--sched-frame-gap);
    min-block-size: 0;
    overflow: clip auto;
    padding: var(--sched-frame-gap) var(--sched-page-stack-padding-inline);
  }

  @media (max-width: 860px) {
    .sched-app :where(.sched-shell) {
      grid-template-columns: minmax(0, 1fr);
      inline-size: 100%;
      max-inline-size: 100%;
    }

    .sched-app :where(.sched-main, .sched-appbar, .sched-page-stack) {
      max-inline-size: 100%;
      min-inline-size: 0;
    }

    .sched-app :where(.sched-sidebar) {
      display: none;
    }

    .sched-app[data-sched-shell="interactive"] :where(.sched-sidebar) {
      block-size: 100dvh;
      box-shadow: var(--sched-shadow-lift);
      display: flex;
      inline-size: var(--sched-mobile-sidebar-inline-size);
      inset-block: 0;
      inset-inline-start: 0;
      max-inline-size: calc(100vw - var(--sched-space-8));
      overscroll-behavior: contain;
      pointer-events: none;
      position: fixed;
      transform: translateX(-100%);
      transition: transform var(--sched-motion-overlay) var(--sched-ease-enter);
      z-index: var(--sched-mobile-sidebar-z-index);
    }

    .sched-app[data-sched-mobile-nav="open"] :where(.sched-sidebar) {
      pointer-events: auto;
      transform: translateX(0);
    }

    .sched-app[data-sched-shell="interactive"] :where(.sched-mobile-sidebar-backdrop) {
      appearance: none;
      background: var(--sched-overlay-scrim);
      border: 0;
      cursor: pointer;
      display: block;
      inset: 0;
      opacity: 0;
      padding: 0;
      pointer-events: none;
      position: fixed;
      transition:
        opacity var(--sched-motion-overlay) var(--sched-ease-standard),
        visibility 0s linear var(--sched-motion-overlay);
      visibility: hidden;
      z-index: var(--sched-mobile-sidebar-backdrop-z-index);
    }

    .sched-app[data-sched-mobile-nav="open"] :where(.sched-mobile-sidebar-backdrop) {
      opacity: 1;
      pointer-events: auto;
      transition-delay: 0s;
      visibility: visible;
    }

    .sched-app :where(.sched-appbar-search) {
      display: none;
    }
  }
}

@layer sched.components {
  .sched-app :where(.sched-nav-item) {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    display: grid;
    font-size: var(--sched-nav-font-size);
    font-weight: var(--sched-nav-font-weight);
    gap: var(--sched-space-2-75);
    grid-template-columns: var(--sched-nav-icon-size) minmax(0, 1fr) max-content;
    justify-content: stretch;
    min-block-size: var(--sched-size-9-5);
    padding: 0 var(--sched-sidebar-pill-padding-inline);
    text-align: start;
    width: 100%;
  }

  .sched-app :where(.sched-nav-item:hover) {
    background: var(--sched-surface-2);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-nav-item:not(:disabled):not([aria-disabled="true"]):active) {
    scale: var(--sched-motion-active-scale);
  }

  .sched-app :where(.sched-nav-item:disabled, .sched-nav-item[aria-disabled="true"]) {
    color: var(--sched-ink-4);
    cursor: default;
  }

  .sched-app :where(.sched-nav-item:disabled:hover, .sched-nav-item[aria-disabled="true"]:hover) {
    background: transparent;
    color: var(--sched-ink-4);
  }

  .sched-app :where(.sched-nav-item[data-active="true"]) {
    background: var(--sched-brand-soft);
    box-shadow: none;
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-nav-label) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-nav-count) {
    background: var(--sched-line);
    border-radius: var(--sched-radius-avatar);
    color: var(--sched-ink-2);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-nav-count-font-size);
    font-weight: var(--sched-nav-count-font-weight);
    line-height: var(--sched-nav-count-line-height);
    min-inline-size: var(--sched-nav-count-min-inline-size);
    padding: 0 var(--sched-space-1-75);
    text-align: center;
  }

  .sched-app :where(.sched-nav-item[data-active="true"] .sched-nav-count) {
    background: var(--sched-surface);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-nav-count[data-tone="danger"]) {
    background: var(--sched-status-emer-bg);
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-nav-count[data-tone="soon"]) {
    background: var(--sched-surface-2);
    color: var(--sched-ink-4);
    font-family: var(--sched-font-ui);
    font-size: var(--sched-font-size-2xs-plus);
    font-weight: var(--sched-font-weight-bold);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-nav-icon) {
    align-items: center;
    color: currentColor;
    display: inline-flex;
    block-size: var(--sched-nav-icon-size);
    inline-size: var(--sched-nav-icon-size);
    justify-content: center;
  }

  .sched-app :where(.sched-nav-icon)::before {
    background: currentColor;
    block-size: var(--sched-nav-icon-size);
    content: "";
    inline-size: var(--sched-nav-icon-size);
    mask: var(--sched-nav-mask) center / contain no-repeat;
  }

  .sched-app :where(.sched-nav-icon[data-icon="dashboard"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="dispatch"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 4h18v17H3zM3 9h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="jobs"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 3h6v3H9zM4 6h16v15H4zM9 12h6M9 16h4'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="due"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M21 12a9 9 0 1 1-3-6.7M21 3v5h-5M12 8v4l2 2'/%3E%3C/svg%3E");
  }

  /* Equipment is a machine a team services: an appliance with its controls and drum. Inventory
     keeps the carton below - the parts a team stocks. The two drew one box until 2026-09-06,
     which made the sidebar's two most-used records read as the same destination. */
  .sched-app :where(.sched-nav-icon[data-icon="equipment"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5 3h14v18H5zM8.5 6.5h.01M15.5 6.5h.01M12 18a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="inventory"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m12 2 9 5-9 5-9-5 9-5Zm-9 5v10l9 5 9-5V7M12 12v10'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="clients"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm13 10v-2a4 4 0 0 0-3-3.9'/%3E%3C/svg%3E");
  }

  /* Parts demand is stock leaving the shelf: a carton with the quantity drawn down. Reports keeps
     the chart. The two shared the chart while Parts demand sat in Records; it reads beside Service
     due now, so it needs its own glyph. */
  .sched-app :where(.sched-nav-icon[data-icon="demand"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 3h18v4H3zM5 7v14h14V7M12 11v6M9 14l3 3 3-3'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="reports"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 3v18h18M7 15l3-3 3 3 5-7'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="catalogs"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m2 7 10 5 10-5-10-5-10 5Zm0 5 10 5 10-5M2 17l10 5 10-5'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-nav-icon[data-icon="settings"]) {
    --sched-nav-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm7-3a7 7 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7 7 0 0 0-1.7-1L14.5 3h-5l-.3 3a7 7 0 0 0-1.7 1L5.1 6l-2 3.5 2 1.5a7 7 0 0 0 0 2l-2 1.5 2 3.5 2.4-1a7 7 0 0 0 1.7 1l.3 3h5l.3-3a7 7 0 0 0 1.7-1l2.4 1 2-3.5-2-1.5c.1-.3.1-.7.1-1Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-appbar-search) {
    align-items: center;
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-3);
    display: flex;
    gap: var(--sched-space-2);
    inline-size: min(var(--sched-measure-search-wide), 34vw);
    min-block-size: var(--sched-size-8-5);
    padding: 0 var(--sched-space-2-75);
  }

  .sched-app :where(.sched-appbar-search)::before {
    background: currentColor;
    block-size: var(--sched-search-icon-size);
    content: "";
    display: block;
    inline-size: var(--sched-search-icon-size);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='m21 21-4.4-4.4M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .sched-app :where(.sched-appbar-search input) {
    background: transparent;
    border: 0;
    color: var(--sched-ink);
    flex: 1;
    font-size: var(--sched-font-size-md);
    min-inline-size: 0;
    outline: 0;
  }

  .sched-app :where(.sched-appbar-search input::placeholder) {
    color: var(--sched-ink-3);
  }

  .sched-app :where(.sched-icon-button) {
    align-items: center;
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    box-sizing: border-box;
    color: var(--sched-ink-2);
    display: inline-flex;
    flex: 0 0 var(--sched-icon-button-size);
    block-size: var(--sched-icon-button-size);
    inline-size: var(--sched-icon-button-size);
    justify-content: center;
    position: relative;
  }

  .sched-app :where(.sched-icon-button:hover) {
    background: var(--sched-surface-2);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-icon-button[disabled], .sched-icon-button[aria-disabled="true"]) {
    cursor: not-allowed;
    opacity: .48;
  }

  .sched-app :where(.sched-mobile-nav-toggle) {
    display: none;
  }

  .sched-app :where(.sched-mobile-nav-toggle > span:first-child)::before {
    background: currentColor;
    block-size: var(--sched-size-icon-lg);
    content: "";
    display: block;
    inline-size: var(--sched-size-icon-lg);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .sched-app :where(.sched-mobile-nav-toggle[data-sched-mobile-nav="open"] > span:first-child)::before {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  @media (max-width: 860px) {
    .sched-app[data-sched-shell="interactive"] :where(.sched-mobile-nav-toggle) {
      display: inline-flex;
    }
  }

  .sched-app :where(.sched-notification-button > span:first-child)::before {
    background: currentColor;
    block-size: var(--sched-size-4-25);
    content: "";
    display: block;
    inline-size: var(--sched-size-4-25);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round' d='M18 8a6 6 0 1 0-12 0c0 7-3 7-3 7h18s-3 0-3-7ZM13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .sched-app :where(.sched-button, .sched-filter-control) {
    align-items: center;
    border-radius: var(--sched-control-radius);
    display: inline-flex;
    font-size: var(--sched-button-font-size);
    font-weight: var(--sched-button-font-weight);
    min-block-size: var(--sched-control-block-size);
    white-space: nowrap;
  }

  /* The recipes above set display, which beats the hidden attribute's user-agent rule, so a
     control a script hides (the client filter's apply button once the select submits on change)
     hides here, after the last recipe that sets it. */
  .sched-app :where(.sched-button[hidden], .sched-icon-button[hidden], .sched-filter-control[hidden]) {
    display: none;
  }

  .sched-app :where(.sched-button[data-variant="primary"]) {
    background: var(--sched-brand);
    border-color: var(--sched-brand);
    color: #ffffff;
  }

  .sched-app :where(.sched-button[data-variant="primary"]:hover) {
    background: var(--sched-brand-hover);
    color: #ffffff;
  }

  .sched-app :where(.sched-button[aria-disabled="true"]) {
    cursor: default;
  }

  .sched-app :where(.sched-button[aria-disabled="true"]:hover) {
    background: var(--sched-brand);
    scale: 1;
    translate: none;
  }

  .sched-app :where(.sched-filter-control) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    color: var(--sched-ink-2);
    gap: var(--sched-space-1-75);
    padding: 0 var(--sched-space-3);
  }

  .sched-app :where(.sched-filter-control > span, .sched-filter-control > label) {
    color: var(--sched-ink-3);
    font-weight: var(--sched-font-weight-medium);
  }

  .sched-app :where(.sched-filter-control select) {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--sched-ink);
    cursor: pointer;
    font: inherit;
    font-weight: var(--sched-font-weight-extrabold);
    min-inline-size: 0;
    outline: 0;
    padding: 0 var(--sched-space-3-5) 0 0;
  }

  .sched-app :where(.sched-filter-control)::after {
    color: var(--sched-ink-4);
    content: "▾";
    font-size: var(--sched-font-size-2xs);
  }

  /* The one header row of every PostgREST table shell: the title block, the quick-filter strip and
     the controls panel (search, settings, actions) in that order. Layout, padding and border come
     from the shared card-header recipe above. The title block and the panel are two wings that
     grow equally from a zero basis (see .sched-table-titleblock and the panel rule), so the strip
     between them sits on the row's midline while both wings are above their floors; the panel
     aligns its own content to the inline end, so the search and the actions still read right,
     and a row with no strip reads title left, tools right. The row never wraps: a wrapping row
     put the tools under the chip strip as soon as the strip's content was wide, while every part
     can shrink instead - the title block wraps its text above its measure floor, the chip strip
     scrolls, the search field narrows to its minimum measure. The narrow-viewport media query
     below stacks the parts on a grid. */
  .sched-app :where(.sched-table-header) {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  /* Quick-filter chip strip: the recipe drives the CSS-free PostgrestQuickFilters seams
     (nav[data-postgrest-quick-filters] of a[data-postgrest-quick-filter] links with an optional
     count pill) - the formalized replacement for the app-authored tab-chip strips. */
  .sched-app :where([data-postgrest-quick-filters]) {
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-avatar);
    display: flex;
    flex: 0 1 auto;
    gap: var(--sched-space-1);
    /* A flex item's implicit min-inline-size:auto defeats overflow-x - without this the strip
       blows past the card edge and gets clipped instead of scrolling. */
    min-inline-size: 0;
    overflow-x: auto;
    padding: var(--sched-space-0-75);
    scrollbar-width: thin;
  }

  .sched-app :where([data-postgrest-quick-filter]) {
    align-items: center;
    border-radius: var(--sched-radius-md);
    color: var(--sched-ink-3);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-1-75);
    min-block-size: var(--sched-size-8-25);
    padding: 0 var(--sched-space-3-25);
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      box-shadow var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where([data-postgrest-quick-filter]:hover) {
    color: var(--sched-ink);
  }

  .sched-app :where([data-postgrest-quick-filter][data-active="true"]) {
    background: var(--sched-surface);
    box-shadow: 0 1px 2px rgba(20, 30, 50, .08);
    color: var(--sched-ink);
  }

  .sched-app :where([data-postgrest-quick-filter-count]) {
    background: var(--sched-line);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-counter-sm);
    min-inline-size: var(--sched-size-5-5);
    padding: 0 var(--sched-space-1-5);
    text-align: center;
  }

  .sched-app :where([data-postgrest-quick-filter][data-active="true"] [data-postgrest-quick-filter-count]) {
    background: var(--sched-brand-soft);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-wo-link) {
    color: var(--sched-ink-2);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-cell-title) {
    color: var(--sched-ink);
    display: block;
    font-size: var(--sched-font-size-md-plus);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-title);
  }

  .sched-app :where(.sched-cell-sub, .sched-muted) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-medium);
  }

  .sched-app :where(.sched-cell-sub) {
    display: block;
    margin-block-start: var(--sched-space-0-5);
  }

  .sched-app :where(.sched-tech-cell) {
    align-items: center;
    display: inline-flex;
    gap: var(--sched-space-2);
    white-space: nowrap;
  }

  .sched-app :where(.sched-tech-avatar) {
    block-size: var(--sched-size-7-5);
    color: #ffffff;
    font-size: var(--sched-font-size-2xs-plus);
    inline-size: var(--sched-size-7-5);
  }

  .sched-app :where(.sched-priority-pill) {
    border: 1px solid var(--sched-line-strong);
    border-radius: var(--sched-radius-md);
    color: var(--sched-ink-2);
    display: inline-flex;
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-counter-lg);
    padding: 0 var(--sched-space-1-75);
  }

  .sched-app :where(.sched-priority-pill[data-priority="p1"]) {
    background: var(--sched-status-emer-bg);
    border-color: var(--sched-status-emer-bd);
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-parts-progress) {
    display: inline-grid;
    gap: var(--sched-space-0-75);
    grid-template-columns: repeat(3, 7px);
    margin-inline-end: var(--sched-space-2);
    vertical-align: middle;
  }

  .sched-app :where(.sched-parts-progress)::before,
  .sched-app :where(.sched-parts-progress)::after,
  .sched-app :where(.sched-parts-progress span) {
    background: color-mix(in srgb, var(--sched-ink-4) 28%, transparent);
    content: "";
    display: block;
    block-size: var(--sched-size-3-5);
    inline-size: var(--sched-size-1-75);
  }

  .sched-app .sched-parts-progress[data-state="ready"]::before,
  .sched-app .sched-parts-progress[data-state="ready"]::after,
  .sched-app .sched-parts-progress[data-state="ready"] span {
    background: var(--sched-status-onsite);
  }

  .sched-app :where(.sched-detail-back) {
    align-items: center;
    color: var(--sched-ink-3);
    display: inline-flex;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-extrabold);
    margin-block: var(--sched-space-3-5) calc(-1 * var(--sched-space-1-5));
    text-decoration: none;
  }

  .sched-app :where(.sched-detail-back)::before {
    content: "‹";
    margin-inline-end: var(--sched-space-2);
  }

  .sched-app :where(.sched-client-hero, .sched-catalog-detail-hero) {
    align-items: start;
    background: transparent;
    border: 0;
    display: grid;
    gap: var(--sched-space-4-5);
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    padding: 0;
  }

  .sched-app :where(.sched-catalog-detail-icon) {
    align-items: center;
    background: var(--sched-brand);
    border-radius: var(--sched-radius-xl);
    color: #ffffff;
    display: inline-flex;
    font-size: var(--sched-font-size-2xl);
    font-weight: var(--sched-font-weight-extrabold);
    block-size: var(--sched-size-16);
    justify-content: center;
    inline-size: var(--sched-size-16);
  }

  .sched-app :where(.sched-catalog-detail-icon[data-tone="green"]) {
    background: var(--sched-status-onsite);
  }

  .sched-app :where(.sched-catalog-detail-icon[data-tone="violet"]) {
    background: #6d4cc8;
  }

  .sched-app :where(.sched-catalog-detail-icon[data-tone="red"]) {
    background: var(--sched-status-emer);
  }

  .sched-app :where(.sched-client-avatar) {
    align-items: center;
    background: var(--sched-brand-soft);
    border-radius: var(--sched-radius-xl);
    color: var(--sched-brand);
    display: inline-flex;
    font-size: var(--sched-font-size-2xl);
    font-weight: var(--sched-font-weight-extrabold);
    block-size: var(--sched-size-15);
    justify-content: center;
    inline-size: var(--sched-size-15);
  }

  .sched-app :where(.sched-client-hero-main, .sched-catalog-detail-main) {
    display: grid;
    gap: var(--sched-space-1-5);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-client-hero-main h1, .sched-catalog-detail-main h1) {
    font-size: var(--sched-font-size-4xl);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: 0;
    line-height: var(--sched-line-height-compact);
    margin: 0;
  }

  .sched-app :where(.sched-client-hero-main p:not(.sched-eyebrow), .sched-catalog-detail-main p:not(.sched-eyebrow)) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-md-plus);
  }

  .sched-app :where(.sched-meta-row, .sched-client-hero-actions, .sched-catalog-detail-actions) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
  }

  .sched-app :where(.sched-meta-chip span:first-child) {
    color: var(--sched-ink-4);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-meta-chip a) {
    color: inherit;
    text-decoration: none;
  }

  .sched-app :where(.sched-client-hero-actions, .sched-catalog-detail-actions) {
    justify-content: end;
  }

  .sched-app :where(.sched-catalog-detail-chip-list .sched-meta-chip) {
    background: var(--sched-surface);
    border-color: var(--sched-line);
    color: var(--sched-ink-2);
  }

  .sched-app :where(.sched-catalog-detail-chip-list .sched-meta-chip a) {
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-client-kpis) {
    gap: var(--sched-space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .sched-app :where(.sched-client-kpi) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-panel);
    display: grid;
    gap: var(--sched-space-1-25);
    min-block-size: var(--sched-size-18-5);
    padding: var(--sched-space-3-25) var(--sched-space-3-75);
  }

  .sched-app :where(.sched-client-kpi span) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs-plus);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-client-kpi strong) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-3xl);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-none);
  }

  .sched-app :where(.sched-client-kpi strong[data-tone="good"]) {
    color: var(--sched-status-onsite);
  }

  .sched-app :where(.sched-catalog-detail-kpis) {
    gap: var(--sched-space-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .sched-app :where(.sched-catalog-detail-kpi) {
    min-block-size: var(--sched-size-19-5);
    padding: var(--sched-space-3-25) var(--sched-space-3-75);
  }

  .sched-app :where(.sched-catalog-detail-kpi .sched-stat-value) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-3xl);
    margin-block-start: var(--sched-space-2);
  }

  .sched-app :where(.sched-catalog-detail-grid) {
    align-items: start;
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  }

  .sched-app :where(.sched-catalog-detail-main-column, .sched-catalog-detail-side-column) {
    display: grid;
    gap: var(--sched-space-4);
  }

  .sched-app :where(.sched-catalog-detail-sidebar) {
    min-inline-size: 0;
  }

  .sched-app :where(.sched-catalog-detail-grid:not(:has(.sched-catalog-detail-side-column))) {
    grid-template-columns: minmax(0, 1fr);
  }

  .sched-app :where(.sched-catalog-detail-panel) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    display: grid;
    overflow: hidden;
  }

  .sched-app :where(.sched-catalog-detail-section-header) {
    align-items: center;
    background: var(--sched-surface);
    border-bottom: 1px solid var(--sched-line-2);
    display: flex;
    justify-content: space-between;
    min-block-size: var(--sched-size-12-5);
    padding: var(--sched-section-header-padding-block-start) var(--sched-section-header-padding-inline) var(--sched-section-header-padding-block-end);
  }

  .sched-app :where(.sched-catalog-detail-section-header h2) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-snug);
    margin: 0;
  }

  /* The marker is an addressing hook; the text-link recipe must not recolor an action that
     opted into the button recipe (a paged table's primary create action), or the button paints
     brand-on-brand and its label disappears. */
  .sched-app :where([data-sched-catalog-section-action]:not(.sched-button)) {
    color: var(--sched-brand);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    text-decoration: none;
  }

  .sched-app :where([data-sched-catalog-section-actions]) {
    align-items: center;
    display: inline-flex;
    gap: var(--sched-space-2);
  }

  .sched-app :where(.sched-catalog-detail-section-body) {
    display: grid;
    gap: var(--sched-space-3);
    min-inline-size: 0;
    padding: var(--sched-card-padding-block) var(--sched-card-padding-inline);
  }

  .sched-app :where(.sched-catalog-detail-section-body:has(> .sched-catalog-document-list)) {
    gap: 0;
    padding: 0;
  }

  .sched-app :where(.sched-catalog-detail-table-section) {
    display: grid;
    gap: var(--sched-space-2-5);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-catalog-detail-specs) {
    display: grid;
    gap: 0 var(--sched-space-6-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sched-app :where(.sched-catalog-detail-side-column .sched-catalog-detail-specs) {
    grid-template-columns: minmax(0, 1fr);
  }

  .sched-app :where(.sched-catalog-detail-specs div) {
    align-items: center;
    border-bottom: 1px solid var(--sched-line-2);
    display: flex;
    gap: var(--sched-space-3-5);
    justify-content: space-between;
    min-block-size: var(--sched-size-9-5);
    padding: var(--sched-space-2-25) 0;
  }

  .sched-app :where(.sched-catalog-detail-specs div:last-child) {
    border-bottom: 0;
  }

  .sched-app :where(.sched-catalog-detail-specs dt) {
    color: var(--sched-ink-3);
    font-weight: var(--sched-font-weight-semibold);
  }

  .sched-app :where(.sched-catalog-detail-specs label) {
    color: var(--sched-ink-3);
    font-weight: var(--sched-font-weight-semibold);
  }

  .sched-app :where(.sched-catalog-detail-specs dd) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
    text-align: right;
  }

  .sched-app :where(.sched-catalog-detail-specs a) {
    color: var(--sched-brand);
    text-decoration: none;
  }

  .sched-app :where(.sched-catalog-detail-note) {
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-medium);
    line-height: var(--sched-line-height-relaxed);
    margin: 0;
    padding: var(--sched-space-3-25) var(--sched-space-3-5);
  }

  .sched-app :where(.sched-catalog-detail-note-block) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-semibold);
    line-height: var(--sched-line-height-relaxed);
    margin: 0;
    padding: var(--sched-space-3-25) var(--sched-space-3-5);
  }

  .sched-app :where(.sched-catalog-detail-section) {
    min-inline-size: 0;
  }

  .sched-app :where(.sched-catalog-detail-section-body > .sched-catalog-detail-note-block) {
    margin: 0;
  }

  .sched-app :where(.sched-catalog-detail-table-section > .sched-catalog-detail-note-block) {
    margin: 0;
  }

  .sched-app :where([data-sched-catalog-overview-edit-form]) {
    display: grid;
    gap: var(--sched-space-3);
  }

  .sched-app :where([data-sched-catalog-overview-edit-fields] div) {
    padding-block: 0;
  }

  .sched-app :where([data-sched-catalog-overview-edit-control]) {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-inline-start: auto;
    min-block-size: var(--sched-size-9-5);
    min-inline-size: min(100%, 16rem);
  }

  .sched-app :where([data-sched-catalog-overview-edit-control] :is(input, select, textarea)) {
    block-size: var(--sched-size-9-5);
    inline-size: 100%;
    max-inline-size: 18rem;
    min-block-size: var(--sched-size-9-5);
  }

  /* Spec-list-hosted morph rows (equipment overview): the read values sit left in the second
     grid column, so in-place controls stay left-aligned there instead of the catalog dl's
     flush-right, and the dd keeps its grid cell rather than flexing to the row end. */
  .sched-app :where(.sched-spec-list [data-sched-catalog-overview-edit-control]) {
    justify-content: flex-start;
    margin-inline-start: 0;
  }

  .sched-app :where(.sched-catalog-detail-kpi-row) {
    gap: var(--sched-space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .sched-app :where(.sched-catalog-document-list) {
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    overflow: hidden;
  }

  .sched-app :where(.sched-catalog-document-row) {
    align-items: center;
    color: inherit;
    display: grid;
    gap: var(--sched-space-3);
    grid-template-columns: max-content minmax(0, 1fr);
    min-block-size: var(--sched-size-16);
    padding: var(--sched-workbook-row-padding-block) var(--sched-workbook-row-padding-inline);
    text-decoration: none;
  }

  .sched-app :where(.sched-catalog-document-row + .sched-catalog-document-row) {
    border-top: 1px solid var(--sched-line-2);
  }

  .sched-app :where(.sched-catalog-document-row strong) {
    color: var(--sched-ink);
    display: block;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-catalog-document-row small) {
    color: var(--sched-ink-3);
    display: block;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-semibold);
    margin-block-start: var(--sched-space-0-75);
  }

  .sched-app :where(.sched-catalog-document-kind) {
    align-items: center;
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-lg);
    color: var(--sched-ink-3);
    display: inline-flex;
    font-size: var(--sched-font-size-2xs-plus);
    font-weight: var(--sched-font-weight-black);
    justify-content: center;
    min-block-size: var(--sched-size-8-5);
    min-inline-size: var(--sched-size-10-5);
    text-transform: uppercase;
  }

  .sched-app :where(.sched-detail-tabs.sched-tabs) {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--sched-line);
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-0-5);
    padding: 0 var(--sched-space-1);
  }

  .sched-app :where(.sched-detail-tabs .sched-tab) {
    background: transparent;
    border: 0;
    border-bottom: var(--sched-border-width-strong) solid transparent;
    border-radius: 0;
    color: var(--sched-ink-3);
    margin-block-end: calc(-1 * var(--sched-space-0-25));
    min-block-size: var(--sched-size-10-5);
    padding-inline: var(--sched-space-3-5);
  }

  .sched-app :where(.sched-detail-tabs .sched-tab:hover, .sched-detail-tabs .sched-tab:focus-visible) {
    color: var(--sched-ink);
    scale: 1;
    translate: none;
  }

  .sched-app :where(.sched-detail-tabs .sched-tab[data-active="true"]) {
    background: transparent;
    border-bottom-color: var(--sched-brand);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-client-detail-grid) {
    align-items: start;
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  }

  .sched-app :where(.sched-client-main-column, .sched-client-side-column, .sched-client-contact-list) {
    display: grid;
    gap: var(--sched-space-4);
  }

  .sched-app :where(.sched-client-spec-grid) {
    display: grid;
    gap: 0 var(--sched-space-6-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sched-app :where(.sched-client-spec-grid div) {
    align-items: center;
    border-bottom: 1px solid var(--sched-line-2);
    display: flex;
    gap: var(--sched-space-3-5);
    justify-content: space-between;
    padding: var(--sched-space-2-5) 0;
  }

  .sched-app :where(.sched-client-spec-grid dt) {
    color: var(--sched-ink-3);
  }

  .sched-app :where(.sched-client-spec-grid dd) {
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
    text-align: right;
  }

  .sched-app :where(.sched-client-section) {
    display: grid;
    gap: var(--sched-space-3);
  }

  .sched-app :where(.sched-client-section > h2) {
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
  }

  .sched-app :where(.sched-contact-body) {
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    display: grid;
    gap: var(--sched-space-1);
    padding: var(--sched-space-3-25) var(--sched-space-3-5);
  }

  .sched-app :where(.sched-contact-body strong) {
    font-size: var(--sched-font-size-md-plus);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-contact-body span, .sched-contact-body a) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-semibold);
  }

  .sched-app :where(.sched-client-activity ul) {
    display: grid;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sched-app :where(.sched-client-activity li) {
    border-bottom: 1px solid var(--sched-line-2);
    display: grid;
    gap: var(--sched-space-0-5) var(--sched-space-2-5);
    grid-template-columns: max-content minmax(0, 1fr);
    padding: var(--sched-space-2-5) 0;
  }

  .sched-app :where(.sched-client-activity li:last-child) {
    border-bottom: 0;
  }

  .sched-app :where(.sched-client-activity li > span) {
    background: var(--sched-status-color, var(--sched-brand));
    border-radius: 50%;
    block-size: var(--sched-size-2);
    grid-row: 1 / span 2;
    inline-size: var(--sched-size-2);
    margin-block-start: var(--sched-space-1-25);
  }

  .sched-app :where(.sched-client-activity strong) {
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-client-activity small, .sched-client-placeholder p) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-semibold);
  }

  .sched-app :where(.sched-client-sites-grid) {
    align-items: start;
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  }

  .sched-app :where(.sched-settings-wrap) {
    align-items: start;
    display: grid;
    gap: var(--sched-space-6);
    grid-template-columns: var(--sched-settings-nav-inline-size) minmax(0, 1fr);
  }

  .sched-app :where(.sched-table-frame) {
    container-type: inline-size;
    display: block;
  }

  /* The shell emits frame > layout > capsule [+ rail]. The layout is one column until the shell
     renders a rail beside the capsule; the frame is the container the rail collapse queries. */
  .sched-app :where(.sched-table-layout) {
    align-items: start;
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(0, 1fr);
    justify-content: start;
  }

  .sched-app :where(.sched-table-layout:has(> .sched-table-rail)) {
    grid-template-columns: minmax(var(--sched-measure-table-md), 3fr) minmax(var(--sched-measure-compact), 1fr);
  }

  .sched-app :where(.sched-table-layout > *) {
    min-inline-size: 0;
  }

  .sched-app :where(.sched-table-rail) {
    align-content: start;
    align-self: start;
    display: grid;
    gap: var(--sched-space-4);
    position: sticky;
    top: var(--sched-rail-sticky-offset);
  }

  /* The rail is a desktop-only visual offset. One literal threshold (container queries
     cannot read custom properties) governs every page, and a narrow container hides the
     rail instead of stacking it. The bare selector is deliberate: a stray attribute on
     the layout cannot opt a page out of the collapse. */
  @container (max-width: 72rem) {
    .sched-app :where(.sched-table-layout) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sched-app :where(.sched-table-layout > .sched-table-rail) {
      display: none;
    }
  }

  .sched-app :where(.sched-rail-card) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    display: grid;
    gap: var(--sched-space-4);
    padding: var(--sched-space-4);
  }

  .sched-app :where(.sched-rail-head) {
    display: grid;
    gap: var(--sched-space-1);
  }

  .sched-app :where(.sched-rail-head p, .sched-rail-head h3) {
    margin: 0;
  }

  .sched-app :where(.sched-rail-head h3) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-snug);
  }

  .sched-app :where(.sched-rail-stats) {
    display: grid;
    gap: var(--sched-space-2);
    margin: 0;
  }

  .sched-app :where(.sched-rail-stats > div) {
    align-items: baseline;
    border-top: 1px solid var(--sched-line-2);
    display: grid;
    gap: var(--sched-space-2);
    grid-template-columns: minmax(0, 1fr) max-content;
    padding-top: var(--sched-space-2);
  }

  .sched-app :where(.sched-rail-stats dt) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs-plus);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-app :where(.sched-rail-stats dd) {
    color: var(--sched-ink);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
    text-align: end;
  }

  .sched-app :where(.sched-rail-tags) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-rail-tags > span, .sched-rail-tags > a) {
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-xs-plus);
    font-weight: var(--sched-font-weight-bold);
    padding: var(--sched-space-1) var(--sched-space-2);
  }

  .sched-app :where(.sched-rail-tags > a) {
    color: var(--sched-brand);
    text-decoration: none;
  }

  .sched-app :where(.sched-rail-tags > a:hover, .sched-rail-tags > a:focus-visible) {
    border-color: var(--sched-brand);
  }

  .sched-app :where(.sched-rail-tags > a[aria-current="true"]) {
    background: var(--sched-surface);
    border-color: var(--sched-brand);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-manufacturer-lookup-resource) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    padding: var(--sched-space-4);
  }

  .sched-app :where(.sched-manufacturer-lookup-resource .sched-catalog-tabs .sched-tab) {
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-manufacturer-lookup-resource .sched-catalog-tabs.sched-tabs) {
    margin-block-end: var(--sched-space-3);
  }

  .sched-app :where(
    .sched-manufacturer-lookup-resource .sched-catalog-tabs .sched-tab:hover,
    .sched-manufacturer-lookup-resource .sched-catalog-tabs .sched-tab:focus-visible,
    .sched-manufacturer-lookup-resource .sched-catalog-tabs .sched-tab[data-active="true"]
  ) {
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-manufacturer-lookup-resource .sched-catalog-tabs .sched-tab[data-active="true"]) {
    border-bottom-color: var(--sched-ink);
  }

  .sched-app :where(.sched-manufacturer-lookup-resource .sched-catalog-detail-note) {
    background: var(--sched-surface);
    color: var(--sched-ink);
    margin-block-end: var(--sched-space-4);
  }

  .sched-app :where(.sched-settings-nav) {
    display: grid;
    gap: var(--sched-settings-nav-group-gap);
    position: sticky;
    top: var(--sched-settings-nav-sticky-offset);
  }

  .sched-app :where(.sched-settings-group) {
    display: grid;
    gap: var(--sched-settings-nav-link-gap);
    margin: 0;
  }

  .sched-app :where(.sched-settings-group-label) {
    color: var(--sched-ink-4);
    font-size: var(--sched-font-size-2xs-plus);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .07em;
    margin: 0 0 var(--sched-settings-nav-heading-margin-block-end);
    padding-inline: var(--sched-settings-nav-link-padding-inline);
    text-transform: uppercase;
  }

  .sched-app :where(.sched-settings-link) {
    align-items: center;
    border-radius: var(--sched-radius-lg);
    box-sizing: border-box;
    color: var(--sched-ink-2);
    display: flex;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-bold);
    justify-content: space-between;
    line-height: var(--sched-line-height-tight);
    min-block-size: var(--sched-settings-nav-link-block-size);
    min-inline-size: 0;
    padding: 0 var(--sched-settings-nav-link-padding-inline);
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-settings-link:hover, .sched-settings-link:focus-visible) {
    background: var(--sched-surface);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-settings-link[aria-current="page"]) {
    background: var(--sched-surface);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-settings-link[data-disabled="true"]) {
    color: var(--sched-ink-3);
    cursor: not-allowed;
    gap: var(--sched-space-2);
  }

  .sched-app :where(.sched-settings-link[data-disabled="true"]:hover) {
    background: transparent;
    color: var(--sched-ink-3);
  }

  .sched-app :where(.sched-settings-link[data-disabled="true"] .sched-nav-count) {
    flex: 0 0 auto;
  }

  .sched-app :where(.sched-settings-panel) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    min-block-size: var(--sched-size-105);
    padding: var(--sched-space-5-5) var(--sched-space-6);
  }

  .sched-app :where(.sched-settings-panel h1) {
    font-size: var(--sched-font-size-lg-plus);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0 0 var(--sched-space-1);
  }

  .sched-app :where(.sched-settings-panel-description) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-md);
    line-height: var(--sched-line-height-base);
    margin: 0 0 var(--sched-space-5-5);
    max-inline-size: var(--sched-measure-content);
  }

  .sched-app :where(.sched-settings-route-list) {
    display: grid;
    gap: var(--sched-space-5-5);
  }

  .sched-app :where(.sched-settings-route-group) {
    display: grid;
    gap: var(--sched-space-2);
  }

  .sched-app :where(.sched-settings-route-group-head) {
    align-items: end;
    border-bottom: 1px solid var(--sched-line);
    display: flex;
    gap: var(--sched-space-4);
    justify-content: space-between;
    padding-block-end: var(--sched-space-2-25);
  }

  .sched-app :where(.sched-settings-route-group-head h3) {
    font-size: var(--sched-font-size-md-plus);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
  }

  .sched-app :where(.sched-settings-route-group-head p) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm-plus);
    line-height: var(--sched-line-height-ui);
    margin: var(--sched-space-0-75) 0 0;
  }

  .sched-app :where(.sched-settings-route-group-head > span) {
    color: var(--sched-ink-4);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    white-space: nowrap;
  }

  .sched-app :where(.sched-settings-route) {
    align-items: center;
    border-bottom: 1px solid var(--sched-line-2);
    color: var(--sched-ink);
    display: grid;
    gap: var(--sched-space-3);
    grid-template-columns: minmax(0, 1fr) max-content;
    padding: var(--sched-space-2-75) 0;
  }

  .sched-app :where(.sched-settings-route:last-child) {
    border-bottom: 0;
  }

  .sched-app :where(.sched-settings-route strong) {
    display: block;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-settings-route small) {
    color: var(--sched-ink-3);
    display: block;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-medium);
    line-height: var(--sched-line-height-caption);
    margin-block-start: var(--sched-space-0-5);
  }

  .sched-app :where(.sched-settings-route > span:last-child) {
    color: var(--sched-brand);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-settings-route[data-disabled="true"]) {
    color: var(--sched-ink-3);
    cursor: not-allowed;
  }

  .sched-app :where(.sched-settings-route[data-disabled="true"] > span:last-child) {
    color: var(--sched-ink-3);
  }

  .sched-app :where(.sched-badge) {
    border: 0;
    border-radius: var(--sched-radius-md);
    font-size: var(--sched-badge-font-size);
    font-weight: var(--sched-badge-font-weight);
    min-block-size: var(--sched-size-6-5);
    padding: var(--sched-badge-padding);
  }

  .sched-app :where(.sched-card, .sched-table-card, .sched-contact-card, .sched-ticket, .sched-stat-card, .sched-report-card, .sched-detail-hero) {
    box-shadow: none;
    transition:
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      box-shadow var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-detail-hero.sched-catalog-detail-hero, .sched-detail-hero.sched-client-hero) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .sched-app :where(.sched-stat-card:hover, .sched-ticket:hover) {
    border-color: var(--sched-line-strong);
    box-shadow: var(--sched-shadow-lift);
  }

  .sched-app :where(.sched-empty) {
    align-content: center;
    color: var(--sched-ink-3);
    display: grid;
    gap: var(--sched-space-1);
    justify-items: center;
    min-block-size: var(--sched-size-33);
    padding: var(--sched-space-7) var(--sched-space-2-5);
    text-align: center;
  }

  .sched-app :where(.sched-empty strong, .sched-empty h1) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-md-plus);
  }

  @media (max-width: 1240px) {
    .sched-app :where(.sched-client-detail-grid, .sched-client-sites-grid, .sched-catalog-detail-grid) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sched-app :where(.sched-settings-wrap) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sched-app :where(.sched-settings-nav) {
      position: static;
    }
  }

  @media (max-width: 760px) {
    .sched-app :where(.sched-client-hero, .sched-catalog-detail-hero) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sched-app :where(.sched-client-hero-actions) {
      justify-content: start;
    }

    .sched-app :where(.sched-client-spec-grid, .sched-catalog-detail-specs) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sched-app :where(.sched-table-header) {
      align-items: start;
      display: grid;
    }

    /* Stacked, the one grid track has to stretch to the row (the row layout's flex-start would
       size it to the widest part instead), and every part spans it, so a leading auto margin
       would only shove a part to the end of its own row. The inline padding shrinks with the
       viewport: the row's 1.125rem per side is a fifth of a phone's width. */
    .sched-app :where(header.sched-table-header) {
      justify-content: stretch;
      padding-inline: var(--sched-space-3-5);
    }

    .sched-app :where(.sched-table-card > .sched-table-band) {
      padding-inline: var(--sched-space-3-5);
    }

    .sched-app :where(.sched-table-header > *) {
      margin-inline-start: 0;
    }

    /* The strip centers itself under the title when it is narrower than the card and scrolls
       when it is wider; a phone shows no scrollbar bar, the cut-off last chip is the cue. */
    .sched-app :where(.sched-table-header > [data-postgrest-quick-filters]) {
      justify-self: center;
      max-inline-size: 100%;
      scrollbar-width: none;
    }

    .sched-app :where(.sched-settings-panel) {
      padding: var(--sched-space-4-5);
    }

    .sched-app :where(.sched-settings-route-group-head) {
      align-items: start;
      display: grid;
    }
  }
}

@layer sched.postgrest {
  .sched-app :where(.sched-resource-panel) {
    display: grid;
    gap: var(--sched-space-3-5);
  }

  .sched-app :where(table.sched-resource-table[data-postgrest-table], table.sched-resource-table[data-postgrest-relation]) {
    border-collapse: separate;
    border-spacing: 0;
    display: table;
    inline-size: 100%;
    padding: 0;
  }

  /* The horizontal scroller wraps the table and nothing else. A lone scroller outside a capsule
     is the only place it carries its own chrome. */
  .sched-app :where(.sched-table-scroll) {
    background-color: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Inside the capsule the card draws the frame and paints the surface, so the scroller draws
     none: a square child background would poke past the card's rounded corner. The scroller is
     the one child of the capsule that flexes; the header row and the pager keep their size. */
  .sched-app :where(.sched-table-card > .sched-table-scroll) {
    background: transparent;
    border: 0;
    border-radius: 0;
    flex: 1 1 auto;
    min-block-size: 0;
  }

  /* The table inside a scroller carries no chrome of its own: the scroller (or the card around it) draws
     the frame, and the table fills the scroller's width so a narrow table still spans the card. */
  .sched-app :where(.sched-table-scroll > table[data-postgrest-table], .sched-table-scroll > table[data-postgrest-relation]) {
    background: transparent;
    border: 0;
    border-radius: 0;
    inline-size: 100%;
  }

  /* A scroller shows a thin scrollbar and nothing else. No edge fade, no shadow: the
     gradients that used to mark an overflowing edge read as a smudge on the card. */
  .sched-app :where(.sched-table-card, .sched-table-scroll) {
    scrollbar-color: var(--sched-line-2) transparent;
    scrollbar-width: thin;
  }

  /* Viewport fit. A list page holds one table, and that table behaves like a grid: the frame
     fills the space left under the bands above it, the rows scroll inside the scroller, and the
     card header, the controls panel, the column header and the pager stay in view however the
     window is sized. The frame grows to the space, so a one-row table is as tall a card as a
     long one: the height moves only when the window moves, never with the row count or the page
     size. Under the floor the page scrolls instead. fit="content" on the shell opts a direct
     child of the stack out; a frame nested deeper flows whatever its token says, because the
     chain starts at the page stack.

     The chain is a flex column from the page stack down to the scroller: every level passes
     the height through with min-block-size 0, every sibling refuses to shrink, and only the
     scroller flexes (the capsule's flex column and its children's flex values live in the
     capsule recipe, which every fit shares). */
  .sched-app :where(.sched-page-stack:has(> .sched-table-frame[data-fit="viewport"])) {
    display: flex;
    flex-direction: column;
  }

  .sched-app :where(.sched-page-stack:has(> .sched-table-frame[data-fit="viewport"]) > :not(.sched-table-frame[data-fit="viewport"])) {
    flex: 0 0 auto;
  }

  .sched-app :where(.sched-page-stack > .sched-table-frame[data-fit="viewport"]) {
    display: grid;
    flex: 1 1 auto;
    grid-template-rows: minmax(0, 1fr);
    min-block-size: var(--sched-table-viewport-floor);
  }

  .sched-app :where(.sched-page-stack > .sched-table-frame[data-fit="viewport"] > .sched-table-layout) {
    align-items: stretch;
    grid-template-rows: minmax(0, 1fr);
    min-block-size: 0;
  }

  /* The rail keeps its top alignment and scrolls on its own in the rare case it outgrows the cap,
     so a tall rail can never push the page into scrolling. The frame is a size container, and
     layout containment makes the frame the sticky scrollport, so the base sticky offset would
     hold the rail one gap below the card top; a filled frame never scrolls, so the offset is 0. */
  .sched-app :where(.sched-page-stack > .sched-table-frame[data-fit="viewport"] > .sched-table-layout > .sched-table-rail) {
    align-self: start;
    max-block-size: 100%;
    min-block-size: 0;
    overflow: hidden auto;
    top: 0;
  }

  .sched-app :where(.sched-page-stack > .sched-table-frame[data-fit="viewport"] .sched-table-card) {
    min-block-size: 0;
  }

  .sched-app :where(.sched-page-stack > .sched-table-frame[data-fit="viewport"] .sched-table-scroll) {
    overflow: auto;
  }

  /* The column header pins to the scroller's top edge while the rows pass under it. It still
     travels sideways with its column, because sticky only pins the block axis here. */
  .sched-app :where(.sched-page-stack > .sched-table-frame[data-fit="viewport"] .sched-table-scroll > table > thead th) {
    inset-block-start: 0;
    position: sticky;
    z-index: var(--sched-table-head-z-index);
  }

  /* The visible caption band is gone: a detail table titles itself through the shell's heading
     band inside its capsule, and every caption is assistive-only. The old band styled a caption
     that stopped existing when the shell moved the table into the scroller. */
  .sched-app :where(.sched-resource-table th, .sched-resource-table td) {
    border-bottom: 1px solid var(--sched-line-2);
    color: var(--sched-ink-2);
    font-size: var(--sched-table-cell-font-size);
    font-weight: var(--sched-font-weight-semibold);
    line-height: var(--sched-postgrest-row-line-height);
    padding: var(--sched-postgrest-row-padding-block) var(--sched-postgrest-row-padding-inline);
    text-align: left;
    vertical-align: middle;
  }

  .sched-app :where(.sched-resource-table tbody tr) {
    block-size: var(--sched-postgrest-row-block-size);
    height: var(--sched-postgrest-row-block-size);
  }

  .sched-app :where(
    .sched-resource-table th:has(> input:not([type="hidden"])),
    .sched-resource-table th:has(> select),
    .sched-resource-table th:has(> textarea),
    .sched-resource-table td:has(> input:not([type="hidden"])),
    .sched-resource-table td:has(> select),
    .sched-resource-table td:has(> textarea)
  ) {
    padding-block: var(--sched-postgrest-edit-row-padding-block);
  }

  .sched-app :where(.sched-resource-table thead th) {
    background: var(--sched-surface);
    color: var(--sched-ink-3);
    font-size: var(--sched-table-header-font-size);
    font-weight: var(--sched-table-header-font-weight);
    letter-spacing: .04em;
    padding-block: var(--sched-postgrest-head-padding-block);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sched-app :where(.sched-resource-table tbody th) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-resource-table tbody tr:last-child > th, .sched-resource-table tbody tr:last-child > td) {
    border-bottom: 0;
  }

  /* The pager footer is a flush, compact strip - NOT a filled band. It renders only when the pager has
     something worth showing (page navigation or page-size controls); a single unpaged page renders no
     footer at all (PostgrestPager.ShouldRender). A single hairline divides it from the last row, and the
     card's own edge closes the bottom - so there is no gray band and no doubled bottom border.

     It is a sibling AFTER the scroller, never a footer row inside the table. A footer row sits inside
     the horizontal scroll region, so a wide table dragged sideways carried its own paging controls out
     of view; this element holds still while the rows move. The column header is deliberately NOT
     pinned: it has to stay above its column, so it travels with the body by design. */
  .sched-app :where([data-postgrest-table-footer]) {
    background: transparent;
    border-block-start: 1px solid var(--sched-line-2);
  }

  .sched-app :where([data-postgrest-table-footer] [data-postgrest-pager]) {
    padding-block: var(--sched-space-2-5);
  }

  /* A visible caption is the table's own title and must stay readable while the rows scroll. */
  .sched-app :where(
    [data-postgrest-table] > caption > *,
    [data-postgrest-relation] > caption > *
  ) {
    inset-inline-start: 0;
    position: sticky;
  }

  .sched-app :where(.sched-resource-table tbody tr:hover) {
    background: var(--sched-surface-2);
  }

  .sched-app :where(.sched-resource-table tbody tr[data-sched-row-activated="true"]) {
    cursor: pointer;
    position: relative;
    transition: background-color var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-resource-table tbody tr[data-sched-row-activated="true"]:hover) {
    background: var(--sched-surface-2);
  }

  .sched-app :where(.sched-row-activation) {
    align-items: center;
    color: inherit;
    display: flex;
    font-weight: var(--sched-font-weight-extrabold);
    min-block-size: var(--sched-postgrest-inline-control-block-size);
    text-decoration: none;
  }

  /* A row-activation link wrapping a title + sub stacks them like the plain-cell rendering
     does - the flex row would otherwise run the block-level pair together on one line. */
  .sched-app :where(.sched-row-activation:has(.sched-cell-sub)) {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .sched-app :where(.sched-row-activation)::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
  }

  .sched-app :where(
    .sched-resource-table [data-postgrest-row-select-header],
    .sched-resource-table [data-postgrest-row-select],
    .sched-resource-table [data-postgrest-row-select-spacer]
  ) {
    text-align: center;
    white-space: nowrap;
    width: 1%;
  }

  .sched-app :where(.sched-resource-table [data-postgrest-row-select-spacer]) {
    inline-size: 0;
    padding-inline: 0;
    width: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-select-header]) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-2xs-plus);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-select-header] span) {
    display: block;
    margin-block-start: var(--sched-space-1);
  }

  .sched-app :where(.sched-resource-table [data-sched-row-actions]) {
    isolation: isolate;
    padding-block: var(--sched-postgrest-edit-row-padding-block);
    position: relative;
    text-align: end;
    white-space: nowrap;
    width: 1%;
    z-index: 5;
  }

  /* position: relative keeps the visually-hidden header label's containing block
     inside the scrolling card - a static th lets its absolutely positioned label
     leak phantom horizontal scroll to the viewport. */
  .sched-app :where(.sched-resource-table [data-sched-row-actions-header]) {
    position: relative;
    text-align: end;
    white-space: nowrap;
    width: 1%;
  }

  .sched-app :where(.sched-resource-table [data-sched-row-actions] > form:not([hidden])) {
    display: inline-flex;
    margin-inline-start: var(--sched-space-1-5);
  }

  .sched-app :where(
    [data-postgrest-table-edit]:not(:has([data-server-form-error])),
    [data-postgrest-table-bulk-delete]
  ) {
    block-size: 0;
    border: 0;
    clip-path: inset(50%);
    inline-size: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
  }

  .sched-app :where(
    tr[data-sched-row-activated="true"] a:not(.sched-row-activation),
    tr[data-sched-row-activated="true"] button,
    tr[data-sched-row-activated="true"] input,
    tr[data-sched-row-activated="true"] select,
    tr[data-sched-row-activated="true"] textarea
  ) {
    position: relative;
    z-index: 3;
  }

  .sched-app :where(.sched-resource-table a:not([data-postgrest-sort-link])) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-extrabold);
    text-decoration: none;
  }

  .sched-app :where(.sched-resource-table a:not([data-postgrest-sort-link]):hover, .sched-resource-table a:not([data-postgrest-sort-link]):focus-visible) {
    color: var(--sched-brand);
  }

  .sched-app :where([data-postgrest-sort-link]) {
    color: inherit;
    display: inline-flex;
    gap: var(--sched-space-1-5);
    text-decoration: none;
  }

  .sched-app :where([data-postgrest-sort-link]:hover, [data-postgrest-sort-link]:focus-visible) {
    color: var(--sched-brand);
  }

  .sched-app :where([data-postgrest-sort-indicator], [data-postgrest-sort-priority-indicator]) {
    color: var(--sched-brand);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-2xs);
    font-weight: var(--sched-font-weight-extrabold);
    margin-inline-start: var(--sched-space-1-25);
  }

  .sched-app :where(.sched-manufacturer-reference) {
    align-items: center;
    display: flex;
    gap: var(--sched-space-2-5);
    min-block-size: var(--sched-postgrest-inline-control-block-size);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-manufacturer-mark) {
    block-size: var(--sched-postgrest-inline-control-block-size);
    border-radius: var(--sched-radius-control);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
    display: inline-grid;
    flex: 0 0 var(--sched-postgrest-inline-control-block-size);
    inline-size: var(--sched-postgrest-inline-control-block-size);
    overflow: hidden;
    place-items: center;
  }

  .sched-app :where(.sched-manufacturer-mark img, .sched-manufacturer-mark svg) {
    block-size: 100%;
    inline-size: 100%;
  }

  .sched-app :where(.sched-manufacturer-mark img) {
    object-fit: cover;
  }

  .sched-app :where(.sched-manufacturer-mark svg rect) {
    fill: var(--sched-brand-soft);
  }

  .sched-app :where(.sched-manufacturer-mark svg text) {
    fill: var(--sched-brand);
    font-family: var(--sched-font-sans);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-black);
  }

  .sched-app :where(.sched-manufacturer-reference-label) {
    overflow-wrap: anywhere;
  }

  .sched-app :where([data-postgrest-sort-clear-all], [data-postgrest-filters-clear], [data-postgrest-filters-close], [data-postgrest-download-format]) {
    color: var(--sched-brand);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    text-decoration: none;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-controls]) {
    align-items: center;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2-5);
    margin: 0;
    padding: 0;
  }

  /* The controls panel is one item of the header row (see .sched-table-header), not a band of
     its own: no frame, no padding, no scrolling. It is the row's end wing: it grows from a zero
     basis like the title block and parks its content at the inline end. It keeps its min-content
     floor (the search field's minimum measure plus the action buttons), so the chip strip and
     the title give way first and the buttons never leave the row. Its popovers live in the top
     layer, so overflow never clips them. */
  .sched-app :where(.sched-table-header > [data-postgrest-table-controls-panel]) {
    display: flex;
    flex: 1 1 0;
    justify-content: flex-end;
  }

  /* The tools slot holds the app-authored controls the shell renders between the quick filters
     and the controls panel (a local filter form, for one). It sizes to its content and gives way
     like the panel does. The slot's own row wraps, because a slot can hold several controls:
     parts-demand adds a planning window, a client filter and a coverage stat grid. A row that
     never wraps makes the slot's min-content the SUM of those controls, and the stacked header
     (see the 760px block in sched.components) grows its one track to that sum, so the capsule
     left the phone viewport and the stat grid collapsed to a zero-wide column while its cards
     painted outside it. Wrapping makes the floor the widest single control, so each control
     keeps its size and the slot takes another line instead. */
  .sched-app :where(.sched-table-header > .sched-table-tools) {
    align-items: center;
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
  }

  /* The band is the capsule's first visible band: a page's stat cards or another summary that
     changes with the table's state. It sits above the header row inside the swap region, so a
     window or filter change refreshes it with the rows, and its grid wraps on its own width
     instead of squeezing into the header row. It takes the header's inset and rule. */
  .sched-app :where(.sched-table-card > .sched-table-band) {
    border-bottom: 1px solid var(--sched-section-header-border-color);
    padding: var(--sched-section-header-padding-block-start) var(--sched-section-header-padding-inline) var(--sched-section-header-padding-block-end);
  }

  /* The capsule. One recipe for every PostgREST table: the card draws the frame around the
     header row, the scroller and the pager footer, and clips its own corners. It is a flex
     column so the scroller can take the height a viewport-fit frame hands down; in content fit
     the column simply stacks. Every child keeps its size except the scroller (see the scroller
     rule); without that the controls panel shrank to a sliver under the cap. The card's padding
     comes from the shared card chrome, and this capsule has none: its children are flush bands. */
  .sched-app :where(.sched-table-card) {
    display: flex;
    flex-direction: column;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow: hidden;
    padding: 0;
  }

  .sched-app :where(.sched-table-card > :not(.sched-table-scroll)) {
    flex: 0 0 auto;
  }

  /* The width floor is config. The shell's measure token names how many columns the table has to
     hold before it scrolls sideways instead of squeezing its cells. */
  .sched-app :where(.sched-table-card[data-measure="md"] > .sched-table-scroll > table) {
    min-inline-size: var(--sched-measure-table-md);
  }

  .sched-app :where(.sched-table-card[data-measure="lg"] > .sched-table-scroll > table) {
    min-inline-size: var(--sched-measure-table-lg);
  }

  .sched-app :where(.sched-table-card[data-measure="xl"] > .sched-table-scroll > table) {
    min-inline-size: var(--sched-measure-table-xl);
  }

  .sched-app :where(.sched-table-card[data-measure="2xl"] > .sched-table-scroll > table) {
    min-inline-size: var(--sched-measure-table-2xl);
  }

  /* The search field is one control: the magnifier (the submit button) sits inside the field at
     the inline start and the clear link, when a term is set, inside it at the inline end. The
     form is the positioning box; the input pads for the magnifier always and for the clear link
     only while it is rendered. The field takes the wide search measure, which holds the longest
     placeholder in full. Its floor stays the control measure: the chip strip carries the counts
     and is the primary filter, so on a row too narrow for both the field gives way first and
     ellipsizes its placeholder rather than cutting the chips off. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form]) {
    align-items: center;
    display: inline-flex;
    flex: 0 1 var(--sched-measure-search-wide);
    /* A plain length, never a percentage: a percentage minimum counts as zero while the header
       row measures its parts, so the panel shrank past its buttons and pushed them out of the
       row. */
    min-inline-size: var(--sched-measure-control);
    position: relative;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-controls-panel] [data-postgrest-table-controls]) {
    flex-wrap: nowrap;
    min-block-size: var(--sched-size-8-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-pager]) {
    align-items: center;
    color: var(--sched-ink-2);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    gap: var(--sched-space-2-5) var(--sched-space-3-5);
    justify-content: space-between;
    margin: 0;
    padding: var(--sched-space-3) var(--sched-space-4);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-page-size-controls], .sched-postgrest-surface [data-postgrest-page-actions]) {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-pager-label]) {
    color: var(--sched-ink-4);
    font-size: var(--sched-font-size-2xs);
    font-weight: var(--sched-font-weight-black);
    letter-spacing: .05em;
    margin-inline-end: var(--sched-space-0-5);
    text-transform: uppercase;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-result-range]) {
    color: var(--sched-ink);
    font-variant-numeric: tabular-nums;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-page-action]) {
    align-items: center;
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-lg);
    color: var(--sched-ink-2);
    display: inline-flex;
    justify-content: center;
    line-height: var(--sched-line-height-none);
    min-block-size: var(--sched-size-7);
    padding: 0 var(--sched-space-2-25);
    text-decoration: none;
    white-space: nowrap;
  }

  .sched-app :where(.sched-postgrest-surface a[data-postgrest-page-action]:hover) {
    border-color: var(--sched-line-strong);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-postgrest-surface span[data-postgrest-page-action][aria-disabled="true"]) {
    color: var(--sched-ink-4);
    opacity: .58;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-actions]) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2-5);
    justify-content: flex-end;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-settings]) {
    flex: 0 0 auto;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-controls] > [data-postgrest-table-actions]) {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-controls-panel] [data-postgrest-table-actions]) {
    flex-wrap: nowrap;
  }

  /* The one inline-control recipe. Dialog footers join it through the shared
     [data-postgrest-popover-footer] seam rather than one selector per button, because the JS-built
     dialogs (the ref-search nested edit and delete confirms) stamp that seam but name their buttons
     with their own behavior attributes. Only .sched-button opts out: the branded component recipe
     owns those, and this layer wins on order. */
  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-row-action],
    .sched-postgrest-surface [data-postgrest-table-action]:not([data-postgrest-table-settings-item]),
    .sched-postgrest-surface [data-postgrest-filters-button]:not([data-postgrest-table-settings-item]),
    .sched-postgrest-surface [data-postgrest-columns-button]:not([data-postgrest-table-settings-item]),
    .sched-postgrest-surface [data-postgrest-row-delete-confirm],
    .sched-postgrest-surface [data-postgrest-row-delete-cancel],
    .sched-postgrest-surface [data-postgrest-bulk-delete-confirm],
    .sched-postgrest-surface [data-postgrest-bulk-delete-cancel],
    .sched-postgrest-surface [data-postgrest-filters-submit],
    .sched-postgrest-surface [data-postgrest-filters-popover] [data-postgrest-filters-clear],
    .sched-postgrest-surface [data-postgrest-filters-popover] [data-postgrest-filters-close],
    .sched-postgrest-surface [data-postgrest-filter-add-predicate],
    .sched-postgrest-surface [data-postgrest-filter-add-group],
    .sched-postgrest-surface [data-postgrest-filter-remove],
    .sched-postgrest-surface [data-postgrest-column-filter-clear],
    .sched-postgrest-surface [data-postgrest-create-popover] button:not([hidden]),
    .sched-postgrest-surface [data-postgrest-popover-footer] button:not(.sched-button)
  ) {
    align-items: center;
    appearance: none;
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    gap: var(--sched-space-1-5);
    justify-content: center;
    line-height: var(--sched-line-height-none);
    min-block-size: var(--sched-postgrest-inline-control-block-size);
    padding: 0 var(--sched-space-3);
    text-decoration: none;
    text-transform: capitalize;
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
    white-space: nowrap;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-table-action="create"],
    .sched-postgrest-surface [data-postgrest-table-action="save"],
    .sched-postgrest-surface [data-postgrest-row-action="save"],
    .sched-postgrest-surface [data-postgrest-filters-submit],
    .sched-postgrest-surface [data-postgrest-column-filter-submit],
    .sched-postgrest-surface [data-postgrest-create-popover] button[type="submit"]:not([data-postgrest-row-delete-confirm]):not([data-postgrest-bulk-delete-confirm]):not([hidden]),
    .sched-postgrest-surface [data-ref-search-edit-save]
  ) {
    background: var(--sched-brand);
    border-color: var(--sched-brand);
    color: #ffffff;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-table-action="delete"],
    .sched-postgrest-surface [data-postgrest-row-action="delete"],
    .sched-postgrest-surface [data-postgrest-filter-remove]
  ) {
    background: var(--sched-status-emer-bg);
    border-color: var(--sched-status-emer-bd);
    color: var(--sched-status-emer);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-row-delete-confirm],
    .sched-postgrest-surface [data-postgrest-bulk-delete-confirm],
    .sched-postgrest-surface [data-ref-search-delete-confirm]
  ) {
    background: var(--sched-status-emer);
    border-color: var(--sched-status-emer);
    color: #ffffff;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-table-action]:not([data-postgrest-table-settings-item]),
    .sched-postgrest-surface [data-postgrest-row-action],
    .sched-postgrest-surface [data-postgrest-search-submit],
    .sched-postgrest-surface [data-postgrest-filters-button]:not([data-postgrest-table-settings-item]),
    .sched-postgrest-surface [data-postgrest-columns-button]:not([data-postgrest-table-settings-item])
  ) {
    block-size: var(--sched-postgrest-inline-control-block-size);
    box-sizing: border-box;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-action="create"]:not([data-postgrest-table-settings-item])) {
    inline-size: var(--sched-postgrest-inline-control-block-size);
    padding: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-action-icon="create"]) {
    --sched-postgrest-create-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    background: currentColor;
    block-size: 1rem;
    display: block;
    inline-size: 1rem;
    mask: var(--sched-postgrest-create-icon-mask) center / contain no-repeat;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-row-action]:hover,
    .sched-postgrest-surface [data-postgrest-table-action]:not([data-postgrest-table-settings-item]):hover,
    .sched-postgrest-surface [data-postgrest-search-submit]:hover,
    .sched-postgrest-surface [data-postgrest-filters-button]:not([data-postgrest-table-settings-item]):hover,
    .sched-postgrest-surface [data-postgrest-columns-button]:not([data-postgrest-table-settings-item]):hover,
    .sched-postgrest-surface [data-postgrest-row-delete-confirm]:hover,
    .sched-postgrest-surface [data-postgrest-row-delete-cancel]:hover,
    .sched-postgrest-surface [data-postgrest-bulk-delete-confirm]:hover,
    .sched-postgrest-surface [data-postgrest-bulk-delete-cancel]:hover,
    .sched-postgrest-surface [data-postgrest-filters-submit]:hover,
    .sched-postgrest-surface [data-postgrest-filters-popover] [data-postgrest-filters-clear]:hover,
    .sched-postgrest-surface [data-postgrest-filters-popover] [data-postgrest-filters-close]:hover,
    .sched-postgrest-surface [data-postgrest-filter-add-predicate]:hover,
    .sched-postgrest-surface [data-postgrest-filter-add-group]:hover,
    .sched-postgrest-surface [data-postgrest-filter-remove]:hover,
    .sched-postgrest-surface [data-postgrest-column-filter-clear]:hover,
    .sched-postgrest-surface [data-postgrest-create-popover] button:not([hidden]):hover,
    .sched-postgrest-surface [data-postgrest-popover-footer] button:not(.sched-button):hover
  ) {
    background: var(--sched-surface-2);
    border-color: var(--sched-line-strong);
    color: var(--sched-ink);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-table-action="create"]:hover,
    .sched-postgrest-surface [data-postgrest-table-action="save"]:hover,
    .sched-postgrest-surface [data-postgrest-row-action="save"]:hover,
    .sched-postgrest-surface [data-postgrest-filters-submit]:hover,
    .sched-postgrest-surface [data-postgrest-column-filter-submit]:hover,
    .sched-postgrest-surface [data-postgrest-create-popover] button[type="submit"]:not([data-postgrest-row-delete-confirm]):not([data-postgrest-bulk-delete-confirm]):not([hidden]):hover,
    .sched-postgrest-surface [data-ref-search-edit-save]:hover
  ) {
    background: var(--sched-brand-hover);
    border-color: var(--sched-brand-hover);
    color: #ffffff;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-table-action="delete"]:hover,
    .sched-postgrest-surface [data-postgrest-row-action="delete"]:hover,
    .sched-postgrest-surface [data-postgrest-filter-remove]:hover
  ) {
    background: var(--sched-status-emer-bg);
    border-color: var(--sched-status-emer);
    color: var(--sched-status-emer);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-row-delete-confirm]:hover,
    .sched-postgrest-surface [data-postgrest-bulk-delete-confirm]:hover,
    .sched-postgrest-surface [data-ref-search-delete-confirm]:hover
  ) {
    background: color-mix(in srgb, var(--sched-status-emer) 86%, var(--sched-ink));
    border-color: color-mix(in srgb, var(--sched-status-emer) 86%, var(--sched-ink));
    color: #ffffff;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-row-action][disabled],
    .sched-postgrest-surface [data-postgrest-table-action]:not([data-postgrest-table-settings-item])[disabled],
    .sched-postgrest-surface button[disabled]
  ) {
    cursor: not-allowed;
    opacity: .48;
  }

  .sched-app :where(.sched-postgrest-surface input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), .sched-postgrest-surface select, .sched-postgrest-surface textarea) {
    appearance: none;
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    box-sizing: border-box;
    color: var(--sched-ink);
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-semibold);
    inline-size: 100%;
    min-block-size: var(--sched-postgrest-inline-control-block-size);
    outline: 0;
    padding: var(--sched-space-1-75) var(--sched-space-2-5);
  }

  .sched-app :where(.sched-postgrest-surface select) {
    background-image: linear-gradient(45deg, transparent 50%, var(--sched-ink-3) 50%), linear-gradient(135deg, var(--sched-ink-3) 50%, transparent 50%);
    background-position:
      calc(100% - var(--sched-select-caret-position-end)) 50%,
      calc(100% - var(--sched-select-caret-position-start)) 50%;
    background-repeat: no-repeat;
    background-size: var(--sched-select-caret-size) var(--sched-select-caret-size), var(--sched-select-caret-size) var(--sched-select-caret-size);
    padding-inline-end: var(--sched-space-7-5);
  }

  .sched-app :where(.sched-postgrest-surface textarea) {
    min-block-size: var(--sched-size-21-5);
    resize: vertical;
  }

  /* The page size is one select at the pager's compact height: the surface's select recipe above
     (caret included) minus the full-width field sizing. It follows that recipe in the cascade so
     the compact sizing wins at equal specificity. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-page-size-select]) {
    border-radius: var(--sched-radius-lg);
    color: var(--sched-ink-2);
    cursor: pointer;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    inline-size: auto;
    min-block-size: var(--sched-size-7);
    padding-block: 0;
    padding-inline-start: var(--sched-space-2-25);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-page-size-select]:hover) {
    border-color: var(--sched-line-strong);
    color: var(--sched-ink);
  }

  /* The search field's inset controls. These rules follow the surface input recipe above, so
     the inset padding wins at equal specificity. The input pads for the magnifier at the inline
     start and for the clear link at the inline end; the browser's own cancel button would be a
     second "x" in the same corner, so it goes. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-input]) {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    padding-inline: var(--sched-postgrest-search-inset) var(--sched-space-3);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The end inset exists only while the clear link is rendered; an idle field keeps that room
     for its text. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form]:has(> [data-postgrest-search-clear]) [data-postgrest-search-input]) {
    padding-inline-end: var(--sched-postgrest-search-inset);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-input])::placeholder {
    text-overflow: ellipsis;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-input])::-webkit-search-cancel-button,
  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-input])::-webkit-search-decoration {
    appearance: none;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-input]:focus-visible) {
    border-color: var(--sched-brand);
    box-shadow: 0 0 0 3px var(--sched-brand-soft);
  }

  /* The submit button and the clear link share one inset shape: a square hit target the size of
     the field's inner height, centered on the block axis, with the icon drawn as a mask on
     ::before. Their text labels are visually hidden (see .sched-visually-hidden). */
  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-submit],
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-clear]
  ) {
    align-items: center;
    appearance: none;
    background: transparent;
    block-size: var(--sched-size-6);
    border: 0;
    border-radius: var(--sched-radius-md);
    color: var(--sched-ink-3);
    cursor: pointer;
    display: inline-flex;
    inline-size: var(--sched-size-6);
    inset-block-start: 50%;
    justify-content: center;
    margin: 0;
    padding: 0;
    position: absolute;
    text-decoration: none;
    transform: translateY(-50%);
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-submit],
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-clear]
  )::before {
    background: currentColor;
    block-size: var(--sched-search-icon-size);
    content: "";
    display: block;
    inline-size: var(--sched-search-icon-size);
    mask: var(--sched-postgrest-search-icon-mask) center / contain no-repeat;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-submit]) {
    --sched-postgrest-search-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' d='m21 21-4.4-4.4M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z'/%3E%3C/svg%3E");

    inset-inline-start: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-clear]) {
    --sched-postgrest-search-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");

    inset-inline-end: var(--sched-space-1-5);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-submit]:hover,
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-submit]:focus-visible,
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-clear]:hover,
    .sched-postgrest-surface [data-postgrest-search-form] [data-postgrest-search-clear]:focus-visible
  ) {
    background: var(--sched-line-2);
    color: var(--sched-ink);
  }

  .sched-app :where(
    .sched-postgrest-surface .sched-resource-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
    .sched-postgrest-surface .sched-resource-table select,
    .sched-postgrest-surface .sched-resource-table textarea,
    .sched-postgrest-surface .sched-resource-table [data-postgrest-row-action]
  ) {
    block-size: var(--sched-postgrest-inline-control-block-size);
    box-sizing: border-box;
    min-block-size: var(--sched-postgrest-inline-control-block-size);
  }

  .sched-app :where(
    .sched-postgrest-surface .sched-resource-table input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
    .sched-postgrest-surface .sched-resource-table select,
    .sched-postgrest-surface .sched-resource-table textarea
  ) {
    display: block;
    font-size: var(--sched-font-size-sm-plus);
    line-height: calc(var(--sched-postgrest-inline-control-block-size) - var(--sched-space-0-5));
    padding-block: 0;
  }

  .sched-app :where(.sched-postgrest-surface .sched-resource-table textarea) {
    overflow: auto;
    resize: none;
  }

  .sched-app :where(.sched-postgrest-surface .sched-resource-table [data-postgrest-row-action]) {
    padding: 0 var(--sched-space-2-25);
  }

  .sched-app :where(.sched-resource-table [data-sched-row-actions] > [data-postgrest-row-action] + [data-postgrest-row-action]) {
    margin-inline-start: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-settings-trigger-icon]) {
    block-size: var(--sched-size-4-5);
    fill: none;
    inline-size: var(--sched-size-4-5);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: var(--sched-border-width-strong);
  }

  /* The settings menu keeps its overflow visible so the Download submenu can swing out beside it
     as a real flyout, the same shape the account menu's team submenu takes. The menu itself never
     needs to scroll: it holds a handful of entries. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-settings-menu].sched-menu-content) {
    inline-size: max-content;
    max-inline-size: calc(100vw - (var(--sched-menu-viewport-margin) * 2));
    min-inline-size: 0;
    overflow: visible;
  }

  @media (scripting: none) {
    .sched-app :where([data-postgrest-downloads-menu].sched-menu-submenu-content) {
      inset: auto;
      opacity: 1;
      pointer-events: auto;
      position: static;
      transform: none;
    }
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-trigger]) {
    align-items: center;
    appearance: none;
    aspect-ratio: 1;
    background: transparent;
    border: var(--sched-border-width-hairline) solid transparent;
    border-radius: var(--sched-radius-control);
    block-size: var(--sched-postgrest-inline-control-block-size);
    color: var(--sched-ink-3);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    inline-size: var(--sched-postgrest-inline-control-block-size);
    justify-content: center;
    line-height: var(--sched-line-height-none);
    padding: 0;
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-resource-table [data-sched-row-actions] > [data-postgrest-row-actions-trigger]) {
    position: relative;
    vertical-align: middle;
    z-index: 6;
  }

  .sched-app :where(
    .sched-resource-table tr[data-sched-row-activated="true"]:hover [data-sched-row-actions] > [data-postgrest-row-actions-trigger],
    .sched-postgrest-surface [data-postgrest-row-actions-trigger]:hover,
    .sched-postgrest-surface [data-postgrest-row-actions-trigger][aria-expanded="true"]
  ) {
    background: var(--sched-surface-2);
    border-color: var(--sched-line-strong);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-trigger][aria-expanded="true"]) {
    background: var(--sched-brand-soft);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-trigger]:focus-visible) {
    box-shadow: 0 0 0 var(--sched-space-0-75) var(--sched-brand-soft);
    outline: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-trigger-icon]) {
    font-size: var(--sched-font-size-xl);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-none);
    transform: translateY(calc(-1 * var(--sched-space-0-25)));
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu]) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    box-shadow: var(--sched-shadow-lift);
    color: var(--sched-ink);
    display: none;
    gap: 0;
    inline-size: max-content;
    inset: auto;
    margin: 0;
    max-block-size: calc(100vh - (var(--sched-menu-viewport-margin) * 2));
    max-inline-size: calc(100vw - (var(--sched-menu-viewport-margin) * 2));
    min-inline-size: 0;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sched-menu-padding);
    pointer-events: none;
    position: fixed;
    text-align: start;
    transform: translateY(calc(-1 * var(--sched-menu-motion-offset))) scale(var(--sched-motion-popover-scale));
    transform-origin: top right;
    transition-behavior: allow-discrete;
    transition:
      opacity var(--sched-motion-base) var(--sched-ease-enter),
      transform var(--sched-motion-base) var(--sched-ease-enter),
      overlay var(--sched-motion-base) allow-discrete,
      display var(--sched-motion-base) allow-discrete;
    z-index: var(--sched-menu-z-index);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu]:popover-open) {
    display: grid;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu])::backdrop,
  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu]:popover-open)::backdrop {
    background: transparent;
    opacity: 1;
    pointer-events: none;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu][data-placement="fallback"]) {
    inline-size: max-content;
  }

  @supports (position-area: bottom) {
    .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu]) {
      position-area: bottom span-left;
      position-try-fallbacks: flip-block, flip-inline;
    }

    .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu][data-side="top"]) {
      position-area: top span-left;
      transform-origin: bottom right;
    }
  }

  @starting-style {
    .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-menu]:popover-open) {
      opacity: 0;
      transform: translateY(calc(-1 * var(--sched-menu-motion-offset))) scale(var(--sched-motion-popover-scale));
    }
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-actions-heading]) {
    color: var(--sched-ink-4);
    font-size: var(--sched-menu-label-font-size);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .06em;
    margin: 0;
    padding: var(--sched-menu-label-padding-block) var(--sched-menu-label-padding-inline);
    text-transform: uppercase;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-separator]) {
    background: var(--sched-line-2);
    border: 0;
    block-size: var(--sched-size-rule);
    margin: var(--sched-menu-separator-margin-block) var(--sched-menu-separator-margin-inline);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-item]) {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: var(--sched-radius-control);
    block-size: auto;
    color: var(--sched-ink);
    cursor: pointer;
    display: flex;
    font: inherit;
    font-size: var(--sched-menu-item-font-size);
    font-weight: var(--sched-font-weight-semibold);
    gap: var(--sched-menu-item-gap);
    inline-size: 100%;
    justify-content: flex-start;
    line-height: var(--sched-line-height-ui);
    min-block-size: var(--sched-menu-item-min-block-size);
    min-inline-size: 0;
    padding: var(--sched-menu-item-padding-block) var(--sched-menu-item-padding-inline);
    position: relative;
    text-align: start;
    text-decoration: none;
    text-transform: none;
    transition:
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      color var(--sched-motion-fast) var(--sched-ease-standard);
    white-space: nowrap;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-item]:hover, .sched-postgrest-surface [data-postgrest-row-action-item]:focus-visible) {
    background: var(--sched-surface-2);
    color: var(--sched-ink);
    outline: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action="delete"], .sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action-tone="danger"]) {
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action="delete"]:hover, .sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action="delete"]:focus-visible, .sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action-tone="danger"]:hover, .sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action-tone="danger"]:focus-visible) {
    background: var(--sched-status-emer-bg);
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-item]:disabled, .sched-postgrest-surface [data-postgrest-row-action-item][aria-disabled="true"]) {
    color: var(--sched-ink-4);
    cursor: not-allowed;
    opacity: .62;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-item]:disabled:hover, .sched-postgrest-surface [data-postgrest-row-action-item][aria-disabled="true"]:hover) {
    background: transparent;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-settings-count]) {
    align-items: center;
    background: var(--sched-brand-soft);
    border-radius: var(--sched-radius-pill);
    color: var(--sched-brand);
    display: inline-flex;
    font-size: var(--sched-font-size-2xs);
    font-weight: var(--sched-font-weight-black);
    justify-content: center;
    line-height: var(--sched-line-height-none);
    margin-inline-start: auto;
    min-block-size: var(--sched-size-4-5);
    min-inline-size: var(--sched-size-4-5);
    padding: 0 var(--sched-space-1-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon]) {
    color: var(--sched-ink-3);
    display: inline-flex;
    flex: 0 0 var(--sched-menu-item-icon-size);
    block-size: var(--sched-menu-item-icon-size);
    inline-size: var(--sched-menu-item-icon-size);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon])::before {
    background: currentColor;
    block-size: var(--sched-menu-item-icon-size);
    content: "";
    inline-size: var(--sched-menu-item-icon-size);
    mask: var(--sched-postgrest-menu-item-icon-mask) center / contain no-repeat;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon="edit"]) {
    --sched-postgrest-menu-item-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon="cancel"]) {
    --sched-postgrest-menu-item-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-1'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon="save"]) {
    --sched-postgrest-menu-item-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon="delete"]) {
    --sched-postgrest-menu-item-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon="duplicate"]) {
    --sched-postgrest-menu-item-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 9h10a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2ZM5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon="history"]) {
    --sched-postgrest-menu-item-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 12a9 9 0 1 0 3-6.7M3 4v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-icon="note"]) {
    --sched-postgrest-menu-item-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z'/%3E%3C/svg%3E");
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action="delete"] [data-postgrest-row-action-icon], .sched-postgrest-surface [data-postgrest-row-action-item][data-postgrest-row-action-tone="danger"] [data-postgrest-row-action-icon]) {
    color: var(--sched-status-emer);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-row-action-label]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"], .sched-postgrest-surface input[type="radio"]) {
    appearance: none;
    background-color: var(--sched-surface);
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--sched-line-strong);
    block-size: var(--sched-choice-control-size);
    box-shadow: var(--sched-choice-control-shadow);
    color: var(--sched-brand);
    cursor: pointer;
    display: inline-grid;
    flex: 0 0 auto;
    inline-size: var(--sched-choice-control-size);
    margin: 0;
    place-items: center;
    vertical-align: middle;
    transition:
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      border-color var(--sched-motion-fast) var(--sched-ease-standard),
      box-shadow var(--sched-motion-fast) var(--sched-ease-standard),
      scale var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]) {
    border-radius: var(--sched-radius-sm);
  }

  .sched-app :where(.sched-postgrest-surface input[type="radio"]) {
    border-radius: var(--sched-radius-pill);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]:hover, .sched-postgrest-surface input[type="radio"]:hover) {
    border-color: var(--sched-brand);
    box-shadow: 0 0 0 var(--sched-size-rule) var(--sched-brand-soft), var(--sched-choice-control-shadow);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]:active, .sched-postgrest-surface input[type="radio"]:active) {
    scale: var(--sched-choice-control-press-scale);
  }

  .sched-app :where(
    .sched-postgrest-surface input[type="checkbox"]:checked,
    .sched-postgrest-surface input[type="checkbox"]:indeterminate,
    .sched-postgrest-surface input[type="radio"]:checked
  ) {
    background-color: var(--sched-brand);
    border-color: var(--sched-brand);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]:checked:not([data-sched-boolean-switch])) {
    background-image: var(--sched-choice-control-check-image);
    background-size: var(--sched-size-4) var(--sched-size-4);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]:indeterminate) {
    background-image: linear-gradient(var(--sched-choice-control-mark-color), var(--sched-choice-control-mark-color));
    background-size: var(--sched-choice-control-check-block-size) var(--sched-size-0-5);
  }

  .sched-app :where(.sched-postgrest-surface input[type="radio"]:checked) {
    background-image: radial-gradient(
      circle,
      var(--sched-choice-control-mark-color) 0 var(--sched-choice-control-dot-radius),
      transparent calc(var(--sched-choice-control-dot-radius) + var(--sched-size-rule))
    );
    background-size: 100% 100%;
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]::before, .sched-postgrest-surface input[type="radio"]::before) {
    content: "";
    display: block;
    opacity: 0;
    scale: .65;
    transition:
      opacity var(--sched-motion-fast) var(--sched-ease-standard),
      scale var(--sched-motion-base) var(--sched-ease-enter);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]::before) {
    block-size: var(--sched-choice-control-check-block-size);
    border: solid var(--sched-choice-control-mark-color);
    border-width: 0 var(--sched-border-width-caret) var(--sched-border-width-caret) 0;
    inline-size: var(--sched-choice-control-check-inline-size);
    margin-block-start: calc(-1 * var(--sched-space-0-5));
    rotate: 45deg;
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]:checked::before) {
    opacity: 0;
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]:indeterminate::before) {
    background: var(--sched-choice-control-mark-color);
    block-size: var(--sched-size-0-5);
    border: 0;
    inline-size: var(--sched-choice-control-check-block-size);
    margin-block-start: 0;
    opacity: 0;
  }

  .sched-app :where(.sched-postgrest-surface input[type="radio"]::before) {
    background: var(--sched-choice-control-mark-color);
    block-size: var(--sched-choice-control-dot-size);
    border-radius: var(--sched-radius-pill);
    inline-size: var(--sched-choice-control-dot-size);
  }

  .sched-app :where(.sched-postgrest-surface input[type="radio"]:checked::before) {
    opacity: 0;
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"][data-sched-boolean-switch]) {
    --sched-switch-thumb-position: var(--sched-space-0-5);
    background-color: var(--sched-line);
    background-image: radial-gradient(
      circle,
      var(--sched-surface) 0 var(--sched-switch-thumb-radius),
      transparent calc(var(--sched-switch-thumb-radius) + var(--sched-size-rule))
    );
    background-position: var(--sched-switch-thumb-position) center;
    background-repeat: no-repeat;
    background-size: var(--sched-switch-thumb-size) var(--sched-switch-thumb-size);
    block-size: var(--sched-switch-block-size);
    border-color: transparent;
    border-radius: var(--sched-radius-pill);
    box-shadow: inset 0 0 0 var(--sched-size-rule) var(--sched-line-strong), var(--sched-choice-control-shadow);
    inline-size: var(--sched-switch-inline-size);
    padding: var(--sched-space-0-5);
    place-items: center start;
    transition:
      --sched-switch-thumb-position var(--sched-motion-base) var(--sched-ease-enter),
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      box-shadow var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"][data-sched-boolean-switch]::before) {
    content: none;
    display: none;
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"][data-sched-boolean-switch]:checked) {
    --sched-switch-thumb-position: calc(100% - var(--sched-space-0-5));
    background-color: var(--sched-brand);
    border-color: transparent;
    box-shadow: inset 0 0 0 var(--sched-size-rule) color-mix(in srgb, var(--sched-brand) 88%, var(--sched-ink)), var(--sched-choice-control-shadow);
  }

  .sched-app :where(.sched-postgrest-surface input[type="checkbox"]:focus-visible, .sched-postgrest-surface input[type="radio"]:focus-visible) {
    box-shadow: 0 0 0 3px var(--sched-brand-soft), var(--sched-choice-control-shadow);
    outline: 0;
  }

  .sched-app :where(.sched-postgrest-surface p:has(> input[type="checkbox"]), .sched-postgrest-surface p:has(> input[type="radio"])) {
    align-items: center;
    column-gap: var(--sched-space-2);
    grid-template-columns: minmax(0, max-content) max-content;
    justify-content: start;
  }

  .sched-app :where(.sched-postgrest-surface p:has(> input[type="checkbox"]) > label, .sched-postgrest-surface p:has(> input[type="radio"]) > label) {
    grid-column: 1;
  }

  .sched-app :where(.sched-postgrest-surface input:not([type="checkbox"]):not([type="radio"]):focus-visible, .sched-postgrest-surface select:focus-visible, .sched-postgrest-surface textarea:focus-visible) {
    border-color: var(--sched-brand);
    box-shadow: 0 0 0 3px var(--sched-brand-soft);
  }

  .sched-app :where(.sched-postgrest-surface [data-server-form-field-state="invalid"]) {
    border-color: var(--sched-status-emer-bd);
    box-shadow: 0 0 0 3px var(--sched-status-emer-bg);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover],
    .sched-postgrest-surface [data-ref-search-edit-popover],
    .sched-postgrest-surface [data-postgrest-row-delete-popover],
    .sched-postgrest-surface [data-postgrest-bulk-delete-popover],
    .sched-postgrest-surface [data-postgrest-filters-popover],
    .sched-postgrest-surface [data-postgrest-columns-popover]
  ) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    box-sizing: border-box;
    box-shadow: 0 22px 60px -26px rgba(17, 24, 39, .38);
    color: var(--sched-ink);
    inline-size: max-content;
    margin: auto;
    max-block-size: min(var(--sched-measure-table-md), calc(100vh - var(--sched-space-12)));
    max-inline-size: min(var(--sched-postgrest-popover-max-inline-size), calc(100vw - var(--sched-postgrest-popover-viewport-margin)));
    min-inline-size: min(var(--sched-postgrest-popover-min-inline-size), calc(100vw - var(--sched-postgrest-popover-viewport-margin)));
    opacity: 0;
    overflow: hidden;
    padding: 0;
    text-align: start;
    transform: translateY(var(--sched-motion-entrance-offset)) scale(var(--sched-motion-popover-scale));
    transition-behavior: allow-discrete;
    transition:
      opacity var(--sched-motion-slow) var(--sched-ease-enter),
      transform var(--sched-motion-slow) var(--sched-ease-enter),
      overlay var(--sched-motion-slow) allow-discrete,
      display var(--sched-motion-slow) allow-discrete;
  }

  /* Confirm dialogs (row + bulk delete) are compact - a heading, one prompt line, two actions - not
     form dialogs. Cap them well below the form-dialog measure so the prompt wraps into a tight column
     instead of stretching to one wide line, and drop the form-dialog minimum so a short confirm shrinks
     to its content. */
  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-row-delete-popover],
    .sched-postgrest-surface [data-postgrest-bulk-delete-popover]
  ) {
    min-inline-size: auto;
    max-inline-size: min(var(--sched-postgrest-confirm-popover-inline-size), calc(100vw - var(--sched-postgrest-popover-viewport-margin)));
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover],
    .sched-postgrest-surface [data-ref-search-edit-popover],
    .sched-postgrest-surface [data-postgrest-filters-popover],
    .sched-postgrest-surface [data-postgrest-columns-popover]
  ) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Adaptive render-time create-popover sizing (fn-52 C): the model stamps --sched-popover-cols
     (1 or 2) and --sched-popover-col-ch (the widest compact column measure) on the section, so the
     dialog shrink-wraps its columns instead of floating on a fixed floor. Width = cols x capped
     column + inter-column gaps + body inline padding, clamped to the viewport and the shared max
     cap. Surfaces that do not stamp fall back to one column at the default measure. The
     viewport-clamped dialog minimum stops a short single-column form from shrinking below the
     width the footer needs to keep cancel + submit on one row (intrinsic keywords are not valid
     inside min()/max() math, so the floor is the plain clamped token; the body's minmax(0, 1fr)
     tracks already keep fields from forcing overflow). The nested-CRUD edit popover
     ([data-ref-search-edit-popover]) shares this rule: declaring the two custom properties on it
     also shields it from inheriting the host section's stamped column plan - the injected edit
     fragment is always a one-column stack. */
  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover],
    .sched-postgrest-surface [data-ref-search-edit-popover]
  ) {
    --sched-popover-cols: 1;
    --sched-popover-col-ch: var(--sched-postgrest-create-popover-col-ch);
    inline-size: min(
      calc(
        var(--sched-popover-cols) * (var(--sched-popover-col-ch) * 1ch + var(--sched-field-affordance))
        + (var(--sched-popover-cols) - 1) * var(--sched-space-3)
        + 2 * var(--sched-postgrest-modal-body-padding-inline)
      ),
      calc(100vw - var(--sched-postgrest-popover-viewport-margin))
    );
    max-inline-size: min(var(--sched-postgrest-create-popover-max-inline-size), calc(100vw - var(--sched-postgrest-popover-viewport-margin)));
    min-inline-size: min(var(--sched-postgrest-create-popover-min-inline-size), calc(100vw - var(--sched-postgrest-popover-viewport-margin)));
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filters-popover]) {
    max-inline-size: min(var(--sched-postgrest-filter-popover-inline-size), calc(100vw - var(--sched-postgrest-popover-viewport-margin)));
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover]:popover-open,
    .sched-postgrest-surface [data-ref-search-edit-popover]:popover-open,
    .sched-postgrest-surface [data-postgrest-row-delete-popover]:popover-open,
    .sched-postgrest-surface [data-postgrest-bulk-delete-popover]:popover-open,
    .sched-postgrest-surface [data-postgrest-filters-popover]:popover-open,
    .sched-postgrest-surface [data-postgrest-columns-popover]:popover-open
  ) {
    display: grid;
    gap: 0;
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  @starting-style {
    .sched-app :where(
      .sched-postgrest-surface [data-postgrest-create-popover]:popover-open,
      .sched-postgrest-surface [data-ref-search-edit-popover]:popover-open,
      .sched-postgrest-surface [data-postgrest-row-delete-popover]:popover-open,
      .sched-postgrest-surface [data-postgrest-bulk-delete-popover]:popover-open,
      .sched-postgrest-surface [data-postgrest-filters-popover]:popover-open,
      .sched-postgrest-surface [data-postgrest-columns-popover]:popover-open
    ) {
      opacity: 0;
      transform: translateY(var(--sched-motion-entrance-offset)) scale(var(--sched-motion-popover-scale));
    }
  }

  .sched-app [popover]::backdrop {
    background: var(--sched-overlay-scrim);
    opacity: 0;
    pointer-events: auto;
    transition-behavior: allow-discrete;
    transition:
      opacity var(--sched-motion-overlay) var(--sched-ease-standard),
      overlay var(--sched-motion-overlay) allow-discrete,
      display var(--sched-motion-overlay) allow-discrete;
  }

  .sched-app [popover]:popover-open::backdrop {
    opacity: 1;
  }

  .sched-app [popover].sched-menu-content::backdrop,
  .sched-app [popover].sched-menu-content:popover-open::backdrop {
    background: transparent;
    opacity: 1;
    pointer-events: none;
  }

  .sched-app [popover][data-postgrest-row-actions-menu]::backdrop,
  .sched-app [popover][data-postgrest-row-actions-menu]:popover-open::backdrop {
    background: transparent;
    opacity: 1;
    pointer-events: none;
  }

  @starting-style {
    .sched-app [popover]:popover-open::backdrop {
      opacity: 0;
    }
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] form, .sched-postgrest-surface [data-postgrest-filters-form]) {
    display: grid;
    gap: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] fieldset, .sched-postgrest-surface [data-postgrest-filters-popover] fieldset, .sched-postgrest-surface [data-postgrest-column-filter-popover] fieldset) {
    border: 0;
    display: grid;
    gap: 0;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] legend, .sched-postgrest-surface [data-ref-search-edit-popover] h4, .sched-postgrest-surface [data-postgrest-row-delete-popover] h4, .sched-postgrest-surface [data-postgrest-bulk-delete-popover] h4, .sched-postgrest-surface [data-postgrest-filters-popover] legend) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-base-plus);
    font-weight: var(--sched-font-weight-extrabold);
    margin: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-popover-body]) {
    align-items: start;
    box-sizing: border-box;
    display: grid;
    gap: var(--sched-space-3);
    grid-column: 1 / -1;
    min-inline-size: 0;
    padding: var(--sched-postgrest-modal-body-padding-block) var(--sched-postgrest-modal-body-padding-inline);
    text-align: start;
  }

  /* Adaptive render-time create-popover columns (fn-52 C): the model stamps --sched-popover-cols
     (1 or 2) on the section; equal minmax(0, 1fr) tracks mean every field FILLS its column, so
     inputs / selects stacked in one column share an identical width (aligned edges, no ragged
     trailing gaps). "No oversize control" is enforced by the COLUMN, not per field: the section's
     --sched-popover-col-ch (widest content measure, floored + capped in C#) sizes the container, so
     a filled field can never exceed one bounded column. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] [data-postgrest-popover-body]) {
    grid-template-columns: repeat(var(--sched-popover-cols, 1), minmax(0, 1fr));
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] [data-postgrest-form-field]) {
    min-inline-size: 0;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover] [data-postgrest-form-field-span="full"],
    .sched-postgrest-surface [data-postgrest-create-popover] [data-server-form-error]
  ) {
    grid-column: 1 / -1;
  }

  /* Interval pair (count input + unit select share the field name; the server composes them into
     one PostgreSQL interval literal): the count takes the remaining track, the unit stays
     content-sized beside it. Applies in create popovers and inline edit cells alike. */
  .sched-app :where(.sched-postgrest-surface [data-settings-interval-field]) {
    display: flex;
    gap: var(--sched-space-1-5);
    min-inline-size: 0;
  }

  /* Number inputs in form dialogs cap at the compact number measure instead of filling their
     column; the interval pair's count input is a number too, so it drops its column-fill flex and
     the count+unit pair sits content-sized on its row. */
  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover] [data-postgrest-form-field-kind="number"] input,
    .sched-postgrest-surface [data-postgrest-create-popover] [data-postgrest-form-field-kind="wholenumber"] input
  ) {
    max-inline-size: calc(var(--sched-postgrest-number-field-ch) * 1ch + var(--sched-field-affordance));
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] [data-settings-interval-field] input) {
    flex: 0 1 auto;
    inline-size: calc(var(--sched-postgrest-number-field-ch) * 1ch + var(--sched-field-affordance));
  }

  /* A paired form dialog leads with its picker: the lead column takes the remaining width and the
     trailing column shrinks to its content (a capped number field), instead of a 50/50 split. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover][data-postgrest-popover-pair] [data-postgrest-popover-body]) {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .sched-app :where(.sched-postgrest-surface [data-settings-interval-field] input) {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-settings-interval-field] select) {
    flex: 0 1 auto;
  }

  .sched-app :where(.sched-postgrest-surface p[data-postgrest-popover-body]) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-medium);
    line-height: var(--sched-line-height-base);
    margin: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-menu] ol) {
    display: grid;
    gap: var(--sched-space-1-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice]) {
    align-items: center;
    border-radius: var(--sched-radius-control);
    display: grid;
    gap: var(--sched-space-1-5);
    grid-template-columns: max-content minmax(0, 1fr) repeat(2, max-content);
    min-inline-size: 0;
    position: relative;
    transition:
      opacity var(--sched-motion-fast) var(--sched-ease-standard),
      transform var(--sched-motion-base) var(--sched-ease-enter);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-visible="false"]) {
    opacity: .6;
    transform: scale(.995);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-popover][data-postgrest-columns-enhanced="true"] [data-postgrest-columns-choice][draggable="true"]) {
    cursor: grab;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-dragging="true"]) {
    opacity: .42;
    transform: scale(.99);
    z-index: 1;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-drop="before"]) {
    outline: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-drop="after"]) {
    outline: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-drop])::after {
    background: var(--sched-brand);
    block-size: var(--sched-size-0-5);
    border-radius: var(--sched-radius-pill);
    content: "";
    inset-inline: 0;
    opacity: .95;
    pointer-events: none;
    position: absolute;
    transform: scaleX(.98);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-drop="before"])::after {
    inset-block-start: calc(-1 * var(--sched-space-1));
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-drop="after"])::after {
    inset-block-end: calc(-1 * var(--sched-space-1));
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-drag-handle]:not([hidden])) {
    align-self: center;
    background-image: radial-gradient(circle at 2px 2px, var(--sched-ink-4) 1px, transparent 1.5px);
    background-repeat: repeat;
    background-size: 6px 6px;
    block-size: var(--sched-size-4-5);
    cursor: grab;
    inline-size: var(--sched-size-2-5);
    justify-self: center;
    opacity: .76;
    transition:
      opacity var(--sched-motion-fast) var(--sched-ease-standard),
      transform var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][draggable="true"]:hover [data-postgrest-columns-drag-handle]:not([hidden])) {
    opacity: 1;
    transform: scale(1.04);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-choice][data-postgrest-columns-dragging="true"] [data-postgrest-columns-drag-handle]) {
    cursor: grabbing;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-option]) {
    align-items: center;
    background-color: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    box-sizing: border-box;
    color: var(--sched-ink);
    display: inline-flex;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-extrabold);
    gap: var(--sched-space-2);
    min-block-size: var(--sched-size-8);
    min-inline-size: 0;
    padding: 0 var(--sched-space-2-5);
    text-decoration: none;
    transition:
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      border-color var(--sched-motion-fast) var(--sched-ease-standard),
      box-shadow var(--sched-motion-fast) var(--sched-ease-standard),
      color var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-option])::before {
    align-items: center;
    background-color: var(--sched-surface);
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--sched-line-strong);
    border-radius: var(--sched-radius-xs);
    block-size: var(--sched-size-4);
    content: "";
    display: inline-flex;
    flex: 0 0 var(--sched-size-4);
    inline-size: var(--sched-size-4);
    justify-content: center;
    transform: scale(.92);
    transition:
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      background-size var(--sched-motion-base) var(--sched-ease-enter),
      border-color var(--sched-motion-fast) var(--sched-ease-standard),
      transform var(--sched-motion-base) var(--sched-ease-enter);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-option][aria-checked="true"]) {
    background-color: var(--sched-brand-soft);
    border-color: color-mix(in srgb, var(--sched-brand) 42%, var(--sched-line));
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-option][aria-checked="true"])::before {
    background-color: var(--sched-brand);
    background-image: var(--sched-choice-control-check-image);
    background-size: var(--sched-size-4) var(--sched-size-4);
    border-color: var(--sched-brand);
    transform: scale(1);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-option][aria-disabled="true"]) {
    opacity: .62;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-columns-option]:is(a):hover,
    .sched-postgrest-surface [data-postgrest-columns-option]:is(a):focus-visible
  ) {
    background-color: var(--sched-surface);
    border-color: var(--sched-brand);
    color: var(--sched-brand);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-columns-move]:not([hidden]),
    .sched-postgrest-surface [data-postgrest-columns-reset]:not([hidden]),
    .sched-postgrest-surface [data-postgrest-columns-apply]:not([hidden])
  ) {
    align-items: center;
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    display: inline-flex;
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    justify-content: center;
    min-block-size: var(--sched-size-8);
    min-inline-size: var(--sched-size-8);
    padding: 0 var(--sched-space-2);
    text-decoration: none;
    text-transform: capitalize;
    transition:
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      border-color var(--sched-motion-fast) var(--sched-ease-standard),
      color var(--sched-motion-fast) var(--sched-ease-standard),
      opacity var(--sched-motion-fast) var(--sched-ease-standard);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-apply]:disabled) {
    cursor: not-allowed;
    opacity: .48;
  }

  @media (prefers-reduced-motion: reduce) {
    .sched-app :where(
      .sched-postgrest-surface [data-postgrest-columns-choice],
      .sched-postgrest-surface [data-postgrest-columns-drag-handle]:not([hidden]),
      .sched-postgrest-surface [data-postgrest-columns-option],
      .sched-postgrest-surface [data-postgrest-columns-option]::before,
      .sched-postgrest-surface [data-postgrest-columns-move]:not([hidden]),
      .sched-postgrest-surface [data-postgrest-columns-reset]:not([hidden]),
      .sched-postgrest-surface [data-postgrest-columns-apply]:not([hidden])
    ) {
      transition-duration: var(--sched-motion-reduced);
    }
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-footer]) {
    display: grid;
    gap: var(--sched-space-1-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-reset]:not([hidden])) {
    inline-size: 100%;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-columns-apply]:not([hidden])) {
    background: var(--sched-brand);
    border-color: var(--sched-brand);
    color: #ffffff;
    inline-size: 100%;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-columns-move]:hover,
    .sched-postgrest-surface [data-postgrest-columns-reset]:hover,
    .sched-postgrest-surface [data-postgrest-columns-apply]:hover
  ) {
    border-color: var(--sched-line-strong);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] p, .sched-postgrest-surface [data-postgrest-row-delete-popover] p, .sched-postgrest-surface [data-postgrest-bulk-delete-popover] p) {
    color: var(--sched-ink-3);
    display: grid;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-medium);
    gap: var(--sched-space-1-5);
    line-height: var(--sched-line-height-base);
    margin: 0;
  }

  /* The delete failure line stands apart from the ink-3 confirmation copy above it: emergency ink on a
     tinted, bordered band so the reason (e.g. a still-referenced row) reads as an alert, not more prose.
     Layered after the shared prompt rule so it wins the colour on the same specificity. */
  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-row-delete-popover] [data-server-form-error],
    .sched-postgrest-surface [data-postgrest-bulk-delete-popover] [data-server-form-error]
  ) {
    background: var(--sched-status-emer-bg);
    border: 1px solid var(--sched-status-emer-bd);
    border-radius: var(--sched-radius-control);
    color: var(--sched-status-emer);
    padding: var(--sched-space-2) var(--sched-space-2-5);
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover] legend,
    .sched-postgrest-surface [data-ref-search-edit-popover] h4,
    .sched-postgrest-surface [data-postgrest-row-delete-popover] h4,
    .sched-postgrest-surface [data-postgrest-bulk-delete-popover] h4,
    .sched-postgrest-surface [data-postgrest-filters-popover] > [data-postgrest-filters-form] > [data-postgrest-filter-group] > legend
  ) {
    align-items: center;
    border-bottom: 1px solid var(--sched-section-header-border-color);
    box-sizing: border-box;
    display: flex;
    grid-column: 1 / -1;
    inline-size: 100%;
    line-height: var(--sched-line-height-snug);
    min-block-size: var(--sched-postgrest-modal-header-min-block-size);
    padding: var(--sched-postgrest-modal-header-padding-block-start) var(--sched-postgrest-modal-header-padding-inline) var(--sched-postgrest-modal-header-padding-block-end);
    text-align: start;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filter-group-body]) {
    display: grid;
    gap: var(--sched-space-3);
    grid-column: 1 / -1;
    min-inline-size: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] p:has(> st-ref-search:not([data-ref-search-ready]) > [data-postgrest-related-create-trigger])) {
    align-items: end;
    column-gap: var(--sched-space-2);
    grid-template-columns: minmax(0, 1fr) max-content;
    row-gap: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] p:has(> st-ref-search:not([data-ref-search-ready]) > [data-postgrest-related-create-trigger]) > label) {
    grid-column: 1 / -1;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-create-popover] p > st-ref-search > [data-settings-relationship-field],
    .sched-postgrest-surface [data-postgrest-create-popover] p > st-ref-search > [data-ref-search-trigger]
  ) {
    grid-column: 1;
    min-inline-size: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] p > st-ref-search > [data-postgrest-related-create-trigger]) {
    align-self: end;
    grid-column: 2;
  }

  /* The upgraded panel absorbs the inline-create trigger as its trailing "Create ..."
     option, so the base button vacates the field row. */
  .sched-app :where(.sched-postgrest-surface st-ref-search[data-ref-search-ready] > [data-postgrest-related-create-trigger]) {
    display: none;
  }

  .sched-app :where(.sched-postgrest-surface [data-settings-ref-search]) {
    align-items: center;
    column-gap: var(--sched-space-2);
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    inline-size: 100%;
    row-gap: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-settings-ref-search] > label) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-postgrest-surface [data-settings-ref-search] > input[type="search"]) {
    flex: 1 1 8rem;
    min-inline-size: 0;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-settings-ref-search] > [data-settings-ref-search-submit],
    .sched-postgrest-surface [data-settings-ref-search] > [data-settings-ref-search-clear]
  ) {
    align-items: center;
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    display: inline-flex;
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    justify-content: center;
    min-block-size: var(--sched-size-8);
    padding: 0 var(--sched-space-2);
    text-decoration: none;
    text-transform: capitalize;
  }

  .sched-app :where(.sched-postgrest-surface [data-settings-ref-search-summary]) {
    color: var(--sched-ink-2);
    display: block;
    font-size: var(--sched-font-size-xs);
    grid-column: 1 / -1;
    inline-size: 100%;
  }

  /* st-ref-search combobox: the wrapper lays out as its contents both before and after upgrade,
     so the JS-off base and the upgraded trigger occupy the same field grid slot. */
  .sched-app :where(.sched-postgrest-surface st-ref-search) {
    display: contents;
  }

  .sched-app :where(.sched-postgrest-surface st-ref-search[data-ref-search-ready] > [data-ref-search-fallback]) {
    display: none;
  }

  /* The wrapped select stays rendered, form-associated, and focusable (constraint validation)
     but visually vacates in favor of the trigger. */
  .sched-app :where(.sched-postgrest-surface st-ref-search[data-ref-search-ready] > select[data-ref-search-select]) {
    block-size: var(--sched-size-a11y-hidden);
    clip-path: inset(50%);
    inline-size: var(--sched-size-a11y-hidden);
    margin: 0;
    min-block-size: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
  }

  .sched-app :where(.sched-postgrest-surface st-ref-search > [data-ref-search-trigger]) {
    align-items: center;
    appearance: none;
    background-color: var(--sched-surface-2);
    background-image: linear-gradient(45deg, transparent 50%, var(--sched-ink-3) 50%), linear-gradient(135deg, var(--sched-ink-3) 50%, transparent 50%);
    background-position:
      calc(100% - var(--sched-select-caret-position-end)) 50%,
      calc(100% - var(--sched-select-caret-position-start)) 50%;
    background-repeat: no-repeat;
    background-size: var(--sched-select-caret-size) var(--sched-select-caret-size), var(--sched-select-caret-size) var(--sched-select-caret-size);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-control);
    box-sizing: border-box;
    color: var(--sched-ink);
    display: flex;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-semibold);
    inline-size: 100%;
    min-block-size: var(--sched-postgrest-inline-control-block-size);
    min-inline-size: 0;
    outline: 0;
    padding: var(--sched-space-1-75) var(--sched-space-7-5) var(--sched-space-1-75) var(--sched-space-2-5);
    text-align: start;
  }

  .sched-app :where(.sched-postgrest-surface st-ref-search > [data-ref-search-trigger]:focus-visible) {
    box-shadow: 0 0 0 var(--sched-space-0-75) var(--sched-brand-soft);
    outline: 0;
  }

  .sched-app :where(.sched-postgrest-surface st-ref-search [data-ref-search-value]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-postgrest-surface st-ref-search > [data-ref-search-trigger][data-ref-search-empty] [data-ref-search-value]) {
    color: var(--sched-ink-3);
  }

  /* A filter pill hosting an UPGRADED combobox defers to the shared trigger: the pill keeps its
     own ▾ only for the JS-off native-select floor, and the trigger drops its box chrome inside
     the pill so the control reads as ONE shared dropdown - never two nested boxes with two
     carets. */
  .sched-app :where(.sched-filter-control:has(st-ref-search[data-ref-search-ready]))::after {
    content: none;
  }

  .sched-app :where(.sched-filter-control st-ref-search > [data-ref-search-trigger]) {
    background-color: transparent;
    border: 0;
    min-block-size: 0;
    padding: 0 var(--sched-space-7-5) 0 0;
  }

  .sched-app :where(st-ref-search [data-ref-search-panel]) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    box-shadow: var(--sched-shadow-lift);
    color: var(--sched-ink);
    gap: var(--sched-space-1-5);
    grid-template-rows: max-content minmax(0, 1fr) max-content;
    inset: auto;
    margin: 0;
    max-block-size: calc(100vh - (var(--sched-menu-viewport-margin) * 2));
    min-inline-size: 0;
    padding: var(--sched-space-2);
    position: fixed;
    z-index: var(--sched-menu-z-index);
  }

  .sched-app :where(st-ref-search [data-ref-search-panel]:popover-open) {
    display: grid;
  }

  .sched-app [popover][data-ref-search-panel]::backdrop,
  .sched-app [popover][data-ref-search-panel]:popover-open::backdrop {
    background: transparent;
    opacity: 1;
    pointer-events: none;
  }

  @supports (position-area: bottom) {
    .sched-app :where(st-ref-search [data-ref-search-panel]) {
      inline-size: anchor-size(width);
      position-area: bottom center;
      position-try-fallbacks: flip-block;
    }
  }

  /* When the status line is a pure count it is screen-reader-only (position: absolute, out of flow),
     so its grid track holds nothing yet the trailing row-gap still reserves dead space under the last
     option (and the "Create ..." link). Drop the third track in that common case so the listbox ends
     flush against the panel's bottom padding; a visible actionable status (no count attribute)
     restores the three-track template through the base rule. */
  .sched-app :where(st-ref-search [data-ref-search-panel]:has([data-ref-search-status][data-ref-search-status-count])) {
    grid-template-rows: max-content minmax(0, 1fr);
  }

  /* grid-auto-rows is load-bearing, not cosmetic. Each option sets overflow: hidden to get its
     ellipsis, and an overflow-hidden grid item has an automatic minimum size of zero. Without an
     explicit row size the implicit rows are therefore free to shrink below the text they hold, so a
     list longer than the panel squashed every option into a clipped sliver instead of scrolling.
     Pinning the rows to max-content makes the content exceed the box, which is what hands the
     overflow-y below something to scroll. The option carries the floor too
     (--sched-ref-search-option-min-block-size): the track sizing states what the row measures, the
     option states what it may never fall under, so a rule that re-sizes the track cannot bring the
     squash back.

     will-change: transform is load-bearing too. The pinned "Create ..." option at the end of the
     list is position: sticky, and in a Chromium scroller that is not composited the glyph tops of
     the row under it paint through its bottom padding band (measured in a minimal page: any sticky
     row taller than its text line leaks; a composited scroller does not). Promoting the listbox
     to its own layer is the one property that draws the pinned row whole. */
  .sched-app :where(st-ref-search [data-ref-search-listbox]) {
    display: grid;
    gap: var(--sched-space-0-5);
    grid-auto-rows: max-content;
    list-style: none;
    margin: 0;
    max-block-size: var(--sched-ref-search-list-max-block-size);
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    will-change: transform;
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] > [role="option"]) {
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink);
    cursor: default;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-medium);
    min-block-size: var(--sched-ref-search-option-min-block-size);
    overflow: hidden;
    padding: var(--sched-space-1-5) var(--sched-space-2);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Options carrying a hover affordance (edit link and/or delete trash) reserve room for it; the
     affordances float at the inline end and only surface on hover / keyboard-active so labels stay
     clean. */
  .sched-app :where(
    st-ref-search [data-ref-search-listbox] > [role="option"]:has(> [data-ref-search-edit]),
    st-ref-search [data-ref-search-listbox] > [role="option"]:has(> [data-ref-search-delete])
  ) {
    padding-inline-end: var(--sched-space-9-5);
    position: relative;
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] [data-ref-search-edit]) {
    color: var(--sched-brand);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    inset-block-start: 50%;
    inset-inline-end: var(--sched-space-2);
    opacity: 0;
    position: absolute;
    text-decoration: none;
    text-transform: capitalize;
    transform: translateY(-50%);
  }

  .sched-app :where(
    st-ref-search [data-ref-search-listbox] > [role="option"]:hover [data-ref-search-edit],
    st-ref-search [data-ref-search-listbox] > [role="option"][data-active] [data-ref-search-edit],
    st-ref-search [data-ref-search-listbox] [data-ref-search-edit]:focus-visible
  ) {
    opacity: 1;
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] [data-ref-search-edit]:hover) {
    text-decoration: underline;
  }

  /* The per-option delete trash: a danger-toned icon button mirroring the edit link's float, anchored
     at the inline end. Its glyph reuses the shared row-delete icon mask (single-source), so the picker
     trash and the row-actions trash cannot drift. */
  .sched-app :where(st-ref-search [data-ref-search-listbox] [data-ref-search-delete]) {
    background: none;
    block-size: var(--sched-size-4);
    border: 0;
    color: var(--sched-status-emer);
    cursor: pointer;
    inline-size: var(--sched-size-4);
    inset-block-start: 50%;
    inset-inline-end: var(--sched-space-2);
    opacity: 0;
    padding: 0;
    position: absolute;
    transform: translateY(-50%);
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] [data-ref-search-delete])::before {
    background: currentColor;
    block-size: 100%;
    content: "";
    display: block;
    inline-size: 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Both affordances present: widen the reserve and shift the edit link inboard of the trash button so
     they sit side by side (edit then delete, in inline order). */
  .sched-app :where(st-ref-search [data-ref-search-listbox] > [role="option"]:has(> [data-ref-search-edit]):has(> [data-ref-search-delete])) {
    padding-inline-end: calc(var(--sched-space-9-5) + var(--sched-space-6));
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] > [role="option"]:has(> [data-ref-search-delete]) [data-ref-search-edit]) {
    inset-inline-end: var(--sched-space-7);
  }

  .sched-app :where(
    st-ref-search [data-ref-search-listbox] > [role="option"]:hover [data-ref-search-delete],
    st-ref-search [data-ref-search-listbox] > [role="option"][data-active] [data-ref-search-delete],
    st-ref-search [data-ref-search-listbox] [data-ref-search-delete]:focus-visible
  ) {
    opacity: 1;
  }

  /* The trailing "Create ..." option is pinned to the bottom of the list: sticky inside the scrolling
     listbox, so it stays in view however long the list is and the typed term is always one click
     from a new row. It is still the last option in the same listbox, so arrow keys, the active
     descendant and :only-child all keep working. It is separated from the matches by a hairline rule
     and accent-colored, with the recognizable leading plus, and it keeps the base option row's
     padding and the listbox gap for its spacing. The surface background and the one-gap shadow
     above it cover the rows that scroll underneath. */
  .sched-app :where(st-ref-search [data-ref-search-listbox] > [data-ref-search-create-option]) {
    background: var(--sched-surface);
    border-block-start: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: 0 0 var(--sched-radius-control) var(--sched-radius-control);
    box-shadow: 0 calc(-1 * var(--sched-space-0-5)) 0 var(--sched-surface);
    color: var(--sched-brand);
    font-weight: var(--sched-font-weight-extrabold);
    inset-block-end: 0;
    position: sticky;
  }

  /* When Create is the whole list, it starts no second section and needs no separator. The shared
     component omits unselected placeholder rows, so :only-child covers this state globally. */
  .sched-app :where(st-ref-search [data-ref-search-listbox] > [data-ref-search-create-option]:only-child) {
    border-block-start: 0;
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] > [data-ref-search-create-option])::before {
    content: "+ ";
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] > [role="option"]:hover) {
    background: var(--sched-surface-2);
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] > [role="option"][data-active]) {
    background: var(--sched-brand-soft);
    color: var(--sched-brand);
  }

  .sched-app :where(st-ref-search [data-ref-search-listbox] > [role="option"][aria-selected="true"]) {
    font-weight: var(--sched-font-weight-extrabold);
  }

  /* Visible only for actionable texts (no matches, truncation hints, failures): pure count
     announcements carry data-ref-search-status-count and ride the shared visually-hidden rule,
     staying live-region announcements without a visible "N options" footer. */
  .sched-app :where(st-ref-search [data-ref-search-status]) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-xs);
    margin: 0;
  }

  /* The nested-CRUD edit popover's status line sits between the body and the footer; it only
     occupies space when a save failure writes into it, and its navigate floor link reads as a
     brand action. */
  .sched-app :where(st-ref-search [data-ref-search-edit-status]) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-medium);
    line-height: var(--sched-line-height-base);
    margin: 0;
    padding: 0 var(--sched-postgrest-modal-body-padding-inline) var(--sched-space-3);
  }

  .sched-app :where(st-ref-search [data-ref-search-edit-status]:empty) {
    display: none;
  }

  .sched-app :where(st-ref-search [data-ref-search-edit-status] [data-ref-search-edit-navigate]) {
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-popover-footer]) {
    align-items: center;
    border-top: 1px solid var(--sched-section-header-border-color);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-postgrest-modal-footer-gap);
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding: var(--sched-postgrest-modal-footer-padding-block) var(--sched-postgrest-modal-footer-padding-inline);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-popover-footer] form) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-postgrest-modal-footer-gap);
    justify-content: flex-end;
    margin: 0;
  }

  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-popover-footer] button,
    .sched-postgrest-surface [data-postgrest-popover-footer] a,
    .sched-postgrest-surface [data-postgrest-popover-footer] .sched-button
  ) {
    inline-size: auto;
    min-inline-size: var(--sched-measure-action);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-create-popover] label) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filter-group]) {
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    display: grid;
    gap: var(--sched-space-3);
    padding: var(--sched-space-3);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filters-popover] > [data-postgrest-filters-form] > [data-postgrest-filter-group]) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filter-predicates]) {
    display: grid;
    gap: var(--sched-space-2-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filter-predicate]) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    display: grid;
    gap: var(--sched-space-2-5);
    grid-template-columns: repeat(4, minmax(0, 1fr)) max-content;
    padding: var(--sched-space-2-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filter-predicate] > *) {
    min-inline-size: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-filter-group-actions]) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
    margin: 0;
  }

  @media (max-width: 760px) {
    .sched-app :where(table.sched-resource-table[data-postgrest-table]) {
      min-inline-size: var(--sched-measure-content);
    }

    .sched-app :where(.sched-postgrest-surface [data-postgrest-filter-predicate]) {
      grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked header (see the 760px block in sched.components), the controls panel's own row
       wraps too: the search field keeps its measure floor and the actions carry visible-text
       links, so on one line they are wider than a phone. The field takes the whole first line,
       the actions the next, right-aligned by their auto margin. Both overrides live here, not in
       the components block, because the rules they beat are in this layer and layers win before
       media or order. */
    .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form]) {
      flex: 1 1 100%;
    }

    .sched-app :where(.sched-postgrest-surface [data-postgrest-table-controls-panel] [data-postgrest-table-controls]) {
      flex: 1 1 100%;
      flex-wrap: wrap;
    }
  }
}

@layer sched.components {
  .sched-app :where(.sched-equipment-stat-grid, .sched-inventory-stat-grid, .sched-parts-demand-stat-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sched-app :where(.sched-equipment-stat-label) {
    align-items: center;
    display: inline-flex;
    gap: var(--sched-space-2);
  }

  .sched-app :where(.sched-equipment-stat-label)::before {
    background: var(--sched-status-color, var(--sched-brand));
    border-radius: var(--sched-radius-pill);
    block-size: var(--sched-size-2);
    content: "";
    inline-size: var(--sched-size-2);
  }

  .sched-app :where(.sched-equipment-total-card) {
    border-color: var(--sched-brand);
    box-shadow: inset 0 0 0 1px var(--sched-brand);
  }

  .sched-app :where(.sched-equipment-runtime) {
    white-space: nowrap;
  }

  .sched-app :where(.sched-dashboard-stat-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sched-app :where(.sched-dashboard-main, .sched-dashboard-side) {
    align-content: start;
    display: grid;
    gap: var(--sched-space-4);
  }

  .sched-app :where(.sched-dashboard-panel) {
    overflow: hidden;
  }

  .sched-app :where(.sched-status-dot) {
    background: var(--sched-status-color, var(--sched-brand));
    border-radius: 50%;
    block-size: var(--sched-size-2);
    display: inline-block;
    inline-size: var(--sched-size-2);
  }

  .sched-app :where(.sched-dashboard-panel-header h2) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-dashboard-panel-header h2 span) {
    color: var(--sched-ink-3);
    font-weight: var(--sched-font-weight-semibold);
    margin-inline-start: var(--sched-space-2);
  }

  .sched-app :where(.sched-dashboard-panel-header a) {
    color: var(--sched-brand);
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-extrabold);
  }

      .sched-app :where(.sched-dashboard-completed .sched-card-content) {
    align-items: end;
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  .sched-app :where(.sched-dashboard-bars) {
    align-items: end;
    block-size: var(--sched-size-13-5);
    display: grid;
    gap: var(--sched-space-1);
    grid-auto-columns: minmax(42px, 1fr);
    grid-auto-flow: column;
  }

  .sched-app :where(.sched-dashboard-bars [data-bar]) {
    background: var(--sched-brand-soft);
    border-radius: var(--sched-radius-xs) var(--sched-radius-xs) 0 0;
    display: block;
    min-block-size: var(--sched-size-0-75);
  }

  .sched-app :where(.sched-dashboard-bars [data-active="true"]) {
    background: var(--sched-brand);
  }

  .sched-app :where(.sched-dashboard-bars [data-level="76"]) { block-size: 76%; }
  .sched-app :where(.sched-dashboard-bars [data-level="68"]) { block-size: 68%; }
  .sched-app :where(.sched-dashboard-bars [data-level="62"]) { block-size: 62%; }
  .sched-app :where(.sched-dashboard-bars [data-level="54"]) { block-size: 54%; }
  .sched-app :where(.sched-dashboard-bars [data-level="48"]) { block-size: 48%; }
  .sched-app :where(.sched-dashboard-bars [data-level="20"]) { block-size: 20%; }
  .sched-app :where(.sched-dashboard-bars [data-level="3"]) { block-size: 3%; }

  .sched-app :where(.sched-dashboard-total) {
    display: grid;
    gap: var(--sched-space-0-5);
    justify-items: end;
  }

  .sched-app :where(.sched-dashboard-total strong) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-5xl);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-none);
  }

  .sched-app :where(.sched-dashboard-total span) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-bold);
    white-space: nowrap;
  }

  .sched-app :where(.sched-dashboard-panel .sched-mini-row small) {
    color: var(--sched-ink-3);
    display: block;
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-semibold);
    margin-block-start: var(--sched-space-0-5);
  }

  .sched-app :where(.sched-stat-value span) {
    color: var(--sched-ink-3);
    font-family: var(--sched-font-sans);
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-extrabold);
  }

  /* The title block is the header row's start wing: the title line over the note. It grows from
     a zero basis, the mirror of the controls panel, so the quick-filter strip between them stays
     centered; its measure floor keeps a wide strip from collapsing it, and it never pushes the
     tools out of the row. */
  .sched-app :where(.sched-table-titleblock) {
    display: grid;
    flex: 1 1 0;
    gap: var(--sched-space-0-5);
    min-inline-size: var(--sched-measure-control);
  }

  .sched-app :where(.sched-table-titleline) {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
    min-inline-size: 0;
  }

  .sched-app :where(.sched-table-titleline > a) {
    color: var(--sched-brand);
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-extrabold);
    min-inline-size: 0;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sched-app :where(.sched-table-titleline :is(h1, h2)) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-extrabold);
  }

  .sched-app :where(.sched-table-titleline :is(h1, h2) span, .sched-table-titleline p, .sched-table-note) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-semibold);
  }

  .sched-app :where(.sched-coverage-bar) {
    background: var(--sched-line);
    border-radius: var(--sched-radius-pill);
    inline-size: min(var(--sched-measure-compact), 100%);
    overflow: hidden;
  }

  .sched-app :where(.sched-coverage-bar [data-bar]) {
    display: block;
    min-block-size: var(--sched-size-1-75);
    transition: inline-size var(--sched-motion-base) var(--sched-ease-standard);
  }

  @media (max-width: 980px) {
    .sched-app :where(.sched-inventory-stat-grid, .sched-parts-demand-stat-grid, .sched-dashboard-stat-grid) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 620px) {
    .sched-app :where(.sched-inventory-stat-grid, .sched-parts-demand-stat-grid, .sched-dashboard-stat-grid) {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@layer sched.postgrest {
  .sched-app :where(.sched-resource-table .sched-numeric) {
    color: var(--sched-ink);
    font-variant-numeric: tabular-nums;
    font-weight: var(--sched-font-weight-extrabold);
    text-align: right;
  }

  .sched-app :where(.sched-resource-table .sched-muted-number) {
    color: var(--sched-ink-3);
  }

  /* Row-state rendering for derived rows (data-sched-row-state comes from a resource's RowState
     discriminator). Excluded/overridden plan-coverage rows stay visible but read as outside the
     normal plan: struck through and muted, without touching the row's action forms. */
  .sched-app :where(
    .sched-resource-table tr[data-sched-row-state='plan-excluded'],
    .sched-resource-table tr[data-sched-row-state='plan-overridden']
  ) :where(th[scope='row'], td:not([data-sched-row-actions])) {
    color: var(--sched-ink-3);
    text-decoration: line-through;
  }

  .sched-app :where(.sched-resource-table .sched-gap-pill) {
    margin-inline-start: var(--sched-space-1-5);
    vertical-align: middle;
  }
}

/* Marketing shell.

   The console and the marketing site are one design system with two page shells. The console is a
   fixed-viewport app frame (`body.sched-app` locks the viewport and hides overflow); the marketing
   site is a scrolling document. Marketing therefore renders `<body class="sched-site">` with a
   `.sched-app` element inside it, which buys every `.sched-app :where(...)` component rule -
   buttons, cards, badges, stat grids, charts, empty states - with no selector edits and no second
   copy of any recipe. What follows is only the vocabulary the console does not have: the document
   shell, the section rhythm, and the marketing-specific plates. */
@layer sched.base {
  body.sched-site {
    background: var(--sched-surface);
    margin: 0;
  }

  /* The nested app root must not re-assert the console's page background over a marketing section
     that has deliberately chosen a muted or deep tone. Two classes beat the one-class component
     rule without touching it. */
  body.sched-site > :where(.sched-app) {
    background: var(--sched-surface);
    overflow: visible;
  }

  html:has(body.sched-site) {
    scroll-behavior: smooth;
  }

  /* The component-layer reduced-motion reset is scoped to `.sched-app :where(*)`, which cannot
     reach `html`. Smooth scrolling needs its own opt-out. */
  @media (prefers-reduced-motion: reduce) {
    html:has(body.sched-site) {
      scroll-behavior: auto;
    }
  }

  .sched-site :where(.sched-skip-link) {
    background: var(--sched-brand);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-on-deep);
    font-size: var(--sched-font-size-md-plus);
    font-weight: var(--sched-font-weight-bold);
    inset-block-start: var(--sched-space-2);
    inset-inline-start: var(--sched-space-2);
    padding: var(--sched-space-2) var(--sched-space-3-5);
    position: fixed;
    translate: 0 -200%;
    z-index: var(--sched-site-nav-z-index);
  }

  .sched-site :where(.sched-skip-link:focus-visible) {
    translate: 0 0;
  }
}

@layer sched.layout {
  .sched-site :where(.sched-site-wrap) {
    margin-inline: auto;
    max-inline-size: var(--sched-measure-page);
    padding-inline: var(--sched-site-gutter);
  }

  .sched-site :where(.sched-site-section) {
    padding-block: var(--sched-site-section-padding-block);
    position: relative;
  }

  .sched-site :where(.sched-site-section[data-tone="muted"]) {
    background: var(--sched-bg);
    border-block: var(--sched-border-width-hairline) solid var(--sched-line);
  }

  .sched-site :where(.sched-site-section[data-tone="deep"]) {
    background: var(--sched-ink-deep);
    color: var(--sched-ink-on-deep);
    overflow: hidden;
  }

  .sched-site :where(.sched-site-section[data-tone="deep"])::before {
    background: var(--sched-site-deep-glow);
    content: "";
    inset: 0;
    position: absolute;
  }

  /* Everything authored inside a deep section sits above its glow without each child needing a
     stacking context of its own. */
  .sched-site :where(.sched-site-section[data-tone="deep"] > .sched-site-wrap) {
    position: relative;
  }

  .sched-site :where(.sched-site-header) {
    backdrop-filter: var(--sched-site-nav-blur);
    background: var(--sched-site-nav-bg);
    border-block-end: var(--sched-border-width-hairline) solid var(--sched-line);
    inset-block-start: 0;
    position: sticky;
    z-index: var(--sched-site-nav-z-index);
  }

  .sched-site :where(.sched-site-header-bar) {
    align-items: center;
    block-size: var(--sched-site-nav-block-size);
    display: flex;
    gap: var(--sched-space-6-5);
  }

  .sched-site :where(.sched-site-footer) {
    border-block-start: var(--sched-border-width-hairline) solid var(--sched-line);
    padding-block: var(--sched-space-15) var(--sched-space-10);
  }

  .sched-site :where(.sched-site-grid) {
    display: grid;
    gap: var(--sched-space-4);
  }

  .sched-site :where(.sched-site-grid[data-gap="lg"]) {
    gap: var(--sched-space-4-5);
  }

  .sched-site :where(.sched-site-grid[data-columns="2"]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sched-site :where(.sched-site-grid[data-columns="3"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sched-site :where(.sched-site-grid[data-columns="4"]) {
    gap: var(--sched-space-7-5);
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @media (max-width: 980px) {
    .sched-site :where(.sched-site-grid[data-columns="2"], .sched-site-grid[data-columns="3"]) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sched-site :where(.sched-site-grid[data-columns="4"]) {
      gap: var(--sched-space-9-5) var(--sched-space-5);
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@layer sched.components {
  /* Brand + navigation.
     The mobile disclosure is a `<details>` element: keyboard-operable, self-describing to
     assistive tech, and dismissible with zero script. The marketing nav is the one interaction
     that has to work with JavaScript off. */
  /* The mark itself is the console's `sched-brand-mark` - one data-URI definition of the real
     artwork, shared by both shells rather than re-inlined as marketing-only markup. Marketing
     re-points only the size, so the wordmark sits beside a nav-scale mark instead of the
     console's sidebar-scale one. */
  .sched-site :where(.sched-site-brand) {
    --sched-brand-mark-size: var(--sched-size-7-5);

    align-items: center;
    color: var(--sched-ink);
    display: inline-flex;
    font-size: var(--sched-font-size-xl);
    font-weight: var(--sched-font-weight-extrabold);
    gap: var(--sched-space-2-75);
    letter-spacing: var(--sched-tracking-snug);
  }

  .sched-site :where(.sched-site-brand:hover) {
    color: var(--sched-ink);
  }

  .sched-site :where(.sched-site-nav) {
    display: flex;
    gap: var(--sched-space-0-5);
  }

  .sched-site :where(.sched-site-nav-link) {
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-semibold);
    padding: var(--sched-space-2) var(--sched-space-3);
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      color var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-site :where(.sched-site-nav-link:hover) {
    background: var(--sched-surface-2);
    color: var(--sched-ink);
  }

  .sched-site :where(.sched-site-nav-link[aria-current="page"]) {
    background: var(--sched-brand-soft);
    color: var(--sched-brand);
  }

  .sched-site :where(.sched-site-nav-actions) {
    align-items: center;
    display: flex;
    gap: var(--sched-space-2-5);
    margin-inline-start: auto;
  }

  .sched-site :where(.sched-site-nav-disclosure) {
    display: none;
    position: relative;
  }

  .sched-site :where(.sched-site-nav-toggle) {
    align-items: center;
    block-size: var(--sched-icon-button-size);
    border: var(--sched-border-width-hairline) solid var(--sched-line-strong);
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink-2);
    cursor: pointer;
    display: inline-flex;
    inline-size: var(--sched-icon-button-size);
    justify-content: center;
    list-style: none;
  }

  .sched-site :where(.sched-site-nav-toggle)::-webkit-details-marker {
    display: none;
  }

  .sched-site :where(.sched-site-nav-disclosure[open] .sched-site-nav-toggle) {
    background: var(--sched-surface-2);
    color: var(--sched-ink);
  }

  .sched-site :where(.sched-site-nav-panel) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-popover);
    box-shadow: var(--sched-shadow-panel);
    display: flex;
    flex-direction: column;
    gap: var(--sched-space-0-5);
    inset-block-start: calc(100% + var(--sched-space-2));
    inset-inline-end: 0;
    min-inline-size: var(--sched-measure-blurb);
    padding: var(--sched-space-1-5);
    position: absolute;
    z-index: var(--sched-menu-z-index);
  }

  @media (max-width: 980px) {
    .sched-site :where(.sched-site-nav) {
      display: none;
    }

    .sched-site :where(.sched-site-nav-disclosure) {
      display: block;
    }
  }

  /* Eyebrow. Marketing reuses the console's `sched-eyebrow` and re-points only what differs - the
     console's is a quiet grey field label, marketing's is a brand-coloured section opener with a
     rule bar. The bar takes `currentcolor`, so the deep-tone override further down has to change one
     property rather than restate the recipe. */
  .sched-site :where(.sched-eyebrow) {
    align-items: center;
    color: var(--sched-brand);
    display: inline-flex;
    font-size: var(--sched-font-size-sm);
    gap: var(--sched-space-2-25);
  }

  .sched-site :where(.sched-eyebrow)::before {
    background: currentcolor;
    block-size: var(--sched-border-width-strong);
    border-radius: var(--sched-radius-2xs);
    content: "";
    inline-size: var(--sched-space-4-5);
  }

  /* Hero. */
  .sched-site :where(.sched-site-hero) {
    background: var(--sched-site-hero-wash);
    overflow: hidden;
    padding-block: var(--sched-space-18) var(--sched-space-16);
    position: relative;
  }

  .sched-site :where(.sched-site-hero-grid) {
    align-items: center;
    display: grid;
    gap: var(--sched-space-14);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sched-site :where(.sched-site-hero-figure) {
    margin-block-start: var(--sched-space-12);
  }

  .sched-site :where(.sched-site-headline) {
    font-size: var(--sched-display-hero);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-display);
    line-height: var(--sched-line-height-display);
    margin-block-start: var(--sched-space-5);
  }

  .sched-site :where(.sched-site-headline[data-scale="page"]) {
    font-size: var(--sched-display-page);
    max-inline-size: var(--sched-measure-hero);
  }

  .sched-site :where(.sched-accent) {
    color: var(--sched-brand);
  }

  .sched-site :where(.sched-site-lede) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-xl);
    line-height: var(--sched-line-height-relaxed);
    margin-block-start: var(--sched-space-5);
    max-inline-size: var(--sched-measure-lede);
  }

  .sched-site :where(.sched-site-lede[data-width="narrow"]) {
    max-inline-size: var(--sched-measure-narrow);
  }

  /* Breadcrumbs are navigation, not chrome: the trail says where you are and the segments are
     links. ink-3 is 3.1:1 on --sched-surface, under the 4.5:1 floor for 12px text, so both the
     trail and its links run at ink-2. The mono face and small size still separate it from body
     copy without buying that separation with legibility. */
  .sched-site :where(.sched-site-crumb) {
    align-items: center;
    color: var(--sched-ink-2);
    display: flex;
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-sm);
    gap: var(--sched-space-2);
  }

  .sched-site :where(.sched-site-crumb a) {
    color: var(--sched-ink-2);
  }

  .sched-site :where(.sched-site-crumb a:hover) {
    color: var(--sched-brand);
  }

  /* The action row is the recipe that owns marketing CTA sizing. Hero and band buttons are the
     shared `sched-button`, stepped up to the marketing control rung by their container rather than
     by a new button size the console would also inherit. */
  .sched-site :where(.sched-site-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-3-25);
    margin-block-start: var(--sched-space-7);
  }

  .sched-site :where(.sched-site-actions .sched-button) {
    block-size: var(--sched-site-cta-block-size);
    border-radius: var(--sched-radius-popover);
    font-size: var(--sched-font-size-base-plus);
    padding-inline: var(--sched-space-5-5);
  }

  /* Section head. */
  .sched-site :where(.sched-site-section-head) {
    margin-block-end: var(--sched-site-section-gap);
    margin-inline: auto;
    max-inline-size: var(--sched-measure-content);
    text-align: center;
  }

  .sched-site :where(.sched-site-section-head[data-align="start"]) {
    margin-inline: 0;
    text-align: start;
  }

  .sched-site :where(.sched-site-title) {
    font-size: var(--sched-display-section);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-tight);
    line-height: var(--sched-line-height-compact);
    margin-block-start: var(--sched-space-4);
  }

  .sched-site :where(.sched-site-subtitle) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-lg-plus);
    line-height: var(--sched-line-height-relaxed);
    margin-block-start: var(--sched-space-4);
  }

  /* Feature band. */
  .sched-site :where(.sched-site-feature) {
    align-items: center;
    display: grid;
    gap: var(--sched-space-15);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sched-site :where(.sched-site-feature + .sched-site-feature) {
    margin-block-start: var(--sched-site-band-gap);
  }

  .sched-site :where(.sched-site-feature[data-flip] .sched-site-feature-copy) {
    order: 2;
  }

  .sched-site :where(.sched-site-feature-title) {
    font-size: var(--sched-display-feature);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-tight);
    line-height: var(--sched-line-height-tight);
    margin-block-start: var(--sched-space-3-75);
  }

  .sched-site :where(.sched-site-feature-copy p) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-lg-plus);
    line-height: var(--sched-line-height-relaxed);
    margin-block-start: var(--sched-space-3-75);
  }

  .sched-site :where(.sched-site-checklist) {
    display: flex;
    flex-direction: column;
    gap: var(--sched-space-3-25);
    list-style: none;
    margin-block-start: var(--sched-space-5-5);
    padding: 0;
  }

  .sched-site :where(.sched-site-checklist li) {
    align-items: flex-start;
    display: flex;
    font-size: var(--sched-font-size-base-plus);
    font-weight: var(--sched-font-weight-medium);
    gap: var(--sched-space-2-75);
  }

  .sched-site :where(.sched-site-checklist b) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-site :where(.sched-site-check) {
    align-items: center;
    background: var(--sched-status-onsite-bg);
    block-size: var(--sched-size-5-5);
    border-radius: var(--sched-radius-md);
    color: var(--sched-status-onsite);
    display: flex;
    flex: 0 0 auto;
    inline-size: var(--sched-size-5-5);
    justify-content: center;
  }

  .sched-site :where(.sched-site-check svg) {
    block-size: var(--sched-size-3-5);
    inline-size: var(--sched-size-3-5);
  }

  .sched-site :where(.sched-site-morelink) {
    align-items: center;
    color: var(--sched-brand);
    display: inline-flex;
    font-size: var(--sched-font-size-base-plus);
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-1-75);
    margin-block-start: var(--sched-space-5-5);
  }

  .sched-site :where(.sched-site-morelink svg) {
    transition: translate var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-site :where(.sched-site-morelink:hover svg) {
    translate: var(--sched-space-0-75) 0;
  }

  @media (max-width: 980px) {
    .sched-site :where(.sched-site-hero-grid, .sched-site-feature) {
      grid-template-columns: minmax(0, 1fr);
    }

    .sched-site :where(.sched-site-feature[data-flip] .sched-site-feature-copy) {
      order: 0;
    }

    .sched-site :where(.sched-site-feature-visual) {
      order: -1;
    }
  }

  /* Showcase frame. Every feature page opens with a screenshot-like plate; this is the window
     chrome around the shared chart and table components, not a second card recipe. */
  .sched-site :where(.sched-site-showcase) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-3xl);
    box-shadow: var(--sched-shadow-float);
    overflow: hidden;
  }

  .sched-site :where(.sched-site-showcase-head) {
    align-items: center;
    background: var(--sched-surface-2);
    border-block-end: var(--sched-border-width-hairline) solid var(--sched-line);
    display: flex;
    gap: var(--sched-space-2);
    padding: var(--sched-space-3) var(--sched-space-3-75);
  }

  .sched-site :where(.sched-site-showcase-dots) {
    display: flex;
    gap: var(--sched-space-1-5);
  }

  .sched-site :where(.sched-site-showcase-dots i) {
    background: var(--sched-line-strong);
    block-size: var(--sched-size-2-5);
    border-radius: var(--sched-radius-pill);
    inline-size: var(--sched-size-2-5);
  }

  /* The showcase is a still of the real console, but its label is rendered text a screen reader
     will read and a sighted visitor is meant to parse - not decoration. 11.5px at ink-3's 3.1:1
     fails the 4.5:1 floor, so it reads at ink-2. */
  .sched-site :where(.sched-site-showcase-label) {
    color: var(--sched-ink-2);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-xs-plus);
    margin-inline-start: var(--sched-space-1-5);
  }

  .sched-site :where(.sched-site-showcase-status) {
    display: flex;
    gap: var(--sched-space-1-5);
    margin-inline-start: auto;
  }

  .sched-site :where(.sched-site-showcase-body) {
    padding: var(--sched-space-3-75);
  }

  .sched-site :where(.sched-site-panel) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-2xl);
    box-shadow: var(--sched-shadow-panel);
    overflow: hidden;
  }

  .sched-site :where(.sched-site-live) {
    align-items: center;
    color: var(--sched-live);
    display: inline-flex;
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-xs-plus);
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-1-5);
  }

  .sched-site :where(.sched-site-live)::before {
    background: currentcolor;
    block-size: var(--sched-size-1-75);
    border-radius: var(--sched-radius-pill);
    content: "";
    inline-size: var(--sched-size-1-75);
  }

  /* Metrics. */
  .sched-site :where(.sched-site-metric) {
    text-align: center;
  }

  .sched-site :where(.sched-site-metric-value) {
    display: block;
    font-size: var(--sched-display-metric);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-display);
    line-height: var(--sched-line-height-none);
  }

  /* Deliberately still ink-3 while the rest of this band moved to ink-2: --sched-font-size-4xl is
     25px, over WCAG's 24px large-text threshold, so the floor here is 3:1 rather than 4.5:1 and
     ink-3's 3.1:1 clears it. The unit trails a value it must not compete with. */
  .sched-site :where(.sched-site-metric-unit) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-4xl);
  }

  .sched-site :where(.sched-site-metric-label) {
    color: var(--sched-ink-2);
    display: block;
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-semibold);
    margin-block-start: var(--sched-space-2-5);
  }

  /* The detail line is what makes a bare number mean anything, so it is the last place to trade
     legibility for hierarchy. 12.5px at ink-3's 3.1:1 misses the 4.5:1 floor; the value above it
     already carries the emphasis by size and weight, so ink-2 costs the design nothing. */
  .sched-site :where(.sched-site-metric-detail) {
    color: var(--sched-ink-2);
    display: block;
    font-size: var(--sched-font-size-sm-plus);
    margin-block-start: var(--sched-space-0-75);
  }

  .sched-site :where(.sched-site-metric[data-tone="brand"] .sched-site-metric-value) {
    color: var(--sched-brand);
  }

  .sched-site :where(.sched-site-metric[data-tone="onsite"] .sched-site-metric-value) {
    color: var(--sched-status-onsite);
  }

  .sched-site :where(.sched-site-metric[data-tone="enroute"] .sched-site-metric-value) {
    color: var(--sched-status-enroute);
  }

  .sched-site :where(.sched-site-metric[data-tone="hold"] .sched-site-metric-value) {
    color: var(--sched-status-hold);
  }

  /* Cross-link tiles - the shared "it works because it's connected" band. */
  .sched-site :where(.sched-site-crosslink) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-2xl);
    color: var(--sched-ink);
    display: block;
    padding: var(--sched-space-5-5);
    transition:
      border-color var(--sched-motion-base) var(--sched-ease-standard),
      box-shadow var(--sched-motion-base) var(--sched-ease-standard);
  }

  /* Hover changes border and elevation only. The shared motion contract keeps hover translation
     out of the system, and the border/shadow pair already reads as the affordance. */
  .sched-site :where(.sched-site-crosslink:hover) {
    border-color: var(--sched-brand);
    box-shadow: var(--sched-shadow-brand);
    color: var(--sched-ink);
  }

  .sched-site :where(.sched-site-crosslink-icon) {
    align-items: center;
    background: var(--sched-brand-soft);
    block-size: var(--sched-size-9-5);
    border-radius: var(--sched-radius-popover);
    color: var(--sched-brand);
    display: flex;
    inline-size: var(--sched-size-9-5);
    justify-content: center;
    margin-block-end: var(--sched-space-3-25);
  }

  /* Tones come from the status palette, so a tile's icon carries the same colour the dispatch
     board gives that surface. Reusing the board vocabulary keeps marketing from inventing a
     second decorative palette that would then drift from the product. */
  .sched-site :where(.sched-site-crosslink-icon[data-tone="enroute"]) {
    background: var(--sched-status-enroute-bg);
    color: var(--sched-status-enroute);
  }

  .sched-site :where(.sched-site-crosslink-icon[data-tone="onsite"]) {
    background: var(--sched-status-onsite-bg);
    color: var(--sched-status-onsite);
  }

  .sched-site :where(.sched-site-crosslink-icon[data-tone="hold"]) {
    background: var(--sched-status-hold-bg);
    color: var(--sched-status-hold);
  }

  .sched-site :where(.sched-site-crosslink-icon[data-tone="done"]) {
    background: var(--sched-status-done-bg);
    color: var(--sched-status-done);
  }

  .sched-site :where(.sched-site-crosslink-title) {
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-normal);
  }

  .sched-site :where(.sched-site-crosslink-summary) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-md-plus);
    line-height: var(--sched-line-height-ui);
    margin-block-start: var(--sched-space-1-25);
  }

  .sched-site :where(.sched-site-crosslink-action) {
    align-items: center;
    color: var(--sched-brand);
    display: inline-flex;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-1-5);
    margin-block-start: var(--sched-space-3);
  }

  /* Loop steps - the deep-tone "how the day flows" band. The interleaved arrows only read as a flow
     when every step sits on one axis, so this is a single row that becomes a single column at the
     breakpoint below rather than a wrapping row: a wrap leaves an arrow orphaned at the end of the
     first line, pointing at nothing. */
  .sched-site :where(.sched-site-steps) {
    display: flex;
    justify-content: center;
  }

  .sched-site :where(.sched-site-step) {
    background: var(--sched-site-surface-on-deep);
    border: var(--sched-border-width-hairline) solid var(--sched-line-on-deep);
    border-radius: var(--sched-radius-2xl);
    color: var(--sched-ink-on-deep);
    display: block;
    flex: 1 1 0;
    min-inline-size: 0;
    padding: var(--sched-space-5-5) var(--sched-space-4-5);
    transition:
      background-color var(--sched-motion-base) var(--sched-ease-standard),
      border-color var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-site :where(a.sched-site-step:hover) {
    background: var(--sched-site-surface-on-deep-hover);
    border-color: var(--sched-site-line-on-deep-hover);
    color: var(--sched-ink-on-deep);
  }

  .sched-site :where(.sched-site-step-index) {
    color: var(--sched-ink-on-deep-3);
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-semibold);
  }

  .sched-site :where(.sched-site-step-icon) {
    align-items: center;
    block-size: var(--sched-size-10-5);
    border-radius: var(--sched-radius-popover);
    display: flex;
    inline-size: var(--sched-size-10-5);
    justify-content: center;
    margin-block: var(--sched-space-3) var(--sched-space-3-5);
  }

  .sched-site :where(.sched-site-step-title) {
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-normal);
  }

  /* The base layer zeroes every `p` margin, so a step body needs its own gap under the title. The
     colour is already handled: the inverted-foreground block re-points `p` inside a deep tone. */
  .sched-site :where(.sched-site-step p) {
    font-size: var(--sched-font-size-base);
    line-height: var(--sched-line-height-relaxed);
    margin-block-start: var(--sched-space-2);
  }

  .sched-site :where(.sched-site-step-arrow) {
    align-items: center;
    color: var(--sched-ink-on-deep-3);
    display: flex;
    flex: 0 0 var(--sched-space-9-5);
    justify-content: center;
  }

  @media (max-width: 980px) {
    .sched-site :where(.sched-site-steps) {
      flex-direction: column;
    }

    /* Column direction moves `flex` onto the block axis, so the steps must stop growing or they
       would each stretch to an equal share of the band's height. */
    .sched-site :where(.sched-site-step) {
      flex: 0 0 auto;
    }

    .sched-site :where(.sched-site-step-arrow) {
      flex-basis: var(--sched-space-6);
      rotate: 90deg;
    }
  }

  /* Closing CTA plate. */
  .sched-site :where(.sched-site-cta) {
    background: var(--sched-ink-deep);
    border-radius: var(--sched-radius-5xl);
    color: var(--sched-ink-on-deep);
    overflow: hidden;
    padding: var(--sched-space-16) var(--sched-space-10);
    position: relative;
    text-align: center;
  }

  .sched-site :where(.sched-site-cta)::before {
    background: var(--sched-site-cta-glow);
    content: "";
    inset: 0;
    position: absolute;
  }

  .sched-site :where(.sched-site-cta-inner) {
    position: relative;
  }

  .sched-site :where(.sched-site-cta-title) {
    font-size: var(--sched-display-band);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-display);
    line-height: var(--sched-line-height-compact);
  }

  .sched-site :where(.sched-site-cta-note) {
    color: var(--sched-ink-on-deep-3);
    font-size: var(--sched-font-size-md-plus);
    margin-block-start: var(--sched-space-4-5);
  }

  .sched-site :where(.sched-site-cta .sched-site-lede, .sched-site-cta .sched-site-actions) {
    margin-inline: auto;
  }

  .sched-site :where(.sched-site-cta .sched-site-actions) {
    justify-content: center;
  }

  /* One block re-points every foreground slot inside an inverted plate, so nothing nested in a
     deep band needs a variant of its own - the CTA plate and the deep section share it. Two
     leading classes outrank the one-class component rules being overridden. */
  .sched-site
    :where(.sched-site-section[data-tone="deep"], .sched-site-cta)
    :where(.sched-site-headline, .sched-site-title, .sched-site-feature-title) {
    color: var(--sched-ink-on-deep);
  }

  .sched-site
    :where(.sched-site-section[data-tone="deep"], .sched-site-cta)
    :where(.sched-site-subtitle, .sched-site-lede, p) {
    color: var(--sched-ink-on-deep-2);
  }

  .sched-site
    :where(.sched-site-section[data-tone="deep"], .sched-site-cta)
    :where(.sched-eyebrow) {
    color: var(--sched-brand-on-deep);
  }

  .sched-site
    :where(.sched-site-section[data-tone="deep"], .sched-site-cta)
    :where(.sched-button[data-variant="primary"]) {
    background: var(--sched-ink-on-deep);
    border-color: var(--sched-ink-on-deep);
    color: var(--sched-ink-deep);
  }

  .sched-site
    :where(.sched-site-section[data-tone="deep"], .sched-site-cta)
    :where(.sched-button[data-variant="primary"]:hover) {
    background: var(--sched-site-button-bg-on-deep-hover);
    border-color: var(--sched-site-button-bg-on-deep-hover);
    color: var(--sched-ink-deep);
  }

  .sched-site
    :where(.sched-site-section[data-tone="deep"], .sched-site-cta)
    :where(.sched-button[data-variant="secondary"]) {
    background: transparent;
    border-color: var(--sched-site-button-border-on-deep);
    color: var(--sched-ink-on-deep);
  }

  .sched-site
    :where(.sched-site-section[data-tone="deep"], .sched-site-cta)
    :where(.sched-button[data-variant="secondary"]:hover) {
    background: var(--sched-site-surface-on-deep-hover);
    border-color: var(--sched-site-button-border-on-deep-hover);
    color: var(--sched-ink-on-deep);
  }

  /* Billing-period switch. Two radios and `:has()` do the whole job: one price shows per card
     with no script at all, and with CSS off both prices render one under the other - the honest
     fallback, and never a card with no price on it. */
  .sched-site :where(.sched-site-plans) {
    display: flex;
    flex-direction: column;
    gap: var(--sched-space-8);
  }

  .sched-site :where(.sched-site-cadence) {
    align-self: center;
    border: 0;
    margin: 0;
    padding: 0;
  }

  /* The legend names the group for a screen reader; the two labels carry the visible text. Hidden
     rather than dropped, because a radio group with no name announces as two loose radios. */
  .sched-site :where(.sched-site-cadence > legend) {
    block-size: var(--sched-size-a11y-hidden);
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    inline-size: var(--sched-size-a11y-hidden);
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
  }

  .sched-site :where(.sched-site-cadence-options) {
    background: var(--sched-surface-2);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-pill);
    display: flex;
    gap: var(--sched-space-1);
    padding: var(--sched-space-1);
  }

  .sched-site :where(.sched-site-cadence-option) {
    border-radius: var(--sched-radius-pill);
    color: var(--sched-ink-2);
    cursor: pointer;
    font-size: var(--sched-font-size-sm-plus);
    font-weight: var(--sched-font-weight-medium);
    padding-block: var(--sched-space-1-5);
    padding-inline: var(--sched-space-4);
    position: relative;
  }

  /* The input covers its own label rather than hiding somewhere else, so the hit target is the
     whole pill and the focus ring can be drawn on the pill instead of on a 1px box beside it. */
  .sched-site :where(.sched-site-cadence-option input) {
    appearance: none;
    inset: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
  }

  /* Weight stays put between states. A bolder selected label would re-measure the pill and shunt
     the other one sideways on every switch. */
  .sched-site :where(.sched-site-cadence-option:has(input:checked)) {
    background: var(--sched-surface);
    box-shadow: var(--sched-shadow-raise);
    color: var(--sched-ink);
  }

  .sched-site :where(.sched-site-cadence-option:has(input:focus-visible)) {
    box-shadow: 0 0 0 3px var(--sched-brand-soft);
    outline: 0;
  }

  /* One price per card. `:has()` reads the checked radio from the wrapper, so the switch drives
     every card at once without a script and without a copy of the state on each card. */
  .sched-site
    :where(.sched-site-plans:has(input[value="monthly"]:checked) [data-cadence="annual"]) {
    display: none;
  }

  .sched-site
    :where(.sched-site-plans:has(input[value="annual"]:checked) [data-cadence="monthly"]) {
    display: none;
  }

  /* Pricing plan card. The cards ride in a `sched-site-grid`, so the column maths is already
     someone else's job - this recipe owns the card and the vertical rhythm inside it. */
  .sched-site :where(.sched-site-plan) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--sched-space-2-5);
    padding: var(--sched-space-6-5);
  }

  /* The recommended card is raised, never recoloured. A filled card would read as the only one
     with an offer on it, and all three carry the same button. */
  .sched-site :where(.sched-site-plan[data-recommended]) {
    border-color: var(--sched-brand);
    box-shadow: var(--sched-shadow-lift);
  }

  .sched-site :where(.sched-site-plan-badge) {
    align-self: flex-start;
    background: var(--sched-brand-soft);
    border-radius: var(--sched-radius-pill);
    color: var(--sched-brand);
    font-size: var(--sched-font-size-2xs);
    font-weight: var(--sched-font-weight-bold);
    letter-spacing: var(--sched-tracking-caps);
    padding-block: var(--sched-space-1);
    padding-inline: var(--sched-space-2-5);
    text-transform: uppercase;
  }

  .sched-site :where(.sched-site-plan-name) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-bold);
  }

  .sched-site :where(.sched-site-plan-price) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-5xl);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-tight);
    line-height: var(--sched-line-height-none);
  }

  .sched-site :where(.sched-site-plan-cadence) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-sm-plus);
  }

  .sched-site :where(.sched-site-plan-summary) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-base);
    line-height: var(--sched-line-height-relaxed);
  }

  .sched-site :where(.sched-site-plan-list) {
    color: var(--sched-ink-2);
    display: flex;
    flex-direction: column;
    font-size: var(--sched-font-size-base);
    gap: var(--sched-space-2);
    line-height: var(--sched-line-height-ui);
    list-style: none;
    margin-block-start: var(--sched-space-2);
    padding: 0;
  }

  /* Every line is a label and the allowance that answers it. Two columns rather than one run-on
     sentence, so the same row sits at the same height on all three cards and the eye can run
     across them. */
  .sched-site :where(.sched-site-plan-list li) {
    display: flex;
    gap: var(--sched-space-3);
    justify-content: space-between;
  }

  .sched-site :where(.sched-site-plan-list li > :last-child) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-medium);
    text-align: end;
  }

  /* The action row is pushed to the foot of the card so three cards with lists of different
     lengths still line their buttons up - the comparison on offer is between prices, not
     between paragraph heights. */
  .sched-site :where(.sched-site-plan .sched-site-actions) {
    margin-block-start: auto;
    padding-block-start: var(--sched-space-5);
  }

  .sched-site :where(.sched-site-plan .sched-site-actions .sched-button) {
    inline-size: 100%;
  }

  .sched-site :where(.sched-site-plan-note) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs);
    line-height: var(--sched-line-height-caption);
  }

  /* Plan comparison. The wrapper scrolls so the table inside can stay a real table with real
     scoped headers; `tabindex` on the wrapper is what keeps that scroll reachable without a
     mouse, and the TagHelper refuses to render the region unnamed. */
  .sched-site :where(.sched-site-plan-table) {
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-xl);
    overflow-x: auto;
  }

  .sched-site :where(.sched-site-plan-table table) {
    border-collapse: collapse;
    inline-size: 100%;
    min-inline-size: var(--sched-site-plan-table-min);
  }

  .sched-site :where(.sched-site-plan-table th, .sched-site-plan-table td) {
    border-block-start: var(--sched-border-width-hairline) solid var(--sched-line);
    font-size: var(--sched-font-size-sm-plus);
    padding-block: var(--sched-space-3-25);
    padding-inline: var(--sched-space-4);
    text-align: center;
  }

  .sched-site :where(.sched-site-plan-table thead th) {
    border-block-start: 0;
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-bold);
  }

  /* Row headers read as labels, not as data: start-aligned and lighter than the plan names
     across the top, so the eye runs down the column it is comparing. */
  .sched-site :where(.sched-site-plan-table tbody th) {
    color: var(--sched-ink-2);
    font-weight: var(--sched-font-weight-medium);
    text-align: start;
  }

  .sched-site :where(.sched-site-plan-table td) {
    color: var(--sched-ink-2);
  }

  /* FAQ. `<details>` again - no script, correct semantics. */
  .sched-site :where(.sched-site-faq) {
    display: flex;
    flex-direction: column;
    gap: var(--sched-space-3);
    margin-inline: auto;
    max-inline-size: var(--sched-measure-title);
  }

  .sched-site :where(.sched-site-faq details) {
    background: var(--sched-surface);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-xl);
    padding-inline: var(--sched-space-5-5);
  }

  .sched-site :where(.sched-site-faq summary) {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-bold);
    gap: var(--sched-space-3-5);
    justify-content: space-between;
    list-style: none;
    padding-block: var(--sched-space-4-5);
  }

  .sched-site :where(.sched-site-faq summary)::-webkit-details-marker {
    display: none;
  }

  /* Deliberately still ink-3: this is generated content, so it is a graphical object under WCAG
     1.4.11 with a 3:1 floor that ink-3's 3.1:1 meets - and the expanded/collapsed state a screen
     reader announces comes from `details`, never from this glyph. Raising it to ink-2 would let the
     affordance compete with the question it decorates. */
  .sched-site :where(.sched-site-faq summary)::after {
    color: var(--sched-ink-3);
    content: "+";
    font-size: var(--sched-font-size-xl-plus);
    font-weight: var(--sched-font-weight-semibold);
    transition: rotate var(--sched-motion-base) var(--sched-ease-standard);
  }

  .sched-site :where(.sched-site-faq details[open] summary)::after {
    rotate: 45deg;
  }

  .sched-site :where(.sched-site-faq details p) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-base-plus);
    line-height: var(--sched-line-height-relaxed);
    max-inline-size: var(--sched-measure-prose);
    padding-block-end: var(--sched-space-5);
  }

  /* Long-form prose for the legal pages. `--sched-measure-prose` is a `ch` measure, so line length
     tracks the font rather than the viewport. These pages are read, not scanned. */
  .sched-site :where(.sched-site-prose) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-base-plus);
    line-height: var(--sched-line-height-relaxed);
    max-inline-size: var(--sched-measure-prose);
  }

  /* The legal pages group their clauses in `<section>`s, so rhythm has to survive one level of
     nesting - `@layer sched.base` already zeroes `p` and `dd` margins, which would otherwise leave
     grouped paragraphs touching. This stays ahead of the h2/h3 rules below: all three are
     specificity 0,1,0, and those headings win their larger margins on source order alone. */
  .sched-site :where(.sched-site-prose > * + *, .sched-site-prose section > * + *) {
    margin-block-start: var(--sched-space-4);
  }

  .sched-site :where(.sched-site-prose h2) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-2xl);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: var(--sched-tracking-normal);
    line-height: var(--sched-line-height-snug);
    margin-block-start: var(--sched-space-8);
  }

  .sched-site :where(.sched-site-prose h3) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-bold);
    margin-block-start: var(--sched-space-6);
  }

  .sched-site :where(.sched-site-prose ul, .sched-site-prose ol) {
    display: flex;
    flex-direction: column;
    gap: var(--sched-space-2);
    padding-inline-start: var(--sched-space-5);
  }

  .sched-site :where(.sched-site-prose strong) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-bold);
  }

  /* Definition lists carry most of the legal copy: a short term, then the clause that defines it.
     `@layer sched.base` already stripped the browser's `dd` indent, so the pairing has to be built
     back out of weight and rhythm - the term sits at ink, its definition stays at prose ink-2, and
     the gap inside a pair is deliberately tighter than the gap between pairs. Indentation is left
     out on purpose: at prose measure it costs line length without adding a reading cue the weight
     change does not already give. */
  .sched-site :where(.sched-site-prose dt) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-semibold);
  }

  .sched-site :where(.sched-site-prose dd) {
    margin-block-start: var(--sched-space-1);
  }

  .sched-site :where(.sched-site-prose dd + dt) {
    margin-block-start: var(--sched-space-4);
  }

  /* The effective-date byline on the legal pages. It is a document fact rather than a status, so it
     reuses the muted-section hairline instead of `sched-alert`, which expects a status colour. */
  .sched-site :where(.sched-site-prose-note) {
    background: var(--sched-bg);
    border: var(--sched-border-width-hairline) solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-sm);
    max-inline-size: var(--sched-measure-prose);
    padding: var(--sched-space-3-5) var(--sched-space-4);
  }

  .sched-site :where(.sched-site-prose-note > * + *) {
    margin-block-start: var(--sched-space-1-5);
  }

  .sched-site :where(.sched-site-prose-note strong) {
    color: var(--sched-ink);
    font-weight: var(--sched-font-weight-semibold);
  }

  /* 404 and error pages extend the shared empty-state idea rather than re-authoring it: same copy
     hierarchy, page scale instead of panel scale. */
  .sched-site :where(.sched-site-notfound) {
    margin-inline: auto;
    max-inline-size: var(--sched-measure-content);
    padding-block: var(--sched-site-section-padding-block);
    text-align: center;
  }

  .sched-site :where(.sched-site-notfound .sched-site-headline) {
    font-size: var(--sched-display-page);
  }

  /* The code is the one token on the page that names what actually happened, and ink-4's 1.9:1 is
     the worst contrast in the whole token set - a 404 that has to be squinted at is the wrong place
     to be subtle. ink-2 keeps it quieter than the headline without hiding it. */
  .sched-site :where(.sched-site-notfound-code) {
    color: var(--sched-ink-2);
    display: block;
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-lg);
    font-weight: var(--sched-font-weight-bold);
    letter-spacing: var(--sched-tracking-caps);
  }

  .sched-site :where(.sched-site-notfound .sched-site-lede, .sched-site-notfound .sched-site-actions) {
    margin-inline: auto;
  }

  .sched-site :where(.sched-site-notfound .sched-site-actions) {
    justify-content: center;
  }

  /* The error page reuses the prose byline for its reference ID - it is the same kind of thing, a
     fact about the document rather than a status. Centred here, unlike on the legal pages, because
     the block it sits in is centred. */
  .sched-site :where(.sched-site-notfound .sched-site-prose-note) {
    margin-block-start: var(--sched-space-7);
    margin-inline: auto;
  }

  /* Footer. */
  .sched-site :where(.sched-site-footer-grid) {
    display: grid;
    gap: var(--sched-space-7-5);
    grid-template-columns: 2fr repeat(4, 1fr);
  }

  /* Footer body copy sits at ink-2, not the reference design's ink-3. ink-3 measures 3.1:1 on
     --sched-surface and ink-4 measures 1.9:1, both below the 4.5:1 floor for normal-size text; the
     footer is real content on a public page, so hierarchy comes from size and weight instead. */
  .sched-site :where(.sched-site-footer-blurb) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-md-plus);
    line-height: var(--sched-line-height-relaxed);
    margin-block-start: var(--sched-space-3-5);
    max-inline-size: var(--sched-measure-blurb);
  }

  /* Column headings run at full ink. The reference design put them BELOW their own links (ink-4
     caps over ink-2 links), which only reads as deliberate while the whole footer is washed out;
     once the body copy is at a legible contrast the caps label has to lead its column, not trail it.
     12px bold is still normal-size text under WCAG, so ink-4's 1.9:1 was never an option here. */
  .sched-site :where(.sched-site-footer-heading) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-sm);
    font-weight: var(--sched-font-weight-bold);
    letter-spacing: var(--sched-tracking-caps);
    margin-block-end: var(--sched-space-3-5);
    text-transform: uppercase;
  }

  .sched-site :where(.sched-site-footer-link) {
    color: var(--sched-ink-2);
    display: block;
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-medium);
    padding-block: var(--sched-space-1-25);
  }

  .sched-site :where(.sched-site-footer-link:hover) {
    color: var(--sched-brand);
  }

  .sched-site :where(.sched-site-footer-legal) {
    align-items: center;
    border-block-start: var(--sched-border-width-hairline) solid var(--sched-line);
    color: var(--sched-ink-2);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--sched-font-size-md-plus);
    gap: var(--sched-space-3);
    justify-content: space-between;
    margin-block-start: var(--sched-space-12);
    padding-block-start: var(--sched-space-5-5);
  }

  /* Fine print below the legal rule. Smaller than the legal line but the same ink: a trademark
     statement is legally operative text, so size carries the demotion and colour does not. */
  .sched-site :where(.sched-site-footer-fineprint) {
    color: var(--sched-ink-2);
    font-size: var(--sched-font-size-sm);
    line-height: var(--sched-line-height-relaxed);
    margin-block-start: var(--sched-space-4);
    max-inline-size: var(--sched-measure-prose);
  }

  @media (max-width: 980px) {
    .sched-site :where(.sched-site-footer-grid) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Scroll reveal. The default state is VISIBLE: `schedulance-reveal.js` stamps
     `sched-reveal-ready` on the root element before it starts observing, so with JavaScript off
     nothing is ever hidden. The offset is a token rather than a literal so the marketing entrance
     stays inside the shared motion vocabulary. */
  .sched-site :where(.sched-reveal) {
    transition:
      opacity var(--sched-motion-reveal) var(--sched-ease-standard),
      transform var(--sched-motion-reveal) var(--sched-ease-standard);
  }

  html.sched-reveal-ready .sched-site :where(.sched-reveal) {
    opacity: 0;
    transform: translateY(var(--sched-site-reveal-offset));
  }

  html.sched-reveal-ready .sched-site :where(.sched-reveal.sched-reveal-in) {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html.sched-reveal-ready .sched-site :where(.sched-reveal) {
      opacity: 1;
      transform: none;
    }
  }

  /* Marketing plates are physically larger than console cards, so inside the marketing shell the
     shared card recipe steps up one radius rung. The console keeps its flatter, denser treatment;
     the recipe itself is untouched. */
  .sched-site :where(.sched-card) {
    border-radius: var(--sched-radius-2xl);
  }

  .sched-site :where(.sched-card-content) {
    padding: var(--sched-space-5-5);
  }

  @media (max-width: 560px) {
    .sched-site :where(.sched-site-grid[data-columns="4"]) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sched-site :where(.sched-site-cta) {
      padding-inline: var(--sched-space-5);
    }
  }
}

@layer sched.components {
  .sched-app :where(.sched-theme-choice) {
    aspect-ratio: auto;
    background: transparent;
    border-color: transparent;
    block-size: var(--sched-size-8);
    box-shadow: none;
    color: var(--sched-ink-3);
    inline-size: 100%;
  }

  .sched-app :where(.sched-theme-choice[aria-pressed="true"]) {
    background: var(--sched-surface);
    border-color: var(--sched-line);
    box-shadow: var(--sched-shadow-hairline);
    color: var(--sched-ink);
  }

  .sched-app :where(.sched-theme-choice svg) {
    block-size: var(--sched-size-4);
    fill: none;
    inline-size: var(--sched-size-4);
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }
}

@layer sched.postgrest {
  /* Column quick filters (fn-84). The heading keeps its label and sort marks; the filter trigger
     sits after them as the menu component's quiet icon trigger, shrunk to the heading's scale. It
     fades in on hover or focus and stays visible while its column carries a filter or its panel is
     open. The panel is a sched-menu-content dropdown, so it takes the chrome, the motion, the
     light dismiss, and the placement the table settings menu has: under its own trigger, no scrim.
     Placement is the popover's implicit anchor (the invoker), so every column anchors to its own
     heading; the server-reopened panel passes the trigger as the source for the same reason.
     With CSS off it is a plain form under the heading. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-menu]) {
    margin-inline-start: var(--sched-space-1);
    vertical-align: middle;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-button].sched-menu-trigger) {
    --sched-menu-item-icon-size: var(--sched-size-3-5);
    block-size: var(--sched-size-5);
    color: var(--sched-ink-3);
    gap: var(--sched-space-0-5);
    inline-size: auto;
    min-block-size: var(--sched-size-5);
    min-inline-size: var(--sched-size-5);
    opacity: 0;
    padding: 0 var(--sched-space-0-5);
    text-transform: none;
    transition:
      background-color var(--sched-motion-fast) var(--sched-ease-standard),
      border-color var(--sched-motion-fast) var(--sched-ease-standard),
      color var(--sched-motion-fast) var(--sched-ease-standard),
      opacity var(--sched-motion-fast) var(--sched-ease-standard);
  }

  /* The menu icon carries its own ink so a menu item can tint it on hover; in the trigger the
     button's colour is the state (quiet, hovered, open, active), so the icon follows it. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-button] .sched-menu-icon) {
    color: inherit;
  }

  .sched-app :where(
    .sched-resource-table thead th:hover [data-postgrest-column-filter-button],
    .sched-resource-table thead th:focus-within [data-postgrest-column-filter-button],
    .sched-postgrest-surface [data-postgrest-column-filter-button][data-postgrest-column-filter-active="true"],
    .sched-postgrest-surface [data-postgrest-column-filter-button][aria-expanded="true"],
    .sched-postgrest-surface [data-postgrest-column-filter-button]:focus-visible
  ) {
    opacity: 1;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-button][data-postgrest-column-filter-active="true"]) {
    background: var(--sched-brand-soft);
    border-color: transparent;
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-count]) {
    font-family: var(--sched-font-mono);
    font-size: var(--sched-font-size-2xs);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: 0;
  }

  /* A quick filter is one control wide, so the panel shrink-wraps its row instead of taking the
     menu's control-measure floor. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-popover].sched-menu-content) {
    inline-size: max-content;
    max-inline-size: min(var(--sched-postgrest-filter-popover-inline-size), calc(100vw - (var(--sched-menu-viewport-margin) * 2)));
    min-inline-size: 0;
    overflow: visible;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-popover] fieldset) {
    border: 0;
    display: grid;
    gap: 0;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  /* The controls sit in one row: the labels are the small menu-scale words between them, the way
     a spreadsheet filter reads ("from 3 to 9"). A range wraps to two rows when the panel is
     narrow, because the row is a wrapping flex line, not a fixed grid. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-body]) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-1-5);
    padding: var(--sched-space-1) var(--sched-menu-label-padding-inline) var(--sched-space-2);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-label]) {
    color: var(--sched-ink-4);
    font-size: var(--sched-menu-label-font-size);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  /* The shared control recipe fills its column; a quick filter is content-sized, with the text or
     range boxes taking what is left of the row. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-choice]) {
    flex: 0 0 auto;
    inline-size: auto;
    min-inline-size: 0;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-body] > input) {
    flex: 1 1 calc(var(--sched-postgrest-column-filter-field-ch) * 1ch + var(--sched-field-affordance));
    inline-size: auto;
    min-inline-size: 0;
  }

  /* A bound is a short number or a date, so the two of them plus their words still make a panel
     narrower than the search box a text column gets. */
  .sched-app :where(
    .sched-postgrest-surface [data-postgrest-column-filter-minimum],
    .sched-postgrest-surface [data-postgrest-column-filter-maximum]
  ) {
    flex: 0 1 calc(var(--sched-postgrest-column-filter-bound-ch) * 1ch + var(--sched-field-affordance));
  }

  /* The footer is a menu-style strip: a hairline above, the actions trailing, no fill. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-footer]) {
    align-items: center;
    border-block-start: var(--sched-border-width-hairline) solid var(--sched-line-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-2);
    justify-content: flex-end;
    padding: var(--sched-space-2) var(--sched-menu-label-padding-inline) var(--sched-space-1);
  }

  /* The escape to the advanced builder leads on the left, away from the actions, and reads as a
     link: it leaves for another surface, it does not act on this one. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-advanced]) {
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-semibold);
    margin-inline-end: auto;
    text-decoration: none;
    text-transform: none;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-column-filter-advanced]:hover) {
    color: var(--sched-ink);
    text-decoration: underline;
  }

  /* The live submitter is the script's button, first in the footer so Enter picks it. The
     inline-control recipe sets display, which beats the hidden attribute, so hide it here. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-live-submitter][hidden]) {
    display: none;
  }
}