/* ============================================================
   Basic (phone-only) field mode -- an ASIAIR-style curated shell.
   Everything here is scoped under .basic-shell / .nav-field and
   only renders when the app is in basic mode (phones only), so the
   desktop and tablet layouts are untouched.
   ============================================================ */

.basic-shell{
    position:fixed; inset:0; z-index:800; background:#04060c;
    color:var(--text, #e8edf7);
    /* No font-family here: inherit the user's chosen UI font from body. */
    -webkit-user-select:none; user-select:none;
    --bs-panel:rgba(14,20,34,.82); --bs-border:#243049; --bs-muted:#8a97b0;
    --bs-accent:#4c8dff; --bs-accent2:#6cc4ff; --bs-ok:#37c871;
    --bs-warn:#f0b429; --bs-danger:#ff5d5d; --bs-chip:#1a2740;
}
/* Self-contained sizing so control heights are exact regardless of any global
   reset (the standardized 32px pills / 44px squares stay pixel-consistent). */
.basic-shell *, .basic-shell *::before, .basic-shell *::after{box-sizing:border-box}
.basic-shell .bs-num{font-variant-numeric:tabular-nums}

/* live image: the relocated .preview-area fills this slot */
.basic-shell #basicImageSlot{position:absolute; inset:0; overflow:hidden;
    background:radial-gradient(120% 90% at 60% 40%, #0b1424 0%, #05080f 70%); z-index:1}
.basic-shell #basicImageSlot .preview-area,
.basic-shell #basicImageSlot .af-preview-area{position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important; margin:0 !important}
/* the zoomed-star inset defaults bottom-right (clashes with the rail/bottom bar);
   move it bottom-left, clear of the left rail. */
.basic-shell #basicImageSlot .af-star-zoom{left:60px !important; bottom:56px !important;
    right:auto !important; top:auto !important; z-index:21}
/* Strip the desktop preview chrome that rides along with the relocated area;
   keep the canvases and the centered empty-state (.preview-overlay) message. */
.basic-shell #basicImageSlot .pz-toolbar,
.basic-shell #basicImageSlot .histo-panel,
.basic-shell #basicImageSlot .preview-overlay-controls,
.basic-shell #basicImageSlot .preview-overlay-info,
.basic-shell #basicImageSlot .quick-controls{display:none !important}

/* top bar */
.basic-shell .bs-topbar{position:absolute; top:0; left:0; right:0; height:44px; display:flex;
    align-items:center; justify-content:center; gap:8px; z-index:30; pointer-events:none}
.basic-shell .bs-modepill{pointer-events:auto; display:flex; align-items:center; gap:8px; height:32px;
    padding:0 14px; background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:16px;
    backdrop-filter:blur(8px); font-weight:600; font-size:14px; color:var(--text)}
.basic-shell .bs-modepill .bs-caret{color:var(--bs-muted); font-size:11px}
/* guide (left) + setup gear (right) flank the centered mode pill */
.basic-shell .bs-topicn{pointer-events:auto; width:32px; height:32px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--text); font-size:15px; backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center; padding:0; line-height:1}
.basic-shell .bs-topicn.on{border-color:var(--bs-accent2); color:var(--bs-accent2)}
.basic-shell .bs-temp{pointer-events:auto; position:absolute; left:8px; top:6px; height:32px; display:flex;
    align-items:center; gap:6px; padding:0 10px; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:16px; font-size:12px; color:var(--bs-accent2); backdrop-filter:blur(8px); z-index:31}
.basic-shell .bs-status{pointer-events:auto; position:absolute; right:8px; top:6px; height:32px; display:flex;
    align-items:center; gap:6px; padding:0 10px; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:16px; font-size:12px; color:var(--bs-muted); backdrop-filter:blur(8px); z-index:31}
.basic-shell .bs-status b{color:var(--text); font-weight:600}

.basic-shell .bs-modemenu{position:absolute; top:44px; left:50%; transform:translateX(-50%); z-index:40;
    background:#0e1422; border:1px solid var(--bs-border); border-radius:12px; overflow:hidden;
    box-shadow:0 12px 40px rgba(0,0,0,.55); min-width:160px}
.basic-shell .bs-modemenu button{display:flex; width:100%; align-items:center; gap:10px; background:none;
    border:0; color:var(--text); padding:12px 14px; font-size:14px; text-align:left}
.basic-shell .bs-modemenu button .bs-em{width:20px; text-align:center}
.basic-shell .bs-modemenu button.on{background:rgba(76,141,255,.16); color:var(--bs-accent2)}
.basic-shell .bs-modemenu button:active{background:rgba(255,255,255,.06)}

