/*
 * Gallery styles on top of Mantine. Colors come from Mantine's own tokens
 * (--mantine-color-*) so both color schemes follow the one ColorSchemeToggle;
 * light-dark() picks the value for the scheme in effect.
 */
:root {
  --dlc-accent: var(--mantine-color-orange-6);
  --dlc-surface: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
  --dlc-surface-sunken: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
  --dlc-border: var(--mantine-color-default-border);
  --dlc-toc-w: 200px;
}

html {
  /* macOS renders text heavier than intended without this. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.dlc-tabular { font-variant-numeric: tabular-nums; }

/* Icons: one SVG per glyph, painted in currentColor through a mask, so every
   state is a color change and never a second asset. */
.dlc-icon {
  display: inline-block; flex-shrink: 0;
  width: 1.1em; height: 1.1em; vertical-align: -0.2em;
  background: currentColor;
  -webkit-mask: var(--dlc-icon) center / contain no-repeat;
  mask: var(--dlc-icon) center / contain no-repeat;
}
.dlc-icon-loading_dev { --dlc-icon: url(icons/loading_dev.svg); }
.dlc-icon-ldrs { --dlc-icon: url(icons/ldrs.svg); }
.dlc-icon-spinners { --dlc-icon: url(icons/spinners.svg); }
.dlc-icon-spinners_react { --dlc-icon: url(icons/spinners_react.svg); }
.dlc-icon-loader_spinner { --dlc-icon: url(icons/loader_spinner.svg); }
.dlc-icon-premium { --dlc-icon: url(icons/premium.svg); }
.dlc-icon-indicators { --dlc-icon: url(icons/indicators.svg); }
.dlc-icon-m3 { --dlc-icon: url(icons/m3.svg); }
.dlc-icon-epic { --dlc-icon: url(icons/epic.svg); }
.dlc-icon-overview { --dlc-icon: url(icons/overview.svg); }
.dlc-icon-credits { --dlc-icon: url(icons/credits.svg); }
.dlc-icon-request { --dlc-icon: url(icons/request.svg); }
.dlc-nav-ext { width: 0.85em; height: 0.85em; opacity: 0.6; }
.dlc-icon-search { --dlc-icon: url(icons/search.svg); }
.dlc-icon-sun { --dlc-icon: url(icons/sun.svg); }
.dlc-icon-moon { --dlc-icon: url(icons/moon.svg); }
.dlc-icon-external { --dlc-icon: url(icons/external.svg); width: 0.85em; height: 0.85em; }
.dlc-icon-chevron { --dlc-icon: url(icons/chevron.svg); }
.dlc-icon-reset { --dlc-icon: url(icons/reset.svg); }
.dlc-icon-github { --dlc-icon: url(icons/github.svg); }

/* ---------- Header ---------- */
.dlc-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--mantine-color-text);
  font-weight: 650; letter-spacing: -0.02em; font-size: 15px;
}
/* The mark cycles through every loader (assets/gallery.js): all are in the
   DOM, one shown at a time; hidden ones neither paint nor animate. */
