/* ---------- Base / tokens ----------
   Brand palette sampled directly from the Maargamitra logo illustration
   (the book-and-paths artwork) -- see themes/margamitra/README.md for the
   source. Navy is ink/structure, Teal is the primary interactive color;
   Coral/Gold/Sky/Green rotate as accents and are not all used in one place. */
:root {
	--mm-text: #002155;
	--mm-text-muted: #4a5b78;
	--mm-border: #d8e4ea;
	--mm-accent: #02a3a0;
	--mm-accent-dark: #017673;
	--mm-navy: #002155;
	--mm-coral: #fd6e3a;
	--mm-gold: #fdb210;
	--mm-sky: #7cd6fc;
	--mm-green: #1a8856;
	--mm-bg: #fbfeff;
	--mm-bg-subtle: #f2f8fa;
	--mm-gem-bg: #fffaf0;
	--mm-gem-border: var(--mm-gold);
	--mm-gem-text: #8a5a00;
	--mm-known-gem-bg: #eefaff;
	--mm-known-gem-border: var(--mm-sky);
	--mm-known-gem-text: #0a5a78;
	--mm-font-heading: "Spectral", Georgia, serif;
	--mm-font-body: "Lora", Georgia, serif;
	--mm-space-1: 0.5rem;
	--mm-space-2: 1rem;
	--mm-space-3: 1.5rem;
	--mm-space-4: 2rem;
	--mm-radius: 4px;
}

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

body {
	margin: 0;
	font-family: var(--mm-font-body);
	color: var(--mm-text);
	background: var(--mm-bg);
	line-height: 1.6;
}

a {
	color: var(--mm-accent);
}

a:hover {
	color: var(--mm-coral);
}

h1, h2, h3 {
	font-family: var(--mm-font-heading);
	line-height: 1.25;
}

.mm-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--mm-space-3);
}

/* ---------- Header / nav ---------- */
.mm-site-header {
	border-bottom: 1px solid var(--mm-border);
	background: var(--mm-bg);
}

.mm-site-header-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--mm-space-2) var(--mm-space-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--mm-space-2);
}

.mm-site-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--mm-font-heading);
	font-weight: 600;
	font-size: 1.25rem;
	text-decoration: none;
	color: var(--mm-navy);
}

.mm-site-logo {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.mm-primary-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-3);
	margin: 0;
	padding: 0;
}

.mm-primary-nav a {
	text-decoration: none;
	color: var(--mm-text-muted);
	font-size: 0.95rem;
}

/* Hamburger toggle -- hidden entirely above the mobile breakpoint, see the
   @media block below for the collapsed-menu behaviour. Checkbox-driven so no
   script is needed just for this. */
.mm-nav-toggle-input {
	display: none;
}

.mm-nav-toggle-label {
	display: none;
}

.mm-short-names-toggle {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	cursor: pointer;
	white-space: nowrap;
}

.mm-short-names-toggle input {
	cursor: pointer;
}

.mm-primary-nav a:hover {
	color: var(--mm-accent);
}

/* v2 nav (2026-09-22): secondary row sits directly under the primary one,
   same header, visually de-emphasised (smaller, muted) rather than a
   separate menu bar -- still one flex row per <ul>, wraps on its own line
   naturally via .mm-site-header-inner's existing flex-wrap. */
.mm-secondary-nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2);
	margin: 0.2rem 0 0;
	padding: 0;
	width: 100%;
}

.mm-secondary-nav a {
	text-decoration: none;
	color: var(--mm-text-muted);
	font-size: 0.82rem;
}

.mm-secondary-nav a:hover {
	color: var(--mm-accent);
}

.mm-shortlist-nav-badge {
	display: inline-block;
	background: var(--mm-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 0.05rem 0.4rem;
	margin-left: 0.3rem;
	vertical-align: middle;
}

.mm-site-main {
	padding: var(--mm-space-4) 0;
	min-height: 50vh;
}

.mm-site-footer {
	border-top: 1px solid var(--mm-border);
	margin-top: var(--mm-space-4);
	padding: var(--mm-space-3) 0;
	color: var(--mm-text-muted);
	font-size: 0.85rem;
}

.mm-footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--mm-space-2);
}

.mm-footer-legal-links a {
	display: inline-block;
	background: var(--mm-bg-subtle);
	color: var(--mm-accent-dark);
	border: 1px solid var(--mm-border);
	border-radius: 999px;
	padding: 0.35em 0.85em;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s, border-color 0.15s;
}

.mm-footer-legal-links a:hover {
	background: #e3f6f5;
	border-color: var(--mm-accent);
	color: var(--mm-accent-dark);
}

/* ---------- Plain content pages (concept/glossary pages) ---------- */
.mm-page-content h2 {
	margin-top: var(--mm-space-4);
	font-size: 1.15rem;
}

.mm-page-content p {
	margin: 0 0 var(--mm-space-2);
	max-width: 65ch;
}

.mm-page-content ul {
	max-width: 65ch;
}

.mm-concept-table,
.mm-glossary-list {
	max-width: 65ch;
}

.mm-concept-table {
	border-collapse: collapse;
	margin: var(--mm-space-2) 0;
}

.mm-concept-table th,
.mm-concept-table td {
	border: 1px solid var(--mm-border);
	padding: 0.4rem 0.75rem;
	text-align: left;
	font-size: 0.9rem;
}

.mm-concept-table thead th {
	background: var(--mm-bg-subtle);
}

.mm-glossary-list {
	line-height: 1.9;
}

/* Small contextual "what does this mean?" links next to badges/labels
   throughout the interactive pages, pointing at the matching concept page. */
.mm-info-link {
	font-size: 0.75rem;
	color: var(--mm-text-muted);
	text-decoration: none;
	border-bottom: 1px dotted var(--mm-text-muted);
	margin-left: 0.3rem;
}

.mm-info-link:hover {
	color: var(--mm-accent);
	border-color: var(--mm-accent);
}

.mm-hint {
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	max-width: 560px;
}

/* ---------- Rank finder ---------- */
.mm-rank-finder {
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	padding: var(--mm-space-3);
	margin-bottom: var(--mm-space-4);
	max-width: 760px; /* widened for the multi-exam field grid, was 560px for one input */
}

.mm-rank-finder form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2);
	align-items: end;
}