/* rails: the container spans full height but only holds buttons at the top, so
   let its empty area pass clicks through to the mount pad flush beneath it. */
.basic-shell .bs-rail{position:absolute; top:52px; bottom:52px; display:flex; flex-direction:column;
    gap:10px; z-index:25; pointer-events:none}
.basic-shell .bs-rail > *{pointer-events:auto}
.basic-shell .bs-rail.left{left:8px}
.basic-shell .bs-rail.right{right:8px; align-items:center}
.basic-shell .bs-icn{width:44px; height:44px; border-radius:12px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--text); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:2px; backdrop-filter:blur(8px); font-size:10px; line-height:1}
.basic-shell .bs-icn .bs-big{font-size:18px}
.basic-shell .bs-icn.on{border-color:var(--bs-ok); color:var(--bs-ok)}
.basic-shell .bs-icn:active{transform:scale(.94)}

/* exposure stack + shutter */
.basic-shell .bs-expcol{display:flex; flex-direction:column; gap:8px; align-items:center}
.basic-shell .bs-exp{width:56px; border-radius:12px; background:var(--bs-panel); border:1px solid var(--bs-border);
    padding:6px 4px; text-align:center; backdrop-filter:blur(8px); color:var(--text)}
.basic-shell .bs-exp .bs-k{font-size:9px; color:var(--bs-muted); letter-spacing:.06em}
.basic-shell .bs-exp .bs-v{font-size:14px; font-weight:700; margin-top:1px}
.basic-shell .bs-shutter{width:66px; height:66px; border-radius:50%; border:4px solid #fff;
    background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; margin-top:4px}
