/* /Components/Layout/LicenseLayout.razor.rz.scp.css */
/* Bare activation-gate layout (RIQSIM-439, re-themed RIQSIM-723). Centers the gate card on the
   page ground; colors read --c-* tokens so light/dark both work via the global [data-theme] block. */
.license-layout[b-sbbbffayen] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6, 24px);
    background-color: var(--c-app);
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* LoginLayout.razor.css (RIQSIM-459, re-themed RIQSIM-723) — full-screen page ground for the
   sign-in screen. Reads var(--c-*) only; --c-app flips with the theme. */
.login-layout[b-f8k6rapi2z] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--c-app);
    padding: 24px;
    box-sizing: border-box;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css — scoped layout shell styles. */

.layout-shell[b-d6av1u3w7g] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* RIQSIM-718/-729: two fixed bands at the viewport bottom — CommandBar (60px) sitting on
       top of the sticky footer (32px). Shell padding clears both so page content is never
       hidden underneath. Keep in sync with .riq-footer height and CommandBar.razor.css bottom. */
    padding-bottom: 92px;
}

.riq-main[b-d6av1u3w7g] {
    flex: 1;
    padding: 1.5rem;
    background: var(--riq-bg-tint);
}

.riq-footer[b-d6av1u3w7g] {
    /* Sticky footer pinned to the very bottom edge, BELOW the CommandBar (which sits at
       bottom: 32px in CommandBar.razor.css — the two values are coupled). */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--riq-deep-navy);
    color: var(--riq-light-text);
    font-size: 0.78rem;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
}

#blazor-error-ui[b-d6av1u3w7g] {
    background: var(--riq-warning-soft);
    color: var(--riq-warning-strong);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss[b-d6av1u3w7g] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/TopBar.razor.rz.scp.css */
/* TopBar.razor.css — scoped styles for the navy top-bar shell.
   NavLink/AuthorizeView render their own elements — ::deep required to reach through the
   component boundary (matches the existing NavMenu.razor.css convention). */

.topbar[b-gzyssoovq5] {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 22px;
    height: 56px;
    background: var(--c-navy);
    position: sticky;
    top: 0;
    z-index: 40;
}

.topbar-brand[b-gzyssoovq5] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-right: 24px;
    border-right: 1px solid color-mix(in srgb, var(--c-oninv) 14%, transparent);
}

.topbar-brand-logo[b-gzyssoovq5] {
    width: 28px;
    height: 28px;
    display: block;
}

.topbar-brand-title[b-gzyssoovq5] {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--c-oninv);
    line-height: 1.1;
}

.topbar-brand-subtitle[b-gzyssoovq5] {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--c-oninv) 45%, transparent);
    line-height: 1.3;
}

.topbar-tabs[b-gzyssoovq5] {
    display: flex;
    gap: 4px;
}

[b-gzyssoovq5] .topbar-tab {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: color-mix(in srgb, var(--c-oninv) 70%, transparent);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

[b-gzyssoovq5] .topbar-tab:hover {
    color: var(--c-oninv);
    text-decoration: none;
}

[b-gzyssoovq5] .topbar-tab.active {
    background: var(--c-navy-hover);
    color: var(--c-oninv);
}

.topbar-spacer[b-gzyssoovq5] {
    flex: 1;
}

.topbar-controls[b-gzyssoovq5] {
    display: flex;
    align-items: center;
    gap: 22px;
}

.topbar-avatar-wrap[b-gzyssoovq5] {
    position: relative;
    outline: none;
}

.topbar-avatar[b-gzyssoovq5] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-oninv) 12%, transparent);
    border: none;
    display: grid;
    place-items: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    color: var(--c-oninv);
    cursor: pointer;
}

/* Invisible full-viewport dismissal layer, under the menu (49) and above the page. Replaces a
   tabindex + @onfocusout wrapper whose bubbling focusout removed menu items before their own click
   landed — see the comment in TopBar.razor. `position: fixed` is viewport-relative here: the topbar
   is `position: sticky` with no transform/filter, so it does not become a containing block. */
.topbar-avatar-backdrop[b-gzyssoovq5] {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: transparent;
}

.topbar-avatar-menu[b-gzyssoovq5] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 160px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    padding: 6px;
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.topbar-avatar-menu-user[b-gzyssoovq5] {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-fg3);
    padding: 6px 10px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-avatar-menu form[b-gzyssoovq5] {
    margin: 0;
}

.topbar-avatar-menu-item[b-gzyssoovq5] {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    font: inherit;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-fg2);
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}

.topbar-avatar-menu-item:hover[b-gzyssoovq5] {
    background: var(--c-hover);
    color: var(--c-fg1);
    text-decoration: none;
}

.topbar-avatar-menu-item--danger[b-gzyssoovq5] {
    color: var(--c-danger);
}
/* /Components/Pages/Fleet.razor.rz.scp.css */
/* Fleet.razor.css — RIQSIM-724 Fleet screen: KPI strip + 6-col device table.
   docs/work_item_runs/RIQSIM-717/exploration-2.md §FLEET screen — all colors/spacing/typography
   are lifted 1:1 from design-simulator-console.dc.html:129-292 onto the --c-* tokens already
   declared in wwwroot/app.css (RIQSIM-716). No raw hex, no --riq-* — --c-* only. */

.fleet-page[b-esc9xraifs] {
    max-width: 1560px;
    margin: 0 auto;
    padding: 28px 22px 110px;
}

/* ── Page chrome ─────────────────────────────────────────────────────────── */

.fleet-header[b-esc9xraifs] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.fleet-eyebrow[b-esc9xraifs] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg3);
    margin-bottom: 6px;
}

.fleet-title[b-esc9xraifs] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    color: var(--c-fg1);
    margin: 0;
}

.fleet-header-actions[b-esc9xraifs] {
    display: flex;
    gap: 10px;
}

.fleet-btn[b-esc9xraifs] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-standard);
}

.fleet-btn-outline[b-esc9xraifs] {
    background: var(--c-card);
    color: var(--c-teal);
    border: 1px solid var(--c-teal-strong);
}

.fleet-btn-outline:hover[b-esc9xraifs] {
    background: var(--c-teal-50);
}

.fleet-btn-primary[b-esc9xraifs] {
    background: var(--c-primary);
    color: var(--c-oninv);
    border: 1px solid var(--c-primary-border);
    box-shadow: var(--shadow-1);
}

.fleet-btn-primary:hover[b-esc9xraifs] {
    background: var(--c-primary-hover);
}

.fleet-btn:disabled[b-esc9xraifs] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* RIQ-4012: brief banner for a failed stop/start; auto-clears (see Fleet.razor.cs). */
.fleet-action-error[b-esc9xraifs] {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-danger-deep);
    background: var(--c-danger-50);
    border: 1px solid var(--c-danger-200);
    border-radius: 6px;
    padding: 9px 14px;
    margin-bottom: 16px;
}

/* ── KPI strip — exactly 5 KPIs ─────────────────────────────────────────── */

.fleet-kpi-strip[b-esc9xraifs] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    margin-bottom: 20px;
}

.fleet-kpi-cell[b-esc9xraifs] {
    padding: 16px 20px;
    border-right: 1px solid var(--c-border);
}

.fleet-kpi-cell:last-child[b-esc9xraifs] {
    border-right: none;
}

.fleet-kpi-value[b-esc9xraifs] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.1;
    color: var(--c-fg1);
}

.fleet-kpi-value.fleet-kpi-danger[b-esc9xraifs] {
    color: var(--c-danger);
}

.fleet-kpi-label[b-esc9xraifs] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg3);
    margin-top: 6px;
}

/* ── Device table ────────────────────────────────────────────────────────── */

.fleet-table[b-esc9xraifs] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.fleet-table-header[b-esc9xraifs],
.fleet-row[b-esc9xraifs] {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 1.35fr 1fr 1fr 0.85fr;
    gap: 16px;
    align-items: center;
}

.fleet-table-header[b-esc9xraifs] {
    padding: 11px 20px;
    background: var(--c-sunken);
    border-bottom: 1px solid var(--c-border);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg3);
}

.fleet-col-link[b-esc9xraifs] {
    text-align: right;
}

.fleet-row[b-esc9xraifs] {
    padding: 15px 20px;
    border-bottom: 1px solid var(--c-border);
    cursor: pointer;
    border-left: 3px solid var(--c-border);
    transition: background var(--dur-base) var(--ease-standard);
}

.fleet-row:hover[b-esc9xraifs] {
    background: var(--c-hover);
}

.fleet-row-active[b-esc9xraifs] {
    border-left-color: var(--c-amber);
}

.fleet-row-idle[b-esc9xraifs],
.fleet-row-booting[b-esc9xraifs] {
    border-left-color: var(--c-border);
}

/* RIQ-4012: a stopped (offline) machine — muted, and dimmed so it reads as "not participating". */
.fleet-row-stopped[b-esc9xraifs] {
    border-left-color: var(--c-border-strong);
    background: var(--c-sunken);
}

.fleet-row-stopped .fleet-col-sensors[b-esc9xraifs],
.fleet-row-stopped .fleet-col-bar[b-esc9xraifs] {
    opacity: 0.6;
}

.fleet-row-fault[b-esc9xraifs] {
    border-left-color: var(--c-danger);
    background: var(--c-danger-50);
}

.fleet-row-fault:hover[b-esc9xraifs] {
    background: var(--c-danger-100);
}

/* Col 1 — Device */

.fleet-device-name[b-esc9xraifs] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--c-fg1);
}

.fleet-device-sub[b-esc9xraifs] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
    margin-top: 2px;
}

/* Col 2 — State badge */

.fleet-state-badge[b-esc9xraifs] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 4px;
}

.fleet-badge-active[b-esc9xraifs] {
    background: var(--c-amber-50);
    border: 1px solid var(--c-amber-200);
    color: var(--c-amber-deep);
}

.fleet-badge-error[b-esc9xraifs] {
    background: var(--c-danger-100);
    border: 1px solid var(--c-danger-200);
    color: var(--c-danger-deep);
}

.fleet-badge-idle[b-esc9xraifs] {
    background: var(--c-teal-50);
    border: 1px solid var(--c-teal-200);
    color: var(--c-teal-deep);
}

.fleet-badge-booting[b-esc9xraifs] {
    background: var(--c-sunken);
    border: 1px solid var(--c-border-strong);
    color: var(--c-fg2);
}

.fleet-badge-stopped[b-esc9xraifs] {
    background: var(--c-card);
    border: 1px dashed var(--c-border-strong);
    color: var(--c-fg3);
}

/* Col 3 — Sensors */

.fleet-lamp-row[b-esc9xraifs] {
    display: flex;
    gap: 5px;
    align-items: center;
}

.fleet-lamp[b-esc9xraifs] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.fleet-lamp-off[b-esc9xraifs] {
    background: var(--c-card);
    border: 1px solid var(--c-border-strong);
}

.fleet-lamp-dormant[b-esc9xraifs] {
    background: transparent;
    border: 1px dashed var(--c-border-strong);
}

.fleet-lamp-ok[b-esc9xraifs] {
    background: var(--c-teal-strong);
    animation: llLamp 2.4s var(--ease-standard) infinite;
}

.fleet-lamp-warn[b-esc9xraifs] {
    background: var(--c-amber);
    animation: llLampWarn 1.1s var(--ease-standard) infinite;
}

.fleet-sensor-caption[b-esc9xraifs] {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
    margin-top: 4px;
}

.fleet-sensor-caption-dim[b-esc9xraifs] {
    color: var(--c-fg4);
}

.fleet-event-error[b-esc9xraifs] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 2px 8px 2px 6px;
    background: var(--c-danger-100);
    border: 1px solid var(--c-danger-200);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-danger-deep);
}

.fleet-event-error-dot[b-esc9xraifs] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--c-danger);
    animation: llLampErr 1.1s var(--ease-standard) infinite;
}

/* Col 4/5 — Notes held / Coin held */

.fleet-bar-track[b-esc9xraifs] {
    height: 5px;
    background: var(--c-sunken);
    border-radius: 999px;
    overflow: hidden;
}

.fleet-bar-fill[b-esc9xraifs] {
    height: 100%;
}

.fleet-fill-success[b-esc9xraifs] {
    background: var(--c-green);
}

.fleet-fill-warning[b-esc9xraifs] {
    background: var(--c-amber);
}

/* RIQ-2253: Fleet's fill bars previously had no danger tier — the aggregate percentage-only model
   this ticket replaces never produced one. Worst-of severity (StorageFillPresentation.WorstOf) can
   now report Danger, so the bar needs somewhere to render it. */
.fleet-fill-danger[b-esc9xraifs] {
    background: var(--c-danger);
}

