/* cr.css: lane CR. Course map, plan grid, year pages, placement, parents, SEND, reading preferences. */

@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/andika-400-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Andika";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/andika-700-latin.woff2) format("woff2");
}

/* Reading preferences, applied site-wide when cr.prefs.js is loaded */
html.lt-prefs {
  font-size: calc(100% * var(--lt-size, 1));
}
html.lt-prefs body {
  font-size: 1rem;
  letter-spacing: var(--lt-ls, normal);
}
html.lt-prefs :is(h1, h2, h3, h4, p, li, a, em, b, strong, span, summary, button) { overflow-wrap: anywhere; }
html.lt-prefs h1,
html.lt-prefs h2,
html.lt-prefs h3 {
  letter-spacing: var(--lt-ls, normal);
}
html.lt-lh
  body
  :is(p, li, dd, td, th, summary, label, small, figcaption, blockquote) {
  line-height: var(--lt-lh);
}
html.lt-font-literacy {
  --sans: Andika, "Comic Sans MS", system-ui, sans-serif;
  --display: Andika, "Comic Sans MS", system-ui, sans-serif;
}
html.lt-font-system {
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: system-ui, -apple-system, "Segoe UI", sans-serif;
}
html.lt-prefs body,
html.lt-prefs button,
html.lt-prefs input,
html.lt-prefs select {
  font-family: var(--sans);
}

/* Shared */
.cr-small {
  font-size: 0.875rem;
  color: var(--muted);
}
.cr-pill {
  display: inline-block;
  margin: 0 8px 8px 0;
}
.cr-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cr-pill span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}
.cr-pill input:checked + span {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-ink);
}
.cr-pill input:focus-visible + span {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.cr-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.cr-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cr-two > *,
.cr-three > * {
  min-width: 0;
}
.cr-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.cr-box h3 {
  margin-bottom: 8px;
}
.cr-box p:last-child,
.cr-box ul:last-child {
  margin-bottom: 0;
}
.cr-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}
.cr-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  background: var(--bg-alt);
  color: var(--ink-soft);
}
.cr-note {
  background: var(--yellow-soft);
  border: 1px solid #ecd98a;
  border-radius: var(--r);
  padding: 14px 18px;
  color: var(--yellow-ink);
}
.cr-note p:last-child {
  margin: 0;
}
.cr-unv {
  background: var(--red-soft);
  color: var(--red-ink);
  border-radius: 6px;
  padding: 0 6px;
  font-weight: 700;
  font-size: 0.8125rem;
}
.cr-src {
  font-size: 0.9375rem;
}
.cr-src li {
  margin-bottom: 6px;
}

