/* Property schedule (host + crew): workspace, hero, stage, filters, list, sync runs.
   FullCalendar chrome: property_schedule_calendar.css */

@layer components {
  @keyframes property-schedule-rise {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes property-schedule-glow-shift {
    0%,
    100% {
      opacity: 0.55;
      transform: translate(0, 0) scale(1);
    }

    50% {
      opacity: 0.85;
      transform: translate(4%, -3%) scale(1.04);
    }
  }

  .property-schedule-page {
    position: relative;
    z-index: 0;
    max-width: 72rem;
    margin-inline: auto;
    padding-block: var(--space-4) var(--space-6);
    padding-inline: var(--space-4);
  }

  .property-schedule-page .page-header--schedule {
    margin-bottom: var(--space-4);
  }

  .property-schedule-page .page-header--schedule .page-header__title {
    font-size: clamp(1.25rem, 2.2vw, 1.625rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);
  }

  .property-schedule-back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-info);
    text-decoration: none;
    cursor: pointer;
    transition:
      color var(--duration-fast) var(--ease-default),
      transform var(--duration-fast) var(--ease-default);
  }

  .property-schedule-back-link:hover {
    color: color-mix(in srgb, var(--color-info) 72%, var(--color-text) 28%);
    transform: translateX(-0.125rem);
  }

  .property-schedule-back-link:focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-info));
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-back-link {
      color: color-mix(in srgb, var(--color-info) 85%, var(--color-text) 15%);
    }

    .property-schedule-back-link:hover {
      color: var(--color-text);
    }
  }

  .property-schedule-workspace {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  @media (prefers-reduced-motion: no-preference) {
    .property-schedule-hero,
    .property-schedule-stage {
      animation: property-schedule-rise var(--duration-normal) var(--ease-default) both;
    }

    .property-schedule-stage {
      animation-delay: 40ms;
    }
  }

  /* —— Hero: feeds + sync in one glass panel —— */
  .property-schedule-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-border) 85%, var(--color-info) 15%);
    background: color-mix(in srgb, var(--color-surface) 88%, var(--color-surface-muted) 12%);
    box-shadow: var(--shadow-card);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-hero {
      background: color-mix(in srgb, var(--color-surface) 92%, var(--color-info) 5%);
      border-color: color-mix(in srgb, var(--color-border) 70%, var(--color-info) 30%);
    }
  }

  .property-schedule-hero__glow {
    position: absolute;
    inset: -40% -20% auto -30%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(
      ellipse 70% 60% at 30% 20%,
      color-mix(in srgb, var(--color-info) 22%, transparent) 0%,
      transparent 68%
    );
    pointer-events: none;
    z-index: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .property-schedule-hero__glow {
      animation: property-schedule-glow-shift 14s var(--ease-default) infinite;
    }
  }

  .property-schedule-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
  }

  @media (min-width: 52rem) {
    .property-schedule-hero__grid {
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: start;
      gap: var(--space-5);
      padding: var(--space-5) var(--space-6);
    }
  }

  .property-schedule-hero__feeds {
    min-width: 0;
  }

  .property-schedule-hero__divider {
    display: none;
    width: 1px;
    min-height: 4.5rem;
    background: linear-gradient(
      180deg,
      transparent 0%,
      color-mix(in srgb, var(--color-border) 90%, var(--color-info) 10%) 18%,
      color-mix(in srgb, var(--color-border) 90%, var(--color-info) 10%) 82%,
      transparent 100%
    );
  }

  @media (min-width: 52rem) {
    .property-schedule-hero__divider {
      display: block;
    }
  }

  .property-schedule-hero__sync {
    min-width: 0;
    padding-block: var(--space-1);
  }

  .property-schedule-hero .property-schedule-calendars-chip {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    gap: var(--space-3);
  }

  .property-schedule-calendars-chip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    box-shadow: var(--shadow);
  }

  .property-schedule-calendars-chip__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    min-width: min(100%, 12rem);
  }

  .property-schedule-calendars-chip__title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  .property-schedule-calendars-chip__sources {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .property-schedule-calendars-chip__pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid color-mix(in srgb, var(--color-border) 92%, var(--color-text-muted) 8%);
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    transition:
      border-color var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default),
      background var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  .property-schedule-calendars-chip__pill--on {
    border-color: color-mix(in srgb, var(--color-info) 55%, var(--color-border) 45%);
    color: color-mix(in srgb, var(--color-info) 88%, var(--color-text) 12%);
    background: var(--color-info-bg-tint);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-info) 12%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-calendars-chip__pill--on {
      color: var(--color-text);
    }
  }

  .property-schedule-calendars-chip__pill-sep {
    color: var(--color-text-muted);
    font-weight: 400;
    user-select: none;
  }

  .property-schedule-calendars-chip__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    justify-content: flex-end;
  }

  .property-schedule-calendars-chip__teaser {
    margin: 0;
    flex: 1 1 12rem;
    min-width: min(100%, 14rem);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
  }

  .property-schedule-calendars-chip__add {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--color-border) 80%, var(--color-info) 20%);
    background: color-mix(in srgb, var(--color-surface) 96%, var(--color-info-bg-tint) 4%);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    color: color-mix(in srgb, var(--color-info) 70%, var(--color-text) 30%);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
      border-color var(--duration-fast) var(--ease-default),
      background var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default),
      transform var(--duration-fast) var(--ease-default);
  }

  .property-schedule-calendars-chip__add:hover {
    border-color: color-mix(in srgb, var(--color-info) 45%, var(--color-border) 55%);
    background: var(--color-info-bg-tint);
    color: var(--color-text);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
  }

  .property-schedule-calendars-chip__add:focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-info));
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .property-schedule-calendars-chip__add:hover {
      transform: none;
    }
  }

  .property-schedule-page__title {
    font-family: var(--font-heading-readable);
    font-size: var(--text-2xl);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
  }

  .property-schedule-page__lead {
    margin: 0 0 var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  /* —— Stage: tabs + controls + canvas —— */
  .property-schedule-stage {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  .property-schedule-stage__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: color-mix(in srgb, var(--color-surface-muted) 35%, var(--color-surface) 65%);
    border-bottom: 1px solid var(--color-border);
  }

  @media (min-width: 40rem) {
    .property-schedule-stage__header {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--space-4);
    }
  }

  .property-schedule-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
  }

  @media (min-width: 40rem) {
    .property-schedule-controls {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
    }
  }

  /* Tabs: pill switcher, less orange chrome */
  .tabs.tabs--property-schedule {
    gap: var(--space-1);
    padding: var(--space-1);
    border: none;
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface-muted) 55%, var(--color-surface) 45%);
    width: fit-content;
    max-width: 100%;
  }

  .tabs.tabs--property-schedule .tabs__tab {
    margin-bottom: 0;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    border: none;
    border-radius: var(--radius-full);
    border-bottom: none;
    background: transparent;
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  .tabs.tabs--property-schedule .tabs__tab:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
  }

  .tabs.tabs--property-schedule .tabs__tab--active {
    color: var(--color-text);
    font-weight: 700;
    background: var(--color-surface);
    box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--color-info) 18%, transparent);
  }

  .property-schedule-filters {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-1);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface-muted) 40%, transparent);
  }

  .property-schedule-filters__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-inline-end: var(--space-1);
  }

  .property-schedule-filters__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding-inline: var(--space-3);
    padding-block: var(--space-1);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-default),
      color var(--duration-fast) var(--ease-default),
      border-color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  .property-schedule-filters__chip:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 5%, transparent);
  }

  .property-schedule-filters__chip--active {
    border-color: color-mix(in srgb, var(--color-info) 40%, var(--color-border) 60%);
    background: var(--color-info-bg-tint);
    color: color-mix(in srgb, var(--color-info) 55%, var(--color-text) 45%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-info) 10%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-filters__chip--active {
      color: var(--color-text);
    }
  }

  .property-schedule-filters__chip:focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-info));
    outline-offset: 2px;
  }

  .property-schedule-status__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    justify-content: space-between;
  }

  .property-schedule-status__meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
    line-height: var(--leading-normal);
  }

  .property-schedule-status__meta strong {
    color: var(--color-text);
    font-weight: 700;
  }

  .property-schedule-status__hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: var(--space-2) 0 0;
    line-height: var(--leading-tight);
  }

  .property-schedule-sync-form {
    display: inline;
    margin: 0;
  }

  .property-schedule-sync-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-primary-text);
    cursor: pointer;
    background: linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-primary) 100%, transparent) 0%,
      color-mix(in srgb, var(--color-primary-hover) 92%, var(--color-primary) 8%) 100%
    );
    box-shadow:
      0 1px 0 color-mix(in srgb, #ffffff 22%, transparent) inset,
      0 4px 14px color-mix(in srgb, var(--color-primary) 28%, transparent);
    transition:
      transform var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default),
      filter var(--duration-fast) var(--ease-default);
  }

  .property-schedule-sync-btn:hover {
    filter: brightness(1.04);
    box-shadow:
      0 1px 0 color-mix(in srgb, #ffffff 28%, transparent) inset,
      0 6px 20px color-mix(in srgb, var(--color-primary) 34%, transparent);
  }

  .property-schedule-sync-btn:focus-visible {
    outline: 2px solid var(--color-border-focus, var(--color-primary));
    outline-offset: 2px;
  }

  .property-schedule-sync-btn:active {
    transform: translateY(1px);
  }

  @media (prefers-reduced-motion: reduce) {
    .property-schedule-sync-btn:active {
      transform: none;
    }
  }

  .property-schedule-ics-setup {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-3) 0 0;
    line-height: var(--leading-normal);
  }

  .property-schedule-ics-setup__link {
    display: inline;
    margin: 0;
    margin-inline-start: var(--space-1);
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: inherit;
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    text-underline-offset: 0.15em;
    cursor: pointer;
  }

  .property-schedule-ics-setup__link:hover {
    color: var(--color-primary-readable-on-light);
    text-decoration-color: color-mix(in srgb, var(--color-primary) 65%, transparent);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-ics-setup__link:hover {
      color: var(--color-text);
    }
  }

  .property-schedule-ics-setup__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  .property-schedule-calendars-chip .property-schedule-ics-setup__link {
    color: color-mix(in srgb, var(--color-info) 70%, var(--color-text) 30%);
    text-decoration: none;
  }

  .property-schedule-calendars-chip .property-schedule-ics-setup__link:hover {
    color: var(--color-text);
    text-decoration: none;
  }

  .property-schedule-ics-modal .modal__content {
    max-width: min(36rem, 100%);
  }

  .property-schedule-ics-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .property-schedule-ics-modal__intro,
  .property-schedule-ics-modal__hint {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
  }

  .property-schedule-ics-modal__hint--emphasis {
    font-weight: 600;
    color: var(--color-text-muted);
  }

  .property-schedule-ics-modal__platform {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .property-schedule-ics-modal__subhead {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
  }

  .property-schedule-ics-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .property-schedule-ics-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-2);
  }

  .property-schedule-ics-modal__secondary-link {
    font-size: var(--text-sm);
    text-align: center;
    color: var(--color-text-muted);
  }

  .property-schedule-ics-modal__secondary-link:hover {
    color: var(--color-text);
  }

  .property-schedule-ics-modal__external-links {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .property-schedule-ics-modal__external-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    text-underline-offset: 0.12em;
  }

  .property-schedule-ics-modal__external-link:hover {
    color: var(--color-primary-readable-on-light);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-ics-modal__external-link:hover {
      color: var(--color-text);
    }
  }

  .property-schedule-ics-modal__external-sep {
    color: var(--color-text-muted);
    margin-inline: var(--space-1);
    font-weight: 400;
    text-decoration: none;
  }

  .property-schedule-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-surface-muted) 30%, transparent);
  }

  .property-schedule-canvas > .property-schedule-legend {
    margin-bottom: var(--space-3);
  }

  .property-schedule-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .property-schedule-legend__swatch {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-border) 40%, transparent);
  }

  .property-schedule-legend__swatch--booking {
    background: linear-gradient(
      135deg,
      var(--color-primary) 0%,
      color-mix(in srgb, var(--color-primary-hover) 70%, var(--color-info) 30%) 100%
    );
  }

  .property-schedule-legend__swatch--block {
    background: var(--color-slate-12);
    border: 1px dashed var(--color-border);
    box-shadow: none;
  }

  .property-schedule-legend__swatch--unknown {
    background: var(--color-info-bg-tint);
    border: 1px solid var(--color-info);
  }

  .property-schedule-canvas {
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-surface-muted) 22%, var(--color-surface) 78%);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-canvas {
      background: color-mix(in srgb, var(--color-surface-muted) 35%, var(--color-surface) 65%);
    }
  }

  .property-schedule-calendar-shell {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow var(--duration-fast) var(--ease-default);
  }

  .property-schedule-calendar-shell:focus-within {
    box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--color-info) 15%, transparent);
  }

  .property-schedule-calendar-shell .property-schedule-calendar {
    padding: var(--space-3) var(--space-3) var(--space-4);
  }

  .property-schedule-list-shell {
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .property-schedule-list-shell--empty {
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px dashed color-mix(in srgb, var(--color-border) 85%, var(--color-info) 15%);
  }

  .property-schedule-list-card.card {
    margin: 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }

  .property-schedule-list {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
  }

  .property-schedule-list th,
  .property-schedule-list td {
    padding: var(--space-3) var(--space-4);
    text-align: start;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
  }

  .property-schedule-list tbody tr {
    transition: background var(--duration-fast) var(--ease-default);
  }

  .property-schedule-list tbody tr:hover {
    background: color-mix(in srgb, var(--color-info-bg-tint) 45%, var(--color-surface) 55%);
  }

  .property-schedule-list th {
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--color-surface-muted) 50%, var(--color-surface) 50%);
  }

  .property-schedule-list__kind--booking {
    color: var(--color-primary);
    font-weight: 600;
  }

  .property-schedule-list__kind--block {
    color: var(--color-text-muted);
  }

  .property-schedule-list__kind--unknown {
    color: var(--color-info);
  }

  .property-schedule-runs {
    margin-top: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-surface-muted) 40%, var(--color-surface) 60%);
    box-shadow: var(--shadow);
  }

  .property-schedule-runs__title {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
    color: var(--color-text-muted);
  }

  .property-schedule-runs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .property-schedule-runs__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    font-size: var(--text-sm);
    color: var(--color-text);
    transition:
      border-color var(--duration-fast) var(--ease-default),
      box-shadow var(--duration-fast) var(--ease-default);
  }

  .property-schedule-runs__item:hover {
    border-color: color-mix(in srgb, var(--color-info) 25%, var(--color-border) 75%);
    box-shadow: var(--shadow);
  }

  .property-schedule-runs__item-meta {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    margin-top: var(--space-2);
    line-height: var(--leading-tight);
  }

  /* Crew read-only schedule: calmer list (server-rendered), month-only FullCalendar (no FC list view). */
  .property-schedule-page--crew .property-schedule-canvas {
    padding: var(--space-3);
    background: color-mix(in srgb, var(--color-surface-muted) 14%, var(--color-surface) 86%);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-page--crew .property-schedule-canvas {
      background: color-mix(in srgb, var(--color-surface-muted) 22%, var(--color-surface) 78%);
    }
  }

  .property-schedule-page--crew .property-schedule-list-card {
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-info) 18%);
    box-shadow: var(--shadow-md);
  }

  .property-schedule-page--crew .property-schedule-list tbody tr {
    border-left: 3px solid transparent;
    transition: background var(--duration-fast) var(--ease-default);
  }

  .property-schedule-page--crew .property-schedule-list tbody tr:hover {
    background: color-mix(in srgb, var(--color-info-bg-tint) 42%, var(--color-surface) 58%);
  }

  .property-schedule-page--crew .property-schedule-list tbody tr:has(.property-schedule-list__kind--booking) {
    border-left-color: color-mix(in srgb, var(--color-info) 50%, var(--color-border) 50%);
  }

  .property-schedule-page--crew .property-schedule-list tbody tr:has(.property-schedule-list__kind--unknown) {
    border-left-color: color-mix(in srgb, var(--color-info) 35%, var(--color-border) 65%);
  }

  .property-schedule-page--crew .property-schedule-list tbody tr:has(.property-schedule-list__kind--block) {
    border-left-color: color-mix(in srgb, var(--color-text-muted) 25%, var(--color-border) 75%);
  }

  .property-schedule-page--crew .property-schedule-list__kind--booking {
    color: color-mix(in srgb, var(--color-info) 42%, var(--color-text) 58%);
    font-weight: 700;
  }

  .property-schedule-page--crew .property-schedule-hero {
    border-color: color-mix(in srgb, var(--color-border) 80%, var(--color-info) 20%);
  }

  .property-schedule-page--crew .property-schedule-stage {
    border-color: color-mix(in srgb, var(--color-border) 85%, var(--color-info) 15%);
  }

  turbo-frame#property_schedule_canvas {
    display: block;
  }

  turbo-frame#property_schedule_canvas .property-schedule-canvas {
    animation: none;
  }

  .property-schedule-list__dates--compact {
    display: none;
  }

  /* Crew mobile list: compact two-column striping (Airbnb pink / Vrbo blue). */
  @media (max-width: 47.9375rem) {
    .property-schedule-page--crew {
      --schedule-airbnb-brand: #ff5a5f;
      --schedule-vrbo-brand: #006aa7;
      --schedule-airbnb-row: color-mix(in srgb, var(--schedule-airbnb-brand) 22%, var(--color-surface));
      --schedule-airbnb-row-alt: color-mix(in srgb, var(--schedule-airbnb-brand) 12%, var(--color-surface));
      --schedule-vrbo-row: color-mix(in srgb, var(--schedule-vrbo-brand) 22%, var(--color-surface));
      --schedule-vrbo-row-alt: color-mix(in srgb, var(--schedule-vrbo-brand) 12%, var(--color-surface));
      padding-inline: var(--space-2);
    }

    @media (prefers-color-scheme: dark) {
      .property-schedule-page--crew {
        --schedule-airbnb-row: color-mix(in srgb, var(--schedule-airbnb-brand) 28%, var(--color-surface));
        --schedule-airbnb-row-alt: color-mix(in srgb, var(--schedule-airbnb-brand) 16%, var(--color-surface));
        --schedule-vrbo-row: color-mix(in srgb, var(--schedule-vrbo-brand) 28%, var(--color-surface));
        --schedule-vrbo-row-alt: color-mix(in srgb, var(--schedule-vrbo-brand) 16%, var(--color-surface));
      }
    }

    .property-schedule-page--crew .property-schedule-canvas {
      padding: var(--space-2) 0;
      background: var(--color-surface);
    }

    .property-schedule-page--crew .property-schedule-list-card {
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    .property-schedule-page--crew .property-schedule-list__dates--full {
      display: none;
    }

    .property-schedule-page--crew .property-schedule-list__dates--compact {
      display: inline;
    }

    .property-schedule-page--crew .property-schedule-list__col-summary,
    .property-schedule-page--crew .property-schedule-list__col-kind {
      display: none;
    }

    .property-schedule-page--crew .property-schedule-list {
      table-layout: fixed;
      font-size: var(--text-sm);
    }

    .property-schedule-page--crew .property-schedule-list th,
    .property-schedule-page--crew .property-schedule-list td {
      padding: var(--space-2) var(--space-2);
      border-bottom: none;
      vertical-align: middle;
    }

    .property-schedule-page--crew .property-schedule-list thead th {
      padding-block: var(--space-2);
      font-size: var(--text-xs);
      background: var(--color-surface-muted);
      border-bottom: 1px solid var(--color-border);
    }

    .property-schedule-page--crew .property-schedule-list__col-dates {
      width: 62%;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.01em;
    }

    .property-schedule-page--crew .property-schedule-list__col-source {
      width: 38%;
      text-align: end;
      white-space: nowrap;
      font-weight: 700;
    }

    .property-schedule-page--crew .property-schedule-list tbody tr {
      border-left: none;
    }

    .property-schedule-page--crew .property-schedule-list tbody tr:hover {
      filter: brightness(0.98);
    }

    @media (prefers-color-scheme: dark) {
      .property-schedule-page--crew .property-schedule-list tbody tr:hover {
        filter: brightness(1.06);
      }
    }

    .property-schedule-page--crew .property-schedule-list__row--src-airbnb.property-schedule-list__row--stripe-odd {
      background: var(--schedule-airbnb-row);
    }

    .property-schedule-page--crew .property-schedule-list__row--src-airbnb.property-schedule-list__row--stripe-even {
      background: var(--schedule-airbnb-row-alt);
    }

    .property-schedule-page--crew .property-schedule-list__row--src-vrbo.property-schedule-list__row--stripe-odd {
      background: var(--schedule-vrbo-row);
      color: color-mix(in srgb, var(--schedule-vrbo-brand) 55%, var(--color-text) 45%);
    }

    .property-schedule-page--crew .property-schedule-list__row--src-vrbo.property-schedule-list__row--stripe-even {
      background: var(--schedule-vrbo-row-alt);
      color: color-mix(in srgb, var(--schedule-vrbo-brand) 55%, var(--color-text) 45%);
    }

    @media (prefers-color-scheme: dark) {
      .property-schedule-page--crew .property-schedule-list__row--src-vrbo.property-schedule-list__row--stripe-odd,
      .property-schedule-page--crew .property-schedule-list__row--src-vrbo.property-schedule-list__row--stripe-even {
        color: var(--color-text);
      }
    }

    .property-schedule-page--crew .property-schedule-list__row--src-airbnb .property-schedule-list__col-source {
      color: color-mix(in srgb, var(--schedule-airbnb-brand) 72%, var(--color-text) 28%);
    }

    .property-schedule-page--crew .property-schedule-list__row--src-vrbo .property-schedule-list__col-source {
      color: color-mix(in srgb, var(--schedule-vrbo-brand) 78%, var(--color-text) 22%);
    }

    @media (prefers-color-scheme: dark) {
      .property-schedule-page--crew .property-schedule-list__row--src-airbnb .property-schedule-list__col-source,
      .property-schedule-page--crew .property-schedule-list__row--src-vrbo .property-schedule-list__col-source {
        color: var(--color-text);
      }
    }
  }

  .property-schedule-page--turn-windows .property-schedule-controls {
    display: none;
  }

  .property-schedule-page--turn-windows .property-schedule-canvas {
    padding: var(--space-3);
    background: color-mix(in srgb, var(--color-surface-muted) 20%, var(--color-surface) 80%);
  }

  .property-schedule-turn-windows-shell {
    padding: var(--space-1) 0 var(--space-2);
  }

  .property-schedule-turn-windows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
  }

  .property-schedule-turn-windows::before {
    content: "";
    position: absolute;
    left: calc(var(--space-3) + 5px);
    top: var(--space-4);
    bottom: var(--space-4);
    width: 2px;
    border-radius: var(--radius-full);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-info) 35%, var(--color-border) 65%) 0%,
      color-mix(in srgb, var(--color-info) 15%, var(--color-border) 85%) 100%
    );
  }

  .property-schedule-turn-windows__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-3);
    row-gap: var(--space-2);
    align-items: start;
    margin-left: 0;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-info) 14%, var(--color-border) 86%);
    border-radius: var(--radius-lg);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-surface) 92%, var(--color-info) 8%) 0%,
      var(--color-surface) 100%
    );
    box-shadow: var(--shadow-md);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-turn-windows__item {
      background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-surface) 88%, var(--color-info) 12%) 0%,
        var(--color-surface) 100%
      );
    }
  }

  .property-schedule-turn-windows__item--same-day {
    border-color: color-mix(in srgb, var(--color-warning-border) 62%, var(--color-border) 38%);
    background: linear-gradient(
      135deg,
      color-mix(in srgb, var(--color-warning-bg) 55%, var(--color-surface) 45%) 0%,
      color-mix(in srgb, var(--color-warning-bg) 18%, var(--color-surface) 82%) 100%
    );
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--color-warning-border) 22%, transparent),
      var(--shadow-md);
  }

  @media (prefers-color-scheme: dark) {
    .property-schedule-turn-windows__item--same-day {
      background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--color-warning-bg) 42%, var(--color-surface) 58%) 0%,
        color-mix(in srgb, var(--color-warning-bg) 16%, var(--color-surface) 84%) 100%
      );
    }
  }

  .property-schedule-turn-windows__marker {
    grid-row: 1 / span 2;
    width: 12px;
    height: 12px;
    margin-top: 0.35rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-surface);
    background: color-mix(in srgb, var(--color-info) 55%, var(--color-border) 45%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-info) 25%, transparent);
    z-index: 1;
  }

  .property-schedule-turn-windows__item--same-day .property-schedule-turn-windows__marker {
    background: var(--color-warning-border);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-warning-border) 35%, transparent);
  }

  .property-schedule-turn-windows__range {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: var(--leading-snug);
  }

  .property-schedule-turn-windows__range--compact {
    display: none;
  }

  .property-schedule-turn-windows__now {
    font-size: var(--text-base);
    font-weight: 800;
    color: color-mix(in srgb, var(--color-info) 55%, var(--color-text) 45%);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .property-schedule-turn-windows__item--same-day .property-schedule-turn-windows__now {
    color: var(--color-warning-text);
  }

  .property-schedule-turn-windows__time {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text);
  }

  .property-schedule-turn-windows__item--same-day .property-schedule-turn-windows__time {
    font-weight: 700;
  }

  .property-schedule-turn-windows__arrow {
    color: var(--color-text-muted);
    font-weight: 700;
  }

  .property-schedule-turn-windows__suffix {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: lowercase;
  }

  .property-schedule-turn-windows__badge {
    grid-column: 2;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-warning-text);
    background: color-mix(in srgb, var(--color-warning-bg) 82%, var(--color-surface) 18%);
    border: 1px solid color-mix(in srgb, var(--color-warning-border) 35%, transparent);
  }

  @media (max-width: 47.9375rem) {
    .property-schedule-page--crew.property-schedule-page--turn-windows {
      padding-inline: var(--space-2);
    }

    .property-schedule-page--crew .property-schedule-turn-windows__range--full {
      display: none;
    }

    .property-schedule-page--crew .property-schedule-turn-windows__range--compact {
      display: flex;
    }

    .property-schedule-page--crew .property-schedule-turn-windows__item {
      padding: var(--space-3);
    }

    .property-schedule-page--crew .property-schedule-turn-windows__time,
    .property-schedule-page--crew .property-schedule-turn-windows__now {
      font-size: var(--text-sm);
    }
  }
}