/* Visual language from the yFor workflow deck: cool greys, blue/teal/green/amber accents, dark by preference. */
:root {
  --bg: #ebeff2; --panel: #fff; --panel2: #f3f6f8; --line: #cad3da; --ink: #14202b; --mute: #566673;
  --accent: #2860d8; --ok: #14804f; --warn: #a8690a; --bad: #c93a30; --glow: rgba(40, 96, 216, 0.18);
  --pill-ready-bg: #f3f6f8; --pill-ready-fg: #14202b;
  --pill-blue-bg: #e1e9fa; --pill-blue-fg: #2257c8;
  --pill-amber-bg: #f3eadd; --pill-amber-fg: #925e0f;
  --pill-red-bg: #f7e3e2; --pill-red-fg: #b73730;
  --pill-teal-bg: #ddedee; --pill-teal-fg: #0f7178;
  --pill-green-bg: #deede6; --pill-green-fg: #14764b;
  --pill-pink-bg: #f5e2ed; --pill-pink-fg: #b02f7b;
  --pill-muted-bg: #e7eaeb; --pill-muted-fg: #566673;
  --fd: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --fb: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fm: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: light dark;
}

body { background: var(--bg); color: var(--ink); font: 14px/1.5 var(--fb); }
nav a, nav button { color: var(--ink); }
.top-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
h1, h2 { font-family: var(--fd); letter-spacing: 0.01em; }

.page { box-sizing: border-box; width: 100%; max-width: 1400px; margin: 0 auto; padding: 22px 20px 56px; }
.top-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 16px; margin-bottom: 8px; }
.page-body { display: flex; }

.dashboard { width: 100%; color: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1418; --panel: #141e24; --panel2: #1a2830; --line: #2a3b45; --ink: #e5ecf0; --mute: #8da0ac;
    --accent: #6e9cff; --ok: #3dcb90; --warn: #e6aa3c; --bad: #ff6f62; --glow: rgba(110, 156, 255, 0.22);
    --pill-ready-bg: #1a2830; --pill-ready-fg: #e5ecf0;
    --pill-blue-bg: #213043; --pill-blue-fg: #6e9cff;
    --pill-amber-bg: #313227; --pill-amber-fg: #e6aa3c;
    --pill-red-bg: #35292d; --pill-red-fg: #ff6f62;
    --pill-teal-bg: #1c373d; --pill-teal-fg: #4fd1d6;
    --pill-green-bg: #1a3633; --pill-green-fg: #3dcb90;
    --pill-pink-bg: #332c3a; --pill-pink-fg: #f27fc0;
    --pill-muted-bg: #253037; --pill-muted-fg: #8da0ac;
  }

  /* Utility classes on the sessions and devices pages that assume a light canvas. */
  .text-red-700 { color: var(--bad); }
  .text-gray-600 { color: var(--mute); }
  .bg-gray-100 { background: var(--panel); color: var(--ink); }
  .bg-black { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); }
  .border, .border-t { border-color: var(--line); }
}

.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dash-head h1 { font-size: 2.125rem; line-height: 1.05; font-weight: 600; }
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter select, .filter input[type="submit"] { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; color: var(--ink); font: 500 13px/1 var(--fb); }

