/* ══════════════════════════════════════════════════════════
   EYE OF HORUS WILD SYMBOL — page-specific layer
   (tokens + shared components inherited from base.css/layer.css)
   ══════════════════════════════════════════════════════════ */

/* ── single-row 5-tile strip (Before Horus / Five-symbol sections) ── */
.wh-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wh-cell{aspect-ratio:var(--tile-r)/1}
.wh-cell .tile{width:100%;height:100%}

/* ── before/after pair with an arrow between (Expansion demo / upgrade strip) ── */
.wh-expand{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(10px,1.6vw,18px);align-items:center}
.wh-mini{padding:clamp(6px,.9vw,10px)}
.wh-mini-lb{font-family:var(--orn);font-weight:700;font-size:.64rem;letter-spacing:.14em;
  text-transform:uppercase;color:#F3E3B6;text-align:center;margin-bottom:5px;
  text-shadow:0 1px 2px rgba(0,0,0,.45)}

/* ── payline groups toggled by class instead of the hidden attribute
   (avoids the SVG [hidden] quirk entirely; also respects reduced motion) ── */
.wh-pl{opacity:0;transition:opacity .25s ease-out}
.wh-pl.on{opacity:1}

/* ── "what Horus represents" equivalence row ── */
.wh-rep{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-bottom:.3rem}
.wh-rep-eq{font-family:var(--orn);font-weight:900;font-size:1.6rem;color:var(--turq-dk)}

/* ── Horus vs Scatter two-column contrast ── */
.wh-vs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(10px,1.6vw,18px);align-items:center}
.wh-vs-x{font-family:var(--orn);font-weight:900;font-size:1.8rem;color:var(--red);
  text-align:center}

/* ── generic responsive 2-up wrapper (trigger pair / real-vs-false pattern) ── */
.wh-real2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:.9rem}

/* ── generic responsive 2-up wrapper for whole viz panels (lifecycle strips) ── */
.wh-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);
  margin-top:1.2rem}

/* ── anatomy-of-Horus annotated diagram ── */
.wh-anat{text-align:center;max-width:560px;margin:0 auto}
.wh-anat-core{width:104px;height:104px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#D8FAFB,#8DE0E4 55%,#36AFB6);
  border:3px solid var(--gold);
  box-shadow:0 0 20px rgba(23,162,168,.45),inset 0 0 14px rgba(14,124,131,.4)}
.wh-anat-core img{width:64%;height:64%;filter:drop-shadow(0 2px 4px rgba(0,40,45,.5))}
.wh-anat-name{margin-top:.55rem;font-family:var(--orn);font-weight:900;font-size:.82rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.wh-anat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,16px);
  margin-top:1.6rem;text-align:left}
.wh-callout{position:relative;border:2px solid var(--line);border-radius:12px;
  padding:.8rem .9rem;background:var(--card)}
.wh-callout::before{content:'';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:2px;height:14px;background:var(--turq-dk)}
.wh-callout::after{content:'';position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--turq-dk)}
.wh-callout b{display:block;font-family:var(--orn);font-weight:900;font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:.35rem}
.wh-callout p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.5}

/* ── reel-by-reel eligibility flags (Horus by reel) ── */
.wh-flagrow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-bottom:.2rem}
.wh-flag{display:block;text-align:center;padding:.35rem .3rem;font-weight:700;font-size:.64rem;
  letter-spacing:.04em;line-height:1.3;border-radius:6px;margin:0 3px}
.wh-flag.mid{background:var(--turq-lt);color:#08474B}
.wh-flag.end{background:#FDEDEB;color:#8A2A20}

/* ── quick-reference diagram ── */
.wh-qref{text-align:center}
.wh-qref-core{width:132px;height:132px;margin:0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 42%,#FFEBB4,#EFD08A 62%,#E0B96A);
  border:3px solid var(--gold-dk);
  box-shadow:0 0 24px rgba(233,168,28,.4),inset 0 0 16px rgba(150,100,10,.3)}
.wh-qref-core img{width:66%;height:66%;filter:drop-shadow(0 2px 4px rgba(60,40,0,.4))}
.wh-qref-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.6vw,16px);margin-top:1.6rem;text-align:left}
.wh-qcard{display:block;border:2px solid var(--line);border-radius:12px;padding:.85rem 1rem;
  background:var(--card);transition:border-color .2s,box-shadow .2s,background .2s}
a.wh-qcard:hover{border-color:var(--turq-dk);background:#FFFDF5;
  box-shadow:0 8px 22px rgba(14,124,131,.16)}
.wh-qcard b{display:block;font-family:var(--orn);font-weight:900;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--turq-dk);margin-bottom:.35rem}
.wh-qcard p{margin:0;font-size:.84rem;color:var(--muted);line-height:1.5}

/* ── "what Horus cannot do" strike list ── */
.wh-nope{border:2px solid var(--red);border-radius:14px;padding:clamp(14px,1.8vw,20px) clamp(16px,2vw,24px);
  background:#FDEDEB;max-width:72ch;margin:0 auto}
.wh-nope ul{margin:0;padding:0;list-style:none;display:grid;gap:.6rem}
.wh-nope li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.wh-nope li::before{content:'';flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--red);margin-top:.5rem}

/* ══════════ RESPONSIVE ══════════ */
@media(max-width:980px){
  .wh-two{grid-template-columns:1fr}
}
@media(max-width:760px){
  .wh-expand{grid-template-columns:1fr}
  .wh-expand .farrow{flex-direction:row;gap:.7rem;min-height:0}
  .wh-expand .farrow i{transform:rotate(90deg)}
  .wh-vs{grid-template-columns:1fr}
  .wh-vs-x{transform:rotate(90deg)}
  .wh-real2{grid-template-columns:1fr}
  .wh-anat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wh-qref-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wh-cell{min-width:46px}
}
@media(max-width:560px){
  .wh-anat-grid{grid-template-columns:1fr}
  .wh-qref-grid{grid-template-columns:1fr}
  .wh-flagrow{gap:0}
  .wh-flag{font-size:.56rem;padding:.3rem .15rem;margin:0 2px}
}
@media(prefers-reduced-motion:reduce){
  .wh-pl,.wh-qcard,.rung{transition:none}
}