/* ==========================================================================
   The study room (pages/study.php and includes/study-*.php)

   ⭐⭐ REBUILT 2026-09-13 after the owner used it as a paying student: "that
   could be way way better and put together and super top notch ui ux". One
   layout, three kinds of page:
     the semester home and the solved papers  full width, cards
     a subject and a chapter                  the contents outline beside them
   On a phone the outline is a drawer the reader opens, never a wall above the
   text, and a chapter gets a dock with Previous, Contents and Next.

   ⭐ The tokens are the site's own, from homepage-ui-system.css (blue-900 is
   the navbar's navy, ink / border / off are the same values), so the room is
   plainly part of munotes and not a template bolted onto it.

   ⛔ No border-left rule beside a block of text (owner, 2026-09-11: it reads as
   "AI code"). "You are here" is a filled row; module and chapter state is a dot.
   ⛔ No em dash in anything a reader sees.
   ⛔⛔ No `+` or `~` sibling selectors: auto ads inject as a child of flex and
   grid containers. None render here, and the rule is cheap to keep.
   ⛔ The book itself is NOT styled here. notes-book.css owns every sheet and
   every piece of book typography; this file only places the desk in the column.
   ========================================================================== */

.mn-study {
  --st-navy:    #0b1d4e;
  --st-navy-2:  #123178;
  --st-blue:    #1d50ca;
  --st-blue-50: #f0f5ff;
  --st-blue-100:#e8f0fe;
  --st-ink:     #0d1526;
  --st-ink-2:   #2c3e5c;
  --st-ink-3:   #5a718c;
  --st-ink-4:   #8da3bc;
  --st-line:    #dce6f5;
  --st-line-2:  #edf2fb;
  --st-bg:      #f7f9ff;
  --st-card:    #ffffff;
  --st-green:   #15803d;
  --st-green-50:#ecfdf3;
  --st-radius:  14px;
  --st-radius-sm: 10px;
  --st-shadow:  0 1px 2px rgba(13, 21, 38, 0.05), 0 6px 20px rgba(13, 21, 38, 0.05);
  --st-shadow-hover: 0 2px 4px rgba(13, 21, 38, 0.06), 0 14px 32px rgba(13, 21, 38, 0.10);
  --st-bar-h:   56px;

  font-family: 'Lora', Georgia, Cambria, serif;
  color: var(--st-ink);
  background: var(--st-bg);
  min-height: 70vh;
}

.mn-study *,
.mn-study *::before,
.mn-study *::after { box-sizing: border-box; }

.mn-study a { color: inherit; }

.mn-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Shared pieces ---------- */

.mn-study .mn-eyebrow {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-ink-3);
}

.mn-study .mn-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--st-blue-50);
  border: 1px solid var(--st-blue-100);
  color: var(--st-navy-2);
  font-size: 0.8rem;
  font-weight: 600;
}

.mn-study .mn-chip--quiet {
  background: transparent;
  border-color: var(--st-line);
  color: var(--st-ink-3);
  font-weight: 500;
}

/* The progress bar. Rounded here: this is an app surface, not the printed
   register of the prospectus, and a 6px track reads at a glance on a phone. */
.mn-study .mn-bar {
  display: block;
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--st-blue-100);
  overflow: hidden;
}

.mn-study .mn-bar > span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: var(--st-blue);
  transition: width 0.4s ease;
}

.mn-study .mn-bar--sm { height: 4px; }
.mn-study .mn-bar--lg { height: 10px; }

.mn-study .mn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: var(--st-radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.mn-study .mn-btn--primary {
  background: var(--st-navy);
  border: 1px solid var(--st-navy);
  color: #ffffff;
}

.mn-study .mn-btn--primary:hover,
.mn-study .mn-btn--primary:focus-visible { background: var(--st-navy-2); border-color: var(--st-navy-2); color: #ffffff; }

.mn-study .mn-btn--ghost {
  background: var(--st-card);
  border: 1px solid var(--st-line);
  color: var(--st-navy);
}

.mn-study .mn-btn--ghost:hover,
.mn-study .mn-btn--ghost:focus-visible { border-color: var(--st-navy); }

.mn-study .mn-btn-count {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--st-blue-50);
  color: var(--st-navy-2);
  font-size: 0.78rem;
  text-align: center;
}

.mn-study .mn-link-go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--st-blue);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.mn-study .mn-link-go:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.mn-study .mn-card {
  background: var(--st-card);
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  box-shadow: var(--st-shadow);
}

.mn-study .mn-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--st-blue);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 0.12em;
  white-space: nowrap;
}

.mn-study .mn-note {
  margin: 0 0 1.75rem;
  padding: 1rem 1.2rem;
  border-radius: var(--st-radius);
  background: var(--st-card);
  border: 1px solid var(--st-line);
  color: var(--st-ink-2);
}

