/* ============================================================================
 * application.css — authenticated-app chrome + domain components
 * Loaded alongside core.css by the app layouts (application, native_sidebar).
 * Appends into the @layer order declared in core.css.
 * ========================================================================== */

@layer ds-components {
  /* ── c-modal ───────────────────────────────────────────────────────── */
  .c-modal__container {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-3) var(--space-6);
  }

  @media (width >= 640px) {
    .c-modal__container {
      padding: 0;
    }
  }

  /* The container is shown via the modal controller toggling `.hidden`. This
   * layer outranks Tailwind's `.hidden`, so re-assert the hide here — otherwise
   * a closed modal stays a fixed, click-blocking overlay over the page. */
  .c-modal__container.hidden {
    display: none;
  }

  .c-modal__overlay {
    position: fixed;
    inset: 0;
    background: var(--color-scrim);
    opacity: 0;
    transition: opacity 0.2s ease-in;
  }

  .c-modal__overlay.is-visible {
    opacity: 1;
    transition: opacity 0.3s var(--ease);
  }

  .c-modal__panel {
    position: relative;
    z-index: calc(var(--z-modal) + 1);
    width: 100%;
    max-height: 100vh;
    overflow: auto;
    padding: var(--space-5);
    background: var(--color-paper-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-paper);
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.2s ease-in,
      transform 0.2s ease-in;
  }

  @media (width >= 640px) {
    .c-modal__panel {
      width: auto;
      padding: var(--space-6);
      transform: scale(0.95);
    }
  }
  .c-modal__panel.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (width >= 640px) {
    .c-modal__panel.is-visible {
      transform: scale(1);
    }
  }

  .c-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    padding: var(--space-1-5);
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-modal__close:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }

  .c-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
  }

  /* ── c-tab (pill link) ─────────────────────────────────────────────── */
  .c-tab {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-ink-mute);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-tab:hover {
    background: var(--color-paper-2);
    color: var(--color-ink-2);
  }
  .c-tab.is-active {
    font-weight: 600;
  }
  .c-tab--white.is-active {
    background: var(--color-paper-2);
    color: var(--color-ink-2);
  }

  .c-tab--ink-blue.is-active {
    background: var(--color-ink-blue-100);
    color: var(--color-ink-blue-700);
  }
  .c-tab--sage.is-active {
    background: var(--color-sage-100);
    color: var(--color-sage-700);
  }
  .c-tab--terra.is-active {
    background: var(--color-terra-100);
    color: var(--color-terra-700);
  }
  .c-tab--destructive.is-active {
    background: var(--color-destructive-100);
    color: var(--color-destructive-700);
  }
  .c-tab--caution.is-active {
    background: var(--color-caution-100);
    color: var(--color-butter-700);
  }
  .c-tab--neutral.is-active {
    background: var(--color-paper-2);
    color: var(--color-ink-mute);
  }
  .c-tab--ink.is-active {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }

  /* ── c-tabs (pill row + mobile dropdown) ───────────────────────────── */
  .c-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
  }
  .c-tabs__mobile {
    position: relative;
    text-align: left;
    margin-bottom: var(--space-6);
  }

  .c-tabs__trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1-5);
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent);
    border-radius: var(--radius-xl);
    background: var(--color-paper-card);
    color: var(--color-ink);
  }

  @media (hover: hover) {
    .c-tabs__trigger:hover {
      background: var(--color-paper-soft);
    }
  }
  .c-tabs__trigger-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .c-tabs__dropdown {
    position: absolute;
    right: 0;
    z-index: var(--z-dropdown);
    width: 100%;
    transform-origin: top;
    border-radius: var(--radius-xl);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
    outline: 1px solid var(--color-ink-10);
  }
  .c-tabs__dropdown--attached {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  .c-tabs__dropdown-list {
    padding-block: var(--space-1);
  }

  .c-tabs__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    color: var(--color-ink-2);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-tabs__dropdown-item:hover {
    background: var(--color-paper-soft);
    color: var(--color-ink);
  }

  /* ── c-filter-tab (filter bar pill — distinct from nav c-tab) ──────── */
  .c-filter-tab {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-ink-2);
    text-decoration: none;
    white-space: nowrap;
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-filter-tab:hover {
    background: var(--color-paper-soft);
    color: var(--color-ink);
  }
  .c-filter-tab--ink.is-active {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }
  .c-filter-tab--neutral.is-active {
    background: var(--color-paper-2);
    color: var(--color-ink-mute);
  }
  .c-filter-tab--terra.is-active {
    background: var(--color-terra-100);
    color: var(--color-terra-700);
  }
  .c-filter-tab--ink-blue.is-active {
    background: var(--color-ink-blue-100);
    color: var(--color-ink-blue-700);
  }
  .c-filter-tab--sage.is-active {
    background: var(--color-sage-100);
    color: var(--color-sage-700);
  }
  .c-filter-tab--destructive.is-active {
    background: var(--color-destructive-100);
    color: var(--color-destructive-700);
  }
  .c-filter-tab--caution.is-active {
    background: var(--color-caution-100);
    color: var(--color-butter-700);
  }
  .c-filter-tab__icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* ── c-filter-tabs (filter bar + mobile dropdown) ──────────────────── */
  .c-filter-tabs__bar {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px dashed var(--color-ink-18);
  }

  @media (width >= 640px) {
    .c-filter-tabs__bar {
      padding-inline: var(--space-6);
    }
  }

  @media (width >= 1024px) {
    .c-filter-tabs__bar {
      display: flex;
    }
  }

  .c-filter-tabs__mobile {
    position: relative;
    text-align: left;
    border-bottom: 1px dashed var(--color-ink-18);
  }

  .c-filter-tabs__trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1-5);
    padding: var(--space-4);
    color: var(--color-ink);
  }

  @media (hover: hover) {
    .c-filter-tabs__trigger:hover {
      background: var(--color-paper-soft);
    }
  }
  .c-filter-tabs__trigger-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  /* ── c-breadcrumb ──────────────────────────────────────────────────── */
  .c-breadcrumb__sep {
    opacity: 0.5;
  }
  .c-breadcrumb__current {
    color: var(--color-ink);
  }
  .c-breadcrumb__link {
    color: var(--color-ink-mute);
    transition: color var(--dur-fast);
  }
  .c-breadcrumb__link:hover {
    color: var(--color-ink);
  }

  /* ── c-data-list ───────────────────────────────────────────────────── */
  .c-data-list__empty {
    padding-block: var(--space-8);
    text-align: center;
  }
  .c-data-list__empty--message {
    color: var(--color-ink-mute);
  }
  .c-data-list__table-wrap {
    overflow-x: auto;
  }
  .c-data-list__table {
    min-width: 100%;
  }
  .c-data-list__head-row {
    border-bottom: 1px solid var(--color-ink-18);
  }
  .c-data-list__body > * + * {
    border-top: 1px solid var(--color-ink-18);
  }
  .c-data-list__rows {
    border-top: 1px solid var(--color-ink-18);
  }
  .c-data-list__rows > * + * {
    border-top: 1px solid var(--color-ink-18);
  }

  /* ── c-sidenav link ────────────────────────────────────────────────── */
  .c-sidenav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-14-5);
    color: var(--color-ink-2);
    transition:
      background var(--dur-fast),
      color var(--dur-fast);
  }
  .c-sidenav__link:first-child {
    margin-top: var(--space-1);
  }
  .c-sidenav__link:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
    color: var(--color-ink);
  }
  .c-sidenav__link.is-active {
    color: var(--color-ink);
    font-weight: 600;
  }

  .c-sidenav__link.is-active::before {
    content: "";
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    background: var(--color-terra-500);
    border-radius: 2px 0 0 2px;
  }

  .c-sidenav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-ink-mute);
  }
  .c-sidenav__label {
    flex: 1;
    min-width: 0;
  }
  .c-sidenav__badge-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  .c-sidenav__badge {
    min-width: var(--space-5);
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-terra-500);
    color: var(--color-paper-card);
    font-size: var(--text-xs);
    line-height: var(--space-5);
    font-weight: 700;
    text-align: center;
  }
  .c-sidenav__link.is-active .c-sidenav__icon {
    color: var(--color-terra-500);
  }

  /* ── c-button-bar ──────────────────────────────────────────────────── */
  .c-button-bar {
    position: fixed;
    bottom: 12px;
    left: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
    overflow: hidden;
    background: color-mix(in srgb, var(--color-paper-card) 95%, transparent);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%);
  }

  @supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
      .c-button-bar {
        padding-bottom: 2rem;
      }
    }
  }

  @media (width >= 640px) {
    .c-button-bar {
      left: 2.25rem;
      right: 2.25rem;
    }
  }

  @media (width >= 1024px) {
    .c-button-bar--mobile-only {
      display: none;
    }

    .c-button-bar--inline {
      position: relative;
      inset: auto;
      width: auto;
      margin: 0 0 2rem;
      padding: 0 2rem;
      justify-content: flex-start;
      background: var(--color-white);
      border-radius: 0;
      box-shadow: none;
    }
  }
  .c-button-bar__desktop-actions {
    display: none;
  }

  @media (width >= 1024px) {
    .c-button-bar__desktop-actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
  }

  /* ── c-sidenav section (collapsible) ───────────────────────────────── */
  .c-sidenav-section {
    padding: var(--space-2) var(--space-4);
  }
  .c-sidenav-section:last-child {
    border-bottom: 1px solid var(--color-ink-10);
  }

  .c-sidenav-section__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
    border-radius: var(--radius-lg);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-ink-2);
    cursor: pointer;
  }
  .c-sidenav-section__toggle:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
    color: var(--color-primary);
  }
  .c-sidenav-section--mobile .c-sidenav-section__toggle {
    gap: var(--space-3);
    padding: var(--space-2);
    font-size: var(--text-sm);
  }
  .c-sidenav-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-mute);
  }
  .c-sidenav-section--mobile .c-sidenav-section__title {
    gap: var(--space-3);
  }
  .c-sidenav-section__chevron {
    width: 1rem;
    height: 1rem;
    transition: transform var(--dur-base);
  }

  .c-sidenav-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    overflow: hidden;
    transition: max-height var(--dur-base);
  }

  .c-sidenav-section-label {
    display: block;
    padding: var(--space-7) var(--space-3) 0;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-2);
  }
  .c-sidenav-section-label--mobile {
    padding-top: var(--space-5);
  }

  /* ── Trix / ActionText editor ──────────────────────────────────────── */
  trix-editor {
    display: block;
    min-height: 110px;
    padding: 12px 14px;
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-input);
    background: var(--color-paper-card);
    color: var(--color-ink);
    line-height: 1.55;
    transition: all var(--dur-fast) ease-out;
  }

  trix-editor:focus,
  trix-editor:focus-within {
    outline: none;
    background: var(--color-white);
    border-color: var(--color-ink);
    box-shadow: var(--shadow-input-ring);
  }
  trix-toolbar {
    margin-bottom: var(--space-3);
  }
  trix-toolbar .trix-button-row {
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  trix-toolbar .trix-button-group {
    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
  }

  trix-toolbar .trix-button {
    border-bottom: none;
    color: var(--color-ink-2);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }

  /* match trix's own :not(:first-child) specificity, or its #ccc divider wins */
  trix-toolbar .trix-button:not(:first-child) {
    border-left-color: color-mix(in srgb, var(--color-ink) 12%, transparent);
  }

  trix-toolbar .trix-button:not(:disabled):hover,
  trix-toolbar .trix-button.trix-active {
    background: var(--color-paper-card);
    color: var(--color-ink);
  }
  trix-toolbar .trix-button:disabled {
    color: var(--color-ink-mute);
  }
  trix-toolbar .trix-button-group.trix-button-group--history-tools {
    display: none;
  }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
  .trix-button--icon-code {
    display: none;
  }

  trix-editor a,
  .trix-content a {
    color: var(--color-primary);
    text-decoration: underline;
  }

  trix-editor h1,
  .trix-content h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    margin: 1.5rem 0 1rem;
  }

  trix-editor blockquote,
  .trix-content blockquote {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--color-paper-soft);
    border-left: 4px solid var(--color-ink-15);
  }

  trix-editor ul,
  .trix-content ul {
    list-style-type: disc;
    margin: 0 0 1rem 1.5rem;
  }

  trix-editor ol,
  .trix-content ol {
    list-style-type: decimal;
    margin: 0 0 1rem 1.5rem;
  }

  trix-editor p,
  .trix-content p {
    margin-bottom: 1rem;
  }

  /* ── c-back-button ─────────────────────────────────────────────────── */
  .c-back-button {
    display: inline-flex;
    align-items: center;
    margin: var(--space-4) -8px 0;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
  }

  @media (width >= 1024px) {
    .c-back-button {
      margin-top: 0;
    }
  }
  .c-back-button:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  }
  .c-back-button__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .c-back-button__label {
    margin-left: var(--space-4);
    color: var(--color-ink-mute);
  }

  /* ── c-menu-item (dropdown menu entry) ─────────────────────────────── */
  .c-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    text-align: left;
    cursor: pointer;
  }
  .c-menu-item:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  }
  .c-menu-item__icon {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--color-ink-mute);
  }

  /* ── c-validation-errors ───────────────────────────────────────────── */

  /* ── chrome icon sizing, responsive display, dropdown transitions ──── */
  .c-tab__icon {
    width: 0.75rem;
    height: 0.75rem;
  }

  .c-tabs__icon {
    width: 1rem;
    height: 1rem;
  }
  .c-tabs__chevron {
    width: 1.25rem;
    height: 1.25rem;
  }
  .c-tabs__dropdown-item .c-tabs__icon {
    width: 1rem;
    height: 1rem;
  }
  .c-tabs--responsive {
    display: none;
  }

  @media (width >= 1024px) {
    .c-tabs--responsive {
      display: flex;
    }
    .c-tabs__mobile {
      display: none;
    }
  }

  /* dropdown enter/leave states (swapped by the animation Stimulus controller) */
  .c-tabs__dropdown--enter {
    transition:
      opacity 0.1s var(--ease),
      transform 0.1s var(--ease);
  }
  .c-tabs__dropdown--leave {
    transition:
      opacity 0.075s ease-in,
      transform 0.075s ease-in;
  }
  .c-tabs__dropdown--collapsed {
    opacity: 0;
    transform: scale(0.95);
  }
  .c-tabs__dropdown--expanded {
    opacity: 1;
    transform: scale(1);
  }

  .c-filter-tabs__icon {
    width: 1rem;
    height: 1rem;
  }
  .c-filter-tabs__chevron {
    width: 1.25rem;
    height: 1.25rem;
  }

  @media (width >= 1024px) {
    .c-filter-tabs__mobile {
      display: none;
    }
  }

  .c-modal__close-icon {
    width: 1.25rem;
    height: 1.25rem;
  }
  .c-modal__spinner {
    width: 1.5rem;
    height: 1.5rem;
  }

  .c-sidenav__icon svg {
    width: 1rem;
    height: 1rem;
  }

  @media (width <= 1023.98px) {
    .c-breadcrumb__current,
    .c-breadcrumb__sep--current {
      display: none;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * FEATURES — per-page / per-section semantic classes. Each owns its own
 * layout, spacing, and typography, drawing only on design tokens.
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  /* ── bookings: search bar (inside the index card) ──────────────────── */
  .bookings-search {
    display: flex;
    align-items: stretch;
    border-bottom: 1px dashed var(--color-ink-18);
  }

  .bookings-search__icon {
    display: flex;
    align-items: center;
    padding-left: var(--space-4);
    color: var(--color-ink-mute);
  }

  @media (width >= 640px) {
    .bookings-search__icon {
      padding-left: var(--space-6);
    }
  }
  .bookings-search__icon svg {
    width: 1rem;
    height: 1rem;
  }
  .bookings-search__field-wrap {
    position: relative;
    flex: 1;
  }
  .bookings-search__field {
    padding: var(--space-4) var(--space-3);
  }

  @media (width >= 640px) {
    .bookings-search__field {
      padding-block: var(--space-6);
    }
  }

  .bookings-search__clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-4);
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
  }

  @media (width >= 640px) {
    .bookings-search__clear {
      margin-right: var(--space-6);
    }
  }
  .bookings-search__clear:hover {
    background: var(--color-paper-soft);
    color: var(--color-ink);
  }
  .bookings-search__clear svg {
    width: 1rem;
    height: 1rem;
  }

  /* ── bookings: list + empty state ──────────────────────────────────── */
  .bookings-list > * + * {
    border-top: 1px dashed var(--color-ink-18);
  }
  .bookings-empty {
    padding-block: var(--space-16);
    text-align: center;
  }
  .bookings-empty__icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto var(--space-3);
    color: var(--color-ink-mute);
  }
  .bookings-empty__text {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .bookings-load-more {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
  }

  /* ── bookings: list row ────────────────────────────────────────────── */
  .booking-row {
    display: block;
    padding: var(--space-4);
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .booking-row {
      padding-inline: var(--space-6);
    }
  }
  .booking-row:hover {
    background: var(--color-paper-soft);
  }
  .booking-row__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .booking-row__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px dashed var(--color-ink-25);
    background: var(--color-paper);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }
  .booking-row__main {
    flex: 1;
    min-width: 0;
  }
  .booking-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .booking-row__name {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booking-row__units {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .booking-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }

  .booking-row__sep,
  .booking-row__id {
    color: var(--color-ink-mute);
  }

  .booking-row__booked {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }
  .booking-row__booked svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  /* ── generic icon + content detail row (bookings/_guest_row) ───────── */
  .guest-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2-5);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .guest-row__icon {
    display: inline-flex;
    color: var(--color-ink-mute);
  }
  .guest-row__icon svg {
    width: 1rem;
    height: 1rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * APP SHELL — frame, sidebar, top bars, main column, page header
 * (Appended @layer components block; merges into the components layer.)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-components {
  .c-shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100vh;
  }

  @media (width >= 1024px) {
    .c-shell {
      grid-template-columns: 248px 1fr;
    }
  }
  .c-shell--impersonating {
    padding-top: var(--space-10);
  }

  /* sidebar (shared by desktop rail + mobile drawer) */
  .c-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100vh;
    padding: 0 var(--space-4) var(--space-7);
    overflow-y: auto;
    position: sticky;
    top: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    border-right: 1px solid var(--color-ink);
  }
  .c-sidebar--desktop {
    display: none;
    transition: filter var(--dur-base);
  }

  @media (width >= 1024px) {
    .c-sidebar--desktop {
      display: flex;
    }
  }

  @media print {
    .c-sidebar--desktop {
      display: none;
    }

    /* Drop the two-column grid entirely for print. Blink resolves a grid's
       `1fr` track against the container's *content* width (shrink-to-fit) on
       the print page, collapsing the content narrow — WebKit stretches it.
       Laying the shell out as plain blocks pinned to full width prints
       edge-to-edge in both engines. The .c-shell scope on c-main also raises
       specificity above the later base `.c-main { max-width: ... }` rule. */
    html,
    body,
    .c-page-frame,
    .c-shell,
    .c-main-column {
      width: 100%;
    }
    .c-shell {
      display: block;
    }
    .c-shell .c-main {
      max-width: none;
    }
  }
  .c-sidebar--drawer {
    width: 100%;
  }

  .c-sidebar__brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 67px;
    padding-inline: var(--space-3);
  }

  .c-sidebar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-sidebar__close:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
    color: var(--color-ink);
  }
  .c-sidebar__close svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .c-sidebar__property {
    padding-inline: var(--space-3);
  }

  .c-sidebar__property-label {
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  .c-sidebar__property-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -0.01em;
    color: var(--color-ink);
  }
  .c-sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
  }
  .c-sidebar__list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .c-sidebar__footer {
    margin-top: auto;
    padding-top: var(--space-4);
  }
  .c-sidebar__footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* mobile drawer */
  .c-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
  }
  .c-mobile-drawer--anim {
    transition: 0.3s linear;
  }
  .c-mobile-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-scrim);
  }
  .c-mobile-drawer__backdrop--fade {
    transition: opacity 0.3s linear;
  }
  .c-mobile-drawer__backdrop--clear {
    opacity: 0;
  }
  .c-mobile-drawer__backdrop--opaque {
    opacity: 1;
  }
  .c-mobile-drawer__panel {
    position: fixed;
    inset-block: 0;
    left: 0;
    display: flex;
    width: 18rem;
    max-width: 100%;
  }
  .c-mobile-drawer__sidebar--slide {
    transition: transform 0.3s ease-in-out;
  }
  .c-mobile-drawer__sidebar--off {
    transform: translateX(-100%);
  }
  .c-mobile-drawer__sidebar--on {
    transform: translateX(0);
  }

  /* main column */
  .c-main-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    transition: filter var(--dur-base);
  }

  /* mobile top nav */
  .c-mobile-nav {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 3.5rem;
    padding-inline: var(--space-4);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    border-bottom: 1px dashed var(--color-ink-18);
    background: color-mix(in srgb, var(--color-paper) 72%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  @media (width >= 1024px) {
    .c-mobile-nav {
      display: none;
    }
  }

  @media print {
    .c-mobile-nav {
      display: none;
    }
  }

  .c-mobile-nav__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-mobile-nav__menu-btn:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
    color: var(--color-ink);
  }
  .c-mobile-nav__title-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
  }

  .c-mobile-nav__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: var(--tracking-tightest);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .c-mobile-nav__property {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-mobile-nav__safe-area {
    height: calc(0.25rem + env(safe-area-inset-top, 0px));
  }

  @media (width >= 1024px) {
    .c-mobile-nav__safe-area {
      display: none;
    }
  }

  /* desktop top bar */
  .c-top-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    height: 67px;
    padding-inline: 2.25rem;
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    border-bottom: 1px dashed var(--color-ink-18);
    background: color-mix(in srgb, var(--color-paper) 72%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  @media (width >= 1024px) {
    .c-top-bar {
      display: flex;
    }
  }

  @media print {
    .c-top-bar {
      display: none;
    }
  }

  .c-top-bar__breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .c-top-bar__property {
    color: var(--color-ink);
  }
  .c-top-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .c-top-bar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-top-bar__icon-btn:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
    color: var(--color-ink);
  }
  .c-top-bar__icon-btn svg {
    width: 1rem;
    height: 1rem;
  }

  /* main content + page header */
  .c-main {
    width: 100%;
    max-width: var(--width-page);
    margin-inline: auto;
    padding: var(--space-6) var(--space-6) 5rem;
  }

  .c-main--full-width {
    max-width: none;
  }

  @media (width >= 640px) {
    .c-main {
      padding-inline: 2.25rem;
      padding-top: 2.25rem;
    }
  }

  .c-page-header {
    margin-bottom: 0;
  }

  @media (width >= 1024px) {
    .c-page-header {
      margin-bottom: var(--space-7);
    }
  }
  .c-page-header--spaced {
    margin-bottom: var(--space-5);
  }

  @media (width >= 640px) {
    .c-page-header--spaced {
      margin-bottom: var(--space-7);
    }
  }

  .c-page-header__mobile-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2-5);
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  @media (width >= 1024px) {
    .c-page-header__mobile-breadcrumb {
      display: none;
    }
  }
  .c-page-header__row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
  }

  .c-page-header__title {
    display: none;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 52px;
    line-height: 1;
    letter-spacing: var(--tracking-tightest);
    color: var(--color-ink);
  }

  @media (width >= 1024px) {
    .c-page-header__title {
      display: block;
    }
  }
  .c-page-header__subtitle {
    margin-top: var(--space-1);
    font-size: 16px;
    line-height: 1.625;
    color: var(--color-ink-2);
  }
  .c-page-header__extras {
    margin-top: var(--space-4);
  }
}

