/* builder.css — three-pane workspace shell and component styles.
   Depends on tokens.css. */

/* ================================================================
   TOPBAR
   ================================================================ */
.bx-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  height:calc(56px + env(safe-area-inset-top,0));
  padding:env(safe-area-inset-top,0) var(--s-4) 0;
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
  flex-shrink:0;
}
.builder-body{overflow-x:hidden}
.bx-home-btn{text-decoration:none;font-size:1.2rem;line-height:1}
.bx-tb-l,.bx-tb-r{display:flex;align-items:center;gap:var(--s-2);flex-shrink:0}
.bx-tb-c{display:flex;align-items:center;gap:var(--s-4);flex:1;min-width:0;justify-content:center}

.bx-brand{font-weight:600;font-size:var(--t-md);color:var(--ink);letter-spacing:-0.01em;display:flex;align-items:center;gap:var(--s-2)}
.bx-logo{color:var(--accent);font-size:1.2em}
.bx-back{font-size:var(--t-sm);color:var(--ink-3);padding:6px 10px;border-radius:var(--r-sm);transition:background var(--dur-1)}
.bx-back:hover{background:var(--surface-2);color:var(--ink)}

.bx-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:1.3rem;line-height:1;
  transition:background var(--dur-1),color var(--dur-1);
}
.bx-icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.bx-icon-btn:active{background:var(--surface-3)}
/* Quick-jump ⌕ glyph is optically smaller than the other icons; extra bump. */
.bx-icon-btn#btnQuickJump{font-size:1.55rem;font-weight:600}

/* Mode toggle */
.bx-mode{display:inline-flex;background:var(--surface-2);border-radius:var(--r-pill);padding:3px;gap:0}
.bx-mode-btn{
  padding:6px 14px;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;color:var(--ink-3);
  transition:background var(--dur-1),color var(--dur-1);
}
.bx-mode-btn.active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
.bx-mode-btn:hover:not(.active){color:var(--ink-2)}

/* Title */
.bx-title-wrap{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:420px;flex:1}
.bx-title-input{
  background:transparent;border:none;outline:none;
  font-family:var(--font-sans);font-size:var(--t-lg);font-weight:600;
  color:var(--ink);width:100%;padding:2px 4px;letter-spacing:-0.01em;
  border-radius:var(--r-sm);
}
.bx-title-input::placeholder{color:var(--ink-muted);font-weight:500}
.bx-title-input:focus{background:var(--surface-2)}
.bx-title-meta{display:flex;gap:6px;font-size:var(--t-xs);color:var(--ink-3);padding:0 4px}
.bx-dot{opacity:.5}
.bx-saved{color:var(--ink-3);transition:color var(--dur-2)}
.bx-saved.dirty{color:var(--accent)}

/* ================================================================
   MAIN LAYOUT — 3 panes
   ================================================================ */
.bx-main{
  display:grid;
  grid-template-columns:280px 1fr 320px;
  height:calc(100vh - 56px);
  min-height:0;
}

.bx-rail{
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.bx-right{border-right:none;border-left:1px solid var(--border)}

/* -------- LEFT RAIL: outline -------- */
.bx-rail-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4) var(--s-4) var(--s-2);
}
.bx-rail-title{
  font-size:var(--t-xs);font-weight:600;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase;
}
.bx-mini{
  width:26px;height:26px;border-radius:var(--r-sm);
  color:var(--ink-3);font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1);
}
.bx-mini:hover{background:var(--surface-2);color:var(--ink)}

.bx-doc-meta{
  padding:0 var(--s-4) var(--s-3);
  border-bottom:1px solid var(--border);margin-bottom:var(--s-2);
}
.bx-doc-row{display:flex;align-items:center;gap:var(--s-2);padding:4px 0}
.bx-doc-row label{
  flex:0 0 62px;font-size:var(--t-xs);font-weight:500;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em;
}
.bx-doc-row input{
  flex:1;background:transparent;border:none;outline:none;padding:4px 6px;
  font-size:var(--t-sm);color:var(--ink);border-radius:var(--r-sm);
  transition:background var(--dur-1);min-width:0;
}
.bx-doc-row input:hover{background:var(--surface-2)}
.bx-doc-row input:focus{background:var(--surface-2);box-shadow:var(--focus)}

