/* FlowFund — responsive.css
   Breakpoint overrides + safe area handling. */

/* Default mobile-first base sizes */
@media (max-width: 479px) {
  .ff-display { font-size: 1.75rem; }
  .ff-h1 { font-size: 1.375rem; }
  .ff-card { padding: var(--space-4); }
}

/* Small */
@media (min-width: 480px) {
  .ff-app__main { padding: var(--space-5); padding-bottom: calc(var(--nav-mobile-height) + var(--space-6) + env(safe-area-inset-bottom)); }
}

/* Tablet */
@media (min-width: 768px) {
  .ff-onboard__headline { font-size: 2.5rem; }
  .ff-modal__panel { padding: var(--space-8); }
  .ff-app__main { padding: var(--space-6); padding-bottom: calc(var(--nav-mobile-height) + var(--space-6) + env(safe-area-inset-bottom)); }
}

/* Desktop */
@media (min-width: 1024px) {
  .ff-fab { display: none; }
  .ff-fab-speed { display: none !important; }
  .ff-app__main { padding: var(--space-8); padding-bottom: var(--space-8); }
  .ff-header { padding: var(--space-5) var(--space-8); top: 0; }
  .ff-display { font-size: 2.25rem; }
}

/* Wide */
@media (min-width: 1280px) {
  .ff-app__main { padding: var(--space-10) var(--space-8); }
}

/* Print: just the page's content, in plain document flow — no app chrome,
   pop-ups, toasts or banners, and no fixed-height shell making blank pages. */
@media print {
  .ff-nav-mobile, .ff-sidebar, .ff-fab, .ff-fab-speed, .ff-header__actions,
  #modal-root, #toast-root, #update-banner, .ff-install-banner, .ff-skip-link,
  .ff-confetti, .ff-mm-bar, .ff-btn, .ff-icon-btn, input[type="range"] { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { padding-top: 0 !important; }
  .ff-app { display: block !important; min-height: 0 !important; }
  .ff-app__main { padding: 0 !important; overflow: visible !important; }
  .ff-header { position: static !important; padding: 0 0 12px !important; box-shadow: none !important; }
  .ff-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; page-break-inside: avoid; }
  .ff-grid-widgets { display: block !important; }
  .ff-grid-widgets > * { margin-bottom: 12px; }
  .ff-anim-card, .ff-anim-pulse { animation: none !important; opacity: 1 !important; transform: none !important; }
  [style*="overflow-x: auto"], .ff-hscroll { overflow: visible !important; flex-wrap: wrap !important; }
  a { color: #000 !important; text-decoration: underline; }
  /* Paper is white, so print with dark text whatever the theme. The Dark
     theme's pale text would otherwise print almost invisible. */
  html, html[data-theme] { --bg: #fff; --surface: #fff; --color-shadow: transparent; }
  /* The light themes already print dark text; Dark borrows light values */
  html[data-theme="dark"] {
    color-scheme: light;
    --surface-alt: #f4f4f4; --border: #ccc; --divider: #ddd; --border-accent: #bbb;
    --text: #000; --heading: #000; --text-muted: #444; --link: #3E5A44;
    --accent-1-deep: #6b3a35; --accent-2-deep: #3E5A44; --nav-text: #000; --nav-active-text: #000;
    --success-bg: #E4ECE4; --success-text: #3E5A44; --warning-bg: #F6E6D3; --warning-text: #7A5226;
    --danger-bg: #F6DCDD; --danger-text: #8E3E48; --info-bg: #F6E4E1; --info-text: #6E3E45;
    --chip-1-bg: #F6E4E1; --chip-1-text: #7A424A; --chip-2-bg: #E4ECE4; --chip-2-text: #3E5A44;
    --chip-3-bg: #F3ECE8; --chip-3-text: #6A5552; --chip-4-bg: #F2E6DA; --chip-4-text: #7A5634;
    --progress-track: #eee; --chart-track: #eee; --callout-bg: #f4f4f4; --callout-border: #ccc;
  }
  /* Keep coloured badges and progress bars (phones skip backgrounds by default) */
  .ff-pill, .ff-status, .ff-badge, .ff-progress, .ff-progress__fill {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  @page { margin: 14mm; }
}