.dlc-brand-mark {
  position: relative; display: inline-flex; width: 22px; height: 22px;
  align-items: center; justify-content: center; color: var(--dlc-accent); overflow: hidden;
}
.dlc-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transform: scale(var(--mark-scale, 1));
}
.dlc-mark[hidden] { display: none; }
.dlc-mark.is-entering { animation: dlc-slide-in 360ms cubic-bezier(0.2, 0, 0, 1); }
.dlc-mark.is-leaving { animation: dlc-slide-out 260ms cubic-bezier(0.2, 0, 0, 1) forwards; }
@keyframes dlc-slide-in { from { translate: 0 100%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes dlc-slide-out { to { translate: 0 -100%; opacity: 0; } }
/* The mark is a live loader. Idle in the corner of every page it would pull
   the eye forever, so it holds still until the brand is hovered. */
@media (max-width: 30em) { .dlc-brand-name { display: none; } }
html[data-mac] .dlc-mod-other, html:not([data-mac]) .dlc-mod-mac { display: none; }
/* No keyboard, no shortcut to advertise. */
@media (hover: none) { .dlc-kbd { display: none; } }

/* Header search: an input with its results list right under it. */
.dlc-search { position: relative; width: 260px; flex-shrink: 0; }
.dlc-search-icon {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%; z-index: 2;
  color: var(--mantine-color-dimmed); pointer-events: none;
}
.dlc-search-input, .dlc-search-input .dash-input-element {
  width: 100%; height: 36px; margin: 0; border: none; background: none; box-shadow: none;
}
.dlc-search-input:focus-within, .dlc-color-text:focus-within { box-shadow: none; border: none; }
.dlc-search-input .dash-input-element {
  padding: 0 60px 0 36px;
  border: 1px solid var(--dlc-border); border-radius: var(--mantine-radius-md);
  background: var(--mantine-color-default); color: var(--mantine-color-text);
  font-size: 14px; outline: none; appearance: none; -webkit-appearance: none;
  transition-property: border-color; transition-duration: 100ms;
}
.dlc-search-input .dash-input-element::-webkit-search-cancel-button { display: none; }
.dlc-search-input .dash-input-element::placeholder { color: var(--mantine-color-placeholder); }
.dlc-search-input .dash-input-element:focus { border-color: var(--dlc-accent); box-shadow: none; }
.dlc-search .dlc-kbd {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%; z-index: 2; pointer-events: none;
}
.dlc-search-input { position: relative; z-index: 1; }
.dlc-search:focus-within .dlc-kbd { display: none; }
.dlc-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  max-height: 380px; overflow-y: auto; padding: 4px;
  background: var(--dlc-surface); border: 1px solid var(--dlc-border);
  border-radius: var(--mantine-radius-md); box-shadow: var(--mantine-shadow-md);
}
.dlc-search-option {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: var(--mantine-radius-sm);
  color: var(--mantine-color-text); font-size: 14px; text-decoration: none;
}
.dlc-search-option[data-active] { background: var(--mantine-color-default-hover); }
.dlc-search-group { font-size: 12px; color: var(--mantine-color-dimmed); font-family: var(--mantine-font-family-monospace); }
.dlc-search-empty { padding: 10px; font-size: 14px; color: var(--mantine-color-dimmed); }
@media (max-width: 48em) { .dlc-search { width: 170px; } }

/* ---------- Navbar ---------- */
.dlc-nav-scroll { height: 100%; padding: 12px 10px 24px; }
.dlc-nav-section { padding: 18px 12px 6px; color: var(--mantine-color-dimmed); }
.dlc-nav-link { padding-left: 36px; min-height: 32px; }
.dlc-nav-link .mantine-NavLink-label { font-size: 13px; }

/* ---------- Page frame ---------- */
.dlc-page {
  max-width: 1180px; margin: 0 auto;
  padding: 40px 32px 48px;
}
.dlc-footer {
  margin-top: 64px; padding-top: 20px;
  border-top: 1px solid var(--dlc-border);
}
@media (max-width: 48em) { .dlc-page { padding: 24px 16px 40px; } }

/* ---------- Overview ---------- */
.dlc-hero { padding: 12px 0 40px; }
.dlc-hero-title {
  font-size: clamp(34px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.035em;
}
.dlc-hero-title span { color: var(--mantine-color-dimmed); }
.dlc-hero-lede { margin: 16px 0 24px; }
.dlc-install { margin-bottom: 12px; }
.dlc-install, .dlc-hero-code {
  border: 1px solid var(--dlc-border); border-radius: var(--mantine-radius-md);
}
/* Hero carousel: snippet beside the loader it builds, one featured loader
   at a time; slides are stacked and swapped by assets/gallery.js. */
.dlc-hero-carousel { max-width: 920px; }
.dlc-carousel { position: relative; overflow: hidden; }
.dlc-slide {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; align-items: stretch;
  min-height: 176px;
}
.dlc-slide[hidden] { display: none; }
.dlc-slide.is-entering { animation: dlc-slide-in-x 420ms cubic-bezier(0.2, 0, 0, 1); }
/* Exits softer than enters: shorter travel, shorter time. */
.dlc-slide.is-leaving { position: absolute; inset: 0; animation: dlc-slide-out-x 300ms cubic-bezier(0.2, 0, 0, 1) forwards; }
@keyframes dlc-slide-in-x { from { translate: 40px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes dlc-slide-out-x { to { translate: -24px 0; opacity: 0; } }
.dlc-slide .dlc-hero-code { min-width: 0; }
/* Centre the one-line call in the row: the snippet is shorter than the stage. */
.dlc-slide .mantine-CodeHighlight-codeHighlight { position: relative; display: grid; align-content: center; height: 100%; }
.dlc-hero-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 20px; color: var(--mantine-color-text); text-decoration: none;
  border: 1px solid var(--dlc-border); border-radius: var(--mantine-radius-md);
  background:
    radial-gradient(circle, light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.06)) 1px, transparent 1px)
    0 0 / 16px 16px,
    var(--dlc-surface-sunken);
  transition-property: border-color; transition-duration: 150ms;
}
.dlc-hero-stage:hover { border-color: var(--dlc-accent); }
.dlc-hero-loader { display: flex; align-items: center; justify-content: center; height: 96px; }
.dlc-hero-name { font-family: var(--mantine-font-family-monospace); font-size: 13px; }
.dlc-hero-ns { color: var(--mantine-color-dimmed); }
.dlc-carousel-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.dlc-carousel-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border: 1px solid var(--dlc-border); border-radius: 50%; background: var(--dlc-surface);
  color: var(--mantine-color-dimmed); cursor: pointer;
  transition-property: color, border-color, scale; transition-duration: 120ms;
}
.dlc-carousel-btn:hover { color: var(--dlc-accent); border-color: var(--dlc-accent); }
.dlc-carousel-btn:active { scale: 0.96; }
.dlc-flip { rotate: 180deg; }
.dlc-carousel-dots { display: inline-flex; gap: 6px; }
.dlc-carousel-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dlc-border);
  transition-property: background-color, width; transition-duration: 200ms;
}
.dlc-carousel-dots i.is-active { background: var(--dlc-accent); width: 16px; border-radius: 3px; }
@media (max-width: 48em) {
  .dlc-slide { grid-template-columns: 1fr; }
}

