/* ═══════════════════════════════════════════════════════════════════ HFG MOBILE LIVE SCREEN — dark shell (html.mv-mode only) The touch-first counterpart to hfg-base.css. Ported from the field tools app shell (.mapp.dk) via the why-now builder (styles/mobile.css). THE SWITCH CONTRACT ─────────────────── • index.html ships an empty
mount, hidden by default. • scripts/app.js adds `mv-mode` to when the device is touch-first (matchMedia '(hover: none) and (pointer: coarse)') AND the mobile module (window.MobileView) loaded. mv-mode shows #mv and hides the desktop pages + nav. If the mobile module is absent or detection fails, nothing happens — the desktop experience is the fallback and is never broken by this file. • Both experiences render from ONE shared core module (see references/mobile-desktop-pattern.md). Never fork the math. All mobile component rules are scoped under #mv so they can never leak into the desktop composition. ═══════════════════════════════════════════════════════════════════ */ #mv{display:none;} html.mv-mode #mv{display:block;} html.mv-mode #pg1{display:none!important;} html.mv-mode #pg2{display:none!important;} html.mv-mode .site-nav{display:none!important;} html.mv-mode body{background:#0a2138;} /* ── DARK SHELL TOKENS (app-shell .mapp.dk values) ── */ #mv .mapp.dk{ --bg:#0a2138;--bg2:#091d31;--panel:#0e2f4c;--panel2:#123a5c; --line:rgba(150,190,220,.16);--ink:#eef5fc;--ink2:#aecade;--mut:#7794ac; --lime:#bcd64a;--steel:#5fa8c4;--red:#ff6a57;--navy:#0c4a77; /* fallback stack for mobile surfaces (kit family + system fallbacks) */ font-family:"dunbartext",-apple-system,BlinkMacSystemFont,system-ui,sans-serif; min-height:100vh;min-height:100dvh;color:var(--ink); } /* ── SCREEN SHELL (max 560px column, safe-area aware) ── */ #mv .sub{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;color:var(--ink);overflow-x:hidden;max-width:560px;margin:0 auto;background:radial-gradient(120% 50% at 80% -8%,#11385a,#0a2138 52%,#08182a);} #mv .subhdr{padding:max(24px,calc(env(safe-area-inset-top) + 10px)) 14px 10px;display:flex;align-items:center;gap:6px;flex:0 0 auto;} #mv .backb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--panel);border:1px solid var(--line);cursor:pointer;flex:0 0 auto;} #mv .subttl{font-size:18px;font-weight:800;letter-spacing:-.3px;flex:1;text-align:center;padding-right:40px;color:var(--ink);} #mv .subscroll{flex:1;padding:4px 20px 26px;} /* ── SCREEN HERO (icon + title row) ── */ #mv .scr-hero{display:flex;align-items:center;gap:13px;margin:4px 0 16px;} #mv .scr-hero .hic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:var(--lime);background:rgba(188,214,74,.13);border:1px solid var(--line);flex:0 0 auto;} #mv .scr-hero .nm{font-size:24px;font-weight:800;letter-spacing:-.5px;} #mv .scr-hero .bl{font-size:13.5px;color:var(--ink2);margin-top:2px;} /* ── CARDS + COLLAPSIBLE SECTION HEADERS ── */ #mv .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px 16px 6px;margin-bottom:14px;} #mv .ch{display:flex;align-items:center;gap:9px;padding:2px 0 4px;} #mv .ch .ic{color:var(--steel);display:flex;} #mv .ch h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.3px;} #mv .ch.tog,#mv .ch.tog *{cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;} #mv .ch .chgroup{margin-left:auto;display:flex;align-items:center;gap:9px;} #mv .ch .chev{display:flex;align-items:center;color:var(--steel);transition:transform .2s;} #mv .ch .chev.open{transform:rotate(90deg);} #mv .ch .opt{color:var(--mut);font-weight:600;font-size:13px;} #mv .cbody{padding-bottom:8px;} /* ── ROWS + INLINE INPUTS ── */ #mv .row{display:block;padding:14px 0;border-top:1px solid var(--line);} #mv .cbody .row:first-child{border-top:0;} #mv .rlabel{font-size:15px;color:var(--ink2);font-weight:600;} #mv .rlabel.caps{font-size:13px;color:var(--mut);font-weight:800;letter-spacing:.5px;text-transform:uppercase;} #mv .rlabel .opt{color:var(--mut);font-weight:600;font-size:13px;} #mv .rline{display:flex;align-items:center;justify-content:space-between;gap:12px;} #mv .inp{display:flex;align-items:center;gap:4px;} #mv .inp .pre{font-size:18px;color:var(--mut);font-weight:700;} #mv .inp input{width:124px;text-align:right;background:transparent;border:none;outline:none;color:var(--ink);font-size:18px;font-weight:800;font-family:inherit;font-variant-numeric:tabular-nums;} #mv .inp input.w46{width:46px;} #mv .inp input.w72{width:72px;} #mv .inp input.w84{width:84px;} #mv .inp .suf{font-size:16px;color:var(--mut);font-weight:700;} #mv .inp.txt input{width:160px;font-size:16px;font-weight:700;text-align:right;} #mv .inp.txt input::placeholder{color:var(--mut);font-weight:600;} /* ── SEGMENTED PICKERS ── */ #mv .seg{display:flex;background:var(--bg2);border:1px solid var(--line);border-radius:20px;padding:3px;} #mv .seg.w168{width:168px;} #mv .seg.w224{width:224px;} #mv .seg.segflex{flex:1;min-width:0;} #mv .seg button{flex:1;border:none;background:transparent;color:var(--ink2);font-size:14px;font-weight:800;padding:8px 4px;border-radius:16px;cursor:pointer;font-family:inherit;white-space:nowrap;} #mv .seg button.on{background:var(--steel);color:#06243c;box-shadow:0 1px 3px rgba(0,0,0,.2);} /* ── PIN INPUTS (bordered inline value chips) ── */ #mv .pin{display:flex;align-items:center;gap:3px;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:7px 11px;} #mv .pin input{width:66px;text-align:right;background:transparent;border:none;outline:none;color:var(--ink);font-size:16px;font-weight:800;font-family:inherit;font-variant-numeric:tabular-nums;} #mv .pin input.w44{width:44px;} #mv .pin input:disabled{color:var(--mut);} #mv .pin .su{font-size:13px;color:var(--mut);font-weight:700;} /* ── PRIMARY ACTION (full-width lime button) ── */ #mv .mbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;border-radius:16px;padding:16px;background:var(--lime);color:#06243c;font-size:16px;font-weight:800;font-family:inherit;cursor:pointer;margin:6px 0 14px;} #mv .mbtn:active{transform:translateY(1px);} #mv .mbtn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line);}