/* ============================================================
   hub-modern.css — MINIMALIST refresh (Bible Parlor)
   ------------------------------------------------------------
   Replaces the previous parchment/burgundy/gold theme with a
   neutral, flat, single-accent system aligned to tokens.css.
   All surfaces come from --bg / --surface / --surface-2 / --border,
   the sole color accent is --accent (burgundy) used sparingly on
   selection, focus, brand mark, and action affordances.
   NO gold/tan gradients. NO warm brown backgrounds.
   ============================================================ */

/* Legacy variable names remapped to tokens.css primitives.
   Keeps existing markup working without a full class refactor. */
:root{
  --parchment:var(--bg);
  --parchment-2:var(--surface);
  --panel:var(--surface);
  --line:var(--border);
  --line-soft:var(--border);
  --ink-soft:var(--ink-2);
  --burgundy:var(--accent);
  --burgundy-d:var(--accent);
  --gold:var(--accent);       /* remap gold → accent so legacy rules stay in harmony */
  --gold-soft:var(--ink-3);   /* was warm tan, now a muted neutral */
  --hit:var(--surface-2);     /* selection background = subtle surface, not tan */
  --green:#3f6b2c;

  --shadow-sm:var(--shadow-1);
  --shadow:var(--shadow-2);
  --shadow-md:var(--shadow-2);
  --shadow-lg:var(--shadow-3);

  --r-sm:var(--r-sm, 8px);
  --r:var(--r-md, 12px);
  --r-lg:var(--r-lg, 16px);
  --r-pill:var(--r-pill, 999px);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ---- base ---- */
html{-webkit-text-size-adjust:100%}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  color:var(--ink);
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent-tint);color:var(--ink)}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}

/* ---- scrollbars (neutral) ---- */
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong);background-clip:content-box}

/* ============================================================
   Headers — flat, no burgundy gradient, thin border
   ============================================================ */
header.hub,header.app,.hubbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:none;
  color:var(--ink);
}
header.app{padding:11px 20px}
.hub-inner{padding:10px 22px}
header.app h1{font-weight:600;letter-spacing:.2px;color:var(--ink)}

/* nav pills (hub) */
nav.tools button,.hubbar button{
  background:transparent;
  color:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--r-pill)!important;
  padding:7px 14px;
  font-weight:600;
  transition:all .18s var(--ease);
}
nav.tools button:hover,.hubbar button:hover{
  background:var(--surface-2);
  color:var(--ink);
  border-color:var(--border-strong);
}
nav.tools button.active{
  background:var(--accent-tint);
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:none;
}
.menu-btn{
  border-radius:var(--r-pill)!important;
  border-color:var(--border);
  color:var(--ink-2);
  background:transparent;
  transition:all .18s var(--ease);
}
.menu-btn:hover{background:var(--surface-2);color:var(--ink)}

/* topbar (tool sub-nav) */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);box-shadow:none}
.topbar .tb{border-radius:var(--r-sm);transition:all .15s var(--ease);color:var(--ink)}
.topbar .tb:hover{background:var(--surface-2);border-color:var(--accent);color:var(--ink)}

/* ============================================================
   Home cards
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px;
  box-shadow:none;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-1);
  border-color:var(--accent);
}
.card h2{letter-spacing:.2px}

/* ============================================================
   Form controls
   ============================================================ */
input,select,textarea{
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--border);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
select:focus,input:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:var(--focus);
}
select.bsel,select.csel,.nav-sel{
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--ink);
}
.nav-sel{font-weight:600}

/* ============================================================
   Reader (Study Bible) — neutral, no gold, no tan
   ============================================================ */
.read-pane{padding-top:26px;background:var(--bg)}
.ch-title{letter-spacing:.2px;color:var(--ink)}
.verses{line-height:1.9;letter-spacing:.1px;color:var(--ink)}
.verse{border-radius:6px;transition:background .14s var(--ease),box-shadow .14s var(--ease);color:var(--ink)}
.verse:hover{background:var(--surface-2)}
.verse.has-note{background:var(--accent-tint)}
.verse.has-note:hover{background:var(--accent-soft)}
.verse.woc{color:#e05a5a}
/* SELECTED VERSE: flat surface-2 with accent border-left. NO gold gradient. */
.verse.sel,.verse.sel:hover{
  background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--accent);
}
.verse.sel.woc,.verse.sel.woc:hover{
  background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--accent);
  color:#e05a5a;
}
.vn{color:var(--ink-3);font-weight:600}

/* reader nav buttons */
.reader-nav .rbtn,.topnav .rbtn,.pager .pbtn,.back-read a{
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-weight:600;
  background:var(--surface);
  color:var(--ink);
  transition:all .16s var(--ease);
}
.reader-nav .rbtn:hover:not(:disabled),.topnav .rbtn:hover:not(:disabled),.back-read a:hover{
  border-color:var(--accent);
  background:var(--surface-2);
  transform:translateY(-1px);
}
.pager .pbtn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--r-sm);
  transition:all .16s var(--ease);
}
.pager .pbtn:hover:not(:disabled){
  background:var(--accent-hover);
  transform:translateY(-1px);
}
.pager .pbtn:disabled{opacity:.32}

/* ============================================================
   Study panel + cards
   ============================================================ */
aside.sidebar,.study{background:var(--surface)}
aside.sidebar{border-right:1px solid var(--border)}
.study{border-left:1px solid var(--border)}
.side-h{letter-spacing:.7px;color:var(--ink-3)}

.quick a{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--ink);
  transition:all .15s var(--ease);
}
.quick a:hover{background:var(--surface-3);border-color:var(--accent);transform:translateX(2px)}

/* official study note + user note cards */
.study-note{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--r);
}
.study-none{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  color:var(--ink-3);
}
.study-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--r);
  transition:box-shadow .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.study-card:hover{box-shadow:var(--shadow-1);border-left-color:var(--accent-hover)}
.study-card.sel{border-left-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.study-card-go{border-radius:var(--r-sm);transition:all .15s var(--ease)}
.study-card-go:hover{border-color:var(--accent);background:var(--surface-2)}

/* action buttons */
.study-actions button{
  border:1px solid var(--accent);
  color:var(--accent);
  background:transparent;
  border-radius:var(--r-sm);
  font-weight:600;
  transition:all .15s var(--ease);
}
.study-actions button:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-1px);
}

/* details accordions */
details.intro,details.study-intro{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--r);
}
details.intro summary,details.study-intro summary{color:var(--accent)}

/* user-note UI */
.unote-area,.unote-add{border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.unote-save{border-radius:var(--r-sm);transition:all .15s var(--ease)}
.unote-save:hover{transform:translateY(-1px)}
.unote-cancel{border-radius:var(--r-sm);transition:all .15s var(--ease)}

/* sticky reader nav — no parchment tint */
.topnav{background:var(--surface);border-bottom:1px solid var(--border)}
.reader-nav{background:var(--bg)}

/* ============================================================
   Articles + misc
   ============================================================ */
.article h2{letter-spacing:.2px;color:var(--ink)}
.back-read a{background:var(--surface)}
.empty{color:var(--ink-3)}

/* mobile sheet */
.study.show-sheet{border-top:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:0 -10px 36px rgba(0,0,0,.35)}

/* Notebook FAB spacing */
.study{padding-bottom:108px}
aside.sidebar{padding-bottom:72px}
.read-pane{padding-bottom:96px}
@media(max-width:900px){.read-pane{padding-bottom:110px}}

/* focus rings */
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ============================================================
   Suggest / dropdown / quick-jump surfaces
   ============================================================ */
.suggest,.qj-modal,.mtopic{
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-2);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* sub-cards */
.sub-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.sub-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.refchip{border-radius:var(--r-pill);transition:background .15s var(--ease),transform .12s var(--ease);background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.refchip:hover{transform:translateY(-1px);border-color:var(--accent);background:var(--surface-3)}

/* verse-card (sermon results) */
.vcard{
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.vcard:hover{border-left-color:var(--accent-hover);box-shadow:var(--shadow-1);transform:translateY(-1px)}

/* Buttons */
.btn{border-radius:var(--r-sm)}
.btn.primary,.pager .pbtn{background:var(--accent);color:#fff;border:none}
.btn.primary:hover,.pager .pbtn:hover{background:var(--accent-hover)}

/* ============================================================
   Home hero — clean, no gold radial
   ============================================================ */
.homehero{
  position:relative;
  padding:56px 20px 40px;
  text-align:center;
  background:transparent;
}
.homehero h1{
  font-family:'Iowan Old Style','EB Garamond',Georgia,serif;
  font-size:clamp(2rem,4vw,3.2rem);
  color:var(--ink);
  margin:0 0 12px;
  letter-spacing:-.02em;
  font-weight:600;
}

/* feature strip */
.feature-strip{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px auto 8px;max-width:820px;padding:0 12px}
.feature-strip .pill{
  background:var(--surface);
  border:1px solid var(--border);
  padding:7px 14px;
  border-radius:var(--r-pill);
  font-size:.8rem;
  color:var(--ink-2);
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.feature-strip .pill em{font-style:normal;color:var(--accent)}

/* hover-verse card */
.bsh-vhover{
  position:fixed;z-index:11000;max-width:420px;min-width:280px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow-3);
  padding:14px 16px;
  font-family:'EB Garamond',Georgia,serif;
  color:var(--ink);
  animation:bsh-vh-in .18s ease-out;
  pointer-events:auto;
}
@keyframes bsh-vh-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.bsh-vhover .vh-ref{font-family:Inter,system-ui,sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.6px;color:var(--accent);font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.bsh-vhover .vh-ref .vh-actions{margin-left:auto;display:flex;gap:4px}
.bsh-vhover .vh-ref .vh-actions a{color:var(--accent);text-decoration:none;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--accent-tint);transition:background .15s}
.bsh-vhover .vh-ref .vh-actions a:hover{background:var(--accent-soft)}
.bsh-vhover .vh-txt{font-size:.98rem;line-height:1.55}
.bsh-vhover .vh-loader{color:var(--ink-3);font-style:italic;font-family:Inter,system-ui,sans-serif;font-size:.85rem}

/* auto-detect verse refs — subtle underline */
.bsh-vref{
  border-bottom:1px dotted var(--accent);
  cursor:help;
  color:inherit;
}
.bsh-vref:hover{color:var(--accent);border-bottom-style:solid}

/* command palette hint */
.qj-hint{color:var(--ink-3);font-size:.72rem;padding:4px 10px;font-style:italic}

/* NEW badge — subtle burgundy pill, no gradient */
.hub-newbadge{display:inline-block;background:var(--accent-tint);color:var(--accent);font-size:.62rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:6px;margin-left:8px;vertical-align:middle;border:1px solid var(--accent)}

/* Reading plan progress ring */
.bsh-rp-ring{--pct:0;width:52px;height:52px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--pct)*1%), var(--border) 0);display:flex;align-items:center;justify-content:center;flex:none}
.bsh-rp-ring::after{content:attr(data-pct)"%";display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--surface);color:var(--ink);font-size:.72rem;font-weight:800;font-family:Inter,system-ui,sans-serif}

/* Toast */
.bsh-toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:10500;background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:10px 16px;border-radius:var(--r-pill);font-size:.85rem;font-weight:600;font-family:Inter,system-ui,sans-serif;box-shadow:var(--shadow-2);animation:bsh-t-in .2s ease-out;backdrop-filter:none;-webkit-backdrop-filter:none}
@keyframes bsh-t-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ============================================================
   Dark-mode differences (tokens.css handles most; only override
   what specifically differs from light)
   ============================================================ */
body.theme-dark .verse.has-note{background:var(--surface-2)}
body.theme-dark .verse.has-note:hover{background:var(--surface-3)}
body.theme-dark .verse.woc{color:#ff8a80}
body.theme-dark .verse.sel,body.theme-dark .verse.sel:hover{
  background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--accent);
}
body.theme-dark .verse.sel.woc,body.theme-dark .verse.sel.woc:hover{
  background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--accent);
  color:#ff8a80;
}

/* Kill any leftover gold/beige tint on rail nav in dark */
body.theme-dark .rail-tools-nav a,
body.theme-dark .rail-tools-nav button{background:transparent;color:var(--ink-2)}
body.theme-dark .rail-tools-nav a:hover,
body.theme-dark .rail-tools-nav button:hover,
body.theme-dark .rail-tools-nav .active{background:var(--surface-2);color:var(--ink)}
body.theme-dark .rail-nav-btns button{background:var(--surface);color:var(--ink-2);border-color:var(--border)}

/* Smooth transitions */
.card,.study-card,.study-note,button,.rbtn,.pbtn,input,select,textarea{
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),box-shadow .22s var(--ease),
             transform .18s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Type polish */
h1,h2,h3{letter-spacing:-.01em}
.verses{font-feature-settings:"kern","liga","onum"}