/* Phone layout for the host desk. Everything that changes the look is inside the max-width:600px block,
   so laptops and tablets are untouched. Loaded after every other stylesheet on purpose. */
.sact{display:contents}                       /* the level row's BRK / LVL / RMV buttons: no effect on wide screens */
.g32-toast{position:fixed;left:12px;right:12px;bottom:16px;z-index:99999;padding:12px 14px;border-radius:10px;background:#203145;color:#edf2f7;border:1px solid #d6ad58;font:14px/1.4 system-ui;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.5);transition:opacity .6s}
.g32-toast.out{opacity:0}

@media (max-width:600px){
  /* ---- top account bar: 5 short rows instead of 9 tall ones ---- */
  .account-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:10px 12px;align-items:center}
  .account-bar>a:first-child{grid-area:1/1;width:auto;margin:0}
  .account-bar .g32-logo{width:104px;height:41px}
  .account-bar .bar-acct{display:contents}
  .account-bar #account-logout{grid-area:1/2;min-height:40px}
  .account-bar .bar-who{grid-area:2/1;min-width:0;max-width:100%}
  .account-bar .bar-who #account-who{max-width:none;min-width:0;flex:1 1 auto}
  .account-bar .bar-who #account-plan{flex:none}
  .account-bar .lang-sel{grid-area:2/2;min-height:40px}
  .account-bar #upgrade-soon{grid-area:3/1/3/-1;min-height:40px}
  .account-bar .bar-tools{grid-area:4/1/4/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0;border:0}
  .account-bar .bar-tools>*{min-height:44px;padding:6px 4px;font-size:13px;line-height:1.15;text-align:center;display:flex;align-items:center;justify-content:center}
  .account-bar .bar-state{grid-area:5/1/5/-1;width:auto;order:0}
  .account-bar #sync-status{width:auto;order:0}

  /* ---- header: title + Appearance on one row, the two screens side by side ---- */
  header{gap:10px;padding:12px}
  header .hd-title{flex:1 1 0;min-width:150px}
  header .hd-title h1{font-size:16px;letter-spacing:.12em}
  header .disp-btn{flex:1 1 calc(50% - 6px);min-width:0;width:auto;height:46px;padding:0 6px;gap:6px;font-size:12px;letter-spacing:.04em;margin-bottom:0}
  header .disp-ico{width:44px;height:24px}
  header .disp-ico .chip{width:15px;height:15px;margin-left:-5px;border-width:1px}
  header .disp-ico .chip::after{top:2px;left:2px;right:2px;bottom:2px}
  header .disp-ico .spade{font-size:20px}
  header .disp-btn{white-space:normal;line-height:1.1}

  /* ---- taps: 16px text (iPhones zoom into anything smaller) and finger-sized controls ---- */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px}
  button,.btn,.sb2,.file-button{min-height:40px}
  .btn{padding:8px 14px}
  .btn.sm{font-size:13px}
  .sb2{padding:6px 12px;font-size:13px}
  .sb2.rb-rm{padding:6px 10px}
  input[type=checkbox]{width:22px;height:22px}
  .tog-wrap{min-height:40px;gap:8px}
  .tog-lbl{font-size:14px}
  .price-inp{width:60px;padding:6px 4px}
  .rb-cut-inp{width:50px;padding:6px 4px}
  .stk-inp{width:92px}
  .pct-adj{width:38px;height:38px;font-size:18px}
  .pct-sug{padding:9px 10px;font-size:12px}
  .fr{padding:7px 0}
  select,.account-bar .lang-sel,#jump-level-sel,#sel-currency{font-size:16px;min-height:40px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]){min-height:40px}
  .tdot{width:28px;height:28px}

  /* ---- blind schedule: boxed number fields, and the BRK / LVL / RMV buttons get their own line ---- */
  .sched-lib-row{flex-wrap:wrap;gap:8px;padding:8px 10px}
  .sched-lib-lbl{flex:1 0 100%}
  .sched-lib-sel{flex:1 1 140px;padding:8px;font-size:16px;min-height:42px}
  .sched-lib-row .btn{min-height:42px}
  .shd .styp,.shd .sdel,.shd .s4:empty{display:none}
  .shd .s0,.srow .s0{flex:0 0 42px}
  .shd .s1,.srow .s1{flex:0 0 66px}
  .srow{flex-wrap:wrap;align-items:center;padding:8px 8px 6px;gap:0 6px}
  .srow .s2,.srow .s3,.srow .s4,.shd .s2,.shd .s3,.shd .s4{flex:1 1 0;min-width:0}
  .sinp{font-size:16px;padding:8px 6px;border:1px solid rgba(255,255,255,.14);border-radius:5px;background:rgba(255,255,255,.04);color:#ddd}
  .sact{display:flex;flex:1 0 100%;justify-content:flex-end;align-items:center;gap:8px;padding-top:6px}
  .sact .styp,.sact .sdel{flex:0 0 auto;gap:8px}
  .type-btn{font-size:12px;padding:0 12px;min-width:56px;min-height:38px;letter-spacing:.06em}
  .srow{font-size:14px}
}