/* forge.css — the one stylesheet (UI plan §1.3).
 *
 * Created empty by the S8 seam so `base.html` can link it and `web::forge_css` can serve
 * it from the binary (`include_str!`, like the two JS islands) before U1 exists. **U1 owns
 * the body of this file**: page grid, the two-column split that stacks at 375px, tables,
 * forms, `<details>` disclosure, status chips, monospace blocks, and the diff/board/DAG
 * layout classes the §4 wireframes assume.
 *
 * Class names the seam has already committed to, so U1 has them from the start:
 *
 *   nav[aria-label="Primary"]   the global nav bar (§2)
 *   .brand                      the "forge" wordmark, links to /
 *   ul.pillars > li             one entry per pillar; the current one carries
 *                               aria-current="page"
 *   .pillars .unavailable       a pillar with no destination from here yet — rendered
 *                               inert with a title, never as a dead link
 *   .bell / .bell .unread       the notification bell and its non-zero count
 *   details.account             the account menu (summary = username)
 *   .stub                       a seam placeholder page body, replaced by its owning unit
 *
 * No external origins, ever (§1.3): no @import, no url() off-box, system font stack only.
 *
 * ---------------------------------------------------------------------------------------
 * U1 additions — wireframe fidelity only (§1.7). No palette, no type scale, no dark mode:
 * that is a later, separate design plan (§8.7). Status semantics are the only colour.
 *
 * Conventions later units can rely on:
 *
 *   .split                      a two-pane layout (`.split > *` are the panes). Stacks to
 *                               one column at <=375px (§W1 NEEDS YOU / AGENTS NOW, §W2
 *                               FILES / ABOUT). More than two children just wrap onto a
 *                               second row at full width.
 *   .panel                      a boxed section with a heading, meant to live inside
 *                               `.split` or stand alone (a dashboard card, a summary box).
 *   .chip / .chip-*             the shared status chip — see templates/_chip.html, which
 *                               is how pages should produce one instead of hand-rolling
 *                               classes. `.status` / `.status-*` (already shipped by prior
 *                               units on pipelines, jobs and CI badges) share the same
 *                               colour variables so old and new pages read alike.
 *   .ts / .rel                  produced by templates/_time.html — an absolute timestamp
 *                               with its relative form alongside.
 *   .dag / .dag-stage / .dag-node   a left-to-right ladder of pipeline stages for a
 *                               `needs`-based DAG (§W6). Not consumed by any shipped
 *                               template yet (U7); the primitives exist so that unit
 *                               doesn't also have to design layout.
 *   .mono                       utility for an inline monospace run outside of <code>.
 *
 * Status/category vocabulary this stylesheet recognises (chip and .status- alike), see
 * "Status chips" below for the full grouping. New backend words are never invisible —
 * they fall into a neutral, unglyphed bucket — but extending the list here is how a new
 * word gets its own colour.
 */

/* ---------------------------------------------------------------------------------------
   Reset & base
   --------------------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  --fg: #1b1f23;
  --fg-muted: #57606a;
  --bg: #ffffff;
  --bg-subtle: #f6f8fa;
  --border: #d0d7de;

  /* Status semantics — the only colour this stylesheet uses (§1.7). */
  --chip-pass: #1a7f37;
  --chip-fail: #cf222e;
  --chip-running: #0969da;
  --chip-review: #8250df;
  --chip-queued: #57606a;
  --chip-blocked: #bf8700;
  --chip-draft: #6e7781;
  --chip-approved: #1a7f37;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
}

html {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.45;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  margin: var(--space-4) 0 var(--space-2);
}

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

p { margin: var(--space-2) 0; }

a { color: var(--chip-running); }
a:visited { color: #6639ba; }

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-3) 0;
}

/* ---------------------------------------------------------------------------------------
   Page grid
   --------------------------------------------------------------------------------------- */

header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}

main {
  flex: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-3);
}

footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3);
  color: var(--fg-muted);
  font-size: 0.85rem;
}

@media (max-width: 375px) {
  main {
    padding: var(--space-3) var(--space-2);
  }
}

