/* Inside Jobs — NPS theme overrides on top of Pico.css v2 */

:root,
[data-theme="light"] {
  --pico-background-color: #F5F5F0;
  --pico-color: #2c2820;
  --pico-muted-color: #6f6259;
  --pico-muted-border-color: #D4C4A8;
  --pico-card-background-color: #FFFFFF;
  --pico-card-border-color: #000000;
  --pico-card-section-border-color: #D4C4A8;
  --pico-card-sectioning-background-color: transparent;
  --pico-border-radius: 0;
  --pico-primary: #213A1B;                /* mallard green */
  --pico-primary-background: #213A1B;
  --pico-primary-hover: #56903A;
  --pico-primary-focus: rgba(33,58,27,0.25);
  --pico-progress-color: #213A1B;
  --pico-progress-background-color: #ebe6db;
  --pico-font-family-sans-serif: 'Frutiger', 'Cabin', system-ui, -apple-system, sans-serif;
  --pico-font-family: var(--pico-font-family-sans-serif);
  --pico-font-size: 112.5%;
  --pico-line-height: 1.5;
  --pico-spacing: 1rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-block-spacing-horizontal: 1rem;
}

@font-face {
  font-family: 'Frutiger';
  font-weight: 400 700;
  src: url('/static/fonts/frutiger.woff2') format('woff2');
  font-display: swap;
}

html, body { padding-bottom: 60px; }
body { background-color: #F5F5F0 !important; }

main.container { max-width: 760px; }

/* NPS header band */
header.nps {
  background: #000;
  color: #fff;
  border-bottom: 4px solid #C56C39;
  padding: 14px 24px;
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  text-align: center;
}
header.nps hgroup { grid-column: 2; margin: 0; }
header.nps hgroup h1 {
  color: #fff;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}
header.nps hgroup p {
  color: #D4C4A8;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 2px 0 0;
}
header.nps #updated {
  color: #D4C4A8;
  grid-column: 3;
  justify-self: end;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Empty state */
.empty {
  color: var(--pico-muted-color);
  padding: 60px 16px;
  text-align: center;
  font-style: italic;
}
.empty code {
  background: #fff;
  border: 1px solid #D4C4A8;
  border-radius: 0;
  padding: 4px 10px;
  font-style: normal;
}

/* Job card — Pico <article> with NPS top overbar */
article.job {
  border-top: 4px solid #213A1B;          /* default = running */
  margin-bottom: 0.85rem;
  padding: 0.75rem 1rem;
}
article.job.succeeded { border-top-color: #56903A; }
article.job.failed    { border-top-color: #B33333; }
article.job.stalled   { border-top-color: #C56C39; }

article.job > header {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
article.job > header hgroup { margin: 0; flex: 1; min-width: 0; }
article.job > header hgroup h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--pico-color);
}
article.job > header hgroup p {
  margin: 2px 0 0;
  font-style: italic;
  color: var(--pico-muted-color);
  font-size: 0.95rem;
}
article.job > header hgroup p .phase {
  color: #C56C39;
  font-weight: 700;
  font-style: normal;
  text-transform: none;
}

.status-block { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.status-block .status {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #213A1B;
}
article.job.succeeded .status-block .status { color: #56903A; }
article.job.failed    .status-block .status { color: #B33333; }
article.job.stalled   .status-block .status { color: #C56C39; }
.status-block .pct {
  font-size: 2.2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

article.job progress {
  height: 10px;
  margin: 0.3rem 0 0.5rem;
  border-radius: 0;
}
article.job.succeeded progress::-webkit-progress-value { background: #56903A; }
article.job.succeeded progress::-moz-progress-bar      { background: #56903A; }
article.job.failed    progress::-webkit-progress-value { background: #B33333; }
article.job.failed    progress::-moz-progress-bar      { background: #B33333; }
article.job.stalled   progress::-webkit-progress-value { background: #C56C39; }
article.job.stalled   progress::-moz-progress-bar      { background: #C56C39; }

article.job .data {
  margin: 0.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}
article.job .data .warn { color: #B33333; font-weight: 700; }

article.job > footer {
  background: transparent;
  border: 0;
  border-top: 1px solid #D4C4A8;
  padding: 0.4rem 0 0;
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}
article.job > footer .foot-msg { font-style: italic; }

article.job > footer details { margin-top: 0.4rem; }
article.job > footer details summary {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pico-color);
  cursor: pointer;
}
article.job .milestone {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 1px 0;
  font-size: 0.92rem;
}
.milestone .m-time {
  color: #C56C39;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
}
.milestone .m-phase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--pico-color);
  min-width: 130px;
}
.milestone .m-msg { flex: 1; font-style: italic; }

@media (max-width: 600px) {
  header.nps { padding: 12px 16px; }
  header.nps hgroup h1 { font-size: 1.25rem; }
  header.nps hgroup p { font-size: 0.7rem; }
  header.nps #updated { display: none; }
  article.job > header hgroup h3 { font-size: 1.15rem; }
  .status-block .pct { font-size: 1.7rem; }
  .status-block .status { font-size: 0.7rem; }
  .milestone { flex-wrap: wrap; }
  .milestone .m-phase { min-width: 100px; font-size: 0.78rem; }
}