/* Generated from apps/dev-site/design-system. Edit the token sources. */
/* Mpalo Design System components.

   The one place these components are styled. Pages and legacy stylesheets
   must not restyle them; if a component looks wrong somewhere, fix it here or
   fix the surface it sits on. Recreated from the handoff components
   (Button, Card, Tabs, Toggle, Input, Table) as plain CSS on existing class
   names, so markup across Mind, welcome, dev, api and main keeps working.

   Surface steps. A component fills one step above the container it sits on,
   hovers one more, and shows selection one more again. Containers say which
   step they are with .ds-surface-N; everything inside reads --ds-fill,
   --ds-fill-hover and --ds-fill-selected, so nothing hard-codes a level. The
   page itself is step 1. */

:root,
.ds-surface-1 { --ds-fill: var(--surface-2); --ds-fill-hover: var(--surface-3); --ds-fill-selected: var(--surface-4); }
.ds-surface-2 { --ds-fill: var(--surface-3); --ds-fill-hover: var(--surface-4); --ds-fill-selected: var(--surface-5); }
.ds-surface-3 { --ds-fill: var(--surface-4); --ds-fill-hover: var(--surface-5); --ds-fill-selected: var(--surface-6); }
.ds-surface-4 { --ds-fill: var(--surface-5); --ds-fill-hover: var(--surface-6); --ds-fill-selected: var(--surface-7); }
.ds-surface-5 { --ds-fill: var(--surface-6); --ds-fill-hover: var(--surface-7); --ds-fill-selected: var(--surface-7); }

/* A surface class is an explicit authoring choice (it replaced inline
   background styles), so it outranks contextual legacy paint. */
.ds-surface-1 { background-color: var(--surface-1) !important; }
.ds-surface-2 { background-color: var(--surface-2) !important; }
.ds-surface-3 { background-color: var(--surface-3) !important; }
.ds-surface-4 { background-color: var(--surface-4) !important; }
.ds-surface-5 { background-color: var(--surface-5) !important; }

/* No divider rules: an <hr> keeps its spacing and draws nothing. */
hr { border: 0; height: 0; }

/* ---------------------------------------------------------------- Button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-within);
  min-height: 2.5rem;
  padding: 0.625rem 1.125rem;
  border: 0;
  border-radius: var(--radius);
  background-color: var(--ds-fill);
  color: var(--text-1);
  font-family: var(--surface-font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-body);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}
.btn:hover { background-color: var(--ds-fill-hover); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Neutral variants share the base. .btn-on-tertiary predates surface steps;
   the container's .ds-surface-N now places the button. */
.btn-secondary, .btn-neutral, .btn-on-tertiary { background-color: var(--ds-fill); color: var(--text-1); }
.btn-secondary:hover, .btn-neutral:hover, .btn-on-tertiary:hover { background-color: var(--ds-fill-hover); }

.btn-primary { background-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background-color: var(--accent-hover); color: var(--on-accent); }
.btn-success { background-color: var(--green); color: var(--on-green); }
.btn-success:hover { background-color: var(--green-hover); }
.btn-warning { background-color: var(--yellow); color: var(--on-yellow); }
.btn-warning:hover { background-color: var(--yellow-hover); }
.btn-danger, .btn-danger-sm { background-color: var(--red); color: var(--on-red); }
.btn-danger:hover, .btn-danger-sm:hover { background-color: var(--red-hover); }

/* No surface at all: text actions inside rows. Hover underlines, never fills. */
.btn-quiet, .btn-ghost, .btn-quiet-danger { background-color: transparent; color: var(--text-1); }
.btn-quiet-danger { color: var(--red); }
.btn-quiet:hover, .btn-ghost:hover, .btn-quiet-danger:hover,
.btn-ghost.active, .btn-ghost.is-selected {
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.btn-quiet-danger:hover { color: var(--red-hover); }

.btn-sm, .btn-secondary-sm, .btn-danger-sm { min-height: 2rem; padding: 0.375rem 0.75rem; font-size: var(--fs-xs); }
.btn-secondary-sm { background-color: var(--ds-fill); color: var(--text-1); }
.btn-secondary-sm:hover { background-color: var(--ds-fill-hover); }
.btn-lg { min-height: 3rem; padding: 0.875rem 1.5rem; font-size: var(--fs-base); }

/* Disabled: a solid step, muted text, no hover response. */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  background-color: var(--ds-fill);
  color: var(--text-muted);
  cursor: not-allowed;
  text-decoration: none;
}
.btn-quiet:disabled, .btn-ghost:disabled, .btn-quiet-danger:disabled { background-color: transparent; }