/* ---------------------------------------------------------------------------------------
   Primary nav (classes committed by the S8 seam)
   --------------------------------------------------------------------------------------- */

nav[aria-label="Primary"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

nav[aria-label="Primary"] .brand {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--fg);
}

ul.pillars {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  flex: 1;
}

ul.pillars > li {
  display: inline-block;
}

ul.pillars a {
  text-decoration: none;
  color: var(--fg);
}

ul.pillars a[aria-current="page"] {
  font-weight: 700;
  border-bottom: 2px solid var(--chip-running);
}

.pillars .unavailable {
  color: var(--fg-muted);
  cursor: default;
  border-bottom: 1px dashed var(--border);
}

.bell a {
  text-decoration: none;
  color: var(--fg);
}

.bell .unread {
  color: var(--chip-fail);
}

details.account summary {
  cursor: pointer;
  list-style: none;
}

details.account summary::-webkit-details-marker {
  display: none;
}

details.account ul {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: var(--space-2);
  border: 1px solid var(--border);
  background: var(--bg);
}

details.account li {
  padding: var(--space-1) 0;
}

.stub {
  padding: var(--space-3);
  border: 1px dashed var(--border);
  color: var(--fg-muted);
  font-style: italic;
}

.deprecated-nav-slots {
  display: none;
}

/* ---------------------------------------------------------------------------------------
   Two-column split (§W1, §W2 and friends) — stacks under 375px
   --------------------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: start;
}

.panel {
  border: 1px solid var(--border);
  padding: var(--space-3);
}

.panel > h2, .panel > h3 {
  margin-top: 0;
}

@media (max-width: 375px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

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

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-3);
}

th, td {
  text-align: left;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

th {
  font-weight: 700;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

tbody tr:hover {
  background: var(--bg-subtle);
}

/* Row/list based listings that behave like tables: tickets, runs, commits, pr-list,
   pipelines. */
table.tickets, table.runs, table.pipelines, table.tree {
  font-size: 0.95rem;
}

@media (max-width: 375px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  table thead {
    display: none;
  }
  table tbody tr {
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) 0;
  }
  table td {
    border: none;
    padding: var(--space-1) 0;
  }
}

/* ---------------------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------------------- */

form {
  margin: var(--space-2) 0;
}

form.inline {
  display: inline-block;
  margin: 0;
}

label {
  display: block;
  font-size: 0.9rem;
  color: var(--fg-muted);
  margin-top: var(--space-2);
}

form.inline label,
.filters label,
.revpicker label {
  display: inline-block;
  margin-right: var(--space-1);
}

input, select, textarea, button {
  font: inherit;
  color: inherit;
}

input[type="text"], input[type="password"], input[type="email"], input[type="search"],
input[type="number"], input[type="url"], select, textarea {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
  background: var(--bg);
  max-width: 100%;
}

textarea {
  display: block;
  width: 100%;
  max-width: 40rem;
  font-family: var(--font-mono);
}

fieldset {
  border: 1px solid var(--border);
  margin: var(--space-2) 0;
  padding: var(--space-2) var(--space-3);
}

legend {
  color: var(--fg-muted);
  font-size: 0.9rem;
}

button, input[type="submit"] {
  border: 1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

form.inline button, .actions button, .move-fallback button {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
}

button:hover {
  opacity: 0.85;
}

.filters, .revpicker, .move-fallback, .new-sprint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: var(--space-2) var(--space-3);
}

.filters label, .revpicker label {
  margin-top: 0;
}

.error {
  color: var(--chip-fail);
  border: 1px solid var(--chip-fail);
  background: #fff0f0;
  padding: var(--space-2);
}

.info, .hint {
  color: var(--fg-muted);
  font-size: 0.9rem;
}

.secret {
  border: 1px solid var(--chip-blocked);
  background: #fff8e6;
  padding: var(--space-3);
}

/* ---------------------------------------------------------------------------------------
   <details> disclosure
   --------------------------------------------------------------------------------------- */