/* Multi-exam rank finder (2026-09-08): one optional field per active/
   evidence_pending/not_applicable exam, at least one required (enforced in
   rank-finder.js, not here). Fixed at 2 columns (2026-09-23, user request --
   was auto-fit/minmax(150px,1fr), which could squeeze 3-5 columns onto one
   row as more exams were selected, the same narrow-column crowding that
   caused the Actual/Expected/Target overlap bug fixed just above; 2 columns
   gives each field consistently enough width for its own sub-options
   regardless of how many exams are selected). Mobile override below drops
   to 1 column, matching this file's other ~640px stacking breakpoints. */
.mm-rank-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--mm-space-2);
	width: 100%;
}

@media (max-width: 640px) {
	.mm-rank-fields {
		grid-template-columns: 1fr;
	}
}

.mm-rank-field {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

/* FOUND LIVE (2026-09-22): the [hidden] attribute rank-finder.js toggles per
   exam chip was being silently overridden -- author CSS (.mm-rank-field's own
   `display: flex` above) beats the browser's default `[hidden] { display:
   none }` rule at equal specificity, so every rank field rendered visible
   regardless of which exam chips were selected. Needs its own explicit rule
   to actually take effect. */
.mm-rank-field[hidden] {
	display: none;
}

.mm-rank-field label {
	font-size: 0.8rem;
	color: var(--mm-text-muted);
}

.mm-rank-form-error {
	width: 100%;
	color: var(--mm-error, #b3261e);
	font-size: 0.85rem;
	margin: 0;
}

.mm-rank-finder input,
.mm-rank-finder select,
.mm-searchable-input {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.95rem;
	font-family: inherit;
}

/* One section per exam group in the grouped results -- exam_label from the
   server, never hardcoded here. */
.mm-exam-group {
	margin-top: var(--mm-space-4);
	padding-top: var(--mm-space-3);
	border-top: 1px solid var(--mm-border);
}

.mm-exam-group:first-child {
	margin-top: var(--mm-space-3);
	padding-top: 0;
	border-top: none;
}

.mm-exam-group-heading {
	margin: 0 0 var(--mm-space-2);
	font-size: 1.15rem;
}

.mm-exam-pending-note {
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	font-style: italic;
	margin: 0 0 var(--mm-space-2);
}

.mm-research-profile {
	list-style: none;
	margin: 0 0 var(--mm-space-3);
	padding: 0;
}

.mm-research-profile li {
	padding: 0.2rem 0;
}

.mm-research-profile-label {
	color: var(--mm-text-muted);
}

.mm-chance-caution-note {
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	margin: 0 0 var(--mm-space-2);
}

.mm-rank-finder button,
#mm-compare-button {
	padding: 0.45rem 1rem;
	border: 1px solid var(--mm-accent);
	background: var(--mm-accent);
	color: #fff;
	border-radius: var(--mm-radius);
	cursor: pointer;
	font-size: 0.95rem;
}

.mm-rank-finder button:hover,
#mm-compare-button:hover:not(:disabled) {
	background: var(--mm-accent-dark);
}

#mm-compare-button:disabled {
	background: var(--mm-bg-subtle);
	border-color: var(--mm-border);
	color: var(--mm-text-muted);
	cursor: not-allowed;
}

.mm-group-heading {
	margin-top: var(--mm-space-3);
	margin-bottom: 0.25rem;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mm-text-muted);
}

.mm-group-heading:first-child {
	margin-top: 0;
}

.mm-hidden-gem-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: bold;
	background: var(--mm-gem-bg);
	color: var(--mm-gem-text);
	border: 1px solid var(--mm-gem-border);
	border-radius: 3px;
	padding: 0.05rem 0.4rem;
	vertical-align: middle;
}

.mm-known-gem-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: bold;
	background: var(--mm-known-gem-bg);
	color: var(--mm-known-gem-text);
	border: 1px solid var(--mm-known-gem-border);
	border-radius: 3px;
	padding: 0.05rem 0.4rem;
	vertical-align: middle;
}

/* Chances visual cue + filter (2026-09-09, user request): a colour PLUS the
   existing text label -- colour is never the only signal.
   RECOLOURED 2026-09-12 (user feedback: "too many greens" -- SAFE,
   ACCESSIBLE and BORDERLINE previously all read as shades of green/teal,
   leaving no genuinely neutral colour). New mapping: green is reserved for
   the single best band; sky-blue is the next-best band (still clearly
   positive, but visually distinct from green); grey is the neutral middle
   ground (BORDERLINE, as the user requested); gold/coral keep their existing
   caution/negative meaning; PENDING_EVIDENCE gets its own lighter grey so it
   doesn't visually collide with BORDERLINE's neutral grey. */
.mm-chance-dot {
	display: inline-block;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	margin-right: 0.45rem;
	vertical-align: middle;
}

/* FIXED 2026-09-23 (found while restoring the likelihood text label): these
   rules used the old 5-way likelihood_class keys (safe/accessible/
   borderline/stretch/unlikely), but rank-finder.js's chanceKind() has
   always returned mmTerms.likelihoodBucket()'s coarser 4-way key
   (within_range/near_cutoff/beyond_cutoff/pending_evidence) -- confirmed
   live, the dot's actual class was ".mm-chance-dot--within_range", which
   matched none of these rules, so every dot rendered with no colour at all
   (transparent background) regardless of a programme's real likelihood.
   Renamed to the keys the code actually produces. */
.mm-chance-dot--within_range { background: var(--mm-green); }
.mm-chance-dot--near_cutoff { background: var(--mm-gold); }
.mm-chance-dot--beyond_cutoff { background: var(--mm-coral); }
.mm-chance-dot--pending_evidence { background: var(--mm-border); }

.mm-chance-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	/* Spacing above added 2026-09-12 (user feedback: sat too close under the
	   "Find programmes" submit button) -- results container itself gets no
	   top padding, so this bar supplies its own breathing room instead. */
	margin-top: var(--mm-space-3);
	margin-bottom: var(--mm-space-3);
}

/* Selection semantics flipped 2026-09-12 (user feedback: every chances class
   is included/"on" by default, but the old styling made a default (fully
   selected) button look identical to a plain, unstyled one -- reading as "on"
   only once every OTHER button had visibly been toggled off first, i.e.
   backwards from what a first-time visitor would expect a coloured chip to
   mean). Now the default/included state always carries its own colour
   (border + tinted background, matching the dot), so nothing needs to be
   clicked to "look chosen" -- clicking instead visibly MUTES a class to grey
   (.is-off), which reads unambiguously as "currently hidden".
   Every rule below is scoped under ".mm-rank-finder" (2 classes) rather than
   just ".mm-chance-filter-btn" alone (1 class) -- caught live 2026-09-12: the
   pre-existing ".mm-rank-finder button" rule a few lines up is 1 class + 1
   element, which is HIGHER specificity than a single bare class selector, so
   without this scoping every filter chip silently inherited that rule's
   white text, 0.45rem/1rem padding, and 4px corners instead of the pill style
   intended here. */
