/* Egret documentation. Same tokens and typeface as the app; one reading column, a contents rail on the left.
   Diagrams are inline SVG drawn with the app's own colors, so they follow light and dark like everything else. */

body.docs { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }

.dnav { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 22px 18px 40px; }
.dnav .brand { display: block; color: var(--ink); text-decoration: none; margin-bottom: 18px; }
.dnav .brand span { display: block; font-size: 13px; font-weight: 500; font-stretch: 100%; color: var(--muted); }
.dnav nav { display: block; max-width: none; margin: 0; overflow: visible; }
.dnav nav b { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin: 18px 0 4px; }
.dnav nav a { display: block; color: var(--ink); text-decoration: none; font-size: 14.5px; padding: 4px 8px; margin: 0 -8px; border-radius: var(--r); }
.dnav nav a:hover { background: var(--soft); }

.dmain { max-width: 940px; margin: 0; padding: 48px 56px 120px; }
.dmain section { margin: 0 0 56px; scroll-margin-top: 24px; }
.dmain h1 { font-size: 40px; line-height: 1.08; font-weight: 750; font-stretch: 78%; letter-spacing: -.01em; margin: 6px 0 18px; max-width: 18ch; }
.dmain h2 { font-size: 26px; line-height: 1.15; font-weight: 720; font-stretch: 82%; margin: 0 0 12px; }
.dmain h2.part { font-size: 15px; font-weight: 700; font-stretch: 100%; color: var(--muted); border-top: 2px solid var(--ink); padding-top: 10px; margin: 72px 0 28px; }
.dmain h3 { font-size: 18px; font-weight: 680; margin: 26px 0 8px; }
.dmain p, .dmain li, .dmain dd { font-size: 16.5px; line-height: 1.6; max-width: 68ch; }
.dmain .dtable, .dmain figure { max-width: 828px; }
.dmain ul, .dmain ol { padding-left: 22px; }
.dmain ul.checks { padding-left: 0; }
.dmain ol.trace { padding-left: 16px; }
.dmain li { margin: 6px 0; }
.kicker { font-size: 14px; font-weight: 600; color: var(--accent); margin: 0; }
.lede { font-size: 19px !important; line-height: 1.55 !important; color: var(--muted); }
.note { color: var(--muted); font-size: 15px !important; }
kbd { font-family: var(--mono); font-size: 13px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0 5px; background: var(--panel); }

/* The five moments, in reading order, under the diagram. */
ol.cols { list-style: none; padding: 0; counter-reset: c; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 4px 28px; }
ol.cols li { counter-increment: c; max-width: none; }
ol.cols li::before { content: counter(c) ". "; font-weight: 700; }

ol.steps-doc { padding-left: 0; list-style: none; counter-reset: s; }
ol.steps-doc li { counter-increment: s; position: relative; padding-left: 40px; margin: 12px 0; }
ol.steps-doc li::before { box-sizing: border-box; content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); font: 700 13px/23px var(--ui); text-align: center; }

.dtable { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 15px; }
.dtable th { text-align: left; font-size: 13px; font-weight: 650; color: var(--muted); padding: 8px 12px 8px 0; border-bottom: 1.5px solid var(--ink); }
.dtable td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable td:first-child { font-weight: 650; }

dl.glossary { display: grid; grid-template-columns: 170px 1fr; gap: 0; margin: 0; }
dl.glossary dt { font-weight: 700; padding: 10px 0; border-top: 1px solid var(--line); }
dl.glossary dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--line); }

