/* Verse Island — The Keeper's Codex (/vault crafting book).
 *
 * A bound almanac of forged Verse. The page's ONE bold move is the book itself: an aged
 * parchment spread inside a gilt frame, each craft pressed in as a sealed ledger entry
 * (a wax stamp marks compile-verified vs draft), metadata set in mono like a catalogued
 * specimen. Everything else stays quiet. Palette extends the house tokens (island cyan,
 * treasure amber, ink slate); the parchment surface is the deliberate departure — it is a
 * book, so it gets to look like paper. Light + dark, responsive, reduced-motion honoured.
 */

.vb-scope {
  /* Parchment + gilt token system (light). */
  --vb-page:        #f4ead2;   /* aged paper */
  --vb-page-edge:   #e7d6b0;   /* page shade near the spine/edges */
  --vb-page-deep:   #ddc79b;   /* deepest fold */
  --vb-ink:         #3a2c17;   /* brown ink */
  --vb-ink-soft:    #715c39;   /* faded ink for secondary text */
  --vb-ink-faint:   #a08a5f;
  --vb-gilt:        #b07d1a;   /* gilt line */
  --vb-gilt-bright: #d9a521;   /* gilt highlight */
  --vb-rule:        rgba(90, 68, 30, .28);   /* hairline ledger rule */
  --vb-leather:     #4a3418;
  --vb-seal-gold:   #c69214;   /* intact wax seal (verified) */
  --vb-seal-gold-d: #8a6410;
  --vb-seal-grey:   #a99a7e;   /* cracked seal (draft) */
  --vb-cyan:        #0891b2;   /* island tie — verified glow only */
  --vb-ribbon:      #b23a2e;   /* bookmark ribbon */
  --vb-plate:       #14110b;   /* dark code plate on the page */
  color: var(--vb-ink);
}
.dark .vb-scope {
  --vb-page:        #241b10;   /* warm dark vellum — NOT the cold site ink */
  --vb-page-edge:   #1d150c;
  --vb-page-deep:   #171008;
  --vb-ink:         #ecdfc4;
  --vb-ink-soft:    #c3ae83;
  --vb-ink-faint:   #93825f;
  --vb-gilt:        #d7a83a;
  --vb-gilt-bright: #f2c85a;
  --vb-rule:        rgba(215, 180, 110, .22);
  --vb-leather:     #d7a83a;
  --vb-seal-gold:   #e0af3e;
  --vb-seal-gold-d: #a9801f;
  --vb-seal-grey:   #6f6450;
  --vb-cyan:        #22d3ee;
  --vb-ribbon:      #c04a3c;
  --vb-plate:       #0b0906;
}

/* ── Cover plate (hero) ─────────────────────────────────────────────────── */
.vb-cover-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--vb-gilt);
}
.vb-cover-title {
  font-family: 'Fredoka', 'Sora', ui-sans-serif, sans-serif;
  font-weight: 700; letter-spacing: -.01em;
}

/* ── The tome — parchment page inside a gilt frame ──────────────────────── */
.vb-tome {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(90deg, var(--vb-page-edge), var(--vb-page) 8%, var(--vb-page) 92%, var(--vb-page-edge)),
    var(--vb-page);
  border-radius: 6px;
  box-shadow: 0 24px 60px -28px rgba(20,12,0,.55), 0 2px 0 rgba(255,255,255,.15) inset;
  padding: clamp(1rem, 3vw, 2.4rem);
}
/* Gilt double-rule frame drawn inside the page. */
.vb-tome::before {
  content: ""; position: absolute; inset: 10px;
  border: 1.5px solid var(--vb-gilt);
  border-radius: 3px;
  box-shadow: 0 0 0 3px var(--vb-page), 0 0 0 4px color-mix(in srgb, var(--vb-gilt) 45%, transparent);
  pointer-events: none;
}
/* Faint aged speckle so the paper isn't flat. */
.vb-tome::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(120,90,40,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 62%, rgba(120,90,40,.05) 0 1px, transparent 1px),
    radial-gradient(circle at 44% 84%, rgba(120,90,40,.045) 0 1px, transparent 1px);
  background-size: 140px 140px, 190px 190px, 160px 160px;
  mix-blend-mode: multiply; opacity: .7;
}
.dark .vb-tome::after { mix-blend-mode: screen; opacity: .35; }

/* Ribbon bookmark hanging from the top edge. */
.vb-ribbon {
  position: absolute; top: -6px; right: clamp(1.5rem, 6vw, 3.5rem);
  width: 26px; height: 84px; z-index: 2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--vb-ribbon) 78%, #000), var(--vb-ribbon));
  box-shadow: 0 6px 10px -4px rgba(0,0,0,.5);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
}

