/* Desktop-first responsive rules. Mobile prioritizes Today, Next Task,
   Quick Add, Focus Mode and Small Tasks, per the product spec — the sidebar
   collapses into a bottom bar instead of disappearing entirely so core nav
   stays reachable in one thumb-reach. */

@media (max-width: 1080px) {
  /* The page shell keeps its one rule (layout.css); narrower windows only
     tighten its top offset and gutter tokens. */
  :root { --shell-top: var(--space-6); --shell-gutter: var(--space-6); }
}

@media (max-width: 820px) {
  /* Below the modal's own comfortable width, drop the desktop-only wide
     sizing so it fits with room to spare before the mobile sheet kicks in. */
  .task-modal, .modal--wide { width: 92vw; }
  .brain-dump-modal { width: 92vw; }
}

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track can't shrink below its
     widest content, so one no-wrap row or table used to stretch the whole
     page past the screen (Completed was 706px wide on a 375px phone). The
     page is pinned to the viewport; wide content truncates or scrolls in
     its own box, as those components were already designed to. */
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  /* ---- Mobile navigation (Design Sprint 2): a five-tab bar. Today, Inbox,
     Projects and Week are direct tabs; More opens a bottom sheet
     (sidebar.js) holding Waiting, Completed, Settings, Backup and the
     account block, so every destination, Sign In included, stays reachable
     at 375px instead of spilling off-screen. The bar clears the home
     indicator via the safe-area inset. ---- */
  :root { --shell-top: var(--space-5); --shell-gutter: var(--space-4); }
  .sidebar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto;
    flex-direction: row; align-items: stretch;
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid var(--color-border);
    z-index: 50; gap: 0;
  }
  .sidebar__brand, .sidebar__nav--secondary, .sidebar > .sidebar__account,
  .sidebar .nav-item--overflow { display: none; }
  .sidebar__nav { flex: 1; flex-direction: row; gap: 2px; }
  .sidebar .nav-item {
    flex: 1 1 0; min-width: 0; min-height: var(--control-lg); flex-direction: column; justify-content: center;
    gap: 2px; padding: var(--space-1) 2px; font-size: var(--text-2xs); line-height: 16px;
  }
  .sidebar .nav-item span { font-size: var(--text-2xs); }
  .sidebar .nav-icon { width: var(--icon-md); height: var(--icon-md); }
  .sidebar .nav-item--more { display: flex; }
  /* The + button docks into the tab bar's right end (Design Sprint 3):
     the bar reserves a slot for it, so it sits beside the tabs at the
     same 48px height and never floats over page content while scrolling,
     on any page or phone width. It clears the home indicator through the
     same safe-area inset as the bar itself. */
  .sidebar { padding-right: calc(var(--space-2) + var(--fab-size) + var(--space-2)); }
  .fab {
    bottom: calc(var(--space-1) + env(safe-area-inset-bottom));
    right: var(--space-2); left: auto; z-index: 51;
  }
  /* ---- Active Task strip (mobile shell). The persistent indicator docks
     as a full-width "now playing" strip directly on top of the tab bar,
     in space the page reserves for it, so it never floats over content.
     Same element, same states and tap behaviour as desktop; only its
     placement and shape change here. It exists only while the indicator
     has something to show (#active-task-indicator-root:empty hides it),
     and the page reclaims the space when it goes. ---- */
  .view-root { padding-bottom: calc(var(--tabbar-h) + var(--space-6) + env(safe-area-inset-bottom)); }
  body:has(#active-task-indicator-root:not(:empty)) .view-root {
    padding-bottom: calc(var(--tabbar-h) + var(--active-strip-h) + var(--space-6) + env(safe-area-inset-bottom));
  }
  .active-task-indicator {
    left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    min-height: var(--active-strip-h); padding: 0 var(--space-4); gap: var(--space-2);
    border-radius: 0; border: 0; border-top: 1px solid var(--color-border);
    background: var(--color-chrome); box-shadow: none; font-size: var(--text-xs);
  }
  .active-task-indicator:hover { box-shadow: none; background: var(--color-chrome); }
  .active-task-indicator:focus-visible { box-shadow: inset 0 0 0 2px rgba(var(--color-accent-rgb), 0.55); }
  .active-task-indicator__label { color: var(--color-text-muted); flex-shrink: 0; }
  .active-task-indicator__title {
    flex: 1; min-width: 0; max-width: none;
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text);
  }
  .active-task-indicator__time { flex-shrink: 0; }
  .active-task-indicator__popover { bottom: calc(var(--tabbar-h) + var(--active-strip-h) + var(--space-2) + env(safe-area-inset-bottom)); right: var(--space-4); }
  /* Focus Mode hides the tab bar: the strip settles onto the bottom edge,
     padding itself clear of the home indicator. */
  body.is-focus-mode .view-root { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
  /* Onboarding has no tab bar to clear. */
  body.is-onboarding .view-root { padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
  body.is-focus-mode:has(#active-task-indicator-root:not(:empty)) .view-root {
    padding-bottom: calc(var(--active-strip-h) + var(--space-6) + env(safe-area-inset-bottom));
  }
  body.is-focus-mode .active-task-indicator { bottom: 0; padding-bottom: env(safe-area-inset-bottom); min-height: calc(var(--active-strip-h) + env(safe-area-inset-bottom)); }
  body.is-focus-mode .active-task-indicator__popover { bottom: calc(var(--active-strip-h) + var(--space-2) + env(safe-area-inset-bottom)); }

  /* Today: the execution surface stacks, its one action goes full width
     for the thumb. */
  .focus-surface { padding: var(--space-5); }
  .focus-surface__body { flex-direction: column; align-items: stretch; }
  .focus-surface__body > .btn { width: 100%; }
  /* Toasts sit above the tab bar (and the Active strip when it's shown),
     never on top of navigation; long confirmations wrap. */
  .toast-host { bottom: calc(var(--tabbar-h) + var(--space-3) + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 2 * var(--space-4)); }
  body:has(#active-task-indicator-root:not(:empty)) .toast-host { bottom: calc(var(--tabbar-h) + var(--active-strip-h) + var(--space-3) + env(safe-area-inset-bottom)); }
  .settings-grid { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; }
  .routine-row { grid-template-columns: 1fr; }
  .profiles-row { grid-template-columns: 1fr; }
  .completed-table { display: block; overflow-x: auto; white-space: nowrap; }

  /* ---- Modals become full-screen sheets on mobile — no floating card,
     no backdrop margin, slides up from the bottom edge instead of
     fading+scaling from center. ---- */
  .overlay {
    padding: 0; align-items: flex-end; background: rgba(15, 13, 20, 0.55);
  }
  .modal, .modal--compact, .task-modal, .modal--wide, .brain-dump-modal {
    width: 100%; max-width: 100%; max-height: 94vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: sheet-in var(--transition-base) both;
  }
  .overlay--closing .modal { animation: sheet-out var(--transition-fast) both; }
  .modal__header, .modal__footer { padding-left: var(--space-5); padding-right: var(--space-5); }
  .modal__body { padding-left: var(--space-5); padding-right: var(--space-5); }
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sheet-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(20px); }
}

@media (max-width: 560px) {
  .view-header { flex-direction: column; align-items: stretch; }
  /* Tighter button sides keep the header's actions on one row at 375px;
     wrap is the safety net on narrower phones, never a sideways scroll. */
  .view-header__actions { justify-content: flex-start; flex-wrap: wrap; }
  .view-header__actions .btn { padding-left: var(--space-3); padding-right: var(--space-3); }
  h1 { font-size: var(--text-2xl); }
  /* minmax(0, 1fr): the card column may shrink below its content's
     min-width, so one long title can never widen the whole page; the
     64px time column fits "11:00 AM" on one line and still leaves typical
     16px titles room to stay whole, and break-word is the last resort for
     a word that still doesn't fit. */
  .timeline__row { grid-template-columns: var(--space-8) var(--space-4) minmax(0, 1fr); }
  .timeline__time { white-space: nowrap; }
  .capacity-bar__breakdown { column-gap: var(--space-3); }
  .task-card__title { overflow-wrap: break-word; }
  /* Task rows on phones (Design Sprint 4): tapping the row opens its one
     action sheet, so the inline icons and More button step aside and the
     title keeps its width. The execution marker stays, a size smaller,
     at the touch minimum, and still performs the next step in one tap. */
  .task-card__secondary, .task-card__more { display: none; }
  .task-card__exec { min-height: var(--touch-min); min-width: var(--touch-min); justify-content: flex-end; gap: var(--space-1); font-size: var(--text-xs); }
  .task-card__exec-glyph svg { width: 12px; height: 12px; }
  .view--today .view-header__actions { margin-inline: calc(-1 * var(--space-3)); }
  .batch-card__list li { min-height: var(--control-lg); }
  .batch-check::after { inset: calc((var(--touch-min) - 16px) / -2); } /* 16px ring, touch-min target */
  .focus-view__timer-main { font-size: var(--text-3xl); }
  /* Week day rows stack on phones: day and status, then the bar and the
     numbers beneath. */
  .week-day__toggle {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name status" "bar numbers";
    row-gap: var(--space-2); column-gap: var(--space-3);
  }
  .week-day__name { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .project-row { flex-direction: column-reverse; gap: var(--space-1); }
  .duration-segments { gap: 4px; }
  .duration-segment { padding: 7px 10px; font-size: var(--text-xs); }
}