/*
 * Gatehouse's styles on Bootstrap 5.3: muted greens and neutrals, sidebar, page headings, tabs, lists and cards.
 * Bootstrap covers layout, spacing, components and dark mode (data-bs-theme, set in _head.html). This file sets
 * Bootstrap's variables to Gatehouse's palette and adds rules without a Bootstrap utility or component.
 */

/* Gatehouse's palette, one name per role; dark mode is derived from it. */
:root, [data-bs-theme="light"] {
  --gh-ink: #263b36;
  --gh-muted: #76817b;
  --gh-paper: #fff;
  --gh-ground: #f9faf6;
  --gh-line: #e4e8e2;
  --gh-control-line: #d9e1dc;
  --gh-accent: #51745d;
  --gh-accent-strong: #263b36;
  --gh-sidebar: #f4f5ee;
  --gh-tile: #e9ece2;
  --gh-tile-active: #dbe7d8;
  --gh-soft: #e9eee7;
  --gh-count: #dce7de;
  --gh-card-cap: #f9faf7;
  --gh-row-hover: #f6f8f3;
  --gh-person-bg: #e7d9cc;
  --gh-person-ink: #765d47;
  --gh-ring: color-mix(in srgb, var(--gh-accent) 60%, transparent);
  --gh-tone-green: #e4ecdf;
  --gh-tone-green-ink: #6b8066;
  --gh-tone-blue: #e4eaf4;
  --gh-tone-blue-ink: #637b9d;
  --gh-tone-plum: #ebe4ef;
  --gh-tone-plum-ink: #8a759a;
  /* What a change does, on the kind marker of an action card and on every diff mark: add, edit,
     delete, slightly desaturated, a tone and an ink each, apart from the state colours' greens and blues; values a
     change leaves alone a step duller than the ambient colour, which labels use. */
  --gh-add: #dcebd5;
  --gh-add-ink: #5b7f55;
  --gh-edit: #d5e8ea;
  --gh-edit-ink: #4a7c80;
  --gh-delete: #f4ddd3;
  --gh-delete-ink: #a65f4a;
  --gh-unchanged: #949d98;
  --bs-body-color: var(--gh-ink);
  --bs-body-color-rgb: 38, 59, 54;
  --bs-emphasis-color: #18261f;
  --bs-body-bg: var(--gh-paper);
  --bs-secondary-color: var(--gh-muted);
  --bs-secondary-bg: var(--gh-tile);
  --bs-tertiary-bg: var(--gh-sidebar);
  --bs-border-color: var(--gh-line);
  --bs-body-font-size: .875rem;
  --bs-primary: var(--gh-accent);
  --bs-primary-rgb: 81, 116, 93;
  --bs-link-color: var(--gh-accent);
  --bs-link-color-rgb: 81, 116, 93;
  --bs-link-hover-color: #284c40;
  --bs-link-hover-color-rgb: 40, 76, 64;
  --bs-focus-ring-color: rgba(81, 116, 93, .2);
  /* Gatehouse's state tags: one subtle tone per state, no border. Queued and Applying are blue. */
  --bs-primary-bg-subtle: #e4edf7;
  --bs-primary-text-emphasis: #53749c;
  --bs-primary-border-subtle: #e4edf7;
  --bs-warning-bg-subtle: #f7edce;
  --bs-warning-text-emphasis: #80692f;
  --bs-warning-border-subtle: #f7edce;
  --bs-danger-bg-subtle: #f7e5df;
  --bs-danger-text-emphasis: #a15b4b;
  --bs-danger-border-subtle: #f7e5df;
  --bs-success-bg-subtle: #e1eee3;
  --bs-success-text-emphasis: #4f7b58;
  --bs-success-border-subtle: #e1eee3;
  --bs-secondary-bg-subtle: #eceeea;
  --bs-secondary-text-emphasis: #6e776f;
  --bs-secondary-border-subtle: #eceeea;
}
[data-bs-theme="dark"] {
  --gh-ink: #dce6e0;
  --gh-muted: #95a39b;
  --gh-paper: #1c2320;
  --gh-ground: #161c19;
  --gh-line: #2e3833;
  --gh-control-line: #3a4640;
  --gh-accent: #8fbc9d;
  --gh-accent-strong: #b5d6bf;
  --gh-sidebar: #19201c;
  --gh-tile: #232c27;
  --gh-tile-active: #2f4236;
  --gh-soft: #26332b;
  --gh-count: #2f4236;
  --gh-card-cap: #1f2723;
  --gh-row-hover: #212a25;
  --gh-person-bg: #4a3b2f;
  --gh-person-ink: #e2c9b3;
  --gh-tone-green: #2a3828;
  --gh-tone-green-ink: #a9c4a3;
  --gh-tone-blue: #263244;
  --gh-tone-blue-ink: #a6bbdb;
  --gh-tone-plum: #342b3b;
  --gh-tone-plum-ink: #c7b2d6;
  --gh-add: #2d4430;
  --gh-add-ink: #a2c79b;
  --gh-edit: #24434a;
  --gh-edit-ink: #93c4c6;
  --gh-delete: #4c2e27;
  --gh-delete-ink: #e3a491;
  --gh-unchanged: #75817a;
  --bs-body-color: var(--gh-ink);
  --bs-body-color-rgb: 220, 230, 224;
  --bs-emphasis-color: #f1f6f3;
  --bs-body-bg: var(--gh-paper);
  --bs-secondary-color: var(--gh-muted);
  --bs-secondary-bg: var(--gh-tile);
  --bs-tertiary-bg: var(--gh-sidebar);
  --bs-border-color: var(--gh-line);
  --bs-primary: var(--gh-accent);
  --bs-primary-rgb: 143, 188, 157;
  --bs-link-color: var(--gh-accent);
  --bs-link-color-rgb: 143, 188, 157;
  --bs-link-hover-color: var(--gh-accent-strong);
  --bs-link-hover-color-rgb: 181, 214, 191;
  --bs-focus-ring-color: rgba(143, 188, 157, .3);
  --bs-primary-bg-subtle: #1f2c3b;
  --bs-primary-text-emphasis: #9db8da;
  --bs-primary-border-subtle: #1f2c3b;
  --bs-warning-bg-subtle: #3a321b;
  --bs-warning-text-emphasis: #e2c77f;
  --bs-warning-border-subtle: #3a321b;
  --bs-danger-bg-subtle: #3d2621;
  --bs-danger-text-emphasis: #e7a493;
  --bs-danger-border-subtle: #3d2621;
  --bs-success-bg-subtle: #1f3324;
  --bs-success-text-emphasis: #9fd0a9;
  --bs-success-border-subtle: #1f3324;
  --bs-secondary-bg-subtle: #2a302c;
  --bs-secondary-text-emphasis: #aab5ae;
  --bs-secondary-border-subtle: #2a302c;
}
/* The sidebar's width, one figure for the rail, the colour band under it and the toasts centred beside it. */
:root { --sidebar-width: 280px; }
/* The page lies on Gatehouse's ground; panels, cards and fields stay on Bootstrap's body background (paper). */
body { background: var(--gh-ground); line-height: 1.6; }

