/* Circuit lab (/lab/) + kits (/kits/) — DESIGN-HUB §2–3. Builds on tokens/base/shop.
   Red = the one action (order CTA); ink = selection; wire colours carry hardware meaning and are
   always repeated in text (التوصيل list). Logical properties only; the canvas itself is not mirrored
   (a circuit has no reading direction). */

/* lab tokens (lab + kits pages) */
:root { --lab-gnd: #2A2A2E; --lab-board: #0A0A0A; --lab-board-edge: #0A0A0A; --lab-silk: #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lab-gnd: #8A8A92; --lab-board: #1B1B20; --lab-board-edge: #3A3A42; } }
:root[data-theme="dark"] { --lab-gnd: #8A8A92; --lab-board: #1B1B20; --lab-board-edge: #3A3A42; }

body[data-page="lab"] {
  --lab-header-h: 56px;
  --lab-dock-h: 0px;
  block-size: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--lab-header-h) minmax(0, 1fr);
  background: var(--c-bg);
  padding-block-end: 0;
}
/* the site tab bar stays in the markup for consistency; the lab dock replaces it on phones */
body[data-page="lab"] > .tabbar { display: none !important; }
/* site navigation lives in the lab's ⋯ menu */
.lab-menu .hub-nav { display: grid; gap: 2px; padding-block-end: 6px; margin-block-end: 4px; border-block-end: 1px solid var(--c-border); }
.lab-menu .hub-nav a { display: flex; align-items: center; min-block-size: 44px; padding-inline: 12px; border-radius: var(--radius-sm); color: var(--c-text); text-decoration: none; font-weight: 600; }
.lab-menu .hub-nav a[data-nav="home"] { display: flex; }
.lab-menu .hub-nav a:hover { background: var(--c-surface-2); }
.lab-menu .hub-nav a[aria-current="page"] { background: var(--c-surface-2); }
.lab-menu .hub-nav a:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }

/* ---------------------------------------------------------------- header */
.lab-header {
  display: flex; align-items: center; gap: var(--space-2);
  padding-inline: var(--space-3); border-block-end: 1px solid var(--c-border);
  background: var(--c-surface); min-inline-size: 0; position: relative; z-index: 30;
}
.lab-brand { display: inline-flex; align-items: center; min-block-size: 44px; flex: none; }
.lab-brand img { display: block; block-size: 30px; inline-size: auto; }
.lab-brand-mark { display: none !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lab-brand img { filter: invert(1) hue-rotate(180deg); } }
:root[data-theme="dark"] .lab-brand img { filter: invert(1) hue-rotate(180deg); }
.lab-title-in {
  flex: 1 1 160px; min-inline-size: 0; max-inline-size: 320px; block-size: 40px;
  border: 1.5px solid transparent; border-radius: var(--radius-sm); background: transparent;
  padding-inline: 10px; font: inherit; font-weight: 700; font-size: var(--fs-2); color: var(--c-text);
}
.lab-title-in:hover { border-color: var(--c-border); }
.lab-title-in:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent); background: var(--c-bg); }
.lab-title-in::placeholder { color: var(--c-muted); font-weight: 500; }
.lab-boards { display: inline-flex; gap: 0; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); overflow: hidden; flex: none; }
.lab-boards .chip { border: 0; border-radius: 0; min-block-size: 38px; padding-inline: 12px; margin: 0; font-weight: 700; background: var(--c-surface); color: var(--c-text); }
.lab-boards .chip + .chip { border-inline-start: 1.5px solid var(--c-border); }
.lab-boards .chip[aria-checked="true"] { background: var(--c-accent); color: var(--c-bg); }
.lab-boards .chip:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.lab-hist { display: inline-flex; gap: 2px; flex: none; }
.lab-ibtn {
  inline-size: 44px; block-size: 44px; display: inline-grid; place-items: center; flex: none;
  border: 0; background: transparent; color: var(--c-text); border-radius: var(--radius-sm); cursor: pointer;
}
.lab-ibtn svg, .lab-save svg { inline-size: 22px; block-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lab-ibtn:hover:not(:disabled) { background: var(--c-surface-2); }
.lab-ibtn:disabled { color: var(--c-border); cursor: default; }
.lab-ibtn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
html[dir="rtl"] .lab-hist svg { transform: scaleX(-1); }
.lab-save { min-block-size: 40px; gap: 6px; flex: none; }
.lab-save.is-dirty::after { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--c-warning); }
.lab-header .hdr-btn { flex: none; }
.lab-more-wrap { position: relative; flex: none; }
.lab-menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; min-inline-size: 240px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 6px; display: grid; gap: 2px; z-index: 40;
}
.lab-menu-item { display: flex; align-items: center; min-block-size: 44px; padding-inline: 12px; border: 0; background: none; font: inherit; color: var(--c-text); text-align: start; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; }
.lab-menu-item:hover { background: var(--c-surface-2); }
.lab-menu-item:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.lab-menu-boards { display: none; padding: 6px 6px 10px; border-block-end: 1px solid var(--c-border); margin-block-end: 4px; }
.lab-menu-h { margin: 0 0 6px; font-size: var(--fs-0); color: var(--c-muted); font-weight: 600; }

