/* ==========================================================================
   Components
   ========================================================================== */

/* --- buttons ------------------------------------------------------------ */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.44rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--ink-1);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    translate var(--t-fast) var(--ease-out);
}
button:hover,
.button:hover {
  background: var(--surface-4);
  border-color: var(--line-3);
  color: var(--ink-1);
  text-decoration: none;
}
button:active,
.button:active {
  translate: 0 1px;
}
button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  translate: none;
}

button .icon,
.button .icon {
  width: 14px;
  height: 14px;
  flex: none;
}

.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  box-shadow: 0 1px 0 #ffffff1f inset, var(--shadow-1);
}
.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-ink);
  box-shadow: 0 1px 0 #ffffff29 inset, var(--glow-brand);
}
.primary:active {
  background: var(--brand-press);
}

.ghost,
.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}
.ghost:hover,
.quiet:hover {
  background: var(--surface-3);
  border-color: var(--line-1);
  color: var(--ink-1);
}

.danger-button {
  color: var(--danger);
  border-color: var(--danger-line);
  background: var(--danger-soft);
}
.danger-button:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.small-button {
  min-height: 26px;
  padding: 0.25rem 0.55rem;
  font-size: var(--text-2xs);
  border-radius: var(--r-xs);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.text-link .icon {
  width: 13px;
  height: 13px;
  transition: translate var(--t-fast) var(--ease-out);
}
.text-link:hover {
  color: var(--brand);
  text-decoration: none;
}
.text-link:hover .icon {
  translate: 2px 0;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

/* --- page heading ------------------------------------------------------- */
.title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.title-row > div:first-child {
  min-width: 0;
}
.kicker {
  display: block;
  margin-bottom: 5px;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--brand);
}
.subtitle {
  margin: 6px 0 0;
  max-width: 68ch;
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* --- cards -------------------------------------------------------------- */
.card {
  position: relative;
  /* Phase 2: 20px pad + 14px radius + a shadow on every card made each block
     read as a separate index card on a desk (96-388 bordered boxes per
     screen). Flatter and tighter; the shadow is reserved for things that
     genuinely float (dialogs, popovers, the palette). */
  --card-pad: var(--s-4);
  padding: var(--card-pad);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--surface-2);
  min-width: 0;
}
.card.flush {
  padding: 0;
  overflow: hidden;
}
.card.spaced {
  margin-top: var(--s-4);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.card-head > div:first-child {
  min-width: 0;
}
.card-head h2 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.card.flush .card-head {
  margin: 0;
  padding: var(--s-4) var(--card-pad, var(--s-5));
  border-bottom: 1px solid var(--line-1);
}

.section-description {
  margin: calc(var(--s-2) * -1) 0 var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-3);
}

/* --- metric tiles -------------------------------------------------------- */
.metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  min-width: 0;
  transition:
    border-color var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out);
}
.metric-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--tone, var(--brand)),
    transparent 72%
  );
  opacity: 0.85;
}
.metric-card:hover {
  border-color: var(--line-2);
}
.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.metric-top > span:first-child {
  font-size: var(--text-2xs);
  font-weight: 660;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.metric-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tone, var(--brand)) 14%, transparent);
  color: var(--tone, var(--brand));
}
.metric-icon .icon {
  width: 14px;
  height: 14px;
}
.metric-value {
  font-size: var(--text-metric);
  font-weight: 660;
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-1);
}
.metric-card small {
  display: block;
  color: var(--ink-3);
}
.metric-spark {
  margin-top: var(--s-1);
  height: 26px;
}
.metric-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tone-brand {
  --tone: var(--brand);
}
.tone-blue {
  --tone: var(--series-1);
}
.tone-violet {
  --tone: var(--series-7);
}
.tone-aqua {
  --tone: var(--series-3);
}
.tone-amber {
  --tone: var(--series-4);
}
.tone-orange {
  --tone: var(--series-2);
}
.tone-signal {
  --tone: var(--signal);
}

/* --- badges & pills ------------------------------------------------------ */
.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-1);
  background: var(--neutral-soft);
  color: var(--ink-2);
  font-size: var(--text-2xs);
  font-weight: 640;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge::before,
.status-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.85;
}
.badge.bare::before,
.status-pill.bare::before {
  display: none;
}


