/* ===========================================================================
   08-PAGES / APP ROUTINES  (Routines ledger — P5.3j)
   Page-scoped glue for the routines surface. Rows/badges/buttons come from
   components; this is the page chrome (the warm intro) plus the ONE thing the
   component can't know about — the 8-cell routine row is the most mobile-hostile
   layout in the app, crushing to ~40px slivers on a phone. Below the phone
   breakpoint each row becomes a self-contained card (full-width, wrapping cells)
   so the ledger is legible on a 390px viewport.

   Everything is scoped under .app-routines* / #routines-list so the alphabetical
   :app glob is safe. Semantic tokens only — calm on both themes, no rgba(0,0,0,*),
   no inline style (strict CSP). Media query uses a literal of --bp-sm (custom
   props can't ride a media query), matching the rest of the overhaul.
   =========================================================================== */

.app-routines__intro {
  margin: 0;
  font-family: var(--font-data);
  font-size: var(--fs-2xs);
}

/* ── Mobile: collapse the 8-cell row into a readable card (≤ --bp-sm / 480px). ── */
@media (max-width: 30rem) {
  #routines-list .c-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  #routines-list .c-table__row {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* The card owns the separation — drop the engraved groove divider. */
    box-shadow: none;
  }

  /* Cells go full width and stack instead of crushing to slivers. */
  #routines-list .c-table__cell {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* The Pause control stays a comfortable ≥44px touch target. */
  #routines-list .c-button {
    width: 100%;
    min-height: var(--space-touch, 44px);
  }
}