/* ── Variables ─────────────────────────────────── */
:root {
  --gold: #c9a84c; --gold-light: #e8cb7a; --gold-dim: #7a6030;
  --parchment: #f5efe0; --parchment-dark: #e8ddc8;
  --ink: #1a1208; --ink-mid: #3d2e10;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'EB Garamond', serif;
  background: var(--ink); color: var(--parchment);
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; padding: 2rem 1rem; overflow-x: hidden;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, #2d1f08 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 100%, #1a0d00 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 100%, #1a0010 0%, transparent 60%);
}
.container { position: relative; z-index: 1; width: 100%; max-width: 860px; }

/* ── Header ────────────────────────────────────── */
header { text-align: center; margin-bottom: 2.5rem; padding: 2rem 1rem 1.5rem; border-bottom: 1px solid var(--gold-dim); position: relative; }
h1 { font-family: 'Cinzel', serif; font-size: clamp(1.6rem,4vw,2.6rem); color: var(--gold); letter-spacing: .05em; text-shadow: 0 0 40px rgba(201,168,76,.3); margin-bottom: .4rem; }
.subtitle { color: var(--gold-dim); font-style: italic; font-size: 1rem; letter-spacing: .05em; }
.ornament { color: var(--gold-dim); font-size: 1.4rem; letter-spacing: .5em; display: block; margin: .5rem 0; opacity: .6; }
.settings-btn { position: absolute; top: 1rem; right: 0; background: none; border: 1px solid var(--gold-dim); color: var(--gold-dim); font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; padding: .35rem .8rem; border-radius: 2px; cursor: pointer; transition: color .2s, border-color .2s; }
.settings-btn:hover { color: var(--gold); border-color: var(--gold); }
.active-config { position: absolute; top: 1rem; left: 0; font-size: .75rem; color: var(--gold-dim); font-style: italic; }

/* ── Input ─────────────────────────────────────── */
.input-section { background: rgba(245,239,224,.04); border: 1px solid var(--gold-dim); border-radius: 2px; padding: 1.8rem 2rem; margin-bottom: 1.5rem; position: relative; }
.input-section::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(201,168,76,.1); border-radius: 2px; pointer-events: none; }
label { display: block; font-family: 'Cinzel', serif; font-size: .75rem; color: var(--gold); letter-spacing: .15em; text-transform: uppercase; margin-bottom: .7rem; }
.input-row { display: flex; gap: .8rem; align-items: stretch; }
input[type="text"] { flex: 1; background: rgba(245,239,224,.07); border: 1px solid var(--gold-dim); border-radius: 2px; color: var(--parchment); font-family: 'EB Garamond', serif; font-size: 1.15rem; padding: .7rem 1rem; outline: none; transition: border-color .2s, box-shadow .2s; }
input[type="text"]::placeholder { color: rgba(245,239,224,.25); }
input[type="text"]:focus { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(201,168,76,.2), inset 0 0 12px rgba(201,168,76,.05); }
button.primary { font-family: 'Cinzel', serif; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; background: var(--gold-dim); color: var(--parchment); border: 1px solid var(--gold); border-radius: 2px; padding: .7rem 1.5rem; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; }
button.primary:hover { background: var(--gold); color: var(--ink); box-shadow: 0 0 20px rgba(201,168,76,.3); }
.examples { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.examples-label { color: var(--gold-dim); font-size: .85rem; font-style: italic; }
.example-chip { background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.25); color: var(--gold-light); font-family: 'EB Garamond', serif; font-size: .9rem; padding: .2rem .7rem; border-radius: 2px; cursor: pointer; transition: background .15s; }
.example-chip:hover { background: rgba(201,168,76,.18); }

