/* Weekend docs (layout referenced from docs.papertrade.xyz, Weekend colours). Scoped to #view-docs. */
/* ================= DOCS (layout referenced from docs.papertrade.xyz, Weekend colours) ================= */
#view-docs { position: relative; z-index: 1; --surface: rgba(255,255,255,0.05); --surface-2: rgba(9,11,32,0.66); --muted: rgba(236,232,255,0.74);
  --line: rgba(255,255,255,0.12); --accent: #ffb547; --accent-soft: rgba(255,181,71,0.10); --magenta: #ff5fd2; --moon: #b3a8ff;
  --moon-soft: rgba(179,168,255,0.10); --active: rgba(255,255,255,0.07); }
#view-docs .nav-toggle { display: none; }
body.docs-mode #orb { opacity: 0; }
body.docs-mode #stars { opacity: .35 !important; }
#view-docs .article-col { background: none; }
/* shell */
#view-docs .shell { max-width: 1320px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 236px minmax(0, 1fr) 200px; gap: 48px; }
#view-docs .sidebar { position: sticky; top: 64px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; padding: 26px 8px 40px 0; border-right: 1px solid var(--line); scrollbar-width: thin; }
#view-docs .side-sec + .side-sec { margin-top: 22px; }
#view-docs .side-head { font: 600 11px/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 0 10px 9px; }
#view-docs .side-list { list-style: none; margin: 0; padding: 0; }
#view-docs .side-list a { display: block; padding: 5px 10px; margin-right: 8px; border-radius: 6px; text-decoration: none; font-size: 13.5px; color: var(--ink); border-left: 2px solid transparent; }
#view-docs .side-list a:hover { background: var(--active); }
#view-docs .side-list a.active { background: var(--active); border-left-color: var(--accent); font-weight: 600; border-radius: 0 6px 6px 0; }

/* article */
#view-docs .article-col { padding: 26px 0 72px; min-width: 0; }
#view-docs .crumbs { font: 500 11px/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); display: flex; gap: 8px; flex-wrap: wrap; }
#view-docs .crumbs span.sep { opacity: .6; }
#view-docs .article { max-width: 720px; margin-top: 26px; }
#view-docs .eyebrow { font: 600 11px/1 var(--f-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
#view-docs .article h1 { font: 800 36px/1.1 var(--f-display); letter-spacing: -0.02em; margin: 0 0 14px; text-wrap: balance; }
#view-docs .article .lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }
#view-docs .article h2 { font: 700 22px/1.3 var(--f-display); letter-spacing: -0.01em; margin: 44px 0 12px; text-wrap: balance; }
#view-docs .article h3 { font: 700 16.5px/1.35 var(--f-body); margin: 28px 0 8px; }
#view-docs .article p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
#view-docs .article p b, #view-docs .article li b { color: var(--ink); font-weight: 600; }
#view-docs .article ul, #view-docs .article ol { margin: 0 0 16px; padding-left: 20px; color: var(--muted); font-size: 15.5px; }
#view-docs .article ul { list-style: none; padding-left: 4px; }
#view-docs .article ul > li { position: relative; padding-left: 20px; margin: 6px 0; }
#view-docs .article ul > li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
#view-docs .article ol > li { margin: 6px 0; padding-left: 4px; }
#view-docs .article a.x { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
#view-docs code, #view-docs .mono { font-family: var(--f-mono); }
#view-docs .article :not(pre) > code { font-size: 12.8px; background: var(--surface); border: 1px solid var(--line); padding: 1px 5px; border-radius: 5px; color: var(--ink); }
#view-docs pre { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; font: 400 12.8px/1.65 var(--f-mono); color: var(--ink); margin: 0 0 18px; }
#view-docs pre .c { color: var(--faint); }
#view-docs .tbl { overflow-x: auto; margin: 4px 0 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
#view-docs table { border-collapse: collapse; width: 100%; font-size: 14px; }
#view-docs th, #view-docs td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
#view-docs th { font: 600 11.5px/1.3 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); background: rgba(255,255,255,0.04); }
#view-docs tr:last-child td { border-bottom: 0; }
#view-docs td { color: var(--muted); } td b { color: var(--ink); }
#view-docs td.n, #view-docs th.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
#view-docs .hi { color: var(--win) !important; font-weight: 600; } .lo { color: var(--faint) !important; }
#view-docs .callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px 16px; border-radius: 10px; margin: 6px 0 20px; background: var(--moon-soft); border: 1px solid color-mix(in srgb, var(--moon) 30%, transparent); }
#view-docs .callout.warn { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
#view-docs .callout .ic { font: 700 12px/1 var(--f-mono); color: var(--moon); padding-top: 4px; }
#view-docs .callout.warn .ic { color: var(--accent); }
#view-docs .callout p { margin: 0; font-size: 14.5px; } .callout p + p { margin-top: 6px; }
#view-docs .steps { counter-reset: s; list-style: none; padding: 0 !important; }
#view-docs .steps > li { counter-increment: s; position: relative; padding: 2px 0 10px 40px !important; margin: 0 !important; }
#view-docs .steps > li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--f-mono); background: linear-gradient(135deg, var(--accent), var(--magenta)); color: #1a0b2a; }
#view-docs .steps > li b { display: block; color: var(--ink); font-size: 15.5px; }

