/* ── Your semester: the home page asks, then opens the semester ─────────────
   includes/my-semester.php. One card above the home page's boxes.

   ⭐ The home page's own palette and type (assets/css/homepage-v4.css), copied
   into tokens on .mn-ms so the block can sit on any page later (the dashboard
   is the obvious next one) without depending on .mn-hd-body.
   ⭐ The Semester Pass button is the navbar's own gold (site-topnav.css,
   .mn-res-nav-pass), dark ink on gold for contrast, so "unlock" reads as the
   same thing wherever a student meets it.
   ⛔ Phones first: 63% of visitors are on budget Android. Every tap target is
   at least 42px, selects use 16px text (iOS zooms the page on anything
   smaller), and every grid track is minmax(0, 1fr) (a bare 1fr keeps its
   min-content width and a 320px phone scrolls sideways).
   ⛔ Links inside the home page's <main> inherit their colour from
   `.mn-hd-body main a { color: inherit }`, which beats a one-class selector,
   so every link rule here carries two classes. */

.mn-ms {
  --ms-navy: #0b1d4e;
  --ms-navy-2: #123178;
  --ms-blue: #1d50ca;
  --ms-blue-50: #f0f5ff;
  --ms-blue-100: #e8f0fe;
  --ms-ink: #0d1526;
  --ms-ink-2: #2c3e5c;
  --ms-ink-3: #5a718c;
  --ms-line: #dce6f5;
  --ms-off: #f8f9fc;
  --ms-green: #16794a;

  margin: 0 0 22px;
  font-family: 'Lora', Georgia, Cambria, serif;
  color: var(--ms-ink);
  scroll-margin-top: 16px;
}

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

.mn-ms-card {
  background: #fff;
  border: 1px solid var(--ms-line);
  border-radius: 16px;
  padding: 18px 16px 16px;
  box-shadow: 0 1px 2px rgba(11, 29, 78, .04), 0 8px 24px rgba(11, 29, 78, .05);
}

.mn-ms-ic { flex: 0 0 auto; display: inline-block; vertical-align: -0.15em; }

/* ── head ── */
.mn-ms-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mn-ms-headtext { min-width: 0; }

.mn-ms-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-blue);
  letter-spacing: .01em;
}

.mn-ms-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--ms-ink);
  text-wrap: balance;
}

.mn-ms-lead {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ms-ink-2);
}

.mn-ms-meta {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--ms-ink-3);
}

.mn-ms .mn-ms-change {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ms-blue);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.mn-ms-flash {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff4e5;
  border: 1px solid #f3d19e;
  color: #6b3d00;
  font-size: 14.5px;
}

/* ── the question ── */
.mn-ms-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
}

.mn-ms-field label,
.mn-ms-collegeform label {
  display: block;
  margin: 0 0 5px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ms-ink-2);
}

.mn-ms-field select,
.mn-ms-collegeform select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #c9d6ea;
  border-radius: 10px;
  background: #fff;
  color: var(--ms-ink);
  font: inherit;
  font-size: 16px;
}

.mn-ms-field select:focus-visible,
.mn-ms-collegeform select:focus-visible {
  outline: 2px solid var(--ms-blue);
  outline-offset: 1px;
  border-color: var(--ms-blue);
}

.mn-ms-field[hidden] { display: none; }
.mn-ms-field select:disabled { background: var(--ms-off); color: var(--ms-ink-3); }
/* An unanswered question reads like the searchable ones beside it: grey. */
.mn-ms-field select:invalid { color: var(--ms-ink-3); }
.mn-ms-field select option { color: var(--ms-ink); }

/* ── the searchable list laid over a long <select> (assets/js/my-semester.js 7) ──
   Owner, 2026-10-05: the phone's own dropdown for 525 courses was "so bad and
   not user friendly". The <select> stays in the form, out of sight, and is what
   gets posted; this button and its search box are what a student taps. */