/* ── Result cards ──────────────────────────────── */
.results { display: flex; flex-direction: column; gap: 1.2rem; }
.result-card { background: rgba(245,239,224,.04); border: 1px solid var(--gold-dim); border-radius: 2px; overflow: visible; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.result-header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(201,168,76,.15); flex-wrap: wrap; }
.passage-link { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold-light); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(201,168,76,.4); flex: 1; min-width: 0; transition: color .15s; }
.passage-link:hover { color: var(--gold); }
.badge { font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 2px; white-space: nowrap; }
.badge-valid   { background: rgba(45,106,45,.2);   border: 1px solid rgba(45,106,45,.5);   color: #6fcf6f; }
.badge-norm    { background: rgba(90,60,10,.3);    border: 1px solid rgba(201,168,76,.4);  color: var(--gold-light); }
.badge-invalid { background: rgba(139,26,26,.2);   border: 1px solid rgba(139,26,26,.5);   color: #e87878; }
.badge-ot      { background: rgba(92,58,26,.25);   border: 1px solid rgba(140,90,40,.4);   color: #d4a96a; }
.badge-nt      { background: rgba(26,58,92,.25);   border: 1px solid rgba(40,90,140,.4);   color: #7aabdc; }
.result-body { padding: 1.2rem 1.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.result-field label { font-size: .65rem; color: var(--gold-dim); margin-bottom: .3rem; letter-spacing: .1em; }
.result-field .value { color: var(--parchment); font-size: 1rem; line-height: 1.5; }
.result-field.full-width { grid-column: 1 / -1; }
.error-msg { color: #e87878; font-style: italic; font-size: .95rem; }

/* ── Verse pills ───────────────────────────────── */
.verse-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .3rem; }
.verse-pill {
  background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.2);
  color: var(--gold-light); font-family: 'EB Garamond', serif; font-size: .85rem;
  padding: .1rem .5rem; border-radius: 2px; cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
.verse-pill:hover { background: rgba(201,168,76,.22); border-color: rgba(201,168,76,.5); }
.verse-pill-count { color: var(--gold-dim); font-style: italic; font-size: .85rem; align-self: center; margin-left: .3rem; }

/* ── Popover ───────────────────────────────────── */
.verse-popover {
  position: fixed; z-index: 400;
  background: #1e1508; border: 1px solid var(--gold);
  border-radius: 3px; padding: 1rem 1.2rem;
  max-width: min(340px, 90vw); min-width: 220px;
  box-shadow: 0 8px 32px rgba(0,0,0,.7), 0 0 0 1px rgba(201,168,76,.1);
  animation: popIn .15s ease;
  pointer-events: auto;
}
@keyframes popIn { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.popover-ref  { font-family: 'Cinzel', serif; font-size: .75rem; color: var(--gold); letter-spacing: .08em; margin-bottom: .5rem; }
.popover-text { font-size: 1rem; line-height: 1.65; color: var(--parchment); }
.popover-text.loading { color: var(--gold-dim); font-style: italic; }
.popover-text.error   { color: #e87878; font-style: italic; font-size: .9rem; }
.popover-close { position: absolute; top: .4rem; right: .6rem; background: none; border: none; color: var(--gold-dim); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; }
.popover-close:hover { color: var(--gold); }

/* ── JSON toggle ───────────────────────────────── */
.json-toggle { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-family: 'Cinzel', serif; font-size: .65rem; letter-spacing: .1em; color: var(--gold-dim); padding: .5rem 1.5rem; border-top: 1px solid rgba(201,168,76,.1); text-transform: uppercase; user-select: none; transition: color .15s; }
.json-toggle:hover { color: var(--gold); }
.json-block { display: none; background: rgba(10,8,3,.5); border-top: 1px solid rgba(201,168,76,.1); padding: 1rem 1.5rem; overflow-x: auto; }
.json-block.open { display: block; }
pre { color: #a8d0a8; font-family: 'Courier New', monospace; font-size: .8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }

/* ── Passage modal ─────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,7,2,.85);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 1rem; animation: fadeIn .2s ease;
}
.modal {
  background: #1e1508; border: 1px solid var(--gold);
  border-radius: 3px; width: 100%; max-width: 680px;
  max-height: 85vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 60px rgba(0,0,0,.8);
  animation: slideUp .2s ease;
}
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.modal-header { display: flex; align-items: center; padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(201,168,76,.2); gap: .8rem; flex-shrink: 0; flex-wrap: wrap; }
.modal-title  { font-family: 'Cinzel', serif; font-size: 1rem; color: var(--gold); flex: 1; min-width: 0; }
.modal-trans-select {
  background: rgba(245,239,224,.07); border: 1px solid var(--gold-dim);
  color: var(--parchment); font-family: 'Cinzel', serif; font-size: .7rem;
  letter-spacing: .06em; padding: .25rem .5rem; border-radius: 2px;
  outline: none; cursor: pointer; max-width: 160px; transition: border-color .2s;
}
.modal-trans-select:focus { border-color: var(--gold); }
.modal-trans-select option { background: #1e1508; color: var(--parchment); font-family: 'EB Garamond', serif; font-size: .9rem; }
.modal-close  { background: none; border: none; color: var(--gold-dim); font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0; transition: color .15s; flex-shrink: 0; }
.modal-close:hover { color: var(--gold); }
.modal-body   { overflow-y: auto; padding: 1.5rem; flex: 1; }
/* verse modal: auto height, no scroll needed for single verse */
.modal.verse-modal { max-height: none; height: auto; }
.modal.verse-modal .modal-body { overflow-y: visible; flex: none; }
.modal-verse  { display: flex; gap: .8rem; margin-bottom: .9rem; line-height: 1.7; }
.modal-verse-num { font-family: 'Cinzel', serif; font-size: .7rem; color: var(--gold-dim); min-width: 1.8rem; padding-top: .3rem; text-align: right; flex-shrink: 0; }
.modal-verse-text { font-size: 1.05rem; color: var(--parchment); }
.modal-loading { text-align: center; padding: 2rem; color: var(--gold-dim); font-style: italic; }
.modal-error   { color: #e87878; font-style: italic; padding: 1rem; }

/* ── Settings modal ────────────────────────────── */
.settings-modal { max-width: 460px; }
.settings-row { margin-bottom: 1.2rem; }
.settings-row label { font-size: .7rem; color: var(--gold); font-family: 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: .5rem; }
select {
  width: 100%; background: rgba(245,239,224,.07); border: 1px solid var(--gold-dim);
  color: var(--parchment); font-family: 'EB Garamond', serif; font-size: 1rem;
  padding: .55rem .8rem; border-radius: 2px; outline: none; cursor: pointer;
  transition: border-color .2s;
}
select:focus { border-color: var(--gold); }
select option { background: #1e1508; color: var(--parchment); }
.settings-footer { display: flex; justify-content: flex-end; gap: .8rem; padding: 1rem 1.5rem; border-top: 1px solid rgba(201,168,76,.15); flex-shrink: 0; }
.btn-ghost { font-family: 'Cinzel', serif; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; background: none; border: 1px solid var(--gold-dim); color: var(--gold-dim); border-radius: 2px; padding: .5rem 1.1rem; cursor: pointer; transition: color .2s, border-color .2s; }
.btn-ghost:hover { color: var(--gold); border-color: var(--gold); }

/* ── Empty state ───────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--gold-dim); }
.empty-state .big-icon { font-size: 3rem; display: block; margin-bottom: 1rem; opacity: .3; }
.empty-state p { font-style: italic; font-size: 1rem; }
footer { text-align: center; margin-top: 3rem; color: rgba(201,168,76,.2); font-size: .8rem; font-style: italic; }

@media (max-width: 560px) {
  .result-body { grid-template-columns: 1fr; }
  .input-row   { flex-direction: column; }
}