.bx-outline{flex:1;overflow-y:auto;padding:var(--s-2);min-height:0}
.bx-sec-item{
  display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:2px;
  border-radius:var(--r-sm);cursor:pointer;user-select:none;
  transition:background var(--dur-1);position:relative;
}
.bx-sec-item:hover{background:var(--surface-2)}
.bx-sec-item.active{background:var(--accent-tint);color:var(--ink)}
.bx-sec-item.active::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--accent);border-radius:2px;
}
.bx-sec-drag{color:var(--ink-muted);font-size:.7rem;cursor:grab;flex-shrink:0;opacity:0;transition:opacity var(--dur-1)}
.bx-sec-item:hover .bx-sec-drag,.bx-sec-item.active .bx-sec-drag{opacity:1}
.bx-sec-drag:active{cursor:grabbing}
.bx-sec-kind{
  font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-muted);flex-shrink:0;padding:2px 6px;
  background:var(--surface-2);border-radius:var(--r-xs);
}
.bx-sec-item.active .bx-sec-kind{background:var(--surface);color:var(--accent)}
.bx-sec-title{flex:1;font-size:var(--t-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-sec-item.active .bx-sec-title{font-weight:500}
.bx-sec-actions{display:none;gap:4px}
.bx-sec-item:hover .bx-sec-actions,.bx-sec-item.active .bx-sec-actions{display:flex}
.bx-sec-actions button{
  width:22px;height:22px;border-radius:var(--r-xs);
  color:var(--ink-muted);font-size:.85rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.bx-sec-actions button:hover{background:var(--surface);color:var(--ink)}

.bx-sec-placeholder{padding:24px 12px;color:var(--ink-muted);font-size:var(--t-sm);text-align:center;font-style:italic}

.bx-rail-foot{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border)}
.bx-tmpl-btn{
  width:100%;padding:10px 12px;border-radius:var(--r-md);
  background:var(--surface-2);color:var(--ink);border:1px dashed var(--border-strong);
  font-size:var(--t-sm);font-weight:500;
  transition:background var(--dur-1),border-color var(--dur-1);
}
.bx-tmpl-btn:hover{background:var(--surface-3);border-color:var(--accent)}

/* -------- CENTER: editor -------- */
.bx-editor{
  overflow-y:auto;background:var(--bg);
  padding:var(--s-8) var(--s-6);
  min-width:0;
}
.bx-editor-inner{
  max-width:720px;margin:0 auto;padding:0 var(--s-4);
}

.bx-sec-block{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);margin-bottom:var(--s-6);box-shadow:var(--shadow-1);
  transition:border-color var(--dur-2),box-shadow var(--dur-2);
}
.bx-sec-block:focus-within{border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.bx-sec-block.flash{animation:bxFlash .9s ease}
@keyframes bxFlash{0%,100%{box-shadow:var(--shadow-1)}30%{box-shadow:0 0 0 3px var(--accent-tint), var(--shadow-2)}}
.bx-sec-head{
  display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4);
}
.bx-sec-tag{
  font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);padding:3px 8px;background:var(--accent-tint);border-radius:var(--r-xs);
}
.bx-sec-title-in{
  flex:1;background:transparent;border:none;outline:none;
  font-family:var(--font-serif);font-size:var(--t-xl);font-weight:600;color:var(--ink);
  padding:2px 4px;border-radius:var(--r-sm);
}
.bx-sec-title-in:focus{background:var(--surface-2)}
.bx-sec-block-actions{display:flex;gap:2px}
.bx-sec-block-actions button{
  width:28px;height:28px;border-radius:var(--r-sm);color:var(--ink-3);
  display:inline-flex;align-items:center;justify-content:center;font-size:.9rem;
  transition:background var(--dur-1),color var(--dur-1);
}
.bx-sec-block-actions button:hover{background:var(--surface-2);color:var(--ink)}