details {
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
}

details summary {
  cursor: pointer;
  font-weight: 600;
}

details[open] summary {
  margin-bottom: var(--space-2);
}

/* ---------------------------------------------------------------------------------------
   Monospace blocks
   --------------------------------------------------------------------------------------- */

pre, code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
}

code {
  background: var(--bg-subtle);
  padding: 0 0.25em;
}

pre code {
  background: none;
  padding: 0;
}

/* ---------------------------------------------------------------------------------------
   Status chips (templates/_chip.html) and the .status/.status-* badges already shipped
   on pipelines, jobs and CI links. Same vocabulary, same colours (§1.7).

   Groups:
     pass      pass, success, merged, done                    check mark
     approved  approved, brief_approved                       filled square
     fail      fail, failed, fail_acceptance, fail_gates,
               gave_up, infra_error, timed_out, error          cross mark
     running   running, launching, active                     filled circle
     review    review, in_progress                             half circle
     queued    queued, pending, ready, skipped, open, other     hollow circle
     blocked   blocked, cancelled, usage_limit, stale           warning triangle
     draft     draft                                            pencil
   --------------------------------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border: 1px solid currentColor;
  border-radius: 1em;
  padding: 0.05em 0.6em;
  font-size: 0.85em;
  line-height: 1.6;
  white-space: nowrap;
}

.chip-pass, .status-pass, .status-success, .status-merged, .status-done {
  color: var(--chip-pass);
}

.chip-approved, .status-approved, .status-brief_approved {
  color: var(--chip-approved);
}

.chip-fail, .status-fail, .status-failed, .status-fail_acceptance, .status-fail_gates,
.status-gave_up, .status-infra_error, .status-timed_out, .status-error {
  color: var(--chip-fail);
}

.chip-running, .status-running, .status-launching, .status-active {
  color: var(--chip-running);
}

.chip-review, .status-review, .status-in_progress {
  color: var(--chip-review);
}

.chip-queued, .status-queued, .status-pending, .status-ready, .status-skipped,
.status-open, .status-other {
  color: var(--chip-queued);
}

.chip-blocked, .status-blocked, .status-cancelled, .status-usage_limit, .status-stale {
  color: var(--chip-blocked);
}

.chip-draft, .status-draft {
  color: var(--chip-draft);
  border-style: dashed;
}

.chip-other {
  color: var(--fg-muted);
}

/* The pre-U1 status badge: a bare word, sometimes an <a>, no chip wrapper. Colour only —
   wireframe fidelity, not a redesign of shipped markup. */
.status {
  font-weight: 600;
}

a.status {
  text-decoration: none;
}

/* Row-level status classes (table.pipelines tr.status-*, li.job.status-*): a left border
   is enough signal without recolouring the whole row. */
tr[class*="status-"], li[class*="status-"] {
  border-left: 3px solid currentColor;
  padding-left: var(--space-2);
}

/* templates/_time.html */
time.ts {
  white-space: nowrap;
}

time.ts .rel {
  color: var(--fg-muted);
  font-size: 0.9em;
}

/* ---------------------------------------------------------------------------------------
   Board (templates/board.html, backlog.html)
   --------------------------------------------------------------------------------------- */

