/*
 * Dash Design System — component layer.
 * Depends on tokens.css, which is generated. This file is authored.
 */

/* ---------------------------------------------------------------- base -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--dash-color-muted) var(--dash-color-ground);
}

body {
  margin: 0;
  background: var(--dash-color-ground);
  color: var(--dash-color-ink);
  font-family: var(--dash-font-sans);
  font-size: var(--dash-text-base);
  line-height: var(--dash-leading-base);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces carry the design too. */
::selection { background: var(--dash-color-emerald); color: var(--dash-color-forest); }
:focus-visible {
  outline: 2px solid var(--dash-color-active);
  outline-offset: 2px;
  border-radius: var(--dash-radius-sm);
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--dash-color-ground); }
::-webkit-scrollbar-thumb {
  background: var(--dash-color-rule);
  border: 3px solid var(--dash-color-ground);
  border-radius: var(--dash-radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--dash-color-muted); }

a { color: var(--dash-color-active); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--dash-color-forest); }

code, kbd, samp, pre { font-family: var(--dash-font-mono); font-feature-settings: "tnum" 1; }

/* Measured values and any figure that must align in a column. */
.dash-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* --------------------------------------------------------------- label -- */

.dash-label {
  font-size: var(--dash-text-xs);
  font-weight: var(--dash-weight-medium);
  letter-spacing: var(--dash-tracking-label);
  text-transform: uppercase;
  color: var(--dash-color-muted);
}
.dash-label--specimen { letter-spacing: var(--dash-tracking-specimen); }
.dash-label--on-dark { color: var(--dash-on-forest-muted); }

/* -------------------------------------------------------------- button -- */

.dash-button {
  --_bg: var(--dash-color-forest);
  --_fg: var(--dash-on-forest);
  --_bd: var(--dash-color-forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dash-space-2);
  padding: var(--dash-space-3) var(--dash-space-5);
  border: 1px solid var(--_bd);
  border-radius: var(--dash-radius-sm);
  background: var(--_bg);
  color: var(--_fg);
  font: inherit;
  font-size: var(--dash-text-sm);
  font-weight: var(--dash-weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: background var(--dash-duration-fast) var(--dash-ease-standard),
              border-color var(--dash-duration-fast) var(--dash-ease-standard),
              color var(--dash-duration-fast) var(--dash-ease-standard);
}
.dash-button:hover { --_bg: var(--dash-color-active); --_bd: var(--dash-color-active); }
.dash-button:active { --_bg: var(--dash-color-forest); }

/* Size is independent from colour treatment, so a primary, accent, or ghost
   action can carry the same emphasis without a consumer restyling it. */
.dash-button--large {
  padding: var(--dash-space-4) var(--dash-space-7);
  border-radius: var(--dash-radius-xl);
  font-size: var(--dash-text-base);
}
.dash-button--display {
  padding: var(--dash-space-5) var(--dash-space-8);
  border-radius: var(--dash-radius-xl);
  font-size: var(--dash-text-lg);
}

/* Paired by surface: --dash-on-emerald is guaranteed to meet AA on emerald. */
.dash-button--accent { --_bg: var(--dash-color-emerald); --_fg: var(--dash-on-emerald); --_bd: var(--dash-color-emerald); }
.dash-button--accent:hover { --_bg: var(--dash-color-active); --_fg: var(--dash-color-paper); --_bd: var(--dash-color-active); }

.dash-button--ghost { --_bg: transparent; --_fg: var(--dash-color-forest); --_bd: var(--dash-color-forest); }
.dash-button--ghost:hover { --_bg: var(--dash-color-forest); --_fg: var(--dash-color-paper); }

.dash-button[disabled],
.dash-button[aria-disabled="true"] {
  --_bg: var(--dash-color-sage);
  --_fg: var(--dash-on-sage);
  --_bd: var(--dash-color-sage);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Loading: the label stays legible; the spinner is additive, never a replacement. */
.dash-button[data-loading="true"] { cursor: progress; }
.dash-button[data-loading="true"]::before {
  content: "";
  width: 0.85em; height: 0.85em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--dash-radius-full);
  animation: dash-spin 700ms linear infinite;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- field -- */

.dash-field { display: grid; gap: var(--dash-space-2); }
.dash-field__label {
  font-size: var(--dash-text-sm);
  font-weight: var(--dash-weight-medium);
  color: var(--dash-color-forest);
}
.dash-input {
  padding: var(--dash-space-3) var(--dash-space-4);
  border: 1px solid var(--dash-color-rule);
  border-radius: var(--dash-radius-sm);
  background: var(--dash-color-ground);
  color: var(--dash-color-ink);
  font: inherit;
  font-size: var(--dash-text-sm);
  transition: border-color var(--dash-duration-fast) var(--dash-ease-standard);
}
.dash-input::placeholder { color: var(--dash-color-muted); }
.dash-input:hover { border-color: var(--dash-color-muted); }
.dash-input:focus-visible { border-color: var(--dash-color-active); outline-offset: 1px; }
.dash-input[aria-invalid="true"] { border-color: var(--dash-color-danger); }
.dash-input[disabled] { background: color-mix(in srgb, var(--dash-color-sage) 30%, var(--dash-color-ground)); cursor: not-allowed; }

.dash-field__message { font-size: var(--dash-text-xs); color: var(--dash-color-muted); }
/* Errors name the problem; the icon is not the only signal. */
.dash-field__message--error { color: var(--dash-color-danger); font-weight: var(--dash-weight-medium); }

/* ---------------------------------------------------------------- card -- */

.dash-card {
  padding: var(--dash-space-6);
  border-radius: var(--dash-radius-lg);
  background: var(--dash-color-ground);
  border: 1px solid var(--dash-color-rule);
}
.dash-card--forest { background: var(--dash-color-forest); color: var(--dash-on-forest); border-color: var(--dash-color-forest); }
.dash-card--active { background: var(--dash-color-active); color: var(--dash-on-active); border-color: var(--dash-color-active); }

/* A peer-card composition. Stretching is intentional: it makes cards in the
   same row share the tallest card's height. */
.dash-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dash-space-10), 1fr));
  gap: var(--dash-space-4);
  align-items: stretch;
}
.dash-card-row--content-height { align-items: start; }

/* ------------------------------------------------------------- sequence -- */

/* A timestamp-free ordered sequence. It communicates reading order and may
   identify one current step; it does not imply dates, completion, or status. */
.dash-sequence {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-sequence::before {
  position: absolute;
  background: var(--dash-color-emerald);
  content: "";
}
.dash-sequence--horizontal {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: var(--dash-space-7);
}
.dash-sequence--horizontal::before {
  top: calc(var(--dash-space-7) / 2);
  right: calc(var(--dash-space-7) / 2);
  left: calc(var(--dash-space-7) / 2);
  height: var(--dash-border-default);
}
.dash-sequence__step {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--dash-space-6);
  min-inline-size: 0;
  justify-items: start;
}
.dash-sequence__marker {
  position: relative;
  display: block;
  width: var(--dash-space-7);
  height: var(--dash-space-7);
  border: var(--dash-border-default) solid var(--dash-color-emerald);
  border-radius: var(--dash-radius-full);
  background: var(--dash-color-forest);
  box-shadow:
    0 0 0 var(--dash-space-2) var(--dash-color-ground),
    0 0 0 calc(var(--dash-space-2) + var(--dash-border-default)) var(--dash-color-emerald);
}
.dash-sequence__step--current .dash-sequence__marker::after {
  position: absolute;
  inset: calc(var(--dash-space-3) + var(--dash-space-1));
  border-top: var(--dash-border-default) solid var(--dash-on-forest);
  border-right: var(--dash-border-default) solid var(--dash-on-forest);
  content: "";
  transform: translateX(calc(var(--dash-space-1) * -1)) rotate(45deg);
}
.dash-sequence__label {
  margin: 0;
  color: var(--dash-color-ink);
  font-size: var(--dash-text-display-sm);
  font-weight: var(--dash-weight-semibold);
  line-height: var(--dash-leading-display-sm);
  letter-spacing: var(--dash-tracking-tight);
}
.dash-sequence--vertical {
  gap: var(--dash-space-6);
  padding-left: var(--dash-space-3);
}
.dash-sequence--vertical::before {
  top: calc(var(--dash-space-7) / 2);
  bottom: calc(var(--dash-space-7) / 2);
  left: calc(var(--dash-space-3) + var(--dash-space-7) / 2);
  width: var(--dash-border-default);
}
.dash-sequence--vertical .dash-sequence__step {
  grid-template-columns: var(--dash-space-8) minmax(0, 1fr);
  align-items: center;
}
.dash-sequence--vertical .dash-sequence__label {
  font-size: var(--dash-text-xl);
  line-height: var(--dash-leading-xl);
}

@media (max-width: 60rem) {
  .dash-sequence--adaptive {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dash-space-6);
    padding-left: var(--dash-space-3);
  }
  .dash-sequence--adaptive::before {
    top: calc(var(--dash-space-7) / 2);
    right: auto;
    bottom: calc(var(--dash-space-7) / 2);
    left: calc(var(--dash-space-3) + var(--dash-space-7) / 2);
    width: var(--dash-border-default);
    height: auto;
  }
  .dash-sequence--adaptive .dash-sequence__step {
    grid-template-columns: var(--dash-space-8) minmax(0, 1fr);
    align-items: center;
  }
  .dash-sequence--adaptive .dash-sequence__label {
    font-size: var(--dash-text-xl);
    line-height: var(--dash-leading-xl);
  }
}

/* ------------------------------------------------------------- timeline -- */

/* A read-only sequence of point-in-time events. The rail records order; the
   marker form distinguishes completed, current, and upcoming work without
   relying on colour alone. */
.dash-timeline {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dash-timeline__event { position: relative; min-inline-size: 0; }
.dash-timeline__event::after { background: var(--dash-color-rule); content: ""; position: absolute; }
.dash-timeline__marker {
  display: block;
  z-index: 1;
  box-sizing: border-box;
  inline-size: var(--dash-space-4);
  block-size: var(--dash-space-4);
  border: var(--dash-border-default) solid var(--dash-color-rule);
  border-radius: 50%;
  background: var(--dash-color-paper);
}
.dash-timeline__event--complete .dash-timeline__marker {
  border-color: var(--dash-color-forest);
  background: var(--dash-color-forest);
}
.dash-timeline__event--current .dash-timeline__marker {
  border-color: var(--dash-color-forest);
  outline: var(--dash-border-hairline) solid var(--dash-color-active);
  outline-offset: var(--dash-space-1);
}
.dash-timeline__content { min-inline-size: 0; }
.dash-timeline__time { margin: 0; font-size: var(--dash-text-xs); font-weight: var(--dash-weight-medium); letter-spacing: var(--dash-tracking-label); text-transform: uppercase; white-space: nowrap; }
.dash-timeline__time { color: var(--dash-color-active); }
.dash-timeline__title { margin: var(--dash-space-2) 0 0; font-size: var(--dash-text-base); font-weight: var(--dash-weight-semibold); color: var(--dash-color-forest); }
.dash-timeline__state { color: var(--dash-color-muted); }
.dash-timeline__detail { margin-block-start: var(--dash-space-3); }
.dash-timeline__detail-toggle { display: inline-flex; align-items: center; gap: var(--dash-space-1); color: var(--dash-color-active); cursor: pointer; font-size: var(--dash-text-sm); font-weight: var(--dash-weight-medium); }
.dash-timeline__detail-toggle::-webkit-details-marker { display: none; }
.dash-timeline__detail-toggle::marker { content: ""; }
.dash-timeline__detail-indicator { display: inline-grid; inline-size: var(--dash-space-3); color: var(--dash-color-active); font-size: var(--dash-text-base); line-height: var(--dash-leading-sm); place-items: center; }
.dash-timeline__detail-indicator > span { grid-area: 1 / 1; }
.dash-timeline__detail-indicator-open { display: none; }
.dash-timeline__description { margin: var(--dash-space-2) 0 0; color: var(--dash-color-muted); }
.dash-timeline__detail-content {
  z-index: 2;
  max-inline-size: var(--dash-space-10);
  margin: var(--dash-space-3) 0 0;
  padding: var(--dash-space-3);
  border-radius: var(--dash-radius-md);
  background: var(--dash-color-forest);
  color: var(--dash-on-forest);
  font-size: var(--dash-text-sm);
}
.dash-timeline__detail[open] .dash-timeline__detail-indicator-closed { display: none; }
.dash-timeline__detail[open] .dash-timeline__detail-indicator-open { display: block; }
.dash-timeline__detail-toggle:focus-visible { outline: var(--dash-border-default) solid var(--dash-color-active); outline-offset: var(--dash-space-1); }

/* The vertical form is the application history: it lengthens naturally and
   may live in any scroll container while the application fetches older items. */
.dash-timeline--vertical { gap: var(--dash-space-5); }
.dash-timeline--vertical .dash-timeline__event {
  display: grid;
  grid-template-columns: var(--dash-space-5) minmax(0, 1fr);
  column-gap: var(--dash-space-3);
}
.dash-timeline--vertical .dash-timeline__marker { justify-self: center; margin-top: var(--dash-space-1); }
.dash-timeline--vertical .dash-timeline__event:not(:last-child)::after {
  inset-block-start: calc(var(--dash-space-1) + var(--dash-space-2));
  inset-block-end: calc(var(--dash-space-1) + var(--dash-space-2) - var(--dash-space-5));
  inset-inline-start: calc((var(--dash-space-5) - var(--dash-border-default)) / 2);
  inline-size: var(--dash-border-default);
}

/* The horizontal form is a compact, scrollable narrative for a fixed set of
   events in a summary, document, or presentation. */
.dash-timeline--horizontal {
  grid-auto-columns: minmax(calc(var(--dash-space-10) + var(--dash-space-5)), 1fr);
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
}
.dash-timeline--horizontal .dash-timeline__event {
  display: grid;
  grid-template-rows: var(--dash-space-5) auto;
  row-gap: var(--dash-space-2);
  padding-inline-end: var(--dash-space-5);
  scroll-snap-align: start;
}
.dash-timeline--horizontal .dash-timeline__marker { align-self: center; justify-self: start; }
.dash-timeline--horizontal .dash-timeline__event:not(:last-child)::after {
  inset-block-start: calc((var(--dash-space-5) - var(--dash-border-default)) / 2);
  inset-inline-start: calc(var(--dash-space-4) / 2);
  inset-inline-end: 0;
  block-size: var(--dash-border-default);
}
.dash-timeline__loading { color: var(--dash-color-muted); font-size: var(--dash-text-sm); }

/* --------------------------------------------------------------- badge -- */

.dash-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--dash-space-2);
  padding: var(--dash-space-1) var(--dash-space-3);
  border: 1px solid currentColor;
  border-radius: var(--dash-radius-full);
  font-size: var(--dash-text-xs);
  font-weight: var(--dash-weight-medium);
  letter-spacing: var(--dash-tracking-label);
  text-transform: uppercase;
  color: var(--dash-color-forest);
}
.dash-badge--success { color: var(--dash-color-success); }
.dash-badge--warning { color: var(--dash-color-warning); }
.dash-badge--danger  { color: var(--dash-color-danger); }

/* --------------------------------------------------------------- image -- */

/* A figure keeps the visual, its alternative text, caption, and full-size
   source together. Browser images may be remote; documents use pinned files. */
.dash-image { position: relative; display: grid; gap: var(--dash-space-3); margin: 0; }
.dash-image__media {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  background: var(--dash-color-ground);
  border-radius: var(--dash-radius-lg);
}
.dash-image__media--cover { aspect-ratio: 16 / 9; object-fit: cover; }
.dash-image__media--contain { max-block-size: calc(var(--dash-space-10) * 5); object-fit: contain; }
.dash-image__caption { color: var(--dash-color-muted); font-size: var(--dash-text-sm); }
.dash-image__expand {
  position: absolute;
  inset-block-start: var(--dash-space-3);
  inset-inline-end: var(--dash-space-3);
}
.dash-image__expand:focus-visible {
  outline: var(--dash-border-default) solid var(--dash-color-active);
  outline-offset: var(--dash-space-1);
}
.dash-image__expand,
.dash-image__close {
  display: grid;
  place-items: center;
  inline-size: var(--dash-space-6);
  block-size: var(--dash-space-6);
  padding: 0;
  color: var(--dash-on-forest);
  background: color-mix(in srgb, var(--dash-color-forest) 84%, transparent);
  border: var(--dash-border-default) solid color-mix(in srgb, var(--dash-on-forest) 28%, transparent);
  border-radius: var(--dash-radius-sm);
}
.dash-image__expand:hover,
.dash-image__close:hover { background: var(--dash-color-forest); }
.dash-image__close:focus-visible {
  outline: var(--dash-border-default) solid var(--dash-color-active);
  outline-offset: var(--dash-space-1);
}
.dash-image__expand svg,
.dash-image__close svg {
  inline-size: var(--dash-space-4);
  block-size: var(--dash-space-4);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--dash-border-default);
}
.dash-image__overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  place-items: center;
  padding: var(--dash-space-5);
}
.dash-image__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  background: color-mix(in srgb, var(--dash-color-forest) 88%, transparent);
  border: 0;
}
.dash-image__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  max-inline-size: 100%;
  max-block-size: 100%;
}
.dash-image__full {
  display: block;
  max-inline-size: 100%;
  max-block-size: calc(100vh - var(--dash-space-10));
  object-fit: contain;
  border-radius: var(--dash-radius-lg);
}
.dash-image__close {
  position: absolute;
  inset-block-start: var(--dash-space-3);
  inset-inline-end: var(--dash-space-3);
}

