/* Documentation pages. Layered on top of style.css, which owns the tokens,
   header, buttons and footer. */

.doc { max-width: 720px; padding-top: 34px; padding-bottom: 80px; }

.eyebrow {
  margin: 0 0 6px; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.doc h1 { margin: 0 0 12px; font-size: 30px; letter-spacing: -0.025em; line-height: 1.2; }
.doc h2 {
  margin: 40px 0 12px; font-size: 19px; letter-spacing: -0.015em;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.doc h3 { margin: 26px 0 8px; font-size: 15.5px; }
.doc p { margin: 0 0 14px; }
.lede { font-size: 17px; color: var(--muted); line-height: 1.6; }

.doc code {
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--panel-2); border: 1px solid var(--line-2);
  padding: 1px 5px; border-radius: 5px;
}
.doc pre {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 15px; overflow-x: auto; margin: 0 0 16px; box-shadow: var(--shadow);
}
.doc pre code { background: none; border: 0; padding: 0; font-size: 12.8px; line-height: 1.65; }

.doc a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.doc a:hover { border-bottom-color: var(--accent); }
.bar a.btn { text-decoration: none; border-bottom: 0; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 8px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; box-shadow: var(--shadow); }
.card h3 {
  margin: 0 0 7px; font: 600 13.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
}
.card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

.note {
  border-left: 3px solid var(--line); padding-left: 13px; color: var(--muted); font-size: 14.5px;
}

.rules { margin: 0 0 18px; padding-left: 20px; }
.rules li { margin-bottom: 16px; }
.cmp { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; }
.cmp span {
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 7px 10px; border-radius: 7px;
}
.bad  { background: color-mix(in srgb, var(--danger) 9%, transparent); color: var(--danger); }
.good { background: color-mix(in srgb, var(--done) 11%, transparent); color: var(--done); }

.back { margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--line); }

@media (max-width: 620px) {
  .doc h1 { font-size: 25px; }
  .lede { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
}

/* The app's mobile rule wraps .bar__actions onto its own full-width row so the
   select can breathe. The docs header is brand + one button, which fits, so
   undo the wrap here rather than letting the button drop below the logo. */
@media (max-width: 620px) {
  .bar__in { flex-wrap: nowrap; }
  nav.bar__actions { width: auto; margin-left: auto; flex: 0 0 auto; }
  nav.bar__actions .btn { padding: 7px 12px; font-size: 14px; }
}

/* Long shell commands run past the right edge on a phone, and a horizontally
   scrolling <pre> gives no hint there is more. Wrap instead of hiding it. */
@media (max-width: 620px) {
  .doc pre { white-space: pre-wrap; overflow-wrap: anywhere; }
}

.card__dl { margin-top: 11px !important; font-size: 13px; }
.card__dl a { color: var(--accent); border-bottom-color: transparent; }
.card__dl a:hover { border-bottom-color: var(--accent); }