/* ---------- About sidebar (repo front page) ---------- */

/* Two columns on the root Files view: files + README in the main
   column, About on the right. Single column on phones with the
   sidebar FIRST (order: -1) — GitHub's own mobile order. */
.repo-columns { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) {
  .repo-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about-sidebar { order: -1; border-bottom: 1px solid var(--border); padding-bottom: 1rem; margin-bottom: 0.5rem; }
}
.about-sidebar h2 { font-size: 1rem; font-weight: 700; margin: 0.6rem 0 0.75rem; }
.about-sidebar h3 { font-size: 0.9rem; font-weight: 700; margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.45rem; }
.about-desc { margin: 0 0 0.75rem; font-size: 0.95rem; overflow-wrap: anywhere; }
.about-empty { color: var(--fg-muted); font-size: 0.9rem; font-style: italic; margin: 0 0 0.75rem; }
.about-row { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.6rem; font-size: 0.9rem; }
.about-row .icon { color: var(--fg-muted); flex: none; }
.about-homepage { font-weight: 600; overflow-wrap: anywhere; }
.about-sidebar section { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; }
.about-count { color: var(--fg-muted); font-weight: 400; }
.about-contributors ul { list-style: none; padding: 0; margin: 0; }
.about-contributors li { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; padding: 0.15rem 0; }
.about-contributors .c-count { color: var(--fg-muted); flex: none; }
/* The language bar is an SVG (segment widths/fills are SVG attributes,
   not styles — the CSP has no style-src carve-out for inline styles). */
.lang-bar svg { display: block; width: 100%; height: 8px; border-radius: 4px; margin-bottom: 0.6rem; }
.lang-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.lang-list li { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.lang-list .lang-dot { flex: none; }
.lang-list .lang-pct { color: var(--fg-muted); }

/* The Settings tab's About form (description + homepage). */
.about-form { margin: 1.5rem 0; }
.about-form label { display: block; margin: 0.6rem 0; max-width: 30rem; }
.about-form input[type="text"], .about-form input[type="url"] { width: 100%; margin-top: 0.25rem; display: block; }
.about-form .btn { margin-top: 0.5rem; }

/* LLM disclosure (LLM-disclosure change, 2026-08-09): the self-declared
   badge chip, its "self-declared" tag, the async measured-share line,
   and the bot mark on LLM contributor rows. Chip colors reuse the tier
   badge palette — verdigris for all, gilt amber for partial, public
   green for none. */
.llm-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
}
.llm-chip.llm-all { color: var(--accent); background: var(--accent-wash); border-color: var(--accent); }
.llm-chip.llm-partial { color: var(--badge-private); background: var(--badge-private-bg); border-color: var(--badge-private); }
.llm-chip.llm-none { color: var(--badge-public); background: var(--badge-public-bg); border-color: var(--badge-public); }
.llm-declared { color: var(--fg-muted); font-size: 0.8rem; }
.llm-share { color: var(--fg-muted); font-size: 0.85rem; margin: 0.5rem 0 0; }
.commits-filter { color: var(--fg-muted); font-size: 0.9rem; margin: 0.5rem 0 1rem; }
.about-contributors .c-name { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; }
.about-contributors .c-name .icon { color: var(--fg-muted); }

