/* Strong's lexicon card.
   Layout matches the design mockup exactly:

     ┌──────────────────────────────────────────────┐
     │ [H 3068]            HEBREW · PROPER NOUN     │
     │                                       יְהוָה │
     │ Yəhōwāh                                       │
     │ /jeh·ho·vaw/                                  │
     │ ──────────────────────────────────────         │
     │ THE TETRAGRAMMATON                            │
     │ Yahweh — the proper name of the God of …      │
     │ ──────────────────────────────────────         │
     │ 6,828 OCCURRENCES        CONCORDANCE →        │
     └──────────────────────────────────────────────┘

   Hebrew and Greek share this layout — only the dir attribute on
   .strongs-orig flips for RTL Hebrew text. */
.strongs{
  position:fixed;
  width:340px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  z-index:50;
  padding:18px 20px 16px;
  border-radius:12px;
  border:1px solid rgba(233,192,115,0.42);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(233,192,115,0.10), transparent 60%),
    linear-gradient(180deg, #1a1228 0%, #0e0a1c 100%);
  box-shadow:
    0 18px 50px rgba(0,0,0,0.7),
    0 0 30px rgba(245,217,154,0.18),
    inset 0 1px 0 rgba(245,217,154,0.10);
  opacity:0; transform:scale(0.96); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.strongs::-webkit-scrollbar{ width:6px }
.strongs::-webkit-scrollbar-thumb{ background:rgba(245,217,154,0.35); border-radius:3px }
.strongs::-webkit-scrollbar-track{ background:transparent }
.strongs.open{ opacity:1; transform:scale(1); pointer-events:auto }
.strongs::before{
  content:""; position:absolute; left:var(--arrow, 30px); top:-7px;
  width:12px; height:12px;
  background:#1a1228;
  border-left:1px solid rgba(233,192,115,0.42);
  border-top:1px solid rgba(233,192,115,0.42);
  transform:rotate(45deg);
}
.strongs.below::before{ top:auto; bottom:-7px; transform:rotate(225deg) }

/* ================ HEAD ================ */
.strongs-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
  gap:12px;
}
.strongs-num{
  flex:none;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.22em;
  color:var(--gold-2);
  background:rgba(20,12,4,0.65);
  border:1px solid rgba(245,217,154,0.55);
  padding:5px 12px;
  border-radius:8px;
  box-shadow:inset 0 1px 0 rgba(245,217,154,0.08);
}
.strongs-meta{
  flex:1; min-width:0;
  text-align:right;
  font-size:10px; letter-spacing:0.32em; text-transform:uppercase;
  color:rgba(180,180,200,0.65);
  font-family:'Inter', sans-serif;
  font-weight:500;
}
.strongs-meta .dot{ margin:0 4px; opacity:0.6 }

/* ================ ORIGINAL TEXT ================ */
.strongs-orig{
  /* Right-aligned in both directions — Hebrew naturally renders RTL via
     the dir attr, Greek sits flush right by alignment. Sized so it
     dominates the card visually, like in the mockup. */
  text-align:right;
  font-family:'Cormorant Garamond', serif; font-weight:600;
  font-size:42px; line-height:1.05;
  color:#fff7e3;
  text-shadow:0 0 24px rgba(245,217,154,0.45);
  letter-spacing:0.01em;
  margin:0 0 12px;
  padding-right:2px;
}

/* ================ TRANSLIT + PRON ================ */
.strongs-translit{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-weight:500;
  font-size:22px;
  color:var(--gold-2);
  letter-spacing:0.01em;
  margin-bottom:2px;
  text-shadow:0 0 14px rgba(245,217,154,0.18);
}
.strongs-pron{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:rgba(180,180,200,0.7);
  letter-spacing:0.06em;
  margin-bottom:14px;
}

/* ================ DIVIDER ================ */
.strongs-divider{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(233,192,115,0.35), transparent);
  margin:14px 0;
}

/* ================ CURATED TITLE ================ */
.strongs-title-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.strongs-title{
  font-family:'Inter', sans-serif;
  font-size:11px; font-weight:600;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--gold);
  flex:1; min-width:0;
}
.strongs-title-empty{
  flex:1; min-width:0;
  font-family:'Inter', sans-serif;
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(180,180,200,0.4);
  font-style:italic;
}
.strongs-title-edit{
  appearance:none; padding:4px 6px;
  flex:none;
  background:transparent;
  border:1px solid rgba(245,217,154,0.18);
  border-radius:5px;
  color:rgba(245,217,154,0.55);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .12s, border-color .12s, background .12s;
}
.strongs-title-edit:hover{
  color:var(--gold-2);
  border-color:rgba(245,217,154,0.5);
  background:rgba(245,217,154,0.08);
}