.bx-notes{
  width:100%;min-height:120px;background:transparent;border:none;outline:none;
  font-family:var(--font-serif);font-size:var(--t-md);line-height:1.75;color:var(--ink);
  resize:vertical;padding:8px 4px;border-radius:var(--r-sm);
}
.bx-notes:focus{background:var(--surface-2)}
.bx-notes::placeholder{color:var(--ink-muted);font-style:italic}

/* Verse chips inside a section */
.bx-verses{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2)}
.bx-verse-chip{
  display:flex;align-items:flex-start;gap:var(--s-2);padding:10px 12px;
  background:var(--surface-2);border-left:3px solid var(--accent);border-radius:var(--r-sm);
  font-size:var(--t-sm);line-height:1.55;
}
.bx-verse-chip-ref{font-weight:600;color:var(--accent);flex-shrink:0;font-family:var(--font-sans);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.bx-verse-chip-txt{flex:1;font-family:var(--font-scripture);color:var(--ink)}
.bx-verse-chip-actions{display:flex;gap:2px;flex-shrink:0}
.bx-verse-chip-actions button{
  width:24px;height:24px;border-radius:var(--r-xs);color:var(--ink-muted);
  display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;
}
.bx-verse-chip-actions button:hover{background:var(--surface);color:var(--accent)}

.bx-add-verse{
  display:flex;gap:var(--s-2);margin-top:var(--s-3);
  padding:8px 10px;background:var(--surface-2);border:1px dashed var(--border);
  border-radius:var(--r-sm);
}
.bx-add-verse input{
  flex:1;background:transparent;border:none;outline:none;font-size:var(--t-sm);color:var(--ink);
}
.bx-add-verse button{
  padding:4px 10px;background:var(--accent);color:#fff;border-radius:var(--r-xs);
  font-size:var(--t-xs);font-weight:600;
}
.bx-add-verse button:hover{background:var(--accent-hover)}

/* Empty state */
.bx-empty{
  max-width:520px;margin:80px auto;padding:var(--s-8);text-align:center;
}
.bx-empty h2{font-family:var(--font-serif);font-weight:500;font-size:var(--t-2xl);margin:0 0 var(--s-2);color:var(--ink)}
.bx-empty p{color:var(--ink-3);font-size:var(--t-md);margin:0 0 var(--s-6)}
.bx-empty-actions{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap}
.bx-btn-primary{
  padding:10px 18px;background:var(--accent);color:#fff;border-radius:var(--r-md);
  font-weight:500;font-size:var(--t-sm);
  transition:background var(--dur-1);
}
.bx-btn-primary:hover{background:var(--accent-hover)}
.bx-btn-secondary{
  padding:10px 18px;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:var(--r-md);
  font-weight:500;font-size:var(--t-sm);
  transition:background var(--dur-1),border-color var(--dur-1);
}
.bx-btn-secondary:hover{background:var(--surface-2);border-color:var(--border-strong)}

/* -------- RIGHT RAIL: tools -------- */
.bx-rail-tabs{
  display:flex;padding:var(--s-2);gap:2px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.bx-tab{
  flex:1;padding:8px 4px;border-radius:var(--r-sm);
  font-size:var(--t-xs);font-weight:500;color:var(--ink-3);
  transition:background var(--dur-1),color var(--dur-1);
  text-transform:uppercase;letter-spacing:.05em;
}
.bx-tab:hover{background:var(--surface-2);color:var(--ink-2)}
.bx-tab.active{background:var(--accent-tint);color:var(--accent)}
.bx-tab{position:relative}
.bx-tab-badge{position:absolute;top:2px;right:4px;background:var(--accent);color:#fff;border-radius:9px;font-size:.58rem;font-weight:700;line-height:1;padding:2px 5px;min-width:14px;text-align:center}
/* Accessibility helper for SEO h1s that should not be visible on screen. Placed
   here because the builder does not include hub-chrome.css. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Tray quick-add row: input flexes, button sits snugly beside it. Override the
   default .bx-rail-btn width:100% so the button doesn't blow out the row. */
.bx-tray-addrow{display:flex;gap:6px;margin:10px 0 12px;align-items:stretch}
.bx-tray-addrow .bx-rail-input{flex:1 1 auto;margin:0;min-width:0}
.bx-tray-addrow .bx-rail-btn{margin:0;padding:8px 14px;white-space:nowrap;flex:0 0 auto;width:auto}
.bx-tray-src{display:inline-block;margin-left:6px;font-size:.6rem;color:var(--ink-3);background:var(--surface-2);border-radius:4px;padding:1px 6px;font-weight:500;letter-spacing:.02em;text-transform:none;vertical-align:middle}

/* Section picker (used when adding tray items to a doc with multiple sections) */
.bx-secpick{display:flex;flex-direction:column;gap:6px}
.bx-secpick-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;background:var(--surface);transition:border-color var(--dur-1),background var(--dur-1),box-shadow var(--dur-1);min-height:56px}
.bx-secpick-item:hover{border-color:var(--accent);background:var(--accent-tint);box-shadow:var(--shadow-1)}
.bx-secpick-item.active{border-color:var(--accent);background:var(--accent-tint)}
.bx-secpick-num{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink-2);border-radius:50%;font-weight:600;font-size:var(--t-sm)}
.bx-secpick-item.active .bx-secpick-num,.bx-secpick-item:hover .bx-secpick-num{background:var(--accent);color:#fff}
.bx-secpick-main{flex:1;min-width:0}
.bx-secpick-title{font-weight:600;color:var(--ink);font-size:var(--t-sm);line-height:1.3}
.bx-secpick-meta{font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
.bx-rail-body{flex:1;overflow-y:auto;padding:var(--s-4);min-height:0}

.bx-tray-empty{color:var(--ink-3);font-size:var(--t-sm);text-align:center;padding:32px 12px;font-style:italic}
.bx-tray-item{
  padding:10px 12px;background:var(--surface-2);border-radius:var(--r-sm);
  margin-bottom:var(--s-2);font-size:var(--t-sm);
  border-left:3px solid var(--accent);
  cursor:pointer;transition:background var(--dur-1);
}
.bx-tray-item:hover{background:var(--surface-3)}
.bx-tray-item .ref{font-weight:600;color:var(--accent);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:4px}
.bx-tray-item .txt{font-family:var(--font-scripture);color:var(--ink);line-height:1.5}
.bx-tray-item .row{display:flex;gap:6px;margin-top:8px}
.bx-tray-item .row button{
  padding:4px 8px;background:var(--surface);color:var(--ink-2);border:1px solid var(--border);
  border-radius:var(--r-xs);font-size:.7rem;
}
.bx-tray-item .row button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

.bx-rail-input{
  width:100%;padding:9px 12px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:var(--t-sm);color:var(--ink);outline:none;margin-bottom:var(--s-3);
}
.bx-rail-input:focus{border-color:var(--accent);box-shadow:var(--focus)}
.bx-rail-btn{
  padding:9px 14px;background:var(--accent);color:#fff;
  border-radius:var(--r-sm);font-size:var(--t-sm);font-weight:500;
  width:100%;margin-top:6px;
}
.bx-rail-btn:hover{background:var(--accent-hover)}
.bx-rail-btn.secondary{background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.bx-rail-btn.secondary:hover{background:var(--surface-3)}

.bx-hint{
  font-size:var(--t-xs);color:var(--ink-3);padding:8px 10px;
  background:var(--surface-2);border-radius:var(--r-sm);line-height:1.5;
  margin-bottom:var(--s-3);
}

/* ================================================================
   MODAL / TOAST
   ================================================================ */
.bx-modal-root{position:fixed;inset:0;z-index:200;pointer-events:none}
.bx-modal-backdrop{
  position:absolute;inset:0;background:rgba(20,19,16,.5);
  opacity:0;transition:opacity var(--dur-2);pointer-events:auto;
}
.bx-modal-backdrop.open{opacity:1}
.bx-modal{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.98);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);pointer-events:auto;
  max-width:min(680px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 32px));
  overflow:hidden;display:flex;flex-direction:column;
  opacity:0;transition:opacity var(--dur-2),transform var(--dur-2);
  width:100%;
}
.bx-modal.open{opacity:1;transform:translate(-50%,-50%) scale(1)}
.bx-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--border);flex-shrink:0;
}
.bx-modal-head h3{margin:0;font-size:var(--t-lg);font-weight:600;color:var(--ink)}
.bx-modal-close{width:32px;height:32px;border-radius:var(--r-sm);color:var(--ink-3);font-size:1rem;display:inline-flex;align-items:center;justify-content:center}
.bx-modal-close:hover{background:var(--surface-2);color:var(--ink)}
.bx-modal-body{padding:var(--s-5);overflow-y:auto;flex:1}
.bx-modal-foot{padding:var(--s-4) var(--s-5);border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:var(--s-2);flex-shrink:0}

