/* brevily console — the v3 layer (design/v3: PHASE1-global.md, kit.css).
   Sits on top of the design's exported theme (brevily.css, site.css,
   console.css — verbatim copies, never edited) and the app's own
   console-app.css, and loads LAST (views/core.ts). Unlayered like the
   theme, so it beats every layered @tundralibs/ui rule without
   !important; selectors stay low so a page can still refine them.
   kit.css is the reference for numbers and states only: its `b-*` names
   are not used here — this restyles the console's own classes (btn,
   badge, alert, segmented, data-table, menu, brv-c-*) and the classes
   the ui kit's components emit. Colours come from tokens only.

   ── Breakpoints: ONE set (console v3 §11.1), and no other values ──────
     ≥ 1280px      desktop: the full sidebar (the `brv-rail` cookie may
                   collapse it), side rails beside the main column
     1024–1279px   the rail by default (the cookie may expand it); the
                   layout as desktop, except where a wide side rail needs
                   the room and stacks under the main column
     768–1023px    tablet: the rail, the compact topbar (no help, no
                   name, a 220px search), ONE main column — side rails
                   stack under it, what needs attention first — and the
                   Settings hub's sections as a row of scrolling chips
     < 768px       phone: the phone shell (a top bar and a tab bar,
                   views/layout.ts), cards, sheets
   Written only as these queries (a max-width is the next edge less
   0.02px, so no fractional width falls between two ranges):
     (max-width: 767.98px)    (min-width: 768px)
     (max-width: 1023.98px)   (min-width: 1024px)
     (max-width: 1279.98px)   (min-width: 1280px)
   Scripts match the same strings (console-v3.js). The content width is
   what a layout feels: 1280 with the sidebar leaves 955px, 1024 with the
   rail 899px, 834 with the rail 720px — check a two-column layout at the
   bottom of its range. The exported theme (console.css, verbatim) still
   switches a few layouts at 1199 / 575px; "The theme's own switches"
   below moves each onto this set. */

/* ── G1 · Tokens ─────────────────────────────────────────────────────── */

:root {
  /* Native controls (checks, scrollbars) follow the theme. */
  color-scheme: light;
  --accent-tint: rgb(10 115 105 / 0.08);
  --accent-tint-strong: rgb(10 115 105 / 0.14);
  /* Icons drawn by CSS (masks, currentColor), from kit.css's .i-* set. */
  --brv-ic-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
  --brv-ic-check-circle: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m8 12 3 3 5-6'/></svg>");
  --brv-ic-info: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8h.01'/></svg>");
  --brv-ic-warning: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10.3 4 2.6 17.5A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z'/><path d='M12 9.5v4M12 17h.01'/></svg>");
  --brv-ic-alert: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v4.5M12 16h.01'/></svg>");
  --brv-ic-trend-up: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 17 6-6 4 4 8-8'/><path d='M15 7h6v6'/></svg>");
  --brv-ic-trend-down: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 7 6 6 4-4 8 8'/><path d='M15 17h6v-6'/></svg>");
}

/* Both dark blocks carry identical values, as brevily.css's do. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --accent-tint: rgb(79 209 192 / 0.1);
    --accent-tint-strong: rgb(79 209 192 / 0.16);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --accent-tint: rgb(79 209 192 / 0.1);
  --accent-tint-strong: rgb(79 209 192 / 0.16);
}

/* ── The theme's own switches, moved onto the set ───────────────────── */
/* console.css turns the stat strip into two columns and `.brv-c-grid-3`
   into two at 1199px (one column each on a phone, at its 767px): two
   through all of the rail's widths. Its options grid goes to one column
   at 575px: the same on every phone. (Its 991px rules style classes the
   console no longer draws; its 767px ones are the phone's edge already.) */

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-c-stats,
  .brv-c-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767.98px) {
  .brv-c-modal-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── G2 · Type scale ─────────────────────────────────────────────────── */

.brv-c-page .page-header__title {
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.brv-c-page .page-header__subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
}

.brv-c-panel__title {
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Overlines: figure labels and table headers. */
.brv-c-fig__l,
.data-table__table th {
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* Short links: whole, mono, teal. The destination beside one truncates. */
.brv-link {
  font-family: var(--font-family-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

/* The destination under a link page's title is a line of text, not a title. */
.brv-c-linkhead__dest {
  font-family: var(--font-family-base);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.brv-c-cell-link__dest {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

/* A table's primary cell link (a person, an organisation, an audit entry)
   is text, not a short link: the base font in the text colour, 500, and
   teal and underlined on hover. Short links opt back into mono teal: the
   `brv-sl` class, or a `brv-link` that leads to a link's own page (the
   Links list, the review queue). */
.brv-c-cell-link > a,
.brv-c-cell-link > a.brv-link {
  font-family: var(--font-family-base);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text);
  text-decoration: none;
  white-space: normal;
}

.brv-c-cell-link > a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-sl,
.brv-c-cell-link > a.brv-sl,
.brv-c-cell-link > a.brv-link[href*="/links/"] {
  font-family: var(--font-family-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  white-space: nowrap;
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--color-text-subtle);
}

/* ── G4 · Buttons ────────────────────────────────────────────────────── */
/* .btn is ink (primary); --outline is the design's plain button; --accent
   teal (one per view); --ghost; --danger is a red-text outline, solid only
   where it confirms (a modal's foot). */

.btn {
  gap: 7px;
  padding-inline: 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  box-shadow: none;
  transition: background-color var(--brv-dur-quick), border-color var(--brv-dur-quick),
    color var(--brv-dur-quick), opacity var(--brv-dur-quick),
    transform var(--brv-dur-quick) var(--brv-ease-out);
}

/* A trailing arrow nudges 2px on hover (icons carry `brv-i--<name>`). */
.btn > .brv-i--arrow-right:last-child,
.btn > .brv-i--chevron-right:last-child {
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.btn:hover > .brv-i--arrow-right:last-child,
.btn:hover > .brv-i--chevron-right:last-child {
  transform: translateX(2px);
}

.btn:active {
  transform: translateY(1px);
}

.btn--sm {
  gap: 6px;
  padding-inline: 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
}

.btn--lg {
  padding-inline: 18px;
  font-size: 15px;
}

.btn--icon {
  padding-inline: 0;
}

.btn--outline {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  box-shadow: none;
}

.btn--outline:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-control);
}

.btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.btn--accent:hover {
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}

.btn--ghost:hover {
  background: var(--color-surface-alt);
  border-color: transparent;
  color: var(--color-text);
}

.btn--danger {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-danger);
}

.btn--danger:hover {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
  filter: none;
}

.btn--ghost.btn--danger {
  background: transparent;
  border-color: transparent;
}

.btn--ghost.btn--danger:hover {
  background: var(--color-danger-soft);
}

.modal__footer .btn--danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-danger-contrast);
}

.modal__footer .btn--danger:hover {
  background: var(--color-danger);
  filter: brightness(0.92);
}

/* The variants above are unlayered, so the kit's disabled and loading
   states (layered) are restated after them. */
.btn:is(:disabled, [aria-disabled="true"]),
.btn:is(:disabled, [aria-disabled="true"]):hover {
  background: var(--color-disabled);
  border-color: transparent;
  color: var(--color-disabled-text);
  filter: none;
  transform: none;
  cursor: not-allowed;
}

.btn.btn--loading {
  color: transparent;
}

/* ── G4 · Inputs ─────────────────────────────────────────────────────── */
/* 34px (--control-height-md; 42 large, 28 small), strong border, control
   border on hover, focus = accent border + a 3px tint ring. */

.input,
.select__native,
.combobox__field {
  border-color: var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: border-color var(--brv-dur-quick), box-shadow var(--brv-dur-quick);
}

.input,
.select__native,
.combobox__input {
  font-size: 14px;
}

.input--sm {
  font-size: 13px;
}

.input--lg {
  font-size: 15px;
}

.input:hover,
.select__native:hover,
.combobox__field:hover {
  border-color: var(--color-border-control);
}

.input:focus-visible,
.select__native:focus-visible,
.combobox__field:focus-within,
.combobox--open .combobox__field,
.combobox[aria-expanded="true"] .combobox__field {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--color-accent);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

.input--invalid,
.input--invalid:hover,
.input--invalid:focus-visible,
.input[aria-invalid="true"],
.select--invalid .select__native,
.select--invalid .combobox__field {
  border-color: var(--color-danger);
}

.input:disabled,
.input:disabled:hover {
  border-color: var(--color-border);
}

/* A group is one frame: the ring goes on it, never on the controls inside. */
.input-group {
  border-color: var(--color-border-strong);
  box-shadow: none;
}

.input-group:focus-within {
  outline: 2px solid transparent;
  outline-offset: 0;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

.input-group > .input:focus-visible,
.input-group .combobox__field,
.input-group .combobox__field:focus-within {
  border-color: transparent;
  box-shadow: none;
}

.form-field__label {
  font-size: 13px;
  font-weight: 600;
}

.form-field__help {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.form-field__error {
  font-size: 12.5px;
  color: var(--color-danger);
}

/* A picker's list is a menu under its field, not a box fused to it. */
.combobox__list {
  top: calc(100% + 4px);
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.combobox__option {
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 5px;
}

.combobox__option-label {
  font-size: 13.5px;
}

/* Switch 32×18, the knob springs on; checks 16px, teal when on. */
.switch__track {
  width: 32px;
  height: 18px;
  margin-top: 1px;
  background: var(--color-border-strong);
  box-shadow: none;
  transition: background-color var(--brv-dur-base);
}

.switch__thumb {
  top: 2px;
  inset-inline-start: 2px;
  width: 14px;
  height: 14px;
  /* White in both themes, as kit.css draws it. */
  background: var(--color-on-media);
  box-shadow: 0 1px 2px rgb(var(--shadow-color) / 0.2);
  transition: transform var(--brv-dur-base) var(--brv-ease-spring);
}

.switch__input:checked ~ .switch__track {
  background: var(--color-accent);
}

.switch__input:checked ~ .switch__track .switch__thumb {
  transform: translateX(14px);
}

/* Read-only (the Admin group's grid): the kit dims the whole switch to
   half, which greys the knob in dark. Instead ON is a muted neutral
   track (never the accent, which reads as live) under a white knob, OFF
   a sunken track; the cursor stays plain and nothing reacts. */
.switch:has(> .switch__input:disabled) {
  cursor: default;
}

.switch__input:disabled ~ .switch__track {
  opacity: 1;
  cursor: default;
  background: var(--color-surface-sunken);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.switch__input:disabled:checked ~ .switch__track {
  background: color-mix(in srgb, var(--color-text-subtle) 45%, transparent);
  box-shadow: none;
}

.switch__input:disabled ~ .switch__track .switch__thumb {
  background: var(--color-on-media);
}

.switch__input:disabled ~ .switch__label {
  color: var(--color-text-muted);
}

.choice__input,
.data-table__select input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}

/* ── G4 · Segmented ──────────────────────────────────────────────────── */
/* A sunken track; the chosen item is surface with a 1px border, no shadow. */

.segmented {
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.segmented__label,
.segmented--sm .segmented__label {
  gap: 6px;
  height: 26px;
  padding-inline: 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.segmented__label:hover {
  color: var(--color-text);
}

.segmented__input:checked + .segmented__label {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: none;
}

/* With the kit's gliding thumb, the thumb is the chosen surface. */
.js .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
  background: transparent;
  border-color: transparent;
}

.js .segmented::before {
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
  box-shadow: none;
}

/* ── G4 · Tabs ───────────────────────────────────────────────────────── */

.tabs__list {
  gap: 22px;
}

.tabs__tab {
  padding: 10px 0 11px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  transition: color var(--brv-dur-quick), border-color var(--brv-dur-quick);
}

.tabs__tab:hover {
  color: var(--color-text);
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* ── G4 · Badges and tags ────────────────────────────────────────────── */
/* Status = a soft pair (with the kit's 6px dot where the markup asks for
   it); neutral = sunken; accent is the soft teal pair, never solid. */

.badge {
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-color: transparent;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.badge__dot {
  width: 6px;
  height: 6px;
}

.badge--neutral {
  background: var(--color-surface-sunken);
  border-color: transparent;
  color: var(--color-text-muted);
}

.badge--accent {
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

/* Tags: squared, hairline, a mono # before the word — never a status. */
.brv-c-tags .chip {
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brv-c-tags .chip::before {
  content: "#";
  content: "#" / "";
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-subtle);
}

/* ── G4 · Panels ─────────────────────────────────────────────────────── */

.brv-c-panel {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.brv-c-panel__head {
  gap: 12px;
  min-height: 50px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
}

/* Title and its optional sub-line (`panel({ sub })`), stacked. */
.brv-c-panel__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-c-panel__sub {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-c-panel__body {
  padding: 16px;
}

.brv-c-panel__body--flush {
  padding: 0;
  border-radius: inherit;
}

.brv-c-panel__foot {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* A table or link list filling a panel uses the panel's frame, not a
   second one. */
.brv-c-panel__body--flush > :is(.data-table, .brv-links) {
  border: 0;
  border-radius: inherit;
}

/* ── G4 · Stat strip ─────────────────────────────────────────────────── */
/* One hairline box; cells split by subtle rules; label overline above a
   28px value; the change beside the label with its trend icon. */

.brv-c-stats {
  gap: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-c-fig,
.brv-c-fig:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px 12px;
  border-left: 1px solid var(--color-border-subtle);
}

.brv-c-fig:first-child {
  border-left: 0;
}

.brv-c-fig__l {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-c-fig__v {
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.brv-c-fig__v small {
  margin-left: 4px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-c-fig__s {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-c-fig__d {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.brv-c-fig__d::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--brv-ic-trend-up) center / contain no-repeat;
  mask: var(--brv-ic-trend-up) center / contain no-repeat;
}

.brv-c-fig__d--down::before {
  -webkit-mask-image: var(--brv-ic-trend-down);
  mask-image: var(--brv-ic-trend-down);
}

/* Three figures fill the box in three columns (the theme's grid is 4),
   down to the phone: two columns would leave the third alone on a row
   beside an empty cell. */
@media screen and (min-width: 768px) {
  .brv-c-stats:has(> .brv-c-fig:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  /* Two columns: an odd figure out (5, 7) takes the last row whole. */
  .brv-c-stats > .brv-c-fig:nth-child(odd):last-child:not(:nth-child(3)) {
    grid-column: 1 / -1;
  }
  .brv-c-stats:has(> .brv-c-fig:nth-child(3):last-child) > .brv-c-fig:last-child {
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid var(--color-border-subtle);
  }
}

/* A strip that is not the last thing in its panel keeps its distance. */
.brv-c-panel__body > .brv-c-stats:not(:last-child) {
  margin-bottom: 16px;
}

@media screen and (max-width: 1279.98px) {
  .brv-c-fig:nth-child(odd) {
    padding-left: 18px;
    border-left: 0;
  }
  .brv-c-fig:nth-child(n + 3) {
    border-top: 1px solid var(--color-border-subtle);
  }
}

@media screen and (max-width: 767.98px) {
  .brv-c-stats {
    gap: 0;
  }
  .brv-c-fig,
  .brv-c-fig:nth-child(odd) {
    padding-left: 16px;
    border-left: 0;
  }
  .brv-c-fig:nth-child(n + 2) {
    border-top: 1px solid var(--color-border-subtle);
  }
  .brv-c-fig__v {
    font-size: 24px;
  }
}

/* ── G4 · Tables ─────────────────────────────────────────────────────── */

.data-table {
  --data-table-header-height: 36px;
  border-radius: var(--radius-md);
}

.data-table__table {
  font-size: 13.5px;
}

.data-table__table th {
  padding-inline: 12px;
  background: var(--color-surface-alt);
}

.data-table__table td {
  height: 44px;
  padding: 8px 12px;
  font-size: 13.5px;
}

.data-table__table :is(th, td):first-child {
  padding-inline-start: 16px;
}

.data-table__table :is(th, td):last-child {
  padding-inline-end: 16px;
}

.data-table__table .data-table__select {
  padding-inline: 16px 0;
}

[data-density="compact"] .data-table__table td {
  height: 36px;
  padding-block: 4px;
}

.data-table__table tbody tr:hover td {
  background: var(--color-surface-alt);
}

/* The tint lies over the surface: sticky cells must stay opaque. */
.data-table__table tbody tr.data-table__row--selected td {
  background: linear-gradient(var(--accent-tint), var(--accent-tint)) var(--color-surface);
}

.data-table__table tbody tr.data-table__row--selected:hover td {
  background: linear-gradient(var(--accent-tint), var(--accent-tint)) var(--color-surface-alt);
}

/* The kebab stays quiet until its row is hovered or focused (always on
   touch). */
td.data-table__actions > .btn {
  opacity: 0.55;
}

.data-table__table tbody tr:is(:hover, :focus-within) td.data-table__actions > .btn {
  opacity: 1;
}

@media (hover: none) {
  td.data-table__actions > .btn {
    opacity: 1;
  }
}

/* The row's action strip stays the kit's ink strip: the button variants
   above are unlayered, so its colours are restated here. */
.data-table__row-actions .btn {
  height: 26px;
  padding-inline: 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: transparent;
  border-color: color-mix(in oklab, var(--color-text-inverse) 22%, transparent);
  color: var(--color-text-inverse);
}

.data-table__row-actions .btn:hover {
  background: color-mix(in oklab, var(--color-text-inverse) 12%, transparent);
  border-color: color-mix(in oklab, var(--color-text-inverse) 22%, transparent);
  color: var(--color-text-inverse);
}

.data-table__row-actions .btn--danger,
.data-table__row-actions .btn--danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-danger-contrast);
}

.data-table__row-actions .btn--danger:hover {
  filter: brightness(0.92);
}

.data-table__row-actions .btn--icon,
.data-table__row-actions .btn--icon:hover {
  padding-inline: 0;
  border-color: transparent;
}

/* The bulk bar: a teal wash over the header row (opaque, so the header
   under it never shows through), with plain buttons. */
.data-table__bulk {
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--accent-tint), var(--accent-tint));
  color: var(--color-text);
  font-size: 13.5px;
}

.data-table__bulk-count {
  font-weight: 600;
}

.data-table__bulk-sep {
  background: var(--color-border-strong);
}

.data-table__bulk .btn {
  height: 26px;
  padding-inline: 8px;
  font-size: 12px;
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.data-table__bulk .btn:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-control);
}

.data-table__bulk .btn--danger {
  color: var(--color-danger);
}

.data-table__bulk .btn--danger:hover {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

/* A list's result banner takes the toolbar's first row to itself. */
.data-table__toolbar > .alert {
  flex: 1 1 100%;
}

.data-table__footer {
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* ── G4 · Bar lists and meters ───────────────────────────────────────── */
/* A share is a bar behind its row (label left, value and % right); the
   track the theme draws under each row becomes that background. */

.brv-c-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13.5px;
}

.brv-c-panel__body > .brv-c-bars {
  margin: -6px -4px;
}

.brv-c-bars__row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
}

/* The name gives way first: it ends in an ellipsis (the whole of it in
   the row's title) while the number and the % keep their width. A label
   with a lead (an icon, a country chip) keeps the lead inline, so the
   ellipsis still reaches the text. */
.brv-c-bars__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-c-bars__value {
  flex: none;
  font-weight: 500;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.brv-c-bars__pct {
  flex: none;
  width: 40px;
  text-align: right;
  font-size: 12px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-c-bars__track {
  position: absolute;
  inset: 0;
  z-index: -1;
  height: auto;
  border-radius: inherit;
  background: none;
}

.brv-c-bars__fill {
  border-radius: var(--radius-sm);
  background: var(--accent-tint-strong);
  transform-origin: left;
}

.brv-c-bars__row:hover .brv-c-bars__fill {
  background: color-mix(in srgb, var(--brv-series-1) 24%, transparent);
}

/* Meters: 6px, sunken, teal; amber from 80%, red at 100%. The step
   classes (`brv-c-w-*`, 5% steps) round a small share up to 5%; the SVG
   meter (views/layout.ts `meter()`) draws the TRUE width with a 2px
   minimum — its width is an attribute, so no inline style — and nothing
   at 0. */
.brv-c-meter {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.brv-c-meter--thick {
  height: 6px;
}

.brv-c-meter__track {
  fill: var(--color-surface-sunken);
}

.brv-c-meter__fill {
  fill: var(--color-accent);
  transform-origin: left;
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) backwards;
}

.brv-c-meter--warn .brv-c-meter__fill {
  fill: var(--color-warning);
}

.brv-c-meter--danger .brv-c-meter__fill {
  fill: var(--color-danger);
}

.brv-c-usage__head {
  font-size: 12.5px;
}

.brv-c-usage__bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
}

.brv-c-usage__fill {
  background: var(--color-accent);
  transform-origin: left;
}

.brv-c-usage__fill--warn {
  background: var(--color-warning);
}

.brv-c-usage__fill--danger {
  background: var(--color-danger);
}

/* ── G4 · Charts ─────────────────────────────────────────────────────── */
/* Stacked bars: link clicks series 1, QR scans series 2 (views/charts.ts
   draws the 3px 3px 1px 1px corners); dashed grid, subtle labels (the
   theme's 10 units: the SVG scales with its box, so no size is exact);
   a hovered column is outlined in the text colour. */

.brv-c-chart__bar {
  fill: var(--brv-series-1);
}

.brv-c-chart__bar--alt {
  fill: var(--brv-series-2);
}

.brv-c-chart__grid {
  stroke: var(--color-border);
  stroke-dasharray: 3 3;
}

.brv-c-chart__label {
  fill: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-c-chart__col {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.brv-c-chart__col:hover {
  outline: 2px solid var(--color-text);
  outline-offset: 1px;
}

.brv-c-legend {
  gap: 16px;
  font-size: 12.5px;
}

/* ── G4 · Alerts ─────────────────────────────────────────────────────── */
/* Soft pairs with a leading icon; the plain .alert is the neutral one.
   Hand-written alerts get their icon here; the kit's Alert brings its own. */

.alert {
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 13.5px;
}

.alert__text,
.alert__list {
  font-size: 13.5px;
}

.alert__title {
  font-weight: 600;
}

.alert--success {
  --brv-alert-ic: var(--brv-ic-check-circle);
  background: var(--color-success-soft);
  border-color: transparent;
  color: var(--color-success-soft-text);
}

.alert--info {
  --brv-alert-ic: var(--brv-ic-info);
  background: var(--color-info-soft);
  border-color: transparent;
  color: var(--color-info-soft-text);
}

.alert--warning {
  --brv-alert-ic: var(--brv-ic-warning);
  background: var(--color-warning-soft);
  border-color: transparent;
  color: var(--color-warning-soft-text);
}

.alert--danger {
  --brv-alert-ic: var(--brv-ic-alert);
  background: var(--color-danger-soft);
  border-color: transparent;
  color: var(--color-danger-soft-text);
}

.alert:is(.alert--success, .alert--info, .alert--warning, .alert--danger):not(:has(> .alert__icon))::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: var(--brv-alert-ic) center / contain no-repeat;
  mask: var(--brv-alert-ic) center / contain no-repeat;
}

.alert__icon {
  margin-top: 2px;
}

.alert__icon svg {
  width: 16px;
  height: 16px;
}

/* ── G4 · Empty states ───────────────────────────────────────────────── */

.empty {
  gap: 8px;
  padding: 40px 24px;
  border: 0;
  border-radius: 0;
  background: none;
}

.empty__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border: 0;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  box-shadow: none;
  color: var(--color-text-muted);
}

.empty__title {
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.empty__text {
  max-width: 380px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.empty__actions {
  margin-top: 4px;
}

/* The inline flavour (a panel or table that came back empty) keeps the
   kit's dashed row. */
.empty--inline {
  gap: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.empty--inline .empty__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 0;
}

.empty--inline .empty__title {
  font-family: var(--font-family-base);
  font-size: 13.5px;
  font-weight: 500;
}

.empty--inline .empty__text {
  max-width: none;
  font-size: 12.5px;
}

.data-table__empty:has(> .empty:not(.empty--inline)) {
  padding: 0;
}

/* ── G4 · Settings rows and key–value lists ──────────────────────────── */

.brv-c-settings-row {
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 12px 32px;
  align-items: start;
  padding-block: 24px;
}

/* The first of a run sits close under whatever heads it. */
.brv-c-settings-row:not(.brv-c-settings-row + .brv-c-settings-row) {
  padding-top: 4px;
}

/* Controls keep their own width in the right-hand column. */
.brv-c-settings-row > :not(.brv-c-settings-row__text) {
  justify-self: start;
}

.brv-c-settings-row + .brv-c-settings-row {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-c-settings-row__text {
  gap: 4px;
  font-size: 13.5px;
}

.brv-c-settings-row__text > .brv-c-settings-row__label {
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.brv-c-settings-row__text > .brv-c-settings-row__hint {
  line-height: 1.55;
  color: var(--color-text-muted);
}

@media screen and (max-width: 767.98px) {
  .brv-c-settings-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Form sections: a heading inside a form opens a section with the
   settings rows' rhythm — a subtle rule and 24px each side — so a field
   never touches the heading after it (the Group page's Description and
   "Permissions"). */
form > :not(input[type="hidden"]) ~ :is(h2, h3, .brv-c-panel__title) {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
}

form > :is(h2, h3, .brv-c-panel__title) + :is(p, .brv-s-hint) {
  margin-top: 4px;
}

form > :is(h2, h3, .brv-c-panel__title) ~ .brv-c-perm {
  margin-top: 12px;
}

form:has(> :is(h2, h3, .brv-c-panel__title)) > .form-actions {
  margin-top: 24px;
}

.brv-c-kv {
  grid-template-columns: 136px minmax(0, 1fr);
  gap: 10px 16px;
  margin: 0;
  font-size: 13.5px;
}

.brv-c-kv dt {
  color: var(--color-text-subtle);
}

/* ── G4 · Overlays: modal, menu, toast ───────────────────────────────── */

.modal {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.modal__header {
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.modal__title {
  font-family: var(--font-family-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.modal__close {
  color: var(--color-text-subtle);
}

.modal__body {
  padding: 18px 20px;
}

.modal__footer {
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
}

.dropdown__panel {
  padding: 4px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.dropdown__panel .menu__list {
  gap: 0;
}

.dropdown__panel .menu__link {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 13.5px;
  color: var(--color-text);
}

.dropdown__panel .menu__link:hover {
  background: var(--color-surface-alt);
}

/* A menu's caption row (the account menu's address) is not an item. */
.dropdown__panel span.menu__link,
.dropdown__panel span.menu__link:hover {
  background: none;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  cursor: default;
}

.toast {
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  padding: 10px 14px;
  border-color: transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-lg);
}

.toast__body {
  font-size: 13.5px;
}

.toast__meta,
.toast__close {
  color: color-mix(in oklab, var(--color-text-inverse) 65%, transparent);
}

/* ── G4 · Avatars ────────────────────────────────────────────────────── */
/* 28px sunken initials (44 / 64 large); the signed-in person in ink. */

.avatar {
  width: 44px;
  height: 44px;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 11px;
}

.avatar--lg,
.brv-c-avatar-row .avatar {
  width: 64px;
  height: 64px;
  font-family: var(--font-family-display);
  font-size: 21px;
}

.dropdown__trigger .avatar,
.brv-c-avatar-row .avatar {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* ── Section 1 · The shell ───────────────────────────────────────────── */
/* design/v3/S1-shell-navigation.md; the canvas's Sidebar, Topbar,
   Navigation, Attention and StaffViewingAs boards (kit.css `.b-side`,
   `.b-rail`, `.b-top`, `.b-pop`, `.b-banner`). views/layout.ts draws it.
   The sidebar is a column fixed to the window with its own scroll; the
   topbar sticks over the page. The rail (64px) is the sidebar's second
   state: the `brv-rail` cookie picks it (`--rail`) or refuses it
   (`--full`); without one the width decides — the rail from 768 to
   1279px, the full sidebar from 1280. Below 768 the phone shell takes
   over (the phone bar and the tab bar, further down).
   The design's flyout rules in console.css (`.sidebar--collapsed …`) and
   console.js's "click a group to expand" match nothing here: the shell
   has no `.sidebar`, no nested groups and no `[data-toggle]` in its menu. */

.brv-c-shell {
  --brv-side-w: 248px;
  /* The create bar (console.css) sticks under the topbar. */
  --brv-c-topbar: 56px;
  display: grid;
  grid-template-columns: var(--brv-side-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-canvas);
}

.brv-c-shell__side {
  position: sticky;
  top: 0;
  /* Above the page's own sticky strips (the create bar), so the
     switcher's menu opens over them; under the topbar. */
  z-index: calc(var(--z-sticky) - 1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100vh;
  height: 100dvh;
  min-width: 0;
  padding: 12px 12px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.brv-c-shell__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-c-shell__content {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: var(--layout-max-width);
  margin-inline: auto;
  padding: var(--layout-gutter);
}

/* The page header no longer carries the trail: the topbar does. A page
   that still passes the kit's Breadcrumb to its header keeps it hidden. */
.page-header__heading > nav:has(> .breadcrumb) {
  display: none;
}

/* ── the workspace switcher ── */

.brv-c-side__head {
  flex: none;
}

.brv-c-ws {
  position: relative;
}

.brv-c-ws__button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--brv-dur-quick);
}

.brv-c-ws__button:hover,
.brv-c-ws__button[aria-expanded="true"] {
  background: var(--color-surface-alt);
}

.brv-c-ws__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-family-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brv-c-ws__mark--brand {
  background: var(--color-brand-teal);
  color: var(--color-on-media);
}

.brv-c-ws__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.brv-c-ws__name,
.brv-c-ws__plan {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-c-ws__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.brv-c-ws__plan {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-subtle);
}

.brv-c-ws__chevron {
  display: grid;
  flex: none;
  color: var(--color-text-subtle);
}

/* ── menus (the switcher's, the account's): positioned by console-v3.js
   against their button, fixed so the sidebar's scroll cannot clip them ── */

.brv-c-menu {
  position: fixed;
  z-index: var(--z-dropdown);
  min-width: 220px;
  max-width: calc(100vw - 16px);
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.brv-c-menu:not([hidden]) {
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

.brv-c-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.brv-c-menu__item:hover {
  background: var(--color-surface-alt);
}

.brv-c-menu__item > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-c-menu__item--current,
.brv-c-menu__item--current:hover {
  min-height: 44px;
  background: none;
  cursor: default;
}

.brv-c-menu__item--current > .brv-i--check {
  margin-left: auto;
  color: var(--color-accent);
}

.brv-c-menu__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.brv-c-menu__main > span:first-child {
  font-weight: 600;
}

.brv-c-menu__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-c-menu__label {
  margin: 0;
  padding: 6px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-c-menu__caption {
  margin: 0;
  padding: 6px 10px;
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-subtle);
}

.brv-c-menu__sep {
  height: 1px;
  margin: 4px 0;
  background: var(--color-border-subtle);
}

.brv-c-ws__menu {
  width: 232px;
}

/* ── Create link / Open an organisation / Back to platform ── */

.brv-c-side__actions {
  display: flex;
  flex: none;
  gap: 6px;
  padding: 6px 0 10px;
}

.brv-c-side__actions:empty {
  display: none;
}

.brv-c-side__action {
  flex: 1 1 auto;
  justify-content: flex-start;
}

.brv-c-side__action > kbd {
  margin-left: auto;
}

/* ── the menu ── */

.brv-c-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brv-c-nav__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-c-nav__label {
  display: block;
  padding: 14px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-c-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color var(--brv-dur-quick), color var(--brv-dur-quick);
}

.brv-c-nav__item:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.brv-c-nav__icon {
  display: grid;
  flex: none;
  color: var(--color-text-subtle);
  transition: transform var(--brv-dur-quick) var(--brv-ease-spring);
}

.brv-c-nav__item:hover .brv-c-nav__icon {
  transform: scale(1.08);
}

.brv-c-nav__item--on,
.brv-c-nav__item--on:hover {
  background: var(--accent-tint);
  color: var(--color-accent-strong);
}

.brv-c-nav__item--on .brv-c-nav__icon {
  color: var(--color-accent);
}

.brv-c-nav__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Links and Domains: quiet grey numbers; a staff queue: a red count. */
.brv-c-nav__count {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-c-nav__count--alert {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

/* A page the plan lacks: the plan that has it, as an outline badge. */
.brv-c-nav__plan {
  flex: none;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 11px;
}

.brv-c-nav__lock {
  display: none;
}

/* ── the foot: this period's usage ── */

.brv-c-side__foot {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
}

.brv-c-usagecard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.brv-c-usagecard__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.brv-c-usagecard__title {
  font-size: 13px;
  font-weight: 600;
}

.brv-c-usagecard__note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-c-usagecard__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-c-usagecard__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.brv-c-usagecard__label {
  color: var(--color-text-muted);
}

.brv-c-usagecard__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-c-usagecard__link {
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: none;
}

.brv-c-usagecard__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-c-usagecard__cta {
  width: 100%;
}

.brv-c-side__ring,
.brv-c-side__expand {
  display: none;
}

.brv-c-ring__track,
.brv-c-ring__fill {
  fill: none;
  stroke-width: 3;
}

.brv-c-ring__track {
  stroke: var(--color-surface-sunken);
}

/* Round caps: the smallest share (layout.ts RING_FLOOR) reads as a dot. */
.brv-c-ring__fill {
  stroke: var(--color-accent);
  stroke-linecap: round;
}

/* ── the rail (64px): every page one 40×36 icon button, groups become
   hairlines, counts become red badges, gates a small lock; the tooltip is
   console-v3.js's (#brv-tip). Written twice: the cookie's choice from
   768px, and the width's own choice from 768 to 1279px. ── */

@media screen and (min-width: 768px) {
  .brv-c-shell--rail {
    --brv-side-w: 64px;
  }

  .brv-c-shell--rail .brv-c-shell__side {
    align-items: center;
    gap: 4px;
    padding: 12px 8px 14px;
  }

  .brv-c-shell--rail :is(
    .brv-c-ws__text,
    .brv-c-ws__chevron,
    .brv-c-side__actiontext,
    .brv-c-side__action > kbd,
    .brv-c-nav__text,
    .brv-c-nav__count:not(.brv-c-nav__count--alert),
    .brv-c-nav__plan,
    .brv-c-usagecard
  ) {
    display: none;
  }

  .brv-c-shell--rail .brv-c-ws__button {
    width: auto;
    padding: 5px;
  }

  .brv-c-shell--rail .brv-c-side__actions {
    padding: 4px 0 6px;
  }

  .brv-c-shell--rail .brv-c-side__action {
    flex: none;
    width: 40px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }

  .brv-c-shell--rail :is(.brv-c-nav, .brv-c-nav__group, .brv-c-nav__list) {
    align-items: center;
    gap: 4px;
  }

  .brv-c-shell--rail .brv-c-nav__group {
    display: flex;
    flex-direction: column;
  }

  .brv-c-shell--rail .brv-c-nav__group::before {
    content: "";
    width: 24px;
    height: 1px;
    margin: 8px 0;
    background: var(--color-border);
  }

  .brv-c-shell--rail .brv-c-nav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .brv-c-shell--rail .brv-c-nav__item {
    justify-content: center;
    width: 40px;
    height: 36px;
    padding: 0;
  }

  .brv-c-shell--rail .brv-c-nav__count--alert {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-danger);
    color: var(--color-danger-contrast);
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--color-surface);
  }

  .brv-c-shell--rail .brv-c-nav__lock {
    position: absolute;
    right: 5px;
    bottom: 4px;
    display: grid;
    color: var(--color-text-subtle);
  }

  .brv-c-shell--rail .brv-c-side__foot {
    align-items: center;
    gap: 4px;
  }

  .brv-c-shell--rail :is(.brv-c-side__ring, .brv-c-side__expand) {
    display: grid;
    place-items: center;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .brv-c-shell--rail span.brv-c-side__ring {
    cursor: default;
  }

  .brv-c-shell--rail :is(a.brv-c-side__ring, .brv-c-side__expand):hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }
}

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-c-shell:not(.brv-c-shell--full) {
    --brv-side-w: 64px;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-shell__side {
    align-items: center;
    gap: 4px;
    padding: 12px 8px 14px;
  }

  .brv-c-shell:not(.brv-c-shell--full) :is(
    .brv-c-ws__text,
    .brv-c-ws__chevron,
    .brv-c-side__actiontext,
    .brv-c-side__action > kbd,
    .brv-c-nav__text,
    .brv-c-nav__count:not(.brv-c-nav__count--alert),
    .brv-c-nav__plan,
    .brv-c-usagecard
  ) {
    display: none;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-ws__button {
    width: auto;
    padding: 5px;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-side__actions {
    padding: 4px 0 6px;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-side__action {
    flex: none;
    width: 40px;
    height: 36px;
    padding: 0;
    justify-content: center;
  }

  .brv-c-shell:not(.brv-c-shell--full) :is(
    .brv-c-nav,
    .brv-c-nav__group,
    .brv-c-nav__list
  ) {
    align-items: center;
    gap: 4px;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-nav__group {
    display: flex;
    flex-direction: column;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-nav__group::before {
    content: "";
    width: 24px;
    height: 1px;
    margin: 8px 0;
    background: var(--color-border);
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-nav__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-nav__item {
    justify-content: center;
    width: 40px;
    height: 36px;
    padding: 0;
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-nav__count--alert {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--color-danger);
    color: var(--color-danger-contrast);
    font-size: 10px;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--color-surface);
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-nav__lock {
    position: absolute;
    right: 5px;
    bottom: 4px;
    display: grid;
    color: var(--color-text-subtle);
  }

  .brv-c-shell:not(.brv-c-shell--full) .brv-c-side__foot {
    align-items: center;
    gap: 4px;
  }

  .brv-c-shell:not(.brv-c-shell--full) :is(
    .brv-c-side__ring,
    .brv-c-side__expand
  ) {
    display: grid;
    place-items: center;
    width: 40px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .brv-c-shell:not(.brv-c-shell--full) span.brv-c-side__ring {
    cursor: default;
  }

  .brv-c-shell:not(.brv-c-shell--full) :is(
    a.brv-c-side__ring,
    .brv-c-side__expand
  ):hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }
}

/* The rail's tooltip: the page, its count, plan or queue. One element,
   placed beside the hovered or focused item by console-v3.js. */
.brv-c-tip {
  position: fixed;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
  transform: translateY(-50%);
}

.brv-c-tip:not([hidden]) {
  animation: m-tip var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

.brv-c-tip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
}

.brv-c-tip__meta {
  font-weight: 400;
  opacity: 0.68;
}

/* ── the topbar ── */

.brv-c-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 24px 0 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.brv-c-top__rule {
  flex: none;
  width: 1px;
  height: 20px;
  margin-left: -4px;
  background: var(--color-border);
}

.brv-c-iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--brv-dur-quick), color var(--brv-dur-quick);
}

.brv-c-iconbtn:hover,
.brv-c-iconbtn[aria-expanded="true"] {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.brv-c-crumbs {
  flex: 1 1 auto;
  min-width: 0;
}

.brv-c-crumbs__list {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-c-crumbs__item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.brv-c-crumbs__item + .brv-c-crumbs__item::before {
  content: "/";
  content: "/" / "";
  color: var(--color-border-strong);
}

.brv-c-crumbs__link,
.brv-c-crumbs__here {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brv-c-crumbs__link {
  color: inherit;
  text-decoration: none;
}

.brv-c-crumbs__link:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-c-crumbs__here {
  font-weight: 600;
  color: var(--color-text);
}

/* The command palette's trigger (the palette itself is console-palette.*). */
.brv-c-search {
  display: flex;
  flex: 0 1 300px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 32px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-subtle);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: border-color var(--brv-dur-quick);
}

.brv-c-search:hover {
  border-color: var(--color-border-control);
}

.brv-c-search > .brv-i {
  flex: none;
}

.brv-c-search__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-c-search > kbd + kbd {
  margin-left: -4px;
}

/* The theme button shows the moon in light, the sun in dark. */
.brv-c-theme .brv-i--sun {
  display: none;
}

:root[data-theme="dark"] .brv-c-theme .brv-i--sun {
  display: block;
}

:root[data-theme="dark"] .brv-c-theme .brv-i--moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brv-c-theme .brv-i--sun {
    display: block;
  }

  :root:not([data-theme="light"]) .brv-c-theme .brv-i--moon {
    display: none;
  }
}

/* The account: avatar (ink), name, chevron. */
.brv-c-acct__button {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
  transition: background-color var(--brv-dur-quick);
}

.brv-c-acct__button:hover,
.brv-c-acct__button[aria-expanded="true"] {
  background: var(--color-surface-alt);
}

.brv-c-acct__button .avatar {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-c-acct__name {
  max-width: 160px;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-c-acct__button > .brv-i {
  color: var(--color-text-subtle);
}

.brv-c-acct__menu {
  min-width: 240px;
}

.brv-c-acct__menu form {
  margin: 0;
}

/* ── the bell: "Needs a decision" ── */

.brv-c-bell__n {
  position: absolute;
  top: 2px;
  right: 0;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-danger-contrast);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--color-surface);
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

.brv-c-pop {
  position: fixed;
  z-index: var(--z-dropdown);
  width: 380px;
  max-width: calc(100vw - 16px);
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.brv-c-pop:not([hidden]) {
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

.brv-c-pop__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-c-pop__title {
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 600;
}

.brv-c-pop__list {
  max-height: min(60vh, 420px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.brv-c-pop__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--color-text);
  text-decoration: none;
}

.brv-c-pop__list > li + li {
  border-top: 1px solid var(--color-border-subtle);
}

a.brv-c-pop__item:hover {
  background: var(--color-surface-alt);
}

.brv-c-pop__item--quiet {
  color: var(--color-text-subtle);
}

.brv-c-pop__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-c-pop__label {
  font-weight: 600;
}

.brv-c-pop__item--quiet .brv-c-pop__label {
  font-weight: 500;
}

.brv-c-pop__sub {
  overflow: hidden;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-c-pop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-c-pop__foot > a {
  color: var(--color-accent);
  text-decoration: none;
}

.brv-c-pop__foot > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* An attention icon: a 26px circle in a soft tone (kit.css `.b-attn`). */
.brv-c-attn {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
}

.brv-c-attn--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-c-attn--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-c-attn--info {
  background: var(--color-info-soft);
  color: var(--color-info-soft-text);
}

.brv-c-attn--success {
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

/* ── staff inside a workspace ── */

.brv-c-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 28px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-info-soft);
  color: var(--color-info-soft-text);
  font-size: 13.5px;
}

.brv-c-banner > .brv-i {
  flex: none;
}

.brv-c-banner__text {
  flex: 1 1 auto;
  min-width: 0;
}

.brv-c-banner__text strong {
  font-weight: 600;
}

.brv-c-banner__note {
  flex: none;
  font-size: 12px;
  opacity: 0.85;
}

.brv-c-banner__exit {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.brv-c-banner__exit:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── keyboard focus on the shell's own controls ── */

:is(
  .brv-c-iconbtn,
  .brv-c-search,
  .brv-c-ws__button,
  .brv-c-acct__button,
  .brv-c-nav__item,
  .brv-c-side__expand,
  .brv-c-side__ring,
  .brv-c-crumbs__link,
  .brv-c-banner__exit,
  .brv-c-usagecard__link
):focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 2px;
}

:is(.brv-c-menu__item, .brv-c-pop__item):focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: -2px;
}

/* ── narrower windows ── */

@media screen and (max-width: 1023.98px) {
  .brv-c-search {
    flex-basis: 220px;
  }

  .brv-c-top__help,
  .brv-c-acct__name {
    display: none;
  }

  .brv-c-banner__note {
    display: none;
  }
}

/* ── the phone shell (under 768px): console v3 §11.2 ─────────────────────
   design/v3/S11-phone-tablet.md; the canvas's PhoneBar, TabBar and
   CommandPalettePhone boards (kit.css `.b-phonebar`, `.b-tabbar`,
   `.b-sheet`). views/layout.ts draws both shells on every page and each
   width shows one: `display: none` takes the other out of the tab order
   and the accessibility tree. The switcher, the account and More are
   `<dialog class="brv-ps-sheet">`s console-v3.js opens as modals; without
   script their in-page links show them through `:target`.
   `--brv-ps-tabs-h` is the tab bar's height with the home indicator's
   inset: whatever a phone page fixes to the bottom (the "+" on Links, a
   decision bar) sits on it, and the page's own bottom padding clears it. */

.brv-ps-bar,
.brv-ps-tabs,
.brv-ps-sheet {
  display: none;
}

@media screen and (max-width: 767.98px) {
  :root:has(.brv-ps-tabs) {
    --brv-ps-tabs-h: calc(57px + env(safe-area-inset-bottom, 0px));
  }

  .brv-c-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-c-shell__side,
  .brv-c-top {
    display: none;
  }

  .brv-c-shell__content {
    padding-bottom: calc(var(--layout-gutter) + var(--brv-ps-tabs-h));
  }

  /* The page header's own title moves to the top bar; it stays for screen
     readers, as the bar's copy is hidden from them. A record's header (a
     link, a domain, an organisation) keeps its title line, which carries
     the record's badges and actions. */
  .brv-c-page .page-header__heading > .page-header__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── the top bar: tile or back, title, bell, account ── */

  .brv-ps-bar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: 4px;
    height: 56px;
    padding: 0 6px 0 10px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .brv-ps-bar__ws {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 3px;
    height: 44px;
    padding: 0 4px;
    border-radius: var(--radius-md);
    color: var(--color-text-subtle);
    text-decoration: none;
  }

  .brv-ps-bar__back {
    display: inline-flex;
    flex: 0 1 auto;
    align-items: center;
    gap: 2px;
    min-width: 0;
    max-width: 42%;
    height: 44px;
    padding-right: 6px;
    color: var(--color-accent);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
  }

  .brv-ps-bar__back > .brv-i {
    flex: none;
  }

  .brv-ps-bar__backtext {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brv-ps-bar__title {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 4px;
    overflow: hidden;
    font-family: var(--font-family-display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brv-ps-iconbtn {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
  }

  .brv-ps-iconbtn[aria-expanded="true"],
  .brv-ps-bar__ws[aria-expanded="true"] {
    background: var(--color-surface-alt);
    color: var(--color-text);
  }

  .brv-ps-bar__bell .brv-c-bell__n {
    top: 5px;
    right: 3px;
    font-size: 11px;
  }

  .brv-ps-bar__acct .avatar {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }

  /* Staff inside a workspace: the banner stays, one line, with Exit. */
  .brv-c-banner {
    gap: 8px;
    min-height: 44px;
    padding: 0 8px 0 16px;
    font-size: 13px;
  }

  .brv-c-banner__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brv-c-banner__exit {
    align-self: stretch;
    padding: 0 8px;
  }

  /* ── the tab bar: fixed, over the home indicator's inset ── */

  .brv-ps-tabs {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .brv-ps-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 0 2px;
    color: var(--color-text-subtle);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
  }

  .brv-ps-tab > .brv-i {
    flex: none;
  }

  .brv-ps-tab__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brv-ps-tab--on {
    color: var(--color-accent);
  }

  .brv-ps-tab__badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    display: grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: var(--color-danger-contrast);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 2px var(--color-surface);
  }

  /* A toast rises above the tab bar. */
  .toast-region {
    bottom: calc(var(--space-4) + var(--brv-ps-tabs-h, 0px));
  }

  /* ── sheets: the switcher, the account, More ── */

  /* `:target` is the no-script way in; with script (console-v3.js marks
     the root `brv-ps-live`) only an open dialog shows. */
  .brv-ps-sheet[open],
  :root:not(.brv-ps-live) .brv-ps-sheet:target {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    overflow: hidden;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xl);
  }

  .brv-ps-sheet--full[open],
  :root:not(.brv-ps-live) .brv-ps-sheet--full:target {
    height: calc(100vh - 56px);
    height: calc(100dvh - 56px);
  }

  .brv-ps-sheet[open] {
    animation: m-sheet var(--brv-dur-base) var(--brv-ease-out) backwards;
  }

  .brv-ps-sheet::backdrop {
    background: var(--color-overlay);
    animation: m-fade var(--brv-dur-base) ease-out backwards;
  }

  .brv-ps-sheet__handle {
    flex: none;
    width: 36px;
    height: 4px;
    margin: 8px auto 2px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
  }

  .brv-ps-sheet__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 6px 4px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .brv-ps-sheet__title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-family: var(--font-family-display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brv-ps-sheet__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    padding: 16px 16px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .brv-ps-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .brv-ps-group__label {
    margin: 0;
    padding: 0 4px;
    font-family: var(--font-family-base);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .brv-ps-caption {
    margin: -6px 0 0;
    font-size: 13.5px;
    color: var(--color-text-subtle);
    overflow-wrap: anywhere;
  }

  /* A list of rows in one hairline box (kit.css `.b-listnav`). */
  .brv-ps-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    list-style: none;
  }

  .brv-ps-list > li + li {
    border-top: 1px solid var(--color-border-subtle);
  }

  .brv-ps-list form {
    margin: 0;
  }

  .brv-ps-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .brv-ps-row:active {
    background: var(--color-surface-alt);
  }

  .brv-ps-row__icon,
  .brv-ps-row > .brv-i {
    display: grid;
    flex: none;
    color: var(--color-text-subtle);
  }

  .brv-ps-row__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brv-ps-row--on {
    background: var(--accent-tint);
    color: var(--color-accent-strong);
  }

  .brv-ps-row--on .brv-ps-row__icon {
    color: var(--color-accent);
  }

  .brv-ps-row__count {
    flex: none;
    font-size: 13px;
    color: var(--color-text-subtle);
    font-variant-numeric: tabular-nums;
  }

  .brv-ps-row__plan {
    flex: none;
  }

  /* The switcher's workspace row, above its list. */
  .brv-ps-row.brv-c-menu__item--current {
    padding: 0 4px;
    cursor: default;
  }

  .brv-ps-row.brv-c-menu__item--current > .brv-c-ws__mark {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .brv-ps-row .brv-c-menu__sub {
    font-size: 13px;
  }

  /* The sidebar's usage card, at the foot of More. */
  .brv-ps-sheet .brv-c-usagecard {
    flex: none;
  }
}

/* The account sheet's theme row names the theme it switches to. */
.brv-ps-theme__dark,
.brv-ps-theme__light {
  display: contents;
}

.brv-ps-theme__light,
:root[data-theme="dark"] .brv-ps-theme__dark {
  display: none;
}

:root[data-theme="dark"] .brv-ps-theme__light {
  display: contents;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brv-ps-theme__dark {
    display: none;
  }

  :root:not([data-theme="light"]) .brv-ps-theme__light {
    display: contents;
  }
}

:is(
  .brv-ps-bar__ws,
  .brv-ps-bar__back,
  .brv-ps-iconbtn,
  .brv-ps-tab,
  .brv-ps-row
):focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: -2px;
}

/* ── G5 · Motion ─────────────────────────────────────────────────────── */
/* One moving thing per interaction; nothing loops; staggers stop at 8
   steps (charts at 200ms). Opacity, transform, outline and stroke only —
   except m-flash, whose wash is a background (as kit.css draws it).
   Entrances fill BACKWARDS only: the from-state covers the delay, and
   once they end nothing is held, so the page is what the server rendered.
   The keyframes are kit.css's "Motion" set; m-ping draws its ring as an
   outline in the accent token (kit.css: a literal teal box-shadow). */

@keyframes m-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-fill { from { transform: scaleX(0); } }
@keyframes m-grow-y { from { transform: scaleY(0); } }
@keyframes m-draw { from { stroke-dashoffset: 1; } }
@keyframes m-pop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes m-ping {
  0% { outline: 2px solid color-mix(in srgb, var(--color-accent) 45%, transparent); outline-offset: 0; }
  100% { outline: 2px solid color-mix(in srgb, var(--color-accent) 0%, transparent); outline-offset: 10px; }
}
@keyframes m-modal { from { opacity: 0; transform: translate(-50%, 10px) scale(0.985); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes m-drawer { from { transform: translateX(24px); opacity: 0; } }
@keyframes m-toast { from { opacity: 0; transform: translateY(12px); } }
@keyframes m-flash { from { background: var(--accent-tint-strong); } }
@keyframes m-tip { from { opacity: 0; transform: translate(-4px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
@keyframes m-sheet { from { transform: translateY(32px); opacity: 0; } }
/* m-modal is written for a box centred by translateX(-50%); the console's
   modal is a native <dialog> the browser centres, so it rises the same
   way without the -50%. */
@keyframes m-dialog { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

/* Stagger: --i from each item's place among its siblings, capped at 8. */
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row) { --i: 0; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(2) { --i: 1; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(3) { --i: 2; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(4) { --i: 3; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(5) { --i: 4; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(6) { --i: 5; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(7) { --i: 6; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(8) { --i: 7; }
:is(.brv-c-fig, .brv-c-panel, .data-table__row, .brv-link-row, .brv-c-bars__row):nth-child(n + 9) { --i: 8; }

/* Stat cells, panels and list rows rise into place, 25ms apart. */
.brv-c-fig,
.brv-c-panel,
.data-table__row {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 25ms);
}

/* brevily.css staggers the recent-links list by its own steps; same rise. */
.brv-links--enter .brv-link-row:nth-child(n) {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 25ms);
}

/* Meters and bar lists fill from the left (bar rows 40ms apart). */
.brv-c-usage__fill {
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) backwards;
}

.brv-c-bars__fill {
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 40ms);
}

/* Chart columns grow from the axis, 5ms apart, the last start at 200ms. */
.brv-c-chart__col {
  --i: 0;
  animation: m-grow-y var(--brv-dur-slow) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 5ms);
}
.brv-c-chart__col:nth-of-type(2) { --i: 1; }
.brv-c-chart__col:nth-of-type(3) { --i: 2; }
.brv-c-chart__col:nth-of-type(4) { --i: 3; }
.brv-c-chart__col:nth-of-type(5) { --i: 4; }
.brv-c-chart__col:nth-of-type(6) { --i: 5; }
.brv-c-chart__col:nth-of-type(7) { --i: 6; }
.brv-c-chart__col:nth-of-type(8) { --i: 7; }
.brv-c-chart__col:nth-of-type(9) { --i: 8; }
.brv-c-chart__col:nth-of-type(10) { --i: 9; }
.brv-c-chart__col:nth-of-type(11) { --i: 10; }
.brv-c-chart__col:nth-of-type(12) { --i: 11; }
.brv-c-chart__col:nth-of-type(13) { --i: 12; }
.brv-c-chart__col:nth-of-type(14) { --i: 13; }
.brv-c-chart__col:nth-of-type(15) { --i: 14; }
.brv-c-chart__col:nth-of-type(16) { --i: 15; }
.brv-c-chart__col:nth-of-type(17) { --i: 16; }
.brv-c-chart__col:nth-of-type(18) { --i: 17; }
.brv-c-chart__col:nth-of-type(19) { --i: 18; }
.brv-c-chart__col:nth-of-type(20) { --i: 19; }
.brv-c-chart__col:nth-of-type(21) { --i: 20; }
.brv-c-chart__col:nth-of-type(22) { --i: 21; }
.brv-c-chart__col:nth-of-type(23) { --i: 22; }
.brv-c-chart__col:nth-of-type(24) { --i: 23; }
.brv-c-chart__col:nth-of-type(25) { --i: 24; }
.brv-c-chart__col:nth-of-type(26) { --i: 25; }
.brv-c-chart__col:nth-of-type(27) { --i: 26; }
.brv-c-chart__col:nth-of-type(28) { --i: 27; }
.brv-c-chart__col:nth-of-type(29) { --i: 28; }
.brv-c-chart__col:nth-of-type(30) { --i: 29; }
.brv-c-chart__col:nth-of-type(31) { --i: 30; }
.brv-c-chart__col:nth-of-type(32) { --i: 31; }
.brv-c-chart__col:nth-of-type(33) { --i: 32; }
.brv-c-chart__col:nth-of-type(34) { --i: 33; }
.brv-c-chart__col:nth-of-type(35) { --i: 34; }
.brv-c-chart__col:nth-of-type(36) { --i: 35; }
.brv-c-chart__col:nth-of-type(37) { --i: 36; }
.brv-c-chart__col:nth-of-type(38) { --i: 37; }
.brv-c-chart__col:nth-of-type(39) { --i: 38; }
.brv-c-chart__col:nth-of-type(40) { --i: 39; }
.brv-c-chart__col:nth-of-type(n + 41) { --i: 40; }

/* Modals rise over a fading scrim; menus drop 6px; the bulk bar rises. */
.modal[open] {
  animation: m-dialog var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.modal[open]::backdrop {
  animation: m-fade var(--brv-dur-base) ease-out backwards;
}

.dropdown__panel:not([hidden]),
.combobox__list:not([hidden]) {
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

.data-table__bulk:not([hidden]) {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

/* Toasts confirm quietly, 400ms after the action. */
.toast {
  animation: m-toast var(--brv-dur-base) var(--brv-ease-out) 400ms backwards;
}

/* Copy: the icon pops to a success-green check (console-app.js holds
   brevily.js's `is-copied` for 2s); a text-only copy button gains one. */
.brv-copy.is-copied .brv-copy__done {
  color: var(--color-success);
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

.btn[data-brv-copy]:not(.brv-copy).is-copied {
  color: var(--color-success);
}

.btn[data-brv-copy]:not(.brv-copy).is-copied::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--brv-ic-check) center / contain no-repeat;
  mask: var(--brv-ic-check) center / contain no-repeat;
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

/* What an action just did (a `?done=` notice) is washed teal once: the
   page's success banner, and a list's result banner inside its region.
   Which row changed is not known to the page, so the banner carries it. */
.alert--success[role="status"],
.data-table__toolbar > .alert[role="status"] {
  animation: m-flash 1600ms ease-out 300ms backwards;
}

/* A link just created (console-app.js marks it from `?done=created`)
   pings once. */
.brv-c-linkhead__link.is-new {
  border-radius: 5px;
  animation: m-ping 900ms var(--brv-ease-out) 300ms 1 backwards;
}

/* The kit's busy veil and skeletons shimmer in a loop; the veil stays,
   the shimmer goes. */
[data-busy]::before,
.skeleton::after {
  display: none;
}

/* Reduced motion: every animation and transition goes, and the final
   state simply appears. !important because the theme's own animation
   rules are more specific than a universal selector (brevily.css
   `.brv-links--enter .brv-link-row:nth-child(n)`, the kit's layered ones). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop {
    animation: none !important;
    transition: none !important;
  }
}

/* ══ Section 1 · Settings hub, page tabs, the staff plans overview ══════ */
/* (from the hub work; `.badge--outline` is defined here only) */

/*
 * Console v3, Section 1 §6/§7/§9 — the Settings hub's frame, tabs that are
 * pages, the outline plan badge and the Plans overview grid (design/v3,
 * kit.css `.b-settings`, `.b-subnav`, `.b-tabs`, `.b-badge--outline` and
 * the StaffPlans board). Tokens only,
 * unlayered and low-specificity like the rest of the v3 layer.
 */

/* ── Outline plan badge ("Pro", "Business") ──────────────────────────── */

.badge--outline {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

/* ── The Settings hub: 208px sub-navigation, 36px gap, content ───────── */

.brv-c-hub {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.brv-c-hub__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: sticky;
  top: calc(var(--brv-c-topbar, 56px) + var(--space-4));
}

.brv-c-hub__group {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brv-c-hub__label {
  padding: 14px 10px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-c-hub__group:first-child .brv-c-hub__label {
  padding-top: 2px;
}

.brv-c-hub__item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: background var(--brv-dur-quick), color var(--brv-dur-quick);
}

.brv-c-hub__item:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.brv-c-hub__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.brv-c-hub__item--on {
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-weight: 600;
}

.brv-c-hub__icon {
  display: inline-flex;
  flex: none;
  color: var(--color-text-subtle);
}

.brv-c-hub__item--on .brv-c-hub__icon {
  color: var(--color-text);
}

.brv-c-hub__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-c-hub__item .badge {
  margin-left: auto;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
}

.brv-c-hub__main {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* A page header keeps its actions on the title's row: the heading takes
   the room, and wraps its one line, before the actions drop below. */
.brv-c-page .page-header__heading {
  flex: 1 1 320px;
}

/* The page's own header, one level under "Settings": an h2 at 20px. */
.brv-c-hub__main > .page-header {
  margin-bottom: 0;
}

.brv-c-page .brv-c-hub__head .page-header__title {
  font-size: 20px;
  line-height: 1.3;
}

.brv-c-page .brv-c-hub__head .page-header__subtitle {
  font-size: 13.5px;
}

/* The plan that includes the page, beside its title (hubFrame's `badge`). */
.brv-c-hub__titlerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

/* Under 1024 (tablet, §11.1) the sub-navigation is a row of chips under
   the title that scrolls sideways (MembersTablet.dc.html); the groups'
   labels go, the order stays. */
@media screen and (max-width: 1023.98px) {
  .brv-c-hub {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .brv-c-hub__nav {
    position: static;
    flex-direction: row;
    gap: 8px;
    margin-top: -4px;
    padding-bottom: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .brv-c-hub__group {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .brv-c-hub__label {
    display: none;
  }

  .brv-c-hub__item {
    flex: none;
    gap: 7px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-weight: 500;
    white-space: nowrap;
  }

  .brv-c-hub__item:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
  }

  .brv-c-hub__item--on,
  .brv-c-hub__item--on:hover {
    border-color: var(--color-accent);
    background: var(--accent-tint);
    color: var(--color-accent-strong);
    font-weight: 600;
  }

  .brv-c-hub__item--on .brv-c-hub__icon {
    color: var(--color-accent);
  }

  .brv-c-hub__text {
    overflow: visible;
  }

  .brv-c-hub__item .badge {
    margin-left: 2px;
  }
}

/* ── Tabs that are pages (Analytics, Plans & pricing, Staff access) ─── */

.brv-c-pagetabs .tabs__tab {
  text-decoration: none;
}

.brv-c-pagetabs .tabs__tab[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

/* Analytics' range and domain toolbar sits under the tabs: the domain
   picker keeps its own width rather than the kit's full row. */
.brv-c-filters .select {
  width: auto;
  min-width: 200px;
}

/* A long cell (a group's permissions) wraps to two lines at most. */
.brv-c-cell-clamp {
  display: -webkit-box;
  min-width: 240px;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* A bar row's label that opens something (an organisation on the staff
   overview) reads as the label, and shows it is a link on hover. */
.brv-c-bars__row a {
  color: inherit;
  text-decoration: none;
}

.brv-c-bars__row a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A line of text after a list of points keeps its distance. */
.brv-s-list + .brv-s-card__text {
  margin-top: var(--space-3);
}

/* ── Plan gates: a page, or part of one, the plan does not include ──── */
/* views/hubFrame.ts `planGate()`: the phase-1 empty state inside a panel,
   the outline plan badge, one secondary action. */

.brv-c-gate .empty {
  padding: 44px 24px;
}

.brv-c-gate .empty__icon {
  background: var(--accent-tint);
  color: var(--color-accent-strong);
}

.brv-c-gate .empty__text {
  max-width: 460px;
}

.brv-c-gate__plan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-c-gate__note,
.brv-c-gate__who {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

/* ── Plans & pricing › Plans and features: the overview grid ─────────── */

.brv-c-plangrid__scroll {
  overflow-x: auto;
}

.brv-c-plangrid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.brv-c-plangrid th,
.brv-c-plangrid td {
  font-weight: inherit;
  text-align: left;
  vertical-align: middle;
}

.brv-c-plangrid thead td,
.brv-c-plangrid thead th {
  padding: 18px 16px;
  vertical-align: bottom;
}

.brv-c-plangrid__corner {
  min-width: 280px;
}

/* The filters and the rule line sit at the top, beside the plan names. */
.brv-c-plangrid thead td.brv-c-plangrid__corner {
  vertical-align: top;
}

.brv-c-plangrid__note {
  max-width: 420px;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-subtle);
}

.brv-c-plangrid__plan {
  width: 200px;
  min-width: 180px;
  border-left: 1px solid var(--color-border-subtle);
}

.brv-c-plangrid__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brv-c-plangrid__name {
  font-family: var(--font-family-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brv-c-plangrid__code {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-subtle);
}

.brv-c-plangrid__badges,
.brv-c-plangrid__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brv-c-plangrid__actions > .btn {
  flex: 1;
}

.brv-c-plangrid__price {
  font-family: var(--font-family-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.brv-c-plangrid__price small {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-c-plangrid__terms {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  margin: 0;
  font-size: 12.5px;
}

.brv-c-plangrid__terms dt {
  color: var(--color-text-subtle);
}

.brv-c-plangrid__terms dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brv-c-plangrid__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-subtle);
}

.brv-c-plangrid__sec th {
  padding: 14px 16px 6px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.brv-c-plangrid tbody tr:not(.brv-c-plangrid__sec) {
  border-top: 1px solid var(--color-border-subtle);
  transition: background var(--brv-dur-quick);
}

.brv-c-plangrid tbody tr:not(.brv-c-plangrid__sec):hover {
  background: var(--color-surface-alt);
}

.brv-c-plangrid__f {
  padding: 9px 16px;
}

.brv-c-plangrid__f > * + * {
  margin-left: 8px;
}

.brv-c-plangrid__v {
  padding: 9px 16px;
  border-left: 1px solid var(--color-border-subtle);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.brv-c-plangrid .brv-c-plangrid__v {
  text-align: center;
}

.brv-c-plangrid__none {
  padding: 16px;
  color: var(--color-text-muted);
}

.brv-c-plangrid__set {
  font-weight: 600;
  color: var(--color-text);
}

.brv-c-plangrid__def {
  color: var(--color-text-subtle);
}

.brv-c-plangrid__inf {
  font-weight: 600;
  color: var(--color-accent-strong);
}

.brv-c-plangrid__on,
.brv-c-plangrid__off,
.brv-c-plangrid__hidden {
  display: inline-flex;
  vertical-align: middle;
}

.brv-c-plangrid__on {
  color: var(--color-accent);
}

.brv-c-plangrid__off {
  color: var(--color-border-strong);
}

.brv-c-plangrid__hidden {
  color: var(--color-text-subtle);
}

.brv-c-plangrid__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-c-plangrid__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-c-plangrid__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* ══ Section 1 · Command palette (⌘K) ══════════════════════════════════ */

/* brevily console — the command palette (⌘K), console v3 §5.
   The library's Command markup (`command__*`) in a native modal <dialog>
   (console-palette.js builds it), restyled per Phase 1 from kit.css's
   `b-cmdk` numbers: 680px over the scrim, a 56px input row, scope chips,
   40px rows, a surface-alt foot. Tokens only; unlayered, so it beats the
   kit's layered `command` rules without !important. Motion: the sheet
   rises with m-dialog over an m-fade scrim, rows rise 25ms apart once on
   open; console-v3.css's reduced-motion rule removes all of it. */

.brv-pal {
  position: fixed;
  inset: 0;
  margin: min(84px, 12vh) auto auto;
  padding: 0;
  width: 680px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - min(84px, 12vh) - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xl);
  font-family: var(--font-family-base);
}

/* `display: flex` above would otherwise show a closed dialog. */
.brv-pal:not([open]) {
  display: none;
}

.brv-pal[open] {
  animation: m-dialog var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-pal::backdrop {
  background: var(--color-overlay);
  animation: m-fade var(--brv-dur-base) ease-out backwards;
}

/* ── Input row ───────────────────────────────────────────────────────── */

.brv-pal__search {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-pal__search:focus-within {
  box-shadow: none;
}

.brv-pal__lens {
  display: inline-flex;
  color: var(--color-text-subtle);
}

.brv-pal__lens svg {
  width: 20px;
  height: 20px;
}

.brv-pal__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  color: var(--color-text);
  caret-color: var(--color-accent);
}

.brv-pal__input::placeholder {
  color: var(--color-text-subtle);
}

.brv-pal__esc {
  flex: none;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brv-pal__esc:hover kbd {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

/* The phone's boxed field and Cancel (below); on wider screens the lens
   and the input sit straight in the row, and esc closes. */
.brv-pal__field {
  display: contents;
}

.brv-pal__cancel {
  display: none;
}

/* ── Scope chips ─────────────────────────────────────────────────────── */

.brv-pal__scopes {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}

.brv-pal__scope {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.brv-pal__scope:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.brv-pal__scope[aria-selected="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-pal__count {
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ── Results ─────────────────────────────────────────────────────────── */

.brv-pal__list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 6px 8px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brv-pal__group .command__group {
  padding: 10px 10px 4px;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-pal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
}

.brv-pal__item:hover {
  background: var(--color-surface-alt);
}

.brv-pal__item[data-active] {
  background: var(--accent-tint);
  color: var(--color-text);
}

.brv-pal__icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  opacity: 1;
}

.brv-pal__icon svg {
  width: 16px;
  height: 16px;
}

/* A link's destination initial; an organisation's initials in ink. */
.brv-pal__tile {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-subtle);
}

.brv-pal__tile--ink {
  border-color: var(--color-primary);
  background: var(--color-primary);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--color-primary-contrast);
}

.brv-pal__av {
  flex: none;
}

.brv-pal__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.brv-pal__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* A short link is always whole; its destination truncates instead. */
.brv-pal__title.brv-link {
  overflow: visible;
  text-overflow: clip;
}

.brv-pal__sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-pal__hl {
  padding: 0 1px;
  border-radius: 2px;
  background: var(--accent-tint-strong);
  color: inherit;
}

.brv-pal__badge {
  flex: none;
}

.brv-pal__keys,
.brv-pal__hint {
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-pal__keys {
  display: flex;
}

/* What ↵ / ⌘↵ / ⌘C do shows on the highlighted row only, in place of
   its shortcut. */
.brv-pal__hint {
  display: none;
  white-space: nowrap;
}

.brv-pal__hint kbd:not(:first-child) {
  margin-left: 6px;
}

.brv-pal__item[data-active] .brv-pal__hint {
  display: flex;
}

.brv-pal__item[data-active] .brv-pal__hint ~ .brv-pal__keys {
  display: none;
}

.brv-pal__empty {
  padding: 28px 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* ── Foot ────────────────────────────────────────────────────────────── */

.brv-pal__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-pal__tip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.brv-pal__note {
  margin-left: auto;
  text-align: right;
}

/* ── Motion ──────────────────────────────────────────────────────────── */

/* Rows rise into place once, when the palette opens (not per keystroke). */
.brv-pal__list--enter .brv-pal__item {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 25ms);
}

.brv-pal__item[data-i="1"] { --i: 1; }
.brv-pal__item[data-i="2"] { --i: 2; }
.brv-pal__item[data-i="3"] { --i: 3; }
.brv-pal__item[data-i="4"] { --i: 4; }
.brv-pal__item[data-i="5"] { --i: 5; }
.brv-pal__item[data-i="6"] { --i: 6; }
.brv-pal__item[data-i="7"] { --i: 7; }
.brv-pal__item[data-i="8"] { --i: 8; }

/* ⌘C on a link row: the row washes teal once. */
.brv-pal__item.is-copied {
  animation: m-flash 1600ms ease-out;
}

/* ── Phone (below 768px): the Search tab — the whole screen, a boxed
   input with Cancel, scope chips that scroll, rows of 52px
   (CommandPalettePhone.dc.html) ──────────────────────────────────────── */

@media (max-width: 767.98px) {
  .brv-pal {
    margin: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: 0;
    border-radius: 0;
  }

  .brv-pal__search {
    gap: 6px;
    height: 64px;
    padding: 0 6px 0 16px;
  }

  .brv-pal__field {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 3px var(--accent-tint-strong);
  }

  .brv-pal__esc {
    display: none;
  }

  .brv-pal__cancel {
    display: inline-flex;
    flex: none;
    align-items: center;
    height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
  }

  .brv-pal__cancel:focus-visible {
    outline: var(--ring-width) solid var(--ring-color);
    outline-offset: -2px;
  }

  .brv-pal__scopes {
    gap: 8px;
    padding: 12px 16px 10px;
  }

  /* 38px chips, each a 44px target (the extra 3px above and below sit in
     the row's own padding). */
  .brv-pal__scope {
    position: relative;
    height: 38px;
    padding: 0 16px;
    font-size: 14px;
  }

  .brv-pal__scope::before {
    content: "";
    position: absolute;
    inset: -3px 0;
  }

  .brv-pal__list {
    padding: 0 8px 16px;
  }

  .brv-pal__group .command__group {
    padding: 16px 8px 6px;
  }

  .brv-pal__item {
    min-height: 52px;
    padding: 6px 8px;
    font-size: 15px;
  }

  .brv-pal__icon,
  .brv-pal__tile {
    width: 32px;
    height: 32px;
  }

  .brv-pal__main {
    font-size: 15px;
  }

  .brv-pal__sub {
    font-size: 13px;
  }

  /* No keys on a phone: the rows' shortcuts and what ↵ does go. */
  .brv-pal__tip,
  .brv-pal__keys,
  .brv-pal__item[data-active] .brv-pal__hint {
    display: none;
  }

  .brv-pal__foot {
    padding: 10px 16px;
    border-top: 0;
    background: transparent;
  }

  .brv-pal__note {
    margin-left: 0;
    text-align: left;
  }
}

/* ══ Section 2 · Overview (and the Free plan's) ══════════════════════ */

/*
 * Console v3, Section 2 §A/§G — the Overview (Overview.dc.html,
 * FreeOverview.dc.html): the range with its locked step, the stat strip's
 * sparklines and meters, the content + 360px rail grids, "Needs
 * attention", the recent links table, country codes on the bar list and
 * the Free plan panel. Tokens only,
 * unlayered and low-specificity like the rest of the v3 layer; the
 * motion is phase 1's keyframes, and the reduced-motion rule there
 * removes all of it.
 */

/* ── The header's range: a range the plan does not keep is locked ───── */

.brv-c-ov-range {
  display: inline-flex;
  margin: 0;
}

.brv-c-ov-range__locked {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-subtle);
}

.segmented__input:disabled + .segmented__label {
  cursor: not-allowed;
}

.segmented__input:disabled + .segmented__label:hover {
  color: var(--color-text-muted);
}

.brv-c-ov-range__plan {
  height: 18px;
  margin-left: 2px;
  padding-inline: 6px;
  font-size: 11px;
}

/* ── The stat strip: value and change on one line, a sparkline or a
      meter at the foot of each cell ──────────────────────────────────── */

@media screen and (min-width: 1280px) {
  .brv-c-ov-stats--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.brv-c-ov-stat__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.brv-c-ov-stat__row > .brv-c-fig__d {
  margin-left: 0;
}

.brv-c-ov-stat > .brv-c-spark,
.brv-c-ov-stat__meter {
  margin-top: auto;
}

.brv-c-ov-stat__meter {
  display: block;
  padding-top: 12px;
}

/* The top link, whole: it may wrap, never truncate. */
.brv-c-ov-stat__link {
  font-size: 12.5px;
}

/* A short link that must wrap breaks after its domain's slash only; the
   back-half moves down whole (and wraps inside only when it alone is
   wider than the column). */
:is(.brv-c-ov-stat__link, .brv-c-ov-link__short) {
  white-space: normal;
}

.brv-c-ov-sl__d {
  white-space: nowrap;
}

.brv-c-ov-sl__s {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Sparklines (views/charts.ts `sparkline`): series 1 at 1.75 over an
   accent-tint area, the line drawn once (m-draw, pathLength 1). */
.brv-c-spark {
  display: block;
  width: 100%;
  height: 30px;
  overflow: visible;
}

.brv-c-spark__area {
  fill: var(--accent-tint);
  stroke: none;
}

.brv-c-spark__line {
  fill: none;
  stroke: var(--brv-series-1);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  animation: m-draw 900ms var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 25ms + 120ms);
}

/* The counted-clicks meter's 80% mark: the page warns from there. */
.brv-c-ov-cap {
  position: relative;
  display: block;
}

.brv-c-ov-cap__tick {
  position: absolute;
  top: -4px;
  left: 80%;
  width: 2px;
  height: 12px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--color-warning);
}

.brv-c-ov-cap--thick .brv-c-ov-cap__tick {
  top: -3px;
}

/* ── Content, then a 360px rail ──────────────────────────────────────── */

.brv-c-ov-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.brv-c-ov-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* The chart row: the chart panel stretches to its rail (Needs attention,
   the Free plan panel) and its chart grows into the height; a rail
   shorter than the chart stretches its last panel instead. */
.brv-c-ov-grid--chart {
  align-items: stretch;
}

.brv-c-ov-grid--chart > .brv-c-panel {
  display: flex;
  flex-direction: column;
}

.brv-c-ov-grid--chart > .brv-c-panel > .brv-c-panel__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.brv-c-ov-grid--chart > .brv-c-ov-rail > .brv-c-panel:last-child {
  flex: 1 1 auto;
}

/* views/charts.ts `fillBarChart`: the plot is placed in its box, the
   scale in the 36px on its left and the day labels in the 24px under it;
   its coordinates are shares, so it stretches and its labels do not. */
.brv-c-chart-fill {
  position: relative;
  flex: 1 1 auto;
  min-height: 190px;
}

.brv-c-chart-fill__plot {
  position: absolute;
  top: 10px;
  left: 36px;
  width: calc(100% - 36px);
  height: calc(100% - 34px);
  overflow: visible;
}

.brv-c-chart-fill .brv-c-chart__label {
  font-size: 11px;
}

/* A phone keeps every other day label (the scale's three texts come
   first, so the day labels start at the fourth). */
@media screen and (max-width: 767.98px) {
  .brv-c-chart-fill__plot > text[text-anchor="middle"]:nth-of-type(odd) {
    display: none;
  }
}

/* The recent links need the width: below 1280 the table takes the row and
   its two bar lists sit side by side under it. */
@media screen and (max-width: 1279.98px) {
  .brv-c-ov-grid--table {
    grid-template-columns: minmax(0, 1fr);
  }
  .brv-c-ov-grid--table > .brv-c-ov-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media screen and (max-width: 1023.98px) {
  .brv-c-ov-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 767.98px) {
  .brv-c-ov-grid--table > .brv-c-ov-rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The chart's legend sits in its panel's head. */
.brv-c-panel__head > .brv-c-legend {
  flex: none;
  margin: 0;
}

/* ── Needs attention ─────────────────────────────────────────────────── */

.brv-c-ov-attn {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-c-ov-attn__item {
  --i: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 25ms + 100ms);
}

.brv-c-ov-attn__item:first-child {
  border-top: 0;
}

.brv-c-ov-attn__item:nth-child(2) { --i: 1; }
.brv-c-ov-attn__item:nth-child(3) { --i: 2; }
.brv-c-ov-attn__item:nth-child(n + 4) { --i: 3; }

.brv-c-ov-attn__item:hover {
  background: var(--color-surface-alt);
}

.brv-c-ov-attn__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The short link on one line, ellipsed; its title holds it whole. */
.brv-c-ov-attn__link {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.brv-c-ov-attn__what {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-c-ov-attn__what > a {
  color: var(--color-accent);
  text-decoration: none;
}

.brv-c-ov-attn__what > a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-c-ov-attn__item > .btn {
  flex: none;
  justify-content: center;
  width: 92px;
}

.brv-c-ov-attn__empty > .empty {
  padding: 28px 20px;
}

/* ── Recent links ────────────────────────────────────────────────────── */

.brv-c-ov-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* The favicon tile: the destination host's first letter. */
.brv-c-ov-fav {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-subtle);
}

.brv-c-ov-link__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* The short link whole, its domain part dimmer; the destination truncates. */
.brv-c-ov-link__short .brv-c-ov-sl__d {
  opacity: 0.72;
}

.brv-c-ov-link__dest {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-c-ov-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-c-ov-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Fixed columns: the link takes what the status, clicks, date and actions
   leave, so its destination truncates instead of pushing the table past
   its panel (where the sticky actions cell would cover the date). The
   date never wraps or clips ("24 Sep"); the actions fit their three
   buttons whatever the font; a second status badge ("Password") goes
   under the first. The whole holds in the 577px the table gets beside the
   rail at 1280 (the full sidebar's narrowest). */
.brv-c-ov-recent .data-table__table {
  min-width: 572px;
  table-layout: fixed;
}

.brv-c-ov-recent th:nth-child(2) {
  width: 118px;
}

.brv-c-ov-recent th:nth-child(3) {
  width: 70px;
}

.brv-c-ov-recent th:nth-child(4) {
  width: 80px;
}

.brv-c-ov-recent td:nth-child(4) {
  white-space: nowrap;
}

.brv-c-ov-recent th.data-table__actions {
  width: 120px;
}

.brv-c-ov-recent td:first-child {
  white-space: normal;
}

.brv-c-ov-recent td.data-table__actions {
  white-space: nowrap;
}

/* ── Top countries: the two-letter code before the name ──────────────── */

.brv-c-ov-cc {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 14px;
  margin-right: 8px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-muted);
  vertical-align: 1px;
}

/* ── The Free plan panel: usage, limits, one way on ──────────────────── */

.brv-c-ov-plan__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brv-c-ov-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-c-ov-usage__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-c-ov-usage__n {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.brv-c-ov-usage__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

/* Full is a fact, not an error: amber, not red. */
.brv-c-ov-usage--full .brv-c-ov-usage__n,
.brv-c-ov-usage--full .brv-c-ov-usage__note {
  color: var(--color-warning);
}

.brv-c-ov-usage--full .brv-c-meter__fill {
  fill: var(--color-warning);
}

.brv-c-ov-plan__limits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
}

.brv-c-ov-plan__limits > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.brv-c-ov-plan__limits dt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
}

.brv-c-ov-plan__limits dt > .brv-i {
  color: var(--color-text-subtle);
}

.brv-c-ov-plan__limits dd {
  margin: 0;
  text-align: right;
}

.brv-c-ov-plan__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-c-ov-plan__foot > span {
  flex: 1 1 auto;
  text-align: left;
}

.brv-c-ov-plan__foot > .btn {
  flex: none;
}

/* ══ Section 2 · The Links list and after a Shorten ═══════════════════ */

/* brevily console — console v3, Section 2 §B/§D (the Links list, after
   Shorten) and the Section 1 follow-ups F1/F2 (list toolbars). To be
   folded into console-v3.css; the same rules: tokens only, unlayered,
   low specificity, motion from the phase-1 keyframes (reduced motion is
   console-v3.css's universal rule). Reference: kit.css `.b-toolbar`,
   `.b-seg__n`, `.b-chip`, `.b-bulkbar`, `.b-favicon`, `.b-sl__d`,
   `.b-rowacts` and the Links / LinkCreated boards. */

/* ── F2 · A list toolbar is one row ──────────────────────────────────── */
/* At ≥ 1280px every list's filters sit on one 34px line: the search
   gives way first (never below 220px), selects are as wide as what they
   say, the segmented control keeps its size and there is no Filter
   button (the bar submits itself on a change). Narrower, the row wraps
   whole controls, each still 34px. */

.data-table__toolbar {
  gap: 8px;
  padding: 10px 12px;
}

/* The filter form lays its controls out in the toolbar's own row, so a
   staff list's organisation picker (outside the form) and the filters
   wrap as one line of controls, never a picker floating between two. */
.data-table__toolbar > .brv-c-toolbar {
  display: contents;
}

.data-table__toolbar .brv-c-toolbar__search {
  flex: 1 1 220px;
  min-width: 220px;
  max-width: 340px;
}

.data-table__toolbar .brv-c-toolbar__search .input-icon,
.data-table__toolbar .brv-c-toolbar__search .input {
  width: 100%;
}

.data-table__toolbar .brv-c-toolbar__search .input,
.data-table__toolbar .brv-c-toolbar__filter > .input,
.data-table__toolbar .brv-c-toolbar__filter .form-field .input {
  height: 34px;
}

.data-table__toolbar .brv-c-toolbar__filter {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

.data-table__toolbar .brv-c-toolbar__grow {
  flex: 1 1 0;
  min-width: 0;
}

/* A filter select: 34px, sized to its words (a fixed width where the
   browser cannot size a field to its content). */
.data-table__toolbar .brv-c-toolbar__filter .select {
  width: auto;
}

.data-table__toolbar .brv-c-toolbar__filter .combobox {
  flex: none;
  min-width: 0;
  max-width: none;
}

.data-table__toolbar :is(.brv-c-toolbar__filter, .brv-c-toolbar__org) .combobox__field {
  height: 34px;
  min-height: 34px;
  padding-block: 0;
}

.data-table__toolbar .brv-c-toolbar__filter .combobox__input {
  flex: 0 0 auto;
  width: 8.5rem;
  min-width: 0;
  max-width: 14rem;
  field-sizing: content;
}

@supports (field-sizing: content) {
  .data-table__toolbar .brv-c-toolbar__filter .combobox__input {
    width: auto;
    min-width: 4ch;
  }
}

/* The staff organisation picker: as tall as the controls beside it. */
.data-table__toolbar .brv-c-toolbar__org {
  flex: 0 1 260px;
  min-width: 200px;
}

.data-table__toolbar .brv-c-toolbar__org .combobox {
  max-width: none;
}

/* ── Segmented counts ────────────────────────────────────────────────── */

.segmented__n {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.segmented__n--alarm {
  font-weight: 600;
  color: var(--color-danger);
}

/* ── §B · The shorten bar ────────────────────────────────────────────── */
/* A hairline box under the page header: the URL (42px), the domain, the
   Options button and the one accent, Shorten; the hint line beneath. */

.brv-c-shorten {
  display: grid;
  gap: 8px;
}

.brv-c-shorten__form {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-c-shorten__url {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.brv-c-shorten__url .input {
  width: 100%;
  height: 42px;
  padding-inline-end: 40px;
  font-size: 14.5px;
}

.brv-c-shorten__enter {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.brv-c-shorten__domain {
  flex: 0 0 200px;
  width: 200px;
}

.brv-c-shorten__domain .combobox,
.brv-c-shorten__domain .combobox__input {
  width: 100%;
  max-width: none;
}

.brv-c-shorten__domain .combobox__field {
  height: 42px;
  min-height: 42px;
}

.brv-c-shorten__domain .combobox__input,
.brv-c-shorten__one {
  font-family: var(--font-family-mono);
  font-size: 13px;
}

.brv-c-shorten__one {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.brv-c-shorten__form > .btn {
  flex: none;
}

.brv-c-shorten__form > .btn .brv-i--arrow-right {
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-c-shorten__form > .btn:hover .brv-i--arrow-right {
  transform: translateX(2px);
}

.brv-c-shorten__hint {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding-inline: 2px;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-c-shorten__hint > span + span::before {
  content: "·";
  margin-inline-end: 14px;
  color: var(--color-border-strong);
}

@media (max-width: 767.98px) {
  .brv-c-shorten__form {
    flex-wrap: wrap;
  }
  .brv-c-shorten__url {
    flex-basis: 100%;
  }
  .brv-c-shorten__domain {
    flex: 1 1 auto;
    width: auto;
  }
}

/* ── §B · Rows ───────────────────────────────────────────────────────── */

.brv-c-linkcell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 460px;
}

.brv-c-linkcell__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brv-c-linkcell__text > .brv-sl {
  text-decoration: none;
}

.brv-c-linkcell__text > .brv-sl:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-c-linkcell__dest {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The domain part of a short link, dimmer than its back-half. */
.brv-sl__d {
  opacity: 0.72;
}

/* A destination's first letter in a tile: no favicon is fetched. */
.brv-c-favicon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
  font-family: var(--font-family-display);
  font-size: 12px;
  font-weight: 700;
}

.brv-c-favicon--flagged {
  color: var(--color-danger);
}

.brv-c-state {
  display: grid;
  justify-items: start;
  gap: 3px;
}

.brv-c-state__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-c-state__why,
.brv-c-made__by {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-c-mini {
  gap: 4px;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}

.brv-c-tags .brv-c-tags__more::before {
  content: none;
}

/* A row's tags: one line, as many as the row's budget shows (Links.views.ts
   `tagsShown`), then "+N"; a chip the column cannot hold ends in an
   ellipsis, never a second line. */
.brv-c-tags--line {
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}

.brv-c-tags--line > .chip {
  flex: 0 1 auto;
  min-width: 0;
}

.brv-c-tags--line > .chip::before,
.brv-c-tags--line > .brv-c-tags__more {
  flex: none;
}

.brv-c-tags__t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brv-c-clicks {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-c-made {
  display: grid;
  gap: 1px;
  white-space: nowrap;
}

/* Copy and QR before the kebab, as quiet as it until the row is hovered
   or focused. The copy icon pops to the green check (console-v3.css). */
.brv-c-rowquick {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
  opacity: 0.55;
  transition: opacity var(--brv-dur-quick);
}

.data-table__table tbody tr:is(:hover, :focus-within) .brv-c-rowquick {
  opacity: 1;
}

@media (hover: none) {
  .brv-c-rowquick {
    opacity: 1;
  }
}

td.data-table__actions {
  white-space: nowrap;
}

.brv-c-rowquick .btn.is-copied > .brv-i {
  display: none;
}

/* The row a create just made: a "New" badge, and a teal wash once. */
.brv-c-newbadge {
  flex: none;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}

.data-table__row:has(.brv-c-newbadge) > td {
  animation: m-flash 1600ms ease-out 300ms backwards;
}

/* ── §B · The bulk bar ───────────────────────────────────────────────── */
/* "2 selected · Select all 30 |" then the operations; the note and Clear
   to the right. The kit draws its count and separator first; `order`
   puts "Select all" between them. */

.data-table__bulk > * {
  order: 3;
}

.data-table__bulk > .data-table__bulk-count {
  order: 1;
}

.data-table__bulk > .brv-c-bulk__all {
  order: 2;
}

.data-table__bulk > .data-table__bulk-sep {
  order: 2;
}

.brv-c-bulk__all {
  display: inline-flex;
  align-items: center;
}

.brv-c-bulk__allbtn {
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.brv-c-bulk__allbtn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-c-bulk__allbtn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.data-table__bulk .btn .brv-i {
  flex: none;
}

.brv-c-bulk__tags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-c-bulk__tags[hidden] {
  display: none;
}

.brv-c-bulk__tags .input {
  width: 200px;
  height: 26px;
  font-size: 12.5px;
}

.data-table__bulk .brv-c-bulk__tags .btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast, var(--color-surface));
}

.brv-c-bulk__note {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.data-table__bulk .brv-c-bulk__clear {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}

/* ── §D · "Your link is ready" ───────────────────────────────────────── */

.brv-c-created {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-c-created > .brv-c-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.brv-c-created__title,
.brv-c-created__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brv-c-created__head {
  gap: 12px;
}

.brv-c-created__page {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
}

.brv-c-created__page:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-c-created__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: center;
  padding: 18px 20px;
}

.brv-c-created__main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

/* The short link, whole and large, pings once. */
.brv-c-created__link {
  justify-self: start;
  margin-inline-start: -10px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  animation: m-ping 900ms var(--brv-ease-out) 300ms 1 backwards;
}

.brv-c-created__dest {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-c-created__dest > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-c-created__dest > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-c-created__badges,
.brv-c-created__actions,
.brv-c-created__downloads {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-c-created__actions {
  margin-top: 4px;
}

.brv-c-created__actions .btn,
.brv-c-created__downloads .btn,
.brv-c-created__head .btn {
  gap: 6px;
}

/* Copied: the copy icon gives way to the green check (console-v3.css). */
.brv-c-created__copy.is-copied > .brv-i {
  display: none;
}

.brv-c-created__qr {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brv-c-created__code {
  flex: none;
  width: 124px;
  height: 124px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
}

.brv-c-created__code svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brv-c-created__print {
  display: grid;
  gap: 6px;
  width: 150px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-c-created__print > strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-c-created__print .brv-c-created__downloads {
  margin-top: 2px;
  gap: 6px;
}

.brv-c-created__nexts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-c-created__next {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--brv-dur-quick), background var(--brv-dur-quick);
}

.brv-c-created__next:hover {
  border-color: var(--color-border-control);
  background: var(--color-surface-alt);
}

.brv-c-created__next > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-c-created__nexttext {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-c-created__nexttext > strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-c-attn--accent {
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

@media (max-width: 1023.98px) {
  .brv-c-created__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .brv-c-created__nexts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A toast that confirms (the copy after a create): a green check first. */
.toast--done::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: var(--color-success);
  -webkit-mask: var(--brv-ic-check-circle) center / contain no-repeat;
  mask: var(--brv-ic-check-circle) center / contain no-repeat;
}

/* ══ Section 2 · Create a link, a flagged link, bulk import ═══════════ */

/* brevily console — console v3 Section 2: §C the create modal
   (LinkCreate.views.ts), §E a flagged link's panel (LinkFlagged.views.ts),
   §F the import steps (LinkImport.views.ts). Numbers from design/v3
   kit.css (b-modal, b-option, b-radio, b-tag, b-timeline, b-steps, b-code);
   colours from tokens only; the kit's own classes (modal, input-group,
   timeline, wizard__steps, segmented) restyled where they appear. */

/* A short link's domain part, dimmer than its back-half. */

/* ── §C · Create a link: the wide modal ─────────────────────────────── */

.modal.brv-lc {
  width: min(1040px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

/* Head and foot stay; the body between them scrolls. */
.modal.brv-lc[open] {
  display: flex;
  flex-direction: column;
}

.brv-lc > .modal__header {
  flex: none;
}

.brv-lc__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.brv-lc__lede {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-lc__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.brv-lc__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brv-lc__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-lc__main > .alert {
  margin-bottom: 16px;
}

.brv-lc__always {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 20px;
}

.brv-lc-opt {
  font-weight: 400;
  color: var(--color-text-subtle);
}

.brv-lc-mono {
  font-family: var(--font-family-mono);
  font-size: 0.93em;
}

/* The domain: the picker (the shorten bar's), or why none is offered. */
.brv-lc-domains {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brv-lc-domains > legend {
  float: left;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
}

/* The back-half and the tags, side by side. */
.brv-lc-grid-slug {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.brv-lc-slug__group {
  min-width: 0;
}

/* The group is the frame, so a refused back-half reddens the group. */
.brv-lc-slug__group:has(.input--invalid),
.brv-lc-slug__group:has(.brv-lc-slug__status.is-bad) {
  border-color: var(--color-danger);
}

/* An error line stands in for the hint while it shows. */
.brv-lc-slug:has(> .form-field__error:not([hidden])) > .form-field__help {
  display: none;
}

.brv-lc-slug__prefix {
  flex: none;
  max-width: 55%;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-lc-slug__input {
  min-width: 0;
  font-family: var(--font-family-mono);
  font-size: 13px;
}

.brv-lc-slug__input:disabled {
  background: var(--color-surface-alt);
}

/* The check's verdict inside the field: a word and its mark. */
.brv-lc-slug__status {
  display: none;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.brv-lc-slug__status::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: var(--brv-ic-check) center / contain no-repeat;
  mask: var(--brv-ic-check) center / contain no-repeat;
}

.brv-lc-slug__status.is-ok,
.brv-lc-slug__status.is-bad,
.brv-lc-slug__status.is-busy {
  display: inline-flex;
}

.brv-lc-slug__status.is-ok {
  color: var(--color-success);
}

.brv-lc-slug__status.is-ok::before {
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

.brv-lc-slug__status.is-bad {
  color: var(--color-danger);
}

.brv-lc-slug__status.is-bad::before {
  -webkit-mask-image: var(--brv-ic-alert);
  mask-image: var(--brv-ic-alert);
}

.brv-lc-slug__status.is-busy {
  font-weight: 500;
  color: var(--color-text-subtle);
}

.brv-lc-slug__status.is-busy::before {
  display: none;
}

.brv-lc-check {
  margin: 0;
  font-size: 12.5px;
}

.brv-lc-check:empty {
  display: none;
}

.brv-lc-check.is-bad {
  color: var(--color-danger);
}

/* A verdict replaces the hint until the back-half is free again. */
.brv-lc-check.is-bad:not(:empty) ~ .form-field__help {
  display: none;
}

/* Tags as chips (kit.css b-tag) in a field's frame. */
.brv-lc-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: var(--control-height-md, 34px);
  padding: 3px 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: text;
  transition: border-color var(--brv-dur-quick), box-shadow var(--brv-dur-quick);
}

.brv-lc-tags:hover {
  border-color: var(--color-border-control);
}

.brv-lc-tags:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

.brv-lc-tags.is-invalid {
  border-color: var(--color-danger);
}

.brv-lc-tags__chips {
  display: contents;
}

.brv-lc-tags .chip {
  padding-right: 2px;
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

.brv-lc-tags__x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 1px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.brv-lc-tags__x::before {
  content: "";
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center / contain no-repeat;
}

.brv-lc-tags__x:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.brv-lc-tags__x:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.brv-lc-tags__entry {
  flex: 1 1 80px;
  min-width: 80px;
  height: 26px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
}

.brv-lc-tags__entry::placeholder {
  color: var(--color-text-subtle);
}

/* Case protection and the expired-page note: the neutral alert. */
.brv-lc-case,
.brv-lc-note {
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
}

.brv-lc-case > .brv-i,
.brv-lc-note > .brv-i {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-lc-case .alert__text,
.brv-lc-note .alert__text {
  font-size: 13px;
  line-height: 1.5;
}

/* Collapsible sections: a native <details>, the summary a one-line
   account of what it holds. */
.brv-lc-sec {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-lc-sec__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  color: var(--color-text-subtle);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius-sm);
}

.brv-lc-sec__head::-webkit-details-marker {
  display: none;
}

.brv-lc-sec__head:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-lc-sec__head > .brv-i {
  flex: none;
}

.brv-lc-sec__title {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-lc-sec__sum {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-lc-sec__head > .brv-i--chevron-down {
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-lc-sec[open] > .brv-lc-sec__head > .brv-i--chevron-down {
  transform: rotate(180deg);
}

.brv-lc-sec__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 20px;
}

.brv-lc-sec[open] > .brv-lc-sec__body {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-lc-grid3,
.brv-lc-grid2 {
  display: grid;
  gap: 12px;
  align-items: start;
}

.brv-lc-grid3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Two instants and a count: the instants need the room. */
.brv-lc-grid3--dates {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr);
}

/* The generator choice: one quiet row under the back-half. */
.brv-lc-generate .form-field {
  display: grid;
  grid-template-columns: max-content minmax(0, 280px);
  justify-content: start;
  align-items: center;
  gap: 4px 12px;
}

.brv-lc-generate .form-field__label {
  margin: 0;
  font-weight: 500;
  color: var(--color-text-muted);
}

.brv-lc-generate .form-field__error {
  grid-column: 1 / -1;
}

.brv-lc-grid2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brv-lc-grid3 .form-field__label,
.brv-lc-grid2 .form-field__label {
  white-space: nowrap;
}

.brv-lc-temporary .switch__label {
  font-size: 13.5px;
  font-weight: 600;
}

.brv-lc-temporary .switch__hint {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-lc-gated {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* Where visitors land (kit.css b-code): the destination, then what the
   UTM tags add, in the accent. */
.brv-lc-landing {
  display: grid;
  gap: 6px;
}

.brv-lc-landing__url {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
  word-break: break-all;
}

.brv-lc-landing__added {
  color: var(--color-accent-strong);
}

.brv-lc__routing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-lc__routing > .brv-i {
  flex: none;
}

/* The preview column. */
.brv-lc-preview {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-lc-over {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-lc-preview__link {
  display: grid;
  gap: 6px;
}

.brv-lc-preview__sl {
  font-size: 15px;
  white-space: normal;
  word-break: break-all;
}

.brv-lc-preview__sl .is-generated {
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-subtle);
}

.brv-lc-preview__state,
.brv-lc-preview__label {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-lc-preview__block {
  display: grid;
  gap: 4px;
  min-width: 0;
}

/* Where it goes: at most three lines, then an ellipsis (its title holds
   it whole). It wraps at the URL's seams (a <wbr> after /, = and -,
   before ?, &, # and .: LinkCreate.views.ts `urlBreaks`); only a part
   longer than the line breaks inside. */
.brv-lc-preview__dest {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.brv-lc-preview__dest.is-empty {
  font-family: var(--font-family-base);
  color: var(--color-text-subtle);
}

.brv-lc-preview__qr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brv-lc-preview__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-subtle);
}

.brv-lc-preview__qrtext {
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-lc-preview__strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

/* The card a chat app draws from the link preview. */
.brv-lc-social {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-lc-social__image {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  aspect-ratio: 1.91 / 1;
  max-height: 124px;
  width: 100%;
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-subtle);
}

.brv-lc-social__image > span {
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-lc-social__text {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
}

.brv-lc-social__host {
  font-size: 11.5px;
  color: var(--color-text-subtle);
}

.brv-lc-social__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-lc-social__desc {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.brv-lc-social.is-default .brv-lc-social__title,
.brv-lc-social.is-default .brv-lc-social__desc {
  font-weight: 500;
  color: var(--color-text-subtle);
}

/* The foot: what this link uses, then Cancel and Create. */
.brv-lc__foot {
  flex: none;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.brv-lc__cost {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-lc__cost > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-lc__cost.is-warn {
  color: var(--color-warning-soft-text);
}

.brv-lc__actions {
  display: flex;
  flex: none;
  gap: 8px;
}

@media (max-width: 1023.98px) {
  .brv-lc__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-lc-preview {
    position: static;
  }

  .brv-lc-grid-slug,
  .brv-lc-grid3,
  .brv-lc-grid2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-lc__foot {
    flex-wrap: wrap;
  }
}

/* ── §E · A flagged link ─────────────────────────────────────────────── */

.brv-lf {
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  border-radius: var(--radius-md);
  background: var(--color-surface);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-lf__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-danger) 20%, transparent);
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
  background: var(--color-danger-soft);
}

.brv-lf__heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.brv-lf__icon {
  width: 32px;
  height: 32px;
  background: var(--color-surface);
}

.brv-lf__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-danger-soft-text);
}

.brv-lf__sub {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-danger-soft-text);
}

.brv-lf__standing {
  flex: none;
  background: var(--color-surface);
  color: var(--color-danger-soft-text);
}

.brv-lf__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.brv-lf__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 18px 20px;
}

.brv-lf__col + .brv-lf__col {
  border-left: 1px solid var(--color-border-subtle);
}

.brv-lf__over,
.brv-li-over {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-lf-point {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.brv-lf-point__text,
.brv-lf-do__text {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
}

.brv-lf-point__title,
.brv-lf-do__title {
  font-weight: 600;
  color: var(--color-text);
}

.brv-lf-point__body {
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The review timeline: the kit's timeline, the kit.css b-timeline tones. */
.brv-lf-timeline .timeline__marker {
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-lf-step--danger .timeline__marker {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-lf-step--accent .timeline__marker {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-lf-step--pending .timeline__marker {
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface);
}

.brv-lf-timeline .timeline__line {
  width: 1px;
}

.brv-lf-timeline .timeline__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-lf-step--pending .timeline__title {
  color: var(--color-text);
}

.brv-lf-timeline .timeline__meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-lf-decide {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-lf-decide__over {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-lf-decide__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.brv-lf-decide__row > .brv-i {
  flex: none;
  margin-top: 3px;
  color: var(--color-success);
}

.brv-lf-decide__row--keep > .brv-i {
  color: var(--color-danger);
}

.brv-lf-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}

.brv-lf-open {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

/* What visitors see: a small mock of the edge's warning page. */
.brv-lf-mock {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.brv-lf-mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.brv-lf-mock__dots {
  display: flex;
  gap: 5px;
}

.brv-lf-mock__dots > span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border-strong);
}

.brv-lf-mock__url {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brv-lf-mock__stage {
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: var(--color-surface-alt);
}

.brv-lf-mock__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  padding: 28px 28px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}

.brv-lf-mock__icon {
  width: 44px;
  height: 44px;
}

.brv-lf-mock__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brv-lf-mock__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.brv-lf-mock__key {
  font-family: var(--font-family-mono);
  color: var(--color-text);
}

.brv-lf-mock__btn {
  margin-top: 4px;
  pointer-events: none;
}

.brv-lf-mock__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* What you can do: one row per action, its one button on the right. */
.brv-lf-dos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-lf-do {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-lf-do:first-child {
  border-top: 0;
}

.brv-lf-do__text {
  flex: 1;
}

.brv-lf-do__body {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-lf-do > .btn,
.brv-lf-do > form {
  flex: none;
}

@media (max-width: 1279.98px) {
  .brv-lf-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1023.98px) {
  .brv-lf__cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-lf__col + .brv-lf__col {
    border-top: 1px solid var(--color-border-subtle);
    border-left: 0;
  }

  .brv-lf__head {
    flex-wrap: wrap;
  }
}

/* ── §F · Import: add a CSV → check the columns → results ─────────────── */

/* The stepper: the kit's wizard steps (kit.css b-steps). */
.brv-li-steps {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-li-steps .wizard__step {
  flex: 1 1 0;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-li-steps .wizard__step:last-child {
  flex: 0 0 auto;
}

.brv-li-steps .wizard__step:not(:last-child)::after {
  min-width: 24px;
  margin-inline: 10px;
  height: 1px;
  background: var(--color-border);
}

.brv-li-steps .wizard__step-index {
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  font-size: 12px;
  font-weight: 600;
}

.brv-li-steps .wizard__step--done .wizard__step-index {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.brv-li-steps .wizard__step--active {
  font-weight: 600;
  color: var(--color-text);
}

.brv-li-steps .wizard__step--active .wizard__step-index {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
  color: var(--color-accent);
}

.brv-li-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.brv-li-main {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.brv-li-form > .alert {
  margin-bottom: 20px;
}

.brv-li-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brv-li-add__body {
  display: grid;
  gap: 12px;
}

/* A file is read into the text here; the text is what posts. */
.brv-li-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  transition: border-color var(--brv-dur-quick), background-color var(--brv-dur-quick);
}

.brv-li-drop.is-over {
  border-color: var(--color-accent);
  background: var(--accent-tint);
}

.brv-li-drop__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-subtle);
}

.brv-li-drop__text {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.brv-li-drop__name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-li-drop__meta {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-li-drop__pick {
  position: relative;
  flex: none;
  cursor: pointer;
}

.brv-li-drop__pick:focus-within {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* The file input sits under its button, invisible but reachable. */
.brv-li-drop__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.brv-li-drop__error {
  margin: 0;
}

.brv-li-csv {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
}

.brv-li-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-li-foot--split {
  justify-content: space-between;
}

.brv-li-note {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-li-note > .brv-i {
  flex: none;
}

.brv-li-actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-li-columns .data-table,
.brv-li-results .data-table {
  border: 0;
  border-radius: 0;
}

.brv-li-mono,
.brv-li-sample {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-li-sample {
  display: block;
  max-width: 320px;
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-li-empty,
.brv-li-small {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-li-tags,
.brv-li-results .brv-c-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* What a CSV needs. */
.brv-li-needs__body {
  display: grid;
  gap: 18px;
}

.brv-li-feats {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.brv-li-feats > li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.brv-li-feats .brv-i {
  flex: none;
  margin-top: 3px;
  color: var(--color-accent);
}

.brv-li-block {
  display: grid;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-li-names {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  font-size: 12.5px;
}

.brv-li-names dt {
  color: var(--color-text-subtle);
}

.brv-li-names dd {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.brv-li-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The results: counts, then every row — the refused first. */
.brv-li-results {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-li-stats {
  border: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
}

.brv-li-stats .brv-c-fig__l .brv-i--check-circle {
  color: var(--color-success);
}

.brv-li-stats .brv-c-fig__l .brv-i--x-circle {
  color: var(--color-danger);
}

.brv-li-stats .brv-c-meter {
  margin-top: 6px;
}

.brv-li-show .segmented__label {
  gap: 6px;
}

.brv-li-seg__n {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.brv-li-seg__n--alarm {
  font-weight: 600;
  color: var(--color-danger);
}

.brv-li-first {
  margin-left: auto;
}

.brv-li-line {
  color: var(--color-text-subtle);
}

.brv-li-dest {
  display: block;
  max-width: 320px;
  overflow: hidden;
  font-size: 13px;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-li-made,
.brv-li-failed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.brv-li-made > .brv-i {
  flex: none;
  color: var(--color-success);
}

.brv-li-why {
  font-size: 13px;
  color: var(--color-text);
}

@media (max-width: 1279.98px) {
  .brv-li-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reduced motion: console-v3.css's global rule stops every animation and
   transition above, the section and chip entrances included. */

/* ══ Section 3 · One link: header, Overview, Clicks, the flag variant ══ */

/*! brevily console — console v3 Section 3 §A/§B/§C/§G: one link's page
    (LinkPage.views.ts, LinkOverview.views.ts, LinkClicks.views.ts).
    Tokens only; motion is phase 1's keyframes (reduced motion removes it
    in console-v3.css). */

/* ── §A · the shared header ──────────────────────────────────────────── */

.brv-lp {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.brv-lp-top {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.brv-lp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  min-width: 0;
}

.brv-lp-id {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.brv-lp-slrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

/* The heading keeps the kit's bare class: the topbar reads its text. */
.brv-lp-slrow > .page-header__title {
  margin: 0;
  font: inherit;
  line-height: 1.2;
  min-width: 0;
}

/* The short link whole: the domain drawn dimmer before the back-half,
   so the heading's own text (the topbar's crumb) is the back-half. */
.brv-lp-sl {
  font-family: var(--font-family-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.brv-lp-sl::before {
  content: attr(data-domain);
  opacity: 0.72;
}

.brv-lp-sl:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.brv-lp-slactions {
  display: inline-flex;
  gap: 2px;
}

.brv-lp-iconbtn {
  color: var(--color-text-muted);
}

/* Copied: the icon gives way to the green check (console-v3.css). */
.brv-lp-iconbtn.is-copied > .brv-i {
  display: none;
}

.brv-lp-dest {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}

.brv-lp-dest > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-lp-dest > .brv-c-favicon {
  width: 20px;
  height: 20px;
  font-size: 10px;
  border-radius: var(--radius-sm);
}

.brv-lp-dest__url {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-lp-dest__url:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-lp-dest__edit {
  flex: none;
  font-size: 13px;
}

.brv-lp-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-lp-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.brv-lp-fact > .brv-i {
  color: var(--color-text-subtle);
}

.brv-lp-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.brv-lp-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

.brv-lp-actions > .btn {
  gap: 6px;
}

.brv-lp-kebab[aria-expanded="true"] {
  background: var(--color-surface-alt);
}

.brv-lp-menu {
  width: 264px;
}

.brv-lp-menu__sub,
.brv-lp-quick__sub {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-c-menu__item.brv-lp-menu__danger,
.brv-c-menu__item.brv-lp-menu__danger > .brv-i {
  color: var(--color-danger);
}

.brv-c-menu__item.brv-lp-menu__danger:hover {
  background: var(--color-danger-soft);
}

/* The tabs carry icons, as the boards draw them. */
.brv-lp-tabs .tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.brv-lp-tabs .tabs__tab > .brv-i {
  color: var(--color-text-subtle);
}

.brv-lp-tabs .tabs__tab[aria-current="page"] > .brv-i {
  color: var(--color-accent);
}

/* §G · the compact alert on a flagged link's other tabs. */
.brv-lp-flag {
  align-items: center;
}

.brv-lp-flag strong {
  font-weight: 600;
}

.brv-lp-flag a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media screen and (max-width: 767.98px) {
  .brv-lp-head {
    flex-direction: column;
    gap: 12px;
  }

  .brv-lp-sl {
    font-size: 18px;
  }

  .brv-lp-tabs .tabs__list {
    overflow-x: auto;
  }
}

/* ── §B · the Overview ───────────────────────────────────────────────── */

.brv-lp-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-5);
  align-items: stretch;
}

.brv-lp-main,
.brv-lp-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* The chart grows into the height the rail leaves (views/charts.ts
   `fillBarChart`), so the two columns end together. */
.brv-lp-chart {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.brv-lp-chart > .brv-c-panel__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.brv-lp-chart .brv-c-chart-fill {
  min-height: 220px;
}

@media screen and (max-width: 1279.98px) {
  .brv-lp-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The rail goes under the numbers: the details beside the QR code
     and the quick actions, which keep their own heights. */
  .brv-lp-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    align-items: start;
  }

  .brv-lp-details {
    grid-row: span 2;
  }
}

/* Devices, browsers and systems stay three across while there is room. */
@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-lp-main > .brv-c-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767.98px) {
  .brv-lp-rail {
    display: flex;
  }
}

.brv-lp-chart__foot {
  display: grid;
  gap: 8px;
  text-align: left;
}

.brv-lp-chart__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brv-lp-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-lp-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.brv-lp-chart__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-lp-chart__keys > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-lp-chart__keys strong {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* The split bar (views/charts.ts `splitBar`): series 1 then 2. */
.brv-c-split {
  display: block;
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.brv-c-split__track {
  fill: var(--color-surface-sunken);
}

.brv-c-split__part {
  transform-box: fill-box;
  transform-origin: left;
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) both;
}

.brv-c-split__part--1 {
  fill: var(--brv-series-1);
}

.brv-c-split__part--2 {
  fill: var(--brv-series-2);
}

.brv-lp-share .brv-c-bars__label > .brv-i {
  display: inline-block;
  margin-right: 8px;
  color: var(--color-text-subtle);
  vertical-align: -2px;
}

.brv-lp-share .brv-c-bars__label > .brv-lp-cc {
  margin-right: 8px;
  vertical-align: 1px;
}

.brv-lp-share__foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-lp-none {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* A country's code as a small flag-shaped chip. */
.brv-lp-cc {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 14px;
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
  font-size: 8.5px;
  font-weight: 700;
}

.brv-lp-kv {
  grid-template-columns: 104px minmax(0, 1fr);
  row-gap: 10px;
  margin: 0;
  font-size: 13.5px;
}

.brv-lp-kv dd {
  min-width: 0;
}

.brv-lp-trunc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-lp-muted {
  color: var(--color-text-muted);
}

.brv-lp-subtle {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-lp-mono {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-lp-rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--color-border-subtle);
}

.brv-lp-details .badge {
  height: 20px;
  font-size: 11.5px;
}

.brv-lp-qr__body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.brv-lp-qr__code {
  flex: none;
  width: 128px;
  height: 128px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-on-media);
}

.brv-lp-qr__code > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brv-lp-qr__text {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.brv-lp-qr__n {
  display: grid;
  gap: 2px;
  margin: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-lp-qr__n > strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.brv-lp-qr__dl {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brv-lp-qr__dl > .btn {
  gap: 6px;
}

.brv-lp-quick__list {
  display: grid;
  margin: 0;
  padding: 6px;
  list-style: none;
}

.brv-lp-quick__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--brv-dur-quick);
}

.brv-lp-quick__item:hover {
  background: var(--color-surface-alt);
}

.brv-lp-quick__item > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

/* Copied (brevily.js `is-copied`): the icon pops to the green check. */
:is(.brv-lp-quick__item, .brv-lp-menu .brv-c-menu__item).is-copied {
  color: var(--color-success);
}

:is(.brv-lp-quick__item, .brv-lp-menu .brv-c-menu__item).is-copied > .brv-i {
  display: none;
}

:is(.brv-lp-quick__item, .brv-lp-menu .brv-c-menu__item).is-copied::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--brv-ic-check) center / contain no-repeat;
  mask: var(--brv-ic-check) center / contain no-repeat;
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

/* ── §C · the Clicks tab ─────────────────────────────────────────────── */

.brv-lp-keep {
  align-items: flex-start;
}

.brv-lp-clicks__actions {
  display: flex;
  gap: 8px;
}

.brv-lp-clicks__actions > .btn,
.brv-lp-clicks__pager > .btn {
  gap: 6px;
}

.brv-lp-clicks__tools {
  padding: 10px var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-lp-clicks__tools .select {
  width: auto;
  min-width: 150px;
}

.brv-lp-clicks__bots {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-lp-clicks__table th,
.brv-lp-clicks__table td {
  white-space: nowrap;
}

.brv-lp-clicks__table td:nth-child(6) {
  white-space: normal;
}

/* Routed to: the link's own destination is one quiet line. */
.brv-lp-clicks__table td:nth-child(6) > .brv-lp-muted {
  white-space: nowrap;
}

.brv-lp-day > th {
  height: 32px;
  padding-block: 0;
  background: var(--color-surface-alt);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: var(--color-text-muted);
}

.brv-lp-clicks__bot > td {
  color: var(--color-text-subtle);
}

.brv-lp-time {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.brv-lp-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-lp-cell > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-lp-route {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 300px;
  line-height: 1.35;
}

.brv-lp-route__dest {
  overflow: hidden;
  font-size: 12px;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-lp-src {
  gap: 4px;
}

.brv-lp-clicks__empty {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.brv-lp-clicks__empty > p {
  margin: 0;
}

.brv-lp-clicks__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brv-lp-clicks__pager {
  display: inline-flex;
  gap: 6px;
}

.brv-lp-gate-note {
  margin: 0;
  font-size: 13.5px;
  text-align: center;
  color: var(--color-text-muted);
}

/* ══ Section 3 · One link: QR code, Settings, Routing ═══════════════════ */

/* Console v3, Section 3 §D–§F: a link's QR code, Settings and Routing
   tabs (LinkQr.views.ts, LinkSettings.views.ts, LinkRouting.views.ts).
   Tokens only; motion from Phase 1; nothing loops; reduced motion off. */

/* ── §D · QR code ────────────────────────────────────────────────────── */

.brv-lq {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.brv-lq__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.brv-lq-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brv-lq-tile {
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.brv-lq-code {
  display: grid;
  place-items: center;
  min-height: 120px;
  transition: opacity var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-lq-code > svg {
  display: block;
  width: min(300px, 100%);
  height: auto;
  border-radius: 6px;
  animation: m-fade var(--brv-dur-base) var(--brv-ease-out) both;
}

.brv-lq-code[aria-busy="true"] {
  opacity: 0.6;
}

.brv-lq-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-lq-sl {
  font-family: var(--font-family-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

.brv-lq-checks .brv-lq-sl {
  font-size: 12.5px;
}

.brv-lq-mono {
  font-family: var(--font-family-mono);
  font-size: 0.95em;
  color: var(--color-text);
}

.brv-lq-warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 12.5px;
  color: var(--color-warning-soft-text);
}

.brv-lq-warn > svg {
  flex: none;
  margin-top: 2px;
}

.brv-lq-downloads {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-lq-block {
  width: 100%;
}

.brv-lq-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-lq-checks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
}

.brv-lq-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.brv-lq-checks li > svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-accent);
}

/* The style form: groups split by subtle rules, the foot on its own. */
.brv-lq-form {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.brv-lq-alert {
  margin: 16px 16px 0;
}

.brv-lq-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-lq-form > .brv-lq-group:first-of-type,
.brv-lq-alert + .brv-lq-group {
  border-top: 0;
}

.brv-lq-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0 0 2px;
  padding: 0;
}

.brv-lq-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-lq-muted {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-lq-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brv-lq-pair > .form-field {
  margin: 0;
}

.brv-lq-colour {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brv-lq-swatch {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 3px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.brv-lq-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}

.brv-lq-swatch::-webkit-color-swatch {
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.brv-lq-swatch::-moz-color-swatch {
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.brv-lq-hex {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-family-mono);
  text-transform: uppercase;
}

.brv-lq-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.brv-lq-contrast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-lq-contrast .badge {
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) both;
}

.brv-lq-legend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Module shapes as option cards, each a real radio. */
.brv-lq-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.brv-lq-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-lq-opt:hover {
  border-color: var(--color-border-strong);
}

.brv-lq-opt__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.brv-lq-opt:has(> .brv-lq-opt__input:checked) {
  border-color: var(--color-accent);
  outline: 1px solid var(--color-accent);
  outline-offset: -2px;
}

.brv-lq-opt:has(> .brv-lq-opt__input:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-lq-thumb {
  display: block;
  width: 44px;
  height: 44px;
  fill: var(--color-text);
}

.brv-lq-thumb__runs {
  fill: none;
  stroke: var(--color-text);
  stroke-width: 0.9;
  stroke-linecap: round;
}

.brv-lq-thumb__runs--dot {
  stroke-width: 0.78;
}

.brv-lq-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brv-lq-logo__mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-lq-logo__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-lq-logo .switch {
  flex: none;
}

.brv-lq-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.brv-lq-actions {
  display: inline-flex;
  gap: 8px;
}

/* With script, Discard shows once the style differs from what is saved. */
.js [data-qr-form]:not([data-dirty]) .brv-lq-discard {
  display: none;
}

/* Unsaved: the preview draws a style the downloads do not have yet. The
   badge says so, a line under the code says what the downloads use, and
   the PNG gives the accent to Save (console-v3.js keeps it in step). */
.brv-lq-state {
  display: inline-flex;
  flex: none;
}

.brv-lq:not([data-qr-unsaved]) [data-qr-when="unsaved"],
.brv-lq[data-qr-unsaved] [data-qr-when="saved"] {
  display: none;
}

.brv-lq-unsaved {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--color-warning-soft-text);
  animation: m-fade var(--brv-dur-base) var(--brv-ease-out) both;
}

.brv-lq-unsaved > svg {
  flex: none;
  margin-top: 2px;
}

.brv-lq-usage {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-lq-usage__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.brv-lq-num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-lq-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.brv-lq-link {
  font-size: 13px;
}

@media (max-width: 1023.98px) {
  .brv-lq {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .brv-lq-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── §E · Settings ───────────────────────────────────────────────────── */

.brv-ls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.brv-ls-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.brv-ls-rows {
  display: flex;
  flex-direction: column;
}

.brv-ls-row {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) both;
}

.brv-ls-row h3 {
  margin: 0;
}

.brv-ls-row .brv-c-settings-row__hint {
  margin: 0;
}

.brv-ls-row > .brv-ls-ctl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-self: stretch;
  width: 100%;
  max-width: 660px;
  min-width: 0;
}

.brv-ls-ctl .form-field {
  margin: 0;
}

.brv-ls-ctl > .btn {
  align-self: flex-start;
}

.brv-ls-rows > .brv-ls-row:nth-child(2) { animation-delay: 25ms; }
.brv-ls-rows > .brv-ls-row:nth-child(3) { animation-delay: 50ms; }
.brv-ls-rows > .brv-ls-row:nth-child(4) { animation-delay: 75ms; }
.brv-ls-rows > .brv-ls-row:nth-child(5) { animation-delay: 100ms; }
.brv-ls-rows > .brv-ls-row:nth-child(6) { animation-delay: 125ms; }
.brv-ls-rows > .brv-ls-row:nth-child(7) { animation-delay: 150ms; }
.brv-ls-rows > .brv-ls-row:nth-child(n + 8) { animation-delay: 175ms; }

.brv-ls-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-ls-note > svg {
  flex: none;
  margin-top: 1px;
  color: var(--color-text-subtle);
}

.brv-ls-note__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-ls-note strong {
  font-weight: 600;
  color: var(--color-text);
}

.brv-ls-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-ls-usage__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-ls-num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-ls-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-ls-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.brv-ls-pair .form-field {
  margin: 0;
}

.brv-ls-pair[data-ls-utm] .form-field__label {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-ls-narrow {
  max-width: 360px;
}

.brv-ls-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-ls-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-ls-copyfield {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
}

.brv-ls-copyfield__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-ls-mono {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-ls-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* The link preview: its fields, and the card it makes beside them. */
.brv-ls-og {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
}

.brv-ls-row > .brv-ls-ctl:has(> .brv-ls-og) {
  max-width: none;
}

.brv-ls-og__fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.brv-ls-og__preview {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-ls-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-ls-card__img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 132px;
  background: var(--color-surface-sunken);
  color: var(--color-text-subtle);
}

.brv-ls-card__imghost {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
}

.brv-ls-card__imghost:empty {
  display: none;
}

.brv-ls-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 12px;
  min-width: 0;
}

.brv-ls-card__domain {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ls-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-ls-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-ls-card__text:empty {
  display: none;
}

/* One save bar for group 1; with script, its buttons show once
   something changed, and it stays in view while there is something to
   save (it then overlays the page, so it takes a shadow). */
.brv-ls-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-ls-savebar__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-ls-savebar__text > svg {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-ls-savebar__actions {
  display: inline-flex;
  gap: 8px;
}

.js [data-ls-form]:not([data-dirty]) .brv-ls-savebar__actions {
  display: none;
}

.js [data-ls-form][data-dirty] .brv-ls-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.js [data-ls-form][data-dirty] .brv-ls-savebar__actions {
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) both;
}

.brv-ls-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 0 4px;
}

.brv-ls-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.brv-ls-instant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.js .brv-ls-instant__go {
  display: none;
}

.brv-ls-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.brv-ls-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.brv-ls-gate {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-ls-gate > svg {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-ls-danger {
  margin-top: 24px;
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.brv-ls-danger__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px;
}

.brv-ls-danger__row + .brv-ls-danger__row {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-ls-danger__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 720px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-ls-danger__text > strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

@media (max-width: 1023.98px) {
  .brv-ls-og {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .brv-ls-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-ls-danger__row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── §F · Routing ────────────────────────────────────────────────────── */

.brv-lr {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.brv-lr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.brv-lr-gate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--color-text-subtle);
}

.brv-lr-gate > svg {
  color: var(--color-success);
}

.brv-lr-gate--off > svg {
  color: var(--color-text-subtle);
}

.brv-lr-gatebody {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-lr-gatebody > svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-lr-gatebody p {
  margin: 0;
}

/* How a click is decided: eleven steps on one line, in three groups. */
.brv-lr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-lr-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-lr-legend__dot {
  width: 10px;
  height: 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
}

.brv-lr-legend__dot--on {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.brv-lr-legend__dot--always {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.brv-lr-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-x: auto;
}

.brv-lr-flow__groups,
.brv-lr-steps {
  display: grid;
  grid-template-columns: repeat(11, minmax(72px, 1fr));
}

.brv-lr-flow__grp {
  margin: 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-lr-flow__grp--stop {
  grid-column: span 5;
}

.brv-lr-flow__grp--choose {
  grid-column: span 2;
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-strong);
}

.brv-lr-flow__grp--then {
  grid-column: span 4;
}

.brv-lr-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-lr-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  text-align: center;
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) both;
}

.brv-lr-step::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 50%;
  width: 100%;
  height: 1px;
  background: var(--color-border-strong);
}

.brv-lr-step:first-child::before {
  display: none;
}

.brv-lr-step:nth-child(2) { animation-delay: 25ms; }
.brv-lr-step:nth-child(3) { animation-delay: 50ms; }
.brv-lr-step:nth-child(4) { animation-delay: 75ms; }
.brv-lr-step:nth-child(5) { animation-delay: 100ms; }
.brv-lr-step:nth-child(6) { animation-delay: 125ms; }
.brv-lr-step:nth-child(7) { animation-delay: 150ms; }
.brv-lr-step:nth-child(n + 8) { animation-delay: 175ms; }

.brv-lr-step__n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.brv-lr-step--on .brv-lr-step__n {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.brv-lr-step--always .brv-lr-step__n {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-lr-step__t {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.brv-lr-step--on .brv-lr-step__t {
  color: var(--color-accent-strong);
}

.brv-lr-step__d {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--color-text-subtle);
}

/* Tables inside a panel use the panel's frame. */
.brv-lr-table {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0;
}

.brv-c-panel__head + .brv-lr-table {
  border-top: 0;
}

.brv-lr-prio {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.brv-lr-who {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-lr-who > svg {
  color: var(--color-text-subtle);
}

.brv-lr-in {
  color: var(--color-text-subtle);
}

.brv-lr-cc {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 15px;
  padding: 0 3px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.brv-lr-to {
  display: inline-block;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--color-text-muted);
}

.brv-lr-else td {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* Adding a row: one line of fields and the button, under the table. */
.brv-lr-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-lr-add--full {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-lr-add__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.brv-lr-add__row > .form-field {
  flex: 1 1 130px;
  margin: 0;
}

.brv-lr-add__row > .form-field:has(input[type="url"]) {
  flex: 3 1 240px;
}

.brv-lr-add__row > .form-field:has(input[type="number"]) {
  flex: 0 1 110px;
}

/* A row whose fields carry a hint or an error beneath: the controls line
   up by their tops, and the button sits level with them under a label's
   worth of space. */
.brv-lr-add__row--top {
  align-items: flex-start;
}

.brv-lr-add__row > .form-field:has(.combobox) {
  flex: 1.4 1 180px;
}

.brv-lr-add__row > .brv-lr-add__submit {
  flex: none;
}

.brv-lr-add .form-field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.brv-lr-add__go {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.brv-lr-add__note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* The split: one bar, a colour per variant. */
.brv-lr-splitbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-lr-split {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
}

.brv-lr-split rect {
  transform-origin: left;
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) both;
}

.brv-lr-splitkey {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-lr-splitkey strong {
  color: var(--color-text);
}

.brv-lr-key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}

.brv-lr-who > .brv-lr-key {
  margin-right: 0;
}

.brv-lr-sw--0 { fill: var(--brv-series-1); background: var(--brv-series-1); }
.brv-lr-sw--1 { fill: var(--brv-series-2); background: var(--brv-series-2); }
.brv-lr-sw--2 { fill: var(--color-info); background: var(--color-info); }
.brv-lr-sw--3 { fill: var(--color-warning); background: var(--color-warning); }
.brv-lr-sw--4 { fill: var(--color-text-subtle); background: var(--color-text-subtle); }
.brv-lr-sw--5 { fill: var(--color-border-control); background: var(--color-border-control); }

.brv-lr-empty {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-lr-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.brv-lr-stack > .form-field {
  margin: 0;
}

/* Scheduled destinations: a timeline, oldest to newest, scrolling
   sideways when it is long. */
.brv-lr-tl {
  display: grid;
  grid-auto-columns: minmax(170px, 1fr);
  grid-auto-flow: column;
  margin: 0;
  padding: 0 0 4px;
  overflow-x: auto;
  list-style: none;
}

.brv-lr-tl__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.brv-lr-tl__item > :not(.brv-lr-tl__track) {
  padding-right: 16px;
}

.brv-lr-tl__when {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-lr-tl__track {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}

.brv-lr-tl__track::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--color-border);
}

.brv-lr-tl__item--past .brv-lr-tl__track::before {
  background: var(--color-accent);
}

.brv-lr-tl__item:last-child .brv-lr-tl__track::before {
  right: auto;
  width: 24px;
}

.brv-lr-tl__dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-lr-tl__dot--done {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-lr-tl__today {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent-strong);
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) both;
}

.brv-lr-tl__what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-lr-tl__item .brv-lr-to {
  max-width: 100%;
  font-size: 12.5px;
}

.brv-lr-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.brv-lr-pair > .form-field {
  margin: 0;
}

.brv-lr-pair--panels {
  gap: 16px;
  align-items: start;
}

.brv-lr-plat {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px 12px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
}

.brv-lr-plat dt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--color-text-muted);
}

.brv-lr-plat dt > svg {
  flex: none;
  margin-top: 3px;
}

.brv-lr-plat dd {
  margin: 0;
  min-width: 0;
}

.brv-lr-mono {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-lr-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-lr-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-lr-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-lr-list__item:first-child {
  border-top: 0;
}

.brv-lr-list__item:hover {
  background: var(--color-surface-alt);
}

.brv-lr-list__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  font-size: 13px;
}

.brv-lr-attn {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-info-soft);
  color: var(--color-info-soft-text);
}

.brv-lr-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-lr-note > svg {
  flex: none;
  margin-top: 3px;
}

@media (max-width: 1279.98px) {
  .brv-lr-pair--panels {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .brv-lr-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-lr-plat {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reduced motion: console-v3.css's universal rule removes every animation
   and transition above; the final state is what the server drew. */

/* ══ Section 4 · Analytics and Conversions ═════════════════════════════ */

/* Console v3 · Section 4 · Analytics (Traffic and Conversions) and the
   shared change chip. Tokens only; the motion is phase 1's keyframes, which the
   reduced-motion rule in console-v3.css removes. */

/* ── Tabs that are pages: an icon, and a quiet count ────────────────── */

.brv-c-pagetabs .tabs__tab:has(> .brv-i) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.brv-c-pagetabs .tabs__tab > .brv-i {
  color: var(--color-text-subtle);
}

.brv-c-pagetabs .tabs__tab[aria-current="page"] > .brv-i {
  color: var(--color-accent);
}

.brv-c-pagetabs__n {
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* ── The change chip: "New" when the days before had nothing ────────── */

.brv-c-fig__d--new {
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-info-soft);
  color: var(--color-info-soft-text);
  font-size: 11.5px;
  line-height: 18px;
}

.brv-c-fig__d--new::before {
  display: none;
}

/* ── The toolbar: range, comparison, filters, the range in days ─────── */

.brv-an-tools {
  gap: 10px;
  margin: 0;
}

.brv-an-tools .select {
  width: auto;
  min-width: 140px;
  max-width: 220px;
}

.brv-an-compare {
  display: inline-flex;
  padding: 0 4px;
}

.brv-an-compare .switch__label {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-an-sep {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

.brv-an-caption {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-an-caption > .brv-i {
  flex: none;
}

/* ── Stats: a plan without a comparison says so, quietly ────────────── */

.brv-an-nochange {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* ── The chart: today lighter, the previous period as a faint line ──── */

.brv-c-chart__col--muted {
  opacity: 0.5;
}

.brv-c-chart__prev {
  fill: none;
  stroke: var(--color-text);
  stroke-opacity: 0.42;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  animation: m-fade var(--brv-dur-slow) var(--brv-ease-out) backwards;
  animation-delay: 200ms;
}

.brv-an-prevkey {
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-inline-end: 4px;
  vertical-align: 3px;
  border-radius: 1px;
  background: var(--color-text);
  opacity: 0.42;
}

.brv-an-chart .brv-c-panel__head {
  flex-wrap: wrap;
}

.brv-an-chart .brv-c-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
}

.brv-an-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-an-note > .brv-i {
  flex: none;
  margin-top: 2px;
}

/* ── Breakdowns: a 3 × 2 grid; codes and icons before the words ─────── */

/* In the grid and in each panel's "All N" list. */
:is(.brv-an-grid, .brv-an-all) .brv-c-bars__label > .brv-lp-cc {
  margin-right: 8px;
  vertical-align: 1px;
}

:is(.brv-an-grid, .brv-an-all) .brv-c-bars__label > .brv-i {
  display: inline-block;
  margin-right: 8px;
  vertical-align: -2px;
  color: var(--color-text-subtle);
}

.brv-an-source .brv-c-panel__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brv-an-source__figs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brv-an-source__fig {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-an-source__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-an-source__key > .brv-c-legend__key {
  margin: 0;
}

.brv-an-source__v {
  font-family: var(--font-family-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.brv-an-source__s,
.brv-an-source__note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-an-source__note {
  margin: 0;
}

/* ── Top links: rank, the link and where it goes, a share meter ─────── */

.brv-an-rank {
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-an-toplink {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  max-width: 420px;
}

.brv-an-dest {
  overflow: hidden;
  font-size: 12px;
  color: var(--color-text-subtle);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-an-share {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

.brv-an-share > .brv-c-meter {
  flex: 1 1 auto;
}

.brv-an-share__pct {
  flex: none;
  width: 34px;
  font-size: 12px;
  text-align: right;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-an-rowacts {
  display: inline-flex;
  gap: 2px;
}

.brv-an-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  white-space: nowrap;
}

.brv-an-topfoot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

@media screen and (max-width: 767.98px) {
  .brv-an-sep {
    display: none;
  }

  .brv-an-caption {
    flex-basis: 100%;
  }
}

/* ══ Analytics › Conversions ═══════════════════════════════════════════ */

.brv-cv-ev {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 12px;
  white-space: nowrap;
}

.brv-cv-muted {
  color: var(--color-text-subtle);
}

/* The figures: a revenue per currency beneath the first; "By event" bars. */
.brv-cv-stats .brv-c-fig__v small {
  margin-left: 6px;
}

.brv-cv-more {
  font-variant-numeric: tabular-nums;
}

.brv-cv-events {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}

.brv-cv-events__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.brv-cv-events__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.brv-cv-events__top strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Two columns: the tables, and the setup card beside them. */
.brv-cv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 16px;
  align-items: start;
}

.brv-cv-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media screen and (max-width: 1279.98px) {
  .brv-cv-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brv-cv-table td,
.brv-cv-table th {
  white-space: nowrap;
}

.brv-cv-money {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.brv-cv-money > .brv-cv-muted {
  font-size: 12px;
}

.brv-cv-when {
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-cv-link {
  font-size: 12.5px;
}

.brv-cv-click {
  display: flex;
  flex-direction: column;
  max-width: 200px;
  font-size: 12px;
}

.brv-cv-click > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The click id, cut from the middle: a button that copies it whole. */
.brv-cv-click__id {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 0 -4px;
  padding: 1px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-family: var(--font-family-mono);
  white-space: nowrap;
  cursor: pointer;
}

.brv-cv-click__id .brv-copy__idle,
.brv-cv-click__id .brv-copy__done {
  color: var(--color-text-subtle);
}

.brv-cv-click__id:hover {
  background: var(--color-surface-sunken);
}

.brv-cv-click__id:hover .brv-copy__idle {
  color: var(--color-accent);
}

.brv-cv-click__id:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.brv-cv-click__id.is-copied .brv-copy__done {
  color: var(--color-success);
}

.brv-cv-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-cv-pager__nav {
  display: inline-flex;
  gap: 6px;
}

/* The setup card: a <details>, open beside the tables until the first
   conversion; then a one-line bar above them, the tables full width. */
.brv-cv-setup > summary {
  cursor: pointer;
  list-style: none;
}

.brv-cv-setup > summary::-webkit-details-marker {
  display: none;
}

.brv-cv-setup > summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.brv-cv-setup:not([open]) > summary {
  border-bottom: 0;
}

.brv-cv-setup--bar > summary {
  min-height: 48px;
  padding-block: 8px;
}

.brv-cv-setup--bar > summary > .brv-c-panel__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

/* Opened at full width: the three steps side by side, the rules in two. */
@media screen and (min-width: 1280px) {
  .brv-cv-setup--bar .brv-cv-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 24px;
  }

  .brv-cv-setup--bar .brv-cv-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
  }
}

.brv-cv-setup__state {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--color-text-subtle);
}

.brv-cv-setup__state > .brv-i {
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-cv-setup[open] .brv-cv-setup__state > .brv-i {
  transform: rotate(180deg);
}

.brv-cv-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-cv-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.brv-cv-step__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
}

.brv-cv-step--done .brv-cv-step__n {
  border-color: var(--color-accent);
  box-shadow: none;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.brv-cv-step__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.brv-cv-step__title {
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
}

.brv-cv-text {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-cv-step__body > .btn {
  align-self: flex-start;
}

.brv-cv-note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-cv-sample {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.brv-cv-sample:hover {
  background: var(--color-surface-alt);
}

.brv-cv-sample > .brv-link {
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-cv-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 12px;
}

.brv-cv-copy__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-cv-ways > summary {
  width: fit-content;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--color-accent);
}

.brv-cv-ways[open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-cv-code {
  margin: 0;
  padding: 10px 12px;
  overflow-wrap: anywhere;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  scroll-margin-top: 80px;
}

.brv-cv-code:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-cv-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--color-border-subtle);
  list-style: none;
  font-size: 13px;
}

.brv-cv-rules > li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.brv-cv-rules > li > .brv-i {
  flex: none;
  margin-top: 3px;
  color: var(--color-accent);
}

/* ══ Section 4 · Reports ════════════════════════════════════════════════ */

/* ══ Section 4 §C · Reports ═══════════════════════════════════════════
   design/v3/S4-analytics-reports-domains.md §C; the canvas's Reports and
   ReportDetail boards. Drawn by modules/organisation/Reports.views.ts;
   behaviour in console-v3.js. Tokens only; every animation is
   removed under prefers-reduced-motion by console-v3.css. */

/* ── cells ───────────────────────────────────────────────────────────── */

.brv-rp-sl {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-accent);
  white-space: nowrap;
}

.brv-rp-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brv-rp-quiet {
  color: var(--color-text-subtle);
}

/* Two lines in a cell: the value, then a quieter line beneath. */
.brv-rp-two {
  display: grid;
  justify-items: start;
  gap: 2px;
  min-width: 0;
}

.brv-rp-two__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.brv-rp-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-rp-name__link {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.brv-rp-name__link:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Wraps rather than hiding the range; the short link stays whole (G2). */
.brv-rp-name__sub {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-subtle);
  white-space: normal;
}

.brv-rp-list td:first-child {
  min-width: 220px;
  white-space: normal;
}

.brv-rp-name__sub .brv-rp-sl {
  font-size: 12px;
}

/* Recipients: initials stacked (a mail glyph for an address with no
   account), then the count. */
.brv-rp-to {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brv-rp-to__n {
  overflow: hidden;
  font-size: 13px;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-rp-stack {
  display: inline-flex;
  flex: none;
}

.brv-rp-stack > .avatar {
  width: 26px;
  height: 26px;
  margin-left: -5px;
  font-size: 10px;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--color-surface);
}

.brv-rp-stack > .avatar:first-child {
  margin-left: 0;
}

.data-table__table tbody tr:hover .brv-rp-stack > .avatar {
  box-shadow: 0 0 0 2px var(--color-surface-alt);
}

.brv-rp-stack__more {
  font-size: 10px;
}

/* A paused report reads muted, its actions as usual. */
.data-table__row:has(.brv-rp-paused) > td:not(.data-table__actions) {
  color: var(--color-text-subtle);
}

.data-table__row:has(.brv-rp-paused) .brv-rp-name__link,
.data-table__row:has(.brv-rp-paused) .brv-rp-sl,
.data-table__row:has(.brv-rp-paused) .brv-rp-to__n {
  color: var(--color-text-muted);
}

/* The row's Send now and Pause sit before the kebab, as quiet as it until
   the row is hovered or focused. */
.brv-rp-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 2px;
  vertical-align: middle;
  opacity: 0.55;
  transition: opacity var(--brv-dur-quick);
}

.data-table__table tbody tr:is(:hover, :focus-within) .brv-rp-quick {
  opacity: 1;
}

@media (hover: none) {
  .brv-rp-quick {
    opacity: 1;
  }
}

.brv-rp-quick .btn,
.brv-rp-actions .btn {
  gap: 6px;
}

.brv-rp-quick .btn[disabled] {
  cursor: not-allowed;
}

/* Below the full sidebar's width the row's Send now keeps only its icon
   (its words stay its accessible name), so the table fits unscrolled. */
@media (max-width: 1279.98px) {
  .brv-rp-send {
    width: 28px;
    padding-inline: 0;
    justify-content: center;
  }

  .brv-rp-quick__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.brv-rp-to__n {
  max-width: 200px;
}

.brv-rp-list td.data-table__actions {
  white-space: nowrap;
}

/* A panel's foot reads left-aligned here, as the boards draw it. */
.brv-rp .brv-c-panel__foot {
  text-align: left;
}

.brv-rp-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

/* ── How reports work ────────────────────────────────────────────────── */

.brv-rp-how {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.brv-rp-how__item {
  display: grid;
  align-content: start;
  gap: 6px;
}

.brv-rp-how__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-rp-how__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media (max-width: 1023.98px) {
  .brv-rp-how {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* ── New report: a native <dialog> drawn as a drawer from the right ──── */

.modal.brv-rp-new {
  width: min(480px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  border-width: 0 0 0 1px;
  border-radius: 0;
  overflow: hidden;
}

/* Head and foot stay; the body between them scrolls. `display` only
   when open: a closed dialog must stay hidden. */
.modal.brv-rp-new[open] {
  display: flex;
  flex-direction: column;
  animation: m-drawer var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-rp-new > .modal__header {
  flex: none;
}

.brv-rp-new__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.brv-rp-new__lede {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-rp-new__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.brv-rp-new__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brv-rp-new__body > .form-field,
.brv-rp-new__body > .alert {
  margin: 0;
}

.brv-rp-new__body .segmented {
  align-self: flex-start;
}

/* The kit's gliding thumb measures itself when the page loads, while the
   drawer is still closed (zero size): in here the chosen item is drawn
   as the plain v3 segmented draws it instead. */
.js .brv-rp-new .segmented::before {
  display: none;
}

.js .brv-rp-new .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

.brv-rp-new__body .form-field {
  display: grid;
  justify-items: stretch;
  gap: 6px;
}

.brv-rp-new__body .form-field > .segmented {
  justify-self: start;
}

.brv-rp-new__foot {
  flex: none;
  align-items: center;
}

.brv-rp-new__count {
  margin-right: auto;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* What it covers: three radio cards; the chosen one shows its control. */
.brv-rp-covers {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brv-rp-covers > legend {
  float: left;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
}

.brv-rp-cover {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--brv-dur-quick), box-shadow var(--brv-dur-quick);
}

.brv-rp-cover:hover {
  border-color: var(--color-border-control);
}

.brv-rp-cover:has(.brv-rp-cover__radio:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
  cursor: default;
}

.brv-rp-cover:has(.brv-rp-cover__radio:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-rp-cover.is-invalid:has(.brv-rp-cover__radio:checked) {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}

.brv-rp-cover__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.brv-rp-cover__radio {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  border: 1.5px solid var(--color-border-control);
  border-radius: 50%;
  background: var(--color-surface);
  transition: border-width var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-rp-cover__radio:checked {
  border: 5px solid var(--color-accent);
}

.brv-rp-cover__radio:focus-visible {
  outline: none;
}

.brv-rp-cover__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-rp-cover__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-rp-cover__sub {
  font-size: 12.5px;
  color: var(--color-text-subtle);
  overflow-wrap: anywhere;
}

.brv-rp-cover__control {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding-left: 28px;
}

.brv-rp-cover:not(:has(.brv-rp-cover__radio:checked)) .brv-rp-cover__control {
  display: none;
}

.brv-rp-mono {
  font-family: var(--font-family-mono);
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* The live "First email … covering …" line under Sends. */
.brv-rp-first {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-rp-first > .brv-i {
  flex: none;
  margin-top: 1px;
}

.brv-rp-first strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Recipients as chips (the script builds them; the textarea is what a
   page without scripts shows, and what the form posts). */
.brv-rp-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 76px;
  padding: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: text;
  transition: border-color var(--brv-dur-quick), box-shadow var(--brv-dur-quick);
}

.brv-rp-chips:hover {
  border-color: var(--color-border-control);
}

.brv-rp-chips:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

.brv-rp-chips.is-invalid {
  border-color: var(--color-danger);
}

.brv-rp-chips__list {
  display: contents;
}

.brv-rp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 26px;
  padding: 0 3px 0 9px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  font-size: 12.5px;
  color: var(--color-text);
  white-space: nowrap;
}

.brv-rp-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brv-rp-chip.is-bad {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-rp-chip__x {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
}

.brv-rp-chip__x:hover {
  background: var(--color-surface-alt);
  opacity: 1;
}

.brv-rp-chip__x:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.brv-rp-chips__entry {
  flex: 1 1 140px;
  min-width: 120px;
  height: 26px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--color-text);
  outline: none;
}

.brv-rp-chips__entry::placeholder {
  color: var(--color-text-subtle);
}

.brv-rp-chips:not([hidden]) ~ textarea {
  display: none;
}

.brv-rp-fixed {
  align-items: flex-start;
}

.brv-rp-fixed > .brv-i {
  flex: none;
  margin-top: 2px;
}

/* ── One report ──────────────────────────────────────────────────────── */

.brv-rp-title-badge {
  display: inline-flex;
  margin-left: 10px;
  vertical-align: 4px;
}

.brv-rp-title-badge > .badge {
  font-family: var(--font-family-base);
  letter-spacing: 0;
}

.brv-rp-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-rp-actions .brv-c-inline-form + .brv-c-inline-form {
  margin-left: 0;
}

.brv-rp-kebab[aria-expanded="true"] {
  background: var(--color-surface-alt);
}

.brv-rp-menu {
  width: 220px;
}

.brv-c-menu__item.brv-rp-menu__danger,
.brv-c-menu__item.brv-rp-menu__danger > .brv-i {
  color: var(--color-danger);
}

.brv-c-menu__item.brv-rp-menu__danger:hover {
  background: var(--color-danger-soft);
}

.brv-c-page.brv-rp-cols {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

.brv-rp-main,
.brv-rp-rail {
  display: grid;
  gap: 20px;
  min-width: 0;
}

/* Through the rail's widths the rail is narrower (1024: 899px of content). */
@media (max-width: 1279.98px) {
  .brv-c-page.brv-rp-cols {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (max-width: 1023.98px) {
  .brv-c-page.brv-rp-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A panel head's quiet right-hand note ("Next: Mon 5 Oct, 06:00"). */
.brv-rp-next {
  flex: none;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-rp-by {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.brv-rp-by__av.avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

#report-runs td:last-child {
  white-space: nowrap;
}

/* A failed run's reason wraps rather than widening the table. */
#report-runs .brv-rp-two__sub {
  max-width: 220px;
  white-space: normal;
}

#report-runs td:last-child .btn {
  gap: 6px;
}

/* What recipients get: the email on a sunken stage, the HTML part framed
   (its own route, sandboxed), the text part beside it for the switch. */
.brv-rp-mail__stage {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.brv-rp-mail__meta {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 4px 8px;
  margin: 0;
  font-size: 12.5px;
}

.brv-rp-mail__meta dt {
  color: var(--color-text-subtle);
}

.brv-rp-mail__meta dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-rp-mail__meta .brv-rp-mail__subject {
  font-weight: 600;
  color: var(--color-text);
}

.brv-rp-mail__html {
  display: block;
  width: 100%;
  height: 640px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.brv-rp-mail__text {
  margin: 0;
  padding: 20px 24px;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-text);
  white-space: pre-wrap;
}

/* The HTML | Plain text switch shows one part; no script needed. */
.brv-rp-mail:has(.segmented__input[value="text"]:checked) .brv-rp-mail__html,
.brv-rp-mail:not(:has(.segmented__input[value="text"]:checked)) .brv-rp-mail__text {
  display: none;
}

.brv-rp-kv {
  grid-template-columns: 96px minmax(0, 1fr);
}

.brv-rp-kv dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.brv-rp-people {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-rp-people__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-rp-people__item:first-child {
  border-top: 0;
}

.brv-rp-people__item > .avatar {
  flex: none;
}

.brv-rp-people__text {
  display: grid;
  min-width: 0;
}

.brv-rp-people__name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-rp-people__sub {
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Icons in these buttons keep their size beside the label. */
:is(.brv-rp, .brv-rp-actions, .brv-rp-quick) .btn > .brv-i {
  flex: none;
}

/* ══ Section 4 · Domains ════════════════════════════════════════════════ */

/* Console v3, Section 4 §D–F: Domains — a tenant's list, the three-step
   add modal, one domain's page, and the over-the-plan choice
   (Domains.views.ts). Tokens only. */

/* ── shared pieces ─────────────────────────────────────────────────────── */

.brv-dm-name,
.brv-dm-mono {
  font-family: var(--font-family-mono);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.brv-dm-name {
  font-size: 13.5px;
  white-space: nowrap;
}

a.brv-dm-name {
  text-decoration: none;
}

a.brv-dm-name:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.brv-dm-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.brv-dm-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-dm-case {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.brv-dm-case > .brv-i {
  color: var(--color-success);
}

.brv-dm-case--fixed > .brv-i,
.brv-dm-case--off {
  color: var(--color-text-subtle);
}

.brv-dm-text,
.brv-dm-hint {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-dm-hint {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-dm-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-dm-foot__actions {
  display: inline-flex;
  gap: 8px;
}

/* A value with its copy button, as a sunken field. */
.brv-dm-copy {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
}

.brv-dm-copy__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A DNS record: overline labels beside their values. */
.brv-dm-rec {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  margin: 0;
}

.brv-dm-rec--tight {
  grid-template-columns: 52px minmax(0, 1fr);
}

.brv-dm-rec dt,
.brv-dm-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-dm-rec dd {
  min-width: 0;
  margin: 0;
}

.brv-dm-rec__ttl {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Two columns: the main one and a 360px rail (the Links page's widths). */
.brv-dm-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--space-5);
  align-items: start;
}

.brv-dm-main,
.brv-dm-rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

@media screen and (max-width: 1279.98px) {
  .brv-dm-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Under the main column, the rail's panels sit two across. */
@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-dm-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* ── §D · the list ─────────────────────────────────────────────────────── */

.brv-dm-gated {
  gap: 8px;
}

.brv-dm-gated .badge {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.brv-dm-figs .brv-c-meter {
  margin-top: 6px;
}

.brv-dm-how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

@media screen and (max-width: 1023.98px) {
  .brv-dm-how-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

.brv-dm-how {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-dm-how__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-dm-how__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── §D · the add modal ────────────────────────────────────────────────── */

.modal.brv-dm-add {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.modal.brv-dm-add[open] {
  display: flex;
  flex-direction: column;
}

.brv-dm-add > .modal__header,
.brv-dm-add .modal__footer {
  flex: none;
}

.brv-dm-add > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.brv-dm-add__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.brv-dm-add__lede {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-dm-add__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brv-dm-add__note {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-dm-add__step {
  margin-right: auto;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-dm-add__body > .alert {
  margin: 0;
}

.brv-dm-steps {
  margin: 0;
}

.brv-dm-more {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 14px;
}

.brv-dm-more > summary {
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.brv-dm-more[open] > summary {
  margin-bottom: 14px;
}

.brv-dm-claim {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-dm-claim__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-dm-claim > .badge {
  flex: none;
}

.brv-dm-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brv-dm-block__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-dm-block__title > .brv-i {
  color: var(--color-accent);
}

/* The step's number beside its title (kit.css b-step__n). */
.brv-dm-n {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
}

/* The record's two forms: TXT first, the CNAME as the secondary tab. */
.brv-dm-tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-dm-tab {
  margin-bottom: -1px;
  padding: 6px 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
}

.brv-dm-tab:hover {
  color: var(--color-text);
}

.brv-dm-tab[aria-selected="true"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-text);
}

.brv-dm-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.brv-dm-tabpanel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brv-dm-tabpanel[hidden] {
  display: none;
}

/* ── §E · one domain ───────────────────────────────────────────────────── */

.brv-dm-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* The hostname is the page's title (the topbar's last crumb reads it). */
.brv-dm-head .page-header__title {
  font-family: var(--font-family-mono);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.brv-dm-cert {
  gap: 4px;
}

.brv-dm-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* The detail form's one save: always shown; once something changed
   (console-v3.js, or a refused save) it stays in view at the bottom and
   overlays the page, so it takes a shadow. */
.brv-dm-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-dm-savebar__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-dm-savebar__text > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-dm-savebar__dirty,
[data-dm-form][data-dirty] .brv-dm-savebar__clean {
  display: none;
}

[data-dm-form][data-dirty] .brv-dm-savebar__dirty {
  display: inline;
}

[data-dm-form][data-dirty] .brv-dm-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

[data-dm-form][data-dirty] .brv-dm-savebar__text > .brv-i {
  color: var(--color-accent);
}

.brv-dm-sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.brv-dm-sub__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-dm-sub__label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text);
}

.brv-dm-len {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brv-dm-len__n {
  font-family: var(--font-family-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-dm-recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
}

.brv-dm-recent .brv-sl {
  font-size: 12.5px;
}

.brv-dm-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-dm-usage__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-dm-usage__pct {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-dm-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  align-items: start;
}

@media screen and (max-width: 767.98px) {
  .brv-dm-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brv-dm-pair > .brv-dm-sub {
  gap: 6px;
  padding-top: 2px;
}

.brv-dm-pair .brv-sl {
  font-size: 12.5px;
}

.brv-dm-rule {
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* "When a link cannot be used": the situation, then its URL. */
.brv-dm-fb {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-dm-fb:first-child {
  padding-top: 0;
  border-top: 0;
}

.brv-dm-fb:last-child {
  padding-bottom: 0;
}

@media screen and (max-width: 767.98px) {
  .brv-dm-fb {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}

.brv-dm-fb__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 7px;
}

/* The situation on the left names the field; its own label stays for
   assistive technology only. */
.brv-dm-fb .form-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.brv-dm-more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  white-space: nowrap;
}

/* The Status timeline: the kit's timeline in the design's tones. */
.brv-dm-timeline .timeline__marker {
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-dm-step--success .timeline__marker {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-dm-step--accent .timeline__marker {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-dm-step--danger .timeline__marker {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-dm-step--warning .timeline__marker {
  border-color: transparent;
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-dm-step--pending .timeline__marker {
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface);
}

.brv-dm-timeline .timeline__line {
  width: 1px;
}

.brv-dm-timeline .timeline__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-dm-timeline .timeline__meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-dm-proof {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-dm-proof__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brv-dm-proof__head .badge {
  gap: 4px;
}

/* "or" between the two records, on a hairline. */
.brv-dm-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-dm-or::before,
.brv-dm-or::after {
  content: "";
  flex: 1 1 auto;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-dm-danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.brv-dm-danger .brv-c-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ── §F · over the plan ────────────────────────────────────────────────── */

.brv-dm-alert {
  align-items: flex-start;
}

.brv-dm-alert > .alert__body {
  flex: 1 1 auto;
}

.brv-dm-left {
  flex: none;
  gap: 4px;
  background: var(--color-surface);
  color: var(--color-warning-soft-text);
}

.brv-dm-count {
  flex: none;
}

.brv-dm-keep {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-accent);
}

.brv-dm-share {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

.brv-dm-share__bar {
  flex: 1 1 auto;
  min-width: 0;
}

.brv-dm-share__track {
  fill: var(--color-surface-sunken);
}

.brv-dm-share__fill {
  fill: var(--color-accent);
}

.brv-dm-share__n {
  flex: none;
  min-width: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-text);
}

.brv-dm-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.brv-dm-out--stays {
  color: var(--color-text);
}

.brv-dm-out--stays > .brv-i {
  color: var(--color-success);
}

.brv-dm-pick > [hidden] {
  display: none;
}

/* A row where the picks differ from the default. */
.brv-dm-choose .data-table__row:has([data-dm-differs]) > td,
.brv-dm-choose .data-table__row:has([data-dm-differs]):hover > td {
  background: var(--color-warning-soft);
}

.brv-dm-pick.is-changed > :not([hidden]) {
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

.brv-dm-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}

@media screen and (max-width: 767.98px) {
  .brv-dm-feats {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brv-dm-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-dm-feat > .brv-i {
  flex: none;
  margin-top: 3px;
  color: var(--color-text-subtle);
}

.brv-c-panel__body > .brv-dm-group + .brv-dm-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-dm-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-dm-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-dm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 13px;
}

.brv-dm-item[hidden] {
  display: none;
}

.brv-dm-item > .brv-i {
  flex: none;
  color: var(--color-success);
}

[data-dm-park] .brv-dm-item > .brv-i {
  color: var(--color-warning);
}

.brv-dm-item .brv-dm-name {
  overflow: hidden;
  font-size: 12.5px;
  text-overflow: ellipsis;
}

.brv-dm-item__note {
  flex: none;
  margin-left: auto;
}

.brv-dm-item__note[hidden] {
  display: none;
}

.brv-dm-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brv-dm-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.brv-dm-option__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}

.brv-dm-option__text > :is(.btn, .brv-c-inline-form) {
  margin-top: 4px;
}

.brv-dm-option__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .brv-dm-pick.is-changed > :not([hidden]) {
    animation: none;
  }

  .brv-dm-tab {
    transition: none;
  }
}

.brv-dm-slug {
  font-size: 13px;
}

.brv-dm-foot {
  text-align: left;
}

.brv-dm-foot > span:first-child {
  flex: 1 1 260px;
}

.brv-dm-add__foot {
  align-items: center;
}

/* A step not reached yet. */
.brv-dm-n--next {
  border-color: var(--color-border-strong);
  color: var(--color-text-subtle);
}

/* The plan's minimum wraps rather than widen the shared table. */
#shared-domains td:has(> .brv-dm-hint) {
  white-space: normal;
}

#shared-domains td > .brv-dm-hint {
  display: block;
  max-width: 160px;
}

/* Long headers wrap before the rows are cut at narrower widths. */
.brv-dm :is(#shared-domains, #domains) th {
  white-space: normal;
}

.brv-dm-rail .brv-c-actions {
  justify-content: flex-start;
}

/* ══ Section 4 follow-ups · Reports: the Pause/Resume tooltip, unsubscribed recipients ══ */

/* Section 4 mail follow-ups (the reports list and a report's recipients);
   fold into console-v3.css with the rest of the Reports rules. Tokens
   only. */

/* The list's Pause/Resume tooltip (the kit's CSS-only Tooltip) sits
   beside its icon, inside its own row: above it, the first row's would
   slide under the sticky table header. The long "everyone unsubscribed"
   reason wraps. */
.brv-rp-quick .tooltip__content {
  top: 50%;
  right: calc(100% + var(--space-2));
  bottom: auto;
  left: auto;
  width: max-content;
  max-width: 240px;
  white-space: normal;
  transform: translateY(-50%);
}

/* Someone who left a report by their unsubscribe link: listed under the
   recipients, quieter than who still gets it. */
.brv-rp-people__item--left .brv-rp-people__name {
  color: var(--color-text-muted);
}

/* ── Section 5 · Settings: General, Groups, a group, single sign-on ─────── */
/* design/v3/S5-settings-people.md §A, §E, §F, §G; the canvas's
   SettingsGeneral, Groups, Group and SSO boards. Tokens only, unlayered
   like the rest of the v3 layer. Behaviour: console-v3.js. */

/* ── §A · General ──────────────────────────────────────────────────── */

.brv-sg {
  display: flex;
  flex-direction: column;
}

.brv-sg > .brv-sg-row:first-child {
  padding-top: 4px;
}

.brv-sg-ctl {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-self: stretch;
  min-width: 0;
  max-width: 660px;
}

.brv-sg-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-sg-mono {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-sg-hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

/* The name: an input and its Save on one line. */
.brv-sg-name {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-sg-name__row {
  display: flex;
  gap: 8px;
}

.brv-sg-name__row > .input {
  flex: 1;
  min-width: 0;
}

/* Code, owner, plan: a short key–value list. */
.brv-sg-kv {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 18px 16px;
  margin: 0;
  font-size: 13.5px;
}

.brv-sg-kv dt {
  padding-top: 5px;
  color: var(--color-text-subtle);
}

.brv-sg-kv dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  min-width: 0;
}

.brv-sg-kv dd > .brv-sg-hint {
  flex-basis: 100%;
}

.brv-sg-code {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-sg-code__text {
  min-width: 120px;
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.brv-sg-kv .badge > svg {
  margin-right: 4px;
}

.brv-sg-person {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brv-sg-person__you {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-sg-person__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-sg-person__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.brv-sg-person__sub {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-sg-plan {
  color: var(--color-text-muted);
}

/* How people join: two radio cards, the single sign-on one with its checks. */
.brv-sg-join {
  margin: 0;
}

.brv-sg-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.brv-sg-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--brv-dur-quick) var(--brv-ease-out),
    background-color var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-sg-option:has(.brv-sg-option__input:checked) {
  border-color: var(--color-accent);
  background: var(--accent-tint);
}

.brv-sg-option:has(.brv-sg-option__input:focus-visible) {
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

.brv-sg-option__main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.brv-sg-option__input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--color-accent);
}

.brv-sg-option__input:disabled + .brv-sg-option__body {
  cursor: default;
}

.brv-sg-option__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-sg-option__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-sg-option__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-sg-checks {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-left: 26px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-sg-checks__list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-sg-check,
.brv-sg-seats {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.brv-sg-seats {
  padding-top: 7px;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

.brv-sg-check__icon {
  display: inline-flex;
  flex: none;
  margin-top: 1px;
  color: var(--color-text-subtle);
}

.brv-sg-check__icon--on {
  color: var(--color-success);
}

.brv-sg-check__text {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 5px;
  min-width: 0;
}

.brv-sg-check__state {
  color: var(--color-text-subtle);
}

.brv-sg-check {
  flex-wrap: wrap;
}

.brv-sg-check__text {
  flex: 1 1 220px;
}

.brv-sg-check__link {
  margin-left: auto;
  padding-left: 24px;
  white-space: nowrap;
}

/* A group's foot: what it stands at, and its Save. */
.brv-sg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 12px;
}

.brv-sg-foot__text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

/* Branding: the QR logo beside its preview, then what emails carry. */
.brv-sg-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.brv-sg-logo {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.brv-sg-logo__field {
  flex: 1;
  min-width: 0;
}

.brv-sg-qr {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.brv-sg-qr__tile {
  width: 88px;
  height: 88px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-sg-qr__tile svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brv-sg-qr__tile svg path {
  fill: var(--color-text);
}

.brv-sg-qr__mark {
  fill: var(--color-brand-teal);
}

.brv-sg-qr__initial {
  font-family: var(--font-family-display);
  font-size: 3.4px;
  font-weight: 700;
  fill: var(--color-surface);
}

/* With a logo, the logo covers the tile's initial; a logo that fails to
   load is dropped by the script and the initial shows again. */
.brv-sg-qr[data-has-logo] :is(.brv-sg-qr__mark, .brv-sg-qr__initial),
.brv-sg-qr:not([data-has-logo]) .brv-sg-qr__logo {
  display: none;
}

.brv-sg-qr__caption {
  font-size: 11.5px;
  color: var(--color-text-subtle);
}

.brv-sg-wl {
  align-items: center;
}

.brv-sg-wl > .btn {
  flex: none;
}

.brv-sg-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding-top: 4px;
}

.brv-sg-sub > .brv-sg-hint {
  flex-basis: 100%;
}


/* The unsaved bar: a quiet foot, sticky over the page once changed. */
.brv-sg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-sg-bar__text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-sg-bar__actions {
  display: inline-flex;
  gap: 8px;
}

.js .brv-sg-bar:not([data-dirty]) .brv-sg-bar__discard {
  display: none;
}

.js .brv-sg-bar[data-dirty] {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) both;
}

.js .brv-sg-bar[data-dirty] .brv-sg-bar__text {
  color: var(--color-warning-soft-text);
  font-weight: 500;
}

/* Under 1280px the hub leaves too little beside a 300px heading column:
   each group's heading sits above its controls instead. */
@media screen and (max-width: 1279.98px) {
  .brv-sg-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .brv-sg-ctl {
    max-width: none;
  }
}

@media screen and (max-width: 767.98px) {
  .brv-sg-kv {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .brv-sg-kv dd {
    margin-bottom: 12px;
  }

  .brv-sg-logo {
    flex-direction: column-reverse;
  }

  .brv-sg-checks {
    margin-left: 0;
  }
}

/* ── §E · Groups & permissions ─────────────────────────────────────── */

.brv-gp-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
}

.brv-gp-group__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-gp-group__name > a {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.brv-gp-group__name > a:hover {
  color: var(--color-accent-strong);
}

.brv-gp-group__desc {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-gp-none {
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-gp-faces {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-gp-stack {
  display: inline-flex;
}

.brv-gp-stack > .avatar {
  box-shadow: 0 0 0 2px var(--color-surface);
}

.brv-gp-stack > .avatar + .avatar {
  margin-left: -7px;
}

.brv-gp-faces__n {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.brv-gp-perms {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.brv-gp-perm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 12px;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.brv-gp-perm > b {
  font-weight: 600;
  color: var(--color-text);
}

.brv-gp-note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-gp-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
}

/* The matrix: V E C D marks per group, granted in the accent tint. */
.brv-gp-legend {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-gp-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-gp-bits {
  display: inline-flex;
  gap: 3px;
}

.brv-gp-bit {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px dashed var(--color-border-strong);
  border-radius: 4px;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-subtle);
}

.brv-gp-bit--on {
  border: 1px solid transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-gp-bit--na {
  border-color: transparent;
  color: var(--color-text-subtle);
  opacity: 0.5;
}

/* A permission beyond the four (Suspend): the same mark, set apart. */
.brv-gp-bit--extra {
  margin-left: 4px;
}

.brv-gp-bit--key {
  width: 14px;
  height: 14px;
}

.brv-gp-area {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 220px;
  max-width: 340px;
}

.brv-gp-area__name {
  font-weight: 600;
}

.brv-gp-area__desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
  white-space: normal;
}

.brv-gp-matrix .data-table__table td,
.brv-gp-matrix .data-table__table th {
  vertical-align: middle;
}

.brv-gp-matrix .data-table__table td:not(:first-child),
.brv-gp-matrix .data-table__table th:not(:first-child) {
  width: 130px;
}

.brv-gp-how {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

.brv-gp-how__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.brv-gp-how__item > .brv-c-attn {
  flex: none;
}

.brv-gp-how__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-gp-how__title {
  font-weight: 600;
  color: var(--color-text);
}

@media screen and (max-width: 767.98px) {
  .brv-gp-how {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── §F · A group ──────────────────────────────────────────────────── */

.brv-gp-form {
  margin: 0;
}

.brv-gp-form__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brv-gp-give {
  align-items: flex-start;
}

.brv-gp-give > svg {
  flex: none;
  margin-top: 2px;
}

.brv-gp-editor {
  padding: 0 16px 8px;
}

.brv-gp-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-gp-savebar__holds,
.brv-gp-holds {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.brv-gp-savebar__actions {
  display: inline-flex;
  gap: 8px;
}

.js [data-gp-form]:not([data-dirty]) .brv-gp-discard,
.js [data-gp-form]:not([data-dirty]) [data-gp-when-dirty] {
  display: none;
}

/* What the viewer cannot change reads as text, never as an input that
   only looks editable: a system group's name (§F). */
.brv-gp-fixed__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-gp-fixed__value > svg {
  flex: none;
  color: var(--color-text-subtle);
}

/* A read-only grid (Admin): the masks as muted as its switches. */
.brv-c-perm--readonly .brv-c-perm__mask {
  color: var(--color-text-subtle);
}

.js [data-gp-form][data-dirty] .brv-gp-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) both;
}

.brv-gp-add__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 10px;
  margin: 0;
}

.brv-gp-add__form > .form-field {
  flex: 1 1 320px;
  max-width: 460px;
  margin: 0;
}

.brv-gp-add__form > .btn {
  margin-top: 22px;
}

/* ── §G · Single sign-on ───────────────────────────────────────────── */

.brv-sso-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.brv-sso-ms {
  display: grid;
  grid-template-columns: 7px 7px;
  gap: 2px;
}

.brv-sso-ms > span {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: currentColor;
}

.brv-sso-card__head {
  padding-block: 14px;
}

.brv-sso-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brv-sso-card__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-sso-card__title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-sso-card form {
  margin: 0;
}

.brv-sso-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brv-sso-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sso-card__acts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-sso-card__note {
  margin-left: 6px;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-sso-redirect {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-sso-copy {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-sso-copy__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
}

.brv-sso-copy .btn > svg,
.brv-sso-kind .btn > svg,
.brv-sg-code .btn > svg {
  flex: none;
}

.brv-sso-copy .btn > svg,
.brv-sso-kind .btn > svg {
  margin-right: 4px;
}

.brv-sso-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.brv-sso-kind {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-sso-kind__head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brv-sso-kind__name {
  font-size: 13.5px;
  font-weight: 600;
}

.brv-sso-kind__needs {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-sso-how {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brv-sso-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-sso-step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.brv-sso-step__top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brv-sso-step__n {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
  font-size: 12px;
  font-weight: 600;
}

.brv-sso-step__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.brv-sso-step:last-child .brv-sso-step__line {
  display: none;
}

.brv-sso-step__title {
  font-size: 13.5px;
  font-weight: 600;
}

.brv-sso-step__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-sso-outcomes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-sso-outcomes__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-sso-outcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13px;
}

.brv-sso-outcome__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-sso-outcome__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-sso-outcome > .badge {
  flex: none;
}

@media screen and (max-width: 1279.98px) {
  .brv-sso-outcomes__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 1023.98px) {
  .brv-sso-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brv-sso-step__line {
    display: none;
  }
}

@media screen and (max-width: 767.98px) {
  .brv-sso-steps,
  .brv-sso-outcomes__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-sg-option,
  .js .brv-sg-bar[data-dirty],
  .js [data-gp-form][data-dirty] .brv-gp-savebar {
    transition: none;
    animation: none;
  }
}

/* ══ Section 5 · People: Members, Invite people, a person ══════════════ */
/* design/v3/S5-settings-people.md §B–§D; boards People, InvitePeople and
   Person. Tokens only; motion comes from console-v3.css (G5), whose
   reduced-motion rule removes every animation here too. */

/* ── §B · Members: the three figures ── */

.brv-pp-stats .brv-c-meter {
  margin-top: 6px;
}

.brv-pp-fig__link,
.brv-pp-fig__inline {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
}

.brv-pp-fig__link {
  align-self: flex-start;
  margin-top: 2px;
}

.brv-pp-fig__link:hover,
.brv-pp-fig__inline:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-pp-fig__warn {
  display: inline-flex;
  margin-right: 5px;
  vertical-align: -2px;
  color: var(--color-warning);
}

/* ── §B · the table ── */

.brv-pp-who {
  min-width: 200px;
  color: inherit;
  text-decoration: none;
}

.brv-pp-who__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

a.brv-pp-who:hover .brv-pp-who__name {
  color: var(--color-accent);
}

.brv-pp-you.badge {
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 500;
}

/* The person looking: an ink avatar (kit.css `.b-av--ink`). */
.avatar.brv-pp-av--you {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-pp-groups {
  color: var(--color-text-muted);
}

.brv-pp-2fa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  white-space: nowrap;
}

.brv-pp-2fa--on {
  color: var(--color-success);
}

.brv-pp-2fa--off {
  color: var(--color-warning);
}

.brv-pp-when {
  font-size: 13px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.brv-pp-when--late {
  color: var(--color-warning);
}

.brv-pp-invitee {
  font-weight: 500;
}

.brv-pp-invitee + .badge {
  margin-left: 6px;
}

.brv-pp-table .brv-c-panel__head {
  display: none;
}

/* The search as the board sizes it, so the status segments and the
   group filter share its row at full width. */
.brv-pp-table .data-table__toolbar .brv-c-toolbar__search {
  flex: 1 1 210px;
  min-width: 190px;
  max-width: 260px;
}

.brv-pp-table .segmented__label {
  gap: 5px;
  padding-inline: 8px;
}

/* The table's hint sits where the pager's line ends. */
.brv-pp-table > .brv-c-panel__foot {
  display: flex;
  justify-content: flex-end;
  padding: 8px 16px;
  font-size: 12.5px;
}

.brv-pp-members .brv-c-panel__foot,
.brv-pp-person .brv-c-panel__foot {
  text-align: left;
}

.brv-pp-invites .empty {
  padding: 28px 24px 32px;
}

.brv-pp-count.badge {
  flex: none;
}

.brv-pp-more {
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-pp-headlink {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: none;
}

.brv-pp-headlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── §B · roles and statuses ── */

.brv-pp-members {
  container-type: inline-size;
}

.brv-pp-roles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.brv-pp-roles__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.brv-pp-roles__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-pp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-pp-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-pp-legend__item .badge {
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}

@container (max-width: 760px) {
  .brv-pp-roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 420px) {
  .brv-pp-roles {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── §C · Invite people ── */

.modal.brv-pp-invite {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.modal.brv-pp-invite[open] {
  display: flex;
  flex-direction: column;
}

.brv-pp-invite > .modal__header,
.brv-pp-invite .modal__footer {
  flex: none;
}

.brv-pp-invite > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.brv-pp-invite__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-pp-invite__lede {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-pp-invite__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brv-pp-invite__body > .alert,
.brv-pp-invite__body > .form-field,
.brv-pp-invite__groups .form-field {
  margin: 0;
}

.brv-pp-invite__foot {
  flex-wrap: wrap;
  align-items: center;
}

.brv-pp-invite__note {
  flex: 1 1 220px;
  max-width: 300px;
  margin-right: auto;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-pp-invite__foot .btn--accent:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.brv-pp-invite__what .alert__text {
  font-size: 13px;
  line-height: 1.5;
}

/* Addresses as chips over the textarea that posts. */
.brv-pp-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 76px;
  padding: 8px;
  border: 1px solid var(--color-border-control);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: text;
}

.brv-pp-chips:hover {
  border-color: var(--color-border-strong);
}

.brv-pp-chips:focus-within {
  border-color: var(--color-accent);
  outline: 2px solid var(--accent-tint-strong);
  outline-offset: 0;
}

.brv-pp-chips.is-invalid {
  border-color: var(--color-danger);
}

.brv-pp-chips__list {
  display: contents;
}

.brv-pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  height: 26px;
  padding: 0 4px 0 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  font-size: 12.5px;
  color: var(--color-text);
  animation: m-pop var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

.brv-pp-chip__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-pp-chip__why {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-danger-soft-text);
  white-space: nowrap;
}

.brv-pp-chip.is-bad {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-pp-chip.is-held {
  border-style: dashed;
}

.brv-pp-chip__x {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-subtle);
  cursor: pointer;
}

.brv-pp-chip__x:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.brv-pp-chip__x:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.brv-pp-chips__entry {
  flex: 1 1 160px;
  min-width: 120px;
  height: 26px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--color-text);
  outline: none;
}

.brv-pp-chips__entry::placeholder {
  color: var(--color-text-subtle);
}

/* With script the chips edit the textarea, which stays the field. */
.brv-pp-chips:not([hidden]) ~ textarea {
  display: none;
}

.brv-pp-chips__bad {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-danger-soft-text);
}

/* "With Marketing they can": an inset under the groups. */
.brv-pp-can {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-pp-can[hidden] {
  display: none;
}

.brv-pp-can__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-pp-can__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
}

.brv-pp-can__list > li {
  position: relative;
  padding-left: 18px;
}

.brv-pp-can__list > li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 12px;
  height: 12px;
  background-color: var(--color-accent);
  -webkit-mask: var(--brv-ic-check) center / contain no-repeat;
  mask: var(--brv-ic-check) center / contain no-repeat;
}

/* Seats: the line, a two-part meter, the hint. */
.brv-pp-seats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-pp-seats[hidden] {
  display: none;
}

.brv-pp-seats__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.brv-pp-seats__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
}

.brv-pp-seats__line {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-pp-seats__line strong {
  font-weight: 600;
  color: var(--color-text);
}

.brv-pp-seats__bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.brv-pp-seats__meter {
  display: block;
  width: 100%;
  height: 6px;
}

.brv-pp-seats__track {
  fill: var(--color-surface-sunken);
}

.brv-pp-seats__used,
.brv-pp-seats__new {
  fill: var(--color-accent);
}

.brv-pp-seats__new {
  fill-opacity: 0.4;
}

.brv-pp-seats__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-pp-seats.is-over .brv-pp-seats__line,
.brv-pp-seats.is-over .brv-pp-seats__line strong {
  color: var(--color-danger);
}

.brv-pp-seats.is-over .brv-pp-seats__new {
  fill: var(--color-danger);
  fill-opacity: 0.55;
}

/* ── §D · a person ── */

/* The card below carries the name, so the page's own header steps
   aside (the topbar's trail still reads it). */
.page-header:has(+ .brv-pp-person) {
  display: none;
}

.brv-pp-person {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  container-type: inline-size;
}

.brv-pp-person > .alert {
  margin: 0;
}

.brv-pp-back {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-pp-back:hover {
  color: var(--color-accent);
}

.brv-pp-head.brv-c-panel {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
}

.brv-pp-head__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-pp-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.brv-pp-head__name {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.brv-pp-head__mail {
  font-size: 13px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.brv-pp-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-pp-head__audit {
  flex: none;
  align-self: flex-start;
}

.brv-pp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.brv-pp-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@container (max-width: 760px) {
  .brv-pp-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container (max-width: 560px) {
  .brv-pp-head.brv-c-panel {
    flex-wrap: wrap;
  }
}

/* Details */
.brv-pp-details {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brv-pp-details .form-field {
  margin: 0;
}

.brv-pp-inline {
  display: flex;
  gap: 8px;
}

.brv-pp-inline > .input,
.brv-pp-inline > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.brv-pp-locked {
  display: flex;
}

.brv-pp-locked .input {
  width: 100%;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

/* Groups as checkable cards */
.brv-pp-cards {
  display: flex;
  flex-direction: column;
}

.brv-pp-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: background-color var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-pp-group:first-child {
  border-top: 0;
}

.brv-pp-group:hover {
  background: var(--color-surface-alt);
}

.brv-pp-group.is-fixed {
  cursor: default;
}

.brv-pp-group.is-fixed:hover {
  background: transparent;
}

.brv-pp-group.is-adding {
  background: var(--accent-tint);
}

.brv-pp-group.is-removing {
  background: var(--color-surface-alt);
}

.brv-pp-group__check {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
}

.brv-pp-group__check:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-pp-group__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-pp-group__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-pp-group__name {
  font-size: 14px;
  font-weight: 600;
}

.brv-pp-kind.badge,
.brv-pp-group__change.badge {
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}

.brv-pp-group__change.badge {
  margin-left: auto;
}

.brv-pp-group__change[hidden] {
  display: none;
}

.brv-pp-group.is-removing .brv-pp-group__change.badge {
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-pp-group__sum {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-pp-group__note,
.brv-pp-group__why {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-pp-group__why {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.brv-pp-cards__error {
  margin: 0;
  padding: 0 16px 10px;
}

.brv-pp-rules {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-pp-rules > svg {
  flex: none;
  margin-top: 1px;
}

/* The groups' save bar: with script it shows once a card changed and
   stays in view while there is something to save (it then overlays the
   page, so it takes a shadow); without script it is always there. */
.brv-pp-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-pp-savebar__text {
  margin-right: auto;
}

.js [data-pp-groups]:not([data-dirty]) .brv-pp-savebar {
  display: none;
}

.js [data-pp-groups][data-dirty] .brv-pp-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 2;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 8px 8px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

.brv-pp-savebar__text strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Recent activity */
.brv-pp-tl {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-pp-tl__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-pp-tl__item:nth-child(2) { animation-delay: 25ms; }
.brv-pp-tl__item:nth-child(3) { animation-delay: 50ms; }
.brv-pp-tl__item:nth-child(4) { animation-delay: 75ms; }
.brv-pp-tl__item:nth-child(5) { animation-delay: 100ms; }

.brv-pp-tl__item:last-child {
  padding-bottom: 0;
}

.brv-pp-tl__item::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 2px;
  left: 11px;
  width: 1px;
  background: var(--color-border);
}

.brv-pp-tl__item:last-child::before {
  display: none;
}

.brv-pp-tl__dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-pp-tl__dot--accent {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-pp-tl__dot--danger {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-pp-tl__dot--success {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-pp-tl__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.brv-pp-tl__what {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.brv-pp-tl__what .brv-sl {
  font-size: 12.5px;
  white-space: normal;
  text-decoration: none;
}

.brv-pp-tl__what a.brv-sl:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-pp-tl__when {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-pp-quiet,
.brv-pp-gate {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Sign-in and security */
.brv-pp-kv.brv-c-kv {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  row-gap: 14px;
}

.brv-pp-kv dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  min-width: 0;
}

.brv-pp-kv__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

/* Access */
.brv-pp-access {
  display: flex;
  flex-direction: column;
}

.brv-pp-access__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-pp-access__row:first-child {
  border-top: 0;
}

.brv-pp-access__row > .brv-inline-form,
.brv-pp-access__row > .brv-c-inline-form,
.brv-pp-access__row > .badge {
  flex: none;
}

.brv-pp-access__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-pp-access__title {
  font-size: 14px;
  font-weight: 600;
}

.brv-pp-access__sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-pp-guard {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
}

.brv-pp-guard > svg {
  flex: none;
  margin-top: 2px;
}

/* ══ Section 6 · API keys ══════════════════════════════════════════════════════════ */
/* API keys (/api-keys, ApiKeys.dc.html). Tokens only; unlayered, like the theme. */

/* ── Key created / Key rolled: the one time the secret shows ─────────── */
.brv-ak-made {
  border-color: color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-ak-made__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brv-ak-made__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brv-ak-made__grace {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--color-warning-soft-text);
}

.brv-ak-made__grace > .brv-i {
  flex: none;
  margin-top: 2px;
}

.brv-ak-made__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.brv-ak-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.brv-ak-copyfield {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.brv-ak-copyfield__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  padding: 0;
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
}

.brv-ak-copyfield .btn {
  flex: none;
}

.brv-ak-copyfield .brv-copy__idle > .brv-i,
.brv-ak-copyfield .brv-copy__done > .brv-i {
  flex: none;
}

/* Scopes · Expires · Acts for, on one line that wraps. */
.brv-ak-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  font-size: 13px;
}

.brv-ak-facts > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.brv-ak-facts dt {
  color: var(--color-text-subtle);
}

.brv-ak-facts dd {
  margin: 0;
  color: var(--color-text);
}

/* ── Scopes as chips: the area strong, its permissions after it ────────── */
.brv-ak-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* A chip's permissions wrap inside it before the table has to scroll. */
.brv-ak-scope {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 5px;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 18px;
}

.brv-ak-scope > b {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

/* ── The two kinds of key ──────────────────────────────────────────────── */
.brv-ak-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.brv-ak-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.brv-ak-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brv-ak-card__head > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-ak-card__head > .brv-c-panel__title {
  margin: 0;
}

.brv-ak-card__text {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-ak-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 13px;
}

.brv-ak-badge {
  flex: none;
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}

/* ── The table ──────────────────────────────────────────────────────────── */
.brv-ak-key {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* The label wraps, its badge with it, before the table has to scroll. */
.brv-ak-key__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-width: 0;
}

.brv-ak-key__label {
  font-weight: 600;
  color: var(--color-text);
  white-space: normal;
}

.brv-ak-key__id {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* A revoked key reads muted; its row keeps its place. */
.data-table__row:has(.brv-ak-key--revoked) > td:not(.data-table__actions),
.data-table__row:has(.brv-ak-key--revoked) .brv-ak-key__label,
.data-table__row:has(.brv-ak-key--revoked) .brv-ak-scope,
.data-table__row:has(.brv-ak-key--revoked) .brv-ak-scope > b {
  color: var(--color-text-subtle);
}

.brv-ak-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-ak-by__av.avatar {
  width: 22px;
  height: 22px;
  font-size: 9.5px;
}

.brv-ak-by__av {
  flex: none;
}

.brv-ak-by__name {
  font-size: 13px;
}

.brv-ak-exp {
  display: flex;
  flex-direction: column;
  gap: 1px;
  white-space: nowrap;
}

.brv-ak-exp__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ak-exp--grace .brv-ak-exp__when {
  color: var(--color-warning);
}

.brv-ak-acts {
  gap: 4px;
}

.brv-ak-acts .btn {
  gap: 6px;
}

.brv-ak-acts .btn > .brv-i {
  display: none;
}

.brv-ak-acts .btn[disabled] {
  cursor: not-allowed;
}

.brv-ak-foot {
  margin: 0;
  text-align: left;
}

/* ── Call the API ──────────────────────────────────────────────────────── */
.brv-ak-mono {
  padding: 0;
  background: none;
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-ak-how {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
  margin: 0;
}

.brv-ak-how > dt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}

.brv-ak-how > dd {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.brv-ak-how__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-ak-how__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ak-code {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.brv-ak-code:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-ak-how__note {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ── Below the full sidebar's width: Roll and Revoke keep their icons ───── */
@media (max-width: 1279.98px) {
  .brv-ak-acts .btn {
    width: 28px;
    padding-inline: 0;
    justify-content: center;
  }

  .brv-ak-acts .btn > .brv-i {
    display: inline-block;
  }

  .brv-ak-acts__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ── Narrower: the pairs stack ─────────────────────────────────────────── */
@media (max-width: 1023.98px) {
  .brv-ak-cards,
  .brv-ak-made__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-ak-how {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .brv-ak-how > dd + dt {
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-ak-made {
    animation: none;
  }
}


/* ══ Section 6 · Integrations ══════════════════════════════════════════════════════ */
/* Console v3, Section 6 §B: Integrations (Integrations.views.ts) — the
   list with this period's counts and the allowance, the signing secret
   shown once, the recent deliveries and the retry timeline, the webhook
   check and GA4 forwarding. Tokens only, unlayered, no panel shadows.
   Reference: the Integrations board, kit.css `.b-copyfield`, `.b-code`,
   `.b-seg`, `.b-rowacts`, `.b-meter`. */

/* ── shared pieces ─────────────────────────────────────────────────────── */

.brv-ig-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-ig-quiet {
  color: var(--color-text-subtle);
}

.brv-ig-mono {
  font-family: var(--font-family-mono);
  font-size: 13px;
}

.brv-ig-kind {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

/* ── The signing secret, once ──────────────────────────────────────────── */

.brv-ig-secret__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.brv-ig-secret__body > .alert__text {
  margin-top: -8px;
}

.brv-ig-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-ig-copy__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-ig-copy .btn {
  flex: none;
  font-family: var(--font-family-base);
}

/* ── Your integrations ─────────────────────────────────────────────────── */

.brv-ig-to {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 320px;
}

.brv-ig-to__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-ig-target {
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-ig-target--off {
  color: var(--color-text-subtle);
}

.brv-ig-scope {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ig-period {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.brv-ig-period__sent {
  font-weight: 600;
  color: var(--color-text);
}

.brv-ig-period__failed {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ig-period__failed--bad {
  color: var(--color-danger);
}

/* The row just added: washed teal once. */
.data-table__row:has(.brv-ig-new) > td {
  animation: m-flash 1600ms ease-out 300ms backwards;
}

/* Turn off/on · Delete · the kebab: as quiet as the kit's kebab until the
   row is hovered or focused (always on touch). */
.brv-ig-acts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.55;
  transition: opacity var(--brv-dur-quick);
}

.data-table__table tbody tr:is(:hover, :focus-within) .brv-ig-acts {
  opacity: 1;
}

@media (hover: none) {
  .brv-ig-acts {
    opacity: 1;
  }
}

.brv-ig-acts .brv-c-inline-form {
  margin: 0;
}

.brv-ig-list td.data-table__actions {
  width: 1%;
  white-space: nowrap;
}

.brv-ig-list .data-table__num,
.brv-ig-list .brv-ig-quiet {
  white-space: nowrap;
}

/* The allowance, in the list's foot: the meter left, the terms right. */
.brv-ig-usage {
  display: grid;
  grid-template-columns: minmax(200px, 420px) minmax(0, 1fr);
  align-items: center;
  gap: 12px 20px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-ig-usage__meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.brv-ig-usage__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-ig-usage__n {
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.brv-ig-usage__note {
  margin: 0;
  text-align: right;
}

/* ── Recent deliveries ─────────────────────────────────────────────────── */

.brv-ig-deliveries > .brv-c-panel__head {
  flex-wrap: nowrap;
}

.brv-ig-deliveries > .brv-c-panel__head > .brv-c-panel__heading {
  flex: 1 1 auto;
}

.brv-ig-seg {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.brv-ig-when {
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brv-ig-dest {
  font-size: 13px;
}

.brv-ig-sl.brv-sl {
  font-size: 12.5px;
}

.brv-ig-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.brv-ig-status__detail {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ig-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-ig-pager__nav {
  display: inline-flex;
  gap: 8px;
}

/* "When a delivery fails": under the table, on the alternate surface. */
.brv-ig-retry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-ig-sched {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-ig-sched__step {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The line to the previous step, from dot to dot. */
.brv-ig-sched__step + .brv-ig-sched__step::before {
  content: "";
  position: absolute;
  top: 5px;
  right: calc(50% + 12px);
  left: calc(-50% + 12px);
  height: 2px;
  border-radius: 2px;
  background: var(--color-border);
}

.brv-ig-sched__dot {
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-surface);
}

.brv-ig-sched__step--end .brv-ig-sched__dot {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
}

.brv-ig-retry__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── Check a webhook ───────────────────────────────────────────────────── */

.brv-ig-verify {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.brv-ig-verify__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.brv-ig-code {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre;
  font-variant-ligatures: none;
}

.brv-ig-code:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-ig-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-ig-note code {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* ── GA4 forwarding ────────────────────────────────────────────────────── */

.brv-ig-ga4__who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brv-ig-kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0;
}

.brv-ig-kv > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.brv-ig-kv dt {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ig-kv dd {
  margin: 0;
  font-size: 13.5px;
}

.brv-ig-kv dd.brv-ig-mono {
  font-size: 13px;
}

.brv-ig-kv dd .badge {
  margin-right: 4px;
}

.brv-ig-kv__wide {
  grid-column: 1 / -1;
}

.brv-ig-kv dd.brv-ig-params {
  font-size: 12px;
  line-height: 1.6;
}

/* ── Narrower ──────────────────────────────────────────────────────────── */

@media (max-width: 1279.98px) {
  .brv-ig-verify {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-ig-to {
    max-width: 220px;
  }

  .brv-ig-deliveries > .brv-c-panel__head {
    flex-wrap: wrap;
  }

  .brv-ig-deliveries .data-table__table :is(th, td):not(:first-child, :last-child) {
    padding-inline: 8px;
  }

  .brv-ig-dest {
    font-size: 12.5px;
  }
}

@media (max-width: 1023.98px) {
  .brv-ig-kv,
  .brv-ig-usage {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-ig-usage__note {
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .brv-ig-sched__step {
    font-size: 11px;
  }
}

/* The New integration modal: a field of the other kind (app JS). */
#new-integration .form-field[hidden] {
  display: none;
}


/* ══ Section 6 · Mobile apps ═══════════════════════════════════════════════════════ */
/* ── Mobile apps (/apps, the Apps board) ─────────────────────────────── */

/* An app's tile: its first letter on ink; quiet when it opens nothing. */
.brv-ap-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 700;
}

.brv-ap-icon--quiet {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-ap-card > .brv-c-panel__head {
  padding: 14px 16px;
}

.brv-ap-who {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brv-ap-who__text,
.brv-ap-row__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-ap-who__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-ap-who__title > .brv-c-panel__title {
  margin: 0;
}

/* The two platform columns. */
.brv-ap-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brv-ap-platform {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-ap-platform__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brv-ap-platform__head > .badge {
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}

.brv-ap-platform__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

.brv-ap-platform__name > svg {
  color: var(--color-text-subtle);
}

.brv-ap-platform__none {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-ap-kv {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
  font-size: 13px;
}

.brv-ap-kv dt {
  color: var(--color-text-subtle);
}

.brv-ap-kv dd {
  min-width: 0;
  margin: 0;
}

.brv-ap-mono {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
}

.brv-ap-trunc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-ap-later {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-ap-none {
  color: var(--color-text-subtle);
}

/* What a visitor on this platform gets, under a hairline. */
.brv-ap-behave {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-ap-behave > svg,
.brv-ap-note > svg {
  flex: none;
  margin-top: 2px;
}

/* Something set up wrong: amber, an icon and a sentence. */
.brv-ap-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-warning);
}

.brv-ap-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: start;
}

.brv-ap-acts {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* An app that opens nothing right now: one quiet row. */
.brv-ap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.brv-ap-row__text {
  flex: 1 1 auto;
}

.brv-ap-row > .brv-ap-acts {
  flex: none;
  flex-wrap: nowrap;
}

.brv-ap-row__sub {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Links that open an app. */
.brv-ap-linkcell {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-ap-opens {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brv-ap-opens__app {
  font-size: 13px;
}

.brv-ap-opens__path {
  overflow: hidden;
  font-size: 12px;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-ap-more {
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* How a deep link answers: three lanes, each a small picture. */
.brv-ap-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.brv-ap-lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.brv-ap-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-ap-mock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 120px;
  padding: 10px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
}

.brv-ap-mock--code {
  align-items: stretch;
  height: auto;
  min-height: 120px;
}

.brv-ap-code {
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

.brv-ap-mock__title {
  font-family: var(--font-family-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-ap-mock__btn {
  display: grid;
  place-items: center;
  width: 150px;
  max-width: 100%;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
}

.brv-ap-mock__btn--main {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-ap-mock__to {
  font-size: 12px;
  color: var(--color-text-muted);
}

.brv-ap-caption {
  font-size: 12px;
  color: var(--color-text-muted);
}

@media (max-width: 1023.98px) {
  .brv-ap-lanes {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1279.98px) {
  .brv-ap-kv {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .brv-ap-platforms {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-ap-row {
    flex-wrap: wrap;
  }

  .brv-ap-row > .brv-ap-acts {
    flex-wrap: wrap;
  }
}


/* ══ Section 6 · Audit log ═════════════════════════════════════════════════════════ */
/* ── D · Audit log (/audit, /audit/:id:) ─────────────────────────────────
   The AuditLog board: the list with its date-range chip, the rows (time
   over day, avatar + name + address, module muted + verb, record type
   over name), the keyset foot, the note; the entry as a 480px drawer
   from the right on wide screens and as a page below 1280px. Tokens
   only; unlayered, like console-v3.css. */

.brv-al {
  gap: 16px;
}

/* ── The toolbar: one date-range control over from / to ──────────────── */

.brv-al-range {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  font-size: 13px;
  white-space: nowrap;
}

.brv-al-range--set {
  border-style: solid;
  border-color: var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.brv-al-range__box {
  display: contents;
}

.brv-al-range__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  border-radius: var(--radius-full);
  list-style: none;
  cursor: pointer;
}

.brv-al-range__chip::-webkit-details-marker {
  display: none;
}

.brv-al-range--set .brv-al-range__chip {
  padding-right: 4px;
}

.brv-al-range__chip > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-al-range__chip:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-al-range__clear {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0 6px 0 2px;
  border-radius: var(--radius-full);
  color: var(--color-text-subtle);
}

.brv-al-range__clear:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.brv-al-range__pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  display: grid;
  gap: 12px;
  width: 300px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  color: var(--color-text);
  white-space: normal;
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

/* Where the chip sits in the left half (a wrapped toolbar), the panel
   opens rightwards from it (app JS sets the class). */
.brv-al-range--start .brv-al-range__pop {
  right: auto;
  left: 0;
}

.brv-al-range__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.brv-al-range__preset {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: 12.5px;
  text-decoration: none;
}

.brv-al-range__preset:hover {
  background: var(--color-surface-alt);
}

.brv-al-range__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.brv-al-range__field {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-al-range__field > .input {
  width: 100%;
  min-width: 0;
}

.brv-al-range__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brv-al-range__hint {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* ── The table ───────────────────────────────────────────────────────── */

.js .brv-al-region tbody tr.data-table__row {
  cursor: pointer;
}

.brv-al-when {
  display: grid;
  gap: 1px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brv-al-when__d {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.data-table__row--selected .brv-al-when__t {
  font-weight: 600;
}

.brv-al-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.avatar.brv-al-av {
  flex: none;
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.avatar.brv-al-av--ink {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-al-who__text {
  display: grid;
  min-width: 0;
}

.brv-al-who__name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-al-who__sub {
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-al-mono {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
}

.brv-al-what {
  white-space: nowrap;
}

.brv-al-what__mod {
  color: var(--color-text-muted);
}

.brv-al-what__verb {
  font-weight: 500;
  color: var(--color-text);
}

.data-table__row--selected .brv-al-what__verb {
  font-weight: 600;
}

.brv-al-rec {
  display: grid;
  min-width: 0;
}

.brv-al-rec__type {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-al-rec__name {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A short link is always whole (PHASE1 G2): never cut short. */
.brv-al-rec > .brv-sl,
.brv-al-rec > .brv-al-rec__name.brv-al-mono {
  overflow: visible;
  font-size: 12.5px;
  text-overflow: clip;
}

.brv-al-rec__id,
.brv-al-rec__none {
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

/* A record deleted since the entry: its recorded name, marked. */
.brv-al-rec__gone {
  font-weight: 400;
  color: var(--color-text-subtle);
}

.brv-al-org {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
}

td.data-table__actions > .brv-al-open {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  color: var(--color-text-subtle);
}

td.data-table__actions > .brv-al-open:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.data-table__row--selected td.data-table__actions > .brv-al-open {
  color: var(--color-accent);
}

/* The foot: what the page holds, then Newer · Older on the keyset. */
.brv-al-pager {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-al-pager__nav {
  display: inline-flex;
  gap: 6px;
}

.brv-al-pager__nav > .btn[disabled] {
  opacity: 0.5;
}

/* The note under the table: two lines. */
.brv-al-note .alert__text {
  display: grid;
  gap: 2px;
}

.brv-al-note strong {
  font-weight: 600;
  color: var(--color-text);
}

/* ── The entry: a drawer from the right (a modal <dialog>) ───────────── */

dialog.brv-al-entry {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 40;
  box-sizing: border-box;
  width: min(480px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  color: var(--color-text);
}

dialog.brv-al-entry[open] {
  display: flex;
  flex-direction: column;
  animation: m-drawer var(--brv-dur-base) var(--brv-ease-out) backwards;
}

dialog.brv-al-entry::backdrop {
  background: var(--color-overlay);
  animation: m-fade var(--brv-dur-base) ease-out backwards;
}

.brv-al-entry__head {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-al-entry__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-al-over {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-al-entry__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.brv-al-entry__title .brv-al-what__mod {
  font-weight: 600;
}

.brv-al-entry__when {
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-al-entry__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.brv-al-entry__foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
}

.brv-al-entry__steps {
  display: inline-flex;
  gap: 4px;
}

.brv-al-entry__steps > .btn[disabled] {
  opacity: 0.4;
}

/* ── The entry's body: the facts, what changed, as recorded ──────────── */

.brv-c-kv.brv-al-kv {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
}

.brv-al-kv dd {
  min-width: 0;
  margin: 0;
}

.brv-al-kv__who,
.brv-al-kv__rec {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* "Only what Asha did" sits under the name, past the avatar. */
.brv-al-only {
  margin-left: 34px;
  font-size: 12px;
  color: var(--color-accent);
  text-decoration: none;
}

.brv-al-only:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-al-kv__name {
  overflow-wrap: anywhere;
}

/* A record that is not a short link opens as text, teal on hover. */
.brv-al-link {
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}

.brv-al-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-al-kv__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
  overflow-wrap: anywhere;
}

.brv-al-kv__code {
  padding-top: 2px;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.brv-al-kv__entry {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 12px;
}

.brv-al-kv__entry > .brv-al-mono {
  overflow-wrap: anywhere;
}

.brv-al-copy {
  flex: none;
  position: relative;
  width: 26px;
  height: 26px;
}

.brv-al-copy .brv-copy__idle,
.brv-al-copy .brv-copy__done {
  display: inline-grid;
  place-items: center;
}

.brv-al-copy .brv-copy__done,
.brv-al-copy.is-copied .brv-copy__idle {
  display: none;
}

.brv-al-copy.is-copied .brv-copy__done {
  display: inline-grid;
}

.brv-al-sec {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.brv-al-sec__note {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-al-diff {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-al-diff__label {
  padding: 7px 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.brv-al-diff__row {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  font-family: var(--font-family-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.brv-al-diff__row + .brv-al-diff__row {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-al-diff__row--from {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-al-diff__row--to {
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-al-diff__sign {
  flex: none;
}

.brv-al-diff__none {
  font-family: var(--font-family-base);
  font-style: italic;
  opacity: 0.8;
}

.brv-al-diff__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
}

.brv-al-diff__items > li {
  padding: 1px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 12.5px;
}

.brv-al-code {
  max-height: 320px;
  margin: 0;
  padding: 10px 12px;
  overflow: auto;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
}

.brv-al-code > code {
  font: inherit;
}

/* ── The entry as a page (below 1280px, or without JavaScript) ───────── */

.brv-al-page__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
}

.brv-al-page__foot {
  display: flex;
  justify-content: flex-end;
}


/* ══ Section 6 · Data and deletion ═════════════════════════════════════════════════ */
/* ── Section 6 §E · Data and deletion (/organisation/delete) ─────────── */
/* design/v3/S6-developers-security.md §E; the canvas's DataDeletion
   board. Tokens only, unlayered like the rest of the v3 layer. The
   page's panels are `brv-c-panel`s; what is its own is `brv-dd-*`. */

.brv-dd {
  gap: 16px;
}

.brv-dd-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-dd-over--danger {
  color: var(--color-danger);
}

.brv-dd-mono {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

/* ── Export your data: two file cards ──────────────────────────────── */

.brv-dd-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brv-dd-file {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-dd-file__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brv-dd-file__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--color-accent-strong);
}

.brv-dd-file__name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-dd-file__title {
  font-size: 13px;
  font-weight: 600;
}

.brv-dd-file__path {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-dd-file__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The CSV's columns, as the export writes them. */
.brv-dd-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-dd-cols > li {
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-family: var(--font-family-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.brv-dd-file__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.brv-dd-file__meta {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-dd-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-dd-foot > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.brv-dd-foot > a > .brv-i {
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-dd-foot > a:hover > .brv-i {
  transform: translateX(2px);
}

/* ── Delete <Org> ──────────────────────────────────────────────────── */

.brv-dd-danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.brv-dd-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-dd-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Today → the grace → the day: three steps, the lines between them
   taking what the steps leave. */
.brv-dd-when {
  display: grid;
  grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-dd-when__step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-dd-when__line {
  height: 2px;
  border-radius: 2px;
  background: var(--color-border-strong);
}

.brv-dd-when__title {
  font-size: 13px;
  font-weight: 600;
}

.brv-dd-when__meta {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-dd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: start;
  gap: 24px;
}

.brv-dd-what {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.brv-dd-effects {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-dd-effect {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.5;
}

.brv-dd-effect > .brv-c-attn {
  margin-top: 1px;
}

.brv-dd-effect__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.brv-dd-effect strong {
  font-weight: 600;
}

.brv-dd-what > .alert {
  margin: 2px 0 0;
}

/* Confirm it's you (or, for anyone else, who to ask). */
.brv-dd-confirm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-dd-confirm > .form-field {
  margin: 0;
}

.brv-dd-confirm__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brv-dd-confirm__title {
  font-size: 13px;
  font-weight: 600;
}

.brv-dd-confirm__sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-dd-confirm__note {
  margin: 0;
  font-size: 12px;
  text-align: center;
  color: var(--color-text-subtle);
  overflow-wrap: anywhere;
}

/* The one irreversible action: solid red, the width of its box. */
.brv-dd-go.btn--danger,
.brv-dd-go.btn--danger:hover {
  width: 100%;
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-danger-contrast);
}

.brv-dd-go.btn--danger:hover {
  filter: brightness(0.92);
}

/* ── While a deletion is pending ───────────────────────────────────── */

.brv-dd-pending__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}

.brv-dd-pending__lead {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1 1 360px;
  min-width: 0;
}

.brv-dd-pending__icon {
  width: 36px;
  height: 36px;
}

.brv-dd-pending__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-dd-pending__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}

.brv-dd-pending__who {
  max-width: 260px;
  text-wrap: balance;
  font-size: 12.5px;
  text-align: right;
  color: var(--color-text-subtle);
}

/* The countdown: a stat value, its unit in the base font. */
.brv-dd-count {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) backwards;
}

.brv-dd-count__unit {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

/* The status timeline (the kit's timeline, the design's tones). */
.brv-dd-timeline .timeline__marker {
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-dd-step--accent .timeline__marker {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-dd-step--danger .timeline__marker {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-dd-timeline .timeline__line {
  width: 1px;
}

.brv-dd-timeline .timeline__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-dd-timeline .timeline__meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

/* ── Narrower ──────────────────────────────────────────────────────── */

/* The confirm box moves under what goes once the column is too narrow
   for both (the rail and the hub's sub-navigation take their share). */
@media (max-width: 1279.98px) {
  .brv-dd-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-dd-confirm {
    max-width: 420px;
  }
}

@media (max-width: 767.98px) {
  .brv-dd-files,
  .brv-dd-when {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-dd-when__line {
    display: none;
  }

  .brv-dd-confirm {
    max-width: none;
  }

  .brv-dd-pending__side {
    align-items: flex-start;
  }

  .brv-dd-pending__who {
    text-align: left;
  }
}

/* ══ Section 7 · Plan & usage (a paid plan, Free) and the Billing role's Overview ══ */
/* design/v3/S7-billing.md §A, §B, §E; the canvas's Billing, FreeBilling
   and BillingRole boards. Tokens only, unlayered like the rest of the v3
   layer. Behaviour: console-v3.js (the extras steppers). */

/* ── shared pieces ─────────────────────────────────────────────────────── */

.brv-bl-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-bl-mono {
  font-family: var(--font-family-mono);
  font-size: 0.95em;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/* An action the payment processor would take while none is set up: the
   button disabled, its reason the wrapper's title (a disabled button
   shows no tooltip of its own in every browser). */
.brv-bl-off {
  display: inline-flex;
  cursor: not-allowed;
}

/* The board draws it as the button it would be, faded (kit.css `bil-off`),
   rather than the kit's grey disabled fill. */
.brv-bl-off > .btn:disabled,
.brv-bl-off > .btn:disabled:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
  opacity: 0.45;
  pointer-events: none;
}

.brv-bl-off > .btn--ghost:disabled,
.brv-bl-off > .btn--ghost:disabled:hover {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}

.brv-bl-off > .btn--danger:disabled,
.brv-bl-off > .btn--danger:disabled:hover {
  color: var(--color-danger);
}

.brv-bl-resets {
  gap: 5px;
  flex: none;
}

/* ── §A.2 · the top strip: plan, this period, credits ─────────────────── */

.brv-bl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
}

.brv-bl-hero__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
}

.brv-bl-hero__cell + .brv-bl-hero__cell {
  border-left: 1px solid var(--color-border-subtle);
}

.brv-bl-hero__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.brv-bl-hero__plan {
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.brv-bl-hero__line {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-bl-hero__line strong {
  color: var(--color-text);
  font-weight: 600;
}

/* A scheduled change or cancellation, with the way to undo it. */
.brv-bl-hero__change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-warning-soft-text);
}

.brv-bl-hero__change > .brv-i {
  flex: none;
}

.brv-bl-hero__change > .brv-c-inline-form,
.brv-bl-hero__change > .brv-bl-off {
  margin-left: 2px;
}

.brv-bl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.brv-bl-hero__big {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.brv-bl-hero__num {
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.brv-bl-hero__unit {
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-bl-hero__cell > .brv-bl-elapsed {
  margin: 4px 0;
}

.brv-bl-hero__sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-bl-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 13px;
}

.brv-bl-hero__link > .brv-i {
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-bl-hero__link:hover > .brv-i {
  transform: translateX(2px);
}

/* The period's elapsed share is time, not a limit: never amber. */
.brv-bl-elapsed .brv-c-meter__fill {
  fill: var(--color-accent);
}

/* ── §A.3 · usage rows (the Billing role's Overview draws the same) ───── */

.brv-bl-usage {
  padding-bottom: 4px;
}

.brv-bl-group {
  padding: 14px 16px 6px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-bl-group:first-child {
  border-top: 0;
}

.brv-bl-urow {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr) 150px 176px;
  gap: 16px;
  align-items: center;
  padding: 11px 16px;
  font-size: 13.5px;
}

.brv-bl-urow + .brv-bl-urow {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-bl-urow__label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 500;
}

.brv-bl-urow__label > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-bl-urow__note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-bl-urow__val {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.brv-bl-urow__val strong {
  font-weight: 600;
}

.brv-bl-urow__of {
  color: var(--color-text-subtle);
}

.brv-bl-urow__over {
  font-size: 12.5px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* The Billing role's Overview: a narrower label column. */
.brv-br-grid .brv-bl-urow {
  grid-template-columns: 184px minmax(0, 1fr) 132px 168px;
}

/* ── §A.4 · plans ─────────────────────────────────────────────────────── */

.brv-bl-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.brv-bl-plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-bl-plan:nth-child(2) {
  animation-delay: 25ms;
}

.brv-bl-plan:nth-child(n + 3) {
  animation-delay: 50ms;
}

/* The current plan: tinted, with the accent hairline (no shadow). */
.brv-bl-plan--current {
  border-color: var(--color-accent);
  background: var(--accent-tint);
}

.brv-bl-plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.brv-bl-plan__name {
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brv-bl-plan__price {
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.brv-bl-plan__price small {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-bl-feats {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.brv-bl-feat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.brv-bl-feat > .brv-i {
  flex: none;
  margin-top: 3px;
  color: var(--color-accent);
}

.brv-bl-feat--off,
.brv-bl-feat--off > .brv-i {
  color: var(--color-text-subtle);
}

/* What moving there would do to this organisation. */
.brv-bl-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-bl-note > .brv-i {
  flex: none;
  margin-top: 1px;
}

.brv-bl-note--warning {
  border-color: transparent;
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-bl-plan__act {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}

.brv-bl-plan__when {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-subtle);
}

.brv-bl-plan__renews {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-bl-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-bl-rule {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-bl-rule strong {
  font-weight: 600;
  color: var(--color-text);
}

.brv-bl-plans__foot {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* ── §A.2/§A.4 · a subscription that keeps the price it was sold at ──── */

/* "You pay $X a month, the price when you subscribed…" and, when the
   current price is lower, its "Switch to" button. */
.brv-bl-sold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.45;
}

.brv-bl-sold > span {
  flex: 1 1 240px;
  min-width: 0;
}

/* "Your price $X" beside a plan's current price. */
.brv-bl-yours {
  margin-left: 8px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── §A.5 · extras ────────────────────────────────────────────────────── */

.brv-bl-extras > form {
  display: contents;
}

.brv-bl-extras > form > .alert,
.brv-bl-extras > .alert {
  margin: 16px 16px 0;
}

.brv-bl-xrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px 170px;
  gap: 20px;
  align-items: center;
  padding: 14px 16px;
}

.brv-bl-xrow + .brv-bl-xrow {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-bl-xrow__what {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.brv-bl-xrow__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-bl-xrow__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.brv-bl-xrow__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-bl-xrow__paused {
  font-size: 12px;
  color: var(--color-warning-soft-text);
}

.brv-bl-xrow__qty {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-bl-xrow__price {
  text-align: right;
  font-size: 13px;
  color: var(--color-text-subtle);
}

/* The stepper: − value +, one control. */
.brv-bl-step {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  height: 34px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--brv-dur-quick), box-shadow var(--brv-dur-quick);
}

.brv-bl-step:focus-within,
.brv-bl-step.is-changed {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
}

.brv-bl-step__btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.brv-bl-step__btn:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.brv-bl-step__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.brv-bl-step__v {
  width: 44px;
  height: 32px;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.brv-bl-step__v::-webkit-outer-spin-button,
.brv-bl-step__v::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.brv-bl-step__v:focus {
  outline: none;
}

/* What a change costs, before it is saved. */
.brv-bl-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 16px 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  font-size: 13.5px;
}

.brv-bl-preview:not([hidden]) {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-bl-preview--short {
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-bl-preview__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-bl-preview__text strong {
  font-weight: 600;
}

.brv-bl-preview__late {
  font-size: 12px;
  color: var(--color-text-muted);
}

.brv-bl-xfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-bl-xfoot > span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.brv-bl-xfoot__actions {
  display: flex;
  flex: none;
  gap: 8px;
}

/* ── §A.6 · payments, §A.7 · cancel ───────────────────────────────────── */

.brv-bl-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.brv-bl-duo--one {
  grid-template-columns: minmax(0, 1fr);
}

.brv-bl-empty {
  padding: 24px 20px;
}

.brv-bl-cancel--danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.brv-bl-cancel__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brv-bl-cancel__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ── §B · Free: this month's hard stops ───────────────────────────────── */

.brv-bl-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.brv-bl-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border-subtle);
  border-left: 1px solid var(--color-border-subtle);
}

.brv-bl-tile:nth-child(3n + 1) {
  border-left: 0;
}

.brv-bl-tile:nth-child(-n + 3) {
  border-top: 0;
}

.brv-bl-tile__v {
  font-family: var(--font-family-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.brv-bl-tile__v small {
  margin-left: 4px;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-bl-tile__v--off {
  font-size: 17px;
  color: var(--color-text-subtle);
}

.brv-bl-tile__note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-bl-tile__note--full {
  color: var(--color-warning-soft-text);
}

.brv-bl-tile--full .brv-c-meter--danger .brv-c-meter__fill {
  fill: var(--color-warning);
}

/* ── §B · Compare plans: the catalog, row by row ──────────────────────── */

.brv-bl-cmpscroll {
  overflow-x: auto;
  border-radius: inherit;
}

.brv-bl-cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
}

.brv-bl-cmp th,
.brv-bl-cmp td {
  padding: 9px 14px;
  border-top: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: middle;
  font-weight: 400;
}

.brv-bl-cmp tbody th[scope="row"] {
  width: 34%;
  color: var(--color-text-muted);
}

.brv-bl-cmp thead th {
  padding: 16px 14px 14px;
  border-top: 0;
  vertical-align: top;
}

.brv-bl-cmp thead th:first-child {
  width: 34%;
}

.brv-bl-cmp__intro,
.brv-bl-cmp__plan {
  display: table-cell;
}

.brv-bl-cmp__intro > span,
.brv-bl-cmp__plan > * {
  display: block;
}

.brv-bl-cmp__intro > * + *,
.brv-bl-cmp__plan > * + * {
  margin-top: 6px;
}

.brv-bl-cmp__lede {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-bl-cmp__plan > .brv-bl-cmp__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brv-bl-cmp__price {
  font-family: var(--font-family-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.brv-bl-cmp__price small {
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-bl-cmp__plan > .btn,
.brv-bl-cmp__plan > .brv-bl-off {
  display: inline-flex;
}

.brv-bl-cmp__when {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-subtle);
}

.brv-bl-cmp__cur {
  background: var(--accent-tint);
}

.brv-bl-cmp__grp th {
  padding: 8px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

.brv-bl-cmp__yes,
.brv-bl-cmp__no {
  display: inline-flex;
  vertical-align: middle;
}

.brv-bl-cmp__yes {
  color: var(--color-accent);
}

.brv-bl-cmp__no {
  color: var(--color-text-subtle);
}

/* ── §B · When you upgrade, What Free cannot do ───────────────────────── */

.brv-bl-facts {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-bl-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
}

.brv-bl-fact + .brv-bl-fact {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-bl-fact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-bl-fact__text strong {
  font-weight: 600;
  color: var(--color-text);
}

/* ── §E · the Billing role's Overview ─────────────────────────────────── */

.brv-br-info {
  align-items: center;
}

.brv-br-info__title {
  font-weight: 600;
  color: var(--color-text);
}

.brv-br-avs {
  display: inline-flex;
  flex: none;
}

.brv-br-avs > .avatar {
  margin-left: -6px;
  box-shadow: 0 0 0 2px var(--color-surface-alt);
}

.brv-br-avs > .avatar:first-child {
  margin-left: 0;
}

.brv-br-av--owner {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

@media screen and (min-width: 1024px) {
  .brv-br-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.brv-br-stat .brv-c-fig__l > .brv-i {
  flex: none;
}

/* Monthly and bought credits, one bar. */
.brv-br-split {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.brv-br-split__track {
  fill: var(--color-surface-sunken);
}

.brv-br-split__bought {
  fill: var(--brv-series-2);
}

.brv-br-split__monthly {
  fill: var(--brv-series-1);
  transform-origin: left;
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) backwards;
}

.brv-br-more {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}

.brv-br-none {
  margin: 0;
  padding: 16px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-br-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-br-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.brv-br-item + .brv-br-item {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-br-item--top {
  align-items: flex-start;
}

.brv-br-item__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-br-item__title {
  font-size: 13.5px;
  font-weight: 600;
}

.brv-br-item__sub {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-br-item__mono {
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent);
}

.brv-br-amt {
  flex: none;
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-br-amt--plus {
  color: var(--color-success);
}

/* ── narrower windows ─────────────────────────────────────────────────── */

@media screen and (max-width: 1279.98px) {
  .brv-bl-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brv-bl-hero__cell--plan {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .brv-bl-hero__cell--plan + .brv-bl-hero__cell {
    border-left: 0;
  }

  .brv-bl-urow,
  .brv-br-grid .brv-bl-urow {
    grid-template-columns: 150px minmax(0, 1fr) 118px;
    gap: 6px 12px;
  }

  .brv-bl-urow__over {
    grid-column: 2 / -1;
    white-space: normal;
  }

  .brv-bl-rules {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .brv-bl-duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 767.98px) {
  .brv-bl-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-bl-hero__cell + .brv-bl-hero__cell {
    border-left: 0;
    border-top: 1px solid var(--color-border-subtle);
  }

  .brv-bl-urow,
  .brv-br-grid .brv-bl-urow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brv-bl-urow > .brv-c-meter,
  .brv-bl-urow__note,
  .brv-bl-urow__over {
    grid-column: 1 / -1;
  }

  .brv-bl-xrow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brv-bl-xrow__price {
    grid-column: 1 / -1;
    text-align: left;
  }

  .brv-bl-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brv-bl-tile:nth-child(n) {
    border-top: 1px solid var(--color-border-subtle);
    border-left: 1px solid var(--color-border-subtle);
  }

  .brv-bl-tile:nth-child(2n + 1) {
    border-left: 0;
  }

  .brv-bl-tile:nth-child(-n + 2) {
    border-top: 0;
  }
}

/* The boards' quiet links ("Credits and history", "All history", "Plan &
   usage") are accent text, underlined on hover. */
:is(.brv-bl-hero__link, .brv-br-more) {
  color: var(--color-accent);
  text-decoration: none;
}

:is(.brv-bl-hero__link, .brv-br-more):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A value's unit ("$99.99 a month") wraps whole, under the value. */
.brv-br-stat .brv-c-fig__v small {
  display: inline-block;
  white-space: nowrap;
}

.brv-bl-cmp__price small {
  white-space: nowrap;
}


/* ══ Section 7 · Credits and checkout ════════════════════════════════════════ */

/* ── §C · Credits (/credits) ───────────────────────────────────────────── */

/* An overline (kit.css `.b-over`), optionally led by its legend key. */
.brv-cr-over {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-cr-over > .brv-c-legend__key {
  margin: 0;
}

.brv-cr-muted {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* The balance: three cells split by subtle rules, then the spending order. */
.brv-cr-bal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
}

.brv-cr-bal__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
}

.brv-cr-bal__cell + .brv-cr-bal__cell {
  border-left: 1px solid var(--color-border-subtle);
}

.brv-cr-bal__big {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brv-cr-bal__n {
  font-family: var(--font-family-display);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.brv-cr-bal__unit {
  font-size: 14px;
  color: var(--color-text-muted);
}

.brv-cr-bal__cell--now .brv-c-split {
  height: 10px;
  margin-top: 6px;
}

.brv-c-legend.brv-cr-legend {
  margin-top: 2px;
  font-size: 12.5px;
}

.brv-cr-legend .brv-c-legend__key {
  margin-inline-end: 6px;
  vertical-align: -1px;
}

.brv-cr-bal__mid {
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.brv-cr-bal__mid small {
  margin-left: 4px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-cr-bal__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-cr-bal__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: none;
}

.brv-cr-bal__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A meter at its true share, in series 1 (monthly credits left). */
.brv-cr-fill {
  display: block;
  overflow: visible;
}

.brv-cr-fill__track {
  fill: var(--color-surface-sunken);
}

.brv-cr-fill__bar {
  fill: var(--brv-series-1);
  transform-box: fill-box;
  transform-origin: left;
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) both;
}

/* The bought lots: credits left of what each held, when it expires. */
.brv-cr-lots {
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.brv-cr-lot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 13px;
}

.brv-cr-lot__n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-cr-lot__n small {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-subtle);
}

.brv-cr-lot__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* The spending order: numbered steps with chevrons between. */
.brv-cr-order.brv-c-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-cr-order__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-cr-order__steps > li {
  display: inline-flex;
  align-items: center;
}

.brv-cr-order__sep {
  display: inline-flex;
  margin-right: 10px;
  color: var(--color-text-subtle);
}

.brv-cr-order__n {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
}

/* Prices, packs and this period's spending: two columns. */
.brv-cr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-5);
}

.brv-cr-stack {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* What costs credits: a dense table, the item over when it is charged. */
.brv-cr-prices .data-table__table td {
  height: 36px;
  padding-block: 7px;
  white-space: normal;
}

.brv-cr-item-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.brv-cr-item-cell__when {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-cr-price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-cr-foot.brv-c-panel__foot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
}

.brv-cr-foot > .brv-i,
.brv-cr-foot > svg {
  flex: none;
  margin-top: 2px;
}

.brv-cr-foot strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Buy credits: one row per pack (kit.css `.b-list__item`). */
.brv-cr-packlist {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-cr-pack {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.brv-cr-pack + .brv-cr-pack {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-cr-pack:hover {
  background: var(--color-surface-alt);
}

.brv-cr-pack__what {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  font-size: 13.5px;
}

.brv-cr-pack__what strong {
  font-weight: 600;
}

.brv-cr-pack__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-cr-pack__price {
  font-family: var(--font-family-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.brv-cr-packs > .brv-c-panel__foot,
.brv-cr-history__foot {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-cr .brv-c-panel__foot {
  justify-content: flex-start;
  text-align: left;
}

/* Spent this period: the total in the head, the items as share bars. */
.brv-cr-spent__total {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-cr-spent .brv-c-panel__body {
  padding: 10px 12px;
}

.brv-cr-spent .brv-c-bars__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-cr-spent .brv-c-bars__label > svg {
  flex: none;
  color: var(--color-text-subtle);
}

/* History: the view's segments in the head, a timeline, the foot. */
.brv-cr-history__show {
  margin-left: auto;
}

.brv-cr-tl {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 16px 16px 2px;
  list-style: none;
}

.brv-cr-tl__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
}

.brv-cr-tl__item::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 2px;
  left: 11px;
  width: 1px;
  background: var(--color-border);
}

.brv-cr-tl__item:last-child::before {
  display: none;
}

.brv-cr-tl__dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-cr-tl__item--added .brv-cr-tl__dot {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-cr-tl__item--next .brv-cr-tl__dot {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

.brv-cr-tl__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-top: 1px;
}

.brv-cr-tl__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.brv-cr-tl__title {
  font-size: 13.5px;
  font-weight: 600;
}

.brv-cr-tl__about {
  overflow: hidden;
  font-size: 13px;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.brv-cr-tl__about {
  align-self: flex-start;
  max-width: 100%;
  text-decoration: none;
}

a.brv-cr-tl__about:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A short link: mono, accent, whole (G2). */
.brv-cr-sl {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-accent);
}

span.brv-cr-sl {
  color: var(--color-text-muted);
}

.brv-cr-tl__meta {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-cr-tl__amt {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-top: 1px;
}

.brv-cr-amt {
  font-family: var(--font-family-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.brv-cr-amt--plus {
  color: var(--color-success);
}

.brv-cr-amt--none {
  color: var(--color-text-subtle);
}

.brv-cr-tl__bal {
  font-size: 12px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-cr-pending {
  border: 1px dashed var(--color-border-strong);
  background: transparent;
  color: var(--color-text-subtle);
}

.brv-cr-history__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-cr-history__nav {
  display: inline-flex;
  gap: 8px;
}

@media screen and (max-width: 1279.98px) {
  .brv-cr-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media screen and (max-width: 767.98px) {
  .brv-cr-bal__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-cr-bal__cell + .brv-cr-bal__cell {
    border-top: 1px solid var(--color-border-subtle);
    border-left: 0;
  }

  .brv-cr-history__show {
    margin-left: 0;
  }
}

/* ── §D · Checkout (a modal from Buy, or a plan's move) ───────────────── */

.brv-co-off {
  align-items: center;
  padding: 10px 14px;
}

.brv-co-off::before {
  margin-top: 0;
}

.brv-co-off > .alert__body {
  flex: 1 1 auto;
  min-width: 0;
}

.brv-co-off .alert__title {
  display: inline;
}

.brv-co-off__action {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modal.brv-co {
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.modal.brv-co[open] {
  display: flex;
  flex-direction: column;
}

.brv-co > .modal__header {
  flex: none;
}

.brv-co__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-co__lede {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-co__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.brv-co__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Review → Pay: the kit's wizard steps (kit.css b-steps). */
.brv-co-steps {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-co-steps .wizard__step {
  flex: 0 0 auto;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-co-steps .wizard__step:not(:last-child)::after {
  width: 40px;
  min-width: 24px;
  height: 1px;
  margin-inline: 10px;
  background: var(--color-border);
}

.brv-co-steps .wizard__step-index {
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  font-size: 11.5px;
  font-weight: 600;
}

.brv-co-steps .wizard__step--active {
  font-weight: 600;
  color: var(--color-text);
}

.brv-co-steps .wizard__step--active .wizard__step-index {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
  color: var(--color-accent);
}

/* The order summary: hairline rows, the total on surface-alt. */
.brv-co-sum {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.brv-co-sum__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.brv-co-sum__row + .brv-co-sum__row {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-co-sum__disc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-co-sum__minus {
  color: var(--color-text-muted);
}

.brv-co-sum__total {
  align-items: center;
  background: var(--color-surface-alt);
}

.brv-co-sum__what {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-co-sum__what strong {
  font-weight: 600;
}

.brv-co-sum__note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-co-sum__pay {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 6px;
}

.brv-co-total {
  font-family: var(--font-family-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.brv-co-sum__cur {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* What happens after: three facts in one hairline box. */
.brv-co-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.brv-co-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
}

.brv-co-fact + .brv-co-fact {
  border-left: 1px solid var(--color-border-subtle);
}

.brv-co-fact__l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-co-fact__v {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-co-fact__s {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* The acknowledgement: an option card (kit.css `.b-option`), accent when ticked. */
.brv-co-consent > .choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.brv-co-consent > .choice:has(.choice__input:checked) {
  border-color: var(--color-accent);
  outline: 1px solid var(--color-accent);
}

.brv-co-consent .choice__input {
  margin-top: 2px;
}

.brv-co-consent .choice__label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brv-co-consent__text {
  font-size: 13.5px;
  line-height: 1.5;
}

.brv-co-consent__hint {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-co__foot {
  flex: none;
  align-items: center;
}

.brv-co__secure {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-co__secure > svg {
  flex: none;
}

@media screen and (max-width: 767.98px) {
  .brv-co-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-co-fact + .brv-co-fact {
    border-top: 1px solid var(--color-border-subtle);
    border-left: 0;
  }

  .brv-co__secure {
    flex-basis: 100%;
  }
}

/* ══ Every table: a numeric column's header sits over its figures ═══════ */
/* The kit's `.data-table__table th { text-align: start }` outranks
   `.data-table__num` on a header cell; this puts it back at the end. */
.data-table__table th.data-table__num {
  text-align: end;
}

/* ══ Section 8 · Platform overview ═════════════════════════════════════════════ */

/*
 * Console v3, Section 8 §A — the staff Overview (StaffOverview.dc.html):
 * the header's "As of", the organisations cell's badges, the chart's
 * tooltip and today's lighter column, "Needs attention" with its all-clear
 * checklist, the plan mix's split bar, the most clicked organisations with
 * the counted-clicks lines, and the recent organisations and people. It
 * builds on Section 2's Overview classes (`brv-c-ov-*`). Tokens only,
 * unlayered, low-specificity; phase 1's reduced-motion rule removes the
 * motion.
 */

/* ── The header: when the page was read, beside its one action ───────── */

.brv-so-asof {
  align-self: center;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

/* ── The stat strip ──────────────────────────────────────────────────── */

.brv-so-stat__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
}

.brv-so-stat__badges > .badge {
  height: 20px;
  padding-inline: 7px;
  font-size: 11.5px;
}

/* ── The chart: today still counting, and the day's tooltip ──────────── */

/* The last column is today: lighter, like the Analytics chart's. */
.brv-so-chart g.brv-c-chart__col:last-of-type {
  opacity: 0.5;
}

.brv-so-chart .brv-c-chart__col {
  cursor: default;
}

/* The tooltip console-v3.js draws from a column's three lines,
   as the board does; without the script a browser shows the title. */
.brv-so-tip {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text);
  white-space: nowrap;
  pointer-events: none;
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) both;
}

.brv-so-tip[hidden] {
  display: none;
}

.brv-so-tip__day {
  font-weight: 600;
}

.brv-so-tip__split {
  display: flex;
  gap: 14px;
  color: var(--color-text-muted);
}

.brv-so-tip__split > span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--brv-series-1);
  vertical-align: -1px;
}

.brv-so-tip__split > span + span::before {
  background: var(--brv-series-2);
}

.brv-so-tip__orgs {
  font-size: 11.5px;
  color: var(--color-text-subtle);
}

/* ── Needs attention ─────────────────────────────────────────────────── */

.brv-so-attn__list,
.brv-so-clear__list,
.brv-so-people {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-so-attn__item {
  --i: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--color-border-subtle);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 25ms + 100ms);
}

.brv-so-attn__item:first-child {
  border-top: 0;
}

.brv-so-attn__item:nth-child(2) { --i: 1; }
.brv-so-attn__item:nth-child(3) { --i: 2; }
.brv-so-attn__item:nth-child(n + 4) { --i: 3; }

.brv-so-attn__item:hover {
  background: var(--color-surface-alt);
}

.brv-so-attn__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.brv-so-attn__over {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-so-attn__title {
  font-size: 13.5px;
  font-weight: 500;
}

/* The short link on one line, ellipsed; its title holds it whole. */
.brv-so-attn__link {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-so-attn__what {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-so-attn__what > a {
  color: var(--color-accent);
  text-decoration: none;
}

.brv-so-attn__what > a:hover,
.brv-so-clear > a:hover,
.brv-so-foot a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-so-attn__item > .btn {
  flex: none;
}

/* The all-clear checklist: quiet rows, each with its queue. */
.brv-so-clear__head {
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-so-attn__list + .brv-so-clear__head {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-so-clear__list {
  padding-bottom: 10px;
}

.brv-so-clear {
  --i: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 25ms + 100ms);
}

.brv-so-clear:nth-child(2) { --i: 1; }
.brv-so-clear:nth-child(3) { --i: 2; }
.brv-so-clear:nth-child(4) { --i: 3; }
.brv-so-clear:nth-child(5) { --i: 4; }
.brv-so-clear:nth-child(n + 6) { --i: 5; }

.brv-so-clear > .brv-i {
  flex: none;
  color: var(--color-success);
}

.brv-so-clear > a {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--color-accent);
  text-decoration: none;
}

/* The rail's panel is the chart row's last: the checklist sits at the top
   and the foot at the bottom, whatever height the row gives it. */
.brv-so-attn {
  display: flex;
  flex-direction: column;
}

.brv-so-attn > .brv-so-foot {
  margin-top: auto;
}

/* A foot with a note on the left and a link on the right. */
.brv-so-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border-subtle);
  text-align: left;
}

.brv-so-foot a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

/* ── Three panels side by side ───────────────────────────────────────── */

.brv-so-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* The three share the row's height; a panel's foot keeps to its bottom. */
.brv-so-grid3 > .brv-c-panel {
  display: flex;
  flex-direction: column;
}

.brv-so-grid3 > .brv-c-panel > .brv-so-foot {
  margin-top: auto;
}

/* The organisation's mark (the sidebar's, smaller). */
.brv-so-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-family-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Plan mix: a split bar, then the plans ───────────────────────────── */

.brv-so-plans__bar {
  padding-bottom: 12px;
}

.brv-so-planbar {
  display: block;
  width: 100%;
  height: 10px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.brv-so-planbar__track {
  fill: var(--color-surface-sunken);
}

.brv-so-planbar__part {
  fill: var(--so-tone);
  transform-box: fill-box;
  transform-origin: left;
  animation: m-fill var(--brv-dur-slow) var(--brv-ease-out) backwards;
}

.brv-so-planbar__part:nth-of-type(3) { animation-delay: 80ms; }
.brv-so-planbar__part:nth-of-type(n + 4) { animation-delay: 160ms; }

/* A paid plan by its place among them; a free one neutral. */
.brv-so-tone--1 { --so-tone: var(--brv-series-1); }
.brv-so-tone--2 { --so-tone: var(--brv-series-2); }
.brv-so-tone--3 { --so-tone: var(--color-info); }
.brv-so-tone--4 { --so-tone: var(--color-accent-strong); }
.brv-so-tone--free { --so-tone: var(--color-border-strong); }

.brv-so-sw {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--so-tone);
}

/* The swatch beside the name's first line; a long name wraps, and a
   hidden plan's badge follows it. */
.brv-so-plan {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.brv-so-plan > .brv-so-sw {
  align-self: flex-start;
  margin-top: 0.3em;
}

.brv-so-plan__name {
  min-width: 0;
}

.brv-so-plan__name > .badge {
  height: 20px;
  margin-left: 6px;
  padding-inline: 7px;
  font-size: 11.5px;
  vertical-align: 1px;
}

/* Dense rows, and fixed columns: a long plan name (a hidden plan, with
   its badge) wraps rather than pushing the price out of the panel. */
.brv-so-plans__table .data-table__table {
  table-layout: fixed;
}

.brv-so-plans__table .data-table__table td {
  height: 36px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.brv-so-plans__table th:nth-child(2) {
  width: 116px;
}

.brv-so-plans__table th:nth-child(3) {
  width: 96px;
}

.brv-so-plans__table td:first-child {
  white-space: normal;
}


.brv-so-strong {
  font-weight: 600;
}

.brv-so-zero {
  color: var(--color-text-subtle);
}

/* ── Most clicked organisations ──────────────────────────────────────── */

/* The whole row opens the organisation's analytics: its label's link
   stretches over it. */
.brv-so-orgclicks .brv-c-bars__row {
  cursor: pointer;
}

.brv-so-rowlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.brv-so-rowlink::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.brv-so-rowlink:focus-visible {
  outline: none;
}

.brv-so-rowlink:focus-visible::after {
  outline: 2px solid var(--color-focus-ring, var(--color-accent));
  outline-offset: 1px;
}

/* The counted-clicks lines, under the bars. */
.brv-so-caps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.brv-so-cap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-so-cap__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.brv-so-cap__who {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-so-cap__n {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-so-cap--full .brv-so-cap__n {
  color: var(--color-danger);
}

.brv-so-caps__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

/* ── Recent organisations and people ─────────────────────────────────── */

.brv-so-org {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brv-so-org__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-so-org__name {
  overflow: hidden;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-so-org__name:hover {
  color: var(--color-accent);
}

.brv-so-org__code {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-subtle);
}

.brv-so-owner {
  font-size: 13px;
}

.brv-so-recent__table td {
  white-space: nowrap;
}

.brv-so-person {
  --i: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  animation-delay: calc(var(--i) * 25ms + 100ms);
}

.brv-so-person:first-child {
  border-top: 0;
}

.brv-so-person:nth-child(2) { --i: 1; }
.brv-so-person:nth-child(3) { --i: 2; }
.brv-so-person:nth-child(4) { --i: 3; }
.brv-so-person:nth-child(n + 5) { --i: 4; }

.brv-so-person:hover {
  background: var(--color-surface-alt);
}

.brv-so-person > .avatar {
  flex: none;
}

.brv-so-person__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.brv-so-person__name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-so-person__sub {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brv-so-person__on {
  flex: none;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* ── Narrower screens ────────────────────────────────────────────────── */

/* The recent organisations need the width: below 1280 the table takes the
   row and the people sit under it. */
@media screen and (max-width: 1279.98px) {
  .brv-so-grid--people {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Below 1024 the plan mix takes the row and the two bar lists share the
   next; a phone stacks them. */
@media screen and (max-width: 1023.98px) {
  .brv-so-grid3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brv-so-grid3 > .brv-so-plans {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 767.98px) {
  .brv-so-grid3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .brv-so-asof {
    display: none;
  }
}


/* ══ Section 8 · Flagged links, abuse reports, staff-only link panels ══════════ */

/* ══ Section 8 B · C · H — Flagged links, Abuse reports, the link page's
   staff panels (design/v3/S8-staff-safety-customers.md; the canvas's
   StaffReviews, StaffAbuse and StaffViewingAs boards). Tokens only; no
   shadow on a panel (the decide modal overlays, so it keeps the kit's).
   Breakpoints: 1280 (the case beside the queue), 1024, 768. ══════════ */

/* ── The queue and the case: one swap region ────────────────────────── */

.brv-sf-md {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.brv-sf-md > .alert {
  grid-column: 1 / -1;
}

.brv-sf-side,
.brv-sf-main,
.brv-sf-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.brv-sf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-sf-back:hover {
  color: var(--color-text);
}

/* Below 1280px the case takes the region alone (its own page, with a way
   back); with no case open there is nothing to its right. */
.brv-sf-md--case > .brv-sf-side,
.brv-sf-md:not(.brv-sf-md--case) > .brv-sf-main {
  display: none;
}

@media (min-width: 1280px) {
  .brv-sf-md {
    grid-template-columns: 384px minmax(0, 1fr);
  }

  .brv-sf-md--case > .brv-sf-side,
  .brv-sf-md:not(.brv-sf-md--case) > .brv-sf-main {
    display: flex;
  }

  .brv-sf-back {
    display: none;
  }
}


.brv-sf-main > * {
  animation: m-fade var(--brv-dur-base) var(--brv-ease-out) backwards;
}

/* The words a count sits in, in a header button ("Abuse reports 3 open"). */
.brv-sf-count {
  margin-inline-start: 2px;
}

/* Before a case is picked (wide screens only). */
.brv-sf-prompt {
  display: grid;
  place-items: center;
  min-height: 280px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

.brv-sf-prompt > * {
  border: 0;
  background: transparent;
}

/* ── The queue ──────────────────────────────────────────────────────── */

.brv-sf-queue {
  overflow: hidden;
}

.brv-sf-tools {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-sf-search,
.brv-sf-search .input {
  width: 100%;
}

.brv-sf-tools .segmented {
  display: flex;
  width: 100%;
}

.brv-sf-tools .segmented__item {
  flex: 1 1 0;
  min-width: 0;
}

.brv-sf-tools .segmented__label {
  justify-content: center;
  width: 100%;
  padding-inline: 6px;
}

.brv-sf-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 8px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sf-groups > .brv-sf-group:first-child {
  border-top: 0;
}

.brv-sf-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-sf-group__n {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.brv-sf-none {
  margin: 0;
  padding: 2px 16px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

/* A row: the short link and its age, the destination, the chips. The
   selected one is tinted with a 3px accent edge. */
.brv-sf-case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--brv-dur-quick);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-sf-case::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: transparent;
}

.brv-sf-case:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}

.brv-sf-case:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.brv-sf-case--on,
.brv-sf-case--on:hover {
  background: var(--accent-tint);
}

.brv-sf-case--on::before {
  background: var(--color-accent);
}

.brv-sf-case--done {
  opacity: 0.85;
}

.brv-sf-case__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.brv-sf-case__tags {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.brv-sf-case__age {
  flex: none;
  font-size: 12px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.brv-sf-case__dest {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-sf-case__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-sf-case__org {
  overflow: hidden;
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-sf-chip {
  font-size: 11.5px;
}

.brv-sf-queue__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sf-queue__pages {
  display: flex;
  justify-content: center;
  padding: 8px 16px 12px;
}

/* How a flag / a report works: a quiet panel of four rules — a solid
   hairline like any panel (a dashed edge is for empty states only). */
.brv-sf-rules {
  background: transparent;
}

.brv-sf-rules .brv-c-panel__head {
  min-height: 44px;
}

.brv-sf-rules .brv-c-panel__title {
  font-size: 14.5px;
}

.brv-sf-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-sf-points li {
  display: flex;
  gap: 10px;
}

.brv-sf-points .brv-i {
  flex: none;
  margin-top: 3px;
  color: var(--color-accent);
}

/* ── Short links, references, small type ───────────────────────────── */

.brv-sf-sl {
  overflow-wrap: anywhere;
  white-space: normal;
}

.brv-sf-sl__d {
  opacity: 0.72;
}

.brv-sf-sl--lg {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.brv-sf-ref {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brv-sf-refbig {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.brv-sf-mono {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-sf-muted {
  color: var(--color-text-muted);
}

.brv-sf-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.brv-sf-trunc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-sf-more {
  font-size: 13px;
}

.brv-sf-more-rows {
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

/* The organisation's two-letter mark. */
.brv-sf-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  font-family: var(--font-family-display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.brv-sf-org {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-sf-alert {
  font-size: 12.5px;
}

.brv-sf-alert .alert__text {
  font-size: inherit;
}

/* ── The case's head ────────────────────────────────────────────────── */

.brv-sf-head__top {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
}

.brv-sf-head__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.brv-sf-head__acts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-sf-head__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.brv-sf-head__dest {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-sf-head__dest > .brv-i {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-sf-head__dest > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-sf-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-sf-head__facts {
  padding: 16px 20px 18px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sf-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 24px;
}

@media (min-width: 768px) {
  .brv-sf-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.brv-sf-kv {
  grid-template-columns: 116px minmax(0, 1fr);
  align-items: start;
}

.brv-sf-kv dd {
  min-width: 0;
  margin: 0;
}

.brv-sf-kvnote {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

/* Where the verdict came from: a read-only segmented row, the decider filled. */
.brv-sf-src {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.brv-sf-src__item {
  padding: 0 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-subtle);
}

.brv-sf-src__item--on {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

/* ── Two panels side by side ───────────────────────────────────────── */

.brv-sf-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 1024px) {
  .brv-sf-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The destination's history (kit.css b-timeline). */
.brv-sf-tl {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-sf-tl__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-sf-tl__item::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 2px;
  left: 11px;
  width: 1px;
  background: var(--color-border);
}

.brv-sf-tl__item:last-child {
  padding-bottom: 0;
}

.brv-sf-tl__item:last-child::before {
  display: none;
}

.brv-sf-tl__dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-sf-tl__dot--accent {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-sf-tl__dot--danger {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-sf-tl__dot--success {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-sf-tl__dot--warning {
  border-color: transparent;
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-sf-tl__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.brv-sf-tl__title {
  font-size: 13px;
  font-weight: 600;
}

.brv-sf-tl__detail {
  overflow: hidden;
  font-size: 12px;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-sf-tl__when {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* Links to this destination: a dense table. */
.brv-sf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.brv-sf-table th {
  height: 36px;
  padding: 0 16px;
  background: var(--color-surface-alt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-align: start;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-sf-table td {
  padding: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.brv-sf-table .brv-sf-num {
  font-variant-numeric: tabular-nums;
  text-align: end;
  white-space: nowrap;
}

.brv-sf-table td.brv-sf-num {
  font-weight: 600;
}

.brv-sf-sel td {
  background: var(--accent-tint);
}

.brv-sf-cell {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.brv-sf-cell .brv-sf-sl {
  font-size: 12.5px;
}

.brv-sf-cell__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-sf-links__note {
  border-top: 1px solid var(--color-border-subtle);
}

/* A report's own words. */
.brv-sf-quote {
  margin: 0;
  padding: 8px 12px;
  border-inline-start: 2px solid var(--color-border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--color-surface-alt);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Open on this link: a list, the report being read tinted. */
.brv-sf-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-sf-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sf-list__item:first-child {
  border-top: 0;
}

.brv-sf-list__item--on {
  background: var(--accent-tint);
}

.brv-sf-list__main {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.brv-sf-list__sub {
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* ── Deciding ───────────────────────────────────────────────────────── */

.brv-sf-decide {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brv-sf-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 768px) {
  .brv-sf-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* A radio card (kit.css b-option): accent when chosen. */
.brv-sf-option {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--brv-dur-quick) var(--brv-ease-out),
    background-color var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-sf-option__main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.brv-sf-option--off .brv-sf-option__main {
  cursor: default;
}

.brv-sf-option:hover {
  border-color: var(--color-border-control);
}

.brv-sf-option:has(.brv-sf-option__input:checked) {
  border-color: var(--color-accent);
  background: var(--accent-tint);
}

.brv-sf-option:has(.brv-sf-option__input:focus-visible) {
  outline: 3px solid var(--accent-tint-strong);
  outline-offset: 0;
}

.brv-sf-option--off {
  opacity: 0.6;
}

.brv-sf-option--off:hover {
  border-color: var(--color-border);
}

.brv-sf-option__input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--color-accent);
}

.brv-sf-option__body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brv-sf-option__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-sf-option__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-sf-option__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-sf-option__extra {
  display: grid;
  gap: 4px;
  margin-inline-start: 28px;
}

.brv-sf-option__label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.brv-sf-reason .textarea {
  min-height: 76px;
  resize: vertical;
}

.brv-sf-decide__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sf-decide__lines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-width: 0;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-sf-decide__line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-sf-decide__acts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-inline-start: auto;
}

/* The foot follows the choice: its lines and ONE submit, labelled for it.
   The server marks a preset choice (`data-sf-choice`) and the script keeps
   it in step; with neither, `:has()` reads the radios. Without either,
   every line and button shows, each saying what it does. */
.brv-sf-decide__pick {
  display: none;
}

@supports selector(:has(*)) {
  .brv-sf-decide:not([data-sf-choice]):not(:has(.brv-sf-option__input:checked)) [data-sf-for] {
    display: none;
  }

  .brv-sf-decide:not([data-sf-choice]):not(:has(.brv-sf-option__input:checked)) .brv-sf-decide__pick {
    display: inline-flex;
  }

  .brv-sf-decide:not([data-sf-choice]):has(.brv-sf-option__input:checked) [data-sf-for] {
    display: none;
  }

  .brv-sf-decide:not([data-sf-choice]):has(.brv-sf-option__input[value="lift"]:checked) [data-sf-for="lift"],
  .brv-sf-decide:not([data-sf-choice]):has(.brv-sf-option__input[value="keep"]:checked) [data-sf-for="keep"],
  .brv-sf-decide:not([data-sf-choice]):has(.brv-sf-option__input[value="flag"]:checked) [data-sf-for="flag"],
  .brv-sf-decide:not([data-sf-choice]):has(.brv-sf-option__input[value="dismiss"]:checked) [data-sf-for="dismiss"] {
    display: inline-flex;
  }
}

.brv-sf-decide[data-sf-choice] [data-sf-for] {
  display: none;
}

.brv-sf-decide[data-sf-choice=""] .brv-sf-decide__pick,
.brv-sf-decide[data-sf-choice="lift"] [data-sf-for="lift"],
.brv-sf-decide[data-sf-choice="keep"] [data-sf-for="keep"],
.brv-sf-decide[data-sf-choice="flag"] [data-sf-for="flag"],
.brv-sf-decide[data-sf-choice="dismiss"] [data-sf-for="dismiss"] {
  display: inline-flex;
}

/* A danger button that confirms (Keep it flagged, Flag the destination): solid. */
.btn--danger.brv-sf-solid {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-danger-contrast);
}

.btn--danger.brv-sf-solid:hover {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-danger-contrast);
  filter: brightness(0.92);
}

/* ── §H · the link page's staff panels ─────────────────────────────── */

.brv-sf-staffonly {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.brv-sf-staff {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-sf-staff > .brv-c-panel__head {
  align-items: flex-start;
  justify-content: space-between;
}

.brv-sf-staff__heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.brv-sf-staff__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 32px;
}

@media (min-width: 1024px) {
  .brv-sf-staff__body {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.brv-sf-staff__text {
  display: grid;
  align-content: start;
  gap: 10px;
}

.brv-sf-staff__text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}

.brv-sf-staff__foot,
.brv-sf-rail__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sf-staff__acts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brv-sf-rail > .brv-c-panel__head {
  justify-content: space-between;
}

.brv-sf-rail .brv-sf-kv {
  grid-template-columns: 96px minmax(0, 1fr);
}

/* The decide modal on the link page: the queue's form, wider than a
   plain modal so the two cards sit side by side. */
.brv-sf-modal {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
}

.brv-sf-modal .modal__header {
  justify-content: space-between;
}


/* ══ Section 8 · Organisations ═════════════════════════════════════════════════ */

/* Console v3 §8 D (Organisations, the StaffOrgs board) and E (one
   organisation, StaffOrg). Colours are tokens; nothing here is layered,
   so it wins over the theme without !important. Panels keep no shadow;
   only the modals overlay. */

/* ── shared bits ─────────────────────────────────────────────────────── */

:root {
  --brv-ic-arrow-up-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17 17 7M8 7h9v9'/></svg>");
}

.brv-og-two {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-og-two--start {
  align-items: flex-start;
  gap: 3px;
}

.brv-og-two--end {
  align-items: flex-end;
}

.brv-og-sub {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-text-subtle);
}

.brv-og-strong {
  font-weight: 600;
}

.brv-og-mono,
.brv-og-code {
  font-family: var(--font-family-mono);
  letter-spacing: -0.01em;
}

.brv-og-code {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-og-mono {
  font-size: 12.5px;
}

.brv-og-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-og-hidden {
  margin-left: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-subtle);
}

.brv-og-mark {
  width: 30px;
  height: 30px;
  font-size: 11px;
}

.brv-og-mark--lg {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  font-size: 16px;
}

.brv-og-headlink {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.brv-og-headlink > .brv-i {
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-og-headlink:hover > .brv-i {
  transform: translateX(2px);
}

.brv-og-quiet {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-og-quiet > .brv-i {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-og-fine {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

.brv-c-panel__foot.brv-og-foot {
  border-top: 1px solid var(--color-border-subtle);
  text-align: start;
}

.brv-og-foot + .brv-og-foot {
  border-top: 0;
  padding-top: 0;
}

/* ── D · the stat strip: five figures that are also filters ─────────── */

@media screen and (min-width: 1024px) {
  .brv-c-stats.brv-og-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* One row of five: undo the two-column strip's rules below 1200px. */
  .brv-c-stats.brv-og-stats > .brv-c-fig,
  .brv-c-stats.brv-og-stats > .brv-c-fig:nth-child(odd),
  .brv-c-stats.brv-og-stats > .brv-c-fig:nth-child(n + 3),
  .brv-c-stats.brv-og-stats
    > .brv-c-fig:nth-child(odd):last-child:not(:nth-child(3)) {
    grid-column: auto;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid var(--color-border-subtle);
  }

  .brv-c-stats.brv-og-stats > .brv-c-fig:first-child {
    border-left: 0;
  }
}

a.brv-og-stat {
  position: relative;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--brv-dur-quick);
}

a.brv-og-stat:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

a.brv-og-stat:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

a.brv-og-stat:hover {
  background: var(--color-surface-alt);
}

a.brv-og-stat:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* The figure standing for the list's current filter: an accent rule on top. */
a.brv-og-stat[aria-current="true"] {
  background: var(--accent-tint);
}

a.brv-og-stat[aria-current="true"]::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  background: var(--color-accent);
}

a.brv-og-stat[aria-current="true"] .brv-c-fig__l {
  color: var(--color-accent-strong);
}

.brv-og-stat--danger .brv-c-fig__v {
  color: var(--color-danger);
}

.brv-og-stat--warning .brv-c-fig__v {
  color: var(--color-warning-soft-text);
}

/* ── D · the table ───────────────────────────────────────────────────── */

.brv-og-org {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brv-og-org__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

a.brv-og-org__name {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--color-text);
}

a.brv-og-org__name:hover {
  color: var(--color-accent);
}

.brv-og-plan {
  display: inline-flex;
  align-items: center;
}

.brv-og-reason {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

a.brv-og-reason--danger {
  color: var(--color-danger);
}

a.brv-og-reason--danger:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.brv-og-reason--warning {
  color: var(--color-warning-soft-text);
}

.brv-og-clicks {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.brv-og-spark {
  display: block;
  flex: none;
  width: 48px;
  height: 20px;
}

/* Headers and the plan and status lines wrap before the table grows past
   its panel; names and figures stay on one line. */
#organisations th {
  white-space: normal;
}

#organisations :is(.brv-og-reason, .brv-og-two--start > .brv-og-sub) {
  max-width: 150px;
  white-space: normal;
}

/* An owner's address gives way before the table grows past its panel. */
#organisations .brv-og-two:not(.brv-og-two--start):not(.brv-og-two--end) {
  max-width: 190px;
}

#organisations .brv-og-two > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brv-og-spark > .brv-c-spark {
  display: block;
  width: 100%;
  height: 100%;
}

.brv-og-spark .brv-c-spark__area {
  display: none;
}

/* ── D · the explainers ──────────────────────────────────────────────── */

.brv-og-explain {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.brv-og-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.brv-og-path {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.brv-og-path__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
}

.brv-og-path p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-og-paths__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-og-state {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-og-state:first-child {
  border-top: 0;
}

/* ── E · the header ──────────────────────────────────────────────────── */

.page-header.brv-og-head {
  align-items: center;
}

.brv-og-head__id {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.brv-og-head__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.brv-og-head__badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-og-head .page-header__subtitle .brv-og-code {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* The workspace door carries the trailing arrow the design gives it. */
.brv-og-head .page-header__actions > a.btn--accent::after {
  content: "";
  width: 16px;
  height: 16px;
  margin-left: 6px;
  background-color: currentColor;
  -webkit-mask: var(--brv-ic-arrow-up-right) center / contain no-repeat;
  mask: var(--brv-ic-arrow-up-right) center / contain no-repeat;
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-og-head .page-header__actions > a.btn--accent:hover::after {
  transform: translate(1px, -1px);
}

/* ── E · the stat strip ──────────────────────────────────────────────── */

.brv-og-fig__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  min-width: 0;
}

.brv-og-fig__row > .brv-c-fig__d {
  margin-left: 0;
}

.brv-og-fig__meter,
.brv-og-fig__spark {
  display: block;
  margin-top: auto;
  padding-top: 8px;
}

.brv-og-fig__spark > .brv-c-spark {
  display: block;
  width: 100%;
  height: 24px;
}

/* Credits left, not used: the meter stays in the accent however full. */
.brv-og-fig__meter--calm .brv-c-meter__fill {
  fill: var(--color-accent);
}

/* ── E · main column and rail ────────────────────────────────────────── */

.brv-og-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.brv-og-main,
.brv-og-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Plan and subscription */

.brv-og-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.brv-og-plan-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.brv-og-plan-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.brv-og-plan-name__v {
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.brv-c-kv.brv-og-kv {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
}

.brv-og-kv dd {
  margin: 0;
  min-width: 0;
}

.brv-c-kv.brv-og-kv--nums {
  grid-template-columns: minmax(0, 1fr) auto;
  row-gap: 6px;
  margin-bottom: 10px;
}

.brv-og-kv--nums dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* "Used this period": the Billing usage rows, stacked for a half-width
   column — label and figure on a line, the meter under them. */
.brv-og-usage {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-og-usage .brv-bl-usage {
  padding-bottom: 0;
}

.brv-og-usage .brv-bl-urow {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  padding: 8px 0;
  font-size: 13px;
}

.brv-og-usage .brv-bl-urow + .brv-bl-urow {
  border-top: 0;
}

.brv-og-usage .brv-bl-urow > .brv-c-meter,
.brv-og-usage .brv-bl-urow__note {
  grid-column: 1 / -1;
  order: 3;
}

.brv-og-usage .brv-bl-urow__over {
  display: none;
}

.brv-og-plan-foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle);
}

/* People */

.brv-og-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-og-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-og-list__item:first-child {
  border-top: 0;
}

.brv-og-grow {
  flex: 1 1 auto;
}

.brv-og-person {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

.brv-og-owner {
  font-size: 11px;
}

.avatar.brv-og-av--ink {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-og-tags {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.brv-og-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brv-og-tag::before {
  content: "#";
  content: "#" / "";
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-subtle);
}

/* Domains: headers may wrap, so the figures stay in view in a narrow column. */
#org-domains th {
  white-space: normal;
}

/* Domains: the kit's table without its own frame inside the panel. */
.brv-c-panel__body--flush > .data-table#org-domains {
  border: 0;
  border-radius: 0;
}

/* Recent activity */

.brv-og-empty {
  margin: 0;
  padding: 16px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-og-acts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-og-act {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13.5px;
  line-height: 1.5;
}

.brv-og-act:first-child {
  border-top: 0;
}

.brv-og-act__on {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.brv-og-act__text .brv-sl {
  font-size: 12.5px;
}

.badge.brv-og-act__label {
  margin-left: 4px;
  vertical-align: 1px;
  font-size: 11px;
}

/* Owner */

.brv-og-owner-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-bottom: 12px;
}

/* Credits */

.brv-og-credits {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.brv-og-credits__v {
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.brv-og-ledger {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--color-border-subtle);
  list-style: none;
  font-size: 13px;
}

.brv-og-ledger > li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.brv-og-ledger__amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--color-success-soft-text);
}

.brv-og-ledger__amt--out {
  color: var(--color-text);
}

/* Status and lifecycle */

.brv-og-life {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-og-life:first-child {
  border-top: 0;
}

.brv-og-life .brv-og-strong {
  font-size: 13.5px;
}

.brv-og-life .brv-c-inline-form {
  margin-top: 8px;
}

.brv-og-life__link {
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
}

/* Inside */

.brv-og-counts {
  display: flex;
  flex-direction: column;
}

a.brv-og-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 38px;
  padding: 0 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13.5px;
  color: var(--color-text);
  text-decoration: none;
}

a.brv-og-count:first-child {
  border-top: 0;
}

a.brv-og-count:hover {
  background: var(--color-surface-alt);
}

.brv-og-count__n {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brv-og-count__n > .brv-i {
  color: var(--color-text-subtle);
}

/* ── E · the modals (they overlay: the kit's own shadow) ─────────────── */

.modal.brv-og-modal {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.modal.brv-og-modal--wide {
  width: min(600px, calc(100vw - 32px));
}

.modal.brv-og-modal[open] {
  display: flex;
  flex-direction: column;
}

.brv-og-modal > .modal__header,
.brv-og-modal .modal__footer {
  flex: none;
}

.brv-og-modal > .modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.brv-og-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brv-og-lead {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-muted);
}

.brv-og-lead strong {
  color: var(--color-text);
}

.brv-og-moves {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brv-og-move {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-og-move[hidden] {
  display: none;
}

.brv-og-move .brv-bl-note {
  margin: 0;
}

.brv-og-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.45;
}

.brv-og-points > li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.brv-og-points > li > .brv-i {
  margin-top: 2px;
  color: var(--color-text-subtle);
}

/* ── widths ──────────────────────────────────────────────────────────── */

@media screen and (max-width: 1279.98px) {
  /* The list keeps its figures and drops the extras: the sparkline and
     the created day (the organisation's page has both). */
  #organisations .brv-og-spark,
  #organisations :is(th, td):nth-last-child(2) {
    display: none;
  }

  /* The kebab opens the workspace too. */
  #organisations .brv-og-open {
    display: none;
  }

  .brv-og-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .brv-og-plan-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

@media screen and (max-width: 1023.98px) {
  .brv-og-grid,
  .brv-og-explain {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-header.brv-og-head {
    flex-wrap: wrap;
  }
}

@media screen and (max-width: 767.98px) {
  .brv-og-paths {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-og-state {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .brv-og-list__item {
    flex-wrap: wrap;
  }

  .brv-og-tags {
    justify-content: flex-start;
  }

  .brv-og-act {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .brv-og-mark--lg {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.brv-og-stat,
  .brv-og-headlink > .brv-i,
  .brv-og-head .page-header__actions > a.btn--accent::after {
    transition: none;
  }
}


/* ══ Section 8 · People for staff, Deletions ═══════════════════════════════════ */

/* F · People for staff (`/users`, StaffPeople.dc.html) as `brv-sp-*`;
   G · Deletions (`/deletions`, StaffDeletions.dc.html) as `brv-sd-*`.
   Tokens only; the panels are `brv-c-panel`s and carry no shadow. */

/* ── F · People for staff ──────────────────────────────────────────── */

.brv-sp-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brv-sp-muted {
  color: var(--color-text-subtle);
}

.brv-sp-code {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-sp-headlink {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-accent);
  text-decoration: none;
}

.brv-sp-headlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-sp-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Find anyone */

.brv-sp-find__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.brv-sp-lookup {
  display: flex;
  gap: 8px;
}

.brv-sp-lookup__field {
  flex: 1 1 auto;
  min-width: 0;
}

.brv-sp-lookup__field > .input {
  width: 100%;
}

.brv-sp-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-sp-found {
  display: flex;
  flex-direction: column;
}

.brv-sp-found:empty {
  display: none;
}

.brv-sp-miss {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-sp-miss > svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-sp-miss strong {
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* The one person an address named: an accent frame (outline, not a shadow). */
.brv-sp-hit {
  display: grid;
  grid-template-columns: minmax(160px, 200px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 14px 16px;
  border: 1px solid var(--color-accent);
  outline: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-sp-hit__who {
  min-width: 0;
}

.brv-sp-hit__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-sp-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  min-width: 0;
}

.brv-sp-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-sp-fact dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-sp-fact dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text);
}

.brv-sp-fact dd a {
  color: var(--color-text);
  font-weight: 500;
}

.brv-sp-hit__acts {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Everyone in one organisation */

.brv-sp-orgs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 4px;
}

.brv-sp-orgs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brv-sp-orgs__label {
  margin-right: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-sp-org {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-sp-org:hover {
  background: var(--color-surface-alt);
}

.brv-sp-org__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-family: var(--font-family-display);
  font-size: 10px;
  font-weight: 700;
}

.brv-sp-org__n {
  font-size: 11.5px;
}

.brv-sp-orgs__pick {
  flex: 0 1 260px;
  min-width: 200px;
}

/* Staff team */

.brv-sp-guard {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-sp-guard__more {
  font-size: 12px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.brv-sp-manage {
  white-space: nowrap;
}

/* Pending invitations beside the sign-in rules */

.brv-sp-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.brv-sp-inv {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-sp-inv__mail {
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-sp-inv__meta {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-sp-inv__meta--late {
  color: var(--color-warning-soft-text);
}

.brv-sp-inv__acts {
  display: inline-flex;
  gap: 6px;
  white-space: nowrap;
}

.brv-sp-more {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-sp-invites .empty {
  padding: 28px 24px 32px;
}

/* Staff sign-in */

.brv-sp-signin__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 8px;
}

.brv-sp-usage {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
}

.brv-sp-usage__top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
}

.brv-sp-usage__n {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-sp-usage__note {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-warning-soft-text);
}

.brv-sp-meter--short .brv-c-meter__fill {
  fill: var(--color-warning);
}

.brv-sp-rules {
  display: flex;
  flex-direction: column;
  margin: 0 -16px;
  padding: 0;
  list-style: none;
}

.brv-sp-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sp-rule__text {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text);
}

@media (max-width: 1279.98px) {
  .brv-sp-hit {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brv-sp-facts {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (max-width: 1023.98px) {
  .brv-sp-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .brv-sp-hit {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-sp-facts {
    grid-row: auto;
  }

  .brv-sp-lookup {
    flex-wrap: wrap;
  }

  .brv-sp-orgs__pick {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-sp-hit {
    animation: none;
  }

  .brv-sp-org {
    transition: none;
  }
}

/* ── G · Deletions ─────────────────────────────────────────────────── */

.brv-sd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.brv-sd-main,
.brv-sd-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.brv-sd-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brv-sd-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-sd-tools .input-icon {
  width: 220px;
}

.brv-sd-tools .select {
  flex: none;
  width: 160px;
  margin: 0;
}

.brv-sd-tools .input,
.brv-sd-tools .combobox__field {
  height: 32px;
  min-height: 32px;
  padding-block: 0;
}

.brv-sd-mono {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-sd-subtle {
  color: var(--color-text-subtle);
}

.brv-sd-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* One pending deletion */

.brv-sd-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px 20px;
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-sd-item + .brv-sd-item {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sd-item:nth-child(3) { animation-delay: 25ms; }
.brv-sd-item:nth-child(4) { animation-delay: 50ms; }
.brv-sd-item:nth-child(n + 5) { animation-delay: 75ms; }

.brv-sd-item__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.brv-sd-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-family: var(--font-family-display);
  font-size: 14px;
  font-weight: 700;
}

.brv-sd-item__who {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-sd-item__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-sd-name {
  font-family: var(--font-family-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-decoration: none;
}

.brv-sd-name:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-sd-asked {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Asked · the grace · deleted */
.brv-sd-when {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 160px;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-sd-when__end {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-sd-when__end--right {
  text-align: right;
}

.brv-sd-when__day {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-sd-when__at {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-sd-when__mid {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.brv-sd-meter .brv-c-meter__fill {
  fill: var(--color-warning);
}

.brv-sd-meter--due .brv-c-meter__fill {
  fill: var(--color-danger);
}

.brv-sd-when__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* What goes · what stays */
.brv-sd-lists {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px;
}

.brv-sd-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-sd-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-sd-li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--color-text);
}

.brv-sd-li > svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-sd-li strong {
  font-weight: 600;
}

.brv-sd-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sd-note {
  margin: -8px 0 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-sd-region > .empty {
  padding: 40px 24px;
}

.brv-sd-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

/* How a deletion runs */
.brv-sd-steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-sd-step {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 18px;
}

.brv-sd-step::before {
  position: absolute;
  top: 26px;
  bottom: 2px;
  left: 11px;
  width: 1px;
  background: var(--color-border);
  content: "";
}

.brv-sd-step:last-child {
  padding-bottom: 0;
}

.brv-sd-step:last-child::before {
  display: none;
}

.brv-sd-step__dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-sd-step--accent .brv-sd-step__dot {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-sd-step--danger .brv-sd-step__dot {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-sd-step--success .brv-sd-step__dot {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-sd-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brv-sd-step__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-sd-step__sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* The grace in force */
.brv-sd-grace {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-sd-grace__v {
  font-family: var(--font-family-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-sd-grace__v small {
  margin-left: 4px;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-sd-grace__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

@media (max-width: 1279.98px) {
  .brv-sd {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-sd-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (max-width: 1023.98px) {
  .brv-sd-lists {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

@media (max-width: 767.98px) {
  .brv-sd-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-sd-when {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .brv-sd-when__mid {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .brv-sd-tools,
  .brv-sd-tools .input-icon {
    width: 100%;
  }

  .brv-sd-tools .input-icon {
    flex: 1 1 auto;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-sd-item {
    animation: none;
  }
}

/* ══ Section 9 · Staff domains ═════════════════════════════════════════════════ */

/* ══ Section 9 A · Staff domains (/domains, staff's own scope) ══════════════
   design/v3/S9-staff-platform.md A; the canvas's StaffDomains board.
   Tokens only; no shadow on a panel (the row menus overlay, so they keep
   the kit's). Breakpoints: 1280 (the domain beside the list), 1024, 768. */

/* ── The figures ──────────────────────────────────────────────────────── */

/* The default's name in short-link type, at the figures' height. */
.brv-pd-figdomain .brv-sl {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.27;
}

.brv-pd-fig--on .brv-c-fig__v {
  color: var(--color-success);
}

.brv-pd-figs .brv-c-fig__l .brv-i {
  color: var(--color-text-subtle);
}

.brv-pd-per {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
}

.brv-pd-mono {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text);
}

/* ── The list and the domain beside it: one swap region ──────────────── */

.brv-pd-md {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.brv-pd-md > .alert {
  grid-column: 1 / -1;
}

.brv-pd-list {
  overflow: hidden;
}

@media (min-width: 1280px) {
  .brv-pd-md--open {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  }

  /* The panel says what the narrowed list leaves out: certificate (3),
     generated back-halves (4), safety watch (6) and verified (7). */
  .brv-pd-md--open .data-table__table :is(th, td):is(
    :nth-child(3),
    :nth-child(4),
    :nth-child(6),
    :nth-child(7)
  ) {
    display: none;
  }
}

.brv-pd-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-pd-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-pd-strong {
  font-weight: 600;
}

.brv-pd-acts {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Quiet until the row is hovered or focused (always on touch), as the
   kit's kebab is. */
.brv-pd-acts > .btn {
  opacity: 0.55;
}

.data-table__table tbody tr:is(:hover, :focus-within) .brv-pd-acts > .btn,
.brv-pd-acts > .btn[aria-expanded="true"] {
  opacity: 1;
}

@media (hover: none) {
  .brv-pd-acts > .btn {
    opacity: 1;
  }
}

.brv-pd-list .data-table__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.brv-pd-foot {
  margin-left: auto;
}

/* A row's menu: the items, then a line saying what Remove does. */
.brv-pd-menu {
  width: 272px;
}

.brv-c-menu__caption.brv-pd-menu__note {
  padding: 6px 10px 4px;
  line-height: 1.45;
  white-space: normal;
}

.brv-c-menu__item.brv-pd-menu__danger,
.brv-c-menu__item.brv-pd-menu__danger > .brv-i {
  color: var(--color-danger);
}

.brv-c-menu__item.brv-pd-menu__danger:hover {
  background: var(--color-danger-soft);
}

/* ── One domain, beside the list ──────────────────────────────────────── */

.brv-pd-panel__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-pd-panel__name {
  margin: 0;
  font-size: 16px;
}

.brv-pd-panel__name:focus {
  outline: none;
}

.brv-pd-panel__acts {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.brv-pd-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 18px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-c-panel__head + .brv-pd-block {
  border-top: 0;
}

.brv-pd-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-pd-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-pd-len {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.brv-pd-len__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brv-c-kv.brv-pd-kv {
  grid-template-columns: 140px minmax(0, 1fr);
}

.brv-pd-kv dd > .brv-pd-hint {
  margin-top: 4px;
}

.brv-pd-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.brv-pd-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.brv-pd-fields > * {
  margin: 0;
}

.brv-pd-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Under the list (below 1280px) the panel is as wide as the page: the
   length beside its rules, the three addresses side by side. Beside the
   list it is narrow, so they stack. The domain's own page (`--wide`) has
   the room at every width from 768px. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .brv-pd-len {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
  }

  .brv-pd-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .brv-pd-len--wide {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 24px;
  }
}

/* ── The safety watch and the reserved zones ─────────────────────────── */

.brv-pd-grid2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 1024px) {
  .brv-pd-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.brv-pd-lede {
  margin: 0;
  padding: 14px 16px 12px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-pd-list-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-pd-list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 8px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 13.5px;
}

.brv-pd-zones .brv-pd-list-row:first-child {
  border-top: 0;
}

.brv-pd-list-row > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.brv-pd-zone > .brv-pd-hint {
  text-align: right;
}

/* ══ Section 8 review · the case a queue opens by itself ══════════════════
   /reviews and /abuse with nothing picked open the oldest waiting case
   (`brv-sf-md--default`): beside the queue at 1280px and wider, where its
   row is marked as picked; below that the queue shows alone, unmarked. */
@media (min-width: 1280px) {
  .brv-sf-case--default,
  .brv-sf-case--default:hover {
    background: var(--accent-tint);
  }

  .brv-sf-case--default::before {
    background: var(--color-accent);
  }
}


/* ══ Section 9 · Plans & pricing ═══════════════════════════════════════════════ */

/* ── Plans: the plan cards over the grid ─────────────────────────────── */

.brv-c-plangrid__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.brv-c-plangrid__badges .badge {
  font-size: 11.5px;
}

.brv-c-plangrid__terms dd.brv-c-plangrid__muted,
.brv-c-plangrid__terms dd.brv-c-plangrid__muted a {
  color: var(--color-text-subtle);
}

/* A term's value keeps its line; the label wraps first when a card is
   narrow (1100px: "2,500 a month" whole, "Pack / discount"). */
.brv-c-plangrid__terms {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* Cards line up at the top; the corner's filter stays at the bottom. */
.brv-c-plangrid thead th.brv-c-plangrid__plan {
  width: 220px;
  vertical-align: top;
}

/* Vendor names are long ("Dodo Payments"): the readiness list takes the
   card's width on the line under its label. */
.brv-c-plangrid__terms dd.brv-c-plangrid__ready {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-top: -2px;
  white-space: normal;
}

.brv-c-plangrid__ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-align: right;
}

.brv-c-plangrid__ok > svg {
  flex: none;
}

.brv-c-plangrid__ok > svg {
  color: var(--color-accent);
}

.brv-c-plangrid__warn {
  font-weight: 600;
  color: var(--color-warning-soft-text);
}

.brv-c-plangrid__orgs {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.brv-c-plangrid__orgs:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A switch on only because the catalog says so reads quieter. */
.brv-c-plangrid__on--def {
  color: var(--color-text-subtle);
}

.brv-c-plangrid__foot > a,
.brv-c-plangrid__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  white-space: nowrap;
}

/* Hidden plans, none yet: a quiet panel with one line and its button. */
.brv-c-plangrid__quiet {
  background: var(--color-surface-alt);
}

.brv-c-plangrid__quietbody {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
}

.brv-c-plangrid__quiettext {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-c-plangrid__quiettext .brv-c-panel__title {
  font-size: 15px;
}

.brv-c-plangrid__quietp {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.brv-c-plangrid__quietbody > .btn {
  flex: none;
}

/* ── Features: the catalog, grouped ──────────────────────────────────── */

.brv-c-fcat {
  border: 0;
  border-radius: 0;
}

.brv-c-fcat__sec th {
  padding: 14px 16px 6px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}

.brv-c-fcat .data-table__table td {
  vertical-align: top;
  padding-block: 11px;
}

.brv-c-fcat__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px;
}

.brv-c-fcat__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-c-fcat__def {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brv-c-fcat__hid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-subtle);
}

.brv-c-fcat .brv-c-cell-meta {
  white-space: nowrap;
}

.brv-c-fcat__desc {
  min-width: 240px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
  white-space: normal;
}

.brv-c-fcat__why {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ── Payment products: a vendor per row, its state beside ───────────── */

.brv-c-vendorstate {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-c-vendorstate__note {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-subtle);
}

.brv-c-products {
  display: flex;
  flex-direction: column;
}

.brv-c-products__row {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  align-items: start;
  gap: 8px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-c-products__row:first-child {
  padding-top: 0;
  border-top: 0;
}

.brv-c-products__vendor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.brv-c-products__name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-c-products__row .form-field {
  margin: 0;
}

@media (max-width: 767.98px) {
  .brv-c-products__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── A plan: header and figures ──────────────────────────────────────── */

.brv-pl-title {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.brv-pl-title .badge {
  font-family: var(--font-family-base);
  letter-spacing: 0;
}

.brv-pl-code {
  font-size: 12.5px;
}

/* Five figures in one row from 1024px (the theme would wrap them in two). */
@media screen and (min-width: 1024px) {
  .brv-c-stats.brv-pl-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .brv-c-stats.brv-pl-stats > .brv-c-fig:nth-child(n) {
    grid-column: auto;
    padding-left: 18px;
    border-top: 0;
    border-left: 1px solid var(--color-border-subtle);
  }
  .brv-c-stats.brv-pl-stats > .brv-c-fig:first-child {
    border-left: 0;
  }
}

.brv-pl-stats .brv-c-fig__v a {
  color: inherit;
  text-decoration: none;
}

.brv-pl-stats .brv-c-fig__v a:hover {
  color: var(--color-accent);
}

/* ── A plan › Features & limits: the toolbar ─────────────────────────── */

.brv-pf-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.brv-pf-filter,
.brv-pf-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.brv-pf-find {
  position: relative;
  display: flex;
  align-items: center;
  width: 260px;
  max-width: 100%;
}

.brv-pf-find > svg {
  position: absolute;
  left: 10px;
  color: var(--color-text-subtle);
  pointer-events: none;
}

.brv-pf-find > .input {
  width: 100%;
  height: 32px;
  padding-left: 32px;
}

.js .brv-pf-apply {
  display: none;
}

.brv-pf-copy__label {
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-pf-copy .select {
  width: 160px;
}

/* ── the unsaved-change bar ──────────────────────────────────────────── */

.brv-pf {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.brv-pf-bar {
  position: sticky;
  top: calc(var(--brv-c-topbar, 56px) + var(--space-3));
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-pf-bar__text {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.brv-pf-bar__text > strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-pf-bar__text > span {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-pf-bar__actions {
  display: inline-flex;
  gap: 8px;
}

/* Nothing to undo until something changed. */
.brv-pf:not([data-dirty]) [data-pf-discard] {
  display: none;
}

/* With script the bar shows once something changed, over the page. */
.js .brv-pf:not([data-dirty]) .brv-pf-bar {
  display: none;
}

.js .brv-pf[data-dirty] .brv-pf-bar {
  box-shadow: var(--shadow-md);
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) both;
}

/* ── the rows ────────────────────────────────────────────────────────── */

.brv-pf-sec__n {
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-pf-sec > .brv-c-panel__head {
  justify-content: space-between;
}

.brv-pf-rows {
  display: flex;
  flex-direction: column;
}

.brv-pf-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 214px 160px 150px;
  align-items: center;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-pf-row:first-child {
  border-top: 0;
}

.brv-pf-row[hidden] {
  display: none;
}

.brv-pf-row--changed {
  background: var(--accent-tint);
  animation: m-flash var(--brv-dur-slow) var(--brv-ease-out);
}

.brv-pf-row--changed::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-accent);
}

.brv-pf-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-pf-row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-pf-row__name .badge {
  font-size: 11.5px;
  font-weight: 500;
}

.brv-pf-row__chg {
  display: none;
}

.brv-pf-row--changed .brv-pf-row__chg {
  display: inline-flex;
}

.brv-pf-row__desc {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-pf-row__desc:hover {
  white-space: normal;
}

.brv-pf-row__mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-pf-row__mode .segmented {
  align-self: flex-start;
}

.brv-pf-row__mode .segmented__label,
.brv-pf-row__mode .segmented--sm .segmented__label {
  height: 24px;
  padding-inline: 9px;
  font-size: 12.5px;
}

/* The kit's gliding thumb measures itself on load, when a filtered row
   is hidden, and does not follow a state the script sets: here the
   chosen item is drawn as the plain v3 segmented draws it. */
.js .brv-pf .segmented::before {
  display: none;
}

.js .brv-pf .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Without script a limit is its value and an Unlimited switch; with it,
   the three states drive both. */
html:not(.js) .brv-pf-row__mode--limit {
  display: none;
}

.js .brv-pf-unl {
  display: none;
}

.brv-pf-row__value {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-pf-row__value .input,
.brv-pf-row__value .input-group {
  height: 30px;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.brv-pf-row__value .input-group .input {
  height: 100%;
}

.js .brv-pf-row:is([data-mode="default"], [data-mode="unlimited"]) .brv-pf-row__value :is(.input, .input-group) {
  background: var(--color-surface-alt);
  border-color: var(--color-border);
  color: var(--color-text-subtle);
}

.brv-pf-unl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-pf-row__value .form-field__error {
  font-size: 12px;
}

.brv-pf-row__def {
  font-size: 12.5px;
  color: var(--color-text-subtle);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.brv-pf-grant {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-subtle);
}

.brv-pf-grant--on {
  color: var(--color-accent);
}

.brv-pf-grant__on,
.brv-pf-grant__off {
  display: inline-flex;
}

.brv-pf-grant--on .brv-pf-grant__off,
.brv-pf-grant:not(.brv-pf-grant--on) .brv-pf-grant__on {
  display: none;
}

.brv-pf-none {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  color: var(--color-text-muted);
  text-align: center;
}

.brv-pf-none[hidden],
.brv-pf-sec[hidden] {
  display: none;
}

/* A group of switches only: two columns at full width. */
@media screen and (min-width: 1280px) {
  .brv-pf-sec--switches .brv-pf-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brv-pf-sec--switches .brv-pf-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "text mode" "text value" "text def";
    row-gap: 4px;
  }
  .brv-pf-sec--switches .brv-pf-row:nth-child(2) {
    border-top: 0;
  }
  .brv-pf-sec--switches .brv-pf-row:nth-child(even) {
    border-left: 1px solid var(--color-border-subtle);
  }
  .brv-pf-sec--switches .brv-pf-row__text {
    grid-area: text;
  }
  .brv-pf-sec--switches .brv-pf-row__mode {
    grid-area: mode;
    align-items: flex-end;
  }
  .brv-pf-sec--switches .brv-pf-row__value {
    grid-area: value;
    align-items: flex-end;
  }
  .brv-pf-sec--switches .brv-pf-row__def {
    grid-area: def;
  }
}

@media (max-width: 1279.98px) {
  .brv-pf-row {
    grid-template-columns: auto 180px minmax(0, 1fr);
    grid-template-areas: "text text text" "mode value def";
    row-gap: 8px;
  }
  .brv-pf-row__text {
    grid-area: text;
  }
  .brv-pf-row__mode {
    grid-area: mode;
  }
  .brv-pf-row__value {
    grid-area: value;
  }
  .brv-pf-row__def {
    grid-area: def;
  }
  .brv-pf-row__desc {
    white-space: normal;
  }
}

@media (max-width: 767.98px) {
  .brv-pf-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "mode" "value" "def";
  }
  .brv-pf-row__def {
    text-align: left;
  }
  .brv-pf-find {
    width: 100%;
  }
}

/* ── Credit packs ────────────────────────────────────────────────────── */

.brv-cp-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.brv-cp-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}

.brv-cp-rule__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.brv-cp-rule__title {
  margin: 0 0 4px;
  font-family: var(--font-family-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.brv-cp-rule__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.brv-cp-rule__link {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-accent);
}

.brv-cp-rule__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1023.98px) {
  .brv-cp-rules {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brv-cp-table,
.brv-cp-sale {
  border: 0;
  border-radius: 0;
}

.brv-cp-pack {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brv-cp-pack > a {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.brv-cp-pack > a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-cp-strong {
  font-weight: 600;
  color: var(--color-text);
}

.brv-cp-muted {
  color: var(--color-text-subtle);
}

.data-table__table th.brv-cp-strong {
  font-family: var(--font-family-base);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
}

.brv-cp-table td.data-table__actions,
.brv-cp-sale td.data-table__actions {
  width: 1%;
  white-space: nowrap;
}

.brv-cp-table td.data-table__actions > * {
  vertical-align: middle;
}

.brv-cp-vendor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-block: 10px;
}

.brv-cp-vendor__name {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
}

.brv-cp-vendor .badge {
  letter-spacing: 0;
  text-transform: none;
}

.brv-cp-none {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-cp-id {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.brv-cp-id__text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-cp-id .brv-copy__done {
  display: none;
}

.brv-cp-id .brv-copy.is-copied .brv-copy__idle {
  display: none;
}

.brv-cp-id .brv-copy.is-copied .brv-copy__done {
  display: inline-flex;
}

.brv-c-panel__foot.brv-cp-footbar {
  text-align: left;
}

.brv-cp-foot {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-cp-pad {
  margin: 0;
  padding: 16px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}


/* ══ Section 9 · Emails ════════════════════════════════════════════════════════ */

/*
 * Console v3 · Section 9 C · Emails (/messages, /messages/:id:), staff.
 * Unlayered and tokens only, like the rest of the v3 layer.
 */

/* ── Shared pieces ────────────────────────────────────────────────────── */

/* An overline (kit.css `.b-over`). */
.brv-em-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-em-quiet {
  color: var(--color-text-subtle);
}

/* A template's code, as its name's second line and in the header. */
.brv-em-code {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-subtle);
}

.page-header__subtitle .brv-em-code {
  font-size: 12.5px;
}

.brv-em-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-em-inuse {
  gap: 4px;
}

.brv-em-inuse > svg {
  flex: none;
}

/* A variable, as the refusal names it: accent when declared, a red
   underline when not (the words' own marks, drawn by the script, are
   the same pair). */
.brv-em-tok {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
  font-family: var(--font-family-mono);
  font-size: 0.84em;
  font-weight: 500;
  white-space: nowrap;
}

.brv-em-tok--bad {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
  text-decoration: underline wavy var(--color-danger);
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}

/* ── The list ─────────────────────────────────────────────────────────── */

.brv-em-fig__badge {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.brv-em-fig__badge > .badge {
  font-size: 13px;
}

/* Fixed columns: "Sent when" takes what is left and wraps. */
#messages .data-table__table {
  table-layout: fixed;
}

#messages .data-table__table td {
  white-space: normal;
}

#messages .data-table__table th:nth-child(1) {
  width: 21%;
}

#messages .data-table__table th:nth-child(3) {
  width: 15%;
}

#messages .data-table__table th:nth-child(4) {
  width: 176px;
}

#messages .data-table__table th:nth-child(5) {
  width: 112px;
}

#messages .data-table__table th:last-child {
  width: 96px;
}

#messages .brv-em-badges,
#messages .brv-em-edited,
#messages td.data-table__actions {
  white-space: nowrap;
}

/* A subject's heading row: an overline and its count, no hover. */
#messages tr[data-row-key^="em-subject-"] > td {
  height: 36px;
  padding-top: 14px;
  padding-bottom: 6px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
}

#messages .data-table__table tbody tr[data-row-key^="em-subject-"]:hover > td {
  background: var(--color-surface);
}

.brv-em-subject {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.brv-em-subject > .badge {
  height: 18px;
  padding-inline: 6px;
  font-size: 11px;
}

.brv-em-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-em-name__link {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.brv-em-name__link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.brv-em-when {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Several reasons: each led by a quiet dot, so a wrapped one reads whole. */
.brv-em-when:has(> li + li) > li {
  position: relative;
  padding-left: 12px;
}

.brv-em-when:has(> li + li) > li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 1px;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-text-subtle);
}

.brv-em-to {
  color: var(--color-text-muted);
}

.brv-em-edited {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.brv-em-edited > .brv-em-quiet {
  font-size: 12px;
}

.brv-em-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-em-foot > svg {
  flex: none;
}

/* ── One template ─────────────────────────────────────────────────────── */

.brv-em-head__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.brv-em-head .page-header__subtitle {
  max-width: 880px;
}

.brv-em-refused .alert__text {
  display: grid;
  gap: 4px;
}

.brv-em-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 16px;
  align-items: start;
}

.brv-em-main,
.brv-em-rail {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Below 1280px the rail follows the words. */
@media screen and (max-width: 1279.98px) {
  .brv-em-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A head's title keeps its room; what sits beside it (the last save,
   the HTML / Plain text switch) stays on the right. */
.brv-em-page .brv-c-panel__heading {
  flex: 1 1 220px;
}

.brv-em-saved {
  flex: 0 1 auto;
  max-width: 50%;
  font-size: 12px;
  color: var(--color-text-subtle);
  text-align: right;
}

.brv-em-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brv-em-fields > .form-field {
  margin: 0;
}

/* The rows each field asks for, not the kit's fixed control height. */
.brv-em-fields textarea.input {
  height: auto;
}

.brv-em-fields .editor__surface {
  min-height: 300px;
  max-height: 640px;
}

/* An email is light whatever the console's theme: the frame draws its
   card #ffffff and its words #15202b (emailFrame.ts), and the body's own
   inline colours assume that paper. The Visual body is edited on it, or
   those words would vanish in the dark theme. */
.brv-em-fields .editor__surface {
  background: #ffffff;
  color: #15202b;
  color-scheme: light;
}

.brv-em-fields textarea[name="text"] {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.6;
}

/* The Visual / HTML switch the script adds to the body's toolbar, and
   the HTML view it opens: the source textarea instead of the surface. */
.brv-em-modes {
  margin-left: auto;
}

.js .editor--html.brv-em-source .editor__source,
.js .editor--html.brv-em-source .brv-em-hl--source {
  display: block;
}

.js .editor--html .brv-em-hl--source,
.js .editor--html.brv-em-source .editor__surface {
  display: none;
}

.js .editor--html.brv-em-source .editor__source {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.6;
}

.editor--html.brv-em-source .editor__tool {
  visibility: hidden;
}

/* The unsaved bar: the panel's foot; once something changed (or a save
   came back refused) it stays in view at the bottom and overlays the
   page, so it takes a shadow. */
.brv-em-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-em-savebar__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brv-em-savebar__text > svg {
  flex: none;
}

.brv-em-savebar__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.brv-em-savebar__dirty,
[data-em-form][data-dirty] .brv-em-savebar__clean {
  display: none;
}

[data-em-form][data-dirty] .brv-em-savebar__dirty {
  display: inline;
  color: var(--color-text);
}

[data-em-form][data-dirty] .brv-em-savebar {
  position: sticky;
  bottom: 12px;
  z-index: 3;
  margin: 0 8px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  animation: m-rise var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

[data-em-form][data-dirty] .brv-em-savebar__text > svg {
  color: var(--color-accent);
}

/* ── The words' marks, drawn by console-v3.js ──────────────────
   A field's text sits over a mirror of itself; the mirror's marks show
   through the field's transparent ground. The Visual body is marked
   with the CSS Custom Highlight API instead. */
.brv-em-hl {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-em-hl > input,
.brv-em-hl > textarea {
  position: relative;
  width: 100%;
  background: transparent;
}

.brv-em-hl__mirror {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  color: transparent;
  pointer-events: none;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}

.brv-em-hl__mirror--line {
  display: flex;
  align-items: center;
  white-space: pre;
}

.brv-em-mark {
  border-radius: 3px;
  background: var(--accent-tint-strong);
  color: transparent;
}

.brv-em-mark--bad {
  background: var(--color-danger-soft);
  text-decoration: underline wavy var(--color-danger);
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
}

/* On the body's paper (above): a tint behind the words' own colour. */
::highlight(brv-em-var) {
  background-color: var(--accent-tint-strong);
}

::highlight(brv-em-bad) {
  color: var(--color-danger);
  text-decoration: underline wavy var(--color-danger);
}

.brv-em-live[hidden] {
  display: none;
}

/* ── The variables rail ───────────────────────────────────────────────── */

.brv-em-vars__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px 6px;
  font-size: 12px;
}

.brv-em-vars__group + .brv-em-vars__list,
.brv-em-vars__none {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-em-vars__none {
  margin: 0;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-em-vars__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-em-var {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 8px 4px 16px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
}

.brv-em-var__name {
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-accent-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-em-var__what {
  overflow: hidden;
  color: var(--color-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:not(.js) .brv-em-var__add {
  display: none;
}

.brv-em-var__add {
  opacity: 0.55;
}

.brv-em-var:is(:hover, :focus-within) .brv-em-var__add {
  opacity: 1;
}

.brv-em-vars__foot {
  padding: 10px 16px 12px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

/* ── The preview ──────────────────────────────────────────────────────── */

.brv-em-preview__body {
  display: grid;
  gap: 14px;
}

.brv-em-sample {
  display: grid;
  gap: 10px;
}

.brv-em-sample__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.brv-em-sample__grid > .form-field {
  margin: 0;
}

.brv-em-sample__grid .form-field__label {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.brv-em-sample__grid .input {
  height: 30px;
  font-size: 13px;
}

.brv-em-sample__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.brv-em-out {
  display: grid;
  gap: 8px;
  animation: m-fade var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-em-out__subject {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.brv-em-out__subject > .brv-em-over {
  flex: none;
}

.brv-em-out__html {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.brv-em-frame.brv-c-mail-preview {
  display: block;
  height: 560px;
  border: 0;
  border-radius: 0;
}

/* Scaled by the script: laid out at an email's width, drawn to fit. */
.brv-em-out__html--scaled > .brv-em-frame {
  transform-origin: 0 0;
}

.brv-em-out__text {
  max-height: 420px;
  margin: 0;
  padding: 12px 14px;
  overflow: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-family: var(--font-family-mono);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* HTML or Plain text: the segmented radios pick one (no script needed;
   without :has() both show). */
.brv-em-preview:has(#em-part-html:checked) .brv-em-out__text,
.brv-em-preview:has(#em-part-text:checked) .brv-em-out__html {
  display: none;
}

.brv-em-preview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
}

.brv-em-test {
  margin: 0;
}

.brv-em-preview__via {
  margin: -4px 0 0;
  padding: 0 16px 12px;
  font-size: 12px;
  color: var(--color-text-subtle);
  text-align: right;
}

@media screen and (max-width: 767.98px) {
  .brv-em-sample__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-em-var {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .brv-em-var__what {
    grid-column: 1;
    grid-row: 2;
  }

  .brv-em-var__add {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-em-out,
  [data-em-form][data-dirty] .brv-em-savebar {
    animation: none;
  }
}


/* ══ Section 9 · Help centre, Vendors ══════════════════════════════════════════ */

/* ══ Section 9 D · E — Help centre (/faqs) and Vendors (/vendors) ═══════════
   design/v3/S9-staff-platform.md, the canvas's StaffFaqs and StaffVendors
   boards. Tokens only, unlayered, low specificity; no shadow on a panel
   (the edit panel's foot floats only while it is stuck over the page).
   Breakpoints: 1280 (the question beside the list), 1024, 768. ══════════ */

/* ── D · the page ─────────────────────────────────────────────────────── */

.brv-fq-code {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
}

/* The list and the open question: one swap region. Below 1280px the
   question takes the region alone, with a way back. */
.brv-fq-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.brv-fq-side,
.brv-fq-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.brv-fq-split--open > .brv-fq-side {
  display: none;
}

.brv-fq-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-fq-back:hover {
  color: var(--color-text);
}

@media (min-width: 1280px) {
  .brv-fq-split--open {
    grid-template-columns: minmax(0, 1fr) 480px;
  }

  .brv-fq-split--open > .brv-fq-side {
    display: flex;
  }

  .brv-fq-back {
    display: none;
  }

  /* Beside the list, the question stays in view while the list scrolls. */
  .brv-fq-main {
    position: sticky;
    top: calc(var(--brv-c-topbar, 56px) + 16px);
  }

  .brv-fq-main > .brv-fq-edit {
    max-height: calc(100vh - var(--brv-c-topbar, 56px) - 32px);
    max-height: calc(100dvh - var(--brv-c-topbar, 56px) - 32px);
  }

  .brv-fq-main .brv-fq-edit__body {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.brv-fq-main > .brv-fq-edit {
  animation: m-fade var(--brv-dur-base) var(--brv-ease-out) backwards;
}

/* ── D · the list ─────────────────────────────────────────────────────── */

.brv-fq-list {
  overflow: hidden;
}

.brv-fq-list .data-table {
  border: 0;
  border-radius: 0;
}

.brv-fq-list .data-table__table th.brv-fq-order,
.brv-fq-list .data-table__table td.brv-fq-order {
  width: 70px;
}

.brv-fq-list .data-table__table th.brv-fq-status {
  width: 120px;
}

.brv-fq-list .data-table__table th.brv-fq-updated {
  width: 110px;
}

.brv-fq-order__n {
  color: var(--color-text-subtle);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.brv-fq-updated {
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.brv-fq-qcell {
  max-width: 0;
}

.brv-fq-q {
  display: block;
  overflow: hidden;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-fq-q:hover {
  color: var(--color-accent);
}

.brv-fq-a {
  display: block;
  overflow: hidden;
  max-width: 560px;
  color: var(--color-text-subtle);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A category's head row: the overline and its count. */
.brv-fq-list .data-table__table .brv-fq-group th {
  height: 38px;
  padding-top: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface);
  text-align: start;
}

.brv-fq-group th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-fq-group__name {
  margin-inline-end: 8px;
}

.brv-fq-n {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.brv-fq-list .data-table__table tbody tr.brv-fq-group:hover th {
  background: var(--color-surface);
}

/* The edit button is as quiet as the kebab until its row is hovered. */
td.data-table__actions > .brv-fq-editbtn {
  opacity: 0.55;
}

.brv-fq-list .data-table__table tbody tr:is(:hover, :focus-within) td.data-table__actions > .brv-fq-editbtn,
.brv-fq-list .data-table__table tbody tr.data-table__row--selected td.data-table__actions > .btn {
  opacity: 1;
}

@media (hover: none) {
  td.data-table__actions > .brv-fq-editbtn {
    opacity: 1;
  }
}

/* Beside an open question the list is narrower: the search gives way. */
.brv-fq-split--open .data-table__toolbar .brv-c-toolbar__search {
  flex-basis: 160px;
  min-width: 160px;
}

.brv-fq-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
}

/* ── D · the edit panel ───────────────────────────────────────────────── */

.brv-fq-edit {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-fq-edit__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-fq-edit__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-fq-edit__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-fq-edit__line {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 13px;
}

[data-fq-unsaved]:not(:empty) {
  color: var(--color-warning-soft-text);
  font-weight: 500;
}

.brv-fq-close {
  flex: none;
  margin: -4px -6px 0 0;
}

.brv-fq-edit__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 18px 20px;
}

.brv-fq-edit__body > .alert {
  margin: 0;
}

.brv-fq-form,
.brv-fq-new {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  min-width: 0;
}

.brv-fq-form .form-field,
.brv-fq-new .form-field {
  margin: 0;
}

.brv-fq-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 12px;
  align-items: start;
}

.brv-fq-answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-fq-answer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brv-fq-answer__head .form-field__label {
  margin: 0;
}

.brv-fq-opt {
  margin-inline-start: 6px;
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 400;
}

.brv-fq-edited[hidden] {
  display: none;
}

.input.brv-fq-source {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  padding: 10px 12px;
  resize: vertical;
}

.brv-fq-over {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-fq-preview {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.brv-fq-preview > p {
  margin: 0;
}

.brv-fq-preview a {
  color: var(--color-accent);
}

.brv-fq-preview code {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
}

.brv-fq-preview__empty {
  color: var(--color-text-subtle);
  font-size: 13px;
}

.brv-fq-site {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-fq-site__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.brv-fq-site__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-fq-site__label {
  font-size: 13px;
  font-weight: 600;
}

.brv-fq-site__hint {
  color: var(--color-text-subtle);
  font-size: 12px;
}

.brv-fq-site__row > .brv-c-inline-form {
  flex: none;
}

.brv-fq-edit__foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface-alt);
}

.brv-fq-edit__note {
  flex: 1 1 150px;
  min-width: 0;
  color: var(--color-text-subtle);
  font-size: 12px;
}

.brv-fq-edit__actions {
  display: inline-flex;
  flex: none;
  gap: 8px;
  margin-inline-start: auto;
}

/* A question on its own page, or alone below 1280px, reads at a form's
   width. */
.brv-fq-own,
.brv-fq-split--open > .brv-fq-main {
  max-width: 760px;
}

@media (min-width: 1280px) {
  .brv-fq-split--open > .brv-fq-main {
    max-width: none;
  }
}

@media (max-width: 767.98px) {
  .brv-fq-pair {
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .brv-fq-edit__head,
  .brv-fq-edit__body,
  .brv-fq-edit__foot {
    padding-inline: 16px;
  }

  .brv-fq-site__row {
    flex-direction: column;
  }
}

/* ── E · the page ─────────────────────────────────────────────────────── */

.brv-vd-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.brv-vd-subtle {
  color: var(--color-text-subtle);
}

.brv-vd-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.brv-vd-more:hover {
  color: var(--color-text);
}

/* ── E · What each job uses ───────────────────────────────────────────── */

.brv-vd-jobtable {
  border: 0;
  border-radius: 0;
}

@media (min-width: 1280px) {
  .brv-vd-jobtable .data-table__table th:nth-child(1) {
    width: 210px;
  }

  .brv-vd-jobtable .data-table__table th:nth-child(2),
  .brv-vd-jobtable .data-table__table th:nth-child(3) {
    width: 230px;
  }
}

.brv-vd-jobtable .data-table__table td {
  height: 52px;
  vertical-align: middle;
  white-space: normal;
}

.brv-vd-job {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brv-vd-job__name {
  font-weight: 600;
  white-space: nowrap;
}

.brv-vd-quiet {
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-vd-quiet:hover {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-vd-who {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-vd-means {
  color: var(--color-text-muted);
  line-height: 1.5;
  min-width: 220px;
}

.brv-vd-chip {
  height: 20px;
  padding: 0 7px;
  font-size: 11.5px;
}

/* ── E · one section per kind ─────────────────────────────────────────── */

.brv-vd-kind {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.brv-vd-kind__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}

.brv-vd-kind__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brv-vd-kind__count,
.brv-vd-kind__note {
  color: var(--color-text-subtle);
  font-size: 13px;
}

.brv-vd-kind__note::before {
  content: '·';
  margin-inline-end: 10px;
}

.brv-vd-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 768px) {
  .brv-vd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .brv-vd-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.brv-vd-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-vd-card--unset {
  border-style: dashed;
  background: transparent;
}

.brv-vd-card__head {
  gap: 12px;
}

.brv-vd-card__id {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brv-c-favicon.brv-vd-mark {
  width: 32px;
  height: 32px;
}

.brv-vd-card__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-vd-card__title {
  overflow: hidden;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.brv-vd-card__title:hover {
  color: var(--color-accent);
}

.brv-vd-card__code {
  overflow: hidden;
  color: var(--color-text-subtle);
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-vd-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
}

.brv-vd-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: start;
}

.brv-vd-card__foot > .brv-c-inline-form {
  margin: 0;
}

.brv-c-kv.brv-vd-kv {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px 14px;
  font-size: 13px;
}

.brv-vd-kv dd {
  margin: 0;
  min-width: 0;
}

.brv-vd-val {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.brv-vd-names {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.brv-vd-secret {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.brv-vd-secret--set {
  color: var(--color-success);
}

.brv-vd-secret--unset {
  color: var(--color-danger);
}

.brv-vd-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.brv-vd-copy__label {
  color: var(--color-text-subtle);
  font-size: 12px;
}

/* A webhook address or redirect URI is read whole: it wraps, never elides. */
.brv-vd-copy .brv-ak-copyfield {
  align-items: flex-start;
  padding-block: 4px;
}

.brv-vd-copy .brv-ak-copyfield__text {
  padding-block: 4px;
  overflow: visible;
  line-height: 1.45;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.brv-vd-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.brv-vd-note > .brv-i {
  flex: none;
  margin-top: 2px;
}

.brv-vd-lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.brv-vd-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-subtle);
  font-size: 13px;
}

.brv-vd-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .brv-fq-main > .brv-fq-edit,
  .brv-vd-card {
    animation: none;
  }
}

/* "Set · write-only": the state, then what it means for the value. */
.brv-vd-wo {
  margin-inline-start: 4px;
}


/* ══ Section 9 · Settings ══════════════════════════════════════════════════════ */

/* ── Section 9 · F · Settings (/settings) as a two-pane hub ─────────────── */
/* design/v3/S9-staff-platform.md §F; the canvas's StaffSettings board.
   The group list on the left, the chosen group (`?group=`) on the right,
   both drawn on the server (Settings.views.ts). Tokens only, unlayered
   like the rest of the v3 layer. Behaviour: console-v3.js. */

.brv-set {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.brv-set-side,
.brv-set-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.brv-set-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ── The group list ─────────────────────────────────────────────────── */

.brv-set-groups > .brv-c-panel__head {
  min-height: 44px;
}

.brv-set-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-set-list > li + li > .brv-set-group {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-set-group {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--brv-dur-quick) var(--brv-ease-out);
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-set-list > li:nth-child(2) > .brv-set-group { animation-delay: 25ms; }
.brv-set-list > li:nth-child(3) > .brv-set-group { animation-delay: 50ms; }
.brv-set-list > li:nth-child(4) > .brv-set-group { animation-delay: 75ms; }
.brv-set-list > li:nth-child(5) > .brv-set-group { animation-delay: 100ms; }
.brv-set-list > li:nth-child(6) > .brv-set-group { animation-delay: 125ms; }
.brv-set-list > li:nth-child(7) > .brv-set-group { animation-delay: 150ms; }
.brv-set-list > li:nth-child(8) > .brv-set-group { animation-delay: 175ms; }
.brv-set-list > li:nth-child(n + 9) > .brv-set-group { animation-delay: 200ms; }

.brv-set-group:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
  text-decoration: none;
}

.brv-set-group:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.brv-set-group > .brv-i {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-set-group--on,
.brv-set-group--on:hover {
  background: var(--accent-tint);
}

.brv-set-group--on::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-accent);
}

.brv-set-group--on > .brv-i {
  color: var(--color-accent);
}

.brv-set-group__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.brv-set-group__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
}

.brv-set-group__sum {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--color-text-subtle);
  overflow-wrap: break-word;
}

.brv-set-group__warn {
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-warning);
}

/* An address in a summary: whole, or cut with an ellipsis. */
.brv-set-group__word {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.brv-set-group__n {
  flex: none;
  padding-top: 2px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.brv-set-group > .badge {
  flex: none;
  height: 18px;
  margin-top: 1px;
  padding: 0 6px;
  font-size: 11px;
}

.brv-set-groups__foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  text-align: left;
}

/* ── Reload configuration ───────────────────────────────────────────── */

/* A quiet panel: a solid hairline, as every panel that holds content. */
.brv-set-reload {
  background: transparent;
}

.brv-set-reload > .brv-c-panel__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brv-set-reload__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brv-set-reload__head > .brv-c-panel__title {
  margin: 0;
  font-size: 15px;
}

.brv-set-reload__text,
.brv-set-reload__note {
  margin: 0;
  line-height: 1.55;
}

.brv-set-reload__text {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-set-reload__note {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-set-reload form {
  display: flex;
}

/* ── One group ──────────────────────────────────────────────────────── */

.brv-set-pane {
  animation: m-fade var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-set-pane__head {
  align-items: flex-start;
  flex-wrap: nowrap;
  padding: 16px 20px 14px;
}

.brv-set-pane__head > .brv-c-panel__heading {
  flex: 1 1 auto;
  gap: 4px;
}

.brv-set-pane__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.brv-set-pane__title > .brv-c-panel__title {
  margin: 0;
  font-size: 18px;
}

.brv-set-pane__about {
  max-width: 600px;
  font-size: 13px;
  line-height: 1.5;
}

.brv-set-pane__links {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.brv-set-pane__alert {
  margin: 16px 20px 0;
}

.brv-set-pane__alert > .alert {
  margin: 0;
}

/* One setting: its words on the left, the control and what it reaches
   on the right. */
.brv-set-row {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 18px 20px;
}

.brv-set-row + .brv-set-row {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-set-row__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brv-set-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
}

.brv-set-row__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-set-chip {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-set-row--missing .brv-set-chip {
  color: var(--color-warning);
}

.brv-set-row__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-set-row__ctl {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.brv-set-row__ctl > .form-field {
  max-width: 560px;
  margin: 0;
}

.brv-set-row__ctl > .form-field :is(input[type="number"]) {
  max-width: 160px;
}

.brv-set-row__ctl > .form-field .select {
  max-width: 360px;
}

.brv-set-row__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-set-row__hint:empty {
  display: none;
}

.brv-set-row__hint > .badge {
  height: 18px;
  padding: 0 6px;
  font-size: 11px;
}

.brv-set-var {
  padding: 0;
  background: none;
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.brv-set-var + .brv-set-var {
  margin-left: 6px;
}

.brv-set-row__derived {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-set-row__derived > .brv-i {
  flex: none;
  margin-top: 2px;
}

.brv-set-row__shows {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The foot: how a save works, and Save — the accent once changed. */
.brv-set-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 12px 20px;
  text-align: left;
}

.brv-set-foot__note {
  display: flex;
  flex: 1 1 320px;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.brv-set-foot__note > .brv-i {
  flex: none;
  margin-top: 2px;
}

.brv-set-foot__dirty {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.brv-set-foot__dirty[hidden] {
  display: none;
}

.brv-set-foot > .btn {
  margin-left: auto;
}

/* ── Narrower ───────────────────────────────────────────────────────── */

@media (max-width: 1279.98px) {
  .brv-set {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
  }

  .brv-set-row {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 8px 20px;
  }
}

@media (max-width: 1023.98px) {
  .brv-set-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-set-pane__head {
    flex-wrap: wrap;
  }

  .brv-set-pane__links {
    justify-content: flex-start;
  }
}

/* A phone: the list, then the group, then Reload. */
@media (max-width: 767.98px) {
  .brv-set {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .brv-set-side {
    display: contents;
  }

  .brv-set-main {
    order: 1;
  }

  .brv-set-reload {
    order: 2;
  }

  .brv-set-row,
  .brv-set-pane__head,
  .brv-set-foot {
    padding-inline: 16px;
  }

  .brv-set-pane__alert {
    margin-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-set-group,
  .brv-set-pane {
    animation: none;
    transition: none;
  }
}


/* ══ Section 9 · Staff access, staff audit log ═════════════════════════════════ */

/* ── G · Staff access: the Groups tab (/groups for staff) ────────────────
   The StaffAccess board: a card per group (system first, then custom or
   the empty "Custom groups" card), the rules line, and the Section 5
   matrix in staff's bands. */

.brv-sa-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.brv-sa-card {
  display: flex;
  flex-direction: column;
}

.brv-sa-card--quiet {
  background: var(--color-surface-alt);
}

.brv-sa-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  min-height: 150px;
  padding: 16px;
}

.brv-sa-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.brv-sa-card__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brv-sa-card__name > .brv-c-attn {
  flex: none;
}

.brv-sa-card__name > .brv-c-panel__title {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-sa-card__lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.brv-sa-card__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-sa-card__note {
  margin: auto 0 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-sa-card__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: auto 0 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-sa-card__counts b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-sa-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}

.brv-sa-card__who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-text-muted);
}

.brv-sa-card__who > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-sa-card__foot > a {
  flex: none;
}

/* The matrix in bands: each band its own table under a heading, the
   columns lined up across them; the header row is read once. */
.brv-gp-mx {
  display: flex;
  flex-direction: column;
}

.brv-gp-mx__band + .brv-gp-mx__band {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-gp-mx__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 16px;
  background: var(--color-surface-alt);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-gp-mx .data-table__table {
  table-layout: fixed;
  width: 100%;
}

.brv-gp-mx .data-table__table th:first-child,
.brv-gp-mx .data-table__table td:first-child {
  width: 42%;
}

.brv-gp-mx .brv-gp-area {
  max-width: none;
}

/* The group columns share what the area column leaves (v3 gives the
   Section 5 matrix fixed 130px columns). */
.brv-gp-mx .data-table__table td:not(:first-child),
.brv-gp-mx .data-table__table th:not(:first-child) {
  width: auto;
}

/* After the first band the header row is read, not seen: it keeps its
   place in the table's layout (so the columns line up) at no height. */
.brv-gp-mx__band + .brv-gp-mx__band thead th {
  height: 0;
  padding-block: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
}

/* Another band's permission: its place kept, blank. */
.brv-gp-bit--gap {
  visibility: hidden;
}

.brv-gp-mx__summary {
  list-style: none;
  cursor: pointer;
}

.brv-gp-mx__summary::-webkit-details-marker {
  display: none;
}

.brv-gp-mx__summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.brv-gp-mx__counts {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.brv-gp-mx__show {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-accent);
}

.brv-gp-mx__show > .brv-i {
  transition: transform var(--brv-dur-base, 0.2s) ease;
}

.brv-gp-mx__more[open] .brv-gp-mx__show > .brv-i {
  transform: rotate(180deg);
}

.brv-gp-mx__close,
.brv-gp-mx__more[open] .brv-gp-mx__open {
  display: none;
}

.brv-gp-mx__more[open] .brv-gp-mx__close {
  display: inline;
}

/* ── G · Staff access: the API keys tab (/api-keys for staff) ───────── */

.brv-sa-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sa-fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-sa-fact + .brv-sa-fact {
  border-left: 1px solid var(--color-border-subtle);
}

.brv-sa-fact > .brv-i {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

@media screen and (max-width: 1279.98px) {
  .brv-sa-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767.98px) {
  .brv-sa-cards,
  .brv-sa-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-sa-fact + .brv-sa-fact {
    border-left: 0;
    border-top: 1px solid var(--color-border-subtle);
  }

  .brv-gp-mx .data-table__table th:first-child,
  .brv-gp-mx .data-table__table td:first-child {
    width: 55%;
  }
}

/* ── H · The staff audit log (/audit for staff) ───────────────────────
   The StaffAudit board: the scope first (All organisations · Platform
   only as a segmented, then the organisation picker), then the filters
   on a second line with "Who: email or id" typed; the rail of Retention
   and Exports under the list; the entry's note on what the organisation
   sees, and its ways on in the foot. */

.brv-al-toolbar--staff .brv-al-break {
  flex: 1 0 100%;
  height: 0;
}

.data-table__toolbar .brv-al-org-pick {
  flex: 0 1 240px;
  min-width: 200px;
}

.brv-al-org-pick--on .combobox__field {
  border-color: var(--color-accent);
}

.brv-al-who-filter .input-icon,
.brv-al-who-filter .input {
  width: 220px;
  max-width: 100%;
}

.data-table__toolbar .brv-al-who-filter > .input-icon .input {
  height: 34px;
}

.brv-al-recchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
}

.brv-al-recchip__x {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  color: var(--color-text-subtle);
}

.brv-al-recchip__x:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.brv-al-seen {
  flex: none;
}

.brv-al-entry__tools {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
}

.brv-al-entry--staff .brv-al-entry__foot {
  flex-wrap: wrap;
}

.brv-al-entry__acts {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.brv-al-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.brv-al-rail__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-al-keep {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-al-keep > b {
  font-family: var(--font-family-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.brv-al-rail__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

@media screen and (max-width: 767.98px) {
  .brv-al-rail {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The staff entry page: its record actions side by side. */
.brv-al-page__foot {
  gap: 8px;
}

/* ══ Section 10 · Signed-out frame, sign in, sign up, two-factor ══════════════ */

/* ── The signed-out frame (views/auth.ts `authFrame`) ─────────────────── */
/* The form column LEFT (top bar, page, footer), the dark brand panel RIGHT.
   Below 768px ONE column in source order: the 56px bar, the form, the brand
   panel folded below it, the footer — the design's own layout--auth-split
   put the panel first and the form off-screen. */

.brv-au {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "top aside"
    "main aside"
    "foot aside";
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-canvas);
  color: var(--color-text);
}

.brv-au__top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 56px 0;
}

.brv-au__home {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brv-au__top-aside {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-au__top-step {
  color: var(--color-text-subtle);
}

.brv-au__main {
  grid-area: main;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 56px;
}

.brv-au__column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 400px;
}

.brv-au__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 0 56px 32px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-au__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.brv-au__legal a {
  color: inherit;
  text-decoration: none;
}

.brv-au__legal a:hover,
.brv-au__legal a:focus-visible {
  color: var(--color-text);
  text-decoration: underline;
}

/* The testing notice, as a quiet amber strip above the page. */
.brv-au-testing {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
  font-size: 12.5px;
  line-height: 1.45;
}

.brv-au-testing > svg {
  flex: none;
  margin-top: 2px;
}

/* ── The brand panel ──────────────────────────────────────────────────── */

.brv-au__aside {
  grid-area: aside;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 56px;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.brv-au__aside a {
  color: var(--color-accent-inverse);
}

.brv-au-over {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-au__aside .brv-au-over {
  color: inherit;
  opacity: 0.62;
}

.brv-au__story {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 520px;
}

.brv-au__hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brv-au__tagline {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: inherit;
}

.brv-au__lede {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0.74;
}

.brv-au-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
  border-radius: var(--radius-lg);
  font-size: 15px;
  line-height: 1.5;
}

.brv-au-card p {
  margin: 0;
}

.brv-au-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.brv-au-card__foot {
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-text-inverse) 14%, transparent);
  font-size: 13.5px;
  opacity: 0.74;
}

.brv-au-price {
  font-family: var(--font-family-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}

.brv-au-well {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-text-inverse) 7%, transparent);
  font-size: 13.5px;
}

.brv-au-well__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  opacity: 0.74;
}

.brv-au-well__row > svg {
  flex: none;
}

.brv-au-well__dest {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-au-well__note {
  font-size: 12px;
  opacity: 0.6;
}

.brv-au-mono {
  font-family: var(--font-family-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.brv-au__aside .brv-au-mono,
.brv-au-plus {
  color: var(--color-accent-inverse);
}

.brv-au-plus {
  font-family: var(--font-family-mono);
  font-weight: 700;
}

.brv-au-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-au-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.brv-au-point > svg {
  flex: none;
  margin-top: 3px;
  color: var(--color-accent-inverse);
}

.brv-au__aside-foot {
  max-width: 520px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.74;
}

/* ── The pages ────────────────────────────────────────────────────────── */

.brv-au .brv-c-auth-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: none;
}

.brv-au .brv-c-auth-title {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.brv-au .brv-c-auth-sub {
  margin: -12px 0 0;
  font-size: 15px;
  line-height: 1.5;
}

.brv-au .brv-c-auth-form {
  gap: 16px;
}

.brv-au .brv-c-auth-foot {
  margin: 0;
}

.brv-au__column .input,
.brv-au__column .otp__value {
  height: var(--control-height-lg);
  font-size: 15px;
}

.brv-au__column .password__input {
  height: var(--control-height-lg);
}

/* "Forgot password?" sits in the password's label row. */
.brv-au-pw {
  position: relative;
}

.brv-au-pw__forgot {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-accent);
}

.brv-au-remember .choice__label {
  font-size: 13.5px;
}

.brv-au-ways {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brv-au .brv-c-or {
  margin: 2px 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
}

.brv-au-social {
  display: flex;
  gap: 8px;
}

.brv-au-social__btn {
  flex: 1 1 0;
  min-width: 0;
}

.brv-au-mark {
  flex: none;
  width: 16px;
  height: 16px;
}

.brv-au-rule {
  font-size: 13px;
}

.brv-au-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brv-au-fine {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-au-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-au-note > svg {
  flex: none;
  margin-top: 2px;
}

/* Sign up: what the address will name, then the code line. */
.brv-au-email .form-field__help {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-au-derive {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-au-derive > svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-accent);
}

.brv-au-derive strong {
  color: var(--color-text);
}

/* The code page's foot: a resend (its own one-button form) and a way back. */
.brv-au-resend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-au-resend form {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}

/* Single sign-on and the code steps. */
.brv-au-back {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 13.5px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-au-back:hover,
.brv-au-back:focus-visible {
  color: var(--color-text);
}

.brv-au-bigicon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-au-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.brv-au-steps ol {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: brv-au-step;
}

.brv-au-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  counter-increment: brv-au-step;
}

.brv-au-steps li::before {
  content: counter(brv-au-step);
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.brv-au-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 13.5px;
}

.brv-au-chip__av {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-text);
  color: var(--color-canvas);
  font-size: 10.5px;
  font-weight: 600;
}

.brv-au-chip__mail {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-au-chip a {
  flex: none;
  font-size: 13px;
}

.brv-au-otp .otp__cells {
  gap: 8px;
}

.brv-au-otp .otp__cell {
  width: 54px;
  height: 60px;
  font-size: 24px;
  font-weight: 600;
}

.brv-au-otp .otp__sep {
  flex: none;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-border-strong);
}

.brv-au-mono-input {
  font-family: var(--font-family-mono);
  letter-spacing: 0.04em;
}

.brv-au-swap {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-size: 13.5px;
  color: var(--color-accent);
}

.brv-au-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.brv-au-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-au-facts li > svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

/* ── Narrower screens ─────────────────────────────────────────────────── */

@media (max-width: 1279.98px) {
  .brv-au__top {
    padding: 28px 40px 0;
  }

  .brv-au__main {
    padding: 32px 40px;
  }

  .brv-au__foot {
    padding: 0 40px 28px;
  }

  .brv-au__aside {
    padding: 48px 40px;
  }

  .brv-au__tagline {
    font-size: 46px;
  }
}

@media (max-width: 1023.98px) {
  .brv-au__top,
  .brv-au__foot {
    padding-inline: 28px;
  }

  .brv-au__main {
    padding: 28px;
  }

  .brv-au__aside {
    padding: 40px 28px;
  }

  .brv-au__tagline {
    font-size: 38px;
  }

  .brv-au-social {
    flex-wrap: wrap;
  }
}

/* Phone: one column in source order, the logo in a 56px bar (the only
   thing that stays put), touch targets 42px. */
@media (max-width: 767.98px) {
  .brv-au {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "top"
      "main"
      "aside"
      "foot";
  }

  .brv-au__top {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 56px;
    padding: 0 20px;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-canvas);
  }

  .brv-au__top .brv-logo {
    width: 88px;
    height: 20px;
  }

  .brv-au__top-lead {
    display: none;
  }

  .brv-au__top-aside a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
  }

  .brv-au__main {
    align-items: flex-start;
    padding: 20px;
  }

  .brv-au__column {
    max-width: none;
    gap: 14px;
  }

  .brv-au .brv-c-auth-title {
    font-size: 24px;
  }

  .brv-au .brv-c-auth-sub {
    margin-top: -10px;
    font-size: 14px;
  }

  .brv-au__aside {
    gap: 20px;
    padding: 24px 20px;
  }

  .brv-au__story {
    gap: 20px;
  }

  .brv-au__hero {
    gap: 8px;
  }

  .brv-au__tagline {
    font-size: 30px;
  }

  .brv-au__lede {
    font-size: 14px;
  }

  .brv-au-card {
    padding: 16px;
    font-size: 14px;
  }

  .brv-au__foot {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 20px 24px;
  }

  .brv-au__legal a,
  .brv-au-pw__forgot,
  .brv-au-swap,
  .brv-au-back,
  .brv-au-chip a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
  }

  .brv-au-pw__forgot {
    top: -12px;
  }

  .brv-au-remember {
    min-height: 42px;
    align-items: center;
  }

  .brv-au-social__btn {
    padding-inline: 8px;
    font-size: 14px;
  }

  .brv-au-otp .otp__cells {
    gap: 6px;
  }

  .brv-au-otp .otp__cell {
    width: 44px;
    height: 52px;
    font-size: 21px;
  }
}


/* ══ Section 10 · Password reset ══════════════════════════════════════════════ */

/* ══ Section 10 §C · Reset password (ResetPassword.dc.html) ═══════════════
   One flow in three steps, each inside the signed-out frame: ask for a
   link → check your email → choose a new password (PasswordReset.views.ts).
   Tokens only; the stepper is the kit's wizard steps restyled. */

.brv-rst {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: m-rise var(--brv-dur-slow) var(--brv-ease-out) both;
}

.brv-rst-back {
  align-self: flex-start;
  margin-inline-start: -10px;
}

/* The title and its line keep the signed-out pages' type (sign-in's
   rules); here they are one block, so the line needs no pull-up. */
.brv-rst-head {
  display: grid;
  gap: 8px;
}

.brv-rst-head .brv-c-auth-sub {
  margin: 0;
}

.brv-rst-head .brv-c-auth-sub strong {
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

/* The stepper: three equal columns, the number over its label, a rule
   from each number to the next (accent once the step is done). */
.brv-rst-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-rst-steps .wizard__step {
  position: relative;
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
  padding-inline-end: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--color-text-subtle);
}

.brv-rst-steps .wizard__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 11px;
  inset-inline: 30px 8px;
  height: 1px;
  margin: 0;
  background: var(--color-border);
}

.brv-rst-steps .wizard__step--done:not(:last-child)::after {
  background: var(--color-accent);
}

.brv-rst-steps .wizard__step-index {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: 12px;
  font-weight: 600;
}

.brv-rst-steps .wizard__step-label {
  display: block;
  white-space: normal;
}

.brv-rst-steps .wizard__step--done .wizard__step-index {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
}

.brv-rst-steps .wizard__step--active {
  font-weight: 600;
  color: var(--color-text);
}

.brv-rst-steps .wizard__step--active .wizard__step-index {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--accent-tint-strong);
  color: var(--color-accent);
}

/* The step's big icon: mail sent, or a link that no longer works. */
.brv-rst-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
  animation: m-pop var(--brv-dur-slow) var(--brv-ease-spring) both;
}

.brv-rst-icon--warn {
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-rst-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-rst-tips {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-rst-tips li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-rst-tips li > svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

.brv-rst-tips strong {
  font-weight: 600;
  color: var(--color-text);
}

/* Ask: the tips sit under a rule, below the form. */
.brv-rst > .brv-c-auth-form + .brv-rst-tips {
  padding-top: 18px;
  border-top: 1px solid var(--color-border-subtle);
}

/* Check your email: "What arrives", a mini email with an inert button. */
.brv-rst-mail {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.brv-rst-mail__head {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-surface-alt);
}

.brv-rst-mail__subject {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-rst-mail__body {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}

.brv-rst-mail__body p {
  margin: 0;
  overflow-wrap: anywhere;
}

.brv-rst-mail__body p:last-child {
  color: var(--color-text-subtle);
}

.brv-rst-mail__btn {
  pointer-events: none;
  cursor: default;
}

/* The neutral alert's own icon keeps its size beside a long line. */
.brv-rst > .alert > svg {
  flex: none;
  margin-top: 2px;
}

.brv-rst-fine {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-rst-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brv-rst-actions > .btn:first-child {
  flex: 1 1 auto;
}

/* Choose: the removal box as an option card, accent when ticked. */
.brv-rst-option > .choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
}

.brv-rst-option > .choice:has(.choice__input:checked) {
  border-color: var(--color-accent);
  outline: 1px solid var(--color-accent);
}

.brv-rst-option .choice__input {
  flex: none;
  margin-top: 2px;
}

.brv-rst-option .choice__label {
  display: grid;
  gap: 3px;
}

.brv-rst-option__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-rst-option__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-rst-then {
  display: grid;
  gap: 10px;
}

/* The removal line follows the box (where :has() is not supported it
   stays, and its words say it depends on the box). */
.brv-rst-choose:has(input[name="revokeAll"]:not(:checked)) .brv-rst-then__remove {
  display: none;
}

/* Phone: 42px touch targets. */
@media (max-width: 767.98px) {
  .brv-rst-back {
    min-height: 42px;
  }
}


/* ══ Section 10 · Your account ════════════════════════════════════════════════ */

/* ── Your account (/profile; the canvas's Profile and ProfileSecurity
   boards). ONE page of anchored sections beside the hub's sub-navigation
   (brv-c-hub): each section is a settings row (300px of words, the
   controls beside), its body cards of rows. Tokens only; unlayered, like
   the rest of the v3 layer. Behaviour: console-v3.js. ──────── */

.brv-acct {
  display: grid;
  gap: 20px;
}

/* ── the sub-navigation: a rule, then Delete account in red ─────────── */
.brv-acct-nav__rule {
  display: block;
  height: 1px;
  margin: 10px;
  background: var(--color-border-subtle);
}

.brv-acct-nav .brv-acct-nav__danger,
.brv-acct-nav .brv-acct-nav__danger .brv-c-hub__icon {
  color: var(--color-danger);
}

.brv-acct-nav .brv-acct-nav__danger:hover {
  color: var(--color-danger);
}

/* ── the sections ───────────────────────────────────────────────────── */
.brv-acct-main {
  gap: 0;
}

.brv-acct-sec,
.brv-acct-banner {
  scroll-margin-top: calc(var(--brv-c-topbar, 56px) + 20px);
}

.brv-acct-sec .brv-c-settings-row__text > * {
  margin: 0;
}

/* The body takes the whole right-hand column (settings rows start-align
   a control at its own width). */
.brv-acct-sec > .brv-acct-ctl {
  display: grid;
  justify-self: stretch;
  gap: 16px;
  min-width: 0;
}

/* The Security banner opens the second half of the page. */
.brv-acct-banner {
  margin: 20px 0 4px;
}

.brv-acct-banner + .brv-acct-sec {
  padding-top: 20px;
}

.brv-acct-notice,
.brv-acct-enrol {
  margin: 0;
}

/* ── cards of rows (the boards' pf-row / ps-row) ────────────────────── */
.brv-acct-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.brv-acct-card
  > :is(.brv-acct-head, .brv-acct-row, .brv-acct-foot, .data-table, .brv-acct-empty)
  + :is(.brv-acct-row, .brv-acct-foot, .data-table, .brv-acct-empty) {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-acct-card > .data-table {
  border: 0;
  border-radius: 0;
}

.brv-acct-card > .data-table + .brv-acct-foot {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-acct-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}

.brv-acct-row--big {
  padding: 16px;
}

.brv-acct-row--big > .brv-c-attn {
  width: 36px;
  height: 36px;
}

.brv-acct-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-acct-row__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-acct-row__hint {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-acct-row__end,
.brv-acct-acts {
  display: inline-flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.brv-acct-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 8px 16px;
}

.brv-acct-head__text {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-acct-foot {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-acct-foot > .brv-i {
  flex: none;
  margin-top: 2px;
}

.brv-acct-here {
  font-size: 12px;
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.brv-acct-empty {
  padding: 4px 16px 12px;
}

/* ── Profile: the avatar card, the form ─────────────────────────────── */
.brv-acct-who {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* The signed-in person in ink (G4 · Avatars). */
.brv-acct-who__av.avatar {
  flex: none;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-acct-who__text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.brv-acct-who__name {
  font-family: var(--font-family-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-acct-who__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.brv-acct-who__of {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-acct-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

.brv-acct-form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.brv-acct-form > .form-field,
.brv-acct-form > .alert {
  margin: 0;
}

.brv-acct-form .brv-acct-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.brv-acct-form .brv-acct-grid > .form-field {
  margin: 0;
  min-width: 0;
}

.brv-acct-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ── Email: how a change works ──────────────────────────────────────── */
.brv-acct-steps {
  display: grid;
  gap: 8px;
}

.brv-acct-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-acct-steps__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-acct-steps__list > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text);
}

.brv-acct-step__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
}

/* ── Preferences: the theme's icons; with the script, the choice saves
   itself (the Save button is for a page without it) ──────────────────── */
.brv-acct-theme .segmented__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.js [data-pf-prefs-save] {
  display: none;
}

/* ── Emails you get ─────────────────────────────────────────────────── */
.brv-acct-mail {
  text-decoration: underline dotted var(--color-border-strong);
  text-underline-offset: 3px;
}

.brv-acct-chip {
  flex: none;
}

.brv-acct-chip--quiet {
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

/* ── Recovery codes: the count, its meter ───────────────────────────── */
.brv-acct-recovery {
  gap: 20px;
}

.brv-acct-recovery__count {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  min-width: 0;
}

.brv-acct-big {
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--color-text);
}

.brv-acct-big small {
  margin-left: 6px;
  font-family: var(--font-family-base);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-text-subtle);
}

.brv-acct-codes {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-acct-codes code {
  padding: 0;
  background: none;
  font-family: var(--font-family-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

/* The one-time panels (a key's secret, new recovery codes) sit over the page. */
.brv-acct-made {
  margin: 0;
}

/* ── Delete account ─────────────────────────────────────────────────── */
.brv-acct-danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
}

.brv-acct-danger__body {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.brv-acct-goes {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-acct-goes > li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.brv-acct-goes > li > .brv-i {
  flex: none;
  margin-top: 3px;
  color: var(--color-text-subtle);
}

.brv-acct-delete {
  max-width: 380px;
}

.brv-acct-blocked {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 0;
}

.brv-acct-blocked__text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.brv-acct-blocked__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-acct-blocked__sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-acct-blocked__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 16px 16px 54px;
}

.brv-acct-blocked__acts .btn[disabled] {
  cursor: not-allowed;
}

.brv-acct-link {
  font-size: 13px;
}

.brv-acct-blocked__foot {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-subtle);
}

/* ── narrower ───────────────────────────────────────────────────────── */

/* Under 1280px the hub leaves too little beside a 300px heading column:
   each section's heading sits above its body (as Settings › General). */
@media screen and (max-width: 1279.98px) {
  .brv-acct-sec {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

@media screen and (max-width: 1023.98px) {
  .brv-acct-nav__rule {
    display: none;
  }
}

@media screen and (max-width: 767.98px) {
  .brv-acct-form .brv-acct-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-acct-row {
    flex-wrap: wrap;
  }

  .brv-acct-row__end {
    justify-content: flex-start;
    width: 100%;
    padding-left: 40px;
  }

  .brv-acct-blocked__acts {
    padding-left: 16px;
  }

  .brv-acct-codes {
    grid-template-columns: max-content;
  }
}


/* ══ Section 10 · Access denied, Report a link ════════════════════════════════ */

/* ══ F · Access denied (the 403 page, inside the shell) ══════════════════
   The canvas's AccessDenied board: a 640px column — the lock and the
   overline, the title and the no-fault line, the facts, who can give
   access, the ways out. Tokens only; panels keep the v3 frame. */

.brv-er {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 32px;
}

.brv-er > * {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-er > :nth-child(2) { animation-delay: 25ms; }
.brv-er > :nth-child(3) { animation-delay: 50ms; }
.brv-er > :nth-child(4) { animation-delay: 75ms; }
.brv-er > :nth-child(5) { animation-delay: 100ms; }
.brv-er > :nth-child(n + 6) { animation-delay: 125ms; }

.brv-er-over {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brv-er-icon.brv-c-attn {
  width: 40px;
  height: 40px;
}

.brv-er-meta {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-er-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brv-er-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.brv-er-lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* You opened · It needs · You have */
.brv-er-facts.brv-c-kv {
  display: grid;
  align-items: center;
  row-gap: 12px;
}

.brv-er-facts dd {
  min-width: 0;
  margin: 0;
}

.brv-er-mono,
.brv-er-code {
  padding: 0;
  background: none;
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.brv-er-needs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-er-need {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-width: 0;
}

.brv-er-need .badge {
  font-weight: 600;
}

.brv-er-need .brv-er-code {
  color: var(--color-text-subtle);
}

.brv-er-held {
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-er-groups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-er-groups > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.brv-er-grants {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-er-none {
  color: var(--color-text-subtle);
}

/* Who can give you access: one row per admin (kit.css b-list). */
.brv-er-admins {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-er-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-er-admin:first-child {
  border-top: 0;
}

.brv-er-admin:hover {
  background: var(--color-surface-alt);
}

/* The owner's initials in ink, as the kit marks the one who answers. */
.brv-er-admin__av--owner.avatar {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
}

.brv-er-admin__who {
  display: flex;
  flex: 1 1 160px;
  flex-direction: column;
  min-width: 0;
}

.brv-er-admin__name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

.brv-er-admin__mail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--color-text-subtle);
}

.brv-er-admin__roles {
  display: flex;
  gap: 6px;
}

.brv-er-panel .brv-c-panel__foot {
  text-align: left;
}

.brv-er-ask {
  font-weight: 600;
  color: var(--color-text);
}

.brv-er-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.brv-er-can {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-subtle);
}

@media (max-width: 767.98px) {
  .brv-er {
    padding-top: 8px;
  }

  .brv-er-title {
    font-size: 24px;
  }

  .brv-er-facts.brv-c-kv {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
  }

  .brv-er-facts dd + dt {
    margin-top: 10px;
  }

  .brv-er-admin > .btn {
    width: 100%;
    justify-content: center;
  }

  .brv-er-actions > .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ══ G · Report a link (/report, public) ═════════════════════════════════
   The canvas's ReportAbuse board: a slim public header, the title, the
   form beside the rail ("What happens next"). */

.brv-ra {
  min-height: 100vh;
  background: var(--color-canvas);
  color: var(--color-text);
}

.brv-ra-top {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 64px;
  padding: 0 40px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.brv-ra-home {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brv-ra-sep {
  flex: none;
  width: 1px;
  height: 22px;
  background: var(--color-border);
}

.brv-ra-where {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brv-ra-grow {
  flex: 1 1 auto;
}

.brv-ra-quiet {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brv-ra-quiet:hover {
  color: var(--color-text);
}

.brv-ra-site {
  gap: 6px;
}

.brv-ra-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(1136px, 100% - 48px);
  margin: 0 auto;
  padding: 36px 0 48px;
}

.brv-ra-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brv-ra-title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.brv-ra-sub {
  max-width: 720px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.brv-ra-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 32px;
  align-items: start;
}

.brv-ra-grid > * {
  animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
}

.brv-ra-grid > :nth-child(2) {
  animation-delay: 50ms;
}

/* The form */
.brv-ra-fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px;
}

.brv-ra-fields .form-field {
  margin: 0;
}

.brv-ra-link {
  font-family: var(--font-family-mono);
  font-size: 14px;
  letter-spacing: -0.01em;
}

.brv-ra-opt {
  font-weight: 400;
  color: var(--color-text-subtle);
}

/* The live check: empty (no height) until the server answers. */
.brv-ra-check {
  margin: 0;
  font-size: 12.5px;
  font-weight: 500;
}

.brv-ra-check > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  animation: m-fade var(--brv-dur-quick) var(--brv-ease-out) backwards;
}

.brv-ra-check > span[hidden] {
  display: none;
}

.brv-ra-check__yes {
  color: var(--color-success-soft-text);
}

.brv-ra-check__no {
  color: var(--color-warning-soft-text);
}

/* Category: radio cards (kit.css b-option, b-radio), two to a row. */
.brv-ra-reasons {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.brv-ra-reasons > legend {
  float: left;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
}

.brv-ra-reasons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.brv-ra-reason {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--brv-dur-quick), box-shadow var(--brv-dur-quick);
}

.brv-ra-reason:hover {
  border-color: var(--color-border-control);
}

.brv-ra-reason:has(:checked) {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.brv-ra-reason:has(:focus-visible) {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-ra-reasons.is-invalid .brv-ra-reason {
  border-color: var(--color-danger);
}

.brv-ra-reason__radio {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  border: 1.5px solid var(--color-border-control);
  border-radius: 50%;
  background: var(--color-surface);
  transition: border-width var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-ra-reason__radio:checked {
  border: 5px solid var(--color-accent);
}

.brv-ra-reason__radio:focus-visible {
  outline: none;
}

.brv-ra-reason__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-ra-reason__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-ra-reason__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.brv-ra-foot.brv-c-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-ra-foot__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-subtle);
}

.brv-ra-foot .btn {
  gap: 8px;
}

/* The rail: What happens next (the Deletion timeline's look). */
.brv-ra-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.brv-ra-steps .timeline__marker {
  width: 23px;
  height: 23px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.brv-ra-step--accent .timeline__marker {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-ra-step--danger .timeline__marker {
  border-color: transparent;
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-ra-steps .timeline__line {
  width: 1px;
}

.brv-ra-steps .timeline__body {
  padding-bottom: 18px;
}

.brv-ra-steps .timeline__item:last-child .timeline__body {
  padding-bottom: 0;
}

.brv-ra-steps .timeline__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.brv-ra-steps .timeline__meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* After sending: Report received. */
.brv-ra-done__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
}

.brv-ra-done__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
  animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) 100ms backwards;
}

.brv-ra-done__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brv-ra-done__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.brv-ra-done__sub {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-ra-ref {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 420px;
}

.brv-ra-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

.brv-ra-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 4px 0 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.brv-ra-copy__text {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  background: none;
  font-family: var(--font-family-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.brv-ra-copy .btn {
  flex: none;
}

.brv-ra-ref__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-subtle);
}

@media (max-width: 1023.98px) {
  .brv-ra-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 767.98px) {
  .brv-ra-top {
    gap: 12px;
    height: 56px;
    padding: 0 16px;
  }

  .brv-ra-site {
    display: none;
  }

  .brv-ra-main {
    width: calc(100% - 32px);
    padding: 24px 0 40px;
    gap: 20px;
  }

  .brv-ra-title {
    font-size: 24px;
  }

  .brv-ra-sub {
    font-size: 14px;
  }

  .brv-ra-fields {
    padding: 18px 16px;
  }

  .brv-ra-reasons__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .brv-ra-foot.brv-c-panel__foot {
    padding: 14px 16px;
  }

  .brv-ra-foot .btn {
    width: 100%;
    justify-content: center;
  }

  .brv-ra-done__body {
    padding: 20px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-er > *,
  .brv-ra-grid > *,
  .brv-ra-check > span,
  .brv-ra-done__icon {
    animation: none;
  }

  .brv-ra-reason,
  .brv-ra-reason__radio {
    transition: none;
  }
}

/* ══ Section 11 · Shared patterns (cards, sheets, filters, touch) ════════ */

/* brevily console — console v3 Section 11 §3 and §4 (design/v3/S11-phone-tablet.md;
   the canvas's Responsive board first, then LinksPhone/Tablet,
   LinkCreatePhone/Tablet, MembersPhone/Tablet, StaffReviewsPhone/Tablet):
   the patterns every page shares on a tablet and a phone — card rows,
   filters and select mode, sheets, the stat strip, main + rail, the page
   header, the touch rules, short links kept whole, wide tables that
   scroll inside their panel. The shell (the top bar, the tab bar) is
   Section 11 §1–2, beside this.

   ONE set of breakpoints, the v3 set, and no others:
     ≥1280 full sidebar · 1024–1279 the rail · 768–1023 tablet · <768 phone
   written as `max-width: 767.98px` / `min-width: 768px`,
   `max-width: 1023.98px` / `min-width: 1024px`,
   `max-width: 1279.98px` / `min-width: 1280px`.

   Desktop stays what it was: every rule that changes a table, a list or
   a modal sits inside a tablet or phone block. Outside them there are
   only the phone-only controls hidden (`.brv-card-phone`, the tablet's
   copies `.brv-card-under`), the short-link wrap and the fade on a table
   that scrolls sideways. views/cards.ts writes the `data-card*`
   attributes these rules read; console-v3.js adds the action
   sheet, select mode, the Filters sheet and the fade. Tokens only;
   unlayered; no box-shadow on a panel (sheets overlay). */

/* ── Everywhere ──────────────────────────────────────────────────────── */

/* Phone-only controls a list draws (Filters, Select) and the tablet's
   copy of a cell under its row's name: out of sight, and out of the tab
   order, until their width. */
.brv-card-phone,
.brv-card-under,
.brv-fab {
  display: none;
}

/* Short links stay whole (§4): a short link is a row of its parts — the
   domain with its slash, then the back-half — that wraps between them
   and never inside one while it fits a line; only a back-half longer
   than a whole line breaks inside, and nothing is ever cut with an
   ellipsis. Where the markup has no parts (a short link written as one
   string) it wraps at its slash like any text. The Overview's "Needs
   attention" rows ended theirs in an ellipsis: whole too. */
.brv-sl,
.brv-c-ov-attn__link {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.brv-c-ov-attn__link {
  overflow: visible;
  text-overflow: clip;
}

/* A table that stays a table where it cannot be read as cards (the audit
   log, a matrix of plans or permissions: `DataTable({ cards: false })`,
   or any box marked `brv-hscroll`) scrolls inside its panel; the edge
   that has more fades (console-v3.js says which). */
.brv-hscroll {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

:is(.data-table__scroll, .brv-hscroll, .brv-c-plangrid__scroll)[data-more="end"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

:is(.data-table__scroll, .brv-hscroll, .brv-c-plangrid__scroll)[data-more="start"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}

:is(.data-table__scroll, .brv-hscroll, .brv-c-plangrid__scroll)[data-more="both"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

/* ── Tablet and phone (below 1024) ───────────────────────────────────── */

@media screen and (max-width: 1023.98px) {
  /* Nothing a page holds may push it wider than the window: a wide table
     scrolls inside its own box instead. */
  .brv-c-page > *,
  .brv-c-panel,
  .brv-c-panel__body,
  .data-table {
    min-width: 0;
  }

  /* A box that scrolls sideways holds everything drawn in it, the
     positioned parts too (the plan grid's segmented radios). */
  .brv-c-plangrid__scroll {
    position: relative;
  }

  /* Row actions are never hover-only: the kebab and the quiet one-click
     actions beside it are as strong as any other control. */
  td.data-table__actions > .btn,
  .brv-c-rowquick,
  .brv-rp-quick,
  .brv-ig-acts {
    opacity: 1;
  }

  /* Main + rail: once they stack, what needs attention comes first. */
  .brv-c-attention,
  .brv-c-ov-grid > .brv-c-ov-rail:has(.brv-c-ov-attn__item) {
    order: -1;
  }

  /* The stat strip: a number never wraps (its unit may go under it), a
     sub-line stops at two lines. */
  .brv-c-fig__v {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 4px;
    white-space: nowrap;
  }

  .brv-c-fig__v small {
    margin-left: 0;
  }

  .brv-c-fig__s {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

/* ── Tablet (768–1023) ───────────────────────────────────────────────── */

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  /* Fewer columns: a column marked `tablet: 'hidden'` goes, one marked
     `tablet: 'under'` is drawn under its row's name instead. */
  .data-table [data-tablet] {
    display: none;
  }

  .brv-card-under {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin: 5px 12px 0 0;
    font-size: 12.5px;
    color: var(--color-text-subtle);
  }

  .brv-card-under[data-card-label]::before {
    content: attr(data-card-label);
  }

  .brv-card-under[data-card-unit]::after {
    content: attr(data-card-unit);
  }

  /* The filter bar: the status control scrolls sideways if it must,
     never the page. */
  .data-table__toolbar .brv-c-toolbar__filter:has(.segmented) {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  /* The page header: secondary actions with an icon become icon buttons
     (their words stay their accessible name). */
  .page-header__actions > .btn:not(.btn--accent):has(> .brv-i) {
    gap: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
  }

  /* A modal is at most 640 wide, a drawer 420. */
  :root dialog.modal {
    max-width: min(640px, calc(100vw - 32px));
  }

  :root dialog.modal.brv-rp-new,
  :root dialog.brv-al-entry {
    width: min(420px, 100vw);
  }
}

/* ── Phone (below 768) ───────────────────────────────────────────────── */

@media screen and (max-width: 767.98px) {
  /* Body text 15px; a field's 16px keeps a phone from zooming into it. */
  .brv-c-page {
    font-size: 15px;
  }

  .brv-c-page :is(.input, textarea, select),
  dialog.modal :is(.input, textarea, select),
  .brv-c-page .combobox__input,
  dialog.modal .combobox__input {
    font-size: 16px;
  }

  /* 44px targets: buttons, icon buttons, fields, chips and segments. */
  .brv-c-page .btn,
  dialog.modal .btn,
  .brv-c-page .input,
  dialog.modal .input {
    min-height: 44px;
  }

  .brv-c-page .btn--icon,
  dialog.modal .btn--icon {
    min-width: 44px;
  }

  .brv-c-page .segmented__label,
  dialog.modal .segmented__label {
    min-height: 44px;
  }

  .brv-c-page .pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .brv-c-chart__label {
    font-size: 11px;
  }

  /* ── card rows ── */

  .data-table[data-cards] .data-table__table,
  .data-table[data-cards] .data-table__table > tbody {
    display: block;
    width: 100%;
  }

  .data-table[data-cards] .data-table__table > tbody > tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 56px;
    padding: 12px 8px 12px 16px;
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .data-table[data-cards] .data-table__table > tbody > tr:last-child {
    border-bottom: 0;
  }

  /* The line of badges starts under the name and the kebab. */
  .data-table[data-cards] .data-table__table > tbody > tr::after {
    content: "";
    order: 1;
    flex: 0 0 100%;
    height: 0;
  }

  .data-table[data-cards] .data-table__table tbody tr > td {
    position: static;
    display: block;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--color-text-subtle);
    text-align: start;
    white-space: normal;
  }

  .data-table[data-cards] .data-table__table tbody tr.data-table__row--selected {
    background: var(--accent-tint);
  }

  /* The link or the name, first and whole. */
  .data-table[data-cards] .data-table__table tbody td[data-card="primary"] {
    order: 1;
    flex: 1 1 0;
    font-size: 15px;
    color: var(--color-text);
  }

  /* Then one line: badges and the numbers that matter, then the rest in
     small print, each with its label. */
  .data-table[data-cards] .data-table__table tbody td[data-card="badge"] {
    order: 2;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
  }

  .data-table[data-cards] .data-table__table tbody td[data-card="meta"] {
    order: 3;
    max-width: 100%;
  }

  /* A cell drawn as two lines on a desktop (a badge over its reason, a
     date over who) reads as one line on a card. */
  .data-table[data-cards] td[data-card="badge"] > :only-child:is(span, div) {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 2px 6px;
    min-width: 0;
    text-align: start;
  }

  /* Small print is a run of text after its label. */
  .data-table[data-cards] td[data-card="meta"] > :only-child:is(span, div),
  .data-table[data-cards] td[data-card="meta"] > :only-child:is(span, div) > :is(span, div, strong) {
    display: inline;
    max-width: none;
    text-align: start;
  }

  .data-table[data-cards] td[data-card="meta"] > :only-child:is(span, div) > * + * {
    margin-inline-start: 6px;
  }

  .data-table[data-cards] td[data-card-label]::before {
    content: attr(data-card-label);
    margin-inline-end: 4px;
    color: var(--color-text-subtle);
  }

  .data-table[data-cards] td[data-card-unit]::after {
    content: attr(data-card-unit);
    margin-inline-start: 4px;
    font-weight: 400;
    color: var(--color-text-subtle);
  }

  .data-table[data-cards] td[data-card="meta"].data-table__num {
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
  }

  .data-table[data-cards] .data-table__table tbody td:is([data-card="hidden"], [data-card-empty]) {
    display: none;
  }

  /* One trailing touch action: the kebab (its action sheet holds the
     row's quick actions too), else the quick actions themselves. */
  .data-table[data-cards] .data-table__table tbody td.data-table__actions {
    order: 1;
    display: flex;
    flex: none;
    align-items: center;
    align-self: flex-start;
    margin: -10px 0 -10px -4px;
  }

  .data-table[data-cards] td.data-table__actions .btn--icon {
    width: 44px;
    height: 44px;
    opacity: 1;
  }

  .js .data-table[data-cards] td.data-table__actions:has(> [data-row-actions]) > :not([data-row-actions]) {
    display: none;
  }

  /* Checkboxes wait for select mode. */
  .data-table[data-cards] .data-table__table tbody td.data-table__select {
    display: none;
  }

  .data-table[data-cards][data-selecting] .data-table__table tbody td.data-table__select {
    order: 0;
    display: grid;
    flex: none;
    place-items: center;
    align-self: flex-start;
    width: 28px;
    height: 28px;
    margin: 0 -2px 0 -6px;
  }

  .data-table[data-cards][data-selecting] td.data-table__select input {
    width: 20px;
    height: 20px;
  }

  .data-table[data-cards][data-selecting] .data-table__table tbody td.data-table__actions {
    display: none;
  }

  /* The header row becomes the sort control: the sortable columns as
     chips (and the page's select-all in select mode). */
  .data-table[data-cards] .data-table__table > thead {
    display: block;
  }

  .data-table[data-cards]:not([data-selecting]) .data-table__table > thead:not(:has(.data-table__sort)),
  .data-table[data-cards] .data-table__table:not(:has(> tbody > tr)) > thead {
    display: none;
  }

  .data-table[data-cards] .data-table__table > thead > tr {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 4px 8px 4px 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-alt);
    scrollbar-width: none;
  }

  .data-table[data-cards] .data-table__table > thead > tr::before {
    content: "Sort";
    flex: none;
    margin-right: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .data-table[data-cards][data-selecting] .data-table__table > thead > tr::before {
    content: none;
  }

  .data-table[data-cards] .data-table__table > thead th {
    position: static;
    display: none;
    flex: none;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
  }

  .data-table[data-cards] .data-table__table > thead th:has(> .data-table__sort) {
    display: block;
  }

  .data-table[data-cards][data-selecting] .data-table__table > thead th.data-table__select {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }

  .data-table[data-cards] thead .data-table__sort {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
  }

  .data-table[data-cards] thead th[aria-sort] .data-table__sort {
    border-color: var(--color-border);
    background: var(--color-surface);
  }

  /* The bulk bar leaves the header row: in select mode it is the bottom
     action bar, above the tab bar. */
  .data-table[data-cards] .data-table__bulk:not([hidden]) {
    position: fixed;
    inset: auto 0 var(--brv-ps-tabs-h, env(safe-area-inset-bottom, 0px));
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px 16px 12px;
    overflow: visible;
    border-top: 1px solid var(--color-border);
    white-space: normal;
    font-size: 14px;
    animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  }

  .data-table[data-cards] .data-table__bulk-sep {
    display: none;
  }

  .data-table[data-cards] .data-table__bulk > .brv-c-bulk__all {
    order: 1;
  }

  .data-table[data-cards] .data-table__bulk > .brv-c-bulk__clear {
    order: 2;
    margin-left: auto;
  }

  .data-table[data-cards] .data-table__bulk > .brv-c-bulk__note {
    order: 3;
    flex: 1 1 100%;
    font-size: 12.5px;
    color: var(--color-text-subtle);
    text-align: center;
  }

  .data-table[data-cards] .data-table__bulk > .btn:not(.brv-c-bulk__clear) {
    order: 4;
    flex: 1 1 0;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    height: 54px;
    padding: 0 4px;
    font-size: 12.5px;
  }

  .data-table[data-cards] .data-table__bulk > .brv-c-bulk__tags:not([hidden]) {
    order: 5;
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
  }

  .data-table[data-cards] .data-table__bulk .brv-c-bulk__tags > .input {
    flex: 1 1 auto;
  }

  /* The list's end stays above the bar while choosing. */
  .data-table[data-cards][data-selecting] {
    margin-bottom: 150px;
  }

  /* ── the filter bar: search full width, status chips scroll, the rest
     behind Filters ── */

  .data-table__toolbar {
    gap: 8px;
    padding: 12px;
  }

  .brv-c-page .data-table__toolbar .brv-c-toolbar__search {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }

  .data-table__toolbar .brv-c-toolbar__search .input {
    height: 44px;
  }

  .data-table__toolbar .brv-c-toolbar__org {
    flex: 1 1 100%;
    min-width: 0;
  }

  .data-table__toolbar .brv-c-toolbar__grow {
    display: none;
  }

  .js .data-table__toolbar .brv-card-phone {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: 44px;
  }

  .data-table__toolbar .brv-card-filters {
    position: relative;
    width: 44px;
    padding: 0;
  }

  .brv-card-filters__n {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
  }

  .data-table__toolbar .brv-card-select[aria-pressed="true"] {
    background: var(--color-surface-sunken);
    color: var(--color-text);
  }

  .data-table__toolbar .brv-c-toolbar__filter:has(.segmented) {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
    max-width: calc(100% + 12px);
    margin-right: -12px;
    padding-right: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .data-table__toolbar .brv-c-toolbar__filter:has(.segmented)::-webkit-scrollbar {
    display: none;
  }

  .data-table__toolbar > .brv-c-toolbar > a.btn {
    order: 3;
  }

  /* Status as chips: each its own pill, the chosen one ink. */
  .brv-c-toolbar .segmented {
    flex: none;
    gap: 8px;
    max-width: none;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .js .brv-c-toolbar .segmented::before {
    display: none;
  }

  .brv-c-toolbar .segmented__label,
  .brv-c-toolbar .segmented--sm .segmented__label {
    height: 44px;
    padding-inline: 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: 14px;
    white-space: nowrap;
  }

  .brv-c-toolbar .segmented__input:checked + .segmented__label,
  .js .brv-c-toolbar .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }

  .brv-c-toolbar .segmented__input:checked + .segmented__label .segmented__n {
    color: inherit;
    opacity: 0.72;
  }

  .brv-c-toolbar .segmented__input:checked + .segmented__label .segmented__n--alarm {
    opacity: 1;
  }

  /* The Filters sheet: each filter a full-width field. */
  .brv-card-sheet [data-card-filters-body] {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .brv-card-sheet [data-card-filters-body] > .brv-c-toolbar__filter,
  .brv-card-sheet [data-card-filters-body] .select,
  .brv-card-sheet [data-card-filters-body] .combobox {
    width: 100%;
    max-width: none;
  }

  .brv-card-sheet [data-card-filters-body] .combobox__input {
    width: 100%;
    max-width: none;
  }

  .brv-c-page :is(.select__native, .combobox__input, .combobox__field),
  dialog.modal :is(.select__native, .combobox__input, .combobox__field) {
    min-height: 44px;
  }

  /* ── sheets: the kit's Modal rises from the bottom ── */

  :root dialog.modal[open] {
    position: fixed;
    inset: auto 0 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    margin: 0;
    overflow: hidden;
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    animation: m-sheet var(--brv-dur-base) var(--brv-ease-out) backwards;
  }

  /* The grab handle. */
  :root dialog.modal[open]::before {
    content: "";
    flex: none;
    width: 36px;
    height: 4px;
    margin: 8px auto 2px;
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
  }

  :root dialog.modal[open] > .modal__header {
    flex: none;
    padding: 6px 12px 12px 16px;
  }

  :root dialog.modal[open] .modal__close {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -8px -4px -8px 0;
  }

  /* Whatever lies between the head and the foot scrolls. */
  :root dialog.modal[open] > :not(.modal__header, .modal__footer) {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  :root dialog.modal[open] .modal__body {
    padding: 16px;
  }

  /* The foot holds the sheet's actions, always in reach. */
  :root dialog.modal[open] .modal__footer {
    position: sticky;
    bottom: 0;
    flex: none;
    flex-wrap: wrap;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  :root dialog.modal[open] .modal__footer > .btn,
  :root dialog.modal[open] .modal__footer > :not(.btn):has(> .btn) > .btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
  }

  /* A foot that says something (a cost, a note) before its buttons: the
     words on their own line, the buttons across under them. */
  :root dialog.modal[open] .modal__footer > :not(.btn):has(> .btn) {
    display: flex;
    flex: 1 1 100%;
    gap: 8px;
  }

  :root dialog.modal[open] .modal__footer > :not(.btn, :has(.btn)) {
    flex: 1 1 100%;
    max-width: none;
    margin: 0;
  }

  /* A decide form carries its own foot inside the body (the review
     sheet): it stays in reach at the sheet's bottom edge all the same. */
  :root dialog.modal[open] .modal__body .brv-sf-decide__foot {
    position: sticky;
    bottom: -16px;
    margin: 0 -16px -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-border-subtle);
    background: var(--color-surface);
  }

  /* ── the action sheet (a card's kebab) ── */

  .brv-card-acts__head {
    display: grid;
    flex: 1 1 auto;
    gap: 6px;
    min-width: 0;
    padding-top: 2px;
  }

  .brv-card-acts__head .brv-c-linkcell {
    max-width: none;
  }

  .brv-card-acts__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12.5px;
    color: var(--color-text-subtle);
  }

  :root dialog.brv-card-acts[open] .modal__body {
    padding: 0;
  }

  .brv-card-acts__item {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 0;
    border-top: 1px solid var(--color-border-subtle);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .brv-card-acts__item:first-child {
    border-top: 0;
  }

  .brv-card-acts__item:hover,
  .brv-card-acts__item:focus-visible {
    background: var(--color-surface-alt);
  }

  .brv-card-acts__item > .brv-i {
    flex: none;
    color: var(--color-text-subtle);
  }

  .brv-card-acts__item--danger,
  .brv-card-acts__item--danger > .brv-i {
    color: var(--color-danger);
  }

  .brv-card-acts__sep {
    height: 6px;
    background: var(--color-surface-alt);
  }

  .brv-card-acts__sep + .brv-card-acts__item {
    border-top: 0;
  }

  /* ── the Settings hub: a list page, one section at a time ──
     A section page shows itself alone (the top bar leads back to
     Settings); the list is the hub's navigation, drawn in the page's
     place when the address names it (`…/organisation/settings#hub`). */

  .brv-c-hub__nav {
    display: none;
  }

  .brv-c-hub:has(> .brv-c-hub__nav:target) > .brv-c-hub__main {
    display: none;
  }

  .brv-c-hub > .brv-c-hub__nav:target {
    --brv-ic-chevron-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>");
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .brv-c-hub__nav:target .brv-c-hub__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .brv-c-hub__nav:target .brv-c-hub__label {
    display: block;
    padding: 0 4px 8px;
  }

  .brv-c-hub__nav:target .brv-c-hub__item,
  .brv-c-hub__nav:target .brv-c-hub__item--on {
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-top-color: var(--color-border-subtle);
    border-bottom-width: 0;
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 15px;
    font-weight: 400;
  }

  .brv-c-hub__nav:target .brv-c-hub__label + .brv-c-hub__item {
    border-top-color: var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .brv-c-hub__nav:target .brv-c-hub__item:last-child {
    border-bottom-width: 1px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .brv-c-hub__nav:target .brv-c-hub__label + .brv-c-hub__item:last-child {
    border-radius: var(--radius-md);
  }

  .brv-c-hub__nav:target .brv-c-hub__icon {
    color: var(--color-text-subtle);
  }

  .brv-c-hub__nav:target .brv-c-hub__text {
    flex: 1 1 auto;
  }

  .brv-c-hub__nav:target .brv-c-hub__item::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background-color: var(--color-text-subtle);
    -webkit-mask: var(--brv-ic-chevron-right) center / contain no-repeat;
    mask: var(--brv-ic-chevron-right) center / contain no-repeat;
  }

  /* ── the stat strip: two by two ── */

  .brv-c-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
  }

  .brv-c-stats > .brv-c-fig,
  .brv-c-stats > .brv-c-fig:nth-child(odd) {
    padding: 12px 14px;
    border-top: 0;
    border-left: 0;
  }

  .brv-c-stats > .brv-c-fig:nth-child(even) {
    border-left: 1px solid var(--color-border-subtle);
  }

  .brv-c-stats > .brv-c-fig:nth-child(n + 3) {
    border-top: 1px solid var(--color-border-subtle);
  }

  /* An odd one out takes the last row whole. */
  .brv-c-stats > .brv-c-fig:nth-child(odd):last-child:not(:first-child) {
    grid-column: 1 / -1;
  }

  .brv-c-fig__v {
    font-size: 22px;
  }

  /* ── the page header: the title is in the top bar (Section 11 §2); the
     one primary action is a full-width button, the others icons ── */

  .page-header {
    gap: 12px;
  }

  .page-header__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .page-header__actions > .btn:not(.btn--accent):has(> .brv-i) {
    gap: 0;
    width: 44px;
    padding: 0;
    font-size: 0;
  }

  .page-header__actions > .btn--accent,
  .page-header__actions > form:has(> .btn--accent) {
    order: 9;
    flex: 1 1 100%;
    justify-content: center;
  }

  .page-header__actions > form:has(> .btn--accent) > .btn--accent {
    width: 100%;
    justify-content: center;
  }

  /* A page with the floating "+" draws no second copy of its action. */
  .brv-c-page:has(.brv-fab) .page-header__actions > .btn--accent {
    display: none;
  }

  /* The floating "+" (helpers `fab()`): above the tab bar, popping once. */
  .brv-fab {
    position: fixed;
    right: 16px;
    bottom: calc(var(--brv-ps-tabs-h, env(safe-area-inset-bottom, 0px)) + 16px);
    z-index: var(--z-sticky);
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 16px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    cursor: pointer;
    animation: m-pop var(--brv-dur-base) var(--brv-ease-spring) 200ms backwards;
  }

  .brv-c-page:has(.data-table[data-selecting]) .brv-fab {
    display: none;
  }

  /* ── a table that stays a table: it scrolls inside its panel ── */

  .data-table[data-wide] .data-table__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
}

/* ══ Section 11 · Phone and tablet: tenant pages ══════════════════════════ */

/* brevily console — console v3 Section 11 §6, the tenant pages at a phone
   (390) and a tablet (834): what each page needs beyond the shared
   patterns (Section 11 §3–4, console-v3.css) — the Settings hub opened
   one section at a time, the Links "+", the tables that became cards,
   the rows that stack, the touch targets and the small print lifted to
   11px. The v3 breakpoints only: max-width 767.98px / 1023.98px, and
   their min-width twins. Tokens only; unlayered; no box-shadow on a
   panel. Desktop (≥1024) is untouched: every rule below sits in a phone
   or tablet block, except what is hidden until one of those widths and
   the Clicks table's frame (drawn as it was, now that the kit draws the
   table). */

/* Drawn for a phone, out of sight (and of the tab order) elsewhere. */
.brv-ps-bar__ws--hub,
.brv-ps-bar__title--hub,
.brv-an-chart__phone {
  display: none;
}

/* The Clicks tab's table is the kit's DataTable now (card rows on a
   phone): it fills its panel, so it takes the panel's frame, not a
   second one. */
.brv-lp-clicks > .data-table {
  border: 0;
  border-radius: 0;
}

/* ── Tablet and phone (below 1024) ───────────────────────────────────── */

@media screen and (max-width: 1023.98px) {
  /* A tapped chart column (console-v3.js): its day under the
     chart, the other columns quieter. */
  .brv-chart-readout {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
  }

  .brv-chart-picking .brv-c-chart__col:not(.brv-c-chart__col--picked) {
    opacity: 0.45;
  }

  /* Small print is 11px at least: country codes, initials and
     permission letters drawn in tiles grow their tiles with them (the
     bell's count too). */
  .brv-c-ov-cc,
  .brv-lp-cc {
    width: auto;
    min-width: 22px;
    height: 16px;
    padding: 0 3px;
    font-size: 11px;
  }

  .brv-lr-cc {
    height: 16px;
    font-size: 11px;
  }

  .brv-lp-dest > .brv-c-favicon {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .brv-gp-bit {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .brv-rp-stack > .avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
  }

  .brv-rp-stack__more,
  .brv-c-bell__n {
    font-size: 11px;
  }

  .brv-rp-by__av.avatar {
    width: 22px;
    height: 22px;
    font-size: 11px;
  }

  .brv-ak-by__av.avatar {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  /* Analytics' chart fills the card's width with every day and its
     labels at 11px: the fixed chart would shrink them (or scroll). */
  .brv-an-chart .brv-c-chart-scroll {
    display: none;
  }

  .brv-an-chart__phone {
    display: block;
  }

  /* On a card or under a row's name, a share of clicks is a short meter
     and its percent on one line. */
  :is(.data-table[data-cards] td[data-card], .brv-card-under) > .brv-an-share:only-child {
    display: inline-flex;
    width: 150px;
    min-width: 0;
    vertical-align: middle;
  }

  /* A rail holding what needs attention (a domain waiting on its DNS
     proof) leads the stacked columns, that panel first in it. */
  .brv-dm-cols > .brv-dm-rail:has(> .brv-c-attention) {
    order: -1;
  }

  /* A short link in the credit history is whole, as every short link is:
     it wraps at its slash, never ends in an ellipsis. */
  .brv-cr-tl__about.brv-cr-sl {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

/* ── Phone (below 768) ───────────────────────────────────────────────── */

@media screen and (max-width: 767.98px) {
  /* ── the Settings hub: one section at a time, "‹ Settings" leads to
     the list (views/layout.ts); while the list shows (`#hub`) the top
     bar is the list's own — the tile and "Settings" — and the hub's one
     line about the organisation leads it; a section's page leads with
     its own line instead. ── */

  :root:has(.brv-c-hub__nav:target) .brv-ps-bar__back--hub,
  :root:has(.brv-c-hub__nav:target) .brv-ps-bar__title--page {
    display: none;
  }

  :root:has(.brv-c-hub__nav:target) .brv-ps-bar__ws--hub {
    display: inline-flex;
  }

  :root:has(.brv-c-hub__nav:target) .brv-ps-bar__title--hub {
    display: block;
  }

  .page-header:has(+ .brv-c-hub):not(:has(+ .brv-c-hub > .brv-c-hub__nav:target)) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* A hub page whose header carries its plan badge keeps the badge; its
     title is the top bar's, as every page title is on a phone. */
  .brv-c-page .brv-c-hub__titlerow > .page-header__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── Single sign-on: what happens at step 4 reads the case, then its
     outcome under it ── */

  .brv-sso-outcome {
    flex-direction: column;
    gap: 6px;
  }

  /* ── card rows, every list: a cell in the small print keeps its words
     together — it takes a line of its own rather than squeeze beside
     the badges ("Two-factor Off" stacked in three) — and a line longer
     than the card still wraps inside it. ── */

  .data-table[data-cards] .data-table__table tbody td:is([data-card="meta"], [data-card="badge"]) {
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* ── an alert with its action ("Write to support", "Ask about
     white-label"): the words take the width, the action goes under
     them, never squeezing them into a column ── */

  .alert:has(> .alert__body + :is(a, button, form)) {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .alert:has(> .alert__body + :is(a, button, form)) > .alert__body {
    flex: 1 1 calc(100% - 28px);
  }

  .alert > .alert__body + :is(a, button, form) {
    margin-inline-start: 28px;
  }

  /* ── Billing: a usage row reads what · n of N, its bar, what is past
     it; an unlimited row has no "past it" ── */

  .brv-bl-urow > .brv-bl-urow__val {
    grid-row: 1;
    grid-column: 2;
  }

  .brv-bl-urow:has(> .brv-bl-urow__note) > .brv-bl-urow__over {
    display: none;
  }

  .brv-bl-xfoot {
    flex-wrap: wrap;
  }

  .brv-bl-xfoot > span {
    flex: 1 1 100%;
  }

  .brv-bl-xfoot__actions {
    flex: 1 1 100%;
    justify-content: flex-end;
  }

  /* ── Domains: on a card the shared domain's back-half minimum is one
     run of small print, not the table's 160px column ── */

  .data-table[data-cards]#shared-domains td > .brv-dm-hint {
    display: inline;
    max-width: none;
  }

  /* ── touch targets: 44px ── */

  .brv-c-page .btn,
  dialog.modal .btn,
  .brv-c-page .segmented__label,
  dialog.modal .segmented__label {
    min-width: 44px;
  }

  /* A quiet text link that stands alone (not inside a sentence) is
     44px tall to a finger, and at least as wide: the padding reaches
     past its words, the negative margin keeps the layout as drawn. */
  :is(.brv-lp-more, .brv-lp-dest__edit, .brv-lp-trunc, .brv-lf-open, .brv-ls-more,
    .brv-lq-link, .brv-an-more, .brv-cv-click__id, .brv-dm-more-link,
    .brv-pp-headlink, .brv-pp-back, .brv-pp-fig__link, .brv-pp-fig__inline,
    .brv-ak-card__link, .brv-cr-bal__link, .brv-cr-tl__about, .brv-bl-hero__link,
    .brv-co-off__action, .brv-acct-link, .brv-sg-check__link, .brv-c-ov-attn__link,
    .brv-c-ov-link__short, .brv-c-ov-stat__link, .brv-c-linkhead__link,
    .brv-lp-dest__url, .brv-lp-kv a, .brv-cv-sample, .brv-dm-slug, .brv-br-more,
    .brv-ls-note__text > a, .brv-pp-tl__what a),
  .brv-c-page summary {
    padding-block: 14px;
    margin-block: -14px;
  }

  :is(.brv-lp-dest__edit, .brv-lp-more, .brv-lp-kv a) {
    padding-inline: 10px;
    margin-inline: -10px;
  }

  /* The link or the name a card leads with; the sort chips. */
  .data-table[data-cards] td[data-card="primary"] a:first-of-type {
    padding-block: 14px;
    margin-block: -14px;
  }

  .data-table[data-cards] thead .data-table__sort {
    min-height: 44px;
  }

  .brv-lp-quick__item {
    min-height: 44px;
  }

  /* A switch's label, and a checkbox's, is its target: 44px tall to a
     finger, drawn as before; a switch without words is 44 wide too. The
     password field's Show fills the field's height at its end, its eye
     where it was (22px from the end, centred). */
  :is(.brv-c-page, dialog.modal, .brv-au, .brv-ra) .switch {
    padding-block: 13px;
    margin-block: -13px;
  }

  :is(.brv-c-page, dialog.modal, .brv-au, .brv-ra) .choice {
    padding-block: 11px;
    margin-block: -11px;
  }

  .brv-lq-logo .switch {
    padding-inline: 6px;
    margin-inline: -6px;
  }

  .password__reveal {
    inset-inline-end: 0;
    width: 44px;
    height: 44px;
  }

  input.brv-lq-swatch {
    width: 44px;
    height: 44px;
  }

  .brv-bl-step__btn {
    width: 44px;
    height: 44px;
  }

  .brv-bl-step__v {
    height: 44px;
  }

  /* ── a link's Routing tab: where a rule or a variant sends people is
     one line after its label, truncated (a destination, not a short
     link) ── */

  .brv-lr-table[data-cards] td[data-card="meta"]:has(> .brv-lr-to:only-child) {
    display: flex;
    flex: 1 1 100%;
    gap: 4px;
    min-width: 0;
  }

  .brv-lr-table[data-cards] td[data-card="meta"]:has(> .brv-lr-to:only-child)::before {
    flex: none;
  }

  .brv-lr-table[data-cards] td[data-card="meta"] > .brv-lr-to:only-child {
    display: block;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The signed-out pages (sign in, sign up, reset, report a link): 44px
     buttons and fields too. */
  :is(.brv-au, .brv-ra) :is(.btn, .input) {
    min-height: 44px;
  }

  /* ── a link's page: the rail under the numbers is full width ── */

  .brv-lp-rail {
    align-items: stretch;
  }

  /* A group's permissions stay chips on its card. */
  .data-table[data-cards] td[data-card] > .brv-gp-perms:only-child,
  .data-table[data-cards] td[data-card] > .brv-gp-perms:only-child > .brv-gp-perm {
    display: inline-flex;
  }

  .data-table[data-cards] td[data-card] > .brv-gp-perms:only-child > * + * {
    margin-inline-start: 0;
  }

  /* ── Links: the "+" is the way to make one (the create sheet holds the
     long URL), so the list starts at its search ── */

  .brv-c-links:has(.data-table) > .brv-c-shorten {
    display: none;
  }

  /* ── a link's Clicks tab: a card per click under its day ── */

  .brv-lp-clicks__table[data-cards] tbody > tr.brv-lp-day {
    min-height: 0;
    padding: 0;
    background: var(--color-surface-alt);
  }

  .brv-lp-clicks__table[data-cards] tbody > tr.brv-lp-day::after {
    content: none;
  }

  .brv-lp-clicks__table[data-cards] tr.brv-lp-day > th {
    display: block;
    flex: 1 1 100%;
    height: auto;
    padding: 8px 16px;
    background: none;
  }

  .brv-lp-clicks__table[data-cards] td[data-card] > .brv-lp-cell:only-child {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
  }

  /* "Its own destination" is every unrouted click: a card says only
     where a rule or a variant sent one. */
  .brv-lp-clicks__table[data-cards] td[data-card]:nth-child(6):has(> .brv-lp-muted:only-child) {
    display: none;
  }

  .brv-lp-clicks__tools > .brv-c-toolbar__filter:has(> .select) {
    flex: 1 1 40%;
    min-width: 0;
  }

  .brv-lp-clicks__tools :is(.select, .select__ui) {
    width: 100%;
    min-width: 0;
  }
}


/* ══ Section 11 · Phone and tablet: staff pages, read-only editors ════════ */

/* ══ Section 11 · Staff pages, and the editors kept for larger screens ════

   brevily console — console v3 Section 11 (design/v3/S11-phone-tablet.md;
   the canvas's Responsive, StaffOverviewPhone/Tablet,
   StaffReviewsPhone/Tablet and StaffReviewCasePhone boards): the staff
   pages at a tablet's and a phone's width, and §5, the four editors that
   are read-only on a phone. Built on the shell (§1–2) and the shared
   patterns (§3–4) in console-v3.css; only what a staff page needs beyond
   them is here.

   ONE set of breakpoints, the v3 set, and no others:
     (max-width: 767.98px)    (min-width: 768px)
     (max-width: 1023.98px)   (min-width: 1024px)
     (max-width: 1279.98px)   (min-width: 1280px)
   Desktop (1280 and wider) is untouched: every rule sits in a narrower
   block, or hides something only a phone draws. Tokens only; unlayered;
   no box-shadow on a panel. Behaviour: console-v3.js. */

/* ── Drawn on a phone only ────────────────────────────────────────────── */

.brv-sf-bar,
.brv-wide-note {
  display: none;
}

/* ══ Overview (/) ═══════════════════════════════════════════════════════ */

/* Short links stay whole (§4) where the rail's widths wrap them. */
@media screen and (max-width: 1279.98px) {
  .brv-so-attn__link {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }
}

@media screen and (max-width: 767.98px) {
  /* While something needs a decision, Needs attention comes first, before
     the figures (StaffOverviewPhone): the chart row opens up so its rail
     can move. */
  .brv-c-page:has(> .brv-so-grid3) > .brv-c-ov-grid--chart:has(.brv-so-attn__item) {
    display: contents;
  }

  .brv-c-page:has(> .brv-so-grid3) > .brv-c-ov-grid--chart > .brv-c-ov-rail:has(.brv-so-attn__item) {
    order: -1;
  }

  .brv-c-page:has(> .brv-so-grid3) > :is(.page-header, .alert) {
    order: -2;
  }

  /* A card row: what it is about, then its decision, full width. */
  .brv-so-attn__item {
    flex-wrap: wrap;
  }

  .brv-so-attn__text {
    flex: 1 1 0;
  }

  .brv-so-attn__item > .btn {
    flex: 1 1 100%;
    justify-content: center;
    margin-left: 40px;
  }

  .brv-so-attn__over {
    font-size: 12.5px;
  }

  .brv-so-attn__link {
    font-size: 14px;
  }

  /* 44px rows, each queue's way in a target. */
  .brv-so-clear {
    min-height: 44px;
    padding-block: 0;
    font-size: 14px;
  }

  .brv-so-clear > a,
  .brv-so-foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .brv-so-foot {
    padding-block: 0;
  }
}

/* ══ The queues: Flagged links (/reviews), Abuse reports (/abuse) ═══════ */

/* Tablet and the rail's widths (768–1279): one column, the queue above
   and the case below it — the one picked, or the oldest the queue opened
   by itself, its row marked — so no way back is needed; how the queue
   works closes the page (StaffReviewsTablet). (Section 8 drew the case
   alone below 1280; §11's queues pattern is list above, case below.) */
@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-sf-md > .brv-sf-side,
  .brv-sf-md.brv-sf-md--case > .brv-sf-side {
    display: contents;
  }

  .brv-sf-md.brv-sf-md--default > .brv-sf-main {
    display: flex;
  }

  .brv-sf-md > .brv-sf-main {
    order: 1;
  }

  .brv-sf-side > .brv-sf-rules {
    order: 2;
  }

  .brv-sf-back {
    display: none;
  }

  .brv-sf-md--default .brv-sf-case--default,
  .brv-sf-md--default .brv-sf-case--default:hover {
    background: var(--accent-tint);
  }

  .brv-sf-md--default .brv-sf-case--default::before {
    background: var(--color-accent);
  }
}

@media screen and (max-width: 767.98px) {
  /* The status segment as the chips every list scrolls (§3 filters). */
  .brv-sf-tools {
    gap: 8px;
  }

  .brv-sf-tools .segmented {
    display: flex;
    gap: 8px;
    width: auto;
    max-width: calc(100% + 12px);
    margin-right: -12px;
    padding: 0 12px 0 0;
    overflow-x: auto;
    border: 0;
    background: none;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .brv-sf-tools .segmented::-webkit-scrollbar {
    display: none;
  }

  .js .brv-sf-tools .segmented::before {
    display: none;
  }

  .brv-sf-tools .segmented__item {
    flex: none;
  }

  .brv-sf-tools .segmented__label {
    width: auto;
    height: 44px;
    min-height: 44px;
    padding-inline: 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: 14px;
    white-space: nowrap;
  }

  .brv-sf-tools .segmented__input:checked + .segmented__label,
  .js .brv-sf-tools .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }

  .brv-sf-tools .segmented__input:checked + .segmented__label .segmented__n {
    color: inherit;
    opacity: 0.72;
  }

  .brv-sf-tools .input {
    height: 44px;
  }

  /* A case is its own page: the top bar leads back to its queue and
     names it (the back link's `data-ps-up`, layout.ts `phoneUpOf`), so
     the queue's header and the in-page way back step aside. */
  .brv-c-page:has(> .brv-sf > .brv-sf-md--case) > .page-header,
  .brv-c-page:has(> .brv-sf-page) > .page-header,
  .brv-sf-back[data-ps-up] {
    display: none;
  }

  /* The decision bar: the case's one action in reach, on the tab bar. */
  .brv-sf-bar {
    position: fixed;
    inset: auto 0 var(--brv-ps-tabs-h, 0px);
    z-index: var(--z-sticky);
    display: flex;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    animation: m-rise var(--brv-dur-base) var(--brv-ease-out) backwards;
  }

  :root:not(:has(.brv-ps-tabs)) .brv-sf-bar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .brv-sf-bar > .btn {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    min-height: 48px;
  }

  /* A report's category and when it came, a line each. */
  .brv-sf-head:has(.brv-sf-refbig) .brv-sf-head__meta > span[aria-hidden="true"] {
    display: none;
  }

  /* The page's end stays above the bar. */
  .brv-c-page:has(:is(.brv-sf-md--case, .brv-sf-page) .brv-sf-bar) {
    padding-bottom: 72px;
  }

  /* With script the bar's sheet is the decide form; the form in the page
     stays for a page without script, and for a decision that came back
     refused (its message shows there). */
  .js :is(.brv-sf-md--case, .brv-sf-page) .brv-sf-decide-panel:not(:has(.alert--danger, [aria-invalid="true"])) {
    display: none;
  }
}

/* ══ Settings (/settings) ═══════════════════════════════════════════════ */

/* A phone: /settings is the list of groups; a group asked for by name
   (`?group=`, a save) is its own page under "‹ Settings" (the phone bar,
   from `data-ps-up` on `.brv-set--picked`). */
@media screen and (max-width: 767.98px) {
  .brv-set:not(.brv-set--picked) > .brv-set-main,
  .brv-set.brv-set--picked > .brv-set-side,
  .brv-c-page:has(> .brv-set--picked) > .page-header {
    display: none;
  }

  .brv-set:not(.brv-set--picked) .brv-set-group {
    --brv-ic-chevron-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>");
    align-items: center;
    min-height: 60px;
    padding: 10px 12px 10px 16px;
  }

  .brv-set:not(.brv-set--picked) .brv-set-group::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background-color: var(--color-text-subtle);
    -webkit-mask: var(--brv-ic-chevron-right) center / contain no-repeat;
    mask: var(--brv-ic-chevron-right) center / contain no-repeat;
  }

  .brv-set:not(.brv-set--picked) .brv-set-group > .brv-i {
    margin-top: 0;
  }

  /* No group is open on the list: none is marked. */
  .brv-set:not(.brv-set--picked) .brv-set-group--on {
    background: none;
  }

  .brv-set:not(.brv-set--picked) .brv-set-group--on::before {
    content: none;
  }

  .brv-set:not(.brv-set--picked) .brv-set-group--on > .brv-i {
    color: var(--color-text-subtle);
  }

  .brv-set-group__name {
    font-size: 15px;
  }

  .brv-set-groups__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* A tablet: one column, the groups a row of scrolling chips over the
   group, as the Settings hub's sections (§1). */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .brv-set {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .brv-set-side {
    display: contents;
  }

  .brv-set-groups {
    order: -1;
    overflow: visible;
    border: 0;
    background: none;
  }

  .brv-set-groups > .brv-c-panel__head,
  .brv-set-group__sum,
  .brv-set-group__n {
    display: none;
  }

  .brv-set-list {
    display: flex;
    gap: 8px;
    margin-right: calc(-1 * var(--layout-gutter, 24px));
    padding-right: var(--layout-gutter, 24px);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .brv-set-list::-webkit-scrollbar {
    display: none;
  }

  .brv-set-list > li {
    flex: none;
  }

  .brv-set-list > li + li > .brv-set-group {
    border-top: 1px solid var(--color-border-strong);
  }

  .brv-set-group,
  .brv-set-group--on {
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    white-space: nowrap;
  }

  .brv-set-group--on,
  .brv-set-group--on:hover {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }

  .brv-set-group--on::before {
    content: none;
  }

  .brv-set-group--on > .brv-i {
    color: inherit;
  }

  .brv-set-group > .brv-i {
    margin-top: 0;
  }

  .brv-set-group__name {
    font-size: 13.5px;
  }

  .brv-set-groups__foot {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 6px 0 0;
    border: 0;
    background: none;
  }

  .brv-set-reload {
    order: 2;
  }
}

/* ══ §5 · Editors kept for larger screens ═══════════════════════════════
   The email template's words (/messages/:id:), a plan's features and
   limits (/plans/:code:?tab=features), a group's details and permissions
   (/groups/:id:, tenants' and staff's) and an import's columns
   (/links/import) carry `data-wide-editor`. On a phone they open
   read-only under a notice (views/helpers.ts `wideEditorNote`): the
   saves and the tools that only edit (`data-wide-hide`, every button in
   the editor that is not `data-wide-keep`) are not drawn, a choice
   cannot be tapped, and console-v3.js makes each field read-only
   (a choice disabled) and refuses a submit while it lasts. The server
   takes a save from any width; the page just does not offer one. Usable
   as on a desktop from 768px. */
@media screen and (max-width: 767.98px) {
  .brv-wide-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.45;
  }

  .brv-wide-note > .brv-i {
    flex: none;
    margin-top: 2px;
    color: var(--color-accent);
  }

  .brv-wide-note strong {
    font-weight: 600;
    color: var(--color-text);
  }

  [data-wide-hide],
  [data-wide-editor] button:not([data-wide-keep] *, [data-modal-close]),
  [data-wide-editor] .editor__toolbar {
    display: none;
  }

  /* A choice is not a tap away, with or without script. */
  [data-wide-editor] :is(.segmented, .switch, .choice, input[type="checkbox"], input[type="radio"], select):not([data-wide-keep] *) {
    pointer-events: none;
  }

  /* Read-only fields read as values, not as places to type. */
  [data-wide-editor] :is(input, textarea)[readonly]:not([data-wide-keep] *),
  [data-wide-editor] [contenteditable="false"] {
    background: var(--color-surface-alt);
  }

  /* A three-way choice shows the one made (a plan's Default · Set ·
     Unlimited), as a word: the radio behind it steps out, so nothing
     there reads as a control. */
  [data-wide-editor] .segmented .segmented__item:not(:has(> .segmented__input:checked)),
  [data-wide-editor] .segmented .segmented__input {
    display: none;
  }
}

@media screen and (max-width: 767.98px) {
  /* A lone choice (§5, above) reads as a value. */
  [data-wide-editor] .segmented {
    padding: 0;
    border: 0;
    background: none;
  }

  .js [data-wide-editor] .segmented::before {
    display: none;
  }

  [data-wide-editor] .segmented .segmented__label {
    min-height: 0;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    opacity: 1;
  }

  /* The import: nothing to pick or drop, no empty foot. */
  .brv-li-form > .brv-wide-note {
    margin-bottom: 16px;
  }

  [data-wide-editor] .brv-li-drop,
  [data-wide-editor] .brv-li-foot:not(:has(.brv-li-note)) {
    display: none;
  }
}

/* ══ Lists (shared; fold into §11's filter bar) ═════════════════════════
   A list with a search and status chips but no Filters or Select button
   (Emails, Domains, API keys…) drew the search 2px wide beside the chips:
   the chips' row takes 100% less its negative margin, which a zero-basis
   search fits beside. A floor for the search makes the chips wrap. */
@media screen and (max-width: 767.98px) {
  .brv-c-page .data-table__toolbar .brv-c-toolbar__search {
    min-width: 7.5rem;
  }
}

/* ══ Tables drawn by hand, read as cards (§3) ═══════════════════════════
   The feature catalog (/plans/features), the help centre's questions
   (/faqs), the credit packs and Vendors' "What each job uses" are the
   kit's table markup written out (grouped rows the kit cannot draw):
   each cell carries the `data-card` role views/cards.ts would write, so
   the shared card rules apply. A group's heading row is a heading line
   between the cards. */
@media screen and (max-width: 767.98px) {
  .data-table[data-cards] .data-table__table > tbody > tr:is(.brv-c-fcat__sec, .brv-fq-group) {
    min-height: 0;
    padding: 0;
    gap: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    background: var(--color-surface-alt);
  }

  .data-table[data-cards] .data-table__table > tbody > tr:is(.brv-c-fcat__sec, .brv-fq-group)::after {
    content: none;
  }

  .data-table[data-cards] tr:is(.brv-c-fcat__sec, .brv-fq-group) > th {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 8px;
    height: auto;
    padding: 14px 16px 8px;
    border: 0;
    background: none;
    text-align: start;
  }

  .brv-c-fcat .data-table__table td {
    padding-block: 0;
  }

  .brv-c-fcat__id {
    min-width: 0;
  }

  .data-table[data-cards] td.brv-c-fcat__desc {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 13px;
  }

  .data-table[data-cards] td.brv-fq-qcell {
    max-width: none;
  }

  .data-table[data-cards] td.brv-fq-qcell .brv-fq-q {
    white-space: normal;
  }

  .data-table[data-cards] td.brv-fq-qcell .brv-fq-a {
    display: -webkit-box;
    max-width: none;
    margin-top: 2px;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .data-table[data-cards] td.brv-vd-means {
    flex: 1 1 100%;
    min-width: 0;
    font-size: 13px;
  }

  .data-table[data-cards] .brv-vd-jobtable td,
  .brv-vd-jobtable .data-table__table td {
    height: auto;
  }
}

/* ══ Audit log (/audit): a table that scrolls inside its panel ══════════ */
@media screen and (max-width: 767.98px) {
  /* The filters: each on a line of its own where it needs the width, the
     typed "Who" as wide as the search. */
  .brv-al-toolbar .brv-al-who-filter,
  .data-table__toolbar .brv-al-org-pick {
    flex: 1 1 100%;
    min-width: 0;
  }

  .brv-al-who-filter .input-icon,
  .brv-al-who-filter .input,
  .data-table__toolbar .brv-al-who-filter > .input-icon .input {
    width: 100%;
    height: 44px;
  }

  .brv-al-range {
    height: 44px;
  }

  .brv-al-range__preset {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* One line a row: the table is as wide as its content and scrolls. */
  .brv-al-region .data-table[data-wide] .data-table__table {
    width: max-content;
    min-width: 100%;
  }

  .brv-al-region .data-table[data-wide] .data-table__table td {
    white-space: nowrap;
  }

  .brv-al-region .data-table[data-wide] .brv-sl {
    flex-wrap: nowrap;
  }

  td.data-table__actions > .brv-al-open {
    width: 44px;
    height: 44px;
  }
}

/* ══ Touch (§4): targets and type on a phone ════════════════════════════ */
@media screen and (max-width: 767.98px) {
  /* A link standing alone — a panel's way on, a head's aside — is a
     44px target. */
  .brv-c-page :is(.brv-c-panel__head, .brv-c-panel__foot) > a:not(.btn),
  .brv-sf-more,
  .brv-og-headlink,
  .brv-og-life__link,
  .brv-sp-headlink,
  .brv-cp-rule__link,
  .brv-vd-more,
  .brv-c-plangrid__more,
  .brv-so-rowlink,
  .brv-sa-card__foot > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  a.brv-og-count,
  .brv-sp-org {
    min-height: 44px;
  }

  /* A link that leads a row or a line — a card's name, a record, a
     count — reaches 44px of hit area without moving what is around it. */
  .brv-c-page :is(.brv-em-name__link, .brv-og-org__name, .brv-so-org__name, .brv-fq-q, .brv-vd-card__title, .brv-vd-quiet, .brv-sf-sl--lg, .brv-cp-pack > a, .brv-c-plangrid__orgs, .brv-c-plangrid__terms dd > a, .brv-c-fig__v > a, .brv-so-attn__link, .brv-og-reason, .brv-al-org, .brv-al-only, .brv-al-kv__name, .brv-al-rec__name, .brv-sf-head__meta a, .brv-cp-foot > a),
  .data-table[data-cards] td[data-card="primary"] a.brv-sl,
  .brv-sf-table a.brv-sl,
  .brv-pd-name > a.brv-sl {
    padding-block: 15px;
    margin-block: -15px;
  }

  /* …and as wide, where its words are shorter than a fingertip. */
  .brv-c-page :is(.brv-c-plangrid__orgs, .brv-c-fig__v > a, .brv-vd-card__title, .brv-so-clear > a) {
    display: inline-flex;
    justify-content: center;
    min-width: 44px;
  }

  .brv-c-page :is(.brv-c-fig__v > a, .brv-vd-card__title) {
    justify-content: flex-start;
  }

  /* A password field's Show: the field's own height, square. */
  :is(.brv-c-page, dialog.modal) .password__reveal {
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .brv-c-page :is(.brv-em-name__link, .brv-og-org__name, .brv-so-org__name, .brv-fq-q, .brv-cp-pack > a) {
    display: inline-block;
  }

  .brv-c-perm__more > summary,
  .brv-gp-mx__more > summary {
    padding-block: 12px;
  }

  /* Never below 11px: the initials in an organisation's tile or an
     avatar, a country's code, a permission's letter. */
  .brv-so-mark,
  .brv-sp-org__mark,
  .brv-sf-mark,
  .brv-c-page .avatar--sm,
  .avatar.brv-al-av,
  .brv-gp-bit,
  .brv-c-ov-cc {
    font-size: 11px;
  }

  .brv-c-ov-cc {
    width: auto;
    min-width: 22px;
    padding-inline: 3px;
  }
}

/* ══ Plans & pricing (/plans): the plan grid ════════════════════════════
   It stays a grid (a matrix cannot be cards) and scrolls inside its
   panel. Below 1024 the feature names are a column that stays put while
   the plans scroll under it, so a value is always read against its name,
   and the corner's row filter is a column of chips. */
@media screen and (max-width: 1023.98px) {
  .brv-c-plangrid :is(td.brv-c-plangrid__corner, th.brv-c-plangrid__f) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface);
  }

  .brv-c-plangrid tbody tr:not(.brv-c-plangrid__sec):hover > th.brv-c-plangrid__f {
    background: var(--color-surface-alt);
  }

  .brv-c-plangrid__f > .brv-c-plangrid__code {
    display: block;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
  }

  .brv-c-plangrid__corner .segmented {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 0;
    background: none;
  }

  .js .brv-c-plangrid__corner .segmented::before {
    display: none;
  }

  .brv-c-plangrid__corner .segmented__label {
    justify-content: space-between;
    width: 100%;
    padding-inline: 12px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    white-space: normal;
    text-align: start;
  }

  .brv-c-plangrid__corner .segmented__input:checked + .segmented__label,
  .js .brv-c-plangrid__corner .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }

  .brv-c-plangrid__corner .segmented__input:checked + .segmented__label .segmented__n {
    color: inherit;
    opacity: 0.72;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .brv-c-plangrid :is(td.brv-c-plangrid__corner, th.brv-c-plangrid__f) {
    width: 232px;
    min-width: 232px;
  }
}

@media screen and (max-width: 767.98px) {
  .brv-c-plangrid :is(td.brv-c-plangrid__corner, th.brv-c-plangrid__f) {
    width: 136px;
    min-width: 136px;
    max-width: 136px;
  }

  .brv-c-plangrid thead td.brv-c-plangrid__corner {
    padding: 12px;
  }

  .brv-c-plangrid__f {
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.35;
  }

  .brv-c-plangrid__f > * + * {
    margin-left: 4px;
  }

  .brv-c-plangrid__note {
    display: none;
  }

  .brv-c-plangrid__corner .segmented__label {
    min-height: 44px;
  }

  .brv-c-plangrid__plan {
    width: 168px;
    min-width: 168px;
  }
}

/* ══ Domains (/domains, staff) ══════════════════════════════════════════ */
/* "Links on them": one domain and its count per part, spaced — the stat
   strip's two-line clamp (below 1024) would run them together. */
@media screen and (max-width: 1023.98px) {
  .brv-c-fig__s.brv-pd-per {
    display: flex;
  }
}

/* ══ Staff access › Groups (/groups): "What each group holds" ═══════════
   The matrix keeps its bands and lined-up columns; on a phone a group's
   column is narrow, so its permission marks wrap inside the cell rather
   than run over the next column. */
@media screen and (max-width: 767.98px) {
  .brv-gp-mx .data-table__table td:not(:first-child),
  .brv-gp-mx .data-table__table th:not(:first-child) {
    padding-inline: 6px;
  }

  .brv-gp-mx .brv-gp-bits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
  }

  .brv-gp-mx .brv-gp-bit--gap {
    display: none;
  }

  /* The area's words wrap inside their column. */
  .brv-gp-mx .brv-gp-area {
    width: auto;
    min-width: 0;
  }
}

/* ══ Organisations › one organisation (/organisations/:code:) ═══════════
   Once the rail stacks under the main column (below 1024), the lifecycle
   card leads while it has something to act on — suspended, dormant, a
   deletion asked, a flagged link — as §3's "attention first". */
@media screen and (max-width: 1023.98px) {
  .brv-og-grid:has(.brv-og-lives :is(.brv-c-attn--danger, .brv-c-attn--warning)) {
    display: flex;
    flex-direction: column;
  }

  .brv-og-grid:has(.brv-og-lives :is(.brv-c-attn--danger, .brv-c-attn--warning)) > .brv-og-rail {
    display: contents;
  }

  .brv-og-rail > .brv-c-panel:has(.brv-og-lives :is(.brv-c-attn--danger, .brv-c-attn--warning)) {
    order: -1;
  }
}


/* ══ Final pass · pickers: moments, domains, the audit range (A1, A2) ═══════ */

/* ── A1 · A moment: the kit's DateTimePicker (views/helpers.ts momentField) ── */
/* The picker (the date, the time with its UTC chip, the presets), then
   Clear at the end of the presets row; it wraps under them when narrow. */

.brv-moment {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}

.brv-moment > .datetimepicker {
  min-width: 0;
}

.brv-moment .brv-moment__clear[hidden] {
  display: none;
}

/* The create modal: the two moments one under the other (the date and
   the time side by side need the width), then the click limit. */
.brv-lc-moments {
  display: grid;
  gap: 12px;
}

.brv-lc-limit {
  max-width: 260px;
}

/* A link's Settings tab: the moments one under the other, likewise. */
.brv-ls-pair--moments {
  grid-template-columns: minmax(0, 1fr);
}

/* Scheduled destinations: the moment beside the destination, the date
   and the time kept on one line while the row has room. */
.brv-lr-add__row > .brv-moment-field {
  flex: 1 1 320px;
  min-width: 0;
}

/* ── A1 · The audit log's range: the kit's range calendar inline ─────── */
/* The chip names the range; the calendar's own trigger would only fold
   it away, and inside the panel it needs no shadow of its own. */

.brv-al-range__fields {
  grid-template-columns: minmax(0, 1fr);
}

.brv-al-range .datepicker__trigger {
  display: none;
}

.brv-al-range .datepicker--inline .datepicker__panel {
  width: auto;
  margin-top: 0;
  box-shadow: none;
}

/* The kit folds its panel away once a range is complete, inline too:
   here the calendar stays, so the range can be picked again. Without
   script the kit's native date fields are the control and the calendar
   stays hidden. */
.js .brv-al-range .datepicker--inline .datepicker__panel[hidden] {
  display: block;
}

/* ── A2 · The domain picker: the kit's Combobox ───────────────────────── */
/* Each option: the hostname (mono) over its facts; own domains first,
   under "Yours", then "Shared". Long lists scroll. */

.brv-dompick .combobox__input {
  font-family: var(--font-family-mono);
  font-size: 13px;
}

.brv-dompick .combobox__list {
  max-height: min(22rem, 60vh);
  overflow-y: auto;
}

.brv-dompick .combobox__option {
  flex-wrap: wrap;
  row-gap: 2px;
}

.brv-dompick .combobox__option-label {
  order: 1;
  font-family: var(--font-family-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.brv-dompick .combobox__check {
  order: 2;
}

.brv-dompick .combobox__option-meta {
  order: 3;
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-subtle);
  white-space: normal;
}

.brv-dompick .combobox__option[aria-disabled="true"] {
  cursor: not-allowed;
}

.brv-dompick .combobox__option[aria-disabled="true"] .combobox__option-label {
  color: var(--color-disabled-text);
}

/* The shorten bar's: compact — the hostname alone in the field, the list
   as wide as its facts, opening leftwards from the field's end. */
.brv-dompick--bar .combobox__list {
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(26rem, calc(100vw - 32px));
}

@media (max-width: 767.98px) {
  .brv-lc-limit {
    max-width: none;
  }

  /* A moment on a phone: every part a 44px target (the time's segments
     overlap the field's border by a pixel to keep it 44 high). */
  .brv-moment .datepicker__trigger,
  .brv-moment .timepicker__field,
  .brv-moment .datetimepicker__preset,
  .brv-moment .brv-moment__clear {
    min-height: 44px;
  }

  .brv-moment .timepicker__field {
    height: auto;
  }

  /* The clock is decoration: without it the date and the time share a
     line at 390. */
  .brv-moment .timepicker__icon {
    display: none;
  }

  .brv-moment .timepicker__segment,
  .brv-moment .timepicker__toggle {
    width: 44px;
    height: 44px;
    margin-block: -1px;
  }

  .brv-moment .datepicker__day,
  .brv-al-range .datepicker__day {
    height: 40px;
  }

  .brv-dompick--bar .combobox__list {
    inset-inline-start: 0;
    width: auto;
    max-width: none;
  }
}


/* ══ Final pass · tags: the kind chip, the picker, Settings › Tags (A3) ═════ */

/* ══ Tags (console v3 final pass §A3) ════════════════════════════════════
   The kind chip, the tag picker and its filter twin (views/tagPicker.ts),
   Settings › Tags (Tags.views.ts) and the by-tag panels of Analytics and
   Conversions. Tokens only; the one breakpoint set. */

/* ── The kind chip: quiet, one tint per kind ─────────────────────────── */

.brv-tagkind {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brv-tagkind--person {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-tagkind--team {
  border-color: transparent;
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.brv-tagkind--campaign {
  border-color: transparent;
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.brv-tagkind--channel {
  border-color: transparent;
  background: var(--color-info-soft);
  color: var(--color-info-soft-text);
}

.brv-tagkind--product,
.brv-tagkind--region {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ── The picker ──────────────────────────────────────────────────────── */

/* Without scripts the picker is its text field (`tags_text`). */
@media (scripting: none) {
  .brv-tagpick .combobox,
  .brv-tagfilter .combobox,
  .brv-tagchoice .combobox {
    display: none;
  }
}

.brv-tagpick .combobox__field {
  flex-wrap: wrap;
  gap: 4px;
  min-height: 34px;
  height: auto;
  padding-block: 3px;
}

.brv-tagpick .combobox__token {
  gap: 5px;
  max-width: 100%;
}

.brv-tagpick .combobox__token .brv-tagkind {
  height: 16px;
  padding: 0 4px;
  font-size: 10.5px;
}

.brv-tagpick .combobox__input {
  flex: 1 1 8rem;
  min-width: 8rem;
}

/* A new tag's row: its kind leads in a column of its own, the names align. */
.brv-tagpick .combobox__option-lead {
  flex: none;
  width: 78px;
}

.brv-tagpick__text {
  width: 100%;
}

/* The bulk bar's picker: one line beside its Add button. */
.brv-c-bulk__tags:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brv-tagpick--compact {
  margin: 0;
  width: 220px;
}

/* The bar scrolls sideways (the kit's): while Add tags is open, its list
   must reach past the bar. */
.data-table__bulk:has(.brv-c-bulk__tags:not([hidden])) {
  overflow: visible;
}

/* …and its note makes room for the picker meanwhile. */
.data-table__bulk:has(.brv-c-bulk__tags:not([hidden])) .brv-c-bulk__note {
  display: none;
}

.brv-tagpick--compact .combobox__field {
  min-height: 28px;
  padding-block: 1px;
}

.brv-tagpick--compact .combobox__input {
  font-size: 13px;
}

/* On a phone the bar sits at the bottom: the picker takes the row, and
   its list opens upward. */
@media (max-width: 767.98px) {
  .brv-c-bulk__tags:not([hidden]) {
    display: flex;
    flex: 1 1 100%;
    width: 100%;
  }

  .brv-tagpick--compact {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .brv-c-bulk__tags .combobox__list {
    top: auto;
    bottom: calc(100% + 4px);
  }
}

/* The filter's own label is for screen readers: the toolbar says the rest. */
.brv-tagfilter .form-field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.brv-tagfilter,
.brv-tagchoice__box {
  display: inline-flex;
  min-width: 0;
}

.brv-tagchoice__box {
  display: block;
  width: 100%;
}

/* ── Settings › Tags ─────────────────────────────────────────────────── */

.brv-tg {
  display: grid;
  gap: 16px;
}

.brv-tg-name {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.brv-tg-name::before {
  content: "#";
  content: "#" / "";
  margin-right: 2px;
  font-family: var(--font-family-mono);
  font-weight: 400;
  color: var(--color-text-subtle);
}

.brv-tg-name:hover,
.brv-tg-num:hover {
  text-decoration: underline;
}

.brv-tg-num {
  color: var(--color-text);
  text-decoration: none;
}

.brv-tg-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  font-size: 12.5px;
  color: var(--color-text-subtle);
}

.brv-tg-cap {
  display: inline-grid;
  grid-template-columns: auto 120px;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.brv-tg-kinds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}

@media (min-width: 1024px) {
  .brv-tg-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

.brv-tg-kinds__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.brv-tg-kinds dt {
  margin: 0;
}

.brv-tg-kinds dd {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-tg-form {
  display: grid;
  gap: 14px;
}

.brv-tg-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 768px) {
  .brv-tg-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.brv-tg-fields .form-field {
  margin: 0;
}

.brv-tg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.brv-tg-text {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-tg-rules {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-tg-clash .alert__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.brv-tg-links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-tg-links li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-tg-links li:last-child {
  border-bottom: 0;
}

.brv-tg-links .brv-sl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brv-tg-links__n {
  flex: none;
  font-size: 12.5px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}

.brv-tg-danger {
  border-color: var(--color-danger-soft);
}

.brv-tg-danger__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Analytics and Conversions: by tag ───────────────────────────────── */

.brv-an-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.brv-an-kinds__k {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-an-kinds__k:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.brv-an-kinds__k[aria-current] {
  border-color: transparent;
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

.brv-an-bytag .brv-c-bars__label a {
  color: inherit;
  text-decoration: none;
}

.brv-an-bytag .brv-c-bars__label a:hover {
  text-decoration: underline;
}

.brv-an-untagged {
  font-style: italic;
  color: var(--color-text-subtle);
}

.brv-an-bytag .brv-c-panel__head,
.brv-cv-bytag .brv-c-panel__head {
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .brv-an-kinds {
    margin-left: 0;
  }
}

/* A report's "One tag" card: the chip beside the name it covers. */
.brv-rp-cover__control .brv-tagchoice__box .combobox {
  max-width: none;
}

/* Seven "Create … as" rows and the matches: the list scrolls, not the page. */
.brv-tagpick .combobox__list {
  max-height: 300px;
  overflow-y: auto;
}

/* ── Phone targets: 44px of hit area without moving what is around ─── */

@media (max-width: 767.98px) {
  .brv-tagpick .combobox__token-remove {
    min-width: 44px;
    min-height: 44px;
    margin: -14px -12px -14px -10px;
  }

  .brv-tg-name,
  .brv-tg-num,
  .brv-tg-links a,
  .brv-cv-tag,
  .brv-an-bytag .brv-c-bars__label a {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    padding-block: 15px;
    margin-block: -15px;
  }

  .brv-tg-num {
    justify-content: flex-end;
  }

  .brv-an-kinds__k {
    min-height: 44px;
  }
}

/* A filter's list: wide enough for its group headings, and it scrolls. */
.brv-tagfilter .combobox__list,
.brv-tagchoice .combobox__list {
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
}


/* ══ Final pass · payments: one vendor, synced products, billing views (A5) ════ */

/* ── A5 · Who bills: Billing's hero line (merchant of record) ─────────── */

.brv-bl-mor {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.brv-bl-mor svg {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

/* ── A5 · Staff: "Payments: Dodo Payments · merchant of record · Live" ── */

.brv-pay-line {
  display: block;
  color: var(--color-text);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.brv-vd-means .brv-pay-line {
  margin-bottom: 4px;
}

/* ── A5 · A plan's or pack's products: the synced id and its versions ── */

.brv-pay-product {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.brv-pay-product__current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
}

.brv-pay-product__label {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.brv-pay-product__sync {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.brv-pay-product__sync:hover {
  text-decoration: underline;
}

.brv-pay-versions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-pay-versions__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.brv-pay-versions__item--current {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}

.brv-pay-versions__id {
  min-width: 0;
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.brv-pay-versions__price {
  font-variant-numeric: tabular-nums;
}

.brv-pay-versions__from {
  color: var(--color-text-subtle);
}

.brv-pay-versions__item .badge {
  margin-left: auto;
}

.brv-pay-versions__none {
  margin: 0;
  color: var(--color-text-subtle);
  font-size: 0.8125rem;
}

.brv-pay-stale {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.brv-pay-stale svg {
  flex: none;
  margin-top: 2px;
}

/* ── A5 · Vendors › Dodo › Products ───────────────────────────────────── */

.brv-pay-sync {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.brv-pay-sync__text {
  flex: 1 1 280px;
  min-width: 0;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.brv-pay-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.brv-pay-item a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}

.brv-pay-item a:hover {
  text-decoration: underline;
}

.brv-pay-there {
  display: block;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.brv-pay-there--drift {
  color: var(--color-warning-soft-text);
  font-weight: 600;
}

.brv-pay-table .data-table__table td {
  vertical-align: top;
}

.brv-pay-table .brv-pay-versions {
  min-width: 260px;
}

@media (max-width: 767.98px) {
  .brv-pay-table .brv-pay-versions {
    min-width: 0;
  }

  .brv-pay-versions__item .badge {
    margin-left: 0;
  }
}

/* ── B27 · An editor is settings rows (G4): what and why on the left,
   the controls on the right — the plan and credit-pack editors, as owner
   Settings and staff Settings draw theirs. Numbers stay 240px, three
   across. ── */

.brv-pay-row > .brv-pay-row__ctl {
  justify-self: stretch;
  min-width: 0;
}

.brv-pay-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 500px;
}

.form-grid.brv-pay-nums {
  grid-template-columns: repeat(3, minmax(0, 240px));
  column-gap: 20px;
}

.form-grid.brv-pay-nums > .form-field {
  grid-column: auto;
}

@media screen and (max-width: 767.98px) {
  .form-grid.brv-pay-nums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── A credit-history short link wraps only at its "/" (slParts) ────── */

.brv-cr-tl__about.brv-sl {
  overflow: visible;
  column-gap: 0;
}

.brv-cr-sl__note {
  margin-left: 0.35em;
  font-family: var(--font-family-base);
  color: var(--color-text-subtle);
}

/* ── /billing and /credits: the header link to the other page repeats
   the hub's sub-navigation (the list at 1024 and up, the chips from 768),
   so it shows on the phone alone, where the section stands by itself. */

@media screen and (min-width: 768px) {
  .brv-pay-hubdup,
  .page-header__actions:has(> .brv-pay-hubdup:only-child) {
    display: none;
  }
}

/* ── fp-org 50 · One meter rule: every usage meter (views/layout.ts
   `meter()`, the sidebar card's included) draws the 80% tick where it
   turns amber, and reads red at 100%. The tick reaches past the track,
   so the meter shows what overhangs it. ── */

.brv-c-meter:has(> .brv-c-meter__tick) {
  overflow: visible;
}

.brv-c-meter__tick {
  fill: var(--color-warning);
}

/* ══ Final pass · cross-cutting consistency and theme ═══════════════════════ */

/* design/v3/fp-cross.md (cross-cutting consistency) and fp-theme.md (tokens
   and theme). Tokens only, unlayered, the six breakpoint values only. */

/* ── Tokens this pass adds ────────────────────────────────────────────── */
/* The signed-out brand panel is the deep ink panel in BOTH themes: its own
   tokens, never redefined for dark (brevily.css turns the inverse tokens
   light there). */
:root {
  --brv-au-panel: #15202b;
  --brv-au-panel-text: #ffffff;
  --brv-au-panel-accent: #5ed6c6;
  --brv-ic-arrow-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
  --brv-ic-dash: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'><path d='M6 12h12'/></svg>");
  --brv-ic-tick: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>");
  /* fp-cross 13 / fp-theme 8 · the viewer's avatar is ink; an
     organisation's monogram is ink too. In dark neither is a white tile. */
  --brv-you-bg: var(--color-primary);
  --brv-you-fg: var(--color-primary-contrast);
  --brv-you-ring: transparent;
  --brv-org-bg: var(--color-primary);
  --brv-org-fg: var(--color-primary-contrast);
  /* fp-theme 12 · a short link's domain: text-2 in light, dimmed teal in dark. */
  --brv-sl-domain: var(--color-text-muted);
  /* fp-theme 10 · the segmented rail and the chosen item's edge. */
  --brv-seg-rail: color-mix(in srgb, var(--color-border) 65%, var(--color-surface-sunken));
  --brv-seg-edge: var(--color-border-strong);
  /* fp-theme 11 · a granted permission chip. */
  --brv-granted-bg: rgb(10 115 105 / 0.14);
  --brv-granted-edge: rgb(10 115 105 / 0.45);
  /* fp-theme 2 · the email's white paper, and a {{ variable }} on it. */
  --brv-paper: #ffffff;
  --brv-paper-var: rgb(10 115 105 / 0.14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brv-you-bg: var(--color-surface-sunken);
    --brv-you-fg: var(--color-text);
    --brv-you-ring: var(--color-accent);
    --brv-org-bg: var(--accent-tint-strong);
    --brv-org-fg: var(--color-accent-strong);
    --brv-sl-domain: color-mix(in srgb, var(--color-accent) 72%, transparent);
    --brv-seg-rail: var(--color-surface-sunken);
    --brv-seg-edge: var(--color-border);
    --brv-granted-bg: rgb(79 209 192 / 0.22);
    --brv-granted-edge: rgb(79 209 192 / 0.5);
    /* fp-org 55 · the info pair's ground was a saturated navy block in
       dark: a tint of the info colour over the surface, as the others. */
    --color-info-soft: color-mix(in srgb, var(--color-info) 13%, var(--color-surface));
  }
}

:root[data-theme="dark"] {
  --brv-you-bg: var(--color-surface-sunken);
  --brv-you-fg: var(--color-text);
  --brv-you-ring: var(--color-accent);
  --brv-org-bg: var(--accent-tint-strong);
  --brv-org-fg: var(--color-accent-strong);
  --brv-sl-domain: color-mix(in srgb, var(--color-accent) 72%, transparent);
  --brv-seg-rail: var(--color-surface-sunken);
  --brv-seg-edge: var(--color-border);
  --brv-granted-bg: rgb(79 209 192 / 0.22);
  --brv-granted-edge: rgb(79 209 192 / 0.5);
  --color-info-soft: color-mix(in srgb, var(--color-info) 13%, var(--color-surface));
}

/* ══ Signed-out pages (fp-cross A, fp-theme 1) ═══════════════════════════ */

/* fp-theme 1 · the brand panel keeps its light-theme inverse values in
   dark, so every rule inside it (cards, wells, ticks, links) reads as on
   the deep ink panel. */
.brv-au__aside {
  --color-surface-inverse: var(--brv-au-panel);
  --color-text-inverse: var(--brv-au-panel-text);
  --color-accent-inverse: var(--brv-au-panel-accent);
  background: var(--brv-au-panel);
  color: var(--brv-au-panel-text);
}

/* A1 · the logo never shrinks; below 1024 the step line gives way to
   "Sign in" (as /signup's top bar does). */
.brv-au__home {
  flex: none;
}

.brv-au__top-signin {
  display: none;
}

@media (max-width: 1023.98px) {
  .brv-au__top-steptext {
    display: none;
  }

  .brv-au__top-signin {
    display: inline-flex;
    align-items: center;
  }
}

/* A4 · the form column starts at one offset under the top bar (the heading
   no longer moves between steps); the footer stays pinned by the grid. */
.brv-au__main {
  align-items: flex-start;
  padding-top: 88px;
}

@media (max-width: 1279.98px) {
  .brv-au__main {
    padding-top: 72px;
  }
}

@media (max-width: 1023.98px) {
  .brv-au__main {
    padding-top: 56px;
  }
}

/* A5 · "What happens next" is one component (views/auth.ts nextSteps):
   inside the sign-in column it keeps the column's width. */
.brv-au .brv-ra-next {
  margin: 0;
}

/* A3 · the shared footer under the report form. */
.brv-ra-main > .brv-au__foot {
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* A8 · five categories in two columns: the last spans both. */
.brv-ra-reasons__grid > .brv-ra-reason:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
  /* A2 · a textarea keeps its rows on phone (the 44px field floor is a
     floor for one-line fields). */
  :is(.brv-c-page, dialog.modal, .brv-au, .brv-ra) textarea.input {
    min-height: 96px;
  }

  /* A6 · 44px targets for the text links. */
  .brv-au__legal a,
  .brv-au-pw__forgot,
  .brv-au-swap,
  .brv-au-back,
  .brv-au-chip a,
  .brv-au__top-aside a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .brv-au__legal a {
    justify-content: center;
    min-width: 44px;
  }

  .brv-au-pw__forgot {
    top: -12px;
  }

  .brv-au-remember {
    min-height: 44px;
  }

  .brv-au__main {
    padding-top: 20px;
  }

  .brv-ra-main > .brv-au__foot {
    padding-top: 12px;
  }
}
.brv-au__top-signin {
  color: var(--color-accent);
}

/* ══ Theme (fp-theme 2–14) ═══════════════════════════════════════════════ */

/* 2 · The email body's Visual canvas is the paper the email is sent on:
   white in both themes, framed by a hairline and captioned. Variables on
   it use the light-theme mark. */
.brv-em-fields .editor__surface {
  margin: 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

.brv-em-fields .editor__surface::highlight(brv-em-var),
.brv-em-fields .editor__surface ::highlight(brv-em-var) {
  background-color: var(--brv-paper-var);
}

/* 3 · 7 · Checks and radios, drawn the same in both themes: unchecked a
   surface box with a control border (never a grey fill), checked teal
   with a tick; disabled = the same colours at 0.55. */
:is(.choice__input, .data-table__select input)[type="checkbox"],
:is(.choice__input, .data-table__select input)[type="radio"] {
  appearance: none;
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--brv-dur-quick), border-color var(--brv-dur-quick);
}

:is(.choice__input, .data-table__select input)[type="radio"] {
  border-radius: 50%;
}

:is(.choice__input, .data-table__select input)[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background-color: var(--color-accent-contrast);
  -webkit-mask: var(--brv-ic-tick) center / contain no-repeat;
  mask: var(--brv-ic-tick) center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--brv-dur-quick) var(--brv-ease-spring);
}

:is(.choice__input, .data-table__select input)[type="checkbox"]:is(:checked, :indeterminate) {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

:is(.choice__input, .data-table__select input)[type="checkbox"]:is(:checked, :indeterminate)::before {
  transform: scale(1);
}

:is(.choice__input, .data-table__select input)[type="checkbox"]:indeterminate::before {
  -webkit-mask-image: var(--brv-ic-dash);
  mask-image: var(--brv-ic-dash);
}

:is(.choice__input, .data-table__select input)[type="radio"]:checked {
  border: 5px solid var(--color-accent);
}

:is(.choice__input, .data-table__select input):is([type="checkbox"], [type="radio"]):hover:not(:disabled, :checked) {
  border-color: var(--color-text-muted);
}

:is(.choice__input, .data-table__select input):is([type="checkbox"], [type="radio"]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:is(.choice__input, .data-table__select input):is([type="checkbox"], [type="radio"]):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* A disabled switch: its normal colours at 0.55 (on stays teal); off keeps
   a strong track and a bordered knob, so it never vanishes on white. */
.switch__input:disabled ~ .switch__track,
.switch__input:disabled:checked ~ .switch__track {
  opacity: 0.55;
  box-shadow: none;
}

.switch__input:disabled ~ .switch__track {
  background: var(--color-border-strong);
}

.switch__input:disabled:checked ~ .switch__track {
  background: var(--color-accent);
}

.switch__input:disabled ~ .switch__track .switch__thumb {
  box-shadow: 0 0 0 1px var(--color-border-control);
}

@media (prefers-reduced-motion: reduce) {
  :is(.choice__input, .data-table__select input)[type="checkbox"],
  :is(.choice__input, .data-table__select input)[type="checkbox"]::before {
    transition: none;
  }
}

/* 4 · A text row action (a row's one action, "View", "Manage") is never
   drawn at the faintest colour: text-2 at full strength. Icon actions stay
   quiet until the row is hovered (G4). */
td.data-table__actions > .btn:not(.btn--icon),
td.data-table__actions > * > .btn:not(.btn--icon),
.brv-c-rowquick > .btn:not(.btn--icon) {
  opacity: 1;
  color: var(--color-text-muted);
}

td.data-table__actions > .btn:not(.btn--icon):hover,
td.data-table__actions > * > .btn:not(.btn--icon):hover,
.brv-c-rowquick > .btn:not(.btn--icon):hover {
  color: var(--color-text);
}

.brv-c-rowquick:has(> .btn:not(.btn--icon):only-child) {
  opacity: 1;
}

/* 5 · The plan mix: Free is a visible neutral, and the gaps between
   segments show the panel, not a track. */
.brv-so-tone--free {
  --so-tone: var(--color-text-subtle);
}

.brv-so-planbar:has(.brv-so-planbar__part) .brv-so-planbar__track {
  fill: transparent;
}

/* 6 · Every meter track reads against its panel (--line), so 0 of N shows
   an empty bar and 1% a fill on a visible track. */
.brv-c-meter__track,
.brv-so-planbar__track {
  fill: var(--color-border);
}

.brv-c-usage__bar,
.brv-pp-seats__track,
.brv-dm-share__track,
.brv-cr-fill__track,
.brv-br-split__track,
.brv-c-split__track {
  background: var(--color-border);
}

.brv-c-ring__track {
  stroke: var(--color-border);
}

/* A shortfall meter (a count that should be full: staff sign-in
   protection): the track tinted amber. */
:is(.brv-c-meter--short, .brv-sp-meter--short) .brv-c-meter__track {
  fill: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
}

/* 8 · Marks in dark: the viewer's avatar and organisation monograms are
   never white tiles (tokens above); the owner is marked by its badge. */
.brv-c-acct__button .avatar,
.avatar.brv-pp-av--you,
.avatar.avatar--you,
.brv-sg-person__you,
.brv-acct-who__av.avatar,
.brv-ps-bar__acct .avatar,
.brv-au-chip__av {
  background: var(--brv-you-bg);
  color: var(--brv-you-fg);
  box-shadow: inset 0 0 0 1.5px var(--brv-you-ring);
}

.brv-c-ws__mark:not(.brv-c-ws__mark--brand),
.brv-so-mark,
.brv-sf-mark,
.brv-pal__tile--ink {
  border-color: transparent;
  background: var(--brv-org-bg);
  color: var(--brv-org-fg);
}

/* Owner avatars are ordinary (fp-cross 13): the Owner badge says it. */
.avatar.brv-og-av--ink,
.brv-br-av--owner,
.brv-er-admin__av--owner.avatar {
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

/* The selected source chip: teal edge and words, not an inverse fill. */
.brv-sf-src__item--on {
  border-color: var(--color-accent);
  background: var(--accent-tint);
  color: var(--color-accent-strong);
}

/* Support in the audit log: a teal mark, not the viewer's ink. */
.avatar.brv-al-av--ink {
  background: var(--accent-tint-strong);
  color: var(--color-accent-strong);
}

/* 9 · A processor action shown while none is set up: faded to 0.6, which
   holds ~3:1 in light as in dark. */
.brv-bl-off > .btn:disabled,
.brv-bl-off > .btn:disabled:hover {
  opacity: 0.6;
}

/* 10 · Segmented in light: a darker rail, the chosen item edged and in
   the text colour at 600; the others text-2. */
.segmented {
  background: var(--brv-seg-rail);
}

.segmented__input:checked + .segmented__label {
  border-color: var(--brv-seg-edge);
  font-weight: 600;
}

.js .segmented::before {
  border-color: var(--brv-seg-edge);
}

.js .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
  font-weight: 600;
  color: var(--color-text);
}

/* 11 · Permission chips: granted = a teal fill with a teal edge (the
   legend's key is the same chip); not granted = a dashed control edge. */
.brv-gp-bit {
  border-color: color-mix(in srgb, var(--color-border-control) 70%, transparent);
}

.brv-gp-bit--on {
  border: 1px solid var(--brv-granted-edge);
  background: var(--brv-granted-bg);
  color: var(--color-accent-strong);
}

.brv-gp-bit--na {
  border-color: transparent;
}

/* 12 · The domain part of a short link. */
.brv-sl__d {
  opacity: 1;
  color: var(--brv-sl-domain);
}

/* 13 · Routing: hollow markers and optional step rings in a control edge. */
.brv-lr-legend__dot,
.brv-lr-step__n {
  border-color: var(--color-border-control);
}

.brv-lr-legend__dot--on,
.brv-lr-step--on .brv-lr-step__n {
  border-color: var(--color-accent);
}

.brv-lr-legend__dot--always,
.brv-lr-step--always .brv-lr-step__n {
  border-color: var(--color-primary);
}

/* 14 · Status badges use the soft pair's own darker text (the green
   change pills in Top links included). */
.badge--success {
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
}

.badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning-soft-text);
}

.badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.badge--info {
  background: var(--color-info-soft);
  color: var(--color-info-soft-text);
}


/* ══ Cross-cutting components (fp-cross B) ═══════════════════════════════ */

/* 17 · ONE group / role chip (views/helpers.ts groupChip): the neutral
   badge; a person's groups side by side. */
.brv-c-groups {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.brv-c-none {
  color: var(--color-text-subtle);
}

.brv-og-person > .brv-c-group {
  margin-left: 6px;
}

/* 20 · ONE panel-head link (views/helpers.ts headLink): accent, 13px, a
   trailing arrow; a link drawn as a ghost button in a head reads the same.
   An action in a head is a small default button (markup). */
.brv-c-headlink,
.brv-pp-headlink,
.brv-sp-headlink,
.brv-og-headlink,
.brv-br-more,
.brv-vd-more,
.brv-c-panel__head a.btn--ghost:not(.btn--icon),
.brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more) {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

:is(.brv-c-headlink, .brv-pp-headlink, .brv-sp-headlink, .brv-og-headlink, .brv-br-more, .brv-vd-more, .brv-c-panel__head a.btn--ghost:not(.btn--icon), .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more)):hover {
  background: none;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(.brv-c-headlink, .brv-pp-headlink, .brv-sp-headlink, .brv-og-headlink, .brv-br-more, .brv-vd-more, .brv-c-panel__head a.btn--ghost:not(.btn--icon), .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more)) > svg {
  flex: none;
  width: 14px;
  height: 14px;
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

:is(.brv-c-headlink, .brv-pp-headlink, .brv-sp-headlink, .brv-og-headlink, .brv-br-more, .brv-vd-more, .brv-c-panel__head a.btn--ghost:not(.btn--icon), .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more)):not(:has(svg))::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--brv-ic-arrow-right) center / contain no-repeat;
  mask: var(--brv-ic-arrow-right) center / contain no-repeat;
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

:is(.brv-c-headlink, .brv-pp-headlink, .brv-sp-headlink, .brv-og-headlink, .brv-br-more, .brv-vd-more, .brv-c-panel__head a.btn--ghost:not(.btn--icon), .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more)):hover > svg,
:is(.brv-c-headlink, .brv-pp-headlink, .brv-sp-headlink, .brv-og-headlink, .brv-br-more, .brv-vd-more, .brv-c-panel__head a.btn--ghost:not(.btn--icon), .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more)):hover::after {
  transform: translateX(2px);
}

@media (max-width: 767.98px) {
  .brv-c-headlink,
  .brv-pp-headlink,
  .brv-sp-headlink,
  .brv-og-headlink,
  .brv-br-more,
  .brv-vd-more,
  .brv-c-panel__head a.btn--ghost:not(.btn--icon),
  .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more) {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.brv-c-headlink, .brv-pp-headlink, .brv-sp-headlink, .brv-og-headlink, .brv-br-more, .brv-vd-more, .brv-c-panel__head a.btn--ghost:not(.btn--icon), .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more)) > svg,
  :is(.brv-c-headlink, .brv-pp-headlink, .brv-sp-headlink, .brv-og-headlink, .brv-br-more, .brv-vd-more, .brv-c-panel__head a.btn--ghost:not(.btn--icon), .brv-c-panel__head :is(.brv-sf-more, .brv-dm-more-link, .brv-lp-more, .brv-an-more))::after {
    transition: none;
  }
}

/* 21 · ONE empty state: an inline empty with an icon is the G4 one (a 44px
   sunken circle, a 16px title, one line); one without an icon is a quiet
   line — never the old dashed box. */
.empty--inline {
  border: 0;
  background: none;
}

.empty--inline:has(> .empty__icon) {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
}

.empty--inline:has(> .empty__icon) > .empty__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}

.empty--inline:has(> .empty__icon) > .empty__icon svg {
  width: 21px;
  height: 21px;
}

.empty--inline:has(> .empty__icon) > .empty__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty--inline:has(> .empty__icon) .empty__title {
  font-family: var(--font-family-display);
  font-size: 16px;
  font-weight: 600;
}

.empty--inline:has(> .empty__icon) .empty__text {
  max-width: 380px;
  font-size: 13.5px;
}

.empty--inline:not(:has(> .empty__icon)) {
  justify-content: center;
  padding: 24px 16px;
  text-align: center;
}

.empty--inline:not(:has(> .empty__icon)) .empty__title {
  font-weight: 400;
  color: var(--color-text-subtle);
}

.data-table__empty:has(> .empty--inline:has(> .empty__icon)) {
  padding: 0;
}

/* 22 · The stat strip is the G4 stat: a plain overline label (no icons or
   swatches in it) and a 28px value, never a hero size. */
.brv-c-fig__l > :is(svg, .brv-i) {
  display: none;
}

@media screen and (min-width: 768px) {
  .brv-bl-hero__plan,
  .brv-cr-bal__n {
    font-size: 28px;
    line-height: 1.15;
  }
}

/* 19 · A row's ONE action as text (views/helpers.ts rowOpen): ghost,
   small, text-2 at full strength, a trailing chevron; the same on every
   list. More than one action is the in-row strip. */
.brv-c-rowopen {
  gap: 4px;
  padding-inline: 8px 6px;
  opacity: 1;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.brv-c-rowopen:hover {
  color: var(--color-text);
}

.brv-c-rowopen > svg {
  flex: none;
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-c-rowopen:hover > svg {
  transform: translateX(2px);
}

td.data-table__actions > .brv-c-rowopen.brv-al-open {
  display: inline-flex;
  width: auto;
  height: var(--control-height-sm);
}

@media (max-width: 767.98px) {
  td.data-table__actions > .brv-c-rowopen.brv-al-open {
    width: auto;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brv-c-rowopen > svg {
    transition: none;
  }
}

/* ══ Phone and tablet shell (fp-cross 11, 32, 33; B1 #3, #8) ═════════════ */

/* B1 #3 · 33 · A row of chips or tabs that scrolls fades on the edge that
   has more — either side (console-v3.js sets data-scroll-more). */
:is(.data-table__toolbar .brv-c-toolbar__filter, .brv-sf-tools .segmented, .brv-c-hub__nav, .brv-c-pagetabs, .brv-c-pagetabs .tabs__list, .brv-pal__scopes)[data-scroll-more="end"][data-scroll-more] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

:is(.data-table__toolbar .brv-c-toolbar__filter, .brv-sf-tools .segmented, .brv-c-hub__nav, .brv-c-pagetabs, .brv-c-pagetabs .tabs__list, .brv-pal__scopes)[data-scroll-more="start"][data-scroll-more] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
}

:is(.data-table__toolbar .brv-c-toolbar__filter, .brv-sf-tools .segmented, .brv-c-hub__nav, .brv-c-pagetabs, .brv-c-pagetabs .tabs__list, .brv-pal__scopes)[data-scroll-more="both"][data-scroll-more] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

/* Settled (script ran) and nothing more that way: no static fade. */
.data-table__toolbar .brv-c-toolbar__filter:not([data-scroll-more]):has(.segmented),
.brv-sf-tools .segmented:not([data-scroll-more]) {
  -webkit-mask-image: none;
  mask-image: none;
}

html:not(.js) .data-table__toolbar .brv-c-toolbar__filter:has(.segmented),
html:not(.js) .brv-sf-tools .segmented {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

/* A code block or table that scrolls inside its panel shows a thin bar
   too, beside its fade (a phone's own bar overlays and fades out). */
:is(.data-table__scroll, .brv-hscroll, .brv-c-plangrid__scroll)[data-more] {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}

/* B1 #8 · The topbar's crumbs: the middle ones give way first, the last
   stays whole. */
.brv-c-crumbs__item {
  flex: 0 1 auto;
}

.brv-c-crumbs__item:last-child {
  flex-shrink: 0;
  max-width: 100%;
}

.brv-c-crumbs__item:not(:first-child):not(:last-child) {
  flex-shrink: 1000;
  min-width: 2.6em;
}

.brv-c-crumbs__item:first-child:not(:last-child) {
  min-width: 3.5em;
}

/* 28 · The ⌘K trigger says all of its words at every width it shows them;
   768–1023 is "Search…" and the keys. */
.brv-c-search__short {
  display: none;
}

@media screen and (min-width: 1024px) {
  .brv-c-search {
    flex-basis: 320px;
  }
}

@media screen and (max-width: 1023.98px) {
  .brv-c-search__long {
    display: none;
  }

  .brv-c-search__short {
    display: inline;
  }
}

/* 14 · Staff Overview, stacked: what needs attention first, as the
   tenant's does. */
@media screen and (max-width: 1023.98px) {
  .brv-c-ov-grid > .brv-c-ov-rail:has(> .brv-so-attn .brv-so-attn__list) {
    order: -1;
  }
}

@media screen and (max-width: 767.98px) {
  /* 11 · B1 #8 · The phone's top bar gives up its back label (the chevron
     stays) before the title is cut (console-v3.js measures). */
  .brv-ps-bar--tight .brv-ps-bar__backtext {
    display: none;
  }

  .brv-ps-bar--tight .brv-ps-bar__back {
    flex: none;
    width: 44px;
    justify-content: center;
    padding-right: 0;
  }

  /* 32 · A page's secondary header actions: in the top bar's "More
     actions" sheet with script; without it, labelled — never a row of
     bare icons. */
  .brv-ps-moved {
    display: none;
  }

  .page-header__actions:not(:has(> :not(.brv-ps-moved))) {
    display: none;
  }

  html:not(.js) .page-header__actions > .btn:not(.btn--accent):has(> .brv-i) {
    gap: 6px;
    width: auto;
    padding: 0 12px;
    font-size: 14px;
  }

  .brv-ps-acts-open {
    order: 0;
  }

  .brv-ps-actrow--danger {
    color: var(--color-danger);
  }
}

/* 15 · A full allowance is the meter rule's danger at 100% (G4): the Free
   plan's "1 of 1" seat included, on the Overview and on Billing. */
.brv-c-ov-usage--full .brv-c-ov-usage__n,
.brv-c-ov-usage--full .brv-c-ov-usage__note,
.brv-bl-tile__note--full {
  color: var(--color-danger-soft-text);
}

.brv-c-ov-usage--full .brv-c-meter__fill,
.brv-bl-tile--full .brv-c-meter--danger .brv-c-meter__fill {
  fill: var(--color-danger);
}

/* 35 · Sessions: this one and the latest four, the rest behind "Show all"
   (a <details>, so it opens without script). */
.brv-acct-card > .brv-acct-more {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-acct-more > .brv-acct-row {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-acct-more__sum {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-accent);
  list-style: none;
  cursor: pointer;
}

.brv-acct-more__sum::-webkit-details-marker {
  display: none;
}

.brv-acct-more__sum:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-acct-more__sum:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: -2px;
}

.brv-acct-more__sum > svg {
  flex: none;
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-acct-more[open] > .brv-acct-more__sum > svg {
  transform: rotate(180deg);
}

.brv-acct-more__close,
.brv-acct-more[open] .brv-acct-more__open {
  display: none;
}

.brv-acct-more[open] .brv-acct-more__close {
  display: inline;
}

@media (prefers-reduced-motion: reduce) {
  .brv-acct-more__sum > svg {
    transition: none;
  }
}

/* ══ B1 #7 · Your account on a phone: the list, then one section ═════════
   Settings' pattern: /profile (or #account) is the list of sections, a
   section's #id shows it alone, and the top bar says "‹ Your account"
   (views/layout.ts draws both bars; CSS picks by :target). */
@media screen and (max-width: 767.98px) {
  /* The list: the sub-navigation drawn as the hub's list is. */
  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-main {
    display: none;
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav {
    --brv-ic-chevron-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 6 6 6-6 6'/></svg>");
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__label {
    display: block;
    padding: 0 4px 8px;
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__item {
    gap: 12px;
    min-height: 52px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-top-color: var(--color-border-subtle);
    border-bottom-width: 0;
    border-radius: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 15px;
    font-weight: 400;
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__label + .brv-c-hub__item {
    border-top-color: var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__item:last-child {
    border-bottom-width: 1px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__label + .brv-c-hub__item:last-child {
    border-radius: var(--radius-md);
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__icon {
    color: var(--color-text-subtle);
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__text {
    flex: 1 1 auto;
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav .brv-c-hub__item::after {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    background-color: var(--color-text-subtle);
    -webkit-mask: var(--brv-ic-chevron-right) center / contain no-repeat;
    mask: var(--brv-ic-chevron-right) center / contain no-repeat;
  }

  /* Delete account stands alone under the groups, in red. */
  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav > .brv-acct-nav__danger {
    border-bottom-width: 1px;
    border-top-color: var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-danger);
  }

  .brv-acct-hub:not(:has(.brv-acct-main > :target)) > .brv-acct-nav > .brv-acct-nav__danger .brv-c-hub__icon {
    color: var(--color-danger);
  }

  /* A section: alone, with what belongs to it (Preferences brings "Emails
     you get"; Password the note on changing sign-in). */
  .brv-acct-hub:has(.brv-acct-main > :target) > .brv-acct-nav {
    display: none;
  }

  .brv-acct-main:has(> :target) > :not(:target) {
    display: none;
  }

  .brv-acct-main > #preferences:target ~ #emails {
    display: grid;
  }

  .brv-acct-main:has(> #password:target) > #security {
    display: flex;
    margin-top: 0;
  }

  .brv-acct-main > .brv-acct-sec:target {
    padding-top: 0;
    border-top: 0;
  }

  /* The page's own header leads the list; a section's title is the bar's. */
  :root:has(.brv-acct-main > :target) .page-header:has(+ .brv-acct) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The top bar: the list's (the tile, "Your account"), or a section's
     ("‹ Your account" and the section's name). */
  .brv-ps-bar__back--acct,
  .brv-ps-bar__title--acctsec,
  :root:has(.brv-acct-main > :target) .brv-ps-bar__ws--acct,
  :root:has(.brv-acct-main > :target) .brv-ps-bar__title--acctlist {
    display: none;
  }

  :root:has(.brv-acct-main > :target) .brv-ps-bar__back--acct {
    display: inline-flex;
  }

  :root:has(.brv-acct-main > :target) .brv-ps-bar__title--acctsec {
    display: block;
  }
}

/* ══ B1 #5 · Sparklines: the final path is what the server drew ══════════
   A dash over pathLength 1 on a non-scaling stroke stops short of the end
   once the box is stretched; at rest the line is whole (no dash), and the
   draw runs only when motion is allowed. Today's partial day is left out
   by every caller (the line stops at yesterday); charts draw it lighter. */
.brv-c-spark__line {
  stroke-dasharray: none;
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  .brv-c-spark__line {
    animation: brv-spark-draw 900ms var(--brv-ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 25ms + 120ms);
  }
}

@keyframes brv-spark-draw {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

/* 26 · Every page header: the actions align with the title's top, and one
   description measure (72ch), wrapped without an orphan. */
.page-header {
  align-items: flex-start;
}

.page-header__subtitle {
  max-width: 72ch;
  text-wrap: pretty;
}

/* ══ Mono text keeps its characters (fp-links 41, globally) ══════════════
   JetBrains Mono's contextual ligatures draw "https://" as "https: //";
   every element set in the mono stack turns them off. */
code,
pre,
kbd,
samp,
[class*="mono"],
.brv-sl,
.brv-link,
.brv-acct-codes code,
.brv-ak-code,
.brv-ak-copyfield__text,
.brv-ak-key__id,
.brv-ak-mono,
.brv-al-code,
.brv-al-diff__row,
.brv-al-mono,
.brv-al-org,
.brv-ap-code,
.brv-ap-mono,
.brv-au-mono,
.brv-au-mono-input,
.brv-au-plus,
.brv-bl-mono,
.brv-br-item__mono,
.brv-c-cell-link > a.brv-link[href*="/links/"],
.brv-c-cell-link > a.brv-sl,
.brv-c-dns,
.brv-c-key,
.brv-c-linkhead__link,
.brv-c-ov-cc,
.brv-c-plangrid__code,
.brv-c-shorten__domain .combobox__input,
.brv-c-shorten__one,
.brv-cp-id__text,
.brv-cr-sl,
.brv-cv-click__id,
.brv-cv-code,
.brv-cv-copy,
.brv-cv-ev,
.brv-dd-cols > li,
.brv-dd-file__path,
.brv-dd-mono,
.brv-dm-copy,
.brv-dm-head .page-header__title,
.brv-dm-host,
.brv-dm-mono,
.brv-dm-name,
.brv-em-code,
.brv-em-fields textarea[name="text"],
.brv-em-out__text,
.brv-em-sample__grid .form-field__label,
.brv-em-tok,
.brv-em-var__name,
.brv-er-code,
.brv-er-mono,
.brv-dompick .combobox__input,
.brv-dompick .combobox__option-label,
.brv-fq-code,
.brv-fq-preview code,
.brv-gp-bit,
.brv-ig-code,
.brv-ig-copy,
.brv-ig-mono,
.brv-ig-note code,
.brv-ig-target,
.brv-lc-landing__url,
.brv-lc-mono,
.brv-lc-preview__dest,
.brv-lc-slug__input,
.brv-lc-slug__prefix,
.brv-lc-social__image,
.brv-lf-mock__key,
.brv-lf-mock__url,
.brv-li-csv,
.brv-li-mono,
.brv-li-names dd,
.brv-li-sample,
.brv-lp-cc,
.brv-lp-mono,
.brv-lp-sl,
.brv-lp-time,
.brv-lq-hex,
.brv-lq-mono,
.brv-lq-sl,
.brv-lr-cc,
.brv-lr-mono,
.brv-lr-prio,
.brv-ls-card__imghost,
.brv-ls-copyfield,
.brv-ls-mono,
.brv-ls-pair[data-ls-utm] .form-field__label,
.brv-og-code,
.brv-og-mono,
.brv-p__dest,
.brv-pay-versions__id,
.brv-pd-mono,
.brv-ra-copy__text,
.brv-ra-link,
.brv-rp-mail__text,
.brv-rp-mono,
.brv-rp-sl,
.brv-sd-mono,
.brv-set-var,
.brv-sf-mono,
.brv-sf-ref,
.brv-sf-refbig,
.brv-sg-code__text,
.brv-sg-mono,
.brv-so-org__code,
.brv-sp-code,
.brv-sso-copy__text,
.brv-t-shot__url,
.brv-vd-card__code,
.brv-vd-val,
.input.brv-fq-source,
.js .editor--html.brv-em-source .editor__source {
  font-variant-ligatures: none;
}

/* fp-staff 11 · A list's phone toolbar: search has the whole first row
   (its placeholder is never cut); Filters and Select lead the second, the
   status chips scroll beside them. */
@media screen and (max-width: 767.98px) {
  .brv-c-page .data-table__toolbar .brv-c-toolbar__search {
    flex: 1 1 100%;
  }

  .js .data-table__toolbar .brv-card-phone {
    order: 1;
  }

  .data-table__toolbar .brv-c-toolbar__filter:has(.segmented) {
    flex: 1 1 0;
  }
}

/* fp-staff 8 · The permission matrix's folded band on a phone: its title
   and "Show all ⌄" on one line, the counts on their own line under it. */
@media screen and (max-width: 767.98px) {
  .brv-gp-mx__summary {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .brv-gp-mx__counts {
    order: 3;
    flex: 1 1 100%;
  }

  .brv-gp-mx__show {
    flex: none;
    white-space: nowrap;
  }
}

/* ══ Shared causes handed on by the page agents (fp-org, fp-staff) ═══════ */

/* fp-org 49 · A tablet's header keeps its secondary actions' words (an
   icon alone does not say what it opens); the phone moves them into the
   top bar's "More actions". */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .page-header__actions > .btn:not(.btn--accent):has(> .brv-i) {
    gap: 6px;
    width: auto;
    padding: 0 12px;
    font-size: 13.5px;
  }
}

/* fp-org 47 · The rail's foot keeps the usage ring; the topbar's toggle is
   the one way to open the sidebar (a second one sat under the ring). */
.brv-c-shell .brv-c-side__foot > button.brv-c-side__expand {
  display: none;
}

/* fp-org 51 · An empty list draws its empty state alone: no column heads
   (nor a select-all box) over it. */
.data-table__scroll:has(> .data-table__empty) > .data-table__table {
  display: none;
}

/* fp-org 57 · A row's one text action lines up with the rows that also
   have a kebab: the kebab's slot is kept. */
.data-table:has([data-row-actions]) td.data-table__actions:not(:has([data-row-actions])) > .brv-c-rowopen:last-child {
  margin-inline-end: 32px;
}

/* The permission editor's per-area "mask N" is a developer's number: the
   switches say what is granted (it stays in the markup for the tests). */
.brv-c-perm__mask {
  display: none;
}

/* fp-org 26 · The tab bar holds as many tabs as the person has (a
   billing-only member: Overview, Billing, Search). */
@media screen and (max-width: 767.98px) {
  .brv-ps-tabs {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
  }
}


/* ══ Final pass · links, a link, analytics, reports, domains ════════════════ */

/* ── Links: the list, the shorten bar ───────────────────────────────── */

/* The shorten bar's hint line (fp-links 30, fp-cross 34): the separators
   are CSS, drawn in the gap BEFORE each part, so the first part on every
   line draws its dot left of the line, where the line clips it — a
   wrapped line never starts with "·". The keyboard hints leave a phone
   and any touch screen. */
.brv-c-shorten__hint {
  column-gap: 0;
  overflow: hidden;
}

.brv-c-shorten__hint > span {
  position: relative;
  margin-inline: 0 22px;
}

.brv-c-shorten__hint > span::before,
.brv-c-shorten__hint > span + span::before {
  content: "·";
  position: absolute;
  inset-inline-end: 100%;
  width: 22px;
  margin: 0;
  text-align: center;
  color: var(--color-border-strong);
}

.brv-c-shorten__keys {
  white-space: nowrap;
}

/* The URL's placeholder ends in an ellipsis where it cannot fit (script
   swaps in the short one below 1024px). */
.brv-c-shorten__url .input {
  text-overflow: ellipsis;
}

@media (max-width: 767.98px) {
  .brv-c-shorten__keys,
  .brv-c-shorten__enter {
    display: none;
  }

  .brv-c-shorten__url .input {
    padding-inline-end: 12px;
  }
}

@media (pointer: coarse) {
  .brv-c-shorten__keys,
  .brv-c-shorten__enter {
    display: none;
  }

  .brv-c-shorten__url .input {
    padding-inline-end: 12px;
  }
}

/* A row's "when and by whom" on a card and under a tablet row's name
   (fp-links 18, 19): "24 Sep · by you" on one line. */
@media (max-width: 1023.98px) {
  :is(.brv-card-under, .data-table[data-cards] td[data-card="meta"]) > .brv-c-made {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
  }

  :is(.brv-card-under, .data-table[data-cards] td[data-card="meta"]) > .brv-c-made > span {
    margin: 0;
  }

  :is(.brv-card-under, .data-table[data-cards] td[data-card="meta"]) > .brv-c-made > .brv-c-made__by::before {
    content: "·";
    margin-inline: 5px;
  }
}

@media (max-width: 767.98px) {
  /* The floating "+" is the phone's Create link (fp-cross 12). */
  .brv-c-page:has(.brv-fab) .page-header__actions > .brv-c-links__create {
    display: none;
  }

  /* The floating "+" clears the list's foot (fp-cross 9, fp-links 10):
     the page ends its height plus 16px above the tab bar (which carries
     the safe area), so the pager is never under it. */
  .brv-c-shell__content:has(.brv-fab) {
    padding-bottom: calc(var(--layout-gutter) + var(--brv-ps-tabs-h, 0px) + 56px + 16px);
  }
}

/* ── A flagged link (fp-links 20) ───────────────────────────────────── */

/* "What you can do" comes first in the page, so stacked (below 1280px)
   it follows the flag panel straight away — attention first — and the
   visitor mock comes after; beside each other it keeps the right-hand
   column. */
@media (min-width: 1280px) {
  .brv-lf-grid > .brv-lf-todo {
    grid-column: 2;
    grid-row: 1;
  }

  .brv-lf-grid > .brv-lf-visitors {
    grid-column: 1;
    grid-row: 1;
  }
}

/* ── One link's header (fp-links 31, 34) ────────────────────────────── */

/* The facts run as a line of text, balanced when it wraps, so no fact
   is left alone on a second line. */
.brv-lp-facts {
  display: block;
  text-wrap: balance;
  line-height: 1;
}

.brv-lp-facts > * {
  margin-block: 3px;
  margin-inline-end: 14px;
  vertical-align: middle;
}

.brv-lp-facts > :last-child {
  margin-inline-end: 0;
}

.brv-lp-facts > .badge,
.brv-lp-facts > .brv-lp-fact,
.brv-lp-facts > .brv-lp-tags {
  display: inline-flex;
}

/* The tags are the list's "# tag" chips, the status badge's height. */
.brv-lp-tags.brv-c-tags {
  gap: 4px;
}

/* The link's tabs scroll sideways on a phone with the fade on the edge
   that has more (fp-links 11, the `brv-hscroll` machinery); wider, they
   are a plain row that never clips its underline. */
@media (min-width: 768px) {
  .brv-lp-tabs .tabs__list.brv-hscroll {
    overflow: visible;
  }
}

/* ── Import (fp-links 22, 36, 41) ───────────────────────────────────── */

/* "Column names it reads" folds away, so the rail ends near the form. */
.brv-li-namesblock {
  display: block;
}

.brv-li-namesblock > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
  list-style: none;
  cursor: pointer;
}

.brv-li-namesblock > summary::-webkit-details-marker {
  display: none;
}

.brv-li-namesblock > summary > .brv-i {
  flex: none;
  transition: transform var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-li-namesblock[open] > summary > .brv-i {
  transform: rotate(180deg);
}

.brv-li-namesblock > summary:hover {
  color: var(--color-text);
}

.brv-li-namesblock > .brv-li-names {
  margin-top: 8px;
}

.brv-li-namesblock > .brv-li-small {
  margin-top: 8px;
}

.brv-li-namesnote {
  margin: 0;
}

/* On a phone the import is read-only (§11.5): the CSV field reads as a
   value — no resize handle, wrapped, muted — never as a place to type. */
@media (max-width: 767.98px) {
  [data-wide-editor] .brv-li-csv {
    min-height: calc(6 * 1.5em);
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    cursor: default;
  }

  [data-wide-editor] .brv-li-csv::placeholder {
    color: var(--color-text-subtle);
  }
}

/* Mono text keeps "https://" whole: console-v3.css turns the mono
   stack's ligatures off everywhere. */

/* ── Analytics and Conversions (fp-links 43) ────────────────────────── */

/* On a phone the toolbar is one column: the range and every filter run
   the full width, the range's three choices share it evenly. */
@media (max-width: 767.98px) {
  .brv-an-tools {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .brv-an-tools > .segmented {
    display: flex;
    width: 100%;
  }

  .brv-an-tools > .segmented > .segmented__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .brv-an-tools > .segmented .segmented__label {
    justify-content: center;
    width: 100%;
  }

  .brv-an-tools > .select,
  .brv-an-tools > .brv-tagfilter,
  .brv-an-tools > .brv-tagfilter > .combobox {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .brv-an-tools > .brv-an-sep {
    display: none;
  }

  .brv-an-tools > .brv-an-caption {
    margin-left: 0;
  }
}

/* Conversions (fp-links 42): a rate's figure sits under its header, the
   meter after it; a revenue figure keeps its currency code beside it. */
.brv-cv-rate > .brv-an-share__pct {
  width: 40px;
  text-align: left;
  color: var(--color-text);
}

.brv-cv-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

/* On a phone the half-width cell has no room for the code: the symbol
   (Intl's, distinct per currency — "$" is only ever USD) says it. */
@media (max-width: 767.98px) {
  .brv-cv-amount > small {
    display: none;
  }
}

/* ── Domains (fp-links 21, 26, 33, 39) ──────────────────────────────── */

/* A hostname in an uppercase overline keeps its own case, in mono. */
.brv-dm-host {
  font-family: var(--font-family-mono);
  font-size: 1.05em;
  letter-spacing: 0;
  text-transform: none;
}

/* One domain's save bar behaves as a link's Settings does (S3 E): with
   script, Discard and Save show once something changed. */
.brv-dm-savebar__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.js [data-dm-form]:not([data-dirty]) .brv-dm-savebar__actions {
  display: none;
}

/* Stacked under the main column (below 1280px), the rail is ONE column
   (§11): two across left holes under the shorter panels. */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .brv-dm-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}


/* ── Reports and Integrations: an empty list (fp-links 35) ──────────── */

/* A list with nothing in it draws no column headers over its empty
   state, and the state sits in an ordinary gap, its action beside it. */
:is(.brv-rp-list, .brv-ig-list, .brv-ig-deliveries) .data-table__scroll:has(> .data-table__empty) > .data-table__table {
  display: none;
}

:is(.brv-rp-list, .brv-ig-list, .brv-ig-deliveries) .data-table__empty {
  padding: 20px 16px;
}

/* ── Phone targets (the layout check's two warnings here) ───────────── */

/* A short link in the integrations table and a store link in an app's
   facts are 44px targets on a phone: the text keeps its line, a band
   above and below it takes the tap. */
@media (max-width: 767.98px) {
  .brv-ig-sl.brv-sl {
    position: relative;
  }

  .brv-ig-sl.brv-sl::before {
    content: "";
    position: absolute;
    inset: -14px 0;
  }

  /* A store link is as wide as its cell (ending in an ellipsis), with
     14px of padding above and below that the row's gap absorbs. */
  .brv-ap-trunc {
    overflow: visible;
  }

  .brv-ap-trunc > a {
    display: block;
    max-width: 100%;
    margin-block: -14px;
    padding-block: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* The Filters sheet (a list's phone tools): the tag filter runs the full
   width, as the sheet's other filters do. */
.brv-card-sheet .brv-tagfilter,
.brv-card-sheet .brv-tagfilter > .combobox {
  display: block;
  width: 100%;
  max-width: none;
}

/* ── Free Analytics (fp-org 16, 23, 61) ─────────────────────────────── */

/* The gated "Email this as a report": where the header folds it to its
   icon (below 1024) the plan badge is a corner mark, the icon stays. */
@media (max-width: 1023.98px) {
  .page-header__actions > .brv-an-report:has(> .badge) {
    position: relative;
    overflow: visible;
  }

  .page-header__actions > .brv-an-report > .badge {
    position: absolute;
    top: -8px;
    right: -10px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-surface);
    font-size: 11px;
  }
}

/* A comparison the plan cannot make: the switch reads as off and quiet,
   its label in the subtle colour (the tooltip says why). */
.brv-an-compare .switch__input:disabled ~ .switch__label {
  color: var(--color-text-subtle);
}

/* The toolbar's divider becomes space: wrapped, nothing dangles. */
.brv-an-tools > .brv-an-sep {
  width: 6px;
  background: none;
}

/* A panel's foot line reads from the left when it wraps. */
.brv-an-note,
.brv-an-topfoot {
  text-align: start;
}

/* ── Overview: Recent links as cards (fp-org 27) ────────────────────── */

/* The desktop table's floor would push a card's kebab out of its panel. */
@media (max-width: 767.98px) {
  .brv-c-ov-recent .data-table__table {
    min-width: 0;
    table-layout: auto;
  }
}


/* ══ Final pass · people, groups, billing, settings, your account ═══════════ */

/* ── Billing › Compare plans (Free): the current plan's column tinted top
   to bottom, values centred in tabular figures, one plan at a time on a
   phone (a segmented control of radios, no script). ── */

.brv-bl-cmp thead .brv-bl-cmp__plan,
.brv-bl-cmp td.brv-bl-cmp__v {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.brv-bl-cmp thead .brv-bl-cmp__plan > .brv-bl-cmp__name {
  justify-content: center;
}

.brv-bl-cmp thead .brv-bl-cmp__plan > .btn,
.brv-bl-cmp thead .brv-bl-cmp__plan > .brv-bl-off {
  justify-content: center;
}

.brv-bl-cmp td.brv-bl-cmp__cur {
  background: var(--accent-tint);
}

.brv-fo-cmppick {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .brv-fo-cmppick {
    display: block;
    padding: 12px 16px 0;
  }

  .brv-fo-cmppick .segmented {
    display: flex;
    width: 100%;
  }

  .brv-fo-cmppick .segmented__item {
    flex: 1 1 0;
    min-width: 0;
  }

  .brv-fo-cmppick .segmented__label {
    justify-content: center;
    width: 100%;
  }

  .brv-bl-cmpwrap:has(.brv-fo-cmppick) .brv-bl-cmp {
    min-width: 0;
    table-layout: auto;
  }

  .brv-bl-cmpwrap:has(.brv-fo-cmppick) .brv-bl-cmp :is(th, td):not(:first-child) {
    display: none;
  }

  .brv-bl-cmpwrap:has([data-col="2"]:checked) .brv-bl-cmp :is(th, td):nth-child(2),
  .brv-bl-cmpwrap:has([data-col="3"]:checked) .brv-bl-cmp :is(th, td):nth-child(3),
  .brv-bl-cmpwrap:has([data-col="4"]:checked) .brv-bl-cmp :is(th, td):nth-child(4),
  .brv-bl-cmpwrap:has([data-col="5"]:checked) .brv-bl-cmp :is(th, td):nth-child(5),
  .brv-bl-cmpwrap:has([data-col="6"]:checked) .brv-bl-cmp :is(th, td):nth-child(6) {
    display: table-cell;
  }

  .brv-bl-cmpwrap:has(.brv-fo-cmppick) .brv-bl-cmp thead th:first-child,
  .brv-bl-cmpwrap:has(.brv-fo-cmppick) .brv-bl-cmp tbody th[scope="row"] {
    width: 55%;
  }
}

/* ── Billing › Plans: every card's action block the same height, pinned
   to the card's foot, so the buttons (or the renewal line) start on one
   line; three cards sit in one row at tablet, never 2 + 1. ── */

@media screen and (min-width: 768px) {
  .brv-bl-plan__act {
    justify-content: flex-start;
    min-height: 78px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-bl-plans {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .brv-bl-plans:has(> :nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }

  .brv-bl-plan {
    padding: 16px 14px;
  }
}

/* ── Billing › Extras: the stepper's box is as tall as its 44px buttons
   on a phone, and a row stacks (title, one meta line, the stepper). ── */

@media screen and (max-width: 767.98px) {
  .brv-bl-step {
    height: 44px;
    align-items: stretch;
    overflow: hidden;
  }

  .brv-bl-step__btn {
    margin: 0;
    border-radius: 0;
  }

  .brv-bl-step__v {
    height: auto;
  }

  .brv-bl-xrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .brv-bl-xrow__price {
    grid-row: 2;
    margin-top: -8px;
    padding-left: 38px;
    font-size: 12px;
  }

  .brv-bl-xrow > .brv-bl-step,
  .brv-bl-xrow > .brv-bl-xrow__qty {
    grid-row: 3;
    justify-self: start;
    margin-left: 38px;
  }

  /* The Billing role's Overview: the names are in the text. */
  .brv-br-info .brv-br-avs {
    display: none;
  }
}

/* ── Credits: a price's unit shows only on a phone card (the table's
   column head says it above 768); the spending order's chevrons go
   where the steps stack. ── */

.brv-fo-unit {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .brv-fo-unit {
    display: inline;
    font-weight: 400;
    color: var(--color-text-subtle);
  }

  .brv-cr-order__sep {
    display: none;
  }
}

/* ── 403 · Who can give you access: on a phone every admin row is one
   layout (who, then the role badges, then the Email button). ── */

@media screen and (max-width: 767.98px) {
  .brv-er-admin__who {
    flex: 1 1 calc(100% - 44px);
  }

  .brv-er-admin__roles {
    flex: 1 1 100%;
    padding-left: 40px;
  }
}

/* ── Invite people: the addresses and the groups type at one size (16px
   on a phone keeps it from zooming in); Send waits, visibly, for one
   address and one group. ── */

.brv-pp-invite .combobox__input,
.brv-pp-invite .brv-pp-chips__entry {
  font-size: 14px;
}

@media screen and (max-width: 767.98px) {
  .brv-pp-invite .combobox__input,
  .brv-pp-invite .brv-pp-chips__entry {
    font-size: 16px;
  }
}

/* ── A person: the header's facts separated by a spaced middot that
   ends a line rather than starting one; the in-page back link gives way
   to the phone top bar's; a blocked Access row says why at its end. ── */

.brv-pp-head__meta {
  column-gap: 0;
}

.brv-pp-head__meta > span:not(:last-child)::after {
  content: '·';
  padding: 0 0.5em;
}

.brv-fo-why {
  flex: none;
  color: var(--color-text-subtle);
}

.brv-pp-rules.brv-fo-self {
  border-top: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

@media screen and (max-width: 767.98px) {
  .brv-pp-back {
    display: none;
  }
}

/* ── Audit log: on a phone the title sits in the top bar, so the paid
   plan's badge (the owner has the feature) is not repeated alone. ── */

@media screen and (max-width: 767.98px) {
  .brv-al-plan {
    display: none;
  }
}

/* ── Audit log cards (phone): who is the avatar and the name on one line
   (the address is on the entry), the time before it. ── */

@media screen and (max-width: 767.98px) {
  .brv-al-region .data-table[data-cards] td[data-card="meta"] > .brv-al-who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
  }

  .brv-al-region .data-table[data-cards] .brv-al-who > .brv-al-av {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    font-size: 9px;
  }

  .brv-al-region .data-table[data-cards] .brv-al-who__text,
  .brv-al-region .data-table[data-cards] .brv-al-who__name {
    display: inline;
  }

  .brv-al-region .data-table[data-cards] .brv-al-who__sub {
    display: none;
  }

  .brv-al-region .data-table[data-cards] .brv-al-when {
    white-space: nowrap;
  }
}

@media screen and (max-width: 767.98px) {
  /* The sheet's "Clear all" says it there. */
  .js .brv-al-toolbar .brv-fo-al-clear {
    display: none;
  }
}

/* ── A page's own "← Back" in its header: labelled on a tablet (not a
   bare arrow), left to the top bar's back on a phone. ── */

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .page-header__actions > .btn.btn--ghost.brv-fo-back:has(> .brv-i) {
    gap: 6px;
    width: auto;
    padding: 0 12px;
    font-size: 14px;
  }
}

@media screen and (max-width: 767.98px) {
  .page-header__actions > .brv-fo-back {
    display: none;
  }

  .page-header__actions:not(:has(> :not(.brv-fo-back))) {
    display: none;
  }
}

/* ── An audit entry as a page: "As recorded" spans the panel; on a phone
   each fact's label sits above its value, so a ULID fits one line. ── */

.brv-al-page__body {
  max-width: none;
}

.brv-al-page__body > :not(.brv-al-sec:has(.brv-al-code)) {
  max-width: 760px;
}

@media screen and (max-width: 767.98px) {
  .brv-c-kv.brv-al-kv {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .brv-al-kv dt {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
  }

  .brv-al-kv dd + dt {
    margin-top: 10px;
  }

  .brv-al-kv dd {
    overflow-wrap: anywhere;
  }
}

/* ── Settings › General: Name is the key–value list's first row (one left
   edge for the group), every group ends in the same foot row (status
   left, Save right; console-v3.js makes Save the accent once its group
   changes), links in the checklist are accent links, and the seats line
   is a note under the three conditions, not a fourth. ── */

.brv-fo-kvlabel {
  font: inherit;
  color: inherit;
}

.brv-sg-name.brv-fo-name {
  flex: 1 1 100%;
  gap: 4px;
}

.brv-sg-bar {
  min-height: 0;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
}

.brv-sg-check__link.brv-fo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
}

.brv-sg-check__link.brv-fo-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-sg-seats.brv-fo-seats > .brv-i {
  flex: none;
  margin-top: 2px;
  color: var(--color-text-subtle);
}

@media screen and (max-width: 767.98px) {
  .brv-sg-check__link.brv-fo-link {
    margin-left: 0;
    padding-left: 24px;
  }
}

/* ── A group: the audit sentence is its own hint under the chips, and
   the grid's per-area mask (a stored number) stays out of the page —
   the chips say the same in words. Remove is a 44px target on a phone. ── */

.brv-gp-savebar__holds:has(> .brv-fo-hint) {
  flex: 1 1 320px;
  min-width: 0;
}

.brv-gp-savebar__note.brv-fo-hint {
  flex: 1 1 100%;
  font-size: 12px;
}

.brv-gp-editor .brv-c-perm__mask {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .brv-gp-page-members .data-table__actions .btn,
  #members .data-table__actions .btn {
    min-height: 44px;
    padding-inline: 14px;
  }
}

/* ── Groups › Who can do what (phone): one group's column at a time,
   picked with a segmented control (radios, no script); the area keeps
   the rest of the width. ── */

.brv-fo-mxpick {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .brv-fo-mxpick {
    display: block;
    padding: 0 16px 12px;
  }

  .brv-fo-mxpick .segmented {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .brv-fo-mxpick .segmented__item {
    flex: 1 0 auto;
  }

  .brv-fo-mxpick .segmented__label {
    justify-content: center;
    width: 100%;
  }

  .brv-c-panel:has(> .brv-fo-mxpick) .brv-gp-matrix :is(th, td):not(:first-child) {
    display: none;
  }

  .brv-c-panel:has(> .brv-fo-mxpick [data-col="2"]:checked) .brv-gp-matrix :is(th, td):nth-child(2),
  .brv-c-panel:has(> .brv-fo-mxpick [data-col="3"]:checked) .brv-gp-matrix :is(th, td):nth-child(3),
  .brv-c-panel:has(> .brv-fo-mxpick [data-col="4"]:checked) .brv-gp-matrix :is(th, td):nth-child(4),
  .brv-c-panel:has(> .brv-fo-mxpick [data-col="5"]:checked) .brv-gp-matrix :is(th, td):nth-child(5),
  .brv-c-panel:has(> .brv-fo-mxpick [data-col="6"]:checked) .brv-gp-matrix :is(th, td):nth-child(6),
  .brv-c-panel:has(> .brv-fo-mxpick [data-col="7"]:checked) .brv-gp-matrix :is(th, td):nth-child(7),
  .brv-c-panel:has(> .brv-fo-mxpick [data-col="8"]:checked) .brv-gp-matrix :is(th, td):nth-child(8),
  .brv-c-panel:has(> .brv-fo-mxpick [data-col="9"]:checked) .brv-gp-matrix :is(th, td):nth-child(9) {
    display: table-cell;
  }

  .brv-c-panel:has(> .brv-fo-mxpick) .brv-gp-matrix .data-table__table {
    width: 100%;
    min-width: 0;
  }

  .brv-c-panel:has(> .brv-fo-mxpick) .brv-gp-area {
    min-width: 0;
  }

  .brv-c-panel:has(> .brv-fo-mxpick) .brv-gp-matrix .data-table__table :is(td, th):not(:first-child) {
    width: 1%;
    white-space: nowrap;
  }
}

/* ── Single sign-on: "What happens at step 4" is one row per case at
   every width (the table the spec asks for); the provider cards sit
   2 × 2 on a tablet, never 3 + 1. ── */

.brv-sso-outcomes__list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.brv-sso-outcome {
  align-items: center;
  border: 0;
  border-radius: 0;
  background: none;
}

.brv-sso-outcome + .brv-sso-outcome {
  border-top: 1px solid var(--color-border-subtle);
}

.brv-sso-mark {
  font-size: 13px;
  letter-spacing: -0.01em;
}

@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-sso-kinds {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── API keys › Call the API: a code block keeps its lines (a signed
   request's line count matters) and scrolls sideways with the fade. ── */

.brv-ak-code {
  white-space: pre;
  overflow-wrap: normal;
}

/* ── Data & deletion: the deletion day in normal case beside the
   overlines ("30 Oct"), "Confirm it's you" as wide as the panel on a
   tablet, and both export cards end alike: what it holds on the left,
   Download on the right (full width on a phone). ── */

.brv-dd-over.brv-fo-date {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
}

@media (max-width: 1279.98px) {
  .brv-dd-confirm {
    max-width: none;
  }
}

.brv-dd-file__foot {
  flex-wrap: nowrap;
}

.brv-dd-file__meta {
  flex: 1 1 0;
  min-width: 0;
}

.brv-dd-file__foot > .btn {
  flex: none;
}

@media screen and (max-width: 767.98px) {
  .brv-dd-file__foot {
    flex-wrap: wrap;
  }

  .brv-dd-file__meta {
    flex: 1 1 100%;
  }

  .brv-dd-file__foot > .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ── Your account (phone): an icon + body + action row is a fixed grid —
   the icon's column, then the body, the action under the body at its
   left edge — so the icon never wraps above its title. ── */

@media screen and (max-width: 767.98px) {
  .brv-acct-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
    align-items: start;
  }

  .brv-acct-row > .brv-c-attn {
    margin-top: 1px;
  }

  .brv-acct-row__end {
    grid-column: 2;
    width: auto;
    padding-left: 0;
    justify-content: flex-start;
  }
}

/* The Security banner opens the second half: a section rule and 24px
   above it, as every section has, and room below it. */
.brv-acct-banner {
  position: relative;
  margin-top: 48px;
}

.brv-acct-banner::before {
  content: '';
  position: absolute;
  top: -25px;
  right: 0;
  left: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-acct-main .brv-acct-banner + .brv-acct-sec {
  padding-top: 24px;
}

/* ── A key's Expires in its modal: the kit's gliding thumb measures itself
   while the dialog is still closed (zero size), so the chosen item is
   drawn as the plain v3 segmented draws it (as Reports' drawer does). ── */

.js .brv-ak-expiry .segmented::before {
  display: none;
}

.js .brv-ak-expiry .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* ── Groups list cards (phone): one fixed order — the members line, then
   the permission chips, each on its own line. ── */

@media screen and (max-width: 767.98px) {
  #groups[data-cards] .data-table__table tbody td[data-card="meta"] {
    flex: 1 1 100%;
  }
}


/* ══ Final pass · staff pages ═══════════════════════════════════════════════ */

/* ── fp-staff 1 · one organisation: a stacked rail fills the column ───── */
/* Below 1024 the lifecycle card may lead (the grid turns into a flex
   column with the rail's panels as its items); the grid's own
   `align-items: start` would then size each rail panel to its content. */
@media screen and (max-width: 1023.98px) {
  .brv-og-grid,
  .brv-og-rail {
    align-items: stretch;
  }
}

/* ── fp-staff 37 · the flagged link's "Review asked 27 Sep" on its own line ── */
.brv-og-life__when {
  display: block;
  white-space: nowrap;
}

/* ── fp-staff 21 · one organisation › People: one card shape on phone ──
   Avatar, then name and email, then ONE badge line: groups, then status. */
.brv-og-badges > .brv-og-tags:empty {
  display: none;
}

.brv-og-badges {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

@media screen and (max-width: 767.98px) {
  .brv-og-list__item:has(> .brv-og-badges) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    row-gap: 6px;
  }

  .brv-og-list__item > .brv-og-badges {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* ── fp-staff 16 · Overview › Plan mix: "1 organisation" on a card ──── */
/* The word after the figure is the card's; the table has its header. */
@media screen and (min-width: 768px) {
  .brv-so-unit {
    display: none;
  }
}

.brv-so-unit {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* ── fp-staff 5 · a question: the answer about eight rows at every width,
   the question wrapping and growing as it is typed ── */
.input.brv-fq-source {
  height: auto;
  min-height: calc(8 * 1.65em + 22px);
}

.input.brv-fq-question {
  height: auto;
  min-height: 0;
  resize: none;
  field-sizing: content;
}

/* ── A detail page's back link: on a phone the top bar's "‹" is the way
   back, so the header does not draw a second one. ── */
@media screen and (max-width: 767.98px) {
  .page-header__actions > .brv-c-headback,
  .page-header__actions:not(:has(> :not(.brv-c-headback))) {
    display: none;
  }
}

/* ── fp-staff 14 · Flagged links › a case: the Source read-out on one line.
   One joined control (the decider filled), not three loose pills. ── */
.brv-sf-src {
  flex-wrap: nowrap;
  gap: 0;
  max-width: 100%;
  padding: 1px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
}

.brv-sf-src__item {
  padding: 0 7px;
  border: 0;
  white-space: nowrap;
}

.brv-sf-src__item--on {
  border-radius: var(--radius-full);
}

/* A key–value column is never wide enough for the three side by side:
   the read-out takes the whole width under its key. */
.brv-sf-kv > dd:has(> .brv-sf-src) {
  grid-column: 1 / -1;
  margin-top: -4px;
}

/* ── fp-staff 15 · Flagged links, Abuse reports: an empty queue ─────────
   Nothing to open: no empty case panel; how the queue works sits beside
   the queue (as a tablet already stacks it under). */
@media (min-width: 1280px) {
  .brv-sf-md--empty > .brv-sf-side {
    display: contents;
  }

  .brv-sf-md--empty > .brv-sf-main {
    display: none;
  }

  .brv-sf-md--empty > .brv-sf-side > .brv-sf-rules {
    grid-column: 2;
  }
}

/* ── fp-staff 12 · People (staff): the count wraps beside "Staff team" ── */
.brv-sp-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ── fp-staff 2, 20 · codes break only after an underscore (`<wbr>`),
   never mid-word, and never run into the next column ── */
.brv-em-code,
.brv-c-plangrid__code {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

/* ── fp-staff 3 · Plans & pricing @ tablet: the three plans fit beside the
   feature names (a narrower names column, plan columns that share the
   rest); a fourth plan scrolls under the fade as before. ── */
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .brv-c-plangrid :is(td.brv-c-plangrid__corner, th.brv-c-plangrid__f) {
    width: 200px;
    min-width: 200px;
  }

  .brv-c-plangrid .brv-c-plangrid__plan,
  .brv-c-plangrid thead th.brv-c-plangrid__plan {
    width: auto;
    min-width: 150px;
  }

  .brv-c-plangrid thead td,
  .brv-c-plangrid thead th {
    padding-inline: 12px;
  }
}

/* ── fp-staff 18 · a plan's and a pack's Status row ── */
/* The Status row: what it is on the left, its one action at the right edge. */
.brv-c-settings-row.brv-pay-status {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.brv-c-settings-row.brv-pay-status > .brv-c-actions {
  justify-self: end;
}

/* ── fp-staff 22 · Organisations on a phone: the figures as one line of
   words, "30 links · 9 this period · 6 of 10 seats · 24.3k clicks, 30
   days", each figure strong and what qualifies it quiet ── */
.brv-og-facts {
  display: none;
}

@media screen and (max-width: 767.98px) {
  #organisations td[data-card="meta"] > .brv-og-desk {
    display: none;
  }

  #organisations td[data-card="meta"] > .brv-og-facts {
    display: inline;
    font-weight: 400;
    color: var(--color-text-subtle);
  }

  #organisations .brv-og-facts > strong {
    font-weight: 600;
    color: var(--color-text);
  }
}


/* ── fp-staff 26 · Domains (staff): the Default badge never wraps under
   the name ── */
.brv-pd-name {
  flex-wrap: nowrap;
}

.brv-pd-name > .badge {
  flex: none;
  white-space: nowrap;
}

/* A platform domain is a short name: read whole, never a letter a line. */
.brv-pd-name > a.brv-sl {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* ── fp-staff 4 · Emails › a template on a phone (read-only): Subject and
   Preheader as wrapping words, the Body rendered whole with no inner
   scroll, "Not edited…" left under the panel's description ── */
.brv-em-ro {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .brv-em-words .form-field:has(> :is(input[name="subject"], input[name="preheader"])),
  .brv-em-words .form-field:has(input[name="subject"], input[name="preheader"]) {
    display: none;
  }

  .brv-em-words .brv-em-ro {
    display: grid;
    gap: 6px;
  }

  .brv-em-ro__text {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    font-size: 15px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .brv-em-words .editor__surface {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .brv-em-words > .brv-c-panel > .brv-c-panel__head {
    flex-wrap: wrap;
  }

  .brv-em-words .brv-em-saved {
    flex-basis: 100%;
    max-width: none;
    text-align: start;
  }
}

/* ── fp-staff 19 · Vendors: an address breaks after a slash (`<wbr>`),
   never mid-word; a single part too long for the line still wraps ── */
.brv-vd-copy .brv-ak-copyfield__text {
  overflow-wrap: break-word;
}

/* ── fp-staff 32 · Audit log (staff) on a phone: the scope first (All
   organisations · Platform only), then the search, the rest behind
   Filters ── */
@media screen and (max-width: 767.98px) {
  .data-table__toolbar .brv-al-toolbar--staff > .brv-al-scope {
    order: -1;
  }
}

/* ── fp-cross 14 (staff Overview) · once the rail stacks (below 1024),
   Needs attention comes before the chart, as the tenant Overview does ── */
@media screen and (max-width: 1023.98px) {
  .brv-c-ov-grid > .brv-c-ov-rail:has(.brv-so-attn__item) {
    order: -1;
  }
}

/* ── fp-staff 11 (page part) · Help centre on a phone: the search whole,
   the status chips under it, the category on a row of its own ── */
@media screen and (max-width: 767.98px) {
  .brv-fq-list .data-table__toolbar .brv-c-toolbar__search {
    flex: 1 1 100%;
  }

  .brv-fq-list .data-table__toolbar .brv-c-toolbar__filter:not(:has(.segmented)) {
    order: 3;
    flex: 1 1 100%;
  }

  .brv-fq-list .data-table__toolbar .brv-c-toolbar__filter:not(:has(.segmented)) :is(.select, .combobox, .combobox__field) {
    width: 100%;
  }
}

/* ── check:layout (staff @390) · a link standing in a case's key–values
   (the short link, the organisation, "1 actioned · 0 open") and a plan's
   or a pack's "Check and sync" are 44px
   targets: the padding reaches the fingertip, the margin gives the line
   back ── */
@media screen and (max-width: 767.98px) {
  .brv-sf-kv > dd > a,
  .brv-sf-org > a,
  .brv-pay-product__sync {
    padding-block: 14px;
    margin-block: -14px;
  }
}


/* ══ Leftovers · shared components and theme (verification pass) ════════════ */

/* ══ Leftovers · shared components and theme (design/v3/LEFTOVERS.md) ═══════
   One of each, across the console: the back link and the panel-head link,
   the topbar's trail at a tablet, a list's one foot, the tablet's line
   under a row's name, stacked avatars, a gated control's lock, drawn
   checks and radios, a short link's domain. Tokens only; unlayered; the
   v3 breakpoints only; no box-shadow on a panel. */

/* ── R6 · A role and its own group never double up on one line ─────────
   On a phone's card and a tablet row's line under the name, the group
   named like the role ("Admin" beside the Admin role) is left out; the
   desktop's Groups column keeps it (views/helpers.ts groupChips). */
@media screen and (max-width: 1023.98px) {
  .data-table[data-cards] .brv-c-group--role {
    display: none;
  }

  .brv-card-under:has(> .brv-c-groups--role) {
    display: none;
  }
}

@media screen and (max-width: 767.98px) {
  .data-table[data-cards] td[data-card]:has(> .brv-c-groups--role) {
    display: none;
  }
}

/* ── R7 · A tablet row's copies under its name start under the name's
   text, clear of the tile or avatar before it (views/cards.ts). ── */
.brv-card-unders {
  display: none;
}

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .brv-card-unders {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }

  .data-table[data-cards] td[data-card="primary"] > :is(.brv-c-linkcell, .brv-c-ov-link) ~ .brv-card-unders {
    /* the 28px tile and the 10px gap the cell draws */
    margin-inline-start: 38px;
  }

  .data-table[data-cards] td[data-card="primary"] > .brv-c-person:has(> .avatar--sm) ~ .brv-card-unders {
    margin-inline-start: calc(28px + var(--space-3));
  }

  /* an organisation's 30px mark and its 10px gap */
  .data-table[data-cards] td[data-card="primary"] > .brv-og-org:has(> .brv-og-mark) ~ .brv-card-unders {
    margin-inline-start: 40px;
  }
}

/* ── R10 · A gated control's lock stays a lock: never under 12px ─────── */
.brv-i--lock {
  flex: none;
  min-width: 12px;
  min-height: 12px;
}

/* ── O10 · S10 · The topbar's trail: where it would be cut, the middle
   crumbs fold into "…" (a menu listing them); the first and the last stay
   whole. A tablet folds unless the whole trail fits (console-v3.js
   says `--full`); wider, it folds only when cut (`--fold`). ── */
.brv-c-crumbs__more {
  display: none;
}

.brv-c-crumbs--fold .brv-c-crumbs__item--mid {
  display: none;
}

.brv-c-crumbs--fold .brv-c-crumbs__more {
  display: flex;
  flex: none;
  min-width: 0;
}

.brv-c-crumbs--fold .brv-c-crumbs__item:last-child {
  flex-shrink: 0;
}

@media screen and (min-width: 768px) and (max-width: 1023.98px) {
  .brv-c-crumbs:not(.brv-c-crumbs--full) .brv-c-crumbs__item--mid {
    display: none;
  }

  .brv-c-crumbs:not(.brv-c-crumbs--full) .brv-c-crumbs__more {
    display: flex;
    flex: none;
    min-width: 0;
  }
}

.brv-c-crumbs__morebtn {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.brv-c-crumbs__morebtn:hover,
.brv-c-crumbs__morebtn[aria-expanded="true"] {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.brv-c-crumbs__morebtn:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: 2px;
}

.brv-c-crumbs__menu {
  min-width: 200px;
}

/* ── C24 · ONE back link in a page header (views/helpers.ts headBack):
   the default (outline) button with a leading arrow, whichever variant
   class a page still writes beside `brv-c-headback`. ── */
.btn.brv-c-headback {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn.brv-c-headback:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-border-control);
  color: var(--color-text);
}

/* ── S24 · A plain link in a panel's foot to another page ("Open the audit
   log", "What each plan grants", "Show every group") reads as the ONE
   panel-head link (views/helpers.ts headLink): accent, 13px, a trailing
   arrow, never an underline until hovered. ── */
.brv-c-panel__foot:not(.brv-so-foot) > a:not([class]) {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.brv-c-panel__foot:not(.brv-so-foot) > a:not([class]):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-c-panel__foot:not(.brv-so-foot) > a:not([class]) > svg {
  flex: none;
  width: 14px;
  height: 14px;
}

.brv-c-panel__foot:not(.brv-so-foot) > a:not([class]):not(:has(svg))::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--brv-ic-arrow-right) center / contain no-repeat;
  mask: var(--brv-ic-arrow-right) center / contain no-repeat;
}

@media screen and (max-width: 767.98px) {
  .brv-c-panel__foot:not(.brv-so-foot) > a:not([class]) {
    min-height: 44px;
  }
}

/* ── C26 · A page header's description: one measure (~60ch), wrapped
   without a one-word last line — over the theme's 46rem, which won by
   its `.brv-c-page` scope, and over any page's own. ── */
.page-header__subtitle,
.brv-c-page .page-header__subtitle,
.brv-c-page .brv-em-head .page-header__subtitle {
  max-width: 60ch;
  text-wrap: pretty;
}

/* ── T3 · T7 · Every check and radio drawn as the choice inputs are
   (console-v3.css "3 · 7"): unchecked a surface box with a control
   border, checked teal with a tick; disabled = the same colours at 0.55.
   These were native (accent-color): a disabled checked box went pale grey
   in light, an unchecked radio a solid grey disc in dark. ── */
:is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input)[type="checkbox"],
:is(.brv-sf-option__input, .brv-sg-option__input)[type="radio"] {
  appearance: none;
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color var(--brv-dur-quick), border-color var(--brv-dur-quick);
}

:is(.brv-sf-option__input, .brv-sg-option__input)[type="radio"] {
  border-radius: 50%;
}

:is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input)[type="checkbox"]::before {
  content: "";
  width: 11px;
  height: 11px;
  background-color: var(--color-accent-contrast);
  -webkit-mask: var(--brv-ic-tick) center / contain no-repeat;
  mask: var(--brv-ic-tick) center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--brv-dur-quick) var(--brv-ease-spring);
}

:is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input)[type="checkbox"]:checked {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

:is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input)[type="checkbox"]:checked::before {
  transform: scale(1);
}

:is(.brv-sf-option__input, .brv-sg-option__input)[type="radio"]:checked {
  border: 5px solid var(--color-accent);
}

:is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input, .brv-sf-option__input, .brv-sg-option__input):is([type="checkbox"], [type="radio"]):hover:not(:disabled, :checked) {
  border-color: var(--color-text-muted);
}

:is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input, .brv-sf-option__input, .brv-sg-option__input):is([type="checkbox"], [type="radio"]):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input, .brv-sf-option__input, .brv-sg-option__input):is([type="checkbox"], [type="radio"]):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  :is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input)[type="checkbox"],
  :is(.brv-pp-group__check, .brv-dm-keep, .brv-pf-unl > input)[type="checkbox"]::before,
  :is(.brv-sf-option__input, .brv-sg-option__input)[type="radio"] {
    transition: none;
  }
}

/* ── T12 · A short link's domain part: the dimmer text colour in light
   (`--brv-sl-domain`), never a paler teal — the link page's title, the
   Overview's recent links and a flagged case's line too. ── */
.brv-lp-sl::before,
.brv-c-ov-sl__d,
.brv-c-ov-link__short .brv-c-ov-sl__d,
.brv-sf-sl__d {
  opacity: 1;
  color: var(--brv-sl-domain);
}

/* ── O12 · Stacked avatars: a ring that separates each face (a surface
   gap outside a drawn edge), overlapping less, so "AR" never reads "AF". ── */
.brv-gp-stack > .avatar {
  border: 1px solid var(--color-border-strong);
  box-shadow: 0 0 0 2px var(--color-surface);
}

.brv-gp-stack > .avatar + .avatar {
  margin-left: -4px;
}

/* ── O51 · A list's ONE foot: the range, then its line (views/helpers.ts
   listRegion `foot`), then the pages. ── */
.data-table__footer > .brv-c-listfoot {
  flex: 1 1 16rem;
  min-width: 0;
  color: var(--color-text-subtle);
}

/* ── O22 · A gated tab names its plan (hubFrame tabbedHeader `badges`):
   the outline plan badge beside its label, sized as the sidebar's. ── */
.brv-c-pagetabs .tabs__tab:has(> .badge) {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.brv-c-pagetabs .tabs__tab > .badge {
  flex: none;
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
}

/* ── A row's strip on the cell's right edge (the kit centres a 40px
   column), so strips of different widths keep their kebabs in one
   column; a phone's card places its own. ── */
@media screen and (min-width: 768px) {
  td.data-table__actions {
    text-align: right;
  }
}

/* ── A bordered button in a row's strip is a live action: the ink every
   outline button has, never the quiet grey of a text action (console-v3
   "4"), which reads as disabled. ── */
td.data-table__actions > .btn--outline:not(.btn--icon):not(:disabled),
td.data-table__actions > * > .btn--outline:not(.btn--icon):not(:disabled),
.brv-c-rowquick > .btn--outline:not(.btn--icon):not(:disabled) {
  color: var(--color-text);
}


/* ══ Leftovers · tenant pages (verification pass) ═══════════════════════════ */

/* R4 · Credits › History on a phone: the view's segments are the chips
   every list scrolls (a pill each, the chosen one ink), in one row that
   scrolls inside the panel with the fade on the edge that has more
   (console-v3.js sets data-scroll-more), never past the border. */
@media screen and (max-width: 767.98px) {
  .brv-cr-history > .brv-c-panel__head {
    flex-wrap: wrap;
  }

  .brv-cr-history__show {
    flex: 1 1 100%;
    min-width: 0;
    max-width: calc(100% + 16px);
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .brv-cr-history__show::-webkit-scrollbar {
    display: none;
  }

  .brv-cr-history__show:not([data-scroll-more]) {
    -webkit-mask-image: none;
    mask-image: none;
  }

  html:not(.js) .brv-cr-history__show {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .brv-cr-history__show[data-scroll-more="start"] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent);
  }

  .brv-cr-history__show[data-scroll-more="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }

  .brv-cr-history__show .segmented {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    width: max-content;
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
  }

  .js .brv-cr-history__show .segmented::before {
    display: none;
  }

  .brv-cr-history__show .segmented__item {
    flex: none;
  }

  .brv-cr-history__show .segmented__label,
  .brv-cr-history__show .segmented--sm .segmented__label {
    height: 44px;
    padding-inline: 14px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: 14px;
    white-space: nowrap;
  }

  .brv-cr-history__show .segmented__input:checked + .segmented__label,
  .js .brv-cr-history__show .segmented[data-segmented-ready] .segmented__input:checked + .segmented__label {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
  }

  .brv-cr-history__show .segmented__input:checked + .segmented__label .segmented__n {
    color: inherit;
    opacity: 0.72;
  }
}

/* O54 · Mobile apps › How a deep link answers: the Android intent is one
   sunken surface (no white box inside it) that wraps only after its
   separators; a part wider than the lane scrolls with the fade. */
.brv-ap-mock--code {
  justify-content: center;
  padding: 0;
}

.brv-ap-mock--code > .brv-ap-code {
  display: block;
  padding: 12px 14px;
  border-radius: inherit;
  background: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

/* O62 · A hub page's plan badge on a phone, where the title is the top
   bar's: inline at the start of the description, never alone on a line. */
@media screen and (max-width: 767.98px) {
  .brv-c-page .brv-c-hub__head .page-header__heading:has(> .brv-c-hub__titlerow > .badge) {
    display: block;
  }

  .brv-c-page .brv-c-hub__head .brv-c-hub__titlerow:has(> .badge) {
    display: inline;
  }

  .brv-c-page .brv-c-hub__titlerow > .badge {
    margin-right: 6px;
    vertical-align: 1px;
  }

  .brv-c-page .brv-c-hub__titlerow:has(> .badge) + .page-header__subtitle {
    display: inline;
  }
}

/* O57 · A group's Members on a phone: Remove is a 44px ghost button, a
   target a thumb can hit, not a 20px text link. */
@media screen and (max-width: 767.98px) {
  #members td.data-table__actions > .brv-c-inline-form > .btn {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 14px;
    font-size: 14px;
  }
}

/* Your account: /profile/email and /profile/mfa land on #email and
   #two-factor. The page already pads its scroll by the top bar (the
   kit's scroll-padding-top, 72px), so a section adds nothing of its own:
   its rule sits just under the bar, not a section's height below it. */
@media screen and (min-width: 768px) {
  .brv-acct-sec,
  .brv-acct-banner {
    scroll-margin-top: 0;
  }
}

/* R8 · Your domains: Manage › (and a pending row's Check now) stay on
   one line beside the kebab. */
#domains td.data-table__actions {
  white-space: nowrap;
}


/* ══ Leftovers · staff pages and email previews (verification pass) ═════════ */

/* ── Staff overview · Recent organisations ─────────────────────────────── */

/* Six columns fit the panel at 1440; narrower, a long organisation or
   owner name wraps onto a second line rather than scrolling the table. */
.brv-so-recent__table :is(.brv-so-org__name, .brv-so-owner) {
  white-space: normal;
  text-wrap: balance;
}

/* ── Emails · the Body's "on white" note ───────────────────────────────── */

/* A note, never a control: the canvas is white by design (the body's
   inline colours assume the paper), so nothing here toggles. Replaces
   .brv-em-paper, whose swatch read as an unticked checkbox. */
.brv-em-onwhite {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--color-text-subtle);
}

.brv-em-onwhite > svg {
  flex: none;
}

.js .form-field:has(.editor--html.brv-em-source) .brv-em-onwhite {
  display: none;
}

/* On a phone the body is read-only, and read-only fields take the
   surface-alt ground: in the dark theme that hid the email's own dark
   words. The paper stays white, as the note says. */
@media screen and (max-width: 767.98px) {
  [data-wide-editor] .brv-em-fields .editor__surface[contenteditable="false"] {
    background: var(--brv-paper);
  }
}

/* ── A link's Overview: the chart keeps its own aspect (fp-staff 28) ─────── */

/* The chart no longer grows into the rail's height (a staff rail with
   Link safety made it ~620px tall): it keeps 5 : 2 of its width. */
.brv-lp-chart {
  flex: none;
}

.brv-lp-chart .brv-c-chart-fill {
  flex: none;
  aspect-ratio: 5 / 2;
}

/* Side by side, the rail is what stretches: when the numbers run longer,
   its last panel takes the rest, so the two columns still end together. */
@media screen and (min-width: 1280px) {
  .brv-lp-rail > .brv-c-panel:last-child {
    flex: 1 1 auto;
  }
}

/* Stacked under the numbers (fp-staff 1): staff's Link safety block puts
   a fourth panel in the two-column rail, so Quick actions takes the whole
   row instead of half of it with nothing beside it. */
@media screen and (min-width: 768px) and (max-width: 1279.98px) {
  .brv-lp-rail:has(> .brv-sf-rail) > .brv-lp-quick {
    grid-column: 1 / -1;
  }
}

/* ── Help centre · a question's fields (fp-staff 5) ─────────────────────── */

/* The question grows with its words but is never shorter than the inputs
   beside it (it was 27px next to 34px ones), its one line centred as
   theirs is. */
.input.brv-fq-question {
  min-height: var(--control-height-md, 34px);
  padding-block: 5px;
}

@media screen and (max-width: 767.98px) {
  /* A phone's field floor is 44px; the 96px textarea floor is for
     multi-line fields and left two lines of question in a box of four. */
  :is(.brv-c-page, dialog.modal) textarea.input.brv-fq-question {
    min-height: 44px;
    padding-block: 9px;
  }

  /* The answer keeps about eight rows here too, not the textarea floor. */
  :is(.brv-c-page, dialog.modal) textarea.input.brv-fq-source {
    min-height: calc(8 * 1.65em + 22px);
  }
}

/* ══ Platform › Status (website W4): each part now, its last 90 days, the
   incidents (modules/configuration/Status.views.ts). Breakpoints: 768. ══ */

.brv-st-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.brv-st-part {
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
}

.brv-st-note {
  color: var(--color-text-muted);
}

.brv-st-foot {
  margin: 0;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--color-border-subtle);
  font-size: 12.5px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.brv-st-foot code {
  font-family: var(--font-family-mono);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

/* A part's 90 days: one row of cells, oldest first, never wider than its
   column (each cell shrinks to fit, a phone's ~3px included). */
.brv-st-history {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.brv-st-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.brv-st-row__name {
  font-size: 13px;
  font-weight: 500;
}

.brv-st-bars {
  display: grid;
  grid-template-columns: repeat(90, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  height: 24px;
}

.brv-st-day {
  display: inline-block;
  min-width: 0;
  border-radius: 2px;
  background: var(--color-surface-sunken);
}

.brv-st-day--operational {
  background: var(--color-success);
}

.brv-st-day--degraded {
  background: var(--color-warning);
}

.brv-st-day--outage {
  background: var(--color-danger);
}

.brv-st-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 4px 0 0;
}

.brv-st-legend .brv-st-day {
  width: 10px;
  height: 10px;
  margin-inline-start: 8px;
}

.brv-st-legend .brv-st-day:first-child {
  margin-inline-start: 0;
}

.brv-st-link {
  display: block;
  font-weight: 500;
}

.brv-st-parts {
  display: block;
}

.brv-st-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.brv-st-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-st-update {
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--color-border);
}

.brv-st-update__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-st-update__body {
  margin: 6px 0 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.brv-st-form__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

@media screen and (max-width: 767.98px) {
  .brv-st-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  /* A phone's target floor. */
  .brv-st-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .brv-st-bars {
    gap: 0.5px;
  }
}

/* ══ Customers › Access requests (website W4): the list, and one request
   beside it at ≥ 1280 (alone below, with a way back). ════════════════ */

.brv-ar-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.brv-ar-side,
.brv-ar-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.brv-ar-split--open > .brv-ar-side {
  display: none;
}

.brv-ar-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}

.brv-ar-back:hover {
  color: var(--color-text);
}

@media screen and (min-width: 1280px) {
  .brv-ar-split--open {
    grid-template-columns: minmax(0, 1fr) 420px;
  }

  .brv-ar-split--open > .brv-ar-side {
    display: flex;
  }

  .brv-ar-back {
    display: none;
  }
}

.brv-ar-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.brv-ar-who > * {
  overflow-wrap: anywhere;
}

.brv-ar-open {
  font-weight: 500;
}

.brv-ar-facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.brv-ar-fact {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 12px;
}

.brv-ar-fact dt {
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-ar-fact dd {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.brv-ar-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border-subtle);
}

.brv-ar-decline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.brv-ar-decline__label {
  font-size: 13px;
  font-weight: 500;
}

.brv-ar-decline textarea {
  width: 100%;
}

.brv-ar-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

@media screen and (max-width: 767.98px) {
  .brv-ar-fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .brv-ar-actions .btn {
    min-height: 44px;
  }

  /* A phone's target floor. */
  .brv-ar-back,
  .brv-ar-fact dd > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ── Docs · the API docs: guides and the generated reference ─────────────
   (modules/developers). A guide's sections are panels, the prose beside
   its samples from 1280; the reference is rapid's own `docs-*` markup
   (DocsReference, DocsSchemas), restyled here rather than its inline
   stylesheet. */

.brv-dc {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Nothing in the docs may widen the page: every box shrinks to its
   column, and what is wider (the tabs, a table, a sample) scrolls inside
   its own box. */
.brv-dc > *,
.brv-dc-tabs,
.brv-dc-tabs .tabs,
.brv-dc-sec .brv-c-panel__body,
.brv-dc-ref .brv-c-panel__body,
.brv-dc-ref :is(.docs-reference, .docs-body, .docs-tag, .docs-op, .docs-schemas) {
  min-width: 0;
  max-width: 100%;
}

.brv-dc-tabs .tabs__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.brv-dc-tabs .tabs__tab {
  flex: none;
  white-space: nowrap;
}

.brv-dc-lede {
  max-width: 76ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.brv-dc-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.brv-dc-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-size: 13px;
}

.brv-dc-toc__k {
  font-weight: 600;
  color: var(--color-text-subtle);
}

.brv-dc-toc__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.brv-dc-toc__list a,
.brv-dc-a,
.brv-dc-ref .docs-ref {
  color: var(--color-accent);
  text-decoration: none;
}

.brv-dc-toc__list a:hover,
.brv-dc-a:hover,
.brv-dc-ref .docs-ref:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brv-dc-sec,
.brv-dc-ref .docs-op,
.brv-dc-ref .docs-tag,
.brv-dc-ref .docs-schemas article {
  scroll-margin-top: 72px;
}

.brv-dc-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 24px;
}

.brv-dc-stack {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.brv-dc-after {
  margin-top: 16px;
}

.brv-dc-p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}

.brv-dc-ul,
.brv-dc-ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-inline-start: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.brv-dc-c,
.brv-dc-ref code {
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.brv-dc-note {
  margin: 0;
}

.brv-dc-ep {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.brv-dc-ep--link {
  color: var(--color-text);
  text-decoration: none;
}

.brv-dc-ep__path {
  font-family: var(--font-family-mono);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.brv-dc-verb,
.brv-dc-ref .docs-method {
  display: inline-block;
  min-width: 48px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-success-soft);
  color: var(--color-success-soft-text);
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.brv-dc-verb--post,
.brv-dc-ref :is(.docs-post, .docs-put, .docs-patch) {
  background: var(--accent-tint-strong);
  color: var(--color-accent);
}

.brv-dc-ref .docs-delete {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

/* A sample: its label (and a copy button for a request), then the code. */
.brv-dc-cb {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.brv-dc-cb__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.brv-dc-cb__head .btn {
  margin-inline-start: auto;
}

.brv-dc-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-subtle);
}

.brv-dc-code,
.brv-dc-ref .docs-json {
  max-width: 100%;
  overflow-x: auto;
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text);
  font-family: var(--font-family-mono);
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre;
  font-variant-ligatures: none;
}

.brv-dc-code:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.brv-dc-code b {
  color: var(--color-accent);
  font-weight: 600;
}

.brv-dc-code i {
  color: var(--color-text-subtle);
  font-style: normal;
}

/* Tables: a field and what it takes; scroll inside the panel when narrow. */
.brv-dc-table,
.brv-dc-ref :is(.docs-params, .docs-props) {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.brv-dc-table :is(th, td),
.brv-dc-ref :is(.docs-params, .docs-props) :is(th, td) {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: start;
  vertical-align: top;
}

.brv-dc-table thead th,
.brv-dc-ref .docs-params thead th {
  background: var(--color-surface-alt);
  color: var(--color-text-subtle);
  font-size: 12.5px;
  font-weight: 600;
}

.brv-dc-table tbody th {
  width: 32%;
  font-weight: 500;
}

.brv-dc-type {
  display: block;
  margin-top: 2px;
  color: var(--color-text-subtle);
  font-size: 12px;
  font-weight: 400;
}

.brv-dc-req,
.brv-dc-ref .docs-req {
  margin-inline-start: 6px;
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 600;
}

.brv-dc-req {
  margin-inline-start: 0;
}

.brv-dc-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 24px;
  margin: 0;
}

.brv-dc-fields dt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.brv-dc-fields dt .brv-dc-type {
  display: inline;
  margin: 0;
}

.brv-dc-fields dd {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* The retry schedule, and what is retried or given up. */
.brv-dc-tl {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
}

.brv-dc-tl__step {
  display: grid;
  grid-template-columns: 12px minmax(96px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.brv-dc-tl__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}

.brv-dc-tl__step--first .brv-dc-tl__dot {
  background: var(--color-accent);
}

.brv-dc-tl__step--end .brv-dc-tl__dot {
  background: var(--color-danger);
}

.brv-dc-tl__when {
  font-family: var(--font-family-mono);
  font-size: 12.5px;
}

.brv-dc-tl__what {
  color: var(--color-text-muted);
}

.brv-dc-wrules {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.brv-dc-wrule {
  padding: 12px 14px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.brv-dc-wrule h3 {
  margin: 0 0 6px;
}

.brv-dc-wrule p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* The overview's cards: a guide each, then the reference. */
.brv-dc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.brv-dc-card {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--brv-dur-quick) var(--brv-ease-out);
}

.brv-dc-card:hover,
.brv-dc-card:focus-visible {
  border-color: var(--color-accent);
}

.brv-dc-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.brv-dc-card__blurb {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* The generated reference (rapid's DocsReference + DocsSchemas). */
.brv-dc-ref .docs-reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 28px;
}

.brv-dc-ref .docs-nav {
  max-height: 280px;
  overflow-y: auto;
  padding-block-end: 12px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 13px;
}

.brv-dc-ref .docs-nav h4 {
  margin: 12px 0 4px;
  color: var(--color-text-subtle);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brv-dc-ref .docs-nav ul {
  margin: 2px 0;
  padding-inline-start: 0;
  list-style: none;
}

.brv-dc-ref .docs-nav ul ul {
  padding-inline-start: 10px;
}

.brv-dc-ref .docs-nav a {
  display: block;
  padding: 3px 0;
  color: var(--color-text-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.brv-dc-ref .docs-nav a:hover {
  color: var(--color-accent);
}

.brv-dc-ref .docs-nav .docs-method {
  min-width: 40px;
  margin-inline-end: 4px;
}

.brv-dc-ref .docs-body {
  min-width: 0;
}

.brv-dc-ref :is(.docs-tag, .docs-schemas) > h2 {
  margin: 24px 0 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: 16px;
  font-weight: 600;
}

.brv-dc-ref .docs-tag:first-child > h2 {
  margin-top: 0;
}

.brv-dc-ref .docs-op {
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.brv-dc-ref :is(.docs-op, .docs-schemas article) h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}

.brv-dc-ref .docs-op h4 {
  margin: 12px 0 6px;
  color: var(--color-text-subtle);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.brv-dc-ref .docs-op p,
.brv-dc-ref .docs-also {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

.brv-dc-ref .docs-summary {
  color: var(--color-text);
  font-weight: 500;
}

.brv-dc-ref .docs-badge {
  display: inline-flex;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.brv-dc-ref .docs-deprecated {
  background: var(--color-danger-soft);
  color: var(--color-danger-soft-text);
}

.brv-dc-ref .docs-responses {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 13.5px;
}

.brv-dc-ref .docs-responses dd {
  margin: 0 0 6px;
}

@media screen and (min-width: 768px) {
  .brv-dc-wrules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1024px) {
  .brv-dc-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1280px) {
  .brv-dc-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .brv-dc-ref .docs-reference {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .brv-dc-ref .docs-nav {
    position: sticky;
    top: 72px;
    align-self: start;
    max-height: calc(100vh - 96px);
    padding-block-end: 0;
    border-bottom: 0;
  }
}

@media screen and (max-width: 767.98px) {
  /* A wide table scrolls inside its panel, never the page. */
  .brv-dc-ref :is(.docs-params, .docs-props) {
    display: block;
    overflow-x: auto;
  }

  .brv-dc-ref :is(.docs-op, .docs-schemas article) h3 code {
    overflow-wrap: anywhere;
  }

  /* A phone's target floor: the copy buttons, the tabs, the reference's
     links (a schema named alone under a response is no sentence). */
  .brv-dc-cb__head .btn,
  .brv-dc-tabs .tabs__tab {
    min-height: 44px;
  }

  .brv-dc-tabs .tabs__tab,
  .brv-dc-toc__list a,
  .brv-dc-ref .docs-nav a {
    min-width: 44px;
    justify-content: center;
  }

  .brv-dc-ep--link {
    min-height: 44px;
  }

  .brv-dc-ref .docs-responses .docs-ref {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  .brv-dc-card {
    min-height: 44px;
  }

  .brv-dc-toc__list a,
  .brv-dc-ref .docs-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}