.mm-rank-finder .mm-chance-filter-btn {
	display: inline-flex;
	align-items: center;
	background: var(--mm-bg);
	border: 1px solid var(--mm-border);
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	font-size: 0.8rem;
	color: var(--mm-text);
	font-weight: 600;
	cursor: pointer;
}

.mm-rank-finder .mm-chance-filter-btn.mm-chance-dot--safe { border-color: var(--mm-green); background: #eaf6ef; }
.mm-rank-finder .mm-chance-filter-btn.mm-chance-dot--accessible { border-color: var(--mm-sky); background: #eaf8fe; }
.mm-rank-finder .mm-chance-filter-btn.mm-chance-dot--borderline { border-color: var(--mm-text-muted); background: var(--mm-bg-subtle); }
.mm-rank-finder .mm-chance-filter-btn.mm-chance-dot--stretch { border-color: var(--mm-gold); background: #fef7e6; }
.mm-rank-finder .mm-chance-filter-btn.mm-chance-dot--unlikely { border-color: var(--mm-coral); background: #fef0ea; }
.mm-rank-finder .mm-chance-filter-btn.mm-chance-dot--pending_evidence { border-color: var(--mm-border); background: var(--mm-bg); }

.mm-rank-finder .mm-chance-filter-btn.is-off {
	border-color: var(--mm-border);
	background: var(--mm-bg);
	color: var(--mm-text-muted);
	font-weight: normal;
	opacity: 0.6;
}

.mm-chance-filter-btn.is-off .mm-chance-dot {
	/* Muted state still shows the class's real colour on the dot itself
	   (never fully hidden), just de-emphasised via the button's own opacity
	   -- consistent with "colour is never the only signal" above. */
	opacity: 0.7;
}

.mm-chance-filter-btn .mm-chance-dot {
	margin-right: 0.35rem;
}

/* Branch filter (2026-09-12, user request): same toggle-chip pattern as the
   chances filter above, but with a single neutral "on" colour rather than a
   per-item hue -- branches don't have an inherent positive/negative meaning
   the way chances do. Same ".mm-rank-finder" scoping fix as the chances
   filter above, for the same reason. */
.mm-branch-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--mm-space-2);
	margin-bottom: var(--mm-space-1);
}

.mm-rank-finder .mm-branch-filter-btn {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 0.3rem 0.7rem;
	font-size: 0.8rem;
	cursor: pointer;
}

.mm-rank-finder .mm-branch-filter-btn.is-on {
	border: 1px solid var(--mm-accent);
	background: #e3f6f5;
	color: var(--mm-accent-dark);
	font-weight: 600;
}

.mm-rank-finder .mm-branch-filter-btn.is-off {
	border: 1px solid var(--mm-border);
	background: var(--mm-bg);
	color: var(--mm-text-muted);
	opacity: 0.6;
}

.mm-sort-order-note {
	font-size: 0.82rem;
	font-style: italic;
	color: var(--mm-text-muted);
	margin: 0 0 var(--mm-space-2);
}

/* Results search box (2026-09-21 UX review finding: a single rank could
   return 150+ rows with no way to jump straight to one institute/programme).
   Sits between the form and the filter bars, outside the results container
   itself so re-renders (which wipe #mm-rank-results) never destroy it or
   drop keyboard focus mid-keystroke -- see rank-finder.js's own comment. */
.mm-rank-search-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 400px;
	margin-top: var(--mm-space-3);
}

.mm-rank-search-row label {
	font-size: 0.8rem;
}

#mm-rank-search {
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.95rem;
	font-family: inherit;
}

/* "Show N more" per sub-group (2026-09-21, same finding as the search box
   above): each chances/institute sub-list collapses behind this button past
   MM_LIST_INITIAL_COUNT rows rather than rendering all of them at once. */
.mm-rank-show-more {
	list-style: none;
}

.mm-rank-show-more-btn {
	background: none;
	border: none;
	color: var(--mm-accent);
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0.3rem 0;
	text-decoration: underline;
}

.mm-rank-show-more-btn:hover {
	color: var(--mm-coral);
}

/* Result list bullet fix (2026-09-12, user feedback: "too many dots" -- the
   browser's own list bullet plus our coloured chance dot rendered two dots
   per line). The chance dot carries the real information here, so this
   specific result list's native bullet is turned off. */
.mm-rank-result-list {
	list-style: none;
	padding-left: 0;
	margin: 0 0 var(--mm-space-2);
}

/* ---------- Hidden gems page ---------- */
/* REBUILT 2026-09-10: domain picker for the HG-v2 domain-filtered search --
   same visual pattern as .mm-chance-filter-btn above, not a new one. */
.mm-domain-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--mm-space-3) 0;
}

.mm-domain-picker-label {
	color: var(--mm-text-muted);
	font-size: 0.85rem;
}

.mm-domain-btn {
	display: inline-flex;
	align-items: center;
	background: var(--mm-bg);
	border: 1px solid var(--mm-border);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	cursor: pointer;
}

.mm-domain-btn.is-active {
	border-color: var(--mm-accent);
	color: var(--mm-text);
	background: var(--mm-bg-subtle);
	font-weight: bold;
}

