/* Pending QA dashboard. Tokens and component styles follow park-ui-theme-reference.html and docs/DESIGN.md. */
:root {
  color-scheme: dark;
  --fonts-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Sage, dark */
  --colors-gray-1: #101211;
  --colors-gray-2: #171918;
  --colors-gray-3: #202221;
  --colors-gray-4: #272a29;
  --colors-gray-6: #373b39;
  --colors-gray-7: #444947;
  --colors-gray-9: #63706b;
  --colors-gray-10: #717d79;
  --colors-gray-11: #adb5b2;
  --colors-gray-12: #eceeed;
  --colors-gray-a2: #f0f2f108;
  --colors-gray-a3: #f3f5f412;
  --colors-gray-a4: #f2fefd1a;
  --colors-gray-a5: #f1fbfa22;
  --colors-gray-a8: #ebfdf657;

  --colors-canvas: #000000;
  --colors-fg-default: var(--colors-gray-12);
  --colors-fg-muted: var(--colors-gray-11);
  --colors-fg-subtle: var(--colors-gray-10);
  --colors-border: var(--colors-gray-4);
  --colors-error: #e5484d;
  --colors-accent-solid-bg: #ffffff;
  --colors-accent-solid-bg-hover: var(--colors-gray-12);
  --colors-accent-solid-fg: #000000;
  --colors-focus-ring: var(--colors-accent-solid-bg);

  /* Status, dark */
  --colors-red-a3: #ff173f2d;
  --colors-red-a11: #ff9592;
  --colors-orange-a3: #fb6a0025;
  --colors-orange-a11: #ffa057;

  /* Chart marks: bug is the white accent, other is Sage 9 (solid gray fill, 3.5 to 1 on a card) */
  --mark-bug: var(--colors-accent-solid-bg);
  --mark-other: var(--colors-gray-9);

  --radii-l1: 0.125rem;
  --radii-l2: 0.25rem;
  --radii-l3: 0.375rem;
  --shadows-sm: 0px 2px 4px rgba(0, 0, 0, 0.6), 0px 0px 1px inset var(--colors-gray-a8);

  /* Layout (DESIGN.md: layout by device class) */
  --control: 2.75rem;
  --gutter: 1rem;
  --gap: 1rem;
  --section: 1.5rem;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --z-sticky: 1100;
}
@media (min-width: 768px) { :root { --gutter: 1.5rem; --control: 2.5rem; --section: 2rem; } }
@media (min-width: 768px) and (pointer: coarse) { :root { --control: 2.75rem; } }
@media (min-width: 1024px) { :root { --gutter: 2rem; --gap: 1.5rem; --section: 3rem; } }
@media (min-width: 1920px) {
  html { font-size: calc(100vw / 96); }
  :root { --gutter: 4.8rem; --control: 2.75rem; --section: 3rem; --focus-ring-width: 0.2rem; --focus-ring-offset: 0.1rem; }
}

