/* /shared/hub-chrome.css — Site-wide chrome shared across all tools.
   Wave 4: frosted-glass topbar, tighter focus rings, smoother rail transitions.
   Depends on /shared/tokens.css. */

body.hub-body{
  background:var(--bg);color:var(--ink);
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;overflow-x:hidden;
}

/* ── Topbar ────────────────────────────────────────────────────── */
:root{--topbar-h:60px}
@media (max-width:840px){:root{--topbar-h:56px}}
@media (max-width:520px){:root{--topbar-h:52px}}
@media (max-width:380px){:root{--topbar-h:48px}}

.hub-topbar{
  display:flex;align-items:center;gap:var(--s-3);
  height:var(--topbar-h);
  padding:0 var(--s-5);
  padding-left:max(var(--s-5), env(safe-area-inset-left));
  padding-right:max(var(--s-5), env(safe-area-inset-right));
  /* Frosted glass effect — degrades gracefully to solid on browsers without backdrop-filter */
  background:rgba(var(--_bg-rgb, 250,250,250),.85);
  -webkit-backdrop-filter:var(--topbar-blur);
  backdrop-filter:var(--topbar-blur);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:9000;
  /* Ensure correct padding on notched devices */
  padding-top:env(safe-area-inset-top, 0px);
}
body.theme-dark .hub-topbar{
  background:rgba(17,17,17,.88);
}
/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .hub-topbar{background:var(--surface)!important}
}

.hub-tb-l,.hub-tb-r{display:flex;align-items:center;gap:var(--s-2);flex-wrap:nowrap;min-width:0}
.hub-tb-r{flex-shrink:0}
.hub-tb-r>*{flex-shrink:0}
.hub-tb-c{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-width:0}

/* Brand */
.hub-brand{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-serif);font-weight:600;color:var(--ink);font-size:var(--t-lg);
  padding:6px 10px;border-radius:var(--r-md);
  transition:background var(--dur-1);
}
.hub-brand:hover{background:var(--surface-2)}
.hub-brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* Icon buttons */
.hub-icon-btn{
  width:38px;height:38px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:1.3rem;line-height:1;
  transition:background var(--dur-1),color var(--dur-1);
}
.hub-icon-btn:hover{background:var(--surface-2);color:var(--ink)}
.hub-icon-btn.active{background:var(--accent-tint);color:var(--accent)}
.hub-icon-btn > svg{display:inline-block;vertical-align:middle;flex-shrink:0;margin:1px}
.hub-icon-btn{display:inline-flex;align-items:center;justify-content:center}

.hub-icon-btn.hub-qj-center,
.hub-icon-btn[data-quickjump],
.hub-icon-btn#btnQuickJump{font-size:1.5rem;font-weight:600}
.hub-home-btn{font-size:1.3rem}

/* Brand mark */
.hub-brand-mark{
  display:inline-flex;align-items:center;gap:8px;padding:4px 10px;
  border-radius:var(--r-md);border:1px solid transparent;background:transparent;
  font-family:var(--font-serif);font-weight:600;font-size:var(--t-md);
  color:var(--ink);letter-spacing:-.005em;line-height:1;cursor:pointer;
  transition:border-color var(--dur-1),background var(--dur-1);
}
.hub-brand-mark:hover{background:var(--surface-2)}
.hub-brand-mark .hub-brand-glyph{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;font-family:var(--font-sans);font-size:1rem;
  color:var(--accent);flex-shrink:0;line-height:1;
}
.hub-brand-mark .hub-brand-name{white-space:nowrap;font-weight:600}
.hub-home-btn{color:var(--ink-2);font-size:1.3rem;line-height:1}
.hub-home-btn:hover{color:var(--accent)}

.hub-title{
  font-family:var(--font-serif);font-size:var(--t-md);color:var(--ink);
  font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw;
}
.hub-title-sub{color:var(--ink-3);font-size:var(--t-sm);margin-left:6px}

@media (max-width:640px){
  .hub-brand-mark{padding:2px 6px;font-size:var(--t-sm);gap:6px}
  .hub-brand-mark .hub-brand-glyph{width:20px;height:20px;font-size:.9rem}
}

/* ── Page layout ───────────────────────────────────────────────── */
.hub-main{flex:1;min-height:0;display:grid;grid-template-columns:280px 1fr 320px;overflow:hidden}
.hub-main.no-left{grid-template-columns:1fr 320px}
.hub-main.no-right{grid-template-columns:280px 1fr}
.hub-main.no-rails{grid-template-columns:1fr}
.leaflet-attribution-flag{width:12px;height:8px}

