/* Self-hosted fonts (vendor/fonts/) — was a Google Fonts @import, which
   needs a network round-trip on first paint and simply doesn't resolve at
   all offline (planes, spotty wifi, first launch of the Android build
   before anything's cached). Only the weights/styles the app actually
   uses are included, sourced via @fontsource so the files are the same
   ones Google Fonts serves, just shipped locally. */
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/fonts/fraunces-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:600; font-display:swap; src:url('vendor/fonts/fraunces-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Fraunces'; font-style:normal; font-weight:700; font-display:swap; src:url('vendor/fonts/fraunces-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Lora'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/fonts/lora-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Lora'; font-style:italic; font-weight:400; font-display:swap; src:url('vendor/fonts/lora-latin-400-italic.woff2') format('woff2'); }
@font-face{ font-family:'Lora'; font-style:normal; font-weight:500; font-display:swap; src:url('vendor/fonts/lora-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('vendor/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('vendor/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('vendor/fonts/inter-latin-600-normal.woff2') format('woff2'); }

:root{
  --ink-900:#17171b;
  --ink-800:#202027;
  --ink-700:#2b2b34;
  --ink-600:#3a3a45;
  --brass:#c9a227;
  --brass-dim:#8f741f;
  --paper:#eae6db;
  --paper-dim:#ddd7c8;
  --paper-text:#2a2620;
  --paper-text-soft:#6b6559;
  --cream-ink:#f1eee6;
  --ok-green:#6f8f5a;
  --radius:8px;
  --font-display:'Fraunces', serif;
  --font-body:'Lora', serif;
  --font-ui:'Inter', sans-serif;
}

/* Light Theme */
html[data-theme="light"] {
  --ink-900: #ffffff;
  --ink-800: #f4f4f5;
  --ink-700: #e4e4e7;
  --ink-600: #d4d4d8;
  --brass: #3b82f6; /* Blue accent instead of brass */
  --brass-dim: #2563eb;
  --paper: #ffffff;
  --paper-dim: #f4f4f5;
  --paper-text: #09090b;
  --paper-text-soft: #71717a;
  --cream-ink: #09090b;
}

/* Dark Theme */
html[data-theme="dark"] {
  --ink-900: #09090b;
  --ink-800: #18181b;
  --ink-700: #27272a;
  --ink-600: #3f3f46;
  --brass: #a78bfa; /* Purple accent */
  --brass-dim: #8b5cf6;
  --paper: #09090b;
  --paper-dim: #18181b;
  --paper-text: #f4f4f5;
  --paper-text-soft: #a1a1aa;
  --cream-ink: #f4f4f5;
}

/* ---------- Pro themes ---------- */

/* Moonlight — soft lavender-blue, calm night writing. */
html[data-theme="moonlight"] {
  --ink-900: #14141f;
  --ink-800: #1d1e2e;
  --ink-700: #282a3d;
  --ink-600: #383a52;
  --brass: #8ea9e8;
  --brass-dim: #6b87c9;
  --paper: #1b1c2b;
  --paper-dim: #232435;
  --paper-text: #dfe3f5;
  --paper-text-soft: #8b8fb0;
  --cream-ink: #e8eaf7;
}

/* Meadow — muted sage green + warm cream, calm daylight writing. */
html[data-theme="meadow"] {
  --ink-900: #f5f3ea;
  --ink-800: #ece8da;
  --ink-700: #ddd7c2;
  --ink-600: #c7bfa3;
  --brass: #6f8f5a;
  --brass-dim: #56713f;
  --paper: #faf8f0;
  --paper-dim: #f0ecdd;
  --paper-text: #3a3d2f;
  --paper-text-soft: #7c7a5f;
  --cream-ink: #3a3d2f;
}

/* Golden Hour — warm amber/rose sunset tones, romantic warmth. */
html[data-theme="golden-hour"] {
  --ink-900: #2a1a1a;
  --ink-800: #3a2420;
  --ink-700: #4a2f28;
  --ink-600: #5f3e30;
  --brass: #e8a15c;
  --brass-dim: #cc7f3d;
  --paper: #fff3e6;
  --paper-dim: #fbe6d0;
  --paper-text: #402318;
  --paper-text-soft: #8a5f47;
  --cream-ink: #ffe9d6;
}

/* Witching Hour — deep plum-black with silver accents, moody supernatural vibe. */
html[data-theme="witching-hour"] {
  --ink-900: #120c17;
  --ink-800: #1c1421;
  --ink-700: #281c2e;
  --ink-600: #392a41;
  --brass: #b9a3d6;
  --brass-dim: #9179b8;
  --paper: #191220;
  --paper-dim: #221929;
  --paper-text: #e6dcf0;
  --paper-text-soft: #9584a8;
  --cream-ink: #ece3f5;
}

/* Rosewater — dusty rose and mauve, soft daylight writing. */
html[data-theme="rosewater"] {
  --ink-900: #f7f0f0;
  --ink-800: #efe2e2;
  --ink-700: #e0cccc;
  --ink-600: #ccb0b0;
  --brass: #b8687a;
  --brass-dim: #96505f;
  --paper: #fdf7f7;
  --paper-dim: #f5e9e9;
  --paper-text: #4a2c32;
  --paper-text-soft: #8a6268;
  --cream-ink: #4a2c32;
}

/* Seafoam — soft teal and blue-green, coastal calm daylight writing. */
html[data-theme="seafoam"] {
  --ink-900: #eef5f4;
  --ink-800: #dfeceb;
  --ink-700: #c7ddda;
  --ink-600: #a9c8c4;
  --brass: #3f8f85;
  --brass-dim: #2f6d65;
  --paper: #f7fbfa;
  --paper-dim: #e9f2f0;
  --paper-text: #1f3d3a;
  --paper-text-soft: #5c7f7a;
  --cream-ink: #1f3d3a;
}

/* Calico — warm cream, black, and marmalade-orange patches, Lady and the
   Cats' own signature theme. Dark chrome (like a cat's black patches) with
   a warm cream writing surface (the white patches) and an orange brass
   accent (the marmalade patches). */
html[data-theme="calico"] {
  --ink-900: #1a1512;
  --ink-800: #241d18;
  --ink-700: #322822;
  --ink-600: #453830;
  --brass: #e0793c;
  --brass-dim: #b85f2c;
  --paper: #fdf6e8;
  --paper-dim: #f5ebd2;
  --paper-text: #2b1d12;
  --paper-text-soft: #7a6248;
  --cream-ink: #f5ebd2;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-ui);
  background:var(--ink-900);
  color:var(--cream-ink);
  overflow:hidden;
}

button{font-family:var(--font-ui);cursor:pointer;}
input{font-family:inherit;}

.app{
  display:flex;
  flex-direction:column;
  height:100vh; /* fallback for browsers without dvh support */
  height:100dvh; /* accounts for mobile browsers' dynamically shown/hidden address bar — 100vh alone can report taller than what's actually visible, pushing bottom content like the editor footer out of view */
}
.app[hidden], .bookshelf[hidden], .modal-actions[hidden], .ai-output-actions[hidden]{ display:none; }

/* ---------- Ribbon ---------- */
.ribbon{
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 18px;
  height:52px;
  background:var(--ink-800);
  border-bottom:1px solid var(--ink-600);
  flex-shrink:0;
}
/* .ribbon-row wrappers exist so the mobile two-row layout below has real
   flex containers to work with, without disturbing desktop at all: with
   display:contents the wrapper's own box disappears and its children lay
   out exactly as if they were direct children of .ribbon, identical to
   the old unwrapped markup. */
.ribbon-row { display: contents; }
.mobile-menu-btn { display: none; }
.mobile-actions-btn { display: none; }
.tab-scroll-btn { display: none; }

.ribbon-brand{display:flex;align-items:center;gap:8px;min-width:180px;}
.brand-mark{ width:22px; height:22px; border-radius:6px; object-fit:cover; vertical-align:middle; flex-shrink:0; }
.brand-name{
  background:none;border:none;color:var(--cream-ink);
  font-family:var(--font-display);font-weight:600;font-size:15px;
  padding:4px 2px;border-radius:var(--radius);
  max-width:220px;
}
.brand-name:hover,.brand-name:focus{background:var(--ink-700);outline:none;}
.project-series-label{
  font-family:var(--font-ui); font-size:11px; color:var(--brass); opacity:.85;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; flex-shrink:1;
}

.view-tabs{display:flex;align-items:flex-end;gap:4px;height:100%;}
.tab{
  display:flex;align-items:center;gap:8px;
  background:var(--ink-700);
  color:var(--paper-text-soft);
  border:1px solid var(--ink-600);
  border-bottom:none;
  padding:8px 16px 7px;
  font-size:13px;
  border-radius:12px 12px 0 0;
  position:relative;
  top:1px;
  transition:background .15s,color .15s;
}
.tab .tab-index{
  font-family:var(--font-display);
  font-size:11px;
  color:var(--brass-dim);
  font-weight:600;
}
.tab:hover{color:var(--cream-ink);}
.tab.active{
  background:var(--paper);
  color:var(--paper-text);
  border-color:var(--paper);
}
.tab.active .tab-index{color:var(--brass-dim);}

.ribbon-actions{
  display:flex;align-items:center;gap:8px;margin-left:auto;
  /* Flex items default to min-width:auto, which blocks shrinking below
     their content's natural width no matter what flex-shrink says — kept
     from the original fix for this. The overflow-x:auto that used to sit
     here for the same reason got removed: setting overflow-x to anything
     but visible forces overflow-y to compute to auto too (a CSS spec
     quirk — you can't have scroll-x with truly-visible-y), which was
     clipping every dropdown-menu popup here to the ribbon's own short
     height — invisible, not just badly positioned. Now that the ribbon
     restructure cut this down to 4 dropdown triggers (was 11 flat
     buttons), min-width:0 alone comfortably covers any real-world width
     without needing the scroll behavior that came with this side effect. */
  min-width:0;
}
.ribbon-actions > *{ flex-shrink:0; }
.save-indicator{font-size:11px;color:var(--paper-text-soft);margin-right:6px;letter-spacing:.03em;text-transform:uppercase;}
.ghost-btn{
  background:transparent;
  border:1px solid var(--ink-600);
  color:var(--cream-ink);
  font-size:12px;
  padding:6px 12px;
  border-radius:var(--radius);
  display:inline-block;
}
.ghost-btn, .solid-btn, .ai-action, .ai-ask-btn, .canvas-toolbar button {
  border-radius: 20px;
  transition: all 0.2s ease;
  padding: 6px 14px;
}
.ghost-btn:hover{border-color:var(--brass);color:var(--brass);}
/* .editor-footer explicitly sets the light --paper background (it sits
   below the writing surface), but its Goals/Tips buttons use the generic
   .ghost-btn styling meant for the dark --ink chrome elsewhere — light
   text on light background under Sepia specifically. Same color-pairing
   mismatch already found and fixed a few times this session, just in a
   spot that hadn't been touched yet. */
.editor-footer .ghost-btn{ color:var(--paper-text); border-color:var(--ink-600); }
.editor-footer .ghost-btn:hover{ color:var(--brass); border-color:var(--brass); }

/* ---------- Workspace ---------- */
.workspace{display:flex;flex:1;min-height:0;position:relative;}

.binder{
  width:240px;
  flex-shrink:0;
  background:var(--ink-800);
  border-right:1px solid var(--ink-600);
  display:flex;flex-direction:column;
}
/* Corkboard and Threads are freeform, doc-independent views — the binder tree
   isn't relevant there, so it (and its resize handle) are hidden. */
.app.binder-hidden .binder,
.app.binder-hidden #binderResizer{
  display:none;
}
.binder-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--paper-text-soft);
  border-bottom:1px solid var(--ink-700);
}
.binder-add{display:flex;gap:4px;}
.binder-add > button{
  background:none;border:1px solid var(--ink-600);color:var(--cream-ink);
  font-size:11px;padding:3px 8px;border-radius:var(--radius);white-space:nowrap;
}
.binder-add > button:hover{border-color:var(--brass);color:var(--brass);}

.binder-tree{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;}
.binder-item{
  display:flex;align-items:center;gap:6px;
  padding:6px 8px;
  border-radius:var(--radius);
  font-size:13px;
  color:var(--cream-ink);
  cursor:pointer;
  margin-bottom:1px;
  border-top:2px solid transparent;
  border-bottom:2px solid transparent;
}
.binder-item:hover{background:var(--ink-700);}
.binder-item.selected{background:var(--brass);color:var(--ink-900);font-weight:600;}
.binder-item .bi-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.binder-item .bi-del{
  opacity:0;font-size:14px;color:inherit;background:none;border:none;padding:0 2px;
}
.binder-item .bi-rename{
  opacity:0;font-size:12px;color:inherit;background:none;border:none;padding:0 3px;
}
.binder-item:hover .bi-del,.binder-item:hover .bi-rename{opacity:.6;}
.binder-item .bi-del:hover,.binder-item .bi-rename:hover{opacity:1;}
.binder-item.folder{font-weight:600;color:var(--brass);}
.binder-item.folder.selected{color:var(--ink-900);}
.binder-item .bi-caret{
  width:10px;font-size:10px;color:var(--paper-text-soft);transition:transform .12s;flex-shrink:0;
}
.binder-item.folder.collapsed .bi-caret{transform:rotate(-90deg);}
.binder-item.reference{color:var(--cream-ink);}
.binder-item.reference.selected{color:var(--ink-900);}
.binder-item.reference .bi-caret{color:var(--brass);}

.bible-layout{flex:1;display:flex;flex-direction:row;min-height:0;}
.bible-detail{flex:1;display:flex;flex-direction:column;min-height:0;padding:20px 40px 24px;overflow-y:auto;}
.bible-detail[hidden]{display:none;}
.bible-detail-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;flex-shrink:0;
}
.bible-detail-foot{
  display:flex;justify-content:flex-end;align-items:center;
  padding-top:10px;flex-shrink:0;
}
.ref-fields{
  display:flex;gap:14px;align-items:flex-start;
  margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--paper-dim);
  flex-shrink:0;
}
.ref-image-wrap{
  position:relative;width:72px;height:72px;flex-shrink:0;
  border-radius:6px;overflow:hidden;background:var(--paper-dim);
  border:1px solid #cfc7b2;
}
.ref-image-placeholder span{font-size:15px;}
.ref-image{width:100%;height:100%;object-fit:cover;cursor:pointer;}
.ref-image-placeholder{
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--paper-text-soft);font-size:11px;cursor:pointer;font-family:var(--font-ui);
}
.ref-image-placeholder span{font-size:20px;line-height:1;color:var(--brass-dim);}
.ref-image-placeholder:hover{color:var(--brass-dim);}
.ref-image-remove{
  position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;border:none;font-size:12px;line-height:1;
}
.ref-image-remove:hover{background:rgba(0,0,0,.8);}
.ref-meta{flex:1;padding-top:2px;min-width:0;}
.bible-title-input{width:100%;font-size:19px;}
.bible-notes{
  height:320px;flex-shrink:0;margin:0;resize:none;
  border:1px solid var(--ink-600);border-radius:var(--radius);
  padding:12px 14px;background:var(--paper-dim);overflow-y:auto;
}

.bible-content-wrap{ position:relative; height:320px; flex-shrink:0; background:var(--paper-dim); border-radius:var(--radius); }
.bible-content-wrap .bible-notes{
  box-sizing:border-box;
  font-family:var(--font-body); font-size:17px; line-height:1.75;
  letter-spacing:normal; word-spacing:normal;
  padding:12px 14px; border:1px solid transparent; border-radius:var(--radius);
  position:absolute; inset:0; height:auto; background:transparent; z-index:2;
  border-color:var(--ink-600);
margin:0;
}
/* A plain clipping container — app.js positions it (left/top/width/height)
   to exactly match the textarea's content box on every paint, and fills it
   with small absolutely-positioned .hl-mark rectangles, one per search
   match. It doesn't mirror any text itself, which is what makes it immune
   to the textarea's scrollbar changing its wrap width — see the comment
   above paintBibleContentHighlightLayer() in app.js for the full story. */
.bible-content-highlight{
  position:absolute; overflow:hidden; pointer-events:none; z-index:1;
}
.bible-content-highlight .hl-mark{
  position:absolute; background:var(--brass, #b8925a); opacity:.4; border-radius:2px;
}
.bible-content-highlight .hl-mark.current{ opacity:.75; }
.bible-match-nav{
  display:flex; align-items:center; gap:8px; margin-top:6px;
  font-size:11.5px; color:var(--paper-text-soft); font-family:var(--font-ui);
}
.bible-match-nav button{ padding:2px 8px; font-size:12px; line-height:1; }
.ref-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--paper-text-soft);margin-bottom:4px;font-family:var(--font-ui);}
.ref-tagline{
  width:100%;background:var(--paper-dim);border:1px solid #cfc7b2;color:var(--paper-text);
  padding:8px 10px;border-radius:var(--radius);font-family:var(--font-body);font-size:14px;font-style:italic;
}
.binder-item.drop-before{border-top-color:var(--brass);}
.binder-item.drop-after{border-bottom-color:var(--brass);}
.binder-item.drop-into{background:var(--ink-600);outline:1px dashed var(--brass);}
.binder-item.dragging{opacity:.4;}