.fleet-bar-caption[b-esc9xraifs] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg2);
    margin-top: 5px;
}

/* Col 6 — Link */

.fleet-link-state[b-esc9xraifs] {
    font-family: var(--font-body);
    font-size: 13px;
}

/* Status + toggle share one line so the Link cell keeps its pre-RIQ-4012 height. */
.fleet-link-line[b-esc9xraifs] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.fleet-link-toggle[b-esc9xraifs] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    padding: 1px 8px;
    border-radius: 4px;
    cursor: pointer;
    background: var(--c-card);
    color: var(--c-fg2);
    border: 1px solid var(--c-border-strong);
}

.fleet-link-toggle:hover:not(:disabled)[b-esc9xraifs] {
    background: var(--c-hover);
}

.fleet-link-toggle:disabled[b-esc9xraifs] {
    opacity: 0.55;
    cursor: not-allowed;
}

.fleet-link-port[b-esc9xraifs] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg4);
}

.fleet-link-devicelink[b-esc9xraifs] {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-top: 5px;
    color: var(--c-teal);
}

/* ── Footnote / legend ───────────────────────────────────────────────────── */

.fleet-legend[b-esc9xraifs] {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-fg3);
    margin-top: 14px;
}
/* /Components/Pages/License.razor.rz.scp.css */
/* License activation gate (RIQSIM-439, re-themed RIQSIM-723). Operator-grade, flat surface; all
   colors via --c-* tokens so the global [data-theme="dark"] block handles dark mode. Spacing uses
   --space-* with px fallbacks (this repo defines severity/surface tokens, not a spacing scale). */

.license-gate[b-6i660fkk3h] {
    width: 100%;
    max-width: 560px;
}

.license-gate__card[b-6i660fkk3h] {
    background-color: var(--c-card);
    border: 1px solid var(--c-border-strong);
    border-radius: 10px;
    padding: var(--space-8, 32px);
    box-shadow: 0 4px 16px rgba(15, 8, 75, 0.12);
}

.license-gate__title[b-6i660fkk3h] {
    margin: 0 0 12px;
    color: var(--c-fg1);
    font-size: 1.5rem;
    font-weight: 600;
}

.license-gate__intro[b-6i660fkk3h] {
    margin: 0 0 24px;
    color: var(--c-fg2);
    line-height: 1.45;
}

.license-gate__field[b-6i660fkk3h] {
    margin-bottom: 20px;
}

.license-gate__label[b-6i660fkk3h] {
    display: block;
    margin-bottom: 8px;
    color: var(--c-fg3);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.license-gate__code-row[b-6i660fkk3h] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.license-gate__code[b-6i660fkk3h] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 10px 12px;
    background-color: var(--c-sunken);
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    color: var(--c-fg2);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.license-gate__support[b-6i660fkk3h] {
    margin: 8px 0 0;
    color: var(--c-fg3);
    font-size: 0.875rem;
}

.license-gate__support a[b-6i660fkk3h] {
    color: var(--c-teal);
}

/* RIQSIM-716 QA fix — ::deep is REQUIRED here and its absence is why this rule was dead.
   .license-gate__paste is applied to a <RadzenTextArea>, and Blazor CSS isolation only stamps the
   scope attribute on elements written in THIS component's own markup — never on a child
   component's rendered output. So the rule compiled to `.license-gate__paste[b-xxxxx]`, matched
   nothing, and the textarea fell back to the browser default (measured 171px inside a 494px
   field). The width:100% below was always present and always inert; adding ::deep is the actual
   fix, and it revives the monospace family with it. Same reach-through pattern as
   TopBar.razor.css's ::deep .topbar-tab (NavLink). The parent .license-gate__field IS in this
   component's markup, so it carries the scope and anchors the descendant match. */
.license-gate__field[b-6i660fkk3h]  .license-gate__paste {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.8125rem;
}

.license-gate__warn[b-6i660fkk3h] {
    margin: 0;
    color: var(--c-amber-deep);
    background-color: var(--c-amber-50);
    border: 1px solid var(--c-amber);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.875rem;
}

.license-gate__error[b-6i660fkk3h] {
    margin: 0 0 16px;
    color: var(--c-danger-deep);
    background-color: var(--c-danger-50);
    border: 1px solid var(--c-danger);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.875rem;
}

.license-gate__actions[b-6i660fkk3h] {
    display: flex;
    justify-content: flex-end;
}
/* /Components/Pages/Live.razor.rz.scp.css */
/* Live.razor.css — RIQSIM-725 Live screen: device strip, fault bar, state hero (dwell + chips +
   host-link card), 7-tile sensor rail, main/rail placeholder row.
   docs/work_item_runs/RIQSIM-717/exploration-2.md §LIVE screen — colors/spacing/typography lifted
   1:1 from design-simulator-console.dc.html:294-464 onto the --c-* tokens declared in
   wwwroot/app.css (RIQSIM-716). No raw hex, no --riq-* — --c-* only. */

.live-page[b-p3xiqy4a52] {
    max-width: 1560px;
    margin: 0 auto;
    padding: 22px 22px 110px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Device strip ────────────────────────────────────────────────────────── */

.live-device-strip[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* RIQSIM-763: the pill is now the picker's trigger button. `position: relative` lives on the
   wrapper so the menu anchors to the pill; `outline: none` matches TopBar's avatar wrap, which is
   focusable only so @onfocusout can close the menu — it is not a keyboard stop of its own. */
.live-device-wrap[b-p3xiqy4a52] {
    position: relative;
    outline: none;
}

.live-device-pill[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    box-shadow: var(--shadow-1);
    font: inherit;
    cursor: pointer;
}

.live-device-pill:hover[b-p3xiqy4a52] {
    border-color: var(--c-border-strong);
}

/* Invisible full-viewport dismissal layer. Sits UNDER the menu (z-index 49 vs 50) and OVER
   everything else, so a click outside the menu closes it while a click on a menu item still
   reaches the item. Replaces a tabindex + @onfocusout wrapper, which was silently unclickable —
   see the comment in Live.razor. */
.live-device-backdrop[b-p3xiqy4a52] {
    position: fixed;
    inset: 0;
    z-index: 49;
    background: transparent;
}

.live-device-menu[b-p3xiqy4a52] {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    min-width: 100%;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    box-shadow: var(--shadow-3);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 50;
    white-space: nowrap;
}

.live-device-menu-item[b-p3xiqy4a52] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    font: inherit;
    padding: 8px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.live-device-menu-item:hover[b-p3xiqy4a52] {
    background: var(--c-sunken);
}

.live-device-menu-item--active[b-p3xiqy4a52] {
    background: var(--c-sunken);
}

.live-device-menu-name[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--c-fg1);
}

.live-device-menu-port[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
    margin-left: auto;
}

.live-device-name[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    color: var(--c-fg1);
}

.live-device-port[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
}

.live-device-caret[b-p3xiqy4a52] {
    font-size: 9px;
    color: var(--c-fg4);
}

.live-plugin-caption[b-p3xiqy4a52],
.live-sensor-header-caption[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
}

.live-strip-spacer[b-p3xiqy4a52] {
    flex: 1;
}

.live-view-toggle[b-p3xiqy4a52] {
    display: flex;
    gap: 0;
    background: var(--c-sunken);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 3px;
}

/* RIQSIM-735: the tabs are a real in-page view switch now, so they take a pointer cursor and a
   hover affordance. .live-view-tab-pending keeps the pre-735 inert styling for "State map", which
   has no view to switch to until RIQSIM-736. */
.live-view-tab[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--c-fg3);
    cursor: pointer;
    user-select: none;
}

.live-view-tab:hover[b-p3xiqy4a52] {
    color: var(--c-fg1);
}

.live-view-tab-active[b-p3xiqy4a52] {
    background: var(--c-card);
    color: var(--c-fg1);
    box-shadow: var(--shadow-1);
}

.live-view-tab-pending[b-p3xiqy4a52] {
    color: var(--c-fg4);
    cursor: default;
}

.live-view-tab-pending:hover[b-p3xiqy4a52] {
    color: var(--c-fg4);
}

/* RIQSIM-718/-732: the one remaining entry point to the trimmed MachineDetail (storage
   config) page — small and unobtrusive, matching .live-plugin-caption's register. */
.live-configure-storage-link[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
    text-decoration: none;
    white-space: nowrap;
}

.live-configure-storage-link:hover[b-p3xiqy4a52] {
    color: var(--c-teal);
    text-decoration: underline;
}

/* RIQ-4012: Stop/Start sits beside the picker and the Link status light. */
.live-strip-toggle[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    background: var(--c-card);
    color: var(--c-fg2);
    border: 1px solid var(--c-border-strong);
    transition: background var(--dur-base) var(--ease-standard);
}

.live-strip-toggle:hover:not(:disabled)[b-p3xiqy4a52] {
    background: var(--c-hover);
}

.live-strip-toggle:disabled[b-p3xiqy4a52] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Hero link light: larger than the strip/Fleet ones, and the status text carries the colour's meaning. */
.live-hero-link[b-p3xiqy4a52] {
    --link-light-size: 12px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 6px;
    background: var(--c-sunken);
    border: 1px solid var(--c-border-strong);
    color: var(--c-fg1);
}

.live-strip-error[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-danger-deep);
}

/* ── Fault bar ───────────────────────────────────────────────────────────── */

.live-fault-bar[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-radius: 6px;
}

.live-fault-bar.live-fault-fatal[b-p3xiqy4a52] {
    border: 1px solid var(--c-danger-200);
    background: var(--c-danger-50);
}

.live-fault-bar.live-fault-recoverable[b-p3xiqy4a52] {
    border: 1px solid var(--c-amber-200);
    background: var(--c-amber-50);
}

.live-fault-dot[b-p3xiqy4a52] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: none;
    animation: llLampErr 1.1s var(--ease-standard) infinite;
}

.live-fault-dot.live-fault-fatal[b-p3xiqy4a52] {
    background: var(--c-danger);
}

.live-fault-dot.live-fault-recoverable[b-p3xiqy4a52] {
    background: var(--c-amber);
}

.live-fault-headline[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.live-fault-headline.live-fault-fatal[b-p3xiqy4a52] {
    color: var(--c-danger-deep);
}

.live-fault-headline.live-fault-recoverable[b-p3xiqy4a52] {
    color: var(--c-amber-deep);
}

.live-fault-body[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--c-fg2);
    flex: 1;
}

.live-fault-btn[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease-standard);
}

.live-fault-btn-outline[b-p3xiqy4a52] {
    background: var(--c-card);
    border: 1px solid var(--c-border-strong);
    color: var(--c-fg2);
}

.live-fault-btn-outline:hover[b-p3xiqy4a52] {
    background: var(--c-hover);
}

.live-fault-btn-primary[b-p3xiqy4a52] {
    background: var(--c-primary);
    color: var(--c-oninv);
    border: 1px solid var(--c-primary-border);
}

.live-fault-btn-primary:hover[b-p3xiqy4a52] {
    background: var(--c-primary-hover);
}

/* RIQSIM-739: the shared "all conditions clear, send ERRORCLEAR" row rendered once below the
   per-code rows, once every latched fault has been individually marked physically clear. Reuses
   the same green success tokens as .live-banner-success rather than inventing a new palette
   entry. */
.live-fault-bar-clear-all[b-p3xiqy4a52] {
    border: 1px solid var(--c-green-200);
    background: var(--c-green-50);
}

/* ── State hero ──────────────────────────────────────────────────────────── */

.live-hero-grid[b-p3xiqy4a52] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
}

.live-hero-card[b-p3xiqy4a52] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    padding: 20px 24px;
}

.live-hero-card.live-hero-amber[b-p3xiqy4a52] {
    border-left: 4px solid var(--c-amber);
}

.live-hero-card.live-hero-danger[b-p3xiqy4a52] {
    border-left: 4px solid var(--c-danger);
}

.live-hero-card.live-hero-neutral[b-p3xiqy4a52] {
    border-left: 4px solid var(--c-border-strong);
}

.live-hero-header[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.live-hero-eyebrow[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg3);
}

.live-hero-dwell[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
}

.live-hero-state-row[b-p3xiqy4a52] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}

.live-hero-state-name[b-p3xiqy4a52] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--c-fg1);
}

.live-hero-state-qualified[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-fg3);
}

.live-hero-narrative[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--c-fg2);
    margin-top: 12px;
}

.live-hero-progress-track[b-p3xiqy4a52] {
    height: 6px;
    background: var(--c-sunken);
    border-radius: 999px;
    margin-top: 16px;
    overflow: hidden;
}

.live-hero-progress-fill[b-p3xiqy4a52] {
    width: 100%;
    height: 100%;
}

.live-hero-progress-fill.live-hero-amber[b-p3xiqy4a52] {
    background: var(--c-amber);
}

