/* ============================================================
   themes-detail.css — shared styles for ALL theme deep-dive pages
   ============================================================
   Used by themes-civil-nuclear.html, themes-unmanned-systems.html,
   themes-quantum.html, and any future theme detail page. The AI Stack
   page (themes-ai-stack-v2.html) keeps its own inline CSS for now —
   safer not to refactor a shipped page.

   v300: Theme-aware. Pages now follow user's light/dark choice
   via shared CSS variables (--obsidian, --ivory, --gold, etc).
   No more dark-lock. No more "jump to dark" when clicking themes
   from a light-mode page.

   Class prefix: .th-detail-* (so it doesn't collide with .ais-* used
   by AI Stack). Body data-page attribute pattern: data-page="themes-<slug>".
   ============================================================ */

/* ─── Page-level base (theme-aware) ────────────────────────── */
body[data-page^="themes-"]:not([data-page="themes-ai-stack"]):not([data-page="themes"]) {
  background: var(--obsidian);
  color: var(--ivory);
}

/* ─── Hero ───────────────────────────────────────────────────── */
.th-detail-hero {
  position: relative;
  padding: 200px 0 90px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1100px 600px at 50% 0%, var(--gold-glow), transparent 60%),
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(63, 157, 119, 0.08), transparent 70%),
    var(--obsidian);
}
.th-detail-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--gold-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold-glow) 1px, transparent 1px);
  background-size: 80px 80px;
  mask: radial-gradient(ellipse 900px 500px at 50% 40%, black 30%, transparent 80%);
  -webkit-mask: radial-gradient(ellipse 900px 500px at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
  opacity: 0.5;
}
.th-detail-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
}
.th-detail-eyebrow::before, .th-detail-eyebrow::after {
  content: ""; height: 1px; width: 40px; background: var(--gold);
}
.th-detail-h1 {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 400; line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--ivory); margin: 0 auto 24px; max-width: 1000px;
}
.th-detail-h1 em { font-style: italic; color: var(--gold); }
.th-detail-sub {
  font-size: 17px; line-height: 1.65;
  color: var(--ivory-dim);
  max-width: 720px; margin: 0 auto 40px;
}
.th-detail-meta {
  display: inline-flex; gap: 0;
  border: 1px solid var(--hairline-strong);
  background: var(--glass);
  backdrop-filter: blur(12px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 var(--gold-glow),
    0 12px 30px -18px rgba(0, 0, 0, 0.6);
}
.th-detail-meta-cell {
  padding: 14px 22px;
  border-right: 1px solid var(--hairline-strong);
  color: var(--ivory-dim);
}
.th-detail-meta-cell:last-child { border-right: none; }
.th-detail-meta-cell strong {
  color: var(--gold);
  font-weight: 600;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ─── Pyramid section (visual centerpiece) ───────────────────── */
.th-detail-pyramid {
  padding: 90px 0 50px;
  border-top: 1px solid var(--hairline-strong);
  position: relative;
  overflow: hidden;
}
.th-detail-pyramid::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 700px 400px at 50% 0%, var(--gold-glow), transparent 60%);
  pointer-events: none;
}
.th-detail-pyramid-head {
  text-align: center;
  position: relative; z-index: 1;
  margin-bottom: 30px;
}
.th-detail-pyramid-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold);
}
.th-detail-pyramid-title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400; line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ivory); margin: 14px 0 10px;
}
.th-detail-pyramid-title em {
  font-style: italic;
  color: var(--gold);
}
.th-detail-pyramid-sub {
  font-size: 15px; line-height: 1.55;
  color: var(--ivory-dim);
  max-width: 580px; margin: 0 auto;
}
.th-detail-pyramid-stage {
  position: relative; z-index: 1;
  max-width: 980px; margin: 0 auto;
}
.th-detail-pyramid-svg {
  display: block;
  width: 100%; height: auto;
}

/* ─── Layer rows ─────────────────────────────────────────────── */
.th-detail-section {
  padding: 60px 0;
  border-top: 1px solid var(--hairline-strong);
  position: relative;
}
.th-detail-section::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 64px; height: 1px;
  background: var(--gold);
}
.th-detail-layer-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 36px;
  flex-wrap: wrap;
}
.th-detail-layer-num {
  display: inline-flex;
  align-items: center; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.th-detail-layer-num::before {
  content: "";
  display: inline-block;
  width: 28px; height: 28px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--gold-glow), transparent 70%);
}
.th-detail-layer-title {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ivory);
  margin: 0;
}
.th-detail-layer-desc {
  max-width: 460px;
  font-size: 14.5px; line-height: 1.65;
  color: var(--ivory-dim);
  margin: 0;
}

