/* Robot Builder: preview on the left (sticky on wide screens), parts list on the right. Shares tokens with style.css. */
.sim-wrap { max-width: 1220px; }
.sim-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sim-head h1 { margin: 0; }
.intro { margin: 0; color: var(--muted); max-width: 70ch; }
h2 { font-size: 18px; margin: 0 0 4px; }
.hint { margin: 0 0 10px; color: var(--muted); font-size: 15px; }

.sim-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .sim-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .preview-col { position: sticky; top: 12px; }
}
.preview-col, .build-col { display: grid; gap: 12px; min-width: 0; }
.sim-viewer { height: min(52vh, 460px); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.legend span { white-space: nowrap; color: var(--ink); }
.verdict:empty { display: none; }

.text { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 8px 10px; min-width: 0; max-width: 100%; }
select.text { cursor: pointer; }
.name-row .text, .row #starter { flex: 1 1 220px; }
.row .sub { margin: 0; }

.budget { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); padding: 12px 14px; }
.budget-rows { display: grid; gap: 8px; }
.brow { display: grid; grid-template-columns: minmax(0, 11em) 1fr auto; gap: 10px; align-items: center; font-size: 15px; }
.pips { display: flex; gap: 5px; }
.pip { width: 22px; height: 12px; border-radius: 4px; border: 1px solid var(--line); background: var(--soft); }
.pip.on { background: var(--accent); border-color: transparent; }
.pip.over { background: var(--fail); border-color: transparent; }
.brow .count { font-variant-numeric: tabular-nums; color: var(--muted); }
.brow.bad .count { color: var(--fail); font-weight: 700; }

.modules { display: grid; gap: 12px; }
.modules:empty::before { content: "No mechanisms yet. Add one below."; color: var(--muted); }
.mod { border: 1px solid var(--line); border-left: 6px solid var(--mc, var(--part)); border-radius: var(--r); background: var(--panel); padding: 12px 14px; display: grid; gap: 10px; }
.mod.bad { border-color: var(--fail); border-left-color: var(--mc, var(--part)); }
.mod-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mod-head h3 { margin: 0; font-size: 17px; flex: 1 1 auto; }
.mod-head .text { width: 9em; font-family: var(--mono); font-size: 14px; }
.xbtn { border: 1px solid var(--line); background: none; border-radius: 8px; padding: 4px 10px; cursor: pointer; color: var(--muted); }
.xbtn:hover { color: var(--fail); border-color: var(--fail); }
.fields { display: grid; gap: 8px 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: grid; gap: 3px; font-size: 15px; min-width: 0; }
.field > span { color: var(--muted); }
.field b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.field input[type=range] { width: 100%; accent-color: var(--mc, var(--accent)); }
.stats { margin: 0; padding-left: 1.2em; font-size: 14px; color: var(--muted); display: grid; gap: 2px; }
.stats:empty { display: none; }
.mod-problems { margin: 0; padding-left: 1.2em; color: var(--fail); font-size: 14px; display: grid; gap: 4px; }
.mod-problems:empty { display: none; }
.mod-problems .fix { color: var(--ink); }

.add-box { border: 1px dashed var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 8px; }
.add-box .row .text { flex: 1 1 220px; }
.add-box .hint { margin: 0; }
.drive-link { text-align: center; text-decoration: none; }
.drive-link[aria-disabled="true"] { opacity: .45; pointer-events: none; }