/* ==========================================================================
   Screens from the smallest phones (240px) to 4K televisions.
   Loaded last on every page, so it can correct the layouts above it.
   ========================================================================== */

/* Large screens and TVs: the whole page grows so text and buttons stay readable from a distance.
   Chrome's zoom also scales vh, so full-height layouts divide by --cvx-zoom. */
:root { --cvx-zoom: 1; }
@media (min-width: 2200px) { :root { --cvx-zoom: 1.35; } html { zoom: 1.35; } }
@media (min-width: 2800px) { :root { --cvx-zoom: 1.7; } html { zoom: 1.7; } }
@media (min-width: 3400px) { :root { --cvx-zoom: 2; } html { zoom: 2; } }

/* Nothing may push the page sideways. */
img, video, iframe { max-width: 100%; }
h1, h2, h3, h4, p, li, dt, dd, label, td, th, small, strong, summary, figcaption { overflow-wrap: break-word; }
code, kbd, .mono { overflow-wrap: anywhere; }

/* Long words (ids, event names, addresses) break instead of widening their column. */
.steps-list li, .adm-events li { overflow-wrap: anywhere; }
.steps-list li > *, .list-layout > *, .sticky-col > * { min-width: 0; }

/* Single-column grids: an item may be as narrow as the screen, never wider. */
@media (max-width: 760px) {
  .auth-shell { grid-template-columns: minmax(0, 1fr); }
  .card, .stack > *, .split-form > *, .fe-main > *, .list-layout > *, .ov-grid > *, .install-grid > * { min-width: 0; }
  .steps-list li > *, .rows li > *, .checklist li > * { min-width: 0; }
  .steps-list li, .adm-events li { overflow-wrap: anywhere; }
  .legal-layout, .reply-grid, .widget-studio { grid-template-columns: minmax(0, 1fr) !important; }
  .list-layout { grid-template-columns: minmax(0, 1fr); }
  .post-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
  .reply-card, .fe-step, .fe-step-body > *, .ap, .ap-line > * { min-width: 0; }
  select { max-width: 100%; min-width: 0; }
  .switch-row > span { min-width: 0; }
  .switch-row .switch { flex: none; }
}

/* Small phones (iPhone SE, Galaxy Fold folded, Nokia and KaiOS-class screens: 240 to 360px). */
@media (max-width: 360px) {
  .wrap { width: calc(100% - 28px); }
  .app-inner { padding-left: 14px; padding-right: 14px; }
  .auth-pane { padding-left: 14px; padding-right: 14px; }
  .card { padding-left: 14px; padding-right: 14px; }

  /* Public header and menu */
  .bar { gap: 8px; }
  .brand img { height: 32px; }
  .topnav { padding-left: 16px !important; padding-right: 16px !important; }
  .topnav > a { font-size: 22px !important; white-space: normal; }

  /* Rows of buttons wrap instead of running off the edge. */
  .checklist li, .rows li, .card-head, .form-foot, .save-bar, .sp-row, .sp-actions, .ph, .ph > div, .pay-row, .copy-line, .fe-steps-head { flex-wrap: wrap; }
  .checklist li > .btn, .rows li > .btn, .rows li > form { margin-left: auto; }
  .btn { white-space: normal; text-align: center; height: auto; min-height: var(--h, 40px); }
  .sp-row { grid-template-columns: auto minmax(0, 1fr); }
  .sp-state, .sp-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .storage-now { grid-template-columns: 1fr; }
  .grid-2, .name-row { grid-template-columns: minmax(0, 1fr); }
  .field-label { overflow-wrap: anywhere; }
  .lang-pop { min-width: 0 !important; max-width: calc(100vw - 32px); }
  .lang-select { min-width: 0; flex-basis: 100%; }
  .hours-week li { flex-wrap: wrap; }
  .hours-times { flex-wrap: wrap; }
  .hours-times input { min-width: 0; flex: 1 1 80px; }
  .ap-line { flex-wrap: wrap; }
  .pv-toolbar { flex-wrap: wrap; gap: 8px; }
  .crypto-modal { padding: 14px; width: calc(100vw - 16px); }
  .crypto-total { flex-wrap: wrap; gap: 4px 12px; }
  .crypto-total strong { font-size: 18px; }

  /* Desk header: keep the AI switch, alerts and the avatar; the rest is in the avatar menu. */
  .dk-top { gap: 6px; padding: 0 8px; }
  .dk-top .theme-toggle, .dk-ai .status { display: none; }
  .dk-ai-toggle { padding: 4px 6px 4px 8px; gap: 6px; }
}

@media (max-width: 280px) {
  .brand img { height: 26px; }
  h1 { font-size: 26px !important; }
  .ph h1 { font-size: 24px !important; }
}