/* =========================================================
   Henchman of Souls — "Library of Iro" Design System v4
   FAITHFUL EXTRACTION of the live webbook reader aesthetic
   (library-entry.php + reader.css, /opt/webbook on hetzner2),
   propagated to portal/onboard/sso and marketing surfaces.
   This is NOT a new invented look — it is the existing one,
   named and made reusable.
   ========================================================= */

:root {
  /* ---- Core palette — pulled directly from library-entry.php :root
     and the live ombriadalte-bg-desktop.webp scene (twin moons, aurora,
     torchlight, stone balcony, night sky). ---- */
  --iro-ink:        #241910;   /* light-mode ink, used sparingly (legacy portal bg) */
  --iro-paper:      #f9f4e6;   /* legacy cream page (what onboarding currently uses —
                                   being phased out in favor of the night scene) */

  --iro-night-1:    #1b2027;   /* reader panel gradient dark end */
  --iro-night-2:    #252b33;   /* reader panel gradient light end */
  --iro-slate:      #313a45;   /* button / chrome surface */
  --iro-slate-dark: #262e37;   /* button / chrome surface, pressed */
  --iro-steel:      #5d829e;   /* aurora/moonlit steel-blue, from bg art */
  --iro-steel-deep: #1e3c5d;   /* deep dusk blue, from bg art */
  --iro-steel-glow: #75a1bb;   /* bright moonlit glow highlight */

  --iro-cream:      #f4f7fa;   /* primary text on dark (reader body copy) */
  --iro-cream-warm: #fffdf7;   /* headline white, warmest cream */
  --iro-gold:       #f0d58e;   /* link/accent gold (legal-note a, index links) */
  --iro-gold-dim:   #d8c8a8;   /* unit border-left, muted gold */

  --iro-line:       rgba(210,220,232,0.22);  /* the hairline border used EVERYWHERE
                                                 in the real site — always thin */
  --iro-line-soft:  rgba(210,220,232,0.14);
  --iro-shadow:     rgba(19,11,4,0.28);

  /* ---- Typography — matches reader.css @font-face declarations exactly ---- */
  --font-display: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --font-body:    'Crimson Text', Georgia, "Times New Roman", serif;
  --font-ui:      'Rajdhani', 'Segoe UI', sans-serif; /* chrome/labels only —
                                                          not used in the live
                                                          reader, but useful for
                                                          net-new UI (chain widget) */

  /* ---- Elevation — the real site uses soft inset highlight + soft outer
          shadow, NEVER a hard/thick ring. Borders are always 1px. ---- */
  --shadow-panel: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 24px rgba(0,0,0,0.22);
  --shadow-hero:  inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 60px rgba(0,0,0,0.34);
  --shadow-glow-cream: 0 0 10px rgba(244,247,250,0.28), 0 0 28px rgba(244,247,250,0.16);

  --border-hairline: 1px solid var(--iro-line);
  --border-hairline-soft: 1px solid var(--iro-line-soft);

  /* ---- Real background art + real seal renderings ---- */
  --bg-ombriadalte: url('ombriadalte-bg-desktop.webp');
  --seal-lineart:   url('seal-of-iro.png');       /* transparent line-art, no border baked in */
  --seal-stone:     url('SealOfIroStone-tight.jpg'); /* stone-carved, tight crop, thin double-ring, centered */
  --seal-color:     url('seal-color-original.png');  /* THE canonical mark: black sphere, red border,
                                                          glowing gold flaming tree, 7 colored orb "fruit".
                                                          Use for glossary refs, official/legal contexts,
                                                          and anywhere the mark itself is the subject. */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 30px;
  --radius-round: 999px;
}

/* ---- Base page shell — the exact overlay recipe from reader.css:
        two-stop dark gradient over the fixed, cover-sized night scene. ---- */
body.iro-theme {
  margin: 0;
  background:
    linear-gradient(rgba(14,18,24,0.72), rgba(14,18,24,0.80)),
    var(--bg-ombriadalte);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--iro-cream);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
}
@media (max-width: 980px) {
  body.iro-theme { background-attachment: scroll; }
}

.iro-theme h1, .iro-theme h2 {
  font-family: var(--font-display);
  color: var(--iro-cream-warm);
  letter-spacing: 0.018em;
  line-height: 1.15;
}
.iro-theme h3 {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--iro-cream-warm);
}

.iro-theme .eyebrow {
  font-family: var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(244,247,250,0.72);
}

/* ---- Hero panel — matches .library-hero exactly ---- */
.iro-hero {
  position: relative;
  overflow: hidden;
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 56px);
  color: var(--iro-cream);
  background:
    linear-gradient(rgba(14,18,24,0.74), rgba(14,18,24,0.82)),
    radial-gradient(circle at 50% 18%, rgba(210,220,232,0.16), transparent 34%),
    linear-gradient(180deg, var(--iro-night-2) 0%, var(--iro-night-1) 100%);
  box-shadow: var(--shadow-hero);
}
.iro-hero::before {
  content: '';
  position: absolute; inset: 18px;
  border: var(--border-hairline-soft);
  border-radius: 24px;
  pointer-events: none;
}

