/* ===== Simulator standalone styles ===== */
:root {
    --sim-bg:       #0d1117;
    --sim-surface:  #161b22;
    --sim-border:   #30363d;
    --sim-text:     #c9d1d9;
    --sim-muted:    #8b949e;
    --sim-accent:   #58a6ff;
    --sim-green:    #3fb950;
    --sim-yellow:   #d29922;
    --sim-red:      #f85149;
    --sim-purple:   #a371f7;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--sim-bg);
    color: var(--sim-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: .875rem;
    min-height: 100vh;
}

/* ===== Topbar — reuses welcome-nav, just needs sticky + justify ===== */
.sim-topbar-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.sim-live-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2em .7em;
    border-radius: 9999px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: rgba(63,185,80,.12);
    color: var(--sim-green);
    border: 1px solid rgba(63,185,80,.3);
    margin-left: auto;
}
.sim-live-dot {
    width: 7px; height: 7px;
    background: var(--sim-green);
    border-radius: 50%;
    animation: pulse 2s ease infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* ===== Use case selector ===== */
.sim-selector {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.5rem .75rem;
    border-bottom: 1px solid var(--sim-border);
    background: var(--sim-surface);
}
.sim-case-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .875rem;
    border-radius: .375rem;
    border: 1px solid var(--sim-border);
    background: transparent;
    color: var(--sim-muted);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s;
    white-space: nowrap;
}
.sim-case-btn:hover { color: var(--sim-text); border-color: #484f58; background: rgba(255,255,255,.04); }
.sim-case-btn.active {
    color: #fff;
    border-color: transparent;
    background: var(--case-color, var(--sim-accent));
}

/* ===== Main layout ===== */
.sim-main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

/* ===== Scenario header ===== */
.sim-scenario-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.sim-scenario-icon {
    width: 3rem; height: 3rem;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}
.sim-scenario-title { font-weight: 700; font-size: 1.125rem; color: #fff; margin: 0 0 .25rem; }
.sim-scenario-sub   { font-size: .8125rem; color: var(--sim-muted); margin: 0; }

/* ===== Device badges ===== */
.sim-device-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}
.sim-device-badge {
    display: inline-flex;
    flex-direction: column;
    gap: .1rem;
    padding: .3rem .625rem;
    background: color-mix(in srgb, var(--dev-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--dev-color) 35%, transparent);
    border-radius: .375rem;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    cursor: default;
}
a.sim-device-badge { cursor: pointer; }
a.sim-device-badge:hover {
    background: color-mix(in srgb, var(--dev-color) 18%, transparent);
    border-color: color-mix(in srgb, var(--dev-color) 60%, transparent);
}
.sim-device-arrow {
    font-size: .65rem;
    color: var(--sim-muted);
    flex-shrink: 0;
    user-select: none;
}
.sim-device-or {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sim-muted);
    padding: 0 .1rem;
}
.sim-device-plus {
    font-size: .8rem;
    font-weight: 700;
    color: var(--sim-muted);
    padding: 0 .05rem;
}
.sim-device-network {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--dev-color);
    line-height: 1;
}
.sim-device-name {
    font-size: .75rem;
    font-weight: 600;
    color: #c9d1d9;
    line-height: 1.2;
}
.sim-device-note {
    font-size: .62rem;
    color: var(--sim-muted);
    line-height: 1.2;
    font-style: italic;
}

.sim-scenario-desc  {
    background: var(--sim-surface);
    border: 1px solid var(--sim-border);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    font-size: .8125rem;
    color: var(--sim-muted);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ===== Alert strip ===== */
.sim-alert-strip {
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .8125rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity .4s;
}
.sim-alert-strip.visible { opacity: 1; }
.sim-alert-strip.warning { background: rgba(210,153,34,.12); border: 1px solid rgba(210,153,34,.35); color: var(--sim-yellow); }
.sim-alert-strip.danger  { background: rgba(248,81,73,.12);  border: 1px solid rgba(248,81,73,.35);  color: var(--sim-red); }
.sim-alert-strip.ok      { background: rgba(63,185,80,.1);   border: 1px solid rgba(63,185,80,.3);   color: var(--sim-green); }
.sim-alert-icon { font-size: 1rem; flex-shrink: 0; }

/* ===== Sensor grid ===== */
.sim-sensor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sim-sensor-card {
    background: var(--sim-surface);
    border: 1px solid var(--sim-border);
    border-radius: .5rem;
    padding: 1rem 1.125rem 0;
    transition: border-color .3s;
}
.sim-sensor-card.warn  { border-color: var(--sim-yellow); }
.sim-sensor-card.alert { border-color: var(--sim-red); }

.sim-sensor-id   { font-family: monospace; font-size: .7rem; color: var(--sim-muted); margin-bottom: .25rem; }
.sim-sensor-name { font-weight: 600; font-size: .8125rem; margin-bottom: .875rem; }

.sim-reading-row { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .875rem; }
.sim-reading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.sim-reading-label { font-size: .72rem; color: var(--sim-muted); }
.sim-reading-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: color .3s;
}
.sim-reading-unit { font-size: .75rem; color: var(--sim-muted); margin-left: .2rem; }
.sim-reading-trend {
    font-size: .75rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}
.trend-up   { color: var(--sim-accent); }
.trend-down { color: var(--sim-purple); }
.trend-flat { color: var(--sim-muted); }

.sim-reading-value.ok   { color: var(--sim-green); }
.sim-reading-value.warn { color: var(--sim-yellow); }
.sim-reading-value.alert{ color: var(--sim-red); }

/* ===== Sparkline ===== */
.sim-sparkline {
    width: 100%;
    height: 44px;
    display: block;
    margin: 0 -1.125rem;
    width: calc(100% + 2.25rem);
}
.sim-sparkline-line {
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.sim-sparkline-area { opacity: .15; }

/* ===== Status footer ===== */
.sim-footer-strip {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 1.125rem;
    border-top: 1px solid var(--sim-border);
    margin: 0 -1.125rem;
    font-size: .72rem;
    color: var(--sim-muted);
}
.sim-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--sim-green);
}
.sim-status-dot.warn  { background: var(--sim-yellow); animation: pulse 1.5s ease infinite; }
.sim-status-dot.alert { background: var(--sim-red);    animation: pulse .8s ease infinite; }

/* ===== Info panel ===== */
.sim-info-panel {
    background: var(--sim-surface);
    border: 1px solid var(--sim-border);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    font-size: .8rem;
    color: var(--sim-muted);
    line-height: 1.6;
    text-align: center;
}
.sim-info-panel strong { color: var(--sim-text); }

/* ===== Responsive ===== */
@media (max-width: 600px) {
    .sim-topbar    { padding: .5rem 1rem; }
    .sim-selector  { padding: .875rem 1rem .5rem; }
    .sim-main      { padding: 1rem; }
    .sim-case-btn  { font-size: .7rem; padding: .35rem .625rem; }
}