/* Reading pages: the litepaper and its sub-pages, transparency and open source. Built on /tidelings.css (DESIGN.md §8.3).
   The pages keep their plain markup (h2, p, ul, table and a few classes); this file gives it the design system's look.
   The water darkens as you read: twilight at the title, the abyss by the footer. The left column is the docs map: every
   reading page, with the sections of the open one as nodes on a depth line (filled in by /docs.js). */

:root { --nav-h: 64px; }
html { scroll-padding-top: calc(var(--nav-h) + 16px); }
body.tl-docs-page {
  min-height: 100vh; overflow-x: clip;
  background: linear-gradient(180deg, var(--z-twilight) 0, var(--z-midnight) 70vh, var(--z-deep) 55%, var(--z-abyss) 100%) var(--z-abyss);
  --fg: var(--foam); --fg-dim: #b9dcec; --link: #9fe7ff; --card: rgba(4, 30, 54, .55); --card-line: rgba(233, 251, 255, .1);
}
.tl-docs-page > .tl-nav { background: rgba(10, 64, 100, .72); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 rgba(233, 251, 255, .08); --fg: var(--foam); --focus: var(--sun); }
.tl-docs-page > .tl-nav.is-deep { background: rgba(6, 36, 63, .8); }

/* ---------------------------------------------------------------- layout: docs map | text */
.docs { width: min(100% - 2 * var(--gutter), 1180px); margin: 0 auto; padding: clamp(32px, 6vw, 72px) 0 var(--s8);
  display: grid; gap: var(--s6) clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .docs { grid-template-columns: 230px minmax(0, 1fr); } }
.docs__map { font-size: var(--fs-ui); }
@media (min-width: 960px) { .docs__map { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; } }
/* phones: the list folds behind an "All docs" button (docs.js); from 960 px it is always shown and the button is gone */
.docs__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; min-height: 48px; padding: 0 var(--s4);
  border: 0; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); color: var(--fg); font: 650 var(--fs-ui)/1 var(--font-body); cursor: pointer; }
.docs__toggle::after { content: "+"; font-size: 20px; color: var(--fg-dim); }
.docs__toggle[aria-expanded="true"]::after { content: "−"; }
.docs__map:not(.is-open) .docs__pages { display: none; }
@media (min-width: 960px) { .docs__toggle { display: none; } .docs__map:not(.is-open) .docs__pages, .docs__map .docs__pages { display: grid; } }   /* as specific as the phone rule it overrides */
.docs__pages { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: 2px; }
@media (min-width: 960px) { .docs__pages { margin: 0; } }
.docs__pages > li > a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--fg-dim); text-decoration: none; font-weight: 600; }
.docs__pages > li > a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.docs__pages > li > a[aria-current="page"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 10%, transparent); }
/* the open page's sections, as the depth line of tl-docs-nav */
.docs__pages .tl-docs-nav { margin: var(--s1) 0 var(--s3) var(--s3); font-size: .875rem; }
.docs__pages .tl-docs-nav ol::before { top: 12px; bottom: 12px; }
.docs__pages .tl-docs-nav li a { padding: 5px 8px 5px 26px; }
.docs__pages .tl-docs-nav li a::before { top: 10px; }