/* Print helper (functional, unlayered so it reliably wins). */
@media print {
  .print-hidden,
  .c-button-bar,
  .c-button-bar__desktop-actions,
  .mobile-button-bar,
  #bottom-button-bar {
    display: none !important;
  }

  .c-main:has(.arrival-departure-matrix) .c-page-header,
  .c-main:has(.task-print-sheet) .c-page-header {
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Bookings: primitives used by booking sub-pages
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-components {
  /* quantity stepper (booking_products) */
  .c-quantity-stepper {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-xl);
    background: var(--color-paper-card);
  }

  .c-quantity-stepper__btn {
    padding: var(--space-2);
    color: var(--color-ink-mute);
    cursor: pointer;
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-quantity-stepper__btn:hover {
    color: var(--color-ink);
    background: var(--color-paper-2);
  }
  .c-quantity-stepper__btn svg {
    width: 1rem;
    height: 1rem;
  }
  .c-quantity-stepper__btn--dec {
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .c-quantity-stepper__btn--inc {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }

  /* subscription-cancellation banner (rendered from app shell) */
  .c-cancellation-banner {
    background: var(--color-destructive-50);
    border-bottom: 1px solid color-mix(in srgb, var(--color-destructive) 40%, transparent);
  }

  .c-cancellation-banner__inner {
    max-width: var(--width-shell);
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  @media (width >= 640px) {
    .c-cancellation-banner__inner {
      padding-inline: var(--space-6);
    }
  }

  @media (width >= 1024px) {
    .c-cancellation-banner__inner {
      padding-inline: var(--space-8);
    }
  }
  .c-cancellation-banner__body {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }
  .c-cancellation-banner__icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-destructive);
  }

  .c-cancellation-banner__text {
    margin-left: var(--space-3);
    font-weight: 500;
    color: var(--color-destructive-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-cancellation-banner__action {
    flex-shrink: 0;
  }

  .c-cancellation-banner__button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-destructive-700);
    background: var(--color-destructive-100);
    text-decoration: none;
  }
  .c-cancellation-banner__button:hover {
    background: color-mix(in srgb, var(--color-destructive) 28%, transparent);
  }
}

@layer ds-features {
  /* ── shared booking detail chrome (show + communication) ───────────── */
  .booking-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-1-5);
  }

  .booking-header__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-38);
    line-height: 1;
    letter-spacing: var(--tracking-tightest);
    color: var(--color-ink);
  }

  .booking-header__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-1);
    margin-bottom: 0;
  }
  .booking-header__meta {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
  .booking-header__sep {
    color: var(--color-ink-mute);
  }
  .booking-header__actions {
    display: none;
    align-items: center;
    gap: var(--space-2);
  }

  @media (width >= 1024px) {
    .booking-header__actions {
      display: flex;
    }
  }
  .booking-actions-mobile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  @media (width >= 1024px) {
    .booking-actions-mobile {
      display: none;
    }
  }

  .booking-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 1280px) {
    .booking-layout {
      grid-template-columns: 1.4fr 0.85fr;
    }
  }
  .booking-layout__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }

  /* shared card body padding (px-4/sm:px-6 + pt-4/sm:pt-4.5 + pb-4/sm:pb-5.5) */
  .booking-card-body {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .booking-card-body {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }

  /* ── show: unit/dates allocation card ──────────────────────────────── */
  .booking-allocation {
    padding: var(--space-5-5) var(--space-6);
  }
  .booking-allocation__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .booking-allocation__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2-5);
    margin-bottom: var(--space-1-5);
  }
  .booking-allocation__unit {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-22);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
  }
  .booking-allocation__dates {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
  .booking-allocation__dates svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .booking-allocation__actions {
    display: flex;
    gap: var(--space-2);
  }

  /* ── show: charges table ───────────────────────────────────────────── */
  .booking-charges {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }

  .booking-charges__th {
    padding-bottom: var(--space-2-5);
    border-bottom: 1px dashed var(--color-ink-18);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
    text-align: left;
  }
  .booking-charges__th--amount {
    text-align: right;
  }
  .booking-charges__th--date {
    width: 72px;
  }

  @media (width >= 640px) {
    .booking-charges__th--date {
      width: 110px;
    }
  }
  .booking-charges__td {
    padding-block: var(--space-3);
    border-bottom: 1px dashed var(--color-ink-18);
    vertical-align: top;
  }

  .booking-charges__td--date {
    padding-right: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-2);
    white-space: nowrap;
  }
  .booking-charges__td--desc {
    color: var(--color-ink);
  }

  .booking-charges__td--amount {
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-13);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
  }
  .booking-charges__td--amount.is-payment {
    color: var(--color-sage-700);
  }
  .booking-charges__line-strong {
    font-weight: 500;
  }
  .booking-charges__tax {
    margin-left: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .booking-charges__discount {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-sage-700);
  }
  .booking-charges__muted {
    margin-left: var(--space-1);
    color: var(--color-ink-mute);
  }
  .booking-charges__empty {
    padding-block: var(--space-6);
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }

  /* ── show: balance block ───────────────────────────────────────────── */
  .booking-balance {
    position: relative;
    margin-top: var(--space-3-5);
    margin-bottom: var(--space-4-5);
    padding: var(--space-4-5) var(--space-5-5);
    border: 1.5px dashed;
    border-radius: var(--radius-xl);
    text-align: center;
  }
  .booking-balance--paid {
    border-color: color-mix(in srgb, var(--color-sage-500) 35%, transparent);
    background: color-mix(in srgb, var(--color-sage-500) 10%, transparent);
  }
  .booking-balance--owed {
    border-color: color-mix(in srgb, var(--color-terra-500) 35%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 7%, transparent);
  }
  .booking-balance__label {
    margin-bottom: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink-2);
  }
  .booking-balance__amount {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: var(--text-38);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
  }
  .booking-balance__amount--paid {
    color: var(--color-sage-700);
  }
  .booking-balance__amount--credit {
    color: var(--color-sage-700);
  }
  .booking-balance__amount--owed {
    color: var(--color-terra-500);
  }

  .booking-charges__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .booking-charges__note {
    margin-top: var(--space-2-5);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-mute);
  }

  /* ── show: notes & requests form ───────────────────────────────────── */
  .booking-notes__saved {
    font-family: var(--font-mono);
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }
  .booking-notes__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .booking-notes__group--first {
    margin-bottom: var(--space-6);
  }
  .booking-notes__group--last {
    margin-bottom: var(--space-1);
  }
  .booking-notes__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-13);
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
    cursor: text;
  }
  .booking-notes__label svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .booking-notes__field {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3-5);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-input);
    transition: all var(--dur-fast) ease-out;
  }
  .booking-notes__field:focus-within {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }

  .booking-notes__textarea {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    font-size: var(--text-14-5);
    line-height: 1.625;
    resize: vertical;
    min-height: 7rem;
  }
  .booking-notes__textarea::placeholder {
    color: var(--color-ink-mute);
  }
  .booking-notes__textarea:focus {
    outline: none;
    box-shadow: none;
  }

  /* ── show + communication: guest card ──────────────────────────────── */
  .booking-guest__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3-5);
  }

  .booking-guest__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-pill);
    border: 1px dashed var(--color-ink-25);
    background: var(--color-paper);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
  .booking-guest__name {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-22);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
    text-decoration: none;
  }
  .booking-guest__name:hover {
    color: var(--color-ink-2);
  }
  .booking-guest__repeat {
    font-family: var(--font-mono);
    font-size: var(--text-11-5);
    letter-spacing: var(--tracking-mono);
    color: var(--color-ink-mute);
  }
  .booking-guest__rows > * + * {
    border-top: 1px dashed var(--color-ink-18);
  }
  .booking-guest__link {
    color: var(--color-ink);
    text-decoration: underline dashed;
    text-underline-offset: 3px;
    text-decoration-color: var(--color-ink-30);
  }
  .booking-guest__placeholder {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }

  /* ── show + communication: stay timeline ───────────────────────────── */
  .booking-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-3-5);
  }
  .booking-timeline__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .booking-timeline__date {
    flex-shrink: 0;
    width: 60px;
    padding-top: var(--space-0-5);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--color-ink-mute);
  }
  .booking-timeline__dot {
    flex-shrink: 0;
    width: var(--space-2);
    height: var(--space-2);
    margin-top: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-ink-mute);
  }
  .booking-timeline__dot--terra {
    background: var(--color-terra-500);
  }
  .booking-timeline__title {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-ink);
  }
  .booking-timeline__detail {
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-mute);
  }

  .booking-policy-note {
    padding-inline: var(--space-1);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-mute);
  }

  /* ── communication: empty state ────────────────────────────────────── */
  .booking-comm-empty {
    padding: var(--space-16) var(--space-6);
    text-align: center;
  }
  .booking-comm-empty__icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto var(--space-3);
    color: var(--color-ink-mute);
  }
  .booking-comm-empty__text {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  /* ── registration card: staff show ─────────────────────────────────── */
  .registration-card-notice {
    margin-bottom: var(--space-5);
    border-color: color-mix(in srgb, var(--color-terra-500) 25%, transparent);
  }
  .registration-card-notice__body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .registration-card-notice__body {
      padding: var(--space-4-5) var(--space-6);
    }
  }
  .registration-card-notice__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: var(--space-0-5);
    color: var(--color-terra-600);
  }
  .registration-card-notice__heading {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--color-ink);
  }
  .registration-card-notice__text {
    margin-bottom: 0;
    font-size: var(--text-14-5);
    line-height: 1.55;
    color: var(--color-ink-2);
  }

  /* guest + stay panel tiles */
  .registration-card-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (width >= 640px) {
    .registration-card-panels {
      grid-template-columns: 1fr 1fr;
    }
  }
  .registration-card-panel {
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-paper-2) 60%, transparent);
  }
  .registration-card-panel__label {
    font-family: var(--font-mono);
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--color-ink-mute);
  }
  .registration-card-panel__value {
    margin-top: var(--space-2);
    font-weight: 500;
    color: var(--color-ink);
  }
  .registration-card-panel__meta {
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }

  .registration-card-send {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }
  .registration-card-sent {
    margin-top: var(--space-5);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-mute);
  }

  /* submitted-details key/value grid */
  .registration-card-details {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (width >= 640px) {
    .registration-card-details {
      grid-template-columns: 1fr 1fr;
    }
  }
  .registration-card-details--spaced {
    margin-top: var(--space-5);
  }
  .registration-card-details__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  @media (width >= 640px) {
    .registration-card-details__item--full {
      grid-column: 1 / -1;
    }
  }
  .registration-card-details__label {
    font-family: var(--font-mono);
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--color-ink-mute);
  }
  .registration-card-details__value {
    color: var(--color-ink);
  }
  .registration-card-details__value--break {
    font-size: var(--text-13);
    line-height: 1.4;
    word-break: break-all;
  }

  /* signature image frame */
  .registration-card-signature {
    padding: var(--space-4);
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-xl);
    background: var(--color-white);
  }
  .registration-card-signature__image {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .registration-card-signature__missing {
    margin-bottom: 0;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }

  /* status sidecard label/value rows */
  .registration-card-status {
    display: flex;
    flex-direction: column;
    gap: var(--space-3-5);
  }
  .registration-card-status__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .registration-card-status__label {
    color: var(--color-ink-2);
  }
  .registration-card-status__value {
    font-weight: 500;
    color: var(--color-ink);
  }

  /* terms snapshot + guest link sidecards */
  .registration-card-terms {
    font-size: var(--text-13-5);
    line-height: 1.6;
    color: var(--color-ink-2);
  }
  .registration-card-terms p {
    margin-bottom: var(--space-3);
  }
  .registration-card-link__help {
    font-size: var(--text-14-5);
    line-height: 1.55;
    color: var(--color-ink-2);
  }
  .registration-card-link__url {
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-paper-2) 60%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-2);
    word-break: break-all;
  }

  /* ── booking_products: search/filter bar ───────────────────────────── */
  .booking-products-search {
    display: flex;
    align-items: stretch;
  }
  .booking-products-search__icon {
    display: flex;
    align-items: center;
    padding-left: var(--space-4);
    color: var(--color-ink-mute);
  }

  @media (width >= 640px) {
    .booking-products-search__icon {
      padding-left: var(--space-6);
    }
  }
  .booking-products-search__icon svg {
    width: 1rem;
    height: 1rem;
  }
  .booking-products-search__select {
    width: auto;
    flex-shrink: 0;
    padding-left: var(--space-3);
    padding-right: var(--space-6);
    color: var(--color-ink-2);
    cursor: pointer;
  }
  .booking-products-search__field-wrap {
    position: relative;
    flex: 1;
  }
  .booking-products-search__field {
    padding: var(--space-4) var(--space-3);
  }

  @media (width >= 640px) {
    .booking-products-search__field {
      padding-block: var(--space-6);
    }
  }
  .booking-products-search__clear {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: var(--space-4);
  }

  @media (width >= 640px) {
    .booking-products-search__clear {
      padding-right: var(--space-6);
    }
  }
  .booking-products-search__clear-btn {
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
  }
  .booking-products-search__clear-btn:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }
  .booking-products-search__clear-btn svg {
    width: 1rem;
    height: 1rem;
  }

  /* ── booking_products: lists + rows ────────────────────────────────── */
  .booking-products-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
    margin-top: var(--space-5-5);
  }
  .booking-products-group > * + * {
    border-top: 1px dashed var(--color-ink-18);
  }
  .booking-products-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5-5);
  }

  .booking-product-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .booking-product-row {
      padding-inline: var(--space-6);
    }
  }
  .booking-product-row__thumb {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
  }
  .booking-product-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: var(--color-paper-2);
    border-radius: var(--radius-lg);
    color: var(--color-ink-mute);
  }
  .booking-product-row__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .booking-product-row__body {
    min-width: 0;
    flex: 1;
  }
  .booking-product-row__name-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .booking-product-row__name {
    font-weight: 500;
    color: var(--color-ink);
  }
  .booking-product-row__meta {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .booking-product-row__meta--spaced {
    margin-top: var(--space-1);
  }
  .booking-product-row__items {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }
  .booking-product-row__price {
    text-align: right;
    flex-shrink: 0;
  }
  .booking-product-row__amount {
    font-weight: 500;
    color: var(--color-ink);
  }
  .booking-product-row__tax {
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }

  /* ── legacy sub-pages: shared detail grids / rows ──────────────────── */
  .booking-card-spaced {
    margin-top: var(--space-4);
  }
  .booking-detail-pad {
    padding: var(--space-6);
  }
  .booking-form-body {
    padding: var(--space-6);
  }
  .booking-form-body > * + * {
    margin-top: var(--space-6);
  }
  .booking-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .booking-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 768px) {
    .booking-detail-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (width >= 1024px) {
    .booking-detail-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .booking-detail-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 768px) {
    .booking-detail-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  .booking-detail-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 768px) {
    .booking-detail-grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  .booking-detail-item > * + * {
    margin-top: var(--space-1);
  }
  .booking-detail-item__label {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .booking-detail-item__value {
    font-size: var(--text-base);
    line-height: 1.5rem;
    color: var(--color-ink-2);
  }
  .booking-detail-item__value--danger {
    font-weight: 600;
    color: var(--color-destructive);
  }
  .booking-detail-item__value--positive {
    font-weight: 600;
    color: var(--color-sage-700);
  }
  .booking-detail-section--lg {
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-paper-2);
  }
  .booking-note-text {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  /* confirm_cancel uses a flex (not grid) detail row */
  .booking-detail-stack > * + * {
    margin-top: var(--space-4);
  }
  .booking-detail-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  @media (width >= 1024px) {
    .booking-detail-row {
      flex-direction: row;
      gap: var(--space-4);
    }
  }
  .booking-detail-row__col {
    flex: 1;
  }
  .booking-detail-row__label {
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 700;
    color: var(--color-ink);
  }
  .booking-detail-row__value {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .booking-detail-row__value--danger {
    color: var(--color-destructive);
    font-weight: 600;
  }
  .booking-detail-row__value--positive {
    color: var(--color-sage-700);
    font-weight: 600;
  }
  .booking-detail-row__note {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
  }
  .booking-detail-section {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-ink-10);
  }

  /* ── legacy sub-pages: alert callouts ──────────────────────────────── */
  .booking-alert {
    margin-top: var(--space-4);
    padding: var(--space-6);
    border: 1px solid;
    border-radius: var(--radius-xl);
  }
  .booking-alert--compact {
    padding: var(--space-4);
  }
  .booking-alert--danger {
    background: var(--color-destructive-50);
    border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
  }
  .booking-alert--caution {
    background: var(--color-caution-50);
    border-color: color-mix(in srgb, var(--color-caution) 40%, transparent);
  }
  .booking-alert__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .booking-alert__body--spaced {
    margin-bottom: var(--space-4);
  }
  .booking-alert__icon {
    flex-shrink: 0;
    margin-top: var(--space-0-5);
  }
  .booking-alert__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .booking-alert--danger .booking-alert__icon {
    color: var(--color-destructive);
  }
  .booking-alert--caution .booking-alert__icon {
    color: var(--color-caution);
  }
  .booking-alert__title {
    font-size: var(--text-base);
    line-height: 1.5rem;
    font-weight: 600;
  }
  .booking-alert__title--sm {
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .booking-alert--danger .booking-alert__title {
    color: var(--color-destructive-700);
  }
  .booking-alert--caution .booking-alert__title {
    color: var(--color-caution-700);
  }
  .booking-alert__text {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .booking-alert--danger .booking-alert__text {
    color: var(--color-destructive-700);
  }
  .booking-alert--caution .booking-alert__text {
    color: var(--color-caution-700);
  }
  .booking-alert__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  @media (width >= 1024px) {
    .booking-alert__actions {
      flex-direction: row;
    }
  }

  /* confirm_cancel: alert rendered via the card helper */
  .booking-alert-card {
    margin-top: var(--space-4);
    background: var(--color-destructive-50);
    border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
  }
  .booking-alert-card__text {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-destructive-700);
  }
  .booking-alert-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (width >= 1024px) {
    .booking-alert-card__actions {
      flex-direction: row;
    }
  }
  .booking-cta--responsive {
    width: 100%;
  }

  @media (width >= 1024px) {
    .booking-cta--responsive {
      width: auto;
    }
  }

  /* ── check_in / check_out: units list ──────────────────────────────── */
  .booking-units-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-paper);
    border-top: 1px solid var(--color-paper-2);
    border-bottom: 1px solid var(--color-paper-2);
  }
  .booking-units-header__icon {
    color: var(--color-ink-mute);
  }
  .booking-units-header__icon svg {
    width: 1rem;
    height: 1rem;
  }
  .booking-units-header__title {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--color-ink-2);
  }
  .booking-units-list > * + * {
    border-top: 1px solid var(--color-paper-2);
  }
  .booking-units-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
  }
  .booking-units-row__name {
    font-size: var(--text-base);
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .booking-units-row__dates {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  /* ── edit_guest: guest search dropdown ─────────────────────────────── */
  .guest-search {
    position: relative;
  }
  .guest-search__selected {
    margin-top: var(--space-2);
  }
  .guest-search__selected-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
  }
  .guest-search__selected-icon {
    color: var(--color-sage-700);
  }
  .guest-search__selected-icon svg {
    width: 1rem;
    height: 1rem;
  }
  .guest-search__menu {
    position: absolute;
    width: 100%;
    transform-origin: top left;
    z-index: var(--z-dropdown);
  }
  .guest-search__menu-inner {
    margin-top: var(--space-1);
    max-height: 16rem;
    overflow-y: auto;
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-paper);
  }
  .guest-search__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
  }
  .guest-search__spinner {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .guest-search__result {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
  }
  .guest-search__result:first-child {
    margin-top: var(--space-1);
  }
  .guest-search__result:last-child {
    margin-bottom: var(--space-1);
  }
  .guest-search__result.is-highlighted {
    background: var(--color-paper-2);
  }
  .guest-search__result-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .guest-search__result-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
  }
  .guest-search__result-initials {
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .guest-search__result-body {
    flex: 1;
    min-width: 0;
  }
  .guest-search__result-name {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .guest-search__result-email {
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .guest-search__empty {
    padding: var(--space-3);
    color: var(--color-ink-mute);
  }

  /* ── edit_guest / edit_dates: field rows ───────────────────────────── */
  .booking-field-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  @media (width >= 1024px) {
    .booking-field-row {
      flex-direction: row;
      gap: var(--space-4);
    }
  }
  .booking-field-row__col {
    flex: 1;
  }

  /* ── edit_dates: balance-change preview ────────────────────────────── */
  .booking-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: var(--color-paper);
    border-radius: var(--radius-xl);
  }
  .booking-preview__main {
    flex: 1;
  }
  .booking-preview__label {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--color-ink-2);
  }
  .booking-preview__sub {
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }
  .booking-preview__amount {
    font-size: var(--text-2xl);
    line-height: 2rem;
    font-weight: 700;
    color: var(--color-ink-2);
  }
  .booking-preview__amount.is-increase {
    color: var(--color-destructive);
  }
  .booking-preview__amount.is-decrease {
    color: var(--color-sage-700);
  }

  /* ── edit_unit: unit picker ────────────────────────────────────────── */
  .booking-unit-group {
    padding: var(--space-3) var(--space-6);
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-paper-2);
  }
  .booking-unit-group__title {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--color-ink-2);
  }
  .booking-unit-list > * + * {
    border-top: 1px solid var(--color-paper-2);
  }
  .booking-unit-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    transition: background var(--dur-fast);
  }
  .booking-unit-option--current {
    background: var(--color-paper);
  }
  .booking-unit-option--selectable:hover {
    background: var(--color-paper-2);
  }
  .booking-unit-option__radio {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
  }
  .booking-unit-option__main {
    display: flex;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
  }
  .booking-unit-option__name {
    font-size: var(--text-base);
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .booking-unit-option__current-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .booking-unit-option__diff {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
  }
  .booking-unit-option__diff--up {
    color: var(--color-destructive);
  }
  .booking-unit-option__diff--down {
    color: var(--color-sage-700);
  }
  .booking-unit-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-16);
    text-align: center;
  }
  .booking-unit-empty__icon {
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--space-2);
    color: var(--color-ink-18);
  }
  .booking-unit-empty__text {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  /* ── folio (printable) ─────────────────────────────────────────────── */
  .booking-folio {
    margin-inline: auto;
    max-width: 48rem;
    background: var(--color-paper-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-paper);
  }

  @media print {
    .booking-folio {
      max-width: none;
      border-radius: 0;
      box-shadow: none;
    }
  }
  .booking-folio__sheet {
    padding: 2.5rem;
    color: var(--color-ink);
  }

  @media print {
    .booking-folio__sheet {
      padding: 0;
    }
  }
  .booking-folio__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-ink);
  }
  .booking-folio__brand {
    flex: 1;
  }
  .booking-folio__logo {
    height: 3.5rem;
    margin-bottom: var(--space-3);
  }
  .booking-folio__property {
    font-size: var(--text-lg);
    line-height: 1.75rem;
    font-weight: 600;
  }
  .booking-folio__line {
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .booking-folio__meta {
    text-align: right;
  }
  .booking-folio__title {
    font-size: var(--text-2xl);
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-transform: uppercase;
  }
  .booking-folio__meta-line {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .booking-folio__parties {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
    margin-top: var(--space-6);
  }
  .booking-folio__label {
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  .booking-folio__stay-label {
    display: inline-block;
    width: 5rem;
  }
  .booking-folio__section {
    margin-top: var(--space-8);
  }

  @media print {
    .booking-folio__section {
      break-inside: avoid;
    }
  }
  .booking-folio__section-title {
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-ink);
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  .booking-folio__table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .booking-folio__th {
    padding-block: var(--space-2);
    font-weight: 600;
    text-align: left;
  }
  .booking-folio__th--amount {
    text-align: right;
  }
  .booking-folio__th--date {
    width: 7rem;
  }
  .booking-folio__th--amount-col {
    width: 8rem;
  }
  .booking-folio__td {
    padding-block: var(--space-1);
    vertical-align: top;
  }
  .booking-folio__td--amount {
    text-align: right;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
  }
  .booking-folio__discount {
    font-size: var(--text-xs);
    line-height: 1rem;
  }
  .booking-folio__total-td {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-ink-18);
    font-weight: 600;
  }
  .booking-folio__total-td--amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  .booking-folio__totals {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-8);
  }

  @media print {
    .booking-folio__totals {
      break-inside: avoid;
    }
  }
  .booking-folio__totals-box {
    width: 100%;
    max-width: 20rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .booking-folio__totals-row {
    display: flex;
    justify-content: space-between;
    padding-block: var(--space-1);
  }
  .booking-folio__totals-row--ruled {
    border-bottom: 1px solid var(--color-ink-18);
  }
  .booking-folio__num {
    font-variant-numeric: tabular-nums;
  }
  .booking-folio__grand {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 2px double var(--color-ink);
  }
  .booking-folio__grand-label {
    font-size: var(--text-base);
    line-height: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
  }
  .booking-folio__grand-amount {
    font-size: var(--text-base);
    line-height: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .booking-folio__footer {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-ink-18);
    text-align: center;
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Shared list-page + form-page chrome (CRUD sections: products, units,
 * rate plans, packages, …). Backed by the shared/ partials.
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-components {
  /* divided list of rows inside a card */
  .c-list > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }

  /* search bar pinned to the top of a list card */
  .c-list-search {
    display: flex;
    align-items: stretch;
    border-bottom: 1px dashed var(--color-ink-18);
  }
  .c-list-search__icon {
    display: flex;
    align-items: center;
    padding-left: var(--space-4);
    color: var(--color-ink-mute);
  }

  @media (width >= 640px) {
    .c-list-search__icon {
      padding-left: var(--space-6);
    }
  }
  .c-list-search__icon svg {
    width: 1rem;
    height: 1rem;
  }
  .c-list-search__select {
    width: auto;
    flex-shrink: 0;
    padding-left: var(--space-3);
    padding-right: var(--space-6);
    cursor: pointer;
  }
  .c-list-search__field-wrap {
    position: relative;
    flex: 1;
  }
  .c-list-search__field {
    padding: var(--space-4) var(--space-3);
  }

  @media (width >= 640px) {
    .c-list-search__field {
      padding-block: var(--space-6);
    }
  }
  .c-list-search__clear {
    position: absolute;
    inset-block: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: var(--space-4);
  }

  @media (width >= 640px) {
    .c-list-search__clear {
      padding-right: var(--space-6);
    }
  }
  .c-list-search__clear-btn {
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
  }
  .c-list-search__clear-btn:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }
  .c-list-search__clear-btn svg {
    width: 1rem;
    height: 1rem;
  }

  /* list row (a link spanning the row; rounds with the card on the last row) */
  .c-list-row {
    display: block;
    padding: var(--space-4);
    text-decoration: none;
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .c-list-row {
      padding-inline: var(--space-6);
    }
  }
  .c-list-row:hover {
    background: var(--color-paper-soft);
  }
  .c-list-row:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
  }
  .c-list-row__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }

  .c-list-row__media {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-paper-2);
    color: var(--color-ink-mute);
  }
  .c-list-row__media svg {
    width: 1.25rem;
    height: 1.25rem;
  }
  .c-list-row__media-img {
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-lg);
  }
  .c-list-row__body {
    flex: 1;
    min-width: 0;
  }
  .c-list-row__title {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-list-row__subtitle {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-list-row__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .c-list-row__meta-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-list-row__amount {
    flex-shrink: 0;
    font-weight: 500;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
  }
  .c-list-row__count {
    flex-shrink: 0;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .c-list-row__badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  /* row variants (units list: tighter gap, bordered media holding a photo or icon) */
  .c-list-row__inner--tight {
    gap: var(--space-3);
  }
  .c-list-row__media--bordered {
    width: var(--space-10);
    height: var(--space-10);
    background: var(--color-paper);
    border: 1px dashed var(--color-ink-25);
  }
  .c-list-row__media--bordered svg {
    width: 1rem;
    height: 1rem;
  }
  .c-list-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .c-list-row__detail {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .c-list-row__detail-sep {
    margin-inline: var(--space-1);
  }

  /* row variants: top-align media against a multi-line body; text-initials avatar disc */
  .c-list-row__inner--top {
    align-items: flex-start;
  }
  .c-list-row__media--avatar {
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }

  /* empty state inside a list card */
  .c-list-empty {
    padding-block: var(--space-16);
    text-align: center;
  }
  .c-list-empty__icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto var(--space-3);
    color: var(--color-ink-mute);
  }
  .c-list-empty__text {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .c-list-empty__action {
    margin-top: var(--space-2);
  }

  /* settings/CRUD form card shell */
  .c-form-card {
    max-width: 720px;
  }
  .c-form-card__body {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .c-form-card__body {
      padding: 26px var(--space-7) var(--space-5-5);
    }
  }
  .c-form-card__footer-pad {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .c-form-card__footer-pad {
      padding-inline: var(--space-7);
    }
  }

  /* form footer: timestamp on the left, cancel/save on the right */
  .c-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .c-form-footer__meta {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-mute);
  }
  .c-form-footer__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* vertical list of toggles inside a form group */
  .c-form-toggle-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--text-sm);
  }

  /* delete / in-use prompt below a form */
  .c-delete-prompt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: 720px;
    margin-top: var(--space-7);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .c-delete-prompt__dot {
    display: inline-block;
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-terra-500);
  }
  .c-delete-prompt__dot--muted {
    background: var(--color-ink-mute);
  }

  /* inline dashed-underline link (delete links, inline help links) */
  .c-link-dashed {
    color: var(--color-ink-2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    transition: color var(--dur-fast);
  }
  .c-link-dashed:hover {
    color: var(--color-terra-500);
  }

  /* static ink variant (contact links): darker ink, faint decoration, no hover shift */
  .c-link-dashed--ink,
  .c-link-dashed--ink:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-ink-30);
  }

  /* serif-italic hint line inside a form group (e.g. "no taxes yet") */
  .c-form-hint {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-mute);
  }

  /* intro paragraph at the top of a form card body */
  .c-form-lead {
    margin: 0 0 var(--space-4);
    font-size: var(--text-13);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  /* callout box (e.g. channex mapping warning) */
  .c-callout {
    padding: var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .c-callout--caution {
    background: var(--color-caution-50);
    border-color: color-mix(in srgb, var(--color-caution) 40%, transparent);
    color: var(--color-caution-700);
  }
  .c-callout--danger {
    background: var(--color-destructive-50);
    border-color: color-mix(in srgb, var(--color-destructive) 40%, transparent);
    color: var(--color-destructive-700);
  }
  .c-callout--info {
    background: var(--color-ink-blue-50);
    border-color: color-mix(in srgb, var(--color-ink-blue) 40%, transparent);
    color: var(--color-ink-blue-700);
  }
  .c-callout p + p {
    margin-top: var(--space-2);
  }

  /* pill tab nav (e.g. unit details/facilities/photos; --block adds top margin for pages that hand-roll their own h1) */
  .c-pill-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-5-5);
    padding: var(--space-1);
    background: var(--color-paper);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-pill);
  }
  .c-pill-tabs--block {
    margin-block: var(--space-5-5);
  }
  .c-pill-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
    text-decoration: none;
    transition: color var(--dur-fast);
  }
  .c-pill-tabs__tab:hover {
    color: var(--color-ink);
  }
  .c-pill-tabs__tab svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .c-pill-tabs__tab--active {
    font-weight: 500;
    color: var(--color-ink);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-segmented-active);
  }

  /* facilities checkbox grid (units) */
  .c-facilities-group--divided {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .c-facilities-group__title {
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-2);
  }
  .c-facilities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2) var(--space-4);
  }

  @media (width >= 768px) {
    .c-facilities-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 1024px) {
    .c-facilities-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .c-facility {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    user-select: none;
    color: var(--color-ink-2);
    transition: color var(--dur-fast);
  }
  .c-facility:hover {
    color: var(--color-ink);
  }
  .c-facility:has(:checked) {
    color: var(--color-ink);
  }

  .c-facility__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-25);
    border-radius: 5px;
    transition: all var(--dur-fast) ease-out;
  }
  .c-facility:hover .c-facility__box {
    border-color: color-mix(in srgb, var(--color-ink) 40%, transparent);
  }
  .c-facility:has(:checked) .c-facility__box {
    background: var(--color-sage-500);
    border-color: var(--color-sage-500);
  }
  .c-facility:has(:focus-visible) .c-facility__box {
    box-shadow:
      0 0 0 2px var(--color-paper-card),
      0 0 0 4px color-mix(in srgb, var(--color-ink) 15%, transparent);
  }
  .c-facility__check {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-white);
    opacity: 0;
    transition: opacity var(--dur-fast);
  }
  .c-facility:has(:checked) .c-facility__check {
    opacity: 1;
  }
  .c-facility__label {
    font-size: var(--text-sm);
    line-height: 1.375;
  }

  /* filter-only list toolbar (no text search — a primary <select> + clear) */
  .c-list-filter {
    display: flex;
    align-items: stretch;
    border-bottom: 1px dashed var(--color-ink-18);
  }
  .c-list-filter__icon {
    display: flex;
    align-items: center;
    padding-left: var(--space-5);
    color: var(--color-ink-mute);
  }

  @media (width >= 640px) {
    .c-list-filter__icon {
      padding-left: var(--space-7);
    }
  }
  .c-list-filter__icon svg {
    width: 1rem;
    height: 1rem;
  }
  .c-list-filter__select {
    width: auto;
    flex-shrink: 0;
    padding: var(--space-4) var(--space-6) var(--space-4) var(--space-3);
    cursor: pointer;
  }

  @media (width >= 640px) {
    .c-list-filter__select {
      padding-block: var(--space-5);
    }
  }
  .c-list-filter__spacer {
    position: relative;
    flex: 1;
  }
  .c-list-filter__clear {
    position: absolute;
    inset-block: 0;
    right: 0;
    display: flex;
    align-items: center;
    padding-right: var(--space-5);
  }

  @media (width >= 640px) {
    .c-list-filter__clear {
      padding-right: var(--space-7);
    }
  }
  .c-list-filter__clear-btn {
    padding: var(--space-1);
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
  }
  .c-list-filter__clear-btn:hover {
    background: var(--color-paper-soft);
    color: var(--color-ink);
  }
  .c-list-filter__clear-btn svg {
    width: 1rem;
    height: 1rem;
  }

  /* nested-fields sub-form: an inset box holding repeatable rows + an add button */
  .c-subform {
    padding: var(--space-3) var(--space-4);
    background: var(--color-paper-soft);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: var(--radius-input);
  }
  .c-subform__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .c-subform__add {
    margin-top: var(--space-3);
  }
  .c-subform-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .c-subform-row__grow {
    flex: 1;
  }
  .c-subform-row__qty {
    width: 6rem;
  }

  /* repeatable card inside a sub-form (e.g. a rate-plan schedule) */
  .c-subform-card {
    position: relative;
    padding: var(--space-4);
    background: var(--color-paper-card);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: var(--radius-input);
  }
  .c-subform-card__remove {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    color: var(--color-ink-mute);
    cursor: pointer;
    transition: color var(--dur-fast);
  }
  .c-subform-card__remove:hover {
    color: var(--color-ink);
  }
  .c-subform-card__remove svg {
    width: 1rem;
    height: 1rem;
  }
  .c-subform-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  /* responsive field row: one column on mobile, two from md up */
  .c-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (width >= 768px) {
    .c-form-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 768px) {
    .c-form-row--address {
      grid-template-columns: 2fr 1fr 1fr;
    }
  }

  /* list row: title + inline badge heading; trailing chevron */
  .c-list-row__heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .c-list-row__chevron {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
    color: var(--color-ink-mute);
  }
  .c-list-row__mono {
    font-family: var(--font-mono);
  }

  /* show/detail card body padding (looser top than the form-card body) */
  .c-detail-body {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .c-detail-body {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }
  .c-form-card--spaced {
    margin-top: var(--space-6);
  }
  .c-form-note {
    margin-top: var(--space-3);
    font-size: var(--text-13);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  /* soft info box explaining a form's downstream flow */
  .c-form-info {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-input);
    background: var(--color-paper-soft);
    border: 1px solid var(--color-ink-10);
  }
  .c-form-info__text {
    margin: 0;
    font-size: var(--text-13);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  /* monospace code readout (api keys, webhook signing secret) */
  .c-code-block {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-input);
    background: var(--color-paper-2);
    border: 1px solid var(--color-ink-10);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink);
    overflow-wrap: anywhere;
  }

  /* mono-caps label + value readout (detail/show panels) */
  .c-readout__label {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-2xs);
    font-weight: 500;
    color: var(--color-ink-mute);
  }
  .c-readout__value {
    color: var(--color-ink);
    overflow-wrap: anywhere;
  }

  /* mono-caps dashed-border data table (activity logs, transaction history) */
  .c-data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }
  .c-data-table thead th {
    padding: 0 var(--space-5) var(--space-2-5) 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
    text-align: left;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
    white-space: nowrap;
  }
  .c-data-table tbody td {
    padding: var(--space-3) var(--space-5) var(--space-3) 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
    vertical-align: top;
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }

  /* cell modifiers are scoped to th/td so they outweigh the base cell rule (same layer) */
  .c-data-table th.c-data-table--num,
  .c-data-table td.c-data-table--num {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .c-data-table th.c-data-table--right,
  .c-data-table td.c-data-table--right {
    text-align: right;
  }
  .c-data-table th.c-data-table--ink,
  .c-data-table td.c-data-table--ink {
    color: var(--color-ink);
  }
  .c-data-table th.c-data-table--muted,
  .c-data-table td.c-data-table--muted {
    color: var(--color-ink-mute);
  }
  .c-data-table th.c-data-table--pos,
  .c-data-table td.c-data-table--pos {
    color: var(--color-sage-700);
  }
  .c-data-table th.c-data-table--neg,
  .c-data-table td.c-data-table--neg {
    color: var(--color-destructive-700);
  }
  .c-data-table th.c-data-table--butter,
  .c-data-table td.c-data-table--butter {
    color: var(--color-butter);
  }
  .c-data-table th.c-data-table--strong,
  .c-data-table td.c-data-table--strong {
    font-weight: 500;
    color: var(--color-ink);
  }
  .c-data-table--mono {
    font-family: var(--font-mono);
  }
  .c-data-table--nowrap {
    white-space: nowrap;
  }
  .c-data-table--truncate {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .c-data-table__scroll {
    overflow-x: auto;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Dashboard
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  /* ── index: header refresh line + card grid ────────────────────────── */
  .dashboard-refresh {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--color-ink-mute);
  }
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5-5);
  }

  @media (width >= 1024px) {
    .dashboard-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ── shared card chrome (lazy cards + booking cards) ───────────────── */
  .dashboard-card-body {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .dashboard-card-body {
      padding: var(--space-5) var(--space-6);
    }
  }

  .dashboard-card-link {
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-2);
    text-decoration: none;
    transition: color var(--dur-fast);
  }
  .dashboard-card-link:hover {
    color: var(--color-terra-500);
  }
  .dashboard-note-rule {
    margin: var(--space-4) 0 var(--space-3);
    border: 0;
    border-top: 1px dashed var(--color-ink-18);
  }

  /* `text-[13.5px]` is an arbitrary Tailwind value — it sets font-size only, so
   * line-height inherits (1.5 from body); don't pin it here. */
  .dashboard-note {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-13-5);
    color: var(--color-ink-mute);
  }
  .dashboard-card-empty {
    padding-block: var(--space-4);
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }

  /* lazy-load skeleton bar (paired with the functional .skeleton class) */
  .dashboard-skeleton-bar {
    width: 50%;
    height: var(--space-6);
    border-radius: 0.25rem;
  }

  /* ── occupancy card: composite "occupied / total" stat number ──────── */
  .dashboard-occupancy-occupied {
    font-style: italic;
    font-weight: 400;
  }
  .dashboard-occupancy-total {
    font-size: var(--text-22);
    color: var(--color-ink-mute);
  }

  /* ── index: non-PMS quick links ────────────────────────────────────── */
  .dashboard-quicklinks {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-top: var(--space-6);
  }

  @media (width >= 640px) {
    .dashboard-quicklinks {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 768px) {
    .dashboard-quicklinks {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .dashboard-quicklink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-card);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
    text-decoration: none;
    transition: transform var(--dur-fast);
  }
  .dashboard-quicklink:hover {
    transform: translateY(-1px);
  }
  .dashboard-quicklink__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--color-terra-500);
  }
  .dashboard-quicklink__label {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    line-height: 1.75rem;
    color: var(--color-ink);
  }

  /* ── attention banner ──────────────────────────────────────────────── */
  .dashboard-attention {
    position: relative;
    overflow: hidden;
    margin-bottom: var(--space-6);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-attention);
    border: 1px solid color-mix(in srgb, var(--color-ink) 16%, transparent);
    border-left: 3px solid var(--color-terra-500);
    border-radius: var(--radius-card);
  }

  .dashboard-attention__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px dashed color-mix(in srgb, var(--color-terra-500) 40%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 5%, transparent);
  }

  .dashboard-attention__title {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-19);
    color: var(--color-ink);
  }

  .dashboard-attention__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-7);
    height: var(--space-7);
    border-radius: var(--radius-pill);
    border: 1px dashed color-mix(in srgb, var(--color-terra-500) 50%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 12%, transparent);
    color: var(--color-terra-500);
  }
  .dashboard-attention__body {
    padding: var(--space-4) var(--space-6) var(--space-5);
  }
  .dashboard-attention__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (width >= 1024px) {
    .dashboard-attention__layout {
      flex-direction: row;
      align-items: center;
      gap: var(--space-5);
    }
  }
  .dashboard-attention__lead {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1;
  }

  .dashboard-attention__total {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--text-64);
    line-height: 1;
    letter-spacing: var(--tracking-tightest);
    color: var(--color-terra-500);
  }
  .dashboard-attention__summary {
    flex: 1;
  }
  .dashboard-attention__summary-title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-lg);
    line-height: 1.75rem;
    color: var(--color-ink);
  }
  .dashboard-attention__summary-help {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.625;
    color: var(--color-ink-2);
  }
  .dashboard-attention__cta {
    width: 100%;
    justify-content: center;
  }

  @media (width >= 1024px) {
    .dashboard-attention__cta {
      width: auto;
    }
  }

  /* ── PMS dashboard: section stack + meta pills ─────────────────────── */
  .dashboard-pms {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .dashboard-pms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5-5);
  }

  .dashboard-date-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-2);
  }

  .dashboard-count-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-2);
  }
  .dashboard-count-pill__dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
  }
  .dashboard-count-pill__dot--sage {
    background: var(--color-sage-500);
  }
  .dashboard-count-pill__dot--butter {
    background: var(--color-butter-500);
  }
  .dashboard-count-pill__dot--terra {
    background: var(--color-terra-500);
  }
  .dashboard-count-pill__dot--destructive {
    background: var(--color-destructive);
  }

  /* ── PMS dashboard: shared row list + empty state ──────────────────── */
  .dashboard-row-list > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .dashboard-empty {
    padding-block: var(--space-10);
    text-align: center;
  }
  .dashboard-empty__icon {
    width: 2rem;
    height: 2rem;
    margin: 0 auto var(--space-3);
    color: var(--color-ink-mute);
  }
  .dashboard-empty__text {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-15);
    color: var(--color-ink-mute);
  }

  /* ── PMS dashboard: out-of-service row ─────────────────────────────── */
  .dashboard-oos-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-3);
  }
  .dashboard-oos-row:first-child {
    padding-top: 0;
  }
  .dashboard-oos-row:last-child {
    padding-bottom: 0;
  }
  .dashboard-oos-row__main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
  }

  .dashboard-oos-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--color-destructive) 20%, transparent);
    background: var(--color-destructive-50);
    color: var(--color-destructive);
  }
  .dashboard-oos-row__icon svg {
    width: 1rem;
    height: 1rem;
  }
  .dashboard-oos-row__body {
    min-width: 0;
  }
  .dashboard-oos-row__name {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-oos-row__group {
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  /* ── PMS dashboard: booking row (check-in / stay-over / check-out) ─── */
  .dashboard-booking-row {
    padding-block: var(--space-3);
  }
  .dashboard-booking-row:first-child {
    padding-top: 0;
  }
  .dashboard-booking-row:last-child {
    padding-bottom: 0;
  }
  .dashboard-booking-row__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  @media (width >= 640px) {
    .dashboard-booking-row__inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .dashboard-booking-row__link {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: flex-start;
    gap: var(--space-3);
    text-decoration: none;
  }

  .dashboard-booking-row__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    border: 1px dashed var(--color-ink-25);
    background: var(--color-paper);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
  .dashboard-booking-row__body {
    flex: 1;
    min-width: 0;
  }
  .dashboard-booking-row__name-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .dashboard-booking-row__name {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .dashboard-booking-row__name-icon {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-ink-mute);
    opacity: 0;
    transition: opacity var(--dur-fast);
  }
  .dashboard-booking-row__link:hover .dashboard-booking-row__name-icon {
    opacity: 1;
  }
  .dashboard-booking-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-1);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
  .dashboard-booking-row__unit {
    font-weight: 500;
  }
  .dashboard-booking-row__group {
    color: var(--color-ink-mute);
  }
  .dashboard-booking-row__conf {
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .dashboard-booking-row__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding-left: 52px;
  }
  .dashboard-booking-row__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1-5);
  }

  @media (width >= 640px) {
    .dashboard-booking-row__actions {
      padding-left: 0;
    }
  }

  /* ── project card (projects index) ─────────────────────────────────── */
  .project-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-card);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
  }

  .project-card__edit {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 10;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    color: var(--color-ink-mute);
    opacity: 0;
    transition: all var(--dur-fast);
  }
  .project-card:hover .project-card__edit {
    opacity: 1;
  }
  .project-card__edit:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }
  .project-card__edit svg {
    width: 1rem;
    height: 1rem;
  }

  .project-card__link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 12rem;
    padding: var(--space-6);
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .project-card__link:hover {
    background: var(--color-paper-soft);
  }

  .project-card__name {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tightest);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: var(--space-8);
  }

  .project-card__desc {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .project-card__assignee {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-3-5);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
  }
  .project-card__assignee-icon {
    width: 0.875rem;
    height: 0.875rem;
    margin-right: var(--space-1-5);
    color: var(--color-ink-mute);
  }
  .project-card__counts {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--text-12-5);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
  .project-card__count {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .project-card__count-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-ink-mute);
  }
  .project-card__count-icon--done {
    color: var(--color-sage-500);
  }
  .project-card__bar {
    height: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    overflow: hidden;
  }
  .project-card__bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Rate plans — list row with an inline bookable toggle (not a full-link row)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .rate-plan-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .rate-plan-row {
      padding-inline: var(--space-7);
    }
  }
  .rate-plan-row:hover {
    background: var(--color-paper-soft);
  }
  .rate-plan-row:first-child {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
  }
  .rate-plan-row:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
  }
  .rate-plan-row__link {
    display: block;
    flex: 1;
    min-width: 0;
    text-decoration: none;
  }
  .rate-plan-row__name {
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rate-plan-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-mute);
  }
  .rate-plan-row__schedule {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .rate-plan-row__schedule svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .rate-plan-row__toggle {
    flex-shrink: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Rates concierge — AI chat surface (rates_chats / rates_messages)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .rates-chat {
    display: flex;
    flex-direction: column;
    margin: -1.5rem -1.5rem -5rem;
    min-height: calc(100dvh - 67px);
    background: radial-gradient(
      circle at 50% 0%,
      color-mix(in srgb, var(--color-terra-500) 4%, transparent),
      transparent 65%
    );
  }

  @media (width >= 640px) {
    .rates-chat {
      margin: -2.25rem -2.25rem -5rem;
    }
  }

  .rates-chat__bound {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
  }

  .rates-chat__header {
    position: sticky;
    top: 67px;
    z-index: 10;
    padding: var(--space-6) var(--space-6) var(--space-5);
    border-bottom: 1px dashed var(--color-ink-18);
    background: color-mix(in srgb, var(--color-paper) 72%, transparent);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }

  @media (width >= 640px) {
    .rates-chat__header {
      padding: var(--space-7) 2.25rem var(--space-5);
    }
  }
  .rates-chat__header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .rates-chat__header-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
  }
  .rates-chat__heading {
    min-width: 0;
  }

  .rates-chat__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border: 1.5px dashed color-mix(in srgb, var(--color-terra-500) 55%, transparent);
    border-radius: var(--radius-pill);
    background: var(--color-paper-card);
    color: var(--color-terra-500);
    box-shadow: inset 0 1px 0 var(--color-inset-highlight);
  }
  .rates-chat__avatar svg {
    width: 18px;
    height: 18px;
  }

  .rates-chat__avatar-status {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border: 1.5px solid var(--color-paper);
    border-radius: var(--radius-pill);
    background: var(--color-sage-500);
  }
  .rates-chat__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-3xl);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--color-ink);
  }
  .rates-chat__title em {
    font-style: italic;
    font-weight: 400;
  }
  .rates-chat__subtitle {
    margin-top: var(--space-1);
    font-size: var(--text-13-5);
    color: var(--color-ink-2);
  }
  .rates-chat__connection {
    margin-top: var(--space-2-5);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  .rates-chat__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .rates-chat__reset:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
    color: var(--color-ink);
  }
  .rates-chat__reset svg {
    width: 1rem;
    height: 1rem;
  }

  .rates-chat__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding: var(--space-6) var(--space-6) var(--space-4);
  }

  @media (width >= 640px) {
    .rates-chat__main {
      padding-inline: 2.25rem;
    }
  }

  .rates-chat__context {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-ink-10);
    border-left: 3px solid var(--color-sage-500);
    border-radius: var(--radius-input);
    background: var(--color-paper-card);
  }
  .rates-chat__context-label {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-sage-500);
  }
  .rates-chat__context-text {
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }
  .rates-chat__context-text em {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-ink);
  }

  .rates-chat__messages {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-7);
  }
  .rates-chat__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-16);
    text-align: center;
  }
  .rates-chat__empty svg {
    width: var(--space-7);
    height: var(--space-7);
    color: var(--color-terra-500);
  }
  .rates-chat__empty-text {
    max-width: 28rem;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }

  .rates-chat__composer-area {
    position: sticky;
    bottom: 0;
    padding-top: var(--space-6);
    padding-bottom: var(--space-4);
    background: linear-gradient(to top, var(--color-paper), var(--color-paper) 60%, transparent);
  }

  @media (width < 1024px) {
    .c-main:has(.mobile-button-bar) .rates-chat__messages:has(.rates-msg),
    .c-main:has(#bottom-button-bar) .rates-chat__messages:has(.rates-msg) {
      padding-bottom: var(--space-12);
    }

    .c-main:has(.mobile-button-bar) .rates-chat__composer-area,
    .c-main:has(#bottom-button-bar) .rates-chat__composer-area {
      bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }

    .c-main:has(.mobile-button-bar) .rates-chat:has(.rates-msg) .rates-chat__composer-area,
    .c-main:has(#bottom-button-bar) .rates-chat:has(.rates-msg) .rates-chat__composer-area {
      bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    }

    @media (width >= 640px) {
      .c-main:has(.mobile-button-bar) .rates-chat__messages:has(.rates-msg),
      .c-main:has(#bottom-button-bar) .rates-chat__messages:has(.rates-msg) {
        padding-bottom: var(--space-16);
      }

      .c-main:has(.mobile-button-bar) .rates-chat__composer-area,
      .c-main:has(#bottom-button-bar) .rates-chat__composer-area {
        bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
      }

      .c-main:has(.mobile-button-bar) .rates-chat:has(.rates-msg) .rates-chat__composer-area,
      .c-main:has(#bottom-button-bar) .rates-chat:has(.rates-msg) .rates-chat__composer-area {
        bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
      }
    }
  }
  .rates-chat__composer-wrap {
    margin-top: var(--space-3);
  }

  /* ── messages ──────────────────────────────────────────────────────── */
  .rates-msg {
    display: grid;
    align-items: start;
    gap: var(--space-3-5);
  }
  .rates-msg--assistant {
    grid-template-columns: 36px 1fr;
  }
  .rates-msg--user {
    grid-template-columns: 1fr 36px;
  }

  .rates-msg__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    margin-top: 2px;
    border-radius: var(--radius-pill);
  }
  .rates-msg__avatar--assistant {
    border: 1.5px dashed color-mix(in srgb, var(--color-terra-500) 50%, transparent);
    background: var(--color-paper-card);
    color: var(--color-terra-500);
  }
  .rates-msg__avatar--assistant svg {
    width: 18px;
    height: 18px;
  }
  .rates-msg__avatar--user {
    background: var(--color-sage-500);
    color: var(--color-paper);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-11-5);
  }
  .rates-msg__body {
    min-width: 0;
  }
  .rates-msg__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .rates-msg__meta--user {
    justify-content: flex-end;
  }
  .rates-msg__author {
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .rates-msg__content {
    color: var(--color-ink);
    max-width: none;
  }
  .rates-msg__attachment {
    margin-top: var(--space-4);
  }
  .rates-msg__bubble-row {
    display: flex;
    justify-content: flex-end;
  }

  .rates-msg__bubble {
    display: inline-block;
    max-width: 80%;
    padding: var(--space-2-5) var(--space-3-5);
    border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
    border-radius: 14px 14px 4px;
    background: var(--color-paper-card);
    color: var(--color-ink);
    font-size: var(--text-14-5);
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
  }
  .rates-msg__dots {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 1.25rem;
  }
  .rates-msg__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-ink-mute);
  }

  /* ── composer ──────────────────────────────────────────────────────── */
  .rates-composer {
    padding: var(--space-3) var(--space-3-5) var(--space-2-5);
    border: 1.5px solid var(--color-ink-18);
    border-radius: 1rem;
    background: var(--color-paper-card);
    transition:
      border-color var(--dur-fast) ease-out,
      box-shadow var(--dur-fast) ease-out;
  }
  .rates-composer:focus-within {
    border-color: var(--color-ink);
    box-shadow: var(--shadow-input-ring);
  }

  .rates-composer__textarea {
    width: 100%;
    padding: 0 0 var(--space-1);
    border: 0;
    background: transparent;
    resize: none;
    color: var(--color-ink);
    font-size: var(--text-15);
    line-height: 1.55;
  }
  .rates-composer__textarea::placeholder {
    color: var(--color-ink-mute);
  }
  .rates-composer__textarea:focus {
    outline: none;
    box-shadow: none;
  }
  .rates-composer__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: var(--space-2);
  }

  .rates-composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: var(--color-paper);
    cursor: pointer;
    transition: background var(--dur-fast);
  }
  .rates-composer__send:hover {
    background: var(--color-black);
  }
  .rates-composer__send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .rates-composer__send svg {
    width: 14px;
    height: 14px;
  }
  .rates-composer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .rates-composer__approval {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .rates-composer__approval-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-sage-500);
  }

  /* ── quick actions ─────────────────────────────────────────────────── */
  .rates-quick-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .rates-quick-actions__label {
    flex-shrink: 0;
    margin-right: var(--space-1);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  .rates-quick-actions__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid color-mix(in srgb, var(--color-ink) 14%, transparent);
    border-radius: var(--radius-pill);
    background: var(--color-paper-card);
    color: var(--color-ink-2);
    font-size: var(--text-12-5);
    cursor: pointer;
    transition:
      color var(--dur-fast),
      background var(--dur-fast),
      border-color var(--dur-fast);
  }
  .rates-quick-actions__btn:hover {
    border-color: var(--color-terra-500);
    background: color-mix(in srgb, var(--color-terra-500) 6%, transparent);
    color: var(--color-terra-500);
  }
  .rates-quick-actions__btn svg {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-ink-mute);
  }
  .rates-quick-actions__btn:hover svg {
    color: var(--color-terra-500);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Rate-change proposal cards (rate_change_proposals)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .rate-proposal {
    overflow: hidden;
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-card);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
  }
  .rate-proposal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3-5) 18px;
    border-bottom: 1.5px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .rate-proposal__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .rate-proposal__eyebrow-rule {
    width: 0.875rem;
    height: 1px;
    background: var(--color-terra-500);
  }
  .rate-proposal__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.375;
    letter-spacing: -0.01em;
    color: var(--color-ink);
  }
  .rate-proposal__title em {
    font-style: italic;
    font-weight: 400;
  }
  .rate-proposal__count {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-shrink: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-terra-500) 10%, transparent);
    color: var(--color-terra-500);
    font-size: var(--text-11-5);
  }
  .rate-proposal__count-dot {
    width: var(--space-1-5);
    height: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-terra-500);
  }
  .rate-proposal__heading {
    min-width: 0;
  }

  .rate-proposal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) 18px;
    border-top: 1.5px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
    background: var(--color-paper-soft);
  }
  .rate-proposal__note {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-12-5);
    color: var(--color-ink-mute);
  }
  .rate-proposal__actions {
    display: flex;
    gap: var(--space-2);
  }
  .rate-proposal__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .rate-proposal__status svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .rate-proposal__status--applied {
    color: var(--color-sage-500);
  }
  .rate-proposal__status--declined {
    color: var(--color-ink-mute);
  }
  .rate-proposal__failed {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-destructive);
  }
  .rate-proposal__failed svg {
    width: 1rem;
    height: 1rem;
    margin-top: 2px;
  }
  .rate-proposal__failed-title {
    font-weight: 500;
  }
  .rate-proposal__failed-help {
    margin-top: 2px;
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
  }

  .rate-proposal__ops > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 14%, transparent);
  }
  .rate-proposal__op {
    display: grid;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 18px;
    grid-template-columns: 1fr auto auto auto;
  }
  .rate-proposal__op--blockout {
    grid-template-columns: 1fr auto;
    padding: var(--space-3-5) var(--space-5);
  }
  .rate-proposal__op-main {
    min-width: 0;
  }
  .rate-proposal__op-label {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-ink);
  }
  .rate-proposal__op-date {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-label);
    color: var(--color-ink-mute);
  }
  .rate-proposal__op-old {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: color-mix(in srgb, var(--color-destructive) 70%, transparent);
    font-variant-numeric: tabular-nums;
  }
  .rate-proposal__op-sep {
    margin-inline: var(--space-1);
  }
  .rate-proposal__op-arrow {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-ink-mute);
  }
  .rate-proposal__op-removed {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    text-align: right;
  }
  .rate-proposal__op-new {
    text-align: right;
  }
  .rate-proposal__op-price {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-size: var(--text-22);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--color-terra-500);
    font-variant-numeric: tabular-nums;
  }
  .rate-proposal__op-price-sep {
    margin-inline: var(--space-1);
    color: var(--color-ink-mute);
    font-weight: 400;
  }
  .rate-proposal__op-delta {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.04em;
    text-align: right;
    color: var(--color-sage-500);
    font-variant-numeric: tabular-nums;
  }
  .rate-proposal__op-delta--neg {
    color: var(--color-destructive-700);
  }
  .rate-proposal__op-min {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
    text-align: right;
  }
  .rate-proposal__op-reason {
    margin-top: var(--space-1);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-12-5);
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rate-proposal__op-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .rate-proposal__op-action-dot {
    width: var(--space-1-5);
    height: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: currentcolor;
  }
  .rate-proposal__op-action--create {
    color: var(--color-destructive);
  }
  .rate-proposal__op-action--update {
    color: var(--color-terra-500);
  }
  .rate-proposal__op-action--delete {
    color: var(--color-sage-500);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Operations tabs bar (housekeeping / scheduling tab chrome)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .ops-tabs-bar {
    margin-bottom: var(--space-3);
  }

  @media (width >= 1024px) {
    .ops-tabs-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      row-gap: var(--space-2);
      margin-top: calc(-1 * var(--space-3));
    }
  }

  .ops-tabs-bar__actions {
    display: none;
  }

  @media (width >= 1024px) {
    .ops-tabs-bar__actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-left: auto;
      flex-shrink: 0;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Tasks — project task list rows, detail page, forms
 * NOTE (migration): hover-reveal display/opacity toggles (group/*, group-hover/*,
 * .hidden) stay Tailwind-owned during the migration — feature classes here carry
 * only layout/visual styling and deliberately avoid `display`/`opacity` on
 * hover-revealed elements so Tailwind's reveals keep winning.
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .task-row {
    display: flex;
    position: relative;
    max-width: 100%;
    cursor: pointer;
  }
  .task-row:hover {
    background: var(--color-paper-soft);
  }
  .task-row--completed {
    color: var(--color-ink-mute);
  }

  .task-row__handle {
    width: var(--space-5);
    flex-shrink: 0;
    padding-block: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
  }
  .task-row__handle svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }

  .task-cell {
    position: relative;
  }
  .task-cell--grow {
    flex: 1;
  }
  .task-cell--fixed {
    width: var(--space-48);
    flex-shrink: 0;
    text-align: left;
  }

  @media (width >= 1024px) {
    .task-cell--divided {
      border-right: 1px dashed var(--color-ink-18);
    }
  }

  .task-cell__main {
    display: flex;
    align-items: center;
  }
  .task-cell__check {
    padding: var(--space-3);
    padding-right: var(--space-1);
  }

  .task-complete-form {
    display: flex;
  }
  .task-complete-toggle {
    position: relative;
    cursor: pointer;
    color: var(--color-ink-mute);
  }
  .task-complete-toggle--done {
    color: var(--color-sage-500);
  }
  .task-complete-toggle__check-hover {
    color: var(--color-sage-500);
  }
  .task-complete-toggle svg {
    width: var(--space-6);
    height: var(--space-6);
  }

  .task-link {
    position: relative;
    flex: 1;
    width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    color: var(--color-ink);
    text-decoration: none;
  }

  @media (width >= 1024px) {
    .task-link {
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .task-link__due-mobile {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .task-link__placeholder {
    width: var(--space-6);
    height: var(--space-6);
  }
  .task-link__overlay {
    position: absolute;
    right: 0;
    top: 0;
    padding: var(--space-3);
    padding-left: var(--space-5);
    gap: var(--space-1);
    align-items: center;
    justify-content: flex-end;
    line-height: 1.5rem;
    text-align: right;
    font-size: var(--text-xs);
    color: var(--color-ink-2);
    background: var(--color-paper-soft);
  }
  .task-link__overlay svg {
    width: var(--space-3);
    height: var(--space-3);
  }

  /* dashed-circle "add due date / assign" placeholder, revealed on row hover */
  .task-cell__add-affordance {
    width: var(--space-6);
    height: var(--space-6);
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: center;
  }
  .task-cell__add-affordance svg {
    width: var(--space-3);
    height: var(--space-3);
    color: var(--color-ink-mute);
  }

  .task-due-cell {
    display: flex;
    align-items: center;
    padding: var(--space-3);
  }
  .task-due-cell__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .task-due-cell__remove {
    flex: 1;
    justify-content: flex-end;
    align-items: center;
  }

  .task-icon-btn {
    border-radius: var(--radius-sm);
    color: var(--color-ink-mute);
    cursor: pointer;
  }
  .task-icon-btn:hover {
    color: var(--color-ink);
  }
  .task-icon-btn svg {
    width: var(--space-5);
    height: var(--space-5);
  }

  .task-assign-cell__display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }
  .task-assign-cell__empty {
    display: flex;
    align-items: center;
    padding: var(--space-3);
  }

  .task-assign-field {
    flex: 1;
  }
  .task-assign-field__display {
    cursor: pointer;
  }
  .task-assign-field__placeholder {
    display: flex;
    padding-top: var(--space-1);
    margin-bottom: calc(-1 * var(--space-1));
  }
  .task-assign-field__circle {
    width: var(--space-5);
    height: var(--space-5);
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .task-assign-field__circle svg {
    width: var(--space-2);
    height: var(--space-2);
    color: var(--color-ink-mute);
  }

  /* assignment autocomplete dropdown (input component) */
  .task-assign-input__list {
    position: absolute;
    width: 100%;
    margin-left: var(--space-1);
    transform-origin: top left;
    z-index: var(--z-dropdown);
  }
  .task-assign-input__menu {
    margin-top: var(--space-1);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
    border: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent);
    border-radius: 10px;
  }
  .task-assign-input__loading {
    padding: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .task-assign-input__loading.hidden {
    display: none;
  }
  .task-assign-input__loading svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }
  .task-assign-input__unassign {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    padding: var(--space-3);
    align-items: center;
    z-index: var(--z-dropdown);
  }

  /* Task detail page */
  .task-show {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 1280px) {
    .task-show {
      grid-template-columns: 1.4fr 0.85fr;
    }
  }
  .task-show__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }
  .task-show__col--side {
    order: -1;
  }

  @media (width >= 1280px) {
    .task-show__col--side {
      order: 0;
    }
  }

  .task-description {
    padding: var(--space-4) var(--space-4);
    color: var(--color-ink);
    line-height: 1.625;
  }

  @media (width >= 640px) {
    .task-description {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }

  .task-details {
    padding: var(--space-4) var(--space-4) var(--space-4);
  }

  @media (width >= 640px) {
    .task-details {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }
  .task-details__list > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }

  .task-detail-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2-5);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
  }
  .task-detail-row--top {
    align-items: start;
  }
  .task-detail-row__icon {
    display: inline-flex;
    color: var(--color-ink-mute);
  }
  .task-detail-row--top .task-detail-row__icon {
    margin-top: var(--space-0-5);
  }
  .task-detail-row__icon svg {
    width: var(--space-4);
    height: var(--space-4);
  }
  .task-detail-row__person {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink);
  }
  .task-detail-row__meta {
    margin-top: var(--space-1);
    font-size: var(--text-12-5);
    color: var(--color-ink-mute);
  }
  .task-detail-row__unassigned {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }

  .task-status-toggle {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: var(--space-3);
    width: calc(100% + 1rem);
    margin-inline: calc(-1 * var(--space-2));
    padding: var(--space-2-5) var(--space-2);
    text-align: left;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition:
      color var(--dur-fast),
      background var(--dur-fast);
  }
  .task-status-toggle:hover {
    color: var(--color-ink);
    background: var(--color-paper-soft);
  }
  .task-status-toggle__icon {
    display: inline-flex;
    margin-top: var(--space-0-5);
  }
  .task-status-toggle__icon svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* Task forms */
  .task-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
  .task-form__field-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
    font-size: var(--text-13);
  }
  .task-form__textarea {
    min-height: 12.5rem;
  }
  .task-form__row {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-6);
  }

  @media (width >= 640px) {
    .task-form__row {
      grid-template-columns: 1fr 1fr;
    }
  }
  .task-form__repeat-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-ink-2);
    font-size: var(--text-14-5);
  }

  .task-due-text {
    text-transform: capitalize;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .task-due-text--soon {
    color: var(--color-terra-500);
  }
  .task-due-text--overdue {
    color: var(--color-destructive);
  }
  .task-due-text svg {
    width: var(--space-3);
    height: var(--space-3);
    color: var(--color-ink-mute);
  }

  .task-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    color: var(--color-ink-2);
    border-bottom: 1px dashed var(--color-ink-18);
  }

  @media (width >= 640px) {
    .task-filters {
      padding-inline: var(--space-6);
    }
  }

  @media (width >= 768px) {
    .task-filters {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .task-filters__summary {
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .task-filters__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Housekeeping — detail header (show / inspection / history), action bar, checklist
 * NOTE (migration): hover-reveal toggles (group, group-hover, .hidden, responsive
 * sm:/md:/lg: display) stay Tailwind-owned; feature classes carry static styling.
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .housekeeping-detail {
    position: relative;
    margin-bottom: var(--space-6);
  }

  @media (width >= 640px) {
    .housekeeping-detail--has-photos {
      padding-right: var(--space-24);
    }
  }
  .housekeeping-detail__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1;
    letter-spacing: var(--tracking-tightest);
    margin-bottom: var(--space-2);
    font-size: var(--text-38);
  }
  .housekeeping-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-1);
  }
  .housekeeping-detail__meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    color: var(--color-ink-2);
    font-size: var(--text-13);
    line-height: 1.4;
  }
  .housekeeping-detail__meta-item svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-ink-mute);
  }
  .housekeeping-detail__clean-type {
    font-family: var(--font-mono);
    color: var(--color-ink-2);
    font-size: var(--text-13);
    line-height: 1.4;
  }
  .housekeeping-detail__delayed {
    color: var(--color-butter-700);
    margin-left: var(--space-1);
  }
  .housekeeping-detail__photos {
    position: absolute;
    top: 0;
    right: 0;
  }
  .housekeeping-detail__photo {
    height: var(--space-16);
    width: auto;
    border-radius: 10px;
  }

  .housekeeping-alert {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1.5px dashed color-mix(in srgb, var(--color-destructive) 35%, transparent);
    background: color-mix(in srgb, var(--color-destructive) 7%, transparent);
    padding: var(--space-4) var(--space-5);
  }

  @media (width >= 768px) {
    .housekeeping-alert {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .housekeeping-alert__label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 500;
    color: var(--color-ink);
    margin-bottom: var(--space-3);
  }

  @media (width >= 768px) {
    .housekeeping-alert__label {
      margin-bottom: 0;
    }
  }
  .housekeeping-alert__label svg {
    width: var(--space-5);
    height: var(--space-5);
    fill: currentcolor;
    color: var(--color-destructive);
  }

  /* Fixed bottom action bar (mobile) → inline segmented bar (desktop) */
  .housekeeping-action-bar {
    position: fixed;
    bottom: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 10;
    display: flex;
    align-items: stretch;
    font-size: var(--text-sm);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-paper);
    overflow: hidden;
  }

  @media (width >= 640px) {
    .housekeeping-action-bar {
      font-size: var(--text-base);
    }
  }

  @supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
      .housekeeping-action-bar {
        padding-bottom: 2rem;
      }

      @media (width >= 1024px) {
        .housekeeping-action-bar {
          padding-bottom: 0;
        }
      }
    }
  }

  @media (width >= 1024px) {
    .housekeeping-action-bar {
      position: relative;
      inset: auto;
      z-index: auto;
    }
  }

  .housekeeping-show-body {
    padding-bottom: var(--space-20);
  }

  @media (width >= 1024px) {
    .housekeeping-show-body {
      padding-bottom: 0;
    }
    .housekeeping-show-body > * + * {
      margin-top: var(--space-6);
    }
  }

  .housekeeping-action-bar__cell {
    flex: 1;
    display: flex;
    position: relative;
  }
  .housekeeping-action-bar__cell--divided {
    border-right: 1px solid var(--color-ink-10);
  }
  .housekeeping-action-bar__cell--hover:hover {
    background: var(--color-paper-soft);
  }
  .housekeeping-action-bar__btn {
    width: 100%;
    height: 100%;
    border-radius: 0;
    color: var(--color-ink-2);
  }
  .housekeeping-action-bar__btn--action {
    width: 100%;
    border-radius: 0;
  }
  .housekeeping-action-bar__btn-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  @media (width >= 1024px) {
    .housekeeping-action-bar__btn-inner {
      flex-direction: row;
    }
  }
  .housekeeping-action-bar__btn-inner svg {
    width: var(--space-4);
    height: var(--space-4);
    fill: currentcolor;
  }

  @media (width >= 1024px) {
    .housekeeping-action-bar__btn-inner svg {
      margin-right: var(--space-3);
    }
  }

  /* Checklist card (shared show / inspection / history card chrome) */
  .housekeeping-checklist__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px dashed var(--color-ink-18);
  }

  @media (width >= 640px) {
    .housekeeping-checklist__head {
      padding-inline: var(--space-6);
    }
  }
  .housekeeping-checklist__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-15);
  }

  @media (width >= 640px) {
    .housekeeping-checklist__title {
      font-size: var(--text-17);
    }
  }
  .housekeeping-checklist__progress {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-11);
  }
  .housekeeping-checklist__cols {
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px dashed var(--color-ink-18);
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-2xs);
  }

  @media (width >= 640px) {
    .housekeeping-checklist__cols {
      padding-inline: var(--space-6);
    }
  }
  .housekeeping-checklist__col--item {
    flex: 1;
  }
  .housekeeping-checklist__col--hk {
    width: var(--space-32);
    text-align: center;
  }
  .housekeeping-checklist__col--inspect {
    text-align: center;
  }
  .housekeeping-checklist__col--inspect-narrow {
    width: var(--space-32);
  }
  .housekeeping-checklist__col--inspect-wide {
    width: 20rem;
  }
  .housekeeping-checklist__items > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }

  /* Checklist item row (checklist_item_component) */
  .housekeeping-checklist-item {
    display: block;
    width: 100%;
    padding-block: var(--space-4);
    text-align: left;
    cursor: pointer;
  }
  .housekeeping-checklist-item:hover,
  .housekeeping-checklist-item:active {
    background: var(--color-paper-soft);
  }
  .housekeeping-checklist-item__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-4);
  }
  .housekeeping-checklist-item__check--offset {
    margin-top: var(--space-0-5);
  }
  .housekeeping-checklist-item__check svg {
    width: var(--space-5);
    height: var(--space-5);
  }
  .housekeeping-checklist-item__icon--done {
    color: var(--color-primary);
  }
  .housekeeping-checklist-item__icon--outline {
    color: var(--color-ink-mute);
  }
  .housekeeping-checklist-item__icon--hover {
    color: var(--color-primary);
  }
  .task-due-text__repeat {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-ink-mute);
  }
  .housekeeping-checklist-item__body > * + * {
    margin-top: var(--space-1);
  }
  .housekeeping-checklist-item__desc {
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }

  /* Inspection checklist item row (inspection_checklist_item_component) */
  .housekeeping-inspection-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .housekeeping-inspection-item {
      padding-inline: var(--space-6);
    }
  }

  @media (width >= 768px) {
    .housekeeping-inspection-item {
      flex-direction: row;
      align-items: center;
      gap: var(--space-4);
    }
  }
  .housekeeping-inspection-item:hover {
    background: var(--color-paper-soft);
  }
  .housekeeping-inspection-item__main {
    flex: 1;
    min-width: 0;
  }
  .housekeeping-inspection-item__name {
    color: var(--color-ink);
    font-size: var(--text-sm);
    line-height: 1.25rem;
  }
  .housekeeping-inspection-item__desc {
    color: var(--color-ink-mute);
    font-size: var(--text-13);
    line-height: 1.4;
    margin-top: var(--space-0-5);
  }
  .housekeeping-inspection-item__col {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  @media (width >= 768px) {
    .housekeeping-inspection-item__col {
      width: var(--space-32);
      justify-content: center;
    }
  }

  @media (width >= 768px) {
    .housekeeping-inspection-item__col--wide {
      width: 20rem;
    }
  }
  .housekeeping-inspection-item__col-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-2xs);
  }
  .housekeeping-inspection-item__inspect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  @media (width >= 768px) {
    .housekeeping-inspection-item__inspect {
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }

  /* Notes popover / modal forms */
  .housekeeping-notes-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-4) var(--space-4) 0;
  }

  @media (width >= 640px) {
    .housekeeping-notes-form {
      padding-inline: var(--space-6);
    }
  }
  .housekeeping-notes-form__textarea {
    flex: 1;
    overflow-y: scroll;
  }
  .housekeeping-notes-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }
  .housekeeping-notes-readonly {
    padding: var(--space-4) var(--space-4);
  }

  @media (width >= 640px) {
    .housekeeping-notes-readonly {
      padding-inline: var(--space-6);
    }
  }

  .housekeeping-notes-modal-form {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 32rem;
  }
  .housekeeping-notes-modal-form__textarea {
    min-height: var(--space-32);
    margin-bottom: var(--space-4);
  }
  .housekeeping-notes-modal-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-block: var(--space-4);
  }
  .housekeeping-notes-modal__title {
    font-weight: 700;
    font-size: var(--text-lg);
    margin-bottom: var(--space-4);
  }

  /* Queue + manager-list section heads, row lists, finished toggle */
  .housekeeping-queue {
    padding-bottom: var(--space-20);
  }
  .housekeeping-queue > * + * {
    margin-top: var(--space-6);
  }

  @media (width >= 1024px) {
    .housekeeping-queue {
      padding-bottom: 0;
    }
  }

  .housekeeping-section-head {
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px dashed var(--color-ink-18);
  }

  @media (width >= 640px) {
    .housekeeping-section-head {
      padding-inline: var(--space-6);
    }
  }
  .housekeeping-section-head--nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .housekeeping-section-head__date-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .housekeeping-section-head__date {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    text-align: center;
    font-size: var(--text-lg);
  }

  @media (width >= 640px) {
    .housekeeping-section-head__date {
      font-size: var(--text-22);
    }
  }
  .housekeeping-section-head__delayed {
    display: flex;
    align-items: center;
    color: var(--color-ink-mute);
    font-size: var(--text-13);
    margin-top: var(--space-1);
  }
  .housekeeping-section-head__delayed svg {
    width: var(--space-3);
    height: var(--space-3);
    margin-right: var(--space-1);
  }

  .housekeeping-list > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }

  .housekeeping-finished-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--space-4) var(--space-4);
    border-top: 1px dashed var(--color-ink-18);
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .housekeeping-finished-toggle {
      padding-inline: var(--space-6);
    }
  }
  .housekeeping-finished-toggle:hover {
    background: var(--color-paper-soft);
  }
  .housekeeping-finished-toggle svg {
    width: var(--space-4);
    height: var(--space-4);
    margin-right: var(--space-2);
    color: var(--color-ink-mute);
  }

  .housekeeping-manager-body {
    padding-bottom: var(--space-32);
  }

  @media (width >= 1024px) {
    .housekeeping-manager-body {
      padding-bottom: var(--space-16);
    }
  }

  /* Queue row (row_component) */
  .housekeeping-row {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-inline: var(--space-4);
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .housekeeping-row {
      padding-inline: var(--space-6);
    }
  }

  @media (width >= 425px) {
    .housekeeping-row {
      flex-direction: row;
      align-items: center;
    }
  }
  .housekeeping-row:hover {
    background: var(--color-paper-soft);
  }
  .housekeeping-row__link {
    padding-block: var(--space-4);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
  }
  .housekeeping-row__chevron {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: var(--space-6);
    padding-right: var(--space-4);
  }

  @media (width >= 640px) {
    .housekeeping-row__chevron {
      padding-right: var(--space-6);
    }
  }
  .housekeeping-row__chevron svg {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .housekeeping-row__body {
    flex: 1;
    padding-right: var(--space-4);
  }
  .housekeeping-row__body > * + * {
    margin-top: var(--space-1);
  }
  .housekeeping-row__title-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .housekeeping-row__title {
    font-weight: 500;
    color: var(--color-ink);
  }
  .housekeeping-row__title-line svg {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .housekeeping-row__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .housekeeping-row__clean-type {
    color: var(--color-ink-mute);
  }
  .housekeeping-row__status {
    flex-shrink: 0;
  }
  .housekeeping-row__status-note {
    font-size: var(--text-sm);
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-2);
  }
  .housekeeping-row__status-meta {
    font-size: var(--text-xs);
    text-align: right;
    margin-right: var(--space-6);
    color: var(--color-ink-2);
  }

  @media (width >= 640px) {
    .housekeeping-row__status-meta {
      margin-right: var(--space-8);
      display: flex;
      gap: var(--space-1);
    }
  }
  .housekeeping-row__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
  }

  @media (width >= 425px) {
    .housekeeping-row__actions {
      padding-bottom: 0;
    }
  }

  /* Manager row (manager_row_component) */
  .housekeeping-manager-row {
    position: relative;
    display: flex;
    flex-direction: column;
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .housekeeping-manager-row {
      flex-direction: row;
      align-items: center;
    }
  }
  .housekeeping-manager-row:hover {
    background: var(--color-paper-soft);
  }
  .housekeeping-manager-row__accent {
    width: var(--space-2);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .housekeeping-manager-row__accent--failed {
    background: var(--color-destructive);
  }
  .housekeeping-manager-row__accent--passed {
    background: var(--color-sage-500);
  }
  .housekeeping-manager-row__main {
    display: flex;
    align-items: center;
    flex: 1;
  }
  .housekeeping-manager-row__avatar {
    padding-block: var(--space-4);
    padding-left: var(--space-4);
    padding-right: var(--space-1);
  }

  @media (width >= 640px) {
    .housekeeping-manager-row__avatar {
      padding-left: var(--space-2);
    }
  }
  .housekeeping-manager-row__assign-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    outline: none;
    cursor: pointer;
  }
  .housekeeping-manager-row__assign-btn .c-avatar__empty {
    background: var(--color-paper-2);
    border-color: var(--color-ink-25);
    color: var(--color-ink-2);
  }
  .housekeeping-manager-row__assign-btn:hover .c-avatar__empty,
  .housekeeping-manager-row__assign-btn:focus-visible .c-avatar__empty {
    border-color: var(--color-ink-30);
    color: var(--color-ink);
  }
  .housekeeping-manager-row__link {
    flex: 1;
    padding: var(--space-4) var(--space-4);
    display: flex;
    flex-direction: column;
    text-decoration: none;
  }

  @media (width >= 640px) {
    .housekeeping-manager-row__link {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .housekeeping-manager-row__chevron {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: var(--space-4);
    padding-left: var(--space-2);
  }
  .housekeeping-manager-row__title {
    font-weight: 500;
    color: var(--color-ink);
  }
  .housekeeping-manager-row__meta {
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .housekeeping-manager-row__clean-type {
    color: var(--color-ink-mute);
  }
  .housekeeping-manager-row__sep {
    margin-right: var(--space-2);
  }
  .housekeeping-manager-row__status {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    margin-right: var(--space-8);
    flex-shrink: 0;
    color: var(--color-ink-2);
  }
  .housekeeping-manager-row__status-note {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-2);
  }

  .housekeeping-manager-row__progress-wrap {
    padding-top: var(--space-2);
    padding-right: var(--space-8);
  }
  .housekeeping-manager-row__progress-wrap--ready {
    padding-right: var(--space-4);
  }

  @media (width >= 1024px) {
    .housekeeping-manager-row__progress-wrap {
      padding-top: 0;
    }
  }
  .housekeeping-manager-row__progress {
    position: relative;
    background: var(--color-paper-2);
    border-radius: var(--radius-pill);
    overflow: hidden;
    height: var(--space-6);
    width: var(--space-48);
  }
  .housekeeping-manager-row__progress-fill {
    position: relative;
    overflow: hidden;
    background: var(--color-sage-500);
    height: 100%;
    z-index: 20;
  }
  .housekeeping-manager-row__progress-label {
    position: absolute;
    inset: 0;
    width: var(--space-48);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-xs);
    padding-inline: var(--space-2);
    color: var(--color-paper);
  }
  .housekeeping-manager-row__progress-label--under {
    z-index: 10;
    color: var(--color-ink-2);
  }
  .housekeeping-manager-row__progress-timer {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .housekeeping-manager-row__progress-timer svg {
    width: var(--space-3);
    height: var(--space-3);
    display: inline-block;
  }

  .housekeeping-manager-row__actions {
    padding-bottom: var(--space-4);
    margin-left: var(--space-2);
    padding-left: var(--space-16);
  }

  @media (width >= 640px) {
    .housekeeping-manager-row__actions {
      padding-left: var(--space-1);
      padding-top: var(--space-4);
    }
  }

  @media (width >= 1280px) {
    .housekeeping-manager-row__actions {
      padding-left: var(--space-2);
    }
  }
  .housekeeping-manager-row__actions:last-child {
    padding-right: var(--space-4);
  }

  @media (width >= 640px) {
    .housekeeping-manager-row__actions:last-child {
      padding-right: var(--space-10);
    }
  }

  @media (width >= 1024px) {
    .housekeeping-manager-row__actions:last-child {
      padding-right: var(--space-8);
    }
  }
  .housekeeping-manager-row__actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* Bulk action bar (manager list) */
  .housekeeping-bulk-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: var(--space-16);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .housekeeping-bulk-bar.hidden {
    display: none;
  }

  @media (width >= 1024px) {
    .housekeeping-bulk-bar {
      padding-bottom: var(--space-4);
      padding-left: var(--space-72);
    }
  }
  .housekeeping-bulk-bar__pill {
    background: var(--color-ink);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-paper);
    display: flex;
    align-items: center;
    font-size: var(--text-sm);
    padding: var(--space-2);
  }

  @media (width >= 1024px) {
    .housekeeping-bulk-bar__pill {
      font-size: var(--text-base);
    }
  }
  .housekeeping-bulk-bar__group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-right: var(--space-3);
    margin-right: var(--space-2);
    border-right: 1px solid color-mix(in srgb, var(--color-paper) 20%, transparent);
  }
  .housekeeping-bulk-bar__close {
    border-radius: var(--radius-pill);
    cursor: pointer;
    padding: var(--space-2);
  }
  .housekeeping-bulk-bar__close:hover {
    background: color-mix(in srgb, var(--color-paper) 10%, transparent);
  }
  .housekeeping-bulk-bar__close svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-paper);
  }
  .housekeeping-bulk-bar__count {
    color: var(--color-paper);
    padding-right: var(--space-2);
  }
  .housekeeping-bulk-bar__assign {
    color: var(--color-paper);
    display: flex;
    align-items: center;
    border-radius: var(--radius-pill);
    height: 100%;
    cursor: pointer;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-4);
  }
  .housekeeping-bulk-bar__assign:hover {
    background: color-mix(in srgb, var(--color-paper) 10%, transparent);
  }
  .housekeeping-bulk-bar__assign svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* Status log row (status_log_component) */
  .housekeeping-status-log {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  @media (width >= 640px) {
    .housekeeping-status-log {
      padding-inline: var(--space-6);
    }
  }

  @media (width >= 768px) {
    .housekeeping-status-log {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .housekeeping-status-log__action {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .housekeeping-status-log__time {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-11);
  }

  /* New stay-over housekeeping form (legacy non-cozy page, reproduced via tokens) */
  .housekeeping-new {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-subtle);
    overflow: hidden;
    max-width: 42rem;
  }
  .housekeeping-new__head {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-paper-2);
  }
  .housekeeping-new__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-ink-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .housekeeping-new__title svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }
  .housekeeping-new__body {
    padding: var(--space-6);
  }
  .housekeeping-new__body > * + * {
    margin-top: var(--space-6);
  }
  .housekeeping-new__label {
    font-weight: 700;
  }
  .housekeeping-new__value {
    color: var(--color-ink-mute);
  }
  .housekeeping-new__footer {
    background: var(--color-paper);
    padding: var(--space-6);
    border-top: 1px solid var(--color-paper-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* Bulk-assign popover (assignment_form) */
  .housekeeping-assign__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
    font-size: var(--text-xl);
  }
  .housekeeping-assign {
    position: relative;
    width: 100vw;
    max-width: 24rem;
    margin-inline: calc(-1 * var(--space-4));
  }
  .housekeeping-assign__list {
    max-height: 24rem;
    overflow-y: auto;
    padding-inline: var(--space-2);
  }
  .housekeeping-assign__list > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .housekeeping-assign__option {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    text-align: left;
    color: var(--color-ink);
    transition: background var(--dur-fast);
    padding: var(--space-2-5) var(--space-2);
  }
  .housekeeping-assign__option:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .housekeeping-assign__option:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .housekeeping-assign__option:hover {
    background: var(--color-paper-2);
  }
  .housekeeping-assign__option-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .housekeeping-assign__unassign-icon {
    border-radius: var(--radius-pill);
    border: 1px dashed var(--color-ink-25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-6);
    height: var(--space-6);
    color: var(--color-ink-mute);
  }
  .housekeeping-assign__unassign-icon svg {
    width: var(--space-3);
    height: var(--space-3);
  }
  .housekeeping-assign__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-paper) 80%, transparent);
  }
  .housekeeping-assign__loading.hidden {
    display: none;
  }
  .housekeeping-assign__loading svg {
    width: var(--space-6);
    height: var(--space-6);
    color: var(--color-ink-mute);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Scheduling — time entries, time off requests, shifts (lists, detail, forms)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .scheduling-row {
    display: block;
    padding: var(--space-4) var(--space-4);
    text-decoration: none;
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .scheduling-row {
      padding-inline: var(--space-6);
    }
  }
  .scheduling-row:hover {
    background: var(--color-paper-soft);
  }
  .scheduling-row__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .scheduling-row__inner--between {
    justify-content: space-between;
    gap: var(--space-3);
  }
  .scheduling-row__main {
    min-width: 0;
    flex: 1;
  }
  .scheduling-row__title-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .scheduling-row__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
  }

  @media (width >= 768px) {
    .scheduling-row__chips {
      width: auto;
      margin-left: auto;
      justify-content: flex-end;
    }
  }
  .scheduling-row__title {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scheduling-row__meta {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .scheduling-row__meta--flex {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .scheduling-row__meta--truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scheduling-row__times {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
  }

  /* time_entries filter/search bar */
  .time-entries-search {
    display: flex;
    align-items: stretch;
    border-bottom: 1px dashed var(--color-ink-18);
  }
  .time-entries-search__icon {
    padding-left: var(--space-4);
    display: flex;
    align-items: center;
  }

  @media (width >= 640px) {
    .time-entries-search__icon {
      padding-left: var(--space-6);
    }
  }
  .time-entries-search__icon svg {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .time-entries-search__select {
    width: auto;
    color: var(--color-ink);
    padding-right: var(--space-6);
    padding-left: var(--space-3);
    flex-shrink: 0;
    cursor: pointer;
  }
  .time-entries-search__date-wrap {
    position: relative;
    flex: 1;
  }
  .time-entries-search__date {
    padding: var(--space-4) var(--space-3);
  }

  @media (width >= 640px) {
    .time-entries-search__date {
      padding-block: var(--space-6);
    }
  }
  .time-entries-search__clear {
    display: flex;
    align-items: center;
    padding-right: var(--space-4);
  }

  @media (width >= 640px) {
    .time-entries-search__clear {
      padding-right: var(--space-6);
    }
  }
  .time-entries-search__clear-btn {
    color: var(--color-ink-mute);
    padding: var(--space-1);
    border-radius: var(--radius-pill);
  }
  .time-entries-search__clear-btn:hover {
    background: var(--color-paper-soft);
    color: var(--color-ink);
  }
  .time-entries-search__clear-btn svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* time entry detail — header chips + scheduled vs actual comparison */
  .time-entry-subtitle {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .time-entry-detail {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }
  .time-entry-compare {
    padding: var(--space-2) var(--space-4) var(--space-4);
  }

  @media (width >= 640px) {
    .time-entry-compare {
      padding-inline: var(--space-6);
    }
  }
  .time-entry-compare__row {
    display: grid;
    grid-template-columns: minmax(5rem, 9rem) 1fr 1fr;
    gap: var(--space-3);
    align-items: baseline;
    padding-block: var(--space-3);
  }
  .time-entry-compare__row + .time-entry-compare__row {
    border-top: 1px dashed var(--color-ink-18);
  }
  .time-entry-compare__row--head {
    padding-top: 0;
  }
  .time-entry-compare__row--pair {
    grid-template-columns: minmax(5rem, 9rem) 1fr;
  }
  .time-entry-compare__column-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .time-entry-compare__label {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .time-entry-compare__value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-weight: 500;
    color: var(--color-ink);
  }
  .time-entry-compare__value--muted {
    font-weight: 400;
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .time-entry-compare__deviation {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-destructive-700);
  }
  .time-entry-compare__footer {
    margin-top: var(--space-1);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-ink-18);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .time-entry-compare__footer--flagged {
    color: var(--color-destructive-700);
  }
  .time-entry-compare__callout {
    margin-top: var(--space-3);
  }
  .time-entry-notes {
    padding: var(--space-2) var(--space-4) var(--space-4);
  }

  @media (width >= 640px) {
    .time-entry-notes {
      padding-inline: var(--space-6);
    }
  }
  .time-entry-notes__section {
    padding-block: var(--space-3);
  }
  .time-entry-notes__section + .time-entry-notes__section {
    border-top: 1px dashed var(--color-ink-18);
  }
  .time-entry-notes__label {
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .time-entry-notes__text {
    color: var(--color-ink);
  }

  /* time_off request detail */
  .time-off-detail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px dashed var(--color-ink-18);
  }
  .time-off-detail__head-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .time-off-detail__head-title svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }
  .time-off-detail__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-22);
  }
  .time-off-detail__body {
    padding: var(--space-4) var(--space-4);
  }

  @media (width >= 640px) {
    .time-off-detail__body {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }
  .time-off-detail__rows > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .time-off-detail-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-3);
  }
  .time-off-detail-row--block {
    padding-block: var(--space-3);
  }
  .time-off-detail-row__label {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .time-off-detail-row__label--block {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    margin-bottom: var(--space-1);
  }
  .time-off-detail-row__value {
    color: var(--color-ink);
  }

  .time-off-conflict {
    margin-top: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px dashed color-mix(in srgb, var(--color-terra-500) 40%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 7%, transparent);
    padding: var(--space-4);
  }
  .time-off-conflict__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .time-off-conflict__inner > svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-terra-500);
    flex-shrink: 0;
    margin-top: var(--space-0-5);
  }
  .time-off-conflict__title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-terra-700);
  }
  .time-off-conflict__list {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-terra-700);
    list-style: disc;
    list-style-position: inside;
  }

  .time-off-review {
    margin-top: var(--space-6);
  }
  .scheduling-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
  .scheduling-field__label {
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
  }

  .scheduling-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  @media (width >= 640px) {
    .scheduling-form-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* time_off quick form (alternate) */
  .time-off-quick {
    max-width: 36rem;
    margin-top: var(--space-4);
  }
  .time-off-quick__fields > * + * {
    margin-top: var(--space-5);
  }
  .time-off-quick__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-8);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Checklist items (settings list + reorderable rows + form)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .checklist-items-list > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .checklist-item-row {
    display: flex;
    align-items: center;
    user-select: none;
    transition: background var(--dur-fast);
  }
  .checklist-item-row:hover {
    background: var(--color-paper-soft);
  }
  .checklist-item-row:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
  }
  .checklist-item-row__handle {
    padding-left: var(--space-4);
    padding-right: var(--space-3);
    padding-block: var(--space-4);
    cursor: move;
    flex-shrink: 0;
  }

  @media (width >= 640px) {
    .checklist-item-row__handle {
      padding-left: var(--space-6);
    }
  }
  .checklist-item-row__handle svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }
  .checklist-item-row__link {
    flex: 1;
    min-width: 0;
    padding-right: var(--space-4);
    padding-block: var(--space-4);
    text-decoration: none;
  }

  @media (width >= 640px) {
    .checklist-item-row__link {
      padding-right: var(--space-6);
    }
  }
  .checklist-item-row__title {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .checklist-item-row__desc {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .checklist-item-row__units {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  .checklist-item-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
  .checklist-item-form__label {
    display: flex;
    align-items: center;
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
  }
  .checklist-item-form__textarea {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-ink);
    resize: vertical;
    font-size: var(--text-14-5);
    min-height: 110px;
    line-height: 1.55;
  }
  .checklist-item-form__textarea::placeholder {
    color: var(--color-ink-mute);
  }
  .checklist-item-form__textarea:focus {
    outline: none;
    box-shadow: none;
  }
  .checklist-item-form__units-section > * + * {
    margin-top: var(--space-5);
  }
  .checklist-item-form__units-grid {
    columns: 1;
    font-size: var(--text-sm);
  }

  @media (width >= 768px) {
    .checklist-item-form__units-grid {
      columns: 2;
    }
  }
  .checklist-item-form__units-grid > * + * {
    margin-top: var(--space-2);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Comments (thread rows, reply form, empty + loading states)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .comment {
    display: flex;
    flex-direction: row;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px dashed var(--color-ink-18);
  }

  @media (width >= 768px) {
    .comment {
      padding-block: var(--space-6);
    }
  }
  .comment:last-child {
    border-bottom: 0;
  }
  .comment__body {
    flex: 1;
    min-width: 0;
  }
  .comment__body > * + * {
    margin-top: var(--space-1);
  }
  .comment__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .comment__author {
    font-weight: 700;
    color: var(--color-ink);
  }
  .comment__time {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    flex-shrink: 0;
  }

  .comment-form {
    display: flex;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
  }
  .comment-form__body {
    flex: 1;
    min-width: 0;
  }
  .comment-form__actions {
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .comments-empty {
    padding-block: var(--space-16);
    text-align: center;
  }
  .comments-empty__icon {
    width: var(--space-8);
    height: var(--space-8);
    margin-inline: auto;
    color: var(--color-ink-18);
  }
  .comments-empty__text {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  .comments-skeleton {
    display: flex;
    flex-direction: row;
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-paper-2);
  }

  @media (width >= 768px) {
    .comments-skeleton {
      padding-block: var(--space-6);
    }
  }
  .comments-skeleton__date {
    width: 7rem;
    height: var(--space-3);
    margin-right: var(--space-4);
  }
  .comments-skeleton__avatar {
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    flex-shrink: 0;
  }
  .comments-skeleton__body {
    flex: 1;
    margin-left: var(--space-4);
  }
  .comments-skeleton__bar {
    background: var(--color-paper-2);
    height: var(--space-3);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
  }
  .comments-skeleton__bar--lg {
    margin-bottom: var(--space-4);
  }
  .comments-skeleton__bar--last {
    margin-bottom: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Messages (internal shift notes / questions / FYIs) + shared comms list
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .comms-list > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }

  .message-row {
    display: block;
    padding: var(--space-4) var(--space-4);
    text-decoration: none;
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .message-row {
      padding-inline: var(--space-6);
    }
  }
  .message-row:hover {
    background: var(--color-paper-soft);
  }
  .message-row:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
  }
  .message-row__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .message-row__avatar {
    flex-shrink: 0;
  }
  .message-row__body {
    flex: 1;
    min-width: 0;
  }
  .message-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .message-row__title {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .message-row__meta {
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    color: var(--color-ink-mute);
    font-size: var(--text-13);
  }
  .message-row__preview {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .message-category {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    padding: 2px var(--space-2-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 500;
    background: var(--color-paper-2);
    color: var(--color-ink-2);
  }
  .message-category svg {
    width: var(--space-3);
    height: var(--space-3);
    color: var(--color-ink-mute);
  }

  .message-subtitle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .message-subtitle svg {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }

  .message-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
  .message-form__label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
    font-size: var(--text-13);
  }
  .message-form__textarea {
    min-height: 18.75rem;
  }

  .message-show {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }
  .message-show__body {
    padding: var(--space-4) var(--space-4);
  }

  @media (width >= 640px) {
    .message-show__body {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }
  .message-show__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .message-show__author {
    font-weight: 500;
    color: var(--color-ink);
  }
  .message-show__time {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    flex-shrink: 0;
  }
  .message-show__content {
    margin-top: var(--space-3);
    color: var(--color-ink-2);
  }

  .message-load-more {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * SMS — conversation inbox, chat bubbles, composer
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  /* Shared guest-initials / system avatar */
  .sms-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-2);
    background: var(--color-paper);
    border: 1px dashed var(--color-ink-25);
  }
  .sms-avatar--system {
    background: var(--color-paper-2);
    border: 0;
    color: var(--color-ink-mute);
  }
  .sms-avatar--unknown {
    background: var(--color-paper-card);
    border: 1px dashed color-mix(in srgb, var(--color-terra-500) 70%, transparent);
    color: var(--color-terra-500);
  }
  .sms-avatar svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* Conversation inbox row */
  .sms-conversation {
    display: block;
    padding: var(--space-4) var(--space-4);
    text-decoration: none;
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .sms-conversation {
      padding-inline: var(--space-6);
    }
  }
  .sms-conversation:hover {
    background: var(--color-paper-soft);
  }
  .sms-conversation__inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .sms-conversation__avatar {
    flex-shrink: 0;
  }
  .sms-conversation__body {
    min-width: 0;
    flex: 1;
  }
  .sms-conversation__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .sms-conversation__title {
    font-weight: 600;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sms-conversation__time {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    flex-shrink: 0;
  }
  .sms-conversation__sub {
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .sms-conversation__subtitle {
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sms-conversation__preview {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sms-conversation__preview-you {
    font-weight: 500;
  }

  /* Rich empty state (inbox + new) */
  .sms-empty {
    padding-block: var(--space-16);
    text-align: center;
  }
  .sms-empty__icon {
    width: var(--space-8);
    height: var(--space-8);
    margin-inline: auto;
    margin-bottom: var(--space-3);
    color: var(--color-ink-mute);
  }
  .sms-empty__title {
    font-family: var(--font-serif);
    color: var(--color-ink);
    font-size: var(--text-22);
  }
  .sms-empty__body {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
    margin-top: var(--space-1);
  }

  /* Chat layout */
  .sms-chat {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 15rem);
    margin-bottom: calc(-1 * var(--space-20));
  }
  .sms-messages {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .sms-messages > * + * {
    margin-top: var(--space-5);
  }
  .sms-messages-empty {
    padding-block: var(--space-16);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
  .sms-messages-empty__icon {
    width: var(--space-7);
    height: var(--space-7);
    color: var(--color-terra-500);
  }
  .sms-messages-empty__text {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    max-width: 28rem;
  }

  /* Message bubble */
  .sms-message {
    display: flex;
    gap: var(--space-3);
  }
  .sms-message--outbound {
    justify-content: flex-end;
  }
  .sms-message--inbound {
    justify-content: flex-start;
  }
  .sms-message__avatar {
    flex-shrink: 0;
  }
  .sms-message__col {
    min-width: 0;
    max-width: 82%;
  }
  .sms-message__meta {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-bottom: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }
  .sms-message__meta--outbound {
    justify-content: flex-end;
  }
  .sms-message__author {
    color: var(--color-ink-2);
  }
  .sms-bubble {
    border-radius: 1rem;
    padding: var(--space-3) var(--space-4);
    line-height: 1.625;
    white-space: pre-wrap;
    font-size: var(--text-15);
  }
  .sms-bubble--outbound {
    background: var(--color-ink);
    color: var(--color-paper);
    border-bottom-right-radius: var(--radius-sm);
  }
  .sms-bubble--inbound {
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-10);
    color: var(--color-ink);
    border-bottom-left-radius: var(--radius-sm);
    box-shadow: var(--shadow-paper);
  }
  .sms-message__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }
  .sms-message__status--outbound {
    justify-content: flex-end;
  }
  .sms-message__error {
    color: var(--color-terra-500);
  }

  /* Composer */
  .sms-composer-dock {
    position: sticky;
    bottom: 0;
    padding-top: var(--space-6);
    padding-bottom: var(--space-4);
    background: linear-gradient(
      to top,
      var(--color-paper) 0%,
      var(--color-paper) 50%,
      transparent 100%
    );
  }

  @media (width < 1024px) {
    .c-main:has(.mobile-button-bar) .sms-chat:has(.sms-messages-empty),
    .c-main:has(#bottom-button-bar) .sms-chat:has(.sms-messages-empty) {
      min-height: calc(100dvh - 13rem);
    }

    .c-main:has(.mobile-button-bar) .sms-messages:has(.sms-message),
    .c-main:has(#bottom-button-bar) .sms-messages:has(.sms-message) {
      padding-bottom: var(--space-12);
    }

    .c-main:has(.mobile-button-bar) .sms-composer-dock,
    .c-main:has(#bottom-button-bar) .sms-composer-dock {
      bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    }

    .c-main:has(.mobile-button-bar) .sms-chat:has(.sms-message) .sms-composer-dock,
    .c-main:has(#bottom-button-bar) .sms-chat:has(.sms-message) .sms-composer-dock {
      bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
    }

    @media (width >= 640px) {
      .c-main:has(.mobile-button-bar) .sms-chat:has(.sms-messages-empty),
      .c-main:has(#bottom-button-bar) .sms-chat:has(.sms-messages-empty) {
        min-height: calc(100dvh - 14rem);
      }

      .c-main:has(.mobile-button-bar) .sms-messages:has(.sms-message),
      .c-main:has(#bottom-button-bar) .sms-messages:has(.sms-message) {
        padding-bottom: var(--space-16);
      }

      .c-main:has(.mobile-button-bar) .sms-composer-dock,
      .c-main:has(#bottom-button-bar) .sms-composer-dock {
        bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
      }

      .c-main:has(.mobile-button-bar) .sms-chat:has(.sms-message) .sms-composer-dock,
      .c-main:has(#bottom-button-bar) .sms-chat:has(.sms-message) .sms-composer-dock {
        bottom: calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
      }
    }
  }
  .sms-composer {
    border-radius: 1rem;
    border: 1px solid var(--color-ink-18);
    background: var(--color-paper-card);
    padding: var(--space-3);
    transition: all var(--dur-fast) ease-out;
  }
  .sms-composer:focus-within {
    border-color: var(--color-ink);
    box-shadow: var(--shadow-input-ring);
  }
  .sms-composer__textarea {
    width: 100%;
    background: transparent;
    border: 0;
    padding: var(--space-1) var(--space-2) var(--space-2);
    color: var(--color-ink);
    resize: none;
    font-size: var(--text-15);
    line-height: 1.625;
  }
  .sms-composer__textarea::placeholder {
    color: var(--color-ink-mute);
  }
  .sms-composer__textarea:focus {
    outline: none;
    box-shadow: none;
  }
  .team-chat-mention {
    position: relative;
  }
  .team-chat-mention-menu {
    position: absolute;
    right: var(--space-1);
    bottom: calc(100% + var(--space-2));
    left: var(--space-1);
    z-index: var(--z-dropdown);
    overflow: hidden;
    border: 1px solid var(--color-ink-15);
    border-radius: var(--radius-lg);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
  }
  .team-chat-mention-menu.hidden {
    display: none;
  }
  .team-chat-mention-menu__list {
    max-height: 14rem;
    margin: 0;
    overflow-y: auto;
    padding: var(--space-1);
    list-style: none;
  }
  .team-chat-mention-menu__option {
    display: flex;
    width: 100%;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-sm);
    text-align: left;
  }
  .team-chat-mention-menu__option:hover,
  .team-chat-mention-menu__option.is-active {
    background: var(--color-paper-soft);
  }
  .team-chat-mention-menu__empty {
    padding: var(--space-3);
    color: var(--color-ink-mute);
    font-size: var(--text-sm);
  }
  .sms-composer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-ink-10);
  }
  .sms-composer__hint {
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    padding-left: var(--space-2);
  }
  .sms-composer__send {
    display: inline-flex;
    flex: 0 0 2.25rem;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink);
    color: var(--color-paper);
    transition: background var(--dur-fast);
    cursor: pointer;
  }
  .sms-composer__send:hover {
    background: var(--color-ink-2);
  }
  .sms-composer__send:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .sms-composer__send svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* Link-guest inline form (unattributed inbound) */
  .sms-link-guest {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: none;
    letter-spacing: normal;
  }
  .sms-link-guest__select {
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent);
    background: var(--color-paper-card);
    padding: var(--space-1) var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-xs);
  }
  .sms-link-guest__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-sage-500);
    color: var(--color-paper);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10px;
  }
  .sms-link-guest__btn svg {
    width: var(--space-3);
    height: var(--space-3);
  }
  .team-chat-layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .team-chat-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .team-chat-channel-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    border-bottom: 1px dashed var(--color-ink-16);
  }
  .team-chat-conversation-picker {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
  }
  .team-chat-conversation-picker__trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
  }
  .team-chat-conversation-picker__trigger-icon {
    flex-shrink: 0;
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-terra-500);
  }
  .team-chat-conversation-picker__trigger-title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-chat-conversation-picker__trigger-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-6);
    height: var(--space-6);
    margin-left: auto;
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
    transition:
      color var(--dur-fast),
      border-color var(--dur-fast);
  }
  .team-chat-conversation-picker__trigger:hover .team-chat-conversation-picker__trigger-chevron,
  .team-chat-conversation-picker__trigger:focus-visible
    .team-chat-conversation-picker__trigger-chevron {
    border-color: var(--color-terra-500);
    color: var(--color-terra-500);
  }
  .team-chat-conversation-picker__trigger-chevron svg {
    width: var(--space-3);
    height: var(--space-3);
  }
  .team-chat-conversation-picker .c-tabs__dropdown {
    max-height: min(28rem, calc(100dvh - 10rem));
    margin-top: var(--space-2);
    overflow-y: auto;
  }
  .team-chat-conversation-picker__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .team-chat-conversation-picker__panel .team-chat-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .team-chat-conversation-picker__panel .team-chat-sidebar__item.is-active {
    background: var(--color-paper-soft);
    box-shadow: none;
  }
  .team-chat-conversation-picker__edit {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-top: 1px dashed var(--color-ink-12);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
  }
  .team-chat-conversation-picker__edit svg {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }

  @media (width >= 640px) {
    .team-chat-conversation-picker {
      max-width: 26rem;
    }
    .team-chat-conversation-picker .c-tabs__dropdown {
      right: auto;
      width: max-content;
      min-width: 100%;
      max-width: min(28rem, calc(100vw - 2rem));
    }
    .team-chat-conversation-picker__panel {
      min-width: 18rem;
    }
  }

  .team-chat-sidebar,
  .team-chat-header {
    display: none;
  }

  .team-chat.sms-chat {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
  }
  .team-chat .sms-messages {
    justify-content: flex-start;
    overflow-y: auto;
  }
  .team-chat .sms-messages > :first-child {
    margin-top: auto;
  }
  .team-chat .sms-messages > .sms-messages-empty {
    margin-block: auto;
  }
  .team-chat .sms-composer-dock {
    position: relative;
    bottom: auto;
    background: none;
  }

  @media (width >= 1024px) {
    .team-chat-layout {
      display: grid;
      grid-template-columns: 16rem minmax(0, 1fr);
      column-gap: var(--space-10);
      max-width: 1200px;
      height: calc(100dvh - 67px - 4.5rem);
      margin-inline: auto;
    }
    .team-chat-channel-bar {
      display: none;
    }
    .team-chat-sidebar {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      min-height: 0;
      padding-block: var(--space-2);
      overflow-y: auto;
    }
    .team-chat-header {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-4) var(--space-6);
      border-bottom: 1px dashed var(--color-ink-16);
    }
    .team-chat-shell {
      flex: none;
      border: 1px solid var(--color-ink-12);
      border-radius: var(--radius-card);
      background: var(--color-paper-card);
      box-shadow: var(--shadow-paper);
      overflow: hidden;
    }
    .team-chat .sms-messages {
      padding: var(--space-6);
    }
    .team-chat .sms-bubble--inbound {
      background: var(--color-paper);
    }
    .team-chat .sms-composer-dock {
      padding: var(--space-3) var(--space-6) var(--space-6);
    }
  }
  .team-chat-sidebar__section + .team-chat-sidebar__section {
    border-top: 1px dashed var(--color-ink-12);
    padding-top: var(--space-4);
  }
  .team-chat-sidebar__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1-5);
    padding-inline: var(--space-2);
  }
  .team-chat-sidebar__label {
    color: var(--color-ink-mute);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .team-chat-sidebar__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-pill);
    color: var(--color-ink-mute);
    transition:
      color var(--dur-fast),
      border-color var(--dur-fast),
      background var(--dur-fast);
  }
  .team-chat-sidebar__add:hover,
  .team-chat-sidebar__add:focus-visible {
    border-color: var(--color-terra-500);
    background: var(--color-paper-card);
    color: var(--color-terra-500);
  }
  .team-chat-sidebar__add svg {
    width: var(--space-3);
    height: var(--space-3);
  }
  .team-chat-sidebar__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .team-chat-sidebar__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-input);
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    transition:
      background var(--dur-fast),
      color var(--dur-fast);
  }
  .team-chat-sidebar__item:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }
  .team-chat-sidebar__item.is-active {
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
    color: var(--color-ink);
    font-weight: 600;
  }
  .team-chat-sidebar__item.is-active .team-chat-sidebar__item-icon {
    color: var(--color-terra-500);
  }
  .team-chat-sidebar__item-icon {
    flex-shrink: 0;
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .team-chat-sidebar__item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-chat-sidebar__unread {
    flex-shrink: 0;
    min-width: var(--space-5);
    margin-left: auto;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-terra-500);
    color: var(--color-paper-card);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: var(--space-5);
    text-align: center;
  }
  .team-chat-header__icon {
    flex-shrink: 0;
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-terra-500);
  }
  .team-chat-header__title {
    min-width: 0;
    overflow: hidden;
    color: var(--color-ink);
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .team-chat-header__edit {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    color: var(--color-ink-mute);
    transition: color var(--dur-fast);
  }
  .team-chat-header__edit:hover,
  .team-chat-header__edit:focus-visible {
    color: var(--color-terra-500);
  }
  .team-chat-header__edit svg {
    width: var(--space-4);
    height: var(--space-4);
  }

  @media (width < 1024px) {
    .c-main:has(.team-chat) {
      padding-top: 0;
      padding-bottom: var(--space-3);
    }
    .team-chat-layout {
      height: calc(100dvh - 56px - 0.75rem);
    }
    [data-bridge-platform] .team-chat-layout {
      height: calc(100dvh - 0.75rem);
    }
    .team-chat-channel-bar {
      margin-inline: calc(-1 * var(--space-6));
      padding-inline: var(--space-6);
    }
    .team-chat.sms-chat {
      margin-inline: calc(-1 * var(--space-6));
    }
    .team-chat .sms-messages {
      padding-inline: var(--space-6);
      padding-bottom: var(--space-3);
    }
    .team-chat .sms-composer-dock {
      padding: 0 var(--space-6) max(var(--space-2), env(safe-area-inset-bottom, 0px));
    }
    .team-chat .team-chat-composer-hints {
      display: none;
    }
    .team-chat .sms-composer__bar {
      justify-content: flex-end;
      min-height: 2.25rem;
    }
  }

  @media (width >= 640px) and (width < 1024px) {
    .team-chat-channel-bar {
      margin-inline: -2.25rem;
      padding-inline: 2.25rem;
    }
    .team-chat.sms-chat {
      margin-inline: -2.25rem;
    }
    .team-chat .sms-messages {
      padding-inline: 2.25rem;
    }
    .team-chat .sms-composer-dock {
      padding-inline: 2.25rem;
    }
  }

  @media (width >= 1024px) {
    .c-main:has(.team-chat) {
      padding-bottom: 2.25rem;
    }
  }
  .team-chat-message-delete {
    display: inline-flex;
    align-items: center;
    color: var(--color-ink-mute);
    opacity: 0.45;
    transition:
      color var(--dur-fast),
      opacity var(--dur-fast);
  }
  .team-chat-message-delete:hover,
  .team-chat-message-delete:focus-visible {
    color: var(--color-terra-500);
    opacity: 1;
  }
  .team-chat-message-delete svg {
    width: var(--space-3);
    height: var(--space-3);
  }

  @media (hover: hover) {
    .sms-message .team-chat-message-delete {
      opacity: 0;
    }
    .sms-message:hover .team-chat-message-delete,
    .sms-message:focus-within .team-chat-message-delete {
      opacity: 0.65;
    }
    .team-chat-message-delete:hover,
    .team-chat-message-delete:focus-visible {
      opacity: 1;
    }
  }
  .team-chat .sms-message {
    scroll-margin-top: var(--space-4);
  }
  .sms-messages > * + .sms-message--grouped {
    margin-top: var(--space-1-5);
  }
  .sms-message__avatar-spacer {
    flex-shrink: 0;
    width: var(--space-10);
  }
  .sms-message__bubble-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .sms-message__bubble-row--outbound {
    flex-direction: row-reverse;
  }
  .sms-message__hover-meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    color: var(--color-ink-mute);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    white-space: nowrap;
    opacity: 0.45;
    transition: opacity var(--dur-fast);
  }

  @media (hover: hover) {
    .sms-message__hover-meta {
      opacity: 0;
    }
    .sms-message:hover .sms-message__hover-meta,
    .sms-message:focus-within .sms-message__hover-meta {
      opacity: 0.8;
    }
  }
  .team-chat-date-divider,
  .team-chat-unread-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .team-chat-date-divider::before,
  .team-chat-date-divider::after,
  .team-chat-unread-divider::before,
  .team-chat-unread-divider::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--color-ink-18);
  }
  .team-chat-date-divider__label,
  .team-chat-unread-divider__label {
    color: var(--color-ink-mute);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .team-chat-unread-divider::before,
  .team-chat-unread-divider::after {
    border-top-color: var(--color-terra-500);
  }
  .team-chat-unread-divider__label {
    color: var(--color-terra-500);
  }
  .team-chat-load-earlier {
    align-self: center;
    padding: var(--space-1-5) var(--space-4);
    border: 1px dashed var(--color-ink-25);
    border-radius: var(--radius-pill);
    color: var(--color-ink-2);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    transition:
      color var(--dur-fast),
      border-color var(--dur-fast);
  }
  .team-chat-load-earlier:hover,
  .team-chat-load-earlier:focus-visible {
    border-color: var(--color-ink);
    color: var(--color-ink);
  }
  .team-chat-jump-to-latest {
    display: inline-flex;
    position: absolute;
    bottom: 100%;
    left: 50%;
    align-items: center;
    gap: var(--space-1-5);
    margin-bottom: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    transform: translateX(-50%);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-pill);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
    color: var(--color-ink-2);
    font-family: var(--font-mono);
    font-size: var(--text-13);
  }
  .team-chat-jump-to-latest[hidden] {
    display: none;
  }
  .team-chat-jump-to-latest:hover,
  .team-chat-jump-to-latest:focus-visible {
    color: var(--color-ink);
  }
  .team-chat-jump-to-latest__icon {
    width: var(--space-3);
    height: var(--space-3);
  }
  .team-chat-mention-token {
    padding-inline: var(--space-0-5);
    border-radius: var(--radius-sm);
    background: var(--color-terra-50);
    color: var(--color-terra-500);
    font-weight: 600;
  }
  .team-chat-mention-token--self {
    background: var(--color-terra-100);
    text-decoration: underline dashed;
  }
  .team-chat .sms-composer__bar {
    padding-top: var(--space-1);
    border-top: 0;
  }
  .team-chat-composer-hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-width: 0;
    padding-left: var(--space-2);
    color: var(--color-ink-mute);
    font-size: var(--text-xs);
  }
  .team-chat-composer-hints__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    white-space: nowrap;
  }
  .team-chat-composer-hints kbd {
    padding: 0 var(--space-1-5);
    border: 1px solid var(--color-ink-15);
    border-radius: var(--radius-sm);
    background: var(--color-paper-soft);
    color: var(--color-ink-2);
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: var(--space-4);
  }
  .team-chat .sms-message__meta {
    gap: var(--space-2);
    font-family: var(--font-sans);
  }
  .team-chat .sms-message__author {
    color: var(--color-ink-2);
    font-weight: 600;
  }
  .team-chat .sms-message__time {
    color: var(--color-ink-mute);
  }
  .team-chat .sms-message__meta--outbound .team-chat-message-delete {
    order: 1;
  }
  .team-chat .sms-message__meta--outbound .sms-message__time {
    order: 2;
  }
  .team-chat .sms-message__meta--outbound .sms-message__author {
    order: 3;
  }
  .team-chat .sms-message__meta--outbound .sms-message__meta-avatar {
    order: 4;
  }
  .team-chat .sms-message__hover-meta {
    font-family: var(--font-sans);
  }
  .sms-message__meta-avatar {
    display: none;
  }

  @media (width < 640px) {
    .team-chat .sms-message__avatar,
    .team-chat .sms-message__avatar-spacer {
      display: none;
    }
    .team-chat .sms-message__col {
      flex: 1;
      max-width: 100%;
    }
    .team-chat .sms-message__meta-avatar {
      display: inline-flex;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * SMS + Email templates (shared: two-column form, trigger fields, variables,
 * template rows, previews, trigger-preview). One class set used by both.
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .template-form {
    max-width: 1040px;
  }

  @media (width >= 1024px) {
    .template-form {
      display: flex;
      gap: var(--space-6);
      align-items: flex-start;
    }
  }

  @media (width >= 1024px) {
    .template-form__main {
      flex: 1;
      min-width: 0;
    }
  }
  .template-form__sidebar {
    display: none;
  }

  @media (width >= 1024px) {
    .template-form__sidebar {
      display: block;
      flex-shrink: 0;
      position: sticky;
      top: var(--space-6);
      width: 280px;
    }
  }

  .template-form__section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
  .template-form__label {
    display: flex;
    align-items: center;
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
  }
  .template-form__help {
    font-size: var(--text-13);
    color: var(--color-ink-2);
    line-height: 1.5;
    margin-top: calc(-1 * var(--space-1));
    margin-bottom: var(--space-1);
  }
  .template-form__panel {
    background: var(--color-paper-soft);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
  }
  .template-form__triggers {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .template-form__add {
    margin-top: var(--space-3);
  }
  .template-form__var-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    transition: color var(--dur-fast);
  }
  .template-form__var-toggle:hover {
    color: var(--color-ink);
  }
  .template-form__var-toggle svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .template-form__var-panel {
    margin-top: var(--space-3);
  }
  .template-form__var-desc {
    font-size: var(--text-13);
    color: var(--color-ink-2);
    line-height: 1.5;
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .template-form__sidebar-desc {
    font-size: var(--text-13);
    color: var(--color-ink-2);
    line-height: 1.5;
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
  }

  /* Trigger fields row (.trigger-fields kept as JS hook) */
  .trigger-fields {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .template-trigger__fields {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    color: var(--color-ink-2);
    font-size: var(--text-14-5);
  }
  .template-trigger__lead {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .template-trigger__num {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: 8px;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
    cursor: text;
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast),
      box-shadow var(--dur-fast);
  }
  .template-trigger__num:has(:focus) {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }
  .template-trigger__num-input {
    width: 3rem;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--color-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .template-trigger__num-input:focus {
    outline: none;
    box-shadow: none;
  }
  .template-trigger__num-label {
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    padding-right: var(--space-1);
  }
  .template-trigger__select-wrap {
    display: inline-flex;
    align-items: center;
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: 8px;
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast),
      box-shadow var(--dur-fast);
  }
  .template-trigger__select-wrap:has(:focus) {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }
  .template-trigger__select {
    cursor: pointer;
    color: var(--color-ink);
    font-weight: 500;
    padding: var(--space-1) var(--space-7) var(--space-1) var(--space-3);
  }

  /* Variables list */
  .template-variables {
    display: flex;
    flex-direction: column;
    gap: var(--space-2-5);
  }
  .template-variable {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .template-variable__main {
    min-width: 0;
    flex: 1;
  }
  .template-variable__code {
    background: var(--color-paper-2);
    color: var(--color-ink);
    font-family: var(--font-mono);
    display: inline-block;
    padding: 2px var(--space-2);
    border-radius: 6px;
    font-size: var(--text-11);
  }
  .template-variable__desc {
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    margin-top: var(--space-1);
    line-height: 1.45;
  }
  .template-variable__copy {
    color: var(--color-ink-mute);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--dur-fast);
    margin-top: var(--space-0-5);
  }
  .template-variable__copy:hover {
    color: var(--color-ink);
  }
  .template-variable__copy svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  /* Template list rows */
  .template-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5);
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .template-row {
      padding-inline: var(--space-7);
    }
  }
  .template-row:hover {
    background: var(--color-paper-soft);
  }
  .template-row:first-child {
    border-top-left-radius: var(--radius-card);
    border-top-right-radius: var(--radius-card);
  }
  .template-row:last-child {
    border-bottom-left-radius: var(--radius-card);
    border-bottom-right-radius: var(--radius-card);
  }
  .template-row__link {
    min-width: 0;
    flex: 1;
    display: block;
    text-decoration: none;
  }
  .template-row__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .template-row__title {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-base);
  }
  .template-row__preview {
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: var(--space-0-5);
  }
  .template-row__triggers {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-13);
  }
  .template-row__sends {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .template-row__sep {
    color: var(--color-ink-mute);
  }
  .template-row__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
  }
  .template-row__trigger-days {
    font-weight: 600;
    color: var(--color-ink);
  }
  .template-row__trigger-label {
    color: var(--color-ink-mute);
  }
  .template-row__no-triggers {
    margin-top: var(--space-2);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    font-family: var(--font-serif);
    font-style: italic;
  }
  .template-row__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    padding-top: var(--space-1);
  }

  /* Preview (modal turbo stream) */
  .template-preview__note {
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    font-family: var(--font-serif);
    font-style: italic;
    margin-bottom: var(--space-6);
    padding-right: var(--space-10);
  }
  .template-preview__section {
    margin-bottom: var(--space-6);
  }
  .template-preview__section--last {
    margin-bottom: var(--space-2);
  }
  .template-preview__box {
    background: var(--color-paper-soft);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: 10px;
    padding: var(--space-4);
    margin-top: var(--space-2);
    color: var(--color-ink);
  }
  .template-preview__box--prewrap {
    white-space: pre-wrap;
  }

  /* Trigger preview page */
  .template-trigger-preview__filter {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
  }
  .template-trigger-preview__label {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
    font-size: var(--text-13);
  }
  .template-trigger-preview__date {
    width: auto;
    cursor: pointer;
  }
  .template-trigger-preview__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }
  .template-trigger-preview__empty {
    padding-block: var(--space-16);
    text-align: center;
  }
  .template-trigger-preview__empty--sm {
    padding-block: var(--space-12);
  }
  .template-trigger-preview__empty-icon {
    width: var(--space-8);
    height: var(--space-8);
    margin-inline: auto;
    margin-bottom: var(--space-3);
    color: var(--color-ink-mute);
  }
  .template-trigger-preview__empty-text {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .template-trigger-preview__empty-action {
    margin-top: var(--space-4);
  }

  .template-booking-row {
    padding: var(--space-4) var(--space-6);
    transition: background var(--dur-fast);
  }
  .template-booking-row:hover {
    background: var(--color-paper-soft);
  }
  .template-booking-row__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .template-booking-row__main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 1;
  }
  .template-booking-row__main > svg {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
    flex-shrink: 0;
  }
  .template-booking-row__guest {
    min-width: 0;
  }
  .template-booking-row__name {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .template-booking-row__details {
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .template-booking-row__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
  }
  .template-booking-row__when {
    text-align: right;
  }
  .template-booking-row__when-label {
    font-size: var(--text-13);
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .template-booking-row__when-date {
    font-weight: 500;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
  }
  .template-booking-row__link {
    color: var(--color-ink-mute);
    transition: color var(--dur-fast);
  }
  .template-booking-row__link:hover {
    color: var(--color-ink);
  }
  .template-booking-row__link svg {
    width: var(--space-5);
    height: var(--space-5);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Email log — list rows + delivery timeline (status badge already converted)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .email-list__count {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    text-align: center;
    letter-spacing: var(--tracking-caps);
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
    padding: var(--space-4);
    font-size: var(--text-11);
  }

  .email-item {
    display: block;
    padding: var(--space-6);
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .email-item:hover {
    background: var(--color-paper-soft);
  }
  .email-item__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .email-item__body {
    flex: 1;
    min-width: 0;
  }
  .email-item__badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .email-item__engage {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .email-item__subject {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .email-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
    margin-top: var(--space-1);
  }
  .email-item__meta-icon {
    width: var(--space-3);
    height: var(--space-3);
    display: inline;
  }
  .email-item__chevron {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
    flex-shrink: 0;
  }

  .email-timeline > * + * {
    margin-top: var(--space-4);
  }
  .email-timeline__item {
    display: flex;
    align-items: flex-start;
  }
  .email-timeline__marker {
    flex-shrink: 0;
    position: relative;
  }
  .email-timeline__icon {
    width: var(--space-6);
    height: var(--space-6);
  }
  .email-timeline__icon--complete {
    color: var(--color-sage-500);
  }
  .email-timeline__icon--error {
    color: var(--color-destructive);
  }
  .email-timeline__icon--pending {
    color: var(--color-ink-30);
  }
  .email-timeline__line {
    position: absolute;
    top: var(--space-8);
    left: var(--space-3);
    height: var(--space-8);
    width: 0.125rem;
  }
  .email-timeline__line--complete {
    background: var(--color-sage-500);
  }
  .email-timeline__line--pending {
    background: var(--color-ink-18);
  }
  .email-timeline__content {
    margin-left: var(--space-4);
    min-width: 0;
    flex: 1;
  }
  .email-timeline__label {
    display: flex;
    align-items: center;
  }
  .email-timeline__label--complete {
    color: var(--color-sage-500);
  }
  .email-timeline__label--error {
    color: var(--color-destructive);
  }
  .email-timeline__label--pending {
    color: var(--color-ink-30);
  }
  .email-timeline__label-text {
    font-weight: 500;
  }
  .email-timeline__time {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
    margin-top: var(--space-1);
  }
  .email-timeline__time--pending {
    font-size: var(--text-sm);
    color: var(--color-ink-30);
    margin-top: var(--space-1);
  }

  /* ── Guests: form name grid + modal picker ─────────────────────────── */
  .guest-form__row {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-4);
  }

  @media (width >= 1024px) {
    .guest-form__row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .guest-picker-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .guest-modal-form {
    width: 100vw;
    max-width: 28rem;
  }

  /* ── Guests: detail header + layout ────────────────────────────────── */
  .guest-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-1-5);
  }
  .guest-detail__name {
    margin-bottom: var(--space-2);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-38);
    line-height: 1;
    letter-spacing: var(--tracking-tightest);
    color: var(--color-ink);
  }
  .guest-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-1);
    margin-bottom: 0;
  }
  .guest-detail__meta-item {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
  .guest-detail__meta-sep {
    color: var(--color-ink-mute);
  }
  .guest-detail__actions {
    display: none;
    align-items: center;
    gap: var(--space-2);
  }

  @media (width >= 1024px) {
    .guest-detail__actions {
      display: flex;
    }
  }
  .guest-detail__actions--mobile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  @media (width >= 1024px) {
    .guest-detail__actions--mobile {
      display: none;
    }
  }
  .guest-detail__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin-top: var(--space-5-5);
  }

  @media (width >= 1280px) {
    .guest-detail__grid {
      grid-template-columns: 1.4fr 0.85fr;
    }
  }
  .guest-detail__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }
  .guest-detail__card-body {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .guest-detail__card-body {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }
  .guest-detail__card-body--snug {
    padding: var(--space-4-5) var(--space-6) var(--space-5-5);
  }
  .guest-detail__empty {
    padding-block: var(--space-10);
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .guest-detail__empty--sm {
    padding-block: var(--space-6);
  }

  /* ── Loyalty card ──────────────────────────────────────────────────── */
  .loyalty-card {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .loyalty-card {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }

  .loyalty-card__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
  }

  .loyalty-card__stat {
    padding: var(--space-3);
    border: 1px dashed var(--color-ink-15);
    border-radius: var(--radius-lg);
    background: var(--color-paper-soft);
  }

  .loyalty-card__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  .loyalty-card__value {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-serif);
    font-size: var(--text-28);
    font-weight: 500;
    color: var(--color-ink);
  }

  .loyalty-card__rows,
  .loyalty-card__entries,
  .loyalty-card__form {
    display: grid;
    gap: var(--space-2-5);
  }

  .loyalty-card__row,
  .loyalty-card__entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }

  .loyalty-card__note {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  .loyalty-card__link {
    color: var(--color-sage-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .loyalty-card__checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--color-ink-2);
  }

  .loyalty-card__actions {
    margin-top: var(--space-1-5);
  }

  /* ── Guests: SMS communications card ───────────────────────────────── */
  .guest-sms__status {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
  }
  .guest-sms__status--muted {
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .guest-sms__note {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }
  .guest-sms__action {
    margin-top: var(--space-4);
  }
  .guest-sms__toggle {
    appearance: none;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    text-decoration: underline;
    color: var(--color-primary);
  }

  /* ── Guests: recovery status card ──────────────────────────────────── */
  .guest-recovery {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .guest-recovery__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: var(--space-0-5);
    color: var(--color-butter-700);
  }
  .guest-recovery__text {
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }
}

@layer ds-features {
  /* ── Settings: hub (index nav cards) ───────────────────────────────── */
  .settings-hub > * + * {
    margin-top: var(--space-10);
  }
  .settings-section__title {
    margin-bottom: var(--space-4);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-22);
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
  }
  .settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (width >= 640px) {
    .settings-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 1280px) {
    .settings-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .settings-nav-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-paper);
    text-decoration: none;
    transition: background var(--dur-fast);
  }
  .settings-nav-card:hover {
    background: var(--color-paper-soft);
  }
  .settings-nav-card__icon {
    width: var(--space-6);
    height: var(--space-6);
    flex-shrink: 0;
    margin-top: var(--space-0-5);
  }
  .settings-nav-card__icon--terra {
    color: var(--color-terra-500);
  }
  .settings-nav-card__icon--sage {
    color: var(--color-sage-500);
  }
  .settings-nav-card__icon--butter {
    color: var(--color-butter-700);
  }
  .settings-nav-card__icon--ink-blue {
    color: var(--color-ink-blue);
  }
  .settings-nav-card__body {
    min-width: 0;
  }
  .settings-nav-card__title {
    display: block;
    font-weight: 500;
    color: var(--color-ink);
  }
  .settings-nav-card__desc {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  /* ── Settings: panels ──────────────────────────────────────────────── */
  .settings-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  /* dashed callout box (SMS test-message, dev diagnostics) */
  .settings-callout {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 1px dashed var(--color-ink-15);
    border-radius: var(--radius-2xl);
    background: color-mix(in srgb, var(--color-paper-2) 60%, transparent);
  }
  .settings-callout--accent {
    border-color: color-mix(in srgb, var(--color-terra-500) 30%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 5%, transparent);
  }
  .settings-callout__bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  @media (width >= 768px) {
    .settings-callout__bar {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }
  .settings-callout__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .settings-callout__icon {
    width: var(--space-4);
    height: var(--space-4);
    margin-top: var(--space-1);
    flex-shrink: 0;
    color: var(--color-terra-500);
  }
  .settings-callout__title {
    font-weight: 600;
    color: var(--color-ink);
  }
  .settings-callout__help {
    margin: 0;
    font-size: var(--text-13);
    line-height: 1.5;
    color: var(--color-ink-2);
  }
  .settings-callout__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* SMS settings display rows */
  .settings-sms__number {
    margin: var(--space-0-5) 0 0;
    font-family: var(--font-mono);
    font-size: var(--text-15);
    color: var(--color-ink);
  }
  .settings-sms__note {
    margin: var(--space-0-5) 0 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-12-5);
    color: var(--color-ink-mute);
  }

  /* card-body empty state (e.g. SMS not configured) */
  .settings-empty {
    padding-block: var(--space-12);
    text-align: center;
  }
  .settings-empty__icon {
    width: var(--space-8);
    height: var(--space-8);
    margin: 0 auto var(--space-3);
    color: var(--color-ink-mute);
  }
  .settings-empty__title {
    font-weight: 500;
    color: var(--color-ink);
  }
  .settings-empty__text {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }

  /* SMS dev diagnostics (development only) */
  .settings-diag__grid {
    margin-top: var(--space-3);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  @media (width >= 768px) {
    .settings-diag__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .settings-diag__label {
    display: block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-2xs);
    color: var(--color-ink-mute);
  }
  .settings-diag__value {
    display: block;
    font-size: var(--text-13);
    color: var(--color-ink);
    word-break: break-all;
  }
  .settings-diag__full {
    grid-column: 1 / -1;
  }
  .settings-diag__setup {
    margin-top: var(--space-3);
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }
  .settings-diag__code {
    display: block;
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-ink);
    color: var(--color-paper);
    overflow-x: auto;
  }

  /* legacy bare-form panels (message board) */
  .settings-bare-form {
    max-width: 48rem;
    margin-top: var(--space-6);
  }
  .settings-bare-form__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-ink);
  }
  .settings-bare-form__help {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .settings-bare-form__editor {
    min-height: 300px;
  }
  .settings-photos-formats {
    margin-bottom: var(--space-4);
  }

  /* ── Settings: branding (color swatches, font picker, live preview) ── */
  .branding-swatches {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .branding-swatch {
    width: var(--space-9);
    height: var(--space-9);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-ink-15);
    cursor: pointer;
    transition: box-shadow var(--dur-base) var(--ease);
  }
  .branding-swatch.is-selected {
    box-shadow:
      0 0 0 2px var(--color-paper-card),
      0 0 0 4px var(--color-ink);
  }
  .branding-swatch--custom {
    position: relative;
    overflow: hidden;
    background: conic-gradient(
      from 0deg,
      var(--color-terra-500),
      var(--color-sage-500),
      var(--color-ink-blue),
      var(--color-destructive),
      var(--color-butter-500),
      var(--color-terra-500)
    );
  }
  .branding-swatch__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }

  .branding-fonts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  @media (width >= 640px) {
    .branding-fonts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .branding-font {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-3-5);
    cursor: pointer;
    background: var(--color-paper-card);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: var(--radius-input);
    transition: border-color var(--dur-fast);
  }
  .branding-font:hover {
    border-color: var(--color-ink-30);
  }
  .branding-font:has(:checked) {
    border-color: var(--color-ink);
    box-shadow: var(--shadow-input-ring);
  }
  .branding-font__name {
    font-size: var(--text-19);
    line-height: 1.25;
    color: var(--color-ink);
  }
  .branding-font__desc {
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
  }

  .branding-preview {
    overflow: hidden;
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-xl);
  }
  .branding-preview__inner {
    padding: var(--space-7) var(--space-6);
  }
  .branding-preview__heading {
    font-size: var(--text-stat);
    line-height: 1.05;
    letter-spacing: var(--tracking-tightest);
    font-weight: 500;
    color: var(--color-ink);
  }
  .branding-preview__sub {
    max-width: 42ch;
    margin-top: var(--space-2);
    font-size: var(--text-15);
    line-height: 1.55;
    color: var(--color-ink-2);
  }
  .branding-preview__cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }
  .branding-preview__cta {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2-5) var(--space-6);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-white);
  }
  .branding-preview__price {
    font-size: var(--text-15);
    color: var(--color-ink-2);
  }
  .branding-preview__price-amount {
    font-style: italic;
    font-weight: 500;
  }

  /* ── Settings: API keys / webhooks ─────────────────────────────────── */
  .api-key-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border-radius: var(--radius-input);
    background: color-mix(in srgb, var(--color-butter) 18%, transparent);
    border: 1px solid var(--color-ink-10);
    border-left: 2px solid var(--color-butter-500);
  }
  .api-key-warning__icon {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
    margin-top: var(--space-0-5);
    color: var(--color-butter-500);
  }
  .api-key-warning__text {
    font-size: var(--text-13);
    line-height: 1.55;
    color: var(--color-ink);
  }

  .api-key-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }
  .api-key-header__prefix {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }

  .api-key-token {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .api-key-token__copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-10);
    font-size: var(--text-13);
    color: var(--color-ink-2);
    cursor: pointer;
    transition: background var(--dur-fast);
  }
  .api-key-token__copy:hover {
    background: var(--color-paper-soft);
  }
  .api-key-token__copy svg {
    width: var(--space-3-5);
    height: var(--space-3-5);
  }
  .api-key-token__success {
    color: var(--color-sage-500);
  }

  .api-key-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  @media (width >= 640px) {
    .api-key-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .api-key-prefix {
    display: inline-block;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-sm);
    background: var(--color-paper-2);
    border: 1px solid var(--color-ink-10);
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink);
  }

  .settings-readout-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .settings-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
  }

  .webhook-delivery {
    padding: var(--space-3) var(--space-6);
  }
  .webhook-delivery__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .webhook-delivery__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .webhook-delivery__event {
    font-weight: 500;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .webhook-delivery__info {
    flex-shrink: 0;
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }
  .webhook-show-title {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-28);
  }
  .settings-detail-stack {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  /* ── Taxes ─────────────────────────────────────────────────────────── */
  .tax-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* ── Cancellation policies ─────────────────────────────────────────── */
  .cancellation-policy-row__rules {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-13);
  }
  .cancellation-policy-row__label {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .cancellation-policy-row__sep {
    color: var(--color-ink-mute);
  }
  .cancellation-policy-row__rule {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-variant-numeric: tabular-nums;
  }
  .cancellation-policy-row__value {
    font-weight: 600;
    color: var(--color-ink);
  }
  .cancellation-policy-row__arrow {
    color: var(--color-ink-mute);
  }
  .cancellation-policy-row__empty {
    margin-top: var(--space-2);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }

  .cancellation-rule-fields {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .cancellation-rule-fields__body {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-14-5);
    color: var(--color-ink-2);
  }
  .cancellation-rule-fields__text {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .cancellation-rule-fields__field {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-lg);
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast),
      box-shadow var(--dur-fast);
    cursor: text;
  }
  .cancellation-rule-fields__field:has(:focus) {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }
  .cancellation-rule-fields__input {
    width: 3rem;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .cancellation-rule-fields__input:focus {
    outline: none;
    box-shadow: none;
  }
  .cancellation-rule-fields__unit {
    padding-right: var(--space-1);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }

  /* ── Discounts ─────────────────────────────────────────────────────── */
  .discount-row__meta {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-13);
  }
  .discount-row__amount-group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .discount-row__amount {
    font-weight: 600;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
  }
  .discount-row__off {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .discount-row__sep {
    color: var(--color-ink-mute);
  }
  .discount-row__applies {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .discount-row__promo {
    font-family: var(--font-mono);
    font-size: var(--text-12-5);
    color: var(--color-ink-2);
  }
  .discount-row__conditions {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }
  .discount-row__condition {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .discount-row__condition svg {
    width: var(--space-3-5);
    height: var(--space-3-5);
  }
  .discount-row__status {
    flex-shrink: 0;
    padding-top: var(--space-1);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1-5);
  }
  .discount-row__usage {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }

  .discount-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    border: 1px solid;
    font-size: var(--text-13);
  }
  .discount-warning svg {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
  }
  .discount-warning--caution {
    background: var(--color-caution-100);
    border-color: color-mix(in srgb, var(--color-butter-500) 40%, transparent);
    color: var(--color-butter-700);
  }
  .discount-warning--info {
    background: var(--color-paper-soft);
    border-color: var(--color-ink-10);
    color: var(--color-ink-2);
  }

  /* ── Gift certificates ─────────────────────────────────────────────── */
  .gift-cert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
  }
  .gift-cert-row__body {
    flex: 1;
    min-width: 0;
  }
  .gift-cert-row__code {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-15);
    letter-spacing: var(--tracking-label);
    color: var(--color-ink);
  }
  .gift-cert-row__contact {
    margin-top: var(--space-1);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-sm);
  }
  .gift-cert-row__name {
    color: var(--color-ink);
  }
  .gift-cert-row__email {
    color: var(--color-ink-mute);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gift-cert-row__sep {
    color: var(--color-ink-mute);
  }
  .gift-cert-row__stats {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-shrink: 0;
    font-size: var(--text-sm);
  }
  .gift-cert-row__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .gift-cert-row__stat-label {
    margin-bottom: var(--space-0-5);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-2xs);
    color: var(--color-ink-mute);
  }
  .gift-cert-row__balance {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-size: var(--text-lg);
    line-height: 1;
  }
  .gift-cert-row__balance--positive {
    color: var(--color-terra-500);
  }
  .gift-cert-row__balance--zero {
    color: var(--color-ink-mute);
  }
  .gift-cert-row__date {
    font-family: var(--font-mono);
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }
  .gift-cert-row__date--never {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }

  .gift-cert-card-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 11px var(--space-3-5);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-input);
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast),
      box-shadow var(--dur-fast);
  }
  .gift-cert-card-field:focus-within {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }
  .gift-cert-card-field__el {
    flex: 1;
  }
  .gift-cert-card-errors {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-destructive-700);
  }
  .gift-cert-optional-label {
    margin-top: var(--space-2);
    margin-bottom: var(--space-3);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-11);
    color: var(--color-ink-mute);
  }

  .gift-cert-detail {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 1280px) {
    .gift-cert-detail {
      grid-template-columns: 1.4fr 0.85fr;
    }
  }
  .gift-cert-detail__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }
  .gift-cert-rows > * {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2-5);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .gift-cert-rows > *:first-child {
    border-top: 0;
  }
  .gift-cert-rows__item--top {
    align-items: start;
  }
  .gift-cert-row-icon {
    display: inline-flex;
    color: var(--color-ink-mute);
  }
  .gift-cert-row-icon svg {
    width: 1rem;
    height: 1rem;
  }
  .gift-cert-row-icon--top {
    margin-top: var(--space-0-5);
  }
  .gift-cert-row-value {
    color: var(--color-ink);
  }
  .gift-cert-row-caption {
    margin-top: var(--space-1);
    font-size: var(--text-12-5);
    color: var(--color-ink-mute);
  }
  .gift-cert-empty {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .gift-cert-balance-box {
    position: relative;
    margin-top: var(--space-3-5);
    margin-bottom: var(--space-4-5);
    padding: var(--space-4-5) var(--space-5-5);
    text-align: center;
    border: 1.5px dashed;
    border-radius: var(--radius-xl);
  }
  .gift-cert-balance-box--positive {
    border-color: color-mix(in srgb, var(--color-terra-500) 35%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 7%, transparent);
  }
  .gift-cert-balance-box--zero {
    border-color: color-mix(in srgb, var(--color-sage-500) 35%, transparent);
    background: color-mix(in srgb, var(--color-sage-500) 10%, transparent);
  }
  .gift-cert-balance-box__label {
    margin-bottom: var(--space-1-5);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    font-size: var(--text-11);
    color: var(--color-ink-2);
  }
  .gift-cert-balance-box__amount {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    font-size: var(--text-38);
  }
  .gift-cert-balance-box__amount--positive {
    color: var(--color-terra-500);
  }
  .gift-cert-balance-box__amount--zero {
    color: var(--color-sage-700);
  }
  .gift-cert-summary > * {
    display: flex;
    justify-content: space-between;
    padding-block: var(--space-2-5);
    font-size: var(--text-sm);
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .gift-cert-summary > *:first-child {
    border-top: 0;
  }
  .gift-cert-summary__label {
    color: var(--color-ink-mute);
  }
  .gift-cert-summary__value {
    font-weight: 500;
    color: var(--color-ink);
  }
  .gift-cert-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .gift-cert-type {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-size: var(--text-11);
    color: var(--color-ink-mute);
  }
  .gift-cert-empty-cell {
    padding-block: var(--space-6);
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }

  /* ── User groups: capability groups ────────────────────────────────── */
  .user-group-caps {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .user-group-caps__title {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-11);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }

  /* ── File upload (Dropzone; dz-* classes are JS hooks, kept) ────────── */
  .c-file-upload__message {
    padding: var(--space-4) var(--space-2);
    text-align: center;
    border: 1px dashed var(--color-ink-25);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
    cursor: pointer;
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast);
  }
  .c-file-upload__message:hover {
    border-color: var(--color-primary);
    background: var(--color-paper-soft);
  }
  .c-file-upload__gallery {
    display: flex;
    flex-wrap: wrap;
  }

  .c-file-upload-tile {
    margin-top: var(--space-2);
    margin-right: var(--space-2);
  }
  .c-file-upload-tile__frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-lg);
  }
  .c-file-upload-tile__status {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }
  .c-file-upload-tile__status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--color-paper-card);
    border-right: 1px solid var(--color-ink-10);
    border-bottom: 1px solid var(--color-ink-10);
    border-bottom-right-radius: var(--radius-sm);
  }
  .c-file-upload-tile__icon {
    width: var(--space-6);
    height: var(--space-6);
  }
  .c-file-upload-tile__icon--uploading {
    color: var(--color-ink-mute);
  }
  .c-file-upload-tile__icon--success {
    color: var(--color-primary);
  }
  .c-file-upload-tile__icon--error {
    color: var(--color-destructive);
  }
  .c-file-upload-tile__img {
    border-radius: var(--radius-lg);
  }
  .c-file-upload-tile__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--space-1);
    text-align: center;
    font-size: var(--text-xs);
    background: var(--color-paper-card);
    border-top: 1px solid var(--color-ink-10);
  }
  .c-file-upload-tile__error {
    color: var(--color-destructive-700);
  }
  .c-file-upload-tile__remove {
    width: 100%;
    padding: var(--space-1);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-destructive);
    cursor: pointer;
  }
  .c-file-upload-tile__remove:hover {
    color: var(--color-destructive-700);
    text-decoration: underline;
  }

  .c-file-upload-row {
    position: relative;
    margin-top: var(--space-2);
    padding: var(--space-4);
    background: var(--color-paper-card);
    border: 2px solid var(--color-ink-10);
    border-radius: var(--radius-lg);
  }
  .c-file-upload-row__details {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-file-upload-row__main {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .c-file-upload-row__icon {
    width: var(--space-5);
    height: var(--space-5);
  }
  .c-file-upload-row__icon--uploading {
    color: var(--color-ink-mute);
  }
  .c-file-upload-row__icon--success {
    color: var(--color-sage-500);
  }
  .c-file-upload-row__icon--error {
    color: var(--color-destructive);
  }
  .c-file-upload-row__filename {
    font-size: var(--text-sm);
  }
  .c-file-upload-row__error {
    font-size: var(--text-sm);
    color: var(--color-destructive-700);
  }
  .c-file-upload-row__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .c-file-upload-row__thumb {
    height: var(--space-8);
  }
  .c-file-upload-row__remove {
    padding: var(--space-1);
    color: var(--color-destructive);
    cursor: pointer;
  }
  .c-file-upload-row__remove:hover {
    color: var(--color-destructive-700);
  }
  .c-file-upload-row__remove svg {
    width: var(--space-5);
    height: var(--space-5);
  }

  /* ── rezStream credentials panel ───────────────────────────────────── */
  .rezstream-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .rezstream-status--spaced {
    margin-bottom: var(--space-4);
  }
  .rezstream-status__text {
    color: var(--color-ink-2);
  }
  .rezstream-spinner {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .rezstream-lead {
    margin-bottom: var(--space-4);
    color: var(--color-ink-2);
  }

  /* rezStream sidebar sync-status link color (overrides c-sidenav__icon) */
  .rezstream-sync--pending {
    color: var(--color-butter-700);
  }
  .rezstream-sync--invalid {
    color: var(--color-destructive);
  }
  .rezstream-sync--valid {
    color: var(--color-primary);
  }

  /* ── Onboarding link (sidebar) ─────────────────────────────────────── */
  .c-onboarding-link {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: var(--space-3);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
    transition: background var(--dur-fast);
  }
  .c-onboarding-link:hover {
    background: color-mix(in srgb, var(--color-ink) 6%, transparent);
  }
  .c-onboarding-link__label {
    flex: 1;
    font-weight: 700;
  }
  .c-onboarding-link__pct {
    font-weight: 600;
  }
  .c-onboarding-link__chevron {
    width: var(--space-4);
    height: var(--space-4);
    margin-left: var(--space-2);
  }
  .c-onboarding-link__skeleton {
    width: var(--space-8);
    height: var(--space-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  }
  .c-onboarding-link__fill {
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    opacity: 0.1;
  }
  .c-onboarding-review {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    background: var(--color-primary-light);
    color: var(--color-white);
    font-size: var(--text-sm);
    transition: background var(--dur-fast);
  }
  .c-onboarding-review:hover {
    background: var(--color-primary);
  }
  .c-onboarding-review__chevron {
    width: var(--space-4);
    height: var(--space-4);
    margin-left: var(--space-3);
  }
  .c-onboarding-mobile {
    margin-top: var(--space-4);
    list-style: none;
  }

  /* ── PWA install toast ─────────────────────────────────────────────── */
  .c-install-toast {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown);
    display: flex;
    align-items: flex-end;
    padding: var(--space-6) var(--space-4);
    pointer-events: none;
  }

  @media (width >= 640px) {
    .c-install-toast {
      align-items: flex-start;
      padding: var(--space-6);
    }
  }
  .c-install-toast__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
  }

  @media (width >= 640px) {
    .c-install-toast__stack {
      align-items: flex-end;
    }
  }
  .c-install-toast__card {
    pointer-events: auto;
    width: 100%;
    max-width: 24rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-10);
    box-shadow: var(--shadow-paper);
  }
  .c-install-toast__body {
    padding: var(--space-4);
  }
  .c-install-toast__row {
    display: flex;
    align-items: flex-start;
  }
  .c-install-toast__app-icon {
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-paper);
  }
  .c-install-toast__content {
    flex: 1;
    width: 0;
    margin-left: var(--space-3);
    padding-top: var(--space-0-5);
  }
  .c-install-toast__title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
  }
  .c-install-toast__subtitle {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .c-install-toast__actions {
    margin-top: var(--space-3);
    display: flex;
    gap: var(--space-7);
  }
  .c-install-toast__action {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary);
    cursor: pointer;
  }
  .c-install-toast__action:hover {
    color: var(--color-primary-dark);
  }
  .c-install-toast__action--muted {
    color: var(--color-ink-2);
  }
  .c-install-toast__action--muted:hover {
    color: var(--color-ink-mute);
  }
  .c-install-toast__close {
    margin-left: var(--space-4);
    flex-shrink: 0;
    display: inline-flex;
    color: var(--color-ink-mute);
    cursor: pointer;
  }
  .c-install-toast__close:hover {
    color: var(--color-ink);
  }
  .c-install-toast__close-icon {
    width: var(--space-5);
    height: var(--space-5);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Reports
 * (stat cards, label/value metric rows, hub nav rows, date filter, progress
 *  bars, trend indicators, empty states; tables reuse c-data-table)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  /* ── page layout: stacked sections + responsive card grids */
  .report-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5-5);
  }
  .report-cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5-5);
  }

  @media (width >= 640px) {
    .report-cols--3-sm {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 768px) {
    .report-cols--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-cols--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .report-cols--4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-cols--5 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 1024px) {
    .report-cols--4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .report-cols--2-lg {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 1280px) {
    .report-cols--5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  /* borderless 2-up split (revenue-by-source) with a dashed divider on the right column */
  .report-split {
    display: grid;
    grid-template-columns: 1fr;
  }

  @media (width >= 768px) {
    .report-split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .report-split__col--divide {
      border-left: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
    }
  }

  /* ── date-range filter (report_date_filter component + hand-rolled filters) */
  .report-filter-pad {
    padding: var(--space-5) var(--space-6) var(--space-3);
  }
  .report-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
  }
  .report-filter__field {
    flex: 1 1 0%;
    min-width: 12.5rem;
  }

  /* ── stat card: mono-caps eyebrow over a serif-italic number (report_stat) */
  .report-stat {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .report-stat {
      padding: var(--space-5) var(--space-6);
    }
  }
  .report-stat--hero {
    padding: var(--space-8) var(--space-6);
    text-align: center;
  }
  .report-stat--center {
    text-align: center;
  }
  .report-stat__label {
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-11);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }
  .report-stat--hero .report-stat__label {
    margin-bottom: var(--space-3);
  }
  .report-stat__value {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    font-size: var(--text-28);
    color: var(--color-ink);
  }
  .report-stat__value--sm {
    font-size: var(--text-xl);
  }
  .report-stat__value--lg {
    font-size: var(--text-36);
  }
  .report-stat__value--hero {
    font-size: var(--text-64);
    letter-spacing: var(--tracking-tightest);
  }
  .report-stat__value--terra {
    color: var(--color-terra-500);
  }
  .report-stat__value--sage {
    color: var(--color-sage-700);
  }
  .report-stat__value--butter {
    color: var(--color-butter);
  }
  .report-stat__footnote {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }
  .report-stat__empty {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .report-note {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }

  /* ── card-footer total row (taxes) */
  .report-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .report-total__label {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--color-ink);
  }
  .report-total__value {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    font-size: var(--text-22);
    color: var(--color-ink);
  }

  /* ── label/value metric row inside a c-list (metric_row component) */
  .report-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-6);
  }
  .report-metric__label {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .report-metric__label-strong {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
  }
  .report-metric__label-note {
    margin-left: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
  }
  .report-metric__value {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-ink);
  }
  .report-metric__value--terra {
    color: var(--color-terra-500);
  }
  .report-metric__value--sage {
    color: var(--color-sage-700);
  }

  /* ── hub nav row: dashed-circle icon + title + description (report_nav_row) */
  .report-nav-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3-5) var(--space-4);
    text-decoration: none;
    transition: background var(--dur-fast);
  }

  @media (width >= 640px) {
    .report-nav-row {
      padding-inline: var(--space-6);
    }
  }
  .report-nav-row:hover {
    background: var(--color-paper-soft);
  }
  .report-nav-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    background: var(--color-paper);
    border: 1px dashed var(--color-ink-25);
    color: var(--color-ink-2);
  }
  .report-nav-row__icon svg {
    width: var(--space-4);
    height: var(--space-4);
  }
  .report-nav-row__body {
    flex: 1;
    min-width: 0;
  }
  .report-nav-row__title {
    display: block;
    font-weight: 500;
    color: var(--color-ink);
  }
  .report-nav-row__desc {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }

  /* ── horizontal progress bar (occupancy / pickup) */
  .report-bar-row {
    padding: var(--space-3-5) var(--space-6);
  }
  .report-bar-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-1-5);
  }
  .report-bar-row__head span {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
  }
  .report-bar-row__foot {
    margin-top: var(--space-1-5);
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }
  .report-bar {
    width: 100%;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  }
  .report-bar__fill {
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-terra-500);
  }

  /* footnote row outside a metric list (forecast description) */
  .report-aside {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-xs);
    line-height: 1rem;
    color: var(--color-ink-mute);
  }

  /* ── trend indicator: arrow + signed percentage (rate analysis / monthly / pickup) */
  .report-trend {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .report-trend--gap-2 {
    gap: var(--space-2);
  }
  .report-trend--center {
    justify-content: center;
  }
  .report-trend--mt {
    margin-top: var(--space-2);
  }
  .report-trend--up {
    color: var(--color-sage-700);
  }
  .report-trend--down {
    color: var(--color-terra-500);
  }
  .report-trend__icon {
    width: var(--space-4);
    height: var(--space-4);
  }
  .report-trend__icon--md {
    width: var(--space-5);
    height: var(--space-5);
  }
  .report-trend__icon--lg {
    width: var(--space-6);
    height: var(--space-6);
  }
  .report-trend__pct {
    font-size: var(--text-sm);
  }
  .report-trend__pct--lg {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    font-size: var(--text-2xl);
  }
  .report-trend__pct--xl {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    line-height: 1;
    font-size: var(--text-36);
  }
  .report-trend__note {
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
  }

  /* ── pickup pace 3-up panel */
  .report-pace {
    padding: var(--space-6);
  }
  .report-pace__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
  }

  @media (width >= 768px) {
    .report-pace__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ── table wrapper: card gutters + horizontal scroll around a c-data-table */
  .report-table-scroll {
    overflow-x: auto;
    padding: var(--space-4) var(--space-6) 0;
  }

  /* ── back link (discount drilldown) */
  .report-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ink-mute);
    text-decoration: none;
    transition: color var(--dur-fast);
  }
  .report-back:hover {
    color: var(--color-ink);
  }
  .report-back__icon {
    width: var(--space-4);
    height: var(--space-4);
  }
  .report-back__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-11);
    letter-spacing: var(--tracking-caps);
  }

  /* ── inline table action link */
  .report-link {
    font-weight: 500;
    color: var(--color-terra-500);
    text-decoration: none;
    transition: color var(--dur-fast);
  }
  .report-link:hover {
    color: var(--color-terra-600);
  }

  /* ── discount drilldown booking row (reuses c-list-row; bespoke serif amount) */
  .discount-row__mono {
    font-family: var(--font-mono);
  }
  .discount-row__sep {
    margin-inline: var(--space-1);
  }
  .discount-amount-box {
    flex-shrink: 0;
    text-align: right;
  }
  .discount-amount {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-terra-500);
  }
  .discount-amount-label {
    margin-top: 0.125rem;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--color-ink-mute);
  }

  /* ── lazy-load indicator (discount drilldown turbo frame) */
  .report-loading {
    padding-block: var(--space-8);
    text-align: center;
  }
  .report-loading__inner {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }

  /* ── empty states (simple single-line + rich icon/title/description) */
  .report-empty {
    padding: var(--space-8) var(--space-6);
    text-align: center;
  }
  .report-empty__text {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .report-empty--lg {
    padding: var(--space-12) var(--space-6);
  }
  .report-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-12);
    height: var(--space-12);
    margin: 0 auto var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-paper);
    border: 1px dashed var(--color-ink-25);
    color: var(--color-ink-2);
  }
  .report-empty__icon svg {
    width: var(--space-5);
    height: var(--space-5);
  }
  .report-empty__title {
    margin-bottom: var(--space-1);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-ink);
  }
  .report-empty__desc {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }

  /* ── post-stay review report: guest email subline, star rating, feedback cell */
  .post-stay-review-row__email {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-mute);
  }
  .post-stay-review-row__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .post-stay-review-row__rating svg {
    width: var(--space-3-5);
    height: var(--space-3-5);
    color: var(--color-butter-500);
  }
  .post-stay-review-row__rating-value {
    margin-left: var(--space-1);
    color: var(--color-ink-2);
  }
  .post-stay-review-row__feedback {
    max-width: 22.5rem;
    color: var(--color-ink-2);
  }

  /* ── arrival/departure unit matrix: printable section/day grid ─────────
   * A printable sheet (modeled on .booking-folio) wrapping a fixed-layout
   * matrix table: sticky leading "section" column, weekday/date column heads,
   * arrivals/departures rows of unit pills. Print rules collapse the card
   * chrome, drop the pill styling, and page-break between 14-day chunks. */
  .arrival-departure-matrix {
    background: var(--color-paper-card);
    border: 1px dashed var(--color-ink-16);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-paper);
  }
  .arrival-departure-matrix__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px dashed var(--color-ink-16);
  }
  .arrival-departure-matrix__heading {
    min-width: 0;
  }
  .arrival-departure-matrix__heading--end {
    flex-shrink: 0;
    text-align: left;
  }

  @media (width >= 640px) {
    .arrival-departure-matrix__heading--end {
      text-align: right;
    }
  }
  .arrival-departure-matrix__eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-11);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }
  .arrival-departure-matrix__title {
    margin-top: var(--space-1);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-3xl);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--color-ink);
  }
  .arrival-departure-matrix__meta {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .arrival-departure-matrix__generated {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .arrival-departure-matrix__note {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
  }
  .arrival-departure-matrix__scroll {
    overflow-x: auto;
  }
  .arrival-departure-matrix__table {
    width: 100%;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .arrival-departure-matrix__col--section {
    width: 120px;
  }
  .arrival-departure-matrix__corner {
    position: sticky;
    left: 0;
    z-index: 10;
    min-width: 120px;
    padding: var(--space-3);
    border-bottom: 1px dashed var(--color-ink-16);
    border-right: 1px dashed var(--color-ink-16);
    background: var(--color-paper-card);
    text-align: left;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }
  .arrival-departure-matrix__day {
    min-width: 112px;
    padding: var(--space-3);
    border-bottom: 1px dashed var(--color-ink-16);
    border-right: 1px dashed var(--color-ink-16);
    text-align: center;
    vertical-align: top;
  }
  .arrival-departure-matrix__weekday {
    display: block;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }
  .arrival-departure-matrix__date {
    display: block;
    margin-top: var(--space-1);
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--color-ink);
  }
  .arrival-departure-matrix__row-label {
    position: sticky;
    left: 0;
    z-index: 10;
    padding: var(--space-3);
    border-bottom: 1px dashed var(--color-ink-16);
    border-right: 1px dashed var(--color-ink-16);
    background: var(--color-paper-card);
    text-align: left;
    vertical-align: top;
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-lg);
    color: var(--color-ink);
  }
  .arrival-departure-matrix__cell {
    padding: var(--space-3);
    border-bottom: 1px dashed var(--color-ink-16);
    border-right: 1px dashed var(--color-ink-16);
    vertical-align: top;
  }
  .arrival-departure-matrix__units {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
  }
  .arrival-departure-matrix__unit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    min-height: 2rem;
    padding: var(--space-1-5) var(--space-2-5);
    border: 1px dashed var(--color-ink-15);
    border-radius: var(--radius-lg);
    background: var(--color-paper-soft);
    box-shadow: var(--shadow-subtle);
    font-size: var(--text-13);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-ink);
  }
  .arrival-departure-matrix__unit-marker {
    flex-shrink: 0;
    width: 0.375rem;
    height: 0.375rem;
    margin-top: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-ink-30);
  }
  .arrival-departure-matrix__unit-name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  @media print {
    .arrival-departure-matrix {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: var(--color-white);
    }
    .arrival-departure-matrix__header {
      padding: 0 0 0.08in;
      border-bottom: 1px solid var(--color-ink);
    }
    .arrival-departure-matrix__title {
      font-size: 16px;
      line-height: 1.05;
    }
    .arrival-departure-matrix__meta,
    .arrival-departure-matrix__note,
    .arrival-departure-matrix__generated {
      margin-top: 0.03in;
      font-size: 8px;
      line-height: 1.2;
    }
    .arrival-departure-matrix__section {
      break-inside: avoid;
    }
    .arrival-departure-matrix__section + .arrival-departure-matrix__section {
      break-before: page;
    }
    .arrival-departure-matrix__scroll {
      overflow: visible;
    }
    .arrival-departure-matrix__table {
      table-layout: auto;
      border-collapse: collapse;
      border-spacing: 0;
      font-size: 7px;
    }
    .arrival-departure-matrix__col--section {
      width: 0.72in;
    }
    .arrival-departure-matrix__corner,
    .arrival-departure-matrix__day,
    .arrival-departure-matrix__row-label,
    .arrival-departure-matrix__cell {
      position: static;
      min-width: 0;
      padding: 0.025in;
      border: 1px solid var(--color-ink-30);
      overflow: visible;
      overflow-wrap: break-word;
      white-space: normal;
      word-break: normal;
    }
    .arrival-departure-matrix__weekday {
      font-size: 7px;
      letter-spacing: 0.08em;
      line-height: 1;
    }
    .arrival-departure-matrix__date {
      margin-top: 0.015in;
      font-size: 9px;
      line-height: 1.05;
    }
    .arrival-departure-matrix__row-label {
      font-size: 10px;
      line-height: 1.05;
    }
    .arrival-departure-matrix__units {
      gap: 0.025in;
    }
    .arrival-departure-matrix__unit {
      display: block;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      font-size: 7px;
      line-height: 1.08;
    }
    .arrival-departure-matrix__unit-marker {
      display: none;
    }
    .arrival-departure-matrix__unit-name {
      display: inline;
      overflow-wrap: break-word;
      word-break: normal;
    }
  }

  /* ── timesheet report: collapsible per-employee detail + totals */
  .timesheet-page {
    padding-bottom: var(--space-20);
  }

  @media (width >= 1024px) {
    .timesheet-page {
      padding-bottom: 0;
    }
  }
  .timesheet-toggle {
    font-size: var(--text-sm);
    color: var(--color-terra-500);
    cursor: pointer;
  }
  .timesheet-toggle:hover {
    color: var(--color-terra-600);
  }
  .timesheet-detail {
    padding: var(--space-4) var(--space-6);
    background: var(--color-paper-soft);
  }
  .timesheet-subtable {
    width: 100%;
    border-collapse: collapse;
  }
  .timesheet-subtable th {
    padding: var(--space-2) var(--space-4);
    text-align: left;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }
  .timesheet-subtable td {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .timesheet-subtable--right {
    text-align: right;
  }
  .timesheet-subtable--center {
    text-align: center;
  }
  .timesheet-subtable__row td {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .timesheet-subtotal td {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
    background: color-mix(in srgb, var(--color-paper-2) 40%, transparent);
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .timesheet-grand td {
    padding: var(--space-4) var(--space-6);
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
    background: color-mix(in srgb, var(--color-paper-2) 40%, transparent);
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-ink);
  }
  .timesheet-grand td.timesheet-grand--butter {
    color: var(--color-butter);
  }
  .timesheet-edited-icon {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    color: var(--color-butter);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Billing
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .billing-status {
    margin-bottom: var(--space-4);
  }
  .billing-text {
    margin-bottom: var(--space-6);
    color: var(--color-ink-2);
  }
  .billing-panel {
    max-width: 42rem;
  }
  .billing-panel__body {
    padding: var(--space-6);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Recovery (abandoned booking drilldown)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .recovery-page {
    display: block;
  }

  @media (width >= 1024px) {
    .recovery-page {
      margin-top: var(--space-2);
    }
  }
  .recovery-row {
    padding: var(--space-4) var(--space-4);
  }

  @media (width >= 640px) {
    .recovery-row {
      padding-inline: var(--space-6);
    }
  }
  .recovery-row__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .recovery-row__name {
    font-weight: 500;
    color: var(--color-ink);
  }
  .recovery-row__email {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .recovery-row__side {
    text-align: right;
  }
  .recovery-row__date {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Assignee picker (tasks assignment dropdown)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .assignee-option {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
  }
  .assignee-option.is-highlighted,
  .assignee-option:hover {
    background: var(--color-paper-soft);
  }
  .assignee-option:first-child {
    margin-top: var(--space-1);
  }
  .assignee-option:last-child {
    margin-bottom: var(--space-1);
  }
  .assignee-empty {
    padding: var(--space-3);
    color: var(--color-ink-mute);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Emails (sent-email detail readout)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .email-detail-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .email-detail__body {
    padding: var(--space-6);
  }
  .email-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 768px) {
    .email-detail-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .email-detail__label {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .email-detail__label svg {
    width: var(--space-4);
    height: var(--space-4);
    margin-right: var(--space-2);
    color: var(--color-ink-30);
  }
  .email-detail__value {
    font-size: var(--text-base);
    color: var(--color-ink-2);
  }
  .email-detail__value--break {
    word-break: break-all;
  }
  .email-detail__value--empty {
    font-size: var(--text-base);
    font-style: italic;
    color: var(--color-ink-mute);
  }
  .email-detail__value--mono {
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--color-ink-mute);
    word-break: break-all;
  }
  .email-detail__link {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .email-detail__link:hover {
    color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Admin (superadmin dashboard: stat cards, funnel + waterfall charts,
 * properties table, importer forms)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  /* shared form body stack (posts editor + CSV importers) */
  .admin-form-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .admin-form-stack .c-field {
    margin-bottom: 0;
  }

  /* vertical button stack ("Do Admin Stuff") */
  .admin-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* properties table: name cell + right-aligned row actions */
  .admin-property-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .admin-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  /* renewals total (card header action) */
  .admin-renewals-total {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .admin-renewals-total strong {
    margin-left: var(--space-1);
    font-weight: 500;
    color: var(--color-ink);
  }

  /* DAU/MAU sparkline inside an activity stat tile */
  .admin-sparkline {
    margin-top: var(--space-2);
  }

  /* ── funnel: horizontal bars with a centered count + trailing rate */
  .admin-funnel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .admin-funnel__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .admin-funnel__label {
    width: 5rem;
    flex-shrink: 0;
    text-align: right;
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .admin-funnel__track {
    position: relative;
    flex: 1;
    height: 2.5rem;
    background: var(--color-paper-soft);
    border-radius: var(--radius-sm);
  }
  .admin-funnel__fill {
    position: absolute;
    inset-block: 0;
    left: 0;
    border-radius: var(--radius-sm);
  }
  .admin-funnel__fill--trialing {
    background: var(--color-caution-100);
  }
  .admin-funnel__fill--active {
    background: var(--color-sage-100);
  }
  .admin-funnel__fill--inactive {
    background: var(--color-ink-15);
  }
  .admin-funnel__value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .admin-funnel__rate {
    width: 4rem;
    flex-shrink: 0;
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .admin-funnel__rate--positive {
    color: var(--color-sage-700);
  }
  .admin-funnel__total {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-ink-15);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .admin-funnel__total-value {
    margin-left: var(--space-1);
    font-weight: 500;
    color: var(--color-ink);
  }

  /* ── full-time waterfall: header, segmented progress, metric grid, target rows */
  .admin-waterfall {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
  }
  .admin-waterfall__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (width >= 1024px) {
    .admin-waterfall__head {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
    }
  }

  @media (width >= 1024px) {
    .admin-waterfall__profit {
      text-align: right;
    }
  }
  .admin-waterfall__eyebrow {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink-mute);
  }
  .admin-waterfall__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-2xl);
    color: var(--color-ink);
  }
  .admin-waterfall__desc {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .admin-waterfall__profit-value {
    font-family: var(--font-serif);
    font-weight: 500;
    font-style: italic;
    font-size: var(--text-28);
    color: var(--color-ink);
  }

  .admin-waterfall__progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .admin-waterfall__progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
  }
  .admin-waterfall__progress-label {
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .admin-waterfall__progress-pct {
    color: var(--color-ink-mute);
  }
  .admin-waterfall__bar {
    display: flex;
    height: 1.25rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-paper-soft);
  }
  .admin-waterfall__seg {
    position: relative;
    height: 100%;
  }
  .admin-waterfall__seg--info {
    background: var(--color-ink-blue-100);
  }
  .admin-waterfall__seg--sage {
    background: var(--color-sage-100);
  }
  .admin-waterfall__seg--caution {
    background: var(--color-caution-100);
  }
  .admin-waterfall__seg-fill {
    position: absolute;
    inset-block: 0;
    left: 0;
  }
  .admin-waterfall__seg-fill--info {
    background: var(--color-ink-blue);
  }
  .admin-waterfall__seg-fill--sage {
    background: var(--color-sage-500);
  }
  .admin-waterfall__seg-fill--caution {
    background: var(--color-caution);
  }

  .admin-waterfall__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  @media (width >= 1024px) {
    .admin-waterfall__metrics {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .admin-waterfall__metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .admin-waterfall__metric-label {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .admin-waterfall__metric-value {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-ink);
  }

  .admin-waterfall__targets {
    display: flex;
    flex-direction: column;
  }
  .admin-waterfall__target {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) 0;
    border-top: 1px dashed var(--color-ink-15);
  }
  .admin-waterfall__target:first-child {
    border-top: 0;
    padding-top: 0;
  }

  @media (width >= 1024px) {
    .admin-waterfall__target {
      grid-template-columns: 3fr 2fr 2fr 2fr 3fr;
    }
  }
  .admin-waterfall__target-name {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .admin-waterfall__dot {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    margin-top: var(--space-1-5);
    border-radius: var(--radius-pill);
  }
  .admin-waterfall__dot--info {
    background: var(--color-ink-blue);
  }
  .admin-waterfall__dot--sage {
    background: var(--color-sage-500);
  }
  .admin-waterfall__dot--caution {
    background: var(--color-caution);
  }
  .admin-waterfall__target-title {
    font-weight: 600;
    color: var(--color-ink);
  }
  .admin-waterfall__target-name .c-badge {
    margin-top: var(--space-1);
  }
  .admin-waterfall__target-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .admin-waterfall__target-value {
    font-weight: 600;
    color: var(--color-ink);
  }
  .admin-waterfall__note {
    font-size: var(--text-xs);
    color: var(--color-ink-mute);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Authentication & global chrome (sign-in, password reset, unauthenticated
 * layout + footer, user menu, impersonation, popover sheet, lightbox)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-components {
  /* ── unauthenticated layout (auth pages + booking/marketing wide variant) */
  .c-auth {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-8) var(--space-4);
  }

  @media (width >= 640px) {
    .c-auth {
      padding-block: var(--space-14);
    }
  }
  .c-auth--wide {
    align-items: stretch;
    padding: 0;
  }
  .c-auth__inner {
    width: 100%;
    max-width: 32rem;
  }
  .c-auth__topbar {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .c-auth__topbar {
      padding-inline: var(--space-6);
    }
  }

  @media (width >= 1024px) {
    .c-auth__topbar {
      padding-inline: var(--space-8);
    }
  }
  .c-auth__wide-main {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .c-auth__brand {
    margin-bottom: var(--space-7);
    display: flex;
    justify-content: center;
  }
  .c-auth__brand-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
  .c-auth__logo {
    height: var(--space-10);
    width: auto;
  }
  .c-auth__logo--center {
    margin-inline: auto;
  }
  .c-auth__card {
    background: var(--color-paper-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-paper);
    border: 1px solid var(--color-ink-10);
    overflow: hidden;
  }
  .c-auth__card-header {
    padding: var(--space-5);
    border-bottom: 1px dashed var(--color-ink-18);
  }

  @media (width >= 640px) {
    .c-auth__card-header {
      padding: var(--space-6);
    }
  }
  .c-auth__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    text-align: center;
    line-height: 1.25;
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-stat);
  }
  .c-auth__subtitle {
    color: var(--color-ink-2);
    margin-top: var(--space-2);
    text-align: center;
    line-height: 1.625;
    font-size: var(--text-14-5);
  }
  .c-auth__card-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  @media (width >= 640px) {
    .c-auth__card-body {
      padding: var(--space-6);
    }
  }

  /* sign-in / password forms (inside the auth card) */
  .c-auth-form {
    width: 100%;
    max-width: 24rem;
  }
  .c-auth-form__fields {
    display: flex;
    flex-direction: column;
  }
  .c-auth-form__aside {
    text-align: center;
    padding-top: var(--space-5);
  }
  .c-auth-link {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4px;
    transition: color var(--dur-fast);
  }
  .c-auth-link:hover {
    color: var(--color-ink);
  }

  /* dev quick sign-in picker (development only) */
  .c-dev-login {
    width: 100%;
    max-width: 24rem;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px dashed var(--color-ink-18);
  }
  .c-dev-login__heading {
    text-align: center;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink-mute);
    margin-bottom: var(--space-4);
  }
  .c-dev-login__group {
    margin-bottom: var(--space-6);
  }
  .c-dev-login__group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px dashed var(--color-ink-15);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .c-dev-login__property {
    font-weight: 600;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-14-5);
  }
  .c-dev-login__subdomain {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
    flex-shrink: 0;
  }
  .c-dev-login__users {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .c-dev-login__user {
    width: 100%;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-13-5);
    color: var(--color-ink-2);
    border: 1px solid var(--color-ink-10);
    border-radius: var(--radius-xl);
    background: var(--color-paper-card);
    transition: background var(--dur-fast);
    cursor: pointer;
  }
  .c-dev-login__user:hover {
    background: var(--color-paper-2);
  }
  .c-dev-login__user-name {
    font-weight: 500;
  }
  .c-dev-login__user-groups {
    color: var(--color-ink-mute);
    margin-left: var(--space-2);
    font-size: var(--text-12-5);
  }

  /* ── site footer (unauthenticated + booking/marketing) */
  .c-site-footer {
    padding-block: var(--space-12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    border-top: 1px dashed var(--color-ink-15);
    margin-top: var(--space-12);
  }
  .c-site-footer__copyright {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
  }
  .c-site-footer__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
  }

  @media (width >= 640px) {
    .c-site-footer__links {
      flex-direction: row;
      gap: var(--space-4);
    }
  }
  .c-site-footer__link {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast);
  }
  .c-site-footer__link:hover {
    color: var(--color-ink-2);
  }
  .c-site-footer__sep {
    display: none;
    color: var(--color-ink-30);
  }

  @media (width >= 640px) {
    .c-site-footer__sep {
      display: inline;
    }
  }
  .c-site-footer__easter-egg {
    opacity: 0;
    transition: opacity 0.3s;
    margin-top: var(--space-2);
  }
  .c-site-footer__easter-egg:hover {
    opacity: 1;
  }
  .c-site-footer__paw {
    width: var(--space-6);
    height: var(--space-6);
    color: var(--color-ink-30);
  }

  /* ── user menu dropdown (top bar) */
  .c-user-menu {
    position: relative;
  }
  .c-user-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2-5) var(--space-1) var(--space-1);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-ink-10);
    background: var(--color-paper-card);
    color: var(--color-ink);
    font-size: var(--text-13-5);
    cursor: pointer;
    transition: background var(--dur-fast);
  }
  .c-user-menu__trigger:hover {
    background: var(--color-paper-2);
  }
  .c-user-menu__panel {
    position: absolute;
    right: 0;
    margin-top: var(--space-2);
    width: 14rem;
    transform-origin: top right;
    border-radius: var(--radius-xl);
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
    border: 1px solid var(--color-ink-10);
    z-index: var(--z-dropdown);
    padding-block: var(--space-1);
  }
  .c-user-menu__divider {
    border-top: 1px dashed var(--color-ink-15);
    margin-block: var(--space-1);
  }
  .c-user-menu__theme {
    padding: var(--space-1-5) var(--space-3);
  }
  .c-user-menu__theme .c-segmented {
    display: flex;
    width: 100%;
  }
  .c-user-menu__theme .c-segmented__option {
    flex: 1;
    justify-content: center;
    padding: var(--space-1-5) var(--space-2);
    font-size: var(--text-xs);
  }

  /* ── impersonation banner */
  .c-impersonation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-terra-500);
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-4);
    color: var(--color-white);
    height: var(--space-10);
  }
  .c-impersonation__stop {
    display: block;
    text-decoration: underline;
    color: inherit;
  }
  body.is-impersonating {
    margin-top: var(--space-10);
  }

  @media (width >= 1024px) {
    body.is-impersonating {
      margin-top: 0;
    }
  }

  /* ── page frame (filter transition when modal/sheet dims the page) */
  .c-page-frame {
    transition: filter 0.2s;
  }

  /* ── popover sheet (slide-in panel; enter/leave transition strings still
   *    Tailwind utilities swapped by the animation controller — cutover) */
  .c-sheet {
    position: relative;
    z-index: var(--z-popover);
  }
  .c-sheet__overlay {
    position: fixed;
    inset: 0;
    transition: opacity;
    background: color-mix(in srgb, var(--color-ink) 40%, transparent);
  }
  .c-sheet__panel-wrap {
    position: fixed;
    inset: 0;
    width: 100vw;
    margin-top: var(--space-10);
  }

  @media (width >= 640px) {
    .c-sheet__panel-wrap {
      left: auto;
      max-width: 36rem;
      margin-top: 0;
    }
  }
  .c-sheet__panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-paper-card);
    box-shadow: var(--shadow-paper);
    position: relative;
    border-left: 1px solid var(--color-ink-10);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  @media (width >= 640px) {
    .c-sheet__panel {
      border-radius: var(--radius-card) 0 0 var(--radius-card);
    }
  }
  .c-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-4);
    border-bottom: 1px dashed var(--color-ink-18);
  }

  @media (width >= 640px) {
    .c-sheet__header {
      padding-inline: var(--space-6);
    }
  }
  .c-sheet__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tight);
    font-size: var(--text-22);
  }
  .c-sheet__close {
    position: relative;
    border-radius: var(--radius-pill);
    padding: var(--space-1-5);
    color: var(--color-ink-mute);
    transition:
      background var(--dur-fast),
      color var(--dur-fast);
  }
  .c-sheet__close:hover {
    background: var(--color-paper-2);
    color: var(--color-ink);
  }
  .c-sheet__close-icon {
    width: var(--space-5);
    height: var(--space-5);
  }
  .c-sheet__body {
    position: relative;
    flex: 1;
    overflow: hidden;
  }
  .c-sheet__skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-6) 0;
  }
  .c-sheet__skeleton-bar {
    height: var(--space-3);
    background: var(--color-paper-2);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
  }
  .c-sheet__skeleton-bar:last-child {
    margin-bottom: 0;
  }

  /* ── lightbox controls (image gallery overlay) */
  .c-lightbox__nav {
    position: absolute;
    border-radius: var(--radius-pill);
    padding: var(--space-1);
    background: color-mix(in srgb, var(--color-ink) 80%, transparent);
  }
  .c-lightbox__nav--prev {
    left: var(--space-2);
  }
  .c-lightbox__nav--next {
    right: var(--space-2);
  }
  .c-lightbox__nav-icon {
    width: var(--space-6);
    height: var(--space-6);
    color: var(--color-white);
  }
  .c-lightbox__close-form {
    position: fixed;
    top: 0;
    right: 0;
    margin: var(--space-4);
  }
  .c-lightbox__close {
    padding: var(--space-2);
    color: var(--color-white);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-white);
    background: color-mix(in srgb, var(--color-black) 50%, transparent);
  }
  .c-lightbox__close-icon {
    width: var(--space-6);
    height: var(--space-6);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Misc app surfaces (auto-save indicator, load-more, clock widget, dropzone)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  /* auto-save spinner + lazy load-more */
  .c-auto-save {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: var(--space-4);
  }
  .c-auto-save__icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .c-load-more {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
  }

  /* clock in/out widget (sidebar full + top-bar compact) */
  .c-clock-widget {
    padding-bottom: var(--space-3);
  }
  .c-clock-widget__compact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .c-clock-widget__icon {
    width: var(--space-4);
    height: var(--space-4);
    flex-shrink: 0;
  }
  .c-clock-widget__icon--primary {
    color: var(--color-primary);
  }
  .c-clock-widget__icon--sage {
    color: var(--color-sage-700);
  }
  .c-clock-widget__icon--muted {
    color: var(--color-ink-mute);
  }
  .c-clock-widget__time {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--color-ink-mute);
  }
  .c-clock-widget__time--compact {
    color: var(--color-ink-2);
  }
  .c-clock-widget__status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-3);
  }
  .c-clock-widget__status-body {
    flex: 1;
    min-width: 0;
  }
  .c-clock-widget__status-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .c-clock-widget__label {
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .c-clock-widget__label--muted {
    color: var(--color-ink-30);
  }
  .c-clock-widget__action {
    padding-inline: var(--space-3);
    margin-top: var(--space-2);
  }
  .c-clock-widget__button {
    font-weight: 600;
  }

  /* image dropzone (Dropzone.js — dz-* hooks + .hidden/.group/animate-spin
   *  state classes preserved as Tailwind for the cutover sweep) */
  .c-dropzone__prompt {
    text-align: center;
    cursor: pointer;
    transition:
      background var(--dur-fast),
      border-color var(--dur-fast);
    background: var(--color-paper-soft);
    border: 2px dashed color-mix(in srgb, var(--color-ink) 20%, transparent);
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-5);
  }
  .c-dropzone__prompt:hover {
    border-color: color-mix(in srgb, var(--color-ink) 40%, transparent);
    background: color-mix(in srgb, var(--color-paper-2) 60%, transparent);
  }
  .c-dropzone__prompt-icon {
    width: var(--space-7);
    height: var(--space-7);
    color: var(--color-ink-mute);
    margin-bottom: var(--space-2);
  }
  .c-dropzone__prompt-text {
    font-size: var(--text-13);
    color: var(--color-ink-2);
    margin: 0;
  }
  .c-dropzone__browse {
    color: var(--color-ink);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
  }
  .c-dropzone__grid {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .c-dropzone__grid:empty {
    display: none;
  }

  @media (width >= 640px) {
    .c-dropzone__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width >= 768px) {
    .c-dropzone__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .c-dropzone__tile {
    position: relative;
    aspect-ratio: 1;
  }
  .c-dropzone__tile-img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    object-fit: cover;
    border: 1px solid var(--color-ink-15);
  }
  .c-dropzone__tile-img--abs {
    position: absolute;
    inset: 0;
  }
  .c-dropzone__remove {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: var(--space-7);
    height: var(--space-7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-15);
    color: var(--color-ink-2);
    transition:
      color var(--dur-fast),
      border-color var(--dur-fast);
    cursor: pointer;
    box-shadow: var(--shadow-paper);
  }
  .c-dropzone__remove:hover {
    color: var(--color-terra-500);
    border-color: color-mix(in srgb, var(--color-terra-500) 40%, transparent);
  }
  .c-dropzone__remove-icon {
    width: 0.875rem;
    height: 0.875rem;
  }
  .c-dropzone__single {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }
  .c-dropzone__single:empty {
    display: none;
  }
  .c-dropzone__file {
    display: flex;
    align-items: center;
    gap: var(--space-4);
  }
  .c-dropzone__thumb {
    object-fit: cover;
    border: 1px solid var(--color-ink-15);
    flex-shrink: 0;
  }
  .c-dropzone__thumb--square {
    width: var(--space-24);
    height: var(--space-24);
    border-radius: var(--radius-xl);
  }
  .c-dropzone__thumb--circle {
    width: var(--space-20);
    height: var(--space-20);
    border-radius: var(--radius-pill);
  }
  .c-dropzone__thumb-wrap {
    position: relative;
    flex-shrink: 0;
  }
  .c-dropzone__thumb-wrap--square {
    width: var(--space-24);
    height: var(--space-24);
  }
  .c-dropzone__thumb-wrap--circle {
    width: var(--space-20);
    height: var(--space-20);
  }
  .c-dropzone__file-body {
    min-width: 0;
  }
  .c-dropzone__filename {
    font-size: var(--text-13);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
  }
  .c-dropzone__inline-remove {
    color: var(--color-ink-2);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
    font-size: var(--text-13);
    font-family: var(--font-serif);
    font-style: italic;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: var(--space-1);
    transition: color var(--dur-fast);
  }
  .c-dropzone__inline-remove:hover {
    color: var(--color-terra-500);
  }
  .c-dropzone__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    background: var(--color-paper-soft);
    border: 1px solid var(--color-ink-15);
  }
  .c-dropzone__spin-icon {
    width: var(--space-6);
    height: var(--space-6);
    color: var(--color-ink-mute);
  }
  .c-dropzone__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-paper) 70%, transparent);
  }
  .c-dropzone__overlay--square {
    border-radius: var(--radius-xl);
  }
  .c-dropzone__overlay--circle {
    border-radius: var(--radius-pill);
  }
  .c-dropzone__overlay-icon {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }
  .c-dropzone__status-icon {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    width: var(--space-4);
    height: var(--space-4);
  }
  .c-dropzone__status-icon--success {
    color: var(--color-sage-500);
  }
  .c-dropzone__status-icon--error {
    color: var(--color-destructive);
  }
  .c-dropzone__status-icon--center {
    top: 50%;
    left: 50%;
    width: var(--space-5);
    height: var(--space-5);
    transform: translate(-50%, -50%);
  }
  .c-dropzone__tile-error {
    position: absolute;
    bottom: var(--space-2);
    left: var(--space-2);
    right: var(--space-12);
    color: var(--color-destructive);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--text-12-5);
  }
  .c-dropzone__file-error {
    font-size: var(--text-13);
    color: var(--color-destructive);
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Booking standalone pages (terms, recovery links — render in the app layout,
 * not the booking_flow canvas; .prose stays Tailwind until cutover)
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  .booking-terms {
    max-width: 56rem;
    margin-inline: auto;
    padding: var(--space-6);
  }
  .booking-recovery {
    max-width: 28rem;
    margin-inline: auto;
    padding-block: var(--space-16);
    text-align: center;
  }
  .booking-recovery__icon {
    width: var(--space-12);
    height: var(--space-12);
    margin: 0 auto var(--space-4);
    color: var(--color-ink-30);
  }
  .booking-recovery__heading {
    margin-bottom: var(--space-2);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--color-ink);
  }
  .booking-recovery__text {
    margin-bottom: var(--space-6);
    color: var(--color-ink-mute);
  }
  .booking-recovery__note {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--color-sage-100);
    color: var(--color-sage-700);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
  }
}