.live-hero-progress-fill.live-hero-danger[b-p3xiqy4a52] {
    background: var(--c-danger);
}

.live-hero-progress-fill.live-hero-neutral[b-p3xiqy4a52] {
    background: var(--c-border-strong);
}

.live-chip-row[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.live-chip[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 4px;
}

.live-chip-past[b-p3xiqy4a52] {
    color: var(--c-fg4);
    border: 1px solid var(--c-border);
}

.live-chip-recent[b-p3xiqy4a52] {
    color: var(--c-fg3);
    border: 1px solid var(--c-border-strong);
}

.live-chip-current[b-p3xiqy4a52] {
    font-weight: 600;
    color: var(--c-amber-deep);
    border: 1px solid var(--c-amber-200);
    background: var(--c-amber-50);
}

.live-chip-arrow[b-p3xiqy4a52] {
    color: var(--c-fg4);
    font-size: 12px;
}

/* ── Host-link card ──────────────────────────────────────────────────────── */

.live-hostlink-card[b-p3xiqy4a52] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
}

.live-hostlink-header[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.live-hostlink-status[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
}

/* RIQ-4012: LinkStatusLight inherits its font; this gives the strip's light the same register as
   the plugin caption beside it. */
.live-strip-link[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 500;
}

.live-hostlink-kv[b-p3xiqy4a52] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 18px;
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.live-hostlink-key[b-p3xiqy4a52] {
    color: var(--c-fg4);
}

.live-hostlink-value[b-p3xiqy4a52] {
    color: var(--c-fg2);
}

.live-hostlink-divider[b-p3xiqy4a52] {
    height: 1px;
    background: var(--c-sunken);
}

/* RIQSIM-734: ring-cap notice — mirrors .live-chip-current's amber "make absence visible" register
   (some wire history was evicted, not silently truncated). */
.live-hostlink-capped-badge[b-p3xiqy4a52] {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--c-amber-deep);
    border: 1px solid var(--c-amber-200);
    background: var(--c-amber-50);
}

.live-hostlink-packets[b-p3xiqy4a52] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.live-hostlink-packets-empty[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg4);
}

.live-packet-row[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.live-packet-dir[b-p3xiqy4a52] {
    font-weight: 600;
    width: 34px;
}

.live-packet-dir-in[b-p3xiqy4a52] {
    color: var(--c-blue);
}

.live-packet-dir-out[b-p3xiqy4a52] {
    color: var(--c-teal-deep);
}

.live-packet-text[b-p3xiqy4a52] {
    color: var(--c-fg2);
}

.live-packet-spacer[b-p3xiqy4a52] {
    flex: 1;
}

.live-packet-age[b-p3xiqy4a52] {
    color: var(--c-fg4);
}

.live-hostlink-spacer[b-p3xiqy4a52] {
    flex: 1;
}

.live-banner[b-p3xiqy4a52] {
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 12.5px;
}

.live-banner-success[b-p3xiqy4a52] {
    background: var(--c-green-50);
    border: 1px solid var(--c-green-200);
    color: var(--c-green);
}

.live-banner-error[b-p3xiqy4a52] {
    background: var(--c-danger-50);
    border: 1px solid var(--c-danger-200);
}

.live-banner-title[b-p3xiqy4a52] {
    font-weight: 600;
    color: var(--c-danger-deep);
    margin-bottom: 3px;
}

.live-banner-body[b-p3xiqy4a52] {
    color: var(--c-fg2);
}

/* ── Sensor rail ─────────────────────────────────────────────────────────── */

.live-sensor-rail[b-p3xiqy4a52] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.live-sensor-header[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    background: var(--c-sunken);
    border-bottom: 1px solid var(--c-border);
}

.live-sensor-header-title[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg1);
}

.live-sensor-grid[b-p3xiqy4a52] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.live-sensor-tile[b-p3xiqy4a52] {
    padding: 14px 18px;
    border-right: 1px solid var(--c-border);
}

.live-sensor-tile:last-child[b-p3xiqy4a52] {
    border-right: none;
}

.live-sensor-tile-teal[b-p3xiqy4a52] {
    background: var(--c-teal-50);
}

.live-sensor-tile-amber[b-p3xiqy4a52] {
    background: var(--c-amber-50);
}

.live-sensor-tile-dormant[b-p3xiqy4a52] {
    background: var(--c-app);
}

.live-sensor-tile-head[b-p3xiqy4a52] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 8px;
}

.live-sensor-lamp[b-p3xiqy4a52] {
    width: 11px;
    height: 11px;
    border-radius: 999px;
}

.live-sensor-lamp-off[b-p3xiqy4a52] {
    background: var(--c-card);
    border: 1px solid var(--c-border-strong);
}

.live-sensor-lamp-dormant[b-p3xiqy4a52] {
    background: var(--c-card);
    border: 1px dashed var(--c-border-strong);
}

.live-sensor-lamp-ok[b-p3xiqy4a52] {
    background: var(--c-teal-strong);
    animation: llLamp 2.4s var(--ease-standard) infinite;
}

.live-sensor-lamp-warn[b-p3xiqy4a52] {
    background: var(--c-amber);
    animation: llLampWarn 1.1s var(--ease-standard) infinite;
}

.live-sensor-lamp-blue[b-p3xiqy4a52] {
    background: var(--c-blue);
}

.live-sensor-tile-label[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--c-fg1);
}

.live-sensor-tile-label-dim[b-p3xiqy4a52] {
    color: var(--c-fg3);
}

.live-sensor-tile-value[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg2);
}

.live-sensor-tile-value-dim[b-p3xiqy4a52] {
    color: var(--c-fg4);
}

.live-sensor-tile-value-teal[b-p3xiqy4a52] {
    color: var(--c-teal-deep);
    font-weight: 500;
}

.live-sensor-tile-value-amber[b-p3xiqy4a52] {
    color: var(--c-amber-deep);
    font-weight: 500;
}

.live-sensor-tile-value-blue[b-p3xiqy4a52] {
    color: var(--c-blue);
    font-weight: 500;
}

.live-sensor-tile-value-warn[b-p3xiqy4a52] {
    color: var(--c-amber);
    font-weight: 500;
}

.live-sensor-tile-caption[b-p3xiqy4a52] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg3);
    margin-top: 3px;
}

/* ── Main/rail placeholder row (RIQSIM-726 / RIQSIM-727 mount here) ────────── */

.live-lower-grid[b-p3xiqy4a52] {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 16px;
    align-items: start;
}

.live-placeholder-card[b-p3xiqy4a52] {
    background: var(--c-card);
    border: 1px dashed var(--c-border-strong);
    border-radius: 10px;
    padding: 20px 22px;
}

.live-placeholder-body[b-p3xiqy4a52] {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-fg3);
    margin-top: 8px;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Login.razor.css (RIQSIM-459, re-themed RIQSIM-723) — operator-grade sign-in card. The card is
   CONSTANT navy in both themes (so the wordmark always reads and the screen stays dark), so the
   inputs/button are styled for a dark navy ground regardless of data-theme — translucent-white wells
   rather than the flipping --c-card token (which renders as a muddy hole on navy). Brand color via
   var(--c-*); the white-alpha fills are an opacity treatment on the navy ground, not a brand hue.
   Text sitting directly on the navy card uses --c-oninv (constant light-on-navy, never inverts) per
   theming-handoff.md rule 2 — NOT the generic --c-fg1/white literal. */

/* The login layout centers this wrapper in a place-items:center grid cell, which shrink-wraps to
   content — so the card's width:100% would collapse against a zero-basis parent and max-width never
   engages (card stuck at its content min-width). Make the wrapper fill the cell and center the card. */
.login[b-cqh19qbsf3] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.login__card[b-cqh19qbsf3] {
    width: 100%;
    max-width: 540px;
    background: var(--c-navy);
    color: var(--c-oninv);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 36px 56px 32px;
    box-shadow: 0 18px 48px rgba(8, 4, 40, 0.55);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Thin brand accent rule across the top edge — solid blue (not a gradient: operator surface). */
.login__card[b-cqh19qbsf3]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--c-teal);
}

.login__logo[b-cqh19qbsf3] {
    height: 40px;
    width: auto;
    margin-bottom: 14px;
}

.login__title[b-cqh19qbsf3] {
    margin: 0;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-oninv);
}

.login__sub[b-cqh19qbsf3] {
    margin: 5px 0 22px;
    font-size: 0.875rem;
    color: var(--c-oninv);
}

.login__form[b-cqh19qbsf3] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.login__label[b-cqh19qbsf3] {
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--c-oninv);
    margin-bottom: 7px;
}

.login__input[b-cqh19qbsf3] {
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-oninv);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.9375rem;
    font-family: inherit;
    margin-bottom: 14px;
    outline: none;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.login__input[b-cqh19qbsf3]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login__input:hover[b-cqh19qbsf3] {
    border-color: rgba(255, 255, 255, 0.28);
}

.login__input:focus[b-cqh19qbsf3] {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--c-border-strong);
    box-shadow: 0 0 0 3px rgba(129, 177, 213, 0.25);
}

.login__error[b-cqh19qbsf3] {
    margin: 0 0 16px;
    padding: 9px 12px;
    font-size: 0.8125rem;
    color: var(--c-oninv);
    background: var(--c-danger);
    border-radius: 8px;
}

.login__submit[b-cqh19qbsf3] {
    margin-top: 6px;
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: inherit;
    /* RIQSIM-716 QA fix — this button must NOT use --c-primary.
       theming-handoff.md defines the --c-primary ramp as "solid primary button (distinct from
       CHROME — on dark the chrome navy has no contrast against the APP GROUND)". Its contract is
       therefore contrast against the *page*, and in Light it is deliberately set to the very same
       value as --c-navy (#0B1F33), because on a light page that navy already stands out. This card
       is the one surface in the console pinned to --c-navy in BOTH themes, so on it --c-primary is
       literally the card colour in Light and the button has no visible surface at all.
       (The comment that stood here claimed --c-primary "stays a legible solid in both themes" —
       true against the page, false against this card. Corrected rather than deleted, per the QA
       finding.)
       The fix follows this file's own doctrine (see header): elements on this constant-navy ground
       take a CONSTANT white-alpha treatment, never a theme-flipping token. That is immune to the
       entire collision class instead of trading one token pair for another that could drift later.
       The fill/border sit a clear step above the .login__input wells (.14/.28 vs .06/.16) so the
       button still reads as the primary action. */
    color: var(--c-oninv);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.login__submit:hover[b-cqh19qbsf3] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.38);
}

.login__submit:active[b-cqh19qbsf3] {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.38);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

.login__submit:focus-visible[b-cqh19qbsf3] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(129, 177, 213, 0.45);
}
/* /Components/Pages/MachineDetail.razor.rz.scp.css */
/* ============================================================
   MachineDetail.razor.css — CSS isolation for the trimmed MachineDetail page
   (RIQSIM-718/-732: storage config only — virtual MAC + Storage grid).
   All colours use var(--riq-*) tokens only (no raw hex except the
   locally-declared semantic extensions in :root below).
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
/* Single-column page — this trimmed surface carries only two panels
   (virtual MAC + Storage grid), so the former two-column layout is gone. */
