/* ==========================================================================
   DEVLESS - loader kit (L01-L10), "Hive Mind" dark UI
   Plain CSS + inline SVG, no fonts, no images, no dependencies.
   Reads the app tokens (--bg, --card, --cyan ...) and falls back to the
   mockup v3 values. Class prefix: dvl-
   Every animation has a prefers-reduced-motion variant at the end of the file.
   ========================================================================== */

:root {
  /* surfaces and lines */
  --dvl-bg: var(--bg, #05070D);
  --dvl-inset: var(--inset, #070A14);
  --dvl-card: var(--card, #0B1020);
  --dvl-line: var(--line, #1A2236);
  --dvl-line-strong: var(--line-strong, #2A3550);
  --dvl-cyan-line: var(--cyan-line-dark, #164A55);
  --dvl-violet-line: var(--violet-line-dark, #3B2A5C);

  /* text */
  --dvl-text: var(--text, #E8F0FF);
  --dvl-text-2: var(--text-2, #C9D5EA);
  --dvl-text-3: var(--text-3, #9FB0CC);
  --dvl-text-4: var(--text-4, #7A89A6);

  /* roles */
  --dvl-cyan: var(--cyan, #4FE3FF);            /* data, passed, signed, done */
  --dvl-cyan-2: var(--cyan-2, #7FEBFF);        /* graphics only */
  --dvl-cyan-3: var(--cyan-3, #BFF6FF);        /* graphics only: signals, cores */
  --dvl-cyan-4: var(--cyan-4, #E8FCFF);        /* graphics only */
  --dvl-on-cyan: var(--on-cyan, #04121A);
  --dvl-violet: var(--violet, #B06CFF);        /* thinking, the hive */
  --dvl-violet-2: var(--violet-2, #C99BFF);
  --dvl-violet-3: var(--violet-3, #E4CCFF);    /* graphics only */
  --dvl-violet-4: var(--violet-4, #EBDDFF);    /* graphics only */
  --dvl-amber: var(--amber, #FFB547);          /* refused, warning, taking longer */
  --dvl-asleep: var(--asleep, #3A4560);
  --dvl-error: var(--error, #FF6B6B);          /* PROPOSED: failures only, always with the octagon icon */
  --dvl-error-line: var(--error-line, rgba(255, 107, 107, .45));
  --dvl-error-tint: var(--error-tint, rgba(255, 107, 107, .08));
  --dvl-cyan-tint: var(--cyan-tint, rgba(79, 227, 255, .12));
  --dvl-violet-tint: var(--violet-tint, rgba(176, 108, 255, .16));
  --dvl-amber-tint: var(--amber-tint, rgba(255, 181, 71, .12));

  /* type and shape */
  --dvl-font-display: var(--font-display, "Archivo", system-ui, sans-serif);
  --dvl-font-mono: var(--font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
  --dvl-radius-control: var(--radius-control, 4px);
  --dvl-radius-inner: var(--radius-inner, 8px);
  --dvl-radius-card: var(--radius-card, 12px);

  /* skeleton */
  --dvl-skel: var(--dvl-line);
  --dvl-shimmer: rgba(79, 227, 255, .07);

  /* motion */
  --dvl-ease-out: cubic-bezier(.2, .7, .3, 1);
  --dvl-ease-in-out: cubic-bezier(.45, 0, .4, 1);
  --dvl-sticky-top: 12px;                       /* L05 pill offset under a sticky header */
}

/* ---------- shared keyframes (motion grid: .8 / 1.6 / 3.2 / 24 s) ---------- */
@keyframes dvl-spin { to { transform: rotate(360deg); } }
@keyframes dvl-signal {
  0% { stroke-dashoffset: 100; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes dvl-breathe { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.6); opacity: 0; } }
@keyframes dvl-core { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes dvl-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes dvl-caret { 50% { opacity: 0; } }
@keyframes dvl-fade-in { from { opacity: 0; } }
@keyframes dvl-fade-out { to { opacity: 0; } }
@keyframes dvl-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes dvl-draw { from { stroke-dashoffset: var(--dvl-len, 24); } to { stroke-dashoffset: 0; } }
@keyframes dvl-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes dvl-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.dvl-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* motif primitives for inline SVG marks */
.dvl-sig {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 16 84;
  stroke-dashoffset: 100;
  animation: dvl-signal 1.6s linear infinite;
  animation-delay: var(--d, 0s);
}
.dvl-breathe { transform-box: fill-box; transform-origin: center; animation: dvl-breathe 3.2s ease-out infinite; animation-delay: var(--d, 0s); }
.dvl-orbit { transform-box: fill-box; transform-origin: center; animation: dvl-spin 24s linear infinite; }
.dvl-pulse-core { animation: dvl-core 3.2s ease-in-out infinite; }
.dvl-twinkle { animation: dvl-twinkle 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* ---------- shared: icons in notes and boxes ---------- */
.dvl-ico { width: 14px; height: 14px; flex: none; }

/* ---------- shared: notes (slow, warning, declined, done) ---------- */
.dvl-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font: 500 12px/1.5 var(--dvl-font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dvl-text-3);
  text-wrap: balance;
  animation: dvl-fade-in .3s ease both;
}
.dvl-note > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.dvl-note--slow > svg { color: var(--dvl-amber); }
.dvl-note--warn { color: var(--dvl-amber); }
.dvl-note--declined { color: var(--dvl-text-2); }
.dvl-note--declined > svg { color: var(--dvl-amber); }
.dvl-note--done { color: var(--dvl-cyan); }
.dvl-note a { color: var(--dvl-cyan); text-decoration: none; }
.dvl-note a:hover { text-decoration: underline; }

/* slow note: hidden until the wrapper gets data-slow="true" (dvlSlowAfter) */
.dvl-slow-note { display: none; }
[data-slow="true"] > .dvl-slow-note,
[data-slow="true"] > * > .dvl-slow-note { display: flex; }

/* ---------- shared: error with retry ---------- */
.dvl-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--dvl-error-line);
  border-radius: var(--dvl-radius-inner);
  background: var(--dvl-error-tint);
  text-align: left;
  animation: dvl-fade-in .25s ease both;
}
.dvl-error > svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--dvl-error); }
.dvl-error__body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.dvl-error__title { margin: 0; font: 700 12px/1.5 var(--dvl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dvl-error); text-wrap: balance; }
.dvl-error__text { margin: 0; font: 400 14px/1.5 var(--dvl-font-display); color: var(--dvl-text-2); text-wrap: pretty; }
.dvl-error__chain { margin: 0; font: 500 12px/1.5 var(--dvl-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dvl-text); }
.dvl-error__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dvl-retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--dvl-line-strong);
  border-radius: var(--dvl-radius-control);
  background: transparent;
  color: var(--dvl-text);
  font: 500 12px var(--dvl-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.dvl-retry:hover { border-color: var(--dvl-cyan); }
.dvl-retry--ghost { border-color: transparent; color: var(--dvl-text-3); }

/* ---------- shared: honest empty states ---------- */
.dvl-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 22px;
  border: 1px dashed var(--dvl-line-strong);
  border-radius: var(--dvl-radius-card);
  animation: dvl-fade-in .3s ease both;
}
.dvl-empty__title { margin: 0; font: 700 20px/1.2 var(--dvl-font-display); font-stretch: 112%; color: var(--dvl-text); }
.dvl-empty__text { margin: 0; font: 400 15px/1.55 var(--dvl-font-display); color: var(--dvl-text-3); }
.dvl-empty__line { margin: 0; font: 500 12px/1.5 var(--dvl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dvl-text-4); text-wrap: balance; }
.dvl-empty__cta { color: var(--dvl-cyan); font: 500 13px var(--dvl-font-mono); letter-spacing: .08em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.dvl-empty--line { padding: 0; border: 0; }

/* ==========================================================================
   L04 the arc: every small spinner. A tiny node: track ring, turning
   quarter arc, still core. Reused by L02, L03, L05, L06, L07.
   ========================================================================== */
.dvl-spin {
  --size: 14px;
  --track: var(--dvl-line-strong);
  --arc: var(--dvl-cyan);
  --core: var(--dvl-cyan);
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: max(1.5px, calc(var(--size) / 8)) solid var(--track);
  border-top-color: var(--arc);
  vertical-align: -.15em;
  animation: dvl-spin .8s linear infinite;
}
.dvl-spin::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: max(2px, calc(var(--size) * .2));
  height: max(2px, calc(var(--size) * .2));
  border-radius: 50%;
  background: var(--core);
}
.dvl-spin--12 { --size: 12px; }
.dvl-spin--16 { --size: 16px; }
.dvl-spin--20 { --size: 20px; }
.dvl-spin--on-cyan { --track: rgba(4, 18, 26, .22); --arc: var(--dvl-on-cyan); --core: var(--dvl-on-cyan); }
.dvl-spin--violet { --arc: var(--dvl-violet-2); --core: var(--dvl-violet-2); }
.dvl-spin--quiet { --arc: var(--dvl-text-4); --core: var(--dvl-text-4); }

/* The node: ring + core + breathing halo. Color = currentColor.
   --await (white) = waiting for the person (L08). --think (violet) = AI at work. */
.dvl-node {
  --size: 12px;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1.5px solid currentColor;
  color: var(--dvl-text);
  vertical-align: -.15em;
}
.dvl-node::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: currentColor;
}
.dvl-node::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  animation: dvl-breathe 3.2s ease-out infinite;
}
.dvl-node--14 { --size: 14px; }
.dvl-node--16 { --size: 16px; }
.dvl-node--await { color: var(--dvl-text); }
.dvl-node--think { color: var(--dvl-violet-2); }
.dvl-node--on-cyan { color: var(--dvl-on-cyan); }

/* L04 button: idle and busy share one grid cell (.dvl-swap inside the button), so the
   button keeps its width whatever display the app gives it. The swap waits 150 ms
   (CSS), so fast actions never flicker. Set `disabled` and aria-busy on the button. */
.dvl-swap { display: inline-grid; place-items: center; max-width: 100%; }
.dvl-swap > .dvl-btn__idle,
.dvl-swap > .dvl-btn__busy {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  transition: visibility 0s;
}
.dvl-swap > .dvl-btn__busy { visibility: hidden; }
[aria-busy="true"] > .dvl-swap > .dvl-btn__idle { visibility: hidden; transition-delay: .15s; }
[aria-busy="true"] > .dvl-swap > .dvl-btn__busy { visibility: visible; transition-delay: .15s; }
.dvl-btn[aria-busy="true"] { cursor: progress; }
/* multi-phase busy label: every phase sits in the same cell; width = the longest phase */
.dvl-swap > .dvl-btn__busy.dvl-phases { display: inline-grid; justify-items: center; }
.dvl-phases > * { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.dvl-phases > [data-phase]:not([data-on]) { visibility: hidden; }
.dvl-count { display: inline-block; min-width: 3.2ch; text-align: left; font-variant-numeric: tabular-nums; text-transform: none; }

/* L04 inline status line (quote row, search, quota, balance, load more) */
.dvl-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1.5 var(--dvl-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dvl-text-3);
}

/* L04 field: ring inside the right edge of an input (search, CA, amount) */
.dvl-field { position: relative; display: flex; min-width: 0; }
.dvl-field > input { flex: 1 1 auto; min-width: 0; }
.dvl-field__status {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  display: flex;
  align-items: center;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s;
}
.dvl-field[aria-busy="true"] > .dvl-field__status { visibility: visible; transition-delay: .15s; }
.dvl-field[aria-busy="true"] > input { padding-right: 40px; }

/* L04 menu status row (search results: searching / no match) */
.dvl-menu-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  font: 500 12px var(--dvl-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dvl-text-3);
}

/* L04 success tick (draws itself) */
.dvl-done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px/1.5 var(--dvl-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dvl-cyan);
  animation: dvl-fade-in .2s ease both;
}
.dvl-done > svg { width: 14px; height: 14px; flex: none; }
/* the tick reveals left to right (works with inline paths and with <use> symbols) */
.dvl-tick { animation: dvl-tick-in .35s var(--dvl-ease-out) both; }
@keyframes dvl-tick-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.dvl-done a { color: var(--dvl-cyan); text-decoration: none; border-bottom: 1px solid rgba(79, 227, 255, .45); }

/* L04 upload progress: 2 px bar under the dropzone text (real percent) */
.dvl-upload { display: grid; gap: 8px; min-width: 0; }
.dvl-upload__bar { height: 2px; border-radius: 1px; background: var(--dvl-line); overflow: hidden; }
.dvl-upload__fill { display: block; height: 100%; width: var(--p, 0%); background: var(--dvl-cyan); transition: width .3s var(--dvl-ease-out); }

/* ==========================================================================
   L01 page skeletons + L03 section skeletons (shared primitives)
   Sweep = transform on ::after (compositor only). Labels stay real text.
   ========================================================================== */
.dvl-skel {
  position: relative;
  overflow: hidden;
  display: block;
  flex: 0 1 auto;           /* blocks shrink on narrow screens; avatars and dots do not */
  min-width: 0;
  width: var(--w, 100%);
  max-width: 100%;
  height: var(--h, 12px);
  border-radius: var(--r, 4px);
  background: var(--dvl-skel);
}
.dvl-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--dvl-shimmer) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: dvl-sweep 1.6s var(--dvl-ease-in-out) infinite;
}
.dvl-skel--label { --h: 8px; --r: 2px; }
.dvl-skel--text { --h: 10px; --r: 3px; }
.dvl-skel--body { --h: 12px; --r: 3px; }
.dvl-skel--title { --h: 20px; }
.dvl-skel--display { --h: 44px; }
.dvl-skel--number { --h: 24px; }
.dvl-skel--big { --h: 52px; }
.dvl-skel--chip { --w: 64px; --h: 22px; }
.dvl-skel--input { --h: 52px; }
.dvl-skel--button { --w: 160px; --h: 56px; }
.dvl-skel--bar { --h: 6px; --r: 3px; }
.dvl-skel--dot { --w: 8px; --h: 8px; --r: 50%; flex: none; }
.dvl-skel--avatar-44 { --w: 44px; --h: 44px; --r: 10px; flex: none; }
.dvl-skel--avatar-56 { --w: 56px; --h: 56px; --r: 12px; flex: none; }
.dvl-skel--avatar-72 { --w: 72px; --h: 72px; --r: 14px; flex: none; }
.dvl-skel--dev { --w: 64px; --h: 64px; --r: 50%; flex: none; }
.dvl-skel--art { --h: auto; aspect-ratio: 1; --r: 8px; }
.dvl-skel--block { --h: 120px; --r: 8px; }
.dvl-skel--on-inset { --dvl-skel: #141B2D; }

/* layout helpers for skeleton compositions (mirror the mockup layout) */
.dvl-sk-page { display: flex; flex-direction: column; gap: 28px; }
.dvl-sk-card {
  background: var(--dvl-card);
  border: 1px solid var(--dvl-line);
  border-radius: var(--dvl-radius-card);
  padding: var(--pad, 20px);
  display: flex;
  flex-direction: column;
  gap: var(--gap, 14px);
  min-width: 0;
  box-sizing: border-box;
}
.dvl-sk-stack { display: flex; flex-direction: column; gap: var(--gap, 8px); min-width: 0; }
.dvl-sk-row { display: flex; align-items: center; gap: var(--gap, 12px); min-width: 0; }
.dvl-sk-wrap { display: flex; flex-wrap: wrap; gap: var(--gap, 20px); align-items: flex-start; }
.dvl-sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 280px), 100%), 1fr)); gap: var(--gap, 14px); }
.dvl-sk-label { margin: 0; font: 500 11px/1.4 var(--dvl-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dvl-text-4); }
.dvl-sk-label--why { color: var(--dvl-violet-2); }
.dvl-sk-label--rule { color: var(--dvl-amber); }
.dvl-sk-label--result { color: var(--dvl-cyan); }
.dvl-sk-heading { margin: 0; font: 500 12px/1.4 var(--dvl-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dvl-text-3); }
.dvl-sk-divider { border-top: 1px solid var(--dvl-line); padding-top: var(--gap, 10px); }

/* section / page wrapper: data-state="loading" | "error" | "empty" | "ready"
   Children opt in with .dvl-when-loading / -error / -empty (direct children only). */
.dvl-section { display: flex; flex-direction: column; gap: var(--gap, 14px); min-width: 0; }
.dvl-section:not([data-state="loading"]) > .dvl-when-loading,
.dvl-section:not([data-state="error"]) > .dvl-when-error,
.dvl-section:not([data-state="empty"]) > .dvl-when-empty,
.dvl-section:not([data-state="ready"]) > .dvl-when-ready { display: none !important; }
.dvl-section[data-state="ready"] > .dvl-when-ready { animation: dvl-fade-in .3s ease both; }
.dvl-section[data-state="error"] > .dvl-not-error,
.dvl-section[data-state="empty"] > .dvl-not-empty { display: none !important; }

/* L01 "token is live, page still syncing" banner (after a launch, U18) */
.dvl-syncing {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 16px;
  border: 1px solid var(--dvl-cyan-line);
  border-radius: var(--dvl-radius-inner);
  background: var(--dvl-inset);
  font: 500 12px/1.5 var(--dvl-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dvl-text-2);
}
.dvl-syncing strong { color: var(--dvl-cyan); font-weight: 500; }
.dvl-syncing { display: none; }
[data-sync="true"] > .dvl-syncing,
[data-sync="true"] > * > .dvl-syncing { display: flex; }

/* L03 verify rows: each row checks itself (data-state on the row) */
.dvl-vrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; min-height: 18px; }
.dvl-vrow > dt { color: var(--dvl-text-3); }
.dvl-vrow > dd { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--dvl-cyan); }
.dvl-vrow .dvl-vrow__wait,
.dvl-vrow .dvl-vrow__value { display: none; }
.dvl-vrow[data-state="pending"] .dvl-vrow__wait,
.dvl-vrow[data-state="checking"] .dvl-vrow__wait { display: inline-flex; align-items: center; gap: 8px; }
.dvl-vrow[data-state="pending"] .dvl-spin { visibility: hidden; }
.dvl-vrow[data-state="done"] .dvl-vrow__value { display: inline-flex; align-items: center; gap: 6px; animation: dvl-fade-in .3s ease both; }

/* ==========================================================================
   L02 market cap chart loader
   ========================================================================== */
.dvl-chart { position: relative; height: var(--h, 320px); min-width: 0; }
.dvl-chart > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.dvl-chart__grid line { stroke: var(--dvl-line); stroke-width: 1; }
.dvl-chart__ghost { fill: none; stroke: var(--dvl-line-strong); stroke-width: 2; stroke-linecap: round; }
.dvl-chart__draw,
.dvl-chart__sig { fill: none; stroke-linecap: round; animation-duration: 3.2s; animation-timing-function: linear; animation-iteration-count: infinite; }
.dvl-chart__draw { stroke: var(--dvl-cyan); stroke-opacity: .28; stroke-width: 2; stroke-dasharray: 100 200; stroke-dashoffset: 100; animation-name: dvl-chart-draw; }
.dvl-chart__sig { stroke: var(--dvl-cyan-3); stroke-width: 2.6; stroke-dasharray: 6 200; stroke-dashoffset: 6; animation-name: dvl-chart-sig; filter: drop-shadow(0 0 4px rgba(79, 227, 255, .9)); }
@keyframes dvl-chart-draw { 0% { stroke-dashoffset: 100; opacity: 1; } 84% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dvl-chart-sig { 0% { stroke-dashoffset: 6; opacity: 0; } 6% { opacity: 1; } 80% { opacity: 1; } 84%, 100% { stroke-dashoffset: -94; opacity: 0; } }
.dvl-chart__old { transition: opacity .2s ease; }
.dvl-chart__layer { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; }
.dvl-chart__badge { position: absolute; top: 10px; right: 10px; visibility: hidden; opacity: 0; transition: opacity .15s ease, visibility 0s .15s; }
.dvl-chart[data-state="refresh"] .dvl-chart__old { opacity: .45; transition-delay: .2s; }
.dvl-chart[data-state="refresh"] .dvl-chart__badge { visibility: visible; opacity: 1; transition: opacity .15s ease .2s, visibility 0s .2s; }
.dvl-chart:not([data-state="loading"]) .dvl-when-loading,
.dvl-chart:not([data-state="refresh"]):not([data-state="ready"]) .dvl-chart__old,
.dvl-chart:not([data-state="error"]) .dvl-when-error,
.dvl-chart:not([data-state="empty"]) .dvl-when-empty { display: none; }
.dvl-chart__layer > .dvl-error { background: linear-gradient(var(--dvl-error-tint), var(--dvl-error-tint)), var(--dvl-card); max-width: 420px; }
.dvl-chart .dvl-slow-note { position: absolute; left: 0; bottom: 8px; }
.dvl-chart[data-slow="true"] .dvl-slow-note { display: flex; }

/* badge (L02 refresh, L13-style corner status) */
.dvl-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--dvl-line-strong);
  border-radius: var(--dvl-radius-control);
  background: var(--dvl-card);
  font: 500 11px var(--dvl-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dvl-text-2);
  white-space: nowrap;
}

/* ==========================================================================
   L05 list refresh: dim the old list, pin a pill to its top
   ========================================================================== */
.dvl-refresh { position: relative; }
.dvl-refresh > .dvl-refresh__content { transition: opacity .2s ease; }
.dvl-refresh[aria-busy="true"] > .dvl-refresh__content { opacity: .45; transition-delay: .2s; pointer-events: none; }
.dvl-refresh > .dvl-refresh__pill {
  position: sticky;
  top: var(--dvl-sticky-top);
  z-index: 3;
  height: 0;
  display: flex;
  justify-content: center;
  overflow: visible;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease, visibility 0s .15s;
}
.dvl-refresh > .dvl-refresh__pill > * { transform: translateY(-50%); }   /* straddles the top edge: covers padding, never text */
.dvl-refresh[aria-busy="true"] > .dvl-refresh__pill,
.dvl-refresh[data-state="error"] > .dvl-refresh__pill { visibility: visible; opacity: 1; transition: opacity .15s ease .2s, visibility 0s .2s; }
.dvl-refresh[data-state="error"] > .dvl-refresh__pill { transition-delay: 0s; }
.dvl-refresh .dvl-pill--error { display: none; }
.dvl-refresh[data-state="error"] .dvl-pill--error { display: inline-flex; }
.dvl-refresh[data-state="error"] .dvl-pill:not(.dvl-pill--error) { display: none; }
.dvl-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--dvl-line);
  border-radius: var(--dvl-radius-control);
  background: var(--dvl-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  font: 500 11px var(--dvl-font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dvl-text-2);
  white-space: nowrap;
}
.dvl-pill--error { border-color: var(--dvl-error-line); color: var(--dvl-error); padding-right: 4px; }
.dvl-pill--error > svg { width: 13px; height: 13px; flex: none; }
.dvl-pill__retry { height: 22px; padding: 0 8px; border: 0; border-left: 1px solid var(--dvl-line-strong); background: transparent; color: var(--dvl-text); font: inherit; letter-spacing: inherit; cursor: pointer; }
/* pending mark on the clicked sort / filter button (2 px, breathes) */
.dvl-pending { position: relative; }
.dvl-pending::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 5px;
  height: 2px;
  border-radius: 1px;
  background: var(--dvl-cyan);
  animation: dvl-twinkle 1.6s ease-in-out infinite;
}

/* ==========================================================================
   L06 launch bundle steps + "join the hive" header graphic
   Root data-state: connecting | running | done | error
   Step data-state: pending | active | wallet | done | failed ; data-slow on a step
   ========================================================================== */
.dvl-launch { display: flex; flex-direction: column; gap: 22px; }
.dvl-launch__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.dvl-launch__titles { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dvl-launch__eyebrow { margin: 0; font: 500 12px/1.4 var(--dvl-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dvl-text-4); }
.dvl-launch__title { margin: 0; font: 800 28px/1 var(--dvl-font-display); font-stretch: 118%; text-transform: uppercase; color: var(--dvl-text); text-wrap: balance; }
.dvl-launch[data-state="done"] .dvl-launch__eyebrow { color: var(--dvl-cyan); }
.dvl-launch__foot { margin: 0; font: 400 13px/1.5 var(--dvl-font-display); color: var(--dvl-text-4); }
.dvl-launch:not([data-state="error"]) > .dvl-when-error { display: none; }
.dvl-launch:not([data-state="done"]) > .dvl-when-done { display: none; }

.dvl-joinhive { width: 112px; height: 56px; flex: none; overflow: visible; }
.dvl-joinhive .jh-net line { stroke: var(--dvl-violet-2); stroke-opacity: .28; stroke-width: .8; }
.dvl-joinhive .jh-sat { fill: var(--dvl-cyan-2); }
.dvl-joinhive .jh-link { stroke: var(--dvl-violet-2); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 2 3; }
.dvl-joinhive .jh-sig { stroke: var(--dvl-violet-4); stroke-width: 2.2; stroke-dasharray: 22 78; }
.dvl-joinhive .jh-hive { filter: drop-shadow(0 0 6px rgba(176, 108, 255, .9)); }
.dvl-joinhive .jh-hive-ring { fill: none; stroke: var(--dvl-violet-2); stroke-width: 1.2; }
.dvl-joinhive .jh-hive-orbit { fill: none; stroke: var(--dvl-violet-2); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 2 5; }
.dvl-joinhive .jh-hive-core { fill: var(--dvl-violet-3); }
.dvl-joinhive .jh-new-ring { fill: none; stroke: var(--dvl-line-strong); stroke-width: 1.2; stroke-dasharray: 3 3; transition: stroke .4s ease; }
.dvl-joinhive .jh-new-core { fill: var(--dvl-line-strong); transition: fill .4s ease; }
.dvl-joinhive .jh-new-halo { fill: none; stroke: var(--dvl-cyan); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* done: the new node lights up cyan and the link turns solid */
.dvl-launch[data-state="done"] .jh-sig { display: none; }
.dvl-launch[data-state="done"] .jh-link { stroke: var(--dvl-cyan); stroke-opacity: .7; stroke-dasharray: none; }
.dvl-launch[data-state="done"] .jh-new { filter: drop-shadow(0 0 8px rgba(79, 227, 255, .9)); }
.dvl-launch[data-state="done"] .jh-new-ring { stroke: var(--dvl-cyan); stroke-dasharray: none; }
.dvl-launch[data-state="done"] .jh-new-core { fill: var(--dvl-cyan-3); }
.dvl-launch[data-state="done"] .jh-new-halo { animation: dvl-breathe 3.2s ease-out infinite; }
/* error / waiting for the wallet: no thoughts travel */
.dvl-launch[data-state="error"] .jh-sig,
.dvl-launch[data-wallet="true"] .jh-sig { display: none; }
.dvl-launch[data-state="error"] .jh-hive { filter: none; opacity: .55; }
.dvl-launch[data-state="error"] .dvl-breathe,
.dvl-launch[data-state="error"] .dvl-orbit { animation: none; }

.dvl-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--dvl-line); }
.dvl-step {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 4px 14px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--dvl-line);
  color: var(--dvl-text-4);
}
.dvl-step__mark { position: relative; width: 18px; height: 18px; display: grid; place-items: center; margin-top: 1px; }
.dvl-step__mark > * { display: none; }
.dvl-step__mark::before { content: ""; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--dvl-line-strong); border-radius: 3px; }
.dvl-step__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dvl-step__label { font: 500 13px/1.45 var(--dvl-font-mono); letter-spacing: .1em; text-transform: uppercase; text-wrap: balance; }
.dvl-step__hint { font: 400 13px/1.5 var(--dvl-font-display); color: var(--dvl-text-4); text-wrap: pretty; }
.dvl-step__proof { display: none; font: 500 12px/1.5 var(--dvl-font-mono); letter-spacing: .04em; color: var(--dvl-cyan); }
.dvl-step__proof a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(79, 227, 255, .45); }
.dvl-step__time { visibility: hidden; font: 500 12px/1.6 var(--dvl-font-mono); color: var(--dvl-text-3); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.dvl-step__extra { display: none; grid-column: 2 / -1; margin-top: 10px; }
.dvl-step .dvl-slow-note { grid-column: 2 / -1; margin-top: 6px; }
.dvl-step[data-slow="true"] > .dvl-slow-note { display: flex; }

.dvl-step[data-state="active"],
.dvl-step[data-state="wallet"] { color: var(--dvl-text); }
.dvl-step[data-state="active"] .dvl-step__mark::before,
.dvl-step[data-state="wallet"] .dvl-step__mark::before,
.dvl-step[data-state="done"] .dvl-step__mark::before,
.dvl-step[data-state="failed"] .dvl-step__mark::before { display: none; }
.dvl-step[data-state="active"] .dvl-step__mark > .dvl-spin { display: inline-block; }
.dvl-step[data-state="active"] .dvl-step__time { visibility: visible; }
.dvl-step[data-state="wallet"] .dvl-step__mark > .dvl-node { display: inline-block; }
.dvl-step[data-state="wallet"] .dvl-step__extra { display: block; }
.dvl-step[data-state="done"] { color: var(--dvl-cyan); }
.dvl-step[data-state="done"] .dvl-step__mark { border: 1px solid rgba(79, 227, 255, .5); border-radius: 4px; box-sizing: border-box; }
.dvl-step[data-state="done"] .dvl-step__mark > .dvl-tick { display: block; width: 12px; height: 12px; color: var(--dvl-cyan); }
.dvl-step[data-state="done"] .dvl-step__proof { display: block; animation: dvl-fade-in .3s ease both; }
.dvl-step[data-state="done"] .dvl-step__hint { display: none; }
.dvl-step[data-state="failed"] { color: var(--dvl-error); }
.dvl-step[data-state="failed"] .dvl-step__mark > .dvl-x { display: block; width: 16px; height: 16px; color: var(--dvl-error); }
/* connected, no step yet: the first row shows a quiet starting line */
.dvl-launch[data-state="connecting"] .dvl-step:first-child .dvl-step__hint::after { content: ""; display: block; width: 46%; height: 8px; margin-top: 6px; border-radius: 2px; background: var(--dvl-line); }

/* ==========================================================================
   L07 studio pitch generation (AI, 15-90 s)
   Root .dvl-studio data-state: idle | working | done | error ; data-slow
   Pitch card data-state: pending | ready
   ========================================================================== */
.dvl-studio { display: flex; flex-direction: column; gap: 16px; }
.dvl-studio__status { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.dvl-studio__lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.dvl-studio__text { margin: 0; font: 500 13px/1.45 var(--dvl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dvl-violet-2); text-wrap: balance; transition: opacity .25s ease; }
.dvl-studio__text.is-out,
.dvl-rot.is-out { opacity: 0; }
.dvl-rot { transition: opacity .25s ease; }
.dvl-studio__meta { margin: 0; font: 500 12px/1.5 var(--dvl-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dvl-text-4); font-variant-numeric: tabular-nums; }
.dvl-studio:not([data-state="working"]) .dvl-studio__status { display: none; }
.dvl-studio:not([data-state="error"]) > .dvl-when-error { display: none; }
.dvl-studio:not([data-state="done"]) > .dvl-when-done { display: none; }
.dvl-studio[data-slow="true"] .dvl-slow-note { display: flex; }
.dvl-studio[data-state="error"] .dvl-pitches,
.dvl-studio[data-state="idle"] .dvl-pitches { display: none; }

.dvl-mind { width: var(--size, 56px); height: var(--size, 56px); flex: none; overflow: visible; }
.dvl-mind .m-link { stroke: var(--dvl-violet-2); stroke-opacity: .3; stroke-width: .8; }
.dvl-mind .m-sig { stroke: var(--dvl-violet-4); stroke-width: 2; }
.dvl-mind .m-agent { fill: var(--dvl-violet-2); }
.dvl-mind .m-hive { filter: drop-shadow(0 0 6px rgba(176, 108, 255, .9)); }
.dvl-mind .m-ring { fill: none; stroke: var(--dvl-violet-2); stroke-width: 1.2; }
.dvl-mind .m-orbit { fill: none; stroke: var(--dvl-violet-2); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 2 5; }
.dvl-mind .m-core { fill: var(--dvl-violet-3); }

/* three pitch cards in the making (same box as the real pitch card) */
.dvl-pitches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.dvl-pitch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--dvl-line-strong);
  border-radius: var(--dvl-radius-inner);
  background: var(--dvl-inset);
  min-width: 0;
}
.dvl-pitch__art { position: relative; }
.dvl-pitch__agent { position: absolute; inset: 0; display: grid; place-items: center; }
.dvl-pitch__wait { display: flex; flex-direction: column; gap: 8px; }
.dvl-pitch__ready { display: none; }
.dvl-pitch[data-state="ready"] .dvl-pitch__wait { display: none; }
.dvl-pitch[data-state="ready"] .dvl-pitch__ready { display: contents; }
.dvl-pitch[data-state="ready"] { animation: dvl-fade-in .4s ease both; }
.dvl-pitch__img { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; animation: dvl-fade-in .5s ease both; }
.dvl-pitch__name { font: 800 17px/1.2 var(--dvl-font-display); font-stretch: 112%; color: var(--dvl-text); }
.dvl-pitch__ticker { font: 400 12px var(--dvl-font-mono); color: var(--dvl-text-4); }
.dvl-dim { transition: opacity .2s ease; }
.dvl-dim[aria-busy="true"] { opacity: .45; pointer-events: none; }

/* the spark: 15 px mini dev avatar for AI buttons; satellites twinkle in turn */
.dvl-spark { width: var(--size, 15px); height: var(--size, 15px); flex: none; overflow: visible; color: currentColor; vertical-align: -.2em; }
.dvl-spark .s-ring { fill: none; stroke: currentColor; stroke-opacity: .45; stroke-width: 1; }
.dvl-spark .s-core { fill: currentColor; }
.dvl-spark .s-sat { fill: currentColor; animation: dvl-twinkle 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }

/* ==========================================================================
   L08 waiting for the wallet signature (the person's turn)
   Almost still: one slow breath, no spinner, no progress.
   ========================================================================== */
.dvl-wallet { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dvl-wallet__mark { width: var(--size, 48px); height: var(--size, 48px); flex: none; overflow: visible; color: var(--dvl-text); filter: drop-shadow(0 0 6px rgba(232, 240, 255, .35)); }
.dvl-wallet__mark .w-ring { fill: none; stroke: currentColor; stroke-width: 1.4; }
.dvl-wallet__mark .w-core { fill: currentColor; }
.dvl-wallet__mark .w-halo { fill: none; stroke: currentColor; stroke-width: 1.2; }
.dvl-wallet__mark .w-link { stroke: currentColor; stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 2 3; }
.dvl-wallet__mark .w-wallet { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.dvl-wallet__mark .w-clasp { fill: currentColor; }
.dvl-wallet__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dvl-wallet__title { margin: 0; font: 700 13px/1.45 var(--dvl-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dvl-text); }
.dvl-wallet__hint { margin: 0; font: 400 13px/1.5 var(--dvl-font-display); color: var(--dvl-text-3); text-wrap: pretty; }
.dvl-wallet .dvl-slow-note { margin-top: 4px; }
.dvl-wallet[data-slow="true"] .dvl-slow-note { display: flex; }
.dvl-wallet__cancel {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--dvl-text-3);
  font: 500 12px var(--dvl-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.dvl-wallet__cancel:hover { color: var(--dvl-text); }
/* strip variant: replaces the 56 px trade button, same height */
.dvl-wallet--strip {
  min-height: 56px;
  padding: 6px 4px 6px 12px;
  border: 1px solid var(--dvl-line-strong);
  border-radius: var(--dvl-radius-control);
  background: var(--dvl-inset);
  box-sizing: border-box;
  gap: 12px;
}
.dvl-wallet--strip .dvl-wallet__mark { --size: 40px; }

/* ==========================================================================
   L09 brand loader: the logo hexagon, signals along the spokes
   data-dir="out" (opening X) | "in" (connecting X to your dev)
   ========================================================================== */
.dvl-brand { display: grid; justify-items: center; gap: 16px; text-align: center; animation: dvl-fade-in .3s ease both; }
.dvl-brand__mark { width: var(--size, 64px); height: var(--size, 64px); overflow: visible; filter: drop-shadow(0 0 8px rgba(79, 227, 255, .7)); }
.dvl-brand__mark .b-hex { fill: none; stroke: var(--dvl-cyan); stroke-width: 2; stroke-linejoin: round; }
.dvl-brand__mark .b-spoke { stroke: var(--dvl-cyan); stroke-opacity: .45; stroke-width: 1.2; }
.dvl-brand__mark .b-sig { stroke: var(--dvl-cyan-3); stroke-width: 2.4; stroke-dasharray: 22 78; }
.dvl-brand__mark .b-orbit { fill: none; stroke: var(--dvl-cyan-2); stroke-opacity: .45; stroke-width: 1; stroke-dasharray: 2 6; }
.dvl-brand__mark .b-core { fill: var(--dvl-cyan); }
.dvl-brand__mark .b-halo { fill: none; stroke: var(--dvl-cyan); stroke-width: 1.4; }
.dvl-brand[data-dir="out"] .b-sig { animation-direction: reverse; }
.dvl-brand > .dvl-when-loading { display: grid; justify-items: center; gap: 8px; }
.dvl-brand__text { margin: 0; font: 500 12px/1.5 var(--dvl-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dvl-text-2); text-wrap: balance; }
.dvl-brand__sub { margin: 0; font: 400 14px/1.5 var(--dvl-font-display); color: var(--dvl-text-4); max-width: 34ch; }
.dvl-brand[data-slow="true"] .dvl-slow-note { display: flex; }
.dvl-brand[data-state="error"] .dvl-brand__mark { filter: none; opacity: .4; }
.dvl-brand[data-state="error"] .b-sig { display: none; }
.dvl-brand[data-state="error"] .dvl-breathe,
.dvl-brand[data-state="error"] .dvl-orbit { animation: none; }
.dvl-brand:not([data-state="error"]) > .dvl-when-error { display: none; }
.dvl-brand[data-state="error"] > .dvl-when-loading { display: none; }
.dvl-brand-screen { min-height: min(70vh, 560px); display: grid; place-items: center; padding: 32px 16px; background: var(--dvl-bg); }

/* ==========================================================================
   L10 the dev is thinking (ambient): avatar, status dot, status line,
   thinking card at the top of the feed. data-state: awake | thinking | asleep
   ========================================================================== */
.dvl-dev { width: var(--size, 64px); height: var(--size, 64px); flex: none; overflow: visible; }
.dvl-dev .dv-ring { fill: none; stroke-width: .8; }
.dvl-dev .dv-links line { stroke-width: .8; }
.dvl-dev .dv-sig { stroke-width: 1.8; stroke-dasharray: 26 74; }
.dvl-dev .dv-halo { fill: none; stroke-width: 1; }
/* awake (mockup): cyan, still */
.dvl-dev,
.dvl-dev[data-state="awake"] { filter: drop-shadow(0 0 10px rgba(79, 227, 255, .9)); }
.dvl-dev .dv-ring { stroke: var(--dvl-cyan); stroke-opacity: .45; }
.dvl-dev .dv-core { fill: var(--dvl-cyan); }
.dvl-dev .dv-inner { fill: var(--dvl-cyan-4); }
.dvl-dev .dv-sat { fill: var(--dvl-cyan-2); }
.dvl-dev .dv-links,
.dvl-dev .dv-sigs,
.dvl-dev .dv-halo { display: none; }
/* thinking: violet, satellites send signals to the core, core breathes */
.dvl-dev[data-state="thinking"] { filter: drop-shadow(0 0 10px rgba(176, 108, 255, .9)); }
.dvl-dev[data-state="thinking"] .dv-ring { stroke: var(--dvl-violet-2); stroke-opacity: .5; }
.dvl-dev[data-state="thinking"] .dv-core { fill: var(--dvl-violet); animation: dvl-core 3.2s ease-in-out infinite; }
.dvl-dev[data-state="thinking"] .dv-inner { fill: var(--dvl-violet-3); }
.dvl-dev[data-state="thinking"] .dv-sat { fill: var(--dvl-violet-2); animation: dvl-twinkle 1.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.dvl-dev[data-state="thinking"] .dv-links { display: inline; }
.dvl-dev[data-state="thinking"] .dv-links line { stroke: var(--dvl-violet-2); stroke-opacity: .35; }
.dvl-dev[data-state="thinking"] .dv-sigs { display: inline; }
.dvl-dev[data-state="thinking"] .dv-sig { stroke: var(--dvl-violet-4); }
.dvl-dev[data-state="thinking"] .dv-halo { display: inline; stroke: var(--dvl-violet-2); }
/* asleep: grey, no glow, never moves */
.dvl-dev[data-state="asleep"] { filter: none; }
.dvl-dev[data-state="asleep"] .dv-ring { stroke: var(--dvl-asleep); stroke-opacity: 1; }
.dvl-dev[data-state="asleep"] .dv-core { fill: var(--dvl-asleep); }
.dvl-dev[data-state="asleep"] .dv-inner { fill: #56627E; }
.dvl-dev[data-state="asleep"] .dv-sat { fill: var(--dvl-asleep); }

.dvl-dot { display: inline-block; flex: none; width: var(--size, 8px); height: var(--size, 8px); border-radius: 50%; background: var(--dvl-cyan); box-shadow: 0 0 8px var(--dvl-cyan); }
.dvl-dot[data-state="thinking"] { background: var(--dvl-violet); box-shadow: 0 0 8px var(--dvl-violet); animation: dvl-dot-pulse 3.2s ease-in-out infinite; }
.dvl-dot[data-state="asleep"] { background: var(--dvl-asleep); box-shadow: none; }
.dvl-dot--7 { --size: 7px; }

.dvl-devstate { display: inline-flex; align-items: flex-start; gap: 8px; font: 500 12px/1.5 var(--dvl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dvl-cyan); min-width: 0; }
.dvl-devstate[data-state="thinking"] { color: var(--dvl-violet-2); }
.dvl-devstate[data-state="asleep"] { color: var(--dvl-text-4); }
.dvl-devstate__phase { display: inline; }
.dvl-devstate > .dvl-dot { margin-top: calc(.75em - var(--size, 8px) / 2); }

.dvl-caret { display: inline-block; width: 8px; height: 14px; margin-left: 3px; vertical-align: -2px; background: currentColor; animation: dvl-caret 1.6s steps(1) infinite; }

/* thinking card: top of "WHAT IT DID, AND WHY" while a cycle runs */
.dvl-thinking {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  min-height: 56px;
  padding: 12px 18px;
  border: 1px solid var(--dvl-violet-line);
  border-radius: var(--dvl-radius-card);
  background: var(--dvl-card);
  box-sizing: border-box;
  animation: dvl-fade-in .4s ease both;
}
.dvl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--dvl-radius-control); font: 500 11px var(--dvl-font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.dvl-chip--think { color: var(--dvl-violet-2); background: var(--dvl-violet-tint); }
.dvl-chip--idle { color: var(--dvl-text-3); border: 1px solid var(--dvl-line-strong); padding: 3px 7px; }
.dvl-thinking__text { flex: 1 1 220px; min-width: 0; font: 500 13px/1.45 var(--dvl-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dvl-text-2); }
.dvl-thinking__text .dvl-caret { color: var(--dvl-violet-2); }
.dvl-thinking__time { margin-left: auto; font: 500 12px var(--dvl-font-mono); letter-spacing: .06em; color: var(--dvl-text-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dvl-thinking[data-state="nomove"] { border-color: var(--dvl-line); }
.dvl-thinking[data-state="nomove"] .dvl-caret { display: none; }
/* the new move card arrives: rises in, violet edge fades out */
.dvl-enter { position: relative; animation: dvl-rise .5s var(--dvl-ease-out) both; }
.dvl-enter::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--dvl-violet-2);
  border-radius: inherit;
  pointer-events: none;
  animation: dvl-fade-out 1.6s ease .4s both;
}

/* ==========================================================================
   Reduced motion: one block for the whole kit.
   Arcs stop turning and only fade (opacity, no rotation), shimmer and
   signals stop, marks stand still at ~55 %, nothing that carries meaning
   disappears.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dvl-spin { animation: dvl-twinkle 1.6s ease-in-out infinite; transform: none; }
  .dvl-skel::after { animation: none; opacity: 0; }
  .dvl-sig,
  .dvl-chart__sig { animation: none; opacity: 0; }
  .dvl-chart__draw { animation: none; stroke-dashoffset: 0; }
  .dvl-breathe,
  .dvl-orbit,
  .dvl-pulse-core,
  .dvl-twinkle,
  .dvl-spark .s-sat,
  .dvl-pending::after,
  .dvl-dot[data-state="thinking"],
  .dvl-dev[data-state="thinking"] .dv-core,
  .dvl-dev[data-state="thinking"] .dv-sat { animation: none; }
  .dvl-breathe { opacity: .35; }
  .dvl-node::after { animation: none; transform: scale(1.45); opacity: .35; }
  .dvl-caret { animation: none; }
  .dvl-joinhive,
  .dvl-mind,
  .dvl-brand__mark,
  .dvl-wallet__mark { opacity: .55; }
  .dvl-launch[data-state="done"] .dvl-joinhive { opacity: 1; }
  .dvl-launch[data-state="done"] .jh-new-halo { animation: none; opacity: .35; transform: scale(1.4); transform-box: fill-box; transform-origin: center; }
  .dvl-dev[data-state="thinking"] .dv-halo { animation: none; opacity: .4; }
  .dvl-enter,
  .dvl-rise { animation: dvl-fade-in .3s ease both; }
  .dvl-tick { animation: none; }
  .dvl-chart__badge,
  .dvl-refresh > .dvl-refresh__pill { transition-property: visibility; }
}