.mm-hidden-gems-prompt,
.mm-hidden-gems-empty {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

.mm-hidden-gems-sort-note {
	color: var(--mm-text-muted);
	font-size: 0.8rem;
	font-style: italic;
	margin: 0 0 var(--mm-space-2);
}

/* Exam-group sections (2026-09-10, user request): expandable, open by
   default, with a course count in the summary -- .mm-group-heading already
   exists for the plain (non-interactive) heading elsewhere on the site;
   this reuses its look on a <summary> element instead. */
.mm-hidden-gems-exam-group {
	margin-top: var(--mm-space-3);
}

.mm-hidden-gems-exam-group summary.mm-group-heading {
	cursor: pointer;
	list-style: none;
}

.mm-hidden-gems-exam-group summary.mm-group-heading::-webkit-details-marker {
	display: none;
}

.mm-hidden-gems-exam-group summary.mm-group-heading::before {
	content: '▸';
	display: inline-block;
	margin-right: 0.35rem;
	transition: transform 0.15s ease;
}

.mm-hidden-gems-exam-group[open] > summary.mm-group-heading::before {
	transform: rotate(90deg);
}

.mm-hidden-gem-why {
	margin-top: var(--mm-space-1);
	font-size: 0.85rem;
}

.mm-hidden-gem-why summary {
	cursor: pointer;
	color: var(--mm-gem-text);
}

.mm-hidden-gem-why p {
	margin: 0.4rem 0 0;
	color: var(--mm-text-muted);
}

.mm-hidden-gem-caveat {
	font-style: italic;
}

.mm-hidden-gem-quota {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: bold;
	background: var(--mm-bg-subtle);
	color: var(--mm-text-muted);
	border-radius: 3px;
	padding: 0.05rem 0.4rem;
	margin-right: 0.35rem;
}

.mm-hidden-gems-list {
	list-style: none;
	margin: 0 0 var(--mm-space-3);
	padding: 0;
	display: grid;
	gap: var(--mm-space-2);
}

.mm-hidden-gem-card {
	border: 1px solid var(--mm-gem-border);
	background: var(--mm-gem-bg);
	border-radius: var(--mm-radius);
	padding: var(--mm-space-2) var(--mm-space-3);
	max-width: 640px;
}

.mm-hidden-gem-title {
	font-weight: bold;
}

.mm-hidden-gem-strength,
.mm-hidden-gem-crl {
	font-size: 0.9rem;
	color: var(--mm-text-muted);
}

.mm-hidden-gem-summary {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
}

.mm-hidden-gem-card details {
	margin-top: var(--mm-space-1);
	font-size: 0.85rem;
}

.mm-hidden-gem-card summary {
	cursor: pointer;
	color: var(--mm-gem-text);
}

.mm-hidden-gem-card ul {
	margin: 0.4rem 0 0;
	padding-left: 1.2rem;
	color: var(--mm-text-muted);
}

/* ---------- Compare page ---------- */
.mm-compare-pickers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2);
	margin-bottom: var(--mm-space-2);
}

/* Was ".mm-compare-picker label" wrapping the <select> as its own flex
   child; the label and input are now siblings (mmSearchableSelect appends
   the input after the label, not inside it, so a native <label for="">
   association can be used instead) -- .mm-compare-picker itself is now the
   flex column container. */
.mm-compare-picker {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.mm-compare-picker label {
	font-size: 0.85rem;
}

/* FOUND LIVE (2026-09-22): with no width constraint, a native <select>
   sizes itself to fit its widest OPTION text -- several programme names in
   this picker run 80-100+ characters (e.g. "IIT (ISM) Dhanbad -- Physical
   Science (5 Years, Integrated Bachelor of Science-Master of Science)"),
   so every picker stretched to that width and blew out the page layout on
   desktop, AND its native open option list overflowed the viewport with no
   width control at all. Replaced with mmSearchableSelect's <input>+
   <datalist> (searchable-select.js) -- this rule now sizes THAT input;
   width: 100% fills the bounded .mm-compare-picker wrapper, max-width caps
   it at something reasonable on wide screens. */
.mm-compare-picker .mm-searchable-input {
	width: 100%;
	min-width: 220px;
	max-width: 420px;
}

#mm-compare-button {
	margin-bottom: var(--mm-space-3);
}

.mm-compare-table-wrap {
	overflow-x: auto;
	max-width: 100%;
}

.mm-compare-table {
	border-collapse: collapse;
	width: 100%;
}

.mm-compare-table th,
.mm-compare-table td {
	border: 1px solid var(--mm-border);
	padding: 0.5rem 0.75rem;
	text-align: left;
	vertical-align: top;
	font-size: 0.9rem;
	white-space: nowrap;
}

.mm-compare-table thead th {
	background: var(--mm-bg-subtle);
}

.mm-compare-table tbody th {
	background: #fafafa;
	white-space: nowrap;
}

/* ---------- Browse data page ---------- */
#mm-browse-search {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: var(--mm-space-2) 0;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.95rem;
}

.mm-browse-data .mm-compare-table th {
	user-select: none;
}

.mm-browse-data .mm-compare-table th:hover {
	background: #eee;
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.mm-rank-finder form,
	.mm-compare-picker {
		flex-direction: column;
		align-items: stretch;
	}

	.mm-container {
		padding: 0 var(--mm-space-2);
	}

	/* Nav collapse (2026-09-21): below this width the 7-item primary nav plus
	   the short-names toggle wrapped across 3-4 lines and pushed the rank
	   finder form off the first screen. The hamburger toggle becomes visible
	   and the nav itself collapses to a dropdown driven by the checkbox's
	   checked state -- no JS. */
	.mm-site-header-inner {
		position: relative;
		padding-right: 3.25rem; /* room for the absolutely-positioned label */
	}

	.mm-nav-toggle-label {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		position: absolute;
		top: var(--mm-space-2);
		right: var(--mm-space-3);
		width: 28px;
		height: 28px;
		cursor: pointer;
	}

	.mm-nav-toggle-label span {
		display: block;
		height: 2px;
		background: var(--mm-navy);
		border-radius: 1px;
	}

	.mm-primary-nav {
		display: none;
		width: 100%;
		order: 3;
	}

	.mm-nav-toggle-input:checked ~ .mm-primary-nav {
		display: block;
	}

	.mm-primary-nav ul {
		flex-direction: column;
		gap: var(--mm-space-1);
		padding: var(--mm-space-2) 0 0;
		border-top: 1px solid var(--mm-border);
		margin-top: var(--mm-space-1);
	}

	.mm-primary-nav a {
		display: block;
		padding: 0.35rem 0;
	}

	/* The short-names toggle sits alongside the nav in markup order -- fold it
	   into the same collapsed dropdown rather than leaving it permanently
	   visible next to the hamburger icon. */
	.mm-short-names-toggle {
		display: none;
		width: 100%;
		order: 4;
		padding-top: var(--mm-space-1);
	}

	.mm-nav-toggle-input:checked ~ .mm-short-names-toggle {
		display: flex;
	}
}

/* ---------- Programme detail page (2026-09-11) ---------- */
.mm-breadcrumb {
	font-size: 0.8rem;
	color: var(--mm-text-muted);
	margin-bottom: var(--mm-space-3);
}

.mm-breadcrumb a {
	color: var(--mm-text-muted);
}

.mm-programme-detail-loading {
	color: var(--mm-text-muted);
}

.mm-programme-subhead {
	color: var(--mm-text-muted);
	margin-top: 0;
}

