/* ==========================================================================
   Design Lab — _base.css
   STRUCTURE ONLY. Layout, sizing, spacing, overflow, position and the is-*
   state mechanics for every class in the §3.3 registry.

   Nothing in this file carries personality: no palette colours, no decorative
   borders, no shadows, no blur, no font families beyond the structural mono
   for code. Spacing and geometry come from --space-* / --radius-*, so density
   scaling flows through automatically. Style packs paint on top of this.

   Load order: _base.css, then the active pack.

   Z-index scale. Packs and scenes use these values and no others for
   overlays, so one overlay always stacks the same way over another:
     20  in-flow float (c-selection--float bar)
     40  dropdown menu (c-dropdown__menu)
     50  tooltip bubble (c-tooltip__bubble)
     60  drawer (c-drawer)
     70  modal (c-modal)
     80  toast (c-toast)
     90  command palette (c-command.is-open)
   The is-loading veil uses 2 and 3 inside its own element only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Shared mechanics
   -------------------------------------------------------------------------- */

[class^="c-"],
[class*=" c-"],
[class^="c-"] *,
[class*=" c-"] *,
[class^="s-"],
[class*=" s-"],
[class^="s-"] *,
[class*=" s-"] *,
[data-pack] {
  box-sizing: border-box;
}

/* The hidden attribute must beat any display we set below. */
[class^="c-"][hidden],
[class*=" c-"][hidden] {
  display: none !important;
}

/* Interactive elements inherit the surrounding type rather than the UA's. */
.c-btn,
.c-input,
.c-select,
.c-textarea,
.c-switch,
.c-tabs__tab,
.c-dropdown__trigger,
.c-dropdown__item,
.c-pagination__page,
.c-toast__close {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

/* Neutral focus ring. Packs replace this with their own treatment. */
.c-btn:focus-visible,
.c-input:focus-visible,
.c-select:focus-visible,
.c-textarea:focus-visible,
.c-checkbox__box:focus-visible,
.c-radio__dot:focus-visible,
.c-switch:focus-visible,
.c-tabs__tab:focus-visible,
.c-tabs__panel:focus-visible,
.c-code__body:focus-visible,
.c-chat__log:focus-visible,
.c-filter__panel:focus-visible,
.c-prompt__send:focus-visible,
.c-navbar__brand:focus-visible,
.c-navbar__link:focus-visible,
.c-sidebar__item:focus-visible,
.c-breadcrumb a:focus-visible,
.c-pagination__page:focus-visible,
.c-dropdown__trigger:focus-visible,
.c-dropdown__item:focus-visible,
.c-list__row:focus-visible,
.c-toast__close:focus-visible,
.c-tooltip:focus-visible,
.c-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- is-disabled ---------------------------------------------------------- */
.c-btn.is-disabled,
.c-input.is-disabled,
.c-select.is-disabled,
.c-textarea.is-disabled,
.c-checkbox.is-disabled,
.c-radio.is-disabled,
.c-switch.is-disabled,
.c-field.is-disabled,
.c-tabs__tab.is-disabled,
.c-navbar__link.is-disabled,
.c-sidebar__item.is-disabled,
.c-dropdown__item.is-disabled,
.c-pagination__page.is-disabled,
.c-list__row.is-disabled,
.c-card.is-disabled,
.c-btn[disabled],
.c-input[disabled],
.c-select[disabled],
.c-textarea[disabled],
.c-checkbox__box[disabled],
.c-radio__dot[disabled],
.c-switch[disabled],
.c-tabs__tab[disabled],
.c-dropdown__item[disabled],
.c-pagination__page[disabled] {
  pointer-events: none;
  cursor: default;
  opacity: 0.45;
}

/* A busy button also has the disabled attribute (see button.json). The
   is-loading veil and spinner already show the state, so do not dim the
   button a second time. A busy button must not look like an unavailable one. */
.c-btn.is-loading[disabled] {
  opacity: 1;
}

/* --- is-loading ----------------------------------------------------------- */
/* A loading element dims its content and shows a spinner. If the markup
   already contains a .c-spinner, we dim around it instead of covering it. */
.is-loading {
  position: relative;
  pointer-events: none;
}

.is-loading:has(.c-spinner) > *:not(:has(.c-spinner)):not(.c-spinner) {
  opacity: 0.45;
}

/* These roots have no fill of their own, so the veil below copies a
   transparent background. Dim the children instead. */
.c-field.is-loading:not(:has(.c-spinner)) > *,
.c-checkbox.is-loading:not(:has(.c-spinner)) > *,
.c-radio.is-loading:not(:has(.c-spinner)) > *,
.c-switch.is-loading:not(:has(.c-spinner)) > *,
.c-empty.is-loading:not(:has(.c-spinner)) > * {
  opacity: 0.45;
}

/* <input> and <textarea> draw no ::before or ::after, so the veil and the
   spinner do not show on them. A bar in the text colour runs along the
   bottom edge instead. The element selector raises specificity above a
   pack's [data-pack] .c-input rule, which loads later. Packs set
   background-color here, never the background shorthand. */
input.c-input.is-loading,
textarea.c-textarea.is-loading {
  cursor: progress;
  background-image: linear-gradient(90deg, transparent, currentColor, transparent);
  background-repeat: no-repeat;
  background-size: 40% 2px;
  background-position: -60% 100%;
  animation: dl-field-loading 1.2s linear infinite;
}

.is-loading:not(:has(.c-spinner))::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: inherit;
  opacity: 0.82;
}

.is-loading:not(:has(.c-spinner))::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 1.15em;
  height: 1.15em;
  margin: -0.575em 0 0 -0.575em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: dl-spin 720ms linear infinite;
}

/* --- selection / direction cues ------------------------------------------- */
.c-tabs__tab.is-active,
.c-navbar__link.is-active,
.c-sidebar__item.is-active,
.c-breadcrumb__item.is-active,
.c-pagination__page.is-active,
.c-dropdown__item.is-active,
.c-list__row.is-selected,
.c-table tbody tr.is-selected {
  font-weight: var(--weight-medium);
}

.c-stat__delta.is-up::before {
  content: "\25B2";
  font-size: 0.75em;
  line-height: 1;
}

.c-stat__delta.is-down::before {
  content: "\25BC";
  font-size: 0.75em;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   1 · Button
   -------------------------------------------------------------------------- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: max(2rem, calc(2.5rem * var(--density, 1)));
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* On a touch screen, a finger is less accurate than a mouse pointer, so
   the button target is 2.75rem (44px) at minimum. */
@media (pointer: coarse) {
  .c-btn {
    min-height: max(2.75rem, calc(2.75rem * var(--density, 1)));
  }
}

.c-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1em;
  height: 1em;
  line-height: 1;
}

.c-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   2 · Input   3 · Select   6 · Textarea
   -------------------------------------------------------------------------- */

.c-input,
.c-select,
.c-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  min-height: max(2rem, calc(2.5rem * var(--density, 1)));
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
}

.c-textarea {
  min-height: 6rem;
  resize: vertical;
  line-height: var(--leading-normal);
}

.c-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: var(--space-6);
  /* Chevron drawn from two gradients so it takes the pack's text colour.
     Packs must set background-color (never the background shorthand) here. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right var(--space-4) center,
    right var(--space-3) center;
  background-size: 0.34rem 0.34rem, 0.34rem 0.34rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.c-select::-ms-expand {
  display: none;
}

/* --------------------------------------------------------------------------
   4 · Checkbox   5 · Radio
   -------------------------------------------------------------------------- */
/* Root is a <label>; the native control itself carries __box / __dot, so the
   native glyph stays intact for assistive tech and for Firefox, which does not
   render pseudo-elements on inputs. Packs tune size, ring and accent-color. */

.c-checkbox,
.c-radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  cursor: pointer;
}

.c-checkbox__box,
.c-radio__dot {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  translate: 0 0.12rem;
  cursor: pointer;
}

.c-checkbox__label,
.c-radio__label {
  display: block;
  min-width: 0;
  line-height: var(--leading-normal);
}

/* --------------------------------------------------------------------------
   7 · Switch
   -------------------------------------------------------------------------- */

.c-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.c-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: 2.5rem;
  height: 1.4rem;
  padding: 0.15rem;
  border-radius: var(--radius-full);
}

.c-switch__thumb {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: var(--radius-full);
  transform: translateX(0);
}

.c-switch.is-active .c-switch__thumb,
.c-switch[aria-checked="true"] .c-switch__thumb,
.c-switch input:checked ~ .c-switch__track .c-switch__thumb {
  transform: translateX(1.1rem);
}

.c-switch input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8 · Field
   -------------------------------------------------------------------------- */

.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Standalone labels (input.html, select.html) need their own gap. */
.c-field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-field > .c-field__label {
  margin-bottom: 0;
}

.c-field__control {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.c-field__hint,
.c-field__error {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* The error message ships in the default markup so a pack has something to style,
   but a field is not in error until it says so. This is the is-error state
   mechanic, which _base.css owns: hidden by default, revealed by `.is-error` on
   the field root (or on the message itself, for a field-less form row). */
.c-field__error {
  display: none;
}

.c-field.is-error .c-field__error,
.c-field__error.is-error {
  display: block;
}

/* An input in error gets a 2px edge, so the error shows in more than colour.
   The [class] selector lifts specificity above a pack's [data-pack] .c-input
   rule. A pack error rule (same specificity, loaded later) can set its own
   width. In a pack with no border style, the width does not show. */
.c-field.is-error .c-input[class],
.c-input.is-error[class],
.c-select.is-error[class],
.c-textarea.is-error[class] {
  border-width: 2px;
}

/* A fieldset that holds library controls shows one group with no browser
   frame. Zero specificity, so a component or scene rule wins. */
:where(fieldset:has([class^="c-"], [class*=" c-"])) {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

:where(fieldset:has([class^="c-"], [class*=" c-"])) > :where(legend) {
  padding: 0;
}

/* --------------------------------------------------------------------------
   9 · Card
   -------------------------------------------------------------------------- */

.c-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* The header and the footer wrap. A pack with wide, uppercase titles (for
   example brutalist) makes the title and the badge wider than a narrow
   card, so the badge moves to a second line in place of an overflow. */
.c-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

.c-card__title {
  margin: 0;
  min-width: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.c-card__body {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-5);
  line-height: var(--leading-normal);
}

.c-card__header + .c-card__body {
  padding-top: var(--space-2);
}

.c-card__body > :first-child {
  margin-top: 0;
}

.c-card__body > :last-child {
  margin-bottom: 0;
}

.c-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

/* --------------------------------------------------------------------------
   10 · Stat
   -------------------------------------------------------------------------- */

.c-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  min-width: 0;
  border-radius: var(--radius-md);
}

.c-stat__label {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-stat__value {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.c-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
}

.c-stat__spark {
  display: block;
  width: 100%;
  height: 2.25rem;
  margin-top: var(--space-2);
  overflow: visible;
}

.c-stat__spark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   11 · Badge
   -------------------------------------------------------------------------- */

.c-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  min-height: 1.35rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   12 · Avatar
   -------------------------------------------------------------------------- */

.c-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border-radius: var(--radius-full);
  vertical-align: middle;
}

.c-avatar--sm {
  width: 2rem;
  height: 2rem;
}

.c-avatar--md {
  width: 2.5rem;
  height: 2.5rem;
}

.c-avatar--lg {
  width: 3.5rem;
  height: 3.5rem;
}

.c-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-avatar__initials {
  font-size: 0.4em;
  line-height: 1;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
}

.c-avatar--sm .c-avatar__initials {
  font-size: var(--text-xs);
}

.c-avatar--md .c-avatar__initials {
  font-size: var(--text-sm);
}

.c-avatar--lg .c-avatar__initials {
  font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   13 · Table
   -------------------------------------------------------------------------- */

.c-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

.c-table caption {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-sm);
}

.c-table th,
.c-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
}

.c-table th {
  font-size: var(--text-sm);
  white-space: nowrap;
}

.c-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ".c-table th, .c-table td" sets text-align: left at a higher specificity
   than .c-table__num, so a number cell needs this rule to align right. */
.c-table :is(th, td).c-table__num {
  text-align: right;
}

/* Footer rows (a total, for example) keep the body cell box. The numbers
   align with the body column. */
.c-table tfoot th,
.c-table tfoot td {
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   14 · List row
   -------------------------------------------------------------------------- */

.c-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* The row wraps. In a narrow column the meta (badge and time) moves to its
   own line under the text, so it never covers the title or the summary. */
.c-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
  text-decoration: none;
}

/* The full row is the click target of its title link: the ::after of the
   link covers the row. Other controls in the row stay above that layer. */
.c-list__row {
  position: relative;
}

.c-list__main > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-list__row :is(a, button, input, select, textarea, label, summary, [tabindex]):not(.c-list__main > a) {
  position: relative;
  z-index: 1;
}

.c-list__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 8rem;
  min-width: 0;
  line-height: var(--leading-tight);
}

/* The record title link. Without this rule it shows in the browser default
   link blue, which fails contrast on dark themes. */
.c-list__main > a {
  color: inherit;
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 0.2em;
}

.c-list__main > a:hover {
  text-decoration-color: currentColor;
}

.c-list__main > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.c-list__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  margin-left: auto;
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15 · Code block
   -------------------------------------------------------------------------- */

.c-code {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.c-code__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.c-code__body {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  tab-size: 2;
  white-space: pre;
}

.c-code__body code {
  font: inherit;
}

/* --------------------------------------------------------------------------
   16 · Progress
   -------------------------------------------------------------------------- */

.c-progress {
  position: relative;
  display: block;
  width: 100%;
  height: 0.5rem;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.c-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
}

.c-progress--indeterminate {
  overflow: hidden;
}

.c-progress--indeterminate .c-progress__bar {
  width: 35%;
  animation: dl-progress-slide 1400ms var(--ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   17 · Spinner + skeleton
   -------------------------------------------------------------------------- */

.c-spinner {
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-full);
  animation: dl-spin 720ms linear infinite;
  vertical-align: middle;
}

.c-skeleton {
  display: block;
  width: 100%;
  height: 0.8rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: currentColor;
  opacity: 0.12;
  animation: dl-skeleton-pulse 1600ms var(--ease-in-out) infinite;
}

.c-skeleton:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   18 · Navbar
   -------------------------------------------------------------------------- */

.c-navbar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  width: 100%;
  min-width: 0;
}

.c-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  text-decoration: none;
}