/* ---- Standard panel — matches .panel exactly ---- */
.iro-panel {
  background: linear-gradient(180deg, rgba(112,125,140,0.72) 0%, rgba(94,107,123,0.68) 100%);
  backdrop-filter: blur(4px);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 24px;
  color: var(--iro-cream);
  box-shadow: var(--shadow-panel);
}

/* ---- The Seal — soft circular frame (NOT a hard ring), matches
        .library-seal-frame + .library-seal-img exactly. Use the
        transparent line-art seal here. Glyph now fills 94% of the
        frame (was 78%) — the old value left a wide dead dark ring
        between the glyph's own glow and the frame border. ---- */
.iro-seal-frame {
  width: clamp(120px, 16vw, 200px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: var(--border-hairline);
  border-radius: var(--radius-round);
  background: radial-gradient(circle, rgba(255,253,247,0.12), transparent 62%), rgba(24,31,39,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 42px rgba(0,0,0,0.32);
  margin: 0 auto;
}
.iro-seal-img {
  display: block;
  width: 94%;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 10px rgba(244,247,250,0.28)) drop-shadow(0 0 28px rgba(244,247,250,0.16));
}

/* ---- The Seal — stone-carved variant. Source corrected 2026-07-06:
        the earlier stone photo was stretched (non-circular canvas),
        which is why every crop attempt clipped the top. Replaced with
        an undistorted source (true circle, even margins already) and
        trimmed just 3% per side to tighten the rock border slightly —
        nothing clipped, ring reads as a genuine centered circle. Use
        as-is, no extra frame, for "ancient monument" contexts (section
        dividers, marketing, cover-adjacent placements). ---- */
.iro-seal-stone {
  display: block;
  width: 100%;
  max-width: 220px;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

/* ---- The Seal — COLOR variant, the canonical mark as described in
        the glossary: black sphere, bold red circular border, glowing
        gold flaming tree rooted at the base, 7 colored orbs (fruit).
        This is the mark as it physically appears on a Melician's
        skin — use for glossary pop-ups, official/ceremonial contexts,
        and the single most "iconic" placement per page (never busy
        backgrounds; this seal needs quiet space to read). No extra
        border added — the red ring is baked into the art itself. ---- */
.iro-seal-color {
  display: block;
  width: 100%;
  max-width: 200px;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 14px 34px rgba(0,0,0,0.45),
              0 0 30px rgba(200,40,40,0.18);
}

/* ---- Buttons — matches .hero-link / .library-btn exactly ---- */
.iro-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  border: var(--border-hairline);
  background: linear-gradient(180deg, var(--iro-slate) 0%, var(--iro-slate-dark) 100%);
  color: var(--iro-cream);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color .15s ease, transform .1s ease;
}
.iro-btn:hover { border-color: rgba(255,253,247,0.4); transform: translateY(-1px); }
.iro-btn.primary { border-color: rgba(255,253,247,0.30); }
.iro-btn.secondary {
  background: linear-gradient(180deg, rgba(112,125,140,0.72), rgba(94,107,123,0.68));
}
.iro-btn.quiet { background: transparent; }

/* ---- Inputs ---- */
.iro-theme input, .iro-theme textarea, .iro-theme select {
  font-family: var(--font-body);
  font-size: 17px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: var(--border-hairline);
  background: rgba(24,31,39,0.42);
  color: var(--iro-cream);
}
.iro-theme input:focus {
  outline: none;
  border-color: var(--iro-steel-glow);
  box-shadow: 0 0 0 3px rgba(117,161,187,0.25);
}

/* ---- Links — matches .wb-inline-glossary / legal-note gold ---- */
.iro-theme a { color: var(--iro-gold); text-decoration: underline; text-decoration-color: rgba(240,213,142,0.4); }
.iro-theme a:hover { text-decoration-color: rgba(240,213,142,0.75); }

/* ---- CTA chain (net-new, styled to match the existing chrome) ---- */
.iro-chain {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  margin: 20px 0;
}
.iro-chain .step {
  padding: 6px 14px;
  border-radius: var(--radius-round);
  border: var(--border-hairline);
  color: rgba(244,247,250,0.6);
}
.iro-chain .step.done  { border-color: rgba(240,213,142,0.5); color: var(--iro-gold); }
.iro-chain .step.current {
  border-color: var(--iro-steel-glow);
  color: var(--iro-steel-glow);
  box-shadow: 0 0 12px rgba(117,161,187,0.35);
}
.iro-chain .sep { color: rgba(210,220,232,0.3); }