/* The reference's own styles, and what a real markdown renderer adds to a document (tables, ordered and nested
   lists, quotes, rules). Loaded after the variant on the registry, part, guide and reference pages; it uses the
   variant's tokens and changes none of its rules' meaning. */

/* ── what the renderer adds to a document ─────────────────────────────── */
.document ol{padding-left:1.5em}
.document ol>li::before{content:none}
.document li>ul,.document li>ol{margin-top:.5em}
.document li>p+p,.document li>p+ul,.document li>p+ol{margin-top:.5em}
.document blockquote{padding-left:18px;border-left:2px solid var(--line-2);color:var(--ink-2)}
.document blockquote>*+*{margin-top:.7em}
.document hr{height:1px;border:0;background:var(--line)}
.document small{font-size:.86em;color:var(--ink-2)}
.document img{max-width:100%;height:auto}
.document .table-wrap{max-width:none;overflow-x:auto}
.document table{width:100%;border-collapse:collapse;font-size:.9em;line-height:1.5}
.document th,.document td{padding:9px 14px 9px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.document th{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom-color:var(--line-2);white-space:nowrap}
.document tr:last-child td{border-bottom:0}

/* ── a part: its name is the manifest's, set as a title where the kind is a proper noun's ── */
.part[data-kind=department] .part-head h1,.part-card[data-kind=department] h3{text-transform:capitalize}

/* ── reference ────────────────────────────────────────────────────────── */
.ref-doc .crumbs{margin-bottom:22px}
.ref-doc .crumbs a{text-decoration:none;color:var(--ink-2)}
.ref-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ref-head h1{min-width:0;overflow-wrap:anywhere}
.ref-head h1 code{padding:0;background:none;font-size:.82em;font-weight:600;letter-spacing:-.01em}
.ref-head .chip{align-self:center}
.chip.ref-status{color:var(--red-text);border-color:var(--red-line)}
.ref-tier{text-transform:capitalize}
.ref-doc .lede{margin-top:16px;font-size:19px;color:var(--ink-2)}

/* the help text, as the command prints it: two columns in a fixed pitch, so it scrolls rather than wraps */
.ref-doc>.help-form{max-width:none}
.ref-doc>.help-form+.help-form{margin-top:14px}
.ref-doc pre.help{max-width:none;margin-inline:-30px;padding:16px 20px;white-space:pre;font-size:12.5px;line-height:1.62}
.ref-doc pre.help code,.ref-doc pre.help-usage code{font-size:inherit;line-height:inherit;color:var(--doc-ink)}
.ref-doc h2 code{padding:0;background:none;font-size:.84em}
/* the same words out of their columns, for a screen too narrow for two */
.help-flow{display:none;padding:14px 16px;background:var(--well);border:1px solid var(--line);border-radius:2px;font-size:15.5px;line-height:1.6}
.help-flow>*+*{margin-top:10px}
.help-flow pre.help-usage{padding:0;border:0;background:none;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.6}
.help-flow p{color:var(--ink-2)}

.ref-list{padding-left:0!important;max-width:none!important}
.ref-list li{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);column-gap:20px;row-gap:4px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.ref-list li+li{margin-top:0}
.ref-list li::before{content:none}
.ref-list li>a{text-decoration:none;justify-self:start}
.ref-list li>a code{color:var(--cool-text);background:none;padding:0;font-size:.88em}
.ref-list li>a:hover code{text-decoration:underline;text-underline-offset:3px}
.ref-list .chip{justify-self:start;align-self:center}
.ref-forms{display:flex;flex-wrap:wrap;gap:6px 8px;grid-column:2}
.ref-forms code{font-size:.76em;color:var(--ink-2)}
.ref-what{font-size:.92em;color:var(--ink-2);text-wrap:pretty}

.ref-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 24px;padding:16px 0;border-block:1px solid var(--line);font-size:.92em}
.ref-facts dt{color:var(--ink-3)}
.ref-facts dd{margin:0;color:var(--doc-ink)}
.ref-facts dd strong{display:block}
.ref-fields td:first-child{white-space:nowrap}
.ref-fields td.req{color:var(--ink);font-weight:600;white-space:nowrap}
.ref-fields td.opt{color:var(--ink-3);white-space:nowrap}
.ref-fields td:last-child{font-family:var(--mono);font-size:.88em;color:var(--ink-2);overflow-wrap:anywhere}

/* a long reference menu keeps to its own column */
@media (min-width:901px){
  .reference .guide-layout{grid-template-columns:196px minmax(0,1fr) 150px;gap:44px}
  .reference .guide-nav{position:sticky;top:24px;max-height:calc(100vh - 48px);overflow-y:auto;scrollbar-width:thin}
}
@media (max-width:900px){
  .help-form>pre.help{display:none}
  .help-flow{display:block}
  .ref-doc>pre.help{margin-inline:0;padding:14px;white-space:pre-wrap;overflow-wrap:anywhere}
  .ref-list li{grid-template-columns:minmax(0,1fr)}
  .ref-forms{grid-column:1}
  .ref-facts{grid-template-columns:minmax(0,1fr);gap:2px 0}
  .ref-facts dd+dt{margin-top:10px}
}
