/* play.css: campaign widgets on top of lesson-kit.css (same tokens, same editorial look). */
.gl-lab,.gl-ladder,.gl-predict,.gl-explain,.gl-complete{border:1px solid var(--lk-rule-soft);background:var(--lk-paper-light);
  padding:1rem;margin:1.5rem 0;font-family:var(--lk-utility);font-size:.9rem;border-radius:3px}
.gl-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:.3rem 0 .6rem}
.gl-lab button,.gl-ladder button,.gl-predict button,.gl-complete button,.gl-lab select,.gl-predict input,.gl-ladder input{
  font:inherit;background:var(--lk-paper);color:var(--lk-cobalt);border:1px solid var(--lk-cobalt);padding:5px 10px;border-radius:2px;max-width:100%}
.gl-lab button,.gl-ladder button,.gl-predict button,.gl-complete button{cursor:pointer}
.gl-seg{display:inline-flex;flex-wrap:wrap;gap:0}
.gl-seg button{margin-right:-1px}
.gl-seg button.on,.gl-lab button.on{background:var(--lk-cobalt);color:#fff}
.gl-predict input{width:9rem;color:var(--lk-ink)}
.gl-ladder input{flex:1 1 16rem;color:var(--lk-ink);font-family:var(--lk-mono);font-size:.8rem}
.gl-cap{font-family:var(--lk-mono);font-size:.75rem;color:var(--lk-ink-soft);margin:.2rem 0 .4rem}
.gl-note{font-size:.8rem;color:var(--lk-ink-soft)}
.gl-strong{font-weight:600;color:var(--lk-ink)}
.gl-out{border-top:1px solid var(--lk-rule-soft);margin-top:.7rem;padding-top:.5rem}
.gl-out p{margin:.3rem 0}
.gl-link{border:0!important;background:none!important;padding:0!important;text-decoration:underline;font-size:.8rem}

/* warp lab */
.gl-warp{margin:.6rem 0}
.gl-cells{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px}
.gl-cell{font-family:var(--lk-mono);font-size:.62rem;text-align:center;padding:4px 0;border:1px solid var(--lk-rule-soft);background:#fff;overflow:hidden}
.gl-cell[data-s="0"]{background:#DCE4F6}.gl-cell[data-s="1"]{background:#F3DDD6}.gl-cell[data-s="2"]{background:#DDEBE3}.gl-cell[data-s="3"]{background:#F1E8C9}
.gl-cell[data-s="4"]{background:#E6DDF0}.gl-cell[data-s="5"]{background:#D5ECEE}.gl-cell[data-s="6"]{background:#EFD9E4}.gl-cell[data-s="7"]{background:#E3E1D8}
.gl-cell b,.gl-cell span{display:block;line-height:1.25}
.gl-cell b{font-weight:600}
.gl-cell span{font-size:.56rem;color:var(--lk-ink-soft)}

/* roofline bars */
.gl-bars{margin:.6rem 0}
.gl-barrow{display:grid;grid-template-columns:8.5rem 1fr 7rem;gap:8px;align-items:center;margin:4px 0}
.gl-barname{font-size:.8rem}
.gl-track{height:12px;background:#fff;border:1px solid var(--lk-rule-soft);position:relative}
.gl-fill{position:absolute;left:0;top:0;bottom:0;background:var(--lk-rule)}
.gl-limit .gl-fill{background:var(--lk-vermilion)}
.gl-limit .gl-barname,.gl-limit .gl-barval{color:var(--lk-vermilion);font-weight:600}
.gl-barval{font-family:var(--lk-mono);font-size:.75rem;text-align:right}

/* ladder */
.gl-rung{display:grid;grid-template-columns:minmax(0,13rem) 1fr auto;gap:8px;align-items:center;padding:3px 0;border-bottom:1px solid var(--lk-rule-soft)}
.gl-rungname{font-size:.8rem}
.gl-rungbars{display:flex;flex-direction:column;gap:2px}
.gl-bar{display:block;height:7px;min-width:2px}
.gl-ref{background:var(--lk-rule)}
.gl-mine{background:var(--lk-cobalt)}
.gl-rungval{font-family:var(--lk-mono);font-size:.7rem;color:var(--lk-ink-soft);white-space:nowrap}
.gl-locked{opacity:.45}
.gl-paste{margin-top:.8rem}

/* explain + complete */
.gl-explain textarea{width:100%;box-sizing:border-box;font:inherit;font-family:var(--lk-font);font-size:1rem;padding:.5rem;border:1px solid var(--lk-rule-soft);background:#fff}
.gl-explain ul{list-style:none;padding-left:0}
.gl-explain li{margin:.3rem 0}
.gl-mechs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:.7rem}
.gl-mech{font-family:var(--lk-mono);font-size:.72rem;border:1px dashed var(--lk-rule);padding:3px 8px;color:var(--lk-ink-soft)}
.gl-mech.on{border-style:solid;border-color:var(--lk-forest);color:var(--lk-forest);background:#E9EFE7}

/* the pause before a fix */
.lk details.gl-pause{border-left:3px solid var(--lk-vermilion)}
.lk details.gl-pause summary{color:var(--lk-vermilion)}

/* campaign map */
.gl-levels{display:grid;gap:10px;margin:1.2rem 0}
.gl-level{display:block;border:1px solid var(--lk-rule-soft);background:var(--lk-paper-light);padding:.8rem 1rem;text-decoration:none;color:var(--lk-ink)}
a.gl-level:hover{border-color:var(--lk-cobalt)}
.gl-level h3{margin:.1rem 0 .2rem;font-family:var(--lk-display);text-transform:uppercase;color:var(--lk-cobalt);font-size:1.1rem}
.gl-level p{margin:0;font-size:.9rem}
.gl-level .gl-state{font-family:var(--lk-mono);font-size:.72rem;color:var(--lk-ink-soft)}
.gl-level.done{border-color:var(--lk-forest)}
.gl-level.done .gl-state{color:var(--lk-forest)}
.gl-level.locked{opacity:.5}
.gl-earned{display:flex;flex-wrap:wrap;gap:6px}
@media (max-width:560px){.gl-cells{grid-template-columns:repeat(8,minmax(0,1fr))}.gl-barrow{grid-template-columns:6.5rem 1fr 5.5rem}.gl-rung{grid-template-columns:1fr auto}.gl-rungbars{grid-column:1/-1;order:3}}

/* thread explorer */
.gl-num input{width:4.2rem;font:inherit;font-family:var(--lk-mono);padding:4px 6px;border:1px solid var(--lk-rule-soft);background:#fff}
.gl-calc{font-family:var(--lk-mono);font-size:.82rem;background:#fff;border:1px solid var(--lk-rule-soft);padding:.5rem .7rem;margin:.4rem 0}
.gl-patch{display:grid;grid-template-columns:repeat(32,1fr);gap:1px;width:min(100%,320px);aspect-ratio:1;background:var(--lk-rule-soft);border:1px solid var(--lk-rule)}
.gl-patch span{background:#fff}
.gl-patch span.warp,.gl-key.warp{background:#9DB3E6}
.gl-patch span.me,.gl-key.me{background:var(--lk-vermilion)}
.gl-key{display:inline-block;width:12px;height:12px;border:1px solid var(--lk-rule)}
.gl-rule{font-family:var(--lk-mono);font-size:.95rem;border-left:3px solid var(--lk-cobalt);padding:.4rem .8rem;background:var(--lk-paper-light)}
.gl-keyitem{display:inline-flex;align-items:center;gap:4px}

/* uniform (same for all 32 threads of a warp) vs varying (differs per thread): two cues, not just colour */
.u{background:#E3E1D8;border:1px solid #B8B3A6;border-radius:2px;padding:0 .15em;color:var(--lk-ink)}
.v{color:var(--lk-cobalt);font-weight:700;text-decoration:underline wavy var(--lk-cobalt);text-decoration-thickness:1px;text-underline-offset:3px}
.gl-legend{font-family:var(--lk-utility);font-size:.85rem;margin:.4rem 0 1rem}
pre.gl-code{font-family:var(--lk-mono);font-size:.82rem;line-height:1.7;background:var(--lk-paper-light);border:1px solid var(--lk-rule-soft);padding:.8rem 1rem;overflow-x:auto;white-space:pre}
pre.gl-code .c{color:var(--lk-ink-soft)}

/* matmul refresher */
.gl-mats{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gl-matname{font-family:var(--lk-mono);font-size:.72rem;color:var(--lk-ink-soft);margin-bottom:3px}
.gl-matgrid{display:grid;grid-template-columns:repeat(3,2.2rem);gap:2px}
.gl-matgrid span,.gl-matgrid button{font:inherit;font-family:var(--lk-mono);text-align:center;padding:.35rem 0;border:1px solid var(--lk-rule-soft);background:#fff;color:var(--lk-ink)}
.gl-matgrid button{cursor:pointer}
.gl-matgrid .hl{background:#9DB3E6;border-color:var(--lk-cobalt)}
.gl-op{font-size:1.3rem;color:var(--lk-ink-soft)}

/* annotate */
.gl-access{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:.5rem 0}
.gl-expr{font-family:var(--lk-mono);font-size:1rem}
.gl-tok{font:inherit;cursor:pointer;margin:0 1px;padding:0 .3em;border:1px dashed var(--lk-rule);background:#fff;color:var(--lk-ink)}
.gl-tok.u{background:#E3E1D8;border:1px solid #B8B3A6}
.gl-tok.v{color:var(--lk-cobalt);font-weight:700;text-decoration:underline wavy var(--lk-cobalt);text-underline-offset:3px;border:1px solid var(--lk-cobalt)}
.gl-ok{color:var(--lk-forest);font-weight:700;margin-left:2px}
.gl-bad{color:var(--lk-vermilion);font-weight:700;margin-left:2px}
body.lk td code{white-space:nowrap}

/* tile walker */
.gl-tilegrid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;width:7.5rem;aspect-ratio:1;background:var(--lk-rule-soft);border:1px solid var(--lk-rule)}
.gl-tilegrid span,.gl-tilegrid button{background:#fff;border:0;padding:0;min-width:0}
.gl-tilegrid button{cursor:pointer}
.gl-tilegrid .strip{background:#EDEFF6}
.gl-tilegrid .done{background:#C9D5EE}
.gl-tilegrid .now{background:var(--lk-cobalt)}
.gl-tilegrid .me{background:var(--lk-vermilion)}
/* barrier race */
.gl-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:10px;margin:.6rem 0}
.gl-warpbox{border:1px solid var(--lk-rule-soft);background:#fff;padding:.6rem .8rem}
.gl-warpbox h5{margin:0 0 .3rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.gl-mono{font-family:var(--lk-mono);font-size:.8rem}
.gl-lab input[type=checkbox]{accent-color:var(--lk-cobalt)}