/* Phone layout (760px and narrower). Desktop (1024px and up) is untouched: everything here sits inside max-width queries,
   except the sign-in centering, which is safe at every width. */

/* phone-only helpers */
.m-only{display:none}

/* ---------- sign-in: centered at every width ---------- */
body.signin{overflow-x:hidden}
body.signin .app{overflow-x:hidden}
body.signin .top{display:none}
body.signin .main{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body.signin .page{flex:1;display:flex;align-items:center;justify-content:center;max-width:none;width:100%;padding:24px 16px}
body.signin .page > .screen{width:100%;display:flex;flex-direction:column;align-items:center}
body.signin .sysline{display:none}
.signin-wrap{width:100%;max-width:420px;margin:0 auto}
.signin-wrap .head{margin-bottom:16px}
.signin-wrap .headline{text-align:center}
.signin-wrap .lede{text-align:center;margin-left:auto;margin-right:auto}
.signin-wrap input{max-width:100%}
.signin-wrap .card{overflow:hidden}

@media (max-width:760px){
  html,body{overflow-x:hidden;max-width:100vw}
  .app,.main,.page{max-width:100vw}
  button,.btn,.btn-primary,.ibtn,.chip.click,.tabs a,.citem,.more-menu a{min-height:44px}
  .btn.sm,.btn-primary.sm{min-height:44px}

  /* top bar: safe area, search + dialer always there */
  .top{height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top);padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right));gap:8px}
  .find{min-width:0;flex:1 1 auto;width:auto;max-width:none;justify-content:flex-start;padding:0 12px;height:44px}
  .find .ph{display:block;font-size:14px}
  .find kbd{display:none}
  .dial-btn{width:44px;height:44px}
  .top > span[style*="flex:1"]{display:none}
  .pill.fake,#czbtn{display:none!important}
  .top .ibtn{width:44px;height:44px}
  .backtop{flex:none;min-height:44px}
  .backtop:not(.on){display:none}
  .page{padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right));padding-bottom:calc(96px + env(safe-area-inset-bottom))}

  /* bottom tab bar: Today, Replies, Dial, Contacts, More */
  .bottombar{grid-template-columns:repeat(5,1fr);padding:4px 4px calc(4px + env(safe-area-inset-bottom));z-index:60}
  /* flush to the screen edge, fully opaque (the glass tint sits on a solid base) so page content never shows through or under it */
  .bottombar{position:fixed;left:0;right:0;bottom:0;margin:0;background:linear-gradient(var(--glass),var(--glass)),var(--bg0);background-color:var(--bg0);box-shadow:0 1px 0 var(--bg0)}
  .bottombar::after{content:"";position:absolute;left:0;right:0;top:100%;height:60px;background:var(--bg0);pointer-events:none}
  /* the idle bulk-select bar (an empty dark pill parked just below its slot) landed on top of the DIAL label on phones with a home-indicator inset: hidden unless it is open. Same for the toast. */
  .bulkbar:not(.on),.toast:not(.on){visibility:hidden;pointer-events:none}
  .toast{backdrop-filter:none;-webkit-backdrop-filter:none}
  .bottombar a,.bottombar .mtab{display:grid;justify-items:center;align-content:center;gap:2px;min-height:52px;font-family:var(--mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--text3);position:relative;padding:4px 0}
  .bottombar .mtab.on{color:var(--accent)}
  .bottombar a svg,.bottombar .mtab svg{width:24px;height:24px}
  .head-act{bottom:calc(80px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}

  /* More sheet */
  .more-menu{top:auto;left:0;right:0;bottom:0;min-width:0;max-height:75vh;overflow:auto;border-radius:18px 18px 0 0;z-index:65;padding:6px 8px calc(12px + env(safe-area-inset-bottom));display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
  .more-menu.on{display:grid}
  .more-menu .sheet-grip{grid-column:1/-1;width:40px;height:4px;border-radius:2px;background:var(--line3);margin:6px auto 8px}
  .more-menu a{min-height:48px}
  .more-menu a.on{color:var(--accent)}
  body.more-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:62;pointer-events:none}
  #morebtn{display:none!important}

  /* Replies: list, then full-screen thread with the reply box pinned above the keyboard */
  .m-only{display:block}
  button.m-only{display:inline-flex}
  .rp-tpl{width:100%;height:44px;margin-bottom:8px;font-size:16px}
  .composer .m-only textarea{width:100%}
  .split{border-radius:var(--r3)}
  .split.has-thread{position:fixed;inset:0;z-index:66;height:var(--vvh,100dvh);border:0;border-radius:0;display:flex;flex-direction:column;background:var(--bg0)!important;clip-path:none;padding-top:env(safe-area-inset-top)}
  .split.has-thread .thread{display:flex;flex:1;min-height:0}
  .split.has-thread .thead{flex:none}
  .split.has-thread .msgs{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .split.has-thread .composer{flex:none;padding-bottom:calc(12px + env(safe-area-inset-bottom));position:relative}
  body:has(.split.has-thread) .bottombar,body:has(.split.has-thread) .top,body:has(.split.has-thread) .head-act{display:none}
  .composer textarea{font-size:16px;min-height:88px;max-height:30vh}
  .thead .show-m{min-height:44px}
  .citem{padding:14px 12px}

  /* Quick call / Quick text */
  .qc-bg.call,.qc-bg.text{padding:0;align-items:stretch}
  .qc-box.call,.qc-box.text{width:100%;height:100%;max-height:none;border-radius:0;border-width:0;transform:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .qc-box select,.qc-box input,.qc-box textarea{font-size:16px}

  /* Dialer panel (top-bar phone button): full-screen sheet, big keypad */
  .dh-pop{inset:0;top:0;left:0;right:0;width:auto;max-height:none;height:100dvh;border-radius:0;border-width:0;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));z-index:80}
  #dhtray{z-index:80}
  .dh-pop{background:var(--bg0)!important}
  .dh-syshd{display:flex;justify-content:space-between;align-items:center}
  button.dh-close{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:64px;padding:0 14px;border:1px solid var(--line2);border-radius:12px;color:var(--text1);font:600 13px var(--sans)}
  .dh-key{height:64px}
  .dh-key b{font-size:24px}
  .dh-pad{gap:10px}
  .dh-go,.dh-yes,.dh-no{height:56px;font-size:16px}
  .livepill .lp-open,.livepill button{min-height:36px;padding:0 14px}
  .dh-bs{width:48px;height:48px}
  .dh-pop input{height:48px}

  /* Dial session screen */
  .dial{grid-template-columns:minmax(0,1fr)}
  .callbtn{width:100%;height:68px;padding:0 20px}
  .pad button{min-height:72px}

  /* tables: scroll inside their own box */
  .card.flush,.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{max-width:none}
  .board{scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
  .col{scroll-snap-align:start}
  .page img,.page video,.page canvas,.page svg{max-width:100%}
  .page pre{overflow-x:auto}
  .page input:not([type=checkbox]):not([type=radio]),.page select,.page textarea{font-size:16px;max-width:100%}

  /* heavy HUD effects off on phone */
  #bgfx,.gridlines,#cursorlight,.vignette,.bloom,.streams,.radar{display:none!important}
  .card,.top,.bottombar,.more-menu,.split{backdrop-filter:none;-webkit-backdrop-filter:none}
  .reactor .r1{animation:spin 60s linear infinite}   /* the ring keeps turning on a phone, one slow band only */
  .reactor .r2,.reactor .r3,.reactor .r4{animation:none}
  .herobar{gap:6px;margin-bottom:10px} .harr{display:none}
  .hchip{height:36px}
  .herostats .hstat{flex:1 1 calc(50% - 8px);min-width:0}
  .herodrill .dr{grid-template-columns:minmax(0,1fr) auto}
  .herodrill .dr .small{display:none}
  .focus .actions .btn-hero,.focus .actions .btn{flex:1 1 auto;justify-content:center}
}

@media (max-width:760px){
  .nc-bg{align-items:stretch}
  .nc-panel{width:100vw;border-left:0}
  .nc-h,.nc-b,.nc-f{padding-left:16px;padding-right:16px}
  .nc-err{margin-left:16px;margin-right:16px}
  .nc-b input,.nc-b select,.nc-b textarea{font-size:16px;min-height:44px}
  .nc-b input[type=checkbox],.nc-b input[type=radio]{min-height:0}
  .nc-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nc-3 .field:first-child{grid-column:1/-1}
  .nc-3 .field{min-width:0}
  .nc-b select{width:100%;min-width:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .nc-3 select,.nc-3 input{width:100%;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
  .nc-ph{grid-template-columns:1fr 100px;}
  .nc-ph .nc-pri{grid-column:1}
  .nc-na{grid-template-columns:1fr}
  .nc-f .btn,.nc-f .btn-primary{flex:1;min-height:44px}
}