.mn-study .mn-note a { color: var(--st-blue); font-weight: 600; }

.mn-study .mn-note--done {
  background: var(--st-green-50);
  border-color: #c6ecd4;
}

/* The state dot: read, up next, or not yet. ⭐ Replaces the old greyed-out row. */
.mn-study .mn-dot {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--st-line);
  background: var(--st-card);
}

.mn-study .is-read > a .mn-dot,
.mn-study .is-read > .mn-pplist-dead .mn-dot {
  border-color: var(--st-green);
  background: var(--st-green);
}

.mn-study .is-read > a .mn-dot::after {
  content: "";
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mn-study .is-next > a .mn-dot {
  border-color: var(--st-blue);
  box-shadow: inset 0 0 0 3px var(--st-card), inset 0 0 0 9px var(--st-blue);
}

/* ---------- The study bar ---------- */

.mn-study .mn-sbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--st-line);
}

.mn-study .mn-sbar-in {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--st-bar-h);
  padding: 0 clamp(0.75rem, 2.5vw, 1.5rem);
}

.mn-study .mn-sbar-back,
.mn-study .mn-sbar-toc {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 0.7rem;
  border-radius: var(--st-radius-sm);
  border: 1px solid var(--st-line);
  background: var(--st-card);
  color: var(--st-navy);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.mn-study .mn-sbar-back:hover,
.mn-study .mn-sbar-toc:hover { border-color: var(--st-navy); }

.mn-study .mn-sbar-toc { display: none; }

.mn-study .mn-sbar-crumbs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 0.9rem;
  color: var(--st-ink-3);
}

.mn-study .mn-sbar-crumbs a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  color: var(--st-ink-2);
}

.mn-study .mn-sbar-crumbs a:hover { color: var(--st-navy); text-decoration: underline; text-underline-offset: 0.2em; }
.mn-study .mn-sbar-crumbs > :last-child { color: var(--st-ink); font-weight: 600; }
.mn-study .mn-sbar-sep { color: var(--st-ink-4); }

.mn-study .mn-sbar-prog {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.mn-study .mn-sbar-prog .mn-bar { width: 120px; }

.mn-study .mn-sbar-prog-fig {
  font-size: 0.85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--st-navy);
}

/* The reading line along the bar's foot, chapter view only. */
.mn-study .mn-sbar-read {
  height: 3px;
  background: transparent;
}

.mn-study .mn-sbar-read > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--st-blue);
}

/* ---------- Layout ---------- */

.mn-study .mn-study-grid { display: block; }

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

.mn-study .mn-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

.mn-study .mn-wrap--narrow { max-width: 920px; }

@media (min-width: 1024px) {
  .mn-study .mn-study-grid.has-outline {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: start;
  }
}

/* ---------- The contents outline ---------- */

.mn-study .mn-ol {
  background: var(--st-card);
  border-right: 1px solid var(--st-line);
}

@media (min-width: 1024px) {
  .mn-study .mn-ol {
    position: sticky;
    top: var(--st-bar-h);
    height: calc(100vh - var(--st-bar-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .mn-study .mn-ol-close,
  .mn-study .mn-study-scrim { display: none !important; }
}

.mn-study .mn-ol-head {
  padding: 1.25rem 1.1rem 1rem;
  border-bottom: 1px solid var(--st-line-2);
}

.mn-study .mn-ol-headrow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.mn-study .mn-ol-sem { text-decoration: none; display: block; }
.mn-study .mn-ol-sem .mn-eyebrow { margin-bottom: 0.15rem; }

.mn-study .mn-ol-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--st-ink);
  margin-bottom: 0.8rem;
}

.mn-study .mn-ol-sem:hover .mn-ol-title { color: var(--st-navy-2); }

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

.mn-study .mn-ol-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--st-line);
  background: var(--st-card);
  color: var(--st-ink-2);
  cursor: pointer;
}

.mn-study .mn-ol-papers {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--st-radius-sm);
  background: var(--st-blue-50);
  color: var(--st-navy);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.mn-study .mn-ol-papers:hover { background: var(--st-blue-100); }

.mn-study .mn-ol-count {
  margin-left: auto;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-3);
}

.mn-study .mn-ol-nav { padding: 0.5rem 0.6rem 2rem; }

.mn-study .mn-ol-subjects,
.mn-study .mn-ol-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mn-study .mn-ol-subject { margin-bottom: 0.15rem; }

.mn-study .mn-ol-subject-link {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.5rem;
  border-radius: var(--st-radius-sm);
  text-decoration: none;
  color: var(--st-ink);
}

.mn-study .mn-ol-subject-link:hover { background: var(--st-bg); }

.mn-study .mn-ol-subject.is-active > .mn-ol-subject-link { background: var(--st-blue-50); }

.mn-study .mn-ol-thumb {
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--st-navy);
}

