/* Generated by npm run sync from styles/changelog.css and its @import lines, inlined in cascade order. Do not edit. */
/* styles/selection-control.css */
@layer design {
  .selection-control {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    cursor: pointer;
    color: var(--surface-panel);
  }
  .selection-control > input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
  }
  .selection-control-mark {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface-panel);
    color: var(--surface-panel);
    transition:
      background-color var(--motion-feedback) var(--motion-easing),
      border-color var(--motion-feedback) var(--motion-easing);
  }
  .selection-control-mark > svg {
    display: none;
    width: 14px;
    height: 14px;
  }
  .selection-control > input:checked + .selection-control-mark {
    border-color: var(--selection-text);
    background: var(--selection-text);
  }
  .selection-control[data-mode='check'] > input:checked + .selection-control-mark > svg {
    display: block;
  }
  /* Single selection is a radio: an empty circle, then a ring around a filled dot. Check and ordered keep the
     rounded-square checkbox. Unselected is an empty outline in every mode. */
  .selection-control[data-mode='single'] .selection-control-mark {
    border-radius: 50%;
  }
  .selection-control[data-mode='single'] > input:checked + .selection-control-mark {
    background: var(--surface-panel);
  }
  .selection-control[data-mode='single'] > input:checked + .selection-control-mark::after {
    content: '';
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: var(--selection-text);
  }
  .selection-control[data-mode='ordered'] > input:checked + .selection-control-mark::after {
    content: attr(data-order);
    font: 600 11px/1 var(--font-ui);
    font-variant-numeric: tabular-nums;
  }
  /* Only a checkbox can be mixed; a radio in a group with nothing chosen also matches :indeterminate. */
  .selection-control > input[type='checkbox']:indeterminate + .selection-control-mark {
    border-color: var(--selection-text);
    background: var(--selection-text);
  }
  .selection-control > input[type='checkbox']:indeterminate + .selection-control-mark > svg {
    display: none;
  }
  .selection-control > input[type='checkbox']:indeterminate + .selection-control-mark::after {
    content: '';
    width: 8px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }
  .selection-control > input:focus-visible + .selection-control-mark {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }
  .selection-control > input:disabled {
    cursor: default;
  }
  .selection-control > input:disabled + .selection-control-mark {
    border-color: var(--text-disabled);
    background: var(--surface-hover);
  }
  .selection-control > input:checked:disabled + .selection-control-mark {
    background: var(--text-disabled);
    border-color: var(--text-disabled);
  }
  .selection-control[data-mode='single'] > input:checked:disabled + .selection-control-mark {
    background: var(--surface-hover);
  }
  .selection-control[data-mode='single'] > input:checked:disabled + .selection-control-mark::after {
    background: var(--text-disabled);
  }
  .selection-control[data-size='compact'] {
    width: 28px;
    height: 28px;
  }
  .selection-control[data-size='compact'] .selection-control-mark {
    width: 16px;
    height: 16px;
  }
  .selection-control[data-size='compact'] .selection-control-mark > svg {
    width: 12px;
    height: 12px;
  }
  @media (pointer: coarse) {
    .selection-control[data-size='compact'] {
      width: 44px;
      height: 44px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .selection-control-mark {
      transition: none;
    }
  }
  [data-reduced-motion='true'] .selection-control-mark {
    transition: none;
  }

  @media (forced-colors: active) {
    .selection-control-mark {
      forced-color-adjust: none;
      background: Canvas;
      border-color: ButtonText;
      color: HighlightText;
    }
    .selection-control > input:checked + .selection-control-mark,
    .selection-control > input[type='checkbox']:indeterminate + .selection-control-mark {
      background: Highlight;
      border-color: Highlight;
    }
    .selection-control[data-mode='single'] > input:checked + .selection-control-mark {
      background: Canvas;
    }
    .selection-control[data-mode='single'] > input:checked + .selection-control-mark::after {
      background: Highlight;
    }
    .selection-control > input:disabled + .selection-control-mark {
      border-color: GrayText;
    }
    .selection-control > input:checked:disabled + .selection-control-mark {
      background: GrayText;
    }
    .selection-control[data-mode='single'] > input:checked:disabled + .selection-control-mark {
      background: Canvas;
    }
    .selection-control[data-mode='single'] > input:checked:disabled + .selection-control-mark::after {
      background: GrayText;
    }
  }

  .selection-control[data-size='large'] .selection-control-mark {
    width: 22px;
    height: 22px;
  }
  .selection-control[data-size='large'] .selection-control-mark > svg {
    width: 16px;
    height: 16px;
  }
}