/* Gatehouse's buttons and fields: smaller type, softer corners, the accent darkening to ink on hover. */
.btn { --bs-btn-font-size: .85rem; --bs-btn-padding-y: .55rem; --bs-btn-padding-x: .85rem; --bs-btn-border-radius: 7px; --bs-btn-font-weight: 550; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; }
.btn-primary {
  --bs-btn-bg: var(--gh-accent);
  --bs-btn-border-color: var(--gh-accent);
  --bs-btn-hover-bg: var(--gh-accent-strong);
  --bs-btn-hover-border-color: var(--gh-accent-strong);
  --bs-btn-active-bg: var(--gh-accent-strong);
  --bs-btn-active-border-color: var(--gh-accent-strong);
  --bs-btn-disabled-bg: var(--gh-accent);
  --bs-btn-disabled-border-color: var(--gh-accent);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #13201a; --bs-btn-hover-color: #13201a; --bs-btn-active-color: #13201a; }
.btn-outline-secondary { --bs-btn-color: var(--gh-ink); --bs-btn-border-color: var(--gh-control-line); --bs-btn-hover-bg: var(--gh-soft); --bs-btn-hover-color: var(--gh-ink); --bs-btn-hover-border-color: var(--gh-control-line); --bs-btn-active-bg: var(--gh-tile); --bs-btn-active-color: var(--gh-ink); }
.form-control { font-size: .875rem; padding-block: .6rem; border-color: var(--gh-control-line); }
.form-control:focus, .form-check-input:focus { border-color: var(--gh-accent); box-shadow: 0 0 0 .15rem var(--bs-focus-ring-color); }
.form-check-input:checked, .form-check-input[type="checkbox"]:indeterminate { background-color: var(--gh-accent); border-color: var(--gh-accent); }
/* a focused switch that is off: its knob in the accent, not Bootstrap's blue (an SVG, so no variable reaches it) */
.form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2351745d'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .form-switch .form-check-input:focus:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238fbc9d'/%3e%3c/svg%3e"); }
.form-label { font-weight: 550; }
/* A switch row (the policy form) is a room card laid out like an action on the review page: the kind tile of what the group works on at the left, the content beside it, the switch at the
   right end where the app puts a row's controls. The switch is twice Bootstrap's size (a larger hit area, not a
   transform). The card carries the switch's state: a soft surface and an accent-tinted border while it is on, the
   tile in the accent then and in the unchanged grey while off. */
.switch-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "tile name switch" ". body ."; align-items: start; gap: 0 1.25rem; transition: background-color .15s, border-color .15s; }
.switch-row > .switch-name { grid-area: name; }
.switch-row > .switch-body { grid-area: body; min-width: 0; }
/* Below 576 px the content takes the card's width under the tile, name and switch, as the review page's actions do
   under their markers. */
@media (max-width: 575.98px) {
  .switch-row { grid-template-areas: "tile name switch" "body body body"; gap: 0 .875rem; }
  .switch-row.panel-card { padding: 18px 18px; }
  .switch-body { margin-top: .5rem; }
}
.switch-row.panel-card { padding: 22px 26px; }
.switch-row:has(.form-check-input:checked) { background: color-mix(in srgb, var(--gh-soft) 80%, var(--gh-paper)); border-color: color-mix(in srgb, var(--gh-accent) 45%, var(--gh-line)); }
.switch-row > .kind-tile { grid-area: tile; --kind-bg: var(--gh-tile); color: var(--gh-unchanged); transition: background-color .15s, color .15s; }
.switch-row:has(.form-check-input:checked) > .kind-tile { --kind-bg: var(--gh-accent); color: var(--gh-paper); }
/* the switch (2em) level with the tile's middle (36px) */
.switch-row > .form-switch { grid-area: switch; margin: 4px 0 0; padding: 0; min-height: 0; }
.switch-row > .form-switch .form-check-input { width: 4em; height: 2em; margin: 0; cursor: pointer; }
/* The group's name, the h3 size, its line as high as the tile. */
.switch-name { display: block; margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 36px; cursor: pointer; }
/* What a capability group covers, as a short list of ambient lines. */
.switch-details { margin: .35rem 0 0; padding-left: 1.1rem; }

/* The pager (core/_pagination.html): one large input group centred under the list, borderless:
   the chevrons plain in the muted colour, the page field narrow, transparent and without spinners; focus rings stay. */
.pager { width: auto; justify-content: center; }
.pager > .btn { display: inline-flex; align-items: center; --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-active-color: var(--bs-body-color); --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent; --bs-btn-disabled-border-color: transparent; --bs-btn-disabled-opacity: .3; }
.pager-previous .icon { transform: rotate(90deg); }
.pager-next .icon { transform: rotate(-90deg); }
.pager > .form-control { flex: 0 0 3.5em; text-align: center; border-color: transparent; background: transparent; border-radius: var(--bs-border-radius-lg) !important; -moz-appearance: textfield; }
.pager > .form-control::-webkit-inner-spin-button, .pager > .form-control::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.list-group { --bs-list-group-active-bg: var(--gh-accent); --bs-list-group-active-border-color: var(--gh-accent); }
/* Cards are white panels with Gatehouse's hairline and rounder corners. */
.card { --bs-card-border-color: var(--gh-line); --bs-card-border-radius: 12px; --bs-card-inner-border-radius: 11px; --bs-card-cap-bg: var(--gh-card-cap); }
/* Banners (state, flash messages) are Gatehouse's soft panels: the state's subtle tone, no border line. */
.alert { --bs-alert-border-color: transparent; --bs-alert-border-radius: 10px; overflow-wrap: anywhere; }
/* Dialogs name proposals and quote what people and agents wrote: they wrap rather than widen. */
.modal-title, .modal-body { min-width: 0; overflow-wrap: anywhere; }
/* State tags are Gatehouse's: small, borderless, softly rounded (the subtle colours are set above). */
.badge { --bs-badge-font-size: .7rem; --bs-badge-font-weight: 600; --bs-badge-border-radius: 5px; --bs-badge-padding-y: .3em; --bs-badge-padding-x: .55em; }