.c-navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.c-navbar__links::-webkit-scrollbar {
  display: none;
}

/* Overflow cue: the same end-edge fade as the horizontal stepper. The link
   row hides its scrollbar, so while there is more to the right, the end edge
   fades out. The fade is gone at the end of the scroll, and with no overflow
   there is no fade. Without scroll-driven animation support, the row
   scrolls with no fade. */
@supports (animation-timeline: scroll()) {
  .c-navbar__links {
    mask-image: linear-gradient(to left, transparent, currentColor 2.5rem);
    mask-size: calc(100% + 2.5rem) 100%;
    mask-repeat: no-repeat;
    mask-position: 0 0;
    animation: dl-stepper-edge linear both;
    animation-timeline: scroll(self inline);
  }
}

/* Reduced motion: the fade does not slide with the scroll. It stays at full
   strength while there is more to the right and goes off in one step at the
   end. */
@media (prefers-reduced-motion: reduce) {
  .c-navbar__links {
    animation-timing-function: step-end;
  }
}

.c-navbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
}

.c-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   19 · Sidebar
   -------------------------------------------------------------------------- */

.c-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-4);
  min-width: 0;
  overflow-y: auto;
}

.c-sidebar__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-sidebar__label {
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  min-width: 0;
}

.c-sidebar__item .c-badge {
  margin-left: auto;
}

/* A nested group holds the child links of one item. The indent shows that
   the links are children of that item, not siblings. */
.c-sidebar__group .c-sidebar__group {
  padding-inline-start: var(--space-4);
}

/* The agent rail fills its column, so c-sidebar__action sits at the foot. */
.c-sidebar--agent {
  gap: var(--space-4);
  min-height: 100%;
}

/* --------------------------------------------------------------------------
   20 · Tabs
   -------------------------------------------------------------------------- */

.c-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.c-tabs__list {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.c-tabs__list::-webkit-scrollbar {
  display: none;
}

.c-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  min-height: max(2rem, calc(2.25rem * var(--density, 1)));
  border: 0;
  background: none;
  white-space: nowrap;
  cursor: pointer;
}

.c-tabs__panel {
  display: block;
  min-width: 0;
  line-height: var(--leading-normal);
}

.c-tabs__panel > :first-child {
  margin-top: 0;
}

.c-tabs__panel > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   21 · Breadcrumb
   -------------------------------------------------------------------------- */

.c-breadcrumb {
  display: block;
  min-width: 0;
  font-size: var(--text-sm);
}

.c-breadcrumb ol,
.c-breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.c-breadcrumb__item a {
  text-decoration: none;
}

.c-breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  flex: none;
  -webkit-user-select: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   22 · Pagination
   -------------------------------------------------------------------------- */

/* The links sit straight in the <nav> in most markup, so the row wraps
   here too. A narrow column then gets a second row, not a sideways overflow. */
/* Page controls that sit close together cause motor-control errors (Morrell
   taxonomy), so the row uses --space-2 between controls. */
.c-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.c-pagination ol,
.c-pagination ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.c-pagination__gap {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 1.5rem;
  height: 2.25rem;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   23 · Dropdown
   -------------------------------------------------------------------------- */

.c-dropdown {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.c-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  min-height: max(2rem, calc(2.5rem * var(--density, 1)));
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  white-space: nowrap;
  cursor: pointer;
}

.c-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 40; /* scale: dropdown */
  display: none;
  flex-direction: column;
  min-width: 13rem;
  max-height: 18rem;
  padding: var(--space-1);
  overflow-y: auto;
  border-radius: var(--radius-md);
  margin: 0;
  list-style: none;
}

.c-dropdown.is-open .c-dropdown__menu {
  display: flex;
}

.c-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.c-dropdown__item .c-badge,
.c-dropdown__item kbd {
  margin-left: auto;
}

.c-dropdown__sep {
  display: block;
  height: 1px;
  margin: var(--space-1) 0;
  padding: 0;
  border: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   24 · Modal
   -------------------------------------------------------------------------- */
/* Positioned against the nearest positioned ancestor (the scene frame), so a
   modal never escapes the preview surface. Hidden until .is-open. */

.c-modal {
  position: absolute;
  inset: 0;
  z-index: 70; /* scale: modal */
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.c-modal.is-open {
  display: flex;
}

.c-modal__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
}

.c-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(100%, 34rem);
  max-height: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.c-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-4) var(--space-5);
}

.c-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  line-height: var(--leading-normal);
}

.c-modal__body > :first-child {
  margin-top: 0;
}

.c-modal__body > :last-child {
  margin-bottom: 0;
}

.c-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  flex: none;
  padding: var(--space-4) var(--space-5);
}

/* --------------------------------------------------------------------------
   25 · Drawer
   -------------------------------------------------------------------------- */

.c-drawer {
  position: absolute;
  inset: 0;
  z-index: 60; /* scale: drawer */
  display: none;
}

.c-drawer.is-open {
  display: block;
}

.c-drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(100%, 24rem);
  max-width: 100%;
  overflow: hidden;
}

.c-drawer--left .c-drawer__panel {
  right: auto;
  left: 0;
}

.c-drawer--right .c-drawer__panel {
  left: auto;
  right: 0;
}

.c-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-4) var(--space-5);
}

.c-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  line-height: var(--leading-normal);
}

.c-drawer__body > :first-child {
  margin-top: 0;
}

.c-drawer__body > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   26 · Toast
   -------------------------------------------------------------------------- */

.c-toast {
  position: relative;
  z-index: 80; /* scale: toast */
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  width: min(100%, 26rem);
  min-width: 0;
  border-radius: var(--radius-md);
}

.c-toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  line-height: 1;
}

.c-toast__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.c-toast__body {
  flex: 1 1 auto;
  min-width: 0;
  line-height: var(--leading-normal);
}

.c-toast__body > :first-child {
  margin-top: 0;
}

.c-toast__body > :last-child {
  margin-bottom: 0;
}

.c-toast__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   27 · Alert
   -------------------------------------------------------------------------- */

.c-alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  min-width: 0;
  border-radius: var(--radius-md);
}

.c-alert__title {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}

.c-alert__body {
  margin: 0;
  line-height: var(--leading-normal);
}

.c-alert__body > :first-child {
  margin-top: 0;
}

.c-alert__body > :last-child {
  margin-bottom: 0;
}

/* A link inside an alert takes the alert's own text colour. The pack picks
   that colour for the -soft wash, so the link stays readable on it. The
   underline marks it as a link, because the colour does not. */
.c-alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A link in a field hint (for example a privacy policy link) takes the hint
   colour, not the browser blue. The underline marks it as a link, so colour
   does not carry the state alone. */
.c-field__hint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c-field__hint a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   28 · Tooltip
   -------------------------------------------------------------------------- */

.c-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.c-tooltip__bubble {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  z-index: 50; /* scale: tooltip */
  transform: translateX(-50%);
  width: max-content;
  max-width: 15rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Placement for a trigger near an edge. A script sets these to keep the
   bubble inside the viewport. --below opens the bubble under the trigger.
   --start lines the bubble up with the start edge of the trigger. Packs set
   transform: translateX(-50%) to center the bubble; the translate property
   adds +50% to cancel that, so the pack transforms need no change. */
.c-tooltip--below .c-tooltip__bubble {
  top: calc(100% + var(--space-2));
  bottom: auto;
}

.c-tooltip--start .c-tooltip__bubble {
  left: 0;
  translate: 50% 0;
  text-align: start;
}

.c-tooltip:hover .c-tooltip__bubble,
.c-tooltip:focus-visible .c-tooltip__bubble,
.c-tooltip:focus-within .c-tooltip__bubble,
.c-tooltip.is-open .c-tooltip__bubble {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   29 · Empty state
   -------------------------------------------------------------------------- */

.c-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-5);
  min-width: 0;
  text-align: center;
  border-radius: var(--radius-md);
}

.c-empty__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-1);
  line-height: 1;
}

.c-empty__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.c-empty__title {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.c-empty__body {
  margin: 0;
  max-width: 34rem;
  line-height: var(--leading-normal);
}

/* Prose of more than one line starts each line at the same position. The
   title and the art stay centered. */
.c-empty__body {
  text-align: start;
}

.c-empty__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   30 · Footer
   -------------------------------------------------------------------------- */

.c-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  width: 100%;
  min-width: 0;
}

.c-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.c-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
}

.c-footer__col ul,
.c-footer__col ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-footer__col h2,
.c-footer__col h3,
.c-footer__col h4 {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-footer a {
  text-decoration: none;
}

/* A taller click target for each footer link. */
.c-footer a {
  display: inline-block;
  padding: var(--space-1) 0;
}

/* Visited links show in the muted text color, to help re-finding. The color
   is not the only cue: the list title link keeps its underline, and the
   breadcrumb and footer positions identify those links. */
.c-list__main > a:visited,
.c-breadcrumb__item a:visited,
.c-footer a:visited {
  color: var(--text-muted);
}

.c-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  font-size: var(--text-sm);
}

.c-footer__legal ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   31 · Keyframes used by the structural mechanics
   -------------------------------------------------------------------------- */

@keyframes dl-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dl-progress-slide {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(320%);
  }
}

@keyframes dl-skeleton-pulse {
  0%,
  100% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.18;
  }
}

/* Entrance for an alert or a toast that has just appeared (is-open).
   It plays once. The end frame is the normal state, so nothing stays
   hidden if the animation does not run. */
@keyframes dl-enter {
  from {
    opacity: 0;
    translate: 0 0.375rem;
  }
}

