/* Admin › Feedback, /studio/admin/feedback (P169, src/studio/feedback/admin/),
   design KGXLg and its states. The History page's search and chips
   (history.css), the Studio's primitives, the Feedback dialog's rows, notes,
   tags and states (feedback.css), and the Cues row's Undo toast (cues.css). */

.fb-admin { color: var(--st-text); font-family: var(--st-font); }

.fb-admin__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.fb-eyebrow { margin: 0 0 2px; color: var(--st-text-faint); font-size: 13px; }
.fb-admin__head .work__title { margin: 0; }
.fb-pills { display: flex; gap: 8px; }
/* Held until the list's answer brings the counts (no flicker). */
.fb-pills[data-waiting] { visibility: hidden; }
/* The Dashboard's db-tag. */
.fb-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  outline: 1px solid var(--st-line);
  outline-offset: -1px;
  background: var(--st-surface-2);
  color: var(--st-text-dim);
  font: 400 12px/16px var(--st-font-mono);
  white-space: nowrap;
}
.fb-pill--open { outline-color: var(--st-accent); background: var(--st-accent-soft); color: var(--st-accent-ink); }

.fb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.fb-filters .st-seg__item { padding: 7px 14px; font-size: 13px; }
.fb-filters__divider { width: 1px; height: 20px; background: var(--st-line); }
.fb-filters__label { color: var(--st-text-dim); font-size: 13px; }
.fb-filters .fb-search { width: 280px; margin-left: auto; }
.fb-search .hi-search__input { --st-focus-ring-style: none; }

.fb-list { display: flex; flex-direction: column; margin: 0; padding: 0; border-radius: 12px; outline: 1px solid var(--st-line); outline-offset: -0.5px; overflow: hidden; background: var(--st-surface); list-style: none; }
.fb-list:has(> .fb-state, > .fb-skeleton) { outline: 0; background: none; }
.fb-list > .fb-error { padding: 10px 16px; margin: 0; }

.fb-item { display: flex; gap: 14px; padding: 16px; border-bottom: 1px solid var(--st-line); }
.fb-item:last-child { border-bottom: 0; }
.fb-item[data-expanded='true'] { background: var(--st-panel); }
.fb-avatar { position: relative; display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--st-avatar-bg); color: var(--st-avatar-ink); font: 600 14px/1 var(--st-font); }
.fb-avatar__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fb-item__main { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.fb-item__head { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.fb-item__name { font-weight: 600; white-space: nowrap; }
.fb-item__email { overflow: hidden; color: var(--st-text-dim); text-overflow: ellipsis; white-space: nowrap; }
.fb-plan { padding: 2px 6px; border-radius: 5px; outline: 1px solid var(--st-line); outline-offset: -0.5px; color: var(--st-chord-ink); font: 500 11px/14px var(--st-font-mono); }
.fb-item__spacer { flex: 1; }
.fb-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px; outline: 1px solid var(--st-line); outline-offset: -0.5px; color: var(--st-text-dim); font-size: 12px; }
.fb-item__when { color: var(--st-text-faint); font-size: 12px; white-space: nowrap; }
.fb-item__body { display: flex; flex-direction: column; gap: 10px; }
.fb-item__message { margin: 0; color: var(--st-text); font-size: 13.5px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-item__message--clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.fb-item__shots { display: inline-flex; align-items: center; gap: 5px; margin: 0; color: var(--st-text-faint); font-size: 12px; }
.fb-item__shots .st-icon { width: 12px; height: 12px; }
.fb-song { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; color: var(--st-accent-ink); font-size: 13px; text-decoration: none; }
.fb-song:hover { text-decoration: underline; }
.fb-song .st-icon { width: 14px; height: 14px; }
.fb-resolved-by { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--st-ok); font-size: 13px; }
.fb-resolved-by .st-icon { width: 14px; height: 14px; }

.fb-thumbs { display: flex; gap: 8px; }
.fb-thumb { display: grid; place-items: center; width: 176px; height: 110px; padding: 0; border: 0; border-radius: 8px; outline: 1px solid var(--st-line); outline-offset: -0.5px; overflow: hidden; background: var(--st-surface-2); color: var(--st-text-faint); font-size: 11px; cursor: zoom-in; }
.fb-thumb[data-loading] { animation: fb-pulse 1.4s ease-in-out infinite; }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-thumb--sm { width: 56px; height: 36px; cursor: pointer; }
.fb-thumb[aria-current='true'] { outline: 2px solid var(--st-accent); outline-offset: -2px; }

.fb-item__foot { display: flex; align-items: center; gap: 12px; }
.fb-item__foot[hidden] { display: none; }
.fb-item__received { margin: 0; color: var(--st-text-faint); font-size: 12px; }

.fb-resolve { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; outline: 1px solid var(--st-line-strong); outline-offset: -0.5px; background: var(--st-surface); }
.fb-textarea--note { min-height: 72px; }
.fb-resolve__actions { display: flex; gap: 8px; }

.fb-skeleton__row--tall { height: 82px; }
.fb-denied { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 420px; margin: 12vh auto 0; text-align: center; }
.fb-denied__mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; background: var(--st-surface-2); color: var(--st-text-dim); }
.fb-denied__mark .st-icon { width: 22px; height: 22px; }

/* ---- The lightbox -------------------------------------------------------------------- */

