: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;
}

/* A kit overlay is hidden by the class the kit's script gives it (z-drop,
   z-modal, z-offcanvas); that script loads at the end of the page, so until
   it runs a closed menu's contents showed (artin 10-02: "Add another server"
   flashed on a cold load). Hidden until the kit has taken it over. */
[z-drop]:not(.z-drop), [z-modal]:not(.z-modal), [z-offcanvas]:not(.z-offcanvas) { display: none; }

.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 (S5, the card stack, artin 2026-10-05): inline,
   transparent, in the text colour; the approved card is the product green. */
.brand-mark {
  width: 30px;
  height: 30px;
  display: block;
  flex: none;
  color: var(--st-text);
}
.stamp-mark-imprint { fill: var(--st-good); }
.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: block; }
/* Settings › repository access (task #821): the installations this server's
   App serves, one row each -- who, what it covers, where to change it. */
.app-installations { display: grid; margin: 0; padding: 0; list-style: none; }
.app-installation { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.app-installation + .app-installation { border-top: 1px solid var(--st-border); }
.app-installation-who { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.app-installation-who strong { overflow-wrap: anywhere; }
.app-installation-manage { display: inline-flex; align-items: center; gap: 4px; flex: none; font-size: var(--st-text-meta); }
.app-installation-manage .icon { width: 14px; height: 14px; }
/* Settings > GitHub App's shared-App panel and the onboarding App step
   (onboarding/app_shared.html, artin 10-19): the bound installations and
   the ones to pick, each an entity row in one card (avatar, name and
   kind, the repository scope, the action); a "selected" scope opens its
   repository list under the row, hidden while "All repositories" is
   chosen. Then the install: a dashed row under a list, the primary button
   when there is nothing to pick. */
.shared-app-rows { display: grid; margin: 8px 0 0; padding: 0; list-style: none; overflow: hidden; }
.shared-app-rows > li + li { border-top: 1px solid var(--st-border); }
.shared-app-row { flex-wrap: wrap; padding: 12px 14px; }
.shared-app-row .st-entity-text { flex: 1 1 160px; }
.shared-app-account-login { color: var(--st-text); overflow-wrap: anywhere; }
.shared-app-scope { width: auto; flex: none; }
.shared-app-bind-form { display: grid; }
.shared-app-bind-form:has(option[value="all"]:checked) .shared-app-repos-live { display: none; }
.shared-app-repos-live { padding: 0 14px 12px; }
.shared-app-pick-title { margin: 16px 0 0; font-size: var(--st-text-meta); font-weight: 600; color: var(--st-muted); }
.shared-app-install { display: grid; margin-top: 12px; }
.shared-app-install-row { display: flex; width: 100%; padding: 12px 14px; border: 1px dashed var(--st-border-strong); border-radius: 10px; background: transparent; color: var(--st-muted); font: inherit; font-size: var(--st-text-meta); text-align: left; cursor: pointer; }
.shared-app-install-row.busy-button .when-idle { display: flex; align-items: center; gap: 10px; width: 100%; }
.shared-app-install-row .when-idle > span { flex: 1; }
.shared-app-install-row strong { color: var(--st-text); font-weight: 600; }
.shared-app-install-row:hover { border-color: var(--st-text); color: var(--st-text); }
.shared-app-install-row .icon { width: 16px; height: 16px; flex: none; }
/* On the onboarding App step the picker sits in the step's card. */
.server-app-required .shared-app-panel { padding: 0; border: 0; background: none; text-align: left; }
.server-app-required .shared-app-install:not(.is-quiet) { justify-items: stretch; }
.server-app-required .shared-app-install:not(.is-quiet) .z-button { width: 100%; }
/* The step's card is narrow: the scope and Bind share the second line. */
.server-app-required .shared-app-row .shared-app-scope { flex: 1; }
/* Bound in place (artin 10-19): Continue is the step's action, and the
   skip has nothing left to skip. */
.shared-app-continue { margin-top: 16px; }
.server-app-required .shared-app-continue { display: flex; justify-content: center; width: 100%; }
.server-app-required:has(.shared-app-continue) .app-step-skip { display: none; }
.shared-app-panel > .muted.small { margin: 8px 0 0; }
.shared-app-repos { display: grid; justify-items: start; gap: 6px; width: 100%; }
.shared-app-repos > .shared-app-repos-filter, .shared-app-repos > .shared-app-repo-list { justify-self: stretch; }
.shared-app-repos > p { margin: 0; }
.shared-app-repo-list { max-height: 280px; overflow-y: auto; margin: 0; padding: 4px 10px; list-style: none; border: 1px solid var(--st-border); border-radius: 6px; background: var(--st-surface); }
.shared-app-repo-list li { padding: 3px 0; }
.shared-app-repo-list label { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.repository-list [data-default-app] { margin: 0 0 8px; }
.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: 1440px; margin: 0 auto; padding: 8px 20px 48px; }
/* Reviewing uses the whole screen (Artea 10-21, task #848): the PR page
   reads at up to 1440px, and its Files tab, while open, spans the window
   (the shell and its top bar follow), the tree keeping its own width. */
.shell:has(#pr-panel-files:not([hidden])), .detail-page:has(#pr-panel-files:not([hidden])) { max-width: none; }
.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; }
.icon-button { width: var(--st-control); height: var(--st-control); 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-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, 280px) 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, 280px) - 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; }
/* Diff and code colours (task #816, artin 2026-10-03: Pierre's themes were
   too lively; he picked the low-saturation set). files.js and code.js render
   with the stamp-light / stamp-dark CSS-variable themes, so every highlight
   colour is one of these variables, each pointed at a --st-code-* or
   --st-diff-* token; tokens.css holds their light and dark values. Added and
   removed lines get pale washes; the bar and line numbers keep green and red. */
.files-host, .code-highlight {
  --diffs-background: var(--st-bg); --diffs-light-bg: var(--st-bg); --diffs-dark-bg: var(--st-bg);
  --diffs-foreground: var(--st-text);
  --diffs-token-keyword: var(--st-code-keyword); --diffs-token-function: var(--st-text); --diffs-token-parameter: var(--st-text);
  --diffs-token-string: var(--st-code-string); --diffs-token-string-expression: var(--st-code-string);
  --diffs-token-constant: var(--st-code-constant); --diffs-token-link: var(--st-code-constant);
  --diffs-token-punctuation: var(--st-code-punctuation); --diffs-token-comment: var(--st-code-comment);
  --diffs-addition-color-override: var(--st-color-added); --diffs-deletion-color-override: var(--st-color-removed);
  --diffs-modified-color-override: var(--st-muted);
  --diffs-bg-addition-override: var(--st-diff-added-surface); --diffs-bg-deletion-override: var(--st-diff-removed-surface);
  --diffs-bg-addition-emphasis-override: var(--st-diff-added-emphasis); --diffs-bg-deletion-emphasis-override: var(--st-diff-removed-emphasis);
  --diffs-bg-separator-override: var(--st-muted-fill-half);
}
/* The tree in the same key: one grey for every file icon, file names and
   status letters in the muted diff colours instead of the bundle's bright ones. */
.files-tree {
  --trees-file-icon-color: var(--st-muted);
  --trees-git-modified-color-override: var(--st-diff-modified-text); --trees-git-renamed-color-override: var(--st-diff-modified-text);
  --trees-git-added-color-override: var(--st-diff-added-text); --trees-git-untracked-color-override: var(--st-diff-added-text);
  --trees-git-deleted-color-override: var(--st-diff-removed-text);
}
@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; }
/* Per-organization connections (#1031): one row per further App. */
.github-orgs { margin-top: 12px; }
.github-orgs-list dt { color: var(--st-text); font-weight: 600; }
.github-org-state.is-ok { color: var(--st-good); }
.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-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.docs-prompt { display: grid; gap: 10px; max-width: 1020px; margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); }
.docs-prompt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.docs-prompt h2 { margin: 0 0 2px; font-size: var(--st-text-section); }
.docs-prompt-head p { margin: 0; }
.docs-prompt-copy { flex: none; }
.docs-prompt-text { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--st-bg); border: 1px solid var(--st-border); overflow-wrap: anywhere; font-size: var(--st-text-meta); line-height: var(--st-leading-normal); }
.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-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; }
/* Repository Settings › Reviews (repository/review_settings.html). */
.review-settings .settings-content h2 { margin-top: 0; }
.review-settings .settings-panel > p, .review-settings .settings-panel .z-alert p { margin: 0; }
.review-auto-merge { display: grid; gap: 8px; }
.review-auto-merge .settings-toggle { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
/* Self-approval (#802): the switch, then the two lists stacked full width,
   saved together by the footer button. Switched off, the lists stay
   editable but recede: they apply only when it is on. */
.review-self-approval .settings-toggle { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.review-self-fields { display: grid; gap: 6px; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--st-border); }
.review-self-fields p { margin: 0 0 10px; }
.review-self-field { font-weight: 600; }
.review-self-fields .z-textarea { width: 100%; font-family: "Fira Mono", "HarmonyOS Sans SC", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-meta); }
.review-self-approval:has([name="enabled"]:not(:checked)) .review-self-fields { opacity: 0.55; }
.review-self-agents { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
.review-self-agents legend { padding: 0; margin: 0 0 6px; }
.review-self-mode { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* The picker only for "Only the agents I choose" (artin 10-03: every agent
   is the default; a list is the exception). */
.review-self-agent-pick { display: none; margin-left: 26px; }
.review-self-agents:has([name="agentsMode"][value="listed"]:checked) .review-self-agent-pick { display: block; }
.review-self-agent-list { list-style: none; margin: 0; padding: 4px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; max-height: 240px; overflow: auto; }
.review-self-agent { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; cursor: pointer; min-width: 0; }
.review-self-agent:hover { background: var(--st-surface-hover); }
.review-self-agent > span:not(.z-label) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-self-agent.is-unknown code { font-size: var(--st-text-caption); overflow: hidden; text-overflow: ellipsis; }
.review-self-agent-unknown { font-size: var(--st-text-caption); padding-block: 0; flex: none; }
.review-settings .settings-content > .z-alert { margin: 0 0 28px; }
.review-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.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; } }

@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; }
.account-menu-trigger { cursor: pointer; border: 0; background: none; color: inherit; font: inherit; 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; }
/* A phone (artin 10-14: the repository crumb was cut to "st…" next to
   "· botiverse"): the chip is the avatar alone, the server is in its menu,
   and the crumbs get the width. */
@media (max-width: 720px) {
  .account-chip-name, .account-chip-server, .account-menu-trigger .icon-chevron-down { display: none; }
  .account-menu-trigger { padding: 2px; }
  #org-switch { display: none; }
}
.account-menu-trigger:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
.account-menu-trigger[aria-expanded="true"] raft-avatar { box-shadow: 0 0 0 2px var(--st-accent); }
.account-menu-panel { 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-federation a { color: inherit; }
.account-menu-federation a:hover { text-decoration: underline; }
.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); }
/* Feedback off: the entry stays, greyed, its title saying why. */
.account-menu-feedback.is-disabled { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; color: var(--st-muted); cursor: not-allowed; }
.account-menu-trigger { position: relative; }
/* Unread feedback replies (#818): a dot on the avatar, the count beside
   Feedback in the menu; both go once the feedback page marks them seen. */
.account-menu-dot { position: absolute; top: 4px; left: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--st-bad); box-shadow: 0 0 0 2px var(--st-bg); }
.account-menu-links a.account-menu-feedback { display: flex; }
.account-menu-unread { margin-left: auto; background: var(--st-bad); border-color: var(--st-bad); color: var(--st-accent-strong-f); font-size: var(--st-text-caption); }
.account-menu-signout { padding: 6px 14px 0; }
/* Switch server: a row in the menu that opens the servers to its left
   (the kit's z-drop, hover mode, nested in the menu's own). */
.account-menu-switch-row { border-bottom: 1px solid var(--st-border); padding: 6px 0; }
.account-menu-switch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px; border: 0; background: none; color: var(--st-text); font: inherit; text-align: left; cursor: pointer; }
.account-menu-switch > span { flex: 1; }
.account-menu-switch .icon-chevron-right { color: var(--st-muted); }
.account-menu-switch:hover, .account-menu-switch[aria-expanded="true"] { background: var(--st-surface-hover); }
.account-switcher { min-width: 220px; padding: 6px 0; background: var(--st-surface-raised); border: 1px solid var(--st-border-strong); border-radius: 10px; box-shadow: var(--st-shadow-popover); }
.account-switcher-list { margin: 0; padding: 0; list-style: none; }
.account-switcher-list button, .account-menu-add { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 14px; border: 0; background: none; color: var(--st-text); font: inherit; text-align: left; cursor: pointer; }
.account-switcher-list button > span:first-of-type { flex: 1; }
.account-switcher-list button:hover, .account-menu-add:hover { background: var(--st-surface-hover); }
.account-switcher-list .icon-check { color: var(--st-accent-strong); }
.account-menu-add { margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--st-border); color: var(--st-muted); }
.design-menu-static { width: 260px; }
.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); }
/* The pull request's origin line (pulls/attribution.html): the Stamp mark
   stands where an avatar would, and a list of pushers keeps its separators
   against the name before them. */
.pr-origin-stamp, .pr-pushed-by { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pr-origin-mark { width: 20px; height: 20px; margin-right: 2px; color: var(--st-text); }
.pr-pushers { display: inline-flex; align-items: center; flex-wrap: wrap; }
.pr-pusher-sep { white-space: pre; }
.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; }
.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(--st-shadow-card); 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; }
/* One line of facts, centred on each other (artin 10-14: the badges sat
   below the text); on a narrow column the actors wrap to a second line as
   a whole instead of squeezing into a sliver. */
.pr-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; color: var(--st-muted); font-size: var(--st-text-meta); white-space: nowrap; }
.pr-row-who { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 4px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.pr-row-meta .z-label { padding: 0 6px; font-size: var(--st-text-caption); line-height: var(--st-leading-tight); }
.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); }
.pr-row-ci { text-decoration: none; }
.pr-row-ci:hover { text-decoration: underline; text-underline-offset: 3px; }
.pr-status-ci { color: inherit; }
/* A check a link named (the verdict row's failing checks) is marked. */
.checks-list .check:target { background: var(--st-surface-hover); border-radius: 6px; }
@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: Source Sans 3 (HarmonyOS Sans SC for Chinese), big tight headings, hairlines, segmented control. */
:root, body { font-family: "Source Sans 3", "HarmonyOS Sans SC", ui-sans-serif, system-ui, sans-serif; }
/* Smooth the web fonts (artin 10-05: "the text looks blurry"): greyscale
   antialiasing on macOS, legibility-first shaping; no faux bold or italic
   where a real weight exists. */
:root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis: none; }
code, pre, .pr-row-changes, .coordinates { font-family: "Fira Mono", "HarmonyOS Sans SC", 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(--st-shadow-card); }
.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. */
/* 1440px of content plus the 24px gutters, on every page, so the top bar
   does not move when a PR page loads into the shell. */
.shell { max-width: 1488px; }
.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; }
/* 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; }
}

/* The Files tab's toolbar (task #850): size and viewed count on the left,
   the review's tools on the right in one row. The code-view settings are a
   z-drop from the gear (over the page, never pushing it down): a two-column
   form, each option's words on one line beside its select, the switches in
   one row under them. */
.files-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 32px; }
.files-head .files-total, .files-head .files-viewed-count { white-space: nowrap; }
.files-head h3 { margin: 0; }
.files-tools { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.files-settings-toggle { aspect-ratio: 1; padding-inline: 0; justify-content: center; }
.files-settings { width: min(360px, 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); }
.files-settings.z-open { display: grid; gap: 12px; }
.files-settings-heading { font-size: var(--st-text-body); line-height: var(--st-leading-tight); white-space: nowrap; }
.files-settings .files-toolbar { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: center; margin: 0; color: var(--st-text); font-size: var(--st-text-body); }
.files-settings .files-opt { white-space: nowrap; color: var(--st-muted); }
.files-settings .files-toolbar select { width: 100%; }
.files-opt-checks { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 4px; }
.files-opt-checks label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* ---- 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. */
/* The region Approve swaps (detail.html): no box of its own. */
.pull-head-region { display: contents; }
.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: var(--st-on-fill); 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-add { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0; border: 1px solid var(--st-border); border-radius: 999px; background: none; color: var(--st-muted); cursor: pointer; }
.reaction-add[aria-expanded="true"], .reaction-add:hover { background: var(--st-surface-hover); }
.reaction-add .icon { width: 14px; height: 14px; }
.reaction-choices.z-open { display: flex; }
.reaction-choices { width: auto; 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-items.z-open { display: grid; }
.comment-menu-items { 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); }
/* The row wraps: a long check name keeps at least a readable width, and
   the state, Rerun and the log toggle move to the next line before they
   squeeze it (artin 10-08: "native (windows-latest, …)" became one letter
   per line). */
.checks-list .check { flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 3px 8px; }
.checks-list .check-name { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
/* A failed Actions job's log, opened under its row (task #754). */
.checks-list .check-log { flex: none; }
.checks-list .check-log[open] { 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; }
/* The checks page (pulls/checks.html): the list at the page's width, one
   heading per outcome. */
.pr-checks { padding-top: 20px; border-top: 0; }
.pr-checks .checks-group { margin: 18px 0 4px; font-size: var(--st-text-meta); font-weight: 600; }
.pr-checks .checks-group:first-child { margin-top: 8px; }
.checks-list .check-required { flex: none; }
.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; }
/* 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; }
/* A principal's name (and its avatar beside it) links to its profile page:
   it reads as the name, and underlines only when pointed at or focused. */
.principal-link { color: inherit; text-decoration: none; }
.principal-link:hover, .principal-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.principal-link .principal-pending { cursor: pointer; }
/* One actor (components/who.html): an inline flex row, so the avatar,
   the name and its badges are centred on one another. */
.who { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; white-space: normal; vertical-align: middle; }
.who > .principal-link { display: inline-flex; align-items: center; gap: 4px; }
.who-act-as { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.who-name { overflow-wrap: anywhere; }
/* The badges are flex items now: centred on the name by the row, no
   margin or nudge of their own. */
.who .principal-server { margin-left: 0; }
.who-outside, .who-app { font-weight: 500; }

/* 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; }

/* 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; }
/* Every prose rule stops at a Stamp Design example: a component drawn
   there (a banner's text, a combobox's options, a collapse's sections)
   looks as it does on a real page, where no Markdown body is around it.
   A Markdown body inside the example (Show more) is a new scope and gets
   them again. :scope keeps each rule's weight. */
@scope (.markdown-body) to (.design-example-demo) {
  :scope p, :scope ul, :scope ol, :scope blockquote, :scope pre, :scope table, :scope details { margin: 0 0 12px; }
  :scope ul, :scope ol { padding-left: 24px; }
  :scope ul { list-style: disc; }
  :scope ol { list-style: decimal; }
  :scope li + li { margin-top: 4px; }
  :scope li > ul, :scope li > ol { margin: 4px 0 0; }
  :scope h1, :scope h2, :scope h3, :scope h4, :scope h5, :scope h6 { margin: 20px 0 8px; font-weight: 600; line-height: var(--st-leading-tight); letter-spacing: -.01em; }
  :scope h1 { font-size: var(--st-text-heading); padding-bottom: 6px; border-bottom: 1px solid var(--st-border); }
  :scope h2 { font-size: var(--st-text-heading); padding-bottom: 4px; border-bottom: 1px solid var(--st-border); }
  :scope h3 { font-size: var(--st-text-section); }
  :scope h4, :scope h5, :scope h6 { font-size: var(--st-text-body); }
  :scope li:has(> input[type="checkbox"]) { list-style: none; margin-left: -20px; }
  :scope input[type="checkbox"] { margin: 0 6px 0 0; vertical-align: -1px; }
  :scope a { color: var(--st-text); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--st-muted); }
  :scope a:hover { text-decoration-color: var(--st-text); }
  :scope code { padding: .15em .35em; border-radius: 4px; background: var(--st-muted-fill); font-family: "Fira Mono", "HarmonyOS Sans SC", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 85%; }
  :scope pre { padding: 12px 14px; overflow-x: auto; border-radius: 8px; background: var(--st-muted-fill); line-height: var(--st-leading-normal); }
  :scope pre code { padding: 0; background: none; font-size: var(--st-text-meta); }
  :scope blockquote { padding: 0 12px; border-left: 3px solid var(--st-border); color: var(--st-muted); }
  :scope table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--st-text-meta); }
  :scope th, :scope td { padding: 6px 12px; border: 1px solid var(--st-border); text-align: left; }
  :scope 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). */
  :scope img { display: inline; vertical-align: middle; max-width: 100%; height: auto; border-radius: 4px; }
  :scope hr { height: 1px; margin: 16px 0; border: 0; background: var(--st-border); }
  :scope details { padding: 8px 12px; border: 1px solid var(--st-border); border-radius: 8px; }
  :scope summary { cursor: pointer; font-weight: 500; }
  :scope 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; }
/* The pull request's size at the right end of the tab row
   (components/diff_stat.html): a sibling of the tab list, over its bottom
   border's row. Phones leave it to the Files panel's own total. */
.pr-tabs-row { position: relative; margin-top: 20px; }
.pr-tabs-row > .pr-tabs { margin-top: 0; }
.pr-tabs-stat { position: absolute; top: 0; right: 0; bottom: 1px; display: flex; align-items: center; padding-left: 12px; }
.pr-tabs-stat:empty { display: none; }
.pr-diff-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-caption); }
.pr-diff-stat .add { color: var(--st-color-added); }
.pr-diff-stat .del { color: var(--st-color-removed); }
.pr-diff-stat-bar { display: inline-flex; gap: 1px; }
.pr-diff-stat-block { width: 8px; height: 8px; border-radius: 2px; background: var(--st-border-strong); }
.pr-diff-stat-block.is-add { background: var(--st-color-added); }
.pr-diff-stat-block.is-del { background: var(--st-color-removed); }
@media (max-width: 720px) { .pr-tabs-stat { display: none; } }
.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; }
/* A conversation comment is a card on every side (the older .comment rule
   above drew only a top rule, so events between cards looked cut off). */
.comment.z-comment { padding: 14px 16px; border: 1px solid var(--st-border); border-radius: 8px; }
.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, .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; }
/* 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; min-width: 100%; width: max-content; max-width: min(36rem, calc(100vw - 32px)); 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; }
/* The list grows to its longest option (artin 10-02: options were squeezed
   into the input's width), but on a phone it keeps to the input so it
   cannot run off the screen. */
@media (max-width: 640px) { .combobox-list { right: 0; width: auto; max-width: none; } }
/* The member picker (StampMemberPicker in app.js; input[data-member-picker]):
   the hand-over field stays a plain text field, and an owner or admin also
   gets the server's matching people under it, in the combobox's list. */
.member-picker { position: relative; justify-self: stretch; width: 100%; }
.app-handoff-form .member-picker { max-width: 20rem; }
.member-picker .z-input { width: 100%; max-width: none; }
.member-picker-drop { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0; max-height: min(50vh, 320px); overflow: auto; padding: 6px; border: 1px solid var(--st-border-strong); border-radius: 8px; background: var(--st-surface-raised); box-shadow: var(--st-shadow-popover); }
.member-picker-list { margin: 0; padding: 0; list-style: none; }
.member-picker-list li { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: 6px; color: var(--st-text); font-size: var(--st-text-meta); }
.member-picker-list li[hidden] { display: none; }
.member-picker-option { cursor: pointer; }
.member-picker-option:hover, .member-picker-option.is-active { background: var(--st-surface-hover); }
.member-picker-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-picker-handle { flex: none; color: var(--st-muted); }
.member-picker-note { margin: 0; padding: 6px 8px; color: var(--st-muted); font-size: var(--st-text-meta); }
.member-picker-note:empty { display: none; }
/* The switcher's rows start where the crumb's avatar and name start
   (artin 09-29): the kit places the drop at its target's left edge, so the
   target is an empty anchor inside the crumb, 11px to its left (the
   border (1), padding (8) and a row's padding (8), less the crumb's own (6)).
   The kit cancels a margin or translate on the drop itself. */
.crumb:has(> .crumb-anchor) { position: relative; }
.crumb-anchor { position: absolute; top: 0; bottom: 0; left: -11px; width: 0; pointer-events: none; }
.switcher { 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; }
  /* After the 860px rule (12px), so a phone's bar is tighter still. */
  .topbar { gap: 8px; }
}
/* 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(> .rail)) { 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 { white-space: normal; }
/* A label or badge that leads with an icon keeps a gap between the two
   (artin 10-02: the verdict's icon touched its words). */
.z-label:has(> .icon), .z-badge:has(> .icon) { display: inline-flex; align-items: center; gap: 6px; }
.pr-verdict-checks code, .pr-verdict-pin code { font-size: var(--st-text-caption); }
/* A required check that failed only in a run another event started: its own
   line, naming the run and how to clear it (slock #9288). */
.pr-verdict-other-run { flex-basis: 100%; overflow-wrap: anywhere; }
.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; }
/* A BLOCKED verdict's reasons: their own line under the label, one reason
   per row (Mason 10-11). */
.pr-verdict-reasons { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.pr-verdict-reasons ul { margin: 0; padding-left: 1.2em; flex-basis: 100%; list-style: disc; }
.pr-verdict-reasons li::first-letter { text-transform: uppercase; }
.pr-verdict-reasons code { font-size: var(--st-text-caption); overflow-wrap: anywhere; }
/* 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-merged-fill); border-color: var(--st-merged-fill); color: var(--st-on-fill); }
.pr-live-state { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.pr-verdict-words::first-letter { text-transform: uppercase; }
/* Self-approval with review evidence (task #803 follow-up, #802): the
   verdict line names it with a small label; the evidence link opens the
   report in the kit's modal; below, one line says whether the author agent
   may self-approve, and the evidence history is folded away. */
.pr-approval-kind { font-size: var(--st-text-caption); padding-block: 0; }
.pr-approval-kind .icon, .pr-approval-evidence .icon, .pr-self-approval .icon, .pr-approval-report-fold summary .icon { width: 14px; height: 14px; flex: none; }
.pr-approval-evidence { display: inline-flex; align-items: center; gap: 4px; font-size: var(--st-text-meta); }
.pr-approval-reports { display: grid; gap: 4px; margin: 8px 0 0; }
.pr-self-approval { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.pr-self-approval .icon { margin-top: 2px; }
.pr-self-approval[data-self-approval-eligible="true"] .icon { color: var(--st-good); }
.pr-self-approval-glob { color: var(--st-muted); }
.pr-approval-report-fold summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--st-muted); list-style: none; }
.pr-approval-report-fold summary::-webkit-details-marker { display: none; }
.pr-approval-report-fold summary:hover { color: var(--st-text); }
.pr-approval-report-fold[open] summary { color: var(--st-text); }
.pr-approval-report-list { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--st-border); display: grid; gap: 6px; }
.pr-approval-report-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pr-approval-report-list li[data-invalidated] > :not(.pr-approval-void):not(.pr-approval-evidence) { opacity: 0.6; }
.pr-approval-void { font-size: var(--st-text-caption); padding-block: 0; }
/* The evidence modal: wide enough for a finding's path and its failure line;
   long reports scroll inside it. */
.approval-evidence-dialog { position: relative; width: min(760px, 94vw); max-height: 86vh; overflow: auto; overscroll-behavior: contain; padding: 24px 28px; }
.approval-evidence-close { position: absolute; top: 12px; right: 12px; }
/* In the dialog the pull request is the page behind it: no link back. */
.approval-evidence-dialog .approval-evidence-crumb { display: none; }
/* The evidence itself (approvals/evidence.html), in the modal or as a page. */
.approval-evidence { display: grid; gap: 20px; max-width: 820px; }
#session-root > .approval-evidence { margin: 24px auto; padding: 0 24px; }
.approval-evidence-head { display: grid; gap: 8px; }
.approval-evidence-head h1 { margin: 0; font-size: var(--st-text-title); }
.approval-evidence-crumb { margin: 0; }
.approval-evidence-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.approval-evidence-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px 16px; margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-muted-fill-half); }
.approval-evidence-meta div { min-width: 0; }
.approval-evidence-meta dt { color: var(--st-muted); font-size: var(--st-text-caption); }
.approval-evidence-meta dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.approval-evidence-part { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--st-border); }
.approval-evidence-part h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--st-text-section); }
.approval-evidence-part p { margin: 0; }
.approval-evidence-findings { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.approval-evidence-finding { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 8px; }
.approval-evidence-finding-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.approval-evidence-finding-summary { font-weight: 600; overflow-wrap: anywhere; }
.approval-evidence-finding code { overflow-wrap: anywhere; }
.approval-resolution { flex: none; font-size: var(--st-text-caption); padding-block: 0; }
.approval-resolution[data-resolution="fixed"] { color: var(--st-good); border-color: var(--st-good-border); background: var(--st-good-surface); }
.approval-evidence-checks, .approval-evidence-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.approval-evidence-checks li { display: flex; align-items: flex-start; gap: 8px; }
.approval-evidence-checks li > .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.approval-evidence-checks li[data-result="pass"] > .icon { color: var(--st-good); }
.approval-evidence-checks li[data-result="fail"] > .icon { color: var(--st-bad); }
.approval-evidence-checks code, .approval-evidence-list code { font-size: var(--st-text-caption); overflow-wrap: anywhere; }
.approval-evidence-report { padding: 12px 16px; border: 1px solid var(--st-border); border-radius: 8px; }
/* The shortcut list ("?", components/shortcuts.html). */
/* The kit's z-modal-dialog draws the box and the overlay; this is its size. */
.shortcut-help { width: min(440px, 92vw); padding: 20px 22px; }
.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); }
/* The feedback page (feedback/page.html): the reader's reports on the
   left, the form or one report's thread on the right; one column on a
   narrow screen, the list first. */
.feedback-page { padding-top: 28px; }
.feedback-page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.feedback-page-head h1 { margin: 0; font-size: var(--st-text-title); font-weight: 700; letter-spacing: -.035em; line-height: var(--st-leading-tight); }
.feedback-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 32px; align-items: start; }
.feedback-pane-title { margin: 0 0 10px; font-size: var(--st-text-body); font-weight: 600; }
.feedback-list-pane p { margin: 0; }
.feedback-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.feedback-row + .feedback-row { border-top: 1px solid var(--st-border); }
.feedback-row a { display: grid; gap: 6px; padding: 10px 14px; color: var(--st-text); text-decoration: none; }
.feedback-row a:hover { background: var(--st-surface-hover); }
.feedback-row.is-current a { background: var(--st-muted-fill); }
.feedback-row-summary { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feedback-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.feedback-row-meta .z-label, .feedback-thread-head .z-label { font-size: var(--st-text-caption); padding-block: 0; }
.feedback-main { display: grid; gap: 14px; min-width: 0; }
.feedback-main .z-alert { margin: 0; }
.feedback-main .z-alert p { margin: 0; }
.feedback-off { margin: 0; color: var(--st-muted); }
.feedback-form { display: grid; gap: 10px; }
.feedback-kind { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; border: 0; }
.feedback-kind label { display: inline-flex; align-items: center; gap: 6px; }
.feedback-text-label { font-weight: 600; }
.feedback-form textarea { width: 100%; resize: vertical; }
.feedback-attached { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.feedback-attached code { overflow-wrap: anywhere; }
.feedback-actions { display: flex; justify-content: flex-end; }
.feedback-thread { display: grid; gap: 14px; }
.feedback-thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feedback-text { margin: 0; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-timeline { display: grid; gap: 10px; margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--st-border); }
.feedback-timeline p { margin: 0; }
.feedback-reply { display: grid; gap: 4px; }
.feedback-reply-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-thread > p, .feedback-missing p { margin: 0; }
.feedback-missing h2 { margin: 0 0 6px; font-size: var(--st-text-section); }
@media (max-width: 820px) { .feedback-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
/* The change's size over the panel (files.js fileStats): the PR row's
   colours, monospace digits. */
.files-total { display: inline-flex; gap: 6px; align-items: baseline; color: var(--st-text-secondary, inherit); }
.files-total .add { color: var(--st-color-added); }
.files-total .del { color: var(--st-color-removed); }
.files-total .add, .files-total .del { font-family: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.files-viewed { display: inline-flex; align-items: center; gap: 6px; font-size: var(--st-text-caption); cursor: pointer; }
/* A Markdown file's Source / Preview (files.js filePreviews), in its header
   beside Viewed: two real buttons, the pressed one filled. Preview is the
   file rendered as a description is (.markdown-body), in the file's card. */
.files-head-actions { display: inline-flex; align-items: center; gap: 12px; }
.files-preview-toggle { display: inline-flex; border: 1px solid var(--st-border); border-radius: 6px; overflow: hidden; }
.files-preview-mode { padding: 1px 8px; border: 0; background: transparent; color: var(--st-muted); font: inherit; font-size: var(--st-text-caption); line-height: var(--st-leading-normal); cursor: pointer; }
.files-preview-mode + .files-preview-mode { border-left: 1px solid var(--st-border); }
.files-preview-mode:hover { color: var(--st-text); }
.files-preview-mode[aria-pressed="true"] { background: var(--st-muted-fill); color: var(--st-text); }
.files-preview-mode:focus-visible { outline: 2px solid var(--st-ring); outline-offset: -2px; }
.files-preview-host { padding: 16px 24px; background: var(--st-bg); color: var(--st-text); white-space: normal; font-family: "Source Sans 3", "HarmonyOS Sans SC", ui-sans-serif, system-ui, sans-serif; }
.files-preview-note { margin: 0; }
.files-preview-note a { margin-left: 4px; }
/* A changed file's Show full file (files.js fileSources), in its header:
   one toggle drawn like Source / Preview, pressed while the whole file
   shows; the line beside it says when the file could not be loaded. */
.files-full { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.files-full-toggle { padding: 1px 8px; border: 1px solid var(--st-border); border-radius: 6px; background: transparent; color: var(--st-muted); font: inherit; font-size: var(--st-text-caption); line-height: var(--st-leading-normal); white-space: nowrap; cursor: pointer; }
.files-full-toggle:hover { color: var(--st-text); }
.files-full-toggle[aria-pressed="true"] { background: var(--st-muted-fill); color: var(--st-text); }
.files-full-toggle[aria-busy="true"] { cursor: progress; }
.files-full-toggle:focus-visible { outline: 2px solid var(--st-ring); outline-offset: -2px; }
.files-full-note { font-size: var(--st-text-caption); white-space: normal; }
/* A changed image (files.js fileImages), in its file's card where the lines
   would be: before and after side by side, one under the other when the
   card is narrow; each image on a checkerboard so transparency shows, never
   wider than its column nor taller than a screenful. */
.files-image-host { padding: 16px 24px; background: var(--st-bg); color: var(--st-text); white-space: normal; font-family: "Source Sans 3", "HarmonyOS Sans SC", ui-sans-serif, system-ui, sans-serif; }
.files-image-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: start; }
.files-image { margin: 0; min-width: 0; }
.files-image-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: var(--st-text-caption); }
.files-image-label { font-weight: 600; }
.files-image[data-side="base"] .files-image-label { color: var(--st-diff-removed-text); }
.files-image[data-side="head"] .files-image-label { color: var(--st-diff-added-text); }
.files-image-frame { display: flex; justify-content: center; padding: 8px; border: 1px solid var(--st-border); border-radius: 6px; background: repeating-conic-gradient(var(--st-muted-fill) 0 25%, var(--st-bg) 0 50%) 0 0 / 16px 16px; }
.files-image-frame img { display: block; max-width: 100%; max-height: 60vh; width: auto; height: auto; object-fit: contain; }
.files-image-note { margin: 0; }
.files-image-note a { margin-left: 4px; }

/* ---- 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; }
/* The Terms and Privacy agreement above Login with Raft and on the inside
   consent gate (gates.html "consent-fields"). The checkbox is required; the
   button reads as unavailable until it is ticked. */
.consent-form { display: grid; gap: 12px; text-align: left; }
.consent-form .consent-agree { display: flex; align-items: flex-start; gap: 8px; font-size: var(--st-text-meta); line-height: var(--st-leading-normal); cursor: pointer; }
.consent-agree .z-checkbox { flex: none; margin-top: 2px; }
.consent-agree a { color: var(--st-text); text-decoration: underline; text-underline-offset: 2px; }
.consent-refused p { margin: 0; }
.consent-form:has(.consent-agree input:not(:checked)) .consent-submit { opacity: .5; cursor: not-allowed; }
/* "Step N of 4" above a gate's title (gates.html). */
.auth-step-of { margin: 0 0 -8px; }
.agents-step .app-step-own { color: var(--st-muted); }
.agents-step-prompt { margin: 0; text-align: left; }
.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: var(--st-control); padding: 0 6px 0 10px; border: 1px solid var(--st-border-strong); border-radius: var(--st-radius-control); 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 { display: flex; flex-direction: column; 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-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: "Fira Mono", "HarmonyOS Sans SC", 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-text:has(.search-option-match) { flex-wrap: wrap; row-gap: 2px; }
.search-option-match { flex-basis: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--st-muted); font-size: var(--st-text-caption); line-height: 1.45; overflow-wrap: anywhere; }
.search-option-match-author { color: var(--st-text); }
.search-option-match mark, .search-option-title 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; }
.settings-gate-top { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.app-unavailable p { margin: 0; }
.app-unavailable p + p { margin-top: 4px; }
.app-install-waiting { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.app-install-waiting .icon { color: var(--st-muted); }
.app-sync-progress { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.app-sync-progress .icon { color: var(--st-muted); }
/* The overview's links to the own-App and sharing pages (app-overview). */
.app-own-manage { margin: 16px 0 0; }
.app-choose-action { margin-top: auto !important; padding-top: 4px; }
.app-choose-back { margin: 0 0 8px; }
.app-choose-back a { display: inline-flex; align-items: center; gap: 4px; }
.app-requests { margin-bottom: 16px; }
.app-requests > h2 { margin: 0 0 4px; font-size: var(--st-text-section); }
.app-requests > p { margin: 0 0 8px; }
.app-requests-list { list-style: none; margin: 0; padding: 0; }
.app-requests-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--st-border); }
.app-requests-list li:first-child { border-top: 0; }
.app-request-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.app-member-org { margin-bottom: 16px; }
.app-member-org > h2 { margin: 0 0 6px; font-size: var(--st-text-section); overflow-wrap: anywhere; }
.app-member-org > p { margin: 0 0 8px; }
.member-no-app { flex-wrap: wrap; }
.member-no-app .app-request-ask { margin-top: 6px; flex-basis: 100%; }
.app-request-ask { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.app-request-ask form { margin: 0; }
.app-request-ask p { margin: 0; }
.app-request-asked { display: flex; align-items: flex-start; gap: 6px; }
.app-request-asked .icon { flex: none; margin-top: 3px; color: var(--st-good); }
/* One card per GitHub App of the server (onboarding/app_cards.html): the
   account and App in the head with its state, the next step in the body.
   The first App's card holds its steps and panels, which keep their own
   borders inside it. Each card is a <details>: the head is its summary,
   one line that opens it (the chevron turns when open). */
.org-apps { display: grid; gap: 12px; margin: 0 0 16px; }
.org-app { border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-bg); }
.org-app-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 9px; list-style: none; cursor: pointer; }
.org-app-head::-webkit-details-marker { display: none; }
.org-app-head:hover { background: var(--st-muted-fill); }
.org-app-head:focus-visible { outline: 2px solid var(--st-ring); outline-offset: -2px; }
.org-app[open] > .org-app-head { border-radius: 9px 9px 0 0; margin-bottom: 4px; }
.org-app-name { display: grid; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.org-app-login { font-size: var(--st-text-section); }
.org-app-labels { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.org-app-state { flex: none; }
.org-app-head > .icon-chevron-down { width: 16px; height: 16px; color: var(--st-muted); transition: transform .15s; }
.org-app[open] > .org-app-head > .icon-chevron-down { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .org-app-head > .icon-chevron-down { transition: none; } }
.org-app-link { margin: 0; }
.org-app-body { display: grid; gap: 10px; padding: 0 18px 16px 58px; font-size: var(--st-text-meta); }
.org-app-body p { margin: 0; }
.org-app.is-first .org-app-body { display: block; padding-left: 18px; font-size: var(--st-text-body); }
.org-app.is-first .org-app-body > * + * { margin-top: 16px; }
.org-app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.org-app-sync { margin-top: 10px; }
.org-app-sync p { margin: 0; }
.org-app-actions form { margin: 0; }
.org-app-add { margin: 0 0 24px; }
/* Each card's "Remove from this server": a disclosure at the card's foot,
   its form framed in the danger border. */
.org-app-foot { display: grid; gap: 10px; justify-items: start; padding: 0 18px 16px 58px; font-size: var(--st-text-meta); }
.org-app.is-first .org-app-foot { padding-left: 18px; }
.org-app-remove { justify-self: stretch; }
.org-app-remove > summary { list-style: none; cursor: pointer; }
.org-app-remove > summary::-webkit-details-marker { display: none; }
.org-app-remove-form { display: grid; gap: 8px; justify-items: start; max-width: 36rem; margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--st-bad-border); border-radius: 8px; }
.org-app-remove-form h3 { margin: 0; font-size: var(--st-text-body); }
.org-app-remove-facts { margin: 0; padding-left: 1.2em; }
.org-app-remove-form .z-input { max-width: 20rem; }
.app-add-another > h2 { margin: 0 0 6px; font-size: var(--st-text-section); }
.app-flow-steps { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 12px 0 16px; padding: 0; color: var(--st-muted); }
.app-flow-steps [aria-current="step"] { color: var(--st-text); font-weight: 600; }
/* An organization's App setup handed to a person (ui_app_handoff.go):
   its form, and its card's Withdraw disclosure. */
.app-handoff > h2 { margin: 0 0 6px; font-size: var(--st-text-section); }
.app-handoff-form { display: grid; gap: 6px; justify-items: start; max-width: 36rem; margin: 12px 0; }
.app-handoff-form .z-input { max-width: 20rem; }
.app-handoff-form .z-textarea { width: 100%; }
.app-handoff-form .form-outcome { justify-self: stretch; }
.app-handoff-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.app-handoffs { margin-bottom: 24px; }
.app-handoff-withdraw { justify-self: stretch; }
.app-handoff-withdraw > summary { list-style: none; cursor: pointer; }
.app-handoff-withdraw > summary::-webkit-details-marker { display: none; }
.app-handoff-withdraw form { display: grid; gap: 6px; justify-items: start; max-width: 36rem; margin: 10px 0 0; }
.app-handoff-withdraw .z-textarea { width: 100%; }
@media(max-width:760px) {
  .org-app-head { flex-wrap: wrap; row-gap: 8px; }
  .org-app-labels { order: 1; flex-basis: 100%; justify-content: flex-start; padding-left: 40px; }
  .org-app-body, .org-app-foot { padding-left: 18px; }
}
.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; }
.app-step-form .app-step-help { margin: 6px 0 0; max-width: 460px; }
.app-create-result:not(:empty) { margin-top: 12px; }
.app-allowed-who { display: inline-flex; align-items: center; gap: 8px; }
.app-allowed-who > span { display: grid; }
.app-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; }
.app-create-summary { margin: 0; max-width: 460px; }
/* "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: "Fira Mono", "HarmonyOS Sans SC", 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; }
/* "Manage this App" (Settings > GitHub App): one row per action, its words
   beside its control, the answer under both. Unlinking sits in the danger
   section after it. */
.app-manage { margin-top: 24px; }
.app-manage-panel { display: grid; padding-top: 4px; padding-bottom: 4px; }
.app-manage-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--st-border); }
.app-manage-row:last-child { border-bottom: 0; }
.app-manage-row h3 { margin: 0 0 4px; font-size: var(--st-text-body); font-weight: 600; }
.app-manage-row p { margin: 0; }
.app-manage-row > details, .app-manage-row > .app-manage-result { grid-column: 1 / -1; }
.app-manage-row .app-existing { margin-top: 0; padding-top: 0; border-top: 0; }
.app-manage-result { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.app-manage-result svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.app-manage-result.is-ok { color: var(--st-good); }
.app-manage-result.is-bad { color: var(--st-bad); }
.app-unlink { margin-top: 24px; }
.app-unlink .settings-danger-panel { align-items: flex-end; flex-wrap: wrap; }
.app-unlink .app-manage-text { flex: 1 1 320px; display: grid; gap: 8px; }
.app-unlink-form { display: grid; gap: 8px; justify-items: 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: "Source Sans 3", "HarmonyOS Sans SC", 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: "Source Sans 3", "HarmonyOS Sans SC", 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 { display: inline-flex; align-items: center; gap: 12px; }
.rv-bar[hidden] { display: none; }
.rv-bar-count { color: var(--st-muted); white-space: nowrap; }
.rv-bar-count:empty { display: none; }
.rv-bar-done { margin: 0; color: var(--st-muted); }
.rv-review.z-open { display: grid; }
.rv-review { 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; 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 0 8px 8px; 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 .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); }
/* GitHub's label first (what its settings page shows), the raw event name after it in small type. */
.app-health-raw { margin-left: 4px; color: var(--st-muted); font-size: var(--st-text-caption); font-weight: 400; }
.app-health-good { color: var(--st-good); }
.app-health-bad { color: var(--st-bad); font-weight: 600; }
.app-health-good, .app-health-bad, .app-health-short { display: inline-flex; align-items: center; gap: 4px; }
.app-health-good svg, .app-health-bad svg, .app-health-short svg { width: 14px; height: 14px; }
/* Above the required level but below the recommended one: healthy, so grey, not red. */
.app-health-short { color: var(--st-muted); }
.app-health-short-note { display: block; margin-top: 2px; }
.app-health-tag { margin-left: 4px; padding: 0 6px; border: 1px solid var(--st-border); border-radius: 999px; color: var(--st-muted); font-size: var(--st-text-caption); }
.app-health-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* "Let Stamp set the webhook" (a database-held App): the confirmation above its button, under the verdict. */
.app-health-set-webhook { display: grid; justify-items: start; gap: 8px; margin: 12px 0; }
.app-health-set-webhook .app-existing-replace { align-items: flex-start; }
.app-health-set-webhook .app-existing-replace input { margin-top: 3px; }

/* 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: the kit's z-toggle-switch (a checkbox, role="switch"); only its
   label is ours. */
.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; }
/* A kit checkbox or radio inside its label keeps a gap before the words
   (artin 10-02). :where gives the default no weight, so a page's own label
   rule (.spike-check, .st-choice, .appearance-options) still decides. */
:where(label:has(> .z-checkbox, > .z-radio)) { display: inline-flex; align-items: center; gap: 8px; }
/* Radio group: the options on one line, apart enough to tell which label
   belongs to which circle. */
.st-radio-group { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; border: 0; min-width: 0; }
.st-radio-group > legend { width: 100%; margin-bottom: 8px; padding: 0; font-weight: 600; }
/* 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-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; }

/* Stamp Design's overlays (task #777; web/design/components/). */
/* Hover card: the kit's z-drop in hover mode opens and places it; this is
   only its look. */
.st-hovercard { width: 260px; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 10px; background: var(--st-surface-raised); color: var(--st-text); box-shadow: var(--st-shadow-popover); text-align: left; pointer-events: auto; }
.st-hovercard-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; }
.st-hovercard p { margin: 0; color: var(--st-muted); font-size: var(--st-text-meta); }
.st-reltime { border-bottom: 1px dotted var(--st-muted); cursor: help; }
.st-hovercard dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: var(--st-text-meta); }
.st-hovercard dt { color: var(--st-muted); }
.st-hovercard dd { margin: 0; font-variant-numeric: tabular-nums; }
/* Drawer: the kit's z-offcanvas bar has no padding of its own; a head with
   the title and the close button, and a body, give it room. */
.z-offcanvas-bar > .st-dialog-head, .z-offcanvas-bar > .st-dialog-body { padding: 14px 16px; }
.z-offcanvas-bar > .st-dialog-head { border-bottom: 1px solid var(--st-border); }
.st-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-dialog-head h2 { margin: 0; font-size: var(--st-text-section); }
.st-danger-button:disabled { opacity: .45; cursor: not-allowed; }
/* Context menu: the kit's z-dropdown, shown as a popover at the pointer. */
.st-context-area { padding: 24px; border: 1px dashed var(--st-border-strong); border-radius: 8px; color: var(--st-muted); text-align: center; user-select: none; }
.z-drop[popover] { position: fixed; margin: 0; inset: auto; padding: 4px; }
.markdown-body ul.z-dropdown-nav { list-style: none; margin: 0; padding: 0; }
.markdown-body .z-dropdown-nav li { margin: 0; }
.z-dropdown-nav button { padding: 6px 10px; border-radius: 6px; }
.z-dropdown-nav button:hover, .z-dropdown-nav button:focus-visible { background: var(--st-surface-hover); }
.z-drop[popover]:popover-open { display: block; }
.z-dropdown-nav button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.z-dropdown-nav svg { width: 14px; height: 14px; }
/* File tree: folders are <details>, files are links. */
.st-filetree, .st-filetree ul { list-style: none; margin: 0; padding: 0; }
.st-filetree ul { padding-left: 16px; }
.st-filetree summary, .st-filetree a { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 6px; color: var(--st-text); font-size: var(--st-text-meta); text-decoration: none; cursor: pointer; }
.st-filetree summary:hover, .st-filetree a:hover { background: var(--st-surface-hover); }
.st-filetree a[aria-current] { background: var(--st-muted-fill); font-weight: 600; }
.st-filetree svg { width: 14px; height: 14px; color: var(--st-muted); flex: none; }
.markdown-body ul.st-filetree, .markdown-body .st-filetree ul { list-style: none; padding-left: 0; }
.markdown-body .st-filetree ul { padding-left: 16px; }
.markdown-body .st-filetree li { margin: 0; }

/* Stamp Design's display components (task #778). The kit's where it has
   one (z-accordion, z-progress, z-pagination, z-button-group, z-card,
   z-alert, z-hr, z-divider); Stamp's own below, on tokens. */
/* Collapse: the kit's accordion on <details>, so it opens without script. */
details > .z-accordion-title { list-style: none; cursor: pointer; }
details > .z-accordion-title::-webkit-details-marker { display: none; }
details[open] > .z-accordion-title > .z-accordion-icon { transform: rotate(180deg); }
.markdown-body ul.z-accordion { list-style: none; padding-left: 0; }
.markdown-body .z-accordion li { margin: 0; }
.markdown-body ul.z-pagination { list-style: none; padding-left: 0; }
.markdown-body .z-pagination li { margin: 0; }
/* Show more: a long block cut to a few lines until asked for. */
.st-show-more-body { max-height: 6.5em; overflow: hidden; mask-image: linear-gradient(to bottom, black 60%, transparent); }
[data-show-more][data-open] .st-show-more-body { max-height: none; mask-image: none; }
/* Snippet and text with a copy button. */
.st-snippet { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-muted-fill-half); font-family: "Fira Mono", "HarmonyOS Sans SC", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-meta); }
.st-snippet code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: none; padding: 0; }
.st-snippet code::before { content: "$ "; color: var(--st-muted); }
.st-copy-text { display: inline-flex; align-items: center; gap: 4px; }
.st-copy-text .z-button { padding: 2px 4px; }
/* Middle truncate: the whole name is the title; the element keeps one line. */
.st-middle { white-space: nowrap; }
/* Entity: one thing (a person, a repository) as a row: picture, name,
   what it is, and its actions at the end. */
.st-entity { display: flex; align-items: center; gap: 12px; }
.st-entity-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.st-entity-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-entity-text span { color: var(--st-muted); font-size: var(--st-text-meta); }
/* Description: facts as term and value, with an optional help line. */
.st-description { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.st-description dt { color: var(--st-muted); }
.st-description dd { margin: 0; }
/* Gauge: a share of a whole, as a ring (--value is 0 to 100). */
.st-gauge { --value: 0; position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--st-accent-strong) calc(var(--value) * 1%), var(--st-muted-fill) 0); font-size: var(--st-text-caption); font-weight: 600; }
.st-gauge::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--st-surface); }
.st-gauge > span { position: relative; }
.st-gauge.is-warn { background: conic-gradient(var(--st-warn) calc(var(--value) * 1%), var(--st-muted-fill) 0); }
.st-gauge.is-bad { background: conic-gradient(var(--st-bad) calc(var(--value) * 1%), var(--st-muted-fill) 0); }
/* Split button: the kit's button group; its menu is a popover under it. */
.z-drop.st-split-menu[popover] { position: fixed; inset: auto; margin: 4px 0 0; padding: 4px; top: anchor(bottom); left: anchor(left); }
/* Error card: the kit's z-card, edged in the failure colour; the words stay
   on the card's own background so the code and the request id read. */
.st-error-card { border-color: var(--st-bad-border); }
.st-error-card .z-card-title { color: var(--st-bad); }
/* Feedback: a question, three answers, room for a word. */
.st-feedback { display: grid; gap: 8px; max-width: 420px; }
.st-feedback-answers { display: flex; gap: 6px; }
/* JSON view: objects and arrays are <details>, values keep their type's colour. */
.st-json { margin: 0; padding: 0; list-style: none; font-family: "Fira Mono", "HarmonyOS Sans SC", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-meta); }
.st-json ul { margin: 0; padding-left: 16px; list-style: none; }
.markdown-body ul.st-json, .markdown-body .st-json ul { list-style: none; }
.markdown-body .st-json li { margin: 0; }
.st-json summary { cursor: pointer; }
.st-json .k { color: var(--st-text); }
.st-json .s { color: var(--st-good); }
.st-json .n { color: var(--st-warn); }
.st-json .b { color: var(--st-bad); }
.st-json .m { color: var(--st-muted); }
/* Scroller: a row wider than the page, scrolled sideways, its hidden ends
   fading. */
.st-scroller { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.st-scroller > * { flex: none; }

/* Stamp Design's calendar is the kit's z-cal; undo the docs' table look. */
.markdown-body .z-cal table { margin: 0; border: 0; }
.markdown-body .z-cal th, .markdown-body .z-cal td { border: 0; padding: 0; }

/* Stamp Design's icon page: every icon with its name. */
.markdown-body ul.st-icon-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; width: 100%; }
.markdown-body .st-icon-grid li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 6px; }
.markdown-body .st-icon-grid li:hover { background: var(--st-surface-hover); }
.st-icon-cell { display: inline-flex; width: 20px; height: 20px; }
.st-icon-cell svg { width: 20px; height: 20px; }
.markdown-body .st-icon-grid code { background: none; padding: 0; font-size: var(--st-text-caption); }
.design-example-demo > .st-icon-grid { flex: 1 1 100%; }

/* The upstream request page (upstream/page.html): who asks as whom, the
   facts, the decision, then what would be sent and its diff. */
.upstream-page { max-width: 1100px; display: grid; gap: 16px; padding-top: 24px; }
.upstream-ask { display: flex; align-items: center; gap: 10px; margin: 0; }
.upstream-title { margin: 8px 0 12px; font-size: var(--st-text-title); line-height: var(--st-leading-tight); }
.upstream-facts code { font-size: var(--st-text-meta); }
.upstream-decide { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
/* The lines about the diff sit on their own row above the buttons. */
.upstream-gate { flex-basis: 100%; margin: 0; }
p.upstream-gate, .upstream-gate p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.upstream-gate svg { width: 14px; height: 14px; flex: none; }
.upstream-gate[hidden] { display: none; }
.upstream-sha { padding: 0 2px; border: 0; border-radius: 4px; background: none; color: inherit; font: inherit; font-family: "Fira Mono", "HarmonyOS Sans SC", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--st-text-meta); cursor: copy; }
.upstream-sha:hover { background: var(--st-surface-hover); }
.upstream-decline summary { list-style: none; }
.upstream-decline summary::-webkit-details-marker { display: none; }
.upstream-decline form { display: grid; gap: 6px; margin-top: 8px; min-width: 320px; }
.upstream-outside { display: flex; align-items: center; gap: 6px; margin: 0; }
.upstream-outside svg { width: 14px; height: 14px; flex: none; }
.upstream-body { padding: 16px; border: 1px solid var(--st-border); border-radius: 8px; }
.upstream-body h2 { margin: 0 0 8px; font-size: var(--st-text-section); }
.upstream-missing { padding: 48px 0; text-align: center; }
/* A permission request (requests/page.html), drawn as a ticket: the ask
   and its status on top, the main column (decision, note, workflow,
   activity) beside the facts. One column below 900px. */
.request-page { max-width: 1100px; display: grid; gap: 20px; padding-top: 24px; }
.request-head { display: grid; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--st-border); }
.request-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--st-muted); }
.request-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--st-muted); }
.request-crumbs a { color: var(--st-muted); text-decoration: none; }
.request-crumbs a:hover { color: var(--st-text); text-decoration: underline; text-underline-offset: 3px; }
.request-crumbs li[aria-current="page"] { color: var(--st-text); overflow-wrap: anywhere; }
.request-ask { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--st-text-title); line-height: var(--st-leading-tight); font-weight: 600; }
.request-ask > span { min-width: 0; overflow-wrap: anywhere; }
.request-ask code { font-size: .9em; }
.request-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.request-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .request-layout { grid-template-columns: minmax(0, 1fr); } }
.request-main { display: grid; gap: 24px; min-width: 0; }
.request-main > .z-alert p, .request-grant p { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.request-grant-revoke { margin-top: 10px; }
.request-main > .z-alert .icon { flex: none; margin-top: 3px; }
.request-block h2, .request-decide h2 { margin: 0 0 10px; font-size: var(--st-text-section); }
/* The approve form's fields lay out in the card's own grid (display:
   contents), so Approve and Decline share the last row. */
.request-decide .z-card-body { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 10px; }
.request-decide .z-card-body > *, .request-approve > * { grid-column: 1 / -1; }
.request-decide p { margin: 0; }
.request-decide-facts { margin: 0 0 4px; }
.request-app-setup-permissions { display: grid; gap: 2px; }
.request-app-setup-refused { margin-bottom: 12px; }
.request-approve { display: contents; }
.request-days-row { display: flex; align-items: center; gap: 8px; }
.request-actions, .request-scope { display: grid; gap: 6px; margin: 0 0 4px; padding: 0; border: 0; }
.request-action-choice, .request-scope-choice { display: flex; align-items: baseline; gap: 8px; }
.request-days { max-width: 220px; }
.request-decide .request-approve-button { grid-column: 1; margin-top: 6px; }
.request-decide .request-decline { grid-column: 2; margin-top: 6px; }
.request-decline summary, .request-close summary, .request-transfer summary { list-style: none; }
.request-decline summary::-webkit-details-marker, .request-close summary::-webkit-details-marker, .request-transfer summary::-webkit-details-marker { display: none; }
.request-decline form, .request-close form, .request-transfer form { display: grid; justify-items: start; gap: 6px; margin-top: 8px; max-width: 420px; }
.request-decline textarea, .request-close textarea, .request-transfer textarea, .request-transfer input { width: 100%; }
/* Hand over (artin 10-08): a quiet line under the decision, its form opening
   in place; the approver's other way out, not a third primary action. */
.request-transfer > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.request-transfer-action { display: inline-flex; align-items: center; gap: 4px; color: var(--st-accent-strong); }
.request-transfer > summary:hover .request-transfer-action { text-decoration: underline; }
.request-transfer[open] > summary { margin-bottom: 2px; }
.request-transfer form { padding: 12px; border: 1px solid var(--st-border); border-radius: 8px; }
.request-transfer form .z-form-label { margin-top: 4px; }
.request-as-identity { display: block; margin-top: 2px; color: var(--st-muted); }
.request-quote { display: flex; align-items: flex-start; gap: 10px; }
.request-note, .request-reason { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.request-quote .request-note { flex: 1; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); }
.request-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.request-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.request-step .icon { flex: none; color: var(--st-muted); background: var(--st-bg, transparent); }
/* the line that joins the marks */
.request-step:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 28px; bottom: -8px; width: 1px; background: var(--st-border); }
.request-step-label { flex: 1; min-width: 0; }
.request-step-state { color: var(--st-muted); }
/* A pending act_as request's install step: the App's install page, under
   the step's label. */
.request-step:has(.request-step-install) { flex-wrap: wrap; }
.request-step-install { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 0 26px; }
.request-main > .z-alert .request-install-link { margin-top: 8px; }
.request-step[data-step-state="done"] .icon { color: var(--st-good); }
.request-step[data-step-state="done"] .request-step-label,
.request-step[data-step-state="skipped"] .request-step-label,
.request-step[data-step-state="todo"] .request-step-label,
.request-step[data-step-state="conditional"] .request-step-label { color: var(--st-muted); }
.request-step[aria-current="step"] .request-step-label { color: var(--st-text); font-weight: 600; }
.request-step[data-step-state="current"] .icon, .request-step[data-step-state="current"] .request-step-state { color: var(--st-accent-strong); }
.request-step[data-step-state="stopped"] .icon, .request-step[data-step-state="stopped"] .request-step-state { color: var(--st-bad); }
.request-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.request-activity li { display: flex; align-items: flex-start; gap: 10px; }
.request-activity li > div { display: grid; gap: 4px; min-width: 0; }
.request-activity p { margin: 0; }
.request-activity .request-reason { color: var(--st-muted); }
.request-activity-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; color: var(--st-muted); }
.request-side { display: grid; gap: 16px; padding-left: 24px; border-left: 1px solid var(--st-border); }
@media (max-width: 900px) { .request-side { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--st-border); } }
.request-facts { grid-template-columns: 1fr; margin: 0; }
.request-facts dt { margin-top: 8px; }
.request-facts dt:first-child { margin-top: 0; }
.request-facts dd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.request-missing { padding: 48px 0; text-align: center; }

/* The permission request list (requests/list.html): two tabs (waiting for
   me, sent by me), a pending/all filter, one row per request. */
.request-list-page { max-width: 960px; display: grid; gap: 16px; padding-top: 24px; }
.request-list-head h1 { margin: 0 0 4px; font-size: var(--st-text-title); }
.request-list-head p { margin: 0; }
.request-list-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--st-border); }
.request-list-tabs { display: flex; gap: 4px; }
.request-list-tabs a { padding: 8px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--st-muted); text-decoration: none; font-weight: 500; }
.request-list-tabs a:hover { color: var(--st-text); }
.request-list-tabs a[aria-current="page"] { color: var(--st-text); border-bottom-color: var(--st-accent-strong); font-weight: 600; }
.request-list-filter { display: flex; gap: 4px; padding-bottom: 6px; }
.request-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.request-row + .request-row { border-top: 1px solid var(--st-border); }
.request-row-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: inherit; text-decoration: none; }
.request-row-link:hover { background: var(--st-surface-hover); }
.request-row-link > .icon { flex: none; color: var(--st-muted); }
.request-row-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.request-row-ask { overflow-wrap: anywhere; }
.request-row-elsewhere { margin: 0; padding: 0 14px 12px; }
.request-list-more { margin: 0; text-align: center; }
.request-list-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; border: 1px dashed var(--st-border); border-radius: 8px; text-align: center; }
.request-list-empty > .icon { width: 24px; height: 24px; color: var(--st-muted); }
.request-list-empty p { margin: 0; }

/* Settings › Access grants (requests/access.html): one card per grant. */
.access-page { display: grid; align-content: start; gap: 24px; }
.access-page .settings-title, .access-page .settings-intro { margin-bottom: 0; }
.access-page .settings-intro { margin-top: -14px; }
.access-section h2 { margin: 0 0 10px; font-size: var(--st-text-section); }
.access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.access-grant { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--st-border); border-radius: 8px; }
.access-grant[data-grant-state="expired"], .access-grant[data-grant-state="revoked"] { background: var(--st-surface); }
.access-grant-head { display: flex; align-items: center; gap: 10px; }
.access-grant-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.access-grant-facts { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(90px, 1fr)); gap: 8px 16px; margin: 0; }
@media (max-width: 760px) { .access-grant-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.access-grant-facts div { display: grid; gap: 2px; }
.access-grant-facts dt { color: var(--st-muted); font-size: var(--st-text-meta); }
.access-grant-facts dd { margin: 0; }
.access-grant-actions { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.access-revoke summary { list-style: none; }
.access-revoke summary::-webkit-details-marker { display: none; }
.access-revoke[open] { flex-basis: 100%; display: grid; justify-items: end; gap: 8px; }
.access-revoke form { display: grid; justify-items: start; gap: 10px; padding: 12px; border: 1px solid var(--st-bad-border); border-radius: 8px; }
.access-empty { padding: 24px 16px; border: 1px dashed var(--st-border); border-radius: 8px; }
.access-empty p { margin: 0 0 4px; }

/* 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: "Fira Mono", "HarmonyOS Sans SC", 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) ---- */
/* The state buttons sit with Comment at the right; the hint takes the rest. */
.pr-composer .comment-submit > .muted { margin-right: auto; }
.pr-composer .comment-submit { gap: 8px; }
.pr-state-buttons { display: contents; }
/* A phone (artin 10-14: Comment was cut off past the right edge): no
   keyboard, so no shortcut hint; the buttons wrap, Comment at the end of
   the last row. */
.comment-submit { flex-wrap: wrap; }
@media (max-width: 640px), (pointer: coarse) {
  .comment-submit > .muted:first-child { display: none; }
  .pr-composer .comment-submit { justify-content: flex-end; }
}

/* ---- 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); }
/* An open pull request's auto-merge (ui_auto_merge.go): one quiet line under the verdict; the words wrap, the chip and name stay together. */
.pr-auto-merge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 8px 0 0; }
.pr-auto-merge > .icon { width: 14px; height: 14px; }
.pr-auto-merge strong { color: var(--st-text); }
.pr-auto-merge[data-auto-merge="VOID"], .pr-auto-merge[data-auto-merge="EXPIRED"], .pr-auto-merge[data-auto-merge="QUEUE_REFUSED"], .pr-auto-merge[data-auto-merge-skip] { color: var(--st-warn); }
.pr-auto-merge-pin code { font-size: var(--st-text-caption); }

/* ---- 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: "Fira Mono", "HarmonyOS Sans SC", 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: "Fira Mono", "HarmonyOS Sans SC", 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, .insights-views { display: flex; gap: 4px; }
.insights-views { margin: 0 0 12px; }
.issues-states a, .insights-views 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, .insights-views 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); } }

/* An App attempt left cleanup_pending (onboarding/app.html): the warning
   and its mark side by side. */
.app-cleanup-pending p { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.app-cleanup-pending .icon { flex: none; margin-top: 3px; }

/* A human's gate: switch server or sign out (session/gates.html
   "auth-switch"), below the card's one action. */
.auth-switch { display: grid; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--st-border); }
.auth-switch h2 { margin: 0; color: var(--st-muted); font-size: var(--st-text-meta); font-weight: 500; }
.auth-switch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.auth-switch-list form { margin: 0; }
.auth-switch-server { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--st-border); border-radius: 8px; background: none; color: var(--st-text); font: inherit; text-align: left; cursor: pointer; }
.auth-switch-server:hover { background: var(--st-surface-hover); }
.auth-switch-server > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.auth-switch-server > .icon { flex: none; color: var(--st-muted); }
.auth-switch-signout { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
.auth-switch-signout form { margin: 0; }
.auth-who { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.settings-gate-switch { max-width: 400px; margin-top: 32px; }
/* A sign-out that did not complete (app.js StampSignout). */
.signout-error { margin: 6px 0 0; color: var(--st-bad); }
.account-menu .signout-error { padding: 0 12px 8px; }

/* Settings › GitHub App, the owner choice (onboarding/app.html
   "app-owner-picker"; onboarding-per-org 01-03, 02-02): the form's first
   field. An account the server already has an App for is done, not a
   choice; "Another organization" holds its own field, and an organization
   the person is not seen to own says so, with the hand-off beside going on. */
.app-owner-picker.st-choicebox { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin: 0 0 20px; }
.app-step-form .app-owner-picker label.st-choice { display: flex; align-items: flex-start; }
.app-owner-picker .app-owner-reason, .app-owner-picker .app-owner-tools, .app-owner-picker .app-owner-loading { grid-column: 1 / -1; }
.app-owner-picker .st-choice.is-done { cursor: default; }
.app-owner-picker .st-choice.is-done:hover { background: none; }
.app-owner-picker .st-choice.is-done:has(input:disabled) { opacity: 1; }
.app-owner-done { display: inline-flex; align-items: center; gap: 4px; color: var(--st-good); }
.app-owner-done .icon { width: 14px; height: 14px; }
.app-owner-other-input { margin-top: 6px; max-width: 320px; }
.app-owner-unsure { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: start; margin: 0; }
.app-owner-unsure[hidden] { display: none; }
.app-owner-unsure p { margin: 0; }
.app-owner-unsure-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-owner-reason, .app-owner-tools { margin: 4px 0 0; }
.app-owner-reload { display: inline-flex; align-items: center; gap: 4px; }
/* Create for an account that already has its App here (onboarding-per-org
   06-01): the panel names it and leads to its card. */
.app-owner-has-app p { margin: 0 0 8px; }
.app-owner-has-app p:last-child { margin-bottom: 0; }
.app-owner-transfer p { margin: 0 0 6px; }
.app-owner-transfer p:last-child { margin-bottom: 0; }
.app-restart { margin-top: 12px; }
.app-restart summary { list-style: none; color: var(--st-muted); }
.app-restart summary::-webkit-details-marker { display: none; }
.app-restart form { display: grid; justify-items: start; gap: 10px; margin-top: 8px; padding: 12px; border: 1px solid var(--st-bad-border); border-radius: 8px; }

/* The server's Repositories (repositories/page.html): owners, each with its
   repositories as rows. */
.repositories-page { max-width: 880px; display: grid; gap: 20px; padding-top: 24px; }
.repositories-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.repositories-head h1 { margin: 0 0 4px; font-size: var(--st-text-title); }
.repositories-head p { margin: 0; }
.repositories-owner h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--st-text-section); }
.repositories-owner h2 a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.repositories-owner h2 a:hover span { text-decoration: underline; }
.repositories-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--st-border); border-radius: 8px; overflow: hidden; }
.repositories-list li + li { border-top: 1px solid var(--st-border); }
.repositories-list a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: inherit; text-decoration: none; }
.repositories-list a:hover { background: var(--st-surface-hover); }
.repositories-list a > span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 500; }
.repositories-list a > .icon { flex: none; color: var(--st-muted); }
.repositories-empty { display: grid; justify-items: center; gap: 6px; padding: 48px 16px; border: 1px dashed var(--st-border); border-radius: 8px; text-align: center; }
.repositories-empty > .icon { width: 24px; height: 24px; color: var(--st-muted); }
.repositories-empty p { margin: 0; }

/* Settings › Appearance (artin 10-08, as GitHub's): one card per theme with
   a preview of its page; the chosen card outlined. Applied at once by
   app.js StampAppearance. */
.appearance-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; margin: 0; padding: 0; border: 0; }
@media (max-width: 560px) { .appearance-themes { grid-template-columns: minmax(0, 1fr); } }
.appearance-theme { display: grid; gap: 8px; padding: 8px; border: 1px solid var(--st-border); border-radius: 10px; cursor: pointer; }
.appearance-theme:has(input:checked) { border-color: var(--st-accent-strong); box-shadow: 0 0 0 1px var(--st-accent-strong); }
.appearance-theme:has(input:focus-visible) { outline: 2px solid var(--st-ring); outline-offset: 2px; }
.appearance-theme-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.appearance-theme-name input { margin: 0; }
.theme-preview { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; height: 84px; border: 1px solid var(--st-border); border-radius: 6px; }
.theme-preview-half { display: grid; align-content: start; gap: 6px; padding: 10px; background: var(--swatch-bg); }
.theme-preview-half > i { display: block; height: 6px; border-radius: 3px; background: var(--swatch-line); }
.theme-preview-half > i:first-child { width: 60%; background: var(--swatch-text); }
.theme-preview-half > i.action { width: 40%; height: 10px; margin-top: 4px; background: var(--swatch-action); }
.theme-preview-half > b { display: block; height: 18px; border-radius: 4px; background: var(--swatch-surface); border: 1px solid var(--swatch-line); }
.appearance-help { margin: 8px 0 0; }
/* Delivery metrics (delivery/index.html): headline tiles, then one small
   chart per metric; tables behind "Table view". Marks are thin, the grid
   recessive, text in text colours (never the series colour). */
.delivery-scope { display: grid; gap: 16px; margin-top: 16px; }
.delivery-compare { margin: 0; }
.delivery-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.delivery-tile { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--st-border); border-radius: 8px; }
.delivery-tile-label { color: var(--st-muted); font-size: var(--st-text-meta); }
.delivery-tile-value { font-size: var(--st-text-title); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.delivery-tile[data-empty] .delivery-tile-value { color: var(--st-muted); font-size: var(--st-text-body); font-weight: 500; }
.delivery-delta { font-variant-numeric: tabular-nums; color: var(--st-text); }
.delivery-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.delivery-chart { margin: 0; padding: 12px 14px 6px; border: 1px solid var(--st-border); border-radius: 8px; }
.delivery-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 4px; font-weight: 600; font-size: var(--st-text-meta); }
.delivery-legend { display: inline-flex; gap: 12px; font-weight: 400; color: var(--st-muted); }
.delivery-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.delivery-legend-item i { display: inline-block; width: 12px; height: 2px; border-radius: 1px; background: var(--st-chart-1); }
.delivery-legend-item[data-slot="2"] i { background: var(--st-chart-2); }
.delivery-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.delivery-chart text { fill: var(--st-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.delivery-grid line { stroke: var(--st-border); stroke-width: 1; }
.delivery-adopted-marker line { stroke: var(--st-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.delivery-adopted-marker text { fill: var(--st-text); font-weight: 600; }
.delivery-series { --series: var(--st-chart-1); }
.delivery-series[data-slot="2"] { --series: var(--st-chart-2); }
.delivery-bar { fill: var(--series); }
.delivery-bar.is-partial { fill: none; stroke: var(--series); stroke-width: 1.5; stroke-dasharray: 3 2; }
/* A week some repository's history has not been backfilled to: faded, so
   its low count does not read as a real dip (the note under the chart). */
.delivery-bar[data-incomplete]:not(.is-partial) { fill-opacity: .35; }
.delivery-point[data-incomplete] .delivery-dot { opacity: .35; }
.delivery-incomplete-note { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; }
.delivery-incomplete-note i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--st-chart-1); opacity: .35; }
.delivery-line { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.delivery-dot { fill: var(--series); stroke: var(--st-bg); stroke-width: 2; }
.delivery-point.is-partial .delivery-dot { fill: var(--st-bg); stroke: var(--series); stroke-width: 1.5; }
.delivery-hit { fill: transparent; }
.delivery-point:hover .delivery-dot { r: 4.5; }
.delivery-bar:hover { opacity: .8; }
.delivery-end-label { fill: var(--st-text) !important; font-weight: 600; }
.delivery-chart-empty { margin: 24px 0; text-align: center; }
.delivery-tables > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--st-muted); }
.delivery-tables > summary::-webkit-details-marker { display: none; }
.delivery-tables[open] > summary { margin-bottom: 8px; }
.delivery-repos-heading { margin: 32px 0 0; font-size: var(--st-text-section); }
.delivery-repo { border-top: 1px solid var(--st-border); padding: 10px 0; }
@media (max-width: 760px) { .delivery-charts { grid-template-columns: 1fr; } }
.delivery-repo > summary { display: flex; align-items: baseline; gap: 12px; cursor: pointer; font-weight: 600; }

/* Another server's agent (artin 10-10): its name, then where it is from. */
.principal-server { margin-left: 4px; font-weight: 500; vertical-align: 1px; }

/* A form's own outcome sits inside it, above its button (artin 10-10). */
.settings-panel .review-outcome { margin: 4px 0 8px; }

/* Stamp review requests in the PR sidebar (artin 10-10). */
.pr-review-request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pr-review-request { display: flex; align-items: center; gap: 8px; }
.pr-review-request-who { display: grid; flex: 1; min-width: 0; line-height: var(--st-leading-tight); }
.pr-review-request-state { flex: none; }
/* Settings › Federation (ui_federation.go): sections of rows in one panel
   each (members, waiting requests, history), the create and join forms, and
   Leave as a danger disclosure that waits for the federation's name. */
.federation-page > .z-alert { margin: 0 0 24px; }
.federation-page .z-alert p { margin: 0; }
.federation-stale { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.federation-stale form { margin: 0; }
.federation-empty p, .federation-head p { margin: 0; }
.federation-empty, .federation-head { display: grid; gap: 6px; }
.federation-name { margin: 0; font-size: var(--st-text-section); overflow-wrap: anywhere; }
.federation-id { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.federation-id code { overflow-wrap: anywhere; }
.federation-list { list-style: none; margin: 0; padding-top: 4px; padding-bottom: 4px; }
.federation-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.federation-row + .federation-row { border-top: 1px solid var(--st-border); }
.federation-row-main { display: grid; gap: 4px; min-width: 0; }
.federation-row-main p { margin: 0; overflow-wrap: anywhere; }
.federation-row > .z-button { flex: none; }
.federation-who { display: flex; align-items: center; gap: 6px; }
.federation-empty-line { margin: 0; }
.federation-form { display: grid; gap: 8px; max-width: 520px; }
.federation-form .z-form-label { margin-top: 4px; }
.federation-form .form-outcome { margin: 0 0 4px; }
.federation-consequence { margin: 4px 0; padding: 10px 12px; border: 1px solid var(--st-border); border-radius: 8px; background: var(--st-surface); color: var(--st-text); }
.federation-readonly { margin: 0; }
.federation-leave > summary { list-style: none; cursor: pointer; display: inline-flex; }
.federation-leave > summary::-webkit-details-marker { display: none; }
.federation-leave-form { display: grid; gap: 8px; justify-items: start; max-width: 36rem; margin: 10px 0 0; padding: 14px 16px; border: 1px solid var(--st-bad-border); border-radius: 8px; }
.federation-leave-form h3 { margin: 0; font-size: var(--st-text-body); }
.federation-leave-facts { margin: 0; padding-left: 1.2em; list-style: disc; }
.federation-leave-form .z-input { max-width: 20rem; }
.settings-danger .form-outcome { margin: 0 0 10px; }
@media (max-width: 760px) { .federation-row { align-items: flex-start; flex-direction: column; gap: 8px; } }
/* A narrow screen's settings sections are one row: it scrolls sideways
   rather than widening the page. */
/* The conversation's check counts open the checks page (artin 10-14). */
a.check-count { color: inherit; text-decoration: none; cursor: pointer; }
a.check-count:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Pending approvals (components/pending_badge.html): the topbar badge, the
   switcher's per-server counts, the rail's Requests entry, and the list's
   lines for servers outside the federation. */
.topbar-pending { position: relative; padding-inline: 8px; }
.topbar-pending-count { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--st-bad); color: var(--st-accent-strong-f); font-size: var(--st-text-caption); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.account-switcher-pending, .rail-pending { margin-left: auto; background: var(--st-bad); border-color: var(--st-bad); color: var(--st-accent-strong-f); font-size: var(--st-text-caption); font-variant-numeric: tabular-nums; }
/* A federation list's row: the link across, then its server and the in-place
   decision under it. */
.request-row { display: flex; flex-wrap: wrap; align-items: center; }
.request-row > .request-row-link, .request-row > .request-row-elsewhere { flex: 1 0 100%; }
.request-row-server { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px 14px; padding: 1px 8px; border: 1px solid var(--st-border); border-radius: 999px; }
.request-row-actions { display: flex; gap: 6px; margin: 0 14px 12px auto; }
.request-elsewhere { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.request-elsewhere a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px dashed var(--st-border); border-radius: 8px; color: var(--st-text); text-decoration: none; }
.request-elsewhere a:hover { background: var(--st-surface-hover); }
/* Copy a file's path, next to its name in the Files panel. */
.files-copy-path { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 0; background: transparent; color: var(--st-muted); }
.files-copy-path svg { width: 14px; height: 14px; }
.files-copy-path:hover { color: var(--st-text); }
/* A server_app request's decide card (requests/server_app_fix.html): the App
   and whose it is, the one missing step, Check again. */
.server-app-fix-app { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.server-app-fix-avatar { border-radius: 6px; }
.server-app-fix-step { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--st-border); border-radius: 8px; }
.server-app-fix-step h3 { margin: 0 0 4px; font-size: var(--st-text-body); }
.server-app-fix-step p { margin: 0 0 8px; }
.server-app-fix-step p:last-child { margin-bottom: 0; }
.server-app-fix-covered { display: flex; align-items: center; gap: 8px; color: var(--st-good); }
.server-app-fix-recheck { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }

/* The footer of every authed page (components/site_footer.html): one
   muted line under the page, wrapping on a narrow screen. */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 48px; padding: 20px 0 0; border-top: 1px solid var(--st-border); color: var(--st-muted); font-size: var(--st-text-caption); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--st-text); text-decoration: underline; }
.site-footer-brand { display: inline-flex; align-items: center; gap: 6px; }
.site-footer-mark { width: 16px; height: 16px; }
.auth-legal { display: flex; justify-content: center; padding-top: 24px; color: var(--st-muted); font-size: var(--st-text-caption); }
.auth-legal .site-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; }
.auth-legal a { color: inherit; text-decoration: none; }
.auth-legal a:hover { color: var(--st-text); text-decoration: underline; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* A page this server cannot show, offered on the other servers the browser
   is signed in to (pull-detail-error, uiElsewhere). */
.state-elsewhere { display: grid; gap: 8px; justify-items: center; margin: 12px 0; }
.state-elsewhere p { margin: 0; }
.state-elsewhere-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.state-elsewhere-list button { display: inline-flex; align-items: center; gap: 8px; }

/* ======================================================================
   Redesign (task #850, Artea; the design: raft-artifacts stamp-redesign v8).
   The rules live in web/design/ (index.md lists them); these rules follow
   them and come last, so they win over the older ones above, which they
   replace page by page.
   ====================================================================== */

/* ---- Frame: top bar, rail (collapsible), footer ---- */
/* Every page that has a rail lays it out the same way, whichever template
   draws it (the shell's frame, the inbox, the settings pages): one column
   232px wide, 56px when narrowed to its icons. */
[data-rail="min"]:not([data-rail-open="true"]) { --st-rail-w: var(--st-rail-w-min); }
.topbar { gap: var(--st-space-3); height: 48px; }
.rail-toggle { display: inline-grid; place-items: center; flex: none; width: var(--st-control); height: var(--st-control); margin-left: calc(-1 * var(--st-space-2)); border: 0; border-radius: var(--st-radius-control); background: transparent; color: var(--st-muted); cursor: pointer; }
.rail-toggle:hover, .rail-toggle:focus-visible { background: var(--st-surface-hover); color: var(--st-text); }
.rail-toggle .icon { width: 18px; height: 18px; }
.rail-frame, .inbox3, .settings-app:has(> .rail) { grid-template-columns: var(--st-rail-w) minmax(0, 1fr); }
.rail-frame > .rail, .inbox3-side, .settings-app > .rail { padding: var(--st-space-4) var(--st-space-3) var(--st-space-4) 0; }
.rail-main, .inbox3-main, .settings-app:has(> .rail) > .settings-content { min-height: calc(100vh - 49px); padding: var(--st-space-6) 0 var(--st-space-10) var(--st-page-x); }
.rail .rail-sections a { gap: var(--st-space-3); min-height: 36px; border-radius: var(--st-radius-control); }
/* Narrowed ([ or the top bar's switch; while it is opened on a tablet it is
   full again, whatever was saved): the level's sections as icons, their
   names on hover (each link's title); the page's own lists (the inbox's
   filters, the settings sections) step aside until it is opened again. */
[data-rail="min"]:not([data-rail-open="true"]) .rail { padding-right: var(--st-space-2); }
[data-rail="min"]:not([data-rail-open="true"]) .rail .rail-sections a { justify-content: center; width: 40px; padding: 0; }
[data-rail="min"]:not([data-rail-open="true"]) .rail .rail-label, [data-rail="min"]:not([data-rail-open="true"]) .rail > :not(.rail-sections) { display: none; }
[data-rail="min"]:not([data-rail-open="true"]) .rail .rail-sections { margin: 0; padding: 0; border: 0; }
/* The footer: one quiet line (artin 10-20 keeps the policies on every page). */
.site-footer { margin-top: var(--st-space-10); padding: var(--st-space-4) 0 var(--st-space-6); gap: var(--st-space-2) var(--st-space-4); }

/* ---- Phone: the rail's sections are the bottom tab bar; the switch opens
   the whole rail as a drawer ---- */
@media (max-width: 767px) {
  .shell { padding: 0 var(--st-page-x) calc(64px + var(--st-space-6)); }
  .topbar { height: 56px; margin: 0 calc(-1 * var(--st-page-x)); padding: 0 var(--st-space-2); }
  .rail-frame, .inbox3, .settings-app:has(> .rail) { display: block; }
  .rail-main, .inbox3-main, .settings-app:has(> .rail) > .settings-content { min-height: 0; padding: var(--st-space-4) 0 var(--st-space-6); border-left: 0; }
  .rail-frame > .rail, .inbox3-side, .settings-app > .rail { position: static; padding: 0; border: 0; }
  .rail .rail-sections { position: fixed; z-index: 30; inset: auto 0 0 0; margin: 0; padding: 0 0 env(safe-area-inset-bottom, 0); border: 0; border-top: 1px solid var(--st-border-strong); background: var(--st-bg); }
  .rail .rail-sections ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; }
  .rail .rail-sections a { flex-direction: column; justify-content: center; gap: 2px; width: auto; min-height: 56px; padding: 6px 2px; border-radius: 0; background: transparent !important; color: var(--st-muted); font-size: var(--st-text-caption); line-height: var(--st-leading-tight); font-weight: 600; }
  .rail .rail-sections a[aria-current="page"] { color: var(--st-text); }
  .rail .rail-sections .icon { width: 22px; height: 22px; }
  .rail .rail-label, [data-rail="min"] .rail .rail-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  [data-rail="min"] .rail > :not(.rail-sections) { display: revert; }
  /* The drawer: the level's sections, listed, over the page from the left. */
  [data-rail-open="true"] .rail .rail-sections { inset: 0 auto 0 0; width: min(300px, 85vw); padding: var(--st-space-4) var(--st-space-3); border-top: 0; border-right: 1px solid var(--st-border-strong); box-shadow: var(--st-shadow-dialog); }
  [data-rail-open="true"] .rail .rail-sections ul { grid-auto-flow: row; gap: 2px; }
  [data-rail-open="true"] .rail .rail-sections a { flex-direction: row; justify-content: flex-start; gap: var(--st-space-3); min-height: 44px; padding: 0 var(--st-space-3); border-radius: var(--st-radius-control); font-size: var(--st-text-body); }
  [data-rail-open="true"] body::after { content: ""; position: fixed; inset: 0; z-index: 29; background: var(--st-backdrop); }
  .site-footer { margin-top: var(--st-space-6); }
}

/* ---- Shared parts: page head, segmented control, status chip ---- */
/* One page head everywhere: the title, one line under it, the page's actions
   on the right on the title's line. */
.inbox2-head { align-items: flex-start; gap: var(--st-space-4); padding: 0 0 var(--st-space-4); margin-bottom: 0; border-bottom: 0; }
.inbox2-head h1 { font-size: var(--st-text-title); font-weight: 600; letter-spacing: -0.01em; line-height: 28px; }
.inbox2-sub { margin-top: var(--st-space-1); max-width: 64ch; font-size: var(--st-text-body); line-height: 22px; }
.inbox2-asof { gap: var(--st-space-2); min-height: 28px; }
/* A segmented control: the choices of one filter or setting, side by side. */
.seg { display: inline-flex; gap: 2px; margin: 0; padding: 2px; border-radius: var(--st-radius-control); background: var(--st-muted-fill); list-style: none; }
.seg > li { display: contents; }
.seg a, .seg-item { display: inline-flex; align-items: center; gap: 6px; height: calc(var(--st-control) - 4px); padding: 0 var(--st-space-3); border-radius: 6px; color: var(--st-muted); font-size: var(--st-text-body); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.seg a .icon { display: none; }
.seg a span, .seg-item .n { font-family: var(--st-mono); font-size: var(--st-text-caption); line-height: 1; }
.seg a[aria-current="true"], .seg-item:has(input:checked) { background: var(--st-bg); color: var(--st-text); box-shadow: 0 0 0 1px var(--st-border); }
.seg-item input { position: absolute; opacity: 0; pointer-events: none; }
.seg-item:has(input:focus-visible) { outline: 2px solid var(--st-ring); outline-offset: 1px; }
.seg-item .icon { width: 16px; height: 16px; }
/* A status: a round icon and a word on a light tint of its colour. */
.st-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 var(--st-space-2); border-radius: var(--st-radius-chip); background: var(--st-muted-fill); color: var(--st-text); font-size: var(--st-text-caption); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; }
.st-chip .icon { width: 12px; height: 12px; stroke-width: 2.5; }
.st-chip-success, .st-chip-open { color: var(--st-good); background: var(--st-good-tint); }
.st-chip-danger, .st-chip-closed { color: var(--st-bad); background: var(--st-bad-tint); }
.st-chip-warning { color: var(--st-warn); background: var(--st-warn-tint); }
.st-chip-merged { color: var(--st-merged-fill); background: var(--st-merged-tint); }
a.st-chip:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Lists: one box per group, hairlines between rows ---- */
.inbox2-tools { gap: var(--st-space-2); margin: 0 0 var(--st-space-3); }
.inbox2-tools .inbox-filters { margin-right: auto; }
.inbox2-search { flex: 0 1 260px; }
.inbox2-section { margin-top: var(--st-space-6); }
.inbox2-tools + .inbox2-section, .inbox2-tools + * .inbox2-section:first-child { margin-top: var(--st-space-2); }
.inbox2-section-head { height: 32px; margin: 0; font-size: var(--st-text-meta); font-weight: 600; letter-spacing: 0; }
.inbox2-section-head, .inbox2-section-head .inbox2-collapse { color: var(--st-muted); }
.inbox2-section-head .icon { width: 14px; height: 14px; }
.inbox2-count { font-family: var(--st-mono); font-size: var(--st-text-caption); line-height: 1; }
.inbox2-list { border-radius: var(--st-radius-box); box-shadow: none; }
.pr-row { grid-template-columns: 18px minmax(0, 1fr) auto; column-gap: var(--st-space-3); min-height: var(--st-row); padding: var(--st-space-2) var(--st-space-4); }
.pr-row-state { align-self: start; margin-top: 3px; line-height: 0; }
.pr-state-open { color: var(--st-good); } .pr-state-merged { color: var(--st-merged-fill); } .pr-state-closed { color: var(--st-bad); } .pr-state-muted { color: var(--st-muted); }
.pr-row-body { gap: 2px; }
.pr-row-title { font-weight: 600; letter-spacing: 0; }
.pr-row-meta { gap: 2px 6px; flex-wrap: nowrap; overflow: hidden; }
.pr-row-who { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0; overflow: hidden; overflow-wrap: normal; text-overflow: ellipsis; white-space: nowrap; }
.pr-row-repo { color: var(--st-muted); font-family: var(--st-mono); font-size: var(--st-text-caption); line-height: 1; }
.pr-row-avatar { display: inline-flex; flex: none; margin-left: var(--st-space-1); }
.pr-row-avatar raft-avatar { width: 20px; height: 20px; }
/* The cells line up from row to row: each has its width. */
.pr-row-aside { gap: var(--st-space-4); }
.pr-row-cell-stat { width: 88px; text-align: right; }
.pr-row-changes { margin: 0; }
.pr-row-cell-ci { display: flex; justify-content: flex-start; gap: var(--st-space-1); width: 84px; }
.pr-row-actions { display: flex; justify-content: flex-end; width: var(--st-control); }
.pr-row-gh { width: var(--st-control); height: var(--st-control); padding: 0; justify-content: center; }
@media (hover: hover) { .pr-row-gh { opacity: 0; } .pr-row:hover .pr-row-gh, .pr-row-gh:focus-visible { opacity: 1; } }
@media (max-width: 767px) {
  .inbox2-head { flex-wrap: wrap; }
  .inbox2-tools .inbox-filters { flex: 1 1 100%; }
  .inbox-filters .seg { display: flex; }
  .inbox-filters .seg a { flex: 1 0 auto; justify-content: center; }
  .inbox2-search { flex: 1 1 auto; }
  .pr-row { grid-template-columns: 18px minmax(0, 1fr); min-height: 64px; padding: var(--st-space-3) var(--st-space-4); }
  .pr-row-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: var(--st-text-body); }
  .pr-row-aside { grid-column: 2; gap: var(--st-space-3); }
  .pr-row-meta { flex-wrap: wrap; }
  .pr-row-cell-stat, .pr-row-cell-ci { width: auto; text-align: left; }
  .pr-row-actions { display: none; }
}

