/* RouterClip · guías para desarrolladores (/developers/). Las genera scripts/export-developer-guides.py: se edita allí.
   Va después de /site.css (tokens y base de la web), así que el modo oscuro llega por los tokens. Mismo vocabulario que
   la web (docs/DISENO-ROUTERCLIP.md): cabecera con el logotipo y la página actual subrayada en bermellón, título sobre
   la regla de tinta, índice fijo a la izquierda, texto a 72 caracteres, código en mono sobre papel y tablas con la
   cabecera sobre regla. Solo tokens: sin hex, sin degradados y sin sombras. */
body.dev { min-width: 320px; background: var(--color-bg); color: var(--color-text); font-size: var(--type-body-size); line-height: var(--type-body-line); }
.dev { --dev-margin: var(--page-margin); }
.dev-wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--dev-margin); }
.dev :where([id]) { scroll-margin-top: 96px; }

/* Cabecera: logotipo y documentos, con el actual subrayado en bermellón */
.dev-top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg); border-bottom: var(--border-hair) solid var(--color-border); }
.dev-top .dev-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-12); min-height: 76px; padding-block: var(--space-3); }
.dev-brand { display: inline-flex; padding: var(--space-1) 0; color: var(--color-text); }
.dev-brand .rc-logo { width: 150px; height: auto; }
.dev-nav { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); font-size: var(--type-sm-size); font-weight: var(--weight-medium); }
.dev-nav a { position: relative; display: inline-flex; align-items: center; min-height: 36px; color: var(--color-text-2); text-decoration: none; white-space: nowrap; }
.dev-nav a:hover { color: var(--color-text); }
.dev-nav a[aria-current="page"] { color: var(--color-text); }
.dev-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: var(--border-rule); background: var(--color-accent); }

/* Título de la página sobre la regla de tinta */
.dev-main { display: block; padding-block: var(--space-16) var(--space-24); }
.dev-head { display: grid; gap: var(--space-4); padding-bottom: var(--space-8); border-bottom: var(--border-rule) solid var(--color-rule); }
.dev-head h1 { max-width: 24ch; font-size: var(--type-h1-size); line-height: var(--type-h1-line); letter-spacing: var(--type-h1-track); font-weight: var(--weight-bold); text-wrap: balance; }
/* Bilingual title: Spanish in ink and, below, English in text-2; never a « · » hanging at the end of a line. */
.dev-head h1 > span { display: block; }
.dev-h1__en { margin-top: var(--space-2); font-size: 0.64em; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-2); }

/* Guía: índice fijo (3 columnas) y texto (8 columnas) */
.dev-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); align-items: start; margin-top: var(--space-10); }
.dev-toc { grid-column: 1 / span 3; position: sticky; top: calc(76px + var(--space-6)); max-height: calc(100vh - 76px - var(--space-12)); overflow-y: auto; padding-right: var(--space-2); }
.dev-toc summary { padding-bottom: var(--space-3); border-bottom: var(--border-hair) solid var(--color-border-strong); cursor: pointer; list-style: none; }
.dev-toc summary::-webkit-details-marker { display: none; }
.dev-toc ol { margin: 0; padding: 0; list-style: none; }
.dev-toc > details > ol > li { padding: var(--space-2) 0; border-bottom: var(--border-hair) solid var(--color-border); }
.dev-toc > details > ol > li > a { font-weight: var(--weight-semibold); color: var(--color-text); }
.dev-toc ol ol { margin-top: var(--space-1); }
.dev-toc a { display: block; padding: 3px 0; font-size: var(--type-sm-size); line-height: 18px; color: var(--color-text-2); text-decoration: none; overflow-wrap: anywhere; }
.dev-toc a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 3px; }
.dev-main .dev-toc code { padding: 0; background: none; font-size: 11.5px; color: var(--color-text-3); }
.dev-doc { grid-column: 5 / span 8; min-width: 0; }

/* Texto de la guía */
.dev-doc h2 { margin: var(--space-16) 0 var(--space-5); padding-top: var(--space-4); border-top: var(--border-rule) solid var(--color-rule); font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-track); font-weight: var(--weight-bold); }
.dev-doc > h2:first-child { margin-top: 0; }
.dev-doc h3 { margin: var(--space-12) 0 var(--space-3); font-size: var(--type-h3-size); line-height: var(--type-h3-line); letter-spacing: var(--type-h3-track); font-weight: var(--weight-semibold); }
.dev-doc h4 { margin: var(--space-8) 0 var(--space-2); font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); }
.dev-doc :is(h2, h3, h4) code { font-size: 0.8em; }
.dev-doc p, .dev-doc li { max-width: 72ch; color: var(--color-text-2); }
.dev-doc :is(p, ul, ol, pre, .dev-table, blockquote) + :is(p, ul, ol, pre, .dev-table, blockquote) { margin-top: var(--space-4); }
.dev-doc ul { padding-left: 22px; list-style: disc; }
.dev-doc ol { padding-left: 22px; list-style: decimal; }
.dev-doc li + li { margin-top: var(--space-2); }
.dev-doc li > :is(ul, ol, p + p) { margin-top: var(--space-2); }
.dev-doc li::marker { color: var(--color-text-3); }
.dev-doc strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.dev-doc em { font-style: italic; }
.dev-doc a, .dev-main p a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border-control); text-underline-offset: 3px; }
.dev-doc a:hover, .dev-main p a:hover { text-decoration-color: currentColor; }
/* Inline code: no side padding, so the punctuation that follows stays next to it («playbooks:read,»). It only breaks
   when a token alone does not fit the line (break-word does not shrink table columns, unlike anywhere). */