.detail-page[b-u46e39d5yf] {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ── Panel card ───────────────────────────────────────────── */
.panel[b-u46e39d5yf] {
    background: var(--riq-surface);
    border: 1px solid var(--riq-light-blue);
    border-radius: 6px;
    padding: 1.25rem;
}

/* ── Panel title ──────────────────────────────────────────── */
.panel-title[b-u46e39d5yf] {
    color: var(--riq-strong-text);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-family: Arial, sans-serif;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.back-btn[b-u46e39d5yf] {
    font-size: 0.85rem;
}

/* ── Virtual MAC address field row (RIQSIM-555) ───────────── */
/* Spacing on the 4px grid (0.5rem = 8px, 0.25rem = 4px). */
.mac-line[b-u46e39d5yf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: var(--riq-body-text);
    font-family: Arial, sans-serif;
    font-size: 0.9rem;
    min-height: 2rem;   /* reserves the input's height so the header doesn't jump on edit */
}

.mac-label[b-u46e39d5yf] {
    color: var(--riq-light-text);
}

/* Dotted underline is the repo's established affordance for an inline-editable
   value (mirrors the Storage grid's count cell). */
.mac-value[b-u46e39d5yf] {
    color: var(--riq-strong-text);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline dotted;
}

.mac-input[b-u46e39d5yf] {
    /* 13rem (208px) comfortably fits the canonical 17-character 02:xx:xx:xx:xx:xx form
       plus the caret, without stretching across the header. */
    width: 13rem;
}

/* Inline validation message — mirrors .control-panel__error, the repo's one
   precedented error-message shape (padding snapped to the 4px grid). Muted danger ramp
   (never a bright Material red); both tokens flip with data-theme, so dark mode follows
   automatically. */
.virtual-mac__error[b-u46e39d5yf] {
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--riq-danger-soft);
    color: var(--riq-danger-strong);
}

/* ── RSM base level cell (RIQSIM-617) ─────────────────────── */
/* Click-to-edit numeric cell in the Storage grid — same dotted-underline affordance as
   .mac-value / the Count column's inline editor, scoped to this cell. */
.rsm-base-level__value[b-u46e39d5yf] {
    color: var(--riq-strong-text);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline dotted;
}

.rsm-base-level__na[b-u46e39d5yf] {
    color: var(--riq-light-text);
}

.rsm-base-level__editor[b-u46e39d5yf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.rsm-base-level__input[b-u46e39d5yf] {
    width: 80px;
}

/* Mirrors .virtual-mac__error — the repo's one precedented inline-validation shape. */
.rsm-base-level__error[b-u46e39d5yf] {
    flex-basis: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--riq-danger-soft);
    color: var(--riq-danger-strong);
}

/* ── Drum Disable switch cell (RIQ-1974) ──────────────────── */
.drum-disabled__switch[b-u46e39d5yf] {
    cursor: pointer;
}

.drum-disabled__na[b-u46e39d5yf] {
    color: var(--riq-light-text);
}

/* Mirrors .rsm-base-level__error — same precedented inline-validation shape. */
.drum-disabled__error[b-u46e39d5yf] {
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--riq-danger-soft);
    color: var(--riq-danger-strong);
}

/* ── Mix setting switch cell (RIQ-2151) — mirrors the Drum Disable cell above ── */
.mix-mode__switch[b-u46e39d5yf] {
    cursor: pointer;
}

.mix-mode__na[b-u46e39d5yf] {
    color: var(--riq-light-text);
}

.mix-mode__error[b-u46e39d5yf] {
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--riq-danger-soft);
    color: var(--riq-danger-strong);
}

/* ── Coin base level cell (RIQ-1973) — mirrors the RSM Base Level cell above ── */
.coin-base-level__value[b-u46e39d5yf] {
    color: var(--riq-strong-text);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline dotted;
}

.coin-base-level__na[b-u46e39d5yf] {
    color: var(--riq-light-text);
}

.coin-base-level__editor[b-u46e39d5yf] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.coin-base-level__input[b-u46e39d5yf] {
    width: 80px;
}

.coin-base-level__error[b-u46e39d5yf] {
    flex-basis: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--riq-danger-soft);
    color: var(--riq-danger-strong);
}

/* ── Sweep Coin (RIQ-1973) — panel-only action, button in the Storage panel title ── */
.sweep-coin-btn[b-u46e39d5yf] {
    margin-left: auto;
    font-size: 0.85rem;
}

.sweep-coin__message[b-u46e39d5yf] {
    margin: 0 0 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
}

.sweep-coin__message--success[b-u46e39d5yf] {
    background: var(--riq-success-soft);
    color: var(--riq-success-strong);
}

.sweep-coin__message--error[b-u46e39d5yf] {
    background: var(--riq-danger-soft);
    color: var(--riq-danger-strong);
}

/* ── Collection Path Count (RIQ-1980) ─────────────────────── */
/* Mirrors .panel — no distinct card styling, just a hook for panel-scoped rules below. */
.path-count-panel[b-u46e39d5yf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.path-count__total[b-u46e39d5yf] {
    color: var(--riq-strong-text);
    font-weight: 700;
    font-family: Arial, sans-serif;
    font-size: 0.95rem;
}

.path-count__row[b-u46e39d5yf] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--riq-body-text);
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
}

.path-count__empty[b-u46e39d5yf] {
    color: var(--riq-light-text);
    font-family: Arial, sans-serif;
    font-size: 0.85rem;
}

.path-count__init-btn[b-u46e39d5yf] {
    margin-left: auto;
    font-size: 0.85rem;
}

/* Mirrors .sweep-coin__message — the repo's precedented inline-message shape. */
.path-count__message[b-u46e39d5yf] {
    margin: 0.25rem 0 0;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-family: Arial, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
}

.path-count__message--success[b-u46e39d5yf] {
    background: var(--riq-success-soft);
    color: var(--riq-success-strong);
}

.path-count__message--error[b-u46e39d5yf] {
    background: var(--riq-danger-soft);
    color: var(--riq-danger-strong);
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* Profile.razor.css (RIQSIM-460, re-themed RIQSIM-723) — per-user profile surface. var(--c-*) only. */

.profile[b-j0bu1vhqcc] {
    max-width: 480px;
    padding: var(--space-4, 16px) 0;
}

.profile__user[b-j0bu1vhqcc] {
    color: var(--c-fg3);
    margin-bottom: 20px;
}

.profile__field[b-j0bu1vhqcc] {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
}

.profile__label[b-j0bu1vhqcc] {
    font-weight: 500;
    color: var(--c-fg1);
    margin-bottom: 6px;
}

.profile__input[b-j0bu1vhqcc] {
    max-width: 320px;
}

.profile__actions[b-j0bu1vhqcc] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile__saved[b-j0bu1vhqcc] {
    color: var(--c-green);
    font-size: 0.875rem;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Recycler.IQ.Simulator/Components/Pages/Settings.razor.css
   Scoped styles for the Settings page. */

.settings-page[b-kfpt4ktrx6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    max-width: 900px;
}

/* ── Page header ──────────────────────────────────────────────────────────── */

.settings-page__header[b-kfpt4ktrx6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-page__header h2[b-kfpt4ktrx6] {
    margin: 0;
    font-size: 1.375rem;
    color: var(--c-fg1);
}

/* ── Machine grid ─────────────────────────────────────────────────────────── */

.settings-page__grid[b-kfpt4ktrx6] {
    width: 100%;
}
/* /Components/Shared/AddMachineDialog.razor.rz.scp.css */
/* Recycler.IQ.Simulator/Components/Shared/AddMachineDialog.razor.css
   Scoped styles for the AddMachineDialog modal overlay.
   Uses custom amd-* classes to avoid conflicts with Radzen's rz-dialog-* framework styles. */

/* ── Overlay / backdrop ───────────────────────────────────────────────────── */

.amd-mask[b-0uxt1923mg] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* ── Dialog panel ─────────────────────────────────────────────────────────── */

.amd-dialog[b-0uxt1923mg] {
    background: var(--riq-surface);
    border: 1px solid var(--riq-light-blue, #c8dff0);
    border-radius: 6px;
    width: 420px;
    max-width: calc(100vw - 2rem);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.amd-header[b-0uxt1923mg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--riq-light-blue, #c8dff0);
}

.amd-title[b-0uxt1923mg] {
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--riq-strong-text);
}

/* ── Content ──────────────────────────────────────────────────────────────── */

.amd-content[b-0uxt1923mg] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.amd-field[b-0uxt1923mg] {
    margin-bottom: 1rem;
}

.amd-field label[b-0uxt1923mg] {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--riq-strong-text);
}

.amd-error[b-0uxt1923mg] {
    background-color: var(--riq-danger-soft);
    border: 1px solid var(--riq-danger);
    border-radius: 4px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    color: var(--riq-danger-strong);
    font-size: 0.875rem;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.amd-footer[b-0uxt1923mg] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1rem;
    border-top: 1px solid var(--riq-light-blue, #c8dff0);
}
/* /Components/Shared/ClockDisplay.razor.rz.scp.css */
/* ClockDisplay.razor.css — scoped styles for the top-bar clock. */

.clock-display[b-qq9gffmpap] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: color-mix(in srgb, var(--c-oninv) 50%, transparent);
}
/* /Components/Shared/CommandBar.razor.rz.scp.css */
/* CommandBar.razor.css — RIQSIM-718/-729. Persistent bottom bar, always on --c-navy (same "top
   bar, command bar, solid primary" convention as TopBar.razor.css) regardless of light/dark theme.
   Design-token custom properties only (c-, riq- prefixes), color-mix(...) for translucency
   (TopBar.razor.css precedent) — never raw hex. NOTE: never write a token glob ending in
   star-slash inside this comment — it terminates the comment and the parser then eats the next
   rule (this exact bug silently dropped .command-bar's position:fixed).
   Layout target: design-simulator-console.dc.html:1054-1096. */

.command-bar[b-li9frv8fqd] {
    position: fixed;
    left: 0;
    right: 0;
    /* Sits directly ABOVE the sticky 32px footer (MainLayout.razor.css .riq-footer) — the
       two values are coupled; change them together. */
    bottom: 32px;
    z-index: 50;
    background: var(--c-navy);
    border-top: 1px solid color-mix(in srgb, var(--c-oninv) 10%, transparent);
    box-shadow: 0 -8px 24px color-mix(in srgb, var(--c-navy) 60%, transparent);
}

.command-bar-inner[b-li9frv8fqd] {
    max-width: 1560px;
    margin: 0 auto;
    padding: 0 22px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.command-bar button[b-li9frv8fqd] {
    font: inherit;
    margin: 0;
}

.command-bar-device[b-li9frv8fqd] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-right: 16px;
    border-right: 1px solid color-mix(in srgb, var(--c-oninv) 14%, transparent);
}

.command-bar-device-dot[b-li9frv8fqd] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--c-amber);
    flex-shrink: 0;
}

.command-bar-device-name[b-li9frv8fqd] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-oninv);
    line-height: 1.2;
    white-space: nowrap;
}

.command-bar-device-port[b-li9frv8fqd] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: color-mix(in srgb, var(--c-oninv) 50%, transparent);
    line-height: 1.3;
}

.command-bar-action[b-li9frv8fqd] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 15px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--c-oninv) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-oninv) 16%, transparent);
    color: var(--c-oninv);
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s var(--ease-standard);
    white-space: nowrap;
}

.command-bar-action:hover[b-li9frv8fqd] {
    background: color-mix(in srgb, var(--c-oninv) 18%, transparent);
}

.command-bar-action--money[b-li9frv8fqd] {
    background: var(--c-teal-strong);
    border-color: var(--c-teal-strong);
    color: var(--c-navy);
}

.command-bar-action--money:hover[b-li9frv8fqd] {
    background: var(--c-teal-deep);
}

.command-bar-action--jam[b-li9frv8fqd] {
    background: color-mix(in srgb, var(--c-amber) 16%, transparent);
    border-color: color-mix(in srgb, var(--c-amber) 45%, transparent);
    color: var(--c-amber);
}

.command-bar-action--jam:hover[b-li9frv8fqd] {
    background: color-mix(in srgb, var(--c-amber) 26%, transparent);
}

.command-bar-action--error[b-li9frv8fqd] {
    background: color-mix(in srgb, var(--c-danger) 16%, transparent);
    border-color: color-mix(in srgb, var(--c-danger) 45%, transparent);
    color: var(--c-danger-deep);
}

.command-bar-action--error:hover[b-li9frv8fqd] {
    background: color-mix(in srgb, var(--c-danger) 26%, transparent);
}

.command-bar-action--reset[b-li9frv8fqd] {
    background: transparent;
}

.command-bar-key[b-li9frv8fqd] {
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: 0.65;
}

.command-bar-spacer[b-li9frv8fqd] {
    flex: 1;
}

.command-bar-search[b-li9frv8fqd] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 330px;
    height: 38px;
    padding: 0 12px;
    background: color-mix(in srgb, var(--c-oninv) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-oninv) 16%, transparent);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s var(--ease-standard);
}

.command-bar-search:hover[b-li9frv8fqd],
.command-bar-search:focus[b-li9frv8fqd] {
    border-color: var(--c-teal-strong);
    outline: none;
}

.command-bar-search-glyph[b-li9frv8fqd] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: color-mix(in srgb, var(--c-oninv) 40%, transparent);
}

.command-bar-search-hint[b-li9frv8fqd] {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: color-mix(in srgb, var(--c-oninv) 55%, transparent);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-bar-key--kbd[b-li9frv8fqd] {
    border: 1px solid color-mix(in srgb, var(--c-oninv) 24%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    opacity: 1;
    color: color-mix(in srgb, var(--c-oninv) 60%, transparent);
}
/* /Components/Shared/CommandLogPanel.razor.rz.scp.css */
/* ============================================================
   CommandLogPanel.razor.css — scoped styles for the command log panel.
   All colours use var(--riq-*) tokens only — no raw hex values (Gap 2).
   ============================================================ */

/* ── Scrollable panel container ───────────────────────────── */
.command-log-panel[b-q5ts4ejws6] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--riq-light-blue);
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

/* ── Command row ──────────────────────────────────────────── */
.cmd-row[b-q5ts4ejws6] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    align-items: baseline;
    color: var(--riq-body-text);
}