/* ── Rails ─────────────────────────────────────────────────────── */
.hub-rail{
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;
}
.hub-rail.right{border-right:none;border-left:1px solid var(--border)}
.hub-rail-head{
  padding:var(--s-4) var(--s-4) var(--s-3);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex-shrink:0;
}
.hub-rail-title{
  font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.hub-rail-body{flex:1;overflow-y:auto;padding:var(--s-4);min-height:0;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.hub-rail-foot{padding:var(--s-3) var(--s-4);border-top:1px solid var(--border);flex-shrink:0}
.hub-rail-tabs{
  display:flex;padding:var(--s-2);gap:2px;
  border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--surface);
}
.hub-tab{
  flex:1;padding:8px 4px;border-radius:var(--r-sm);position:relative;
  font-size:var(--t-xs);font-weight:600;color:var(--ink-3);
  transition:background var(--dur-1),color var(--dur-1);
  text-transform:uppercase;letter-spacing:.05em;
}
.hub-tab:hover{background:var(--surface-2);color:var(--ink-2)}
.hub-tab.active{background:var(--accent-tint);color:var(--accent)}
.hub-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;
}

/* ── Content area ──────────────────────────────────────────────── */
.hub-content{overflow-y:auto;background:var(--bg);min-width:0;position:relative;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.hub-content-inner{max-width:900px;margin:0 auto;padding:var(--s-8) var(--s-6)}
.hub-content-narrow{max-width:720px}
.hub-content-wide{max-width:1200px}

/* ── Buttons ───────────────────────────────────────────────────── */
.hub-btn-primary{
  padding:10px 18px;background:var(--accent);color:#fff;border-radius:var(--r-md);
  font-weight:600;font-size:var(--t-sm);letter-spacing:.01em;
  box-shadow:0 1px 3px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.1);
  transition:background var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1);
  display:inline-flex;align-items:center;gap:6px;
}
.hub-btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.18)}
.hub-btn-primary:active{transform:translateY(0)}
.hub-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);
  display:inline-flex;align-items:center;gap:6px;
}
.hub-btn-secondary:hover{background:var(--surface-2);border-color:var(--border-strong)}
.hub-btn-ghost{
  padding:8px 12px;background:transparent;color:var(--ink-2);border-radius:var(--r-md);
  font-weight:500;font-size:var(--t-sm);
  transition:background var(--dur-1),color var(--dur-1);
  display:inline-flex;align-items:center;gap:6px;
}
.hub-btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.hub-btn-danger{
  padding:8px 12px;background:transparent;color:var(--ink-3);border-radius:var(--r-md);
  font-size:var(--t-sm);border:1px solid var(--border);
  transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1);
}
.hub-btn-danger:hover{background:#fff1f1;color:#c0232a;border-color:#f4c2c4}
body.theme-dark .hub-btn-danger:hover{background:rgba(192,35,42,.12);color:#f4726a;border-color:rgba(192,35,42,.35)}

/* ── Inputs ────────────────────────────────────────────────────── */
.hub-input{
  width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);font-size:16px;color:var(--ink);
  transition:border-color var(--dur-1),box-shadow var(--dur-1);
  font-family:var(--font-sans);
}
.hub-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.hub-input::placeholder{color:var(--ink-muted)}
.hub-select{
  width:100%;padding:10px 12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);font-size:16px;color:var(--ink);cursor:pointer;
  font-family:var(--font-sans);appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:32px;
  transition:border-color var(--dur-1),box-shadow var(--dur-1);
}
.hub-select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}

/* ── Cards ─────────────────────────────────────────────────────── */
.hub-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s-6);box-shadow:var(--shadow-1);
  transition:border-color var(--dur-2),box-shadow var(--dur-2),transform var(--dur-2);
}
.hub-card:hover{border-color:var(--accent);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.hub-card-title{font-family:var(--font-serif);font-size:var(--t-lg);font-weight:600;color:var(--ink);margin:0 0 var(--s-2)}
.hub-card-sub{font-size:var(--t-sm);color:var(--ink-3);margin:0 0 var(--s-4);line-height:1.55}

/* ── Hint / empty ──────────────────────────────────────────────── */
.hub-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);
}
.hub-empty{color:var(--ink-3);font-size:var(--t-sm);text-align:center;padding:36px 12px;font-style:italic}

