/* Reschedule — moving an appointment from one slot to another.
   The hero pairs the outgoing ticket with the incoming one, which stays
   blank until a date is picked and then fills in from the form field.
   Ticket geometry is shared with .appointment-show so both pages read
   as the same product. */

@scope (.reschedule) {
  :scope {
    --_ticket: light-dark(var(--blue-950), var(--blue-500));
    --_ticket-text: light-dark(var(--white), var(--slate-950));
    --_ticket-rule: light-dark(rgb(255 255 255 / 0.2), rgb(15 23 42 / 0.2));
    /* Tint for the time bar of a ticket that isn't the solid blue one. */
    --_stub-tint: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.06));
    --_ticket-width: 8.5rem;
    --_caption-height: 1rem;

    max-width: 72rem;
    gap: var(--space-2xl);
  }

  /* --- Hero ------------------------------------------------------------ */

  /* Who first, then the slot they're being moved to — the tickets sit on the
     far edge so the banner holds both ends of a wide screen. */
  .reschedule__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
  }

  .reschedule__transfer {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
  }

  .reschedule__slot {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .reschedule__caption {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    /* Fixed so both tickets start at the same y, and so the arrow can be
       offset by an exact caption block. */
    min-height: var(--_caption-height);
    line-height: 1rem;
    letter-spacing: var(--tracking-widest);
    text-align: center;
    text-transform: uppercase;
  }

  .reschedule__arrow {
    display: flex;
    align-items: center;
    /* Clear the caption block so the arrow centres on the ticket bodies. */
    margin-block-start: calc(var(--_caption-height) + var(--space-sm));
    color: var(--color-text-muted);

    .icon {
      width: 1.5rem;
      height: 1.5rem;
    }
  }

  /* --- Tickets --------------------------------------------------------- */

  .reschedule__ticket {
    display: grid;
    grid-template-areas:
      "weekday"
      "day"
      "month"
      "time";
    justify-items: center;
    width: var(--_ticket-width);
    overflow: hidden;
    border-radius: var(--radius-lg);
  }

  /* The slot being left behind: a real record, greyed out. Solid edges, drawn
     with outline so both tickets keep the same box. */
  .reschedule__ticket--outgoing {
    --_ticket-rule: var(--color-border);

    background: var(--color-surface-raised);
    color: var(--color-text-muted);
    outline: 1px solid var(--color-border);
    outline-offset: -1px;
  }

  .reschedule__ticket--incoming {
    background: var(--_ticket);
    color: var(--_ticket-text);
    box-shadow: var(--shadow-lg);

    @media (prefers-reduced-motion: no-preference) {
      transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
    }
  }

  /* Nothing picked yet: an empty outline waiting to be filled. No inner rules,
     so it never gets mistaken for a real ticket. */
  .reschedule__ticket--incoming.reschedule__ticket--empty {
    --_ticket-text: var(--color-text-muted);
    --_ticket-rule: transparent;

    background: transparent;
    box-shadow: none;
    outline: 2px dashed light-dark(var(--slate-300), var(--slate-600));
    outline-offset: -2px;
  }

  .reschedule__weekday,
  .reschedule__month {
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-align: center;
    text-transform: uppercase;
  }

  .reschedule__weekday {
    grid-area: weekday;
    border-bottom: 1px solid var(--_ticket-rule);
  }

  .reschedule__day {
    grid-area: day;
    padding-top: var(--space-sm);
    font-size: var(--text-4xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
  }

  .reschedule__month {
    grid-area: month;
    padding-bottom: var(--space-sm);
  }

  .reschedule__time {
    grid-area: time;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    background: rgb(0 0 0 / 0.12);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
    text-align: center;
  }

  .reschedule__ticket--outgoing .reschedule__time {
    background: var(--_stub-tint);
    border-top: 1px solid var(--_ticket-rule);
  }

  .reschedule__ticket--empty .reschedule__time {
    background: transparent;
  }

  /* --- Identity -------------------------------------------------------- */

  .reschedule__identity {
    order: -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
  }

  .reschedule__eyebrow {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }

  .reschedule__identity .record-page__title {
    font-size: var(--text-heading-3);
    letter-spacing: var(--tracking-tight);

    /* The name grows into the room the wide hero gives it. */
    @media (width >= 64rem) {
      font-size: var(--text-heading-2);
    }
  }

  .reschedule__identity-meta {
    margin-block-start: var(--space-2xs);
    font-size: var(--text-body-sm);

    a {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      color: var(--color-text-secondary);
      font-variant-numeric: tabular-nums;
      text-decoration: none;

      &:hover {
        color: var(--color-text-link);
      }
    }

    .icon {
      width: 1.1em;
      height: 1.1em;
      flex-shrink: 0;
    }
  }

  /* --- Form ------------------------------------------------------------ */

  .record-page__card > .form.reschedule__form {
    max-width: none;
  }

  /* Fields read as --color-surface-muted, which collapses into the card's own
     surface in dark mode. Lift it here so every input keeps a visible edge. */
  .reschedule__card {
    --color-surface-muted: light-dark(var(--slate-100), var(--slate-800));
  }

  /* Picking the date is the page's job — tie the field to the blue ticket. */
  .reschedule__when .form-field__input {
    background: var(--color-primary-muted);
    font-size: var(--text-heading-5);
    font-weight: var(--font-semibold);
  }

  /* Decisions on the left, the briefing you actually type on the right, so
     the notes get the card's full height instead of a four-line slot. */
  .reschedule__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);

    @media (width >= 64rem) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
      gap: var(--space-2xl);
    }
  }

  /* Stretches to the decisions column, so the two bottoms line up. */
  .reschedule__notes textarea.form-field__input {
    flex: 1;
    min-height: 12rem;
  }

  .reschedule__actions {
    justify-content: flex-end;
  }

  /* --- Narrow ---------------------------------------------------------- */

  @media (width < 48rem) {
    :scope {
      /* Captions wrap to two lines in the narrow columns. */
      --_caption-height: 2rem;
    }

    .reschedule__hero {
      grid-template-columns: 1fr;
      align-items: start;
      gap: var(--space-lg);
      padding: var(--space-lg);
    }

    .reschedule__transfer {
      gap: var(--space-md);
    }

    .reschedule__slot {
      flex: 1;
      min-width: 0;
    }

    .reschedule__ticket {
      width: 100%;
    }

    .reschedule__day {
      font-size: var(--text-3xl);
    }

    .reschedule__actions {
      flex-direction: column-reverse;
      align-items: stretch;

      .button {
        width: 100%;
        justify-content: center;
      }
    }
  }
}