/* styles/table.css */
@layer design {
  .data-region {
    background: var(--surface-panel);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    overflow: hidden;
    min-width: 0;
  }
  .data-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: nowrap;
    padding: var(--space-2) var(--space-3);
    /* The title starts on the columns' text edge (the density's cell inline padding). */
    padding-inline-start: var(--table-inline-padding, var(--space-3));
    border-bottom: 1px solid var(--border-default);
  }
  .data-tools strong {
    font-size: 15px;
    font-weight: 500;
  }
  .data-tools h2 {
    font: var(--text-title);
  }
  .data-count {
    color: var(--text-muted);
    font: var(--text-dense);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .data-scroll {
    overflow: auto;
    max-width: 100%;
    scrollbar-width: thin;
    scrollbar-color: var(--border-default) transparent;
  }
  .data-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .data-scroll::-webkit-scrollbar-track {
    background: transparent;
  }
  .data-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--border-default) padding-box;
  }
  .data-scroll::-webkit-scrollbar-corner {
    background: transparent;
  }
  .data-scroll table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
    font: var(--text-body);
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }
  .data-scroll th {
    height: var(--table-header-height, 44px);
    padding: var(--space-3) var(--space-4);
    text-align: start;
    vertical-align: middle;
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    background: var(--surface-panel);
    border-bottom: 1px solid var(--border-strong);
    white-space: nowrap;
  }
  .sort-control {
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 20px;
    padding: 0;
    font: inherit;
    color: inherit;
  }
  .data-scroll td {
    position: relative;
    padding: var(--space-3) 36px var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
    height: 48px;
  }
  .data-scroll tbody tr:last-child td {
    border-bottom: 0;
  }
  .data-scroll tr:has(input:checked) {
    background: var(--surface-selected);
  }
  .data-scroll td.numeric {
    text-align: right;
  }
  .data-scroll td:focus-visible {
    outline-offset: -2px;
  }
  /* Cell copy: a bare glyph just past the value's end (placed by DataTable on the value's last line; it takes no space, so
   numbers stay aligned, and lands in the cell's reserved end padding). It appears once the pointer rests on the value
   (DataTable sets data-copy-reveal after the hover intent) and at once on the focused cell; touch keeps it visible.
   Hover and focus change only the glyph colour; keyboard focus keeps the shared ring. */
  /* A portal child can change from text to a control without re-rendering the table.
     Keep the copy affordance out of that control's hit area in the same paint. */
  .data-scroll td[data-cell-pending] > .cell-copy,
  .data-scroll
    td[data-react-cell]:not([data-copy-with-controls]):has(
      > span :is(button, input, textarea, select, [role='button'], [contenteditable]:not([contenteditable='false']))
    )
    > .cell-copy {
    display: none;
  }
  .data-scroll .cell-copy.btn.icon {
    --height: 28px;
    position: absolute;
    inset-inline-start: var(--cell-copy-start, auto);
    inset-inline-end: 6px;
    top: var(--cell-copy-top, 50%);
    min-height: 0;
    transform: translateY(-50%);
    border-color: transparent;
    background: none;
    box-shadow: none;
    color: var(--text-secondary);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--motion-feedback) var(--motion-easing),
      color var(--motion-feedback) var(--motion-easing);
  }
  .data-scroll td > .cell-copy.btn.icon[data-variant]:is(:hover, :active, :focus-visible) {
    border-color: transparent;
    background: none;
    color: var(--text-primary);
  }
  .data-scroll .cell-copy.btn.icon:is([data-copy-reveal='true'], :focus-visible, [data-copied='true']),
  .data-scroll td[data-cell]:focus-visible > .cell-copy.btn.icon {
    opacity: 1;
    pointer-events: auto;
  }
  /* A device with any touch input (a touchscreen laptop whose primary pointer is fine): a tap focuses the cell without
     :focus-visible, so the focused cell shows its copy control. Mouse-only devices keep the resting-pointer reveal. */
  @media (any-pointer: coarse) {
    .data-scroll td[data-cell]:focus > .cell-copy.btn.icon {
      opacity: 1;
      pointer-events: auto;
    }
  }
  /* The owner-paged footer: the shared Pagination under the rows, inside the region so the expanded view keeps it. */
  .table-pagination {
    padding: var(--space-1) var(--space-3);
    border-top: 1px solid var(--border-default);
  }
  .table-pagination > .pagination {
    margin-top: 0;
  }
  .data-footer {
    min-height: 8px;
    padding: 0 var(--space-4);
  }
  .data-footer:has([role='status']:not(:empty)) {
    padding-block: var(--space-2);
    border-top: 1px solid var(--border-default);
  }
  .table-overflow-controls {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
  }
  .table-overflow-controls .row {
    gap: var(--space-1);
  }
  .collection-search {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-4);
  }
  .collection-search input {
    max-width: 360px;
  }
  @media (pointer: coarse) {
    .data-scroll td {
      padding-right: 52px;
      min-height: 52px;
    }
    .data-scroll .cell-copy.btn.icon {
      --height: 44px;
      inset-inline-start: auto;
      top: 50%;
      opacity: 1;
      pointer-events: auto;
    }
    .sort-control {
      min-height: 44px;
    }
  }
  @container (max-width:600px) {
    .data-tools {
      align-items: center;
    }
    .data-tools > div:first-child {
      width: auto;
    }
    .data-tools > .row {
      width: auto;
    }
    .data-tools [data-action='copy-table'] {
      margin: 0;
    }
    .data-scroll th,
    .data-scroll td {
      padding-left: var(--space-3);
    }
  }
  .data-footer {
    height: 0;
    min-height: 0;
    padding: 0;
  }
  .data-footer:has([role='status']:not(:empty)) {
    padding: 0;
    border: 0;
  }
  .reference-table-host {
    container-type: inline-size;
  }
  .reference-table .data-count {
    display: none;
  }
  .reference-table .data-tools {
    justify-content: space-between;
  }
  .reference-table .data-scroll td {
    white-space: normal;
    min-width: 0;
    vertical-align: top;
    overflow-wrap: break-word;
  }
  .reference-table .data-scroll table {
    min-width: 520px;
  }
  .reference-table .data-tools > .row {
    width: auto;
  }
  .reference-table .data-tools [data-action='copy-table'] {
    margin: 0;
  }
  /* Expanded without a native top layer (the fallback): the shared fullscreen modal owns size, padding and header; the
     table fills its body with one scroll region. */
  .dialog.table-dialog > [data-body] {
    overflow: hidden;
  }
  .expanded-table-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  .table-dialog .data-region {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    width: 100%;
  }
  .table-dialog .data-tools {
    flex: none;
  }
  .table-dialog .data-scroll {
    flex: 1 1 auto;
    min-height: 0;
  }
  .table-dialog :is(.data-footer, .table-pagination) {
    flex: none;
  }
  /* Expanded in place: ExpandedWorkspace owns the viewport bounds, surface and edges; the region stacks its toolbar,
     summary, one scroll region and footer, and the scroll region takes what the others leave. */
  .data-region[data-expanded-workspace] {
    display: flex;
    flex-direction: column;
  }
  .data-region[data-expanded-workspace] > :not(.data-scroll) {
    flex: none;
  }
  .data-region[data-expanded-workspace] > .data-scroll {
    flex: 0 1 auto;
    min-height: 0;
  }

  /* Every body cell shares one surface transition, so the selection column fades with its row. */
  .data-scroll tbody td {
    transition: background-color var(--motion-feedback) var(--motion-easing);
  }
  @media (prefers-reduced-motion: reduce) {
    .data-scroll tbody td {
      transition: none;
    }
  }

  .data-scroll th.numeric {
    text-align: right;
  }
  .data-scroll th.numeric .sort-control {
    width: 100%;
  }
  .data-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .data-region {
    container-type: inline-size;
  }
  .table-context {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-width: 0;
  }
  .table-heading {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    min-width: 0;
    flex-wrap: wrap;
  }
  .table-heading strong {
    overflow-wrap: anywhere;
  }

  .table-owner-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .table-density {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    font: var(--text-dense);
    color: var(--text-muted);
  }
  .table-density .select-control {
    width: 144px;
  }
  .table-density select,
  .table-density .choice-trigger {
    min-height: 40px;
    height: 40px;
    padding: 7px var(--space-3);
    font: var(--text-dense);
  }
  .table-actions,
  .table-copy-actions,
  .table-overflow-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
  }
  .table-actions {
    gap: var(--space-2);
  }
  .table-overflow-controls {
    padding: 0;
    border: 0;
    gap: 0;
  }
  .reference-table .data-tools {
    justify-content: space-between;
  }
  .data-region[data-density='compact'] .data-scroll td {
    height: 28px;
    padding-block: 2px;
  }
  .data-region[data-density='standard'] .data-scroll td {
    height: 44px;
    padding-block: 10px;
  }
  .data-region[data-density='comfortable'] .data-scroll td {
    height: 56px;
    padding-block: var(--space-4);
  }
  .data-region[data-density='compact'] .data-scroll .cell-copy.btn.icon {
    --height: 24px;
  }
  @container (max-width:900px) {
    .table-context {
      gap: var(--space-3);
    }
    .table-density > span {
      display: none;
    }
  }
  /* Narrow: the title keeps its place and every action stays visible. The actions flow in the title's row and wrap as
     whole groups, trailing: the scroll arrows stay beside the title and the rest follow together, so no control is left
     alone on a row. */
  @container (max-width:640px) {
    .data-tools {
      flex-wrap: wrap;
      justify-content: flex-end;
      padding: var(--space-2);
      padding-inline-start: var(--table-inline-padding, var(--space-3));
      gap: var(--space-2);
    }
    .table-context {
      flex: 1 1 8rem;
    }
    .table-actions {
      display: contents;
    }
    .table-copy-actions {
      margin-inline-end: 0;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .table-copy-actions .btn {
      padding-inline: 10px;
    }
  }
  /* Sort headers are whole-cell targets; reference headers remain quiet. */
  .data-scroll th:has(.sort-control) {
    padding: 0;
    transition: background-color var(--motion-feedback) var(--motion-easing);
  }
  .data-scroll th .sort-control {
    width: 100%;
    min-height: 44px;
    padding: 10px var(--space-4);
    text-align: inherit;
    cursor: pointer;
  }
  .data-scroll th:has(.sort-control:hover),
  .data-scroll th:has(.sort-control:focus-visible) {
    background: var(--surface-hover);
  }
  .data-scroll th .sort-control:focus-visible {
    outline-offset: -3px;
  }
  .data-scroll tbody tr:nth-child(even) > td {
    background: color-mix(in srgb, var(--text-primary) 2%, var(--surface-panel));
  }
  .data-scroll tbody tr:has(input:checked) > td {
    background: var(--surface-selected);
  }
  /* Hover surface (the highlight option): row by default, one cell, or none. The copy control reveals from its value, not the surface. */
  .data-region[data-highlight='row']
    .data-scroll
    tbody
    tr:has(> td[data-cell]):is(:hover, :has(td[data-cell]:focus-visible, .cell-copy:focus-visible))
    > td {
    --table-pinned-fade: var(--surface-hover);
    background: var(--surface-hover);
  }
  .data-region[data-highlight='row']
    .data-scroll
    tbody
    tr:has(input:checked):is(:hover, :has(td[data-cell]:focus-visible, .cell-copy:focus-visible))
    > td {
    --table-pinned-fade: var(--table-selected-hover);
    background: var(--table-selected-hover);
  }
  .data-region[data-highlight='cell']
    .data-scroll
    tbody
    td[data-cell]:is(:hover, :focus-visible, :has(.cell-copy:focus-visible)) {
    background: var(--surface-hover);
  }
  .data-scroll {
    --table-selected-hover: color-mix(in srgb, var(--text-primary) 4%, var(--surface-selected));
  }
  @media (prefers-reduced-motion: reduce) {
    .data-scroll th:has(.sort-control),
    .data-scroll .cell-copy.btn.icon {
      transition: none;
    }
  }

  @media (pointer: coarse) {
    .data-region[data-density='compact'] .data-scroll td {
      height: 44px;
      padding-block: 10px;
    }
    .data-region[data-density='compact'] .data-scroll .cell-copy.btn.icon {
      --height: 44px;
    }
  }

  .table-context {
    gap: var(--space-3);
  }
  .reference-table .table-actions {
    margin-inline-start: auto;
  }

  .table-overflow-controls {
    gap: var(--space-1);
  }
  .table-actions > .btn,
  .table-overflow-controls > .btn {
    border: 1px solid var(--border-default);
    background: var(--surface-panel);
  }
  .table-actions > .btn:hover:not(:disabled):not([aria-disabled='true']),
  .table-overflow-controls > .btn:hover:not(:disabled):not([aria-disabled='true']) {
    background: var(--surface-hover);
    border-color: var(--border-strong);
  }

  .sort-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: opacity var(--motion-feedback) var(--motion-easing);
    color: var(--text-muted);
  }
  .sort-control[data-sort-active='true'] .sort-indicator,
  .sort-control:hover .sort-indicator,
  .sort-control:focus-visible .sort-indicator {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .sort-indicator {
      transition: none;
    }
  }
  [data-reduced-motion='true'] .sort-indicator {
    transition: none;
  }

  .sort-control[data-sort-active='true'] .sort-indicator {
    color: var(--selection-text);
  }
  .sort-control[data-sort-active='true'] .sort-indicator svg {
    stroke-width: 2.6;
  }
  .reference-table-host {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .data-scroll td[data-column-kind='action'] {
    padding-right: var(--space-4);
  }
  .data-scroll td[data-copy-disabled='true'] {
    padding-right: var(--space-4);
  }
  @container (min-width:720px) {
    .data-scroll th[data-column-kind='action']:last-child {
      position: sticky;
      right: 0;
      z-index: 3;
      background: var(--surface-panel);
    }
    .data-scroll td[data-column-kind='action']:last-child {
      position: sticky;
      right: 0;
      z-index: 2;
      background: var(--surface-panel);
    }
    .data-scroll tr:has(input:checked) td[data-column-kind='action']:last-child {
      background: var(--surface-selected);
    }
  }
  /* Row density owns cell actions as well as text; taller actions never top-align copy. */
  .data-region:not(.reference-table) .data-scroll :is(th, td) {
    vertical-align: middle;
  }
  .data-region[data-density='compact'] {
    --table-action-height: 24px;
    --table-action-padding: 1px 8px;
    --table-action-cell-padding: 2px;
  }
  .data-region[data-density='standard'] {
    --table-action-height: 32px;
    --table-action-padding: 5px 12px;
    --table-action-cell-padding: 6px;
  }
  .data-region[data-density='comfortable'] {
    --table-action-height: 40px;
    --table-action-padding: 9px 16px;
    --table-action-cell-padding: 8px;
  }
  .data-region .data-scroll td[data-column-kind='action'] {
    padding-block: var(--table-action-cell-padding);
  }
  .data-region .data-scroll td[data-column-kind='action'] .btn {
    --height: var(--table-action-height);
    min-height: var(--table-action-height);
    height: auto;
    padding: var(--table-action-padding);
    line-height: 20px;
  }
  .data-region .data-scroll td[data-column-kind='action'] .btn.icon {
    width: var(--table-action-height);
    height: var(--table-action-height);
    padding: 0;
  }
  .data-region .data-scroll td[data-column-kind='action'] .btn svg {
    width: 16px;
    height: 16px;
  }
  @media (pointer: coarse) {
    .data-region[data-density] {
      --table-action-height: 44px;
      --table-action-padding: 11px 12px;
      --table-action-cell-padding: 2px;
    }
  }

  /* Density scales inline padding only, for column-edge alignment with body cells; the header
   stays one compact, bold row height regardless of row density. Restoring the .data-scroll th
   base rule's own height/weight/color (declared near the top of this file) after they were
   silently overridden here by a higher-specificity rule using the `font` shorthand (which
   resets font-weight even when only trying to set line-height) and a `--table-header-height`
   that tracked body row height per density (NW-521). */
  .data-region {
    --table-header-height: 44px;
    --table-header-padding: var(--space-3) var(--space-4);
  }
  /* Compact density: the header matches the compact rows; touch keeps its 44px target. */
  .data-region[data-density='compact'] {
    --table-header-height: 36px;
    --table-header-padding: 6px var(--space-4);
  }
  @media (pointer: coarse) {
    .data-region[data-density='compact'] {
      --table-header-height: 44px;
      --table-header-padding: var(--space-3) var(--space-4);
    }
  }
  .data-region[data-density='compact'] {
    --table-inline-padding: 12px;
  }
  .data-region[data-density='standard'] {
    --table-inline-padding: 16px;
  }
  .data-region[data-density='comfortable'] {
    --table-inline-padding: 16px;
  }
  .data-region .data-scroll thead th:not(.selection-column) {
    height: var(--table-header-height);
    padding: var(--table-header-padding);
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
  }
  .data-region .data-scroll thead th:has(.sort-control) {
    padding: 0;
  }
  .data-region .data-scroll thead th .sort-control {
    min-height: var(--table-header-height);
    padding: var(--table-header-padding);
    font: inherit;
    line-height: 24px;
  }

  /* Keep column labels and body values on the same density-specific start edge. */
  .data-region .data-scroll :is(thead th, tbody td):not(.selection-column):not(:has(.sort-control)) {
    padding-inline-start: var(--table-inline-padding);
  }
  .data-region .data-scroll thead th:has(.sort-control) .sort-control {
    padding-inline-start: var(--table-inline-padding);
  }

  /* Compact density tightens the action bar; comfortable keeps standard actions. */
  .data-region[data-density='compact'] .data-tools {
    padding-block: var(--space-1);
  }
  .data-region[data-density='compact']
    .table-actions
    > :is(.table-copy-actions, .table-overflow-controls)
    > .btn[data-size='compact'],
  .data-region[data-density='compact'] .table-actions > .btn[data-size='compact'] {
    --height: 28px;
    min-width: 28px;
    min-height: 28px;
    padding-block: var(--space-1);
  }
  .data-footer:has([data-export-error]:not([hidden])) {
    height: auto;
    min-height: 0;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--border-default);
  }

  @media (pointer: coarse) {
    .data-region[data-density='compact']
      .table-actions
      > :is(.table-copy-actions, .table-overflow-controls)
      > .btn[data-size='compact'],
    .data-region[data-density='compact'] .table-actions > .btn[data-size='compact'] {
      --height: 44px;
      min-width: 44px;
      min-height: 44px;
      padding-block: var(--space-2);
    }
  }

  /* Keep the search action in the visible toolbar at narrow article widths. */
  .collection-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    max-width: 560px;
    min-width: 0;
  }
  .collection-search label {
    min-width: 0;
  }
  .collection-search input {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  .collection-search > [data-action='clear'] {
    flex: none;
    min-width: var(--control-sm);
    white-space: nowrap;
  }
  @media (pointer: coarse) {
    .collection-search > [data-action='clear'] {
      min-width: var(--control-md);
    }
  }
  .data-scroll :is(th, td).selection-column {
    box-sizing: border-box;
    width: 52px;
    min-width: 52px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
  }
  .data-scroll .selection-control {
    margin-inline: auto;
  }

  /* Authored reference widths allocate room to actual content, while narrow views scroll. */
  .reference-table .data-scroll table:has(col[style*='width']) {
    table-layout: fixed;
    min-width: 640px;
  }

  /* Actions retain their trailing anchor even when a caption is intentionally hidden. */
  .data-tools > .table-actions {
    margin-inline-start: auto;
  }

  /* Selection actions travel with their table, including into the expanded view. */
  .table-selection-actions {
    display: flex;
    align-items: center;
    min-width: 0;
  }
  .table-selection-actions[hidden] {
    display: none;
  }
  .table-selection-actions > .bulk-action-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: 0;
    background: transparent;
  }
  .table-selection-actions > .bulk-action-bar[hidden] {
    display: none;
  }
  .table-selection-actions .bulk-action-bar > .row {
    gap: var(--space-1);
    flex-wrap: nowrap;
  }

  /* Actions keep one DOM order at every width: scroll, selection, copy, filter, expand, settings. */
  @container (max-width:900px) {
    .table-actions {
      flex-wrap: wrap;
      justify-content: flex-end;
    }
  }
  @container (max-width:640px) {
    .table-actions {
      align-items: center;
    }
    .table-selection-actions {
      max-width: 100%;
    }
    .table-selection-actions > .bulk-action-bar {
      max-width: 100%;
      flex-wrap: wrap;
    }
    .table-selection-actions .bulk-action-bar > .row {
      flex-wrap: wrap;
    }
    .table-selection-actions .bulk-action-bar [data-pending] {
      max-width: 100%;
      overflow-wrap: anywhere;
    }
  }

  /* Symmetric insets when nothing overflows; a scrollbar lane is reserved only once data-table.js's
   overflow() has measured real overflow and set data-overflow-x/-y, so classic scrollbars never
   cover the last-column action and never shift layout, but no lane sits empty on a table that
   never scrolls. */
  .data-scroll {
    scrollbar-gutter: auto;
    scroll-padding-block: var(--space-3);
  }
  .data-scroll[data-overflow-y='true'] {
    scrollbar-gutter: stable;
  }
  /* Prepared reference tables cannot know viewport overflow at build time. Keep their
     bottom inset identical before and after hydration. */
  .reference-table-host .data-scroll,
  .data-scroll[data-overflow-x='true'] {
    padding-block-end: var(--space-2);
  }
  .data-scroll tbody td:last-child:not([data-column-kind='action']):not([data-copy-disabled='true']) {
    padding-inline-end: calc(36px + var(--space-3));
  }
  .data-scroll tbody td:last-child .cell-copy {
    inset-inline-end: var(--space-3);
  }
  @media (pointer: coarse) {
    .data-scroll tbody td:last-child:not([data-column-kind='action']):not([data-copy-disabled='true']) {
      padding-inline-end: calc(44px + var(--space-3));
    }
  }

  /* Column resizing (after prosemirror-tables): the pointer is matched to a column's trailing border by geometry, so no layer can block it.
   The table marks the hovered edge; the guide line and the keyboard separators (one Tab stop) sit in a layer over the scroll area. */
  .data-scroll {
    position: relative;
  }
  /* While an edge is hovered the whole column line shows the resize cursor, over any child; during a drag it holds everywhere. */
  .data-scroll table[data-resize-hover],
  .data-scroll table[data-resize-hover] *,
  .data-region[data-resizing='true'],
  .data-region[data-resizing='true'] * {
    cursor: col-resize;
  }
  :root[data-column-resizing='true'],
  :root[data-column-resizing='true'] * {
    cursor: col-resize;
  }
  .data-region[data-resizing='true'] {
    user-select: none;
  }
  .data-region {
    position: relative;
  }
  .column-resize-layer {
    position: absolute;
    z-index: 5;
    overflow: clip;
    pointer-events: none;
  }
  /* The guide line appears after a resting pointer (HOVER_INTENT; at once for keyboard focus and a drag) and fades in and out;
   only opacity and colour change, never layout. Reduced motion keeps the delays and drops the fade. */
  .column-resize-indicator {
    position: absolute;
    z-index: 4;
    width: 2px;
    margin-inline-start: -1px;
    border-radius: 1px;
    background: var(--border-strong);
    opacity: 0;
    transition:
      opacity var(--motion-feedback) var(--motion-easing),
      background-color var(--motion-feedback) var(--motion-easing);
    pointer-events: none;
  }
  .column-resize-indicator[data-shown='true'] {
    opacity: 1;
  }
  .data-region[data-resizing='true'] .column-resize-indicator,
  .data-region:has(.column-resize:focus-visible) .column-resize-indicator {
    background: var(--focus-ring);
  }
  @media (prefers-reduced-motion: reduce) {
    .column-resize-indicator {
      transition: none;
    }
  }
  [data-reduced-motion='true'] .column-resize-indicator {
    transition: none;
  }
  .column-resize {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    outline: none;
  }
  /* Default layout: declared widths are minimums (auto layout, full width), so nothing clips while there is room.
   Once a column is resized, widths are exact and the table is their sum; values wrap in their chosen columns without hiding data. */
  .data-scroll table[data-column-widths='custom'] {
    table-layout: fixed;
    min-width: 0;
  }
  .data-scroll table:not([data-column-widths='custom']) {
    width: 100%;
  }
  /* Fill columns (width:'fill') are the table's flexible text: they take the spare width, keep a readable minimum,
   wrap to their full height without a line limit. Other columns size to content. */
  .data-scroll td[data-column-fill] {
    white-space: normal;
  }
  .data-scroll td[data-column-fill] > span:first-child {
    display: block;
    min-width: var(--table-fill-min, 24ch);
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  /* Cell pills remain fully readable, including after column resizing. */
  .data-scroll td .metadata-pill {
    max-width: 100%;
    vertical-align: middle;
  }
  .data-scroll table[data-column-widths='custom'] td:not(.selection-column) {
    overflow: visible;
  }
  .data-scroll table[data-column-widths='custom'] td:not(.selection-column) > span:first-child {
    display: block;
    min-width: 0;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .column-measure {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    white-space: nowrap;
    width: max-content;
    pointer-events: none;
  }

  /* Summary metrics paired with a table sit between its title row and the table, above a divider. */
  .table-summary {
    padding: var(--space-3) var(--space-3) var(--space-4);
    padding-inline-start: var(--table-inline-padding, var(--space-3));
    border-bottom: 1px solid var(--border-default);
  }
  /* Hidden slots take no space, in every mode (component display rules must not beat [hidden]). */
  .data-region
    :is(.table-context, .table-overflow-controls, .table-selection-actions, .data-count, [data-export-error])[hidden] {
    display: none;
  }

  /* Pinned columns: content scrolling beneath fades into them (24px, surface-coloured) only while more of it is hidden there.
   data-hidden-left/right are physical, so RTL needs no mirror; a start-pinned cell ([data-pinned=start]) takes the matching fade. */
  .data-scroll :is(th, td)[data-column-kind='action']:last-child::before,
  .data-scroll :is(th, td)[data-pinned='start']::after {
    position: absolute;
    inset-block: 0;
    width: 24px;
    content: '';
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-feedback) var(--motion-easing);
  }
  .data-scroll :is(th, td)[data-column-kind='action']:last-child::before {
    right: 100%;
    background: linear-gradient(to left, var(--table-pinned-fade, var(--surface-panel)), transparent);
  }
  .data-scroll :is(th, td)[data-pinned='start']::after {
    left: 100%;
    background: linear-gradient(to right, var(--table-pinned-fade, var(--surface-panel)), transparent);
  }
  .data-scroll tr:has(input:checked) > td {
    --table-pinned-fade: var(--surface-selected);
  }
  @container (min-width:720px) {
    .data-scroll[data-hidden-right='true'] :is(th, td)[data-column-kind='action']:last-child::before {
      opacity: 1;
    }
  }
  .data-scroll[data-hidden-left='true'] :is(th, td)[data-pinned='start']::after {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .data-scroll :is(th, td)[data-column-kind='action']:last-child::before,
    .data-scroll :is(th, td)[data-pinned='start']::after {
      transition: none;
    }
  }

  /* One end edge per column: a header and its cells share the inline end reserve (--cell-end). Body cells keep the copy
   button there; a right-aligned header puts its sort arrow there, so its label ends exactly where its values end. */
  .data-region .data-scroll :is(thead th, tbody td):not(.selection-column) {
    --cell-end: 36px;
  }
  .data-region
    .data-scroll
    :is(thead th, tbody td):last-child:not(
      [data-column-kind='action'],
      [data-copy-disabled='true'],
      .selection-column
    ) {
    --cell-end: calc(36px + var(--space-3));
  }
  .data-region .data-scroll :is(thead th, tbody td):is([data-column-kind='action'], [data-copy-disabled='true']) {
    --cell-end: var(--space-4);
  }
  @media (pointer: coarse) {
    .data-region .data-scroll :is(thead th, tbody td):not(.selection-column) {
      --cell-end: 52px;
    }
    .data-region
      .data-scroll
      :is(thead th, tbody td):last-child:not(
        [data-column-kind='action'],
        [data-copy-disabled='true'],
        .selection-column
      ) {
      --cell-end: calc(44px + var(--space-3));
    }
    .data-region .data-scroll :is(thead th, tbody td):is([data-column-kind='action'], [data-copy-disabled='true']) {
      --cell-end: var(--space-4);
    }
  }
  .data-region .data-scroll tbody td:not(.selection-column),
  .data-region .data-scroll thead th:not(.selection-column):not(:has(.sort-control)),
  .data-region .data-scroll thead th .sort-control {
    padding-inline-end: var(--cell-end);
  }
  .data-region .data-scroll thead th:has(.sort-control) {
    padding-inline-end: 0;
  }
  .data-region .data-scroll thead th.numeric .sort-control {
    position: relative;
    flex-direction: row;
    justify-content: flex-end;
  }
  .data-region .data-scroll thead th.numeric .sort-indicator {
    position: absolute;
    inset-inline-end: calc((var(--cell-end) - 16px) / 2);
    top: 50%;
    translate: 0 -50%;
  }

  /* Action column: controls line up on the cell's start edge, the same inset as other values; the header label is for screen readers only. */
  .data-region .data-scroll td[data-column-kind='action'] {
    text-align: start;
  }
  .data-region .data-scroll td[data-column-kind='action'] > * {
    justify-content: flex-start;
  }

  /* A pinned action cell takes its row's surface: stripe and selection (rows have no hover surface), and its fade follows. */
  .data-scroll {
    --table-stripe: color-mix(in srgb, var(--text-primary) 2%, var(--surface-panel));
  }
  @container (min-width:720px) {
    .data-scroll tbody tr:nth-child(even) > td[data-column-kind='action']:last-child {
      background: var(--table-stripe);
    }
    .data-scroll tbody tr:has(input:checked) > td[data-column-kind='action']:last-child {
      background: var(--surface-selected);
    }
  }
  .data-scroll tbody tr:nth-child(even) > td {
    --table-pinned-fade: var(--table-stripe);
  }
  .data-scroll tbody tr:has(input:checked) > td {
    --table-pinned-fade: var(--surface-selected);
  }

  /* Secondary details are data too: let every line remain visible. */
  .data-scroll td .cell-detail {
    display: block;
    min-width: 0;
    max-height: none;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font: var(--text-dense);
  }

  /* Sticky header: an opaque surface whose divider is an inset shadow (a collapsed border stays behind when the header
   sticks); once the rows scroll under it, a calm raised shadow separates them. */
  .data-region .data-scroll thead th {
    background: var(--surface-panel);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--border-strong);
  }
  .data-region .data-scroll[data-scrolled-y='true'] thead th {
    box-shadow:
      inset 0 -1px 0 var(--border-strong),
      var(--shadow-raised);
  }

  /* Auto layout: the fill column (or, without one, the widest text column) takes the spare width; every other column keeps its content width. */
  .data-scroll table:not([data-column-widths='custom']) :is(th[data-column-fill], th[data-column-spare]) {
    width: 100%;
  }

  /* The pinned column's fade only shows while content is scrolled beneath it, uses the row's own surface, and never covers
   the header divider: in the header it stops above the divider, and the pinned header draws the same inset divider. */
  .data-region .data-scroll thead th[data-column-kind='action']:last-child {
    box-shadow: inset 0 -1px 0 var(--border-strong);
  }
  .data-region .data-scroll[data-scrolled-y='true'] thead th[data-column-kind='action']:last-child {
    box-shadow:
      inset 0 -1px 0 var(--border-strong),
      var(--shadow-raised);
  }
  .data-scroll thead th[data-column-kind='action']:last-child::before,
  .data-scroll thead th[data-pinned='start']::after {
    inset-block: 0 1px;
  }
  .data-scroll thead th {
    --table-pinned-fade: var(--surface-panel);
  }

  /* File names in cells: the glyph slot is one fixed square per density, so a thumbnail or an icon never changes the row;
   the name centres with it, and compact rows drop the detail line (the name's tooltip carries it). */
  .data-region {
    --table-glyph-size: 32px;
  }
  .data-region[data-density='compact'] {
    --table-glyph-size: 24px;
  }
  .data-region[data-density='comfortable'] {
    --table-glyph-size: 40px;
  }
  .data-scroll td .file-name {
    align-items: center;
    vertical-align: middle;
  }
  .data-scroll td .file-name-glyph {
    width: var(--table-glyph-size);
    height: var(--table-glyph-size);
    overflow: hidden;
    border-radius: var(--radius-xs);
  }
  .data-scroll td .file-name-glyph > :is(img, video) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .data-scroll td .file-name-glyph > :not(img, video) {
    max-width: 100%;
    max-height: 100%;
  }
  .data-region[data-density='compact'] .data-scroll td .file-name-detail {
    display: none;
  }

  /* Default layout: the fill column takes the spare width, which makes the browser shrink every other column to its
   min-content. Their content never shrinks below its natural width, so labels like "Needs attention" stay whole. */
  .data-scroll table:not([data-column-widths='custom']) td:not([data-column-fill], .selection-column) > :first-child {
    min-width: max-content;
  }

  /* Content width (width:'content'): the table sizes to its columns at the inline start and nothing takes spare width; the
   toolbar, summary and footer still span the region. A fill column keeps its minimum width. A text column without a declared
   width is capped at --table-content-max and wraps to its full height. A resize makes
   widths exact, as in full width; reset returns here. A pinned action column sits at the table's end. */
  .data-region[data-table-width='content'] .data-scroll table:not([data-column-widths='custom']) {
    width: auto;
  }
  .data-region[data-table-width='content'] .data-scroll table:not([data-column-widths='custom']) th[data-column-fill] {
    width: auto;
  }
  .data-region[data-table-width='content']
    .data-scroll
    table:not([data-column-widths='custom'])
    td[data-column-fill]
    > span:first-child {
    width: var(--table-fill-min, 24ch);
  }
  .data-region[data-table-width='content']
    .data-scroll
    table:not([data-column-widths='custom'])
    td[data-column-capped] {
    white-space: normal;
  }
  .data-region[data-table-width='content']
    .data-scroll
    table:not([data-column-widths='custom'])
    td[data-column-capped]
    > span:first-child {
    display: block;
    width: max-content;
    min-width: 0;
    max-width: var(--table-content-max, 40ch);
    max-height: none;
    overflow: visible;
    overflow-wrap: anywhere;
  }
  /* Shared overflow labels may be composed inside a cell. Table data takes precedence over
     their compact-label treatment, regardless of RTL, mobile width or stylesheet load order. */
  .data-region .data-scroll tbody td [data-overflow-mode],
  .data-region .data-scroll tbody td .metadata-pill-text {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    max-height: none;
    -webkit-line-clamp: unset;
    -webkit-mask: none;
    mask: none;
    text-overflow: clip;
  }
  /* In automatic layout, compact labels contribute their complete intrinsic width.
     An explicit resize may wrap them, but must never mask their data. */
  .data-region .data-scroll table:not([data-column-widths='custom']) td .metadata-pill {
    width: max-content;
    max-width: none;
  }
  .data-region .data-scroll table:not([data-column-widths='custom']) td .metadata-pill-text {
    white-space: nowrap;
    overflow-wrap: normal;
  }
}

