/* ─────────────────────────────────────────────────────────────────────────
   /learn — shared styles. Matches the main site: near-black navy, IBM Plex Mono
   for chrome/headings (brand), IBM Plex Sans for article body (readable at
   length). Palette mirrors index.html. Served at /learn/assets/learn.css and
   linked with a root-absolute path so it resolves from any depth.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#0a0e17; --bg2:#111726; --bg3:#0d1320; --border:#222b3b;
  --text:#e6edf3; --prose:#c3ccd8; --text-mid:#8b96a8; --text-dim:#5a6576;
  --accent:#58a6ff; --purple:#bc8cff; --amber:#e3b341; --green:#4ec26f;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--prose);
  font-family:var(--sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{ color:var(--accent); text-decoration:none }
a:hover{ text-decoration:underline }

/* top bar — brand links home, so every learn page links back into the site */
.topbar{
  display:flex; align-items:center; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--border); background:var(--bg3);
  font-family:var(--mono);
}
.topbar .brand{ font-weight:700; letter-spacing:.02em; color:var(--text); font-size:15px }
.topbar .brand .app{ color:var(--accent) }
.topbar .spacer{ flex:1 }
.topbar .live{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--accent); border:1px solid var(--border); border-radius:6px; padding:6px 12px;
}
.topbar .live:hover{ text-decoration:none; border-color:var(--accent) }

.wrap{ max-width:760px; margin:0 auto; padding:0 20px }

/* breadcrumb */
.crumbs{ font-family:var(--mono); font-size:12px; color:var(--text-dim); margin:22px 0 6px; letter-spacing:.02em }
.crumbs a{ color:var(--text-mid) }
.crumbs span{ color:var(--text-dim) }

/* article header */
.eyebrow{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--amber); margin:0 0 10px;
}
h1{
  font-family:var(--mono); font-weight:700; color:var(--text);
  font-size:27px; line-height:1.25; letter-spacing:.01em; margin:0 0 12px;
}
.lead{ color:var(--text-mid); font-size:17px; margin:0 0 8px }
.meta{ font-family:var(--mono); font-size:12px; color:var(--text-dim); margin:14px 0 0 }

article{ padding-bottom:8px }
article h2{
  font-family:var(--mono); font-weight:600; color:var(--text); font-size:18px;
  letter-spacing:.01em; margin:38px 0 12px; padding-left:12px;
  border-left:3px solid var(--accent);           /* signature: data-terminal rule */
}
article h3{ font-family:var(--mono); font-weight:600; color:var(--text-mid); font-size:15px; margin:26px 0 8px }
article p{ margin:0 0 15px }
article strong{ color:var(--text); font-weight:600 }
article em{ color:var(--text-mid); font-style:italic }
article ul{ margin:0 0 16px; padding-left:22px }
article li{ margin:0 0 8px }
article code{
  font-family:var(--mono); font-size:.88em; background:var(--bg2);
  border:1px solid var(--border); border-radius:4px; padding:1px 5px; color:var(--text);
}
.term{ color:var(--text); font-weight:600 }

/* a compact worked example / mini table */
.tbl{ width:100%; border-collapse:collapse; margin:6px 0 18px; font-family:var(--mono); font-size:13px }
.tbl th, .tbl td{ text-align:right; padding:8px 10px; border-bottom:1px solid var(--border) }
.tbl th:first-child, .tbl td:first-child{ text-align:left }
.tbl th{ color:var(--text-mid); font-weight:600; font-size:11px; letter-spacing:.04em; text-transform:uppercase }
.tbl td{ color:var(--prose) }
.tbl .amber{ color:var(--amber) } .tbl .blue{ color:var(--accent) }

/* takeaway / definition callout */
.key{
  background:var(--bg2); border:1px solid var(--border); border-left:3px solid var(--purple);
  border-radius:6px; padding:14px 16px; margin:20px 0; font-size:15px; color:var(--text-mid);
}
.key b{ color:var(--text); font-weight:600 }

/* the standing disclaimer, same wording family as the main site */
.notice{
  background:var(--bg3); border-left:3px solid var(--amber); border-radius:6px;
  padding:12px 14px; margin:26px 0 0; font-size:13px; line-height:1.6; color:var(--text-mid);
  font-family:var(--sans);
}
.notice strong{ color:var(--text) }

/* CTA back to live prices */
.cta{
  display:inline-block; margin:24px 0 4px; font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--accent); border:1px solid var(--border); border-radius:8px; padding:10px 16px;
}
.cta:hover{ text-decoration:none; border-color:var(--accent) }

/* "read next" links */
.next{ margin-top:34px; border-top:1px solid var(--border); padding-top:18px }
.next h4{ font-family:var(--mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); margin:0 0 10px }
.next a{ display:block; padding:4px 0 }

/* hub cards */
.hub-intro{ margin:22px 0 26px }
.cards{ display:grid; gap:12px; grid-template-columns:1fr; margin-bottom:10px }
.card{
  display:block; background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:18px 18px; transition:border-color .15s, transform .15s;
}
.card:hover{ border-color:var(--accent); transform:translateY(-1px); text-decoration:none }
.card .k{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim); margin:0 0 8px }
.card h2{ all:unset; display:block; font-family:var(--mono); font-weight:600; color:var(--text); font-size:16px; margin:0 0 6px }
.card p{ margin:0; font-size:14px; color:var(--text-mid); line-height:1.55 }

footer{
  max-width:760px; margin:40px auto 0; padding:20px; border-top:1px solid var(--border);
  font-family:var(--mono); font-size:12px; color:var(--text-dim);
}
footer a{ color:var(--text-mid) }

@media (max-width:640px){
  body{ font-size:15.5px }
  h1{ font-size:23px }
  .wrap{ padding:0 16px }
  .topbar{ padding:12px 16px }
}