/* Pending: async work in flight. The label stays put; a spinner follows it. */
@keyframes ds-spin { to { transform: rotate(360deg); } }
.btn[data-pending] { cursor: progress; pointer-events: none; position: relative; }
.btn[data-pending]::after {
  content: "";
  flex: none;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: conic-gradient(currentColor 0 75%, transparent 75% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: ds-spin 0.6s linear infinite;
}
[data-pending]:not(.btn) { cursor: progress; pointer-events: none; }

/* -------------------------------------------------------- Selectable card
   Provider pickers (memory storages, external LLMs, custom connections) and
   connection rows. Card = container +1, hover +1, selected +2. No border, no
   accent bar, no lift. */

.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-within);
}
@media (max-width: 1100px) { .provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .provider-grid { grid-template-columns: minmax(0, 1fr); } }

.provider-card,
.api-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  min-width: 0;
  padding: 1rem 1.125rem;
  border: 0;
  border-radius: var(--radius);
  background-color: var(--ds-fill);
  color: var(--text-1);
  font-family: var(--surface-font-body);
  letter-spacing: var(--ls-body);
  text-align: left;
  transition: background-color var(--dur-fast) linear;
}
.provider-card { cursor: pointer; min-height: 6rem; }
.provider-card:hover, .api-item:hover { background-color: var(--ds-fill-hover); }

/* A connection row stacks its header and details, rather than centering them
   on one line like a provider chip. */
.api-item--stack {
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-within);
}
.provider-card.is-selected, .provider-card.selected,
.provider-card[aria-selected="true"], .provider-card[data-selected="true"] { background-color: var(--ds-fill-selected); }
.provider-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.provider-card.is-error { outline: 2px solid var(--red); outline-offset: 2px; }

/* Logo slot: sizes and centres the provider mark. It has no fill of its
   own; the logo sits directly on the card. */
.provider-logo-tile {
  display: grid;
  place-items: center;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
}
.provider-logo { width: 1.5rem; height: 1.5rem; object-fit: contain; }
.provider-logo-small { width: 1.25rem; height: 1.25rem; }

.provider-info { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0.25rem; }
.provider-title { font-size: var(--fs-base); line-height: 1.3; color: var(--text-1); }
.provider-subtitle { font-size: var(--fs-sm); color: var(--text-2); }
.provider-desc { font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); }

/* Engine cards carry a details grid, so they stack instead of running in a row. */
.provider-card[data-engine] { flex-direction: column; align-items: stretch; text-align: center; }
.provider-card[data-engine] .provider-info { align-items: center; }

/* ------------------------------------------------------------------ Tabs
   View switcher. Deliberately not a button: no fill. Tabs are text set apart
   by thin separators that mark where one view ends and the next begins; the
   active tab takes full text colour and a 2px accent bar beneath it. The
   separators and bar are drawn shapes, not borders. */

.tab-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-within);
  padding: 0 0.25rem 0.75rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--surface-font-body);
  font-size: var(--fs-base);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) linear;
}
.tab-link + .tab-link { margin-left: 1.5rem; padding-left: 1.5rem; }
.tab-link + .tab-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  height: 1em;
  width: 1px;
  background-color: var(--ds-fill-selected);
}
.tab-link:hover { background: none; color: var(--text-1); }
.tab-link.active, .tab-link[aria-selected="true"] { background: none; color: var(--text-1); }
.tab-link.active::after, .tab-link[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  bottom: 0;
  left: 0.25rem;
  height: 2px;
  background-color: var(--accent);
}
.tab-link + .tab-link.active::after, .tab-link + .tab-link[aria-selected="true"]::after { left: 1.5rem; }
.tab-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- Toggle
   Markup: <label class="switch"><input type="checkbox"><span class="slider">.
   Track and knob take the standard radius (knob concentric), never a pill.
   Off = container +2, on = accent. The input stays focusable. */

