/*
 * Docs prose containment — adapted from Protocol's Prose component.
 * Uses :where() for zero specificity so Tailwind utilities (xl:max-w-none) can override.
 * Constrains prose children to readable widths while grids break out.
 */
:where(.prose-docs) > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 48rem; /* max-w-3xl */
}

@media (min-width: 1024px) {
  :where(.prose-docs) > * {
    max-width: 56rem; /* max-w-4xl */
  }
}

/* Full-width dividers and absolute-positioned elements */
:where(.prose-docs) > hr,
:where(.prose-docs) > .absolute {
  max-width: none;
}

/*
 * Inline code pill styling for docs (property names, inline references).
 * Matches Protocol's prose code treatment.
 */
.prose-docs :where(code):not(pre code) {
  font-size: 0.875em;
  font-weight: 600;
  color: var(--color-navy-950);
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  background-color: oklch(97% 0.005 260);
  ring: 1px solid oklch(90% 0.01 260);
  outline: 1px solid oklch(90% 0.01 260);
}

@media (prefers-color-scheme: dark) {
  .prose-docs :where(code):not(pre code) {
    color: white;
    background-color: oklch(25% 0.02 260);
    outline-color: oklch(35% 0.02 260);
  }
}

.dark .prose-docs :where(code):not(pre code) {
  color: white;
  background-color: oklch(25% 0.02 260);
  outline-color: oklch(35% 0.02 260);
}

/*
 * Rouge syntax highlighting for API docs.
 * Dark theme designed for navy-900 code block backgrounds.
 *
 * Token reference: https://rouge-ruby.github.io/docs/file.Tokens.html
 */

/* Comments */
.highlight .c,   /* Comment */
.highlight .cm,  /* Comment.Multiline */
.highlight .cp,  /* Comment.Preproc */
.highlight .c1,  /* Comment.Single */
.highlight .cs { /* Comment.Special */
  color: oklch(55% 0.02 260);
  font-style: italic;
}

/* Strings */
.highlight .s,   /* Literal.String */
.highlight .s1,  /* Literal.String.Single */
.highlight .s2,  /* Literal.String.Double */
.highlight .sb,  /* Literal.String.Backtick */
.highlight .sc,  /* Literal.String.Char */
.highlight .sd,  /* Literal.String.Doc */
.highlight .sh,  /* Literal.String.Heredoc */
.highlight .sx { /* Literal.String.Other */
  color: oklch(78% 0.12 155);
}

/* String interpolation and escape */
.highlight .si,  /* Literal.String.Interpol */
.highlight .se { /* Literal.String.Escape */
  color: oklch(72% 0.10 280);
}

/* String regex */
.highlight .sr { /* Literal.String.Regex */
  color: oklch(75% 0.08 30);
}

/* Keywords */
.highlight .k,   /* Keyword */
.highlight .kd,  /* Keyword.Declaration */
.highlight .kn,  /* Keyword.Namespace */
.highlight .kp,  /* Keyword.Pseudo */
.highlight .kr,  /* Keyword.Reserved */
.highlight .kt { /* Keyword.Type */
  color: oklch(75% 0.15 280);
}

/* Keyword constant (true, false, nil) */
.highlight .kc { /* Keyword.Constant */
  color: oklch(72% 0.12 250);
}

/* Names */
.highlight .na { /* Name.Attribute */
  color: oklch(78% 0.12 250);
}

.highlight .nb { /* Name.Builtin */
  color: oklch(72% 0.10 250);
}

.highlight .nc { /* Name.Class */
  color: oklch(82% 0.10 55);
}

.highlight .nf,  /* Name.Function */
.highlight .fm { /* Name.Function.Magic */
  color: oklch(78% 0.12 250);
}

.highlight .nn { /* Name.Namespace */
  color: oklch(82% 0.10 55);
}

.highlight .ni { /* Name.Entity */
  color: oklch(80% 0.08 280);
}

.highlight .no { /* Name.Constant */
  color: oklch(72% 0.12 250);
}

.highlight .nt { /* Name.Tag */
  color: oklch(75% 0.15 280);
}

.highlight .nv,  /* Name.Variable */
.highlight .vi,  /* Name.Variable.Instance */
.highlight .vc,  /* Name.Variable.Class */
.highlight .vg { /* Name.Variable.Global */
  color: oklch(78% 0.08 250);
}

/* Numbers */
.highlight .m,   /* Literal.Number */
.highlight .mi,  /* Literal.Number.Integer */
.highlight .mf,  /* Literal.Number.Float */
.highlight .mh,  /* Literal.Number.Hex */
.highlight .mo,  /* Literal.Number.Oct */
.highlight .mb,  /* Literal.Number.Bin */
.highlight .il { /* Literal.Number.Integer.Long */
  color: oklch(78% 0.12 155);
}

/* Operators */
.highlight .o,   /* Operator */
.highlight .ow { /* Operator.Word */
  color: oklch(72% 0.10 280);
}

/* Punctuation */
.highlight .p { /* Punctuation */
  color: oklch(70% 0.02 260);
}

/* Generic tokens */
.highlight .gd { /* Generic.Deleted */
  color: oklch(70% 0.15 25);
}

.highlight .gi { /* Generic.Inserted */
  color: oklch(78% 0.12 155);
}

.highlight .ge { /* Generic.Emph */
  font-style: italic;
}

.highlight .gs { /* Generic.Strong */
  font-weight: bold;
}

/* Name.Label — JSON keys */
.highlight .nl {
  color: oklch(78% 0.12 250);
}

/* Whitespace — invisible, just ensures no color override */
.highlight .w {
  color: inherit;
}

/* Error token — subtle, don't draw attention */
.highlight .err {
  color: oklch(80% 0.05 260);
}