.dlc-family { padding: 36px 0 8px; scroll-margin-top: 80px; }
.dlc-family-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 22px; letter-spacing: -0.02em;
}
.dlc-family-title .dlc-icon { color: var(--dlc-accent); }
.dlc-family-link { display: inline-flex; align-items: center; gap: 4px; }

.dlc-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.dlc-card {
  display: flex; flex-direction: column;
  aspect-ratio: 1; min-width: 0;
  background: var(--dlc-surface);
  border: 1px solid var(--dlc-border);
  border-radius: var(--mantine-radius-lg);
  color: var(--mantine-color-text);
  transition-property: border-color, box-shadow, translate;
  transition-duration: 150ms; transition-timing-function: ease-out;
}
.dlc-card:hover {
  border-color: var(--dlc-accent);
  box-shadow: 0 0 0 3px light-dark(rgb(253 126 20 / 0.12), rgb(253 126 20 / 0.18));
  translate: 0 -1px;
}
.dlc-card .preview {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  /* Slack for loaders that animate past their layout box; the clip below
     would otherwise shave the top off every bounce. */
  padding: 12px 8px;
  overflow: hidden; position: relative;
}
.dlc-card .name {
  padding: 0 10px 14px; text-align: center;
  font-size: 12.5px; font-weight: 500; color: var(--mantine-color-dimmed);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dlc-card:hover .name { color: var(--mantine-color-text); }

/* ---------- Component page ---------- */
.dlc-detail-page {
  max-width: 1280px;
  display: grid; gap: 40px; align-items: start;
  grid-template-columns: minmax(0, 1fr) var(--dlc-toc-w);
}
.dlc-detail-content { min-width: 0; }
.mantine-Breadcrumbs-breadcrumb { display: inline-flex; align-items: center; gap: 6px; }
.dlc-badge-link .mantine-Badge-label { display: inline-flex; align-items: center; gap: 4px; }
.dlc-section-title {
  margin: 40px 0 14px; font-size: 22px; letter-spacing: -0.02em;
  scroll-margin-top: 80px;
}

.dlc-demo { overflow: hidden; background: var(--dlc-surface); }
.dlc-demo-top {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
}
.dlc-preview-panel {
  min-height: 360px; padding: 40px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle, light-dark(rgb(0 0 0 / 0.07), rgb(255 255 255 / 0.06)) 1px, transparent 1px)
    0 0 / 16px 16px,
    var(--dlc-surface-sunken);
  /* Contain expanding animations (shimmer sweep, propagate, orbit rings). */
  overflow: hidden; position: relative;
}
.dlc-controls {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px 20px;
  border-left: 1px solid var(--dlc-border);
  max-height: 560px; overflow-y: auto;
}
.dlc-demo-code { border-top: 1px solid var(--dlc-border); border-radius: 0; }
/* Dash's slider, retinted to the accent and sized to the card. */
.dlc-ctrl-slider {
  padding: 0 2px;
  --Dash-Fill-Interactive-Strong: var(--dlc-accent);
  --Dash-Fill-Disabled: var(--dlc-border);
  --Dash-Fill-Inverse-Strong: var(--dlc-surface);
}
.dlc-ctrl-dropdown {
  --Dash-Fill-Interactive-Strong: var(--dlc-accent);
  --Dash-Text-Strong: var(--mantine-color-text);
  --Dash-Stroke-Weak: var(--dlc-border);
  --Dash-Fill-Inverse-Strong: var(--mantine-color-default);
  font-size: 14px;
}
/* Color control: swatch (native picker behind it) + free-text field. */
.dlc-color-input {
  display: flex; align-items: center; height: 36px;
  border: 1px solid var(--dlc-border); border-radius: var(--mantine-radius-md);
  background: var(--mantine-color-default);
}
.dlc-color-input:focus-within { border-color: var(--dlc-accent); }
.dlc-color-chip {
  position: relative; flex-shrink: 0; width: 20px; height: 20px; margin: 0 8px 0 10px;
  border-radius: 50%; background: var(--chip);
  box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.2));
  cursor: pointer;
}
.dlc-color-picker, .dlc-color-picker .dash-input-element {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.dlc-color-text { flex: 1; min-width: 0; height: 100%; margin: 0; border: none; box-shadow: none; }
.dlc-color-text .dash-input-element {
  width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: none; outline: none;
  box-shadow: none; color: var(--mantine-color-text); font-size: 14px;
  font-family: var(--mantine-font-family-monospace);
}
.dlc-color-text .dash-input-element::placeholder { color: var(--mantine-color-placeholder); font-family: var(--mantine-font-family); }

.dlc-prop-doc { padding: 14px 0 18px; border-bottom: 1px solid var(--dlc-border); }
.dlc-prop-doc:last-of-type { border-bottom: none; }
.dlc-prop-doc .dlc-toc-target { font-size: 17px; scroll-margin-top: 80px; }

.dlc-pager-card {
  transition-property: border-color; transition-duration: 150ms; transition-timing-function: ease-out;
}
.dlc-pager-card:hover { border-color: var(--dlc-accent); }

.dlc-toc {
  position: sticky; top: calc(var(--app-shell-header-height, 60px) + 32px);
  max-height: calc(100vh - var(--app-shell-header-height, 60px) - 64px); overflow-y: auto;
}

@media (max-width: 75em) {
  .dlc-detail-page { grid-template-columns: minmax(0, 1fr); }
  .dlc-toc { display: none; }
}
@media (max-width: 62em) {
  .dlc-demo-top { grid-template-columns: minmax(0, 1fr); }
  .dlc-controls { border-left: none; border-top: 1px solid var(--dlc-border); max-height: none; }
  .dlc-preview-panel { min-height: 260px; }
}

/* loading.dev Custom Classes demo (className passthrough) */
.opacity-40 { opacity: 0.4; }

/* Switch off the motion the gallery itself adds. The spinners are left alone:
   they are the subject matter, and each upstream library decides for itself
   what reduced motion means. */
@media (prefers-reduced-motion: reduce) {
  .dlc-card, .dlc-pager-card { transition-duration: 1ms; }
  .dlc-mark, .dlc-slide { animation: none !important; }
  .dlc-card:hover { translate: none; }
}