/* AI Game Lab: mission player (instructions + workbench), activities, replay and inspection views.
   Built from the page's tokens (index.html :root), so light and dark themes follow automatically. */

/* ---------- shared ---------- */
.gl-badge { display: inline-flex; align-items: center; gap: 6px; font: 700 .74rem var(--f-body); letter-spacing: .01em; padding: 3px 9px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); white-space: nowrap; max-width: 100%; }
@media (max-width: 560px) { .gl-badge { white-space: normal; text-align: left; border-radius: 12px; } }
.gl-badge svg { width: 13px; height: 13px; flex: none; }
.gl-badge.m-recorded { border-color: color-mix(in srgb, var(--cc) 60%, var(--line)); }
.gl-badge.m-sim { border-color: color-mix(in srgb, var(--cd) 60%, var(--line)); }
.gl-badge.m-case { border-color: color-mix(in srgb, var(--cb) 55%, var(--line)); }
.gl-badge.m-training, .gl-badge.m-live { border-color: color-mix(in srgb, var(--ca) 60%, var(--line)); }
.gl-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-ev { display: inline-block; font: 700 .68rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin-right: 6px; vertical-align: 1px; cursor: help; background: var(--surface); }
.gl-ev.e-constructed { border-style: dashed; }
.gl-ev.e-sim { border-style: dotted; }
.gl-bar { height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.gl-bar i { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.gl-muted { color: var(--muted); }
.gl-kicker { font: 700 .72rem var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.gl-link { border: 0; background: none; padding: 0; color: var(--ca); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------- author preview ---------- */
.gl-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; }
.gl-hero p { color: var(--muted); max-width: 64ch; margin: .45em 0 0; }

/* ---------- mission player ---------- */
.gl-player .phead { max-width: none; flex-wrap: wrap; row-gap: 6px; }
.gl-player .phead h2 { font-size: 1.05rem; flex: 1 1 200px; min-width: 0; }
.gl-depth { display: flex; align-items: center; gap: 8px; }
.gl-depth > span { font: 700 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 640px) { .gl-depth > span { display: none; } .gl-depth .segb { padding: 6px 8px; font-size: .8rem; } }
.gl-rail { display: flex; gap: 4px; padding: 6px 16px 8px; overflow-x: auto; border-bottom: 1.5px solid var(--line); scrollbar-width: thin; }
.gl-rail button { display: flex; align-items: center; gap: 6px; border: 1.5px solid transparent; background: none; border-radius: 10px; padding: 5px 9px; font: 600 .84rem var(--f-body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.gl-rail button .n { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--f-mono); border: 1.5px solid var(--line); }
.gl-rail button.done .n { background: var(--good); border-color: var(--good); color: #fff; }
.gl-rail button[aria-current="step"] { color: var(--ink); border-color: var(--line); background: var(--surface); }
.gl-rail button[aria-current="step"] .n { border-color: var(--ca); color: var(--ca); }
.gl-rail button:disabled { cursor: not-allowed; opacity: .55; }
.gl-rail button .t { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .gl-rail button .t { display: none; } .gl-rail button[aria-current="step"] .t { display: inline; } }

.gl-main { flex: 1; overflow-y: auto; container-type: size; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "pane bench" "act bench"; grid-template-rows: auto 1fr; column-gap: 20px; padding: 16px 20px 32px; align-items: start; }
.gl-pane { grid-area: pane; min-width: 0; }
.gl-actarea { grid-area: act; min-width: 0; }
/* 100cqh is .gl-main's content box (its 16px + 32px padding left out): the sticky workbench ends above the footer, at rest or stuck
   (without container units: the window less the header, rail, footer and padding) */
.gl-bench { grid-area: bench; position: sticky; top: 0; max-height: calc(100vh - 214px); max-height: calc(100cqh + 16px); overflow-y: auto; min-width: 0; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; }
@media (max-width: 900px) {
  .gl-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pane" "bench" "act"; grid-template-rows: auto; padding: 12px 14px 28px; row-gap: 12px; }
  .gl-bench { position: static; max-height: none; }
}
.gl-player .gl-foot { padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* one row at every width: the status line gives way (ending in …) before a button would wrap */
.gl-foot .pfoot-in { flex-wrap: nowrap; }
.gl-foot .fb { flex: 1 1 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-foot .btn { flex: none; }
.gl-foot .btn svg { width: 18px; height: 18px; flex: none; }
.gl-foot .backb { min-height: 44px; }
.gl-foot .gl-primary span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-chhead h2 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); letter-spacing: -.01em; margin-bottom: 8px; }
.gl-goal { font-size: .9rem; background: var(--surface2); border-radius: 10px; padding: 7px 10px; margin: 0 0 14px; }
.gl-goal b { font: 700 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.gl-blk { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; }
.gl-blk p { margin: 0 0 .6em; }
.gl-blk p:last-child { margin-bottom: 0; }
.gl-blk.note { background: color-mix(in srgb, var(--cc) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--cc) 35%, var(--line)); border-radius: 12px; padding: 10px 12px; font-size: .93rem; }
.gl-blk code, .gl-q code { font-family: var(--f-mono); font-size: .88em; background: var(--surface2); padding: 1px 5px; border-radius: 5px; }
.gl-refsline { font-size: .78rem; color: var(--muted); margin-top: 3px; }
.gl-refsline a { color: var(--muted); }
.gl-deeper { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 12px; background: var(--surface); }
.gl-deeper > summary { cursor: pointer; padding: 8px 12px; font-weight: 700; font-size: .92rem; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.gl-deeper > summary::-webkit-details-marker { display: none; }
.gl-deeper > summary::before { content: "+"; font: 700 .95rem var(--f-mono); color: var(--muted); width: 12px; }
.gl-deeper[open] > summary::before { content: "−"; }
.gl-deeper .lvl { font: 700 .66rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.gl-deeper > div { padding: 0 12px 10px 32px; font-size: .95rem; }
.gl-src { margin: 0; font: .82rem/1.5 var(--f-mono); background: var(--surface2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; }
.gl-eq { font: 600 1rem var(--f-mono); background: var(--surface); border: 1.5px solid var(--line); border-left: 4px solid var(--hi); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; overflow-x: auto; }
.gl-eq small { font: 400 .82rem var(--f-body); color: var(--muted); }
.gl-done-grp { opacity: .92; }

/* activity */
.gl-actv { border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; margin: 4px 0 14px; background: var(--surface); }
.gl-actv.current { border-color: color-mix(in srgb, var(--ca) 55%, var(--line)); }
.gl-actv > .gl-kicker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gl-actv .prompt { font-size: 1rem; margin-bottom: 10px; }
.gl-actv .prompt p { margin: 0 0 .5em; }
.gl-wbnote { font-size: .86rem; color: var(--muted); display: flex; gap: 6px; align-items: center; margin: 4px 0 8px; }
.gl-q { margin: 0 0 12px; }
.gl-q > .q { font-weight: 700; margin: 0 0 8px; }
.gl-opts { display: grid; gap: 7px; }
.gl-opt { display: flex; align-items: flex-start; gap: 10px; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 11px; padding: 9px 12px; cursor: pointer; font: inherit; font-size: .95rem; color: var(--ink); }
.gl-opt:hover { border-color: var(--muted); }
.gl-opt .box { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--muted); border-radius: 50%; display: grid; place-items: center; }
.gl-opt.multi .box { border-radius: 5px; }
.gl-opt[aria-pressed="true"], .gl-opt[aria-checked="true"] { border-color: var(--ca); background: color-mix(in srgb, var(--ca) 8%, var(--surface)); }
.gl-opt[aria-pressed="true"] .box, .gl-opt[aria-checked="true"] .box { border-color: var(--ca); background: var(--ca); }
.gl-opt[aria-pressed="true"] .box::after, .gl-opt[aria-checked="true"] .box::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--surface); }
.gl-opt.multi[aria-checked="true"] .box::after { width: 8px; height: 4px; border-radius: 0; background: none; border: 2px solid var(--surface); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.gl-opt:disabled { cursor: default; }
.gl-opt .mark { margin-left: auto; font: 700 .74rem var(--f-mono); white-space: nowrap; padding-left: 8px; }
.gl-opt.is-right { border-color: var(--good); }
.gl-opt.is-right .mark { color: var(--good); }
.gl-opt.is-wrong { border-color: var(--bad); }
.gl-opt.is-wrong .mark { color: var(--bad); }
.gl-opt .t { flex: 1; min-width: 0; }
.gl-ctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.gl-ctl .btn svg { width: 16px; height: 16px; }
.gl-fb { border-radius: 12px; padding: 10px 12px; margin-top: 12px; font-size: .95rem; border: 1.5px solid var(--line); background: var(--surface2); }
.gl-fb h4 { font: 800 1rem var(--f-display); margin: 0 0 4px; display: flex; gap: 6px; align-items: center; }
.gl-fb h4 svg { width: 18px; height: 18px; }
.gl-fb.ok { border-color: color-mix(in srgb, var(--good) 55%, var(--line)); background: var(--good-bg); }
.gl-fb.ok h4 { color: var(--good); }
.gl-fb.no { border-color: color-mix(in srgb, var(--bad) 55%, var(--line)); background: var(--bad-bg); }
.gl-fb.no h4 { color: var(--bad); }
.gl-fb.info h4 { color: var(--ink); }
.gl-fb ul { margin: 4px 0 0; padding-left: 1.1em; }
.gl-fb li { margin: 3px 0; }
.gl-fb .expl { border-top: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); margin-top: 8px; padding-top: 8px; }
.gl-fb .expl p { margin: 0 0 .5em; }
.gl-hints { margin-top: 10px; display: grid; gap: 6px; }
.gl-hint { font-size: .92rem; background: color-mix(in srgb, var(--hi) 20%, var(--surface)); border-radius: 10px; padding: 7px 10px; }
.gl-hint b { font: 700 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; margin-right: 6px; }
.gl-status { font: 600 .78rem var(--f-mono); color: var(--muted); }
.gl-nav { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 8px; padding-top: 12px; border-top: 1.5px solid var(--line); }
.gl-nav .btn svg { width: 16px; height: 16px; }

/* categorize */
.gl-cat { display: grid; gap: 8px; }
.gl-cat .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 10px; align-items: center; }
@media (max-width: 520px) { .gl-cat .row { grid-template-columns: 1fr; gap: 4px; } }
.gl-cat .item { font-weight: 700; font-size: .95rem; }
.gl-cat select, .gl-select { font: inherit; font-size: .92rem; padding: 7px 9px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); width: 100%; }
.gl-cat .row.is-wrong select { border-color: var(--bad); }
.gl-cat .row.is-right select { border-color: var(--good); }

/* artifact */
.gl-art { border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0 0 12px; }
.gl-art .ttl { font: 700 .76rem var(--f-mono); padding: 5px 10px; background: var(--surface2); border-bottom: 1px solid var(--line); }
.gl-art ol { margin: 0; padding: 6px 0; list-style: none; font: .84rem/1.6 var(--f-mono); counter-reset: ln; overflow-x: auto; }
.gl-art ol li { counter-increment: ln; padding: 0 10px; white-space: pre; }
.gl-art ol li::before { content: counter(ln); display: inline-block; width: 2ch; color: var(--muted); margin-right: 12px; text-align: right; }
.gl-art .log { border-top: 1px dashed var(--line); padding: 6px 10px; font: .8rem/1.55 var(--f-mono); white-space: pre; overflow-x: auto; color: var(--muted); }

/* writing */
.gl-write textarea { width: 100%; min-height: 140px; font: 1rem/1.5 var(--f-body); padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); resize: vertical; }
.gl-write .count { font: 600 .78rem var(--f-mono); color: var(--muted); margin-top: 4px; }
.gl-rubric { display: grid; gap: 6px; margin-top: 10px; }
.gl-rubric label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: .92rem; }
.gl-rubric label input { margin-top: 4px; width: 17px; height: 17px; }
.gl-rubric small { color: var(--muted); display: block; }

/* ---------- workbench ---------- */
.gl-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1.5px solid var(--line); overflow-x: auto; flex: none; scrollbar-width: none; }
.gl-tab { border: 0; background: none; font: 700 .86rem var(--f-body); color: var(--muted); padding: 10px 10px; border-bottom: 3px solid transparent; margin-bottom: -1.5px; cursor: pointer; white-space: nowrap; }
.gl-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ca); }
.gl-tab .new { font: 700 .62rem var(--f-mono); color: var(--ca); margin-left: 4px; vertical-align: 1px; }
.gl-view { padding: 14px; min-width: 0; }
.gl-demo-lbl { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 10px; font-size: .84rem; color: var(--muted); }
.gl-stage { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.gl-canvas { display: block; background: #0d1216; border-radius: 10px; border: 1px solid var(--line); image-rendering: auto; max-width: 100%; height: auto; }
.gl-readout { flex: 1 1 180px; min-width: 0; display: grid; gap: 8px; font-size: .9rem; }
.gl-readout .big { font: 800 1.35rem var(--f-display); }
.gl-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .86rem; }
.gl-kv b { font-family: var(--f-mono); font-weight: 600; }
.gl-qbars { display: grid; gap: 5px; }
.gl-qbar { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) 4.2em; gap: 8px; align-items: center; font-size: .84rem; }
.gl-qbar .track { height: 12px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.gl-qbar .track i { display: block; height: 100%; background: color-mix(in srgb, var(--ca) 45%, var(--surface)); }
.gl-qbar.on .track i { background: var(--ca); }
.gl-qbar b { font: 600 .84rem var(--f-mono); text-align: right; }
.gl-transport { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.gl-transport .iconb { width: 36px; height: 36px; border: 1.5px solid var(--line); background: var(--surface); }
.gl-transport .iconb svg { width: 18px; height: 18px; }
.gl-scrub { width: 100%; margin-top: 8px; }
.gl-scrub input { width: 100%; }
.gl-marks { position: relative; height: 10px; margin: 0 9px; }
.gl-marks i { position: absolute; top: 0; width: 2px; height: 10px; border-radius: 1px; }
.gl-marks i.pause { background: var(--hi); width: 4px; }
.gl-marks i.crash { background: var(--bad); }
.gl-marks i.rand { background: var(--cd); }
.gl-time { font: 600 .8rem var(--f-mono); color: var(--muted); }
.gl-lock, .gl-practice { font-size: .84rem; background: color-mix(in srgb, var(--hi) 22%, var(--surface)); border-radius: 8px; padding: 5px 9px; }
.gl-practice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: none; margin: 12px 14px 0; }
.gl-practice[hidden] { display: none; }
.gl-obs { display: flex; gap: 10px; flex-wrap: wrap; }
.gl-obs figure { margin: 0; display: grid; gap: 4px; justify-items: center; font: 600 .72rem var(--f-mono); color: var(--muted); }
.gl-obs canvas { image-rendering: pixelated; border: 1px solid var(--line); border-radius: 4px; background: #000; }
.gl-trans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0; }
@media (max-width: 560px) { .gl-trans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gl-trans > div { border: 1.5px solid var(--line); border-radius: 10px; padding: 8px; display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; font-size: .85rem; }
.gl-trans .lt { font: 800 1.1rem var(--f-display); }
.gl-trans .mini { display: flex; gap: 2px; }
.gl-trans .mini canvas { width: 34px; height: 34px; image-rendering: pixelated; border: 1px solid var(--line); background: #000; }
.gl-trans .val { font: 700 1.2rem var(--f-mono); }
.gl-chart { width: 100%; height: auto; display: block; }
.gl-chartkey { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0 0 4px; padding: 0 0 0 44px; font-size: 12.5px; color: var(--ink); }
.gl-chartkey li { display: inline-flex; align-items: center; gap: 6px; }
.gl-pipe { display: grid; gap: 10px; }
.gl-zone { border: 1.5px solid var(--line); border-radius: 12px; padding: 8px; background: color-mix(in srgb, var(--surface2) 40%, var(--surface)); }
.gl-zone.nested { border-style: dashed; background: var(--surface); }
.gl-zone > .zh { display: flex; justify-content: space-between; gap: 8px; align-items: center; font: 700 .78rem var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 2px 6px; }
.gl-zone ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 30px; }
.gl-zone .empty { font-size: .84rem; color: var(--muted); padding: 6px; border: 1.5px dashed var(--line); border-radius: 8px; }
.gl-pc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 8px; background: var(--surface); font-size: .9rem; }
.gl-pc .num { font: 700 .74rem var(--f-mono); color: var(--muted); min-width: 1.6em; }
.gl-pc .acts { display: flex; gap: 2px; }
.gl-pc .acts button, .gl-zone .zh button { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; width: 28px; height: 28px; cursor: pointer; font: 700 .85rem var(--f-mono); color: var(--ink); padding: 0; }
.gl-pc .acts button:disabled { opacity: .35; cursor: default; }
.gl-pc.sel { border-color: var(--ca); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ca) 30%, transparent); }
.gl-bank { display: grid; gap: 6px; }
.gl-bank h4, .gl-pipe h4 { font: 700 .78rem var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; }
.gl-bank .card { display: grid; gap: 6px; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--surface); font-size: .9rem; }
.gl-bank .card .put { display: flex; flex-wrap: wrap; gap: 4px; }
.gl-bank .card .put button { font: 600 .78rem var(--f-body); border: 1px solid var(--line); background: var(--surface2); border-radius: 7px; padding: 3px 8px; cursor: pointer; color: var(--ink); }
.gl-work { display: grid; gap: 12px; }
.gl-terms { display: grid; gap: 8px; }
.gl-term { display: grid; gap: 2px; }
.gl-term label { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: .88rem; }
.gl-term label b { font-family: var(--f-mono); color: var(--ca); }
.gl-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.gl-tbl th, .gl-tbl td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gl-tbl th { font: 700 .72rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.gl-tbl td.num { font-family: var(--f-mono); text-align: right; white-space: nowrap; }
.gl-tbl tr.win td { font-weight: 700; }
.gl-dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.gl-dcard { border: 1.5px solid var(--line); border-radius: 12px; padding: 10px; display: grid; gap: 6px; font-size: .85rem; }
.gl-dcard h4 { font: 800 1.1rem var(--f-display); display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.gl-dcard h4 small { font: 600 .72rem var(--f-mono); color: var(--muted); }
.gl-dots { display: flex; flex-wrap: wrap; gap: 2px; }
.gl-dots i { width: 9px; height: 16px; border-radius: 2px; background: var(--surface2); position: relative; overflow: hidden; }
.gl-dots i b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ca); }
.gl-dots i.cap b { background: var(--good); }
.gl-legend { font-size: .8rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.gl-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; }
.gl-exp { display: grid; gap: 10px; }
.gl-exp .runs { display: grid; gap: 8px; }
.gl-sources { display: grid; gap: 12px; font-size: .9rem; }
.gl-sources h4 { font: 800 1rem var(--f-display); margin: 0; }
.gl-sources .src { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 5px; }
.gl-sources .src ul { margin: 0; padding-left: 1.1em; }
.gl-sources .src li { margin: 2px 0; }
.gl-sources .meta { font: .78rem var(--f-mono); color: var(--muted); word-break: break-all; }
.gl-st { font: 700 .7rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 1px 6px; border: 1px solid var(--line); }
.gl-st.approved { border-color: var(--good); color: var(--good); }
.gl-st.blocked { border-color: var(--bad); color: var(--bad); }
.gl-st.pending { border-color: var(--cb); color: var(--cb); }
.gl-empty { padding: 18px; text-align: center; color: var(--muted); font-size: .92rem; }
.gl-error { padding: 12px; border: 1.5px solid var(--bad); border-radius: 12px; background: var(--bad-bg); font-size: .92rem; }

