/* ------------ Design-system tokens the documented CSS refers to ------------ */
:root {
  --color-accent-200: color-mix(in srgb, var(--accent) 22%, var(--panel));
  /* 70% keeps 3:1 against the panel and under the ⋯ dots, in both color schemes. */
  --color-accent-300: color-mix(in srgb, var(--accent) 70%, var(--panel));
  --color-accent-500: var(--accent);
  --color-text: var(--ink);
  --spacing-3xs: 2px;
  /* Control boundaries need 3:1 (WCAG 1.4.11); --line is decorative only. */
  --control-line: var(--muted);
}

/* Button resets come first so the Reveal Button's own rules override them. */
.c-button {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--control-line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  max-inline-size: 100%;
  min-inline-size: 0;
  padding: 4px 10px;
}

.c-button:hover {
  background: var(--accent-soft);
}

.c-button[aria-disabled='true'] {
  color: var(--muted);
  cursor: not-allowed;
}

.c-button--reset {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
}

.c-button--reset:focus {
  border: 0;
}

.c-button--icon-only {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
}

.c-button--icon-only:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------ Truncation (styles/components/_truncation.css) ------------ */
.c-truncation {
  --c-truncation-focus-ring: 4px;

  align-items: center;
  animation: c-truncation-overflowing linear both;
  animation-timeline: --c-truncation;
  display: flex;
  flex: 0 1 auto;
  min-inline-size: 0;
  position: relative;
  timeline-scope: --c-truncation;
}

@keyframes c-truncation-overflowing {
  from,
  to {
    --c-truncation-overflowing: 1;
  }
}

.c-truncation__plain {
  min-inline-size: 0;
  overflow: hidden;
  scroll-timeline: --c-truncation inline;
  white-space: nowrap;
}

.c-truncation__overflow {
  align-items: center;
  column-gap: var(--spacing-3xs);
  display: none;
  min-inline-size: 0;
  padding-inline-end: var(--c-truncation-focus-ring);
}

