/*
 * Beyond Projects interface, on the family's foundations (token set 0.6.0 of @beyond-js/ui, decisions
 * D08, D09 and D10 as amended by C2 of 2026-10-17): every color is a role of tokens.css (`--color-*`),
 * every text size a step of the type scale (`--text-*`), Inter at 400, 500 and 600 is served with the
 * package (`/ui/fonts/fonts.css`; Rubik only beside the wordmark), links take the text's colour, and
 * surfaces are flat with 1px borders; only what overlaps the page (the shared menus and dialogs) and
 * the package's own raised panels cast a shadow, from the package's own stylesheet. The appearance follows `data-beyond-mode`,
 * which the shared preferences set. docs/design.md records the measured pairs.
 *
 * A signed-in screen is the package's page system (D52): the shared Sidebar and one Page, edge to edge,
 * whose gutter and width tiers come from the package's layout tokens. Rows here are flat and set apart
 * by 1 px dividers, never boxes inside a box (LR-06).
 */
:root { color-scheme: light dark; --radius: var(--radius-base); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-canvas); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-body); font-weight: var(--weight-regular); line-height: var(--leading-body); }
/* Every heading is semibold (D127), so it outranks what it names (D158) */
h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-semibold); }
strong, .list-title, .field-label { font-weight: var(--weight-medium); }
h1 { font-size: var(--text-title-1); line-height: var(--leading-title-1); margin: 0 0 8px; } h2 { font-size: var(--text-title-2); line-height: var(--leading-title-2); margin: 0 0 8px; }
h3 { font-size: var(--text-title-3); line-height: var(--leading-title-3); margin: 16px 0 4px; }
h4, h5 { overflow-wrap: anywhere; } h4 { font-size: var(--text-title-3); margin: 0; } h5 { font-size: var(--text-body); margin: 12px 0 2px; }
p { margin: 0 0 12px; overflow-wrap: anywhere; }
a { color: var(--color-link); }
/* A link inside a sentence keeps a quiet underline, so it is told from its words without colour (C2, WCAG 1.4.1) */
:is(p, li, dd) > a:not(.button, .list-title) { text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
:is(p, li, dd) > a:not(.button, .list-title):hover { text-decoration-color: currentColor; }
code { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; }
/* Focus is always visible, drawn by @beyond-js/ui by what the keys do there (D187), nothing where reading starts */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { --inset: var(--space-4); position: absolute; left: -9999px; top: 0; z-index: 3; background: var(--color-surface-sunken); color: var(--color-text); padding: 12px var(--inset); border: 1px solid var(--color-border); }
.skip:focus { left: 16px; top: 8px; }
/* The container adds no box, so the family bar sticks to the top of the page itself */
.header { display: contents; }
/* Screens before the frame (signing in, unavailable) keep one centered column; a signed-in screen is a Page */
.shell:not(.signed) main { max-width: 960px; margin: 0 auto; padding: 24px 16px 64px; }
.shell.signed main { min-width: 0; }
.panel { --inset: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--inset); margin-bottom: 16px; background: var(--color-surface); }
.panel.narrow { max-width: 480px; margin-inline: auto; }
.panel-head, .context-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
/* A heading beside its action: the head carries the heading's margins, so both centre on one line */
.panel-head > :is(h2, h3), .panel-head > .actions { margin: 0; }
.panel-head:has(> h2) { margin-bottom: 8px; } .panel-head:has(> h3) { margin: 16px 0 4px; }
/* The role beside the organization's name takes the name's bottom margin, so both centre on one line */
.context-head > p { margin-bottom: 8px; }
.muted { color: var(--color-text-muted); } .small { font-size: var(--text-small); font-weight: var(--weight-regular); line-height: var(--leading-small); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; min-width: 0; }
.field.grow { flex: 1 1 220px; }
.field-label { font-size: var(--text-small); color: var(--color-text); }
input, select { font: inherit; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); min-height: 44px; padding: 8px 12px; max-width: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.filters .button, .filters .bui-field { margin-bottom: 12px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: var(--radius-control); border: 1px solid transparent; font: inherit; font-weight: var(--weight-medium); text-decoration: none; cursor: pointer; }
.button.small { min-height: 36px; padding: 4px 12px; font-size: var(--text-small); }
.button.primary { background: var(--color-action); color: var(--color-on-action); } .button.primary:hover { background: var(--color-action-hover); }
.button.quiet { background: transparent; color: var(--color-text); border-color: var(--color-border-control); }
.button.danger { background: var(--color-danger); color: var(--color-text-inverse); }
/* A button that cannot act yet waits quiet (D183): the family's disabled surface, still reachable, a primary one a
   neutral surface with muted words; a busy one (`data-busy`, a dialog's form while it sends) keeps its colour */
.button:is(:disabled, [aria-disabled="true"]):not([data-busy]) { opacity: 0.6; cursor: not-allowed; }
.button.primary[aria-disabled="true"]:not([data-busy]) { border-color: transparent; background: var(--color-disabled); color: var(--color-on-disabled); opacity: 1; }
.button[data-busy] { cursor: progress; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .actions.end { justify-content: flex-end; }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.list li { border-bottom: 1px solid var(--color-border); }
.list li > a { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: center; min-height: 52px; padding: 8px 0; color: var(--color-text); text-decoration: none; }
.list li > a:hover .list-title { color: var(--color-link); text-decoration: underline; }
.list .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 0; }
.list .row .filters { align-items: center; } .list .row .checks, .list .row .button { margin-bottom: 0; }
/* An empty alert keeps its live region but takes no place, so the row's last button ends on the row's edge */
.list .row .problem:empty { position: absolute; }
.standing, .notice { --inset: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px var(--inset); margin: 12px 0; }
.standing > h2, .standing > h3 { font-size: var(--text-title-3); margin: 0 0 4px; }
.standing.positive, .notice.positive { background: var(--color-success-surface); }
.standing.neutral { background: var(--color-surface-sunken); }
.notice.warning { background: var(--color-warning-surface); } .notice.danger { background: var(--color-danger-surface); }
/* A notice with a way on, such as the way back after creating a project a product asked for */
.notice:has(> a) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
/* One inset (D184): each of these boxes keeps its inset (`--inset`, its earlier side padding) on every side, measured
   from its border to its first line's capitals, its controls' edges and its words' start. A line of the box's own text
   takes off the half-leading it keeps above its capitals and below its baseline, a title trims itself to its capitals,
   and a row of controls ends the box at their edges. Without these units a box keeps its earlier padding.
   `test/browser/insets.mjs` measures them. */
.panel > :last-child, .standing > :last-child, .notice > :last-child { margin-bottom: 0; }
/* A last line of controls is a row, so the box ends at their edges rather than at the line's descent under them */
.panel > p:last-child:has(> .button) { display: flex; flex-wrap: wrap; gap: 8px; }
@supports (padding-top: calc(1lh - 1cap)) {
	.skip, .standing, .notice { padding-block: calc(var(--inset) - (1lh - 1cap) / 2); }
	.panel { padding-block-end: calc(var(--inset) - (1lh - 1cap) / 2); }
	.standing:has(> .actions:last-child), .panel:has(> p:last-child > .button) { padding-block-end: var(--inset); }
}
@supports (text-box: trim-start cap alphabetic) {
	.panel > h1:first-child { text-box: trim-start cap alphabetic; }
}
/* A change in flight dims the screen; a read keeps it as it is, or waits in its regions (LOAD-01) */
#screen[data-working] { cursor: progress; opacity: 0.72; transition: opacity 120ms ease 200ms; }
/* A name not read yet keeps its place: in the page's title and the sidebar's context line, as one line of the
   family's placeholder, at the line's height and the name's width */
.name-waiting { display: inline-block; width: 12rem; max-width: 100%; vertical-align: middle; }
.name-waiting > .bui-skeleton { padding: 0; }
.name-waiting .bui-skeleton-line { width: 100%; }
.context-waiting { display: contents; }
.badge { border: 1px solid var(--color-border-strong); border-radius: var(--radius-round); padding: 2px 12px; font-size: var(--text-label); font-weight: var(--weight-medium); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 8px 0; } .facts dt { color: var(--color-text-muted); } .facts dd { margin: 0; overflow-wrap: anywhere; }
.problem { color: var(--color-danger); min-height: 1.5em; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 12px; }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
input[type='checkbox'] { min-height: 0; width: 22px; height: 22px; margin: 0; padding: 0; accent-color: var(--color-action); }
.dialog-form .bui-field { margin-bottom: 12px; }
/* "Not available here" (D06) sits in the flow of what it explains */
.panel .bui-unavailable, .refused .bui-unavailable { margin: 12px 0; }
.bui-page-main > .notice, .bui-page-main > .refused { margin: 0; }

/* Rows of a collection (projects, products, repositories): flat, divided, one cell per column when the
   region is wide and stacked under 640 px, decided by the page's own width (LR-09) */