/* ---------- Stage / panes ---------- */
.stage{flex:1;min-width:0;position:relative;background:var(--ink-900);}
.pane{position:absolute;inset:0;display:none;flex-direction:column;}
.pane.active{display:flex;}

/* Editor pane */
.pane-editor{background:var(--paper);}
.editor-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 40px 0;
}
.doc-title{
  background:none;border:none;
  font-family:var(--font-display);font-weight:600;font-size:22px;
  color:var(--paper-text);width:70%;
  padding:4px 2px;border-radius:var(--radius);
}
.doc-title:focus{outline:none;background:var(--paper-dim);}
.editor-toolbar-right{display:flex;align-items:center;gap:14px;}
.doc-meta{font-size:12px;color:var(--paper-text-soft);font-family:var(--font-ui);}
.ai-toggle-btn{
  background:var(--ink-800);color:var(--brass);border:1px solid var(--brass-dim);
  font-size:12px;padding:6px 12px;border-radius:14px;font-family:var(--font-ui);font-weight:600;
}
.ai-toggle-btn:hover{background:var(--ink-700);}
.ai-toggle-btn.active{background:var(--brass);color:var(--ink-900);}

.editor-body{flex:1;display:flex;min-height:0;}
.editor-main{flex:1;display:flex;flex-direction:column;min-width:0;}

.editor-surface{
  flex:1;
  margin:14px 40px 0;
  border:none;
  background:transparent;
  resize:none;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.75;
  color:var(--paper-text);
}
.editor-surface:focus{outline:none;}
.editor-surface:empty:before {
  content: attr(data-placeholder);
  color: var(--paper-text-soft);
  pointer-events: none;
}
.wiki-link {
  color: var(--brass);
  background: var(--paper-dim);
  padding: 0 4px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}
.wiki-link:hover {
  background: var(--brass);
  color: var(--ink-900);
}

/* AI side panel */
.ai-panel{
  width:0;overflow:hidden;flex-shrink:0;
  background:var(--ink-800);
  border-left:1px solid var(--ink-600);
  display:flex;flex-direction:column;
  transition:width .16s ease;
}
.ai-panel.open{width:300px;}
.ai-panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--ink-700);
  font-family:var(--font-display);font-weight:600;color:var(--brass);font-size:14px;
  flex-shrink:0;
}
.ai-close{background:none;border:none;color:var(--cream-ink);font-size:16px;}
/* .ai-close is shared with .ref-panel below, but that panel has a light
   paper background (unlike this dark ink one) — --cream-ink is meant for
   dark surfaces and is nearly invisible there, especially in light themes
   like sepia. Scoped override keeps this rule's original color correct
   for its own (dark) panel while fixing the other. */
.ref-panel-head .ai-close{color:var(--paper-text);}
/* Everything below the header scrolls as one unit, rather than each
   section fighting for its own sliver of fixed height — a long dictionary
   or AI result no longer gets squeezed into a tiny leftover box. */