/* Hierarchy: Gatehouse's heading scale, in fixed sizes. Bootstrap's is a document's, set in Sass, and its RFS scales
   headings with the viewport below 1200 px; Gatehouse uses fixed sizes, so every heading level and the .h*, .fs-*
   and .display-* classes get one rem size each (Gatehouse's scale). */
h1, h2, h3 { font-weight: 650; }
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.15rem; }
h3, .h3 { font-size: 1.05rem; }
h4, .h4 { font-size: 1rem; }
h5, .h5 { font-size: .95rem; }
h6, .h6 { font-size: .875rem; }
/* Bootstrap's font-size utilities are !important, so their fixed sizes have to be too; .fs-5 and .fs-6 are fixed there. */
.fs-1 { font-size: 2rem !important; }
.fs-2 { font-size: 1.15rem !important; }
.fs-3 { font-size: 1.05rem !important; }
.fs-4 { font-size: 1rem !important; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-size: 2.5rem; }
h1 { letter-spacing: -.045em; line-height: 1.2; }
h2 { letter-spacing: -.025em; margin-top: 2.25rem; }
h3 { font-weight: 600; }
/* Ambient text, the design's one means of stepping back besides folding: Bootstrap's secondary colour at its small
   size, under one name. */
.meta { color: var(--bs-secondary-color); font-size: .8rem; }
/* Gatehouse's small uppercase line above a title, a list or a group of facts ("<team> / Agents", "Now"). */
.eyebrow { font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 650; color: var(--bs-secondary-color); }
/* An open fold is technical detail, not a call to act: it keeps the neutral colours Bootstrap gives a closed one. */
.accordion {
  --bs-accordion-active-bg: var(--bs-tertiary-bg);
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
/* Gatehouse's line icons (core/icons/), sized to the text they stand beside. */
.icon { width: 19px; height: 19px; flex-shrink: 0; }
/* A link out to the service (YouTrack): a small mark after the link's text, in its colour. */
.icon-external { width: .75em; height: .75em; margin-left: .25em; vertical-align: -.05em; }

/* Page: Gatehouse's spacing, and its one header (core/_page_header.html) for every screen: an optional avatar, the
   small line over the title, optionally a "/" and a second title level with the first, a rule below. On a narrow
   screen the second title wraps onto its own line, the "/" leading it. */
.app-main { padding: 36px clamp(20px, 3vw, 50px) 60px; }
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 22px; }
.page-header > .page-header-avatar { width: 42px; height: 42px; border-radius: 14px; }
/* a team's monogram, the team control's, at the tile's size */
.page-header > .team-monogram { font-size: 18px; }
/* a service's own logo (a whole tile itself) fills the tile */
.page-header > .page-header-avatar > svg:not(.icon) { width: 100%; height: 100%; }
.page-header-part { min-width: 0; overflow-wrap: anywhere; }
.page-header-part .eyebrow { margin-bottom: .6rem; line-height: 1.2; }
/* a lone title takes the rest of the row, so a long one wraps beside the avatar rather than under it */
.page-header > .page-header-part:last-child { flex: 1 1 0; }
.page-title { margin: 0; color: var(--bs-body-color); font-size: 2rem; font-weight: 650; letter-spacing: -.045em; line-height: 1.2; }
.page-header-second { display: flex; align-self: flex-end; align-items: center; gap: 20px; flex: 1 1 20rem; min-width: 0; }
.page-header-separator { font-size: 3rem; font-weight: 300; line-height: 1; color: var(--gh-control-line); }
.page-header-rule { margin: 0 0 28px; border: 0; border-top: 1px solid var(--gh-line); opacity: 1; }
@media (max-width: 767.98px) { .app-main { padding: 24px 18px 50px; } }

/* Fluid page and content columns wrap when their contents need more room. */
.page-gutter { padding-inline: clamp(1rem, 2vw, 2rem); }
.form-column { width: 100%; max-width: 60rem; }

/* Navigation: Gatehouse's sidebar, a persistent rail from 768px and Bootstrap's offcanvas drawer below it. */
.app-shell { display: flex; min-height: 100dvh; }
.app-content { flex: 1; min-width: 0; }
.app-header { background: var(--gh-paper); border-bottom: 1px solid var(--gh-line); }
.app-sidebar { --bs-offcanvas-width: min(26rem, 90vw); --bs-offcanvas-bg: var(--gh-sidebar); background: var(--gh-sidebar); }
/* The rail is a flex column whose agent links are the one block that grows and scrolls (min-height: 0 lets it
   shrink below its content); the blocks around it keep their size. */
.app-sidebar .offcanvas-body { display: flex; flex-direction: column; gap: 20px; padding: 22px 18px; min-height: 0; overflow-y: auto; }
.app-sidebar .offcanvas-body > * { flex-shrink: 0; }
@media (min-width: 768px) {
  /* z-index: the rail and its popovers paint above the content (its lists lift their links to z-index 2), below
     Bootstrap's offcanvas (1045), modals (1055) and the toasts (1090). */
  .app-sidebar.offcanvas-md { position: sticky; top: 0; z-index: 1030; display: flex; flex-direction: column; flex: 0 0 var(--sidebar-width); width: var(--sidebar-width); height: 100dvh !important; background: var(--gh-sidebar) !important; }
  .app-sidebar .offcanvas-body { flex: 1; background: inherit !important; }
  /* The rail's colour runs down the whole page, past the sticky sidebar's own height. */
  .app-shell { background: linear-gradient(to right, var(--gh-sidebar) var(--sidebar-width), transparent var(--sidebar-width)); }
}
/* The person and the team in one row, one height (--sidebar-control): the person's avatar, a separator, the team
   control filling the rest; both open their popovers. */
.sidebar-account-row { --sidebar-control: 40px; display: flex; align-items: center; gap: 10px; }
.sidebar-account-row > .vr { align-self: center; height: 24px; background-color: var(--gh-control-line); opacity: 1; }
.sidebar-account-row > .team { flex: 1; min-width: 0; }
.account-button { display: grid; place-items: center; width: var(--sidebar-control); height: var(--sidebar-control); padding: 0; border: 0; border-radius: 50%; background: transparent; }
.account-button .person-avatar { width: 100%; height: 100%; font-size: 12px; }
/* Hover and open: a ring drawn inside the circle itself, so nothing can show between them (an outer ring on a
   fractional scale leaves a hairline gap). The team's monogram gets the same. */