/* ---- Pull request page (task #850) ---- */
/* The head: title and who on the left, the actions on the title's line on
   the right; the verdict and what follows span the width. The live regions
   inside it are transparent to that layout. */
.pr-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--st-space-4); align-items: start; padding-bottom: 0; }
.pr-head > *, .pr-head .pr-live-slot > *, .pr-head #pull-detail-live > * { grid-column: 1 / -1; }
.pr-head .pr-live-slot, .pr-head #pull-detail-live { display: contents; }
.pr-head > .pr-title-row { grid-column: 1; grid-row: 1; margin: 0; }
.pr-head > .pr-edit { grid-row: 1; grid-column: 1; }
.pr-head > .pr-head-top { grid-row: 3; }
.pr-head > .attribution { grid-column: 1; grid-row: 2; }
.pr-head .detail-actions, .pr-head .pr-live-actions { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: var(--st-space-2); margin: 0; padding: 0; }
.pr-head .pr-head-menu { grid-column: 3; grid-row: 1; }
.pr-head:has(.pr-head-menu) { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: var(--st-space-2); }
.pr-title-row h2, .pr-head > .pr-title-row h2 { margin: 0; font-size: var(--st-text-title); line-height: 28px; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.pr-head .attribution { margin-top: var(--st-space-1); color: var(--st-muted); font-size: var(--st-text-meta); }
/* The main action last, on the right (the primary-right rule). */
.detail-action { order: 1; }
.detail-action.is-main { order: 3; }
.detail-merge { order: 2; display: inline-flex; }
.detail-merge.is-main { order: 3; }
.detail-merge .z-select { height: var(--st-control); border-radius: var(--st-radius-control) 0 0 var(--st-radius-control); border-right: 0; width: auto; }
.detail-merge .z-button { border-radius: 0 var(--st-radius-control) var(--st-radius-control) 0; }
.pr-head-more { width: var(--st-control); padding: 0; justify-content: center; }
.pr-menu { min-width: 220px; padding: var(--st-space-1); border: 1px solid var(--st-border-strong); border-radius: var(--st-radius-box); background: var(--st-surface-raised); box-shadow: var(--st-shadow-popover); }
.pr-menu.z-open { display: grid; }
.pr-menu .detail-action { display: contents; }
.pr-menu .pr-menu-item { justify-content: flex-start; width: 100%; height: 36px; gap: var(--st-space-3); font-weight: 500; }
.pr-menu .pr-menu-item .icon { color: var(--st-muted); }
/* The verdict is a banner: a light tint of its tone, the words, then why. */
.pr-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-1) var(--st-space-3); margin-top: var(--st-space-4); padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-box); background: var(--st-muted-fill-half); font-size: var(--st-text-body); }
.pr-verdict > .z-label { padding: 0; border: 0; background: none !important; color: var(--st-text) !important; font-size: var(--st-text-body); font-weight: 600; }
.pr-verdict > .z-label .icon { width: 16px; height: 16px; }
.pr-verdict:has(> .z-label-danger) { background: var(--st-bad-tint); }
.pr-verdict:has(> .z-label-danger) > .z-label .icon { color: var(--st-bad); }
.pr-verdict:has(> .z-label-warning) { background: var(--st-warn-tint); }
.pr-verdict:has(> .z-label-warning) > .z-label .icon { color: var(--st-warn); }
.pr-verdict:has(> .z-label-success) { background: var(--st-good-tint); }
.pr-verdict:has(> .z-label-success) > .z-label .icon { color: var(--st-good); }
.pr-verdict-pin { margin-left: auto; }
.pr-approval-reports, .pr-auto-merge { margin-top: var(--st-space-2); }
/* Tabs: one line under them; the size of the change and the panel switch at
   its end. */
.pr-tabs-row { display: flex; align-items: flex-end; gap: var(--st-space-3); margin-top: var(--st-space-4); border-bottom: 1px solid var(--st-border); }
.pr-tabs { margin-top: 0; border-bottom: 0; gap: var(--st-space-6); }
.pr-tabs-row > .pr-diff-stat, .pr-tabs-row > .diff-stat { margin-left: auto; align-self: center; }
.pr-panel-toggle { align-self: center; width: var(--st-control); padding: 0; justify-content: center; color: var(--st-muted); }
[data-panel="min"] .pr-panel-toggle { color: var(--st-text); }
.pr-conversation { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--st-space-8); padding-top: var(--st-space-4); }
[data-panel="min"] .pr-conversation { grid-template-columns: minmax(0, 1fr); }
[data-panel="min"] .pr-side { display: none; }
.pr-main { gap: var(--st-space-4); }
.pr-side .detail-section { padding: var(--st-space-3) 0; }
.pr-side .detail-section h3 { display: flex; align-items: center; justify-content: space-between; min-height: 28px; margin: 0 0 var(--st-space-1); }
.pr-composer .comment-submit { padding: var(--st-space-2) var(--st-space-2) var(--st-space-2) var(--st-space-4); }
.pr-composer .comment-submit .pr-state-buttons { margin-left: auto; display: inline-flex; gap: var(--st-space-2); }
@media (max-width: 767px) {
  .pr-head, .pr-head:has(.pr-head-menu) { grid-template-columns: minmax(0, 1fr) auto; }
  .pr-head > .pr-title-row { grid-column: 1; }
  .pr-head .pr-head-menu { grid-column: 2; grid-row: 1; }
  .pr-head > .attribution { grid-column: 1 / -1; }
  /* The actions: the bar along the bottom edge, the main one on the right. */
  .pr-head .detail-actions { position: fixed; z-index: 31; inset: auto 0 0 0; grid-column: auto; grid-row: auto; justify-content: flex-end; padding: var(--st-space-2) var(--st-space-4) calc(var(--st-space-2) + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--st-border-strong); background: var(--st-bg); }
  .pr-head .detail-actions .detail-action.is-main { flex: 1; }
  .pr-head .detail-actions .detail-action.is-main .z-button { width: 100%; justify-content: center; }
  body:has(.pr-head .detail-actions) .rail .rail-sections { display: none; }
  .pr-tabs-row { overflow-x: auto; }
  .pr-panel-toggle { display: none; }
  .pr-conversation { grid-template-columns: minmax(0, 1fr); }
}
.pr-verdict > .z-label { border: 0 !important; box-shadow: none !important; }
.detail-merge { gap: 0; }
.pr-panel-toggle { margin-left: auto; }
.pr-tabs-row > .pr-diff-stat + .pr-panel-toggle, .pr-tabs-row > .diff-stat + .pr-panel-toggle { margin-left: 0; }
.pr-tabs { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 767px) {
  .detail-page { padding-inline: 0; }
  body:has(.pr-head .detail-actions) .shell { padding-bottom: calc(120px + var(--st-space-6)); }
  .pr-tabs { gap: var(--st-space-4); }
}

/* ---- Settings pages (task #850): rail, the settings sections, the page ---- */
.settings-app:has(> .rail) { grid-template-columns: var(--st-rail-w) 200px minmax(0, 1fr); }
.settings-subnav { display: grid; align-content: start; gap: 2px; padding: var(--st-space-6) var(--st-space-4) 0 var(--st-page-x); border-left: 1px solid var(--st-border); }
.settings-subnav a { display: flex; align-items: center; gap: var(--st-space-3); min-height: 36px; padding: 0 var(--st-space-3); border-radius: var(--st-radius-control); color: var(--st-muted); font-weight: 500; text-decoration: none; }
.settings-subnav a .icon { width: 16px; height: 16px; }
.settings-subnav a:hover { background: var(--st-surface-hover); color: var(--st-text); }
.settings-subnav a[aria-current] { background: var(--st-muted-fill); color: var(--st-text); font-weight: 600; }
.settings-app:has(> .rail) > .settings-content { max-width: 768px; border-left: 0; padding-left: var(--st-space-4); }
@media (max-width: 767px) {
  .settings-subnav { display: flex; gap: var(--st-space-1); margin: var(--st-space-2) calc(-1 * var(--st-page-x)) 0; padding: 0 var(--st-page-x) var(--st-space-2); overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--st-border); scrollbar-width: none; }
  .settings-subnav a { flex: none; min-height: 40px; white-space: nowrap; }
  .settings-app:has(> .rail) > .settings-content { padding-left: 0; }
}
/* One setting a row: its name and a line of help on the left, the control on
   the right; at least 48px tall. */
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--st-space-4); min-height: 48px; padding: var(--st-space-3) var(--st-space-4); border: 1px solid var(--st-border); border-radius: var(--st-radius-box); }
.set-row-label { margin: 0; font-weight: 600; }
.set-row .muted.small { margin: 2px 0 0; }
.appearance-themes { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.appearance-dark-style { margin-top: var(--st-space-8); }
.appearance-dark-style h2 { margin: 0 0 var(--st-space-3); font-size: var(--st-text-section); font-weight: 600; }
@media (max-width: 767px) { .set-row { grid-template-columns: minmax(0, 1fr); } }
.appearance-themes { max-width: none; }
/* The account menu's theme switch (task #850): one row, like the links. */
.account-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: var(--st-space-3); padding: var(--st-space-2) 14px; border-bottom: 1px solid var(--st-border); }
.account-menu-theme-label { display: inline-flex; align-items: center; gap: 6px; color: var(--st-text); }
.account-menu-theme .seg-item { padding: 0 var(--st-space-2); }

/* ---- Notices, page heads, empty states (task #850) ---- */
/* A notice is a banner: a light tint of its tone, ordinary text, no ink
   frame; its error code and request id stay on their own small line. */
.z-alert { border: 0 !important; border-radius: var(--st-radius-box); padding: var(--st-space-3) var(--st-space-4); color: var(--st-text) !important; font-size: var(--st-text-body); }
.z-alert-danger { background: var(--st-bad-tint) !important; }
.z-alert-warning { background: var(--st-warn-tint) !important; }
.z-alert-success { background: var(--st-good-tint) !important; }
.z-alert code { font-family: var(--st-mono); font-size: var(--st-text-caption); color: var(--st-muted); }
.workspace-head, .settings-content > .settings-title { border-bottom: 0; }
.workspace-head { padding: 0 0 var(--st-space-4); margin-bottom: var(--st-space-2); align-items: flex-start; }
.workspace-head h1, .settings-title, .org-page-title { font-size: var(--st-text-title); font-weight: 600; letter-spacing: -0.01em; line-height: 28px; }
.workspace-head h1 + p, .settings-content h1 + p, .org-page-sub { margin-top: var(--st-space-1); }
/* Empty: a grey icon, one line, at most one button; no dashed frame. */
.empty { min-height: 0; padding: var(--st-space-10) var(--st-space-6); border: 1px solid var(--st-border); border-radius: var(--st-radius-box); gap: var(--st-space-2); }
.empty-mark { width: 32px; height: 32px; color: var(--st-muted); background: none; }
.empty-mark .icon { width: 28px; height: 28px; }
.empty p { margin: var(--st-space-1) 0 0; }

/* ---- Checks page: one box per group, a round icon per check ---- */
.checks-list ul { gap: 0; margin: var(--st-space-2) 0 0; border: 1px solid var(--st-border); border-radius: var(--st-radius-box); overflow: hidden; }
.checks-list .check { min-height: var(--st-row-1); padding: var(--st-space-2) var(--st-space-4); border-left: 0; border-radius: 0; border-top: 1px solid var(--st-border); gap: var(--st-space-1) var(--st-space-3); }
.checks-list .check:first-child { border-top: 0; }
.check-state { display: inline-flex; flex: none; line-height: 0; color: var(--st-muted); }
.check-state .icon { width: 16px; height: 16px; }
.check.failed .check-state { color: var(--st-bad); } .check.passed .check-state { color: var(--st-good); }
.checks-list .check-name { font-weight: 600; }
.check-count .icon { width: 14px; height: 14px; }
.check-count.failed { color: var(--st-bad); } .check-count.passed { color: var(--st-good); }

/* ---- Repository and organization lists: one box, hairline rows ---- */
.org-repos { border: 1px solid var(--st-border); border-radius: var(--st-radius-box); }
.org-repo a { min-height: var(--st-row); padding: var(--st-space-2) var(--st-space-4); }
/* The right panel belongs to the conversation: no switch on the Files tab. */
.pr-view:has(#pr-panel-files:not([hidden])) .pr-panel-toggle { display: none; }
.pr-tabs-row > .pr-panel-toggle { margin-left: var(--st-space-2); }
.pr-tabs-row > .pr-tabs + .pr-panel-toggle { margin-left: auto; }
/* The size of the change at the row's end, the panel switch after it. */
.pr-tabs-row > .pr-tabs-stat { margin-left: auto; align-self: center; }
.pr-tabs-row > .pr-tabs-stat + .pr-panel-toggle { margin-left: var(--st-space-2); }
.pr-tabs-row > .pr-tabs-stat:empty + .pr-panel-toggle { margin-left: auto; }
.pr-tabs-row > .pr-tabs-stat { position: static; transform: none; }

/* ---- Phone: every popover is a sheet from the bottom edge (task #850) ---- */
/* The kit positions a z-drop next to its control; on a phone the open one
   sits along the bottom instead, full width, above a dimmed page, so a thumb
   reaches it and nothing opens off screen. */
@media (max-width: 767px) {
  .z-drop.z-open, [z-drop].z-open { position: fixed !important; inset: auto 0 0 0 !important; top: auto !important; left: 0 !important; width: auto !important; max-width: none !important; max-height: 85vh; overflow-y: auto; transform: none !important; margin: 0 !important; padding: var(--st-space-2) var(--st-space-2) calc(var(--st-space-4) + env(safe-area-inset-bottom, 0)); border-radius: var(--st-radius-dialog) var(--st-radius-dialog) 0 0 !important; z-index: 40; box-shadow: 0 0 0 100vmax var(--st-backdrop), var(--st-shadow-dialog) !important; }
  .z-drop.z-open a, .z-drop.z-open button:not(.seg-item), [z-drop].z-open .pr-menu-item { min-height: 44px; }
}
.pr-menu .pr-menu-item, .pr-menu .pr-menu-item .when-idle { display: inline-flex; align-items: center; gap: var(--st-space-3); font-size: var(--st-text-body); font-weight: 500; }
/* The side panel's exact versions: label and short hash in two columns. */
.pr-side .coordinates { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--st-space-1) var(--st-space-3); margin: var(--st-space-3) 0 0; padding-top: var(--st-space-3); border-top: 1px solid var(--st-border); font-family: var(--st-mono); font-size: var(--st-text-caption); color: var(--st-muted); }
.pr-side .coordinates dd { margin: 0; color: var(--st-text); }
.pr-side .coordinates code { font: inherit; background: none; padding: 0; }
.pr-alone { margin: 0; }