/* Alternating row background using Recycler.IQ tint token */
.cmd-row:nth-child(even)[b-q5ts4ejws6] {
    background-color: var(--riq-bg-tint);
}

/* ── Timestamp ────────────────────────────────────────────── */
.cmd-timestamp[b-q5ts4ejws6] {
    color: var(--riq-light-text);
    font-size: 0.75rem;
    min-width: 90px;
    font-family: monospace;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Command name ─────────────────────────────────────────── */
.cmd-name[b-q5ts4ejws6] {
    color: var(--riq-medium-blue);
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Direction indicator badge ────────────────────────────── */
.cmd-direction[b-q5ts4ejws6] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background-color: var(--riq-light-blue);
    color: var(--riq-white);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Raw hex summary ──────────────────────────────────────── */
.cmd-raw[b-q5ts4ejws6] {
    flex: 1;
    font-size: 0.7rem;
    color: var(--riq-light-text);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Empty state placeholder ──────────────────────────────── */
.cmd-empty[b-q5ts4ejws6] {
    padding: 0.5rem 0.75rem;
    color: var(--riq-light-text);
    font-style: italic;
    font-size: 0.8rem;
}
/* /Components/Shared/CutawayView.razor.rz.scp.css */
/* CutawayView.razor.css — RIQSIM-726 Live "Note path" cutaway: chassis art, storage overlay chips,
   16 jam-zone fault lamps + hover popovers, transport-zone table, KRC10 strip.
   Geometry/typography lifted 1:1 from design-simulator-console.dc.html:466-663 onto the --c-*
   tokens declared in wwwroot/app.css (RIQSIM-716). No raw hex, no --riq-* — --c-* only.
   The mockup's --c-danger-150 step does not exist in this repo's ramp; --c-danger-100 is the
   equivalent tint between -50 and -200 and is used in its place. */

.cutaway-card[b-x49ja3m0c0] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.cutaway-header[b-x49ja3m0c0] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    background: var(--c-sunken);
    border-bottom: 1px solid var(--c-border);
}

.cutaway-eyebrow[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg1);
}

.cutaway-header-caption[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
}

.cutaway-spacer[b-x49ja3m0c0] {
    flex: 1;
}

.cutaway-zone-toggle[b-x49ja3m0c0] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: background-color 120ms var(--ease-standard);
}

.cutaway-zone-toggle-on[b-x49ja3m0c0] {
    background: var(--c-danger-50);
    border: 1px solid var(--c-danger-200);
    color: var(--c-danger-deep);
}

.cutaway-zone-toggle-off[b-x49ja3m0c0] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    color: var(--c-fg3);
}

.cutaway-zone-toggle-dot[b-x49ja3m0c0] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--c-track);
}

.cutaway-zone-toggle-on .cutaway-zone-toggle-dot[b-x49ja3m0c0] {
    background: var(--c-danger);
}

.cutaway-zone-toggle-label[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
}

.cutaway-zone-toggle-count[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11px;
    opacity: 0.65;
}

/* ── Body grid ───────────────────────────────────────────────────────────── */

.cutaway-body[b-x49ja3m0c0] {
    padding: 18px 20px;
    display: grid;
    grid-template-columns: minmax(230px, 392px) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
}

/* ── Chassis art + overlays ──────────────────────────────────────────────── */

.cutaway-art-frame[b-x49ja3m0c0] {
    position: relative;
    width: 100%;
    aspect-ratio: 718 / 808;
}

/* data-art picks up the global img[data-art]{filter:var(--c-art)} rule in app.css — the drawing is
   white-ground line art and must invert in dark mode. */
.cutaway-art-img[b-x49ja3m0c0] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5;
}

.cutaway-art-caption[b-x49ja3m0c0],
.cutaway-footnote[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: var(--c-fg4);
    text-wrap: pretty;
}

.cutaway-art-caption[b-x49ja3m0c0] {
    margin-top: 10px;
}

/* Storage overlay chips ---------------------------------------------------- */

.cutaway-chip[b-x49ja3m0c0] {
    position: absolute;
    z-index: 2;
    transform: translateY(-50%);
    background: var(--c-pop);
    border: 1px solid var(--c-border);
    border-left-width: 3px;
    border-radius: 4px;
    padding: 5px 7px;
    box-shadow: var(--shadow-2);
}

.cutaway-chip-head[b-x49ja3m0c0] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.cutaway-chip-label[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10.5px;
    color: var(--c-fg1);
    white-space: nowrap;
}

.cutaway-chip-count[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 10px;
}

.cutaway-chip-track[b-x49ja3m0c0] {
    height: 4px;
    background: var(--c-sunken);
    border-radius: 999px;
    margin-top: 4px;
    overflow: hidden;
}

.cutaway-chip-fill[b-x49ja3m0c0] {
    height: 100%;
}

/* Fill severity — supply units (drum/tank) are bad at BOTH ends, deposit stores only when full.
   See StorageFillPresentation (Components/Shared/StorageFillPresentation.cs). */
.cutaway-fill-success[b-x49ja3m0c0] {
    border-left-color: var(--c-green);
}

.cutaway-fill-success .cutaway-chip-count[b-x49ja3m0c0] {
    color: var(--c-green);
}

.cutaway-fill-success .cutaway-chip-fill[b-x49ja3m0c0],
.cutaway-krc-fill.cutaway-fill-success[b-x49ja3m0c0] {
    background: var(--c-green);
}

.cutaway-fill-warning[b-x49ja3m0c0] {
    border-left-color: var(--c-amber);
}

.cutaway-fill-warning .cutaway-chip-count[b-x49ja3m0c0] {
    color: var(--c-amber);
}

.cutaway-fill-warning .cutaway-chip-fill[b-x49ja3m0c0],
.cutaway-krc-fill.cutaway-fill-warning[b-x49ja3m0c0] {
    background: var(--c-amber);
}

.cutaway-fill-danger[b-x49ja3m0c0] {
    border-left-color: var(--c-danger);
}

.cutaway-fill-danger .cutaway-chip-count[b-x49ja3m0c0] {
    color: var(--c-danger);
}

.cutaway-fill-danger .cutaway-chip-fill[b-x49ja3m0c0],
.cutaway-krc-fill.cutaway-fill-danger[b-x49ja3m0c0] {
    background: var(--c-danger);
}

/* Spotlight scrim ---------------------------------------------------------- */

/* Sits above the art + chips but BELOW the lamps (z 4-7) and the popover (z 8), so the hovered
   zone and its card stay fully lit while the rest of the drawing recedes. Uses the themed
   --c-scrim rather than the mockup's hardcoded light rgba, which would be wrong in dark mode
   where the art is inverted. */
.cutaway-scrim[b-x49ja3m0c0] {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--c-scrim);
    pointer-events: none;
}

/* Jam-zone lamps ----------------------------------------------------------- */

.cutaway-zone[b-x49ja3m0c0] {
    position: absolute;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.cutaway-zone-idle[b-x49ja3m0c0] {
    z-index: 4;
}

.cutaway-zone-hover[b-x49ja3m0c0] {
    z-index: 6;
}

/* A live fault always draws above a merely-hovered lamp. */
.cutaway-zone-live[b-x49ja3m0c0] {
    z-index: 7;
}

.cutaway-zone-dot[b-x49ja3m0c0] {
    border-radius: 999px;
    transition: width 120ms var(--ease-standard), height 120ms var(--ease-standard),
                background-color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard);
}

.cutaway-zone-idle .cutaway-zone-dot[b-x49ja3m0c0] {
    width: 11px;
    height: 11px;
    background: var(--c-card);
    border: 2px solid var(--c-amber);
    box-shadow: var(--shadow-1);
}

.cutaway-zone-idle .cutaway-zone-dot.cutaway-sev-fatal[b-x49ja3m0c0] {
    border-color: var(--c-danger);
}

.cutaway-zone-hover .cutaway-zone-dot[b-x49ja3m0c0] {
    width: 16px;
    height: 16px;
    background: var(--c-amber);
    border: 2px solid var(--c-card);
    box-shadow: 0 0 0 3px var(--c-glow-warn);
}

.cutaway-zone-hover .cutaway-zone-dot.cutaway-sev-fatal[b-x49ja3m0c0] {
    background: var(--c-danger);
    box-shadow: 0 0 0 3px var(--c-glow-err);
}

.cutaway-zone-live .cutaway-zone-dot[b-x49ja3m0c0] {
    width: 15px;
    height: 15px;
    background: var(--c-amber);
    border: 2px solid var(--c-card);
    animation: llLampWarn 1.1s var(--ease-standard) infinite;
}

.cutaway-zone-live .cutaway-zone-dot.cutaway-sev-fatal[b-x49ja3m0c0] {
    background: var(--c-danger);
    animation: llLampErr 1.1s var(--ease-standard) infinite;
}

/* Hover popover ------------------------------------------------------------ */

.cutaway-pop[b-x49ja3m0c0] {
    position: absolute;
    z-index: 8;
    width: 205px;
    max-width: 96%;
    transform: translateY(-50%);
    background: var(--c-card);
    border: 1px solid var(--c-border-strong);
    border-radius: 6px;
    padding: 12px 13px;
    box-shadow: var(--shadow-4);
    pointer-events: none;
}

/* Anchored to whichever edge is farther from the lamp (JamZoneTaxonomy.PopoverAnchorsLeft). */
.cutaway-pop-anchor-left[b-x49ja3m0c0] {
    left: 0;
}

.cutaway-pop-anchor-right[b-x49ja3m0c0] {
    right: 0;
}

.cutaway-pop-head[b-x49ja3m0c0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}

.cutaway-pop-dot[b-x49ja3m0c0] {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--c-amber);
}

.cutaway-pop-dot.cutaway-sev-fatal[b-x49ja3m0c0] {
    background: var(--c-danger);
}

.cutaway-pop-title[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--c-fg1);
}

.cutaway-pop-codes[b-x49ja3m0c0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 9px;
}

.cutaway-pop-code-row[b-x49ja3m0c0] {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.cutaway-pop-code[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--c-fg1);
    min-width: 22px;
    text-align: right;
}

.cutaway-pop-code-name[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg2);
}

.cutaway-pop-note[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--c-fg3);
    text-wrap: pretty;
    margin-bottom: 9px;
}

.cutaway-pop-footer[b-x49ja3m0c0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--c-border);
}

.cutaway-pop-sev[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--c-amber-50);
    border: 1px solid var(--c-amber-200);
    color: var(--c-amber-deep);
}

.cutaway-pop-sev.cutaway-sev-fatal[b-x49ja3m0c0] {
    background: var(--c-danger-100);
    border-color: var(--c-danger-200);
    color: var(--c-danger-deep);
}

.cutaway-pop-action[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    color: var(--c-teal);
}

/* ── Transport-zone table ────────────────────────────────────────────────── */

.cutaway-tz-head[b-x49ja3m0c0],
.cutaway-tz-row[b-x49ja3m0c0] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr) 46px minmax(0, 1.1fr);
    gap: 9px;
}

.cutaway-tz-head[b-x49ja3m0c0] {
    padding: 0 11px 7px;
}

.cutaway-tz-heading[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-fg4);
}

.cutaway-tz-heading-right[b-x49ja3m0c0] {
    text-align: right;
}

.cutaway-tz-rows[b-x49ja3m0c0] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cutaway-tz-row[b-x49ja3m0c0] {
    align-items: center;
    padding: 8px 11px;
    border-radius: 4px;
}

.cutaway-tz-row-idle[b-x49ja3m0c0] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
}

.cutaway-tz-row-active[b-x49ja3m0c0] {
    background: var(--c-teal-50);
    border: 1px solid var(--c-teal-200);
}

.cutaway-tz-zone[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-fg1);
}

.cutaway-tz-kr[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-fg3);
}

.cutaway-tz-id[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-fg4);
}

.cutaway-tz-state[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg4);
    text-align: right;
}

.cutaway-tz-row-active .cutaway-tz-state[b-x49ja3m0c0] {
    color: var(--c-teal-deep);
}

/* ── KRC10 coin strip ────────────────────────────────────────────────────── */

.cutaway-krc[b-x49ja3m0c0] {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--c-border);
}

.cutaway-krc-head[b-x49ja3m0c0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.cutaway-krc-caption[b-x49ja3m0c0],
.cutaway-krc-empty[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg4);
}

.cutaway-krc-row[b-x49ja3m0c0] {
    display: grid;
    grid-template-columns: 96px 1fr 76px;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 9px 11px;
    margin-bottom: 5px;
}

.cutaway-krc-label[b-x49ja3m0c0] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-fg1);
}

.cutaway-krc-denom[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-fg3);
}

