/* BibleWorks 10 on a phone or tablet (js/features/mobile.js).
   Every rule below is inside a class the layout sets on <body> (js/features/mobile/mode.js):
     body.bw-narrow   the screen is a phone or a tablet (device width below 1100 px)
     body.bw-phone    below 760 px, or a phone turned sideways: one pane at a time
     body.bw-tablet   760 to 1100 px: two panes side by side
     body.bw-touch    the screen takes a finger
   A desktop gets none of these classes, so nothing here applies to it.  The chrome is dark in both themes (app.css), and the colours,
   fonts and radii are app.css's tokens, so light and dark both work. */

/* ================================================================ elements the phone adds (invisible elsewhere) */
.mb-top, .mb-bar, .mb-peek, .mb-sheet, .mb-scrim { display: none; }

/* ================================================================ shell */
body.bw-narrow {
  --fs-ui: 15px; --fs-small: 13px; --fs-latin: 17px; --fs-greek: 19px; --fs-hebrew: 23px;
  --mb-touch: 44px; --mb-safe-b: env(safe-area-inset-bottom, 0px);
  --mb-top-bg: var(--chrome);
  height: 100vh; height: 100dvh;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* the desktop chrome gives way to the top bar, the bottom bar and the menu sheet */
body.bw-narrow #menubar, body.bw-narrow #toolbar, body.bw-narrow #statusbar, body.bw-narrow .split { display: none !important; }
body.bw-narrow .ws-hint { display: none; }
/* the workspace's configuration button (show or hide the Search Window, the Main Menu ...): the phone has its own bars, and the button would sit on the version button when the Main Menu is hidden */
body.bw-narrow .ws-config-btn, body.bw-narrow .ws-config-btn.ws-config-float { display: none !important; }
body.bw-narrow input, body.bw-narrow select, body.bw-narrow textarea { font-size: 16px; }   /* 16 px: iOS does not zoom into a field */

/* ---------------------------------------------------------------- top bar: menu, Command Line, version */
body.bw-narrow .mb-top {
  display: flex; grid-row: 1; align-items: center; gap: 4px; padding: 6px 6px 6px 4px; min-width: 0;
  background: var(--mb-top-bg); color: var(--chrome-ink);
}
.mb-icon {
  width: var(--mb-touch, 44px); height: var(--mb-touch, 44px); flex: none; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 10px; color: var(--chrome-ink); cursor: pointer;
}
.mb-icon:active, .mb-ver:active { background: var(--chrome-hover); }
body.bw-narrow .mb-top .mb-cmd {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0; padding: 0; background: none; border: 0; position: relative;
}
body.bw-narrow .mb-top .cmdline { flex: 1; min-width: 0; height: var(--mb-touch); font-size: 16px; padding: 0 12px; border-radius: 10px; color: var(--ink); background: var(--bg); }
body.bw-narrow .mb-top .cmdline.greek { font-size: 18px; }
body.bw-narrow .mb-top .cmdline.hebrew { font-size: 21px; }
body.bw-narrow .mb-top .st-histbtn { top: 0; right: 0; width: var(--mb-touch); height: var(--mb-touch); border-radius: 10px; }
body.bw-narrow .mb-top .st-hist-host .cmdline { padding-right: 40px; }
body.bw-narrow .mb-top .ws-ins, body.bw-narrow .mb-top .ime-box { top: 17px; right: 48px; }
.mb-ver {
  flex: none; display: flex; align-items: center; gap: 2px; min-width: var(--mb-touch); height: var(--mb-touch); padding: 0 6px 0 8px;
  background: none; border: 0; border-radius: 10px; color: var(--chrome-ink); font-weight: 650; font-size: 14px; cursor: pointer;
}
.mb-ver svg { opacity: 0.7; }

/* ---------------------------------------------------------------- bottom bar: Search, Browse, Analysis */
body.bw-narrow .mb-bar {
  display: grid; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--chrome);
  border-top: 1px solid oklch(1 0 0 / 0.1); padding-bottom: var(--mb-safe-b);
}
.mb-tab {
  position: relative; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0;
  border: 0; background: none; color: var(--chrome-ink-2); font-size: 12px; font-weight: 600; cursor: pointer;
}
.mb-tab.on { color: var(--chrome-ink); }
.mb-tab.on::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--sel-strong); }
.mb-tab:active { background: var(--chrome-hover); }
.mb-badge {
  position: absolute; top: 5px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--sel-strong);
  color: white; font-size: 11px; line-height: 18px; font-weight: 650; font-variant-numeric: tabular-nums; text-align: center;
}
.mb-tab.fresh::after { content: ""; position: absolute; top: 8px; left: calc(50% + 10px); width: 9px; height: 9px; border-radius: 50%; background: oklch(0.84 0.16 95); }

/* ---------------------------------------------------------------- the panes: stacked in one cell, one (phone) or two (tablet) in view */
body.bw-narrow .panes {
  grid-row: 2; position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; min-width: 0;
}
body.bw-narrow .panes > .pane { grid-area: 1 / 1 !important; order: 0 !important; display: grid !important; min-width: 0; }
/* not shown: invisible and out of reach, but still laid out, so its scroll position and its list drawing survive */
body.bw-narrow .panes > .pane.mb-off { visibility: hidden; pointer-events: none; }
body.bw-tablet .panes { grid-template-columns: minmax(300px, 38%) minmax(0, 1fr) !important; }
body.bw-tablet[data-mb-pane="analysis"] .panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
body.bw-tablet .panes > .pane.mb-L { grid-column: 1 !important; border-right: 1px solid var(--line-strong); }
body.bw-tablet .panes > .pane.mb-R, body.bw-tablet .panes > .pane.mb-off { grid-column: 2 !important; }
/* the panes read as one layout; the Search Window's own hidden state, and the Analysis Window switch, do not apply */
body.bw-narrow #search-pane[hidden], body.bw-narrow .panes.no-analysis > .analysis { display: grid !important; }

body.bw-narrow .pane-head { height: 44px; padding: 0 4px 0 12px; font-size: 14px; gap: 2px; }
body.bw-narrow .pane-head > span:first-child { font-size: 14px; }
body.bw-narrow .pane-head button { min-height: var(--mb-touch); min-width: var(--mb-touch); padding: 0 10px; font-size: 14px; border-radius: 8px; }

/* ---------------------------------------------------------------- controls: 44 px targets, 16 px text */
body.bw-narrow .btn { min-height: var(--mb-touch); padding: 0 14px; border-radius: 10px; font-size: 15px; }
body.bw-narrow .ctl, body.bw-narrow select.ctl { min-height: var(--mb-touch); border-radius: 10px; font-size: 16px; padding: 0 10px; }
body.bw-narrow input.ctl, body.bw-narrow textarea.ctl { font-size: 16px; }
body.bw-narrow .btn:active { transform: none; background: var(--panel-2); }

