/* ============================================================
   panto docs — static component styles.
   Extracted from the Pantograph design system's React components
   (Badge, Tag, Terminal, CodeBlock, Callout) so the docs render
   identically as plain HTML, with no JavaScript and no React.
   These mirror the styles those components inject at runtime.
   ============================================================ */

/* ---- Badge ----------------------------------------------------------- */
.pg-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-2xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  padding: 4px 7px; border-radius: var(--radius-xs);
  border: var(--border-thin) solid transparent;
}
.pg-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; }
.pg-badge--neutral { color: var(--ink-2); background: var(--paper-2); border-color: var(--paper-3); }
.pg-badge--danger  { color: var(--red-deep); background: var(--red-wash); border-color: var(--red-soft); }
.pg-badge--success { color: var(--green-deep); background: var(--green-wash); border-color: var(--green-soft); }
.pg-badge--ink     { color: var(--paper-0); background: var(--ink-1); border-color: var(--ink-1); }
.pg-badge--outline { color: var(--ink-2); background: transparent; border-color: var(--border-default); }

/* ---- Tag ------------------------------------------------------------- */
.pg-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--text-xs); line-height: 1; white-space: nowrap;
  color: var(--ink-1); background: var(--paper-0);
  padding: 5px 9px; border-radius: var(--radius-pill);
  border: var(--border-thin) solid var(--border-default);
}
.pg-tag__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); flex: none; background: var(--ink-3); }

/* ---- Callout (admonition) -------------------------------------------- */
.pg-callout {
  display: flex; gap: 12px;
  padding: 13px 15px;
  background: var(--paper-0);
  border: var(--border-thin) solid var(--border-hairline);
  border-left: var(--border-thick) solid var(--ink-3);
  border-radius: var(--radius-sm);
}
.pg-callout__icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink-3); }
.pg-callout__icon svg { width: 100%; height: 100%; }
.pg-callout__body { font: var(--weight-regular) var(--text-sm)/1.55 var(--font-sans); color: var(--ink-1); }
.pg-callout__title {
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-display);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  margin: 0 0 5px; color: var(--ink-2);
}
.pg-callout__body p { margin: 0 0 var(--space-2); }
.pg-callout__body :last-child { margin-bottom: 0; }
.pg-callout--note    { border-left-color: var(--ink-3); }
.pg-callout--tip     { border-left-color: var(--green); background: var(--green-wash); }
.pg-callout--tip .pg-callout__icon, .pg-callout--tip .pg-callout__title { color: var(--green-deep); }
.pg-callout--warn    { border-left-color: var(--brass); background: #F0E7D0; }
.pg-callout--warn .pg-callout__icon, .pg-callout--warn .pg-callout__title { color: #7A5E20; }
.pg-callout--danger  { border-left-color: var(--red); background: var(--red-wash); }
.pg-callout--danger .pg-callout__icon, .pg-callout--danger .pg-callout__title { color: var(--red-deep); }

/* ---- CodeBlock ------------------------------------------------------- */
.pg-code {
  background: var(--surface-code);
  border: var(--border-thin) solid var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-family: var(--font-mono);
}
.pg-code__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--paper-2);
  border-bottom: var(--border-thin) solid var(--border-hairline);
}
.pg-code__name { font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--ink-2); }
.pg-code__lang {
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-display);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3);
  margin-left: auto; padding-right: 4px;
}
.pg-code__copy {
  display: inline-flex; align-items: center; gap: 5px;
  font: var(--weight-medium) var(--text-2xs)/1 var(--font-display);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); background: none; border: 0; cursor: pointer;
  padding: 4px 6px; border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.pg-code__copy:hover { color: var(--ink-0); background: var(--paper-1); }
.pg-code__copy--done { color: var(--green-deep); }
.pg-code__copy svg { width: 13px; height: 13px; }
.pg-code__copy .pg-code__check { display: none; }
.pg-code__copy--done .pg-code__check { display: inline; }
.pg-code__copy--done .pg-code__copyglyph { display: none; }
.pg-code__scroll { overflow-x: auto; padding: 14px 16px; }
.pg-code pre { font-size: var(--text-sm); line-height: var(--leading-mono); color: var(--ink-1); margin: 0; }
.pg-code code { font-family: inherit; background: none; border: 0; padding: 0; color: inherit; }
/* token colors for hand-marked spans */
.pg-code .tok-kw { color: var(--green-deep); }
.pg-code .tok-str { color: var(--red-deep); }
.pg-code .tok-com { color: var(--ink-4); font-style: italic; }
.pg-code .tok-fn { color: var(--ink-0); font-weight: 500; }
.pg-code .tok-num { color: var(--brass); }

/* ---- Terminal -------------------------------------------------------- */
.pg-term {
  background: var(--ink-1);
  border: var(--border-thin) solid var(--ink-0);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  font-family: var(--font-mono);
}
.pg-term__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: #232B3B;
  border-bottom: var(--border-thin) solid #2E3749;
}
.pg-term__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); }
.pg-term__title {
  margin-left: 6px;
  font: var(--weight-semibold) var(--text-2xs)/1 var(--font-display);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--paper-4);
}
.pg-term__body { padding: 14px 16px; overflow-x: auto; font-size: var(--text-sm); line-height: 1.65; }
.pg-term__line { white-space: pre; color: var(--paper-2); }
.pg-term__line .pg-term__prompt { color: var(--green-soft); user-select: none; }
.pg-term__line .pg-term__panto { color: var(--red-soft); user-select: none; }
.pg-term__line--cmd { color: var(--paper-0); }
.pg-term__line--out { color: var(--paper-4); }
.pg-term__line--ok { color: var(--green-soft); }
.pg-term__line--err { color: var(--red-soft); }
.pg-term__line--com { color: #6E7689; font-style: italic; }
.pg-term__cursor {
  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--red); margin-left: 2px;
  animation: pg-term-blink 1.1s steps(1) infinite;
}
@keyframes pg-term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pg-term__cursor { animation: none; } }
/* panto TUI mock: welcome banner, user block, tool boxes, footer, input frame */
.pg-term__line--accent { color: var(--red-soft); }
.pg-term__line--dim { color: #6E7689; }
.pg-term__user {
  white-space: pre-wrap; color: var(--paper-0);
  background: rgba(178,58,46,0.16); padding: 5px 10px; margin: 3px 0;
}
.pg-term__tool { margin: 3px 0; }
.pg-term__tool-head { white-space: pre; color: var(--paper-0); padding-left: 1ch; }
.pg-term__tool-body {
  white-space: pre; color: var(--paper-4);
  padding: 3px 0 0 calc(1ch + 8px); margin-left: 1ch;
  border-left: 2px solid #2E3749;
}
.pg-term__add { color: var(--green-soft); }
.pg-term__del { color: var(--red-soft); }
.pg-term .pg-term__rule { border: 0; border-top: 1px solid #2E3749; margin: 7px 0; }
.pg-term code { background: none; border: 0; padding: 0; color: var(--green-soft); font: inherit; }
.pg-term__user code { color: inherit; }