/* diagram */
#view-docs .flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 26px; margin: 8px 0 22px; }
#view-docs .flow .node { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 13px; color: var(--muted); position: relative; }
#view-docs .flow .node b { display: block; color: var(--ink); font-size: 13.5px; margin-bottom: 2px; }
#view-docs .flow .node.k { border-color: var(--accent); box-shadow: 0 0 24px rgba(255,181,71,0.15); }
#view-docs .flow .node.m { border-color: var(--moon); box-shadow: 0 0 24px rgba(179,168,255,0.15); }
#view-docs .flow .arrow::after { content: "→"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 16px; }
#view-docs .flow .lane { grid-column: 1 / -1; font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 8px; }

/* prev / next */
#view-docs .prev-next { max-width: 720px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 64px; }
#view-docs .prev-next a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; background: var(--surface); }
#view-docs .prev-next a:hover { border-color: var(--faint); }
#view-docs .prev-next .label { font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
#view-docs .prev-next .title { display: block; margin-top: 7px; font-weight: 600; font-size: 14.5px; }
#view-docs .prev-next .next { text-align: right; grid-column: 2; }
#view-docs .prev-next .off { visibility: hidden; }
#view-docs .foot { max-width: 720px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); }

/* toc */
#view-docs .toc { position: sticky; top: 64px; align-self: start; padding: 30px 0; }
#view-docs .toc-head { font: 600 11px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
#view-docs .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
#view-docs .toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; font-size: 13px; color: var(--muted); text-decoration: none; }
#view-docs .toc a.on { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }

@media (max-width: 1100px) {#view-docs .shell { grid-template-columns: 220px minmax(0, 1fr); gap: 36px; }#view-docs .toc { display: none; } }
@media (max-width: 760px) {
  #view-docs .shell { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 0; }
  #view-docs .nav-toggle { display: flex; width: 100%; margin-top: 14px; justify-content: space-between; }
  #view-docs .sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 0 18px; }
  #view-docs .sidebar[data-open="false"] { display: none; }
  #view-docs .article h1 { font-size: 28px; } .flow { grid-template-columns: minmax(0, 1fr); } .flow .arrow::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -19px; transform: none; }
  #view-docs .prev-next { grid-template-columns: minmax(0, 1fr); } .prev-next .next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {#view-docs html { scroll-behavior: auto; } }
@media (max-width: 760px) {
  #view-docs .shell { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 0; }
  #view-docs .nav-toggle { display: flex; width: 100%; margin-top: 14px; justify-content: space-between; }
  #view-docs .sidebar { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 0 18px; }
  #view-docs .sidebar[data-open="false"] { display: none; }
}
#view-docs .shell { padding-top: 8px; }