/* Carbon g100 theme for the vendored @carbon/web-components (ADR-0003).
   Components read both contextual tokens (--cds-field, --cds-layer) and
   numbered ones (--cds-field-01), so both sets are defined. */
:root {
  --cds-background: #161616;
  --cds-layer: #262626; --cds-field: #262626;
  --cds-layer-hover: #333333; --cds-field-hover: #333333;
  --cds-layer-selected: #525252;
  --cds-border-subtle: #393939; --cds-border-strong: #6f6f6f;
  --cds-layer-01: #262626; --cds-layer-02: #393939;
  --cds-layer-hover-01: #333333; --cds-layer-selected-01: #525252;
  --cds-field-01: #262626; --cds-field-02: #393939; --cds-field-hover-01: #333333;
  --cds-border-subtle-00: #393939; --cds-border-subtle-01: #393939; --cds-border-subtle-02: #525252;
  --cds-border-strong-01: #6f6f6f; --cds-border-interactive: #4589ff;
  --cds-text-primary: #f4f4f4; --cds-text-secondary: #c6c6c6;
  --cds-text-placeholder: #6f6f6f; --cds-text-helper: #8d8d8d;
  --cds-text-on-color: #ffffff; --cds-text-inverse: #161616;
  --cds-link-primary: #78a9ff; --cds-link-primary-hover: #a6c8ff;
  --cds-icon-primary: #f4f4f4; --cds-icon-secondary: #c6c6c6;
  /* Drawn on top of icon-primary: the checkbox tick and the radio dot. Left
     to Carbon's light-theme default it is white on a near-white box. */
  --cds-icon-inverse: #161616; --cds-icon-on-color: #ffffff;
  --cds-interactive: #4589ff; --cds-focus: #ffffff; --cds-focus-inset: #161616;
  --cds-button-primary: #0f62fe; --cds-button-primary-hover: #0353e9;
  --cds-button-secondary: #6f6f6f; --cds-button-secondary-hover: #606060;
  --cds-support-success: #42be65; --cds-support-error: #fa4d56;
  --cds-support-warning: #f1c21b; --cds-support-info: #4589ff;
  /* Tag tokens are not part of the contextual set, so without these Carbon
     falls back to its light-theme tags: dark text on pale fills, in a dark
     interface. */
  --cds-tag-background-red: #a2191f; --cds-tag-color-red: #ffd7d9;
  --cds-tag-background-magenta: #9f1853; --cds-tag-color-magenta: #ffd6e8;
  --cds-tag-background-purple: #6929c4; --cds-tag-color-purple: #e8daff;
  --cds-tag-background-blue: #0043ce; --cds-tag-color-blue: #d0e2ff;
  --cds-tag-background-cyan: #00539a; --cds-tag-color-cyan: #bae6ff;
  --cds-tag-background-teal: #005d5d; --cds-tag-color-teal: #9ef0f0;
  --cds-tag-background-green: #0e6027; --cds-tag-color-green: #a7f0ba;
  --cds-tag-background-gray: #525252; --cds-tag-color-gray: #f4f4f4;
  --cds-tag-background-cool-gray: #4d5358; --cds-tag-color-cool-gray: #f2f4f8;
  --cds-tag-background-warm-gray: #565151; --cds-tag-color-warm-gray: #f7f3f2;
}

/* Carbon g100 tokens, hand-mapped. Square corners, compact density. */
:root {
  --bg: #161616;
  --layer: #262626;
  --layer-2: #393939;
  --hover: #353535;
  --border: #393939;
  --border-strong: #6f6f6f;
  --text: #f4f4f4;
  --text-2: #c6c6c6;
  --text-3: #8d8d8d;
  --link: #78a9ff;
  --blue: #0f62fe;
  --blue-hover: #0353e9;
  --red: #fa4d56;
  --red-dark: #da1e28;
  --green: #42be65;
  --yellow: #f1c21b;
  --purple: #be95ff;
  --font: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; height: 100%; background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.16px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #525252; }

/* --- Shell ------------------------------------------------------------- */

.shell { display: flex; flex-direction: column; min-height: 100vh; }

header.topbar {
  display: flex; align-items: center; gap: 24px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 48px;
  position: sticky; top: 0; z-index: 10;
}
.topbar .brand { font-weight: 600; letter-spacing: 0.16px; color: var(--text); }
.topbar .brand:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; }
.nav-link {
  color: var(--text-2); padding: 0 12px; line-height: 47px;
  border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--text); background: var(--hover); text-decoration: none; }
.nav-link.is-active { color: var(--text); border-bottom-color: var(--blue); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.whoami { color: var(--text-3); font-size: 12px; }

.content { padding: 24px 16px 64px; max-width: 1200px; width: 100%; margin: 0 auto; }
.content h1 { font-size: 24px; line-height: 30px; font-weight: 400; margin: 0 0 16px; }
.content h2 { font-size: 14px; line-height: 18px; font-weight: 600; margin: 0 0 12px; }
.lede { color: var(--text-2); margin: -8px 0 20px; max-width: 60ch; }
.muted { color: var(--text-3); }
.empty { color: var(--text-3); padding: 32px 0; }
.loading { padding: 16px 0; max-width: 400px; }

/* --- Tables ------------------------------------------------------------ */

.table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--text-2);
  border-bottom: 1px solid var(--border); padding: 8px 12px; white-space: nowrap;
}
.table td { border-bottom: 1px solid var(--border); padding: 10px 12px; vertical-align: top; }
.table tr:hover td { background: var(--layer); }
.table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table a:hover { text-decoration: none; }
.issue-title { color: var(--text-2); margin-left: 8px; font-weight: 400; }
.verdicts { white-space: nowrap; }
.added { color: var(--green); }
.removed { color: var(--red); }

