/* ================================================================
   Bible Study — stylesheet.

   TOKEN LAYER (2026-09-06): adopted from `Steven OS/steven_os_v2.html`
   so this app is a sibling of the master shell rather than a cousin.
   Surfaces, lines, the three-step ink ramp, radius, the 4px spacing
   rhythm, the 11px type floor, shadows and the button system are the
   master's. No rule below may introduce a raw hex or a raw spacing
   value that isn't in the token block.

   The app keeps ONE identity accent of its own: --moss, which is
   `--i-bible` in steven_os_v2.html's intern accent table. (Note:
   Design System.html still lists --i-bible as --sand. steven_os_v2 is
   the newer file — 10 interns vs 8 — and the app already used moss.
   Surfaced, not silently resolved: Design System.html is stale.)

   Nova stays the OS "act now" accent and is used only for system
   actions (data / backup) and focus rings. A devotional reading page
   does not get an orange call-to-action glowing at it; in the reading
   surface, primary actions are moss.
   ================================================================ */

:root{
  color-scheme:dark;

  /* — void / surfaces (master) — */
  --void:#0b0c16; --panel:#141726; --panel-2:#1b1f34; --panel-deep:#10131f;
  --line:#2a2f47; --line-soft:#20243a;

  /* — starlight ink (master). --ink-4 is decoration and borders ONLY,
       never text: it measures 4.0:1 on --void, below AA. — */
  --ink:#f2eee2; --ink-2:#a7abc7; --ink-3:#8b90b4; --ink-4:#6c7092;

  /* — OS accents (master) — */
  --nova:#e8a94a; --nova-deep:#c98530; --nova-soft:rgba(232,169,74,.14);
  --nebula:#8a7fd6; --nebula-soft:rgba(138,127,214,.16);
  --ion:#4fc0c9; --ion-soft:rgba(79,192,201,.14);
  --emerald:#59ab82; --warn:#d8a85a; --rust-ink:#e0836c;

  /* — this app's identity accent: --i-bible in steven_os_v2.html — */
  --moss:#8fae6b; --moss-deep:#6f9150;
  --moss-soft:rgba(143,174,107,.14); --moss-tint:rgba(143,174,107,.34);

  /* — the reading surface. The one place with its own ground: a warm
       near-black leaf, and sand rules instead of the blue-grey --line,
       so the column reads as paper inside the shell rather than as one
       more panel. Ground left as-is by Joseph's instruction 2026-09-06;
       only the measure, rhythm and rules changed. — */
  --paper:#15151a; --paper-rule:rgba(216,198,154,.15); --paper-rule-soft:rgba(216,198,154,.09);
  --paper-mark:rgba(216,198,154,.08); --paper-mark-on:rgba(216,198,154,.14);
  --sand:#d8c69a; --verse-num:#8a8378;

  /* — spacing, 4px rhythm (master) — */
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:12px; --sp-5:16px;
  --sp-6:20px; --sp-7:28px; --sp-8:40px; --sp-9:56px;

  /* — type. 11px is the floor; the old 9-10px meta text is gone. — */
  --fs-meta:11px; --fs-sm:12.5px; --fs-body:14px; --fs-lg:16px;
  --fs-h3:18px; --fs-h2:22px; --fs-h1:30px; --fs-display:38px;

  /* — radius (master) — */
  --r-sm:10px; --r:16px; --r-lg:24px; --pill:999px;

  /* — elevation (master) — */
  --shadow:0 1px 2px rgba(0,0,0,.35),0 20px 44px -22px rgba(10,6,26,.7);
  --shadow-lg:0 3px 10px rgba(0,0,0,.4),0 30px 70px -28px rgba(10,6,26,.8);
  --glow-nova:0 0 0 1px rgba(232,169,74,.16),0 0 32px -6px rgba(232,169,74,.35);
  --glow-moss:0 0 0 1px rgba(143,174,107,.18),0 0 30px -8px rgba(143,174,107,.32);

  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,monospace;

  --top:64px;          /* --topbar-h in the master shell */
  --measure:64ch;      /* study-Bible measure: ~62-72 characters */
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--void);color:var(--ink)}
body{font:var(--fs-body)/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--nova);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.surface{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}

/* Meta labels. Floor raised from 9-10px to --fs-meta per the master's
   own note that 7-9px meta text is not shippable. */
.eyebrow,.section-label,.rail-title{
  margin:0;font:700 var(--fs-meta)/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--moss)}

/* ================================================================
   ENVIRONMENT

   The registry's protected contract for this dashboard reads
   "resurrection artwork and its protected zone remain Theme
   Atlas-only". The old `body::before` painted it behind every view,
   which both broke that contract and put unscrimmed titles and list
   copy on top of a bright nebula. The artwork is now scoped to the
   Theme Atlas, where it belongs, and the working views inherit the
   master shell's own ambient starfield instead.
   ================================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(1100px 620px at 82% -10%, rgba(138,127,214,.16), transparent 60%),
    radial-gradient(900px 500px at -6% 6%, rgba(232,169,74,.09), transparent 55%),
    radial-gradient(1400px 900px at 50% 120%, rgba(79,192,201,.07), transparent 60%)}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 27% 62%,#fff 100%,transparent 0),
    radial-gradient(1.5px 1.5px at 41% 24%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 58% 8%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 66% 71%,#fff 100%,transparent 0),
    radial-gradient(1.5px 1.5px at 73% 33%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 84% 52%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 91% 15%,#fff 100%,transparent 0),
    radial-gradient(1.5px 1.5px at 6% 82%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 35% 90%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 95% 85%,#fff 100%,transparent 0),
    radial-gradient(1px 1px at 20% 45%,#fff 100%,transparent 0)}

/* ---------- topbar ---------- */
.topbar{
  height:var(--top);position:fixed;inset:0 0 auto;z-index:60;
  display:flex;align-items:center;gap:var(--sp-5);padding:0 var(--sp-6);
  background:rgba(8,10,17,.9);border-bottom:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.brand{display:flex;align-items:center;gap:var(--sp-4);color:inherit;white-space:nowrap;flex:none}

/* The master shell's nucleus mark, so returning to Steven OS is one
   recognisable gesture rather than a different logo per app. */
.mark{position:relative;display:block;width:30px;height:30px;flex:none}
.mark i{display:block}
.mark .core{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffd9a0,var(--nova) 55%,var(--nova-deep) 100%);
  box-shadow:0 0 12px 2px rgba(232,169,74,.55)}
.mark .o{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line)}
.mark .o1{transform:rotate(20deg) scaleY(.42);animation:markspin 9s linear infinite}
.mark .o2{transform:rotate(-35deg) scaleY(.42);animation:markspin 13s linear infinite reverse;border-color:rgba(138,127,214,.38)}
.mark .o3{transform:rotate(80deg) scaleY(.42);animation:markspin 16s linear infinite;border-color:rgba(79,192,201,.32)}
@keyframes markspin{to{transform:rotate(380deg) scaleY(.42)}}

.brand-os{font:500 var(--fs-meta) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.brand-sep{width:1px;height:18px;background:var(--line)}
.brand-app{font:500 var(--fs-lg) var(--serif);letter-spacing:-.005em}

.search-wrap{position:relative;display:flex;align-items:center;gap:var(--sp-3);
  width:min(320px,25vw);padding:var(--sp-3) var(--sp-4);
  border:1px solid var(--line);border-radius:var(--pill);
  background:rgba(20,23,38,.5);color:var(--ink-3)}
.search-wrap:focus-within{border-color:var(--moss-tint)}
.search-wrap input{width:100%;border:0;background:transparent;color:var(--ink);font-size:var(--fs-sm);outline:0}
.search-results{position:absolute;top:calc(100% + 9px);left:0;width:min(440px,80vw);
  padding:var(--sp-2);max-height:65vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.search-result{width:100%;border:0;background:transparent;color:var(--ink-2);
  display:grid;grid-template-columns:78px 1fr;text-align:left;gap:var(--sp-3);
  padding:var(--sp-4);border-radius:var(--r-sm);font-size:var(--fs-sm)}
.search-result:hover{background:var(--panel-2);color:var(--ink)}
.search-result small{font:700 var(--fs-meta) var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--moss)}

.topnav{margin-left:auto;display:flex;gap:var(--sp-1);padding:var(--sp-1);
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(14,16,28,.82)}
.topnav button{border:0;background:transparent;color:var(--ink-3);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--sp-2);
  font:700 var(--fs-meta) var(--sans);letter-spacing:.1em;text-transform:uppercase}