/* styles/table-filters.css */
@layer design {
  .table-filter-content {
    display: grid;
    gap: var(--space-3);
    min-width: 0;
  }
  .table-filter-text .field {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    color: var(--text-secondary);
    font: var(--text-dense);
  }
  .table-filter-text input {
    width: 100%;
    min-width: 0;
    min-height: var(--control-sm);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-primary);
    font: var(--text-body);
  }
}

/* styles/badge.css */
@layer design {
  .badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 20px;
    height: 20px;
    padding-inline: 6px;
    border-radius: 999px;
    background: var(--surface-selected);
    color: var(--text-primary);
    font: var(--text-dense);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .badge[data-emphasis='loud'] {
    background: var(--accent);
    color: var(--text-on-accent);
  }
  .badge[data-dot='true'] {
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
    background: var(--text-primary);
  }
  .badge[data-dot='true'][data-emphasis='loud'] {
    background: var(--accent);
    box-shadow: none;
  }
  .badge-anchor {
    position: relative;
    display: inline-flex;
    flex: none;
  }
  .badge-anchor:has(> .btn.icon),
  .btn.icon.badge-anchor {
    overflow: visible;
  }
  .badge-anchor:has(> .btn.icon) > .badge:not([data-emphasis='loud']),
  .btn.icon.badge-anchor > .badge:not([data-emphasis='loud']) {
    background: var(--surface-ink);
    color: var(--text-inverse);
    box-shadow: 0 0 0 1px var(--text-primary);
  }
  .badge-anchor:has(> .btn.icon) > .badge,
  .btn.icon.badge-anchor > .badge {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -5px;
    min-width: 20px;
    height: 20px;
    padding-inline: 5px;
    font-size: 12px;
    pointer-events: none;
  }
  .badge-examples {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  .badge-anchor:has(> .btn.icon) > .badge[data-dot='true'],
  .btn.icon.badge-anchor > .badge[data-dot='true'] {
    width: 8px;
    min-width: 8px;
    height: 8px;
    padding: 0;
  }
  .badge-demo [data-notifications] {
    margin: 5px;
  }
  .badge-demo .content-tabs [role='tab'] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .badge-demo-list {
    min-height: 228px;
    margin-top: 16px;
  }
  .badge-demo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 16px;
    border-bottom: 1px solid var(--border-default);
  }
  .badge-demo-item > div {
    min-width: 0;
  }
  .badge-demo-item strong {
    font: var(--text-body);
    font-weight: 600;
    overflow-wrap: anywhere;
  }
  .badge-demo-item p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font: var(--text-dense);
  }
  .badge-demo-item > .btn {
    flex: none;
  }
  @container (max-width:420px) {
    .badge-demo-item {
      align-items: flex-start;
      flex-wrap: wrap;
    }
  }

  /* A dot anchored on a control is cut out of it with the surface colour, never outlined. */
  .btn.icon.badge-anchor > .badge[data-dot='true'] {
    box-shadow: 0 0 0 2px var(--surface-panel);
  }
}

