/* juribooks-mobile-v1.css  (2026-11-07)  Phone layout fixes. Presentation only; desktop is untouched
   (every rule sits under a max-width or coarse-pointer query). Loaded last so it wins over page styles.
   Found by measuring each screen at 375px: chart cards wider than the screen (Home, Metrics), the journal
   totals row as a fixed ~1000px grid, the Budget table sliding its whole panel, the ledger actions cut off,
   12px inputs that make iOS zoom on every tap, and pop-ups smaller than the phone. */

@media (max-width: 640px) {
  /* chart cards (Home, Metrics): one column that fits the screen */
  .cs-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cs-card { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }
  .cs-card svg, .cs-card canvas { max-width: 100% !important; height: auto; }

  /* journal: totals stack at the right instead of a ~1000px fixed grid */
  .sw-totrow { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: 6px 16px; }
  .sw-totrow > span:empty { display: none; }
  .sw-foot { overflow-x: auto; }

  /* action toolbars wrap onto a second line instead of running off the edge */
  .jb-ledger-actions { flex-wrap: wrap !important; overflow-x: visible !important; }

  /* Budget: the table scrolls on its own; controls and totals stay put */
  #bpWrap .bp-tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #bpWrap .bp-prep thead th, #bpWrap .bp-prep tfoot td { position: static; }
  #bpWrap .bp-ctl-row, #bpWrap .bp-ctl-g { gap: 10px 12px; }
  #bpWrap .bp-f .inp { min-width: 0; width: 100%; }
  #bpWrap .bp-f { flex: 1 1 140px; }
  #bpWrap .bp-search, #bpWrap .bp-search .inp { width: 100%; }
  #bpWrap .bp-sum > div { flex-basis: 50%; padding: 10px 14px; }
  #bpWrap .bp-steps { display: flex; width: 100%; box-sizing: border-box; }
  #bpWrap .bp-step { flex: 1 1 0; justify-content: center; padding: 8px 6px; }

  /* pop-ups (entry details, Find in postings, opening balances): the whole screen */
  #drillWrap { padding: 0 !important; }
  #drillBox { width: 100% !important; max-height: 100dvh !important; height: 100dvh !important; border-radius: 0 !important; }
  .obe-tbl .inp { width: 120px; }
  .obe-head, .obe-tools, .obe-foot { padding-left: 14px; padding-right: 14px; }
  .obe-foot .btn.primary { width: 100%; }

}

/* touch screens: fields large enough to tap, and 16px text so iOS does not zoom the page on every tap */
@media (pointer: coarse) and (max-width: 900px) {
  /* outranks the firm text-settings size on purpose: below 16px iOS zooms the page on every tap */
  html:not(#jbm-a):not(#jbm-b):not(#jbm-c):not(#jbm-d):not(#jbm-e):not(#jbm-f):not(#jbm-g):not(#jbm-h) body input:not([type=checkbox]):not([type=radio]), html:not(#jbm-a):not(#jbm-b):not(#jbm-c):not(#jbm-d):not(#jbm-e):not(#jbm-f):not(#jbm-g):not(#jbm-h) body select, html:not(#jbm-a):not(#jbm-b):not(#jbm-c):not(#jbm-d):not(#jbm-e):not(#jbm-f):not(#jbm-g):not(#jbm-h) body textarea { font-size: 16px !important; min-height: 44px; }
  .btn, button.btn { min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
}

/* notched phones: keep content clear of the rounded corners and home bar */
@supports (padding: max(0px)) {
  @media (max-width: 640px) {
    body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  }
}