/* Admin › Status (P793, src/studio/status/, frame rCnY3 rounds 3–4): the frame's layout in the Studio's tokens. Amber tints
   are color-mixed from --st-warn (the frame's warn-soft and warn-line); red is the accent. Under 600px (the `an`
   container) the phone layout. */

.ss-admin { --ss-warn-soft: color-mix(in srgb, var(--st-warn) 12%, transparent); --ss-warn-line: color-mix(in srgb, var(--st-warn) 40%, transparent); }
.ss-admin > [hidden], .ss-lost[hidden], .ss-overview[hidden], .ss-calls-tab[hidden] { display: none; }
.ss-mono { font-family: var(--st-font-mono); font-variant-numeric: tabular-nums; }
.ss-faint { color: var(--st-text-faint); }
.ss-warn { color: var(--st-warn); }
.ss-bad { color: var(--st-accent-ink); }

/* ---- Header ---- */
.ss-head { align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid var(--st-line); }
.ss-head .work__title { font-size: 28px; line-height: 34px; }
.ss-sub { font-size: 15px; }
.ss-line { --ss-tone: var(--st-text-faint); display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 14px 0 0; padding: 7px 14px 7px 12px; border-radius: 12px; outline: 1px solid color-mix(in srgb, var(--ss-tone) 38%, transparent); outline-offset: -0.5px; background: color-mix(in srgb, var(--ss-tone) 11%, transparent); }
.ss-line[data-tone='ok'] { --ss-tone: var(--st-ok); }
.ss-line[data-tone='warn'] { --ss-tone: var(--st-warn); }
.ss-line[data-tone='bad'] { --ss-tone: var(--st-accent); }
.ss-line__dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ss-tone); }
.ss-line__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--ss-tone); opacity: 0; animation: ss-pulse 2.4s ease-out infinite; }
@keyframes ss-pulse { 0% { opacity: 0.45; transform: scale(0.5); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .ss-line__dot::after { animation: none; } }
/* One line (user: "So 1 line only"): the title gives way before the time does. */
.ss-line__text { display: flex; flex: 1 1 auto; align-items: baseline; gap: 16px; min-width: 0; }
.ss-line__title { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--st-text); font: 600 14px/20px var(--st-font); text-overflow: ellipsis; white-space: nowrap; }
.ss-line__sub { flex: none; margin-left: auto; color: var(--st-text-dim); font: 500 12px/16px var(--st-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ss-head__tools { display: flex; align-items: center; gap: 12px; }
.ss-head .st-seg { gap: 8px; padding: 0; outline: 0; background: none; }
.ss-head .st-seg__item { height: 32px; padding: 0 16px; border-radius: 999px; outline: 1px solid var(--st-line); outline-offset: -0.5px; color: var(--st-text-dim); font: 600 13px/32px var(--st-font); }
.ss-head .st-seg__item[aria-checked='true'] { outline-color: var(--st-text); background: var(--st-text); color: var(--st-bg); }
.ss-version { color: var(--st-text-faint); font-size: 12px; letter-spacing: 0.04em; }

.ss-overview, .ss-calls-tab { display: flex; flex-direction: column; gap: 20px; }
.ss-lost { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; outline: 1px solid var(--ss-warn-line); outline-offset: -0.5px; background: var(--ss-warn-soft); color: var(--st-text-dim); font-size: 14px; }
.ss-lost__icon { flex: none; width: 18px; height: 18px; color: var(--st-warn); }
.ss-lost__text { flex: 1; }

/* ---- Tiles ---- */
.ss-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ss-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 96px; padding: 18px 20px; border-radius: 12px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); }
.ss-tile p { margin: 0; }
.ss-tile__label { color: var(--st-text-dim); font: 600 11px/14px var(--st-font); letter-spacing: 0.08em; text-transform: uppercase; }
.ss-tile__value { color: var(--st-text); font: 700 28px/34px var(--st-font-mono); white-space: nowrap; }
.ss-tile__sub { color: var(--st-text-faint); font-size: 12px; }
.ss-tile--ok { outline-color: var(--st-ok-line); background: var(--st-ok-soft); }
.ss-tile--ok .ss-tile__value { color: var(--st-ok); }
.ss-tile--warn { outline-color: var(--ss-warn-line); background: var(--ss-warn-soft); }
.ss-tile--warn .ss-tile__value { color: var(--st-warn); }
.ss-tile--bad { outline-color: var(--st-accent-line); background: var(--st-accent-soft); }
.ss-tile--bad .ss-tile__value { color: var(--st-accent-ink); }