/* ── Verse chip ────────────────────────────────────────────────── */
.hub-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;margin-bottom:8px;
}
.hub-verse-chip-ref{font-weight:700;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;min-width:80px}
.hub-verse-chip-txt{flex:1;font-family:var(--font-scripture);color:var(--ink)}

/* ── Scripture text ────────────────────────────────────────────── */
.hub-scripture{font-family:var(--font-scripture);line-height:1.8;color:var(--ink);font-size:var(--t-lg)}
.hub-scripture .vnum{color:var(--accent);font-size:.72em;font-weight:700;vertical-align:super;margin-right:3px;font-family:var(--font-sans)}
.hub-scripture sup.strong{color:var(--ink-muted);font-size:.68em;cursor:pointer;text-decoration:none;margin-left:1px;transition:color var(--dur-1)}
.hub-scripture sup.strong:hover{color:var(--accent)}

/* ── Toast ─────────────────────────────────────────────────────── */
.hub-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--n800);color:var(--n0);padding:10px 20px;border-radius:var(--r-pill);
  font-size:var(--t-sm);font-weight:600;box-shadow:var(--shadow-3);z-index:200;
  opacity:0;transition:opacity var(--dur-2),transform var(--dur-2) var(--ease-out);pointer-events:none;
}
.hub-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
body.theme-dark .hub-toast{background:var(--n200);color:var(--n800)}

/* ── Modal ─────────────────────────────────────────────────────── */
.hub-modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9500;
  display:flex;align-items:center;justify-content:center;padding:var(--s-4);
  opacity:0;transition:opacity var(--dur-2);pointer-events:none;
}
.hub-modal-backdrop.open{opacity:1;pointer-events:auto}
.hub-modal{
  background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:640px;max-height:90vh;
  display:flex;flex-direction:column;box-shadow:var(--shadow-3);
  transform:scale(.97) translateY(8px);opacity:0;
  transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-2);
}
.hub-modal.open{transform:scale(1) translateY(0);opacity:1}
.hub-modal-head{padding:var(--s-4) var(--s-5);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.hub-modal-title{font-family:var(--font-serif);font-size:var(--t-xl);font-weight:600;color:var(--ink)}
.hub-modal-body{padding:var(--s-5);overflow-y:auto;flex:1}
.hub-modal-foot{padding:var(--s-3) var(--s-5);display:flex;gap:var(--s-2);justify-content:flex-end;border-top:1px solid var(--border)}

/* ── Mobile / responsive ───────────────────────────────────────── */
.hub-topbar .hub-mobile-menu,
.hub-topbar .only-mobile{display:none}

@media (max-width:840px){
  .hub-main{grid-template-columns:1fr}
  .hub-main.no-rails{grid-template-columns:1fr}
  .hub-main.no-right{grid-template-columns:1fr}
  .leaflet-attribution-flag{width:12px !important;height:8px !important}
  .hub-rail{
    position:fixed;
    top:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    bottom:0;width:min(88vw,340px);z-index:80;
    box-shadow:var(--shadow-3);transform:translateX(-100%);
    transition:transform var(--dur-3) var(--ease-out);
    border-right:1px solid var(--border);
  }
  .hub-rail-backdrop{top:calc(var(--topbar-h) + env(safe-area-inset-top, 0px))}
  .hub-rail.right{right:0;left:auto;border-left:1px solid var(--border);border-right:none;transform:translateX(100%)}
  .hub-rail.left{left:0;right:auto}
  .hub-rail.open{transform:translateX(0)}
  .hub-topbar .hub-mobile-menu,
  .hub-topbar .only-mobile{display:inline-flex}
  .hub-title{max-width:40vw;font-size:var(--t-sm)}
  .hub-content-inner{padding:var(--s-5) var(--s-4)}
  .hub-icon-btn{width:40px;height:40px}
  .hub-modal-backdrop{padding:0;align-items:stretch;justify-content:stretch}
  .hub-modal{
    width:100%;max-width:100%;height:100dvh;max-height:100dvh;
    border-radius:0;margin:0;transform:translateY(20px);
  }
  .hub-modal.open{transform:translateY(0)}
  .hub-modal-head{
    padding:var(--s-3) var(--s-4);
    padding-top:calc(var(--s-3) + env(safe-area-inset-top));
    position:sticky;top:0;background:var(--surface);z-index:2;
  }
  .hub-modal-body{
    padding:var(--s-4);
    padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling:touch;
  }
  .hub-modal-foot{
    padding:var(--s-3) var(--s-4);
    padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom));
    position:sticky;bottom:0;background:var(--surface);z-index:2;
  }
}