/* Deposit collections + booking payments */
@layer ds-features {
  .c-data-table a {
    color: var(--color-primary);
    text-decoration: none;
  }
  .c-data-table a:hover {
    text-decoration: underline;
  }

  .deposit-method {
    display: inline-flex;
    align-items: center;
  }
  .deposit-method__icon {
    width: var(--space-4);
    height: var(--space-4);
  }
  .deposit-method--ready {
    color: var(--color-sage-500);
  }
  .deposit-method--missing {
    color: var(--color-destructive);
  }

  .booking-payment-result {
    margin-top: var(--space-4);
  }
  .booking-payment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (width >= 768px) {
    .booking-payment-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 1024px) {
    .booking-payment-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .booking-payment-subhead {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: var(--color-paper);
    border-top: 1px solid var(--color-ink-10);
    border-bottom: 1px solid var(--color-ink-10);
  }
  .booking-payment-subhead__icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .booking-payment-subhead__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-2);
  }

  .booking-payment-alert {
    margin-top: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .booking-payment-alert__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
  }
  .booking-payment-alert__title {
    font-size: var(--text-sm);
    font-weight: 600;
  }
}

/* JS-driven enter/leave transitions (toggled by Stimulus controllers via
 * stimulus-use useTransition — semantic classes, not Tailwind utilities) */