.account-button:hover .person-avatar, .account-button[aria-expanded="true"] .person-avatar,
.sidebar-selector:hover .team-monogram, .sidebar-selector[aria-expanded="true"] .team-monogram { box-shadow: inset 0 0 0 2px var(--gh-ring); }
.person-avatar { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--gh-person-bg); color: var(--gh-person-ink); font-size: 11px; font-weight: 700; }
.sidebar-selector { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; height: var(--sidebar-control); padding: 0 10px 0 6px; border: 0; border-radius: 10px; background: var(--gh-tile); color: var(--bs-body-color); text-align: left; }
.sidebar-selector:hover, .sidebar-selector[aria-expanded="true"] { background: var(--gh-tile-active); }
.sidebar-selector strong { font-size: 13px; }
.team-monogram { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--gh-control-line); font-size: 12px; font-weight: 700; }
/* The account popover: a small profile card, the person over the account actions. */
.account-card-person { display: flex; align-items: center; gap: 12px; padding: .5rem .75rem .75rem; margin-bottom: .25rem; border-bottom: 1px solid var(--gh-line); overflow-wrap: anywhere; }
.account-card-person .person-avatar { width: 40px; height: 40px; font-size: 13px; }
.account-card-person strong { display: block; line-height: 1.3; }
.account-card-person small { display: block; color: var(--bs-secondary-color); }
/* A link with an icon before its label, the sidebar's sections and the page tabs alike, the icon
   in the label's colour. */
.sections a, .local-nav a { display: flex; align-items: center; gap: 10px; }
/* The sections, and the team's agents in the same shape: muted line icons (an agent's small avatar)
   and labels, the current one in the accent on a soft ground, a long name cut short (Bootstrap's `text-truncate`). */
.sections { display: flex; flex-direction: column; gap: 2px; }
.sections a { min-width: 0; padding: 10px 12px; border-radius: 7px; color: var(--bs-secondary-color); font-weight: 550; text-decoration: none; }
.sections a:hover { color: var(--bs-body-color); }
.sections a.active { color: var(--gh-accent); background: var(--gh-soft); }
.sections .agent-avatar { width: 20px; height: 20px; border-radius: 6px; }
.sections .agent-avatar .icon { width: 14px; height: 14px; }
.nav-count { margin-left: auto; min-width: 20px; padding: 0 4px; text-align: center; border-radius: 6px; background: var(--gh-count); color: var(--gh-accent); font-size: 11px; }
/* The agents are the one block of the rail that grows and scrolls, pulled up to their small heading. */
.sidebar-agents { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: -14px; }
.app-sidebar .offcanvas-body > .sidebar-agents { flex-shrink: 1; }
/* The brand anchors the bottom of the rail. */
.sidebar-bottom { margin-top: auto; padding-top: 20px; }
.brand { display: inline-flex; align-items: center; gap: 8px; margin: 0 8px; font-size: 22px; letter-spacing: -.7px; font-weight: 750; color: var(--bs-body-color); text-decoration: none; }
.brand:hover { color: var(--bs-body-color); }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--gh-accent); color: var(--gh-paper); font-size: 24px; line-height: 1; }
.brand-dot { color: var(--gh-accent); margin-left: -8px; }
/* An agent's avatar: a robot on one of three tones (the agent_tone filter). */
.agent-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: var(--gh-tone-green); color: var(--gh-tone-green-ink); }
.agent-avatar.blue { background: var(--gh-tone-blue); color: var(--gh-tone-blue-ink); }
.agent-avatar.plum { background: var(--gh-tone-plum); color: var(--gh-tone-plum-ink); }
/* the same tile for a page that is not an agent's: the sidebar's icon on its muted tile */
.agent-avatar.neutral { background: var(--gh-tile); color: var(--bs-secondary-color); }
.agent-avatar .icon { width: 18px; height: 18px; }

/* Menu popovers (gatehouse.js, data-menu-popover): one surface, item style and width for every menu-like control
   (the account, the team, a member's actions, Add a member). Bootstrap's popover has no list styling. */
.menu-popover { --bs-popover-max-width: min(20rem, calc(100vw - 1rem)); --bs-popover-body-padding-x: .375rem; --bs-popover-body-padding-y: .375rem; --bs-popover-border-color: var(--gh-line); --bs-popover-border-radius: 10px; min-width: 14rem; box-shadow: 0 8px 30px rgba(38, 59, 54, .12); }
.menu-list { list-style: none; margin: 0; padding: 0; }
/* a menu's list that can grow (the team popover's teams) scrolls by itself, the rest of the menu stays in view */
.menu-scroll { max-height: 40vh; overflow-y: auto; }
.popover-label { margin: 0; padding: .5rem .75rem; }
.popover-action { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 7px; background: transparent; padding: .45rem .75rem; color: var(--bs-body-color); text-align: left; text-decoration: none; overflow-wrap: anywhere; }
button.popover-action:hover, a.popover-action:hover, button.popover-action:focus-visible, a.popover-action:focus-visible { background: var(--gh-soft); color: var(--bs-emphasis-color); }
.popover-action.text-danger:hover, .popover-action.text-danger:focus-visible { color: var(--bs-danger-text-emphasis) !important; }
.popover-action[aria-current] { background: var(--gh-tile-active); }
.menu-popover .team-monogram { width: 24px; height: 24px; font-size: 11px; }

/* Category tabs over a list of proposals: Gatehouse's quiet pills with counts, as far under the tabs (or the
   header's rule, both 28px above) as the list sits under them. */
.filter-tabs { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-body-color); --bs-nav-link-padding-x: 10px; --bs-nav-link-padding-y: 7px; --bs-nav-link-font-size: 12px; --bs-nav-link-font-weight: 550; --bs-nav-pills-border-radius: 6px; --bs-nav-pills-link-active-bg: var(--gh-soft); --bs-nav-pills-link-active-color: var(--gh-accent); gap: 5px; margin-top: -10px; margin-bottom: 18px; }
.filter-tabs .nav-link { display: inline-flex; align-items: center; }
/* the uncounted pills as a group at the row's end */
.filter-tabs > .uncounted { margin-left: auto; }
.filter-tabs > .uncounted ~ .uncounted { margin-left: 0; }
.filter-tabs .nav-link > span { margin-left: 7px; font-size: 10px; opacity: .7; }
/* each pill's icon small before its label, in its colour */
.filter-tabs .nav-link > .icon { width: 14px; height: 14px; margin-right: 6px; }
/* The tabs of an agent room and of the team: underlined in the accent, the weight constant so the tabs do not move;
   side by side with no gap, their padding spacing the labels, so no space between two tabs is dead. */