@media (max-width:520px){
  .hub-topbar{
    padding:0 8px;
    padding-top:env(safe-area-inset-top, 0px);
    padding-left:max(8px, env(safe-area-inset-left));
    padding-right:max(8px, env(safe-area-inset-right));
    height:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
  }
  .hub-tb-r{gap:4px}
  .hub-tb-c{gap:4px}
  .hub-brand-mark .hub-brand-name{display:none}
  .hub-brand-mark{gap:0;padding:2px 6px}
  .hub-topbar .hub-tb-r > a.hub-icon-btn:not(.hub-mobile-menu):not(.hub-journey-btn){display:none}
  .hub-tools-btn-lbl{display:none}
  .hub-tools-btn{padding:0;width:32px;height:32px;border-radius:var(--r-md);gap:0;justify-content:center}
  .hub-tools-btn-caret{width:16px;height:16px;font-size:.75rem;background:none}
  .bsh-accent-btn{display:none}
  .hub-topbar .acct-fab.in-slot .acct-btn{height:34px;padding:0 6px;gap:6px}
  .hub-topbar .acct-fab.in-slot .acct-label{display:none}
}

/* Center slot search — hidden, replaced by quick-jump FAB */
.hub-topbar .hub-tb-c #btnQuickJump,
.hub-topbar .hub-tb-c .hub-qj-center,
.hub-topbar .hub-tb-c [data-quickjump]{display:none !important}

@media (max-width:380px){
  .hub-topbar{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
  .hub-tb-r{gap:2px}
  .hub-brand-mark{padding:2px 4px;gap:4px;font-size:var(--t-xs)}
  .hub-brand-mark .hub-brand-glyph{width:18px;height:18px;font-size:.85rem}
  .hub-icon-btn{width:36px;height:36px}
}

/* ── Rail backdrop ─────────────────────────────────────────────── */
.hub-rail-backdrop{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:75;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.hub-rail-backdrop.show{display:block}
@media (min-width:841px){.hub-rail-backdrop{display:none !important}}

/* ── Anchor / slot helpers ─────────────────────────────────────── */
.hub-tb-anchor,.hub-journey-slot{display:inline;width:0;height:0;padding:0;margin:0;border:none;overflow:hidden;pointer-events:none}

/* ── Tools dropdown ────────────────────────────────────────────── */
.hub-tools-wrap{position:relative;display:inline-flex}
.hub-tools-btn{
  width:auto;height:32px;padding:0 12px;gap:6px;
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.01em;
  background:var(--accent);color:#fff;
  border:1px solid var(--accent);border-radius:var(--r-pill);
  display:inline-flex;align-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:background var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);
}
.hub-tools-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.2)}
.hub-tools-btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.hub-tools-btn[aria-expanded="true"]{background:var(--accent-hover);border-color:var(--accent-hover)}
.hub-tools-btn-lbl{font-family:var(--font-sans);letter-spacing:-.005em;color:#fff}
.hub-tools-btn-caret{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;
  font-size:.68rem;font-weight:700;line-height:1;
}
.hub-tools-btn[aria-expanded="true"] .hub-tools-btn-caret{background:rgba(255,255,255,.32)}

/* Split view button */
.hub-split-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;
  font:600 var(--t-sm)/1 var(--font-sans);letter-spacing:-.01em;
  color:var(--accent);background:transparent;
  border:1px solid var(--accent);border-radius:var(--r-pill);
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1),box-shadow var(--dur-1);
  margin-right:6px;
}
.hub-split-btn:hover{background:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.16)}
.hub-split-btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.hub-split-btn svg{color:currentColor;flex:0 0 auto}
.hub-split-btn-lbl{color:currentColor}
[data-theme="dark"] .hub-split-btn,
:root[data-theme="dark"] .hub-split-btn{color:var(--accent);border-color:var(--accent-tint);background:var(--accent-tint)}
[data-theme="dark"] .hub-split-btn:hover,
:root[data-theme="dark"] .hub-split-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:720px){.hub-split-btn{display:none}}
@media (max-width:960px){.hub-split-btn{padding:7px 10px} .hub-split-btn-lbl{display:none}}

