/* Learn page. Uses the shared tokens from style.css (--bg, --panel, --text, --muted,
   --accent) and adds nothing to the global namespace beyond .learn descendants, so it
   cannot leak into the canvas or campaign pages. */

.learn {
  max-width: 780px;          /* ~75 characters at this size; this page is read, not scanned */
  padding: 20px 20px 80px;
  line-height: 1.65;
}

.learn section { margin: 0 0 52px; scroll-margin-top: 20px; }

.learn h2 {
  font-size: 22px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #23262e;
}
.learn h3 { font-size: 15px; margin: 28px 0 8px; color: var(--text); }
.learn p { margin: 0 0 14px; }
.learn a { color: var(--accent); }

.learn .lede { font-size: 17px; color: var(--text); }
.learn .aside { color: var(--muted); font-size: 14px; }
.learn code {
  background: #1c1f26; padding: 1px 5px; border-radius: 3px; font-size: 13px;
}

/* Contents ---------------------------------------------------------------- */
.learn .toc {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding: 14px 16px; margin: 0 0 44px;
  background: var(--panel); border-radius: 8px;
}
.learn .toc a { font-size: 13px; text-decoration: none; opacity: 0.75; }
.learn .toc a:hover { opacity: 1; text-decoration: underline; }

/* The sandbox notice. Loud on purpose: it corrects every price on the page. */
.learn .banner {
  padding: 14px 16px; margin: 0 0 32px;
  border-radius: 8px; font-size: 14px;
  border-left: 3px solid;
}
.learn .banner-open   { background: #14210f; border-color: #94E044; }
.learn .banner-closed { background: #241414; border-color: #E50000; }

/* The two claims a reader must not miss: no yield, and the fee. */
.learn .callout {
  background: var(--panel);
  border-left: 3px solid var(--accent);
  padding: 14px 16px; border-radius: 0 8px 8px 0;
}

/* Quick start ------------------------------------------------------------- */
.learn .steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.learn .steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 4px 44px;
  margin: 0 0 24px;
}
.learn .steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--panel); color: var(--accent);
  font-size: 14px; font-weight: 600;
}
.learn .steps h3 { margin: 0 0 4px; font-size: 15px; }
.learn .steps p { margin: 0; }

/* Definition lists (rules, glossary) -------------------------------------- */
.learn dl.rules { margin: 0; }
.learn dl.rules dt {
  font-weight: 600; font-size: 15px;
  margin: 18px 0 4px;
}
.learn dl.rules dd { margin: 0; color: var(--muted); }

/* Numbered campaign lifecycle --------------------------------------------- */
.learn ol.flow { margin: 0; padding-left: 20px; }
.learn ol.flow > li { margin: 0 0 12px; }
.learn ol.flow strong { color: var(--text); }

/* Fact cards -------------------------------------------------------------- */
.learn ul.grid { list-style: none; margin: 0; padding: 0; }
.learn ul.grid > li {
  background: var(--panel);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 0 0 8px;
  font-size: 14px;
}
.learn ul.grid strong { color: var(--text); }

.learn .footnote {
  color: var(--muted); font-size: 13px;
  border-top: 1px solid #23262e; padding-top: 16px;
}

@media (max-width: 620px) {
  .learn { padding: 16px 16px 60px; }
  .learn .lede { font-size: 16px; }
}

/* A section documenting something that is built but not yet open. Amber rather than
   red: it is a status, not a warning, and the section below it is still worth reading. */
.learn .not-ready {
  background: #1c2128;
  border-left: 3px solid #d29922;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 0 0 14px;
}
.learn .not-ready strong { color: #e6edf3; }