.c-truncation__text {
  mask-image: linear-gradient(to left, transparent, #000 2.5ch);
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

/* Clips at its start: an end-aligned flex item that is too wide overflows toward the start. */
.c-truncation__text--start {
  display: flex;
  justify-content: flex-end;
  mask-image: linear-gradient(to right, transparent, #000 2.5ch);
}

.c-truncation__text--start > span {
  flex: none;
}

/* The last segment stays whole until the head is gone; past that it clips at its start. */
.c-truncation__text--whole {
  flex-shrink: 0;
  mask-image: none;
  max-inline-size: calc(100% - 1.375rem - var(--spacing-3xs) - var(--c-truncation-focus-ring));
}

/* The focus-ring budget follows the Reveal Button to wherever the cut is. */
.c-truncation--start .c-truncation__overflow {
  padding-inline: var(--c-truncation-focus-ring) 0;
}

.c-truncation--middle .c-truncation__overflow {
  padding-inline-end: 0;
}

/* A collapsed head still leaves room for the Reveal Button's focus ring. */
.c-truncation--middle .c-truncation__text:first-child {
  min-inline-size: calc(var(--c-truncation-focus-ring) - var(--spacing-3xs));
}

@container style(--c-truncation-overflowing: 1) {
  .c-truncation__plain {
    block-size: 0;
    inset-block-start: 0;
    inset-inline: 0;
    position: absolute;
    visibility: hidden;
  }

  .c-truncation__overflow {
    display: flex;
  }
}

.c-truncation__reveal {
  background-color: var(--color-accent-200);
  block-size: calc(1lh - 2 * var(--c-truncation-focus-ring));
  border: 1px solid var(--color-accent-300);
  border-radius: 2px;
  color: var(--color-text);
  flex: none;
  inline-size: 1.375rem;
}

.c-truncation__reveal:hover,
.c-truncation__reveal:focus,
.c-truncation__reveal:focus-visible {
  background-color: var(--color-accent-300);
  border: 1px solid var(--color-accent-500);
}

.c-truncation__reveal-icon {
  fill: currentcolor;
  inline-size: 0.75rem;
}

@supports not ((animation-timeline: --a) and (timeline-scope: --a)) {
  .c-truncation__plain {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}

.c-truncation-host {
  display: block;
  max-inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Native ellipsis at the start. The isolated inner span keeps a URL or path left to right. */
.c-truncation-host--start {
  direction: rtl;
  text-align: left;
}

.c-truncation-host--start > span {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ------------ Minimal design-system pieces the examples use ------------ */
.c-visually-hidden {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

.c-button__icon {
  block-size: 1em;
  fill: currentcolor;
  flex-shrink: 0;
  inline-size: 1em;
}

.c-button:focus-visible,
.c-select__trigger:focus-visible,
.c-profile-chip:focus-visible,
.c-link:focus-visible,
a.c-truncation-host:focus-visible,
.c-popup:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* File upload */
.c-file-upload {
  align-items: center;
  border: 1px solid var(--control-line);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  gap: 8px;
  max-inline-size: 100%;
  min-inline-size: 0;
  padding: 4px;
}

.c-file-upload:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.c-file-upload__button {
  background: var(--accent-soft);
  border-radius: 4px;
  flex: none;
  padding: 2px 8px;
}

.c-file-upload__name {
  color: var(--ink-2);
}

/* Select trigger and menu button */
.c-select,
.c-menu {
  max-inline-size: 100%;
  min-inline-size: 0;
  position: relative;
}

.c-select__trigger,
.c-profile-chip {
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--control-line);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 8px;
  inline-size: 100%;
  min-inline-size: 0;
  padding: 4px 10px;
  text-align: start;
}

.c-select__chevron {
  block-size: 1em;
  fill: currentcolor;
  flex-shrink: 0;
  inline-size: 1em;
  margin-inline-start: auto;
}

.c-popup {
  background: var(--panel);
  border: 1px solid var(--control-line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 15%);
  inset-inline-start: 0;
  list-style: none;
  margin: 4px 0 0;
  min-inline-size: 100%;
  padding: 4px;
  position: absolute;
  z-index: 10;
}

.c-popup [role='option'],
.c-popup [role='menuitem'] {
  border-radius: 4px;
  cursor: pointer;
  padding: 4px 8px;
}

.c-popup [role='option'][aria-selected='true'] {
  font-weight: 600;
}

.c-popup [role='menuitem'] {
  inline-size: 100%;
  text-align: start;
}

.c-popup .is-active,
.c-popup [role='menuitem']:focus {
  background: var(--accent-soft);
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.c-profile-chip__avatar {
  align-items: center;
  background: var(--accent-soft);
  border-radius: 50%;
  block-size: 2rem;
  color: var(--accent);
  display: inline-flex;
  flex: none;
  font-size: 0.75rem;
  inline-size: 2rem;
  justify-content: center;
}

.c-profile-chip__lines {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-inline-size: 0;
}

.c-profile-chip__lines > :last-child {
  color: var(--muted);
  font-size: 0.9em;
}

/* Table */
.c-table {
  background: var(--panel);
  border-collapse: collapse;
  inline-size: 100%;
  table-layout: fixed;
}

.c-table th,
.c-table__cell {
  border-top: 1px solid var(--line);
  overflow: hidden;
  padding: 6px 10px;
  text-align: start;
  vertical-align: top;
}

.c-table th {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.c-link {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

/* Title with identifier */
.c-title-with-id {
  align-items: center;
  display: flex;
  gap: 1ch;
  min-inline-size: 0;
}

.c-title-with-id__identifier {
  color: var(--muted);
  flex: none;
}

a.c-title-with-id {
  color: var(--accent);
}

/* Items summary */
.c-items-summary {
  /* The reused Reveal Button sizes itself from this budget, normally set by .c-truncation. */
  --c-truncation-focus-ring: 4px;

  align-items: center;
  display: flex;
  gap: 4px;
  min-inline-size: 0;
}

.c-items-summary__name {
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
}

.c-items-summary__count {
  color: var(--muted);
  flex: none;
}

/* Shared link in a message */
.c-message {
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
  padding: 10px 12px;
}

.c-message__text {
  margin: 0;
}

.c-message__link {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent);
  inline-size: fit-content;
  padding: 2px 12px;
}

/* Truncation position */
.c-position-list {
  align-items: center;
  display: grid;
  gap: 8px 12px;
  grid-template-columns: max-content minmax(0, 1fr);
  margin: 0;
}

.c-position-list dt {
  color: var(--muted);
}

.c-position-list dd {
  display: flex;
  margin: 0;
  min-inline-size: 0;
}

/* Name label */
.c-name-label {
  align-items: center;
  display: flex;
  gap: 1ch;
  min-inline-size: 0;
}

.c-name-label__copy {
  flex: none;
}

.c-name-label__name {
  align-items: center;
  display: flex;
  gap: 6px;
  min-inline-size: 0;
}

.c-name-label__avatar {
  align-items: center;
  background: var(--ok-soft);
  border-radius: 50%;
  block-size: 1.5rem;
  color: var(--ok);
  display: inline-flex;
  flex: none;
  font-size: 0.6875rem;
  inline-size: 1.5rem;
  justify-content: center;
}

/* Tooltip content */
.tippy-box {
  font-family: var(--body);
  overflow-wrap: anywhere;
}

/* ------------ Demo chrome ------------ */
.demo {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.demo__width {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.78125rem;
  gap: 8px;
}

.demo__width input {
  flex: 1;
  max-inline-size: 320px;
}

.demo__frame {
  border: 1px dashed var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-inline-size: 100%;
  min-inline-size: 6ch;
  overflow: hidden;
  padding: 10px;
  resize: horizontal;
}

.demo__row {
  align-items: center;
  display: flex;
  gap: 8px;
  min-inline-size: 0;
}

.demo__note {
  color: var(--muted);
  font-size: 0.78125rem;
}

.demo__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8125rem;
}

/* Simulated fallback: the same rules as `@supports not (…)`, applied by class. */
.is-simulated-fallback .c-truncation {
  animation: none;
}

.is-simulated-fallback .c-truncation__plain {
  overflow-wrap: anywhere;
  white-space: normal;
}