/* /shared/hub-chrome.css — Site-wide chrome shared across all tools.
   Depends on /shared/tokens.css. Provides the same topbar, safe-area,
   focus rings, buttons, and mobile shell as the Builder. */

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

/* ============ Topbar (matches Builder) ============ */
.hub-topbar{
  display:flex;align-items:center;gap:var(--s-3);
  padding:var(--s-3) var(--s-5);
  padding-top:max(var(--s-3), env(safe-area-inset-top));
  padding-left:max(var(--s-5), env(safe-area-inset-left));
  padding-right:max(var(--s-5), env(safe-area-inset-right));
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:60;
}
.hub-tb-l,.hub-tb-r{display:flex;align-items:center;gap:var(--s-2)}
.hub-tb-c{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-width:0}
.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 12px;border-radius:var(--r-md);
  transition:background var(--dur-1);
}
.hub-brand:hover{background:var(--surface-2)}
.hub-brand-dot{
  width:10px;height:10px;border-radius:50%;background:var(--accent);flex-shrink:0;
}
.hub-icon-btn{
  width:40px;height:40px;border-radius:var(--r-md);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:1.35rem;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)}
/* Quick-jump glyph (⌕) renders optically smaller than the other glyphs at the
   same font-size, so give it an extra bump to match ◐ (theme) and the rest. */
.hub-icon-btn.hub-qj-center,
.hub-icon-btn[data-quickjump],
.hub-icon-btn#btnQuickJump{font-size:1.6rem;font-weight:600}
.hub-home-btn{font-size:1.35rem}
.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}
/* Builder-style minimalist brand mark: glyph + short name, sits in .hub-tb-l */
.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.35rem;line-height:1}
.hub-home-btn:hover{color:var(--accent)}
@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}
/* Leaflet attribution flag can render huge in some builds; force sane size */
.leaflet-attribution-flag{width:12px;height:8px}
.hub-main.no-rails{grid-template-columns:1fr}

.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:600;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}
.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;
}
.hub-tab{
  flex:1;padding:8px 4px;border-radius:var(--r-sm);position:relative;
  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;
}
.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}
.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:500;font-size:var(--t-sm);
  transition:background var(--dur-1);display:inline-flex;align-items:center;gap:6px;
}
.hub-btn-primary:hover{background:var(--accent-hover)}
.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);
}
.hub-btn-danger:hover{background:#fff5f5;color:#c1272d;border-color:#f4c4c4}

/* ============ 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;
}
.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);
}
.hub-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-2)}
.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 state ============ */
.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:32px 12px;font-style:italic}

/* ============ Verse chip (matches Builder) ============ */
.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: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;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.75;color:var(--ink);font-size:var(--t-lg)}
.hub-scripture .vnum{color:var(--accent);font-size:.75em;font-weight:600;vertical-align:super;margin-right:3px;font-family:var(--font-sans)}
.hub-scripture sup.strong{color:var(--ink-muted);font-size:.7em;cursor:pointer;text-decoration:none;margin-left:1px}
.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 18px;border-radius:var(--r-pill);
  font-size:var(--t-sm);box-shadow:var(--shadow-3);z-index:200;
  opacity:0;transition:opacity var(--dur-2),transform var(--dur-2);pointer-events:none;
}
.hub-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ Modal (matches Builder) ============ */
.hub-modal-backdrop{
  position:fixed;inset:0;background:rgba(20,19,16,.4);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:var(--s-4);
  opacity:0;transition:opacity var(--dur-2);
}
.hub-modal-backdrop.open{opacity:1}
.hub-modal{
  background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:640px;max-height:90vh;
  display:flex;flex-direction:column;box-shadow:var(--shadow-3);
  transform:scale(.98);opacity:0;transition:transform var(--dur-2) var(--ease),opacity var(--dur-2);
}
.hub-modal.open{transform:scale(1);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 shell (matches Builder) ============ */
.hub-mobile-menu{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}
  /* Normalize Leaflet attribution flag SVG that can render huge in some builds */
  .leaflet-attribution-flag{width:12px !important;height:8px !important}
  .hub-rail{
    position:fixed;top:0;bottom:0;width:min(88vw,340px);z-index:80;
    box-shadow:var(--shadow-3);transform:translateX(-100%);
    transition:transform var(--dur-2) var(--ease);
    border-right:1px solid var(--border);
  }
  .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-mobile-menu{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{max-height:100vh;max-height:100dvh;height:100%;max-width:100%;border-radius:0}
  .hub-modal-body{padding:var(--s-4)}
}
@media (max-width:520px){
  .hub-topbar{padding:var(--s-2) var(--s-3);padding-top:max(var(--s-2),env(safe-area-inset-top))}
  .hub-brand{font-size:var(--t-md);padding:4px 8px}
  .hub-title{max-width:32vw}
  .hub-tb-c{gap:4px}
}

/* Backdrop for open mobile rail */
.hub-rail-backdrop{
  display:none;position:fixed;inset:0;background:rgba(20,19,16,.35);z-index:75;
}
.hub-rail-backdrop.show{display:block}
@media (min-width:841px){.hub-rail-backdrop{display:none !important}}

/* Screen-reader-only utility (visually hidden, still readable by crawlers + AT) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}