.switch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 40px;
  height: 24px;
}
.switch input {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.slider {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background-color: var(--ds-fill-hover);
  transition: background-color var(--dur-fast) linear;
}
.slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: max(0px, calc(var(--radius) - 3px));
  background-color: var(--on-accent);
  transition: transform var(--dur-base) linear;
}
.switch:hover .slider { background-color: var(--ds-fill-selected); }
.switch input:checked + .slider { background-color: var(--accent); }
.switch:hover input:checked + .slider { background-color: var(--accent-hover); }
.switch input:checked + .slider::before { transform: translateX(16px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .slider { background-color: var(--ds-fill); }
.switch input:disabled + .slider::before { background-color: var(--text-muted); }

/* ----------------------------------------------------------------- Field */

.form-input {
  width: 100%;
  min-height: var(--field-h);
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: var(--radius);
  background-color: var(--ds-fill);
  color: var(--text-1);
  font-family: var(--surface-font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-body);
  transition: background-color var(--dur-fast) linear;
}
.form-input:hover:not(:focus):not(:disabled) { background-color: var(--ds-fill-hover); }
.form-input:focus, .form-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.form-input::placeholder { color: var(--text-muted); opacity: 1; }
.form-input:disabled { color: var(--text-muted); cursor: not-allowed; }
.form-input.error, .form-input.is-error, .form-input[aria-invalid="true"] { outline: 2px solid var(--red); outline-offset: 0; }

.form-input-sm {
  min-height: var(--field-h-sm);
  padding: 0.5rem 0.625rem;
  line-height: 1.25rem;
}
select.form-input {
  appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23888'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 1.25rem;
  cursor: pointer;
}
textarea.form-input { resize: vertical; }

/* Grouping by proximity: actions sit together, no divider line above them. */
.form-navigation-buttons {
  display: flex;
  gap: var(--gap-within);
  margin-top: var(--sp-6);
}

/* ---------------------------------------------------------------- Specimens
   Live examples for the developer reference. They use the same tokens and
   component behavior as the surfaces, so the page is the demonstration. */

.ds-specimen { margin: var(--gap-between) 0; }
.ds-specimen-caption {
  display: block;
  margin-bottom: var(--gap-within);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-body);
}

.ds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--gap-within);
}
.ds-swatch-tile {
  display: block;
  min-height: 3.25rem;
  border-radius: var(--radius);
  background: var(--swatch);
}
.ds-swatch-name {
  display: block;
  margin-top: 0.375rem;
  color: var(--text-1);
  font-size: var(--fs-xs);
}
.ds-swatch-value {
  display: block;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.ds-swatch-value code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}
.ds-swatch-text-1 { --swatch: var(--text-1); }
.ds-swatch-text-2 { --swatch: var(--text-2); }
.ds-swatch-muted { --swatch: var(--text-muted); }
.ds-swatch-accent { --swatch: var(--accent); }
.ds-swatch-green { --swatch: var(--green); }
.ds-swatch-yellow { --swatch: var(--yellow); }
.ds-swatch-orange { --swatch: var(--orange); }
.ds-swatch-red { --swatch: var(--red); }
.ds-swatch-purple { --swatch: var(--purple); }
.ds-swatch-blue { --swatch: var(--blue); }
.ds-swatch-focus { --swatch: var(--focus); }

.ds-ramp {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 1px;
  margin: var(--gap-within) 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--text-muted);
}
.ds-ramp-step {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 4.5rem;
  padding: var(--sp-2);
  background: var(--step);
  color: var(--text-1);
}
.ds-ramp-step code {
  background: transparent;
  padding: 0;
  font-size: var(--fs-xs);
  color: inherit;
}
.ds-ramp-0 { --step: var(--surface-0); }
.ds-ramp-1 { --step: var(--surface-1); }
.ds-ramp-2 { --step: var(--surface-2); }
.ds-ramp-3 { --step: var(--surface-3); }
.ds-ramp-4 { --step: var(--surface-4); }
.ds-ramp-5 { --step: var(--surface-5); }
.ds-ramp-6 { --step: var(--surface-6); }
.ds-ramp-7 { --step: var(--surface-7); }