/* Prominent PG-eligibility CTA on the programme detail page (2026-09-18) --
   deliberately more visible than a plain text link, since this is the one
   link on the page a student is likely to actually want to follow next. */
.mm-pgelig-crosslink-prominent {
	margin: var(--mm-space-2) 0 var(--mm-space-3);
}

.mm-pgelig-crosslink-prominent a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: var(--mm-accent);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.65rem 1.1rem;
	border-radius: var(--mm-radius);
	text-decoration: none;
}

.mm-pgelig-crosslink-prominent a:hover {
	background: var(--mm-accent-dark);
}

.mm-quota-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: bold;
	background: var(--mm-bg-subtle);
	color: var(--mm-text-muted);
	border-radius: 3px;
	padding: 0.05rem 0.4rem;
	margin-right: 0.35rem;
}

/* Quota codes with a known tooltip (2026-09-12) get a help cursor so the
   affordance is visible before a student even hovers/focuses. */
.mm-quota-badge[title] {
	cursor: help;
	border-bottom: 1px dotted var(--mm-text-muted);
}

.mm-stat-row {
	margin-bottom: var(--mm-space-1);
}

/* v2 multi-year admission-history trend (Task A.4). No dark-mode variant --
   this theme's :root palette is fixed light, no prefers-color-scheme rule
   exists anywhere else in this file to be consistent with. */
.mm-cutoff-trend {
	margin-top: var(--mm-space-3);
}

.mm-trend-quota-label {
	font-weight: 600;
	color: var(--mm-text);
	margin-bottom: var(--mm-space-1);
}

.mm-trend-svg {
	width: 100%;
	max-width: 480px;
	height: auto;
	display: block;
	margin-bottom: var(--mm-space-3);
}

.mm-trend-gridline {
	stroke: var(--mm-border);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}

.mm-trend-line {
	fill: none;
	stroke: var(--mm-accent);
	stroke-width: 2;
}

.mm-trend-point {
	fill: var(--mm-accent-dark);
}

.mm-trend-axis-label {
	font-size: 0.7rem;
	fill: var(--mm-text-muted);
	font-family: var(--mm-font-body);
}

.mm-trend-value-label {
	font-size: 0.72rem;
	fill: var(--mm-text);
	font-weight: 600;
	font-family: var(--mm-font-body);
}

.mm-programme-intro {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
	font-style: italic;
	margin: 0 0 var(--mm-space-2);
}

/* Promoted from a plain muted paragraph to a heading (2026-09-22, user
   request: make "Specifically, for the X specialization:" prominent). */
.mm-programme-summary-context {
	color: var(--mm-navy);
	font-size: 1rem;
	font-style: normal;
	margin: var(--mm-space-2) 0 0.3rem;
}

.mm-programme-domain-card {
	background: var(--mm-bg-subtle);
	border-radius: 8px;
	padding: var(--mm-space-2) var(--mm-space-3);
	margin-bottom: var(--mm-space-3);
}

.mm-programme-domain-card h2 {
	margin-top: 0;
	font-size: 1.05rem;
}

.mm-programme-selectivity {
	font-weight: 600;
}

.mm-programme-note {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

.mm-programme-sources {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

.mm-programme-summary {
	line-height: 1.65;
	margin-bottom: var(--mm-space-2);
}

/* Entrance line (2026-09-21) -- separate from mm-programme-subhead now that
   degree type and entrance exam are two distinct labeled lines. Promoted
   from a muted paragraph to a prominent heading (2026-09-22, user request). */
.mm-programme-entrance {
	color: var(--mm-navy);
	font-size: 1.05rem;
	margin: var(--mm-space-1) 0 var(--mm-space-2);
}

/* Inline "Path forward" PG-specialization summary (2026-09-21) -- a compact
   subset of the full pg-eligibility page's own list styling (.mm-pgelig-list
   etc. below), not reusing those classes directly since this list has no
   institute-group headings or state/meta badges. */
.mm-pgelig-inline-list {
	list-style: none;
	margin: 0 0 var(--mm-space-2);
	padding: 0;
}

.mm-pgelig-inline-list li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--mm-border);
}

.mm-pgelig-inline-programs {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

.mm-pgelig-inline-loading {
	color: var(--mm-text-muted);
}

.mm-programme-confidence {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
	margin-top: var(--mm-space-3);
}

/* ---------- Institute detail page (2026-09-21) ---------- */
.mm-institute-programme-list {
	list-style: none;
	margin: 0 0 var(--mm-space-2);
	padding: 0;
}

.mm-institute-programme-list li {
	padding: 0.4rem 0;
	border-bottom: 1px solid var(--mm-border);
}

.mm-institute-programme-degree {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

/* ---------- PG-eligibility page ---------- */
.mm-pgelig-select-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	max-width: 480px;
	margin-bottom: var(--mm-space-2);
}

.mm-pgelig-select-row label {
	font-size: 0.85rem;
	color: var(--mm-text-muted);
}

/* Cascading institute/degree pickers (2026-09-17): two selects side by side
   on wide viewports, stacked on narrow ones -- same select styling as the
   single picker this replaced, just two of them sharing the row. */
.mm-pgelig-select-row-cascade {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--mm-space-2);
	max-width: none;
}

.mm-pgelig-select-row-cascade > div {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1 240px;
	min-width: 220px;
}

/* Unlike a native <select>, an <input> has a small intrinsic width with no
   content-driven sizing -- needs an explicit width to actually fill its
   wrapping column above (search-and-select institute picker, 2026-09-22). */
.mm-pgelig-select-row-cascade .mm-searchable-input {
	width: 100%;
}

@media (max-width: 600px) {
	.mm-pgelig-select-row-cascade {
		flex-direction: column;
		align-items: stretch;
	}

	/* flex-basis targets the flex container's main axis -- width in the row
	   layout above, but height once flex-direction switches to column here.
	   Left at 240px, each dropdown's wrapper was being forced to a 240px-tall
	   box on mobile, showing as a large empty gap below each select. */
	.mm-pgelig-select-row-cascade > div {
		flex-basis: auto;
	}
}

/* "What do these statuses mean?" expandable legend -- same card/border
   language as .mm-pgelig-mobility below, .mm-concept-table and
   .mm-info-link elsewhere on the site, rather than a new ad hoc style. */
.mm-pgelig-legend {
	background: var(--mm-bg-subtle);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	padding: var(--mm-space-2);
	margin-bottom: var(--mm-space-2);
}

.mm-pgelig-legend summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--mm-accent);
}