.dev-main code { padding: 1px 0; border-radius: var(--radius-1); background: var(--color-bg-sunken); color: var(--color-text); font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: break-word; }
.dev-doc pre { padding: var(--space-3) var(--space-4); border: var(--border-hair) solid var(--color-border); border-radius: var(--radius-2); background: var(--color-bg-subtle); font-size: 12.5px; line-height: 19px; overflow-x: auto; }
.dev-doc pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; }
.dev-table { overflow-x: auto; border-top: var(--border-rule) solid var(--color-rule); }
.dev-table table { width: 100%; border-collapse: collapse; font-size: var(--type-sm-size); line-height: 19px; }
.dev-table th, .dev-table td { padding: 9px var(--space-4) 9px 0; border-bottom: var(--border-hair) solid var(--color-border); text-align: left; vertical-align: top; }
.dev-table th { font-size: var(--type-xs-size); font-weight: var(--weight-semibold); color: var(--color-text-2); white-space: nowrap; }
.dev-table td { color: var(--color-text-2); }
/* Identifiers in mono and never split (5.2): the columns grow to their longest token and the table scrolls on phones. */
.dev-table code { white-space: nowrap; overflow-wrap: normal; }
.dev-doc hr { margin: var(--space-10) 0; border: 0; border-top: var(--border-hair) solid var(--color-border); }
.dev-doc blockquote { padding: var(--space-3) var(--space-4); border-left: var(--border-mark) solid var(--color-text); background: var(--color-bg-subtle); }
.dev-doc blockquote p { color: var(--color-text); }

/* Índice de documentos (/developers/): número, título, qué es y flecha, sobre reglas finas */
.dev-lang { margin-top: var(--space-12); }
.dev-lang > h2 { margin-bottom: var(--space-4); }
.dev-lede { max-width: 64ch; font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); color: var(--color-text); }
.dev-index { margin-top: var(--space-8); border-top: var(--border-hair) solid var(--color-border-strong); }
.dev-index a { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr) 24px; gap: var(--space-2) var(--space-4); align-items: baseline; padding: var(--space-5) 0; border-bottom: var(--border-hair) solid var(--color-border); color: var(--color-text); text-decoration: none; }
.dev-index a:hover { background: var(--color-bg-hover); }
.dev-index__n { font-family: var(--font-mono); font-size: var(--type-mono-size); color: var(--color-text-3); }
.dev-index strong { font-size: var(--type-h4-size); line-height: var(--type-h4-line); letter-spacing: var(--type-h4-track); font-weight: var(--weight-semibold); }
.dev-index__text { font-size: var(--type-sm-size); line-height: 19px; color: var(--color-text-2); }
.dev-index .i { width: 18px; height: 18px; align-self: center; color: var(--color-text); }
.dev-note { max-width: 72ch; margin-top: var(--space-5); font-size: var(--type-sm-size); line-height: 20px; color: var(--color-text-3); }

/* Pie de tinta */
.dev-foot { background: var(--color-bg-inverse); color: var(--color-text-inverse-2); font-size: var(--type-sm-size); }
.dev-foot .dev-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6); padding-block: var(--space-8); }
.dev-foot span { font-family: var(--font-mono); font-size: var(--type-mono-size); }
.dev-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.dev-foot a { color: var(--color-text-inverse); text-decoration: none; }
.dev-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dev-foot :focus-visible { outline-color: var(--color-text-inverse); }

@media (max-width: 1023px) {
  .dev { --dev-margin: 24px; }
  .dev-layout { grid-template-columns: minmax(0, 1fr); }
  .dev-toc { position: static; grid-column: 1 / -1; max-height: none; margin-bottom: var(--space-10); padding-right: 0; }
  .dev-doc { grid-column: 1 / -1; }
  .dev-index a { grid-template-columns: 40px minmax(0, 1fr) 20px; }
  .dev-index__text { grid-column: 2; }
  .dev-index .i { grid-column: 3; grid-row: 1; }
}
@media (max-width: 640px) {
  /* The documents wrap onto as many rows as they need: none is cut at the edge of the screen. */
  .dev-top { position: static; }
  .dev-top .dev-wrap { display: grid; gap: 0; padding-bottom: var(--space-2); }
  .dev-nav { gap: 0 var(--space-5); }
  .dev-nav a { min-height: 44px; }
  .dev-main { padding-block: var(--space-10) var(--space-16); }
  .dev-head h1 { font-size: var(--type-h2-size); line-height: var(--type-h2-line); letter-spacing: var(--type-h2-track); }
  .dev-doc h2 { margin-top: var(--space-12); font-size: 26px; line-height: 30px; }
  .dev-doc h3 { margin-top: var(--space-10); font-size: 19px; line-height: 24px; }
}
@media (max-width: 420px) {
  .dev { --dev-margin: 16px; }
}