/* The Files pages' own components (#41), for what abso does not have yet. Design can fold each into the system. Tokens only. */

/* Dots: facts with a "·" between them; the dot leads each item and the first of a line is clipped, so a separator never starts or ends a line. */
.ab-dots { display: block; min-width: 0; overflow: hidden; }
.ab-dots > .in { display: flex; flex-wrap: wrap; align-items: baseline; margin-left: calc(-1 * var(--space-3)); }
.ab-dots > .in > span { position: relative; padding-left: var(--space-3); }
.ab-dots > .in > span::before { content: "·"; position: absolute; left: var(--space-1); color: var(--faint); }

/* WorkingBar: who has unpublished changes here. */
.ab-working { color: var(--muted); font-size: 13px; line-height: 20px; }
.ab-working b { color: var(--ink); font-weight: 600; }
.ab-working .num { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-working .path { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.ab-working .small { font-size: 12px; line-height: 16px; }
.ab-working .places { margin-left: var(--space-2); }
.ab-working-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-width: 0; }
.ab-working-row .ab-btn { height: 24px; padding: 0 var(--space-2); margin-left: auto; }
.ab-working.is-file { display: flex; flex-direction: column; gap: var(--space-1); padding: 7px var(--space-4); border-bottom: 1px solid var(--rule); background: var(--paper); }
.ab-working.is-folder { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-6); padding: 0 0 10px; border-bottom: 1px solid var(--rule); }
.ab-working.is-folder .label { font-size: 12px; line-height: 16px; font-weight: 600; }
.ab-working.is-folder .rows { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.ab-working.is-folder .ab-working-row .ab-btn { margin-left: var(--space-2); }
.ab-working .rec { margin-right: var(--space-1); }
@media (max-width: 600px) {
  .ab-working-row .ab-btn { margin-left: 0; }
}
/*
  The Files pages' own components (#41): the ones the abso system doesn't have yet, so Design can fold them in.
  Tokens only; no hex values. Load after the system's stylesheets.
*/

/* ---------- Go to file (JumpBox): the system's .ab-pop.ab-jump, plus what it does not have: the scrim behind it ---------- */
.ab-jump-scrim { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; align-items: flex-start; padding: 96px 16px 16px; box-sizing: border-box; background: rgb(0 0 0 / .6); }
.ab-jump-scrim .ab-jump { display: flex; flex-direction: column; max-height: calc(100vh - 112px); }
.ab-jump-scrim .ab-jump ul { overflow-y: auto; }
.ab-jump-scrim .ab-jump li > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; }
.ab-jump-none { margin: 8px 16px; color: var(--muted); }
.ab-jump .input code { font-family: var(--font-mono); }
@media (max-width: 640px) {
  .ab-jump-scrim { padding-top: 16px; }
  .ab-jump-scrim .ab-jump { max-height: calc(100vh - 32px); }
  .ab-jump .input .hint, .ab-jump .foot { display: none; }
}

/* Raise something (F14): the panel for a file or some lines. */
.ab-raise { display: flex; flex-direction: column; }
.ab-raise-label { padding: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.ab-raise-body { display: flex; flex-direction: column; gap: 12px; }
.ab-raise-note { margin: 0; color: var(--muted); font-size: 12px; }
.ab-reach { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.ab-reach legend { margin-bottom: 6px; }
.ab-reach-item { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
.ab-reach-why { grid-column: 2; color: var(--muted); font-size: 12px; }
.ab-raise-field { display: flex; flex-direction: column; gap: 6px; }
.ab-raise-field textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px; resize: vertical; }
.ab-raise-mention { color: var(--muted); font-size: 12px; }
.ab-raise-error { margin: 0; padding: 8px 12px; border-left: 3px solid var(--fail); background: var(--wash); }
.ab-raise-ok { margin: 0; padding: 8px 12px; border-left: 3px solid var(--pass); background: var(--wash); }
.ab-raise-actions { display: flex; gap: 8px; }

/* ---------- A line's story (F17): the panel beside the code, a sheet from the bottom on a phone ---------- */
.ab-story { display: flex; flex-direction: column; min-height: 0; background: var(--paper); color: var(--ink); }
.ab-story-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.ab-story-head h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 650; }
.ab-story-file { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.ab-story-close { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; align-self: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.ab-story-close:hover { color: var(--ink); background: var(--wash); }
.ab-story-actions { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--rule); }
.ab-story-close:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ab-story-note { margin: 0; padding: 16px; }
.ab-story-body { display: flex; flex-direction: column; overflow-y: auto; }
.ab-story-body section { display: flex; flex-direction: column; gap: 6px; }
.ab-story-body h3 { margin: 0; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; }
.ab-story-body p { margin: 0; }
.ab-story-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ab-story-ci { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: var(--muted); }
.ab-story-message { white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-story-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ab-story-pill { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--wash); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 20px; text-decoration: none; }
.ab-story-pill:hover { box-shadow: inset 0 0 0 1px var(--faint); }
.ab-story-built { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ab-story-built li { display: grid; grid-template-columns: auto auto 1fr; column-gap: 8px; align-items: baseline; }
.ab-story-built li > span:last-child { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* On a phone the side panel is one sheet from the bottom (see .ab-fileview-panel); what it holds, a line's story or an agent's changes, sits flat inside it. */
  .ab-story { background: transparent; }
  .ab-story-body { overflow: visible; }
}

/* MarkdownView (F9): a Markdown file rendered, with a bar at the edge of blocks that changed since you last looked. */
.ab-md { max-width: var(--measure); margin: 0 auto; padding: 24px; color: var(--ink); }
.ab-md-block { position: relative; }
.ab-md-block.is-changed { margin-left: -12px; padding-left: 9px; }
.ab-md-bar { position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--ink); }
.ab-md h1, .ab-md h2, .ab-md h3, .ab-md h4, .ab-md h5, .ab-md h6 { scroll-margin-top: 64px; }
.ab-md a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--faint); }
.ab-md-dead { color: var(--muted); }
.ab-md blockquote { margin: 0 0 1em; padding-left: 12px; border-left: 2px solid var(--rule); color: var(--muted); }
.ab-md-code { margin: 0 0 1em; padding: 12px; overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--font-mono); font-size: 12px; }
.ab-md code { font-family: var(--font-mono); }
.ab-md-list { margin: 0 0 1em; padding-left: 24px; }
.ab-md-li-1 { margin-left: 16px; } .ab-md-li-2 { margin-left: 32px; } .ab-md-li-3 { margin-left: 48px; } .ab-md-li-4 { margin-left: 64px; }
.ab-md-table { border-collapse: collapse; margin: 0 0 1em; }
.ab-md-table th, .ab-md-table td { padding: 4px 12px; border: 1px solid var(--rule); text-align: left; }
.ab-md-cut { color: var(--muted); }
.ab-md-outline { font-size: 12px; }
.ab-md-outline h3 { margin: 0 0 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.ab-md-outline ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ab-md-outline a { color: var(--muted); text-decoration: none; }
.ab-md-outline a:hover, .ab-md-outline a:focus-visible { color: var(--ink); }

/* Back in time (F15, F24, F30): the line that says a page isn't the newest, and a path that isn't at this version. */
.ab-when a { color: var(--ink); margin-left: 8px; text-underline-offset: 3px; }
.ab-nothere { max-width: var(--measure); margin: 0 auto; padding: 32px 24px; display: flex; flex-direction: column; gap: 8px; }
.ab-nothere h1 { margin: 0; font-size: 26px; }
.ab-nothere p { margin: 0; }
.ab-nothere-last { color: var(--muted); }
.ab-nothere-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ab-nothere a { color: var(--ink); text-underline-offset: 3px; }

/* The version picker's section for agents' drafts. */
.ab-menu-section { display: flex; flex-direction: column; padding: 4px 0; border-top: 1px solid var(--rule); }
.ab-menu-title { margin: 0; padding: 4px 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.ab-menu-item { display: flex; align-items: center; gap: 8px; padding: 4px 12px; color: var(--ink); text-decoration: none; }
.ab-menu-item:hover, .ab-menu-item:focus-visible { background: var(--wash); }
.ab-menu-meta { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ---------- PersonMark: people are round, agents are pills ---------- */
.ab-person { display: inline-flex; align-items: center; gap: 8px; }
.ab-person-mark { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wash); box-shadow: inset 0 0 0 1px var(--faint); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 1; }
.ab-person-mark.is-unknown { color: var(--muted); }
.ab-person-glyph { display: block; }
.ab-person-name { color: var(--ink); font-size: 13px; font-weight: 600; }
.ab-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* BinaryPreview (F12): a binary file's facts and a small image on a checkerboard. */
.ab-binary { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 32px; }
.ab-binary-facts, .ab-binary-none { margin: 0; color: var(--muted); font-size: 12px; }
.ab-binary-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; }
.ab-binary-figure figcaption { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.ab-image-checker { max-width: 100%; overflow: auto; padding: 24px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); background-color: var(--surface); background-image: linear-gradient(45deg, var(--wash) 25%, transparent 25%), linear-gradient(-45deg, var(--wash) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--wash) 75%), linear-gradient(-45deg, transparent 75%, var(--wash) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.ab-image-checker img { display: block; }
.ab-image-checker img.is-fit { max-width: 100%; height: auto; }
.ab-binary-actions { margin: 0; display: flex; align-items: center; gap: 8px; }

/* AgentChanges (F20, F23): an agent's unpublished changes to a file, in the side panel. */
.ab-changes { display: flex; flex-direction: column; min-height: 0; }
.ab-changes .ab-panel-head h2 { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: 15px; line-height: 20px; font-weight: 650; white-space: nowrap; }
.ab-changes .ab-panel-head .ref { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-sans); }
.ab-changes-body { flex: 1; min-height: 0; overflow: auto; }
.ab-changes h3 { margin: 0 0 var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ab-changes-facts { display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: 12px; line-height: 16px; }
.ab-changes-facts .live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; }
.ab-changes-facts .live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.ab-changes-facts .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.ab-changes .quiet { margin: var(--space-2) 0 0; font-size: 13px; line-height: 20px; }
.ab-places { display: flex; flex-direction: column; gap: var(--space-4); }
.ab-place { display: flex; flex-direction: column; gap: 6px; }
.ab-place-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; line-height: 16px; font-weight: 600; }
.ab-place-more { align-self: flex-start; }
.ab-changes .ab-place-collides { margin: 0; color: var(--muted); font-size: 12px; line-height: 16px; font-weight: 450; }
.ab-diff { border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--syn-plain); }
.ab-diff-row { display: grid; grid-template-columns: 16px minmax(0, 1fr); }
.ab-diff-row .sign { text-align: center; }
.ab-diff-row .text { white-space: pre-wrap; overflow-wrap: anywhere; padding-right: var(--space-2); }
.ab-diff-row.is-del { background: var(--fail-wash); }
.ab-diff-row.is-del .sign { color: var(--fail); }
.ab-diff-row.is-add { background: var(--pass-wash); }
.ab-diff-row.is-add .sign { color: var(--pass); }
.ab-changes .actions { align-items: center; flex-wrap: nowrap; }
.ab-changes .actions .ab-copy-link { margin-left: auto; flex: none; }

