:root {
  color-scheme: light;
  font: 14px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--st-text);
  background: var(--st-bg);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--st-bg);
}

button, input, select { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
/* The kit's form controls (.z-input/.z-select/.z-textarea) draw their own
   focus ring; this older, unlayered rule would win over it and double it. */
button:focus-visible, input:not(.z-input):not(.z-checkbox):focus-visible, select:not(.z-select):focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--st-accent);
  outline-offset: 2px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--st-text); text-decoration: none; font-size: var(--st-text-section); }
.brand strong { color: var(--st-accent); }
/* The Stamp mark is an image (G2 as a black circle, artin 2026-09-27: "the 96
   circle in all cases"): it carries its own background, so no fill, ring or
   shadow of ours. */
.brand-mark {
  width: 30px;
  height: 30px;
  display: block;
  flex: none;
  border-radius: 50%;
}
.identity { margin-left: auto; color: var(--st-muted); font-size: var(--st-text-meta); }

.surface {
  background: var(--st-surface);
  border: 1px solid var(--st-border);
  border-radius: 16px;
  backdrop-filter: blur(16px);
}
.gate { max-width: 570px; margin: 84px auto; padding: 36px; }
.gate h1 { margin: 4px 0 10px; font-size: var(--st-text-title); letter-spacing: -.035em; }
.gate-signout { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; }
.gate-signout .text-button { width: auto; margin-top: 0; color: var(--st-bad); }
.gate-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border: 1px solid var(--st-ring);
  border-radius: 12px;
  color: var(--st-accent);
  background: var(--st-muted-fill);
  font-size: var(--st-text-heading);
}
.error-icon { color: var(--st-bad); border-color: var(--st-bad-surface-border); background: var(--st-bad-surface); }
.loading-card { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 150px; }
.loading-card p { margin: 0; }

.eyebrow { margin: 0 0 7px; color: var(--st-muted); font-size: var(--st-text-caption); font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.muted { color: var(--st-muted); }
.small { font-size: var(--st-text-caption); }

.app { display: grid; grid-template-columns: 274px minmax(0, 1fr); gap: 22px; margin-top: 22px; }
.sidebar { position: sticky; top: 20px; height: max-content; max-height: calc(100vh - 40px); padding: 20px; overflow: auto; }
.github-user { display: flex; align-items: center; gap: 9px; font-size: var(--st-text-section); font-weight: 700; }
/* Identity chips are the vendored <raft-avatar> element (components/avatar.html).
   It paints itself (shape, contract colours, initial, picture) in its shadow
   root; here we only place it, and reserve its box for the two sizes we render
   so nothing shifts when the element upgrades. */
raft-avatar { display: inline-block; flex: none; line-height: 0; vertical-align: middle; }
raft-avatar[size="28"] { width: 28px; height: 28px; }
raft-avatar[size="20"] { width: 20px; height: 20px; }
/* Keep identity chips neutral in the light shell; type is conveyed by
   the name and metadata, while the stock cyan/lavender fills compete with the
   grayscale navigation. */
/* No dark square behind a picture (artin 09-27: a round picture showed the
   element's square black chip and its dark border around it). The chip is a
   light, borderless disc: a picture covers it, a missing one leaves a quiet
   initial. */
raft-avatar::part(chip) { border-color: transparent; background: var(--st-muted-fill) !important; }
/* One shape everywhere (artin 09-27: "some round, some square"): every
   identity chip is a circle, like the Stamp mark, whether it shows an
   initial, an uploaded picture or a GitHub avatar. The element draws a 2px
   square; the chip and its picture are rounded here, in one place. */
raft-avatar { border-radius: 50%; }
raft-avatar::part(chip), raft-avatar::part(image) { border-radius: 50%; }
raft-avatar::part(initial) { color: var(--st-muted) !important; }
/* The kit's select drops the native arrow and leaves room for one its own
   script would draw; we do not load that script, so the room stood empty
   (artin 09-27, the merge method). The arrow is drawn here instead.
   The kit gives the select a fixed height AND padding above and below; in
   the small size that leaves less room than one line, so the text was cut
   at the bottom ("默认顺序" in the inbox, task #744). The height alone sets
   the size and the browser centres the text in it. */
.z-select:not([multiple]):not([size]) {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px 14px;
}
/* Controls not yet on the kit only: a kit control keeps the kit's look. */
select:not(.z-select), input[type="search"]:not(.z-input) {
  width: 100%;
  border: 1px solid var(--st-border);
  border-radius: 9px;
  padding: 9px 10px;
  color: var(--st-text);
  background: var(--st-muted-fill);
}

.nav { display: grid; gap: 5px; margin: 20px -7px; }
.nav button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 9px;
  color: var(--st-muted);
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.nav button:hover { color: var(--st-text); background: var(--st-muted-fill); }
.nav button.active { color: var(--st-text); border-color: var(--st-border); background: var(--st-muted-fill); box-shadow: inset 3px 0 var(--st-ring); }
.count { min-width: 25px; border-radius: 999px; padding: 1px 7px; color: var(--st-text); background: var(--st-muted-fill); font-size: var(--st-text-caption); text-align: center; }
.nav button.active .count { color: var(--st-text); background: var(--st-border); }

.repository-list { display: grid; gap: 9px; max-height: 260px; margin: 13px 0; overflow: auto; }
.repository-list label { display: grid; grid-template-columns: 15px 16px minmax(0,1fr) auto; gap: 8px; align-items: center; color: var(--st-muted); font-size: var(--st-text-caption); }
.repository-list label span { overflow-wrap: anywhere; }
.text-button { width: 100%; margin-top: 17px; border: 0; padding: 6px; color: var(--st-muted); background: transparent; cursor: pointer; font-size: var(--st-text-caption); }
.text-button:hover { color: var(--st-bad); }

.workspace { min-width: 0; }
.workspace-head { min-height: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 0 24px; border-bottom: 1px solid var(--st-border); margin-bottom: 20px; }
.workspace-head h1 { margin: 0; font-size: var(--st-text-title); font-weight: 700; letter-spacing: -.035em; }
/* A page heading and the line under it are two lines, not one block (artin
   09-25: "the head is so close to the content under it"). */
.workspace-head h1, .inbox2-head h1, .settings-content h1 { line-height: var(--st-leading-tight); }
.workspace-head h1 + p, .inbox2-head h1 + p, .settings-content h1 + p, .org-page-sub { margin-top: 10px; }
.workspace-head h1 + p + p { margin-top: 6px; }
.status { max-width: 520px; margin: 0 0 3px; font-size: var(--st-text-caption); text-align: right; }
.cards { display: grid; gap: 10px; }
/* Grouped PR inbox (#397 ②/④): one quiet header per non-empty section. */
.pr-section { margin-top: 22px; }
.pr-section:first-of-type { margin-top: 4px; }
.work-card {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  border: 1px solid var(--st-border);
  border-radius: 12px;
  padding: 0;
  color: inherit;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.card-main { min-width: 0; display: grid; justify-items: start; border: 0; padding: 16px 18px; color: inherit; background: transparent; cursor: pointer; text-align: left; text-decoration: none; }
.issue-card .card-main { cursor: inherit; }
.repo { color: var(--st-accent); font-size: var(--st-text-caption); font-weight: 700; letter-spacing: .02em; }
.title { display: block; margin: 5px 0 4px; font-size: var(--st-text-section); font-weight: 700; }
.meta, .coordinates { color: var(--st-muted); font-size: var(--st-text-meta); }
.coordinates { margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-caption); }
.card-aside { display: flex; align-items: center; gap: 10px; padding-right: 15px; }
.badges { max-width: 290px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding: 12px 15px 12px 0; }
/* A ring means a state. A badge that only names something (current, open, a
   label) has none, so the states are what stand out in a row of badges. */
.badge { border: 1px solid transparent; border-radius: 999px; padding: 3px 8px; color: var(--st-muted); font-size: var(--st-text-caption); white-space: nowrap; }
.badge.passing, .badge.approved { border-color: var(--st-good-border); color: var(--st-good); }
.badge.failing, .badge.changes_requested, .badge.invalidated { border-color: var(--st-bad-border); color: var(--st-bad); }
.badge.pending, .badge.pending_corroboration, .badge.stale { border-color: var(--st-warn-border); color: var(--st-warn); }
.external-link { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: var(--st-muted); text-decoration: none; }
.external-link:hover { color: var(--st-text); background: var(--st-muted-fill); }
/* Error and empty pages that stand in for a whole page (PR detail): the
   cause as a title, one line of explanation, the next step. */
.state-page { display: grid; justify-items: center; gap: 0; max-width: 520px; margin: 72px auto; padding: 40px 32px; text-align: center; border: 1px solid var(--st-border); border-radius: 12px; }
.state-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; border: 1px solid var(--st-border); color: var(--st-muted); }
.state-icon svg { width: 20px; height: 20px; }
.state-unavailable .state-icon { color: var(--st-bad); border-color: var(--st-bad-surface-border); background: var(--st-bad-surface); }
.state-page h1 { margin: 0; font-size: var(--st-text-heading); font-weight: 650; line-height: var(--st-leading-tight); letter-spacing: -.02em; }
.state-page > p { margin: 10px 0 24px; max-width: 420px; }
.state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
@media(max-width:760px) { .state-page { margin: 32px 0; padding: 32px 20px; } }
.empty { min-height: 180px; display: grid; place-items: center; align-content: center; border: 1px dashed var(--st-border); border-radius: 13px; padding: 32px; color: var(--st-muted); text-align: center; }
.empty-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--st-good); background: var(--st-good-surface); }
.empty p { margin: 10px 0 0; }

.detail { position: fixed; inset: 0 0 0 auto; z-index: 10; width: min(650px, 100%); padding: 28px; overflow: auto; border-left: 1px solid var(--st-border); background: var(--st-muted-fill); animation: slide-in .18s ease-out; }
@keyframes slide-in { from { transform: translateX(24px); opacity: .6; } }
/* Canonical PR page: the detail renders as a centered page, not a fixed drawer. */
.detail-page { max-width: 1180px; margin: 0 auto; padding: 8px 20px 48px; }
.detail-page-nav { margin: 6px 0 14px; }
.detail-page-nav .text-button { width: auto; margin: 0; padding: 4px 0; color: var(--st-muted); font-size: var(--st-text-meta); text-decoration: none; }
.detail-page-nav a.text-button:hover { color: var(--st-text); }
/* The page detail is not a card: whitespace and hairlines, like the inbox. */
.detail-page .detail { position: static; inset: auto; z-index: auto; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; }
.detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.detail-head .repo { color: var(--st-muted); font-size: var(--st-text-meta); font-weight: 500; letter-spacing: 0; }
.detail h2 { margin: 4px 0 10px; font-size: var(--st-text-title); font-weight: 700; letter-spacing: -.035em; line-height: var(--st-leading-tight); }
.detail-actions { flex: 0 1 auto; max-width: 100%; padding-top: 4px; }

.detail-action .z-select { width: auto; height: 32px; line-height: 30px; }
.icon-button { width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--st-border); border-radius: 9px; color: var(--st-text); background: var(--st-muted-fill); cursor: pointer; font-size: var(--st-text-heading); }
.detail-section { margin-top: 0; padding: 22px 0; border-top: 1px solid var(--st-border); }
/* Merge-queue actions sit in one row: join (default) then the queue link (ghost). */
.detail-batch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-batch form { margin: 0; }
.detail-section h3 { margin: 0 0 12px; color: var(--st-text); font-size: var(--st-text-section); font-weight: 600; letter-spacing: -.01em; text-transform: none; }
.files-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 10px; color: var(--st-muted); font-size: var(--st-text-caption); }
.files-toolbar label { display: inline-flex; align-items: center; gap: 6px; }
.files-toolbar select { background: var(--st-muted-fill); color: var(--st-text); border: 1px solid var(--st-border); border-radius: 7px; padding: 3px 6px; }
.files-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-height: 240px; max-height: min(70vh, 900px); }
.files-layout.has-tree { position: relative; grid-template-columns: var(--files-tree-width, 240px) minmax(0, 1fr); gap: 16px; }
/* The divider on the tree's right edge (artin 09-29): an 8px grab strip
   over the border, a line in the focus-ring colour while it is used. */
