/* ---------- branches & discussions ----------
   Both worlds (repo_plaintext.html/branch.html/discussion.html and
   branches.js/discussions.js/discussviews.js) emit the same class
   names by construction — one set of rules styles both. Row layouts
   mirror .commits/.commit (below); the state/branch chips reuse the
   tier badge's pill shape (.badge, above); post cards reuse the
   .pop-panel card look; forms reuse .key-import form's stacked
   spacing. No new tokens — existing --accent/--fg-muted/--border/etc.
   only. 🤖 Task 14 (branches & discussions), 2026-08-09. */

.branches-list { margin-top: 1rem; }
ul.branches { list-style: none; padding: 0; margin: 0; }
ul.branches li.branch-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  font-size: 0.9rem;
}
ul.branches li.branch-row:last-child { border-bottom: 1px solid var(--border); }
.branch-row .branch-name { font-weight: 600; }
.branch-row .msg { flex: 1; min-width: 10rem; font-weight: 500; }
.branch-row .author, .branch-row .when { color: var(--fg-muted); font-size: 0.85rem; }
.branch-row .when { font-variant-numeric: tabular-nums; }

.branch-title, .discussion-title { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.branch-description { margin: 1rem 0; }

/* The state pill (open/closed — discussions) and the branch chip
   (branch name — consolidated discussions list, task list) share the
   tier badge's pill shape (.badge, above): 1px currentColor border,
   999px radius, small caps-height text. */
.state {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.state-open { color: var(--accent); background: var(--accent-wash); }
.state-closed { color: var(--fg-muted); background: var(--bg-inset); }
/* Review verdicts (design 2026-09-12) share the pill. */
.state-pending { color: var(--fg-muted); background: var(--bg-inset); }
.state-approved { color: var(--badge-public); background: var(--badge-public-bg); }
.state-changes-requested { color: var(--danger); background: var(--danger-bg); }
.discussion-holder .when { margin-left: 0.25rem; }
.assign-form select, .attach-form input, .review-request-form select { margin-right: 0.35rem; }

.branch-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
}
a.branch-chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.branch-chip.muted { cursor: default; font-size: 0.75rem; }

.discussions-list { margin-top: 1rem; }

/* The Open/Closed/All state filter is a segmented control — the
   .subtabs recipe (Files|Commits, above), restated here because the
   plaintext world emits <a> links (must work without JS) while the
   E2EE world emits <button>s, and .subtabs only dresses anchors.
   Active state: class="active" (both worlds; the plaintext template
   adds aria-current alongside). */
.discussion-filter {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  overflow: hidden;
  margin: 0 0 1rem;
}
.discussion-filter a,
.discussion-filter button {
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--fg-muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.discussion-filter a + a,
.discussion-filter button + button { border-left: 1px solid var(--border); }
.discussion-filter a:hover,
.discussion-filter button:hover { color: var(--fg); background: var(--bg-inset); text-decoration: none; }
.discussion-filter .active {
  background: var(--accent-wash);
  color: var(--accent-emph);
  font-weight: 600;
}

/* The type filter (2026-08-22) sits BESIDE the state filter, not
   inside it: they answer two independent questions, and a reader who
   picks a type has not stopped caring about open-vs-closed. It borrows
   the same segmented-control recipe so the pair reads as one row of
   controls, and wraps rather than scrolling — a repo may configure
   more types than fit a phone. The sort bar (Last updated | Created)
   wears the same recipe. */
.discussion-type-filter, .discussion-sort {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  overflow: hidden;
  margin: 0 0 1rem 0.5rem;
}
.discussion-type-filter a, .discussion-type-filter button,
.discussion-sort a, .discussion-sort button {
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--fg-muted);
  background: none;
  border: 0;
  cursor: pointer;
}
.discussion-type-filter a + a, .discussion-type-filter button + button,
.discussion-sort a + a, .discussion-sort button + button { border-left: 1px solid var(--border); }
.discussion-type-filter a:hover, .discussion-type-filter button:hover,
.discussion-sort a:hover, .discussion-sort button:hover { color: var(--fg); background: var(--bg-inset); text-decoration: none; }
.discussion-type-filter .active, .discussion-sort .active {
  background: var(--accent-wash);
  color: var(--accent-emph);
  font-weight: 600;
}

/* A discussion's own type label. Deliberately quieter than the state
   pill beside it: state is the thing you scan a list for, type is the
   thing you scan WITHIN a state. */
.discussion-type {
  display: inline-flex;
  align-items: center;
  padding: 0.05rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--fg-muted);
}

