/* The learn site. Same palette as the dashboard, so the two read as one
   product — but a reading layout rather than a working one: one column, a
   measure that stays near 68 characters, and nothing that moves. */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --border: #262b36;
  --text: #e6e8ec;
  --dim: #8b93a1;
  --up: #35c07a;
  --down: #e5534b;
  --link: #7aa2d6;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- top bar -------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px;
  background: rgba(15, 17, 21, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.top .brand { font-weight: 600; letter-spacing: .2px; color: var(--text); }
.top .brand span { color: var(--dim); font-weight: 400; }
.top .spacer { flex: 1; }
.top .cta {
  border: 1px solid var(--border); border-radius: 7px;
  padding: 5px 11px; font-size: 13px; color: var(--text); background: #1d222c;
}
.top .cta:hover { background: #232936; text-decoration: none; }

/* --- layout --------------------------------------------------------------- */
.wrap {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 36px; max-width: 1000px; margin: 0 auto; padding: 28px 20px 80px;
}
nav.side { font-size: 13.5px; align-self: start; position: sticky; top: 64px; }
nav.side h4 {
  margin: 18px 0 6px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--dim); font-weight: 600;
}
nav.side h4:first-child { margin-top: 0; }
nav.side a { display: block; padding: 3px 0; color: var(--dim); }
nav.side a:hover { color: var(--text); text-decoration: none; }
nav.side a.on { color: var(--text); font-weight: 600; }

main { min-width: 0; max-width: 68ch; }
main h1 { font-size: 25px; line-height: 1.25; margin: 0 0 6px; text-wrap: balance; }
main h2 {
  font-size: 18px; margin: 34px 0 10px; padding-top: 14px;
  border-top: 1px solid var(--border); text-wrap: balance;
}
main h3 { font-size: 15px; margin: 22px 0 6px; }
main p, main li { color: #d2d6dd; }
main .lede { color: var(--dim); font-size: 16px; margin: 0 0 22px; }
main ul, main ol { padding-left: 20px; }
main li { margin: 5px 0; }
main code {
  background: #12151b; border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- devices -------------------------------------------------------------- */
.note, .warn {
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 7px; background: var(--panel);
  padding: 12px 14px; margin: 18px 0; font-size: 14px;
}
.note { border-left-color: var(--link); }
.warn { border-left-color: var(--down); }
.note b, .warn b { display: block; margin-bottom: 3px; }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; margin: 16px 0; }
th, td { border-bottom: 1px solid var(--border); padding: 7px 10px; text-align: left; vertical-align: top; }
th { color: var(--dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }

.up { color: var(--up); }
.down { color: var(--down); }
.dim { color: var(--dim); }

/* Cards on the index. */
.cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 18px 0; }
.card {
  display: block; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; color: var(--text);
}
.card:hover { border-color: #333b4a; text-decoration: none; }
.card b { display: block; margin-bottom: 4px; }
.card span { color: var(--dim); font-size: 13px; }

/* Next/previous at the foot of every page. */
.pager {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 14px;
}
footer.fine {
  max-width: 1000px; margin: 0 auto; padding: 0 20px 40px;
  color: var(--dim); font-size: 11.5px; line-height: 1.6;
}

@media (max-width: 760px) {
  .wrap { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  nav.side { position: static; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
  nav.side a { display: inline-block; margin-right: 12px; }
}

/* --- figures ---------------------------------------------------------------
   Screenshots carry the explanation that prose was doing badly. They sit at the
   full width of the reading column, on the panel colour so a dark UI does not
   float on the page, and every one carries a caption — an unlabelled screenshot
   makes the reader hunt for what they are supposed to be looking at. */
figure { margin: 26px 0; }
figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--panel);
}
figure figcaption {
  margin-top: 8px; font-size: 12.5px; color: var(--dim); line-height: 1.55;
}
figure figcaption b { color: var(--text); font-weight: 600; }

/* Screenshots are captured at a narrow viewport (about 1000px) rather than a
   full desktop one, so the app's own layout is already tight and its text stays
   legible once the image renders at the width of the reading column. They sit
   INSIDE the measure deliberately — a figure wider than the prose reads as an
   interruption — and each links to the full-size file for anyone who wants to
   read the individual numbers. */
figure > a { display: block; }
figure a:hover img { border-color: #3a4457; }

/* No height cap and no object-fit here on purpose. Both were treating the
   symptom: a whole dashboard panel is simply the wrong asset for a 580px
   column — 960px of UI shown at 581 renders every label at 60% size, which is
   why it read as grey mush, and capping the height only added an arbitrary
   chop. Each image is instead cropped to the region its paragraph is about,
   about 1160px wide at 2x device scale, so it renders at roughly 1:1 and stays
   sharp. Short enough that nothing needs capping. */
figure.narrow img { max-width: 300px; }