/* Course map */
.cr-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.cr-step {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 20px 18px;
  text-decoration: none;
  color: var(--ink);
  overflow: hidden;
}
.cr-step:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.cr-step i {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 6px;
}
.cr-step .lvl {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 6px;
}
.cr-step h3 {
  margin: 6px 0 8px;
}
.cr-step p {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.cr-step dl {
  margin: 0;
  font-size: 0.875rem;
}
.cr-step dt {
  float: left;
  clear: left;
  width: 82px;
  color: var(--muted);
}
.cr-step dd {
  margin: 0 0 2px 82px;
  font-weight: 600;
}
.cr-years {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.cr-years a {
  display: block;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}
.cr-years a:hover {
  border-color: var(--ink);
}
.cr-years small {
  display: block;
  font-weight: 500;
  color: var(--muted);
}
.cr-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.cr-pick a.cr-box {
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.cr-pick a.cr-box:hover {
  border-color: var(--ink);
}
.cr-pick .go {
  display: block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--blue);
}

/* Plan grid */
.cr-gridwrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  margin-top: 20px;
}
.cr-grid {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.cr-grid th,
.cr-grid td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.cr-grid thead th {
  position: sticky;
  top: 0;
  background: var(--bg-alt);
  font-family: var(--display);
  font-size: 0.9375rem;
}
.cr-grid thead th small {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  color: var(--muted);
}
.cr-grid tbody th {
  width: 170px;
  background: #fff;
}
.cr-grid tbody th small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.35;
}
.cr-grid td p {
  margin: 0 0 6px;
}
.cr-grid td .cr-links {
  font-size: 0.8125rem;
  gap: 2px 10px;
  margin: 0;
}
.cr-levelnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.cr-levelnav a,
.cr-levelnav button {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.cr-levelnav [aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.cr-lvl-sec {
  margin-top: 36px;
}
.cr-lvl-sec > h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
}
.cr-lvl-sec > h3 i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}
.cr-wk {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  margin-top: 12px;
}
.cr-wk th,
.cr-wk td {
  border-bottom: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.cr-wk th {
  background: var(--bg-alt);
}
.cr-wk td:first-child {
  white-space: nowrap;
  font-weight: 700;
  width: 56px;
}
.cr-wk tr.rev td {
  background: var(--bg-alt);
  font-weight: 600;
}
.cr-term3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.cr-term3 .cr-box {
  font-size: 0.9375rem;
}
.cr-term3 h4 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1.0625rem;
}
.cr-term3 .sub {
  color: var(--muted);
  font-size: 0.8125rem;
  margin-bottom: 8px;
  display: block;
}
.cr-pdfs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

/* Year pages */
.cr-use {
  width: 100%;
  border-collapse: collapse;
  margin-top: 14px;
  font-size: 0.9375rem;
  background: #fff;
}
.cr-use th,
.cr-use td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.cr-use th {
  width: 190px;
  background: var(--bg-alt);
}
.cr-tl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
.cr-tl .cr-box h3 {
  font-size: 1.125rem;
}
.cr-tl ol {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  font-size: 0.9375rem;
}
.cr-tl li {
  padding: 5px 0;
  border-top: 1px solid var(--line);
}
.cr-tl li b {
  display: inline-block;
  min-width: 44px;
}
.cr-tl li a {
  text-decoration: none;
}
.cr-tl li span {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}
.cr-pn {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* Placement */
.cr-card {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 32px);
  max-width: 720px;
  margin: 0 auto;
}
.cr-age {
  border: 0;
  padding: 0;
  margin: 18px 0;
}
.cr-age legend {
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0;
}
.cr-prog {
  color: var(--muted);
  font-size: 0.9375rem;
}
.cr-bar {
  height: 8px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 18px;
}
.cr-bar i {
  display: block;
  height: 100%;
  background: var(--green);
  border-radius: 999px;
}
.cr-ask {
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  margin-bottom: 14px;
  outline: none;
}
.cr-text {
  font-size: 1.375rem;
  background: var(--bg-alt);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 16px;
  font-family: var(--sans);
}
.cr-say {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
}
.cr-say:hover {
  background: var(--blue-ink);
}
.cr-gu {
  margin-bottom: 14px;
  font-size: 0.9375rem;
}
.cr-gu summary {
  cursor: pointer;
  color: var(--blue-ink);
}
.cr-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 20px;
}
.cr-opt {
  min-height: 64px;
  padding: 12px 16px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r);
  background: #fff;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.cr-opt:hover {
  border-color: var(--ink);
}
.cr-opt.on {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.cr-opt:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.cr-opt.pic {
  min-height: 110px;
}
.cr-pic {
  font-size: 3rem;
  line-height: 1;
}
.cr-sw {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
}
.cr-nav {
  text-align: right;
}
.cr-nav .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.cr-result h2 {
  margin: 6px 0 14px;
}
.cr-big {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.cr-scores {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.cr-scores li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.cr-scores li:last-child {
  border-bottom: 0;
}
.cr-scores li span {
  flex: 1;
}
.cr-scores em {
  font-style: normal;
  font-size: 0.8125rem;
  color: var(--muted);
  min-width: 92px;
  text-align: right;
}
.cr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Reading preferences panel */
.pr-panel {
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: clamp(18px, 4vw, 30px);
}
.pr-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.pr-row label span,
.pr-row legend span {
  display: block;
  color: var(--muted);
  font-size: 0.875rem;
}
.pr-row input[type="range"] {
  width: 100%;
  min-height: 44px;
  accent-color: var(--blue);
}
.pr-set {
  display: block;
  padding: 14px 0;
}
.pr-set legend {
  padding: 0;
  margin-bottom: 8px;
}
.pr-pills {
  margin-top: 8px;
}
.pr-sw {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.3);
}
.pr-actions {
  margin-top: 18px;
}
.pr-sample {
  margin-top: 24px;
  padding: 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--bg);
}

@media (max-width: 860px) {
  .cr-ladder,
  .cr-years {
    grid-template-columns: 1fr 1fr;
  }
  .cr-three,
  .cr-pick,
  .cr-term3,
  .cr-tl {
    grid-template-columns: 1fr;
  }
  .cr-two {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  .cr-ladder,
  .cr-years,
  .cr-opts,
  .pr-row {
    grid-template-columns: 1fr;
  }
  .cr-use th {
    width: auto;
    display: block;
    border-bottom: 0;
  }
  .cr-use td {
    display: block;
    border-top: 0;
  }
  .cr-use tr {
    display: block;
    margin-bottom: 10px;
  }
  .cr-nav {
    text-align: center;
  }
  .cr-nav .btn {
    width: 100%;
  }
}

/* Plan: show only the chosen level when the page URL has ?level=N (set by cr.js-free inline script) */
body[data-plan-level] .cr-lvl-sec:not(.show),
body[data-plan-level] .cr-gridcol:not(.show) {
  display: none;
}

@media print {
  .cr-levelnav,
  .cr-pdfs,
  .cr-say,
  .cr-nav,
  .cr-actions,
  .cr-pn,
  .cr-prefs-hide {
    display: none !important;
  }
  .cr-gridwrap {
    overflow: visible;
    border: 0;
  }
  .cr-grid {
    min-width: 0;
    font-size: 9px;
  }
  .cr-grid thead th {
    position: static;
  }
  .cr-lvl-sec {
    break-before: page;
  }
  .cr-box,
  .cr-term3 .cr-box,
  .cr-tl .cr-box {
    break-inside: avoid;
  }
  .cr-wk {
    font-size: 9.5px;
  }
  .cr-wk tr {
    break-inside: avoid;
  }
  .cr-card {
    border: 0;
    padding: 0;
    max-width: none;
  }
  .cr-links a::after {
    content: "";
  }
}

/* Large text on small screens: let multi-column site components stack so nothing overflows */
@media (max-width: 560px) {
  html.lt-prefs :is(.rubric, .facts, .weights, .abc, .terms, .tracks, .ladder, .guides-grid) { grid-template-columns: 1fr; }
  html.lt-prefs .facts div { border-left: 0; }
}
.cr-use th small { display: block; font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }