/* Generated by scripts/sync_web_design.py. Edit workbench tokens or components.css. */
:root {
    --argo-bg: #0D0F10;
    --argo-surface: #17191B;
    --argo-surface-alt: #1F2224;
    --argo-border: #33373A;
    --argo-border-subtle: #24272A;
    --argo-border-strong: #4A4F53;
    --argo-grid: #1B1E20;
    --argo-text-primary: #EDEAE4;
    --argo-text-secondary: #9AA0A6;
    --argo-text-disabled: #8B9196;
    --argo-accent: #F2650C;
    --argo-accent-hover: #FF7A1F;
    --argo-accent-active: #C94F00;
    --argo-accent-muted: rgba(242, 101, 12, 0.156863);
    --argo-focus-ring: #FF9142;
    --argo-on-accent: #1A1200;
    --argo-success: #4CAF6D;
    --argo-success-hover: #5FC27F;
    --argo-success-active: #3E9259;
    --argo-success-muted: rgba(76, 175, 109, 0.141176);
    --argo-warning: #E8B23A;
    --argo-error: #E5484D;
    --argo-error-hover: #F2686C;
    --argo-error-active: #B93A3F;
    --argo-error-muted: rgba(229, 72, 77, 0.156863);
    --argo-info: #4A90D9;
    --argo-neutral-muted: rgba(255, 255, 255, 0.050980);
    --argo-flag: #A78BE8;
    --argo-warning-muted: rgba(232, 178, 58, 0.141176);
    --argo-caption: 11px;
    --argo-body: 13px;
    --argo-title: 15px;
    --argo-key: 18px;
    --argo-display: 22px;
    --argo-hero: 52px;
    --argo-card-insets: 6px 12px 6px 12px;
    --argo-card-gap: 6px;
}
/* Shared web counterparts of the workbench cards, action controls and status pills. */
@font-face { font-family: Rajdhani; font-weight: 600; font-display: swap; src: url(rajdhani-600.woff2) format("woff2"); }
@font-face { font-family: Rajdhani; font-weight: 700; font-display: swap; src: url(rajdhani-700.woff2) format("woff2"); }
@font-face { font-family: JetBrains; font-weight: 100 800; font-display: swap; src: url(jetbrains-mono.woff2) format("woff2"); }
:root {
    --argo-heading: Rajdhani, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --argo-mono: JetBrains, ui-monospace, "SFMono-Regular", Consolas, monospace;
    --argo-prose: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --argo-control-height: 30px;
    --argo-field-height: 32px;
    --argo-primary-height: 34px;
}
.argo-ui, .argo-ui * { box-sizing: border-box; }
body.argo-ui { margin: 0; background: var(--argo-bg); color: var(--argo-text-primary); font: var(--argo-body)/1.45 var(--argo-prose); }
.argo-ui h1, .argo-ui h2, .argo-ui h3 { font-family: var(--argo-heading); font-weight: 600; }
.argo-ui h2, .argo-ui h3, .argo-ui .section-heading h2 { font-size: var(--argo-title); }
.argo-ui .card, .argo-ui .panel, body.argo-ui .metric, .argo-ui .login-card {
    background: var(--argo-surface-alt);
    border: 1px solid var(--argo-border-subtle);
    border-radius: 8px;
    padding: var(--argo-card-insets);
    min-width: 0;
}
.argo-ui .login-card, .argo-ui.login .card { padding: 16px; border-left: 3px solid var(--argo-accent); }
.argo-ui .card.ok { border-left: 3px solid var(--argo-success); }
.argo-ui .card.caution, .argo-ui .metric.warning { border-left: 3px solid var(--argo-warning); }
.argo-ui .card.error, .argo-ui .metric.critical { border-left: 3px solid var(--argo-error); }
.argo-ui .health { padding: var(--argo-card-insets); border-left-width: 3px; }
.argo-ui .metric:hover { border-color: var(--argo-accent); }
.argo-ui .metric:active { background: var(--argo-surface); }
.argo-ui .event:hover { background: var(--argo-neutral-muted); }
/* Keep the base below selected, primary and disabled variants in the cascade. */
.argo-ui :where(button:not(.metric):not(.event), a.button, nav a, summary, .login-button) {
    font: 600 var(--argo-body)/1.25 var(--argo-heading);
    color: var(--argo-text-primary);
    border: 1px solid var(--argo-text-secondary);
    border-radius: 6px;
    min-height: var(--argo-control-height);
    padding: 5px 12px;
    background: var(--argo-neutral-muted);
}
.argo-ui :where(button:not(.metric):not(.event), a.button, summary):hover {
    border-color: var(--argo-accent); background: var(--argo-surface-alt);
}
.argo-ui :where(button:not(.metric):not(.event), a.button):active { background: var(--argo-border); }
.argo-ui button.primary, .argo-ui a.primary, .argo-ui .login-button {
    background: var(--argo-accent); border-color: var(--argo-accent); color: var(--argo-on-accent);
    min-height: var(--argo-primary-height);
}
.argo-ui button.primary:hover, .argo-ui a.primary:hover, .argo-ui .login-button:hover { background: var(--argo-accent-hover); }
.argo-ui button.primary:active, .argo-ui a.primary:active, .argo-ui .login-button:active { background: var(--argo-accent-active); }
.argo-ui button.danger { color: var(--argo-error); border-color: var(--argo-error); background: var(--argo-error-muted); }
.argo-ui button:disabled, .argo-ui button.primary:disabled, .argo-ui button.danger:disabled {
    color: var(--argo-text-disabled); border-color: var(--argo-border-subtle); background: var(--argo-surface); cursor: default;
}
.argo-ui nav a, .argo-ui nav button, .argo-ui button.link { border-color: transparent; background: transparent; color: var(--argo-text-secondary); }
.argo-ui nav a[aria-current=page], .argo-ui nav button[aria-pressed=true] {
    color: var(--argo-accent); border-color: var(--argo-accent); background: var(--argo-accent-muted);
}
.argo-ui :focus-visible { outline: 2px solid var(--argo-focus-ring); outline-offset: 2px; }
.argo-ui input:not([type=checkbox]):not([type=hidden]), .argo-ui select {
    font: var(--argo-body)/1.45 var(--argo-mono);
    background: var(--argo-surface); color: var(--argo-text-primary); border: 1px solid var(--argo-border);
    border-radius: 4px; min-height: var(--argo-field-height);
}
.argo-ui .chip, .argo-ui .tag, .argo-ui .read-only, .argo-ui .state {
    display: inline-flex; align-items: center; width: auto; flex-shrink: 0;
    font: 600 var(--argo-caption)/1.45 var(--argo-mono);
    padding: 2px 8px; border: 1px solid transparent; border-radius: 999px;
    background: var(--argo-neutral-muted); color: var(--argo-text-secondary);
}
.argo-ui .chip.ok, .argo-ui .state.healthy, .argo-ui .state.info { color: var(--argo-success); background: var(--argo-success-muted); }
.argo-ui .chip.bad, .argo-ui .state.critical, .argo-ui .state.unavailable { color: var(--argo-error); background: var(--argo-error-muted); }
.argo-ui .state.warning, .argo-ui .state.stale, .argo-ui .state.degraded, .argo-ui .state.warming {
    color: var(--argo-warning); background: var(--argo-warning-muted);
}
.argo-ui .eyebrow, .argo-ui header p, .argo-ui .section-heading > span,
.argo-ui .chart-summary, .argo-ui .chart-time, .argo-ui .event-meta, .argo-ui footer,
.argo-ui #freshness { font-size: var(--argo-caption); }
.argo-ui .metric .value { font-size: var(--argo-key); }
.argo-ui .metric .label { font-family: var(--argo-heading); font-weight: 600; }
.argo-ui form label, .argo-ui .choice, .argo-ui #filters { font-size: var(--argo-body); }
.argo-ui .muted, .argo-ui .panel-note, .argo-ui .empty, .argo-ui .health-note p { font-size: var(--argo-body); }
.argo-ui .service-detail, .argo-ui #alice-stats, .argo-ui .metric small { font-size: var(--argo-body); }
.argo-ui .node { min-width: 0; max-width: 100%; }
.argo-ui .node select { max-width: 100%; text-overflow: ellipsis; }
@media (any-pointer: coarse) { :root { --argo-control-height: 44px; --argo-primary-height: 44px; --argo-field-height: 44px; } }
.argo-ui .login-button, .argo-ui.login .card .primary { min-height: 48px; }
@media (max-width: 540px) {
    .argo-ui .node { width: 100%; flex-direction: column; align-items: stretch; gap: 4px; }
    .argo-ui .node select { min-width: 0; width: 100%; }
}