/* Phone presentation, shared by the internal pages. Screen-only in base.html.
   Wide ledgers keep all columns and totals; no data or action is hidden to fit. */
@media screen and (min-width:681px){
  /* A cut-off row moves with the wheel (phone.js) or a sideways swipe; no visible bar (owner 2026-10-26). */
  .tabs{overflow-x:auto;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs .tab{flex:none}
}
@media screen and (max-width:900px){
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rgrid>*{min-width:0}
  .rgrid input,.rgrid select{min-width:0;width:100%}
  .sform .grp{white-space:normal}
  table.cktab{display:block;max-width:100%;overflow-x:auto}
  main pre{max-width:100%;overflow-x:auto}
  .redform{width:100%;gap:12px;text-align:left}
  .redform label{flex:1 1 130px;min-width:0;gap:5px}
  .redform label input{width:100%;min-width:0}
  .redform .grp{white-space:normal;text-align:left;flex-basis:100%}
}
@media screen and (max-width:680px){
  :root{--phone-nav-height:calc(64px + env(safe-area-inset-bottom));--tabclear:var(--phone-nav-height)}
  .wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
  main{padding-top:20px;padding-bottom:calc(var(--phone-nav-height) + 24px)}
  main>.wrap{min-width:0}
  main h1{font-size:20px;line-height:1.3;letter-spacing:0;overflow-wrap:anywhere}
  main .lede{line-height:1.55;margin-bottom:18px}

  /* Brand and actions occupy their own rows, even with the installed-app reload. */
  header .bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;
    padding:9px 0 5px;min-height:0;height:auto}
  header .brand{grid-column:1/-1;grid-row:1;justify-content:center;min-width:0}
  header .brand .name{font-size:12px;line-height:20px;letter-spacing:.18em}
  header .topleft,header .topright{position:static;grid-row:2;gap:4px;min-width:0}
  header .topleft{grid-column:1}
  header .topright{grid-column:2;justify-content:flex-end}
  header .topleft .bell,header .topright .bell,header #todobtn{width:42px;height:42px;flex:none}
  header .acctmenu>summary{min-height:42px;min-width:48px;justify-content:center;padding:5px 7px}
  header .acctpop{width:min(300px,calc(100vw - 28px));min-width:0;
    max-height:calc(100dvh - 158px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;padding:7px;border-radius:14px}
  header .acctpop a{min-height:42px;display:flex;align-items:center;padding:10px 12px}
  header .acctpop .acct-coins{display:flex}
  header .acctwho{overflow-wrap:anywhere}
  .subtabs{scroll-padding-inline:14px}
  .subtabs a{flex:none;min-height:44px;display:inline-flex;align-items:center;padding:11px 13px}
  #todonag{flex-wrap:wrap;gap:7px;padding:10px 14px}
  #todonag>span{flex:1 1 220px;min-width:0}
  #todonag button,#pushnag button{min-height:40px}
  #todopanel{max-height:calc(100dvh - 180px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}

  /* Before JS enhances the bar, every section remains readable and scrollable. */
  .tabbar{gap:2px;padding:5px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left));
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .tabbar::-webkit-scrollbar{display:none}
  .tabbar .tab{flex:1 0 82px;min-height:58px;justify-content:center;gap:4px;
    padding:6px 2px 7px;border:0;border-radius:10px;background:transparent;color:var(--muted);
    font-family:inherit;font-size:11px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none}
  .tabbar .tab span{white-space:normal;overflow:visible;text-overflow:clip;padding:0;max-width:100%}
  .tabbar .tab .ti{width:21px;height:21px;flex:none}
  .tabbar .tab.active{background:var(--accent-dim);color:var(--accent)}
  .tabbar .tab[hidden]{display:none}
  .tabbar.phone-nav-ready{overflow:visible}
  .tabbar.phone-nav-ready .tab{flex:1 1 0;min-width:0}
  .tabbar.phone-nav-ready .tab.phone-nav-long{flex-grow:1.25}
  .tabbar .tabdot{width:7px;height:7px;top:5px;right:calc(50% - 18px)}

  #phone-pages{position:fixed;inset:auto 0 0;width:100%;max-width:100%;
    max-height:calc(100dvh - 28px - env(safe-area-inset-top));margin:0;padding:18px 16px max(20px,env(safe-area-inset-bottom));
    border:1px solid var(--line);border-bottom:0;border-radius:22px 22px 0 0;
    background:var(--surface);color:var(--ink);box-shadow:0 -12px 48px rgba(21,50,76,.18);overflow-y:auto;overscroll-behavior:contain}
  #phone-pages:not([open]){display:none}
  #phone-pages::backdrop{background:rgba(21,50,76,.38)}
  .phone-pages-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
  .phone-pages-head h2{font-size:20px;letter-spacing:0;margin:0;font-weight:650}
  .phone-pages-close{min-height:42px;min-width:64px;background:var(--bg2);border:1px solid var(--line);color:var(--ink);font-size:13px}
  .phone-pages-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .phone-pages-grid .tab{position:relative;display:flex;align-items:center;gap:10px;min-height:60px;
    padding:12px;border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:13px;font-weight:600;overflow-wrap:anywhere}
  .phone-pages-grid .tab.active{background:var(--accent-dim);border-color:var(--accent-line);color:var(--accent)}
  .phone-pages-grid .ti{width:21px;height:21px;flex:none}
  html.phone-pages-open{overflow:hidden}

  /* Text fields should not trigger Safari's focus zoom. Fixed-width spreadsheet
     cells may scroll with their ledger; their values are never clipped to fit. */
  main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=color]),
  main select,main textarea{font-size:16px!important;max-width:100%;min-height:40px}
  main button,main input[type=submit],main input[type=button]{min-height:40px;min-width:40px}
  main summary{min-height:40px;align-content:center}
  main :is(.btn,.ubtn,.chip,.read,.mback,.csback,.fsback,.pgback){min-height:40px;align-content:center}
  main :is(.field,.meta,.sechead,.booklabel){min-width:0}
  main :is(.sechead,.booklabel){flex-wrap:wrap}
  main .act{flex-wrap:wrap;gap:8px}
  main :is(pre,textarea){max-width:100%}
  main pre{overflow-x:auto}
  main :is(.note,.empty,.err,.lede){overflow-wrap:anywhere}
  .cfgrow{padding:16px;align-items:flex-start}
  .cfgrow .meta{flex-basis:100%}
  .cfgrow .field{flex:1 1 120px}
  .cfgrow .sw{min-height:40px}
  .bkgrid{grid-template-columns:minmax(0,1fr)}
  .rgrid{grid-template-columns:minmax(0,1fr)}
  .rgrid>*{min-width:0}
  .rgrid .rf.wide{grid-column:auto}
  .paddf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:12px;padding:14px}
  .paddf label{min-width:0;gap:5px;font-size:11px;color:var(--muted)}
  .paddf input,.paddf input.num{width:100%;min-width:0}
  .paddf label:has(input[type=date]){grid-column:1/-1}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform{gap:12px;padding:14px}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform>label{flex:1 1 140px;min-width:0;gap:5px;font-size:11px;color:var(--muted)}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform>label>input:not([type=checkbox]):not([type=radio]):not([type=file]){width:100%!important;min-width:0}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform>label:has(>input:is([type=date],[name=descr],[name=note])),
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform>label:has(>span>input){flex-basis:100%}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform>label>span:has(>input){display:flex;gap:8px;align-items:center}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform>label>span>input{flex:1 1 0;min-width:0;width:0!important}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform .grp{white-space:normal;font-size:11px;color:var(--muted)}
  :is([data-page=pmt_stmt_view],[data-page=bgf_stmt_view],[data-page=bgf_page]) .sform .sfine{flex-wrap:wrap}
  .tform .tf{flex:1 1 140px;min-width:0;max-width:100%}
  .tform .tf input:not([type=checkbox]):not([type=radio]),.tform .tf select{width:100%;min-width:0}
  .tform .tf:has(input:is([type=date],[name=reason])){flex-basis:100%}
  .afilters>label{flex:1 1 140px;min-width:0;max-width:100%;gap:5px}
  .afilters>label input,.afilters>label select{width:100%;min-width:0}
  .labnav{flex-wrap:wrap;max-width:100%}
  .labnav .daysel{min-width:0;max-width:100%;width:100%;flex-basis:100%}
  .cl-row{grid-template-columns:minmax(0,1fr) 110px}
  .cl-row input{min-width:0}
  .dbar-tools{flex-wrap:wrap;min-width:0}
  .dbar-tools .dfilter{flex-basis:100%;width:100%;min-width:0}
  .dbar .mtabs{flex-wrap:wrap;max-width:100%;min-width:0;flex-shrink:1}
  .dbar .mtab{flex:1 1 100px;justify-content:center}
  .sfile,.tfile{min-width:0;max-width:100%}
  .sfile input[type=file],.tfile input[type=file]{display:block;width:100%;min-width:0;margin-top:6px}
  .scard .smeta{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .scard .ssubj{flex-wrap:wrap;overflow-wrap:anywhere}
  .lmpop{max-width:calc(100vw - 16px)}
  .lmpal{flex-wrap:wrap}
  .permgrid{grid-template-columns:minmax(0,1fr);gap:0;padding:4px 12px}
  .permgrid .prow{display:grid;gap:5px;padding:12px 0;border-bottom:1px solid var(--line)}
  .permgrid .prow:last-child{border-bottom:0}
  .permgrid .popts{justify-self:start;flex-wrap:wrap;gap:6px 14px}
  .permgrid .popt{min-height:40px;font-size:13px}
  .permgrid .plabel{font-size:13px;font-weight:600}
  .aicard table.phone-cards td{display:block;text-align:left}
  .aicard table.phone-cards td::before{display:block;max-width:none;margin-bottom:6px}
  .aicard table.phone-cards td>form{display:flex!important;align-items:center;flex-wrap:wrap;gap:8px;margin:6px 0;max-width:100%}
  .aicard table.phone-cards td select{min-width:0;max-width:100%}
  .aicard table.phone-cards td>form select{flex:1 1 140px}
  .aicard table.phone-cards td>label{display:flex;align-items:center;gap:8px;min-height:40px}
  .rtab td.nm{display:block;text-align:left}
  .rtab td.nm::before{display:block;margin-bottom:6px}
  .rtab td.nm .rsub{display:block;margin-top:4px;white-space:normal}
  .sform>label.check{flex-basis:100%;min-height:40px}
  .adbody,.dbody,.adhd{overflow-wrap:anywhere}
  :is(.adbody,.dbody) table.phone-cards td{display:block;text-align:left}
  :is(.adbody,.dbody) table.phone-cards td::before{display:block;max-width:none;margin-bottom:5px}
  :is(.adbody,.dbody) :is(h1,h2,h3,h4,h5,h6){scroll-margin-top:calc(138px + env(safe-area-inset-top))}

  /* Simple tables inherit labels from their actual headings. Existing bespoke
     mobile tables (e.g. London fix) and explicitly wide tables are excluded. */
  table.phone-cards{min-width:0}
  table.phone-cards .phone-heading{display:none}
  table.phone-cards td{min-width:0;white-space:normal;gap:12px;padding:10px 12px;overflow-wrap:anywhere}
  table.phone-cards td::before{color:var(--muted);font-size:11px;white-space:normal;flex:0 0 auto;max-width:42%;letter-spacing:.03em}
  table.phone-cards td:not([data-label])::before,table.phone-cards td[data-label=""]::before{display:none}
  table.phone-cards td>*{min-width:0;max-width:100%}
  table.phone-cards tr[hidden],table.phone-cards td[hidden]{display:none}
  table.rtab tr[hidden],table.rtab td[hidden]{display:none}

  /* These ledgers already have scroll wrappers but some missed the noflip
     class. Restore the entire table, including aligned footer totals. */
  table.noflip tfoot{display:table-footer-group;width:auto}
  table.noflip [hidden]{display:none}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist){display:table}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist) thead{display:table-header-group}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist) tbody{display:table-row-group}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist) tfoot{display:table-footer-group;width:auto}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist) tr{display:table-row;border:0;border-radius:0;margin:0;padding:0}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist) td{display:table-cell;width:auto;border-bottom:1px solid var(--bg2)}
  table:is(.dl:not(.dlx),.dllist) td{text-align:left}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist) td::before{content:none}
  table:is(.fstab,.adjt,.odt,.mdt,.stab,.dl:not(.dlx),.dllist) [hidden]{display:none}
  .phone-scroll{max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .phone-scroll:focus-visible{outline-offset:2px}
  .phone-scroll-hint:not([hidden]){display:block;margin:6px 2px 10px;color:var(--muted);font-size:11px;line-height:1.4}

  #mt-audiobar{bottom:var(--phone-nav-height)}
  #livepill,.ldtoast,.mtftoast{bottom:calc(var(--phone-nav-height) + 14px)}
}
@media screen and (prefers-reduced-motion:reduce){
  .phone-pages-grid .tab,.tabbar .tab{transition:none}
}