/* styles/filter-popover.css */
@layer design {
  .filter-popover {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-overlay);
    color: var(--text-primary);
    box-shadow: var(--shadow-overlay);
    z-index: var(--layer-popover);
    overflow: auto;
    overscroll-behavior: contain;
    animation: surface-enter var(--motion-transition) var(--motion-easing);
  }
  .filter-popover > header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-xs);
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
  }
  .filter-popover > header strong {
    font: var(--text-body);
    font-weight: 600;
  }
  .filter-active-count {
    margin-inline-start: auto;
    color: var(--text-muted);
    font: var(--text-dense);
  }
  .filter-popover > header .btn {
    height: auto;
    min-height: var(--control-xs);
  }
  .filter-popover > header .btn[hidden] {
    display: none;
  }
  .filter-trigger-count {
    pointer-events: none;
  }
  .btn.icon.badge-anchor {
    overflow: visible;
  }
  .search-field > [data-search-filters].badge-anchor {
    overflow: visible;
    margin-inline-end: 5px;
  }
  .filter-popover-body {
    display: grid;
    gap: var(--space-3);
  }
  .filter-section {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
  }
  .filter-section + .filter-section {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
  }
  .filter-section h3 {
    margin: 0;
    color: var(--text-secondary);
    font: var(--text-dense);
    font-weight: 600;
  }
  .filter-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    min-width: 0;
  }
  .filter-group {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .filter-group legend,
  .filter-date-range legend {
    margin-bottom: var(--space-1);
    color: var(--text-secondary);
    font: var(--text-dense);
    font-weight: 500;
  }
  .filter-segment {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }
  .filter-popover .filter-item-state > .btn {
    --height: var(--control-xs);
    height: var(--control-xs);
    min-height: var(--control-xs);
    padding: 3px 8px;
    font: var(--text-dense);
    line-height: 24px;
  }
  .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-xs);
    text-align: start;
    font: var(--text-body);
    cursor: pointer;
  }
  .filter-toggle input[role='switch'] {
    flex: none;
    margin: 0;
  }
  .filter-state-label {
    color: var(--text-muted);
    font: var(--text-dense);
  }
  .filter-item-list {
    display: grid;
    gap: var(--space-2);
  }
  .filter-item {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .filter-item > legend {
    padding: 0;
    color: var(--text-primary);
    font: var(--text-dense);
    font-weight: 500;
  }
  .filter-item-state {
    display: grid;
    gap: 2px;
    min-width: 0;
  }
  .filter-state-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--control-xs);
    padding-inline: var(--space-1);
    color: var(--text-secondary);
    font: var(--text-dense);
    cursor: pointer;
  }
  .filter-state-option input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--selection-text);
  }
  .filter-state-option input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .filter-choice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    font: var(--text-body);
  }
  .filter-choice .select-control {
    width: 100%;
    min-width: 0;
  }
  .filter-date-range input {
    min-height: var(--control-xs);
    padding: 4px 8px;
    font: var(--text-dense);
  }
  .filter-number-range input {
    min-height: var(--control-sm);
    padding: var(--space-2);
    font: var(--text-dense);
  }
  .filter-check-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-1);
  }
  .filter-check-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-width: 0;
    min-height: var(--control-xs);
    padding: 3px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    color: var(--text-primary);
    font: var(--text-dense);
    cursor: pointer;
  }
  .filter-check-option input {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--text-primary);
  }
  .filter-popover .filter-group legend.sr-only {
    margin: 0;
    padding: 0;
  }
  .filter-range-error {
    margin: 0;
    color: var(--danger-text);
    font: var(--text-dense);
  }
  .filter-range-error[hidden] {
    display: none;
  }
  .filter-number-range input[aria-invalid='true'] {
    border-color: var(--danger-text);
  }
  .filter-utility-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
  }
  .filter-utility-actions > .btn {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: var(--control-xs);
    justify-content: center;
    padding-inline: var(--space-3);
    font: var(--text-dense);
  }

  @media (max-width: 420px) {
    .filter-popover {
      padding: var(--space-3);
    }
    .filter-pair {
      grid-template-columns: minmax(0, 1fr);
    }
    .filter-item-state {
      padding-inline-start: var(--space-1);
    }
    .filter-check-options {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (pointer: coarse) {
    .filter-popover > header .btn,
    .filter-toggle,
    .filter-date-range input,
    .filter-number-range input {
      min-height: var(--control-md);
    }
    .filter-popover .filter-check-option,
    .filter-utility-actions > .btn {
      min-height: var(--control-md);
      height: auto;
    }
    .filter-state-option {
      min-height: var(--control-md);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .filter-popover {
      animation: none;
    }
  }
}

/* styles/accordion.css */
@layer design {
  .accordion {
    min-width: 0;
    border-block: 1px solid var(--border-default);
  }
  .accordion + .accordion {
    border-top: 0;
  }
  .accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 44px;
    padding: var(--space-3) var(--space-2);
    list-style: none;
    cursor: pointer;
    color: var(--text-primary);
    font: var(--text-dense);
    font-weight: 600;
    border-radius: 4px;
  }
  /* A question heading (headingLevel) reads as the summary's label: no heading margin or type of its own. */
  .accordion-heading {
    min-width: 0;
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
  }
  .accordion > summary::-webkit-details-marker {
    display: none;
  }
  .accordion > summary::marker {
    content: '';
  }
  .accordion > summary:hover {
    background: var(--surface-hover);
  }
  .accordion > summary:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
  .accordion-indicator {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
  }
  .accordion-indicator::before,
  .accordion-indicator::after {
    content: '';
    position: absolute;
    inset: 7px 2px auto;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }
  .accordion-indicator::after {
    transform: rotate(90deg);
  }
  .accordion[open] > summary .accordion-indicator::after {
    display: none;
  }
  .accordion-content {
    padding: var(--space-2) var(--space-2) var(--space-4);
    min-width: 0;
  }
  .accordion-content > :first-child {
    margin-top: 0;
  }
  .accordion-content > :last-child {
    margin-bottom: 0;
  }
}

/* styles/pill.css */
/* The subtle fill is a light tint of the text colour, so it stays visibly distinct on any surface (a11y.contrast).
   --pill-color is the owner-colour input, set inline by pill(text,{color}); unset, the [data-color] rules never apply. */
@layer design {
  .metadata-pill {
    --pill-color: initial;
    --pill-bg: color-mix(in srgb, var(--text-primary) 8%, transparent);
    --pill-fg: var(--text-secondary);
    --pill-border: transparent;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: min(100%, 44ch);
    min-height: 28px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--pill-border);
    border-radius: 999px;
    background: var(--pill-bg);
    color: var(--pill-fg);
    font: var(--text-dense);
  }
  .metadata-pill[data-tone='outline'] {
    --pill-bg: transparent;
    --pill-fg: var(--text-secondary);
    --pill-border: var(--border-default);
  }
  /* Strong inverts the text roles, so it stays the most emphatic neutral in both themes. */
  .metadata-pill[data-tone='strong'] {
    --pill-bg: var(--text-primary);
    --pill-fg: var(--surface-panel);
    --pill-border: var(--text-primary);
  }
  .metadata-pill[data-tone='attention'] {
    --pill-bg: var(--accent);
    --pill-fg: var(--text-on-accent);
    --pill-border: var(--accent);
  }
  /* One step below attention: an accent tint with accent text pulled toward the primary text colour (AA on the panel in both themes). */
  .metadata-pill[data-tone='attention-soft'] {
    --pill-bg: color-mix(in srgb, var(--accent) 14%, var(--surface-panel));
    --pill-fg: color-mix(in srgb, var(--accent) 60%, var(--text-primary));
    --pill-border: transparent;
  }
  /* Owner colour (pill color option): tinted by default, solid with tone attention. */
  .metadata-pill[data-color] {
    --pill-bg: color-mix(in srgb, var(--pill-color) 14%, var(--surface-panel));
    --pill-fg: color-mix(in srgb, var(--pill-color) 45%, var(--text-primary));
    --pill-border: color-mix(in srgb, var(--pill-color) 30%, var(--surface-panel));
  }
  .metadata-pill[data-color][data-tone='attention'] {
    --pill-bg: var(--pill-color);
    --pill-fg: var(--pill-on-color, var(--text-inverse));
    --pill-border: var(--pill-color);
  }
  /* Status is text, not a pill: done is muted with a check, waiting is muted, the rest inherit. */
  .metadata-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
  }
  .metadata-status:is([data-state='done'], [data-state='waiting']) {
    color: var(--text-muted);
  }
  .metadata-status > svg {
    flex: none;
    width: 14px;
    height: 14px;
  }
  .metadata-pill > svg {
    flex: none;
    width: 1em;
    height: 1em;
  }
  .metadata-pill-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }
  .metadata-pill[data-size='compact'] {
    min-height: 20px;
    padding: 0 var(--space-2);
    line-height: 18px;
  }
  .metadata-pill[data-size='compact'] > svg {
    width: 12px;
    height: 12px;
  }
}

/* styles/pagination.css */
@layer design {
  .pagination-host {
    container-type: inline-size;
    min-width: 0;
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-width: 0;
    margin-top: var(--space-4);
    color: var(--text-secondary);
    font: var(--text-dense);
  }
  .pagination[hidden] {
    display: none;
  }
  .pagination-results {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 14rem;
    min-width: 0;
  }
  .pagination-range {
    min-width: 0;
    font: var(--text-dense);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .pagination-size {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    color: var(--text-muted);
    font: var(--text-dense);
    white-space: nowrap;
  }
  .pagination-size .select-control {
    min-width: 76px;
  }
  .pagination-size select {
    width: 76px;
    min-height: 32px;
  }
  .pagination-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 0 0 auto;
  }
  @container (max-width:560px) {
    .pagination {
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .pagination-results {
      flex: 1 1 100%;
    }
    .pagination-size {
      margin-inline-start: auto;
    }
  }
  @media (pointer: coarse) {
    .pagination-actions > .btn {
      min-height: 44px;
    }
    .pagination-size select {
      min-height: 44px;
    }
  }
  /* URL mode: real links, centered, with the current page filled. */
  .pagination-links {
    justify-content: center;
    flex-wrap: wrap;
  }
  .pagination-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pagination-page,
  .pagination-gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding-inline: var(--space-2);
    border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
  }
  .pagination-page {
    color: var(--text-primary);
    text-decoration: none;
  }
  .pagination-page:hover {
    background: var(--surface-hover);
  }
  .pagination-page[aria-current='page'] {
    background: var(--text-primary);
    color: var(--text-inverse);
  }
  .pagination-gap {
    color: var(--text-muted);
  }
  @media (pointer: coarse) {
    .pagination-page,
    .pagination-gap {
      min-width: 44px;
      min-height: 44px;
    }
  }
  .pagination-example {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
  }
  /* Example owner: paged content sits in one framed surface (DataTable or SelectableList), the pager directly below. */
  .pagination-example-surface {
    display: grid;
    min-width: 0;
  }
  .pagination-example-surface[aria-busy='true'] {
    opacity: 0.6;
  }
  .pagination-example-list [data-list] {
    padding: var(--space-1);
  }
  .pagination-example-summary {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-panel);
    color: var(--text-secondary);
    font: var(--text-dense);
    text-align: center;
  }
}