/* ================ DEFINITION ================ */
.strongs-def{
  font-family:'Inter', sans-serif;
  font-size:14.5px; line-height:1.55;
  color:#e8dfca;
}
.strongs-def b{ color:#fff7e3; font-weight:700 }
.strongs-def i{ color:var(--gold-2); font-style:italic }
.strongs-def .empty{ color:var(--muted); font-style:italic }

/* ================ FREQUENCY MINI-CHART ================ */
.strongs-freq{
  margin:14px 0 4px;
  padding:8px 4px 4px;
  border-top:1px solid rgba(233,192,115,0.12);
}
.strongs-freq-title{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:'Inter', sans-serif;
  font-size:9.5px; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}
.strongs-freq-meta{
  letter-spacing:0.18em; color:rgba(180,180,200,0.55);
  font-weight:500;
  text-transform:none;
}
.freq-bars{
  display:flex; align-items:flex-end; gap:1px;
  height:38px;
  border-bottom:1px solid rgba(245,217,154,0.18);
  padding-bottom:1px;
}
.freq-bar{
  flex:1; min-height:1px;
  background:linear-gradient(180deg, rgba(245,217,154,0.85) 0%, rgba(184,133,58,0.45) 100%);
  border-radius:1.5px 1.5px 0 0;
  position:relative; cursor:pointer;
  transition:filter .12s, transform .12s;
}
.freq-bar:hover{ filter:brightness(1.4) saturate(1.2); transform:scaleY(1.08) }
.freq-bar.dim{
  background:rgba(245,217,154,0.12);
  pointer-events:none;
}
.freq-bar[data-test="NT"]{
  background:linear-gradient(180deg, rgba(110,166,230,0.85) 0%, rgba(58,110,168,0.45) 100%);
}
.freq-bar[data-test="NT"].dim{
  background:rgba(110,166,230,0.12);
}
.freq-axis{
  display:flex; gap:1px; margin-top:4px;
  font-family:'JetBrains Mono', monospace;
  font-size:7.5px; letter-spacing:0.06em;
  color:rgba(180,180,200,0.5);
}
.freq-mark{
  flex:1; text-align:center;
  white-space:nowrap;
  overflow:hidden;
}
.freq-mark.labeled{ color:var(--gold); opacity:0.9 }

/* ================ FOOTER ================ */
.strongs-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase;
}
.strongs-count{
  font-family:'Inter', sans-serif; font-weight:500;
  color:rgba(180,180,200,0.7);
}
.strongs-concord{
  appearance:none; background:transparent; border:none; padding:0;
  font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:var(--gold);
  cursor:pointer;
  transition:color .12s, text-shadow .12s;
}
.strongs-concord:hover{
  color:#fff7e3;
  text-shadow:0 0 8px rgba(245,217,154,0.45);
}

/* ===================== CONCORDANCE PANEL ===================== */
/* Slides in from the right when the user clicks "CONCORDANCE →" in a
   Strong's tooltip. Lists every verse using that lemma, grouped by
   book, click-to-jump in the reader. */
.concord-panel{
  position:fixed; right:-440px; top:70px; bottom:24px;
  width:min(420px, 92vw);
  background:linear-gradient(180deg, #1a1228 0%, #0e0a1c 100%);
  border:1px solid rgba(233,192,115,0.42);
  border-radius:12px;
  box-shadow:-30px 0 60px rgba(0,0,0,0.55), inset 1px 0 0 rgba(245,217,154,0.06);
  z-index:60;
  display:flex; flex-direction:column;
  transition:right .35s cubic-bezier(0.6,0,0.2,1), opacity .25s;
  opacity:0; pointer-events:none;
}
.concord-panel.open{ right:24px; opacity:1; pointer-events:auto }
.concord-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(233,192,115,0.18);
}
.concord-title-row{ display:flex; align-items:baseline; gap:10px; min-width:0 }
.concord-num{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.22em;
  color:var(--gold-2);
  background:rgba(20,12,4,0.65);
  border:1px solid rgba(245,217,154,0.55);
  padding:5px 12px; border-radius:8px;
}
.concord-lemma{
  font-size:10px; letter-spacing:0.32em; text-transform:uppercase;
  color:rgba(180,180,200,0.7);
  font-family:'Inter', sans-serif; font-weight:500;
}
.concord-close{
  appearance:none; background:transparent; border:1px solid rgba(245,217,154,0.25);
  color:var(--gold-2); cursor:pointer;
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  transition:border-color .12s, background .12s;
}
.concord-close:hover{ border-color:rgba(245,217,154,0.6); background:rgba(245,217,154,0.08) }
.concord-status{
  padding:8px 18px;
  font-family:'Inter', sans-serif; font-size:10.5px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(180,180,200,0.7);
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.concord-list{
  flex:1; overflow-y:auto;
  padding:8px 14px 18px;
}
.concord-list::-webkit-scrollbar{ width:6px }
.concord-list::-webkit-scrollbar-thumb{ background:rgba(245,217,154,0.3); border-radius:3px }
.concord-book{ margin:10px 0 14px }
.concord-book-head{
  display:flex; align-items:baseline; justify-content:space-between;
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-weight:600;
  font-size:14px; color:var(--gold-2);
  letter-spacing:0.04em;
  padding:4px 4px 6px;
  border-bottom:1px solid rgba(245,217,154,0.14);
  margin-bottom:4px;
}
.concord-book-count{
  font-family:'JetBrains Mono', monospace;
  font-size:9px; letter-spacing:0.18em;
  color:rgba(180,180,200,0.55);
  font-style:normal; font-weight:400;
}
.concord-ref{
  appearance:none; background:transparent; border:none;
  display:block; width:100%;
  padding:6px 8px;
  text-align:left;
  font-family:'Inter', sans-serif;
  font-size:12.5px; color:var(--ivory-dim);
  cursor:pointer;
  border-radius:5px;
  transition:background .1s, color .1s;
}
.concord-ref:hover{ background:rgba(245,217,154,0.08); color:#fff7e3 }
.concord-ref-label{ font-family:'Cormorant Garamond', serif; font-size:14px }