/* The controls editor ----------------------------------------------------- */

/* Controls: the shapes a game can be held in, one wide row each, the name
   over what it does — the same choice the New game dialog offers, so the same
   row as .choices there, whose shape it shares (dialog.css). Cyan on the one
   the game wears: a shape is the studio's own vocabulary rather than the
   game's, so it stays cyan whichever game is open. A manner of the arcade
   family is stepped in under it. */
.ctl-shapes { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; }
.ctl-shape { padding: 9px 12px; }
.ctl-shape.manner { margin-left: 18px; padding: 7px 12px; }
/* Only the rows that are buttons light up, which here means every row but
   the one the game already wears — and none at all in a game you may not
   change, where every row is a div. */
button.ctl-shape:hover:not(.on) {
  background: var(--hover);
  border-color: var(--border-soft);
  color: inherit;
}
.ctl-shape.on {
  border-color: color-mix(in oklab, var(--accent) 70%, transparent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
}
.ctl-shape.on .cname { color: var(--accent-hi); }
/* A verb and everything that does it: the game's word, then its bindings as
   chips. The word is never editable — the game's code asks for it by name. */
.ctl-verb {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
}
.ctl-verb:last-child { border-bottom: none; }
.ctl-verb > .cfg-name { flex: 0 0 7rem; }
.ctl-chip {
  font-size: 12px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--hover);
  white-space: nowrap;
}
/* A binding this shape has not got. Not crimson — nothing is in danger, it
   simply never fires — so it is struck through and stood down instead. */
.ctl-chip.dead { color: var(--muted); text-decoration: line-through; }
/* A verb row opens in place, and lights up only where it opens — in a game
   you may not change it is a list and nothing more. What opens sits under the
   row it belongs to, one at a time. */
.ctl-verb.opens { cursor: pointer; }
.ctl-verb.opens:hover { background: var(--hover); }
.ctl-verb.on { background: var(--hover); border-bottom: none; }
.ctl-open { border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
.ctl-editor {
  display: grid;
  gap: 4px;
  padding: 2px 0 10px 18px;
  background: var(--hover);
}
.ctl-binding { flex-wrap: wrap; }
.ctl-binding .ctl-name { width: 7rem; flex: 0 0 auto; }
.ctl-binding label.hint { gap: 4px; white-space: nowrap; }
.ctl-adds { padding-top: 4px; }
/* The three ways to add one. A select standing in for a button, so its own
   label is the first option and it goes back to it after a pick. */
select.ctl-add { font-size: 12px; padding: 3px 6px; max-width: 14rem; }