.ds-type-row {
  display: flex;
  align-items: baseline;
  gap: var(--gap-between);
  padding: var(--sp-2) 0;
}
.ds-type-meta {
  flex: 0 0 8.5rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.ds-type-sample {
  color: var(--text-1);
  font-family: var(--surface-font-display);
  font-weight: 400;
  line-height: 1.1;
}
.ds-type-body { font-family: var(--surface-font-body); }
.ds-fs-xs { font-size: var(--fs-xs); }
.ds-fs-sm { font-size: var(--fs-sm); }
.ds-fs-base { font-size: var(--fs-base); }
.ds-fs-lg { font-size: var(--fs-lg); }
.ds-fs-xl { font-size: var(--fs-xl); }
.ds-fs-2xl { font-size: var(--fs-2xl); }
.ds-fs-3xl { font-size: var(--fs-3xl); }
.ds-fs-4xl { font-size: var(--fs-4xl); }
.ds-fs-5xl { font-size: var(--fs-5xl); }

.ds-space-row {
  display: flex;
  align-items: center;
  gap: var(--gap-within);
}
.ds-space-label {
  flex: 0 0 4.5rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}
.ds-space-bar {
  height: 12px;
  border-radius: var(--radius);
  background: var(--accent);
}
.ds-space-value {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.ds-group-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap-between);
}
.ds-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-within);
}

.ds-radius-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-between);
}
.ds-radius-box {
  width: 8rem;
  height: 5rem;
  border-radius: var(--radius);
  background: var(--surface-3);
}
.ds-radius-nest {
  padding: 8px;
  border-radius: var(--radius);
  background: var(--surface-3);
}
.ds-radius-inner {
  width: 6rem;
  height: 3rem;
  border-radius: max(0px, calc(var(--radius) - 8px));
  background: var(--surface-4);
}
.ds-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--purple);
  color: var(--on-purple);
  font-family: var(--surface-font-body);
  font-size: 1.2rem;
  letter-spacing: 0;
}
.ds-focus-demo {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.ds-demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-within);
}
.ds-demo-field { width: min(100%, 16rem); }

.ds-badge {
  display: inline-block;
  padding: 2px 8px 4px;
  border-radius: var(--radius);
  background: var(--badge);
  color: var(--on-badge);
  font-family: var(--surface-font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-body);
}
.ds-badge-accent { --badge: var(--accent); --on-badge: var(--on-accent); }
.ds-badge-green { --badge: var(--green); --on-badge: var(--on-green); }
.ds-badge-yellow { --badge: var(--yellow); --on-badge: var(--on-yellow); }
.ds-badge-orange { --badge: var(--orange); --on-badge: var(--on-orange); }
.ds-badge-red { --badge: var(--red); --on-badge: var(--on-red); }
.ds-badge-purple { --badge: var(--purple); --on-badge: var(--on-purple); }
.ds-badge-blue { --badge: var(--blue); --on-badge: var(--on-blue); }

.ds-card {
  padding: var(--sp-5);
  border-radius: var(--radius);
  color: var(--text-1);
}
.ds-card-title {
  margin: 0 0 var(--gap-within);
  font-family: var(--surface-font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
}

.ds-codeblock {
  padding: 8px 8px 14px 16px;
  border-radius: var(--radius);
  color: var(--text-1);
}
.ds-codeblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-within);
  min-height: 32px;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.ds-codeblock pre {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}
.ds-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ds-fill);
  color: var(--text-1);
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}
.ds-copy:hover { background: var(--ds-fill-hover); }
.ds-copy.is-copied { background: var(--green); color: var(--on-green); }
.ds-copy .ds-copy-check { display: none; }
.ds-copy.is-copied .ds-copy-copy { display: none; }
.ds-copy.is-copied .ds-copy-check { display: block; }

.ds-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 1px;
}
.ds-table th {
  padding: 0 14px 8px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
  text-align: left;
}
.ds-table td {
  padding: 12px 14px;
  background: var(--surface-3);
  color: var(--text-1);
  font-size: var(--fs-sm);
}
.ds-table tbody tr:hover td { background: var(--surface-4); }
.ds-table tbody tr td:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.ds-table tbody tr td:last-child { border-radius: 0 var(--radius) var(--radius) 0; }

.ds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}
.ds-empty img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.ds-empty h3 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--surface-font-display);
  font-size: 22px;
  font-weight: 400;
}
.ds-empty p {
  margin: 0;
  max-width: 360px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius);
  background: var(--surface-3);
  color: var(--text-1);
  font-family: var(--surface-font-body);
  font-size: 13px;
}
.ds-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: max(0px, calc(var(--radius) - 3px));
  background: var(--surface-4);
  color: var(--text-2);
  cursor: pointer;
}
.ds-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-4) 50%, var(--surface-3) 75%);
  background-size: 200% 100%;
  animation: mpalo-shimmer 1.4s linear infinite;
}

