/* ── scripz Codex Design System ──
 * Visual vocabulary: codex / library / hermetic document.
 * All tokens scoped to .codex-theme so this file can coexist with the
 * legacy nsnip-design.css until migration is complete.
 * Reference: docs/codex.md
 */

/* Typography matches the printed scripz card 1:1:
 *   - Bebas Neue (condensed-black caps, like Helvetica Neue Condensed Black on
 *     the printed labels) for headlines, KEEP-PRIVATE bands, big titles.
 *   - Source Sans 3 (the modern Source Sans Pro, same family as the LSC) for
 *     body text, captions, italic labels.
 *   - JetBrains Mono for keys, hashes, npub, mono URLs.
 */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens (scoped) ── */
.codex-theme {
  /* Background */
  --paper:        #f4ecd8;
  --paper-dark:   #e8dcb0;

  /* Inks */
  --ink:          #1a1612;
  --ink-soft:     #4a3f33;
  --ink-faint:    #8a7a66;

  /* Lines */
  --rule:         #6b5a48;

  /* Accent (use sparingly — one element per screen) */
  --accent:       #8b2c1c;
  --accent-soft:  #a04030;

  /* Type — names mirror the print card vocabulary */
  --font-display: 'Bebas Neue', 'Source Sans 3', sans-serif;
  --font-body:    'Source Sans 3', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  /* Legacy aliases retained for incremental migration (CSS files written
   * against the earlier IM-Fell vocabulary still reference these). */
  --font-serif:    var(--font-body);
  --font-serif-sc: var(--font-display);
}

/* ── Page surface (opt-in via .codex-paper on the theme root) ── */
.codex-theme.codex-paper,
.codex-theme .codex-paper {
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.015) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.010) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 30% 20%, rgba(0,0,0,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(0,0,0,0.03) 0%, transparent 55%);
  color: var(--ink);
  font-family: var(--font-serif);
}

/* ── Typography classes ──
 * Sizes mirror the printed card (LSC source-of-truth):
 *   14pt frontside title  → 1.4rem (.codex-title-xl)
 *   12pt section header   → 1.15rem (.codex-h1)
 *   11pt profile username → 1.05rem (.codex-h2)
 *    9pt section header   → 0.9rem
 *    8pt body / caption   → 0.85rem (.codex-caption, .codex-meta)
 *    6pt mono npub        → 0.62rem (.codex-mono-footer)
 * Bebas Neue is condensed display caps — letter-spacing reduced from the
 * earlier IM-Fell-Codex values (0.2em+) since Bebas Neue is already tight.
 */
.codex-theme .codex-h1 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: normal;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin: 0;
}
.codex-theme .codex-h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: normal;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0;
}
.codex-theme .codex-sc {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}
.codex-theme .codex-sc--wide {
  letter-spacing: 0.18em;
}
.codex-theme .codex-mono {
  font-family: var(--font-mono);
}
.codex-theme .codex-meta {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.codex-theme .codex-caption {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ── Double-line frame (signature element) ──
 * Apply to a block; renders an inner concentric border ~1mm inside the outer.
 */
.codex-theme .codex-frame {
  position: relative;
  border: 1px solid var(--rule);
  padding: calc(1mm + 0.75rem);
}
.codex-theme .codex-frame::before {
  content: '';
  position: absolute;
  inset: 1mm;
  border: 0.5px solid var(--rule);
  pointer-events: none;
}
.codex-theme .codex-frame > * {
  position: relative;
}

/* ── Ornament rule (horizontal divider with glyphs) ──
 *   <div class="codex-ornament-rule"><span class="orn">✦</span></div>
 * Renders: ─── ✦ ───
 */
.codex-theme .codex-ornament-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--rule);
  margin: 1rem 0;
}
.codex-theme .codex-ornament-rule::before,
.codex-theme .codex-ornament-rule::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 0.5px solid var(--rule);
}
.codex-theme .codex-ornament-rule .orn {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1;
}

/* ── Buttons ── */
.codex-theme .codex-btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.45rem 1.2rem;
  background: transparent;
  color: var(--ink);
  border: 0.5px solid var(--rule);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
  line-height: 1.35;
}
.codex-theme .codex-btn:hover {
  background: var(--paper-dark);
  color: var(--ink);
}
.codex-theme .codex-btn--accent {
  color: var(--accent);
  border-color: var(--accent-soft);
}
.codex-theme .codex-btn--accent:hover {
  background: var(--accent);
  color: var(--paper);
}

/* ── Sigil (8x8 pixel identicon) ──
 * Render as a CSS grid of 64 cells; pixels with .on get inked.
 *   <div class="codex-sigil">
 *     <span></span><span class="on"></span> ...  (64 spans total)
 *   </div>
 */
.codex-theme .codex-sigil {
  display: inline-grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 64px;
  height: 64px;
  border: 0.5px solid var(--rule);
  padding: 3px;
  background: var(--paper);
  gap: 0;
}
.codex-theme .codex-sigil > span {
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}
.codex-theme .codex-sigil > span.on {
  background: var(--ink);
}
.codex-theme .codex-sigil--lg { width: 128px; height: 128px; padding: 5px; }

/* ── Rarity glyphs ── */
.codex-theme .codex-rarity {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1;
}
.codex-theme .codex-rarity--common   { color: var(--ink-soft); }
.codex-theme .codex-rarity--uncommon { color: var(--ink-soft); }
.codex-theme .codex-rarity--rare     { color: var(--accent); }
.codex-theme .codex-rarity--arcane {
  color: var(--accent);
  text-shadow: 0 0 4px rgba(139, 44, 28, 0.45);
}

