/* FIVE INNOVATORS room (4 Oct 2026, crank W3). Glass cards in the Library's grammar; the five canonical colours come
   from site/innovators.js (fiveinnovators/FOUNDATION.md). Everything is scoped to #innovators. */
#innovators{padding:clamp(40px,7vh,80px) 0}
#innovators .wrap>*{max-width:none!important}
#innovators .in-body{display:flex;flex-direction:column;gap:22px;min-width:0}
#innovators .in-card{position:relative;min-width:0;padding:24px;border-radius:22px;overflow:hidden;color:#f2efe8;
  background:radial-gradient(130% 90% at 0% 0%,rgba(227,200,120,.12),transparent 52%),linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 42%,rgba(0,0,0,.28)),rgba(12,13,16,.74);
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 26px 50px -30px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);animation:in-rise .6s cubic-bezier(.2,.8,.2,1) backwards}
#innovators .in-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,#903DCF,#FF5739 25%,#003DF3 50%,#3A7D22 75%,#FFF290)}
@keyframes in-rise{from{opacity:0;transform:translateY(10px)}}
#innovators .in-k{font:500 11px "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#d8b25a;margin:0 0 10px}
#innovators .in-card h3{font:600 clamp(22px,2.4vw,30px)/1.15 "Jost",Futura,sans-serif;color:#fff;margin:0 0 12px}
#innovators .in-card p{font:15px/1.6 "IBM Plex Sans",sans-serif;color:#cfcac0;margin:0 0 12px}
#innovators .in-meta{font:13px/1.5 "IBM Plex Sans",sans-serif;color:#a9a49a;margin:8px 0 0}
#innovators .in-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
#innovators .in-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  font:600 14px "IBM Plex Sans",sans-serif;color:#12131A;background:linear-gradient(180deg,#f1dc9c,#c99a41);box-shadow:0 8px 24px rgba(227,200,120,.28)}
#innovators .in-btn svg{width:16px;height:16px}
#innovators .in-btn[disabled]{cursor:not-allowed;color:#bdb9b0;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
#innovators .in-ghost{padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:transparent;color:#e6e0d2;cursor:pointer;font:500 13px "IBM Plex Sans",sans-serif}
#innovators .in-ghost[disabled]{opacity:.35;cursor:default}
#innovators .in-link{border:0;background:none;color:#e3c878;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
#innovators button:focus-visible,#innovators a:focus-visible{outline:2px solid #e3c878;outline-offset:3px}

/* layout: art and words side by side on wide screens, stacked on a phone */
#innovators .in-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:stretch}
#innovators .in-quiz{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:860px){#innovators .in-grid,#innovators .in-quiz{grid-template-columns:minmax(0,1fr)}}
#innovators .in-art{display:grid;place-items:center;padding:18px 10px}

/* the radar */
#innovators .in-radar{display:block;width:100%;max-width:520px;height:auto;overflow:visible}
#innovators .in-radar.sm{max-width:220px;margin:4px auto 0}
#innovators .in-ring{fill:none;stroke:rgba(255,255,255,.12);stroke-width:1}
#innovators .in-ring.out{stroke:rgba(255,255,255,.3);stroke-width:1.4}
#innovators .in-spoke{stroke-width:1;opacity:.45}
#innovators .in-kite{opacity:.62;stroke:none}
#innovators .in-shape{fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
#innovators .in-dot{stroke:#fff;stroke-width:2}
#innovators .in-lab{fill:#fff;font:600 19px "Jost",Futura,sans-serif;letter-spacing:.02em}
#innovators .in-lv{fill:#bdb9b0;font:500 13px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
#innovators .in-radar *{transition:all .5s cubic-bezier(.2,.8,.2,1)}

/* intro: the five, one line each */
#innovators .in-five{list-style:none;margin:6px 0 16px;padding:0;display:grid;gap:8px}
#innovators .in-five li{display:grid;grid-template-columns:14px 96px 1fr;align-items:center;gap:10px;font:14px "IBM Plex Sans",sans-serif;color:#cfcac0}
#innovators .in-five i,#innovators .in-levels i,#innovators .in-notes i{display:inline-block;width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
#innovators .in-five b{font:600 15px "Jost",sans-serif;color:#fff}