.files-splitter { position: absolute; top: 0; bottom: 0; left: calc(var(--files-tree-width, 240px) - 4px); z-index: 2; width: 8px; cursor: col-resize; touch-action: none; }
.files-splitter[hidden] { display: none; }
.files-splitter::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px; background: transparent; transition: background .12s; }
.files-splitter:hover::after, .files-splitter:focus-visible::after, .files-splitter.is-dragging::after { background: var(--st-ring); }
.files-splitter:focus-visible { outline: none; }
.files-layout.is-resizing { cursor: col-resize; user-select: none; }
/* Files tab, laid out like GitHub's (artin): the tree is a column, not a
   box — a divider on its right, nothing touching an edge; each file is its
   own bordered card with space around it, on the page's white. */
.files-tree { min-height: 240px; overflow: auto; padding: 4px 16px 0 0; border-right: 1px solid var(--st-border); background: var(--st-bg); color-scheme: light; --trees-bg-override: var(--st-bg); --trees-search-bg-override: var(--st-muted-fill); --trees-selected-bg-override: var(--st-surface-hover); --trees-font-family-override: inherit; }
.files-host { min-height: 240px; overflow: auto; }
.files-host diffs-container { display: block; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
@media (max-width: 820px) {
  .files-layout, .files-layout.has-tree { grid-template-columns: 1fr; max-height: none; }
  .files-splitter { display: none; }
  .files-tree { max-height: 220px; padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--st-border); }
  .files-host { max-height: min(70vh, 900px); }
}
.body { white-space: pre-wrap; line-height: var(--st-leading-normal); padding: 0; color: var(--st-text); }
.stack { display: grid; gap: 8px; }
.stack-item { display: grid; gap: 4px; border: 1px solid var(--st-border); border-radius: 9px; padding: 11px; color: inherit; text-decoration: none; }
.stack-item:hover { border-color: var(--st-border); background: var(--st-muted-fill); }


@media (max-width: 820px) {
  .shell { padding: 0 14px 28px; }
  .topbar { height: 62px; }
  .identity { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; max-height: none; }
  .workspace-head { align-items: start; flex-direction: column; gap: 8px; }
  .status { text-align: left; }
  .work-card { grid-template-columns: 1fr; }
  .card-aside, .badges { justify-content: flex-start; padding: 0 16px 13px; }
  .issue-card .badges { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Queue activity is the primary surface; configuration remains secondary. */
.batch-page { min-width: 0; }
.batch-page .workspace-head { gap: 20px; }
.batch-subtitle { margin: 7px 0 0; }
.batch-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.batch-toolbar { justify-content: flex-end; }
.batch-toolbar form, .batch-panel form { margin: 0; }
.batch-status { display: inline-flex; align-items: center; gap: 4px; }
.batch-indicator { content: ""; width: 7px; height: 7px; background: currentColor; border-radius: 50%; display: inline-block; }
.batch-panel { margin-bottom: 18px; overflow: hidden; }
.batch-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; }
.batch-section-head .eyebrow { margin: 0 0 7px; font-size: var(--st-text-caption); }
.batch-page h2 { font-size: var(--st-text-section); margin: 0; }
.batch-indicator { color: var(--st-accent); margin: 0 9px 1px 0; }
.state-merged .batch-indicator { color: var(--st-good); }
.state-failed .batch-indicator, .state-stale .batch-indicator { color: var(--st-bad); }
.batch-pr-list { list-style: none; padding: 0; margin: 0; }
.batch-pr-list > li { display: flex; gap: 13px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--st-border); }
.batch-pr-icon { font-size: var(--st-text-heading); color: var(--st-good); }
.batch-pr-body { display: flex; flex-direction: column; min-width: 0; gap: 3px; flex: 1; }
.batch-pr-body a { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; font-weight: 500; color: var(--st-text); text-decoration: none; overflow-wrap: anywhere; }
.batch-pr-body a:hover { color: var(--st-accent); }
.batch-row-state { color: var(--st-muted); font-size: var(--st-text-caption); }
.batch-panel-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 12px 20px; border-top: 1px solid var(--st-border); font-size: var(--st-text-caption); }
.batch-panel-footer summary { display: inline-flex; align-items: center; min-height: 24px; cursor: pointer; color: var(--st-muted); }
.batch-panel-footer a, .batch-history a { color: var(--st-accent); }
.batch-panel code { overflow-wrap: anywhere; }
.batch-notice { margin: 0 0 16px; }
.batch-panel .batch-notice, .batch-help { margin: 0 20px 16px; }
.batch-help { font-size: var(--st-text-meta); }
.batch-quiet { margin: 20px 0 30px; font-size: var(--st-text-meta); }
.batch-empty { text-align: center; padding: 65px 20px; }
.batch-empty h2 { margin-top: 12px; }
.batch-empty p { font-size: var(--st-text-meta); }
.batch-history { padding: 18px 0; border-top: 1px solid var(--st-border); font-size: var(--st-text-meta); }
.batch-history > summary { display: inline-flex; align-items: center; min-height: 28px; cursor: pointer; color: var(--st-muted); }
.batch-history-row { padding: 12px; margin-top: 10px; border: 1px solid var(--st-border); border-radius: 7px; }
.app:has(.batch-page) { display: block; }
.app:has(.batch-page) > .sidebar { display: none; }
.batch-page { max-width: 1040px; margin: 0 auto; }
@media (max-width: 760px) { .batch-page .workspace-head { align-items: flex-start; } .batch-toolbar { justify-content: flex-start; } .batch-row-state { display: none; } .batch-section-head, .batch-pr-list > li { padding-inline: 14px; } }
.sidebar:has(.sidebar-settings-entry) { display: flex; flex-direction: column; min-height: calc(100vh - 130px); }
/* Settings sections (Account, 09-25): a heading, a line of help, then a
   bordered panel; the danger zone sits last. */
.account-settings { display: grid; gap: 0; }
.settings-section { margin: 0 0 36px; }
.settings-section > h2, #settings-orgs.settings-section > h2 { margin: 0 0 12px; font-size: var(--st-text-section); font-weight: 600; line-height: var(--st-leading-tight); }
.settings-section > h2:has(+ .settings-section-help), #settings-orgs.settings-section > h2:has(+ .settings-section-help) { margin-bottom: 6px; }
.settings-section-help { margin: 0 0 14px; }
.settings-panel { border: 1px solid var(--st-border); border-radius: 10px; padding: 16px 18px; background: var(--st-bg); }
.github-account { display: flex; align-items: center; gap: 12px; }
.github-account-who { display: grid; gap: 2px; }
.settings-repos-form .repository-list { max-height: 320px; }
.settings-panel-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 12px -18px -16px; padding: 12px 18px; border-top: 1px solid var(--st-border); }
.settings-org-list { padding-top: 0; padding-bottom: 0; }
.settings-org-list .settings-org:last-child { border-bottom: 0; }
.settings-danger > h2 { color: var(--st-bad); }
.settings-danger-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-color: var(--st-bad-border); }
.settings-danger-panel p { margin: 0; }
.settings-danger-button { color: var(--st-bad); border-color: var(--st-bad-border); flex: none; }
/* Changelog (audit item 7, 09-25): a reading column, each entry one row of
   number, title, author. */
/* The docs (docs/index.html): the section list beside the guide, sticky
   while the guide scrolls; above it on a narrow screen. The text column keeps
   a reading width. */
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; align-items: start; }
.docs-toc { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.docs-toc-heading { margin: 0 0 8px; }
.docs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.docs-toc a { display: block; padding: 4px 8px; border-radius: 6px; color: var(--st-muted); font-size: var(--st-text-meta); line-height: var(--st-leading-normal); text-decoration: none; }
.docs-toc a:hover { color: var(--st-text); background: var(--st-muted-fill); }
.docs-title { margin-top: 0; }
/* Stamp Design's sidebar (design/index.html): the pages in their groups,
   the open one marked like a rail section. */
.design-page .docs-layout { padding-top: 28px; }
.design-nav ol + .docs-toc-heading { margin-top: 16px; }
.docs-toc a[aria-current="page"] { color: var(--st-text); background: var(--st-muted-fill); font-weight: 600; }
.design-page .docs-title { font-size: var(--st-text-title); line-height: var(--st-leading-tight); }
.docs-section { scroll-margin-top: 16px; }
@media (max-width: 860px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .docs-toc { position: static; max-height: none; padding-bottom: 12px; border-bottom: 1px solid var(--st-border); }
  /* Design's sidebar on a narrow screen: a group per line, its pages
     wrapping beside its name, so the page's text starts on the first screen. */
  .design-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: baseline; }
  .design-nav .docs-toc-heading, .design-nav ol + .docs-toc-heading { margin: 0; }
  .design-nav ol { display: flex; flex-wrap: wrap; gap: 2px; }
}
.changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 820px; }
.changelog-release { padding: 18px 20px; border: 1px solid var(--st-border); border-radius: 10px; }
.changelog-release.is-current { border-color: var(--st-accent); }
.changelog-release-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.changelog-release-head h2 { margin: 0; font-size: var(--st-text-section); font-weight: 600; }
.changelog-current { font-size: var(--st-text-caption); }
.changelog-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.changelog-entries li { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: baseline; gap: 10px; padding: 5px 0; font-size: var(--st-text-body); }
.changelog-number { color: var(--st-muted); font-variant-numeric: tabular-nums; text-decoration: none; }
.changelog-number:hover { color: var(--st-text); text-decoration: underline; }
.changelog-author { white-space: nowrap; }
.changelog-hidden { margin: 10px 0 0; }
.settings-app { display: grid; grid-template-columns: 220px minmax(0,1fr); min-height: 75vh; gap: 56px; padding: 32px 0; }
.settings-sidebar { border-right: 1px solid var(--st-border); padding-right: 24px; }
.settings-sidebar nav { display: grid; gap: 2px; margin-bottom: 30px; }
.settings-sidebar nav a { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 6px; text-decoration: none; color: var(--st-text); font-size: var(--st-text-body); font-weight: 500; }
.settings-sidebar nav a:hover { background: var(--st-surface-hover); }
.settings-sidebar nav a[aria-current] { color: var(--st-text); background: var(--st-surface-hover); }
.settings-content { max-width: 720px; padding-top: 8px; }
.settings-content h1 { margin: 0; font-size: var(--st-text-title); }
.settings-content .settings-title { margin-bottom: 24px; }
.settings-content .settings-title:has(+ .settings-intro) { margin-bottom: 0; }
.settings-content .eyebrow { margin: 0 0 8px; }
.settings-intro { margin: 10px 0 28px; max-width: 680px; }
.settings-repositories { border-top: 1px solid var(--st-border); }
.settings-repository { border-bottom: 1px solid var(--st-border); padding: 23px 0; }
.settings-repository header { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.settings-repository h2 { font-size: var(--st-text-section); margin: 0 0 4px; }
/* Organization settings lists (audit item 2, 09-25): one bordered panel,
   one compact row per repository, the controls of a row inside the row. */
.settings-repo-panel { border: 1px solid var(--st-border); border-radius: 10px; }
.settings-repo-panel .settings-repository { padding: 16px 18px; }
.settings-repo-panel .settings-repository:last-child { border-bottom: 0; }
.settings-repo-panel .settings-repository h2 { font-size: var(--st-text-body); font-weight: 600; margin: 0 0 2px; }
.settings-repo-panel .settings-repository h2 a { color: var(--st-text); text-decoration: none; }
.settings-repo-panel .settings-repository h2 a:hover { text-decoration: underline; }
.settings-repo-open { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--st-muted); }
.settings-repo-open:hover { background: var(--st-surface-hover); color: var(--st-text); }
.settings-repo-panel .settings-empty { padding: 32px 18px; text-align: center; }
.settings-row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.settings-repository details { margin-top: 12px; }
.settings-repository summary { cursor: pointer; color: var(--st-accent); font-size: var(--st-text-meta); }
.settings-manage > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; padding: 5px 10px; border: 1px solid var(--st-border); border-radius: 7px; color: var(--st-text); font-weight: 500; }
.settings-manage > summary::-webkit-details-marker { display: none; }
.settings-manage > summary svg { width: 14px; height: 14px; }
.settings-manage > summary svg:last-child { color: var(--st-muted); transition: transform .15s; }
.settings-manage[open] > summary svg:last-child { transform: rotate(180deg); }
.settings-manage > p, .settings-manage > .settings-config-form { max-width: none; }
.settings-manage[open] { padding-bottom: 2px; }
.settings-manage > p { margin: 12px 0 0; }
.settings-manage .settings-config-form { margin: 12px 0 0; padding: 14px 16px; border-radius: 8px; background: var(--st-surface); }
.settings-config-form { display: grid; gap: 16px; max-width: 520px; margin: 16px 0; }
.settings-config-form label { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.settings-manage .settings-config-form label { display: grid; grid-template-columns: minmax(0,1fr) auto; }
.settings-config-form .z-button { justify-self: start; }
.batch-setup-content .settings-config-form { max-width: none; margin: 20px 0; gap: 16px; }
.batch-setup-content .settings-config-form > p { margin: 0; }
.batch-setup-content .settings-config-form label:not(.settings-toggle) { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr); gap: 16px; }
.batch-setup-content h1 { margin-bottom: 16px; }
/* Repository > Configure and verify CI (audit item 3, 09-25): numbered steps
   in one panel, each a heading, a line of help, and its own form. */
