/* learn.css — the written reasoning articles (learn/*.html).
   =========================================================================
   Same reasoning as the Vault's guide.css: these pages exist so the writing is
   HTML rather than JavaScript, and a page whose only job is to be read should
   not depend on the app shell to render. No sidebar grid, no scripts.

   Tokens are copied rather than imported, so an article still looks right when
   it is opened on its own — which is exactly how a crawler fetches it, and how
   a student arriving from a search result sees it. */
:root {
  --bg: #1a1918; --bg-deep: #141312; --card: #232120; --edge: #34322f;
  --text: #f2f2ef; --muted: #9a978f; --green: #a3d968; --green-hi: #7ac943;
  --amber: #e0a458;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-deep); color: var(--text);
  font: 16px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.learn-top { padding: 18px 24px; border-bottom: 1px solid var(--edge); background: var(--bg); }
.learn-home { color: var(--green); text-decoration: none; font-weight: 700; font-size: 14px; }
.learn-home:hover { text-decoration: underline; }

.learn { max-width: 760px; margin: 0 auto; padding: 44px 24px 96px; }
.learn h1 { font-size: 32px; line-height: 1.25; letter-spacing: -.5px; margin: 0 0 10px; }
.learn .learn-standfirst { color: var(--muted); font-size: 17px; margin: 0 0 8px; }
.learn .learn-meta { color: var(--muted); font-size: 13px; margin: 0 0 38px; }
.learn h2 {
  font-size: 21px; margin: 40px 0 12px; padding-top: 26px;
  border-top: 1px solid var(--edge); letter-spacing: -.2px;
}
.learn h2:first-of-type { border-top: 0; padding-top: 0; }
.learn h3 { font-size: 17px; margin: 26px 0 8px; color: var(--green); }
.learn p { margin: 0 0 16px; }
.learn ul, .learn ol { padding-left: 22px; margin: 0 0 18px; }
.learn li { margin-bottom: 9px; }
.learn b, .learn strong { color: #fff; }
.learn a { color: var(--green); }

/* A worked example: the thing that makes an explanation stick. Monospaced so
   grids line up, and visually separated so it reads as "here is the actual
   puzzle" rather than more prose. */
.learn .example {
  background: var(--card); border: 1px solid var(--edge); border-left: 3px solid var(--green-hi);
  border-radius: 10px; padding: 18px 20px; margin: 24px 0;
}
.learn .example .example-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--green-hi); font-weight: 700; margin-bottom: 10px;
}
.learn .grid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px; line-height: 1.6; white-space: pre; overflow-x: auto;
  color: var(--text); margin: 0 0 12px;
}
.learn .note {
  background: var(--card); border: 1px solid var(--edge); border-radius: 10px;
  padding: 16px 18px; margin: 22px 0; color: var(--muted); font-size: 15px;
}
.learn .note b { color: var(--amber); }

.learn-more { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--edge); }
.learn-more h2 { border-top: 0; padding-top: 0; font-size: 17px; margin: 0 0 12px; }
.learn-more ul { list-style: none; padding: 0; }
.learn-more li { margin-bottom: 7px; }
.learn-more a { color: var(--green); text-decoration: none; }
.learn-more a:hover { text-decoration: underline; }

.learn-practice {
  display: inline-block; margin: 8px 0 0; padding: 12px 22px;
  background: var(--green-hi); color: #10240a; border-radius: 8px;
  text-decoration: none; font-weight: 700;
}
.learn-practice:hover { background: var(--green); }

.learn-index { max-width: 760px; margin: 0 auto; padding: 44px 24px 96px; }
.learn-index h1 { font-size: 30px; margin: 0 0 10px; }
.learn-index .idx-sub { color: var(--muted); margin: 0 0 34px; }
.learn-index ol { padding-left: 20px; }
.learn-index li { margin-bottom: 16px; }
.learn-index a { color: var(--green); text-decoration: none; font-weight: 600; font-size: 17px; }
.learn-index a:hover { text-decoration: underline; }
.learn-index .idx-desc { color: var(--muted); font-size: 15px; margin: 3px 0 0; }

@media (max-width: 600px) {
  .learn, .learn-index { padding: 30px 18px 70px; }
  .learn h1 { font-size: 26px; }
}

.learn-index h2 {
  font-size: 15px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--green-hi); margin: 40px 0 14px; padding-top: 24px;
  border-top: 1px solid var(--edge);
}
.learn-index h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---- education.html: the curriculum mapping table --------------------------
   Wrapped in an overflow-x container on purpose. A two-column table is fine on
   a phone until one cell holds a long article title, at which point the whole
   PAGE starts scrolling sideways if the table is left to its own devices.
   Letting the table scroll inside its own box keeps the body still. */
.edu-table-wrap { overflow-x: auto; margin: 20px 0 28px; }
.edu-table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 460px; }
.edu-table th, .edu-table td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--edge);
  vertical-align: top;
}
.edu-table thead th {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); border-bottom: 1px solid var(--edge);
}
.edu-table td:first-child { color: var(--text); width: 46%; }
.edu-table a { color: var(--green); text-decoration: none; }
.edu-table a:hover { text-decoration: underline; }
.edu-table .edu-strand {
  color: var(--green-hi); font-size: 12px; text-transform: uppercase;
  letter-spacing: .09em; padding-top: 22px; border-bottom: 1px solid var(--edge);
}
.learn h3 { color: var(--green); font-size: 17px; margin: 26px 0 8px; }