/* ---------------------------------------------------------------- the text */
.docs__body { min-width: 0; max-width: 46rem; }
.docs__body .crumbs { font-size: var(--fs-small); color: var(--fg-dim); margin: 0 0 var(--s4); }
.docs__body .crumbs a { color: var(--fg-dim); }
.docs__body h1 { font-size: var(--fs-h1); line-height: 1.06; font-weight: 620; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "WONK" 1; }
.docs__body .date { margin-top: var(--s3); color: var(--fg-dim); font-size: var(--fs-small); }
.docs__body .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-dim); max-width: 40rem; margin-top: var(--s3); }
.docs__body .lead + .lead { font-size: var(--fs-body); margin-top: var(--s3); }
.docs__body h2 { font-size: clamp(1.6rem, 2.6vw, var(--fs-h2)); margin: clamp(48px, 6vw, 72px) 0 var(--s4); font-variation-settings: "SOFT" 100, "WONK" 0; }
.docs__body h3 { font-size: 1.3rem; margin: var(--s6) 0 var(--s3); }
.docs__body p, .docs__body li { max-width: 66ch; line-height: 1.7; }
.docs__body p + p { margin-top: var(--s3); }
.docs__body ul, .docs__body ol { margin: var(--s3) 0 0; padding-left: 1.3em; }
.docs__body li + li { margin-top: var(--s2); }
.docs__body li::marker { color: color-mix(in srgb, var(--fg-dim) 80%, transparent); }
.docs__body a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: .2em; }
.docs__body a:hover { text-decoration-color: currentColor; }
.docs__body b, .docs__body strong { font-weight: 700; color: var(--fg); }
.docs__body b.v { color: var(--sun); white-space: nowrap; }
.docs__body code, .docs__body .addr { font: 600 .875em var(--font-code); }
.docs__body .addr { display: block; word-break: break-all; padding: var(--s3) var(--s4); border-radius: 12px; background: #041729; color: #d7eef8; }
.docs__body .note { color: var(--fg-dim); font-size: var(--fs-small); margin-top: var(--s3); }

/* panels: a quiet pebble, no outline */
.docs__body .summary, .docs__body .box, .docs__body .rule, .docs__body .snap, .docs__body .race, .docs__body .drop, .docs__body .burn {
  margin-top: var(--s4); padding: var(--s5); border-radius: var(--r-pebble-a); background: var(--card); box-shadow: inset 0 1px 0 rgba(233, 251, 255, .09), inset 0 0 0 1px var(--card-line); }
.docs__body .summary { display: grid; gap: var(--s3); margin-top: var(--s5); }
.docs__body .summary p + p { margin-top: 0; }
.docs__body .summary b { color: var(--sun); }
.docs__body .box.hot, .docs__body .burn { box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--card-line); }
.docs__body .rule { box-shadow: inset 3px 0 0 var(--ok), inset 0 0 0 1px var(--card-line); }
.docs__body .rule b { font: 600 1.3rem/1.2 var(--font-head); color: var(--fg); font-variation-settings: "SOFT" 100; }
.docs__body .rule p { margin-top: var(--s2); }
.docs__body .race, .docs__body .drop, .docs__body .burn { margin-top: var(--s8); border-radius: var(--r-pebble-b); }
.docs__body .race h2, .docs__body .drop h2, .docs__body .burn h2 { margin-top: 0; }
.docs__body .race h3, .docs__body .burn h3 { font-size: 1.15rem; }

/* buttons: the system's (one coral primary, the rest outlined) */
.docs__body .buttons { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.docs__body .buttons a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--r-btn); text-decoration: none;
  font: 650 var(--fs-ui)/1.1 var(--font-body); color: var(--fg); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 55%, transparent); }
.docs__body .buttons a:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); }
.docs__body .buttons a.primary { color: var(--ink); background: linear-gradient(180deg, #ff9b80, var(--accent) 55%, #f5694a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 26px -12px rgba(255, 122, 89, .7); }

/* readouts: small instruments (label under, number in Figtree 700, tabular) */
.docs__body .stats, .docs__body .numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.docs__body .stat, .docs__body .num { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: var(--s4) var(--s4) 14px;
  border-radius: var(--r-pebble-sm); background: color-mix(in srgb, #041729 70%, transparent); box-shadow: inset 0 1px 0 rgba(233, 251, 255, .08); }
.docs__body .stat span, .docs__body .num span { font-size: var(--fs-small); color: var(--fg-dim); line-height: 1.3; }
.docs__body .stat b, .docs__body .num b { font: 700 1.6rem/1.1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--fg); overflow-wrap: anywhere; }
.docs__body .stat b[data-on="true"], .docs__body .burn-status[data-on="true"] { color: var(--ok); }
.docs__body .burn-status { font-size: 1.15rem !important; }

/* tables: the logbook table (tl-table) */
.docs__body .tablewrap { overflow-x: auto; margin-top: var(--s4); }
.docs__body table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-ui); font-variant-numeric: tabular-nums; }
.docs__body th { text-align: left; font-weight: 600; font-size: var(--fs-small); color: var(--fg-dim); padding: 0 12px 10px; white-space: nowrap; border: 0; vertical-align: bottom; }
.docs__body td { padding: 11px 12px; border: 0; border-top: 1.5px dotted rgba(233, 251, 255, .16); vertical-align: top; text-align: left; }
.docs__body tbody tr:last-child td { border-bottom: 1.5px dotted rgba(233, 251, 255, .16); }
.docs__body tbody tr:hover td { background: rgba(233, 251, 255, .04); }
.docs__body .races td { white-space: nowrap; } .docs__body .races .test { color: var(--fg-dim); }

/* the burn feed (burn-feed.js) as logbook rows */
.docs__body .burn-feed { list-style: none; padding: 0; margin-top: var(--s4); display: grid; gap: 0; }
.docs__body .burn-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 4px 16px; align-items: center; padding: 11px 4px; border-top: 1.5px dotted rgba(233, 251, 255, .16); }
.docs__body .burn-row:last-child { border-bottom: 1.5px dotted rgba(233, 251, 255, .16); }
.docs__body .burn-row + .burn-row { margin-top: 0; }
.docs__body .burn-row__at { color: var(--fg-dim); font-size: var(--fs-small); }
.docs__body .burn-row__tide { font-weight: 700; color: var(--sun); text-align: right; font-variant-numeric: tabular-nums; }
.docs__body .burn-row__tx a { font-size: var(--fs-small); white-space: nowrap; }
.docs__body .burn-empty { color: var(--fg-dim); padding: var(--s3) 0; }
@media (max-width: 620px) { .docs__body .burn-row { grid-template-columns: 1fr auto; } .docs__body .burn-row__tide { text-align: left; } }

