/* Operon guides: the help pages, in the same paper as the site. Sidebar of chapters, readable measure, click-by-click
   steps with a small picture of the screen each step happens on. */
.docs { min-height: 100vh; }
.docs-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 var(--sc-gutter);
  background: var(--paper-desk); background-color: var(--desk); box-shadow: 0 1px 0 var(--rule-2); }
.docs-bar .brand { color: var(--sc-ink); font-size: 19px; }
.docs-bar__tag { font: 600 13px/1 var(--sc-font-text); color: var(--sc-ink-soft); padding: 6px 10px; border-radius: 999px; background: var(--sheet-2); border: 1px solid var(--rule); }
.docs-bar__find { margin-left: auto; position: relative; }
.docs-bar__find input { width: min(320px, 46vw); height: 40px; padding: 0 12px 0 36px; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--sheet); font: 500 15px/1 var(--sc-font-text); }
.docs-bar__find svg { position: absolute; left: 12px; top: 12px; color: var(--sc-ink-soft); }
.docs-bar .btn { height: 40px; }
.docs-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); max-width: 78rem; margin: 0 auto; padding: 32px var(--sc-gutter) 120px; }
.docs-nav { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 110px); overflow: auto; padding-right: 6px; }
.docs-nav p { margin: 18px 0 6px; font: 700 12px/1 var(--sc-font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.docs-nav p:first-child { margin-top: 0; }
.docs-nav a { display: block; padding: 7px 10px; margin-left: -10px; border-radius: 8px; text-decoration: none; font: 540 15px/1.3 var(--sc-font-text); color: #3a3832; }
.docs-nav a:hover { background: rgba(255, 253, 249, .7); }
.docs-nav a[aria-current="true"] { background: var(--sheet); color: var(--sc-ink); box-shadow: var(--e1); font-weight: 650; }
.docs-main { max-width: 52rem; }
.docs-main section { padding-top: 12px; margin-bottom: 64px; scroll-margin-top: 84px; }
.docs-main h1 { margin: 6px 0 12px; font: 760 clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem)/1.02 var(--sc-font-display); letter-spacing: -.04em; }
.docs-main h2 { margin: 0 0 10px; font: 740 clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem)/1.1 var(--sc-font-display); letter-spacing: -.03em; }
.docs-main h3 { margin: 30px 0 10px; font: 700 1.25rem/1.2 var(--sc-font-display); letter-spacing: -.02em; }
.docs-main p:not(.film *), .docs-main li:not(.film *) { font: 450 17px/1.65 var(--sc-font-text); color: #2d2b26; }
.docs-main .lead { font-size: 19px; color: var(--sc-ink-soft); max-width: 44rem; }
.docs-main code:not(.film *), .docs-main kbd { font: 500 .88em/1 var(--sc-font-mono); padding: 2px 6px; border-radius: 5px; background: var(--sheet-2); border: 1px solid var(--rule); }
.docs-main a:not(.film *) { color: var(--green-2); }
.ui { font: 650 .95em/1 var(--sc-font-text); padding: 2px 7px; border-radius: 6px; background: #fff; border: 1px solid var(--rule-2); box-shadow: 0 1px 0 var(--rule-2); white-space: nowrap; }
.path { font-weight: 650; }
.path i { font-style: normal; color: var(--sc-ink-soft); margin: 0 4px; }
.plan { display: inline-block; font: 700 11.5px/1 var(--sc-font-text); padding: 4px 8px; border-radius: 999px; background: var(--green-tint); color: var(--green-2); vertical-align: 2px; margin-left: 6px; }
.note { margin: 18px 0; padding: 14px 16px 14px 18px; border-radius: 10px; background: var(--sheet); box-shadow: inset 3px 0 0 var(--green), var(--e1); }
.note.warn { box-shadow: inset 3px 0 0 #c98a1c, var(--e1); }
.note p { margin: 0; font-size: 15.5px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.cards a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; background: var(--sheet); box-shadow: var(--e1); text-decoration: none; color: var(--sc-ink); }
.cards a b { font: 700 17px/1.2 var(--sc-font-display); letter-spacing: -.01em; }
.cards a span { font: 470 14.5px/1.45 var(--sc-font-text); color: var(--sc-ink-soft); }
.cards a:hover { box-shadow: var(--e2); }
.tabs-app { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 6px; }
.tabs-app button { height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-2); background: var(--sheet); font: 620 14.5px/1 var(--sc-font-text); }
.tabs-app button[aria-selected="true"] { background: #1b1c19; color: #fff; border-color: #1b1c19; }
.steps { list-style: none; margin: 18px 0; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 16px 18px; border-radius: 12px; background: var(--sheet); box-shadow: var(--e1); }
.steps > li::before { content: counter(s); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #1b1c19; color: #fff; font: 700 14px/1 var(--sc-font-text); grid-row: span 2; }
.steps > li > p { margin: 3px 0 0; }
.steps .shot { grid-column: 2; margin-top: 10px; }
.shot { border-radius: 10px; border: 1px solid var(--rule-2); background: #fff; padding: 12px 14px; font: 500 14px/1.4 'Geist', system-ui; color: #15161a; box-shadow: var(--e1); max-width: 30rem; }
.shot--dark { background: #15161a; color: #e9e9ee; border-color: #2a2b30; font-family: var(--sc-font-mono); font-size: 13px; }
.shot--dark .p { color: #8be38b; }
.shot__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eee; }
.shot__row:last-child { border-bottom: 0; }
.shot__btn { display: inline-flex; padding: 6px 12px; border-radius: 8px; background: #15161a; color: #fff; font: 600 13px/1 'Geist', system-ui; }
.shot__btn.b--ghost { background: #fff; color: #15161a; border: 1px solid #ddd; }
.shot__field { display: grid; gap: 4px; margin: 8px 0; }
.shot__field span { font-size: 12px; color: #6b6e76; }
.shot__field b { font-weight: 500; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; overflow-wrap: anywhere; }
.shot__title { font-weight: 650; margin-bottom: 6px; }
.copy { position: relative; }
.copy button { position: absolute; right: 8px; top: 8px; height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid #3a3b40; background: #23242a; color: #e9e9ee; font: 600 12px/1 var(--sc-font-text); }
table.perm { width: 100%; border-collapse: collapse; margin: 14px 0; background: var(--sheet); border-radius: 10px; overflow: hidden; box-shadow: var(--e1); }
table.perm th, table.perm td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); font: 480 15px/1.45 var(--sc-font-text); vertical-align: top; }
table.perm th { font-weight: 700; font-size: 13px; color: var(--sc-ink-soft); background: var(--sheet-2); }
table.perm td code { white-space: nowrap; }
.docs-main [data-hide] { display: none; }
@media (max-width: 900px) {
  .docs-grid { grid-template-columns: 1fr; }
  .docs-nav { position: relative; top: 0; max-height: none; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
  .docs-nav p { display: none; }
  .docs-nav a { flex: none; margin: 0; background: var(--sheet); box-shadow: var(--e1); white-space: nowrap; }
  .cards { grid-template-columns: 1fr; }
  .docs-bar__tag { display: none; }
  .docs-bar__find input { width: 40vw; }
}
@media (max-width: 560px) { .docs-bar .btn { display: none; } .steps > li { grid-template-columns: 28px minmax(0, 1fr); padding: 14px; } }

/* small pictures of the screen each step happens on: a settings window, a dialog, a chat */
.mock { grid-column: 2; margin-top: 12px; max-width: 34rem; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--rule-2); box-shadow: var(--e1);
  font: 500 13.5px/1.4 'Geist', system-ui, sans-serif; color: #1a1b1f; }
.mock__top { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f3f2ef; border-bottom: 1px solid #e6e4de; font-size: 12px; color: #6b6e76; }
.mock__top i { width: 9px; height: 9px; border-radius: 50%; background: #dcdad3; }
.mock__top span { margin-left: 8px; }
.mock__body { display: grid; grid-template-columns: 132px minmax(0, 1fr); min-height: 150px; }
.mock__side { padding: 10px 8px; background: #faf9f7; border-right: 1px solid #eeece6; display: grid; align-content: start; gap: 2px; }
.mock__side b, .mock__side span { display: block; padding: 6px 8px; border-radius: 7px; font-weight: 500; color: #4b4e56; }
.mock__side b { background: #ecebe6; color: #1a1b1f; font-weight: 650; }
.mock__main { padding: 14px 16px; display: grid; align-content: start; gap: 10px; min-width: 0; }
.mock__h { margin: 0; font: 680 15px/1.2 'Geist', system-ui; }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #f0efea; }
.mock__row small { color: #6b6e76; }
.mock__dlg { margin: 14px; padding: 16px; border-radius: 12px; border: 1px solid #e6e4de; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .25); display: grid; gap: 10px; background: #fff; }
.mock__f { display: grid; gap: 4px; }
.mock__f span { font-size: 12px; color: #6b6e76; }
.mock__f b { font-weight: 500; padding: 8px 10px; border: 1px solid #dddbd4; border-radius: 8px; background: #fafaf8; overflow-wrap: anywhere; }
.mock__acts { display: flex; justify-content: flex-end; gap: 8px; }
.hit { position: relative; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; background: #1a1b1f; color: #fff; font: 600 13px/1 'Geist', system-ui; white-space: nowrap; }
.hit--ghost { background: #fff; color: #1a1b1f; border: 1px solid #dddbd4; }
.hit--on { outline: 2.5px solid #e2a21b; outline-offset: 2px; }
.mock .hit--on::after { content: ''; position: absolute; right: -7px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: #e2a21b; box-shadow: 0 0 0 2px #fff; }
.mark-on { outline: 2.5px solid #e2a21b; outline-offset: 1px; border-radius: 7px; }
.toggle { width: 30px; height: 18px; border-radius: 999px; background: #dcdad3; position: relative; flex: none; }
.toggle::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.toggle.on { background: #2f7a16; } .toggle.on::after { left: 14px; }
.mock__chat { padding: 14px 16px; display: grid; gap: 10px; }
.mock__bubble { justify-self: end; max-width: 85%; padding: 9px 12px; border-radius: 14px; background: #f0eee8; }
.mock__tool { justify-self: start; display: inline-flex; gap: 6px; align-items: center; padding: 6px 10px; border-radius: 8px; border: 1px solid #e6e4de; font-size: 12.5px; color: #4b4e56; }
.mock__composer { margin: 0 12px 12px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 14px; border: 1px solid #dddbd4; color: #8b8e95; }
.mock__menu { margin: 0 12px 6px; justify-self: start; width: 230px; border-radius: 12px; border: 1px solid #e6e4de; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .25); padding: 6px; display: grid; gap: 2px; }
.mock__menu span { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px; border-radius: 7px; }
.host { display: inline-flex; align-items: center; gap: 8px; font: 650 13px/1 var(--sc-font-text); padding: 6px 10px; border-radius: 999px; background: var(--sheet); box-shadow: var(--e1); }
.host i { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.who-for { margin: -4px 0 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 14.5px/1.4 var(--sc-font-text); color: var(--sc-ink-soft); }
.docs-hero { margin-bottom: 56px; }
.docs-hero .lead { margin-top: 0; }
@media (max-width: 560px) { .mock { grid-column: 1 / -1; } .mock__body { grid-template-columns: 1fr; } .mock__side { display: none; } }
.copy { max-width: 34rem; margin: 12px 0; }
.copy pre { max-width: none; margin: 0; padding-right: 74px; white-space: pre-wrap; overflow-wrap: anywhere; }
.steps .copy { grid-column: 2; margin: 10px 0 0; }
@media (max-width: 560px) { .steps .copy { grid-column: 1 / -1; } }
.docs-film { margin: 4px 0 26px; }
.docs-main h3[id] { scroll-margin-top: 84px; }
.docs-grid > * { min-width: 0; }
@media (max-width: 640px) { table.perm { display: block; overflow-x: auto; } table.perm th, table.perm td { padding: 9px 10px; font-size: 14px; } }