/* ---------------------------------------------------------------- app grid */
.lab-app { display: grid; grid-template-columns: 220px minmax(0, 1fr) 340px; min-block-size: 0; position: relative; }
@media (min-width: 1100px) { .lab-app { grid-template-columns: 264px minmax(0, 1fr) 380px; } }
.lab-palette, .lab-panel { background: var(--c-surface); min-block-size: 0; display: flex; flex-direction: column; overflow: hidden; }
.lab-palette { border-inline-end: 1px solid var(--c-border); }
.lab-panel { border-inline-start: 1px solid var(--c-border); }
.lab-sheet-bar { display: none; }
.lab-stage { position: relative; min-inline-size: 0; min-block-size: 0; overflow: hidden; }
.lab-dock { display: none; }

/* ---------------------------------------------------------------- palette */
.lab-palette > h2, .lab-sheet-bar h2 { font-size: var(--fs-2); margin: 0; }
.lab-pal-tools { padding: var(--space-3) var(--space-3) var(--space-2); display: grid; gap: var(--space-2); }
.lab-search { block-size: 44px; inline-size: 100%; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); padding-inline: 12px; font: inherit; background: var(--c-bg); color: var(--c-text); }
.lab-search:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent); }
.lab-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; -webkit-mask-image: linear-gradient(to var(--_end, left), #000 85%, transparent); mask-image: linear-gradient(to var(--_end, left), #000 85%, transparent); }
html[dir="ltr"] .lab-cats { --_end: right; }
.lab-cats::-webkit-scrollbar { display: none; }
.lab-cat { flex: none; min-block-size: 36px; padding: 0 12px; }
.lab-cat[aria-checked="true"] { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }
.lab-pal-list { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-2); overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.lab-pal-item {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 56px; padding: 6px 8px;
  border: 0; background: none; font: inherit; color: var(--c-text); text-align: start; border-radius: var(--radius-sm); cursor: grab;
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.lab-pal-item:hover { background: var(--c-surface-2); }
.lab-pal-item:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.lab-pal-icon { inline-size: 40px; block-size: 40px; flex: none; display: grid; place-items: center; background: var(--c-bg); border-radius: var(--radius-sm); }
.lab-pal-txt { display: grid; gap: 2px; min-inline-size: 0; }
.lab-pal-name { font-size: var(--fs-1); font-weight: 600; line-height: 1.3; }
.lab-pal-price { font-size: var(--fs-0); color: var(--c-muted); }
.lab-pal-hint { margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); font-size: var(--fs-0); border-block-start: 1px solid var(--c-border); }
.lab-pal-empty { padding: var(--space-4) var(--space-2); text-align: center; color: var(--c-muted); }
.lab-pal-note { padding: var(--space-2); color: var(--c-muted); font-size: .9rem; line-height: 1.6; }
.lab-pal-note .btn { inline-size: 100%; justify-content: center; }
.lab-ghost { position: fixed; inset-block-start: 0; left: 0; z-index: 100; pointer-events: none; inline-size: 52px; block-size: 52px; display: grid; place-items: center; background: var(--c-surface); border: 1.5px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); opacity: .85; }
.lab-ghost.is-over { border-color: var(--c-accent); opacity: 1; }
body.lab-dragging, body.lab-dragging * { cursor: grabbing !important; }