.badge.good,
.badge.teal,
.badge.done,
.badge.approved,
.badge.verified,
.badge.connected,
.badge.ready,
.badge.observed_top_10,
.badge.sustained_top_10,
.badge.completed,
.badge.passed,
.status-pill.teal,
.status-pill.good {
  color: var(--good);
  background: var(--good-soft);
  border-color: var(--good-line);
}

.badge.warn,
.badge.amber,
.badge.medium,
.badge.review,
.badge.in_progress,
.badge.running,
.badge.pending,
.badge.stale,
.badge.uncertain,
.status-pill.amber,
.status-pill.warn {
  color: var(--warn);
  background: var(--warn-soft);
  border-color: var(--warn-line);
}

.badge.high,
.badge.red,
.badge.failed,
.badge.rejected,
.badge.error,
.badge.danger,
.status-pill.red,
.status-pill.danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-line);
}

.badge.blue,
.badge.open,
.badge.draft,
.status-pill.blue {
  color: var(--brand);
  background: var(--brand-soft);
  border-color: var(--brand-line);
}

.badge.signal,
.status-pill.signal {
  color: var(--signal);
  background: var(--signal-soft);
  border-color: color-mix(in srgb, var(--signal) 30%, transparent);
}

/* --- tables ------------------------------------------------------------- */
.table-wrap {
  margin: 0 calc(var(--card-pad, var(--s-5)) * -1)
    calc(var(--card-pad, var(--s-5)) * -1);
  max-width: calc(100% + var(--card-pad, var(--s-5)) * 2);
  padding: 0;
  overflow-x: auto;
  border-top: 1px solid var(--line-1);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.card.flush .table-wrap {
  margin: 0;
  border-top: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-3);
  border-bottom: 1px solid var(--line-1);
  text-align: left;
  font-size: var(--text-2xs);
  font-weight: 680;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-1);
  vertical-align: top;
  color: var(--ink-2);
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr {
  transition: background var(--t-fast) var(--ease-out);
}
tbody tr:hover {
  background: var(--surface-3);
}
tbody tr[hidden] {
  display: none;
}

td strong {
  display: block;
  color: var(--ink-1);
  font-weight: 600;
}
td small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
}
td .actions {
  flex-wrap: nowrap;
}
td select {
  min-width: 118px;
  padding: 0.28rem 1.7rem 0.28rem 0.5rem;
  font-size: var(--text-2xs);
  background-position:
    calc(100% - 0.8rem) calc(50% + 1px),
    calc(100% - 0.55rem) calc(50% + 1px);
}

.selection-cell {
  width: 1%;
  padding-right: 0;
}

.column-sort {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.column-sort:hover {
  background: none;
  color: var(--ink-1);
}
.column-sort span {
  color: var(--ink-4);
  font-size: var(--text-xs);
}
th[aria-sort="ascending"] .column-sort,
th[aria-sort="descending"] .column-sort {
  color: var(--brand);
}
th[aria-sort="ascending"] .column-sort span,
th[aria-sort="descending"] .column-sort span {
  color: var(--brand);
}

.table-note {
  margin: var(--s-3) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-4);
  line-height: var(--leading-snug);
}
.card .table-note:last-child {
  margin-bottom: 0;
}

.wide-url {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-2);
  word-break: break-all;
}

.position-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 2px 7px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  font-size: var(--text-xs);
  font-weight: 640;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}

.saved-query {
  color: var(--good) !important;
  font-weight: 600;
}

/* --- rows & lists -------------------------------------------------------- */
.row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-1);
}
.row-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.row-item:first-child {
  padding-top: 0;
}
.row-item > div {
  min-width: 0;
}
.row-item p {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.row-item small {
  display: block;
}

.checklist,
.editor-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.checklist li,
.editor-steps li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--text-sm);
  color: var(--ink-2);
  counter-increment: step;
}
.checklist li::before,
.editor-steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-size: var(--text-3xs);
  font-weight: 720;
}

.gap-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.gap-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.gap-list .icon {
  width: 13px;
  height: 13px;
  flex: none;
  margin-top: 2px;
  color: var(--warn);
}