.local-nav { display: flex; flex-wrap: wrap; margin-bottom: 28px; border-bottom: 1px solid var(--gh-line); }
.local-nav a { padding: 12px 16px; margin-bottom: -1px; color: var(--bs-secondary-color); font-weight: 550; text-decoration: none; border-bottom: 2px solid transparent; }
.local-nav a:hover { color: var(--bs-body-color); }
.local-nav a.active { color: var(--gh-accent); border-bottom-color: var(--gh-accent); }
/* the room's four tabs on one row on a phone: a wrapped tab sits on the row's line and reads as a second set */
@media (max-width: 575.98px) { .local-nav a { padding-inline: 10px; } }

/* A list page's add action, under its list: members, connections, agents. */
.list-actions { margin-top: 1.5rem; }
/* Item lists (connections, proposals, members): Bootstrap's list group in the register panel's look, without a
   header row. Each item is one grid row whose columns (--item-columns) are the same in every item, so they align.
   The whole item opens through its title, a native link stretched over the item (Bootstrap's stretched-link); the
   item's other links stay above it. The title keeps a readable width: as the list narrows, its rows reflow in steps by the list's own width (a
   container query, so the sidebar counts): first the secondary columns wrap under the title, then everything stacks. */
.item-list { container-type: inline-size; --bs-list-group-bg: var(--gh-paper); --bs-list-group-border-color: var(--gh-line); --bs-list-group-border-radius: 10px; --bs-list-group-item-padding-x: 18px; --bs-list-group-item-padding-y: 14px; }
.item-list > .list-group-item { display: grid; grid-template-columns: var(--item-columns); align-items: center; gap: 4px 28px; overflow-wrap: anywhere; }
.item-list > .list-group-item:has(.stretched-link):hover, .item-list > .list-group-item:has(.stretched-link):focus-within { background: var(--gh-row-hover); }
.item-list a:not(.stretched-link) { position: relative; z-index: 2; }
.item-list .eyebrow { font-size: .65rem; line-height: 1.4; }
.item-title { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; text-decoration: none; }
.item-end { justify-self: end; text-align: right; }
.connection-items { --item-columns: minmax(14rem, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.connection-items .item-title { font-size: 1.15rem; }
/* The agent's column is as wide as the longest name on the page, up to 10rem, a longer name cut with an ellipsis.
   The rows share the list's columns through a subgrid, so they still align. */
/* The list's own tracks may shrink to nothing: below the four-column width (the container rules) the rows are grids
   of their own spanning the list, and the list must not be wider than its column. The outer tracks hold the rows'
   padding (a subgrid's padding comes out of its edge tracks). */
.proposal-items:not(.without-agent) { display: grid; grid-template-columns: minmax(0, calc(var(--time-column) + 18px)) minmax(0, 1fr) fit-content(10rem) minmax(0, calc(7.5rem + 18px)); column-gap: 28px; }
.proposal-items:not(.without-agent) > .list-group-item { grid-column: 1 / -1; grid-template-columns: subgrid; }
.proposal-items.without-agent { --item-columns: var(--time-column) minmax(16rem, 1fr) 7.5rem; }
/* The submission time leads a proposal item and is not ambient: the ink colour, a size above the body's. */
/* A relative time never breaks inside ("16 minutes ago"); its column fits the longest, "58 minutes ago", and the
   title column beside it is the one that shrinks. The review page's time takes the same column. */
:root { --time-column: 8.5rem; }
.item-time { white-space: nowrap; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--bs-body-color); }
/* Step one: a proposal's agent and state go to a second line under its title, the time stays at the left; a
   connection's facts go under its name, the end column stays at the right. */
@container (max-width: 46rem) {
  .proposal-items:not(.without-agent) > .list-group-item { --item-columns: var(--time-column) minmax(0, 1fr) auto; grid-template-columns: var(--item-columns); }
  .proposal-items:not(.without-agent) > .list-group-item > :nth-child(2) { grid-column: 2 / -1; }
  .proposal-items > .list-group-item > .item-time { grid-row: 1 / span 2; }
}
@container (max-width: 39rem) {
  .proposal-items.without-agent > .list-group-item { --item-columns: var(--time-column) minmax(0, 1fr); }
  .proposal-items.without-agent > .list-group-item > .item-end { grid-column: 2; justify-self: start; }
}
@container (max-width: 48rem) {
  .connection-items > .list-group-item { --item-columns: minmax(0, 1fr) auto; }
  .connection-items > .list-group-item > .meta:not(.item-end) { grid-column: 1; }
  .connection-items > .list-group-item > .item-end { grid-column: 2; grid-row: 1 / span 2; }
}
/* Step two: everything stacks. */
@container (max-width: 34rem) {
  .item-list.proposal-items > .list-group-item, .item-list.connection-items > .list-group-item { --item-columns: minmax(0, 1fr); }
  .proposal-items > .list-group-item > *, .connection-items > .list-group-item > * { grid-column: 1 !important; grid-row: auto !important; }
  .proposal-items .item-end, .connection-items .item-end { justify-self: start; text-align: left; }
}

/* Gatehouse's room card, rounder and airier than Bootstrap's card: the agent cards, the connector cards and the
   policy form's switch rows. */
.panel-card { padding: 28px; background: var(--gh-paper); border: 1px solid var(--gh-line); border-radius: 18px; }
/* The grid of the agent cards and the connector cards. Agent cards: Gatehouse's rooms on the agents list, what
   needs attention and the last days' counts in a row. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 22px; }
.agent-card { position: relative; display: flex; flex-direction: column; min-height: 280px; }
.agent-card h2 { font-size: 24px; margin: 0; }
/* The figures share the row equally, a label wrapping rather than widening the card; each small label over its
   figures, "Now" over what needs attention, the last days' over the other two; the figures stand on one line, a
   label wrapping below its own. */
.agent-card .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: .375rem 16px; margin: 0 0 25px; font-size: 10px; line-height: 1.3; color: var(--bs-secondary-color); }
.agent-card .stats > .stats-span { grid-column: span 2; }
/* One size and weight for the three figures, in the muted ink; what needs attention is the card's
   first thing, in the sidebar counts' accent unless it is 0. */
/* A figure of three or more characters ("123", "1.2k") is wider than a narrow card's column at 44px: the card's longest
   (`--chars`) shrinks to its column, at about .6em a character, and the other two with it, one size on the card. */
.agent-card .stats > span { container-type: inline-size; }
.agent-card .stats b { display: block; font-size: min(44px, 100cqi / var(--chars) / .6); font-weight: 500; line-height: 1; color: var(--bs-secondary-color); }
.agent-card .stats .attention:not(.clear) b { color: var(--gh-accent); }
/* the agent's connections at the card's foot; the name above opens the room */
.agent-card footer { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--gh-line); font-size: 11px; }


