#app
{
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	height: 100svh;
}

.fwh
{
	width: 100% !important;
	height: 100% !important;
}

.fw
{
	width: 100% !important;
}

.fh
{
	height: 100% !important;
}

:-webkit-autofill,
:-webkit-autofill:hover,
:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--mud-palette-text-primary);
	-webkit-box-shadow: 0 0 0px 1000px rgba(var(--mud-palette-info-rgb), 0.1) inset;
	transition: background-color 10000s ease-in-out 0s;
}

.badge {
	transition: transform ease 0.3s;
}

.badge-container:hover .badge {
	transform: translate(0px) !important;
}

.course-box {
	box-shadow: var(--mud-elevation-2);

	transition-property: transform, box-shadow;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}

/* D196: a course box's own colour (MainLayout sets --uop-course-fill and --uop-course-text per mode), apart from the theme's
   purple, which is for actions: lightening the night purple for dialog buttons must not repaint the courses. .mud-paper:
   MudPaper paints its own surface colour otherwise */
.mud-paper.course-fill {
	background-color: var(--uop-course-fill);
	color: var(--uop-course-text);
}

/* D197 (David, option 1): a dialog's purple confirm button is filled, so it stands apart from Cancel: every dialog and
   message box at once (their buttons are purple text buttons). Text 6.00:1 by day (white on the purple), 8.10:1 at night
   (dark on tone 74). A greyed one stays greyed */
.mud-dialog .mud-dialog-actions .mud-button-text.mud-button-text-primary:not(:disabled) {
	padding: 6px 16px;
	background-color: var(--mud-palette-primary);
	color: var(--mud-palette-primary-text);
}

.mud-dialog .mud-dialog-actions .mud-button-text.mud-button-text-primary:not(:disabled):hover {
	background-color: var(--mud-palette-primary-darken);
}

/* D213, WCAG 2.4.7: a button focused from the keyboard shows a ring in the text colour, as the view button and the
   divider do: MudBlazor marks it only by its hover shade (1.05 to 1.43, measured), so Tab moved the focus invisibly
   (David, in Firefox). Against what is behind it, day / night: dialogs 10.05 / 11.78, the page, toolbars and bars
   10.05 / 9.28 or more. On the app bar the ring takes the bar's text colour (6.00 / 11.44); on a course box, the box's
   text colour, drawn inside the button, which overhangs the box's edge (6.00 / 4.17; the page colour was 1.68 by day).
   :focus-visible, so a click or a tap draws none; the class selectors outrank MudBlazor's button:focus { outline: none } */
.mud-button-root:focus-visible {
	outline: 2px solid var(--mud-palette-text-primary);
	outline-offset: 2px;
}

.mud-appbar .mud-button-root:focus-visible {
	outline-color: currentColor;
}

.mud-paper.course-fill .mud-button-root:focus-visible {
	outline-color: var(--uop-course-text);
	outline-offset: -3px;
}

/* D210 (David, option B): a message's text is the page's text colour in both modes; its status colour stays in its border
   and icon. MudBlazor draws the text in the colour's darkened shade (a day warning 3.00), which it also uses for filled
   buttons' hover, so the shade stays and the text colour is set here; :root outranks MudBlazor's rules, whose stylesheet
   loads after ours. Messages (snackbars) are outlined alerts (Program.cs) whose icon has no colour of its own: kept in
   the status colour, as the alerts' icons are */
:root .mud-alert-text-info, :root .mud-alert-text-success, :root .mud-alert-text-warning, :root .mud-alert-text-error,
:root .mud-alert-outlined-info, :root .mud-alert-outlined-success, :root .mud-alert-outlined-warning, :root .mud-alert-outlined-error {
	color: var(--mud-palette-text-primary);
}

:root .mud-alert-outlined-info .mud-snackbar-icon { color: var(--mud-palette-info); }
:root .mud-alert-outlined-success .mud-snackbar-icon { color: var(--mud-palette-success); }
:root .mud-alert-outlined-warning .mud-snackbar-icon { color: var(--mud-palette-warning); }
:root .mud-alert-outlined-error .mud-snackbar-icon { color: var(--mud-palette-error); }