/* part art (palette icons + canvas tiles share classes) */
.lab-icon, .part-art { overflow: visible; }
.art-fill { fill: var(--c-surface-2); stroke: var(--c-text); stroke-width: 1.5; }
.art-ink { fill: var(--c-text); }
.art-cap { fill: var(--c-text); }
.art-dot { fill: var(--c-muted); }
.art-line { fill: none; stroke: var(--c-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-line.thin { stroke-width: 1.2; }
.art-line.light { stroke: var(--c-muted); }
.art-hole { fill: var(--c-surface); }
.art-dht { fill: #2D6CDF; stroke: #1C4FA8; stroke-width: 1.2; }
.art-board { fill: #1F6F4A; stroke: #154D33; stroke-width: 1.2; }
.art-eye { fill: #C9CDD2; stroke: #6B7078; stroke-width: 1.5; }
.art-eye.dark { fill: #2A2A2E; }
.art-mesh { fill: #B8BDC4; stroke: var(--c-text); stroke-width: 1; }
.art-flame { fill: #E06A10; }
.art-relay { fill: #1E6FD9; stroke: #1553A8; stroke-width: 1.2; }
.art-servo { fill: #1E6FD9; stroke: #1553A8; stroke-width: 1.2; }
.art-horn { fill: var(--c-surface); stroke: var(--c-text); stroke-width: 1.4; }
.art-lcd { fill: #9DB36B; stroke: #2D6CDF; stroke-width: 3; }
.art-oled { fill: #0A0A0A; stroke: #2D6CDF; stroke-width: 3; }
.led-dome { fill: #FF8A80; stroke: #B3261E; stroke-width: 1.4; }
.led-dome.rgb { fill: #E9EEF5; stroke: #8E9196; }
.led-glow { fill: var(--_led, #ff3b30); opacity: 0; }
.buzz-ring { fill: none; stroke: var(--c-text); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lcd-line { font: 600 11px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; fill: #1F2A0E; white-space: pre; }
.lcd-line.oled { fill: #7FD6FF; font-size: 8px; }

/* ---------------------------------------------------------------- canvas */
.lab-canvas { position: absolute; inset: 0; background: var(--c-bg); outline: none; }
.lab-svg { display: block; inline-size: 100%; block-size: 100%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; direction: ltr; }
.lab-svg.is-panning { cursor: grabbing; }
.lab-grid-dot { fill: var(--c-border); }
.lab-grid-major { stroke: var(--c-border); stroke-width: .5; opacity: .6; }
.board-body { fill: var(--lab-board); stroke: var(--lab-board-edge); stroke-width: 1.5; }
.board-name { fill: var(--lab-silk); font: 700 14px/1 var(--font-en); }
.board-stripe { fill: var(--brand-red); }
.bpin-sq { fill: #2A2A2E; stroke: #55555C; stroke-width: 1; }
.bpin.is-power .bpin-sq { stroke: #8A8A92; }
.bpin.is-on .bpin-sq { fill: #D4D4D8; }
.bpin-label { fill: var(--lab-silk); font: 600 10px/1 var(--font-en); opacity: .85; }
.bpin-hit { fill: transparent; }
.lab-svg.is-reassigning .bpin { opacity: .3; }
.lab-svg.is-reassigning .bpin.is-valid { opacity: 1; cursor: pointer; }
.lab-svg.is-reassigning .bpin.is-valid .bpin-sq { stroke: var(--lab-silk); stroke-width: 2; fill: #3A3A42; }
.lab-svg.is-reassigning .bpin.is-valid:hover .bpin-sq { fill: var(--lab-silk); }
.lab-svg.is-reassigning .bpin.is-current { opacity: 1; }
.lab-svg.is-reassigning .bpin.is-current .bpin-sq { fill: var(--brand-red); stroke: var(--lab-silk); }
.wire { fill: none; stroke: var(--_w); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.wire-hit { fill: none; stroke: transparent; stroke-width: 14; }
.wire[data-bus="i2c"] { stroke-dasharray: 6 3; }
.wire.is-error { stroke: var(--c-danger); stroke-dasharray: 2 4; }
.lab-svg.is-reassigning .wire-g { opacity: .35; }
.part { cursor: grab; outline: none; }
.lab-svg.is-dragging .part { cursor: grabbing; }
.part-tile { fill: var(--c-surface); stroke: var(--c-border); stroke-width: 1.5; }
.part:hover .part-tile { stroke: var(--c-muted); }
.part-sel { fill: none; stroke: transparent; stroke-width: 2; }
.part.is-selected .part-sel, .part:focus-visible .part-sel { stroke: var(--c-accent); }
.part:focus-visible .part-sel { stroke-width: 3; }
.part.has-error .part-tile { stroke: var(--c-danger); }
.part-label { fill: var(--c-text); font: 600 12px/1 var(--font-ar); }
html[lang="en"] .part-label { font-family: var(--font-en); }
.pin { fill: var(--c-surface); stroke: var(--c-muted); stroke-width: 1.5; }
.ppin { cursor: pointer; }
.ppin .pin-hit { fill: transparent; }
.ppin.is-on .pin { fill: var(--_w); stroke: var(--_w); }
.ppin:hover .pin, .ppin.is-picking .pin { stroke: var(--c-accent); stroke-width: 2.5; }
.ppin.is-picking .pin { r: 7; }
.ppin.is-error .pin { stroke: var(--c-danger); stroke-width: 2.5; }
.ppin.is-warn .pin { stroke: var(--c-warning); stroke-width: 2.5; }
.ppin-label { fill: var(--c-muted); font: 600 8.5px/1 var(--font-en); pointer-events: none; }
.part-tag { display: none; pointer-events: none; }
.part-tag.is-shown { display: inline; }
.part-tag rect { fill: var(--c-surface-2); stroke: var(--c-border); }
.part-tag text { fill: var(--c-text); font: 700 11px/1 var(--font-en); }
.part-tag.is-on rect { fill: var(--c-accent); stroke: var(--c-accent); }
.part-tag.is-on text { fill: var(--c-bg); }

/* simulator visuals: static meaning first (fill + tag), motion only when allowed */
.part.is-on .led-glow { opacity: .35; }
.part.is-on .led-dome { fill: var(--_led, #ff3b30); stroke: var(--_led, #ff3b30); }
.kind-relay.is-on .relay-lever, .kind-relay2.is-on .relay-lever { transform: rotate(-26deg); transform-origin: -8px 2px; }
.kind-relay.is-on .part-tile, .kind-relay2.is-on .part-tile { stroke: var(--c-accent); }
.kind-buzzer.is-on .art-ink { fill: var(--c-primary); }
@media (prefers-reduced-motion: no-preference) {
  .part.is-on .led-glow { opacity: .45; filter: blur(3px); }
  .servo-horn { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .relay-lever { transition: transform .12s ease-out; }
  .kind-buzzer.is-on .buzz-ring { animation: lab-buzz .6s ease-out infinite; }
  .kind-buzzer.is-on .buzz-ring.r2 { animation-delay: .3s; }
  .kind-motor.is-on .motor-rotor { animation: lab-spin var(--_spin, 1s) linear infinite; transform-box: fill-box; transform-origin: center; }
  .kind-motor.is-on.is-rev .motor-rotor { animation-direction: reverse; }
}
@keyframes lab-buzz { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes lab-spin { to { transform: rotate(360deg); } }

/* zoom controls, part toolbar, pin popover */
.lab-zoom { position: absolute; inset-block-end: var(--space-3); inset-inline-end: var(--space-3); display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 5; }
.lab-zbtn { min-inline-size: 40px; block-size: 40px; display: inline-grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: none; color: var(--c-text); font: inherit; font-weight: 600; font-size: var(--fs-0); cursor: pointer; padding-inline: 8px; }
.lab-zbtn:hover:not(:disabled) { background: var(--c-surface-2); }
.lab-zbtn:disabled { color: var(--c-border); }
.lab-zbtn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.lab-zoom-read { min-inline-size: 44px; text-align: center; font-size: var(--fs-0); font-weight: 700; direction: ltr; }
.lab-fit { border-inline-start: 1px solid var(--c-border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.lab-part-tools { position: absolute; transform: translate(-50%, -100%); display: flex; gap: 4px; padding: 3px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 6; white-space: nowrap; }
.lab-part-tools .btn { min-block-size: 40px; padding-inline: 12px; font-size: var(--fs-0); border-color: transparent; }
.lab-pop { position: absolute; z-index: 8; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-3); display: grid; gap: var(--space-2); max-block-size: 60%; overflow: auto; }
.lab-pop-h { margin: 0; font-weight: 700; font-size: var(--fs-1); }
.lab-pop-pins { display: flex; flex-wrap: wrap; gap: 6px; }
.lab-pop-pins .chip { min-block-size: 36px; }
.lab-pop-pins .chip[aria-pressed="true"] { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }
.lab-pop-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.lab-pop-opt { min-block-size: 40px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); font: 600 var(--fs-0)/1 var(--font-en); color: var(--c-text); cursor: pointer; }
.lab-pop-opt:hover:not(:disabled) { border-color: var(--c-accent); }
.lab-pop-opt.is-current { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }
.lab-pop-opt:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.lab-pop-opt:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.lab-pop-cancel { justify-self: start; min-block-size: 40px; }

/* first run + hints */
.lab-first { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-3); overflow: auto; z-index: 7; background: color-mix(in srgb, var(--c-bg) 70%, transparent); }
.lab-first-card { max-inline-size: 560px; inline-size: 100%; display: grid; gap: var(--space-3); padding: var(--space-4); }
.lab-first-card h2 { margin: 0; font-size: var(--fs-4); }
.lab-first-card > p { margin: 0; }
.lab-first-boards { justify-self: start; }
.lab-tpls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.lab-tpl { inline-size: 100%; display: grid; gap: 6px; padding: 8px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); font: inherit; font-weight: 700; font-size: var(--fs-1); color: var(--c-text); cursor: pointer; text-align: start; }
.lab-tpl:hover { border-color: var(--c-accent); }
.lab-tpl:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.lab-mini { inline-size: 100%; aspect-ratio: 4 / 3; display: block; background: var(--c-invert-bg); border-radius: 4px; }
.mini-board { fill: #1B1B20; stroke: #3A3A42; stroke-width: 2; }
.mini-stripe { fill: var(--brand-red); }
.mini-wire { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mini-tile { fill: #F4F4F5; }
.lab-first-card > .btn-ghost { justify-self: center; }
.lab-hint { position: absolute; inset-block-start: var(--space-3); inset-inline: var(--space-3); margin: 0 auto; max-inline-size: max-content; padding: 8px 14px; background: var(--c-invert-bg); color: var(--c-invert-text); border-radius: var(--radius-sm); font-size: var(--fs-0); font-weight: 600; z-index: 3; pointer-events: none; text-align: center; }
.lab-toast { position: fixed; inset-block-end: calc(var(--lab-dock-h) + 76px); inset-inline: var(--space-3); margin: 0 auto; max-inline-size: 440px; inline-size: fit-content; padding: 12px 16px; background: var(--c-invert-bg); color: var(--c-invert-text); border-radius: var(--radius-sm); box-shadow: var(--shadow); z-index: 60; font-weight: 600; font-size: var(--fs-1); text-align: center; }
.lab-toast.is-error { background: var(--c-danger); color: #fff; }
:root[data-theme="dark"] .lab-toast:not(.is-error) { outline: 1px solid var(--c-border); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lab-toast:not(.is-error), :root:not([data-theme="light"]) .lab-hint { outline: 1px solid var(--c-border); } }

/* ---------------------------------------------------------------- side panel */
.lab-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-block-end: 1.5px solid var(--c-border); flex: none; }
.lab-tab { position: relative; min-block-size: 48px; background: none; border: 0; color: var(--c-muted); font: inherit; font-weight: 700; font-size: var(--fs-1); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 4px; }
.lab-tab[aria-selected="true"] { color: var(--c-text); }
.lab-tab::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: -1.5px; block-size: 5px; background: linear-gradient(90deg, var(--brand-red) 0 70%, transparent 70% 76%, var(--c-text) 76%); clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); transform: scaleX(0); transform-origin: var(--_o, right); }
html[dir="ltr"] .lab-tab::after { --_o: left; }
.lab-tab[aria-selected="true"]::after { transform: none; }
@media (prefers-reduced-motion: no-preference) { .lab-tab::after { transition: transform .22s cubic-bezier(.2,.7,.2,1); } }
.lab-tab:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.lab-tab-badge { min-inline-size: 20px; block-size: 20px; padding-inline: 5px; border-radius: 10px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--c-surface-2); color: var(--c-text); }
#lab-badge-wiring, [data-dock-badge="wiring"] { background: var(--c-danger); color: #fff; }
.lab-tabpanel { flex: 1; overflow-y: auto; padding: var(--space-3); overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-3); }
.lab-tabpanel:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.lab-tabpanel[hidden] { display: none; }
.lab-tabpanel > * { min-inline-size: 0; flex-shrink: 0; }
.lab-sub { margin: var(--space-2) 0 0; font-size: var(--fs-1); font-weight: 700; }
.lab-empty { text-align: center; padding: var(--space-5) var(--space-3); color: var(--c-muted); display: grid; gap: var(--space-2); }
.lab-empty p { margin: 0; }
.lab-empty-h { color: var(--c-text); font-weight: 700; font-size: var(--fs-2); }

/* التوصيل */
.lab-sum { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); font-weight: 700; }
.lab-sum.is-ok { background: var(--c-success-soft); color: var(--c-success); }
.lab-sum.is-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.lab-sum.is-error { background: var(--c-danger-soft); color: var(--c-danger); }
.lab-issues { display: grid; gap: var(--space-2); }
.lab-issue { display: grid; gap: var(--space-2); padding: 10px 12px; font-size: var(--fs-1); }
.lab-issue p { margin: 0; }
.lab-fix { justify-self: start; min-block-size: 40px; font-size: var(--fs-0); }
.lab-wlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.lab-wpart { border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.lab-whead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 4px 4px 4px 0; border-block-end: 1px solid var(--c-border); }
html[dir="rtl"] .lab-whead { padding: 4px 0 4px 4px; }
.lab-wname { display: grid; gap: 0; border: 0; background: none; font: inherit; color: var(--c-text); text-align: start; padding: 6px 12px; cursor: pointer; min-block-size: 44px; }
.lab-wname .muted { font-size: var(--fs-0); }
.lab-wrm { min-block-size: 40px; font-size: var(--fs-0); }
.lab-wpins { list-style: none; margin: 0; padding: 6px 12px; display: grid; gap: 4px; }
.lab-wrow { display: grid; grid-template-columns: 14px 56px 16px 1fr; align-items: center; gap: 8px; min-block-size: 44px; }
.lab-wrow.is-error .lab-wsel { border-color: var(--c-danger); }
.lab-swatch { inline-size: 12px; block-size: 12px; border-radius: 2px; background: var(--_w); }
.lab-swatch[data-role="i2c"] { background: repeating-linear-gradient(90deg, var(--_w) 0 4px, transparent 4px 6px); outline: 1px solid var(--_w); }
.lab-wpin { font: 700 var(--fs-0)/1 var(--font-en); }
.lab-warrow::before { content: "→"; color: var(--c-muted); font-family: var(--font-en); }
.lab-wsel { block-size: 40px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text); font: 600 var(--fs-1)/1 var(--font-en); padding-inline: 8px; min-inline-size: 0; }
.lab-wsel:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent); }

/* القواعد */
.lab-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.lab-rule { padding: 12px; display: grid; gap: var(--space-2); }
.lab-rule.is-incomplete { border-color: var(--c-warning); }
.lab-rule-n { margin: 0; display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-0); font-weight: 700; color: var(--c-muted); }
.lab-rule-warn { color: var(--c-warning); }
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; line-height: 1; }
.rule-else { padding-block-start: var(--space-2); border-block-start: 1px dashed var(--c-border); }
.rule-word { font-weight: 800; font-size: var(--fs-1); }
.rule-unit { font-weight: 700; color: var(--c-muted); font-size: var(--fs-0); }
.rule-act { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.slot { min-block-size: 40px; max-inline-size: 100%; padding: 0 10px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-2); font: inherit; font-weight: 700; font-size: var(--fs-1); color: var(--c-text); }
select.slot { padding-inline-end: 6px; }
.slot[data-empty] { background: transparent; border-style: dashed; color: var(--c-muted); font-weight: 500; }
.slot:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-accent); }
.slot-num { inline-size: 76px; font-family: var(--font-en); }
.slot-text { inline-size: 140px; font-family: ui-monospace, Consolas, monospace; }
.slot-color { inline-size: 52px; padding: 4px; }
.rule-arrow-wrap { display: inline-flex; }
.rule-arrow { inline-size: 20px; block-size: 20px; color: var(--c-muted); }
html[dir="ltr"] .rule-arrow { transform: scaleX(-1); }
.rule-add { justify-self: start; min-block-size: 40px; font-size: var(--fs-0); padding-inline: 10px; }
.rule-act-rm { inline-size: 36px; block-size: 36px; }
.lab-rule-foot { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.rule-del { color: var(--c-danger); min-block-size: 40px; font-size: var(--fs-0); }
.lab-rules-foot { display: grid; gap: var(--space-2); }
.lab-rule-new { justify-self: stretch; min-block-size: 48px; font-weight: 700; border-style: dashed; }
.lab-rules-count { margin: 0; font-size: var(--fs-0); }

/* المحاكاة */
.lab-sim-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.lab-play { --_bg: var(--c-accent); --_fg: var(--c-bg); --_bd: var(--c-accent); min-block-size: 48px; padding-inline: 18px; gap: 8px; font-weight: 700; }
.lab-play svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.lab-reset { min-block-size: 48px; }
.lab-speed { margin-inline-start: auto; gap: 4px; }
.lab-speed .chip { min-block-size: 40px; min-inline-size: 44px; justify-content: center; }
.lab-speed .chip[aria-checked="true"] { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }
.lab-ctrls { display: grid; gap: var(--space-3); }
.lab-ctrl { display: grid; gap: 4px; }
.lab-ctrl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lab-ctrl-h label { font-weight: 600; font-size: var(--fs-1); }
.lab-ctrl-h .muted { font-size: var(--fs-0); font-weight: 500; }
.lab-read { font-weight: 800; font-size: var(--fs-2); font-family: var(--font-en); }
.lab-ctrl input[type="range"] { inline-size: 100%; block-size: 44px; accent-color: var(--c-accent); margin: 0; }
.lab-hold { min-block-size: 48px; inline-size: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.lab-hold.is-down, .lab-hold[aria-pressed="true"] { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }
.lab-sim-norules { margin: 0; font-size: var(--fs-1); }
.lab-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: var(--fs-0); max-block-size: 260px; overflow-y: auto; border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.lab-log li { display: flex; gap: 10px; padding: 8px 10px; border-block-end: 1px solid var(--c-border); }
.lab-log li:last-child { border-block-end: 0; }
.lab-log time { color: var(--c-muted); flex: none; font-family: var(--font-en); }
.lab-log-empty { color: var(--c-muted); }

/* الكود */
.lab-code-prev { border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-2); overflow: hidden; }
.lab-code-pre { margin: 0; padding: 10px 0; font: 13px/1.55 ui-monospace, "Cascadia Mono", Consolas, monospace; overflow-x: auto; text-align: left; }
.lab-code-pre:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
.lab-code-pre code { display: grid; min-inline-size: max-content; }
.lab-ln { display: block; padding-inline: 10px 14px; white-space: pre; }
.lab-ln-n { display: inline-block; inline-size: 2.2em; color: var(--c-muted); text-align: right; margin-right: 12px; user-select: none; }
.lab-code-rest { position: relative; padding: 4px 10px 16px; }
.lab-code-bars { display: grid; gap: 9px; padding: 6px 0 6px calc(2.2em + 12px); -webkit-mask-image: linear-gradient(#000 0 10%, transparent 85%); mask-image: linear-gradient(#000 0 10%, transparent 85%); direction: ltr; }
.lab-code-bars span { display: block; block-size: 9px; border-radius: 3px; background: var(--c-border); }
.lab-lock { position: absolute; inset-inline: 12px; inset-block-start: 30px; margin-inline: auto; max-inline-size: 300px; padding: 12px 14px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); box-shadow: var(--shadow); text-align: center; display: grid; gap: 6px; }
.lab-lock p { margin: 0; }
.lab-lock .muted { font-size: var(--fs-0); }
.lab-lock-h { font-weight: 700; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.lab-lock-i { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.lab-libs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.lab-code-rest { min-block-size: 176px; }
.lab-tiers { display: grid; gap: var(--space-2); }
@media (min-width: 1100px) { .lab-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lab-tier { position: relative; display: grid; gap: 4px; align-content: start; padding: 12px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); font: inherit; color: var(--c-text); text-align: start; cursor: pointer; min-block-size: 88px; }
.lab-tier:hover { border-color: var(--c-muted); }
.lab-tier[aria-checked="true"] { border: 2px solid var(--c-accent); padding: 11.5px 13.5px; }
.lab-tier[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.lab-tier:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.lab-tier-top { display: grid; gap: 2px; padding-inline-end: 22px; }
.lab-tier-top strong { font-size: var(--fs-2); }
.lab-tier-price { font-weight: 800; font-size: var(--fs-2); }
/* "مخصوص": the title carries the card; "بعد المراجعة" is a note, not a price */
.lab-tier[data-tier="custom"] .lab-tier-top strong { font-size: var(--fs-2); }
.lab-tier[data-tier="custom"] .lab-tier-price { font-size: var(--fs-1); font-weight: 700; color: var(--c-muted); }
.lab-tier-p { font-size: var(--fs-0); color: var(--c-muted); line-height: 1.5; }
.lab-tier-need { font-size: var(--fs-0); font-weight: 700; color: var(--c-warning); }
.lab-tag-free { justify-self: start; background: var(--c-success-soft); color: var(--c-success); }
.lab-tier-check { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 1.5px solid var(--c-border); }
.lab-tier[aria-checked="true"] .lab-tier-check { background: var(--c-accent); border-color: var(--c-accent); box-shadow: inset 0 0 0 4px var(--c-surface); }
.lab-with { align-items: flex-start; padding-block: 8px; }
.lab-with input { margin-block-start: 3px; }
.lab-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-1); }
.lab-plist li { display: grid; grid-template-columns: 32px 1fr auto; gap: 8px; padding: 6px 0; border-block-end: 1px solid var(--c-border); }
.lab-plist li.is-out { color: var(--c-warning); }
.lab-plist-n { min-inline-size: 0; }
.lab-delivery { padding: var(--space-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.lab-del-choice { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.lab-totals { padding: var(--space-3); border: 1.5px solid var(--c-text); border-inline-start: 6px solid var(--c-accent); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.lab-cta { min-block-size: 56px; }
.lab-cta-why { margin: 0; color: var(--c-danger); font-weight: 600; }
.lab-done { padding-block: var(--space-4); }
.lab-done .code-box output { font: 800 var(--fs-3)/1 var(--font-en); letter-spacing: .04em; }
.lab-done h3 { margin: 0; }
.lab-done p { margin: 0; }

/* dialog */
.lab-dialog .sheet-inner { display: grid; gap: var(--space-3); }
.lab-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.lab-dialog-head h2 { margin: 0; font-size: var(--fs-3); }
.lab-dialog-actions { justify-content: flex-start; }
.lab-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.lab-projects > li { display: flex; gap: var(--space-2); align-items: center; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding-inline-end: 4px; }
.lab-proj { flex: 1; display: grid; gap: 2px; padding: 10px 12px; border: 0; background: none; text-align: start; font: inherit; color: var(--c-text); cursor: pointer; min-block-size: 56px; }
.lab-proj .muted { font-size: var(--fs-0); }
.lab-tpl-dialog .lab-first-card { box-shadow: none; padding: 0; border: 0; }

/* ---------------------------------------------------------------- desktop ≥ 1100: templates 5 across */
@media (min-width: 1100px) { .lab-tpls { grid-template-columns: repeat(5, 1fr); } .lab-first-card { max-inline-size: 760px; } }

/* ---------------------------------------------------------------- phones / small tablets < 900 */
@media (max-width: 899px) {
  body[data-page="lab"] { --lab-header-h: 52px; --lab-dock-h: calc(64px + env(safe-area-inset-bottom, 0px)); grid-template-rows: var(--lab-header-h) minmax(0, 1fr) var(--lab-dock-h); }
  .lab-header { padding-inline: 8px; gap: 4px; }
  .lab-brand-full { display: none !important; }
  .lab-brand-mark { display: block !important; block-size: 28px !important; }
  .lab-header > .lab-boards, .lab-header .cart-btn, .lab-header .login-btn [data-login-label] { display: none; }
  .lab-header .login-btn { min-inline-size: 44px; padding-inline: 0; justify-content: center; }
  .lab-save span { display: none; }
  .lab-save { min-inline-size: 44px; padding-inline: 0; justify-content: center; border-color: transparent; position: relative; }
  .lab-save.is-dirty::after { position: absolute; inset-block-start: 9px; inset-inline-end: 9px; }
  .lab-title-in { font-size: var(--fs-1); padding-inline: 6px; }
  .lab-hist .lab-ibtn { inline-size: 40px; }
  .lab-menu-boards { display: block; }
  .lab-menu { position: fixed; inset-block-start: calc(var(--lab-header-h) + 4px); inset-inline: 8px auto; inset-inline-end: 8px; min-inline-size: 0; }
  .lab-app { grid-template-columns: minmax(0, 1fr); }
  .lab-stage { grid-column: 1; grid-row: 1; }
  .lab-sheet {
    position: fixed; inset-inline: 0; inset-block-end: var(--lab-dock-h); z-index: 20;
    border: 1px solid var(--c-border); border-block-end: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -12px 28px -18px rgba(10,10,10,.5);
    block-size: 50dvh; transform: translateY(105%); visibility: hidden;
  }
  @media (prefers-reduced-motion: no-preference) { .lab-sheet { transition: transform .22s cubic-bezier(.2,.7,.2,1), block-size .22s cubic-bezier(.2,.7,.2,1), visibility 0s linear .22s; } .lab-sheet.is-open { transition: transform .22s cubic-bezier(.2,.7,.2,1), block-size .22s cubic-bezier(.2,.7,.2,1); } .lab-sheet.is-dragging { transition: none; } }
  .lab-sheet.is-open { transform: none; visibility: visible; }
  .lab-sheet[data-snap="peek"] { block-size: 120px; }
  .lab-sheet[data-snap="half"] { block-size: 50dvh; }
  .lab-sheet[data-snap="full"] { block-size: calc(88dvh - var(--lab-dock-h)); }
  .lab-palette, .lab-panel { border-inline: 0; }
  .lab-sheet-bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-block-size: 44px; padding-inline: 4px; flex: none; touch-action: none; }
  .lab-sheet-bar h2 { text-align: center; }
  .lab-panel .lab-sheet-bar { min-block-size: 28px; }
  .lab-grab { grid-column: 2; grid-row: 1; justify-self: center; inline-size: 88px; block-size: 28px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
  .lab-sheet-bar h2 { grid-column: 2; grid-row: 2; pointer-events: none; padding-block-start: 0; }
  .lab-grab span { display: block; inline-size: 40px; block-size: 5px; border-radius: 3px; background: var(--c-border); }
  .lab-grab:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
  .lab-sheet-close { grid-column: 3; grid-row: 1; }
  .lab-panel .lab-sheet-bar h2 { display: none; }
  .lab-pal-hint { display: none; }
  .lab-dock {
    display: grid; grid-template-columns: repeat(5, 1fr); grid-row: 3; position: relative; z-index: 25;
    background: var(--c-surface); border-block-start: 1px solid var(--c-border); padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .lab-dock-btn { position: relative; display: grid; place-items: center; align-content: center; gap: 2px; min-block-size: 64px; border: 0; background: none; color: var(--c-muted); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0 2px; }
  .lab-dock-btn svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .lab-dock-btn[aria-current="true"] { color: var(--c-text); }
  .lab-dock-btn[aria-current="true"]::before { content: ""; position: absolute; inset-block-start: -1px; inset-inline: 26%; block-size: 3px; background: var(--c-accent); }
  .lab-dock-add { color: var(--c-text); }
  .lab-dock-add svg { inline-size: 28px; block-size: 28px; padding: 3px; border-radius: 6px; background: var(--c-accent); color: var(--c-bg); stroke-width: 2.4; }
  .lab-dock-btn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; }
  .lab-dock-btn .lab-tab-badge { position: absolute; inset-block-start: 6px; inset-inline-start: calc(50% + 6px); }
  .lab-tabs .lab-tab { min-block-size: 44px; }
  /* the dock already switches the panels: no second tab strip inside the sheet */
  .lab-panel .lab-tabs { display: none; }
  /* toast sits above an open sheet (a full sheet: under the header instead) */
  body.lab-sheet-open[data-sheet-snap="peek"] .lab-toast { inset-block-end: calc(var(--lab-dock-h) + 120px + 12px); }
  body.lab-sheet-open[data-sheet-snap="half"] .lab-toast { inset-block-end: calc(var(--lab-dock-h) + 50dvh + 12px); }
  body.lab-sheet-open[data-sheet-snap="full"] .lab-toast { inset-block-end: auto; inset-block-start: calc(var(--lab-header-h) + 8px); }
  .lab-tpls { grid-template-columns: repeat(2, 1fr); }
  .lab-first-card { padding: var(--space-3); }
  .lab-first { align-items: start; }
  .lab-hint { inset-block-start: var(--space-2); }
  .lab-zoom { inset-block-end: var(--space-2); inset-inline-end: var(--space-2); }
  body.lab-sheet-open .lab-zoom, body.lab-sheet-open .lab-hint { visibility: hidden; }
}
/* one message at a time: the hint steps aside while a toast is up */
body.lab-toasting .lab-hint { visibility: hidden; }
@media (max-width: 380px) { .lab-hist .lab-ibtn:last-child { display: none; } }

/* ================================================================ kits page */
.kits-head { padding-block: var(--space-5) var(--space-4); }
.kits-head h1 { margin: 0 0 var(--space-2); font-size: var(--fs-5); }
.kits-head p { margin: 0; max-inline-size: 46rem; color: var(--c-muted); font-size: var(--fs-2); }
.kits-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .kits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kits-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.kit { display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; }
.kit .lab-mini { border-radius: 0; aspect-ratio: 4 / 3; }
.kit-body { padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; }
.kit-body h2 { margin: 0; font-size: var(--fs-3); }
.kit-body > p { margin: 0; color: var(--c-muted); }
.kit-parts summary { cursor: pointer; font-weight: 700; min-block-size: 44px; display: flex; align-items: center; }
.kit-parts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--fs-1); }
.kit-parts li { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px 0; border-block-end: 1px solid var(--c-border); }
.kit-parts li.is-out { color: var(--c-warning); }
.kit-total { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-block-start: var(--space-2); }
.kit-total strong { font-size: var(--fs-3); font-weight: 800; }
.kit-actions { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); }
.kit-actions .btn { min-block-size: 48px; }
.kits-store { margin-block-start: var(--space-6); }
.kits-store h2 { font-size: var(--fs-4); margin: 0 0 var(--space-3); }
.kit-thumb { aspect-ratio: 4 / 3; }
.kit .lab-mini { block-size: auto; }
body.lab-sheet-open .lab-part-tools { visibility: hidden; }
.kit-skel { min-block-size: 420px; background: var(--c-surface-2); border-radius: var(--radius); }

/* wiring notes folded under the summary when there are more than 2 */
.lab-issues-fold > summary { cursor: pointer; display: list-item; padding-block: 11px; font-weight: 700; color: var(--c-text); }
.lab-issues-fold > summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.lab-issues-fold[open] > summary { margin-block-end: var(--space-2); }