.setup-steps { list-style: none; margin: 0; padding: 0; counter-reset: setup; border: 1px solid var(--st-border); border-radius: 10px; }
.setup-step { counter-increment: setup; display: grid; grid-template-columns: 28px minmax(0,1fr); column-gap: 16px; padding: 20px 22px; }
.setup-step + .setup-step { border-top: 1px solid var(--st-border); }
.setup-step::before { content: counter(setup); grid-row: 1; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--st-border-strong); font-size: var(--st-text-meta); font-weight: 600; }
.setup-step-head { grid-column: 2; }
.setup-step-head h2 { margin: 3px 0 4px; font-size: var(--st-text-section); font-weight: 600; }
.setup-step-head p { margin: 0; }
.setup-step-body { grid-column: 2; margin-top: 14px; }
.setup-step-body > p, .setup-step-body .setup-results > * { margin: 12px 0 0; }
.setup-step-body h2 { margin: 16px 0 4px; font-size: var(--st-text-body); font-weight: 600; }
.batch-setup-content .setup-form { margin: 0; padding: 14px 16px; border-radius: 8px; background: var(--st-surface); }
.setup-step-body .settings-row-actions { margin-top: 12px; }
@media(max-width:760px) { .setup-step { padding: 16px; column-gap: 12px; } }

.batch-setup-content .batch-panel { display: grid; justify-items: start; gap: 12px; padding: 22px; margin-top: 24px; }
.batch-setup-content .batch-panel > * { margin: 0; }
@media (max-width: 640px) { .batch-setup-content .settings-config-form label:not(.settings-toggle) { grid-template-columns: 1fr; gap: 8px; } }
.settings-org { display: flex; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--st-border); color: var(--st-text); text-decoration: none; }
@media(max-width:760px) { .settings-app { grid-template-columns: 1fr; gap: 20px; } .settings-sidebar { border-right: 0; border-bottom: 1px solid var(--st-border); padding-bottom: 12px; } .settings-sidebar nav { display: flex; margin-bottom: 10px; } }

@media(max-width:760px) { .sidebar:has(.sidebar-settings-entry) { min-height: 0; } }
.settings-add { margin: -8px 0 24px; }
.settings-add[open] { padding: 14px 16px 16px; border: 1px solid var(--st-border); border-radius: 10px; }
.settings-add[open] > summary { margin-bottom: 10px; }
.settings-add > p { margin: 0 0 12px; }
.settings-add > summary { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--st-border-strong); border-radius: 7px; padding: 8px 12px; cursor: pointer; }
.settings-add-form { display: flex; align-items: flex-end; gap: 14px; max-width: 680px; }
.settings-add-form label { flex: 1; display: grid; gap: 7px; font-size: var(--st-text-meta); }
.settings-add-form select { width: 100%; background: var(--st-surface-raised); color: var(--st-text); padding: 8px; border: 1px solid var(--st-border-strong); border-radius: 7px; }
.settings-empty { padding: 40px 0; }
.settings-empty h2 { font-size: var(--st-text-section); }
.batch-external-actions { padding: 0 20px 18px; }

/* Nine columns cannot fit a phone: the table scrolls sideways inside its own
   region (keyboard-focusable), and the agent column stays pinned so every
   number keeps its row label in view. */
/* Insights: the table is the kit's z-table. Left here: the agent column is a
   row header but reads as data (the kit styles every th as a muted column
   label), it stays put while the numbers scroll under it, and the scroller's
   focus ring. */
.insights-scroll { margin-top: 12px; }
.insights-scroll:focus-visible { outline: 2px solid var(--st-ring); outline-offset: 2px; }
.insights-table tbody th, .insights-table thead th:first-child { position: sticky; left: 0; background: var(--st-bg); }
.insights-table tbody tr:hover th { background: var(--st-surface-hover); }
.insights-table tbody th { color: var(--st-text); font-size: inherit; font-weight: 600; }

.account-menu { margin-left: auto; position: relative; }
.account-menu-trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: var(--st-text-body); white-space: nowrap; }
.account-menu-trigger:hover { background: var(--st-surface-hover); }
.account-chip-name { font-weight: 500; }
.account-chip-server { color: var(--st-muted); }
.account-menu-trigger .icon-chevron-down { color: var(--st-muted); }
.account-menu-github { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
@media (max-width: 720px) { .account-chip-name { display: none; } }
.account-menu-trigger::-webkit-details-marker { display: none; }
.account-menu-trigger:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.account-menu[open] .account-menu-trigger raft-avatar { box-shadow: 0 0 0 2px var(--st-accent); }
.account-menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 10px 0; background: var(--st-surface-raised); border: 1px solid var(--st-border-strong); border-radius: 10px; z-index: 20; }
.account-menu-name { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 4px 14px 10px; border-bottom: 1px solid var(--st-border); }
.account-menu-server { margin-top: 2px; }
.account-menu-links { display: flex; flex-direction: column; padding: 6px 0; border-bottom: 1px solid var(--st-border); }
.account-menu-links a { padding: 7px 14px; color: var(--st-text); text-decoration: none; }
.account-menu-links a:hover { background: var(--st-surface-hover); }
.account-menu-signout { padding: 6px 14px 0; }
.account-menu-signout .text-button { color: var(--st-bad); }
.pr-card { grid-template-columns: auto minmax(0, 1fr) auto; }
.pr-card > raft-avatar { margin-left: 16px; }
.pr-card .card-main { padding-left: 4px; }
.changes { font-variant-numeric: tabular-nums; font-size: var(--st-text-caption); white-space: nowrap; }
.changes .add { color: var(--st-good); }
.changes .del { color: var(--st-bad); }
.meta .updated { color: var(--st-muted); }
@media (max-width: 720px) {
  .pr-card { grid-template-columns: auto minmax(0, 1fr); }
  .pr-card .card-aside { grid-column: 1 / -1; }
}

.detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-action { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.attribution raft-avatar { margin-right: 6px; }
.attribution .agent { color: var(--st-text); }
.readiness { margin: 14px 0 0; }
.action-notice, .action-error { margin: 12px 0 0; }
.detail-comment { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-top: 12px; }
.detail-comment textarea { min-height: 64px; font: inherit; font-size: var(--st-text-meta); background: var(--st-surface-raised); color: var(--st-text); border: 1px solid var(--st-border); border-radius: 8px; padding: 8px 10px; resize: vertical; }
@media (max-width: 560px) {
  .detail-comment { grid-template-columns: minmax(0, 1fr); }
  .comment-submit { justify-content: flex-end; }
}

.checks-summary { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 0 0 6px; font-size: var(--st-text-meta); }
.check-count.passed { color: var(--st-good); }
.check-count.failed { color: var(--st-bad); }
.check-count.skipped, .check-count.pending { color: var(--st-muted); }
.checks-list summary { cursor: pointer; color: var(--st-muted); font-size: var(--st-text-meta); display: inline-flex; align-items: center; min-height: 28px; padding: 2px 0; }
.checks-list ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.checks-list .check { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; border-radius: 6px; border-left: 3px solid var(--st-border); }
.checks-list .check.failed { border-left-color: var(--st-bad); }
.checks-list .check.passed { border-left-color: var(--st-good); }
.checks-list .check a { display: inline-flex; align-items: center; min-width: 24px; min-height: 24px; padding: 2px 4px; margin: -2px -4px; color: var(--st-text); text-decoration: none; }
.checks-list .check a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Rerun (task #497): one quiet control inside the failed check's own row, so it
   reads as "this check, this action" rather than a panel-level button. The
   generic .text-button is sidebar-sized, so the row owns its own sizing. */
.checks-list .check-rerun { display: flex; align-items: center; }
.checks-list .check-rerun .text-button { width: auto; min-height: 24px; margin: 0; padding: 3px 8px; color: var(--st-muted); font-size: var(--st-text-caption); }
.checks-list .check-rerun .text-button:hover { color: var(--st-text); }

.stack-chain { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.stack-node { padding: 5px 10px; border-radius: 6px; border-left: 3px solid var(--st-border); background: var(--st-surface-raised); font-size: var(--st-text-meta); }
.stack-node.below { border-left-color: var(--st-muted); }
.stack-node.above { border-left-color: var(--st-accent); }
.stack-node.current { border-left-color: var(--st-accent-strong); background: var(--st-surface-hover); font-weight: 600; }
.stack-node a { display: inline-flex; align-items: center; min-height: 24px; color: var(--st-text); text-decoration: none; }
.stack-copy summary { cursor: pointer; color: var(--st-muted); font-size: var(--st-text-meta); margin-top: 6px; display: inline-flex; align-items: center; min-height: 28px; }
.stack-copy textarea { width: 100%; margin-top: 6px; font: inherit; font-size: var(--st-text-caption); background: var(--st-surface-raised); color: var(--st-text); border: 1px solid var(--st-border); border-radius: 6px; padding: 6px 8px; resize: vertical; }

.keyboard-hint { position: fixed; right: 14px; bottom: 14px; max-width: min(420px, 90vw); margin: 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--st-border-strong); background: var(--st-surface-raised); color: var(--st-muted); font-size: var(--st-text-caption); }

/* Task #433 step 2: the PR inbox paints the receipt-derived rows first and the
   live half replaces them. The placeholder bar is deliberately data-free, and
   it never animates for a reader who asked for less motion. */
.pr-inbox-reading { margin: 0 0 10px; font-size: var(--st-text-caption); }
.skeleton { display: block; height: 13px; border-radius: 6px; background: linear-gradient(90deg, var(--st-muted-fill) 25%, var(--st-border) 37%, var(--st-muted-fill) 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.skeleton-title { width: min(320px, 60%); margin: 6px 0 5px; }
/* The pull request page's first paint (pull-detail-summary): one status
   line where the verdict and actions will be, holding their height (12px
   above the verdict, 16px + 32px for the actions below it) so the tabs and
   the description do not move when the full page replaces it, and
   placeholder bars in the side column. When the rest fails, the bars go:
   nothing is loading any more. */
.pr-live { min-height: 70px; margin-top: 12px; }
.pr-live-reading { display: flex; align-items: center; gap: 8px; margin: 0; line-height: 22px; }
.pr-live-verdict { width: 220px; height: 22px; margin-right: 4px; border-radius: 6px; }
.pr-live-actions { display: flex; gap: 8px; margin-top: 16px; }
.pr-live-button { width: 104px; height: 32px; border-radius: 8px; }
.pr-live-button.is-wide { width: 180px; }
.pr-live-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
/* Live update blocks (StampPullLive) that only group what they replace: no box of their own. */
.pr-live-slot { display: contents; }
.pr-live-failed { margin: 12px 0 0; }
/* Quiet loading's "new version" bar (artin 09-30): it floats over the top
   of the page instead of pushing the page down, so taking it or not, the
   reader's place does not move. */
.pr-live-new { position: fixed; top: 68px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 12px; margin: 0; padding: 8px 8px 8px 14px; box-shadow: var(--st-shadow-popover); }
.pr-live-new[hidden] { display: none; }
.pr-summary .pr-side .detail-section { display: grid; gap: 10px; }
.pr-summary:has(.pr-live-error) .pr-side { visibility: hidden; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* New-version prompt (update.js): one fixed banner, never auto-reloads. */
.update-notice { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; padding: 12px 16px; background: var(--st-surface-raised); color: var(--st-text); border-bottom: 1px solid var(--st-border); font-size: var(--st-text-body); }
.update-notice-reload { margin-left: 12px; padding: 4px 10px; }
.update-notice-dismiss { float: right; margin-left: 12px; padding: 2px 8px; background: transparent; color: inherit; border: 1px solid var(--st-border); border-radius: 4px; font-size: var(--st-text-section); line-height: 1; cursor: pointer; }

/* Conversation on the PR detail page (task #540). */
.detail-comments { margin-top: 0; }
.detail-comments h3 { margin: 0 0 8px; font-size: var(--st-text-section); }
.comment { padding: 12px 0; border: 0; border-top: 1px solid var(--st-border); border-radius: 0; margin-bottom: 0; }
.comment-submit { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.detail-comment textarea { width: 100%; box-sizing: border-box; }

/* Account settings: the kit's card layout. */
.spike-check { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.spike-actions { display: flex; gap: 10px; margin-top: 16px; }
.spike-check input { margin: 0; flex: none; }
.spike-check span { margin: 0; line-height: 1; }
.settings-content h1 { font-weight: 700; }

/* Cards and chrome in the kit's card look. */
.work-card, .surface, .detail, .account-menu-panel { background: var(--st-surface); border: 1px solid var(--st-border); box-shadow: var(--z-global-shadow-small); backdrop-filter: none; }
.work-card:hover { background: var(--st-surface-hover); border-color: var(--st-border-strong); transform: none; }
.brand strong, .repo { color: var(--st-text); }
/* .count follows the grey rule: foreground text on the muted fill, never muted-on-muted (4.40:1). */
h1, h2, h3 { font-weight: 650; }

/* Home page: one column, no sidebar. Stamp tokens only. */
.shell { margin: 0 auto; padding: 0 24px 64px; }
.topbar { display: flex; align-items: center; gap: 28px; height: 56px; margin: 0 0 8px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.topbar .account-menu { margin-left: auto; }
.app.app-single { display: block; }
.inbox2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.inbox2-head h1 { margin: 0; }
.inbox2-org { color: var(--st-muted); font-weight: 500; }
.inbox2-org::after { content: " /"; }
.inbox2-sub { margin: 6px 0 0; max-width: 60ch; color: var(--st-muted); }
.inbox2-asof { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--st-muted); font-size: var(--st-text-meta); white-space: nowrap; }
.inbox2-section { margin-top: 26px; scroll-margin-top: 16px; }
.inbox2-section-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; color: var(--st-text); text-transform: none; }
.inbox2-count { color: var(--st-muted); font-weight: 500; }
.inbox2-list { display: block; border: 1px solid var(--st-border); background: var(--st-surface); overflow: hidden; }
.pr-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 14px; border-top: 1px solid var(--st-border); }
.pr-row:first-child { border-top: 0; }
.pr-row:hover { background: var(--st-muted-fill-half); }
.pr-row-avatar raft-avatar { display: block; }
.pr-row { position: relative; }
.pr-row-body { display: grid; gap: 3px; min-width: 0; }
.pr-row-main { display: block; min-width: 0; overflow: hidden; color: inherit; text-decoration: none; }
/* The title link covers the row; links and buttons inside it sit above. */
a.pr-row-main::after { content: ""; position: absolute; inset: 0; }
.pr-row a:not(.pr-row-main), .pr-row button, .pr-row form { position: relative; z-index: 1; }
.pr-row-title { overflow: hidden; color: var(--st-text); font-size: var(--st-text-body); text-overflow: ellipsis; white-space: nowrap; }
.pr-row-main:hover .pr-row-title { text-decoration: underline; text-underline-offset: 3px; }
.pr-row-meta { display: flex; min-width: 0; color: var(--st-muted); font-size: var(--st-text-meta); white-space: nowrap; }
.pr-row-who { overflow: hidden; min-width: 0; flex: 0 1 auto; text-overflow: ellipsis; }
.pr-row-meta .updated { flex: none; }
.pr-row-repo { color: var(--st-text); font-weight: 500; }
.pr-row-repo-link { color: inherit; text-decoration: none; }
.pr-row-repo-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pr-row-aside { display: flex; align-items: center; gap: 8px; }
.pr-row-changes { margin-right: 6px; font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; }
.pr-row-changes .add { color: var(--st-color-added); } .pr-row-changes .del { color: var(--st-color-removed); }
.pr-row-gh { color: var(--st-muted); }
@media (max-width: 720px) {
  .shell { padding: 0 14px 48px; }
  .inbox2-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pr-row { grid-template-columns: 28px minmax(0, 1fr); row-gap: 8px; }
  .pr-row-aside { grid-column: 2; flex-wrap: wrap; }
  .pr-row-title { white-space: normal; }
}

/* Type and measure: Geist, big tight headings, hairlines, segmented control. */
:root, body { font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif; }
code, pre, .pr-row-changes, .coordinates { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.brand strong { font-weight: 700; letter-spacing: -0.02em; }
.inbox2-head { padding: 36px 0 20px; border-bottom: 1px solid var(--st-border); margin-bottom: 20px; }
.inbox2-head h1 { font-size: var(--st-text-title); font-weight: 700; letter-spacing: -0.035em; line-height: var(--st-leading-tight); }
.inbox2-sub { margin-top: 10px; font-size: var(--st-text-section); }
.inbox2-section-head { font-size: var(--st-text-section); font-weight: 600; letter-spacing: -0.01em; }
.inbox2-list { border-radius: 8px; box-shadow: var(--z-global-shadow-small); }
.pr-row { padding: 14px 16px; }
.pr-row-title { font-weight: 500; letter-spacing: -0.005em; }

/* Layered navigation: the top bar switches areas, the left rail holds the current area's sections, content sits right. */
.shell { max-width: 1360px; }
.topbar { margin-bottom: 0; }
.inbox3 { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 0; align-items: start; }
.app.app-single { margin-top: 0; }
.inbox3-side { position: sticky; top: 0; align-self: start; padding: 24px 16px 24px 0; }
.inbox3-group { margin: 0 0 8px; padding: 0 12px; font-size: var(--st-text-section); font-weight: 600; letter-spacing: -0.02em; }
.inbox3-side [data-inbox-repos] { margin-top: 20px; }
.inbox3-main { min-width: 0; min-height: calc(100vh - 57px); padding: 0 0 48px 32px; border-left: 1px solid var(--st-border); }
.inbox3 .pr-row[hidden], .inbox3 .inbox2-section[hidden] { display: none !important; }
.inbox3-main .inbox2-head { padding-top: 28px; }
@media (max-width: 860px) {
  .inbox3 { grid-template-columns: minmax(0, 1fr); }
  .inbox3-side { min-width: 0; }
  .inbox3-side { position: static; min-height: 0; padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--st-border); }
  .inbox3-side [data-inbox-repos] { display: none; }
  .inbox3-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; }
  .inbox3-nav a { white-space: nowrap; min-height: 32px; }
  .inbox3-group { display: none; }
  .inbox3-main { padding-left: 0; border-left: 0; min-height: 0; }
}
/* Grey text (--muted-foreground) never sits on a grey fill (--muted / --accent): the pair measures 4.40:1, under the 4.5 line. */
@media (max-width: 860px) {
  .topbar { gap: 12px; }
}

/* Diff code-view settings panel (#292), colours mapped onto the light tokens. */
.files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.files-head h3 { margin: 0; }
.files-settings-toggle { width: 32px; height: 32px; padding: 0; font-size: var(--st-text-section); }
.files-settings { position: relative; z-index: 2; max-width: 520px; margin: 8px 0 14px auto; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 9px; background: var(--st-surface-raised); box-shadow: var(--z-global-shadow-small); }
.files-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.files-settings .files-toolbar { display: flex; margin: 0; }

/* ---- Pull request page, task #633: header, tabs, conversation + sidebar ---- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* One column: repo (GitHub link at its end), title, who, then the actions
   on their own row, so the title and the meta line always get the full width. */
.pr-head { padding-bottom: 4px; }
.pr-head .repo { color: var(--st-muted); font-size: var(--st-text-meta); font-weight: 500; }
.pr-head .detail-actions { padding-top: 0; margin-top: 16px; }
.pr-head-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pr-head-links { display: inline-flex; align-items: center; gap: 4px; }
.pr-branches { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.pr-head .attribution { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.pr-branch { padding: 1px 6px; border-radius: 6px; background: var(--st-muted-fill); color: var(--st-text); font-size: var(--st-text-caption); }
.pr-tabs { display: flex; gap: 4px; margin-top: 20px; border-bottom: 1px solid var(--st-border); }
.pr-panel[hidden] { display: none !important; }
.pr-conversation { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 40px; align-items: start; padding-top: 24px; }
.pr-main { min-width: 0; display: grid; gap: 20px; }
/* Cards: the description and every comment share one look — avatar outside,
   a bordered card with a tinted header strip. */
.pr-description .body { padding: 14px 16px; overflow-wrap: anywhere; font-size: var(--st-text-body); line-height: var(--st-leading-normal); }
.pr-timeline { display: grid; gap: 16px; }
.pr-timeline-heading { margin: 4px 0 0; font-size: var(--st-text-section); font-weight: 600; }
/* An event between the comments (task #768): one quiet line on the
   timeline, an icon in a small circle, who and what. */
.pr-event { display: flex; align-items: center; gap: 10px; margin: 0 0 0 14px; padding: 2px 0; list-style: none; }
.pr-event-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--st-border); border-radius: 50%; background: var(--st-surface); color: var(--st-muted); }
.pr-event-icon .icon { width: 14px; height: 14px; }
.pr-event-approved .pr-event-icon { color: var(--st-good); border-color: var(--st-good-border); }
.pr-event-changes_requested .pr-event-icon { color: var(--st-bad); }
.pr-event-merged .pr-event-icon { color: #fff; background: var(--st-accent-strong); border-color: transparent; }
.pr-event-text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; font-size: var(--st-text-meta); color: var(--st-muted); }
.pr-event-text strong { color: var(--st-text); }
.pr-event-text a { color: inherit; }
/* A comment's reactions (task #769): pills with counts, and a small
   picker of GitHub's eight. */
.comment-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.reaction-form { display: contents; }
.reaction-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--st-border); border-radius: 999px; background: var(--st-surface); color: var(--st-text); font-size: var(--st-text-caption); cursor: pointer; }
.reaction-pill:hover { background: var(--st-surface-hover); }
.reaction-pill.is-just-added { animation: reaction-just-added 1.2s ease-out 1; }
@keyframes reaction-just-added { from { border-color: var(--st-ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--st-ring) 35%, transparent); } to { border-color: var(--st-border); box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { .reaction-pill.is-just-added { animation: none; border-color: var(--st-ring); } }
.reaction-picker { position: relative; }
.reaction-add { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; border: 1px solid var(--st-border); border-radius: 999px; color: var(--st-muted); cursor: pointer; list-style: none; }
.reaction-add::-webkit-details-marker { display: none; }
.reaction-add .icon { width: 14px; height: 14px; }
.reaction-choices { position: absolute; z-index: 5; bottom: calc(100% + 6px); left: 0; display: flex; gap: 2px; padding: 4px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); box-shadow: var(--st-shadow-popover); }
.reaction-choice { width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; font-size: 16px; cursor: pointer; }
.reaction-choice:hover { background: var(--st-surface-hover); }
/* A comment's menu (task #770): copy link; for its author, edit and
   delete. The edit box takes the words' place. */
.comment-menu { position: relative; }
.comment-menu > summary { list-style: none; }
.comment-menu > summary::-webkit-details-marker { display: none; }
.comment-menu-items { position: absolute; z-index: 6; top: calc(100% + 4px); right: 0; display: grid; min-width: 160px; padding: 4px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); box-shadow: var(--st-shadow-popover); }
.comment-menu-form { display: contents; }
.comment-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: 6px; background: none; color: var(--st-text); font-size: var(--st-text-meta); text-align: left; cursor: pointer; }
.comment-menu-item:hover { background: var(--st-surface-hover); }
.comment-menu-item .icon { width: 15px; height: 15px; color: var(--st-muted); }
.comment-menu-item.is-danger, .comment-menu-item.is-danger .icon { color: var(--st-bad); }
.comment-edit { display: grid; gap: 8px; }
.comment-edit[hidden] { display: none; }
.pr-composer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 4px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-surface); overflow: hidden; }
.pr-composer:focus-within { border-color: var(--st-ring); box-shadow: 0 0 0 1px var(--st-ring); }
.detail-comment.pr-composer textarea.z-textarea { min-height: 96px; margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--st-text-body); line-height: var(--st-leading-normal); resize: vertical; }
.detail-comment.pr-composer textarea.z-textarea:focus { outline: none; box-shadow: none; }
.pr-composer .comment-submit { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 8px 10px 8px 16px; border-top: 1px solid var(--st-border); background: var(--st-muted-fill-half); }
/* Sidebar: small headed blocks separated by hairlines. */
.pr-side { min-width: 0; display: grid; gap: 0; }
.pr-side .detail-section { padding: 16px 0; border-top: 1px solid var(--st-border); }
.pr-side .detail-section:first-child { padding-top: 0; border-top: 0; }
.pr-side .detail-section h3 { margin: 0 0 10px; font-size: var(--st-text-meta); font-weight: 600; color: var(--st-text); }
.pr-side .readiness { margin: 0 0 8px; }
.pr-side .checks-summary { gap: 6px 12px; margin-bottom: 4px; }
.pr-side .checks-summary .text-button { flex-basis: 100%; width: auto; margin: 0; padding: 0; text-align: left; font-size: var(--st-text-meta); color: var(--st-muted); }
.pr-side .checks-list .check { align-items: center; gap: 8px; padding: 3px 8px; }
.pr-side .checks-list .check-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* A failed Actions job's log, opened under its row (task #754). */
.pr-side .checks-list .check-log { flex: 1 0 100%; }
.check-log > summary { cursor: pointer; color: var(--st-muted); font-size: var(--st-text-caption); }
.check-log-body { display: grid; gap: 6px; margin-top: 6px; }
.check-log-text { max-height: 320px; margin: 0; padding: 8px 10px; overflow: auto; border: 1px solid var(--st-border); border-radius: 6px; background: var(--st-muted-fill-half); font-size: var(--st-text-caption); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.check-log-line.is-error { color: var(--st-bad); font-weight: 600; }
.pr-side .checks-list .check > .muted { flex: none; }
.pr-side .detail-batch .z-button-ghost { justify-content: center; }
.pr-side .detail-batch { flex-direction: column; align-items: stretch; }
.pr-side .detail-batch .z-button { width: 100%; }
.pr-side .coordinates { padding-top: 16px; border-top: 1px solid var(--st-border); overflow-wrap: anywhere; font-size: var(--st-text-caption); line-height: var(--st-leading-normal); }
.pr-files { padding-top: 16px; }
.pr-files .files { border-top: 0; padding-top: 0; }
@media (max-width: 900px) {
  .pr-conversation { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pr-side { padding-top: 20px; border-top: 1px solid var(--st-border); }
}
/* The tab already names the panel; the heading stays for screen readers. */
.pr-files .files-head h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pr-files .files-head { justify-content: flex-end; }
/* An unknown Raft principal: "Unknown agent" + short id; full id on hover. */
.principal-pending { color: var(--st-muted); cursor: help; }
.principal-pending code { font-size: .92em; color: inherit; background: none; padding: 0; }

/* Settings: repository selection (search, unsaved-change guard, busy Save). */
.settings-repo-search { display: block; width: 100%; margin: 4px 0 12px; }
.settings-repo-search .z-form-icon { color: var(--st-muted); }
.settings-repo-search .z-input { width: 100%; }
.settings-repo-search .z-input::-webkit-search-cancel-button { cursor: pointer; }
.settings-repos-form .spike-check[hidden] { display: none !important; }
/* A busy button (Stamp Design: every button that sends a request): while
   htmx runs the request (.htmx-request on the button or its form), or a
   script's form is aria-busy (files.js), the idle
   label gives way to a spinner and a busy label, and the button cannot be
   pressed again (pointer here; hx-disable on the form for the keyboard). */
.busy-button .when-busy { display: none; }
.htmx-request .busy-button .when-idle, .busy-button.htmx-request .when-idle, [aria-busy="true"] .busy-button .when-idle { display: none; }
.htmx-request .busy-button .when-busy, .busy-button.htmx-request .when-busy, [aria-busy="true"] .busy-button .when-busy { display: inline-flex; align-items: center; gap: 6px; }
.htmx-request .busy-button, .busy-button.htmx-request, [aria-busy="true"] .busy-button { pointer-events: none; opacity: .7; }
.busy-button .when-idle { display: inline-flex; align-items: center; gap: 6px; }
.busy-button .z-spinner, .busy-button .z-spinner svg { width: 14px; height: 14px; }
.settings-save .when-busy { display: none; }
.htmx-request .settings-save .when-idle, .settings-save.htmx-request .when-idle { display: none; }
.htmx-request .settings-save .when-busy, .settings-save.htmx-request .when-busy { display: inline; }
.settings-save:disabled { opacity: .5; cursor: not-allowed; }
.settings-save-status { color: var(--st-muted); }
.settings-save-status[data-dirty="1"] { color: var(--st-text); font-weight: 500; }
.settings-save-error { color: var(--st-bad); }

/* Rendered Markdown (task #642): PR descriptions and comments. GitHub's
   rhythm on the kit's colour variables; the kit has no prose wrapper. */
.markdown-body { white-space: normal; overflow-wrap: anywhere; font-size: var(--st-text-body); line-height: var(--st-leading-normal); color: var(--st-text); }
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body pre, .markdown-body table, .markdown-body details { margin: 0 0 12px; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { margin: 20px 0 8px; font-weight: 600; line-height: var(--st-leading-tight); letter-spacing: -.01em; }
.markdown-body h1 { font-size: var(--st-text-heading); padding-bottom: 6px; border-bottom: 1px solid var(--st-border); }
.markdown-body h2 { font-size: var(--st-text-heading); padding-bottom: 4px; border-bottom: 1px solid var(--st-border); }
.markdown-body h3 { font-size: var(--st-text-section); }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: var(--st-text-body); }
.markdown-body ul, .markdown-body ol { padding-left: 24px; }
.markdown-body ul { list-style: disc; }
.markdown-body ol { list-style: decimal; }
.markdown-body li + li { margin-top: 4px; }
.markdown-body li > ul, .markdown-body li > ol { margin: 4px 0 0; }
.markdown-body li:has(> input[type="checkbox"]) { list-style: none; margin-left: -20px; }
.markdown-body input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: -1px; }
.markdown-body a { color: var(--st-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--st-muted); }
.markdown-body a:hover { text-decoration-color: var(--st-text); }
.markdown-body code { padding: .15em .35em; border-radius: 4px; background: var(--st-muted-fill); font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 85%; }
.markdown-body pre { padding: 12px 14px; overflow-x: auto; border-radius: 8px; background: var(--st-muted-fill); line-height: var(--st-leading-normal); }
.markdown-body pre code { padding: 0; background: none; font-size: var(--st-text-meta); }
.markdown-body blockquote { padding: 0 12px; border-left: 3px solid var(--st-border); color: var(--st-muted); }
.markdown-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--st-text-meta); }
.markdown-body th, .markdown-body td { padding: 6px 12px; border: 1px solid var(--st-border); text-align: left; }
.markdown-body th { font-weight: 600; background: var(--st-muted-fill-half); }
/* Images in a description sit in the text, as on GitHub: the kit's base
   stylesheet makes every img a block, which put the footer's 16px byline
   picture and badges on a line of their own (artin 09-27). */
