/* ---------- the slim open-Duo bar (Drew, 2026-11-10 19:22: "Icons B slim bar A"; proposals/nav-icons.html) ----------
   js/navbar.js sets html.slim-bar + slim-port / slim-land on a phone-layout screen 600 px+ wide (the open Duo); inside the
   native shell only once the shell has hidden its own bars (html.web-bars). Folded (466) and the Mac: unchanged. */

/* the shell hides the web's bar (bridge + app.css, !important); when it hands the bar to the web, show it again */
html.in-shell.web-bars .phone .tabbar { display: flex !important; }
html.in-shell.web-bars .phone .fab { display: flex !important; }
html.in-shell.web-bars.side-rail .phone .rail-top { display: flex !important; }
html.in-shell.web-bars.slim-port .phone .fab-find { display: flex !important; }

/* ---- portrait: one 44 pt row at the bottom; tabs left, Search and + right ---- */
html.slim-port .phone .tabbar { left: calc(12px + var(--sal)); bottom: calc(var(--sab) + 8px); height: 44px; box-sizing: border-box; padding: 2px; border-radius: 22px; }
html.slim-port .phone .tabbar button { width: 56px; height: 40px; border-radius: 20px; }
html.slim-port .phone .tab-ind { left: 2px; top: 2px; width: 56px; height: 40px; border-radius: 20px; }
html.slim-port .phone .fab { right: calc(12px + var(--sar)); bottom: calc(var(--sab) + 8px); width: 44px; height: 44px; border-radius: 22px; }
html.slim-port .phone .fab span { width: 36px; height: 36px; border-radius: 18px; }
html.slim-port .phone .fab span svg { width: 18px; height: 18px; }
html.slim-port .phone .fab-find { right: calc(12px + var(--sar) + 44px + 8px); bottom: calc(var(--sab) + 8px); }
/* content clears the row (was 120 px for the 60 pt bar + plus) */
html.slim-port .phone .screen { padding-bottom: calc(var(--sab) + 72px); }
html.slim-port .phone .docpage { padding-bottom: calc(var(--sab) + 72px); }
html.slim-port .phone .toast { bottom: calc(var(--sab) + 64px); }
/* open mode A's card (open.css) sits above the row instead of under it */
html.slim-port.op-port .phone .op-det { bottom: calc(var(--sab) + 60px); max-height: min(var(--op-card-h), calc(100% - var(--sat) - var(--sab) - 80px)); }
html.slim-port.op-port .phone.op-open #scr-home, html.slim-port.op-port .phone.op-open #scr-browse, html.slim-port.op-port .phone.op-open #scr-tasks { padding-bottom: calc(var(--op-card-h) + var(--sab) + 76px); }

/* ---- landscape: a 60 pt rail on the right (app.js side-rail, which keys on this inset) ---- */
html.slim-land { --sar: max(env(safe-area-inset-right, 0px), 60px); }
:root.slim-land.side-rail { --rail-btn: 44px; --rail-btn-w: 44px; --rail-act: 40px; --rail-gap: 10px; --rail-top-clear: calc(var(--sat) + 10px); --rail-bottom: calc(var(--sab) + 10px); }
/* in the shell, iOS keeps its 84 pt strip in open landscape with the clock and Wi-Fi at the top (~110 pt, measured in the
   iPhone Duo simulator): the rail's actions start below them */
:root.in-shell.slim-land.side-rail { --rail-top-clear: 132px; }
html.slim-land.side-rail .phone .fab { width: 44px; height: 44px; border-radius: 22px; right: calc((var(--rail-strip) - 44px) / 2); }
html.slim-land.side-rail .phone .fab span { width: 36px; height: 36px; border-radius: 18px; }
html.slim-land.side-rail .phone .fab span svg { width: 18px; height: 18px; }
html.slim-land.side-rail .phone .tabbar { bottom: calc(var(--rail-bottom) + 44px + var(--rail-gap)); max-height: calc(100% - var(--rail-top-clear) - var(--rail-bottom) - 44px - var(--rail-gap) - 100px); }
html.slim-land .phone .rail-top, html.slim-land .phone .tabbar, html.slim-land .phone .fab { z-index: 31; }
/* the rail's own background, so content scrolling under it doesn't show through the gaps */
html.slim-land.side-rail .phone::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: var(--rail-strip); z-index: 29; pointer-events: none;
  background: var(--app); box-shadow: inset 1px 0 0 var(--line); }

/* ---- hold + : Settings · Reload ---- */
#nb-scrim { position: fixed; inset: 0; z-index: 90; }
#nb-menu { position: fixed; z-index: 91; min-width: 168px; padding: 5px; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: var(--glassRing), 0 14px 40px rgba(0,0,0,.28); display: flex; flex-direction: column; }
#nb-menu button { all: unset; cursor: pointer; padding: 10px 12px; border-radius: 10px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
#nb-menu button:active { background: var(--fill8); }

/* ---- sliding along the bar (js/navbar.js): no panning, so the finger can scrub the tabs; the tab under it lights up ---- */
.phone .tabbar { touch-action: none; }
.phone .tabbar button.scrub { color: var(--accent); }

/* ---- tapping a menu item (js/taps.js; Drew, 2026-11-10 21:21: "Should also have feedback on tapping a menu"): an
   instant tint while the finger is down, fading out in ~0.1 s; drawn over the item, whatever its own background ---- */
.tap-press { box-shadow: inset 0 0 0 100vmax var(--tap-tint, rgba(127,127,127,.18)) !important; transition: none !important; }
.tap-fade { transition: box-shadow 120ms ease-out !important; }

/* ---- Back in the bar, everywhere (js/navbar.js ergoBack; Drew, 2026-11-10 21:37: "This is perfect back button placement and
   it needs to be this way everywhere"): first in the bar's action group; the inline Backs go wherever the bar has one ---- */
.fab-back { display: none; }
html.slim-port.can-back .phone .fab-back { display: flex; position: absolute; z-index: 30; align-items: center; justify-content: center;
  right: calc(12px + var(--sar) + 2 * (44px + 8px)); bottom: calc(var(--sab) + 8px); width: 44px; height: 44px; border-radius: 22px; color: var(--ink85);
  background: var(--glass); -webkit-backdrop-filter: saturate(1.6) blur(30px); backdrop-filter: saturate(1.6) blur(30px); box-shadow: var(--glassRing), var(--sm); }
html.slim-port.can-back .phone .fab-back:active { transform: scale(.92); }
/* the doc page's own Back: the bar has it (the side rail already hid the doc bar's buttons) */
html.slim-port.can-back .phone .doc-bar [data-act="back"] { display: none; }
/* Browse / Home levels' inline Back (the crumbs above the title stay, as the jump-back): gone wherever the bar has Back */
html.side-rail:not(.in-shell) .phone [data-hb-back],
html.in-shell.web-bars.side-rail .phone [data-hb-back],
html.in-shell.shell-back2:not(.web-bars) .phone [data-hb-back],
html.slim-port .phone [data-hb-back] { display: none !important; }