/* Journey icon button */
.hub-topbar .hub-tb-r > a.hub-journey-btn{
  display:inline-flex !important;
  align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--r-md);
  color:var(--accent);border:1px solid var(--accent-tint);background:transparent;
  margin-right:4px;
  transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1);
}
.hub-topbar .hub-tb-r > a.hub-journey-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
[data-theme="dark"] .hub-topbar .hub-tb-r > a.hub-journey-btn,
:root[data-theme="dark"] .hub-topbar .hub-tb-r > a.hub-journey-btn{color:var(--accent);border-color:var(--accent-tint)}
[data-theme="dark"] .hub-topbar .hub-tb-r > a.hub-journey-btn:hover,
:root[data-theme="dark"] .hub-topbar .hub-tb-r > a.hub-journey-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (max-width:720px){.hub-topbar .hub-tb-r > a.hub-journey-btn{width:36px;height:36px}}

/* Tools menu */
.hub-tools-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  min-width:220px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(0,0,0,.1),0 2px 6px rgba(0,0,0,.06);
  padding:6px;z-index:9990;
  transform-origin:top right;
}
.hub-tools-menu.open{display:block;animation:tmOpen var(--dur-2) var(--ease-out)}
@keyframes tmOpen{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.hub-tools-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-md);
  color:var(--ink);text-decoration:none;font-size:var(--t-sm);font-weight:500;
  min-height:40px;cursor:pointer;transition:background var(--dur-1);
}
.hub-tools-item:hover{background:var(--surface-2)}
.hub-tools-item.is-current{color:var(--ink-3);cursor:default;background:transparent}
.hub-tools-item.is-current:hover{background:transparent}
.hub-tools-item-icon{
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:1rem;line-height:1;flex-shrink:0;
}
.hub-tools-item.is-current .hub-tools-item-icon{color:var(--ink-3)}
.hub-tools-item-lbl{flex:1}
.hub-tools-item-badge{
  font-size:.65rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-3);background:var(--surface-2);padding:2px 7px;border-radius:var(--r-sm);
}
.hub-tools-item-badge-count{
  font-size:.7rem;font-weight:700;letter-spacing:0;text-transform:none;
  color:#fff;background:var(--accent);padding:1px 7px;border-radius:var(--r-pill);
}
/* ---- Collab section in Tools dropdown ---- */
.hub-tools-divider{
  height:1px;background:var(--border);margin:4px 0;
}
.hub-tools-collab-row{
  width:100%;text-align:left;background:none;border:none;
  font:inherit;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;color:var(--ink-2);
  font-family:var(--font-sans);font-size:var(--t-sm);
  transition:background var(--dur-1),color var(--dur-1);
}
.hub-tools-collab-row:hover{background:var(--surface-2);color:var(--ink)}
.hub-tools-collab-active{color:var(--accent);font-weight:600}
.hub-tools-collab-active .hub-tools-item-badge{
  background:var(--accent);color:#fff;
  animation:bp-collab-pulse 2.2s ease-in-out infinite;
}
@media (max-width:520px){
  .hub-tools-menu{
    position:fixed;
    top:calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    left:50%;right:auto;
    transform:translateX(-50%);
    width:min(88vw,300px);min-width:0;
    max-height:calc(100dvh - var(--topbar-h) - 32px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
  }
  .hub-tools-menu.open{animation:tmOpenMob var(--dur-2) var(--ease-out)}
  @keyframes tmOpenMob{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  .hub-tools-btn{padding:0 8px;font-size:var(--t-xs);height:30px}
}

/* Misc */
.bsh-eov-fab{display:none !important}

/* Rail tool nav SVG icons */
.rail-tools-nav .tool-glyph.has-svg,
.hub-tools-menu-item .hub-tools-menu-ic.has-svg{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--ink-3)
}
.rail-tools-nav a:hover .tool-glyph.has-svg,
.rail-tools-nav button:hover .tool-glyph.has-svg{color:var(--accent)}

/* Touch tap targets (WCAG 2.5.5) */
@media (pointer:coarse){
  .hub-icon-btn{min-width:44px;min-height:44px}
  .rail-tab{min-height:44px}
  .rail-nav-btns button{min-height:44px}
  .bx-doc-btn{min-height:44px}
  .study-hl-row button{width:36px;height:36px}
  .study-actions button{min-height:36px;padding:8px 12px}
  .hub-icon-btn{-webkit-tap-highlight-color:transparent}
  /* Tap highlight suppression for all interactive elements on touch */
  a,button,label,[role="button"]{-webkit-tap-highlight-color:transparent}
  /* Rail tabs need comfortable finger targets */
  .hub-tab{min-height:44px}
  /* Hub buttons — touch-comfortable minimum */
  .hub-btn-primary,.hub-btn-secondary,.hub-btn-ghost,.hub-btn-danger{min-height:44px}
  /* Modal footer buttons */
  .hub-modal-foot button,.hub-modal-foot a{min-height:44px;padding:12px 18px}
}

/* Prevent iOS zoom-on-focus for 16px inputs */
.qjm-input,#qjmInput,.acct-field input{font-size:16px}
/* Prevent zoom for all hub inputs and selects on iOS */
.hub-input,.hub-select{font-size:max(16px,var(--t-sm))}

/* ── Embed / split-view mode ───────────────────────────────────── */
:root{--embed-bar-h:40px}
.bp-embed-topbar{
  padding:0 8px !important;
  min-height:var(--embed-bar-h) !important;height:var(--embed-bar-h) !important;
  gap:4px !important;position:sticky;top:0;z-index:9000;
}
.bp-embed-topbar > *{display:none !important}
.bp-embed-topbar .hub-mobile-menu{display:inline-flex !important}
.bp-embed-topbar .hub-tb-l{display:flex !important;gap:4px !important;padding:0 !important}
.bp-embed-topbar .hub-tb-r{display:flex !important;gap:4px !important;padding:0 !important}
.bp-embed-topbar .hub-tb-l > :not(.hub-mobile-menu),
.bp-embed-topbar .hub-tb-r > :not(.hub-mobile-menu){display:none !important}
.bp-embed-split .hub-main{grid-template-columns:1fr !important}
.bp-embed-split .hub-rail{
  position:fixed !important;top:var(--embed-bar-h) !important;
  bottom:0;width:min(88vw,300px);z-index:80;
  box-shadow:var(--shadow-3);transform:translateX(-100%);
  transition:transform var(--dur-3) var(--ease-out);
  border-right:1px solid var(--border);
}
.bp-embed-split .hub-rail.right{right:0;left:auto;border-left:1px solid var(--border);border-right:none;transform:translateX(100%)}
.bp-embed-split .hub-rail.left{left:0;right:auto}
.bp-embed-split .hub-rail.open{transform:translateX(0) !important}
.bp-embed-split .hub-rail-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:75}
.bp-embed-split .hub-rail-backdrop.show{display:block !important}