/* ------------------------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--colors-canvas);
  color: var(--colors-fg-default);
  font-family: var(--fonts-body);
  font-size: 1rem;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--colors-gray-a5); }
h1, h2, p { margin: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: var(--focus-ring-width) solid var(--colors-focus-ring); outline-offset: var(--focus-ring-offset); }
.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; }
.scroll-x { overflow-x: auto; }
[hidden] { display: none !important; }

.page {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  padding-block: 0 calc(var(--section) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
@media (min-width: 1920px) { .page { max-width: none; } }

/* ------------------------------------------------------------------ Top bar */
.bar {
  top: 0;
  z-index: var(--z-sticky);
  background: var(--colors-canvas);
  border-bottom: 1px solid var(--colors-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-block: calc(1rem + env(safe-area-inset-top, 0px)) 1rem;
}
/* Sticky only where it leaves room: on phones and short landscape screens the wrapped bar would eat the view. */
@media (min-width: 768px) and (min-height: 40rem) { .bar { position: sticky; } }
@media (min-width: 1920px) { .bar { padding-top: 2.7rem; } }
.bar-title { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.title-row { display: flex; align-items: center; gap: 0.75rem; }
.title-row h1 { font-size: 1.875rem; line-height: 2.375rem; font-weight: 600; }
@media (min-width: 768px) { .title-row h1 { font-size: 2.25rem; line-height: 2.75rem; letter-spacing: -0.02em; } }
@media (min-width: 1920px) { .title-row h1 { font-size: 3rem; line-height: 3.75rem; } }
.status { display: flex; align-items: center; gap: 0.5rem; color: var(--colors-fg-muted); font-size: 0.875rem; line-height: 1.25rem; }
.status svg { width: 1rem; height: 1rem; flex: none; transform: rotate(-90deg); }
.status .track { fill: none; stroke: var(--colors-gray-6); stroke-width: 3; }
.status .left { fill: none; stroke: var(--colors-accent-solid-bg); stroke-width: 3; stroke-linecap: round; }
.bar-tools { display: flex; align-items: center; gap: 0.75rem; }

/* ------------------------------------------------------------------ Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex-shrink: 0;
  height: var(--control); min-width: var(--control); padding: 0 0.875rem;
  border: 1px solid transparent; border-radius: var(--radii-l2);
  background: transparent; color: var(--colors-fg-default);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  white-space: nowrap; user-select: none; cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.btn:disabled { cursor: not-allowed; opacity: 0.67; filter: grayscale(100%); }
.btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.btn.solid { background: var(--colors-accent-solid-bg); color: var(--colors-accent-solid-fg); }
.btn.solid:not(:disabled):hover { background: var(--colors-accent-solid-bg-hover); }
.btn.outline { border-color: var(--colors-gray-6); }
.btn.outline:not(:disabled):hover { background: var(--colors-gray-a2); }
.btn.outline:not(:disabled):active { background: var(--colors-gray-a3); }
.btn[aria-busy="true"] svg { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ Badge */
.badge {
  display: inline-flex; align-items: center; height: 1.25rem; padding: 0 0.5rem;
  border-radius: var(--radii-l2);
  font-size: 0.75rem; line-height: 1; font-weight: 500; white-space: nowrap;
}
.badge.subtle { background: var(--colors-gray-a3); color: var(--colors-gray-12); }
.badge.warning { background: var(--colors-orange-a3); color: var(--colors-orange-a11); }
.badge.error { background: var(--colors-red-a3); color: var(--colors-red-a11); }

/* ------------------------------------------------------------------ Alert */
.alert { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border-radius: var(--radii-l3); background: var(--colors-gray-a3); color: var(--colors-gray-12); font-size: 0.875rem; line-height: 1.25rem; }
.alert.error { background: var(--colors-red-a3); color: var(--colors-red-a11); }
.alert strong { font-weight: 600; }
.alert span { max-width: 65ch; }

/* ------------------------------------------------------------------ Field + input */
.keyform { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 1rem; padding: 1.5rem; }
.keyform .btn { margin-top: 1.625rem; } /* lines up with the input under its 20px label and 6px gap */
.field { display: flex; flex-direction: column; gap: 0.375rem; flex: 1 1 16rem; max-width: 36rem; min-width: 0; }
.field > label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.field .error-text { font-size: 0.875rem; line-height: 1.25rem; color: var(--colors-error); }
.input {
  appearance: none; width: 100%; height: var(--control); padding: 0 0.75rem;
  border: 1px solid var(--colors-gray-6); border-radius: var(--radii-l2);
  background: transparent; color: var(--colors-fg-default);
  font-size: 1rem; line-height: 1.5rem; transition: border-color 150ms;
}
.input::placeholder { color: var(--colors-fg-subtle); opacity: 1; }
.input:focus-visible { outline: 1px solid var(--colors-focus-ring); outline-offset: 0; border-color: var(--colors-focus-ring); }
.input[aria-invalid="true"] { border-color: var(--colors-error); }
.input[aria-invalid="true"]:focus-visible { outline-color: var(--colors-error); border-color: var(--colors-error); }

/* ------------------------------------------------------------------ Card */
.card { display: flex; flex-direction: column; min-width: 0; border-radius: var(--radii-l3); }
.card.outline { background: var(--colors-gray-1); border: 1px solid var(--colors-border); }
.card .header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; padding: 1.5rem; }
.card .title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.card .description { color: var(--colors-fg-muted); font-size: 0.875rem; line-height: 1.25rem; }
.card .body { display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: 0 1.5rem 1.5rem; min-width: 0; }
.card .body.flush { padding-inline: 0.75rem; display: block; } /* table cells bring their own 12px padding */
.legend { display: flex; gap: 1rem; color: var(--colors-fg-muted); font-size: 0.875rem; line-height: 1.25rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.key { width: 0.75rem; height: 0.75rem; border-radius: var(--radii-l1); flex: none; }
.key.bug { background: var(--mark-bug); }
.key.other { background: var(--mark-other); }

/* ------------------------------------------------------------------ Grid: 4 columns on phones, 8 on tablets, 12 from laptops */
.kpis, .grid { display: grid; gap: var(--gap); }
.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-5 { grid-column: span 5; }
  .span-7 { grid-column: span 7; }
  .span-12 { grid-column: span 12; }
}

/* ------------------------------------------------------------------ KPI tiles */
.kpi { padding: 1.25rem 1.5rem; gap: 0.75rem; }
@media (max-width: 479px) { .kpi { padding: 1rem; } }
.kpi-label { color: var(--colors-fg-muted); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.kpi-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; min-height: 2.75rem; }
.kpi-value > span:first-child { font-size: 2.25rem; line-height: 2.75rem; font-weight: 600; letter-spacing: -0.02em; }
.kpi-foot { color: var(--colors-fg-muted); font-size: 0.875rem; line-height: 1.25rem; margin-top: auto; }
.spark { display: block; width: 100%; height: 2.5rem; overflow: visible; }
.spark .area { fill: var(--colors-gray-a3); }
.spark .line { fill: none; stroke: var(--colors-accent-solid-bg); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
/* Progress (DESIGN.md: 10px track in fill-subtle with a white range, l1) */
.track { height: 0.625rem; overflow: hidden; border-radius: var(--radii-l1); background: var(--colors-gray-a3); display: flex; gap: 0.125rem; }
.range { height: 100%; background: var(--colors-accent-solid-bg); border-radius: var(--radii-l1); }
.range.other { background: var(--mark-other); }

/* ------------------------------------------------------------------ Bar rows: priority and age */
.bars { display: flex; flex-direction: column; gap: 0.875rem; flex: 1; justify-content: space-between; } /* fills a stretched card */
.bar-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem; gap: 1rem; align-items: center; }
@media (max-width: 479px) { .bar-row { grid-template-columns: 5.25rem minmax(0, 1fr) 3.5rem; gap: 0.75rem; } }
.bar-row .name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.bar-row .count { text-align: right; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.bar-row .count small { display: block; color: var(--colors-fg-muted); font-size: 0.75rem; line-height: 1.125rem; font-weight: 500; }
.bar-row .track { background: var(--colors-gray-a3); }
.summary { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--colors-border); }
.summary div { display: flex; flex-direction: column; }
.summary dt { color: var(--colors-fg-muted); font-size: 0.875rem; line-height: 1.25rem; }
.summary dd { margin: 0; font-size: 1.5rem; line-height: 2rem; font-weight: 600; }
.summary dd small { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: var(--colors-fg-muted); }

/* ------------------------------------------------------------------ Table */
.table { width: 100%; border-collapse: collapse; text-align: start; font-size: 0.875rem; line-height: 1.25rem; font-variant-numeric: lining-nums tabular-nums; }
.table th { padding: 0.75rem; text-align: start; white-space: nowrap; color: var(--colors-fg-muted); font-size: 0.75rem; line-height: 1.125rem; font-weight: 600; box-shadow: inset 0 -1px 0 0 var(--colors-border); }
.table td { padding: 0.75rem; white-space: nowrap; color: var(--colors-fg-muted); box-shadow: inset 0 -1px 0 0 var(--colors-border); vertical-align: middle; }
.table tr:last-child td { box-shadow: none; }
.table .num { text-align: right; }
.table .fg { color: var(--colors-fg-default); }
.table .wide { white-space: normal; min-width: 16rem; color: var(--colors-fg-default); }
.table .share { width: 40%; min-width: 7rem; }
.table a { display: inline-flex; align-items: center; min-height: 1.5rem; font-weight: 500; text-decoration: none; border-radius: var(--radii-l1); }
/* Touch: a 44px target; the negative margin eats the cell padding so the row stays the same height. */
@media (pointer: coarse) { .table a { min-height: 2.75rem; margin-block: -0.75rem; } }
.table a:hover { text-decoration: underline; }
.table .empty { text-align: center; padding-block: 1.5rem; }
.who { display: flex; align-items: center; gap: 0.75rem; color: var(--colors-fg-default); font-weight: 500; }

/* ------------------------------------------------------------------ Avatar */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2rem; height: 2rem; border: 1px solid transparent; border-radius: 9999px;
  background: var(--colors-gray-a3); color: var(--colors-gray-12);
  font-size: 0.75rem; line-height: 1; font-weight: 500;
}
.avatar.outline { background: transparent; border-color: var(--colors-gray-6); color: var(--colors-fg-muted); }