.ai-panel-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;}
.ai-actions{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-bottom:1px solid var(--ink-700);flex-shrink:0;}
.ai-action{
  background:var(--ink-700);border:1px solid var(--ink-600);color:var(--cream-ink);
  font-size:12.5px;padding:8px 10px;border-radius:var(--radius);text-align:left;
}
.ai-action:hover{border-color:var(--brass);color:var(--brass);}
.ai-rewrite-row{display:flex;gap:6px;}
.ai-rewrite-row .ai-action{flex:1;}
#rewriteMode{
  background:var(--ink-700);color:var(--cream-ink);border:1px solid var(--ink-600);
  border-radius:var(--radius);font-size:11px;max-width:110px;
}
.ai-brainstorm{padding:12px 14px;border-bottom:1px solid var(--ink-700);display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
.ai-brainstorm label{font-size:11px;color:var(--paper-text-soft);}
.ai-brainstorm textarea{
  background:var(--ink-700);border:1px solid var(--ink-600);color:var(--cream-ink);
  border-radius:var(--radius);font-size:12.5px;padding:8px;resize:vertical;font-family:var(--font-ui);
}
.ai-ask-btn{
  background:var(--brass);color:var(--ink-900);border:none;font-weight:600;
  padding:7px;border-radius:var(--radius);font-size:12.5px;
}
.ai-ask-btn:hover{background:#ddb534;}
.ai-ask-btn:disabled{opacity:.5;cursor:default;}

.ai-output{min-height:80px;padding:12px 14px 20px;font-size:13px;line-height:1.6;color:var(--cream-ink);white-space:pre-wrap;font-family:var(--font-body);}
.ai-empty{color:var(--cream-ink);opacity:.6;font-size:12px;font-family:var(--font-ui);font-style:italic;}
.ai-loading{color:var(--brass);font-size:12px;font-family:var(--font-ui);}
.ai-error{color:#d97757;font-size:12px;font-family:var(--font-ui);}
.ai-output-actions{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-top:1px solid var(--ink-700);}
.ai-output-actions button{
  background:var(--ink-700);border:1px solid var(--ink-600);color:var(--cream-ink);
  font-size:11px;padding:6px 9px;border-radius:var(--radius);
}
.ai-output-actions button:hover{border-color:var(--brass);color:var(--brass);}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;z-index:500;
}
.modal-overlay[hidden]{display:none;}
.modal{
  width:380px;max-width:90vw;background:var(--ink-800);border:1px solid var(--ink-600);
  border-radius:6px;padding:22px;color:var(--cream-ink);
  max-height:85vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal.modal-wide{width:600px;}

/* Reading Mode — a large, near-full-height modal rather than the small
   form-style ones elsewhere, since it needs to comfortably hold an entire
   manuscript's worth of scrollable text. */
.modal.modal-reading{
  width:760px;max-width:92vw;height:88vh;
  display:flex;flex-direction:column;padding:0;overflow:hidden;
}
.reading-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;border-bottom:1px solid var(--ink-700);flex-shrink:0;
}
.reading-modal-body{
  flex:1;overflow-y:auto;
  padding:48px 64px 80px;
  background:var(--paper);color:var(--paper-text);
}
.reading-modal-body .reading-chapter{
  max-width:640px;margin:0 auto;
  font-family:var(--font-body);font-size:19px;line-height:1.75;
}
.reading-chapter-title{
  font-family:var(--font-display);font-size:1.7em;font-weight:600;
  text-align:center;margin:0 0 1.2em;cursor:pointer;
  color:var(--paper-text);
}
.reading-chapter-title:first-child{margin-top:0;}
.reading-chapter-title:hover{color:var(--brass);}
.reading-chapter-title-hint{
  display:block;font-family:var(--font-ui);font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:.06em;opacity:.5;margin-top:6px;
}
.reading-chapter p{margin:0 0 1em;}
.reading-chapter + .reading-chapter{margin-top:3em;padding-top:3em;border-top:1px solid var(--ink-600);}
.reading-empty{font-family:var(--font-ui);font-size:14px;color:var(--paper-text-soft);text-align:center;margin-top:60px;}
.modal h3{margin:0 0 10px;font-family:var(--font-display);color:var(--brass);}
.modal-copy{font-size:12.5px;color:var(--cream-ink);opacity:.8;line-height:1.6;margin:0 0 16px;}
.modal-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--cream-ink);opacity:.65;margin-bottom:4px;}
.modal-input{
  width:100%;background:var(--ink-700);border:1px solid var(--ink-600);color:var(--cream-ink);
  padding:8px 10px;border-radius:var(--radius);font-size:13px;margin-bottom:14px;
}
.modal-hint{font-size:11.5px;color:var(--cream-ink);opacity:.7;margin:0 0 16px;}
.paywall-benefits{ margin:0 0 18px; padding-left:20px; font-size:13px; line-height:1.9; color:var(--cream-ink); }
#paywallWebFlow, #paywallAndroidFlow{ display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-bottom:12px; }
.paywall-status{ font-size:12px; color:var(--cream-ink); opacity:.75; min-height:16px; margin:0 0 8px; }
.fr-results{ list-style:none; margin:0 0 4px; padding:0; max-height:280px; overflow-y:auto; }
.fr-result-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:8px 10px; border-radius:6px; cursor:pointer; font-size:13px;
}
.fr-result-item:hover{ background:var(--ink-700); }
.fr-result-title{ color:var(--cream-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-result-kind{ color:var(--cream-ink); opacity:.5; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; flex-shrink:0; }
.fr-result-count{ color:var(--cream-ink); opacity:.6; font-size:11.5px; flex-shrink:0; }

.progress-stats{ display:flex; gap:14px; margin-bottom:18px; }
.progress-stat{
  flex:1; text-align:center; background:var(--ink-800); border:1px solid var(--ink-600);
  border-radius:var(--radius); padding:14px 8px;
}
.progress-stat-value{ display:block; font-family:var(--font-display); font-size:26px; color:var(--brass); font-weight:600; }
.progress-stat-label{ display:block; font-size:11px; color:var(--paper-text-soft); margin-top:2px; }
.heatmap-grid{
  display:grid; grid-template-rows:repeat(7, 1fr); grid-auto-flow:column; gap:3px;
  margin-bottom:8px; justify-content:start;
}
.heatmap-cell{ width:12px; height:12px; border-radius:2px; background:var(--ink-700); }
.heatmap-cell.tier-1{ background:var(--brass-dim); opacity:.4; }
.heatmap-cell.tier-2{ background:var(--brass-dim); opacity:.7; }
.heatmap-cell.tier-3{ background:var(--brass); opacity:1; }
.heatmap-cell.is-today{ outline:1px solid var(--cream-ink); outline-offset:1px; }

/* Badge celebration toast — corner notification, never a full-screen
   interrupt, since the whole point is celebrating without breaking flow. */
#badgeToastContainer{
  position:fixed; bottom:20px; right:20px; z-index:9999;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.badge-toast{
  display:flex; align-items:center; gap:12px;
  background:var(--ink-800); border:1px solid var(--brass);
  border-radius:var(--radius); padding:12px 16px; min-width:240px; max-width:320px;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  pointer-events:auto;
  animation: badgeToastIn .4s ease-out, badgeToastGlow 1.6s ease-out;
}
.badge-toast.leaving{ animation: badgeToastOut .3s ease-in forwards; }
.badge-toast-icon{ font-size:28px; flex-shrink:0; animation: badgeIconPop .5s ease-out .1s both; }
.badge-toast-text{ display:flex; flex-direction:column; gap:2px; }
.badge-toast-title{ font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--brass); }
.badge-toast-blurb{ font-size:11.5px; color:var(--paper-text-soft); line-height:1.4; }

@keyframes badgeToastIn{
  from{ transform:translateX(40px); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}
@keyframes badgeToastOut{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(40px); opacity:0; }
}
@keyframes badgeIconPop{
  0%{ transform:scale(0.3); opacity:0; }
  60%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); }
}
@keyframes badgeToastGlow{
  0%{ box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 0 rgba(201,162,39,0); }
  30%{ box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 20px rgba(201,162,39,.5); }
  100%{ box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 0 rgba(201,162,39,0); }
}
.modal-link{color:var(--brass);}
.modal-actions{display:flex;justify-content:flex-end;gap:8px; flex-wrap: wrap;}
.sync-provider-choices{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.sync-provider-choice{ flex:1; min-width:150px; padding:14px 10px; font-size:14px; }

/* ---------- Bookshelf (manuscript library) ---------- */
.bookshelf{
  min-height:100vh;
  min-height:100dvh;
  box-sizing:border-box; padding:32px 40px 24px;
  background:var(--ink-900); color:var(--cream-ink);
  display:flex; flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.bookshelf-header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:32px; padding-bottom:20px; border-bottom:1px solid var(--ink-700);
}
.bookshelf-header .brand-mark{ width:32px; height:32px; border-radius:8px; }
.bookshelf-header h1{ font-family:var(--font-display); font-size:22px; margin:0; flex:1; min-width:150px; }
.bookshelf-header-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.backup-reminder-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--ink-800); border:1px solid var(--brass-dim); border-radius:var(--radius);
  padding:12px 16px; margin:-16px 0 24px; font-size:13px; color:var(--cream-ink);
}
.backup-reminder-banner[hidden]{ display:none; }
.backup-reminder-actions{ display:flex; gap:8px; flex-shrink:0; }

.thesaurus-word{ font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--cream-ink); margin:0 0 8px; }
.thesaurus-sense{ margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid var(--ink-700); }
.thesaurus-sense:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.thesaurus-pos{ display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--brass); font-weight:600; margin-bottom:2px; }
.thesaurus-def{ color:var(--cream-ink); opacity:.75; margin-bottom:6px; }
.thesaurus-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.thesaurus-chip{
  background:var(--paper-dim); border:1px solid transparent; border-radius:999px;
  padding:3px 10px; font-size:12px; cursor:pointer; color:var(--paper-text);
}
.thesaurus-chip:hover{ border-color:var(--brass); }
.thesaurus-chip.is-antonym{ opacity:.75; }
.thesaurus-chips-label{ font-size:11px; color:var(--cream-ink); opacity:.65; margin:6px 0 4px; }
.bookshelf-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:22px;
}
.bookshelf-card{
  background:var(--ink-800); border:1px solid var(--ink-600); border-radius:var(--radius);
  padding:20px 18px; cursor:pointer; display:flex; flex-direction:column; gap:10px;
  transition:border-color .15s, transform .15s;
  position:relative;
}
.bookshelf-card:hover{ border-color:var(--brass); transform:translateY(-2px); }
.bookshelf-card-title{
  font-family:var(--font-display); font-size:16px; font-weight:600; color:var(--cream-ink);
  word-break:break-word;
}
.bookshelf-card-meta{ font-size:11.5px; color:var(--cream-ink); opacity:.65; }
.bookshelf-card-actions{ display:flex; gap:8px; margin-top:auto; padding-top:6px; }
.bookshelf-card-actions button{ flex:1; font-size:12px; padding:6px 8px; }
.bookshelf-card-complete.is-completed{ color:var(--brass); border-color:var(--brass); }

.badges-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px;
  margin-bottom:8px; max-height:400px; overflow-y:auto;
}
.badge-card{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  padding:14px 10px; border-radius:var(--radius); border:1px solid var(--ink-600);
  background:var(--ink-800);
}
.badge-card-icon{ font-size:30px; }
.badge-card-title{ font-size:11.5px; font-weight:600; color:var(--cream-ink); line-height:1.3; }
.badge-card.locked{ opacity:.35; }
.badge-card.locked .badge-card-icon{ filter:grayscale(1); }
.bookshelf-card-delete{
  position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; border:none; font-size:13px; line-height:1; cursor:pointer;
}
.bookshelf-card-delete:hover{ background:var(--ink-900); }
.bookshelf-card-series{
  position:absolute; top:10px; right:38px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; border:none; font-size:11px; line-height:1; cursor:pointer;
}
.bookshelf-card-series:hover{ background:var(--brass); color:var(--ink-900); }
.bookshelf-card-position{
  position:absolute; top:10px; left:10px; background:var(--brass); color:var(--ink-900);
  font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:999px;
}

