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

@import url("tokens.css");
@import url("schedulance-fonts.css");
@import url("components/auth.css");

@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);
  }

  .sched-app :where(.sched-page-stack > .sched-page-intro) {
    inline-size: calc(100% + (var(--sched-page-stack-padding-inline) * 2));
    margin-inline: calc(-1 * var(--sched-page-stack-padding-inline));
  }

  /* Ultrawide cap: every stack child except the full-bleed intro centers at the
     app measure. The explicit inline-size is load-bearing - auto margins disable
     the default grid-item stretch. */
  .sched-app :where(.sched-page-stack > :not(.sched-page-intro)) {
    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-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;
  }

  .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;
  }

  .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-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);
    min-height: 22px;
    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);
    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-list-table-header, .sched-workbook-tabs) {
    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-list-table-header, .sched-workbook-tabs) {
    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-list-table-header 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;
  }

  .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-table) {
    border-collapse: collapse;
    width: 100%;
  }

  .sched-app :where(table.sched-table-card) {
    border-collapse: collapse;
    padding: 0;
    width: 100%;
  }

  .sched-app :where(.sched-table thead th, table.sched-table-card thead th) {
    border-bottom: 1px solid var(--sched-line);
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-bold);
    letter-spacing: .04em;
    padding: var(--sched-space-2-5) var(--sched-space-3-5);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sched-app :where(.sched-table td, .sched-table tbody th, table.sched-table-card td, table.sched-table-card tbody th) {
    border-bottom: 1px solid var(--sched-line-2);
    font-size: var(--sched-font-size-md);
    padding: var(--sched-space-3) var(--sched-space-3-5);
    text-transform: none;
  }

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

  .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 {
  .sched-app :where(.sched-maintenance-hero-actions) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-3);
    justify-content: space-between;
  }

  /* 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;
  }

  /* .sched-maintenance-buckets now rides on the detail layout itself, which is already the grid this
     rule used to redeclare. Only the header alignment is its own. */
  .sched-app :where(.sched-maintenance-buckets > header) {
    align-items: end;
    display: flex;
    justify-content: space-between;
  }

  .sched-app :where(.sched-maintenance-model-heading) {
    margin-block: 0 var(--sched-space-2);
  }

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

  .sched-app :where(.sched-maintenance-model-group + .sched-maintenance-model-heading) {
    border-block-start: 1px solid var(--sched-line);
    margin-block-start: var(--sched-space-4);
    padding-block-start: var(--sched-space-4);
  }

  .sched-app :where(.sched-maintenance-model-group li) {
    align-items: center;
    display: grid;
    gap: var(--sched-space-3);
    grid-template-columns: minmax(0, 1fr) max-content max-content;
  }

  .sched-app :where(.sched-maintenance-model-group li > span:first-child) {
    display: grid;
  }

  @media (max-width: 620px) {
    .sched-app :where(.sched-maintenance-hero-actions) {
      align-items: stretch;
      flex-direction: column;
    }

    .sched-app :where(.sched-maintenance-model-group li) {
      grid-template-columns: minmax(0, 1fr) max-content;
    }

    .sched-app :where(.sched-maintenance-model-group li > .sched-menu) {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
  }
}

