/* Content routes: /get-key /tutorial /changelog /faq /rules and 404.
   Page chrome (.doc-head, .crumbs) is in base.css — every route has it. */

.doc-grid { display: grid; gap: clamp(1.8rem, 5vw, 3.2rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) {
  .doc-grid { grid-template-columns: 14rem minmax(0, 1fr); }
  .doc-grid.standalone { grid-template-columns: minmax(0, 1fr); }
}

.toc { position: sticky; top: 78px; display: grid; gap: .1rem; font-size: .84rem; }
.toc h2 { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: .55rem; font-weight: 500; }
.toc a { display: block; padding: .3rem .6rem; border-left: 1px solid var(--line); color: var(--faint); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: #fff; border-left-color: var(--line-strong); } }
.toc a[highlight], .toc a:focus-visible { border-left-color: var(--accent); color: #fff; }

/* Explicit single track plus min-width:0 on the children: without them a nested
   grid (ol.howto, .rule) sizes its 1fr track to max-content and blows the column
   out to 652px on a 390px viewport — the measured mobile overflow. */
.prose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; max-width: 74ch; }
.prose > * { min-width: 0; }
.prose h2 { padding-top: .3rem; }
.prose h3 { margin-top: .4rem; }
.prose p, .prose li { color: var(--muted); overflow-wrap: anywhere; }
.prose p strong, .prose li strong { color: #fff; font-weight: 600; }
.prose ul, .prose ol { margin: 0; padding-left: 1.15rem; display: grid; gap: .45rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: .4rem 0; }
.prose .note { font-size: .84rem; color: var(--faint); }
.prose code, .faq-body code { overflow-wrap: anywhere; }

.osplit { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.osplit details + details { border-top: 1px solid var(--line); }
.osplit summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .7rem;
  padding: 1rem 1.15rem; font-weight: 600; font-size: .96rem; touch-action: manipulation;
}
.osplit summary::-webkit-details-marker { display: none; }
.osplit summary::after { content: "+"; margin-left: auto; font-family: var(--mono); color: var(--faint); }
.osplit details[open] summary::after { content: "\2212"; }
.osplit summary:hover { background: var(--card-hover); }
.osplit-body { padding: 0 1.15rem 1.15rem; color: var(--muted); font-size: .92rem; display: grid; gap: .8rem; }

/* Ordered, copyable instructions. */
ol.howto { list-style: none; counter-reset: how; margin: 0; padding: 0; display: grid; gap: .55rem; }
ol.howto > li { counter-increment: how; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .7rem; }
ol.howto > li::before {
  content: counter(how); font-family: var(--mono); font-size: .74rem; color: var(--muted);
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; margin-top: .12rem;
}
ol.howto .sub { display: block; font-size: .86rem; color: var(--faint); margin-top: .2rem; }

/* Fixed layout + anywhere wrapping: an automatic table can never be narrower than
   its longest cell, which is what pushed these to 580px inside a 355px column. */
table.grid { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .9rem; }
table.grid th, table.grid td { text-align: left; padding: .7rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
table.grid thead th { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
table.grid td code { font-size: .84rem; }
table.grid tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  table.grid { font-size: .82rem; }
  table.grid th, table.grid td { padding: .55rem .4rem; }
}

/* FAQ as native disclosures: keyboard-operable with no script at all. */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 2.2rem 1.05rem 0;
  font-weight: 600; font-size: 1rem; position: relative; touch-action: manipulation;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .2rem; top: 1.05rem; font-family: var(--mono); color: var(--faint); }
.faq details[open] summary::after { content: "\2212"; }
.faq-body { padding: 0 0 1.15rem; color: var(--muted); font-size: .94rem; max-width: 70ch; }
.faq-body + .faq-body { margin-top: .6rem; }

.rule { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.rule > div { min-width: 0; }
.rule:last-child { border-bottom: 0; }
.rule-n { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: rgba(255, 255, 255, .22); line-height: 1; }
.rule h3 { margin-bottom: .35rem; }
.rule p { color: var(--muted); font-size: .94rem; }
.rule .enforced { margin-top: .5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--faint); }

.entry { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); gap: 1.1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.entry > div { min-width: 0; }
.entry:first-of-type { border-top: 0; }
.entry time { font-family: var(--mono); font-size: .78rem; color: var(--faint); padding-top: .2rem; }
.entry h3 { font-size: 1.05rem; }
.entry p { color: var(--muted); font-size: .93rem; margin-top: .4rem; max-width: 68ch; }
.entry .kind { display: inline-block; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; padding: .18rem .45rem; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); margin-bottom: .55rem; }
.entry.upstream .kind { border-color: rgba(0, 191, 255, .45); color: var(--accent); }
@media (max-width: 640px) {
  .entry, .rule { grid-template-columns: 1fr; gap: .4rem; }
  .entry time { order: -1; }
}

.oops { display: grid; gap: 1.2rem; justify-items: start; padding-block: clamp(3.5rem, 12vw, 7rem); }
.oops .code { font-family: var(--display); font-weight: 700; font-size: clamp(4rem, 22vw, 9rem); line-height: .9; letter-spacing: -.05em; color: rgba(255, 255, 255, .12); }
.oops .note { font-size: .84rem; color: var(--faint); max-width: 62ch; }
.btn-row { display: flex; flex-wrap: wrap; gap: .6rem; }