.bookshelf-section{ margin-bottom:28px; }
.bookshelf-section-title{
  font-family:var(--font-ui); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--cream-ink); opacity:.6; margin:0 0 12px;
}

.series-shelf{
  background:var(--ink-800); border:1px solid var(--ink-700); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:20px;
}
.series-shelf-head{ display:flex; align-items:center; gap:10px; }
.series-shelf-caret{
  background:none; border:none; color:var(--cream-ink); font-size:13px; cursor:pointer; padding:2px 4px;
}
.series-shelf-title{
  font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--cream-ink); flex:1;
}
.series-shelf-count{ font-size:11.5px; color:var(--cream-ink); opacity:.6; }
.series-shelf-dissolved-tag{
  font-size:10px; text-transform:uppercase; letter-spacing:.04em; opacity:.6;
  border:1px solid var(--ink-600); border-radius:999px; padding:1px 7px; margin-left:6px; font-family:var(--font-ui);
}
.series-shelf-menu-wrap{ position:relative; }
.series-shelf-menu-btn{
  background:none; border:1px solid var(--ink-600); color:var(--cream-ink);
  font-size:14px; padding:2px 9px; border-radius:var(--radius); cursor:pointer;
}
.series-shelf-menu-btn:hover{ border-color:var(--brass); color:var(--brass); }
.series-shelf-dropdown{ top:100%; right:0; left:auto; margin-top:6px; }
.series-shelf-body{ margin-top:12px; }
.series-shelf-empty{ font-size:12.5px; color:var(--cream-ink); opacity:.6; margin:4px 0 10px; }
.series-shelf-missing{ font-size:11.5px; color:var(--cream-ink); opacity:.55; margin:10px 0 0; }
.series-shelf-row{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:16px;
}

.series-modal-checklist{ max-height:260px; overflow-y:auto; margin-bottom:12px; }
.series-modal-check-row{
  display:flex; align-items:center; gap:8px; padding:6px 2px; font-size:13px; color:var(--cream-ink); cursor:pointer;
}
.series-modal-note{ font-size:11.5px; opacity:.6; }

.series-reorder-list{ max-height:320px; overflow-y:auto; margin-bottom:12px; }
.series-reorder-row{
  display:flex; align-items:center; gap:8px; padding:8px 4px; border-bottom:1px solid var(--ink-700);
}
.series-reorder-position{
  background:var(--brass); color:var(--ink-900); font-size:10px; font-weight:600;
  padding:2px 7px; border-radius:999px; white-space:nowrap;
}
.series-reorder-title{ flex:1; font-size:13px; color:var(--cream-ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.series-reorder-label{ width:110px; margin-bottom:0; font-size:12px; }
.series-reorder-row button{ font-size:12px; padding:5px 8px; flex-shrink:0; }
.series-reorder-remove.danger{ border-color:#a33; color:#e88; }
.series-reorder-remove.danger:hover{ background:#a33; color:#fff; }

@media (max-width: 640px) {
  .series-shelf-row{
    display:flex; overflow-x:auto; scroll-snap-type:x proximity; gap:14px;
  }
  .series-shelf-row .bookshelf-card{ flex:0 0 220px; scroll-snap-align:start; }
}

.bookshelf-empty{ color:var(--cream-ink); opacity:.65; font-size:14px; margin-top:20px; }
.bookshelf-footer{ margin-top:auto; padding-top:32px; text-align:left; }
.bookshelf-footer a{
  color:var(--cream-ink); opacity:.4; font-size:11px; text-decoration:none;
  font-family:var(--font-ui);
}
.bookshelf-footer a:hover{ opacity:.85; color:var(--brass); }
.bookshelf-footer-sep{ color:var(--cream-ink); opacity:.25; font-size:11px; margin:0 6px; }
#footerVersion{ color:var(--cream-ink); opacity:.4; font-size:11px; }
/* Unlike the other muted footer links, this one is meant to actually get
   noticed — it's the easiest path to upgrading (or confirming Pro status)
   without hunting through the site. */
#proStatusLink{ color:var(--brass); opacity:1; font-weight:600; }
#proStatusLink:hover{ opacity:.8; color:var(--brass); }
#proStatusLink.is-pro{ color:var(--cream-ink); opacity:.65; font-weight:400; }
#proStatusLink.is-pro:hover{ opacity:.9; color:var(--brass); }
.solid-btn {
  background: var(--brass);
  color: var(--ink-900);
  border: 1px solid var(--brass);
  font-weight: 600;
  font-size: 12.5px;
}
.solid-btn:hover{background:#ddb534;}

/* Focus / distraction-free mode */
.app.focus-mode .ribbon,
.app.focus-mode .binder{display:none;}
.app.focus-mode .editor-surface{max-width:720px;margin:24px auto 0;}
.app.focus-mode .editor-toolbar{max-width:720px;margin:0 auto;padding:24px 0 0;}
.app.focus-mode .workspace{padding:0;}

.exit-focus-btn {
  display: none;
  margin: 20px auto 0;
  max-width: 720px;
  width: 100%;
  text-align: left;
  border: none;
  color: var(--paper-text-soft);
}

.exit-focus-btn:hover {
  color: var(--brass);
}

.app.focus-mode .exit-focus-btn {
  display: block; /* Only show when focus mode is active */
}

/* Canvas pane (Corkboard / mind-map) */
.pane-canvas{background:var(--ink-800);}
.canvas-toolbar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;border-bottom:1px solid var(--ink-700);
  flex-shrink:0;
}
.canvas-toolbar button{
  background:var(--ink-700);border:1px solid var(--ink-600);color:var(--cream-ink);
  font-size:12px;padding:6px 12px;border-radius:var(--radius);
}
.canvas-toolbar button:hover{border-color:var(--brass);color:var(--brass);}
.canvas-toolbar button.armed{background:var(--brass);color:var(--ink-900);border-color:var(--brass);}
.canvas-hint{font-size:11px;color:var(--cream-ink);opacity:.6;margin-left:auto;}

.canvas-board{
  flex:1;position:relative;overflow:auto;
  background-image:radial-gradient(circle, #3a3a4550 1px, transparent 1px);
  background-size:22px 22px;
}
.canvas-edges{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;}

.note-card{
  position:absolute;
  width:180px;min-height:126px;
  background:#f3ecc9;
  color:#3a3320;
  border-radius:2px;
  box-shadow:0 4px 10px rgba(0,0,0,.35);
  padding:10px 12px;
  font-family:var(--font-body);
  font-size:13px;
  cursor:grab;
  border-top:6px solid var(--brass);
}
.note-card:active{cursor:grabbing;}
.note-card.link-source{outline:2px solid var(--brass);}
.note-card textarea{
  width:100%;height:64px;border:none;background:transparent;resize:none;
  font-family:inherit;font-size:inherit;color:inherit;
}
.note-card textarea:focus{outline:none;}
.note-card .card-del{
  position:absolute;top:2px;right:6px;background:none;border:none;color:#7a6d3a;font-size:12px;
}
.card-swatches{display:flex;gap:4px;margin-top:6px;}
.card-swatch{
  width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.25);padding:0;cursor:pointer;
}
.card-swatch.active{outline:2px solid #3a3320;outline-offset:1px;}

/* Graph pane (Threads) */
.pane-graph{background:var(--ink-900);}
.graph-layout{display:flex;flex:1;min-height:0;}
.graph-canvas-wrap{flex:1;overflow:hidden;}
.graph-svg{width:100%;height:100%;}
.graph-node circle{fill:var(--ink-700);stroke:var(--brass);stroke-width:1.5;}
.graph-node text{fill:var(--cream-ink);font-size:11px;font-family:var(--font-ui);}
.graph-node.active circle{fill:var(--brass);stroke:var(--cream-ink);}
.graph-node.active text{fill:var(--brass);font-weight:600;}
.graph-node{cursor:pointer;}
.graph-node.series circle{stroke:var(--brass);stroke-width:2.5;}
.graph-node.book circle{fill:var(--ink-600);stroke:var(--cream-ink);}
.graph-node.thread circle{fill:none;stroke-dasharray:2,2;}
.graph-edge{stroke:#5a5a66;stroke-width:1;}
.graph-loading-text{fill:var(--paper-text-soft);font-size:12px;font-family:var(--font-ui);}
.graph-mention-count{opacity:.6;font-size:11px;}

.graph-toolbar{
  display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--ink-700);
}
.graph-toolbar select{ margin-bottom:0; max-width:240px; }

.graph-inspector{
  width:260px;flex-shrink:0;border-left:1px solid var(--ink-700);
  padding:16px;overflow-y:auto;
}
.graph-inspector h3{margin:0 0 10px;font-family:var(--font-display);font-size:15px;color:var(--brass);}
.graph-empty{font-size:12px;color:var(--paper-text-soft);}
.graph-inspector h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--paper-text-soft);margin:14px 0 6px;}
.graph-inspector ul{list-style:none;margin:0;padding:0;}
.graph-inspector li{
  font-size:12.5px;padding:6px 8px;border-radius:var(--radius);cursor:pointer;color:var(--paper-text);
}
.graph-inspector li:hover{background:var(--ink-700);color:var(--brass);}

/* Scrollbars, minimal */
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:var(--ink-600);border-radius:5px;}
::-webkit-scrollbar-track{background:transparent;}

.ref-panel {
  width: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--paper);
  border-left: 1px solid var(--ink-600);
  display: flex;
  flex-direction: column;
  transition: width 0.16s ease;
}

.ref-panel.open {
  width: 320px;
}

.ref-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ink-700);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--brass);
  font-size: 14px;
}