/* ---------- History (F26): a file's versions, one line each, grouped by day ---------- */
.ab-history { display: flex; flex-direction: column; gap: 20px; }
.ab-history-day h2 { margin: 0; padding-bottom: 4px; border-bottom: 1px solid var(--rule); color: var(--muted); font: var(--type-caption); font-weight: 600; letter-spacing: 0; }
.ab-history-day h2 .muted { font-weight: 500; }
.ab-history-rows { display: flex; flex-direction: column; }
.ab-hrow { display: grid; grid-template-columns: 56px minmax(0, 11rem) minmax(0, 1fr) 112px 76px; align-items: center; gap: 12px; height: 40px; padding: 0 4px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.ab-hrow:hover { background: var(--wash); }
.ab-hrow:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ab-hrow-v { font-family: var(--font-mono); font-weight: 600; text-align: right; }
.ab-hrow-who, .ab-hrow-ci, .ab-hrow-time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-hrow-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-hrow-was { margin-left: 6px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.ab-hrow-ci { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.ab-hrow-time { color: var(--muted); font-size: 12px; text-align: right; }
.ab-history-moved { margin: 0; }
@media (max-width: 640px) {
  .ab-hrow { grid-template-columns: 44px minmax(0, 1fr) 76px; }
  .ab-hrow-who, .ab-hrow-ci { display: none; }
}

/* ---------- DiffView (Compare): old and new numbers, the author stripe on added lines, + and - on the washes ---------- */
.code.diff.ab-diff .line { grid-template-columns: 44px 44px 3px 14px 1fr; }
.ab-dl-who { align-self: stretch; width: 3px; }
.ab-dl-who.is-set { background: var(--c); border-radius: 2px; }

/* ---------- Compare's bar: the two versions, a swap, the totals, the versions in between ---------- */
.ab-compare-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ab-compare-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ab-compare-form h1 { margin-right: 8px; font: var(--type-heading); }
.ab-compare-form label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.ab-compare-form input[name] { width: 6ch; box-sizing: content-box; padding: 3px 8px; border: 1px solid var(--faint); border-radius: 6px; background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: 13px; }
.ab-compare-form input[name]:focus-visible, .ab-compare-swap:focus-visible, .ab-compare-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ab-compare-swap, .ab-compare-go { height: 28px; padding: 0 10px; border: 1px solid var(--faint); border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.ab-compare-swap:hover, .ab-compare-go:hover:not(:disabled) { border-color: var(--muted); }
.ab-compare-go:disabled { color: var(--muted); cursor: not-allowed; }
.ab-compare-sum { margin-left: auto; color: var(--ink); font-family: var(--font-mono); font-size: 13px; }
.ab-compare-between { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-size: 13px; }
.ab-compare-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 999px; background: var(--wash); color: var(--ink); text-decoration: none; line-height: 24px; }
.ab-compare-chip:hover { box-shadow: inset 0 0 0 1px var(--faint); }

/* Overlaps (F22): where two agents' unpublished changes would collide, as of a version. One quiet line under the WorkingBar. */
.ab-overlaps { padding: 7px var(--space-4); border-bottom: 1px solid var(--rule); background: var(--paper); color: var(--muted); font-size: 13px; line-height: 20px; }
.ab-overlaps-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.ab-overlaps-row > span { min-width: 0; flex: 1 1 320px; }
.ab-overlaps-row .ab-mark { margin-right: 4px; }
.ab-overlaps-row .ab-btn { height: 24px; padding: 0 var(--space-2); margin-left: auto; }
.ab-overlaps code, .ab-overlap-panel code { font-family: var(--font-mono); color: var(--ink); }
.ab-overlap-panel { display: flex; flex-direction: column; min-height: 0; }
.ab-overlap-panel .ab-panel-head h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 650; }
.ab-overlap-panel-body { flex: 1; min-height: 0; overflow: auto; }
.ab-overlap-panel-body p { margin: 0; font-size: 13px; line-height: 20px; }
.ab-overlap-panel-body .path { font-family: var(--font-mono); font-weight: 500; }
.ab-overlap-sides { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.ab-overlap-side .who { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ink); font-size: 12px; line-height: 16px; }
.ab-overlap-side pre { margin: 4px 0 0; padding: var(--space-2); overflow-x: auto; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); background: var(--surface); color: var(--syn-plain); font-family: var(--font-mono); font-size: 12px; line-height: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
/* After the dashed marks in a listing or the tree. */
.ab-collide { color: var(--muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
/* In the code: a line both agents have unpublished gets two 2px dashed bars in the change-mark column, one in each colour. */
.ab-line .chg.is-overlap { position: relative; margin-left: 0; border: 0; background: none; }
.ab-line .chg.is-overlap::before, .ab-line .chg.is-overlap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed; }
.ab-line .chg.is-overlap::before { left: 0; border-color: var(--ca); }
.ab-line .chg.is-overlap::after { left: 3px; border-color: var(--cb); }

/* The folder page (Folder board): header, facts, the listing. */
.ab-folder { display: flex; flex-direction: column; gap: var(--space-4); }
.ab-folder-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ab-folder-head .ab-crumbs { flex: 1; min-width: 0; }
.ab-folder-facts { margin: 0; color: var(--muted); font: var(--type-ui); }
.ab-flist { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.ab-frow { display: grid; grid-template-columns: minmax(0, 1fr) 150px 160px; align-items: center; gap: var(--space-3); min-height: var(--row-listing); padding: 0 var(--space-3); border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: var(--type-ui); }
.ab-frow:not(.head):hover { background: var(--wash); }
.ab-frow.head { min-height: 32px; color: var(--muted); font: var(--type-caption); }
.ab-frow .name { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; font: var(--type-path); }
.ab-frow .name a { color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-frow .name a:hover { text-decoration: underline; }
.ab-frow .sub { color: var(--muted); font: var(--type-caption); white-space: nowrap; }
.ab-frow .when { color: var(--muted); text-align: right; white-space: nowrap; }
.ab-frow.up .name { color: var(--muted); }
@media (max-width: 720px) {
  .ab-frow { grid-template-columns: minmax(0, 1fr) 150px; }
  .ab-frow .who { display: none; }
}
.ab-readme { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); }
.ab-readme > h2 { margin: 0; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); color: var(--muted); font: var(--type-path); }
.ab-readme .ab-md { margin: 0; padding: var(--space-4); max-width: none; }
.ab-readme > pre { margin: 0; padding: var(--space-3); overflow-x: auto; color: var(--syn-plain); font: var(--type-code); white-space: pre-wrap; overflow-wrap: anywhere; }

/* The file page (File board): the tree, the file, the panel, side by side under the top bar. */
.ab-fileview { flex: 1; min-width: 0; min-height: 0; display: flex; }
.ab-fileview-tree { width: var(--tree-width); flex: none; display: flex; flex-direction: column; min-height: 0; overflow: auto; background: var(--paper); border-right: 1px solid var(--rule); }
.ab-fileview-treehead { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); color: var(--muted); font: var(--type-caption); }
.ab-fileview-jump { padding: 0 var(--space-3) var(--space-2); }
.ab-fileview-main { flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--paper); }
.ab-fileview-panel { flex: none; width: var(--panel-width); max-width: 100%; min-height: 0; overflow: auto; }
.ab-file-path { display: flex; align-items: center; gap: var(--space-2); }
.ab-file-path .ab-crumbs { flex: 1; min-width: 0; }
.ab-file-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ab-file-actions { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.ab-file-note { margin: 0; padding: var(--space-3) var(--space-4); color: var(--muted); font: var(--type-ui); }
@media (max-width: 1100px) {
  .ab-fileview.has-panel .ab-fileview-tree { display: none; }
}
@media (max-width: 640px) {
  .ab-fileview-tree { display: none; }
  /* The side panel as a bottom sheet (PhoneStory board): over the page's lower part with a grabber, whatever it holds. The code gets room under it to scroll a line out from behind. */
  .ab-fileview-panel { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 70vh; padding: 14px 0 env(safe-area-inset-bottom); overflow-y: auto; overscroll-behavior: contain; border-left: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -12px 32px rgb(0 0 0 / .55), 0 0 0 1px var(--rule); }
  .ab-fileview-panel::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--faint); }
  .ab-fileview.has-panel .ab-fileview-body { padding-bottom: 50vh; }
}