/* ---- Cards ---- */
.ss-card { min-width: 0; border-radius: 12px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); overflow: hidden; }
.ss-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--st-line); background: var(--st-surface-2); }
.ss-card--ok .ss-card__head { background: var(--st-ok-soft); }
.ss-card--warn .ss-card__head { background: var(--ss-warn-soft); }
.ss-card--bad .ss-card__head { background: var(--st-accent-soft); }
.ss-card__title { margin: 0; color: var(--st-text); font: 700 13px/18px var(--st-font); letter-spacing: 0.1em; text-transform: uppercase; }
.ss-card__aside { display: inline-flex; align-items: center; color: var(--st-text-faint); font: 500 11px/14px var(--st-font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: pre; }
.ss-live { display: inline-flex; align-items: center; gap: 6px; text-transform: none; }
.ss-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--st-ok-strong); }
.ss-live--caps { margin-left: auto; color: var(--st-text-dim); font: 500 12px/16px var(--st-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ss-live[data-paused='true']::before { background: var(--st-warn); }
.ss-empty-line { margin: 0; padding: 16px; color: var(--st-text-faint); font-size: 13px; }
.ss-more { display: none; }
.ss-open-calls { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ss-open-calls:hover { color: var(--st-text); }
.ss-open-calls .st-icon { width: 12px; height: 12px; }

.ss-card .an-th { padding: 10px 8px; background: var(--st-surface); font-size: 10.5px; letter-spacing: 0.08em; }
.ss-card .an-td { padding: 7px 8px; font-size: 12.5px; }
.ss-card .an-th:first-child, .ss-card .an-td:first-child { padding-left: 16px; }
.ss-card .an-th:last-child, .ss-card .an-td:last-child { padding-right: 16px; }

/* ---- Traced routes ---- */
.ss-base { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--st-line); }
.ss-base__label { color: var(--st-text-faint); font: 600 10.5px/14px var(--st-font); letter-spacing: 0.08em; text-transform: uppercase; }
.ss-base__url { flex: 1; color: var(--st-warn); font-size: 12.5px; }
.ss-copy { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: 6px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: none; color: var(--st-text); font: 500 12px/normal var(--st-font); cursor: pointer; }
.ss-copy .st-icon { width: 13px; height: 13px; }
.ss-route-cell { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.ss-method { min-width: 38px; padding: 2px 6px; border-radius: 4px; background: var(--ss-warn-soft); color: var(--st-warn); font: 600 10px/14px var(--st-font-mono); text-align: center; }
.ss-route-cell__path { color: var(--st-text); font-size: 13px; }
.ss-what { color: var(--st-text-dim); }
.ss-routes__table .an-num { color: var(--st-text); }
.ss-routes__table .an-num.ss-warn { color: var(--st-warn); }
.ss-spike > .an-td { background: var(--ss-warn-soft); }
.ss-spike__chip { padding: 1px 6px; border-radius: 4px; outline: 1px solid var(--ss-warn-line); outline-offset: -0.5px; background: var(--ss-warn-soft); color: var(--st-warn); font: 600 10px/14px var(--st-font); }
.ss-spike .ss-method { background: var(--st-ok-soft); color: var(--st-ok); }
.ss-narrow, .ss-narrow-cell { display: none; }

/* ---- Middle: services beside performance and incidents ---- */
.ss-middle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ss-side { display: flex; flex-direction: column; gap: 16px; }

.ss-svc { display: grid; grid-template-columns: 24px minmax(0, 1fr) 1px 28px 56px 64px auto; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-bottom: 1px solid var(--st-line); color: var(--st-text); font-size: 13px; }
.ss-svcs > :last-child { border-bottom: 0; }
.ss-svc--parts { cursor: pointer; }
.ss-svc--parts:hover { background: var(--st-surface-2); }
.ss-svc__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--st-surface-2); color: var(--st-text-dim); }
.ss-svc__icon .st-icon { width: 14px; height: 14px; }
.ss-svc__name { overflow: hidden; color: var(--st-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
a.ss-svc__name:hover { text-decoration: underline; }
.ss-svc__icon { grid-column: 1; }
.ss-svc__name { grid-column: 2; }
.ss-svc__bar { grid-column: 4; width: 24px; height: 3px; border-radius: 2px; background: var(--st-ok-strong); }
.ss-svc__pct { grid-column: 5; }
.ss-svc__measure { grid-column: 6; }
.ss-svc > .ss-days { grid-column: 7; }
.ss-svc::before { content: ""; grid-column: 3; grid-row: 1; width: 1px; height: 18px; background: var(--st-line); }
.ss-svc__bar--degraded { background: var(--st-warn); }
.ss-svc__bar--down { background: var(--st-accent); }
.ss-svc__bar--off, .ss-svc__bar--none { background: var(--st-surface-2); }
.ss-svc__pct { color: var(--st-text); font-size: 12px; text-align: right; }
.ss-svc__measure { overflow: hidden; color: var(--st-text-dim); font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.ss-svc--off { color: var(--st-text-faint); }
.ss-svc--off .ss-svc__name, .ss-svc--off .ss-svc__pct, .ss-svc--off .ss-svc__icon { color: var(--st-text-faint); opacity: 0.7; }

.ss-days { display: flex; gap: 2px; }
.ss-day { flex: none; width: 4px; height: 14px; border-radius: 1px; background: var(--st-surface-2); }
.ss-day--up { background: var(--st-ok-strong); }
.ss-day--degraded { background: var(--st-warn); }
.ss-day--down { background: var(--st-accent); }
.ss-day--off { background: var(--st-surface-2); opacity: 0.6; }
/* An opened row is --st-surface-2 too: its empty days would vanish into it (the YouTube downloads parent). */
.ss-svc--parts[aria-expanded="true"] .ss-day:not(.ss-day--up, .ss-day--degraded, .ss-day--down) { background: var(--st-line); }

/* YouTube downloads' paths: indented one-line rows like the services (folded by default), each opening its metrics. */
.ss-svc--part { min-height: 34px; background: var(--st-panel); font-size: 12.5px; }
.ss-svc--part::before { display: none; }
/* The chip says the state, so the name takes the divider and bar columns too: room for "YTDL · Mac" and "Up · idle". */
.ss-svc--part .ss-svc__name--part { display: flex; grid-column: 2 / 5; align-items: center; gap: 8px; padding-left: 14px; font-weight: 600; }
.ss-svc--part .ss-svc__name--part > .ss-mono { overflow: hidden; text-overflow: ellipsis; }
.ss-svc--parts[aria-expanded="true"] { background: var(--st-surface-2); }
.ss-path { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px 16px 12px 50px; border-bottom: 1px solid var(--st-line); background: var(--st-panel); }
.ss-path__detail { margin: 0; color: var(--st-text-faint); font-size: 11.5px; }
.ss-badge { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; background: var(--st-ok-soft); color: var(--st-ok); font: 600 11px/16px var(--st-font); white-space: nowrap; }
.ss-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ss-badge--degraded { background: var(--ss-warn-soft); color: var(--st-warn); }
.ss-badge--down { background: var(--st-accent-soft); color: var(--st-accent-ink); }
.ss-badge--off, .ss-badge--none { background: var(--st-surface-2); color: var(--st-text-faint); }
.ss-path__metrics { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ss-metric { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.ss-metric dt { color: var(--st-text-faint); }
.ss-metric dd { margin: 0; color: var(--st-text); text-align: right; }
.ss-metric dd.ss-bad { color: var(--st-accent-ink); }

.ss-perf__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ss-perf__cell { min-width: 0; padding: 14px 12px 16px; border-right: 1px solid var(--st-line); border-bottom: 1px solid var(--st-line); }
.ss-perf__cell:nth-child(4n) { border-right: 0; }
.ss-perf__cell:nth-child(n + 5) { border-bottom: 0; }
.ss-perf__cell p { margin: 0; }
.ss-perf__label { color: var(--st-text-dim); font: 600 10px/14px var(--st-font); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.ss-perf__value { margin-top: 10px !important; color: var(--st-text); font: 500 18px/24px var(--st-font-mono); }
.ss-perf__unit { color: var(--st-text-faint); font: 400 11px/14px var(--st-font-mono); }

.ss-incs { max-height: 336px; margin: 0; padding: 0; overflow-y: auto; list-style: none; } /* grows past ~6 rows: scrolls inside the card, never pushes the page */
.ss-inc { display: flex; justify-content: space-between; gap: 12px; margin: 0 12px; padding: 10px 0 10px 10px; border-bottom: 1px solid var(--st-line); box-shadow: inset 3px 0 0 var(--st-warn); }
.ss-inc:last-child { border-bottom: 0; }
.ss-inc--down { box-shadow: inset 3px 0 0 var(--st-accent); }
.ss-inc p { margin: 0; }
.ss-inc__title { color: var(--st-text); font-size: 13px; font-weight: 500; }
.ss-inc__detail { margin-top: 2px !important; color: var(--st-text-faint); font-size: 11.5px; }
.ss-inc__when { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--st-text-faint); font-size: 11.5px; }
.ss-inc__state { color: var(--st-ok); font: 700 10.5px/14px var(--st-font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.ss-inc__state--now { color: var(--st-accent-ink); }

/* ---- Error breakdown ---- */
.ss-errs { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.ss-err { display: grid; grid-template-columns: 160px minmax(0, 1fr) 48px; align-items: center; gap: 12px; }
.ss-err__kind { color: var(--st-warn); font-size: 12px; }
.ss-err--bad .ss-err__kind { color: var(--st-accent-ink); }
.ss-err__track { position: relative; height: 3px; }
.ss-err__fill { position: absolute; inset: 0 auto 0 0; width: max(6px, calc(var(--w) * 100%)); border-radius: 2px; background: var(--st-warn); }
.ss-err--bad .ss-err__fill { background: var(--st-accent); }
.ss-err__n { color: var(--st-text); font-size: 12px; text-align: right; }

/* ---- Calls ---- */
.ss-calls .ss-call__song { color: var(--st-text); font-weight: 400; white-space: nowrap; }
.ss-call__caller { white-space: nowrap; }
.ss-call__caller .ss-mono { color: var(--st-text-dim); }
.ss-plan { color: var(--st-text-faint); font-size: 11px; font-weight: 500; }
.ss-plan--pro { color: var(--st-warn); font-weight: 700; }
/* D809: a signed-in caller, one link to Admin › User. */
.ss-user { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; color: var(--st-text-dim); text-decoration: none; vertical-align: middle; }
.ss-user .fb-avatar { width: 18px; height: 18px; font-size: 10px; }
/* One width for every caller (user: "so we have all same width"): the flag and plan line up down the column. */
.ss-user__email { display: inline-flex; flex: none; width: 108px; min-width: 0; overflow: hidden; }
/* Shortened in the middle: the name gives way, the domain stays (on a phone both keep a few letters, below). */
.ss-user__local { flex: none; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Another domain is cut at its end first: "lee.p@exampl…". */
.ss-user__domain { flex: 0 6 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ss-call__caller { white-space: nowrap; }
.ss-call__caller > .ss-flag, .ss-call__caller > .ss-plan { margin-left: 6px; }
.ss-flag { font-size: 13px; line-height: 1; vertical-align: middle; }
.ss-user--guest { padding: 0; border: 0; background: none; font: inherit; cursor: default; }
button.ss-user--guest { cursor: pointer; }
.ss-user--guest .fb-avatar { background: var(--st-surface-2); color: var(--st-text-faint); }
.ss-plan--admin { color: var(--st-accent-ink); font-weight: 700; }
.ss-user:hover .ss-user__email { color: var(--st-text); text-decoration: underline; }
.ss-route { color: var(--st-warn); white-space: nowrap; }
.ss-call__inside { white-space: nowrap; }
.ss-call__ms, .ss-call__at { color: var(--st-text) !important; }
.ss-call__ms { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The song: thumbnail, title (ellipsized, the whole title on hover), YouTube icon. */
.ss-songcell { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 220px; }
.ss-thumb { position: relative; flex: none; width: 40px; height: 24px; overflow: hidden; border-radius: 4px; background: var(--st-surface-2); box-shadow: inset 0 0 0 1px var(--st-line); }
.ss-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s; }
.ss-thumb__img[data-loaded] { opacity: 1; }
.ss-song { min-width: 0; overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; }
.ss-songcell--search { flex-direction: column; align-items: flex-start; gap: 0; }
.ss-songcell--search .ss-song { max-width: 100%; }
.ss-search-count { color: var(--st-text-dim); font-size: 11px; white-space: nowrap; }
a.ss-song:hover { text-decoration: underline; }
.ss-song__yt { display: inline-flex; flex: none; margin-left: -2px; color: var(--st-text-faint); }
.ss-song__yt:hover { color: var(--st-accent); }
.ss-song__yt .st-icon { width: 14px; height: 14px; }
.ss-held { color: var(--st-text-dim); white-space: nowrap; }
.ss-call__at { color: var(--st-text-faint) !important; }
.ss-code { display: inline-block; min-width: 32px; padding: 1px 6px; border-radius: 4px; background: var(--st-ok-soft); color: var(--st-ok); font: 700 10.5px/16px var(--st-font-mono); text-align: center; }
.ss-code--warn { background: var(--ss-warn-soft); color: var(--st-warn); }
.ss-code--bad { background: var(--st-accent-soft); color: var(--st-accent-ink); }
.ss-in { display: inline-block; margin-right: 6px; padding: 2px 6px; border-radius: 4px; background: var(--st-surface-2); color: var(--st-text); font: 600 10.5px/14px var(--st-font); }
.ss-in__ms { color: var(--st-text-faint); font-family: var(--st-font-mono); font-weight: 400; }
.ss-in--bad .ss-in__ms { color: var(--st-accent-ink); }
/* Where the chart came from: outlined, so it reads apart from the timed steps beside it. */
.ss-in__short { display: none; text-decoration: none; }
.ss-in--src { background: none; box-shadow: inset 0 0 0 1px var(--st-line-strong, var(--st-line)); }

.ss-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ss-select { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; outline: 1px solid var(--st-line); outline-offset: -0.5px; color: var(--st-text-faint); font-size: 13px; }
.ss-select__native { max-width: 130px; border: 0; background: none; color: var(--st-text); font: 600 13px/normal var(--st-font); cursor: pointer; }
.ss-chips { display: flex; gap: 8px; }
.ss-filters .ss-chip { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.ss-filters .ss-chip[aria-pressed='true'] { outline-color: var(--st-text); background: var(--st-text); color: var(--st-bg); }
.ss-chip .st-icon { width: 15px; height: 15px; }
.ss-filters .ss-search { width: 280px; height: 40px; }
/* The phone's fold (round 5): on a laptop the choices sit in the row as before, in the same order. */
.ss-filters__choices { display: contents; }
.ss-filters .ss-filter-btn, .ss-filters .ss-clear { display: none; }
.ss-filters .ss-search { order: 1; }
.ss-slow { order: 2; }
.ss-live--caps { order: 3; }
.ss-calls-card .ss-card__head { padding: 16px; }
.ss-calls-tab .ss-call { cursor: pointer; }
.ss-calls-tab .ss-call:hover > .an-td, .ss-call--open > .an-td { background: var(--st-surface-2); }
.ss-call__code { white-space: nowrap; }
.ss-toggle { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; padding: 0; border: 0; background: none; color: var(--st-text-faint); vertical-align: middle; cursor: pointer; }
.ss-toggle .st-icon { width: 14px; height: 14px; }
/* A chart request's polls folded into one row (×5, Σ ms, then the wait from first to last); it opens to its calls. */
.ss-calls tr[hidden] { display: none !important; }
.ss-call--group { cursor: pointer; }
.ss-count { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--st-line); color: var(--st-text-dim); font: 600 10.5px/16px var(--st-font-mono); vertical-align: middle; }
.ss-sum__span { color: var(--st-text-faint); }
.ss-call--group:hover > .an-td, .ss-call--expanded > .an-td, .ss-call--child > .an-td { background: var(--st-surface-2); }
.ss-call--child > .an-td:first-child { box-shadow: inset 2px 0 0 var(--st-line-strong, var(--st-line)); }
.ss-detail-cell { padding: 0 !important; border-bottom: 1px solid var(--st-line); }
.ss-detail { padding: 16px 16px 20px; }
.ss-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ss-detail__head p { margin: 0; }
.ss-detail__title { color: var(--st-text); font-size: 15px; font-weight: 700; }
.ss-detail__sub { margin-top: 4px !important; color: var(--st-text-faint); font-size: 12px; }
.ss-detail__actions { display: flex; flex: none; align-items: center; gap: 8px; }
.ss-detail__actions .st-icon { width: 14px; height: 14px; }
.ss-jaeger { text-decoration: none; }
.ss-jaeger__short { display: none; }
.ss-older { align-self: center; justify-content: center; width: 100%; border-top: 1px solid var(--st-line); border-radius: 0; }

.ss-fall { display: flex; flex-direction: column; gap: 6px; }
.ss-fall__axis, .ss-span { display: grid; grid-template-columns: minmax(180px, 28%) minmax(0, 1fr) minmax(150px, 16%); align-items: center; gap: 16px; }
.ss-fall__ticks { position: relative; height: 16px; }
.ss-fall__tick { position: absolute; top: 0; left: calc(var(--at) * 100%); color: var(--st-text-faint); font: 400 11px/16px var(--st-font-mono); transform: translateX(-50%); white-space: nowrap; }
.ss-fall__tick:first-child { transform: none; }
.ss-span__name { padding-left: calc(var(--depth) * 14px); color: var(--st-text); font: 400 12.5px/20px var(--st-font-mono); white-space: nowrap; }
.ss-span__name::before { content: ""; display: inline-block; width: 2px; height: 13px; margin-right: 8px; border-radius: 1px; background: var(--st-ok-strong); vertical-align: -2px; }
.ss-span__track { position: relative; height: 12px; border-radius: 2px; background: var(--st-panel); }
.ss-span__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 100%); width: max(3px, calc(var(--w) * 100%)); border-radius: 2px; background: var(--st-ok-strong); }
.ss-span__time { color: var(--st-text-dim); font: 400 12.5px/20px var(--st-font-mono); white-space: nowrap; }
.ss-span--root .ss-span__bar, .ss-span--root .ss-span__name::before { background: var(--st-line-control); }
.ss-span--warn .ss-span__bar, .ss-span--warn .ss-span__name::before { background: var(--st-warn); }
.ss-span--bad .ss-span__bar, .ss-span--bad .ss-span__name::before { background: var(--st-accent); }
.ss-span--bad .ss-span__time { color: var(--st-accent-ink); }

/* ---- States and footer ---- */
.ss-foot { margin: 8px 0 0; color: var(--st-text-faint); font: 500 11px/16px var(--st-font-mono); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.ss-empty { padding: 48px 16px; }
.ss-skeleton { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.ss-skeleton__tile { min-height: 96px; animation: fb-pulse 1.4s ease-in-out infinite; }
.ss-skeleton__bar { display: block; height: 14px; border-radius: 6px; background: var(--st-surface-2); animation: fb-pulse 1.4s ease-in-out infinite; }
.ss-list .ss-skeleton { padding: 16px; }

@container an (width < 1100px) {
  .ss-middle { grid-template-columns: minmax(0, 1fr); }
  .ss-what { display: none; }
}

/* A phone: the frame's KuliA / Gu7U9 — tiles 2 × 2, short lists folded under "+ N more", 14 squares, each call two lines. */
@container an (width < 600px) {
  .ss-head { flex-direction: column; gap: 16px; padding-bottom: 4px; border-bottom: 0; }
  .ss-head__text { width: 100%; }
  .ss-sub, .ss-version { display: none; }
  /* Its own block: room above the tabs whatever gap .fb-admin__head sets on a phone. */
  .ss-head .ss-line { width: 100%; margin: 2px 0 16px; padding: 9px 14px 9px 12px; box-sizing: border-box; }
  .ss-head .st-seg__item { height: 36px; padding: 0 18px; font-size: 14px; line-height: 36px; }
  .ss-overview { gap: 14px; }
  .ss-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ss-tile { min-height: 0; padding: 14px; }
  .ss-tile__value { font-size: 22px; line-height: 28px; }
  .ss-tile__sub { display: none; }
  .ss-more { display: block; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--st-line); background: none; color: var(--st-text-dim); font: 500 13px/18px var(--st-font); text-align: left; cursor: pointer; }
  .ss-base, .ss-method, .ss-wide, .ss-routes__table thead { display: none; }
  .ss-narrow { display: table-cell; color: var(--st-text-faint); }
  .ss-routes__list:not(.ss-all) tbody > tr:nth-child(n + 5) { display: none; }
  .ss-middle, .ss-side { display: contents; }
  .ss-incidents { order: 1; }
  .ss-newest { order: 2; }
  .ss-foot { order: 3; }
  .ss-svc { grid-template-columns: minmax(0, 1fr) 56px auto; min-height: 36px; gap: 8px; }
  .ss-svc::before, .ss-svc__icon, .ss-svc__bar, .ss-svc__measure { display: none; }
  .ss-svc__name { grid-column: 1; }
  .ss-svc__pct { grid-column: 2; }
  .ss-svc > .ss-days { grid-column: 3; }
  .ss-svc .ss-day:nth-child(-n + 16) { display: none; }
  .ss-svcs:not(.ss-all) .ss-fold { display: none; }
  .ss-svc--part .ss-svc__name--part { grid-column: 1; }
  .ss-path { padding: 6px 16px 10px 28px; }
  .ss-perf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ss-wide-cell { display: none; }
  .ss-narrow-cell { display: block; }
  .ss-perf__cell { border-right: 1px solid var(--st-line) !important; border-bottom: 1px solid var(--st-line) !important; }
  .ss-perf__cell:nth-child(even of :not(.ss-wide-cell)) { border-right: 0 !important; }
  .ss-perf__cell:last-child, .ss-perf__cell:nth-last-child(4) { border-bottom: 0 !important; }
  .ss-perf__value { font-size: 16px; }
  .ss-inc__when { display: none; }
  .ss-inc__detail { font-family: var(--st-font-mono); }
  .ss-err { grid-template-columns: 130px minmax(0, 1fr) 36px; }

  /* Each call a dense two-line row (P793 round 5): time, route, the inside pills, status, ms; then song, caller and plan. */
  .ss-calls thead { display: none; }
  .ss-calls, .ss-calls tbody { display: block; }
  .ss-calls .an-tr { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 4px; padding: 8px 14px; border-bottom: 1px solid var(--st-line); }
  .ss-calls .an-tr::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
  /* The stretchy cells start at 0 wide, so a line never wraps: they grow to their text (inside pills first), then clip. */
  .ss-calls .an-td { display: block; padding: 0 !important; border: 0; font-size: 12px; line-height: 16px; white-space: nowrap; }
  .ss-calls .ss-none { display: none; }
  .ss-call__at { order: 1; flex: none; font-size: 11.5px !important; }
  .ss-call__route { order: 2; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ss-call__code { order: 3; flex: none; margin-left: auto; }
  .ss-calls .ss-code { min-width: 28px; padding: 0 4px; font-size: 10px; line-height: 15px; }
  .ss-call__ms { order: 4; flex: none; text-align: right; }
  /* Song and caller share the second line: the title ellipsizes first, so the caller (avatar, email, flag, plan) stays. */
  .ss-calls .ss-call__song { order: 6; flex: 1 1 0; min-width: min(124px, 42%); max-width: max-content; color: var(--st-text-dim); }
  .ss-songcell { gap: 6px; max-width: none; }
  .ss-thumb { width: 36px; height: 20px; border-radius: 3px; }
  .ss-call__caller { order: 7; flex: none; font-size: 11px !important; }
  /* max-width keeps the caller on the song's line (a flex line wraps on its whole width); the email gives way inside it. */
  .ss-call__caller:has(.ss-user) { display: flex; flex: 0 1 auto; align-items: center; gap: 5px; min-width: 0; max-width: calc(100% - min(124px, 42%) - 6px); overflow: hidden; }
  .ss-call__caller:has(.ss-user--guest) { max-width: none; }
  /* The email gives way; the flag and the plan stay whole (D810). */
  .ss-call__caller > .ss-user { flex: 0 1 auto; min-width: 0; }
  .ss-call__caller > .ss-flag, .ss-call__caller > .ss-plan { flex: none; margin-left: 0; }
  .ss-user .fb-avatar { width: 16px; height: 16px; font-size: 9px; }
  .ss-user__email { flex: 0 1 100px; width: 100px; }
  .ss-user__domain { display: none; } /* a phone shows the name alone, like Gmail's; the full email is the link's title */
  /* Inside's steps sit after the route on the first line (two-line rows): they take what's left before the status,
     one line tall, so a step that doesn't fit wraps out of sight; the first (a chart's source) ellipsizes instead. */
  .ss-calls .ss-call__inside:not(.ss-none) { order: 2; display: flex; flex-wrap: wrap; flex: 1 1 0; min-width: 0; height: 16px; overflow: hidden; }
  .ss-calls .ss-in { flex: none; margin: 0.5px 4px 0.5px 0; padding: 0 4px; font-size: 10px; line-height: 15px; }
  .ss-calls .ss-in:first-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ss-calls .ss-in:last-child { margin-right: 0; }
  /* Short codes (CHD cached) and the text face for the state word, so the commonest chip fits whole at 360. */
  .ss-calls .ss-in__long { display: none; }
  .ss-calls .ss-in__short { display: inline; }
  .ss-calls .ss-in__ms { font-family: var(--st-font); }
  .ss-in--bad { background: var(--st-accent-soft); color: var(--st-accent-ink); }
  /* The chevron becomes the whole row's (invisible) button: a keyboard reaches each call, and focus comes back to it. */
  .ss-calls--open .ss-toggle { position: absolute; inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; }
  .ss-calls--open .ss-toggle .st-icon { visibility: hidden; }
  .ss-calls:not(.ss-calls--open) .ss-toggle:not(.ss-toggle--group) { display: none; }
  /* A group's whole row is its button, like a call's on the Calls tab; the phone keeps Σ ms, the span is on hover. */
  .ss-calls .ss-toggle--group { position: absolute; inset: 0; width: auto; height: auto; margin: 0; border-radius: 0; }
  .ss-calls .ss-toggle--group .st-icon { visibility: hidden; }
  .ss-calls .ss-count { padding: 0 3px; font-size: 10px; line-height: 15px; }
  .ss-sum__span, .ss-sum__sigma { display: none; } /* ×N already says it's a sum (the title spells it out): room for the source chip */
  .ss-calls .ss-call--expanded, .ss-calls .ss-call--child { background: var(--st-surface-2); }
  .ss-calls .ss-call--child { box-shadow: inset 2px 0 0 var(--st-line-strong, var(--st-line)); }
  .ss-calls .ss-call--child > .an-td:first-child { box-shadow: none; }
  /* ×N sits right after the source chip and never drops: a group's line keeps to one row, the chip shortens first, other steps hide. */
  .ss-calls .ss-call--group > .ss-call__inside { flex-wrap: nowrap; }
  .ss-calls .ss-call--group .ss-call__inside > .ss-in:not(:first-child) { display: none; }
  .ss-calls .ss-call--group .ss-count { flex: none; margin: 0.5px 0; }
  .ss-calls .ss-call--group .ss-call__inside > .ss-in:first-child { margin-right: 3px; }
  .ss-detail-row { display: block; }
  .ss-detail-cell { display: block; }
  .ss-detail { padding: 4px 16px 16px; background: var(--st-surface-2); }
  .ss-detail { display: flex; flex-direction: column; }
  .ss-detail > .ss-detail__head { order: 2; margin: 14px 0 0; }
  .ss-detail__head > div:first-child { display: none; }
  .ss-calls .ss-call--open > .an-td { background: none; }
  .ss-calls .ss-call--open { background: var(--st-surface-2); border-bottom: 0; }
  .ss-jaeger__long { display: none; }
  .ss-jaeger__short { display: inline; }
  .ss-fall__axis { display: none; }
  .ss-span { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name time" "track track"; gap: 4px 8px; }
  .ss-span__name { grid-area: name; padding-left: 0; }
  .ss-span__name::before { display: none; }
  .ss-span__time { grid-area: time; text-align: right; }
  .ss-span__track { grid-area: track; height: 10px; }
  /* Filters fold to one row: "Filters · N", the caller search, the live dot; the button opens the choices under it. */
  .ss-filters { flex-wrap: wrap; gap: 8px; }
  .ss-filters .ss-filter-btn { display: inline-flex; flex: none; order: 0; }
  .ss-filters .ss-search { order: 1; flex: 1; width: auto; min-width: 0; height: 36px; }
  .ss-live--caps { order: 2; flex: none; gap: 0; margin-left: 0; font-size: 0; }
  .ss-live--caps::before { width: 8px; height: 8px; }
  .ss-filters__choices { display: none; order: 3; flex-basis: 100%; flex-wrap: wrap; align-items: center; gap: 8px; }
  .ss-filter-btn[aria-expanded='true'] + .ss-filters__choices { display: flex; }
  .ss-filter-btn[aria-expanded='true'] { outline-color: var(--st-text); }
  .ss-chips { order: 1; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .ss-slow { order: 0; }
  .ss-filters .ss-chip { flex: none; height: 36px; padding: 0 14px; }
  .ss-select { flex: 1 1 0; min-width: 0; height: 36px; }
  .ss-select__native { flex: 1; min-width: 0; max-width: none; }
  .ss-filters .ss-clear:not([hidden]) { display: inline-flex; flex: none; }
  .ss-route-cell { white-space: normal; }
  .ss-route-cell__path { font-size: 12px; overflow-wrap: anywhere; }
  .ss-calls-card .ss-card__head { display: none; }
}

/* The narrowest phones: the route's choice keeps the room its "Route" label took (the select is labelled for a reader). */
@container an (width < 360px) {
  .ss-select__label { display: none; }
}

/* ---- A call's bottom sheet on a phone (calls.ts, round 5): ui/phone-sheet's, on <body>, so outside the `an` container ---- */
.ss-sheet .ph-sheet__panel { max-height: 85%; animation: ss-sheet-up 0.22s ease-out; }
@keyframes ss-sheet-up { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .ss-sheet .ph-sheet__panel { animation: none; } }
.ss-sheet .ph-sheet__title { font: 600 13px/18px var(--st-font-mono); overflow-wrap: anywhere; }
.ss-sheet .ph-sheet__body { padding-bottom: 8px; }
.ss-sheet .ss-detail { padding: 0; }
.ss-sheet .ss-detail__title { display: none; }
.ss-sheet .ss-detail__head { flex-direction: column; align-items: stretch; gap: 10px; }
.ss-sheet .ss-detail__sub { margin: 0 !important; font: 400 11.5px/16px var(--st-font-mono); }
.ss-sheet .ss-detail__actions { flex-wrap: wrap; }
.ss-sheet .ss-fall { gap: 8px; }
.ss-sheet .ss-fall__axis { display: none; }
.ss-sheet .ss-span { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name time" "track track"; gap: 3px 8px; }
.ss-sheet .ss-span__name { grid-area: name; overflow: hidden; padding-left: calc(var(--depth) * 10px); font-size: 12px; line-height: 16px; text-overflow: ellipsis; }
.ss-sheet .ss-span__name::before { height: 11px; margin-right: 6px; }
.ss-sheet .ss-span__time { grid-area: time; font-size: 11.5px; line-height: 16px; text-align: right; }
.ss-sheet .ss-span__track { grid-area: track; height: 6px; }