/* ======================================================================
   R1 RESPONSIVE LAYER (Oct 23, 2026) - one breakpoint system for every screen (loaded last).
     <=640px    phones: compact paddings, tables scroll inside their card
     <=860px    phone/tablet portrait: sidebar = off-canvas drawer + bottom tab bar (like NestQueue)
     861-1279   landscape tablet / small laptop: sidebar = 76px icon rail (hover/focus expands it over the page)
     >=1280     full sidebar
     >=1700     wider content (1560px), 4-up dashboard cards
     >=2200     QHD/ultrawide: content capped at 1880px, centered; dashboard goes multi-column
   Touch devices (pointer:coarse) get 44px minimum targets; safe-area insets for notches / home indicator.
   ====================================================================== */
:root{--app-max:1320px;--touch:44px;--safe-t:max(env(safe-area-inset-top,0px),var(--nat-t,0px));--safe-b:max(env(safe-area-inset-bottom,0px),var(--nat-b,0px));--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px)}
@media (min-width:1700px){:root{--app-max:1560px}}
@media (min-width:2200px){:root{--app-max:1880px}}
.ct-app{max-width:var(--app-max);margin-inline:auto;box-sizing:border-box}
.mn{min-width:0}

/* ---- top bar: never overflow; long names ellipsize, low-priority items drop out first ---- */
.tb>*{min-width:0}
.tb-acct,.tb-bell,.tb-theme,.tb-add,.fx-bellw{flex:none}
.tb-ws{flex:0 1 auto}
.tb-uname{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-n b,.ws-n small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1440px){.tb{gap:10px;padding-inline:18px}.tb-usage{width:150px}}
@media (max-width:1440px){.tb-uname{display:none}.tb-acct{padding:4px}.tb-search{flex:1 1 150px;min-width:110px}}

/* ---- icon rail 861-1279 ---- */
@media (min-width:861px) and (max-width:1279px){
 .tb-usage{width:130px}
 .tb-add{padding-inline:12px}
 .tb-ws .ct-tid{display:none}
}
@media (min-width:861px) and (max-width:1100px){
 .tb-add span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .tb-usage{display:none}
 .tb-ws .ct-meta{display:none}
}

/* ---- drawer + bottom tab bar <=860 (base layout files now switch at 860 too) ---- */
@media (max-width:860px){
 .tb{padding-top:calc(8px + var(--safe-t));padding-left:max(14px,var(--safe-l));padding-right:max(14px,var(--safe-r))}
 .sd{padding-top:calc(18px + var(--safe-t));padding-bottom:calc(14px + var(--safe-b))}
 .ct-app{padding-left:max(14px,var(--safe-l));padding-right:max(14px,var(--safe-r))}
 .bt{padding-left:max(6px,var(--safe-l));padding-right:max(6px,var(--safe-r))}
 .bt a,.bt>button{min-height:var(--touch);justify-content:center}
}
@media (max-width:640px){
 .et-panel{padding:16px}
 .tx-wrap{margin-inline:-16px;padding-inline:16px}
 .ph{flex-wrap:wrap;gap:8px}
}