/* --- notices ------------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-1);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--brand-softer);
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: var(--leading-normal);
}
.notice > div {
  min-width: 0;
}
.notice strong {
  display: block;
  margin-bottom: 2px;
}
.notice p {
  margin: 0;
  font-size: var(--text-xs);
}
.notice.error {
  border-left-color: var(--danger);
  background: var(--danger-soft);
  color: var(--ink-1);
}
.notice.warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.notice.good {
  border-left-color: var(--good);
  background: var(--good-soft);
}
details.notice {
  display: block;
}
details.notice summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-1);
}

/* --- empty states -------------------------------------------------------- */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-2);
  padding: var(--s-10) var(--s-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-inset);
}
.empty.compact {
  padding: var(--s-7) var(--s-5);
}
.empty .icon,
.empty-icon {
  width: 30px;
  height: 30px;
  margin-bottom: var(--s-1);
  padding: 7px;
  box-sizing: content-box;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  color: var(--brand);
}
.empty h3 {
  font-size: var(--text-base);
  color: var(--ink-1);
}
.empty p {
  max-width: 52ch;
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-3);
}
.empty button,
.empty .button {
  margin-top: var(--s-2);
}

/* --- toolbar / filters ---------------------------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.toolbar label {
  margin-bottom: 0;
  min-width: 200px;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0;
  min-width: 230px;
}
.search-field .icon {
  position: absolute;
  left: 0.6rem;
  width: 14px;
  height: 14px;
  color: var(--ink-4);
  pointer-events: none;
}
.search-field input {
  margin-top: 0;
  padding-left: 2rem;
}

/* --- forms -------------------------------------------------------------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-3) var(--s-4);
}
.form-grid .full,
label.full {
  grid-column: 1 / -1;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-1);
}
.check-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: 0;
  font-size: var(--text-xs);
  color: var(--ink-2);
  cursor: pointer;
}
.check-row input {
  margin-top: 0;
}

/* --- tabs --------------------------------------------------------------- */
.tabs {
  display: flex;
  max-width: 100%;
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  overflow-x: auto;
}
.tabs button {
  flex: 1;
  min-width: max-content;
  gap: var(--s-2);
  border-color: transparent;
  background: transparent;
  color: var(--ink-3);
  font-size: var(--text-xs);
}
.tabs button:hover {
  background: var(--surface-3);
  border-color: transparent;
  color: var(--ink-1);
}
.tabs button.active,
.tabs button[aria-selected="true"] {
  background: var(--surface-2);
  border-color: var(--line-1);
  color: var(--ink-1);
  box-shadow: var(--shadow-1);
}
.tabs button > span {
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--neutral-soft);
  font-size: var(--text-3xs);
  font-weight: 700;
}
.tabs button[aria-selected="true"] > span {
  background: var(--brand-soft);
  color: var(--brand);
}

/* --- disclosure --------------------------------------------------------- */
details {
  font-size: var(--text-sm);
}
details > summary {
  cursor: pointer;
  list-style: none;
  color: var(--ink-2);
  font-size: var(--text-xs);
  font-weight: 600;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary::before {
  content: "›";
  display: inline-block;
  margin-right: 6px;
  color: var(--ink-4);
  transition: rotate var(--t-fast) var(--ease-out);
}
details[open] > summary::before {
  rotate: 90deg;
}

.disclosure {
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--surface-2);
  margin-bottom: var(--s-2);
  overflow: hidden;
}
.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  color: var(--ink-1);
  transition: background var(--t-fast) var(--ease-out);
}
.disclosure > summary:hover {
  background: var(--surface-3);
}
.disclosure > summary > span:first-of-type {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.disclosure[open] > summary {
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-3);
}
.disclosure > *:not(summary) {
  padding: var(--s-4);
}
.disclosure > .table-wrap {
  padding: 0;
  margin: 0;
  border-radius: 0;
}

/* --- dialog ------------------------------------------------------------- */
dialog {
  width: min(760px, calc(100vw - var(--s-8)));
  max-height: min(86dvh, 900px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-xl);
  background: var(--surface-2);
  color: var(--ink-1);
  box-shadow: var(--shadow-3);
  overflow: visible;
}
dialog::backdrop {
  background: #04070Ed6;
  backdrop-filter: blur(4px);
}
dialog[open] {
  animation: dialog-in var(--t-base) var(--ease-out);
}
@keyframes dialog-in {
  from {
    opacity: 0;
    translate: 0 10px;
    scale: 0.985;
  }
}
.dialog-body {
  padding: var(--s-6);
  max-height: min(86dvh, 900px);
  overflow-y: auto;
  border-radius: var(--r-xl);
}
.dialog-body > h2 {
  margin-bottom: var(--s-4);
  padding-right: var(--s-8);
  font-size: var(--text-xl);
}
.dialog-body > .subtitle {
  margin-top: calc(var(--s-3) * -1);
  margin-bottom: var(--s-4);
}
.dialog-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--r-full);
}
dialog iframe {
  width: 100%;
  height: 320px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: #fff;
}
.split-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.split-preview h3 {
  margin-bottom: var(--s-2);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.snippet {
  padding: var(--s-4);
  border: 1px solid var(--line-1);
  border-radius: var(--r-md);
  background: var(--surface-inset);
  margin-bottom: var(--s-3);
}
.snippet .url {
  font-size: var(--text-xs);
  color: var(--good);
  margin-bottom: 3px;
  word-break: break-all;
}
.snippet-title {
  font-size: var(--text-md);
  font-weight: 560;
  color: var(--series-1);
  margin-bottom: 3px;
}
.snippet .description {
  font-size: var(--text-xs);
  color: var(--ink-2);
  line-height: 1.6;
}

/* --- toast -------------------------------------------------------------- */
.toast-stack {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: 300;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-2);
  max-width: min(400px, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: var(--surface-4);
  color: var(--ink-1);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  animation: toast-in var(--t-base) var(--ease-spring);
}
.toast.out {
  animation: toast-out var(--t-base) var(--ease-out) forwards;
}
.toast .icon {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 1px;
}
.toast.ok .icon {
  color: var(--good);
}
.toast.err {
  border-left: 2px solid var(--danger);
}
.toast.err .icon {
  color: var(--danger);
}
@keyframes toast-in {
  from {
    opacity: 0;
    translate: 0 14px;
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    translate: 0 8px;
    scale: 0.97;
  }
}

/* --- progress / jobs ------------------------------------------------------ */
.job-status {
  position: relative;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--brand-line);
  border-radius: var(--r-lg);
  background: linear-gradient(
    120deg,
    var(--brand-soft),
    transparent 62%
  ),
  var(--surface-2);
  overflow: hidden;
}
.job-status-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-3);
}
.job-status-top > div {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.job-status strong {
  display: block;
  font-size: var(--text-sm);
}
.job-status p {
  margin: 1px 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.job-status b {
  font-size: var(--text-lg);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.job-pulse {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--signal);
  box-shadow: var(--glow-signal);
}
.job-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  border: 2px solid var(--signal);
  animation: ping 1.6s var(--ease-out) infinite;
}
@keyframes ping {
  to {
    scale: 3;
    opacity: 0;
  }
}

.track {
  position: relative;
  height: 5px;
  border-radius: var(--r-full);
  background: var(--surface-inset);
  overflow: hidden;
}
.track > span {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand), var(--signal));
  transition: width var(--t-slow) var(--ease-out);
}
.track.indeterminate > span {
  width: 34% !important;
  animation: slide 1.5s var(--ease-in-out) infinite;
}
@keyframes slide {
  0% {
    translate: -110% 0;
  }
  100% {
    translate: 330% 0;
  }
}

/* --- provider icon -------------------------------------------------------- */
.provider-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--s-3);
  border-radius: var(--r-md);
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  font-size: var(--text-md);
  font-weight: 720;
  color: var(--ink-2);
}

/* --- loading ------------------------------------------------------------- */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-16);
  color: var(--ink-3);
  font-size: var(--text-sm);
}
.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--line-2);
  border-top-color: var(--brand);
  border-radius: var(--r-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    rotate: 1turn;
  }
}

.skeleton {
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--surface-3) 25%,
    var(--surface-4) 37%,
    var(--surface-3) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes shimmer {
  to {
    background-position: -135% 0;
  }
}

/* --- entrance ------------------------------------------------------------ */
.reveal {
  animation: reveal var(--t-slow) var(--ease-out) backwards;
}
@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}