.topnav button:hover{color:var(--ink)}
.topnav button[aria-current="page"]{color:var(--ink);background:var(--panel-2);box-shadow:inset 0 0 0 1px var(--line)}

/* The sync pill now speaks the master shell's `.state` chip vocabulary. */
.sync-state{display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:3px 10px;border-radius:var(--pill);border:1px solid currentColor;
  background:rgba(255,255,255,.03);color:var(--ink-3);
  font:600 var(--fs-meta) var(--sans);letter-spacing:.02em;white-space:nowrap;max-width:230px}
/* Status text is sometimes a sentence, not a word — it truncates rather
   than shouting an error across the header. The full text stays in the
   button's title attribute. */
#syncText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sync-state[data-state="saved"]{color:var(--emerald)}
.sync-state[data-state="saving"]{color:var(--nova)}
.sync-state[data-state="saving"] .sync-dot{animation:stpulse 1.15s ease-in-out infinite}
.sync-state[data-state="error"]{color:var(--rust-ink)}
@keyframes stpulse{50%{opacity:.28;transform:scale(.72)}}

/* ---------- views ---------- */
main{position:relative;z-index:1;padding-top:var(--top);min-height:100vh}
.view{min-height:calc(100vh - var(--top));padding:var(--sp-6)}

/* ================================================================
   READER — the reading room.

   The column is the page; the rails are the gutter. Measure narrowed
   from ~790px (75-88 characters) to --measure (~64), and leading eased
   from 1.9 to 1.72, which is the study-Bible range. The chapter rail
   moved out of its own 90px column and became a wrapping strip above
   the text, returning ~104px to the reading column.
   ================================================================ */
