/* Embodied physical learning — game marks on the shared figure plate (labs/plate.css). */
#ecoliLab .eg{color:var(--ink);text-shadow:none}
.eg .plate-main{justify-content:center}
.eg-fig{user-select:none;cursor:default}
.eg-key{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 0 0 24px;font:12px/1.3 var(--sans);color:var(--ink-2)}
.eg-key span{display:inline-flex;align-items:center;gap:6px}
.eg-key .muted{color:var(--ink-3)}
.k-arrow{display:inline-block;width:18px;height:2px;position:relative}
.k-arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left:6px solid currentColor;border-right:0}
.k-arrow.away{background:var(--green);color:var(--green)}.k-arrow.toward{background:var(--red);color:var(--red)}
.k-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.k-dot.red{background:var(--red)}
.k-ring{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid}
.k-ring.green{border-color:var(--green)}.k-ring.grey{border-color:var(--grey)}
.k-line{display:inline-block;width:18px;height:3px;vertical-align:2px}
.k-line.red{background:var(--red)}.k-line.blue{background:var(--blue)}.k-line.ink{background:var(--ink)}.k-line.purple{background:var(--purple)}

/* the cell, as in the schematic */
.eg-body{fill:#eef0f0;stroke:#363b40;stroke-width:2.2}
.eg-mesh{fill:none;stroke:#9aa6ae;stroke-width:.55;opacity:.85}
.eg-flag{fill:none;stroke:var(--ink-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.eg-motor-disc{stroke:#fff;stroke-width:1.4}
.eg-motor-n{fill:#fff;font:700 10.5px/1 var(--serif)!important;pointer-events:none}
.eg-motor-n.big{font-size:12px!important}
.eg-motor-n.tiny{font-size:9px!important}
.eg-stator{fill:var(--field);stroke:color-mix(in srgb,var(--stator) 67%,transparent);stroke-width:.8}
.eg-stator.on{fill:var(--stator);stroke:#1b2433;stroke-width:.6}
.eg-ring.released{fill:none;stroke:var(--red);stroke-width:1.5;stroke-dasharray:2 2}
.eg-motor-hit{fill:transparent;cursor:pointer}
.eg-motor-hit:hover{fill:color-mix(in srgb,var(--ink) 7%,transparent)}
.eg-push{stroke-width:3;stroke-linecap:round}
.eg-push.away{stroke:var(--green)}.eg-push.toward{stroke:var(--red)}
.eg-push-head.away{fill:var(--green)}.eg-push-head.toward{fill:var(--red)}

/* close-up arena */
.eg-tracer{fill:color-mix(in srgb,var(--ink) 13%,transparent)}
.eg-zone-esc{fill:color-mix(in srgb,var(--green) 8%,transparent);stroke:color-mix(in srgb,var(--green) 33%,transparent);stroke-width:1}
.eg-zone-trap{fill:color-mix(in srgb,var(--ink) 4%,transparent);stroke:color-mix(in srgb,var(--ink) 15%,transparent);stroke-width:1}
.eg-zone-label{fill:var(--ink-3);font:600 10.5px/1 var(--sans)!important;letter-spacing:.1em;text-transform:uppercase}
.eg-zone-label.esc{fill:var(--green)}
.eg-zone-angle{fill:var(--ink-3);font:11px/1 var(--sans)!important}
.eg-surface{stroke:none}
.eg-hatch-line{stroke:color-mix(in srgb,var(--ink) 33%,transparent);stroke-width:1.2}
.eg-surface-edge{stroke:var(--ink);stroke-width:1.4}
.eg-surface-label{fill:var(--ink-2);font:italic 13px/1 var(--serif)!important}
.eg-heading{stroke-width:2;stroke-dasharray:5 4;fill:none}
.eg-heading.esc{stroke:var(--green)}.eg-heading.trap{stroke:var(--grey)}
.eg-strip{display:block;width:100%;max-width:300px;height:auto;margin:4px 0 6px 24px}
.eg-strip .esc{fill:var(--green)}.eg-strip .trap{fill:none;stroke:color-mix(in srgb,var(--ink) 40%,transparent)}.eg-strip .empty{fill:color-mix(in srgb,var(--ink) 25%,transparent)}
.eg-b-body .readout{padding-left:24px}
.eg-b-body .quiet,.eg .quiet{color:var(--ink-3)}

/* inside the wall */
.eg-netframe{fill:var(--field);stroke:var(--ink);stroke-width:1}
.eg-bond{fill:none;stroke:var(--ink);stroke-linecap:round}
.eg-bond-soft{fill:none;stroke:var(--purple);stroke-width:.5;opacity:.38}
.eg-bond-faint{fill:none;stroke:var(--ink);stroke-width:.45;opacity:.16}
.eg-netmotor{cursor:pointer;outline:none}
.eg-netmotor:focus-visible .eg-motor-disc{stroke:var(--blue);stroke-width:3}
.eg-contact-ring{fill:none;stroke:var(--red);stroke-width:1.5;stroke-dasharray:3 3}
.eg-contact-ring.on{stroke-dasharray:none;stroke-width:3}
.eg-squeeze-ring{fill:color-mix(in srgb,var(--red) 13%,transparent);stroke:var(--red);stroke-width:1}
.svg-label.small{font-size:9.5px}
.svg-label.quiet{fill:var(--ink-3);font-size:10px}
.eg-race{display:block;width:100%;max-width:330px;height:auto;margin:2px 0 2px 24px}
.eg-checks span.ok,.eg-checks span.no{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:2px;font-weight:650;font-size:11px}
.eg-checks span.ok{background:var(--green);color:#fff}.eg-checks span.no{border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink-3)}
.eg-checks .quiet{display:block;font-size:11.5px;margin-top:2px}
.eg-c-title .legend{float:right;text-transform:none;letter-spacing:0;font-weight:500;display:inline-flex;gap:8px;align-items:center;color:var(--ink-2)}
.eg-chart{display:block;width:100%;height:auto;max-height:128px}
.eg-err{fill:none;stroke:var(--ink);stroke-width:1.5}
.eg-esc{fill:none;stroke:var(--blue);stroke-width:1.8}
.eg-esc-dot{fill:var(--blue)}
.eg-cursor{stroke:var(--red);stroke-width:1;stroke-dasharray:2 2}
.eg-steer-zone{fill:color-mix(in srgb,var(--green) 8%,transparent)}
.svg-tick.good{fill:var(--green);font-weight:600}.svg-tick.blue{fill:var(--blue);font-weight:650}

/* the race */
.eg-channel{fill:var(--field);stroke:none}
.eg-trapzone{fill:color-mix(in srgb,var(--ink) 5%,transparent)}
.eg-channel-label{fill:var(--ink);font:600 12px/1 var(--sans)!important}
.eg-channel-label.yours{fill:var(--blue)}
.eg-channel-stat{fill:var(--ink-2);font:12px/1 var(--sans)!important}
.eg-channel-stat.yours{fill:var(--blue);font-weight:600!important}
.eg-touchdot{fill:var(--red)}
.eg-flash{fill:none;stroke-width:2}
.eg-flash.esc{stroke:var(--green)}.eg-flash.trap{stroke:var(--grey)}
.eg-bars{display:block;width:100%;max-width:330px;height:auto;margin:2px 0}
.eg-bar.grey{fill:var(--grey)}.eg-bar.blue{fill:var(--blue)}
@media (max-width:620px){.eg .plate-main{min-height:0}}
.eg-c-body{display:flex}.eg-c-body svg{flex:1}
/* the old lab's spacing above the panel; the plate sits flush like the springs lab */
#embody [data-embody-panel="bacteria"]:has(.plate.eg),#ecoliLab:has(.plate.eg){margin-top:0!important}

/* Egyptian Arabic (html[dir="rtl"], text from labs/ecoli-wall/ar.js): the site's Arabic type; spacing, floats and
   the About panel mirrored; the drawings themselves stay left to right. */
html[dir="rtl"] #ecoliLab .plate{--serif:"Noto Naskh Arabic","Source Serif 4",Georgia,serif;--sans:Cairo,Inter,system-ui,sans-serif}
html[dir="rtl"] #ecoliLab :is(.plate-title,.plate-nav button,.panel-title,.caption-head .run,.plate-about h4){letter-spacing:0;text-transform:none}
html[dir="rtl"] #ecoliLab .eg-zone-label{letter-spacing:0}
html[dir="rtl"] #ecoliLab .eg-surface-label{font-style:normal!important}
html[dir="rtl"] #ecoliLab .plate-nav button .n{margin-right:0;margin-left:5px}
html[dir="rtl"] #ecoliLab .plate-nav button.is-done::after{margin-left:0;margin-right:6px}
html[dir="rtl"] #ecoliLab .caption-head .run{margin-right:0;margin-left:8px}
html[dir="rtl"] #ecoliLab .eg-c-title .legend{float:left}
html[dir="rtl"] #ecoliLab .eg-checks span:is(.ok,.no){margin-right:0;margin-left:2px}
html[dir="rtl"] #ecoliLab .plate-about{right:auto;left:0}
/* the tally fills from the right; legend arrows point at their labels */
html[dir="rtl"] #ecoliLab .eg-strip,html[dir="rtl"] #ecoliLab .k-arrow{transform:scaleX(-1)}
/* the snapshot arrows step along the left-to-right training chart: keep ◂ on the left of ▸ */
html[dir="rtl"] #ecoliLab .eg-actions .btn.small:has(+ .btn.small){order:2}
html[dir="rtl"] #ecoliLab .eg-actions .btn.small + .btn.small{order:1}