.mn-study .mn-ol-subject-name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mn-study .mn-ol-subject-fig {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-4);
}

.mn-study .mn-ol-subject.is-done .mn-ol-subject-fig { color: var(--st-green); font-weight: 700; }

.mn-study .mn-ol-modules { padding: 0.35rem 0 0.6rem; }

.mn-study .mn-ol-module > summary {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
}

.mn-study .mn-ol-module > summary::-webkit-details-marker { display: none; }
.mn-study .mn-ol-module > summary:hover { background: var(--st-bg); }

.mn-study .mn-ol-mhead { min-width: 0; }

.mn-study .mn-ol-mlabel {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-ink-3);
}

.mn-study .mn-ol-mtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.1rem;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--st-ink-2);
}

.mn-study .mn-ol-mfig {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-4);
}

.mn-study .mn-ol-chev {
  color: var(--st-ink-4);
  transition: transform 0.2s ease;
}

.mn-study .mn-ol-module[open] > summary .mn-ol-chev { transform: rotate(180deg); }

.mn-study .mn-ol-chapters { padding: 0.15rem 0 0.4rem; }

.mn-study .mn-ol-chapters a {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--st-ink-2);
  font-size: 0.84rem;
  line-height: 1.35;
}

.mn-study .mn-ol-chapters a:hover { background: var(--st-bg); color: var(--st-ink); }

.mn-study .mn-ol-chapters .mn-dot { margin-top: 0.05rem; width: 16px; height: 16px; }
.mn-study .mn-ol-chapters .is-read > a .mn-dot::after { left: 3.5px; top: 1px; width: 4.5px; height: 8px; }

.mn-study .mn-ol-ch-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mn-study .mn-ol-ch-min {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-4);
  padding-top: 0.1rem;
}

/* ⭐ You are here: a filled row, never a rule down the side. */
.mn-study .mn-ol-chapters .is-here > a {
  background: var(--st-navy);
  color: #ffffff;
}

