/* ADD-ON PARTS IN THE SIMULATOR (index.html #sim-parts, app.js paintParts).
 *
 * A character LCD showing what the program wrote, a card to hold to the
 * RFID reader, and an IR remote to press. Each card appears only when the
 * program uses that part. */

.sim-parts { display: grid; gap: 10px; padding: 10px 12px 12px; }
.sim-part {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--xp-border, var(--line));
  border-radius: var(--xp-radius-md, 12px);
  background: var(--xp-surface, var(--panel));
}
.sim-part[hidden] { display: none; }
.sim-part-label { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--xp-muted, var(--muted)); }

/* The LCD: a green-lit glass of two rows of sixteen. Kept green in both
   themes, because that is what the part on the desk looks like. */
.sim-lcd {
  margin: 0;
  padding: 8px 10px;
  border: 6px solid #1d3b24;
  border-radius: 6px;
  background: #9fd46a;
  color: #1a2d10;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  white-space: pre;
  overflow-x: auto;
}

.sim-rfid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sim-rfid input {
  flex: 1 1 8rem;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--xp-border, var(--line));
  border-radius: 8px;
  background: var(--xp-canvas, var(--surface));
  color: inherit;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-transform: uppercase;
}
.sim-rfid button[aria-pressed="true"] { border-color: var(--xp-success, #25b45b); }

.sim-remote { display: grid; grid-template-columns: repeat(3, 3rem); gap: 6px; justify-content: start; }
.sim-remote button svg { display: block; margin: auto; }
.sim-remote button {
  min-height: 2.2rem;
  border: 1px solid var(--xp-border, var(--line));
  border-radius: 999px;
  background: var(--xp-canvas, var(--surface));
  color: inherit;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.sim-remote button:hover { border-color: var(--xp-orange, #ff5a1f); }
.sim-remote-said { margin: 0; font-size: 0.8rem; color: var(--xp-muted, var(--muted)); }