/* ---------------------------------------------------------------- Search Window */
body.bw-narrow .tabs-row { min-height: var(--mb-touch); }
body.bw-narrow .result-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
body.bw-narrow .result-tabs button { flex: 0 0 auto; min-width: var(--mb-touch); height: var(--mb-touch); font-size: 14px; padding: 0 6px; }
body.bw-narrow .tab-btn { width: var(--mb-touch); height: var(--mb-touch); }
body.bw-narrow .search-top { padding: 6px 8px; gap: 4px; grid-template-columns: minmax(0, 1fr); }
body.bw-narrow .search-row { flex-wrap: nowrap; }
body.bw-narrow .search-row .grow { display: none; }          /* the Versions button and the version button of the top bar open the version list */
body.bw-narrow .search-row .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
body.bw-narrow .search-row .versions-btn { flex: 1.3 1 0; justify-content: center; }
/* the step buttons move up beside the Versions, Tools and Copy buttons, and the message line takes a row only when there is a message */
body.bw-narrow .search-top { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
body.bw-narrow .search-top > .search-row { grid-column: 1; grid-row: 1; }
body.bw-narrow .search-top > .msg-row { display: contents; }
body.bw-narrow .msg-row .spin { grid-column: 2; grid-row: 1; }
body.bw-narrow .msg-row .search-msg { grid-column: 1 / -1; grid-row: 2; min-height: 0; font-size: 13px; padding: 0 2px; }
body.bw-narrow .msg-row .search-msg:empty { display: none; }
body.bw-narrow .spin { border-radius: 10px; }
body.bw-narrow .spin button { width: var(--mb-touch); height: var(--mb-touch); }
body.bw-narrow .search-foot { padding: 6px 12px; font-size: 13px; }
body.bw-narrow .results-empty { padding: 16px 14px 28px; font-size: 15px; }
body.bw-narrow .results-empty dl { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
/* result rows: the list draws one-line rows 26 px apart (js/search.js ROW); the phone shows each verse wrapped in a row of its own */
body.bw-narrow .results-inner.wrapped .res-row {
  grid-template-columns: 40px 84px minmax(0, 1fr); min-height: 52px; padding: 8px 10px 8px 0; gap: 2px; align-items: start; white-space: normal;
}
body.bw-narrow .res-row input { width: 18px; height: 18px; margin: 0 auto; transform: scale(1.3); }
body.bw-narrow .results-inner.wrapped .res-row input { align-self: start; margin-top: 3px; }
body.bw-narrow .res-row .ref { font-size: 14px; padding-top: 2px; }
body.bw-narrow .res-row .kwic { font-size: 15px; }
body.bw-narrow .res-row .kwic.greek { font-size: 17px; }
body.bw-narrow .res-row .kwic.hebrew { font-size: 20px; }
body.bw-narrow .res-row:hover { background: none; }
body.bw-narrow .res-row.cur { background: var(--sel-bg); }
body.bw-narrow .res-row:active { background: var(--panel-2); }
body.bw-touch .res-row, body.bw-touch .vtext .w, body.bw-touch .vtext .mw, body.bw-touch .vspan .w, body.bw-touch .vspan .mw { -webkit-touch-callout: none; }
/* on a phone or tablet a hold is the menu, not a text selection; a touch-screen laptop at desktop width keeps its mouse selection */
body.bw-narrow.bw-touch .res-row { -webkit-user-select: none; user-select: none; }

/* ---------------------------------------------------------------- Browse Window */
body.bw-narrow .browse-bar { gap: 6px; padding: 6px 8px; }
body.bw-narrow .browse-bar .heading { flex: 1 1 100%; font-size: 16px; }
body.bw-narrow .browse-bar #browse-version { flex: 0 0 auto; width: 80px; }
body.bw-narrow .browse-bar #browse-book { flex: 1 1 96px; min-width: 0; }
body.bw-narrow .browse-bar #browse-chapter, body.bw-narrow .browse-bar #browse-verse { flex: 0 0 auto; width: 60px; padding: 0 4px 0 8px; }
body.bw-narrow .browse-bar .ws-outline { flex: 1 1 100%; max-width: 100%; }
body.bw-narrow .browse { padding: 8px 12px 28px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.bw-narrow .browse .chapter-title { font-size: 17px; }
body.bw-narrow .verse-block { padding: 8px 8px; margin: 0 -8px; }
body.bw-narrow .verse-block .vref { font-size: 15px; }
body.bw-narrow .vline { gap: 6px; }
body.bw-narrow .vline .vlabel { width: 44px; font-size: 12px; padding-top: 6px; }
body.bw-narrow .vtext { line-height: 1.75; max-width: none; }
body.bw-narrow .vtext.hebrew { line-height: 1.95; }
body.bw-narrow .vtext .w, body.bw-narrow .vtext .mw, body.bw-narrow .vspan .w, body.bw-narrow .vspan .mw, body.bw-narrow .awb-text .w { padding-block: 0.22em; }
body.bw-narrow .vtext .str, body.bw-narrow .awb-text .str { font-size: 12px; }
body.bw-narrow .vnotes { margin-left: 0; font-size: 14px; }
body.bw-narrow .browse-mode .verse-flow { line-height: 1.9; max-width: none; }
body.bw-narrow .vtext .w:hover, body.bw-narrow .vtext .mw:hover { background: none; box-shadow: none; }
body.bw-narrow .vtext .w.pinned, body.bw-narrow .vtext .mw.pinned, body.bw-narrow .vspan .w.pinned, body.bw-narrow .vspan .mw.pinned { background: var(--sel-bg); }
body.bw-narrow.bw-touch .vtext .w, body.bw-narrow.bw-touch .vtext .mw, body.bw-narrow.bw-touch .vspan .w, body.bw-narrow.bw-touch .vspan .mw { -webkit-user-select: none; user-select: none; }
body.bw-narrow .vnotes a.ref, body.bw-narrow .an-lex a, body.bw-narrow .an-lex .ref { padding: 6px 2px; margin: -6px 0; display: inline-block; }

/* ---------------------------------------------------------------- Analysis Window */
body.bw-narrow .atabs { flex-wrap: nowrap !important; overflow-x: auto; gap: 0; padding: 0 4px; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.bw-narrow .atabs button { flex: none; min-height: var(--mb-touch); padding: 0 14px; font-size: 14px; border-radius: 0; border: 0; border-bottom: 3px solid transparent; }
body.bw-narrow .atabs button.active { background: none; border-bottom-color: var(--sel-strong); margin-bottom: 0; }
body.bw-narrow .analysis-body { padding: 14px 16px 28px; overscroll-behavior: contain; }
body.bw-narrow .analysis-body.aw-fill, body.bw-narrow .analysis-body.wt-fill, body.bw-narrow #analysis-body.ws-fill { padding: 0; }
body.bw-narrow .an-word { font-size: 26px; }
body.bw-narrow .an-word.hebrew { font-size: 30px; }
body.bw-narrow .an-lex { font-size: 16px; }
body.bw-narrow .an-table { display: block; overflow-x: auto; max-width: 100%; }
body.bw-narrow .awb-row, body.bw-narrow .awv-row { flex-wrap: wrap; }
body.bw-narrow .awb-btn, body.bw-narrow .awv-row .btn { height: var(--mb-touch); }
body.bw-narrow .awb-ver { flex: 0 0 90px; } body.bw-narrow .awb-ch, body.bw-narrow .awb-vs { flex: 0 0 70px; }
body.bw-narrow .awb-text { padding: 8px 12px 28px; }
body.bw-narrow .wt-table td { height: var(--mb-touch); line-height: 42px; }

/* ================================================================ sheets: the menu, the button bar */
body.bw-narrow .mb-sheet {
  position: fixed; inset: 0; z-index: 90000; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--ink);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  animation: mb-up 220ms var(--ease);
}
.mb-sheet-head { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 0 8px 0 4px; background: var(--chrome); color: var(--chrome-ink); }
.mb-sheet-close { width: var(--mb-touch, 44px); height: var(--mb-touch, 44px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--chrome-ink); cursor: pointer; flex: none; }
.mb-sheet-close:active { background: var(--chrome-hover); }
.mb-sheet-title { margin: 0; font-size: 17px; font-weight: 650; }
.mb-sheet-body { overflow: auto; overscroll-behavior: contain; padding: 4px 0 calc(24px + var(--mb-safe-b, 0px)); -webkit-overflow-scrolling: touch; }
.mb-group { border-top: 1px solid var(--line); }
.mb-group + .mb-group { margin-top: 12px; }
.mb-group-title { margin: 22px 16px 6px; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.mb-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 16px; border: 0; border-bottom: 1px solid var(--line); background: none;
  text-align: left; font-size: 17px; color: var(--ink); cursor: pointer;
}
.mb-row:active { background: var(--panel-2); }
/* the Theme choice of the menu sheet: three buttons, one pressed */
.mb-theme { padding: 10px 16px 14px; }
.mb-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.mb-seg-btn { min-height: var(--mb-touch, 44px); border: 0; background: var(--panel); color: var(--ink); font-size: 16px; cursor: pointer; }
.mb-seg-btn + .mb-seg-btn { border-left: 1px solid var(--line-strong); }
.mb-seg-btn.on { background: var(--sel-bg); font-weight: 650; box-shadow: inset 0 -3px 0 var(--sel-strong); }
.mb-theme-note { margin: 8px 2px 0; font-size: 13px; color: var(--ink-3); }
.mb-row-text { flex: 1 1 auto; min-width: 0; }
.mb-row-sub { color: var(--ink-3); font-size: 13px; }
.mb-row svg { color: var(--ink-3); flex: none; }
.mb-switch { flex: none; position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--line-strong); transition: background 150ms var(--ease); }
.mb-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: transform 150ms var(--ease); }
.mb-switch.on { background: var(--sel-strong); }
.mb-switch.on::after { transform: translateX(18px); }
.mb-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 4px; padding: 10px 8px; }
.mb-tool {
  display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 92px; padding: 8px 4px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font-size: 12.5px; line-height: 1.25; text-align: center; cursor: pointer;
}
.mb-tool:active { background: var(--panel-2); }
.mb-tool.on .mb-tool-icon { box-shadow: inset 0 -3px 0 var(--sel-strong); }
.mb-tool.unported { opacity: 0.55; }
.mb-tool-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--chrome-2); }
.mb-tool-label { overflow-wrap: anywhere; }
@keyframes mb-up { from { opacity: 0; transform: translateY(24px); } }