.bx-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--n800);color:#fff;padding:10px 18px;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:500;box-shadow:var(--shadow-2);z-index:300;
  opacity:0;transition:opacity var(--dur-2),transform var(--dur-2);pointer-events:none;
}
body.theme-dark .bx-toast{background:var(--n100);color:var(--n800)}
.bx-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================================================================
   TEMPLATE PICKER
   ================================================================ */
.bx-tmpl-cat{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600;margin:var(--s-4) 0 var(--s-2)}
.bx-tmpl-cat:first-child{margin-top:0}
.bx-tmpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s-3)}
.bx-tmpl-card{
  padding:var(--s-4);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);
  cursor:pointer;transition:background var(--dur-1),border-color var(--dur-1),transform var(--dur-1);
}
.bx-tmpl-card:hover{background:var(--surface-3);border-color:var(--accent);transform:translateY(-1px)}
.bx-tmpl-name{font-weight:600;font-size:var(--t-sm);margin-bottom:4px;color:var(--ink)}
.bx-tmpl-desc{font-size:var(--t-xs);color:var(--ink-3);line-height:1.5}

/* ================================================================
   LIBRARY (saved docs)
   ================================================================ */
.bx-lib-search{
  width:100%;padding:10px 14px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--r-md);font-size:var(--t-md);color:var(--ink);outline:none;margin-bottom:var(--s-4);
}
.bx-lib-search:focus{border-color:var(--accent);box-shadow:var(--focus)}
.bx-lib-list{display:flex;flex-direction:column;gap:var(--s-1)}
.bx-lib-item{
  display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3);
  border-radius:var(--r-md);cursor:pointer;transition:background var(--dur-1);
}
.bx-lib-item:hover{background:var(--surface-2)}
.bx-lib-item.active{background:var(--accent-tint)}
.bx-lib-kind-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;
}
.bx-lib-kind-dot.study{background:#4b7c96}
.bx-lib-item-body{flex:1;min-width:0}
.bx-lib-item-title{font-size:var(--t-sm);font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-lib-item-meta{font-size:var(--t-xs);color:var(--ink-3);margin-top:2px}
.bx-lib-item-actions{display:none;gap:2px}
.bx-lib-item:hover .bx-lib-item-actions{display:flex}
.bx-lib-item-actions button{width:24px;height:24px;border-radius:var(--r-xs);color:var(--ink-3);font-size:.8rem;display:inline-flex;align-items:center;justify-content:center}
.bx-lib-item-actions button:hover{background:var(--surface);color:var(--ink)}
.bx-lib-empty{color:var(--ink-3);font-size:var(--t-sm);text-align:center;padding:40px 12px;font-style:italic}

/* ================================================================
   VERSE HOVER PREVIEW
   ================================================================ */
.bx-vp-anchor{
  color:var(--accent);border-bottom:1px dotted rgba(122,31,43,.4);cursor:pointer;
  transition:background var(--dur-1);
}
.bx-vp-anchor:hover{background:var(--accent-tint)}
.bx-vp-pop{
  position:fixed;z-index:400;max-width:340px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-3);padding:12px 14px;font-size:var(--t-sm);
  opacity:0;transform:translateY(4px);transition:opacity var(--dur-1),transform var(--dur-1);
  pointer-events:none;
}
.bx-vp-pop.show{opacity:1;transform:translateY(0);pointer-events:auto}
.bx-vp-pop .ref{font-weight:600;color:var(--accent);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.bx-vp-pop .txt{font-family:var(--font-scripture);color:var(--ink);line-height:1.55}

/* ================================================================
   AUTOCOMPLETE dropdown
   ================================================================ */
.bx-ac{
  position:absolute;z-index:250;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);min-width:280px;max-width:400px;
  overflow:hidden;
}
.bx-ac-item{
  display:flex;align-items:flex-start;gap:10px;padding:9px 12px;cursor:pointer;
  transition:background var(--dur-1);
}
.bx-ac-item:hover,.bx-ac-item.active{background:var(--accent-tint)}
.bx-ac-ref{font-size:var(--t-xs);font-weight:600;color:var(--accent);flex-shrink:0;min-width:80px;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.bx-ac-txt{font-family:var(--font-scripture);font-size:var(--t-sm);color:var(--ink);line-height:1.4;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ================================================================
   RESPONSIVE
   ================================================================ */
.only-mobile{display:none}

@media(max-width:1100px){
  .bx-main{grid-template-columns:240px 1fr 280px}
}

/* ---------- TABLET / MOBILE (<= 840px) ---------- */
@media(max-width:840px){
  /* Show mobile-only chrome */
  .only-mobile{display:inline-flex}

  /* Sticky topbar with iOS safe-area */
  .bx-topbar{
    padding:0 12px;
    padding-top:env(safe-area-inset-top,0);
    height:calc(52px + env(safe-area-inset-top,0));
  }
  .bx-tb-c{gap:var(--s-2)}
  .bx-tb-l,.bx-tb-r{gap:2px}
  .bx-brand{display:none}
  .bx-back{display:none}

  /* Main becomes single column with absolute rails.
     Height accounts for the two-row mobile topbar (icons + mode/title row):
     ~52px icons + ~44px second row + safe-area. */
  .bx-main{
    grid-template-columns:1fr;position:relative;
    height:calc(100vh - 96px - env(safe-area-inset-top,0));
    height:calc(100dvh - 96px - env(safe-area-inset-top,0));
  }
  .bx-rail{
    position:absolute;top:0;bottom:0;width:min(88%,340px);z-index:20;
    background:var(--surface);box-shadow:var(--shadow-3);
    transform:translateX(-100%);transition:transform var(--dur-3) var(--ease);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .bx-left{left:0}
  .bx-right{left:auto;right:0;border-left:1px solid var(--border);border-right:none;transform:translateX(100%)}
  .bx-left.open{transform:translateX(0)}
  .bx-right.open{transform:translateX(0)}

  /* Editor: tighter padding, more breathable line-height for small screens */
  .bx-editor{padding:var(--s-4) 0;padding-bottom:calc(80px + env(safe-area-inset-bottom,0))}
  .bx-editor-inner{max-width:100%;padding:0 var(--s-4)}

  .bx-sec-block{padding:var(--s-4);margin-bottom:var(--s-4);border-radius:var(--r-md)}
  .bx-sec-head{flex-wrap:wrap;gap:6px}
  .bx-sec-title-in{font-size:var(--t-lg);width:100%;order:2}
  .bx-sec-tag{order:1}
  .bx-sec-block-actions{order:3;margin-left:auto}
  .bx-sec-block-actions button{width:36px;height:36px;font-size:1rem}

  /* Prevent iOS input zoom — must be ≥ 16px. Exclude .bx-title-input which
     sits in the compact second row of the mobile topbar and needs to be small
     enough not to blow out the row (it's not a primary tap target; the outline
     drawer has the same title input). */
  .bx-sec-title-in,.bx-notes,.bx-add-verse input,.bx-doc-row input,.bx-rail-input,.bx-lib-search{font-size:16px !important}

  /* Mobile topbar redesign: the top row is icons only. The center column
     (mode toggle + title + meta) drops onto its own row BELOW the topbar so
     nothing collides. Total topbar height ~96px + safe-area (used by .bx-main
     height calc above so the rail overlays don't spill under the topbar). */
  .bx-topbar{flex-wrap:wrap;height:auto;min-height:calc(96px + env(safe-area-inset-top,0));row-gap:0;padding-bottom:6px}
  .bx-tb-l,.bx-tb-r{height:52px}
  .bx-tb-c{order:3;flex-basis:100%;justify-content:flex-start;gap:var(--s-3);padding:6px 4px 2px;border-top:1px solid var(--border);margin-top:4px;flex-wrap:nowrap;align-items:center;height:auto}
  .bx-mode{flex:0 0 auto}
  .bx-title-wrap{max-width:none;flex:1 1 auto;min-width:0;text-align:left}
  .bx-title-input{font-size:14px;font-weight:600;text-align:left;padding:4px 6px}
  .bx-title-meta{font-size:.6rem;gap:4px;justify-content:flex-start;padding-left:6px}
  .bx-title-meta #metaTime{display:none}

  /* Bigger touch targets for topbar icon buttons */
  .bx-icon-btn{width:44px;height:44px;font-size:1.35rem}
  .bx-icon-btn#btnQuickJump{font-size:1.6rem}

  /* Mode toggle — smaller pills */
  .bx-mode-btn{padding:6px 10px;font-size:var(--t-xs)}

  /* Hide desktop-only extras but keep essentials */
  .bx-title-meta #metaSaved{max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Rail body slightly padded for finger reach */
  .bx-rail-body{padding:var(--s-3);padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0))}

  /* Outline items: taller, more touch-friendly */
  .bx-outline-item{padding:10px 10px;min-height:44px}
  .bx-outline-num{flex-basis:24px;height:24px}

  /* Doc meta rail: two-column labels for space */
  .bx-doc-meta{padding:0 var(--s-3) var(--s-3)}
  .bx-doc-row label{flex-basis:56px;font-size:.65rem}

  /* Verse chips: stack action buttons below on very narrow */
  .bx-verse-chip{flex-wrap:wrap;padding:10px 12px}
  .bx-verse-chip-txt{min-width:0;flex-basis:100%;order:2}
  .bx-verse-chip-ref{order:1}
  .bx-verse-chip-actions{order:3;flex-basis:100%;justify-content:flex-end;margin-top:4px}
  .bx-verse-chip-actions button{width:32px;height:32px;font-size:.9rem}

  /* Add-verse: stack input + button vertically on tight screens */
  .bx-add-verse{flex-wrap:wrap}
  .bx-add-verse input{min-width:0;flex:1 1 200px}
  .bx-add-verse button{padding:8px 16px;min-height:38px}

  /* Modal: nearly full-screen on mobile */
  .bx-modal{
    max-width:calc(100vw - 16px);width:calc(100vw - 16px);
    max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
    top:12px;left:12px;transform:translate(0,0) scale(.98);
  }
  .bx-modal.open{transform:translate(0,0) scale(1)}
  .bx-modal-body{padding:var(--s-4)}
  .bx-modal-head,.bx-modal-foot{padding:var(--s-3) var(--s-4)}
  .bx-modal-foot{flex-wrap:wrap}
  .bx-modal-btn{padding:10px 14px;min-height:40px;flex:1 1 auto}

  /* Template grid: single-col tiles */
  .bx-tmpl-grid{grid-template-columns:1fr}
  .bx-tmpl-card{padding:var(--s-3)}

  /* Library items: no hover-hide of actions on touch */
  .bx-lib-item-actions{display:flex !important}
  .bx-lib-item-actions button{width:32px;height:32px}
  .bx-lib-item{padding:var(--s-3);min-height:56px}

  /* Right-rail tabs: larger tap area */
  .bx-tab{padding:11px 4px;font-size:.7rem}
  .bx-rail-tabs{gap:0}

  /* Toast lifted above safe area */
  .bx-toast{bottom:calc(20px + env(safe-area-inset-bottom,0))}

  /* Autocomplete: constrain to viewport */
  .bx-ac{max-width:calc(100vw - 24px);min-width:0;width:calc(100vw - 24px);left:12px !important}
}

/* ---------- PHONE (<= 520px) ---------- */
@media(max-width:520px){
  .bx-topbar{padding:0 6px;gap:4px}
  .bx-mode-btn{padding:5px 8px;font-size:.68rem}
  .bx-mode{padding:2px}
  .bx-title-wrap{max-width:none;flex:1}
  .bx-title-meta #metaWords{display:none}
  .bx-sec-block{padding:var(--s-3) var(--s-3);margin-bottom:var(--s-3)}
  .bx-sec-block-actions button{width:34px;height:34px}
  .bx-notes{font-size:16px;min-height:100px;line-height:1.7}
  .bx-icon-btn{width:40px;height:40px;font-size:1.25rem}
  .bx-icon-btn#btnQuickJump{font-size:1.5rem}
  .bx-editor-inner{padding:0 var(--s-3)}

  /* Two-icon max on left of topbar, three on right */
  #btnSnapshot{display:none}   /* accessible via Library menu anyway */
}

/* ---------- PHONE PORTRAIT VERY NARROW (<= 380px) ---------- */
@media(max-width:380px){
  .bx-mode-btn{padding:4px 6px;font-size:.62rem}
  .bx-title-meta{display:none}
  .bx-sec-tag{font-size:.58rem;padding:2px 5px}
  .bx-sec-title-in{font-size:var(--t-md)}
}

/* ---------- Landscape short height (avoid keyboard clipping) ---------- */
@media(max-height:520px) and (max-width:840px){
  .bx-modal{max-height:calc(100vh - 12px);top:6px;left:6px;max-width:calc(100vw - 12px);width:calc(100vw - 12px)}
  .bx-modal-body{padding:var(--s-3)}
}

/* Backdrop for mobile rails */
.bx-rail-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:15;
  opacity:0;transition:opacity var(--dur-2);pointer-events:none;
}
.bx-rail-backdrop.open{opacity:1;pointer-events:auto}

/* ================================================================
   OUTLINE ITEMS (used by app.js refreshOutline)
   ================================================================ */
.bx-outline-item{
  display:flex;align-items:flex-start;gap:10px;padding:8px 10px;margin-bottom:2px;
  border-radius:var(--r-sm);cursor:pointer;user-select:none;
  transition:background var(--dur-1);position:relative;border-top:2px solid transparent;
}
.bx-outline-item:hover{background:var(--surface-2)}
.bx-outline-item.active{background:var(--accent-tint)}
.bx-outline-item.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--accent);border-radius:2px}
.bx-outline-item.dragging{opacity:.4}
.bx-outline-num{
  flex:0 0 22px;height:22px;border-radius:50%;background:var(--surface-2);
  color:var(--ink-3);font-size:.72rem;font-weight:600;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
}
.bx-outline-item.active .bx-outline-num{background:var(--accent);color:#fff}
.bx-outline-body{flex:1;min-width:0}
.bx-outline-item-title{font-size:var(--t-sm);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-outline-item.active .bx-outline-item-title{font-weight:500}
.bx-outline-item-meta{font-size:.68rem;color:var(--ink-3);margin-top:2px;text-transform:uppercase;letter-spacing:.03em}
.bx-outline-empty{color:var(--ink-muted);font-size:var(--t-sm);text-align:center;padding:32px 12px;font-style:italic}

/* ================================================================
   MODAL BUTTONS (used by BX_UI.openModal)
   ================================================================ */
.bx-modal-btn{
  padding:8px 16px;background:var(--surface);color:var(--ink);
  border:1px solid var(--border);border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:500;
  transition:background var(--dur-1),border-color var(--dur-1);
}
.bx-modal-btn:hover{background:var(--surface-2);border-color:var(--border-strong)}
.bx-modal-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.bx-modal-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.bx-modal-title{margin:0;font-size:var(--t-lg);font-weight:600;color:var(--ink)}

/* ================================================================
   SNAPSHOTS
   ================================================================ */
.bx-snap-list{display:flex;flex-direction:column;gap:var(--s-2)}
.bx-snap-item{
  padding:12px 14px;background:var(--surface-2);border-radius:var(--r-md);
  border-left:3px solid var(--accent);
}
.bx-snap-title{font-size:var(--t-sm);font-weight:500;color:var(--ink);margin-bottom:2px}
.bx-snap-meta{font-size:var(--t-xs);color:var(--ink-3);margin-bottom:8px}
.bx-snap-actions{display:flex;gap:6px}
.bx-snap-actions button{
  padding:4px 10px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xs);font-size:.72rem;color:var(--ink-2);
}
.bx-snap-actions button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}