.project-rows, .product-rows, .repository-rows, .uses, .facts-list { list-style: none; margin: 0; padding: 0; }
.project-row, .product-row, .repository-row { display: grid; gap: 4px 24px; align-items: start; padding: 12px 0; border-top: 1px solid var(--color-border); min-width: 0; }
.project-rows, .product-rows, .repository-rows { border-bottom: 1px solid var(--color-border); }
.project-row.heading { display: none; color: var(--color-text-muted); font-size: var(--text-small); font-weight: var(--weight-regular); border-top: 0; padding-block: 0 8px; }
.cell { min-width: 0; overflow-wrap: anywhere; }
.cell.name .list-title { font-weight: var(--weight-medium); }
.cell > h3 { margin: 0; font-size: var(--text-body); }
.cell p, .cell .actions { margin: 4px 0 0; }
.needs { display: block; color: var(--color-text); font-weight: var(--weight-medium); }
/* The lines of who did not answer (D163) sit in the column as its first parts: their holder draws no box */
.page-outages { display: contents; }
/* A cell whose row did not answer (D163): the outage's mark in the warning colour and the family's words on one line,
   where EmptyState's block would not fit; who did not answer and Try again are the page's line */
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
@container bui-page (min-width: 640px) {
	.project-row { grid-template-columns: minmax(10rem, 2fr) 2fr 2fr minmax(9rem, 1fr); align-items: center; }
	.project-row.heading { display: grid; }
	.cell.end { justify-self: end; }
}
/* A project's products and repositories (PX-01, PX-02; DQ-12 since 2026-10-17): each row is the shared
   ListRow, its name opening the object, the state's Status at its end, quiet actions and More. Its text
   starts on the page's edge while its hover surface reaches a little past it. Why a state is what it is
   and who can change it is one line under the row, at the readable measure (LR-02). */
.product-row, .repository-row { display: block; padding: 0; }
.product-row > .bui-row, .repository-row > .bui-row { margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); }
.row-note { max-width: var(--layout-measure); margin: 0 0 var(--space-2); color: var(--color-text-muted); }
.row-note .fact-label { color: var(--color-text); }
.product-row > .outcome, .repository-row > .outcome { margin: 0 0 12px; }
.fact-label { font-weight: var(--weight-medium); }
.uses-panel { padding: 0 0 12px 24px; }
/* A project's requests (Q38) and a repository's pull requests: rows of the same kind, the request's
   note, decision and choices under its row */
/* Requests are the family's rows (ul.bui-rows, D162): the list hangs their padding into the gutter, and
   what a request holds under its row starts where its name does */
li.request-row { padding: 0; border-top: 0; }
.pull-row > .bui-row, .given-row > .bui-row { margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); }
.request-body { display: grid; gap: var(--space-1); max-width: var(--layout-measure); padding: 0 var(--space-3) var(--space-2); }
.request-body:empty { display: none; }
.request-body p { margin: 0; }
.pull-rows, .given-rows { list-style: none; margin: 0; padding: 0; }
.pull-row + .pull-row, .given-row + .given-row { border-top: 1px solid var(--color-border); }
.identifier { max-width: 100%; }
.outcome-failure { display: grid; gap: var(--space-1); margin: 0 0 12px; }
.outcome-failure > .outcome { margin: 0; }
@container bui-page (max-width: 639px) {
	.uses-panel { padding-inline-start: 0; }
	/* On a narrow page a row is its name and line, then its state and actions under them: the shared
	   row keeps both on one line, which would cut every name short */
	:is(.product-row, .repository-row, .request-row) > .bui-row { flex-wrap: wrap; row-gap: var(--space-1); }
	:is(.product-row, .repository-row, .request-row) > .bui-row > .bui-row-main { flex-basis: 100%; }
	:is(.product-row, .repository-row, .request-row) > .bui-row > .bui-row-end { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
	:is(.product-row, .repository-row, .request-row) > .bui-row > .bui-row-end > .bui-menu-holder { margin-inline-start: auto; }
}
.use { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 4px 0; }
.use + .use { border-top: 1px solid var(--color-border); }
.use p { margin: 2px 0 0; }
/* A product's writing, a separate choice under its use (2026-10-06): two cards, applied on change (DQ-15) */
.use-write { display: block; padding: var(--space-2) 0 var(--space-2) 16px; }
/* What a change answered, on the row it changed (FR-3); empty when nothing was changed there */
.outcome { margin: 4px 0 0; }
.outcome:empty { display: none; }
.outcome.positive { color: var(--color-text); }
.outcome.warning, .outcome.danger { color: var(--color-text); font-weight: var(--weight-medium); }
.repositories > .outcome { padding: 8px 0; }
.identifier { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.facts-list li { margin: 0 0 8px; }
/* Deleting is last and apart (D17) */
.apart { padding-top: 24px; border-top: 1px solid var(--color-border); }
.task-form { display: grid; gap: 16px; }
.task-form .bui-field { margin: 0; }
.uses-choice { display: grid; gap: 4px; }
.uses-choice .check { align-items: flex-start; min-height: 44px; }
.uses-choice .check input { margin-top: 2px; flex: none; }
.partial > h2 { font-size: var(--text-title-2); }
/* The add task's results are the family's rows (ul.bui-rows): the outcome's mark leads each name */
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } }
/* Under reduced motion nothing moves; a region's wait keeps its grace, seen at 300 ms with no fading (D185) */
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto; transition: none !important; }
	:not(.bui-waiting, .bui-skeleton) { animation: none !important; }
}

