/* The semester bundle, set as a printed prospectus and order form.
 *
 * ⛔ Entirely scoped under .mn-sb-desk, so it is inert on every other page
 * sharing the resource-hub profile. Same discipline as qp-subject-page.css.
 *
 * The register is printed legal matter, not a pricing page. Law students read
 * statutes, reports and commentaries all day and read startup styling as
 * unserious, and trust is the whole product here.
 *
 * ⛔⛔ NEVER add to this file: cards, pills, chips, badges, tinted panels,
 * rounded corners, gradient buttons, mono-font labels, or a left accent bar on
 * any block of prose. The left bar in particular is how a chatbot renders a
 * blockquote, so it makes a page read as machine-written whatever it says.
 * Everything on the sheet is ink, a rule, or nothing.
 *
 * Tokens are lifted from assets/css/qp-solution-page.css so the sheet on this
 * page and the leaves of a solved paper are demonstrably the same paper.
 */

.mn-sb-desk {
  --ink:    #1a1a1a;
  --ink-2:  #2e2e2e;
  --ink-3:  #555555;
  --rule:   #dfe4ec;
  --accent: #6b1d1d;
  --paper:  #ffffff;
  --deck:   #e6ebf3;

  font-family: 'Lora', 'Times New Roman', Times, Georgia, serif;
  color: var(--ink);
  background: var(--deck);

  /* A full-width band, the way the hero above it is one. 50% - 50vw is exactly
     the distance from this centred box back out to each viewport edge, the same
     formula the solved-paper desk uses, so the band never has to know the
     container's gutter. */
  margin-inline: calc(50% - 50vw);
  max-width: none;
  padding: 2.5rem 1rem 3.5rem;
  font-size: 1.167rem;
  line-height: 1.5;
}

/* ---------- The sheet ---------- */

.mn-sb-desk .mn-sb-sheet {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  background: var(--paper);
  /* ⛔ Square corners. Paper does not have a border-radius. */
  border: 1px solid var(--rule);
  padding: clamp(2rem, 6vw, 3.75rem) clamp(1.25rem, 7vw, 5rem);
}

.mn-sb-desk p { margin: 0 0 1.05em; }
.mn-sb-desk a { color: var(--accent); text-underline-offset: 0.18em; }
.mn-sb-desk a:hover { text-decoration: none; }

/* ---------- Cause title ---------- */

/* Set the way a petition heading is set: centred, capitalised, letterspaced,
   sitting over a rule. */
