/*
 * Public chrome inputs. Hosts may set these four variables on the dashboard or
 * on an ancestor. The registered initial values keep the dashboard usable when
 * no host value is supplied; the `inherit` declarations below preserve an
 * ancestor override instead of shadowing it.
 *
 * --zdtp-dashboard-light-bg: light-mode page and shell background.
 * --zdtp-dashboard-light-fg: light-mode primary text and foreground.
 * --zdtp-dashboard-dark-bg: dark-mode page and shell background.
 * --zdtp-dashboard-dark-fg: dark-mode primary text and foreground.
 *
 * All other chrome colors are derived from these inputs with light-dark() and
 * color-mix().
 */
@property --zdtp-dashboard-light-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f8fafc;
}

@property --zdtp-dashboard-light-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #182131;
}

@property --zdtp-dashboard-dark-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #151b24;
}

@property --zdtp-dashboard-dark-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #edf2f7;
}

/* Static dashboard chrome deliberately uses no inventory custom properties.
   The namespace and div/span markup protect documentation hosts from tag resets. */
.zdtp-dashboard,
.zdtp-dashboard * {
  box-sizing: border-box;
}

.zdtp-dashboard {
  /* Keep these inputs inheritable so a wrapper can theme the dashboard. */
  --zdtp-dashboard-light-bg: inherit;
  --zdtp-dashboard-light-fg: inherit;
  --zdtp-dashboard-dark-bg: inherit;
  --zdtp-dashboard-dark-fg: inherit;

  --zdtp-dashboard-bg: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 0%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 0%)
  );
  --zdtp-dashboard-fg: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 100%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 100%)
  );
  --zdtp-dashboard-muted: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 58%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 58%)
  );
  --zdtp-dashboard-border: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 16%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 22%)
  );
  --zdtp-dashboard-card-bg: light-dark(
    color-mix(in oklab, color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 0%), white 20%),
    color-mix(in oklab, color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 0%), black 8%)
  );
  --zdtp-dashboard-diag-bg: light-dark(#fff5e6, #3b2c18);
  --zdtp-dashboard-diag-fg: light-dark(#704612, #ffdaa3);
  --zdtp-dashboard-diag-accent: light-dark(#9d641a, #e4ad5c);
  --zdtp-dashboard-focus: light-dark(#245caa, #6488b8);
  --zdtp-dashboard-ruler-major: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 48%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 52%)
  );
  --zdtp-dashboard-ruler-minor: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 22%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 26%)
  );
  --zdtp-dashboard-bar: light-dark(#526c92, #9dbbe6);
  --zdtp-dashboard-sample-bg: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 4%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 6%)
  );
  --zdtp-dashboard-sample-border: light-dark(
    color-mix(in oklab, var(--zdtp-dashboard-light-bg, #f8fafc), var(--zdtp-dashboard-light-fg, #182131) 48%),
    color-mix(in oklab, var(--zdtp-dashboard-dark-bg, #151b24), var(--zdtp-dashboard-dark-fg, #edf2f7) 52%)
  );
  --zdtp-dashboard-transparent: transparent;
  min-inline-size: 0;
  max-inline-size: 100%;
  border: 1px solid var(--zdtp-dashboard-border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: 400 14px/1.5 system-ui, sans-serif;
  letter-spacing: normal;
  text-align: start;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.zdtp-dashboard[data-chrome='host'] { color-scheme: inherit; }

/* Shell chrome is scoped to the header and the mode-independent region. This
   leaves a mode-dependent `data-scheme="host"` region able to inherit from the
   page ancestor, even when the shell itself is fixed to light or dark. */
.zdtp-dashboard[data-chrome='light'] > .zdtp-dashboard__header { color-scheme: light; }
.zdtp-dashboard[data-chrome='dark'] > .zdtp-dashboard__header { color-scheme: dark; }
.zdtp-dashboard[data-chrome='host'] > .zdtp-dashboard__header { color-scheme: inherit; }

.zdtp-dashboard :where(div, span) {
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  box-shadow: none;
}

.zdtp-dashboard__header {
  display: grid;
  gap: 8px;
  padding: 20px;
  border-block-end: 1px solid var(--zdtp-dashboard-border);
  background: var(--zdtp-dashboard-bg);
  color: var(--zdtp-dashboard-fg);
}

.zdtp-dashboard__region {
  display: grid;
  gap: 32px;
  background: var(--zdtp-dashboard-bg);
  color: var(--zdtp-dashboard-fg);
}

.zdtp-dashboard__region[data-scheme='light'] { color-scheme: light; }
.zdtp-dashboard__region[data-scheme='dark'] { color-scheme: dark; }
.zdtp-dashboard__region[data-scheme='host'] { color-scheme: inherit; }

.zdtp-dashboard__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}

.zdtp-dashboard__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  color: var(--zdtp-dashboard-muted);
  font-size: 12px;
}

.zdtp-dashboard__count {
  color: var(--zdtp-dashboard-fg);
  font-weight: 600;
}

.zdtp-dashboard__inventory {
  display: grid;
  gap: 32px;
  padding: 20px;
}

.zdtp-dashboard__tab {
  display: grid;
  gap: 20px;
}

.zdtp-dashboard__tab-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--zdtp-dashboard-border);
}

.zdtp-dashboard__tab-title {
  font-size: 18px;
  font-weight: 700;
}

.zdtp-dashboard__tab-count {
  color: var(--zdtp-dashboard-muted);
  font-size: 12px;
}

.zdtp-dashboard__tier {
  display: grid;
  gap: 10px;
}

.zdtp-dashboard__tier-title {
  font-weight: 600;
}

.zdtp-dashboard__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

.zdtp-dashboard__token {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--zdtp-dashboard-border);
  border-radius: 6px;
  background: var(--zdtp-dashboard-card-bg);
  color: var(--zdtp-dashboard-fg);
}