/* ================================================================ menus (the core's .menu-pop) as sheets */
body.bw-narrow .menu-pop, body.bw-narrow .lx-menu, body.bw-narrow .stmenu-pop, body.bw-narrow .mp-pop {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; width: 100% !important; min-width: 0 !important;
  max-height: 82vh; max-height: 82dvh; padding: 0 0 var(--mb-safe-b); border-radius: 18px 18px 0 0; border-width: 1px 0 0; box-shadow: 0 -12px 40px oklch(0 0 0 / 0.35);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; animation: mb-up 200ms var(--ease);
}
body.bw-narrow .lx-menu button, body.bw-narrow .mp-item, body.bw-narrow .stmenu-pop .menu-item { min-height: 48px; font-size: 16px; padding-top: 8px; padding-bottom: 8px; white-space: normal; }
body.bw-narrow .lx-menu button:hover, body.bw-narrow .mp-item:hover { background: none; color: inherit; }
body.bw-narrow .lx-menu .grp { padding: 10px 16px; font-size: 13px; }
body.bw-narrow.mb-menumode .menu-pop { top: 0 !important; max-height: none; height: 100%; border-radius: 0; border-width: 0; padding-top: env(safe-area-inset-top, 0px); box-shadow: none; }
body.bw-narrow .mb-scrim { display: block; position: fixed; inset: 0; z-index: 99990; background: oklch(0 0 0 / 0.45); }
body.bw-narrow.mb-menumode .mb-scrim { display: none; }
.mb-popbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 4px; min-height: 52px; padding: 0 12px 0 4px; background: var(--chrome); color: var(--chrome-ink); }
.mb-popbar-back { width: var(--mb-touch, 44px); height: var(--mb-touch, 44px); display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--chrome-ink); cursor: pointer; flex: none; }
.mb-popbar-back:active { background: var(--chrome-hover); }
.mb-popbar-title { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.bw-narrow .menu-item {
  min-height: 48px; padding: 8px 16px 8px 40px; font-size: 16px; white-space: normal; gap: 12px; border-radius: 0; border-bottom: 1px solid oklch(from var(--line) l c h / 0.6);
}
body.bw-narrow .menu-item.checked::before { left: 14px; }
body.bw-narrow .menu-item:hover { background: none; color: inherit; }
body.bw-narrow .menu-item:active { background: var(--sel-strong); color: white; }
body.bw-narrow .menu-item .kbd { font-size: 12.5px; text-align: right; }
body.bw-narrow .menu-item .sub { font-size: 18px; }
body.bw-narrow .menu-sep { margin: 0; height: 6px; background: var(--panel-2); }

/* ================================================================ floating windows become sheets */
body.bw-phone .toolwin {
  inset: 0 !important; width: auto !important; height: auto !important; max-width: none; max-height: none; min-width: 0; min-height: 0; border: 0; border-radius: 0;
  resize: none; box-shadow: none; animation: mb-up 220ms var(--ease);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  grid-template-rows: auto minmax(0, 1fr);
}
body.bw-phone .toolwin-head { height: auto; min-height: 56px; padding: 0 4px 0 16px; cursor: default; font-size: 16px; }
body.bw-phone .toolwin-head > span { min-width: 0; padding: 6px 0; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; overflow: visible; }
body.bw-phone .toolwin-close { flex: none; width: 52px; height: var(--mb-touch); font-size: 20px; border-radius: 10px; margin-right: 2px; }
body.bw-phone .toolwin-close:active { background: var(--chrome-hover); }
body.bw-phone .toolwin-body select, body.bw-phone .toolwin-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), body.bw-phone .toolwin-body textarea { max-width: 100%; min-width: 0; }
body.bw-phone .toolwin-body .btn, body.bw-phone .toolwin-body select, body.bw-phone .toolwin-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { min-height: var(--mb-touch); }
body.bw-phone .toolwin-body label { min-height: 28px; }
body.bw-tablet .toolwin { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
body.bw-tablet .toolwin-head { height: 44px; font-size: 14px; }
body.bw-tablet .toolwin-close { width: var(--mb-touch); height: var(--mb-touch); font-size: 18px; }
body.bw-tablet .toolwin-maxbtn { width: var(--mb-touch); height: var(--mb-touch); }

/* ================================================================ tool windows and dialogs of the tool areas: nothing runs off the sheet
   Every wrapper of these windows is a grid with no column template, so its one column is an `auto` track: as wide as the widest thing inside
   it (a nowrap status line, a <select> with a long option, a field with a fixed width).  A percentage max-width cannot help against a track
   that is sized by its content, so the one column is made `minmax(0, 1fr)`: the sheet's width, whatever is inside. */
body.bw-phone .toolwin-body, body.bw-phone .td-win .toolwin-body,
body.bw-phone .tl-wrap, body.bw-phone .ga-wrap, body.bw-phone .fc-wrap, body.bw-phone .dgdb-wrap, body.bw-phone .er-wrap,
body.bw-phone .rvt-win, body.bw-phone .rt, body.bw-phone .ws-form, body.bw-phone .ws-sec, body.bw-phone .rvt-left, body.bw-phone .rvt-right,
body.bw-phone .fc-left, body.bw-phone .fc-right, body.bw-phone .dgdb-right, body.bw-phone .er-lt, body.bw-phone .er-rt, body.bw-phone .dg-wrap, body.bw-phone .dg-right, body.bw-phone .dg-left {
  grid-template-columns: minmax(0, 1fr); min-width: 0;
}
body.bw-phone .toolwin-body > *, body.bw-phone .td-win .toolwin-body > * { min-width: 0; }
body.bw-phone .toolwin-body, body.bw-phone dialog.bw .dlg-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.bw-phone dialog.bw .dlg-body :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea) { max-width: 100%; min-width: 0; }
body.bw-phone dialog.bw .dlg-body select, body.bw-phone dialog.bw .dlg-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { min-height: var(--mb-touch); }
/* the status lines of the tool-data windows (nowrap spans, ellipsis on a desktop) wrap instead */
body.bw-phone .td-statusline { flex-direction: column; gap: 2px; padding: 6px 12px; }
body.bw-phone .td-statusline span { white-space: normal; overflow: visible; text-overflow: clip; }
body.bw-phone .td-statusline span:empty { display: none; }
body.bw-phone .td-toolbar { padding: 6px; }
body.bw-phone .td-toolbar .td-sep { display: none; }
body.bw-phone .td-toolbar :is(.ctl:not(select), .tl-search, .ga-filter) { flex: 1 1 140px; width: auto; min-width: 0; }
body.bw-phone .td-toolbar select.ctl { flex: 1 1 140px; min-width: 0; max-width: 100%; width: auto; }
body.bw-phone .td-menubar { overflow-x: auto; scrollbar-width: none; }
body.bw-phone .td-menu-top { min-height: var(--mb-touch); padding: 0 14px; font-size: 15px; flex: none; }
body.bw-phone .toolwin-body :is(.td-check, .rt-wav), body.bw-phone dialog.bw :is(.ws-check, .bwd-check) { min-height: var(--mb-touch); align-items: center; }
body.bw-phone :is(.td-check, .ws-check, .bwd-check, .rt-wav) input[type="checkbox"], body.bw-phone .rvt-word input[type="checkbox"], body.bw-phone .vc-row input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
body.bw-phone .td-hint { font-size: 13px; }