.markdown-body img { display: inline; vertical-align: middle; max-width: 100%; height: auto; border-radius: 4px; }
.markdown-body hr { height: 1px; margin: 16px 0; border: 0; background: var(--st-border); }
.markdown-body details { padding: 8px 12px; border: 1px solid var(--st-border); border-radius: 8px; }
.markdown-body summary { cursor: pointer; font-weight: 500; }
.markdown-body del { color: var(--st-muted); }

/* PR page on kit components (step 2 of the 0build move): z-tab, z-alert,
   z-label, z-comment. Only layout glue remains here. */
.pr-tabs { margin-top: 20px; }
.pr-tabs .pr-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; }
.pr-description { border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-surface); overflow: hidden; }
.pr-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; padding: 6px 14px; border-bottom: 1px solid var(--st-border); background: var(--st-muted-fill-half); font-size: var(--st-text-meta); }
.pr-comment-list { margin: 0; padding: 0; list-style: none; }
.comment.z-comment { padding: 14px 16px; }
.comment .z-comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.comment .z-comment-avatar { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: none; }
.comment .z-comment-title { margin: 0; font-size: var(--st-text-body); }
.comment .z-comment-meta { margin: 2px 0 0; color: var(--st-muted); }
.comment .comment-link { margin-left: auto; }
.comment .z-comment-body { font-size: var(--st-text-body); line-height: var(--st-leading-normal); }
.comment-review.z-comment { border-color: var(--st-border-strong); }

/* ---- Icons: {{ icon "name" }} (ui_icons.go), 16px, drawn in currentColor ---- */
/* The kit resets svg to display:block; an icon sits in the line of text. */
.icon { display: inline-block; flex: none; vertical-align: -0.2em; }
/* An icon in front of a label: one row, the icon centred on the text. */
.account-menu-links a, .account-menu-signout .text-button, .settings-sidebar nav a, .check-count, .pr-tab, .readiness { display: inline-flex; align-items: center; gap: 6px; }
.settings-org { align-items: center; gap: 8px; }
.settings-org .icon-chevron-right { margin-left: auto; color: var(--st-muted); }
.spike-check .icon { color: var(--st-muted); }
.gate-icon .icon { width: 20px; height: 20px; }
.empty-mark .icon, .batch-pr-icon .icon { width: 18px; height: 18px; }
/* The rail is the kit's z-nav; each link: icon, label, its count at the end. */
.inbox3-nav a { display: flex; align-items: center; gap: 8px; }
.inbox3-nav a > span { margin-left: auto; color: var(--st-muted); font-size: var(--st-text-meta); font-variant-numeric: tabular-nums; }
.inbox3-nav .icon, .inbox2-section-head .icon { color: var(--st-muted); }
.inbox2-asof .z-spinner svg { width: 14px; height: 14px; }

/* ---- Pager ("load more", components/pager.html, StampPager in app.js) ---- */
.pager-retry, .pager-busy, [data-pager-failed] .pager-idle { display: none; }
[data-pager-failed] .pager-retry { display: inline-flex; align-items: center; gap: 6px; }
.pager-more.htmx-request { pointer-events: none; opacity: .6; }
.pager-more.htmx-request :is(.pager-idle, .pager-retry) { display: none; }
.pager-more.htmx-request .pager-busy { display: inline; }
/* A page still waiting for its live read holds its pager (StampPager): drawn as loading. */
[aria-busy="true"] .pager-more { pointer-events: none; opacity: .6; }
[aria-busy="true"] .pager-more :is(.pager-idle, .pager-retry) { display: none; }
[aria-busy="true"] .pager-more .pager-busy { display: inline; }
.pager-note { margin: 0; color: var(--st-bad); font-size: var(--st-text-meta); }
/* ---- Scope: crumbs in the top bar, the level's tabs under it, switchers
   (components/scope.html, ui_scope.go, StampSwitcher in app.js) ---- */
.crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; font-size: var(--st-text-body); }
.crumbs .brand { gap: 10px; margin-right: 2px; }
.crumb-sep { color: var(--st-border-strong); font-size: var(--st-text-heading); font-weight: 300; margin: 0 4px; }
.crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; border-radius: 6px; color: var(--st-text); font-weight: 500; text-decoration: none; white-space: nowrap; }
a.crumb:hover { background: var(--st-surface-hover); }
.crumb-here { color: var(--st-muted); }
/* An organization's GitHub avatar (orgAvatar); round like every avatar. */
.crumb-org { display: inline-flex; flex: none; }
/* The chevron sits against the name it switches (margin-left pulls it into the gap the crumb leaves). */
.crumb-switch { display: inline-grid; place-items: center; width: 20px; height: 28px; margin-left: -6px; border: 0; border-radius: 6px; background: transparent; color: var(--st-muted); cursor: pointer; }
.crumb-switch:hover, .crumb-switch:focus-visible { background: var(--st-surface-hover); color: var(--st-text); }
/* The sign-in pages (session/gates.html) are Stamp's own: their primary
   button is Stamp's colour, not the green that moves pull requests forward.
   The kit's button reads these (kit.min.css, .z-button-primary). */
.auth .z-button-primary { --z-button-bg: var(--st-action-brand); --z-button-border: var(--st-action-brand); --z-button-color: var(--st-action-brand-f); --z-button-hover-bg: var(--st-action-brand); --z-button-hover-color: var(--st-action-brand-f); }
/* Stamp Design (/design): the token reference's samples. */
.design-tokens { display: table; width: 100%; }
.design-tokens td, .design-tokens th { vertical-align: middle; }
.design-tokens thead th, .design-tokens tbody th code { white-space: nowrap; }
.design-swatch { display: inline-block; width: 36px; height: 24px; border: 1px solid var(--st-border); border-radius: 6px; }
.design-swatch-shadow { background: var(--st-surface); border-color: transparent; }
/* The same token on the dark page, beside it (tokens.css's .dark roles
   resolve on this wrapper). */
.design-on-dark { display: inline-block; padding: 6px; border-radius: 8px; background: var(--st-bg); vertical-align: middle; }
.design-dark-value { display: block; margin-top: 4px; color: var(--st-muted); font-size: var(--st-text-meta); }
.design-size { color: var(--st-text); line-height: var(--st-leading-tight); }
/* The left rail (ui_scope.go, components/scope.html; artin 09-27): the
   level's sections on top, a line, then what the page filters or subdivides
   by. Every rail (the shell's frame, the inbox's, an organization's settings
   sidebar) has the same width and place, so moving between pages does not
   move it. The top bar keeps only the crumbs, search and the account menu. */
.topbar { border-bottom: 1px solid var(--st-border); }
.rail-frame { display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start; }
.rail-frame > .rail { position: sticky; top: 0; align-self: start; padding: 24px 16px 24px 0; }
.rail-main { min-width: 0; min-height: calc(100vh - 57px); padding: 28px 0 48px 32px; border-left: 1px solid var(--st-border); }
.rail .rail-sections { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--st-border); }
.rail .rail-sections:only-child { margin: 0; padding: 0; border-bottom: 0; }
.rail .rail-sections ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rail .rail-sections a { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border-radius: 6px; color: var(--st-muted); font-size: var(--st-text-body); font-weight: 500; text-decoration: none; }
.rail .rail-sections a:hover { background: var(--st-surface-hover); color: var(--st-text); }
.rail .rail-sections a[aria-current="page"] { background: var(--st-muted-fill); color: var(--st-text); font-weight: 600; }
.rail .rail-sections .icon { width: 16px; height: 16px; }
/* A pull request page has no rail: its content starts a step below the bar. */
.shell > #session-root:has(> #detail-layer) { padding-top: 16px; }
/* Under the line, a group's heading is a caption: the sections above are the headings. */
.rail .inbox3-group { margin: 12px 0 4px; padding: 0 12px; color: var(--st-muted); font-size: var(--st-text-caption); font-weight: 600; letter-spacing: 0; }
.settings-sidebar.rail nav a { width: 100%; }
/* An organization's settings sidebar is a rail too: the same geometry. */
.settings-app:has(> .settings-sidebar.rail) { grid-template-columns: 248px minmax(0, 1fr); gap: 0; padding: 0; }
.settings-sidebar.rail { position: sticky; top: 0; align-self: start; padding: 24px 16px 24px 0; border-right: 0; }
.settings-app:has(> .settings-sidebar.rail) > .settings-content { max-width: 752px; min-height: calc(100vh - 57px); padding: 28px 0 48px 32px; border-left: 1px solid var(--st-border); }
@media (max-width: 860px) {
  .rail-frame, .settings-app:has(> .settings-sidebar.rail) { grid-template-columns: minmax(0, 1fr); }
  .rail-frame > .rail, .settings-sidebar.rail { position: static; padding: 12px 0; border-bottom: 1px solid var(--st-border); }
  .rail-main, .settings-app:has(> .settings-sidebar.rail) > .settings-content { min-height: 0; padding-left: 0; border-left: 0; }
  .rail .rail-sections { margin-bottom: 8px; padding-bottom: 8px; }
  .rail .rail-sections ul { display: flex; gap: 4px; overflow-x: auto; }
  .rail .rail-sections a { min-height: 32px; white-space: nowrap; }
}
/* A searchable select (StampCombobox in app.js; select[data-combobox]): a
   text input in front of the native select, with a list that filters as
   you type. */
.combobox { position: relative; width: 100%; }
.combobox-input { width: 100%; }
.combobox-list { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: min(50vh, 320px); overflow: auto; margin: 0; padding: 6px; list-style: none; border: 1px solid var(--st-border-strong); border-radius: 8px; background: var(--st-surface-raised); box-shadow: var(--st-shadow-popover); }
.combobox-list li { padding: 7px 8px; border-radius: 6px; color: var(--st-text); font-size: var(--st-text-meta); cursor: pointer; overflow-wrap: anywhere; }
.combobox-list li:hover, .combobox-list li.is-active { background: var(--st-surface-hover); }
.combobox-list li[aria-selected="true"] { font-weight: 600; }
.combobox-list .combobox-empty { color: var(--st-muted); cursor: default; }
.combobox-list .combobox-empty:hover { background: none; }
.switcher { position: fixed; inset: auto; margin: 0; width: 300px; max-height: min(70vh, 480px); overflow: auto; padding: 8px; border: 1px solid var(--st-border-strong); border-radius: 10px; background: var(--st-surface-raised); box-shadow: var(--st-shadow-popover); }
.switcher-search { margin-bottom: 6px; }
.switcher-head { margin: 0; padding: 6px 8px 4px; color: var(--st-muted); font-size: var(--st-text-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.switcher-list { margin: 0; padding: 0; list-style: none; }
.switcher-list a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; color: var(--st-text); font-size: var(--st-text-meta); text-decoration: none; }
.switcher-list a:hover, .switcher-list a:focus-visible, .switcher-list a[aria-current="true"] { background: var(--st-surface-hover); }
.switcher-list a[aria-current="true"] { font-weight: 600; }
.switcher-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--st-border); }
.switcher-empty { margin: 0; padding: 8px; color: var(--st-muted); font-size: var(--st-text-meta); }
.crumb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .crumbs { gap: 0; overflow: hidden; }
  .crumbs .brand strong, .crumb-owner { display: none; }
  .crumb-sep { margin: 0 2px; }
  .crumb { padding: 4px; }
}
/* The organization page's repositories: rows of one card. */
.org-repos { margin: 16px 0 0; padding: 0; list-style: none; overflow: hidden; }
.org-repo + .org-repo { border-top: 1px solid var(--st-border); }
.org-repo a { padding: 14px 16px; color: var(--st-text); text-decoration: none; }
.org-repo a:hover { background: var(--st-surface-hover); }
.org-repo .icon { color: var(--st-muted); }
.org-page-title { display: flex; align-items: center; gap: 10px; }
.org-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.org-filter input { width: min(320px, 100%); }
.org-sorts { display: flex; align-items: center; gap: 6px; }
.org-repo-open, .org-repo-activity { flex: none; white-space: nowrap; }
.org-empty { margin-top: 16px; }
@media (max-width: 720px) { .org-repo-activity { display: none; } }
/* Settings with no sidebar (choosing an organization): one column. */
.settings-app:not(:has(> .settings-sidebar)) { grid-template-columns: minmax(0, 1fr); }
.settings-size .z-input { width: 88px; }
/* The pull request verdict row (ui_verdict.go): the label says the verdict in
   words, the checks that explain it follow, and the pinned head/base last. */
.pr-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 12px 0 0; }
.pr-verdict-approvals { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pr-approval { display: inline-flex; align-items: center; gap: 4px; }
.pr-verdict .z-label { display: inline-flex; align-items: center; gap: 6px; white-space: normal; }
.pr-verdict-checks code, .pr-verdict-pin code { font-size: var(--st-text-caption); }
.pr-verdict-words { display: inline-block; }
.pr-verdict-github { display: inline-flex; align-items: center; gap: 4px; font-size: var(--st-text-meta); }
.pr-verdict-github .icon { width: 14px; height: 14px; }
/* Merged is the finished state: filled in the merge button's green so it stands out (artin 09-28), on the full page's verdict and on the first paint alike. */
.z-label.pr-verdict-merged { background: var(--st-accent-strong); border-color: var(--st-accent-strong); color: var(--st-accent-strong-f); }
.pr-live-state { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.pr-verdict-words::first-letter { text-transform: uppercase; }
/* The shortcut list ("?", components/shortcuts.html). */
.shortcut-help { margin: auto; width: min(440px, 92vw); padding: 20px 22px; border: 1px solid var(--st-border-strong); border-radius: 12px; background: var(--st-surface-raised); color: var(--st-text); box-shadow: var(--st-shadow-dialog); }
.shortcut-help::backdrop { background: var(--st-backdrop); }
.shortcut-help-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.shortcut-help-head h2 { margin: 0; font-size: var(--st-text-section); }
.shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; align-items: center; margin: 0; font-size: var(--st-text-body); }
.shortcut-list dt { white-space: nowrap; }
.shortcut-list dd { margin: 0; color: var(--st-muted); }
.files-viewed-count { margin-right: auto; }
.files-viewed { display: inline-flex; align-items: center; gap: 6px; font-size: var(--st-text-caption); cursor: pointer; }

/* ---- Sign-in and connect (session/gates.html): the kit examples' split
   sign-in — a dark brand panel, the one action on the right. ---- */
.auth { position: fixed; inset: 0; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: auto; background: var(--st-bg); }
.auth-aside { display: flex; flex-direction: column; justify-content: space-between; padding: 32px; background: var(--st-muted-fill); color: var(--st-text); }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--st-text-section); }
.auth-quote { margin: 0; max-width: 520px; }
.auth-quote p { margin: 0 0 10px; font-size: var(--st-text-heading); line-height: var(--st-leading-normal); }
.auth-quote footer { font-size: var(--st-text-meta); opacity: .7; }
.auth-main { display: flex; flex-direction: column; min-height: 100%; padding: 32px; }
.auth-top { display: flex; justify-content: flex-end; min-height: 32px; }
.auth-signout { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.auth-body { display: flex; flex: 1; align-items: center; justify-content: center; }
.auth-card { display: grid; gap: 16px; width: min(360px, 100%); text-align: center; }
.auth-reconnect { margin: 14px 0 0; text-align: left; }
.auth-reconnect p { margin: 0; }
.auth-reconnect p + p { margin-top: 4px; }
.auth-card h1 { margin: 0; font-size: var(--st-text-title); font-weight: 600; letter-spacing: -.02em; }
.auth-card p { margin: 0; }
.auth-card .w-full { width: 100%; }
.auth-brand-inline { display: none; justify-content: center; }
.auth-kicker { justify-self: center; display: inline-flex; align-items: center; gap: 6px; }
.auth-steps { display: grid; gap: 8px; margin: 8px 0 0; padding: 16px 0 0; border-top: 1px solid var(--st-border); list-style: none; text-align: left; font-size: var(--st-text-meta); color: var(--st-muted); }
.auth-steps li { display: flex; align-items: center; gap: 10px; }
.auth-steps li[aria-current="step"] { color: var(--st-text); font-weight: 500; }
.auth-steps li.done .icon { color: var(--st-good); }
.auth-step-n { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; line-height: 1; border: 1px solid var(--st-border-strong); border-radius: 50%; font-size: var(--st-text-caption); }
.auth-steps li[aria-current="step"] .auth-step-n { border-color: var(--st-text); }
@media (max-width: 900px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-aside { display: none; }
  .auth-brand-inline { display: flex; }
  .auth-main { padding: 20px; }
}
.pr-head .repo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pr-stack-nav { display: inline-flex; align-items: center; gap: 4px; }
.checks-group { margin: 12px 0 4px; font-size: var(--st-text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--st-muted); }

/* ---- Site search (components/search.html, StampSearch): the trigger at
   the top bar's end, and the palette — a native dialog near the top. ---- */
.topbar-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.topbar-end .account-menu { margin-left: 0; }
.search-trigger { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; height: 34px; padding: 0 6px 0 10px; border: 1px solid var(--st-border-strong); border-radius: 8px; background: var(--st-surface); color: var(--st-muted); font: inherit; font-size: var(--st-text-meta); cursor: pointer; }
.search-trigger[hidden] { display: none; }
.search-trigger:hover { background: var(--st-surface-hover); }
.search-trigger .z-kbd { margin-left: auto; }
@media (max-width: 860px) {
  .search-trigger { min-width: 0; padding: 0 9px; }
  .search-trigger-label, .search-trigger .z-kbd { display: none; }
}
.search-palette { width: min(640px, 94vw); max-height: min(70vh, 560px); margin: 12vh auto auto; padding: 0; border: 1px solid var(--st-border-strong); border-radius: 12px; background: var(--st-surface-raised); color: var(--st-text); box-shadow: var(--st-shadow-dialog); overflow: hidden; }
.search-palette[open] { display: flex; flex-direction: column; }
.search-palette::backdrop { background: var(--st-backdrop); }
.search-palette-field { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--st-border); color: var(--st-muted); }
.search-palette-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--st-text); font: inherit; font-size: var(--st-text-section); }
.search-results { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.search-results:empty { display: none; }
.search-palette[aria-busy="true"] .search-results { opacity: .6; }
.search-group + .search-group { margin-top: 4px; }
.search-group-head { padding: 8px 10px 4px; color: var(--st-muted); font-size: var(--st-text-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.search-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--st-text); font-size: var(--st-text-body); text-decoration: none; }
.search-option > .icon { flex: none; color: var(--st-muted); }
.search-option[aria-selected="true"] { background: var(--st-surface-hover); }
.search-option-text { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.search-option-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-option-sub { flex: none; color: var(--st-muted); font-size: var(--st-text-meta); }
.search-palette-state { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.search-palette[data-search-state=""] .search-palette-state, .search-palette:not([data-search-state]) .search-palette-state { display: none; }
.search-status { margin: 14px 0; color: var(--st-muted); font-size: var(--st-text-meta); }
/* Code results (S7): the text column stacks the fragment under the path;
   the "search code" row and the code status line close the list. */
.search-option-text:has(.search-option-fragment) { flex-wrap: wrap; row-gap: 2px; }
.search-option-fragment { flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: pre; color: var(--st-muted); font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-caption); }
.search-option-fragment mark { background: var(--st-match-surface); color: var(--st-text); border-radius: 2px; }
.search-option-code .search-option-title { color: var(--st-muted); }
.search-code-status { margin: 6px 10px 8px; color: var(--st-muted); font-size: var(--st-text-meta); }
/* A comment a search result linked to (#comment-issue-<id>, S6): ringed,
   so the reader sees which one among the conversation. */
.comment.is-linked { box-shadow: 0 0 0 2px var(--st-accent-strong); }
.search-palette-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--st-border); color: var(--st-muted); font-size: var(--st-text-caption); }
.search-palette-foot .z-kbd { font-size: var(--st-text-caption); }
/* Focus never leaves the palette's input (the results follow it through
   aria-activedescendant), and the open dialog already says where it is. */
.search-palette input.search-palette-input:focus-visible { outline: 0; }
/* On a phone there is no keyboard to hint at; the backdrop closes the box. */
@media (max-width: 640px) {
  .search-palette { margin-top: 8vh; }
  .search-palette-foot, .search-palette-field .z-kbd { display: none; }
}

/* A modal dialog (the search palette, the "?" shortcut list) holds the page
   still: while one is open the document does not scroll — a wheel or a swipe
   over the backdrop used to move the page behind it (artin, staging v0.1.40).
   The gutter stays reserved so the page does not shift sideways when the
   scrollbar goes. Inside the dialog, a list scrolled to its end stops there
   instead of handing the scroll on to the page. */
html:has(dialog:modal) { overflow: hidden; scrollbar-gutter: stable; }
.search-results, .shortcut-help { overscroll-behavior: contain; }
/* Step 1 done: who signed in, on which Raft server. */
.auth-step-who { display: block; margin-top: 2px; color: var(--st-muted); font-size: var(--st-text-meta); font-weight: 400; }
.auth-step-who strong { color: var(--st-text); font-weight: 500; }

/* Settings > GitHub App: the three-step setup card. */
.settings-alert { margin-bottom: 20px; }
.app-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--st-border); border-radius: 10px; }
.app-step { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 16px; padding: 20px 22px; }
.app-step + .app-step { border-top: 1px solid var(--st-border); }
.app-step-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--st-border); font-size: var(--st-text-meta); font-weight: 600; color: var(--st-muted); }
.app-step.is-current .app-step-mark { background: var(--st-accent-strong); border-color: var(--st-accent-strong); color: var(--st-accent-strong-f); }
.app-step.is-done .app-step-mark { color: var(--st-text); }
.app-step.is-done .app-step-mark svg { width: 14px; height: 14px; }
.app-step h2 { display: flex; align-items: baseline; gap: 10px; margin: 3px 0 6px; font-size: var(--st-text-section); font-weight: 600; }
.app-step.is-todo h2 { color: var(--st-muted); }
.app-step-state { color: var(--st-muted); font-weight: 400; }
.app-step-body p { margin: 0 0 12px; }
.app-step-body p:last-child, .app-step-body form:last-child { margin-bottom: 0; }
.app-step-form label { display: block; margin-bottom: 6px; font-size: var(--st-text-meta); font-weight: 500; }
.app-step-row { display: flex; gap: 8px; max-width: 460px; }
.app-step-row .z-input { flex: 1; min-width: 0; }
.app-step-form > .z-input { display: block; width: 100%; max-width: 460px; margin-bottom: 12px; }
/* "Use an existing App" (onboarding/app.html): a disclosure under the create
   form, or under the App in place (then it replaces it). */
.app-existing { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--st-border); }
.app-existing summary { cursor: pointer; font-size: var(--st-text-meta); font-weight: 500; }
.app-existing > p { margin: 8px 0 0; }
.app-existing-form { display: grid; gap: 12px; margin-top: 12px; max-width: 520px; }
.app-existing-field label { display: block; margin-bottom: 6px; font-size: var(--st-text-meta); font-weight: 500; }
.app-existing-field p { margin: 6px 0 0; }
.app-existing-key { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-caption); }
.app-existing-replace { display: flex; align-items: center; gap: 8px; font-size: var(--st-text-meta); }
.app-existing-form .z-button { justify-self: start; }
.field-error { color: var(--st-bad); }
.server-app-status p { margin: 0; }
.server-app-status p + p { margin-top: 6px; }
.server-app-status a { display: inline-flex; align-items: center; gap: 4px; }
.server-app-admins { margin-top: 12px; }
.server-app-admins p { margin: 0; }
.server-app-admins ul { margin: 6px 0; padding: 0; list-style: none; }
.server-app-admins li { padding: 2px 0; }
.app-facts { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 6px 18px; margin: 0; font-size: var(--st-text-meta); }
.app-facts dt { color: var(--st-muted); }
.app-facts dd { margin: 0; }
.app-facts a { display: inline-flex; align-items: center; gap: 4px; color: var(--st-text); }
.app-facts svg { width: 12px; height: 12px; }
@media(max-width:760px) { .app-step { padding: 16px; gap: 12px; } .app-step-row { flex-direction: column; } }
/* The create-App form's avatar (onboarding/app.html "app-avatar-picker"):
   the picture beside its actions; round, as GitHub shows it. */
.app-avatar-picker { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.app-avatar-preview { flex: none; width: 72px; height: 72px; border-radius: 50%; }
.app-avatar-body { display: grid; gap: 8px; min-width: 0; }
.app-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-avatar-body p { margin: 0; }
.app-avatar-failed { color: var(--st-bad); }
/* Code review threads on the Files tab (pulls/threads.html): a card under
   the line in the diff; a resolved one is a single line that opens. */
.rv-threads { display: grid; gap: 8px; margin-bottom: 8px; }
.rv-thread { margin: 6px 12px 10px 48px; max-width: 760px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif; }
.rv-thread.is-resolved { background: var(--st-muted-fill); }
.rv-thread.is-resolved > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--st-muted); cursor: pointer; }
.rv-thread.is-resolved > summary > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-comment { padding: 10px 12px; border-top: 1px solid var(--st-border); }
.rv-thread > .rv-comment:first-child, .rv-thread > summary + .rv-comment { border-top: 0; }
.rv-comment > header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rv-comment .markdown-body { font-size: var(--st-text-body); }
.rv-outdated { border: 1px solid var(--st-border); border-radius: 8px; padding: 8px 12px; }
.rv-outdated > summary { cursor: pointer; font-weight: 500; }
.rv-outdated-item .rv-thread { margin: 6px 0 10px; }
.rv-outdated-item > p { margin: 8px 0 0; }
.rv-threads-failed { margin: 0 0 8px; }
/* Review writes (pulls/threads.html): reply and resolve under a thread, the
   new-comment form under a line, a refusal in the form that made it. */
.rv-foot { display: grid; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--st-border); }
.rv-reply, .rv-resolve { display: grid; gap: 6px; }
.rv-resolve { justify-items: start; }
.rv-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rv-composer { display: grid; gap: 8px; margin: 6px 12px 10px 48px; max-width: 760px; padding: 10px 12px; border: 1px solid var(--st-accent); border-radius: 8px; background: var(--st-surface); font-family: "Geist Sans", ui-sans-serif, system-ui, sans-serif; }
.rv-composer p, .rv-foot p { margin: 0; }
.rv-write-error { color: var(--st-bad); }
.rv-body-hint { margin: 0; color: var(--st-muted); }
/* The review bar (pulls/detail.html) and pending comments (threads.html). */
.rv-bar { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--st-border); border-radius: 8px; }
.rv-bar-count { font-weight: 500; }
.rv-bar-done { margin: 0; color: var(--st-muted); }
.rv-finish { margin-left: auto; }
.rv-finish > summary { list-style: none; }
.rv-finish > summary::-webkit-details-marker { display: none; }
.rv-review { position: absolute; right: 12px; top: calc(100% + 6px); z-index: 5; display: grid; gap: 10px; width: min(440px, calc(100vw - 48px)); padding: 14px; border: 1px solid var(--st-border-strong); border-radius: 10px; background: var(--st-surface-raised); box-shadow: var(--st-shadow-popover); }
.rv-events { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.rv-events label { display: flex; align-items: flex-start; gap: 8px; }
.rv-events small { display: block; color: var(--st-muted); }
.rv-pending-card .rv-comment > header { gap: 8px; }
.rv-pending-body { margin: 0; white-space: pre-wrap; }
.rv-stale { color: var(--st-bad); }
.rv-pending-card .rv-actions { padding: 0 12px 10px; }
.rv-pending-card .rv-write-error { margin: 0 12px; }
.app-avatar-current { margin: 12px 0 16px; }
.app-avatar-title { display: flex; align-items: baseline; gap: 8px; }
/* An error's code and request id (partials "error-detail"). */
.error-detail { margin: 8px 0 0; }
.error-detail code { font-size: var(--st-text-caption); }
.error-detail-help { margin: 4px 0 0; max-width: 52ch; }
.state-page > p:has(+ .error-detail) { margin-bottom: 12px; }
.state-page > .error-detail { margin: 0 0 4px; }
.state-page > .error-detail:last-of-type:not(:has(+ .error-detail-help)) { margin-bottom: 24px; }
.state-page > .error-detail-help { margin: 0 0 24px; }
/* Find, order and fold in the inbox (pulls/list.html "pr-inbox-tools", task #739). */
.inbox2-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 12px; }
.inbox2-search { flex: 1 1 280px; max-width: 420px; }
.inbox2-search-empty { flex-basis: 100%; margin: 0; }
.inbox2-collapse { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.inbox2-collapse > .icon-chevron-down { flex: none; width: 14px; height: 14px; color: var(--st-muted); transform-origin: 50% 50%; transition: transform .15s; }
.inbox2-section.is-folded .inbox2-collapse > .icon-chevron-down { transform: rotate(-90deg); }
.inbox2-section.is-folded .inbox2-list { display: none; }

/* Stamp Design's component pages (design/index.html, Geist's layout): each
   example is the component drawn live in a bordered box, its source in a
   strip under it; the components index is a grid of cards. */
.design-example { margin: 12px 0 24px; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; background: var(--st-surface); }
.design-example-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 24px; }
.design-example-demo > * { margin: 0; }
.design-example-demo > .pr-row, .design-example-demo > .design-block { flex: 1 1 100%; }
.design-example-demo .pr-row { border-top: 0; }
.design-example-caption { padding: 6px 12px; border-top: 1px solid var(--st-border); }
.markdown-body .design-example-code { margin: 0; border: 0; border-top: 1px solid var(--st-border); border-radius: 0; background: var(--st-muted-fill-half); max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.markdown-body ul.design-cards, .design-cards { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.markdown-body .design-cards li { margin: 0; }
.design-card { display: grid; align-content: start; gap: 4px; height: 100%; padding: 14px 16px; border: 1px solid var(--st-border); border-radius: 8px; color: var(--st-text); text-decoration: none; }
.markdown-body .design-card { text-decoration: none; }
.design-card:hover { background: var(--st-surface-hover); }
/* Examples of chrome drawn inside a page (menu, dialog, top bar): in
   place, not floating over it. */
.design-example-demo .design-dialog-demo { position: static; display: block; margin: 0; max-width: 420px; }
.design-example-demo .topbar { border-bottom: 0; padding: 0; min-height: 0; }
.design-example-demo .design-menu-demo { min-height: 280px; align-self: flex-start; }

/* Settings › GitHub App's configuration check (onboarding/app.html
   "app-health"): a verdict line, the events and permissions as two small
   tables, red only on what the App's owner can fix. */
.app-health h2 { margin: 0 0 8px; font-size: var(--st-text-section); }
.app-health-verdict { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; }
.app-health-verdict > svg { flex: none; width: 16px; height: 16px; margin-top: 3px; }
.app-health-verdict.is-ok { color: var(--st-good); }
.app-health-verdict.is-bad { color: var(--st-bad); }
.app-health-verdict.is-quiet { color: var(--st-muted); }
.app-health-mismatch { color: var(--st-bad); }
.app-health-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: var(--st-text-meta); }
.app-health-table th, .app-health-table td { padding: 6px 8px; border-bottom: 1px solid var(--st-border); text-align: left; vertical-align: top; }
.app-health-table thead th { color: var(--st-muted); font-weight: 500; }
.app-health-table tr.is-missing { background: var(--st-bad-surface); }
.app-health-table tr.is-extra th, .app-health-table tr.is-extra td { color: var(--st-muted); }
.app-health-good, .app-health-bad { display: inline-flex; align-items: center; gap: 4px; }
.app-health-good { color: var(--st-good); }
.app-health-bad { color: var(--st-bad); font-weight: 600; }
.app-health-good svg, .app-health-bad svg { width: 14px; height: 14px; }
.app-health-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* The GitHub App banner under the top bar (layouts/shell.html), for a
   server owner or admin. */
.app-health-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; }
.app-health-banner[hidden] { display: none; }
.app-health-banner p { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; }
.app-health-banner p > svg { width: 16px; height: 16px; flex: none; }

