.production-workspace { width: 100%; max-width: 1800px; margin: 0 auto; color: var(--text); font: 13px var(--font-ui); }
.production-workspace button, .production-dialog button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font: inherit; cursor: pointer; }
.production-workspace button:hover, .production-dialog button:hover { background: var(--hover); }
.production-workspace button.primary, .production-dialog button.primary { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.production-workspace button:disabled, .production-dialog button:disabled { opacity: .5; cursor: default; }
.production-workspace .studio-icon { width: 17px; height: 17px; }
.production-connection { display: flex; align-items: end; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
.production-connection .production-field:first-child { flex: 1; max-width: 440px; }
.production-field { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.production-field input, .production-field select, .production-yaml { box-sizing: border-box; width: 100%; min-width: 0; min-height: 34px; border: 1px solid var(--field-border); border-radius: 5px; background: var(--input); color: var(--text); font: 13px var(--font-ui); padding: 7px 9px; }
.production-connection-state { align-self: center; white-space: nowrap; color: var(--muted); }
.production-hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 10px 0; overflow-wrap: anywhere; }
.production-notice { border: 1px solid var(--border); background: var(--panel-raised); border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.production-notice.is-error { color: var(--error); background: var(--error-bg); border-color: var(--error); }
.production-toolbar, .production-tab-toolbar, .production-detail-heading, .production-editor-toolbar { display: flex; align-items: center; gap: 10px; }
.production-toolbar { padding: 12px 0; }
.production-toolbar h2 { margin: 0 auto 0 0; font-size: 16px; }
.production-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); min-height: 420px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); overflow: hidden; }
.production-list { min-width: 0; border-right: 1px solid var(--border); background: var(--panel-raised); padding: 8px; max-height: 75vh; overflow: auto; }
.production-workspace .production-list-row { display: grid; grid-template-columns: 1fr auto; width: 100%; text-align: left; gap: 6px; margin-bottom: 4px; padding: 11px 9px; border-color: transparent; background: transparent; }
.production-list-row strong { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.production-list-row span { font-size: 11px; color: var(--muted); }
.production-list-row small { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.production-workspace .production-list-row[aria-current="true"] { background: var(--panel); border-color: var(--border-strong); }
.production-pagination { display: flex; gap: 6px; margin-top: 12px; justify-content: space-between; }
.production-detail { padding: 18px; min-width: 0; }
.production-detail-heading { flex-wrap: wrap; }
.production-detail-heading h2 { font-size: 17px; margin: 0; }
.production-id { display: block; font: 11px var(--font-mono); color: var(--muted); margin-top: 6px; }
.production-state, .production-fake { padding: 3px 7px; font-size: 11px; border-radius: 4px; background: var(--panel-raised); color: var(--muted); }
.production-state[data-state="completed"] { color: var(--success); background: var(--success-bg); }
.production-state[data-state="target_unmet"] { color: var(--error); background: var(--error-bg); }
.production-fake { color: var(--warning); background: var(--warning-bg); }
.production-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; padding: 20px 0; }
.production-stats div { display: flex; flex-direction: column; gap: 5px; }
.production-stats strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.production-stats span { font-size: 11px; color: var(--muted); }
.production-table-wrap { overflow: auto; max-height: 54vh; border: 1px solid var(--border); border-radius: 5px; }
.production-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.production-table th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--panel-raised); text-align: left; font-weight: 500; white-space: nowrap; }
.production-table td, .production-table th { padding: 9px 11px; border-bottom: 1px solid var(--border); }
.production-table td { vertical-align: top; overflow-wrap: anywhere; max-width: 320px; }
.production-table tbody tr:last-child td { border-bottom: 0; }
.production-table [data-level="ERROR"] { color: var(--error); font-weight: 600; }
.production-table [data-level="WARN"] { color: var(--warning); font-weight: 600; }
.production-table [data-level="INFO"] { color: var(--info); }
.production-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); margin: 18px 0 12px; overflow: auto; }
.production-workspace .production-tabs button { padding: 9px 2px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); white-space: nowrap; }
.production-workspace .production-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--text); }
.production-tab-toolbar { margin-bottom: 10px; }
.production-tab-toolbar:empty { display: none; }
.production-tab-toolbar h3 { font-size: 13px; margin: 0 auto 0 0; }
.production-result summary { cursor: pointer; color: var(--info); white-space: nowrap; }
.production-result pre { max-width: 420px; max-height: 300px; overflow: auto; font: 11px/1.7 var(--font-mono); white-space: pre-wrap; }
.production-config { font: 12px/1.7 var(--font-mono); padding: 14px; background: var(--panel-raised); overflow: auto; max-height: 55vh; }
.production-table-wrap[data-empty]:not([data-empty=""])::after, .production-list[data-empty]:not([data-empty=""])::after { content: attr(data-empty); display: block; padding: 28px 10px; color: var(--muted); text-align: center; }
.production-dialog { width: min(1100px, calc(100vw - 56px)); max-width: 1100px; max-height: 88vh; padding: 0; font: 13px var(--font-ui); }
.production-dialog > header { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.production-dialog > header h2 { font-size: 17px; }
.production-dialog-body { padding: 16px 20px; overflow: auto; max-height: 65vh; }
.production-dialog-footer { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--border); }
.production-dialog > .production-notice { margin: 8px 20px; }
.production-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.production-form-section { padding-top: 18px; }
.production-service-fields { display: grid; grid-template-columns: 1fr 2fr 1fr 1.3fr auto; gap: 8px; align-items: end; padding: 10px 0; border-top: 1px solid var(--border); }
.production-item-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; padding: 14px 0; border-top: 1px solid var(--border); align-items: end; }
.production-yaml { resize: vertical; min-height: 380px; font: 12px/1.7 var(--font-mono); }
.production-workspace [hidden], .production-dialog [hidden] { display: none !important; }
@media (max-width: 1100px) { .production-layout { grid-template-columns: 190px minmax(0, 1fr); } .production-stats { grid-template-columns: repeat(3, 1fr); } .production-connection { flex-wrap: wrap; } .production-service-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .production-layout { grid-template-columns: 1fr; } .production-list { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--border); } .production-item-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.studio-server-form .scheduler-clear-credential { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.scheduler-clear-credential input { width: 15px; height: 15px; margin: 0; }
.studio-server-form .scheduler-clear-credential[hidden] { display: none; }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-more-wrap { position: relative; z-index: 2; }

/* Scheduler surfaces share the service directory's warm header and quiet resource rows. */
.scheduler-service-mark { display: grid; place-items: center; width: 58px; height: 64px; flex: 0 0 58px; color: #b97417; }
.scheduler-service-mark > svg { display: block; width: 100%; height: 100%; }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-list { grid-template-columns: repeat(auto-fill,minmax(min(100%,510px),1fr)); }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-card { padding: 0; gap: 0; border-radius: 12px; overflow: visible; max-width: 760px; }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-card-header { position: relative; padding: 22px 20px 20px; min-height: 120px; box-sizing: border-box; background: #fff9f0; border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-card-header::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: #f6dfb8; opacity: .35; clip-path: polygon(76% 0,90% 0,67% 100%,53% 100%); }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-identity { position: relative; gap: 14px; }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-identity h2 { font-size: 17px; font-weight: 600; }
.studio-server-directory[data-service-kind="scheduler"] .studio-server-address { font-size: 12px; margin-top: 6px; }
.studio-server-directory[data-service-kind="scheduler"] .studio-simulation-card-footer { display: flex; justify-content: flex-end; border-top: 1px solid var(--border); margin: 0 20px; padding: 13px 0; }
.scheduler-card-body { padding: 17px 20px 15px; }
.scheduler-state-line { display: flex; align-items: center; gap: 10px; }
.scheduler-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.scheduler-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.scheduler-card-body[data-state="idle"] .scheduler-state { color: var(--success); }
.scheduler-card-body[data-state="producing"] .scheduler-state { color: var(--info); }
.scheduler-card-body[data-state="waiting"] .scheduler-state { color: #b37a15; }
.scheduler-card-caption { margin: 7px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scheduler-card-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin: 0; }
.scheduler-card-stats > div { min-width: 0; }
.scheduler-card-stats dt { font-size: 11px; color: var(--muted); white-space: nowrap; }
.scheduler-card-stats dd { margin: 8px 0 0; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.scheduler-card-body[data-state="idle"] .scheduler-card-stats > div:nth-child(-n+2) dd { font-size: 15px; padding: 3px 0 2px; }
.scheduler-card-context { display: flex; gap: 18px; margin-top: 17px; color: var(--muted); font-size: 11px; min-height: 17px; }
.scheduler-card-context > span { display: flex; gap: 7px; }
.scheduler-card-context strong { color: var(--text); font-weight: 500; }
.studio-server-directory[data-service-kind="scheduler"][data-layout="list"] .studio-server-list { grid-template-columns: 1fr; }
.studio-server-directory[data-service-kind="scheduler"][data-layout="list"] .studio-server-card { max-width: none; }

/* Detail page: service context, a bounded navigation pane and a production overview. */
.production-workspace { max-width: none; }
.production-service-heading { display: flex; align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.production-service-heading > button { min-height: 26px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.production-service-heading > button svg { transform: rotate(180deg); }
.production-service-identity { display: flex; align-items: center; gap: 14px; }
.production-service-identity .scheduler-service-mark { width: 48px; height: 50px; flex-basis: 48px; }
.production-service-identity > div { display: flex; flex-direction: column; gap: 6px; }
.production-service-identity strong { font-size: 21px; font-weight: 600; }
.production-service-identity span:not(.scheduler-service-mark) { font-size: 12px; color: var(--muted); }
.scheduler-overview { display: grid; grid-template-columns: minmax(200px,1.2fr) 2fr; gap: 5px 28px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 18px 22px; }
.scheduler-overview .scheduler-state-line { grid-column: 1; grid-row: 1; }
.scheduler-overview .scheduler-card-caption { grid-column: 1; grid-row: 2; margin: 3px 0 0; }
.scheduler-overview .scheduler-card-stats { grid-column: 2; grid-row: 1 / 3; padding-left: 28px; border-left: 1px solid var(--border); }
.scheduler-overview .scheduler-card-context { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 8px; }
.production-toolbar { padding: 22px 0 12px; }
.production-toolbar h2 { font-size: 15px; }
.production-layout { grid-template-columns: 280px minmax(0,1fr); border-radius: 10px; min-height: 570px; }
.production-list { background: var(--panel); padding: 12px; max-height: 78vh; }
.production-list-tools { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-bottom: 15px; }
.production-list-tools input { grid-column: 1 / -1; }
.production-list-tools input, .production-list-tools select, .production-item-search { min-width: 0; border: 1px solid var(--field-border); border-radius: 6px; background: var(--input); color: var(--text); padding: 8px 9px; font: 12px var(--font-ui); }
.production-list-tools > span { align-self: center; font-size: 11px; color: var(--muted); }
.production-workspace .production-list-row { position: relative; grid-template-columns: 1fr; justify-items: start; padding: 13px 12px; margin-bottom: 8px; gap: 9px; border: 1px solid var(--border); border-radius: 8px; }
.production-list-row strong { font-size: 12px; line-height: 1.6; font-weight: 500; }
.production-list-row span { grid-row: 2; padding: 2px 6px; border-radius: 4px; background: var(--panel-raised); }
.production-list-row small { grid-row: 3; }
.production-workspace .production-list-row[aria-current="true"] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); background: var(--panel-raised); }
.production-list-row span[data-state="completed"] { color: var(--success); background: var(--success-bg); }
.production-list-row span[data-state="running"], .production-state[data-state="running"], .production-state[data-state="online"] { color: var(--info); background: var(--info-bg); }
.production-list-row span[data-state="target_unmet"] { color: var(--error); background: var(--error-bg); }
.production-detail { padding: 22px 24px; }
.production-detail-heading h2 { font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.production-id { display: none; }
.production-stats { margin-top: 20px; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); gap: 18px; }
.production-stats strong { font-size: 21px; line-height: 1.4; }
.production-stats div:nth-child(2) strong { color: var(--success); }
.production-stats div:nth-child(3) strong { color: var(--muted); }
.production-tabs { margin-top: 13px; gap: 24px; }
.production-workspace .production-tabs button { padding: 11px 1px; }
.production-section-title { margin: 20px 0 14px; font-size: 13px; font-weight: 600; }
.production-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.production-flow-step { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 16px; background: var(--panel); }
.production-flow-step:not(:last-child)::after { content: '→'; position: absolute; right: -18px; top: 24px; color: var(--muted); }
.production-flow-title { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.production-step-number { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 7px; background: #edf3ff; color: #4376bf; font-size: 12px; font-weight: 600; }
.stage-filter .production-step-number { background: #eaf6ef; color: #32825c; }
.stage-replay .production-step-number { background: #f1edfc; color: #8462b8; }
.production-flow-step > p { color: var(--muted); font-size: 11px; min-height: 32px; line-height: 1.6; margin: 12px 0; }
.production-flow-step dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px 8px; margin: 0; }
.production-flow-step dt { font-size: 11px; color: var(--muted); }
.production-flow-step dd { margin: 5px 0 0; font-size: 18px; font-variant-numeric: tabular-nums; }
.production-flow-step[data-inactive="true"] { background: var(--panel-raised); }
.production-overview-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.production-overview-box { min-width: 0; padding: 16px; border: 1px solid var(--border); border-radius: 8px; }
.production-overview-box h3 { font-size: 13px; margin: 0 0 12px; font-weight: 600; }
.production-overview-box .production-tab-toolbar h3 { margin: 0 auto 0 0; }
.production-overview-box .production-tab-toolbar button { font-size: 11px; padding: 4px 7px; min-height: 27px; }
.production-service-roster { max-height: 230px; overflow: auto; }
.production-roster-row { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 5px 9px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.production-roster-row:last-child { border-bottom: 0; }
.production-roster-row > svg { color: var(--muted); }
.production-roster-row strong { font-size: 12px; font-weight: 500; }
.production-roster-row small { grid-column: 2 / -1; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.production-info-list { margin: 0; }
.production-info-list > div { margin: 15px 0 0; }
.production-info-list dt { color: var(--muted); font-size: 11px; }
.production-info-list dd { margin: 5px 0 0; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.production-item-search { margin-right: auto; }
.production-table tbody tr:hover { background: var(--hover); }

[data-theme="dark"] .studio-server-directory[data-service-kind="scheduler"] .studio-server-card-header { background: #302b23; }
[data-theme="dark"] .studio-server-directory[data-service-kind="scheduler"] .studio-server-card-header::before { background: #685337; }
@media(max-width:1200px) { .production-layout { grid-template-columns: 230px minmax(0,1fr); } .production-detail { padding: 18px; } .production-stats { grid-template-columns: repeat(3,1fr); } .production-flow { gap: 16px; } .production-flow-step { padding: 12px; } .production-flow-step:not(:last-child)::after { right: -14px; } }
@media(max-width:900px) { .production-overview-bottom { grid-template-columns: 1fr; } .scheduler-overview { grid-template-columns: 1fr; } .scheduler-overview .scheduler-card-stats { grid-column: 1; grid-row: 3; padding: 12px 0 0; border: 0; } }
@media(max-width:760px) { .production-layout { grid-template-columns: 1fr; } .production-list { max-height: 260px; } .production-flow { grid-template-columns: 1fr; } .production-flow-step:not(:last-child)::after { display: none; } .scheduler-card-stats { gap: 10px; } .scheduler-card-stats dd { font-size: 16px; } }

/* Compact service workspace: keep the header and section navigation on two lines. */
.production-managed .production-service-heading { flex-direction: row; align-items: center; gap: 14px; margin: 0 0 12px; padding: 0; }
.production-managed .production-service-heading > button { font-size: 0; width: 30px; height: 32px; border: 1px solid var(--border); background: var(--panel); }
.production-managed .production-service-heading > button svg { width: 17px; height: 17px; }
.production-managed .production-service-identity { gap: 10px; min-width: 0; }
.production-managed .production-service-identity strong { font-size: 17px; }
.production-managed .production-service-identity .scheduler-service-mark { width: 38px; height: 40px; flex-basis: 38px; border-radius: 9px; }
.production-managed .production-service-identity .scheduler-service-mark svg { width: 100%; height: 100%; }
.production-managed .production-toolbar { margin-left: auto; padding: 0; }
.production-section-tabs { display: flex; align-items: center; gap: 24px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.production-section-tabs > .scheduler-state { margin-left: auto; font-size: 11px; }
.production-section-tabs > .scheduler-state[data-state="idle"] { color: var(--success); }
.production-section-tabs > .scheduler-state[data-state="producing"] { color: var(--info); }
.production-section-tabs > .scheduler-state[data-state="waiting"] { color: var(--warning); }
.production-workspace .production-section-tabs > button { background: transparent; border: 0; border-radius: 0; border-bottom: 2px solid transparent; padding: 12px 0; color: var(--muted); }
.production-workspace .production-section-tabs > button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.production-managed .production-layout { min-height: min(620px,calc(100vh - 215px)); grid-template-columns: 245px minmax(0,1fr); }
.production-managed .production-detail { padding: 18px; }
.production-managed .production-stats { margin-top: 12px; padding: 12px 0; }
.production-managed .production-stats strong { font-size: 19px; }
.production-managed .production-list-row { gap: 7px; padding: 10px; margin-bottom: 6px; }
.production-managed .production-list-row small { grid-column: 2; grid-row: 2; justify-self: end; }
.production-managed .production-list-row strong { grid-column: 1 / -1; }
.production-managed .production-list-row { grid-template-columns: 1fr auto; }
.production-managed .production-flow-step { padding: 12px 14px; }
.production-managed .production-flow-step > p { min-height: 0; margin: 9px 0 13px; }
.production-managed .production-flow-step dl { gap: 9px; }
.production-managed .production-flow-step dd { font-size: 16px; }
.production-managed .production-overview-bottom { margin-top: 14px; }
.production-managed .production-roster-row { padding: 8px 0; }
.production-managed .production-info-list > div { display: grid; grid-template-columns: 80px minmax(0,1fr); align-items: baseline; gap: 8px; margin-top: 12px; }
.production-managed .production-info-list dd { margin: 0; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 15px; }
.dashboard-heading h2 { font-size: 15px; margin: 0; font-weight: 600; }
.dashboard-heading p { font-size: 11px; color: var(--muted); margin: 5px 0 0; }
.dashboard-heading select { border: 1px solid var(--field-border); border-radius: 6px; background: var(--panel); padding: 8px 10px; color: var(--text); font: 12px var(--font-ui); }
.dashboard-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.dashboard-metric { display: grid; grid-template-columns: 1fr auto; gap: 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); padding: 15px 18px; }
.dashboard-metric > svg { grid-column: 2; grid-row: 1; width: 17px; height: 17px; color: var(--muted); }
.dashboard-metric > span { grid-column: 1; grid-row: 1; color: var(--muted); font-size: 12px; }
.dashboard-metric > strong { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.dashboard-metric > small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.dashboard-metric.metric-trajectory > svg,.dashboard-metric.metric-trajectory > strong { color: #3771c8; }
.dashboard-metric.metric-camera > svg,.dashboard-metric.metric-camera > strong { color: #7961b9; }
.dashboard-main { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 16px; align-items: start; }
.dashboard-charts { min-width: 0; }
.dashboard-panel { border: 1px solid var(--border); border-radius: 9px; background: var(--panel); padding: 17px 18px; min-width: 0; }
.dashboard-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dashboard-panel h3 { font-size: 13px; font-weight: 600; margin: 0; }
.dashboard-panel header small { font-size: 10px; color: var(--muted); }
.dashboard-legend { display: flex; gap: 15px; font-size: 11px; color: var(--muted); }
.dashboard-legend span { display: flex; align-items: center; gap: 6px; }
.dashboard-legend span::before { content: ''; width: 7px; height: 7px; background: #487bd8; border-radius: 2px; }
.dashboard-legend .camera::before { background: #9983cf; }
.dashboard-bar-plot { display: flex; gap: 10px; height: 200px; padding-top: 4px; padding-bottom: 27px; }
.dashboard-y-axis { display: flex; justify-content: space-between; flex-direction: column; width: 35px; flex-shrink: 0; text-align: right; color: var(--muted); font-size: 10px; }
.dashboard-hour-bars { display: grid; grid-template-columns: repeat(var(--hours),minmax(0,1fr)); gap: 3px; flex: 1; min-width: 0; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to top, transparent 0,transparent calc(50% - 1px),var(--border) calc(50% - 1px),var(--border) 50%); }
.production-workspace .dashboard-hour { display: flex; align-items: end; justify-content: center; gap: 2px; height: 100%; min-height: 0; min-width: 0; padding: 0 1px; border: 0; border-radius: 3px 3px 0 0; background: transparent; position: relative; }
.production-workspace .dashboard-hour:hover,.production-workspace .dashboard-hour[aria-pressed="true"] { background: var(--hover); }
.dashboard-hour .dashboard-bar { width: 40%; min-width: 1px; border-radius: 2px 2px 0 0; background: #487bd8; max-height: 100%; }
.dashboard-hour .dashboard-bar.camera { background: #9983cf; }
.dashboard-hour > small { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 400; }
.dashboard-hour[data-missing="true"]::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--warning); position: absolute; bottom: 2px; }
.dashboard-chart-reading { color: var(--muted); font-size: 10px; margin: 9px 0 0; line-height: 1.6; min-height: 16px; font-variant-numeric: tabular-nums; }
.dashboard-lower { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; margin-top: 16px; }
.dashboard-curve svg { display: block; width: 100%; height: 140px; overflow: visible; }
.dashboard-curve-grid { stroke: var(--border); stroke-width: 1; }
.dashboard-curve polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.dashboard-curve .trajectory { stroke: #487bd8; }
.dashboard-curve .camera { stroke: #9983cf; }
.dashboard-work-bars { display: flex; flex-direction: column; gap: 22px; padding: 12px 0; }
.dashboard-work-bars > div { display: grid; grid-template-columns: 65px minmax(0,1fr) 24px; gap: 10px; align-items: center; font-size: 11px; }
.dashboard-work-bars > div > strong { text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.dashboard-work-track { height: 7px; background: var(--panel-raised); border-radius: 4px; overflow: hidden; }
.dashboard-work-track > i { display: block; height: 100%; background: #487bd8; border-radius: 4px; }
.dashboard-work-track > .camera { background: #9983cf; }
.dashboard-work-track > .pending { background: #c7ac75; }
.dashboard-resources > header { flex-wrap: wrap; gap: 5px; }
.dashboard-resource-distribution { display: flex; align-items: center; gap: 24px; padding: 3px 0 17px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.dashboard-resource-donut { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.dashboard-resource-donut strong { display: grid; place-items: center; background: var(--panel); width: 67px; height: 67px; border-radius: 50%; font-size: 21px; font-weight: 600; }
.dashboard-resource-legend { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.dashboard-resource-legend > span { display: flex; gap: 7px; align-items: center; font-size: 11px; color: var(--muted); }
.dashboard-resource-legend > span::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--state-color); }
.dashboard-resource-legend strong { margin-left: auto; color: var(--text); font-weight: 500; }
.dashboard-resource-tabs { display: flex; gap: 16px; }
.production-workspace .dashboard-resource-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); padding: 9px 0; font-size: 12px; }
.production-workspace .dashboard-resource-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.dashboard-resource-search { margin: 12px 0 4px; width: 100%; padding: 8px 9px; border-radius: 6px; border: 1px solid var(--field-border); background: var(--input); color: var(--text); font: 11px var(--font-ui); box-sizing: border-box; }
.dashboard-resource-list { max-height: 244px; overflow: auto; }
.dashboard-resource-row { display: grid; grid-template-columns: 17px minmax(0,1fr) auto; gap: 6px 9px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.dashboard-resource-row:last-child { border-bottom: 0; }
.dashboard-resource-row > svg { color: var(--muted); width: 17px; height: 17px; }
.dashboard-resource-row > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dashboard-resource-row strong { font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.dashboard-resource-row small { font-size: 10px; color: var(--muted); overflow-wrap: anywhere; }
.dashboard-resource-row > p { grid-column: 2 / -1; color: var(--muted); font-size: 10px; margin: 0; overflow-wrap: anywhere; }
.dashboard-resource-state { font-size: 10px; color: var(--muted); background: var(--panel-raised); border-radius: 4px; padding: 3px 5px; }
.dashboard-resource-state[data-state="busy"] { color: var(--info); background: color-mix(in srgb,var(--info) 8%,transparent); }
.dashboard-resource-state[data-state="ready"] { color: var(--success); background: var(--success-bg); }
.dashboard-resource-state[data-state="unavailable"] { color: var(--warning); background: var(--warning-bg); }
.dashboard-resource-note { color: var(--muted); font-size: 10px; line-height: 1.6; margin: 12px 0 0; }
.dashboard-coverage { color: var(--warning); font-size: 11px; margin: -4px 0 12px; }
.dashboard-unavailable { padding: 20px; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 9px; }
.dashboard-empty { color: var(--muted); text-align: center; font-size: 12px; padding: 28px 0; }
@media(min-width:1600px) { .dashboard-main { grid-template-columns: minmax(0,1fr) 390px; } .dashboard-bar-plot { height: 235px; } .dashboard-resource-list { max-height: 275px; } }
@media(max-width:1100px) { .dashboard-main { grid-template-columns: minmax(0,1fr) 290px; } .dashboard-lower { grid-template-columns: 1fr; } .dashboard-metric { padding: 12px; } .dashboard-metric > strong { font-size: 21px; } .production-managed .production-layout { grid-template-columns: 210px minmax(0,1fr); } }
@media(max-width:850px) { .dashboard-main { grid-template-columns: 1fr; } .dashboard-metrics { grid-template-columns: repeat(2,1fr); } .dashboard-lower { grid-template-columns: 1fr 1fr; } .production-managed .production-layout { grid-template-columns: 1fr; } .production-managed .production-service-heading { flex-wrap: wrap; } }
@media(max-width:580px) { .dashboard-lower { grid-template-columns: 1fr; } .dashboard-panel > header { flex-wrap: wrap; } .dashboard-metric > strong { font-size: 18px; } }
.production-managed { container-type: inline-size; container-name: production; }
.production-workspace .dashboard-heading select { width: 160px; flex: 0 0 160px; max-width: 160px; }
.dashboard-heading > div { flex: 1; }
.dashboard-fake-resource { margin-left: 6px; font-size: 9px; color: var(--warning); font-weight: 400; }
@container production (max-width: 1000px) { .dashboard-main { grid-template-columns: minmax(0,1fr) 290px; gap: 12px; } .dashboard-lower { gap: 12px; } .dashboard-panel { padding: 15px; } .dashboard-panel > header { gap: 8px; } .dashboard-legend { gap: 10px; font-size: 10px; } .dashboard-resources > header { flex-direction: column; align-items: start; } .dashboard-work-bars > div { grid-template-columns: 55px minmax(0,1fr) 20px; gap: 6px; } .dashboard-metric { padding: 13px 14px; } }
@container production (max-width: 760px) { .dashboard-main { grid-template-columns: 1fr; } .dashboard-lower { grid-template-columns: 1fr 1fr; } .dashboard-resource-list { max-height: 220px; } .dashboard-resource-distribution { gap: 25px; } .dashboard-resource-legend { max-width: 260px; } }
@container production (min-width: 700px) { .production-stats { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; } .production-stats strong { font-size: 18px; } .production-stats span { font-size: 10px; } }
/* Pipeline history and run inspector */
.production-managed .production-layout { grid-template-columns: 280px minmax(0,1fr); align-items: start; background: var(--panel-raised); }
.production-managed .production-list { position: sticky; top: 0; max-height: calc(100vh - 220px); min-height: 560px; overflow: auto; padding: 14px; }
.production-managed .production-detail { background: var(--panel); padding: 22px; min-height: 680px; border-left: 1px solid var(--border); }
.production-workspace .production-list-row { grid-template-columns: 1fr auto; gap: 10px; padding: 15px 13px; margin-bottom: 10px; background: var(--panel); }
.production-workspace .production-list-row > strong { grid-column: 1 / -1; font-size: 13px; font-weight: 600; line-height: 1.55; }
.production-workspace .production-list-row > small { grid-row: 2; grid-column: 2; justify-self: end; font-size: 10px; }
.production-workspace .production-list-row > span { grid-row: 2; grid-column: 1; justify-self: start; font-size: 10px; }
.production-workspace .production-list-row[aria-current="true"] { background: var(--panel); border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent),0 3px 12px #00000006; }
.production-list-row .pipeline-history-meta { grid-column: 1 / -1; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; }
.production-list-row .pipeline-history-meta span { display: flex; flex-direction: column; gap: 3px; padding: 0; background: none; border-radius: 0; }
.production-list-row .pipeline-history-meta strong { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.production-list-row .pipeline-history-meta small { font-size: 10px; font-weight: 400; }
.pipeline-history-progress { grid-column: 1 / -1; height: 3px; width: 100%; background: var(--border); display: flex; border-radius: 3px; overflow: hidden; }
.production-list-row .pipeline-history-progress i { height: 100%; }
.pipeline-history-progress .success { background: var(--success); }.pipeline-history-progress .failed { background: var(--error); }.pipeline-history-progress .active { background: var(--info); }
.pipeline-history-time { grid-column: 1 / -1; color: var(--muted); font-size: 10px; }
.production-detail .production-id { font-family: var(--font-mono); font-size: 10px; opacity: .75; margin: 5px 0 20px; }
.production-detail .production-stats { gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; padding: 12px 0; margin: 16px 0 20px; }
.production-detail .production-stats > div { padding: 0 14px; background: none; border: 0; border-right: 1px solid var(--border); border-radius: 0; }
.production-detail .production-stats > div:last-child { border-right: 0; }
.production-detail .production-stats strong { font-size: 20px; font-weight: 600; }
.production-detail .production-stats span { font-size: 11px; }
.production-tab-panel > .production-tab-toolbar:empty { display: none; }
.pipeline-run-inspector { display: grid; gap: 18px; --chart-blue: #4a7bd7; --chart-purple: #9b7ad8; }
.run-analysis-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.run-analysis-totals > div { display: flex; flex-direction: column; gap: 9px; padding: 15px 17px; background: var(--panel-raised); border-radius: 8px; border: 1px solid var(--border); }
.run-analysis-totals span { color: var(--muted); font-size: 11px; }
.run-analysis-totals strong { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.run-analysis-totals > div:nth-child(1) strong { color: var(--chart-blue); }.run-analysis-totals > div:nth-child(2) strong { color: var(--chart-purple); }
.run-analysis-note { margin: -5px 0 0; font-size: 11px; color: var(--muted); line-height: 1.6; }
.run-outcome-panel { padding: 0 2px; }.run-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; }.run-section-heading > span { font-size: 11px; color: var(--muted); }
.run-outcome-bar { display: flex; height: 7px; overflow: hidden; border-radius: 5px; background: var(--border); margin: 12px 0 9px; }
.run-outcome-bar .success { background: var(--success); }.run-outcome-bar .failed { background: var(--error); }.run-outcome-bar .active { background: var(--info); }
.run-outcome-legend { display: flex; gap: 20px; font-size: 11px; color: var(--muted); }
.run-outcome-legend > span::before,.run-chart-legend > span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 6px; background: var(--success); }.run-outcome-legend > .failed::before { background: var(--error); }.run-outcome-legend > .active::before { background: var(--info); }
.run-analysis-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 16px; }
.run-chart-panel { border: 1px solid var(--border); border-radius: 9px; padding: 18px; min-width: 0; }
.run-chart-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin-bottom: 15px; }
.run-chart-panel h3 { margin: 0; font-size: 13px; font-weight: 600; }.run-chart-panel > header > span { color: var(--muted); font-size: 10px; }
.production-workspace .run-chart-panel header button { padding: 0; border: 0; min-height: 24px; background: none; color: var(--muted); font-size: 11px; }.production-workspace .run-chart-panel header button:hover { color: var(--accent); }
.run-chart-panel select { border: 1px solid var(--border); border-radius: 5px; font: inherit; font-size: 11px; padding: 5px; color: var(--text); background: var(--panel); max-width: 130px; }
.run-chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 10px; }.run-chart-legend > .primary::before { background: var(--chart-blue); }.run-chart-legend > .secondary::before { background: var(--chart-purple); }
.run-trend-plot { display: grid; grid-template-columns: 34px minmax(0,1fr); height: 160px; margin: 18px 0 27px; gap: 8px; }
.run-trend-scale { display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; color: var(--muted); text-align: right; }
.run-trend-bars { display: grid; grid-template-columns: repeat(var(--points),minmax(0,1fr)); gap: 2px; align-items: end; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to top,transparent 0,transparent calc(50% - 1px),var(--border) 50%); }
.production-workspace .run-trend-point { position: relative; height: 100%; width: 100%; min-width: 0; padding: 0; min-height: 0; display: flex; gap: 1px; border: 0; border-radius: 0; align-items: flex-end; background: transparent; }
.production-workspace .run-trend-point:hover,.production-workspace .run-trend-point[aria-pressed="true"] { background: color-mix(in srgb,var(--chart-blue) 9%,transparent); }.run-trend-point i { flex: 1; min-height: 0; border-radius: 2px 2px 0 0; background: var(--chart-blue); }.run-trend-point i.secondary { background: var(--chart-purple); }.run-trend-point small { position: absolute; top: calc(100% + 8px); left: 0; font-size: 9px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.run-chart-caption { font-size: 10px; color: var(--muted); line-height: 1.6; margin: 10px 0 0; min-height: 16px; }
.run-stage-timings { display: grid; gap: 22px; padding-top: 8px; }.run-stage-heading { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }.run-stage-heading strong { font-weight: 500; }.run-stage-track { height: 7px; border-radius: 4px; background: var(--panel-raised); overflow: hidden; margin: 10px 0; }.run-stage-track > i { display: block; height: 100%; border-radius: inherit; background: var(--chart-blue); }.run-stage-track > .replay { background: var(--chart-purple); }.run-stage-quantiles { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; color: var(--muted); }.run-stage-timings p { font-size: 10px; color: var(--muted); margin: 8px 0 0; }
.run-service-bars { display: grid; gap: 16px; max-height: 260px; overflow: auto; }.run-service-bars > div { display: grid; grid-template-columns: 115px minmax(80px,1fr) 130px; align-items: center; gap: 5px 14px; font-size: 11px; }.run-service-bars strong { font-weight: 500; overflow-wrap: anywhere; }.run-resource-track { display: flex; height: 10px; background: var(--panel-raised); border-radius: 3px; overflow: hidden; }.run-resource-track .generate { background: var(--chart-blue); }.run-resource-track .replay { background: var(--chart-purple); }.run-service-bars small { grid-column: 2 / -1; font-size: 10px; color: var(--muted); }.run-service-bars > div > span { font-size: 10px; color: var(--muted); text-align: right; }
.run-timeline-axis { display: flex; justify-content: space-between; padding-left: 125px; color: var(--muted); font-size: 9px; margin-bottom: 10px; }.run-timeline-rows { max-height: 260px; overflow: auto; }.run-timeline-row { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 15px; min-height: 34px; align-items: center; border-top: 1px solid var(--border); }.run-timeline-row > strong { font-size: 10px; font-weight: 500; overflow-wrap: anywhere; }.run-timeline-track { height: 19px; position: relative; background: var(--panel-raised); }.production-workspace .run-timeline-segment { position: absolute; min-height: 0; padding: 0; border: 0; border-radius: 2px; height: 15px; top: 2px; background: var(--chart-blue); }.production-workspace .run-timeline-segment.replay { background: var(--chart-purple); }.production-workspace .run-timeline-segment.failed { background: var(--error); }.production-workspace .run-timeline-segment:hover { filter: brightness(.85); }
/* Creation wizard shares Studio surfaces, input and button tokens. */
.pipeline-create-dialog { width: min(1000px,calc(100vw - 48px)); }
.pipeline-create-dialog > header { padding: 20px 24px; }.pipeline-create-dialog > header h2 { font-size: 18px; font-weight: 600; }
.pipeline-create-dialog .production-dialog-body { padding: 0; max-height: min(680px,70vh); }
.pipeline-create-dialog .production-editor-toolbar { padding: 12px 24px; gap: 4px; border-bottom: 1px solid var(--border); }.pipeline-create-dialog .production-editor-toolbar button { font-size: 12px; border-color: transparent; background: none; color: var(--muted); }.pipeline-create-dialog .production-editor-toolbar button[aria-pressed="true"] { color: var(--text); background: var(--hover); }.pipeline-create-dialog .production-editor-toolbar button:last-of-type { margin-left: auto; border-color: var(--border); }
.pipeline-create-dialog .production-structured { display: grid; grid-template-columns: 195px minmax(0,1fr); min-height: 430px; }
.pipeline-create-steps { padding: 24px 14px; border-right: 1px solid var(--border); background: var(--panel-raised); display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pipeline-create-dialog .pipeline-create-steps button { justify-content: flex-start; padding: 12px 10px; border-color: transparent; background: transparent; color: var(--muted); text-align: left; font-size: 12px; }.pipeline-create-steps button strong { font-weight: 500; }.pipeline-create-steps button span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); font-size: 11px; flex-shrink: 0; }.pipeline-create-dialog .pipeline-create-steps button[aria-current="step"] { background: var(--panel); border-color: var(--border); color: var(--text); }.pipeline-create-steps button[aria-current="step"] span { color: var(--accent); background: var(--accent-soft); border-color: var(--accent); }
.pipeline-create-content { min-width: 0; padding: 25px 30px; display: flex; flex-direction: column; gap: 18px; }.pipeline-create-heading > span { color: var(--muted); font-size: 10px; letter-spacing: 1px; }.pipeline-create-heading h3 { font-size: 20px; margin: 8px 0; font-weight: 600; }.pipeline-create-heading p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 4px; }
.pipeline-create-fields { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 16px; }.pipeline-create-content label { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 11px; color: var(--muted); }.pipeline-create-content input,.pipeline-create-content select { width: 100%; height: 37px; border: 1px solid var(--border); background: var(--panel); border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 12px; color: var(--text); box-sizing: border-box; }.pipeline-create-content input:focus,.pipeline-create-content select:focus { outline: 2px solid color-mix(in srgb,var(--accent) 22%,transparent); border-color: var(--accent); }
.pipeline-create-card { display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--border); border-radius: 9px; padding: 18px; }.pipeline-create-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.pipeline-create-card h4 { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }.pipeline-create-card > header button { min-height: 24px; padding: 3px 7px; font-size: 11px; }.pipeline-create-card .production-hint { margin: 0; font-size: 11px; line-height: 1.7; }.pipeline-create-auth { border-top: 1px solid var(--border); padding-top: 12px; }.pipeline-create-auth summary { color: var(--muted); font-size: 11px; cursor: pointer; }.pipeline-create-auth[open] summary { margin-bottom: 12px; }.pipeline-create-auth p { padding-top: 7px; }
.pipeline-create-callout { margin: 0; padding: 12px 14px; border-radius: 6px; background: var(--panel-raised); border-left: 3px solid var(--info); font-size: 11px; line-height: 1.75; color: var(--muted); }.pipeline-create-policy { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; padding-top: 14px; border-top: 1px solid var(--border); }.pipeline-create-dialog .pipeline-create-add { width: 100%; border-style: dashed; background: var(--panel-raised); padding: 10px; }
.pipeline-create-review { border: 1px solid var(--border); background: var(--panel-raised); border-radius: 9px; padding: 18px; }.pipeline-create-review h4 { font-size: 16px; margin: 0 0 8px; }.pipeline-create-review p { margin: 0; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }.pipeline-create-review-metrics { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 18px; border-top: 1px solid var(--border); padding-top: 15px; }.pipeline-create-review-metrics > div { display: flex; flex-direction: column; gap: 5px; }.pipeline-create-review-metrics strong { font-size: 21px; font-weight: 600; }.pipeline-create-review-metrics span { font-size: 11px; color: var(--muted); }.pipeline-create-review-fields { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; font-size: 11px; margin: 0; }.pipeline-create-review-fields dt { color: var(--muted); }.pipeline-create-review-fields dd { margin: 0; overflow-wrap: anywhere; }.pipeline-create-review-service { display: flex; justify-content: space-between; gap: 20px; margin: 0; font-size: 12px; }.pipeline-create-review-service span { color: var(--muted); overflow-wrap: anywhere; }.pipeline-create-dialog .production-yaml { width: calc(100% - 48px); margin: 20px 24px; min-height: 380px; box-sizing: border-box; }.pipeline-create-dialog .production-dialog-footer { padding: 16px 24px; }.pipeline-create-dialog .production-dialog-footer > button:first-child { margin-right: auto; }
@media(min-width:1500px) { .production-managed .production-layout { grid-template-columns: 310px minmax(0,1fr); }.production-managed .production-detail { padding: 26px 30px; }.run-trend-plot { height: 190px; } }
@media(max-width:1150px) { .production-managed .production-layout { grid-template-columns: 240px minmax(0,1fr); }.production-managed .production-detail { padding: 18px; }.run-analysis-grid { grid-template-columns: 1fr; }.run-stage-timings { grid-template-columns: 1fr 1fr; }.production-detail .production-stats { row-gap: 15px; }.run-analysis-totals { gap: 8px; }.run-analysis-totals > div { padding: 12px; }.run-analysis-totals strong { font-size: 18px; } }
@media(max-width:760px) { .production-managed .production-layout { grid-template-columns: 1fr; }.production-managed .production-list { position: static; min-height: 0; max-height: 240px; }.production-managed .production-detail { border-left: 0; }.pipeline-create-dialog .production-structured { grid-template-columns: 1fr; }.pipeline-create-steps { flex-direction: row; padding: 10px; border-right: 0; border-bottom: 1px solid var(--border); }.pipeline-create-dialog .pipeline-create-steps button { flex: 1; padding: 6px; justify-content: center; }.pipeline-create-steps button strong { display: none; }.pipeline-create-content { padding: 20px; }.run-service-bars > div { grid-template-columns: 80px minmax(60px,1fr) 110px; }.run-analysis-totals strong { font-size: 16px; } }
@media(min-width:851px) { .production-managed .production-layout { height: calc(100vh - 205px); min-height: 460px; align-items: stretch; }.production-managed .production-list { position: static; height: 100%; max-height: none; min-height: 0; box-sizing: border-box; }.production-managed .production-detail { height: 100%; min-height: 0; overflow: auto; box-sizing: border-box; } }
.production-list-row .pipeline-history-meta b { font-size: 14px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.production-dialog > header .studio-dialog-close { width: 32px; height: 32px; min-width: 32px; padding: 0; border: 0; background: transparent; color: var(--muted); border-radius: 6px; }.production-dialog > header .studio-dialog-close:hover { background: var(--hover); color: var(--text); }.production-dialog > header .studio-dialog-close .studio-icon { width: 18px; height: 18px; }
.pipeline-create-dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 64px); overflow: hidden; border-radius: 14px; }
.pipeline-create-dialog > header { flex: none; margin: 0; padding: 18px 24px; }.pipeline-create-dialog > header h2 { margin: 0; }
.pipeline-create-dialog .production-dialog-body { flex: 1; min-height: 0; max-height: none; overflow: auto; }.pipeline-create-dialog .production-dialog-footer { flex: none; }
.pipeline-create-dialog label { margin: 0; }.pipeline-create-dialog .production-structured { min-height: 410px; }
.pipeline-create-dialog .production-dialog-body > .production-editor-toolbar { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.production-detail { container-type: inline-size; }.production-detail .production-stats strong { white-space: nowrap; font-size: clamp(16px,2.7cqw,21px); }
@container(max-width:740px) { .run-analysis-grid { grid-template-columns: 1fr; }.run-stage-timings { grid-template-columns: 1fr 1fr; } }
@media(min-width:851px) { .production-managed .production-layout { height: calc(100dvh - 240px); min-height: 420px; } }
/* Inline counters keep labels, state and quantities visually distinct. */
.run-inline-counts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; min-width: 0; }
.run-inline-counts .run-count { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 5px; background: var(--panel-raised); --count-tone: var(--muted); }
.run-inline-counts dt { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 10px; white-space: nowrap; }
.run-inline-counts dt::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--count-tone); flex: none; }
.run-inline-counts dd { margin: 0; color: var(--text); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.run-inline-counts .running { --count-tone: var(--chart-blue); }.run-inline-counts .pending { --count-tone: var(--warning); }
.run-inline-counts .generate { --count-tone: var(--chart-blue); }.run-inline-counts .replay { --count-tone: var(--chart-purple); }
.run-stage-counts { margin-top: 12px; gap: 6px; }.run-stage-counts .run-count { flex: 1; justify-content: space-between; padding: 6px 7px; gap: 6px; }
.run-inline-counts .is-zero { --count-tone: var(--border-strong); }.run-inline-counts .is-zero dd { color: var(--muted); font-weight: 500; }
.run-service-bars > div { grid-template-columns: 115px minmax(80px,1fr) auto; }
.run-service-counts { justify-content: flex-end; gap: 7px; }.run-service-counts .run-count { min-width: 68px; justify-content: space-between; background: color-mix(in srgb,var(--count-tone) 8%,var(--panel)); }.run-service-counts dt::before { border-radius: 2px; width: 6px; height: 6px; }.run-service-counts dd { color: var(--count-tone); }
@container(max-width:500px) { .run-service-bars > div { grid-template-columns: 80px minmax(0,1fr); }.run-service-bars .run-service-counts { grid-column: 2; justify-content: flex-start; }.run-service-bars small { grid-column: 2; }.run-stage-timings { grid-template-columns: 1fr; } }
.run-chart-panel[data-metric="samples"] { --chart-blue: var(--success); --chart-purple: var(--error); }
/* Compact history cards: four rows, without slash-separated metadata. */
.production-workspace .production-list-row { padding: 10px 11px; gap: 7px 8px; margin-bottom: 7px; align-items: center; }
.production-workspace .production-list-row > strong { font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.production-workspace .production-list-row > span { padding: 2px 5px; font-size: 10px; }
.production-workspace .production-list-row > .pipeline-history-resources { display: flex; align-items: center; gap: 9px; grid-column: 2; grid-row: 2; }
.production-list-row .pipeline-history-resources > span { display: inline-flex; align-items: baseline; gap: 4px; padding: 0; border-radius: 0; background: none; white-space: nowrap; }
.production-list-row .pipeline-history-resources b { font-size: 11px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.production-list-row .pipeline-history-resources em { font-size: 9px; color: var(--muted); font-style: normal; font-weight: 400; }
.production-list-row .pipeline-history-meta { grid-row: 3; grid-template-columns: auto auto 1fr; gap: 10px; }
.production-list-row .pipeline-history-meta > span { display: flex; flex-direction: row; align-items: baseline; gap: 4px; white-space: nowrap; }
.production-list-row .pipeline-history-meta > span:last-child { justify-content: flex-end; }
.production-list-row .pipeline-history-meta small { font-size: 9px; }.production-list-row .pipeline-history-meta b { font-size: 11px; }
.production-list-row .pipeline-history-progress { grid-row: 4; grid-column: 1; height: 3px; margin-right: 4px; width: auto; justify-self: stretch; }
.production-list-row .pipeline-history-time { grid-row: 4; grid-column: 2; justify-self: end; font-size: 9px; }
/* Sparse time axis with an area/line chart instead of dense bars. */
.run-line-plot { height: 185px; margin: 20px 0 0; grid-template-columns: 38px minmax(0,1fr); gap: 10px; }
.run-line-plot .run-trend-scale { position: relative; top: -5px; height: calc(100% + 10px); font-variant-numeric: tabular-nums; }
.run-line-canvas { min-width: 0; position: relative; height: 100%; }
.run-line-svg { width: 100%; height: 100%; overflow: visible; display: block; }
.run-line-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.run-line-path { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke: var(--chart-blue); }.run-line-path.secondary { stroke: var(--chart-purple); stroke-width: 1.8; }
.run-line-guide { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: .35; vector-effect: non-scaling-stroke; }
.run-line-marker { fill: var(--chart-blue); stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; }.run-line-marker.secondary { fill: var(--chart-purple); }
.run-trend-hits { position: absolute; inset: 0; }
.production-workspace .run-trend-hits .run-trend-point { position: absolute; top: 0; height: 100%; min-height: 0; padding: 0; margin: 0; border: 0; background: transparent; border-radius: 0; outline-offset: 1px; }
.production-workspace .run-trend-hits .run-trend-point:hover,.production-workspace .run-trend-hits .run-trend-point[aria-pressed="true"] { background: transparent; }
.production-workspace .run-trend-hits .run-trend-point:focus-visible { outline: 1px solid var(--chart-blue); }
.run-line-axis { display: flex; justify-content: space-between; gap: 8px; padding-left: 48px; margin: 10px 0 18px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.run-trend-reading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; border-top: 1px solid var(--border); padding-top: 12px; min-height: 22px; font-size: 11px; }
.run-trend-reading > time { margin-right: auto; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.run-trend-reading > span { display: flex; align-items: baseline; gap: 7px; color: var(--muted); }.run-trend-reading strong { font-weight: 600; color: var(--chart-blue); font-size: 13px; font-variant-numeric: tabular-nums; }.run-trend-reading > .secondary strong { color: var(--chart-purple); }
.run-analysis-note { display: flex; align-items: flex-start; gap: 9px; border: 1px solid color-mix(in srgb,var(--warning) 42%,var(--border)); border-radius: 6px; background: var(--warning-bg); color: var(--warning); padding: 10px 12px; margin: 0; font-size: 11px; line-height: 1.65; }
.run-analysis-note > .studio-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.run-section-heading > span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }.run-plan-chip { white-space: nowrap; }
.run-plan-chip { display: inline-flex; align-items: baseline; gap: 6px; }.run-plan-chip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.run-hourly-rates { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--border); gap: 20px; }.run-hourly-rates > div { display: flex; flex-direction: column; gap: 9px; }.run-hourly-rates span { color: var(--muted); font-size: 11px; }.run-hourly-rates strong { color: var(--chart-blue); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }.run-hourly-rates > div:nth-child(2) strong { color: var(--chart-purple); }
.run-hourly-output .run-line-plot { height: 160px; }.run-hourly-output .run-line-axis { font-size: 9px; }
.run-hourly-rates { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }.run-hourly-rates span { line-height: 1.6; }.run-hourly-rates > div:nth-child(even) strong { color: var(--chart-purple); }
@container(max-width:850px) { .run-hourly-rates { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 24px; } }

/* User-selected chart resolution stays visible beside the plot. */
.run-trend-controls{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 14px}
.run-trend-controls select{flex:1 1 105px;min-width:0;max-width:180px;font-size:12px}
.run-trend-resolution{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.run-trend-message{margin:8px 0;min-height:205px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted)}
.run-trend-message.is-error{color:var(--error)}
.run-trend-message[hidden],.run-chart-panel [hidden]{display:none!important}
/* Charts own a bounded viewport; SVG intrinsic dimensions must not size grid tracks. */
.production-workspace .dashboard-lower{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.production-workspace .dashboard-panel,.production-workspace .run-chart-panel,.production-workspace .run-hourly-output{min-width:0;max-width:100%;box-sizing:border-box}
.production-workspace .dashboard-curve{height:140px;min-width:0;position:relative;overflow:hidden}
.production-workspace .dashboard-curve>svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:hidden}
.production-workspace .run-line-plot{grid-template-rows:minmax(0,1fr);min-width:0;max-width:100%;box-sizing:border-box}
.production-workspace .run-line-canvas{min-width:0;min-height:0;height:100%;position:relative;overflow:hidden}
.production-workspace .run-line-svg{position:absolute;inset:0;width:100%;height:100%;max-width:100%;overflow:hidden}
.production-workspace .run-trend-hits{overflow:hidden}
.production-workspace .run-trend-reading,.production-workspace .dashboard-chart-reading{min-width:0;overflow-wrap:anywhere}
@container production (max-width:600px){.production-workspace .dashboard-lower{grid-template-columns:minmax(0,1fr)}}

/* Single-page creation: shared production/evaluation controls, scoped to this dialog. */
.pipeline-create-single { width: min(1000px,calc(100vw - 40px)); }
.pipeline-create-single .production-structured { display: block; min-height: 0; }
.pipeline-create-single .production-editor-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 24px; border-bottom: 1px solid var(--border); }
.pipeline-create-single .production-editor-toolbar > .production-hint { margin-right: auto; }
.pipeline-create-single .pipeline-create-content { gap: 22px; padding: 24px; }
.pipeline-create-single .pipeline-create-content > h3 { font-size: 14px; margin: 8px 0 -8px; }
.pipeline-create-single .pipeline-create-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0 0 20px; }
.pipeline-create-single .pipeline-create-content .pipeline-create-add { width: auto; align-self: flex-start; border: 1px solid var(--border); background: var(--panel); padding: 7px 12px; }
.pipeline-create-single .pipeline-create-section { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pipeline-create-single .pipeline-create-section h3 { font-size: 14px; margin: 0 0 2px; font-weight: 600; }
.pipeline-create-single .pipeline-create-section .production-hint { margin: 0; font-size: 12px; }
.pipeline-create-single .pipeline-create-auth { border: 0; padding-top: 4px; }
.pipeline-create-single .pipeline-create-auth[open] { padding: 12px; background: var(--panel-raised); border-radius: 7px; }
.pipeline-create-single .pipeline-create-auth summary,.pipeline-item-options summary,.pipeline-resource-auth > summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.pipeline-resource-auth { margin-top: 8px; }
.pipeline-resource-auth[open] > summary { margin-bottom: 12px; }
.pipeline-resource-tools { display: flex; align-items: center; gap: 14px; }
.pipeline-resource-tools input { flex: 1; }
.pipeline-resource-tools > span { white-space: nowrap; font-size: 12px; color: var(--muted); }
.pipeline-resource-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 76px; overflow: auto; margin: 10px 0; }
.pipeline-create-single .pipeline-resource-chip { min-height: 26px; padding: 4px 7px; border: 1px solid var(--border); background: var(--panel-raised); font-size: 11px; gap: 5px; }
.pipeline-resource-chip > span { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-resource-chip .studio-icon { width: 13px; height: 13px; }
.pipeline-resource-list { max-height: 180px; overflow: auto; border: 1px solid var(--border); border-radius: 7px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); background: var(--panel); }
.pipeline-create-content .pipeline-resource-row { display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.pipeline-create-content .pipeline-resource-row input { width: 15px; height: 15px; flex: 0 0 15px; min-height: 0; }
.pipeline-resource-row > span { min-width: 0; display: grid; gap: 4px; }
.pipeline-resource-row strong { color: var(--text); font-size: 12px; font-weight: 500; }
.pipeline-resource-row small { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pipeline-config-row { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; padding: 12px; background: var(--panel-raised); border-radius: 7px; }
.pipeline-config-fields { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 12px; flex: 1; min-width: 240px; }
.pipeline-item-options { flex: 0 0 120px; }
.pipeline-item-options[open] { flex: 1 0 100%; }
.pipeline-create-total { margin-right: auto; font-size: 12px; color: var(--muted); }
.evaluation-create.pipeline-create-single .pipeline-create-content { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 22px 26px; }
.evaluation-create.pipeline-create-single .pipeline-create-section:nth-child(3),.evaluation-create.pipeline-create-single .pipeline-create-section:nth-child(5) { grid-column: 1 / -1; }
.evaluation-create.pipeline-create-single .pipeline-create-section:nth-child(4) { grid-column: 1 / -1; }
.evaluation-create.pipeline-create-single .evaluation-binding-row { grid-template-columns: minmax(140px,1fr) minmax(0,2fr) auto; margin: 0; }
@media(max-width:720px) { .evaluation-create.pipeline-create-single .pipeline-create-content { display: flex; }.pipeline-resource-list { grid-template-columns: 1fr; }.pipeline-create-single .production-editor-toolbar > .production-hint { display: none; }.pipeline-create-single .pipeline-create-fields { grid-template-columns: 1fr; } }
.pipeline-config-picker summary { font-size: 11px; color: var(--muted); cursor: pointer; padding: 2px 0; }
.pipeline-config-picker[open] { padding-top: 4px; }
.pipeline-config-picker[open] summary { margin-bottom: 8px; }
.pipeline-config-matches { max-height: 150px; overflow: auto; display: grid; gap: 4px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.pipeline-create-single .pipeline-config-match { justify-content: flex-start; text-align: left; font-size: 11px; padding: 5px 7px; overflow-wrap: anywhere; }
/* Keep the production configuration above the fold, without repeating a selected endpoint. */
.production-create.pipeline-create-single .pipeline-create-content { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 18px 26px; }
.production-create.pipeline-create-single .pipeline-create-content > * { grid-column: 1 / -1; }
.production-create.pipeline-create-single .pipeline-create-content > .pipeline-create-fields:first-child { grid-column: 1; align-content: start; }
.production-create.pipeline-create-single .pipeline-create-content > .pipeline-create-card:nth-child(2) { grid-column: 2; }
.production-create.pipeline-create-single .pipeline-create-content > .pipeline-create-card:nth-child(2) .production-field[hidden] { display: none; }
.production-create.pipeline-create-single .pipeline-create-callout { margin: 0; padding: 8px 12px; font-size: 12px; line-height: 1.5; border-left: 0; }
@media(max-width:720px) { .production-create.pipeline-create-single .pipeline-create-content { display: flex; } }

/* Full ledger timeline: separate upload from compute, preserve exact gap widths. */
.run-timeline-rows { max-height: 380px; }
.run-timeline-service { display: grid; gap: 2px; min-width: 0; }
.run-timeline-service strong { font-size: 10px; font-weight: 500; overflow-wrap: anywhere; }
.run-timeline-service small { font-size: 9px; color: var(--muted); }
.run-timeline-track { height: 27px; }
.production-workspace .run-timeline-segment.compute,.production-workspace .run-timeline-segment.combined { top: 2px; height: 12px; }
.production-workspace .run-timeline-segment.upload { top: 18px; height: 6px; background: #c47b19; }
.production-workspace .run-timeline-segment.combined { background-image: repeating-linear-gradient(135deg,transparent 0 4px,#ffffff66 4px 6px); }
.run-timeline-gap { position: absolute; top: 2px; height: 12px; background: var(--border); opacity: .7; }
.run-timeline-unused { position: relative; font-size: 9px; color: var(--muted); padding: 0 5px; pointer-events: none; }
.run-timeline-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10px; color: var(--muted); margin-bottom: 12px; }
.run-timeline-legend span::before { content: ''; display: inline-block; width: 14px; height: 7px; border-radius: 1px; margin-right: 5px; background: var(--chart-blue); }
.run-timeline-legend .replay::before { background: var(--chart-purple); }
.run-timeline-legend .failed::before { background: var(--error); }
.run-timeline-legend .upload::before { background: #c47b19; }
.run-timeline-legend .gap::before { background: var(--border); }
.run-timeline-legend .combined::before { background: repeating-linear-gradient(135deg,var(--chart-blue) 0 4px,var(--panel) 4px 6px); }