/* Before and after (the YouTrack connector's rendering): Bootstrap has no diff component. The marks are quiet, one
   scheme on every widget: added in the add colours, removed struck in the delete colours, a
   replaced value as below; the colours follow the theme. */
ins, del { text-decoration: none; border-radius: var(--bs-border-radius-sm); padding: 0 .125rem; }
ins { background: color-mix(in srgb, var(--gh-add) 75%, transparent); color: var(--gh-add-ink); }
del { background: color-mix(in srgb, var(--gh-delete) 65%, transparent); color: var(--gh-delete-ink); text-decoration: line-through; }
/* A value replaced by another: the one it was struck and dull, untinted, the one it becomes in the edit colour. */
del.before { background: none; color: var(--gh-unchanged); }
ins.after { background: color-mix(in srgb, var(--gh-edit) 75%, transparent); color: var(--gh-edit-ink); }
.unchanged { color: var(--gh-unchanged); }
.lines > * { display: block; padding: 0 .5rem; }
.lines > ins, .lines > del { border-radius: 0; }
/* A YouTrack issue as YouTrack shows it: the summary on the left and the id at the right end as the title line, the
   fields as a property rail of label-over-value cells, the description as body text, comments as a ruled thread; the
   proposed comment is tinted. */
.yt-issue-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }
.yt-issue-id, .yt-issue-new { margin-left: auto; }
.yt-issue-id { white-space: nowrap; font-family: var(--bs-font-monospace); font-size: .8rem; font-weight: 600; }
/* the link's words, "Created as" before an issue's id or "See in YouTrack" for a board or sprint, in the text's face */
.yt-words { font-family: var(--bs-body-font-family); font-weight: 400; }
.yt-issue-summary { margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
/* The card's body in YouTrack's issue shape: the content, and at the right the properties as a rail
   on the header's tint, ruled off; below the content on narrow screens. A body with no content (a field change on a
   pile's front card) is the rail alone, its cells side by side. */
.yt-issue-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 17rem); padding: 0; }
.yt-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); }
.yt-rail { min-width: 0; padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); border-left: 1px solid var(--gh-line); background: color-mix(in srgb, var(--gh-card-cap) 60%, transparent); border-bottom-right-radius: var(--bs-card-inner-border-radius); }
.yt-issue-body:not(:has(.yt-main > *)) { grid-template-columns: minmax(0, 1fr); }
.yt-issue-body:not(:has(.yt-main > *)) .yt-main { display: none; }
.yt-issue-body:not(:has(.yt-main > *)) .yt-rail { border-left: 0; background: none; }
.yt-issue-body:not(:has(.yt-main > *)) .yt-fields { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.yt-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem 1.25rem; margin: 0; }
.yt-fields:not(:has(*)) { display: none; }
/* The count of the fields left alone, a fold that shows them under it, dull. */
.yt-more { display: block; margin-top: .75rem; font-size: .8rem; color: var(--gh-unchanged); text-decoration: none; }
.yt-more:hover { color: var(--bs-secondary-color); text-decoration: underline; }
.yt-fields:not(:has(*)) + .yt-more { margin-top: 0; }
.yt-more + .collapse > .yt-fields, .yt-more + .collapsing > .yt-fields { padding-top: .75rem; }
@media (max-width: 575.98px) {
  .yt-issue-body { grid-template-columns: minmax(0, 1fr); }
  .yt-rail { border-left: 0; border-top: 1px solid var(--gh-line); border-bottom-left-radius: var(--bs-card-inner-border-radius); }
}
.yt-field { min-width: 0; overflow-wrap: anywhere; }
.yt-field dt { font-size: 11px; font-weight: 500; color: var(--bs-secondary-color); margin-bottom: .125rem; }
.yt-field dd { margin: 0; }
.yt-item + .yt-item { margin-left: .25rem; }
.yt-section-label { margin: 0 0 .375rem; font-size: 11px; font-weight: 500; color: var(--bs-secondary-color); }
.yt-comment { padding: .125rem 0 .125rem .875rem; border-left: 2px solid var(--gh-line); }
/* The fields an action leaves alone and an untouched description are the issue's context: muted. */
/* Several issues getting the same change: complete cards piled one behind the other, each covering the one behind
   it but for its title line, the front card whole. A card behind is its header alone, reaching
   under the next card by --yt-tuck; a soft shadow along each card's top edge lifts it off the one behind. */
.yt-pile { --yt-tuck: 14px; }
.yt-pile .card { position: relative; box-shadow: 0 -2px 6px -2px rgba(38, 59, 54, .12); }
/* Every card is the full width, however many: no narrowing for depth. */
.yt-behind { margin-bottom: calc(-1 * var(--yt-tuck)); }
.yt-behind .card-header { padding-bottom: calc(var(--bs-card-cap-padding-y) + var(--yt-tuck)); border-bottom: 0; }
/* The fold is one more strip at the back of the pile, its title the count of cards folded behind it; the whole strip
   is the button. */
.yt-fold .card-header { display: flex; justify-content: center; align-items: center; gap: .375rem; width: 100%; border: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; color: var(--bs-secondary-color); }
.yt-fold .card-header:hover { color: var(--bs-body-color); }
/* The chevron points down at the folded cards and turns up once they are out. */
.yt-fold .card-header .icon { transition: transform .2s; }
.yt-fold .card-header[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* A fold's label says what it does next: show all, or show fewer again. */
.fold-toggle[aria-expanded="true"] .when-collapsed, .fold-toggle:not([aria-expanded="true"]) .when-expanded { display: none; }
/* The new comment's tint says it is proposed; its text keeps the insertion mark without a second tint. */
.yt-comment-new ins { background: none; padding: 0; }
.yt-comment-new { border-left-color: var(--gh-add-ink); background: color-mix(in srgb, var(--gh-add) 45%, transparent); padding-block: .5rem; border-radius: 0 6px 6px 0; }

/* What an action is, in a gutter at the left of its card, so a board, a sprint and an issue, and
   adding or editing one, read apart before the content is read: a tile with the entity's icon and the change type's
   in its corner, the tile in the change type's colour, the kind's name under it. A narrow column: the name wraps to
   two lines, the cards keep the room. The marker stands at the top left of the whole action, strips of a pile and
   the count line included, and stays in view while a long action scrolls by. */
/* The row carries the change type's colours (`kind-add`, `kind-edit`); the marker's tile and the cards' borders take
   them, the border a quarter of the ink in the hairline, a tint of the line rather than a frame. Only the card's outline: its inner rules stay
   hairlines. */
.kind-row { --kind-bg: var(--gh-edit); --kind-ink: var(--gh-edit-ink); display: flex; align-items: flex-start; gap: .875rem; }
.kind-body .card { border-color: color-mix(in srgb, var(--kind-ink) 25%, var(--gh-line)); }
.kind-row > .kind-marker { flex: 0 0 3.75rem; position: sticky; top: 1rem; }
.kind-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.kind-marker { display: flex; flex-direction: column; align-items: center; gap: .3125rem; padding-top: .375rem; color: var(--kind-ink); }
.kind-add { --kind-bg: var(--gh-add); --kind-ink: var(--gh-add-ink); }
.kind-tile { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--kind-bg); }
.kind-tile > .icon { width: 22px; height: 22px; }
.kind-change { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--kind-ink); color: var(--gh-ground); box-shadow: 0 0 0 2px var(--gh-ground); }
.kind-change > .icon { width: 11px; height: 11px; }
.kind-name { font-size: .625rem; font-weight: 650; letter-spacing: .06em; line-height: 1.2; text-align: center; text-transform: uppercase; }
/* Below 576 px a card beside the gutter is too narrow to read: the marker goes above the action as a short row, the
   tile beside the name, and does not stick. */