/* No coloured side bars anywhere (task #850, Artea 10-22): a stack is a list
   with hairlines, the current pull request in bold; reports and timelines
   are plain lists. */
.stack-chain { gap: 0; border: 1px solid var(--st-border); border-radius: var(--st-radius-box); overflow: hidden; }
.stack-node, .stack-node.below, .stack-node.above, .stack-node.current { padding: var(--st-space-2) var(--st-space-3); border: 0; border-top: 1px solid var(--st-border); border-radius: 0; background: none; }
.stack-node:first-child { border-top: 0; }
.stack-node.current { font-weight: 600; }
.pr-approval-report-list, .feedback-timeline { padding-left: 0; border-left: 0; }
.inbox-repo-drop nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.inbox-repo-drop nav a { display: flex; align-items: center; gap: var(--st-space-2); min-height: 32px; padding: 0 var(--st-space-3); border-radius: var(--st-radius-control); color: var(--st-text); text-decoration: none; }
.inbox-repo-drop nav a[aria-current] { background: var(--st-muted-fill); font-weight: 600; }
.inbox-repo-drop .inbox3-group { display: none; }
.inbox-repo-menu [data-inbox-repo-label] { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- One control height (task #850) ----
   A button, a field, a select and a segmented switch are one height:
   --st-control (32px; 44px under a finger), with body text. The kit's
   small and large modifiers keep their padding but not their own height,
   so controls that share a row line up. A text button keeps its line. */
.z-button:not(.z-button-text) { --z-button-height: var(--st-control); --z-button-radius: var(--st-radius-control); font-size: var(--st-text-body); line-height: 1.25; padding-block: 0; }
.z-input, .z-select { --z-form-input-height: var(--st-control); --z-form-input-radius: var(--st-radius-control); font-size: var(--st-text-body); }
.seg { box-sizing: border-box; height: var(--st-control); }
.seg a > span, .seg-item .n { margin-left: 0; }

/* ---- Strips that scroll sideways (task #850) ----
   A segmented switch, the pull request's tabs, the settings sections and
   any .st-scroller never push the page wider: they scroll, without a bar.
   app.js (StampScrollers) marks which end hides items in data-more; that
   edge fades, so a cut item reads as "more this way". */
.seg, .pr-tabs-row, .settings-subnav, .st-scroller { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.seg::-webkit-scrollbar, .pr-tabs-row::-webkit-scrollbar, .settings-subnav::-webkit-scrollbar, .st-scroller::-webkit-scrollbar { display: none; }
.seg a, .seg-item { flex: 0 0 auto; }
/* A strip's holder in a flex row may shrink below its items' width. */
.inbox-filters, .org-sorts { min-width: 0; max-width: 100%; }
[data-more="end"] { mask-image: linear-gradient(to right, black calc(100% - var(--st-space-8)), transparent); }
[data-more="start"] { mask-image: linear-gradient(to left, black calc(100% - var(--st-space-8)), transparent); }
[data-more="both"] { mask-image: linear-gradient(to right, transparent, black var(--st-space-8), black calc(100% - var(--st-space-8)), transparent); }

/* ---- A row's who (task #850) ----
   The author's avatar sits with the author's name. On a phone the repository
   takes its own line, so the who starts the next one: its leading dot goes. */
.pr-row-who { display: inline-flex; align-items: center; column-gap: var(--st-space-1); }
.pr-row-who .pr-row-avatar { margin-left: 0; }
@media (max-width: 767px) {
  .pr-row-meta .pr-row-repo { flex: 0 0 100%; }
  .pr-row-meta .pr-row-sep { display: none; }
}

/* ---- The frame across widths (task #850) ----
   Three widths, one frame. A desktop (1200px and up) has the rail at full
   width; a tablet (768-1199px) has it narrowed to its icons, wider again
   only while the reader opens it; a phone has the tab bar and the drawer.
   The frame fills the window: no empty bands either side on a wide screen.
   Pages start at the same left edge under the top bar; a page that caps
   its line length caps it from that edge, not centred. */
.shell { max-width: none; }
.detail-page { max-width: none; }
.batch-page, .upstream-page, .request-page { margin-left: 0; margin-right: 0; }
@media (min-width: 768px) and (max-width: 1199px) {
  :root:not([data-rail-open="true"]) { --st-rail-w: var(--st-rail-w-min); }
  :root:not([data-rail-open="true"]) .rail { padding-right: var(--st-space-2); }
  :root:not([data-rail-open="true"]) .rail .rail-sections a { justify-content: center; width: 40px; padding: 0; }
  :root:not([data-rail-open="true"]) .rail .rail-label, :root:not([data-rail-open="true"]) .rail > :not(.rail-sections) { display: none; }
  :root:not([data-rail-open="true"]) .rail .rail-sections { margin: 0; padding: 0; border: 0; }
  /* The settings sections leave their column for a strip over the page. */
  .settings-app:has(> .rail) { grid-template-columns: var(--st-rail-w) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .settings-app > .rail { grid-row: 1 / span 2; }
  .settings-subnav { display: flex; align-self: start; gap: var(--st-space-1); margin: 0 0 0 var(--st-page-x); padding: var(--st-space-4) 0 var(--st-space-2); border-left: 0; border-bottom: 1px solid var(--st-border); }
  .settings-subnav a { flex: none; white-space: nowrap; }
  .settings-app:has(> .rail) > .settings-content { padding-left: var(--st-page-x); }
}

/* ---- A form row answers to its own width (task #850) ----
   A label beside its field while the form has room; the label over the
   field when it does not, whatever the window. */
.settings-config-form { container-type: inline-size; }
.settings-config-form .z-input, .settings-config-form .z-select, .settings-config-form .combobox { width: 100%; min-width: 0; }
@container (max-width: 520px) {
  .settings-config-form label:not(.settings-toggle) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--st-space-2); }
}

/* ---- Words that name one thing stay on one line (task #850) ----
   A button, a status chip, a label and a tab never break inside: when a
   row is short of room, the running text beside them wraps instead. The
   verdict is a sentence, not a chip, and wraps as one. */
.z-button, .z-label, .st-chip, .tag, .pr-tab, .seg a, .seg-item, .text-button, .app-installation-manage { white-space: nowrap; }
.z-button, .z-label, .st-chip, .app-installation-manage { flex-shrink: 0; }
.pr-verdict .z-label { white-space: normal; flex-shrink: 1; }
@media (max-width: 767px) {
  /* A row's trailing link keeps its icon on a phone; its words go to its
     title, so the row's own text keeps the width. */
  .app-installation-manage { font-size: 0; gap: 0; }
  .app-installation-manage .icon { width: 18px; height: 18px; }
}

/* ---- A finger's target (task #850) ----
   Under a finger every control is reachable over 44px (--st-control), even
   when it is drawn smaller: a small one gets an invisible hit area of that
   size around it, so its look and its row do not change. */
@media (pointer: coarse) {
  :is(.crumb-switch, .inbox2-collapse, .reaction-add, .text-button, .files-copy-path, .pr-row-gh, .settings-repo-open, .external-link, .account-menu-trigger) { position: relative; }
  :is(.crumb-switch, .inbox2-collapse, .reaction-add, .text-button, .files-copy-path, .st-clearable-button, .pr-row-gh, .settings-repo-open, .external-link, .account-menu-trigger)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--st-control)); height: max(100%, var(--st-control)); transform: translate(-50%, -50%); }
  /* Beside another control (the crumb's switch after its name, the add
     button after the reactions) the area grows up and down only, so it
     never lies over the neighbour. */
  :is(.crumb-switch, .reaction-add)::after { width: 100%; }
}

/* ---- Icons (task #850) ----
   An icon is drawn whole: nothing clips its strokes at the box's edge. A
   pull request's state is 18px beside a 14px title, so its marks read. */
.icon { overflow: visible; }
.pr-row-state .icon { width: 18px; height: 18px; }
.pr-row-state { margin-top: 2px; }

/* ---- Moving in place (task #850, app.js StampNav) ----
   While the next page is on its way a thin bar runs under the top bar; the
   page itself stays as it is until the new one replaces it in one step. */
html[data-nav-busy] body::before { content: ""; position: fixed; z-index: 60; top: 0; left: 0; width: 100%; height: 2px; background: var(--st-accent); transform-origin: left; animation: st-nav-busy 1.2s ease-out infinite; }
@keyframes st-nav-busy { from { transform: scaleX(0); } to { transform: scaleX(0.9); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { html[data-nav-busy] body::before { animation: none; transform: scaleX(0.5); } }

/* ---- Loading (task #850) ----
   A page on its way is drawn in its own shape (partials/loading.html): the
   head, the toolbar, rows the height of real rows, a pull request's banner
   and tabs. Quiet bars, no spinner; they sit where the real parts will, so
   nothing moves when the page lands and nothing covers what is already
   there. A list never says "nothing here" before it has been read. */
.sk-page { display: grid; gap: var(--st-space-4); }
.sk-head { display: grid; gap: var(--st-space-2); }
.sk-title { width: min(280px, 60%); height: 28px; }
.sk-sub { width: min(420px, 80%); height: 14px; margin-top: var(--st-space-1); }
.sk-banner { width: 100%; height: 46px; margin-top: var(--st-space-2); border-radius: var(--st-radius-box); }
.sk-tabs { width: min(360px, 100%); height: var(--st-control); margin-top: var(--st-space-2); }
.sk-toolbar { display: flex; flex-wrap: wrap; gap: var(--st-space-2); }
.sk-toolbar > .skeleton { height: var(--st-control); border-radius: var(--st-radius-control); }
.sk-seg { width: min(420px, 100%); margin-right: auto; }
.sk-field { width: min(260px, 100%); }
.sk-select { width: 120px; }
.sk-list { border: 1px solid var(--st-border); border-radius: var(--st-radius-box); overflow: hidden; }
.sk-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; column-gap: var(--st-space-3); min-height: var(--st-row); padding: var(--st-space-3) var(--st-space-4); }
.sk-row + .sk-row { border-top: 1px solid var(--st-border); }
.sk-dot { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; }
.sk-lines { display: grid; gap: var(--st-space-2); }
.sk-line { width: 62%; height: 14px; }
.sk-meta { width: 38%; height: 12px; }
.sk-line.is-short { width: 46%; }
.sk-meta.is-short { width: 28%; }
.sk-chip { width: 56px; height: 22px; border-radius: var(--st-radius-chip); }
.sk-split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--st-space-6); }
.sk-side { display: grid; align-content: start; gap: var(--st-space-3); }
.sk-block { padding: var(--st-space-2) 0; }
@media (max-width: 767px) {
  .sk-split { grid-template-columns: minmax(0, 1fr); }
  .sk-side { display: none; }
  .sk-row { grid-template-columns: 18px minmax(0, 1fr); }
  .sk-chip { display: none; }
  .sk-seg { width: 100%; }
  .sk-field { flex: 1; }
}
/* A pull request's first paint: the verdict is the banner it will be, and
   the action placeholders hold the actions' place on the title's line --
   never over the title. On a phone the actions are the bottom bar, so
   their placeholders wait there. */
.pr-head #pull-detail-live > .pr-live-actions { grid-column: 2; grid-row: 1; margin: 0; }
.pr-head .pr-live-reading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-1) var(--st-space-3); min-height: 46px; margin-top: var(--st-space-4); padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-box); background: var(--st-muted-fill-half); color: var(--st-text); font-size: var(--st-text-body); line-height: normal; }
.pr-head .pr-live-reading > .z-label { padding: 0; border: 0; background: none !important; color: var(--st-text) !important; font-size: var(--st-text-body); font-weight: 600; }
.pr-head .pr-live-reading:has(> .z-label-success) { background: var(--st-good-tint); }
.pr-head .pr-live-reading > .z-label-success .icon { color: var(--st-good); }
.pr-live-reading .pr-live-verdict { width: min(320px, 70%); height: 14px; margin: 0; }
@media (max-width: 767px) {
  .pr-head #pull-detail-live > .pr-live-actions { position: fixed; z-index: 31; inset: auto 0 0 0; grid-column: auto; grid-row: auto; justify-content: flex-end; padding: var(--st-space-2) var(--st-space-4) calc(var(--st-space-2) + env(safe-area-inset-bottom, 0)); border-top: 1px solid var(--st-border); background: var(--st-bg); }
  .pr-live-actions .pr-live-button { height: var(--st-control); }
}
.pr-live-button { height: var(--st-control); border-radius: var(--st-radius-control); }

/* ---- Where a page starts (task #850) ----
   The frame gives every page its top: 24px under the bar (16px on a
   phone). A page's own wrapper adds none, so headings line up from page
   to page. */
:is(.rail-main, .inbox3-main, .settings-content) :is(.workspace, .person-page) { padding-top: 0; }
.settings-app:has(> .rail) { padding-top: 0; padding-bottom: 0; }
@media (max-width: 767px) { .shell > #session-root:has(> #detail-layer > *) { padding-top: var(--st-space-2); } }
/* A row's title is one line that ends in "…" when it is longer; an inline
   box cannot show the ellipsis, so the title is a block. */
.pr-row-title { display: block; min-width: 0; }
/* The checks page's "view all on GitHub" ends the counts' line (its own
   right end, like any action), not a line of its own under a gap. */
.checks-summary .checks-view-all { width: auto; margin: 0 0 0 auto; padding: 0; }
/* An icon beside words that wrap stays with their first line. */
.pr-verdict > .z-label { align-items: flex-start; }
.pr-verdict > .z-label > .icon { flex: none; margin-top: 0.2em; }

/* The heading a page move focuses (StampNav) takes the focus quietly. */
#session-root:focus, #session-root :is(h1, h2)[tabindex="-1"]:focus { outline: none; }

/* ---- Generated files (diff_generated.go) ----
   A generated file's header says so in a quiet label; the panel's total
   gives what was generated after what was written, quieter. */
.files-generated-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--st-space-2); border-radius: var(--st-radius-chip); background: var(--st-muted-fill); color: var(--st-muted); font-size: var(--st-text-caption); font-weight: 600; white-space: nowrap; }
.files-total-generated { display: inline-flex; gap: 6px; align-items: baseline; color: var(--st-muted); }
.files-total-generated :is(.add, .del) { color: inherit; }