.mn-ms-field,
.mn-ms-collegeform { position: relative; }
.mn-ms select.mn-ms-pick-native {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(50%);
}
.mn-ms-pick { position: relative; min-width: 0; }
.mn-ms .mn-ms-pick-btn {
  position: relative;
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 40px 12px 12px;
  border: 1px solid #c9d6ea;
  border-radius: 10px;
  background: #fff;
  color: var(--ms-ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.mn-ms .mn-ms-pick-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ms-ink-3);
  border-bottom: 2px solid var(--ms-ink-3);
  transform: translateY(-70%) rotate(45deg);
}
.mn-ms .mn-ms-pick.is-empty .mn-ms-pick-btn { color: var(--ms-ink-3); }
.mn-ms .mn-ms-pick.is-open .mn-ms-pick-btn { border-color: var(--ms-blue); }
.mn-ms .mn-ms-pick-btn:disabled { background: var(--ms-off); color: var(--ms-ink-3); cursor: default; }
.mn-ms .mn-ms-pick-btn:focus-visible { outline: 2px solid var(--ms-blue); outline-offset: 1px; border-color: var(--ms-blue); }
.mn-ms-pick-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(13, 21, 38, .16);
  overflow: hidden;
}
.mn-ms-pick-panel[hidden] { display: none; }
.mn-ms .mn-ms-pick-search {
  display: block;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--ms-line);
  border-radius: 0;
  background: var(--ms-off);
  color: var(--ms-ink);
  font: inherit;
  /* ⛔ Not below 16px: an iPhone zooms the whole page into a smaller input. */
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
.mn-ms .mn-ms-pick-search:focus { outline: none; background: #fff; }
.mn-ms-pick-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: min(55vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mn-ms-pick-group {
  padding: 12px 14px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ms-ink-3);
}
.mn-ms-pick-opt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ms-ink);
  cursor: pointer;
}
.mn-ms-pick-opt.is-active,
.mn-ms-pick-opt:hover { background: var(--ms-blue-50); }
.mn-ms-pick-opt[aria-selected="true"] { color: var(--ms-blue); font-weight: 700; }
.mn-ms-pick-meta { font-size: 13px; font-weight: 400; color: var(--ms-ink-3); }
.mn-ms-pick-opt.is-escape { border-top: 1px solid var(--ms-line); color: var(--ms-blue); font-weight: 600; }
.mn-ms-pick-none { margin: 0; padding: 10px 14px 6px; font-size: 14px; line-height: 1.4; color: var(--ms-ink-3); }

.mn-ms-go {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--ms-navy);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.mn-ms-go:hover { background: var(--ms-navy-2); }
.mn-ms-go:focus-visible { outline: 2px solid var(--ms-blue); outline-offset: 2px; }
.mn-ms-go--small { min-height: 44px; font-size: 15px; }