.mm-pgelig-legend dl {
	margin: var(--mm-space-2) 0 0;
}

.mm-pgelig-legend dt {
	margin-top: var(--mm-space-2);
}

.mm-pgelig-legend dt:first-child {
	margin-top: 0;
}

.mm-pgelig-legend dd {
	margin: 0.35rem 0 0;
	color: var(--mm-text-muted);
	font-size: 0.9rem;
	line-height: 1.5;
}

/* Branch-family filter bar -- same .mm-pgelig-filter button styling as the
   state filter bar directly above it, just a second row underneath. */
.mm-pgelig-branch-filters {
	margin-top: -0.25rem;
}

.mm-pgelig-mobility {
	background: var(--mm-bg-subtle);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	padding: var(--mm-space-2);
	margin-bottom: var(--mm-space-2);
}

.mm-pgelig-mobility-label {
	font-weight: 600;
}

.mm-pgelig-mobility-note {
	margin: 0.5rem 0 0;
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

.mm-pgelig-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: var(--mm-space-2);
}

.mm-pgelig-filter {
	border: 1px solid var(--mm-border);
	background: transparent;
	padding: 0.35rem 0.75rem;
	border-radius: var(--mm-radius);
	font-size: 0.85rem;
	cursor: pointer;
}

.mm-pgelig-filter.active {
	background: var(--mm-accent);
	border-color: var(--mm-accent);
	color: #fff;
}

.mm-pgelig-count {
	color: var(--mm-text-muted);
	font-size: 0.85rem;
	margin-bottom: var(--mm-space-1);
}

.mm-pgelig-list {
	border-top: 1px solid var(--mm-border);
}

.mm-pgelig-row {
	display: flex;
	justify-content: space-between;
	gap: var(--mm-space-2);
	padding: var(--mm-space-2) 0;
	border-bottom: 1px solid var(--mm-border);
}

/* Institute name used to live in a per-row h3 here; rows are now grouped
   under a shared .mm-pgelig-institute-group-heading instead (2026-09-18), so
   the row's own main text is just the department/programme -- promoted to
   the row's primary weight accordingly. */
.mm-pgelig-row-main p {
	margin: 0;
	font-size: 1rem;
}

/* Background band + accent color (2026-09-23, user request: make the
   institute name stand out against the department/programme text in each
   row below it) -- replaces the plain top-border separator, which read as
   just another line of text at a glance. */
.mm-pgelig-institute-group-heading {
	font-size: 1.1rem;
	margin: var(--mm-space-2) 0 0.5rem;
	padding: 0.4rem var(--mm-space-2);
	background: var(--mm-bg-subtle);
	color: var(--mm-accent-dark);
	border-radius: var(--mm-radius);
	border-left: 4px solid var(--mm-accent);
}

.mm-pgelig-list > .mm-pgelig-institute-group-heading:first-child {
	margin-top: 0;
}

.mm-pgelig-target-institute-filter {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--mm-space-2);
	font-size: 0.9rem;
}

.mm-pgelig-target-institute-filter select,
.mm-pgelig-target-institute-filter .mm-searchable-input {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	background: transparent;
	max-width: 280px;
}

.mm-pgelig-row-meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
	text-align: right;
	min-width: 240px;
}

.mm-pgelig-state {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.5rem;
	border-radius: var(--mm-radius);
}

.mm-pgelig-state-eligible {
	background: var(--mm-green);
	color: #fff;
}

.mm-pgelig-state-branch_locked {
	background: var(--mm-gold);
	color: #4a3f14;
}

.mm-pgelig-state-unclear {
	border: 1px solid var(--mm-border);
	color: var(--mm-text-muted);
}

.mm-pgelig-state-not_offered {
	color: var(--mm-text-muted);
}

.mm-pgelig-state-not_found_within_plan {
	border: 1px dashed var(--mm-border);
	color: var(--mm-text-muted);
}

.mm-pgelig-row-family {
	font-weight: 600;
}

.mm-pgelig-row-program {
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	margin-top: 0.15rem;
}

.mm-pgelig-boundary {
	font-size: 0.8rem;
	color: var(--mm-text-muted);
}

@media (max-width: 760px) {
	.mm-pgelig-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.mm-pgelig-row-meta {
		align-items: flex-start;
		text-align: left;
	}
}

/* ============================================================
   v2 redesign (2026-09-22) -- everything below is new for v2,
   nothing above this point was changed from the v1 stylesheet
   this theme was forked from.
   ============================================================ */

.mm-profile-step {
	margin-bottom: var(--mm-space-3);
}

.mm-profile-step h3 {
	font-size: 1.05rem;
	margin: 0 0 0.3rem;
}

/* Interest cards -- same pill-button visual language as the existing filter
   chips elsewhere on the site, just larger since this is the first, most
   consequential choice on the page rather than a secondary refinement. */
.mm-interest-picker,
.mm-exam-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: var(--mm-space-2) 0;
}

/* FIXED 2026-09-23 (user report: selected/unselected colours read backwards
   -- unselected chips showed a solid dark teal fill, selected ones a pale
   tint). Root cause is the exact specificity trap already documented and
   fixed once for .mm-chance-filter-btn above (2026-09-12): these are
   <button> elements inside .mm-rank-finder, so the generic ".mm-rank-finder
   button" rule (1 class + 1 element = higher specificity than a single bare
   class) was winning for the UNSELECTED state, silently applying that
   rule's solid accent-fill/white-text button look. The .is-on rule (2
   classes) already out-specifies it, which is why only the "selected" look
   was ever the intended pale tint -- inverted from what a filled/highlighted
   chip should mean. Both rules now scoped under ".mm-rank-finder" so
   neither depends on winning a specificity fight with that generic rule:
   unselected is the plain/pale look, selected is the solid accent fill. */
.mm-rank-finder .mm-interest-card,
.mm-rank-finder .mm-exam-chip {
	background: #e3f6f5;
	border: 1px solid var(--mm-border);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--mm-text);
	cursor: pointer;
}

.mm-rank-finder .mm-interest-card.is-on,
.mm-rank-finder .mm-exam-chip.is-on {
	border-color: var(--mm-accent);
	background: var(--mm-accent-dark);
	color: #fff;
	font-weight: 600;
}

/* FIXED 2026-09-23 (user report: on desktop, selecting multiple exams made
   their sub-options overlap): this row has no explicit width and no
   flex-wrap, so at its default `nowrap` the three Actual/Expected/Target
   labels' combined min-content width (~240-270px including gaps) doesn't
   fit inside a single .mm-rank-fields grid column (each ~150-180px wide
   once 2+ exams are selected side by side) -- confirmed live: the row
   overflowed its own column by ~65px, painting directly over the next
   selected exam's field since overflow was never clipped. flex-wrap: wrap
   lets it fold onto a second line within its own column instead of
   bleeding into the neighbour. */
