/* ============================================================
   MY DAY GLASS — MOBILE
   The attachment layer: the phone's own clothing over the shared core.
   Desktop never loads this file.
   ============================================================ */

@media (max-width: 760px){
  /* ---- posture ---- */
  html{-webkit-text-size-adjust:100%;}
  body{--sliver:0px; overflow-x:hidden; padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));}
  input, select, textarea{font-size:16px !important;}
  .win-btn, .icon-btn, .q-status-btn, .pp-btn, .hb-btn{min-height:44px;}

  /* ---- the gate: one screen, no scrolling ---- */
  #gate{
    height:100dvh; overflow:hidden; flex-direction:column;
    justify-content:flex-start; align-items:stretch; gap:8px; padding:8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  #gate .gate-card{padding:12px 14px 10px; border-radius:18px; width:100%; animation:none;}
  .gate-card h1{
    font-size:1.02rem; letter-spacing:0.14em; white-space:nowrap;
    display:flex; align-items:baseline; justify-content:center; gap:6px;
  }
  .gate-card h1 sup, .gate-card h1 .tm{font-size:0.5em; vertical-align:super; letter-spacing:0;}
  .gate-card .beta-pill{transform:scale(0.85);}
  .gate-card .tag{display:none;}
  .gate-card input{padding:9px 12px; margin-top:6px;}
  #gate-go{padding:11px; margin-top:8px;}
  #gate-acct{margin-top:4px; font-size:0.56rem;}
  .gate-foot{display:none;}
  #gate-demo{flex:1; min-height:0; display:flex; flex-direction:column; gap:6px; max-width:none; width:100%; animation:none; opacity:1;}
  #gd-line{font-size:0.82rem; margin:0; line-height:1.15;}
  #gd-stage{flex:1; min-height:110px; height:auto;}
  #gd-bank{gap:6px; flex-wrap:wrap;}
  .gd-bmod{min-height:34px; padding:5px 10px; font-size:0.62rem;}
  .gd-bmod small{font-size:0.54rem;}
  #gd-hint{display:none;}
  #gate-film{border-radius:18px;}
  #gv-skip{bottom:10px; right:10px;}
  #gv-sound{bottom:10px; left:10px;}

  /* ---- header condenses; logo still flips it ---- */
  header.bar{flex-wrap:wrap; border-radius:20px; padding:7px 10px; gap:6px; max-width:none !important;}
  header.bar h1{font-size:0.74rem; letter-spacing:0.1em;}
  header.bar .collapsible{padding:6px 9px; font-size:0.55rem;}
  #fs-btn,#get-apps{padding:6px 9px; font-size:0.55rem; min-height:36px;}
  header.bar .logo-mark{transform:scale(0.82); margin-right:-2px;}
  #clock, header.bar .clock, #hdr-clock{font-size:1rem !important;}
  header.bar.flipped{max-width:none !important;}
  #hdr-back{flex-wrap:wrap; position:static; padding:6px 0 2px; border-radius:0;}
  header.bar.flipped > *:not(#hdr-back):not(#logo-flip){display:none;}
  header.bar.flipped #logo-flip{opacity:1; pointer-events:auto;}
  #fs-btn{display:inline-flex !important;}
  #get-apps{display:inline-flex !important;}
  #app-menu{min-width:210px;}

  #ticker{display:none !important;}   /* removed by ruling — awaiting Neb's redesign sketch */

  /* ---- ONE VIEW AT A TIME: the flip button travels ---- */
  main{display:block !important; position:relative; height:calc(100dvh - 152px - env(safe-area-inset-bottom, 0px)); min-height:360px; perspective:none; margin-left:0;}
  main.mflip{perspective:1400px;}
  main.mflip{animation:face-turn .55s cubic-bezier(.4,.1,.3,1);}
  #closeup,#queue,#dayline{
    position:absolute !important; inset:0; display:none; margin:0; height:auto !important;
  }
  #closeup.mv-on,#queue.mv-on,#dayline.mv-on{display:flex;}
  #body-pane,#bodywin{display:none !important;}
  .mv-flip{
    display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
    padding:7px 13px; border-radius:999px; border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.85); color:var(--deep); font-family:inherit; font-weight:800;
    font-size:0.56rem; letter-spacing:0.14em; text-transform:uppercase; min-height:36px; cursor:pointer;
  }

  /* ---- the close-up stays HORIZONTAL: pinch zooms, drag pans ---- */
  #cu-viewport{touch-action:none;}
  .pane-head{flex-wrap:nowrap; gap:6px; overflow:hidden;}
  .pane-head .eyebrow{display:none;}                 /* phone law: buttons over titles */
  .pane-head::after{content:''; flex:1;}             /* pushes window buttons right */
  #cu-ghost,#cu-print{display:none !important;}
  .cu-hour{font-size:0.6rem; opacity:0.9;}
  .cu-hour label{font-size:0.6rem;}
  .mod .m-title{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.7rem; max-width:100%;}
  .mod .m-time{font-size:0.55rem;}
  .mod .m-ico{display:none;}
  .mod .m-title-r, .mod .m-title-c{display:none !important;}   /* one name per module on a phone */

  /* ---- the duration wheel: appears on the selected module ---- */
  .mod .dur-wheel{display:none;}
  .mod.sel{outline:2px solid rgba(255,255,255,0.9); outline-offset:2px; z-index:30;}
  .mod.sel{overflow:visible;}
  .mod.sel .dur-wheel{
    display:flex; position:absolute; left:50%; transform:translateX(-50%); bottom:-34px; z-index:40;
    width:66px; height:26px; border-radius:9px; align-items:center; justify-content:center; gap:3px;
    background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(220,220,220,0.9));
    box-shadow:0 3px 8px rgba(0,0,0,0.35), inset 0 1px 2px #fff;
    touch-action:none; cursor:ew-resize;
  }
  .mod.sel .dur-wheel i{width:3px; height:12px; border-radius:2px; background:rgba(60,40,20,0.55);}

  /* ---- the editor rises as a bottom card, above the keyboard ---- */
  #editor{
    position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:100% !important; max-width:none !important; border-radius:22px 22px 0 0 !important;
    max-height:72vh; overflow-y:auto;
  }

  /* ---- the bank: slither · handle · chips · full ---- */
  #bank{
    position:fixed !important; left:0; right:0; bottom:0; top:auto !important;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    z-index:80; margin:0; border-radius:22px 22px 0 0;
    transform:translateY(calc(100% - 56px - env(safe-area-inset-bottom, 0px))) !important;
    transition:transform .5s cubic-bezier(0.32, 0.72, 0, 1);   /* the industry settle: fast launch, silk landing */
    height:92dvh; max-height:none; overflow:hidden;   /* tall enough that no state ever shows a gap beneath it */
  }
  #bank.dragging{transition:none;}
  #bank.dragging{}
  #bank[style*='transform']{}
  #bank.bank-slither{transform:translateY(calc(100% - 30px - env(safe-area-inset-bottom, 0px))) !important;}
  #bank.bank-chips{transform:translateY(calc(100% - 216px - env(safe-area-inset-bottom, 0px))) !important;}
  #bank.bank-full{transform:translateY(calc(100% - 92dvh)) !important; overflow-y:auto;}
  #bank::before{
    content:''; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:44px; height:5px; border-radius:99px; background:rgba(255,255,255,0.55);
  }
  #bank .pane-head{padding-top:18px; cursor:grab; touch-action:none;}
  #bank .pane-head .eyebrow{font-size:0.54rem;}
  #bank .bank-hint{display:none;}
  #bank .win-btn{display:none !important;}          /* the bank window itself wears no icons on a phone */
  #bank:not(.bank-full) #bank-list{
    display:flex !important; flex-direction:row !important; overflow-x:auto; overflow-y:hidden;
    gap:8px; padding:4px 10px 12px; -webkit-overflow-scrolling:touch;
  }
  #bank:not(.bank-full) .bank-mod{flex:0 0 auto; min-width:118px; max-height:62px; padding:9px 12px; overflow:hidden;}
  #bank .bank-mod .b-name{font-size:0.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #bank .bank-mod .b-min{font-size:0.55rem;}

  /* ---- goals, calendar, menus, panels ---- */
  #goal-toggle{display:none !important;}   /* retired on phones by ruling — returns after the touch era settles */
  #goalmode{display:none !important;}
  .pp-card{width:min(400px,94vw); max-height:78vh;}
  #calmode{margin-left:0;}
  .cal-grid{gap:5px;}
  .cal-cell{min-height:58px; padding:5px 6px 16px; border-radius:10px;}
  .cal-cell .d{font-size:0.66rem;}
  #ctx-menu{min-width:170px;}
  #ctx-menu button{padding:13px 15px;}
}

/* ---- LANDSCAPE PHONE: the same horizontal instrument, more room ---- */
@media (max-width: 950px) and (orientation: landscape) and (max-height: 500px){
  main{display:block !important; position:relative; height:calc(100dvh - 150px); margin-left:0;}
  #closeup{position:absolute !important; inset:0; display:flex !important; margin:0; height:auto !important;}
  #queue,#dayline,#body-pane,#bodywin{display:none !important;}
  #ticker{display:none !important;}
  header.bar{padding:6px 12px;}
  body{padding-bottom:60px;}
  #cu-viewport{touch-action:none;}
}