/* The type picker on the two new-discussion forms and the thread
   page's re-label form. */
.discussion-type-select {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

ul.discussions { list-style: none; padding: 0; margin: 0; }
ul.discussions li.discussion-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  font-size: 0.9rem;
}
ul.discussions li.discussion-row:last-child { border-bottom: 1px solid var(--border); }
/* Phones: same reflow as the commits ledger (its 720px rule above) —
   title first at full width, then one quiet chip · state · author meta
   row, instead of the author clipping ragged at the right edge. */
@media (max-width: 720px) {
  ul.branches li.branch-row, ul.discussions li.discussion-row, ul.tasks li.task-row { gap: 0.3rem 0.6rem; }
  .discussion-row > a:not(.branch-chip) { flex: 1 1 100%; }
  .branch-row .branch-name { flex: 1 1 100%; }
}
/* :not(.branch-chip): the branch chip is also a direct-child anchor on
   branch-attached rows — without the guard it inherits the title's
   stretch and weight and renders as a huge bold pill. */
.discussion-row > a:not(.branch-chip) { flex: 1; min-width: 10rem; font-weight: 600; }
.discussion-row .author { color: var(--fg-muted); font-size: 0.85rem; }
.discussion-row .discussion-meta { color: var(--fg-muted); font-size: 0.8rem; margin-left: auto; white-space: nowrap; }

/* Post cards (a discussion's opening post + replies) reuse the
   .pop-panel card shape — border, radius, padding — flowed inline
   instead of floated. */
.post {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.post.opening-post { background: var(--bg-inset); }
.post-meta { margin: 0 0 0.5rem; }
.post-meta .author { font-weight: 600; font-size: 0.85rem; color: var(--fg-muted); }
.agent-session { color: var(--fg-muted); font-size: 0.8rem; white-space: nowrap; }
/* The driver byline names a person, so it belongs with the actor
   rather than with the machine detail. In a post header that splits
   the line in two — who did this on the first, which session and where
   on the second — and the separator between actor and driver is a CSS
   dot so no screen reader has to read it out. Task rows lay their own
   row out with flex gaps, so they take neither rule. */
.agent-driver { color: var(--fg-muted); font-size: 0.8rem; white-space: nowrap; }
.post-meta .agent-driver::before { content: "\00B7"; margin-right: 0.3rem; }
.post-meta .agent-session { display: block; }
.post .amadan-markdown:last-child { margin-bottom: 0; }

ul.tasks { list-style: none; padding: 0; margin: 0; }
ul.tasks li.task-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  font-size: 0.9rem;
}
ul.tasks li.task-row:last-child { border-bottom: 1px solid var(--border); }
.task-row .task-title { flex: 1; min-width: 10rem; font-weight: 500; }
.task-row .task-status {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
}
.btn-small { padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.inline-form { display: inline-block; margin: 0; }
.reply-form + .inline-form { margin-top: 0.75rem; }

/* Reply/add-task/new-discussion/edit-description forms: the same
   stacked-with-gap recipe as .key-import form (above) — this repo's
   one existing "settings form" precedent. */
.reply-form,
.add-task,
details.new-discussion form,
details.edit-description form,
.settings form,
.status-config form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 40rem;
  margin-top: 0.75rem;
}
.reply-form { margin-top: 1.25rem; }
/* new-discussion carries a bottom margin too: on the Discussions tab
   (members) it sits directly above the filter capsule, which has no
   top margin of its own. */
