/* BAB-0052: the editor feels alive. Loaded last, after alive.css (the neon-per-tab layer every editor page shares); this adds what only
   the editor needs: lit lists that answer the 3D view, sub tabs, picture cards for kits and starting bodies, checks that flip green or red,
   a short flash on the status line, and the keyboard sheet. Plain white cards (no glass blur), 44 px targets, 14 px text, 2 px focus ring. */
.card { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
body { background-image: radial-gradient(circle at 0 0, rgba(var(--hue-rgb), 0.08), transparent 38%), radial-gradient(rgba(20, 26, 33, 0.06) 1px, transparent 1.3px); }

/* ---- the Add panel: four sub tabs, one pane at a time */
.subtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 8px; position: sticky; top: -1px; z-index: 4; background: #fff; padding: 4px 0 6px; border-bottom: 1px solid var(--hair); }
.subtabs .sub { flex-direction: column; gap: 2px; min-height: 54px; padding: 4px 2px; font-size: 14px; }
.subtabs .sub .ico { width: 22px; height: 22px; }
.addto { display: none; margin-bottom: 4px; }
#p-add[data-addview="kits"] .addto, #p-add[data-addview="parts"] .addto { display: grid; }
.addpane:not([hidden]) { animation: pane-in .38s var(--ease) both; }
@keyframes pane-in { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* ---- shapes: each drawn in 3D */
.shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.btn.shape { min-height: 84px; gap: 0; padding: 4px 2px 6px; }
.btn.shape .lib3d { width: 100%; max-width: 76px; height: auto; display: block; transition: transform .25s var(--ease), filter .25s var(--ease); }
.btn.shape span { font-size: 14px; line-height: 1.15; }
.btn.shape:hover .lib3d, .btn.shape:focus-visible .lib3d { transform: scale(1.14) rotate(-3deg); filter: drop-shadow(0 6px 8px rgba(var(--hue-rgb), 0.55)); }
.btn.shape:active .lib3d { transform: scale(0.96); }

/* ---- picture cards: kits and starting bodies */
.cards { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
#starts .cards { grid-template-columns: 1fr; }
.card2 { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 3px solid var(--hue); border-radius: 12px; background: #fff; overflow: hidden; transition: transform .2s var(--ease), box-shadow .22s var(--ease), border-color .2s var(--ease); }
.card2:hover, .card2:focus-within { transform: translateY(-2px); border-color: rgba(var(--hue-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--hue-rgb), 0.16), 0 16px 26px -16px rgba(var(--hue-rgb), 0.95); }
.card2 .pic { aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(#F7F9FB, #E3E8EE); display: grid; place-items: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.card2.kit .pic { cursor: grab; }
.card2 .pic img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; transition: transform .45s var(--ease); }
.card2:hover .pic img, .card2:focus-within .pic img { transform: scale(1.08); }
.card2 .nothumb { width: 38%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(rgba(var(--hue-rgb), 0.5), transparent 70%); animation: alive-pulse 1.6s ease-in-out infinite; }
.card2 .meta { padding: 8px 10px 2px; flex: 1; }
.card2 .meta b { display: block; font-size: 14px; line-height: 1.25; }
.card2 .meta .sub { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--ink2); }
.kitcards .meta .sub { display: none; }                         /* a kit says what it is on the status line when you point at it */
.card2 > .btn { margin: 6px 10px 10px; }
#starts .card2 .pic { aspect-ratio: 4 / 3; }
.starts2 { display: grid; gap: 8px; }
.kitcards { margin-bottom: 8px; }

/* ---- lists: a row lit by the pointer in the view, by the pointer on it, and a picked row that breathes */
.list li, .plist li { transition: transform .15s var(--ease); }
.list li.is-hover > button, .plist li.is-hover .pcb, .list button:focus-visible, .pcb:focus-visible {
  border-color: var(--hue) !important; background: rgba(var(--hue-rgb), 0.12); box-shadow: 0 0 0 3px rgba(var(--hue-rgb), 0.2), inset 4px 0 0 var(--hue); }
.list button[aria-pressed="true"] { animation: lit-row 2.8s ease-in-out infinite; }
@keyframes lit-row { 50% { box-shadow: inset 4px 0 0 var(--hue), 0 0 0 1px rgba(var(--hue-rgb), 0.5), 0 0 16px -2px rgba(var(--hue-rgb), 0.75); } }
.pcb[aria-pressed="true"] { box-shadow: inset 4px 0 0 var(--hue), 0 0 0 1px rgba(var(--hue-rgb), 0.5); }
.list .lib { width: 22px; height: 22px; flex: none; fill: rgba(var(--hue-rgb), 0.2); stroke: var(--hue-ink); stroke-width: 1.6; stroke-linejoin: round; }
.list .lib .cut { fill: #fff; }
.is-new { animation: row-in .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes row-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.list li.kithead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 700; border-top: 2px solid var(--hue); padding-top: 6px; }
.list li.kithead > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.list li.kithead > button { width: auto; flex: none; justify-content: center; }
.list li.inkit > button { margin-left: 10px; width: calc(100% - 10px); border-left: 4px solid rgba(var(--hue-rgb), 0.7); }

/* ---- the status line answers: a short glow when something was done */
#status-row { transition: background-color .3s; }
#status-row.flash { animation: flash-ok 1s var(--ease); }
#status-row.flash-bad { animation: flash-bad-bg 1.1s var(--ease); }
@keyframes flash-ok { 0% { background: rgba(var(--hue-rgb), 0.32); box-shadow: inset 4px 0 0 var(--hue); } 100% { background: transparent; box-shadow: inset 0 0 0 transparent; } }
@keyframes flash-bad-bg { 0% { background: rgba(214, 58, 58, 0.22); box-shadow: inset 4px 0 0 #D63A3A; } 100% { background: transparent; box-shadow: inset 0 0 0 transparent; } }

/* ---- checks that go green or red */
.rule { transition: background-color .5s, border-color .5s; }
.rule .meter i { transition: width .6s var(--ease), background-color .4s; }
.rule.flip-ok { animation: flip-ok 1s var(--ease); }
.rule.flip-bad { animation: flip-bad .75s var(--ease); }
.rule.enter, .pc.enter { animation: row-in .4s var(--ease) both; }
@keyframes flip-ok { 0% { background: #FFF1F1; transform: scale(.97); } 30% { background: #C9F2D7; box-shadow: 0 0 0 4px rgba(24, 227, 107, 0.5), 0 0 26px rgba(24, 227, 107, 0.45); transform: scale(1.025); } 100% { background: #fff; box-shadow: none; transform: none; } }
@keyframes flip-bad { 0% { transform: translateX(0); } 15% { background: #FBD2D2; box-shadow: 0 0 0 4px rgba(214, 58, 58, 0.4); transform: translateX(-7px); } 35% { transform: translateX(6px); } 55% { transform: translateX(-4px); } 75% { transform: translateX(2px); } 100% { background: #FFF8F8; box-shadow: none; transform: none; } }
.rule.flip-ok .rh .ico, .gi.flip-ok .ico, .pc.flip-ok .badge .ico { animation: pop .7s cubic-bezier(.3, 1.7, .5, 1); }
.rule.flip-bad .rh .ico, .gi.flip-bad .ico, .pc.flip-bad .badge .ico { animation: pop .6s cubic-bezier(.3, 1.7, .5, 1); }
.pc.flip-ok .pcb { animation: flip-ok .9s var(--ease); }
.pc.flip-bad .pcb { animation: flip-bad .7s var(--ease); }
.gi.flip-ok { animation: flip-ok 1s var(--ease); }
.gi.flip-bad { animation: flip-bad .75s var(--ease); }
.count.pop { animation: pop .55s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes pop { 0% { transform: scale(.3); opacity: .2; } 60% { transform: scale(1.4); } 100% { transform: none; opacity: 1; } }

/* ---- the keyboard sheet */
#keys { width: min(580px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
.keylist { display: grid; gap: 2px; margin: 6px 0; }
.krow { display: grid; grid-template-columns: minmax(120px, 210px) 1fr; gap: 6px 14px; align-items: center; min-height: 40px; font-size: 14px; border-bottom: 1px solid var(--hair); padding: 3px 0; }
.krow .kk { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.krow .kk i { font-style: normal; color: var(--ink2); }
kbd { display: inline-block; min-width: 30px; padding: 3px 8px; text-align: center; border: 1px solid #C3CBD6; border-bottom-width: 3px; border-radius: 8px; background: #fff; font: 700 14px/1.25 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--night); }
dialog[open] { animation: pane-in .3s var(--ease) both; }
@media (max-width: 460px) { .krow { grid-template-columns: 1fr; } }

/* two number boxes side by side ("At" and "Light band" on a seam) keep their digits: the label sits on top, the number under it
   (found by the clipped-text script: the "Light band" box was 0 px wide at 1920, its 1.6 not visible) */
.nfrow .nf:not(.wide) { grid-template-columns: 1fr auto; grid-template-areas: "l l" "i u"; row-gap: 0; padding: 3px 8px 0; }
.nfrow .nf:not(.wide) span { grid-area: l; line-height: 1.2; }
.nfrow .nf:not(.wide) input { grid-area: i; text-align: left; min-height: 34px; }
.nfrow .nf:not(.wide) em { grid-area: u; align-self: end; padding-bottom: 6px; }

/* the "Start your bot" card sits where the view cube is on a phone: the cube waits until there is a bot to turn */
.view:has(.empty.start:not([hidden])) #cube { display: none; }

/* ---- every width */
@media (max-width: 900px) {
  .cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #starts .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .shapes { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
@media (max-width: 520px) {
  .shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #starts .cards { grid-template-columns: 1fr; }
  .subtabs .sub { min-height: 54px; }
}
@media (min-width: 901px) and (max-width: 1250px) { .shapes { gap: 4px; } .btn.shape span { font-size: 14px; } }
/* three number boxes side by side in the narrowest side panel: kit sizes are not round (36.85), so the box keeps its digits */
@media (min-width: 901px) and (max-width: 1120px) { .nfrow3 .nf { padding: 3px 3px 0; } .nfrow3 .nf input { letter-spacing: -0.03em; } }

@media (prefers-reduced-motion: reduce) {
  .is-new, .addpane, .rule, .pc, .gi, .count, #status-row, dialog[open], .list button[aria-pressed="true"], .card2 .nothumb { animation: none !important; }
  .card2, .card2 .pic img, .btn.shape .lib3d { transition: none !important; transform: none !important; }
}