.mm-rank-type-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	color: var(--mm-text-muted);
}

.mm-rank-type-picker label {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	cursor: pointer;
}

.mm-differentiator-strip {
	margin-top: var(--mm-space-4);
	padding-top: var(--mm-space-3);
	border-top: 1px solid var(--mm-border);
}

.mm-differentiator-strip h3 {
	font-size: 0.95rem;
	color: var(--mm-text-muted);
	margin: 0 0 var(--mm-space-1);
}

.mm-differentiator-strip ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2);
	margin: 0;
	padding: 0;
}

.mm-differentiator-strip li {
	background: var(--mm-bg-subtle);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: 0.82rem;
	color: var(--mm-text-muted);
}

.mm-results-count {
	font-weight: 600;
	font-size: 1.05rem;
	margin: var(--mm-space-3) 0 0.25rem;
}

/* Programme card (doc §9/§45) -- replaces v1's plain <li> result row with a
   bordered card carrying admission position, research fit, evidence
   confidence, and an actions row, all in one glance without a click. */
.mm-programme-card-list {
	display: grid;
	gap: var(--mm-space-2);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--mm-space-2);
}

.mm-programme-card {
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	padding: var(--mm-space-2) var(--mm-space-3);
	background: var(--mm-bg);
}

.mm-card-title-row {
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: 0.3rem;
}

/* Restored likelihood text label (2026-09-23) -- pairs with the aria-hidden
   .mm-chance-dot above so the likelihood is a real accessible text label
   again, not colour-only. Colour-matched to the dot's own class per band,
   reusing the same tokens .mm-chance-dot--* already uses. */
.mm-card-chance-label {
	font-size: 0.85rem;
	font-weight: 600;
	margin-left: 0.5rem;
}

.mm-chance-text--within_range { color: var(--mm-green); }
.mm-chance-text--near_cutoff { color: var(--mm-gem-text); }
.mm-chance-text--beyond_cutoff { color: var(--mm-coral); }
.mm-chance-text--pending_evidence { color: var(--mm-text-muted); }

/* "Evidence confidence" (.mm-card-evidence) dropped 2026-09-23 (user
   request) -- class removed from this shared rule since it's no longer
   rendered anywhere. */
.mm-card-exam,
.mm-card-position,
.mm-card-research-fit {
	margin: 0.2rem 0;
	font-size: 0.9rem;
	color: var(--mm-text-muted);
}

.mm-card-position {
	color: var(--mm-text);
}

.mm-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-top: var(--mm-space-1);
}

.mm-card-action-link {
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
}

.mm-shortlist-btn {
	background: var(--mm-bg-subtle);
	border: 1px solid var(--mm-border);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
	color: var(--mm-text);
}

.mm-shortlist-btn.is-on {
	background: var(--mm-green);
	border-color: var(--mm-green);
	color: #fff;
	font-weight: 600;
}

.mm-other-routes {
	margin-top: var(--mm-space-4);
	padding-top: var(--mm-space-3);
	border-top: 1px solid var(--mm-border);
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

.mm-other-routes h3 {
	font-size: 1rem;
	color: var(--mm-text);
	margin: 0 0 0.3rem;
}

/* ---------- Explore Programmes catalogue ---------- */
.mm-explore-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mm-space-2);
	margin-bottom: var(--mm-space-3);
}

.mm-explore-filter-group {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 200px;
}

.mm-explore-filter-group label {
	font-size: 0.8rem;
	color: var(--mm-text-muted);
}

.mm-explore-filter-group select,
.mm-explore-filter-group .mm-searchable-input {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.9rem;
	width: 100%;
	max-width: 320px;
}

.mm-explore-count {
	color: var(--mm-text-muted);
	font-size: 0.85rem;
	margin-bottom: var(--mm-space-2);
}

/* ---------- Shortlist ---------- */
.mm-shortlist-empty {
	color: var(--mm-text-muted);
}

.mm-shortlist-note {
	width: 100%;
	margin-top: 0.4rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-family: inherit;
	font-size: 0.85rem;
	resize: vertical;
}

.mm-shortlist-share-row {
	margin: var(--mm-space-3) 0;
	display: flex;
	align-items: center;
	gap: var(--mm-space-2);
	flex-wrap: wrap;
}

.mm-shortlist-share-link {
	background: var(--mm-bg-subtle);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	padding: 0.4rem 0.6rem;
	font-size: 0.85rem;
	word-break: break-all;
}

.mm-auth-box {
	margin-bottom: var(--mm-space-3);
	padding: var(--mm-space-2) var(--mm-space-3);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	background: var(--mm-bg-subtle);
}

.mm-auth-digest {
	display: block;
	margin-top: var(--mm-space-2);
	font-size: 0.85rem;
	color: var(--mm-text-muted, inherit);
}

.mm-auth-digest-note {
	font-style: italic;
}

.mm-auth-pitch {
	margin: 0 0 var(--mm-space-2);
	font-size: 0.9rem;
	color: var(--mm-text-muted);
}

.mm-auth-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mm-space-2);
}

.mm-auth-email {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.9rem;
	font-family: inherit;
	min-width: 220px;
}

.mm-auth-roles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	border: none;
	padding: 0;
	margin: 0;
	font-size: 0.85rem;
	color: var(--mm-text-muted);
}

.mm-auth-roles legend {
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	padding: 0;
}

.mm-auth-roles label {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}

.mm-auth-form-status {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: var(--mm-text-muted);
}

.mm-auth-status {
	font-size: 0.9rem;
}

.mm-auth-signout {
	margin-left: var(--mm-space-2);
	font-size: 0.85rem;
	font-weight: 600;
}

.mm-auth-notice {
	margin: 0 0 var(--mm-space-2);
	padding: 0.5rem 0.75rem;
	border-radius: var(--mm-radius);
	background: var(--mm-bg-subtle);
	font-size: 0.9rem;
}

.mm-shortlist-target-year {
	margin-bottom: var(--mm-space-2);
	font-size: 0.9rem;
	color: var(--mm-text-muted);
}

.mm-shortlist-target-year select {
	margin-left: 0.4rem;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--mm-text);
}

.mm-shortlist-suggest-link-row {
	margin: 0 0 var(--mm-space-2);
	font-size: 0.85rem;
	word-break: break-all;
}

