/* The map before the data: the pieces of the series' labs and scenarios that site.css doesn't have (it has .stops, .stop, .lab,
   .chip-btn, .seg, .lab-say, .quiz and the scenario cards). Labs are always dark, like the films; the scenario cards follow the
   page's theme. learn.js lays each picture out for its own width, so nothing here sizes a canvas but its width. */
.ea-lab canvas{margin:0 0 12px}
.ea-lab :focus-visible{outline-color:#9fc4ff}
.ea-deal,.ea-area,.ea-changes,.ea-rename,.ea-crews,.ea-sides,.ea-els{padding:0 16px}
.ea-deal .lab-controls,.ea-area .lab-controls,.ea-rename .lab-controls{padding:2px 0 12px;border-top:0}
.ea-rename:empty,.ea-area:empty{display:none}
/* a card dealt from the pile */
.ea-card{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:rgba(16,26,50,.78);border:1px solid var(--sline);border-left:4px solid var(--c,#6aa8ff)}
.ea-card .k{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--smuted)}
.ea-card .t{margin:0;font-size:17px;font-weight:700;line-height:1.35;color:var(--sfg)}
.ea-card .e{margin:6px 0 0;font-size:14px;color:var(--smuted)}
/* the choices: a wrong pick says why; the right one turns green */
.ea-opts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ea-opts button{border-radius:12px;border:1px solid rgba(170,200,245,.35);background:rgba(16,26,50,.85);color:var(--sfg);padding:9px 13px;font:inherit;font-weight:700;font-size:14.5px;line-height:1.3;text-align:left;cursor:pointer}
.ea-opts button:hover:not([disabled]){border-color:rgba(236,243,255,.85)}
.ea-opts button[disabled]{cursor:default}
.ea-opts button[disabled]:not(.ok):not(.no){opacity:.5}
.ea-opts button.ok{border-color:#7ff0b4;background:rgba(36,110,74,.55);color:#effff6}
.ea-opts button.no{border-color:#ff8f86;background:rgba(130,36,30,.5);color:#fff1ef}
.ea-opts.grouped{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:8px}
.ea-group{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;padding:8px;border-radius:12px;border:1px dashed var(--sline)}
.ea-gl{width:100%;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--smuted)}
.ea-opts.ask{display:grid}
.ea-off button[aria-pressed=true]{border-color:#ff8f86;background:rgba(130,36,30,.5)}
.ea-off button[aria-pressed=true]::before{content:"⏻ ";color:#ff8f86}
.ea-why{margin:0 0 12px;font-size:15px;line-height:1.45;color:var(--sfg)}
.ea-why b.ok{color:#7ff0b4}.ea-why b.no{color:#ff8f86}
.ea-why.sm{margin:2px 0 6px;font-size:14px}
.ea-end{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.45);font-size:15px;color:var(--sfg)}
.ea-q{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--sfg)}
.ea-step{margin:0 0 4px}
/* survive the change */
.ea-changes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px;margin:0 0 12px}
.ea-change{display:grid;gap:4px;align-content:start;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(170,200,245,.35);background:rgba(16,26,50,.85);color:var(--sfg);font:inherit;cursor:pointer}
.ea-change b{font-size:15px}.ea-change span{font-size:13.5px;font-weight:500;color:var(--smuted)}
.ea-change:hover:not([disabled]){border-color:rgba(236,243,255,.85)}
.ea-change[disabled]{cursor:default;opacity:.5}
.ea-change.done{opacity:.75;border-color:var(--c,#f5ce8c)}
.ea-change.done b::after{content:" ✓";color:var(--c,#f5ce8c)}
/* who goes first */
.ea-crew{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:0 0 10px}
.ea-crew .lbl{min-width:104px;font-size:14px;font-weight:700;color:var(--smuted)}
.ea-facts{display:grid;gap:10px;margin:0 0 6px}
.ea-fact{padding:10px 12px;border-radius:12px;background:rgba(16,26,50,.7);border:1px solid var(--sline)}
.ea-fact .ea-q{font-size:15px}
.ea-fact.ok{border-color:rgba(127,240,180,.6)}.ea-fact.no{border-color:rgba(255,143,134,.65)}
.ea-fact .ea-why{margin:8px 0 0}
.ea-lab .seg button.ok{border-color:#7ff0b4;background:rgba(36,110,74,.6);color:#effff6}
.ea-lab .seg button.no{border-color:#ff8f86;background:rgba(130,36,30,.55);color:#fff1ef}
.ea-lab .seg button[disabled]{cursor:default}
.ea-lab .seg button[disabled]:not(.ok):not(.no){opacity:.5}
/* what may cross; walk it down: facts and pieces to mark */
.ea-sides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 4px}
.ea-side{display:grid;gap:6px;align-content:start}
.ea-sidet{margin:0 0 4px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--smuted)}
.ea-sides .ea-side:first-child .ea-sidet{color:#6ed6c4}.ea-sides .ea-side:last-child .ea-sidet{color:#ffb078}
.ea-touch{display:grid;gap:6px;margin:0 0 6px}
.ea-fact-t{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;text-align:left;padding:9px 12px;border-radius:12px;border:1px solid rgba(170,200,245,.3);background:rgba(16,26,50,.78);color:var(--sfg);font:inherit;font-size:14.5px;font-weight:600;line-height:1.35;cursor:pointer}
.ea-fact-t:hover:not([disabled]){border-color:rgba(236,243,255,.85)}
.ea-fact-t[disabled]{cursor:default}
.ea-tick{width:20px;height:20px;border-radius:6px;border:2px solid rgba(170,200,245,.55);display:grid;place-items:center;font-size:13px;font-weight:900;line-height:1;color:#0a0f1c}
.ea-fact-t[aria-pressed=true]{border-color:var(--c,#ffd166);background:color-mix(in srgb,var(--c,#ffd166) 16%,#0b1226)}
.ea-fact-t[aria-pressed=true] .ea-tick{background:var(--c,#ffd166);border-color:var(--c,#ffd166)}
.ea-fact-t[aria-pressed=true] .ea-tick::after{content:"✓"}
.ea-fact-t.ok{border-color:#7ff0b4}.ea-fact-t.no{border-color:#ff8f86}
/* a rule with a home */
.ea-cardt{margin:10px 0 10px;padding:6px 0 6px 12px;border-left:3px solid var(--c);font-size:15px;line-height:1.45;color:var(--sfg)}
.ea-cardt b{color:var(--c)}.ea-cardt.net{--c:#6ed6c4}.ea-cardt.ret{--c:#ffb078}
.ea-gen{margin:0 0 8px;padding-left:22px;color:var(--sfg)}
.ea-gen li{margin:0 0 3px}
.ea-note{margin:0 0 10px;font-size:14px;color:var(--smuted)}
/* the navigator's test: the map's elements, as text */
.ea-els{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:8px;margin:0 0 4px}
.ea-el{display:grid;gap:6px;align-content:start;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid rgba(170,200,245,.3);background:#050a16;color:var(--sfg);font:inherit;cursor:pointer}
.ea-el:hover:not([disabled]){border-color:rgba(236,243,255,.85)}
.ea-el[disabled]{cursor:default}
.ea-el code{font-family:var(--mono);font-size:13.5px;color:#a9d4ff;overflow-wrap:anywhere}
.ea-lines{display:grid;gap:2px;font-family:var(--mono);font-size:12.5px;line-height:1.45;color:#c9d6ea}
.ea-line{overflow-wrap:anywhere}.ea-line i{font-style:normal;color:var(--smuted)}
.ea-line.new{color:#7ff0b4}
.ea-el[aria-pressed=true]{border-color:#ffd166;box-shadow:inset 0 0 0 1px #ffd166}
.ea-el.fail{border-color:#ff8f86}.ea-el.pass{border-color:rgba(127,240,180,.55)}
.ea-res{justify-self:start;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:800}
.ea-res.ok{background:rgba(127,240,180,.16);color:#7ff0b4}.ea-res.no{background:rgba(255,143,134,.16);color:#ff8f86}
.ea-answer{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:rgba(120,200,255,.1);border:1px solid rgba(120,200,255,.45);font-size:15px;color:var(--sfg)}
.ea-answer:empty{display:none}
.ea-rights{margin:0 0 10px;font-size:14px;color:var(--smuted)}
/* the labs page: which film, and a film still being made */
.stop-text .ea-film{margin:2px 0 0;font-weight:700;color:var(--muted)}
.stop-text .ea-film a{color:inherit;text-underline-offset:3px}
.ea-coming{margin:0;padding:8px 0;font-size:15px;color:var(--muted)}
.ea-coming b{color:var(--fg)}
/* the scenarios page: which film's situations */
.ea-filter{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0}
.ea-filter label{font-weight:700;color:var(--muted)}
.ea-filter select{max-width:100%;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:inherit;font-weight:700}
.ea-tap{margin:0 0 8px;font-size:14px;font-weight:700;color:var(--muted)}
.ea-open{margin:0 0 12px}.ea-open a{color:var(--accent);font-weight:700}
@media (max-width:560px){.ea-sides{grid-template-columns:1fr}}