/* quiz */
#innovators .in-top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
#innovators .in-prog{flex:1;display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
#innovators .in-prog i{height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
#innovators .in-prog i.on{background:currentColor;box-shadow:0 0 8px currentColor}
#innovators .in-prog i.now{background:rgba(255,255,255,.4)}
#innovators .in-n{font:500 12px "IBM Plex Mono",monospace;color:#bdb9b0;white-space:nowrap}
#innovators .in-q{min-height:2.3em}
#innovators .in-scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:6px}
@media (max-width:620px){#innovators .in-scale{grid-template-columns:minmax(0,1fr)}}
#innovators .in-opt{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:52px;padding:12px 14px;border-radius:14px;text-align:left;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#e6e0d2;font:500 14px/1.35 "IBM Plex Sans",sans-serif;transition:background .2s,border-color .2s,transform .2s}
#innovators .in-opt b{font:600 12px "IBM Plex Mono",monospace;color:#d8b25a}
@media (max-width:620px){#innovators .in-opt{flex-direction:row;align-items:center;gap:12px}}
#innovators .in-opt:hover:not([disabled]){border-color:rgba(227,200,120,.6);background:rgba(227,200,120,.08)}
#innovators .in-opt.sel{border-color:#e3c878;background:rgba(227,200,120,.16);color:#fff}
#innovators .in-opt[disabled]{opacity:.4;cursor:default}
#innovators .in-opt.sel[disabled]{opacity:.8}
#innovators .in-ask{font:14px "IBM Plex Sans",sans-serif;color:#cfcac0}
#innovators .in-ask b{color:#e3c878;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
#innovators .in-fc{display:grid;gap:8px}
#innovators .in-opt.fc{flex-direction:row;justify-content:space-between;align-items:center}
#innovators .in-opt em{font:600 11px "IBM Plex Mono",monospace;font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#12131A;background:#e3c878;padding:3px 8px;border-radius:999px;flex:none}
#innovators .in-opt.least em{background:rgba(255,255,255,.7)}
#innovators .in-live{text-align:center}
#innovators .in-live .in-k{margin-bottom:0}
@media (max-width:860px){#innovators .in-live{display:grid;grid-template-columns:110px 1fr;align-items:center;text-align:left;gap:4px 14px;padding:14px 18px}
  #innovators .in-live .in-radar.sm{grid-column:1;grid-row:1 / span 2;max-width:110px;margin:0}
  #innovators .in-live .in-k,#innovators .in-live .in-meta{grid-column:2}
  #innovators .in-live .in-meta{margin:0}}

/* result */
#innovators .in-lede{font-size:16px!important;color:#e6e0d2!important}
#innovators .in-levels{list-style:none;margin:16px 0;padding:0;display:grid;gap:9px}
#innovators .in-levels li{display:grid;grid-template-columns:14px 92px 106px minmax(0,1fr);align-items:center;gap:10px}
#innovators .in-levels b{font:600 15px "Jost",sans-serif;color:#fff}
#innovators .in-levels em{font:500 11px "IBM Plex Mono",monospace;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#bdb9b0}
#innovators .in-pips{display:inline-flex;gap:4px}
#innovators .in-pips u{display:block;width:18px;height:8px;border-radius:2px;background:rgba(255,255,255,.1);text-decoration:none}
#innovators .in-pips u.on{background:currentColor}
@media (max-width:520px){#innovators .in-levels li{grid-template-columns:12px 84px 82px minmax(0,1fr);gap:8px}#innovators .in-pips u{width:14px}#innovators .in-levels em{font-size:10px;letter-spacing:.04em}}
#innovators .in-notes{margin:0;display:grid;gap:4px}
#innovators .in-notes dt{display:flex;align-items:center;gap:10px;margin-top:10px;font:600 15px "Jost",sans-serif;color:#fff}
#innovators .in-notes dd{margin:0 0 0 22px;font:14px/1.55 "IBM Plex Sans",sans-serif;color:#bdb9b0}
#innovators .in-saved{margin:0;flex:1}

/* the next step, said honestly */
#innovators .in-next{border-style:dashed;border-color:rgba(227,200,120,.35)}
#innovators .in-next-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
#innovators .in-next-h .in-k{margin:0}
#innovators .in-soon{font:600 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#12131A;background:#e3c878;padding:4px 10px;border-radius:999px}
#innovators .in-next p{max-width:72ch}

/* locked and signed out */
#innovators .in-gate{max-width:720px}
#innovators .in-meter{height:10px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
#innovators .in-meter i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#903DCF,#FF5739,#003DF3,#3A7D22,#FFF290)}

@media (prefers-reduced-motion:reduce){#innovators .in-card{animation:none}#innovators .in-radar *{transition:none}}