/* Codex theme — shared by document-codex, voice-codex, sic-protocol.
   Hero rebuild + legibility raise + visual identity. 2026-08-22. */

/* ---- the hero ---- */
.codex-page .page-header,
.codex-voice .hero{
  position:relative;overflow:hidden;text-align:left;
  margin:2.5rem 0 3.5rem;padding:4.5rem 3.5rem 4rem;
  border:1px solid rgba(255,255,255,.11);border-radius:10px;
  background:
    radial-gradient(120% 140% at 15% 0%,rgba(16,185,129,.10),transparent 55%),
    radial-gradient(90% 120% at 90% 100%,rgba(139,92,246,.08),transparent 60%),
    linear-gradient(170deg,#131313,#0b0b0b);
}
.codex-page .page-header::before,
.codex-voice .hero::before{  /* scanline texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 3px);
}
.codex-page .page-badge,
.codex-voice .hero-badge{
  font-size:.62rem;letter-spacing:.28em;color:#0a0a0a;
  background:linear-gradient(90deg,#10B981,#34d399);border:none;
  padding:.45rem 1rem;border-radius:2px;font-weight:700;
  box-shadow:0 6px 20px rgba(16,185,129,.25);
}
.codex-page .page-title,
.codex-voice .hero-title{
  font-weight:600;letter-spacing:-.01em;
  font-size:clamp(2.4rem,6.5vw,4rem);color:#f2f1ee;
  text-shadow:0 3px 20px rgba(0,0,0,.6);margin-top:.75rem;
}
.codex-page .page-subtitle,
.codex-voice .hero-subtitle{opacity:1;color:#e0dfdb;font-size:1.2rem;max-width:56ch}
.codex-page .page-tag{color:#b8b7b3;font-size:.95rem;line-height:1.75;max-width:60ch;margin-top:.8rem}
.codex-page .page-header .back-link a,
.codex-voice .hero .back-link a{
  display:inline-block;margin-top:1.1rem;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;
  color:#10B981;border:1px solid rgba(16,185,129,.35);border-radius:2px;padding:.5rem 1rem;transition:.2s;
}
.codex-page .page-header .back-link a:hover{background:rgba(16,185,129,.12);color:#e6f9f1}
/* gold hairline signature under the hero */
.codex-page .page-header,
.codex-voice .hero{box-shadow:inset 0 -2px 0 rgba(226,192,120,.25),0 24px 60px rgba(0,0,0,.45)}

/* ---- legibility raise across codex content ---- */
.codex-page{color:#d6d5d1}
.codex-page .section-desc,.codex-page .section-intro,.codex-page p{color:#c9c8c4}
.codex-page .section-title,.codex-page h2,.codex-page h3{color:#eeede9}
.codex-page .page-header p{margin-bottom:0}
.codex-page [style*="opacity: 0.6"],.codex-page [style*="opacity:.6"]{opacity:.85!important}

/* ---- visual interest: numbered section rail ---- */
.codex-page .section-title{position:relative;padding-left:1.1rem}
.codex-page .section-title::before{
  content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:3px;border-radius:2px;
  background:linear-gradient(180deg,#10B981,rgba(226,192,120,.8));
}

/* ---- width: codex containers centered and wide (match voice-codex) ---- */
.codex-page .container{max-width:1280px;margin:0 auto;padding:2.5rem 2rem 4rem}
/* ---- SIC declassified permanently ---- */
.codex-sic .redacted-content{display:none!important}
.codex-sic .full-content{display:block!important}
.codex-sic .access-gate,.codex-sic .access-error,.codex-sic .access-success{display:none!important}
.codex-sic .redact-bar{background:transparent;color:inherit}
.codex-sic .redact-blur,.codex-sic .redact-blur-heavy,.codex-sic .redact-pixel,.codex-sic .redact-glitch,.codex-sic .redact-glass{filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.codex-sic .redact-glass::before{display:none}
.codex-sic .redact-strike{text-decoration:none;opacity:1}
.codex-sic .redact-fade{opacity:1}

/* ---- v2: glass sections + breathing room ---- */
.codex-page .page-header,
.codex-voice .hero{margin-bottom:4.5rem;padding:5rem 3.5rem 4.5rem}
.codex-page .section,.codex-page .naming-box,.codex-page .thread-box{
  border:1px solid rgba(255,255,255,.09);border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.016));
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 18px 44px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06);
  padding:2.4rem 2.6rem;margin:2.8rem 0}
.codex-page .section .section,.codex-page .section .naming-box{background:rgba(0,0,0,.22);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;margin:1.6rem 0}
.codex-page .section-title{margin-bottom:1rem}
.codex-page .section-desc{margin-bottom:1.6rem}

/* voice-codex: declassified permanently (locked/unlocked pairs) */
.codex-voice .locked-only{display:none!important}
.codex-voice .unlocked-only{display:block!important}
.codex-voice .redact-bar{background:transparent;color:inherit}

/* ---- standardisation: voice-codex hero adopts the shared codex frame ---- */
.codex-voice .hero{max-width:none;margin:2.5rem 0 4.5rem;
  border-bottom:1px solid rgba(255,255,255,.11);text-align:left}
.codex-voice .hero::before{  /* replace the pink orb with the shared panel wash */
  content:"";position:absolute;inset:0;top:0;left:0;transform:none;width:auto;height:auto;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 3px);opacity:.5}
.codex-voice .hero-content{max-width:none;margin:0;position:static}
/* the pink accent survives where it belongs: the badge and the figure */
.codex-voice .hero-badge{background:linear-gradient(90deg,#e879a8,#f0a0c4);color:#0a0a0a;border:none;
  box-shadow:0 6px 20px rgba(232,121,168,.25)}
.codex-voice .hero .back-link a{color:#e879a8;border-color:rgba(232,121,168,.35)}
.codex-voice .hero .back-link a:hover{background:rgba(232,121,168,.12);color:#fde6f0}
.codex-voice .tty-line{border-top-color:rgba(232,121,168,.22);color:#e879a8}
.codex-voice .tty-line .tty-cur{background:#e879a8}

/* ---- mobile harmonisation (2026-08-27): one card geometry on phones ----
   The three codex pages built their frames differently (voice-codex sets
   sections directly on <body>; the others nest in .container). On phones
   they now share one geometry: .9rem gutters, the same card padding, the
   same radius — and grids stay inside their cards. */
@media (max-width: 768px){
  body.codex-page{padding-left:0 !important;padding-right:0 !important}
  .codex-page .container{padding:1rem .9rem 2.5rem}
  body.codex-page > .section{margin-left:.9rem;margin-right:.9rem}
  .codex-page .section,.codex-page .naming-box,.codex-page .thread-box{
    padding:1.5rem 1.15rem;margin-top:1.2rem;margin-bottom:1.2rem;border-radius:10px}
  .codex-page .section .section,.codex-page .section .naming-box{margin-left:0;margin-right:0}
  .codex-page .page-header,.codex-voice .hero{
    margin:1rem 0 2rem;padding:2.6rem 1.4rem 2.4rem}
  .codex-page .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .codex-page .rel-grid > *{min-width:0}
  .codex-page [class*="-grid"] > *{min-width:0}
}