/* The composer overlay. Leans on ../style.css for tokens and dark mode. */
.wrap{max-width:1100px;margin:0 auto;padding:24px 16px 64px}
.head{display:flex;gap:18px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px}
.head h1{margin:0 0 4px;font-size:1.5rem}
.sub{margin:0;font-size:.85rem;color:var(--ink-2);max-width:60ch}
.acts{display:flex;gap:8px}
.btn{font:inherit;font-size:.85rem;padding:8px 14px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.btn.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.btn[disabled]{opacity:.5;cursor:default}
.picks{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.picks label{display:flex;flex-direction:column;gap:4px;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3)}
.picks select{font:inherit;font-size:.85rem;padding:6px 8px;border-radius:6px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);min-width:150px}
.mode{font-size:.75rem;color:var(--ink-3);padding-bottom:7px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:16px;min-width:0}
.card h2{margin:0 0 6px;font-size:.95rem}
.stage{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
.canvases{display:flex;gap:14px;flex-wrap:wrap}
.canvases figure{margin:0;text-align:center}
.canvases canvas{background:var(--line-2);border:1px solid var(--line);border-radius:8px;
  image-rendering:pixelated;width:min(300px,42vw);height:auto;aspect-ratio:1}
.canvases figcaption{font-size:.72rem;color:var(--ink-3);margin-top:4px}
.tt{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.76rem}
.tt th{text-align:right;font-weight:600;color:var(--ink-3);padding:3px 6px;border-bottom:1px solid var(--line)}
.tt th:first-child{text-align:left}
.tt td{text-align:right;padding:3px 6px;border-bottom:1px solid var(--line-2)}
.tt td:first-child{text-align:left;font-family:var(--sans,inherit)}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{border:1px solid var(--line);border-radius:8px;padding:5px;background:var(--bg);
  width:92px;text-align:center;position:relative}
.opt canvas{width:80px;height:80px;image-rendering:pixelated;display:block}
.opt .lab{font-size:.62rem;color:var(--ink-3);margin-top:3px;word-break:break-word;line-height:1.2}
.opt .d{font-family:var(--mono);font-size:.62rem;color:var(--ink-2)}
/* The chosen option is marked by a border, a ✓ glyph AND a label — never by
   colour alone, the same rule the rest of this surface follows. */
.opt.chosen{border-color:var(--accent);border-width:2px;padding:4px}
.opt.chosen .lab{color:var(--accent);font-weight:600}
.opt .tick{position:absolute;top:2px;right:5px;font-size:.8rem;color:var(--accent)}
.opt.best .d{font-weight:700}
.race{display:flex;gap:16px;flex-wrap:wrap}
.race figure{margin:0;text-align:center}
.race canvas{width:160px;height:160px;image-rendering:pixelated;background:var(--line-2);
  border:1px solid var(--line);border-radius:8px}
.race figcaption{font-size:.74rem;color:var(--ink-2);margin-top:4px}
.race .num{font-family:var(--mono);font-size:.8rem;color:var(--ink)}
.cap{font-size:.78rem;color:var(--ink-3)}
@media (max-width:820px){ .stage{grid-template-columns:minmax(0,1fr)} }

/* The text-steering row. */
.steer{margin-bottom:16px}
.steerRow{display:flex;gap:8px;flex-wrap:wrap}
.steerRow input{flex:1 1 320px;min-width:0;font:inherit;font-size:.9rem;padding:9px 11px;
  border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.derived{margin-top:10px;font-size:.78rem}
.derived table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:.74rem}
.derived th{text-align:right;color:var(--ink-3);font-weight:600;padding:3px 6px;border-bottom:1px solid var(--line)}
.derived th:first-child,.derived td:first-child{text-align:left}
.derived th:last-child,.derived td:last-child{text-align:left}
.derived td{text-align:right;padding:3px 6px;border-bottom:1px solid var(--line-2)}
.derived .drop{color:var(--ink-3);font-style:italic}
.derived .note{color:var(--ink-3);margin-top:6px;font-family:inherit;font-size:.78rem}
/* A colour is shown as a swatch AND its name — never the swatch alone, the
   same rule the option strip follows for the chosen move. */
.sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;
  vertical-align:-1px;border:1px solid var(--line)}