/* D216 (David, option B1): the filled "students see it" chips (Official, Student-Visible) in the quieted Info blue
   (MainLayout sets --uop-status-fill and -text per mode); the Shared chip stays outlined in the Info blue, so the path's
   progress reads hollow, then full. :root outranks MudBlazor's chip colours, whose stylesheet loads after ours */
:root .mud-chip.uop-status-chip {
	background-color: var(--uop-status-fill);
	color: var(--uop-status-text);
}

/* D212: Distance analysis. Each subject boxed in its own colour (--subject-colour, set per subject), 4px apart; satisfied
   solid; missing hatched at 135 degrees in the full colour on a light tint of it, so the subject's hue stays readable (it
   was faded to 30 %, 1.05 to 1.72 against the dialog). The subject line under the bar says the same in words */
.distance-bar {
	display: flex;
	gap: 4px;
	height: 24px;
	margin-bottom: 6px;
}

.distance-subject {
	display: flex;
	min-width: 10px;
	box-sizing: border-box;
	border: 2px solid;
	border-radius: 3px;
	overflow: hidden;
}

.distance-subject .mud-tooltip-root {
	display: block;
	min-width: 0;
	height: 100%;
}

.distance-satisfied,
.distance-missing {
	height: 100%;
}

.distance-satisfied {
	background-color: var(--subject-colour);
}

.distance-missing {
	background-color: color-mix(in srgb, var(--subject-colour) 18%, var(--mud-palette-surface));
	background-image: repeating-linear-gradient(135deg, var(--subject-colour) 0 3px, transparent 3px 9px);
}

.distance-subjects {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	font-size: 0.8125rem;
}

.distance-subject-label {
	white-space: nowrap;
}

.distance-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 2px;
	vertical-align: middle;
}

.input-paper {
	position: relative;
	margin-top: 6px;
	padding: 18.5px 14px;
	border-color: var(--mud-palette-lines-inputs) !important;
}

.input-paper:hover {
	border-color: var(--mud-palette-action-default) !important;
}

.input-paper > span {
	position: absolute;
	transform: translate(-4px, -28px);
	padding: 0px 5px;
	background-color: var(--mud-palette-surface);
}

.mud-dialog-fullscreen {
	overflow-y: auto !important;
}

/* Hides a button's text label on narrow screens, keeping only its
   icon -- used on MyPath's per-draft action buttons (Open, Duplicate,
   Rename, Delete, etc.) so mobile users still see all the actions
   without the row overflowing, while wider screens get the more
   discoverable text label alongside the icon. Purely CSS-driven, no
   Blazor viewport-observer state needed for this. */
.hide-on-mobile {
	display: inline;
}

@media only screen and (max-width: 600px) {
	.hide-on-mobile {
		display: none;
	}
}

/* D189: marks on what an action changed. Colour is never the only cue (WCAG 1.4.1): "+" and "−" badges,
   a label for a change in place, dashed ghosts for what is not there now. After Done they fade in 1 s. */
.change-mark {
	outline: 3px solid transparent;
	outline-offset: 2px;
	transition: outline-color 1s ease;
}

.change-mark-came {
	outline-color: var(--mud-palette-success);
}

.change-mark-changed {
	outline-color: var(--mud-palette-text-primary);
}

.change-mark-goes {
	outline-color: var(--mud-palette-error);
}

.change-badge {
	position: absolute;
	top: -9px;
	left: -9px;
	z-index: 2;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: bold;
	line-height: 1;
	transition: opacity 1s ease;
}

.change-mark-came .change-badge {
	background-color: var(--mud-palette-success);
	color: var(--mud-palette-success-text);
}

.change-mark-goes .change-badge {
	background-color: var(--mud-palette-error);
	color: var(--mud-palette-error-text);
}

