/* The case itself is drawn by the harness's device.css, served from public/
   beside the WASM. These rules are unlayered on purpose: that file is too, and
   a layered rule loses to an unlayered one whatever its specificity says. */

.simulator {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
  margin: var(--space-l) 0 var(--space-3xl);
}

.simulator .sb-case { box-shadow: inset 0 2px 0 #fff, inset 0 -2px 6px #0000001a, 0 10px 24px #00000014; }

.simulator:not(.simulator--running) :is(.sb-pad, .sb-key, .simulator-traffic) { visibility: hidden; }

@media (max-width: 36rem) {
  .simulator .sb-case { --sb-glass: 200px; }
}

@layer components {
  .simulator-controls {
    display: flex;
    align-items: center;
    gap: var(--space-inline-s);
    flex-wrap: wrap;
  }

  .simulator-start,
  .simulator-restart,
  .simulator-traffic {
    font: inherit;
    font-size: var(--text-s);
    color: var(--paper);
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--space-inline-2xs);
    padding: var(--space-2xs) var(--space-inline-s);
    cursor: pointer;
  }
  .simulator-start:hover,
  .simulator-restart:hover,
  .simulator-traffic:hover { background: var(--blip); border-color: var(--blip); }
  .simulator-start[disabled] { display: none; }

  .simulator-restart { display: none; }
  .simulator--off .simulator-restart { display: inline-block; }

  .simulator-status {
    font-size: var(--text-xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
  }
}