.fb-lightbox { width: min(900px, calc(100vw - 48px)); padding: 20px; border: 0; border-radius: 16px; outline: 1px solid var(--st-line); background: var(--st-surface); color: var(--st-text); }
.fb-lightbox::backdrop { background: color-mix(in srgb, #000 70%, transparent); }
.fb-lightbox__head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.fb-lightbox__title { flex: 1; margin: 0; color: var(--st-text-dim); font: 400 14px/20px var(--st-font); }
.fb-lightbox__stage { display: flex; align-items: center; gap: 16px; }
.fb-lightbox__img { flex: 1; min-width: 0; max-height: 70vh; border-radius: 10px; object-fit: contain; background: var(--st-panel); }
.fb-lightbox__step { flex: none; border-radius: 50%; outline: 1px solid var(--st-line); }
.fb-lightbox__step[hidden] { visibility: hidden; display: inline-grid; }
/* View full size: the image at its own size, scrolling inside the stage; ←/→ and the strip still step. */
.fb-lightbox[data-full] .fb-lightbox__stage { max-height: 70vh; overflow: auto; align-items: flex-start; }
.fb-lightbox[data-full] .fb-lightbox__img { flex: none; max-width: none; max-height: none; }
.fb-lightbox[data-full] .fb-lightbox__step { display: none; }
.fb-lightbox__strip { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }

/* ---- Admin › Plan limits (P190, src/studio/plan-limits/): the Feedback dialog's field, the Storage checkbox -------- */

.pl-admin { display: flex; flex-direction: column; gap: 16px; }
.pl-admin .fb-admin__head { margin-bottom: 4px; }
.pl-changed { margin: 0; color: var(--st-text-faint); font-size: 13px; }
.pl-card { padding: 16px; border-radius: 12px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); }
.pl-banner:empty { display: none; }
.pl-banner { display: flex; align-items: center; gap: 12px; }
.pl-banner__text { margin: 0; font-size: 13px; }
.pl-banner__text--error { color: var(--st-error-ink); }
.pl-banner__text--info { color: var(--st-ok); }

.pl-enforce { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.pl-enforce__row { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; cursor: pointer; }
.pl-warnings { flex: 1; min-width: min(240px, 100%); margin: 0; padding: 0; list-style: none; }
.pl-warning { color: var(--st-warn); font-size: 12.5px; line-height: 18px; }
.pl-confirm:empty { display: none; }
.pl-enforce .pl-confirm { flex-basis: 100%; }
.pl-confirm { min-width: 0; }
.pl-confirm .lib-confirm { flex-wrap: wrap; }
.pl-confirm .lib-confirm__text { flex: 1 1 14em; overflow: visible; white-space: normal; line-height: 1.5; }
@media (max-width: 480px) { .pl-confirm .lib-confirm__text { flex-basis: 100%; } }

.pl-card--table { padding: 0; overflow-x: auto; }
.pl-table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.pl-table th:first-child { width: 28%; }
.pl-th { padding: 12px 16px; border-bottom: 1px solid var(--st-line); color: var(--st-text-dim); font: 500 12px/16px var(--st-font); text-align: left; }
.pl-row + .pl-row > * { border-top: 1px solid var(--st-line); }
.pl-row > .pl-label { padding-top: 17px; }
.pl-label { padding: 12px 16px; color: var(--st-text); font: 500 13px/18px var(--st-font); text-align: left; vertical-align: top; }
.pl-td { padding: 10px 16px; vertical-align: top; }
.pl-cell { display: grid; grid-template-columns: 96px auto; align-items: center; gap: 4px 12px; }
.pl-input {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  outline: 1px solid var(--st-line);
  outline-offset: -0.5px;
  background: var(--st-panel);
  color: var(--st-text);
  font: 400 13px/18px var(--st-font-mono);
}
.pl-input:disabled { color: var(--st-text-faint); }
.pl-cell[data-changed] .pl-input { outline-color: var(--st-text-dim); }
.pl-input[aria-invalid='true'] { outline-color: var(--st-error); }
.pl-unlimited { display: inline-flex; align-items: center; gap: 6px; color: var(--st-text-dim); font-size: 12.5px; cursor: pointer; }
.pl-check { margin: 0; accent-color: var(--st-accent); }
.pl-note:empty { display: none; }
.pl-note { grid-column: 1 / -1; margin: 0; color: var(--st-text-faint); font-size: 11.5px; line-height: 16px; }
.pl-note--error { color: var(--st-error-ink); }

.pl-fair__title { margin: 0; font: 600 14px/20px var(--st-font); }
.pl-fair__body { margin: 4px 0 12px; color: var(--st-text-dim); font-size: 13px; }
.pl-fair__fields { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.pl-fair__field .pl-label { padding: 0 0 6px; }
.pl-launch__rows { display: flex; flex-direction: column; gap: 12px; }
.pl-launch__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.pl-launch__row .pl-enforce__row { min-width: 140px; font: 500 13px/18px var(--st-font); }
.pl-launch__price { color: var(--st-text-dim); font-size: 13px; }
.pl-launch__row .pl-note, .pl-launch__row .pl-confirm { flex-basis: 100%; }
/* A switch row's hint, under its name (switch 30px + the label's 10px gap): Admin › Plan limits' Offline card. */
.pl-launch__hint { flex-basis: 100%; margin: 0; padding-left: 40px; color: var(--st-text-dim); font-size: 12.5px; line-height: 18px; }
.pl-fair__title + .pl-launch__rows { margin-top: 12px; }
.pl-note--warn { color: var(--st-warn); }

.pl-actions { display: flex; align-items: center; gap: 8px; }
.pl-actions__spacer { flex: 1; }

/* ---- Admin › Analytics (P232, src/studio/analytics/): plan limits' cards and banner, the History chips, plain CSS bars ---- */

.an-admin { display: flex; flex-direction: column; gap: 16px; container: an / inline-size; }
.an-admin .fb-admin__head { flex-wrap: wrap; margin-bottom: 4px; }
/* A new range keeps the old numbers on screen, dimmed, until its answer draws. */
.an-admin[aria-busy='true'] :is(.an-content, .an-users):not(:has(> .fb-skeleton)) { opacity: 0.55; transition: opacity 120ms 150ms; }
.an-content { display: flex; flex-direction: column; gap: 16px; }
/* Tabs (P261): the Feedback dialog's segmented tablist, sized to its labels; each panel takes the content width. */
/* Five tabs outgrow a 320 px phone: the strip scrolls sideways instead of the page (P484). */
.an-tabs { align-self: flex-start; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; --st-focus-offset: -2px; }
.st-seg .an-tab { padding: 6px 14px; font-size: 13px; }
.an-panel { display: flex; flex-direction: column; gap: 16px; }
.an-panel[hidden], .an-head__tools > [hidden] { display: none; }
.an-head__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.an-updated { color: var(--st-text-faint); font-size: 12px; white-space: nowrap; }
.an-hint { margin: -8px 0 0; color: var(--st-text-dim); font-size: 13px; line-height: 18px; }
.an-banner { padding: 16px; border-radius: 12px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); }

.an-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.an-card__title { margin: 0; font: 600 15px/20px var(--st-font); }
.an-watch__lead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.an-watch__stat { display: flex; align-items: center; gap: 14px; padding-left: 24px; border-left: 1px solid var(--st-line); font-variant-numeric: tabular-nums; }
.an-watch__stat[hidden] { display: none; }
.an-watch__total { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.an-watch__n { color: var(--st-text); font: 700 24px/1 var(--st-font); }
.an-watch__label { color: var(--st-text-faint); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.an-watch__deltas { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.an-watch__delta { padding: 2px 8px; border-radius: 999px; background: var(--st-surface-2); color: var(--st-text-faint); font-size: 11.5px; white-space: nowrap; }
.an-watch__delta b { color: var(--st-ok); font-weight: 600; }
@container an (width < 640px) {
  .an-watch__lead { width: 100%; }
  .an-watch__stat { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--st-line); }
  .an-watch__deltas { flex-direction: row; }
}
.an-card__sub { margin: 2px 0 0; color: var(--st-text-faint); font-size: 12.5px; line-height: 18px; }
.an-quiet { margin: 0; padding: 20px 0; color: var(--st-text-dim); font-size: 13px; text-align: center; }
.an-scroll { overflow-x: auto; }

/* Summary tiles */
.an-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
/* Seven tiles (Google Analytics) wrap 7, 4 + 3, then pairs with the last one full width. */
.an-kpis:has(> :nth-child(7)) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@container an (width < 1100px) {
  .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-kpis:has(> :nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container an (width < 640px) {
  .an-kpis, .an-kpis:has(> :nth-child(7)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-kpi:nth-child(7) { grid-column: 1 / -1; }
}
.an-kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 16px; container-type: inline-size; border-radius: 12px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); }
.an-kpi__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 4px 6px; }
.an-kpi__name { margin: 0; color: var(--st-text-dim); font-size: 12.5px; line-height: 16px; }
.an-kpi__value { margin: 0; color: var(--st-text); font: 600 26px/32px var(--st-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* A long value shrinks to its tile: --len characters at about 0.6em each. */
.an-kpi__value { font-size: min(26px, 100cqi / (var(--len, 1) * 0.6)); }
.an-kpi__foot { margin: auto 0 0; color: var(--st-text-faint); font-size: 11.5px; line-height: 16px; }
.an-delta { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--st-surface-2); color: var(--st-text-dim); font: 500 11px/16px var(--st-font-mono); }
.an-delta--up { background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: var(--st-ok); }
.an-delta--down { background: color-mix(in srgb, var(--st-error-ink) 14%, transparent); color: var(--st-error-ink); }
/* --n bars share the tile: gaps stay 2px while 1px bars fit beside them, then thin rather than spill out. */
.an-spark { display: flex; align-items: flex-end; gap: clamp(0px, (100cqi - var(--n, 30) * 1px) / (var(--n, 30) - 1), 2px); height: 24px; }
.an-spark__bar { flex: 1; min-width: 0; height: max(2px, calc(var(--h) * 100%)); border-radius: 2px 2px 0 0; background: var(--st-line-strong); }
.an-spark__bar:last-child { background: var(--st-accent); }

/* Rows of cards: wide + side on a wide page, stacked below 1000 px */
.an-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.an-row--wide { grid-template-columns: minmax(0, 1fr) 360px; }
@container an (width < 1000px) { .an-row, .an-row--wide { grid-template-columns: minmax(0, 1fr); } }
.an-row > .an-card { height: 100%; box-sizing: border-box; }

.an-legend { display: flex; gap: 16px; margin: 0; padding: 0; color: var(--st-text-dim); font-size: 12px; list-style: none; }
.an-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.an-legend__item::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--st-line-strong); }
.an-legend__item--new::before { background: var(--st-accent); }

/* Active users per day: one column per day, returning under new, 2 px apart */
.an-daily__chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: 220px; padding-bottom: 22px; }
.an-daily__ticks { position: relative; min-width: 28px; }
.an-daily__tick { position: absolute; right: 0; bottom: calc(var(--at) * 100%); translate: 0 50%; color: var(--st-text-faint); font: 400 11px/14px var(--st-font-mono); }
.an-daily__plot {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: min(4px, calc(60% / var(--n)));
  border-bottom: 1px solid var(--st-line-strong);
  background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--st-line) calc(25% - 1px) 25%);
}
.an-daily__col { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; }
.an-daily__col:hover > span:not(.an-daily__date) { filter: brightness(1.15); }
.an-daily__new, .an-daily__back { flex: none; height: calc(var(--h) * 100%); }
.an-daily__new { background: var(--st-accent); }
.an-daily__back { background: var(--st-line-strong); }
/* A day's top segment gets the rounded data end (a day with no new users starts at returning). */
.an-daily__col > :first-child:not(.an-daily__date) { border-radius: 4px 4px 0 0; }
.an-daily__date { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; color: var(--st-text-faint); font-size: 11px; white-space: nowrap; }
.an-daily__col:first-child .an-daily__date { left: 0; translate: 0 0; }
.an-daily__col:last-child .an-daily__date { right: 0; left: auto; translate: 0 0; }
.an-daily__date:not([data-wide]) { display: none; }
@container an (width < 600px) {
  .an-daily__date[data-wide] { display: none; }
  .an-daily__date[data-narrow] { display: block; }
}