.mm-shortlist-suggestions {
	margin-bottom: var(--mm-space-3);
	padding: var(--mm-space-2) var(--mm-space-3);
	border: 1px solid var(--mm-gem-border);
	border-radius: var(--mm-radius);
	background: var(--mm-gem-bg);
}

.mm-shortlist-suggestions h3 {
	margin: 0 0 var(--mm-space-2);
	font-size: 1rem;
}

.mm-shortlist-suggestion-card {
	padding: var(--mm-space-2) 0;
	border-top: 1px solid var(--mm-border);
}

.mm-shortlist-suggestion-card:first-of-type {
	border-top: none;
}

.mm-shortlist-suggestion-from {
	font-weight: 600;
	margin: 0 0 0.3rem;
}

.mm-shortlist-suggestion-comment {
	color: var(--mm-text-muted);
	font-style: italic;
	margin: 0 0 0.5rem;
}

.mm-shortlist-suggestion-order {
	margin: 0 0 var(--mm-space-2);
	padding-left: 1.25rem;
	font-size: 0.9rem;
}

.mm-shortlist-suggest-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 480px;
	margin: var(--mm-space-3) 0;
}

.mm-shortlist-suggest-form input[type="text"],
.mm-shortlist-suggest-form textarea {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-family: inherit;
	font-size: 0.9rem;
}

.mm-shortlist-suggest-status {
	color: var(--mm-text-muted);
	font-size: 0.9rem;
}

.mm-shortlist-history {
	margin-bottom: var(--mm-space-2);
}

.mm-shortlist-history-panel {
	margin-top: var(--mm-space-2);
	padding: var(--mm-space-2);
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	background: var(--mm-bg-subtle);
}

.mm-shortlist-history-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.mm-shortlist-history-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.9rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--mm-border);
}

.mm-shortlist-history-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.mm-shortlist-history-time {
	color: var(--mm-text-muted);
	font-size: 0.8rem;
	white-space: nowrap;
}

.mm-shortlist-list-switcher {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--mm-space-2);
}

.mm-shortlist-list-switcher select {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.9rem;
	font-family: inherit;
}

.mm-shortlist-list-form {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.mm-shortlist-list-form input[type="text"] {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.9rem;
	font-family: inherit;
}

.mm-shortlist-exam-filter {
	margin-bottom: var(--mm-space-2);
}

.mm-shortlist-exam-filter select {
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-size: 0.9rem;
	font-family: inherit;
}

.mm-shortlist-rank {
	display: inline-block;
	color: var(--mm-text-muted);
	font-weight: 700;
	margin-right: 0.3rem;
}

/* Quick reorder: rank box, top/bottom buttons, drag handle */
.mm-shortlist-move {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.5rem;
}

.mm-shortlist-rank-label {
	font-size: 0.85rem;
	color: var(--mm-text-muted);
	font-weight: 600;
}

.mm-shortlist-rank-input {
	width: 4.2rem;
	padding: 0.25rem 0.4rem;
	border: 1px solid var(--mm-border);
	border-radius: var(--mm-radius);
	font-family: inherit;
	font-size: 0.9rem;
}

.mm-shortlist-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.mm-shortlist-handle {
	display: inline-block;
	cursor: grab;
	color: var(--mm-text-muted);
	letter-spacing: -0.15em;
	padding: 0 0.4rem 0 0;
	user-select: none;
}

.mm-programme-card.is-dragging {
	opacity: 0.4;
}

.mm-programme-card.is-drop-before {
	box-shadow: 0 -3px 0 0 var(--mm-green);
}

.mm-programme-card.is-drop-after {
	box-shadow: 0 3px 0 0 var(--mm-green);
}

.mm-programme-card.is-just-moved {
	animation: mm-shortlist-flash 1.5s ease-out;
}

@keyframes mm-shortlist-flash {
	from { background-color: rgba(46, 125, 50, 0.22); }
	to   { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.mm-programme-card.is-just-moved { animation: none; }
}

.mm-shortlist-share-note {
	color: var(--mm-text-muted);
	font-size: 0.85rem;
	margin-top: var(--mm-space-3);
	padding-top: var(--mm-space-2);
	border-top: 1px solid var(--mm-border);
}

/* ---------- Decision summary / "In one minute" (programme detail) ---------- */
.mm-decision-summary {
	background: var(--mm-bg-subtle);
	border-radius: 8px;
	padding: var(--mm-space-2) var(--mm-space-3);
	margin-bottom: var(--mm-space-3);
}

.mm-decision-summary h2 {
	margin-top: 0;
	font-size: 1.05rem;
}

.mm-decision-summary dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.3rem var(--mm-space-2);
	margin: 0;
}

.mm-decision-summary dt {
	color: var(--mm-text-muted);
	font-size: 0.85rem;
}

.mm-decision-summary dd {
	margin: 0;
	font-weight: 600;
}

.mm-evidence-drawer {
	margin-top: var(--mm-space-1);
	font-size: 0.9rem;
}

.mm-evidence-drawer summary {
	cursor: pointer;
	color: var(--mm-accent);
	font-weight: 600;
}

.mm-evidence-drawer-body {
	margin-top: var(--mm-space-1);
	padding-left: var(--mm-space-2);
	border-left: 2px solid var(--mm-border);
	color: var(--mm-text-muted);
}

.mm-not-yet-available {
	color: var(--mm-text-muted);
	font-style: italic;
}

/* ---------- Compare "what's different" summary ---------- */
.mm-compare-diff {
	background: var(--mm-bg-subtle);
	border-radius: 8px;
	padding: var(--mm-space-2) var(--mm-space-3);
	margin: var(--mm-space-2) 0 var(--mm-space-3);
}

.mm-compare-diff h2 {
	margin-top: 0;
	font-size: 1.05rem;
}

.mm-compare-diff ul {
	margin: 0;
	padding-left: 1.2rem;
}

.mm-compare-diff li {
	margin-bottom: 0.4rem;
}

@media (max-width: 640px) {
	.mm-decision-summary dl {
		grid-template-columns: 1fr;
	}
}

/* Institutes overview index (/institutes/, 2026-09-24) */
.mm-institutes-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 1rem 0 1.5rem;
}
.mm-institutes-group {
	margin-bottom: 2rem;
}
.mm-institutes-institute {
	margin: 0.5rem 0;
	padding: 0.25rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.mm-institutes-institute > summary {
	cursor: pointer;
	font-weight: 600;
}