/* ============================================================================
   Responsive — the narrow-panel and reduced-motion adjustments.
   ----------------------------------------------------------------------------
   The last sheet loaded, so these overrides win without raising specificity.
   ========================================================================= */

/* At 320 the panel keeps every control; only the softest metadata gives way. */
@media (max-width: 359px) {
  .pomy-topbar { gap: 6px; padding: 0 8px 0 10px; }
  .pomy-segmented--compact .pomy-segment { padding: 0 9px; }
  .pomy-gate, .pomy-setup { padding: 0 16px; }
  .pomy-meta-key { flex: 0 0 72px; }
  .pomy-setup-title { font-size: 21px; }
  .pomy-gate-title { font-size: 19px; }
  .pomy-today-open { padding-right: 2px; }
  .pomy-row-menu { margin: 0 4px 0 2px; }
}

/* The lockup is the first thing to go, never a control. */
@media (max-width: 337px) {
  /* Width stays auto so the mark keeps its own proportions: it is taller than
     it is wide, and forcing it square stretched it. */
  .pomy-lockup { content: url("../assets/design/pomy-mark.svg"); }
  [data-pomy-mode="dark"] .pomy-lockup { content: url("../assets/design/pomy-mark-reversed.svg"); }
}

@media (prefers-reduced-motion: reduce) {
  .pomy-sheet, .pomy-dialog, .pomy-toast, .pomy-scrim,
  .pomy-notice, .pomy-today-empty, .pomy-action-bar { animation: none; }
  .pomy-skeleton-row, .pomy-gate-wait .pomy-skeleton-bar { animation: none; opacity: .75; }
  .pomy-icon-btn[data-busy="true"] svg { animation: none; opacity: .6; }
}