.reader-view{background:linear-gradient(135deg,#0d0e16,#0a0b11)}
.reader-shell{height:calc(100vh - var(--top) - 52px);
  display:grid;grid-template-columns:230px minmax(0,1fr);gap:var(--sp-5);
  max-width:1500px;margin:auto}

.book-rail{overflow:auto;padding:var(--sp-4) var(--sp-3)}
.testament-title{padding:var(--sp-4) var(--sp-3) var(--sp-2);
  font:700 var(--fs-meta) var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.book-button{width:100%;border:0;background:transparent;color:var(--ink-2);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--sp-3);text-align:left;font-size:var(--fs-sm)}
.book-button:hover{background:var(--panel-2);color:var(--ink)}
.book-button[aria-current="true"]{background:var(--moss-soft);color:var(--ink);font-weight:600;
  box-shadow:inset 2px 0 0 var(--moss)}

.reading-column{display:flex;flex-direction:column;gap:var(--sp-4);min-height:0}

/* Chapter strip. Wraps to at most three rows and scrolls, so any
   chapter of any book is a short scan away rather than a long scroll
   down a two-column dial pad. */
.chapter-rail{flex:none;display:flex;align-items:flex-start;gap:var(--sp-5);padding:var(--sp-4) var(--sp-5)}
.chapter-rail .rail-title{flex:none;padding-top:var(--sp-2);width:98px;color:var(--ink-3)}
.chapter-grid{position:relative;display:flex;flex-wrap:wrap;gap:var(--sp-1);max-height:104px;overflow-y:auto;flex:1;min-width:0}
.chapter-button{position:relative;border:1px solid transparent;background:transparent;color:var(--ink-3);
  min-width:30px;height:28px;padding:0 var(--sp-2);border-radius:var(--sp-3);
  font:400 var(--fs-meta) var(--mono);font-variant-numeric:tabular-nums}
.chapter-button:hover{background:var(--panel-2);color:var(--ink)}
.chapter-button[aria-current="true"]{background:var(--moss);color:var(--void);font-weight:700}
/* Honesty mark: a filled dot means verified Scripture is present for
   that chapter, hollow means the chapter is still a placeholder. The
   language is the master shell's .leaf-full / .leaf-empty. */
.chapter-button::after{content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0;
  width:3px;height:3px;border-radius:50%;border:1px solid var(--ink-4);background:transparent}
.chapter-button[data-available="true"]::after{background:var(--moss);border-color:var(--moss)}
.chapter-button[aria-current="true"]::after{border-color:rgba(11,12,22,.5)}
.chapter-button[aria-current="true"][data-available="true"]::after{background:var(--void);border-color:var(--void)}

.reading-card{flex:1;min-height:0;overflow:auto;
  background:var(--paper);border:1px solid var(--paper-rule-soft);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,54px) clamp(24px,6vw,84px);box-shadow:var(--shadow-lg)}
.reading-header{max-width:var(--measure);margin:0 auto var(--sp-7);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);
  padding-bottom:var(--sp-6);border-bottom:1px solid var(--paper-rule)}
.reading-header h1{font:500 clamp(30px,3.4vw,42px)/1.1 var(--serif);margin:var(--sp-2) 0 0;letter-spacing:-.01em}
.reading-actions{display:flex;align-items:center;gap:var(--sp-3)}
.source-badge{padding:4px 10px;border:1px solid var(--paper-rule);border-radius:var(--pill);
  color:var(--ink-3);font:600 var(--fs-meta) var(--sans);letter-spacing:.1em}

/* ---------- buttons — the master shell's system ---------- */
/* Class names are unchanged: app.js writes .primary-btn / .quiet-btn /
   .danger-btn / .inline-action into its templates. Only the shape
   changed — pill, --fs-sm, translateY(-1px) on hover. */