/* --- Panels and run detail --------------------------------------------- */

.panel {
  background: var(--layer); border: 1px solid var(--border);
  padding: 16px; margin-bottom: 16px;
  /* Panels are drawn on --layer, which is also Carbon's default field colour,
     so any input inside one would vanish into it. */
  --cds-field: var(--layer-2); --cds-field-01: var(--layer-2);
  --cds-field-hover: var(--hover); --cds-field-hover-01: var(--hover);
}
.panel p { margin: 0 0 12px; color: var(--text-2); max-width: 90ch; }
.panel p:last-child { margin-bottom: 0; }
.panel code { font-family: var(--mono); color: var(--text); }
/* Summaries and step details are authored text with real line breaks in them;
   collapsing those turns a handover note into a wall. */
.summary { color: var(--text-2); white-space: pre-wrap; max-width: 100ch; }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.plain li:last-child { border-bottom: 0; }

.run-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.run-head h1 { margin-bottom: 8px; }
.run-head cds-button { margin-left: auto; }
.run-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.steps { list-style: none; margin: 0; padding: 0; }
.step { border-left: 2px solid var(--border); padding: 8px 0 8px 12px; margin-bottom: 4px; }
.step-succeeded { border-left-color: var(--green); }
.step-failed { border-left-color: var(--red); }
.step-running { border-left-color: var(--blue); }
.step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.step-name { font-weight: 600; text-transform: capitalize; }
.tokens { font-variant-numeric: tabular-nums; font-size: 12px; }
.step-detail {
  color: var(--text-2); margin-top: 6px; white-space: pre-wrap;
  font-family: var(--mono); font-size: 12px; line-height: 16px;
  background: var(--bg); border: 1px solid var(--border); padding: 8px;
  max-height: 260px; overflow: auto;
}
.attempts { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; }
.attempts li { padding: 2px 0; display: flex; gap: 8px; align-items: center; }

.log {
  font-family: var(--mono); font-size: 12px; line-height: 16px;
  background: var(--bg); border: 1px solid var(--border);
  padding: 12px; margin: 0; max-height: 60vh; overflow: auto; white-space: pre-wrap;
}

/* --- Workers ----------------------------------------------------------- */

.pair-form { display: flex; align-items: flex-end; gap: 12px; max-width: 480px; }
.pair-form cds-text-input { flex: 1; }
.token {
  font-family: var(--mono); font-size: 12px;
  background: var(--bg); border: 1px solid var(--border-strong);
  padding: 12px; margin: 12px 0 8px; overflow-x: auto; user-select: all;
}

/* --- Login ------------------------------------------------------------- */

.login-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 16px;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--layer); border: 1px solid var(--border); padding: 32px;
  /* The card is drawn on --layer, which is also Carbon's default field
     colour, so the inputs would vanish into it. Lift the fields one step. */
  --cds-field: var(--layer-2); --cds-field-01: var(--layer-2);
  --cds-field-hover: var(--hover); --cds-field-hover-01: var(--hover);
}
.login-card h1 { font-size: 28px; font-weight: 300; margin: 0 0 4px; }
.login-sub { color: var(--text-2); margin: 0 0 24px; }
.login-card form { display: flex; flex-direction: column; gap: 16px; }
.login-error { color: var(--red); font-size: 12px; }

/* --- Dashboard --------------------------------------------------------- */

.page-title { font-size: 28px; line-height: 36px; font-weight: 300; margin: 0 0 4px; }
.page-sub { color: var(--text-3); margin: 0 0 24px; }

.statband {
  display: grid; grid-template-columns: repeat(6, 1fr);
  background: var(--layer); margin-bottom: 24px;
}
.statband .stat { padding: 12px 16px; border-right: 1px solid var(--bg); }
.statband .stat:last-child { border-right: none; }
.statband .value { font-size: 26px; line-height: 32px; font-weight: 300; }
.statband .value .of { font-size: 15px; color: var(--text-3); }
.statband .label {
  font-size: 11px; letter-spacing: 0.32px; text-transform: uppercase; color: var(--text-3);
}

table.dashboard td { vertical-align: middle; height: 52px; }
table.dashboard .progress { width: 180px; }
/* The state cell is a dot plus one word and the project is a proper noun;
   neither reads well broken across two lines. */
table.dashboard td:nth-child(1),
table.dashboard td:nth-child(2),
table.dashboard td:nth-child(4) { white-space: nowrap; }
.dash-foot { margin-top: 16px; }

.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 9999px;
  flex: none; background: var(--text-3); margin-right: 6px;
}
.dot.running { background: var(--green); animation: pulse 1.6s ease-in-out infinite; }
.dot.stopped { background: var(--text-3); }

/* One cell per pipeline step, so two runs of different kinds stay comparable
   down the column. */
.strip { display: flex; gap: 2px; }
.strip .cell { height: 6px; flex: 1; min-width: 6px; background: var(--layer-2); }
.strip .cell.succeeded { background: var(--green); }
.strip .cell.failed { background: var(--red); }
.strip .cell.running { background: var(--blue); animation: pulse 1.6s ease-in-out infinite; }
.strip .cell.skipped { background: var(--layer-2); opacity: 0.5; }
.strip .cell.discarded { background: var(--yellow); }
.strip .cell.absent { background: #1f1f1f; }

.small { font-size: 12px; letter-spacing: 0.32px; }
.mono { font-family: var(--mono); font-size: 12px; }
.add { color: var(--green); }
.del { color: var(--red); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 900px) {
  .statband { grid-template-columns: repeat(2, 1fr); }
  .statband .stat { border-bottom: 1px solid var(--bg); }
}