/* Diagrams. */
figure.diagram { margin: 22px 0 22px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
figure.diagram svg { display: block; width: 100%; height: auto; }
figure.diagram figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
svg .box { fill: var(--panel); stroke: var(--line-strong); stroke-width: 1.5; }
svg .box.accent { fill: var(--accent-soft); stroke: var(--accent); }
svg .box.here { stroke: var(--here); stroke-width: 3; }
svg .box.ink { stroke: var(--ink); stroke-width: 2; }
svg .box.weak { stroke: var(--no); stroke-width: 2.5; }
svg .zone { fill: var(--soft); stroke: none; }
svg .zone.accent { fill: var(--accent-soft); }
svg .ln { stroke: var(--ink); stroke-width: 1.5; fill: none; }
svg .ah { fill: none; stroke: var(--ink); stroke-width: 1.5; }
svg text { font-family: var(--ui); fill: var(--ink); }
svg .t1 { font-size: 19px; font-weight: 700; }
svg .t2 { font-size: 15.5px; fill: var(--muted); }
svg .t3 { font-size: 13px; fill: var(--muted); font-weight: 600; }
svg .t3.dark { fill: var(--here-ink); }
svg .n { font-size: 14px; font-weight: 700; fill: var(--muted); }
svg .big { font-size: 32px; font-weight: 750; font-stretch: 80%; }
svg .big.weak { fill: var(--ink); }
svg .pill { fill: var(--here); }
svg .track { fill: var(--soft); }
svg .fill { fill: var(--accent); }
svg .fill.weak { fill: var(--no); }
figure.trace-fig { padding: 22px 22px 14px 34px; }
figure.trace-fig .trace > li { font-size: 15px; }

/* Small pictures of the app's own screens, drawn with its own parts. */
.mock { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin: 16px 0; font-size: 15px; }
.mock.phone { max-width: 360px; border-radius: 18px; padding: 16px; border: 1.5px solid var(--line-strong); }
.mock.card { max-width: 420px; }
.mock p { margin: 6px 0; }
.m-route { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.m-route:first-child { border-top: 0; }
.m-route small { display: block; color: var(--muted); font-size: 13px; }
.m-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); font: 700 12px/23px var(--ui); text-align: center; }
.m-dot.done { background: var(--yes); border-color: var(--yes); color: var(--panel); }
.m-dot.next { background: var(--here); border-color: var(--here); color: var(--here-ink); }
.m-here { display: inline-block; background: var(--here); color: var(--here-ink); font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: var(--r-sm); }
.mock.stepbar { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.mock.stepbar .done { color: var(--ink); }
.mock.stepbar .cur { color: var(--ink); font-weight: 700; border-bottom: 3px solid var(--here); }
.prompter-mock .m-small { font-size: 13px; color: var(--muted); }
.prompter-mock .m-now { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px 0; margin: 8px 0; }
.prompter-mock .m-line { font-size: 21px !important; line-height: 1.3 !important; font-weight: 650; }
.m-score { font-size: 34px !important; font-weight: 750; font-stretch: 80%; line-height: 1.1 !important; }
.m-score small { font-size: 14px; font-weight: 500; font-stretch: 100%; color: var(--muted); }

.dfoot-doc { border-top: 1px solid var(--line); padding-top: 18px; font-size: 15px; color: var(--muted); }

@media (max-width: 1020px) {
  body.docs { display: block; }
  .dnav { position: sticky; z-index: 3; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; display: flex; align-items: center; gap: 16px; overflow: hidden; }
  .dnav .brand { margin: 0; flex: none; }
  .dnav .brand span { display: none; }
  .dnav nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
  .dnav nav b { display: none; }
  .dnav nav a { white-space: nowrap; margin: 0; font-size: 14px; }
  .dmain { padding: 28px 16px 80px; }
  .dmain section, .dhero { scroll-margin-top: 64px; }
  .dmain h1 { font-size: 31px; }
  .dmain h2 { font-size: 23px; }
  figure.diagram { padding: 14px; overflow-x: auto; }
  figure.diagram svg { min-width: 560px; }
  .dtable { display: block; overflow-x: auto; }
  dl.glossary { grid-template-columns: 1fr; }
  dl.glossary dd { border-top: 0; padding-top: 0; }
}