/* Plan mix: a conic donut of the three plans, Free grey, Premium the accent, Pro gold */
.an-plans { display: flex; flex-direction: column; }
.an-donut {
  position: relative;
  display: grid;
  place-content: center;
  width: 160px;
  height: 160px;
  margin: 4px auto 20px;
  border-radius: 50%;
  background: conic-gradient(var(--st-line-strong) 0 calc(var(--free) * 100%), var(--st-accent) 0 calc((var(--free) + var(--premium)) * 100%), var(--st-chord-ink) 0 calc((var(--free) + var(--premium) + var(--pro)) * 100%), var(--an-trial) 0);
  text-align: center;
}
.an-donut[data-empty] { background: var(--st-surface-2); }
.an-donut::before { content: ''; position: absolute; inset: 20px; border-radius: 50%; background: var(--st-surface); }
.an-donut__value, .an-donut__label { position: relative; }
.an-donut__value { color: var(--st-text); font: 600 24px/28px var(--st-font); }
.an-donut__label { color: var(--st-text-faint); font-size: 11.5px; }
.an-plans__rows { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.an-plans__row { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 12px; font-size: 13px; }
.an-plans__name { display: inline-flex; align-items: center; gap: 8px; }
.an-plans__name::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--st-line-strong); }
.an-plans__row--premium .an-plans__name::before { background: var(--st-accent); }
.an-plans__row--pro .an-plans__name::before { background: var(--st-chord-ink); }
/* P691: Pro on a trial, a paler Pro. */
.an-donut, .an-plans__row--trial { --an-trial: color-mix(in srgb, var(--st-chord-ink) 40%, var(--st-surface)); }
.an-plans__row--trial .an-plans__name::before { background: var(--an-trial); }
.an-plans__count { font-weight: 600; font-variant-numeric: tabular-nums; }
.an-plans__share { color: var(--st-text-faint); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }

/* Tables: actions, cohorts, top songs, users to watch */
.an-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-th { padding: 0 8px 10px; border-bottom: 1px solid var(--st-line); color: var(--st-text-faint); font: 500 11px/14px var(--st-font); letter-spacing: 0.04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.an-td { padding: 10px 8px; border-bottom: 1px solid var(--st-line); color: var(--st-text-dim); font-weight: 400; text-align: left; vertical-align: middle; }
.an-tr:last-child > .an-td { border-bottom: 0; }
.an-th:first-child, .an-td:first-child { padding-left: 0; }
.an-th:last-child, .an-td:last-child { padding-right: 0; }
.an-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-strong { color: var(--st-text); font-weight: 600; }
.an-dim { color: var(--st-text-dim); white-space: nowrap; }
.an-action { display: flex; align-items: center; gap: 10px; color: var(--st-text); font-weight: 500; white-space: nowrap; }
.an-action__note { display: block; color: var(--st-text-faint); font-size: 12px; font-weight: 400; }
.an-action .st-icon { width: 15px; height: 15px; color: var(--st-text-faint); }
.an-reach { min-width: 150px; }
.an-reach__box { display: flex; align-items: center; gap: 10px; }
.an-reach__box .an-meter { flex: 1; }
.an-reach__value { width: 44px; color: var(--st-text-dim); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.an-trend--up { color: var(--st-ok); }
.an-trend--down { color: var(--st-error-ink); }
.an-meter { position: relative; display: block; height: 6px; border-radius: 3px; overflow: hidden; background: var(--st-surface-2); }
.an-meter__fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); min-width: 0; border-radius: 3px; background: var(--st-accent); }