.c-alert.is-open,
.c-toast.is-open {
  animation: dl-enter var(--dur-base, 200ms) var(--ease-out, ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .c-spinner,
  .c-skeleton,
  .c-progress--indeterminate .c-progress__bar,
  .c-alert.is-open,
  .c-toast.is-open,
  .is-loading::after {
    animation: none;
  }

  .c-progress--indeterminate .c-progress__bar {
    width: 100%;
    opacity: 0.5;
  }

  .c-skeleton {
    opacity: 0.14;
  }
}

/* --------------------------------------------------------------------------
   32 · Shared mechanics for the agent set
   -------------------------------------------------------------------------- */

.c-approval__option,
.c-chat__tab,
.c-code__copy,
.c-command__input,
.c-command__item,
.c-filter__chip,
.c-prompt__chip-remove,
.c-prompt__field,
.c-prompt__tool,
.c-selection__action,
.c-sidebar__action,
.c-stream__followup,
.c-tune__num,
.c-tune__slider {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

.c-approval__option:focus-visible,
.c-chat__tab:focus-visible,
.c-code__copy:focus-visible,
.c-command__input:focus-visible,
.c-command__item:focus-visible,
.c-context__chunk:focus-visible,
.c-filter__chip:focus-visible,
.c-prompt__chip-remove:focus-visible,
.c-prompt__field:focus-visible,
.c-prompt__tool:focus-visible,
.c-selection__action:focus-visible,
.c-sidebar__action:focus-visible,
.c-stream__cite:focus-visible,
.c-stream__followup:focus-visible,
.c-stream__source:focus-visible,
.c-task__row:focus-visible,
.c-tool:focus-visible,
.c-tune__slider:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.c-approval__option.is-disabled,
.c-chat__tab.is-disabled,
.c-command__item.is-disabled,
.c-filter__chip.is-disabled,
.c-selection__action.is-disabled,
.c-task__row.is-disabled,
.c-tool.is-disabled,
.c-approval__option[disabled],
.c-chat__tab[disabled],
.c-command__item[aria-disabled="true"],
.c-filter__chip[disabled],
.c-prompt__field[disabled] {
  pointer-events: none;
  cursor: default;
  opacity: 0.45;
}

/* A streaming component reports its own progress inside its content, so the
   shared is-loading veil would hide the one thing the reader is waiting for.
   These carry their own indicator and stay readable while the work runs. */
.c-chat__turn.is-loading::before,
.c-chat__turn.is-loading::after,
.c-code--streaming.is-loading::before,
.c-code--streaming.is-loading::after,
.c-command.is-loading::before,
.c-command.is-loading::after,
.c-prompt.is-loading::before,
.c-prompt.is-loading::after,
.c-selection.is-loading::before,
.c-selection.is-loading::after,
.c-stream.is-loading::before,
.c-stream.is-loading::after,
.c-task.is-loading::before,
.c-task.is-loading::after,
.c-thinking.is-loading::before,
.c-thinking.is-loading::after,
.c-tool.is-loading::before,
.c-tool.is-loading::after {
  content: none;
}

.c-chat__turn.is-loading,
.c-code--streaming.is-loading,
.c-command.is-loading,
.c-prompt.is-loading,
.c-selection.is-loading,
.c-stream.is-loading,
.c-task.is-loading,
.c-thinking.is-loading,
.c-tool.is-loading {
  pointer-events: auto;
}

/* Each streaming component shows its own progress cue in place of the veil.
   c-chat__turn holds a c-loader and c-code--streaming a c-code__cursor in
   the markup, so they need no rule here. */
.c-stream.is-loading .c-stream__cursor {
  display: inline-block;
}

.c-command.is-loading .c-command__list,
.c-selection.is-loading .c-selection__bar {
  opacity: 0.55;
}

.c-selection.is-loading .c-selection__bar {
  pointer-events: none;
}

.c-task.is-loading,
.c-command.is-loading,
.c-selection.is-loading {
  cursor: progress;
}

.c-task.is-loading .c-task__row {
  opacity: 0.7;
}

.c-prompt.is-loading .c-prompt__send,
.c-tool.is-loading .c-tool__icon {
  animation: dl-shimmer 1.6s var(--ease-in-out) infinite;
}

/* The call is still open, so there is no result count yet. The markup puts
   the word "running" in c-tool__count, so the state also shows as text.
   Do not hide c-tool__count here. */

/* --- agent states ---------------------------------------------------------
   Each state in an agent manifest gets one plain cue here, so the state
   always shows a change. Packs repaint the cue in their own style.
     is-error               an inset --danger outline
     is-selected, is-active an inset --accent outline
     is-disabled            dimmed, and the controls stop taking input
   If the state lives on a part (turn, row, chunk), the part takes the cue.
   Parts that every pack already styles (c-tool.is-error, c-diff__row,
   c-task__row, c-context__chunk, c-filter__chip) are not in these lists. */

.c-chat.is-error,
.c-chat__turn.is-error,
.c-command.is-error,
.c-context.is-error,
.c-insight.is-error,
.c-prompt.is-error,
.c-records.is-error,
.c-selection.is-error,
.c-stream.is-error,
.c-thinking.is-error,
.c-tune.is-error {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}

.c-chat.is-selected,
.c-chat__turn.is-selected,
.c-context.is-selected,
.c-diff.is-selected,
.c-filter.is-active,
.c-insight.is-selected,
.c-rec.is-selected,
.c-records.is-selected,
.c-task.is-selected,
.c-tool.is-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Table rows take a cell fill, because an outline on a <tr> does not
   paint in every browser. */
.c-records__table tbody tr.is-selected > * {
  background-color: var(--accent-soft);
}

.c-records__table tbody tr.is-error > * {
  background-color: var(--danger-soft);
}

/* A disabled agent surface stays readable: the manifests ask to keep the
   expired option, the stale card and the ignored chunk visible. */
.c-approval.is-disabled,
.c-context.is-disabled,
.c-context__chunk.is-disabled,
.c-diff.is-disabled,
.c-diff__row.is-disabled,
.c-filter.is-disabled,
.c-prompt.is-disabled,
.c-rec.is-disabled,
.c-tune.is-disabled {
  cursor: default;
  opacity: 0.6;
}

.c-approval.is-disabled,
.c-context__chunk.is-disabled,
.c-diff__row.is-disabled,
.c-prompt.is-disabled,
.c-tune.is-disabled,
.c-rec.is-disabled .c-rec__alts,
.c-rec.is-disabled .c-rec__actions {
  pointer-events: none;
}

/* A rejected diff row keeps its text, struck through. */
.c-diff__row.is-disabled > * {
  text-decoration: line-through;
}

/* --- Classic components: one plain cue per state --------------------------
   No pack painted these states, so the gallery toggle showed no change.
   Each cue uses outline, opacity, filter or a cell fill. Packs do not set
   these properties on these parts, so a pack rule for the state still
   paints over the cue where one exists. */
.c-avatar.is-active {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

.c-avatar.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.c-avatar.is-disabled,
.c-badge.is-disabled {
  filter: grayscale(1);
  opacity: 0.6;
}

.c-badge.is-active {
  outline: 1px solid currentColor;
  outline-offset: 1px;
  font-weight: var(--weight-bold);
}

/* A pressed toggle button. currentColor stays visible on every fill. */
.c-btn.is-active {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* is-selected on a checkbox or radio goes with the checked attribute, so
   the browser draws the mark. This rule only sets the mark colour. */
.c-checkbox__box.is-selected,
.c-radio__dot.is-selected {
  accent-color: var(--accent);
}

/* Indeterminate is a JS-only property. The dashed ring shows the state in a
   static preview. */
.c-checkbox.is-active .c-checkbox__box {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* The destructive item. Three classes, so the cue holds over a pack item
   colour; a pack hover rule still wins. */
.c-dropdown .c-dropdown__item.is-error {
  color: var(--danger);
}

.c-empty.is-error {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}

.c-field.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: var(--space-1);
}

/* The sorted column: an underline, so the cue does not depend on colour. */
.c-table thead th.is-active {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* A row whose last operation failed. A cell fill, because an outline on a
   <tr> does not paint in every browser. */
.c-table tbody tr.is-error > * {
  background-color: var(--danger-soft);
}

/* Mobile menu open: the links drop below the brand row as a stacked list. */
.c-navbar.is-open {
  flex-wrap: wrap;
}

.c-navbar.is-open .c-navbar__links {
  order: 3;
  flex: 1 0 100%;
  flex-direction: column;
  align-items: stretch;
  overflow-x: visible;
}

/* The palette opens as an overlay on the nearest positioned ancestor (the
   scene frame). The inline variant always stays in the flow. */
.c-command.is-open:not(.c-command--inline) {
  position: absolute;
  inset-block-start: var(--space-6);
  inset-inline: 0;
  z-index: 90; /* scale: command */
  width: min(100% - 2 * var(--space-4), 36rem);
  max-width: none;
  margin-inline: auto;
}

.c-command--wide.is-open:not(.c-command--inline) {
  width: min(100% - 2 * var(--space-4), 45rem);
}

/* --------------------------------------------------------------------------
   33 · Agent loader
   -------------------------------------------------------------------------- */

.c-loader {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-loader__art {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.c-loader__cell {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  opacity: 0.25;
  animation: dl-loader-pixel 1.2s var(--ease-in-out) infinite;
}

.c-loader__cell:nth-child(2) { animation-delay: 60ms; }
.c-loader__cell:nth-child(3) { animation-delay: 120ms; }
.c-loader__cell:nth-child(4) { animation-delay: 300ms; }
.c-loader__cell:nth-child(5) { animation-delay: 180ms; }
.c-loader__cell:nth-child(6) { animation-delay: 240ms; }
.c-loader__cell:nth-child(7) { animation-delay: 360ms; }
.c-loader__cell:nth-child(8) { animation-delay: 480ms; }
.c-loader__cell:nth-child(9) { animation-delay: 420ms; }

.c-loader--dots .c-loader__art {
  display: flex;
  align-items: center;
  gap: 3px;
  width: auto;
  height: 1em;
}

.c-loader--dots .c-loader__cell {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  animation-name: dl-loader-dot;
  animation-duration: 1s;
}

.c-loader--orbit .c-loader__art {
  display: block;
  position: relative;
  width: 1.15em;
  height: 1.15em;
  animation: dl-loader-orbit 900ms linear infinite;
}

.c-loader--orbit .c-loader__cell {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 5px;
  height: 5px;
  margin-inline-start: -2.5px;
  border-radius: var(--radius-full);
  opacity: 1;
  animation: none;
}

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

.c-loader__time {
  flex: none;
  margin-inline-start: auto;
  padding-inline-start: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-loader.is-error .c-loader__cell,
.c-loader.is-error .c-loader__art,
.c-loader.is-disabled .c-loader__cell,
.c-loader.is-disabled .c-loader__art {
  animation: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   34 · Thinking trace
   -------------------------------------------------------------------------- */

.c-thinking {
  display: block;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.c-thinking__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  min-width: 0;
}

.c-thinking__summary::-webkit-details-marker {
  display: none;
}

.c-thinking__summary::after {
  content: "";
  flex: none;
  width: 0.4em;
  height: 0.4em;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.c-thinking[open] > .c-thinking__summary::after,
.c-thinking.is-open > .c-thinking__summary::after {
  transform: rotate(45deg);
}

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

.c-thinking__time {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-thinking--live .c-thinking__label,
.c-thinking.is-loading .c-thinking__label {
  animation: dl-shimmer 1.6s var(--ease-in-out) infinite;
}

.c-thinking__trace {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-1) var(--space-4) var(--space-4);
  list-style: none;
  min-width: 0;
}

.c-thinking__step {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}

.c-thinking__kind {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-loose);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.c-thinking__body {
  margin: 0;
  min-width: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-thinking--flat {
  border-radius: 0;
}

.c-thinking--flat .c-thinking__summary,
.c-thinking--flat .c-thinking__trace {
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   35 · Streaming answer
   -------------------------------------------------------------------------- */

.c-stream {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

.c-stream__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.c-stream__body p {
  margin: 0;
}

.c-stream__cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  padding: 0 0.3em;
  margin-inline-start: 2px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  vertical-align: super;
}

/* The caret belongs to the stream that is still open. */
.c-stream:not(.c-stream--typing) .c-stream__cursor,
.c-code:not(.c-code--streaming) .c-code__cursor {
  display: none;
}

.c-stream__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  background-color: currentColor;
  animation: dl-caret 1s steps(1, end) infinite;
}

.c-stream__sources {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.c-stream__count {
  margin: 0;
  font-size: var(--text-xs);
}

.c-stream__source {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  min-width: 0;
}

.c-stream__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.c-stream__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.c-stream__host {
  flex: none;
  font-size: var(--text-xs);
}

.c-stream__followups {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-stream__followup {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  text-align: start;
  font-size: var(--text-sm);
  cursor: pointer;
}

.c-stream--compact .c-stream__source {
  grid-template-columns: max-content minmax(0, 1fr);
}

.c-stream--compact .c-stream__title {
  display: none;
}

/* --------------------------------------------------------------------------
   36 · Approval card
   -------------------------------------------------------------------------- */

.c-approval {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  min-width: 0;
}

.c-approval__question {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.c-approval__detail,
.c-approval__foot {
  margin: 0;
  font-size: var(--text-sm);
}

.c-approval__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-1);
}

.c-approval__option {
  display: flex;
  flex: 1 1 13rem;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  text-align: start;
  cursor: pointer;
  min-width: 0;
}

.c-approval__title {
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}

.c-approval__note {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* --------------------------------------------------------------------------
   37 · Tool chip
   -------------------------------------------------------------------------- */

.c-tool {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-width: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.c-tool__icon {
  display: inline-flex;
  flex: none;
}

.c-tool__name {
  flex: none;
  font-weight: var(--weight-medium);
}

/* Truncates from the start, so a long path still ends in the file name. */
.c-tool__arg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: start;
  font-family: var(--font-mono);
}

.c-tool__count {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.c-tool--summary {
  cursor: pointer;
}

/* The roll-up chip is a <button>. Clear the UA button box. A pack rule on
   .c-tool (0,2,0) still sets its own border and fill over this reset. */
button.c-tool {
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  letter-spacing: inherit;
  color: inherit;
  text-align: start;
}

/* --------------------------------------------------------------------------
   38 · Task rows
   -------------------------------------------------------------------------- */

.c-task {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.c-task__row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  min-width: 0;
}

.c-task__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-block-start: 0.1em;
  border-radius: var(--radius-full);
  flex: none;
}

.c-task__row--running .c-task__status::before,
.c-task__row--queued .c-task__status::before,
.c-task__row--draft .c-task__status::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius-full);
  background-color: currentColor;
}

.c-task__row--running .c-task__status::before {
  animation: dl-task-pulse 1.4s var(--ease-in-out) infinite;
}

.c-task__row--queued .c-task__status::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

.c-task__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-task__title {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-task__meta,
.c-task__note {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
}

.c-task__state {
  flex: none;
  font-size: var(--text-xs);
  line-height: var(--leading-loose);
}

/* --------------------------------------------------------------------------
   39 · Chat panel
   -------------------------------------------------------------------------- */

.c-chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.c-chat__tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
  flex: none;
}

.c-chat__tab {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--text-sm);
}

.c-chat__log {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  overflow-y: auto;
  min-height: 0;
  min-width: 0;
}

.c-chat__turn {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.c-chat__turn--user {
  flex-direction: row-reverse;
}

.c-chat__bubble {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  max-width: 46rem;
  min-width: 0;
}

.c-chat__turn--agent .c-chat__bubble {
  flex: 1 1 auto;
}

.c-chat__bubble p {
  margin: 0;
}

.c-chat__time {
  flex: none;
  align-self: flex-end;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-chat--flush .c-chat__turn {
  flex-direction: row;
  padding-block-end: var(--space-4);
}

.c-chat--flush .c-chat__bubble {
  flex: 1 1 auto;
  padding: 0;
  max-width: none;
}

/* --------------------------------------------------------------------------
   40 · Prompt bar
   -------------------------------------------------------------------------- */

.c-prompt {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  min-width: 0;
}

/* The field label stays in the accessibility tree and out of the layout. */
.c-prompt__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-prompt__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.c-prompt__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  min-width: 0;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-prompt__chip-icon {
  flex: none;
  font-family: var(--font-mono);
}

.c-prompt__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.c-prompt__field {
  display: block;
  width: 100%;
  min-height: 3em;
  max-height: 12em;
  padding: var(--space-2);
  border: 0;
  background: none;
  resize: vertical;
  line-height: var(--leading-normal);
}

.c-prompt__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.c-prompt__tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2em;
  height: 2em;
  padding: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.c-prompt__model {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.c-prompt__hint {
  margin-inline-start: auto;
  font-size: var(--text-xs);
}

.c-prompt__send {
  flex: none;
}

.c-prompt--pill,
.c-prompt--pill .c-prompt__field {
  border-radius: var(--radius-full);
}

.c-prompt--docked {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

/* --------------------------------------------------------------------------
   41 · Recommendation card
   -------------------------------------------------------------------------- */

.c-rec {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  min-width: 0;
}

.c-rec__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.c-rec__question {
  flex: 1 1 12rem;
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.c-rec__confidence {
  flex: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.c-rec__action,
.c-rec__caveat {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-rec__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}

.c-rec__fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.c-rec__fact dt {
  font-size: var(--text-xs);
}

.c-rec__fact dd {
  margin: 0;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.c-rec__alts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.c-rec__alts-label {
  margin: 0;
  font-size: var(--text-xs);
}

.c-rec__alt {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-align: start;
  min-width: 0;
}

.c-rec__alt-title {
  font-size: var(--text-sm);
}

.c-rec__alt-note {
  font-size: var(--text-xs);
}

.c-rec__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   42 · Context cards
   -------------------------------------------------------------------------- */

.c-context {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

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

.c-context__count {
  margin: 0;
  font-size: var(--text-sm);
}

.c-context__chunk {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  min-width: 0;
}

.c-context__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.c-context__title {
  margin: 0;
  font-size: var(--text-sm);
  min-width: 0;
}

.c-context__size {
  flex: none;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-context__body {
  margin: 0;
  max-height: 12em;
  overflow-y: auto;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-context__source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-xs);
}

.c-context__kind {
  flex: none;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
}

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

.c-context__where {
  flex: none;
}

.c-context__score {
  flex: none;
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.c-context--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  align-items: start;
}

.c-context--grid .c-context__head {
  grid-column: 1 / -1;
}

.c-context--strip .c-context__chunk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3);
}

.c-context--strip .c-context__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-height: none;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   43 · Insight card
   -------------------------------------------------------------------------- */

.c-insight {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  min-width: 0;
}

.c-insight__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.c-insight__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  min-width: 0;
}

.c-insight__pager {
  flex: none;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-insight__headline {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.c-insight__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.c-insight__metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 7rem;
}

.c-insight__metric dt {
  font-size: var(--text-xs);
}

.c-insight__metric dd {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.c-insight__amount {
  font-size: var(--text-xs);
}

.c-insight__chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  min-width: 0;
}

.c-insight__caption {
  font-size: var(--text-xs);
}

.c-insight__bars {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
  height: 4.5rem;
  min-width: 0;
}

.c-insight__bar {
  flex: 1 1 0;
  min-width: 2px;
  border-start-start-radius: var(--radius-sm);
  border-start-end-radius: var(--radius-sm);
  background-color: currentColor;
  opacity: 0.3;
}

.c-insight__bar.is-active {
  opacity: 1;
}

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

.c-insight__question {
  margin: 0;
  font-size: var(--text-sm);
}

.c-insight__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-insight--quiet .c-insight__ask {
  display: none;
}

.c-insight--wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: var(--space-4) var(--space-5);
  align-items: start;
}

.c-insight--wide .c-insight__head,
.c-insight--wide .c-insight__headline,
.c-insight--wide .c-insight__ask {
  grid-column: 1 / -1;
}

/* --------------------------------------------------------------------------
   44 · Selection actions
   -------------------------------------------------------------------------- */

.c-selection {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.c-selection__text {
  margin: 0;
  line-height: var(--leading-loose);
}

.c-selection__mark {
  padding: 0.1em 0;
  background-color: transparent;
  color: inherit;
}

.c-selection__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  width: max-content;
  max-width: 100%;
}

.c-selection__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--text-sm);
}

.c-selection__icon {
  display: inline-flex;
  flex: none;
}

.c-selection__sep {
  width: 1px;
  align-self: stretch;
  margin-inline: var(--space-1);
  background-color: currentColor;
  opacity: 0.25;
}

/* The float bar sits above the passage, so it never covers the text.
   It shows only while a selection exists (is-open). */
.c-selection--float .c-selection__bar {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: 20; /* scale: in-flow float */
}

.c-selection--float:not(.is-open) .c-selection__bar {
  display: none;
}

.c-selection--docked .c-selection__bar {
  position: sticky;
  inset-block-end: 0;
}

/* --------------------------------------------------------------------------
   45 · Fine-tune card
   -------------------------------------------------------------------------- */

.c-tune {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  min-width: 0;
}

.c-tune__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.c-tune__title {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
}

.c-tune__target {
  flex: none;
  font-size: var(--text-xs);
}

.c-tune__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.c-tune__label {
  padding: 0;
  font-size: var(--text-xs);
}

.c-tune__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.c-tune__pair {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.c-tune__key {
  flex: none;
  width: 1em;
  font-size: var(--text-xs);
}

.c-tune__num {
  width: 4.5rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.c-tune__unit {
  flex: none;
  font-size: var(--text-xs);
}

.c-tune__slider {
  flex: 1 1 6rem;
  min-width: 4rem;
}

.c-tune__foot {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.c-tune--float {
  width: 17.5rem;
}

.c-tune--panel {
  height: 100%;
  overflow-y: auto;
}

/* --------------------------------------------------------------------------
   46 · Command search
   -------------------------------------------------------------------------- */

.c-command {
  display: flex;
  flex-direction: column;
  max-height: 30rem;
  min-height: 0;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.c-command__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-3) var(--space-4);
}

.c-command__icon {
  display: inline-flex;
  flex: none;
}

.c-command__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--text-base);
}

.c-command__kbd {
  flex: none;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.c-command__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  overflow-y: auto;
  min-height: 0;
  min-width: 0;
}

/* Each result group is a div[role=group] inside the list. It stacks its
   label and items with the same 1px gap as the list, and the groups stand
   apart by one --space-2 step. */
.c-command__list [role="group"] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.c-command__list [role="group"] + [role="group"] {
  margin-top: var(--space-2);
}

.c-command__group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-xs);
}

.c-command__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-width: 0;
}

.c-command__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
}

.c-command__meta {
  flex: none;
  font-size: var(--text-xs);
}

.c-command__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-2) var(--space-4);
}

.c-command__hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.c-command__hint:last-child {
  margin-inline-start: auto;
}

.c-command--inline {
  max-height: none;
}

.c-command--wide {
  max-width: 45rem;
}

/* --------------------------------------------------------------------------
   47 · Diff table
   -------------------------------------------------------------------------- */

.c-diff {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

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

.c-diff__title {
  margin: 0;
  font-size: var(--text-base);
}

.c-diff__summary,
.c-diff__note {
  margin: 0;
  font-size: var(--text-xs);
}

.c-diff__caption,
.c-filter__caption,
.c-records__caption {
  caption-side: top;
  padding-block-end: var(--space-2);
  text-align: start;
  font-size: var(--text-xs);
}

.c-diff__table {
  width: 100%;
}

.c-diff__gutter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  margin-inline-end: var(--space-2);
  font-family: var(--font-mono);
}

.c-diff__old {
  text-decoration: line-through;
}

.c-diff__new {
  margin-inline-start: var(--space-2);
}

.c-diff__old + .c-diff__new::before {
  content: "\2192\A0";
}

.c-diff__row--remove th,
.c-diff__row--remove td {
  text-decoration: line-through;
}

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

.c-diff__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* --------------------------------------------------------------------------
   48 · Records table
   -------------------------------------------------------------------------- */

.c-records {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  overflow-x: auto;
}

.c-records__table {
  width: 100%;
}

.c-records__name {
  white-space: nowrap;
}

.c-records__where {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
}

.c-records__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.c-records__tag {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.c-records__strength {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  font-size: var(--text-sm);
}

.c-records__link {
  display: inline-block;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.c-records__foot th,
.c-records__foot td {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-records--dense .c-records__where {
  display: inline;
  margin-inline-start: var(--space-1);
}

/* --------------------------------------------------------------------------
   49 · Filter table
   -------------------------------------------------------------------------- */

.c-filter {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.c-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.c-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--text-sm);
}

.c-filter__count {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-filter__panel {
  min-width: 0;
  overflow-x: auto;
}

.c-filter__table {
  width: 100%;
}

.c-filter--underline .c-filter__chip {
  border-radius: 0;
  padding-inline: var(--space-2);
}

/* --------------------------------------------------------------------------
   50 · Agent additions to the sidebar and the code block
   -------------------------------------------------------------------------- */

.c-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  min-width: 0;
}

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

.c-sidebar__search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.c-sidebar__search .c-input {
  width: 100%;
  padding-inline-start: var(--space-6);
}

.c-sidebar__search-icon {
  position: absolute;
  inset-inline-start: var(--space-2);
  display: inline-flex;
  pointer-events: none;
}

.c-sidebar__count {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.c-sidebar__action {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: auto;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

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

.c-code__lang {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--text-xs);
}

.c-code__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-xs);
}

.c-code__copy-icon {
  display: inline-flex;
}

.c-code__cursor {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  vertical-align: text-bottom;
  background-color: currentColor;
  animation: dl-caret 1s steps(1, end) infinite;
}

/* --------------------------------------------------------------------------
   51 · Keyframes for the agent set
   -------------------------------------------------------------------------- */

@keyframes dl-loader-pixel {
  0%,
  100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

@keyframes dl-loader-dot {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-30%);
    opacity: 1;
  }
}

@keyframes dl-loader-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dl-caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes dl-shimmer {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@keyframes dl-field-loading {
  from {
    background-position: -60% 100%;
  }
  to {
    background-position: 160% 100%;
  }
}

@keyframes dl-task-pulse {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-loader__cell,
  .c-loader--dots .c-loader__cell,
  .c-loader--orbit .c-loader__art,
  .c-task__row--running .c-task__status::before,
  .c-thinking--live .c-thinking__label,
  .c-thinking.is-loading .c-thinking__label,
  .c-prompt.is-loading .c-prompt__send,
  .c-tool.is-loading .c-tool__icon {
    animation: none;
    opacity: 1;
  }

  /* The field bar stops in the middle, so the field still shows it loads. */
  input.c-input.is-loading,
  textarea.c-textarea.is-loading {
    animation: none;
    background-position: 50% 100%;
  }

  .c-code__cursor,
  .c-stream__cursor {
    animation: none;
    opacity: 1;
  }

  .c-thinking__summary::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   52 · Forced colors (Windows high contrast)
   -------------------------------------------------------------------------- */
/* Forced colors removes box-shadow and background fills, and packs often
   draw focus with them. An outline in the system text colour survives, so
   every focus target gets one here. !important beats the pack focus rules,
   which often set outline: none. */
@media (forced-colors: active) {
  :is(
    .c-btn, .c-input, .c-select, .c-textarea, .c-checkbox__box, .c-radio__dot,
    .c-switch, .c-tabs__tab, .c-navbar__link, .c-sidebar__item, .c-breadcrumb a,
    .c-pagination__page, .c-dropdown__trigger, .c-dropdown__item, .c-list__row,
    .c-toast__close, .c-tooltip, .c-footer a,
    .c-approval__option, .c-chat__tab, .c-code__copy, .c-command__input,
    .c-command__item, .c-context__chunk, .c-filter__chip, .c-prompt__chip-remove,
    .c-prompt__field, .c-prompt__tool, .c-selection__action,
    .c-sidebar__action, .c-stream__cite, .c-stream__followup, .c-stream__source,
    .c-task__row, .c-tool, .c-tune__slider, .c-thinking__summary
  ):focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }

  /* Selected and active items lose their fill, so mark them with an outline. */
  .c-tabs__tab.is-active,
  .c-navbar__link.is-active,
  .c-sidebar__item.is-active,
  .c-pagination__page.is-active,
  .c-dropdown__item.is-active,
  .c-list__row.is-selected,
  .c-chat__tab.is-active,
  .c-filter__chip.is-active,
  .c-command__item.is-selected,
  .c-approval__option.is-selected,
  .c-task__row.is-selected {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }

  /* The spinner and the field bar draw in currentColor, which forced
     colors keeps. The veil fill does not survive, so drop it. */
  .is-loading:not(:has(.c-spinner))::before {
    background: none;
  }
}

/* --------------------------------------------------------------------------
   53 · Stepper
   An ordered list of three to six steps. Each step holds one head (an <a>
   for a step the reader can go back to, a plain <span> for the others), an
   optional hint and a connector line to the next step. The marker is 2rem
   square, and the line positions below use that size.
   Horizontal: equal columns, marker above label, line from marker to marker.
   The list scrolls sideways when the columns do not fit.
   Vertical: marker left of label, hint under the label, line down the
   marker column.
   -------------------------------------------------------------------------- */

.c-stepper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(7rem, 1fr);
  align-items: start;
  margin: 0;
  padding: var(--space-2) var(--space-1);
  list-style: none;
  min-width: 0;
  overflow-x: auto;
}

.c-stepper__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding-inline: var(--space-1);
  text-align: center;
}

/* The head: the link or plain span that holds the marker and the label. */
.c-stepper__step > a,
.c-stepper__step > span:not([class]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.c-stepper__step > a[href] {
  cursor: pointer;
}

.c-stepper__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.c-stepper__marker svg {
  display: block;
  flex: none;
}

.c-stepper__label {
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  overflow-wrap: break-word;
}

/* The status words ("completed", "current step") stay in the
   accessibility tree and out of the layout. */
.c-stepper__label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-stepper__hint {
  min-width: 0;
  max-width: 100%;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  overflow-wrap: break-word;
}

/* The line starts after this marker and stops before the next one. The
   columns have equal widths, so the next marker centre is 100% away. */
.c-stepper__line {
  position: absolute;
  top: 1rem;
  left: calc(50% + 1rem + var(--space-2));
  right: calc(-50% + 1rem + var(--space-2));
  height: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}

.c-stepper__step:last-child .c-stepper__line {
  display: none;
}

/* --- vertical ------------------------------------------------------------- */
.c-stepper--vertical {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  padding: var(--space-1);
  overflow-x: visible;
}

.c-stepper--vertical .c-stepper__step {
  align-items: stretch;
  gap: var(--space-1);
  padding: 0 0 var(--space-5);
  text-align: start;
}

.c-stepper--vertical .c-stepper__step:last-child {
  padding-block-end: 0;
}

.c-stepper--vertical .c-stepper__step > a,
.c-stepper--vertical .c-stepper__step > span:not([class]) {
  flex-direction: row;
  align-self: flex-start;
  gap: var(--space-3);
}

.c-stepper--vertical .c-stepper__hint {
  padding-inline-start: calc(2rem + var(--space-3));
}

.c-stepper--vertical .c-stepper__line {
  top: calc(2rem + var(--space-1));
  bottom: var(--space-1);
  left: 1rem;
  right: auto;
  width: 2px;
  height: auto;
  transform: translateX(-50%);
}

/* --- compact: number only in a narrow container --------------------------- */
/* The <nav> around the list is the query container, so Compact follows the
   width of the column the stepper sits in, not the window width. Size
   containment gives the nav no width from its content, so the parent must
   give it a width: a block <nav> in normal flow does. */
nav:has(> .c-stepper--compact) {
  container: dl-stepper / inline-size;
}

@container dl-stepper (max-width: 30rem) {
  .c-stepper--compact {
    grid-auto-columns: minmax(2.75rem, 1fr);
  }

  .c-stepper--compact .c-stepper__label,
  .c-stepper--compact .c-stepper__hint {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* The columns are narrow, so a smaller gap keeps a visible line between
     two markers. */
  .c-stepper--compact .c-stepper__line {
    left: calc(50% + 1rem + var(--space-1));
    right: calc(-50% + 1rem + var(--space-1));
  }

  .c-stepper--compact.c-stepper--vertical .c-stepper__step {
    padding-block-end: var(--space-3);
  }

  /* The error reason stays on screen. Vertical: under the marker, in the
     normal flow. */
  .c-stepper--compact.c-stepper--vertical .c-stepper__step--error > .c-stepper__hint {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  /* Horizontal: in a band under the row of markers, across the full width.
     The error step gives up its own containing block for this, and its
     connector line goes away: the flow stops at the error. */
  .c-stepper--compact:not(.c-stepper--vertical):has(.c-stepper__step--error > .c-stepper__hint) {
    position: relative;
    padding-block-end: calc(var(--text-xs) * var(--leading-normal) * 2 + var(--space-4));
  }

  .c-stepper--compact:not(.c-stepper--vertical) .c-stepper__step--error:has(> .c-stepper__hint) {
    position: static;
  }

  .c-stepper--compact:not(.c-stepper--vertical) .c-stepper__step--error > .c-stepper__line {
    display: none;
  }

  .c-stepper--compact:not(.c-stepper--vertical) .c-stepper__step--error > .c-stepper__hint {
    position: absolute;
    inset: auto var(--space-2) var(--space-2);
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    text-align: start;
  }
}

/* --- overflow cue ----------------------------------------------------------- */
/* A horizontal stepper that does not fit scrolls sideways. While there is
   more to the right, the end edge fades out, so the reader sees that the
   row goes on. The fade follows the scroll position and is gone at the end.
   Without scroll-driven animation support, the row scrolls with no fade. */
@supports (animation-timeline: scroll()) {
  .c-stepper:not(.c-stepper--vertical) {
    mask-image: linear-gradient(to left, transparent, currentColor 2.5rem);
    mask-size: calc(100% + 2.5rem) 100%;
    mask-repeat: no-repeat;
    mask-position: 0 0;
    animation: dl-stepper-edge linear both;
    animation-timeline: scroll(self inline);
  }
}

/* Reduced motion: the fade does not slide with the scroll. It stays at
   full strength while there is more to the right and goes off in one step
   at the end. With no overflow the timeline is inactive, so there is no
   fade. */
@media (prefers-reduced-motion: reduce) {
  .c-stepper:not(.c-stepper--vertical) {
    animation-timing-function: step-end;
  }
}

@keyframes dl-stepper-edge {
  from {
    mask-position: -2.5rem 0;
  }

  to {
    mask-position: 0 0;
  }
}

/* --- states --------------------------------------------------------------- */
.c-stepper__step > a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* A disabled step: no href, aria-disabled="true" on the head. */
.c-stepper__step--disabled,
.c-stepper__step > a.is-disabled,
.c-stepper__step > a[aria-disabled="true"] {
  cursor: default;
}

/* 0.6 and not 0.45: the step must still read as a step, like a disabled
   c-tags option. */
.c-stepper__step--disabled,
.c-stepper__step > a.is-disabled {
  opacity: 0.6;
}

.c-stepper__step > a.is-disabled,
.c-stepper__step > a[aria-disabled="true"] {
  pointer-events: none;
}

/* The flow has an error: the step where the reader stands takes a
   --danger ring around its marker. */
.c-stepper.is-error .c-stepper__step--error .c-stepper__marker,
.c-stepper.is-error .c-stepper__step[aria-current="step"] .c-stepper__marker {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

@media (forced-colors: active) {
  .c-stepper__step > a:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }

  .c-stepper__marker {
    border: 1px solid CanvasText;
  }

  .c-stepper__line {
    background-color: CanvasText;
  }

  .c-stepper__step[aria-current="step"] .c-stepper__marker {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* --------------------------------------------------------------------------
   54 · Activity timeline
   The root is an <ol> of <li> items, or a role="feed" <div> of <article>
   items. These rules use the classes only, so both work. Each item is a two-column grid: a fixed 1.5rem
   marker column and the body. The spine is the item's ::before. It sits in
   the marker column, starts under the marker and runs through the item's
   bottom padding to the top of the next item, so markers never need a fill
   to hide it. A day heading takes its own row above the marker, so the
   spine breaks at each day. Packs paint the spine, markers and bubbles.
   -------------------------------------------------------------------------- */

.c-timeline {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.c-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  grid-template-areas:
    "day day"
    "marker body";
  column-gap: var(--space-3);
  padding-bottom: var(--space-5);
  min-width: 0;
}

.c-timeline__item::before {
  content: "";
  grid-area: marker;
  justify-self: center;
  align-self: stretch;
  width: 2px;
  margin-top: calc(1.5rem + var(--space-1));
  margin-bottom: calc(var(--space-1) - var(--space-5));
  background-color: currentColor;
  opacity: 0.2;
}

/* The last event has nothing below it. While older events load, the spine
   runs on into the skeleton row. */
.c-timeline__item:last-child::before {
  display: none;
}

.c-timeline.is-loading .c-timeline__item:last-child::before {
  display: block;
}

.c-timeline__marker {
  grid-area: marker;
  align-self: start;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  line-height: 1;
}

.c-timeline__marker svg {
  display: block;
  flex: none;
}

.c-timeline__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding-top: 0.125rem;
}

.c-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  min-width: 0;
}

.c-timeline__actor,
.c-timeline__action {
  min-width: 0;
  overflow-wrap: anywhere;
}

.c-timeline__head .c-badge {
  align-self: center;
}

/* The time stays inline after the action or badge. A right-aligned time
   moves to a row of its own when the head wraps, away from its event. */
.c-timeline__time {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.c-timeline__detail {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

/* A comment is a bubble: the body gets padding and a radius. The marker
   column stays, so the bubble lines up with the other bodies. */
.c-timeline__item--comment .c-timeline__body {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

/* The day heading. Without c-timeline--grouped it stays in the markup for
   screen readers and takes no space. */
.c-timeline__day {
  grid-area: day;
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
}

.c-timeline:not(.c-timeline--grouped) .c-timeline__day {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.c-timeline--grouped .c-timeline__item:not(:first-child) .c-timeline__day {
  margin-top: var(--space-3);
}

.c-timeline__more {
  margin-top: var(--space-2);
  margin-left: calc(1.5rem + var(--space-3));
}

/* Compact: a 1rem marker column, a dot in place of the icon, tighter rows. */
.c-timeline--compact .c-timeline__item {
  grid-template-columns: 1rem minmax(0, 1fr);
  column-gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.c-timeline--compact .c-timeline__item::before {
  margin-top: calc(1rem + var(--space-1));
  margin-bottom: calc(var(--space-1) - var(--space-3));
}

.c-timeline--compact .c-timeline__marker {
  width: 1rem;
  height: 1rem;
}

.c-timeline--compact .c-timeline__marker svg {
  width: 0.625rem;
  height: 0.625rem;
}

.c-timeline--compact .c-timeline__body {
  padding-top: 0;
}

.c-timeline--compact .c-timeline__detail {
  font-size: var(--text-xs);
}

.c-timeline--compact .c-timeline__item--comment .c-timeline__body {
  padding: var(--space-2) var(--space-3);
}

.c-timeline--compact + .c-timeline__more {
  margin-left: calc(1rem + var(--space-2));
}

/* Focus: in the feed structure each event is an article with tabindex="0". */
.c-timeline__item:focus-visible,
.c-timeline a:focus-visible,
.c-timeline__more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* is-loading loads the next page. The events stay readable and focusable,
   so the shared veil is off. A skeleton row (marker plus two bars, drawn in
   currentColor) follows the last event, and the button after the list dims. */
.c-timeline.is-loading {
  pointer-events: auto;
}

.c-timeline.is-loading::before {
  content: none;
}

.c-timeline.is-loading::after {
  content: "";
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  width: auto;
  height: 2.5rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-image:
    radial-gradient(circle closest-side, currentColor 98%, transparent),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size:
    1.5rem 1.5rem,
    min(14rem, 45%) 0.75rem,
    min(22rem, 70%) 0.625rem;
  background-position:
    0 0,
    calc(1.5rem + var(--space-3)) 0.375rem,
    calc(1.5rem + var(--space-3)) 1.75rem;
  opacity: 0.14;
  animation: dl-skeleton-pulse 1600ms var(--ease-in-out) infinite;
}

/* Compact: the skeleton uses the 1rem marker column and the smaller gap. */
.c-timeline--compact.is-loading::after {
  height: 2rem;
  background-size:
    1rem 1rem,
    min(14rem, 45%) 0.625rem,
    min(22rem, 70%) 0.5rem;
  background-position:
    0 0,
    calc(1rem + var(--space-2)) 0.1875rem,
    calc(1rem + var(--space-2)) 1.25rem;
}

.c-timeline.is-loading + .c-timeline__more {
  pointer-events: none;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .c-timeline.is-loading::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   55 · File upload
   The native file input covers the whole zone with opacity 0. A click on
   the zone opens the picker, and a file dropped on the zone lands on the
   input with no script. The input stays in the tab order, so the zone
   draws its focus ring through :has().
   c-upload__bar is the track. Its fill is the one plain <span> inside it,
   with an inline width (runtime data), as in c-progress. Packs paint the
   track and the fill and never set the fill width.
   -------------------------------------------------------------------------- */

.c-upload {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* The error summary above the component stands apart from the label, also
   in packs that give the alert a hard shadow. */
.c-alert + .c-upload {
  margin-top: var(--space-5);
}

.c-upload__label {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-upload__hint {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-upload__zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  min-height: max(6rem, calc(8rem * var(--density, 1)));
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-upload__zone > svg {
  display: block;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

/* The input sits above the zone content, so every click reaches it. */
.c-upload__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.c-upload__input[disabled] {
  cursor: not-allowed;
}

/* A visual copy of a button. The input under the same area takes the click. */
.c-upload__button {
  pointer-events: none;
}

/* The list is the query container for the file rows. It is a stretched
   block in the column, so it always has a width of its own. */
.c-upload__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  container: dl-upload-list / inline-size;
}

/* Name and meta on the left, Remove on the right. The bar and the error
   take the full width under them. */
.c-upload__file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
}

.c-upload__name {
  grid-column: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-upload__meta {
  grid-column: 1;
  min-width: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  font-variant-numeric: tabular-nums;
}

.c-upload__remove {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
}

.c-upload__bar {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 0.375rem;
  overflow: hidden;
  border-radius: var(--radius-full);
}

.c-upload__bar > span {
  display: block;
  width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
}

.c-upload__error {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* In a narrow list the Remove button takes its own row at the end, so the
   name and the meta get the full width. */
@container dl-upload-list (max-width: 22rem) {
  .c-upload__file {
    grid-template-columns: minmax(0, 1fr);
  }

  .c-upload__remove {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* The status line at the end of the root. */
.c-upload > .c-upload__meta {
  margin: 0;
  font-size: var(--text-sm);
}

/* --- Focus ---------------------------------------------------------------- */
.c-upload__input:focus-visible {
  outline: none;
}

.c-upload__zone:has(.c-upload__input:focus-visible),
.c-upload__remove:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Without :has(), the zone shows the ring on any focus inside it. */
@supports not selector(:has(*)) {
  .c-upload__zone:focus-within {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
}

/* The error summary above the component takes focus from the script on
   submit (tabindex="-1"), so it shows a ring. */
.c-alert[tabindex="-1"]:focus,
.c-alert[tabindex="-1"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --- Compact: the button only, no zone ------------------------------------ */
.c-upload--compact .c-upload__zone {
  display: inline-flex;
  flex-direction: row;
  align-self: flex-start;
  min-height: 0;
  padding: 0;
}

.c-upload--compact .c-upload__zone > :not(.c-upload__input):not(.c-upload__button) {
  display: none;
}

/* --- Avatar: one image in a round tile ------------------------------------ */
.c-upload--avatar .c-upload__zone {
  align-self: flex-start;
  width: max(8rem, calc(10rem * var(--density, 1)));
  min-height: 0;
  aspect-ratio: 1;
  padding: var(--space-3);
  border-radius: var(--radius-full);
}

.c-upload--avatar .c-upload__zone > span:not(.c-upload__button) {
  display: none;
}

/* The button stays inside the round tile: its text wraps, and it never gets
   wider than the tile content box. */
.c-upload--avatar .c-upload__button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  font-size: var(--text-xs);
}

/* --- States --------------------------------------------------------------- */

/* Drag over. A dashed accent line, so the cue does not depend on a fill. */
.c-upload.is-active .c-upload__zone,
.c-upload__zone.is-active {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.c-upload.is-error .c-upload__zone {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}

/* Uploading. The rows report their own progress and the Remove buttons
   stay usable, so the shared veil does not cover the root. Only the zone
   stops new input. The input also leaves the tab order, so Enter and Space
   do not open the picker. Markup sets the disabled attribute too, which
   keeps the input in the accessibility tree as "dimmed". */
.c-upload.is-loading {
  pointer-events: auto;
}

.c-upload.is-loading::before,
.c-upload.is-loading::after {
  display: none;
}

.c-upload.is-loading .c-upload__zone {
  pointer-events: none;
  cursor: progress;
  opacity: 0.6;
}

.c-upload.is-loading .c-upload__input,
.c-upload.is-disabled .c-upload__input {
  visibility: hidden;
}

/* While a batch uploads, the input is disabled too, but the root does not
   dim: the rows and the Remove buttons stay usable. */
.c-upload.is-disabled,
.c-upload:not(.is-loading):has(.c-upload__input.is-disabled),
.c-upload:not(.is-loading):has(.c-upload__input[disabled]) {
  pointer-events: none;
  cursor: default;
  opacity: 0.45;
}

@media (forced-colors: active) {
  .c-upload__zone:has(.c-upload__input:focus-visible),
  .c-upload__remove:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }

  .c-upload__bar {
    border: 1px solid CanvasText;
  }

  .c-upload__bar > span {
    background-color: CanvasText;
  }
}

/* --------------------------------------------------------------------------
   56 · Pricing plans
   Plans sit in a grid of at most three columns. Each column is at least
   15rem wide, so the grid drops to two columns and then to one on narrow
   screens. The comparison table spans every column under the plans.
   -------------------------------------------------------------------------- */

.c-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(15rem, 28%)), 1fr));
  gap: var(--space-5);
  align-items: stretch;
  min-width: 0;
}

.c-pricing__plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-md);
}

.c-pricing__flag {
  align-self: flex-start;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
}

.c-pricing__name {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
}

.c-pricing__tagline {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-pricing__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin: 0;
}

.c-pricing__amount {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.c-pricing__period {
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-pricing__note {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-pricing__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.c-pricing__feature {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

/* The mark is an empty span with role="img" and an aria-label. The glyph
   comes from ::before, and the empty alt text after the slash keeps the
   glyph out of the accessibility tree. */
.c-pricing__feature > [role="img"] {
  flex: none;
  width: 1.25em;
  text-align: center;
}

.c-pricing__feature > [role="img"]::before {
  content: "\2713";
  content: "\2713" / "";
}

.c-pricing__feature--off > [role="img"]::before {
  content: "\2013";
  content: "\2013" / "";
}

/* The action sits at the bottom of the plan, so the buttons line up
   across the row. */
.c-pricing__action {
  width: 100%;
  margin-top: auto;
}

.c-pricing__action[aria-disabled="true"] {
  cursor: default;
}

.c-pricing__action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The table is in the markup at all times. Only c-pricing--compare
   displays it. It sits in an unclassed <div> that spans every column and
   scrolls sideways when the four columns do not fit, so the page itself
   never scrolls sideways. The <div> is also the query container for the
   cell rules below. It is a stretched grid item, so it always has a width. */
.c-pricing > div:not([class]) {
  display: none;
  grid-column: 1 / -1;
  min-width: 0;
  overflow-x: auto;
  container: dl-pricing-table / inline-size;
}

.c-pricing--compare > div:not([class]) {
  display: block;
}

/* The mask clips anything outside the border box, so the focus ring sits
   inside the edge. */
.c-pricing > div:not([class]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

/* Overflow cue: the same end-edge fade as the horizontal stepper. While
   there is more of the table to the right, the end edge fades out. The fade
   is gone at the end of the scroll, and with no overflow there is no fade. */
@supports (animation-timeline: scroll()) {
  .c-pricing > div:not([class]) {
    mask-image: linear-gradient(to left, transparent, currentColor 2.5rem);
    mask-size: calc(100% + 2.5rem) 100%;
    mask-repeat: no-repeat;
    mask-position: 0 0;
    animation: dl-stepper-edge linear both;
    animation-timeline: scroll(self inline);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-pricing > div:not([class]) {
    animation-timing-function: step-end;
  }
}

.c-pricing__table {
  display: none;
  grid-column: 1 / -1;
}

.c-pricing--compare .c-pricing__table {
  display: table;
}

.c-pricing__table td {
  font-size: var(--text-sm);
}

/* Both billing periods are in the markup. Monthly shows by default and
   c-pricing--annual swaps the two. */
.c-pricing [data-billing="annual"],
.c-pricing--annual [data-billing="monthly"] {
  display: none;
}

.c-pricing--annual .c-pricing__price[data-billing="annual"] {
  display: flex;
}

.c-pricing--annual .c-pricing__note[data-billing="annual"] {
  display: block;
}

/* is-selected: one plain cue before the pack paints it. */
.c-pricing__plan.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* In a narrow root the four table columns get narrow, so the cells wrap.
   The scroll <div> is the query container, so this follows the preview
   width and not the window width. */
@container dl-pricing-table (max-width: 30rem) {
  .c-pricing__table th,
  .c-pricing__table td {
    padding: var(--space-2);
    white-space: normal;
  }
}

@media (forced-colors: active) {
  .c-pricing__plan--featured,
  .c-pricing__plan.is-selected {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }

  .c-pricing__action:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }
}

/* --------------------------------------------------------------------------
   57 · Tag input
   A combobox that turns chosen options into removable tags. c-tags__field
   holds the tag list, the input and the popup. Inline: the tags and the
   input share one wrapping row inside the field. Stacked: the input is the
   box and the tags wrap in a list under it. The popup is absolute, at the
   dropdown layer (40). The listbox inside the popup is an unclassed
   ul[role="listbox"], because a listbox holds options only.
   -------------------------------------------------------------------------- */

.c-tags {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Two tag inputs in a row, as in the gallery demo, stand apart. */
.c-tags + .c-tags {
  margin-top: var(--space-6);
}

.c-tags__label {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}

.c-tags__field {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  min-width: 0;
  min-height: max(2rem, calc(2.5rem * var(--density, 1)));
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: text;
}

.c-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-tags__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
  padding: 0 0 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  cursor: default;
}

/* The label clips long names with an ellipsis. The block padding and the
   end padding keep descenders and the last glyph out of the clip. */
.c-tags__tag-label {
  min-width: 0;
  padding: 0.1em 0.1em 0.1em 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 1.5rem keeps the remove target at the 24px minimum (WCAG 2.5.8). */
.c-tags__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: 1;
  cursor: pointer;
}

.c-tags__input {
  flex: 1 1 7rem;
  min-width: 7rem;
  min-height: 1.75rem;
  margin: 0;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.c-tags__input[readonly] {
  cursor: default;
}

/* --- popup ----------------------------------------------------------------- */

.c-tags__popup {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 40; /* scale: dropdown */
  display: none;
  flex-direction: column;
  max-height: 18rem;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: default;
}

.c-tags.is-open .c-tags__popup {
  display: flex;
}

.c-tags__popup [role="listbox"] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: 0;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  overflow-y: auto;
}

/* The listbox has no c- class, so the shared [hidden] rule does not reach
   it. This rule keeps the "No matches" state hidden. */
.c-tags__popup [role="listbox"][hidden] {
  display: none;
}

.c-tags__option {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
  cursor: pointer;
}

.c-tags__option small {
  flex: none;
  margin-inline-start: auto;
  font-size: var(--text-xs);
  white-space: nowrap;
}

.c-tags__empty {
  display: none;
  margin: 0;
  padding: var(--space-3);
  font-size: var(--text-sm);
}

/* No matches: the listbox is hidden, so the empty text shows in its place
   and the match count goes away. */
.c-tags__popup [role="listbox"][hidden] ~ .c-tags__empty {
  display: block;
}

.c-tags__popup [role="listbox"][hidden] ~ .c-tags__hint {
  display: none;
}

.c-tags__hint,
.c-tags__error {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* The match count at the foot of the popup. */
.c-tags__popup .c-tags__hint {
  flex: none;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

/* Inline is the default layout. The class marks it, so markup can name the
   variant; the flex row above already puts the tags inside the field. */
.c-tags--inline .c-tags__field {
  flex-wrap: wrap;
}

/* --- stacked variant ----------------------------------------------------------
   The field becomes a one-column grid: the input in row 1, the tags in
   row 2. The popup takes grid row 1 as its containing block, so it opens
   under the input and covers the tags, not under the whole field. */

.c-tags--stacked .c-tags__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
  min-height: 0;
  padding: 0;
  cursor: auto;
}

.c-tags--stacked .c-tags__input {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  min-height: max(2rem, calc(2.5rem * var(--density, 1)));
  padding: var(--space-2) var(--space-3);
}

.c-tags--stacked .c-tags__list {
  grid-row: 2;
  grid-column: 1;
}

/* Both lines are explicit. With grid-row: 1 alone, an absolute child takes
   the padding edge as its end line, so top: 100% falls under the tag list. */
.c-tags--stacked .c-tags__popup {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
}

/* --- states ------------------------------------------------------------------ */

.c-tags__error {
  display: none;
}

.c-tags.is-error .c-tags__error {
  display: block;
}

.c-tags.is-error .c-tags__field {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}

.c-tags--stacked.is-error .c-tags__field {
  outline: 0;
}

.c-tags--stacked.is-error .c-tags__input {
  outline: 2px solid var(--danger);
  outline-offset: -2px;
}

.c-tags__option.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.c-tags.is-disabled,
.c-tags__option.is-disabled,
.c-tags__option[aria-disabled="true"],
.c-tags__input[disabled],
.c-tags__remove[disabled] {
  pointer-events: none;
  cursor: default;
}

.c-tags.is-disabled {
  opacity: 0.45;
}

/* A disabled option keeps its reason readable, so it dims less. */
.c-tags__option.is-disabled,
.c-tags__option[aria-disabled="true"] {
  opacity: 0.6;
}

/* --- focus ------------------------------------------------------------------- */

.c-tags__input:focus-visible,
.c-tags__remove:focus-visible,
.c-tags__option:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.c-tags__remove:focus-visible {
  outline-offset: 0;
}

@media (forced-colors: active) {
  .c-tags__input:focus-visible,
  .c-tags__remove:focus-visible,
  .c-tags__option:focus-visible {
    outline: 2px solid CanvasText !important;
    outline-offset: 2px !important;
  }

  .c-tags__field,
  .c-tags--stacked .c-tags__input,
  .c-tags__popup,
  .c-tags__tag {
    border: 1px solid CanvasText;
  }

  .c-tags--stacked .c-tags__field {
    border: 0;
  }

  .c-tags__option.is-selected {
    outline: 1px solid Highlight;
    outline-offset: -1px;
  }
}

/* --------------------------------------------------------------------------
   58 · Registry round additions (CONTRACT §3.3.1)
   Field layouts, input widths, radio panel, card media and textures,
   vertical tabs, right-aligned sidebar, the shared c-visually-hidden
   utility and the c-progress data-value steps. Structure only: packs give
   the edges, fills and textures.
   -------------------------------------------------------------------------- */

/* Shared utility: the text leaves the screen and stays in the accessibility
   tree. !important keeps a pack or a component rule from opening the box. */
.c-visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* Field: label beside the control. The label column has a fixed width, so
   the controls of stacked fields start on one vertical line. In a narrow
   container the column is 35 percent of the field. */
.c-field--inline,
.c-field--inline-end {
  display: grid;
  grid-template-columns: minmax(0, min(10rem, 35%)) minmax(0, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  align-items: start;
}

.c-field--inline > *,
.c-field--inline-end > * {
  grid-column: 2;
}

/* The label is as high as one control, so its text is on the control line. */
.c-field--inline > .c-field__label,
.c-field--inline-end > .c-field__label {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  min-height: max(2rem, calc(2.5rem * var(--density, 1)));
}

.c-field--inline > .c-field__control,
.c-field--inline-end > .c-field__control {
  grid-row: 1;
}

.c-field--inline-end > .c-field__label {
  justify-content: flex-end;
  text-align: end;
}

.c-field--inline > .c-field__help,
.c-field--inline-end > .c-field__help {
  grid-column: 1;
  grid-row: 2;
}

.c-field--inline-end > .c-field__help {
  justify-self: end;
}

/* Field: help slot in the label row of a stacked field. */
.c-field__help {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.c-field:has(> .c-field__help):not(.c-field--inline, .c-field--inline-end) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: var(--space-2);
  align-items: center;
}

.c-field:has(> .c-field__help):not(.c-field--inline, .c-field--inline-end) > * {
  grid-column: 1 / -1;
}

.c-field:has(> .c-field__help):not(.c-field--inline, .c-field--inline-end) > .c-field__label {
  grid-column: 1;
}

.c-field:has(> .c-field__help):not(.c-field--inline, .c-field--inline-end) > .c-field__help {
  grid-column: 2;
  justify-self: start;
}

/* Field: confirmed answer. A check glyph starts the hint and the control
   gets a 2px edge, so the state shows in more than color. The glyph has
   empty alternative text: the hint words carry the meaning. */
.c-field--valid .c-field__hint::before {
  content: "\2713\00a0";
  content: "\2713\00a0" / "";
  font-weight: var(--weight-bold);
}

.c-field--valid .c-input[class],
.c-field--valid .c-select[class],
.c-field--valid .c-textarea[class] {
  border-width: 2px;
}

/* A read-only input is a readout: the user cannot edit it. The edge is dashed
   and the text is dimmed, so it looks different from an editable field. The
   [class] selector lifts specificity above a pack's [data-pack] .c-input rule.
   The focus ring does not change. In a pack with no border style, the dashed
   edge does not show, and the dimmed text stays as the cue. */
.c-input[readonly][class] {
  border-style: dashed;
  opacity: 0.8;
  cursor: default;
}

/* Input widths for an answer of known length: 6 or 16 characters plus the
   padding and the edge of the box. */
.c-input--short {
  width: calc(6ch + 2 * var(--space-3) + 2 * var(--border-width, 1px));
  max-width: 100%;
}

.c-input--medium {
  width: calc(16ch + 2 * var(--space-3) + 2 * var(--border-width, 1px));
  max-width: 100%;
}

/* Radio panel: the dependent inputs of one option. The panel starts under
   the dot, so a pack edge on its start side links it to the option. */
.c-radio__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin-block: var(--space-1) var(--space-2);
  margin-inline-start: calc(0.525rem - 1px);
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-2) + 0.525rem);
}

/* The panel shows only while its option is checked. */
.c-radio:has(> .c-radio__dot:not(:checked)) + .c-radio__panel {
  display: none;
}

/* Card media: a figure with an image and an optional caption. */
.c-card__media {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
}

.c-card__media > img,
.c-card__media > svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.c-card__media > figcaption {
  padding: var(--space-2) var(--space-5) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* Horizontal card: the media fills a column at the left of the card text.
   A card with no media keeps the stacked layout. */
.c-card--horizontal:has(> .c-card__media) {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  grid-template-rows: auto 1fr auto;
}

.c-card--horizontal:has(> .c-card__media) > * {
  grid-column: 2;
}

.c-card--horizontal:has(> .c-card__media) > .c-card__media {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.c-card--horizontal > .c-card__media > img,
.c-card--horizontal > .c-card__media > svg {
  flex: 1 1 auto;
  height: 100%;
  min-height: 9rem;
  aspect-ratio: auto;
}

.c-card--horizontal > .c-card__media > figcaption {
  padding: var(--space-2) var(--space-3);
}

/* Card textures. The texture layer sits under the content and over the
   card fill. Packs draw the texture. While the card loads, the shared veil
   uses both pseudo-elements, so the texture steps aside. */
.c-card--grain,
.c-card--paper {
  position: relative;
  isolation: isolate;
}

.c-card--grain:not(.is-loading)::after,
.c-card--paper:not(.is-loading)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The folded corner of the paper card. */
.c-card--paper:not(.is-loading)::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 1.5rem;
  height: 1.5rem;
  pointer-events: none;
}

.c-card--paper > .c-card__header {
  padding-inline-end: calc(var(--space-5) + 1rem);
}

/* Tilted card: alternate cards turn the other way, like cut paper. */
.c-card--tilt {
  transform: rotate(-1.5deg);
}

.c-card--tilt:nth-of-type(2n) {
  transform: rotate(1.5deg);
}

/* Vertical tabs: the tab list is a column at the left of the panel. */
.c-tabs--vertical {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--space-5);
}

.c-tabs--vertical > .c-tabs__list {
  flex: 0 0 auto;
  flex-direction: column;
  max-width: 100%;
  overflow-x: visible;
}

/* If less than 14rem is free at the right of the list, the panel moves
   under the list. */
.c-tabs--vertical > .c-tabs__panel {
  flex: 1 1 14rem;
}

.c-tabs--vertical .c-tabs__tab {
  justify-content: flex-start;
  text-align: start;
}

/* The radio mark: a ring on each tab, and a ring with a dot on the
   selected tab. The shape changes, so the state is not color only. */
.c-tabs--vertical .c-tabs__tab::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.c-tabs--vertical .c-tabs__tab.is-active::before,
.c-tabs--vertical .c-tabs__tab[aria-selected="true"]::before {
  background-image: radial-gradient(circle, currentColor 0 32%, transparent 36%);
}

/* Right-aligned sidebar labels. */
.c-sidebar--right .c-sidebar__label {
  text-align: end;
}

.c-sidebar--right .c-sidebar__item {
  justify-content: flex-end;
  text-align: end;
}

.c-sidebar--right .c-sidebar__item .c-badge,
.c-sidebar--right .c-sidebar__item .c-sidebar__count {
  margin-left: 0;
}

/* Progress: the data-value attribute sets the bar width in steps of 5.
   An inline style on the bar still wins. */
.c-progress[data-value="0"] > .c-progress__bar {
  width: 0%;
}

.c-progress[data-value="5"] > .c-progress__bar {
  width: 5%;
}

.c-progress[data-value="10"] > .c-progress__bar {
  width: 10%;
}

.c-progress[data-value="15"] > .c-progress__bar {
  width: 15%;
}

.c-progress[data-value="20"] > .c-progress__bar {
  width: 20%;
}

.c-progress[data-value="25"] > .c-progress__bar {
  width: 25%;
}

.c-progress[data-value="30"] > .c-progress__bar {
  width: 30%;
}

.c-progress[data-value="35"] > .c-progress__bar {
  width: 35%;
}

.c-progress[data-value="40"] > .c-progress__bar {
  width: 40%;
}

.c-progress[data-value="45"] > .c-progress__bar {
  width: 45%;
}

.c-progress[data-value="50"] > .c-progress__bar {
  width: 50%;
}

.c-progress[data-value="55"] > .c-progress__bar {
  width: 55%;
}

.c-progress[data-value="60"] > .c-progress__bar {
  width: 60%;
}

.c-progress[data-value="65"] > .c-progress__bar {
  width: 65%;
}

.c-progress[data-value="70"] > .c-progress__bar {
  width: 70%;
}

.c-progress[data-value="75"] > .c-progress__bar {
  width: 75%;
}

.c-progress[data-value="80"] > .c-progress__bar {
  width: 80%;
}

.c-progress[data-value="85"] > .c-progress__bar {
  width: 85%;
}

.c-progress[data-value="90"] > .c-progress__bar {
  width: 90%;
}

.c-progress[data-value="95"] > .c-progress__bar {
  width: 95%;
}

.c-progress[data-value="100"] > .c-progress__bar {
  width: 100%;
}

@media (forced-colors: active) {
  .c-tabs--vertical .c-tabs__tab::before {
    forced-color-adjust: none;
    border-color: CanvasText;
  }

  .c-tabs--vertical .c-tabs__tab.is-active::before,
  .c-tabs--vertical .c-tabs__tab[aria-selected="true"]::before {
    background-image: radial-gradient(circle, CanvasText 0 32%, transparent 36%);
  }
}

/* ==========================================================================
   P · Principle example frame (CONTRACT §11)
   The p-ex classes frame a "do" pane and a "don't" pane around registered
   components. No pack styles them, so this section holds their full look.
   Appearance exception: the panes use --border, the label glyphs use
   --success and --danger, and the caption uses --text-muted. The two panes
   differ in three ways: the label word, the glyph and the edge style. Thus
   color is never the only cue.
   ========================================================================== */

.p-ex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-5);
  align-items: start;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
}

.p-ex--single,
.p-ex--stack {
  grid-template-columns: minmax(0, 1fr);
}

.p-ex__do,
.p-ex__dont {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  padding: var(--space-4);
  border: var(--border-width, 1px) solid var(--border);
  border-block-start-width: 4px;
  border-radius: var(--radius-md);
}

.p-ex__do {
  border-block-start-style: solid;
}

.p-ex__dont {
  border-block-start-style: dashed;
}

.p-ex__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text);
}

.p-ex__label::before {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  font-size: var(--text-sm);
  line-height: 1;
  border-radius: var(--radius-full);
  border: 2px solid currentColor;
}

.p-ex__do > .p-ex__label::before {
  content: "\2713" / "";
  color: var(--success);
}

.p-ex__dont > .p-ex__label::before {
  content: "\2715" / "";
  color: var(--danger);
}

.p-ex__stage {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

/* Overlay components fill the stage, so the stage needs real height. An
   open dropdown menu is absolute, so it also needs the height, or it covers
   the caption. */
.p-ex__stage:has(.c-modal, .c-drawer, .c-command, .c-toast, .c-dropdown.is-open) {
  min-height: 28rem;
}

.p-ex__stage > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl) {
  margin: 0;
}

.p-ex__caption {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.p-ex__prose {
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.p-ex__prose > * {
  margin: 0;
}

.p-ex__prose > * + * {
  margin-block-start: var(--space-3);
}

/* 62ch gives about 60 to 70 characters per line, inside the 45 to 72 range. */
.p-ex__prose--measure {
  max-width: 62ch;
}

.p-ex__prose--full {
  max-width: none;
}

.p-ex__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.p-ex__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.p-ex__row--tight,
.p-ex__col--tight {
  gap: var(--space-1);
}

.p-ex__row--loose,
.p-ex__col--loose {
  gap: var(--space-6);
}

@media (forced-colors: active) {
  .p-ex__do,
  .p-ex__dont {
    border-color: CanvasText;
  }
}

/* --------------------------------------------------------------------------
   P.2 · Frame utilities (CONTRACT §11.6)
   Demo classes for visual principles: grid, proportion, shape, line, tilt,
   color relations, type, white space and texture. They hold no new token.
   Every color comes from a theme token. Derived colors use color-mix() and
   relative color syntax inside @supports, with a plain token as fallback.
   Shape geometry uses fixed ratios, not --radius-*, because a theme with a
   zero radius must still show a circle or a rounded square.
   Nothing here moves, so prefers-reduced-motion changes nothing.
   -------------------------------------------------------------------------- */

/* Stage variants */

.p-ex__stage--canvas,
.p-ex__stage--fold {
  box-sizing: border-box;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  justify-content: center;
  padding: var(--space-4);
  background-color: var(--bg-sunken);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}

/* Fold: the canvas with content from the top edge. Content taller than the
   stage is cut at the bottom edge only, as a page is cut at the fold. */
.p-ex__stage--fold {
  justify-content: flex-start;
}

.p-ex__stage--contrast {
  padding: var(--space-4);
  background-color: var(--text);
  color: var(--bg-base);
  border-radius: var(--radius-sm);
}

.p-ex__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.p-ex__stage--contrast .p-ex__note,
.p-ex__stage--contrast .p-ex__type--muted {
  color: inherit;
  opacity: 0.8;
}

/* Grid: 12 columns. A child without a span class takes one column. */

.p-ex__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
  min-width: 0;
}

.p-ex__grid--loose {
  gap: var(--space-6);
}

.p-ex__grid--guides {
  background-image: repeating-linear-gradient(
    to right,
    var(--accent-soft) 0 calc((100% - 11 * var(--space-3)) / 12),
    transparent calc((100% - 11 * var(--space-3)) / 12) calc((100% - 11 * var(--space-3)) / 12 + var(--space-3))
  );
}

.p-ex__grid--guides.p-ex__grid--loose {
  background-image: repeating-linear-gradient(
    to right,
    var(--accent-soft) 0 calc((100% - 11 * var(--space-6)) / 12),
    transparent calc((100% - 11 * var(--space-6)) / 12) calc((100% - 11 * var(--space-6)) / 12 + var(--space-6))
  );
}

.p-ex__grid > * {
  min-width: 0;
}

.p-ex__span-3 {
  grid-column: span 3;
}

.p-ex__span-4 {
  grid-column: span 4;
}

.p-ex__span-6 {
  grid-column: span 6;
}

.p-ex__span-8 {
  grid-column: span 8;
}

.p-ex__span-12 {
  grid-column: span 12;
}

/* Box: a plain block for layout and proportion demos. */

.p-ex__box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  min-height: 3rem;
  padding: var(--space-3);
  background-color: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius-md);
}

/* The two proportion boxes take a fixed share of the line, so a ratio box never shrinks to its content. */
.p-ex__box--golden,
.p-ex__box--thirds {
  inline-size: min(100%, 20rem);
}

/* Golden ratio: the box is 1.618 by 1, and two children split the width 61.8 to 38.2. */
.p-ex__box--golden {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  aspect-ratio: 1.618 / 1;
}

/* Rule of thirds: the box is 3 by 2, with guides on the third lines. Children fill a 3 x 3 grid. */
.p-ex__box--thirds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  aspect-ratio: 3 / 2;
  background-image:
    linear-gradient(to right, transparent calc(33.333% - 1px), var(--border-strong) calc(33.333% - 1px) 33.333%, transparent 33.333% calc(66.667% - 1px), var(--border-strong) calc(66.667% - 1px) 66.667%, transparent 66.667%),
    linear-gradient(to bottom, transparent calc(33.333% - 1px), var(--border-strong) calc(33.333% - 1px) 33.333%, transparent 33.333% calc(66.667% - 1px), var(--border-strong) calc(66.667% - 1px) 66.667%, transparent 66.667%);
}

.p-ex__box--raised {
  border: 1px solid var(--border);
  box-shadow: 0 0.5rem 1.25rem var(--bg-sunken);
}

@supports (color: color-mix(in oklab, currentColor 50%, transparent)) {
  .p-ex__box--raised {
    box-shadow: 0 0.5rem 1.25rem color-mix(in oklab, var(--text) 28%, transparent);
  }

  [data-mode="dark"] .p-ex__box--raised {
    box-shadow: 0 0.5rem 1.5rem color-mix(in oklab, var(--bg-sunken) 85%, transparent);
  }
}

@supports (color: oklch(from currentColor l c h)) {
  [data-mode="dark"] .p-ex__box--raised {
    box-shadow: 0 0.5rem 1.5rem oklch(from var(--bg-base) calc(l * 0.3) c h / 0.9);
  }
}

.p-ex__box--outlined {
  background-color: transparent;
  border: 2px solid var(--border-strong);
}

/* Shape: a 3rem square filled with --accent. A fill class changes the color. */

.p-ex__shape {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  font-size: var(--text-xs);
  line-height: 1;
  text-align: center;
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.p-ex__shape--sm {
  width: 1.5rem;
  height: 1.5rem;
}

.p-ex__shape--lg {
  width: 6rem;
  height: 6rem;
}

.p-ex__shape--circle {
  border-radius: 50%;
}

.p-ex__shape--rounded {
  border-radius: 22%;
}

.p-ex__shape--diamond {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.p-ex__shape--pill {
  width: 6rem;
  border-radius: 999px;
}

.p-ex__shape--pill.p-ex__shape--sm {
  width: 3rem;
}

.p-ex__shape--pill.p-ex__shape--lg {
  width: 12rem;
}

.p-ex__shape--blob {
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
}

/* Rule: a line. Use it on <hr> or on an empty <div>. */

.p-ex__rule {
  flex: none;
  inline-size: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--border-strong);
  color: var(--border-strong);
}

.p-ex__rule--thick {
  border-block-start-width: 6px;
}

.p-ex__rule--dashed {
  border-block-start-style: dashed;
  border-block-start-width: 2px;
}

.p-ex__rule--diagonal {
  height: 4rem;
  border: 0;
  background-image: linear-gradient(
    to bottom right,
    transparent calc(50% - 1px),
    var(--border-strong) calc(50% - 1px) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.p-ex__rule--curved {
  height: 2.5rem;
  border: 0;
  border-block-end: 2px solid var(--border-strong);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* Tilt: a small static rotation. */

.p-ex__tilt--left {
  rotate: -3deg;
}

.p-ex__tilt--right {
  rotate: 3deg;
}

/* Type: one line or block of text at a scale step. Sizes come from the theme scale. */

.p-ex__type {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.p-ex__type--sm {
  font-size: var(--text-sm);
}

.p-ex__type--lg {
  font-size: var(--text-lg);
}

.p-ex__type--xl {
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}

.p-ex__type--2xl {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

.p-ex__type--3xl {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
}

.p-ex__type--bold {
  font-weight: var(--weight-bold);
}

.p-ex__type--upper {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* Generic families: a theme gives no serif or sans token, so these use the system faces. */
.p-ex__type--serif {
  font-family: ui-serif, serif;
}

.p-ex__type--sans {
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.p-ex__type--mono {
  font-family: var(--font-mono);
}

.p-ex__type--tight {
  line-height: var(--leading-tight);
}

.p-ex__type--loose {
  line-height: var(--leading-loose);
}

.p-ex__type--accent {
  color: var(--accent);
}

.p-ex__type--muted {
  color: var(--text-muted);
}

/* Centered text: each line starts at a different position. */
.p-ex__type--center {
  text-align: center;
}

/* Script face: a decorative script for the "don't" pane of a hard-to-read
   font example. The stack uses system faces only, and ends at cursive. */
.p-ex__type--script {
  font-family: "Brush Script MT", "Segoe Script", "Apple Chancery", cursive;
  font-style: italic;
}

/* Tracking: wide or tight letter spacing with no case change. */
.p-ex__type--tracked {
  letter-spacing: var(--tracking-wide);
}

.p-ex__type--cramped {
  letter-spacing: var(--tracking-tight);
}

/* A second serif face, different from p-ex__type--serif, for the "don't"
   pane of a two-serif example. The stack uses system faces only. */
.p-ex__type--serif-alt {
  font-family: Georgia, "Times New Roman", serif;
}

/* Measure and white space */

.p-ex__prose--narrow {
  max-width: 35ch;
}

/* Isolate: one item with wide white space around it, centered in a column. */
.p-ex__isolate {
  align-self: center;
  margin: var(--space-6);
}

/* Texture: a pattern over the fill of the same element. The pattern uses the text color. */

.p-ex__texture--dots {
  background-image: radial-gradient(circle, var(--border-strong) 1px, transparent 1.5px);
  background-size: 8px 8px;
}

.p-ex__texture--lines {
  background-image: repeating-linear-gradient(45deg, var(--border-strong) 0 1px, transparent 1px 7px);
}

.p-ex__texture--noise {
  background-image:
    radial-gradient(circle, var(--border-strong) 0.6px, transparent 1px),
    radial-gradient(circle, var(--border-strong) 0.5px, transparent 1px),
    radial-gradient(circle, var(--border-strong) 0.7px, transparent 1.2px);
  background-size: 5px 7px, 11px 13px, 17px 19px;
  background-position: 0 0, 3px 5px, 9px 2px;
}

@supports (color: color-mix(in oklab, currentColor 50%, transparent)) {
  .p-ex__texture--dots {
    background-image: radial-gradient(circle, color-mix(in oklab, currentColor 35%, transparent) 1px, transparent 1.5px);
  }

  .p-ex__texture--lines {
    background-image: repeating-linear-gradient(45deg, color-mix(in oklab, currentColor 30%, transparent) 0 1px, transparent 1px 7px);
  }

  .p-ex__texture--noise {
    background-image:
      radial-gradient(circle, color-mix(in oklab, currentColor 40%, transparent) 0.6px, transparent 1px),
      radial-gradient(circle, color-mix(in oklab, currentColor 30%, transparent) 0.5px, transparent 1px),
      radial-gradient(circle, color-mix(in oklab, currentColor 45%, transparent) 0.7px, transparent 1.2px);
  }
}

/* Fills: background and readable text for a shape, a box or any other element. */

/* Fills. The first block is the fallback: plain tokens, for a browser with no color-mix()
   and no relative color syntax. The two @supports blocks below replace it. */

.p-ex__fill--accent {
  background-color: var(--accent);
  color: var(--text-on-accent);
}

.p-ex__fill--accent-soft {
  background-color: var(--accent-soft);
  color: var(--text);
}

.p-ex__fill--muted {
  background-color: var(--text-muted);
  color: var(--bg-base);
}

.p-ex__fill--success {
  background-color: var(--success);
  color: var(--bg-base);
}

.p-ex__fill--warning {
  background-color: var(--warning);
  color: var(--bg-base);
}

.p-ex__fill--danger {
  background-color: var(--danger);
  color: var(--bg-base);
}

.p-ex__fill--info {
  background-color: var(--info);
  color: var(--bg-base);
}

.p-ex__fill--tint-1 {
  background-color: var(--accent-soft);
  color: var(--text);
}

.p-ex__fill--tint-2 {
  background-color: var(--accent-soft);
  color: var(--text);
}

.p-ex__fill--shade-1 {
  background-color: var(--accent-hover);
  color: var(--text-on-accent);
}

.p-ex__fill--shade-2 {
  background-color: var(--accent-hover);
  color: var(--text-on-accent);
}

.p-ex__fill--comp {
  background-color: var(--info);
  color: var(--bg-base);
}

.p-ex__fill--triad-1 {
  background-color: var(--success);
  color: var(--bg-base);
}

.p-ex__fill--triad-2 {
  background-color: var(--warning);
  color: var(--bg-base);
}

.p-ex__fill--analog-1 {
  background-color: var(--accent-hover);
  color: var(--text-on-accent);
}

.p-ex__fill--analog-2 {
  background-color: var(--info);
  color: var(--bg-base);
}

.p-ex__fill--warm {
  background-color: var(--warning);
  color: var(--bg-base);
}

.p-ex__fill--cool {
  background-color: var(--info);
  color: var(--bg-base);
}

.p-ex__fill--desaturated {
  background-color: var(--text-muted);
  color: var(--bg-base);
}

@supports (color: color-mix(in oklab, currentColor 50%, transparent)) {
  .p-ex__fill--tint-1 {
    background-color: color-mix(in oklab, var(--accent) 60%, var(--bg-base));
  }

  [data-mode="dark"] .p-ex__fill--tint-1 {
    background-color: color-mix(in oklab, var(--accent) 60%, var(--text));
  }

  .p-ex__fill--tint-2 {
    background-color: color-mix(in oklab, var(--accent) 30%, var(--bg-base));
  }

  [data-mode="dark"] .p-ex__fill--tint-2 {
    background-color: color-mix(in oklab, var(--accent) 30%, var(--text));
  }

  .p-ex__fill--shade-1 {
    background-color: color-mix(in oklab, var(--accent) 65%, var(--text));
  }

  [data-mode="dark"] .p-ex__fill--shade-1 {
    background-color: color-mix(in oklab, var(--accent) 65%, var(--bg-base));
  }

  .p-ex__fill--shade-2 {
    background-color: color-mix(in oklab, var(--accent) 35%, var(--text));
  }

  [data-mode="dark"] .p-ex__fill--shade-2 {
    background-color: color-mix(in oklab, var(--accent) 35%, var(--bg-base));
  }

  .p-ex__fill--desaturated {
    background-color: color-mix(in oklab, var(--accent) 30%, var(--text-muted));
  }

}

/* Relative color syntax: hue and lightness come from --accent, so each scheme follows the
   theme. The text color is black or white from the lightness of the fill. --accent-soft is a
   translucent wash, so its text stays --text. */
@supports (color: oklch(from currentColor l c h)) {
  .p-ex__fill--accent {
    color: oklch(from var(--accent) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--muted {
    color: oklch(from var(--text-muted) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--success {
    color: oklch(from var(--success) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--warning {
    color: oklch(from var(--warning) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--danger {
    color: oklch(from var(--danger) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--info {
    color: oklch(from var(--info) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--tint-1,
  [data-mode="dark"] .p-ex__fill--tint-1 {
    background-color: oklch(from var(--accent) calc(l + (1 - l) * 0.4) calc(c * 0.75) h);
    color: oklch(from oklch(from var(--accent) calc(l + (1 - l) * 0.4) calc(c * 0.75) h) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--tint-2,
  [data-mode="dark"] .p-ex__fill--tint-2 {
    background-color: oklch(from var(--accent) calc(l + (1 - l) * 0.7) calc(c * 0.45) h);
    color: oklch(from oklch(from var(--accent) calc(l + (1 - l) * 0.7) calc(c * 0.45) h) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--shade-1,
  [data-mode="dark"] .p-ex__fill--shade-1 {
    background-color: oklch(from var(--accent) calc(l * 0.72) c h);
    color: oklch(from oklch(from var(--accent) calc(l * 0.72) c h) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--shade-2,
  [data-mode="dark"] .p-ex__fill--shade-2 {
    background-color: oklch(from var(--accent) calc(l * 0.48) calc(c * 0.8) h);
    color: oklch(from oklch(from var(--accent) calc(l * 0.48) calc(c * 0.8) h) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--comp {
    background-color: oklch(from var(--accent) l max(c, 0.1) calc(h + 180));
    color: oklch(from oklch(from var(--accent) l max(c, 0.1) calc(h + 180)) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--triad-1 {
    background-color: oklch(from var(--accent) l max(c, 0.1) calc(h + 120));
    color: oklch(from oklch(from var(--accent) l max(c, 0.1) calc(h + 120)) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--triad-2 {
    background-color: oklch(from var(--accent) l max(c, 0.1) calc(h + 240));
    color: oklch(from oklch(from var(--accent) l max(c, 0.1) calc(h + 240)) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--analog-1 {
    background-color: oklch(from var(--accent) l max(c, 0.1) calc(h + 30));
    color: oklch(from oklch(from var(--accent) l max(c, 0.1) calc(h + 30)) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--analog-2 {
    background-color: oklch(from var(--accent) l max(c, 0.1) calc(h + 330));
    color: oklch(from oklch(from var(--accent) l max(c, 0.1) calc(h + 330)) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--warm {
    background-color: oklch(from var(--accent) l max(c, 0.12) 55);
    color: oklch(from oklch(from var(--accent) l max(c, 0.12) 55) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--cool {
    background-color: oklch(from var(--accent) l max(c, 0.12) 250);
    color: oklch(from oklch(from var(--accent) l max(c, 0.12) 250) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

  .p-ex__fill--desaturated {
    background-color: oklch(from var(--accent) l calc(c * 0.2) h);
    color: oklch(from oklch(from var(--accent) l calc(c * 0.2) h) clamp(0, (0.66 - l) * 1000, 1) 0 0 / 1);
  }

}

@media (prefers-reduced-motion: reduce) {
  .p-ex__tilt--left,
  .p-ex__tilt--right {
    transition: none;
  }
}

@media (forced-colors: active) {
  .p-ex__shape,
  .p-ex__box,
  [class*="p-ex__fill--"] {
    forced-color-adjust: none;
  }

  .p-ex__rule,
  .p-ex__box--outlined {
    border-color: CanvasText;
  }
}

/* --------------------------------------------------------------------------
   P.2 · Frame utilities, added set (CONTRACT §11.6)
   Column gap and text-block modifiers for type and spacing examples.
   Same rules as P.2: no new token, nothing moves, no pack styles them.
   -------------------------------------------------------------------------- */

/* --space-5 next to a 40px input is 60 percent of the input height. */
.p-ex__col--medium {
  gap: var(--space-5);
}

/* Solid text: no added line space, and a paragraph gap that is not a
   multiple of the line height, so the text has no baseline rhythm. */
.p-ex__prose--solid {
  line-height: 1;
}

.p-ex__prose--solid > * + * {
  margin-block-start: 0.4em;
}

/* Justified text with no hyphenation: rivers show in a narrow column. */
.p-ex__prose--justify {
  text-align: justify;
  hyphens: none;
}

/* A small x-height at the same font size: a serif face with its x-height
   set to 0.4 of the font size. */
.p-ex__prose--small-x {
  font-family: "Garamond", "EB Garamond", "Times New Roman", "Liberation Serif", serif;
  font-size-adjust: ex-height 0.4;
}

/* Old-style numerals. If the face has no onum feature, the numerals do not change. */
.p-ex__prose--oldstyle {
  font-variant-numeric: oldstyle-nums;
}

/* No kerning: the face draws each letter pair with its default space. */
.p-ex__prose--nokern {
  font-kerning: none;
  font-feature-settings: "kern" 0;
}

/* Root-2 sheet: the box is 1.414 by 1. Two children split the width 50 to
   50, so each half is a root-2 sheet again (1 by 1.414). No gap and no
   padding, so the ratio stays exact; a dashed line marks the cut. */
.p-ex__box--root2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  inline-size: min(100%, 20rem);
  aspect-ratio: 1.414 / 1;
}

.p-ex__box--root2 > * + * {
  border-inline-start: 2px dashed var(--border-strong);
}

/* QA sweep rules (browser QA of all examples at 1100px).
   1. A stage is at least 2.5rem high, so a one-line example does not
      collapse to a thin strip.
   2. A canvas stage keeps its 16:10 shape as a minimum. If the content is
      taller, the canvas grows and does not cut the content. The pane is a
      size container, so the minimum height is 62.5cqi (10/16 of the width).
      The fold stage still cuts the content: that is its job. */
.p-ex__stage {
  min-height: 2.5rem;
}

:is(.p-ex__do, .p-ex__dont):has(> .p-ex__stage--canvas) {
  container-type: inline-size;
}

.p-ex__stage--canvas {
  aspect-ratio: auto;
  min-height: 62.5cqi;
  overflow: clip;
  justify-content: safe center;
}

/* 3. A navbar is wide content. Its link row scrolls and hides links in a
      half-width pane, so an example with a navbar stacks its panes, as
      p-ex--stack does. */
.p-ex:has(> .p-ex__do .c-navbar__links, > .p-ex__dont .c-navbar__links) {
  grid-template-columns: minmax(0, 1fr);
}

/* 4. A plain link (an a element with no class) in an example uses the
      theme accent. The browser blue has too little contrast on a dark
      theme. Zero specificity, so a component link rule wins. */
.p-ex :where(a:not([class])) {
  color: var(--accent);
}

/* 5. A turned element (p-ex__tilt, c-card--tilt) moves out of its box by
      some pixels at each end. The stage adds padding on all sides, so the
      turn does not cover the label or the caption and does not make the
      stage scroll. */
.p-ex__stage:has(.p-ex__tilt--left, .p-ex__tilt--right, .c-card--tilt) {
  padding-block: var(--space-5);
  padding-inline: var(--space-2);
}

/* 6. An open tooltip bubble and an open tag popup are absolute, so they add
      no height to the stage. The stage gets the room, or the bubble or the
      popup covers the caption. */
.p-ex__stage:has(.c-tooltip.is-open) {
  padding-block: 4.5rem;
}

.p-ex__stage:has(.c-tags.is-open) {
  min-height: 18rem;
}

/* 7. An open modal is absolute and fills the stage. If the stage is short,
      the modal body scrolls and hides fields. The stage gets a minimum
      height for the modal panel. */
.p-ex__stage:has(> .c-modal.is-open) {
  min-height: 36rem;
}