/* v4 production lift: design/schedulance/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"],
    .sched-list-search button,
    .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;
  }

  .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;
    padding: var(--sched-space-4) var(--sched-frame-gap) var(--sched-space-3-5);
  }

  .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-extrabold);
    justify-content: space-between;
    min-block-size: var(--sched-postgrest-inline-control-block-size);
    padding: 0 var(--sched-space-2-5);
  }

  .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;
    grid-template-rows: 54px 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-size-13-5);
    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: 0 var(--sched-page-stack-padding-inline) var(--sched-frame-gap);
  }

  /* The intro band bleeds full-width, but its text tracks the centered app-measure
     column. The percentage resolves against the stack's content box, which the bleed
     already subtracted one frame gap from at each edge, so the gap is added back. */
  /* The intro is a band, not a hero. Its floor is what every page pays before any content appears,
     so it sits just above the height its own control row needs and lets the title and the lede
     share one line. */
  .sched-app :where(.sched-page-intro) {
    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-size-15);
    padding-block: var(--sched-space-2);
    padding-inline: max(var(--sched-frame-gap), calc(var(--sched-frame-gap) + ((100% - var(--sched-measure-app-page)) / 2)));
  }

  .sched-app :where(.sched-page-intro h1, .sched-page-intro h2) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-xl);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: 0;
    line-height: var(--sched-line-height-heading);
  }

  .sched-app :where(.sched-page-intro p:not(.sched-eyebrow)) {
    color: var(--sched-ink-3);
    display: inline;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-medium);
    margin-inline-start: var(--sched-space-2-5);
  }

  .sched-app :where(.sched-workbook-toolbar > div:first-child) {
    align-items: baseline;
    display: flex;
    gap: 0;
    min-inline-size: 0;
  }

  .sched-app :where(.sched-workbook-actions) {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sched-space-4);
    justify-content: flex-end;
  }

  @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;
    }

    .sched-app :where(.sched-page-intro) {
      align-items: start;
      display: grid;
      padding-block: var(--sched-space-3-5);
    }
  }
}