.ref-panel-body {
  padding: 20px;
  overflow-y: auto;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-text);
}

/* Resizers for drag-to-adjust panels */
.resizer {
  background-color: var(--ink-800);
  z-index: 10;
  transition: background-color 0.2s;
}

.resizer:hover, .resizer:active {
  background-color: var(--brass); /* Highlight on hover/drag */
}

.resizer-vert {
  width: 6px;
  cursor: col-resize; /* Left-Right arrow cursor */
  border-left: 1px solid var(--ink-600);
  border-right: 1px solid var(--ink-600);
}

/* Dropdown Menus */
.dropdown { position: relative; display: inline-block; }
.icon-btn {
  background: transparent; border: none; color: var(--paper-text-soft); 
  font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.icon-btn:hover { color: var(--brass); }

.dropdown-menu {
  position: absolute; left: 100%; top: 0; margin-left: 8px;
  background: var(--ink-800); border: 1px solid var(--ink-600);
  border-radius: var(--radius); box-shadow: 0 8px 16px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; min-width: 150px; z-index: 100;
  max-height: 70vh; overflow-x: hidden; overflow-y: auto;
}

.dropdown-menu[hidden] { display: none !important; }

/* The ribbon's 4 menus (File/Tools/View/Cloud) all sit at the far-right
   edge of the screen — .ribbon-actions has margin-left:auto pushing the
   whole group there. The base .dropdown-menu rule above opens further to
   the RIGHT of its trigger, which for anything already at the right edge
   just pushes the menu straight off the visible viewport. Overriding to
   open downward and right-aligned instead keeps every one of these 4
   fully on-screen regardless of window width. Scoped to .ribbon-actions
   specifically so binderAddMenu (a different screen position, works fine
   with the base rightward-opening behavior) is untouched.
*/
.ribbon-actions .dropdown-menu {
  left: auto;
  right: 0;
  top: 100%;
  margin-left: 0;
  margin-top: 8px;
}

.dropdown-menu button {
  background: none; border: none; color: var(--cream-ink);
  text-align: left; padding: 10px 14px; font-size: 13px;
  cursor: pointer; border-radius: 0; transition: background 0.2s;
}
.dropdown-menu button:hover, .dropdown-menu label:hover { 
  background: var(--ink-700) !important; 
  color: var(--brass) !important; 
}
.dropdown-divider{ height:1px; background:var(--ink-600); margin:4px 0; }
.theme-option.locked{ opacity:.6; }

/* Trash Modal UI */
.trash-list { list-style: none; padding: 0; margin: 0 0 20px 0; max-height: 400px; overflow-y: auto; }
.trash-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--ink-700);
  background: var(--ink-900); transition: background 0.2s;
}
.trash-item:hover { background: var(--ink-800); }
.trash-item:first-child { border-radius: 6px 6px 0 0; }
.trash-item:last-child { border-radius: 0 0 6px 6px; border-bottom: none; }

.trash-kind {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
  background: var(--ink-700); color: var(--cream-ink); opacity: .75;
  padding: 4px 8px; border-radius: 12px;
}
.trash-title { flex: 1; font-weight: 500; font-size: 14px; color: var(--cream-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Make the danger buttons look appropriately destructive */
.trash-item .danger { border-color: rgba(217, 119, 87, 0.3); color: #d97757; }
.trash-item .danger:hover { background: rgba(217, 119, 87, 0.1); border-color: #d97757; }

/* Inline rename in binder */
.binder-item .bi-title-input{
  flex:1;min-width:0;background:var(--ink-900);color:inherit;
  border:1px solid var(--brass);border-radius:4px;
  font:inherit;padding:1px 4px;
}
.binder-item.selected .bi-title-input{background:rgba(0,0,0,.15);color:var(--ink-900);}

/* Outline pane */
.pane-outline{background:var(--ink-900);}
.outline-toolbar{
  display:flex;align-items:center;gap:16px;
  padding:14px 40px;border-bottom:1px solid var(--ink-700);flex-shrink:0;
}
.outline-title{font-family:var(--font-display);font-size:18px;font-weight:600;color:var(--cream-ink);}
.outline-list{flex:1;overflow-y:auto;padding:24px 40px;display:flex;flex-direction:column;gap:10px;}
.outline-empty{color:var(--cream-ink);opacity:.6;font-size:13px;font-family:var(--font-ui);}
.outline-folder-heading{
  font-family:var(--font-display);font-weight:600;color:var(--brass);
  font-size:14px;margin:14px 0 -2px;text-transform:uppercase;letter-spacing:.04em;
}
.outline-folder-heading:first-child{margin-top:0;}
.outline-card{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--radius);
  padding:14px 16px;
}
.outline-card-order{display:flex;flex-direction:column;gap:2px;flex-shrink:0;padding-top:2px;}
.outline-card-order button{
  background:none;border:1px solid var(--ink-600);color:var(--cream-ink);opacity:.75;
  width:22px;height:20px;font-size:10px;border-radius:4px;line-height:1;
}
.outline-card-order button:hover{border-color:var(--brass);color:var(--brass);opacity:1;}
.outline-card-main{flex:1;min-width:0;}
.outline-card-title{
  display:flex;align-items:baseline;gap:10px;margin-bottom:6px;cursor:pointer;
}
.outline-card-title strong{
  font-family:var(--font-display);font-size:15px;color:var(--cream-ink);
}
.outline-card-title:hover strong{color:var(--brass);}
.outline-card-words{font-size:11px;color:var(--cream-ink);opacity:.6;font-family:var(--font-ui);white-space:nowrap;}
.outline-synopsis{
  width:100%;background:var(--ink-700);border:1px solid var(--ink-600);color:var(--cream-ink);
  border-radius:var(--radius);font-size:12.5px;padding:8px 10px;resize:vertical;
  font-family:var(--font-ui);min-height:44px;
}

.bible-instruction {
  margin: 6px 0 0; padding: 0 40px 12px;
  text-align: center; font-size: 12px; color: var(--paper-text-soft);
  font-family: var(--font-ui); border-bottom: 1px solid var(--ink-700);
}

.bible-filter-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 40px; border-bottom: 1px solid var(--ink-700);
  overflow-x: auto;
}
.bible-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bible-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 1px solid var(--ink-600); color: var(--cream-ink);
  font-family: var(--font-ui); font-size: 11.5px; padding: 4px 10px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.bible-chip:hover { border-color: var(--brass); color: var(--brass); }
.bible-chip.active { border-color: var(--brass); background: var(--brass); color: var(--ink-900); font-weight: 600; }
.bible-chip-count {
  font-size: 10px; opacity: .75;
}
.bible-chip.active .bible-chip-count { opacity: .85; }

.bible-card-category {
  margin-right: 5px; font-size: 12px; opacity: .85;
}

.ref-category-select { margin-bottom: 0; }

.bible-scope-pill{
  display:inline-block; margin-left:6px; font-size:9.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  background:var(--brass); color:var(--ink-900); padding:1px 7px; border-radius:999px; vertical-align:middle;
}
.bible-scope-filter{
  margin-bottom:0; max-width:220px; flex-shrink:0;
}

.ref-details{ margin-top:14px; border-top:1px solid var(--ink-700); padding-top:10px; }
.ref-details summary{
  cursor:pointer; font-family:var(--font-ui); font-size:12px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--cream-ink); opacity:.75; padding:4px 0;
}
.ref-details summary:hover{ opacity:1; color:var(--brass); }
.ref-details-body{ margin-top:8px; }
.appearance-book{ margin-bottom:12px; }
.appearance-book-head{ font-size:12.5px; font-weight:600; color:var(--cream-ink); margin-bottom:4px; }
.appearance-this-book{ font-weight:400; opacity:.6; text-transform:none; letter-spacing:0; }
.appearance-scene{
  display:flex; justify-content:space-between; gap:10px; padding:6px 8px; font-size:12.5px;
  color:var(--cream-ink); border-radius:6px; cursor:pointer;
}
.appearance-scene:hover{ background:var(--ink-700); color:var(--brass); }
.appearance-scene-count{ opacity:.6; font-size:11px; white-space:nowrap; }
.continuity-block{ margin-bottom:12px; }
.continuity-label{ font-size:12px; font-weight:600; color:var(--cream-ink); margin-bottom:4px; }
.continuity-textarea{
  width:100%; min-height:52px; resize:none; overflow:hidden; font-family:var(--font-ui); font-size:12.5px;
  line-height:1.5; padding:8px 10px;
}
.continuity-readonly{
  font-size:12.5px; color:var(--cream-ink); opacity:.75; white-space:pre-wrap;
  background:var(--ink-800); border-radius:6px; padding:8px 10px;
}
.lock-line{ font-size:12px; color:var(--cream-ink); opacity:.7; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lock-line .solid-btn{ font-size:11px; padding:4px 10px; }
.continuity-so-far-heading{ margin:0 0 8px; color:var(--cream-ink); opacity:.75; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.continuity-so-far-item{ margin-bottom:10px; font-size:12.5px; color:var(--cream-ink); }
.continuity-so-far-item strong{ display:block; margin-bottom:2px; color:var(--brass); font-size:11.5px; font-weight:600; }

@media (max-width: 640px) {
  .bible-filter-row { flex-wrap: nowrap; }
  .bible-chips { flex-wrap: nowrap; }
  .project-series-label { display: none; }
}

.bible-toolbar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 40px 0;
}
.bible-toolbar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--cream-ink);
}

