/*
 * The one stylesheet for BolFluent's static pages: Privacy, Terms, delete-account
 * (scripts/stage-legal.mjs, public/delete-account/) and the /learn/ lesson pages
 * (scripts/stage-learn.mjs). No JavaScript on any of them — they must load fast on a
 * budget phone and read the same to a search crawler as to a person.
 */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #0b0e14; color: #c9d0d9;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.65; }
main { max-width: 46rem; margin: 0 auto; padding: 40px 22px 80px; }
a { color: #22c3b6; }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; text-decoration: none; }
.mark { width: 34px; height: 34px; border-radius: 9px; background: #22c3b6; color: #06241f;
  display: grid; place-items: center; font-weight: 800; font-size: 19px; }
.brand span { color: #22c3b6; font-weight: 700; font-size: 20px; }
h1 { color: #f4f6f8; font-size: 30px; line-height: 1.25; margin: 0 0 6px; }
h2 { color: #f4f6f8; font-size: 21px; margin: 38px 0 10px; }
h3 { color: #f4f6f8; font-size: 17px; margin: 24px 0 6px; }
.updated { color: #6a7484; font-size: 14px; margin: 0 0 30px; }
p, li { margin: 0 0 12px; }
ul, ol { padding-left: 20px; }
table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 15px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #262d38; vertical-align: top; }
th { color: #f4f6f8; }
.back { display: inline-block; margin-top: 40px; }

/* ── Lesson pages ─────────────────────────────────────────────────────────────── */
.crumbs { font-size: 14px; color: #6a7484; margin: -14px 0 18px; }
.crumbs a { color: #97a1b0; text-decoration: none; }
.lead { font-size: 18px; color: #dde3ea; margin: 6px 0 22px; }
.hi { font-family: "Noto Sans Devanagari", "Mangal", system-ui, sans-serif; color: #97a1b0; }
td.hi, span.hi { font-size: 15px; }
.box { border: 1px solid #262d38; border-radius: 12px; padding: 14px 16px; margin: 14px 0; background: #11161f; }
.box p:last-child { margin-bottom: 0; }
.formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #f4f6f8;
  white-space: pre-wrap; background: #151b24; border-radius: 8px; padding: 10px 12px; margin: 8px 0 14px; }
dl { margin: 8px 0 14px; }
dt { color: #f4f6f8; font-weight: 600; font-size: 14px; }
dd { margin: 0 0 8px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  color: #22c3b6; border: 1px solid #22c3b655; border-radius: 999px; padding: 1px 9px; margin-left: 6px;
  vertical-align: middle; text-transform: uppercase; }

/* Wrong → right: the correction is the point, so it is the most visible thing in the card. */
.fix { border: 1px solid #262d38; border-radius: 12px; padding: 12px 16px; margin: 12px 0; background: #11161f; }
.fix .wrong { color: #f87171; text-decoration: line-through; text-decoration-color: #f8717188; margin: 0 0 4px; }
.fix .right { color: #3ddc91; font-weight: 600; margin: 0 0 6px; }
.fix .why { color: #97a1b0; font-size: 15px; margin: 0; }

/* Practice questions: the answer is behind a native <details>, so no script is needed. */
.q { border: 1px solid #262d38; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.q ol { list-style: upper-alpha; margin: 6px 0; }
.q details summary { cursor: pointer; color: #22c3b6; font-size: 15px; min-height: 44px; display: flex; align-items: center; }
.q details p { color: #3ddc91; font-weight: 600; margin: 4px 0 0; }

/* The one call to action on every lesson page. */
.cta { margin: 40px 0 10px; border: 1px solid #22c3b666; border-radius: 16px; padding: 20px;
  background: linear-gradient(135deg, #22c3b61f, #f0a93a14); }
.cta h2 { margin: 0 0 6px; }
.cta p { margin: 0 0 14px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 12px;
  background: #22c3b6; color: #04231f; font-weight: 700; text-decoration: none; }

.cards { list-style: none; padding: 0; display: grid; gap: 10px; }
.cards li { margin: 0; }
.cards a { display: block; border: 1px solid #262d38; border-radius: 12px; padding: 12px 16px;
  text-decoration: none; background: #11161f; }
.cards a strong { color: #f4f6f8; display: block; }
.cards a span { color: #97a1b0; font-size: 15px; }
.quote { color: #dde3ea; font-style: italic; margin: 4px 0 0; }

footer.site { max-width: 46rem; margin: 0 auto; padding: 0 22px 40px; font-size: 14px; color: #6a7484; }
footer.site a { color: #97a1b0; margin-right: 14px; }
footer.site p { margin: 8px 0 0; }