/* The user guide (guide/): long how-to pages on the site's own look (hub.css, loaded
   first). Class names start with doc- because hub.css already has .guide, the hub's
   first-run checklist on #join. No script: the contents lists are plain links, and the
   phone layout is CSS alone, so the pages keep to the Content Security Policy. */

.doc { display: grid; grid-template-columns: minmax(0, 760px) 220px; justify-content: space-between; gap: 12px 40px; align-items: start; }
.doc > .legal { max-width: none; min-width: 0; }
.doc .legal h2 { scroll-margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.doc .legal h3 { scroll-margin-top: 16px; }
.doc .legal ol > li::marker { color: var(--ember); font-weight: 600; }

/* for keyboards and screen readers: past the header and the guide's menu, shown on focus */
.doc-skip { position: absolute; left: 16px; top: -48px; z-index: 10; background: var(--ember); color: var(--ember-ink); padding: 8px 12px; border-radius: 4px; font-weight: 600; }
.doc-skip:focus { top: 8px; }
.doc main:focus { outline: none; }

/* the contents list: a sticky column on a wide screen, a card above the text on a phone */
.doc-toc { position: sticky; top: 16px; display: grid; gap: 8px; font-size: 14px; max-height: calc(100vh - 32px); overflow-y: auto; }
.doc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.doc-toc a { color: var(--muted); text-decoration: none; display: block; padding: 3px 0 3px 10px; border-left: 2px solid var(--line); }
.doc-toc a:hover { color: var(--ink); border-left-color: var(--ember); }

/* the guide's own menu of pages, on every page */
.doc-nav { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.doc-nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.doc-nav a:hover, .doc-nav a[aria-current="page"] { color: var(--ember); }

/* the previous and next pages, in the menu's order, at the foot of each page */
.doc-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.doc-pager a { display: grid; gap: 2px; text-decoration: none; font-weight: 600; max-width: 48%; }
.doc-pager a[rel="next"] { margin-left: auto; text-align: right; }

/* a screenshot, framed like a hub card */
.doc figure { margin: 6px 0; display: grid; gap: 6px; }
.doc figure a { display: block; }
.doc figure img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.doc figcaption { font-size: 13px; color: var(--faint); }

/* who may do something, before a step list */
.doc-who { font-size: 13px; color: var(--muted); border-left: 3px solid var(--ember-dim); padding: 2px 0 2px 10px; }
.doc-who b { color: var(--ink); }
.doc-note { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px; display: grid; gap: 6px; }
.doc-note.warn { border-color: var(--warn); }
.doc kbd, .doc .ui { font: 600 13px/1.2 var(--sans); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line-soft); }
.doc th { font-weight: 600; color: var(--muted); }
.doc-scroll { overflow-x: auto; }

/* the index's map of the guide */
.doc-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; list-style: none; padding: 0 !important; }
.doc-map a { display: grid; gap: 4px; height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; text-decoration: none; color: var(--ink); }
.doc-map a:hover { border-color: var(--ember-dim); }
.doc-map b { color: var(--ember); font-weight: 600; }
.doc-map span { color: var(--muted); font-size: 14px; }

/* Discord, drawn: the bot's real messages in Discord's dark look, so members know what
   they'll see. Not a screenshot of Discord. */
.dc { background: #313338; color: #dbdee1; border-radius: 8px; padding: 14px 16px; font: 15px/1.375 "Segoe UI", system-ui, sans-serif; display: grid; gap: 4px; border: 1px solid #1e1f22; overflow-x: auto; }
.dc-cmd { color: #b5bac1; font-size: 13px; }
.dc-cmd b { color: #c9cdfb; background: #3c4270; border-radius: 3px; padding: 0 3px; font-weight: 500; }
.dc-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dc-name { color: #f2f3f5; font-weight: 600; }
.dc-app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; border-radius: 3px; padding: 1px 4px; text-transform: uppercase; }
.dc-time { color: #949ba4; font-size: 12px; }
.dc-body { display: grid; gap: 6px; }
.dc-body p { margin: 0; }
.dc-embed { border-left: 4px solid #ff8a3d; background: #2b2d31; border-radius: 4px; padding: 10px 14px; display: grid; gap: 6px; max-width: 520px; }
.dc-embed h4 { margin: 0; font: 600 15px/1.3 "Segoe UI", system-ui, sans-serif; color: #f2f3f5; }
.dc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; }
.dc-fields b { display: block; color: #f2f3f5; font-size: 13px; }
.dc-foot { color: #949ba4; font-size: 12px; }
.dc-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-btn { background: #4e5058; color: #fff; border-radius: 3px; padding: 4px 14px; font-size: 14px; font-weight: 500; }
.dc-btn.primary { background: #5865f2; }
.dc-btn.success { background: #248046; }
.dc-btn.danger { background: #da373c; }
.dc-select { background: #1e1f22; border: 1px solid #1e1f22; color: #949ba4; border-radius: 4px; padding: 8px 12px; font-size: 14px; max-width: 420px; }
.dc-eph { color: #949ba4; font-size: 12px; }
.dc code { background: #2b2d31; border-radius: 3px; padding: 0 3px; font-size: 13px; }

@media (max-width: 860px) {
  .doc { grid-template-columns: minmax(0, 1fr); }
  /* The contents card above the text stays short (it scrolls inside), and the guide's
     menu is one row that scrolls sideways: on a phone they took about 650px before
     the page's title. */
  .doc-toc { position: static; max-height: 11.5em; order: -1; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
  .doc-nav { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; padding-bottom: 6px; scrollbar-width: thin; }
  .doc kbd, .doc .ui { white-space: normal; }
  .doc .legal table { font-size: 13px; }
}