/* The curriculum reader. Colours come from brand.css.

   Two things this stylesheet exists for beyond looks: a comfortable measure
   for long prose, since a teacher reads whole sections rather than scanning
   them, and a print block at the bottom so a level comes out of a printer as a
   usable handout. Classrooms print. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- the level bar ---- */

.curriculum-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem var(--gutter);
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
}

.level-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; }

.level-tab {
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  color: var(--on-navy-dim);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}

.level-tab:hover { background: var(--navy-mid); color: var(--on-navy); }

.level-tab.here {
  background: var(--gold);
  color: var(--navy-deep);
}

.search input {
  width: min(18rem, 46vw);
  padding: 0.4rem 0.7rem;
  border: 2px solid var(--navy-mid);
  border-radius: var(--radius);
  background: var(--navy-deep);
  color: var(--on-navy);
  font: inherit;
  font-size: 0.92rem;
}

.search input::placeholder { color: var(--navy-soft); }
.search input:focus { border-color: var(--gold); outline: none; }

/* ---- a level ---- */

.curriculum { max-width: 54rem; }

.level-title {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.025em;
  color: var(--navy-ink);
}

.level-summary {
  margin: 0.4rem 0 2rem;
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.kit {
  margin: 0 0 2.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--edge);
  border-left: 5px solid var(--navy);
  border-radius: var(--radius);
  background: var(--card);
}

.kit h2 { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--navy-ink); }
.kit ul { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.kit li { margin-bottom: 0.2rem; }

/* ---- a section ---- */

.csection {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--edge);
}

.csection:last-of-type { border-bottom: 0; }

.cshead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

.cshead h3 { margin: 0; font-size: 1.35rem; color: var(--navy-ink); letter-spacing: -0.015em; }
.cshead h3 a { text-decoration: none; }

.cadence {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold-ink);
  white-space: nowrap;
}

.badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 1rem; }

.badge {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: help;
}

.badge-oral { background: var(--badge-oral-bg); color: var(--badge-oral-fg); }
.badge-physical { background: var(--badge-physical-bg); color: var(--badge-physical-fg); }
.badge-mental { background: var(--gold-wash); color: var(--gold-ink); }
.badge-written { background: var(--badge-written-bg); color: var(--badge-written-fg); }
.badge-reference { background: var(--badge-reference-bg); color: var(--badge-reference-fg); }
.badge-science { background: var(--badge-science-bg); color: var(--badge-science-fg); }
.badge-faith { background: var(--badge-faith-bg); color: var(--badge-faith-fg); }

.csection p { margin: 0 0 0.9rem; max-width: var(--measure); }

.editorial {
  margin: 1.25rem 0;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--gold-wash);
}

.editorial p { margin-bottom: 0.6rem; color: var(--gold-ink); font-size: 0.95rem; }
.editorial p:last-child { margin-bottom: 0; }

.editorial-label {
  font-size: 0.7rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold-ink) !important;
}

.supports {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 1rem 0;
}

.supports-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.chip {
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--navy);
  color: var(--on-navy);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}

.chip:hover { background: var(--gold); color: var(--navy-deep); }

.source {
  margin: 0.75rem 0 0 !important;
  font-size: 0.78rem;
  color: var(--navy-soft);
}

/* ---- the at-a-glance table ---- */

.topic { margin-bottom: 0.45rem; }
.topic-name { display: block; font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.topic-cadence { display: block; font-size: 0.76rem; color: var(--gold-ink); }

.print-note {
  padding-top: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* ---- print: one level as a handout ---- */

@media print {
  .masthead,
  .footer,
  .curriculum-bar,
  .supports,
  .print-note { display: none; }

  body { background: #fff; font-size: 11pt; }

  .curriculum { max-width: none; padding: 0; }

  .level-title { font-size: 20pt; }

  .csection {
    break-inside: avoid;
    border-bottom: 1px solid #ccc;
  }

  .kit { break-inside: avoid; border-left-width: 3px; }

  .badge { border: 1px solid #999; background: none !important; color: #000 !important; }

  .editorial { background: none; border-left: 3px solid #999; }

  a { color: #000; text-decoration: none; }
}

.abridged {
  margin: 1rem 0 0 !important;
  padding: 0.6rem 0.85rem;
  border: 1px dashed var(--wrong);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--wrong);
}

/* ---- phones ----

   The level bar is sticky, so its height is a permanent tax on the screen. At
   390px the tabs wrapped to three rows and the bar took 190px — about a fifth
   of a phone screen, kept forever. One scrolling row of tabs with the search
   under it costs about 85px instead.

   Measured with app/_diag.html. */

@media (max-width: 44rem) {
  .curriculum-bar {
    flex-direction: column;
    /* nowrap matters here, and it is not cosmetic. The base rule wraps, and a
       WRAPPING column flex container sizes each flex line to its own content
       rather than stretching items to the container width — so the nowrap tab
       row grew its line to 655px and dragged the page with it. A single-line
       column stretches its items to the container instead. */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.45rem;
    padding: 0.5rem var(--gutter);
  }

  .level-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Without min-width:0 a flex item refuses to shrink below its content, so
       the nowrap row pushes the whole page wider instead of scrolling inside
       itself. Measured: 671px of overflow at a 390px viewport. */
    min-width: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Fade the right edge so a half-visible tab reads as "there is more to
       scroll" rather than as a clipped layout. */
    mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
  }

  .level-nav::-webkit-scrollbar { display: none; }

  .search input { width: 100%; }

  .cshead { gap: 0.15rem; }
  .cadence { white-space: normal; }
}

/* Comfortable targets on touch screens regardless of width. */

.level-tab { min-height: 2.5rem; display: inline-flex; align-items: center; }
.chip { min-height: 2.25rem; display: inline-flex; align-items: center; }

/* Tables the curriculum sets out as grids. Kept tight enough that the hundred
   chart reads as a chart rather than a spreadsheet, and legible in print, since
   these are the pages a teacher will actually hand out. */

table.ctable {
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
}

table.ctable caption {
  caption-side: top;
  padding-bottom: 0.45rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy-ink);
}

table.ctable th,
table.ctable td {
  border: 1px solid var(--edge);
  padding: 0.35rem 0.6rem;
  text-align: left;
}

table.ctable thead th {
  background: var(--navy-wash);
  color: var(--navy-ink);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

table.ctable th.row-head { background: var(--navy-wash); color: var(--navy-ink); white-space: nowrap; }

/* The hundred chart: even cells, centred, no heading row. */

table.ctable.plain td {
  width: 2.35rem;
  padding: 0.3rem 0;
  text-align: center;
  color: var(--ink-soft);
}

@media print {
  table.ctable { break-inside: avoid; }
  table.ctable thead th,
  table.ctable th.row-head { background: none; color: #000; }
}

/* This project's own voice, visibly not the curriculum's. Navy rather than the
   gold of a compiler's note, so a reader can tell three things apart at a
   glance: the curriculum, its author's working notes, and us. */

.appnote {
  margin: 1.25rem 0;
  padding: 0.85rem 1.05rem;
  border-left: 4px solid var(--navy-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--navy-wash);
}

.appnote p { margin-bottom: 0.55rem; color: var(--navy-ink); font-size: 0.95rem; }
.appnote p:last-child { margin-bottom: 0; }

.appnote-label {
  font-size: 0.7rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy-mid) !important;
}