/* ===================================================================
   ephemera -- responsive overrides for narrow viewports.
   Cross-cutting: hits .card, the chrome pills, the tracked panel,
   and the zoom-overlay close button. MUST load LAST so its overrides
   beat the corresponding base/component/chrome rules. The 720px
   breakpoint that flips desktop chrome -> hamburger drawer lives in
   chrome.css alongside the surfaces it controls; this file owns the
   480px and 360px breakpoints (phone-style typography + card layout +
   tracked-row stacking). Companion files: base.css, forms.css,
   components.css, chrome.css.
   =================================================================== */

/* ===================================================================
   Responsive

   Strategy: the page is a single centered card above a generous top
   padding that keeps the wordmark clear of the two fixed corner pills
   (theme toggle + user pill). On narrow screens we full-bleed the card
   (no side border, no radius) to buy horizontal room for form fields,
   compact the pills, and let the tracked-row internals wrap onto a
   second line instead of squishing.
   =================================================================== */

@media (max-width: 480px) {
  /* Body padding: longhand inline + bottom only. We deliberately do
     NOT set padding-top here -- chrome.css's `@media (max-width: 720px)`
     block already sets a safe-area-aware top:
       padding-top: calc(3.25rem + max(0.5rem, env(safe-area-inset-top)))
     and we always want that value at <=480px (every <=480px viewport also
     matches <=720px). Pre-split, the original style.css used a `padding`
     shorthand here AND was source-ordered before the 720px block, so the
     720px block won for padding-top regardless. After the split,
     responsive.css loads AFTER chrome.css, so a shorthand here would
     clobber the safe-area calc and slide content under the notch /
     dynamic island on phones with viewport-fit=cover. Longhand keeps
     the chrome.css top intact. */
  body {
    padding-inline: 0;
    padding-bottom: var(--space-5);
  }

  .card {
    border-radius: 0;
    border-inline: none;
    padding: var(--space-5) var(--space-4);
  }

  .wordmark {
    font-size: 0.85rem;
    /* Off-scale: super-tight gap; wordmark + version pair as one brand
       block on narrow screens. */
    margin-bottom: 0.2rem;
  }
  .app-version {
    font-size: 0.6rem;
    margin-bottom: var(--space-4);
  }

  /* NOTE: pre-split, this block also held overrides for .top-chrome,
     .top-chrome-right, .theme-toggle, .lang-picker, .user-btn, and
     #user-name. They were dead code: every <=480px viewport also
     matches <=720px, where chrome.css sets `.top-chrome { display:
     none }` and `.user-btn { display: none }` -- which means none of
     those elements (or their children, like #user-name) are rendered
     at this breakpoint. Removed in the tokenization sweep. The mobile
     hamburger drawer lives at <=720px in chrome.css and owns its own
     responsive geometry. */

  /* Stack the tracked row: label + time take the full width, then the
     status pill + cancel + remove buttons sit on their own line. */
  .tracked-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .tracked-right {
    justify-content: flex-end;
  }

  #tracked-section.open .tracked-panel-body {
    max-height: 28rem;
  }

  button.copy-btn {
    width: 100%;
  }

  /* The fullscreen zoom overlay's close pill needs to clear the notch /
     dynamic island on phones with viewport-fit=cover. */
  .zoom-close {
    top: max(var(--space-4), env(safe-area-inset-top));
  }
}

@media (max-width: 360px) {
  /* Tighten the wordmark a hair below 360px so it stays clear of the
     hamburger button on phones (chrome.css's <=720px block hides
     .top-chrome / .user-btn entirely below that breakpoint, so
     #user-name is not rendered here -- pre-split rules for it have
     been removed alongside the .user-btn ones above). */
  .wordmark {
    font-size: 0.8rem;
  }
}