/* /css/grid/wavelength-deep.css
   Page-only styles for grid/wavelength-deep.php. Loaded after landing.css.
   Prefix .wd- so nothing leaks into the shared theme.
   Group colours: g1 orange (mindsets), g2 cyan (traits), g3 violet (two people).
   Mobile first. Motion draws once, and is off for people who ask for less. */
.egl-wrap .wd-g1{color:#f0932b}
.egl-wrap .wd-g2{color:#83e6ff}
.egl-wrap .wd-g3{color:#b48cff}
.wd-tri{display:inline-block;width:12px;height:11px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}

/* ---------- the map ---------- */
.egl-wrap .wd-map{margin:18px 0;padding:14px 8px 8px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12)}
.wd-map svg{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
.wd-map text{font-family:inherit;fill:#fff}
.wd-m-t1{font-size:28px;font-weight:700}
.wd-m-t2{font-size:26px;font-weight:700;fill:#111!important}
.wd-m-t3{font-size:26px;font-weight:700}
.wd-m-t4{font-size:22px;fill:#c9d6e2!important}
.wd-m-bam rect{fill:#f0932b}
.wd-m-l{stroke:rgba(255,255,255,.45);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:wd-draw 1.4s ease .3s forwards}
.wd-m-l1{animation-delay:.9s}.wd-m-l2{animation-delay:1.1s}.wd-m-l3{animation-delay:1.3s}
.wd-m-n{opacity:0;animation:wd-in .6s ease forwards}
.wd-map .wd-g1{animation-delay:1.4s}.wd-map .wd-g2{animation-delay:1.6s}.wd-map .wd-g3{animation-delay:1.8s}
.wd-m-pt{fill:currentColor;stroke:#fff;stroke-opacity:.5;stroke-width:1.5}
@keyframes wd-draw{to{stroke-dashoffset:0}}
@keyframes wd-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- topic rows ---------- */
.egl-wrap .wd-grp{margin:26px 0 8px}
.egl-wrap .wd-gh{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 10px;font-size:22px;color:#fff}
.egl-wrap .wd-gh .wd-tri{color:inherit;width:16px;height:15px}
.wd-grp.wd-g1 .wd-gh .wd-tri{color:#f0932b}.wd-grp.wd-g2 .wd-gh .wd-tri{color:#83e6ff}.wd-grp.wd-g3 .wd-gh .wd-tri{color:#b48cff}
.egl-wrap .wd-gh small{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#c9d6e2}
.wd-topic{margin:0 0 8px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}
.wd-topic[open]{border-color:currentColor}
.wd-topic summary{display:flex;align-items:center;gap:12px;min-height:48px;box-sizing:border-box;padding:10px 16px;cursor:pointer;list-style:none;color:#fff}
.wd-topic summary::-webkit-details-marker{display:none}
.wd-topic summary:after{content:"+";margin-left:4px;font-size:22px;line-height:1;color:#ffb35c}
.wd-topic[open] summary:after{content:"\2212"}
.wd-name{flex:1 1 auto;min-width:0;font-size:17px;font-weight:700}
.wd-dots{display:inline-flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.wd-dots .wd-tri{color:inherit}
.wd-grp.wd-g1 .wd-dots{color:#f0932b}.wd-grp.wd-g2 .wd-dots{color:#83e6ff}.wd-grp.wd-g3 .wd-dots{color:#b48cff}
.wd-n{min-width:20px;text-align:right;font-size:14px;color:#c9d6e2}
.wd-body{padding:2px 16px 14px}
.wd-field{display:block;margin:0 0 10px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#ffb35c}
.wd-body ul{list-style:none;margin:0;padding:0}
.egl-wrap .wd-body li{max-width:none;margin:0 0 10px;padding:0 0 0 14px;border-left:3px solid rgba(255,255,255,.3);font-size:15px;line-height:1.55;color:#e8e8e8}
.wd-body em{color:#fff}
.apple-first .wd-body li{max-width:none}

/* ---------- decades ---------- */
.wd-dec{margin:18px 0 6px}
.wd-dr{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.wd-dl{flex:0 0 52px;font-size:14px;font-weight:700;color:#c9d6e2}
.wd-bar{display:flex;height:22px;min-width:6px;border-radius:4px;overflow:hidden;transform-origin:left;animation:wd-grow .9s ease both}
.wd-bar i{display:block;background:currentColor}
.wd-bar .wd-g1{background:#f0932b}.wd-bar .wd-g2{background:#83e6ff}.wd-bar .wd-g3{background:#b48cff}
.wd-dn{font-size:14px;color:#fff}
.egl-wrap .wd-key{max-width:none;display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:14px}
@keyframes wd-grow{from{transform:scaleX(0)}to{transform:none}}

/* ---------- the json ---------- */
.wd-json{margin:16px 0;padding:14px 16px;overflow-x:auto;border-radius:10px;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);
  font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;color:#bfe9ff;white-space:pre}

@media (min-width:700px){
  .wd-topic summary{padding:10px 20px}
  .wd-body{padding:2px 20px 16px}
}
@media (max-width:480px){
  .wd-dots{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wd-m-l,.wd-m-n,.wd-bar{animation:none!important}
  .wd-m-l{stroke-dashoffset:0}
  .wd-m-n{opacity:1}
}