/* litepaper: the 73 Lurkies by Current */
.docs__body .fams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--s3); margin-top: var(--s4); }
.docs__body .fam { padding: var(--s4); border-radius: var(--r-pebble-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.docs__body .fam:nth-child(even) { border-radius: var(--r-pebble-b); }
.docs__body .fam h3 { margin: 0 0 var(--s3); font-size: 1.1rem; }
.docs__body .row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.docs__body .row4.wide { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.docs__body .dk { text-align: center; font-size: 12px; line-height: 1.3; }
.docs__body .dk img { display: block; width: 100%; max-width: 76px; height: auto; aspect-ratio: 1; margin: 0 auto 6px; border-radius: 50%; padding: 3px;
  background: radial-gradient(circle at 50% 35%, #6fd3ea, #1b86b4 60%, #0b4f7a) content-box, var(--c); box-shadow: 0 0 0 1px rgba(2, 21, 38, .5), 0 8px 16px -10px rgba(1, 10, 20, .9); }
.docs__body .dk small { display: block; margin-top: 2px; color: color-mix(in srgb, var(--c) 72%, var(--foam)); font-weight: 650; }
.docs__body .q-common { --c: var(--common); } .docs__body .q-uncommon { --c: var(--uncommon); } .docs__body .q-unique { --c: var(--unique); }
.docs__body .q-rare { --c: var(--rare); } .docs__body .q-epic { --c: var(--epic); } .docs__body .q-legendary { --c: var(--legendary); }
.docs__body .mg-soon { display: none; }

/* transparency: the money flow as a plumb line from one step to the next */
.docs__body .flow { display: grid; gap: var(--s2); margin-top: var(--s4); }
.docs__body .split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s3); }
.docs__body .step { display: grid; gap: 2px; padding: var(--s4) var(--s5); border-radius: var(--r-pebble-sm); background: var(--card); box-shadow: inset 0 0 0 1px var(--card-line); }
.docs__body .step.gold { box-shadow: inset 3px 0 0 var(--sun), inset 0 0 0 1px var(--card-line); }
.docs__body .step .ico { display: none; }   /* emoji icons: not part of the system (DESIGN.md §5) */
.docs__body .step b { font-weight: 700; } .docs__body .step small { color: var(--fg-dim); font-size: var(--fs-small); }
.docs__body .arrow { display: flex; align-items: center; gap: var(--s2); padding-left: var(--s5); color: var(--sun); font-weight: 700; font-size: var(--fs-small); }
.docs__body .arrow span { color: var(--fg-dim); font-weight: 500; }
@media (max-width: 620px) { .docs__body .split { grid-template-columns: 1fr; } }
.docs__body .wallets { display: grid; gap: 0; margin-top: var(--s4); }
.docs__body .wallet { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 4px; border-top: 1.5px dotted rgba(233, 251, 255, .16); }
.docs__body .wallet:last-child { border-bottom: 1.5px dotted rgba(233, 251, 255, .16); }
.docs__body .wallet b { font-size: 1.0625rem; } .docs__body .wallet .bal { text-align: right; font-weight: 700; color: var(--sun); white-space: nowrap; font-variant-numeric: tabular-nums; }
.docs__body .wallet small { grid-column: 1 / -1; color: var(--fg-dim); }
.docs__body .wallet a.addr { grid-column: 1 / -1; padding: 0; background: none; color: var(--link); font-size: 12.5px; }
.docs__body .move { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 11px 4px; border-top: 1.5px dotted rgba(233, 251, 255, .16); }
.docs__body .move.bad { color: #ffc2c9; box-shadow: inset 3px 0 0 var(--danger); padding-left: 12px; }
.docs__body .move a { font: 600 12px var(--font-code); word-break: break-all; }
.docs__body .snap b { color: var(--sun); }
.docs__body .snap ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--s2); font: 600 13px var(--font-code); }
.docs__body .race-now { margin-top: var(--s3); }

/* the sea floor */
.docs-foot { width: min(100% - 2 * var(--gutter), 1180px); margin: 0 auto; padding-top: var(--s7); }

/* /open-source/: the code viewer (viewer.css) takes the width of the text column */
.docs__body .vs { margin-top: var(--s5); width: 100%; }
.docs__body #zip-sha { word-break: break-all; }