.cutaway-krc-track[b-x49ja3m0c0] {
    height: 7px;
    background: var(--c-sunken);
    border-radius: 999px;
    overflow: hidden;
}

.cutaway-krc-fill[b-x49ja3m0c0] {
    height: 100%;
}

.cutaway-krc-value[b-x49ja3m0c0] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg2);
    text-align: right;
}

.cutaway-footnote[b-x49ja3m0c0] {
    margin-top: 12px;
}
/* /Components/Shared/EscrowChip.razor.rz.scp.css */
/* EscrowChip.razor.css — RIQSIM-729 (carries forward RIQSIM-427). Teal "holding" pill, same family
   as Fleet's .fleet-event-error danger pill (Fleet.razor.css) but teal for an in-progress escrow
   rather than red for a fault. --c-* tokens only (wwwroot/app.css, RIQSIM-716) — no raw hex. */

.escrow-chip[b-521w16bxc0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 2px 8px 2px 6px;
    background: var(--c-teal-50);
    border: 1px solid var(--c-teal-200);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-teal-deep);
}

.escrow-chip-dot[b-521w16bxc0] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--c-teal-strong);
    animation: llLamp 2.4s var(--ease-standard) infinite;
}

.escrow-chip-label[b-521w16bxc0] {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.escrow-chip-amount[b-521w16bxc0] {
    font-weight: 600;
}

.escrow-chip-of[b-521w16bxc0] {
    color: var(--c-fg4);
}

.escrow-chip-target[b-521w16bxc0] {
    color: var(--c-fg3);
}
/* /Components/Shared/EventLogPanel.razor.rz.scp.css */
/* ============================================================
   EventLogPanel.razor.css — scoped styles for the event log panel.
   All colours use var(--riq-*) tokens only — no raw hex values (Gap 2).
   ============================================================ */

/* ── Scrollable panel container ───────────────────────────── */
.event-log-panel[b-4ovufvujij] {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--riq-light-blue);
    border-radius: 4px;
    font-family: Arial, sans-serif;
}

/* ── Log row ──────────────────────────────────────────────── */
.log-row[b-4ovufvujij] {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    align-items: baseline;
    color: var(--riq-body-text);
}

/* Alternating row background using Recycler.IQ tint token */
.log-row:nth-child(even)[b-4ovufvujij] {
    background-color: var(--riq-bg-tint);
}

/* ── Timestamp ────────────────────────────────────────────── */
.log-timestamp[b-4ovufvujij] {
    color: var(--riq-light-text);
    font-size: 0.75rem;
    min-width: 90px;
    font-family: monospace;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Event kind badge ─────────────────────────────────────── */
.log-kind-badge[b-4ovufvujij] {
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    min-width: 92px;
    text-align: center;
    white-space: nowrap;
    color: var(--riq-white);
    flex-shrink: 0;
}

/* EventFired — light blue badge */
.badge-event[b-4ovufvujij] {
    background-color: var(--riq-light-blue);
}

/* StateChanged — medium blue badge */
.badge-state[b-4ovufvujij] {
    background-color: var(--riq-medium-blue);
}

/* ── Description text ─────────────────────────────────────── */
.log-description[b-4ovufvujij] {
    flex: 1;
    font-size: 0.8rem;
    color: var(--riq-body-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Empty state placeholder ──────────────────────────────── */
.log-empty[b-4ovufvujij] {
    padding: 0.5rem 0.75rem;
    color: var(--riq-light-text);
    font-style: italic;
    font-size: 0.8rem;
}
/* /Components/Shared/EventRailPanel.razor.rz.scp.css */
/* EventRailPanel.razor.css — RIQSIM-727 unified event rail (right-rail slot on Live).
   Colors/spacing/typography lifted 1:1 from design-simulator-console.dc.html:795-863 onto the
   --c-* tokens declared in wwwroot/app.css (RIQSIM-716). No raw hex, no --riq-* — --c-* only. */

.rail-card[b-nqjpnetc64] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.rail-header[b-nqjpnetc64] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    background: var(--c-sunken);
    border-bottom: 1px solid var(--c-border);
}

.rail-eyebrow[b-nqjpnetc64] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg1);
}

.rail-spacer[b-nqjpnetc64] {
    flex: 1;
}

.rail-filter[b-nqjpnetc64] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 11.5px;
}

.rail-filter-dot[b-nqjpnetc64] {
    color: var(--c-fg4);
}

.rail-filter-btn[b-nqjpnetc64] {
    background: none;
    border: none;
    padding: 2px 3px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg3);
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-standard);
}

.rail-filter-btn:hover[b-nqjpnetc64] {
    color: var(--c-fg2);
}

.rail-filter-btn-active[b-nqjpnetc64] {
    color: var(--c-teal-strong);
    font-weight: 600;
}

.rail-body[b-nqjpnetc64] {
    max-height: 520px;
    overflow: auto;
}

.rail-empty[b-nqjpnetc64] {
    padding: 18px;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-fg3);
}

.rail-row[b-nqjpnetc64] {
    display: grid;
    grid-template-columns: 66px 46px 1fr;
    gap: 10px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--c-border-soft);
    align-items: baseline;
}

.rail-row:last-child[b-nqjpnetc64] {
    border-bottom: none;
}

.rail-row-err[b-nqjpnetc64] {
    background: var(--c-danger-50);
}

.rail-row-evt[b-nqjpnetc64] {
    background: var(--c-amber-50);
}

.rail-timestamp[b-nqjpnetc64] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg3);
}

.rail-tag[b-nqjpnetc64] {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
}

.rail-tag-err[b-nqjpnetc64] {
    color: var(--c-danger-deep);
}

.rail-tag-evt[b-nqjpnetc64] {
    color: var(--c-amber-deep);
}

.rail-tag-sns[b-nqjpnetc64] {
    color: var(--c-teal-deep);
}

.rail-tag-blue[b-nqjpnetc64] {
    color: var(--c-blue);
}

.rail-tag-sim[b-nqjpnetc64] {
    color: var(--c-fg3);
}

.rail-message[b-nqjpnetc64] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg2);
}
/* /Components/Shared/HostLinkLamp.razor.rz.scp.css */
/* HostLinkLamp.razor.css — scoped styles for the top-bar host-link lamp. */

.host-link-lamp[b-xka4wca7h7] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.host-link-lamp-dot[b-xka4wca7h7] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--c-border-strong);
}

/* Reuses the existing llLamp keyframes (app.css) — same pulse the sensor-lamp dots use. */
.host-link-lamp-dot--ok[b-xka4wca7h7] {
    background: var(--c-teal-strong);
    animation: llLamp 2.4s var(--ease-standard) infinite;
}

.host-link-lamp-text[b-xka4wca7h7] {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--c-oninv) 80%, transparent);
}
/* /Components/Shared/InsertMoneySheet.razor.rz.scp.css */
/* InsertMoneySheet.razor.css — RIQSIM-718/-731. Bespoke CSS-overlay bottom sheet (Palette-overlay
   / StackDialog-overlay precedent), NOT RadzenDialog. Design-token custom properties only (c-,
   font-, ease- prefixes) — never raw hex. NOTE: a token glob ending in star-slash inside this
   comment terminates it early and the parser eats the next rule (.money-sheet-overlay's
   position:fixed was silently dropped by that bug).
   Layout target: design-simulator-console.dc.html:1130-1224. */

.money-sheet-overlay[b-mukaxr8xem] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 60px;
    background: var(--c-scrim);
}

.money-sheet-modal[b-mukaxr8xem] {
    width: 100%;
    max-width: 1080px;
    margin: 0 22px;
    background: var(--c-card);
    border: 1px solid var(--c-border-strong);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: var(--shadow-4);
    animation: llFade 160ms var(--ease-standard);
    overflow: hidden;
}

.money-sheet-header[b-mukaxr8xem] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--c-border);
}

.money-sheet-title[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 17px;
    color: var(--c-fg1);
}

.money-sheet-device[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--c-fg3);
}

.money-sheet-spacer[b-mukaxr8xem] {
    flex: 1;
}

.money-sheet-esc[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg3);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
}

.money-sheet-body[b-mukaxr8xem] {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
}

.money-sheet-left[b-mukaxr8xem] {
    padding: 20px 22px;
    border-right: 1px solid var(--c-border);
}

.money-sheet-right[b-mukaxr8xem] {
    padding: 20px 22px;
    background: var(--c-app);
    display: flex;
    flex-direction: column;
}

.money-section-row[b-mukaxr8xem] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.money-section-label[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg3);
}

.money-section-hint[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-fg4);
}

.money-section-hint--mono[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 12px;
}

.money-chip-grid[b-mukaxr8xem] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.money-chip[b-mukaxr8xem] {
    border-radius: 6px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    transition: background-color 0.12s var(--ease-standard), border-color 0.12s var(--ease-standard);
    user-select: none;
}

.money-chip:hover[b-mukaxr8xem] {
    background: var(--c-hover);
}

.money-chip--active[b-mukaxr8xem] {
    background: var(--c-teal-50);
    border-color: var(--c-teal-200);
}

.money-chip-value[b-mukaxr8xem] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    color: var(--c-fg1);
}

.money-chip-count[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg3);
    margin-top: 3px;
}

.money-manual-row[b-mukaxr8xem] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid var(--c-border);
}

.money-manual-label[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg3);
    margin-right: 4px;
}

.money-manual-input[b-mukaxr8xem] {
    width: 66px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--c-fg1);
    background: var(--c-card);
    outline: none;
}

.money-manual-of[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--c-fg3);
}

.money-denom-picks[b-mukaxr8xem] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.money-denom-pick[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 7px 10px;
    border-radius: 4px;
    cursor: pointer;
    background: var(--c-card);
    color: var(--c-fg2);
    border: 1px solid var(--c-border);
}

.money-denom-pick--selected[b-mukaxr8xem] {
    background: var(--c-primary);
    color: var(--c-oninv);
    border-color: var(--c-primary-border);
}

.money-add-btn[b-mukaxr8xem] {
    font: inherit;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    padding: 9px 15px;
    border-radius: 6px;
    background: var(--c-card);
    border: 1px solid var(--c-teal-strong);
    color: var(--c-teal);
    cursor: pointer;
}

.money-add-btn:hover[b-mukaxr8xem] {
    background: var(--c-teal-50);
}

.money-preset-btn[b-mukaxr8xem] {
    font: inherit;
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-fg2);
    cursor: pointer;
}

.money-preset-btn:hover:not(:disabled)[b-mukaxr8xem] {
    background: var(--c-hover);
}

.money-preset-btn:disabled[b-mukaxr8xem] {
    opacity: 0.45;
    cursor: default;
}

.money-stack-header[b-mukaxr8xem] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.money-stack-clear[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-fg3);
    cursor: pointer;
    text-decoration: underline;
}

.money-stack-list[b-mukaxr8xem] {
    flex: 1;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.money-stack-empty[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--c-fg4);
    padding: 22px 0;
}

.money-stack-row[b-mukaxr8xem] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 9px 12px;
}

.money-stack-line[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 13.5px;
    color: var(--c-fg1);
}

.money-stack-value[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 13.5px;
    color: var(--c-fg2);
}

.money-stack-remove[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--c-fg4);
    cursor: pointer;
}

.money-total-block[b-mukaxr8xem] {
    border-top: 1px solid var(--c-border);
    padding-top: 14px;
    margin-top: 14px;
}

.money-total-row[b-mukaxr8xem] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 4px;
}

.money-total-label[b-mukaxr8xem] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-fg3);
}

.money-total-value[b-mukaxr8xem] {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    color: var(--c-fg1);
}

.money-total-pieces[b-mukaxr8xem] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
    margin-bottom: 14px;
}

.money-warning-banner[b-mukaxr8xem] {
    background: var(--c-amber-50);
    border: 1px solid var(--c-amber-200);
    color: var(--c-amber-deep);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 12.5px;
    margin-bottom: 12px;
}

.money-confirm-btn[b-mukaxr8xem] {
    font: inherit;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--c-primary);
    color: var(--c-oninv);
    border: 1px solid var(--c-primary-border);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: var(--shadow-1);
    width: 100%;
}

.money-confirm-btn:hover:not(:disabled)[b-mukaxr8xem] {
    background: var(--c-primary-hover);
}

.money-confirm-btn:disabled[b-mukaxr8xem] {
    opacity: 0.5;
    cursor: default;
}
/* /Components/Shared/InventoryLevelsPanel.razor.rz.scp.css */
/* ============================================================
   InventoryLevelsPanel.razor.css — RIQSIM-312
   Per-denomination horizontal bars colored by severity tokens.
   All colors use var(--riq-*) tokens defined in wwwroot/app.css.
   ============================================================ */

/* DM Sans is set globally on html/body in wwwroot/app.css and cascades into this scoped CSS. */