.quiet-btn,.primary-btn{font-weight:600;font-size:var(--fs-sm);border-radius:var(--pill);
  padding:9px 18px;border:1px solid transparent;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.quiet-btn:hover,.primary-btn:hover{transform:translateY(-1px)}
.quiet-btn{background:transparent;color:var(--ink-2);border-color:var(--line-soft)}
.quiet-btn:hover{color:var(--ink);border-color:var(--moss-tint)}
/* Moss, not nova: inside a devotional surface the primary action is the
   app's own accent. Nova is reserved for system actions (see the data
   dialog below) and for focus rings. */
.primary-btn{background:linear-gradient(155deg,#a5c281,var(--moss));color:#12180d;box-shadow:var(--glow-moss)}
.primary-btn:hover{background:linear-gradient(155deg,var(--moss),var(--moss-deep))}
.danger-btn{border:1px solid var(--line-soft);background:transparent;color:var(--ink-3);
  border-radius:var(--pill);padding:6px 14px;font-size:var(--fs-meta);font-weight:600;transition:.16s}
.danger-btn:hover{color:var(--rust-ink);border-color:var(--rust-ink)}
.inline-action{border:0;background:transparent;color:var(--moss);padding:var(--sp-2) 0;
  font-size:var(--fs-sm);font-weight:600}
.inline-action:hover{color:var(--ink)}

.chapter-note{max-width:var(--measure);margin:0 auto var(--sp-6);padding:var(--sp-6);
  background:rgba(216,198,154,.045);border:1px solid var(--paper-rule-soft);border-radius:var(--r);box-shadow:none}
.chapter-note .note-tag,.note-tag{display:inline-block;color:var(--moss);
  font:700 var(--fs-meta) var(--sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--sp-2)}
.chapter-note textarea{min-height:130px}

/* The verse column. Hanging numbers in the margin, wrapped lines
   aligned to the text edge — the study-Bible arrangement. */
.verses{max-width:var(--measure);margin:auto;
  font:400 clamp(18px,1.4vw,20px)/1.72 var(--serif)}
.verse{display:grid;grid-template-columns:30px 1fr;gap:var(--sp-4);
  margin:0 calc(var(--sp-4) * -1);padding:var(--sp-2) var(--sp-4);
  border:0;border-radius:var(--r-sm);color:var(--ink);cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease}
.verse:hover,.verse:focus-visible{background:var(--paper-mark)}
.verse[data-selected="true"]{background:var(--paper-mark-on);box-shadow:inset 2px 0 0 var(--sand)}
.verse-num{padding-top:.5em;text-align:right;color:var(--verse-num);
  font:400 var(--fs-meta) var(--mono);font-variant-numeric:tabular-nums;user-select:none}
/* The divine name. The characters are untouched — this only typesets
   the existing "LORD" so it reads as small caps instead of shouting. */
.divine-name{font-size:.86em;letter-spacing:.06em}

.empty-scripture{padding:var(--sp-9) var(--sp-4);text-align:center;
  color:var(--ink-3);font:var(--fs-body) var(--sans);line-height:1.7}
.empty-scripture strong{display:block;color:var(--ink-2);font:500 var(--fs-h2) var(--serif);margin-bottom:var(--sp-3)}

.chapter-turn{max-width:var(--measure);margin:var(--sp-8) auto 0;padding-top:var(--sp-6);
  border-top:1px solid var(--paper-rule-soft);display:flex;justify-content:space-between;gap:var(--sp-4)}
.chapter-turn button{border:0;background:transparent;color:var(--ink-3);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--sp-3);font-size:var(--fs-sm)}
.chapter-turn button:hover:not(:disabled){color:var(--ink);background:var(--paper-mark)}
.chapter-turn button:disabled{opacity:.35;cursor:default}

.mobile-pickers{display:none}

/* ================================================================
   THEME ATLAS — the one view that carries the resurrection artwork.

   The scrim is as light as the contrast budget allows and stops well
   short of the lower-right protected zone, which stays unobstructed.
   ================================================================ */
.themes-view{position:relative;padding:var(--sp-9) 32vw var(--sp-9) var(--sp-8);isolation:isolate}
.themes-view::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url("Bible Study.png") center/cover no-repeat}
.themes-view::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(8,9,17,.82) 0%,rgba(8,9,17,.62) 34%,rgba(8,9,17,.12) 62%,transparent 78%),
    linear-gradient(180deg,rgba(8,9,17,.55) 0%,transparent 22%)}
.hero{max-width:680px}
.hero h1,.collection-head h1{font:500 clamp(34px,3.6vw,var(--fs-display))/1.1 var(--serif);
  margin:var(--sp-3) 0;letter-spacing:-.01em}
.hero>p:last-child,.collection-head>div>p:last-child{color:var(--ink-2);font-size:var(--fs-sm);margin:0}