/* ---------- summary ---------- */
.gl-sum { display: grid; gap: 14px; }
.gl-sum h2 { font-size: 1.5rem; }
.gl-concepts { display: grid; gap: 6px; }
.gl-concept { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font-size: .92rem; }
.gl-concept .s { font: 700 .74rem var(--f-mono); display: inline-flex; gap: 5px; align-items: center; }
.gl-concept .s.shown { color: var(--good); } .gl-concept .s.review { color: var(--bad); } .gl-concept .s.helped { color: var(--cb); } .gl-concept .s.none { color: var(--muted); }
.gl-xp { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-xp span { border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: .88rem; }
.gl-xp span.got { border-color: var(--good); }

/* ---------- author preview ---------- */
.gl-author { display: grid; gap: 16px; }
.gl-author .issue { color: var(--bad); font: .84rem var(--f-mono); }
.gl-author details { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--surface); }
.gl-author summary { cursor: pointer; font-weight: 700; }
.gl-author .state { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.gl-learncard .btn { margin-top: 10px; }
.gl-learncard p { margin: 0; font-size: .92rem; }

@media (prefers-reduced-motion: reduce) { .gl-player * { scroll-behavior: auto !important; } }

/* ---------- small screens ---------- */
.gl-opt .mark { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.gl-opt .mark svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .gl-foot .pfoot-in { gap: 10px; }
  .gl-foot .fb { display: none; }
  .gl-foot .backb span { display: none; }
  .gl-player .gl-foot .btn { min-width: 44px; }
  .gl-foot .gl-primary { flex: 1; }
  .gl-player .phead { gap: 8px; padding: 8px 12px; }
  .gl-player .phead h2 { font-size: .95rem; flex-basis: calc(100% - 140px); }
  .gl-player .tutorb { padding: 6px 9px; font-size: .8rem; }
  .gl-opt .mark span, .gl-opt .mark { font-size: .7rem; }
}

/* Mission 4: block-world views */
.gl-fstrip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; margin: 6px 0 10px; }
.gl-fcol { margin: 0; flex: 0 0 auto; width: 132px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: var(--surface); }
.gl-fcol.now { border-color: var(--hi); box-shadow: 0 0 0 1px var(--hi); }
.gl-fcol canvas { width: 100%; height: auto; display: block; border-radius: 4px; }
.gl-fcol figcaption { display: flex; flex-direction: column; font-size: .8rem; margin-top: 4px; }
.gl-fcol figcaption small { color: var(--muted); }
.gl-fna { height: 34px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .72rem; color: var(--muted); border: 1px dashed var(--line); border-radius: 4px; }
.gl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0; }
.gl-two h4 { margin: 0 0 6px; font-size: .95rem; }
.gl-two h4 small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
@media (max-width: 560px) { .gl-two { grid-template-columns: 1fr; } }
.gl-alignwrap { overflow-x: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.gl-alignwrap:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; }
.gl-align { margin: 0; font-size: .74rem; }
.gl-align th[scope="row"] { position: sticky; left: 0; background: var(--surface); white-space: nowrap; text-align: left; z-index: 1; }
.gl-align td { text-align: center; white-space: nowrap; padding: 4px 5px; }
.gl-align canvas { width: 70px; height: auto; display: block; margin: 0 auto; border-radius: 3px; }

