/* Page chrome — dashboard-specific layout only.
   Every color/font/spacing/elevation reads from tokens.css. */

body {
  margin: 0;
  background: var(--md-surface-dim);
  color: var(--md-on-surface);
  font-family: var(--md-font-plain);
  font-feature-settings: "tnum" 1;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.page { max-width: 1280px; margin: 0 auto; padding: 28px 32px 80px; }

/* Header */
.dh {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 24px;
  border-bottom: 1px solid var(--md-outline-hair);
  gap: 24px; flex-wrap: wrap;
}
.dh__title {
  font: 500 24px/1.2 var(--md-font-brand);
  letter-spacing: -0.01em;
}
.dh__sub { color: var(--md-on-surface-muted); font-size: 12.5px; }
.dh__meta { display: flex; gap: 14px; align-items: center; color: var(--md-on-surface-faint); font-size: 12px; }
.dh__meta a { color: var(--md-on-surface-variant); text-decoration: none; border-bottom: 1px dotted var(--md-outline-variant); }
.dh__meta a:hover { color: var(--md-on-surface); }

/* Section heading */
.sh {
  display: flex; align-items: baseline; gap: 12px;
  margin: 28px 0 12px;
}
.sh__name {
  font: 500 11px/1 var(--md-font-plain);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.sh__hint { color: var(--md-on-surface-decor); font-size: 11.5px; }
.sh__rule { flex: 1; height: 1px; background: var(--md-outline-hair); }

/* HERO */
.hero {
  background: var(--md-surface-3);
  border: 1px solid var(--md-outline-hair);
  border-radius: 14px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 12px;
}
.hero__icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--p-idle) 22%, transparent);
  color: var(--md-on-surface-variant);
  position: relative; overflow: visible;
}
.hero--idle .hero__icon { background: color-mix(in srgb, var(--p-idle) 22%, transparent); color: var(--md-on-surface-variant); }
.hero--inflight .hero__icon { background: color-mix(in srgb, var(--p-info) 24%, transparent); color: var(--p-info); }
.hero--inflight .hero__icon::before {
  content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--p-info) 14%, transparent);
  animation: halo 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes halo {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .12; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__icon::before { animation: none; }
}
.hero__icon .material-symbols-outlined { font-size: 26px; font-variation-settings: 'wght' 400; }
.hero__body { min-width: 0; }
.hero__kicker {
  font: 500 11px/1 var(--md-font-plain);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  margin-bottom: 6px;
}
.hero__title {
  font: 500 20px/1.25 var(--md-font-brand);
  color: var(--md-on-surface);
  margin-bottom: 10px;
}
.hero__title a { color: inherit; text-decoration: none; }
.hero__title a:hover { color: var(--p-info); }
.hero__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero__hint { color: var(--md-on-surface-muted); font-size: 13px; }
.hero__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 200px; }
.hero__big { font: 500 28px/1 var(--md-font-data); letter-spacing: -0.01em; }
.hero__big small { font-weight: 400; font-size: 13px; color: var(--md-on-surface-faint); letter-spacing: 0; }
.hero__lbl { color: var(--md-on-surface-faint); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* In-flight hero expands to wrap a stages list */
.hero--inflight { display: block; }
.hero--inflight .hero__top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}
.hero--inflight .hero__divider {
  height: 1px;
  background: var(--md-outline-hair);
  margin: 22px -24px 18px;
}

/* Stage timeline */
.stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.stage {
  display: grid;
  grid-template-columns: 24px 150px 1fr 80px;
  gap: 14px;
  align-items: center;
  padding: 9px 0;
  position: relative;
}
.stage + .stage::before {
  content: ""; position: absolute; left: 11px; top: -1px; bottom: 50%;
  width: 2px; background: var(--md-outline-hair);
}
.stage--done + .stage--done::before { background: color-mix(in srgb, var(--p-ok) 60%, var(--md-outline-hair)); }
.stage--done + .stage--curr::before { background: color-mix(in srgb, var(--p-ok) 60%, var(--md-outline-hair)); }
.stage::after {
  content: ""; position: absolute; left: 11px; top: 50%; bottom: 0;
  width: 2px; background: var(--md-outline-hair);
}
.stage:last-child::after { display: none; }
.stage--done::after { background: color-mix(in srgb, var(--p-ok) 60%, var(--md-outline-hair)); }