/* ── Catalog bar — search + sort styled as an index strip ───────────────── */
.vb-catalog { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.vb-search-wrap { position: relative; flex: 1 1 16rem; }
.vb-search-wrap::before {
  content: "🔍"; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  font-size: .8rem; opacity: .5; pointer-events: none;
}
.vb-input, .vb-select {
  width: 100%; font-family: 'Inter', sans-serif; font-size: .85rem;
  color: var(--vb-ink);
  background: color-mix(in srgb, var(--vb-page) 70%, #fff 12%);
  border: 1px solid var(--vb-rule);
  border-radius: 999px; padding: .55rem 1rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.dark .vb-input, .dark .vb-select { background: color-mix(in srgb, var(--vb-page) 82%, #000 6%); }
.vb-input { padding-left: 2.1rem; }
.vb-select { width: auto; font-weight: 600; cursor: pointer; }
.vb-input::placeholder { color: var(--vb-ink-faint); }
.vb-input:focus, .vb-select:focus {
  border-color: var(--vb-gilt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vb-cyan) 30%, transparent);
}

/* ── Chapter tabs (tag facets) ──────────────────────────────────────────── */
.vb-facets { display: flex; flex-wrap: wrap; gap: .4rem; }
.vb-tab {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; font-weight: 500;
  letter-spacing: .02em; color: var(--vb-ink-soft);
  background: transparent; border: 1px solid var(--vb-rule);
  border-radius: 999px; padding: .3rem .7rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background .15s, color .15s, border-color .15s;
}
.vb-tab:hover { border-color: var(--vb-gilt); color: var(--vb-ink); }
.vb-tab[aria-pressed="true"] {
  background: var(--vb-gilt);
  background: linear-gradient(180deg, var(--vb-gilt-bright), var(--vb-gilt));
  border-color: var(--vb-gilt); color: #2a1e08; font-weight: 600;
}
.vb-tab-n { opacity: .6; font-size: .62rem; }
.vb-tab[aria-pressed="true"] .vb-tab-n { opacity: .8; }

.vb-count {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .04em; color: var(--vb-ink-faint); text-transform: uppercase;
}

/* ── The spread — two pages with a center gutter on wide screens ─────────── */
.vb-spread { position: relative; display: grid; grid-template-columns: 1fr; gap: 0 clamp(1.4rem, 4vw, 3rem); }
@media (min-width: 900px) {
  .vb-spread { grid-template-columns: 1fr 1fr; }
  .vb-spread::before {   /* the spine gutter shadow — absolutely placed so it never disturbs entry flow */
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 2px; pointer-events: none;
    background: linear-gradient(180deg, transparent, var(--vb-page-deep) 12%, var(--vb-page-deep) 88%, transparent);
    box-shadow: 0 0 22px 10px var(--vb-page-deep);
    opacity: .5;
  }
}

/* ── An entry — a sealed ledger row ─────────────────────────────────────── */
.vb-entry {
  width: 100%; text-align: left; cursor: pointer; background: transparent;
  border: none; border-bottom: 1px solid var(--vb-rule);
  padding: 1rem .2rem 1rem 0; display: grid;
  grid-template-columns: 46px 1fr; gap: .9rem; align-items: start;
  transition: background .15s;
}
.vb-entry:hover { background: color-mix(in srgb, var(--vb-gilt) 8%, transparent); }
.vb-entry:focus-visible { outline: 2px solid var(--vb-cyan); outline-offset: 2px; border-radius: 4px; }

/* Wax seal — the signature per-entry mark. */
.vb-seal {
  width: 42px; height: 42px; border-radius: 50%; position: relative;
  display: grid; place-items: center; font-size: 1rem; flex-shrink: 0;
  color: #2a1e08;
  background: var(--vb-seal-gold);
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--vb-seal-gold) 70%, #fff 30%), var(--vb-seal-gold) 55%, var(--vb-seal-gold-d));
  box-shadow: 0 2px 5px -1px rgba(0,0,0,.4), 0 0 0 2px color-mix(in srgb, var(--vb-seal-gold-d) 60%, transparent);
}
.vb-seal::after {   /* stamped rim */
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--vb-seal-gold-d) 70%, transparent);
}
.vb-seal.is-draft {
  color: #efe7d6;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--vb-seal-grey) 60%, #fff 20%), var(--vb-seal-grey) 60%, #7b6f57);
  box-shadow: 0 2px 5px -1px rgba(0,0,0,.35), 0 0 0 2px rgba(90,80,60,.5);
  /* a crack across the draft seal */
  clip-path: polygon(0 0, 100% 0, 100% 44%, 62% 52%, 100% 60%, 100% 100%, 0 100%);
}

.vb-entry-title {
  font-family: 'Fredoka', 'Sora', sans-serif; font-weight: 600; font-size: 1.02rem;
  line-height: 1.2; color: var(--vb-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vb-entry-glyphs { font-size: .85rem; }
.vb-stars {
  font-family: 'JetBrains Mono', monospace; font-size: .8rem; letter-spacing: .08em;
  color: var(--vb-gilt); margin-top: .15rem;
}
.vb-note {
  font-family: 'Inter', sans-serif; font-style: italic; font-size: .82rem; line-height: 1.45;
  color: var(--vb-ink-soft); margin-top: .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vb-metaline {
  font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .04em;
  color: var(--vb-ink-faint); text-transform: uppercase; margin-top: .5rem;
  display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center;
}
.vb-chiplet {
  font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .03em;
  color: var(--vb-ink-soft); border: 1px solid var(--vb-rule); border-radius: 3px;
  padding: .05rem .35rem; text-transform: lowercase;
}

/* ── Folio pagination ───────────────────────────────────────────────────── */
.vb-folio { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.vb-folio-btn {
  font-family: 'Fredoka', sans-serif; font-size: .82rem; font-weight: 600; cursor: pointer;
  color: var(--vb-ink); background: transparent; border: none; padding: .3rem .6rem;
  display: inline-flex; align-items: center; gap: .35rem; transition: color .15s, transform .15s;
}
.vb-folio-btn:hover:not(:disabled) { color: var(--vb-gilt); }
.vb-folio-btn:hover:not(:disabled).is-next { transform: translateX(2px); }
.vb-folio-btn:hover:not(:disabled).is-prev { transform: translateX(-2px); }
.vb-folio-btn:disabled { opacity: .3; cursor: default; }
.vb-folio-num {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .1em;
  color: var(--vb-ink-soft); text-transform: uppercase;
}

/* ── Empty / anon states — invitations, in-voice ────────────────────────── */
.vb-state { text-align: center; padding: clamp(2rem, 8vw, 4.5rem) 1rem; }
.vb-state-mark { font-size: 3rem; margin-bottom: .6rem; }
.vb-state-title { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.25rem; color: var(--vb-ink); }
.vb-state-body { font-family: 'Inter', sans-serif; font-size: .9rem; color: var(--vb-ink-soft); max-width: 26rem; margin: .5rem auto 1.25rem; line-height: 1.5; }
.vb-btn {
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: .85rem; cursor: pointer;
  color: #2a1e08; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  background: var(--vb-gilt);
  background: linear-gradient(180deg, var(--vb-gilt-bright), var(--vb-gilt));
  border: 1px solid var(--vb-seal-gold-d); border-radius: 999px; padding: .6rem 1.3rem;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.4); transition: filter .15s, transform .15s;
}
.vb-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ── Detail — a single illuminated page ─────────────────────────────────── */
.vb-page-panel {
  position: relative;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.10), transparent 55%),
    var(--vb-page);
  border-radius: 8px;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}
.vb-page-panel::before {
  content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--vb-gilt);
  border-radius: 4px; box-shadow: 0 0 0 3px var(--vb-page); pointer-events: none;
}
.vb-page-body { position: relative; }
.vb-detail-close {
  font-family: 'Fredoka', sans-serif;
  background: var(--vb-leather); color: var(--vb-page);
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.5);
}
.dark .vb-detail-close { color: #241b10; }

.vb-d-title { font-family: 'Fredoka', 'Sora', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.15; color: var(--vb-ink); }
.vb-d-meta { font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; margin-top: .3rem; }
.vb-d-verified { color: var(--vb-seal-gold-d); }
.dark .vb-d-verified { color: var(--vb-seal-gold); }
.vb-d-draft { color: #a9701f; }
.vb-d-fav { font-size: 1.6rem; line-height: 1; background: none; border: none; cursor: pointer; color: var(--vb-gilt); }
.vb-d-levelband {
  font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 500; letter-spacing: .08em;
  color: var(--vb-gilt); border-top: 1px solid var(--vb-rule); border-bottom: 1px solid var(--vb-rule);
  padding: .4rem 0; margin: .1rem 0;
}
.vb-d-note {
  font-family: 'Inter', sans-serif; font-style: italic; font-size: .92rem; line-height: 1.55;
  color: var(--vb-ink-soft); border-left: 2px solid var(--vb-gilt); padding-left: .8rem;
}
.vb-d-label {
  font-family: 'JetBrains Mono', monospace; font-size: .64rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vb-ink-faint); margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.vb-d-label::after { content: ""; flex: 1; height: 1px; background: var(--vb-rule); }
.vb-power { font-family: 'Inter', sans-serif; font-size: .88rem; color: var(--vb-ink); display: flex; gap: .5rem; align-items: flex-start; }
.vb-power-mark { color: var(--vb-gilt); flex-shrink: 0; }
.vb-specimen {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var(--vb-ink);
  background: color-mix(in srgb, var(--vb-page) 60%, #fff 8%);
  border: 1px solid var(--vb-rule); border-radius: 4px; padding: .2rem .5rem .2rem .25rem;
}
.dark .vb-specimen { background: color-mix(in srgb, var(--vb-page) 80%, #000 8%); }
.vb-specimen img { width: 20px; height: 20px; object-fit: contain; }
/* Code = an inset obsidian tablet on the page, gilt-edged. */
.vb-code-plate { border-radius: 6px; padding: 3px; background: linear-gradient(180deg, var(--vb-gilt), var(--vb-seal-gold-d)); }
.vb-code-plate > pre { margin: 0; border-radius: 4px; background: var(--vb-plate) !important; }

@media (prefers-reduced-motion: reduce) {
  .vb-entry, .vb-folio-btn, .vb-btn, .vb-tab, .vb-input, .vb-select { transition: none !important; }
  .vb-folio-btn:hover { transform: none !important; }
}