/* Physical learning — game-specific marks on the shared figure plate (labs/plate.css). */
.plg .plate-main{justify-content:center}
.plg-net{touch-action:pan-y;user-select:none;max-height:100%}
.plg-cell{fill:var(--field);stroke:var(--ink);stroke-width:1}
.plg-bond{fill:none;stroke-linecap:round}
.plg-bond.is-cut{stroke-dasharray:3 5}
.plg-out{stroke-linejoin:round}
.plg-node{fill:var(--ink);opacity:.8}
.plg-hit{stroke:transparent;stroke-width:16;pointer-events:none}
.plg-net.is-cutting .plg-hit{pointer-events:stroke;cursor:crosshair}
.plg-net.is-cutting .plg-hit:hover{stroke:color-mix(in srgb,var(--red) 25%,transparent)}
.plg-net.is-cutting .plg-handle{pointer-events:none}
.plg-arrow-in{stroke:var(--blue);stroke-width:3;stroke-linecap:round}.plg-arrow-in-head{fill:var(--blue)}
.plg-arrow-out{stroke:var(--orange);stroke-width:3;stroke-linecap:round}.plg-arrow-out-head{fill:var(--orange)}
.plg-handle,.plg-handle *{cursor:grab;outline:none;touch-action:none}
.plg-handle.is-grabbing{cursor:grabbing}
.plg-handle-hit{fill:transparent}
.plg-handle-knob{fill:var(--blue);stroke:var(--field);stroke-width:2.5}
.plg-handle:focus-visible .plg-handle-knob{stroke:var(--ink);stroke-width:3}
.plg-handle-text{fill:#fff;font:700 13px/1 var(--sans);pointer-events:none}
.plg-handle-pulse{fill:none;stroke:var(--blue);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:plg-pulse 1.6s ease-out infinite}
@keyframes plg-pulse{0%{transform:scale(.8);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.plg-watch-ring{fill:none;stroke:var(--orange);stroke-width:1.2;stroke-dasharray:3 3}
.plg-tag{font:600 11.5px/1 var(--sans);paint-order:stroke;stroke:var(--field);stroke-width:4px}
.plg-tag-in{fill:var(--blue)}.plg-tag-out{fill:var(--orange)}

.plg-legend{display:flex;flex-wrap:wrap;gap:4px 14px;padding:6px 0 0 24px;font:12px/1.3 var(--sans);color:var(--ink-2)}
.plg-legend span{display:inline-flex;align-items:center;gap:5px}
.plg-legend .plg-scale{color:var(--ink-3);margin-left:auto}
.sw{display:inline-block;width:20px;height:3px}
.sw-stretch{background:var(--blue)}.sw-squeeze{background:var(--red)}
.sw-thick{height:7px;background:var(--grey);clip-path:polygon(0 40%,100% 0,100% 100%,0 60%)}
.sw-stiffen{background:var(--ink)}.sw-soften{background:var(--purple)}

.plate .plg-goal-text{font-size:14.5px;line-height:1.4;padding-left:24px}
.c-in{color:var(--blue)}.c-out{color:var(--orange)}.c-stretch{color:var(--blue)}.c-squeeze{color:var(--red)}
.c-stiffen{color:var(--ink);text-decoration:underline}.c-soften{color:var(--purple)}.c-zone{color:var(--green)}
.plg-meter{display:block;width:100%;height:auto;max-height:92px}
.plg-m-track{stroke:var(--ink);stroke-width:1}
.plg-m-tick{stroke:var(--ink);stroke-width:1}
.plg-m-zone{fill:color-mix(in srgb,var(--green) 18%,transparent);stroke:var(--green);stroke-width:1}
.plg-meter.is-on-target .plg-m-zone{fill:color-mix(in srgb,var(--green) 40%,transparent)}
.plg-m-goal{fill:var(--green);font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.plg-m-label{fill:var(--ink-3);font:11px/1 var(--sans)}
.plg-m-needle{stroke:var(--orange);stroke-width:2}
.plg-m-dot{fill:var(--orange);stroke:var(--ink);stroke-width:1}
.plg-m-before{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.plg-m-before-label{fill:var(--ink-3);font:10.5px/1 var(--sans)}
.plate .plg-meter-read{min-height:2.6em;padding-left:24px}

.plg-progress .plg-rounds{float:right;text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink-2)}
.plg-chart{display:block;width:100%;height:auto;max-height:130px}
.plg-c-zone{fill:color-mix(in srgb,var(--green) 11%,transparent)}
.plg-c-grid{stroke:var(--hair)}
.plg-c-label{fill:var(--ink-3);font:10px/1 var(--sans)}
.plg-c-line{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.plg-c-dot{fill:var(--ink)}
.plg-c-event{stroke:color-mix(in srgb,var(--red) 53%,transparent);stroke-dasharray:2 3}
.plg-c-event-label{fill:var(--red);font:10px/1 var(--sans)}

.plg-choices{display:grid;gap:6px;margin-top:4px}
.btn.choice{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;text-transform:none;letter-spacing:0;font:400 13.5px/1.35 var(--serif);color:var(--ink-2);padding:9px 12px;width:100%}
.plg-choice-title{font:600 14px/1.2 var(--sans);color:var(--ink);letter-spacing:.02em}
@media (max-width:620px){.plg .plate-main{min-height:0}.plg-net{max-height:none}}
.plate-nav .plg-reset{margin-left:10px;color:var(--ink-3);border-left:1px solid var(--hair)!important}
.plg .plate-side>.panel.plg-progress svg{max-height:150px}
/* Teach: FF × FB = Δk */
.plg-eq{display:block;width:100%;height:auto;max-height:126px;flex:0 0 auto;margin-top:4px}
.plg-eq-frame{fill:var(--field);stroke-width:1.4}
.plg-eq-q{fill:color-mix(in srgb,var(--ink) 19%,transparent);font:italic 600 30px/1 var(--serif)!important}
.plg-eq-op{fill:var(--ink);font:400 30px/1 var(--serif)!important}
/* Egyptian Arabic (html[dir="rtl"]; words from labs/spring-lab/ar.js via labs/demo-ar.js). The text reads right to
   left while the drawings keep their left-to-right layout (photographic.css). The plate sets its own Latin fonts,
   so the site's Arabic fonts are restored here, and the plate's left/right spacing is mirrored. */
html[dir="rtl"] .plg{--serif:"Noto Naskh Arabic","Source Serif 4",Georgia,serif;--sans:Cairo,Inter,system-ui,sans-serif}
html[dir="rtl"] .plg :is(.plate-nav button,.panel-title,.caption-head .run,.plate-about h4,.plg-choice-title,.plg-m-goal){letter-spacing:0;text-transform:none}
html[dir="rtl"] .plg .plate-nav button .n{margin-right:0;margin-left:5px}
html[dir="rtl"] .plg .plate-nav button.is-done::after{margin-left:0;margin-right:6px}
html[dir="rtl"] .plg .plate-nav .plg-reset{margin-left:0;margin-right:10px;border-left:0!important;border-right:1px solid var(--hair)!important}
html[dir="rtl"] .plg .caption-head .run{margin-right:0;margin-left:8px}
html[dir="rtl"] .plg .btn.choice{text-align:right}
html[dir="rtl"] .plg .plg-progress .plg-rounds{float:left}
html[dir="rtl"] .plg .plg-legend{padding-left:0!important;padding-right:2px!important}
html[dir="rtl"] .plg .plg-legend .plg-scale{margin-left:0;margin-right:auto}
html[dir="rtl"] .plg .plate-about{right:auto;left:0}
/* "Back to the challenges" is the only action button with a title; its ← should point back, to the right */
html[dir="rtl"] .plg .plg-actions>.btn[title]{transform:scaleX(-1)}