.theme-grid{max-width:760px;margin-top:var(--sp-8);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.theme-card{min-height:170px;border:1px solid var(--line);border-radius:var(--r);
  background:color-mix(in srgb,var(--panel-deep),transparent 22%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--ink);padding:var(--sp-6);text-align:left;box-shadow:var(--shadow);
  transition:transform .16s ease,border-color .16s ease}
.theme-card:hover{transform:translateY(-2px);border-color:var(--moss-tint)}
.theme-card[aria-pressed="true"]{border-color:var(--moss);box-shadow:var(--glow-moss)}
.theme-card h2{font:500 var(--fs-h2) var(--serif);margin:var(--sp-3) 0 var(--sp-2)}
.theme-card p{color:var(--ink-2);font-size:var(--fs-sm);margin:0}
.theme-refs{margin-top:var(--sp-5);color:var(--ink-3);font:var(--fs-meta) var(--mono)}
.theme-focus{max-width:760px;margin-top:var(--sp-5);padding:var(--sp-7);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  background:color-mix(in srgb,var(--panel-deep),transparent 18%)}
.theme-focus h2{font:500 var(--fs-h2) var(--serif);margin:var(--sp-3) 0}
.theme-focus p{color:var(--ink-2);font-size:var(--fs-sm)}
.theme-focus-links{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.theme-focus-links button{border:1px solid var(--line);background:transparent;color:var(--ink-2);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--pill);font-size:var(--fs-sm)}
.theme-focus-links button:hover{color:var(--ink);border-color:var(--moss-tint)}

/* ---------- collections: Notes · Prayer · Archive ---------- */
.collection-view{max-width:1180px;margin:auto;padding:var(--sp-9) var(--sp-7)}
.collection-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-7)}
.library-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:var(--sp-6);align-items:start}
.library-list{display:flex;flex-direction:column;gap:var(--sp-3);max-height:68vh;overflow:auto}
.library-item{border:1px solid var(--line-soft);border-radius:var(--r-sm);
  background:var(--panel);color:var(--ink-2);padding:var(--sp-5);text-align:left;transition:.16s}
.library-item:hover{background:var(--panel-2);border-color:var(--line)}
.library-item[aria-current="true"]{background:var(--moss-soft);border-color:var(--moss-tint)}
.library-item h3{font:500 var(--fs-lg) var(--serif);color:var(--ink);margin:var(--sp-1) 0}
.library-item p{font-size:var(--fs-sm);margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.library-detail{min-height:330px;padding:var(--sp-7)}
.detail-head{display:flex;justify-content:space-between;gap:var(--sp-5);
  border-bottom:1px solid var(--line);padding-bottom:var(--sp-5);margin-bottom:var(--sp-6)}
.detail-head h2{font:500 var(--fs-h2) var(--serif);margin:var(--sp-1) 0}
.detail-body{white-space:pre-wrap;color:var(--ink-2);line-height:1.75}
.empty-state{padding:var(--sp-9) var(--sp-6);text-align:center;color:var(--ink-3);font-size:var(--fs-sm)}
.card-list{max-width:760px;display:grid;gap:var(--sp-4)}
.note-card{padding:var(--sp-6)}
.note-card p{white-space:pre-wrap;color:var(--ink-2);margin:var(--sp-3) 0 0}
.meta-row{display:flex;align-items:center;gap:var(--sp-3);color:var(--ink-3);
  font:600 var(--fs-meta) var(--sans);letter-spacing:.06em;text-transform:uppercase}
.meta-row .danger-btn{margin-left:auto}
.form-card{max-width:760px;padding:var(--sp-6);margin-bottom:var(--sp-6)}
.study-form{display:grid;gap:var(--sp-5)}
.study-form label{display:block;margin-bottom:var(--sp-2);color:var(--ink-3);
  font:700 var(--fs-meta) var(--sans);letter-spacing:.12em;text-transform:uppercase}
.study-form input,.study-form textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel-deep);color:var(--ink);padding:var(--sp-4)}
.study-form input::placeholder,.study-form textarea::placeholder,.inline-form textarea::placeholder,.inline-form input::placeholder{color:var(--ink-3)}
.study-form textarea{min-height:150px;resize:vertical;line-height:1.65}
.form-actions{display:flex;justify-content:flex-end;gap:var(--sp-3)}
.archive-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.archive-image{width:100%;max-height:560px;object-fit:contain;border-radius:var(--r-sm);background:var(--panel-deep)}
.archive-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--sp-3);margin-right:var(--sp-4);float:left}
.file-drop{padding:var(--sp-7);border:1px dashed var(--line);border-radius:var(--r-sm);
  color:var(--ink-2);text-align:center;cursor:pointer;font-size:var(--fs-sm)}