.board {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.board .column {
  flex: 1 0 14rem;
  min-width: 14rem;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: var(--space-2);
}

.board .column h2 {
  margin-top: 0;
  font-size: 1rem;
}

ul.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card {
  border: 1px solid var(--border);
  background: var(--bg);
  padding: var(--space-2);
  cursor: grab;
}

.card[draggable="true"]:active {
  cursor: grabbing;
}

.card .num {
  color: var(--fg-muted);
  margin-right: var(--space-1);
}

.badge {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 1em;
  padding: 0 0.5em;
  font-size: 0.8em;
  color: var(--fg-muted);
}

@media (max-width: 375px) {
  .board {
    flex-direction: column;
    overflow-x: visible;
  }
  .board .column {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------------------
   DAG ladder — reserved for U7 (§W6), no current caller.
   --------------------------------------------------------------------------------------- */

.dag {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}

.dag-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.dag-stage + .dag-stage::before {
  content: "\2192";
  align-self: center;
  color: var(--fg-muted);
}

.dag-node {
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
  min-width: 8rem;
}

/* Jobs list (pipeline_detail.html) doubles as today's stand-in for a DAG until U7. */
ul.jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.job {
  border: 1px solid var(--border);
  padding: var(--space-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
}

.job .needs, .job .image {
  color: var(--fg-muted);
  font-size: 0.9em;
}

/* ---------------------------------------------------------------------------------------
   Diff (templates/_diff.html)
   --------------------------------------------------------------------------------------- */

.diffstat .ins { color: var(--chip-pass); }
.diffstat .del { color: var(--chip-fail); }

.filediff {
  border: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.filediff h3 {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-family: var(--font-mono);
}

.filediff .oldpath {
  color: var(--fg-muted);
}

.filediff .status {
  float: right;
  font-weight: 400;
  color: var(--fg-muted);
}

table.diff {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

table.diff td {
  padding: 0 var(--space-2);
  border-bottom: none;
  white-space: pre;
}

table.diff td.lno {
  color: var(--fg-muted);
  text-align: right;
  width: 1%;
  user-select: none;
}

table.diff td.origin {
  width: 1%;
  text-align: center;
  user-select: none;
}

table.diff tr.ins { background: #e6ffec; }
table.diff tr.del { background: #ffebe9; }
table.diff tr.hunk { background: var(--bg-subtle); color: var(--fg-muted); }

@media (max-width: 375px) {
  table.diff, table.diff tbody, table.diff tr, table.diff td {
    display: block;
  }
  table.diff td.lno {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------
   PR review comments (templates/_pr_comments.html)
   --------------------------------------------------------------------------------------- */

.review-comment {
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}

.review-comment .anchor {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--fg-muted);
  margin: 0;
}

.review-comment .meta {
  font-size: 0.85em;
  color: var(--fg-muted);
}

.review-comment .flag {
  color: var(--chip-blocked);
  font-weight: 600;
}

.review-comment.outdated {
  border-style: dashed;
}

/* ---------------------------------------------------------------------------------------
   Misc structural bits shared across the shipped pages
   --------------------------------------------------------------------------------------- */

.meta, .dates, .fileinfo, .pager, .diffstat {
  color: var(--fg-muted);
  font-size: 0.9em;
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.9em;
  margin: var(--space-2) 0;
}

.label {
  display: inline-block;
  border-left: 3px solid var(--label-color, var(--border));
  padding: 0 0.5em;
  margin-right: var(--space-1);
  background: var(--bg-subtle);
  font-size: 0.85em;
}

.notice, .cached {
  color: var(--fg-muted);
  font-style: italic;
}

.blob {
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--border);
  overflow-x: auto;
}

.blob .gutter {
  color: var(--fg-muted);
  text-align: right;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  margin: 0;
  user-select: none;
  border-right: 1px solid var(--border);
  background: var(--bg-subtle);
}

.blob .code {
  margin: 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  overflow-x: auto;
  flex: 1;
}

.readme {
  border: 1px solid var(--border);
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.actions, .merge, .close {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.merged {
  color: var(--chip-pass);
  font-weight: 600;
}

.sprints, .keys, .tokens, .hooks, .notifications, .commits, ul.repos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sprints li, .keys li, .tokens li, .hooks li, .notifications li, .commits li, ul.repos li {
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.notif.unread {
  font-weight: 700;
}

.notif .kind {
  color: var(--fg-muted);
  font-size: 0.85em;
}

ul.pr-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.pr-list li {
  border-bottom: 1px solid var(--border);
  padding: var(--space-2) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.denied {
  font-weight: 600;
}

@media (max-width: 375px) {
  .sprints li, .keys li, .tokens li, .hooks li, .notifications li, .commits li,
  ul.repos li, ul.pr-list li, .job, .actions, .merge {
    flex-direction: column;
    align-items: flex-start;
  }
}