details.new-discussion { margin: 0.75rem 0 1rem; }
details.edit-description { margin-top: 0.75rem; }

/* Rename, on a task row (discussion #35): a disclosure, like the
   branch description's, because a plan is read constantly and
   corrected rarely. Open, flex-basis:100% drops the form onto its own
   line in the wrapping .task-row rather than squeezing the title. */
details.edit-task-title[open] { flex-basis: 100%; }
details.edit-task-title form { display: flex; gap: 0.5rem; margin-top: 0.5rem; max-width: 40rem; }
details.edit-task-title form input[type="text"] { flex: 1; min-width: 0; }
.status-config { margin-top: 1.5rem; }

ol.status-list { margin: 0.5rem 0 1rem; padding-left: 1.25rem; font-size: 0.9rem; }
ol.status-list li { padding: 0.15rem 0; }

.error { color: var(--danger); font-size: 0.85rem; margin: 0.4rem 0 0; }

/* ---- Branch review: subtabs, Overview grid, Changes surface ----
   (branch review UI design, 2026-08-12). Ledger rules apply: hairline
   rows, no cards, flat; verdigris wash marks the selected file. */

/* Five tabs since Amendment B: the capsule scrolls within itself on
   narrow screens instead of widening the page. display:flex (not the
   base inline-flex) so max-width applies; width fits content via the
   border-box capsule already being inline in flow. */
.branch-subtabs { margin: 0.5rem 0 1rem; max-width: 100%; overflow-x: auto; white-space: nowrap; }
.branch-subtabs a { flex-shrink: 0; }

.branch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 2rem; align-items: start; }
.branch-rail section { margin-bottom: 1.5rem; }
.branch-rail h3 { margin: 0 0 0.5rem; }
.branch-rail .rail-count { color: var(--fg-muted); font-weight: 400; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.branch-rail ul.commits li.commit { font-size: 0.85rem; }
.changes-summary .counts, .changes-summary .viewed-progress { display: block; font-size: 0.85rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

.changes-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.changes-rail { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
ol.changes-files { list-style: none; margin: 0; padding: 0; }
ol.changes-files a.changes-row { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.5rem; border-top: 1px solid var(--border); color: var(--fg); font-size: 0.85rem; }
ol.changes-files li:last-child a.changes-row { border-bottom: 1px solid var(--border); }
a.changes-row:hover { background: var(--bg-inset); text-decoration: none; }
a.changes-row.current { background: var(--accent-wash); color: var(--accent-emph); font-weight: 600; }
.changes-row .path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; font-family: var(--mono); font-size: 0.8rem; }
.changes-row .viewed-mark { color: var(--accent); flex: none; }
/* [hidden] has no UA effect on inline SVG (HTML-namespace rule only) —
   keep the 1em slot so the path column never shifts, hide the mark. */
.changes-row .viewed-mark[hidden] { visibility: hidden; }
.counts { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.8rem; }
.counts .add { color: var(--badge-public); }
.counts .del { color: var(--danger); }
.counts .bin { color: var(--fg-muted); }
.changes-progress { border-top: 1px solid var(--border); margin: 0; padding: 0.5rem; font-size: 0.85rem; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.changes-progress.all-viewed { color: var(--accent-emph); }
.branch-moved { margin: 0 0 0.5rem; padding: 0.4rem 0.5rem; font-size: 0.85rem; color: var(--fg-muted); border: 1px dashed var(--border); border-radius: var(--radius-ctl); }

.changes-file { margin-bottom: 1.5rem; }
.changes-file-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-ctl) var(--radius-ctl) 0 0; }
.changes-file-head .path { font-size: 0.85rem; overflow-wrap: anywhere; }
.changes-file-head .viewed-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--fg-muted); white-space: nowrap; cursor: pointer; }
.changes-file .diff-file { border-top: none; border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }
.changes-file .diff-file-header { display: none; }
.changes-empty { margin-top: 1rem; }

