/* docs.vyre.run demo widgets (demos.js). Linked only from pages with a `::: demo`.
   The Capsule mock took its values from the first Capsule's stylesheet and docs/design/TOKENS.md:
   the Capsule is a dark window in both site themes, as it is on the Mac. The onboarding slides
   use the site's own tokens, so they follow the theme. */

.demo-on { margin: 0 0 24px; }

/* ---- the Capsule ---- */
.vd-capwrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); }
.vd-cap {
  --graphite: #0E0D0C; --carbon: #161513; --raised: #1E1C1A; --rule: #2B2926; --rule-strong: #3A3733;
  --ash: #8C877D; --stone: #B3AEA4; --bone: #F1EEE6;
  --signal: #F1EEE6; --signal-wash: rgba(241,238,230,0.12);
  --recall: #EBC76B; --recall-wash: rgba(235,199,107,0.10);
  width: 100%; max-width: 680px; background: var(--carbon); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(241,238,230,0.06), 0 24px 48px -24px rgba(0,0,0,0.6);
  color: var(--bone); font-family: var(--sans); font-size: 14px; line-height: 20px; text-align: left; color-scheme: dark;
}
.vd-cap .vd-lbl { font-family: var(--mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.vd-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px 0 16px; cursor: text; }
.vd-mark svg { display: block; }
.vd-field { flex-grow: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.vd-chip { font-family: var(--mono); font-size: 13px; line-height: 18px; padding: 2px 6px; border-radius: 4px; background: var(--raised); border: 1px solid var(--rule-strong); color: var(--bone); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.vd-chip[hidden] { display: none; }
.vd-cap input { flex-grow: 1; min-width: 0; height: 40px; background: transparent; border: 0; outline: none; padding: 0; font: 400 16px/22px var(--sans); color: var(--bone); caret-color: var(--signal); -webkit-appearance: none; appearance: none; }
.vd-cap input::placeholder { color: var(--ash); }
.vd-hint { flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--ash); }

.vd-sect { border-top: 1px solid var(--rule); }
.vd-pad { padding: 6px; }
.vd-note-in { padding: 10px 16px 12px; font-size: 13px; line-height: 18px; color: var(--stone); }

.vd-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; min-width: 0; cursor: default; }
.vd-row.on { background: var(--signal-wash); }
.vd-row .vd-kind { width: 88px; flex-shrink: 0; white-space: nowrap; }
.vd-row .vd-t { font-size: 14px; line-height: 20px; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vd-row .vd-s { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--ash); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vd-row.res { height: 40px; padding: 0 12px 0 8px; gap: 10px; }
.vd-row.res .vd-t { flex-shrink: 1; }
.vd-row.res .vd-s { margin-left: 0; flex: 1 1 auto; }
.vd-row.res:not(.on):hover { background: var(--raised); }
.vd-row.calc .vd-t { font-family: var(--mono); font-size: 16px; font-weight: 500; }
.vd-row.ask .vd-t { font-weight: 500; flex-shrink: 0; }
.vd-acc { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 11px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); padding-left: 8px; }
.vd-row.on .vd-acc { color: var(--signal); letter-spacing: 0; }
.vd-ic { width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--rule-strong); }
.vd-ic svg { display: block; }
.vd-ic.gold { background: var(--recall-wash); box-shadow: inset 0 0 0 1px rgba(235,199,107,0.35); }
.vd-row.on .vd-ic { box-shadow: inset 0 0 0 1px rgba(241,238,230,0.35); }

/* Memory: gold, and only here. */
.vd-recall { background: var(--recall-wash); padding: 10px 16px 12px 44px; display: flex; flex-direction: column; gap: 6px; }
.vd-recall .vd-lbl { color: var(--recall); }
.vd-answer { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--recall); }
.vd-src { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; color: var(--stone); }
.vd-src .vd-ic { width: 18px; height: 18px; border-radius: 4px; }
.vd-src .vd-ic svg { width: 12px; height: 12px; }

.vd-replyhead { display: flex; align-items: center; gap: 12px; padding: 10px 16px 0 44px; }
.vd-replyhead .vd-lbl.on { color: var(--signal); }
.vd-who { font-size: 13px; color: var(--stone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.vd-replyhead + .vd-recall { margin-top: 10px; }
.vd-sect.vd-reply { border-top: 0; padding: 8px 16px 14px 44px; font-size: 14px; line-height: 21px; color: var(--bone); }
.vd-replyhead + .vd-reply { padding-top: 6px; }

.vd-keys { height: 32px; display: flex; align-items: center; gap: 16px; padding: 0 16px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--ash); white-space: nowrap; overflow: hidden; }
.vd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vd-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--text-3); text-align: center; }
.vd-try { font: inherit; font-family: var(--mono); font-size: 12px; padding: 1px 6px; margin: 0 1px; border: 1px solid var(--line-2); border-radius: var(--r-1); background: transparent; color: var(--text-2); cursor: pointer; }
.vd-try:hover { color: var(--text); background: var(--hover); }

/* ---- onboarding, one screen at a time ---- */
.vd-steps { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--panel); padding: 14px 16px 12px; }
.vd-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; min-height: 22px; }
.vd-count { font-family: var(--mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.vd-name { font-weight: 600; color: var(--text); }
.vd-stage .vd-slide[hidden] { display: none; }
.vd-stage figure.shot { margin: 0; }
.vd-stage figcaption[hidden] { display: none; }
.vd-nav { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.vd-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; flex: 1 1 auto; }
.vd-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.vd-dot::after { content: ""; position: absolute; left: 8px; top: 8px; width: 8px; height: 8px; border-radius: 4px; background: var(--line-2); }
.vd-dot:hover::after { background: var(--text-3); }
.vd-dot[aria-current="step"]::after { background: var(--accent); }
.vd-btn { font-family: var(--mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; height: 32px; padding: 0 14px; border-radius: var(--r-2); border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; flex-shrink: 0; }
.vd-btn:hover { background: var(--hover); }
.vd-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vd-btn.primary:hover { opacity: 0.9; }
.vd-btn:disabled { opacity: 0.4; cursor: default; }
.vd-btn:disabled:hover { background: transparent; }
.vd-btn.primary:disabled:hover { background: var(--accent); opacity: 0.4; }

@media (max-width: 560px) {
  .vd-capwrap { padding: 16px 8px 12px; }
  .vd-row .vd-kind { width: 84px; letter-spacing: 0.1em; }
  .vd-row.res .vd-s { display: none; }
  .vd-keys span:nth-child(n+3) { display: none; }
}