.basic-shell .bs-shutter .bs-core{width:44px; height:44px; border-radius:50%; background:#fff; transition:.15s}
.basic-shell .bs-shutter.looping .bs-core,.basic-shell .bs-shutter.busy .bs-core{border-radius:8px;
    width:28px; height:28px; background:var(--bs-danger)}
.basic-shell .bs-shutter:active{transform:scale(.95)}

/* Controls inherit the user's UI font (buttons/inputs don't inherit by default). */
.basic-shell button, .basic-shell input, .basic-shell select{font-family:inherit}

/* mount pad -- bottom-left, just right of the icon rail (clear of the shutter
   on the right). The d-pad expands to the right when opened. */
.basic-shell .bs-mount{position:absolute; left:8px; right:auto; bottom:56px; z-index:22; display:flex; align-items:flex-end; gap:6px}
.basic-shell .bs-mount .bs-grid{display:grid; grid-template-columns:repeat(3,42px); grid-template-rows:repeat(3,42px);
    gap:5px; background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px; padding:8px; backdrop-filter:blur(8px)}
.basic-shell .bs-mount .bs-grid button{border:0; border-radius:9px; background:var(--bs-chip); color:var(--text); font-size:16px}
.basic-shell .bs-mount .bs-grid button.mid{background:transparent; font-size:10px; color:var(--bs-muted)}
.basic-shell .bs-mount .bs-grid button:active{background:var(--bs-accent); color:#fff}
.basic-shell .bs-mount .bs-side{display:flex; flex-direction:column; gap:6px; align-items:flex-start}
.basic-shell .bs-mount .bs-pill{background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px;
    padding:6px 8px; font-size:11px; text-align:center; min-width:58px; backdrop-filter:blur(8px); color:var(--text)}
.basic-shell .bs-mount .bs-pill.on{border-color:var(--bs-ok); color:var(--bs-ok)}
.basic-shell .bs-mount.mp-collapsed .bs-grid{display:none}

/* bottom bar */
.basic-shell .bs-bottom{position:absolute; left:0; right:0; bottom:0; height:48px; display:flex; align-items:center;
    gap:8px; padding:0 8px; z-index:28; pointer-events:none}
.basic-shell .bs-bottom > *{pointer-events:auto}
.basic-shell .bs-chip{height:32px; padding:0 10px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; display:flex; align-items:center; gap:6px; backdrop-filter:blur(8px)}
.basic-shell .bs-dot{width:8px; height:8px; border-radius:50%; background:var(--bs-ok); box-shadow:0 0 8px var(--bs-ok)}
.basic-shell .bs-dot.off{background:#4a5673; box-shadow:none}
.basic-shell .bs-auto{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-auto.on{border-color:var(--bs-ok); color:var(--bs-ok)}
.basic-shell .bs-full{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; backdrop-filter:blur(8px)}
/* bottom-right mount actions (Home / Park / Sync) */
.basic-shell .bs-mountacts{margin-left:auto; display:flex; gap:8px}
.basic-shell .bs-mbtn{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--text); font-size:12px; font-weight:600; font-family:inherit;
    backdrop-filter:blur(8px); white-space:nowrap}

/* EXP/GAIN inline stepper: tap the box to expand it (grows left over the image
   so it doesn't reflow the rail); tap the label to collapse. */
.basic-shell .bs-expwrap{position:relative; width:56px}
.basic-shell .bs-exp-open{position:absolute; top:0; right:0; width:210px; z-index:26; display:flex;
    flex-direction:column; gap:6px; background:var(--bs-panel); border:1px solid var(--bs-accent);
    border-radius:12px; padding:6px; backdrop-filter:blur(8px); box-shadow:0 8px 28px rgba(0,0,0,.5)}
.basic-shell .bs-k-btn{background:none; border:0; color:var(--bs-accent2); font-size:11px;
    letter-spacing:.06em; font-weight:700; padding:3px 2px; align-self:center}
.basic-shell .bs-stepper{display:flex; align-items:center; gap:6px}
.basic-shell .bs-stepbtn{width:42px; height:42px; border-radius:10px; background:var(--bs-chip); border:0;
    color:var(--text); font-size:22px; font-weight:700; flex:none}
.basic-shell .bs-stepbtn:active{background:var(--bs-accent); color:#fff}
.basic-shell .bs-stepinput{flex:1; min-width:0; height:42px; text-align:center; font-size:18px; font-weight:700;
    background:#070b14; border:1px solid var(--bs-border); border-radius:10px; color:var(--text)}

/* ---- Focus screen ---- */
.basic-shell .bs-status.run b{color:var(--bs-warn)}
.basic-shell .bs-af{width:92px; height:52px; margin-top:4px; border:0; border-radius:14px;
    background:var(--bs-accent); color:#fff; font-weight:800; font-size:15px; box-shadow:0 6px 18px rgba(76,141,255,.35)}
.basic-shell .bs-af.running{background:var(--bs-danger); box-shadow:0 6px 18px rgba(255,93,93,.35)}
.basic-shell .bs-af:active{transform:scale(.96)}
.basic-shell .bs-afprog{position:absolute; right:8px; top:38px; width:120px; height:6px; border-radius:3px;
    background:#1a2740; overflow:hidden; z-index:31}
.basic-shell .bs-afprog i{display:block; height:100%; background:var(--bs-accent2); transition:width .2s}
/* focus nudge: bottom-right, clear of the mount pad + right rail; compact */
.basic-shell .bs-nudge{position:absolute; right:104px; bottom:56px; z-index:23;
    display:flex; align-items:center; gap:5px; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:14px; padding:6px 8px; backdrop-filter:blur(8px)}
.basic-shell .bs-nudge button{min-width:36px; height:36px; border:0; border-radius:9px; background:var(--bs-chip);
    color:var(--text); font-size:15px; font-weight:700}
.basic-shell .bs-nudge button:active{background:var(--bs-accent); color:#fff}
.basic-shell .bs-nudge button:disabled{opacity:.4}
/* Stop, in the phone shell's focus pad: same square as the arrows, red so it
   reads as the interruption it is. */
.basic-shell .bs-nudge .bs-nudgestop{
    background:rgba(255,93,93,.18); border-color:var(--bs-danger); color:var(--bs-danger);
    font-size:12px;
}
.basic-shell .bs-nudgehide{min-width:26px !important; height:26px !important; background:transparent !important;
    color:var(--bs-muted) !important; font-size:15px !important; align-self:flex-start}
.basic-shell .bs-focusreopen{position:absolute; right:104px; bottom:56px; z-index:23; height:32px; padding:0 14px;
    border-radius:16px; background:var(--bs-panel); border:1px solid var(--bs-border); color:var(--text);
    font-size:12px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-pos{min-width:58px; text-align:center}
.basic-shell .bs-pos .bs-pk{font-size:9px; color:var(--bs-muted)}
.basic-shell .bs-pos .bs-pv{font-size:14px; font-weight:700}
.basic-shell #basicCurveSlot{position:absolute; left:60px; top:52px; width:200px; height:92px; z-index:22;
    background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:12px; padding:6px; backdrop-filter:blur(8px)}
.basic-shell #basicCurveSlot .af-chart{width:100%; height:100%; margin:0}
.basic-shell #basicCurveSlot .chart-container{position:relative; width:100%; height:100%}
.basic-shell #basicCurveSlot .af-chart-legend{display:none}
.basic-shell .bs-chip b{color:var(--text); font-weight:700}

/* ---- Autorun screen ---- */
.basic-shell .bs-seqp{position:absolute; left:60px; top:52px; bottom:104px; width:340px; max-width:52vw; z-index:22;
    display:flex; flex-direction:column; background:var(--bs-panel); border:1px solid var(--bs-border);
    border-radius:14px; backdrop-filter:blur(8px); overflow:hidden}
.basic-shell .bs-seqh{display:flex; align-items:center; justify-content:space-between; padding:9px 12px;
    border-bottom:1px solid var(--bs-border); font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-seqh b{color:var(--text)}
.basic-shell .bs-seqadd{height:32px; padding:0 12px; border-radius:16px; background:var(--bs-accent); border:0; color:#fff; font-weight:700; font-size:12px}
.basic-shell .bs-seql{flex:1; overflow-y:auto; padding:6px}
.basic-shell .bs-seqrow{display:flex; align-items:center; gap:8px; padding:8px; border-radius:10px; margin-bottom:6px;
    background:var(--bs-chip); position:relative; overflow:hidden}
.basic-shell .bs-seqrow.run{border:1px solid var(--bs-accent)}
.basic-shell .bs-seqen{width:22px; height:22px; border-radius:6px; border:1px solid var(--bs-border); background:#0a1120;
    flex:none; color:var(--bs-ok); font-size:12px; font-weight:700}
.basic-shell .bs-seqen.off{color:transparent}
.basic-shell .bs-seqmeta{flex:1; min-width:0}
.basic-shell .bs-seqnm{display:block; width:100%; text-align:left; background:none; border:0; padding:0;
    color:var(--text); font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.basic-shell .bs-seqnminput{width:100%; background:#070b14; border:1px solid var(--bs-accent); border-radius:6px;
    color:var(--text); font-size:13px; font-weight:700; padding:2px 6px}
.basic-shell .bs-seqsub{font-size:11px; color:var(--bs-muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.basic-shell .bs-typ{font-size:10px; padding:2px 6px; border-radius:8px; background:#0a1120; color:var(--bs-accent2); border:1px solid transparent}
.basic-shell .bs-typ:active{border-color:var(--bs-accent2)}
.basic-shell .bs-seqexp{background:none; border:0; padding:0; color:var(--bs-accent2); font:inherit;
    text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px}
.basic-shell .bs-seqexpinput, .basic-shell .bs-seqgaininput{width:66px; background:#070b14; border:1px solid var(--bs-accent);
    border-radius:6px; color:var(--text); font-size:11px; font-weight:700; padding:1px 5px}
.basic-shell .bs-seqgaininput{width:52px}
.basic-shell .bs-seqauto{font-size:10px; padding:2px 6px; border-radius:8px; background:#0a1120; color:var(--bs-muted); border:1px solid transparent}
.basic-shell .bs-seqauto.on{color:var(--bs-ok); border-color:var(--bs-ok)}
.basic-shell .bs-seqhide{background:none; border:0; color:var(--bs-muted); font-size:15px; padding:0 6px 0 0; margin-right:2px}
.basic-shell .bs-seqreopen{position:absolute; left:60px; top:52px; z-index:22; height:32px; padding:0 14px;
    border-radius:17px; background:var(--bs-panel); border:1px solid var(--bs-border); color:var(--text);
    font-size:13px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-seqcnt{display:flex; align-items:center; gap:4px; flex:none}
.basic-shell .bs-seqcnt button{width:30px; height:30px; border:0; border-radius:8px; background:#0a1120; color:var(--text); font-size:16px; font-weight:700}
.basic-shell .bs-seqcnt button:disabled{opacity:.4}
.basic-shell .bs-seqcnt span{min-width:32px; text-align:center; font-size:14px; font-weight:700}
.basic-shell .bs-seqrm{width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:var(--bs-muted); font-size:16px; flex:none}
.basic-shell .bs-seqrm:disabled{opacity:.3}
.basic-shell .bs-seqempty{padding:20px 12px; text-align:center; color:var(--bs-muted); font-size:12px}

.basic-shell .bs-autobar{position:absolute; left:0; right:0; bottom:0; z-index:28; padding:8px; display:flex;
    flex-direction:column; gap:8px; background:linear-gradient(0deg, rgba(4,6,12,.92), rgba(4,6,12,0))}
.basic-shell .bs-pbar{height:8px; border-radius:4px; background:#17203a; overflow:hidden}
.basic-shell .bs-pbar i{display:block; height:100%; background:linear-gradient(90deg, var(--bs-accent), var(--bs-accent2)); transition:width .3s}
.basic-shell .bs-prow{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.basic-shell .bs-pinfo{font-size:13px; color:var(--bs-muted)}
.basic-shell .bs-pinfo b{color:var(--text); font-weight:700}
.basic-shell .bs-spacer{flex:1}
/* transport buttons match the bottom-bar action pill (bs-conn / bs-full): 32px */
.basic-shell .bs-tbtn{height:32px; padding:0 14px; border:0; border-radius:16px; font-weight:700; font-size:13px}
.basic-shell .bs-tstart{background:var(--bs-ok); color:#05140b}
.basic-shell .bs-tstart:disabled{opacity:.4}
.basic-shell .bs-tpause{background:var(--bs-warn); color:#20160a}
.basic-shell .bs-tstop{background:var(--bs-danger); color:#fff}

/* ---- Portrait / narrow phones: keep the bottom bar from overflowing ---- */
@media (max-width: 560px){
    .basic-shell .bs-bottom{gap:6px; padding:0 6px}
    /* collapse the connection chips to their status dot so the action buttons
       (Full Mode) stay fully on screen */
    .basic-shell .bs-bottom .bs-chip:not(.bs-num){font-size:0; padding:0 9px; gap:0}
    .basic-shell .bs-bottom .bs-chip.bs-num{font-size:11px; padding:0 8px}
    .basic-shell .bs-auto{padding:0 9px; font-size:11px}
    .basic-shell .bs-full{padding:0 10px; font-size:12px}
    .basic-shell .bs-seqp{bottom:120px}
}

/* ---- Guide screen ---- */
.basic-shell #basicImageSlot .phd2-cam{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; margin:0 !important}
.basic-shell #basicImageSlot .phd2-zoom-ctl, .basic-shell #basicImageSlot .guide-bc{display:none !important}
.basic-shell #basicGuideGraphSlot{position:absolute; left:60px; right:80px; bottom:48px; height:110px; z-index:22;
    background:linear-gradient(0deg, rgba(4,6,12,.94), rgba(4,6,12,.35)); border-radius:12px; padding:4px 8px}
.basic-shell #basicGuideGraphSlot .phd2-graph{position:relative !important; width:100% !important; height:100% !important; margin:0 !important}
.basic-shell #basicGuideGraphSlot .phd2-graph-canvas{width:100% !important; height:100% !important}
.basic-shell #basicGuideGraphSlot .guide-clearhist{display:none !important}
.basic-shell .bs-gcol{display:flex; flex-direction:column; gap:8px; align-items:center}
.basic-shell .bs-gbtn{width:64px; border-radius:12px; background:var(--bs-panel); border:1px solid var(--bs-border);
    color:var(--text); padding:8px 4px; font-size:11px; font-weight:600; backdrop-filter:blur(8px); line-height:1.2}
.basic-shell .bs-gbtn .bs-big{font-size:16px; display:block; margin-bottom:3px}
.basic-shell .bs-gbtn:disabled{opacity:.4}
.basic-shell .bs-gmain{width:64px; height:56px; border:0; border-radius:14px; background:var(--bs-ok); color:#05140b; font-weight:800; font-size:14px}
.basic-shell .bs-gmain.stop{background:var(--bs-danger); color:#fff}

/* equipment-name chips: truncate long device names */
.basic-shell .bs-name{max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle}

/* ---- Live stacking screen ---- */
.basic-shell .bs-lreset{margin-top:2px; height:32px; padding:0 12px; border-radius:16px; background:var(--bs-panel);
    border:1px solid var(--bs-border); color:var(--bs-muted); font-size:12px; font-weight:600; backdrop-filter:blur(8px)}
.basic-shell .bs-lhud{position:absolute; left:60px; top:52px; width:200px; z-index:22; background:var(--bs-panel);
    border:1px solid var(--bs-border); border-radius:14px; padding:10px 12px; backdrop-filter:blur(8px)}
.basic-shell .bs-lsnr{display:flex; align-items:baseline; gap:8px}
.basic-shell .bs-lsnr .v{font-size:28px; font-weight:800; color:var(--bs-accent2)}
.basic-shell .bs-lsnr .l{font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-lrow{display:flex; gap:14px; margin-top:5px; font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-lrow b{color:var(--text); font-weight:700}
.basic-shell .bs-leta{margin-top:5px; font-size:12px; color:var(--bs-accent2)}
.basic-shell .bs-lstate{display:inline-block; margin-top:7px; font-size:11px; font-weight:700; color:var(--bs-ok)}
.basic-shell .bs-lstate.off{color:var(--bs-muted)}

.basic-shell .bs-lreset.on{border-color:var(--bs-ok); color:var(--bs-ok)}

/* ---- Field UI: HUD extras, live actions, mount menu, device chips ---- */
.basic-shell .bs-tcool{color:var(--bs-muted); font-size:11px}
.basic-shell .bs-sprog{font-size:11px; color:var(--bs-muted); margin-top:-2px}
.basic-shell .bs-lacts{display:flex; flex-direction:column; gap:6px; align-items:center}
.basic-shell .bs-switch{display:flex; align-items:center; gap:6px}
.basic-shell .bs-knob{width:22px; height:12px; border-radius:6px; background:#4a5673; position:relative; flex:0 0 auto}
.basic-shell .bs-knob::after{content:""; position:absolute; top:2px; left:2px; width:8px; height:8px; border-radius:50%;
    background:#c9d3e6; transition:left .15s}
.basic-shell .bs-switch.on .bs-knob{background:var(--bs-ok)}
.basic-shell .bs-switch.on .bs-knob::after{left:12px; background:#05140b}
.basic-shell .bs-cico{font-size:12px; line-height:1}
.basic-shell .bs-chip{cursor:pointer}
.basic-shell .bs-mountacts{position:relative}
.basic-shell .bs-mbtn.on{border-color:var(--bs-accent2); color:var(--bs-accent2)}
.basic-shell .bs-mountmenu{position:absolute; right:0; bottom:40px; min-width:170px; display:flex; flex-direction:column;
    gap:6px; padding:8px; background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px;
    backdrop-filter:blur(10px); z-index:45}
.basic-shell .bs-mountmenu button{height:36px; border-radius:10px; background:var(--bs-chip); border:0; color:var(--text);
    font-size:13px; font-weight:600; text-align:left; padding:0 12px; font-family:inherit}
.basic-shell .bs-mwarn{font-size:11px; color:var(--bs-warn); padding:2px 4px 4px}

.basic-shell .bs-full{white-space:nowrap}

/* Narrow phones: the chip names collapse (rule above) but the icons stay; the
   cooler keeps its power and drops the set-point, which crowded the mode pill. */
@media (max-width: 560px){
    .basic-shell .bs-bottom .bs-chip .bs-cico{font-size:13px; margin-left:5px}
    .basic-shell .bs-bottom .bs-chip:not(.bs-num){padding:0 7px}
    .basic-shell .bs-mbtn .bs-mico{display:none}
    .basic-shell .bs-mbtn{padding:0 10px}
    .basic-shell .bs-temp .bs-tcool:first-of-type{display:none}
}

/* LIVE: one line of counts instead of the quality card. */
.basic-shell .bs-lhud.bs-lhud-min{width:auto; padding:6px 12px; border-radius:16px}
.basic-shell .bs-lhud.bs-lhud-min .bs-lrow{margin-top:0; gap:12px; white-space:nowrap}

/* Short landscape screens (a tablet on its side): the right rail no longer
   fits its full column, and the lowest buttons slid under the bottom bar.
   Tighten the column and put the stack actions in one row of icons. */
@media (max-height: 560px){
    .basic-shell .bs-rail{gap:6px}
    .basic-shell .bs-exp{padding:3px 4px}
    .basic-shell .bs-exp .bs-v{font-size:13px}
    .basic-shell .bs-shutter{width:56px; height:56px}
    .basic-shell .bs-shutter .bs-core{width:36px; height:36px}
    .basic-shell .bs-lacts{flex-direction:row; gap:4px}
    .basic-shell .bs-lacts .bs-lt{display:none}
    .basic-shell .bs-lacts .bs-lreset{padding:0 9px; height:30px}
}

/* mount speed slider (in the mount pad side column) */
.basic-shell .bs-spd{background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:10px; padding:5px 7px;
    min-width:112px; backdrop-filter:blur(8px)}
.basic-shell .bs-spdh{display:flex; justify-content:space-between; font-size:10px; color:var(--bs-muted)}
.basic-shell .bs-spdh b{color:var(--bs-accent2)}
.basic-shell .bs-spd input{width:100%; margin:3px 0 0; accent-color:var(--bs-accent)}
.basic-shell .bs-nudgelbl{font-size:10px; color:var(--bs-muted); align-self:center; margin-right:2px}

/* ---- Video screen ---- */
.basic-shell .bs-recshutter{border-color:var(--bs-danger); background:rgba(255,93,93,.15)}
.basic-shell .bs-recshutter .bs-core{background:var(--bs-danger)}
.basic-shell .bs-vsh{display:flex; justify-content:space-between; font-size:11px; color:var(--bs-muted)}
.basic-shell .bs-vsh b{color:var(--bs-ok)}
.basic-shell .bs-vshbar{height:8px; border-radius:4px; background:#17203a; overflow:hidden; margin-top:4px}
.basic-shell .bs-vshbar i{display:block; height:100%; background:linear-gradient(90deg,var(--bs-warn),var(--bs-ok))}
.basic-shell .bs-lstate.rec{color:var(--bs-danger)}

/* ---- Sky screen ---- */
/* the relocated stellarium iframe fills the image slot */
#basicImageSlot #skyFrame{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.basic-shell .bs-skysearch{position:absolute; left:8px; top:52px; z-index:26; display:flex; gap:6px}
.basic-shell .bs-skyinput{height:36px; width:200px; max-width:52vw; border-radius:12px; border:1px solid var(--bs-border);
    background:var(--bs-panel); color:var(--text); padding:0 12px; font-size:14px; font-family:inherit; backdrop-filter:blur(8px)}
.basic-shell .bs-skygo{width:36px; height:36px; border-radius:12px; border:1px solid var(--bs-border);
    background:var(--bs-panel); color:var(--text); font-size:15px; backdrop-filter:blur(8px)}
.basic-shell .bs-skyresults{position:absolute; left:8px; top:94px; width:250px; max-width:70vw; z-index:26;
    background:#0e1422; border:1px solid var(--bs-border); border-radius:12px; overflow:hidden; max-height:46vh; overflow-y:auto}
.basic-shell .bs-skyres{display:block; width:100%; text-align:left; padding:9px 11px; border:0; border-bottom:1px solid var(--bs-border);
    background:transparent; color:var(--text)}
.basic-shell .bs-skyres:last-child{border-bottom:0}
.basic-shell .bs-skyres-nm{font-size:13px; font-weight:700; display:block}
.basic-shell .bs-skyres-sub{font-size:11px; color:var(--bs-muted); display:block; margin-top:1px}
.basic-shell .bs-tcard{position:absolute; right:8px; top:52px; width:210px; max-width:64vw; z-index:24;
    background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px; padding:10px 12px; backdrop-filter:blur(8px)}
.basic-shell .bs-tnm{font-size:16px; font-weight:800}
.basic-shell .bs-tsub{font-size:11px; color:var(--bs-muted); margin-top:2px}
.basic-shell .bs-tgrid{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; font-size:12px; color:var(--bs-muted)}
.basic-shell .bs-tgrid b{color:var(--text); font-weight:700; display:block}
.basic-shell .bs-tgoto{margin-top:10px; width:100%; height:44px; border:0; border-radius:12px; background:var(--bs-accent);
    color:#fff; font-weight:800; font-size:14px}
.basic-shell .bs-tgoto:disabled{opacity:.45}
.basic-shell .bs-tgoto2{margin-top:6px; width:100%; height:32px; border:1px solid var(--bs-border); border-radius:12px;
    background:var(--bs-panel); color:var(--bs-muted); font-size:12px; font-weight:600}
.basic-shell .bs-tgoto2:disabled{opacity:.45}

/* ---- Config / Setup screen ---- */
.basic-shell .bs-config{position:absolute; top:44px; left:0; right:0; bottom:48px; z-index:20;
    overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px; display:flex; flex-direction:column; gap:12px;
    background:radial-gradient(120% 90% at 60% 30%, #0b1424 0%, #05080f 70%)}
.basic-shell .bs-card{background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px;
    padding:12px 13px; backdrop-filter:blur(8px); display:flex; flex-direction:column; gap:9px}
.basic-shell .bs-cardh{display:flex; align-items:center; justify-content:space-between; gap:8px}
.basic-shell .bs-cardt{font-size:14px; font-weight:800; color:var(--text)}
.basic-shell .bs-cbtn{height:34px; padding:0 13px; border-radius:12px; background:var(--bs-chip);
    border:1px solid var(--bs-border); color:var(--text); font-size:13px; font-weight:600; font-family:inherit; white-space:nowrap}
.basic-shell .bs-cbtn.primary{background:var(--bs-accent); border-color:var(--bs-accent); color:#fff}
.basic-shell .bs-cbtn.danger{border-color:var(--bs-danger); color:var(--bs-danger)}
.basic-shell .bs-cbtn.xs{height:30px; padding:0 10px; font-size:12px}
.basic-shell .bs-cbtn:disabled{opacity:.45}
.basic-shell .bs-cbtns{display:flex; flex-wrap:wrap; gap:8px}
.basic-shell .bs-crow{display:flex; align-items:center; gap:8px; font-size:13px; flex-wrap:wrap}
.basic-shell .bs-indistat{display:inline-flex; align-items:center; gap:8px}
.basic-shell .bs-clbl{color:var(--bs-muted)}
.basic-shell .bs-cval{color:var(--text); font-weight:600}
.basic-shell .bs-cval.bs-mono, .basic-shell .bs-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
    color:var(--bs-muted); word-break:break-all}
.basic-shell .bs-cdev{display:flex; align-items:center; gap:8px; font-size:13px; padding:2px 0}
.basic-shell .bs-cdlbl{color:var(--bs-muted); min-width:66px}
.basic-shell .bs-cdname{color:var(--text); font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none}
.basic-shell .bs-cdsel{flex:1; min-width:0; height:32px; border-radius:10px; border:1px solid var(--bs-border);
    background:#0e1422; color:var(--text); padding:0 8px; font-size:12px; font-family:inherit; appearance:auto}
.basic-shell .bs-cdsel:disabled{opacity:.7}
.basic-shell .bs-cdev .bs-cbtn{flex:none}
.basic-shell .bs-cdev .bs-cfg{margin-left:auto}
/* connect/disconnect button: fixed width so Connect and Disconnect match */
.basic-shell .bs-cdev .bs-cbtn:not(.bs-cfg){min-width:104px; text-align:center; justify-content:center}

/* per-device settings modal (hosts the relocated full-UI equipment card) */
.basic-shell .bs-modal{position:fixed; inset:0; z-index:850; background:rgba(4,6,12,.72);
    display:flex; align-items:center; justify-content:center; padding:10px; backdrop-filter:blur(4px)}
.basic-shell .bs-modalcard{width:100%; max-width:min(760px,100%); max-height:100%; display:flex; flex-direction:column;
    background:var(--bs-panel); border:1px solid var(--bs-border); border-radius:14px; overflow:hidden; backdrop-filter:blur(10px)}
.basic-shell .bs-modalhead{display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:12px 14px; border-bottom:1px solid var(--bs-border); font-size:15px; font-weight:800; color:var(--text)}
.basic-shell .bs-modalbody{overflow:auto; -webkit-overflow-scrolling:touch; padding:12px}
.basic-shell #basicEquipModalBody .equip-card{width:100% !important; max-width:100% !important; margin:0 !important}
.basic-shell .bs-cnote{font-size:11px; color:var(--bs-muted); line-height:1.35}
.basic-shell .bs-cnote.ok{color:var(--bs-ok)} .basic-shell .bs-cnote.warn{color:var(--bs-warn)}
.basic-shell .bs-clink{background:none; border:0; color:var(--bs-accent2); font-size:11px; font-weight:700; font-family:inherit; padding:0; text-decoration:underline}
.basic-shell .bs-cinput{width:100%; height:38px; border-radius:12px; border:1px solid var(--bs-border);
    background:#0e1422; color:var(--text); padding:0 12px; font-size:14px; font-family:inherit}
.basic-shell select.bs-cinput{appearance:auto}
.basic-shell .bs-cinrow{display:flex; gap:8px; align-items:center}
.basic-shell .bs-cinrow .bs-cinput{flex:1; min-width:0}
.basic-shell .bs-cinrow .bs-cbtn{flex:none}
.basic-shell .bs-cfield{display:flex; flex-direction:column; gap:4px}
.basic-shell .bs-cflbl{font-size:11px; color:var(--bs-muted)}
.basic-shell .bs-ccheck{display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text)}
.basic-shell .bs-ccheck input{width:18px; height:18px; accent-color:var(--bs-accent)}
.basic-shell .bs-scalerow{display:flex; align-items:center; gap:10px}
.basic-shell .bs-scaleslider{flex:1; accent-color:var(--bs-accent)}

/* Full-UI modals reused inside basic mode assume the desktop status/activity
   bars (their overlays inset by --statusbar-height/--activitybar-height) and
   tall 84vh cards, so on a phone the card footer clips off-screen. Pin the
   overlay to the whole viewport and let the card body scroll instead. */
body.basic-active .confirm-modal-overlay,
body.basic-active .editor-export-backdrop,
body.basic-active .modal-overlay{top:0; bottom:0; left:0; right:0; padding:8px}
body.basic-active .hostdlg-card{height:auto; max-height:100%}

.basic-shell :focus-visible{outline:2px solid var(--bs-accent2); outline-offset:2px}

/* return-to-field pill, shown on a phone that escaped to the full UI */
/* Return to field mode. Was a fixed pill at bottom-left, which on a phone
   overlapped the first buttons of the nav strip (Home, Rigs) and took their
   taps; it is the strip's first button now. Accent tint because it is an
   action, not a tab, and nothing ever marks it active. */
.nav-btn.nav-field, .nav-btn.nav-field:hover{color:var(--accent)}