/* styles/rich-text-content.css */
/* The one prose system. Its canonical class is .rich-text (Markdown, rich text fields, chat); .article-copy is its
   article flow scope (block margins and secondary body text instead of a grid gap), and .explorer-section-content and
   .message-body host the same rules. No other sheet restyles prose inside them.
   Prose rules reach authored prose only: classless lists, paragraphs and headings, stopping at [data-prose-boundary]
   and embedded components (ui-icon-browser). Component markup always carries classes, so it keeps its own styles. */
/* Inline code gets a chip only when it sits in running prose; component UI code keeps its own treatment. */
@layer design {
  /* Article flow: body text in block rhythm; every value is a shared token. */
  .article-copy {
    min-width: 0;
    color: var(--text-secondary);
    font: var(--text-body);
  }
  .article-copy > :where(p) {
    margin: 0;
    overflow-wrap: break-word;
  }
  .article-copy > * + * {
    margin-top: var(--space-6);
  }
  .article-copy > p + p {
    margin-top: var(--space-4);
  }
  /* Markdown fragment destinations clear the documentation bar without reaching embedded component headings. */
  .article-copy > :is(h2, h3, h4)[id] {
    scroll-margin-block-start: calc(var(--documentation-rail-top, var(--control-lg)) + var(--space-6));
  }
  .article-copy
    :is(p, li, dd, dt, td, th, blockquote):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > :is(strong, b) {
    font-weight: 600;
    color: var(--text-primary);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(p, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, summary):not([class]):not(
      :is([data-prose-boundary], ui-icon-browser) *
    )
    > code,
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > code,
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(p, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, summary):not([class]):not(
      :is([data-prose-boundary], ui-icon-browser) *
    )
    > :is(strong, em, b, i, mark)
    > code,
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > :is(strong, em, b, i, mark)
    > code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: calc(var(--radius) / 2);
    background: var(--code-inline-surface);
    color: var(--code-inline-text);
    overflow-wrap: anywhere;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) {
    padding-inline-start: 1.75em;
    margin-block: var(--space-3);
    list-style-position: outside;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li {
    padding-inline-start: 0.25em;
    overflow-wrap: anywhere;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    + li {
    margin-block-start: var(--space-2);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) {
    margin-block: var(--space-2);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > p:not([class]) {
    margin-block: var(--space-2);
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body) > ul {
    list-style-type: disc;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ul:not([class]) {
    list-style-type: circle;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ul:not([class]) {
    list-style-type: square;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body) > ol {
    list-style-type: decimal;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ol:not([class]) {
    list-style-type: lower-alpha;
  }
  :is(.rich-text, .article-copy, .explorer-section-content, .message-body)
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *)
    > li
    > ol:not([class]) {
    list-style-type: lower-roman;
  }
  .rich-text .task-list-item {
    list-style: none;
    position: relative;
  }
  .rich-text .task-list-item > input[type='checkbox'] {
    position: absolute;
    inset-inline-start: -1.5em;
    top: 0.3em;
    width: 1em;
    height: 1em;
    margin: 0;
    accent-color: var(--text-primary);
  }
  .rich-text > img,
  .rich-text p:not([class]) > img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }
  /* Editorial media from renderArticleBody({media}): fits the measure, keeps its ratio and never overflows. */
  :is(.rich-text, .article-copy) :is(img, video, audio, iframe):not([class]) {
    display: block;
    max-width: 100%;
  }
  :is(.rich-text, .article-copy) :is(img, video):not([class]) {
    height: auto;
    object-fit: contain;
  }
  :is(.rich-text, .article-copy) audio:not([class]) {
    width: 100%;
  }
  :is(.rich-text, .article-copy) iframe:not([class]) {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
  }
  :is(.rich-text, .article-copy) > figure {
    display: grid;
    gap: var(--space-2);
    margin: 0;
  }
  :is(.rich-text, .article-copy) > figure > figcaption:not([class]) {
    color: var(--text-secondary);
    font: var(--text-dense);
  }
  /* Fenced code becomes a code block; only a bare <pre> from raw HTML falls back to the same surface. */
  .rich-text > pre {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow: auto;
    max-width: 100%;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--code-surface);
    color: var(--code-text);
    font-size: 14px;
    line-height: 22px;
  }
  .rich-text > blockquote {
    margin-inline: 0;
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--border-strong);
  }
  /* Pull quote: a blockquote marked data-variant="pull" (renderArticleBody keeps that one attribute) sits apart from the
     text on a raised surface in the pull-quote role. It stays classless, so the prose rules for its strong and code
     still apply; the padding tightens with the viewport so a 320px screen keeps most of its width for the quote. */
  :is(.rich-text, .article-copy) > blockquote[data-variant='pull'] {
    margin-inline: 0;
    padding: clamp(var(--space-4), 4vw, var(--space-8));
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    background: var(--surface-raised);
    box-shadow: var(--shadow-raised);
    color: var(--text-primary);
    font: var(--text-pull-quote);
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  .rich-text-math-display {
    display: block;
    overflow-y: hidden;
    padding-block: 0.25em;
    position: relative;
    max-inline-size: 100%;
    overflow-x: auto;
  }
  .rich-text-table-scroll {
    max-width: 100%;
    overflow: auto;
    min-width: 0;
  }
  .rich-text-table-scroll table {
    width: 100%;
    border-collapse: collapse;
    font: inherit;
    text-align: start;
  }
  .rich-text-table-scroll :is(th, td) {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-default);
    text-align: start;
    vertical-align: top;
  }
  .rich-text-table-scroll th {
    font-weight: 600;
  }
  .rich-text-table-scroll [align='right'] {
    text-align: right;
  }
  .rich-text-table-scroll [align='center'] {
    text-align: center;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > :is(h1, h2, h3, h4, h5, h6) {
    color: var(--text-primary);
    overflow-wrap: anywhere;
    margin-block: var(--space-6) var(--space-3);
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h1 {
    font: var(--text-page);
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h2 {
    font: var(--text-title);
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h3 {
    font: var(--text-lede);
    font-weight: 600;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h4 {
    font: var(--text-body);
    font-weight: 600;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > :is(h5, h6) {
    font: var(--text-dense);
    font-weight: 600;
  }
  :is(.rich-text, .article-copy, .explorer-section-content) > h6 {
    color: var(--text-secondary);
  }
  :is(.rich-text, .article-copy) > :first-child {
    margin-block-start: 0;
  }
  .rich-text > :last-child {
    margin-block-end: 0;
  }
  .rich-text
    :is(blockquote:not([class]), :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) > li)
    > blockquote {
    padding-inline-start: var(--space-4);
    border-inline-start: 3px solid var(--border-default);
    margin-inline: 0;
  }
  .rich-text details:not([class]) > summary {
    list-style: none;
  }
  .rich-text details:not([class]) > summary::-webkit-details-marker {
    display: none;
  }
  .rich-text details:not([class]) > summary::after {
    content: '+';
  }
  .rich-text details:not([class])[open] > summary::after {
    content: '−';
  }
  @container (max-width:480px) {
    .rich-text :is(ul, ol):not([class]):not(:is([data-prose-boundary], ui-icon-browser) *) {
      padding-inline-start: 1.4em;
    }
  }

  :is(.article-copy, .rich-text)[data-size='reading'] {
    max-inline-size: var(--measure);
    font: var(--text-reading);
  }
  :is(.article-copy, .rich-text)[data-size='reading'] > h2 {
    font: var(--text-reading-h2);
  }
  :is(.article-copy, .rich-text)[data-size='reading'] > h3 {
    font: var(--text-reading-h3);
  }
  :is(.article-copy, .rich-text)[data-size='reading'] > h4 {
    font: var(--text-reading-h4);
  }
}

/* styles/article-content.css */
/* Article bodies: the block rhythm, tables, inline examples, section directories and continuation links around
   authored prose, and the article contents and series navigation beside it. Prose itself (text, headings, lists,
   inline code, emphasis) is the shared prose system in rich-text-content.css, whose canonical class is .rich-text;
   .article-copy is its article flow scope, not a second system, so nothing here restyles prose. Rules are scoped to
   rendered article markup; page layout stays with its owner. Narrow treatments follow the article column, the
   `article` container, not the viewport: 660px and 712px are the column widths of a 700px and 760px published
   viewport, and an explorer in a narrow panel matches too. */
@layer design {
  .table-overflow {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    margin: var(--space-6) 0;
  }
  .article-copy > .table-overflow:first-child {
    margin-top: 0;
  }
  .article-copy > .table-overflow:last-child {
    margin-bottom: 0;
  }
  .article-copy > .table-overflow table {
    width: 100%;
    border-collapse: collapse;
    text-align: start;
    font: var(--text-body);
  }
  .article-copy > .table-overflow th {
    text-align: start;
    font: var(--text-dense);
    color: var(--text-secondary);
    font-weight: 500;
    padding: 0 var(--space-4) var(--space-3) 0;
    border-bottom: 1px solid var(--border-strong);
    vertical-align: top;
  }
  .article-copy > .table-overflow td {
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
    border-bottom: 1px solid var(--border-default);
    vertical-align: top;
    overflow-wrap: break-word;
  }
  .article-copy > .table-overflow th[scope='row'] {
    padding-block: var(--space-4);
    font: var(--text-dense);
    color: var(--text-primary);
    border-color: var(--border-default);
    font-weight: 500;
  }
  .article-copy > .table-overflow td:first-child {
    font-weight: 500;
    color: var(--text-primary);
  }
  .article-copy > .table-overflow td:last-child,
  .article-copy > .table-overflow th:last-child {
    padding-right: 0;
  }
  .article-copy > .table-overflow tr:last-child td,
  .article-copy > .table-overflow tr:last-child th[scope='row'] {
    border-bottom: 0;
  }
  .article-copy > .reference-table-host {
    margin-block: var(--space-6);
  }
  .article-copy > .reference-table-host:first-child {
    margin-top: 0;
  }
  .article-copy > .reference-table-host:last-child {
    margin-bottom: 0;
  }
  .article-inline-example {
    margin-block: var(--space-6);
  }
  .article-inline-example:last-child {
    margin-bottom: 0;
  }
  .article-embed {
    display: block;
    min-width: 0;
  }
  /* Example decisions, section directories and continuation links frame the article body. */
  .example-decisions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    padding: var(--space-4) 0 0;
    margin: 0;
    font: var(--text-dense);
  }
  .example-decisions > div {
    min-width: 0;
  }
  .example-decisions a {
    font-weight: 500;
    text-decoration: underline;
  }
  .example-decisions p {
    margin: var(--space-1) 0 0;
    color: var(--text-muted);
    overflow-wrap: break-word;
  }
  .next-reading {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--space-8);
    padding-top: var(--space-8);
  }
  .next-reading > h2 {
    font: var(--text-title);
  }
  .related-list {
    display: grid;
    gap: 0;
  }
  .related-list a {
    display: grid;
    grid-template-columns: minmax(120px, 0.65fr) minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-default);
    text-decoration: none;
  }
  .related-list strong {
    font: var(--text-dense);
    font-weight: 500;
  }
  .related-list span {
    font: var(--text-dense);
    color: var(--text-muted);
  }
  .related-list a:hover strong {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  /* Article contents: in-page links under a heading, the current section marked by mountAnchorSpy. On a coarse pointer
     each link keeps a 44px target; a fine pointer keeps the list compact. */
  .article-contents {
    min-width: 0;
  }
  .article-contents-title {
    font: var(--text-title);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
  }
  .article-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .article-contents a {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding-block: var(--space-1);
    font: var(--text-body);
    text-decoration: underline;
    overflow-wrap: anywhere;
  }
  .article-contents a[aria-current='location'] {
    color: var(--text-primary);
    font-weight: 600;
  }
  @media (pointer: coarse) {
    .article-contents a {
      min-height: 44px;
    }
  }
  /* Series navigation: Previous and Next side by side, each at least 16rem, so they stack in a narrow column. Next keeps
     the end of the row when it is alone. */
  .article-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    min-width: 0;
  }
  .article-pager-link {
    flex: 1 1 16rem;
    display: grid;
    gap: var(--space-1);
    align-content: start;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    text-decoration: none;
  }
  .article-pager-link[data-direction='next'] {
    margin-inline-start: auto;
    text-align: end;
  }
  .article-pager-direction {
    font: var(--text-dense);
    color: var(--text-secondary);
  }
  .article-pager-title {
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
  }
  .article-pager-link:hover {
    border-color: var(--border-strong);
  }
  .article-pager-link:hover .article-pager-title {
    color: var(--link-hover);
  }
  .section-directory {
    padding-block: var(--space-6);
  }
  .section-directory h2 {
    font: var(--text-title);
    margin: 0 0 var(--space-4);
  }
  .section-directory ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-6);
  }
  .section-directory li {
    min-width: 0;
    border-top: 1px solid var(--border-default);
  }
  .section-directory a {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    text-decoration: none;
    min-width: 0;
  }
  .section-directory strong {
    font: var(--text-body);
    font-weight: 600;
    color: var(--text-primary);
  }
  .section-directory span {
    font: var(--text-dense);
    color: var(--text-secondary);
    overflow-wrap: anywhere;
  }
  .section-directory a:hover strong,
  .section-directory a:focus-visible strong {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  @container article (max-width:712px) {
    .section-directory ul {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  @container article (max-width:660px) {
    .article-copy > .table-overflow table {
      min-width: 400px;
    }
    .next-reading {
      grid-template-columns: 1fr;
      gap: var(--space-4);
      padding-block: var(--space-6);
    }
    .example-decisions {
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }
    .related-list a {
      grid-template-columns: 1fr;
      gap: var(--space-1);
    }
  }

  /* Basic inline tables keep their native table structure but never inherit the wide-table minimum. */
  .article-copy > .table-overflow > table[data-table-mode='basic'] {
    min-width: 0;
    max-width: 100%;
  }
  .article-copy > .table-overflow > table[data-table-mode='basic'] :is(th, td) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  @container article (max-width:660px) {
    .article-copy > .table-overflow > table[data-table-mode='basic'] {
      width: 100%;
      min-width: 0;
      table-layout: fixed;
    }
    .article-copy > .table-overflow > table[data-table-mode='basic'] th[scope='row'] {
      width: 36%;
    }
  }
  /* A subsection heading owns the gap to the block it titles (tables, lists, examples), whatever that block's own rhythm. */
  .article-copy > :is(h3, h4, h5, h6) + :is(*, .table-overflow, .reference-table-host, .article-inline-example) {
    margin-top: 0;
  }

  .article-opening {
    display: grid;
    gap: 24px;
    margin-bottom: 32px;
  }
  .article-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .article-title-row h1 {
    margin: 0;
    font: var(--text-page);
    letter-spacing: -0.01em;
  }
  .article-opening .edit-action {
    flex-shrink: 0;
  }
  .article-intro {
    font: var(--text-lede);
    color: var(--text-secondary);
  }
  .article-intro p {
    margin: 0;
    overflow-wrap: break-word;
  }
  .article-intro p + p {
    margin-top: 16px;
  }
  .article-meta {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    flex-wrap: wrap;
    font: var(--text-dense);
    color: var(--text-muted);
  }
  .article-meta button {
    padding: 0;
    min-height: 24px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .article-meta a {
    color: inherit;
  }
  .article-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 32px 0;
    margin: 0;
    border-bottom: 1px solid var(--border-default);
    scroll-margin-top: 72px;
  }
  /* Section headings own their anchors; body subsection anchors belong to the shared prose system. */
  .article-section > h2[id],
  .article-section > .article-section-heading > h2[id] {
    scroll-margin-block-start: calc(var(--documentation-rail-top, var(--control-lg)) + var(--space-6));
  }
  .article-section > h2 {
    font: var(--text-title);
    letter-spacing: -0.01em;
    margin: 0;
    overflow-wrap: break-word;
  }
  @container article (max-width: 700px) {
    .article-title-row {
      align-items: flex-start;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
    .article-section {
      gap: var(--space-4);
      padding-block: calc(var(--space-6) + var(--space-1));
    }
  }
}

/* styles/changelog.css */
/* Changelog: one section per release; its All changes rows load into the shared DataTable when the accordion first opens. */
@layer design {
  .changelog {
    min-width: 0;
  }
  .changelog-release {
    padding-block: var(--space-6);
    border-top: 1px solid var(--border-default);
  }
  .changelog-release:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .changelog-release-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    margin-bottom: var(--space-4);
  }
  .changelog-release-heading h2 {
    margin: 0;
    font: var(--text-title);
  }
  .changelog-release-meta {
    flex-basis: 100%;
    margin: 0;
    font: var(--text-dense);
    color: var(--text-secondary);
  }
  .changelog-breaking li > p,
  .changelog-apps > p {
    margin: 0;
  }
  .changelog-apps,
  .changelog-pending {
    color: var(--text-secondary);
  }
  /* Holds the accordion summary's height until the script mounts it, so the page does not shift. */
  .changelog-changes {
    min-height: 46px;
    margin-top: var(--space-4);
  }
  /* The shared DataTable, loaded into the accordion on first open. */
  .changelog-table {
    min-width: 0;
  }
  .changelog-pagination {
    margin-top: var(--space-6);
  }
}