/* --------------------------------------------------------------- table -- */

/* A table always has a viewport: wide data stays a table and scrolls on the
   inline axis instead of collapsing into an unreadable stack of labels. */
.dash-table-viewport {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--dash-color-active) var(--dash-color-ground);
}
.dash-table-viewport:focus-visible {
  outline: var(--dash-border-default) solid var(--dash-color-active);
  outline-offset: var(--dash-space-1);
}
.dash-table-viewport::-webkit-scrollbar { block-size: var(--dash-space-2); inline-size: var(--dash-space-2); }
.dash-table-viewport::-webkit-scrollbar-thumb { background: var(--dash-color-active); }
.dash-table-viewport::-webkit-scrollbar-track { background: var(--dash-color-ground); }
.dash-table-viewport--scrollable {
  max-block-size: calc(var(--dash-space-10) * 3);
  overflow: auto;
}
.dash-table { inline-size: 100%; border-collapse: collapse; font-size: var(--dash-text-sm); table-layout: auto; }
.dash-table__caption {
  margin-block-end: var(--dash-space-3);
  color: var(--dash-color-muted);
  text-align: left;
}
.dash-table th {
  text-align: left;
  padding: var(--dash-space-3) var(--dash-space-3) var(--dash-space-2);
  border-bottom: var(--dash-border-hairline) solid var(--dash-color-rule);
  font-size: var(--dash-text-xs);
  font-weight: var(--dash-weight-medium);
  /* Tighter than a standalone label: a dense header row reads worse when the
     tracking opens up as far as an isolated caption can afford. */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dash-color-muted);
}
.dash-table td {
  padding: var(--dash-space-3);
  border-bottom: var(--dash-border-hairline) solid var(--dash-color-rule);
  vertical-align: middle;
}
.dash-table tbody tr:last-child td { border-bottom: 0; }
.dash-table tbody tr:hover td { background: var(--dash-color-ground); }
.dash-table__column--fit,
.dash-table__column--numeric { inline-size: 1%; white-space: nowrap; }
.dash-table__column--text { inline-size: var(--dash-table-column-share); }
.dash-table__column--numeric {
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.dash-table__align--start { text-align: start; }
.dash-table__align--center { text-align: center; }
.dash-table__align--end { text-align: end; }
.dash-table__wrap--wrap { white-space: normal; }
.dash-table__wrap--nowrap { white-space: nowrap; }
.dash-table__loading {
  margin: var(--dash-space-3);
  color: var(--dash-color-muted);
  font-size: var(--dash-text-sm);
}

/* State reads as stroke and mark, never as colour alone. */
.dash-verdict { font-weight: var(--dash-weight-semibold); font-size: var(--dash-text-xs); letter-spacing: var(--dash-tracking-label); }
.dash-verdict--pass { color: var(--dash-color-success); }
.dash-verdict--fail { color: var(--dash-color-danger); }

.dash-dot {
  display: inline-block;
  width: 0.75em; height: 0.75em;
  border-radius: var(--dash-radius-full);
  border: 1px solid var(--dash-color-forest);
  vertical-align: -0.05em;
}

/* --------------------------------------------------- token leader rows -- */
/* A token's state is carried by the leader's stroke pattern, so it survives
   greyscale, colour-blindness, and a black-and-white printout. */

.dash-leader { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--dash-space-3); }
.dash-leader__rail { height: 1px; background: var(--dash-color-forest); }
.dash-leader--inherited  .dash-leader__rail { background: var(--dash-color-forest); }
.dash-leader--overridden .dash-leader__rail {
  height: 3px;
  background: none;
  border-top: 1px solid var(--dash-color-forest);
  border-bottom: 1px solid var(--dash-color-forest);
}
.dash-leader--deprecated .dash-leader__rail {
  background: repeating-linear-gradient(to right,
    var(--dash-color-forest) 0 6px, transparent 6px 12px);
}

/* ------------------------------------------------------------- utility -- */

.dash-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}