/* Guides: long reads under /guides/, on top of site.css (.doc) */

.doc .crumbs { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; }
.doc .crumbs a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .doc .crumbs a:hover { color: var(--ink); } }
.doc .byline { color: var(--ink-2); font-size: 14px; margin: 18px 0 0; }
.doc .byline a { color: var(--ink); }

.doc pre { margin: 18px 0 0; padding: 16px 18px; max-width: 46em; overflow-x: auto; border-radius: 12px; background: #1c1c1e;
           box-shadow: inset 0 0 0 1px #2c2c2e; font: 13.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); }
.doc pre code { font: inherit; background: none; padding: 0; border-radius: 0; }
/* A long setting or path in running text wraps instead of widening the page on a phone */
.doc p code, .doc td code, .doc li code { overflow-wrap: anywhere; }
.doc .file { margin: 22px 0 -10px; color: var(--ink-2); font: 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }

.doc .table { margin: 18px 0 0; max-width: 46em; overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: 15px; }
.doc th, .doc td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.doc th { color: var(--ink); font-weight: 600; }
.doc td { color: #c7c7cc; }
.doc td:first-child { color: var(--ink); }
@media (max-width: 600px) {
  /* On a phone each row becomes a small block: the first cell on top, the rest under it */
  .doc thead { display: none; }
  .doc tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .doc td { display: block; padding: 3px 0; border: 0; }
  .doc td:first-child { font-weight: 600; }
}

.doc .note { margin: 22px 0 0; max-width: 42em; padding: 14px 18px; border-radius: 12px; background: #1c1c1e; color: #c7c7cc; font-size: 15px; }
.doc .note p { margin: 0; }

/* The guides list */
.doc .guide-list { margin: 40px 0 0; padding: 0; list-style: none; max-width: 46em; }
.guide-list li { margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
.guide-list li:first-child { border-top: 1px solid var(--line); }
.guide-list li::marker { content: none; }
.guide-list a { font: 600 21px/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .guide-list a:hover { color: var(--amber); } }
.guide-list p { margin: 8px 0 0; }