/* Temporal jobs dashboard — clean SaaS product UI.
   Near-white cool background, white cards with soft shadows, Inter, indigo accent. */

:root {
  color-scheme: light;
  --bg: #f8f9fb;
  --surface: #ffffff;
  --ink: #101828;
  --text-2: #344054;
  --muted: #667085;
  --gray-25: #fcfcfd;
  --gray-50: #f9fafb;
  --gray-100: #f2f4f7;
  --gray-200: #eaecf0;
  --gray-300: #d0d5dd;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-tint: #eef2ff;
  --accent-text: #3730a3;
  --green: #067647;
  --green-tint: #ecfdf3;
  --red: #b42318;
  --red-tint: #fef3f2;
  --amber: #b54708;
  --amber-tint: #fffaeb;
  --neutral-badge: #344054;
  --neutral-tint: #f2f4f7;
  /* semantic accents that flip per theme */
  --warn: #f79009;            /* attention accents: pulse error, bars, row inset, waiting delta */
  --dot-ok: #12b76a;          /* pulse + diag ok dot */
  --dot-fail: #f04438;        /* diag fail dot */
  --green-border: #abefc6;
  --red-border: #fecdca;
  --amber-border: #fedf89;
  --hover-border: #98a2b3;
  --accent-soft: #6366f1;     /* chip kind, chip ×, next-job reason */
  --accent-tint-strong: #e0e7ff;
  --bar-red: #d92d20;
  --pulse-ring: rgba(18, 183, 106, 0.35);
  --backdrop: rgba(16, 24, 40, 0.4);
  --skel-base: #f2f4f7;
  --skel-hi: #f9fafb;
  /* journey / timeline status colors — read by app.js via var() on inline SVGs */
  --status-pending: #667085;
  --status-in_progress: #4f46e5;
  --status-complete: #067647;
  --status-error: #b42318;
  --status-reauth_error: #b54708;
  --status-permission_error: #b54708;
  --status-stuck: #b54708;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-control: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-drawer: 0 20px 24px -4px rgba(16, 24, 40, 0.1), 0 8px 8px -4px rgba(16, 24, 40, 0.04);
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* z scale: dropdown < banner < drawer backdrop < drawer */
  --z-dropdown: 30;
  --z-banner: 40;
  --z-backdrop: 50;
  --z-drawer: 60;
}

/* Untitled-UI-style dark scale. Shadows go near-invisible; borders carry depth.
   All text-on-tint pairs verified ≥4.5:1. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c111d;
  --surface: #161b26;
  --ink: #f5f5f6;
  --text-2: #cecfd2;
  --muted: #94969c;
  --gray-25: #1a212e;
  --gray-50: #1f242f;
  --gray-100: #1f242f;
  --gray-200: #333741;
  --gray-300: #333741;
  --accent: #8098f9;
  --accent-hover: #a4bcfd;
  --accent-tint: #1f235b;
  --accent-text: #a4bcfd;
  --green: #75e0a7;
  --green-tint: #053321;
  --red: #f97066;
  --red-tint: #55160c;
  --amber: #fdb022;
  --amber-tint: #4e1d09;
  --neutral-badge: #cecfd2;
  --neutral-tint: #1f242f;
  --warn: #fdb022;
  --dot-ok: #47cd89;
  --dot-fail: #f97066;
  --green-border: #085d3a;
  --red-border: #912018;
  --amber-border: #93370d;
  --hover-border: #61646c;
  --accent-soft: #8098f9;
  --accent-tint-strong: #2d3282;
  --bar-red: #f04438;
  --pulse-ring: rgba(71, 205, 137, 0.3);
  --backdrop: rgba(3, 7, 18, 0.6);
  --skel-base: #1f242f;
  --skel-hi: #2b303c;
  --status-pending: #94969c;
  --status-in_progress: #8098f9;
  --status-complete: #47cd89;
  --status-error: #f97066;
  --status-reauth_error: #fdb022;
  --status-permission_error: #fdb022;
  --status-stuck: #fdb022;
  --shadow-card: 0 0 #0000;
  --shadow-control: 0 0 #0000;
  --shadow-pop: 0 12px 16px -4px rgba(0, 0, 0, 0.45), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-drawer: 0 20px 24px -4px rgba(0, 0, 0, 0.5), 0 8px 8px -4px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.page {
  max-width: 81rem;
  width: 94vw;
  margin: 0 auto;
  padding: 1.75rem 0 4rem;
}

/* ---------- error banner ---------- */