.zdtp-dashboard__token-content {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 12px;
}

.zdtp-dashboard__name {
  font-weight: 600;
}

.zdtp-dashboard__variable,
.zdtp-dashboard__value,
.zdtp-dashboard__reference {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
}

.zdtp-dashboard__variable,
.zdtp-dashboard__reference {
  color: var(--zdtp-dashboard-muted);
}

.zdtp-dashboard__value {
  padding-block-start: 5px;
  color: var(--zdtp-dashboard-fg);
}

.zdtp-dashboard__diagnostic {
  margin-block-start: 3px;
  padding: 8px;
  border-inline-start: 2px solid var(--zdtp-dashboard-diag-accent);
  background: var(--zdtp-dashboard-diag-bg);
  color: var(--zdtp-dashboard-diag-fg);
  font-size: 12px;
}

.zdtp-dashboard__preview {
  display: flex;
  block-size: 88px;
  border-block-end: 1px solid var(--zdtp-dashboard-border);
  border-start-start-radius: 5px;
  border-start-end-radius: 5px;
  overflow: hidden;
}

/* The inner well owns specimen paint and mode; borders and scrolling stay outside. */
.zdtp-dashboard__preview > .zdtp-dashboard__specimen {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 16px;
  background: light-dark(#eef1f5, #222936);
  color: light-dark(#182131, #f1f5f9);
}

.zdtp-dashboard__sample {
  display: block;
  flex: none;
  max-inline-size: 100%;
}

.zdtp-dashboard__preview--color > .zdtp-dashboard__specimen {
  padding: 0;
  background: repeating-conic-gradient(light-dark(#e2e6eb, #3e4652) 0% 25%, light-dark(#fff, #252c37) 0% 50%) 0 / 16px 16px;
}

.zdtp-dashboard__sample--color {
  inline-size: 100%;
  block-size: 100%;
}

.zdtp-dashboard__sample--bar {
  block-size: 16px;
}

.zdtp-dashboard__sample--radius,
.zdtp-dashboard__sample--shadow {
  inline-size: 64px;
  block-size: 48px;
  background: var(--zdtp-dashboard-sample-bg);
  border: 1px solid var(--zdtp-dashboard-sample-border);
}

.zdtp-dashboard__sample--family,
.zdtp-dashboard__sample--weight,
.zdtp-dashboard__sample--line-height {
  font-size: 18px;
}

.zdtp-dashboard__sample--line-height {
  white-space: pre-line;
}

.zdtp-dashboard__empty {
  background: var(--zdtp-dashboard-bg);
  color: var(--zdtp-dashboard-muted);
}

/* Wide rows use their embedding width, including narrow documentation columns. */
.zdtp-dashboard { container: zdtp-dashboard / inline-size; }
.zdtp-dashboard__token--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: 0;
}
.zdtp-dashboard__token--wide > .zdtp-dashboard__token-content { order: -1; }
.zdtp-dashboard__scroll {
  max-inline-size: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
}
.zdtp-dashboard__scroll:focus-visible {
  outline: 2px solid var(--zdtp-dashboard-focus);
  /* Paint outside the mode-scoped well, against surrounding chrome. */
  outline-offset: 0;
}
.zdtp-dashboard__ruler-wrap { padding: 12px; }
.zdtp-dashboard__ruler-caption,
.zdtp-dashboard__preview-unavailable {
  color: var(--zdtp-dashboard-muted);
  font-size: 12px;
  padding: 12px;
}
.zdtp-dashboard__ruler-caption { padding: 0 0 8px; }
.zdtp-dashboard__ruler {
  position: relative;
  block-size: 64px;
  padding-block-start: 36px;
  background:
    repeating-linear-gradient(to right, var(--zdtp-dashboard-ruler-major) 0 1px, var(--zdtp-dashboard-transparent) 1px 64px) left 24px / 100% 12px no-repeat,
    repeating-linear-gradient(to right, var(--zdtp-dashboard-ruler-minor) 0 1px, var(--zdtp-dashboard-transparent) 1px 8px) left 30px / 100% 6px no-repeat;
}
.zdtp-dashboard__ruler-origin { position: absolute; inset-block-start: 0; inset-inline-start: 0; font-size: 12px; }
.zdtp-dashboard__sample--bar {
  max-inline-size: none;
  min-inline-size: 0;
  border: 0;
  padding: 0;
  background: var(--zdtp-dashboard-bar);
}
.zdtp-dashboard__palette {
  display: flex;
  gap: 0;
  inline-size: max-content;
  min-inline-size: 100%;
}
.zdtp-dashboard__palette > .zdtp-dashboard__token {
  display: grid;
  grid-template-rows: minmax(88px, auto) 1fr;
  align-content: start;
  flex: 1 0 156px;
  inline-size: 156px;
  border-radius: 0;
}
.zdtp-dashboard__palette > .zdtp-dashboard__token > .zdtp-dashboard__token-content { grid-row: 2; }
.zdtp-dashboard__palette .zdtp-dashboard__preview { border-radius: 0; }
.zdtp-dashboard__preview--typography {
  display: block;
  block-size: auto;
  border: 0;
  border-radius: 0;
}
.zdtp-dashboard__preview--typography > .zdtp-dashboard__specimen {
  display: block;
  padding: 20px;
  min-block-size: 100%;
}
.zdtp-dashboard__preview--typography > .zdtp-dashboard__specimen > .zdtp-dashboard__sample {
  font: 400 18px/1.6 system-ui, sans-serif;
  letter-spacing: normal;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-inline-size: 100%;
}
@container zdtp-dashboard (min-width: 640px) {
  .zdtp-dashboard__token--wide { grid-template-columns: 220px minmax(0, 1fr); }
}