.mn-ms-foot {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ms-ink-3);
}
.mn-ms .mn-ms-foot a {
  color: var(--ms-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.mn-ms-hint {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ms-ink-3);
}

/* ── one-tap answers (group, semester) ── */
.mn-ms-pickform { margin-top: 4px; }
.mn-ms-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.mn-ms-choices--sems { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mn-ms-choice {
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: var(--ms-blue-50);
  color: var(--ms-blue);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.mn-ms-choice:hover { border-color: var(--ms-blue); }

/* ── semester chips ── */
.mn-ms-sems {
  display: flex;
  gap: 8px;
  margin: 14px -16px 0;
  /* Room above and below for the focus ring, which the scroller would clip. */
  padding: 5px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mn-ms-sems::-webkit-scrollbar { display: none; }

.mn-ms .mn-ms-sem {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ms-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ms-ink-2);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.mn-ms .mn-ms-sem:hover { border-color: var(--ms-blue); color: var(--ms-blue); }
.mn-ms .mn-ms-sem.is-saved { color: var(--ms-blue); border-color: #b9cdf3; }
.mn-ms .mn-ms-sem.is-viewing {
  background: var(--ms-navy);
  border-color: var(--ms-navy);
  color: #fff;
}
.mn-ms .mn-ms-sem.is-held .mn-ms-ic:last-child { color: var(--ms-green); }
.mn-ms .mn-ms-sem.is-held.is-viewing .mn-ms-ic:last-child { color: #8fe0b4; }

/* ── "yours": what they own that is not on screen ── */
.mn-ms-held {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.mn-ms-held li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 6px 10px;
  border-radius: 10px;
  background: #eaf6ef;
  border: 1px solid #bfe3cd;
  color: #0f3d26;
  font-size: 14.5px;
}
.mn-ms-held li .mn-ms-ic { color: var(--ms-green); }
.mn-ms-held li span { flex: 1 1 auto; min-width: 0; }
.mn-ms .mn-ms-held a {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--ms-green);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.mn-ms-saveform { margin: 10px 0 0; }
.mn-ms-savebtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ms-navy);
  border-radius: 10px;
  background: #fff;
  color: var(--ms-navy);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.mn-ms-savebtn:hover { background: var(--ms-blue-50); }

/* ── subjects ── */
.mn-ms-subjects {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--ms-line);
}

.mn-ms-subject {
  padding: 14px 0;
  border-bottom: 1px solid var(--ms-line);
}

.mn-ms-subject-name {
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ms-ink);
}

.mn-ms-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mn-ms .mn-ms-link {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: var(--ms-blue-50);
  color: var(--ms-blue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}
.mn-ms .mn-ms-link span { min-width: 0; overflow-wrap: anywhere; }
.mn-ms .mn-ms-link:hover { border-color: var(--ms-blue); }

/* Locked: present, plainly not open. Neutral ink, white, and the padlock. */
.mn-ms .mn-ms-link.is-locked {
  background: #fff;
  color: var(--ms-ink-3);
  border-style: dashed;
}
.mn-ms .mn-ms-link.is-locked:hover { color: var(--ms-ink-2); border-color: var(--ms-ink-3); }

/* The place of a door this subject does not have (see mnMySemLink()). */
.mn-ms .mn-ms-link.is-none { visibility: hidden; }

/* Theirs: the same door, with a quiet green tick. No badge, no price. */
.mn-ms .mn-ms-link.is-own .mn-ms-ic:last-child { margin-left: auto; color: var(--ms-green); }

/* ── the whole semester ── */
.mn-ms-all {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.mn-ms .mn-ms-all-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
  background: var(--ms-off);
  color: var(--ms-ink-2);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.mn-ms .mn-ms-all-link .mn-ms-ic { color: var(--ms-blue); }
.mn-ms .mn-ms-all-link:hover { border-color: var(--ms-blue); color: var(--ms-blue); }

/* No subjects to list (a course we sell nothing for): the two links ARE the
   semester, so they carry the blue the subject doors carry elsewhere. */
.mn-ms .mn-ms-all.is-main .mn-ms-all-link {
  background: var(--ms-blue-50);
  color: var(--ms-blue);
  min-height: 52px;
  font-size: 15.5px;
}

.mn-ms-empty {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--ms-ink-2);
}
.mn-ms .mn-ms-empty a { color: var(--ms-blue); font-weight: 600; text-decoration: underline; }

/* ── unlock, or "yours" ── */
.mn-ms-unlock,
.mn-ms-yours {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--ms-navy) 0%, var(--ms-navy-2) 100%);
  color: #fff;
}
.mn-ms-unlock p,
.mn-ms-yours p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.mn-ms-unlock p .mn-ms-ic,
.mn-ms-yours p .mn-ms-ic { margin-top: .2em; }

.mn-ms .mn-ms-unlock-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7cf5f 0%, #e0a92e 100%);
  color: #2a1c00;
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 2px 6px rgba(0, 0, 0, .22);
}
.mn-ms .mn-ms-unlock-btn:hover { background: linear-gradient(180deg, #ffdc7a 0%, #eab63a 100%); }

.mn-ms-unlock .mn-ms-unlock-signin {
  display: block;
  font-size: 14px;
  color: #dbe6ff;
}
.mn-ms .mn-ms-unlock-signin a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

/* ── "Not ready yet": ask for what a semester does not have (mnMySemRenderAskFor()) ── */
.mn-ms-askfor {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--ms-line);
  border-radius: 12px;
  background: var(--ms-off);
}
.mn-ms-askfor-h { margin: 0 0 4px; font-size: 16.5px; line-height: 1.3; font-weight: 700; color: var(--ms-ink); }
.mn-ms-askfor-lead { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--ms-ink-2); }
.mn-ms-askfor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mn-ms-askfor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: #fff;
}
.mn-ms-askfor-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; }
.mn-ms-askfor-form,
.mn-ms-askfor-done { flex: 0 0 auto; }
.mn-ms-askfor-what { font-size: 15.5px; font-weight: 600; color: var(--ms-ink); }
.mn-ms-askfor-count { font-size: 13.5px; color: var(--ms-ink-3); }
.mn-ms-askfor-form { margin: 0; }
.mn-ms .mn-ms-askfor-btn {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--ms-blue);
  border-radius: 10px;
  background: #fff;
  color: var(--ms-blue);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.mn-ms .mn-ms-askfor-btn:hover { background: var(--ms-blue-50); }