@media (max-width: 575.98px) {
  .kind-row { flex-direction: column; align-items: stretch; gap: 1rem; }
  .kind-row > .kind-marker { flex: none; position: static; flex-direction: row; gap: .625rem; padding-top: 0; }
}
.card-header .meta { margin: .125rem 0 0; }
/* A board's or sprint's settings: label beside value, like YouTrack's own settings form; one grid, so a label never
   floats at the end of the previous value's line. */
.bd-props { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: .375rem 1.25rem; margin: 0; }
.bd-props dt { font-weight: 400; color: var(--bs-secondary-color); }
.bd-props dd { margin: 0; overflow-wrap: anywhere; }
.bd-arrow { color: var(--bs-secondary-color); margin: 0 .25rem; }
.bd-chip { display: inline-block; padding: 0 .375rem; border: 1px solid var(--gh-line); border-radius: 5px; line-height: 1.5; }
.bd-chip + .bd-chip { margin-left: .25rem; }
ins.bd-chip, del.bd-chip { border-color: transparent; }
/* The board's shape, unified: one header row of columns in board order (removed ones where they were), one row per
   swimlane. Empty cells: a board change moves no cards. */
.bd-board { margin: 0; }
.bd-grid {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) repeat(var(--bd-cols), minmax(0, 1fr));
  border: 1px solid var(--gh-line); border-radius: 10px; overflow: hidden; background: var(--gh-paper);
}
.bd-corner, .bd-col { padding: .5rem .625rem; background: var(--gh-card-cap); }
.bd-col { border-left: 1px solid var(--gh-line); min-width: 0; overflow-wrap: anywhere; }
.bd-corner { font-size: 11px; color: var(--bs-secondary-color); }
.bd-col-name, .bd-col-name ins, .bd-col-name del { font-weight: 600; }
.bd-col-note { font-size: .8rem; color: var(--bs-secondary-color); }
/* Cards leaving the board are what a reviewer must not miss. */
.bd-col-note.bd-danger { color: var(--gh-delete-ink); font-weight: 600; }
.bd-col-mark { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); }
/* An unmarked column keeps the line, so the names of a row stay level. */
.bd-grid .bd-col-mark:empty::before { content: "\00a0"; }
.bd-list .bd-col-mark:empty { display: none; }
.bd-lane { padding: .375rem .625rem; font-weight: 600; font-size: .8rem; border-top: 1px solid var(--gh-line); }
.bd-cell { min-height: 2.25rem; border-left: 1px solid var(--gh-line); border-top: 1px solid var(--gh-line); }
/* A removed column stays in place, struck and hatched; an added one is tinted like an insertion. */
.bd-removed { background: color-mix(in srgb, var(--gh-delete) 55%, var(--gh-card-cap)); }
.bd-removed .bd-col-mark { color: var(--gh-delete-ink); }
.bd-cell.bd-removed { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--gh-delete) 70%, transparent) 6px 8px); }
.bd-added { background: color-mix(in srgb, var(--gh-add) 70%, var(--gh-card-cap)); }
.bd-cell.bd-added { background: color-mix(in srgb, var(--gh-add) 35%, transparent); }
.bd-added .bd-col-mark { color: var(--gh-add-ink); }
.bd-changed .bd-col-mark { color: var(--gh-edit-ink); }
.bd-sprints { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem; }
.bd-sprints .bd-chip + .bd-chip { margin-left: 0; }
/* The board as a list of its columns, the lanes one line: below 576 px, and for a board with more columns than the
   grid holds. The grid would need sideways scrolling, which hides a removed column off screen. */
.bd-list { display: none; margin: 0; padding: 0; list-style: none; border: 1px solid var(--gh-line); border-radius: 10px; overflow: hidden; }
.bd-list > li { padding: .5rem .75rem; border-top: 1px solid var(--gh-line); background: var(--gh-paper); }
.bd-list > li:first-child { border-top: 0; }
.bd-list > li.bd-removed { background: color-mix(in srgb, var(--gh-delete) 55%, var(--gh-paper)); }
.bd-list > li.bd-added { background: color-mix(in srgb, var(--gh-add) 70%, var(--gh-paper)); }
.bd-list-always { display: block; }
/* A change of a sprint: a property table, now and after approval, in fixed widths so consecutive cards line up. */
.bd-table { --bs-table-bg: transparent; margin: 0; table-layout: fixed; }
.bd-table th, .bd-table td { padding: .4rem .625rem; vertical-align: top; }
.bd-table td { width: 35%; overflow-wrap: anywhere; }
.bd-table thead th { font-size: 11px; font-weight: 500; color: var(--bs-secondary-color); }
.bd-table tbody th { font-weight: 400; color: var(--bs-secondary-color); width: 30%; }
@media (max-width: 575.98px) {
  .bd-grid { display: none; }
  .bd-list { display: block; }
  .bd-props { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bd-props dd { margin-bottom: .5rem; }
  .bd-table thead { display: none; }
  .bd-table, .bd-table tbody { display: block; }
  .bd-table tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--gh-line); }
  .bd-table tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 0; border: 0; }
  .bd-table td { border: 0; width: auto; }
  .bd-table td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--bs-secondary-color); }
}

/* The addresses seen lately under the allowed-from field: a muted line of small chips that wraps. */
.recent-sources { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; margin-top: .5rem; }
.recent-sources > .btn { --bs-btn-padding-y: .0625rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: .75rem; }