@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");
  }

  .sched-app :where(.sched-nav-icon[data-icon="equipment"], .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");
  }

  .sched-app :where(.sched-nav-icon[data-icon="demand"], .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, .sched-workbook-search, .sched-list-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);
    min-block-size: var(--sched-size-8-5);
    padding: 0 var(--sched-space-2-75);
  }

  .sched-app :where(.sched-appbar-search) {
    inline-size: min(var(--sched-measure-search-wide), 34vw);
  }

  .sched-app :where(.sched-appbar-search)::before,
  .sched-app :where(.sched-workbook-search > span)::before,
  .sched-app :where(.sched-list-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, .sched-workbook-search input, .sched-list-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, .sched-workbook-search input::placeholder, .sched-list-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;
  }

  .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);
  }

  .sched-app :where(.sched-workbook-card) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    box-shadow: none;
    max-inline-size: 100%;
    min-inline-size: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  /* Layout, padding, and border come from the shared card-header recipe above, so the Jobs
     workbook tab strip stays flush with every other table card header; only wrapping is local. */
  .sched-app :where(.sched-workbook-tabs) {
    flex-wrap: wrap;
  }

  /* 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-workbook-search) {
    inline-size: min(var(--sched-measure-search-wide), 100%);
    margin-inline-start: auto;
  }

  .sched-app :where(.sched-workbook-table) {
    background: transparent;
    border: 0;
    border-collapse: collapse;
    border-radius: 0;
    box-shadow: none;
    inline-size: 100%;
    min-inline-size: var(--sched-measure-workbook-table);
    overflow: visible;
  }

  .sched-app :where(.sched-workbook-table th) {
    background: var(--sched-surface);
    border-bottom: 1px solid var(--sched-line);
    color: var(--sched-ink-3);
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    letter-spacing: .04em;
    padding: var(--sched-postgrest-head-padding-block) var(--sched-workbook-row-padding-inline);
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sched-app :where(.sched-workbook-table th a) {
    color: inherit;
    display: inline-flex;
    gap: var(--sched-space-1);
  }

  .sched-app :where(.sched-workbook-table td) {
    border-bottom: 1px solid var(--sched-line-2);
    color: var(--sched-ink);
    font-size: var(--sched-font-size-md);
    padding: var(--sched-workbook-row-padding-block) var(--sched-workbook-row-padding-inline);
    vertical-align: middle;
  }

  .sched-app :where(.sched-workbook-table tbody th) {
    border-bottom: 1px solid var(--sched-line-2);
    font-size: var(--sched-font-size-md);
    padding: var(--sched-workbook-row-padding-block) var(--sched-workbook-row-padding-inline);
    text-transform: none;
  }

  .sched-app :where(.sched-workbook-table tbody tr) {
    transition: background-color var(--sched-motion-fast) var(--sched-ease-standard);
  }

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

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

  .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-list-head, .sched-catalog-head) {
    align-items: end;
    display: flex;
    gap: var(--sched-space-4-5);
    justify-content: space-between;
    padding: var(--sched-space-5-5) var(--sched-space-1) 0;
  }

  .sched-app :where(.sched-list-title, .sched-catalog-title) {
    display: grid;
    gap: var(--sched-space-1-5);
    max-inline-size: var(--sched-measure-title);
  }

  .sched-app :where(.sched-list-title h1, .sched-catalog-title h1) {
    color: var(--sched-ink);
    font-size: var(--sched-font-size-xl);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-heading);
  }

  .sched-app :where(.sched-list-title p, .sched-catalog-title p) {
    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);
  }

  /* The card is NOT the horizontal scroll container. It used to be, and that meant a wide table dragged
     sideways took the card's header, the controls panel, and the pager along with the rows. The scroller
     is .sched-table-scroll, which wraps the table alone; the card only frames it. */
  .sched-app :where(.sched-list-table-card) {
    max-inline-size: 100%;
    min-inline-size: 0;
    padding: 0;
  }

  .sched-app :where(.sched-list-search) {
    inline-size: min(var(--sched-measure-search), 38vw);
  }

  .sched-app :where(.sched-contract-chip) {
    background: var(--sched-surface-2);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-md);
    color: var(--sched-ink-2);
    display: inline-flex;
    font-size: var(--sched-font-size-xs);
    font-weight: var(--sched-font-weight-extrabold);
    line-height: var(--sched-line-height-snug);
    padding: var(--sched-space-0-5) var(--sched-space-2);
  }

  .sched-app :where(.sched-contract-chip[data-tier="gold"]) {
    background: var(--sched-status-hold-bg);
    border-color: var(--sched-status-hold-bd);
    color: var(--sched-status-hold);
  }

  .sched-app :where(.sched-contract-chip[data-tier="silver"]) {
    background: var(--sched-status-done-bg);
    border-color: var(--sched-status-done-bd);
    color: var(--sched-status-done);
  }

  .sched-app :where(.sched-contract-chip[data-tier="bronze"]) {
    background: var(--sched-surface-2);
    border-color: var(--sched-line);
    color: var(--sched-ink-2);
  }

  .sched-app :where(.sched-balance[data-tone="muted"]) {
    color: var(--sched-ink-3);
  }

  .sched-app :where(.sched-balance[data-tone="due"]) {
    color: var(--sched-ink);
  }

  .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:not(.sched-contract-chip)) {
    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;
  }

  .sched-app :where([data-sched-catalog-section-action]) {
    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-client-sites-grid > .sched-table-card) {
    overflow: hidden;
    padding: 0;
  }

  .sched-app :where(.sched-table-card > table[data-postgrest-table], .sched-table-card > table[data-postgrest-relation]) {
    border: 0;
    border-radius: 0;
    inline-size: 100%;
  }

  .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;
  }

  .sched-app :where(.sched-table-layout) {
    align-items: start;
    display: grid;
    gap: var(--sched-space-4);
    grid-template-columns: minmax(var(--sched-measure-resource-table), 3fr) minmax(var(--sched-measure-compact), 1fr);
    justify-content: start;
  }

  .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 h2) {
    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) {
    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-list-head, .sched-catalog-head, .sched-list-table-header) {
      align-items: start;
      display: grid;
    }

    .sched-app :where(.sched-list-search) {
      inline-size: 100%;
    }

    .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-workbook-table[data-postgrest-table]) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: table;
    padding: 0;
  }

  .sched-app :where(.sched-workbook-table[data-postgrest-table] th, .sched-workbook-table[data-postgrest-table] td) {
    padding: var(--sched-workbook-row-padding-block) var(--sched-workbook-row-padding-inline);
  }

  .sched-app :where(.sched-workbook-table[data-postgrest-table] thead th) {
    padding-block: var(--sched-postgrest-head-padding-block);
  }

  .sched-app :where(table.sched-table-card[data-postgrest-table], table.sched-table-card[data-postgrest-relation]) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    box-shadow: none;
    display: table;
    overflow: hidden;
    padding: 0;
  }

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

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

  .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%;
    min-inline-size: var(--sched-measure-resource-table);
    padding: 0;
  }

  /* In-card horizontal scroller for the settings/catalog grids, whose table
     element carries the card chrome itself: the wrapper takes over the chrome
     so the table can scroll inside it. */
  .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;
  }

  .sched-app :where(.sched-table-scroll > table.sched-table-card) {
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* Inside a capsule owner the owner draws the frame and paints the surface, so the scroller
     draws none: a square child background would poke past the owner's rounded corner. A lone
     scroller outside any owner is the only place it carries its own border. */
  .sched-app :where(
    .sched-list-table-card > .sched-table-scroll,
    .sched-workbook-card > .sched-table-scroll,
    .sched-table-card > .sched-table-scroll,
    .sched-table-block > .sched-table-scroll
  ) {
    background: transparent;
    border: 0;
    border-radius: 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-list-table-card, .sched-workbook-card, .sched-table-scroll) {
    scrollbar-color: var(--sched-line-2) transparent;
    scrollbar-width: thin;
  }

  .sched-app :where(.sched-catalog-detail-table-section > table.sched-resource-table[data-postgrest-relation]) {
    border-start-end-radius: 0;
    border-start-start-radius: 0;
    min-inline-size: 0;
  }

  .sched-app :where(.sched-catalog-detail-table-section > table.sched-resource-table[data-postgrest-relation] > caption) {
    background: var(--sched-surface);
    block-size: auto;
    border: 1px solid var(--sched-line);
    border-block-end: 0;
    border-start-end-radius: var(--sched-radius-card);
    border-start-start-radius: var(--sched-radius-card);
    caption-side: top;
    clip: auto;
    clip-path: none;
    color: var(--sched-ink);
    font-size: var(--sched-font-size-base);
    font-weight: var(--sched-font-weight-extrabold);
    inline-size: auto;
    line-height: var(--sched-line-height-snug);
    overflow: visible;
    padding: var(--sched-section-header-padding-block-start) var(--sched-section-header-padding-inline) var(--sched-section-header-padding-block-end);
    position: static;
    text-align: left;
    white-space: normal;
  }

  .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"], .sched-workbook-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, .sched-workbook-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],
    .sched-workbook-table [data-postgrest-row-select-header],
    .sched-workbook-table [data-postgrest-row-select],
    .sched-workbook-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], .sched-workbook-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], .sched-workbook-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], .sched-workbook-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]), .sched-workbook-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-search-clear], [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;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-controls-panel]) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    overflow-x: auto;
    padding: var(--sched-space-3) var(--sched-space-3-5);
  }

  /* Outside a table card the controls panel, the table scroller and the pager footer are one
     capsule, and the block draws the frame the way a table card does. Its children are flush
     bands, so whatever the block holds lands inside the border. The old form gave each child
     one edge of the frame instead, and the pager footer, added later, hung below a closed box
     on the settings and catalog pages alone. The capsule is a block, not rows of the section
     grid, so no row gap can open between its parts. */
  .sched-app :where(.sched-table-block) {
    background: var(--sched-surface);
    border: 1px solid var(--sched-line);
    border-radius: var(--sched-radius-card);
    display: grid;
    min-inline-size: 0;
  }

  /* Inside ANY capsule owner the controls panel is a flush band, not a floating box: the owner
     draws the outer border/radius and paints the surface, sections separate with single
     hairlines, and every owner shares one inline rhythm. */
  .sched-app :where(
    .sched-list-table-card > [data-postgrest-table-controls-panel],
    .sched-workbook-card > [data-postgrest-table-controls-panel],
    .sched-table-block > [data-postgrest-table-controls-panel]
  ) {
    background: transparent;
    border-block: 0 1px;
    border-inline: 0;
    border-radius: 0;
    padding: var(--sched-space-3) var(--sched-space-4-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-search-form]) {
    align-items: center;
    display: inline-flex;
    flex: 1 1 var(--sched-measure-search-wide);
    gap: var(--sched-space-2-5);
    min-inline-size: min(100%, var(--sched-measure-control));
  }

  .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-size], .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 strong[data-postgrest-page-size]) {
    background: var(--sched-brand-soft);
    border-color: var(--sched-brand-soft);
    color: var(--sched-brand);
  }

  .sched-app :where(.sched-postgrest-surface a[data-postgrest-page-size]:hover, .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-search-form] [data-postgrest-search-input]) {
    flex: 1 1 280px;
    max-inline-size: var(--sched-measure-search-wide);
    min-inline-size: var(--sched-measure-control);
  }

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

  .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-search-submit],
    .sched-postgrest-surface [data-postgrest-filters-button]:not([data-postgrest-table-settings-item]),
    .sched-postgrest-surface [data-postgrest-downloads-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-create-popover] button:not([hidden])
  ) {
    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-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]
  ) {
    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-downloads-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-downloads-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-create-popover] button:not([hidden]):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-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
  ) {
    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;
  }

  .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], .sched-workbook-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);
  }

  .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;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-settings-submenu] > .sched-menu-submenu-content) {
    border: 0;
    border-block-start: var(--sched-border-width-hairline) solid var(--sched-line-2);
    border-radius: 0;
    box-shadow: none;
    display: none;
    inline-size: 100%;
    inset: auto;
    margin-block-start: var(--sched-space-1);
    max-inline-size: none;
    min-inline-size: 0;
    opacity: 1;
    padding: var(--sched-space-1) 0 0;
    pointer-events: auto;
    position: static;
    transform: none;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-table-settings-submenu][data-state="open"] > .sched-menu-submenu-content) {
    display: grid;
  }

  .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], .sched-workbook-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-workbook-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 .sched-list-search input) {
    background: transparent;
    border: 0;
    box-shadow: none;
    flex: 1;
    font-size: var(--sched-font-size-md);
    inline-size: auto;
    min-block-size: 0;
    min-inline-size: 0;
    padding: 0;
  }

  .sched-app :where(.sched-postgrest-surface .sched-list-search:focus-within) {
    border-color: var(--sched-brand);
    box-shadow: 0 0 0 3px var(--sched-brand-soft);
  }

  .sched-app :where(.sched-postgrest-surface .sched-list-search input:focus-visible) {
    border-color: transparent;
    box-shadow: none;
  }

  .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],
    .sched-postgrest-surface [data-postgrest-downloads-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-resource-table), 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)));
  }

  /* The downloads popover is a compact menu of format anchors, not a form dialog. */
  .sched-app :where(.sched-postgrest-surface [data-postgrest-downloads-popover]) {
    min-inline-size: auto;
    padding: var(--sched-space-1-5);
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-downloads-popover] > a) {
    border-radius: var(--sched-radius-control);
    color: var(--sched-ink);
    display: block;
    font-size: var(--sched-font-size-md);
    font-weight: var(--sched-font-weight-medium);
    padding: var(--sched-space-1-5) var(--sched-space-2);
    text-decoration: none;
    white-space: nowrap;
  }

  .sched-app :where(.sched-postgrest-surface [data-postgrest-downloads-popover] > a:hover) {
    background: var(--sched-surface-2);
  }

  .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,
    .sched-postgrest-surface [data-postgrest-downloads-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,
      .sched-postgrest-surface [data-postgrest-downloads-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) {
    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.

     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);
    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);
    }
  }
}

@layer sched.components {
  .sched-app :where(.sched-page-intro .sched-page-actions) {
    justify-content: flex-end;
    padding: 0;
  }

  .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);
  }

  /* The registry carries seven columns, so its floor is the inventory measure: when the
     layout column is narrower, the table scrolls inside its card. */
  .sched-app :where(.sched-equipment-table) {
    min-inline-size: var(--sched-measure-inventory-table);
  }

  .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.sched-table-card) {
    padding: 0;
  }

  .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);
  }

  .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 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 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-inventory-table, .sched-parts-demand-table) {
    min-inline-size: var(--sched-measure-inventory-table);
  }

  .sched-app :where(.sched-service-due-table) {
    min-inline-size: var(--sched-measure-service-table);
  }

  .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-inventory-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);
    }
  }
}