/* ──────────────────────────────────────────────────────────────────
   cite-styles.css — visual grammar for prose auto-links and tier badges.
   Loaded by every page. Three link classes (who said it) plus five
   tier classes (how trustworthy the underlying claim is). See
   docs/canon-engine-roadmap.md and docs/canon-policy.md.
   ──────────────────────────────────────────────────────────────────── */

/* ── PROSE LINK CLASSES (Phase A) ───────────────────────────────── */

/* Oda's text — canon authority. Gold solid underline. */
.cite-canon {
  color: #d4a44a;
  text-decoration: underline;
  text-decoration-color: rgba(212, 164, 74, 0.6);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  font-weight: 600;
  cursor: pointer;
  transition: color .12s, text-decoration-color .12s;
}
.cite-canon:hover {
  color: #f5c95e;
  text-decoration-color: #f5c95e;
}

/* Reader's question text — navigation only, NOT endorsement. Faint dotted. */
.cite-context {
  color: #aaa090;
  text-decoration: underline dotted;
  text-decoration-color: rgba(170, 160, 144, 0.45);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .12s;
}
.cite-context:hover {
  color: #e8d8b0;
  text-decoration-color: #e8d8b0;
}

/* Theory body — speculation context. Ink-blue solid. */
.cite-theory {
  color: #6a9ec8;
  text-decoration: underline;
  text-decoration-color: rgba(106, 158, 200, 0.55);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .12s, text-decoration-color .12s;
}
.cite-theory:hover {
  color: #9bc1de;
  text-decoration-color: #9bc1de;
}

/* ── TIER CLASSES (Phase B+) — for individual claims ───────────── */
/* Each one is a distinct pattern + colour so they read at a glance */

.tier-canon {
  color: #d4a44a;
  text-decoration: underline solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.tier-likely {
  color: #6a9ec8;
  text-decoration: underline solid;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* SPECULATION = violet dotted (NOT yellow — too close to canon-gold) */
.tier-speculation {
  color: #b07cd1;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.tier-rumour {
  color: #ff8b3c;
  text-decoration: underline dashed;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.tier-disproven {
  color: #c84b4b;
  text-decoration: line-through solid;
  text-decoration-thickness: 1.5px;
  opacity: 0.85;
}

/* Tier badges — small inline chip next to a value */
.tier-badge {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
  font-weight: 700;
  font-family: ui-monospace, "Cascadia Code", monospace;
}
/* ── Global keyboard accessibility ─────────────────────────────── */
/* Every interactive element in the Codex gets a visible focus ring
   when reached via keyboard (Tab). Mouse focus stays subtle. */
*:focus-visible {
  outline: 2px solid #d4a44a;
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible, a:focus-visible {
  outline-color: #f5c95e;
  outline-offset: 3px;
}
/* Skip-to-content link — appears only when keyboard-focused */
.skip-link {
  position: absolute; left: -9999px;
  top: 8px; left: 8px;
  background: #d4a44a; color: #0c0a14;
  padding: 8px 14px; border-radius: 6px;
  text-decoration: none; font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 8px; }

.tier-badge.canon       { background: rgba(212,164,74,0.15);  color: #d4a44a; border: 1px solid rgba(212,164,74,0.35); }
.tier-badge.likely      { background: rgba(106,158,200,0.15); color: #6a9ec8; border: 1px solid rgba(106,158,200,0.35); }
.tier-badge.speculation { background: rgba(176,124,209,0.15); color: #b07cd1; border: 1px solid rgba(176,124,209,0.35); }
.tier-badge.rumour      { background: rgba(255,139,60,0.15);  color: #ff8b3c; border: 1px solid rgba(255,139,60,0.35); }
.tier-badge.disproven   { background: rgba(200,75,75,0.15);   color: #c84b4b; border: 1px solid rgba(200,75,75,0.35); }

/* ── SHARED PAGE HERO & GOLD RULE ────────────────────────────────── */
/* Applied to content pages via .page-hero wrapper around .page-title + .page-sub */
.page-hero{text-align:center;padding:40px 24px 0;max-width:900px;margin:0 auto}
.page-hero .page-title{
  background:linear-gradient(180deg,#f5c95e 0%,#d4a44a 60%,#a07020 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.page-hero .page-sub,.page-hero .blurb{
  color:#6a9ec8;text-align:center;max-width:680px;margin-left:auto;margin-right:auto;
  font-style:italic;letter-spacing:1px;margin-bottom:0;
}
.page-hero h2.title{
  background:linear-gradient(180deg,#f5c95e 0%,#d4a44a 60%,#a07020 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-align:center;
}
.gold-rule{
  width:200px;height:2px;margin:28px auto;
  background:linear-gradient(to right,transparent,#d4a44a,transparent);
  position:relative;
}
.gold-rule::before,.gold-rule::after{
  content:'✦';position:absolute;top:-10px;color:#d4a44a;font-size:.85rem;
}
.gold-rule::before{left:-2px}.gold-rule::after{right:-2px}