/* Phone: short appointments readable + shorter hours viewport */
@media (max-width: 720px) {
  .appt-viewport,
  .appt-grid {
    --appt-row-h: 34px;
  }

  .appt-grid {
    background: repeating-linear-gradient(
      180deg,
      transparent,
      transparent calc(var(--appt-row-h) - 1px),
      var(--rule-light) calc(var(--appt-row-h) - 1px),
      var(--rule-light) var(--appt-row-h)
    );
    /* ~20% taller than v2 (~4 hours visible) */
    --appt-visible-slots: 17;
    max-height: min(
      calc(var(--appt-row-h) * var(--appt-visible-slots)),
      50dvh,
      calc(100dvh - 300px)
    );
  }

  .appt-row {
    grid-template-columns: 18px 28px 1fr;
    font-size: 0.72rem;
  }

  .appt-row__hour,
  .appt-row__min {
    padding-top: 2px;
    font-size: 0.68rem;
  }

  .appt-ink {
    font-size: 0.78rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .appt-lane.has-event {
    padding: 1px 5px;
  }
}

@media (max-width: 400px) {
  .appt-viewport,
  .appt-grid {
    --appt-row-h: 36px;
  }

  .appt-grid {
    --appt-visible-slots: 14;
    max-height: min(
      calc(var(--appt-row-h) * var(--appt-visible-slots)),
      46dvh,
      calc(100dvh - 280px)
    );
  }

  .appt-row {
    grid-template-columns: 16px 26px 1fr;
  }

  .appt-ink {
    font-size: 0.8rem;
  }
}

@media (max-height: 700px) and (max-width: 900px) {
  .appt-grid {
    --appt-visible-slots: 14;
    max-height: min(
      calc(var(--appt-row-h, 26px) * var(--appt-visible-slots)),
      43dvh
    );
  }
}