/* What an agent sent and the setup texts wrap; Bootstrap's pre scrolls sideways. */
pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* The review page's block above the diff: at the left the time in the proposal item's column, the
   agent's prose headed by the title beside it, the time on the title's baseline; at the right
   the status card with the ambient facts under it.
   The two sides wrap rather than squeeze: the main side takes the room, the status side keeps about 22rem beside it
   and the full width once it wraps below. */
.proposal-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 40px; margin-bottom: 22px; overflow-wrap: anywhere; }
.proposal-head-main { flex: 999 1 26rem; min-width: 0; display: grid; grid-template-columns: var(--time-column) minmax(0, 1fr); align-items: baseline; gap: 18px 28px; }
.proposal-head-prose { grid-column: 2; max-width: 60rem; }
.proposal-head-prose > .agent-prose { margin: 0; }
/* The status card grows downward, never sideways: reasons, titles and names wrap anywhere. */
.proposal-head-status { flex: 1 1 22rem; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: .625rem; overflow-wrap: anywhere; }
.proposal-head-status > * { min-width: 0; max-width: 100%; }
.proposal-head-status > .alert { margin: 0; }
.proposal-decision { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
/* One ambient fact a line. */
.proposal-head-facts { display: flex; flex-direction: column; gap: .125rem; }
@media (max-width: 640px) {
  .proposal-head-main { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .proposal-head-prose { grid-column: 1; }
}
/* The actions by what needs a person; the allowed ones under a quieter heading. Diffs hold service text and links
   that may have no natural wrap points. */
.action-group + .action-group { margin-top: 2.5rem; }
.action-group > h2 { margin: 0 0 1rem; }
.action-group-allowed > h2 { font-size: .875rem; font-weight: 600; color: var(--bs-secondary-color); }
.action { min-width: 0; overflow-wrap: anywhere; }

/* What an agent wrote reads as text quoted in a document, not a message: one inset block with a thin left rule, in the
   page's own type, the agent's avatar small in a gutter at its left, level with the first line, instead of a line
   naming it; the source it gave follows, muted. */
.agent-prose { display: flex; align-items: flex-start; gap: .75rem; margin: 0 0 1.5rem; min-width: 0; overflow-wrap: anywhere; }
.agent-prose > blockquote { flex: 1; min-width: 0; }
.agent-prose-avatar { width: 22px; height: 22px; margin-top: .125rem; border-radius: 7px; }
.agent-prose-avatar .icon { width: 15px; height: 15px; }
.agent-prose blockquote { margin: 0; padding: .125rem 0 .125rem 1rem; border-left: 2px solid var(--gh-control-line); }
.agent-prose p { margin: 0; }
.agent-prose p + p { margin-top: .5rem; }
.agent-prose-source { color: var(--bs-secondary-color); }

/* A page's facts: a block between the page header and the content, like the
   review page's. The sections side by side, each as wide as its lines, wrapping to the next row when they do not fit;
   stacked on narrow screens only. Each a small label over its facts, one line per piece. The page's contextual actions at the right end, below the sections when they wrap; an
   ambient note under both; the same rule under the block as under the review's. */
.facts-block { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 40px; margin-bottom: 22px; overflow-wrap: anywhere; }
/* Facts keep their natural width and wrap to the next row rather than squeeze a name or a date onto several lines. */
.facts { flex: 999 1 24rem; min-width: 0; display: flex; flex-wrap: wrap; gap: 16px 40px; }
.fact { flex: 0 0 auto; max-width: 100%; }
.fact > .eyebrow { margin-bottom: .375rem; }
.fact-line { margin: 0; }
.facts-note { flex: 1 0 100%; margin: 0; }
.facts-actions { flex: 0 1 auto; margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 640px) {
  .facts { flex-direction: column; }
  .facts-actions { margin-left: 0; }
}

/* Flash messages (Django's messages, one request each) as Bootstrap toasts: top centre over the content column (the
   sidebar's width aside from 768 px), sliding in from the top, staying until closed or the next page. Bootstrap's
   toast has no container placement of this kind or entrance motion; the colours are the message level's subtle ones. */
.flash-toasts { position: fixed; top: 0; left: 50%; z-index: 1090; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; transform: translateX(-50%); width: max-content; max-width: 100vw; }
@media (min-width: 768px) { .flash-toasts { left: calc(50% + var(--sidebar-width) / 2); max-width: calc(100vw - var(--sidebar-width)); } }
.flash-toast { --bs-toast-border-color: transparent; --bs-toast-border-radius: 10px; --bs-toast-font-size: .875rem; --bs-toast-box-shadow: 0 8px 30px rgba(38, 59, 54, .14); width: auto; max-width: min(36rem, calc(100vw - 2rem)); animation: toast-in .3s ease-out; }
.flash-toast .toast-body { padding: .75rem .75rem .75rem 1rem; }
/* the level's icon before a toast's or an error alert's text, at the text's size */
.flash-toast .toast-body > .icon, .alert > .icon { width: 16px; height: 16px; }
@keyframes toast-in { from { transform: translateY(-1.25rem); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .flash-toast { animation: none; } }
/* A team's members and invitations: the person's avatar beside the name over the email, when they joined, actions. */
.member-items { --item-columns: minmax(0, 1fr) auto auto; }
.member-items .item-title { font-size: .95rem; }
.min-w-0 { min-width: 0; }
/* An empty list: a card's outline with no fill, a large empty-box line icon over the sentence,
   both muted, the sentence larger. */
.empty-state { --bs-card-bg: transparent; align-items: center; gap: .5rem; padding: 2.5rem; font-size: 1.1rem; color: var(--bs-secondary-color); text-align: center; }
.empty-state-mark { display: block; margin-bottom: .25rem; line-height: 0; }
.empty-state-mark .icon { width: 40px; height: 40px; }
@container (max-width: 40rem) {
  /* A member's actions stay beside the name; when they joined goes under it. */
  .member-items > .list-group-item { --item-columns: minmax(0, 1fr) auto; }
  .member-items > .list-group-item > .meta { grid-column: 1; }
  .member-items > .list-group-item > .item-end { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
}
/* Choosing a connector: small cards in the agent cards' grid, the connector's mark over its label and line. One not
   built yet is muted: its mark greyed, its label in the secondary colour. */
.connector-card { position: relative; padding: 22px 24px; }
.connector-card:not(.later):hover { border-color: color-mix(in srgb, var(--gh-accent) 45%, var(--gh-line)); }
.connector-mark svg { display: block; width: 40px; height: 40px; }
.connector-card h2 { font-size: 18px; margin: 18px 0 2px; }
.connector-card.later h2 { color: var(--bs-secondary-color); }
.connector-card.later .connector-mark { filter: grayscale(1); opacity: .5; }