.mn-sb-desk .mn-sb-causetitle {
  text-align: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.mn-sb-desk .mn-sb-court {
  margin: 0 0 0.9rem;
  font-size: 0.78em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mn-sb-desk .mn-sb-title {
  margin: 0;
  font-size: 1.9em;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
}

.mn-sb-desk .mn-sb-docket {
  margin: 0.85rem 0 0;
  font-size: 0.78em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- Standing notice, for a reader who already holds the semester ---------- */

.mn-sb-desk .mn-sb-standing {
  /* ⛔ No tint and no left bar. A rule above and below is how a printed notice
     is set off, and it is enough. */
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 0.85rem 0;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 0.95em;
}

.mn-sb-desk .mn-sb-preamble { margin-bottom: 2.5rem; }

/* ---------- Sections ---------- */

.mn-sb-desk .mn-sb-section,
.mn-sb-desk .mn-sb-order { margin-bottom: 2.75rem; }

.mn-sb-desk .mn-sb-h {
  margin: 0 0 1.25rem;
  font-size: 0.84em;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
}

/* ---------- Contents, with hanging numerals and dotted leaders ---------- */

.mn-sb-desk .mn-sb-contents {
  list-style: none;
  counter-reset: mn-sb-item;
  margin: 0 0 1.5rem;
  padding: 0;
}

.mn-sb-desk .mn-sb-contents li {
  counter-increment: mn-sb-item;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0 0.4rem 2.4rem;
  position: relative;
}

/* Hanging numeral: the figure sits out in the margin, the text aligns. */
.mn-sb-desk .mn-sb-contents li::before {
  content: counter(mn-sb-item) ".";
  position: absolute;
  left: 0;
  width: 1.9rem;
  text-align: right;
  color: var(--ink-3);
  font-size: 0.92em;
}

.mn-sb-desk .mn-sb-c-name { flex: 0 1 auto; }

.mn-sb-desk .mn-sb-c-leader {
  flex: 1 1 1.5rem;
  border-bottom: 1px dotted var(--ink-3);
  transform: translateY(-0.28em);
  min-width: 1.5rem;
}

.mn-sb-desk .mn-sb-c-figure {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  white-space: nowrap;
}

.mn-sb-desk .mn-sb-pending {
  font-size: 0.9em;
  color: var(--ink-3);
  margin-bottom: 1.5rem;
}

/* ---------- Tally and order form: ruled rows, figures right ---------- */

.mn-sb-desk .mn-sb-tally,
.mn-sb-desk .mn-sb-orderform {
  width: 100%;
  border-collapse: collapse;
}

.mn-sb-desk .mn-sb-tally th,
.mn-sb-desk .mn-sb-tally td,
.mn-sb-desk .mn-sb-orderform th,
.mn-sb-desk .mn-sb-orderform td {
  border-top: 1px solid var(--rule);
  padding: 0.65rem 0;
  text-align: left;
  font-weight: 400;
  vertical-align: baseline;
}

.mn-sb-desk .mn-sb-tally tr:last-child th,
.mn-sb-desk .mn-sb-tally tr:last-child td,
.mn-sb-desk .mn-sb-orderform tr:last-child th,
.mn-sb-desk .mn-sb-orderform tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

.mn-sb-desk .mn-sb-tally td,
.mn-sb-desk .mn-sb-orderform td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mn-sb-desk .mn-sb-orderform th { font-weight: 600; }

.mn-sb-desk .mn-sb-amount { font-size: 1.05em; }

/* ---------- Schedule of what is included ---------- */

.mn-sb-desk .mn-sb-schedule { margin: 0; }

.mn-sb-desk .mn-sb-schedule > div {
  border-top: 1px solid var(--rule);
  padding: 1rem 0;
}

.mn-sb-desk .mn-sb-schedule > div:last-child { border-bottom: 1px solid var(--rule); }

.mn-sb-desk .mn-sb-schedule dt {
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.mn-sb-desk .mn-sb-schedule dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95em;
}

/* ---------- The one action ---------- */

.mn-sb-desk .mn-sb-action {
  margin: 1.75rem 0 1.25rem;
  text-align: center;
}

/* ⛔ Not a gradient, not a pill, not a rounded card. A ruled box that inverts to
   solid ink, the way a stamp does. */
.mn-sb-desk .mn-sb-cta {
  display: inline-block;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.92em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 2.25rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mn-sb-desk a.mn-sb-cta { color: var(--ink); }

.mn-sb-desk .mn-sb-cta:hover,
.mn-sb-desk .mn-sb-cta:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.mn-sb-desk .mn-sb-cta.is-disabled {
  border-color: var(--ink-3);
  color: var(--ink-3);
  cursor: default;
}

.mn-sb-desk .mn-sb-cta.is-disabled:hover {
  background: transparent;
  color: var(--ink-3);
}

.mn-sb-desk .mn-sb-note {
  font-size: 0.88em;
  color: var(--ink-3);
  margin: 0 0 0.8em;
}

/* ---------- Colophon ---------- */

.mn-sb-desk .mn-sb-colophon {
  border-top: 1px solid var(--ink);
  padding-top: 1.25rem;
  text-align: center;
  font-size: 0.9em;
}

.mn-sb-desk .mn-sb-colophon p { margin: 0; }

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  .mn-sb-desk { font-size: 1.05rem; padding: 1.5rem 0.75rem 2.5rem; }

  .mn-sb-desk .mn-sb-title { font-size: 1.45em; letter-spacing: 0.04em; }

  /* The leader is a desktop nicety. On a phone the subject name needs the whole
     measure, so the figure drops to its own line and the dots go away rather
     than squeezing the name into two words per line. */
  .mn-sb-desk .mn-sb-contents li {
    display: block;
    padding-left: 2.1rem;
  }

  .mn-sb-desk .mn-sb-c-leader { display: none; }

  .mn-sb-desk .mn-sb-c-figure {
    display: block;
    color: var(--ink-3);
    font-size: 0.9em;
    margin-top: 0.15rem;
  }

  .mn-sb-desk .mn-sb-cta {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
  }
}

/* ==========================================================================
   The strip (includes/bundle-strip.php)
   The conveyor from a free page to the prospectus. It appears inside the
   reading column of question-paper, syllabus, notes and solved-paper pages,
   which all share the resource-hub profile, which is why it lives in this file
   rather than in a sheet of its own.

   ⛔ Set as a printed notice, not an upsell banner: rules above and below, ink
   on white, centred. No tint, no card, no rounded corners, no left accent bar,
   no icon.
   ⛔⛔ Nothing here may use a `+` or `~` sibling selector. Auto ads inject as a
   child of a flex or grid container and would break it.
   ========================================================================== */

.mn-sbs {
  --sbs-ink:    #1a1a1a;
  --sbs-ink-3:  #555555;
  --sbs-accent: #6b1d1d;

  font-family: 'Lora', 'Times New Roman', Times, Georgia, serif;
  color: var(--sbs-ink);
  background: #ffffff;
  border-top: 1px solid var(--sbs-ink);
  border-bottom: 1px solid var(--sbs-ink);
  padding: 1.35rem 1rem;
  margin: 2.5rem 0;
  text-align: center;
}

.mn-sbs .mn-sbs-lead {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mn-sbs .mn-sbs-line {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--sbs-ink-3);
  max-width: 44rem;
  margin-inline: auto;
}

.mn-sbs .mn-sbs-links {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mn-sbs .mn-sbs-links a,
.mn-sbs .mn-sbs-line a {
  color: var(--sbs-accent);
  text-underline-offset: 0.18em;
}

.mn-sbs .mn-sbs-links a:hover,
.mn-sbs .mn-sbs-line a:hover { text-decoration: none; }

.mn-sbs .mn-sbs-sep {
  display: inline-block;
  padding: 0 0.6rem;
  color: var(--sbs-ink-3);
}

@media (max-width: 640px) {
  .mn-sbs { padding: 1.15rem 0.85rem; margin: 2rem 0; }
  .mn-sbs .mn-sbs-lead { font-size: 0.98rem; }
  .mn-sbs .mn-sbs-line { font-size: 0.88rem; }

  /* The separator dots crowd three links onto a phone line. Stack instead. */
  .mn-sbs .mn-sbs-links a { display: block; padding: 0.32rem 0; }
  .mn-sbs .mn-sbs-sep { display: none; }
}

/* ==========================================================================
   The semester panel on the dashboard (includes/dashboard-semester.php)
   Sits inside the dashboard's own .panel chrome so it reads as one surface with
   the bookmarks and uploads panels beside it. Inside the panel the register is
   the same printed one as the prospectus: ruled rows, hanging numerals, figures
   right, one accent on links.
   ⛔ No cards, pills, badges or rounded corners.
   ========================================================================== */

.mn-dsem {
  --dsem-ink:    #1a1a1a;
  --dsem-ink-3:  #555555;
  --dsem-rule:   #dfe4ec;
  --dsem-accent: #6b1d1d;
}

.mn-dsem .mn-dsem-standing {
  margin: 0 0 0.75rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--dsem-ink);
}

.mn-dsem .mn-dsem-note {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--dsem-ink-3);
  max-width: 42rem;
}

/* The gauge is a RULE that fills, not a rounded progress pill. Square ends,
   1px trough, ink fill. Structural furniture, not an accent bar on prose. */
.mn-dsem .mn-dsem-gauge {
  display: block;
  height: 3px;
  background: var(--dsem-rule);
  margin: 0 0 1.5rem;
  overflow: hidden;
}

.mn-dsem .mn-dsem-gauge > span {
  display: block;
  height: 100%;
  background: var(--dsem-ink);
}

/* ---------- The subject list ---------- */

.mn-dsem .mn-dsem-list {
  list-style: none;
  counter-reset: mn-dsem-item;
  margin: 0 0 1.25rem;
  padding: 0;
}

.mn-dsem .mn-dsem-list li {
  counter-increment: mn-dsem-item;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  border-top: 1px solid var(--dsem-rule);
  padding: 0.7rem 0 0.7rem 2.2rem;
  position: relative;
}

.mn-dsem .mn-dsem-list li:last-child { border-bottom: 1px solid var(--dsem-rule); }

/* Hanging numeral, out in the margin. */
.mn-dsem .mn-dsem-list li::before {
  content: counter(mn-dsem-item) ".";
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 1.7rem;
  text-align: right;
  color: var(--dsem-ink-3);
  font-size: 0.9em;
}

.mn-dsem .mn-dsem-name a { color: var(--dsem-accent); text-underline-offset: 0.18em; }
.mn-dsem .mn-dsem-name a:hover { text-decoration: none; }

.mn-dsem .mn-dsem-figure {
  font-variant-numeric: tabular-nums;
  color: var(--dsem-ink-3);
  white-space: nowrap;
  font-size: 0.92em;
}

/* ---------- Actions ---------- */

.mn-dsem .mn-dsem-actions { margin: 0 0 0.6rem; }

.mn-dsem .mn-dsem-link {
  display: inline-block;
  color: var(--dsem-accent);
  margin-right: 1.4rem;
  text-underline-offset: 0.18em;
}

.mn-dsem .mn-dsem-link.is-lead {
  border: 1px solid var(--dsem-ink);
  color: var(--dsem-ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85em;
  padding: 0.6rem 1.4rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mn-dsem .mn-dsem-link.is-lead:hover,
.mn-dsem .mn-dsem-link.is-lead:focus-visible {
  background: var(--dsem-ink);
  color: #ffffff;
}

.mn-dsem .mn-dsem-others {
  margin: 0;
  font-size: 0.88rem;
  color: var(--dsem-ink-3);
}

.mn-dsem .mn-dsem-others a { color: var(--dsem-accent); }

@media (max-width: 640px) {
  /* The figure drops under the subject name rather than squeezing it. */
  .mn-dsem .mn-dsem-list li {
    grid-template-columns: 1fr;
    padding-left: 2rem;
  }

  .mn-dsem .mn-dsem-figure { justify-self: start; }

  .mn-dsem .mn-dsem-link.is-lead {
    display: block;
    margin-right: 0;
    text-align: center;
  }
}

/* ==========================================================================
   The study area (pages/study.php)
   Udemy's reader layout — a contents rail listing the whole semester, the
   reading area beside it — in this site's register. The rail IS the product:
   it is the one thing a student cannot assemble out of free pages.

   ⛔ Square corners, hairline rules, ink and paper. The cards carry a real book
   cover because that is what the owner asked for and the covers already exist;
   everything else stays typographic. No pills, no badges, no gradients.
   ⛔⛔ No `+` or `~` sibling selectors: auto ads inject as a child of a flex or
   grid container. (Ads never render here, but the rule is cheap to keep.)
   ========================================================================== */

.mn-study {
  --st-ink:    #1a1a1a;
  --st-ink-2:  #2e2e2e;
  --st-ink-3:  #555555;
  --st-ink-4:  #8a93a3;
  --st-rule:   #dfe4ec;
  --st-accent: #6b1d1d;
  --st-paper:  #ffffff;
  --st-deck:   #f4f6fa;

  font-family: 'Lora', 'Times New Roman', Times, Georgia, serif;
  color: var(--st-ink);
  background: var(--st-deck);
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  align-items: start;
  min-height: 70vh;
}

/* ---------- The contents rail ---------- */

.mn-study .mn-study-rail {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  background: var(--st-paper);
  border-right: 1px solid var(--st-rule);
  padding: 1.5rem 1.25rem 2rem;
}

.mn-study .mn-study-railhead { margin-bottom: 1.25rem; }

.mn-study .mn-study-back {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-accent);
  margin-bottom: 0.9rem;
}

.mn-study .mn-study-course {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-ink-3);
}

.mn-study .mn-study-sem {
  margin: 0.15rem 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.mn-study .mn-study-count {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--st-ink-3);
}

.mn-study .mn-study-gauge,
.mn-study .mn-study-card-gauge {
  display: block;
  height: 3px;
  background: var(--st-rule);
  overflow: hidden;
}

.mn-study .mn-study-gauge > span,
.mn-study .mn-study-card-gauge > span {
  display: block;
  height: 100%;
  background: var(--st-ink);
}

.mn-study .mn-study-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mn-study .mn-study-subj {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  justify-content: space-between;
  border-top: 1px solid var(--st-rule);
  padding: 0.7rem 0;
  color: var(--st-ink);
  text-decoration: none;
  font-size: 0.92rem;
}

.mn-study .mn-study-subj:hover .mn-study-subj-name { text-decoration: underline; }
.mn-study .mn-study-nav > ol > li.is-open .mn-study-subj { font-weight: 600; }

.mn-study .mn-study-subj-fig {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--st-ink-4);
}

.mn-study .mn-study-chapters {
  margin: 0 0 0.6rem;
  padding: 0 0 0 0.25rem;
}

.mn-study .mn-study-chapters li a {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--st-ink-2);
  text-decoration: none;
}

