/* Generated by tools/fonts_css.py from the disc's System-TrueType_Fonts: every BibleWorks font by its own name. */
@font-face { font-family: "Archaic Greek"; src: url("/a/f/Archaic_Greek-19114387.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BwChrome"; src: url("/a/f/bwchrome-8D43AB44.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwcopm"; src: url("/a/f/bwcopm-B061CE48.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwcopx"; src: url("/a/f/bwcopx-F04ABA4C.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BwCyrl"; src: url("/a/f/bwcyrl-CFF97B15.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bweess"; src: url("/a/f/bweess-A216CB63.woff2") format("woff2"); font-weight: 5; font-style: normal; font-display: swap; }
@font-face { font-family: "Bweeti"; src: url("/a/f/bweeti-B95BC97C.woff2") format("woff2"); font-weight: 5; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwgrkd"; src: url("/a/f/BWGRKD-5063085B.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwgrki"; src: url("/a/f/bwgrki-9D1F9E50.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwgrkl"; src: url("/a/f/bwgrkl-5145AB91.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwgrkn"; src: url("/a/f/bwgrkn-2EA57A10.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwheba"; src: url("/a/f/bwheba-38F363CF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwhebb"; src: url("/a/f/bwhebb-37E8A594.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwhebl"; src: url("/a/f/bwhebl-CCFD994E.woff2") format("woff2"); font-weight: 5; font-style: normal; font-display: swap; }
@font-face { font-family: "BWLexa"; src: url("/a/f/bwlexa-1474B8CA.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BWLexs"; src: url("/a/f/bwlexs-5E949F3E.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BWSupp"; src: url("/a/f/BWSupp-5EC103F0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BWSupp"; src: url("/a/f/BWSupps-DC125DE1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BWSupps"; src: url("/a/f/BWSupps-DC125DE1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BWSymbol"; src: url("/a/f/bwsymbol-181B8530.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BWSymbs"; src: url("/a/f/BWSYMBS-9DA16B07.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwtransh"; src: url("/a/f/bwtransh-E192A0F4.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "BWTranshs"; src: url("/a/f/bwtranshs-9A0A9A01.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bwviet"; src: url("/a/f/bwviet-1B5953B9.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Evyoni Palaeo"; src: url("/a/f/EVYOP__-BA8E7560.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EVYOP__"; src: url("/a/f/EVYOP__-BA8E7560.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Galatia SIL"; src: url("/a/f/GalSILB-45C46C32.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GalSILB"; src: url("/a/f/GalSILB-45C46C32.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Galatia SIL"; src: url("/a/f/GalSILR-0C9D219E.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GalSILR"; src: url("/a/f/GalSILR-0C9D219E.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gezer Calendar"; src: url("/a/f/Gezer_Calendar-AE451954.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Greek Coin"; src: url("/a/f/Greek_Coin-04943DCA.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hebrew Seals"; src: url("/a/f/Hebrew_Seals-15F4E9CF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hebrew"; src: url("/a/f/hebrew-86BDAFC9.woff2") format("woff2"); font-weight: 5; font-style: normal; font-display: swap; }
@font-face { font-family: "Isaiah Scroll"; src: url("/a/f/Isaiah_Scroll-4D43F2AE.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ivory Pomegranate"; src: url("/a/f/Ivory_Pomegranate-83BECB9D.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Izbet Sartah"; src: url("/a/f/Izbet_Sartah-AF660B10.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ketef Hinnom"; src: url("/a/f/Ketef_Hinnom_1-1033C049.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ketef Hinnom 1"; src: url("/a/f/Ketef_Hinnom_1-1033C049.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ketef Hinnom 2"; src: url("/a/f/Ketef_Hinnom_2-D4958D67.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lachish 3"; src: url("/a/f/Lachish_3-4DB712FA.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ostracon"; src: url("/a/f/Lachish_4-9114A3E1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lachish 4"; src: url("/a/f/Lachish_4-9114A3E1.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lachish 5"; src: url("/a/f/Lachish_5-1D663ABF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Moabite Stone"; src: url("/a/f/Moabite_Stone-8812697C.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nabataean"; src: url("/a/f/Nabataean-D5871A48.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nahal Hever"; src: url("/a/f/Nahal_Hever_Scribe_A-9B3D7276.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nahal Hever Scribe A"; src: url("/a/f/Nahal_Hever_Scribe_A-9B3D7276.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nahal Hever"; src: url("/a/f/Nahal_Hever_Scribe_B-3E75169E.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nahal Hever Scribe B"; src: url("/a/f/Nahal_Hever_Scribe_B-3E75169E.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Paleo Hebrew"; src: url("/a/f/PaleoHebrew-13A8BDBB.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PaleoHebrew"; src: url("/a/f/PaleoHebrew-13A8BDBB.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Papyrus P66"; src: url("/a/f/Papyrus_P66-F59F4F65.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Papyrus P75"; src: url("/a/f/Papyrus_P75-EDE4D8FB.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Protosinaitic"; src: url("/a/f/Proto_Sinaitic_13-EC536AA5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Proto Sinaitic 13"; src: url("/a/f/Proto_Sinaitic_13-EC536AA5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Protosinaitic 1"; src: url("/a/f/Proto-Sinaitic_15-A854505B.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Proto-Sinaitic 15"; src: url("/a/f/Proto-Sinaitic_15-A854505B.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rosetta Greek"; src: url("/a/f/Rosetta_Stone-A85C1AC8.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rosetta Stone"; src: url("/a/f/Rosetta_Stone-A85C1AC8.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Samaria"; src: url("/a/f/Samaria_Ostraca-D3FFE09A.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Samaria Ostraca"; src: url("/a/f/Samaria_Ostraca-D3FFE09A.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Samaritan"; src: url("/a/f/Samaritan-1EA07847.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SBL BibLit"; src: url("/a/f/SBL_BLit-D8842F7D.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SBL_BLit"; src: url("/a/f/SBL_BLit-D8842F7D.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SBL Greek"; src: url("/a/f/SBL_grk-5735807E.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SBL_grk"; src: url("/a/f/SBL_grk-5735807E.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SBL Hebrew"; src: url("/a/f/SBL_Hbrw-10B6B899.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SBL_Hbrw"; src: url("/a/f/SBL_Hbrw-10B6B899.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ezra SIL"; src: url("/a/f/SILEOT-0A75DDC0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SILEOT"; src: url("/a/f/SILEOT-0A75DDC0.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ezra SIL SR"; src: url("/a/f/SILEOTSR-D509B45C.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "SILEOTSR"; src: url("/a/f/SILEOTSR-D509B45C.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Siloam Stone"; src: url("/a/f/Siloam-B8119724.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Siloam"; src: url("/a/f/Siloam-B8119724.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sinaiticus"; src: url("/a/f/Sinaiticus-B2AC45D3.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tel Dan Inscription"; src: url("/a/f/Tel_Dan-2CFB6574.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tel Dan"; src: url("/a/f/Tel_Dan-2CFB6574.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tel Zayit"; src: url("/a/f/Tel_Zayit-72F5C9FC.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Theodotus"; src: url("/a/f/Theodotus-3E8B7A3B.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ugaritic"; src: url("/a/f/Ugaritic-6CCCF93F.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Washingtonensis"; src: url("/a/f/Washingtonensis-17D316DF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lachish 5"; src: url("/a/f/Yavneh_Yam-02380AAF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Yavneh Yam"; src: url("/a/f/Yavneh_Yam-02380AAF.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gentium Plus"; src: url("/a/f/GentiumPlus-R-6057C754.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GentiumPlus-R"; src: url("/a/f/GentiumPlus-R-6057C754.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gentium Plus"; src: url("/a/f/GentiumPlus-I-62EC05E8.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "GentiumPlus-I"; src: url("/a/f/GentiumPlus-I-62EC05E8.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* BibleWorks 10, ported. Layout and color meanings follow BibleWorks 10; the finish is new. */

@font-face { font-family: "SBL BibLit"; src: url("/a/f/SBL_BLit-D8842F7D.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SBL Greek"; src: url("/a/f/SBL_grk-5735807E.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SBL Hebrew"; src: url("/a/f/SBL_Hbrw-10B6B899.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "BWGrkL"; src: url("/a/f/bwgrkl-5145AB91.woff2") format("woff2"); }
@font-face { font-family: "BWHebB"; src: url("/a/f/bwhebb-37E8A594.woff2") format("woff2"); }
@font-face { font-family: "BWSymbol"; src: url("/a/f/bwsymbol-181B8530.woff2") format("woff2"); }
@font-face { font-family: "BWTransH"; src: url("/a/f/bwtransh-E192A0F4.woff2") format("woff2"); }

:root {
  color-scheme: light;
  /* chrome: menu, toolbar, pane headers, status bar stay dark in both themes, as in BibleWorks 10 */
  --chrome: oklch(0.235 0 0);
  --chrome-2: oklch(0.285 0 0);
  --chrome-3: oklch(0.34 0 0);
  --chrome-ink: oklch(0.95 0 0);
  --chrome-ink-2: oklch(0.78 0 0);
  --chrome-hover: oklch(0.38 0 0);

  --bg: oklch(1 0 0);
  --panel: oklch(0.975 0.003 250);
  --panel-2: oklch(0.955 0.004 250);
  --line: oklch(0.88 0.004 250);
  --line-strong: oklch(0.78 0.006 250);
  --ink: oklch(0.21 0.005 250);
  --ink-2: oklch(0.42 0.006 250);
  --ink-3: oklch(0.52 0.006 250);

  --ref: oklch(0.46 0.16 262);          /* verse references, BibleWorks blue */
  --ref-strong: oklch(0.38 0.17 262);
  --hit-bg: oklch(0.93 0.12 98);        /* search hits */
  --hit-ink: oklch(0.32 0.14 262);
  --sel-bg: oklch(0.92 0.045 255);      /* current verse / selected row */
  --sel-strong: oklch(0.55 0.15 258);
  --link: oklch(0.47 0.10 195);         /* references inside lexicons and notes */
  --code: oklch(0.50 0.14 28);          /* morphology codes */
  --lemma: oklch(0.33 0.10 150);
  --strongs: oklch(0.50 0.08 300);
  --label: oklch(0.55 0.01 250);        /* version labels */
  --focus: oklch(0.58 0.16 258);
  --warn-bg: oklch(0.95 0.05 75);
  --warn-ink: oklch(0.42 0.10 60);
  --err-ink: oklch(0.50 0.18 25);

  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --text-latin: "SBL BibLit", "Iowan Old Style", Georgia, serif;
  --text-greek: "SBL BibLit", "SBL Greek", "Iowan Old Style", serif;
  --text-hebrew: "SBL Hebrew", "SBL BibLit", "Times New Roman", serif;

  --fs-ui: 13px;
  --fs-small: 11.5px;
  --fs-latin: 16px;
  --fs-greek: 17px;
  --fs-hebrew: 21px;

  --r: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* tool windows stack from 20 upward as they are focused; menus, toasts and tips always sit above them */
  --z-menu: 100000; --z-popover: 100005; --z-dialog: 100008; --z-toast: 100010; --z-tip: 100020;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: oklch(0.175 0.004 250);
    --panel: oklch(0.205 0.005 250);
    --panel-2: oklch(0.23 0.006 250);
    --line: oklch(0.31 0.006 250);
    --line-strong: oklch(0.40 0.008 250);
    --ink: oklch(0.93 0.004 250);
    --ink-2: oklch(0.78 0.006 250);
    --ink-3: oklch(0.68 0.006 250);
    --ref: oklch(0.76 0.12 258);
    --ref-strong: oklch(0.84 0.10 258);
    --hit-bg: oklch(0.46 0.10 98);
    --hit-ink: oklch(0.97 0.03 98);
    --sel-bg: oklch(0.31 0.06 255);
    --sel-strong: oklch(0.70 0.13 258);
    --link: oklch(0.78 0.09 195);
    --code: oklch(0.78 0.11 35);
    --lemma: oklch(0.80 0.10 150);
    --strongs: oklch(0.76 0.08 300);
    --label: oklch(0.66 0.01 250);
    --warn-bg: oklch(0.33 0.05 75);
    --warn-ink: oklch(0.88 0.08 80);
    --err-ink: oklch(0.75 0.15 25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.175 0.004 250);
  --panel: oklch(0.205 0.005 250);
  --panel-2: oklch(0.23 0.006 250);
  --line: oklch(0.31 0.006 250);
  --line-strong: oklch(0.40 0.008 250);
  --ink: oklch(0.93 0.004 250);
  --ink-2: oklch(0.78 0.006 250);
  --ink-3: oklch(0.68 0.006 250);
  --ref: oklch(0.76 0.12 258);
  --ref-strong: oklch(0.84 0.10 258);
  --hit-bg: oklch(0.46 0.10 98);
  --hit-ink: oklch(0.97 0.03 98);
  --sel-bg: oklch(0.31 0.06 255);
  --sel-strong: oklch(0.70 0.13 258);
  --link: oklch(0.78 0.09 195);
  --code: oklch(0.78 0.11 35);
  --lemma: oklch(0.80 0.10 150);
  --strongs: oklch(0.76 0.08 300);
  --label: oklch(0.66 0.01 250);
  --warn-bg: oklch(0.33 0.05 75);
  --warn-ink: oklch(0.88 0.08 80);
  --err-ink: oklch(0.75 0.15 25);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink); font: var(--fs-ui)/1.4 var(--ui);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- menu bar */
.menubar {
  background: var(--chrome); color: var(--chrome-ink); display: flex; align-items: center; gap: 2px;
  height: 30px; padding: 0 8px; user-select: none; position: relative; z-index: 10;
}
.menubar .logo { width: 20px; height: 20px; margin-right: 8px; }
.menubar .app-title { margin-left: auto; color: var(--chrome-ink-2); font-size: var(--fs-small); }
.menu-top {
  background: none; border: 0; padding: 4px 9px; border-radius: 4px; color: var(--chrome-ink); cursor: default;
}
.menu-top:hover, .menu-top[aria-expanded="true"] { background: var(--chrome-hover); }
.menu-pop {
  position: fixed; min-width: 260px; max-height: calc(100vh - 40px); overflow: auto; padding: 4px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 12px 32px oklch(0 0 0 / 0.22), 0 2px 6px oklch(0 0 0 / 0.12); z-index: var(--z-menu);
  animation: pop-in 140ms var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-3px); } }
.menu-item {
  display: flex; align-items: center; gap: 16px; width: 100%; border: 0; background: none; text-align: left;
  padding: 5px 10px 5px 26px; border-radius: 5px; cursor: default; position: relative; white-space: nowrap;
}
.menu-item:hover, .menu-item:focus-visible, .menu-item.open { background: var(--sel-strong); color: white; outline: none; }
.menu-item .kbd { margin-left: auto; color: var(--ink-3); font-size: var(--fs-small); }
.menu-item:hover .kbd { color: oklch(1 0 0 / 0.8); }
.menu-item .sub { margin-left: auto; opacity: 0.7; }
.menu-item.checked::before { content: "✓"; position: absolute; left: 9px; }
.menu-item.unported { color: var(--ink-3); }
.menu-item.unported:hover { color: white; }
.menu-sep { height: 1px; background: var(--line); margin: 4px 6px; }

/* ---------------------------------------------------------------- toolbar */
.toolbar {
  background: var(--chrome-2); display: flex; flex-wrap: nowrap; gap: 1px; padding: 3px 6px; overflow: hidden;
  border-top: 1px solid oklch(1 0 0 / 0.06); user-select: none;
}
.toolbar.wrapped { flex-wrap: wrap; }
.tb {
  width: 31px; height: 33px; padding: 0; border: 0; border-radius: 5px; background: transparent; display: grid;
  place-items: center; cursor: pointer; flex: none;
}
.tb img { display: block; image-rendering: auto; }
.tb.wide { width: 46px; }
.tb:hover { background: var(--chrome-hover); }
.tb.on { background: var(--chrome-3); box-shadow: inset 0 -2px 0 var(--sel-strong); }
.tb.unported { opacity: 0.55; }

/* ---------------------------------------------------------------- panes */
.panes { display: grid; grid-template-columns: var(--w-search, 25%) 5px minmax(0, 1fr) 5px var(--w-analysis, 31%); min-height: 0; }
.panes.no-analysis { grid-template-columns: var(--w-search, 25%) 5px minmax(0, 1fr) 0 0; }
.panes.no-analysis .analysis, .panes.no-analysis .split.right { display: none; }
.split { background: var(--line); cursor: col-resize; }
.split:hover, .split.drag { background: var(--focus); }
.pane { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--bg); }
.pane-head {
  display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; background: var(--chrome-3);
  color: var(--chrome-ink); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.01em; user-select: none;
}
.pane-head .spacer { flex: 1; }
.pane-head button { background: none; border: 0; color: var(--chrome-ink-2); padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.pane-head button:hover { background: var(--chrome-hover); color: var(--chrome-ink); }

.ctl { height: 26px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--bg); padding: 0 8px; }
.ctl:hover { border-color: var(--ink-3); }
select.ctl { padding-right: 4px; }
.btn {
  height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--panel);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--panel-2); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--sel-strong); border-color: var(--sel-strong); color: white; }

/* ---------------------------------------------------------------- search window */
.tabs-row { display: flex; align-items: stretch; background: var(--panel); border-bottom: 1px solid var(--line); }
.tabs-row .result-tabs { flex: 1 1 0; min-width: 0; border-bottom: 0; }
.tab-side { display: flex; flex: none; border-left: 1px solid var(--line); }
.tab-btn { width: 26px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.tab-btn:hover:not(:disabled) { background: var(--panel-2); color: var(--ink); }
.tab-btn:disabled { color: var(--ink-3); opacity: 0.45; cursor: default; }
.tab-btn:focus-visible, .spin button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
#search-pane.ws-cmd-bottom .tabs-row { order: 1; }
.msg-row { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.msg-row .search-msg { flex: 1 1 0; min-width: 0; }
.spin { display: flex; flex: none; border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; background: var(--bg); }
.spin button { width: 20px; height: 16px; border: 0; background: none; color: var(--ink-2); display: grid; place-items: center; padding: 0; cursor: pointer; }
.spin button + button { border-left: 1px solid var(--line); }
.spin button:hover { background: var(--panel-2); color: var(--ink); }
.result-tabs { display: flex; flex-wrap: wrap; gap: 0; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.result-tabs button {
  flex: 1 0 auto; min-width: 26px; height: 24px; border: 0; border-right: 1px solid var(--line); background: none;
  color: var(--ink-2); font-size: var(--fs-small); cursor: pointer; font-variant-numeric: tabular-nums;
}
.result-tabs button.active { background: var(--bg); color: var(--ref-strong); font-weight: 600; box-shadow: inset 0 -2px 0 var(--sel-strong); }
.result-tabs button.has::after { content: "*"; }
.search-top { padding: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border-bottom: 1px solid var(--line); background: var(--panel); }
.search-top > * { min-width: 0; }   /* a long version name in the select must not widen the column: the Command Line would run over the Browse Window */
.cmdline {
  width: 100%; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r); padding: 0 10px; background: var(--bg);
  font-family: var(--text-latin); font-size: 15px;
}
.cmdline:focus { border-color: var(--focus); outline: 3px solid oklch(from var(--focus) l c h / 0.25); outline-offset: 0; }
.cmdline.greek { font-family: var(--text-greek); font-size: 16px; }
.cmdline.hebrew { font-family: var(--text-hebrew); font-size: 19px; }
.search-row { display: flex; gap: 6px; align-items: center; }
.search-row .ctl { min-width: 0; }
.search-row .grow { flex: 1 1 0; width: 0; }
/* placeholders: the browsers' own grey was 2.4:1 on white in Safari; --ink-3 is 5.4:1 light and 6:1 dark */
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
.search-msg { font-size: var(--fs-small); color: var(--ink-2); min-height: 16px; }
.search-msg.err { color: var(--err-ink); }

.results { overflow: auto; outline: none; contain: strict; position: relative; }
.results-inner { position: relative; }
.res-row {
  position: absolute; left: 0; right: 0; height: var(--res-row, 26px); display: grid; grid-template-columns: 22px 78px minmax(0, 1fr);
  align-items: center; gap: 4px; padding: 0 8px 0 4px; border-bottom: 1px solid oklch(from var(--line) l c h / 0.6);
  cursor: default; white-space: nowrap;
}
.res-row:hover { background: var(--panel); }
.res-row.cur { background: var(--sel-bg); }
.res-row .ref { color: var(--ref); font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.res-row .kwic { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-family: var(--text-latin); font-size: 14px; }
.res-row .kwic.greek { font-family: var(--text-greek); font-size: 15px; }
.res-row .kwic.hebrew { font-family: var(--text-hebrew); font-size: 17px; direction: rtl; text-align: right; }
.res-row input { margin: 0; accent-color: var(--sel-strong); }
.results-empty { padding: 18px 14px; color: var(--ink-2); line-height: 1.55; }
.results-empty code { font-family: var(--mono); background: var(--panel-2); padding: 1px 5px; border-radius: 4px; color: var(--ink); }
.results-empty dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 10px 0 0; }
.results-empty dt { font-family: var(--mono); color: var(--ref); }
.results-empty dd { margin: 0; }
.search-foot { display: flex; justify-content: space-between; padding: 4px 10px; font-size: var(--fs-small); color: var(--ink-2);
  border-top: 1px solid var(--line); background: var(--panel); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- browse window */
.browse-bar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.browse-bar .heading { flex: 1 1 200px; min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browse-bar .heading .ref { color: var(--ref); }
.browse { overflow: auto; padding: 10px 18px 40px; scroll-padding-top: 12px; }
.browse .chapter-title { font-family: var(--ui); font-size: 15px; font-weight: 650; color: var(--ink); margin: 14px 0 8px; }
.verse-block { padding: 8px 10px; margin: 0 -10px; border-radius: 6px; scroll-margin-top: 10px; }
.verse-block.cur { background: var(--sel-bg); }
.verse-block .vref { color: var(--ref); font-weight: 650; font-family: var(--ui); font-size: 13.5px; margin-bottom: 2px; }
.vline { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; }
.vline + .vline { border-top: 1px dashed oklch(from var(--line) l c h / 0.7); margin-top: 3px; padding-top: 5px; }
.vline .vlabel {
  flex: none; width: 46px; font: 600 10.5px/1.3 var(--ui); color: var(--label); text-transform: none; letter-spacing: 0.02em;
  cursor: pointer; padding-top: 4px;
}
.vline .vlabel:hover { color: var(--ref); }
.vtext { flex: 1; min-width: 0; font-family: var(--text-latin); font-size: var(--fs-latin); line-height: 1.6; max-width: 80ch; }
.vtext.greek { font-family: var(--text-greek); font-size: var(--fs-greek); }
.vtext.hebrew { font-family: var(--text-hebrew); font-size: var(--fs-hebrew); direction: rtl; text-align: right; line-height: 1.75; max-width: none; }
:is(.vtext, .vtext-inline) .w { border-radius: 3px; cursor: default; }
:is(.vtext, .vtext-inline) .w:hover, :is(.vtext, .vtext-inline) .mw:hover { background: var(--panel-2); box-shadow: 0 0 0 2px var(--panel-2); }
:is(.vtext, .vtext-inline) .w.hit, :is(.vtext, .vtext-inline) .mw.hit { background: var(--hit-bg); color: var(--hit-ink); box-shadow: 0 0 0 1px var(--hit-bg); }
:is(.vtext, .vtext-inline) .w.pinned, :is(.vtext, .vtext-inline) .mw.pinned { outline: 2px solid var(--sel-strong); outline-offset: 1px; }
:is(.vtext, .vtext-inline) .str { color: var(--strongs); font: 10.5px var(--mono); vertical-align: super; margin: 0 1px; }
body:not(.show-strongs) :is(.vtext, .vtext-inline) .str { display: none; }
:is(.vtext, .vtext-inline) sup.xr, :is(.vtext, .vtext-inline) sup.fn { color: var(--link); font: 600 10px var(--ui); margin: 0 1px; cursor: pointer; }
body:not(.show-notes) :is(.vtext, .vtext-inline) sup.xr, body:not(.show-notes) :is(.vtext, .vtext-inline) sup.fn { display: none; }
:is(.vtext, .vtext-inline) .it { font-style: italic; }
:is(.vtext, .vtext-inline) .sc { font-variant: small-caps; }
:is(.vtext, .vtext-inline) .lem { color: var(--lemma); }
:is(.vtext, .vtext-inline) .mc { color: var(--code); font: 11.5px var(--mono); margin-left: 1px; }
:is(.vtext, .vtext-inline) .mj { color: var(--ink-3); }
.vnotes { margin: 4px 0 0 54px; font: 13px/1.55 var(--ui); color: var(--ink-2); max-width: 80ch; }
body:not(.show-notes) .vnotes { display: none; }
.vnotes .note + .note { margin-top: 4px; }
.vnotes a.ref, .vnotes .ref { color: var(--link); cursor: pointer; text-decoration: none; }
.vnotes a.ref:hover { text-decoration: underline; }
.bwgrk { font-family: "BWGrkL"; }
.bwheb { font-family: "BWHebB"; }
.bwsym { font-family: "BWSymbol"; }
.browse-mode .verse-flow { font-family: var(--text-latin); font-size: var(--fs-latin); line-height: 1.75; max-width: 75ch; }
.browse-mode .verse-flow.greek { font-family: var(--text-greek); font-size: var(--fs-greek); }
.browse-mode .verse-flow.hebrew { font-family: var(--text-hebrew); font-size: var(--fs-hebrew); direction: rtl; max-width: none; }
.browse-mode .vn { color: var(--ref); font: 600 10.5px var(--ui); vertical-align: super; margin: 0 3px 0 6px; cursor: pointer; }
.browse-mode .vspan.cur { background: var(--sel-bg); border-radius: 3px; }

/* ---------------------------------------------------------------- analysis window */
.atabs { display: flex; flex-wrap: wrap; background: var(--panel); border-bottom: 1px solid var(--line); padding: 3px 4px 0; gap: 2px; }
.atabs button {
  border: 1px solid transparent; border-bottom: 0; background: none; padding: 3px 8px; border-radius: 5px 5px 0 0;
  color: var(--ink-2); font-size: var(--fs-small); cursor: pointer;
}
.atabs button:hover { color: var(--ink); background: var(--panel-2); }
.atabs button.active { background: var(--bg); border-color: var(--line); color: var(--ink); font-weight: 600; margin-bottom: -1px; }
.atabs button.unported { color: var(--ink-3); }
.analysis-body { overflow: auto; padding: 12px 14px 40px; }
.an-src { color: var(--ink-3); font-size: var(--fs-small); margin-bottom: 8px; }
.an-word { font-family: var(--text-greek); font-size: 22px; font-weight: 600; }
.an-word.hebrew { font-family: var(--text-hebrew); font-size: 26px; direction: rtl; }
.an-parse { margin: 4px 0 12px; line-height: 1.5; }
.an-parse .code { font-family: var(--mono); color: var(--code); }
.an-parse .lemma { font-family: var(--text-greek); color: var(--lemma); font-weight: 600; }
.an-parse .lemma.hebrew { font-family: var(--text-hebrew); font-size: 18px; }
.an-section { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.an-section h3 { font-size: var(--fs-small); color: var(--ink-2); margin: 0 0 6px; font-weight: 650; }
.an-lex { font-family: var(--text-latin); font-size: 15px; line-height: 1.6; }
.an-lex .ref, .an-lex a { color: var(--link); cursor: pointer; text-decoration: none; }
.an-empty { color: var(--ink-2); line-height: 1.6; }
.an-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.an-table th, .an-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.an-table th { color: var(--ink-2); font-weight: 600; font-size: var(--fs-small); }
.an-table td.num { text-align: right; }
.bar { height: 8px; background: var(--sel-strong); border-radius: 2px; }
.notyet {
  background: var(--warn-bg); color: var(--warn-ink); border-radius: 8px; padding: 12px 14px; line-height: 1.55;
}
.notyet code { font-family: var(--mono); font-size: 12px; }

/* ---------------------------------------------------------------- status bar */
.statusbar {
  background: var(--chrome); color: var(--chrome-ink-2); display: flex; gap: 2px; align-items: center; height: 24px;
  padding: 0 8px; font-size: var(--fs-small); user-select: none;
}
.statusbar .sb-text { margin-right: auto; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.statusbar button {
  background: none; border: 0; color: var(--chrome-ink-2); padding: 1px 7px; border-radius: 4px; cursor: pointer; font-size: var(--fs-small);
}
.statusbar button:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.statusbar button.on { color: oklch(0.86 0.12 95); }
.statusbar .sb-ver { color: var(--chrome-ink); font-weight: 600; }
/* the areas in the order of the help (bwh12): message, search version, Limits, Strong's, Browse, Analysis, Verse / Chapter Notes and their lamps,
   TrNotes, Accents, Vowels, Qere, Kethib, the keyboard layout; what the program adds besides follows */
.statusbar > * { order: 30; }
.statusbar > .sb-text { order: 0; }
.statusbar > .sb-ver { order: 1; }
.statusbar > [data-key="105"] { order: 2; }
.statusbar > [data-key="toggle-strongs"] { order: 3; }
.statusbar > [data-key="106"] { order: 4; }
.statusbar > [data-key="toggle-analysis"] { order: 5; }
.statusbar > [data-key="notes-verse-mode"] { order: 6; }
.statusbar > [data-key="notes-chapter-mode"] { order: 7; }
.statusbar > #ws-sb-notes { order: 8; }
.statusbar > [data-key="toggle-notes"] { order: 9; }
.statusbar > [data-key="toggle-accents"] { order: 10; }
.statusbar > [data-key="toggle-vowels"] { order: 11; }
.statusbar > [data-key="toggle-qere"] { order: 12; }
.statusbar > [data-key="toggle-kethib"] { order: 13; }
.statusbar > #ws-sb-kb { order: 14; }

/* ---------------------------------------------------------------- popovers, dialogs, toasts */
.tooltip {
  position: fixed; z-index: var(--z-tip); max-width: 420px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: 0 8px 24px oklch(0 0 0 / 0.18);
  font-size: 13px; line-height: 1.5;
}
dialog.bw {
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 0; background: var(--bg); color: var(--ink);
  box-shadow: 0 24px 64px oklch(0 0 0 / 0.3); max-width: min(920px, 94vw); max-height: 88vh; width: 640px;
}
dialog.bw::backdrop { background: oklch(0 0 0 / 0.35); }
dialog.bw header { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 650; }
dialog.bw header button { margin-left: auto; }
dialog.bw .dlg-body { padding: 14px 16px; overflow: auto; max-height: calc(88vh - 110px); }
dialog.bw footer { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.ver-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; }
.ver-grid label { display: flex; gap: 6px; align-items: baseline; padding: 2px 4px; border-radius: 4px; }
.ver-grid label:hover { background: var(--panel); }
.ver-grid .vid { font-weight: 650; min-width: 54px; color: var(--ref); }
.ver-grid .vname { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ver-group h4 { margin: 12px 0 4px; font-size: var(--fs-small); color: var(--ink-2); }
.toast {
  position: fixed; right: 16px; bottom: 34px; z-index: var(--z-toast); max-width: 420px; padding: 10px 14px; border-radius: 10px;
  background: var(--chrome); color: var(--chrome-ink); box-shadow: 0 12px 32px oklch(0 0 0 / 0.3); line-height: 1.5;
  animation: toast-in 200ms var(--ease);
}
.toast small { display: block; color: var(--chrome-ink-2); margin-top: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.skeleton { background: linear-gradient(90deg, var(--panel) 0, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite; border-radius: 4px; height: 14px; margin: 8px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---------------------------------------------------------------- floating tool windows */
.toolwin {
  position: fixed; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 18px 48px oklch(0 0 0 / 0.28);
  overflow: visible; min-width: 280px; min-height: 160px; animation: pop-in 160ms var(--ease);
}
.toolwin-head {
  display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 12px; background: var(--chrome-3);
  color: var(--chrome-ink); font-weight: 600; font-size: var(--fs-small); cursor: move; user-select: none; touch-action: none;
  border-radius: 9px 9px 0 0;
}
/* a long title is cut short (a window can now be made narrow); the phone's sheet lets it wrap */
.toolwin-head > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toolwin-close { margin-left: auto; background: none; border: 0; color: var(--chrome-ink-2); width: 26px; height: 24px; border-radius: 5px; cursor: pointer; }
.toolwin-close:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.toolwin-body { overflow: auto; min-height: 0; border-radius: 0 0 9px 9px; }
/* Maximize / restore button (js/toolwin.js) */
.toolwin-maxbtn { margin-left: auto; display: grid; place-items: center; background: none; border: 0; color: var(--chrome-ink-2); width: 26px; height: 24px; border-radius: 5px; cursor: pointer; padding: 0; }
.toolwin-maxbtn:hover { background: var(--chrome-hover); color: var(--chrome-ink); }
.toolwin-maxbtn + .toolwin-close { margin-left: 0; }
html.bw-scheme .toolwin-head .toolwin-maxbtn { color: var(--bw-head-ink); }
/* Resizing: every edge and corner of a window is a handle that reaches 6 px outside it; a window that fills the workspace has none */
.toolwin-rz { position: absolute; z-index: 5; touch-action: none; }
.rz-n, .rz-s { left: 12px; right: 12px; height: 9px; cursor: ns-resize; }
.rz-e, .rz-w { top: 12px; bottom: 12px; width: 9px; cursor: ew-resize; }
.rz-n { top: -7px; } .rz-s { bottom: -7px; } .rz-e { right: -7px; } .rz-w { left: -7px; }
.rz-ne, .rz-nw, .rz-se, .rz-sw { width: 16px; height: 16px; }
.rz-ne { top: -7px; right: -7px; cursor: nesw-resize; } .rz-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.rz-se { bottom: -7px; right: -7px; cursor: nwse-resize; } .rz-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
/* the one visible grip: two short diagonal lines in the bottom right corner */
.rz-se::after { content: ""; position: absolute; right: 8px; bottom: 8px; width: 9px; height: 9px; opacity: 0.55; pointer-events: none;
  background: linear-gradient(135deg, transparent 0 46%, var(--ink-3) 46% 56%, transparent 56% 72%, var(--ink-3) 72% 82%, transparent 82%); }
.rz-se:hover::after { opacity: 1; }
.toolwin-max { border-radius: 0; animation: none; }
.toolwin-max .toolwin-head { border-radius: 0; cursor: default; }
.toolwin-max .toolwin-body { border-radius: 0; }
.toolwin-max .toolwin-rz { display: none; }
/* while a window moves or resizes, a transparent sheet over the page keeps the pages inside windows (iframes) from taking the pointer */
.toolwin-shield { position: fixed; inset: 0; z-index: 99999; background: transparent; touch-action: none; }
body.bw-touch .rz-se { width: 34px; height: 34px; bottom: -6px; right: -6px; }
body.bw-touch .rz-se::after { right: 12px; bottom: 12px; width: 14px; height: 14px; opacity: 0.7; }
body.bw-touch .rz-ne, body.bw-touch .rz-nw, body.bw-touch .rz-sw { width: 26px; height: 26px; }
body.bw-touch .rz-n, body.bw-touch .rz-s { height: 14px; } body.bw-touch .rz-e, body.bw-touch .rz-w { width: 14px; }
body.bw-touch .toolwin-maxbtn { width: 34px; height: 28px; }
body.bw-phone .toolwin-rz, body.bw-phone .toolwin-maxbtn { display: none; }

/* Hebrew kethiv {..} and qere [..] (WTT, WVT, UWTT, Targums) */
:is(.vtext, .vtext-inline) .ketiv { color: var(--ink-3); }
:is(.vtext, .vtext-inline) .ketiv::before { content: "("; } .vtext .ketiv::after { content: ")"; }
:is(.vtext, .vtext-inline) .qere::before { content: "["; } .vtext .qere::after { content: "]"; }

/* Qumran editorial sigla (QST/QSM; tools/bwtext.py QUMRAN_SIGLA): editors' marks recede, the scroll's letters stay ink */
.dss { color: var(--ink-3); font-weight: 400; }
.dss-letter { color: var(--ink-2); }
.dss-hole { letter-spacing: 0.05em; }
.dss-space { display: inline-block; min-width: 0.5em; border-bottom: 1px dotted var(--ink-3); }
.dss-vacat, .dss-unknown { font: italic var(--fs-small) var(--ui); unicode-bidi: isolate; direction: ltr; margin: 0 0.25em; }
.dss-unknown { text-decoration: underline dotted; }

.vline .vlabel .vmapped { display: block; font-weight: 500; color: var(--ink-3); font-size: 10px; }

.aw-options { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; color: var(--ink-2); }
.an-table tr.clickable { cursor: pointer; } .an-table tr.clickable:hover td { background: var(--panel); }
.an-table td.code { font-family: var(--mono); color: var(--code); font-size: 12px; }

/* interlinear morphology codes under the words (toolbar toggle) */
.vline.interlinear .vtext .w[data-il] { display: inline-flex; flex-direction: column; align-items: center; vertical-align: top; line-height: 1.25; }
.vline.interlinear .vtext .w[data-il]::after { content: attr(data-il); font: 10.5px/1.3 var(--mono); color: var(--code); direction: ltr; margin-top: 1px; }
.vline.interlinear .vtext { line-height: 2.1; }


/* paragraph markers (toggle-para): RSV paragraph starts, /api/text `para` */
.para-mark { display: none; color: var(--ink-3); font-weight: 400; }
body.show-para .para-mark { display: inline; }

/* ---------------------------------------------------------------- core dialogs (js/dialogs.js, js/solm.js) */
dialog.bwd { width: 480px; }
.bwd-msg p { margin: 0 0 8px; }
.bwd-cledit { width: 100%; font-size: 17px; margin-bottom: 10px; }
.bwd-cledit.greek { font-family: var(--text-greek); }
.bwd-cledit.hebrew { font-family: var(--text-hebrew); font-size: 20px; }
.bwd-check { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.bwd-hint { margin: 0 0 8px; color: var(--ink-2); }
.bwd-row { display: flex; align-items: center; gap: 8px; }
.bwd-num { width: 90px; }
dialog.bwd-wait { width: 380px; }
dialog.bwd-wait-status { width: 420px; }
.bwd-wait-text { margin-bottom: 8px; min-height: 1.4em; }
.bwd-progress { width: 100%; height: 10px; accent-color: var(--sel-strong); }
.bwd-meter { width: 100%; height: 10px; background: var(--panel-2); border-radius: 5px; overflow: hidden; }
.bwd-meter span { display: block; width: 0; height: 100%; background: var(--sel-strong); transition: width 120ms var(--ease); }
.bwd-status-line { text-align: center; padding: 3px 0; min-height: 1.6em; }
.bwd-meter-row { display: flex; align-items: center; gap: 12px; }
.bwd-grow { flex: 1; }
.bwd-usermsg { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.bwd-usermsg-text { padding: 12px 14px; overflow: auto; white-space: pre-wrap; }
.bwd-usermsg footer { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--panel); }
/* About OpenBible */
.bwd-about { display: block; }
.bwd-about-text h2 { margin: 0 0 6px; font-size: 20px; }
.bwd-about-text p { margin: 3px 0; }
.bwd-about-note { margin-top: 14px !important; color: var(--ink-2); line-height: 1.45; }
/* Search Limit Parameters (positions come from the program's own dialog resource) */
dialog.bwd-limdlg { width: auto; max-width: 96vw; }
.bwd-limwrap { overflow: auto; }
.bwd-limframe { position: relative; margin: 0 auto; }
.bwd-limgroup { position: absolute; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 6px; }
.bwd-limgroup legend { margin-left: 8px; padding: 0 4px; font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; }
.bwd-limbook { position: absolute; display: flex; align-items: center; gap: 3px; font-size: 12px; white-space: nowrap; }
.bwd-limbook input { margin: 0; }
.bwd-limbook.absent { color: var(--ink-3); opacity: 0.6; }
.bwd-limrange { position: absolute; display: flex; gap: 4px; }
.bwd-limrange .bwd-range { flex: 1; min-width: 0; }
.bwd-limactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bwd-limlist { width: 100%; font: 12.5px/1.5 var(--mono); }
/* Browse Box, Popup Command Line */
.bwd-browsebox { display: flex; gap: 10px; padding: 10px; height: 100%; }
.bwd-bbcol { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.bwd-list { width: 100%; flex: 1; min-height: 0; height: auto; }
.bwd-spin { display: flex; gap: 4px; justify-content: center; }
.bwd-spin .btn { padding: 0 8px; height: 22px; }
.bwd-spin.h { display: inline-flex; }
.bwd-popcl { display: flex; align-items: center; gap: 6px; padding: 10px; }
.bwd-popcl-input { flex: 1; min-width: 0; }
.bwd-popcl-ver { min-width: 54px; font-weight: 650; }
.bwd-popcl-input.greek { font-family: var(--text-greek); }
.bwd-popcl-input.hebrew { font-family: var(--text-hebrew); }
/* version tree */
.bwd-tree { max-height: 46vh; min-height: 180px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
.bwd-tree-lang { display: flex; align-items: center; gap: 6px; padding: 3px 4px; font-weight: 650; }
.bwd-tree-tog { background: none; border: 0; width: 20px; cursor: pointer; color: var(--ink-2); }
.bwd-tree-n { margin-left: auto; font-weight: 400; color: var(--ink-3); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.bwd-tree-kids { padding-left: 30px; }
.bwd-tree-ver { display: flex; gap: 6px; align-items: baseline; padding: 2px 4px; border-radius: 4px; }
.bwd-tree-ver:hover { background: var(--panel); }
.bwd-tree-ver .vid { font-weight: 650; min-width: 56px; color: var(--ref); }
.bwd-tree-ver .vname { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwd-choose-opts { display: flex; gap: 18px; flex-wrap: wrap; }
/* Far East input mode box on the Command Line (Insert key; help bwh17b) and the Hebrew special-code mode */
.search-top { position: relative; }
.ime-box { position: absolute; right: 42px; top: 7px; width: 10px; height: 10px; border-radius: 2px; animation: ime-blink 1s steps(2, jump-none) infinite; pointer-events: none; }
.ime-box[data-color="green"] { background: oklch(0.65 0.17 150); }
.ime-box[data-color="red"] { background: oklch(0.6 0.2 25); }
.ime-box[data-color="yellow"] { background: oklch(0.82 0.15 95); }
@keyframes ime-blink { 50% { opacity: 0.25; } }
.cmdline.code-mode { outline: 2px solid var(--code); outline-offset: -2px; }
.cmdline[lang="zh"], .cmdline[lang="zh-Hant"], .cmdline[lang="zh-Hans"], .cmdline[lang="ja"], .cmdline[lang="ko"] { font-family: "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans CJK SC", var(--ui); }
.vtext[dir="rtl"]:not(.hebrew) { font-family: "Geeza Pro", "Noto Naskh Arabic", "Arial", var(--text-latin); font-size: 1.15em; line-height: 1.9; }
/* SOLM tab (js/solm.js) and LXX variants */
.solm-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
.solm-tab { border: 1px solid var(--line-strong); background: var(--bg); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.solm-tab.on { background: var(--sel-strong); border-color: var(--sel-strong); color: white; }
.solm-tab.none { opacity: 0.55; }
.solm-bar { display: flex; justify-content: space-between; align-items: center; margin: 4px 0; color: var(--ink-2); }
.solm-frame { border: 1px solid var(--line); border-radius: 6px; }
.solm-h { font-size: var(--fs-ui); margin: 14px 0 4px; color: var(--ink-2); }
.solm-note { margin-top: 14px; font-size: var(--fs-small); }
.lxx-variants { margin: 2px 0 6px 72px; color: var(--ink-2); font-size: var(--fs-small); }
.lxx-variants summary { cursor: pointer; }
.lxx-var { cursor: pointer; color: var(--link); font-size: 0.72em; user-select: none; }
.lxx-var::after { content: attr(data-mark); }
.lxx-var:hover, .lxx-var:focus-visible { text-decoration: underline; }
/* Options flags: BHT display switches, Command Line range, plus between WTT morphemes */
body.bht-hide-acc .bht-acc, body.bht-hide-meth .bht-meth, body.bht-hide-shewa .bht-shewa { display: none; }
.in-range { box-shadow: inset 3px 0 0 var(--sel-strong); }
:is(.vtext, .vtext-inline) .w i.plus { font-style: normal; color: var(--ink-3); font-size: 0.8em; padding: 0 1px; }

/* Command Line Versions Button: the six indicator boxes turn yellow when a feature is on (help bwh09) */
.versions-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; white-space: nowrap; }
.vind { display: inline-grid; grid-template-columns: repeat(3, 6px); gap: 1px; }
.vind i { width: 6px; height: 6px; background: oklch(0.62 0.15 150); border-radius: 1px; }
.vind i.on { background: oklch(0.84 0.16 95); }

/* Search Window verse list: "Show Entire Verse Wrapped" (js/search.js) */
.results-inner.wrapped .res-row { position: relative; height: auto; min-height: 26px; align-items: start; padding-top: 3px; padding-bottom: 3px; }
.results-inner.wrapped .kwic { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }

/* Window title bars hide and show their controls (help bwh09: click the title bar; js/main.js initPaneHeads) */
.pane-head > span:first-child { cursor: pointer; }
.pane.controls-hidden .pane-controls, #browse-pane.controls-hidden .browse-bar, #analysis-pane.controls-hidden .atabs { display: none; }
.pane-head .collapse { margin-right: 6px; color: var(--chrome-ink-2); }

/* Scripture Reference Popups of the Word Analysis tab (click modes): a movable window per reference with a close button */
.refpop { position: fixed; z-index: 70; width: min(440px, calc(100vw - 16px)); max-height: 46vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 6px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28); }
.refpop-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 6px 4px 10px; background: var(--chrome-2); color: var(--chrome-ink); border-radius: 5px 5px 0 0; font-weight: 600; cursor: move; touch-action: none; user-select: none; }
.refpop-x { background: transparent; border: 0; color: inherit; font-size: 18px; line-height: 1; width: 26px; height: 26px; border-radius: 4px; cursor: pointer; }
.refpop-x:hover { background: var(--chrome-hover); }
.refpop-x:focus-visible { outline: 2px solid var(--ref); outline-offset: 1px; }
.refpop-body { overflow: auto; padding: 6px 10px 8px; }
.refpop-body .vline { display: flex; gap: 8px; margin: 3px 0; }
.refpop-body .vlabel { flex: none; min-width: 3.2em; color: var(--ink-3); font-size: 12px; padding-top: 3px; }

/* Words and Context tabs (js/wordtabs.js): three word lists, each with a title bar that turns green while the Full Wordlist and the search results
   wordlist are linked; only the rows in view are in the document, every row is 26px high */
:root { --wt-linked-bg: oklch(0.90 0.09 150); --wt-linked-ink: oklch(0.30 0.10 150); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wt-linked-bg: oklch(0.34 0.08 150); --wt-linked-ink: oklch(0.92 0.08 150); } }
:root[data-theme="dark"] { --wt-linked-bg: oklch(0.34 0.08 150); --wt-linked-ink: oklch(0.92 0.08 150); }
#analysis-body.wt-fill { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.wt-lists { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.wt-list { flex: 1 1 0; min-height: 96px; display: flex; flex-direction: column; border-top: 1px solid var(--line-strong); }
.wt-list:first-child { border-top: 0; }
.wt-head { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; background: var(--panel); border-bottom: 1px solid var(--line); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; }
.wt-head.linked { background: var(--wt-linked-bg); color: var(--wt-linked-ink); }
.wt-kind { color: var(--ink-3); flex: none; }
.wt-head.linked .wt-kind { color: inherit; }
.wt-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 650; }
.wt-meta { margin-left: auto; flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.wt-head.linked .wt-meta { color: inherit; }
.wt-scroll { flex: 1; min-height: 0; overflow: auto; }
.wt-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wt-table { table-layout: fixed; }
.wt-table td { padding: 0 6px; height: 26px; line-height: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.wt-table tr.wt-pad td { padding: 0; border: 0; height: auto; }
.wt-table td.vtext { direction: ltr; text-align: left; max-width: none; flex: none; font-size: 16px; line-height: 25px; }
.wt-table td.vtext.greek { font-size: 16px; }
.wt-table td.vtext.hebrew { font-size: 17px; }
.wt-table td.num { color: var(--ink-2); }
.wt-table tr.sel td { background: var(--sel-bg); }
.wt-table tr.cur td:first-child { box-shadow: inset 2px 0 0 var(--sel-strong); }
.wt-msg { padding: 10px 12px; }

/* ---------------------------------------------------------------- Analysis Window, round 5 (awbrowse.js, awverse.js, analysis.js, workspace/anatabs.js) */
/* a tab that fills the whole body and scrolls inside (the Browse tab, the Verse tabs): the body itself does not scroll */
.analysis-body.aw-fill { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.analysis-body.aw-fill > .awb, .analysis-body.aw-fill > .awv { flex: 1; min-height: 0; }
.aw-hint { color: var(--ink-3); font-size: var(--fs-small); }

/* Browse tab: header, text, Information Window */
.awb { display: flex; flex-direction: column; min-width: 0; }
.awb-head { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
.awb-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.awb-row[hidden], .awb-btn[hidden], .awb-info[hidden] { display: none; }
.awb-btn { height: 24px; padding: 0 8px; }
.awb-btn.on { background: var(--sel-bg); border-color: var(--sel-strong); }
.awb-ref { flex: 1; min-width: 0; text-align: center; color: var(--ref); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awb-outline { flex: 1; min-width: 0; }
.awb-boxes .ctl { min-width: 0; }
.awb-ver { flex: 0 0 72px; } .awb-book { flex: 1 1 auto; } .awb-ch, .awb-vs { flex: 0 0 56px; }
.awb-text { flex: 1; min-height: 0; overflow: auto; padding: 8px 14px 30px; outline: none; position: relative; }
.awb-text:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.awb-chaptitle { margin: 14px 0 4px; }
.awb-chap:first-child .awb-chaptitle { margin-top: 2px; }
.awb-text .vspan.cur { background: var(--sel-bg); border-radius: 3px; }
.awb-text .vspan.awb-here { box-shadow: -3px 0 0 var(--sel-strong); }
.awb-text .vspan .vn { color: var(--ref); font: 600 10px var(--ui); vertical-align: super; margin-right: 2px; cursor: default; }
.awb-text .verse-flow { font-family: var(--text-latin); font-size: var(--fs-latin); line-height: 1.75; }
.awb-text .verse-flow.greek { font-family: var(--text-greek); font-size: var(--fs-greek); }
.awb-text .verse-flow.hebrew { font-family: var(--text-hebrew); font-size: var(--fs-hebrew); direction: rtl; }
.awb-text .vspan .w:hover, .awb-text .vspan .mw:hover { background: var(--panel-2); box-shadow: 0 0 0 2px var(--panel-2); }
.awb-text .vspan .w.hit, .awb-text .vspan .mw.hit { background: var(--hit-bg); color: var(--hit-ink); box-shadow: 0 0 0 1px var(--hit-bg); }
.awb-text .vspan .w.pinned, .awb-text .vspan .mw.pinned { outline: 2px solid var(--sel-strong); outline-offset: 1px; }
.awb-text .vspan .str { color: var(--strongs); font: 10.5px var(--mono); vertical-align: super; margin: 0 1px; }
body:not(.show-strongs) .awb-text .str { display: none; }
.awb-multi .verse-block { margin: 0; }
.awb-info { flex: none; height: 30%; min-height: 96px; max-height: 50%; display: flex; flex-direction: column; border-top: 2px solid var(--line-strong); background: var(--bg); }
.awb-infohead { flex: none; padding: 2px 10px; background: var(--panel); border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; }
.awb-infobody { flex: 1; min-height: 0; overflow: auto; padding: 6px 10px 10px; }
.awb-def, .awb-desc { margin-top: 6px; font-size: 13px; }

/* Verse tabs (Vs1, Vs2): header with Back / Forward, module chooser, Expand, Menu, Search, then the module's page */
.awv { display: flex; flex-direction: column; min-width: 0; }
.awv-head { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
.awv-row { display: flex; align-items: center; gap: 4px; min-width: 0; flex-wrap: wrap; }
.awv-row .btn { height: 24px; padding: 0 8px; }
.awv-nav { padding: 0 7px; min-width: 28px; }
.awv-pick { flex: 1; min-width: 0; }
.awv-pick option.awv-none { color: var(--ink-3); }
.awv-where { margin-left: auto; color: var(--ref); font-weight: 650; white-space: nowrap; }
.awv-content { flex: 1; min-height: 0; overflow: auto; background: var(--bg); }
.awv-frame { display: block; width: 100%; height: 100%; border: 0; background: white; }
.awv-empty { padding: 14px; }

/* Toggle Analysis Window Heading (help bwh10a): the heading lines of the Analysis, Notes and Editor tabs */
body.aw-no-heading .ws-note-head .ws-note-row:first-child { display: none; }
body.aw-no-heading .rich .rich-status > :first-child { visibility: hidden; }

/* the title bars and the tab strips of the two Analysis Windows (workspace/anatabs.js) */
.atabs button.aw-dragging { opacity: 0.45; }
.atabs button.aw-drop-before { box-shadow: inset 3px 0 0 var(--sel-strong); }
.atabs button.aw-drop-after { box-shadow: inset -3px 0 0 var(--sel-strong); }
.atabs.aw-drop-end { box-shadow: inset 0 -3px 0 var(--sel-strong); }
body.ws-acols2 #ws-abody2.aw-fill { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
body.ws-acols2 #ws-abody2.aw-fill > .awb, body.ws-acols2 #ws-abody2.aw-fill > .awv { flex: 1; min-height: 0; }
#ws-ahead2 { display: none; }
body.ws-acols2 #analysis-pane > .pane-head:not(#ws-ahead2) { grid-column: 1; grid-row: 1; }
body.ws-acols2 #analysis-pane > #ws-ahead2 { display: flex; grid-column: 2; grid-row: 1; border-left: 1px solid var(--chrome-hover); }
body.ws-acols2 #ws-ahead2[hidden] { display: none; }
#analysis-pane .pane-head #ws-atab-hide, #analysis-pane .pane-head #ws-atab-hide2 { font-size: 15px; line-height: 1; padding: 2px 6px; }
/* Lockman lexicon section of the Word Analysis tab (awlockman.js) */
.aw-lockman { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.aw-lockman h3 { margin: 0 0 4px; font-size: var(--fs-small); color: var(--ink-3); font-weight: 650; }
.aw-lm-entry { margin: 4px 0 8px; font-size: 13px; }
.aw-lm-no { color: var(--code); font: 12px var(--mono); }
.aw-lm-head { font-size: 17px; }
.aw-lm-head.greek { font-family: var(--text-greek); } .aw-lm-head.hebrew { font-family: var(--text-hebrew); }
.aw-lm-gloss { color: var(--ink-2); }
.aw-lm-ety { color: var(--ink-3); font-size: 12px; }
.aw-lm-usage { margin-top: 2px; color: var(--ink-2); font-size: 12.5px; }
.awb-verseWords { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; align-content: flex-start; }
.awb-verseWords .awb-hint { flex-basis: 100%; color: var(--ink-3); font-size: var(--fs-small); margin-bottom: 4px; }
.awb-vw { height: 28px; font-size: 16px; }
.awb-vw.greek { font-family: var(--text-greek); } .awb-vw.hebrew { font-family: var(--text-hebrew); }

/* 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: 20px; --fs-hebrew: 22px;   /* the least a phone reads at; textsize.js raises them to the size chosen in Options > Fonts, and A- / A+ */
  --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: oklch(0.5 0.15 258);   /* the same blue in both themes: --sel-strong lightens in dark (white on it was 2.7:1); this is 4.9:1 */
  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); }
/* the reference sheet's jump to the Old / New Testament (mobile/refbar.js) */
.mb-testaments { display: flex; gap: 8px; padding: 4px 0 8px; position: sticky; top: 0; z-index: 1; background: var(--bg); }
/* phone: a verse found takes the whole width under its reference (the text column beside the reference left 5-8 words a line) */
body.bw-phone .results-inner.wrapped .res-row { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "box ref" "kwic kwic"; row-gap: 2px; padding-right: 12px; }
body.bw-phone .results-inner.wrapped .res-row input { grid-area: box; }
body.bw-phone .results-inner.wrapped .res-row .ref { grid-area: ref; }
body.bw-phone .results-inner.wrapped .res-row .kwic { grid-area: kwic; padding-left: 12px; }
body.bw-phone .res-row .kwic { font-size: 16px; }                          /* a verse found is reading text: 16 px like the rest of the phone's text */
body.bw-phone .res-row .ref { font-size: 15px; }
body.bw-phone .results-inner.wrapped .res-row input { width: 20px; height: 20px; }      /* with the 1.3 scale: about 26 px, over the 24 px minimum target */
/* a search that found nothing: the program's sentence in place, and a button that searches a version on the screen that has the words */
.search-msg .search-try { margin-left: 6px; }
body.bw-narrow .search-msg .search-try { min-height: 40px; margin: 6px 0 2px; font-size: 14px; }
/* phone (mobile/panehead.js): the Search and Analysis title bars fold into a "..." at the end of the next row; the bottom bar names the window */
body.bw-phone #search-pane > .pane-head, body.bw-phone #analysis-pane > .pane-head:first-child { display: none; }
/* without the title bar the panes' rows move up one: the verse list and the analysis keep the row that stretches (as #browse-pane above) */
body.bw-phone #search-pane { grid-template-rows: auto minmax(0, 1fr) auto; }
body.bw-phone #analysis-pane { grid-template-rows: auto minmax(0, 1fr); }
.mb-pane-more { display: none; }
body.bw-phone .mb-pane-more { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: var(--mb-touch); min-height: var(--mb-touch);
  border: 0; border-radius: 8px; background: none; color: var(--ink-2); }
body.bw-phone .mb-pane-more:active { background: var(--panel-2); }
body.bw-phone #analysis-pane { position: relative; }
body.bw-phone #analysis-pane > .mb-atabs-more { position: absolute; top: 0; right: 0; z-index: 2; height: 45px; background: var(--panel); box-shadow: -10px 0 10px -8px oklch(0 0 0 / 0.18); border-radius: 0; }
body.bw-phone #atabs { padding-right: var(--mb-touch); }                /* the last tab can scroll out from under the "..." */
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
   The text is the screen.  On a phone the Browse Window's title bar (Options, Multiple versions), its heading and its four pickers give way to one line
   (js/features/mobile/refbar.js): the chapter before, the reference (a sheet of books, chapters and verses), the chapter after, and the menu "...". */
.mb-refbar, .mb-chapnav, .mb-pick-all { display: none; }
body.bw-phone .mb-refbar {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; min-height: 52px; background: var(--panel); border-bottom: 1px solid var(--line);
}
body.bw-phone #browse-pane { grid-template-rows: auto minmax(0, 1fr); }
body.bw-phone #browse-pane > .pane-head, body.bw-phone #browse-pane > .browse-bar, body.bw-phone #browse-pane > div:empty { display: none; }
.mb-ref-step, .mb-ref-more {
  flex: none; 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(--ink); cursor: pointer;
}
.mb-ref-step:active, .mb-ref-more:active, .mb-ref:active { background: var(--panel-2); }
.mb-ref-step:disabled { color: var(--ink-3); opacity: 0.4; cursor: default; }
.mb-ref {
  flex: 1 1 0; min-width: 0; height: var(--mb-touch, 44px); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ref); font: 650 18px/1.2 var(--ui); cursor: pointer;
}
.mb-ref-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-ref svg { flex: none; color: var(--ink-2); }
body.bw-phone .browse { padding: 6px 14px calc(36px + var(--mb-peek-pad, 0px)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.bw-tablet .browse { padding: 8px 12px calc(28px + var(--mb-peek-pad, 0px)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
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 .chapter-title { font-size: 17px; }
body.bw-narrow .verse-block { padding: 10px 8px; margin: 0 -8px; }
/* the verse number is a quiet label over its verse; the text is the loud thing */
body.bw-narrow .verse-block .vref { font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0; color: var(--ref); }
body.bw-narrow .browse .chapter-title { font-weight: 600; color: var(--ink-2); }
/* the version label (KJV, NAS ...) is a small label over its text on a phone, so that the text keeps the whole width */
body.bw-phone .vline { display: block; padding: 3px 0; }
body.bw-phone .vline + .vline { margin-top: 4px; padding-top: 8px; }
body.bw-phone .vline .vlabel { display: block; width: auto; padding: 0 0 1px; font: 600 11.5px/1.2 var(--ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
body.bw-phone .vline .vlabel .vmapped { display: inline; margin-left: 6px; font-size: 11px; color: var(--ink-3); }
body.bw-tablet .vline { gap: 6px; }
body.bw-tablet .vline .vlabel { width: 44px; font-size: 12px; padding-top: 6px; }
body.bw-narrow .vtext { line-height: 1.6; max-width: none; }
body.bw-narrow .vtext.greek { line-height: 1.7; }
body.bw-narrow .vtext.hebrew { line-height: 1.95; direction: rtl; text-align: right; }
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.18em; }
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.75; max-width: none; }
body.bw-narrow .browse-mode .verse-flow.hebrew { line-height: 1.95; }
body.bw-narrow .browse-mode .vn { font-size: 12px; color: var(--ink-2); }
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; }
/* the chapter before and after, at the end of the chapter */
body.bw-phone .mb-chapnav { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 18px 0 8px; }
body.bw-phone .mb-chapnav .btn { display: flex; align-items: center; gap: 6px; min-height: 52px; font-size: 16px; justify-content: flex-start; overflow: hidden; }
body.bw-phone .mb-chapnav .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.bw-phone .mb-chapnav .mb-chapnav-next { justify-content: flex-end; }
body.bw-phone .mb-chapnav .btn:disabled { opacity: 0.4; }
/* the sheet of books, chapters and verses */
.mb-picksheet .mb-sheet-body { padding-top: 0; }
.mb-crumbs { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.mb-crumb { flex: none; min-height: var(--mb-touch, 44px); max-width: 60vw; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--bg); color: var(--ink); font-size: 15px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-crumb.on { background: var(--sel-bg); border-color: var(--sel-strong); font-weight: 650; }
.mb-crumb:disabled { opacity: 0.5; cursor: default; }
.mb-pick { padding: 0 12px 24px; }
.mb-grid { display: grid; gap: 8px; }
.mb-grid-books { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mb-grid-nums { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
.mb-cell { min-height: 52px; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--bg); color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; cursor: pointer; }
.mb-cell-book { font-size: 15px; line-height: 1.2; overflow-wrap: anywhere; }
.mb-cell:active { background: var(--panel-2); }
.mb-cell.on { background: var(--sel-bg); border-color: var(--sel-strong); font-weight: 650; box-shadow: inset 0 -3px 0 var(--sel-strong); }
.mb-pick .mb-group-title { margin: 18px 4px 8px; }
.mb-pick .mb-pick-all { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin-top: 14px; font-size: 16px; }

/* ---------------------------------------------------------------- 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-size { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.mb-size-btn { min-height: var(--mb-touch, 44px); border: 0; background: var(--panel); color: var(--ink); font-weight: 650; font-size: 18px; cursor: pointer; }
.mb-size-btn:disabled { opacity: 0.4; }
.mb-size-now { display: grid; place-items: center; min-width: 76px; padding: 0 10px; background: var(--bg); border-left: 1px solid var(--line-strong); font-size: 15px; font-variant-numeric: tabular-nums; }
.mb-size-up { border-left: 1px solid var(--line-strong); }
.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; }
/* the Command Line's input-mode box (Far East / Arabic / transliteration keyboards, help bwh17b) blinks over the placeholder on a
   phone, whose own keyboard does that job: not shown there */
body.bw-narrow .ime-box { 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; }
}

/* ================================================================ the Analysis Window's tabs: whatever a tab draws stays inside the pane */
body.bw-narrow .analysis-body > * { min-width: 0; max-width: 100%; }
body.bw-narrow .mss, body.bw-narrow .mss-bar, body.bw-narrow .mss-coll, body.bw-narrow .dict, body.bw-narrow .rs { min-width: 0; max-width: 100%; }
body.bw-narrow .mss-bar .mss-ms { flex: 1 1 100%; width: 100%; }
body.bw-narrow .rs-tabs { flex-wrap: wrap; overflow-x: visible; }
body.bw-narrow .rs-tab { min-height: var(--mb-touch); }
/* what the Analysis Window says (the parsing, the lexicon entries, BDAG ...) is read at 16 px and more, with room between its lines */
body.bw-narrow .analysis-body { font-size: 16.5px; line-height: 1.55; }
body.bw-narrow .analysis-body .lx-name, body.bw-narrow .analysis-body .an-src, body.bw-narrow .analysis-body small { font-size: 14px; }
body.bw-narrow .analysis-body a { padding-block: 4px; }
body.bw-narrow .analysis-body i, body.bw-narrow .analysis-body p, body.bw-narrow .analysis-body li { line-height: 1.55; }
body.bw-narrow .lx-text, body.bw-narrow .an-lex { font-size: 17px; line-height: 1.6; }
/* the Stats tab (Search Statistics): one column that is the width of the pane */
body.bw-narrow .stats-panel, body.bw-narrow .stats-bar { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
body.bw-narrow .st-row { grid-template-columns: minmax(70px, 110px) minmax(0, 1fr); }
body.bw-narrow .st-row > * { min-width: 0; max-width: 100%; }
body.bw-narrow .stats-panel select, body.bw-narrow .stats-bar select { max-width: 100%; }

/* The first frame on a phone or tablet (build/speed_build.py appends this to the style sheet).  js/features/mobile.js builds the real top bar, bottom bar and
   reference bar a moment after the page starts; until then the .mb-skel copies in index.html (same classes, so css/mobile.css styles them) stand in their places, and the
   panes that are not in view are hidden the way panes.js hides them (.mb-off).  Everything keyed on html.bw-boot*, which scripts/early.js sets only on a phone or tablet:
   a desktop page is not touched. */
.mb-skel { display: none; }
body:has(> #mb-top) > .mb-top.mb-skel, body:has(> #mb-bar) > .mb-bar.mb-skel, #browse-pane:has(> .mb-refbar:not(.mb-skel)) > .mb-refbar.mb-skel { display: none !important; }
.mb-skel .cmdline { font-family: var(--ui); pointer-events: none; }
/* the Command Line and the search pane's text must not make the browser fetch the 460 KB text font before the first verse is on screen: the first verse's own text asks for it,
   and early.js takes bw-boot off <html> when that verse is drawn */
html.bw-boot .cmdline, html.bw-boot .search-pane { font-family: var(--ui); }
.mb-skel .cmdline::placeholder { color: var(--ink-3); opacity: 1; }
.mb-skel .mb-ref-text { min-width: 40%; height: 14px; border-radius: 7px; background: var(--panel-2); }
html.bw-boot-phone[data-boot-pane="browse"] body:not([data-mb-pane]) .panes > .pane:not(#browse-pane),
html.bw-boot-phone[data-boot-pane="search"] body:not([data-mb-pane]) .panes > .pane:not(#search-pane),
html.bw-boot-phone[data-boot-pane="analysis"] body:not([data-mb-pane]) .panes > .pane:not(#analysis-pane),
html.bw-boot-tablet:not([data-boot-pane="analysis"]) body:not([data-mb-pane]) .panes > #analysis-pane,
html.bw-boot-tablet[data-boot-pane="analysis"] body:not([data-mb-pane]) .panes > #search-pane { visibility: hidden; pointer-events: none; }
html.bw-boot-tablet:not([data-boot-pane="analysis"]) body:not([data-mb-pane]) .panes > #search-pane { grid-column: 1 !important; border-right: 1px solid var(--line-strong); }
html.bw-boot-tablet:not([data-boot-pane="analysis"]) body:not([data-mb-pane]) .panes > #browse-pane,
html.bw-boot-tablet:not([data-boot-pane="analysis"]) body:not([data-mb-pane]) .panes > #analysis-pane { grid-column: 2 !important; }
html.bw-boot-tablet[data-boot-pane="analysis"] body:not([data-mb-pane]) .panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
html.bw-boot-tablet[data-boot-pane="analysis"] body:not([data-mb-pane]) .panes > #browse-pane { grid-column: 1 !important; border-right: 1px solid var(--line-strong); }
html.bw-boot-tablet[data-boot-pane="analysis"] body:not([data-mb-pane]) .panes > #analysis-pane, html.bw-boot-tablet[data-boot-pane="analysis"] body:not([data-mb-pane]) .panes > #search-pane { grid-column: 2 !important; }