/* Touch targets: every interactive control is at least 44 x 44 CSS pixels. */
.ctl, .filter select, .filter input[type="submit"] { min-height: 44px; min-width: 44px; }
.ctl { display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; }
.filter { font-size: 13px; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

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

.group { margin-bottom: 22px; }
.group[hidden], .empty[hidden] { display: none; }
.group h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 11px/1 var(--fm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.group-n { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; color: var(--ink); }
.group[data-blocked-on="decision"] h2 { color: var(--pill-red-fg); }
.group[data-blocked-on="human-merge"] h2, .group[data-blocked-on="human-qa"] h2 { color: var(--pill-amber-fg); }
.group[data-blocked-on="ci"] h2 { color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.unit-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.unit-who { display: flex; align-items: center; gap: 8px; }
.login { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--panel2); }
.avatar img, .avatar-initials { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar-initials { display: grid; place-items: center; font-size: 0.7rem; font-weight: 600; color: var(--mute); }

.state { margin-left: auto; }
.pill { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; font: 500 11px/1 var(--fm); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.pill-ready { background: var(--pill-ready-bg); color: var(--pill-ready-fg); }
.pill-dispatched { background: var(--pill-blue-bg); color: var(--pill-blue-fg); border-color: var(--pill-blue-fg); }
.pill-decision { background: var(--pill-amber-bg); color: var(--pill-amber-fg); border-color: var(--pill-amber-fg); }
.pill-blocked { background: var(--pill-red-bg); color: var(--pill-red-fg); border-color: var(--pill-red-fg); }
.pill-pr-open { background: var(--pill-teal-bg); color: var(--pill-teal-fg); border-color: var(--pill-teal-fg); }
.pill-merged { background: var(--pill-green-bg); color: var(--pill-green-fg); border-color: var(--pill-green-fg); }
.pill-in-qa { background: var(--pill-pink-bg); color: var(--pill-pink-fg); border-color: var(--pill-pink-fg); }
.pill-done, .pill-abandoned { background: var(--pill-muted-bg); color: var(--pill-muted-fg); }
.pill-abandoned { border-style: dashed; }
.unit-id { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; min-height: 44px; margin-top: 8px; font-family: var(--fm); font-size: 0.85rem; overflow-wrap: anywhere; }
.pr { color: var(--accent); }
a.pr { text-decoration: underline; text-underline-offset: 2px; }
.brief { margin-top: 4px; color: var(--ink); overflow-wrap: anywhere; }
.since { margin-top: 6px; font-size: 0.75rem; color: var(--mute); }

.empty { padding: 32px 0; text-align: center; color: var(--mute); }
.empty a { color: var(--accent); }

.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 12px; margin-bottom: 24px; }
.count { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.count-n { display: block; font: 600 34px/1 var(--fd); font-variant-numeric: tabular-nums; }
.count-label { margin-top: 8px; }
.count.state-done .count-n { color: var(--ok); }
.count.state-abandoned .count-n { color: var(--mute); }

@media (max-width: 640px) {
  .dash-head { flex-direction: column; align-items: flex-start; }
}

/* Motion is opt-in: a viewer who prefers reduced motion gets instant updates and none of these classes bite. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes unit-highlight {
    from { box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--glow); }
    to { box-shadow: 0 0 0 0 transparent; }
  }

  @keyframes unit-slide {
    from { opacity: 0; transform: translateY(-14px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }

  .unit-card.is-updated { animation: unit-highlight 1.4s ease-out; }
  .unit-card.is-moved { animation: unit-slide 0.5s ease-out, unit-highlight 1.4s ease-out; }
  .pr-row.is-updated { animation: unit-highlight 1.4s ease-out; }
  .pr-row.is-moved { animation: unit-slide 0.5s ease-out, unit-highlight 1.4s ease-out; }
}

/* Open pull requests: rows grouped by repo, CI pills in the deck palette. */
.pull-requests { margin-top: 28px; }
.pr-section-title { margin-bottom: 12px; font-size: 1.5rem; font-weight: 600; }
.pr-repo { margin-bottom: 20px; }
.pr-repo h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 11px/1 var(--fm); letter-spacing: 0.14em; color: var(--mute); overflow-wrap: anywhere; }
.pr-rows { display: grid; gap: 8px; }
.pr-row { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; min-width: 0; }
.pr-main { display: flex; flex-direction: column; min-width: 0; }
.pr-link { justify-content: flex-start; padding: 0; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.pr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--mute); }
.pr-meta .since { margin-top: 0; }
.pill-ci-success { background: var(--pill-green-bg); color: var(--pill-green-fg); border-color: var(--pill-green-fg); }
.pill-ci-failure { background: var(--pill-red-bg); color: var(--pill-red-fg); border-color: var(--pill-red-fg); }
.pill-ci-pending { background: var(--pill-amber-bg); color: var(--pill-amber-fg); border-color: var(--pill-amber-fg); }
.pill-ci-none { background: var(--pill-muted-bg); color: var(--pill-muted-fg); }

/* History timeline: one row per recorded change, newest first. */
.history { width: 100%; min-width: 0; color: var(--ink); }
.history .filter label { color: var(--mute); }
.history .filter input[type="search"] { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 4px 12px; color: var(--ink); font: 500 13px/1 var(--fb); width: 14rem; max-width: 100%; min-width: 0; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.event { display: grid; grid-template-columns: 170px 150px minmax(0, 1fr) 270px 170px; align-items: center; gap: 4px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; min-width: 0; }
.event p { margin: 0; min-width: 0; }
.event-when { display: flex; flex-direction: column; font-family: var(--fm); font-size: 0.8rem; }
.event-age { color: var(--mute); }
.event-who { display: flex; align-items: center; gap: 8px; }
.event-unit { margin-top: 0; min-height: 0; }
.event-move { display: flex; justify-content: flex-start; align-items: center; gap: 6px; flex-wrap: wrap; }
.event-started, .event-arrow, .event-blocked { color: var(--mute); font-size: 0.8rem; }
.timeline-empty { display: none; }
.timeline:not(:has(.event)) + .timeline-empty { display: block; }
.older { margin-top: 16px; text-align: center; }
.older a, .timeline-empty a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.unit-history { margin-top: 4px; font-size: 0.75rem; }
.unit-history a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; justify-content: flex-start; }

/* The five-column row needs about 860px plus page padding, so below 960px it stacks. */
@media (max-width: 960px) {
  .event { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .history .filter { width: 100%; }
  .history .filter input[type="search"] { width: 100%; }
}

/* Metrics: totals reuse .counts, weekly bars are CSS only, the recent tickets stack as cards on a phone. */
.metrics { width: 100%; min-width: 0; color: var(--ink); }
.metrics-section { margin-bottom: 28px; min-width: 0; }
.metrics-section h2 { margin-bottom: 10px; font-size: 1.5rem; font-weight: 600; }
.metrics-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
.metrics-none { color: var(--mute); }
.metrics .count-n { font-size: 30px; }

.weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.weeks li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 2.5rem; align-items: center; gap: 12px; min-height: 28px; }
.week-label { font: 500 12px/1 var(--fm); color: var(--mute); }
.week-count { font: 600 14px/1 var(--fm); font-variant-numeric: tabular-nums; text-align: right; }
.bar-track { display: block; height: 14px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar { display: block; width: calc(var(--pct, 0) * 1%); height: 100%; background: var(--accent); }

.tally { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tally li { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px; min-width: 0; }
.tally-name { font-family: var(--fm); font-size: 0.85rem; overflow-wrap: anywhere; }
.tally-n { font: 600 18px/1 var(--fd); font-variant-numeric: tabular-nums; }

.metrics-recent { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.metrics-recent th { padding: 0 12px 4px; text-align: left; font: 500 11px/1 var(--fm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.metrics-recent td { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 12px; min-width: 0; min-height: 44px; vertical-align: middle; overflow-wrap: anywhere; }
.metrics-recent td:first-child { border-left: 1px solid var(--line); border-radius: 12px 0 0 12px; }
.metrics-recent td:last-child { border-right: 1px solid var(--line); border-radius: 0 12px 12px 0; }
.metrics-recent .pr.ctl { justify-content: flex-start; }

@media (max-width: 640px) {
  .metrics .filter { width: 100%; }
  .weeks li { grid-template-columns: 4.5rem minmax(0, 1fr) 2rem; gap: 8px; }
  .metrics-recent, .metrics-recent tbody, .metrics-recent tr, .metrics-recent td { display: block; }
  .metrics-recent thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .metrics-recent tr { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; }
  .metrics-recent td, .metrics-recent td:first-child, .metrics-recent td:last-child { display: flex; justify-content: space-between; gap: 12px; border: 0; border-radius: 0; background: none; padding: 4px 0; min-height: 0; }
  .metrics-recent td::before { content: attr(data-label); flex: none; font: 500 11px/1.5 var(--fm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
}