.file-drop:hover{border-color:var(--moss-tint);color:var(--ink)}

/* ---------- verse lens — the margin ---------- */
.verse-lens{position:fixed;z-index:80;top:var(--top);right:0;bottom:0;width:min(430px,94vw);
  border-radius:var(--r-lg) 0 0 0;padding:var(--sp-7);overflow:auto;
  transform:translateX(102%);transition:transform .25s ease;
  box-shadow:-25px 0 70px rgba(0,0,0,.5)}
.verse-lens.open{transform:none}
.verse-lens>header,.dialog-card>header{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--sp-5);border-bottom:1px solid var(--line);padding-bottom:var(--sp-5)}
.verse-lens h2,.dialog-card h2{font:500 var(--fs-h2) var(--serif);margin:var(--sp-2) 0 0}
.close-btn{border:1px solid var(--line);background:transparent;color:var(--ink-2);
  width:32px;height:32px;border-radius:50%;font-size:var(--fs-h3);line-height:1;flex:none}
.close-btn:hover{color:var(--ink);border-color:var(--moss-tint)}
.lens-section{padding:var(--sp-6) 0;border-bottom:1px solid var(--line-soft)}
.lens-section:last-child{border-bottom:0}
.lens-ref{display:flex;width:100%;justify-content:space-between;align-items:center;
  border:1px solid var(--line-soft);background:transparent;color:var(--ink-2);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);margin-top:var(--sp-3);font-size:var(--fs-sm)}
.lens-ref:hover{background:var(--panel-2);color:var(--ink);border-color:var(--moss-tint)}
.note-copy{white-space:pre-wrap;color:var(--ink-2);margin:var(--sp-3) 0;font-size:var(--fs-sm);line-height:1.7}
.note-meta{color:var(--ink-3);font:var(--fs-meta) var(--sans);letter-spacing:.04em}
.note-history{padding:var(--sp-4) 0;border-top:1px solid var(--line-soft)}
.note-history:first-child{border-top:0}
.inline-form textarea,.inline-form input{width:100%;background:var(--panel-deep);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--sp-4);margin-top:var(--sp-3);
  font-size:var(--fs-sm);line-height:1.65}
.inline-form textarea{min-height:100px;resize:vertical}

