/* Claude Code demo (claude-code-demo.js): a close-up of a Claude Code session in its own colors,
   dark in light and dark mode alike. New lines push older ones up, as in a terminal. */
.ccd {
  --ccd-bg: #141413;
  --ccd-fg: #ececea;
  --ccd-dim: #8f8f8a;
  --ccd-claude: #d77757;
  --ccd-shine: #f8d3c1;
  --ccd-ok: #4eba65;
  --ccd-code: #b1b9f9;
  --ccd-user: #262624;
  --ccd-line: rgba(255, 255, 255, 0.09);
  --ccd-mono: var(--ccd-font, ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace);
  margin: 1.75rem 0 2.5rem;
}
/* Square hairlines like the rest of the docs hub theme. */
.ccd-window { position: relative; border: 1px solid var(--sy-c-border, var(--ccd-line)); overflow: hidden; background: var(--ccd-bg); }
.ccd-screen {
  display: flex; flex-direction: column; height: 25rem; overflow-y: auto; padding: 1.75rem 1.75rem 1.25rem; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.25rem); mask-image: linear-gradient(to bottom, transparent, #000 2.25rem);
  font: 400 0.9375rem/1.6 var(--ccd-mono); color: var(--ccd-fg); text-align: left; overflow-wrap: anywhere;
}
.ccd-screen::-webkit-scrollbar { display: none; }
.ccd-screen > :first-child { margin-top: auto; }
.ccd-screen:focus-visible { outline: 2px solid var(--ccd-code); outline-offset: -2px; }
.ccd .ccd-screen p, .ccd .ccd-screen pre { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.ccd-b { font-weight: 700; color: #fff; }
.ccd-dim { color: var(--ccd-dim); }
.ccd-code { color: var(--ccd-code); }

.ccd-badge {
  position: absolute; top: 1.1rem; right: 1.4rem; z-index: 1; text-align: right; pointer-events: none;
  font: 700 0.75rem/1.15 var(--ccd-mono); color: #5d5d59;
}
.ccd-speed { display: block; font-size: 1.375rem; letter-spacing: -0.02em; }
.ccd-badge[hidden] { display: none; }

.ccd-user { margin: 0 0 1.1rem; padding: 0.2rem 0.6rem 0.2rem calc(0.6rem + 2ch); text-indent: -2ch; background: var(--ccd-user); border-radius: 4px; white-space: pre-wrap; }
.ccd-prompt { color: var(--ccd-dim); }

.ccd-group { margin: 0 0 1.1rem 1.6rem; }
.ccd-called { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--ccd-dim); text-align: left; cursor: pointer; }
.ccd-called .ccd-b { color: var(--ccd-dim); }
.ccd-called:hover, .ccd-called:hover .ccd-b { color: var(--ccd-fg); }
.ccd-called:focus-visible { outline: 1px solid var(--ccd-code); outline-offset: 2px; }
.ccd-live { padding-left: 0.2rem; white-space: pre-wrap; }
.ccd-calls { margin-top: 0.5rem; }
.ccd-call { margin: 0 0 0.6rem -1.6rem; padding-left: 1.6rem; text-indent: -1.6rem; }
.ccd-call .ccd-dot { display: inline-block; width: 1.6rem; text-indent: 0; }
.ccd-call-name { font-weight: 700; }
.ccd-out { display: flex; text-indent: 0; padding-left: 0.2rem; color: var(--ccd-dim); }
.ccd-out-body { white-space: pre; overflow-x: auto; }
.ccd-ok, .ccd-dot.ccd-ok { color: var(--ccd-ok); }

.ccd-say { display: flex; margin: 0 0 1.1rem; }
.ccd-dot { flex: none; width: 1.6rem; color: var(--ccd-fg); }
.ccd-say-body { min-width: 0; }
.ccd .ccd-screen .ccd-say-body > * + * { margin-top: 0.85em; }
.ccd .ccd-screen .ccd-say-body > .ccd-li + .ccd-li { margin-top: 0; }
.ccd-li { padding-left: 1.1rem; text-indent: -1.1rem; }
.ccd-li::before { content: "- "; }
.ccd .ccd-screen .ccd-table { display: table; width: auto; margin-left: 0; border-collapse: collapse; border: 1px solid #5a5a55; background: none; font: inherit; white-space: nowrap; }
.ccd .ccd-screen .ccd-table th, .ccd .ccd-screen .ccd-table td { padding: 0 1ch; border: 1px solid #5a5a55; background: none; color: inherit; font: inherit; text-align: left; }
.ccd .ccd-screen .ccd-table th { font-weight: 700; }

/* The status line, with the light sweep Claude Code runs across its verb while it works. */
.ccd-status { margin: 0 0 1rem; color: var(--ccd-claude); }
.ccd-glyph { display: inline-block; width: 1.6rem; }
.ccd-verb {
  color: var(--ccd-claude);
  background: linear-gradient(90deg, var(--ccd-claude) 40%, var(--ccd-shine) 50%, var(--ccd-claude) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ccd-shimmer 2s linear infinite;
}
.ccd-done { margin: 0 0 1rem; color: var(--ccd-dim); }

.ccd-input { padding: 0.45rem 0.8rem; border: 1px solid #4a4a46; border-radius: 6px; white-space: pre-wrap; min-height: 2.6rem; }
.ccd-cursor { display: inline-block; width: 0.6rem; height: 1.15em; margin-left: 1px; vertical-align: text-bottom; background: var(--ccd-fg); animation: ccd-blink 1s steps(1) infinite; }
.ccd-hint { padding: 0.45rem 0.8rem 0; }
.ccd-input[hidden], .ccd-hint[hidden], .ccd-status[hidden], .ccd-dialog[hidden], .ccd-calls[hidden] { display: none; }

.ccd-dialog { margin: 0 0 0.5rem; padding: 0.7rem 1rem 0.8rem; border: 1px solid var(--ccd-code); border-radius: 6px; }
.ccd-dialog-title { font-weight: 700; color: var(--ccd-code); }
.ccd-dialog-what { margin: 0.6rem 0 0.8rem 1rem; }
.ccd-dialog-q { margin-bottom: 0.2rem; }
.ccd-choice { white-space: pre-wrap; padding-left: 2ch; text-indent: -2ch; }
.ccd-selected { color: var(--ccd-code); }
.ccd-pressed { background: rgba(177, 185, 249, 0.18); }

@keyframes ccd-blink { 50% { opacity: 0; } }
@keyframes ccd-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .ccd-cursor, .ccd-verb { animation: none; } }
@media (max-width: 42rem) {
  .ccd-screen { height: 22rem; padding: 1.25rem 1rem 1rem; font-size: 0.75rem; }
  .ccd-group, .ccd-call { margin-left: 0; }
}

/* On the docs hub, with the chapter row from mcp.css. */
.ccd-figure .ccd { margin: 0; }
.ccd + figcaption, .ccd-figure figcaption { margin-top: 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: var(--sy-c-light); }
.ccd-figure { margin: 1.75rem 0 2.5rem; }