@layer ds-components {
  /* dropdown menu — fade + scale (dropdown controller) */
  .c-dropdown-enter {
    transition:
      opacity 0.1s var(--ease),
      transform 0.1s var(--ease);
  }
  .c-dropdown-leave {
    transition:
      opacity 0.075s ease-in,
      transform 0.075s ease-in;
  }
  .c-dropdown-from {
    opacity: 0;
    transform: scale(0.95);
  }
  .c-dropdown-to {
    opacity: 1;
    transform: scale(1);
  }

  /* toast — slide-up + fade on mobile, slide-in from right on sm+
     (flash-notice + install controllers) */
  .c-toast-enter-active {
    transition:
      transform 0.3s ease-out,
      opacity 0.3s ease-out;
  }
  .c-toast-leave-active {
    transition: opacity 0.1s ease-in;
  }
  .c-toast-enter-from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  .c-toast-enter-to {
    opacity: 1;
    transform: translateY(0);
  }
  .c-toast-leave-from {
    opacity: 1;
  }
  .c-toast-leave-to {
    opacity: 0;
  }

  @media (width >= 640px) {
    .c-toast-enter-from {
      transform: translateX(0.5rem) translateY(0);
    }
    .c-toast-enter-to {
      transform: translateX(0) translateY(0);
    }
  }

  /* slide-in sheet / popover overlay + panel (animation controller) */
  .c-sheet__overlay--anim {
    transition: opacity 0.3s ease-in-out;
  }
  .c-sheet__overlay--clear {
    opacity: 0;
  }
  .c-sheet__overlay--opaque {
    opacity: 1;
  }
  .c-sheet__panel-wrap--anim {
    transition: transform 0.3s ease-in-out;
  }
  .c-sheet__panel-wrap--off {
    transform: translateY(100%);
  }
  .c-sheet__panel-wrap--on {
    transform: translateY(0);
  }

  @media (width >= 640px) {
    .c-sheet__panel-wrap--off {
      transform: translateX(100%) translateY(0);
    }
    .c-sheet__panel-wrap--on {
      transform: translateX(0) translateY(0);
    }
  }
}

