/*
 * Vendored from voice-assistant/board/hud/styles/prose.css (Ultron HUD). Do not edit here: change the
 * design system, then refresh with node tools/vendor.mjs.
 */
/*
 * Ultron HUD, Prose (after base.css in bundle.css).
 * Long-form text from the docs and from Ultron's answers: <div class="hud-prose"> holds the plain
 * HTML a Markdown renderer emits. It is the one block that styles bare elements, because Markdown
 * carries no classes, so each element mirrors one named type style with that style's exact values
 * from tokens.json, under a comment that names it. Colours only through var(--token).
 * List markers are drawn on ::before, never ::marker, whose content Safari ignores.
 */

.hud-prose {
  /* the space between blocks, between list items and above headings; hud-prose--compact tightens them */
  --hud-prose-gap: var(--space-4);
  --hud-prose-gap-item: var(--space-2);
  --hud-prose-gap-above: var(--space-6);
  --hud-prose-gap-above-title: var(--space-8);
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  font-synthesis: none;
  overflow-wrap: break-word;
}

/* an answer inside a card or a popover */
.hud-prose--compact {
  --hud-prose-gap: var(--space-2);
  --hud-prose-gap-item: var(--space-1);
  --hud-prose-gap-above: var(--space-4);
  --hud-prose-gap-above-title: var(--space-4);
}

/* ---------- Rhythm ---------- */

/* the browser's own margins on these two would otherwise break the rhythm */
.hud-prose :where(pre, hr) {
  margin: 0;
}

.hud-prose > * + *,
.hud-prose :is(li, blockquote) > * + * {
  margin-top: var(--hud-prose-gap);
}

.hud-prose > :first-child {
  margin-top: 0;
}

/* ---------- Running text ---------- */

/* mirrors hud-body */
.hud-prose :is(p, li) {
  max-width: var(--measure);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
}

.hud-prose strong {
  font-weight: 600;
}

.hud-prose em {
  font-style: italic;
}

/* ---------- Headings ---------- */

.hud-prose :is(h1, h2, h3, h4) {
  text-wrap: balance;
}

/* mirrors hud-title */
.hud-prose h1 {
  margin-top: var(--hud-prose-gap-above-title);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.2;
}

/* mirrors hud-panel-header, in ink */
.hud-prose h2 {
  margin-top: var(--hud-prose-gap-above);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.33;
  letter-spacing: 0.02em;
}

/* mirrors hud-label, in ink-secondary, with caps */
.hud-prose h3 {
  margin-top: var(--hud-prose-gap-above);
  color: var(--ink-secondary);
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* mirrors hud-label-sm, in ink-secondary, with caps */
.hud-prose h4 {
  margin-top: var(--hud-prose-gap-above);
  color: var(--ink-secondary);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* space-2 below a heading, set on what follows it so it does not collapse into the block gap; a heading after a heading keeps its own space above */
.hud-prose :is(h1, h2, h3, h4) + :not(h1, h2, h3, h4) {
  margin-top: var(--space-2);
}

/* ---------- Quote ---------- */

/* mirrors hud-quote, in ink-secondary */
.hud-prose blockquote {
  position: relative;
  max-width: var(--measure);
  padding-left: var(--space-4);
  color: var(--ink-secondary);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
}

/* paragraphs and items inside a quote take the quote's voice */
.hud-prose blockquote :is(p, li) {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* emphasis inside a quote, which is already italic, stands up */
.hud-prose blockquote em {
  font-style: normal;
}

/* one lit tick at the top left, level with the first line: never a full-height bar */
.hud-prose blockquote::before {
  content: '';
  position: absolute;
  top: calc((1lh - var(--tick-length)) / 2);
  left: 0;
  width: var(--stroke-mark);
  height: var(--tick-length);
  border-radius: var(--radius-1);
  background-color: var(--mark);
  box-shadow: var(--glow-mark);
}

/* ---------- Code and key caps ---------- */

/* mirrors hud-mono, at the size of the text around it */
.hud-prose code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-1);
  background-color: var(--surface-well);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* mirrors hud-mono */
.hud-prose pre {
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background-color: var(--surface-well);
  box-shadow: var(--well-inset);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

/* the block is the plate, so its code has none */
.hud-prose pre code {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: normal;
}

/* the look of .hud-kbd in base.css */
.hud-prose kbd {
  display: inline-block;
  min-width: 1.75em;
  padding: 0 var(--space-1);
  border: var(--stroke-hairline) solid var(--line-strong);
  border-bottom-width: var(--stroke-mark);
  border-radius: var(--radius-1);
  background-color: var(--surface-well);
  color: var(--ink-secondary);
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}

/* ---------- Lists ---------- */

.hud-prose :is(ul, ol) {
  padding: 0;
  list-style: none;
}

.hud-prose li {
  position: relative;
  padding-left: var(--space-4);
}

.hud-prose li + li {
  margin-top: var(--hud-prose-gap-item);
}

.hud-prose li > :is(ul, ol) {
  margin-top: var(--hud-prose-gap-item);
}

/* a short lit dash at the x-height of the first line: the brand book's tick at tick-short, the reference's glowing dash at the size of a bullet */
.hud-prose ul > li::before {
  content: '';
  position: absolute;
  top: calc(0.9em - var(--stroke-mark) / 2);
  left: 0;
  width: var(--tick-short);
  height: var(--stroke-mark);
  border-radius: var(--radius-1);
  background-color: var(--mark);
  box-shadow: var(--glow-mark);
}

/* two-digit numbers in the display face; the list-item counter follows start, reversed and value */
.hud-prose ol > li {
  padding-left: var(--space-6);
}

.hud-prose ol > li::before {
  content: counter(list-item, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---------- Links ---------- */

/* the base link style, held for visited links too; the focus ring comes from base.css */
.hud-prose a,
.hud-prose a:visited {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: var(--stroke-hairline);
  text-underline-offset: 0.2em;
}

.hud-prose a:hover {
  text-decoration-color: var(--ink);
}

/* ---------- Divider ---------- */

/* a line-faint hairline with a lit tick at its start; the browser's own overflow would clip the tick's glow */
.hud-prose hr {
  position: relative;
  height: var(--stroke-hairline);
  margin: var(--space-6) 0;
  border: 0;
  overflow: visible;
  background-color: var(--line-faint);
}

.hud-prose hr::before {
  content: '';
  position: absolute;
  top: calc((var(--stroke-hairline) - var(--stroke-mark)) / 2);
  left: 0;
  width: var(--tick-short);
  height: var(--stroke-mark);
  border-radius: var(--radius-1);
  background-color: var(--mark);
  box-shadow: var(--glow-mark);
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hud-prose a {
    transition: text-decoration-color var(--timing-fast) var(--timing-ease);
  }
}