/* Stem split funnel */
.an-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.an-step { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13px; }
.an-step__name { color: var(--st-text); font-weight: 500; }
.an-step__value { color: var(--st-text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.an-step__bar { grid-column: 1 / -1; height: 8px; border-radius: 4px; }
.an-notes { display: flex; flex-direction: column; gap: 6px; margin: 18px 0 0; padding: 12px; border-radius: 10px; background: var(--st-panel); color: var(--st-text-dim); font-size: 12.5px; list-style: none; }
.an-note { display: flex; align-items: center; gap: 8px; }
.an-note .st-icon { flex: none; width: 14px; height: 14px; color: var(--st-text-faint); }
.an-note--warn .st-icon { color: var(--st-warn); }

/* Cohorts: each cell's fill is the accent at the share still active */
.an-cohorts__table { min-width: 620px; border-collapse: separate; border-spacing: 3px; }
.an-cohorts__table .an-td, .an-cohorts__table .an-th { border-bottom: 0; }
.an-cohort { color: var(--st-text); font-weight: 500; white-space: nowrap; }
.an-cell { position: relative; height: 30px; padding: 0; border-radius: 4px; background: var(--st-surface-2); text-align: center; }
.an-cell__fill { position: absolute; inset: 0; border-radius: 4px; background: color-mix(in srgb, var(--st-accent) calc(15% + var(--p) * 85%), transparent); }
.an-cell__fill[data-zero] { background: none; }
.an-cell__value { position: relative; color: var(--st-text); font: 500 11.5px/30px var(--st-font); font-variant-numeric: tabular-nums; }
.an-cell--future { background: color-mix(in srgb, var(--st-surface-2) 50%, transparent); }

/* Top songs */
/* Numbers take their own width; the title column gets the rest and ellipsises (max-width 0). */
.an-songs__table .an-num { width: 1%; }
.an-songs__table tbody th { max-width: 0; }
.an-rank { width: 20px; color: var(--st-text-faint); }
.an-song { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.an-song__title { overflow: hidden; color: var(--st-text); font-weight: 500; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.an-song__title:hover { text-decoration: underline; }
.an-song__artist { color: var(--st-text-faint); font-size: 12px; }

/* Users to watch */
.an-watch__chips { flex-wrap: wrap; }
.an-watch[aria-busy='true'] .an-watch__body { opacity: 0.55; }
.an-watch__table { min-width: 1060px; }
/* Sortable headers (P265): the header's own look, as a button. The arrow shows the active order, and faintly on hover the
   way a first click sorts; a number column puts it before the label, so the label stays flush right. The padding keeps the
   focus ring (drawn inside) clear of the label without moving it, and the extra 3px on top keeps the ring inside the scroller. */
.an-watch__table .an-th { padding-top: 3px; }
.an-sort { --st-focus-offset: -2px; display: inline-flex; align-items: center; gap: 4px; margin: -3px -4px; padding: 3px 4px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.an-th:last-child .an-sort { margin-right: 0; }
.an-num .an-sort { flex-direction: row-reverse; }
.an-sort:hover { color: var(--st-text-dim); }
.an-sort--on, .an-sort--on:hover { color: var(--st-text); }
.an-sort__icon.st-icon { width: 12px; height: 12px; opacity: 0; transition: opacity 120ms; }
.an-sort:is(:hover, :focus-visible) .an-sort__icon { opacity: 0.5; }
.an-sort--on .an-sort__icon.st-icon { opacity: 1; }
.an-user { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.an-user .fb-avatar { width: 32px; height: 32px; font-size: 13px; }
.an-user__text { display: flex; flex-direction: column; min-width: 0; }
.an-user__name { overflow: hidden; color: var(--st-text); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.an-user__email { overflow: hidden; color: var(--st-text-faint); font-size: 12px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.an-user__email:hover { color: var(--st-accent-ink); text-decoration: underline; }
.an-limits { width: 272px; }
.an-limit { display: grid; grid-template-columns: 78px 1fr 56px; align-items: center; gap: 8px; font-size: 11.5px; }
.an-limit + .an-limit { margin-top: 4px; }
.an-limit__name { color: var(--st-text-faint); }
.an-limit__none { grid-column: 2 / -1; color: var(--st-text-faint); }
.an-limit__value { color: var(--st-text-dim); text-align: right; font-variant-numeric: tabular-nums; }
.an-limit .an-meter__fill { background: var(--st-line-control); }
.an-limit--near .an-meter__fill { background: var(--st-warn); }
.an-limit--full .an-meter__fill { background: var(--st-accent); }
.an-limit--full .an-limit__value { color: var(--st-accent-ink); }
/* Location (P259): flag + "City, CC"; the details are the shared tooltip (ui/tooltip.ts, controls.css .st-tip) as a card. */
.an-loc { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; border-radius: 4px; color: var(--st-text-dim); cursor: default; }
.an-loc__flag { font-size: 15px; line-height: 1; }
.an-loc__place { overflow: hidden; text-decoration: underline dotted var(--st-line-strong); text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; }
.an-loc__tip { display: flex; flex-direction: column; gap: 3px; max-width: min(320px, calc(100vw - 8px)); padding: 8px 10px; font: 400 12px/1.4 var(--st-font); white-space: normal; pointer-events: auto; }
.an-loc__tip[hidden] { display: none; }
/* Bridges the 6 px gap to the control, so the pointer can reach the credit link without the tip closing. */
.an-loc__tip::before { content: ''; position: absolute; inset: -8px 0; z-index: -1; }
.an-loc__row { display: block; }
/* A label and its value; a long value wraps beside the label, not under it. */
.an-loc__pair { display: flex; gap: 8px; }
.an-loc__key { flex: none; width: 64px; color: var(--st-text-faint); }
.an-loc__value { color: var(--st-text); font-variant-numeric: tabular-nums; }
.an-loc__dim { color: var(--st-text-faint); }
.an-loc__warn { color: var(--st-warn); font-weight: 500; }
.an-loc__credit { color: inherit; }
.an-loc__credit:hover { color: var(--st-accent-ink); }
.an-watch__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; }
.an-watch__count { margin: 0 auto 0 0; color: var(--st-text-faint); font-size: 12px; }

/* Narrow (a phone, or a tablet with the rail open): each table row stacks into a label grid, so every column stays
   readable without sideways scrolling; each cell's `data-label` names it. */
@container an (width < 600px) {
  .an-table--stack, .an-table--stack tbody { display: block; min-width: 0; }
  .an-table--stack thead { display: none; }
  .an-table--stack .an-tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--st-line); }
  .an-table--stack .an-tr:last-child { border-bottom: 0; }
  .an-table--stack .an-td, .an-table--stack .an-cell { padding: 0; border: 0; text-align: left; }
  .an-table--stack th.an-td { grid-column: 1 / -1; }
  .an-table--stack [data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--st-text-faint); font: 500 10.5px/14px var(--st-font); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
  .an-action { white-space: normal; }
  .an-reach { min-width: 0; }
  .an-reach__box { flex-wrap: wrap; gap: 4px; }
  .an-reach__box .an-meter { flex-basis: 100%; order: 2; }
  .an-reach__value { width: auto; text-align: left; }

  .an-cohorts__table.an-table--stack .an-tr { border-bottom: 1px solid var(--st-line); }
  .an-cohorts__table th.an-td { grid-column: 1 / span 3; align-self: end; }
  .an-cohorts__table .an-cell { height: auto; padding: 4px 0; text-align: center; }
  .an-cohorts__table .an-cell[data-label]::before { position: relative; z-index: 1; margin: 0; }
  .an-cohorts__table .an-cell__value { line-height: 18px; }
  .an-cohorts__table .an-cell--future::before { opacity: 0.6; }

  /* Flex, so three huge counts wrap instead of spilling out. */
  .an-songs__table.an-table--stack .an-tr { display: flex; flex-wrap: wrap; justify-content: space-between; }
  .an-songs__table.an-table--stack .an-rank { display: none; }
  .an-songs__table.an-table--stack .an-num { width: auto; }
  .an-songs__table.an-table--stack th.an-td { flex-basis: 100%; max-width: 100%; min-width: 0; }

  .an-watch__table.an-table--stack .an-tr { grid-template-columns: repeat(4, minmax(0, auto)); justify-content: space-between; }
  /* Stacked, the header row stays as a wrapping line of the sortable headers, so the list can still be sorted. */
  .an-watch__table.an-table--stack thead { display: block; }
  .an-watch__table.an-table--stack thead tr { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 0 10px; border-bottom: 1px solid var(--st-line); }
  .an-watch__table.an-table--stack thead .an-th { padding: 0; border: 0; }
  .an-watch__table.an-table--stack thead .an-th:not([aria-sort]) { display: none; }
  .an-watch__table.an-table--stack .an-sort { flex-direction: row; margin: -3px -4px; }
  .an-watch__table.an-table--stack .an-sort:not(.an-sort--on) .an-sort__icon { opacity: 0.5; }
  .an-watch__table .an-limits { grid-column: 1 / -1; width: auto; }
  .an-watch__table .an-loc-cell { grid-column: span 2; }
  .an-loc { max-width: 100%; }
  .an-user { min-width: 0; }
}
@container an (width < 400px) {
  .an-actions__table.an-table--stack .an-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Admin › Analytics › Guests (P478, src/studio/analytics/guests*.ts): signed-out activity ---- */

.an-guests__note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 16px; border-radius: 10px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); color: var(--st-text-dim); font-size: 12.5px; line-height: 18px; }
.an-guests__note .st-icon { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--st-text-faint); }
.an-guests__aside { margin: 18px 0 0; color: var(--st-text-faint); font-size: 12px; line-height: 16px; }
/* The design reads the bars without an axis. */
.an-guests-daily .an-daily__chart { grid-template-columns: minmax(0, 1fr); }
.an-guests-daily .an-daily__ticks { display: none; }

/* ---- Admin › Analytics › Installs (P484, src/studio/analytics/installs*.ts): extension installs by check-in ---- */

.an-installs-active .an-daily__chart, .an-installs-daily .an-daily__chart { grid-template-columns: minmax(0, 1fr); }
.an-installs-active .an-daily__ticks, .an-installs-daily .an-daily__ticks { display: none; }
.an-store__text { margin: 0 0 16px; color: var(--st-text-dim); font-size: 13px; line-height: 20px; }
/* P543: activity, then installs, four tiles a row; the Web Store and Why people uninstall share the right column. */
@container an (width >= 640px) { .an-installs .an-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.an-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Uninstalls below the zero line (charts.ts dailyChart's `under`), on the bars' scale. */
.an-daily__col:has(> .an-daily__over) { gap: 0; }
.an-daily__over, .an-daily__under { display: flex; flex: none; flex-direction: column; gap: 2px; height: calc(var(--h) * 100%); }
.an-daily__over { justify-content: flex-end; }
.an-daily__over > :first-child { border-radius: 4px 4px 0 0; }
.an-daily__out { flex: none; height: calc(var(--h) * 100%); border-radius: 0 0 4px 4px; background: var(--st-text-faint); }
.an-daily__col:hover .an-daily__out { filter: brightness(1.15); }
.an-daily__zero { position: absolute; inset: auto 0 calc(var(--at) * 100%); border-top: 1px solid var(--st-line-strong); pointer-events: none; }
.an-legend__item--out::before { background: var(--st-text-faint); }
.an-reasons__head { margin: 18px 0 8px; color: var(--st-text-faint); font-size: 12px; font-weight: 500; }
.an-reasons__answers { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; color: var(--st-text-dim); font-size: 12.5px; line-height: 18px; list-style: none; overflow-wrap: anywhere; }
/* P547: each category's colour, Extension the accent, Mac app gold, Phone app green; a dot on the switch and the By category tiles. */
.an-categories .st-seg__item:nth-child(2), .an-kpi--extension, .an-legend__item--extension, .an-daily__part--extension, .an-step--extension { --an-cat: var(--st-accent); }
.an-categories .st-seg__item:nth-child(3), .an-kpi--mac, .an-legend__item--mac, .an-daily__part--mac, .an-step--mac { --an-cat: var(--st-chord-ink); }
.an-categories .st-seg__item:nth-child(4), .an-kpi--phone, .an-legend__item--phone, .an-daily__part--phone, .an-step--phone { --an-cat: var(--st-ok); }
.an-categories .st-seg__item:not(:first-child)::before, .an-kpi--app .an-kpi__name::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--an-cat); vertical-align: 1px; }
:is(.an-legend__item--extension, .an-legend__item--mac, .an-legend__item--phone)::before { background: var(--an-cat); }
.an-daily__part { flex: none; height: calc(var(--h) * 100%); background: var(--an-cat); }
.an-versions .an-meter__fill { background: var(--an-cat); }
@container an (width >= 640px) { .an-installs .an-kpis--apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* P555: installed bars and their key in the category's colour (All's in the extension's), and By category's swatches. */
.an-installed-daily, .an-bycat--extension { --an-cat: var(--st-accent); }
.an-installed-daily--mac, .an-bycat--mac { --an-cat: var(--st-chord-ink); }
.an-installed-daily--phone, .an-bycat--phone { --an-cat: var(--st-ok); }
.an-installed-daily .an-daily__new, .an-legend__item--installed::before { background: var(--an-cat); }
.an-installed-daily .an-daily__chart { grid-template-columns: minmax(0, 1fr); }
.an-installed-daily .an-daily__ticks { display: none; }
.an-bycat__name { color: var(--st-text); }
.an-bycat__name::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 2px; background: var(--an-cat); }
/* P588: By country, a flag (or a globe for Unknown) before each name, and the folded "N more countries" row. */
.an-bycountry__name { color: var(--st-text); }
/* The phone's stacked rows are grids, which would beat [hidden]'s display: none. */
.an-bycountry [hidden] { display: none; }
.an-bycountry__name .an-loc__flag, .an-bycountry__globe { display: inline-block; width: 16px; margin-right: 8px; text-align: center; vertical-align: -2px; }
.an-bycountry__globe { height: 15px; color: var(--st-text-faint); }
.an-bycountry__more { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--st-text-dim); font: inherit; cursor: pointer; }
.an-bycountry__more:hover { color: var(--st-text); }
.an-bycountry__more:focus-visible { outline: var(--st-focus-width) solid var(--st-focus-ring); outline-offset: 2px; }
.an-bycountry__chev { width: 14px; height: 14px; transition: transform 0.15s; }
.an-bycountry__more[aria-expanded='true'] .an-bycountry__chev { transform: rotate(180deg); }
.an-bycountry .an-guests__aside a { color: inherit; }
.an-bycountry .an-guests__aside a:hover { color: var(--st-accent-ink); }

/* ---- Admin › Analytics › Google Analytics (P263, src/studio/analytics/google*.ts): the GA4 property's numbers ---- */

/* The header's live pill sits in a slot the page hides off this tab; the pill hides itself without a realtime count. */
.an-live-slot { display: contents; }
.an-live[hidden] { display: none; }
.an-ga { display: flex; flex-direction: column; gap: 16px; }
.an-ga-link { white-space: nowrap; }
.an-live { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--st-ok) 14%, transparent); color: var(--st-ok); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.an-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* The one number a view is about. */
.an-kpi--lit { outline: 1.5px solid var(--st-accent); outline-offset: -1px; }

/* Devices: the plan mix's donut and rows, desktop the accent, mobile a lighter accent, the rest grey. */
.an-donut--devices { background: conic-gradient(var(--st-accent) 0 calc(var(--desktop) * 100%), color-mix(in srgb, var(--st-accent) 40%, var(--st-surface)) 0 calc((var(--desktop) + var(--mobile)) * 100%), var(--st-line-strong) 0); }
.an-plans__row--desktop .an-plans__name::before { background: var(--st-accent); }
.an-plans__row--mobile .an-plans__name::before { background: color-mix(in srgb, var(--st-accent) 40%, var(--st-surface)); }
.an-ga-devices .an-plans__row + .an-plans__row { padding-top: 10px; border-top: 1px solid var(--st-line); }
.an-ga-devices .an-plans__rows { gap: 10px; }
.an-ga-note { margin-top: 16px; }

/* A row's name with a quieter line under it; long hosts and paths wrap rather than widen the table. */
.an-ga-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.an-ga-name__main { color: var(--st-text); font-weight: 500; overflow-wrap: anywhere; }
.an-ga-name__sub { color: var(--st-text-faint); font-size: 12px; overflow-wrap: anywhere; }
.an-ga-name__main--mono, .an-ga-name__sub--mono { font-family: var(--st-font-mono); font-size: 12px; }
.an-ga-name__main--mono { font-size: 12.5px; }
.an-ga-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--st-surface-2); color: var(--st-text-dim); font: 500 10.5px/16px var(--st-font-mono); vertical-align: 1px; white-space: nowrap; }

