/* ============================================================================
 * Code snippet — .ui-snippet  (header bar + copyable body + shell highlighting)
 * Reveal variant (.ui-snippet--reveal) tints green for a live token/secret.
 * ========================================================================== */

.ui-snippet {
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ui-snippet__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}
.ui-snippet__bar > span {
  /* rank: label */
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}
.ui-snippet pre {
  margin: 0;
  padding: 0 15px 14px;
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text);
  white-space: pre;
  font-family: var(--font-mono);
}
/* Scrollable code is a keyboard target, but a <pre> flush with the card and
   without its radius draws a square ring that cuts across the card and squares
   its corners. The card carries the ring instead, so it follows --radius-md and
   survives `overflow: hidden`, which clips descendants and not the card's own
   outline. The pre takes none, in every colour mode: the ring is a real outline
   since #578, so `outline: none` here is what forced colors reads too, and the
   @media block that used to say so is gone with the transparent stand-in it was
   written for. See stories/snippet-focus.test.js. */
.ui-snippet pre:focus-visible { outline: none; }
.ui-snippet:has(pre:focus-visible) { outline: var(--ring); outline-offset: var(--ring-offset); }

.ui-snippet__copy {
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: calc(var(--text-xs) + 1px);
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  /* WCAG 2.5.8's 24 CSS px target floor, taken as a real box rather than as an
     overlay. The height came first (#219): 2 + a 12px label at line-height 1.62
     + 2 came to 23.44, so the drawn button grew by 0.56px and the bar with it.
     The width is the same floor on the other axis, and it is load-bearing now
     that the label is gone: 4 + a 13px glyph + 4 is 21px. Both are measured in
     stories/guidelines/accessibility-floor.test.js. #474 */
  min-height: 24px;
  min-width: 24px;
  justify-content: center;
  transition: color var(--dur-fast) var(--ease);
}
.ui-snippet__copy:hover { color: var(--accent); }
.ui-snippet--reveal .ui-snippet__copy:hover { color: var(--strong); }
.ui-snippet__copy:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: var(--radius-xs); }
.ui-snippet__copy svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.8; }

/* Shell token highlighting (matches viz/account.mjs classes) */
.ui-snippet pre .k { color: var(--purple-mid); font-weight: var(--weight-medium); }
.ui-snippet pre .f { color: var(--cyan); }
.ui-snippet pre .s { color: var(--green); }
.ui-snippet pre .u { color: var(--cyan); }
.ui-snippet pre .c { color: var(--text); font-style: italic; }

/* Reveal: a live secret/token, tinted green */
.ui-snippet--reveal {
  background: color-mix(in srgb, var(--green) 10%, var(--surface));
}
.ui-snippet--reveal .ui-snippet__bar > span { color: var(--chip-success-ink); }
.ui-snippet--reveal pre { color: var(--chip-success-ink); word-break: break-all; white-space: pre-wrap; }

/* Inline code. The chip paints whichever reading surface its container is not on, so an
   identifier keeps its chip on the page and inside a card, with no edge of its own. The
   container hands the surface over in --code-bg; see src/tokens/tokens.css. #537

   The chip READS --code-bg and never declares it: a chip that re-pointed the hand-off would
   hand the page to itself and paint the page everywhere. Backticks become a chip wherever
   the kit renders prose (fmt() in site/changelog.mjs), so a link inside one is ordinary
   markup, and the ring it draws needs nothing from the chip now that an outline leaves its
   1px of offset unpainted. */
.ui-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--text);
}