#error-banner {
  position: sticky;
  top: 0;
  z-index: var(--z-banner);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: var(--amber-tint);
  border-bottom: 1px solid var(--amber-border);
  color: var(--amber);
  font: 500 0.8125rem var(--font-body);
}
#error-banner[hidden] { display: none; }
.banner-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.eyebrow {
  margin: 0 0 0.2rem;
  font: 500 0.75rem var(--font-body);
  color: var(--muted);
}

.page-title {
  margin: 0;
  font: 600 1.5rem/1.2 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.header-live {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.2rem;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--dot-ok);
  animation: pulse 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.pulse.paused { background: var(--gray-300); animation: none; }
.pulse.error { background: var(--warn); animation: none; }

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--pulse-ring); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.live-text {
  font: 500 0.75rem var(--font-body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */

.btn {
  font: 500 0.8125rem var(--font-body);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control);
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--gray-50); color: var(--ink); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
:root[data-theme="dark"] .btn.primary { color: #0c111d; }

/* theme toggle — quiet icon button */

.theme-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--gray-300);
  background: var(--surface);
}
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- stat tiles ---------- */

.stats-lattice {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.tile {
  appearance: none;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: left;
  padding: 1rem 1.15rem 0.9rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tile:hover { border-color: var(--gray-300); }
.tile[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-card);
}
.tile[aria-pressed="true"] .tile-label { color: var(--accent); }

.tile-label {
  font: 500 0.75rem var(--font-body);
  color: var(--muted);
  white-space: nowrap;
}

.tile-num {
  font: 600 1.75rem/1.15 var(--font-body);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tile-num.num-error.nonzero { color: var(--red); }
.tile-num.num-attention.nonzero { color: var(--amber); }

/* ---------- filter bar ---------- */

.filter-bar { margin-bottom: 1.25rem; }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.filter-row + .filter-row { margin-top: 0.6rem; }

.filter-bar select,
.filter-bar input {
  font: 400 0.8125rem var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control);
  padding: 0.38rem 0.6rem;
  height: 2.25rem;
}
.filter-bar select:hover, .filter-bar input:hover { border-color: var(--hover-border); }
.filter-bar input::placeholder { color: var(--muted); opacity: 1; }

.search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 15rem;
  min-width: 13rem;
  max-width: 22rem;
}
.search-wrap .search-icon {
  position: absolute;
  left: 0.6rem;
  color: var(--muted);
  pointer-events: none;
}
.search-wrap input {
  width: 100%;
  padding-left: 1.9rem;
  padding-right: 2rem;
}
.search-wrap kbd {
  position: absolute;
  right: 0.5rem;
  font: 500 0.6875rem var(--font-body);
  color: var(--muted);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
  background: var(--gray-50);
  pointer-events: none;
}

/* company typeahead */