.mn-ms .mn-ms-askfor-btn:focus-visible { outline: 2px solid var(--ms-blue); outline-offset: 2px; }
.mn-ms-askfor-done { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--ms-green); }
.mn-ms-askfor-small { margin: 10px 0 0; font-size: 13.5px; color: var(--ms-ink-3); }

/* ── their course's student group (mnMySemRenderGroup()) ──
   The card is the one every paper page shows, styled by its own sheet
   (qp-subject-page.css); this only spaces it inside the semester. */
.mn-ms-group { margin-top: 14px; }
.mn-hd-body .mn-ms a.qp-group-row:focus-visible { border-radius: 9px; }

/* ── keyboard focus ──
   ⛔ The home page's own rule (.mn-hd-body a:focus-visible, specificity 0,2,1)
   beats two-class link rules and squares every corner to 4px; these keep each
   control's shape, and the ring on the navy band is white (blue on navy is
   about 1.8:1, too faint to see). */
.mn-hd-body .mn-ms a.mn-ms-sem:focus-visible { border-radius: 999px; }
.mn-hd-body .mn-ms a.mn-ms-link:focus-visible,
.mn-hd-body .mn-ms a.mn-ms-all-link:focus-visible,
.mn-hd-body .mn-ms a.mn-ms-unlock-btn:focus-visible { border-radius: 10px; }
.mn-ms .mn-ms-sem:focus-visible,
.mn-ms .mn-ms-link:focus-visible,
.mn-ms .mn-ms-all-link:focus-visible,
.mn-ms .mn-ms-change:focus-visible,
.mn-ms .mn-ms-choice:focus-visible,
.mn-ms .mn-ms-savebtn:focus-visible,
.mn-ms .mn-ms-install-btn:focus-visible,
.mn-ms-college > summary:focus-visible {
  outline: 2px solid var(--ms-blue);
  outline-offset: 2px;
}
.mn-hd-body .mn-ms .mn-ms-unlock a:focus-visible,
.mn-ms .mn-ms-unlock a:focus-visible { outline-color: #fff; }

.mn-ms-yours { background: #eaf6ef; color: #0f3d26; border: 1px solid #bfe3cd; }
.mn-ms-yours p .mn-ms-ic { color: var(--ms-green); }
.mn-ms .mn-ms-yours .mn-ms-unlock-btn {
  background: var(--ms-green);
  color: #fff;
  box-shadow: none;
}
.mn-ms .mn-ms-yours .mn-ms-unlock-btn:hover { background: #0f6a3f; }

/* ── "Keep it on every device": the sign-in card ──
   The masthead's own navy, so it reads as munotes asking, not an advert; the
   button is white on navy, the strongest thing in the block after the title. */
.mn-ms-signin {
  margin-top: 14px;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--ms-navy) 0%, var(--ms-navy-2) 100%);
  color: #fff;
}
.mn-ms-signin-h {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}
.mn-ms-signin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.mn-ms-signin-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: #e6edff;
}
.mn-ms-signin-list .mn-ms-ic { margin-top: .2em; color: #8fe0b4; }
.mn-ms-signin-proof { margin: 12px 0 0; font-size: 14px; color: #c7d6f5; }
.mn-ms-signin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
}
.mn-ms .mn-ms-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  background: #fff;
  color: var(--ms-navy);
  border: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.mn-ms .mn-ms-signin-btn:hover { background: #eef3ff; }
.mn-ms-signin-form { margin: 0; }
.mn-ms-signin .mn-ms-later { color: #dbe6ff; }
.mn-ms-signin-small { margin: 8px 0 0; font-size: 13.5px; color: #c7d6f5; }
.mn-hd-body .mn-ms .mn-ms-signin-btn:focus-visible { border-radius: 10px; outline: 2px solid #fff; outline-offset: 2px; }

/* ── "not in the list": write to us ──
   One plain box, one button that opens their own mail app with the details
   already written, and the address for anyone without one. */
.mn-ms-missing {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid #f3d19e;
  border-radius: 12px;
  background: #fff8ec;
  color: #4a2f00;
}
.mn-ms-missing[hidden] { display: none; }
.mn-ms-missing > p:first-child { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.mn-ms .mn-ms-mailbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--ms-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.mn-ms .mn-ms-mailbtn:hover { background: var(--ms-navy-2); }
.mn-ms-missing .mn-ms-hint { margin-top: 8px; color: #6b4a12; }
.mn-ms .mn-ms-missing .mn-ms-hint a { color: #4a2f00; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.mn-hd-body .mn-ms a.mn-ms-mailbtn:focus-visible { border-radius: 10px; }

/* A course we do not list: the card's other questions and its button step
   aside, and the email to us is the one thing left to do. */
.mn-ms-form.is-missing-course .mn-ms-field--group,
.mn-ms-form.is-missing-course .mn-ms-field--sem,
.mn-ms-form.is-missing-course .mn-ms-field--college,
.mn-ms-form.is-missing-course > .mn-ms-go { display: none; }
.mn-ms-collegeform.is-college-missing > .mn-ms-go { display: none; }

/* ── which college: the box under the title until answered ── */
.mn-ms-collegebox {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #b9cdf3;
  border-radius: 12px;
  background: var(--ms-blue-50);
}
.mn-ms-collegebox .mn-ms-collegeform { padding: 0; }
.mn-ms-collegebox-h {
  display: block;
  margin: 0;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: var(--ms-ink) !important;
}
.mn-ms-later {
  min-height: 42px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ms-ink-2);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.mn-ms-later[hidden] { display: none; }
.mn-ms-collegeform .mn-ms-hint[hidden],
.mn-ms-field .mn-ms-hint[hidden] { display: none; }

/* ── add your college ── */
.mn-ms-college {
  margin-top: 14px;
  border-top: 1px solid var(--ms-line);
  padding-top: 10px;
}
.mn-ms-college > summary {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-blue);
  cursor: pointer;
  list-style: none;
}
.mn-ms-college > summary::-webkit-details-marker { display: none; }
.mn-ms-college > summary::before { content: '+'; margin-right: 8px; font-weight: 700; }
.mn-ms-college[open] > summary::before { content: '\2212'; }
.mn-ms-collegeform { display: grid; gap: 10px; padding: 4px 0 2px; }

/* ── install (shown by assets/js/mn-app.js only where it can work) ── */
.mn-ms-install { margin-top: 14px; }
.mn-ms-install[hidden] { display: none; }
.mn-ms-install-btn {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ms-line);
  border-radius: 10px;
  background: #fff;
  color: var(--ms-navy);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.mn-ms-install .mn-ms-hint[hidden] { display: none; }

/* ── wider screens ── */
@media (min-width: 721px) {
  .mn-ms { margin-bottom: 26px; }
  .mn-ms-card { padding: 24px 28px 22px; border-radius: 16px; }
  .mn-ms-title { font-size: 26px; }
  .mn-ms-sems { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }

  /* Course, semester, college, button on one row. The hints under a field
     take the whole row, so the row itself never grows uneven. */
  .mn-ms-form {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .75fr) minmax(0, 1.6fr) auto;
    align-items: start;
  }
  .mn-ms-form > .mn-ms-go { align-self: start; margin-top: 23px; }
  /* The fields share one row here, so an opened list may be wider than its
     column (on a phone it is exactly the field's width, inside the card). */
  .mn-ms-pick-panel { min-width: 380px; }
  /* The college, the row's last field, opens toward the left. */
  .mn-ms-field--college .mn-ms-pick-panel { left: auto; right: 0; }
  /* The group joins the row when it shows, between course and semester. */
  .mn-ms-form:has(.mn-ms-field--group:not([hidden])) {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1.4fr) auto;
  }

  .mn-ms-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mn-ms-choices--sems { grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .mn-ms-subject {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
    align-items: center;
    gap: 16px;
  }
  .mn-ms-subject-name { margin: 0; }
  .mn-ms-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .mn-ms-all { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mn-ms-unlock,
  .mn-ms-yours {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px 18px;
  }
  .mn-ms-collegeform { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
  .mn-ms-collegeform label { grid-column: 1 / -1; margin-bottom: -4px; }
  .mn-ms-collegeform .mn-ms-hint { grid-column: 1 / -1; }
  .mn-ms-collegebox { padding: 16px 18px; }
  .mn-ms-signin { padding: 18px 22px; }
  .mn-ms-signin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
}