.mn-study .mn-ol-chapters .is-here > a .mn-ol-ch-min { color: rgba(255, 255, 255, 0.7); }
.mn-study .mn-ol-chapters .is-here > a .mn-dot { border-color: #ffffff; }
.mn-study .mn-ol-chapters .is-here.is-read > a .mn-dot { background: #ffffff; }
.mn-study .mn-ol-chapters .is-here.is-read > a .mn-dot::after { border-color: var(--st-navy); }

/* The drawer, below 1024px. */
@media (max-width: 1023.98px) {
  .mn-study .mn-sbar-toc { display: inline-flex; }

  .mn-study .mn-ol {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1300;
    width: min(88vw, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-102%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 40px rgba(13, 21, 38, 0.25);
    border-right: 0;
  }

  .mn-study.is-outline-open .mn-ol { transform: none; }

  .mn-study .mn-study-scrim {
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(6, 16, 42, 0.45);
  }
}

html.mn-study-lock,
html.mn-study-lock body { overflow: hidden; }

/* ---------- The semester home and the papers hero ---------- */

.mn-study .mn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  align-items: end;
  gap: 1.5rem 2.5rem;
  margin: 0 0 1.75rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: calc(var(--st-radius) + 4px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(29, 80, 202, 0.35) 0%, rgba(29, 80, 202, 0) 60%),
    linear-gradient(160deg, #0f2560 0%, var(--st-navy) 55%, #081536 100%);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(11, 29, 78, 0.18);
}

.mn-study .mn-hero .mn-eyebrow { color: rgba(255, 255, 255, 0.72); }

.mn-study .mn-hero-title {
  margin: 0 0 0.9rem;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  color: #ffffff;
}

.mn-study .mn-hero-owns { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; }

.mn-study .mn-hero .mn-chip {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.mn-study .mn-hero .mn-chip--quiet { background: transparent; color: rgba(255, 255, 255, 0.78); }

.mn-study .mn-hero-lede {
  margin: 0;
  max-width: 34rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.mn-study .mn-hero-big {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
}

.mn-study .mn-hero-big strong {
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mn-study .mn-hero-big span { font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); }

.mn-study .mn-hero .mn-bar { background: rgba(255, 255, 255, 0.16); }
.mn-study .mn-hero .mn-bar > span { background: linear-gradient(90deg, #93b4f8, #ffffff); }

.mn-study .mn-hero-sub {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
}

/* The continue card. */
.mn-study .mn-continue {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 2.25rem;
  padding: 0.9rem 1.1rem 0.9rem 0.9rem;
  border-radius: var(--st-radius);
  background: var(--st-card);
  border: 1px solid var(--st-line);
  box-shadow: var(--st-shadow);
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.mn-study .mn-continue:hover { box-shadow: var(--st-shadow-hover); border-color: #c7d9fc; transform: translateY(-1px); }

.mn-study .mn-continue-cover {
  display: block;
  aspect-ratio: 1200 / 630;
  border-radius: var(--st-radius-sm);
  overflow: hidden;
  background: var(--st-navy);
}

.mn-study .mn-continue-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mn-study .mn-continue-body { min-width: 0; display: block; }
.mn-study .mn-continue .mn-eyebrow { color: var(--st-blue); }

.mn-study .mn-continue-title {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--st-ink);
}

.mn-study .mn-continue-meta {
  display: block;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--st-ink-3);
}

/* Section heads. */
.mn-study .mn-sechead {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.mn-study .mn-sechead h2 {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--st-ink);
}

.mn-study .mn-sechead-count {
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  background: var(--st-blue-50);
  color: var(--st-navy-2);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mn-study .mn-sechead-link {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--st-blue);
  text-decoration: none;
}

.mn-study .mn-grid { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
.mn-study .mn-grid--subjects { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.mn-study .mn-grid--papers { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.75rem; }

/* Subject cards. */
.mn-study .mn-subject {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.mn-study .mn-subject:hover { box-shadow: var(--st-shadow-hover); transform: translateY(-2px); }

.mn-study .mn-subject-cover {
  position: relative;
  display: block;
  aspect-ratio: 1200 / 630;
  background: var(--st-navy);
  overflow: hidden;
}

.mn-study .mn-subject-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mn-study .mn-subject:hover .mn-subject-cover img { transform: scale(1.03); }

.mn-study .mn-subject-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  text-align: center;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 600;
}

.mn-study .mn-subject-flag {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--st-green);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
}

.mn-study .mn-subject-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 auto;
  padding: 1rem 1.1rem 1.1rem;
}

.mn-study .mn-subject-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}

.mn-study .mn-subject-name a { text-decoration: none; color: var(--st-ink); }
.mn-study .mn-subject-name a:hover { color: var(--st-navy-2); }

.mn-study .mn-subject-meta {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  color: var(--st-ink-3);
}

.mn-study .mn-subject-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

.mn-study .mn-subject-count {
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-2);
}

/* Paper cards on the home. */
.mn-study .mn-papercard {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.mn-study .mn-papercard:hover { box-shadow: var(--st-shadow-hover); border-color: #c7d9fc; }

.mn-study .mn-papercard-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--st-radius-sm);
  background: var(--st-blue-50);
  color: var(--st-navy-2);
}

.mn-study .mn-papercard-body { min-width: 0; flex: 1 1 auto; }

.mn-study .mn-papercard-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--st-ink);
}

.mn-study .mn-papercard-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--st-ink-3);
}

.mn-study .mn-papercard-go { flex: 0 0 auto; color: var(--st-ink-4); }

/* ---------- A subject ---------- */

.mn-study .mn-subjhero {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
  margin: 0 0 2rem;
}

.mn-study .mn-subjhero-cover {
  aspect-ratio: 1200 / 630;
  border-radius: var(--st-radius);
  overflow: hidden;
  background: var(--st-navy);
  box-shadow: 0 10px 28px rgba(11, 29, 78, 0.22);
}

.mn-study .mn-subjhero-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.mn-study .mn-subjhero-title {
  margin: 0 0 0.45rem;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
}

.mn-study .mn-subjhero-meta {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--st-ink-3);
}

.mn-study .mn-subjhero-prog {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 460px;
  margin-bottom: 1.2rem;
}

.mn-study .mn-subjhero-prog .mn-bar { flex: 1 1 auto; }

.mn-study .mn-subjhero-fig {
  flex: 0 0 auto;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-2);
}

.mn-study .mn-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

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

/* Modules. */
.mn-study .mn-module { margin: 0 0 1rem; overflow: hidden; }

.mn-study .mn-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.15s ease;
}

.mn-study .mn-module-head::-webkit-details-marker { display: none; }
.mn-study .mn-module-head:hover { background: var(--st-bg); }

.mn-study .mn-module[open] > .mn-module-head {
  background: linear-gradient(180deg, var(--st-bg), var(--st-card));
  border-bottom: 1px solid var(--st-line-2);
}

.mn-study .mn-module-chev {
  flex: 0 0 auto;
  color: var(--st-ink-4);
  transition: transform 0.2s ease;
}

.mn-study .mn-module[open] > .mn-module-head .mn-module-chev { transform: rotate(180deg); }

.mn-study .mn-module-titles { min-width: 0; display: block; flex: 1 1 auto; }
.mn-study .mn-module-head .mn-eyebrow { color: var(--st-blue); margin-bottom: 0.2rem; }

.mn-study .mn-module-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--st-ink);
}

.mn-study .mn-module-prog {
  display: block;
  flex: 0 0 120px;
  text-align: right;
}

.mn-study .mn-module-fig {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-3);
}

.mn-study .mn-chlist {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.5rem 0.5rem;
}

.mn-study .mn-chlist a {
  display: grid;
  grid-template-columns: 18px 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--st-radius-sm);
  text-decoration: none;
  color: var(--st-ink);
  transition: background-color 0.12s ease;
}

.mn-study .mn-chlist a:hover { background: var(--st-bg); }
.mn-study .mn-chlist .is-next > a { background: var(--st-blue-50); }

.mn-study .mn-chlist-num {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-4);
  text-align: right;
}

.mn-study .mn-chlist-title {
  font-size: 0.97rem;
  line-height: 1.4;
}

.mn-study .mn-chlist-min {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-3);
  white-space: nowrap;
}

.mn-study .mn-foot-links { margin: 1.5rem 0 0; font-size: 0.9rem; }
.mn-study .mn-foot-links a { color: var(--st-blue); font-weight: 600; }

/* ---------- A chapter ---------- */

.mn-study--chapter .mn-study-main,
.mn-study--paper .mn-study-main { padding: 0 0 4rem; }

.mn-study .mn-rd-head {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 0rem) 1.4rem;
}

.mn-study .mn-rd-subject {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--st-blue);
  text-decoration: none;
}

.mn-study .mn-rd-subject:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.mn-study .mn-rd-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--st-ink);
}

.mn-study .mn-rd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin: 0;
  font-size: 0.88rem;
  color: var(--st-ink-3);
}

.mn-study .mn-rd-meta > span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ⛔ :not(:first-child), not a `+` sibling selector (the auto-ads rule above). */
.mn-study .mn-rd-meta > span:not(:first-child)::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 0.65rem;
  border-radius: 50%;
  background: var(--st-ink-4);
}

/* ⛔ The solved volume's desk is full-bleed on its public page too
   (qp-solution-page.css: margin-inline calc(50% - 50vw), and a negative bottom
   margin that runs it into the footer). Beside the outline it fills the column. */
.mn-study .mn-pp-desk .qps-page {
  margin-inline: 0;
  margin-bottom: 0;
}

/* ⛔ The desk is full-bleed on the public page by design (it escapes the centred
   column with calc(50% - 50vw)). Beside the outline that would slide it under
   the column, so here it fills the reading column and nothing more. */
.mn-study .mn-rd-desk.mn-res-content .panel.mn-bookish {
  margin-inline: 0;
  margin-bottom: 0;
}

.mn-study .mn-rd-end {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 3vw, 0rem) 0;
}

.mn-study .mn-upnext {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.mn-study a.mn-upnext:hover { box-shadow: var(--st-shadow-hover); border-color: #c7d9fc; }

.mn-study .mn-upnext-body { min-width: 0; }
.mn-study .mn-upnext .mn-eyebrow { color: var(--st-blue); }

.mn-study .mn-upnext-title {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--st-ink);
}

.mn-study .mn-upnext-meta {
  display: block;
  font-size: 0.84rem;
  color: var(--st-ink-3);
}

.mn-study .mn-upnext--done { background: var(--st-green-50); border-color: #c6ecd4; }
.mn-study .mn-upnext--done .mn-eyebrow { color: var(--st-green); }

.mn-study .mn-rd-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1.1rem;
  font-size: 0.9rem;
}

.mn-study .mn-rd-prev,
.mn-study .mn-rd-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  color: var(--st-ink-2);
  text-decoration: none;
}

.mn-study .mn-rd-prev span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28rem;
}

.mn-study .mn-rd-prev:hover,
.mn-study .mn-rd-all:hover { color: var(--st-navy); text-decoration: underline; text-underline-offset: 0.2em; }
.mn-study .mn-rd-all { font-weight: 600; color: var(--st-blue); }

.mn-study .mn-rd-keys {
  margin: 1.4rem 0 0;
  font-size: 0.78rem;
  color: var(--st-ink-4);
}

/* The phone dock. */
.mn-study .mn-dock { display: none; }

