/* Placement simulator — pick where a build pretends to run, and against what.
   Tokens and the 3-6-9 spacing rule per css-guidelines.md; the modal shell is
   inherited from index.css. */

#simulatorModal .wb-modal-dialog {
  width: min(1020px, 96vw);
  max-height: 90vh;
}

.sim-section + .sim-section {
  margin-top: var(--space-18);
  padding-top: var(--space-18);
  border-top: 2px solid var(--blue-opacity-15);
}

.sim-section-title {
  font-size: var(--font-9);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-9);
}

.sim-hint {
  padding: var(--space-9) var(--space-12);
  font-size: var(--font-9);
  line-height: 1.6;
  color: var(--text-secondary);
  background: var(--blue-opacity-05);
  border-left: 3px solid var(--blue-opacity-40);
  border-radius: 0 var(--space-6) var(--space-6) 0;
}

.sim-hint.is-error {
  color: var(--warning-orange);
  border-left-color: var(--warning-orange);
}

.sim-hint code,
.sim-preview code {
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--cyan-bright);
}

/* --- placement cards --- */

.sim-placements {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(213px, 1fr));
  gap: var(--space-9);
}

.sim-placement {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-9) var(--space-12);
  text-align: left;
  cursor: pointer;
  background: var(--space-opacity-40);
  border: 2px solid var(--blue-opacity-20);
  border-radius: var(--space-9);
  transition: all var(--timing-fast) var(--easing-standard);
}

.sim-placement:hover {
  background: var(--blue-opacity-10);
  border-color: var(--blue-opacity-50);
}

.sim-placement.is-on {
  background: var(--blue-opacity-15);
  border-color: var(--blue-electric);
  box-shadow: 0 0 var(--space-12) var(--blue-opacity-30);
}

.sim-placement-name {
  font-size: var(--font-12);
  font-weight: 600;
  color: var(--text-primary);
}

.sim-placement-loc {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: var(--font-9);
  color: var(--cyan-bright);
  overflow-wrap: anywhere;
}

.sim-placement-note {
  font-size: var(--font-9);
  line-height: 1.5;
  color: var(--text-muted);
}

.sim-placement-ctx {
  margin-top: var(--space-3);
  font-size: var(--font-9);
  font-weight: 600;
  color: var(--green-ghost);
}

/* --- record picker --- */

.sim-record-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-9);
}

.sim-select,
.sim-search {
  padding: var(--space-6) var(--space-9);
  font-size: var(--font-9);
  color: var(--text-primary);
  background: var(--space-opacity-60);
  border: 2px solid var(--blue-opacity-30);
  border-radius: var(--space-6);
}

.sim-search {
  flex: 1;
  min-width: 120px;
}

.sim-select:focus,
.sim-search:focus {
  outline: none;
  border-color: var(--blue-electric);
}

.sim-records {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(234px, 1fr));
  gap: var(--space-6);
  max-height: 270px;
  overflow-y: auto;
  padding-right: var(--space-3);
}

.sim-record {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-9);
  padding: var(--space-6) var(--space-9);
  text-align: left;
  cursor: pointer;
  background: var(--space-opacity-40);
  border: 1px solid var(--blue-opacity-20);
  border-radius: var(--space-6);
  transition: all var(--timing-fast) var(--easing-standard);
}

.sim-record:hover {
  background: var(--blue-opacity-10);
  border-color: var(--blue-opacity-50);
}

.sim-record.is-on {
  background: var(--green-opacity-15);
  border-color: var(--green-ghost);
}

.sim-record-name {
  font-size: var(--font-9);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-record-id {
  flex: none;
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: var(--font-9);
  color: var(--text-muted);
}

/* --- footer: live payload preview --- */

.sim-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-9);
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 2px solid var(--blue-opacity-15);
}

.sim-preview {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-9);
  font-size: var(--font-9);
  background: var(--space-opacity-60);
  border-radius: var(--space-6);
  overflow-x: auto;
}

.sim-preview-label {
  flex: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sim-preview code {
  white-space: nowrap;
}

.sim-preview-empty {
  color: var(--text-muted);
}

.sim-positions {
  display: flex;
  gap: var(--space-3);
}

.sim-pos {
  padding: var(--space-3) var(--space-9);
  font-size: var(--font-9);
  color: var(--text-secondary);
  cursor: pointer;
  background: var(--blue-opacity-05);
  border: 1px solid var(--blue-opacity-20);
  border-radius: var(--space-12);
}

.sim-pos.is-on {
  color: var(--space-deep);
  background: var(--blue-electric);
  border-color: var(--blue-electric);
  font-weight: 600;
}

/* --- toolbar badge for the active simulation --- */

.sim-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-9);
  font-size: var(--font-9);
  font-weight: 600;
  color: var(--space-deep);
  white-space: nowrap;
  background: var(--green-ghost);
  border-radius: var(--space-12);
}

@media (width <= 768px) {
  .sim-placements,
  .sim-records {
    grid-template-columns: minmax(0, 1fr);
  }
}