/* Countries: flag, name over its bar, count, share. */
.an-ga-countries__rows { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.an-ga-country { display: grid; grid-template-columns: 22px minmax(0, 1fr) 56px 52px; align-items: center; gap: 12px; font-size: 13px; }
.an-ga-country__flag { font-size: 16px; line-height: 1; }
.an-ga-country__name { display: flex; flex-direction: column; gap: 6px; min-width: 0; color: var(--st-text); }
.an-ga-country__count { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* Events: what Enhanced measurement would add, boxed under the table. */
.an-ga-needs { gap: 4px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: none; }
.an-ga-needs__title { margin: 0; color: var(--st-text); font-weight: 500; }
.an-ga-needs__body { margin: 0; line-height: 18px; }

.an-ga-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--st-text-faint); font-size: 12px; line-height: 18px; }
.an-ga-foot__source { margin: 0; }

/* Not connected yet: one card, centred under the tabs. */
.an-ga-setup { align-self: center; width: min(100%, 640px); box-sizing: border-box; }
.an-ga-setup__lead { margin-top: 4px; }
.an-ga-setup__steps { margin: 12px 0 14px; padding-left: 18px; color: var(--st-text-dim); font-size: 13px; line-height: 22px; list-style: none; overflow-wrap: anywhere; }
.an-ga-setup__steps code { font-family: var(--st-font-mono); font-size: 12px; }