@media (max-width: 1023.98px) {
  .mn-study--chapter .mn-study-main,
  .mn-study--paper .mn-study-main { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }

  /* ⚠️ The volume's back-to-top and report controls are fixed to the corner the
     dock now owns. Their lift variable cannot be used: the volume's script writes
     --qps-totop-lift inline, which beats any stylesheet. Placement only. */
  .mn-study--paper .qps-page .qps-totop { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
  .mn-study--paper .qps-page .qps-flag { bottom: calc(5rem + 2.875rem + 0.5rem + env(safe-area-inset-bottom, 0px)); }

  .mn-study .mn-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--st-line);
    box-shadow: 0 -6px 20px rgba(13, 21, 38, 0.06);
  }

  .mn-study .mn-dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 46px;
    border-radius: var(--st-radius-sm);
    border: 1px solid var(--st-line);
    background: var(--st-card);
    color: var(--st-navy);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
  }

  .mn-study .mn-dock-next { background: var(--st-navy); border-color: var(--st-navy); color: #ffffff; }
  .mn-study .mn-dock-btn.is-off { opacity: 0.4; }

  .mn-study .mn-rd-keys { display: none; }

  /* ⚠️ The site's report flag is fixed to the bottom corner and the dock now owns
     that edge. Only its placement moves; its look stays in report-flag.css. */
  html:has(.mn-study--chapter) .mn-report-flag {
    bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px));
  }

  /* ⛔ Fixed over the foot of the screen, the dock sat on the last lines of the
     site footer at the very end of every chapter and paper (39px of its notice at
     390px, measured 2026-09-13). The page reserves the dock's own height below
     the footer instead: 46px buttons, 0.5rem above and below, a 1px rule.
     ⛔ The footer itself is not touched. */
  html:has(.mn-study .mn-dock) body {
    padding-bottom: calc(46px + 1rem + 1px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- Solved papers ---------- */

.mn-study .mn-filter {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}

.mn-study .mn-filter::-webkit-scrollbar { display: none; }

.mn-study .mn-filter-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--st-line);
  background: var(--st-card);
  color: var(--st-ink-2);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.mn-study .mn-filter-chip span {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-ink-4);
}

.mn-study .mn-filter-chip:hover { border-color: var(--st-navy); }
.mn-study .mn-filter-chip.is-on { background: var(--st-navy); border-color: var(--st-navy); color: #ffffff; }
.mn-study .mn-filter-chip.is-on span { color: rgba(255, 255, 255, 0.75); }

.mn-study .mn-ppgroup { margin: 0 0 1.25rem; overflow: hidden; }

.mn-study .mn-ppgroup-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--st-line-2);
  background: linear-gradient(180deg, var(--st-bg), var(--st-card));
}

.mn-study .mn-ppgroup-thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 1200 / 630;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  background: var(--st-navy);
}

.mn-study .mn-ppgroup-titles { min-width: 0; flex: 1 1 auto; }

.mn-study .mn-ppgroup-name {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}

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

.mn-study .mn-ppgroup-notes { flex: 0 0 auto; }

.mn-study .mn-pplist {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.5rem 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.15rem 0.5rem;
}

.mn-study .mn-pplist a,
.mn-study .mn-pplist-dead {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--st-radius-sm);
  text-decoration: none;
  color: var(--st-ink);
}

.mn-study .mn-pplist-dead { grid-template-columns: 18px minmax(0, 1fr); color: var(--st-ink-3); }
.mn-study .mn-pplist a:hover { background: var(--st-bg); }

.mn-study .mn-pplist-label { font-size: 0.95rem; font-weight: 600; }

.mn-study .mn-pplist-state {
  font-size: 0.76rem;
  color: var(--st-ink-3);
  white-space: nowrap;
}

.mn-study .mn-pplist .is-read .mn-pplist-state { color: var(--st-green); font-weight: 600; }
.mn-study .mn-pplist-go { color: var(--st-ink-4); }

/* ---------- Tablet and phone ---------- */

@media (max-width: 860px) {
  .mn-study .mn-hero { grid-template-columns: 1fr; align-items: start; }
  .mn-study .mn-subjhero { grid-template-columns: 1fr; gap: 1.1rem; }
  .mn-study .mn-subjhero-cover { max-width: 420px; }
}

@media (max-width: 640px) {
  .mn-study { --st-bar-h: 52px; }

  .mn-study .mn-sbar-in { gap: 0.45rem; }
  .mn-study .mn-sbar-back span { display: none; }
  .mn-study .mn-sbar-back { padding: 0 0.55rem; }
  .mn-study .mn-sbar-prog .mn-bar { display: none; }
  .mn-study .mn-sbar-crumbs { font-size: 0.84rem; }
  /* On a phone the crumb trail shows where you are, not how you got there. */
  .mn-study .mn-sbar-crumbs > a:first-child,
  .mn-study .mn-sbar-crumbs > .mn-sbar-sep { display: none; }
  .mn-study .mn-sbar-crumbs > a:only-child { display: inline; }

  .mn-study .mn-hero { padding: 1.3rem 1.15rem; border-radius: var(--st-radius); }

  .mn-study .mn-continue {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.75rem;
  }

  .mn-study .mn-continue-title { font-size: 1.02rem; }
  .mn-study .mn-continue-meta { font-size: 0.78rem; }

  .mn-study .mn-continue-go {
    grid-column: 1 / -1;
    width: 100%;
  }

  .mn-study .mn-grid--subjects { grid-template-columns: 1fr; }

  .mn-study .mn-actions .mn-btn { flex: 1 1 100%; }

  /* Title and chevron share the first row; the progress takes the second. As a
     flex column the chevron fell onto a line of its own under the bar. */
  .mn-study .mn-module-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 0.6rem 0.75rem;
    padding: 1rem;
  }
  .mn-study .mn-module-titles { grid-column: 1; grid-row: 1; }
  .mn-study .mn-module-chev { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0.1rem; }
  .mn-study .mn-module-prog { grid-column: 1 / -1; grid-row: 2; text-align: left; }

  .mn-study .mn-chlist { padding: 0.25rem 0.25rem 0.4rem; }

  .mn-study .mn-chlist a {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 0.6rem;
    padding: 0.7rem 0.55rem;
  }

  .mn-study .mn-chlist-num { display: none; }
  .mn-study .mn-chlist-title { font-size: 0.93rem; }

  .mn-study .mn-upnext { flex-direction: column; align-items: stretch; }
  .mn-study .mn-upnext .mn-btn { width: 100%; }

  .mn-study .mn-ppgroup-head { flex-wrap: wrap; padding: 0.9rem 1rem; }
  .mn-study .mn-ppgroup-thumb { width: 72px; }
  .mn-study .mn-ppgroup-notes { width: 100%; }
  .mn-study .mn-pplist { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Look inside (includes/study-lock.php), 2026-09-14
   A signed-in student who has not bought the semester walks round the room with
   what is paid locked. ⭐ The band and the panel are cards like every other in
   the room, so a lock reads as part of the product and not as a wall in front of
   it. ⛔ No border-left rule beside text.
   ========================================================================== */

.mn-study .mn-lock-ic { flex: 0 0 auto; vertical-align: -0.12em; }

.mn-study .mn-unlock {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
  box-shadow: var(--st-shadow);
}

.mn-study .mn-unlock-text { min-width: 0; flex: 1 1 22rem; }

.mn-study .mn-unlock-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-ink-3);
}

.mn-study .mn-unlock-title {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--st-ink);
}

.mn-study .mn-unlock-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.mn-study .mn-unlock-form { margin: 0; }

.mn-study .mn-unlock-save {
  margin-left: 0.15rem;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0.85;
}

.mn-study .mn-btn.is-off {
  cursor: default;
  color: var(--st-ink-3);
}

/* Signed out (Look inside without an account): the one thing an account adds, and
   the way in for somebody who has already bought it. */
.mn-study .mn-unlock-signin,
.mn-study .mn-lockpanel-signin,
.mn-study .mn-rd-signin {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--st-ink-3);
}

.mn-study .mn-lockpanel-signin { margin-top: 0.9rem; }
.mn-study .mn-rd-signin { margin-top: 1.1rem; }

.mn-study .mn-unlock-signin a,
.mn-study .mn-lockpanel-signin a,
.mn-study .mn-rd-signin a,
.mn-study .mn-hero-signin {
  font-weight: 600;
  color: var(--st-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mn-study .mn-hero .mn-hero-signin { color: #ffffff; }

/* Where a locked chapter or paper stops. The width of the reading column.
   ⚠️ Inside a solved paper it sits in the volume, whose type falls back to Times
   while Lora loads; the room's own stack keeps the panel in the room's type. */
.mn-study .mn-lockpanel {
  font-family: 'Lora', Georgia, Cambria, serif;
  max-width: 46rem;
  margin: 1.5rem auto 0;
  padding: 1.35rem clamp(1.1rem, 3vw, 1.75rem) 1.5rem;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
  box-shadow: var(--st-shadow);
}

.mn-study .mn-lockpanel-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-ink-3);
}

.mn-study .mn-lockpanel-title {
  margin: 0 0 0.45rem;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.4;
}

.mn-study .mn-lockpanel-body {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--st-ink-2);
}

/* Locks on rows: the chapter list, the outline, the papers list. */
.mn-study .mn-chlock,
.mn-study .mn-ol-lock {
  display: inline-flex;
  align-items: center;
  margin-left: 0.35rem;
  color: var(--st-ink-4);
  vertical-align: -0.1em;
}

/* ⚠️ An outline row is a three-column grid (ring, title, minutes); the lock gets
   its own column in front of the minutes, or the minutes drop to a second line. */
.mn-study .mn-ol-chapters .is-locked > a:has(.mn-ol-ch-min) { grid-template-columns: 18px minmax(0, 1fr) auto auto; }
.mn-study .mn-ol-chapters .mn-ol-lock { margin: 0 -0.3rem 0 0; padding-top: 0.2rem; }
.mn-study .mn-ol-chapters .is-here > a .mn-ol-lock { color: rgba(255, 255, 255, 0.7); }

.mn-study .mn-chlist .is-locked .mn-chlist-title { color: var(--st-ink-2); }

/* ---------- Full screen (owner, 2026-09-14: "can we make it go full screen like
   full browser for best user experience") ----------
   The reading column takes the whole screen (the Fullscreen API, driven from
   pages/study.php) or, where the browser has no such thing for a page (iPhone
   Safari), the whole window: the same class does both. The desk's own navy runs
   edge to edge and the title reads white on it. */
