/* Shared by every page under /learn.
 *
 * The rest of the site inlines its CSS — each of those pages is a
 * one-off and stays self-contained. This section is not: twenty pages
 * with one look, read one after another, so a single cached file beats
 * twenty copies of the same 60 lines. It also means a contrast fix lands
 * everywhere at once, which is exactly what went wrong when the landing
 * page's dark-mode link colour was missing from one page and not the
 * others. */

:root { --blue:#1a5276; --deep:#0b2c47; --amber:#f0a73c; --ink:#14202b;
        --muted:#5d6b78; --line:#dbe2e8; --card:#fff; --bg:#eef1f4;
        --code:#0f1b25; --codeink:#dce6ee; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
       font:16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width:720px; margin:0 auto; padding:0 20px; }

header { background:linear-gradient(150deg,#246c96,var(--deep)); color:#fff;
         padding:38px 0 32px; }
header h1 { font-size:26px; margin:0 0 5px; font-weight:650; letter-spacing:-.2px;
            line-height:1.3; }
header p { margin:0; opacity:.82; font-size:13.5px; }
nav.crumbs { font-size:12.5px; opacity:.75; margin:0 0 10px; }
nav.crumbs a { color:#fff; }

/* Who wrote this and when it was last touched. Both are load-bearing for
   a reader deciding whether to trust a calculation, which is also why
   they are on the page and not only in the JSON-LD: a byline nobody can
   see is a claim made to a crawler and withheld from the engineer. */
header .byline { margin:10px 0 0; font-size:12.5px; opacity:.72; }
header .byline a { color:#fff; }

main { padding:28px 0 50px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px;
        padding:22px; margin-bottom:16px; }
.card.try { border-left:4px solid var(--amber); }
h2 { font-size:18px; margin:0 0 10px; font-weight:600; line-height:1.35; }
h3 { font-size:15px; margin:18px 0 6px; font-weight:600; }
h3:first-child { margin-top:0; }
p { margin:0 0 12px; }
p:last-child { margin-bottom:0; }
a { color:var(--blue); }
ul, ol { padding-left:20px; margin:10px 0 0; }
li { margin-bottom:6px; }
.muted { color:var(--muted); font-size:14.5px; }
strong.term { font-weight:600; }

a.button { display:inline-block; text-decoration:none; background:var(--blue);
           color:#fff; font-weight:600; padding:11px 20px; border-radius:8px;
           margin-top:6px; }
a.button:hover { background:#16455f; }

/* A worked step: the formula, then the same formula with numbers in it.
   Both matter — students copy the second and check the first. */
.work { background:var(--code); color:var(--codeink); border-radius:10px;
        padding:15px 17px; margin:12px 0 0; overflow-x:auto;
        font:13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.work .lbl { color:#8fa8bb; }
.work .pass { color:#7fd18b; font-weight:600; }
.work .fail { color:#f2836f; font-weight:600; }
.work b { color:#f0c584; font-weight:600; }

table { width:100%; border-collapse:collapse; font-size:14.5px; margin-top:10px; }
th, td { text-align:left; padding:8px 12px 8px 0; border-bottom:1px solid #eef2f5;
         vertical-align:top; }
th { color:var(--muted); font-size:12px; text-transform:uppercase;
     letter-spacing:.04em; font-weight:600; }
td.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.scroll { overflow-x:auto; }

.note { border-left:3px solid var(--amber); padding-left:14px; margin:14px 0 0;
        font-size:14.5px; color:var(--muted); }
.next { columns:2; column-gap:24px; font-size:14.5px; padding-left:18px; }

footer { border-top:1px solid var(--line); padding:20px 0 30px;
         color:var(--muted); font-size:12.5px; text-align:center; }
footer a { color:inherit; }

@media (max-width:520px) { .next { columns:1; } }
@media (prefers-color-scheme: dark) {
  :root { --bg:#101820; --ink:#e8edf2; --muted:#93a2b0; --card:#18222c;
          --line:#26323d; --code:#0b131a; }
  a { color:#6fb4dc; }
  a.button { background:#2b7aa8; color:#fff; }
  a.button:hover { background:#3a8cbc; }
  th, td { border-bottom-color:#222e39; }
}