.typeahead { position: relative; flex: 0 1 12rem; }
.typeahead input { width: 100%; }
.typeahead ul {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 100%;
  width: max-content;
  max-width: 24rem;
  max-height: 310px;
  overflow-y: auto;
  margin: 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.typeahead li {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.typeahead li .ta-name { font-weight: 500; font-size: 0.8125rem; }
.typeahead li .ta-sub {
  font: 400 0.6875rem var(--font-mono);
  color: var(--muted);
}
.typeahead li:hover, .typeahead li[aria-selected="true"] { background: var(--gray-50); }
.typeahead li[aria-selected="true"] { background: var(--accent-tint); }
.typeahead li.ta-empty { color: var(--muted); cursor: default; font-size: 0.8125rem; }
.typeahead li.ta-empty:hover { background: none; }

/* fuzzy filter comboboxes (provider / developer / job type / created-by) —
   same anatomy as the company typeahead, plus a chevron so they read as dropdowns */

.combo { flex: 0 1 10rem; min-width: 8rem; }
.combo::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  top: 50%;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.combo input { padding-right: 1.7rem; text-overflow: ellipsis; }

.typeahead .hl { font-weight: 700; color: var(--accent-text); }
.typeahead li.is-current .ta-name { color: var(--accent-text); }
.typeahead li.is-current .ta-name::after { content: " ✓"; font-weight: 600; }

/* status chips */

.status-row { gap: 0.4rem; }
.status-chip {
  font: 500 0.75rem var(--font-body);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 0.24rem 0.75rem;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.status-chip:hover { color: var(--ink); border-color: var(--hover-border); }
.status-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.75; }
.status-chip[aria-pressed="true"] { border-color: transparent; }
.status-chip[aria-pressed="true"].s-pending { background: var(--neutral-tint); color: var(--neutral-badge); }
.status-chip[aria-pressed="true"].s-in_progress { background: var(--accent-tint); color: var(--accent-text); }
.status-chip[aria-pressed="true"].s-complete { background: var(--green-tint); color: var(--green); }
.status-chip[aria-pressed="true"].s-error { background: var(--red-tint); color: var(--red); }
.status-chip[aria-pressed="true"].s-reauth_error,
.status-chip[aria-pressed="true"].s-permission_error { background: var(--amber-tint); color: var(--amber); }

/* active filter chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.chips:empty { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 0.18rem 0.3rem 0.18rem 0.75rem;
  font: 500 0.75rem var(--font-body);
  color: var(--accent-text);
  max-width: 20rem;
}
.chip .chip-kind { color: var(--accent-soft); font-weight: 400; }
.chip .chip-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--accent-soft);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  border-radius: 50%;
}
.chip button:hover { color: var(--accent-text); background: var(--accent-tint-strong); }

/* ---------- strips ---------- */

.strips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.strips[hidden] { display: none; }

.strip {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem;
}
.strip-label {
  margin: 0 0 0.7rem;
  font: 600 0.875rem var(--font-body);
  color: var(--ink);
}
.strip-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(9rem, 16rem) 1fr auto;
  align-items: center;
  gap: 0.75rem;
}
.bar-row .bar-label {
  font: 400 0.75rem var(--font-mono);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track {
  height: 6px;
  border-radius: 3px;
  background: var(--gray-100);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--bar-red);
}
.bar-fill.amber { background: var(--warn); }
.bar-row .bar-count {
  font: 500 0.75rem var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 2ch;
  text-align: right;
}

.provider-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto auto;
  align-items: baseline;
  gap: 0.75rem;
}
.provider-row .p-name {
  font-size: 0.8125rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.provider-row .p-total {
  font: 400 0.75rem var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
}
.provider-row .p-errors {
  font: 400 0.75rem var(--font-body);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 7ch;
  color: var(--muted);
}
.provider-row .p-errors.has-errors { color: var(--red); font-weight: 500; }

/* ---------- jobs table ---------- */

.table-card {
  background: var(--surface);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.table-scroll { overflow-x: auto; }

.jobs-table {
  width: 100%;
  min-width: 64rem;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.jobs-table th {
  position: sticky;
  top: 0;
  background: var(--gray-50);
  font: 500 0.75rem var(--font-body);
  color: var(--muted);
  text-align: left;
  padding: 0.65rem 0.55rem;
  border-bottom: 1px solid var(--gray-200);
  white-space: nowrap;
}

.jobs-table td {
  padding: 0.65rem 0.55rem;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
  white-space: nowrap;
}
.jobs-table tbody tr:last-child td { border-bottom: 0; }

.jobs-table tbody tr.job-row {
  cursor: pointer;
  transition: background-color 0.15s;
}
.jobs-table tbody tr.job-row:hover { background: var(--gray-25); }
.jobs-table tbody tr.job-row:focus-visible { outline-offset: -2px; }
/* contract-mandated attention accent */
.jobs-table tbody tr.has-attention { box-shadow: inset 2px 0 0 var(--warn); }

.jobs-table tr.flash { animation: rowflash 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1; }
@keyframes rowflash {
  0% { background-color: var(--accent-tint); }
  100% { background-color: transparent; }
}

.cell-time {
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}
.cell-time .future { color: var(--accent); }

.type-pill {
  display: inline-block;
  font: 500 0.75rem var(--font-body);
  color: var(--text-2);
  background: var(--gray-100);
  border-radius: 6px;
  padding: 0.12rem 0.55rem;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.cell-provider, .cell-developer { color: var(--muted); max-width: 8rem; overflow: hidden; text-overflow: ellipsis; }
.cell-company {
  font-weight: 500;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge {
  display: inline-flex;
  align-items: center;
  font: 500 0.75rem var(--font-body);
  border-radius: 999px;
  padding: 0.14rem 0.65rem;
  white-space: nowrap;
}
.badge.s-pending { background: var(--neutral-tint); color: var(--neutral-badge); }
.badge.s-in_progress { background: var(--accent-tint); color: var(--accent-text); }
.badge.s-complete { background: var(--green-tint); color: var(--green); }
.badge.s-error { background: var(--red-tint); color: var(--red); }
.badge.s-reauth_error, .badge.s-permission_error { background: var(--amber-tint); color: var(--amber); }

.cell-reason {
  display: inline-block;
  vertical-align: middle;
  font: 400 0.75rem var(--font-mono);
  color: var(--muted);
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-reason.is-failure { color: var(--red); }

.attn-tag {
  display: inline-block;
  font: 500 0.6875rem var(--font-body);
  color: var(--amber);
  background: var(--amber-tint);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}
.attn-tag + .attn-tag { margin-left: 0.25rem; }

.cell-links { text-align: right; }
.ext-link {
  font: 500 0.75rem var(--font-body);
  color: var(--muted);
  text-decoration: none;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}
.ext-link:hover { color: var(--accent); background: var(--accent-tint); }

/* journey mini-diagram */

.journey { display: block; }
.journey .j-line { stroke: var(--gray-200); stroke-width: 1.5; }
.journey .j-line.reached { stroke-width: 1.5; }
.journey .j-line.stuck { stroke-dasharray: 3 3; }
.journey .j-dot.hollow { fill: var(--surface); stroke: var(--gray-300); stroke-width: 1.3; }

/* skeleton loading */

.skel {
  display: inline-block;
  height: 0.8rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--skel-base) 25%, var(--skel-hi) 50%, var(--skel-base) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.tile-num .skel { height: 1.9rem; width: 3.2rem; }

/* empty state */

.empty-state {
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
}
.empty-kicker {
  margin: 0 0 0.35rem;
  font: 600 0.875rem var(--font-body);
  color: var(--ink);
}
.empty-text {
  margin: 0 auto 1.25rem;
  max-width: 26rem;
  font-size: 0.875rem;
  color: var(--muted);
}

.load-more-row {
  display: flex;
  justify-content: center;
  padding: 1.25rem 0 0;
}

/* ---------- drawer ---------- */

#drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-backdrop);
  background: var(--backdrop);
  opacity: 0;
  transition: opacity 0.22s;
}
#drawer-backdrop.open { opacity: 1; }
#drawer-backdrop[hidden] { display: none; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  width: min(30rem, 94vw);
  background: var(--surface);
  box-shadow: var(--shadow-drawer);
  transform: translateX(103%);
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
  visibility: hidden;
}
.drawer.open { transform: none; visibility: visible; }

.drawer-section {
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
}
.drawer-section:last-child { border-bottom: 0; }

.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.drawer-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font: 400 0.75rem var(--font-mono);
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.drawer-title {
  margin: 0 0 0.6rem;
  font: 600 1.125rem/1.3 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.drawer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.drawer-meta .meta-plain { font-size: 0.75rem; color: var(--muted); }

.drawer-close {
  appearance: none;
  border: 1px solid var(--gray-200);
  background: var(--surface);
  border-radius: var(--radius-sm);
  width: 2rem;
  height: 2rem;
  flex: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1;
  transition: background-color 0.15s, color 0.15s;
}
.drawer-close:hover { background: var(--gray-50); color: var(--ink); }

.section-label {
  margin: 0 0 0.7rem;
  font: 600 0.875rem var(--font-body);
  color: var(--ink);
}

/* vertical timeline */

.timeline { list-style: none; margin: 0; padding: 0; }
.tl-stage {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.tl-stage .tl-dot {
  flex: none;
  width: 11px; height: 11px;
  border-radius: 50%;
  align-self: center;
  border: 1.5px solid var(--gray-300);
  background: var(--surface);
}
.tl-stage.reached .tl-dot { border-color: transparent; }
.tl-stage .tl-name {
  font: 500 0.75rem var(--font-body);
  color: var(--text-2);
  min-width: 5.5rem;
}
.tl-stage.unreached .tl-name, .tl-stage.unreached .tl-time { color: var(--muted); }
.tl-stage .tl-time {
  font: 400 0.75rem var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.tl-stage .tl-rel { font: 400 0.75rem var(--font-body); color: var(--muted); margin-left: 0.4rem; }

.tl-delta {
  border-left: 1px solid var(--gray-200);
  margin-left: 5px;
  padding: 0.28rem 0 0.28rem 1rem;
  font: 400 0.75rem var(--font-body);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tl-delta .delta-kind { }
.tl-delta.waiting { color: var(--amber); border-left-color: var(--warn); border-left-style: dashed; }
.tl-delta.running { color: var(--accent); }

/* id rows */

.id-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.id-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
}
.id-row .id-label { font-size: 0.75rem; color: var(--muted); }
.id-row .id-value {
  font: 400 0.75rem var(--font-mono);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-btn {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--muted);
  padding: 0.2rem;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}
.copy-btn:hover { color: var(--accent); background: var(--accent-tint); }
.copy-btn.copied { color: var(--green); }

/* link pills */

.link-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.link-pill {
  font: 500 0.75rem var(--font-body);
  color: var(--text-2);
  text-decoration: none;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control);
  padding: 0.35rem 0.85rem;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.link-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); }
.link-pill.is-disabled { color: var(--muted); cursor: default; opacity: 0.7; box-shadow: none; }
.link-pill.is-disabled:hover { border-color: var(--gray-300); color: var(--muted); background: transparent; }

/* diagnosis */

.diag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.diag-head .section-label { margin: 0; }

.diag-body { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.75rem; }
.diag-body:empty { margin-top: 0; }

.diag-verdict {
  font: 600 0.8125rem var(--font-body);
  color: var(--ink);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
}

.diag-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
.diag-dot {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 0.35rem;
  background: var(--gray-300);
}
.diag-ok .diag-dot { background: var(--dot-ok); }
.diag-info .diag-dot { background: var(--accent); }
.diag-warn .diag-dot { background: var(--warn); }
.diag-fail .diag-dot { background: var(--dot-fail); }

.diag-title {
  font: 500 0.8125rem var(--font-body);
  color: var(--ink);
}
.diag-status {
  margin-left: 0.5rem;
  font: 500 0.6875rem var(--font-body);
  color: var(--muted);
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  vertical-align: 1px;
}
.diag-fail .diag-status { color: var(--red); border-color: var(--red-border); background: var(--red-tint); }
.diag-warn .diag-status { color: var(--amber); border-color: var(--amber-border); background: var(--amber-tint); }
.diag-ok .diag-status { color: var(--green); border-color: var(--green-border); background: var(--green-tint); }

.diag-detail {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.diag-error { color: var(--red); }

/* failure context */

.fc-details summary {
  cursor: pointer;
  font: 600 0.8125rem var(--font-body);
  color: var(--red);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fc-details summary::-webkit-details-marker { display: none; }
.fc-details summary::before { content: "▸"; font-size: 0.65rem; transition: transform 0.15s; }
.fc-details[open] summary::before { transform: rotate(90deg); }
.fc-details pre {
  margin: 0.7rem 0 0;
  padding: 0.8rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font: 400 0.75rem/1.55 var(--font-mono);
  overflow-x: auto;
  white-space: pre;
}

/* next job + previous jobs */

.next-job {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  background: var(--accent-tint);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.8rem;
  cursor: pointer;
  font: 500 0.75rem var(--font-body);
  color: var(--accent-text);
  transition: border-color 0.15s;
}
.next-job:hover { border-color: var(--accent); }
.next-job .nj-reason { color: var(--accent-soft); font-weight: 400; margin-left: auto; }

.prev-rows { display: flex; flex-direction: column; }
.prev-row {
  display: grid;
  /* fixed status/time tracks: each row is its own grid, so auto columns
     size per-row and the badges zigzag */
  grid-template-columns: auto 1fr 7rem 6.4rem;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gray-100);
  padding: 0.5rem 0.1rem;
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--font-body);
}
.prev-row:last-child { border-bottom: 0; }
.prev-row:hover { background: var(--gray-25); }
.prev-row .pr-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.prev-row .pr-type {
  font: 400 0.75rem var(--font-body);
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prev-row .pr-time {
  font: 400 0.75rem var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
.drawer-note { font-size: 0.75rem; color: var(--muted); margin: 0; }
.drawer-error { font-size: 0.8125rem; color: var(--red); margin: 0; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .stats-lattice { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .strips { grid-template-columns: 1fr; }
  .page-title { font-size: 1.25rem; }
}
@media (max-width: 560px) {
  .stats-lattice { grid-template-columns: repeat(2, 1fr); }
  .search-wrap { max-width: none; flex-basis: 100%; }
}

/* inline busy spinner (diagnosis button) */

.spinner {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .skel { animation: none; background: var(--skel-base); }
  .jobs-table tr.flash { animation: none; background-color: var(--accent-tint); }
  .drawer, #drawer-backdrop, .fc-details summary::before { transition: none; }
  .spinner { animation: none; border-right-color: currentColor; opacity: 0.5; }
}

.noscript { text-align: center; padding: 3rem 1rem; }