.mn-study .mn-study-chapters li a:hover { text-decoration: underline; }
.mn-study .mn-study-chapters li.is-here > a { color: var(--st-accent); font-weight: 600; }
.mn-study .mn-study-chapters li.is-read > a { color: var(--st-ink-4); }

.mn-study .mn-study-tick {
  flex: 0 0 0.9rem;
  color: var(--st-accent);
  font-size: 0.8rem;
}

/* ---------- The reading area ---------- */

.mn-study .mn-study-main {
  padding: 2rem clamp(1rem, 4vw, 3rem) 4rem;
  min-width: 0;
}

.mn-study .mn-study-head { margin-bottom: 2rem; }

.mn-study .mn-study-head h1 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
}

.mn-study .mn-study-sub {
  margin: 0;
  color: var(--st-ink-3);
  font-size: 0.95rem;
}

.mn-study .mn-study-links { margin: 0.9rem 0 0; font-size: 0.9rem; }
.mn-study .mn-study-links a { color: var(--st-accent); margin-right: 1.4rem; }

/* ---------- Subject cards ---------- */

.mn-study .mn-study-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1.5rem;
}

.mn-study .mn-study-card {
  display: block;
  background: var(--st-paper);
  border: 1px solid var(--st-rule);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.mn-study .mn-study-card:hover { border-color: var(--st-ink); }

.mn-study .mn-study-card-cover {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--st-deck);
  border-bottom: 1px solid var(--st-rule);
}

.mn-study .mn-study-card-cover img {
  width: 100%;
  height: 100%;
  /* The covers are portrait plates; the card window is landscape. Crop from the
     top so the title on the cover survives rather than the spine ornament. */
  object-fit: cover;
  object-position: top center;
  display: block;
}

.mn-study .mn-study-card-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.4rem;
  color: var(--st-ink-4);
}

.mn-study .mn-study-card-body { display: block; padding: 0.9rem 1rem 1rem; }

.mn-study .mn-study-card-title {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.mn-study .mn-study-card-meta {
  display: block;
  font-size: 0.83rem;
  color: var(--st-ink-3);
  margin-bottom: 0.6rem;
}

/* ---------- Chapter list ---------- */

.mn-study .mn-study-chapterlist {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mn-st-ch;
}

.mn-study .mn-study-chapterlist li { counter-increment: mn-st-ch; border-top: 1px solid var(--st-rule); }
.mn-study .mn-study-chapterlist li:last-child { border-bottom: 1px solid var(--st-rule); }

.mn-study .mn-study-chapterlist a {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.75rem 0;
  color: var(--st-ink);
  text-decoration: none;
}

.mn-study .mn-study-chapterlist a:hover .mn-study-ch-title { text-decoration: underline; }
.mn-study .mn-study-chapterlist li.is-read a { color: var(--st-ink-3); }

.mn-study .mn-study-chapterlist .mn-study-ch-title::before {
  content: counter(mn-st-ch) ".";
  color: var(--st-ink-4);
  margin-right: 0.5rem;
  font-size: 0.9em;
}

/* ---------- The chapter itself ---------- */

.mn-study .mn-study-chhead {
  border-bottom: 1px solid var(--st-ink);
  padding-bottom: 1.1rem;
  margin-bottom: 2rem;
}

.mn-study .mn-study-chsubject {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-ink-3);
}

.mn-study .mn-study-chhead h1 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 600;
  line-height: 1.2;
}

.mn-study .mn-study-chmodule {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: var(--st-ink-3);
}

.mn-study .mn-study-sheets { max-width: 46rem; }

.mn-study .mn-study-turn {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--st-rule);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  max-width: 46rem;
}

.mn-study .mn-study-turn a {
  display: block;
  max-width: 46%;
  color: var(--st-accent);
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mn-study .mn-study-turn a span {
  display: block;
  margin-top: 0.3rem;
  color: var(--st-ink);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
}

.mn-study .mn-study-next { text-align: right; margin-left: auto; }

/* ---------- Phone and tablet ---------- */

@media (max-width: 900px) {
  /* The rail stops being a rail and becomes the page's own contents, above the
     reading area. ⛔ Not a drawer: a hidden contents list on a phone is how a
     student loses the one thing they paid for. */
  .mn-study { grid-template-columns: minmax(0, 1fr); }

  .mn-study .mn-study-rail {
    position: static;
    max-height: none;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--st-rule);
  }

  .mn-study .mn-study-main { padding: 1.5rem 1rem 3rem; }

  .mn-study .mn-study-cards { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; }

  .mn-study .mn-study-turn { flex-direction: column; gap: 1rem; }
  .mn-study .mn-study-turn a { max-width: none; }
  .mn-study .mn-study-next { text-align: left; margin-left: 0; }
}