.mn-study .mn-rd-full {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  min-height: 34px;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--st-line);
  border-radius: 999px;
  background: var(--st-card);
  color: var(--st-navy);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.mn-study .mn-rd-full:hover,
.mn-study .mn-rd-full:focus-visible { border-color: var(--st-navy); }

.mn-study .mn-rd-full-exit { display: none; }

html.mn-study-full,
html.mn-study-full body { overflow: hidden; }

.mn-study .mn-rd.is-full {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #182032;
  padding-bottom: 3rem;
}

.mn-study .mn-rd:fullscreen { background: #182032; }
.mn-study .mn-rd::backdrop { background: #182032; }

.mn-study .mn-rd.is-full .mn-rd-head { padding-top: 3.75rem; }
.mn-study .mn-rd.is-full .mn-rd-subject { color: #b9c9ef; }
.mn-study .mn-rd.is-full .mn-rd-title { color: #ffffff; }
.mn-study .mn-rd.is-full .mn-rd-meta { color: rgba(255, 255, 255, 0.72); }
.mn-study .mn-rd.is-full .mn-rd-meta > span:not(:first-child)::before { background: rgba(255, 255, 255, 0.45); }
.mn-study .mn-rd.is-full .mn-rd-full { display: none; }
.mn-study .mn-rd.is-full .mn-rd-prev,
.mn-study .mn-rd.is-full .mn-rd-all,
.mn-study .mn-rd.is-full .mn-rd-prev:hover,
.mn-study .mn-rd.is-full .mn-rd-all:hover { color: #b9c9ef; }
.mn-study .mn-rd.is-full .mn-rd-keys { color: rgba(255, 255, 255, 0.55); }

.mn-study .mn-rd.is-full .mn-rd-full-exit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  position: fixed;
  top: calc(0.75rem + env(safe-area-inset-top, 0px));
  right: 0.75rem;
  z-index: 3;
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(11, 29, 78, 0.88);
  color: #ffffff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.mn-study .mn-rd.is-full .mn-rd-full-exit:hover,
.mn-study .mn-rd.is-full .mn-rd-full-exit:focus-visible { background: #0b1d4e; border-color: #ffffff; }

/* A book's cover and contents (2026-09-14): the row above its first module in the
   outline, and the way to it from a locked chapter. */
.mn-study .mn-ol-contents {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.35rem 0 0.2rem;
  padding: 0.5rem 0.5rem;
  border-radius: 8px;
  color: var(--st-navy);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.mn-study .mn-ol-contents:hover { background: var(--st-bg); }
.mn-study .mn-ol-contents.is-here { background: var(--st-navy); color: #ffffff; }

.mn-study .mn-lockpanel-contents { margin: 0.9rem 0 0; font-size: 0.92rem; }

/* The subject page's first section, above Module I (owner, 2026-09-14): a module
   card like the rest, whose rows are the cover and the contents.
   ⭐ Its "Open" is a small green button (owner, 2026-09-14: "more green ... a button
   sort of ... don't go too overboard"): a solid deep green pill, the only filled
   control on the page, beside grey "Locked" words. Tinted versions were tried and
   still read as a label. */
.mn-study .mn-module-open {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.36rem 0.9rem 0.36rem 0.72rem;
  border: 1px solid var(--st-green);
  border-radius: 999px;
  background: var(--st-green);
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.22);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mn-study .mn-module-open:hover {
  background: #116932;
  border-color: #116932;
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.30);
}

.mn-study .mn-module-open:focus-visible {
  outline: 2px solid var(--st-green);
  outline-offset: 2px;
}

.mn-study .mn-chlist--front .mn-chlist-page { color: var(--st-ink-3); }
.mn-study .mn-chlist--front a:hover .mn-chlist-page { color: var(--st-navy); }

/* ⚠️ The section's "contents" row and the cover's "Open the book" jump to
   id="contents"; the sticky study bar would sit over its heading without this. */
.mn-study .mn-book-contents { scroll-margin-top: calc(var(--st-bar-h) + 1rem); }

.mn-study .mn-lockpanel-contents a {
  font-weight: 600;
  color: var(--st-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.mn-study .mn-pplist .is-locked .mn-pplist-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--st-ink-3);
}

.mn-study .mn-module-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--st-ink-3);
}

.mn-study .mn-subject-flag--lock {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(11, 29, 78, 0.86);
}

.mn-study .mn-sbar-preview {
  flex: 0 0 auto;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: #fff4e5;
  color: #9a4b00;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .mn-study .mn-unlock-actions { width: 100%; }
  .mn-study .mn-unlock-form,
  .mn-study .mn-unlock-form .mn-btn { width: 100%; }
}