/* The documentation page, "How to use ConformerLab".
 *
 * Built on app.css and auth.css like the landing and sign-in pages: the
 * tokens, type and components are used as they are, so the page follows the
 * theme and matches the app. Only the page layout lives here: a table of
 * contents that stays in view beside a reading column, which becomes a
 * list above the text on a phone. The two are centred together: the
 * column is as wide as a line reads well, and a wide screen's spare room
 * goes to both sides rather than all to the right of the text.
 */
.docs { flex: 1 0 auto; width: 100%; margin: 0 auto; padding: 36px 40px 72px;
        display: grid; grid-template-columns: 236px minmax(0, 76ch); justify-content: center;
        gap: 22px 56px; align-items: start; }
.docs-head { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; max-width: 72ch; }
.docs-head .lede { max-width: 72ch; }

.docs-toc { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; font-size: 14px;
            max-height: calc(100vh - 40px); overflow-y: auto; }
.docs-toc .label { padding: 0 10px 8px; }
.site .docs-toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text3); line-height: 1.3; }
.site .docs-toc a:hover { background: var(--rulesoft); color: var(--text); }

.docs-body { min-width: 0; display: flex; flex-direction: column; gap: 48px;
             overflow-wrap: anywhere; }
/* A link inside a line of text is underlined, not told apart by colour alone
   (WCAG 1.4.1). */
.site .docs-body p a:not(.btn), .site .docs-body li a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
.docs-body section { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 20px; }
.docs-body h3 { margin-top: 10px; }
.docs-body p, .docs-body li { margin: 0; color: var(--text2); }
.docs-body ul, .docs-body ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 7px; }
.docs-body li > ul, .docs-body li > ol { margin-top: 7px; }
.docs-body code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: .92em;
                  background: var(--raised); border-radius: 5px; padding: 1px 5px; }
.docs-body pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--raised);
                 font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 13px; overflow-x: auto; }
.docs-body pre code { background: none; padding: 0; font-size: inherit; }
.docs-body .notice { font-size: 14.5px; }
.docs-body .tag { vertical-align: middle; }

/* A label as it appears on screen: a button, a heading, a chip, a message. */
.ui, .lbl { font-weight: 600; color: var(--text); background: var(--raised); border: 1px solid var(--rulesoft);
            border-radius: 6px; padding: 0 5px; font-size: .94em;
            -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* A table scrolls sideways inside its frame on a narrow screen rather than
   squeezing its columns until words break. */
.docs-table { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); }
.docs-table table.t { min-width: 540px; }
.docs-table table.t th, .docs-table table.t td { padding: 9px 12px; vertical-align: top; font-size: 14px;
                                                 overflow-wrap: normal; word-break: normal; }
.docs-table table.t th { white-space: nowrap; }
.docs-table table.t th:first-child { width: 27%; }
.docs-table table.t.wrap { min-width: 0; }      /* two columns: wraps rather than scrolls */
.docs-table table.t.wrap th { white-space: normal; }
.docs-table td:first-child { font-weight: 600; }
.docs-scroll-hint { display: none; margin-top: -4px; }
.ui, .lbl { overflow-wrap: normal; }

.keys { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 16px; align-items: center;
        padding: 16px 18px; }
.keys .k { display: inline-flex; align-items: center; gap: 5px; }
.keys .kbd { width: auto; min-width: 28px; padding: 0 8px; }
.keys span:not(.k):not(.kbd) { color: var(--text2); }

.site-foot .row { gap: 16px; }

@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); padding: 24px 16px 48px; gap: 18px; }
  .docs-toc { position: static; max-height: none; overflow: visible; flex-direction: row; flex-wrap: wrap; gap: 6px;
              padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
  .docs-toc .label { width: 100%; padding: 0 0 4px; }
  .site .docs-toc a { padding: 5px 11px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel);
                      font-size: 13.5px; }
  .docs-scroll-hint { display: block; }
  .keys { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .keys .k { margin-top: 8px; }
  .keys .k:first-child { margin-top: 0; }
}