/* ================= 0. Typefaces (served from this site so they work offline; OFL license in fonts/) ================= */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/source-serif-4-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 100 900; font-display: swap; size-adjust: 62%; src: url(fonts/press-start-2p-regular.woff2) format("woff2"); }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/cinzel-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "UnifrakturMaguntia"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/unifrakturmaguntia-latin-400-normal.woff2) format("woff2"); }

/* ================= 1. Themes (written by build.py from themes.py) ================= */
:root, [data-theme="parchment"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #c42a2a;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #f6f1e7;
  --paper-2: #efe6d4;
  --card: #fffdf8;
  --field: #fffefb;
  --ink: #2a2420;
  --muted: #5d544a;
  --line: #e2d5bc;
  --pine: #7a2e26;
  --pine-deep: #4a1c17;
  --on-pine: #fff8ef;
  --brass: #74581a;
  --gold: #d9b25a;
  --walnut: #4a3120;
  --walnut-2: #3a2618;
  --hl: #f1e3b0;
  --mark: #f0dd87;
  --page: #fbf6e6;
  --page-in: #f7f0dc;
  --page-gutter: #e9dfc3;
  --bk-rule: #e3d6b4;
  --edge-1: #d9c48f;
  --edge-2: #f3ead2;
  --edge-3: #c9ae6a;
  --edge-4: #efe4c8;
  --orn: #d6c494;
  --dots: #c9b98f;
  --tab-ot-a: #ddcd9f;
  --tab-ot-b: #f1e8cf;
  --tab-nt-a: #e6d3cf;
  --tab-nt-b: #f4ebe7;
  --tab-nt-line: #c9a49c;
  --f-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-head: var(--f-display);
  color-scheme: light;
}
[data-theme="night"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa4433;
  --red-glow: rgba(250, 68, 51, .55);
  --red-mark: #edb0ab;
  --paper: #15120f;
  --paper-2: #1d1915;
  --card: #1b1713;
  --field: #110e0b;
  --ink: #ece3d3;
  --muted: #b3a794;
  --line: #3a3229;
  --pine: #e0a85f;
  --pine-deep: #f2c98a;
  --on-pine: #1a130b;
  --brass: #cfa865;
  --gold: #e2bc6c;
  --walnut: #3b2618;
  --walnut-2: #2a1a10;
  --hl: rgba(224,168,95,.2);
  --mark: #6e5520;
  --page: #221d18;
  --page-in: #1e1a15;
  --page-gutter: #171410;
  --bk-rule: #3d352b;
  --edge-1: #4a4033;
  --edge-2: #2e2822;
  --edge-3: #5a4c38;
  --edge-4: #3a3229;
  --orn: #6a5a3e;
  --dots: #5a4f40;
  --tab-ot-a: #3a3226;
  --tab-ot-b: #2c261f;
  --tab-nt-a: #3a2a26;
  --tab-nt-b: #2b211e;
  --tab-nt-line: #5e4640;
  color-scheme: dark;
}
[data-theme="true-dark"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #f93827;
  --red-glow: rgba(249, 56, 39, .55);
  --red-mark: #eba9a2;
  --paper: #000000;
  --paper-2: #0d0d0d;
  --card: #121212;
  --field: #000000;
  --ink: #e8e8e8;
  --muted: #a3a3a3;
  --line: #2e2e2e;
  --pine: #f2f2f2;
  --pine-deep: #ffffff;
  --on-pine: #000000;
  --brass: #8c8c8c;
  --gold: #bdbdbd;
  --note-bar: #d4d4d4;
  --hl: rgba(255, 255, 255, .12);
  --mark: #4a4a4a;
  --walnut: #262626;
  --walnut-2: #1a1a1a;
  --page: #0a0a0a;
  --page-in: #080808;
  --page-gutter: #000000;
  --bk-rule: #2e2e2e;
  --edge-1: #3a3a3a;
  --edge-2: #1c1c1c;
  --edge-3: #4a4a4a;
  --edge-4: #2a2a2a;
  --orn: #4a4a4a;
  --dots: #3d3d3d;
  --tab-ot-a: #262626;
  --tab-ot-b: #1a1a1a;
  --tab-nt-a: #2e2e2e;
  --tab-nt-b: #1f1f1f;
  --tab-nt-line: #4d4d4d;
  color-scheme: dark;
}
[data-theme="clean"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #d22d2d;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #ffffff;
  --paper-2: #f2f4f7;
  --card: #ffffff;
  --field: #ffffff;
  --ink: #1b1f24;
  --muted: #4b5563;
  --line: #e1e5eb;
  --pine: #1f4e8c;
  --pine-deep: #163a68;
  --on-pine: #ffffff;
  --brass: #7a6118;
  --gold: #e0b84a;
  --hl: #fdf1c4;
  --mark: #fbe38a;
  --page: #ffffff;
  --page-in: #fafafa;
  --page-gutter: #eceef1;
  --bk-rule: #e6e8ec;
  --edge-1: #d5d9df;
  --edge-2: #f4f5f7;
  --edge-3: #c3c8d0;
  --edge-4: #eceef1;
  --orn: #c9ced6;
  --dots: #c3c8d0;
  --tab-ot-a: #e3e7ed;
  --tab-ot-b: #f5f7fa;
  --tab-nt-a: #dfe8f3;
  --tab-nt-b: #f2f6fb;
  --tab-nt-line: #aebfd6;
  --f-head: var(--f-body);
  color-scheme: light;
}
[data-theme="contrast"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #ca2b2b;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #fbf7ee;
  --paper-2: #f1e9d8;
  --card: #ffffff;
  --field: #ffffff;
  --ink: #14100c;
  --muted: #2e2822;
  --line: #8a7a5c;
  --pine: #6a2018;
  --pine-deep: #3d110c;
  --on-pine: #ffffff;
  --brass: #5a3f0a;
  --gold: #d9b25a;
  --hl: #f3df98;
  --mark: #f3d65e;
  --page: #fffdf6;
  --page-in: #faf5e8;
  --page-gutter: #ece2c8;
  --bk-rule: #b9a77f;
  --edge-1: #c9b27a;
  --edge-2: #f3ead2;
  --edge-3: #b0955a;
  --edge-4: #efe4c8;
  --orn: #b9a46f;
  --dots: #8a7a5c;
  --tab-nt-a: #e6d3cf;
  --tab-nt-b: #f4ebe7;
  --tab-nt-line: #a8857c;
  color-scheme: light;
}
[data-theme="blue-light"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #c82a2a;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #f3f6f9;
  --paper-2: #e7ebf1;
  --card: #fcfcfd;
  --field: #ffffff;
  --ink: #171d26;
  --muted: #485260;
  --line: #d0d7e1;
  --pine: #254a7e;
  --pine-deep: #193357;
  --on-pine: #ffffff;
  --brass: #2a476f;
  --hl: #cdddf4;
  --page: #fafbfc;
  --page-in: #f4f6f8;
  --page-gutter: #e0e5eb;
  --bk-rule: #d4dae2;
  --edge-1: #bcc5d2;
  --edge-2: #f0f2f5;
  --edge-3: #a3b0c2;
  --edge-4: #e7eaef;
  --orn: #b6c0ce;
  --dots: #abb5c4;
  --tab-ot-a: #cfd7e2;
  --tab-ot-b: #eff2f5;
  --tab-nt-a: #d1cfe2;
  --tab-nt-b: #f0eff5;
  --tab-nt-line: #a09dbe;
  color-scheme: light;
}
[data-theme="blue-dark"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa4131;
  --red-glow: rgba(250, 65, 49, .55);
  --red-mark: #ecaca7;
  --paper: #0d1219;
  --paper-2: #131a22;
  --card: #11171f;
  --field: #0a0d12;
  --ink: #e3e7ed;
  --muted: #aeb6c2;
  --line: #2c3644;
  --pine: #88abdd;
  --pine-deep: #b8cdea;
  --on-pine: #0e131b;
  --brass: #9cb7de;
  --gold: #90b1df;
  --hl: rgba(71, 129, 209, 0.22);
  --mark: #776622;
  --walnut: #263140;
  --walnut-2: #192029;
  --page: #191f27;
  --page-in: #161b22;
  --page-gutter: #11151a;
  --bk-rule: #2e3642;
  --edge-1: #3b4554;
  --edge-2: #242a33;
  --edge-3: #475466;
  --edge-4: #2e3642;
  --orn: #4f5e72;
  --dots: #4a5564;
  --tab-ot-a: #2d3643;
  --tab-ot-b: #212731;
  --tab-nt-a: #2f2d43;
  --tab-nt-b: #222131;
  --tab-nt-line: #4e4b6c;
  color-scheme: dark;
}
[data-theme="green-light"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #ca2b2b;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #f3f9f6;
  --paper-2: #e7f1eb;
  --card: #fcfdfc;
  --field: #ffffff;
  --ink: #17261d;
  --muted: #486052;
  --line: #d0e1d7;
  --pine: #2f744c;
  --pine-deep: #215034;
  --on-pine: #ffffff;
  --brass: #2a6f47;
  --hl: #cdf4dd;
  --page: #fafcfb;
  --page-in: #f4f8f6;
  --page-gutter: #e0ebe5;
  --bk-rule: #d4e2da;
  --edge-1: #bcd2c5;
  --edge-2: #f0f5f2;
  --edge-3: #a3c2b0;
  --edge-4: #e7efea;
  --orn: #b6cec0;
  --dots: #abc4b5;
  --tab-ot-a: #cfe2d7;
  --tab-ot-b: #eff5f2;
  --tab-nt-a: #cfe2e1;
  --tab-nt-b: #eff5f5;
  --tab-nt-line: #9dbebb;
  color-scheme: light;
}
[data-theme="green-dark"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa4d3d;
  --red-glow: rgba(250, 77, 61, .55);
  --red-mark: #eeb4af;
  --paper: #0d1912;
  --paper-2: #13221a;
  --card: #111f17;
  --field: #0a120d;
  --ink: #e3ede7;
  --muted: #aec2b6;
  --line: #2c4436;
  --pine: #92d3ad;
  --pine-deep: #bee4ce;
  --on-pine: #0e1b13;
  --brass: #9cdeb7;
  --gold: #90dfb1;
  --hl: rgba(71, 209, 129, 0.22);
  --mark: #776622;
  --walnut: #264031;
  --walnut-2: #192920;
  --page: #19271f;
  --page-in: #16221b;
  --page-gutter: #111a15;
  --bk-rule: #2e4236;
  --edge-1: #3b5445;
  --edge-2: #24332a;
  --edge-3: #476654;
  --edge-4: #2e4236;
  --orn: #4f725e;
  --dots: #4a6455;
  --tab-ot-a: #2d4336;
  --tab-ot-b: #213127;
  --tab-nt-a: #2d4341;
  --tab-nt-b: #213130;
  --tab-nt-line: #4b6c6a;
  color-scheme: dark;
}
[data-theme="purple-light"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #c82a2a;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #f6f3f9;
  --paper-2: #ece7f1;
  --card: #fdfcfd;
  --field: #ffffff;
  --ink: #1f1726;
  --muted: #554860;
  --line: #d9d0e1;
  --pine: #543172;
  --pine-deep: #3a224f;
  --on-pine: #ffffff;
  --brass: #4f2a6f;
  --hl: #e2cdf4;
  --page: #fbfafc;
  --page-in: #f6f4f8;
  --page-gutter: #e6e0eb;
  --bk-rule: #dcd4e2;
  --edge-1: #c8bcd2;
  --edge-2: #f2f0f5;
  --edge-3: #b4a3c2;
  --edge-4: #ebe7ef;
  --orn: #c3b6ce;
  --dots: #b8abc4;
  --tab-ot-a: #d9cfe2;
  --tab-ot-b: #f2eff5;
  --tab-nt-a: #e2cfe2;
  --tab-nt-b: #f5eff5;
  --tab-nt-line: #be9dbd;
  color-scheme: light;
}
[data-theme="purple-dark"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa3b29;
  --red-glow: rgba(250, 59, 41, .55);
  --red-mark: #ecaaa5;
  --paper: #140d19;
  --paper-2: #1b1322;
  --card: #19111f;
  --field: #0e0a12;
  --ink: #e8e3ed;
  --muted: #b8aec2;
  --line: #392c44;
  --pine: #b594d1;
  --pine-deep: #d2bfe3;
  --on-pine: #150e1b;
  --brass: #bf9cde;
  --gold: #ba90df;
  --hl: rgba(145, 71, 209, 0.22);
  --mark: #776622;
  --walnut: #342640;
  --walnut-2: #221929;
  --page: #201927;
  --page-in: #1c1622;
  --page-gutter: #16111a;
  --bk-rule: #392e42;
  --edge-1: #483b54;
  --edge-2: #2c2433;
  --edge-3: #584766;
  --edge-4: #392e42;
  --orn: #624f72;
  --dots: #584a64;
  --tab-ot-a: #392d43;
  --tab-ot-b: #292131;
  --tab-nt-a: #432d43;
  --tab-nt-b: #312130;
  --tab-nt-line: #6c4b6b;
  color-scheme: dark;
}
[data-theme="red-light"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #c82a2a;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #f9f3f4;
  --paper-2: #f1e7e7;
  --card: #fdfcfc;
  --field: #ffffff;
  --ink: #261718;
  --muted: #60484a;
  --line: #e1d0d2;
  --pine: #81222a;
  --pine-deep: #59181d;
  --on-pine: #ffffff;
  --brass: #6f2a30;
  --hl: #f4cdd0;
  --page: #fcfafa;
  --page-in: #f8f4f4;
  --page-gutter: #ebe0e1;
  --bk-rule: #e2d4d5;
  --edge-1: #d2bcbe;
  --edge-2: #f5f0f0;
  --edge-3: #c2a3a6;
  --edge-4: #efe7e7;
  --orn: #ceb6b8;
  --dots: #c4abad;
  --tab-ot-a: #e2cfd1;
  --tab-ot-b: #f5eff0;
  --tab-nt-a: #e2d7cf;
  --tab-nt-b: #f5f2ef;
  --tab-nt-line: #beab9d;
  color-scheme: light;
}
[data-theme="red-dark"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa3d2c;
  --red-glow: rgba(250, 61, 44, .55);
  --red-mark: #ecaca7;
  --paper: #190d0e;
  --paper-2: #221315;
  --card: #1f1113;
  --field: #120a0b;
  --ink: #ede3e4;
  --muted: #c2aeaf;
  --line: #442c2e;
  --pine: #df868e;
  --pine-deep: #ecb6bb;
  --on-pine: #1b0e0f;
  --brass: #de9ca1;
  --gold: #df9097;
  --hl: rgba(209, 71, 83, 0.22);
  --mark: #776622;
  --walnut: #402628;
  --walnut-2: #29191a;
  --page: #27191a;
  --page-in: #221617;
  --page-gutter: #1a1112;
  --bk-rule: #422e30;
  --edge-1: #543b3d;
  --edge-2: #332425;
  --edge-3: #66474a;
  --edge-4: #422e30;
  --orn: #724f52;
  --dots: #644a4c;
  --tab-ot-a: #432d2f;
  --tab-ot-b: #312122;
  --tab-nt-a: #43362d;
  --tab-nt-b: #312721;
  --tab-nt-line: #6c594b;
  color-scheme: dark;
}
[data-theme="blood"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #f92f1d;
  --red-glow: rgba(249, 47, 29, .55);
  --red-mark: #eaa19a;
  --paper: #160406;
  --paper-2: #2a070b;
  --card: #1f0609;
  --field: #120305;
  --ink: #f7efe6;
  --muted: #dcc6bd;
  --line: #4d151a;
  --pine: #f0c674;
  --pine-deep: #fff6e6;
  --on-pine: #2a070b;
  --brass: #eab25a;
  --gold: #f0c674;
  --hl: rgba(200, 16, 46, .38);
  --mark: #7a1420;
  --walnut: #6b0c16;
  --walnut-2: #3d060c;
  --page: #1d0609;
  --page-in: #190508;
  --page-gutter: #120305;
  --bk-rule: #4d151a;
  --edge-1: #5a1a1f;
  --edge-2: #2d0b0f;
  --edge-3: #6e2329;
  --edge-4: #3a1015;
  --orn: #7a2a30;
  --dots: #6a2a2f;
  --tab-ot-a: #3d0c12;
  --tab-ot-b: #2a080c;
  --tab-nt-a: #4a1016;
  --tab-nt-b: #33090e;
  --tab-nt-line: #7a2a30;
  color-scheme: dark;
}
[data-theme="cathedral"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa4433;
  --red-glow: rgba(250, 68, 51, .55);
  --red-mark: #edb0ab;
  --paper: #121017;
  --paper-2: #19161f;
  --card: #1a1720;
  --field: #0e0c12;
  --ink: #eee7da;
  --muted: #bdb2a0;
  --line: #3b3446;
  --pine: #e2b85c;
  --pine-deep: #f3d996;
  --on-pine: #1a130b;
  --brass: #d4ad62;
  --gold: #e2b85c;
  --hl: rgba(226, 184, 92, .2);
  --mark: #6e5520;
  --walnut: #2b2233;
  --walnut-2: #1d1724;
  --page: #1d1a23;
  --page-in: #1a1720;
  --page-gutter: #141219;
  --bk-rule: #3b3446;
  --edge-1: #4a4152;
  --edge-2: #26212d;
  --edge-3: #5a4e60;
  --edge-4: #332c3b;
  --orn: #7a6440;
  --dots: #5a4f62;
  --tab-ot-a: #2f2440;
  --tab-ot-b: #221a2e;
  --tab-nt-a: #3a1d27;
  --tab-nt-b: #2a151c;
  --tab-nt-line: #7a3346;
  --f-head: "Cinzel", "Source Serif 4", Georgia, serif;
  color-scheme: dark;
}
[data-theme="terminal"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #f92d1a;
  --red-glow: rgba(249, 45, 26, .55);
  --red-mark: #eaa19a;
  --paper: #020a02;
  --paper-2: #041404;
  --card: #031003;
  --field: #000000;
  --ink: #5cff5c;
  --muted: #3ccf3c;
  --line: #145a14;
  --pine: #5cff5c;
  --pine-deep: #a8ffa8;
  --on-pine: #021a02;
  --brass: #a8ffa8;
  --gold: #5cff5c;
  --hl: rgba(92, 255, 92, .2);
  --mark: #1d6e1d;
  --walnut: #0b2a0b;
  --walnut-2: #061806;
  --page: #031203;
  --page-in: #020e02;
  --page-gutter: #010901;
  --bk-rule: #145a14;
  --edge-1: #145a14;
  --edge-2: #062006;
  --edge-3: #1d6e1d;
  --edge-4: #0b2a0b;
  --orn: #1d6e1d;
  --dots: #1d6e1d;
  --tab-ot-a: #062006;
  --tab-ot-b: #041604;
  --tab-nt-a: #0b2a0b;
  --tab-nt-b: #062006;
  --tab-nt-line: #1d6e1d;
  --f-display: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --f-body: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --f-head: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  color-scheme: dark;
}
[data-theme="classic"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #5f1414;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #3fb0ac;
  --paper-2: #c0c0c0;
  --card: #c0c0c0;
  --field: #ffffff;
  --ink: #000000;
  --muted: #1a1a1a;
  --line: #808080;
  --pine: #000080;
  --pine-deep: #000080;
  --on-pine: #ffffff;
  --brass: #000080;
  --gold: #ffff00;
  --hl: #ffff80;
  --mark: #ffff00;
  --page: #ffffff;
  --page-in: #f4f4f4;
  --page-gutter: #dcdcdc;
  --bk-rule: #c0c0c0;
  --edge-1: #c0c0c0;
  --edge-2: #ffffff;
  --edge-3: #808080;
  --edge-4: #dfdfdf;
  --orn: #c0c0c0;
  --dots: #808080;
  --tab-ot-a: #c0c0c0;
  --tab-ot-b: #dfdfdf;
  --tab-nt-a: #c0c0c0;
  --tab-nt-b: #dfdfdf;
  --tab-nt-line: #808080;
  --f-body: Tahoma, Verdana, "Segoe UI", sans-serif;
  --f-head: Tahoma, Verdana, "Segoe UI", sans-serif;
  --f-display: "Times New Roman", Times, serif;
  --reading: #ffffff;
  color-scheme: light;
}
[data-theme="brush"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #d22d2d;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #ffffff;
  --paper-2: #f4effa;
  --card: #ffffff;
  --field: #ffffff;
  --ink: #1d1430;
  --muted: #4a3f5c;
  --line: #d7c8ea;
  --pine: #5b2a9c;
  --pine-deep: #3a1670;
  --on-pine: #ffffff;
  --brass: #a3157f;
  --gold: #1fb5c9;
  --hl: #efe4fb;
  --walnut: #43207a;
  --walnut-2: #2a1250;
  --page: #ffffff;
  --page-in: #fbf9fe;
  --page-gutter: #ece4f6;
  --bk-rule: #e2d6f0;
  --edge-1: #cdbbe6;
  --edge-2: #f6f1fb;
  --edge-3: #b49ad8;
  --edge-4: #ebe2f6;
  --orn: #c9b6e4;
  --dots: #b49ad8;
  --tab-ot-a: #c9f0f5;
  --tab-ot-b: #eefbfd;
  --tab-nt-a: #f6cdea;
  --tab-nt-b: #fcedf7;
  --tab-nt-line: #c2289b;
  color-scheme: light;
}
[data-theme="shapes"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #d22d2d;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #ffffff;
  --paper-2: #fff9db;
  --card: #ffffff;
  --field: #ffffff;
  --ink: #1b1b1b;
  --muted: #404040;
  --line: #1b1b1b;
  --pine: #3b5bdb;
  --pine-deep: #1b1b1b;
  --on-pine: #ffffff;
  --brass: #c2255c;
  --gold: #fcc419;
  --hl: #fff3bf;
  --walnut: #3b5bdb;
  --walnut-2: #2541b2;
  --page: #ffffff;
  --page-in: #fcfcfc;
  --page-gutter: #eeeeee;
  --bk-rule: #d4d4d4;
  --edge-1: #d4d4d4;
  --edge-2: #f8f8f8;
  --edge-3: #1b1b1b;
  --edge-4: #eeeeee;
  --orn: #fcc419;
  --dots: #999999;
  --tab-ot-a: #ffe066;
  --tab-ot-b: #fff9db;
  --tab-nt-a: #96f2d7;
  --tab-nt-b: #e6fcf5;
  --tab-nt-line: #1b1b1b;
  color-scheme: light;
}
[data-theme="pixel-classic"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --red: #d02c2c;
  --red-glow: rgba(65, 11, 11, .30);
  --red-mark: #a42323;
  --paper: #fcfcfc;
  --paper-2: #fce0a8;
  --card: #fcfcfc;
  --field: #ffffff;
  --ink: #000000;
  --muted: #3c3c3c;
  --line: #000000;
  --pine: #0040c8;
  --pine-deep: #0000a8;
  --on-pine: #fcfcfc;
  --brass: #a81000;
  --gold: #f8b800;
  --hl: #fce0a8;
  --mark: #f8b800;
  --walnut: #0000a8;
  --walnut-2: #00006c;
  --page: #fcfcfc;
  --page-in: #f8f8f8;
  --page-gutter: #e4e4e4;
  --bk-rule: #bcbcbc;
  --edge-1: #bcbcbc;
  --edge-2: #fcfcfc;
  --edge-3: #7c7c7c;
  --edge-4: #e4e4e4;
  --orn: #bcbcbc;
  --dots: #7c7c7c;
  --tab-ot-a: #fce0a8;
  --tab-ot-b: #fcfcfc;
  --tab-nt-a: #a4e4fc;
  --tab-nt-b: #fcfcfc;
  --tab-nt-line: #0058f8;
  --f-display: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-body: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-head: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
[data-theme="pixel-handheld"] {
  --mk-yellow: #f5d65f;
  --mk-green: #b3e0ae;
  --mk-blue: #b3d1f5;
  --mk-pink: #f2bcd2;
  --paper: #9bbc0f;
  --paper-2: #8bac0f;
  --card: #9bbc0f;
  --field: #9bbc0f;
  --ink: #0f380f;
  --muted: #0f380f;
  --line: #306230;
  --pine: #0f380f;
  --pine-deep: #0f380f;
  --on-pine: #9bbc0f;
  --brass: #0f380f;
  --gold: #306230;
  --hl: #8bac0f;
  --mark: #8bac0f;
  --walnut: #306230;
  --walnut-2: #0f380f;
  --page: #9bbc0f;
  --page-in: #9bbc0f;
  --page-gutter: #8bac0f;
  --bk-rule: #306230;
  --edge-1: #306230;
  --edge-2: #8bac0f;
  --edge-3: #0f380f;
  --edge-4: #8bac0f;
  --orn: #306230;
  --dots: #306230;
  --tab-ot-a: #8bac0f;
  --tab-ot-b: #9bbc0f;
  --tab-nt-a: #8bac0f;
  --tab-nt-b: #9bbc0f;
  --tab-nt-line: #306230;
  --red: #0f380f;
  --red-mark: #0f380f;
  --red-glow: rgba(15, 56, 15, .30);
  --f-display: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-body: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-head: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}
[data-theme="pixel-computer"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #eaa39c;
  --red-glow: rgba(234, 163, 156, .55);
  --red-mark: #f7dedb;
  --paper: #352879;
  --paper-2: #40318d;
  --card: #40318d;
  --field: #2a1f63;
  --ink: #ecebff;
  --muted: #c4bff0;
  --line: #7869c4;
  --pine: #b4afff;
  --pine-deep: #dcd9ff;
  --on-pine: #20184f;
  --brass: #fcf47c;
  --gold: #fcf47c;
  --hl: rgba(165, 159, 245, .25);
  --mark: #6c5eb5;
  --walnut: #6c5eb5;
  --walnut-2: #20184f;
  --page: #40318d;
  --page-in: #3b2d85;
  --page-gutter: #2a1f63;
  --bk-rule: #6c5eb5;
  --edge-1: #6c5eb5;
  --edge-2: #352879;
  --edge-3: #7869c4;
  --edge-4: #40318d;
  --orn: #7869c4;
  --dots: #6c5eb5;
  --tab-ot-a: #4b3c9c;
  --tab-ot-b: #40318d;
  --tab-nt-a: #55468f;
  --tab-nt-b: #40318d;
  --tab-nt-line: #7869c4;
  --f-display: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-body: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-head: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
[data-theme="pixel-arcade"] {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa3d2c;
  --red-glow: rgba(250, 61, 44, .55);
  --red-mark: #eba9a2;
  --paper: #000000;
  --paper-2: #1d2b53;
  --card: #0e1428;
  --field: #000000;
  --ink: #fff1e8;
  --muted: #c2c3c7;
  --line: #3a4a7a;
  --pine: #29adff;
  --pine-deep: #ffec27;
  --on-pine: #000000;
  --brass: #ff77a8;
  --gold: #ffec27;
  --hl: rgba(255, 236, 39, .18);
  --mark: #7e2553;
  --walnut: #1d2b53;
  --walnut-2: #0e1428;
  --page: #0e1428;
  --page-in: #0a0f1f;
  --page-gutter: #000000;
  --bk-rule: #1d2b53;
  --edge-1: #1d2b53;
  --edge-2: #0a0f1f;
  --edge-3: #29adff;
  --edge-4: #1d2b53;
  --orn: #29adff;
  --dots: #5f574f;
  --tab-ot-a: #1d2b53;
  --tab-ot-b: #0e1428;
  --tab-nt-a: #7e2553;
  --tab-nt-b: #0e1428;
  --tab-nt-line: #ff77a8;
  --f-display: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-body: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --f-head: "Press Start 2P", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  --mk-yellow: rgba(240, 200, 70, .30);
  --mk-green: rgba(90, 200, 120, .28);
  --mk-blue: rgba(90, 150, 240, .34);
  --mk-pink: rgba(240, 110, 160, .32);
  --red: #fa4433;
  --red-glow: rgba(250, 68, 51, .55);
  --red-mark: #edb0ab;
  --paper: #15120f;
  --paper-2: #1d1915;
  --card: #1b1713;
  --field: #110e0b;
  --ink: #ece3d3;
  --muted: #b3a794;
  --line: #3a3229;
  --pine: #e0a85f;
  --pine-deep: #f2c98a;
  --on-pine: #1a130b;
  --brass: #cfa865;
  --gold: #e2bc6c;
  --walnut: #3b2618;
  --walnut-2: #2a1a10;
  --hl: rgba(224,168,95,.2);
  --mark: #6e5520;
  --page: #221d18;
  --page-in: #1e1a15;
  --page-gutter: #171410;
  --bk-rule: #3d352b;
  --edge-1: #4a4033;
  --edge-2: #2e2822;
  --edge-3: #5a4c38;
  --edge-4: #3a3229;
  --orn: #6a5a3e;
  --dots: #5a4f40;
  --tab-ot-a: #3a3226;
  --tab-ot-b: #2c261f;
  --tab-nt-a: #3a2a26;
  --tab-nt-b: #2b211e;
  --tab-nt-line: #5e4640;
  color-scheme: dark;
  }
}
/* the color dots (theme.js) */
.sw[data-sw="auto"] .sw-dot { background: linear-gradient(135deg, #f6f1e7 50%, #15120f 50%); border-color: #7a2e26; }
.sw[data-sw="parchment"] .sw-dot { background: #f6f1e7; border-color: #7a2e26; }
.sw[data-sw="night"] .sw-dot { background: #15120f; border-color: #e0a85f; }
.sw[data-sw="true-dark"] .sw-dot { background: #000000; border-color: #f2f2f2; }
.sw[data-sw="clean"] .sw-dot { background: #ffffff; border-color: #1f4e8c; }
.sw[data-sw="contrast"] .sw-dot { background: #fbf7ee; border-color: #6a2018; }
.sw[data-sw="blue-light"] .sw-dot { background: #f3f6f9; border-color: #254a7e; }
.sw[data-sw="blue-dark"] .sw-dot { background: #0d1219; border-color: #88abdd; }
.sw[data-sw="green-light"] .sw-dot { background: #f3f9f6; border-color: #2f744c; }
.sw[data-sw="green-dark"] .sw-dot { background: #0d1912; border-color: #92d3ad; }
.sw[data-sw="purple-light"] .sw-dot { background: #f6f3f9; border-color: #543172; }
.sw[data-sw="purple-dark"] .sw-dot { background: #140d19; border-color: #b594d1; }
.sw[data-sw="red-light"] .sw-dot { background: #f9f3f4; border-color: #81222a; }
.sw[data-sw="red-dark"] .sw-dot { background: #190d0e; border-color: #df868e; }
.sw[data-sw="blood"] .sw-dot { background: #160406; border-color: #f0c674; }
.sw[data-sw="cathedral"] .sw-dot { background: #121017; border-color: #e2b85c; }
.sw[data-sw="terminal"] .sw-dot { background: #020a02; border-color: #5cff5c; }
.sw[data-sw="classic"] .sw-dot { background: #3fb0ac; border-color: #000080; }
.sw[data-sw="brush"] .sw-dot { background: #ffffff; border-color: #5b2a9c; }
.sw[data-sw="shapes"] .sw-dot { background: #ffffff; border-color: #3b5bdb; }
.sw[data-sw="pixel-classic"] .sw-dot { background: #fcfcfc; border-color: #0040c8; }
.sw[data-sw="pixel-handheld"] .sw-dot { background: #9bbc0f; border-color: #0f380f; }
.sw[data-sw="pixel-computer"] .sw-dot { background: #352879; border-color: #b4afff; }
.sw[data-sw="pixel-arcade"] .sw-dot { background: #000000; border-color: #29adff; }
/* text size: separate from the theme, so any theme can have big text */
:root { --base: 1.15rem; }
[data-size="large"] { --base: 1.35rem; }
[data-size="xlarge"] { --base: 1.6rem; }

/* Armed with the Word: site styles.
   1. Themes (NOT here: build.py writes them from themes.py, above this file)   2. Base and page
   3. Bible reader (lifted from the Heritage Point reader, mockup C)   4. Look of the reader here
   (5. Extra rules for single themes are written by build.py from themes.py, below this file.) */

/* ================= 2. Base and page ================= */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--base); line-height: 1.6; }
body.big { font-size: var(--base); }
h1, h2, h3 { font-family: var(--f-head); font-weight: 600; line-height: 1.15; text-wrap: balance; margin: 0; color: var(--pine-deep); }
p { margin: 0; }
a { color: var(--pine); }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 72rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.eyebrow { font-family: var(--f-body); font-size: .9rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.icon { width: 1em; height: 1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; }
.btn { display: inline-flex; align-items: center; gap: .55rem; font: 700 1.05rem/1 var(--f-body); text-decoration: none; padding: .95rem 1.4rem; border-radius: 10px; border: 2px solid var(--pine); cursor: pointer; }
.btn-solid { background: var(--pine); color: var(--on-pine); }
.btn-solid:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.btn-line { background: var(--card); color: var(--pine-deep); border-color: var(--pine-deep); }
.btn-line:hover { background: var(--paper-2); }
.btn:active { transform: translateY(2px); }

/* header (the restructure, 2026-10-24): the name, the four doors (Today, Bible, Explore, My Study), then Aa Text and Help.
   On a computer the doors sit in this top row; on a phone they are a bar at the foot of the screen (below). */
.site-header { background: var(--card); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; padding-block: .7rem; }
.brand { font-family: var(--f-display); font-size: 1.35rem; color: var(--pine-deep); text-decoration: none; letter-spacing: .01em; }
.doors { flex: 1 1 auto; }
.doors ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: .3rem; }
.door { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px; text-decoration: none;
  color: var(--ink); font: 600 1rem var(--f-body); }
.door .icon { width: 1.25rem; height: 1.25rem; }
.door:hover { background: var(--paper-2); }
.door[aria-current="page"] { background: var(--paper-2); color: var(--pine-deep); box-shadow: inset 0 0 0 2px var(--pine); }
.head-tools { display: flex; align-items: center; gap: .45rem; }
.look-btn, .help-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .35rem .8rem; font: 600 .95rem var(--f-body);
  background: var(--field); color: var(--ink); border: 2px solid var(--line); border-radius: 8px; cursor: pointer; text-decoration: none; }
.look-aa { font: 700 1.05rem var(--f-display); }
.look-btn[aria-expanded="true"], .help-btn[aria-current="page"] { border-color: var(--pine); }
.look-btn:hover, .help-btn:hover { border-color: var(--pine-deep); }
/* (it drops down over the page, like a menu, so opening and closing it never moves the words being read, 2026-10-24) */
.site-header .wrap { position: relative; }
.look-panel { display: none; position: absolute; z-index: 61; top: 100%; left: 0; right: 0; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  padding: .8rem 1rem; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .5); }
.look-panel.open { display: flex; }
.theme-pick { display: flex; align-items: center; gap: .45rem; font-size: .95rem; font-weight: 600; }
.theme-pick select { font: inherit; font-weight: 400; padding: .35rem .5rem; border: 2px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); }

.page-head { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.page-head .wrap { padding-block: 2.6rem 2.2rem; }
.page-head h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.3rem); margin-top: .4rem; }
.page-head .lede { font-size: 1.2rem; color: var(--muted); margin-top: .8rem; max-width: 46ch; }

.site-footer { border-top: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .92rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding-block: 1.4rem; }

/* home (placeholder until the home page is built) */
.home { display: grid; place-items: center; text-align: center; padding: 4.5rem 16px 3rem; }
.home h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 7vw, 3.4rem); }
.home .rule { width: 5rem; height: 1px; background: var(--gold); margin: 1.6rem auto; border: 0; }
.home blockquote { margin: 0 auto; max-width: 38rem; font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 3.6vw, 1.4rem); }
.home cite { display: block; margin-top: .7rem; font-style: normal; font-family: var(--f-body); font-size: .95rem; letter-spacing: .08em; color: var(--muted); }
.home .soon { margin-top: 2rem; color: var(--muted); }
.home .actions { margin-top: 1.6rem; }
.home .home-more { margin-top: 1.2rem; }

/* about this site, on the home page */
.about { padding-block: 1rem 2rem; max-width: 52rem; }
.about h2 { font-size: 1.6rem; }
.about > p { margin-top: .7rem; }
.fly-list { margin: .7rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.fly-list a { font-weight: 700; }
.share-done:empty { display: none; }
.share-done { color: var(--muted); font-size: .95rem; }

/* reading offline: the status line in the footer and the install help on the home page */
.offline-status { flex-basis: 100%; font-size: .9rem; }
.offline-status:empty { display: none; }
.offline-help { padding-block: 1rem 3.5rem; max-width: 52rem; }
.offline-help h2 { font-size: 1.6rem; }
.offline-help > p { margin-top: .7rem; }
.offline-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin-top: 1.2rem; }
.offline-steps h3 { font-size: 1.15rem; }
.offline-steps ol { margin: .5rem 0 0; padding-left: 1.3rem; }
.offline-steps li { margin-bottom: .3rem; }
.offline-note { color: var(--muted); font-size: .95rem; margin-top: 1rem; }
@media (max-width: 640px) { .offline-steps { grid-template-columns: minmax(0, 1fr); } }

/* ================= 3. Bible reader ================= */
/* ================= Bible page ================= */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--pine); text-decoration: underline; cursor: pointer; }
.btn-sm { font: 700 .95rem/1 var(--f-body); padding: .55rem .8rem; border-radius: 5px; border: 2px solid var(--pine); background: var(--card); color: var(--pine); cursor: pointer; }
.btn-sm:hover { background: var(--paper-2); }
.btn:disabled, .btn-sm:disabled { opacity: .4; cursor: default; }
.chip { font: inherit; font-size: .95rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.chip b { color: var(--brass); margin-left: .2rem; }
.chip.on { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.chip.on b { color: var(--gold); }
mark { background: var(--mark); color: inherit; padding: 0 .05em; border-radius: 2px; }

.kjv { padding-block: 2.5rem 4rem; display: grid; gap: 1.5rem; }
.kjv-find { background: var(--card); border: 1px solid var(--line); padding: 1.3rem 1.4rem; display: grid; gap: .7rem; }
.kjv-label { font-weight: 700; }
.kjv-findrow { display: flex; gap: .6rem; flex-wrap: wrap; }
.kjv-findrow input { flex: 1 1 16rem; min-width: 0; font: inherit; padding: .85rem 1rem; border: 2px solid var(--line); border-radius: 6px; background: var(--field); color: var(--ink); }
.kjv-findrow input:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--pine); }
.kjv-opts summary { cursor: pointer; font-weight: 700; color: var(--pine); width: max-content; }
.kjv-optgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin-top: .9rem; }
.kjv-optgrid fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .8rem 1rem 1rem; margin: 0; display: grid; gap: .45rem; align-content: start; min-width: 0; }
.kjv-optgrid legend { font-weight: 700; padding: 0 .3rem; }
.kjv-optgrid label { display: flex; gap: .5rem; align-items: center; }
.kjv-optgrid select { font: inherit; padding: .55rem .6rem; border: 2px solid var(--line); border-radius: 6px; background: var(--field); color: var(--ink); max-width: 100%; }
.kjv-sub { margin-top: .4rem; font-size: .95rem; color: var(--muted); }
.kjv-hint { font-size: .9rem; color: var(--muted); }

.kjv-mode { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.kjv-mode-label { font-weight: 700; font-size: .95rem; margin-right: .6rem; }
.kjv-mode button { font: 700 .95rem var(--f-body); padding: .6rem .9rem; border: 2px solid var(--pine); background: var(--card); color: var(--pine); cursor: pointer; }
.kjv-mode button + button { border-left: 0; }
.kjv-mode button:first-of-type { border-radius: 6px 0 0 6px; }
.kjv-mode button:last-of-type { border-radius: 0 6px 6px 0; }
.kjv-mode button[aria-pressed="true"] { background: var(--pine); color: var(--on-pine); }
.kjv-mode button:disabled { opacity: .45; cursor: default; }

.kjv-hitbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; background: var(--paper-2); border: 1px solid var(--line); padding: .7rem 1rem; margin-bottom: 1rem; }
.kjv-hitbar #kjv-hit-count { font-weight: 700; }
.kjv-hitbtns { display: flex; gap: .5rem; margin-left: auto; }

.kjv-steps { display: flex; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.kjv-page { background: var(--card); border: 1px solid var(--line); padding: 2.2rem clamp(1.1rem, 4vw, 3.2rem) 2.6rem; margin-block: 1rem; box-shadow: 0 18px 40px -30px rgba(29,39,31,.45); }
.kjv-ref { font-size: var(--step-3); text-align: center; }
.kjv-title { text-align: center; font-family: var(--f-display); font-style: italic; color: var(--muted); margin-top: .5rem; }
.kjv-text { max-width: 40rem; margin: 1.6rem auto 0; font-family: var(--f-display); font-size: 1.2rem; line-height: 1.85; }
body.big .kjv-text { font-size: 1.42rem; }
.kjv-text .vs { margin: 0 0 .55rem; padding: .1rem .35rem; border-radius: 4px; scroll-margin-top: 2rem; }
/* a selected verse is OUTLINED, never shaded: shading looked like a pale highlight (fresh-eyes review, 2026-10-20).
   Drawn inside the verse (negative offset) so a book page never clips it, and with any highlight color under it. */
.kjv-text .vs.hl, .kjv-text .vs.hl-more { outline: 2px solid var(--pine); outline-offset: -2px; border-radius: 4px; }
/* a picked verse is plainly picked: a thick line down its left side as well (a fresh-eyes reader, 2026-10-25: "the verse itself
   didn't look any different"; 2026-10-26) */
.kjv-text .vs.hl, .kjv-text .vs.hl-more { outline-width: 3px; box-shadow: inset 4px 0 0 var(--pine); }
.kjv-text .vs.hl.has-note, .kjv-text .vs.hl-more.has-note { box-shadow: inset 4px 0 0 var(--pine), inset -3px 0 0 var(--note-bar, var(--brass)); }
.kjv-text i { font-style: italic; }
.kjv-text .vn { font-family: var(--f-body); font-size: .72rem; font-weight: 700; color: var(--brass); text-decoration: none; vertical-align: super; padding: 0 .1rem; }
.kjv-text .vn:hover { color: var(--pine); text-decoration: underline; }
.kjv-text.single { font-size: 1.55rem; line-height: 1.7; text-align: center; }
.kjv-text.single .vs { margin-bottom: 1rem; }
.kjv-head { font-family: var(--f-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: var(--brass); margin: 1.4rem 0 .4rem; }
.kjv-more { text-align: center; margin-top: 1.4rem; }
.kjv-note { font-style: italic; color: var(--muted); text-align: center; margin: 1.2rem 0 .4rem; font-size: 1.05rem; }
/* a page for every chapter (6.19, 2026-10-22): /john/3/, /john/ and /books/, plain pages search engines can read */
.chp { padding-block: 1.4rem 2.6rem; }
.chp-crumbs { font-size: .92rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .1rem .45rem; }
.chp-crumbs a { color: var(--pine); }
.chp .kjv-ref { margin-top: 1rem; font-size: clamp(1.9rem, 1.4rem + 2.5vw, 2.6rem); }
.chp-kjv { text-align: center; color: var(--muted); margin: .2rem 0 0; }
.chp-open { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin: 1.2rem 0 0; text-align: center; }
.chp-open span { color: var(--muted); font-size: .95rem; }
.chp-steps { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; max-width: 40rem; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.chp-steps a { display: inline-flex; align-items: center; min-height: 44px; color: var(--pine); font-weight: 600; }
.chp-steps a[rel="prev"]::before { content: "\2039\00a0"; }
.chp-steps a[rel="next"]::after { content: "\00a0\203a"; }
.chp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: .45rem; max-width: 40rem; margin: 1.6rem auto 0; }
.chp-grid a, .chp-books a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: .3rem .5rem; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; }
.chp-grid a:hover, .chp-books a:hover { border-color: var(--pine); color: var(--pine); }
.chp-sec { max-width: 40rem; margin: 1.8rem auto .6rem; font: 700 .85rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.stats { padding-block: 1.4rem 3rem; max-width: 52rem; }
.stats-head { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.2rem; }
.stats-head p:last-child { margin-bottom: 0; }
.stats-top a { color: var(--pine); font-weight: 600; }
.stats h1 { margin-top: .4rem; }
.stats-locked, .stats-note { color: var(--muted); max-width: 40rem; }
.stats-device { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); }
.stats-device[hidden] { display: none; }
.stats-device p { margin: 0; }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.stats-card { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: .9rem 1rem; }
.stats-card h2 { font-size: 1rem; margin: 0 0 .4rem; color: var(--brass); text-transform: uppercase; letter-spacing: .1em; }
.stats-card p { margin: .15rem 0; } .stats-card b { font-size: 1.4rem; color: var(--pine-deep); margin-right: .3rem; }
.stats-part { margin-top: 2rem; } .stats-part h2 { font-size: 1.3rem; }
.stats-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .95rem; }
.stats-table th, .stats-table td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--line); }
/* drawn as pictures (Butcher 2026-10-31, "I like the preview"): one color for visitors, a lighter one for pages opened */
.stats-big { margin: 0 0 .2rem; } .stats-big b { font-size: 2rem; }
.stats-change { color: var(--pine); font-weight: 600; font-size: .95rem; }
.stats-chart { display: block; width: 100%; height: auto; margin-top: .4rem; }
.stats-grid { stroke: var(--line); stroke-width: 1; }
.stats-axis { fill: var(--muted); font-size: 11px; font-family: inherit; }
.stats-visitors, .stats-bar { fill: var(--pine); }
.stats-pages { fill: var(--pine); opacity: .35; }
.stats-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: .92rem; color: var(--muted); margin: .4rem 0 0; }
.stats-key { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; background: var(--pine); margin-left: .4rem; }
.stats-key:first-child { margin-left: 0; } .stats-key-p { opacity: .35; }
.stats-more { margin-top: .8rem; } .stats-more summary { cursor: pointer; color: var(--pine); font-weight: 600; }
.stats-testament { margin: .8rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stats-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: .3rem; }
.stats-book { border: 1px solid var(--line); border-radius: 6px; padding: .35rem .3rem; text-align: center; font-size: .75rem; line-height: 1.2; min-width: 0;
  display: flex; flex-direction: column; justify-content: center; background: var(--card); }
.stats-book span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stats-book b { font-size: .85rem; }
.stats-l1 { background: color-mix(in srgb, var(--pine) 18%, var(--card)); }
.stats-l2 { background: color-mix(in srgb, var(--pine) 40%, var(--card)); }
.stats-l3 { background: color-mix(in srgb, var(--pine) 65%, var(--card)); color: var(--on-pine); }
.stats-l4 { background: var(--pine); color: var(--on-pine); }
.stats-bars { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .35rem; max-width: 40rem; }
.stats-bars li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 3.5rem; gap: .6rem; align-items: center; }
.stats-bars li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-bars svg { width: 100%; height: .8rem; display: block; } .stats-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.stats-split { display: block; width: 100%; height: 1.4rem; border-radius: 6px; overflow: hidden; margin-top: .4rem; }
.stats-sub { font-size: 1.05rem; margin: 1.2rem 0 0; }
@media (max-width: 30rem) { .stats-bars li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 3rem; } }
.stats-none { color: var(--muted); }
.chp-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .45rem; max-width: 40rem; margin: 0 auto; }
.kjv-loading, .kjv-error { text-align: center; color: var(--muted); }

.kjv-notice:empty { display: none; }
.kjv-notice { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.kjv-summary { font-weight: 700; font-size: 1.1rem; }
.kjv-books { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; padding: .2rem; }
.kjv-books .chip-more { border-style: dashed; }
.kjv-books:empty { display: none; }
.kjv-results { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.hit { background: var(--card); border: 1px solid var(--line); padding: 1rem 1.1rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: start; }
.hit-ref { font-weight: 700; color: var(--pine-deep); grid-column: 1; }
.hit-text { grid-column: 1; font-family: var(--f-display); font-size: 1.08rem; line-height: 1.65; }
.hit-open { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: .4rem; }
#kjv-more { margin-top: 1rem; justify-self: start; }
.kjv-credit { font-size: .9rem; color: var(--muted); }

@media (max-width: 900px) { .kjv-optgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .kjv-findrow .btn { flex: 1 1 100%; justify-content: center; }
  .hit { grid-template-columns: minmax(0, 1fr); }
  .hit-open { grid-column: 1; grid-row: auto; flex-direction: row; }
  .kjv-hitbtns { margin-left: 0; }
  .kjv-steps .btn { flex: 1 1 0; justify-content: center; padding-inline: .8rem; }
}


/* ================= Bible: the book ================= */
.kjv-page.is-book { background: none; border: 0; box-shadow: none; padding: 1rem 0 0; }
.bk { --bk-pt: 16px; --bk-px: 18px; --bk-pb: 20px; position: relative; padding: var(--bk-pt) var(--bk-px) var(--bk-pb); border-radius: 12px;
  background: radial-gradient(120% 140% at 50% 0%, #5a3a26 0%, var(--walnut) 45%, var(--walnut-2) 100%);
  box-shadow: inset 0 0 0 2px rgba(169,133,58,.55), inset 0 0 0 7px rgba(0,0,0,.18), 0 30px 50px -30px rgba(0,0,0,.65); }
.bk-spread { position: relative; display: grid; grid-template-columns: 1fr 1fr; perspective: 2600px; }
.bk.one .bk-spread { grid-template-columns: 1fr; }
.bk-page { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow: hidden;
  padding: 1.1rem 1.6rem .9rem; color: var(--ink); background: var(--page); }
.bk-left  { background: linear-gradient(90deg, var(--page-in) 0%, var(--page) 8%, var(--page) 86%, var(--page-gutter) 100%);
  box-shadow: -1px 0 0 var(--edge-1), -2px 0 0 var(--edge-2), -3px 0 0 var(--edge-3), -4px 0 0 var(--edge-4); border-radius: 4px 0 0 4px; }
.bk-right { background: linear-gradient(270deg, var(--page-in) 0%, var(--page) 8%, var(--page) 86%, var(--page-gutter) 100%);
  box-shadow: 1px 0 0 var(--edge-1), 2px 0 0 var(--edge-2), 3px 0 0 var(--edge-3), 4px 0 0 var(--edge-4); border-radius: 0 4px 4px 0; }
.bk.one .bk-left { background: var(--page); border-radius: 4px; box-shadow: 1px 0 0 var(--edge-1), 2px 0 0 var(--edge-2), 3px 0 0 var(--edge-3), -1px 0 0 var(--edge-1); }
.bk-measure { position: absolute; inset: 0 auto 0 0; width: 50%; visibility: hidden; pointer-events: none; }
.bk.one .bk-measure { width: 100%; }
.bk-head { flex: none; text-align: center; font: 700 .72rem/1 var(--f-body); letter-spacing: .24em; color: var(--brass);
  padding-bottom: .6rem; margin-bottom: .7rem; border-bottom: 1px solid var(--bk-rule); }
.bk-foot { flex: none; text-align: center; font: .75rem/1 var(--f-body); color: var(--muted); padding-top: .6rem; min-height: 1.35rem; }
.bk-body { flex: 1 1 auto; min-height: 0; overflow: hidden; font-family: var(--f-display); font-size: 1.08rem; line-height: 1.7; }
body.big .bk-body { font-size: 1.3rem; }
.bk-body.bk-scroll { overflow-y: auto; }
.bk-body .vs { margin: 0 0 .35rem; padding: 0 .2rem; border-radius: 3px; }
.bk-body .vs.hl, .bk-body .vs.hl-more { outline: 2px solid var(--pine); outline-offset: -2px; border-radius: 4px; }
.bk-body .vn { font-family: var(--f-body); font-size: .68rem; font-weight: 700; color: var(--brass); text-decoration: none; vertical-align: super; padding: 0 .1rem; }
.bk-body .vn:hover { color: var(--pine); text-decoration: underline; }
.bk-body .kjv-title { text-align: center; margin: 0 0 .6rem; font-size: .98rem; }
.bk-body .kjv-head { margin: .7rem 0 .25rem; }
.bk-body .kjv-note { margin: .8rem 0 .3rem; font-size: .95rem; }
.bk-chap { text-align: center; font: 400 1.5rem/1.1 var(--f-display); color: var(--pine-deep); letter-spacing: .06em; margin: .1rem 0 .7rem; }
.bk-blank { display: grid; place-items: center; }
.bk-orn { width: 2.4rem; height: 2.4rem; color: var(--orn); }
.bk-ribbon { position: absolute; top: 0; left: calc(50% - 7px); width: 14px; height: calc(100% + 26px); pointer-events: none;
  background: linear-gradient(90deg, #17331f, #2f5941 45%, #2f5e43); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.25); opacity: .95; }
.bk.one .bk-ribbon { left: auto; right: 26px; width: 12px; height: 60px; }

/* the turning page */
.bk-leaf { position: absolute; top: 0; height: 100%; width: 50%; transform-style: preserve-3d; z-index: 5;
  transition: transform .7s cubic-bezier(.45,.05,.25,1); }
.bk-leaf.fwd  { left: 50%; transform-origin: left center; }
.bk-leaf.back { left: 0;   transform-origin: right center; }
.bk-leaf.fwd.go  { transform: rotateY(-180deg); }
.bk-leaf.back.go { transform: rotateY(180deg); }
.bk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-face.back { transform: rotateY(180deg); }
.bk-leaf .front::after, .bk-leaf .back::after { content: ""; position: absolute; inset: 0; pointer-events: none; transition: opacity .7s; opacity: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 60%); }
.bk-leaf.go .front::after { opacity: 1; }
.bk-leaf.single { left: 0; width: 100%; transition: transform .45s ease, opacity .45s ease; transform-origin: left center; }
.bk-leaf.single.fwd.go  { transform: translateX(-12%) rotateY(-25deg); opacity: 0; }
.bk-leaf.single.back.go { transform: translateX(12%) rotateY(25deg); opacity: 0; }
.bk-left  { padding-right: 2.3rem; }
.bk-right { padding-left: 2.3rem; padding-right: 1.6rem; }
.bk-measure { padding-right: 2.3rem; }
.bk.one .bk-left, .bk.one .bk-measure { padding-right: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .bk-leaf { transition: none; } }
@media (max-width: 640px) {
  .bk { --bk-pt: 10px; --bk-px: 10px; --bk-pb: 14px; }
  .bk-page { padding: .9rem 1.1rem .7rem; }
}

/* ================= Bible: closed cover, front of the book ================= */
#kjv-panel-read:not(.bk-is-open) .kjv-close { display: none; }
.bk-is-closed .kjv-steps, .bk-is-closed .kjv-hitbar { display: none !important; }
.kjv-steps { align-items: center; }
.kjv-close { font-size: .95rem; padding: .7rem 1rem; }

/* the closed Bible */
.bk-closed { display: grid; justify-items: center; gap: 3rem; padding: 1.5rem 0 1rem; }
.bk-cover { position: relative; width: min(100%, 380px); aspect-ratio: 3 / 4.1; border-radius: 6px 14px 14px 6px;
  background: radial-gradient(120% 100% at 30% 20%, #6a4630 0%, var(--walnut) 45%, var(--walnut-2) 100%);
  box-shadow: inset 10px 0 14px -8px rgba(0,0,0,.55), inset -2px 0 0 rgba(255,255,255,.06), 4px 4px 0 var(--page-gutter), 6px 6px 0 var(--edge-3), 8px 10px 0 var(--edge-4), 0 30px 46px -20px rgba(0,0,0,.6); }
.cv-frame { position: absolute; inset: 7% 8% 7% 12%; border: 2px solid rgba(201,174,106,.75); outline: 1px solid rgba(201,174,106,.45); outline-offset: 6px; border-radius: 4px;
  display: grid; justify-items: center; align-content: center; gap: 1.2rem; text-align: center; color: var(--edge-1); }
.cv-cross { width: 2.6rem; height: 3.9rem; color: #d9c48f; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
.cv-title { font-family: var(--f-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); line-height: 1.05; letter-spacing: .12em; text-transform: uppercase;
  color: #e3cf96; text-shadow: 0 1px 0 rgba(0,0,0,.5), 0 0 1px rgba(255,236,170,.4); }
.cv-church { font: 700 .78rem/1.3 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: #cdb77e; max-width: 80%; }
/* the ribbons come out from between the pages at the bottom edge of the book (the cream page edges
   below the cover), not over the cover; a shadow at the top is where each one slips between the pages */
.cv-ribbon { position: absolute; top: calc(100% + 4px); left: 58%; width: 14px; height: 34px;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 7px), linear-gradient(90deg, #17331f, #2f5941 45%, #2f5e43);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%); }
.cv-actions { display: grid; justify-items: center; gap: .7rem; text-align: center; }
.cv-actions .btn { min-width: 15rem; justify-content: center; }
.cv-where { color: var(--muted); }

/* the cover swinging open or shut over the spread */
/* the swinging cover is exactly one half of the board, so it lands with no jump */
.bk-coverleaf { position: absolute; top: calc(-1 * var(--bk-pt)); bottom: calc(-1 * var(--bk-pb)); left: 50%; width: calc(50% + var(--bk-px)); z-index: 8; transform-style: preserve-3d; transform-origin: left center;
  transition: transform .8s cubic-bezier(.45,.05,.25,1); }
.bk-coverleaf.one { top: -6px; bottom: -6px; left: 0; width: calc(100% + 6px); }
.bk-coverleaf.open { transform: rotateY(0deg); }
.bk-coverleaf.open.go { transform: rotateY(-180deg); }
.bk-coverleaf.shut { transform: rotateY(-180deg); }
.bk-coverleaf.shut.go { transform: rotateY(0deg); }
.bk-coverleaf.one.open.go { transform: rotateY(-100deg); opacity: 0; transition: transform .8s ease, opacity .8s ease; }
.bk-coverleaf.one.shut { transform: rotateY(-100deg); opacity: 0; transition: transform .8s ease, opacity .8s ease; }
.bk-coverleaf.one.shut.go { transform: rotateY(0deg); opacity: 1; }
.cv-face { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cv-face.front { background: radial-gradient(120% 100% at 30% 20%, #6a4630 0%, var(--walnut) 45%, var(--walnut-2) 100%); box-shadow: inset 10px 0 14px -8px rgba(0,0,0,.55); }
.cv-face.back { transform: rotateY(180deg); border-radius: 12px 0 0 12px; background: radial-gradient(120% 140% at 100% 0%, #5a3a26 0%, var(--walnut) 45%, var(--walnut-2) 100%); }
.bk-coverleaf.one .cv-face.back { border-radius: 4px; background: linear-gradient(135deg, #e9dcc0, #d8c7a0); box-shadow: inset 0 0 0 10px var(--walnut), inset 0 0 0 12px rgba(201,174,106,.6); }
/* the inside of the front cover carries the first page (the left page), so nothing shows there until the cover lands */
.cv-face.back > .bk-page { position: absolute; top: var(--bk-pt); bottom: var(--bk-pb); left: var(--bk-px); right: 0; height: auto; }
.cv-mask { position: absolute; top: calc(-1 * var(--bk-pt) - 1px); bottom: calc(-1 * var(--bk-pb) - 1px); left: calc(-1 * var(--bk-px) - 1px); width: calc(50% + var(--bk-px) + 1px); z-index: 7; background: var(--paper); pointer-events: none; }
.bk.cv-moving .bk-ribbon { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .bk-coverleaf { transition: none; } }

/* inside cover and title page */
.bk-body.bk-full { display: flex; }
.bk-inside, .bk-tp { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 100%; padding: 1rem; }
.bk-inside-verse { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; line-height: 1.6; max-width: 20ch; color: var(--pine-deep); }
.bk-inside-verse i { font-style: normal; }
.bk-inside-ref { margin-top: 1rem; font: 700 .75rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.tp-the { font: 400 1rem/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.tp-holy { font: 400 clamp(2rem, 1.3rem + 2vw, 2.8rem)/1.05 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pine-deep); margin-top: .4rem; }
.tp-sub { font: italic 400 1.05rem/1.4 var(--f-display); margin-top: 1.2rem; }
.tp-small { font: .8rem/1.5 var(--f-body); color: var(--muted); margin-top: .8rem; max-width: 30ch; }
.tp-ed { font: 700 .75rem/1.6 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-top: 1.4rem; }
.tp-rule { width: 3rem; height: 1px; background: var(--brass); margin: 1.4rem 0 1rem; }
.tp-church { font: 400 1.05rem/1.3 var(--f-display); color: var(--ink); }

/* contents */
.toc-title { text-align: center; font: 400 1.35rem/1.2 var(--f-display); color: var(--pine-deep); margin: .1rem 0 .8rem; }
.toc-test { font: 700 .72rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin: .9rem 0 .35rem; }
.toc-row { display: flex; align-items: baseline; gap: .4rem; margin: 0; line-height: 1.75; font-family: var(--f-display); font-size: .95em; }
.toc-row button { all: unset; font: inherit; cursor: pointer; color: var(--ink); }  /* grows with Larger text */
.toc-row button:hover { color: var(--pine); text-decoration: underline; }
.toc-row button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 2px; }
.toc-dots { flex: 1; border-bottom: 1px dotted var(--dots); transform: translateY(-.3em); }
.toc-n { font: .85rem/1 var(--f-body); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .kjv-steps .kjv-close { order: 3; flex: 1 1 calc(50% - .4rem); } }

/* ================= Bible: ribbons ================= */
/* the green ribbon follows the reader; red and gold stay where they are put. Each lifts while a page turns, then settles */
.bk-ribbon { transform-origin: 50% 0; transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
.bk.turning .bk-ribbon:not(.bk-rb), .bk.turning .bk-rb.here { transform: scaleY(.05); transition: transform .16s ease-in; }
.bk-rb { all: unset; box-sizing: border-box; position: absolute; width: 13px; cursor: pointer; pointer-events: auto; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); box-shadow: 0 2px 4px rgba(0,0,0,.25);
  transform-origin: 50% 0; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.bk-rb.red  { background: linear-gradient(90deg, #4e1010, #8f2323 45%, #ad3b3d); }
.bk-rb.gold { background: linear-gradient(90deg, #7a5b1b, #c29a3a 45%, #dcbd62); }
.bk-rb.green { background: linear-gradient(90deg, #17331f, #2f5941 45%, #2f5e43); }   /* only shown when green is elsewhere */
/* on these pages: it runs down the gutter beside the green one and hangs out the bottom */
.bk-rb.here { top: 0; height: calc(100% + 26px); cursor: default; }
.bk-rb.red.here  { left: calc(50% + 9px); }
.bk-rb.gold.here { left: calc(50% - 22px); }
/* somewhere else in the book: only its end shows below the pages. Click it to turn there */
.bk-rb:not(.here) { top: calc(100% - 4px); height: 38px; }
.bk-rb.red:not(.here)  { left: calc(50% + 14px); }
.bk-rb.gold:not(.here) { left: calc(50% - 27px); }
.bk-rb.green:not(.here) { left: calc(50% - 7px); }
.bk-rb:not(.here):hover { transform: scaleY(1.12); }
.bk-rb:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; clip-path: none; }
.bk.one .bk-rb.here { left: auto; height: 60px; width: 11px; }
.bk.one .bk-rb.red  { left: auto; right: 44px; }
.bk.one .bk-rb.gold { left: auto; right: 60px; }
.bk.one .bk-rb.green { left: auto; right: 26px; }
.bk.one .bk-rb.here.red { right: 44px; } .bk.one .bk-rb.here.gold { right: 60px; }
.bk-rb.placed { animation: rbDrop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes rbDrop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bk { margin-bottom: 40px; }   /* room for the ribbon ends below the book */

/* on the closed cover: each ribbon hangs out the bottom, and drops into place when the Bible is closed */
.cv-rb.red  { left: 66%; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 7px), linear-gradient(90deg, #4e1010, #8f2323 45%, #ad3b3d); height: 28px; }
.cv-rb.gold { left: 50%; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 7px), linear-gradient(90deg, #7a5b1b, #c29a3a 45%, #dcbd62); height: 22px; }
.bk-closed.drop .cv-ribbon { transform-origin: 50% 0; animation: rbDrop .6s cubic-bezier(.34,1.56,.64,1) .45s both; }
.bk-closed.drop .cv-rb.red  { animation-delay: .57s; }
.bk-closed.drop .cv-rb.gold { animation-delay: .69s; }
.bk-closed.drop .cv-actions { animation: cvFade .35s ease .3s both; }
@keyframes cvFade { from { opacity: 0; } to { opacity: 1; } }
/* while the cover glides from its closed spot into the open book, only the cover shows */
.bk.cv-grow { background: none; box-shadow: none; }
.bk.cv-grow .bk-page, .bk.cv-grow .bk-ribbon, .bk.cv-grow .bk-tabs, .bk.cv-grow .cv-mask { visibility: hidden; }
.cv-mark { display: inline-flex; align-items: center; gap: .5rem; }
.cv-where { display: flex; align-items: center; gap: .5rem; justify-content: center; }

/* the ribbon controls under the book */
.kjv-ribbons { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.6rem; margin-top: 1.2rem; padding: .9rem 1.1rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); }
#kjv-panel-read:not(.bk-is-open) .kjv-ribbons, .kjv-ribbons:empty { display: none; }
.rb-title { flex-basis: 100%; margin: 0; font: 700 .72rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.rb-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex-basis: 100%; }
.rb-mode { display: inline-flex; margin-left: auto; border: 2px solid var(--pine); border-radius: 6px; overflow: hidden; }
.rb-opt { font: 700 .9rem/1 var(--f-body); padding: .5rem .75rem; border: 0; background: var(--card); color: var(--pine); cursor: pointer; }
.rb-opt + .rb-opt { border-left: 2px solid var(--pine); }
.rb-opt[aria-pressed="true"] { background: var(--pine); color: var(--on-pine); }
.rb-opt:focus-visible { outline: 3px solid var(--brass); outline-offset: -3px; }
.rb-ask { display: grid; gap: .7rem; margin: 0 0 1rem; padding: .9rem 1.1rem; border: 2px solid var(--pine); border-radius: 8px; background: var(--card); }
.rb-ask[hidden] { display: none; }
.rb-ask p { display: flex; align-items: center; gap: .6rem; margin: 0; }
.rb-ask-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 640px) { .rb-mode { margin-left: 0; } }
.rb-at em { color: var(--muted); }
.rb-note { flex-basis: 100%; margin: 0; display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; }
.rb-sw { display: inline-block; flex: none; width: 10px; height: 22px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%); }
.rb-sw.green { background: linear-gradient(90deg, #17331f, #2f5941 45%, #2f5e43); }
.rb-sw.red   { background: linear-gradient(90deg, #4e1010, #8f2323 45%, #ad3b3d); }
.rb-sw.gold  { background: linear-gradient(90deg, #7a5b1b, #c29a3a 45%, #dcbd62); }

/* ================= Bible: thumb tabs ================= */
.bk-tabs { display: none; }
.bk { --tab-w: 74px; }
body.big .bk { --tab-w: 92px; }
.bk.has-tabs { margin-right: var(--tab-w); }
.bk.has-tabs .bk-tabs { display: flex; flex-direction: column; gap: 3px; position: absolute; left: 100%; width: var(--tab-w);
  top: calc(var(--bk-pt) + 4px); bottom: calc(var(--bk-pb) + 4px); }
.bk-tab { all: unset; box-sizing: border-box; flex: 1 1 0; min-height: 0; display: flex; align-items: center; margin-left: -2px; padding: 0 .35em 0 .55em;
  font: 600 .72em/1.1 var(--f-body); color: var(--ink); cursor: pointer; overflow: hidden;
  background: linear-gradient(90deg, var(--tab-ot-a), var(--tab-ot-b) 35%); border: 1px solid var(--edge-3); border-left: 0; border-radius: 0 7px 7px 0;
  box-shadow: 2px 1px 3px rgba(0,0,0,.12); transition: transform .15s ease, background .15s ease; }
.bk-tab.nt { background: linear-gradient(90deg, var(--tab-nt-a), var(--tab-nt-b) 35%); border-color: var(--tab-nt-line); }
.bk-tab:hover { transform: translateX(3px); }
.bk-tab[aria-current="true"] { background: var(--pine); border-color: var(--pine-deep); color: var(--on-pine); transform: translateX(5px); }
.bk-tab:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.bk-tabpop { position: absolute; right: 10px; z-index: 9; width: min(300px, 46%); padding: .8rem .9rem .9rem;
  background: var(--page); border: 1px solid var(--edge-3); border-radius: 8px; box-shadow: 0 16px 34px -12px rgba(0,0,0,.5); }
.pop-h { margin: 0 0 .5rem; font: 700 .7rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.pop-list { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .6rem; }
.pop-list button { all: unset; cursor: pointer; padding: .15rem .3rem; border-radius: 3px; font: 400 1em/1.45 var(--f-display); color: var(--ink); }
.pop-list button:hover, .pop-list button:focus-visible { background: var(--edge-4); color: var(--pine); }
.pop-list button[aria-current="true"] { color: var(--pine); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .bk-ribbon, .bk-rb, .bk-tab { transition: none; } .bk-rb.placed, .bk-closed.drop .cv-ribbon, .bk-closed.drop .cv-actions { animation: none; } }
.bk.one .bk-rb:not(.here) { height: 38px; }
@media (min-width: 641px) { .kjv-steps .kjv-toc { margin-left: auto; } .kjv-steps .kjv-close:not(.kjv-toc) { margin-right: auto; } }

/* ================= 4. Look of the reader here ================= */
/* saved highlights (marks.js): after the selection rule, so a verse's own color shows while it is selected
   (the selection keeps its gold bar at the left) */
.kjv-text .vs.mk-yellow, .bk-body .vs.mk-yellow { background: var(--mk-yellow); }
.kjv-text .vs.mk-green,  .bk-body .vs.mk-green  { background: var(--mk-green); }
.kjv-text .vs.mk-blue,   .bk-body .vs.mk-blue   { background: var(--mk-blue); }
.kjv-text .vs.mk-pink,   .bk-body .vs.mk-pink   { background: var(--mk-pink); }
.mk-bar { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: max(12px, env(safe-area-inset-bottom));
  width: min(40rem, calc(100vw - 24px)); display: grid; gap: .5rem; padding: .7rem .8rem .8rem;
  background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); }
.mk-ref { font-weight: 700; font-size: .95rem; }
.mk-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.mk-btn { display: inline-flex; align-items: center; gap: .4rem; font: 600 .95rem/1 var(--f-body); padding: .6rem .75rem; min-height: 44px;
  border: 2px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer; }
.mk-btn[aria-pressed="true"] { border-color: var(--pine-deep); box-shadow: inset 0 0 0 1px var(--pine-deep); }
.mk-btn:disabled { opacity: .45; cursor: default; }
.mk-done { margin-left: auto; background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.mk-sw { width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1px solid var(--line); }
.mk-sw.mk-yellow { background: var(--mk-yellow); } .mk-sw.mk-green { background: var(--mk-green); }
.mk-sw.mk-blue { background: var(--mk-blue); } .mk-sw.mk-pink { background: var(--mk-pink); }
/* a verse with a note: a thin gold bar down the right edge (a shadow, so nothing moves) */
.kjv-text .vs.has-note, .bk-body .vs.has-note { box-shadow: inset -3px 0 0 var(--note-bar, var(--brass)); }
.nt-box { display: grid; gap: .4rem; margin-top: .6rem; }
.nt-label { font-weight: 700; font-size: .95rem; }
.nt-text { width: 100%; box-sizing: border-box; min-height: 6.5rem; max-height: 40vh; resize: vertical; font: 400 1rem/1.45 var(--f-body);
  color: var(--ink); background: var(--reading, var(--card)); border: 1px solid var(--muted); border-radius: 6px; padding: .55rem .65rem; }
.nt-text:focus { outline: 3px solid var(--pine); outline-offset: 1px; }
.nt-count { font-size: .85rem; color: var(--muted); min-height: 0; margin: 0; }
.nt-count:empty { display: none; }

.nt-save { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
body.mk-open .site-footer { padding-bottom: 9rem; }   /* the bar never hides the last words on the page */
@media (max-width: 640px) { .mk-btn { flex: 1 1 calc(33% - .4rem); justify-content: center; } .mk-done { margin-left: 0; } }

.kjv-find, .hit, .kjv-hitbar { border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); background: var(--card); }
.kjv-page { border-radius: 16px; }
.kjv-page:not(.is-book) { background: var(--reading, var(--card)); }   /* the plain page a chapter is read on */
.kjv-ribbons { border-radius: 14px; }
.kjv-mode button { border-color: var(--pine-deep); color: var(--pine-deep); }
.kjv-mode button[aria-pressed="true"] { background: var(--pine-deep); color: var(--on-pine); }
.chip.on { background: var(--pine-deep); border-color: var(--pine-deep); }
.btn-sm { border-color: var(--pine-deep); color: var(--pine-deep); border-radius: 8px; }
.kjv-findrow input, .kjv-optgrid select { border-radius: 10px; }
.bk-tab.nt { border-color: var(--tab-nt-line); }
.bk-tab { border-color: var(--edge-3); }
.bk-tabpop { border-color: var(--edge-3); }
.kjv-page.is-book, .kjv-page.is-book * { color-scheme: inherit; }
.kjv, .kjv-find { grid-template-columns: minmax(0, 1fr); }   /* the search box may never push the page wider than the screen (Large Print on a phone did) */


/* ---- My Notes page ---- */
.notes { padding-block: 1.6rem 3rem; max-width: 52rem; }
.notes-where { color: var(--muted); }
.notes-find { display: grid; gap: .35rem; margin-top: 1.2rem; }
.notes-find label { font-weight: 700; }
.notes-find input { font: 400 1.05rem var(--f-body); padding: .7rem .8rem; border: 1px solid var(--muted); border-radius: 8px; background: var(--card); color: var(--ink); min-height: 44px; }
.notes-sum { margin-top: 1rem; color: var(--muted); }
.notes-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; }
.note-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; box-shadow: inset -3px 0 0 var(--note-bar, var(--brass)); }
.note-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.note-ref { font-size: 1.25rem; }
.note-ref a { color: var(--pine-deep); }
.note-mark { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--muted); }
.note-verse { font-family: var(--f-head); font-style: italic; color: var(--muted); margin-top: .4rem; }
.note-text { margin-top: .6rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.note-card .nt-label { display: block; margin-top: .7rem; }
.note-card .nt-text { margin-top: .35rem; }
.note-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.note-actions .btn-sm { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.notes-empty { margin-top: 1rem; }
.notes-undo { position: sticky; bottom: 12px; margin-top: 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; box-shadow: 0 10px 26px -12px rgba(0,0,0,.5); }
.notes-undo .btn-sm { min-height: 44px; }

/* ---- the "not found" page ---- */
.lost { padding-block: 2.4rem 3rem; text-align: center; }
.lost blockquote { margin: 0 auto; max-width: 38rem; font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 3.6vw, 1.4rem); }
.lost cite { display: block; margin-top: .7rem; font-style: normal; font-family: var(--f-body); font-size: .95rem; letter-spacing: .08em; color: var(--muted); }
.lost .actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* My Notes: order, jump, book groups */
.notes-tools { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: end; margin-top: 1.2rem; }
.notes-sort { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.notes-sort legend { font-weight: 700; padding: 0; margin-bottom: .35rem; width: 100%; }
.notes-sort label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; }
.notes-jump { display: grid; gap: .35rem; font-weight: 700; }
.notes-jump select { font: 400 1rem var(--f-body); min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--muted); border-radius: 8px; background: var(--card); color: var(--ink); }
.notes-books { margin-top: 1rem; display: grid; gap: 1rem; }
.note-book { border-top: 2px solid var(--line); padding-top: .4rem; }
.note-book-sum { display: flex; align-items: baseline; gap: .8rem; cursor: pointer; min-height: 44px; padding: .35rem 0; list-style: none; }
.note-book-sum::-webkit-details-marker { display: none; }
.note-book-sum::before { content: ""; width: .55rem; height: .55rem; border-right: 2px solid var(--pine); border-bottom: 2px solid var(--pine); transform: rotate(-45deg); transition: transform .15s; align-self: center; flex: none; }
.note-book[open] > .note-book-sum::before { transform: rotate(45deg); }
.note-book-h { font-size: 1.5rem; }
.note-count { color: var(--muted); font-size: .95rem; }
.note-book .notes-list { margin-top: .6rem; }
.note-date { margin-top: .5rem; font-size: .88rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .note-book-sum::before { transition: none; } }
.note-link { color: var(--pine-deep); font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* every drop-down menu draws its own small arrow, set in from the right edge with room around it.
   The browser's own arrow sits hard against the edge and cannot be moved. Drawn with CSS (no picture
   file), in the text color, so it follows every theme. Placed last and written to outrank the
   per-menu rules above, which set the padding. */
body select:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right .75rem center;
  background-size: .32rem .32rem; background-repeat: no-repeat;
  padding-right: 2.1rem;
}
/* Windows high contrast mode drops drawn arrows: give the menus back their own */
@media (forced-colors: active) {
  body select:not([multiple]) { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: .5rem; }
}
.source-list { margin: .7rem 0 0; padding-left: 1.3rem; display: grid; gap: .55rem; }

/* naming highlight colors (My Notes), and long names on the color buttons */
/* a color's name is never cut off: long names wrap onto a second line inside the button */
.mk-btn[data-c]:not([data-c=""]) { min-width: 0; text-align: left; line-height: 1.2; }
.mk-name { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) { .mk-btn[data-c]:not([data-c=""]) { flex: 1 1 calc(50% - .4rem); justify-content: flex-start; } }
.color-names { margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 10px; padding: .2rem .9rem; background: var(--card); }
.color-names summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.color-help { color: var(--muted); margin-top: .2rem; }
.color-rows { display: grid; gap: .6rem; margin: .8rem 0 .9rem; }
.color-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .4rem .8rem; align-items: center; }   /* same label width on every row, so the boxes line up */
.color-row label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.color-row input { font: 400 1rem var(--f-body); min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--muted); border-radius: 8px; background: var(--field); color: var(--ink); min-width: 0; }
@media (max-width: 480px) { .color-row { grid-template-columns: minmax(0, 1fr); } }
.mk-btn .mk-sw { flex: none; }   /* the color square keeps its size beside a long name */

/* Keep a copy (backup.js) */
.backup-box { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 2px solid var(--line); }
.backup-box h2 { font-size: 1.5rem; }
.backup-box h3 { font-size: 1.15rem; margin-top: 1.6rem; }
.backup-box > p { margin-top: .6rem; }
.backup-box .actions { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.backup-last { color: var(--muted); }
.backup-step { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.backup-step p:first-child:focus { outline: none; }

/* "A new version is ready" (offline.js) */
.update-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .7rem 16px;
  background: var(--pine); color: var(--on-pine); font-weight: 600; }
.update-bar span { flex: 1 1 14rem; }
.update-bar .btn-sm { min-height: 44px; background: var(--on-pine); color: var(--pine-deep); border-color: var(--on-pine); }
.update-bar .update-later { background: transparent; color: var(--on-pine); }

/* phones: the reading controls in tidy, even rows (found on Butcher's iPhone 2026-10-19: "Just the verse"
   wrapped onto its own line, and side-by-side buttons were different heights) */
@media (max-width: 640px) {
  .kjv-mode { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; width: 100%; }
  .kjv-mode-label { grid-column: 1 / -1; margin: 0 0 .35rem; }
  .kjv-mode button { min-height: 44px; padding: .55rem .4rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  .kjv-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: .6rem; }
  .kjv-steps .btn { width: 100%; min-height: 48px; justify-content: center; text-align: center; line-height: 1.2; padding: .6rem .5rem; }
  .kjv-steps #kjv-prev-bot { order: 1; }
  .kjv-steps #kjv-next-bot { order: 2; }
  .kjv-steps .kjv-toc { order: 3; }
  .kjv-steps .kjv-close:not(.kjv-toc) { order: 4; }
  .kjv-steps .btn[hidden] { display: none; }
}

/* ================= compact phone layout (Butcher 2026-10-19) =================
   On a phone the Bible text started a screen and a half down. Now: Theme and Text size behind one
   button, a short page heading, the search box and its button on one row, Book/Chapter/Verse on one row. */
.look-btn .icon { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; padding-block: .5rem; gap: .35rem .5rem; }
  .brand { flex: 1 1 0; min-width: 0; font-size: 1.15rem; }
  .look-btn, .help-btn { padding: .35rem .65rem; font-size: .9rem; }
  .look-panel.open { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .look-panel .theme-pick { justify-content: space-between; }
  .look-panel .theme-pick select { min-height: 44px; flex: 0 1 14rem; min-width: 0; }

  /* the four doors: a bar at the foot of the screen, always there (the top bar slides away while reading) */
  :root { --doors-h: calc(3.7rem + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: calc(var(--doors-h) + 1px); }   /* (and its top border) */
  .doors { position: fixed; z-index: 57; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--line);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); box-shadow: 0 -6px 16px -12px rgba(0, 0, 0, .45); }
  .doors ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .door { flex-direction: column; justify-content: center; gap: .15rem; width: 100%; min-height: 3.7rem; padding: .3rem .2rem; border-radius: 0;
    font-size: .8rem; line-height: 1.1; text-align: center; }
  .door .icon { width: 1.45rem; height: 1.45rem; }
  .door[aria-current="page"] { background: var(--paper-2); box-shadow: inset 0 3px 0 var(--pine); }
  /* (what floats at the foot of the screen sits above the bar) */
  body .back-float, body .to-top, body .kjv-dock { bottom: calc(var(--doors-h) + .75rem); }   /* (body: it must win over their own rules, written later in this file; 2026-10-25 the Top button sat on My Study) */
  body .path-list { bottom: calc(var(--doors-h) + .75rem + 56px); }
  html body:has(#back-wrap) .kjv-dock { bottom: calc(var(--doors-h) + .75rem + 56px); }
  .notes-undo { bottom: calc(var(--doors-h) + 12px); }
  /* the bar steps aside while verses are picked, so the verse panel has the foot of the screen */
  body:has(.mk-bar:not([hidden])) .doors { display: none; }
  /* reading on in the Bible (2026-10-25): the doors bar slides away with the top bar; the one button brings both back */
  .doors { transition: transform .25s ease; }
  body:has(.mk-bar:not([hidden])) { padding-bottom: 0; }

  .page-head .wrap { padding-block: 1rem .9rem; }
  .page-head h1 { font-size: clamp(1.6rem, 1.2rem + 3vw, 2rem); margin-top: .15rem; }
  .page-head .lede { font-size: 1rem; margin-top: .4rem; }
  .page-head:has(+ .kjv) .lede, .page-head:has(+ .kjv) .eyebrow { display: none; }   /* the Bible page: the controls explain themselves */
  .page-head:has(+ .kjv) .wrap { padding-block: .7rem .6rem; }
  .page-head:has(+ .kjv) h1 { font-size: 1.4rem; margin: 0; }

  .kjv { padding-top: .8rem; gap: .8rem; }
  .kjv-page { margin-block: .4rem; padding-top: 1.4rem; }
  .kjv-find { padding: .8rem .9rem; gap: .5rem; }
  .kjv-label { font-size: .95rem; }
  .kjv-findrow { flex-wrap: nowrap; }
  .kjv-findrow input { flex: 1 1 auto; padding: .65rem .75rem; }
  .kjv-findrow .btn { flex: 0 0 auto; padding: .65rem .9rem; }
}

/* study guides in the note box (marks.js) */
.nt-guide { display: grid; gap: .3rem; }
.nt-guide label { font-weight: 700; font-size: .9rem; }
.nt-guide select { font: 400 .95rem var(--f-body); min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--muted); border-radius: 8px; background: var(--field); color: var(--ink); max-width: 100%; }
.nt-guide-help { font-size: .85rem; color: var(--muted); margin: 0; }
@media (max-width: 640px) { .nt-guide-help { display: none; } .nt-text { min-height: 5rem; } }
/* nothing in the verse bar may be wider than the bar: a long menu choice ("SOAP: Scripture, Observation, ...")
   had stretched the bar's inside past its edge on a phone */
.mk-bar { grid-template-columns: minmax(0, 1fr); }
.nt-box { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.nt-guide select { width: 100%; min-width: 0; }

/* phones: the ribbon controls as one tidy block per ribbon (Butcher 2026-10-20: "a little crowded"):
   the ribbon and where it is on the first line, its buttons side by side on the next, then
   Follows you / Stays put across the full width */
@media (max-width: 640px) {
  .kjv-ribbons { display: grid; gap: 0; padding: .8rem .9rem; }
  .rb-title { margin-bottom: .2rem; }
  .rb-row { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 0; border-top: 1px solid var(--line); }
  .rb-title + .rb-row { border-top: 0; }
  .rb-row .rb-sw { order: 1; align-self: center; }
  .rb-row .rb-at { order: 2; flex: 1 1 calc(100% - 1.5rem); min-width: 0; line-height: 1.35; }
  .rb-row .btn-sm { order: 3; flex: 1 1 0; min-height: 44px; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; }
  .rb-row .rb-mode { order: 4; flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
  .rb-row .rb-opt { min-height: 44px; }
  .rb-note { padding-top: .7rem; border-top: 1px solid var(--line); font-size: .88rem; }
}

/* part-verse highlights (marks.js, notes.js): <mark> pieces in the highlight colors; no padding, so nothing moves */
mark.wm { color: inherit; padding: 0; border-radius: 2px; }
mark.wm-yellow { background: var(--mk-yellow); } mark.wm-green { background: var(--mk-green); }
mark.wm-blue { background: var(--mk-blue); } mark.wm-pink { background: var(--mk-pink); }
/* Picked words: a dashed line UNDER them, never a box. Boxes were drawn per line and per italic word, so on a
   wrapped verse they stacked into each other (Butcher's iPhone, Terminal, 2026-10-20). wordtest checks every theme. */
mark.wm-pick { background: transparent; outline: none; text-decoration: none; }
/* ^ the picked words themselves carry no line: marks.js lays ONE even dashed line under each line of them (.wm-line),
   because lines drawn on each piece of the verse restarted their dashes and ran together (Butcher 2026-10-20).
   Each 10px: 6px dash, 4px gap. wordtest measures the drawn dashes. */
.wm-line { position: absolute; height: 2px; pointer-events: none; background: linear-gradient(to right, var(--pine) 0 6px, transparent 6px 10px) repeat-x 0 0 / 10px 2px; }
.wm-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.wm-box { display: grid; gap: .45rem; grid-template-columns: minmax(0, 1fr); }
.wm-help { margin: 0; font-size: .92rem; }
.wm-picks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.wm-picks label { display: grid; gap: .2rem; font-weight: 700; font-size: .85rem; }
.wm-picks select { width: 100%; min-width: 0; min-height: 44px; font: 400 .95rem var(--f-body); padding: .35rem .5rem; border: 1px solid var(--muted); border-radius: 8px; background: var(--field); color: var(--ink); }
.mk-bar.wm-open .vs { cursor: text; }

/* ================= Show highlights (Bible page) ================= */
/* Hiding: only in the Bible reader (My Notes has its own Show list). Background only, so the book's pages never move. */
:root[data-hl-hide~="yellow"] #kjv-reader .vs.mk-yellow, :root[data-hl-hide~="green"] #kjv-reader .vs.mk-green,
:root[data-hl-hide~="blue"] #kjv-reader .vs.mk-blue, :root[data-hl-hide~="pink"] #kjv-reader .vs.mk-pink,
:root[data-hl-hide~="yellow"] #kjv-reader mark.wm-yellow, :root[data-hl-hide~="green"] #kjv-reader mark.wm-green,
:root[data-hl-hide~="blue"] #kjv-reader mark.wm-blue, :root[data-hl-hide~="pink"] #kjv-reader mark.wm-pink { background-color: transparent; }   /* color only: the tags corner stays */
.hl-show .sh-sub #hl-sum { font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0; }
.hl-show.hl-some-hidden .sh-sub #hl-sum { font-weight: 700; }   /* never easy to miss that some are hidden */
.hl-panel { display: grid; gap: .7rem; padding: .3rem 0 .4rem; }
.hl-panel fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .9rem .8rem; margin: 0; min-width: 0; }
.hl-panel legend { font-weight: 700; padding: 0 .3rem; }
.hl-list { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.hl-list label { display: flex; align-items: center; gap: .45rem; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.hl-list input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--pine); }
.hl-list .mk-sw { flex: none; }
.hl-all { display: flex; flex-wrap: wrap; gap: .5rem; }
.hl-all .btn-sm { min-height: 44px; }
.hl-help { margin: 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 640px) { .hl-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hl-all .btn-sm { flex: 1 1 0; } }

/* ================= Tags (verse bar) ================= */
/* A tagged verse gets a small folded corner, top right: drawn as a picture, so no word moves (the book's pages stay
   exactly the same) and it sits with any highlight color. Screen readers hear 'Has tags'. */
.kjv-text .vs.has-tags, .bk-body .vs.has-tags { background-image: linear-gradient(225deg, var(--brass) 0 7px, transparent 7px); background-repeat: no-repeat; background-position: right top; background-size: 14px 14px; }
.tg-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; margin-top: .6rem; min-width: 0; }
.tg-label { font-weight: 700; margin: 0; }
.tg-help, .tg-from { margin: 0; font-size: .9rem; color: var(--muted); }
.tg-from:empty { display: none; }
.tg-list { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 40vh; overflow-y: auto; padding: 2px; }
.tg-list[hidden] { display: none; }
.tg-tag { font: 600 .95rem/1.2 var(--f-body); min-height: 44px; padding: .45rem .8rem; border-radius: 999px; border: 2px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.tg-tag[aria-pressed="true"] { border-color: var(--pine); background: var(--pine); color: var(--on-pine); }
.tg-tag[aria-pressed="true"]::before { content: "\2713\00a0"; }   /* a tick, so it is not shown by color alone */
.tg-tag.tg-color:disabled { opacity: 1; cursor: default; border-style: dashed; }
.tg-new { display: grid; gap: .3rem; }
.tg-new label { font-weight: 700; font-size: .9rem; }
.tg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.tg-row input { font: inherit; min-height: 44px; min-width: 0; padding: .4rem .6rem; border: 2px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); }
.tg-row input:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--pine); }

.note-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 0; }
.note-tag { font: 600 .85rem/1.25 var(--f-body); padding: .2rem .65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink); overflow-wrap: anywhere; }

/* ================= The tap hint and Undo (fresh-eyes review, 2026-10-20) ================= */
.kjv-tip { margin: 0 0 .7rem; padding: .55rem .8rem; border-left: 4px solid var(--pine); background: var(--card); color: var(--ink); font-size: .95rem; border-radius: 0 6px 6px 0; }
.kjv-tip[hidden] { display: none; }
.mk-undo-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .5rem 0 0; font-size: .95rem; }
.mk-undo-row[hidden] { display: none; }
.mk-undo-row .mk-btn { flex: none; }

/* ================= Several verses picked (Butcher 2026-10-20) ================= */
.mk-hint { margin: 0; font-size: .88rem; color: var(--muted); }
.mk-hint[hidden] { display: none; }
.mk-known { margin: 0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .1rem .9rem; }
.mk-known[hidden] { display: none; }
.mk-known-l { color: var(--muted); }
/* the way back (back.js, 2026-10-21; floats at the foot of the screen on both sides since the navigation review 2026-10-23,
   at the left so the Top button has the right) */
.back-float { position: fixed; z-index: 70; left: max(1rem, env(safe-area-inset-left, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: stretch; max-width: calc(100vw - 7.25rem); background: var(--card); border: 2px solid var(--pine-deep);
  border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); overflow: hidden; }
.back-to { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; min-width: 0; padding: 0 .4rem 0 .6rem; font-weight: 700;
  color: var(--pine-deep); text-decoration: none; }
.back-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back-to .icon { width: 1.1rem; height: 1.1rem; flex: none; }
.back-to:hover, .back-x:hover { background: var(--paper-2); }
.back-x { flex: none; width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid var(--line);
  background: none; color: var(--pine-deep); cursor: pointer; }
.back-x .icon { width: 1rem; height: 1rem; }
body.has-back .site-footer { padding-bottom: 5rem; }
/* the reader's path (path.js, 2026-10-25): Back, Forward and "Your path" in the same pill; the list opens above it */
.path-float { max-width: calc(100vw - 2rem); }
.back-to[hidden], .path-fwd[hidden] { display: none; }
.path-float.path-noback .path-fwd { border-left: 0; }
.path-btn { flex: none; min-height: 44px; padding: 0 .8rem; border: 0; border-left: 1px solid var(--line); background: none; color: var(--pine-deep);
  font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.path-btn:hover, .path-btn[aria-expanded="true"] { background: var(--paper-2); }
.path-list { position: fixed; z-index: 71; left: max(1rem, env(safe-area-inset-left, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + 56px + env(safe-area-inset-bottom, 0px)); max-width: 26rem; max-height: min(60vh, 30rem); overflow-y: auto;
  background: var(--card); color: var(--ink); border: 2px solid var(--pine-deep); border-radius: 14px; padding: .75rem; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45); }
.path-list[hidden] { display: none; }
.path-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.path-top h2 { margin: 0; font-size: 1.1rem; }
.path-close { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--pine-deep); cursor: pointer; border-radius: 8px; }
.path-close .icon { width: 1.1rem; height: 1.1rem; }
.path-say { margin: .2rem 0 .6rem; color: var(--muted); font-size: .92rem; }
.path-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.path-ol button { width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-left: 3px solid var(--line);
  padding: .4rem .7rem; min-height: 44px; cursor: pointer; display: grid; }
.path-ol button:hover { background: var(--paper-2); }
.path-ol button small { color: var(--muted); font-size: .82rem; }
.path-ol .now button { border-left-color: var(--pine); font-weight: 700; }
.path-off { margin-top: .6rem; font: inherit; font-size: .92rem; color: var(--pine); background: none; border: 0; padding: .4rem 0; min-height: 44px; cursor: pointer; text-decoration: underline; }
body.has-back main { padding-bottom: 4.5rem; }
/* reading down the page, Back and Your path slide away, and come back when you scroll up a little or go somewhere, so they never
   sit on the words you are reading (Butcher 2026-10-26: "Back button out of the way"; path.js sets path-tuck) */
.path-float { transition: transform .25s ease, opacity .25s ease; }
.path-float.path-tuck:not(:focus-within) { transform: translateY(calc(100% + 6rem)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .path-float { transition: none; } }

.wm-list[hidden], .wm-span:empty { display: none; }
.wm-list > summary { cursor: pointer; font-weight: 700; color: var(--pine); padding: .55rem 0; width: max-content; max-width: 100%; }
.wm-list .wm-picks { margin-top: .3rem; }

.wm-span { margin: 0; font-weight: 700; font-size: .95rem; }
.tg-tag[aria-pressed="mixed"] { border-color: var(--pine); border-style: dashed; }
.tg-tag[aria-pressed="mixed"]::before { content: "\2013\00a0"; }   /* on some of the picked verses */

/* ================= The verse panel (2026-10-21; first laid out in the fresh-eyes review, 2026-10-20) =================
   The verse and Done; one row of colors (round, the name under each); Note, Tags, Study, More, which never move (the
   open one marked like a tab); More's four below them. Butcher on the old panel: 13 buttons, "like an overload". */
.mk-top { display: flex; align-items: center; gap: .6rem; }
.mk-top .mk-ref { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.05rem; color: var(--pine-deep); overflow-wrap: anywhere; }
.mk-top .mk-done { flex: none; margin: 0; padding-inline: 1.2rem; }
.mk-bar .mk-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .3rem; align-items: start; }
.mk-bar .mk-dot { display: grid; justify-items: center; gap: .25rem; padding: .3rem .1rem .25rem; min-height: 0; border: 0; background: none; border-radius: 10px;
  text-align: center; font: 600 .78rem/1.15 var(--f-body); color: var(--ink); min-width: 0; }
.mk-bar .mk-dot .mk-sw { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; }
.mk-bar .mk-dot[aria-pressed="true"] { box-shadow: none; border: 0; }
.mk-bar .mk-dot[aria-pressed="true"] .mk-sw { outline: 3px solid var(--pine-deep); outline-offset: 2px; }
.mk-bar .mk-dot[aria-pressed="true"] .mk-name { font-weight: 800; }
.mk-bar .mk-dot:disabled .mk-sw { opacity: .45; }
.mk-bar .mk-dot[hidden] { display: none; }
.mk-sw.mk-none { background: var(--field); position: relative; }
.mk-sw.mk-none::after { content: ""; position: absolute; left: 6px; right: 6px; top: calc(50% - 1px); height: 2px; background: var(--muted); transform: rotate(-45deg); }
.mk-bar .mk-name { display: block; max-width: 100%; overflow-wrap: anywhere; }
.mk-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; }   /* (as many columns as buttons showing: Highlight, Note, Learn more, More) */
.mk-acts .mk-btn[hidden], .mk-top .mk-btn[hidden] { display: none; }
.mk-bar .mk-colors[hidden] { display: none; }
.mk-acts .mk-btn { display: grid; justify-items: center; gap: .2rem; margin: 0; padding: .45rem .2rem .4rem; font-size: .88rem; line-height: 1.1; text-align: center; }
.mk-acts .mk-btn .icon { width: 1.25rem; height: 1.25rem; color: var(--pine); }
.mk-acts .mk-btn[aria-expanded="true"] { border-color: var(--pine); box-shadow: inset 0 -4px 0 var(--pine); }   /* the open one, marked like a tab */
@media (max-width: 340px) { .mk-acts .mk-btn { font-size: .8rem; padding-inline: .1rem; } }   /* "Resources" fits a 320-pixel phone */
.mk-morebox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.mk-morebox[hidden] { display: none; }
.mk-morebox .mk-btn { justify-content: center; margin: 0; text-align: center; line-height: 1.15; }
.mk-morebox .mk-tags[aria-expanded="true"] { border-color: var(--pine); }
.mk-morebox .mk-tags .icon { width: 1.1rem; height: 1.1rem; color: var(--pine); }
.mk-top .mk-again { margin-left: auto; }
.mk-backrow { margin: 0; }
.mk-backrow[hidden] { display: none; }
.mk-backrow .mk-back { width: 100%; justify-content: center; margin: 0; }
.mk-top .mk-again + .mk-done { margin-left: 0; }
/* the colors step aside while writing a note or tagging (room on a phone); More's four too, and while picking words */
.mk-bar.nt-open .mk-colors, .mk-bar.tg-open .mk-colors { display: none; }
.mk-bar.nt-open .mk-morebox, .mk-bar.tg-open .mk-morebox, .mk-bar.wm-open .mk-morebox { display: none; }
@media (max-width: 640px) { .mk-bar .mk-dot, .mk-acts .mk-btn, .mk-morebox .mk-btn { flex: none; } }

/* ================= The place bar and its choices (agreed with Butcher 2026-10-21) =================
   One bar on every screen: < and > turn the page or chapter, the button between names the place. It opens three
   choices (Go to, Search, View); Go to is a grid of books, then of chapters. Replaced the Book / Chapter / Verse
   boxes, the tabs and the doubled buttons, which together were "like an overload" (Butcher, on his iPhone). */
.kjv-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .5rem; align-items: stretch; scroll-margin-top: .5rem; }
.kjv-bar-step, .kjv-ctl-btn, .kjv-view-btn { border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.kjv-bar-step { min-width: 48px; min-height: 52px; padding: 0 .6rem; display: grid; place-items: center; color: var(--pine); }
.kjv-bar-step .icon { width: 1.3rem; height: 1.3rem; }
.kjv-bar-step:disabled { opacity: .4; cursor: default; }
/* View has its own button (Go to rethought, 2026-10-25) */
.kjv-view-btn { min-width: 56px; min-height: 52px; padding: .3rem .5rem; display: grid; place-items: center; gap: .1rem; color: var(--pine); font: 700 .78rem var(--f-body); }
.kjv-view-btn .icon { width: 1.2rem; height: 1.2rem; }
.kjv-view-btn[aria-expanded="true"], .kjv-view-btn:hover { border-color: var(--pine); }
.kjv-ctl-btn { display: grid; gap: .1rem; text-align: left; padding: .45rem .9rem; min-height: 52px; }
.kjv-ctl-btn[aria-expanded="true"] { border-color: var(--pine); }
.kjv-ctl-where { font: 700 1.1rem/1.25 var(--f-body); color: var(--pine); overflow-wrap: anywhere; }
.kjv-ctl-act { font-size: .85rem; line-height: 1.3; color: var(--muted); }
.kjv-sheet { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 1rem 1.1rem 1.2rem; display: grid; }
.kjv-sheet[hidden] { display: none; }
.sh-view { display: grid; gap: .7rem; min-width: 0; }
.sh-view[hidden] { display: none; }
.sh-menu { gap: .6rem; }
.sh-choice { display: grid; gap: .2rem; text-align: left; font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: .8rem 1rem; cursor: pointer; min-height: 56px; }
.sh-choice b { font-size: 1.1rem; color: var(--pine); }
.sh-choice span { font-size: .92rem; color: var(--muted); }
.sh-choice:hover, .sh-grid button:hover, .kjv-bar-step:not(:disabled):hover, .kjv-ctl-btn:hover { border-color: var(--pine); }
/* Go to, rethought (2026-10-25): a title and Close at the top; the box; what you typed would do; Lately; the 66 books with a
   book's chapters opening right under its row */
.sh-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.sh-close { font: 700 .95rem var(--f-body); color: var(--pine); background: var(--card); border: 2px solid var(--line); border-radius: 10px; min-height: 44px; padding: 0 .9rem; cursor: pointer; }
.sh-close:hover { border-color: var(--pine); }
.sh-goto { gap: .7rem; }
/* (the title, Close and the box stay at the top of Go to while the books scroll under them) */
.sh-head { position: static; z-index: 2; display: grid; gap: .6rem; margin: -1rem -1.1rem 0; padding: 1rem 1.1rem .6rem; background: var(--card); border-bottom: 1px solid var(--line); }
.sh-goto .kjv-find { margin: 0; }
.sh-hits { display: grid; gap: .5rem; }
.sh-hit { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--card);
  border: 2px solid var(--line); border-radius: 12px; padding: .7rem .9rem; min-height: 52px; cursor: pointer; }
.sh-hit b { color: var(--pine-deep); }
.sh-hit small { color: var(--muted); font-size: .88rem; text-align: right; }
.sh-hit.sh-first { border-color: var(--pine); }
.sh-list { display: grid; gap: .4rem; }
.sh-recent { display: flex; flex-wrap: wrap; gap: .45rem; }
.sh-recent button { font: 600 .95rem var(--f-body); color: var(--pine-deep); background: var(--card); border: 2px solid var(--line); border-radius: 999px; padding: .4rem .8rem; min-height: 44px; cursor: pointer; }
.sh-grid button[aria-expanded="true"] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.sh-grid button[aria-current="true"]:not([aria-expanded="true"]) { background: var(--card); color: var(--pine-deep); border-color: var(--pine); }
.sh-chs { grid-column: 1 / -1; display: grid; gap: .45rem; padding: .6rem; border: 2px solid var(--pine); border-radius: 12px; background: var(--paper); }
.sh-chs p { margin: 0; font-size: .9rem; color: var(--muted); }
.sh-back { justify-self: start; font: 700 .95rem var(--f-body); color: var(--pine); background: none; border: 0; padding: .5rem .2rem; min-height: 44px; cursor: pointer; }
.sh-back::before { content: "\2039\00a0"; }
.sh-h { font-size: 1.35rem; margin: 0; }
.sh-sub { font: 700 .8rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: .4rem 0 0; }
.sh-switch { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--pine); border-radius: 10px; overflow: hidden; }
.sh-switch button { font: 700 .95rem var(--f-body); padding: .7rem .5rem; min-height: 48px; border: 0; background: var(--card); color: var(--pine); cursor: pointer; }
.sh-switch button + button { border-left: 2px solid var(--pine); }
.sh-switch button[aria-pressed="true"] { background: var(--pine); color: var(--on-pine); }
.sh-books { display: grid; gap: .5rem; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .45rem; }
.sh-grid button { font: 600 .92rem/1.2 var(--f-body); color: var(--ink); background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: .55rem .35rem; min-height: 46px; cursor: pointer; overflow-wrap: anywhere; }
.sh-grid button[aria-current="true"] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.sh-nums { grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); }
.sh-nums button { font-weight: 700; padding-inline: .2rem; }
.sh-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sh-modes button { min-height: 48px; padding-inline: .3rem; }
.sh-note { margin: 0; font-size: .92rem; color: var(--muted); }
.sh-note[hidden] { display: none; }
.kjv-sheet .kjv-find { border: 0; box-shadow: none; padding: 0; background: none; border-radius: 0; }
#kjv-back-read { margin-top: .4rem; }
@media (max-width: 640px) {
  .sh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sh-nums { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sh-grid button { font-size: .85rem; padding-inline: .2rem; }
  .kjv-sheet { padding: .8rem .8rem 1rem; }
}

/* ================= Search matches: bold and underlined, never a color (fresh-eyes review 2026-10-20: the old yellow
   looked like a yellow highlight). In the book's pages only underlined: bold would widen a line after the pages are counted. */
mark.find { background: transparent; color: inherit; font-weight: 700; text-decoration: underline 3px solid var(--pine); text-underline-offset: 3px; text-decoration-skip-ink: none; padding: 0; border-radius: 0; }
.bk-body mark.find { font-weight: inherit; }

/* the Install button's answer, and the steps it points to */
.install-msg { margin: .3rem 0 0; font-weight: 700; }
.install-msg:empty { display: none; }
.offline-steps .steps-here { outline: 3px solid var(--pine); outline-offset: 6px; border-radius: 8px; }


/* the note button at the end of a verse with a note: tap it to read the note (its tap area is bigger than it looks) */
.vs-nt { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.35em; height: 1.35em; margin-left: .3em;
  padding: 0; vertical-align: -.25em; border: 0; border-radius: 50%; background: var(--note-bar, var(--brass)); color: var(--card); cursor: pointer; }
.vs-nt .icon { width: .85em; height: .85em; }
.vs-nt::after { content: ""; position: absolute; inset: -.55em; }
.vs-nt:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }

/* what Save, Send and Restore just did, shown under their buttons */
.backup-said { margin: .4rem 0 0; font-weight: 700; }
.backup-said:empty { display: none; }
.mk-said { margin: 0; font-weight: 700; }
.mk-bar.nt-open .mk-said, .mk-bar.tg-open .mk-said, .mk-bar.wm-open .mk-said { display: none; }
.mk-mem[aria-pressed="true"] { border-color: var(--pine); font-weight: 700; }

/* ---- the Memorize page ---- */
.mem { padding-bottom: 2rem; }
.mem-today { margin: 1rem 0 1.5rem; }
.mem-status { font-size: 1.1rem; font-weight: 700; margin: 0 0 .6rem; }
.mem-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mem-ref { margin: .5rem 0; }
.mem-count { color: var(--muted); }
.mem-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .6rem 0; }
.mem-steps button { min-height: 44px; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  font: inherit; font-size: .9rem; cursor: pointer; }
.mem-steps button[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); font-weight: 700; }
.mem-help { color: var(--muted); margin: .4rem 0 .8rem; }
.mem-text { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; min-height: 6rem; }
.mem-words { margin: 0; font-family: var(--f-display); font-size: 1.25rem; line-height: 2.1; }
.mem-vn { font-size: .65em; color: var(--muted); }
.mem-gap { color: var(--ink); cursor: pointer; text-decoration: underline 2px; text-decoration-color: var(--ink); text-underline-offset: .25em; }
.mem-gap:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.mem-hid { color: transparent !important; text-shadow: none !important; -webkit-text-fill-color: transparent; text-decoration: underline 2px; text-decoration-color: var(--ink); text-underline-offset: .25em; }
.mem-do { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.mem-ask { font-weight: 700; margin: .5rem 0; }
.mem-said { font-weight: 700; margin: .6rem 0; }
.mem-said:empty { display: none; }
.mem-where { color: var(--muted); }
.mem-list { list-style: none; margin: 0; padding: 0; }
.mem-item { border-top: 1px solid var(--line); padding: .7rem 0; }
.mem-item p { margin: .15rem 0; }
.mem-item-ref { font-weight: 700; font-size: 1.05rem; }
.mem-item-when { color: var(--muted); }
.mem-item-btns { display: flex; gap: .5rem; margin-top: .4rem !important; }
.mem-item-btns .btn-sm { min-height: 44px; }
@media (max-width: 600px) {
  .mem-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mem-words { font-size: 1.15rem; }
}

/* ---- notes on passages (2026-10-20) ---- */
.nt-have { display: grid; gap: .3rem; margin: .1rem 0 .4rem; }
.nt-have-h { margin: 0; font-weight: 700; font-size: .9rem; }
.nt-row { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.nt-row-t { font-size: .88rem; overflow-wrap: anywhere; min-width: 0; }
.nt-row .mk-btn { flex: none; min-height: 40px; }
mark.note-on { background: none; color: inherit; text-decoration: underline 2px var(--note-bar, var(--brass)); text-underline-offset: .2em; }
.note-part { font: 700 .72rem var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem; }
.note-passage p { margin: 0 0 .3rem; }
.note-vn { font-size: .7em; color: var(--muted); }
.note-one + .note-one { border-top: 1px dashed var(--line); padding-top: .5rem; margin-top: .5rem; }
.note-on-ref { margin: .2rem 0; font-weight: 700; font-size: .9rem; }

/* the same as, or a lot like, another note: said before saving */
.nt-dupe, .note-dupe { border: 2px solid var(--note-bar, var(--brass)); border-radius: 8px; padding: .5rem .7rem; margin: .4rem 0; }
.nt-dupe p, .note-dupe p { margin: 0 0 .4rem; font-weight: 700; }

/* ---- study books (studybooks.js, 2026-10-20): Study in the verse panel, and the list on My Study ---- */
.mk-study[aria-expanded="true"] { border-color: var(--pine); box-shadow: inset 0 -4px 0 var(--pine); }
.xr-body { display: grid; gap: .5rem; min-width: 0; }
.xr-body > p { margin: 0; }
.xr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.xr-row { min-width: 0; }
.xr-head { margin: 0; font: 700 .95rem/1.3 var(--f-body); }
.xr-ref { color: var(--pine-deep); text-decoration: underline; text-underline-offset: .15em; display: inline-block; padding: .2rem 0; min-height: 28px; }
.xr-label { font-weight: 400; color: var(--muted); }
.xr-words { margin: .1rem 0 0; font-family: var(--f-display); font-size: .98rem; line-height: 1.5; overflow-wrap: anywhere; }
.xr-words sup { font: 700 .7em var(--f-body); }
.xr-word { margin: .4rem 0 0; font: 700 1rem/1.3 var(--f-display); font-style: italic; }
.xr-note { font-size: .95rem; line-height: 1.5; padding: .5rem .7rem; border-left: 3px solid var(--brass); background: var(--paper-2); border-radius: 0 6px 6px 0; overflow-wrap: anywhere; }
.xr-outline summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.xr-outline ul { margin: .2rem 0 0; padding-left: 1.2rem; }
.xr-more { font: 600 .95rem/1 var(--f-body); min-height: 44px; padding: .6rem .75rem; border: 2px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer; justify-self: start; }
.xr-credit { font-size: .85rem; color: var(--muted); }
.xr-credit a { color: inherit; }
.sb-book { margin-top: 1rem; }
.sb-on label { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; font-weight: 600; }
.sb-on input { width: 1.25rem; height: 1.25rem; }
.sb-state { font-weight: 600; }

/* Hebrew and Greek (studybooks.js, strongs.py; 2026-10-20) */
.hg-list { display: grid; gap: .8rem; }
.hg-phrase { border-top: 1px solid var(--line); padding-top: .6rem; display: grid; gap: .25rem; min-width: 0; }
.hg-phrase:first-child { border-top: 0; padding-top: 0; }
.hg-en { margin: 0; font: 700 1rem/1.35 var(--f-display); }
.hg-word, .hg-head { margin: 0; overflow-wrap: anywhere; }
.hg-head { font-size: 1.05rem; font-weight: 700; }
.hg-num { font: 700 .85rem var(--f-body); color: var(--pine-deep); }
.hg-orig { font-size: 1.2em; }
.hg-x { font-style: italic; }
.hg-usual { margin: 0; font-size: .95rem; }
.hg-part { margin: .2rem 0 0; font-weight: 700; color: var(--muted); }
.hg-def { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.hg-count { margin: 0; font-weight: 600; }
.hg-link { font: inherit; font-weight: 700; color: var(--pine-deep); background: none; border: 0; padding: .2rem .1rem; min-height: 28px; text-decoration: underline; cursor: pointer; }
.hg-way { border: 1px solid var(--line); border-radius: 8px; padding: 0 .6rem; }
.hg-way summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.hg-way[open] { padding-bottom: .6rem; }
.hg-mark { background: var(--paper-2); color: inherit; font-weight: 700; border-bottom: 2px solid var(--brass); padding: 0 .1em; }

/* ---- the study screen (studybooks.js; Butcher 2026-10-20: "That's hard to study at all", then its own address,
   one word or the whole verse). A phone: the whole screen. A wide screen: beside the text. ---- */
/* picking words: "Study the word" sits in the words box's own row of buttons (no extra row on a phone) */
.wm-acts:has(.wm-study:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-screen { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--card); color: var(--ink); }
.st-screen[hidden] { display: none; }
body.st-open:not(.st-side) { overflow: hidden; }
body.st-side { padding-right: min(560px, 46vw); }
body.st-side .st-screen { left: auto; width: min(560px, 46vw); border-left: 1px solid var(--line); box-shadow: -12px 0 30px -18px rgba(0, 0, 0, .5); }
.st-top { display: flex; align-items: center; gap: .5rem; padding: .6rem max(.8rem, env(safe-area-inset-left)) .6rem .8rem; padding-top: max(.6rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
.st-ref { flex: 1 1 auto; min-width: 0; margin: 0; font: 700 1.05rem/1.25 var(--f-body); overflow-wrap: anywhere; }
.st-steps { display: flex; gap: .4rem; }
.st-close, .st-prev, .st-next { font: 600 .95rem/1 var(--f-body); min-height: 44px; padding: .55rem .75rem; border: 2px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer; }
.st-prev:disabled, .st-next:disabled { opacity: .45; cursor: default; }
/* a plain column (not a grid: in a grid that scrolls, the scrolling tab row could shrink to nothing) */
.st-scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); min-width: 0; }
.st-scroll > * + * { margin-top: .7rem; }
.st-verse { margin: 0; font: 1.15rem/1.75 var(--f-display); overflow-wrap: anywhere; }
.st-vn { font: 700 .75em var(--f-body); color: var(--muted); vertical-align: .35em; }
.st-w { font: inherit; color: inherit; background: none; border: 0; padding: .1em .05em; margin: 0; border-radius: 4px; cursor: pointer; line-height: inherit; }
.st-w.st-i { font-style: italic; }
.st-w:hover { background: var(--paper-2); }
.st-w { text-decoration: underline dotted 1.5px var(--brass); text-underline-offset: .22em; }   /* (the words you can tap, lightly underlined: word study made plain, 2026-10-25) */
.st-w[aria-pressed="true"] { background: var(--paper-2); box-shadow: inset 0 -3px 0 var(--brass); font-weight: 700; text-decoration: none; }
/* word study made plain (2026-10-25): the word and its meaning first, a clear button for every verse, the numbers under Details */
.hg-say { font-weight: 400; color: var(--muted); font-size: .9em; }
.hg-mean { margin: 0; font-size: 1.02rem; line-height: 1.5; overflow-wrap: anywhere; }
.hg-ways { display: grid; gap: .5rem; }
.hg-every { text-align: left; line-height: 1.3; }
.hg-every.hg-main { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.hg-every[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--brass); }
.hg-uses[hidden] { display: none; }
.hg-rest > summary, .hg-details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--pine-deep); font-weight: 700; }
.hg-details { border-top: 1px solid var(--line); margin-top: .4rem; }
.hg-details[open] { display: grid; gap: .45rem; padding-bottom: .4rem; }
.hg-details .hg-count { font-weight: 400; }
.st-hint { margin: 0; font-size: .92rem; color: var(--muted); }
.st-tabs { display: flex; gap: .2rem; border-bottom: 2px solid var(--line); flex-wrap: wrap; }   /* (five study books since 2026-10-27: they wrap to a second row instead of hiding off the side) */
.st-tabs[hidden] { display: none; }
.st-tab { flex: 0 0 auto; font: 700 1rem/1.2 var(--f-body); color: var(--muted); background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px; padding: .7rem .8rem .55rem; min-height: 44px; cursor: pointer; }
.st-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--pine-deep); }
.st-body { display: grid; gap: .7rem; min-width: 0; }
.st-switch { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.st-switch .xr-mode { font: 600 .9rem/1 var(--f-body); min-height: 40px; padding: .5rem .8rem; border: 2px solid var(--line); border-radius: 999px; background: var(--field); color: var(--ink); cursor: pointer; }
.st-switch .xr-mode[aria-pressed="true"] { border-color: var(--pine-deep); background: var(--pine-deep); color: var(--on-pine); }
.st-note { margin: 0; font-weight: 600; }
.st-context { margin-top: .8rem; font-size: 1rem; }
.hg-here { outline: 2px solid var(--brass); outline-offset: 4px; border-radius: 6px; }
@media (max-width: 640px) { .st-close, .st-prev, .st-next { padding: .5rem .6rem; } .st-ref { font-size: .98rem; } }
/* three tabs on a phone (2026-10-22, Matthew Henry made three): they share the width, a long name on two lines */
@media (max-width: 640px) { .st-tab { flex: 1 1 auto; min-width: 0; padding: .55rem .3rem .45rem; text-align: center; font-size: .95rem; } }

/* Matthew Henry (2026-10-22): his words read like a book, his headings and the passage they cover above them */
.mh-about { font-weight: 400; font-size: .92rem; color: var(--muted); }
.mh-intro { border: 2px solid var(--line); border-radius: 8px; padding: 0 .8rem; }
.mh-intro summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.mh-intro[open] { padding-bottom: .4rem; }
.mh-range { margin: .4rem 0 0; font-size: 1.05rem; }
.mh-title { margin: 0; font-style: italic; color: var(--muted); }
.mh-text { line-height: 1.6; overflow-wrap: anywhere; }
.mh-text p { margin: 0 0 .8rem; }
.mh-text h4 { margin: .9rem 0 .4rem; font-size: 1rem; }
.mh-text ol { font-size: .9rem; color: var(--muted); padding-left: 1.4rem; }
.mh-sc { font-variant: small-caps; }
.mh-ref { color: var(--pine-deep); }
.mh-steps { display: flex; flex-wrap: wrap; gap: .5rem; }

/* the study screen's one-time tip, and its link to How to study */
.st-tip { border: 2px solid var(--brass); border-radius: 10px; padding: .6rem .8rem; background: var(--paper-2); display: grid; gap: .5rem; }
.st-tip p { margin: 0; }
.st-tip .xr-more { justify-self: start; }
.st-guide { margin-top: 1.4rem; font-size: .92rem; color: var(--muted); }

/* ---- How to study (guide.html) ---- */
.guide { padding-bottom: 2.5rem; max-width: 46rem; }
.guide-toc ul { margin: 1rem 0 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.guide-part { margin-top: 2rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.guide-part h2 { font-size: 1.5rem; }
.guide-part > p, .guide-part > ul, .guide-part > ol { margin-top: .7rem; }
.guide-part li { margin-top: .45rem; line-height: 1.55; }
.guide-steps { padding-left: 1.4rem; }
.guide-labels { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; margin: .7rem 0 0; }
.guide-labels dt { font-weight: 700; }
.guide-labels dd { margin: 0; }
/* Well-known sayings (2026-10-21) */
.say-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
.say { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); scroll-margin-top: 1rem; }
.say:target { border-color: var(--pine); box-shadow: 0 0 0 2px var(--pine); }
.say h3 { font-size: 1.15rem; margin: 0; }
.say-q { margin: .6rem 0 0; padding-left: .8rem; border-left: 3px solid var(--line); font-family: var(--f-display); font-style: italic; line-height: 1.5; }
.say-q cite { font-style: normal; font-family: var(--f-body); font-size: .88rem; color: var(--muted); white-space: nowrap; }
/* Salvation: Webster's 1828 entry and the Strong's lines, in the definition at the top (2026-10-25) */
.sv-dict { margin: .6rem 0 0; padding-left: .8rem; border-left: 3px solid var(--line); line-height: 1.5; }
.sv-dict p { margin: .25rem 0 0; } .sv-dict p:first-child { margin-top: 0; font-weight: 600; }
.sv-strong { margin: .3rem 0 0; line-height: 1.5; }
.say-note, .say-origin, .say-src, .say-read, .say-none { margin: .55rem 0 0; line-height: 1.5; }
.say-none { font-weight: 600; }
.say-src, .say-read, .say-also { font-size: .92rem; }
.say-part-q { margin-top: .7rem; }
.say-part-q h4 { margin: 0; font: 700 .8rem var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.say-also { margin: .3rem 0 0; }
.say-src { color: var(--muted); overflow-wrap: anywhere; }
.guide .btn { margin-top: .3rem; }

/* How to study: the tour, and its pictures (taken from the real site by shots.js) */
.guide-tour { list-style: none; padding: 0; margin: 1rem 0 0; counter-reset: step; display: grid; gap: 1.6rem; }
.guide-tour > li { counter-increment: step; }
.guide-tour h3 { font-size: 1.2rem; margin: 0; }
.guide-tour h3::before { content: counter(step) ". "; color: var(--muted); }
.guide-tour p { margin: .4rem 0 0; }
.g-shot { margin: .8rem 0 0; display: inline-block; vertical-align: top; max-width: min(300px, 100%); margin-right: .8rem; }
.g-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 20px -14px rgba(0, 0, 0, .5); background: var(--paper-2); }
.g-shot figcaption { font-size: .85rem; color: var(--muted); margin-top: .35rem; line-height: 1.4; }

/* ================= The note screen (marks.js; Butcher 2026-10-21: "Yes approved") =================
   Writing a note gets its own screen, like Study: Cancel, what it is on, Save; the words it is on; a big box. A phone:
   the whole screen, fitted above the keyboard; 1000 pixels and wider: beside the text, which stays readable. */
.nt-screen { position: fixed; inset: 0; z-index: 72; display: flex; flex-direction: column; background: var(--card); color: var(--ink); }
.nt-screen[hidden] { display: none; }
body.nt-on:not(.nt-side) { overflow: hidden; }
body.nt-side { padding-right: min(560px, 46vw); }
body.nt-side .nt-screen { left: auto; width: min(560px, 46vw); border-left: 1px solid var(--line); box-shadow: -12px 0 30px -18px rgba(0, 0, 0, .5); }
body.nt-side .mk-bar { left: calc(50% - min(280px, 23vw)); width: min(40rem, calc(100vw - min(560px, 46vw) - 24px)); }
.nt-top { flex: none; display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; padding-top: max(.6rem, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
.nt-title { flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; font: 700 1.05rem/1.25 var(--f-body); color: var(--pine-deep); overflow-wrap: anywhere; }
.nt-top .mk-btn { flex: none; padding-inline: 1rem; }
.nt-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: .6rem; padding: .7rem .8rem max(.7rem, env(safe-area-inset-bottom)); overflow-y: auto; }
.nt-verse { flex: none; margin: 0; padding: .55rem .75rem; border-radius: 10px; background: var(--paper-2); max-height: 7.5rem; overflow-y: auto; }
.nt-verse-ref { margin: 0 0 .15rem; font: 700 .75rem var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
.nt-verse-t { margin: 0; font: 400 .98rem/1.5 var(--f-display); color: var(--ink); }
.nt-screen .nt-text { flex: 1 1 auto; min-height: 8rem; max-height: none; resize: none; font-size: 1.05rem; line-height: 1.55; }
.nt-tools { flex: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }
.nt-tools .mk-btn { flex: none; }
.nt-tools .nt-del[hidden] { display: none; }
.nt-guides { flex: none; display: grid; gap: .4rem; padding: .5rem; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.nt-guides[hidden] { display: none; }
.nt-guides .mk-btn { justify-content: flex-start; text-align: left; line-height: 1.25; }
.nt-screen .nt-guide-help { display: block; }
.nt-guide-btn[aria-expanded="true"] { border-color: var(--pine); }

/* ================= My Study, your notes first (Butcher 2026-10-21: "Yes") =================
   one Sort & show button (List or Notebook until 2026-10-24), the find box, then the notes; the settings, each one tap to open, at
   the end. Saved only on this device: until a backup is saved, a line at the top and Keep a copy say so. */
.page-head:has(+ .notes) .lede { display: none; }   /* the page explains itself; the count is under the buttons */
.notes-nag { margin: 0 0 .8rem; padding: .6rem .8rem; border: 2px solid var(--note-bar, var(--brass)); border-radius: 10px; background: var(--card); font-weight: 600; }
.notes-nag[hidden] { display: none; }
.ms-bar { display: flex; gap: .5rem; align-items: stretch; margin: .2rem 0 .6rem; }   /* (Sort & show; List or Notebook went with the notebook, 2026-10-24) */
.ms-sort { min-height: 46px; white-space: nowrap; justify-content: center; }
.ms-sort[aria-expanded="true"] { border-color: var(--pine); }
.ms-sort[hidden] { display: none; }
.notes-find { margin-top: .2rem; }
.notes-tools { margin: .6rem 0 0; padding: .8rem .9rem; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.notes-tools[hidden] { display: none; }
.notes-sum { margin-top: .7rem; }
.note-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; }
.note-foot .note-date { margin: 0; }
.note-foot .btn-sm { min-height: 44px; padding-inline: 1.1rem; flex: none; }
.ms-settings { margin-top: 2.2rem; display: grid; gap: .5rem; }
.ms-set-h { font: 700 .8rem var(--f-body); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 .2rem; }
.ms-set { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 0 .9rem; margin: 0; }
.ms-set.backup-box { margin-top: 0; padding-top: 0; border-top: 1px solid var(--line); }
.ms-set > summary { cursor: pointer; list-style: none; position: relative; display: flex; flex-direction: column; justify-content: center; gap: .1rem; min-height: 52px; padding: .5rem 1.8rem .5rem 0; }
.ms-set > summary::-webkit-details-marker { display: none; }
.ms-set > summary::after { content: "\203A"; position: absolute; right: .2rem; top: calc(50% - .75rem); line-height: 1.5rem; font-size: 1.4rem; color: var(--muted); transition: transform .15s; }
.ms-set[open] > summary::after { transform: rotate(90deg); }
.ms-set-t { font-weight: 700; font-size: 1.05rem; }
.ms-set-s { grid-column: 1; font-size: .9rem; color: var(--muted); }
.ms-set-s:empty { display: none; }
.ms-set-s.ms-warn { color: var(--pine); font-weight: 700; }   /* (the theme's own strong color: readable in every theme) */
.count-help { font-size: .9rem; color: var(--muted); margin: 0; }
.ms-set-body { padding: 0 0 1rem; border-top: 1px solid var(--line); }
.ms-set-body > p:first-child, .ms-set-body > .color-help:first-child { margin-top: .8rem; }
.ms-set.color-names { margin-top: 0; }
.ms-set.color-names > summary { min-height: 52px; }
@media (prefers-reduced-motion: reduce) { .ms-set > summary::after { transition: none; } }
.ne-dupe-other { margin: 0 0 .4rem; font-style: italic; color: var(--muted); overflow-wrap: anywhere; }

/* Timeline, Adam to Jacob (2026-10-22): each row a name, its years, and a bar on one shared scale (an SVG stretched to the
   width, so it fits any screen; the numbers are in the words above it, not only in the picture) */
/* Timeline (rebuilt 2026-10-25, "serve it plainly"): parts as links (one shown at a time with timeline.js), a plain lead line,
   one line per person: name, bar, age; tap to open the sums and verses; Dig deeper folded underneath */
.tl-eras ul { list-style: none; margin: 0 0 .6rem; padding: .2rem 0 .3rem; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.tl-eras ul::-webkit-scrollbar { display: none; }
.tl-era-btn { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; font-size: .92rem; text-decoration: none; white-space: nowrap; }
.tl-era-btn[aria-current] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.tl-views { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .9rem; color: var(--muted); }
.tl-view { min-height: 36px; padding: .2rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); font-weight: 600; font-size: .88rem; cursor: pointer; }
.tl-view[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.tl-era, .tl-view-ages, .tl-view-family { margin: 0 0 2rem; }
.tl-era h2, .tl-view-ages h2, .tl-view-family h2 { margin: .4rem 0 .2rem; }
.tl-lead { font-size: 1.08rem; line-height: 1.5; max-width: 42rem; margin: .2rem 0 .8rem; }
.tl-scale-note { margin: 0; font-size: .82rem; color: var(--muted); }
.tl-scale { display: none; }
.tl-js .tl-scale { display: block; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 3; height: 1.4rem; margin-left: 6.4rem; margin-right: 2.6rem; background: var(--paper); font-variant-numeric: tabular-nums; }
.tl-js .tl-scale-note { display: none; }
.tl-scale span { position: absolute; top: .1rem; transform: translateX(-50%); font-size: .74rem; color: var(--muted); white-space: nowrap; }
.tl-rows, .tl-ages, .tl-kings { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .15rem; }
.tl-row { margin: 0; }
.tl-row.tl-dim { opacity: .3; }
.tl-row details > summary { list-style: none; }
.tl-row details > summary::-webkit-details-marker { display: none; }
.tl-line, .tl-ages li, .tl-krow { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 2.6rem; align-items: center; gap: .3rem; min-height: 2.1rem; }
.tl-line { cursor: pointer; border-radius: 4px; }
.tl-line:hover, .tl-row details[open] > .tl-line { background: var(--hl); }
.tl-line:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.tl-name { font-weight: 600; font-size: .92rem; line-height: 1.15; overflow-wrap: anywhere; }
.tl-worked { display: block; font-weight: 400; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--brass); }
.tl-age { font-size: .82rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-yrs { font-weight: 400; white-space: nowrap; font-size: .76rem; }
.tl-krow { grid-template-columns: 6.4rem minmax(0, 1fr) 4.4rem; }
.tl-svg { display: block; width: 100%; height: 14px; }
.tl-svg-strip { height: 28px; margin: .3rem 0; }
.tl-bar { fill: var(--pine); }
.tl-bar.tl-after { fill: var(--brass); }
.tl-bar.tl-open { fill: var(--pine); fill-opacity: .45; }
.tl-taken { fill: var(--brass); }
.tl-tick { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tl-flood { stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.tl-reign { stroke: var(--pine); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tl-more { padding: .5rem .7rem .7rem; margin: .2rem 0 .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.tl-who { margin: 0 0 .3rem; line-height: 1.35; }
.tl-who span { color: var(--muted); font-size: .92rem; }
.tl-sum, .tl-with { margin: .3rem 0; line-height: 1.5; max-width: 44rem; }
.tl-refs, .tl-read { margin: .4rem 0 0; font-size: .9rem; color: var(--muted); }
.tl-refs a, .tl-read a, .tl-moments a { color: var(--pine); }
.tl-legend, .tl-key { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .88rem; color: var(--muted); }
.tl-key { display: grid; gap: .3rem; color: var(--ink); font-size: .95rem; }
.tl-k { display: inline-block; width: .95rem; height: .95rem; border-radius: 3px; vertical-align: -.12rem; margin-right: .4rem; background: var(--pine); }
.tl-k-after { background: var(--brass); }
.tl-k-flood { width: 3px; background: var(--ink); }
.tl-k-taken { background: var(--brass); }
.tl-s0 { fill: var(--gold); background: var(--gold); }
.tl-s1 { fill: var(--pine); background: var(--pine); }
.tl-s2 { fill: var(--brass); background: var(--brass); }
.tl-strip { margin: .9rem 0; }
.tl-strip-label { margin: 0; font-weight: 700; }
.tl-deeper, .tl-src { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .3rem; max-width: 46rem; }
.tl-deeper > summary, .tl-src > summary { cursor: pointer; font-weight: 700; color: var(--pine); min-height: 44px; display: flex; align-items: center; }
.tl-deeper > summary:focus-visible, .tl-src > summary:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.tl-deeper p, .tl-deeper ul { line-height: 1.55; }
.tl-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; margin: .6rem 0; }
.tl-three > div { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; background: var(--card); min-width: 0; }
.tl-three h3 { margin: 0 0 .2rem; font-size: 1rem; }
.tl-three p { margin: 0; }
.tl-moments { margin: .4rem 0; padding-left: 1.2rem; display: grid; gap: .35rem; line-height: 1.45; }
.tl-coming { color: var(--muted); font-size: .92rem; }
.tl-tree { list-style: none; margin: .4rem 0; padding: 0 0 0 1rem; border-left: 2px solid var(--line); }
.tl-tree li { padding: .15rem 0 .15rem .5rem; line-height: 1.4; }
.tl-yr { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.tl-side { color: var(--muted); }
@media (max-width: 30rem) { .tl-line, .tl-ages li, .tl-krow { grid-template-columns: 5.4rem minmax(0, 1fr) 2.4rem; } .tl-krow { grid-template-columns: 5.4rem minmax(0, 1fr) 4.2rem; } .tl-js .tl-scale { margin-left: 5.7rem; margin-right: 2.7rem; } }

/* the Jesus section (2026-10-22): its lists use the same look as the other lists, with headings for its sections and small
   labels inside an entry ("He said", "He explained it"); "Where he went" has a simple drawn map */
.js-sec { margin: 2rem 0 .4rem; }
.js-label { margin: .8rem 0 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.tv-figure { margin: 0 0 1.4rem; }
.tv-map { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); }
.tv-sea, .tv-lake { fill: var(--mk-blue); fill-opacity: .45; }
.tv-land { fill: var(--card); stroke: var(--muted); stroke-opacity: .55; stroke-width: 1; }
.tv-herod { fill: var(--brass); fill-opacity: .14; stroke: var(--brass); stroke-width: 1.5; stroke-opacity: .8; }
.tv-river { fill: none; stroke: var(--mk-blue); stroke-width: 2; }
.tv-border { fill: none; stroke: var(--ink); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 5 4; }
.tv-big { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 auto 1.4rem; max-width: 30rem; }
.tv-region { fill: var(--muted); font: 600 11px var(--f-body); letter-spacing: .2em; }
.tv-dot { fill: var(--pine); }
.tv-ring { fill: var(--paper); stroke: var(--pine); stroke-width: 2; }
.tv-label { fill: var(--ink); font: 600 12px var(--f-body); }
.tv-left { text-anchor: end; }
.tv-mid { text-anchor: middle; }
.tv-box { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.tv-inset-h { margin: 1rem auto .3rem; max-width: 30rem; font-weight: 700; }
.tv-map a:hover .tv-label, .tv-map a:focus .tv-label { text-decoration: underline; }

/* the top bar slides in when scrolling up and away when scrolling down (6.36, Butcher 2026-10-22: "Maybe the nave bar pops
   out when you start scrolling up to the top but goes away if you scroll down"); theme.js decides when */
.site-header { position: sticky; top: 0; z-index: 58; transition: top .25s ease; }
.site-header.hdr-away { top: calc(-1 * var(--hdr-full, 12rem)); }
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

/* maps (6.35): the big map over the page, and the reading strip under the Bible's place bar. Colors come from the theme:
   water is the highlight blue, land the card, the old borders the highlight color, the journey the theme's main color */
.mp-sea, .mp-lake { fill: var(--mk-blue); fill-opacity: .45; }
.mp-lake { stroke: none; }
.mp-land { fill: var(--card); stroke: none; }   /* (made of today's countries: outlined, they showed today's borders with that button off, Butcher 2026-10-24) */
.mp-old { fill: var(--brass); fill-opacity: .16; stroke: var(--brass); stroke-width: 2; stroke-opacity: .85; vector-effect: non-scaling-stroke; }
.mp-river { fill: none; stroke: var(--mk-blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.mp-road { fill: none; stroke: var(--brass); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 1 3; vector-effect: non-scaling-stroke; }
.mp-border { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.mp-leg, .mp-sea-leg, .ms-route { fill: none; stroke: var(--pine); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp-sea-leg { stroke-dasharray: 8 6; stroke-linecap: butt; }
/* a likely route along the ancient roads (6.39): the theme's main color with a light edge, so it reads as a path and not a road
   the text names; a straight line where no road joins two places is thinner */
.mp-likely { fill: none; stroke: var(--pine); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 10 3 2 3; vector-effect: non-scaling-stroke; }
.mp-likely:not(.mp-done) { stroke-opacity: .55; }
.mp-straight { stroke-width: 2; }
.mp-k-likely { border-top: 3px solid var(--pine); height: 0 !important; border-image: repeating-linear-gradient(90deg, var(--pine) 0 10px, transparent 10px 13px, var(--pine) 13px 15px, transparent 15px 18px) 1; }
.mp-leg:not(.mp-done), .mp-sea-leg:not(.mp-done) { stroke-opacity: .55; }
.mp-pl circle { fill: var(--pine); stroke: var(--card); stroke-width: 2; cursor: pointer; }
.mp-pl.mp-unsure circle:not(.mp-hit) { fill: var(--card); stroke: var(--pine); stroke-width: 2.5; }
.mp-pl.mp-here circle:not(.mp-hit) { stroke: var(--card); stroke-width: 3; filter: drop-shadow(0 0 2px var(--ink)); }
.mp-pl .mp-hit { fill: transparent; stroke: none; }
.mp-name { fill: var(--ink); font: 600 13px var(--f-body); paint-order: stroke; stroke: var(--card); stroke-width: 3.5px; stroke-linejoin: round; cursor: pointer; }
.mp-name-big { font-size: 15px; font-weight: 700; }
.mp-dist { fill: var(--pine-deep); font: 700 12px var(--f-body); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.mp-landname { fill: var(--brass); font: 700 12px var(--f-body); letter-spacing: .22em; opacity: .9; paint-order: stroke; stroke: var(--card); stroke-width: 3px; }
.mp-todayname { fill: var(--muted); font: italic 12px var(--f-body); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }

body.mp-open { overflow: hidden; }
.mp-screen { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--card); color: var(--ink); }
.mp-screen[hidden] { display: none; }
.mp-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-bottom: 1px solid var(--line); }
.mp-title { flex: 1; margin: 0; font-size: 1.15rem; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.mp-close { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .4rem .8rem; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: 600 .95rem var(--f-body); cursor: pointer; }
.mp-close .icon { width: 1.1rem; height: 1.1rem; }
.mp-bar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem .6rem; border-bottom: 1px solid var(--line); }
.mp-tog { min-height: 44px; padding: .2rem .75rem; border: 2px solid var(--pine); border-radius: 999px; background: var(--card); color: var(--pine); font: 700 .85rem var(--f-body); cursor: pointer; }
.mp-tog[aria-pressed="true"] { background: var(--pine); color: var(--on-pine); }
/* miles or kilometers: two choices side by side, the one in use filled (navigation review 2026-10-23) */
.mp-units { margin-left: auto; display: inline-flex; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.mp-units button { min-height: 40px; min-width: 44px; padding: 0 .6rem; border: 0; background: var(--card); color: var(--ink); font: 700 .85rem var(--f-body); cursor: pointer; }
.mp-units button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.mp-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mp-side { flex: 0 1 auto; min-height: 0; overflow: auto; }
@media (min-width: 900px) {
  .mp-main { flex-direction: row; }
  .mp-side { flex: 0 0 24rem; border-left: 1px solid var(--line); }
  .mp-side .mp-info { max-height: none; border-top: 0; }
  .mp-side .mp-about, .mp-side .mp-list { max-height: none; }
}
.mp-stage { position: relative; flex: 1 1 auto; min-height: 220px; overflow: hidden; touch-action: none; cursor: grab; background: var(--paper-2); }
.mp-stage:active { cursor: grabbing; }
.mp-world, .mp-top { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mp-zoom { position: absolute; right: .6rem; top: .6rem; display: grid; gap: .35rem; }
.mp-zoom button { width: 44px; height: 44px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font: 700 1.2rem var(--f-body); cursor: pointer; }
.mp-zoom #mp-fit { font-size: .8rem; }
/* the key (navigation review 2026-10-23): each sample stays with its words, and it folds away to show the map under it */
.mp-keybox { position: absolute; left: .5rem; bottom: .5rem; max-width: calc(100% - 4.5rem); display: flex; align-items: flex-end; gap: .3rem; }
.mp-keybox[hidden] { display: none; }
.mp-keybtn { flex: none; min-height: 36px; padding: 0 .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: 700 .8rem var(--f-body); cursor: pointer; }
.mp-keybtn::after { content: " \25BE"; }
.mp-keybtn[aria-expanded="false"]::after { content: " \25B8"; }
.mp-key { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: .2rem .5rem; display: flex; flex-wrap: wrap; gap: 0 .9rem; pointer-events: none; }
.mp-key[hidden] { display: none; }
.mp-ki { white-space: nowrap; }
.mp-ki > span { display: inline-block; width: 1.4rem; height: .7rem; margin-right: .3rem; vertical-align: middle; }
.mp-k-road { border-top: 2px dotted var(--brass); height: 0 !important; }
.mp-k-ahead { border-top: 3px solid var(--pine); height: 0 !important; opacity: .45; }
.mp-k-old { background: var(--brass); opacity: .35; border: 2px solid var(--brass); }
.mp-k-today { border-top: 2px dashed var(--ink); height: 0 !important; opacity: .6; }
.mp-k-leg { border-top: 3px solid var(--pine); height: 0 !important; }
.mp-k-sea { border-top: 3px dashed var(--pine); height: 0 !important; }
.mp-info { position: relative; max-height: 34vh; overflow: auto; padding: .5rem .9rem .4rem; border-top: 2px solid var(--pine); }
@media (max-width: 640px) { .mp-info p { font-size: .9rem; } .mp-info h3 { font-size: 1.05rem; } }
.mp-info h3 { margin: 0 2.4rem .3rem 0; font-size: 1.15rem; }
.mp-info p { margin: .25rem 0; font-size: .95rem; line-height: 1.45; }
.mp-info .mp-note { color: var(--muted); }
.mp-info-x { position: absolute; right: .5rem; top: .4rem; width: 40px; height: 40px; border: 0; background: none; color: var(--ink); font-size: 1.6rem; cursor: pointer; }
.mp-more { border-top: 1px solid var(--line); padding: .3rem .9rem; }
.mp-more summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.mp-list { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem 0 .6rem; max-height: 22vh; overflow: auto; }
.mp-about { max-height: 30vh; overflow: auto; font-size: .9rem; line-height: 1.5; }
.mp-about p { margin: .4rem 0; }

.map-strip { position: sticky; top: var(--hdr-h, 0px); z-index: 30; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .5rem;
  align-items: center; margin: .5rem 0 0; padding: .35rem .45rem; border: 2px solid var(--line); border-radius: 12px; background: var(--card);
  transition: top .25s ease; }
.map-strip[hidden] { display: none; }
.map-strip.ms-plain { position: static; display: block; padding: 0; border: 0; background: none; }
.ms-open { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .4rem .85rem; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--pine); font: 700 .92rem var(--f-body); cursor: pointer; }
.ms-open .icon { width: 1.15rem; height: 1.15rem; }
.ms-thumb { display: block; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper-2); cursor: pointer; }
.ms-thumb svg { display: block; width: 100%; height: 100%; }
.ms-thumb .ms-route { stroke-width: 1.5; }
.ms-dot { fill: var(--pine); stroke: var(--card); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ms-track { position: relative; width: 100%; max-width: 44rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 70px; transition: transform .35s ease, opacity .35s ease; }
.ms-seg { position: absolute; top: 31px; border-top: 3px solid var(--pine); opacity: .6; pointer-events: none; }
.ms-seg.ms-sea { border-top-style: dashed; }
.ms-seg-l { left: 16.7%; right: 50%; }
.ms-seg-r { left: 50%; right: 16.7%; }
.ms-track.ms-from-right { transform: translateX(33%); opacity: .3; transition: none; }
.ms-track.ms-from-left { transform: translateX(-33%); opacity: .3; transition: none; }
@media (prefers-reduced-motion: reduce) { .ms-track { transition: none; } }
.ms-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; padding: 0 .15rem; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.ms-name { display: block; max-width: 100%; height: 22px; font: 600 .85rem/22px var(--f-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-side .ms-dot { position: relative; z-index: 1; width: 12px; height: 12px; margin-top: 3px; border: 3px solid var(--pine); border-radius: 50%; background: var(--card); }
.ms-here .ms-name { font-size: 1rem; font-weight: 700; color: var(--pine-deep); }
/* the last and next places' verse, under their dots, toward the outer edge (navigation review 2026-10-23) */
.ms-ref { display: block; max-width: 100%; margin-top: 2px; font: 600 .7rem/1.2 var(--f-body); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-prev .ms-ref { align-self: flex-start; } .ms-next .ms-ref { align-self: flex-end; }
.ms-side.ms-prev:hover .ms-name, .ms-side.ms-next:hover .ms-name { text-decoration: underline; }
.ms-here .ms-dot { width: 16px; height: 16px; margin-top: 1px; background: var(--pine); border-color: var(--card); box-shadow: 0 0 0 2px var(--pine); }
.ms-here.ms-ahead .ms-dot { background: var(--card); border-color: var(--pine); box-shadow: none; }
.ms-mi { position: absolute; top: 38px; font: 700 .75rem var(--f-body); color: var(--pine-deep); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.ms-by { display: block; font: 600 .6rem var(--f-body); color: var(--muted); text-align: center; }
.ms-mi-l { left: 33.3%; }
.ms-mi-r { left: 66.6%; }
.ms-none { cursor: default; }

/* ---- stories (6.40): its own place, scrolled or moved through; the picture stays while the words pass under it ---- */
.st-list h1 { margin: .3rem 0 .6rem; }
.st-cards { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.st-card a { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); text-decoration: none; height: 100%; box-sizing: border-box; }
.st-card a:hover { border-color: var(--pine); }
.st-card b { font-family: var(--f-head); font-size: 1.12rem; color: var(--pine-deep); }
.st-card span { color: var(--ink); }
.st-card small { color: var(--muted); }
.st-rules { margin: 2rem 0 3rem; }
.st-rules ul { padding-left: 1.2rem; }
.st-rules li { margin: .35rem 0; }
.st-headw { padding-top: 1rem; }
.st-headw h1 { margin: .2rem 0 .2rem; }
.st-sub { color: var(--muted); margin: 0 0 .8rem; }
.st-stagew { position: sticky; top: var(--hdr-h, 0px); z-index: 20; background: var(--paper); padding: .4rem 0 .3rem; border-bottom: 1px solid var(--line); }
.st-stage { width: min(100%, calc(46vh * 16 / 9), 900px); margin: 0 auto; aspect-ratio: 16 / 9; background: #0b0e16; border-radius: 8px; overflow: hidden; touch-action: pan-y; }
.st-svg { display: block; width: 100%; height: 100%; }
.st-ctl { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: .35rem; }
.st-ctl span { min-width: 5.5em; text-align: center; color: var(--muted); font-size: .92rem; }
.st-ctl button:disabled { opacity: .4; }
.st-scenes { list-style: none; padding-top: 1rem; padding-bottom: 45vh; max-width: 44rem; }
.st-scene { padding: 1rem 1rem .8rem; margin: 0 0 12vh; border-left: 3px solid var(--line); cursor: pointer; transition: border-color .3s, opacity .3s; }
.st-live .st-scene { opacity: .55; }
.st-live .st-scene.st-now { opacity: 1; border-left-color: var(--brass); }
.st-q { margin: 0 0 .5rem; font-family: var(--f-head); font-size: 1.12rem; line-height: 1.5; }
.st-k-song .st-q { font-size: 1.3rem; font-style: italic; text-align: center; }
.st-q cite { display: block; font-family: var(--f-body); font-style: normal; font-size: .85rem; margin-top: .15rem; }
.st-note { margin: .35rem 0; color: var(--muted); font-size: .95rem; }
.st-why { margin-top: .4rem; font-size: .9rem; color: var(--muted); }
.st-why summary { cursor: pointer; }
.st-why ul { padding-left: 1.1rem; margin: .3rem 0; }
.st-why cite { font-style: normal; }
.st-end { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 auto 3rem; }
.story-link { margin: .5rem 0; }
.story-link a { font-weight: 600; }
/* inside the picture */
.st-voice-t { fill: #fff3c4; stroke: #5a4410; stroke-width: 2.6px; paint-order: stroke; font-family: var(--f-head); font-style: italic; }
.st-label { fill: #fff; stroke: rgba(10, 14, 22, .7); stroke-width: 3px; paint-order: stroke; font-family: var(--f-head); }
.st-label-d { fill: #3a2c14; stroke: rgba(255, 250, 235, .75); stroke-width: 3px; paint-order: stroke; font-family: var(--f-head); }
.st-label-n { fill: #dfe6f5; font-family: var(--f-head); }
.st-dim { fill: #cfe8fa; font-family: var(--f-body); font-size: 11px; }
.st-note { }
text.st-note { fill: #cfe8fa; font-family: var(--f-body); font-style: italic; }
.st-place { fill: #3a2c14; stroke: #efe6cf; stroke-width: 3px; paint-order: stroke; font-family: var(--f-body); font-size: 12px; font-weight: 600; }
.st-letter { fill: #3a2c14; font-family: var(--f-head); font-style: italic; font-size: 14px; }
.st-big { fill: #3a2c14; font-family: var(--f-head); }
.st-lit { filter: drop-shadow(0 0 6px #fff3c4); }
.st-dim-part { opacity: .35; }
.st-thing { transform-box: view-box; }
.st-in { animation: st-in .9s ease both; }
.st-out { animation: st-out .6s ease both; pointer-events: none; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes st-out { to { opacity: 0; } }
.st-bob { animation: st-bob 3.6s ease-in-out infinite alternate; }
.st-drift { animation: st-drift 9s ease-in-out infinite alternate; }
.st-drift-fast { animation: st-drift 3s ease-in-out infinite alternate; }
.st-twinkle { animation: st-twinkle 2.4s ease-in-out infinite alternate; }
.st-glow { animation: st-glow 4s ease-in-out infinite alternate; }
.st-sway { animation: st-sway 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.st-rock { animation: st-rock 1.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 70%; }
.st-heave { animation: st-bob 1.4s ease-in-out infinite alternate; }
.st-gust { animation: st-gust 1.2s linear infinite; }
.st-drip { animation: st-drip 1.6s ease-in infinite; }
.st-flicker { animation: st-flicker .7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.st-pulse { animation: st-twinkle 1s ease-in-out infinite alternate; }
.st-fly { animation: st-fly 1.6s ease-in both; }
.st-blow { animation: st-blow 4s ease-out both; }
.st-grow { animation: st-grow 2.4s ease-out both; transform-box: fill-box; transform-origin: 50% 100%; }
.st-unroll { animation: st-in 1.2s ease both; }
@keyframes st-bob { from { transform: translateY(-1.5px); } to { transform: translateY(1.5px); } }
@keyframes st-drift { from { transform: translateX(-10px); } to { transform: translateX(10px); } }
@keyframes st-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes st-glow { from { opacity: .78; } to { opacity: 1; } }
@keyframes st-sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
@keyframes st-rock { from { transform: rotate(-5deg) translateY(-3px); } to { transform: rotate(5deg) translateY(3px); } }
@keyframes st-gust { from { transform: translateX(-40px); opacity: 0; } 30% { opacity: .6; } to { transform: translateX(90px); opacity: 0; } }
@keyframes st-drip { from { transform: translateY(0); opacity: 1; } to { transform: translateY(14px); opacity: 0; } }
@keyframes st-flicker { from { transform: scaleY(.85); opacity: .85; } to { transform: scaleY(1.1); opacity: 1; } }
@keyframes st-fly { from { transform: translate(180px, -180px); } to { transform: none; } }
@keyframes st-blow { from { transform: none; opacity: 1; } to { transform: translateX(260px) translateY(-30px); opacity: 0; } }
@keyframes st-grow { from { transform: scale(.15); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .st-in, .st-out, .st-bob, .st-drift, .st-drift-fast, .st-twinkle, .st-glow, .st-sway, .st-rock, .st-heave, .st-gust, .st-drip, .st-flicker, .st-pulse, .st-unroll, .st-grow { animation: none; }
  .st-fly { animation-duration: .01s; }
  .st-blow { animation: none; opacity: .6; }
}
.st-ptitle { margin: 0 0 .4rem; text-align: center; font-family: var(--f-head); font-style: italic; color: var(--muted); }

/* ---- verse of the day on the home page (6.42) ---- */
.votd { margin: 2rem auto 1.6rem; padding: 1.1rem 1.2rem 1rem; max-width: 34rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: center; }
.votd-h { font-family: var(--f-body); font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0 0 .5rem; }
.votd blockquote { margin: 0; }
.votd cite { display: block; margin-top: .35rem; font-style: normal; font-size: .95rem; }
.votd-how { margin: .7rem 0 0; font-size: .85rem; line-height: 1.45; color: var(--muted); }
/* ---- reading plans (6.42) ---- */
.plans { padding-block: 1.4rem 3rem; }
.pl-card { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 1rem 1.1rem; margin: 0 0 1rem; }
.pl-h { font-size: 1.35rem; margin: 0 0 .2rem; }
.pl-sub { color: var(--muted); margin: 0 0 .7rem; font-size: .95rem; }
.pl-state { margin: .2rem 0 .4rem; }
.pl-bar { height: 8px; border-radius: 4px; background: var(--paper-2, var(--line)); overflow: hidden; margin: 0 0 .8rem; }
.pl-fill { display: block; height: 100%; background: var(--pine); }
.pl-next-h { font-weight: 600; margin: .3rem 0 .4rem; }
.pl-next .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .6rem; }
.pl-all { margin: .4rem 0; }
.pl-all summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--pine); font-weight: 600; }
.pl-all summary::before { content: "+"; display: inline-block; width: 1.1em; }
.pl-all[open] summary::before { content: "\2212"; }
.pl-days { list-style: none; padding: 0; margin: .3rem 0; max-height: 22rem; overflow-y: auto; border-top: 1px solid var(--line); }
.pl-days li { border-bottom: 1px solid var(--line); }
.pl-days label { display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.pl-days input { width: 1.2rem; height: 1.2rem; }
.pl-stop { margin: .4rem 0 0; }
.pl-stopb { min-height: 44px; }
.pl-ask { margin: .4rem 0 0; }
.pl-note { color: var(--muted); font-size: .95rem; margin-top: 1.2rem; }
/* ---- the prayer journal in My Study (6.43) ---- */
.pj { margin: 2rem 0 1.5rem; }
.pj-h { font-size: 1.4rem; margin: 0 0 .3rem; }
.pj-help { color: var(--muted); margin: 0 0 .6rem; }
.pj-form textarea, .pj-edit-box textarea { width: 100%; box-sizing: border-box; font: inherit; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--field, var(--card)); color: var(--ink); }
.pj-form .actions { margin: .5rem 0 1rem; }
.pj-show { margin: 0 0 .6rem; }
.pj-list { list-style: none; padding: 0; margin: 0; }
.pj-item { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: .8rem 1rem; margin: 0 0 .7rem; }
.pj-when { margin: 0; font-size: .85rem; color: var(--muted); }
.pj-text { margin: .25rem 0 .4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-ans { margin: 0 0 .4rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.pj-answered { border-left: 4px solid var(--pine); }
.pj-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .3rem 0 0; }
.pj-acts .btn-sm, .pj-ask .btn-sm { min-height: 44px; }
.pj-edit-box { display: grid; gap: .4rem; margin-top: .3rem; }
.pj-lab { display: grid; gap: .2rem; font-size: .95rem; }
.pj-lab input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--field, var(--card)); color: var(--ink); max-width: 14rem; }
.pj-empty { color: var(--muted); }
.nt-also-h { margin-top: .5rem; }

/* back to the top (theme.js, navigation review 2026-10-23) */
.to-top { position: fixed; z-index: 69; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  min-width: 48px; min-height: 48px; padding: 0 .7rem; display: inline-flex; align-items: center; justify-content: center; gap: .15rem;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--pine-deep); background: var(--card); border: 2px solid var(--pine-deep);
  border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); cursor: pointer; }
.to-top[hidden] { display: none; }
.to-top .icon { width: 1.1rem; height: 1.1rem; }
.to-top:hover { background: var(--paper-2); }
@media print { .to-top, .back-float, .path-list { display: none !important; } }
/* out of the way while the verse panel, a study screen, a note or the big map is open */
body:has(.mk-bar:not([hidden])) .to-top, body:has(.mk-bar:not([hidden])) .back-float,
body:has(.st-screen:not([hidden])) .to-top, body:has(.st-screen:not([hidden])) .back-float,
body:has(.nt-screen:not([hidden])) .to-top, body:has(.nt-screen:not([hidden])) .back-float,
body.mp-open .to-top, body.mp-open .back-float { display: none; }
body:has(#kjv-sheet:not([hidden])) .back-float, body:has(#kjv-sheet:not([hidden])) .path-list, body:has(.mk-bar:not([hidden])) .path-list, body:has(.st-screen:not([hidden])) .path-list, body:has(.nt-screen:not([hidden])) .path-list, body.mp-open .path-list { display: none; }
/* the Bible's place bar, back at the top of the screen when scrolling up mid-chapter (theme.js, navigation review 2026-10-23) */
.kjv-bar.kjv-bar-float { position: fixed; z-index: 57; top: 0; left: 0; right: 0; margin: 0; padding: .4rem max(16px, calc((100vw - 72rem) / 2 + 16px));
  background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .5); }

/* with Resources open at the side (a wide screen), the verse panel sits in the reading side, not under the study screen
   (Butcher 2026-10-23: "the selection menu is cut off half way") */
body.st-side .mk-bar { left: calc((100vw - min(560px, 46vw)) / 2); width: min(40rem, calc(100vw - min(560px, 46vw) - 24px)); }

/* search this page (listfind.js, 2026-10-23) */
.lf { margin: 1rem 0 .4rem; max-width: 34rem; }
.lf-l { display: block; font-weight: 700; margin-bottom: .3rem; }
.lf-row { display: flex; gap: .4rem; }
.lf-row input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: .4rem .7rem; font: inherit; border: 2px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); }
.lf-row input:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--pine); }
.lf-x { min-height: 44px; }
.lf-x[hidden] { display: none; }
.lf-n { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; min-height: 1.2em; }
.tl-era[hidden], .tl-lines[hidden], .tl-views[hidden], .tl-view-ages[hidden], .tl-view-family[hidden], .guide li.say[hidden], .guide li.tl-row[hidden], .guide .say-list[hidden], .guide .tl-rows[hidden], .guide h2[hidden], .guide .guide-part[hidden], .guide .guide-toc[hidden] { display: none; }
.lf-row input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* a plan day marked read in the Bible (plans.js, 2026-10-23) */
.pl-inbible { margin: 1.2rem 0 .4rem; padding: .8rem 1rem; border: 2px solid var(--line); border-radius: 12px; background: var(--card); }
.pl-ib-row { margin: .2rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pl-ib-row:focus { outline: 3px solid var(--brass); outline-offset: 2px; }
.pl-ib-mark { min-height: 44px; }

/* Study topics on the home page (2026-10-23) */
.top-list { margin: .7rem 0 0; padding-left: 1.2rem; display: grid; gap: .55rem; }
.top-list a, .top-jesus a { font-weight: 700; }
.top-jesus { margin-top: 1rem; line-height: 1.9; }

/* the Maps page (2026-10-24) */
.maps-list { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .7rem; }
.maps-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
.maps-j { min-height: 44px; }
.maps-jsay { color: var(--muted); font-size: .95rem; }
.maps-pick { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-top: .8rem; }
.maps-pick label { display: grid; gap: .25rem; font-weight: 700; }
.maps-pick select { min-height: 44px; font: inherit; padding: .3rem .5rem; border: 2px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); max-width: 100%; }

/* the words of Jesus (red letter, Butcher 2026-10-24): each theme's --red and --red-glow are worked out by build.py from its own
   backgrounds. In red by default; "In red, lifted" (html[data-red="extra"], the Strong lift Butcher picked in the preview) adds a
   little weight and a soft shadow, a glow on dark themes; nothing moves. "Same as the rest" (data-red="off") is plain. */
.wj { color: var(--red); font-weight: inherit; }
:root[data-red="extra"] .wj { font-weight: 600; text-shadow: 0 .135em .27em var(--red-glow); }
:root[data-red="off"] .wj { color: inherit; font-weight: inherit; text-shadow: none; }
/* on a highlighted verse or words: each theme's --red-mark, worked out to read on its highlight colors */
#kjv-reader .vs[class*="mk-"] .wj, mark[class*="wm-"] .wj, .wj mark[class*="wm-"], .note-verse[class*="mk-"] .wj, .say-q [class*="lm-"] .wj { color: var(--red-mark); }
/* the list pages (listmarks.js, 2026-10-24): a quote shows the reader's highlight, and a tap opens it in the Bible ready to highlight */
.say-q .lm-tap, .say-q.lm-box { cursor: pointer; border-radius: 3px; }
.lm-help { margin: .2rem 0 1rem; font-size: .92rem; color: var(--muted); }
.say-q .lm-tap:hover { text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.say-q .lm-tap:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.say-q .lm-yellow { background: var(--mk-yellow); } .say-q .lm-green { background: var(--mk-green); }
.say-q .lm-blue { background: var(--mk-blue); } .say-q .lm-pink { background: var(--mk-pink); }
.say-q [class*="lm-"] { box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .1em; }
:root[data-red="off"] #kjv-reader .vs[class*="mk-"] .wj, :root[data-red="off"] mark[class*="wm-"] .wj, :root[data-red="off"] .wj mark[class*="wm-"] { color: inherit; }
/* a pressed word in Resources stays bold whatever the setting */
:root[data-red] .st-w.wj[aria-pressed="true"] { font-weight: 700; }
@media (forced-colors: active) { .wj { color: CanvasText; text-shadow: none; } }

/* ================= the four doors (the restructure, Butcher 2026-10-24) ================= */
/* Today: today's verse, then today's reading with Mark read right after it */
.today-wrap { max-width: 40rem; display: grid; gap: 1rem; padding-block: 1.2rem 1.6rem; }
.today-head .wrap { max-width: 40rem; }
.t-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.05rem 1.15rem 1.15rem; display: grid; gap: .55rem; margin: 0; max-width: none; text-align: left; }
.t-card[hidden] { display: none; }
.t-eyebrow { font: 700 .8rem/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 0; }
.t-verse { margin: 0; font: 400 1.25rem/1.55 var(--f-display); }
.t-cite { margin: 0; font-weight: 700; }
.t-cite a { color: var(--muted); }
.t-card .actions { margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.t-card .actions .btn[hidden] { display: none; }
.t-what { margin: 0; font: 600 1.45rem/1.25 var(--f-display); color: var(--pine-deep); }
.t-sub { margin: 0; color: var(--muted); }
.t-said { margin: 0; font-weight: 600; color: var(--pine-deep); }
.t-start { margin: .2rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--muted); }
.t-start .linkish { display: inline-block; margin-top: .35rem; min-height: 44px; }
.t-why summary { cursor: pointer; color: var(--muted); font-weight: 600; padding-block: .6rem; }
.t-why p { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.t-more p { margin: 0; }
.word-quote { text-align: center; }
.word-quote blockquote { margin: 0 auto; max-width: 38rem; font-family: var(--f-display); font-style: italic; font-size: clamp(1.1rem, 3.4vw, 1.3rem); }
.word-quote cite { display: block; margin-top: .6rem; font-style: normal; font-size: .95rem; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 640px) { .t-card .actions .btn { flex: 1 1 10rem; justify-content: center; } }

/* Explore: big tiles, the Jesus pages first */
.explore { display: grid; gap: .9rem; padding-block: 1.2rem 2rem; }
.ex-find { display: grid; gap: .35rem; max-width: 30rem; }   /* (the box as wide as the column: on a phone in the Terminal look the hint ran past a narrow box, 2026-10-31) */
.ex-find label { font-weight: 700; }
.ex-find input { font: inherit; width: 100%; min-width: 0; box-sizing: border-box; padding: .65rem .75rem; min-height: 44px; border: 2px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); }
.ex-none { margin: 0; color: var(--muted); }
.ex-h { font-family: var(--f-display); font-size: 1.5rem; margin: .6rem 0 0; }
.ex-h[hidden], .ex-grid[hidden], .ex-grid li[hidden], .ex-none[hidden] { display: none; }
.ex-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .6rem; }
.ex-grid.ex-small { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.ex-tile { height: 100%; box-sizing: border-box; display: grid; align-content: start; gap: .25rem; padding: .85rem .95rem; min-height: 4.8rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); }
.ex-small .ex-tile { min-height: 3.4rem; align-content: center; }
.ex-tile:hover { border-color: var(--pine); background: var(--paper-2); }
.ex-name { font: 600 1.08rem/1.2 var(--f-display); color: var(--pine-deep); }
.ex-what { font-size: .9rem; line-height: 1.35; color: var(--muted); }
.ex-old { font-size: .8rem; color: var(--muted); font-style: italic; }
@media (max-width: 640px) {
  .ex-grid { grid-template-columns: minmax(0, 1fr); }
  .ex-grid.ex-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* My Study: one row of plain buttons to each part of it */
.ms-row { padding-block: 1rem 0; }
.ms-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.ms-row a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; border: 2px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--pine-deep); font-weight: 600; text-decoration: none; }
.ms-row a:hover { border-color: var(--pine); }
@media (max-width: 640px) {
  /* (one line that scrolls sideways, so your notes still start on the first screen of a phone) */
  .ms-row { padding-block: .7rem 0; }
  .ms-row ul { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: .1rem; }
  .ms-row ul::-webkit-scrollbar { display: none; }
  .ms-row li { flex: none; }
}

/* Reading on (Butcher 2026-10-25, "Endless chapter scroll"): a quiet line where each new chapter starts, and the one small
   button that names the chapter and brings the menus back while they are out of the way */
.kjv-turn { display: flex; align-items: center; gap: .8rem; margin: 2rem 0 1.1rem; color: var(--muted); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.kjv-turn::before, .kjv-turn::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.kjv-tail { height: 1px; }
/* the one button and Back to where you started sit together, centered at the foot of the screen (2026-10-25) */
/* (2026-10-25, Butcher: "the go back to buttons and the others mess around and change"): steady places, the chapter button at the
   left and Back to at the right, so neither moves sideways when the other comes or goes or a name is longer; they ride up and down
   with the bottom bar */
.kjv-dock { position: fixed; z-index: 58; left: max(1rem, env(safe-area-inset-left, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: end; gap: .5rem;
  pointer-events: none; transition: bottom .25s ease; }
.kjv-dock .kjv-pill { flex: 0 1 auto; min-width: 0; }
.kjv-dock .kjv-start { margin-left: auto; }
.kjv-dock > * { pointer-events: auto; }
body:has(#back-wrap) .kjv-dock { bottom: calc(1rem + 56px + env(safe-area-inset-bottom, 0px)); }
.kjv-pill { display: none;
  align-items: center; gap: .45rem; min-height: 48px; padding: .3rem 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--pine-deep);
  font: 700 .95rem var(--f-body); box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); cursor: pointer; }
.kjv-pill .icon { width: 18px; height: 18px; }
.kjv-pill:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
body.kjv-endless .kjv-start:not([hidden]) { display: inline-flex; }
/* "Back to where you started" is the path's Back while the path shows (path.js, 2026-10-25: the two said the same thing) */
body.has-back.kjv-endless .kjv-dock .kjv-start:not([hidden]) { display: none; }
@media (prefers-reduced-motion: reduce) { .kjv-dock { transition: none; } }
/* Scroll view (Butcher 2026-10-25, "Chapter before is already there"): the place bar is pinned under the menus while you read, slides
   away with them when you read down and comes back when you scroll up; the chapters before sit above the one you opened */
body.kjv-endless .kjv-bar, body.kjv-endless .kjv-bar.kjv-bar-float { position: sticky; top: var(--menu-h, 0px); left: auto; right: auto; z-index: 31;
  margin: 0; padding: .4rem 0; background: var(--paper); border-bottom: 0; box-shadow: none; transition: transform .25s ease, top .25s ease; }
[data-menus="away"] body.kjv-endless .kjv-bar:not(.kjv-bar-float):not(:focus-within) { transform: translateY(calc(-100% - 1.5rem)); pointer-events: none; }
body.kjv-endless .map-strip { top: calc(var(--menu-h, 0px) + var(--bar-h, 0px)); }
/* the room kept above in Scroll view (bible.js): soft lines and the next chapter's name, in case a hard flick ever outruns the
   filling (2026-10-26) */
.kjv-room { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: visible; }
.kjv-room::before { content: ""; position: absolute; inset: 0 6% 0 3%; opacity: .55;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 1.25rem, var(--line) 1.25rem, var(--line) 1.7rem); }
.kjv-room-name { position: sticky; bottom: 45vh; z-index: 1; margin: 0 auto 2rem; padding: .3rem .9rem; border-radius: 999px;
  background: var(--card); color: var(--muted); font: 600 1.05rem/1.3 var(--f-display); }
.kjv-room-name:empty { display: none; }
/* a search's results bar (Back to results, Result 8 of 35, Previous and Next result) stays in sight under the place bar while
   you read the result: it sat far above where the page lands (a fresh-eyes reader, 2026-10-25: "I only found it by accident") */
body.kjv-endless .kjv-hitbar:not([hidden]) { position: sticky; top: calc(var(--menu-h, 0px) + var(--bar-h, 0px) + .3rem); z-index: 30; padding: .45rem .8rem; }
/* (the place bar's choices open just under it, wherever you are reading: in the page they were far up, above the chapters before.
   Not with search results showing: there the search box stays in the page, above its results) */
body.kjv-endless:has(#kjv-panel-read:not([hidden])) .sh-head { position: sticky; top: -1rem; }   /* (only here, where Go to lies over the page and scrolls by itself: elsewhere it pushed Search off the top, fresh-eyes check 2026-10-25) */
body.kjv-endless:has(#kjv-panel-read:not([hidden])) .kjv-sheet { position: fixed; z-index: 56; top: calc(var(--menu-h, 0px) + var(--bar-h, 0px) + .3rem); left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px)); max-width: 46rem; margin: 0 auto; max-height: calc(100dvh - var(--menu-h, 0px) - var(--bar-h, 0px) - var(--doors-h, 0px) - 1.2rem);
  overflow: auto; overscroll-behavior: contain; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: reduce) { body.kjv-endless .kjv-bar { transition: none; } }
.kjv-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* reading on, Top would go back to the chapter you started from, maybe many chapters up (Butcher 2026-10-25: "the back to the top
   button. It's going to be a problem with infinite scroll"): in the Bible it gives way to the one button */
body.kjv-endless .to-top { display: none; }
body:has(.mk-bar:not([hidden])) .kjv-dock, body.mp-open .kjv-dock, body:has(#kjv-sheet:not([hidden])) .kjv-dock { display: none; }
@media (prefers-reduced-motion: reduce) { .doors { transition: none; } }
/* ---- the pixel themes (Butcher 2026-10-25: "Pixels everywhere and blocky like the old games please"; their colors and own
   rules are in themes.py): the pixel icons on the bottom bar, the Scripture letters choice, and a sparkle on a new highlight ---- */
.px-icon { display: none; fill: currentColor; stroke: none; }
.look-panel .px-only { display: none; }
[data-theme^="pixel-"] .look-panel .px-only { display: flex; }
.look-close { order: 99; flex-basis: 100%; min-height: 44px; font: inherit; font-weight: 700; color: var(--pine-deep); background: var(--field); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.rb-what { margin: 0 0 .4rem; font-size: .9rem; color: var(--muted); }
.look-note { margin: 0; flex-basis: 100%; font-size: .85rem; color: var(--muted); }
/* the color dots (theme.js, 2026-10-25): the everyday looks, then More looks with every other one, in its group */
.look-panel label[hidden] { display: none; }
.look-colors { flex-basis: 100%; display: grid; gap: .45rem; min-width: 0; }
.look-colors-h, .sw-grp { margin: 0; font-size: .95rem; font-weight: 600; }
.sw-grp { margin-top: .3rem; color: var(--muted); font-size: .88rem; }
.sw-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.sw { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .25rem .6rem .25rem .3rem; font: inherit; font-size: .9rem;
  color: var(--ink); background: var(--field); border: 2px solid var(--line); border-radius: 999px; cursor: pointer; }
.sw:hover { border-color: var(--pine-deep); }
.sw[aria-pressed="true"] { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); font-weight: 700; }
.sw-dot { width: 1.5rem; height: 1.5rem; flex: none; border-radius: 50%; border: 3px solid; box-shadow: 0 0 0 1px var(--line); }
.sw-more { justify-self: start; min-height: 44px; padding: .3rem .8rem; font: inherit; font-weight: 700; color: var(--pine-deep); background: none;
  border: 2px solid var(--line); border-radius: 10px; cursor: pointer; }
.sw-all[hidden] { display: none; }
.sw-all { display: grid; gap: .35rem; }
.look-panel.open { max-height: calc(100vh - 5rem - var(--doors-h, 0px)); max-height: calc(100dvh - 5rem - var(--doors-h, 0px)); overflow-y: auto; overscroll-behavior: contain; }
body:has(.look-panel.open) .back-float, body:has(.look-panel.open) .path-list { display: none; }
[data-theme^="pixel-"][data-pxread="plain"] { --f-display: "Source Serif 4", "Iowan Old Style", Georgia, serif; }
.px-spark { position: fixed; z-index: 90; width: 6px; height: 6px; pointer-events: none; animation: px-spark 520ms steps(4) forwards; }
@keyframes px-spark { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .px-spark { display: none; } }
/* hint text in boxes (Butcher 2026-10-25, Handheld Green: "The placeholder text is hard to read here"): the browser's own gray
   read on some colors and not on others, so every theme's own muted color, which the theme test checks for contrast */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
/* the last lines of a page clear the floating Top and Back buttons (Butcher 2026-10-25, his picture: Top covered the words at the
   foot of Explore, "you have to pull it up to read them") */
@media (max-width: 640px) { .site-footer { padding-bottom: 4.5rem; } }

/* Learn (learn.py, 2026-10-27): the verse at the top of a lesson, the questions to think about, and Before / All / Next */
.learn-lead .say-q { margin: .6rem 0 0; font-size: 1.12rem; }
.learn-think { margin-top: 2rem; }
.learn-qs { margin: .4rem 0 0; padding-left: 1.3rem; display: grid; gap: .6rem; font: 1.05rem/1.6 var(--f-display); }
.learn-small { margin-top: 1.4rem; font-size: .9rem; color: var(--muted); }
.learn-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.learn-nav .btn { min-height: 44px; }
/* ---- core doctrine lessons (doctrine.py, Butcher 2026-10-28): milk before meat; bread and meat fold until opened ---- */
.dl-plain { margin: .35rem 0 0; font: 600 1.15rem/1.35 var(--f-body); color: var(--muted); }
.dl-from { font-weight: 400; font-size: .9rem; }
.dl-one { margin: .9rem 0 0; font: 700 .78rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dl-summary { margin: .2rem 0 0; font: 600 1.3rem/1.4 var(--f-display); color: var(--ink); max-width: 36ch; }
.dl-creed { margin: .5rem 0 0; font-size: .92rem; color: var(--muted); }
.dl-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: dls; }
.dl-steps li { counter-increment: dls; }
.dl-steps a { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .3rem .9rem .3rem .4rem; border: 2px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 700; background: var(--card); }
.dl-steps a::before { content: counter(dls); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--pine); color: var(--card); font-size: .85rem; }
.dl-body { display: grid; gap: 1.2rem; padding-block: 1.2rem 2rem; }
.dl { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem clamp(1rem, 3vw, 1.6rem) 1.3rem; min-width: 0; }
.dl > h3, .dl-fold > h3 { margin: 1.4rem 0 .4rem; font-size: 1.2rem; }
.dl p { margin: .5rem 0 0; line-height: 1.65; max-width: 68ch; }
.dl-h { display: flex; align-items: center; gap: .6rem; margin: 0; font: 600 1.5rem/1.2 var(--f-display); color: var(--pine-deep); }
.dl-step { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--pine); color: var(--card); font: 700 1rem var(--f-body); }
.dl-what { display: block; margin: .3rem 0 0; color: var(--muted); font-size: .98rem; }
.dl-verse { font-size: .95rem; color: var(--muted); }
.dl-fold > summary { list-style: none; cursor: pointer; display: grid; gap: .1rem; padding-right: 2.2rem; position: relative; min-height: 44px; }
.dl-fold > summary::-webkit-details-marker { display: none; }
.dl-fold > summary::after { content: "Open"; position: absolute; right: 0; top: .35rem; font: 700 .85rem var(--f-body); color: var(--pine); }
.dl-fold[open] > summary::after { content: "Close"; }
.dl-fold > summary:focus-visible { outline: 3px solid var(--pine); outline-offset: 4px; border-radius: 8px; }
.dl-list { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; max-width: 68ch; }
.dl-ref { white-space: nowrap; font-size: .92em; }
.dl-note { background: var(--paper); border-radius: 8px; padding: .6rem .8rem; font-size: .95rem; }
.dl-tag { display: inline-block; margin-right: .3rem; font: 700 .72rem/1.4 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.dl-tag-word { color: var(--pine); }
.dl-cards { display: grid; gap: .8rem; margin-top: .6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .dl-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dl-card { border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; background: var(--paper); min-width: 0; }
.dl-denial { margin: 0; font: 600 1.08rem/1.35 var(--f-display); color: var(--pine-deep); }
.dl-who, .dl-answer { font-size: .95rem; }
.dl-memory { margin-top: .6rem; padding: .8rem 1rem; border-radius: 10px; background: var(--paper); border: 2px solid var(--brass); }
.dl-memory .say-q { border-left: 0; padding-left: 0; font-size: 1.2rem; }

/* Topics (Nave's) and Dictionary (Easton's) in Learn more (2026-10-27) */
.nv-topic { display: grid; gap: .45rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.nv-topic:first-of-type { border-top: 0; }
.nv-name { margin: 0; font-size: 1.05rem; }
.who-note { margin: 0; font-size: .9rem; background: var(--paper-2); border-radius: 10px; padding: .55rem .7rem; }
.eb-chips { flex-wrap: wrap; }
.eb-entry { display: grid; gap: .5rem; }
.eb-title { margin: .2rem 0 0; font-size: 1.1rem; }
.eb-text { display: grid; gap: .6rem; line-height: 1.6; overflow-wrap: anywhere; }
.eb-text p { margin: 0; }

/* ---- threads (thread.js, Butcher 2026-10-29: "a thread that runs down the list connecting them all ... hangs a little and reacts
   to movement"): a rope down the left, every card pinned to it. Without the script a plain line stands in the same place. ---- */
.th { position: relative; padding-left: calc(max(16px, env(safe-area-inset-left, 0px)) + 24px); }
.th::before { content: ""; position: absolute; left: calc(max(16px, env(safe-area-inset-left, 0px)) + 9px); top: 0; bottom: 0; width: 2px; background: var(--brass); opacity: .5; }
.th.th-live::before { display: none; }
.th-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.th-cord-back { fill: none; stroke: var(--ink); stroke-opacity: .28; stroke-width: 5.5; stroke-linecap: round; }
.th-cord { fill: none; stroke: var(--brass); stroke-width: 3.2; stroke-linecap: round; }
.th-cord-twist { fill: none; stroke: var(--card); stroke-opacity: .55; stroke-width: 3.2; stroke-dasharray: 1.4 4.6; }
.th li.say, .th .th-pin, .th h2.js-sec { position: relative; }
.th li.say::before, .th .th-pin::before, .th h2.js-sec::before { content: ""; position: absolute; left: -20px; top: 20px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--card), var(--pine) 55%, var(--pine-deep)); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); z-index: 1; }
.th h2.js-sec::before { top: calc(50% - 6px); }
/* a card whose verse is on another thread too: its pin is a knot, and a short string leads to the other threads */
.th li.th-tied::before { background: radial-gradient(circle at 35% 30%, var(--card), var(--brass) 50%, var(--walnut-2, var(--pine-deep))); width: 14px; height: 14px; left: -21px; top: 19px; }
.th-also { position: relative; margin: .8rem -1.1rem -1rem -1.1rem; padding: .75rem 1.1rem .8rem 1.1rem; font-size: .9rem; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .4rem; border-top: 1px dashed var(--line); background: var(--paper-2); border-radius: 0 0 8px 8px; }
/* the crossing rope: from the card's knot on the main rope, across the foot of the card, out the far side */
.th-also::before { content: ""; position: absolute; left: -1.4rem; right: -.6rem; top: -1px; height: 5px; border-radius: 3px;
  background: repeating-linear-gradient(115deg, var(--brass) 0 4px, var(--card) 4px 5.5px); box-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
.th-also a { display: inline-block; padding: .15rem .55rem; border: 1px solid var(--brass); border-radius: 6px; background: var(--card); text-decoration: none; font-weight: 600; }
.th-knot { display: none; }
/* ===== The threads as cards (Butcher 2026-10-31: "This preview please"; build.py as_cards). Each part of a thread is one card
   on the rope with its number on the knot; each entry is one line, and "Read the verse" opens it. ===== */
.th { counter-reset: ts-stage; }
.ts-stage { position: relative; display: block; margin: 1.1rem 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem .5rem; }
.ts-stage:not(.ts-plain) { counter-increment: ts-stage; }
.th .ts-stage::before { left: -28px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; content: counter(ts-stage);
  font: 700 .9rem var(--f-body); color: var(--card); background: radial-gradient(circle at 35% 30%, var(--brass), var(--pine-deep)); box-shadow: 0 0 0 3px var(--paper), 0 1px 3px rgba(0, 0, 0, .45); }
.th .ts-plain::before { content: ""; width: 16px; height: 16px; left: -22px; top: 14px; }
.ts-sh { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; min-height: 44px; }
.ts-sh::-webkit-details-marker { display: none; }
.ts-sh h2.js-sec { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.3rem; }
.th .ts-sh h2.js-sec::before { display: none; }
.ts-n { flex: none; font-size: .85rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: .05rem .55rem; font-variant-numeric: tabular-nums; }
.ts-sh::after { content: ""; flex: none; width: .55rem; height: .55rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin: 0 .2rem .25rem; }
.ts-stage[open] > .ts-sh::after { transform: rotate(-135deg); margin-bottom: -.15rem; }
.ts-stage:not([open]) > .ts-sh { margin-bottom: .3rem; }
.ts-list { margin: .3rem 0 0; gap: 0; }
.th .ts-list li.say { padding: .5rem 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.th .ts-list li.say:first-child { border-top: 0; }
.th .ts-list li.say::before { display: none; }
.th .ts-list li.say:target { box-shadow: none; }
.th .ts-list li.say:target .ts-s h3 { color: var(--pine); }
.ts-s { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .7rem; align-items: baseline; cursor: pointer; list-style: none; min-height: 44px; }
.ts-s::-webkit-details-marker { display: none; }
.ts-s h3 { font-size: 1.05rem; margin: 0; }
.ts-ref { font-size: .88rem; color: var(--muted); text-align: right; }
.ts-tap { grid-column: 1 / -1; font-size: .88rem; font-weight: 700; color: var(--pine); }
.ts-tap::after { content: ""; display: inline-block; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: 0 0 .2rem .45rem; }
.ts-d[open] .ts-tap { display: none; }
.ts-s:focus-visible, .ts-sh:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; border-radius: 4px; }
.ts-in { padding: 0 0 .3rem; }
.ts-in > :first-child { margin-top: .2rem; }
.ts-in .th-also { margin: .6rem 0 0; padding: .4rem 0 0; background: none; border-radius: 0; }
.ts-in .th-also::before, .ts-in .th-also::after { display: none; }
@media (max-width: 420px) { .ts-s { grid-template-columns: minmax(0, 1fr); } .ts-ref { text-align: left; } }

/* ---- Sharpen (sharpen.py): milk, bread, meat down one rope ---- */
.sh-iron { font: 1.15rem/1.5 var(--f-scripture, var(--f-body)); max-width: 40rem; margin: .4rem 0 .6rem; }
.shp-top { padding-block: 1.2rem .4rem; }   /* (was sh-top, the same name as the top of Go to: its flex rules squeezed the search box, 2026-10-31) */
.sh-path { display: grid; gap: 2.2rem; padding-block: 1rem 2.4rem; }
.sh-stage { display: grid; gap: 1.2rem; }
.sh-knot { padding: .2rem 0 .2rem; }
.sh-h { display: flex; align-items: center; gap: .6rem; font-family: var(--f-display); font-size: 1.9rem; margin: 0; }
.sh-what { font-size: 1.1rem; font-weight: 600; margin: .35rem 0 0; }
.sh-verse { color: var(--muted); margin: .3rem 0 0; max-width: 42rem; }
.sh-group { display: grid; gap: .55rem; }
.sh-h3 { font-size: 1.25rem; margin: 0; }
.sh-note { color: var(--muted); margin: 0; max-width: 42rem; }
.sh-n { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid var(--pine); color: var(--pine-deep); font: 700 .9rem var(--f-body); }
.sh-step { grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; }
.sh-step .sh-n { grid-row: span 2; }
.sh-soon { opacity: .62; }
span.ex-tile.sh-soon { border-style: dashed; cursor: default; }
span.ex-tile.sh-soon:hover { border-color: var(--line); background: var(--card); }
.sh-feature { grid-template-columns: minmax(0, 1fr); }
.sh-big { min-height: 6rem; border-width: 2px; border-color: var(--brass); }
.sh-big .ex-name { font-size: 1.4rem; }
.sh-shelf { padding-block: .4rem 2.4rem; display: grid; gap: .6rem; }

/* where the threads cross (sharpen.js): each knot is one verse, each rope tied into it a thread that verse is on */
.wb { display: grid; gap: 1rem; }
.wb-wait { color: var(--muted); margin: 0; }
.wb-tie-list { margin: 0; padding-left: 2.6rem; display: grid; gap: .35rem; }   /* (room for the numbers, clear of the rope: Butcher 2026-10-29, terminal look) */
@media (max-width: 600px) {
  .sh-h { font-size: 1.6rem; }
}
.sh-mini { min-height: 0; padding: .5rem .8rem; }
.sh-mini .ex-name { font-size: 1rem; }
.sh-mini .ex-what { font-size: .85rem; }
.sh-mini .sh-n { width: 1.45rem; height: 1.45rem; font-size: .8rem; }
.sh-steps { gap: .4rem; }
.ex-grid.sh-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.sh-chips li { flex: none; }
.ex-tile.sh-chip { min-height: 0; padding: .5rem .85rem; border-radius: 999px; }
.sh-chip .ex-name { font-size: 1rem; }
/* each stage is a big knot in the rope */
.th .sh-knot::before { left: -24px; top: 12px; width: 20px; height: 20px; background: radial-gradient(circle at 35% 30%, var(--card), var(--brass) 45%, var(--pine-deep)); box-shadow: 0 0 0 3px var(--paper), 0 2px 4px rgba(0, 0, 0, .45); }
.sh-stage + .sh-stage { padding-top: 1.2rem; }
.th .guide-toc ul { list-style: none; padding-left: 0; }
.th-also::after { content: ""; position: absolute; left: -21px; top: -5px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--card), var(--brass) 50%, var(--pine-deep)); box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

/* ---- one box searches everything (Butcher 2026-10-30: "Yes the preview looks right. Keep the related words") ----
   On this site: the lessons, threads and topics with the words, best first; then the other forms of the word as chips */
.kjv-site { margin: .4rem 0 1rem; }
.kjv-site-h { font-size: 1.1rem; margin: 0 0 .5rem; }
.kjv-site-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kjv-site-hit { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem 1rem; min-width: 0; }
.kjv-site-t { font-weight: 700; font-size: 1.05rem; }
.kjv-site-d { margin: .25rem 0 0; font-size: .92rem; }
.kjv-site-secs { margin: .45rem 0 0; padding-left: 1.2rem; display: grid; gap: .2rem; font-size: .95rem; }
.kjv-site p:last-child { margin: .6rem 0 0; }
.kjv-forms { margin: .2rem 0 .8rem; }
.kjv-forms-h { margin: 0 0 .4rem; font-size: .92rem; }
.kjv-forms-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ================= 5. Extra rules for single themes (written by build.py from themes.py) ================= */
/* ---- Blood of the Lamb only ---- */
[data-theme="blood"] .site-header { border-bottom: 3px solid #a3111f; }
[data-theme="blood"] .page-head { background: linear-gradient(180deg, #4a0a12, #2a070b); border-bottom-color: #a3111f; }
[data-theme="blood"] .home .rule { background: #c8102e; height: 2px; }

/* ---- Cathedral only ---- */
[data-theme="cathedral"] body { background: #07060a; }
[data-theme="cathedral"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 35%, transparent 35%, rgba(4, 3, 6, .75) 100%), url(patterns/gothic-nave.svg) center 30% / cover no-repeat, #07060a; }
[data-theme="cathedral"] .say, [data-theme="cathedral"] .ex-tile, [data-theme="cathedral"] .dl, [data-theme="cathedral"] .dl-card { background-color: rgba(26, 23, 32, .93); }
[data-theme="cathedral"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(patterns/gothic-light.svg) center 30% / cover no-repeat; animation: awtw-cath-light 17s ease-in-out infinite alternate; }
[data-theme="cathedral"]::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(patterns/gothic-dust.svg) 0 0 / 300px 300px repeat; -webkit-mask: url(patterns/gothic-light.svg) center 30% / cover no-repeat; mask: url(patterns/gothic-light.svg) center 30% / cover no-repeat; animation: awtw-cath-dust 120s linear infinite; opacity: .9; }
@keyframes awtw-cath-light { 0% { opacity: .35; } 55% { opacity: .85; } 100% { opacity: 1; } }
@keyframes awtw-cath-dust { from { background-position: 0 0; } to { background-position: -300px 600px; } }
@media (prefers-reduced-motion: reduce) { [data-theme="cathedral"] body::after, [data-theme="cathedral"]::after { animation: none; } }
[data-theme="cathedral"] h1 { background: linear-gradient(180deg, #fff3cf, #e8c470 52%, #a8782e); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(226, 184, 92, .35)); }
[data-theme="cathedral"] .site-header { background: url(patterns/gothic-arcade.svg) left bottom / 32px 20px repeat-x, linear-gradient(180deg, #1f1a27, #15121b); border-bottom: 1px solid rgba(226, 184, 92, .45); padding-bottom: 6px; }
[data-theme="cathedral"] .brand { font-family: "UnifrakturMaguntia", "Source Serif 4", Georgia, serif; color: #e2b85c; font-size: 1.6rem; letter-spacing: 0; text-shadow: 0 0 14px rgba(226, 184, 92, .25); }
[data-theme="cathedral"] .page-head { background: linear-gradient(90deg, rgba(14, 12, 18, .9) 30%, rgba(14, 12, 18, .55) 70%, rgba(14, 12, 18, .35)), url(patterns/gothic-rose.svg) right -70px center / 300px 300px no-repeat, radial-gradient(ellipse at 85% 40%, rgba(29, 79, 163, .35), transparent 60%); border-bottom: 1px solid rgba(226, 184, 92, .45); }
[data-theme="cathedral"] h1, [data-theme="cathedral"] h2, [data-theme="cathedral"] h3 { letter-spacing: .02em; }
[data-theme="cathedral"] .eyebrow { color: #d98a9b; }
[data-theme="cathedral"] .ex-tile, [data-theme="cathedral"] .dl, [data-theme="cathedral"] .dl-card { border: 1px solid rgba(226, 184, 92, .38); box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 5px rgba(226, 184, 92, .16); }
[data-theme="cathedral"] .btn-solid { background: linear-gradient(180deg, #f0cf7c, #c99a3c); border-color: #c99a3c; color: #1a130b; }
[data-theme="cathedral"] .say-q { border-left-color: rgba(226, 184, 92, .55); }
[data-theme="cathedral"] .site-header { background: url(patterns/gothic-arcade.svg) left bottom / 32px 20px repeat-x, linear-gradient(180deg, rgba(31, 26, 39, .92), rgba(21, 18, 27, .96)), url(patterns/gothic-stone.svg) 0 0 / 360px 192px; }
[data-theme="cathedral"] .page-head { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(226, 184, 92, .2); }
[data-theme="cathedral"] .site-footer { padding-top: 272px; border-top: 1px solid rgba(226, 184, 92, .45); background: url(patterns/gothic-window-cross.svg) calc(50% - 128px) 22px / 110px auto no-repeat, url(patterns/gothic-window-lamb.svg) 50% 22px / 110px auto no-repeat, url(patterns/gothic-window-jesse.svg) calc(50% + 128px) 22px / 110px auto no-repeat, linear-gradient(180deg, rgba(18, 16, 23, .55), rgba(18, 16, 23, .9)), url(patterns/gothic-stone.svg) 0 0 / 360px 192px, #121017; }
@media (min-width: 1100px) { [data-theme="cathedral"] .page-head { background: url(patterns/gothic-window-cross.svg) right 250px center / auto 82% no-repeat, linear-gradient(90deg, rgba(14, 12, 18, .9) 30%, rgba(14, 12, 18, .55) 70%, rgba(14, 12, 18, .35)), url(patterns/gothic-rose.svg) right -70px center / 300px 300px no-repeat, radial-gradient(ellipse at 85% 40%, rgba(29, 79, 163, .35), transparent 60%); } [data-theme="cathedral"] body:has(.dl-body) .page-head { background-image: url(patterns/gothic-window-lamb.svg), linear-gradient(90deg, rgba(14, 12, 18, .9) 30%, rgba(14, 12, 18, .55) 70%, rgba(14, 12, 18, .35)), url(patterns/gothic-rose.svg), radial-gradient(ellipse at 85% 40%, rgba(29, 79, 163, .35), transparent 60%); } [data-theme="cathedral"] body:has(main section.explore) .page-head { background-image: url(patterns/gothic-window-jesse.svg), linear-gradient(90deg, rgba(14, 12, 18, .9) 30%, rgba(14, 12, 18, .55) 70%, rgba(14, 12, 18, .35)), url(patterns/gothic-rose.svg), radial-gradient(ellipse at 85% 40%, rgba(29, 79, 163, .35), transparent 60%); } }
@media (max-width: 640px) { [data-theme="cathedral"] .site-footer { padding-top: 206px; background-size: 80px auto, 80px auto, 80px auto, auto, 360px 192px, auto; background-position: calc(50% - 94px) 20px, 50% 20px, calc(50% + 94px) 20px, 0 0, 0 0, 0 0; } }
@media (max-width: 640px) { [data-theme="cathedral"] .page-head { background: linear-gradient(200deg, rgba(14, 12, 18, .5), rgba(14, 12, 18, .93) 38%), url(patterns/gothic-rose.svg) right -60px top -60px / 170px 170px no-repeat, radial-gradient(ellipse at 90% 0%, rgba(29, 79, 163, .35), transparent 55%); } [data-theme="cathedral"] .brand { font-size: 1.35rem; } }

/* ---- Terminal only ---- */
[data-theme="terminal"] body { text-shadow: 0 0 3px rgba(92, 255, 92, .35); }
[data-theme="terminal"] .btn, [data-theme="terminal"] .btn-sm, [data-theme="terminal"] .kjv-find, [data-theme="terminal"] .hit, [data-theme="terminal"] .kjv-hitbar, [data-theme="terminal"] .kjv-page, [data-theme="terminal"] .kjv-ribbons, [data-theme="terminal"] .theme-pick select, [data-theme="terminal"] .kjv-findrow input, [data-theme="terminal"] .kjv-optgrid select, [data-theme="terminal"] .chip, [data-theme="terminal"] .kjv-bar-step, [data-theme="terminal"] .kjv-ctl-btn, [data-theme="terminal"] .kjv-sheet, [data-theme="terminal"] .sh-choice, [data-theme="terminal"] .sh-grid button, [data-theme="terminal"] .sh-switch { border-radius: 0; }
[data-theme="terminal"] .btn-solid { text-shadow: none; }
[data-theme="terminal"] h1::after { content: "_"; animation: awtw-blink 1.1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { [data-theme="terminal"] h1::after { animation: none; } }
@keyframes awtw-blink { 50% { opacity: 0; } }

/* ---- Classic Desktop only ---- */
[data-theme="classic"] .site-header { background: linear-gradient(90deg, #000080, #0b4f9c); border-bottom: 2px solid #000; }
[data-theme="classic"] .site-header .brand, [data-theme="classic"] .site-header .site-nav a, [data-theme="classic"] .site-header .site-nav .nav-btn, [data-theme="classic"] .site-header .theme-pick { color: #ffffff; font-weight: 700; }
[data-theme="classic"] .site-header .site-nav a[aria-current="page"], [data-theme="classic"] .site-header .site-nav .nav-btn[data-cur] { border-bottom-color: #ffffff; }
[data-theme="classic"] .site-header .study-menu { background: #c0c0c0; border-radius: 0; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; }
[data-theme="classic"] .site-header .study-menu a { color: #000000; border-radius: 0; }
[data-theme="classic"] .site-header .study-menu a:hover, [data-theme="classic"] .site-header .study-menu a[aria-current="page"] { background: #000080; color: #ffffff; box-shadow: none; }
[data-theme="classic"] .page-head, [data-theme="classic"] .kjv-find, [data-theme="classic"] .kjv-sheet, [data-theme="classic"] .hit, [data-theme="classic"] .kjv-hitbar, [data-theme="classic"] .kjv-ribbons, [data-theme="classic"] .site-footer, [data-theme="classic"] .home > div {
  background: #c0c0c0; border-radius: 0; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf; }
[data-theme="classic"] .home > div { padding: 2rem 1.5rem; }
[data-theme="classic"] .page-head .wrap { padding-block: 1.6rem; }
[data-theme="classic"] .btn, [data-theme="classic"] .btn-sm, [data-theme="classic"] .kjv-mode button, [data-theme="classic"] .chip, [data-theme="classic"] .rb-opt, [data-theme="classic"] .kjv-bar-step, [data-theme="classic"] .kjv-ctl-btn, [data-theme="classic"] .sh-choice, [data-theme="classic"] .sh-grid button, [data-theme="classic"] .sh-switch button {
  border-radius: 0; background: #c0c0c0; color: #000000; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf; }
[data-theme="classic"] .btn-solid, [data-theme="classic"] .kjv-mode button[aria-pressed="true"], [data-theme="classic"] .chip.on, [data-theme="classic"] .rb-opt[aria-pressed="true"], [data-theme="classic"] .sh-grid button[aria-current="true"], [data-theme="classic"] .sh-switch button[aria-pressed="true"], [data-theme="classic"] .kjv-ctl-btn[aria-expanded="true"] { font-weight: 700; border-color: #404040 #ffffff #ffffff #404040; box-shadow: inset 1px 1px #808080; background: #c0c0c0; color: #000000; }
[data-theme="classic"] .kjv-findrow input, [data-theme="classic"] .kjv-optgrid select, [data-theme="classic"] .theme-pick select { border-radius: 0; border: 2px solid; border-color: #808080 #ffffff #ffffff #808080; color: #000000; }
[data-theme="classic"] .kjv-page { border-radius: 0; }

/* ---- 90s Brush only ---- */
[data-theme="brush"] body { background: #ffffff url(patterns/90s-brush.svg) 0 0 / 600px 600px repeat; }
[data-theme="brush"] .page-head { background: transparent; border-bottom: 0; }
[data-theme="brush"] .page-head .wrap, [data-theme="brush"] .home > div, [data-theme="brush"] body > section, [data-theme="brush"] main > section:not(.page-head) {
  background: var(--card); width: calc(100% - 24px); margin: 1.4rem auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.8rem; border-radius: 18px; box-shadow: 0 12px 30px -14px rgba(40, 10, 70, .55); }
[data-theme="brush"] .home { padding: 1rem 0 0; }
[data-theme="brush"] .home > div { max-width: 46rem; }
[data-theme="brush"] .site-header { border-bottom: 4px solid #1fb5c9; box-shadow: 0 4px 0 #c2289b; }
@media (max-width: 640px) { [data-theme="brush"] body { background-size: 400px 400px; } }

/* ---- Retro Shapes only ---- */
[data-theme="shapes"] body { background: #ffffff url(patterns/retro-shapes.svg) 0 0 / 432px 432px repeat; }
[data-theme="shapes"] .page-head { background: transparent; border-bottom: 0; }
[data-theme="shapes"] .page-head .wrap, [data-theme="shapes"] .home > div, [data-theme="shapes"] body > section, [data-theme="shapes"] main > section:not(.page-head) {
  background: var(--card); width: calc(100% - 24px); margin: 1.4rem auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 1.8rem; border: 2px solid #1b1b1b; border-radius: 0; box-shadow: 6px 6px 0 #1b1b1b; }
[data-theme="shapes"] .home { padding: 1rem 0 0; }
[data-theme="shapes"] .home > div { max-width: 46rem; }
[data-theme="shapes"] .site-header { border-bottom: 3px solid #1b1b1b; }
[data-theme="shapes"] .btn, [data-theme="shapes"] .btn-sm, [data-theme="shapes"] .kjv-mode button, [data-theme="shapes"] .chip, [data-theme="shapes"] .mk-btn, [data-theme="shapes"] .kjv-find, [data-theme="shapes"] .hit, [data-theme="shapes"] .kjv-hitbar, [data-theme="shapes"] .kjv-ribbons, [data-theme="shapes"] .mk-bar, [data-theme="shapes"] .kjv-bar-step, [data-theme="shapes"] .kjv-ctl-btn, [data-theme="shapes"] .kjv-sheet, [data-theme="shapes"] .sh-choice, [data-theme="shapes"] .sh-grid button, [data-theme="shapes"] .sh-switch { border-radius: 0; border-color: #1b1b1b; }
[data-theme="shapes"] .btn, [data-theme="shapes"] .btn-sm { box-shadow: 3px 3px 0 #1b1b1b; }
[data-theme="shapes"] .btn:active, [data-theme="shapes"] .btn-sm:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #1b1b1b; }
[data-theme="shapes"] .kjv-page { border-radius: 0; }
[data-theme="shapes"] h1 { text-decoration: underline 6px #fcc419; text-underline-offset: 6px; text-decoration-skip-ink: none; }

/* ---- Classic 8-bit only ---- */
[data-theme="pixel-classic"] *, [data-theme="pixel-classic"] *::before, [data-theme="pixel-classic"] *::after { border-radius: 0 !important; }
[data-theme="pixel-classic"] body { font-synthesis-weight: none; -webkit-font-smoothing: none; overflow-wrap: anywhere; }
[data-theme="pixel-classic"] .btn, [data-theme="pixel-classic"] .btn-sm, [data-theme="pixel-classic"] .kjv-mode button, [data-theme="pixel-classic"] .chip, [data-theme="pixel-classic"] .look-btn, [data-theme="pixel-classic"] .help-btn, [data-theme="pixel-classic"] .kjv-ctl-btn, [data-theme="pixel-classic"] .kjv-bar-step, [data-theme="pixel-classic"] .sh-choice, [data-theme="pixel-classic"] .kjv-pill, [data-theme="pixel-classic"] .to-top, [data-theme="pixel-classic"] .mk-btn, [data-theme="pixel-classic"] .rb-opt { box-shadow: 3px 3px 0 #000000; transition: transform 60ms steps(2), box-shadow 60ms steps(2); }
[data-theme="pixel-classic"] .btn:active, [data-theme="pixel-classic"] .btn-sm:active, [data-theme="pixel-classic"] .kjv-mode button:active, [data-theme="pixel-classic"] .chip:active, [data-theme="pixel-classic"] .look-btn:active, [data-theme="pixel-classic"] .help-btn:active, [data-theme="pixel-classic"] .kjv-ctl-btn:active, [data-theme="pixel-classic"] .kjv-bar-step:active, [data-theme="pixel-classic"] .sh-choice:active, [data-theme="pixel-classic"] .kjv-pill:active, [data-theme="pixel-classic"] .to-top:active, [data-theme="pixel-classic"] .mk-btn:active, [data-theme="pixel-classic"] .rb-opt:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #000000; }
[data-theme="pixel-classic"] .door .icon:not(.px-icon) { display: none; }
[data-theme="pixel-classic"] .door .px-icon { display: block; }
[data-theme="pixel-classic"] .site-header { border-bottom: 3px solid #000000; }
[data-theme="pixel-classic"] .ms-mi { font-size: .62rem; }
[data-theme="pixel-classic"] .ms-by { font-size: .5rem; }
@media (prefers-reduced-motion: reduce) { [data-theme="pixel-classic"] .btn, [data-theme="pixel-classic"] .btn-sm, [data-theme="pixel-classic"] .kjv-mode button, [data-theme="pixel-classic"] .chip, [data-theme="pixel-classic"] .look-btn, [data-theme="pixel-classic"] .help-btn, [data-theme="pixel-classic"] .kjv-ctl-btn, [data-theme="pixel-classic"] .kjv-bar-step, [data-theme="pixel-classic"] .sh-choice, [data-theme="pixel-classic"] .kjv-pill, [data-theme="pixel-classic"] .to-top, [data-theme="pixel-classic"] .mk-btn, [data-theme="pixel-classic"] .rb-opt { transition: none; } }

/* ---- Handheld Green only ---- */
[data-theme="pixel-handheld"] *, [data-theme="pixel-handheld"] *::before, [data-theme="pixel-handheld"] *::after { border-radius: 0 !important; }
[data-theme="pixel-handheld"] body { font-synthesis-weight: none; -webkit-font-smoothing: none; overflow-wrap: anywhere; }
[data-theme="pixel-handheld"] .btn, [data-theme="pixel-handheld"] .btn-sm, [data-theme="pixel-handheld"] .kjv-mode button, [data-theme="pixel-handheld"] .chip, [data-theme="pixel-handheld"] .look-btn, [data-theme="pixel-handheld"] .help-btn, [data-theme="pixel-handheld"] .kjv-ctl-btn, [data-theme="pixel-handheld"] .kjv-bar-step, [data-theme="pixel-handheld"] .sh-choice, [data-theme="pixel-handheld"] .kjv-pill, [data-theme="pixel-handheld"] .to-top, [data-theme="pixel-handheld"] .mk-btn, [data-theme="pixel-handheld"] .rb-opt { box-shadow: 3px 3px 0 #0f380f; transition: transform 60ms steps(2), box-shadow 60ms steps(2); }
[data-theme="pixel-handheld"] .btn:active, [data-theme="pixel-handheld"] .btn-sm:active, [data-theme="pixel-handheld"] .kjv-mode button:active, [data-theme="pixel-handheld"] .chip:active, [data-theme="pixel-handheld"] .look-btn:active, [data-theme="pixel-handheld"] .help-btn:active, [data-theme="pixel-handheld"] .kjv-ctl-btn:active, [data-theme="pixel-handheld"] .kjv-bar-step:active, [data-theme="pixel-handheld"] .sh-choice:active, [data-theme="pixel-handheld"] .kjv-pill:active, [data-theme="pixel-handheld"] .to-top:active, [data-theme="pixel-handheld"] .mk-btn:active, [data-theme="pixel-handheld"] .rb-opt:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #0f380f; }
[data-theme="pixel-handheld"] .door .icon:not(.px-icon) { display: none; }
[data-theme="pixel-handheld"] .door .px-icon { display: block; }
[data-theme="pixel-handheld"] .site-header { border-bottom: 3px solid #0f380f; }
[data-theme="pixel-handheld"] .ms-mi { font-size: .62rem; }
[data-theme="pixel-handheld"] .ms-by { font-size: .5rem; }
@media (prefers-reduced-motion: reduce) { [data-theme="pixel-handheld"] .btn, [data-theme="pixel-handheld"] .btn-sm, [data-theme="pixel-handheld"] .kjv-mode button, [data-theme="pixel-handheld"] .chip, [data-theme="pixel-handheld"] .look-btn, [data-theme="pixel-handheld"] .help-btn, [data-theme="pixel-handheld"] .kjv-ctl-btn, [data-theme="pixel-handheld"] .kjv-bar-step, [data-theme="pixel-handheld"] .sh-choice, [data-theme="pixel-handheld"] .kjv-pill, [data-theme="pixel-handheld"] .to-top, [data-theme="pixel-handheld"] .mk-btn, [data-theme="pixel-handheld"] .rb-opt { transition: none; } }
[data-theme="pixel-handheld"] .wj { text-decoration: underline dotted 2px; text-underline-offset: .3em; }
[data-theme="pixel-handheld"]:root[data-red="off"] .wj { text-decoration: none; }

/* ---- Home Computer only ---- */
[data-theme="pixel-computer"] *, [data-theme="pixel-computer"] *::before, [data-theme="pixel-computer"] *::after { border-radius: 0 !important; }
[data-theme="pixel-computer"] body { font-synthesis-weight: none; -webkit-font-smoothing: none; overflow-wrap: anywhere; }
[data-theme="pixel-computer"] .btn, [data-theme="pixel-computer"] .btn-sm, [data-theme="pixel-computer"] .kjv-mode button, [data-theme="pixel-computer"] .chip, [data-theme="pixel-computer"] .look-btn, [data-theme="pixel-computer"] .help-btn, [data-theme="pixel-computer"] .kjv-ctl-btn, [data-theme="pixel-computer"] .kjv-bar-step, [data-theme="pixel-computer"] .sh-choice, [data-theme="pixel-computer"] .kjv-pill, [data-theme="pixel-computer"] .to-top, [data-theme="pixel-computer"] .mk-btn, [data-theme="pixel-computer"] .rb-opt { box-shadow: 3px 3px 0 #1a1440; transition: transform 60ms steps(2), box-shadow 60ms steps(2); }
[data-theme="pixel-computer"] .btn:active, [data-theme="pixel-computer"] .btn-sm:active, [data-theme="pixel-computer"] .kjv-mode button:active, [data-theme="pixel-computer"] .chip:active, [data-theme="pixel-computer"] .look-btn:active, [data-theme="pixel-computer"] .help-btn:active, [data-theme="pixel-computer"] .kjv-ctl-btn:active, [data-theme="pixel-computer"] .kjv-bar-step:active, [data-theme="pixel-computer"] .sh-choice:active, [data-theme="pixel-computer"] .kjv-pill:active, [data-theme="pixel-computer"] .to-top:active, [data-theme="pixel-computer"] .mk-btn:active, [data-theme="pixel-computer"] .rb-opt:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #1a1440; }
[data-theme="pixel-computer"] .door .icon:not(.px-icon) { display: none; }
[data-theme="pixel-computer"] .door .px-icon { display: block; }
[data-theme="pixel-computer"] .site-header { border-bottom: 3px solid #1a1440; }
[data-theme="pixel-computer"] .ms-mi { font-size: .62rem; }
[data-theme="pixel-computer"] .ms-by { font-size: .5rem; }
@media (prefers-reduced-motion: reduce) { [data-theme="pixel-computer"] .btn, [data-theme="pixel-computer"] .btn-sm, [data-theme="pixel-computer"] .kjv-mode button, [data-theme="pixel-computer"] .chip, [data-theme="pixel-computer"] .look-btn, [data-theme="pixel-computer"] .help-btn, [data-theme="pixel-computer"] .kjv-ctl-btn, [data-theme="pixel-computer"] .kjv-bar-step, [data-theme="pixel-computer"] .sh-choice, [data-theme="pixel-computer"] .kjv-pill, [data-theme="pixel-computer"] .to-top, [data-theme="pixel-computer"] .mk-btn, [data-theme="pixel-computer"] .rb-opt { transition: none; } }

/* ---- Arcade Dark only ---- */
[data-theme="pixel-arcade"] *, [data-theme="pixel-arcade"] *::before, [data-theme="pixel-arcade"] *::after { border-radius: 0 !important; }
[data-theme="pixel-arcade"] body { font-synthesis-weight: none; -webkit-font-smoothing: none; overflow-wrap: anywhere; }
[data-theme="pixel-arcade"] .btn, [data-theme="pixel-arcade"] .btn-sm, [data-theme="pixel-arcade"] .kjv-mode button, [data-theme="pixel-arcade"] .chip, [data-theme="pixel-arcade"] .look-btn, [data-theme="pixel-arcade"] .help-btn, [data-theme="pixel-arcade"] .kjv-ctl-btn, [data-theme="pixel-arcade"] .kjv-bar-step, [data-theme="pixel-arcade"] .sh-choice, [data-theme="pixel-arcade"] .kjv-pill, [data-theme="pixel-arcade"] .to-top, [data-theme="pixel-arcade"] .mk-btn, [data-theme="pixel-arcade"] .rb-opt { box-shadow: 3px 3px 0 #29adff; transition: transform 60ms steps(2), box-shadow 60ms steps(2); }
[data-theme="pixel-arcade"] .btn:active, [data-theme="pixel-arcade"] .btn-sm:active, [data-theme="pixel-arcade"] .kjv-mode button:active, [data-theme="pixel-arcade"] .chip:active, [data-theme="pixel-arcade"] .look-btn:active, [data-theme="pixel-arcade"] .help-btn:active, [data-theme="pixel-arcade"] .kjv-ctl-btn:active, [data-theme="pixel-arcade"] .kjv-bar-step:active, [data-theme="pixel-arcade"] .sh-choice:active, [data-theme="pixel-arcade"] .kjv-pill:active, [data-theme="pixel-arcade"] .to-top:active, [data-theme="pixel-arcade"] .mk-btn:active, [data-theme="pixel-arcade"] .rb-opt:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #29adff; }
[data-theme="pixel-arcade"] .door .icon:not(.px-icon) { display: none; }
[data-theme="pixel-arcade"] .door .px-icon { display: block; }
[data-theme="pixel-arcade"] .site-header { border-bottom: 3px solid #29adff; }
[data-theme="pixel-arcade"] .ms-mi { font-size: .62rem; }
[data-theme="pixel-arcade"] .ms-by { font-size: .5rem; }
@media (prefers-reduced-motion: reduce) { [data-theme="pixel-arcade"] .btn, [data-theme="pixel-arcade"] .btn-sm, [data-theme="pixel-arcade"] .kjv-mode button, [data-theme="pixel-arcade"] .chip, [data-theme="pixel-arcade"] .look-btn, [data-theme="pixel-arcade"] .help-btn, [data-theme="pixel-arcade"] .kjv-ctl-btn, [data-theme="pixel-arcade"] .kjv-bar-step, [data-theme="pixel-arcade"] .sh-choice, [data-theme="pixel-arcade"] .kjv-pill, [data-theme="pixel-arcade"] .to-top, [data-theme="pixel-arcade"] .mk-btn, [data-theme="pixel-arcade"] .rb-opt { transition: none; } }