/* GitHub phase 1 (D56): connections, the person's GitHub account, the add task's picker and gates,
   the public repository folded, requests and the audit. Flat rows divided by 1 px lines (LR-06). */
.connection-rows { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-border); }
.connection, .request { padding: 12px 0; border-top: 1px solid var(--color-border); min-width: 0; }
.awaiting { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.awaiting h4 { font-size: var(--text-body); }
/* GitHub waiting for an owner of the account to approve the App's new permissions */
.approval { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-top: 8px; }
.approval p { margin: 0; }
.gate { padding: 16px 0; }
.gate > h2 { font-size: var(--text-title-2); }
.trip, .arrived, .copy { margin: 12px 0; }
.picker-note:empty { display: none; }
details.fold { margin: 12px 0; }
details.fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: var(--weight-medium); color: var(--color-link); }
details.fold[open] > summary { margin-bottom: 8px; }
.public-form, .adding-form { display: grid; gap: 8px; max-width: var(--layout-form); }
.public-form .bui-field, .adding-form .bui-field { margin: 0; }
.public-form .button, .adding-form .button { justify-self: start; }
li.request.marked { border-inline-start: 3px solid var(--color-focus); padding-inline-start: 12px; }
.requests-group + .requests-group { margin-top: 24px; }
.static-choice { display: block; min-height: 44px; padding: 10px 0; }
.slot:empty { display: none; }
.button[hidden] { display: none; }
/* The landing of a session hand-off (`/session/landed`): one sentence, in the sign-in window */
.landed { padding: 32px 24px; max-width: var(--layout-measure); }

/* Organization level, wave 2 of 2026-10-17 (org agent): GitHub connections and attempts as the family's
   dense rows (ListRow, DQ-12), with their details under the row; the audit's sentences wrap in its table */
.connection-rows .line { padding: 4px 0 8px; border-top: 1px solid var(--color-border); }
.line > .bui-row { padding-inline: 0; border-radius: 0; }
.line > :is(.line-reason, .line-owner) { margin: 0 0 4px; max-width: var(--layout-measure); }
.attempts .connection-rows { margin-top: 8px; }
.bui-data-table th .bui-row-link { overflow-wrap: anywhere; }
/* A narrow row puts its end (state, action, menu) on a line of its own under the name: the package's
   end does not shrink (flex: none), so on a phone it would push the row past the viewport */
.line { container: line / inline-size; }
@container line (max-width: 30rem) {
	.line > .bui-row { flex-wrap: wrap; }
	.line > .bui-row > .bui-row-end { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
}

/* Organization catalog (2026-10-29) */
/* The repositories available to an organization, each the family's row with its change's outcome under it,
   and "Make repositories available" in place under the list's heading, on a raised surface of its own */
.catalog-row > .outcome { margin: 0 0 8px; }
.catalog-from { margin: 0 0 12px; }
.catalog-made { margin: 0 0 12px; }
.making { margin: 0 0 16px; }
.making-identity { margin: 0 0 12px; }
.making-review:empty { display: none; }
.making-review { margin: 12px 0 0; }
.making-review > p { margin: 4px 0 0; max-width: var(--layout-measure); }
.making-outcome { display: grid; gap: var(--space-1); margin: 12px 0 0; }
.making .bui-picker { max-width: 100%; }
/* end Organization catalog */

/* Add repositories modal (2026-10-29) */
/* The task over Repositories: the shared dialog's body scrolls inside it, so its title and actions stay in
   view at every width; its parts stack with the body's own gap and its sentences keep the reading measure */
.addition { display: grid; gap: 16px; min-width: 0; }
.addition > .slot:empty { display: none; }
.addition-lead { margin: 0; max-width: var(--layout-measure); }
.addition .bui-picker { min-width: 0; }
.addition .bui-picker-work > [data-control="clear"] { justify-self: start; margin-top: 4px; }
.addition .bui-picker-escape .public-form { max-width: 100%; }
.addition-identity { display: grid; gap: 4px; max-width: var(--layout-form); }
.addition-consequence:empty { display: none; }
.addition-lines { margin: 0; padding-inline-start: 1.25em; display: grid; gap: 4px; max-width: var(--layout-measure); color: var(--color-text-muted); }
.addition-confirm { --inset: var(--space-4); display: grid; gap: 8px; padding: var(--inset); border: 1px solid var(--color-border); border-radius: var(--radius); }
.addition-confirm > h3 { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.addition-confirm > p { margin: 0; max-width: var(--layout-measure); }
.addition .partial > h3 { margin: 0 0 4px; font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.addition .bui-unavailable, .addition .bui-empty { margin: 0; }
.addition-empty { display: grid; gap: 12px; }
/* end Add repositories modal */