/* Stamp Design's form controls (task #776; web/design/components/): each
   is a native input underneath, so it submits, labels and keys work without
   script; the classes only draw it. */
/* Toggle: an on/off setting that acts at once (a checkbox, role="switch"). */
.st-toggle { appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: 999px; background: var(--st-border-strong); cursor: pointer; transition: background .15s; vertical-align: middle; }
.st-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--st-surface); box-shadow: var(--st-shadow-popover); transition: transform .15s; }
.st-toggle:checked { background: var(--st-accent-strong); }
.st-toggle:checked::after { transform: translateX(14px); }
.st-toggle:disabled { opacity: .5; cursor: not-allowed; }
.st-toggle:focus-visible { outline: 2px solid var(--st-ring); outline-offset: 2px; }
.st-toggle-label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
/* Switch: one of a few views or modes, side by side (radio inputs). */
.st-switch { display: inline-flex; gap: 2px; padding: 2px; margin: 0; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-muted-fill-half); }
.st-switch legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.st-switch label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 6px; color: var(--st-muted); font-size: var(--st-text-meta); cursor: pointer; }
.st-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.st-switch label:has(input:checked) { background: var(--st-surface); color: var(--st-text); box-shadow: var(--st-shadow-popover); }
.st-switch label:has(input:focus-visible) { outline: 2px solid var(--st-ring); outline-offset: 1px; }
.st-switch label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
/* Choicebox: a choice whose options each need a line of explanation. */
.st-choicebox { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; }
.st-choicebox legend { margin-bottom: 8px; font-weight: 600; }
.st-choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 8px; cursor: pointer; }
.st-choice:hover { background: var(--st-surface-hover); }
.st-choice:has(input:checked) { border-color: var(--st-accent-strong); box-shadow: inset 0 0 0 1px var(--st-accent-strong); }
.st-choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.st-choice input { margin-top: 3px; }
.st-choice strong { display: block; }
.st-choice span { color: var(--st-muted); font-size: var(--st-text-meta); }
/* Fieldset: a group of settings saved together, with its own footer. */
.st-fieldset { margin: 0; padding: 0; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; background: var(--st-surface); min-width: 0; }
.st-fieldset > legend { float: left; width: 100%; padding: 16px 20px 0; font-size: var(--st-text-section); font-weight: 600; }
.st-fieldset-body { clear: both; padding: 8px 20px 16px; }
.st-fieldset-body > p { margin: 0 0 12px; color: var(--st-muted); }
.st-fieldset-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--st-border); background: var(--st-muted-fill-half); color: var(--st-muted); font-size: var(--st-text-meta); }
/* Clearable input: a field with a button that empties it (app.js
   StampClearable shows the button only while there is something to clear). */
.st-clearable { position: relative; display: flex; align-items: center; }
.st-clearable .z-input { width: 100%; padding-right: 32px; }
.st-clearable-button { position: absolute; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--st-muted); cursor: pointer; }
.st-clearable-button:hover { background: var(--st-muted-fill); color: var(--st-text); }
.st-clearable-button[hidden] { display: none; }
.st-clearable-button svg { width: 14px; height: 14px; }
/* Slider: a value on a range, where the exact number matters less. */
.st-slider { width: 100%; max-width: 320px; accent-color: var(--st-accent-strong); }
.st-slider-row { display: flex; align-items: center; gap: 12px; }
.st-slider-row output { min-width: 3ch; font-variant-numeric: tabular-nums; color: var(--st-muted); }
/* Multi-select: several of many, filtered by typing (app.js
   StampMultiSelect); the checkboxes are the value. */
.st-multiselect { display: grid; gap: 8px; max-width: 360px; }
.st-multiselect-chips { display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; margin: 0; padding: 0; list-style: none; }
.st-multiselect-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--st-muted-fill); font-size: var(--st-text-caption); }
.st-multiselect-list { display: grid; gap: 2px; max-height: 180px; overflow: auto; margin: 0; padding: 4px; border: 1px solid var(--st-border); border-radius: 8px; list-style: none; }
.st-multiselect-list label { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.st-multiselect-list label:hover { background: var(--st-surface-hover); }
.st-multiselect-list li[hidden] { display: none; }
.st-multiselect-empty { margin: 0; color: var(--st-muted); font-size: var(--st-text-meta); }
.markdown-body ul.st-multiselect-list, .markdown-body ul.st-multiselect-chips { list-style: none; padding-left: 4px; }
.markdown-body ul.st-multiselect-chips { padding-left: 0; }
.markdown-body .st-multiselect li { margin: 0; }

/* Settings → Appearance (task #743): three choices in a row. */
.appearance-options { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.appearance-options label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* ---- Pull request page: editing the title and description (task #752) ---- */
.pr-title-row { display: flex; align-items: flex-start; gap: 8px; }
.pr-title-row[hidden], .pr-edit[hidden] { display: none; }
.pr-title-row h2 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.pr-title-row .pr-edit-open { flex: none; margin-top: 6px; color: var(--st-muted); }
.pr-edit { display: grid; gap: 12px; margin: 4px 0 12px; padding: 16px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-surface); }
.pr-edit-field { display: grid; gap: 4px; font-size: var(--st-text-meta); font-weight: 600; }
.pr-edit-field .z-input { font-size: var(--st-text-section); font-weight: 600; }
.pr-edit-field .z-textarea { min-height: 200px; font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-meta); line-height: var(--st-leading-normal); resize: vertical; }
.pr-edit-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pr-edit-actions .muted { margin-right: auto; }

/* ---- Pull request page: close / reopen / draft / ready (task #753) ---- */
.pr-manage-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-state-form { display: contents; }

/* ---- Review comments: a suggested change (task #755) ---- */
.md-suggestion { margin: 8px 0; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.md-suggestion-head { padding: 6px 12px; border-bottom: 1px solid var(--st-border); background: var(--st-muted-fill-half); color: var(--st-muted); font-size: var(--st-text-meta); font-weight: 600; }
.markdown-body .md-suggestion-code { margin: 0; padding: 0; border-radius: 0; background: var(--st-good-surface); }
.md-suggestion-code code { display: block; padding: 6px 0; background: none; }
.md-suggestion-line { display: block; padding: 0 12px 0 8px; white-space: pre; }
.md-suggestion-line::before { content: "+"; display: inline-block; width: 16px; color: var(--st-color-added); user-select: none; }

/* ---- Pull request page: who merged it (task #760) ---- */
.pr-merged-by { display: inline-flex; align-items: center; gap: 4px; font-size: var(--st-text-meta); }

/* ---- Pull request sidebar: reviewers, assignees, labels (task #753) ---- */
.pr-people-list, .pr-labels, .pr-people-choices { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pr-people-list li { display: flex; align-items: center; gap: 6px; font-size: var(--st-text-meta); }
.pr-labels { display: flex; flex-wrap: wrap; }
.pr-label { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--st-border); border-radius: 999px; font-size: var(--st-text-caption); }
.pr-label-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.pr-people { position: relative; }
.pr-people-edit { position: static; margin-top: 0; }
.pr-people-edit > summary { position: absolute; top: 10px; right: 0; left: auto; width: auto; margin: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--st-muted); font-size: var(--st-text-meta); list-style: none; }
.pr-people-edit > summary::-webkit-details-marker { display: none; }
.pr-people-form { display: grid; gap: 8px; margin-top: 8px; }
.pr-people-form > button { justify-self: start; }
.pr-people-choices { max-height: 240px; overflow: auto; }
.pr-people-choices label { display: flex; align-items: center; gap: 6px; font-size: var(--st-text-meta); }

/* ---- Reading code (task #756): a folder's entries, a file with line numbers ---- */
.code-page { display: grid; gap: 16px; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.code-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; font-size: var(--st-text-body); }
.code-crumbs a { color: var(--st-text); text-decoration: none; overflow-wrap: anywhere; }
.code-crumbs a:hover { text-decoration: underline; }
.code-crumbs a[aria-current="page"] { font-weight: 600; }
.code-ref { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.code-entries { margin: 0; padding: 0; list-style: none; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.code-entries li + li { border-top: 1px solid var(--st-border); }
.code-entries a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; color: var(--st-text); text-decoration: none; font-size: var(--st-text-meta); }
.code-entries a:hover { background: var(--st-surface-hover); }
.code-entries .icon { width: 16px; height: 16px; color: var(--st-muted); flex: none; }
.code-file { border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.code-file-head { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--st-border); background: var(--st-muted-fill-half); font-size: var(--st-text-meta); }
.code-note { margin: 0; padding: 14px; }
.code-lines { margin: 0; padding: 8px 0; overflow: auto; font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-caption); line-height: 1.6; tab-size: 4; counter-reset: code-line; }
.code-line { display: block; padding-right: 16px; white-space: pre; }
.code-highlight { overflow: auto; }
.code-highlight[hidden] { display: none; }
.code-line::before { counter-increment: code-line; content: counter(code-line); display: inline-block; width: 4.5em; margin-right: 16px; padding-right: 8px; text-align: right; color: var(--st-muted); user-select: none; }

/* ---- Issues (task #765): the list and one issue ---- */
.issues-page, .issue-page { display: grid; gap: 16px; }
.issues-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.issues-head h2 { margin: 0; }
.issues-states { display: flex; gap: 4px; }
.issues-states a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; color: var(--st-muted); text-decoration: none; font-size: var(--st-text-meta); }
.issues-states a.is-current { background: var(--st-muted-fill); color: var(--st-text); font-weight: 600; }
.issue-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.issue-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; }
.issue-row + .issue-row { border-top: 1px solid var(--st-border); }
.issue-icon { flex: none; margin-top: 2px; color: var(--st-good); }
.issue-row.is-closed .issue-icon { color: var(--st-muted); }
.issue-main { flex: 1 1 auto; min-width: 0; }
.issue-main p { margin: 2px 0 0; }
.issue-title { color: var(--st-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.issue-title:hover { text-decoration: underline; }
.issue-comments { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.issues-pager { display: flex; justify-content: center; gap: 8px; }
.issue-head h2 { margin: 4px 0 8px; }
.issue-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.issue-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---- Pull request sidebar: merge the stack (task #764) ---- */
.stack-merge { display: grid; gap: 6px; margin-top: 10px; justify-items: start; }
.stack-merge p, .stack-merge-off { margin: 0; }

/* ---- A person's or an agent's profile (S4): the card, then the lists ---- */
raft-avatar[size="88"] { width: 88px; height: 88px; }
.person-page { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr); gap: 32px; align-items: start; padding-top: 28px; }
.person-missing { grid-column: 1 / -1; }
.person-card { display: grid; gap: 10px; }
.person-name, .person-missing h2 { margin: 0; font-size: var(--st-text-title); font-weight: 700; letter-spacing: -.035em; line-height: var(--st-leading-tight); }
.person-missing p { margin-top: 10px; }
.person-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.person-kind { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid var(--st-border); border-radius: 999px; font-size: var(--st-text-meta); font-weight: 400; color: var(--st-muted); }
.person-card p { margin: 0; }
.person-counts { display: flex; gap: 18px; margin: 0; }
.person-counts div { display: flex; flex-direction: column-reverse; }
.person-counts dt { font-size: var(--st-text-meta); color: var(--st-muted); }
.person-counts dd { margin: 0; font-size: var(--st-text-section); font-weight: 600; }
.person-recorded summary { cursor: pointer; text-decoration: underline dotted; width: max-content; }
.person-recorded p { margin-top: 4px; }
.person-lists { display: grid; gap: 12px; min-width: 0; }
.person-filters { display: flex; gap: 6px; }
.person-list .issue-row { align-items: center; }
.person-when { flex: none; white-space: nowrap; }
@media (max-width: 720px) { .person-page { grid-template-columns: minmax(0, 1fr); } }