/* The frame's scrolling: the top bar, the header, the tree and the panel stay put; the body scrolls on its own. */
.ab-app.is-full:has(.ab-fileview) { height: 100vh; min-height: 0; }
.ab-app.is-full:has(.ab-fileview) .ab-full { overflow: hidden; }
.ab-fileview-main { display: flex; flex-direction: column; overflow: hidden; }
.ab-fileview-main .ab-file-head { flex: none; }
.ab-fileview-body { position: relative; flex: 1; min-height: 0; overflow: auto; }
.ab-fileview-main .ab-file-head { gap: var(--space-2); }
.ab-file-path .ab-vpick { margin-left: auto; }
.ab-file-head .facts { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--muted); font: var(--type-ui); }
.ab-writtenby { display: inline-flex; align-items: center; gap: var(--space-2); }
.ab-fileview-body .ab-folder { max-width: var(--measure); margin: 0 auto; padding: var(--space-4); box-sizing: border-box; }
.ab-fileview-main > .ab-file-head .ab-folder-facts { margin: 0; }

/* Blame mode: a column in front of the gutter says who wrote a run, which change, and when. */
.ab-code.is-blame .ab-line { grid-template-columns: 300px 3px 5px 48px 2px minmax(0, 1fr) auto; }
.ab-line .bi { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; padding: 0 var(--space-3) 0 var(--space-4); overflow: hidden; color: var(--muted); font: var(--type-caption); text-decoration: none; white-space: nowrap; }
.ab-line .bi b { color: var(--ink); font-weight: 600; }
.ab-line .bi .num { font-family: var(--font-mono); }
.ab-line .bi .msg { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ab-line a.bi:hover { color: var(--ink); background: var(--wash); }
@media (max-width: 900px) {
  .ab-code.is-blame .ab-line { grid-template-columns: 3px 5px 48px 2px minmax(0, 1fr) auto; }
  .ab-line .bi { display: none; }
}

/* Blame mode: a column in front of the gutter says who wrote a run, which change, and when. */
.ab-code.is-blame .ab-line { grid-template-columns: 300px 3px 5px 48px 2px minmax(0, 1fr) auto; }
.ab-line .bi { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; padding: 0 var(--space-3) 0 var(--space-4); overflow: hidden; color: var(--muted); font: var(--type-caption); text-decoration: none; white-space: nowrap; }
.ab-line .bi b { color: var(--ink); font-weight: 600; }
.ab-line .bi .num { font-family: var(--font-mono); }
.ab-line .bi .msg { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ab-line a.bi:hover { color: var(--ink); background: var(--wash); }
@media (max-width: 900px) {
  .ab-code.is-blame .ab-line { grid-template-columns: 3px 5px 48px 2px minmax(0, 1fr) auto; }
  .ab-line .bi { display: none; }
}

.ab-history-older { margin: 0; padding: 12px 4px; }

/* On a phone the header scrolls away with the page's body: it would take most of the screen otherwise. */
@media (max-width: 640px) {
  .ab-app.is-full:has(.ab-fileview) { height: auto; min-height: 100vh; }
  .ab-app.is-full:has(.ab-fileview) .ab-full { overflow: visible; }
  .ab-fileview-main { display: block; overflow: visible; }
  .ab-fileview-body { overflow-x: auto; overflow-y: visible; }
  .ab-writtenby > span:not(.ab-strip) { display: none; }
  .ab-file-head .ab-crumbs .ab-copy, .ab-file-head .ab-crumbs button { display: none; }
}

/* Since you last looked (F29): a dot in front of what changed, and the band that counts them. */
.newdot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--new); }
.ab-frow.is-new .name .newdot { align-self: center; }
.ab-since-band { display: flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--muted); font: var(--type-ui); }
.ab-since { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--muted); font: var(--type-ui); white-space: nowrap; }
.ab-since .newdot { margin-right: var(--space-1); }

/* A path with no file at this version (the Gone board). */
.ab-gone { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--measure); padding: var(--space-6) var(--space-4); color: var(--muted); font: var(--type-ui); }
.ab-gone p { margin: 0; }
.ab-gone .lead { color: var(--ink); font: var(--type-heading); }

/* A side panel that is only a line and a button: reading an agent's changes, or why it could not. */
.ab-panel-note { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); color: var(--muted); }
.ab-panel-note p { margin: 0; }

/* The browser's own checkbox is blue, and blue isn't in the system (Design Lead): ink fill, 14px. */
.ab-raise input[type="checkbox"], .announce input[type="checkbox"] { accent-color: var(--ink); width: 14px; height: 14px; margin: 0 6px 0 0; }

/* An agent's view of a folder or file (F25): a line that says whose it is. */
.ab-agent-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--rule); color: var(--muted); font: var(--type-ui); }
.ab-folder .ab-agent-note { padding-left: 0; padding-right: 0; border-bottom: 0; }
.ab-line .bi .ab-mark { align-self: center; flex: none; }

/* Every row has the same small slot before its name (the dot, or nothing), so the names line up. */
.ab-frow .newslot { display: inline-flex; flex: none; align-items: center; width: 6px; align-self: center; }

/* A Markdown file rendered: the text, with its outline beside it at the right (under it on a phone). */
.ab-md-wrap { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: var(--space-6); padding: 0 var(--space-4); }
.ab-md-wrap .ab-md { flex: 1; min-width: 0; margin: 0; padding-left: 0; padding-right: 0; }
.ab-md-wrap .ab-md-outline { position: sticky; top: var(--space-4); flex: none; width: 220px; padding-top: var(--space-6); }
@media (max-width: 900px) {
  .ab-md-wrap { flex-direction: column; align-items: stretch; gap: 0; }
  .ab-md-wrap .ab-md-outline { position: static; width: auto; padding-bottom: var(--space-2); }
}

/* Back in time: the two buttons stay together. */
.ab-when-buttons { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; margin-left: var(--space-2); }

/* A path that isn't here: the actions are buttons, side by side. */
.ab-nothere-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Rendered | Source: a two-option switch that shows which one is on. */
.ab-seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.ab-seg button { height: 28px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); font: var(--type-ui); cursor: pointer; }
.ab-seg button + button { border-left: 1px solid var(--rule-strong); }
.ab-seg button[aria-pressed="true"] { background: var(--select); color: var(--ink); font-weight: 600; }

/* Rendered Markdown: headings stay under the page's own title in size. */
.ab-md h1 { font-size: 28px; line-height: 34px; }
.ab-md h2 { font-size: 22px; line-height: 28px; }
.ab-md h3 { font-size: 18px; line-height: 24px; }

/* The outline's "On this page": beside the text it is a heading; on a phone, a closed button above it. */
.ab-md-outline summary { color: var(--muted); font: var(--type-caption); cursor: pointer; }
@media (min-width: 901px) {
  .ab-md-outline summary { pointer-events: none; list-style: none; margin-bottom: var(--space-2); }
  .ab-md-outline summary::-webkit-details-marker { display: none; }
}
@media (max-width: 900px) {
  .ab-md-outline summary { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--ink); font: var(--type-ui); }
}

/* Written by (F33): a strip per row, between the name and the last change. */
.ab-frow { grid-template-columns: minmax(0, 1fr) 96px 150px 160px; }
.ab-frow .strip { display: flex; align-items: center; }
.ab-frow.up { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) {
  .ab-frow { grid-template-columns: minmax(0, 1fr) 150px; }
  .ab-frow .strip { display: none; }
}

/* A row the agent's draft touched: the Last change column says so; on a phone, where that column is hidden, the When cell does. */
.ab-frow .when .unpub { display: none; align-items: center; gap: var(--space-1); }
@media (max-width: 720px) {
  .ab-frow .when .unpub { display: inline-flex; }
}