/* ---- wide screens: multi-column dashboard ---- */
@media (min-width:1700px){.dg.fx-dg3{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:2200px){
 #v-dashboard:not([hidden]){display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:18px;align-items:start}
 #v-dashboard>*{grid-column:1/-1}
 #v-dashboard>.dg:not(.dg2):not(.fx-dg3){grid-column:1}
 #v-dashboard>.dg.dg2{grid-column:2;grid-template-columns:minmax(0,1fr)}
}

/* ---- dialogs: always fit, scroll inside ---- */
dialog{max-width:calc(100vw - 24px - var(--safe-l) - var(--safe-r));max-height:calc(100dvh - 24px - var(--safe-t) - var(--safe-b));overflow:auto;overscroll-behavior:contain}
@media (max-width:640px){dialog{max-height:calc(100dvh - 16px - var(--safe-t) - var(--safe-b))}}

/* ---- touch devices: 44px targets ---- */
@media (pointer:coarse){
 .sd-nav a{min-height:var(--touch)}
 .tb-bell,.tb-theme{width:var(--touch);height:var(--touch)}
 .tb-acct,.ws-btn,.tb-brand{min-height:var(--touch)}.tb-brand{display:inline-flex;align-items:center;min-width:var(--touch)}
 .et-btn,.et-btn.sm,a.et-btn,button.et-btn{min-height:var(--touch)}
 .et-btn.icon,a.et-btn.icon{min-width:var(--touch)}
 .ph select,.et-field input,.et-field select,.et-field textarea,input[type=text],input[type=search],input[type=email],input[type=number],input[type=date],input[type=password],input[type=tel],input[type=url],select{min-height:var(--touch)}
 .tb-search input{min-height:var(--touch)}
 .fx-x,.ct-copy,.ct-up{position:relative}
 .fx-x:after,.ct-copy:after,.ct-up:after{content:"";position:absolute;inset:-8px}
 .au-sso-btn,.au-tabs a{min-height:var(--touch);display:flex;align-items:center;justify-content:center}
 .au-link{display:inline-block;padding-block:12px;margin-block:-12px}
 /* generic in-page controls (filters, segmented buttons, row actions) */
 .ct-app button:not(.fx-x):not(.ct-copy):not([role=switch]),dialog button:not(.fx-x),.ct-app a.et-btn,dialog a.et-btn{min-height:var(--touch)}
 .et-btn.icon,a.et-btn.icon,button.et-btn.icon{height:var(--touch);min-width:var(--touch)}
 .tb-search input,#fx-gs{height:var(--touch);min-height:var(--touch)}
 .tb-mode button{min-height:var(--touch)}
 .tb-acct{min-width:var(--touch);justify-content:center}
 .au-logo{min-height:var(--touch);display:inline-flex;align-items:center}
 .fx-x:after,.ct-copy:after,.ct-up:after{inset:-11px}
 dialog button[aria-label=Close]{min-width:var(--touch);min-height:var(--touch)}
 .ct-modal input,.ct-modal select,.cm-li input,.cm-li select{min-height:var(--touch)!important}
 .fx-m-rc{display:inline-block;min-width:var(--touch);text-align:center;padding:13px 8px;margin:-13px 0;box-sizing:border-box}
}
@media (pointer:coarse) and (max-width:860px){.tb-brand{display:inline-flex}}
@media (pointer:coarse) and (min-width:861px){.tb-brand{display:none}}

/* ======================================================================
   R2 PHONE FIXES (Oct 23, 2026, Android app feedback)
   - no horizontal overflow ever (off-canvas drawer is hidden, not just moved)
   - one-row top bar: logo | tracker switcher | search icon | bell | theme | avatar; search opens as a full-width row
   - popovers = full-width sheets under the top bar with a scrim (they used to hang off the left edge)
   - dialogs = full-height sheets sized to the visible viewport (above the keyboard), sticky title + action bar
   ====================================================================== */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
.tb-sbtn{display:none}
.pop-scrim[hidden]{display:none}
.ct-mh{display:contents}.ct-mh-t{display:none}
.ct-menu-use{display:block;margin-top:6px;font-size:.76rem;color:var(--muted)}
.ct-menu-use:empty{display:none}
@media (min-width:861px){.ct-menu-use{display:none}}
@media (max-width:860px){
 body:not(.sd-open) .sd{visibility:hidden;box-shadow:none;transition:transform .22s ease,visibility 0s linear .22s}
 body.sd-open .sd{visibility:visible}
 /* top bar: one compact row */
 .tb{flex-wrap:wrap;gap:6px;row-gap:8px;padding-top:calc(6px + var(--safe-t));padding-bottom:6px;padding-left:max(10px,var(--safe-l));padding-right:max(10px,var(--safe-r));min-height:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98)}
 html[data-theme=dark] .tb{background:rgba(11,16,32,.98)}
 .tb-brand{order:1;flex:none;justify-content:center}.tb-brand img{width:34px}
 .tb-ws{order:2;flex:1 1 0;min-width:0;max-width:none}
 .tb-ws .ws-btn{width:100%;max-width:none;min-width:0;padding:4px 8px 4px 5px;gap:7px}
 .ws-ic{width:28px;height:28px}
 .tb-sbtn{order:3;display:grid;place-items:center;flex:none;width:var(--touch);height:var(--touch);border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer}
 .tb-sbtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
 .tb-sbtn[aria-expanded=true]{border-color:var(--blue);color:var(--blue)}
 html[data-theme=dark] .tb-sbtn{background:var(--dk1);border-color:var(--dkb);color:#c9d6ff}
 .fx-bellw{order:4}.tb-theme{order:5}.ct-acct{order:6;flex:none}
 .tb-bell,.tb-theme,.tb-acct{width:var(--touch);height:var(--touch);min-width:var(--touch);padding:0;justify-content:center}
 .tb-acct .ct-av{width:32px;height:32px}
 .tb-usage,.tb-add{display:none!important}
 .tb-search{order:20;flex:1 1 100%;min-width:0;display:none}
 body.ct-search-open .tb-search{display:flex;position:relative;z-index:64}
 body:has(#tb-mode:not([hidden])) .tb-search{flex:1 1 100%;min-width:0}
 body.ct-admin-mode .tb-sbtn{display:none!important}
 .tb-mode{order:21;flex:1 1 100%;justify-content:center}
 /* popovers: full-width sheet under the top bar, opaque, scrollable, above a scrim */
 .fx-np,.ct-menu,.ws-pop,.fx-gs-res{position:fixed;left:calc(8px + var(--safe-l));right:calc(8px + var(--safe-r));top:var(--pop-top,64px);width:auto;min-width:0;max-width:none;
  max-height:calc(var(--vvh,100dvh) - var(--pop-top,64px) - 12px - var(--safe-b));overflow:auto;overscroll-behavior:contain;z-index:63;opacity:1;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(13,20,51,.3)}
 html[data-theme=dark] :is(.fx-np,.ct-menu,.ws-pop,.fx-gs-res){background:var(--dk1)}
 .fx-np:not([hidden]){display:flex;flex-direction:column}.fx-np ul{max-height:none;flex:1 1 auto;min-height:0;overflow:auto}.fx-np-h{flex:none}
 .ct-menu{padding:8px}.ct-menu button,.ct-menu .ct-mi{min-height:var(--touch)}
 .pop-scrim{position:fixed;inset:0;z-index:62;background:rgba(8,12,30,.45);-webkit-tap-highlight-color:transparent}
 body.ct-pop-open .tb{z-index:80}
}
@media (max-width:440px){.ws-ic{display:none}.tb{gap:5px}.tb-ws .ws-btn{padding:4px 6px 4px 9px}}
@media (max-width:374px){.tb-brand{display:none!important}}
@media (pointer:coarse) and (max-width:860px){.tb-brand{display:inline-flex}}

/* ---- phones: dialogs as full-height sheets that fit above the on-screen keyboard ---- */
@media (max-width:640px){
 dialog.ct-modal,dialog.ct-modal.ct-addm,dialog.ct-modal.fx-modal{position:fixed;inset:auto 0 auto 0;top:var(--vvt,0px);margin:0;width:100%;max-width:100%;height:var(--vvh,100dvh);max-height:var(--vvh,100dvh);
  border-radius:0;padding:calc(14px + var(--safe-t)) 16px 0;overflow:auto;overscroll-behavior:contain;box-shadow:none}
 dialog.ct-modal::after{content:"";display:block;height:calc(16px + var(--safe-b))}
 dialog.ct-modal.has-mh{padding-top:0}
 dialog.ct-modal:has(.et-form-btns,.fx-m-btns,.nt-btns)::after{display:none}
 .ct-modal .ct-mh{display:flex;align-items:center;gap:6px;position:sticky;top:0;z-index:6;margin:0 -16px 10px;padding:calc(4px + var(--safe-t)) 4px 4px 16px;min-height:calc(56px + var(--safe-t));background:#fff;border-bottom:1px solid var(--line)}
 .ct-mh-t{display:block;flex:1;min-width:0;font-size:1.08rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ct-mh .ct-x{position:static;flex:none}
 .ct-modal .ct-mh-src{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .ct-modal :is(.et-form-btns,.fx-m-btns,.nt-btns){position:sticky;bottom:0;z-index:5;background:#fff;margin:12px -16px 0;padding:10px 16px calc(10px + var(--safe-b));border-top:1px solid var(--line)}
 html[data-theme=dark] .ct-modal :is(.ct-mh,.et-form-btns,.fx-m-btns,.nt-btns){background:var(--dk1);border-color:var(--dkb)}
}
/* long URLs / tab strips never push the page wider than the phone */
.ct-app code{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:640px){.ct-app .seg.fx-tabs{max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.ct-app .seg.fx-tabs::-webkit-scrollbar{display:none}.ct-app .seg.fx-tabs>button{flex:none}}
.cm-docs{grid-template-columns:minmax(0,1fr)}.cm-doc{min-width:0}.cm-pre pre{max-width:100%;overflow-x:auto}