/* External-party simulator console — dense, test-engineer layout on top of the shared kit tokens. */
.sim-page { display: flex; flex-direction: column; gap: 14px; }
.sim-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.sim-toolbar .mc-field { margin-bottom: 0; min-width: 140px; flex: 1 1 140px; max-width: 260px; }
.sim-toolbar .mc-field.narrow { min-width: 110px; flex: 0 1 130px; }
.sim-toolbar .mc-field.wide { flex: 2 1 260px; max-width: 460px; }
.sim-toolbar .grow { flex: 1 1 auto; }
.sim-toolbar .mc-btn { align-self: flex-end; }

/* Stat tiles */
.sim-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.sim-stat { display: block; padding: 12px 14px; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius); color: inherit; box-shadow: var(--mc-shadow); }
.sim-stat:hover { text-decoration: none; border-color: var(--mc-primary); }
.sim-stat .v { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sim-stat .v.sm { font-size: 1.05rem; }
.sim-stat .l { font-size: .74rem; color: var(--mc-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.sim-stat.hot .v { color: var(--mc-warn); }
.sim-stat.zero .v { color: var(--mc-faint); }

/* Settings editor */
.sim-settings { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.sim-service { padding: 10px 12px; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm); background: var(--mc-surface-2); display: flex; flex-direction: column; gap: 6px; }
.sim-service h3 { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; margin: 0; }
.sim-service .mc-field { margin: 0; }
.sim-service .mc-field label { font-size: .76rem; }
.sim-service .mc-input { padding: 6px 8px; font-size: .9rem; }
.sim-service .mc-check { font-size: .86rem; }
.sim-service.down { border-color: var(--mc-danger); }

/* Dense tables and cells */
.mc-table.dense th, .mc-table.dense td { padding: 6px 9px; font-size: .86rem; }
.sim-mono { font-family: var(--mc-mono); font-size: .84em; white-space: nowrap; }
.sim-mono.wrap { white-space: normal; word-break: break-all; }
.sim-when { white-space: nowrap; }
.sim-cell-sub { display: block; font-size: .78rem; color: var(--mc-muted); }
.sim-actions { display: flex; gap: 4px; flex-wrap: nowrap; }
.sim-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.sim-clip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-wrap { white-space: normal; max-width: 360px; }

/* JSON / detail */
.sim-json { max-height: 60vh; font-size: .8rem; }
.sim-json.inline { max-height: 320px; }
.sim-result-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 8px; }
.sim-highlight { font-family: var(--mc-mono); font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; padding: 6px 12px; border-radius: var(--mc-radius-sm); background: var(--mc-primary-soft); color: var(--mc-primary-text); display: inline-block; }
.sim-frame { width: 100%; height: 360px; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm); background: #fff; }
.sim-body-pre { white-space: pre-wrap; font-family: var(--mc-font); font-size: .9rem; background: var(--mc-surface-2); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm); padding: 10px; max-height: 320px; overflow: auto; }

/* Patient picker */
.sim-picker { position: relative; }
.sim-picker-results { list-style: none; margin: 4px 0 0; padding: 4px; border: 1px solid var(--mc-border-strong); border-radius: var(--mc-radius-sm); background: var(--mc-surface); box-shadow: var(--mc-shadow); max-height: 240px; overflow: auto; position: absolute; left: 0; right: 0; z-index: 10; }
.sim-picker-results li button { width: 100%; text-align: left; background: none; border: 0; padding: 7px 9px; font: inherit; color: var(--mc-text); cursor: pointer; border-radius: 4px; display: flex; justify-content: space-between; gap: 8px; }
.sim-picker-results li button:hover, .sim-picker-results li button:focus-visible { background: var(--mc-primary-soft); }
.sim-picked { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px; border-left: 4px solid var(--mc-primary); background: var(--mc-surface); border-radius: var(--mc-radius-sm); border-top: 1px solid var(--mc-border); border-right: 1px solid var(--mc-border); border-bottom: 1px solid var(--mc-border); }
.sim-picked .name { font-weight: 700; }

/* Two-column work areas */
.sim-cols { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; }
.sim-cols > * { min-width: 0; }
@media (max-width: 960px) { .sim-cols { grid-template-columns: 1fr; } }

.sim-reasons { margin: 4px 0 0; padding-left: 18px; font-size: .88rem; }
.sim-muted-small { font-size: .8rem; color: var(--mc-muted); }
.sim-kbd { font-family: var(--mc-mono); font-size: .8rem; background: var(--mc-surface-2); border: 1px solid var(--mc-border); border-radius: 4px; padding: 1px 5px; }
.sim-header-tools { display: flex; gap: 6px; align-items: center; }

@media (max-width: 720px) {
  .sim-stat .v { font-size: 1.35rem; }
  .sim-toolbar .mc-field { max-width: none; }
  .sim-clip { max-width: 180px; }
  .sim-frame { height: 260px; }
}

/* Kit workaround: on narrow screens the kit's nav rule (order 3, width 100%) expects the header to wrap, but
   .mc-header-inner is nowrap, so eleven nav items push off-screen. Scoped to this app only. */
@media (max-width: 720px) {
  .mc-shell[data-app="sim"] .mc-header-inner { flex-wrap: wrap; }
  .mc-shell[data-app="sim"] .mc-brand span:not(.mc-logo):not(.mc-app-tag) { display: none; }
  .mc-shell[data-app="sim"] [data-testid="current-user"] { display: none; }
  .mc-shell[data-app="sim"] .mc-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; padding-bottom: 2px; }
  .mc-shell[data-app="sim"] .mc-nav a { padding: 6px 9px; }
  .mc-shell[data-app="sim"] .mc-page-title h1 { font-size: 1.25rem; }
}

/* Kit workaround: dark-mode toasts use white text on the pale --mc-ok / --mc-danger / --mc-warn tints. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mc-toast.ok, :root:not([data-theme="light"]) .mc-toast.danger, :root:not([data-theme="light"]) .mc-toast.warn { color: #0b1220; } }
:root[data-theme="dark"] .mc-toast.ok, :root[data-theme="dark"] .mc-toast.danger, :root[data-theme="dark"] .mc-toast.warn { color: #0b1220; }