/* Group-hover reveals — escaped functional selectors (the group/<name> marker
 * also drives c-tooltip, so it stays in markup). Replaces Tailwind group-hover.
 * UNLAYERED on purpose: the revealed elements also carry `.hidden` (which is
 * unlayered), so these must be unlayered too — and win on specificity — to
 * override it on hover. In a layer they'd always lose to unlayered `.hidden`. */
.group\/button:hover .group-hover\/button\:hidden {
  display: none;
}
.group\/button:hover .group-hover\/button\:block {
  display: block;
}
.group\/cell:hover .group-hover\/cell\:flex {
  display: flex;
}
.group\/row:hover .group-hover\/row\:opacity-100 {
  opacity: 1;
}
.group\/row:hover .group-hover\/row\:flex {
  display: flex;
}
.group:hover .group-hover\:hidden {
  display: none;
}
.group:hover .group-hover\:block {
  display: block;
}

/* Leftover widget classes rehomed off the Tailwind source at cutover. */
@layer ds-components {
  /* legacy bordered input (tasks form, gift-cert lookup) */
  .legacy-text-field {
    display: block;
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-xl);
    outline: none;
  }
  .legacy-text-field:hover {
    border-color: var(--color-ink-mute);
  }
  .legacy-text-field:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 1px var(--color-primary);
  }

  /* inspection grunge stamp (housekeeping) */
  .stamp {
    text-transform: uppercase;
    font-weight: 700;
    font-size: var(--text-3xl);
    line-height: 1;
    transform: rotate(12deg);
    border-radius: var(--radius-2xl);
    border: 8px double;
    padding: var(--space-2);
    font-family: Courier, monospace;
    -webkit-mask-image: url("/assets/grunge-ec67c399.png");
    mask-image: url("/assets/grunge-ec67c399.png");
    -webkit-mask-size: 944px 604px;
    mask-size: 944px 604px;
    -webkit-mask-position: 2rem 3rem;
    mask-position: 2rem 3rem;
  }

  @media (width >= 1024px) {
    .stamp {
      mix-blend-mode: multiply;
    }
  }
  .stamp-failed {
    color: var(--color-destructive);
    border-color: var(--color-destructive);
  }
  .stamp-passed {
    color: var(--color-sage-500);
    border-color: var(--color-sage-500);
  }

  /* fullscreen image lightbox <dialog> (the inner controls are c-lightbox__*) */
  .lightbox {
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-paper) 50%, transparent);
    overflow: hidden;
    border: 0;
    inset: 0;
    margin: auto;
    block-size: 100dvh;
    inline-size: 100dvw;
    max-height: unset;
    max-width: unset;
  }
  .lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lightbox::backdrop {
    -webkit-backdrop-filter: blur(66px);
    backdrop-filter: blur(66px);
  }
  .lightbox__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* quantity stepper number input (booking products) */
  .quantity-stepper-input {
    width: var(--space-10);
    text-align: center;
    border: 0;
    padding: 0;
    color: var(--color-ink-2);
    font-size: var(--text-sm);
    font-weight: 500;
    background: transparent;
    outline: none;
  }

  .quantity-stepper-input::-webkit-inner-spin-button,
  .quantity-stepper-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .quantity-stepper-input[type="number"] {
    -moz-appearance: textfield;
  }

  /* flash notices clear a native bottom button bar when present */
  body:has(#bottom-button-bar) #flash-notices {
    bottom: var(--space-10);
  }

  @media (width >= 640px) {
    body:has(#bottom-button-bar) #flash-notices {
      bottom: 0;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Feature classes converted from Tailwind utilities at cutover (parallel sweep).
 * ════════════════════════════════════════════════════════════════════════ */
@layer ds-features {
  /* list container with CSS-driven empty state (housekeepings, projects, comments).
     Lives in ds-features so the display: none outranks feature rules that set
     display on .list-content nodes (e.g. .project-tasks__header). */
  .list:has(.list-element:not(.hidden)) .empty-state {
    display: none;
  }
  .list:not(:has(.list-element)) .list-content {
    display: none;
  }

  /* views/my_schedule/show.html.haml */
  .schedule-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
  }
  .schedule-week-nav__range {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .schedule-week-nav__title {
    color: var(--color-ink);
    text-align: center;
    font-size: 18px;
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: var(--tracking-tightest);
  }
  .schedule-week-nav__today {
    margin-top: var(--space-1);
    color: var(--color-ink-mute);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    font-family: var(--font-mono);
    text-transform: uppercase;
    transition:
      color var(--dur-fast),
      background-color var(--dur-fast),
      border-color var(--dur-fast);
  }
  .schedule-week-nav__today:hover {
    color: var(--color-ink);
  }
  .schedule-empty {
    padding: var(--space-20) var(--space-6) var(--space-20) var(--space-6);
    text-align: center;
  }
  .schedule-empty__icon {
    width: var(--space-8);
    height: var(--space-8);
    color: var(--color-ink-mute);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-4);
  }
  .schedule-empty__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
  }
  .schedule-empty__message {
    margin-top: var(--space-2);
  }
  .my-schedule__list > * + * {
    border-top: 1px dashed var(--color-ink-16);
  }
  .schedule-day {
    padding: var(--space-4);
  }
  .schedule-day--today {
    background-color: var(--color-paper-soft);
  }
  .schedule-day--past {
    opacity: 0.6;
  }
  .schedule-day__header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }
  .schedule-day__icon {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }
  .schedule-day--today .schedule-day__icon {
    color: var(--color-terra-500);
  }
  .schedule-day__title {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: var(--tracking-tightest);
    font-size: var(--text-base);
    line-height: 1.5rem;
    color: var(--color-ink);
  }
  .schedule-day--today .schedule-day__title {
    color: var(--color-terra-500);
  }
  .schedule-day__shifts {
    margin-left: var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .schedule-shift {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }
  .schedule-shift__icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
  }
  .schedule-day--today .schedule-shift__icon {
    color: var(--color-terra-500);
  }
  .schedule-shift__time {
    font-weight: 500;
    color: var(--color-ink);
  }
  .schedule-shift__notes {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }

  /* views/payment_processing/index.html.haml */
  .payment-processing {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 720px;
  }
  .payment-processing__body {
    padding: var(--space-4) var(--space-4);
  }
  .payment-processing__status {
    margin-bottom: var(--space-4);
  }
  .payment-processing__status--inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .payment-processing__text {
    color: var(--color-ink-2);
  }
  .payment-processing__text--gap {
    margin-bottom: var(--space-6);
  }
  .payment-processing__text--inset {
    margin-top: var(--space-3);
  }
  .payment-processing__spinner {
    color: var(--color-ink-mute);
    width: var(--space-4);
    height: var(--space-4);
  }
  .payment-processing__button {
    width: fit-content;
  }

  /* views/settings/api_keys/show.html.haml */
  .api-key-empty {
    color: var(--color-ink-mute);
    font-size: var(--text-sm);
  }

  /* views/rates_questions/_question.html.haml */
  .rates-question {
    border-radius: var(--radius-card);
    border: 1px solid var(--color-ink-10);
    background: var(--color-paper-card);
    overflow: hidden;
    box-shadow: var(--shadow-paper);
  }
  .rates-question__head {
    padding: var(--space-4) var(--space-5) var(--space-3);
  }
  .rates-question__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .rates-question__eyebrow-rule {
    width: 18px;
    height: 1px;
    background: var(--color-terra-500);
    opacity: 0.7;
  }
  .rates-question__prompt {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -0.01em;
    line-height: 1.375;
    color: var(--color-ink);
  }
  .rates-question__prompt em {
    font-style: italic;
    font-weight: 400;
  }
  .rates-question__answered {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px dashed var(--color-ink-10);
    background: var(--color-paper-soft);
  }
  .rates-question__answered-icon {
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-sage-500);
  }
  .rates-question__answered-text {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .rates-question__answered-value {
    font-weight: 500;
    color: var(--color-ink);
  }
  .rates-question__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-4);
  }
  .rates-question__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-xl);
    border: 1px dashed color-mix(in srgb, var(--color-ink) 22%, transparent);
    background: var(--color-paper-card);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .rates-question__option:hover {
    border-style: solid;
    border-color: var(--color-terra-500);
    background: color-mix(in srgb, var(--color-terra-500) 4%, transparent);
  }
  .rates-question__option-key {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-6);
    height: var(--space-6);
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    background: var(--color-paper-soft);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--text-11);
    color: var(--color-ink-2);
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      border-color 0.15s ease;
  }
  .rates-question__option:hover .rates-question__option-key {
    background: var(--color-terra-500);
    border-color: var(--color-terra-500);
    color: var(--color-paper-card);
  }
  .rates-question__option-body {
    flex: 1 1 0%;
    min-width: 0;
  }
  .rates-question__option-label {
    font-size: 14.5px;
    color: var(--color-ink);
  }
  .rates-question__option-label em {
    font-style: italic;
    font-family: var(--font-serif);
  }
  .rates-question__option-desc {
    margin-top: var(--space-0-5);
    font-size: var(--text-13);
    line-height: 1.625;
    color: var(--color-ink-mute);
  }
  .rates-question__option-arrow {
    flex-shrink: 0;
    width: var(--space-4);
    height: var(--space-4);
    color: var(--color-ink-mute);
    opacity: 0;
    transition: all 0.15s ease;
  }
  .rates-question__option:hover .rates-question__option-arrow {
    opacity: 1;
    color: var(--color-terra-500);
    transform: translateX(2px);
  }
  .rates-question__footer {
    padding: var(--space-2) var(--space-5);
    border-top: 1px dashed var(--color-ink-10);
    background: var(--color-paper-soft);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }

  /* views/tasks/show.html.haml */
  .task-status-toggle__icon--complete {
    color: var(--color-sage-500);
  }
  .task-status-toggle__icon--open {
    color: var(--color-ink-mute);
  }
  .task-status-toggle__label {
    color: var(--color-ink);
  }

  /* views/tasks/_form.html.haml */
  .task-form {
    max-width: 720px;
  }
  .task-form__footer-pad {
    padding: var(--space-4);
  }

  .task-form__body {
    padding: var(--space-4);
  }
  .task-form__repeat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .task-form__repeat-input {
    width: var(--space-20);
  }
  .task-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .task-form__updated {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
    font-size: var(--text-13);
  }
  .task-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* views/housekeepings/show.html.haml */
  .housekeeping-action-bar__notes-icon {
    color: var(--color-primary);
  }

  /* views/housekeepings/inspection.html.haml */
  .housekeeping-detail__stamp {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    pointer-events: none;
  }

  /* views/projects/show.html.haml */
  .project-tasks__header {
    display: flex;
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: var(--text-2xs);
    color: var(--color-ink-mute);
    letter-spacing: var(--tracking-caps);
    border-bottom: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .project-tasks__header-spacer {
    width: var(--space-5);
  }
  .project-tasks__header-main {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
  }
  .project-tasks__header-cell {
    padding: var(--space-3) var(--space-1);
  }
  .project-tasks__header-col .project-tasks__header-cell {
    padding: var(--space-3);
  }
  .project-tasks__header-col {
    width: var(--space-48);
  }
  .project-tasks__rows > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }

  /* views/projects/_form.html.haml */
  .project-form__card {
    max-width: 720px;
  }
  .project-form__optional {
    margin-left: var(--space-2);
    font-weight: 400;
    font-size: var(--text-13);
    color: var(--color-ink-mute);
    letter-spacing: 0;
    font-family: var(--font-serif);
    font-style: italic;
  }
  .project-form__user-list {
    position: absolute;
    width: 100%;
    margin-left: calc(-1 * var(--space-3));
    transform-origin: top left;
    z-index: 20;
  }
  .project-form__user-list-panel {
    margin-top: var(--space-1);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-15);
    border-radius: 10px;
  }
  .project-form__user-list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
  }
  .project-form__display {
    cursor: pointer;
  }
  .project-form__placeholder {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .project-form__placeholder-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--space-5);
    height: var(--space-5);
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-pill);
  }
  .project-form__placeholder-text {
    color: var(--color-ink-mute);
  }
  .project-form__unassign {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    align-items: center;
    padding: var(--space-3);
    z-index: 20;
    background: var(--color-paper-2);
    border-radius: var(--radius-sm);
  }
  .project-form__unassign-button {
    border-radius: var(--radius-sm);
    color: var(--color-ink-mute);
    cursor: pointer;
  }
  .project-form__unassign-button:hover {
    color: var(--color-ink);
  }
  .project-form__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .project-form__last-updated {
    font-size: var(--text-12-5);
    color: var(--color-ink-mute);
    font-family: var(--font-serif);
    font-style: italic;
  }
  .project-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* views/projects/_load_more.html.haml */
  .project-load-more {
    display: flex;
    flex: 1 1 0%;
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
    color: var(--color-ink-mute);
    font-size: var(--text-sm);
  }

  /* views/native_sidebar/show.html.haml */
  .native-sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
    background: var(--color-paper);
    color: var(--color-ink);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    padding-bottom: var(--space-6);
    border-right: 1px solid var(--color-ink);
    gap: var(--space-4);
  }
  .native-sidebar__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    height: 3.5rem;
  }
  .native-sidebar__property {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .native-sidebar__property-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    margin-bottom: 0.125rem;
    font-size: 9px;
    letter-spacing: 0.2em;
  }
  .native-sidebar__property-name {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 500;
    color: var(--color-ink);
    font-size: 18px;
    letter-spacing: -0.01em;
  }
  .sidebar-theme {
    padding: var(--space-2) var(--space-3) var(--space-1);
  }
  .sidebar-theme__label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    margin-bottom: var(--space-2);
    font-size: 9px;
    letter-spacing: 0.2em;
  }
  .sidebar-theme__toggle {
    display: flex;
    width: 100%;
  }
  .sidebar-theme__toggle .c-segmented__option {
    flex: 1;
    justify-content: center;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    font-size: var(--text-xs);
  }
  .native-sidebar__nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: -0.125rem;
  }
  .native-sidebar__nav-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* views/email_templates/_variables.html.haml */
  .template-variable__success-icon {
    color: var(--color-sage-500);
  }

  /* views/schedules/index.html.haml */
  .schedule-week-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-4);
    border-bottom: 1px dashed color-mix(in srgb, var(--color-ink) 18%, transparent);
  }
  .schedule-week-bar__group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 0%;
  }
  .schedule-week-bar__group--end {
    justify-content: flex-end;
  }
  .schedule-week-bar__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: -0.01em;
    text-align: center;
    flex-shrink: 0;
    font-size: 18px;
  }
  .schedule-grid-scroll {
    overflow-x: auto;
  }
  .schedule-grid {
    min-width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .schedule-grid__head-row {
    border-bottom: 1px dashed color-mix(in srgb, var(--color-ink) 18%, transparent);
  }
  .schedule-grid__th {
    padding: var(--space-3) var(--space-4);
    font-weight: 400;
    white-space: nowrap;
  }
  .schedule-grid__th--staff {
    text-align: left;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-ink-mute);
    font-size: var(--text-11);
  }
  .schedule-grid__th--day {
    text-align: center;
  }
  .schedule-grid__th--today {
    background: var(--color-paper-soft);
  }
  .schedule-grid__day-name {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
  }
  .schedule-grid__day-meta {
    font-family: var(--font-mono);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10.5px;
    margin-top: var(--space-1);
    color: var(--color-ink-mute);
  }
  .schedule-grid__day-meta--today {
    color: var(--color-sage-700);
  }
  .schedule-grid__body > tr + tr {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .schedule-grid__staff {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
    vertical-align: top;
    white-space: nowrap;
  }
  .schedule-grid__cell {
    padding: var(--space-2);
    vertical-align: top;
    min-width: 120px;
  }
  .schedule-grid__cell--today {
    background: var(--color-paper-soft);
  }
  .schedule-chip {
    display: block;
    margin-bottom: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px dashed transparent;
  }
  .schedule-chip--time-off {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 10.5px;
    border-color: color-mix(in srgb, var(--color-terra-500) 40%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 8%, transparent);
    color: var(--color-terra-700);
  }
  .schedule-chip--shift {
    font-size: var(--text-xs);
    transition: opacity 0.15s ease;
  }
  .schedule-chip--shift:hover {
    opacity: 0.8;
  }
  .schedule-chip--published {
    border-color: color-mix(in srgb, var(--color-sage-500) 45%, transparent);
    background: color-mix(in srgb, var(--color-sage-500) 12%, transparent);
    color: var(--color-sage-700);
  }
  .schedule-chip--unpublished {
    border-color: color-mix(in srgb, var(--color-butter-500) 55%, transparent);
    background: color-mix(in srgb, var(--color-butter) 18%, transparent);
    color: var(--color-butter-700);
  }
  .schedule-chip__notes {
    color: var(--color-ink-mute);
  }
  .schedule-grid__add {
    display: block;
    margin-top: var(--space-1);
    text-align: center;
    color: var(--color-ink-mute);
    border-radius: var(--radius-lg);
    padding: var(--space-1);
    font-size: var(--text-xs);
    transition:
      color 0.15s ease,
      background-color 0.15s ease;
  }
  .schedule-grid__add:hover {
    color: var(--color-terra-500);
    background: var(--color-paper-soft);
  }

  /* views/document/sections/_section.html.haml */
  .doc-section {
    padding: var(--space-8) var(--space-6);
  }
  .doc-section__heading {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
  }
  .doc-section__anchor {
    position: absolute;
    left: 0;
    margin-left: calc(-1 * var(--space-8));
    padding: var(--space-2);
    color: var(--color-ink-mute);
  }
  .doc-section__anchor:hover {
    color: var(--color-ink);
  }
  .doc-section__anchor-icon {
    width: var(--space-4);
    height: var(--space-4);
  }
  .doc-section__title {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.025em;
    color: var(--color-ink);
  }
  .doc-section__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-4);
  }
  .doc-section__action {
    padding: var(--space-2);
  }

  /* views/documents/handbooks/_handbook.html.haml */
  .handbook-sections > * + * {
    border-top: 1px dashed color-mix(in srgb, var(--color-ink) 16%, transparent);
  }
  .handbook-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-6);
  }
  .handbook-empty__art {
    width: 10rem;
    height: 10rem;
    flex-shrink: 0;
  }
  .handbook-empty__body {
    flex: 1 1 0%;
    max-width: 65ch;
  }
  .handbook-empty__title {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: -0.04em;
    margin-bottom: var(--space-4);
    font-size: 28px;
  }
  .handbook-empty__copy {
    color: var(--color-ink-2);
    line-height: 1.625;
  }
  .handbook-empty__copy > * + * {
    margin-top: var(--space-3);
  }
  .handbook-empty__list {
    list-style: decimal;
    margin-left: var(--space-4);
  }
  .handbook-empty__list > * + * {
    margin-top: var(--space-1);
  }
  .handbook-empty__link {
    text-decoration: underline;
    color: var(--color-ink-2);
  }
  .handbook-empty__link:hover {
    color: var(--color-ink);
  }
  .handbook-empty__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
  .handbook-empty__or {
    color: var(--color-ink-mute);
  }

  @media (width >= 768px) {
    .handbook-empty {
      flex-direction: row;
      gap: var(--space-20);
      padding-left: var(--space-20);
      padding-right: var(--space-20);
    }
  }

  /* views/dev/sms_simulator/show.html.haml */
  .sms-simulator {
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .sms-simulator__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .sms-simulator__eyebrow {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--color-ink-mute);
    letter-spacing: 0.1em;
    font-size: var(--text-11);
    margin-bottom: var(--space-2);
  }
  .sms-simulator__heading {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tightest);
    line-height: 1.25;
    font-size: 42px;
  }
  .sms-simulator__subtitle {
    color: var(--color-ink-2);
    margin-top: var(--space-2);
    line-height: 1.625;
    font-size: 15px;
  }
  .sms-simulator__card-body {
    padding: var(--space-6) var(--space-7);
  }
  .sms-simulator__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .sms-simulator__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .sms-simulator__textarea {
    min-height: 7rem;
  }
  .sms-simulator__actions {
    display: flex;
    justify-content: flex-end;
  }
  .sms-simulator__empty {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
    text-align: center;
  }
  .sms-simulator__empty-icon {
    width: var(--space-8);
    height: var(--space-8);
    color: var(--color-ink-mute);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-3);
  }
  .sms-simulator__empty-title {
    font-family: var(--font-serif);
    color: var(--color-ink);
    font-size: 22px;
  }
  .sms-simulator__empty-body {
    color: var(--color-ink-mute);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
  }

  /* views/profiles/show.html.haml */
  .profile-card {
    max-width: 720px;
  }
  .profile-card__footer-pad {
    padding: var(--space-4);
  }
  .profile-card__body {
    padding: var(--space-4);
  }
  .profile-name-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--space-3);
  }
  .profile-optional-label {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    color: var(--color-ink-mute);
    font-size: var(--text-13);
    margin-left: var(--space-2);
  }
  .profile-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
  .profile-field-group__label {
    display: flex;
    align-items: center;
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
  }
  .profile-field-group__description {
    font-size: var(--text-13);
    color: var(--color-ink-2);
    line-height: 1.5;
    margin-top: calc(var(--space-1) * -1);
    margin-bottom: var(--space-1);
  }
  .profile-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .profile-footer__timestamp {
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--color-ink-mute);
    font-size: var(--text-12-5);
  }
  .profile-footer__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* views/gift_certificates/lookup.turbo_stream.haml */
  .gc-lookup-result {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border-radius: var(--radius-xl);
    border-width: 1.5px;
    border-style: dashed;
  }
  .gc-lookup-result--success {
    border-color: color-mix(in srgb, var(--color-sage-500) 45%, transparent);
    background-color: color-mix(in srgb, var(--color-sage-500) 10%, transparent);
  }
  .gc-lookup-result--error {
    border-color: color-mix(in srgb, var(--color-destructive) 45%, transparent);
    background-color: color-mix(in srgb, var(--color-destructive) 10%, transparent);
  }
  .gc-lookup-result--warning {
    border-color: color-mix(in srgb, var(--color-butter-500) 55%, transparent);
    background-color: color-mix(in srgb, var(--color-butter) 18%, transparent);
  }
  .gc-lookup-result__body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .gc-lookup-result__icon {
    width: var(--space-6);
    height: var(--space-6);
    margin-top: 0.125rem;
  }
  .gc-lookup-result__icon--success {
    color: var(--color-sage-700);
  }
  .gc-lookup-result__icon--error {
    color: var(--color-destructive-700);
  }
  .gc-lookup-result__icon--warning {
    color: var(--color-butter-700);
  }
  .gc-lookup-result__content {
    flex: 1 1 0%;
  }
  .gc-lookup-result__title {
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .gc-lookup-result__title--success {
    color: var(--color-sage-700);
  }
  .gc-lookup-result__title--error {
    color: var(--color-destructive-700);
  }
  .gc-lookup-result__title--warning {
    color: var(--color-butter-700);
  }
  .gc-lookup-result__details {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .gc-lookup-result__details--success {
    color: var(--color-sage-700);
  }
  .gc-lookup-result__label {
    font-weight: 600;
  }
  .gc-lookup-result__message {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
  }
  .gc-lookup-result__message--error {
    color: var(--color-destructive-700);
  }
  .gc-lookup-result__message--warning {
    color: var(--color-butter-700);
  }
  .gc-lookup-form {
    margin-top: var(--space-6);
  }
  .gc-lookup-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
  }
  .gc-lookup-form__label {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--color-ink);
    user-select: none;
    font-size: 13px;
  }
  .gc-lookup-form__input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background-color: var(--color-paper-card);
    border: 1px solid color-mix(in srgb, var(--color-ink) 18%, transparent);
    padding: 11px 0.875rem;
    border-radius: 10px;
    transition: all 150ms ease-out;
  }
  .gc-lookup-form__input-wrap:focus-within {
    border-color: var(--color-ink);
    background-color: var(--color-paper-card);
    box-shadow: var(--shadow-input-ring);
  }
  .gc-lookup-form__prefix {
    color: var(--color-ink-mute);
    font-weight: 500;
  }
  .gc-lookup-form__hint {
    font-size: var(--text-13);
    color: var(--color-ink-mute);
  }
  .gc-lookup-form__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  /* views/onboarding/index.html.haml */
  .onboarding {
    max-width: 36rem;
    margin: var(--space-4) auto;
  }
  .onboarding__card {
    background-color: var(--color-paper-card);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px 0 var(--color-ink-10);
    overflow: hidden;
    padding: var(--space-8);
  }
  .onboarding__avatar {
    width: var(--space-20);
    height: var(--space-20);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--radius-pill);
  }
  .onboarding__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    text-align: center;
    margin-top: var(--space-4);
    color: var(--color-ink-2);
  }
  .onboarding__body {
    margin-top: var(--space-10);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  .onboarding__text {
    color: var(--color-ink-2);
  }
  .onboarding__link {
    color: var(--color-primary);
    text-decoration: underline;
  }
  .onboarding__link:hover {
    color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  }
  .onboarding__signature {
    height: var(--space-16);
    margin-top: var(--space-6);
  }
  .onboarding__name {
    margin-top: var(--space-2);
    color: var(--color-ink-2);
  }

  /* components/tab_component.html.haml */
  .tab {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-lg);
    color: var(--color-ink-2);
    transition:
      color 150ms ease,
      background-color 150ms ease;
  }
  .tab:hover {
    color: var(--color-ink);
    background-color: var(--color-ink-10);
  }
  .tab--active {
    color: var(--color-ink);
  }
  .tab--active:hover {
    color: var(--color-ink);
    background-color: transparent;
  }
  .tab__icon {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* components/data_list/header_cell_component.rb */
  .data-list-header-cell {
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink-2);
  }
  .data-list-header-cell:first-child {
    padding-left: var(--space-4);
  }
  .data-list-header-cell:last-child {
    padding-right: var(--space-4);
  }

  /* components/data_list/cell_component.rb */
  .data-list-cell {
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
    white-space: nowrap;
  }
  .data-list-cell:first-child {
    padding-left: var(--space-4);
  }
  .data-list-cell:last-child {
    padding-right: var(--space-4);
  }
  .data-list-cell--actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-1);
  }
  .data-list-cell--primary {
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .data-list-cell--secondary {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
}

/* Responsive overrides for the swept feature classes. */
@layer ds-features {
  @media (width >= 640px) {
    .schedule-week-nav {
      padding-left: var(--space-6);
      padding-right: var(--space-6);
    }
    .schedule-week-nav__title {
      font-size: 22px;
    }
    .schedule-day {
      padding-left: var(--space-6);
      padding-right: var(--space-6);
    }
    .schedule-week-bar {
      padding-left: var(--space-6);
      padding-right: var(--space-6);
    }
    .schedule-week-bar__title {
      font-size: 22px;
    }
    .payment-processing__body {
      padding: 1.125rem var(--space-6) 1.375rem;
    }
    .housekeeping-detail__stamp {
      top: var(--space-1);
      right: 7rem;
    }
    .project-form__body {
      padding: 26px var(--space-7) 1.375rem;
    }
    .profile-card__footer-pad {
      padding: var(--space-4) var(--space-7);
    }
    .profile-card__body {
      padding: 26px var(--space-7) 22px;
    }
    .onboarding__card {
      padding: var(--space-10);
    }
    .data-list-header-cell:first-child {
      padding-left: var(--space-6);
    }
    .data-list-header-cell:last-child {
      padding-right: var(--space-6);
    }
    .data-list-cell:first-child {
      padding-left: var(--space-6);
    }
    .data-list-cell:last-child {
      padding-right: var(--space-6);
    }
  }

  @media (width >= 768px) {
    .sms-simulator__header {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
    }
    .sms-simulator__grid--two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sms-simulator__grid--three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .profile-name-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (width >= 1024px) {
    .housekeeping-detail__stamp {
      right: var(--space-32);
    }
    .project-tasks__header-main .project-tasks__header-cell {
      padding-left: var(--space-3);
      padding-right: var(--space-3);
    }
    .onboarding {
      margin-top: var(--space-16);
      margin-bottom: var(--space-16);
    }
    .data-list-header-cell:first-child {
      padding-left: var(--space-8);
    }
    .data-list-header-cell:last-child {
      padding-right: var(--space-8);
    }
    .data-list-cell:first-child {
      padding-left: var(--space-8);
    }
    .data-list-cell:last-child {
      padding-right: var(--space-8);
    }
  }
}

/* Sweep residuals (utilities the per-file agents left on a few elements). */
@layer ds-features {
  .schedule-week-nav {
    border-bottom: 1px dashed var(--color-ink-18);
  }
  .schedule-empty__message {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .schedule-shift__notes {
    font-size: var(--text-sm);
    color: var(--color-ink-mute);
  }
  .project-form__spinner {
    width: var(--space-5);
    height: var(--space-5);
    color: var(--color-ink-mute);
  }
  .project-form__assignee-icon {
    width: var(--space-2);
    height: var(--space-2);
    color: var(--color-ink-mute);
  }
  .inspection-message-icon {
    color: var(--color-primary);
  }
  .group\/status:hover .group-hover\/status\:text-ink-mute {
    color: var(--color-ink-mute);
  }
  .group\/status:hover .group-hover\/status\:text-sage-500 {
    color: var(--color-sage-500);
  }
}

/* Housekeeping inspection status icons (off Tailwind). */
@layer ds-features {
  .inspection-status-icon {
    width: var(--space-5);
    height: var(--space-5);
  }
  .inspection-status-icon--muted {
    color: var(--color-ink-mute);
  }
  .inspection-status-icon--pass {
    color: var(--color-sage-500);
  }
  .inspection-status-icon--fail {
    color: var(--color-destructive);
  }
  .housekeeping-checklist-item--complete {
    color: var(--color-ink-mute);
  }
}

/* Layout-utility sweep → feature classes (cutover). */
@layer ds-features {
  /* views/settings/sms/_dev_diagnostics.html.haml */
  .settings-diag__body {
    min-width: 0;
    flex: 1 1 0%;
  }
  .settings-diag__setup-label {
    margin: 0;
  }

  /* views/tasks/quick_new.html.haml */
  .quick-task-card {
    max-width: 720px;
  }
  .quick-task-card__footer {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .quick-task-card__footer {
      padding-left: var(--space-7);
      padding-right: var(--space-7);
    }
  }
  .quick-task-card__body {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .quick-task-card__body {
      padding: 26px var(--space-7) 1.375rem var(--space-7);
    }
  }
  .quick-task-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  /* views/unit_blockouts/new.turbo_stream.haml */
  .unit-blockout-form__title {
    margin-bottom: var(--space-4);
    font-weight: 600;
    font-size: var(--text-lg);
    line-height: 1.75rem;
  }
  .unit-blockout-form__fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100vw;
    max-width: 24rem;
  }
  .unit-blockout-form__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
  }

  /* views/projects/filters.turbo_stream.haml */
  .project-filters {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .project-filters__row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .project-filters__field {
    flex: 1 1 0%;
  }
  .project-filters__actions {
    display: flex;
    justify-content: flex-end;
  }

  @media (width >= 640px) {
    .project-filters {
      width: 100vw;
      max-width: 24rem;
    }
  }

  /* views/projects/index.html.haml */
  .projects-empty {
    margin-bottom: 1.375rem;
  }
  .projects-empty__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-6) var(--space-12) var(--space-6);
  }
  .projects-empty__art {
    width: 10rem;
    height: 10rem;
    flex-shrink: 0;
  }
  .projects-empty__content {
    flex: 1 1 0%;
    max-width: 65ch;
  }
  .projects-empty__title {
    font-size: 28px;
    margin-bottom: var(--space-4);
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    letter-spacing: var(--tracking-tightest);
  }
  .projects-empty__lead {
    margin-bottom: var(--space-3);
  }
  .projects-empty__actions {
    display: flex;
    margin-top: var(--space-6);
  }
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.375rem;
  }

  @media (width >= 640px) {
    .projects-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 768px) {
    .projects-empty__body {
      flex-direction: row;
      gap: var(--space-20);
      padding-left: var(--space-20);
      padding-right: var(--space-20);
    }
  }

  @media (width >= 1180px) {
    .projects-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* views/projects/_form.html.haml */
  .project-form__user-list-panel {
    box-shadow: var(--shadow-paper);
  }
  .project-form__unassign-icon {
    width: var(--space-5);
    height: var(--space-5);
  }

  /* views/sign_up/new.html.haml */
  .signup {
    width: 100%;
    max-width: 24rem;
  }
  .signup__intro {
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px dashed var(--color-ink-18);
  }
  .signup__headline {
    font-family: var(--font-serif);
    font-weight: 500;
    color: var(--color-ink);
    line-height: 1.25;
    font-size: var(--text-22);
  }
  .signup__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    margin-left: var(--space-4);
    color: var(--color-ink-2);
    line-height: 1.625;
    list-style-type: decimal;
    font-size: var(--text-14-5);
  }
  .signup__form {
    display: flex;
    flex-direction: column;
  }
  .signup__submit {
    width: 100%;
  }

  /* components/housekeepings/manager_row_component.html.haml */
  .housekeeping-manager-row__checkbox {
    padding: var(--space-4);
    padding-left: var(--space-6);
  }
  .housekeeping-manager-row__finished {
    display: flex;
  }
  .housekeeping-manager-row__status--inspecting {
    text-align: right;
  }
  .housekeeping-manager-row__notes-icon {
    width: var(--space-4);
    height: var(--space-4);
  }

  @media (width >= 640px) {
    .housekeeping-manager-row__status--inspecting {
      margin-top: 0;
    }
  }

  @media (width >= 768px) {
    .housekeeping-manager-row__status--md-reset {
      margin-top: 0;
    }
  }

  /* components/tasks/assignment/cell_component.html.haml */
  .task-assign-cell__input {
    padding: var(--space-3);
  }

  /* ── Tailwind-cutover straggler conversions ─────────────────────────── */

  /* views/email_templates/_form.html.haml + views/sms_templates/_form.html.haml */
  .c-form-card__body--compact {
    padding: var(--space-4);
  }

  @media (width >= 640px) {
    .c-form-card__body--compact {
      padding: var(--space-4-5) var(--space-6) var(--space-5-5);
    }
  }
  .template-form__var-toggle-text {
    font-family: var(--font-serif);
    font-style: italic;
  }
  .template-form__body-field {
    min-height: 10rem;
    resize: vertical;
  }

  /* views/projects/edit.html.haml */
  .project-edit__delete-card {
    margin-top: var(--space-5-5);
  }
  .project-edit__delete-heading {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-xl);
    color: var(--color-ink);
    letter-spacing: var(--tracking-tightest);
    margin-bottom: var(--space-2);
  }
  .project-edit__delete-description {
    font-size: var(--text-13);
    line-height: 1.5;
    color: var(--color-ink-2);
    margin-bottom: var(--space-4);
  }

  /* views/projects/index.html.haml */
  .projects-empty__text {
    color: var(--color-ink-2);
    line-height: 1.625;
  }

  /* views/install/ios.html.haml */
  .install-steps {
    list-style-type: decimal;
    list-style-position: inside;
    padding-bottom: var(--space-10);
  }
  .install-steps__item {
    padding-block: var(--space-2);
  }
  .install-steps__text {
    display: inline;
  }
  .install-steps__image {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-subtle);
    margin-top: var(--space-2);
  }

  /* views/housekeepings/inspection.html.haml */
  .housekeeping-detail__stamp-icon {
    width: var(--space-6);
    height: var(--space-6);
  }

  /* views/housekeepings/index.html.haml */
  .housekeeping-bulk-bar__assign-label {
    font-weight: 600;
  }

  /* views/schedules/index.html.haml */
  .schedule-grid__add-icon {
    display: inline;
    width: var(--space-3);
    height: var(--space-3);
  }

  /* views/reports/discounts/show.html.haml */
  .report-loading__icon {
    width: var(--space-4);
    height: var(--space-4);
  }

  /* views/channex_channels/show.html.haml */
  .channex-embed {
    width: 100%;
    border: 0;
  }

  /* views/native_sidebar/show.html.haml */
  .native-sidebar__brand {
    display: block;
    text-decoration: none;
  }

  /* views/shared/_sidebar_nav.html.haml + _sidebar_nav_items.html.haml */
  .sidebar-nav__list > * + * {
    margin-top: var(--space-1);
  }
  .sidebar-nav__footer {
    margin-top: auto;
    padding-top: var(--space-16);
  }
  .sidebar-nav__footer-list > * + * {
    margin-top: var(--space-1);
  }

  /* components/rezstream_sync_status_component.html.haml */
  .rezstream-status__tooltip {
    transform: translateX(calc(-1 * var(--space-3)));
  }

  /* views/documents/handbooks/_handbook.html.haml */
  .handbook-card {
    margin-bottom: var(--space-5-5);
  }

  /* views/booking_requests/_header.html.haml */
  .booking-subheader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    padding-block: var(--space-4);
  }

  /* views/booking_requests/terms.html.haml */
  .booking-terms__prose {
    max-width: none;
  }

  /* helpers/rates_messages_helper.rb */
  .rates-mention {
    background: color-mix(in srgb, var(--color-terra-500) 12%, transparent);
    color: var(--color-terra-500);
    font-family: var(--font-mono);
    border-radius: 0.25rem;
    padding: 1px var(--space-1-5);
    font-size: var(--text-12-5);
    line-height: 1.4;
    letter-spacing: 0.02em;
  }
}

