/* ============================================================
   04 LIVE SIMULATIONS — homepage band + its layer (V48)
   The activities themselves live in simulations/ and run in a frame.
   ============================================================ */

/* ---------- shared bits ---------- */
.sim-lock{flex:0 0 auto;width:34px;height:34px;background:var(--ink);display:grid;place-items:center}
.sim-lock::before{content:'';width:16px;height:16px;background:var(--orange-bright);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center/contain no-repeat}
.sim-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sim-tags li{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 12px;border:1px solid var(--ink-18);background:var(--white);color:var(--ink)}
.sim-live{display:inline-flex;align-items:center;gap:7px;color:var(--paper)}
.sim-live i{width:8px;height:8px;border-radius:50%;background:#2BD38A;box-shadow:0 0 0 4px rgba(43,211,138,.18);animation:simPulse 1.8s ease-in-out infinite}
@keyframes simPulse{50%{box-shadow:0 0 0 7px rgba(43,211,138,.05)}}
.sim-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;
  background:var(--ink);color:var(--paper);font-family:var(--display);font-weight:700;font-size:clamp(16px,1.6vw,22px);letter-spacing:-.02em;
  padding:10px 22px 10px 10px;white-space:nowrap;box-shadow:0 18px 40px rgba(15,30,38,.35);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .2s}
.sim-play i{width:clamp(38px,3.4vw,48px);aspect-ratio:1;background:var(--orange);display:grid;place-items:center}
.sim-play i::before{content:'';border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff;margin-left:3px}

/* state chips */
.sim-st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;white-space:nowrap;line-height:1}
.sim-st.is-new{background:var(--paper2);color:var(--text-muted)}
.sim-st.is-progress{background:#FFF1C9;color:#7A5600}
.sim-st.is-progress i{width:7px;height:7px;border-radius:50%;background:#E2A400;animation:simBlink 1.6s ease-in-out infinite}
@keyframes simBlink{50%{opacity:.35}}
.sim-st.is-done{background:#DDF3E8;color:#17663F}
.sim-st.is-done i{font-style:normal;font-weight:700;font-size:11px}

/* ---------- homepage band ---------- */
.band-sim{border-top:1px solid var(--ink-12)}
.sim-home{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.sim-title{font-size:clamp(34px,3.7vw,58px);line-height:1;letter-spacing:-.04em}
.sim-title em{display:block;font-style:normal;color:var(--orange)}
.band-sim .band-note{max-width:44ch}
.sim-protect{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding:16px 18px;background:var(--white);border-left:4px solid var(--orange);max-width:560px}
.sim-protect p{font-size:15px;line-height:1.5;color:var(--text-secondary)}
.sim-protect b{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.sim-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:26px}
.sim-progress{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.sim-progress b{color:var(--ok)}

.sim-stage{display:block;width:100%;padding:0;border:0;background:var(--ink);color:var(--paper);text-align:left;cursor:pointer;box-shadow:0 30px 60px -24px rgba(23,43,54,.45);position:relative}
.sim-stage-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-secondary)}
.sim-stage-bar #simStageLabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-stage-tech{color:var(--orange-bright)}
.sim-stage-shot{display:block;position:relative;margin:0 10px 10px;aspect-ratio:16/9;overflow:hidden;background:#0F1E26}
.sim-stage-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .3s}
.sim-stage:hover .sim-stage-shot img,.sim-stage:focus-visible .sim-stage-shot img{transform:scale(1.02);filter:brightness(.92)}
.sim-stage:hover .sim-play,.sim-stage:focus-visible .sim-play{transform:translate(-50%,-50%) scale(1.06);background:var(--orange);color:var(--ink)}
.sim-stage:hover .sim-play i,.sim-stage:focus-visible .sim-play i{background:var(--ink)}
.sim-stage:focus-visible{outline:3px solid var(--orange);outline-offset:4px}

.sim-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(128px,1fr);gap:12px;margin-top:clamp(28px,3vw,44px);
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 10px;scrollbar-width:thin}
.sim-card{scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:0 0 4px;background:none;border:0;cursor:pointer;color:var(--ink);min-width:0}
.sim-card-shot{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border:2px solid var(--ink-12);background:var(--white);transition:border-color .2s}
.sim-card-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.sim-card:hover .sim-card-shot,.sim-card.is-on .sim-card-shot{border-color:var(--orange)}
.sim-card:hover .sim-card-shot img{transform:scale(1.04)}
.sim-card[data-state="done"] .sim-card-shot{border-color:#7FC9A3}
.sim-card.is-on[data-state="done"] .sim-card-shot,.sim-card[data-state="done"]:hover .sim-card-shot{border-color:var(--orange)}
.sim-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-top:4px}
.sim-card-num{font-size:11px;letter-spacing:.14em;color:var(--text-muted)}
.sim-card b{font-family:var(--display);font-size:16px;letter-spacing:-.02em;line-height:1.15}
.sim-card-kind{font-size:12.5px;color:var(--text-muted)}
.sim-card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.sim-card .sim-st{font-size:8.5px;padding:4px 6px}

@media (max-width:1100px){
  .sim-home{grid-template-columns:minmax(0,1fr)}
  .band-sim .band-note{max-width:60ch}
}
@media (max-width:640px){
  .sim-stage-bar{font-size:9px;gap:10px;padding:10px 12px}
  .sim-stage-tech{display:none}
  .sim-stage-shot{margin:0 6px 6px}
  .sim-strip{grid-auto-columns:minmax(200px,62%)}
  .sim-play{gap:10px;padding:8px 16px 8px 8px}
  .sim-protect{padding:14px}
  .sim-tags li{font-size:9.5px;padding:8px 10px}
  .sim-actions .btn{width:100%;justify-content:center}
}

/* ---------- layer ---------- */
.sl{display:flex;flex-direction:column;gap:18px}
.sl-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px 28px;align-items:end}
.sl-intro h2{font-size:clamp(26px,3vw,40px)}
.sl-progress{margin-top:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.sl-progress b{color:var(--ok)}
.sl-protect{display:flex;gap:12px;align-items:center;background:var(--white);border-left:4px solid var(--orange);padding:12px 14px;font-size:14px;line-height:1.45;color:var(--text-secondary)}
.sl-protect b{color:var(--ink)}
.sl-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:18px;align-items:start}
.sl-list{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--ink-12)}
.sl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-bottom:1px solid var(--ink-12);background:none;text-align:left;cursor:pointer;color:var(--ink);transition:background .2s;position:relative}
.sl-row:last-child{border-bottom:0}
.sl-row:hover{background:var(--paper)}
.sl-row.is-on{background:var(--ink);color:var(--paper)}
.sl-row.is-on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.sl-num{font-size:11px;letter-spacing:.1em;color:var(--text-muted);flex:0 0 auto}
.sl-row.is-on .sl-num{color:var(--orange-bright)}
.sl-name{flex:1;min-width:0;display:flex;flex-direction:column}
.sl-name b{font-family:var(--display);font-size:15.5px;letter-spacing:-.02em;line-height:1.2}
.sl-name small{font-size:12px;color:var(--text-muted)}
.sl-row.is-on .sl-name small{color:var(--dark-secondary)}
.sl-row .sim-st{font-size:8px;padding:4px 6px}
.sl-row:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}