/* ---------- touch targets: 44×44px on phones and touch screens ---------- */
@media (pointer: coarse), (max-width: 760px) {
  .gl-opt, .gl-wbnote .gl-link { min-height: 44px; }
  .gl-tab { min-height: 46px; }   /* at least 44px showing: each tab tucks 1.5px under the bar's bottom border */
  .gl-rail button { min-height: 44px; padding-left: 11px; padding-right: 11px; }   /* at least 44px wide around the chapter number */
  .gl-deeper > summary { padding-top: 11px; padding-bottom: 11px; }
  .gl-transport .iconb { width: 44px; height: 44px; }
  /* the 44px slider box (index.html) centres its track 8px lower: the marks follow it, over the box's top, and their
     strip lets the taps there through to the slider. The 2-4px marks themselves keep their titles wherever a mouse or
     trackpad can hover (a narrow window, a touch laptop); they are aria-hidden decoration */
  .gl-scrub .gl-marks { margin-bottom: -8px; pointer-events: none; }
  @media (any-hover: hover) { .gl-scrub .gl-marks i { pointer-events: auto; } }
  .gl-rubric label { min-height: 44px; }
  /* the program builder: "Add to" buttons, and each card's move and remove buttons as a 2×2 block (up over down,
     remove at the bottom right, so reading and Tab order agree), about as wide as the old row of three (90px, was
     88px), so the card's text keeps nearly all its width */
  .gl-bank .card .put button { min-height: 44px; }
  .gl-pc .acts { display: grid; grid-template-columns: repeat(2, 44px); grid-auto-flow: column; gap: 2px; }
  .gl-pc .acts button:last-child { grid-column: 2; grid-row: 2; }
  .gl-pc .acts button, .gl-zone .zh button { width: 44px; height: 44px; }
  .gl-zone > .zh > span + span { display: flex; gap: 2px; flex: none; }
  /* links that stand on their own rather than inside a sentence: a source's title, and the "Source:" line under a passage */
  .gl-sources .src > div:first-child a, .gl-refsline a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- focus layout (FOCUS in player.js): one screen at a time, quiet chrome ---------- */
.gl-focus .phead { flex-wrap: nowrap; gap: 10px; }
.gl-focus .gl-sp { flex: 1; }
.gl-focus .gl-foot { display: none; }
.gl-chwrap, .gl-optwrap { position: relative; min-width: 0; }
.gl-chbtn { display: flex; align-items: center; gap: 8px; min-height: 44px; max-width: 100%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 6px 12px; cursor: pointer; font: 700 .92rem var(--f-body); }
.gl-chbtn .ns { display: none; }
.gl-chbtn .n { font: 700 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.gl-chbtn .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-chbtn svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.gl-chbtn[aria-expanded="true"] { border-color: var(--ca); }
.gl-chlist, .gl-optmenu { position: absolute; top: calc(100% + 6px); z-index: 30; background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.gl-chlist { left: 0; width: min(340px, calc(100vw - 24px)); max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; border-bottom: 1.5px solid var(--line); }
.gl-chlist[hidden], .gl-optmenu[hidden] { display: none; }
.gl-chlist button { width: 100%; text-align: left; padding: 8px 10px; min-height: 44px; font-size: .92rem; }
.gl-chlist button .t { max-width: none; overflow: visible; white-space: normal; display: inline !important; }
.gl-optmenu { right: 0; width: min(330px, calc(100vw - 24px)); padding: 12px; }
.gl-optmenu .gl-depth { flex-wrap: wrap; }
.gl-optmenu p { margin: 8px 0 0; }
.gl-optbtn { width: 44px; height: 44px; border: 1.5px solid var(--line); background: var(--surface); }
.gl-optbtn svg { width: 18px; height: 18px; }
.gl-progress { height: 3px; background: var(--line); flex: none; }
.gl-progress i { display: block; height: 100%; width: 0; background: var(--ca); transition: width .3s ease; }

.gl-focus .gl-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 28px; padding-top: 22px; }
.gl-focus .gl-pane { max-width: 62ch; display: flex; flex-direction: column; min-height: 100%; }
.gl-steps { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.gl-dots { display: flex; gap: 5px; flex-wrap: wrap; }
.gl-dots i { width: 8px; height: 8px; border-radius: 99px; background: var(--line); transition: width .2s ease; }
.gl-dots i.done { background: color-mix(in srgb, var(--ca) 55%, var(--line)); }
.gl-dots i.on { width: 20px; background: var(--ca); }
.gl-stepn { font: 700 .72rem var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.gl-focus .gl-chhead h2 { font-size: 1.05rem; color: var(--muted); font-weight: 700; margin-bottom: 14px; }
.gl-focus .gl-chhead.first h2 { font-size: clamp(1.4rem, 2.8vw, 1.8rem); color: var(--ink); font-weight: 800; }
.gl-focus .gl-screen .gl-blk { font-size: 1.08rem; line-height: 1.65; margin-bottom: 16px; }
.gl-focus .gl-screen .gl-blk.note { font-size: .95rem; }
.gl-prov { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 10px; font-size: .78rem; color: var(--muted); }
.gl-prov .gl-ev { border: 0; background: none; padding: 0; margin: 0; font-size: .66rem; }
.gl-prov .gl-refsline { margin: 0; font-size: inherit; }
.gl-focus .gl-actv.current { border-color: var(--line); }
.gl-stepnav { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 18px 0 4px; background: linear-gradient(to bottom, transparent, var(--bg) 35%); }
.gl-stepnav .gl-sp { flex: 1; }
.gl-stepnav .backb { min-height: 44px; }
.gl-stepnav .gl-primary { min-width: 160px; }
.gl-stepnav .btn svg { width: 18px; height: 18px; flex: none; }

.gl-focus .gl-tabs { overflow: visible; flex-wrap: wrap; align-items: center; }
.gl-tabmore { margin-left: auto; }
.gl-tabmore[open] { flex-basis: 100%; margin-left: 0; }
.gl-tabmore > summary { list-style: none; cursor: pointer; font: 700 .8rem var(--f-body); color: var(--muted); min-height: 44px; display: flex; align-items: center; justify-content: flex-end; padding: 0 8px; }
.gl-tabmore > summary::-webkit-details-marker { display: none; }
.gl-tabmore > summary::after { content: ' ▾'; }
.gl-tabmenu { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 0 8px; }
.gl-tabmenu button { border: 1.5px solid var(--line); background: var(--surface); padding: 0 14px; min-height: 44px; border-radius: 99px; font: 600 .86rem var(--f-body); color: var(--ink); cursor: pointer; }
.gl-tabmenu button:hover, .gl-tabmenu button:focus-visible { background: var(--surface2); }
.gl-playb { width: 44px !important; height: 44px !important; background: var(--ink) !important; color: var(--bg) !important; border-color: var(--ink) !important; }
.gl-speed { min-width: 52px; font-family: var(--f-mono); }
.gl-about { margin-top: 10px; }
.gl-about > summary { cursor: pointer; font: 600 .82rem var(--f-body); color: var(--muted); min-height: 44px; display: flex; align-items: center; gap: 6px; }
.gl-about > summary { list-style: none; }
.gl-about > summary::-webkit-details-marker { display: none; }
.gl-about > summary::before { content: '▸'; font-size: .9em; }
.gl-about[open] > summary::before { content: '▾'; }
.gl-settings .gl-ctl { margin: 4px 0 6px; }
.gl-about p { margin: 6px 0 0; }

@media (max-width: 900px) {
  .gl-focus .gl-main { grid-template-columns: minmax(0, 1fr); padding-top: 14px; }
  .gl-focus .gl-pane { max-width: none; min-height: auto; }
  .gl-stepnav { position: static; background: none; padding-top: 12px; }
}
@media (max-width: 560px) {
  .gl-focus .phead { gap: 6px; }
  .gl-chbtn .t { display: none; }
  .gl-focus .phead .backb span { display: none; }
}
.gl-focus .gl-fb { scroll-margin-bottom: 96px; }
.gl-focus .tutorb { white-space: nowrap; flex: none; }
.gl-optmenu .gl-theme { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* on a phone the header's Circle button is its icon alone, so Back, the chapters, Circle, the tutor and ⋯ fit one row */
@media (max-width: 560px) {
  .gl-focus .circleb { width: 44px; padding: 0; justify-content: center; flex: none; } .gl-focus .circleb span { display: none; }
  .gl-chbtn .nl { display: none; } .gl-chbtn .ns { display: inline; }   /* "Ch 3/8" */
  .gl-focus .gl-optwrap, .gl-focus .gl-optbtn { flex: none; }
}