#view-serverless [hidden] { display:none !important; }
#view-serverless { min-width:0; }
.serving-gateway-status { background:#fff8e7; border:1px solid #eed49a; padding:12px 16px; border-radius:8px; margin-bottom:20px; color:#735513; }
.serving-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 20px; }
.serving-toolbar .field { margin:0; min-width:180px; }
.serving-toolbar input[type=search] { min-width:280px; }
.serving-toolbar select { width:auto; min-width:140px; }
.serving-table { width:100%; text-align:left; border-collapse:collapse; }
.serving-table th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; background:#f8fafc; white-space:nowrap; padding:14px 18px; }
.serving-table td { border-top:1px solid #e7ecf2; padding:18px; font-size:13px; vertical-align:middle; }
.serving-table td:first-child > a { font-size:14px; font-weight:650; }
.serving-table small { display:block; color:#64748b; font-size:12px; margin-top:7px; max-width:380px; overflow-wrap:anywhere; }
.serving-table pre { max-width:520px; }
.serving-click-row { cursor:pointer; }
.serving-click-row:hover { background:#f5f8fe; }
.serving-backlink { display:inline-block; margin:4px 0 24px; font-size:13px; }
.serving-detail-heading, .serving-title-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.serving-title-row { justify-content:flex-start; }
.serving-title-row h2 { margin:0; font-size:26px; overflow-wrap:break-word; }
.serving-badge { display:inline-block; border-radius:20px; background:#eef2f7; color:#536278; padding:5px 10px; font-size:12px; white-space:nowrap; }
.serving-tabs { display:flex; gap:28px; border-bottom:1px solid #dce3ed; margin-bottom:24px; overflow-x:auto; }
.serving-tabs a { display:block; color:#64748b; padding:12px 0 15px; white-space:nowrap; border-bottom:3px solid transparent; font-weight:550; font-size:14px; text-decoration:none; }
.serving-tabs a[aria-current] { border-color:#2563eb; color:#1d4ed8; }
.serving-console-panel { padding:24px; margin-bottom:20px; min-width:0; }
.serving-console-panel h3 { margin:0 0 16px; font-size:16px; }
.serving-console-panel .serving-toolbar { padding:14px 0; }
.serving-route { display:flex; flex-wrap:wrap; align-items:center; gap:12px; border:1px solid #dbe3ed; border-radius:8px; padding:12px; }
.serving-route code { flex:1; overflow-wrap:anywhere; min-width:0; font-size:13px; }
.serving-method { color:#2563eb; font-weight:700; font-size:12px; }
.serving-code { font-family:ui-monospace,Consolas,monospace; font-size:12px; line-height:1.7; padding:18px; background:#f6f8fb; border:1px solid #e2e8f0; border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:520px; overflow:auto; }
.serving-route-text { overflow-wrap:anywhere; font-size:12px; }
.serving-playground { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.serving-playground > div { min-width:0; }
.serving-playground label { display:block; font-size:12px; font-weight:600; margin:8px 0; color:#526176; }
.serving-json-input { width:100%; min-height:350px; resize:vertical; font-family:ui-monospace,Consolas,monospace; font-size:13px; line-height:1.7; padding:18px; tab-size:2; }
.serving-response { margin:0; min-height:350px; max-height:500px; }
.serving-text-button { border:0; background:none; color:#2563eb; padding:0; font:inherit; font-family:ui-monospace,Consolas,monospace; cursor:pointer; }
#serving-notice:not(:empty) { border-left:3px solid #d97706; padding:12px; background:#fffbeb; }
#serving-tab-content .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
@media(max-width:800px) { .serving-playground { grid-template-columns:1fr; } .serving-detail-heading { align-items:flex-start; flex-direction:column; } .serving-console-panel { padding:16px; } .serving-toolbar input[type=search] { min-width:0; } .serving-toolbar .field { flex:1; } }
@media(max-width:500px) { #serving-tab-content .form-grid { grid-template-columns:1fr; } .serving-title-row { flex-wrap:wrap; } .serving-tabs { gap:22px; } }
.serving-gpu-fieldset { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.serving-gpu-fieldset legend { font-size: 13px; font-weight: 600; }
.serving-gpu-fieldset p { color: #64748b; font-size: 13px; margin: 8px 0 12px; }
.serving-gpu-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
#serving-classes { padding: 0; min-height: 0; }
.serving-gpu-options label { display: flex; align-items: center; gap: 10px; border: 1px solid #dce3ec; border-radius: 8px; padding: 12px; font-size: 13px; cursor: pointer; }
.serving-gpu-options label:has(input:checked) { border-color: #2563eb; background: #eff5ff; }
.serving-gpu-options input { width: 17px; height: 17px; min-height: 17px; margin: 0; flex: 0 0 17px; }
.serving-actions { grid-column: 1 / -1; }
#serving-create .serving-actions > button { width: auto; min-width: 180px; }
@media (max-width: 800px) { .serving-gpu-options { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .serving-gpu-options { grid-template-columns: 1fr; } .serving-metrics { grid-template-columns: 1fr 1fr; } }
#serving-dialog { width: min(760px, calc(100vw - 32px)); max-height: 90vh; padding: 30px; border: 1px solid #e2e8f0; border-radius: 18px; color: #17263c; box-shadow: 0 24px 90px #102a4340; }
#serving-dialog::backdrop { background: #10243b70; backdrop-filter: blur(3px); }
.serving-list-heading, .serving-wizard-header, .serving-wizard-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.serving-list-heading { margin: 8px 0 28px; }
.serving-list-heading h2, .serving-wizard-header h2 { margin: 0 0 8px; }
.serving-list-heading p, #serving-dialog section > p, .serving-hint { color: #63738a; line-height: 1.6; }
.serving-eyebrow { color: #2563eb; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.serving-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; list-style: none; padding: 0; margin: 24px 0 30px; counter-reset: step; }
.serving-steps li { padding: 12px 0; border-bottom: 3px solid #e4eaf2; color: #63738a; font-size: 13px; }
.serving-steps li::before { counter-increment: step; content: counter(step) '. '; }
.serving-steps .is-current { border-color: #2563eb; color: #1d4ed8; font-weight: 700; }
#serving-dialog .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 22px 0; }
.serving-provider-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0; }
.serving-provider-options label { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #dbe3ee; padding: 20px; border-radius: 12px; cursor: pointer; }
.serving-provider-options label:has(:checked) { border-color: #2563eb; background: #eff6ff; }
.serving-provider-options input { width: 16px; min-height: 16px; margin: 3px 0; }
.serving-provider-options small { display: block; margin-top: 8px; line-height: 1.5; color: #63738a; }
.serving-wizard-footer { border-top: 1px solid #e4eaf2; padding-top: 20px; margin-top: 28px; }
#serving-step-label { color: #63738a; font-size: 13px; margin-right: auto; }
#serving-dialog [hidden] { display: none !important; }
#serving-dialog .serving-gpu-options { grid-template-columns: 1fr 1fr; }
#serving-dialog .serving-gpu-options label { display:flex; gap:10px; padding:12px; }
#serving-dialog .serving-gpu-options input { width:16px; min-height:16px; }
.serving-review { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 16px; padding: 22px; background: #f5f8fc; border-radius: 12px; }
.serving-review dt { color: #63738a; }
.serving-review dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; }
#serving-wizard-notice { color: #b42318; }
.serving-empty { text-align: center; padding: 70px 24px; background: white; border: 1px dashed #cbd5e1; border-radius: 14px; }
.serving-empty p { color: #63738a; margin: 14px 0 24px; }

@media(max-width:600px) { #serving-dialog { padding:20px; } #serving-dialog .form-grid, .serving-provider-options { grid-template-columns:1fr; } .serving-list-heading { align-items:flex-start; flex-direction:column; } .serving-review { grid-template-columns:1fr; gap:8px; } .serving-review dd { margin-bottom:12px; } #serving-submit { min-width:0; } }

.serving-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0; }
.serving-metrics dt { color:#64748b; font-size:12px; }
.serving-metrics dd { font-size:22px; font-weight:650; margin:8px 0; }
@media(max-width:600px) { .serving-metrics { grid-template-columns:1fr 1fr; } }

.serving-toolbar select { border:1px solid #d6deea; border-radius:7px; background:white; color:#34445c; padding:9px 12px; font:inherit; font-size:13px; min-height:38px; }
.serving-access { margin:20px 0; padding:18px; background:#f5f8fc; border:1px solid #e2e8f0; border-radius:10px; }
.serving-access label { display:block; font-weight:600; font-size:13px; margin-bottom:10px; }
.serving-access-row { display:flex; gap:10px; align-items:center; }
.serving-access-row input { flex:1; min-width:0; width:100%; font-family:monospace; border:1px solid #cbd5e1; border-radius:7px; padding:10px 12px; background:white; color:#17263c; }
.serving-access-row button { flex-shrink:0; }
.serving-access .serving-hint { margin-bottom:0; }
@media(max-width:600px) { .serving-access-row { flex-wrap:wrap; } .serving-access-row input { flex-basis:100%; } }

/* Endpoint management: header/row actions, model rows, edit and confirmation dialogs. */
.serving-header-actions, .serving-row-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.serving-row-actions { flex-wrap:nowrap; gap:6px; }
.serving-row-actions .button { padding:4px 9px; font-size:12px; min-height:0; width:auto; white-space:nowrap; }
#serving-list .serving-table th, #serving-list .serving-table td { padding-left:12px; padding-right:12px; }
.serving-review dd { white-space:pre-line; }
.serving-model-rows { display:grid; gap:10px; margin:14px 0; }
.serving-model-row { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto; gap:10px; align-items:center; }
.serving-model-row select, .serving-model-row input:not([type=checkbox]) { width:100%; min-width:0; border:1px solid #d6deea; border-radius:7px; padding:9px 12px; font:inherit; font-size:13px; background:white; color:#17263c; }
.serving-repin { display:flex; align-items:center; gap:6px; font-size:12px; color:#63738a; white-space:nowrap; }
.serving-repin input { width:15px; min-height:15px; margin:0; }
.serving-modal { width:min(760px, calc(100vw - 32px)); max-height:90vh; overflow:auto; padding:30px; border:1px solid #e2e8f0; border-radius:18px; color:#17263c; box-shadow:0 24px 90px #102a4340; }
.serving-modal::backdrop { background:#10243b70; backdrop-filter:blur(3px); }
.serving-modal [hidden] { display:none !important; }
.serving-modal section { margin:22px 0; }
.serving-modal section h3 { margin:0 0 10px; font-size:15px; }
.serving-modal .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:18px 0; }
.serving-modal .serving-gpu-options { grid-template-columns:1fr 1fr; }
.serving-modal-notice { color:#b42318; }
.serving-confirm { width:min(520px, calc(100vw - 32px)); }
.serving-confirm h2 { margin:0 0 12px; font-size:20px; overflow-wrap:anywhere; }
.serving-confirm p { color:#4a5b73; line-height:1.6; }
.serving-confirm .field { margin-top:18px; }
@media(max-width:700px) { .serving-model-row { grid-template-columns:1fr; } .serving-modal { padding:20px; } .serving-modal .form-grid { grid-template-columns:1fr; } .serving-header-actions { width:100%; } }

/* Runpod interaction patterns use Mission Control's shared light theme. */
#view-serverless { color:var(--text); }
#view-serverless :is(.panel,.serving-empty) { background:var(--surface); border-color:var(--border); }
#view-serverless :is(.serving-hint,.serving-table small,.serving-review dt,.serving-metrics dt) { color:var(--muted); }
#view-serverless :is(.serving-text-button,.serving-eyebrow,.serving-method) { color:var(--primary); }
#view-serverless :is(.serving-code,.serving-review,.serving-access) { background:var(--surface-soft); color:var(--text); border-color:var(--border); }
#view-serverless :is(input,select,textarea):focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
#view-serverless :is(.serving-route,.serving-tabs,.serving-table td) { border-color:var(--border); }
#view-serverless .serving-tabs { gap:26px; margin-top:12px; }
#view-serverless .serving-tabs a { color:var(--muted); }
#view-serverless .serving-tabs a[aria-current] { border-color:var(--primary); color:var(--primary-hover); }
#view-serverless .serving-table th { background:var(--surface-soft); color:var(--muted); }
#view-serverless .serving-click-row:hover { background:var(--surface-hover); }
#view-serverless .serving-metrics { grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:16px; }
#view-serverless .serving-metrics > div { padding:16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
#view-serverless .serving-metrics dd { font-size:22px; }
#view-serverless .serving-metrics small { color:var(--muted); font-size:12px; }
#view-serverless .serving-console-panel { padding:20px; }
.serving-release > summary { cursor:pointer; padding:8px; overflow-wrap:anywhere; }
.serving-manage { position:relative; align-self:flex-start; }
.serving-manage > summary { padding:10px 16px; cursor:pointer; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); list-style:none; white-space:nowrap; }
.serving-manage[open] .serving-header-actions { position:absolute; right:0; top:46px; z-index:20; display:grid; width:190px; padding:10px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-modal); }
.serving-live { display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:13px; }
.serving-live input { width:16px; height:16px; min-height:0; accent-color:var(--primary); }
.serving-log-output { min-height:360px; max-height:650px; font-size:12px; }
.serving-release { margin-bottom:14px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:8px; }
.serving-release .serving-code { max-height:220px; max-width:360px; margin:0; }
@media(max-width:600px) { #view-serverless { padding:14px; } .serving-toolbar { padding:12px 0; } .serving-toolbar > input[type=search] { width:100%; } }

/* Endpoint console (2026-10-13): live tiles, status vocabulary, charts, workers, request drawer.
   Marks use the shared tokens; a state is always text plus a glyph, never colour alone. */
#view-serverless { --sv-blue:var(--primary); --sv-red:var(--red); --sv-amber:#d97706; --sv-green:var(--green); --sv-grey:#7a8699; --sv-ink:var(--text-soft); }
.serving-status { display:inline-flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
.serving-status-reason { color:var(--text-soft); font-size:13px; }
.serving-glyph { font-style:normal; margin-right:5px; }
.serving-badge.is-good { background:var(--green-soft); color:var(--green); }
.serving-badge.is-active { background:var(--primary-soft); color:var(--primary-hover); }
.serving-badge.is-idle { background:var(--surface-hover); color:var(--text-soft); }
.serving-badge.is-warn { background:var(--amber-soft); color:var(--amber); }
.serving-badge.is-bad { background:var(--red-soft); color:var(--red); }
#view-serverless .serving-badge { display:inline-flex; align-items:center; border-radius:4px; font-weight:600; }
#view-serverless .is-bad:not(.serving-badge):not(.serving-tile):not(.serving-banner):not(tr):not(li) { color:var(--red); }
#view-serverless .is-warn:not(.serving-badge):not(.serving-tile):not(tr):not(li) { color:var(--amber); }
.serving-banner { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin:16px 0 0; padding:14px 18px; border:1px solid var(--border-strong); border-left-width:4px; border-radius:var(--radius-sm); background:var(--surface); }
.serving-banner > div { flex:1 1 420px; min-width:0; }
.serving-banner p { margin:4px 0 0; color:var(--text-soft); line-height:1.5; }
.serving-banner.is-bad { border-color:var(--red); background:var(--red-soft); }
.serving-banner.is-bad strong { color:var(--red); }
.serving-tiles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:18px 0 6px; }
.serving-tiles-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.serving-tile { display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); text-decoration:none; }
a.serving-tile:hover { border-color:var(--border-strong); background:var(--surface-soft); }
a.serving-tile:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.serving-tile.is-warn { border-color:#f1c27d; box-shadow:inset 3px 0 0 var(--sv-amber); }
.serving-tile.is-bad { border-color:#f0a8a0; box-shadow:inset 3px 0 0 var(--red); }
.serving-tile-label { color:var(--muted); font-size:11px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
.serving-tile-value { display:flex; align-items:baseline; gap:6px; font-size:22px; font-weight:650; line-height:1.2; overflow-wrap:anywhere; }
.serving-tile-value small { color:var(--text-soft); font-size:13px; font-weight:500; }
.serving-tile-lines { display:flex; flex-direction:column; gap:2px; color:var(--text-soft); font-size:12px; min-height:16px; overflow-wrap:anywhere; }
.serving-meter { display:block; height:5px; border-radius:3px; background:var(--primary-soft); overflow:hidden; }
.serving-meter > span { display:block; height:100%; border-radius:3px; background:var(--primary); }
.serving-tile.is-warn .serving-meter > span { background:var(--sv-amber); }
#serving-capacity-hint { margin:6px 0 0; }
.serving-tabs { margin-top:18px; }
.serving-segments { display:inline-flex; max-width:100%; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow-x:auto; }
.serving-segment { border:0; border-right:1px solid var(--border-strong); background:var(--surface); color:var(--text-soft); padding:8px 12px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap; }
.serving-segment:last-child { border-right:0; }
.serving-segment[aria-pressed=true] { background:var(--primary-soft); color:var(--primary-hover); font-weight:650; }
.serving-segment:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.serving-id { display:inline-flex; align-items:center; min-height:24px; border:0; background:none; padding:0 2px; color:var(--text); font:inherit; font-family:ui-monospace,Consolas,monospace; cursor:pointer; text-align:left; }
.serving-id:hover { color:var(--primary); text-decoration:underline; }
.serving-mono { font-family:ui-monospace,Consolas,monospace; }
.serving-table tr.is-selected td { background:var(--primary-soft); }
.serving-table tr.is-dead td { color:var(--text-soft); }
.serving-table td small .serving-badge { padding:2px 7px; font-size:11px; }
.serving-inline-details { margin-top:6px; font-size:12px; }
.serving-inline-details summary { cursor:pointer; color:var(--primary); }
.serving-inline-details dl { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin:8px 0 0; max-width:360px; }
.serving-inline-details dt { color:var(--muted); }
.serving-inline-details dd { margin:0; }
.serving-pool-total { margin:14px 0 0; font-weight:600; font-variant-numeric:tabular-nums; }
.serving-failure-group { margin:0 0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 12px; }
.serving-failure-group > summary { cursor:pointer; padding:8px 0; font-weight:600; overflow-wrap:anywhere; }
.serving-worker-log { margin:0 0 16px; }

/* Overview: operations first. */
.serving-overview { display:grid; grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr); gap:20px; align-items:start; }
.serving-ov-main, .serving-ov-side { min-width:0; }
.serving-ov-main > .serving-toolbar { padding:0 0 14px; }
.serving-ov-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.serving-ov-pair > * { min-width:0; }
#serving-detail .serving-table th { padding:10px; }
#serving-detail .serving-table td { padding:12px 10px; }
#serving-detail .serving-table small { margin-top:4px; }
/* Tables keep their figures on one line (app.css); the sentences beneath them wrap. */
.serving-table small, .serving-inline-details { white-space:normal; }
#serving-tab-content .serving-table small { max-width:340px; }
#serving-tab-content .serving-table td:is([data-label=Host],[data-label^=Cost],[data-label^=Lived]) small { white-space:nowrap; }
#serving-tab-content .serving-table td:is([data-label=Status],[data-label=Outcome],[data-label=Event]) { min-width:210px; }
#serving-tab-content .serving-table th, #serving-tab-content .serving-table td[data-label="Cold start"] { white-space:normal; }
#serving-tab-content .serving-table td[data-label=Price] { min-width:160px; }
#serving-tab-content .serving-table td[data-label=""] > * + * { margin-left:8px; }
.serving-worker-cards { display:grid; gap:10px; margin-bottom:12px; }
.serving-worker-card { display:grid; gap:4px; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); }
.serving-worker-card > div:first-child { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.serving-worker-card .serving-hint { margin:0; font-size:12px; }
.serving-timeline { list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px; }
.serving-timeline li { display:grid; grid-template-columns:auto 16px minmax(0,1fr); gap:8px; font-size:13px; line-height:1.45; }
.serving-timeline a { color:inherit; text-decoration:none; }
.serving-timeline a:hover, .serving-timeline a:focus-visible { text-decoration:underline; }
.serving-timeline time { color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.serving-timeline i { font-style:normal; text-align:center; }
.serving-timeline li.is-bad i, .serving-table tr.is-bad .serving-glyph { color:var(--red); }
.serving-timeline li.is-warn i, .serving-table tr.is-warn .serving-glyph { color:var(--sv-amber); }
.serving-timeline li.is-good i, .serving-table tr.is-good .serving-glyph { color:var(--green); }
.serving-timeline li small { grid-column:3; color:var(--muted); }
.serving-facts > summary, .serving-test > summary { cursor:pointer; font-weight:650; }
.serving-facts .serving-review { grid-template-columns:1fr; gap:6px; padding:0; margin-top:14px; background:transparent !important; }
.serving-facts dd { margin-bottom:10px; font-size:13px; }
.serving-connect { display:grid; gap:20px; }
.serving-test[open] > summary { margin-bottom:14px; }

/* Charts. */
.serving-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.serving-chart-list { display:grid; gap:20px; margin-bottom:20px; }
.serving-chart-grid .panel, .serving-chart-list .panel { margin:0; }
.serving-chart-card { overflow:visible; }
.serving-chart-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:8px; }
.serving-chart-head h3 { margin:0; }
.serving-chart-sub { color:var(--muted); font-size:12px; }
.serving-legend { display:flex; flex-wrap:wrap; gap:4px 16px; margin-bottom:10px; color:var(--text-soft); font-size:12px; }
.serving-legend > span, .serving-tip > span { display:inline-flex; align-items:center; gap:6px; }
.serving-key { display:inline-block; width:10px; height:10px; border-radius:2px; background:currentColor; flex:0 0 auto; }
.serving-key.is-line, .serving-key.is-step, .serving-tip .serving-key { height:2px; width:12px; border-radius:0; }
.serving-key.is-area { opacity:.45; }
.serving-key.is-dashed { background:none; border-top:2px dashed currentColor; height:0; }
.tone-primary { color:var(--sv-blue); } .tone-danger { color:var(--sv-red); } .tone-amber { color:var(--sv-amber); } .tone-green { color:var(--sv-green); } .tone-muted { color:var(--sv-grey); } .tone-ink { color:var(--sv-ink); }
.serving-plot-frame { display:grid; grid-template-columns:54px minmax(0,1fr); gap:8px; }
.serving-yaxis { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
.serving-plot { position:relative; height:180px; border-bottom:1px solid var(--border-strong); touch-action:pan-y; cursor:crosshair; }
.serving-plot:focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.serving-gridlines { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.serving-gridlines i { display:block; height:1px; background:var(--border); }
.serving-gridlines i:last-child { visibility:hidden; }
.serving-cols { position:absolute; inset:0; display:grid; }
.serving-col { display:flex; flex-direction:column-reverse; gap:1px; min-width:0; padding:0 1px; }
.serving-col.is-active { background:var(--surface-hover); }
.serving-bar { display:block; flex:0 0 auto; min-height:2px; max-width:24px; width:100%; margin:0 auto; border-radius:2px 2px 0 0; background:currentColor; }
/* The bucket still filling, and waits that are only lower bounds: hatched at 45 degrees. */
.serving-col.is-partial .serving-bar, .serving-col.is-hatched .serving-bar { background-image:repeating-linear-gradient(45deg, transparent 0 3px, rgb(255 255 255 / 65%) 3px 5px); }
.serving-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.serving-lines path { fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.serving-lines path.is-area { fill:currentColor; fill-opacity:.14; }
.serving-lines path.is-dashed { stroke-dasharray:5 4; stroke-width:1.5; }
.serving-dot { position:absolute; width:9px; height:9px; margin:0 0 -5px -5px; border-radius:50%; background:currentColor; box-shadow:0 0 0 2px var(--surface); pointer-events:none; }
.serving-chart-empty { position:absolute; inset:0; display:grid; place-items:center; margin:0; color:var(--muted); font-size:13px; pointer-events:none; }
.serving-tip { position:absolute; bottom:calc(100% + 6px); z-index:30; display:grid; gap:3px; min-width:150px; max-width:280px; padding:9px 11px; transform:translateX(-50%); border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 8px 24px rgb(15 23 42 / 14%); color:var(--text-soft); font-size:12px; line-height:1.35; pointer-events:none; white-space:nowrap; }
.serving-tip.is-left { transform:translateX(-12px); } .serving-tip.is-right { transform:translateX(calc(-100% + 12px)); }
.serving-tip strong { color:var(--text); font-variant-numeric:tabular-nums; }
.serving-tip b { color:var(--text); font-weight:650; font-variant-numeric:tabular-nums; }
.serving-tip > span > span { white-space:normal; }
.serving-lane-frame { margin-top:6px; }
.serving-lane-frame .serving-yaxis { justify-content:space-between; font-size:10px; }
.serving-lane { position:relative; inset:auto; height:30px; border-bottom:1px solid var(--border); }
.serving-xaxis { position:relative; height:20px; margin-top:5px; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.serving-xaxis span { position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.serving-xaxis span.is-now { right:0; transform:none; color:var(--text-soft); }
.serving-chart-table { margin-top:8px; font-size:12px; }
.serving-chart-table > summary { cursor:pointer; color:var(--primary); }
.serving-chart-table .table-wrap { max-height:260px; overflow:auto; margin-top:8px; }
.serving-chart-table .serving-table td, .serving-chart-table .serving-table th { padding:6px 10px; font-variant-numeric:tabular-nums; }

/* Request detail drawer. */
.serving-drawer { position:fixed; top:var(--topbar-height); right:0; bottom:0; z-index:40; width:min(520px,100vw); overflow:auto; padding:22px; border-left:1px solid var(--border-strong); background:var(--surface); box-shadow:-16px 0 40px rgb(15 23 42 / 12%); }
.serving-drawer-head { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px; }
.serving-drawer-head h3 { margin:0; }
.serving-drawer-head .button { margin-left:auto; }
.serving-drawer-reason { margin:0 0 14px; padding:10px 12px; border-left:3px solid var(--red); background:var(--red-soft); color:var(--text); }
.serving-drawer-reason small { display:block; color:var(--text-soft); margin-top:4px; }
.serving-drawer .serving-review { grid-template-columns:120px minmax(0,1fr); gap:8px 12px; padding:14px; margin:16px 0; }
/* A request's steps have no glyph column: time, then the step with its duration beneath. */
.serving-drawer .serving-timeline li { grid-template-columns:62px minmax(0,1fr); }
.serving-drawer .serving-timeline li > :is(span,small) { grid-column:2; }
.serving-drawer h4 { margin:18px 0 8px; }
.serving-drawer .serving-code { max-height:320px; }

/* How fresh the page is, and what a failed poll leaves on screen: the last values, dimmed. */
#serving-tab-content.is-stale > :not(.serving-tab-error) { opacity:.55; filter:grayscale(1); }
.serving-tab-error { margin:0 0 16px; }
#serving-list .serving-table td:nth-child(6) { min-width:150px; max-width:210px; white-space:normal; }
#serving-list .serving-table td:nth-child(4) { min-width:110px; max-width:180px; white-space:normal; }
#serving-list .serving-table td:nth-child(7) { min-width:96px; }
#serving-list .serving-table td:nth-child(7) small { white-space:normal; }
/* The name keeps its words whole: when the header runs out of room, its right side wraps under it. */
.serving-detail-heading { flex-wrap:wrap; }
.serving-detail-heading > div:first-child { flex:1 1 360px; min-width:min(100%, 240px); }
.serving-title-row { flex-wrap:wrap; }
.serving-title-row h2 { min-width:min-content; }
.serving-freshness { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.serving-updated { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.serving-tiles.is-stale { opacity:.55; filter:grayscale(1); }
/* Row actions of the endpoint list: one menu per row, opening beside its button. */
.serving-row-menu { position:relative; display:inline-block; }
.serving-row-menu > summary { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text-soft); font-size:18px; line-height:1; cursor:pointer; list-style:none; }
.serving-row-menu > summary::-webkit-details-marker { display:none; }
.serving-row-menu > summary:hover, .serving-row-menu[open] > summary { background:var(--surface-hover); color:var(--text); }
.serving-row-menu > summary:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.serving-row-menu[open] > .serving-row-actions { position:absolute; right:calc(100% + 6px); top:50%; z-index:15; transform:translateY(-50%); padding:6px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 8px 24px rgb(15 23 42 / 14%); }
/* The endpoint list fits a 1440 px window: names and headers wrap, the figures do not. */
#serving-list .serving-table th, #serving-list .serving-table td { padding-left:10px; padding-right:10px; }
#serving-list .serving-table th { white-space:normal; }
#serving-list .serving-table td:first-child { min-width:170px; max-width:270px; white-space:normal; overflow-wrap:anywhere; }
#serving-list .serving-table td:last-child { width:1%; }
/* What happened inside a chart's window: a dashed rule with a diamond, named in the tooltip. */
.serving-marks { position:absolute; inset:0; pointer-events:none; }
.serving-mark { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed currentColor; opacity:.8; }
.serving-mark::before { content:''; position:absolute; top:-4px; left:-4px; width:7px; height:7px; background:currentColor; transform:rotate(45deg); }
.serving-toolbar > input[type=search] { min-height:38px; padding:9px 12px; border:1px solid var(--border-strong); border-radius:7px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; }
.serving-toolbar > input[type=search]:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
/* Test a request, and what followed a release. */
.serving-response-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.serving-test-status { min-height:20px; margin:6px 0; color:var(--text-soft); font-size:13px; font-variant-numeric:tabular-nums; }
.serving-release-impact { margin:10px 4px 2px; }
.serving-release-impact:empty { display:none; }
/* Tabs that do not fit scroll; a shadow on an edge says there is more that way. */
.serving-tabs { scrollbar-width:none; }
.serving-tabs::-webkit-scrollbar { display:none; }
.serving-tabs { background:linear-gradient(to right, var(--bg) 40%, transparent) left center / 36px 100% no-repeat local, linear-gradient(to left, var(--bg) 40%, transparent) right center / 36px 100% no-repeat local,
  linear-gradient(to right, rgb(15 23 42 / 18%), transparent) left center / 12px 100% no-repeat scroll, linear-gradient(to left, rgb(15 23 42 / 18%), transparent) right center / 12px 100% no-repeat scroll; }

@media(max-width:1200px) { .serving-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } .serving-overview { grid-template-columns:1fr; } }
@media(max-width:900px) { .serving-chart-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { .serving-tiles { grid-template-columns:repeat(2,minmax(140px,1fr)); gap:8px; } .serving-tile { padding:10px 12px; } .serving-tile-value { font-size:19px; } .serving-plot-frame { grid-template-columns:40px minmax(0,1fr); gap:6px; } .serving-plot { height:150px; } .serving-drawer { top:0; padding:16px; } .serving-status-reason { flex-basis:100%; } }
/* Below 700 px a row of a worker, request or event table is read as labelled lines. */
@media(max-width:700px) {
  #serving-tab-content .serving-table.is-stacking thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  #serving-tab-content .serving-table.is-stacking, #serving-tab-content .serving-table.is-stacking tbody, #serving-tab-content .serving-table.is-stacking tr { display:block; width:100%; min-width:0; }
  #serving-tab-content .serving-table.is-stacking tr { padding:10px 0; border-bottom:1px solid var(--border); }
  #serving-tab-content .serving-table.is-stacking td { display:grid; grid-template-columns:104px minmax(0,1fr); gap:2px 10px; padding:3px 4px; border:0; overflow-wrap:anywhere; }
  #serving-tab-content .serving-table.is-stacking td::before { content:attr(data-label); color:var(--muted); font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; white-space:normal; }
  #serving-tab-content .serving-table.is-stacking td > * { grid-column:2; min-width:0; justify-self:start; margin-left:0; }
  #serving-tab-content .serving-table.is-stacking td > .serving-meter { justify-self:stretch; }
  #serving-tab-content .serving-table.is-stacking td, #serving-tab-content .serving-table.is-stacking td :is(small, span, a, button, summary, dd) { white-space:normal; overflow-wrap:anywhere; }
  #serving-tab-content .serving-table.is-stacking td:is([data-label=Status],[data-label=Outcome],[data-label=Event],[data-label=Price]) { min-width:0; }
  #serving-tab-content .serving-table.is-stacking small { max-width:none; }
  #serving-tab-content .serving-table.is-stacking td:empty, #serving-tab-content .serving-table.is-stacking td[colspan] { display:block; }
  #serving-tab-content .serving-table.is-stacking td[colspan]::before { content:none; }
  .serving-freshness { align-self:stretch; justify-content:space-between; }
}