/* ── QR helper (for inline QR images on codex pages) ── */
.codex-theme .codex-qr {
  background: var(--paper);
  border: 0.5px solid var(--rule);
  padding: 6px;
  display: inline-block;
  line-height: 0;
}
.codex-theme .codex-qr img,
.codex-theme .codex-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Layout helpers ── */
.codex-theme .codex-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
}
.codex-theme .codex-stack > * + * { margin-top: 1.5rem; }
.codex-theme .codex-stack--tight > * + * { margin-top: 0.75rem; }
.codex-theme .codex-stack--loose > * + * { margin-top: 3rem; }

/* ── Links ── */
.codex-theme a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 0.5px solid var(--rule);
}
.codex-theme a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Codex Paper Card ──
 * The vertical paper-stock card adapted from the printed scripz layout.
 * Each section corresponds to one fold-panel of the physical 57×251mm label:
 *   .codex-card-keep-private  → top panel: secrets + claim + NWC
 *   .codex-card-profile       → middle panel: public profile QR
 *   .codex-card-front         → bottom panel: artwork + title (sealed face)
 * Combine sections inside .codex-paper-card. ``.codex-fold`` dashed lines
 * separate the panels.
 */
.codex-theme .codex-paper-card {
  /* Mirror the printed scripz: the card itself is paper-white, regardless
   * of the warm sepia page surface around it. Override --paper / --paper-dark
   * locally so descendants (artwork bg, sigil bg, QR plate) inherit white. */
  --paper: #ffffff;
  --paper-dark: #fafafa;
  background: #ffffff;
  border: 0.5px solid var(--rule);
  max-width: 380px;
  margin: 0 auto;
  position: relative;
}
.codex-theme .codex-paper-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 0.5px solid var(--rule);
  pointer-events: none;
}
.codex-theme .codex-paper-card > .panel {
  position: relative;
  padding: 22px 22px 26px;
}
.codex-theme .codex-fold {
  position: relative;
  height: 0;
  border-top: 0.5px dashed var(--rule);
  margin: 0 16px;
}
/* Big frontside title (matches 14pt Source Sans Pro Bold on the printed card) */
.codex-theme .codex-title-xl {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0;
  font-weight: normal;
  text-align: center;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* KEEP PRIVATE band (7.9pt Helvetica Neue Condensed Black on print) */
.codex-theme .codex-keep-private-band {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.codex-theme .codex-keep-private-band::before,
.codex-theme .codex-keep-private-band::after {
  content: '— ';
}
.codex-theme .codex-keep-private-band::after { content: ' —'; }

/* PIN line — 8pt SemiBold on print, kept mono on web for legibility */
.codex-theme .codex-pin-line {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-align: center;
  margin-top: 10px;
}
.codex-theme .codex-pin-line .label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  margin-right: 0.5rem;
  text-transform: uppercase;
}
.codex-theme .codex-pin-line .value { font-weight: 600; }

/* Inline label-with-rule (e.g. "nostr private key ____________") — matches
 * the 8pt Source Sans Pro Bold italic caption style on the printed card. */
.codex-theme .codex-label-rule {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  font-style: italic;
  color: var(--ink-soft);
}
.codex-theme .codex-label-rule::after {
  content: '';
  flex: 1;
  border-bottom: 0.5px solid var(--rule);
  height: 0;
  align-self: center;
  position: relative;
  top: -0.2em;
}

/* QR pair — "Claim URL" + "NWC Link" side-by-side */
.codex-theme .codex-qr-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 12px 0;
}
.codex-theme .codex-qr-pair .codex-qr-block { text-align: center; }
.codex-theme .codex-qr-pair .qr-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}

/* Big single QR (profile / scan-to-view) */
.codex-theme .codex-qr-big {
  text-align: center;
  margin: 16px 0;
}
.codex-theme .codex-qr-big .codex-qr {
  display: inline-block;
  padding: 8px;
}
.codex-theme .codex-qr-big img {
  width: 220px; height: 220px;
}
.codex-theme .codex-qr-big .scan-caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

/* Frontside artwork — image fills, slight inner border */
.codex-theme .codex-card-artwork {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: var(--paper);
  display: block;
  margin: 14px 0 18px;
}

/* Footer-mono (npub on bottom of card) — 6pt mono on print */
.codex-theme .codex-mono-footer {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--ink);
  text-align: center;
  word-break: break-all;
  line-height: 1.45;
  margin-top: 12px;
}

/* Bottom strip footer (NOSTR · LIGHTNING) */
.codex-theme .codex-strip-footer {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-align: center;
  padding: 10px 12px 0;
  text-transform: uppercase;
}

/* Inline secret block (nsec etc.) — 6pt on print */
.codex-theme .codex-secret-mono {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  word-break: break-all;
  background: transparent;
  line-height: 1.5;
  padding: 4px 0;
}

/* Balance display (sats) */
.codex-theme .codex-balance {
  text-align: center;
  margin: 14px 0 6px;
}
.codex-theme .codex-balance .num {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--ink);
  font-weight: 600;
}
.codex-theme .codex-balance .unit {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  margin-left: 0.4em;
  text-transform: uppercase;
}
.codex-theme .codex-balance .fiat {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 2px;
}

/* Identity-row (label · value · copy-icon) */
.codex-theme .codex-id-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 0.5px dashed var(--rule);
  cursor: pointer;
}
.codex-theme .codex-id-row:last-child { border-bottom: none; }
.codex-theme .codex-id-row .id-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.codex-theme .codex-id-row .id-value {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  word-break: break-all;
}
.codex-theme .codex-id-row .id-copy {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  border: 0.5px solid var(--rule);
  padding: 2px 8px;
  text-transform: uppercase;
}
.codex-theme .codex-id-row.copied .id-copy { color: var(--accent); border-color: var(--accent); }