.ref-search-wrap {
  position: relative; margin: 0 auto; width: 100%; max-width: 300px;
}
.ref-search-wrap .modal-input { width: 100%; margin-bottom: 0; padding-right: 60px; }
.ref-search-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 14px; padding: 4px 6px;
}
.ref-search-clear {
  position: absolute; right: 28px; top: 50%; transform: translateY(-50%);
  font-size: 16px; line-height: 1; padding: 3px 6px;
  color: var(--paper-text-soft);
}
.ref-search-clear:hover { color: var(--paper-text); }
.ref-search-count {
  font-size: 11px; color: var(--paper-text-soft); white-space: nowrap; min-width: 60px;
}

/* Reference list (left) + detail (right) */
.bible-gallery {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  overflow-y: auto;
  border-right: 1px solid var(--ink-600);
  background: var(--ink-800);
}
/* When nothing is selected there's no detail panel taking space, so let the list grow to fill it. */
.bible-layout.no-detail .bible-gallery { flex: 1 1 auto; width: auto !important; max-width: none; }
.bible-layout.no-detail #bibleGalleryResizer { display: none; }

.bible-card {
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 7px 8px;
}
.bible-card:hover {
  border-color: var(--ink-600);
  background: var(--ink-700);
}
.bible-card.active { border-color: var(--brass); background: var(--ink-700); }