/* ---------- dialog · toast ---------- */
.data-dialog{border:0;background:transparent;padding:var(--sp-6);color:var(--ink);width:min(540px,100%)}
.data-dialog::backdrop{background:rgba(3,4,8,.72);backdrop-filter:blur(5px)}
.dialog-card{padding:var(--sp-7)}
.dialog-card>p{color:var(--ink-2);font-size:var(--fs-sm)}
.dialog-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-6)}
/* System action, not a devotional one — this is where nova belongs. */
.dialog-actions .primary-btn{background:linear-gradient(155deg,#f0bd6c,var(--nova));color:#241706;box-shadow:var(--glow-nova)}
.dialog-actions .primary-btn:hover{background:linear-gradient(155deg,var(--nova),var(--nova-deep))}
.dialog-message{min-height:20px;font-size:var(--fs-sm);color:var(--ink-2)}
.toast{position:fixed;z-index:100;left:50%;bottom:var(--sp-7);transform:translate(-50%,20px);opacity:0;
  background:var(--panel-2);border:1px solid var(--moss-tint);padding:var(--sp-4) var(--sp-6);
  border-radius:var(--pill);color:var(--ink);font-size:var(--fs-sm);
  box-shadow:var(--shadow-lg);transition:.2s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ---------- responsive ---------- */
@media(max-width:1150px){
  .brand-os,.brand-sep{display:none}
  .search-wrap{width:220px}
  .reader-shell{grid-template-columns:190px minmax(0,1fr)}
  .themes-view{padding-right:27vw}}

@media(max-width:900px){
  .topbar{gap:var(--sp-4);padding:0 var(--sp-5)}
  .search-wrap{display:none}
  .topnav button{padding:var(--sp-3) var(--sp-4)}
  .sync-state span:last-child{display:none}
  .sync-state{padding:6px}
  .reader-shell{grid-template-columns:160px minmax(0,1fr)}
  .reading-card{padding-left:var(--sp-7);padding-right:var(--sp-7)}
  .chapter-rail .rail-title{width:auto}
  .themes-view{padding-right:22vw}
  .library-layout{grid-template-columns:280px minmax(0,1fr)}}

@media(max-width:720px){
  :root{--top:60px}
  /* The bottom tab bar is `position:fixed`, and a backdrop-filter on
     .topbar would make .topbar its containing block — which is exactly
     why the bar used to land on top of the header instead of at the
     foot of the screen. Solid background here, no filter. */
  .topbar{padding:0 var(--sp-5);backdrop-filter:none;-webkit-backdrop-filter:none;
    background:rgba(8,10,17,.97)}
  .brand{margin-right:auto}
  .topnav{position:fixed;left:0;right:0;bottom:0;top:auto;height:64px;
    background:rgba(8,10,17,.97);border:0;border-top:1px solid var(--line);border-radius:0;
    display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:var(--sp-2);z-index:90;
    padding-bottom:calc(var(--sp-2) + env(safe-area-inset-bottom,0px))}
  .topnav button{font-size:var(--fs-meta);padding:var(--sp-3) 2px;letter-spacing:.06em}
  .view{padding:var(--sp-4) var(--sp-4) 86px}
  .reader-shell{display:block;height:auto}
  .book-rail{display:none}
  .mobile-pickers{display:grid;grid-template-columns:1fr 110px;gap:var(--sp-4);
    padding:var(--sp-4);margin-bottom:var(--sp-4)}
  .mobile-pickers label{font:700 var(--fs-meta) var(--sans);letter-spacing:.12em;
    text-transform:uppercase;color:var(--ink-3)}
  .mobile-pickers select{display:block;width:100%;margin-top:var(--sp-1);
    background:var(--panel-deep);color:var(--ink);border:1px solid var(--line);
    border-radius:var(--sp-3);padding:var(--sp-3)}
  /* Bible Study/CLAUDE.md: "Mobile keeps the reading column primary;
     book/chapter rails collapse into selectors." Both rails go; the
     .mobile-pickers bar is the chapter control at this width. */
  .chapter-rail{display:none}
  .reading-card{min-height:auto;padding:var(--sp-7) var(--sp-6);border-radius:var(--r)}
  .reading-header{align-items:flex-start}
  .reading-actions{flex-direction:column;align-items:flex-end}
  .verses{font-size:19px;line-height:1.75}
  .themes-view{padding:var(--sp-8) var(--sp-4) 90px}
  .themes-view::after{background:linear-gradient(180deg,rgba(8,9,17,.86) 0%,rgba(8,9,17,.7) 46%,rgba(8,9,17,.3) 74%,transparent 100%)}
  .theme-grid{grid-template-columns:1fr}
  .theme-focus{margin-bottom:var(--sp-6)}
  .collection-view{padding:var(--sp-8) var(--sp-4) 90px}
  .collection-head{align-items:flex-start;flex-direction:column;gap:var(--sp-5)}
  .library-layout{grid-template-columns:1fr}
  .library-list{max-height:34vh}
  .archive-pair{grid-template-columns:1fr}
  .verse-lens{top:auto;left:0;right:0;bottom:64px;width:100%;max-height:80vh;
    border-radius:var(--r-lg) var(--r-lg) 0 0;padding:var(--sp-6);
    transform:translateY(calc(100% + 70px))}
  .verse-lens.open{transform:none}
  .data-dialog{padding:var(--sp-3)}
  .dialog-card{padding:var(--sp-6)}
  .toast{bottom:80px}}