/* ── Language switcher ─────────────────────────────────────────── */
.hub-lang-wrap{position:relative;display:inline-flex}
.hub-lang-btn{width:38px;height:38px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);transition:background var(--dur-1),color var(--dur-1)}
.hub-lang-btn:hover,.hub-lang-btn[aria-expanded="true"]{background:var(--surface-2);color:var(--ink)}
.hub-lang-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  min-width:140px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:9100;padding:4px;flex-direction:column;
}
.hub-lang-menu.open{display:flex;animation:tmOpen var(--dur-2) var(--ease-out)}
.hub-lang-menu .hub-tools-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:var(--r-md);
  font-size:var(--t-sm);color:var(--ink-2);
  text-decoration:none;cursor:pointer;
  background:none;border:none;font-family:inherit;width:100%;text-align:left;
  transition:background var(--dur-1),color var(--dur-1);
}
.hub-lang-menu .hub-tools-item:hover{background:var(--surface-2);color:var(--ink)}
.hub-lang-menu .hub-tools-item.is-active{color:var(--accent)}
.hub-lang-menu .hub-tools-item.is-active .hub-tools-item-badge{font-size:.8rem;color:var(--accent);background:transparent;border:none;padding:0}
@media(max-width:520px){.hub-lang-btn{width:34px;height:34px}}

/* ── Mobile hub-content content padding ───────────────────────── */
/* Ensures content is never flush to screen edges or obscured by OS chrome */
@media(max-width:840px){
  /* Hub content scrolls; give bottom padding for safe-area + thumb reach */
  .hub-content{-webkit-overflow-scrolling:touch}
  .hub-content-inner{padding-bottom:calc(var(--s-10) + env(safe-area-inset-bottom,0))}
  /* Rail body: add bottom safe-area so content isn't hidden under home indicator */
  .hub-rail-body{padding-bottom:calc(var(--s-8) + env(safe-area-inset-bottom,0))}
  /* Hub card: full-width on small screens */
  .hub-card{border-radius:var(--r-md)}
  /* Hub verse chips: let reference wrap if it's too long */
  .hub-verse-chip{flex-wrap:wrap}
  .hub-verse-chip-ref{min-width:0}
}
@media(max-width:520px){
  /* Tighten inner content padding on small phones */
  .hub-content-inner{padding:var(--s-4) var(--s-3)}
}