/* ─── Ticker tile grid ──────────────────────────────────────── */
.th-detail-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
/* Light mode keeps dark Patek tiles (UNCHANGED — user was happy here).
   Dark mode flips to cream tiles for contrast on the obsidian page. */
.th-detail-tile {
  position: relative;
  /* Light mode default: dark Patek tile */
  background-color: #0B0D10;
  background-image: linear-gradient(180deg, rgba(20, 23, 28, 0.95), rgba(11, 13, 16, 0.95));
  border: 1px solid rgba(232, 230, 227, 0.08);
  padding: 18px 18px 16px;
  text-decoration: none;
  color: #E8E6E3;
  display: flex; flex-direction: column;
  transition:
    transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
    border-color 0.3s,
    box-shadow 0.3s;
  overflow: hidden;
  min-height: 158px;
  box-shadow:
    inset 0 1px 0 rgba(232, 230, 227, 0.04),
    0 14px 30px -20px rgba(0, 0, 0, 0.55);
}
/* Dark-mode only — flip to cream tiles */
[data-theme="dark"] .th-detail-tile {
  background-color: #FAF8F4;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F4F2EE 100%);
  border: 1px solid rgba(198, 166, 107, 0.32);
  color: #0E1116;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 14px 30px -20px rgba(0, 0, 0, 0.55);
}
.th-detail-tile::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--gold-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold-glow) 1px, transparent 1px);
  background-size: 24px 24px;
  mask: radial-gradient(ellipse 80% 70% at 20% 20%, black 10%, transparent 70%);
  -webkit-mask: radial-gradient(ellipse 80% 70% at 20% 20%, black 10%, transparent 70%);
  z-index: 0;
  opacity: 0.4;
}
.th-detail-tile > * { position: relative; z-index: 1; }
.th-detail-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow:
    inset 0 1px 0 var(--gold-glow),
    0 0 0 1px var(--gold-glow),
    0 26px 60px -24px var(--gold-glow);
}
.th-detail-tile-top {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.th-detail-tile-logo {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: linear-gradient(180deg, #FAF8F4, #E8E6E3);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.35);
}
.th-detail-tile-logo img {
  max-width: 80%; max-height: 80%;
  object-fit: contain;
}
.th-detail-tile-logo-fallback {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: #0B0D10;
  letter-spacing: 0.04em;
}
.th-detail-tile-id {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.th-detail-tile-ticker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em;
  color: #E8E6E3;
  line-height: 1.1;
}
[data-theme="dark"] .th-detail-tile-ticker { color: #0E1116; }
.th-detail-tile-name {
  font-size: 11px;
  color: #9A9893;
  line-height: 1.2; margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="dark"] .th-detail-tile-name { color: #5A5E68; }
.th-detail-tile-price-row {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.th-detail-tile-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em;
  color: #E8E6E3;
  line-height: 1;
}
[data-theme="dark"] .th-detail-tile-price { color: #0E1116; }
.th-detail-tile-chg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
}
.th-detail-tile-chg.up { color: var(--emerald-bright); }
.th-detail-tile-chg.down { color: var(--crimson-bright); }
.th-detail-tile-chg.flat { color: var(--ivory-dim); }
.th-detail-tile-score {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(232, 230, 227, 0.08);
}
[data-theme="dark"] .th-detail-tile-score { border-top-color: rgba(14, 17, 22, 0.10); }
.th-detail-tile-score-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: #9A9893;
}
[data-theme="dark"] .th-detail-tile-score-label { color: #5A5E68; }
.th-detail-tile-score-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.02em;
}
.th-detail-tile-score-val.high { color: var(--emerald-bright); }
.th-detail-tile-score-val.mid { color: var(--gold); }
.th-detail-tile-score-val.low { color: var(--crimson-bright); }
.th-detail-tile-score-val.dim { color: var(--ivory-dim); opacity: 0.7; }
.th-detail-tile.is-loading .th-detail-tile-price,
.th-detail-tile.is-loading .th-detail-tile-chg,
.th-detail-tile.is-loading .th-detail-tile-score-val {
  color: var(--ivory-dim);
  opacity: 0.6;
}

/* ─── Closing CTA ────────────────────────────────────────────── */
.th-detail-cta {
  margin: 60px 0;
  padding: 60px 40px;
  text-align: center;
  border: 1px solid var(--hairline-strong);
  background:
    radial-gradient(ellipse 800px 360px at 50% 30%, var(--gold-glow), transparent 70%),
    linear-gradient(180deg, var(--graphite-2), var(--graphite));
  position: relative;
  overflow: hidden;
}
.th-detail-cta::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--gold-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--gold-glow) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  mask: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask: radial-gradient(ellipse 70% 80% at 50% 50%, black 30%, transparent 80%);
  opacity: 0.3;
}
.th-detail-cta > * { position: relative; }
.th-detail-cta h3 {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 400; color: var(--ivory);
  margin: 0 0 16px; letter-spacing: -0.015em;
}
.th-detail-cta p {
  color: var(--ivory-dim);
  font-size: 16px; max-width: 560px; margin: 0 auto 28px;
  line-height: 1.6;
}
.th-detail-cta-row {
  display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center;
}

/* ─── v312: pyramid apex + right-callout legibility ───────────
   The apex title and the right-side ticker callout sit on the page
   surface (not on dark bands). Ivory on cream is invisible; gold on
   cream-with-gold-halo is still too faint. Use ivory in dark mode,
   DARK INK in light mode for maximum contrast against the actual
   page surface they sit on. Layer titles inside dark bands are
   handled by their inline fill="#E8E6E3" attribute. */
.th-detail-pyramid-svg text[font-style="italic"][font-size="14"],
.th-detail-pyramid-svg text[font-size="12"][letter-spacing="2.5"] {
  fill: #E8E6E3 !important;
}
[data-theme="light"] .th-detail-pyramid-svg text[font-style="italic"][font-size="14"],
[data-theme="light"] .th-detail-pyramid-svg text[font-size="12"][letter-spacing="2.5"] {
  fill: #0E1116 !important;
}

/* ─── Light-mode override safety net ─────────────────────────── */
/* The shared veridion-shared.css has [data-theme="light"] p { color:#1A1D24 !important; }
   which can leak through if any of our copy lives in a <p>. Make sure
   our class-targeted rules win by re-declaring with body[data-page] prefix. */
[data-theme="light"] body[data-page^="themes-"]:not([data-page="themes-ai-stack"]):not([data-page="themes"]) .th-detail-sub,
[data-theme="light"] body[data-page^="themes-"]:not([data-page="themes-ai-stack"]):not([data-page="themes"]) .th-detail-layer-desc,
[data-theme="light"] body[data-page^="themes-"]:not([data-page="themes-ai-stack"]):not([data-page="themes"]) .th-detail-cta p,
[data-theme="light"] body[data-page^="themes-"]:not([data-page="themes-ai-stack"]):not([data-page="themes"]) .th-detail-pyramid-sub {
  color: #2A2E38 !important;
}

/* ─── Mobile typography ─────────────────────────────────────── */
@media (max-width: 720px) {
  .th-detail-hero { padding: 130px 16px 56px; }
  .th-detail-h1 {
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.02;
  }
  .th-detail-sub {
    font-size: 15.5px;
    line-height: 1.62;
    padding: 0 8px;
  }
  .th-detail-eyebrow {
    font-size: 10px;
    letter-spacing: 0.30em;
    margin-bottom: 18px;
  }
  .th-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 10px;
  }
  .th-detail-meta-cell {
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    padding: 11px 12px;
  }
  .th-detail-meta-cell:nth-child(odd) { border-right: 1px solid var(--hairline); }
  .th-detail-meta-cell:nth-last-child(-n+2) { border-bottom: none; }
  .th-detail-meta-cell strong { font-size: 12px; }

  .th-detail-section { padding: 38px 0; }
  .th-detail-layer-num {
    font-size: 10px;
    letter-spacing: 0.30em;
  }
  .th-detail-layer-num::before { width: 22px; height: 22px; }
  .th-detail-layer-title {
    font-size: clamp(24px, 6vw, 30px);
    line-height: 1.12;
  }
  .th-detail-layer-desc {
    font-size: 14px;
    line-height: 1.6;
    margin-top: 8px;
  }
  .th-detail-layer-head {
    margin-bottom: 26px;
    gap: 14px;
  }
  .th-detail-tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .th-detail-tile {
    min-height: 150px;
    padding: 14px 14px 12px;
  }
  .th-detail-tile-top { gap: 10px; margin-bottom: 12px; }
  .th-detail-tile-logo { width: 32px; height: 32px; }
  .th-detail-tile-ticker { font-size: 13px; }
  .th-detail-tile-name { font-size: 10.5px; }
  .th-detail-tile-price { font-size: 19px; }
  .th-detail-tile-chg { font-size: 11px; }
  .th-detail-tile-score-label { font-size: 8.5px; letter-spacing: 0.20em; }
  .th-detail-tile-score-val { font-size: 14px; }

  .th-detail-cta {
    margin: 44px 0;
    padding: 44px 22px;
  }
  .th-detail-cta h3 { font-size: clamp(22px, 5.5vw, 30px); }
  .th-detail-cta p { font-size: 14.5px; }
}

@media (max-width: 380px) {
  .th-detail-tile { min-height: 144px; padding: 12px; }
  .th-detail-tile-price { font-size: 17px; }
  .th-detail-tile-logo { width: 28px; height: 28px; }
}