/* Waiting on you (Waiting and PhoneWaiting boards): a short list on the left, one ask open on the right; Answered is its own tab. */
.ab-waiting { display: flex; flex-direction: column; gap: 20px; padding: 24px 32px 64px; max-width: 1240px; margin: 0 auto; box-sizing: border-box; color: var(--ink); }
.ab-waiting-head { display: flex; flex-direction: column; gap: 14px; border-bottom: 1px solid var(--rule); }
.ab-waiting-head h1 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 750; letter-spacing: -0.02em; }
.ab-waiting-head [role="group"] { display: flex; gap: 2px; }
.ab-waiting-head button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 550; cursor: pointer; }
.ab-waiting-head button[aria-pressed="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
.ab-waiting-head button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ab-waiting-head .n { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.ab-waiting-none { margin: 0; }
.ab-waiting-none a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ab-waiting > .ab-crumbs { margin-bottom: -8px; }
.ab-waiting-cols { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 640px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.ab-waiting-phonebar { display: none; }
.ab-waiting-list { display: flex; flex-direction: column; border-right: 1px solid var(--rule); }
.ab-wrow { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ab-wrow:hover { background: var(--wash); }
.ab-wrow[aria-pressed="true"] { background: var(--wash); box-shadow: inset 2px 0 0 var(--ink); }
.ab-wrow:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ab-wrow .top { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ab-wrow .due { margin-left: auto; color: var(--ink); font-weight: 600; }
.ab-wrow .q { font-size: 14px; line-height: 20px; font-weight: 600; }
.ab-wrow .who { font-size: 12px; line-height: 16px; color: var(--muted); }
.ab-wrow .who { display: flex; align-items: center; gap: 6px; }
.ab-ask .meta .by .ab-person { vertical-align: middle; margin: 0 0 0 2px; }
.ab-wrow .ab-person, .ab-ask .meta .ab-person { display: inline-flex; align-items: center; gap: 6px; }
.ab-wrow .ab-person-mark, .ab-ask .meta .ab-person-mark { width: 16px; height: 16px; font-size: 10px; }
.ab-wrow .ab-person-name, .ab-ask .meta .ab-person-name { font-size: inherit; font-weight: 500; color: inherit; }
.ab-waiting-item { padding: 24px 28px; min-width: 0; }
.ab-ask { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.ab-ask .head { display: flex; flex-direction: column; gap: 8px; }
.ab-ask .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: 13px; }
.ab-ask .meta .due { color: var(--ink); font-weight: 600; }
.ab-ask h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.015em; }
.ab-ask p { margin: 0; }
.ab-ask .holds { color: var(--muted); font-size: 13px; line-height: 20px; }
.ab-ask .holds > span:first-child { color: var(--ink); }
.ab-ask section { display: flex; flex-direction: column; gap: 8px; }
.ab-ask h3 { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.ab-ask section > p { font-size: 15px; line-height: 23px; }
.ab-ask .by { color: var(--muted); font-size: 12px; }
.ab-option { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border-radius: 8px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--rule); }
.ab-option.is-on { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--surface); }
.ab-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ab-option input:focus-visible ~ .dot { outline: 2px solid var(--ink); outline-offset: 2px; }
.ab-option .dot { width: 16px; height: 16px; border-radius: 50%; flex: none; box-sizing: border-box; border: 1.5px solid var(--faint); }
.ab-option.is-on .dot { border: 5px solid var(--ink); }
.ab-option .text { font-size: 14px; font-weight: 500; }
.ab-option.is-on .text { font-weight: 600; }
.ab-option .tag { margin-left: auto; color: var(--muted); font-size: 12px; }
.ab-ask textarea { resize: vertical; box-sizing: border-box; width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; line-height: 21px; }
.ab-ask textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ab-ask .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.ab-answered { list-style: none; margin: 0; padding: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
.ab-answered li { display: flex; justify-content: space-between; gap: 24px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.ab-answered li:last-child { border-bottom: 0; }
.ab-answered .said { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ab-answered .q { font-size: 14px; font-weight: 600; }
.ab-answered blockquote { margin: 0; color: var(--muted); font-size: 14px; line-height: 21px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-answered .when { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; color: var(--muted); font-size: 12px; }
@media (max-width: 640px) {
  .ab-waiting { padding: 0 0 32px; gap: 0; }
  .ab-waiting-head { padding: 8px 0 0; margin-bottom: 8px; gap: 0; }
  .ab-waiting-head button:first-child { padding-left: 0; }
  .ab-waiting > .ab-crumbs { padding: 0; margin-bottom: 8px; }
  .ab-waiting-head h1 { display: none; }
  .ab-waiting-cols { display: flex; flex-direction: column; min-height: 0; border-radius: 0; box-shadow: none; }
  .ab-waiting-list { display: none; }
  .ab-waiting-phonebar { display: flex; align-items: center; gap: 8px; padding: 0; height: 52px; border-bottom: 1px solid var(--rule); }
  .ab-waiting-phonebar .title { font-size: 15px; font-weight: 650; }
  .ab-waiting-phonebar .count { margin-left: auto; color: var(--muted); font-size: 12px; font-family: var(--font-mono); }
  .ab-waiting-item { padding: 20px 0 32px; }
  .ab-answered li { flex-direction: column; gap: 8px; }
  .ab-answered .when { align-items: flex-start; }
}

/* One issue (Issues, the Issue board): the properties, the activity, and the version out for it beside them. */
.ab-issue { flex: 1; min-width: 0; min-height: 0; display: flex; }
.ab-issue-main { flex: none; width: min(640px, 48%); min-height: 0; overflow: auto; padding: var(--space-6) var(--space-6) var(--space-6); border-right: 1px solid var(--rule); box-sizing: border-box; }
.ab-issue-main h1 { margin: var(--space-3) 0 var(--space-4); font: var(--type-display); }
.ab-issue-main h1 .num { color: var(--muted); font-family: var(--font-mono); font-size: 20px; font-weight: 500; }
.ab-issue-version .num { color: var(--muted); font-family: var(--font-mono); font-weight: 450; }
.ab-props { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0 0 22px; font: var(--type-ui); }
.ab-props dt { color: var(--muted); }
.ab-props dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.ab-status { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.ab-status.st-open, .ab-status.st-dropped { color: var(--muted); }
.ab-status.st-blocked { color: var(--fail); }
.ab-status.st-done { color: var(--pass); }
.ab-subs { display: inline-flex; gap: 3px; }
.ab-subs i { display: block; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); }
.ab-subs i.st-in-progress { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ab-subs i.st-in-review { box-shadow: inset 0 0 0 1.5px var(--ink); background: radial-gradient(circle, var(--ink) 25%, transparent 30%); }
.ab-subs i.st-blocked { box-shadow: inset 0 0 0 1.5px var(--fail); }
.ab-subs i.st-done { background: var(--pass); box-shadow: none; }
.ab-activity h2 { margin: 22px 0 var(--space-2); font-family: var(--font-sans); font-size: 13px; font-weight: 650; }
.ab-activity ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ab-activity li { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--rule); font: var(--type-ui); color: var(--muted); }
.ab-activity li b { color: var(--ink); font-weight: 600; }
.ab-activity li .lead { flex: none; width: 16px; display: inline-flex; align-items: center; align-self: center; }
.ab-activity li .what { flex: 1; min-width: 0; }
.ab-activity li .when { flex: none; white-space: nowrap; margin-left: auto; padding-left: var(--space-3); }
.ab-issue-desc { margin: 0 0 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.ab-issue-desc .ab-md, .ab-issue-main .ab-issue-desc .ab-md { margin: 0; padding: 0; max-width: none; }
.ab-crumbs .parent { display: inline-flex; gap: 0.5ch; max-width: 22ch; min-width: 0; }
.ab-crumbs .parent .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-chip { display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--wash); color: var(--ink); text-decoration: none; line-height: 22px; font-family: var(--font-mono); font-size: 12px; }
.ab-chip:hover { box-shadow: inset 0 0 0 1px var(--faint); }
.ab-props dd .ab-agent { margin-right: var(--space-1); }
.ab-issue-version .head .ab-btn { margin-left: auto; }
.ab-issue-version { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: var(--space-6); box-sizing: border-box; }
.ab-issue-version .head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.ab-issue-version .head h2 { margin: 0; font: var(--type-heading); }
.ab-issue-version .head .when, .ab-issue-version .head .counts { color: var(--muted); font: var(--type-ui); }
.ab-issue-version .message { margin: var(--space-2) 0 var(--space-4); color: var(--muted); font: var(--type-ui); }
.ab-issue-version .files { display: flex; flex-direction: column; margin-bottom: var(--space-4); border-top: 1px solid var(--rule); }
.ab-issue-version .files a { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; font: var(--type-path); }
.ab-issue-version .files a .num { color: var(--muted); }
.ab-issue-version .diff { margin-bottom: var(--space-6); }
.ab-issue-version .diff h3 { margin: 0 0 var(--space-2); font: var(--type-path); }
@media (max-width: 720px) {
  .ab-activity li { flex-wrap: wrap; }
  .ab-activity li .what { flex: 1 1 calc(100% - 28px); }
  .ab-activity li .when { flex: 1 1 100%; margin-left: 0; padding: 0 0 0 24px; font-size: 12px; }
}
@media (max-width: 900px) {
  .ab-issue { flex-direction: column; overflow: auto; }
  .ab-issue-main, .ab-issue-version { width: auto; overflow: visible; border-right: 0; }
  .ab-crumbs .parent .t { display: none; }
}

/* StatusMark (Issues): the five marks. Open and dropped are muted, the rest ink; the colour never says the status. */
.ab-status { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.ab-status-mark { flex: none; display: block; color: var(--ink); }
.ab-status-mark.is-dim { color: var(--muted); }
.ab-status-mark .ring { fill: none; stroke: currentColor; stroke-width: 1.5; }
.ab-status-mark.is-in-progress .ring { stroke-dasharray: 2.3 1.8; }
.ab-status-mark .dot { fill: currentColor; }
.ab-status-mark .bar { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.ab-status-mark .disc { fill: currentColor; }
.ab-status-mark .check { fill: none; stroke: var(--on-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Issues (board Main): the page, the waiting line, the progress bar, the list with its filters, the side lists. */
.ab-page:has(> .ab-issues) { max-width: 1440px; padding: var(--space-6) 32px 64px; }
.ab-issues { display: flex; flex-direction: column; gap: 20px; }
.ab-issues-head { display: flex; align-items: center; gap: var(--space-4); }
.ab-issues-head h1 { margin: 0; font-size: 26px; font-weight: 750; letter-spacing: -0.01em; }
.ab-issues-head .ab-file-note { margin: 0; color: var(--muted); font-size: 13px; }
.ab-issues-head .ab-btn { margin-left: auto; }

.ab-wait-line { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3) 0 var(--space-4); background: var(--surface); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.ab-wait-line.is-none { color: var(--muted); font-size: 13px; margin: 0; padding: var(--space-3) var(--space-4); }
.ab-wait-line .lead { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.ab-wait-line .lead:hover { text-decoration: none; }
.ab-wait-line .count, .ab-issues .count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.ab-wait-line .rule { width: 1px; align-self: stretch; margin: var(--space-2) 0; background: var(--rule-strong); }
.ab-wait-line .ask { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ab-wait-line .due { flex: none; color: var(--ink); font-size: 13px; }
.ab-wait-line .lead + .ab-btn { margin-left: auto; }

.ab-progress { display: flex; flex-direction: column; gap: var(--space-3); }
.ab-progress-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.ab-progress-head h2 { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; font-size: 16px; font-weight: 650; }
.ab-progress-head h2 a { color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-progress-head .note { color: var(--muted); font-size: 13px; }
.ab-progress-head .legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0 0 0 auto; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.ab-progress-head .legend li { display: inline-flex; align-items: center; gap: 6px; }
.ab-progress-head .legend b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-progress .segments { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.ab-progress .seg { flex: 1 1 0; height: 10px; border-radius: var(--radius-pill); background: var(--ink); }
.ab-progress .seg a { display: block; height: 100%; border-radius: inherit; }
.ab-progress .seg a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ab-progress .seg.is-open, .ab-progress .seg.is-dropped { background: var(--rule); }
.ab-progress .seg.is-in-progress { background: transparent; border: 1.5px dashed var(--ink); }
.ab-progress .seg.is-in-review, .ab-progress .seg.is-blocked { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

.ab-issues-cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-8) 32px; align-items: start; }
.ab-issues-filters { display: flex; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-3); border-bottom: 1px solid var(--rule); }
.ab-issues-filters .ab-tabs { margin-top: 0; gap: var(--space-4); flex-wrap: wrap; }
.ab-issues-filters .ab-tabs a { display: inline-flex; align-items: baseline; gap: 6px; margin-bottom: -1px; padding: var(--space-2) 0; }
.ab-label-filter { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); color: var(--muted); font-size: 13px; }
.ab-tabs + .ab-label-filter { margin-left: auto; }
.ab-label-filter select { font-family: var(--font-mono); font-size: 12px; }
.ab-agent-filter { display: flex; gap: var(--space-1); margin: 0 0 var(--space-2) auto; }
.ab-agent-filter a { display: inline-flex; border-radius: var(--radius); }
.ab-agent-filter a.is-on .ab-mono { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.ab-issues-empty { margin: var(--space-6) 0; color: var(--muted); }

.ab-issues-list { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.ab-issues-list ul { margin: 0; padding: 0; list-style: none; }
.ab-issues-group { display: flex; align-items: center; gap: var(--space-2); height: 34px; margin: 0; padding: 0 var(--space-4); background: var(--surface); font-size: 13px; font-weight: 650; border-top: 1px solid var(--rule); }
.ab-issues-list section:first-child .ab-issues-group { border-top: 0; }
.ab-irow { display: grid; grid-template-columns: 16px 40px minmax(0, 1fr) 104px 116px 76px; align-items: center; column-gap: var(--space-3); height: 40px; padding: 0 var(--space-4); color: var(--ink); border-top: 1px solid var(--rule); }
.ab-irow { position: relative; }
.ab-irow:hover { background: var(--wash); text-decoration: none; }
.ab-irow:has(.rowlink:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
.ab-irow .rowlink { display: flex; flex: 0 1 auto; min-width: 0; color: inherit; text-decoration: none; }
.ab-irow .rowlink::after { content: ''; position: absolute; inset: 0; }
.ab-irow .labels { position: relative; flex: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.ab-irow .labels .ab-chip { line-height: 20px; }
.ab-irow .labels .more { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.ab-irow .id { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-irow .main { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ab-irow .title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.ab-irow .parent { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-irow .detail { flex: none; white-space: nowrap; color: var(--muted); font-size: 12px; }
.ab-irow .versions, .ab-irow .time { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-irow .time { text-align: right; }
.ab-irow .agent { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ab-issues-side { display: flex; flex-direction: column; gap: var(--space-6); }
.ab-side-list h2 { display: flex; align-items: baseline; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 13px; font-weight: 650; }
.ab-side-list ul { margin: 0; padding: 0; list-style: none; }
.ab-side-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-3); min-height: 44px; border-top: 1px solid var(--rule); font-size: 13px; }
.ab-side-list li .what { display: flex; flex-direction: column; min-width: 0; }
.ab-side-list li .what b { font-weight: 600; }
.ab-side-list li .sub { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-side-list li .none { color: var(--faint); font-size: 12px; }
.ab-side-list .note { margin: var(--space-2) 0 0; color: var(--muted); font-size: 12px; }
.ab-side-list ul.is-versions li { grid-template-columns: 16px 34px minmax(0, 1fr) auto; min-height: 30px; column-gap: var(--space-2); }
.ab-side-list ul.is-versions .v { font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-side-list ul.is-versions .what { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-side-list ul.is-versions .when { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: 12px; }
.ab-irow .ab-progress { flex: 0 1 160px; min-width: 60px; }
.ab-progress .segments.is-small { gap: 2px; }
.ab-progress .segments.is-small .seg { height: 6px; }

@media (max-width: 900px) {
  .ab-issues-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ab-page:has(> .ab-issues) { padding: var(--space-4) var(--space-4) 48px; }
  .ab-issues { gap: var(--space-4); }
  .ab-issues-head h1 { font-size: 22px; }
  .ab-wait-line { flex-wrap: wrap; padding: var(--space-2) var(--space-3); }
  .ab-wait-line .rule { display: none; }
  .ab-wait-line .lead { order: 1; }
  .ab-wait-line .ab-btn { order: 2; margin-left: auto; }
  .ab-wait-line .ask { flex-basis: 100%; order: 3; white-space: normal; }
  .ab-wait-line .due { flex-basis: 100%; order: 4; color: var(--muted); }
  .ab-progress-head .legend { margin-left: 0; }
  .ab-issues-filters { flex-wrap: wrap; }
  .ab-issues-filters .ab-tabs { gap: 0 var(--space-3); }
  .ab-issues-filters .ab-tabs a { white-space: nowrap; }
  .ab-agent-filter { margin-left: 0; }
  .ab-irow { grid-template-columns: 16px 36px minmax(0, 1fr) 76px; height: auto; min-height: 44px; padding: var(--space-2) var(--space-3); row-gap: 2px; }
  .ab-irow .versions, .ab-irow .agent, .ab-irow .labels { display: none; }
  .ab-irow .main { flex-wrap: wrap; }
  .ab-irow .title { white-space: normal; }
}
.ab-issue-main .ab-md { max-width: none; margin: 0 0 var(--space-4); padding: 0; }

/* Waiting on you: the answer's controls while the site isn't taking answers (dimmed, still shaped), the error, the phone's order. */
.ab-option.is-off { opacity: .5; cursor: default; }
.ab-ask textarea:disabled { opacity: .5; }
.ab-ask .actions { flex-direction: row; align-items: center; gap: 12px; }
.ab-ask .actions button:disabled { background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: .4; cursor: default; }
.ab-ask-error { color: var(--fail); font-size: 13px; }
.ab-ask h3 .by { margin-left: 6px; font-weight: 400; }

/* New issue, the small size (Design Lead): the lines and the notify list as plain text under their labels. */
.ab-newissue { display: flex; flex-direction: column; }
.ab-newissue-lines, .ab-newissue-notify { margin: 0; }
.ab-newissue p.ab-newissue-chip, .ab-newissue-chip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; margin: 0; }
.ab-newissue-chip code { font-family: var(--font-mono); font-size: 12px; line-height: 16px; overflow-wrap: anywhere; }
.ab-newissue-link { width: 14px; height: 14px; flex: none; color: var(--muted); }
.ab-newissue .ab-newissue-at, .ab-newissue p.ab-newissue-notify, .ab-newissue-at, .ab-newissue-notify { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--muted); }
.ab-newissue-notify .ab-agent { color: inherit; font-size: inherit; }
.ab-newissue-notify { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ab-raise-field input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px; }

/* New issue, the expanded size: a modal over the page. */
.ab-modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 48px 16px; background: rgb(0 0 0 / .6); overflow-y: auto; }
.ab-modal { width: 100%; max-width: 640px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.ab-modal section { padding: 14px var(--space-4); border-bottom: 1px solid var(--rule); }
.ab-modal section:last-child { border-bottom: 0; }
.ab-modal textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px; resize: vertical; }
.ab-modal-hint { align-self: flex-end; color: var(--muted); font-size: 12px; line-height: 16px; }
.ab-modal-row { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.ab-notify-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ab-modal-row.is-one { grid-template-columns: 1fr; }
/* Labels in the New issue forms: the chip is as wide as its name, with the × 6px after it; the box is a text box that suggests, so no ▼. */
.ab-label-list li { padding: 0; background: none; }
.ab-label-list .ab-chip { gap: 6px; padding: 0 4px 0 8px; }
.ab-chip-x { margin: 0; padding: 0 2px; border: 0; background: none; color: var(--muted); font: inherit; line-height: inherit; cursor: pointer; }
.ab-chip-x:hover { color: var(--ink); }
.ab-chip-x:focus-visible { outline: 2px solid var(--ink); border-radius: var(--radius); }
.ab-label-input::-webkit-calendar-picker-indicator { display: none !important; }
.ab-notify-list li { display: inline-flex; align-items: center; gap: 4px; padding: 0 4px 0 8px; border-radius: var(--radius-pill); background: var(--wash); }
.ab-modal input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px; }
@media (max-width: 720px) {
  /* "Recommended by …" sits on its own muted line under the option's text, so neither wraps into the other (Design Lead). */
  .ab-option { box-sizing: border-box; flex-wrap: wrap; align-content: center; row-gap: 0; padding-top: 8px; padding-bottom: 8px; }
  .ab-option .text { flex: 1; min-width: 0; }
  .ab-option .tag { order: 3; flex-basis: 100%; margin-left: 28px; }
}
.ab-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ab-modal-foot > .is-ghost { margin-right: auto; }

/* Editing an issue (the Edit board): the title and fields in place, Notify with who is told, the red line, Cancel and Save. */
.ab-issue-main h1 { display: flex; align-items: baseline; gap: var(--space-2); }
.ab-issue-edit { margin-left: auto; align-self: center; flex: none; }
.ab-edit { display: flex; flex-direction: column; gap: var(--space-3); }
.ab-edit-heading { margin: var(--space-3) 0 0; font: var(--type-heading); color: var(--muted); }
.ab-edit-heading .num { font-family: var(--font-mono); font-weight: 450; }
.ab-edit-title input, .ab-edit-description textarea, .ab-edit select { box-sizing: border-box; color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); font: var(--type-ui); outline: 0; }
.ab-edit-title input { display: block; width: 100%; padding: 6px 10px; font: var(--type-display); }
.ab-edit-description { display: flex; flex-direction: column; gap: 6px; }
.ab-edit-description textarea { width: 100%; padding: 8px 10px; resize: vertical; line-height: 21px; }
.ab-edit-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.ab-edit input:focus-visible, .ab-edit textarea:focus-visible, .ab-edit select:focus-visible { box-shadow: 0 0 0 2px var(--select); }
.ab-edit select { height: 28px; max-width: 100%; padding: 0 8px; }
.ab-edit .ab-props dt label { color: var(--muted); }
.ab-edit-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; max-width: 100%; padding: 0 3px 0 9px; box-sizing: border-box; border-radius: 999px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule); font-size: 12px; color: var(--ink); }
.ab-edit-chip.is-fixed { padding-right: 9px; }
.ab-edit-chip .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-edit-chip button { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; }
.ab-edit-chip button:hover { color: var(--ink); }
.ab-edit-notify { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: 0; padding: 12px 14px; border: 0; border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.ab-edit-tick { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--type-ui); font-weight: 600; cursor: pointer; }
.ab-edit-told { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ab-edit-quiet { color: var(--muted); font: var(--type-ui); }
.ab-edit-error { margin: 0; color: var(--fail); font: var(--type-ui); }
.ab-edit-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
.ab-edit-actions .ab-btn[disabled] { cursor: default; }

@media (max-width: 720px) {
  /* An issue's properties on a phone: the labels take less of the line, each on one, and the values wrap (Design Lead). */
  .ab-props { grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px; }
  .ab-props dt { white-space: nowrap; }
}

/* Sizes in a folder (Files, "Sizes in a folder"): a Size column after Name, right-aligned in tabular figures, the unit muted;
   the Written by strip is as long as the entry, in a 120px area. On a phone the columns are Name, Size and When. Off with SIZES=off. */
.ab-flist.has-sizes .ab-frow { grid-template-columns: minmax(0, 1fr) 84px 120px 150px 160px; }
.ab-flist.has-sizes .ab-frow.up { grid-template-columns: minmax(0, 1fr); }
.ab-frow .size { text-align: right; white-space: nowrap; color: var(--ink); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.ab-frow .size .unit { color: var(--muted); }
.ab-frow.head .size { color: var(--muted); font: var(--type-caption); }
@media (max-width: 720px) {
  .ab-flist.has-sizes .ab-frow { grid-template-columns: minmax(0, 1fr) 84px 76px; }
  .ab-flist.has-sizes .ab-frow .when { white-space: normal; }
  .ab-flist.has-sizes .ab-frow.up { grid-template-columns: minmax(0, 1fr); }
}

/* One issue with no version out: one centred column at the reading measure (no empty pane); linked lines get the pane when there are some. */
.ab-issue.is-single { justify-content: center; overflow: auto; }
.ab-issue.is-single .ab-issue-main { flex: 0 1 760px; width: auto; max-width: 100%; border-right: 0; overflow: visible; }
.ab-issue-desc .ab-md-block:first-child > :first-child { margin-top: 0; }
.ab-issue-desc .ab-md-block:last-child > :last-child { margin-bottom: 0; }
.ab-linked { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: var(--space-2) 0; overflow-x: auto; font: var(--type-code); }
.ab-linked .line { display: flex; gap: var(--space-3); min-height: 20px; line-height: 20px; }
.ab-linked .ln { flex: none; width: 48px; padding-left: var(--space-2); box-sizing: border-box; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-linked .text { white-space: pre; color: var(--syn-plain); padding-right: var(--space-3); }
.ab-issue-lines .message .path { font: var(--type-path); color: var(--ink); }
@media (max-width: 900px) {
  .ab-issue.is-single { justify-content: flex-start; }
  .ab-issue.is-single .ab-issue-main { flex: none; }
}
.ab-newissue-page { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; }
.ab-newissue-page textarea, .ab-newissue-page input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px; }
.ab-newissue-page textarea { resize: vertical; }
.ab-newissue-tabs { display: flex; gap: var(--space-4); }
.ab-newissue-tabs button { all: unset; cursor: pointer; padding: 4px 0; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; }
.ab-newissue-tabs button.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.ab-newissue-tabs button:hover { color: var(--ink); }
.ab-newissue-tabs button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ab-newissue-preview { min-height: 120px; padding: 8px; border: 1px solid var(--rule); border-radius: var(--radius); }
@media (max-width: 720px) { .ab-newissue-page .ab-modal-row { grid-template-columns: 1fr; } }
.ab-told { display: inline-flex; vertical-align: middle; margin-right: var(--space-2); }
.ab-activity li .ab-person-name, .ab-props .ab-person-name { font-size: inherit; }
.ab-newissue-wrap { display: flex; justify-content: center; align-items: flex-start; gap: var(--space-6); width: 100%; }
.ab-page:has(> .ab-newissue-wrap.has-pane) { max-width: 1440px; padding: var(--space-6) 32px 64px; }
.ab-newissue-wrap.has-pane { justify-content: flex-start; }
.ab-newissue-wrap.has-pane .ab-newissue-page { margin: 0; flex: 0 0 600px; max-width: 600px; }
.ab-newissue-pane { flex: 1 1 0; min-width: 0; padding: 0; overflow: visible; }
@media (max-width: 1100px) { .ab-newissue-pane { display: none; } .ab-newissue-wrap.has-pane { justify-content: center; } .ab-newissue-wrap.has-pane .ab-newissue-page { flex: 0 1 760px; max-width: 760px; margin: 0 auto; } .ab-page:has(> .ab-newissue-wrap.has-pane) { max-width: var(--measure); padding: var(--space-4) var(--space-4) 48px; } }

/* New issue: the column beside the form holds the linked lines and the similar issues (NewPage board). */
.ab-newissue-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.ab-newissue-side > .ab-newissue-pane { flex: none; }
.ab-similar { display: flex; flex-direction: column; gap: var(--space-2); }
.ab-similar h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 650; }
.ab-similar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ab-similar li { border-bottom: 1px solid var(--rule); }
.ab-similar li:first-child { border-top: 1px solid var(--rule); }
.ab-similar a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 4px; color: var(--ink); text-decoration: none; }
.ab-similar a:hover { background: var(--wash); }
.ab-similar a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ab-similar .num { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.ab-similar .title { min-width: 0; font-size: 14px; line-height: 20px; }
@media (max-width: 1100px) {
  .ab-newissue-wrap.has-pane { flex-direction: column; align-items: center; }
  .ab-newissue-side { width: 100%; max-width: 760px; flex: none; }
}

/* Drafts (the Drafts board): the person's own saved issues at the top of the issues list; a dashed mark, the title, where it came from, when it was saved, Delete. */
.ab-drafts { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); margin-bottom: var(--space-4); overflow: hidden; }
.ab-draft-mark { flex: none; color: var(--muted); }
.ab-drafts-head { display: flex; align-items: center; gap: var(--space-2); min-height: 34px; padding: 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--rule); }
.ab-drafts-head h2 { margin: 0; font-size: 13px; font-weight: 650; }
.ab-drafts-head .count { color: var(--muted); font-size: 12px; }
.ab-drafts-head .only { margin-left: auto; color: var(--muted); font-size: 12px; }
.ab-draft-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto auto; align-items: center; column-gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3) 0 var(--space-4); border-bottom: 1px solid var(--rule); }
.ab-draft-row:last-child { border-bottom: 0; }
.ab-draft-row:hover { background: var(--wash); }
.ab-draft-row .what { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ab-draft-open { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font: var(--type-ui); font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.ab-draft-open.is-untitled { color: var(--muted); font-style: italic; }
.ab-draft-open:hover { text-decoration: underline; }
.ab-draft-from { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 7px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); font-size: 12px; line-height: 20px; }
.ab-draft-from.is-path { padding: 0; box-shadow: none; font-family: var(--font-mono); }
.ab-draft-row .saved { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-draft-delete { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--muted); cursor: pointer; }
.ab-draft-delete:hover { color: var(--ink); background: var(--wash); }
.ab-drafts .ab-raise-error { margin: 0; padding: var(--space-2) var(--space-4); }
@media (max-width: 720px) {
  .ab-draft-row { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .ab-draft-row .saved { display: none; }
  .ab-draft-from { display: none; }
  .ab-drafts-head .only { display: none; }
}

/* Labels on an issue's page: the list's chip, with × to take it off, and a small field to add one. */
.ab-issue-labels { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ab-issue-labels .ab-label { gap: 6px; padding-right: 4px; }
.ab-issue-labels .ab-label a { color: inherit; text-decoration: none; }
.ab-issue-labels .ab-label a:hover { text-decoration: underline; }
.ab-label-add input { width: 120px; height: 24px; padding: 0 8px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.ab-label-add input::placeholder { color: var(--muted); font-family: var(--font-sans); }
.ab-label-add input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* The Drafts tab (the abso Drafts canvas, board Main): a facts row; Unpublished, Named drafts and Refused as rows in a bordered table; the quiet box. */
.ab-dr { display: flex; flex-direction: column; gap: 28px; padding: 24px 0 64px; }
.ab-dr header { display: flex; flex-direction: column; gap: 6px; }
.ab-dr h1 { margin: 0; font-size: 26px; line-height: 32px; font-weight: 750; letter-spacing: -0.02em; }
.ab-dr-facts { margin: 0; color: var(--muted); font: var(--type-ui); }
.ab-dr-mono { font-family: var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-dr-section { display: flex; flex-direction: column; gap: 10px; }
.ab-dr-section .head { display: flex; align-items: baseline; gap: 8px; }
.ab-dr-section h2 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 650; }
.ab-dr-section .head .ab-dr-mono { font-size: 12px; color: var(--muted); }
.ab-dr-section .rows { border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.ab-dr-row { display: grid; align-items: center; column-gap: 16px; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--rule); }
.ab-dr-row:last-child { border-bottom: 0; }
.ab-dr-row:hover { background: var(--wash); }
.ab-dr-row .who, .ab-dr-row .what { display: flex; flex-direction: column; min-width: 0; }
.ab-dr-row .name { font-weight: 600; }
.ab-dr-row .name.mono { font-family: var(--font-mono); }
.ab-dr-row .sub { color: var(--muted); font-size: 12px; line-height: 16px; }
.ab-dr-row .path { font-family: var(--font-mono); font-size: 12px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-dr-row .lines { display: flex; justify-content: flex-end; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.ab-dr-row .lines .add { color: var(--pass); }
.ab-dr-row .lines .del { color: var(--fail); }
.ab-dr-base { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-dr-base .sep { margin: 0 6px; color: var(--faint); }
.ab-dr-base .behind { color: var(--ink); }
.ab-dr-row .when { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
.ab-dr-row .open { justify-self: end; }
.ab-dr-row.is-unpublished { grid-template-columns: 16px minmax(140px, 1fr) minmax(0, 2fr) 64px 150px 150px 64px; }
.ab-dr-row.is-named { grid-template-columns: 16px minmax(160px, 1fr) minmax(0, 1.6fr) 150px 150px; }
.ab-dr-row.is-refused { grid-template-columns: 16px minmax(0, 1fr) auto; }
.ab-dr-refused-mark { color: var(--fail); }
.ab-dr-row .since { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-dr-row .since .ok { fill: var(--pass); }
.ab-dr-row .since .tick { stroke: var(--paper); }
.ab-dr-row .sub .sep { margin: 0 6px; color: var(--faint); }
.ab-dr-fold { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); background: transparent; color: var(--ink); font: var(--type-ui); cursor: pointer; text-align: left; }
.ab-dr-fold .chev { margin-left: auto; color: var(--muted); }
.ab-dr-quiet { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); background: var(--surface); }
.ab-dr-quiet span { color: var(--muted); }
@media (max-width: 720px) {
  .ab-dr-row.is-unpublished, .ab-dr-row.is-named { grid-template-columns: 16px minmax(0, 1fr); }
  /* On a phone the whole row is the link and Open is not drawn: nothing can overflow. */
  .ab-dr-row.is-unpublished { position: relative; }
  .ab-dr-row.is-unpublished .open { position: static; width: 0; height: 0; padding: 0; border: 0; font-size: 0; overflow: visible; }
  .ab-dr-row.is-unpublished .open::after { content: ''; position: absolute; inset: 0; }
  .ab-dr-row .what, .ab-dr-row .lines, .ab-dr-base, .ab-dr-row .versions { display: none; }
  .ab-dr-row.is-unpublished .when { display: none; }
  /* PhoneQuiet: no facts row; a named draft is a card (mark, name and owner, then its versions, base and when it moved); Refused is one line with its count that opens. */
  .ab-dr-facts { display: none; }
  .ab-dr h1 { font-size: 24px; line-height: 30px; }
  .ab-dr-row.is-named { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 14px 16px; }
  .ab-dr-row.is-named .who { flex: 1 1 calc(100% - 28px); flex-direction: row; align-items: center; gap: 8px; }
  .ab-dr-row.is-named .versions, .ab-dr-row.is-named .ab-dr-base { display: inline; }
  .ab-dr-row.is-named .versions + .ab-dr-base::before { content: '·'; margin-right: 8px; color: var(--faint); }
  .ab-dr-row.is-named .when:not(:empty) { flex-basis: 100%; text-align: left; }
  .ab-dr-row.is-named .when:not(:empty)::before { content: 'last moved '; }
  .ab-dr-section.is-named-cards .rows { display: flex; flex-direction: column; gap: 8px; border-radius: 0; overflow: visible; box-shadow: none; }
  .ab-dr-row.is-named { border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); }
  .ab-dr-section.is-fold .head { display: flex; }
  .ab-dr-section.is-fold .ab-dr-fold { display: flex; }
  .ab-dr-section.is-fold:not(.is-open) .rows { display: none; }
  .ab-dr-section.is-fold.is-open .ab-dr-fold .chev { transform: rotate(180deg); }
  .ab-dr-row.is-refused { grid-template-columns: 16px minmax(0, 1fr); }
  .ab-dr-row .since { grid-column: 2; }
}

/* A named draft's page (Drafts step 2, board Draft; issue 35). */
.ab-page:has(> .ab-nd) { max-width: 1180px; padding: var(--space-6) 32px 64px; }
.ab-nd { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.ab-nd-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.ab-nd-head h1 { margin: 0; font-family: var(--font-mono); font-size: 24px; line-height: 32px; font-weight: 650; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ab-nd-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--faint); color: var(--muted); font-size: 12px; }
.ab-nd-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--muted); font: var(--type-ui); }
.ab-nd-facts .sep { color: var(--faint); }
.ab-nd-facts .mono { color: var(--ink); }
.ab-nd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; margin-top: var(--space-3); }
.ab-nd-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.ab-nd h2 { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 650; display: flex; align-items: baseline; gap: var(--space-2); }
.ab-nd h2 .mono { font-size: 12px; color: var(--muted); font-weight: 500; }
.ab-nd-desc { margin: 0; max-width: 72ch; font-size: 15px; line-height: 23px; overflow-wrap: anywhere; }
.ab-nd-box { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; border-radius: var(--radius-lg, 8px); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.ab-nd-note { display: block; color: var(--muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.ab-nd-box .ab-nd-note { display: inline; }
.ab-nd-activity { list-style: none; margin: 0; padding: 0; }
.ab-nd-event { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--rule); }
.ab-nd-event .what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ab-nd-event .when { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-nd-files ul { list-style: none; margin: 0; padding: 0; }
.ab-nd-files li { display: flex; align-items: center; height: 28px; border-top: 1px solid var(--rule); min-width: 0; }
.ab-nd-files li a { font-family: var(--font-mono); font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-nd-files .ab-btn { margin-top: 10px; }
@media (max-width: 900px) {
  .ab-page:has(> .ab-nd) { padding: var(--space-4) var(--space-4) 48px; }
  .ab-nd-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* Reading width (Design Lead): prose at about 72 characters a line, left-aligned; code blocks and tables keep the full width. */
.ab-md-block > p, .ab-md-block > ul, .ab-md-block > ol, .ab-md-block > h1, .ab-md-block > h2, .ab-md-block > h3, .ab-md-block > h4, .ab-md-block > h5, .ab-md-block > h6, .ab-md-block > blockquote { max-width: 72ch; }
/* A wide table scrolls inside its own box, never the page (Design Lead, 390). */
.ab-md-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 1em; }
.ab-md-scroll > .ab-md-table { margin: 0; }

/* A comment as Markdown (MARKDOWN=on, issue 48): the words under "X commented:", in the reading colour, with no page margins. */
.ab-comment { margin-top: 4px; color: var(--ink); }
.ab-comment .ab-md { margin: 0; padding: 0; max-width: none; }
.ab-comment .ab-md-block:first-child > :first-child { margin-top: 0; }
.ab-comment .ab-md-block:last-child > :last-child { margin-bottom: 0; }
.ab-comment .ab-md-code { font-size: 12px; }
/* The activity's own row and list rules are for its rows: a list inside a comment is an ordinary list. */
.ab-activity li .ab-comment ol, .ab-activity li .ab-comment ul { display: block; margin: 0 0 8px; padding-left: 24px; }
.ab-activity li .ab-comment ol { list-style: decimal; }
.ab-activity li .ab-comment ul { list-style: disc; }
.ab-activity li .ab-comment li { display: list-item; padding: 0; border: 0; gap: 0; font: inherit; color: inherit; }
.ab-activity li:has(.ab-comment) .lead { align-self: flex-start; padding-top: 5px; }

/* Free text as Markdown (MARKDOWN=on, issue 49): no page margins; the text's own paragraphs space it. */
.ab-prose { color: inherit; }
.ab-prose .ab-md { margin: 0; padding: 0; max-width: none; }
.ab-prose .ab-md-block:first-child > :first-child { margin-top: 0; }
.ab-prose .ab-md-block:last-child > :last-child { margin-bottom: 0; }
.ab-prose.is-heading { font-size: 15px; line-height: 23px; font-weight: 400; }
.ab-prose.is-heading .ab-md-block:first-child > p:first-child { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.015em; }
.ab-prose.is-heading .ab-md-block > p { margin: 0 0 8px; }
.ab-prose.is-quote { color: var(--muted); font-size: 14px; line-height: 21px; overflow-wrap: anywhere; }
.ab-prose-lead { display: block; margin-bottom: 2px; }
.ab-nd-desc.ab-prose .ab-md { font-size: 15px; line-height: 23px; max-width: 72ch; }

/* Versions written for reading (issue 52, the Written board): the first line of the message is the row, the rest opens under it. Behind version-rows. */
.ab-vrows { display: flex; flex-direction: column; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; margin: 4px 0 var(--space-4); }
.ab-vrow { display: grid; grid-template-columns: 56px 120px minmax(0, 1fr) 120px 84px; column-gap: 16px; align-items: start; padding: 14px 16px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 20px; }
.ab-vrow:first-child { border-top: 0; }
.ab-vrow.is-open { background: var(--surface); }
.ab-vrow .num { font-family: var(--font-mono); font-weight: 600; padding-top: 1px; color: var(--ink); text-decoration: none; }
.ab-vrow .num:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-vrow .who { min-width: 0; font-weight: 600; }
.ab-vrow .msg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ab-vrow .line { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.ab-vrow .line:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.ab-vrow .chev { flex: none; color: var(--muted); transform: rotate(-90deg); }
.ab-vrow.is-open .chev { transform: rotate(0deg); }
.ab-vrow .first { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ab-vrow .first code, .ab-vrow .more code, .ab-vrow .files code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule); }
.ab-vrow .files code { padding: 0; background: none; box-shadow: none; }
.ab-vrow { row-gap: 8px; }
.ab-vrow .first.is-whole { white-space: normal; overflow: visible; text-overflow: clip; font-weight: 600; }
.ab-vrow .line { align-items: flex-start; }
.ab-vrow .line.is-plain { display: flex; padding-left: 20px; }
.ab-vrow .line .chev { margin-top: 4px; }
.ab-vrow .more { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: 12px; padding: 4px 0 4px 20px; min-width: 0; }
.ab-vrow .more .ab-version-prose { font-size: 14px; line-height: 22px; max-width: 72ch; }
.ab-vrow .more .ab-version-prose .ab-md-block + .ab-md-block { margin-top: 10px; }
.ab-vrow .more .plain { margin: 0; max-width: 72ch; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-vrow .more .sub, .ab-vrow .more .files { margin: 0; color: var(--muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.ab-vrow .check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-vrow .check .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ab-vrow .check.is-pass { color: var(--pass); }
.ab-vrow .check.is-fail { color: var(--fail); }
.ab-vrow .when { color: var(--muted); font-size: 12px; text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .ab-vrow { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "num msg" ". meta"; row-gap: 6px; column-gap: 12px; padding: 12px; }
  .ab-vrow .num { grid-area: num; }
  .ab-vrow .msg { grid-area: msg; }
  .ab-vrow .who, .ab-vrow .check, .ab-vrow .when { grid-row: 2; font-size: 12px; }
  .ab-vrow { grid-template-areas: "num msg msg msg" ". who check when" ". more more more"; grid-template-columns: 48px max-content max-content minmax(0, 1fr); }
  .ab-vrow .more { grid-area: more; }
  .ab-vrow .who { grid-area: who; }
  .ab-vrow .check { grid-area: check; }
  .ab-vrow .when { grid-area: when; }
  .ab-vrow .more { padding-left: 0; }
}

/* A version's own page and a named draft's versions, written for reading (issue 52; behind version-rows). */
.ab-vmsg { max-width: 72ch; margin: 4px 0 12px; font-size: 14px; line-height: 22px; color: var(--ink); }
.ab-vmsg .ab-md-block + .ab-md-block { margin-top: 10px; }
.ab-vmsg code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule); }
.ab-vmsg-plain { margin: 4px 0 12px; max-width: 72ch; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-nd-msg { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ab-nd-msg .line { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); }
.ab-nd-msg .line:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.ab-nd-msg .chev { flex: none; color: var(--muted); transform: rotate(-90deg); }
.ab-nd-msg.is-open .chev { transform: rotate(0deg); }
.ab-nd-msg .first { font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ab-nd-msg .first code, .ab-nd-msg .more code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule); }
.ab-nd-msg .more { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 4px 20px; min-width: 0; }
.ab-nd-msg .more .ab-version-prose, .ab-nd-msg .more .plain { max-width: 72ch; font-size: 14px; line-height: 22px; margin: 0; }
.ab-nd-msg .more .plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-nd-msg .more .ab-md-block + .ab-md-block { margin-top: 10px; }
.ab-nd-msg .more .files { margin: 0; color: var(--muted); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.ab-nd-msg .more .files code { padding: 0; background: none; box-shadow: none; }
@media (max-width: 720px) {
  /* A version in a draft's activity has room to open on a phone: who and when on the first line, the version and its message under them at the full width. */
  .ab-nd-event:has(.ab-nd-msg) { grid-template-columns: minmax(0, 1fr) auto; }
  .ab-nd-event:has(.ab-nd-msg) .who { grid-column: 1; grid-row: 1; }
  .ab-nd-event:has(.ab-nd-msg) .when { grid-column: 2; grid-row: 1; }
  .ab-nd-event:has(.ab-nd-msg) .what { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
  .ab-nd-msg .more { padding-left: 20px; }
}

/* Recent versions beside the issues, in the Written board's words (issue 52): the first line of the message, then the issues it was for. Behind version-rows. */
.ab-side-list ul.is-versions .what.is-written { display: flex; align-items: baseline; gap: 6px; min-width: 0; color: var(--ink); }
.ab-side-list ul.is-versions .what.is-written .first { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ab-side-list ul.is-versions .what.is-written .first code { font-family: var(--font-mono); font-size: 12px; }
.ab-side-list ul.is-versions .what.is-written .refs { flex: none; color: var(--muted); font-size: 12px; font-family: var(--font-mono); }

/* A version's own page: its first line is the heading, the facts under it (issue 52). */
.ab-version { max-width: var(--measure); margin: 0 auto; padding: 24px 32px 64px; }
.ab-version-title { margin: 0 0 6px; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; max-width: 72ch; overflow-wrap: anywhere; }
.ab-version-title code { font-family: var(--font-mono); font-size: 0.8em; font-weight: 600; }
.ab-version-facts { margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: 13px; line-height: 20px; }
.ab-version-facts .sep { color: var(--faint); }
.ab-nd-desc-title { margin: 0 0 6px; font-size: 15px; line-height: 23px; font-weight: 600; max-width: 72ch; overflow-wrap: anywhere; }
.ab-nd-desc-title code { font-family: var(--font-mono); font-size: 13px; }
.ab-nd-msg.is-open .first { white-space: normal; overflow: visible; text-overflow: clip; }
.ab-nd-msg .first.plain { cursor: default; }

/* A version's message in an older-kit row, first line with a chevron that opens the rest (issue 52). */
.ab-oline { display: inline-block; max-width: 100%; vertical-align: top; margin-left: 6px; }
.ab-oline code { font-family: var(--font-mono); font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--rule); }
.ab-oline.has-more > summary { cursor: pointer; list-style: none; display: block; max-width: 100%; padding-left: 18px; position: relative; font-weight: 600; }
.ab-oline.has-more > summary::-webkit-details-marker { display: none; }
.ab-oline.has-more > summary::before { content: ''; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); }
.ab-oline.has-more[open] > summary::before { transform: rotate(45deg); top: 0.45em; }
.ab-oline.has-more:not([open]) > summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-oline.has-more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.ab-oline .ab-vmsg { margin-left: 18px; }

/* Navigation that answers at once (issue 56): a thin bar along the foot of the top bar after about 150 ms, then the destination's own frame with skeleton rows. */
.ab-top { position: relative; }
.ab-navbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; opacity: 0; animation: ab-navbar-show 0s linear 150ms forwards; }
.ab-navbar span { display: block; width: 40%; height: 100%; background: var(--ink); animation: ab-navbar-run 1.1s ease-in-out infinite; }
@keyframes ab-navbar-show { to { opacity: 1; } }
@keyframes ab-navbar-run { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.ab-skel { pointer-events: none; user-select: none; }
.ab-skel-bar, .ab-skel-title { display: block; flex: none; height: 12px; border-radius: var(--radius); background: var(--wash); animation: ab-skel-pulse 1.4s ease-in-out infinite; }
.ab-skel-title { width: 220px; max-width: 70%; height: 24px; margin: 0 0 var(--space-4); }
.ab-skel-rows { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.ab-skel-row { display: flex; align-items: center; gap: var(--space-3); height: 40px; padding: 0 var(--space-4); border-top: 1px solid var(--rule); }
.ab-skel-row:first-child { border-top: 0; }
.ab-full.ab-skel { display: flex; min-height: calc(100vh - 48px); }
.ab-skel-side { display: flex; flex: none; flex-direction: column; gap: 14px; width: 260px; padding: var(--space-4); border-right: 1px solid var(--rule); }
.ab-skel-side .ab-skel-bar { height: 10px; }
.ab-skel-main { flex: 1; min-width: 0; padding: var(--space-4) var(--space-5, 24px); }
.ab-skel-lines { display: flex; flex-direction: column; gap: 12px; }
@keyframes ab-skel-pulse { 50% { opacity: .55; } }
.ab-load-note { position: fixed; top: 64px; left: 50%; z-index: 40; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); color: var(--muted); font-size: 13px; transform: translateX(-50%); }
/* A page that did not load: the skeleton is cleared and what failed stands in the page, left-aligned where the content would be. */
.ab-load-failed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--ink); font-size: 14px; }
.ab-load-failed p { margin: 0; }
.ab-load-failed-frame { flex: 1; min-width: 0; padding: var(--space-4) var(--space-5, 24px); }
/* The Issues page's skeleton: its strip, progress bar, filters and agents column. */
.ab-skel-strip { height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); }
.ab-skel-progress { display: flex; flex-direction: column; gap: var(--space-3); }
.ab-skel-progress .segments { display: flex; gap: 4px; }
.ab-skel-progress .segments .ab-skel-bar { flex: 1; height: 6px; }
.ab-skel-filters { display: flex; gap: var(--space-4); margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
.ab-issues-side .ab-skel-bar { margin-bottom: var(--space-2); }
.ab-issues-side .ab-skel-row { height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .ab-navbar span { width: 100%; opacity: .5; animation: none; }
  .ab-skel-bar, .ab-skel-title { animation: none; }
}
@media (max-width: 720px) {
  .ab-skel-side { display: none; }
  .ab-load-note { right: var(--space-3); left: var(--space-3); flex-wrap: wrap; transform: none; }
}
.ab-skel-main .ab-file-path { margin-bottom: var(--space-4); }

/* The Projects page (website2 issue 60, a quick pass): the Drafts page's frame and heading, rows like the version rows, test
   projects in a closed disclosure at the bottom. Each row is one link. */
.ab-prows { display: flex; flex-direction: column; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.ab-prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) 120px; column-gap: 16px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 20px; color: var(--ink); text-decoration: none; }
.ab-prow:first-child { border-top: 0; }
.ab-prow:hover { background: var(--surface); }
.ab-prow:hover .name { text-decoration: underline; text-underline-offset: 3px; }
.ab-prow:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ab-prow .name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-prow .meta { color: var(--muted); font-size: 12px; white-space: nowrap; text-align: right; }
.ab-prow .check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-prow .check .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ab-prow .check.is-pass { color: var(--pass); }
.ab-prow .check.is-fail { color: var(--fail); }
.ab-pr-tests > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--muted); font: var(--type-ui); margin-bottom: 12px; }
.ab-pr-tests > summary { list-style: none; }
.ab-pr-tests > summary::-webkit-details-marker { display: none; }
.ab-pr-tests > summary .chev { flex: none; transform: rotate(-90deg); }
.ab-pr-tests[open] > summary .chev { transform: rotate(0deg); }
.ab-pr-tests > summary .ab-dr-mono { color: var(--muted); font-size: 12px; }
.ab-pr-tests > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.ab-pr .ab-dr-quiet code { font-family: var(--font-mono); font-size: 12px; }
@media (max-width: 720px) {
  .ab-prow { grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "name name" "meta check"; row-gap: 4px; padding: 12px; }
  .ab-prow .name { grid-area: name; }
  .ab-prow .meta { grid-area: meta; text-align: left; overflow: hidden; text-overflow: ellipsis; }
  .ab-prow .check { grid-area: check; }
}