@layer ds-features {
  /* Dashboard: package attention card */
  .dashboard-booking-row__inner--top {
    align-items: flex-start;
  }

  @media (width >= 640px) {
    .dashboard-booking-row__inner--top {
      align-items: flex-start;
    }
  }

  .dashboard-empty__help {
    margin: var(--space-2) auto 0;
    max-width: 28rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: var(--color-ink-2);
  }

  .dashboard-package-attention__subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--text-13);
    line-height: 1.4;
    color: var(--color-ink-2);
  }

  .dashboard-package-attention__subtitle-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-butter-700);
  }

  .dashboard-package-attention__packages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  /* Dashboard: occupancy year-over-year delta indicator (mono-caps eyebrow) */
  .dashboard-yoy-delta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-ink-mute);
  }

  .dashboard-yoy-delta--up {
    color: var(--color-sage-700);
  }

  .dashboard-yoy-delta--down {
    color: var(--color-terra-600);
  }

  .dashboard-yoy-delta__icon {
    flex-shrink: 0;
    width: var(--space-3);
    height: var(--space-3);
  }

  /* Tasks: print sheet */
  .task-print-sheet {
    display: none;
  }

  @media print {
    .task-print-sheet {
      display: block;
      background: var(--color-white);
      color: var(--color-ink);
      font-family: var(--font-sans);
    }

    .task-print-sheet__spacer {
      height: 0.18in;
    }

    .task-print-sheet__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-6);
      padding-bottom: var(--space-4);
      border-bottom: 2px solid var(--color-ink);
    }

    .task-print-sheet__heading {
      min-width: 0;
    }

    .task-print-sheet__stamp {
      flex-shrink: 0;
      text-align: right;
    }

    .task-print-sheet__eyebrow {
      font-family: var(--font-mono);
      font-size: var(--text-2xs);
      line-height: 1.4;
      text-transform: uppercase;
      letter-spacing: var(--tracking-caps);
      color: var(--color-ink-mute);
    }

    .task-print-sheet__title {
      margin-top: var(--space-1);
      font-family: var(--font-serif);
      font-size: var(--text-2xl);
      font-weight: 500;
      line-height: 1.15;
      letter-spacing: var(--tracking-tight);
      color: var(--color-ink);
    }

    .task-print-sheet__property {
      margin-top: var(--space-1);
      font-size: var(--text-sm);
      line-height: 1.25rem;
      color: var(--color-ink-2);
    }

    .task-print-sheet__printed {
      margin-top: var(--space-2);
      font-size: var(--text-11);
      line-height: 1.4;
      color: var(--color-ink-mute);
    }

    .task-print-sheet__meta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-3) var(--space-8);
      padding-block: var(--space-4);
      border-bottom: 1px dashed var(--color-ink-25);
    }

    .task-print-sheet__value,
    .task-print-sheet__status {
      margin-top: var(--space-1);
      font-size: var(--text-sm);
      line-height: 1.25rem;
      color: var(--color-ink);
    }

    .task-print-sheet__status {
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }

    .task-print-sheet__check {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 1rem;
      height: 1rem;
      border: 1px solid var(--color-ink);
      background: var(--color-white);
    }

    .task-print-sheet__check--done {
      background: var(--color-ink);
      color: var(--color-white);
    }

    .task-print-sheet__check-mark {
      font-family: var(--font-mono);
      font-size: var(--text-11);
      line-height: 1;
    }

    .task-print-sheet__value-mute {
      color: var(--color-ink-mute);
    }

    .task-print-sheet__placeholder {
      font-family: var(--font-serif);
      font-style: italic;
      color: var(--color-ink-mute);
    }

    .task-print-sheet__section {
      padding-top: var(--space-4);
      break-inside: avoid;
    }

    .task-print-sheet__description {
      margin-top: var(--space-1);
      font-size: var(--text-sm);
      line-height: 1.375;
      color: var(--color-ink);
    }

    .task-print-sheet__comments {
      margin-top: var(--space-3);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }

    .task-print-sheet__comment {
      padding: var(--space-3);
      border: 1px dashed var(--color-ink-25);
    }

    .task-print-sheet__comment-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .task-print-sheet__comment-author {
      font-size: var(--text-sm);
      line-height: 1.25rem;
      font-weight: 600;
      color: var(--color-ink);
    }

    .task-print-sheet__comment-time {
      flex-shrink: 0;
      font-family: var(--font-mono);
      font-size: var(--text-2xs);
      color: var(--color-ink-mute);
    }

    .task-print-sheet__comment-body {
      margin-top: var(--space-2);
      max-width: none;
      font-size: var(--text-sm);
      line-height: 1.375;
      color: var(--color-ink);
    }
  }
}

@layer ds-features {
  /* Dashboard: linked registration-card badge in a PMS booking row */
  .dashboard-booking-row__reg-card {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }
}

@layer ds-features {
  /* Dashboard: occupancy stat value stacked over its YoY delta */
  .dashboard-occupancy-stat {
    display: flex;
    flex-direction: column;
  }
}

@layer ds-features {
  /* confirm_cancel: calculation-notes list inside a caution alert */
  .booking-alert__list {
    margin-top: var(--space-1);
    padding-left: var(--space-4);
    list-style: disc;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-ink-2);
  }
  .booking-alert--caution .booking-alert__list {
    color: var(--color-caution-700);
  }

  /* confirm_cancel: email-guest notify option (boxed checkbox + label/desc) */
  .booking-notify {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-paper-card);
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-xl);
    cursor: pointer;
  }
  .booking-notify--disabled {
    cursor: default;
  }
  .booking-notify__check {
    margin-top: var(--space-1);
    flex-shrink: 0;
  }
  .booking-notify__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .booking-notify__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-ink);
  }
  .booking-notify__desc {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  /* bookings/show: registration card status + actions */
  .booking-registration {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .booking-registration__status {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
  }
  .booking-registration__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-ink-2);
  }
  .booking-registration__title {
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--color-ink);
  }
  .booking-registration__detail {
    font-size: var(--text-12-5);
    color: var(--color-ink-mute);
  }
  .booking-registration__body {
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-ink-2);
  }
  .booking-registration__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* bookings/show: cancellation policy preview box */
  .booking-policy-box {
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--color-paper-soft);
    border: 1px dashed var(--color-paper-2);
    border-radius: var(--radius-xl);
  }
  .booking-policy-box__label {
    margin-bottom: var(--space-1);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink-mute);
  }
  .booking-policy-box__name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-ink);
  }
  .booking-policy-box__text {
    margin-top: var(--space-1);
    font-size: var(--text-12-5);
    line-height: 1.5;
    color: var(--color-ink-2);
  }

  /* email_templates: grouped variable lists (available + recovery) */
  .template-variable-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .template-variable-group__title {
    margin-bottom: var(--space-2-5);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-ink-mute);
  }
}

/* Print: never print the paper-grain brand overlay (unlayered so it beats the base rule) */
@media print {
  body.paper-grain::before {
    display: none;
  }
}

@layer ds-features {
  /* recovery_drilldown: two-card page spacing */
  .recovery-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  @media (width >= 1024px) {
    .recovery-page {
      margin-top: var(--space-2);
    }
  }

  /* recovery_drilldown: window/rate chips */
  .recovery-window,
  .recovery-rate {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--color-ink-25);
    border-radius: var(--radius-pill);
    background: var(--color-paper-2);
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-2);
  }

  /* recovery_drilldown: funnel layout */
  .recovery-funnel {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  /* recovery_drilldown: recovered-value hero (dark surface) */
  .recovery-outcome {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--color-ink);
    color: var(--color-paper);
  }
  .recovery-outcome__eyebrow {
    color: var(--color-paper);
    opacity: 0.65;
  }
  .recovery-outcome__value {
    margin-top: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--text-38);
    font-weight: 500;
    line-height: 1;
  }
  .recovery-outcome__summary {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-paper);
    opacity: 0.75;
  }

  /* recovery_drilldown: funnel steps panel */
  .recovery-steps {
    padding: var(--space-4);
    border: 1px dashed var(--color-ink-25);
    border-radius: var(--radius-lg);
    background: var(--color-paper-soft);
  }
  .recovery-steps__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  @media (width >= 1024px) {
    .recovery-steps__header {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
    }
  }
  .recovery-steps__title {
    margin-top: var(--space-2);
    font-family: var(--font-serif);
    font-size: var(--text-22);
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-ink);
  }
  .recovery-steps__description {
    margin-top: var(--space-1);
    max-width: 42rem;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-ink-2);
  }
  .recovery-steps__rates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .recovery-steps__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .recovery-step {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px dashed var(--color-ink-18);
    border-radius: var(--radius-input);
  }
  .recovery-step--terra {
    border-color: color-mix(in srgb, var(--color-terra-500) 30%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 10%, transparent);
  }
  .recovery-step--butter {
    border-color: color-mix(in srgb, var(--color-butter) 55%, transparent);
    background: color-mix(in srgb, var(--color-butter) 20%, transparent);
  }
  .recovery-step--sage {
    border-color: color-mix(in srgb, var(--color-sage-500) 30%, transparent);
    background: color-mix(in srgb, var(--color-sage-500) 15%, transparent);
  }
  .recovery-step--muted {
    background: var(--color-paper-soft);
  }
  .recovery-step__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
  }
  .recovery-step__icon {
    width: var(--space-3-5);
    height: var(--space-3-5);
    margin-top: var(--space-1);
    flex-shrink: 0;
    color: var(--color-ink-mute);
  }
  .recovery-step__value {
    font-family: var(--font-serif);
    font-size: var(--text-stat);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--color-ink);
  }
  .recovery-step__label {
    font-family: var(--font-mono);
    font-size: var(--text-11);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--color-ink-mute);
  }
  .recovery-step__aside {
    min-height: 0.75rem;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .recovery-step__connector {
    display: none;
  }
  .recovery-step__connector-icon {
    width: var(--space-3-5);
    height: var(--space-3-5);
  }

  @media (width >= 1024px) {
    .recovery-steps__grid {
      flex-direction: row;
      align-items: stretch;
    }
    .recovery-step__connector {
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      color: var(--color-ink-mute);
    }
  }

  /* recovery_drilldown: empty-state title above .c-list-empty text */
  .recovery-empty__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-xl);
    color: var(--color-ink);
  }

  /* recovery_drilldown: row identity/contact/engagement */
  .recovery-row__main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .recovery-row__identity {
    min-width: 0;
  }
  .recovery-row__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
  }
  .recovery-row__contact-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    min-width: 0;
  }
  .recovery-row__contact-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: var(--color-ink-mute);
  }
  .recovery-row__contact-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .recovery-row__engagement {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .recovery-row__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    text-align: right;
  }

  /* recovery_drilldown: stay/guests/last-activity facts */
  .recovery-row__facts {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }

  @media (width >= 640px) {
    .recovery-row__facts {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .recovery-fact {
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--color-ink-25);
    border-radius: var(--radius-sm);
    background: var(--color-paper-soft);
  }
  .recovery-fact__label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .recovery-fact__value {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-ink);
  }
}

@layer ds-features {
  /* bookings/show: notes form manual-save action row */
  .booking-notes__actions {
    margin-top: var(--space-4);
  }
}

@layer ds-features {
  /* ── occupancy map (tape chart) ───────────────────────────────── */
  .c-occupancy {
    --c-occupancy-label-width: 224px;
    --c-occupancy-row-height: 56px;
    --c-occupancy-head-height: 64px;
    --c-occupancy-cell-width: 64px; /* MUST equal UnitAllocations::OccupancyGrid::CELL_WIDTH */

    font-variant-ligatures: none;
  }

  /* ── Legend ───────────────────────────────────────────────────────── */
  .c-occupancy__legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }
  .c-occupancy__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-2);
  }
  .c-occupancy__swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid var(--color-ink-18);
  }

  /* ── Legend "Key" popover (reference-only, tucked behind a pill button) ── */
  .c-occupancy__key {
    position: relative;
  }
  .c-occupancy__key-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-ink);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition:
      border-color 0.12s ease,
      background 0.12s ease;
  }
  .c-occupancy__key-button:hover {
    border-color: var(--color-ink);
  }
  .c-occupancy__key-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 50;
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-16);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow:
      0 1px 0 var(--color-inset-highlight) inset,
      0 22px 40px -28px color-mix(in srgb, var(--color-shadow-warm) 40%, transparent),
      0 6px 16px -10px color-mix(in srgb, var(--color-shadow-warm) 25%, transparent);
  }
  .c-occupancy__key-menu .c-occupancy__legend {
    flex-flow: column nowrap;
    align-items: flex-start;
    gap: 11px;
  }

  /* Each swatch + label stays on one line; the popover widens to fit the longest. */
  .c-occupancy__key-menu .c-occupancy__legend .c-occupancy__legend-item {
    white-space: nowrap;
  }

  /* ── Toolbar (filter selects) ─────────────────────────────────────── */
  .c-occupancy__toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .c-occupancy__field {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-ink);
    background-color: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: 999px;
    padding: 8px 30px 8px 14px;
    outline: none;
    cursor: pointer;
    appearance: none;
    transition:
      border-color 0.12s ease,
      background 0.12s ease;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231F1F1F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  .c-occupancy__field:hover {
    border-color: var(--color-ink);
  }
  .c-occupancy__field:focus {
    border-color: var(--color-ink);
  }

  /* ── Date nav (prev / today / next) ───────────────────────────────── */
  .c-occupancy__datenav {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: 999px;
    padding: 3px;
  }
  .c-occupancy__datenav .c-occupancy__datenav-button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--color-ink-2);
    cursor: pointer;
    border: 0;
    background: transparent;
    transition:
      background 0.12s ease,
      color 0.12s ease;
  }
  .c-occupancy__datenav .c-occupancy__datenav-button:hover {
    background: color-mix(in srgb, var(--color-ink) 6%, transparent);
    color: var(--color-ink);
  }
  .c-occupancy__datenav .c-occupancy__datenav-today {
    width: auto;
    padding: 0 14px;
    height: 32px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .c-occupancy__month {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-ink);
  }

  /* ── Grid scroll frame ────────────────────────────────────────────── */
  .c-occupancy__frame {
    background: var(--color-paper-card);
    border: 1px solid color-mix(in srgb, var(--color-ink) 12%, transparent);
    border-radius: 14px;
    box-shadow:
      0 1px 0 var(--color-inset-highlight) inset,
      0 22px 40px -30px color-mix(in srgb, var(--color-shadow-warm) 30%, transparent);
    overflow: hidden;
    position: relative;
    margin-block: 16px;
  }
  .c-occupancy__scroll {
    overflow: auto;
    position: relative;
    max-height: calc(100vh - 220px);
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 20%) transparent;
  }
  .c-occupancy__scroll::-webkit-scrollbar {
    width: 11px;
    height: 11px;
  }
  .c-occupancy__scroll::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 18%);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .c-occupancy__scroll::-webkit-scrollbar-thumb:hover {
    background: rgb(0 0 0 / 30%);
    background-clip: content-box;
  }
  .c-occupancy__inner {
    position: relative;
    width: max-content;
  }

  /* ── Header row (dates) ───────────────────────────────────────────── */
  .c-occupancy__head-row {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--c-occupancy-head-height);
    background: var(--color-paper-card);
    border-bottom: 1.5px solid var(--color-ink-16);
  }
  .c-occupancy__corner {
    position: sticky;
    left: 0;
    z-index: 5;
    width: var(--c-occupancy-label-width);
    flex-shrink: 0;
    background: var(--color-paper-card);
    border-right: 1.5px solid var(--color-ink-16);
    display: flex;
    align-items: flex-end;
    padding: 0 16px 10px;
  }
  .c-occupancy__corner .c-occupancy__corner-label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .c-occupancy__days {
    display: flex;
    position: relative;
  }
  .c-occupancy__day {
    width: var(--c-occupancy-cell-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 8px;
    gap: 1px;
    border-right: 1px solid color-mix(in srgb, var(--color-ink) 7%, transparent);
    position: relative;
  }
  .c-occupancy__day .c-occupancy__day-dow {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .c-occupancy__day .c-occupancy__day-number {
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 500;
    color: var(--color-ink-2);
    line-height: 1;
  }
  .c-occupancy__day--weekend {
    background: color-mix(in srgb, var(--color-sage-500) 7%, transparent);
  }
  .c-occupancy__day--weekend .c-occupancy__day-number {
    color: var(--color-ink);
  }
  .c-occupancy__day--month-first {
    border-left: 1.5px solid color-mix(in srgb, var(--color-ink) 22%, transparent);
  }
  .c-occupancy__day .c-occupancy__day-month-label {
    position: absolute;
    top: 5px;
    left: 7px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-terra-500);
    white-space: nowrap;
  }
  .c-occupancy__day--today {
    background: color-mix(in srgb, var(--color-terra-500) 10%, transparent);
  }
  .c-occupancy__day--today .c-occupancy__day-dow,
  .c-occupancy__day--today .c-occupancy__day-number {
    color: var(--color-terra-500);
  }
  .c-occupancy__day .c-occupancy__day-today-pip {
    position: absolute;
    bottom: -1.5px;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-terra-500);
  }

  /* ── Unit rows ────────────────────────────────────────────────────── */
  .c-occupancy__row {
    display: flex;
    height: var(--c-occupancy-row-height);
    border-bottom: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
    position: relative;
  }
  .c-occupancy__row:hover .c-occupancy__row-label {
    background: var(--color-paper);
  }
  .c-occupancy__row-label {
    position: sticky;
    left: 0;
    z-index: 20;
    width: var(--c-occupancy-label-width);
    flex-shrink: 0;
    background: var(--color-paper-card);
    border-right: 1.5px solid var(--color-ink-16);
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 16px;
    transition: background 0.12s ease;
  }
  .c-occupancy__row-label .c-occupancy__unit-name {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    line-height: 1.05;
    white-space: nowrap;
  }

  /* ── Group header band (rendered only in the "group" view) ────────── */
  .c-occupancy__group-row {
    display: flex;
    width: 100%;
    height: 34px;
    background: var(--color-paper-2);
    border-bottom: 1px solid var(--color-ink-10);
    position: relative;
  }
  .c-occupancy__group-label {
    position: sticky;
    left: 0;
    z-index: 20;
    width: var(--c-occupancy-label-width);
    flex-shrink: 0;
    background: var(--color-paper-2);
    border-right: 1.5px solid var(--color-ink-16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
  }
  .c-occupancy__group-label .c-occupancy__group-name {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-ink-2);
    font-weight: 500;
  }
  .c-occupancy__group-label .c-occupancy__group-count {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-ink-mute);
  }
  .c-occupancy__group-fill {
    background: var(--color-paper-2);
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 12px;
    gap: 7px;
  }
  .c-occupancy__group-fill .c-occupancy__group-rate {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-ink-mute);
    letter-spacing: 0.04em;
  }

  /* track = day cells + booking bars */
  .c-occupancy__track {
    display: flex;
    position: relative;
    flex: 1;
  }
  .c-occupancy__cell {
    width: var(--c-occupancy-cell-width);
    flex-shrink: 0;
    border-right: 1px solid color-mix(in srgb, var(--color-ink) 6%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: background 0.12s ease;
  }
  .c-occupancy__cell--weekend {
    background: color-mix(in srgb, var(--color-sage-500) 5%, transparent);
  }
  .c-occupancy__cell--month-first {
    border-left: 1.5px solid var(--color-ink-18);
  }
  .c-occupancy__cell--today {
    background: color-mix(in srgb, var(--color-terra-500) 5.5%, transparent);
  }
  .c-occupancy__cell--free:hover {
    background: color-mix(in srgb, var(--color-terra-500) 10%, transparent);
  }

  /* Clickable empty cells open the create/OOS popover — show the affordance on pointer devices. */
  @media (hover: hover) and (pointer: fine) {
    .c-occupancy__cell[data-action] {
      cursor: pointer;
    }
  }
  .c-occupancy__cell .c-occupancy__cell-price {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-ink-mute);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    pointer-events: none;
    transition: color 0.12s ease;
  }
  .c-occupancy__cell--free:hover .c-occupancy__cell-price {
    color: var(--color-terra-500);
  }

  /* ── Booking bars (anchored inside their start-date cell, overflow right) ── */
  .c-occupancy__bar {
    position: absolute;
    top: 6px;
    left: 3px;
    height: calc(var(--c-occupancy-row-height) - 12px);
    border-radius: 9px;
    z-index: 15;
    display: flex;
    align-items: center;
    padding: 0 9px;
    gap: 7px;
    overflow: hidden;
    box-shadow:
      0 1px 0 var(--color-inset-highlight-subtle) inset,
      0 6px 14px -8px color-mix(in srgb, var(--color-shadow-warm) 50%, transparent);
    border: 1px solid transparent;
    text-decoration: none;
    transition:
      box-shadow 0.12s ease,
      filter 0.12s ease;
  }
  a.c-occupancy__bar:hover,
  .c-occupancy__bar[data-action]:hover {
    box-shadow:
      0 1px 0 var(--color-inset-highlight-subtle) inset,
      0 10px 20px -8px color-mix(in srgb, var(--color-shadow-warm) 55%, transparent);
    filter: brightness(1.02);
  }
  .c-occupancy__bar[data-action] {
    cursor: pointer;
  }
  .c-occupancy__bar .c-occupancy__bar-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
  }
  .c-occupancy__bar .c-occupancy__bar-name {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.05;
  }
  .c-occupancy__bar .c-occupancy__bar-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.02em;
    opacity: 0.82;
    white-space: nowrap;
  }
  .c-occupancy__bar .c-occupancy__bar-balance {
    margin-left: auto;
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--color-terra-600);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-white) 50%, transparent);
  }
  .c-occupancy__bar .c-occupancy__bar-source-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--color-white) 70%, transparent);
  }

  /* status hues — warm palette */
  .c-occupancy__bar--arriving {
    background: var(--color-terra-500);
    color: var(--color-white);
  }
  .c-occupancy__bar--inhouse {
    background: var(--color-sage-500);
    color: var(--color-white);
  }
  .c-occupancy__bar--departing {
    background: var(--color-butter);
    color: color-mix(in srgb, var(--color-butter-700) 55%, var(--color-ink));
  }
  .c-occupancy__bar--departing .c-occupancy__bar-sub {
    opacity: 0.7;
  }
  .c-occupancy__bar--confirmed {
    background: color-mix(in srgb, var(--color-sage-50) 55%, var(--color-sage-100));
    color: var(--color-ink);
    border: 1px solid var(--color-sage-200);
    box-shadow:
      0 1px 0 var(--color-inset-highlight) inset,
      0 5px 13px -9px color-mix(in srgb, var(--color-sage-700) 45%, transparent);
  }
  .c-occupancy__bar--confirmed .c-occupancy__bar-sub {
    opacity: 0.55;
  }
  .c-occupancy__bar--confirmed .c-occupancy__bar-source-dot,
  .c-occupancy__bar--departing .c-occupancy__bar-source-dot {
    background: currentcolor;
    opacity: 0.5;
  }
  .c-occupancy__bar--checkedout {
    background: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-ink) 5%, transparent) 0 7px,
      color-mix(in srgb, var(--color-ink) 9%, transparent) 7px 14px
    );
    color: var(--color-ink-mute);
    border: 1px dashed color-mix(in srgb, var(--color-ink) 22%, transparent);
    box-shadow: none;
  }
  .c-occupancy__bar--checkedout .c-occupancy__bar-name {
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--color-ink) 30%, transparent);
  }
  .c-occupancy__bar--checkedout .c-occupancy__bar-source-dot {
    background: currentcolor;
    opacity: 0.5;
  }
  .c-occupancy__bar--oos {
    background: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-ink) 14%, transparent) 0 8px,
      color-mix(in srgb, var(--color-ink) 4%, transparent) 8px 16px
    );
    color: var(--color-ink-2);
    border: 1px solid color-mix(in srgb, var(--color-ink) 20%, transparent);
    box-shadow: none;
  }
  .c-occupancy__bar--oos .c-occupancy__bar-name {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* ── Drag: move / resize / marquee-create ── */
  .c-occupancy__bar[data-occ-allocation-id],
  .c-occupancy__bar[data-occ-blockout-id] {
    cursor: grab;
  }

  /* Resize handles at each end — a thin strip the drag controller (EDGE = 8px) treats as a resize grab, so
     the cursor signals it on hover. Pseudo-elements don't become event targets, so the bar's own mousedown
     (and elementFromPoint during a drag) still works. */
  .c-occupancy__bar[data-occ-allocation-id]::before,
  .c-occupancy__bar[data-occ-allocation-id]::after,
  .c-occupancy__bar[data-occ-blockout-id]::before,
  .c-occupancy__bar[data-occ-blockout-id]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    z-index: 1;
    cursor: ew-resize;
  }
  .c-occupancy__bar[data-occ-allocation-id]::before,
  .c-occupancy__bar[data-occ-blockout-id]::before {
    left: 0;
  }
  .c-occupancy__bar[data-occ-allocation-id]::after,
  .c-occupancy__bar[data-occ-blockout-id]::after {
    right: 0;
  }
  .c-occupancy__bar--dragging {
    z-index: 40;
    cursor: grabbing;
    pointer-events: none; /* let elementFromPoint see the row/cell under the cursor */
    box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--color-shadow-warm) 55%, transparent);
  }
  .c-occupancy__bar--invalid {
    outline: 2px solid var(--color-terra-600);
    outline-offset: 1px;
  }
  body.c-occupancy-dragging {
    user-select: none;
    cursor: grabbing;
  }

  .c-occupancy__marquee {
    position: absolute;
    top: 6px;
    left: 3px;
    height: calc(var(--c-occupancy-row-height) - 12px);
    border: 2px dashed var(--color-terra-500);
    background: color-mix(in srgb, var(--color-terra-500) 8%, transparent);
    border-radius: 9px;
    z-index: 14;
    pointer-events: none;
  }

  .c-occupancy__drag-hint {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
    background: var(--color-ink);
    color: var(--color-white);
    font: 11px var(--font-mono);
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--color-shadow-warm) 55%, transparent);
  }
  .c-occupancy__drag-hint:empty {
    display: none;
  }
  .c-occupancy__drag-hint--invalid {
    background: var(--color-terra-600);
  }

  .c-occupancy__empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--color-ink-mute);
    font-family: var(--font-serif);
    font-size: 22px;
    font-style: italic;
  }

  /* ── Mobile: wider cells / fewer visible nights / touch targets ───── */
  @media (width <= 639px) {
    .c-occupancy {
      --c-occupancy-cell-width: 72px;
      --c-occupancy-row-height: 58px;
      --c-occupancy-label-width: 132px;
    }
    .c-occupancy__row-label .c-occupancy__unit-name {
      font-size: 14px;
    }
    .c-occupancy__scroll {
      max-height: calc(100vh - 260px);
    }
  }

  /* ── Booking quick-edit popover (read-only) ───────────────────────── */
  .c-occupancy__popover-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4000;
  }
  .c-occupancy__popover {
    position: fixed;
    z-index: 4001;
    width: 312px;
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-16);
    border-radius: 14px;
    box-shadow:
      0 1px 0 var(--color-inset-highlight) inset,
      0 30px 60px -24px color-mix(in srgb, var(--color-shadow-warm) 50%, transparent),
      0 6px 16px -8px color-mix(in srgb, var(--color-shadow-warm) 25%, transparent);
    overflow: hidden;
    animation: c-occupancy-popover-in 0.14s ease;
  }

  /* Panels/menus are toggled via the [hidden] attribute; this must beat their
     own display rules (which would otherwise override the UA [hidden] rule). */
  .c-occupancy__popover [hidden] {
    display: none;
  }

  @keyframes c-occupancy-popover-in {
    from {
      opacity: 0;
      transform: translateY(5px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .c-occupancy__popover-head {
    padding: 14px 16px 12px;
    border-bottom: 1.5px dashed var(--color-ink-16);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
  }
  .c-occupancy__popover-head .c-occupancy__popover-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    margin-top: 4px;
    flex-shrink: 0;
    border: 1px solid var(--color-ink-18);
  }
  .c-occupancy__popover-head .c-occupancy__popover-name {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--color-ink);
    line-height: 1.1;
  }
  .c-occupancy__popover-head .c-occupancy__popover-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--color-ink-mute);
    letter-spacing: 0.03em;
    margin-top: 3px;
  }
  .c-occupancy__popover-head .c-occupancy__popover-nights {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-terra-500) 12%, transparent);
    color: var(--color-terra-500);
  }
  .c-occupancy__popover-head .c-occupancy__popover-close {
    margin-left: auto;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-mute);
    cursor: pointer;
    flex-shrink: 0;
    transition:
      background 0.12s ease,
      color 0.12s ease;
  }
  .c-occupancy__popover-head .c-occupancy__popover-close:hover {
    background: color-mix(in srgb, var(--color-ink) 6%, transparent);
    color: var(--color-ink);
  }

  .c-occupancy__popover-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .c-occupancy__popover-chips {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
  }
  .c-occupancy__popover .c-occupancy__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    border: 1px solid var(--color-ink-18);
    background: var(--color-paper-card);
    color: var(--color-ink-2);
  }
  .c-occupancy__popover .c-occupancy__chip--dot::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentcolor;
  }
  .c-occupancy__popover .c-occupancy__chip--terra {
    color: var(--color-terra-500);
    border-color: color-mix(in srgb, var(--color-terra-500) 40%, transparent);
    background: color-mix(in srgb, var(--color-terra-500) 8%, transparent);
  }
  .c-occupancy__popover .c-occupancy__chip--sage {
    color: var(--color-sage-600);
    border-color: color-mix(in srgb, var(--color-sage-500) 45%, transparent);
    background: color-mix(in srgb, var(--color-sage-500) 12%, transparent);
  }
  .c-occupancy__popover .c-occupancy__chip--amber {
    color: var(--color-butter-700);
    border-color: color-mix(in srgb, var(--color-butter-500) 55%, transparent);
    background: color-mix(in srgb, var(--color-butter) 18%, transparent);
  }

  .c-occupancy__popover-stat-row {
    display: flex;
    gap: 10px;
  }
  .c-occupancy__popover-stat {
    flex: 1;
    background: var(--color-paper-2);
    border: 1px dashed var(--color-ink-18);
    border-radius: 9px;
    padding: 9px 11px;
  }
  .c-occupancy__popover-stat .c-occupancy__popover-stat-key {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-mute);
  }
  .c-occupancy__popover-stat .c-occupancy__popover-stat-value {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 500;
    color: var(--color-ink);
    margin-top: 2px;
    letter-spacing: -0.01em;
  }
  .c-occupancy__popover-stat .c-occupancy__popover-stat-value--terra {
    color: var(--color-terra-500);
  }

  .c-occupancy__popover-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    gap: 12px;
  }
  .c-occupancy__popover-line--top {
    align-items: flex-start;
  }
  .c-occupancy__popover-line .c-occupancy__popover-line-key {
    color: var(--color-ink-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  .c-occupancy__popover-line .c-occupancy__popover-line-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--color-ink);
  }
  .c-occupancy__popover-line .c-occupancy__popover-line-value--note {
    max-width: 180px;
    text-align: right;
    white-space: normal;
    font-family: var(--font-sans);
    color: var(--color-ink-2);
    line-height: 1.45;
  }

  .c-occupancy__popover-foot {
    padding: 12px 16px;
    border-top: 1.5px dashed var(--color-ink-16);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .c-occupancy__popover-foot .c-occupancy__popover-foot-spacer {
    flex: 1;
  }
  .c-occupancy__popover--cell .c-occupancy__popover-head {
    border-bottom: none;
  }
  .c-occupancy__popover-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-terra-500);
    padding: 6px 10px;
    border-radius: 9px;
    transition: background 0.12s ease;
  }
  .c-occupancy__popover-open:hover {
    background: color-mix(in srgb, var(--color-terra-500) 8%, transparent);
  }

  /* Phase 5 — popover lifecycle, actions, steppers, forms */
  .c-occupancy__popover-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .c-occupancy__popover-button-form {
    display: contents;
  }

  .c-occupancy__popover-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .c-occupancy__popover-button {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid var(--color-ink-16);
    background: var(--color-paper-card);
    font-family: var(--font-sans);
    font-size: 13.5px;
    color: var(--color-ink);
    cursor: pointer;
    text-align: left;
    transition:
      background 0.12s ease,
      border-color 0.12s ease;
  }
  .c-occupancy__popover-button:hover {
    background: color-mix(in srgb, var(--color-ink) 4%, transparent);
    border-color: color-mix(in srgb, var(--color-ink) 24%, transparent);
  }
  .c-occupancy__popover-button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .c-occupancy__popover-button .c-occupancy__popover-button-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
    background: var(--color-paper-2);
    color: var(--color-ink-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .c-occupancy__popover-button--terra .c-occupancy__popover-button-icon {
    background: color-mix(in srgb, var(--color-terra-500) 12%, transparent);
    color: var(--color-terra-500);
  }
  .c-occupancy__popover-button--sage .c-occupancy__popover-button-icon {
    background: color-mix(in srgb, var(--color-sage-500) 16%, transparent);
    color: var(--color-sage-600);
  }
  .c-occupancy__popover-button .c-occupancy__popover-button-sub {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--color-ink-mute);
  }

  .c-occupancy__stage {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--color-ink-16);
    background: var(--color-paper-2);
  }
  .c-occupancy__stage .c-occupancy__stage-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-paper-card);
    color: var(--color-ink-mute);
    border: 1px solid var(--color-ink-16);
  }
  .c-occupancy__stage .c-occupancy__stage-icon--active {
    background: var(--color-sage-500);
    color: var(--color-white);
    border-color: transparent;
  }
  .c-occupancy__stage .c-occupancy__stage-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-ink);
  }
  .c-occupancy__stage .c-occupancy__stage-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--color-ink-mute);
  }
  .c-occupancy__stage--live {
    background: color-mix(in srgb, var(--color-sage-500) 10%, transparent);
    border-color: color-mix(in srgb, var(--color-sage-500) 35%, transparent);
  }
  .c-occupancy__stage--done {
    background: color-mix(in srgb, var(--color-ink) 4%, transparent);
  }
  .c-occupancy__stage--done .c-occupancy__stage-text {
    color: var(--color-ink-2);
  }
  .c-occupancy__stage--waiting {
    border-style: dashed;
  }

  .c-occupancy__popover-field {
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--color-ink);
    background: var(--color-paper-card);
    border: 1px solid var(--color-ink-18);
    border-radius: 9px;
    padding: 9px 12px;
    width: 100%;
    outline: none;
    resize: vertical;
  }
  .c-occupancy__popover-field:focus {
    border-color: var(--color-ink);
    box-shadow: var(--shadow-input-ring);
  }
  .c-occupancy__popover-field-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 5px;
    display: block;
  }
  .c-occupancy__popover-note {
    font-size: 11.5px;
    color: var(--color-ink-mute);
    line-height: 1.45;
  }

  .c-occupancy__rate-step {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .c-occupancy__rate-step .c-occupancy__rate-step-button {
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    flex-shrink: 0;
    border: 1px solid var(--color-ink-18);
    background: var(--color-paper-card);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    cursor: pointer;
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1;
  }
  .c-occupancy__rate-step .c-occupancy__rate-step-button:hover {
    background: color-mix(in srgb, var(--color-ink) 5%, transparent);
  }
  .c-occupancy__rate-step .c-occupancy__rate-step-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .c-occupancy__rate-step .c-occupancy__rate-step-button:disabled:hover {
    background: var(--color-paper-card);
  }

  /* Balance-change preview value (charge vs refund) inside the date stepper. */
  .c-occupancy__popover-line .c-occupancy__popover-line-value--terra {
    color: var(--color-terra-500);
  }
  .c-occupancy__popover-line .c-occupancy__popover-line-value--sage {
    color: var(--color-sage-600);
  }

  /* Inline banners: caution (unsigned reg card before check-in) and info (checked-in date lock). */
  .c-occupancy__popover-warning,
  .c-occupancy__popover-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
  }
  .c-occupancy__popover-warning {
    background: color-mix(in srgb, var(--color-butter) 18%, transparent);
    border-color: color-mix(in srgb, var(--color-caution) 50%, transparent);
    color: var(--color-caution-700);
  }
  .c-occupancy__popover-notice {
    background: color-mix(in srgb, var(--color-terra-500) 9%, transparent);
    border-color: color-mix(in srgb, var(--color-terra-500) 30%, transparent);
    color: var(--color-terra-700);
  }
  .c-occupancy__popover-warning .c-occupancy__notice-text,
  .c-occupancy__popover-notice .c-occupancy__notice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .c-occupancy__popover-warning .c-occupancy__notice-title,
  .c-occupancy__popover-notice .c-occupancy__notice-title {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
  }
  .c-occupancy__popover-warning .c-occupancy__notice-body,
  .c-occupancy__popover-notice .c-occupancy__notice-body {
    font-family: var(--font-sans);
    font-size: 11.5px;
    line-height: 1.4;
    opacity: 0.9;
  }

  /* ── markup-conversion helpers ────────────────────────────────────── */
  .c-occupancy__icon {
    width: 16px;
    height: 16px;
  }
  .c-occupancy__icon--small {
    width: 12px;
    height: 12px;
  }
  .c-occupancy__controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
  }
  .c-occupancy__controls-group {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .c-occupancy__popover-oos-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
  }
}

@layer ds-features {
  /* ── staff payment-method collection (bookings/show callout) ───────── */
  .payment-collection {
    position: relative;
    margin-top: var(--space-3-5);
    padding: var(--space-4);
    border: 1.5px dashed color-mix(in srgb, var(--color-terra-500) 35%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-terra-500) 7%, transparent);
  }

  .payment-collection__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  @media (width >= 1024px) {
    .payment-collection__top {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
    }
  }

  .payment-collection__heading {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-22);
    line-height: 1.15;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
  }

  .payment-collection__body {
    margin-top: var(--space-1);
    font-size: var(--text-13);
    line-height: 1.55;
    color: var(--color-ink-2);
  }

  .payment-collection__action {
    flex-shrink: 0;
  }

  .payment-collection__share {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--color-ink-16);
  }

  .payment-collection__share-help {
    margin-top: var(--space-1);
    margin-bottom: var(--space-2-5);
    font-size: var(--text-12-5);
    line-height: 1.5;
    color: var(--color-ink-mute);
  }

  .payment-collection__share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  /* ── staff payment-method form (bookings/payment_methods/new) ──────── */
  .payment-method-form__intro {
    margin-bottom: var(--space-6);
  }

  .payment-method-form__heading {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: var(--text-stat);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink);
  }

  .payment-method-form__body {
    margin-top: var(--space-2);
    font-size: var(--text-14-5);
    line-height: 1.6;
    color: var(--color-ink-2);
  }

  .payment-method-form__summary {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1.5px dashed var(--color-ink-15);
    border-radius: var(--radius-xl);
    background: var(--color-paper-soft);
  }

  @media (width >= 640px) {
    .payment-method-form__summary {
      grid-template-columns: 1fr 1fr;
    }
  }

  .payment-method-form__summary-guest {
    margin-top: var(--space-1);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: var(--text-lg);
    color: var(--color-ink);
  }

  .payment-method-form__summary-stay {
    margin-top: var(--space-1);
    font-size: var(--text-13);
    color: var(--color-ink-2);
  }

  .payment-method-form__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .payment-method-form__card-label {
    font-size: var(--text-13);
    font-weight: 600;
    color: var(--color-ink);
  }

  .payment-method-form__secure {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2-5);
    border: 1px solid color-mix(in srgb, var(--color-sage-500) 30%, transparent);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-sage-500) 10%, transparent);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-sage-700);
  }

  .payment-method-form__secure-icon {
    width: 12px;
    height: 12px;
  }

  .payment-method-form__card-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 11px var(--space-3-5);
    border: 1px solid var(--color-ink-18);
    border-radius: var(--radius-input);
    background: var(--color-paper-card);
    transition:
      border-color var(--dur-fast),
      background var(--dur-fast);
  }

  .payment-method-form__card-field:focus-within {
    border-color: var(--color-ink);
    background: var(--color-white);
    box-shadow: var(--shadow-input-ring);
  }

  .payment-method-form__card-el {
    flex: 1;
    min-height: 20px;
  }

  .payment-method-form__card-errors {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-destructive-700);
  }

  .payment-method-form__security-note {
    margin-top: var(--space-3);
    font-size: var(--text-12-5);
    line-height: 1.5;
    color: var(--color-ink-mute);
  }

  .payment-method-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
  }
}