/* =============================================================================
   COMPONENT: schedule — weekday stepper + task rows (v6 reference).
   ========================================================================== */
@layer components {
  .schedule-page__header { gap: var(--space-md); }

  .schedule-day-label {
    margin: calc(-1 * var(--space-2xs)) 0 var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
  }

  .schedule-day-label strong {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  .schedule-page__flow { display: flex; flex-direction: column; }

  @media (min-width: 48rem) {
    .schedule-page__flow { max-inline-size: 42rem; }
  }

  /* ---- Weekday stepper (.daystep) ---------------------------------------- */
  .schedule-week {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-block-end: var(--space-md);
  }

  /* On a wide desktop viewport the strip's flex:1 days would otherwise stretch
     the whole bar edge-to-edge while the day pills stay left-packed, stranding
     the next-day arrow far to the right (D-12 two-posture). Cap it to the same
     width as the task list below so the arrows stay close to the days. */
  @media (min-width: 48rem) {
    .schedule-week { max-inline-size: 42rem; }
  }

  .schedule-week__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    flex: none;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--color-text-muted);
  }

  .schedule-week__days {
    display: flex;
    flex: 1;
    gap: var(--space-3xs);
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .schedule-week__days::-webkit-scrollbar { display: none; }

  .schedule-week__day { flex: 0 0 auto; }

  .schedule-week__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  .schedule-week__dot {
    position: absolute;
    inset-block-end: var(--space-2xs);
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: 0.25rem;
    block-size: 0.25rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
  }

  .schedule-week__day--selected .schedule-week__link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
    font-weight: var(--weight-semibold);
  }

  .schedule-week__day--selected .schedule-week__dot { background: var(--accent-contrast); }

  .schedule-week__day:not(.schedule-week__day--has-tasks) .schedule-week__dot { display: none; }

  /* ---- Band dividers + task rows (.trow) --------------------------------- */
  .schedule-flow {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .schedule-divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-md) var(--space-sm);
    padding-inline: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .schedule-divider::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--color-border);
  }

  .schedule-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
  }

  .schedule-card__slot {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex: none;
    min-inline-size: 3.25rem;
  }

  .schedule-card--draggable .schedule-card__slot { min-inline-size: 4.75rem; }

  .schedule-card__time {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--accent);
    line-height: var(--leading-tight);
    white-space: nowrap;
  }

  .schedule-card__anchip {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-tight);
  }

  .schedule-card__grip {
    display: inline-flex;
    color: var(--color-text-muted);
    cursor: grab;
    touch-action: none;
  }

  .schedule-card--draggable:active .schedule-card__grip { cursor: grabbing; }

  /* Pointer-driven drag reorder feedback (touch + mouse alike). */
  .schedule-card--dragging {
    opacity: 0.5;
    box-shadow: var(--shadow-sm);
  }

  .schedule-card--drop-target,
  .schedule-card--drop-before,
  .schedule-card--drop-after {
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent) 8%, var(--surface-raised));
  }

  .schedule-card--drop-before {
    box-shadow: inset 0 3px 0 0 var(--accent);
  }

  .schedule-card--drop-after {
    box-shadow: inset 0 -3px 0 0 var(--accent);
  }

  .schedule-card__icon {
    flex: none;
    inline-size: 2.125rem;
    block-size: 2.125rem;
  }

  .schedule-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3xs);
    min-inline-size: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  .schedule-card__title-row { display: flex; align-items: center; gap: var(--space-xs); min-inline-size: 0; }

  .schedule-card__title {
    overflow-wrap: anywhere;
    line-height: var(--leading-normal);
    color: var(--color-text);
    text-decoration: none;
  }

  a.schedule-card__title:hover { text-decoration: underline; }

  /* Read-only detail trigger for non-admins (ACR-0023/ACR-0054). */
  button.schedule-card__title--link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    text-align: start;
    color: inherit;
    cursor: pointer;
  }

  button.schedule-card__title--link:hover { text-decoration: underline; }

  .schedule-card__photo {
    display: inline-flex;
    flex: none;
    color: var(--color-text-muted);
  }

  .schedule-card__trail {
    display: flex;
    justify-content: flex-end;
    flex: none;
  }

  .schedule-card--done .schedule-card__title {
    color: var(--color-text-muted);
    text-decoration: line-through;
  }

  .schedule-flow__empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  /* Shared timeline dividers on Today. */
  .timeline-divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block: var(--space-md) var(--space-sm);
    padding-inline: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .timeline-divider::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--color-border);
  }

  .timeline-divider__label { flex: none; }
}