.ds-menu {
  width: 14rem;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--surface-4);
  box-shadow: var(--shadow-overlay);
}
.ds-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: max(0px, calc(var(--radius) - 4px));
  color: var(--text-1);
  font-size: 15px;
}
.ds-menu-item:hover { background: var(--surface-5); }
.ds-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 20rem;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-4);
  color: var(--text-1);
  box-shadow: var(--shadow-overlay);
}
.ds-toast-tone {
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--green);
}
.ds-tooltip {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius);
  background: var(--surface-7);
  color: var(--text-1);
  font-family: var(--surface-font-body);
  font-size: var(--fs-xs);
}

.ds-check {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-within);
  color: var(--text-1);
  font-size: var(--fs-sm);
}
.ds-check input {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: max(0px, calc(var(--radius) - 2px));
  background: var(--surface-3);
  cursor: pointer;
  appearance: none;
}
.ds-check input:checked { background: var(--accent); }
.ds-check input:checked::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--on-accent);
  -webkit-mask: url("../assets/icons/check.svg") center / contain no-repeat;
  mask: url("../assets/icons/check.svg") center / contain no-repeat;
}
.ds-segmented {
  display: inline-flex;
  gap: 1px;
  padding: 1px;
  border-radius: var(--radius);
  background: var(--surface-3);
}
.ds-segmented button {
  padding: 6px 12px;
  border: 0;
  border-radius: max(0px, calc(var(--radius) - 1px));
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.ds-segmented button.is-active { background: var(--surface-4); color: var(--text-1); }

.ds-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 8rem;
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface-3);
}
.ds-chart-bar {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  background: var(--accent);
}

.ds-asset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-between);
}
.ds-asset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}
.ds-asset img { max-width: 9rem; max-height: 3rem; }
.ds-icon-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-within);
}
.ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  background: var(--surface-3);
}
.ds-icon img { width: 1.25rem; height: 1.25rem; }
.ds-scribble { width: 9rem; height: 5rem; object-fit: contain; }

.ds-toast p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
}

/* Inline style attributes are blocked by the dev CSP; specimens use classes. */
.ds-space-1 { width: var(--sp-1); }
.ds-space-2 { width: var(--sp-2); }
.ds-space-3 { width: var(--sp-3); }
.ds-space-4 { width: var(--sp-4); }
.ds-space-5 { width: var(--sp-5); }
.ds-space-6 { width: var(--sp-6); }
.ds-space-8 { width: var(--sp-8); }
.ds-space-10 { width: var(--sp-10); }
.ds-space-12 { width: var(--sp-12); }
.ds-space-16 { width: var(--sp-16); }
.ds-skeleton-w-8 { width: 8rem; }
.ds-skeleton-w-5 { width: 5rem; }
.ds-demo-row-top { align-items: flex-start; }
.ds-chart-h-32 { height: 32%; }
.ds-chart-h-56 { height: 56%; }
.ds-chart-h-44 { height: 44%; }
.ds-chart-h-72 { height: 72%; }
.ds-chart-h-48 { height: 48%; }
.ds-chart-h-84 { height: 84%; }
.ds-chart-h-62 { height: 62%; }

@media (max-width: 640px) {
  .ds-type-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-within);
  }
  .ds-type-meta { flex: none; }
}

/* Additional shared patterns used by the Mind pilot. */
.ds-badge-neutral {
  --badge: var(--surface-3);
  --on-badge: var(--text-1);
}

.ds-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--radius);
  background: var(--ds-fill);
  color: var(--text-1);
  font-family: var(--surface-font-body);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) linear;
}
.ds-choice:hover { background: var(--ds-fill-hover); }
.ds-choice[data-selected="true"],
.ds-choice[aria-pressed="true"] { background: var(--ds-fill-selected); }
.ds-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ds-choice-title {
  font-size: var(--fs-sm);
  line-height: 1.3;
}
.ds-choice-desc {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.4;
}

.ds-skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-within);
}
.ds-skeleton-w-full { width: 100%; }
.ds-skeleton-w-3-4 { width: 75%; }
.ds-skeleton-w-1-2 { width: 50%; }
.ds-skeleton-w-1-4 { width: 25%; }

.ds-note-warning {
  padding: var(--sp-3);
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--on-yellow);
}