.stage__mark {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--md-font-plain);
  font-size: 13px; font-weight: 500;
  background: var(--md-surface-container-high);
  color: var(--md-on-surface-faint);
  z-index: 1;
  position: relative;
}
.stage--done .stage__mark {
  background: color-mix(in srgb, var(--p-ok) 24%, var(--md-surface-container-high));
  color: var(--p-ok);
}
.stage--curr .stage__mark {
  background: color-mix(in srgb, var(--p-info) 26%, var(--md-surface-container-high));
  color: var(--p-info);
}
.stage--curr .stage__mark::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: color-mix(in srgb, var(--p-info) 16%, transparent);
  animation: halo 2.2s ease-in-out infinite;
}
.stage--queued .stage__mark { background: var(--md-surface-container); color: var(--md-on-surface-decor); }
.stage--fail .stage__mark   { background: color-mix(in srgb, var(--p-err) 26%, var(--md-surface-container-high)); color: var(--p-err); }

.stage__name { font: 500 13.5px/1.2 var(--md-font-plain); color: var(--md-on-surface); }
.stage--queued .stage__name { color: var(--md-on-surface-faint); font-weight: 400; }
.stage--done .stage__name { color: var(--md-on-surface-variant); }
.stage__note {
  font: 400 12.5px/1.4 var(--md-font-data);
  color: var(--md-on-surface-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage--queued .stage__note { color: var(--md-on-surface-decor); }
.stage__dur {
  font: 400 11.5px/1 var(--md-font-data);
  color: var(--md-on-surface-faint);
  text-align: right; letter-spacing: 0.02em;
}
.stage--curr .stage__dur { color: var(--p-info); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .stage--curr .stage__mark::before { animation: none; }
}

/* Pipeline strip */
.pipe {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
  padding: 18px 22px;
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-radius: 14px;
  margin-top: 16px;
}
.pipe__col { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.pipe__lbl {
  font: 500 11px/1 var(--md-font-plain);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.pipe__num { font: 500 22px/1 var(--md-font-data); }
.pipe__num.is-zero { color: var(--md-on-surface-decor); font-weight: 400; }
.pipe__bar { height: 6px; width: 100%; border-radius: 3px; background: var(--md-surface-container-highest); }
.pipe__bar--draft { background: color-mix(in srgb, var(--md-on-surface-faint) 35%, var(--md-surface-container-highest)); }
.pipe__bar--queued { background: color-mix(in srgb, var(--p-idle) 60%, var(--md-surface-container-highest)); }
.pipe__bar--inflight { background: var(--p-info); }
.pipe__bar--merged { background: color-mix(in srgb, var(--p-ok) 45%, var(--md-surface-container-highest)); }
.pipe__bar--deployed { background: var(--p-ok); }

/* Metrics grid */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px;
}
.metric {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.metric__lbl {
  font: 500 11px/1 var(--md-font-plain);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
}
.metric__val { font: 500 22px/1 var(--md-font-data); }
.metric__sub { font-size: 11.5px; color: var(--md-on-surface-muted); }
.metric__sub .delta-up { color: var(--p-ok); }
.metric__sub .delta-down { color: var(--p-warn); }

/* Queue table */
.qtable {
  background: var(--md-surface-container);
  border: 1px solid var(--md-outline-hair);
  border-radius: 12px;
  overflow: hidden;
}
.qrow {
  display: grid; grid-template-columns: 44px 76px 1fr 130px 100px;
  gap: 12px; align-items: center;
  padding: 12px 16px;
  border-top: 1px solid var(--md-outline-hair);
}
.qrow:first-of-type { border-top: 0; }
.qrow--header {
  background: var(--md-surface-container-low);
  color: var(--md-on-surface-faint);
  font: 500 11px/1 var(--md-font-plain);
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 10px 16px;
}
.qrow__pos { font: 500 13px/1 var(--md-font-data); color: var(--md-on-surface-variant); }
.qrow__id  { font: 500 13px/1 var(--md-font-data); color: var(--md-on-surface); }
.qrow__id a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--md-outline-variant); }
.qrow__id a:hover { color: var(--p-info); border-bottom-color: var(--p-info); }
.qrow__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow__age { color: var(--md-on-surface-muted); font-size: 12px; font-family: var(--md-font-data); text-align: right; }
.qrow--empty { padding: 22px 16px; color: var(--md-on-surface-faint); text-align: center; font-size: 13px; }

/* Activity feed */
.feed { display: flex; flex-direction: column; }
.feed__row {
  display: grid; grid-template-columns: 140px 28px 1fr 80px;
  gap: 14px; align-items: baseline;
  padding: 10px 0;
  border-top: 1px dashed var(--md-outline-hair);
}
.feed__row:first-child { border-top: 0; }
.feed__ts {
  font: 400 12px/1.2 var(--md-font-data);
  color: var(--md-on-surface-faint);
  letter-spacing: 0.02em;
}
.feed__step .material-symbols-outlined { font-size: 18px; vertical-align: middle; }
.feed__step--ok { color: var(--p-ok); }
.feed__step--info { color: var(--p-info); }
.feed__step--warn { color: var(--p-warn); }
.feed__step--err { color: var(--p-err); }
.feed__step--neutral { color: var(--md-on-surface-faint); }
.feed__what { font-size: 13.5px; }
.feed__what a { color: var(--md-on-surface); text-decoration: none; border-bottom: 1px dotted var(--md-outline-variant); }
.feed__what a:hover { color: var(--p-info); border-bottom-color: var(--p-info); }
.feed__what .kicker {
  display: inline-block; min-width: 80px;
  font: 500 11px/1 var(--md-font-plain);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--md-on-surface-faint);
  margin-right: 8px;
}
.feed__dur { color: var(--md-on-surface-faint); font-family: var(--md-font-data); font-size: 12px; text-align: right; }

/* Drafts */
.drafts {
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-hair);
  border-radius: 12px;
  overflow: hidden;
}
.draft-row {
  display: grid; grid-template-columns: 60px 1fr 140px 100px;
  gap: 12px; align-items: center;
  padding: 10px 16px;
  border-top: 1px dashed var(--md-outline-hair);
}
.draft-row:first-child { border-top: 0; }
.draft-row__id { font: 500 12px/1 var(--md-font-data); color: var(--md-on-surface-faint); }
.draft-row__title { font-size: 13px; }
.draft-row__title a { color: var(--md-on-surface); text-decoration: none; }
.draft-row__title a:hover { color: var(--p-info); }
.draft-row__age { color: var(--md-on-surface-faint); font-family: var(--md-font-data); font-size: 12px; text-align: right; }

/* Chip tweaks (DS chip is the base) */
.chip { font-family: var(--md-font-plain); }
.chip-type { text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; }

/* Footer */
.foot {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--md-outline-hair);
  color: var(--md-on-surface-decor);
  font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.foot a { color: var(--md-on-surface-faint); text-decoration: none; border-bottom: 1px dotted var(--md-outline-variant); }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__right { align-items: flex-start; }
  .pipe { grid-template-columns: repeat(2, 1fr); }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .qrow, .qrow--header { grid-template-columns: 36px 70px 1fr 90px; }
  .qrow__age { display: none; }
  .feed__row { grid-template-columns: 110px 22px 1fr; }
  .feed__dur { display: none; }
  .stage { grid-template-columns: 24px 110px 1fr 60px; }
}