/* Platform-specific components, drawn only from the tokens in app.css (so dark mode follows). */
.step-no { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: var(--space-2); border-radius: 50%;
  font: 600 var(--text-xs)/1 var(--font-mono); border: 1px solid var(--line-strong); color: var(--text-muted); }
#nav a.active .step-no { background: var(--primary); border-color: var(--primary); color: var(--surface); }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-head h1 { margin: 0; }
.page-head p { margin: var(--space-1) 0 0; color: var(--text-muted); max-width: 70ch; }

.deploy-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-4); align-items: start; }
@media (max-width: 960px) { .deploy-grid { grid-template-columns: 1fr; } }

textarea.yaml { font: var(--text-sm)/1.55 var(--font-mono); min-height: 340px; tab-size: 2; white-space: pre; resize: vertical; }
pre.yaml { font: var(--text-sm)/1.55 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); overflow: auto; max-height: 480px; margin: 0; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.checks li { display: grid; grid-template-columns: 20px 1fr auto; gap: var(--space-2); align-items: baseline; }
.checks .mark { font-weight: 600; }
.checks li.ok .mark { color: var(--success); }
.checks li.bad .mark { color: var(--danger); }
.checks li.warn .mark { color: var(--warning); }
.checks .val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-2); }

.summary-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); }
.summary-dl dt { color: var(--text-muted); }
.summary-dl dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* Lifecycle steps: done (filled), now (outlined primary), bad (danger), ahead (faint). */
.pipeline { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; margin: 0 0 var(--space-4); counter-reset: step; }
.pipeline li { counter-increment: step; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--text-sm); color: var(--text-faint); background: var(--surface); }
.pipeline li::before { content: counter(step); font: 600 var(--text-xs)/1 var(--font-mono); }
.pipeline li.done { color: var(--success-ink); background: var(--success-soft); border-color: transparent; }
.pipeline li.now { color: var(--primary-ink); border-color: var(--primary); background: var(--primary-soft); }
.pipeline li.bad { color: var(--danger-ink); background: var(--danger-soft); border-color: transparent; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 150px 140px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: var(--text-md); }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
.timeline .what { font-family: var(--font-mono); font-size: var(--text-sm); }
.timeline .what.failed, .timeline .what.reject, .timeline .what.rolled_back { color: var(--danger); }
.timeline .what.done, .timeline .what.deployed, .timeline .what.approve { color: var(--success); }
@media (max-width: 720px) { .timeline li { grid-template-columns: 1fr; gap: 0; } }

.cards { display: grid; gap: var(--space-4); }
.review-card { display: grid; gap: var(--space-4); }
.review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.review-head h2 { margin: 0; }
.review-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 960px) { .review-cols { grid-template-columns: 1fr; } }

table.versus td.num b { font-weight: 600; }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger); }

.approvers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.approvers li { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; }
.approvers .comment { color: var(--text-muted); font-size: var(--text-sm); }

.members td { text-align: center; }
.members td:first-child, .members th:first-child { text-align: left; }
.link-cell { display: flex; gap: var(--space-2); align-items: center; }
.link-cell code { font: var(--text-xs) var(--font-mono); color: var(--text-muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; }
.inline-form label { margin: 0; }
.callout.warn::before { content: "Внимание: "; }
.callout.bad::before { content: "Ошибка: "; }
.callout.ok { background: var(--success-soft); color: var(--success-ink); }
body.rating #nav, body.rating #auth { display: none; }
.event-detail { grid-column: 1 / -1; margin-top: var(--space-1); }
.event-detail summary { cursor: pointer; color: var(--link, var(--primary)); }
.event-detail .summary-dl { margin-top: var(--space-2); font-size: var(--text-sm); }
.event-detail .summary-dl dd { font-family: var(--font-sans); font-size: var(--text-sm); }