.change-label {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	padding: 0 4px;
	border-radius: 3px;
	font-size: 10px;
	white-space: nowrap;
	background-color: var(--mud-palette-text-primary);
	color: var(--mud-palette-background);
	transition: opacity 1s ease;
}

/* after Done: outline, badge and label fade out together */
.change-mark-fading {
	outline-color: transparent;
}

.change-mark-fading .change-badge,
.change-mark-fading .change-label {
	opacity: 0;
}

/* D189: a course the change took out, or where a moved course left: dashed and unfilled, so it reads as "not there now" */
.change-ghost {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 2px dashed var(--mud-palette-error);
	color: var(--mud-palette-error);
	transition: opacity 1s ease;
}

.change-ghost .change-badge {
	background-color: var(--mud-palette-error);
	color: var(--mud-palette-error-text);
}

.change-ghost.change-mark-fading {
	opacity: 0;
}

/* D191: in Undo all's preview, a course it will bring back: dashed (not there now), green with "+" (comes) */
.change-ghost-coming {
	border-color: var(--mud-palette-success);
	color: var(--mud-palette-success);
}

.change-ghost-coming .change-badge {
	background-color: var(--mud-palette-success);
	color: var(--mud-palette-success-text);
}

/* D191 Show: the course a review line is about. Hovering or focusing the line outlines it in the neutral colour at
   once; Show pulses its outline 3 times (the outline swells outward and back) */
.change-mark-pointed {
	outline-color: var(--mud-palette-text-primary);
	outline-width: 4px;
	transition-duration: 0s;
}

.change-mark-pulse {
	animation: change-mark-pulse 0.5s ease-in-out 3;
}

@keyframes change-mark-pulse {
	50% {
		outline-offset: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.change-mark,
	.change-badge,
	.change-label,
	.change-ghost {
		transition: none;
	}

	/* no pulse: a steady neutral outline for as long as the pulse would last */
	.change-mark-pulse {
		animation: none;
		outline-color: var(--mud-palette-text-primary);
		outline-width: 4px;
	}
}

/* D189 review panel: floats over the course grid, dragged by its header (reviewPanel.js); above the course codes (z-50).
   D206: it opens 16px from the terms' bottom right, or bottom left if the view button is there (reviewPanel.js) */
.review-panel {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 60;
	width: min(360px, calc(100% - 32px));
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: var(--mud-default-borderradius);
	background-color: var(--mud-palette-surface);
	box-shadow: var(--mud-elevation-8);
}

.review-panel-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 4px 4px 8px;
	cursor: move;
	touch-action: none;
	user-select: none;
}

/* about five lines, then the list scrolls */
.review-panel-lines {
	max-height: 8.75rem;
	overflow-y: auto;
	padding: 4px 12px;
	border-top: 1px solid var(--mud-palette-lines-default);
}

.review-panel-line {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 2px 0;
}

/* the whole line acts as Show (WCAG 2.5.8); the Show button stays the keyboard stop */
.review-panel-line-showable {
	cursor: pointer;
}

.review-panel-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 4px 12px 8px;
}

/* B119: Show is a button (reachable by Tab) that reads as a link: underlined, in the panel's text colour (the night
   purple is 2.83:1 on the panel, B91; the text colour is 10.05 by day, 6.67 by night) */
.review-panel-show {
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	color: var(--mud-palette-text-primary);
	text-decoration: underline;
}

.review-panel-show:hover {
	text-decoration-thickness: 2px;
}

/* D191: the line whose course is outlined in the grid is highlighted here too; one source (the editor), so they agree */
.review-panel-line-pointed {
	background-color: rgba(var(--mud-palette-primary-rgb), 0.08);
	border-radius: 4px;
}

