/* Books on the phone (web/books-phone.js, docs/ANDROID.md "Books on the phone"). Loaded last, after books.css, books-invoices.css and books-reports.css.
   Everything that changes a layout is behind the phone query (390 px, and 360 to 412 px, in a browser and in the Android WebView); the few rules outside it only hide phone-only pieces on a wide screen.
   Rules: 44 px tap targets, whole rows are the click target, a status is a word, nothing cut off, nothing popping out of its box, no sideways page scroll. */

/* phone-only pieces stay out of a wide screen */
.bk-fbtn,.bk-stot,.bk-lsum{display:none}
.bkf-body{display:grid;gap:12px;margin:10px 0 2px}
.bkf-row{display:grid;gap:4px}
.bkf-row .lbl{font:600 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.bkf-row .ssel,.bkf-row .sel,.bkf-row select{width:100%;max-width:none}
.bkf-row .seg{max-width:100%;overflow-x:auto}
.bkf-row input.sel{width:100%!important;max-width:none}

@media (max-width:719px){
  /* ----- page head: the title, then the actions at full width ----- */
  .bk>.ph{flex-wrap:wrap;align-items:flex-start}
  .bk>.ph>div:first-child{flex:1 1 100%;min-width:0}
  .bk>.ph .sp{display:none}
  .bk>.ph>.btn{flex:1 1 auto}
  .bk>.ph h1{overflow-wrap:anywhere}
  .bk>.ph p{margin:4px 0 0}
  .bk-who{min-width:0}
  .bk-who h1{min-width:0}

  /* ----- tap targets ----- */
  .bk .btn.sm,.bk .seg button,.bk .tabs button,.bk-menu button,.bk-xx,.bk-adv summary{min-height:44px}
  .bk-x{width:44px;height:44px}
  .bk-xx{min-width:36px}
  .bk-chipx{min-height:44px}
  .bk .seg .m{margin-left:4px}
  .bk-search{min-height:44px;min-width:0;flex:1 1 170px;max-width:none}
  .bk-search input{height:44px;min-height:44px}
  .bk-search{min-height:44px;box-sizing:border-box}
  .bk .sel,.bk .ssel>.ssel-btn,.bk .ssel .sel,.bk select.sel{min-height:44px}
  .bk .chk,.bk-drawer .chk{min-height:44px;align-items:center}
  .bk-drawer .chk>span,.bk .chk>span{min-width:0;flex:1;overflow-wrap:anywhere}
  .bk-rl{min-height:48px}
  .bk-sub a,.bk-sec a:not(.btn),.bk-banner a,.rp-note a,table.bk-t td a:not(.btn):not(.clink){display:inline-block;padding:14px 0;overflow-wrap:anywhere}
  .bk-fld .hint{display:block}
  .bk-fld{align-content:start}

  /* ----- toolbar: search on its own line, segments scroll, the rest lives in one Filters sheet ----- */
  .bk-bar{gap:8px}
  .bk-bar>.sp+.btn.pri{flex:1 1 100%}
  .bk-bar>.sp{display:none}
  .bk-fmoved{display:none!important}
  .bk-fbtn{display:inline-flex;gap:8px;flex:0 0 auto;min-height:44px}
  .bk-fbtn .bk-fs{flex:1;min-width:0;color:var(--ink2);font-weight:400;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bk-fbtn:has(.bk-fs){justify-content:flex-start}
  .bk-search~.bk-fbtn{flex:0 1 auto;max-width:55%}
  .bk-fbtn .bk-fn{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:10px;background:var(--acc);color:var(--accInk);font:600 11px var(--mono);padding:0 5px}
  .bk .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .bk .seg::-webkit-scrollbar,.bk-drawer .seg::-webkit-scrollbar,.bkf-row .seg::-webkit-scrollbar{display:none}
  .bk-drawer .seg,.bkf-row .seg{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .bk-drawer .seg button,.bkf-row .seg button{flex:0 0 auto;white-space:nowrap;min-height:44px}
  .bk-sec>.sh{flex-wrap:wrap}
  .bk-sec>.sh .seg{flex:1 1 100%}
  .bk .seg button{flex:0 0 auto;white-space:nowrap}
  .bk-bar>.seg{flex:1 1 100%}
  .rp-bar>.ssel,.rp-bar>.btn{flex:1 1 100%;width:100%}
  .bk .bk-bar .sel.sm{flex:1 1 140px;width:auto!important}

  /* ----- tabs: one line, scroll sideways, a fade shows there is more ----- */
  .bk .tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .bk .tabs::-webkit-scrollbar{display:none}
  .bk .tabs button{flex:0 0 auto;scroll-snap-align:center;padding:8px 14px}
  .bk .tabs.sc-r,.bk .seg.sc-r,.bkf-row .seg.sc-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .bk .tabs.sc-l,.bk .seg.sc-l{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent)}
  .bk .tabs.sc-l.sc-r,.bk .seg.sc-l.sc-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}

  /* ----- stat strip: two across ----- */
  .bk-stats{grid-template-columns:1fr 1fr}
  .bk-stats>div{border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);padding:10px 12px}
  .bk-stats>div:nth-child(2n){border-right:0}
  .bk-stats>div:last-child,.bk-stats>div:nth-last-child(2):nth-child(odd){border-bottom:0}
  .bk-stats>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
  .bk-stats .n{font-size:18px}
  .bk-stats .click{min-height:44px}

  /* ----- tables become cards: title and amount first, then customer and status word, then the details ----- */
  .bk .tw{border:0;background:none;overflow:visible}
  table.bk-t,table.bk-t tbody{display:block;width:100%}
  table.bk-t thead{display:none}
  table.bk-t tbody tr,table.bk-t tr.bk-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:12px 14px;margin:0 0 8px;border:1px solid var(--bd);border-radius:var(--r);background:var(--sf);min-height:56px;position:relative}
  table.bk-t tr[data-bk-act]{cursor:pointer}
  table.bk-t tr[data-bk-act]:active{background:var(--sf2)}
  table.bk-t td{display:block;padding:0;border:0;height:auto;white-space:normal;background:none!important;min-width:0;overflow-wrap:anywhere;text-align:left}
  table.bk-t td:empty{display:none}
  table.bk-t td[data-ph=t]{order:1;flex:1 1 0;min-width:40%;font-weight:600;font-size:15px;line-height:1.3}
  table.bk-t td[data-ph=a]{order:2;flex:0 0 auto;margin-left:auto;text-align:right;font:600 15px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
  table.bk-t td[data-ph=t2]{order:3;flex:1 1 55%;min-width:0;color:var(--ink2)}
  table.bk-t td[data-ph=s]{order:4;flex:0 0 auto;margin-left:auto;text-align:right}
  table.bk-t tbody tr::after{content:"";flex:1 0 100%;order:4;height:0} /* the details start on their own line */
  table.bk-t td[data-ph=m]{order:5;flex:1 1 calc(50% - 8px);display:flex;flex-direction:column;align-items:flex-start;gap:1px;font-size:13px;color:var(--ink);padding-top:6px;border-top:1px dashed var(--bd)}
  table.bk-t td[data-ph=f]{order:6;flex:1 1 100%;display:flex;flex-direction:column;gap:1px;font-size:13px;padding-top:6px;border-top:1px dashed var(--bd)}
  table.bk-t td[data-ph=m].n{font-family:var(--mono);text-align:right;align-items:flex-end}
  table.bk-t td[data-ph=m]::before{content:attr(data-l);font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);flex:none}
  table.bk-t td[data-ph=m] .sub{display:inline;margin-left:6px}
  table.bk-t tbody td:not([data-ph=m]):not([data-ph=f])::before{content:none!important;display:none!important}
  table.bk-t td[data-ph=f]::before{content:attr(data-l);font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
  table.bk-t td[data-ph=x]{display:none}
  table.bk-t td .bk-who{justify-content:flex-start;gap:8px}
  table.bk-t td .bk-who .clogo{--chip:20px!important;width:20px;height:20px;font-size:10px!important;flex:none}
  table.bk-t td .bk-who>span:last-child{overflow:visible;text-overflow:clip;white-space:normal}
  table.bk-t td.n.m{font-family:var(--mono)}
  table.bk-t td .btn{min-height:44px}
  table.bk-t td .ssel,table.bk-t td select.sel,table.bk-t td input.sel{width:100%;max-width:none}
  /* a table with no title column (rows built by hand, the journal, the totals) keeps its own simple stack */
  table.bk-t tfoot{display:block;margin:0 0 8px}
  table.bk-t tfoot tr{display:flex;flex-wrap:wrap;gap:4px 12px;padding:10px 14px;border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf2);font-weight:600}
  table.bk-t tfoot td{display:flex;justify-content:space-between;gap:8px;flex:1 1 calc(50% - 8px);font:600 13px var(--mono)}
  table.bk-t tfoot td:first-child{flex:1 1 100%;font:600 13px var(--font)}
  table.bk-t tfoot td::before{content:attr(data-l);font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
  table.bk-t tfoot td:first-child::before{display:none}
  table.bk-t tfoot td:empty{display:none}
  /* a journal entry: ledger lines, the account on top, debit left and credit right underneath */
  table.bk-t.rp-jt tbody tr,table.bk-t.rp-jt tfoot tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:10px 14px;margin:0;border:0;border-bottom:1px solid var(--bd);border-radius:0;background:none;min-height:44px;align-items:baseline;font-weight:400}
  table.bk-t.rp-jt tbody tr::after{content:none}
  table.bk-t.rp-jt td:first-child{grid-column:1/-1;display:block;padding:0;border:0;flex:none;font:inherit}
  table.bk-t.rp-jt td.n{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:0;border:0;flex:none;font-family:var(--mono);white-space:nowrap}
  table.bk-t.rp-jt td.n:empty{display:flex;visibility:hidden}
  table.bk-t.rp-jt tbody td.n::before,table.bk-t.rp-jt tfoot td.n::before{content:attr(data-l)!important;display:inline!important;font:600 10.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
  table.bk-t.rp-jt tbody td:first-child::before{content:none!important}
  table.bk-t.rp-jt tfoot tr{background:var(--sf2);font-weight:600;border-bottom:0}
  .bk-more .btn{width:100%}
  .bk-sec>.tw,.bk-sec .bd>.tw{padding:8px 8px 0}
  /* the customer page's own tab strip (the Billing tab lives there) */
  .hub-tabs{scrollbar-width:none}.hub-tabs::-webkit-scrollbar{display:none}
  .hub-tabs .hub-tab{min-height:44px;display:inline-flex;align-items:center}
  .hub-tabs.sc-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .hub-tabs.sc-l.sc-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
  .hub-tabs.sc-l:not(.sc-r){-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent)}

  /* ----- sections, forms ----- */
  .bk-grid,.bk-grid.two,.rp-map{grid-template-columns:minmax(0,1fr);gap:12px}
  .rp-row2{grid-template-columns:minmax(0,1fr)}
  .bk-main2{grid-template-columns:minmax(0,1fr)}
  .bk-main2>.bkp-desk{order:2} /* a posted invoice: the money and the timeline first, the paper after */
  .bk-sec .bd{padding:12px}
  .bk-kv{grid-template-columns:minmax(84px,max-content) minmax(0,1fr);gap:6px 12px}
  .bk-kv dd.m{text-align:right;font-family:var(--mono)}
  .bk-banner{padding:10px 12px}.bk-banner .sp{flex:1 1 100%;min-width:0}.bk-banner .btn{flex:1 1 100%}
  .bk-steps,.rp-steps{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .bk-steps::-webkit-scrollbar,.rp-steps::-webkit-scrollbar{display:none}
  .bk-steps button{min-width:0;flex:0 0 132px;min-height:44px}
  .rp-steps>div{flex:0 0 140px;border-bottom:0}
  .bk-steps.sc-r,.rp-steps.sc-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
  .bk-steps.sc-l.sc-r,.rp-steps.sc-l.sc-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
  .bk-steps.sc-l:not(.sc-r),.rp-steps.sc-l:not(.sc-r){-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent)}
  .rp-cand{grid-template-columns:minmax(0,1fr) auto}
  .rp-list{max-height:none}
  .rp-drop{padding:20px 14px;min-height:96px;display:grid;place-content:center}
  .rp-svg{max-height:260px}
  .rp-hr{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}.rp-hl{white-space:normal}
  .bk-totals{min-width:0;width:100%}
  .bk-totals>*:nth-child(even){font-family:var(--mono)}
  .bk-addrow{max-width:none}
  .bk-pax .sel,.bk-cl .sel,.bk-cl .sel{flex:1 1 100%}
  .bk-cust .bk-sec .bd.bk-grid{align-items:stretch}

  /* ----- drawers: full-height bottom sheets, the main action stays at the bottom ----- */
  .bk-drawer,.bk-drawer.wide{left:0;right:0;width:auto;top:calc(env(safe-area-inset-top,0px) + 10px);bottom:var(--bk-kb,0px);border:0;border-top:1px solid var(--bd2);border-radius:16px 16px 0 0;transform:translateY(102%);box-shadow:0 -10px 40px rgba(0,0,0,.35)}
  .bk-drawer.on{transform:none}
  .bk-drawer>header{height:56px;padding:6px 6px 0 16px;position:relative}
  .bk-drawer>header::before{content:"";position:absolute;top:6px;left:50%;width:38px;height:4px;margin-left:-19px;border-radius:2px;background:var(--bd2)}
  .bk-db{padding:14px 16px;gap:14px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:20px}
  .bk-drawer>footer{display:flex;flex-wrap:wrap;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
  .bk-drawer>footer .btn{flex:1 1 calc(50% - 4px);min-height:44px}
  .bk-drawer>footer .btn.pri{flex:1 1 100%;order:-1}
  html.ua-kb .bk-drawer>footer{padding-bottom:10px}
  .bk-confirm{align-items:end;padding:0;place-items:end stretch}
  .bk-cbox{width:100%;border-radius:16px 16px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));max-height:90vh;overflow-y:auto}
  .bk-cacts{flex-direction:column;justify-content:stretch}
  .bk-cacts .btn{width:100%;min-height:44px}
  .bk-menu{left:0!important;right:0!important;top:auto!important;bottom:0!important;max-width:none;width:auto;max-height:70vh;border-radius:16px 16px 0 0;padding:6px 6px calc(10px + env(safe-area-inset-bottom,0px));z-index:70}
  .bk-menu button{padding:10px 14px}
  .msheet .bkf-row .ssel{width:100%}

  /* ----- the invoice editor: header fields, line cards, sticky total ----- */
  .bk-editing .bk-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .bk-editing .bk-grid .bk-fld:has(#bk-h-area),.bk-editing .bk-grid .bk-fld:has(#bk-h-po){grid-column:1/-1}
  .bk-editing .bk-lines,.bk-editing .bk-lines tbody{display:block;width:100%}
  .bk-editing .bk-lines thead{display:none}
  .bk-editing .bk-lines tr.bk-lr{display:block;padding:0;border-bottom:1px solid var(--bd)}
  .bk-editing .bk-lines td{display:none}
  .bk-editing .bk-lines td.bk-lsum{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:12px 14px!important;min-height:64px;cursor:pointer;align-items:baseline;border:0!important;width:auto!important;text-align:left}
  .bk-lsum .bkl-t{grid-column:1;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
  .bk-lsum .bkl-t .bkl-d{display:block;font-weight:400;font-size:12px;color:var(--ink3);margin-top:2px}
  .bk-lsum .bkl-a{grid-column:2;grid-row:1;text-align:right;font:600 15px var(--mono)}
  .bk-lsum .bkl-q{grid-column:1;font-size:13px;color:var(--ink2)}
  .bk-lsum .bkl-x{grid-column:2;grid-row:2;text-align:right}
  .bk-lsum .bkl-e{grid-column:1/-1;font-size:12px;color:var(--acc);font-weight:600}
  .bk-editing .bk-noline{padding:14px}
  .bk-editing #bk-notewrap{grid-template-columns:minmax(0,1fr)!important}
  .bk-editing .bk-sec .sh{flex-wrap:wrap}
  .bk-editing .bk-sec .sh .btn{flex:1 1 auto}
  .bk-editing #bk-postbar .bk-bar{justify-content:stretch}
  .bk-editing #bk-postbar .bk-bar .btn{flex:1 1 calc(50% - 6px)}
  .bk-editing #bk-postbar .bk-bar .btn.pri{flex:1 1 100%;order:-1}
  .bk-editing #bk-postbar .bk-bar .sp{display:none}
  .bk-editing .page{padding-bottom:calc(var(--tab) + 96px + env(safe-area-inset-bottom,0px))}
  .bk-stot{display:flex;position:fixed;left:0;right:0;bottom:calc(var(--tab) + env(safe-area-inset-bottom,0px));z-index:28;align-items:center;gap:12px;padding:8px 16px;background:var(--sf);border-top:1px solid var(--bd2);box-shadow:0 -6px 18px rgba(0,0,0,.18)}
  .bk-stot[hidden]{display:none}
  .bk-stot .bkl-l{font:600 11px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);flex:none}
  .bk-stot b{flex:1;font:700 18px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;min-width:0}
  .bk-stot .btn{flex:none}
  html.ua-kb .bk-stot,html:has(.msheetwrap) .bk-stot,html:has(.bk-drawer.on) .bk-stot{display:none}
  .msheet .bkl-body{display:grid;gap:12px;margin:10px 0 2px}
  .msheet .bkl-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .msheet .bkl-sum{margin:0}

  /* ----- the paper (a posted invoice, the preview): a real page that fits the phone, not a shrunken picture ----- */
  .bkp-desk{padding:0;border:0;background:none;display:block;overflow:visible}
  .bkp-zoom{zoom:1}
  .bkp-paper{width:100%;min-height:0;padding:20px 16px 16px;box-shadow:0 1px 8px rgba(0,0,0,.2);border-radius:4px}
  .bkp-h{flex-direction:column;gap:12px}
  .bkp-co{text-align:left}
  .bkp-paper h2{font-size:26px;margin:18px 0 2px}
  .bkp-bt,.bkp-btm{grid-template-columns:minmax(0,1fr);gap:14px}
  .bkp-meta{grid-template-columns:1fr 1fr}
  .bkp-meta div{border-bottom:1px solid var(--pl)}
  .bkp-meta div:nth-child(2n){border-right:0}
  .bkp-meta div:last-child{grid-column:1/-1;border-bottom:0}
  .bkp-paper table,.bkp-paper tbody{display:block}
  .bkp-paper thead{display:none}
  .bkp-paper tbody tr{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--pl)}
  .bkp-paper td{display:block;padding:0;border:0}
  .bkp-paper td.bkp-d{grid-column:1/-1;font-weight:600}
  .bkp-paper td[data-l]::before{content:attr(data-l);display:block;font:700 9px var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--pg)}
  .bkp-paper td.r{text-align:left}
  .bkp-tt{flex-direction:column;gap:14px}
  .bkp-totals{min-width:0;width:100%}
  .bkp-stamp{right:16px;top:90px;font-size:18px}
  .bkp-pf{flex-direction:column;gap:2px}
  /* the invoice actions: the main ones first, one row each */
  .bk-bar.nonprint .btn{flex:1 1 calc(50% - 6px)}
  .bk-bar.nonprint .btn.pri{flex:1 1 100%;order:-1}
  .bk-bar.nonprint .sp{display:none}
  /* the rest of the page */
  .bk-chips{gap:8px}
  .bk-fix{margin:0 0 10px}
  .bk-fix-a .btn{flex:1 1 auto}
  .bk-rl small{white-space:normal;text-align:right}
}
@media (max-width:719px) and (max-height:480px){ /* a phone on its side */
  .bk-stot{padding:4px 16px}
  .bk-drawer,.bk-drawer.wide{top:0;border-radius:0}
}
@media print{.bk-stot,.bk-fbtn{display:none!important}}