.empty[b-rwshatv72l] {
    color: var(--riq-light-text);
    font-style: italic;
    font-size: 0.85rem;
    padding: 0.5rem 0.25rem;
}

/* RIQSIM-447: role band header — separates the dispensable-supply bars from the deposit-store bars
   so the opposite severity directions read as two intentional groups, not one inconsistent list. */
.band-header[b-rwshatv72l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.65rem 0 0.15rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid var(--riq-light-blue);
}

.band-header:first-child[b-rwshatv72l] {
    margin-top: 0;
}

.band-name[b-rwshatv72l] {
    color: var(--riq-strong-text);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.band-hint[b-rwshatv72l] {
    color: var(--riq-light-text);
    font-size: 0.72rem;
    font-style: italic;
}

.bar-row[b-rwshatv72l] {
    display: grid;
    /* Content-aware sizing — denom label gets 8-12 chars, value gets 6-10 chars, bar fills the rest.
       Prevents clipping for long currency strings (e.g., "JPY 10000.00") on narrow viewports. */
    grid-template-columns: minmax(9rem, 20ch) 1fr minmax(6rem, 10ch);
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
}

.denom-label[b-rwshatv72l] {
    color: var(--riq-body-text);
    font-weight: 600;
    font-size: 0.9rem;
}

.bar-track[b-rwshatv72l] {
    background: var(--riq-bg-tint);
    border: 1px solid var(--riq-light-blue);
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
    position: relative;
}

.bar-fill[b-rwshatv72l] {
    height: 100%;
    border-radius: 3px 0 0 3px;
    transition: width 200ms ease-out, background-color 200ms ease-out;
}

.bar-fill.severity-danger[b-rwshatv72l]  { background: var(--riq-danger);  }
.bar-fill.severity-warning[b-rwshatv72l] { background: var(--riq-warning); }
.bar-fill.severity-success[b-rwshatv72l] { background: var(--riq-success); }

.denom-value[b-rwshatv72l] {
    color: var(--riq-body-text);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 0.9rem;
}

.total-row[b-rwshatv72l] {
    margin-top: 0.85rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--riq-light-blue);
    color: var(--riq-strong-text);
    font-weight: 700;
    font-size: 0.95rem;
    text-align: right;
}

.total-value[b-rwshatv72l] {
    color: var(--riq-medium-blue);
    margin-left: 0.35rem;
}
/* /Components/Shared/LinkStatusLight.razor.rz.scp.css */
/* RIQ-4012: font is inherited so Fleet (body 13px) and Live (mono 12.5px) each set their own. */
.link-status-light[b-vt2s3wx0tj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    line-height: 1.2;
    color: var(--c-fg2);
}

.link-status-light-dot[b-vt2s3wx0tj] {
    flex: none;
    width: var(--link-light-size, 8px);
    height: var(--link-light-size, 8px);
    border-radius: 999px;
}

.link-status-light-offline .link-status-light-dot[b-vt2s3wx0tj] {
    background: var(--c-danger);
}

/* Pulses while the dial loop is still trying; offline and connected are steady. */
.link-status-light-dialling .link-status-light-dot[b-vt2s3wx0tj] {
    background: var(--c-amber);
    animation: llLampWarn 1.1s var(--ease-standard) infinite;
}

.link-status-light-connected .link-status-light-dot[b-vt2s3wx0tj] {
    background: var(--c-green);
}

@media (prefers-reduced-motion: reduce) {
    .link-status-light-dialling .link-status-light-dot[b-vt2s3wx0tj] {
        animation: none;
    }
}
/* /Components/Shared/Palette.razor.rz.scp.css */
/* Palette.razor.css — RIQSIM-718/-730. Bespoke CSS-overlay ⌘K command palette (StackDialog-overlay
   precedent, MachineDetail.razor:423-433) — NOT RadzenDialog. Design-token custom properties only
   (c-, font-, ease- prefixes): --c-scrim for the backdrop and --c-pop for the modal ground
   (CutawayView.razor.css precedent) so both track light/dark automatically — never raw hex/rgba.
   NOTE: a token glob ending in star-slash inside this comment terminates it early and the parser
   eats the next rule (.palette-overlay's position:fixed was silently dropped by that bug). */

.palette-overlay[b-959uifpxrg] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 96px;
    background: var(--c-scrim);
}

.palette-modal[b-959uifpxrg] {
    width: 560px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    background: var(--c-pop);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-4);
    overflow: hidden;
}

.palette-header[b-959uifpxrg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--c-border);
}

.palette-glyph[b-959uifpxrg] {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--c-fg4);
}

.palette-input[b-959uifpxrg] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--c-fg1);
}

.palette-input[b-959uifpxrg]::placeholder {
    color: var(--c-fg4);
}

.palette-device[b-959uifpxrg] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-fg4);
    white-space: nowrap;
}

.palette-preview[b-959uifpxrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--c-border);
    font-family: var(--font-mono);
    font-size: 12.5px;
}

.palette-preview--grammar[b-959uifpxrg] {
    color: var(--c-teal-deep);
    background: var(--c-teal-50);
}

.palette-preview--compound[b-959uifpxrg] {
    color: var(--c-amber-deep);
    background: var(--c-amber-50);
}

.palette-preview-label[b-959uifpxrg] {
    font-family: var(--font-body);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 10.5px;
    opacity: 0.8;
}

.palette-preview-args[b-959uifpxrg] {
    color: var(--c-fg3);
}

.palette-list[b-959uifpxrg] {
    list-style: none;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
}

.palette-item[b-959uifpxrg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s var(--ease-standard);
}

.palette-item:hover[b-959uifpxrg] {
    background: var(--c-hover);
}

.palette-item--selected[b-959uifpxrg] {
    background: var(--c-teal-50);
}

.palette-item-name[b-959uifpxrg] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--c-fg1);
}

.palette-item-id[b-959uifpxrg] {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-fg4);
}

.palette-item-key[b-959uifpxrg] {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-fg3);
    border: 1px solid var(--c-border);
    border-radius: 4px;
    padding: 1px 6px;
}

.palette-feedback[b-959uifpxrg] {
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-fg2);
    border-top: 1px solid var(--c-border);
}

.palette-feedback--error[b-959uifpxrg] {
    color: var(--c-danger-deep);
    background: var(--c-danger-50);
}

.palette-footer[b-959uifpxrg] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--c-border);
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--c-fg4);
}

.palette-footer kbd[b-959uifpxrg] {
    font-family: var(--font-mono);
    border: 1px solid var(--c-border);
    border-radius: 3px;
    padding: 1px 4px;
    margin: 0 1px;
}
/* /Components/Shared/ScriptBuilder.razor.rz.scp.css */
/* Recycler.IQ.Simulator/Components/Shared/ScriptBuilder.razor.css
   Scoped styles for ScriptBuilder. RIQSIM-718/-732 re-skin: var(--c-*) console design tokens
   only (no --riq-* aliases, no hex fallbacks) — matches CommandBar/Palette/InsertMoneySheet's
   token convention. */

.script-builder[b-2ozlodfrai] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.script-builder__library[b-2ozlodfrai] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.script-builder__editing-badge[b-2ozlodfrai] {
    font-size: 0.8125rem;
    color: var(--c-fg1);
    background-color: var(--c-app);
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    padding: 0.125rem 0.5rem;
}

.script-builder__meta[b-2ozlodfrai] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.script-builder__error[b-2ozlodfrai] {
    color: var(--c-danger-deep);
    background-color: var(--c-danger-50);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    border-left: 3px solid var(--c-danger);
    font-size: 0.875rem;
}

.script-builder__steps[b-2ozlodfrai] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    padding: 0.5rem;
    background-color: var(--c-app);
}

.script-builder__empty[b-2ozlodfrai] {
    color: var(--c-fg3);
    font-style: italic;
    margin: 0;
    padding: 0.5rem 0;
}

.script-builder__step[b-2ozlodfrai] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background-color: var(--c-card);
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    cursor: grab;
    transition: border-top 0.08s ease;
}

.script-builder__step:active[b-2ozlodfrai] {
    cursor: grabbing;
}

.script-builder__step.drag-over[b-2ozlodfrai] {
    border-top: 3px solid var(--c-teal);
}

.drag-handle[b-2ozlodfrai] {
    color: var(--c-fg3);
    font-size: 1rem;
    cursor: grab;
    user-select: none;
}

.step-num[b-2ozlodfrai] {
    font-weight: 700;
    color: var(--c-fg1);
    min-width: 2.5rem;
}

.step-summary[b-2ozlodfrai] {
    flex: 1;
    color: var(--c-fg2);
    font-size: 0.875rem;
}

.script-builder__actions[b-2ozlodfrai] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.script-builder__editor[b-2ozlodfrai] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    background-color: var(--c-card);
}

.editor-row[b-2ozlodfrai], .editor-params[b-2ozlodfrai], .editor-actions[b-2ozlodfrai], .stack-row[b-2ozlodfrai] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.editor-row label[b-2ozlodfrai], .editor-params label[b-2ozlodfrai] {
    font-size: 0.875rem;
    color: var(--c-fg2);
    font-weight: 500;
}

.script-builder__no-params[b-2ozlodfrai] {
    color: var(--c-fg3);
    font-style: italic;
    margin: 0;
}

.stack-editor[b-2ozlodfrai] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    width: 100%;
}

/* ── RIQSIM-489: InvokeCommand param grid + NAK row ─────────────────────── */

.invoke-param-grid[b-2ozlodfrai] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 0.5rem;
    align-items: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: var(--c-card);
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    margin-top: 0.25rem;
}

.invoke-param-label[b-2ozlodfrai] {
    font-size: 0.875rem;
    color: var(--c-fg2);
    font-weight: 500;
    white-space: nowrap;
}

.invoke-nak-row[b-2ozlodfrai] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.375rem;
    padding: 0.375rem 0.5rem;
    border-top: 1px solid var(--c-border-strong);
    color: var(--c-fg1);
    font-size: 0.875rem;
}

.invoke-placeholder[b-2ozlodfrai] {
    font-size: 0.8125rem;
    color: var(--c-fg3);
    font-style: italic;
}

/* ── JSON preview modal ──────────────────────────────────────────────────── */

.json-preview-overlay[b-2ozlodfrai] {
    position: fixed;
    inset: 0;
    background-color: var(--c-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.json-preview-dialog[b-2ozlodfrai] {
    background-color: var(--c-card);
    border-radius: 6px;
    width: min(720px, 90vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-4);
}

.json-preview-header[b-2ozlodfrai] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--c-navy);
    color: var(--c-oninv);
    border-radius: 6px 6px 0 0;
}

.json-preview-body[b-2ozlodfrai] {
    margin: 0;
    padding: 1rem;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--c-fg2);
    white-space: pre;
}
/* /Components/Shared/ScriptRunnerPanel.razor.rz.scp.css */
/* Recycler.IQ.Simulator/Components/Shared/ScriptRunnerPanel.razor.css
   Scoped styles for ScriptRunnerPanel. RIQSIM-718/-732 re-skin: var(--c-*) console design
   tokens only (no --riq-* aliases, no hex fallbacks) — matches CommandBar/Palette/
   InsertMoneySheet's token convention. */

.script-runner-panel[b-kgf1d83nha] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ── Tabs (Library / Builder) ─────────────────────────────────────────────── */

.script-runner-panel__tabs[b-kgf1d83nha] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-border-strong);
}

.script-runner-panel__tab[b-kgf1d83nha] {
    background: transparent;
    border: 0;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--c-fg3);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.script-runner-panel__tab:hover[b-kgf1d83nha] {
    color: var(--c-teal);
}

.script-runner-panel__tab--active[b-kgf1d83nha] {
    color: var(--c-teal);
    border-bottom-color: var(--c-teal);
    font-weight: 600;
}

/* ── Toolbar ──────────────────────────────────────────────────────────────── */

.script-runner-panel__toolbar[b-kgf1d83nha] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ── Script meta (name + description) ───────────────────────────────────── */

.script-runner-panel__meta[b-kgf1d83nha] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    font-size: 0.875rem;
}

.script-name[b-kgf1d83nha] {
    font-weight: 600;
    color: var(--c-fg1);
}

.script-desc[b-kgf1d83nha] {
    color: var(--c-fg3);
    font-style: italic;
}

/* ── Step indicator (live "Step X of Y") ──────────────────────────────────── */

.script-runner-panel__step-indicator[b-kgf1d83nha] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-teal);
    padding: 0.25rem 0.5rem;
    background-color: var(--c-app);
    border-left: 3px solid var(--c-teal);
    border-radius: 4px;
}

/* ── Step log container ───────────────────────────────────────────────────── */