/* ---------------------------------------------------------------- a list beside what it chooses becomes a drawer (js/features/mobile/toolwins.js)
   the main part keeps the whole width; the Words / Passages button opens the list over it, and a tap on an entry closes it again */
.mb-dw-toggle, .mb-dw-scrim { display: none; }
body.bw-phone .mb-dw-toggle { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 12px 0 10px; }
body.bw-phone .mb-dw { position: relative; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
body.bw-phone .mb-dw > .mb-dw-side {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: min(88%, 380px); max-width: none; background: var(--bg); border-right: 1px solid var(--line-strong);
  box-shadow: 10px 0 32px oklch(0 0 0 / 0.35); transform: translateX(-104%); visibility: hidden; overscroll-behavior: contain;
  transition: transform 220ms var(--ease), visibility 0s linear 220ms;
}
body.bw-phone .mb-dw.mb-dw-open > .mb-dw-side { transform: none; visibility: visible; transition: transform 220ms var(--ease), visibility 0s; }
body.bw-phone .mb-dw.mb-dw-open > .mb-dw-scrim { display: block; position: absolute; inset: 0; z-index: 3; background: oklch(0 0 0 / 0.4); }
@media (prefers-reduced-motion: reduce) { body.bw-phone .mb-dw > .mb-dw-side, body.bw-phone .mb-dw.mb-dw-open > .mb-dw-side { transition: none; } }

/* ---------------------------------------------------------------- Timeline: the controls stay on the screen, the time line is a box that scrolls on its own */
body.bw-phone .tl-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
body.bw-phone .tl-toolbar .td-btn { flex: 1 1 auto; }
body.bw-phone .tl-zoom-label { min-width: 44px; }

/* ---------------------------------------------------------------- Related Verses Tool and Phrase Matching Tool: one column, the verse list in a box of its own */
body.bw-phone .rvt-win { grid-template-rows: none; grid-auto-rows: min-content; align-content: start; height: auto; gap: 10px; padding: 8px; }
body.bw-phone .rvt-cols { grid-template-columns: minmax(0, 1fr); gap: 14px; overflow: visible; }
body.bw-phone .rvt-top > .st-grow { flex: 1 1 0; min-width: 0; }
body.bw-phone .rvt-win .st-inline > :is(select.st-ver, .st-ver) { flex: 1 1 100%; width: 100%; max-width: 100%; min-width: 0; }
body.bw-phone .rvt-win .st-inline > select.ctl:not(.st-ver) { flex: 1 1 110px; min-width: 0; }
body.bw-phone .rvt-win .st-inline > .btn { flex: 1 1 auto; }
body.bw-phone .rvt-win .st-btnrow > .btn { flex: 1 1 auto; }
body.bw-phone .rvt-words { max-height: 308px; overscroll-behavior: contain; }
body.bw-phone .rvt-word { min-height: var(--mb-touch); align-items: center; padding: 4px 10px; font-size: 16px; }
body.bw-phone .rvt-win .vc { height: min(62dvh, 560px); min-height: 220px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.bw-phone .vc-row { grid-template-columns: 34px auto minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 8px; row-gap: 0; align-items: center; min-height: var(--mb-touch); padding: 8px 8px 8px 6px; }
body.bw-phone .vc-row > input { grid-row: 1 / span 2; align-self: start; margin: 4px auto 0; }
body.bw-phone .vc-row > .vc-ref { padding: 6px 0; }
body.bw-phone .vc-row > .vc-text { grid-column: 2 / -1; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; font-size: 15px; }
body.bw-phone .vc-row > .vc-text.greek { font-size: 17px; }
body.bw-phone .vc-row > .vc-text.hebrew { font-size: 19px; }
body.bw-phone .vc-row.in-group { padding-left: 14px; }
body.bw-phone .vc-head { min-height: var(--mb-touch); align-items: center; }
body.bw-phone .rvt-win .st-status { min-height: 32px; }
body.bw-phone .pmt-win .vc { height: min(56dvh, 520px); }
/* the Phrase Matching Tool's first line: each label sits beside its own box, two pairs to a row */
body.bw-phone .pmt-win > .rvt-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
body.bw-phone .pmt-win > .rvt-top > .st-grow { grid-column: 2 / -1; }
body.bw-phone .pmt-win > .rvt-top > select.st-ver { grid-column: 1 / -1; }
body.bw-phone .pmt-win > .rvt-top > .btn { grid-column: span 2; }
@media (max-width: 399px) {          /* a small phone: the labels sit in a column of their own and the buttons take a line each */
  body.bw-phone .pmt-win > .rvt-top { grid-template-columns: auto minmax(0, 1fr); }
  body.bw-phone .pmt-win > .rvt-top > .st-grow { grid-column: 2; }
  body.bw-phone .pmt-win > .rvt-top > .btn { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Read Text */
body.bw-phone .rt { grid-template-rows: none; grid-auto-rows: min-content; align-content: start; height: auto; padding: 10px 10px 16px; }
body.bw-phone .rt-row .rt-version, body.bw-phone .rt-row .rt-voice { flex: 1 1 100%; }
body.bw-phone .rt-row .rt-ref { flex: 1 1 100%; min-width: 0; }
body.bw-phone .rt-row > .btn { flex: 1 1 auto; }
body.bw-phone .rt-row > .btn.rt-nav { flex: 0 0 var(--mb-touch); width: var(--mb-touch); min-width: var(--mb-touch); padding: 0; }
body.bw-phone .rt-text { height: min(52dvh, 460px); min-height: 200px; }

/* ---------------------------------------------------------------- Greek Alias List */
body.bw-phone .ga-scroll { --ga-row: 44px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.bw-phone .ga-row { grid-template-columns: 3em minmax(0, 1fr); }
body.bw-phone .ga-filter { flex: 1 1 100%; }
body.bw-phone .ga-toolbar .btn, body.bw-phone .ga-wrap .td-toolbar > .btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------- NT Diagram Database: the passages are the drawer, the diagram has the width */
body.bw-phone .dgdb-main { grid-template-columns: minmax(0, 1fr); }
body.bw-phone .dgdb-list { border-right: 0; }
body.bw-phone .dgdb-row { min-height: var(--mb-touch); align-items: center; padding: 6px 12px; font-size: 16px; }
body.bw-phone .dgdb-zoom { width: auto; flex: 1 1 120px; }
body.bw-phone .dgdb-win .td-toolbar > .btn { flex: 1 1 auto; }
body.bw-phone .dgdb-preview { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.bw-phone .dgdb-notes { max-height: 30dvh; }

/* ---------------------------------------------------------------- Ermie: the folders over the items, the viewer under them, the window scrolls */
body.bw-phone .er-wrap { display: block; }
body.bw-phone .er-top { gap: 6px; }
body.bw-phone .er-top .er-cat { flex: 1 1 180px; width: auto; min-width: 0; }
body.bw-phone .er-top .spacer { display: none; }
body.bw-phone .er-link { min-height: var(--mb-touch); padding: 0 10px; font-size: 15px; }
body.bw-phone .er-catalog { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; border-bottom: 0; }
body.bw-phone .er-lt { grid-template-rows: auto auto; border-right: 0; border-bottom: 1px solid var(--line-strong); }
body.bw-phone .er-tree { height: min(34dvh, 300px); min-height: 160px; overscroll-behavior: contain; }
body.bw-phone .er-node { height: auto; min-height: var(--mb-touch); font-size: 16px; }
body.bw-phone .er-tw { width: var(--mb-touch); height: var(--mb-touch); font-size: 14px; }
body.bw-phone .er-btns > .btn { flex: 1 1 auto; }
body.bw-phone .er-rt { grid-template-rows: auto auto; }
body.bw-phone .er-list { height: min(36dvh, 320px); min-height: 180px; overscroll-behavior: contain; }
body.bw-phone .er-item { min-height: var(--mb-touch); padding: 6px 12px; font-size: 16px; grid-template-columns: 20px minmax(0, 1fr); }
body.bw-phone .er-item .er-ip { display: none; }
body.bw-phone .er-rhead { padding: 8px 12px; flex-direction: column; gap: 2px; }
body.bw-phone .er-path { white-space: normal; }
body.bw-phone .er-view { height: min(72dvh, 640px); min-height: 360px; border-top: 1px solid var(--line-strong); }
body.bw-phone .er-vbar { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
body.bw-phone .er-vurl { flex: 1 1 100%; order: 3; }
body.bw-phone .er-view .an-empty { padding: 0 16px; text-align: center; }

/* ---------------------------------------------------------------- Vocabulary Flashcards: the card has the width, the word list is the drawer */
body.bw-phone .fc-main { grid-template-columns: minmax(0, 1fr); }
body.bw-phone .fc-left { border-right: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
body.bw-phone .fc-list { --fc-row: 44px; }
body.bw-phone .fc-head, body.bw-phone .fc-row { grid-template-columns: minmax(0, 1fr) 24px 34px 48px 74px; padding: 0 6px; gap: 2px; }
body.bw-phone .fc-head { height: var(--mb-touch); }
body.bw-phone .fc-th { font-size: 12px; }
body.bw-phone .fc-total { min-height: var(--mb-touch); }
body.bw-phone .fc-right { padding: 8px 10px; gap: 8px; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: auto; }
body.bw-phone .fc-nav { flex-wrap: wrap; gap: 6px; }
body.bw-phone .fc-nav .fc-prev, body.bw-phone .fc-nav .fc-next { width: auto; flex: 1 1 56px; }
body.bw-phone .fc-nav .btn { flex: 1 1 auto; min-width: var(--mb-touch); }
body.bw-phone .fc-nav .fc-play, body.bw-phone .fc-nav .fc-rec, body.bw-phone .fc-nav .fc-auto { flex: 0 0 var(--mb-touch); padding: 0; }
body.bw-phone .fc-nav .td-sep, body.bw-phone .fc-nav .fc-size:empty { display: none; }
body.bw-phone .fc-nav .fc-smaller, body.bw-phone .fc-nav .fc-larger { width: var(--mb-touch); flex: 0 0 var(--mb-touch); }
body.bw-phone .fc-card { min-height: 190px; padding: 14px 14px 30px; }
body.bw-phone .fc-marks { flex-wrap: wrap; gap: 6px; }
body.bw-phone .fc-marks .btn { flex: 1 1 auto; }
body.bw-phone .fc-marks .spacer { display: none; }
body.bw-phone .fc-setrow { flex-wrap: wrap; min-height: var(--mb-touch); align-items: center; }
body.bw-phone .fc-set { min-height: var(--mb-touch); text-align: left; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Diagramming Module (js/features/mobile/toolwins.js): the diagram is the main thing
   A title of one line, one row of buttons, one line of words, the canvas (60% of the sheet or more), one line of status. */
body.bw-phone .toolwin.dg-win .toolwin-head { min-height: 48px; }
body.bw-phone .toolwin.dg-win .toolwin-head > span { flex: 1 1 auto; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
body.bw-phone .dg-wrap { grid-template-rows: auto minmax(0, 1fr) auto; }
body.bw-phone .dg-win .td-menubar { display: none; }                      /* File, Edit, View, Drawing, Help are in the "more" menu */
body.bw-phone .dg-toolbar { flex-wrap: nowrap; gap: 6px; padding: 4px 6px; align-items: center; background: var(--panel); }
body.bw-phone .dg-toolbar .mb-dg-hide { display: none !important; }
body.bw-phone .dg-toolbar .btn { flex: none; min-width: var(--mb-touch); padding: 0 8px; }
body.bw-phone .dg-toolbar .mb-dw-toggle { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 0 8px; }
body.bw-phone .dg-toolbar .mb-dw-toggle span, body.bw-phone .dg-toolbar .mb-dg-tool span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { body.bw-phone .dg-toolbar .mb-dw-toggle svg { display: none; } }        /* a small phone: the word Symbols, not its icon, so that it fits whole */
body.bw-phone .dg-toolbar .mb-dg-tool { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
body.bw-phone .dg-toolbar .dg-undo, body.bw-phone .dg-toolbar .dg-redo { font-size: 0; width: var(--mb-touch); padding: 0; }
body.bw-phone .dg-toolbar .dg-undo::before { content: "\21B6"; font-size: 22px; line-height: 1; }
body.bw-phone .dg-toolbar .dg-redo::before { content: "\21B7"; font-size: 22px; line-height: 1; }
body.bw-phone .dg-toolbar .mb-dg-more { display: inline-grid; place-items: center; width: var(--mb-touch); padding: 0; }
body.bw-phone .dg-main { grid-template-rows: minmax(0, 1fr); }
body.bw-phone .dg-left { border-right: 0; }
body.bw-phone .dg-lhead { min-height: var(--mb-touch); padding: 4px 8px 4px 12px; font-size: 14px; }
body.bw-phone .dg-symfilter { width: calc(100% - 16px); }
body.bw-phone .dg-sym { min-height: 52px; padding: 4px 8px; font-size: 15px; gap: 10px; }
/* the Text Window: one line of words that scrolls sideways; the button at its end opens all of them */
body.bw-phone .dg-right { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
body.bw-phone .dg-right > .dg-canvaswrap { flex: 1 1 0; min-height: 0; }
body.bw-phone .dg-right > .dg-text { flex: none; }
body.bw-phone .dg-texthead { display: none; }
body.bw-phone .dg-text {
  display: flex; align-items: center; gap: 4px; max-height: none; min-height: 0; padding: 2px 52px 2px 6px; line-height: 1.2;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
body.bw-phone .dg-text .dg-tline { display: contents; }
body.bw-phone .dg-text:has(> .dg-text-empty) { display: none; }
body.bw-phone .dg-right:has(.dg-text-empty) > .mb-dg-expand { display: none; }
body.bw-phone .dg-chip { flex: none; min-height: var(--mb-touch); padding: 9px 8px; line-height: 26px; margin: 0; display: inline-block; }
body.bw-phone .dg-tref { flex: none; line-height: 26px; padding: 0 4px; }
.mb-dg-expand { display: none; }
body.bw-phone .mb-dg-expand {
  display: grid; place-items: center; position: absolute; top: 4px; right: 4px; z-index: 3; width: var(--mb-touch); height: var(--mb-touch); padding: 0;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--panel); color: var(--ink); cursor: pointer; box-shadow: -8px 0 10px var(--bg);
}
body.bw-phone .mb-dg-expand svg { transition: transform 160ms var(--ease); }
body.bw-phone .mb-dg-words-open .mb-dg-expand svg { transform: rotate(180deg); }
body.bw-phone .mb-dg-words-open .dg-text { flex-wrap: wrap; align-items: flex-start; max-height: 38dvh; overflow-x: hidden; overflow-y: auto; white-space: normal; }
body.bw-phone .mb-dg-words-open .dg-text .dg-tline { display: contents; }
@media (prefers-reduced-motion: reduce) { body.bw-phone .mb-dg-expand svg { transition: none; } }
/* the tabs (Diagram, Passage Notes): only when the passage has notes, 40 px */
body.bw-phone .dg-tabs { padding: 2px 6px 0; }
body.bw-phone .dg-tab { flex: 1; min-height: 40px; padding: 0 8px; font-size: 14px; }
body.bw-phone .dg-notes { padding: 12px 14px; font-size: 16px; }
/* the diagram: a box that scrolls on its own by touch; an empty place pans it, a symbol, a word, a slot or a handle is dragged (and a drawing tool draws) */
body.bw-phone .dg-scroll { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.bw-phone .dg-canvas { touch-action: pan-x pan-y; }
body.bw-phone .dg-canvas :is(.dgm-widget, .dgm-hit, .dgm-word, .dgm-slot, .dgm-label, .dg-handle, .dg-guide, .dg-guide-hit, [data-widget], [data-word], [data-slot], [data-handle], [data-label], [data-guide]) { touch-action: none; }
body.bw-phone .dg-win.dg-drawing .dg-canvas { touch-action: none; }
/* a slot (where a word is put) is 26 px high: a transparent stroke makes the place a finger hits 44 px high */
body.bw-phone .dg-canvas .dgm-slot:not(.over) { stroke: transparent; stroke-width: 22px; vector-effect: non-scaling-stroke; pointer-events: all; }
/* zoom buttons over the corner of the canvas */
.mb-dg-zoom { display: none; }
body.bw-phone .mb-dg-zoom { display: flex; flex-direction: column; gap: 6px; position: absolute; right: 10px; bottom: 10px; z-index: 3; }
body.bw-phone .mb-dg-zoom .btn { min-width: var(--mb-touch); width: var(--mb-touch); padding: 0; font-size: 22px; line-height: 1; background: oklch(from var(--panel) l c h / 0.92); box-shadow: 0 2px 8px oklch(0 0 0 / 0.25); }
body.bw-phone .dg-notes:not([hidden]) ~ .mb-dg-zoom { display: none; }
/* the status of one line: what was said, and the count */
body.bw-phone .dg-win .td-statusline { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 10px; min-height: 28px; font-size: 12px; }
body.bw-phone .dg-win .td-statusline .dg-status { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.bw-phone .dg-win .td-statusline .dg-count { flex: none; white-space: nowrap; }
/* the Leedy passage box in its small sheet at the top of the screen */
body.bw-narrow .mb-card.mb-card-top { top: 0; bottom: auto; border-radius: 0 0 18px 18px; box-shadow: 0 12px 40px oklch(0 0 0 / 0.35); padding: env(safe-area-inset-top, 0px) 0 0; animation: none; }
.mb-card-sub { display: block; margin-top: 2px; color: var(--ink-2); font-size: 13px; }
.mb-leedy { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mb-leedy .dg-lbook { flex: 1 1 0; min-width: 0; min-height: var(--mb-touch); }
.mb-leedy .dg-lch, .mb-leedy .dg-lv { flex: 0 0 64px; width: 64px; min-width: 0; min-height: var(--mb-touch); padding: 0 6px; }
.mb-leedy .btn { flex: none; min-height: var(--mb-touch); min-width: var(--mb-touch); }

/* ---------------------------------------------------------------- Edit Main Toolbar and Keyboard Layouts */
body.bw-phone .ws-tbEditor { grid-template-columns: minmax(0, 1fr); gap: 8px; }
body.bw-phone .ws-tbBtns { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
body.bw-phone .ws-tbBtns > .btn { flex: 1 1 auto; }
body.bw-phone .ws-tbList { min-height: 140px; max-height: 26dvh; }
body.bw-phone .ws-tbList .ws-item { min-height: var(--mb-touch); align-items: center; }
body.bw-phone dialog.bw .ws-field > span { font-size: 14px; }
body.bw-phone dialog.bw .ws-check small { font-size: 13px; }
body.bw-phone dialog.bw footer .btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------- Choose Search Version and the other version trees */
body.bw-phone .bwd-choose .bwd-row { display: grid; gap: 4px; }
body.bw-phone .bwd-choose select { width: 100%; max-width: 100%; }
body.bw-phone .bwd-choose-opts { gap: 0; }
body.bw-phone .bwd-tree-tog { width: var(--mb-touch); min-height: var(--mb-touch); flex: none; font-size: 14px; }
body.bw-phone .bwd-tree-ver .vname { white-space: normal; }
body.bw-phone .bwd-choosedlg .bwd-tree { max-height: 32dvh; min-height: 200px; }

/* dialogs fit the screen */
body.bw-phone dialog.bw, body.bw-phone dialog.bwd, body.bw-phone dialog.bwd-wait, body.bw-phone dialog.bwd-wait-status, body.bw-phone dialog.bwd-limdlg {
  width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); border-radius: 14px;
}
body.bw-phone dialog.bw .dlg-body { max-height: calc(100dvh - 190px); padding: 14px; }
body.bw-phone dialog.bw header { padding: 6px 6px 6px 14px; min-height: 52px; font-size: 16px; }
body.bw-phone dialog.bw header button { min-width: var(--mb-touch); min-height: var(--mb-touch); padding: 0; }
body.bw-phone dialog.bw footer { flex-wrap: wrap; padding: 10px 14px calc(10px + var(--mb-safe-b)); }
body.bw-phone .ver-grid { grid-template-columns: 1fr; }
body.bw-phone .ver-grid label, body.bw-phone .bwd-tree-ver, body.bw-phone .bwd-tree-lang { min-height: var(--mb-touch); align-items: center; }
body.bw-phone .bwd-browsebox { flex-direction: column; }
body.bw-narrow .bwd-tree { max-height: 52vh; }

/* the Options window: the list of settings, then the page of the one chosen */
body.bw-phone dialog.bw.ws-options { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
body.bw-phone .ws-optwrap { grid-template-columns: minmax(0, 1fr); }
body.bw-phone .mb-md[data-mb-view="list"] .ws-optmain { display: none; }
body.bw-phone .mb-md[data-mb-view="detail"] .ws-optnav { display: none; }
body.bw-phone .ws-optnav { border-right: 0; padding: 4px 0 24px; }
body.bw-phone .ws-optitem { min-height: 52px; padding: 8px 18px; font-size: 17px; border-radius: 0; border-bottom: 1px solid var(--line); box-shadow: none !important; }
body.bw-phone .ws-optgroup { margin: 18px 18px 4px; font-size: 12px; }
body.bw-phone .ws-opttitle { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; min-height: 52px; font-size: 16px; }
.mb-md-back { width: var(--mb-touch, 44px); height: var(--mb-touch, 44px); display: none; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; flex: none; }
body.bw-phone .mb-md[data-mb-view="detail"] .mb-md-back { display: grid; }
body.bw-phone .ws-optpane { padding: 14px 16px 28px; }
body.bw-phone .ws-grid2 { grid-template-columns: minmax(0, 1fr); }

/* ================================================================ the reference-work reader (js/features/mobile/readers.js) */
body.bw-phone .rd-win .toolwin-body { overflow: hidden; }
body.bw-phone .rd { grid-template-columns: minmax(0, 1fr); }
body.bw-phone .rd-bar { flex-wrap: nowrap; gap: 4px; padding: 6px; overflow: hidden; }
body.bw-phone .rd .rd-nav { width: var(--mb-touch); min-width: var(--mb-touch); padding: 0; flex: none; }
body.bw-phone .rd.mb-rd .rd-bar > :not(.mb-rd-contents):not(.rd-spacer):not(.mb-rd-more):not(.rd-nav), body.bw-phone .rd.mb-rd .rd-bar > .rd-nav[aria-label="Refresh"] { display: none; }
body.bw-phone .rd.mb-rd .rd-bar > .rd-spacer { flex: 1 1 auto; }
.mb-rd-contents { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 0 12px 0 10px; }
.mb-rd-more { flex: none; width: var(--mb-touch); padding: 0; display: inline-grid; place-items: center; }
body.bw-phone .rd.mb-rd .rd-main { position: relative; overflow: hidden; }
body.bw-phone .rd.mb-rd .rd-side {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: 0; width: min(88%, 380px) !important; transform: translateX(-104%); visibility: hidden;
  transition: transform 220ms var(--ease), visibility 0s linear 220ms; box-shadow: 10px 0 32px oklch(0 0 0 / 0.35); border-right: 1px solid var(--line-strong);
}
body.bw-phone .rd.mb-rd.mb-rd-open .rd-side { transform: none; visibility: visible; transition: transform 220ms var(--ease), visibility 0s; }
body.bw-phone .rd.mb-rd .rd-grip { display: none; }
body.bw-phone .rd.mb-rd .rd-page { flex: 1 1 100%; width: 100%; }
.mb-rd-scrim { display: none; }
body.bw-phone .rd.mb-rd-open .mb-rd-scrim { display: block; position: absolute; inset: 0; z-index: 3; background: oklch(0 0 0 / 0.4); }
.mb-rd-head { display: grid; gap: 6px; padding: 6px; flex: none; border-bottom: 1px solid var(--line); background: var(--panel); }
.mb-rd-head .rd-pick { width: 100%; max-width: none; min-width: 0; }
.mb-rd-head .rd-tabs { display: flex; width: 100%; border-radius: 10px; }
.mb-rd-head .rd-tab { flex: 1; height: var(--mb-touch); font-size: 15px; }
body.bw-phone .rd-panel { padding: 4px; overscroll-behavior: contain; }
body.bw-phone .rd-node { min-height: var(--mb-touch); align-items: center; padding: 4px; font-size: 16px; line-height: 1.3; }
body.bw-phone .rd-caret { width: 30px; align-self: stretch; display: flex; align-items: center; justify-content: center; font-size: 14px; }
body.bw-phone .rd-tree ul { padding-left: 12px; }
body.bw-phone .rd-item { padding: 10px 8px; min-height: var(--mb-touch); font-size: 16px; }
body.bw-phone .rd-hit { padding: 10px 8px 12px; font-size: 16px; }
body.bw-phone .rd-snip { font-size: 14px; }
body.bw-phone .rd-searchbar { flex-wrap: wrap; }
/* the Bible Dictionaries window: the list of entries is a drawer over the page */
body.bw-phone .dict-win .dict-body { position: relative; }
body.bw-phone .dict-win .dict-toc { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: min(88%, 380px); background: var(--bg); border-right: 1px solid var(--line-strong); box-shadow: 10px 0 32px oklch(0 0 0 / 0.35); overscroll-behavior: contain; }
body.bw-phone .dict-win .dict-frame { width: 100%; }
body.bw-phone .dict-toc .rd-item { padding: 10px 8px; min-height: var(--mb-touch); font-size: 16px; }
body.bw-narrow .dict-bar { gap: 6px; }
body.bw-narrow .dict-word { min-width: 0; flex: 1 1 100px; }
body.bw-narrow .dict-frame { min-height: 260px; }
/* the Lexicon Browser: the list above the entry instead of beside it */
body.bw-phone .lxb-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(130px, 36%) minmax(0, 1fr); }
body.bw-phone .lxb-split { display: none; }
body.bw-phone .lxb-left { border-right: 0; border-bottom: 2px solid var(--line-strong); }
body.bw-phone .lxb-menu { overflow-x: auto; scrollbar-width: none; }
body.bw-phone .lxb-menu button { flex: none; min-height: var(--mb-touch); padding: 0 12px; }
body.bw-phone .lxb-right { padding: 10px 12px 32px; }
/* Treasury of Scripture Knowledge, Nave's Topical Bible, Bible Outline: the three or two columns stack, rows get a finger's height */
body.bw-phone .tp-grid, body.bw-phone .tp-two { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: min-content; overflow-y: auto; align-content: start; }
body.bw-phone .tp-grid > div, body.bw-phone .tp-two > div { height: min(340px, 50vh); height: min(340px, 50dvh); min-height: 0; }
body.bw-phone .tp-item { padding: 11px 8px; }
body.bw-phone .tp-ref { padding: 10px 8px; }
body.bw-phone .tp-bar .tp-search { flex: 1 1 100%; }
body.bw-phone .ol-main { grid-template-columns: 104px minmax(0, 1fr); }
body.bw-phone .ol-book { min-height: var(--mb-touch); display: flex; align-items: center; font-size: 14px; }
body.bw-phone .ol-head { padding: 10px 10px; font-size: 16px; }
body.bw-phone .ol-set { max-width: 100%; width: 100%; min-width: 0; }
body.bw-phone .ol-wrap, body.bw-phone .tp, body.bw-phone .lxb { grid-template-columns: minmax(0, 1fr); }
/* a scripture reference tapped in a page: the verse in a card, with Go to verse */
.mb-card, .mb-card-scrim, .mb-return { display: none; }
body.bw-narrow .mb-card-scrim { display: block; position: fixed; inset: 0; z-index: 90400; background: oklch(0 0 0 / 0.45); }
body.bw-narrow .mb-card {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90500; max-height: 72vh; max-height: 72dvh;
  background: var(--bg); color: var(--ink); border-radius: 18px 18px 0 0; box-shadow: 0 -12px 40px oklch(0 0 0 / 0.35); padding-bottom: var(--mb-safe-b); animation: mb-up 200ms var(--ease);
}
.mb-card > header { padding: 16px 16px 6px; color: var(--ref); font-size: 16px; }
.mb-card-body { overflow: auto; padding: 4px 16px 10px; overscroll-behavior: contain; }
.mb-card-body .vtext { font-size: 17px; line-height: 1.6; max-width: none; margin: 0 0 8px; }
.mb-card-body .vtext.greek { font-size: 19px; }
.mb-card-body .vtext.hebrew { font-size: 23px; }
.mb-card > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--panel); }
body.bw-narrow .mb-return {
  display: inline-flex; align-items: center; gap: 6px; position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 50%; transform: translateX(-50%); z-index: 89000;
  max-width: calc(100vw - 24px); background: var(--chrome); color: var(--chrome-ink); border-color: oklch(1 0 0 / 0.2); box-shadow: 0 8px 24px oklch(0 0 0 / 0.35);
}
body.bw-narrow .mb-return span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toolwin.mb-away { display: none !important; }

/* ================================================================ popups opened by a tap */
body.bw-narrow .ws-popup, body.bw-narrow .tooltip, body.bw-narrow .xr-pop, body.bw-narrow .lx-pop, body.bw-narrow .ol-pop, body.bw-narrow .st-cmdpop, body.bw-narrow .st-histpop,
body.bw-narrow .mp-pop, body.bw-narrow .ov-tip { max-width: calc(100vw - 16px); }
body.bw-narrow .ws-popup, body.bw-narrow .tooltip { font-size: 14px; }
/* a tapped word: its Word Tips would cover the text and say again what the bar at the bottom says and the Analysis tab shows in
   full (tap the bar to go there), so on the phone it is not shown */
body.bw-narrow .ws-popup.ws-tip { display: none !important; }
body.bw-narrow .refpop { width: calc(100vw - 16px); max-height: 52vh; }
body.bw-narrow .refpop-head { padding: 4px 4px 4px 12px; min-height: var(--mb-touch); }
body.bw-narrow .refpop-x { width: var(--mb-touch); height: var(--mb-touch); font-size: 24px; }
body.bw-narrow .toast { left: 8px; right: 8px; bottom: calc(var(--mb-safe-b) + 72px); max-width: none; }

/* ================================================================ word peek: what a tap on a word found, above the bottom bar */
body.bw-narrow .mb-peek {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px 4px 6px 14px;
  border-radius: 14px; background: var(--chrome); color: var(--chrome-ink); box-shadow: 0 8px 28px oklch(0 0 0 / 0.35); animation: mb-up 180ms var(--ease);
}
body.bw-narrow .mb-peek[hidden] { display: none; }
body.bw-narrow .mb-peek:not([hidden]) { display: flex; }
.mb-peek-open { flex: 1 1 auto; min-width: 0; min-height: var(--mb-touch); display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: inherit; text-align: left; font-size: 14px; cursor: pointer; }
.mb-peek-word { flex: none; font-family: var(--text-greek); font-size: 24px; font-weight: 600; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-peek-word.hebrew { font-family: var(--text-hebrew); font-size: 27px; }
.mb-peek-text { min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
.mb-peek-text b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-peek-text span { color: var(--chrome-ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-peek-go { flex: none; color: var(--chrome-ink-2); }
.mb-peek-x { flex: none; width: var(--mb-touch); height: var(--mb-touch); display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--chrome-ink-2); cursor: pointer; }

body.bw-narrow:has(.mb-peek:not([hidden])) .toast { bottom: calc(var(--mb-safe-b) + 140px); }

/* ================================================================ the BibleWorks Keyboard: docked at the bottom, so the Command Line above it stays in view */
body.bw-phone .toolwin[data-id="ws-keyboard"] {
  inset: auto 0 0 0 !important; height: auto !important; max-height: 62dvh; border-radius: 16px 16px 0 0; border-top: 1px solid var(--line-strong);
  box-shadow: 0 -10px 32px oklch(0 0 0 / 0.3); padding-top: 0; grid-template-rows: auto minmax(0, 1fr);
}
body.bw-phone .toolwin[data-id="ws-keyboard"] .toolwin-head { height: 44px; min-height: 44px; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-window { padding: 0 6px 10px; gap: 6px; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-menu, body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-note, body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-opts .ws-muted { display: none; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-opts { flex-wrap: wrap; font-size: 13px; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-opts > .btn { display: none; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-board { gap: 4px; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-row { gap: 3px; padding-left: 0 !important; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-key { height: 46px; border-radius: 6px; min-width: 0; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-key span { font-size: 19px; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-key small { display: none; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-key.wide { flex: 1.5 1 0; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-key.wide span { font-size: 11px; }
body.bw-phone .toolwin[data-id="ws-keyboard"] .kb-tab { min-height: var(--mb-touch); flex: 1; }

/* ================================================================ a phone turned sideways: the bottom bar becomes a rail at the left */
body.bw-landscape { grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
body.bw-landscape .mb-top { grid-column: 1 / -1; grid-row: 1; padding-block: 4px; }
body.bw-landscape .mb-bar { grid-column: 1; grid-row: 2; grid-template-columns: none; grid-template-rows: repeat(3, minmax(0, 1fr)); border-top: 0; padding-bottom: 0; border-right: 1px solid oklch(1 0 0 / 0.1); }
body.bw-landscape .mb-tab { min-height: 0; }
body.bw-landscape .mb-tab.on::before { top: 22%; bottom: 22%; left: 0; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
body.bw-landscape .mb-badge { top: 6px; left: calc(50% + 6px); }
body.bw-landscape .panes { grid-column: 2; grid-row: 2; }
body.bw-landscape .pane-head { height: 40px; }

@media (prefers-reduced-motion: reduce) {
  body.bw-phone .rd.mb-rd .rd-side, body.bw-narrow .mb-card { transition: none; animation: none; }
  body.bw-narrow .mb-sheet, body.bw-narrow .menu-pop, body.bw-narrow .mb-peek, body.bw-phone .toolwin { animation: none; }
  .mb-switch, .mb-switch::after { transition: none; }
}