/* ------------------------------------------------------------------ Segment group */
.segments { display: inline-flex; align-items: center; max-width: 100%; background: var(--colors-gray-1); border-radius: var(--radii-l3); box-shadow: inset 0 0 0 1px var(--colors-border); }
.seg { display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; height: var(--control); min-width: var(--control); padding: 0 0.875rem; border: 1px solid transparent; border-radius: var(--radii-l3); font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; cursor: pointer; user-select: none; }
.seg + .seg::before { content: ""; position: absolute; left: -1px; top: 0.375rem; bottom: 0.375rem; width: 1px; background: var(--colors-gray-6); }
.seg:has(input:checked) { background: var(--colors-gray-2); border-color: var(--colors-gray-6); }
.seg:has(input:checked)::before, .seg:has(input:checked) + .seg::before { opacity: 0; }
.seg:has(input:focus-visible) { outline: var(--focus-ring-width) solid var(--colors-focus-ring); outline-offset: var(--focus-ring-offset); }

/* ------------------------------------------------------------------ Skeleton */
.skeleton { display: block; border-radius: var(--radii-l2); background: var(--colors-gray-a5); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.5; } }
.none-yet { color: var(--colors-fg-muted); font-size: 0.875rem; line-height: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
  .btn[aria-busy="true"] svg, .skeleton { animation: none; }
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ TV: essential text is at least body-md */
@media (min-width: 1920px) {
  .status, .alert, .kpi-label, .kpi-foot, .card .description, .bar-row .name, .bar-row .count,
  .table, .summary dt, .field > label, .field .error-text, .legend { font-size: 1rem; line-height: 1.5rem; }
  .table th { font-size: 0.875rem; line-height: 1.25rem; }
}