.sl-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.sl-frame{background:var(--ink);color:var(--dark-secondary)}
.sl-bar{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.sl-bar #slLabel{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-tools{display:flex;gap:6px}
.sl-tools button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--paper);background:none;border:1px solid var(--dark-border);padding:7px 10px;cursor:pointer;transition:background .2s,border-color .2s}
.sl-tools button:hover,.sl-tools button:focus-visible{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.sl-screen{position:relative;margin:0 8px 8px;aspect-ratio:16/9;background:#0F1E26}
/* the whole frame fits the screen height on laptops; the notes sit below it */
.sl-frame{width:100%;max-width:max(560px,calc((100vh - 400px) * 16 / 9 + 16px));margin:0 auto}
.sl-frame:has(.sl-screen:fullscreen){max-width:none}
.sl-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0F1E26}
.sl-screen:fullscreen{margin:0;aspect-ratio:auto;width:100%;height:100%}
.sl-screen:-webkit-full-screen{margin:0;width:100%;height:100%}
.sl-poster{display:none;position:absolute;inset:0}
.sl-poster img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.9)}

.sl-info{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}
.sl-real,.sl-built{background:var(--white);border:1px solid var(--ink-12);padding:16px 18px}
.sl-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}
.sl-real ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}
.sl-real li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45}
.sl-real li::before{content:'';position:absolute;left:0;top:.45em;width:8px;height:8px;background:var(--orange)}
.sl-built .sim-tags li{font-size:9.5px;padding:7px 9px}
.sl-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px}
.sl-cta .mono{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}

@media (max-width:1100px){
  .sl-intro{grid-template-columns:1fr}
  .sl-grid{grid-template-columns:240px minmax(0,1fr)}
  .sl-row{padding:10px 12px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 10px}
  .sl-row [data-sim-chip]{grid-column:2}
  .sl-info{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sl-grid{grid-template-columns:1fr}
  .sl-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory}
  .sl-row{flex:0 0 auto;width:220px;border-bottom:0;border-right:1px solid var(--ink-12);scroll-snap-align:start}
  .sl-frame{max-width:none}
}
@media (max-width:700px){
  .sl-screen iframe{display:none}
  .sl-poster{display:block}
  .sl-tools{display:none}
  .sl-real ul{grid-template-columns:1fr}
  .sl-row{width:190px;padding:10px 12px}
  .sim-play{gap:10px;padding:8px 16px 8px 8px}
  .sl-bar{font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  .sim-live i,.sim-st.is-progress i{animation:none}
}