/* Dashboard cards (Amendment B): Discussions + Tasks side by side in
   the main column, above Activity. Must precede the 800px media query
   below — its stacking override has equal specificity and wins only
   by cascade order. */
.dash-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
.dash-cards section { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0; }
.dash-cards h3 { margin: 0 0 0.5rem; }
.dash-cards .rail-count { color: var(--fg-muted); font-weight: 400; font-size: 0.85rem; font-variant-numeric: tabular-nums; }

@media (max-width: 800px) {
  .branch-grid, .changes-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-cards { grid-template-columns: 1fr; }
  /* The dashboard's main column (description, stats, Activity) leads
     on narrow screens; the rail cards follow. (The v1 order:-1 rule
     predated Amendment A, when the description lived in the rail.) */
  .changes-rail { position: static; max-height: none; }
}

/* ---- Branch dashboard (Amendment A): stat tiles + Activity ----
   Tiles are text, not charts: label over a semibold value in the
   default proportional figures (tabular-nums is for columns, not
   display sizes). One hairline capsule, internal dividers — the
   subtabs grammar at rest. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); margin: 1rem 0 1.5rem; }
.stat-tile { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 1rem; }
.stat-tile + .stat-tile { border-left: 1px solid var(--border); }
.stat-label { font-size: 0.8rem; color: var(--fg-muted); }
.stat-value { font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.stat-sub { font-size: 0.8rem; color: var(--fg-muted); }

.branch-activity h3 { margin-bottom: 0.5rem; }
ul.activity { list-style: none; margin: 0; padding: 0; }
li.activity-row { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; padding: 0.35rem 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
ul.activity li:last-child { border-bottom: 1px solid var(--border); }
.activity-row .actor { font-weight: 600; }
.activity-row .verb { color: var(--fg-muted); }
.activity-row .object { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.activity-row .when { margin-left: auto; color: var(--fg-muted); font-size: 0.8rem; white-space: nowrap; }

/* Branch lifecycle: state chips, the closed-branch banner, and the
   Branches tab's Active|Closed filter capsule. */
.branch-filter { margin: 0.5rem 0 1rem; }
.state-chip { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.75rem; color: var(--fg-muted); }
.chip-merged { color: var(--accent-emph); background: var(--accent-wash); border-color: transparent; }
.chip-archived { background: var(--bg-inset); }
.chip-deleted { border-style: dashed; }
.branch-banner { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; }
.branch-banner form { margin-left: auto; }
.branch-admin { margin-top: 1.5rem; }

/* Merge readiness rows (Amendment C): status dot + text, reusing the
   ci-dot state colors. */
.merge-checks { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.merge-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; }

/* The merge action (discussion #7). The explanatory copy is set at the
   same size as the checks above it, not smaller: "what was actually
   verified" is not a footnote to a button that lands code on the
   default branch. */
.merge-form { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }
.merge-form .btn { width: 100%; }
.merge-close { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; margin-bottom: 0.5rem; }
.merge-verified, .merge-gate, .merge-blocked { font-size: 0.8rem; line-height: 1.4; margin: 0.5rem 0 0; }
.merge-blocked { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.75rem; }

/* The encrypted tier's Merge card (discussion #31). It has no button
   and never will, so what would be the action is three git lines a
   person can copy. Same size as .merge-checks for the same reason the
   verified note is: this is the answer, not a footnote to one. */
.merge-steps-intro { font-size: 0.9rem; margin: 0.75rem 0 0.35rem; }
.merge-steps { font-size: 0.85rem; line-height: 1.5; margin: 0; padding: 0.75rem;
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: var(--radius-ctl); overflow-x: auto; }
.merge-steps code { background: none; padding: 0; }

.tasks-card ul.tasks { font-size: 0.9rem; }
.discussions-card ul.discussions { font-size: 0.9rem; }
.rail-link { font-size: 0.85rem; margin: 0.5rem 0 0; }

@media (max-width: 800px) {
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-tile:nth-child(odd) { border-left: none; }
  .stat-tile:nth-child(n+3) { border-top: 1px solid var(--border); }
}