/* ── Responsive ────────────────────────────── */
@media (max-width: 600px) {
  .topbar {
    padding: 16px 14px;
  }

  .app {
    padding: 0 14px 16px;
  }

  .calendar-panel {
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 0;
  }

  .calendar-outer {
    column-gap: 6px;
  }

  .header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .header-nav {
    width: 100%;
    justify-content: space-between;
  }

  .header-nav h1 {
    font-size: var(--text-xl);
    min-width: 0;
    flex: 1;
  }

  .header-nav .btn--icon {
    width: 34px;
    height: 34px;
    font-size: var(--text-xl);
  }

  .header-right {
    display: none;
  }

  .day {
    aspect-ratio: auto;
    min-height: 64px;
    padding: 4px 2px;
    border-radius: var(--radius-tight);
    gap: 1px;
  }

  /* Override the desktop --radius (16px) on met tiles so they match
     the slimmer mobile day-tile radius. */
  .day[data-state="met"] {
    border-radius: var(--radius-tight);
  }

  .day__number {
    font-size: var(--text-sm);
  }

  .day__value {
    font-size: var(--text-sm);
  }

  /* Hide the hover-only "+" button on mobile — tapping the cell already opens
     the modal, and showing it permanently overlaps the hours value. */
  .day__add,
  .day:hover .day__add {
    display: none;
  }

  .day__note-dot {
    top: 3px;
    left: 3px;
    width: 4px;
    height: 4px;
  }

  .weekday-headers span {
    font-size: var(--text-sm);
    letter-spacing: 0;
    padding: 2px 0;
  }

  .weekday-headers,
  .calendar-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .weekday-headers {
    gap: 6px;
    margin-bottom: 6px;
  }

  /* Row gap fits the met pill vertically without bleeding into adjacent
     rows. Column gap is intentionally smaller than 2× the pill's horizontal
     inset so adjacent pills overlap (no visible seam between consecutive
     met tiles). */
  .calendar-grid {
    gap: 22px 10px;
  }

  /* Pill insets: 8px horizontal × 2 = 16px combined > 10px column gap → 6px
     overlap between adjacent met pills, matching desktop's joined look.
     Vertical 8/12 = 20px combined < 22px row gap so pills don't touch
     vertically. */
  .day.is-streak::before {
    top: -8px;
    right: -8px;
    bottom: -12px;
    left: -8px;
    border-radius: var(--radius-tight);
  }

  .day.is-streak:hover::before {
    top: -6px;
    bottom: -14px;
  }

  .day.is-streak:active::before {
    top: -12px;
    bottom: -8px;
  }

  /* Hide weekly summary column on mobile so the calendar grid takes full
     width. Display is forced to none over .week-summaries[hidden] which only
     matches when JS toggles the [hidden] attribute. */
  .week-summaries {
    display: none;
  }

  .streak-stats {
    margin-left: 0;
  }

  .modal {
    border-radius: 20px;
    padding: 20px;
  }

  .focus-layout {
    flex-direction: column;
  }

  .focus-sidebar {
    width: 100%;
    order: -1;
  }

  .focus-panel {
    padding: 18px;
  }

  .focus-timer {
    font-size: var(--text-display);
  }

  .focus-timer-wrap {
    width: 220px;
    height: 220px;
  }

  .focus-ring-track,
  .focus-ring-progress {
    stroke-width: 8;
  }

  .input--timer {
    font-size: var(--text-4xl);
  }
}