.bible-card-img {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 6px;
  background: var(--ink-700);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.bible-card-img img { width: 100%; height: 100%; object-fit: cover; }
.bible-card-noimg { font-size: 16px; color: var(--ink-600); }

.bible-card-text { min-width: 0; flex: 1; }
.bible-card-title {
  padding: 0; font-family: var(--font-display);
  font-weight: 600; font-size: 13.5px; color: var(--cream-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bible-card.active .bible-card-title { color: var(--brass); }
.bible-card-tagline {
  padding: 0; font-size: 11px; color: var(--paper-text-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal;
}
.bible-card-snippet {
  padding: 2px 0 0; font-size: 11px; line-height: 1.35; color: var(--paper-text-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.bible-empty { padding: 20px 4px; font-size: 12.5px; color: var(--paper-text-soft); }

/* Search-hit highlighting — used by both the reference-bible search and
   anywhere else that needs a "Ctrl+F just found this" visual cue. */
mark.search-mark {
  background: var(--brass, #b8925a); color: var(--ink-900, #1a1613);
  border-radius: 2px; padding: 0 1px;
}
.search-hit-flash { animation: searchHitFlash 1.6s ease-out; }
@keyframes searchHitFlash {
  0%   { background-color: var(--brass, #b8925a); }
  100% { background-color: transparent; }
}

/* Thumbnail (grid) view */
.bible-gallery.view-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  align-content: start;
}
.bible-gallery.view-grid .bible-card {
  flex-direction: column; text-align: center; gap: 6px; padding: 8px 6px;
}
.bible-gallery.view-grid .bible-card-img { width: 100%; height: 64px; border-radius: 6px; }
.bible-gallery.view-grid .bible-card-text { width: 100%; }
.bible-gallery.view-grid .bible-card-title,
.bible-gallery.view-grid .bible-card-tagline { white-space: normal; }
.bible-gallery.view-grid .bible-card-tagline { display: none; }



/* ---------- Mobile / Tablet Adaptations (Up to 1024px) ---------- */
@media (max-width: 1024px) {
  /* The binder's "+" (New Scene / New Folder / Import Word) menu opens to
     the RIGHT of its trigger by default (base .dropdown-menu rule) — fine
     on desktop where the editor pane gives it room, but on mobile the
     binder panel takes the full viewport width, so opening rightward runs
     the menu straight off the edge of the screen.
     Anchored to .binder-head (not .binder-add, the tiny wrapper around just
     the + button) so the menu's width always matches the drawer's current
     width, however far it's been resized — anchoring to the + button left
     too little room between the button and the drawer's left edge whenever
     the drawer was narrower than the menu's natural width. .binder-add
     itself is knocked back to position:static so it stops being the
     containing block .dropdown-menu's position:absolute resolves against. */
  .binder-head { position: relative; }
  .binder-add.dropdown { position: static; }
  .binder-add .dropdown-menu {
    left: 8px;
    right: 8px;
    top: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  /* Ribbon overrides */
  .ribbon {
    position: relative; /* so .ribbon-actions below can anchor to top:100% */
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    height: auto;
    gap: 0;
  }
  /* .ribbon-row goes from invisible (display:contents, desktop) to a real
     flex row here — each becomes one full-width line, giving the title
     and the tab strip their own dedicated rows instead of squeezing both
     into one 60px-tall line. */
  .ribbon-row {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .ribbon-row-title {
    padding: 8px 0;
    gap: 8px;
  }
  .ribbon-row-tabs {
    gap: 4px;
  }

  .ribbon-brand {
    min-width: 0;
    flex: 1 1 auto;
  }
  .brand-mark { display: none; }
  .brand-name {
    font-size: 15px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .view-tabs {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth; /* enables smooth sliding with arrows */
    flex: 1; /* Squeezes flexibly between the left/right menu toggles */
    scrollbar-width: none;
  }
  .view-tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 12px 14px 10px; flex-shrink: 0; font-size: 14px; }
  
  /* Show the scroll arrows - lowered and smaller */
  .tab-scroll-btn {
    display: flex;
    align-items: flex-end; /* Push lower toward tab bottom */
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--cream-ink);
    opacity: .6;
    font-size: 20px; /* smaller arrows */
    padding: 0 4px; /* pad bottom to align perfectly with tabs */
    cursor: pointer;
    z-index: 10;
  }
  .tab-scroll-btn:hover { color: var(--brass); opacity: 1; }

  /* Mobile Hamburger for Binder */
  .mobile-menu-btn {
    display: block;
    background: transparent;
    border: none;
    color: var(--cream-ink);
    font-size: 24px;
    padding: 8px 4px;
    cursor: pointer;
  }
  /* Corkboard and Threads hide the binder entirely (it's not relevant to
     those freeform views) — hiding the hamburger too means there's nothing
     to tap that would silently do nothing, which otherwise looks broken
     rather than intentional. */
  .app.binder-hidden .mobile-menu-btn {
    display: none;
  }
  
  /* Mobile Kebab Toggle for Settings */
  .mobile-actions-btn {
    display: block;
    background: transparent;
    border: none;
    color: var(--cream-ink);
    font-size: 24px;
    padding: 8px 4px;
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
  }

  /* Ribbon Actions converted to an absolute floating menu on mobile/tablet.
     body has overflow:hidden (see base rules), so this popup is the only
     way to reach File/Tools/View/Cloud on small screens — if it grows
     taller than the viewport (e.g. the View submenu expands inline with
     its full theme list) there's no page scroll to fall back on, and
     anything below the expanded submenu — Cloud, in particular — ends up
     rendered off-screen with no way to reach it. Capping the height and
     scrolling internally keeps every item reachable regardless of which
     submenu is open. */
  .ribbon-actions {
    display: none;
    position: absolute;
    top: 100%;
    margin-top: 4px;
    right: 12px;
    background: var(--ink-800);
    border: 1px solid var(--ink-600);
    border-radius: var(--radius);
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    gap: 8px;
    z-index: 200;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
  }
  
  .ribbon-actions.open {
    display: flex;
  }
  
  .ribbon-actions .save-indicator {
    text-align: center;
    margin: 0 0 4px 0;
  }
  
  .ribbon-actions .ghost-btn {
    width: 100%;
    text-align: left;
  }
  
  /* Make transfer dropdown play nice inside the mobile popup menu */
  .ribbon-actions .dropdown {
    width: 100%;
  }
  .ribbon-actions .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--ink-600);
    border-radius: 0;
    margin-left: 8px;
    background: transparent;
  }
  
  /* Binder Off-canvas */
  .binder {
    position: absolute;
    z-index: 100;
    left: -300px;
    width: 280px;
    height: 100%;
    transition: left 0.3s ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.5);
  }
  .binder.open { left: 0; }
  
  /* Editor adjustments */
  .editor-toolbar { padding: 16px 20px 0; flex-wrap: wrap; gap: 12px; }
  .doc-title { width: 100%; font-size: 22px; }
  .editor-surface { margin: 16px 20px 0; font-size: 16px; line-height: 1.6; }
  
  /* Slide-over panels (AI, Ref) */
  .ai-panel, .ref-panel {
    position: absolute;
    z-index: 101;
    right: -100%;
    width: 85vw;
    max-width: 380px;
    height: 100%;
    transition: right 0.3s ease;
    box-shadow: -4px 0 16px rgba(0,0,0,0.5);
  }
  .ai-panel.open, .ref-panel.open { right: 0; }
  
  .resizer { display: none !important; }
  #bibleGalleryResizer { display: block !important; }
  .modal { width: 92vw; padding: 20px; }
  .canvas-board { overflow: auto; }

  /* Reference tab keeps its resizable list+detail split on mobile too — just give the
     list a touch-friendly default width so both panels stay reachable. */
  .bible-gallery { max-width: 68vw; }
  .bible-layout.no-detail .bible-gallery { max-width: none; }
  .bible-detail { padding: 16px 20px 20px; }

  /* Reference Library toolbar: on desktop this fits Reference Library /
     search / List toggle / Import / New Entry on one line just fine, but
     on mobile that same row ran the Import and New Entry buttons off the
     right edge entirely. Wrapping keeps every control reachable instead
     of silently clipping the last one or two. */
  .bible-toolbar-row {
    flex-wrap: wrap;
    padding: 14px 16px 0;
    gap: 8px;
  }
  .bible-toolbar-title { width: 100%; }
  .ref-search-wrap { flex: 1 1 auto; min-width: 0; }
  #bibleViewToggle { min-width: 118px; text-align: center; }

  /* Threads (graph) view: .graph-inspector's 260px fixed width is a
     reasonable narrow sidebar on desktop, but on a ~400px-wide phone it
     ate most of the screen and squeezed the actual graph canvas — the
     main content — into a sliver, with no way to resize either panel.
     Stacking them (canvas on top, inspector below as its own scrollable
     panel) gives the graph real room and keeps the link list reachable
     by scrolling underneath instead of splitting a narrow screen in half
     the wrong way. */
  .graph-layout { flex-direction: column; }
  .graph-canvas-wrap {
    flex: 0 0 auto;
    height: 42vh; /* fixed vh instead of a % flex-basis, which rendered unpredictably tall in a column flex context — vh sizes reliably regardless of the ancestor chain's own (implicit) height */
    min-height: 220px;
    max-height: 420px;
  }
  .graph-inspector {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    border-left: none;
    border-top: 1px solid var(--ink-700);
  }

}

@media (min-width: 1025px) {
  .mobile-menu-btn { display: none; }
  .mobile-actions-btn { display: none; }
  .tab-scroll-btn { display: none; }
  #binderAddMenu { min-width: 230px; }
}

/* ---------- Formatting toolbar (bold/italic/undo/redo) ---------- */
.format-toolbar{
  display:flex;align-items:center;gap:4px;
  padding:6px 40px 0;flex-shrink:0;
}
.fmt-btn{
  background:var(--ink-800);border:1px solid var(--ink-600);color:var(--cream-ink);
  font-size:13px;width:28px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.fmt-btn:hover{border-color:var(--brass);color:var(--brass);}
.fmt-btn.active{background:var(--brass);color:var(--ink-900);border-color:var(--brass);}
.fmt-btn:disabled{opacity:.35;cursor:default;}
.fmt-btn:disabled:hover{border-color:var(--ink-600);color:var(--cream-ink);}
.fmt-sep{width:1px;height:18px;background:var(--ink-600);margin:0 4px;}
.app.focus-mode .format-toolbar{max-width:720px;margin:0 auto;padding:6px 0 0;}

/* ---------- Word-count goal progress bars ---------- */
.goal-track{
  position:relative;width:120px;height:16px;
  background:var(--ink-700);border-radius:8px;overflow:hidden;
  border:1px solid var(--ink-600);
}
.goal-track-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;
  background:var(--brass);transition:width .25s ease;
}
.goal-track-label{
  position:relative;z-index:1;display:block;text-align:center;
  font-size:10px;line-height:14px;color:var(--cream-ink);mix-blend-mode:difference;
}

/* ---------- Startup loading gate ---------- */
/* Shown while project data loads from IndexedDB (see app.js bootstrap).
   Without this, the binder/editor are clickable and typeable for the brief
   window before the real project replaces the empty placeholder — any typing
   or edits made in that window get silently discarded when the real data
   swaps in. This blocks interaction and gives the person something to look
   at instead, until app.js removes it at the end of init(). */
.app-loading-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-900);color:var(--paper-text-soft);
  font-family:var(--font-ui);font-size:14px;letter-spacing:.02em;
}
.app-loading-gate p{margin:0;opacity:.8;}