/* The chart fills the height its row gives it (beside Devices), as the design draws it. */
.an-ga-daily { display: flex; flex-direction: column; }
.an-ga-daily .an-daily__chart { flex: 1; height: auto; min-height: 220px; }

/* A phone: the three tabs share the row, a long label on two lines, rather than spill; the tables' cells pair up; each
   country's share sits under its count. */
@container an (width < 400px) {
  .an-tabs { display: grid; grid-auto-columns: auto; grid-auto-flow: column; align-self: stretch; }
  .st-seg .an-tab { padding: 6px 8px; line-height: 16px; white-space: normal; }
  :is(.an-ga-from__table, .an-ga-pages__table, .an-ga-events__table).an-table--stack .an-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-ga-country { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; }
  .an-ga-country__flag, .an-ga-country__name { grid-row: span 2; }
  .an-ga-country > .an-plans__share { grid-column: 3; }
}
/* A tile for a number GA doesn't collect yet (Add to Chrome clicks while Enhanced measurement is off). */
.an-kpi .an-kpi__value--none { color: var(--st-text-dim); font-size: 17px; line-height: 24px; white-space: normal; }
.an-ga-tag--block { margin-left: 0; white-space: normal; }

/* ---- A user's activity (P307, src/studio/user-activity/) ---------------------------------------- */
.ua-page { container: ua / inline-size; }
.ua-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px; color: var(--st-text-dim); font-size: 13px; text-decoration: none; }
.ua-back:hover { color: var(--st-text); }
.ua-back .st-icon { width: 14px; height: 14px; }
.ua-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ua-head .fb-avatar { width: 56px; height: 56px; font-size: 20px; }
.ua-head__text { min-width: 0; }
.ua-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ua-head__title .work__title { margin: 0; }
.ua-head__meta { margin: 4px 0 0; color: var(--st-text-dim); font-size: 13px; overflow-wrap: anywhere; }
/* Disable / Enable account (P310, chordlens.pen DKWUg): the header button, the Disabled chip, the Retry cancel strip;
   the dialog is upgrade.css's `.upc-dialog`, neutral when it enables. */