/* WCAG 2.4.7: the keyboard focus on Show is visible */
.review-panel-show:focus-visible {
	outline: 2px solid var(--mud-palette-text-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

/* B108: while dragging, "can place" and "can't place" differ by shape as well as colour (WCAG 1.4.1): a term that can
   take the course has a solid green border; one that can't has a dashed red border and light diagonal stripes.
   !important: each drop zone sets a transparent border inline until a drag starts */
.drop-zone-allowed {
	border-color: var(--mud-palette-success) !important;
	border-style: solid !important;
}

.drop-zone-refused {
	border-color: var(--mud-palette-error) !important;
	border-style: dashed !important;
	background-image: repeating-linear-gradient(135deg, rgba(var(--mud-palette-error-rgb), 0.12) 0 6px, transparent 6px 14px);
}

/* D196 (D183 slice 2): the path title in the app bar while the editor is open (EditorTopBar): at most 600px, its name
   ending in "…" when the bar has folded everything else, its [Original] or [Corrected] never shortened. A hover shows it
   in full; a click or tap the pop-up with the prerequisites' source. Text keeps the bar's own colour */
.editor-bar-title {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.editor-bar-title-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
}

.editor-bar-title-button {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	min-height: 40px;
	padding: 0 4px;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* the name truncates here, not in the button: a button centres overflowing content, clipping both ends */
.editor-bar-title-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* WCAG 2.4.7: the keyboard focus on the title is visible, in the bar's text colour */
.editor-bar-title-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

.editor-bar-readonly {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0 8px;
	border: 1px solid currentColor;
	border-radius: 16px;
	white-space: nowrap;
}

/* D196, the bar's step 6: the title and its [Original] or [Corrected] at 14px (AppBarFit.TitleSizeSmall) before the name
   ends in "…" */
.editor-bar-title-small .editor-bar-title-button,
.editor-bar-title-small .editor-bar-source {
	font-size: 14px;
}

/* [Original] or [Corrected] after the title: always shown in full; its explanation on hover */
.editor-bar-source {
	flex: none;
	white-space: nowrap;
	cursor: help;
}

/* D196: the site's name over a small centred BETA, taking only the name's width, with a space on each side. A brand
   mark, not a control (WCAG 1.4.3 exempts logotypes): both are faint, toward the edge of visibility: the name in the
   greyed controls' grey (--uop-greyed), BETA in a muted orange a touch clearer (MainLayout.BetaColour) */
.app-bar-site {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 16px;
	user-select: none;
}

.app-bar-site .app-bar-name {
	line-height: 1.1;
	font-size: 20px;	/* David, option b */
	color: var(--uop-greyed);
}

.app-bar-site .app-bar-beta {
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.15em;
}

/* D196: the terms' labels, season over year: content, so readable (about 8.5:1 by day, 7.6:1 at night), but quieter than
   the courses (David, after a preview) */
.term-label {
	color: var(--uop-term-label);
	line-height: 1.25;
}

/* a greyed button in the bar takes the page's greyed colour (--uop-greyed, set by MainLayout per mode): MudBlazor's own
   (black at 38%, D188 decision 10) is see-through and reads as a dark smudge on the bar's purple */
.mud-appbar .mud-icon-button:disabled {
	color: var(--uop-greyed) !important;
}

/* the pop-up under the title, above a layer that closes it on a click or tap anywhere else (WCAG 1.4.13: dismissible) */
.editor-bar-details-away {
	position: fixed;
	inset: 0;
	z-index: 1;
}

.editor-bar-details {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	width: max-content;
	max-width: min(360px, calc(100vw - 32px));
	padding: 12px 16px;
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: var(--mud-default-borderradius);
	background-color: var(--mud-palette-surface);
	color: var(--mud-palette-text-primary);
	box-shadow: var(--mud-elevation-8);
	white-space: normal;
	text-align: left;
}

/* the title (40px tall) is centred in the bar: the pop-up starts at the bar's bottom edge, not the title's */
.mud-appbar .editor-bar-details {
	top: calc(100% + 8px);
}

.mud-appbar-dense .editor-bar-details {
	top: calc(100% + 4px);
}

/* on a narrow screen the title is not centred, so a centred pop-up could run off an edge: it spans the screen instead,
   16px from each side, just under the bar (fixed to the screen: the bar itself is fixed and untransformed) */
@media (max-width: 599.98px) {
	.mud-appbar .editor-bar-details {
		position: fixed;
		top: var(--mud-appbar-height);
		left: 16px;
		right: 16px;
		width: auto;
		max-width: none;
		transform: none;
	}

	/* the dense (folded) bar is a quarter shorter, as MudBlazor computes it */
	.mud-appbar.mud-appbar-dense .editor-bar-details {
		top: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
	}
}

/* D196 (D183): the bar's zoom while the editor shows one view at a time: − value + (and Fit) while there is room; from the
   bar's step 4 its value with a menu of levels (David) */
.editor-bar-zoom {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
}

.editor-bar-zoom-button {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	min-height: 40px;
	padding: 0 6px;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	white-space: nowrap;
}

/* WCAG 2.4.7 */
.editor-bar-zoom-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* D206: the divider between the terms and Course Relations: a thin line with a 24px grab zone (WCAG 2.5.8) that overlaps
   both halves by 12px, and a grip at mid-height; dragged, or moved with ← → once focused (WAI-ARIA window splitter) */
.view-divider {
	position: relative;
	flex: 0 0 24px;
	margin: 0 -12px;
	z-index: 5;
	cursor: col-resize;
	touch-action: none;
	user-select: none;
}

.view-divider::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 11.5px;
	width: 1px;
	background-color: var(--mud-palette-lines-default);
}

.view-divider-grip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 4px 0;
	font-size: 20px;
	line-height: 1;
	color: var(--mud-palette-text-secondary);
	background-color: var(--mud-palette-background);
}

/* WCAG 2.4.7 */
.view-divider:focus-visible {
	outline: 2px solid var(--mud-palette-text-primary);
	outline-offset: -2px;
}

/* D207: the view button, an extended button naming the next view in the views' teal (--uop-view-fill, set by MainLayout per
   mode), at the course area's bottom right until moved; icon-only and 36px on a phone. viewButton.js places it (right,
   bottom), lifts it (data-lifted) and shows its home ring (data-shown). D206: pressing and holding it never scrolls,
   selects text or opens a long-press pop-up (Safari: -webkit-touch-callout) */
.view-button {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 999;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 0 20px 0 16px;
	border: none;
	border-radius: 28px;
	background-color: var(--uop-view-fill);
	color: var(--uop-view-text);
	box-shadow: var(--mud-elevation-6);
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.view-button:hover {
	box-shadow: var(--mud-elevation-8);
}

.view-button.view-button-icon-only {
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
}

/* lifted by a 500ms hold: about 10% larger, a deeper shadow */
.view-button[data-lifted] {
	transform: scale(1.1);
	box-shadow: var(--mud-elevation-12);
	cursor: grabbing;
}

/* WCAG 2.4.7 */
.view-button:focus-visible {
	outline: 2px solid var(--mud-palette-text-primary);
	outline-offset: 2px;
}

/* D205: the button's home, shown only while it is dragged: a dashed ring of its size, solid once the button is near
   enough to go home when dropped */
.view-button-home {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 998;
	display: none;
	box-sizing: border-box;
	border: 2px dashed var(--uop-view-fill);
	border-radius: 28px;
	pointer-events: none;
}

.view-button-home[data-shown] {
	display: block;
}

.view-button-home[data-near] {
	border-style: solid;
	border-width: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.view-button {
		transition: none;
	}
}

/* R3: the admin pages' group filters: the list at least 320px wide, as wide as its longest group name, never wider
   than the screen, one line per group (MudBlazor 6.17 otherwise sizes it to the select's box) */
.uop-group-filter-list {
	min-width: 320px !important;
	width: auto !important;
	max-width: calc(100vw - 32px) !important;
}

.uop-group-filter-list .mud-list-item {
	white-space: nowrap;
}