.script-runner-panel__log[b-kgf1d83nha] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--c-border-strong);
    border-radius: 4px;
    padding: 0.5rem;
    background-color: var(--c-sunken);
}

.script-runner-panel__empty[b-kgf1d83nha] {
    color: var(--c-fg3);
    font-style: italic;
    margin: 0;
    padding: 0.5rem 0;
}

/* ── Step log entry ───────────────────────────────────────────────────────── */

.step-log-entry[b-kgf1d83nha] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    align-items: baseline;
}

.step-log-entry--pass[b-kgf1d83nha] {
    background-color: var(--c-green-50);
    border-left: 3px solid var(--c-green);
}

.step-log-entry--fail[b-kgf1d83nha] {
    background-color: var(--c-danger-50);
    border-left: 3px solid var(--c-danger);
}

.step-index[b-kgf1d83nha] {
    font-weight: 700;
    color: var(--c-fg1);
    min-width: 2.5rem;
}

.step-desc[b-kgf1d83nha] {
    flex: 1;
    color: var(--c-fg2);
}

.step-result[b-kgf1d83nha] {
    font-weight: 700;
    min-width: 3rem;
}

.step-log-entry--pass .step-result[b-kgf1d83nha] {
    color: var(--c-green);
}

.step-log-entry--fail .step-result[b-kgf1d83nha] {
    color: var(--c-danger-deep);
}

.step-error[b-kgf1d83nha] {
    width: 100%;
    color: var(--c-danger-deep);
    font-size: 0.75rem;
    font-style: italic;
    padding-left: 3.5rem; /* indent under step-index */
}
/* /Components/Shared/StateMapView.razor.rz.scp.css */
/* StateMapView.razor.css — RIQSIM-736 Live "State map" tab: deposit-path chip-chain, branches,
   the static "other paths" reference grid, and the force-transition chip row.
   Layout/typography lifted 1:1 from design-simulator-console.dc.html:726-792 onto the --c-* tokens
   declared in wwwroot/app.css (RIQSIM-716) — --c-* only, no raw hex, no --riq-*. */

.state-map-card[b-8kv1bdxy24] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.state-map-header[b-8kv1bdxy24] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    background: var(--c-sunken);
    border-bottom: 1px solid var(--c-border);
}

.state-map-eyebrow[b-8kv1bdxy24] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg1);
}

.state-map-header-caption[b-8kv1bdxy24] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.state-map-body[b-8kv1bdxy24] {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.state-map-banner[b-8kv1bdxy24] {
    font-family: var(--font-body);
    font-size: 12.5px;
    padding: 9px 13px;
    border-radius: 6px;
    margin-bottom: 4px;
}

.state-map-banner-danger[b-8kv1bdxy24] {
    background: var(--c-danger-50);
    border: 1px solid var(--c-danger-200);
    color: var(--c-danger-deep);
}

.state-map-section-title[b-8kv1bdxy24] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg3);
}

.state-map-divider[b-8kv1bdxy24] {
    height: 1px;
    background: var(--c-sunken);
    margin: 8px 0;
}

/* ── Chip rows (deposit path + branches) ────────────────────────────────── */

.state-map-chip-row[b-8kv1bdxy24] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.state-map-chip[b-8kv1bdxy24] {
    font-family: var(--font-mono);
    font-size: 12.5px;
    padding: 9px 13px;
    border-radius: 6px;
    background: var(--c-app);
    border: 1px solid var(--c-border);
    color: var(--c-fg3);
}

.state-map-chip-current[b-8kv1bdxy24] {
    font-weight: 600;
    background: var(--c-amber-50);
    border: 2px solid var(--c-amber);
    color: var(--c-amber-deep);
    box-shadow: 0 0 0 4px var(--c-amber-200);
}

.state-map-chip-branch[b-8kv1bdxy24] {
    padding: 8px 12px;
    background: var(--c-card);
}

.state-map-chip-danger[b-8kv1bdxy24] {
    background: var(--c-danger-50);
    border: 1px solid var(--c-danger-200);
    color: var(--c-danger-deep);
}

.state-map-arrow[b-8kv1bdxy24] {
    color: var(--c-fg4);
}

.state-map-annotation[b-8kv1bdxy24] {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-fg4);
}

.state-map-dot[b-8kv1bdxy24] {
    color: var(--c-fg4);
}

/* ── Other paths grid ────────────────────────────────────────────────────── */

.state-map-other-paths[b-8kv1bdxy24] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.state-map-other-path-card[b-8kv1bdxy24] {
    border: 1px solid var(--c-border);
    border-radius: 6px;
    padding: 11px 13px;
}

.state-map-other-path-title[b-8kv1bdxy24] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--c-fg1);
}

.state-map-other-path-detail[b-8kv1bdxy24] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg3);
    margin-top: 4px;
}

/* ── Reachable-from-here / force row ─────────────────────────────────────── */

.state-map-reachable-row[b-8kv1bdxy24] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 11px 13px;
    background: var(--c-app);
    border: 1px solid var(--c-border);
    border-radius: 6px;
    flex-wrap: wrap;
}

.state-map-reachable-label[b-8kv1bdxy24] {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-fg2);
}

.state-map-reachable-none[b-8kv1bdxy24] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg4);
}

.state-map-reachable-chip[b-8kv1bdxy24] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-teal-deep);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 4px;
}

.state-map-reachable-chip:hover[b-8kv1bdxy24] {
    background: var(--c-hover);
}

.state-map-reachable-chip-danger[b-8kv1bdxy24] {
    color: var(--c-danger-deep);
}

.state-map-spacer[b-8kv1bdxy24] {
    flex: 1;
}

.state-map-hint[b-8kv1bdxy24] {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-fg4);
}
/* /Components/Shared/ThemeSwitch.razor.rz.scp.css */
/* ThemeSwitch.razor.css — scoped styles for the top-bar Dark/Light segmented control. */

.theme-switch[b-05ub5tys14] {
    display: flex;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--c-oninv) 10%, transparent);
}

.theme-switch-seg[b-05ub5tys14] {
    appearance: none;
    border: none;
    background: transparent;
    color: color-mix(in srgb, var(--c-oninv) 70%, transparent);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.theme-switch-seg:hover[b-05ub5tys14] {
    color: var(--c-oninv);
}

.theme-switch-seg--active[b-05ub5tys14] {
    background: var(--c-navy-hover);
    color: var(--c-oninv);
}
/* /Components/Shared/TimelineView.razor.rz.scp.css */
/* TimelineView.razor.css — RIQSIM-735 Live Timeline: five swimlanes over a pannable/selectable
   time window. Geometry and typography lifted 1:1 from
   design-simulator-console.dc.html:665-724 onto the --c-* tokens declared in wwwroot/app.css
   (RIQSIM-716). No raw hex, no --riq-* — --c-* only.
   The mockup's escrow fill uses a raw rgba(47,143,79,…) ramp; the equivalent token steps
   --c-green-50 → --c-green-200 are used in its place. */

.timeline-card[b-so86edhua6] {
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.timeline-header[b-so86edhua6] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 20px;
    background: var(--c-sunken);
    border-bottom: 1px solid var(--c-border);
}

.timeline-eyebrow[b-so86edhua6] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-fg1);
}

.timeline-header-caption[b-so86edhua6] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-fg3);
}

.timeline-spacer[b-so86edhua6] {
    flex: 1;
}

.timeline-live[b-so86edhua6] {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-teal-deep);
    white-space: nowrap;
}

.timeline-copied[b-so86edhua6] {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-green);
    white-space: nowrap;
}

.timeline-reset-btn[b-so86edhua6] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--c-border-strong);
    background: var(--c-card);
    color: var(--c-fg2);
    cursor: pointer;
    white-space: nowrap;
}

.timeline-reset-btn:hover[b-so86edhua6] {
    background: var(--c-hover);
    color: var(--c-fg1);
}

/* ── Grid ────────────────────────────────────────────────────────────────── */

.timeline-body[b-so86edhua6] {
    padding: 20px;
}

.timeline-grid[b-so86edhua6] {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 0 14px;
}

.timeline-lane-label[b-so86edhua6] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-fg1);
    height: 44px;
    display: flex;
    align-items: center;
}

.timeline-axis-label[b-so86edhua6] {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: 11.5px;
    color: var(--c-fg4);
    height: 26px;
}

/* ── Axis / scrub strip ──────────────────────────────────────────────────── */

.timeline-axis[b-so86edhua6] {
    position: relative;
    height: 26px;
    border-bottom: 1px solid var(--c-border);
    cursor: col-resize;
    user-select: none;
}

/* The equal-width cells that make drag-to-select possible with no JS: each cell's index IS its
   horizontal fraction of the window (see TimelineView.razor.cs SelectCellCount). */
.timeline-axis-cells[b-so86edhua6] {
    position: absolute;
    inset: 0;
    display: flex;
}

.timeline-axis-cell[b-so86edhua6] {
    flex: 1 1 0;
    height: 100%;
}

.timeline-axis-drag[b-so86edhua6] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: var(--c-blue-50);
    border-left: 1px solid var(--c-blue-200);
    border-right: 1px solid var(--c-blue-200);
    pointer-events: none;
}

.timeline-axis-ticks[b-so86edhua6] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg4);
    pointer-events: none;
}

/* ── Lanes ───────────────────────────────────────────────────────────────── */

.timeline-lane[b-so86edhua6] {
    position: relative;
    height: 44px;
    border-bottom: 1px solid var(--c-border);
    overflow: hidden;
}

.timeline-lane-sensors[b-so86edhua6] {
    height: 52px;
}

.timeline-lane-last[b-so86edhua6] {
    border-bottom: none;
}

.timeline-lane-empty[b-so86edhua6] {
    position: absolute;
    left: 0;
    top: 14px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--c-fg4);
}

/* ── Wire blocks ─────────────────────────────────────────────────────────── */

.timeline-block[b-so86edhua6] {
    position: absolute;
    top: 11px;
    height: 22px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.timeline-block-in[b-so86edhua6] {
    background: var(--c-blue-50);
    border: 1px solid var(--c-blue-200);
    color: var(--c-blue);
    cursor: copy;
}

.timeline-block-out[b-so86edhua6] {
    background: var(--c-teal-50);
    border: 1px solid var(--c-teal-200);
    color: var(--c-teal-deep);
    cursor: copy;
}

.timeline-block-in:hover[b-so86edhua6],
.timeline-block-out:hover[b-so86edhua6] {
    box-shadow: var(--shadow-1);
}

/* ── State lane ──────────────────────────────────────────────────────────── */

.timeline-state-span[b-so86edhua6] {
    min-width: 0;
}

.timeline-state-neutral[b-so86edhua6] {
    background: var(--c-app);
    border: 1px solid var(--c-border);
    color: var(--c-fg3);
}

.timeline-state-teal[b-so86edhua6] {
    background: var(--c-teal-50);
    border: 1px solid var(--c-teal-200);
    color: var(--c-teal-deep);
}

.timeline-state-amber[b-so86edhua6] {
    background: var(--c-amber-50);
    border: 1px solid var(--c-amber-200);
    color: var(--c-amber-deep);
}

.timeline-state-danger[b-so86edhua6] {
    background: var(--c-danger-50);
    border: 1px solid var(--c-danger-200);
    color: var(--c-danger-deep);
}

/* ── Sensors lane ────────────────────────────────────────────────────────── */

.timeline-sensor-row[b-so86edhua6] {
    position: relative;
    height: 19px;
    margin-top: 5px;
}

.timeline-sensor-row-label[b-so86edhua6] {
    position: absolute;
    left: 0;
    top: 3px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--c-fg4);
    z-index: 1;
}

.timeline-sensor-bar[b-so86edhua6] {
    position: absolute;
    top: 5px;
    height: 8px;
    min-width: 2px;
    border-radius: 2px;
    background: var(--c-teal-strong);
}

/* ── Escrow lane ─────────────────────────────────────────────────────────── */

.timeline-escrow-fill[b-so86edhua6] {
    position: absolute;
    right: 0;
    top: 14px;
    bottom: 10px;
    background: linear-gradient(90deg, var(--c-green-50), var(--c-green-200));
    border-left: 1px solid var(--c-green);
}

.timeline-escrow-value[b-so86edhua6] {
    position: absolute;
    right: 6px;
    top: 14px;
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--c-green);
}

/* ── Legend ──────────────────────────────────────────────────────────────── */

.timeline-legend[b-so86edhua6] {
    display: flex;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--c-border);
    flex-wrap: wrap;
}

.timeline-legend-text[b-so86edhua6] {
    font-family: var(--font-body);
    font-size: 12.5px;
    color: var(--c-fg3);
}

.timeline-legend-key[b-so86edhua6] {
    font-family: var(--font-mono);
    color: var(--c-fg2);
}