.ua-account-btn { flex: none; margin-left: auto; }
.ua-account-btn--danger { outline-color: color-mix(in srgb, var(--st-accent) 50%, transparent); color: var(--st-accent-ink); }
.ua-account-btn--danger:hover:enabled { background: var(--st-accent-soft); }
.ua-disabled { outline-color: color-mix(in srgb, var(--st-accent) 45%, transparent); background: var(--st-accent-soft); color: var(--st-accent-ink); }
.ua-still-on { display: flex; align-items: center; gap: 12px; margin: -4px 0 20px; padding: 12px 16px; border: 1px solid light-dark(#e9c46a, #5c4a12); border-radius: 12px; background: light-dark(#fffbeb, #1a1508); color: light-dark(#854d0e, #f5c451); font-size: 13px; }
.ua-still-on .st-icon { flex: none; width: 16px; height: 16px; }
.ua-still-on__text { flex: 1; margin: 0; }
.ua-still-on__retry { flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--st-warn); color: light-dark(#fff, #1a1508); font: 600 13px/1 var(--st-font); cursor: pointer; }
.ua-still-on__retry:disabled { opacity: 0.7; cursor: default; }
.ua-still-on__retry:focus-visible { outline: var(--st-focus-width) solid var(--st-focus-ring); outline-offset: 2px; }
.ua-dialog .upc-row:first-child .upc-label { font-size: 13px; }
.ua-dialog__ends { font: 600 17px/1.2 var(--st-font); letter-spacing: -0.02em; }
.upc-dialog.ua-dialog--enable { background: var(--st-surface) padding-box, var(--st-line) border-box; box-shadow: 0 32px 80px color-mix(in srgb, var(--st-shadow) 70%, transparent); }
.ua-dialog--enable .upc-eyebrow { color: var(--st-text-dim); }
.ua-dialog--enable .upc-cta { border-color: var(--st-line-strong); background: var(--st-surface-2); box-shadow: none; color: var(--st-text); }
.ua-dialog--enable .upc-cta:hover:enabled { box-shadow: none; background: color-mix(in srgb, var(--st-text) 8%, var(--st-surface-2)); }
/* The disable's Reason picker (P315, chordlens.pen yn9mr): native radios in a fieldset, Other's one-line note. */
.ua-reason { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ua-reason__legend { margin-bottom: 10px; padding: 0; color: var(--st-text); font: 600 14px/18px var(--st-font); }
.ua-reason__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ua-reason__option { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border: 1px solid var(--st-line-strong); border-radius: 10px; background: var(--st-surface); color: var(--st-text-dim); font-size: 14px; cursor: pointer; }
.ua-reason__option:has(:checked) { border-color: var(--st-accent); background: var(--st-accent-soft); color: var(--st-text); }
.ua-reason__option:has(:focus-visible) { outline: var(--st-focus-width) solid var(--st-focus-ring); outline-offset: 2px; }
.ua-reason__radio { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--st-accent); }
.ua-reason__radio:focus-visible { outline: none; }
.ua-reason:disabled .ua-reason__option { opacity: 0.6; cursor: default; }
.ua-reason__other { display: flex; flex-direction: column; gap: 6px; }
.ua-reason__other[hidden] { display: none; }
.ua-reason__note { box-sizing: border-box; width: 100%; height: 72px; padding: 10px 12px; border: 1px solid var(--st-accent); border-radius: 10px; background: var(--st-surface); color: var(--st-text); font: 400 14px/1.45 var(--st-font); resize: none; }
.ua-reason__note:focus-visible { outline: var(--st-focus-width) solid var(--st-focus-ring); outline-offset: 1px; }
.ua-reason__foot { display: flex; justify-content: space-between; gap: 12px; color: var(--st-text-faint); font-size: 12px; }
.ua-reason__count { font-variant-numeric: tabular-nums; }
.ua-reason__who { margin: -8px 0 0; color: var(--st-text-faint); font-size: 12px; }
.ua-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ua-chips { flex-wrap: wrap; }
.ua-dates[hidden], .ua-card[hidden] { display: none; }
.ua-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ua-date { display: inline-flex; align-items: center; gap: 8px; }
.ua-date__label { color: var(--st-text-faint); font-size: 13px; }
.ua-date__input { height: 32px; padding: 0 10px; border: 0; border-radius: 8px; outline: 1px solid var(--st-line); outline-offset: -0.5px; background: var(--st-surface); color: var(--st-text); color-scheme: light dark; font: 13px var(--st-font); }
.ua-date__input:focus-visible { outline: var(--st-focus-width) solid var(--st-focus-ring); }
.ua-day + .ua-day { margin-top: 16px; }
.ua-day__title { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--st-line); color: var(--st-text-faint); font: 500 13px/18px var(--st-font); }
.ua-rows { margin: 0; padding: 0; list-style: none; }
.ua-row { display: grid; grid-template-columns: 80px 120px minmax(0, 1fr) 190px minmax(0, 1.6fr) 56px; align-items: center; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--st-line); }
.ua-row__time { color: var(--st-text-dim); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ua-tag { display: inline-flex; align-items: center; justify-self: start; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--st-surface-2); color: var(--st-text-dim); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ua-tag .st-icon { width: 13px; height: 13px; }
.ua-tag--admin { background: var(--st-accent-soft); color: var(--st-accent-ink); }
.ua-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ua-row__title { color: var(--st-text); font-size: 14px; overflow-wrap: anywhere; }
.ua-row__detail { color: var(--st-text-faint); font-size: 12px; overflow-wrap: anywhere; }
.ua-row__source { justify-self: start; color: var(--st-text-faint); font-size: 13px; }
.ua-row__surface { color: var(--st-text-dim); font-size: 13px; }
.ua-row--head { padding: 0 0 12px; color: var(--st-text-dim); font-size: 13px; font-weight: 500; }
.ua-row--head > :last-child { text-align: center; }
.ua-row__video { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
a.ua-row__video:hover .ua-row__title { text-decoration: underline; }
.ua-row__video .ua-row__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: break-word; }
.ua-row__video .ua-row__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ua-row__thumb { flex: none; width: 64px; height: 36px; border-radius: 4px; object-fit: cover; }
.ua-row__length { color: var(--st-text-dim); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
/* Narrow (a ~950px window): Type moves under Time, so the video title keeps room for a line or two. */
@container ua (640px <= width < 960px) {
  .ua-row { grid-template-columns: 88px minmax(0, 1fr) 150px minmax(0, 2fr) 44px; }
  .ua-row:not(.ua-row--head) > * { grid-row: 1 / span 2; }
  .ua-row > .ua-row__time { grid-area: 1 / 1; align-self: end; }
  .ua-row > .ua-tag { grid-area: 2 / 1; align-self: start; }
  .ua-row--head > :nth-child(2) { display: none; }
}
@container ua (width < 640px) {
  .ua-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ua-row__text, .ua-row__source { grid-column: 1 / -1; text-align: left; }
  .ua-row__video { grid-column: 1 / 3; }
  .ua-row__source { justify-self: start; }
  .ua-row__length { text-align: right; }
  .ua-row__video:empty, .ua-row__length:empty, .ua-row__source:empty, .ua-row--head { display: none; }
}

/* Devices (P354 frame h7Xtv): the Devices chip's card in place of the timeline. */
.ua-devices .an-card__sub { margin-bottom: 16px; }
.ua-devices__table { min-width: 900px; }
.ua-devices__table .ua-tag { font-weight: 500; }
.ua-devices__empty { margin: 0 0 4px; color: var(--st-text); font-size: 14px; font-weight: 500; }
.ua-devices__foot { margin: 12px 0 0; color: var(--st-text-faint); font-size: 12px; }

/* Phones (≤640px, rail.css): the search takes the row, on the page's gutter like History's (history.css). */
@media (max-width: 640px) {
  .fb-filters .fb-search { width: 100%; margin-left: 0; }
}