/* ── mobile.css — SEJR/OS on a phone ─────────────────────────────────
   The Win95 desktop becomes a one-window-at-a-time mobile OS: every window
   opens full-screen like an app, the taskbar becomes a bottom bar, desktop
   icons become a tap grid, and the Start menu becomes a bottom sheet.
   All rules are scoped to html.mobile (set by the head script on small screens),
   so desktop play is untouched. */

html.mobile, html.mobile body{ overscroll-behavior:none; }

/* inputs at ≥16px so iOS doesn't zoom the page on focus */
html.mobile input, html.mobile select, html.mobile button{ font-size:16px; }
html.mobile .btn.tiny{ font-size:12px; padding:4px 8px; }
html.mobile .small{ font-size:12px; }

/* ══ desktop → app grid ══ */
html.mobile #icons{
  position:absolute; left:6px; right:6px; top:6px; bottom:52px;
  flex-direction:row; flex-wrap:wrap; align-content:flex-start; justify-content:space-between;
  gap:2px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
html.mobile .icon{ width:31%; min-width:96px; padding:10px 2px; }
html.mobile .icon .glyph{ font-size:34px; }
html.mobile .icon .label{ font-size:12px; }

/* ══ windows → full-screen apps, one at a time ══ */
html.mobile .window{
  position:fixed !important; left:0 !important; top:0 !important;
  width:100vw !important; height:calc(100% - 46px) !important;
  min-width:0; min-height:0; max-width:none;
}
html.mobile .window:not(.focused){ display:none; }
html.mobile .titlebar{ padding:7px 8px; font-size:14px; }
html.mobile .titlebar .tb-btn{ width:38px; height:32px; font-size:15px; }
html.mobile .titlebar .tb-btn.hide-mobile{ display:none; }
html.mobile .winbody{ padding:10px; -webkit-overflow-scrolling:touch; }
html.mobile .winbody table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
html.mobile .statusbar{ font-size:11px; overflow:hidden; }
html.mobile .kpi-strip .kpi-box{ flex:1 1 44%; min-width:0; }
html.mobile .btn.step2{ min-width:46px; min-height:38px; font-size:16px; }

/* folder windows: comfy grid */
html.mobile .folder-grid .icon{ width:31%; min-width:92px; }

/* ══ taskbar → bottom bar ══ */
html.mobile #taskbar{ height:46px; padding:0 4px; gap:4px; padding-bottom:env(safe-area-inset-bottom, 0); box-sizing:content-box; }
html.mobile #tb-windows, html.mobile #tb-ticker{ display:none; }
html.mobile .tb-spacer{ flex:1; }
html.mobile .start-btn{ height:38px; font-size:14px; padding:0 12px; }
html.mobile .tray-box{ height:38px; gap:4px; padding:2px 6px; }
html.mobile .spd{ width:38px; height:34px; font-size:13px; }
html.mobile .spd.step{ width:auto; padding:0 8px; }
html.mobile #tb-date{ font-size:11px; }
html.mobile #tb-mail{ font-size:14px; }

/* ══ start menu → bottom sheet ══ */
html.mobile #startmenu{
  left:0; right:0; bottom:46px; width:auto; max-height:72vh;
  box-shadow:0 -4px 18px rgba(0,0,0,.4);
}
html.mobile #startmenu .sm-items{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
html.mobile .sm-item{ padding:11px 12px; font-size:14px; }
html.mobile .sm-head{ font-size:11px; padding:8px 12px 3px; }

/* ══ overlays: message boxes, victory, confirm ══ */
html.mobile .victory-box{
  width:auto !important; max-width:96vw; max-height:86vh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
html.mobile .victory-box .content{ padding:14px 14px; }

/* ══ SEJR/OS career screen ══ */
html.mobile .login-box{ width:94vw; max-width:480px; }
html.mobile .login-form input, html.mobile .login-form select{ width:100%; box-sizing:border-box; }
html.mobile .login-form td:first-child{ font-size:12px; white-space:nowrap; padding-right:6px; }
html.mobile .login-buttons{ flex-wrap:wrap; gap:6px; }
html.mobile .login-buttons .btn{ flex:1 1 100%; padding:10px 6px; }
html.mobile #past-careers .pc-row{ font-size:12px !important; }

/* ══ the account gate (public landing) ══ */
html.mobile .gate-wrap{ flex-direction:column; gap:22px; padding:20px 16px 40px; }
html.mobile .gate-hero h1{ font-size:30px; }
html.mobile .gate-hero{ flex:0 0 auto; }
html.mobile .gate-panel{ flex:0 0 auto; width:100%; }
html.mobile .gate-card{ max-width:420px; margin:0 auto; }

/* ══ BSOD & boot ══ */
html.mobile .bsod-inner{ max-width:94vw; padding:14px; }
html.mobile #bsod-text{ font-size:12px; line-height:1.5; }
html.mobile #boot pre{ font-size:11px; }

/* ══ misc breathing room ══ */
html.mobile .fieldset{ padding:12px 8px 8px; }
html.mobile .term{ font-size:11px; overflow-x:auto; }
html.mobile .org-tree{ overflow-x:auto; }