/* The Settings About form's LLM radio group. */
.llm-fieldset { border: 1px solid var(--border); border-radius: var(--radius-ctl); margin: 0.75rem 0; padding: 0.5rem 0.75rem 0.75rem; max-width: 30rem; }
.llm-fieldset legend { font-size: 0.9rem; font-weight: 600; padding: 0 0.25rem; }
.llm-fieldset label { display: block; margin: 0.4rem 0; }
.llm-fieldset input[type="radio"] { margin-right: 0.45rem; }
.llm-fieldset .tier-note { margin-top: 0; }
table.file-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  overflow: hidden;
  font-size: 0.875rem; /* 14px — GitHub's file-list size; inheriting the 16px body reads oversized */
}
table.file-table td { padding: 0.45rem 0.75rem; }
table.file-table tr.file-row + tr.file-row td { border-top: 1px solid var(--border); }
table.file-table td.name { white-space: nowrap; width: 1%; min-width: 12rem; }
table.file-table td.name a { text-decoration: none; color: var(--fg); }
table.file-table td.name a:hover { color: var(--link); }
table.file-table td.name.tree-dir a { font-weight: 500; }
table.file-table td.name .icon { margin-right: 0.45rem; color: var(--fg-muted); }
table.file-table td.name.tree-dir .icon { color: var(--accent); }
table.file-table td.last-msg {
  color: var(--fg-muted);
  max-width: 0; /* lets the ellipsis actually engage inside a full-width table */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.file-table td.last-msg a { color: var(--fg-muted); text-decoration: none; }
table.file-table td.last-msg a:hover { color: var(--link); }
table.file-table td.last-time {
  white-space: nowrap;
  text-align: right;
  color: var(--fg-muted);
  font-size: 0.8rem;
  width: 1%;
}
/* Phones: the last-commit message column had ellipsized down to a
   letter or two — no point even trying (Paul, 2026-08-09); drop it
   and let the filename take the width (truncating if it must) with
   the date holding the right edge. */
@media (max-width: 720px) {
  table.file-table td.last-msg { display: none; }
  table.file-table td.name {
    width: auto;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* Directory breadcrumb (replaces the old "... (up)" row / back link):
   repo root, then each ancestor a link, current segment plain. */
.breadcrumb {
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  word-break: break-all;
}
.breadcrumb .crumb { text-decoration: none; }
.breadcrumb .crumb:hover { text-decoration: underline; }
.breadcrumb .crumb-sep { color: var(--fg-muted); margin: 0 0.25rem; }
.breadcrumb .crumb-here { font-weight: 600; color: var(--fg); }

/* The `t` fuzzy file switcher (switcher.js). */
.switcher-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 100;
}
.switcher {
  width: min(40rem, 92vw);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.switcher-input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.9rem;
  outline: none;
}
.switcher-results {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  max-height: 50vh;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 0.9rem;
}
.switcher-result {
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.switcher-result.active { background: var(--bg-inset); box-shadow: inset 2px 0 0 var(--accent); }
.switcher-result b { color: var(--accent); font-weight: 700; }
.switcher-empty { padding: 0.6rem 0.9rem; color: var(--fg-muted); }

/* Commit page: header, diffstat, per-file colored diff. */
.commit-header { margin: 1rem 0; }
.commit-subject { margin: 0 0 0.25rem; }
.commit-body {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  padding: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-x: auto;
}
.commit-meta { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; color: var(--fg-muted); font-size: 0.9rem; }
.commit-meta .sha { background: var(--code-bg); padding: 0 0.3rem; border-radius: 4px; word-break: break-all; }
.parent-link { text-decoration: none; }

.diffstat { margin: 1rem 0; }
.diffstat-summary { font-weight: 500; }
.additions { color: var(--badge-public); }
.deletions { color: var(--danger); }
ul.diffstat-files { list-style: none; padding: 0; margin: 0.5rem 0 0; }
ul.diffstat-files li { padding: 0.15rem 0; font-size: 0.9rem; }

.diff-file {
  border: 1px solid var(--border);
  border-radius: var(--radius-ctl);
  margin-bottom: 1rem;
  overflow: hidden;
}
.diff-file-header {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: nowrap;
}
table.diff-lines { border-collapse: collapse; width: 100%; font-size: 0.85rem; }
table.diff-lines td.code {
  font-family: var(--mono);
  white-space: pre-wrap;
  word-break: break-all;
  padding: 0 0.75rem;
}
tr.diff-add td.code { background: rgba(46, 160, 67, 0.15); }
tr.diff-del td.code { background: rgba(248, 81, 73, 0.15); }
tr.diff-hunk td.code { background: var(--bg-inset); color: var(--fg-muted); }
tr.diff-meta td.code { color: var(--fg-muted); }

/* Two-phase commit diff (diffload.js): pending/error placeholders and
   the click-to-load button for huge files. */
.diff-pending .diff-placeholder, .diff-file .diff-error { margin: 0; padding: 0.5rem 0.75rem; }
.diff-load-btn { margin: 0.5rem 0.75rem; }

.commits-section { margin-top: 1.5rem; }
ul.commits { list-style: none; padding: 0; margin: 0; }
ul.commits li.commit {
  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.commits li.commit:last-child { border-bottom: 1px solid var(--border); }

/* CI status dot (Task 11): a small colored circle per commit row, one
   per state — reused as-is on the commit page's own CI summary line.
   Colour is never the only signal: the commits-list dot always carries
   a `title` and the commit-page summary always sits beside its label
   text in words, so screen readers and colour-blind users get the
   same information sighted users get from colour alone. */
.ci-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  align-self: center;
  /* Task 12: on private_e2ee this is a <button>, not a <span> (there is
     no separate commit page to link to on that tier — clicking it
     toggles the inline .ci-section instead). Reset the UA button chrome
     here, at the same specificity as the plain-color rules below, so a
     later same-specificity rule (.ci-lost's border, say) still wins in
     source order exactly as it does for the plaintext tiers' <span>. */
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}
button.ci-dot { cursor: pointer; }
button.ci-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ci-success { background: var(--badge-public); }
.ci-failure { background: var(--danger); }
.ci-running { background: var(--accent); }
.ci-queued { background: var(--badge-private); }
.ci-skipped { background: var(--fg-muted); }
.ci-lost { background: var(--bg); border: 2px solid var(--danger); }
.ci-stale { background: var(--bg); border: 2px dashed var(--fg-muted); }
/* ci-cancelled: a run superseded by a newer push. Deliberately NOT the
   fail-red — nothing went wrong with the code, and a cancelled run that
   reads as a red gate is a lie that costs somebody a debugging session.
   Muted and solid, so it is distinguishable from stale (dashed) and
   unreadable (dotted) without either of them shifting meaning. */
.ci-cancelled { background: var(--bg); border: 2px solid var(--fg-muted); }
/* ci-unreadable (Task 12, private_e2ee only): a "reported" row whose
   sealed payload wouldn't open. Deliberately neither the pass-green nor
   the fail-red — this browser could not read what happened, so it must
   not look like it decided. */
.ci-unreadable { background: var(--bg); border: 2px dotted var(--fg-muted); }
/* Two states only ci_pipeline_runs holds. "superseded" is a newer run
   of the same pipeline overtaking a queued one — ordinary operation,
   several times an hour on a busy day, so it wears cancelled's muted
   outline rather than anything that reads as trouble. "reported" is
   private_e2ee's terminal state, where the verdict is sealed and this
   browser did not read it: the same neither-pass-nor-fail dotted
   outline .ci-unreadable wears, for the same reason. */
.ci-superseded { background: var(--bg); border: 2px solid var(--fg-muted); }
.ci-reported { background: var(--bg); border: 2px dotted var(--fg-muted); }
/* THE FALLBACK, and it is a safety property rather than a style. A
   pipeline run in a state this binary has never heard of gets no
   .ci-<state> rule at all, and would otherwise render as a transparent
   nothing — invisible, which is how a page goes quietly greener than
   the truth. internal/repod/ci_runhealth.go classifies any unrecognised
   state as UNDELIVERED, the server stamps that on the row, and this
   rule paints it. Last in source order so it wins over the state
   colours at equal specificity: an undelivered run looks undelivered
   whatever its state is called. */
.ci-dot.ci-undelivered { background: var(--bg); border: 2px solid var(--danger); }

/* A pending run breathes, so a page you leave open tells you at a
   glance that something is still happening. Only queued and running
   pulse — a verdict holds still. Respects reduced-motion: the colour
   already distinguishes the states, so dropping the animation loses
   nothing. */
@keyframes ci-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.ci-running, .ci-queued { animation: ci-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ci-running, .ci-queued { animation: none; }
}

/* The dot is a link on the plaintext tiers: same size and position, no
   underline, and a focus ring that matches the E2EE tier's button. */
.ci-dot-link {
  display: inline-flex;
  flex: 0 0 auto;
  align-self: center;
  text-decoration: none;
  border-radius: 50%;
}
.ci-dot-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }