/* =========================================================
   HP CLASSROOM
   Main Application Stylesheet

   Typography:
   - Montserrat: interface, navigation, titles, buttons
   - Inter: body copy, feed posts, comments, forms
   - Josefin Sans: occasional large accent text only

   Keep this file readable. Major areas are divided into
   clearly labeled sections so future changes are easy to find.
   ========================================================= */


/* =========================================================
   1. FONTS
   ========================================================= */

@font-face
{
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype'),
		 url('../fonts/montserrat.ttf') format('truetype');
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
}

@font-face
{
	font-family: 'Inter';
	src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype'),
		 url('../fonts/Inter-VariableFont_wght.ttf') format('truetype'),
		 url('../fonts/inter.ttf') format('truetype');
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
}

@font-face
{
	font-family: 'Josefin Sans';
	src: url('../fonts/JosefinSans-VariableFont_wght.ttf') format('truetype'),
		 url('../fonts/josefin-sans.ttf') format('truetype');
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
}


/* =========================================================
   2. DESIGN VARIABLES
   ========================================================= */

:root
{
	/* Fonts */
	--font-interface: 'Montserrat', Arial, sans-serif;
	--font-reading: 'Inter', Arial, sans-serif;
	--font-accent: 'Josefin Sans', Arial, sans-serif;

	/* School colors */
	--color-blue: #173f77;
	--color-blue-dark: #12345f;
	--color-blue-light: #e9f0f9;

	--color-red: #c8293a;
	--color-red-dark: #a92331;
	--color-red-light: #fbeaec;

	/* Current course/section theme. PHP overrides these on course pages. */
	--course-dark: var(--color-blue);
	--course-light: var(--color-blue-light);
	--course-accent: var(--color-red);
	--course-photo-position: center center;

	/* Neutrals */
	--color-white: #ffffff;
	--color-page: #eef1f4;
	--color-gray-050: #fafbfc;
	--color-gray-100: #f5f7f9;
	--color-gray-200: #edf0f2;
	--color-gray-300: #dde2e7;
	--color-gray-400: #cbd3db;
	--color-gray-500: #89919a;
	--color-gray-600: #68737d;
	--color-gray-700: #374151;
	--color-text: #202936;

	/* Layout */
	--page-width: 1400px;
	--sidebar-width: 320px;
	--page-gap: 26px;

	/* Corners */
	--radius-small: 6px;
	--radius-medium: 9px;
	--radius-large: 10px;

	/* Shadows */
	--shadow-card: 0 7px 22px rgba(24, 39, 55, 0.14);
	--shadow-control: 0 3px 10px rgba(24, 39, 55, 0.12);
	--shadow-hover: 0 10px 28px rgba(24, 39, 55, 0.18);

	/* Type sizing */
	--font-size-small: .75rem;
	--font-size-meta: .82rem;
	--font-size-body: 1rem;
}


/* =========================================================
   3. RESET / GLOBAL
   ========================================================= */

*
{
	box-sizing: border-box;
}

html
{
	font-size: 16px;
}

body
{
	margin: 0;
	background: var(--color-page);
	color: var(--color-text);
	font-family: var(--font-reading);
	font-size: var(--font-size-body);
	font-weight: 400;
	line-height: 1.5;
}

a
{
	color: inherit;
}

button,
select,
input,
textarea
{
	font: inherit;
}

button,
select
{
	font-family: var(--font-interface);
}

code
{
	font-family: Consolas, Monaco, monospace;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	margin-top: 0;
	font-family: var(--font-interface);
	color: var(--course-dark);
	font-weight: 600;
}

p
{
	line-height: 1.65;
}


/* =========================================================
   4. ACCESSIBILITY / SMALL UTILITIES
   ========================================================= */

.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.eyebrow
{
	font-family: var(--font-interface);
	color: #7b8490;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.special-heading
{
	font-family: var(--font-accent);
	font-size: 2.2rem;
	font-weight: 300;
	letter-spacing: .02em;
}


/* =========================================================
   5. APPLICATION HEADER
   ========================================================= */

.app-header
{
	background: var(--color-white);
	border-bottom: 1px solid #dce1e6;
}

.app-header-inner
{
	width: min(var(--page-width), calc(100% - 40px));
	height: 82px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
}

.brand
{
	display: flex;
	align-items: center;
	min-width: 0;
	text-decoration: none;
}

.brand img
{
	display: block;
	width: auto;
	height: 56px;
	max-width: 300px;
	object-fit: contain;
}

.header-course
{
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	padding-left: 18px;
	border-left: 1px solid #e4e7ea;
}

.header-course-text
{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.header-course-name
{
	font-family: var(--font-interface);
	color: var(--course-dark);
	font-size: 1.02rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-course-section
{
	margin-top: 2px;
	font-family: var(--font-interface);
	color: var(--color-gray-500);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .03em;
}
.section-form
{
	margin: 0;
}

.section-switcher
{
	min-width: 110px;
	padding: 7px 30px 7px 10px;
	border: 1px solid #d5dce3;
	border-radius: 7px;
	background: var(--color-white);
	color: #31445a;
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 500;
	cursor: pointer;
}

.header-user
{
	margin-left: auto;
}

.user-button
{
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 8px;
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-weight: 500;
	cursor: pointer;
}

.user-button:hover
{
	background: #f1f3f5;
}

.user-button img
{
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: #dfe4e8;
}

.user-name
{
	font-weight: 600;
}

.user-chevron
{
	color: #7c8791;
}


/* =========================================================
   6. COURSE NAVIGATION
   ========================================================= */

.course-nav
{
	background: var(--course-dark);
	color: var(--color-white);
}

.course-nav-inner
{
	width: min(var(--page-width), calc(100% - 40px));
	margin: 0 auto;
	display: flex;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
}

.course-nav-inner::-webkit-scrollbar
{
	display: none;
}

.course-nav a
{
	flex: 0 0 auto;
	padding: 15px 18px;
	border-bottom: 3px solid transparent;
	font-family: var(--font-interface);
	font-size: .88rem;
	font-weight: 500;
	letter-spacing: .01em;
	text-decoration: none;
}

.course-nav a:hover
{
	background: rgba(255, 255, 255, .08);
}

.course-nav a.active
{
	background: rgba(255, 255, 255, .1);
	border-bottom-color: var(--course-accent);
	font-weight: 600;
}


/* =========================================================
   7. MOBILE COURSE CONTEXT
   ========================================================= */

.mobile-course-context
{
	display: none;
}


/* =========================================================
   8. MAIN PAGE LAYOUT
   ========================================================= */

.page-shell
{
	width: min(var(--page-width), calc(100% - 40px));
	margin: 26px auto 60px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
	gap: var(--page-gap);
	align-items: start;
}

.feed-column
{
	min-width: 0;
}

.feed-heading
{
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 18px;
}

.feed-heading h1
{
	margin: 2px 0 0;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: -.015em;
}

.primary-button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 7px;
	padding: 10px 18px;
	background: var(--course-accent);
	color: var(--color-white);
	font-family: var(--font-interface);
	font-size: .88rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.primary-button:hover
{
	filter: brightness(.9);
}


/* =========================================================
   9. SYSTEM MESSAGES
   ========================================================= */

.system-message
{
	margin-bottom: 18px;
	padding: 13px 15px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 1px solid #d8e0e8;
	border-radius: var(--radius-medium);
	background: var(--color-white);
}

.system-message-warning
{
	border-left: var(--radius-medium) solid var(--color-red);
}

.system-message-success
{
	border-left: var(--radius-medium) solid #2d8a57;
}

.system-message strong
{
	font-family: var(--font-interface);
	font-weight: 600;
}

.system-message span
{
	color: #626e79;
	font-size: .88rem;
	line-height: 1.45;
}


/* =========================================================
   10. FEED POSTS
   ========================================================= */

.feed-post
{
	margin-bottom: 18px;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--course-dark);
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-card);
}

.feed-post-pinned
{
	box-shadow: 0 4px 14px rgba(24, 39, 55, .11);
}

.feed-post-header
{
	padding: 20px 22px 16px;
	display: flex;
	gap: 16px;
	align-items: center;
	border-bottom: 1px solid var(--color-gray-400);
}

.feed-post-header h2
{
	margin: 0 0 5px;
	font-size: 1.22rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.post-title-group
{
	min-width: 0;
	flex: 1;
}

.post-kicker
{
	display: flex;
	gap: 6px;
	margin-bottom: 3px;
}

.pin-label,
.no-class-label
{
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pin-label
{
	background: var(--course-light);
	color: var(--course-dark);
}

.no-class-label
{
	background: var(--color-red-light);
	color: #a42333;
}

.post-menu-button
{
	margin-left: auto;
	align-self: flex-start;
	border: 0;
	background: transparent;
	color: #6d7883;
	font-family: var(--font-interface);
	font-weight: 600;
	letter-spacing: .06em;
	cursor: pointer;
}


/* =========================================================
   11. FEED POST DATE
   ========================================================= */

.post-date
{
	width: 48px;
	min-width: 48px;
	overflow: hidden;
	text-align: center;
	border: 1px solid #d9dee4;
	border-radius: 7px;
}

.post-month
{
	display: block;
	padding: 4px 3px;
	background: var(--course-accent);
	color: var(--color-white);
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .08em;
}

.post-day
{
	display: block;
	padding: 5px 3px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1.2rem;
	font-weight: 600;
}

.post-meta
{
	color: #7c858f;
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 500;
}


/* =========================================================
   12. FEED POST CONTENT
   ========================================================= */

.feed-post-body
{
	padding: 20px 22px;
}

.post-content
{
	color: #2f3d4c;
	font-family: var(--font-reading);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.65;
}


/* =========================================================
   13. FEED ATTACHMENTS
   ========================================================= */

.attachment-list
{
	margin-top: 18px;
	display: grid;
	gap: 8px;
}

.attachment-card
{
	padding: 12px 14px;
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: 8px;
	background: var(--color-gray-050);
	text-decoration: none;
}

.attachment-card:hover
{
	background: #f5f8fb;
	border-color: #cbd5df;
}

.attachment-text
{
	min-width: 0;
	flex: 1;
}

.attachment-card strong
{
	display: block;
	color: #26374a;
	font-family: var(--font-interface);
	font-size: .88rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.attachment-card span
{
	display: block;
	margin-top: 2px;
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-size: .76rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.attachment-icon
{
	width: 54px;
	min-width: 54px;
	height: 54px;
	display: grid;
	place-items: center;
	color: var(--course-dark);
	flex-shrink: 0;
}

.attachment-icon svg
{
	width: 36px;
	height: 36px;
	display: block;
}

.attachment-icon-audio svg,
.attachment-icon-link svg,
.attachment-icon-video svg,
.attachment-icon-embed svg
{
	width: 34px;
	height: 34px;
}

.attachment-arrow
{
	color: #627487 !important;
	font-size: 1.45rem !important;
}


/* =========================================================
   14. FEED POST ACTIONS
   ========================================================= */

.feed-post-footer
{
	padding: 12px 22px;
	display: flex;
	gap: 18px;
	align-items: center;
	border-top: 1px solid var(--color-gray-400);
}

.feed-post-footer button
{
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 500;
	cursor: pointer;
}

.post-visibility
{
	margin-left: auto;
	color: #9098a0;
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .03em;
}


/* =========================================================
   15. WIDGET COLUMN
   ========================================================= */

.widget-column
{
	display: grid;
	gap: 16px;
}

.widget
{
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	box-shadow: 0 3px 10px rgba(24, 39, 55, .08);
}

.widget-title
{
	padding: 12px 15px;
	background: #f7f8f9;
	border-bottom: 1px solid #e3e7eb;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.widget-bell-work
{
	border-top: var(--radius-large) solid var(--course-accent);
}

.widget-body
{
	padding: 15px;
}

.widget-body strong
{
	font-family: var(--font-interface);
	font-weight: 600;
}

.widget-body p
{
	margin: 7px 0 0;
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.55;
}

.widget-date
{
	margin-bottom: 4px;
	color: var(--course-accent);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.widget-subtitle
{
	margin-top: 4px;
	color: #8a929a;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 500;
}

.widget-link
{
	display: block;
	padding: 10px 15px;
	border-top: 1px solid var(--color-gray-200);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 600;
	text-decoration: none;
}


/* =========================================================
   16. UPCOMING EVENTS WIDGET
   ========================================================= */

.upcoming-item
{
	padding: 12px 15px;
	display: flex;
	gap: 11px;
	align-items: center;
	border-bottom: 1px solid var(--color-gray-200);
}

.upcoming-date-box
{
	width: 42px;
	min-width: 42px;
	text-align: center;
	border: 1px solid #f0d2d6;
	border-radius: 6px;
	overflow: hidden;
}

.upcoming-date-box span
{
	display: block;
	padding: 3px;
	background: var(--color-red-light);
	color: #b22436;
	font-family: var(--font-interface);
	font-size: .56rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.upcoming-date-box strong
{
	display: block;
	padding: 3px;
	color: var(--color-blue);
	font-family: var(--font-interface);
	font-weight: 600;
}

.upcoming-copy
{
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.upcoming-copy strong
{
	color: #2a3a4b;
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
}

.upcoming-copy span
{
	margin-top: 2px;
	color: #8a929a;
	font-family: var(--font-reading);
	font-size: .72rem;
}


/* =========================================================
   17. QUICK LINKS WIDGET
   ========================================================= */

.quick-links
{
	padding: 7px 0;
}

.quick-links a
{
	display: block;
	padding: 8px 15px;
	color: #17487f;
	font-family: var(--font-interface);
	font-size: .84rem;
	font-weight: 500;
	text-decoration: none;
}

.quick-links a:hover
{
	background: var(--color-gray-100);
}


/* =========================================================
   18. EMPTY STATES
   ========================================================= */

.empty-state
{
	padding: 36px;
	text-align: center;
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
}

.empty-state h2
{
	margin: 0 0 8px;
	font-weight: 600;
}

.empty-state p
{
	margin: 0;
	color: #7a838d;
}


/* =========================================================
   19. PLACEHOLDER / SIMPLE MODULE PAGES
   ========================================================= */

.simple-page-shell
{
	width: min(1000px, calc(100% - 40px));
	margin: 40px auto 70px;
}

.placeholder-card
{
	padding: 34px;
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-card);
}

.placeholder-card h1
{
	margin: 4px 0 12px;
	font-weight: 600;
}

.placeholder-card p
{
	max-width: 700px;
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	line-height: 1.65;
}

.text-button
{
	display: inline-block;
	margin-top: 12px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-weight: 600;
	text-decoration: none;
}


/* =========================================================
   20. DEVELOPMENT / DATABASE CHECK
   ========================================================= */

.error-detail
{
	padding: 14px;
	overflow-x: auto;
	border-radius: 6px;
	background: var(--color-text);
	color: var(--color-white);
	font-size: .78rem;
}

.check-table
{
	width: 100%;
	margin: 18px 0;
	border-collapse: collapse;
}

.check-table th,
.check-table td
{
	padding: 10px 12px;
	border-bottom: 1px solid #e5e9ed;
	text-align: left;
}

.check-table th
{
	font-family: var(--font-interface);
	font-weight: 600;
}

.check-table td
{
	font-family: var(--font-reading);
}

.check-table th:last-child,
.check-table td:last-child
{
	text-align: right;
}


/* =========================================================
   21. FOOTER
   ========================================================= */

.site-footer
{
	border-top: 1px solid #dfe4e8;
	background: var(--color-white);
	color: #7b8490;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 500;
}

.site-footer-inner
{
	width: min(var(--page-width), calc(100% - 40px));
	min-height: 54px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}


/* =========================================================
   22. TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 850px)
{
	.publishing-layout
	{
		grid-template-columns: 1fr;
	}

	.app-header-inner
	{
		width: calc(100% - 24px);
		height: 70px;
		gap: 12px;
	}

	.brand img
	{
		height: 54px;
		max-width: 260px;
	}

	.header-course
	{
		display: none;
	}

	.user-name
	{
		display: none;
	}

	.course-nav-inner
	{
		width: 100%;
		padding: 0 6px;
	}

	.course-nav a
	{
		padding: 13px 13px;
		font-size: .82rem;
	}

	.mobile-course-context
	{
		padding: 11px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		background: var(--color-white);
		border-bottom: 1px solid var(--color-gray-300);
	}

	.mobile-course-context > div
	{
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	.mobile-course-context strong
	{
		color: var(--color-blue);
		font-family: var(--font-interface);
		font-size: .84rem;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.mobile-course-context span
	{
		margin-top: 2px;
		color: var(--color-gray-500);
		font-family: var(--font-interface);
		font-size: .68rem;
		font-weight: 500;
	}

	.mobile-course-context .section-switcher
	{
		min-width: 100px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.page-shell
	{
		width: calc(100% - 22px);
		margin-top: 18px;
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.feed-heading h1
	{
		font-size: 1.5rem;
	}

	.simple-page-shell
	{
		width: calc(100% - 22px);
		margin-top: 22px;
	}

	.site-footer-inner
	{
		width: calc(100% - 24px);
	}
}


/* =========================================================
   23. MOBILE
   ========================================================= */

@media (max-width: 520px)
{
	body
	{
		background: #f1f3f5;
	}

	.app-header-inner
	{
		width: calc(100% - 20px);
	}

	.brand img
	{
		height: 50px;
		max-width: 235px;
	}

	.feed-heading
	{
		align-items: center;
	}

	.primary-button
	{
		padding: 9px 13px;
		font-size: .8rem;
	}

	.feed-post-header
	{
		padding: 16px;
		align-items: flex-start;
	}

	.feed-post-body
	{
		padding: 16px;
	}

	.feed-post-footer
	{
		padding: 11px 16px;
		gap: 14px;
	}

	.post-visibility
	{
		display: none;
	}

	.placeholder-card
	{
		padding: 22px;
	}
}


/* =========================================================
   24. CLASSROOM ITEMS INSIDE FEED POSTS
   ========================================================= */

.classroom-item-card
{
	position: relative;
	margin-bottom: 18px;
	padding: 13px 42px 13px 15px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border: 1px solid var(--color-gray-300);
	border-left-width: var(--radius-medium);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
	text-decoration: none;
}

.classroom-item-card:hover
{
	background: var(--color-gray-100);
}

.classroom-item-card-bell
{
	border-left-color: var(--color-red);
}

.classroom-item-card-exit
{
	margin-top: 18px;
	margin-bottom: 0;
	border-left-color: var(--color-blue);
}

.classroom-item-label
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.classroom-item-card strong
{
	color: var(--color-blue);
	font-family: var(--font-interface);
	font-size: .9rem;
	font-weight: 600;
}

.classroom-item-open
{
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 500;
}

.widget-primary-link
{
	display: inline-block;
	color: var(--color-blue);
	font-family: var(--font-interface);
	font-size: .86rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.widget-primary-link:hover
{
	text-decoration: underline;
}


/* =========================================================
   25. POST EDITOR / FORMS
   ========================================================= */

.editor-page-shell
{
	width: min(1050px, calc(100% - 40px));
	margin: 28px auto 70px;
}

.editor-page-heading
{
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.editor-page-heading h1
{
	margin: 2px 0 0;
	font-size: 1.8rem;
	font-weight: 600;
}

.post-editor
{
	display: grid;
	gap: 16px;
}

.editor-card
{
	padding: 22px;
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	box-shadow: var(--shadow-card);
}

.editor-card-compact
{
	padding-top: 18px;
	padding-bottom: 18px;
}

.editor-card-heading
{
	margin-bottom: 20px;
}

.editor-card-heading h2
{
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
}

.editor-card-heading p
{
	margin: 4px 0 0;
	color: var(--color-gray-600);
	font-size: .86rem;
	line-height: 1.5;
}

.form-grid
{
	display: grid;
	gap: 16px;
}

.form-grid-two
{
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.form-field
{
	min-width: 0;
}

.form-field + .form-field
{
	margin-top: 16px;
}

.form-grid .form-field + .form-field,
.attachment-editor-grid .form-field + .form-field,
.publishing-options .form-field + .form-field
{
	margin-top: 0;
}

.form-field label
{
	display: block;
	margin-bottom: 7px;
	color: #31445a;
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 600;
}

.optional-label
{
	margin-left: 4px;
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-size: .72rem;
	font-weight: 400;
}

.form-control
{
	width: 100%;
	padding: 10px 11px;
	border: 1px solid #ccd5de;
	border-radius: 7px;
	outline: none;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-reading);
	font-size: .92rem;
	font-weight: 400;
}

select.form-control
{
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 500;
}

.form-control:focus
{
	border-color: #7194bf;
	box-shadow: 0 0 0 3px rgba(23, 63, 119, .08);
}

.post-textarea
{
	min-height: 210px;
	resize: vertical;
	line-height: 1.65;
}

.link-textarea
{
	resize: vertical;
	line-height: 1.5;
}

.file-control
{
	padding: 8px;
}

.form-help
{
	margin-top: 7px;
	color: var(--color-gray-500);
	font-size: .76rem;
	line-height: 1.45;
}

.attachment-editor-grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.publishing-options
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.secondary-button
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 15px;
	border: 1px solid #ccd5de;
	border-radius: 7px;
	background: var(--color-white);
	color: #425466;
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.secondary-button:hover
{
	background: var(--color-gray-100);
}

.primary-button-large
{
	min-width: 150px;
	padding-top: 11px;
	padding-bottom: 11px;
}

.editor-actions
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}


/* =========================================================
   26. BELL WORK / EXIT TICKET - SHARED SMALL UI
   ========================================================= */

.class-day-item-icon
{
	width: 40px;
	min-width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 7px;
	background: var(--color-red);
	color: var(--color-white);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.class-day-item-copy
{
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
}

.class-day-item-copy strong
{
	color: #31445a;
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 600;
}

.class-day-item-copy span
{
	margin-top: 2px;
	color: var(--color-gray-600);
	font-size: .82rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* =========================================================
   27. POST EDITOR - MOBILE
   ========================================================= */

@media (max-width: 700px)
{
	.editor-page-shell
	{
		width: calc(100% - 22px);
		margin-top: 18px;
	}

	.editor-page-heading h1
	{
		font-size: 1.5rem;
	}

	.editor-card
	{
		padding: 17px;
	}

	.form-grid-two,
	.attachment-editor-grid,
	.publishing-options
	{
		grid-template-columns: 1fr;
	}

	.attachment-editor-grid .form-field + .form-field,
	.publishing-options .form-field + .form-field
	{
		margin-top: 0;
	}

	.class-day-item
	{
		align-items: flex-start;
	}

	.association-check
	{
		align-self: center;
	}
}

@media (max-width: 460px)
{
	.editor-page-heading .secondary-button
	{
		display: none;
	}

	.editor-actions
	{
		justify-content: stretch;
	}

	.editor-actions .secondary-button,
	.editor-actions .primary-button
	{
		flex: 1;
	}

	.class-day-item-icon
	{
		display: none;
	}

	.class-day-item-copy span
	{
		white-space: normal;
	}
}

/* =========================================================
   28. DRAFT FEED POSTS
   ========================================================= */

.feed-post-draft
{
	background: #fcfcfd;
}

.draft-label
{
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	background: #f3eee2;
	color: #7a5b18;
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* =========================================================
   29. FEED IMAGE GALLERIES
   ========================================================= */

.feed-image-grid
{
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 7px;
	overflow: hidden;
	border-radius: 8px;
}

.feed-image-grid-1
{
	grid-template-columns: 1fr;
}

.feed-image-link
{
	min-width: 0;
	min-height: 210px;
	display: block;
	overflow: hidden;
	background: #e6eaee;
}

.feed-image-link img
{
	width: 100%;
	height: 100%;
	min-height: 210px;
	max-height: 460px;
	display: block;
	object-fit: cover;
}

.feed-image-grid-1 .feed-image-link img
{
	height: auto;
	max-height: 620px;
	object-fit: contain;
	background: #f1f3f5;
}

@media (max-width: 520px)
{
	.feed-image-grid
	{
		grid-template-columns: 1fr;
	}

	.feed-image-link,
	.feed-image-link img
	{
		min-height: 180px;
	}
}

/* =========================================================
   30. SCHEDULED POSTS
   ========================================================= */

.feed-post-scheduled
{
	border-top-color: var(--course-dark);
}

.scheduled-label
{
	display: inline-block;
	padding: 2px 6px;
	border-radius: 4px;
	background: #eceef9;
	color: #485896;
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.post-schedule-note
{
	margin-top: 5px;
	color: #59689c;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 500;
}


/* =========================================================
   31. BELL WORK / EXIT TICKET - SIMPLE POST ATTACHMENTS
   ========================================================= */

.class-day-simple-list
{
	display: grid;
	gap: 14px;
}

.class-day-simple-item
{
	padding: 16px;
	border: 1px solid var(--color-gray-300);
	border-radius: 9px;
	background: var(--color-gray-050);
}

.class-day-simple-heading
{
	display: flex;
	align-items: center;
	gap: 12px;
}

.class-day-item-icon-exit
{
	background: var(--color-blue) !important;
}

.class-day-item-view,
.class-day-edit-button
{
	margin-left: auto;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	white-space: nowrap;
}

.class-day-item-view
{
	color: var(--color-blue);
	text-decoration: none;
}

.class-day-item-view:hover
{
	text-decoration: underline;
}

.class-day-edit-button
{
	margin-left: 4px;
	padding: 5px 8px;
	border: 1px solid var(--color-gray-300);
	border-radius: 6px;
	background: var(--color-white);
	color: var(--color-blue);
	cursor: pointer;
}

.class-day-edit-button:hover
{
	background: var(--color-gray-100);
}

.class-day-include-row
{
	margin-top: 13px;
	display: flex;
	align-items: center;
	gap: 9px;
	color: #344456;
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 500;
	cursor: pointer;
}

.class-day-include-row input
{
	margin: 0;
}

.class-day-include-row input:disabled + span
{
	color: var(--color-gray-500);
}

.class-day-item-editor
{
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--color-gray-300);
}

.class-day-item-editor[hidden]
{
	display: none;
}

/* =========================================================
   32. FILE / RESOURCE METADATA EDITOR
   ========================================================= */

.resource-editor-list
{
	margin-top: 16px;
	display: grid;
	gap: 12px;
}

.resource-editor-card
{
	border: 1px solid var(--color-gray-300);
	border-radius: 9px;
	background: var(--color-gray-050);
	box-shadow: 0 2px 6px rgba(24, 39, 55, .07);
}

.file-resource-editor-card
{
	padding: 14px;
}

.resource-editor-card-header
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}

.resource-editor-source
{
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.resource-editor-source strong
{
	min-width: 0;
	color: #344456;
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.resource-editor-source small
{
	width: 100%;
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-size: .7rem;
	overflow-wrap: anywhere;
}

.resource-editor-badge
{
	padding: 3px 6px;
	border-radius: 4px;
	background: var(--color-blue);
	color: var(--color-white);
	font-family: var(--font-interface);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.resource-editor-remove
{
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-red);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	cursor: pointer;
}

.resource-editor-fields
{
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.resource-editor-field
{
	display: grid;
	gap: 5px;
	color: #394a5b;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
}

.resource-editor-field em
{
	color: var(--color-gray-500);
	font-style: normal;
	font-weight: 400;
}

.small-text-button
{
	justify-self: start;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	cursor: pointer;
}

.small-text-button:hover
{
	text-decoration: underline;
}


/* =========================================================
   33. LINK / OPEN GRAPH EDITOR
   ========================================================= */

.link-add-row
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 12px;
	align-items: end;
}

.link-add-row .form-field
{
	margin: 0;
}

.link-preview-help
{
	margin-top: 9px;
}

.link-resource-editor-card
{
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	overflow: hidden;
}

.link-editor-preview
{
	min-height: 175px;
	background: #e8edf2;
}

.link-editor-preview img
{
	width: 100%;
	height: 100%;
	min-height: 175px;
	display: block;
	object-fit: cover;
}

.link-editor-preview-placeholder
{
	width: 100%;
	height: 100%;
	min-height: 175px;
	display: grid;
	place-items: center;
	color: #778493;
	font-family: var(--font-interface);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
}

.link-editor-content
{
	padding: 14px;
}

.link-preview-status
{
	margin-top: 7px;
	color: #3f7459;
	font-family: var(--font-reading);
	font-size: .74rem;
}

.link-preview-status-warning
{
	color: #8b6522;
}


/* =========================================================
   34. PUBLISHING OPTIONS / SCHEDULING
   ========================================================= */

.publishing-layout
{
	display: grid;
	grid-template-columns: minmax(250px, .48fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.publishing-left
{
	display: grid;
	gap: 14px;
}

.publish-mode-group
{
	display: grid;
	gap: 8px;
}

.form-label
{
	color: #344456;
	font-family: var(--font-interface);
	font-size: .74rem;
	font-weight: 600;
}

.publish-mode-option
{
	padding: 10px 12px;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	border: 1px solid var(--color-gray-300);
	border-radius: 8px;
	background: var(--color-white);
	cursor: pointer;
}

.publish-mode-option:has(input:checked)
{
	border-color: #9bb6d8;
	background: #f4f8fd;
}

.publish-mode-option input
{
	margin-top: 2px;
}

.publish-mode-option span
{
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.publish-mode-option strong
{
	color: #26384c;
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
}

.publish-mode-option small
{
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	font-size: .75rem;
	line-height: 1.35;
}

.schedule-fields
{
	padding: 12px;
	border: 1px solid #d9e1ec;
	border-radius: 8px;
	background: #f7f9fc;
}

.schedule-fields[hidden]
{
	display: none;
}

/* =========================================================
   35. RICH LINK CARDS IN THE FEED
   ========================================================= */

.feed-link-list
{
	margin-top: 18px;
	display: grid;
	gap: 9px;
}

.feed-link-card
{
	display: grid;
	overflow: hidden;
	border: 1px solid var(--color-gray-300);
	background: var(--color-gray-050);
	text-decoration: none;
}

.feed-link-card-has-image
{
	grid-template-columns: 190px minmax(0, 1fr);
	border-radius: 9px;
}

.feed-link-card-compact
{
	grid-template-columns: 58px minmax(0, 1fr) auto;
	align-items: center;
	border-left: var(--accent-edge-width-small) solid var(--course-dark);
	border-radius: 0 var(--radius-medium) var(--radius-medium) 0;
	background: var(--color-white);
	box-shadow: 0 3px 11px rgba(24, 39, 55, .08);
}

.feed-link-card-compact .attachment-icon
{
	width: 58px;
	min-width: 58px;
	height: 58px;
}

.feed-link-card-compact .feed-link-copy
{
	padding: 11px 8px 11px 0;
}

.feed-link-card-compact .feed-link-site
{
	margin-bottom: 3px;
}

.feed-link-card-compact .feed-link-copy p
{
	margin-top: 4px;
}

.feed-link-card-compact .feed-link-host
{
	margin-top: 5px;
}

.feed-link-arrow
{
	padding: 0 15px 0 8px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1.45rem;
	line-height: 1;
}

.feed-link-card:hover
{
	border-color: #bcc9d7;
	background: #f7f9fb;
}

.feed-link-card-compact:hover
{
	border-left-color: var(--course-dark);
	background: color-mix(in srgb, var(--course-light) 18%, var(--color-white));
	box-shadow: 0 7px 18px rgba(24, 39, 55, .11);
}

.feed-link-image
{
	min-height: 145px;
	background: #e6ebf0;
}

.feed-link-image img
{
	width: 100%;
	height: 100%;
	min-height: 145px;
	display: block;
	object-fit: cover;
}

.feed-link-copy
{
	padding: 14px 16px;
	min-width: 0;
}

.feed-link-site
{
	margin-bottom: 5px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.feed-link-site span
{
	margin-left: 6px;
	padding: 2px 5px;
	border-radius: 3px;
	background: var(--color-red-light);
	color: var(--color-red-dark);
}

.feed-link-copy strong
{
	display: block;
	color: #26394f;
	font-family: var(--font-interface);
	font-size: .92rem;
	font-weight: 600;
}

.feed-link-copy p
{
	margin: 6px 0 0;
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	font-size: .82rem;
	line-height: 1.5;
}

.feed-link-host
{
	margin-top: 8px;
	color: #56708d;
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 500;
}

.attachment-description
{
	margin-top: 4px !important;
	color: #596674 !important;
	font-size: .8rem !important;
	white-space: normal !important;
}

.attachment-file-meta
{
	margin-top: 4px !important;
	font-size: .7rem !important;
}


/* =========================================================
   36. IMAGE TITLES / DESCRIPTIONS IN THE FEED
   ========================================================= */

.feed-image-item
{
	min-width: 0;
	margin: 0;
	background: #f4f6f8;
}

.feed-image-caption
{
	padding: 9px 11px;
	display: grid;
	gap: 2px;
	background: var(--color-white);
	border-top: 1px solid var(--color-gray-200);
}

.feed-image-caption strong
{
	color: #35485b;
	font-family: var(--font-interface);
	font-size: .76rem;
	font-weight: 600;
}

.feed-image-caption span
{
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	font-size: .76rem;
	line-height: 1.45;
}


/* =========================================================
   37. V4 MOBILE REFINEMENTS
   ========================================================= */

@media (max-width: 700px)
{
	.link-add-row,
	.publishing-layout,
	.link-resource-editor-card,
	.feed-link-card-has-image
	{
		grid-template-columns: 1fr;
	}

	.feed-link-card-compact
	{
		grid-template-columns: 50px minmax(0, 1fr) auto;
	}

	.feed-link-card-compact .attachment-icon
	{
		width: 50px;
		min-width: 50px;
	}

	.link-add-row .secondary-button
	{
		justify-self: start;
	}

	.link-editor-preview
	{
		min-height: 150px;
		max-height: 230px;
	}

	.link-editor-preview img
	{
		min-height: 150px;
		max-height: 230px;
	}

	.feed-link-image
	{
		max-height: 220px;
	}

	.feed-link-image img
	{
		max-height: 220px;
	}

	.class-day-simple-heading
	{
		align-items: flex-start;
		flex-wrap: wrap;
	}
}

@media (max-width: 460px)
{
	.class-day-item-view
	{
		font-size: .66rem;
	}

	.resource-editor-card-header
	{
		gap: 8px;
	}
}

/* =========================================================
   36. EDIT POST + ATTACHMENT ROLES
   ========================================================= */

.post-edit-link
{
	align-self: flex-start;
	padding: 6px 9px;
	border: 1px solid var(--color-gray-300);
	border-radius: 6px;
	background: var(--color-white);
	color: var(--color-blue);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	text-decoration: none;
}

.post-edit-link:hover
{
	background: var(--color-gray-050);
}

.js-existing-resource-state
{
	display: none;
}

.resource-role-field
{
	display: grid;
	gap: 6px;
}

.resource-role-label
{
	color: #394a5b;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
}

.resource-role-choices
{
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.resource-role-choice
{
	padding: 6px 10px;
	border: 1px solid var(--color-gray-300);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
	cursor: pointer;
}

.resource-role-choice:hover
{
	border-color: #9bb6d8;
	color: var(--color-blue);
}

.resource-role-choice.is-selected
{
	border-color: #8faed3;
	background: #edf4fc;
	color: #254f83;
}

.feed-resource-group
{
	margin-top: 18px;
}

.feed-resource-group + .post-content,
.post-content + .feed-resource-group
{
	margin-top: 18px;
}

.feed-resource-group-label
{
	margin-bottom: 8px;
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.feed-resource-group-bell-work
{
	padding: 12px;
	border: 1px solid #d8e5f4;
	border-radius: 9px;
	background: #f7faff;
}

.feed-resource-group-bell-work .feed-resource-group-label
{
	color: var(--color-blue);
}

.feed-resource-group-exit-ticket
{
	padding: 12px;
	border: 1px solid #ead8dc;
	border-radius: 9px;
	background: #fff9fa;
}

.feed-resource-group-exit-ticket .feed-resource-group-label
{
	color: var(--color-red);
}

.feed-resource-group .feed-image-grid,
.feed-resource-group .attachment-list,
.feed-resource-group .feed-link-list
{
	margin-top: 0;
}

.feed-resource-group .feed-image-grid + .attachment-list,
.feed-resource-group .feed-image-grid + .feed-link-list,
.feed-resource-group .attachment-list + .feed-link-list
{
	margin-top: 10px;
}

@media (max-width: 700px)
{
	.resource-role-choices
	{
		gap: 5px;
	}

	.resource-role-choice
	{
		padding: 6px 8px;
		font-size: .64rem;
	}
}


/* =========================================================
   37. COURSE SECTION THEMES + HERO

   The school keeps its red/white/blue identity globally.
   Course pages override the three semantic --course-* colors
   from section data. Keep course styling tied to these names
   rather than hard-coding a section's colors in this file.
   ========================================================= */

.course-theme .header-course-name,
.course-theme .feed-heading h1,
.course-theme .placeholder-card h1,
.course-theme .editor-page-heading h1,
.course-theme .editor-card h2
{
	color: var(--course-dark);
}

.course-hero-shell
{
	width: min(var(--page-width), calc(100% - 40px));
	margin: 22px auto 0;
}

.course-hero
{
	position: relative;
	min-height: 210px;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(125deg, var(--course-dark), var(--course-accent));
	box-shadow: 0 7px 22px rgba(24, 39, 55, .14);
}

.course-hero-image
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--course-photo-position);
}

.course-hero-overlay
{
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 22, 36, .78) 0%, rgba(10, 22, 36, .48) 48%, rgba(10, 22, 36, .16) 100%);
}

.course-hero.no-photo .course-hero-overlay
{
	background: linear-gradient(90deg, rgba(0, 0, 0, .10), rgba(255, 255, 255, .04));
}

.course-hero-content
{
	position: relative;
	z-index: 1;
	min-height: 210px;
	padding: 34px 38px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	color: var(--color-white);
}

.course-hero-eyebrow
{
	margin-bottom: 5px;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .9;
}

.course-hero h1
{
	max-width: 900px;
	margin: 0;
	color: var(--color-white);
	font-size: clamp(1.8rem, 3vw, 2.7rem);
	font-weight: 600;
	letter-spacing: -.02em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .28);
}

.course-hero-section
{
	margin-top: 5px;
	font-family: var(--font-interface);
	font-size: .95rem;
	font-weight: 500;
	letter-spacing: .02em;
	opacity: .94;
}

.course-theme .section-switcher:focus,
.course-theme .form-control:focus,
.course-theme textarea:focus
{
	outline-color: var(--course-accent);
}


/* =========================================================
   38. FEED INTERACTIONS

   Likes use normal POST forms. Comments/replies use simple
   progressive enhancement: JavaScript opens/closes the panel,
   while the actual save always happens server-side.
   ========================================================= */

.feed-action-form
{
	margin: 0;
}

.feed-post-footer .feed-action-button,
.feed-action-static
{
	min-height: 30px;
	padding: 5px 7px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
}

.feed-post-footer .feed-action-button
{
	cursor: pointer;
}

.feed-post-footer .feed-action-button:hover
{
	background: var(--course-light);
	color: var(--course-dark);
}

.feed-post-footer .feed-action-button.is-active
{
	background: var(--course-light);
	color: var(--course-dark);
	font-weight: 600;
}

.feed-action-icon { position: relative; width: 18px; height: 18px; display: block; flex: 0 0 18px; overflow: hidden; }
.feed-action-icon img { width: 100%; height: 100%; display: block; object-fit: contain; transition: opacity .15s ease; }
.feed-like-icon::after { content: ''; position: absolute; inset: 0; background: var(--course-accent); -webkit-mask: url('../icons/like.png') center / contain no-repeat; mask: url('../icons/like.png') center / contain no-repeat; opacity: 0; transition: opacity .15s ease; }
.feed-post-footer .feed-action-button.is-active .feed-like-icon img { opacity: 0; }
.feed-post-footer .feed-action-button.is-active .feed-like-icon::after { opacity: 1; }

.feed-comments
{
	border-top: 1px solid var(--color-gray-200);
	background: #fafbfc;
}

.feed-comments[hidden]
{
	display: none;
}

.feed-comments-inner
{
	padding: 18px 22px 20px;
}

.feed-comments-empty,
.feed-comments-read-only
{
	margin-bottom: 14px;
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-size: .84rem;
}

.feed-comment
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 14px;
}

.comment-avatar
{
	width: 34px;
	min-width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--course-light);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.comment-avatar-small
{
	width: 29px;
	min-width: 29px;
	height: 29px;
	font-size: .62rem;
}

.comment-content-wrap
{
	min-width: 0;
	flex: 1;
}

.comment-bubble
{
	padding: 9px 11px;
	border: 1px solid #e2e6ea;
	border-radius: 9px;
	background: var(--color-white);
}

.comment-author-row
{
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.comment-author-row strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 600;
}

.comment-author-row span
{
	color: #9098a0;
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 500;
}

.comment-text
{
	margin-top: 3px;
	color: #344353;
	font-family: var(--font-reading);
	font-size: .88rem;
	line-height: 1.5;
}

.comment-reply-button
{
	margin: 4px 0 0 7px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
	cursor: pointer;
}

.comment-replies
{
	margin-top: 10px;
	padding-left: 4px;
}

.feed-comment-reply
{
	margin-bottom: 9px;
}

.comment-reply-form,
.new-comment-form
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.comment-reply-form
{
	margin-top: 8px;
}

.comment-reply-form[hidden]
{
	display: none;
}

.comment-reply-form textarea,
.new-comment-form textarea
{
	width: 100%;
	min-height: 58px;
	padding: 9px 10px;
	resize: vertical;
	border: 1px solid #d6dde4;
	border-radius: 8px;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-reading);
	font-size: .86rem;
	line-height: 1.45;
}

.comment-reply-form textarea
{
	min-height: 52px;
}

.new-comment-form
{
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #e5e8eb;
}

.new-comment-input
{
	min-width: 0;
	flex: 1;
}

.comment-form-actions
{
	margin-top: 6px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.small-primary-button
{
	padding: 7px 11px;
	border: 0;
	border-radius: 6px;
	background: var(--course-accent);
	color: var(--color-white);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	cursor: pointer;
}

.small-primary-button:hover
{
	filter: brightness(.9);
}

.comment-form-actions .text-button
{
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: .68rem;
	cursor: pointer;
}

@media (max-width: 760px)
{
	.course-hero-shell
	{
		width: min(100% - 24px, var(--page-width));
		margin-top: 14px;
	}

	.course-hero,
	.course-hero-content
	{
		min-height: 155px;
	}

	.course-hero-content
	{
		padding: 24px 22px;
	}

	.course-hero h1
	{
		font-size: 1.6rem;
	}

	.feed-comments-inner
	{
		padding: 15px 14px 18px;
	}

	.comment-replies
	{
		padding-left: 0;
	}
}


/* =========================================================
   39. STUDENT COURSE EXPERIENCE

   Student pages use the same classroom shell as the teacher,
   but remove teacher-only noise and make participation cues
   a little clearer.
   ========================================================= */

.feed-heading-note
{
	max-width: 620px;
	margin: 5px 0 0;
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	font-size: .88rem;
	line-height: 1.45;
}

.course-hero-teacher
{
	opacity: .9;
}

.comment-author-identity
{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.comment-author-row .comment-author-badge
{
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--course-light);
	color: var(--course-dark);
	font-size: .57rem;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.comment-author-row .comment-author-badge-teacher
{
	border: 1px solid var(--color-gray-300);
	background: var(--color-white);
}

.access-denied-shell
{
	min-height: 100vh;
	padding: 48px 20px;
	display: grid;
	place-items: center;
	background: var(--color-gray-100);
}

.access-denied-card
{
	width: min(620px, 100%);
	padding: 34px;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--color-blue);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.access-denied-logo
{
	width: 190px;
	max-width: 70%;
	margin-bottom: 26px;
}

.access-denied-card h1
{
	margin: 5px 0 12px;
	font-size: 1.55rem;
	font-weight: 600;
	line-height: 1.25;
}

.access-denied-card p
{
	margin: 0 0 10px;
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	line-height: 1.55;
}

.access-denied-help
{
	font-size: .88rem;
}

@media (max-width: 760px)
{
	.feed-heading-note
	{
		font-size: .84rem;
	}

	.access-denied-shell
	{
		padding: 24px 14px;
	}

	.access-denied-card
	{
		padding: 26px 22px;
	}
}


/* =========================================================
   40. FEED TAGS & FOLLOW-UP REPLIES

   Tags stay intentionally small and practical. They are used
   for quick filtering rather than building a deep taxonomy.
   Third-level comment follow-ups stay at the same visual
   indentation as normal replies so conversations remain tidy.
   ========================================================= */

.feed-tag-filter
{
	margin: -4px 0 18px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.feed-tag-filter-link,
.post-tag
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-gray-200);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.feed-tag-filter-link
{
	min-height: 30px;
	padding: 5px 10px;
	font-size: .67rem;
	letter-spacing: .01em;
}

.feed-tag-filter-link:hover,
.feed-tag-filter-link.is-active,
.post-tag:hover,
.post-tag.is-active
{
	border-color: var(--course-accent);
	background: var(--course-light);
	color: var(--course-dark);
}

.post-tags
{
	margin-top: 8px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.post-tag
{
	padding: 3px 8px;
	font-size: .62rem;
}

.editor-card-compact
{
	padding-bottom: 22px;
}

.tag-choice-list
{
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.tag-choice
{
	position: relative;
	cursor: pointer;
}

.tag-choice input
{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tag-choice span
{
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 6px 11px;
	border: 1px solid var(--color-gray-300);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.tag-choice:hover span,
.tag-choice input:focus-visible + span
{
	border-color: var(--course-accent);
}

.tag-choice input:checked + span
{
	border-color: var(--course-accent);
	background: var(--course-light);
	color: var(--course-dark);
	box-shadow: inset 0 0 0 1px var(--course-accent);
}

.tag-choice-empty
{
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-size: .84rem;
}

.tag-new-field
{
	max-width: 560px;
	margin-top: 16px;
}

.feed-comment-followup
{
	margin-top: -2px;
	padding-left: 0;
}

.comment-replying-to
{
	margin: 0 0 4px 2px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 500;
}

@media (max-width: 760px)
{
	.feed-tag-filter
	{
		margin-top: 0;
	}

	.feed-tag-filter-link
	{
		min-height: 32px;
	}

	.tag-choice span
	{
		min-height: 36px;
	}
}


/* =========================================================
   41. PUBLIC / PARENT CLASS VIEW

   The public page is intentionally simpler than the signed-in
   classroom. It keeps the course identity and recent feed, but
   removes course navigation, widgets, reactions, and comments.
   ========================================================= */

.feed-heading-actions
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 9px;
	flex-wrap: wrap;
}

.public-classroom-view
{
	min-height: 100vh;
	background: #f3f5f7;
}

.public-view-header
{
	border-bottom: 1px solid var(--color-gray-200);
	background: var(--color-white);
}

.public-view-header-inner
{
	width: min(var(--page-width), calc(100% - 40px));
	min-height: 74px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.public-view-brand
{
	display: inline-flex;
	align-items: center;
}

.public-view-brand img
{
	display: block;
	width: 188px;
	max-width: 100%;
	height: auto;
}

.public-view-label
{
	display: inline-flex;
	align-items: center;
	min-height: 31px;
	padding: 5px 10px;
	border: 1px solid var(--color-gray-200);
	border-radius: 999px;
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.public-course-hero-shell
{
	margin-top: 24px;
}

.public-feed-shell
{
	width: min(940px, calc(100% - 40px));
	margin: 28px auto 64px;
}

.public-feed-column
{
	min-width: 0;
}

.public-feed-heading
{
	margin-bottom: 18px;
}

.public-feed-heading h1
{
	margin: 2px 0 5px;
	color: var(--course-dark);
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: -.015em;
}

.public-feed-heading p
{
	margin: 0;
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	font-size: .9rem;
	line-height: 1.5;
}

.public-classroom-view .feed-post
{
	margin-bottom: 20px;
}

.public-classroom-view .feed-post:last-of-type
{
	margin-bottom: 0;
}

.post-tag-static
{
	cursor: default;
}

.post-tag-static:hover
{
	border-color: var(--color-gray-200);
	background: var(--color-white);
	color: var(--color-gray-600);
}

.public-feed-note
{
	margin-top: 24px;
	padding: 15px 17px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-large);
	background: var(--color-white);
	color: var(--color-gray-600);
	font-family: var(--font-reading);
	font-size: .84rem;
	line-height: 1.45;
}

.public-feed-note strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 600;
}

.public-view-footer
{
	border-top: 1px solid var(--color-gray-200);
	background: var(--color-white);
}

.public-view-footer > div
{
	width: min(var(--page-width), calc(100% - 40px));
	min-height: 70px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 500;
}

@media (max-width: 760px)
{
	.feed-heading-actions
	{
		width: 100%;
		justify-content: stretch;
	}

	.feed-heading-actions .secondary-button,
	.feed-heading-actions .primary-button
	{
		flex: 1 1 auto;
	}

	.public-view-header-inner,
	.public-view-footer > div
	{
		width: min(100% - 28px, var(--page-width));
	}

	.public-view-header-inner
	{
		min-height: 66px;
	}

	.public-view-brand img
	{
		width: 158px;
	}

	.public-view-label
	{
		font-size: .61rem;
	}

	.public-feed-shell
	{
		width: min(100% - 28px, 940px);
		margin-top: 22px;
	}

	.public-feed-heading h1
	{
		font-size: 1.55rem;
	}

	.public-view-footer > div
	{
		min-height: 76px;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 3px;
	}
}


/* =========================================================
   42. ANNOUNCEMENTS
   ========================================================= */

.widget-title-row
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.widget-title-link
{
	color: var(--course-accent);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
	text-decoration: none;
}

.widget-title-link:hover
{
	text-decoration: underline;
}

.announcement-list
{
	display: grid;
	gap: 0;
}

.announcement-item
{
	padding: 13px 0;
	border-bottom: 1px solid var(--color-gray-200);
}

.announcement-item:first-child
{
	padding-top: 2px;
}

.announcement-item:last-child
{
	border-bottom: 0;
	padding-bottom: 4px;
}

.announcement-item strong
{
	display: block;
	margin-bottom: 4px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .79rem;
	font-weight: 600;
}

.announcement-item p
{
	margin: 0;
	color: var(--color-gray-700);
	font-family: var(--font-reading);
	font-size: .82rem;
	line-height: 1.48;
}

.announcement-meta
{
	margin-top: 7px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 500;
}

.announcement-meta a
{
	color: var(--course-accent);
	text-decoration: none;
}

.widget-empty-copy
{
	padding: 4px 0 7px;
	color: var(--color-gray-500);
	font-size: .8rem;
}

.announcement-management-shell
{
	width: min(1020px, calc(100% - 40px));
}

.management-card
{
	padding: 24px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.management-heading
{
	margin-bottom: 22px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
}

.management-heading h1
{
	margin: 2px 0 4px;
	color: var(--course-dark);
	font-size: 1.7rem;
	font-weight: 600;
}

.management-heading p
{
	margin: 0;
	max-width: 680px;
	color: var(--color-gray-600);
	font-size: .88rem;
	line-height: 1.5;
}

.management-list
{
	margin: 18px 0 20px;
	display: grid;
	gap: 10px;
}

.management-list-item
{
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.management-list-item > div
{
	min-width: 0;
}

.management-list-item h2
{
	margin: 5px 0 3px;
	color: var(--course-dark);
	font-size: .98rem;
	font-weight: 600;
}

.management-list-item p
{
	margin: 0;
	color: var(--color-gray-600);
	font-size: .82rem;
	line-height: 1.45;
}

.management-item-meta
{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 500;
}

.status-chip
{
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--course-light);
	color: var(--course-dark);
	font-size: .6rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.status-chip-draft,
.status-chip-scheduled
{
	background: #fff4d8;
	color: #785c14;
}

.status-chip-expired,
.status-chip-archived
{
	background: var(--color-gray-200);
	color: var(--color-gray-600);
}

.choice-row
{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.choice-pill
{
	margin: 0 !important;
	cursor: pointer;
}

.choice-pill input
{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.choice-pill span
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 7px 11px;
	border: 1px solid var(--color-gray-300);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
}

.choice-pill input:checked + span
{
	border-color: var(--course-dark);
	background: var(--course-light);
	color: var(--course-dark);
}

.form-control-textarea
{
	resize: vertical;
	line-height: 1.55;
}

.form-grid-three
{
	grid-template-columns: 1.2fr .9fr .9fr;
}


/* =========================================================
   43. COURSE CALENDAR
   ========================================================= */

.calendar-page-shell
{
	width: min(var(--page-width), calc(100% - 40px));
	margin: 26px auto 70px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: var(--page-gap);
	align-items: start;
}

.calendar-main-column
{
	min-width: 0;
}

.calendar-side-column
{
	display: grid;
	gap: 18px;
}

.calendar-heading
{
	margin-bottom: 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.calendar-heading h1
{
	margin: 2px 0 3px;
	color: var(--course-dark);
	font-size: 1.8rem;
	font-weight: 600;
}

.calendar-heading p
{
	margin: 0;
	color: var(--color-gray-600);
	font-size: .88rem;
}

.calendar-toolbar
{
	min-height: 58px;
	padding: 9px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border: 1px solid var(--color-gray-300);
	border-bottom: 0;
	border-radius: var(--radius-large) var(--radius-large) 0 0;
	background: var(--color-white);
}

.calendar-month-navigation
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.calendar-month-navigation h2
{
	min-width: 170px;
	margin: 0;
	text-align: center;
	color: var(--course-dark);
	font-size: 1rem;
	font-weight: 600;
}

.calendar-nav-button,
.calendar-today-link
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 34px;
	padding: 6px 9px;
	border: 1px solid var(--color-gray-300);
	border-radius: 7px;
	background: var(--color-white);
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .74rem;
	font-weight: 600;
	text-decoration: none;
}

.calendar-nav-button:hover,
.calendar-today-link:hover
{
	border-color: var(--course-dark);
	color: var(--course-dark);
}

.calendar-month-view
{
	border: 1px solid var(--color-gray-300);
	border-radius: 0 0 var(--radius-large) var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.calendar-weekday-row,
.calendar-grid
{
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekday-row
{
	border-bottom: 1px solid var(--color-gray-300);
	background: var(--color-gray-050);
}

.calendar-weekday-row div
{
	padding: 9px 8px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
}

.calendar-day
{
	min-height: 148px;
	padding: 8px;
	border-right: 1px solid var(--color-gray-200);
	border-bottom: 1px solid var(--color-gray-200);
	background: var(--color-white);
}

.calendar-day:nth-child(7n)
{
	border-right: 0;
}

.calendar-day-empty
{
	background: var(--color-gray-050);
}

.calendar-day.is-today
{
	box-shadow: inset 0 0 0 2px var(--course-accent);
}

.calendar-day.is-no-class
{
	background: #fafafa;
}

.calendar-day-number-row
{
	min-height: 27px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.calendar-day-number
{
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
}

.calendar-day.is-today .calendar-day-number
{
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--course-accent);
	color: var(--color-white);
}

.calendar-day.is-today .calendar-day-number-row
{
	margin-bottom: 6px;
}

.calendar-day-add
{
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .95rem;
	font-weight: 500;
	text-decoration: none;
}

.calendar-day-add:hover
{
	background: var(--course-light);
	color: var(--course-dark);
}

.calendar-day-status
{
	margin: 1px 0 6px;
	padding: 3px 6px;
	border-radius: var(--radius-small);
	background: var(--color-gray-200);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .58rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.calendar-day-items
{
	display: grid;
	gap: 5px;
}

.calendar-entry
{
	min-width: 0;
	padding: 6px 7px;
	display: block;
	border: 1px solid transparent;
	border-radius: 6px;
	text-decoration: none;
}

.calendar-entry-event
{
	border-color: var(--color-gray-300);
	border-left: var(--radius-small) solid var(--course-accent);
	background: var(--color-white);
}

.calendar-entry-post
{
	border-color: var(--color-gray-300);
	background: var(--course-light);
}

.calendar-entry-post.is-planned
{
	border-style: dashed;
	background: #fff9e8;
}

.calendar-entry:hover
{
	border-color: var(--course-dark);
}

.calendar-entry.is-cancelled
{
	opacity: .55;
	text-decoration: line-through;
}

.calendar-entry-type
{
	display: block;
	margin-bottom: 1px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .52rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.calendar-entry strong
{
	display: block;
	overflow: hidden;
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .64rem;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
}

.calendar-entry small
{
	display: block;
	margin-top: 2px;
	color: var(--color-gray-500);
	font-size: .55rem;
}

.calendar-mini-badges
{
	margin-top: 4px;
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
}

.calendar-mini-badges span
{
	padding: 1px 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .48rem;
	font-weight: 600;
}

.calendar-agenda-view
{
	display: none;
}

.calendar-legend-list
{
	display: grid;
	gap: 8px;
}

.calendar-legend-list > div
{
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--color-gray-600);
	font-size: .78rem;
}

.legend-swatch
{
	width: 13px;
	height: 13px;
	border: 1px solid var(--color-gray-300);
	border-radius: 4px;
}

.legend-swatch-event
{
	background: var(--course-accent);
}

.legend-swatch-post
{
	background: var(--course-light);
}

.legend-swatch-planned
{
	border-style: dashed;
	background: #fff9e8;
}

.upcoming-item-link
{
	text-decoration: none;
}

.upcoming-item-link:hover .upcoming-copy strong
{
	color: var(--course-accent);
}

.compact-empty-state
{
	padding: 24px;
}


/* =========================================================
   44. CALENDAR / ANNOUNCEMENTS - RESPONSIVE
   ========================================================= */

@media (max-width: 1040px)
{
	.calendar-page-shell
	{
		grid-template-columns: 1fr;
	}

	.calendar-side-column
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.calendar-legend-widget
	{
		display: none;
	}
}

@media (max-width: 760px)
{
	.calendar-page-shell,
	.announcement-management-shell
	{
		width: calc(100% - 22px);
		margin-top: 18px;
	}

	.calendar-heading
	{
		align-items: flex-start;
		flex-direction: column;
	}

	.calendar-heading h1
	{
		font-size: 1.55rem;
	}

	.calendar-heading .primary-button
	{
		width: 100%;
	}

	.calendar-toolbar
	{
		border-bottom: 1px solid var(--color-gray-300);
		border-radius: var(--radius-large);
	}

	.calendar-month-navigation
	{
		min-width: 0;
		flex: 1;
		justify-content: space-between;
	}

	.calendar-month-navigation h2
	{
		min-width: 0;
		font-size: .92rem;
	}

	.calendar-month-view
	{
		display: none;
	}

	.calendar-agenda-view
	{
		margin-top: 12px;
		display: grid;
		gap: 10px;
	}

	.calendar-agenda-day
	{
		padding: 14px;
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 13px;
		border: 1px solid var(--color-gray-300);
		border-radius: var(--radius-large);
		background: var(--color-white);
		box-shadow: var(--shadow-card);
	}

	.calendar-agenda-day.is-today
	{
		border-color: var(--course-accent);
	}

	.calendar-agenda-date
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		padding-top: 3px;
	}

	.calendar-agenda-date span
	{
		color: var(--course-accent);
		font-family: var(--font-interface);
		font-size: .58rem;
		font-weight: 600;
		letter-spacing: .06em;
	}

	.calendar-agenda-date strong
	{
		color: var(--course-dark);
		font-family: var(--font-interface);
		font-size: 1.35rem;
		font-weight: 600;
		line-height: 1;
	}

	.calendar-agenda-content
	{
		min-width: 0;
		display: grid;
		gap: 8px;
	}

	.calendar-agenda-weekday
	{
		color: var(--color-gray-500);
		font-family: var(--font-interface);
		font-size: .64rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.calendar-agenda-no-class,
	.calendar-agenda-item
	{
		padding: 9px 10px;
		border-radius: 7px;
		background: var(--color-gray-050);
	}

	.calendar-agenda-no-class
	{
		display: flex;
		flex-direction: column;
		gap: 2px;
		background: var(--color-gray-200);
	}

	.calendar-agenda-no-class strong,
	.calendar-agenda-item strong
	{
		color: var(--color-gray-700);
		font-family: var(--font-interface);
		font-size: .78rem;
		font-weight: 600;
	}

	.calendar-agenda-no-class span,
	.calendar-agenda-item p,
	.calendar-agenda-item small
	{
		margin: 2px 0 0;
		color: var(--color-gray-600);
		font-size: .78rem;
		line-height: 1.45;
	}

	.calendar-agenda-item a,
	.calendar-agenda-item > a
	{
		color: var(--course-accent);
		font-family: var(--font-interface);
		font-size: .68rem;
		font-weight: 600;
	}

	.calendar-agenda-post
	{
		display: block;
		border: 1px solid var(--color-gray-300);
		background: var(--course-light);
		text-decoration: none;
	}

	.calendar-side-column
	{
		grid-template-columns: 1fr;
	}

	.management-heading,
	.management-list-item
	{
		align-items: stretch;
		flex-direction: column;
	}

	.management-heading .primary-button,
	.management-list-item .secondary-button
	{
		width: 100%;
	}

	.management-card
	{
		padding: 17px;
	}

	.form-grid-three
	{
		grid-template-columns: 1fr;
	}

	.form-grid-three .form-field + .form-field
	{
		margin-top: 0;
	}
}

@media (max-width: 520px)
{
	.calendar-today-link
	{
		display: none;
	}

	.calendar-toolbar
	{
		padding-left: 8px;
		padding-right: 8px;
	}

	.choice-row
	{
		align-items: stretch;
		flex-direction: column;
	}

	.choice-pill span
	{
		width: 100%;
	}
}

/* =========================================================
   45. PUBLIC ANNOUNCEMENTS
   ========================================================= */

.public-announcement-panel
{
	margin-bottom: 20px;
	padding: 18px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.public-announcement-list
{
	margin-top: 8px;
	display: grid;
	gap: 12px;
}

.public-announcement-list article
{
	padding-top: 12px;
	border-top: 1px solid var(--color-gray-200);
}

.public-announcement-list article:first-child
{
	padding-top: 0;
	border-top: 0;
}

.public-announcement-list strong
{
	display: block;
	margin-bottom: 3px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
}

.public-announcement-list p
{
	margin: 0;
	color: var(--color-gray-700);
	font-size: .86rem;
	line-height: 1.5;
}


/* =========================================================
   46. SIDEBAR WIDGET REFINEMENT
   ========================================================= */

.widget
{
	border-radius: var(--radius-large);
}

.widget-title-row
{
	width: 100%;
	padding: 12px 15px;
	background: #f7f8f9;
	border-bottom: 1px solid #e3e7eb;
}

.widget-title-row .widget-title
{
	padding: 0;
	background: transparent;
	border: 0;
	flex: 1;
}

.widget-title-link
{
	white-space: nowrap;
}

.widget-link
{
	padding: 11px 15px;
}

.widget-link:hover
{
	background: var(--color-gray-050);
	color: var(--course-accent);
}

.widget-announcements .announcement-list
{
	padding: 0 15px;
}

.widget-empty-copy
{
	padding: 14px 15px;
}

.calendar-legend-list
{
	padding: 12px 15px 14px;
}

.upcoming-item
{
	padding: 13px 15px;
	transition: background .15s ease;
}

.upcoming-item-link:hover
{
	background: var(--color-gray-050);
}

.upcoming-date-box
{
	border-color: color-mix(in srgb, var(--course-accent) 28%, var(--color-gray-300));
}

.upcoming-date-box span
{
	background: color-mix(in srgb, var(--course-accent) 10%, white);
	color: var(--course-accent);
}

.upcoming-date-box strong
{
	color: var(--course-dark);
}


/* =========================================================
   47. CALENDAR VISUAL REFINEMENT
   ========================================================= */

.calendar-month-view
{
	box-shadow: 0 6px 20px rgba(24, 39, 55, .10);
}

.calendar-weekday-row
{
	background: color-mix(in srgb, var(--course-light) 42%, white);
}

.calendar-day
{
	transition: background .15s ease, box-shadow .15s ease;
}

.calendar-day:not(.calendar-day-empty):hover
{
	background: color-mix(in srgb, var(--course-light) 18%, white);
}

.calendar-day.is-today
{
	background: color-mix(in srgb, var(--course-light) 30%, white);
	box-shadow: inset 0 0 0 2px var(--course-accent);
}

.calendar-day.is-no-class
{
	background: var(--color-gray-050);
}

.calendar-entry
{
	position: relative;
	box-shadow: 0 2px 5px rgba(24, 39, 55, .06);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.calendar-entry:hover
{
	border-color: var(--course-dark);
	box-shadow: 0 3px 10px rgba(24, 39, 55, .12);
	transform: translateY(-1px);
}

.calendar-entry-event
{
	background: color-mix(in srgb, var(--course-accent) 5%, white);
}

.calendar-entry-event.calendar-event-quiz,
.calendar-entry-event.calendar-event-test,
.calendar-entry-event.calendar-event-exam
{
	border-left-width: var(--radius-small);
	background: color-mix(in srgb, var(--course-accent) 9%, white);
}

.calendar-entry-event.calendar-event-project,
.calendar-entry-event.calendar-event-due-date
{
	border-left-color: var(--course-dark);
	background: color-mix(in srgb, var(--course-light) 58%, white);
}

.calendar-entry-event.calendar-event-review
{
	border-left-color: #8b6b16;
	background: #fffaf0;
}

.calendar-entry-event.calendar-event-no-class,
.calendar-entry-event.calendar-event-special-event
{
	border-left-color: var(--color-gray-500);
	background: var(--color-gray-050);
}

.calendar-entry-post
{
	border-color: color-mix(in srgb, var(--course-dark) 18%, var(--color-gray-300));
	background: color-mix(in srgb, var(--course-light) 72%, white);
}

.calendar-day-status
{
	border-left: var(--radius-small) solid var(--color-gray-500);
}

.calendar-mini-badges span
{
	border: 1px solid rgba(0, 0, 0, .04);
}

.legend-swatch-event
{
	background: color-mix(in srgb, var(--course-accent) 18%, white);
	border-left: 4px solid var(--course-accent);
}

.legend-swatch-post
{
	background: color-mix(in srgb, var(--course-light) 72%, white);
	border-color: color-mix(in srgb, var(--course-dark) 25%, var(--color-gray-300));
}


/* =========================================================
   48. COURSE MATERIALS
   ========================================================= */

.materials-page-shell { --materials-soft-dark: color-mix(in srgb, var(--course-dark) 8%, white); --materials-soft-accent: color-mix(in srgb, var(--course-accent) 9%, white); width: min(1160px, calc(100% - 40px)); margin: 30px auto 76px; }

.materials-heading { margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.materials-heading h1 { margin: 2px 0 4px; color: var(--course-dark); font-size: clamp(1.85rem, 3vw, 2.25rem); font-weight: 650; letter-spacing: -.025em; }
.materials-heading p { margin: 0; color: var(--color-gray-600); font-size: .9rem; }
.materials-add-button { gap: 8px; min-height: 42px; padding-inline: 16px; border-radius: 9px; box-shadow: 0 6px 18px color-mix(in srgb, var(--course-accent) 28%, transparent); }
.materials-button-icon { width: 17px; height: 17px; display: inline-grid; place-items: center; }
.materials-button-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.materials-breadcrumb { margin-bottom: 18px; padding: 0 2px 13px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid color-mix(in srgb, var(--course-dark) 12%, var(--color-gray-300)); color: var(--color-gray-500); font-family: var(--font-interface); font-size: .72rem; font-weight: 550; }
.materials-breadcrumb-trail { min-width: 0; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.materials-breadcrumb a { color: var(--course-dark); text-decoration: none; transition: color .15s ease, background .15s ease; }
.materials-breadcrumb a:hover { color: var(--course-accent); }
.materials-breadcrumb strong { max-width: min(520px, 52vw); overflow: hidden; color: var(--color-gray-700); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.materials-breadcrumb-home { display: inline-flex; align-items: center; gap: 6px; }
.materials-breadcrumb-home svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.materials-breadcrumb-separator { width: 14px; height: 14px; display: inline-grid; place-items: center; color: var(--color-gray-400); }
.materials-breadcrumb-separator svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.materials-back-link { flex: 0 0 auto; padding: 6px 9px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--materials-soft-dark); font-size: .66rem; }
.materials-back-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.materials-folder-intro { position: relative; margin-bottom: 28px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--course-dark) 16%, var(--color-gray-300)); border-top-color: var(--course-dark); border-radius: 0 0 15px 15px; background: linear-gradient(125deg, color-mix(in srgb, var(--course-light) 72%, white) 0%, white 58%, color-mix(in srgb, var(--course-accent) 4%, white) 100%); box-shadow: 0 9px 26px rgba(24, 39, 55, .12); }
.materials-folder-intro.is-current-unit { border-top-color: var(--course-accent); }
.materials-folder-intro-main { min-width: 0; display: flex; align-items: center; gap: 20px; }
.materials-folder-intro-icon { width: 72px; min-width: 72px; height: 72px; display: grid; place-items: center; border-radius: 18px; background: var(--course-dark); color: var(--color-white); box-shadow: 0 10px 24px color-mix(in srgb, var(--course-dark) 28%, transparent); }
.materials-folder-intro.is-current-unit .materials-folder-intro-icon { background: var(--course-accent); box-shadow: 0 10px 24px color-mix(in srgb, var(--course-accent) 30%, transparent); }
.materials-folder-intro-icon svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.materials-folder-intro-copy { min-width: 0; }
.materials-folder-kicker { margin-bottom: 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .62rem; font-weight: 650; letter-spacing: .065em; text-transform: uppercase; }
.materials-folder-kicker span { padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--course-dark) 8%, white); color: var(--course-dark); letter-spacing: .04em; }
.materials-folder-kicker .is-current { background: color-mix(in srgb, var(--course-accent) 12%, white); color: var(--course-accent); }
.materials-folder-kicker .is-archived { background: var(--color-gray-200); color: var(--color-gray-600); }
.materials-folder-intro h2 { margin: 0; color: var(--course-dark); font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 650; letter-spacing: -.02em; }
.materials-folder-intro p { margin: 7px 0 0; max-width: 760px; color: var(--color-gray-600); font-size: .9rem; line-height: 1.55; }
.materials-folder-intro-meta { margin-top: 11px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .65rem; font-weight: 550; }
.materials-folder-intro-meta span { padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--course-dark) 10%, var(--color-gray-300)); border-radius: 999px; background: rgba(255, 255, 255, .72); }
.materials-icon-button { flex: 0 0 auto; min-height: 36px; padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid color-mix(in srgb, var(--course-dark) 18%, var(--color-gray-300)); border-radius: 8px; background: rgba(255, 255, 255, .86); color: var(--course-dark); font-family: var(--font-interface); font-size: .67rem; font-weight: 650; text-decoration: none; box-shadow: 0 3px 10px rgba(24, 39, 55, .10); transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; }
.materials-icon-button:hover { border-color: color-mix(in srgb, var(--course-accent) 35%, var(--color-gray-300)); background: var(--materials-soft-accent); color: var(--course-accent); transform: translateY(-1px); }
.materials-icon-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.materials-content-section + .materials-content-section { margin-top: 30px; }
.materials-section-heading { margin-bottom: 12px; padding-inline: 2px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.materials-section-heading h2 { margin: 0; color: var(--course-dark); font-family: var(--font-interface); font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
.materials-section-heading p { margin: 2px 0 0; color: var(--color-gray-500); font-size: .76rem; }
.materials-section-count { min-width: 28px; height: 28px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--course-dark) 8%, white); color: var(--course-dark); font-family: var(--font-interface); font-size: .65rem; font-weight: 700; }

.materials-folder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.material-folder-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--course-dark) 14%, var(--color-gray-300)); border-top: 4px solid var(--course-dark); border-radius: 0 0 14px 14px; background: linear-gradient(145deg, white 0%, color-mix(in srgb, var(--course-light) 34%, white) 100%); box-shadow: 0 4px 14px rgba(24, 39, 55, .09); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.material-folder-card:hover { border-color: color-mix(in srgb, var(--course-dark) 34%, var(--color-gray-300)); box-shadow: 0 11px 28px rgba(24, 39, 55, .15); transform: translateY(-3px); }
.material-folder-card.is-current-unit { border-top-color: var(--course-accent); background: linear-gradient(145deg, white 0%, color-mix(in srgb, var(--course-accent) 6%, white) 100%); }
.material-folder-card.is-archived { opacity: .68; }
.material-folder-card-main { min-height: 205px; padding: 17px; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.material-folder-card.has-teacher-actions .material-folder-card-main { padding-right: 54px; }
.material-folder-card-topline { display: flex; align-items: center; gap: 10px; }
.material-folder-icon { width: 49px; min-width: 49px; height: 49px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--course-dark) 10%, white); color: var(--course-dark); }
.material-folder-card.is-current-unit .material-folder-icon { background: color-mix(in srgb, var(--course-accent) 11%, white); color: var(--course-accent); }
.material-folder-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.material-folder-type-line { min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.material-folder-card-copy { margin-top: 14px; min-width: 0; }
.material-folder-card-copy h3 { margin: 0; color: var(--course-dark); font-family: var(--font-interface); font-size: 1rem; font-weight: 650; line-height: 1.35; letter-spacing: -.015em; }
.material-folder-card-copy p { margin: 6px 0 0; display: -webkit-box; overflow: hidden; color: var(--color-gray-600); font-size: .78rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.material-folder-card-footer { margin-top: auto; padding-top: 17px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.material-folder-count { color: var(--color-gray-500); font-family: var(--font-interface); font-size: .65rem; font-weight: 550; }
.material-folder-open { display: inline-flex; align-items: center; gap: 6px; color: var(--course-dark); font-family: var(--font-interface); font-size: .66rem; font-weight: 650; }
.material-folder-open svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.material-folder-card:hover .material-folder-open svg { transform: translateX(2px); }
.material-card-edit { position: absolute; z-index: 2; top: 12px; right: 12px; width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--course-dark) 15%, var(--color-gray-300)); border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--course-dark); text-decoration: none; box-shadow: 0 3px 9px rgba(24, 39, 55, .10); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.material-card-edit:hover { border-color: color-mix(in srgb, var(--course-accent) 34%, var(--color-gray-300)); background: var(--materials-soft-accent); color: var(--course-accent); }
.material-card-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.material-status-pill { padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--course-dark) 9%, white); color: var(--course-dark); font-family: var(--font-interface); font-size: .54rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.material-status-pill.is-current { background: color-mix(in srgb, var(--course-accent) 12%, white); color: var(--course-accent); }
.material-status-pill.is-muted { background: var(--color-gray-200); color: var(--color-gray-600); }

.materials-resource-list { display: grid; gap: 9px; }
.material-resource-card { display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--color-gray-300); border-left: 4px solid var(--course-dark); border-radius: 0 13px 13px 0; background: var(--color-white); box-shadow: 0 3px 11px rgba(24, 39, 55, .08); transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.material-resource-card:hover { border-color: color-mix(in srgb, var(--course-dark) 28%, var(--color-gray-300)); border-left-color: var(--course-dark); box-shadow: 0 9px 22px rgba(24, 39, 55, .13); transform: translateY(-1px); }
.material-resource-card.is-archived { opacity: .68; }
.material-resource-card-main { min-width: 0; padding: 14px 15px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 15px; flex: 1; color: inherit; text-decoration: none; }
.material-resource-icon { --material-icon-color: var(--course-dark); position: relative; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--course-dark) 9%, white); color: var(--material-icon-color); }
.material-resource-icon-link, .material-resource-icon-video, .material-resource-icon-pdf { --material-icon-color: var(--course-accent); background: color-mix(in srgb, var(--course-accent) 9%, white); }
.material-resource-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.material-resource-icon > span { position: absolute; right: -4px; bottom: -4px; max-width: 48px; padding: 2px 5px; overflow: hidden; border: 2px solid var(--color-white); border-radius: 999px; background: var(--material-icon-color); color: var(--color-white); font-family: var(--font-interface); font-size: .46rem; font-weight: 750; letter-spacing: .035em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.material-resource-copy { min-width: 0; }
.material-resource-title-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.material-resource-copy h3 { margin: 0; color: var(--course-dark); font-family: var(--font-interface); font-size: .92rem; font-weight: 650; line-height: 1.35; }
.material-resource-copy p { margin: 4px 0 0; color: var(--color-gray-600); font-size: .79rem; line-height: 1.48; }
.material-resource-meta { margin-top: 6px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .61rem; font-weight: 500; }
.material-resource-meta span + span::before { content: '•'; margin-right: 7px; color: color-mix(in srgb, var(--course-dark) 25%, var(--color-gray-400)); }
.material-resource-open { min-width: 76px; padding: 7px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; background: var(--materials-soft-dark); color: var(--course-dark); font-family: var(--font-interface); font-size: .64rem; font-weight: 650; transition: background .15s ease, color .15s ease; }
.material-resource-card-main:hover .material-resource-open { background: color-mix(in srgb, var(--course-accent) 10%, white); color: var(--course-accent); }
.material-resource-open svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.material-resource-edit { width: 68px; min-width: 68px; display: flex; align-items: center; justify-content: center; gap: 5px; border-left: 1px solid var(--color-gray-200); background: var(--color-gray-050); color: var(--course-dark); font-family: var(--font-interface); font-size: .63rem; font-weight: 650; text-decoration: none; transition: background .15s ease, color .15s ease; }
.material-resource-edit:hover { background: var(--materials-soft-accent); color: var(--course-accent); }
.material-resource-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.materials-empty-state { margin-top: 10px; padding-block: 42px; }
.materials-empty-icon { width: 62px; height: 62px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--course-dark) 8%, white); color: var(--course-dark); }
.materials-empty-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.materials-management-shell
{
	width: min(1000px, calc(100% - 40px));
	margin: 28px auto 72px;
}

.material-management-card
{
	padding: 28px;
}

.material-form
{
	display: grid;
	gap: 18px;
}

.material-form .form-field + .form-field,
.material-form .form-grid-two .form-field + .form-field,
.material-form .form-grid-three .form-field + .form-field
{
	margin-top: 0;
}

.material-form-top-grid
{
	grid-template-columns: minmax(180px, .7fr) minmax(0, 1.4fr);
	gap: 16px;
}

.form-label-optional
{
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-weight: 400;
}

.readonly-control
{
	min-height: 42px;
	padding: 10px 11px;
	border: 1px solid var(--color-gray-300);
	border-radius: 7px;
	background: var(--color-gray-050);
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
}

.form-help
{
	margin-top: 5px;
	color: var(--color-gray-500);
	font-size: .72rem;
	line-height: 1.45;
}

.material-resource-builder,
.material-existing-resource-panel
{
	padding: 18px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.material-form-section-heading h2
{
	margin: 0;
	font-size: 1rem;
}

.material-form-section-heading p
{
	margin: 3px 0 0;
	color: var(--color-gray-600);
	font-size: .8rem;
}

.material-source-choices
{
	margin: 15px 0;
}

.material-source-panel
{
	padding-top: 2px;
}

.form-control-file
{
	padding: 8px;
	background: var(--color-white);
}

.material-resource-summary
{
	margin-top: 14px;
	padding: 12px;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: 8px;
	background: var(--color-white);
}

.material-resource-summary strong,
.material-resource-summary span
{
	display: block;
}

.material-resource-summary strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
}

.material-resource-summary > div > span
{
	margin-top: 2px;
	color: var(--color-gray-500);
	font-size: .7rem;
}

.material-current-unit-control
{
	padding: 13px 15px;
	border: 1px solid color-mix(in srgb, var(--course-accent) 22%, var(--color-gray-300));
	border-radius: var(--radius-medium);
	background: color-mix(in srgb, var(--course-accent) 5%, white);
}

.checkbox-line
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}

.checkbox-line input
{
	margin-top: 4px;
}

.checkbox-line strong,
.checkbox-line small
{
	display: block;
}

.checkbox-line strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 600;
}

.checkbox-line small
{
	margin-top: 2px;
	color: var(--color-gray-500);
	font-size: .72rem;
}

.compact-button
{
	min-height: 34px;
	padding: 6px 10px;
	font-size: .68rem;
}

@media (max-width: 760px)
{
	.materials-page-shell,
	.materials-management-shell
	{
		width: calc(100% - 22px);
		margin-top: 18px;
	}

	.materials-heading,
	.materials-folder-intro
	{
		align-items: stretch;
		flex-direction: column;
	}

	.materials-heading .primary-button,
	.materials-folder-intro .secondary-button
	{
		width: 100%;
	}

	.material-row-main
	{
		grid-template-columns: 50px minmax(0, 1fr) 18px;
		gap: 10px;
		padding: 12px;
	}

	.material-kind-badge
	{
		min-height: 34px;
		font-size: .52rem;
	}

	.material-row-edit
	{
		padding: 0 10px;
	}

	.material-management-card
	{
		padding: 18px;
	}

	.material-form-top-grid,
	.material-resource-summary
	{
		grid-template-columns: 1fr;
	}

	.material-resource-summary .compact-button
	{
		width: 100%;
	}
}

@media (max-width: 520px)
{
	.material-row
	{
		flex-direction: column;
	}

	.material-row-edit
	{
		min-height: 36px;
		justify-content: center;
		border-top: 1px solid var(--color-gray-200);
		border-left: 0;
	}
}


@media (max-width: 940px) {
.materials-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
.materials-heading { align-items: stretch; }
.materials-breadcrumb { align-items: flex-start; flex-direction: column; }
.materials-breadcrumb strong { max-width: 70vw; }
.materials-back-link { align-self: flex-start; }
.materials-folder-intro { padding: 22px; }
.materials-folder-intro-main { align-items: flex-start; }
.materials-folder-intro-icon { width: 62px; min-width: 62px; height: 62px; border-radius: 15px; }
.materials-folder-intro-icon svg { width: 32px; height: 32px; }
.materials-folder-edit-button { align-self: flex-start; }
.material-resource-card-main { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; padding: 13px; }
.material-resource-icon { width: 54px; height: 54px; border-radius: 13px; }
}

@media (max-width: 640px) {
.materials-folder-grid { grid-template-columns: 1fr; }
.material-folder-card-main { min-height: 178px; }
.material-resource-card-main { grid-template-columns: 52px minmax(0, 1fr); }
.material-resource-open { grid-column: 2; justify-self: start; min-width: 0; margin-top: 2px; padding: 5px 8px; }
}

@media (max-width: 520px) {
.materials-page-shell { width: calc(100% - 22px); }
.materials-heading h1 { font-size: 1.75rem; }
.materials-folder-intro { padding: 19px 17px; }
.materials-folder-intro-main { flex-direction: column; gap: 13px; }
.materials-folder-intro-icon { width: 56px; min-width: 56px; height: 56px; }
.materials-folder-intro-meta { gap: 5px; }
.materials-folder-edit-button { width: 100%; }
.materials-section-heading p { display: none; }
.material-resource-card { flex-direction: column; }
.material-resource-card-main { padding: 12px; grid-template-columns: 50px minmax(0, 1fr); gap: 11px; }
.material-resource-icon { width: 50px; height: 50px; border-radius: 12px; }
.material-resource-icon svg { width: 25px; height: 25px; }
.material-resource-edit { width: 100%; min-width: 0; min-height: 38px; border-top: 1px solid var(--color-gray-200); border-left: 0; }
.material-resource-copy h3 { font-size: .87rem; }
.material-resource-copy p { font-size: .75rem; }
}

/* =========================================================
   49. DISCUSSION BOARD
   ========================================================= */

.discussions-page-shell,
.discussion-thread-shell,
.discussion-editor-shell
{
	width: min(1160px, calc(100% - 40px));
	margin: 28px auto 72px;
}

.discussion-thread-shell,
.discussion-editor-shell
{
	width: min(980px, calc(100% - 40px));
}

.discussions-heading
{
	margin-bottom: 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
}

.discussions-heading h1
{
	margin: 2px 0 3px;
	font-size: 1.8rem;
	font-weight: 600;
}

.discussions-heading p
{
	margin: 0;
	max-width: 720px;
	color: var(--color-gray-600);
	font-size: .88rem;
}

.discussion-heading-actions,
.discussion-thread-tools
{
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.discussion-board-tabs
{
	margin-bottom: 12px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.discussion-board-tabs a
{
	padding: 8px 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
	text-decoration: none;
}

.discussion-board-tabs a:hover,
.discussion-board-tabs a.active
{
	border-color: color-mix(in srgb, var(--course-dark) 45%, var(--color-gray-300));
	background: var(--course-light);
	color: var(--course-dark);
}

.discussion-board-intro
{
	margin-bottom: 14px;
	padding: 20px 22px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--course-dark);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.discussion-board-intro-main
{
	min-width: 0;
}

.discussion-board-kicker,
.discussion-thread-kicker
{
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.discussion-board-kicker span,
.discussion-thread-kicker span
{
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--course-light);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .56rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.discussion-thread-kicker span.is-muted
{
	background: var(--color-gray-200);
	color: var(--color-gray-600);
}

.discussion-board-intro h2
{
	margin: 0;
	color: var(--course-dark);
	font-size: 1.3rem;
	font-weight: 600;
}

.discussion-board-intro p
{
	margin: 6px 0 0;
	max-width: 790px;
	color: var(--color-gray-600);
	font-size: .88rem;
	line-height: 1.55;
}

.discussion-toolbar
{
	margin-bottom: 12px;
	padding: 11px 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-white);
}

.discussion-search-field
{
	min-width: 0;
	max-width: 520px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 1;
}

.discussion-search-field .form-control
{
	min-width: 0;
}

.discussion-filter-links
{
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.discussion-filter-links a
{
	padding: 6px 9px;
	border-radius: 7px;
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .64rem;
	font-weight: 600;
	text-decoration: none;
}

.discussion-filter-links a:hover,
.discussion-filter-links a.active
{
	background: var(--course-light);
	color: var(--course-dark);
}

.discussion-topic-list
{
	display: grid;
	gap: 8px;
}

.discussion-topic-row
{
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	box-shadow: 0 2px 7px rgba(24, 39, 55, .07);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.discussion-topic-row:hover
{
	border-color: color-mix(in srgb, var(--course-dark) 38%, var(--color-gray-300));
	box-shadow: 0 7px 18px rgba(24, 39, 55, .11);
	transform: translateY(-1px);
}

.discussion-topic-row.is-pinned
{
	border-left: var(--radius-medium) solid var(--course-accent);
}

.discussion-topic-row.is-locked
{
	background: color-mix(in srgb, var(--color-gray-050) 75%, white);
}

.discussion-topic-main
{
	padding: 15px 17px;
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) 180px;
	gap: 13px;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.discussion-topic-icon
{
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--course-light);
	color: var(--course-dark);
	font-size: .65rem;
}

.discussion-topic-row.is-pinned .discussion-topic-icon
{
	background: color-mix(in srgb, var(--course-accent) 10%, white);
	color: var(--course-accent);
}

.discussion-topic-copy
{
	min-width: 0;
}

.discussion-topic-title-line
{
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.discussion-topic-title-line h3
{
	margin: 0;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.35;
}

.discussion-topic-copy p
{
	margin: 4px 0 0;
	color: var(--color-gray-600);
	font-size: .8rem;
	line-height: 1.45;
}

.discussion-status-pill,
.discussion-author-badge
{
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--course-light);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .52rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.discussion-status-pill.is-muted
{
	background: var(--color-gray-200);
	color: var(--color-gray-600);
}

.discussion-topic-meta
{
	margin-top: 7px;
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .61rem;
	font-weight: 500;
}

.discussion-topic-last
{
	padding-left: 15px;
	border-left: 1px solid var(--color-gray-200);
	display: grid;
	gap: 2px;
}

.discussion-topic-last strong
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .52rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.discussion-topic-last span
{
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
}

.discussion-topic-last small
{
	color: var(--color-gray-500);
	font-size: .6rem;
}

.discussion-empty-state
{
	margin-top: 6px;
}

.discussion-thread-breadcrumb
{
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 500;
}

.discussion-thread-breadcrumb a
{
	color: var(--course-dark);
	text-decoration: none;
}

.discussion-thread-heading
{
	margin-bottom: 14px;
	padding: 20px 22px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--course-dark);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.discussion-thread-heading-main
{
	min-width: 0;
}

.discussion-thread-heading h1
{
	margin: 0;
	color: var(--course-dark);
	font-size: 1.45rem;
	font-weight: 600;
	line-height: 1.3;
}

.discussion-thread-meta
{
	margin-top: 7px;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .64rem;
	font-weight: 500;
}

.discussion-locked-note,
.discussion-read-only-note
{
	margin-bottom: 12px;
	padding: 11px 14px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
	color: var(--color-gray-600);
	font-size: .78rem;
}

.discussion-locked-note strong,
.discussion-locked-note span
{
	display: block;
}

.discussion-locked-note strong
{
	margin-bottom: 2px;
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
}

.discussion-thread
{
	display: grid;
	gap: 9px;
}

.discussion-post
{
	position: relative;
	padding: 16px 18px;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 13px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	box-shadow: 0 2px 7px rgba(24, 39, 55, .07);
}

.discussion-post-starter
{
	border-top: var(--radius-large) solid var(--course-dark);
	border-radius: var(--radius-large);
}

.discussion-post-reply
{
	border-left: var(--radius-medium) solid color-mix(in srgb, var(--course-dark) 24%, var(--color-gray-300));
}

.discussion-children
{
	display: grid;
	gap: 8px;
}

.discussion-children-depth-1
{
	margin-left: 34px;
}

.discussion-children-depth-2
{
	margin-left: 24px;
}

.discussion-children-depth-3
{
	margin-left: 14px;
}

.discussion-avatar
{
	width: 42px;
	height: 42px;
	border: 2px solid var(--color-white);
	border-radius: 50%;
	background: var(--course-light);
	box-shadow: 0 0 0 1px var(--color-gray-300);
	object-fit: cover;
}

.discussion-avatar-initials
{
	display: grid;
	place-items: center;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 600;
}

.discussion-post-body
{
	min-width: 0;
}

.discussion-replying-to
{
	margin-bottom: 4px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .58rem;
	font-weight: 500;
}

.discussion-post-header
{
	margin-bottom: 9px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.discussion-post-author
{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.discussion-post-author strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 600;
}

.discussion-post-header time
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .58rem;
	white-space: nowrap;
}

.discussion-author-badge.is-teacher
{
	background: color-mix(in srgb, var(--course-accent) 10%, white);
	color: var(--course-accent);
}

.discussion-author-badge.is-starter
{
	background: var(--color-gray-100);
	color: var(--color-gray-600);
}

.discussion-post-content
{
	color: var(--color-gray-800);
	font-family: var(--font-reading);
	font-size: .9rem;
	line-height: 1.68;
	word-wrap: break-word;
}

.discussion-post-actions
{
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.discussion-like-form
{
	margin: 0;
}

.discussion-action-button,
.discussion-action-static
{
	padding: 4px 7px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.discussion-action-button:hover,
.discussion-action-button.is-active
{
	background: var(--course-light);
	color: var(--course-dark);
}

.discussion-inline-reply
{
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: 8px;
	background: var(--color-gray-050);
}

.discussion-inline-reply label
{
	margin-bottom: 6px;
	display: block;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 600;
}

.discussion-inline-reply textarea,
.discussion-main-reply-card textarea
{
	width: 100%;
	padding: 10px 11px;
	border: 1px solid var(--color-gray-300);
	border-radius: 7px;
	background: var(--color-white);
	color: var(--color-gray-800);
	font-family: var(--font-reading);
	font-size: .88rem;
	line-height: 1.5;
	resize: vertical;
}

.discussion-inline-reply textarea:focus,
.discussion-main-reply-card textarea:focus
{
	outline: 0;
	border-color: var(--course-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-accent) 12%, transparent);
}

.discussion-inline-reply-actions,
.discussion-main-reply-actions
{
	margin-top: 8px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.discussion-main-reply-card
{
	margin-top: 16px;
	padding: 20px 22px;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--course-accent);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.discussion-main-reply-heading
{
	margin-bottom: 11px;
}

.discussion-main-reply-heading h2
{
	margin: 1px 0 0;
	font-size: 1rem;
	font-weight: 600;
}

.discussion-editor-card
{
	padding: 26px;
}

.discussion-editor-form
{
	display: grid;
	gap: 18px;
}

.discussion-editor-form .form-field + .form-field,
.discussion-editor-form .form-grid-two .form-field + .form-field
{
	margin-top: 0;
}

.discussion-topic-options
{
	padding: 14px 16px;
	display: grid;
	gap: 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

@media (max-width: 820px)
{
	.discussion-topic-main
	{
		grid-template-columns: 28px minmax(0, 1fr);
	}

	.discussion-topic-last
	{
		grid-column: 2;
		padding: 7px 0 0;
		border-top: 1px solid var(--color-gray-200);
		border-left: 0;
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
	}
}

@media (max-width: 760px)
{
	.discussions-page-shell,
	.discussion-thread-shell,
	.discussion-editor-shell
	{
		width: calc(100% - 22px);
		margin-top: 18px;
	}

	.discussions-heading,
	.discussion-board-intro,
	.discussion-thread-heading
	{
		align-items: stretch;
		flex-direction: column;
	}

	.discussion-heading-actions,
	.discussion-thread-tools
	{
		width: 100%;
	}

	.discussion-heading-actions .primary-button,
	.discussion-heading-actions .secondary-button
	{
		flex: 1;
	}

	.discussion-toolbar
	{
		align-items: stretch;
		flex-direction: column;
	}

	.discussion-search-field
	{
		max-width: none;
	}

	.discussion-filter-links
	{
		padding-top: 8px;
		border-top: 1px solid var(--color-gray-200);
	}

	.discussion-children-depth-1,
	.discussion-children-depth-2,
	.discussion-children-depth-3
	{
		margin-left: 14px;
	}

	.discussion-post
	{
		padding: 14px;
		grid-template-columns: 36px minmax(0, 1fr);
		gap: 10px;
	}

	.discussion-avatar
	{
		width: 34px;
		height: 34px;
	}

	.discussion-post-header
	{
		align-items: flex-start;
		flex-direction: column;
		gap: 3px;
	}

	.discussion-editor-card
	{
		padding: 18px;
	}
}

@media (max-width: 520px)
{
	.discussion-search-field
	{
		align-items: stretch;
		flex-direction: column;
	}

	.discussion-topic-main
	{
		padding: 13px;
		grid-template-columns: 22px minmax(0, 1fr);
		gap: 9px;
	}

	.discussion-topic-icon
	{
		width: 22px;
		height: 22px;
	}

	.discussion-post
	{
		grid-template-columns: 1fr;
	}

	.discussion-post-rail
	{
		display: none;
	}

	.discussion-children-depth-1,
	.discussion-children-depth-2,
	.discussion-children-depth-3
	{
		margin-left: 7px;
	}
}


/* =========================================================
   54. PEOPLE / CLASSROOM ROSTER
   ========================================================= */

.people-page-shell,
.people-profile-shell
{
	width: min(1120px, calc(100% - 40px));
	margin: 28px auto 72px;
}

.people-heading
{
	margin-bottom: 18px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.people-heading h1
{
	margin: 2px 0 3px;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: -.015em;
}

.people-heading p
{
	margin: 0;
	color: var(--color-gray-600);
	font-size: .9rem;
}

.people-count-summary
{
	padding: 9px 12px;
	display: flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .68rem;
	font-weight: 500;
	white-space: nowrap;
}

.people-count-summary strong
{
	color: var(--course-dark);
	font-weight: 600;
}

.people-count-divider
{
	margin: 0 2px;
	color: var(--color-gray-400);
}

.people-toolbar
{
	margin-bottom: 18px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.people-search-field
{
	min-width: 220px;
	max-width: 420px;
	flex: 1;
}

.people-search-field input
{
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
	color: var(--color-text);
	font-family: var(--font-reading);
	font-size: .86rem;
}

.people-search-field input:focus
{
	outline: 0;
	border-color: var(--course-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--course-accent) 12%, transparent);
	background: var(--color-white);
}

.people-role-filters
{
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.people-filter-button
{
	padding: 7px 10px;
	border: 1px solid var(--color-gray-300);
	border-radius: 999px;
	background: var(--color-white);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .66rem;
	font-weight: 600;
	cursor: pointer;
}

.people-filter-button span
{
	margin-left: 3px;
	color: var(--color-gray-500);
}

.people-filter-button:hover,
.people-filter-button.active
{
	border-color: color-mix(in srgb, var(--course-dark) 35%, var(--color-gray-300));
	background: var(--course-light);
	color: var(--course-dark);
}

.people-group
{
	margin-bottom: 22px;
}

.people-group-heading
{
	margin-bottom: 8px;
	padding: 0 3px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.people-group-heading h2
{
	margin: 0;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.people-group-heading span
{
	min-width: 22px;
	padding: 2px 6px;
	border-radius: 999px;
	background: var(--color-gray-200);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .56rem;
	font-weight: 600;
	text-align: center;
}

.people-list
{
	display: grid;
	gap: 8px;
}


/* The People roster is filtered client-side with the HTML hidden attribute.
   Explicitly honor it because .person-row's display:flex would otherwise
   override the browser's default hidden styling. */
.person-row[hidden],
.people-group[hidden],
.people-no-results[hidden]
{
	display: none !important;
}

.person-row
{
	display: flex;
	align-items: stretch;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: 0 2px 7px rgba(24, 39, 55, .07);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.person-row:hover
{
	border-color: color-mix(in srgb, var(--course-dark) 35%, var(--color-gray-300));
	box-shadow: 0 6px 16px rgba(24, 39, 55, .11);
	transform: translateY(-1px);
}

.person-row-role-teacher
{
	border-top: var(--radius-large) solid var(--course-dark);
}

.person-row-main
{
	min-width: 0;
	padding: 13px 15px;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 22px;
	gap: 13px;
	align-items: center;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.person-avatar,
.people-profile-avatar
{
	overflow: hidden;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--course-light);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-weight: 600;
}

.person-avatar
{
	width: 46px;
	height: 46px;
	font-size: .72rem;
}

.person-avatar img,
.people-profile-avatar img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.person-row-copy
{
	min-width: 0;
}

.person-row-name-line
{
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.person-row-name-line strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .92rem;
	font-weight: 600;
}

.person-you-badge,
.person-role-label
{
	padding: 2px 6px;
	border-radius: 999px;
	font-family: var(--font-interface);
	font-size: .52rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.person-you-badge
{
	background: var(--course-light);
	color: var(--course-dark);
}

.person-row-meta
{
	margin-top: 3px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 500;
}

.person-role-label
{
	background: var(--color-gray-100);
	color: var(--color-gray-600);
}

.person-role-label-teacher
{
	background: var(--course-light);
	color: var(--course-dark);
}

.person-role-label-observer
{
	background: var(--color-gray-200);
	color: var(--color-gray-600);
}

.person-row-copy p
{
	margin: 5px 0 0;
	overflow: hidden;
	color: var(--color-gray-600);
	font-size: .8rem;
	line-height: 1.45;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.person-row-arrow
{
	color: var(--color-gray-400);
	font-family: var(--font-interface);
	font-size: 1.2rem;
}

.person-role-form
{
	min-width: 136px;
	padding: 10px 12px;
	display: grid;
	align-items: center;
	border-left: 1px solid var(--color-gray-200);
	background: var(--color-gray-050);
}

.person-role-form label
{
	display: grid;
	gap: 4px;
}

.person-role-form label > span
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .54rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.person-role-form select,
.people-profile-role-form select
{
	padding: 7px 28px 7px 8px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-small);
	background: var(--color-white);
	color: var(--color-gray-700);
	font-size: .7rem;
	font-weight: 500;
}

.person-scope-note
{
	min-width: 108px;
	padding: 0 13px;
	display: grid;
	place-items: center;
	border-left: 1px solid var(--color-gray-200);
	background: var(--color-gray-050);
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .6rem;
	font-weight: 600;
	text-align: center;
}

.people-no-results
{
	margin-bottom: 18px;
	padding: 24px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	text-align: center;
}

.people-no-results strong,
.people-no-results span
{
	display: block;
}

.people-no-results strong
{
	margin-bottom: 4px;
	font-family: var(--font-interface);
	font-size: .9rem;
}

.people-no-results span
{
	color: var(--color-gray-500);
	font-size: .8rem;
}

.people-back-link
{
	display: inline-block;
	margin-bottom: 12px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	text-decoration: none;
}

.people-profile-card
{
	overflow: hidden;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--course-dark);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.people-profile-identity
{
	padding: 28px;
	display: flex;
	align-items: center;
	gap: 20px;
}

.people-profile-avatar
{
	width: 86px;
	height: 86px;
	flex: 0 0 86px;
	font-size: 1.18rem;
}

.people-profile-kicker
{
	margin-bottom: 5px;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.people-profile-kicker span
{
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--course-light);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .56rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.people-profile-identity h1
{
	margin: 0;
	font-size: 1.65rem;
	font-weight: 600;
}

.people-profile-identity p
{
	margin: 5px 0 0;
	color: var(--color-gray-600);
	font-size: .86rem;
}

.people-profile-details
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--color-gray-200);
	border-bottom: 1px solid var(--color-gray-200);
	background: var(--color-gray-050);
}

.people-profile-details section
{
	padding: 15px 20px;
	border-right: 1px solid var(--color-gray-200);
}

.people-profile-details section:last-child
{
	border-right: 0;
}

.people-profile-label
{
	margin-bottom: 3px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .56rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.people-profile-details strong
{
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .78rem;
	font-weight: 600;
}

.people-profile-about
{
	padding: 22px 28px;
}

.people-profile-about p
{
	margin: 5px 0 0;
	max-width: 760px;
	color: var(--color-gray-700);
	font-size: .9rem;
}

.people-profile-teacher-tools
{
	padding: 18px 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-top: 1px solid var(--color-gray-200);
	background: color-mix(in srgb, var(--course-light) 45%, white);
}

.people-profile-teacher-tools p
{
	margin: 3px 0 0;
	color: var(--color-gray-600);
	font-size: .78rem;
}

.people-profile-role-form
{
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.people-profile-scope-note
{
	margin: 0 28px 24px;
	padding: 12px 14px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.people-profile-scope-note strong,
.people-profile-scope-note span
{
	display: block;
}

.people-profile-scope-note strong
{
	margin-bottom: 2px;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
}

.people-profile-scope-note span
{
	color: var(--color-gray-600);
	font-size: .76rem;
}

@media (max-width: 760px)
{
	.people-page-shell,
	.people-profile-shell
	{
		width: calc(100% - 22px);
		margin-top: 18px;
	}

	.people-heading
	{
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}

	.people-count-summary
	{
		align-self: flex-start;
		white-space: normal;
	}

	.people-toolbar
	{
		align-items: stretch;
		flex-direction: column;
	}

	.people-search-field
	{
		max-width: none;
	}

	.people-role-filters
	{
		justify-content: flex-start;
	}

	.person-row
	{
		flex-direction: column;
	}

	.person-role-form,
	.person-scope-note
	{
		padding: 10px 14px;
		border-top: 1px solid var(--color-gray-200);
		border-left: 0;
	}

	.person-role-form label
	{
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;
		gap: 10px;
	}

	.people-profile-identity
	{
		padding: 22px;
	}

	.people-profile-details
	{
		grid-template-columns: 1fr;
	}

	.people-profile-details section
	{
		border-right: 0;
		border-bottom: 1px solid var(--color-gray-200);
	}

	.people-profile-details section:last-child
	{
		border-bottom: 0;
	}

	.people-profile-teacher-tools
	{
		align-items: stretch;
		flex-direction: column;
	}
}

@media (max-width: 520px)
{
	.person-row-main
	{
		padding: 12px;
		grid-template-columns: 40px minmax(0, 1fr) 16px;
		gap: 10px;
	}

	.person-avatar
	{
		width: 40px;
		height: 40px;
	}

	.people-profile-identity
	{
		align-items: flex-start;
		flex-direction: column;
	}

	.people-profile-avatar
	{
		width: 72px;
		height: 72px;
		flex-basis: 72px;
	}

	.people-profile-role-form
	{
		align-items: stretch;
		flex-direction: column;
	}
}


/* =========================================================
   31. AUTHENTICATION / LANDING / MY CLASSES
   v15
   ========================================================= */

.auth-page,
.landing-page,
.classes-page
{
	min-height: 100vh;
}

.auth-page
{
	background:
		linear-gradient( 135deg, rgba(23, 63, 119, .08), rgba(200, 41, 58, .05) ),
		var(--color-page);
}

.auth-shell
{
	width: min(1100px, calc(100% - 36px));
	min-height: 100vh;
	margin: 0 auto;
	padding: 48px 0;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(360px, .75fr);
	align-items: center;
	gap: 34px;
}

.auth-shell-single
{
	grid-template-columns: minmax(0, 560px);
	justify-content: center;
}

.auth-brand-panel,
.auth-card
{
	border: 1px solid var(--color-gray-300);
	border-radius: 18px;
	background: var(--color-white);
	box-shadow: 0 16px 40px rgba(20, 38, 60, .12);
}

.auth-brand-panel
{
	min-height: 470px;
	padding: 42px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-top: 18px solid var(--color-blue);
}

.auth-logo
{
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.auth-logo img
{
	display: block;
	max-width: 300px;
	height: 70px;
	object-fit: cover;
	object-position: left center;
}

.auth-logo-small img
{
	height: 56px;
	margin-bottom: 22px;
}

.auth-brand-copy
{
	max-width: 610px;
}

.auth-brand-copy h1
{
	margin: 8px 0 14px;
	font-size: clamp(2rem, 4vw, 3.35rem);
	line-height: 1.05;
	letter-spacing: -.035em;
	color: var(--color-blue-dark);
}

.auth-brand-copy p
{
	margin: 0;
	max-width: 560px;
	color: var(--color-gray-600);
	font-size: 1.05rem;
}

.auth-card
{
	padding: 34px;
	border-top: 18px solid var(--color-red);
}

.account-card
{
	border-top-color: var(--color-blue);
}

.auth-card h1,
.auth-card h2
{
	margin: 5px 0 8px;
	color: var(--color-blue-dark);
	font-size: 2rem;
}

.auth-intro
{
	margin: 0 0 24px;
	color: var(--color-gray-600);
}

.auth-message
{
	margin: 0 0 20px;
}

.auth-form
{
	display: grid;
	gap: 18px;
}

.auth-form label
{
	display: grid;
	gap: 7px;
}

.auth-form label > span
{
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 600;
	color: var(--color-gray-700);
}

.auth-form input
{
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	color: var(--color-text);
	outline: none;
}

.auth-form input:focus
{
	border-color: var(--color-blue);
	box-shadow: 0 0 0 3px rgba(23, 63, 119, .10);
}

.auth-form small
{
	color: var(--color-gray-500);
}

.auth-submit
{
	width: 100%;
	margin-top: 2px;
	padding: 12px 18px;
	background: var(--color-blue);
}

.auth-form-actions
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 4px;
}

.auth-development-note
{
	margin-top: 24px;
	padding: 14px 15px;
	display: grid;
	gap: 4px;
	border-radius: var(--radius-medium);
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	font-size: .84rem;
}

.auth-development-note strong
{
	font-family: var(--font-interface);
	color: var(--color-gray-700);
	font-weight: 600;
}

.landing-page
{
	background:
		linear-gradient( 145deg, rgba(23, 63, 119, .08), transparent 45% ),
		linear-gradient( 320deg, rgba(200, 41, 58, .06), transparent 40% ),
		#eceff2;
}

.landing-shell
{
	width: min(1180px, calc(100% - 40px));
	min-height: 100vh;
	margin: 0 auto;
	padding: 52px 0;
	display: flex;
	align-items: center;
}

.landing-card
{
	width: 100%;
	border: 1px solid #d7dce1;
	border-radius: 20px;
	background: var(--color-white);
	box-shadow: 0 20px 54px rgba(24, 39, 55, .15);
	overflow: hidden;
}

.landing-logo-row
{
	padding: 30px 34px 24px;
	border-top: 20px solid var(--color-blue);
}

.landing-logo-row img
{
	display: block;
	height: 72px;
	max-width: 320px;
	object-fit: contain;
	object-position: left center;
}

.landing-content
{
	min-height: 430px;
	padding: 54px 58px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 160px;
	gap: 44px;
	align-items: center;
}

.landing-copy
{
	max-width: 720px;
}

.landing-copy h1
{
	margin: 8px 0 18px;
	font-size: clamp(2.2rem, 5vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -.04em;
	color: var(--color-blue-dark);
}

.landing-copy p
{
	max-width: 660px;
	margin: 0;
	font-size: 1.08rem;
	color: var(--color-gray-600);
}

.landing-actions
{
	margin-top: 28px;
}

.landing-login-button
{
	padding: 12px 24px;
	background: var(--color-red);
}

.landing-stripes
{
	height: 240px;
	display: flex;
	gap: 12px;
	align-items: stretch;
	justify-content: flex-end;
}

.landing-stripes span
{
	width: 34px;
	border-radius: 17px;
	background: var(--color-blue);
}

.landing-stripes span:nth-child(2)
{
	background: var(--color-gray-300);
}

.landing-stripes span:nth-child(3)
{
	background: var(--color-red);
}

.portal-header
{
	background: var(--color-white);
	border-bottom: 1px solid var(--color-gray-300);
}

.portal-header-inner
{
	width: min(var(--page-width), calc(100% - 40px));
	height: 82px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.portal-brand
{
	display: flex;
	align-items: center;
	text-decoration: none;
}

.portal-brand img
{
	display: block;
	height: 56px;
	max-width: 300px;
	object-fit: contain;
}

.portal-user-menu,
.header-user-menu
{
	position: relative;
	margin-left: auto;
}

.portal-user-menu summary,
.header-user-menu summary
{
	list-style: none;
}

.portal-user-menu summary::-webkit-details-marker,
.header-user-menu summary::-webkit-details-marker
{
	display: none;
}

.portal-user-menu summary
{
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 8px;
	font-family: var(--font-interface);
	font-weight: 600;
	color: var(--color-gray-700);
	cursor: pointer;
}

.portal-user-menu summary:hover,
.header-user-menu summary:hover
{
	background: var(--color-gray-100);
}

.portal-user-menu summary img
{
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-gray-300);
}

.portal-user-menu-panel,
.header-user-menu-panel
{
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 50;
	min-width: 190px;
	padding: 7px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: 0 14px 34px rgba(20, 38, 60, .18);
}

.portal-user-menu-panel a,
.portal-user-menu-panel button,
.header-user-menu-panel a,
.header-user-menu-panel button
{
	width: 100%;
	padding: 9px 10px;
	display: block;
	border: 0;
	border-radius: var(--radius-small);
	background: transparent;
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .84rem;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.portal-user-menu-panel a:hover,
.portal-user-menu-panel button:hover,
.header-user-menu-panel a:hover,
.header-user-menu-panel button:hover
{
	background: var(--color-gray-100);
}

.portal-user-menu-panel form,
.header-user-menu-panel form
{
	margin: 0;
}

.header-user-menu .user-button
{
	list-style: none;
}

.classes-shell
{
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
	padding: 38px 0 60px;
}

.classes-heading
{
	margin-bottom: 28px;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
}

.classes-heading h1
{
	margin: 4px 0 4px;
	font-size: 2.25rem;
	color: var(--color-blue-dark);
}

.classes-heading p
{
	margin: 0;
	color: var(--color-gray-600);
}

.classes-user-greeting
{
	display: grid;
	text-align: right;
	font-family: var(--font-interface);
}

.classes-user-greeting span
{
	color: var(--color-gray-500);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.classes-user-greeting strong
{
	color: var(--color-gray-700);
	font-size: .92rem;
}

.classes-year-group + .classes-year-group
{
	margin-top: 34px;
}

.classes-year-heading
{
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.classes-year-heading h2
{
	margin: 0;
	font-size: 1.1rem;
	color: var(--color-gray-700);
}

.classes-year-heading span
{
	font-family: var(--font-interface);
	font-size: .78rem;
	color: var(--color-gray-500);
}

.classes-role-group + .classes-role-group
{
	margin-top: 34px;
	padding-top: 28px;
	border-top: 1px solid var(--color-gray-300);
}

.classes-role-heading
{
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.classes-role-heading h3
{
	margin: 0;
	font-size: .92rem;
	color: var(--color-blue-dark);
}

.classes-role-heading span
{
	font-family: var(--font-interface);
	font-size: .74rem;
	color: var(--color-gray-500);
}

.classes-role-group-observer .classes-role-heading h3
{
	color: var(--color-gray-700);
}

.class-card-grid
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.class-card
{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 240px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	text-decoration: none;
	transition: transform .16s ease, box-shadow .16s ease;
}

.class-card:hover
{
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(24, 39, 55, .15);
}

.class-card-accent
{
	height: var(--radius-large);
	flex: 0 0 var(--radius-large);
	background: var(--course-accent);
}

.class-card-photo
{
	height: 105px;
	background: var(--course-dark);
	overflow: hidden;
}

.class-card-photo img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.class-card-body
{
	flex: 1;
	padding: 18px;
	display: flex;
	flex-direction: column;
}

.class-card-topline
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--font-interface);
	font-size: .72rem;
	color: var(--color-gray-500);
}

.class-role-badge
{
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--course-light);
	color: var(--course-dark);
	font-weight: 600;
}

.class-card h3
{
	margin: 14px 0 3px;
	font-size: 1.2rem;
	line-height: 1.25;
	color: var(--course-dark);
}

.class-card-section
{
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .88rem;
}

.class-card-open
{
	margin-top: auto;
	padding-top: 18px;
	color: var(--course-accent);
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
}

.classes-empty-state
{
	max-width: none;
}

.portal-footer
{
	padding: 28px 20px 40px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .78rem;
	text-align: center;
}

@media (max-width: 900px)
{
	.auth-shell
	{
		grid-template-columns: 1fr;
		align-items: start;
	}

	.auth-brand-panel
	{
		min-height: 0;
	}

	.class-card-grid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 640px)
{
	.auth-shell,
	.landing-shell,
	.classes-shell
	{
		width: min(100% - 24px, 100%);
	}

	.auth-shell
	{
		padding: 22px 0;
	}

	.auth-brand-panel
	{
		display: none;
	}

	.auth-card
	{
		padding: 26px 22px;
	}

	.landing-shell
	{
		padding: 22px 0;
	}

	.landing-logo-row
	{
		padding: 24px;
		border-top-width: 20px;
	}

	.landing-content
	{
		min-height: 0;
		padding: 34px 26px 40px;
		grid-template-columns: 1fr;
	}

	.landing-stripes
	{
		display: none;
	}

	.portal-header-inner
	{
		width: calc(100% - 24px);
	}

	.portal-brand img
	{
		height: 45px;
		max-width: 210px;
	}

	.portal-user-menu summary span:nth-of-type(1)
	{
		display: none;
	}

	.classes-heading
	{
		align-items: start;
		flex-direction: column;
	}

	.classes-user-greeting
	{
		text-align: left;
	}

	.class-card-grid
	{
		grid-template-columns: 1fr;
	}

	.header-user-menu .user-name
	{
		display: none;
	}
}


/* =========================================================
   32. COURSE / SECTION SETUP (v16)
   ========================================================= */

.setup-shell
{
	width: min(1180px, calc(100% - 40px));
	margin: 28px auto 72px;
}

.setup-shell-wide
{
	width: min(1240px, calc(100% - 40px));
}

.setup-shell-narrow
{
	width: min(820px, calc(100% - 40px));
}

.setup-page-heading
{
	margin-bottom: 20px;
}

.setup-page-heading-actions
{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}

.setup-page-heading h1
{
	margin: 2px 0 3px;
	font-size: 1.9rem;
	letter-spacing: -.02em;
}

.setup-page-heading p
{
	margin: 0;
	color: var(--color-gray-600);
	font-size: .9rem;
}

.setup-layout
{
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
	gap: 22px;
	align-items: start;
}

.section-settings-layout
{
	grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
}

.setup-main-column,
.setup-side-column
{
	min-width: 0;
}

.setup-form
{
	display: grid;
	gap: 18px;
}

.setup-card
{
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.setup-card-accent
{
	border-top: var(--radius-large) solid var(--course-dark);
}

.setup-card-header
{
	padding: 18px 20px 16px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	border-bottom: 1px solid var(--color-gray-200);
	background: linear-gradient(180deg, var(--color-white), var(--color-gray-050));
}

.setup-card-header > div
{
	position: relative;
}

.setup-card-header h2
{
	margin: 0 0 3px;
	font-size: 1.05rem;
	font-weight: 600;
}

.setup-card-header p
{
	margin: 0;
	color: var(--color-gray-600);
	font-size: .82rem;
	line-height: 1.5;
}

.setup-step-number
{
	width: 28px;
	height: 28px;
	margin-bottom: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--course-light);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .76rem;
	font-weight: 700;
}

.setup-card-body
{
	padding: 20px;
}

.setup-card-footer
{
	padding: 14px 20px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	border-top: 1px solid var(--color-gray-200);
	background: var(--color-gray-050);
}

.form-grid
{
	display: grid;
	gap: 16px;
}

.form-grid-two
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field-wide
{
	grid-column: 1 / -1;
}

.form-field
{
	display: grid;
	gap: 6px;
}

.form-field > span,
.theme-color-label
{
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.form-field > span small
{
	color: var(--color-gray-500);
	font-weight: 500;
}

.form-field input,
.form-field select,
.form-field textarea,
.theme-color-control input[type="text"]
{
	width: 100%;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-small);
	padding: 10px 11px;
	background: var(--color-white);
	color: var(--color-text);
	font-family: var(--font-reading);
	font-size: .9rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.theme-color-control input[type="text"]:focus
{
	outline: 2px solid color-mix(in srgb, var(--course-accent) 24%, transparent);
	outline-offset: 1px;
	border-color: var(--course-accent);
}

.form-field textarea
{
	resize: vertical;
	min-height: 104px;
}

.form-field small,
.theme-color-field small
{
	color: var(--color-gray-500);
	font-size: .72rem;
	line-height: 1.45;
}

.toggle-field
{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 13px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
	cursor: pointer;
}

.toggle-field input
{
	margin-top: 3px;
}

.toggle-field span
{
	display: grid;
	gap: 2px;
}

.toggle-field strong
{
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 600;
}

.toggle-field small
{
	color: var(--color-gray-500);
	font-size: .72rem;
}

.setup-form-actions
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.full-width-button
{
	width: 100%;
}

.setup-note-card
{
	padding: 16px 18px;
	border: 1px solid var(--color-gray-300);
	border-left: var(--radius-medium) solid var(--course-accent);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

.setup-note-card strong
{
	font-family: var(--font-interface);
	font-size: .8rem;
}

.setup-note-card p
{
	margin: 4px 0 0;
	color: var(--color-gray-600);
	font-size: .78rem;
	line-height: 1.55;
}

/* New-course section builder */

.section-builder
{
	display: grid;
	gap: 10px;
}

.section-builder-row
{
	display: grid;
	grid-template-columns: 34px minmax(180px, 1.4fr) minmax(90px, .55fr) minmax(120px, .7fr) minmax(120px, .7fr) 32px;
	gap: 10px;
	align-items: end;
	padding: 12px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.section-builder-number
{
	width: 30px;
	height: 30px;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--course-dark);
	color: #fff;
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
}

.section-remove-button
{
	width: 32px;
	height: 38px;
	border: 0;
	border-radius: var(--radius-small);
	background: transparent;
	color: var(--color-gray-500);
	font-size: 1.25rem;
	cursor: pointer;
}

.section-remove-button:hover:not(:disabled)
{
	background: var(--color-red-light);
	color: var(--color-red);
}

.section-remove-button:disabled
{
	opacity: .25;
	cursor: default;
}

/* Section cards on Course Setup */

.setup-section-list
{
	display: grid;
}

.setup-section-card
{
	min-width: 0;
	padding: 13px 15px;
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 16px;
	gap: 11px;
	align-items: center;
	border-bottom: 1px solid var(--color-gray-200);
	text-decoration: none;
}

.setup-section-card:hover
{
	background: var(--color-gray-050);
}

.setup-section-card.is-current
{
	background: var(--course-light);
}

.setup-section-swatch
{
	height: 34px;
	display: grid;
	grid-template-columns: 1.4fr .8fr .8fr;
	border-radius: var(--radius-small);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.setup-section-swatch span:nth-child(1)
{
	background: var(--section-dark);
}

.setup-section-swatch span:nth-child(2)
{
	background: var(--section-light);
}

.setup-section-swatch span:nth-child(3)
{
	background: var(--section-accent);
}

.setup-section-copy
{
	min-width: 0;
	display: grid;
	gap: 2px;
}

.setup-section-copy strong
{
	overflow: hidden;
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.setup-section-copy span
{
	color: var(--color-gray-500);
	font-size: .7rem;
}

.setup-section-arrow
{
	color: var(--color-gray-400);
	font-size: 1.35rem;
}

/* Theme editor */

.theme-color-grid
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.theme-color-field
{
	padding: 13px;
	display: grid;
	gap: 7px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.theme-color-control
{
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr);
	gap: 8px;
}

.theme-color-control input[type="color"]
{
	width: 42px;
	height: 40px;
	padding: 2px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-small);
	background: #fff;
	cursor: pointer;
}

.theme-preset-row
{
	margin-top: 15px;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .7rem;
}

.theme-preset-button
{
	padding: 6px 9px;
	border: 1px solid var(--color-gray-300);
	border-radius: 999px;
	background: #fff;
	color: var(--color-gray-700);
	font-size: .68rem;
	font-weight: 500;
	cursor: pointer;
}

.theme-preset-button:hover
{
	border-color: var(--course-accent);
	color: var(--course-dark);
}

.theme-clear-photo
{
	margin-top: 15px;
}

.theme-preview-sticky
{
	position: sticky;
	top: 20px;
}

.theme-preview-sticky > .eyebrow
{
	margin-bottom: 7px;
}

.theme-preview
{
	--preview-dark: var(--course-dark);
	--preview-light: var(--course-light);
	--preview-accent: var(--course-accent);
	--preview-position: center center;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--preview-accent);
	border-radius: var(--radius-large);
	background: #fff;
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.theme-preview-hero
{
	min-height: 170px;
	padding: 24px;
	display: flex;
	align-items: flex-end;
	background-color: var(--preview-dark);
	background-position: var(--preview-position);
	background-size: cover;
}

.theme-preview-copy
{
	display: grid;
	gap: 2px;
	color: #fff;
}

.theme-preview-copy small
{
	font-family: var(--font-interface);
	font-size: .65rem;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	opacity: .78;
}

.theme-preview-copy strong
{
	font-family: var(--font-interface);
	font-size: 1.15rem;
	font-weight: 600;
}

.theme-preview-copy span
{
	font-size: .8rem;
	opacity: .9;
}

.theme-preview-nav
{
	display: flex;
	background: var(--preview-dark);
	color: #fff;
	font-family: var(--font-interface);
	font-size: .62rem;
}

.theme-preview-nav span
{
	padding: 9px 10px 8px;
	border-bottom: 3px solid transparent;
}

.theme-preview-nav span.is-active
{
	background: rgba(255, 255, 255, .08);
	border-bottom-color: var(--preview-accent);
}

.theme-preview-card
{
	margin: 16px;
	padding: 0 14px 14px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	overflow: hidden;
}

.theme-preview-card-hat
{
	height: var(--radius-medium);
	margin: 0 -14px 12px;
	background: var(--preview-accent);
}

.theme-preview-card strong
{
	color: var(--preview-dark);
	font-family: var(--font-interface);
	font-size: .8rem;
}

.theme-preview-card p
{
	margin: 4px 0 10px;
	color: var(--color-gray-600);
	font-size: .7rem;
	line-height: 1.5;
}

.theme-preview-card button
{
	padding: 7px 10px;
	border: 0;
	border-radius: var(--radius-small);
	background: var(--preview-accent);
	color: #fff;
	font-family: var(--font-interface);
	font-size: .66rem;
	font-weight: 600;
}

.sticky-save-actions
{
	padding: 12px 0 0;
}

.setup-portal-actions
{
	display: flex;
	align-items: center;
	gap: 10px;
}

.classes-heading-main-actions
{
	display: flex;
	align-items: center;
	gap: 12px;
}

.course-nav-settings
{
	margin-left: auto;
}

@media (max-width: 900px)
{
	.setup-layout,
	.section-settings-layout
	{
		grid-template-columns: 1fr;
	}

	.theme-preview-sticky
	{
		position: static;
	}

	.section-builder-row
	{
		grid-template-columns: 34px minmax(0, 1fr) minmax(90px, .6fr) 32px;
	}

	.section-builder-row .form-field:nth-of-type(3),
	.section-builder-row .form-field:nth-of-type(4)
	{
		grid-column: span 2;
	}
}

@media (max-width: 640px)
{
	.setup-shell,
	.setup-shell-wide,
	.setup-shell-narrow
	{
		width: calc(100% - 22px);
		margin-top: 18px;
	}

	.setup-page-heading-actions,
	.setup-card-header
	{
		align-items: stretch;
		flex-direction: column;
	}

	.setup-page-heading-actions .primary-button,
	.setup-page-heading-actions .secondary-button,
	.setup-card-header .secondary-button
	{
		width: 100%;
	}

	.form-grid-two,
	.theme-color-grid
	{
		grid-template-columns: 1fr;
	}

	.form-field-wide
	{
		grid-column: auto;
	}

	.section-builder-row
	{
		grid-template-columns: 30px minmax(0, 1fr) 30px;
	}

	.section-builder-row .form-field
	{
		grid-column: 2;
	}

	.section-builder-row .section-remove-button
	{
		grid-column: 3;
		grid-row: 1;
	}

	.section-builder-row .section-builder-number
	{
		grid-column: 1;
		grid-row: 1;
	}

	.setup-form-actions
	{
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.setup-form-actions .primary-button,
	.setup-form-actions .secondary-button
	{
		width: 100%;
	}

	.classes-heading-main-actions
	{
		width: 100%;
		align-items: stretch;
		flex-direction: column;
	}

	.course-nav-settings
	{
		margin-left: 0;
	}
}


/* =========================================================
   33. SCHOOL ADMINISTRATION / PEOPLE (v17)
   ========================================================= */

.admin-page
{
	min-height: 100vh;
	background: var(--color-page);
}

.admin-header-inner
{
	justify-content: flex-start;
}

.admin-header-title
{
	display: grid;
	gap: 1px;
	margin-left: 10px;
	padding-left: 18px;
	border-left: 1px solid var(--color-gray-300);
	font-family: var(--font-interface);
}

.admin-header-title strong
{
	color: var(--color-blue-dark);
	font-size: .92rem;
	font-weight: 600;
}

.admin-header-title span
{
	color: var(--color-gray-500);
	font-size: .72rem;
}

.admin-nav
{
	background: var(--color-white);
	border-bottom: 1px solid var(--color-gray-300);
}

.admin-nav-inner
{
	width: min(var(--page-width), calc(100% - 40px));
	min-height: 48px;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	gap: 4px;
}

.admin-nav a
{
	position: relative;
	padding: 14px 15px 12px;
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 600;
	text-decoration: none;
}

.admin-nav a:hover
{
	color: var(--color-blue-dark);
	background: var(--color-gray-050);
}

.admin-nav a.active
{
	color: var(--color-blue-dark);
}

.admin-nav a.active::after
{
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 4px;
	border-radius: 4px 4px 0 0;
	background: var(--color-red);
}

.admin-shell
{
	width: min(1240px, calc(100% - 40px));
	margin: 30px auto 72px;
}

.admin-shell-form
{
	width: min(1040px, calc(100% - 40px));
}

.admin-page-heading
{
	margin-bottom: 22px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.admin-page-heading h1
{
	margin: 3px 0 5px;
	color: var(--color-blue-dark);
	font-size: 2.15rem;
}

.admin-page-heading p
{
	max-width: 760px;
	margin: 0;
	color: var(--color-gray-600);
}

.admin-heading-actions
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.admin-card
{
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}

.admin-card-header
{
	min-height: 62px;
	padding: 15px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--color-gray-300);
	background: var(--color-gray-050);
}

.admin-card-header h2
{
	margin: 0;
	color: var(--color-blue-dark);
	font-size: 1rem;
}

.admin-card-header p
{
	margin: 3px 0 0;
	color: var(--color-gray-500);
	font-size: .82rem;
}

.admin-stat-grid
{
	margin-bottom: 18px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
}

.admin-stat-card
{
	min-height: 90px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border: 1px solid var(--color-gray-300);
	border-top: 4px solid var(--color-blue);
	border-radius: 0 0 var(--radius-large) var(--radius-large);
	background: var(--color-white);
}

.admin-stat-card strong
{
	font-family: var(--font-interface);
	font-size: 1.45rem;
	font-weight: 600;
	color: var(--color-blue-dark);
}

.admin-stat-card span
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.admin-filter-card
{
	margin-bottom: 18px;
	border-top: var(--radius-large) solid var(--color-blue);
}

.admin-filter-form
{
	padding: 16px 18px;
	display: grid;
	grid-template-columns: minmax(260px, 1.5fr) minmax(160px, .6fr) minmax(150px, .55fr) auto;
	align-items: end;
	gap: 14px;
}

.admin-filter-form label,
.admin-form-field
{
	display: grid;
	gap: 6px;
}

.admin-filter-form label > span,
.admin-form-field > span,
.admin-membership-row label > span
{
	font-family: var(--font-interface);
	font-size: .73rem;
	font-weight: 600;
	color: var(--color-gray-700);
}

.admin-filter-form input,
.admin-filter-form select,
.admin-form-field input,
.admin-form-field select,
.admin-form-field textarea,
.admin-membership-row select,
.admin-add-enrollment-form select,
.admin-password-row input
{
	width: 100%;
	padding: 10px 11px;
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	color: var(--color-text);
	outline: none;
}

.admin-filter-form input,
.admin-filter-form select
{
	height: 46px;
	font-family: var(--font-reading);
	font-size: .92rem;
	line-height: 1.2;
}

.admin-form-field textarea
{
	resize: vertical;
	min-height: 96px;
}

.admin-filter-form input:focus,
.admin-filter-form select:focus,
.admin-form-field input:focus,
.admin-form-field select:focus,
.admin-form-field textarea:focus,
.admin-membership-row select:focus,
.admin-add-enrollment-form select:focus,
.admin-password-row input:focus
{
	border-color: var(--color-blue);
	box-shadow: 0 0 0 3px rgba(23, 63, 119, .09);
}

.admin-filter-actions
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
}

.admin-people-card
{
	border-top: var(--radius-large) solid var(--color-red);
}

.admin-people-table-wrap,
.admin-import-table-wrap
{
	overflow-x: auto;
}

.admin-people-table,
.admin-import-table
{
	width: 100%;
	border-collapse: collapse;
}

.admin-people-table th,
.admin-import-table th
{
	padding: 10px 14px;
	border-bottom: 1px solid var(--color-gray-300);
	background: var(--color-gray-050);
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .69rem;
	font-weight: 600;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: .055em;
	white-space: nowrap;
}

.admin-people-table td,
.admin-import-table td
{
	padding: 13px 14px;
	border-bottom: 1px solid var(--color-gray-200);
	color: var(--color-gray-700);
	font-size: .86rem;
	vertical-align: middle;
}

.admin-people-table tbody tr:last-child td,
.admin-import-table tbody tr:last-child td
{
	border-bottom: 0;
}

.admin-people-table tbody tr:hover
{
	background: #fbfcfd;
}

.admin-person-cell
{
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
}

.admin-person-cell > div:last-child
{
	display: grid;
	gap: 1px;
}

.admin-person-cell strong
{
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .86rem;
	font-weight: 600;
}

.admin-person-cell span
{
	color: var(--color-gray-500);
	font-size: .74rem;
}

.admin-person-avatar
{
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border-radius: 50%;
	background: var(--color-blue-light);
	overflow: hidden;
}

.admin-person-avatar img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.admin-person-avatar-initials
{
	display: grid;
	place-items: center;
	color: var(--color-blue-dark);
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 600;
}

.admin-person-avatar-large
{
	width: 82px;
	height: 82px;
	flex-basis: 82px;
	border: 4px solid var(--color-white);
	box-shadow: 0 0 0 1px var(--color-gray-300);
}

.admin-person-avatar-large.admin-person-avatar-initials
{
	font-size: 1.2rem;
}

.admin-badge,
.admin-status
{
	display: inline-flex;
	align-items: center;
	width: fit-content;
	padding: 4px 8px;
	border-radius: 999px;
	font-family: var(--font-interface);
	font-size: .67rem;
	font-weight: 600;
	white-space: nowrap;
}

.admin-badge-student
{
	background: #eef3f8;
	color: var(--color-blue-dark);
}

.admin-badge-teacher
{
	background: #edf6f0;
	color: #286344;
}

.admin-badge-admin
{
	background: var(--color-red-light);
	color: var(--color-red-dark);
}

.admin-status-active
{
	background: #eaf6ef;
	color: #276c47;
}

.admin-status-inactive
{
	background: var(--color-gray-200);
	color: var(--color-gray-600);
}

.admin-membership-summary
{
	margin-left: 7px;
	color: var(--color-gray-500);
	font-size: .72rem;
}

.admin-row-arrow
{
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: var(--color-blue);
	font-size: 1.35rem;
	text-decoration: none;
}

.admin-row-arrow:hover
{
	background: var(--color-blue-light);
}

.admin-empty-state
{
	padding: 34px 22px;
	display: grid;
	gap: 4px;
	text-align: center;
}

.admin-empty-state strong
{
	font-family: var(--font-interface);
	color: var(--color-gray-700);
}

.admin-empty-state span,
.muted-text
{
	color: var(--color-gray-500);
}

.admin-person-form
{
	display: grid;
	gap: 18px;
}

.admin-form-card
{
	border-top: var(--radius-large) solid var(--color-blue);
}

.admin-form-grid
{
	padding: 20px;
	display: grid;
	gap: 16px;
}

.admin-form-grid-two
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-form-field-wide
{
	grid-column: 1 / -1;
}

.admin-form-field span em
{
	margin-left: 4px;
	color: var(--color-red);
	font-size: .64rem;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.admin-form-field span small
{
	color: var(--color-gray-500);
	font-weight: 500;
}

.admin-form-field > small
{
	color: var(--color-gray-500);
	font-size: .72rem;
}

.admin-password-box
{
	margin: 0 20px 20px;
	padding: 16px;
	display: grid;
	gap: 13px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.admin-password-box > div:first-child
{
	display: grid;
	gap: 2px;
}

.admin-password-box strong
{
	font-family: var(--font-interface);
	font-size: .84rem;
}

.admin-password-box span
{
	color: var(--color-gray-600);
	font-size: .78rem;
}

.admin-password-row
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.admin-checkbox-line
{
	display: flex;
	align-items: flex-start;
	gap: 9px;
	color: var(--color-gray-700);
	font-size: .8rem;
}

.admin-checkbox-line input
{
	margin-top: 3px;
}

.admin-checkbox-spaced
{
	margin: 0 20px 20px;
}

.admin-form-actions
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

.admin-person-hero
{
	margin-top: 18px;
	margin-bottom: 18px;
	padding: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--color-blue);
	border-radius: var(--radius-large);
	background: var(--color-white);
}

.admin-person-hero-main
{
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.admin-person-kicker
{
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.admin-person-hero h1
{
	margin: 7px 0 2px;
	font-size: 1.75rem;
	color: var(--color-blue-dark);
}

.admin-person-hero p
{
	margin: 0;
	color: var(--color-gray-500);
}

.admin-person-layout
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 18px;
	align-items: start;
}

.admin-person-main-column,
.admin-person-sidebar
{
	display: grid;
	gap: 18px;
}

.admin-enrollment-card
{
	border-top: var(--radius-large) solid var(--color-red);
}

.admin-membership-list
{
	display: grid;
}

.admin-membership-row
{
	padding: 15px 18px;
	display: grid;
	grid-template-columns: minmax(190px, 1.2fr) minmax(130px, .8fr) 110px 105px auto;
	align-items: end;
	gap: 10px;
	border-bottom: 1px solid var(--color-gray-200);
}

.admin-membership-row:last-child
{
	border-bottom: 0;
}

.admin-membership-course
{
	display: grid;
	align-self: center;
	gap: 2px;
}

.admin-membership-course strong
{
	font-family: var(--font-interface);
	color: var(--color-gray-700);
	font-size: .85rem;
	font-weight: 600;
}

.admin-membership-course span
{
	color: var(--color-gray-500);
	font-size: .72rem;
}

.admin-membership-row label
{
	display: grid;
	gap: 5px;
}

.admin-membership-actions
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 7px;
	min-height: 41px;
}

.text-button-danger
{
	padding: 6px 3px;
	border: 0;
	background: transparent;
	color: var(--color-red-dark);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	cursor: pointer;
}

.admin-add-enrollment-form
{
	padding: 18px;
	display: grid;
	grid-template-columns: minmax(220px, 1.2fr) minmax(150px, .8fr) minmax(130px, .6fr) auto;
	align-items: end;
	gap: 12px;
}

.admin-account-summary,
.admin-password-reset-card
{
	border-top: var(--radius-large) solid var(--color-blue);
}

.admin-account-summary dl
{
	margin: 0;
	padding: 4px 18px 10px;
}

.admin-account-summary dl > div
{
	padding: 10px 0;
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 10px;
	border-bottom: 1px solid var(--color-gray-200);
}

.admin-account-summary dl > div:last-child
{
	border-bottom: 0;
}

.admin-account-summary dt
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
}

.admin-account-summary dd
{
	margin: 0;
	color: var(--color-gray-700);
	font-size: .8rem;
	word-break: break-word;
}

.admin-reset-form
{
	padding: 16px 18px 18px;
	display: grid;
	gap: 13px;
}

.admin-reset-submit
{
	width: 100%;
	justify-content: center;
}

.admin-note
{
	padding: 16px 18px 18px;
	display: grid;
	gap: 8px;
	color: var(--color-gray-600);
	font-size: .8rem;
}

.admin-note a
{
	color: var(--color-blue);
	font-family: var(--font-interface);
	font-size: .76rem;
	font-weight: 600;
	text-decoration: none;
}

.admin-import-form
{
	padding: 20px;
	display: grid;
	gap: 18px;
}

.admin-import-preview-card
{
	border-top: var(--radius-large) solid var(--color-blue);
}

.admin-import-preview-counts
{
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.admin-import-row-invalid
{
	background: #fff8f8;
}

.admin-import-ready
{
	color: #276c47;
	font-weight: 600;
}

.admin-import-skip
{
	color: var(--color-red-dark);
	font-weight: 600;
}

.admin-import-confirm-bar
{
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-top: 1px solid var(--color-gray-300);
	background: var(--color-gray-050);
}

.admin-import-confirm-bar > div:first-child
{
	display: grid;
	gap: 2px;
}

.admin-import-confirm-bar strong
{
	font-family: var(--font-interface);
	font-size: .84rem;
}

.admin-import-confirm-bar span
{
	color: var(--color-gray-500);
	font-size: .76rem;
}

@media (max-width: 1080px)
{
	.admin-stat-grid
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.admin-filter-form
	{
		grid-template-columns: minmax(220px, 1.3fr) repeat(2, minmax(140px, .6fr));
	}

	.admin-filter-actions
	{
		grid-column: 1 / -1;
	}

	.admin-person-layout
	{
		grid-template-columns: 1fr;
	}

	.admin-person-sidebar
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.admin-membership-row
	{
		grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(110px, .7fr));
	}

	.admin-membership-actions
	{
		grid-column: 1 / -1;
		justify-content: flex-start;
	}

	.admin-add-enrollment-form
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.admin-add-enrollment-form .primary-button
	{
		grid-column: 1 / -1;
		justify-self: start;
	}
}

@media (max-width: 760px)
{
	.admin-shell,
	.admin-shell-form
	{
		width: calc(100% - 24px);
		margin-top: 20px;
	}

	.admin-header-title
	{
		display: none;
	}

	.admin-nav-inner
	{
		width: calc(100% - 24px);
		overflow-x: auto;
	}

	.admin-page-heading,
	.admin-person-hero,
	.admin-import-confirm-bar
	{
		align-items: stretch;
		flex-direction: column;
	}

	.admin-heading-actions
	{
		width: 100%;
	}

	.admin-heading-actions .primary-button,
	.admin-heading-actions .secondary-button
	{
		flex: 1;
		justify-content: center;
	}

	.admin-stat-grid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.admin-filter-form,
	.admin-form-grid-two,
	.admin-add-enrollment-form,
	.admin-person-sidebar
	{
		grid-template-columns: 1fr;
	}

	.admin-form-field-wide,
	.admin-filter-actions,
	.admin-add-enrollment-form .primary-button
	{
		grid-column: auto;
	}

	.admin-people-table th:nth-child(4),
	.admin-people-table td:nth-child(4),
	.admin-people-table th:nth-child(5),
	.admin-people-table td:nth-child(5)
	{
		display: none;
	}

	.admin-membership-row
	{
		grid-template-columns: 1fr 1fr;
	}

	.admin-membership-course,
	.admin-membership-actions
	{
		grid-column: 1 / -1;
	}

	.admin-person-hero-main
	{
		align-items: flex-start;
	}

	.admin-password-row
	{
		grid-template-columns: 1fr;
	}

	.admin-form-actions
	{
		align-items: stretch;
		flex-direction: column-reverse;
	}
}

@media (max-width: 480px)
{
	.admin-stat-grid
	{
		grid-template-columns: 1fr 1fr;
	}

	.admin-person-hero-main
	{
		flex-direction: column;
	}

	.admin-membership-row
	{
		grid-template-columns: 1fr;
	}

	.admin-membership-course,
	.admin-membership-actions
	{
		grid-column: auto;
	}

	.admin-import-table th:nth-child(1),
	.admin-import-table td:nth-child(1),
	.admin-import-table th:nth-child(4),
	.admin-import-table td:nth-child(4)
	{
		display: none;
	}
}


/* =========================================================
   76. V18 ADMIN OVERVIEW / SCHOOL YEARS / SITE SETTINGS
   ========================================================= */

.admin-overview-stats
{
	margin-bottom: 24px;
}

.admin-dashboard-grid
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.admin-dashboard-card
{
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 22px;
	background: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-top: 4px solid var(--color-blue);
	border-radius: 0 0 var(--radius-large) var(--radius-large);
	box-shadow: var(--shadow-card);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.admin-dashboard-card:hover
{
	transform: translateY(-1px);
	border-color: var(--color-gray-400);
	border-top-color: var(--color-blue);
	box-shadow: 0 7px 20px rgba(24, 39, 55, .12);
}

.admin-dashboard-icon
{
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	background: var(--color-blue-light);
	border-radius: var(--radius-medium);
	color: var(--color-blue);
	flex-shrink: 0;
}

.admin-dashboard-icon svg
{
	width: 26px;
	height: 26px;
	display: block;
}

.admin-dashboard-card h2
{
	margin: 0 0 5px;
	font-size: 1.04rem;
}

.admin-dashboard-card p
{
	margin: 0 0 13px;
	color: var(--color-gray-600);
	font-size: .9rem;
}

.admin-dashboard-card > div:last-child > span
{
	font-family: var(--font-interface);
	color: var(--color-blue);
	font-size: .79rem;
	font-weight: 600;
}

.admin-dashboard-note
{
	display: block;
	margin: -4px 0 10px;
	color: var(--color-gray-700);
	font-size: .79rem;
	font-weight: 600;
}

.school-years-card
{
	overflow: hidden;
	border-top-left-radius: var(--radius-large);
	border-top-right-radius: var(--radius-large);
	border-bottom-right-radius: var(--radius-large);
	border-bottom-left-radius: 0;
}

.school-year-list
{
	display: grid;
}

.school-year-row
{
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 20px 22px 20px 30px;
	border-top: 1px solid var(--color-gray-200);
}

.school-year-row:first-child
{
	border-top: 0;
}

.school-year-status-bar
{
	position: absolute;
	inset: 0 auto 0 0;
	width: var(--radius-large);
	background: var(--color-gray-400);
}

.school-year-current .school-year-status-bar
{
	background: var(--color-blue);
}

.school-year-planning .school-year-status-bar
{
	background: #c58a14;
}

.school-year-archived .school-year-status-bar
{
	background: var(--color-gray-500);
}

.school-year-title-row
{
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.school-year-title-row h3
{
	margin: 0;
	font-size: 1rem;
}

.school-year-status
{
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 999px;
	font-family: var(--font-interface);
	font-size: .67rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.school-year-status-current
{
	background: var(--color-blue-light);
	color: var(--color-blue-dark);
}

.school-year-status-planning
{
	background: #fff6dd;
	color: #805b0a;
}

.school-year-status-archived
{
	background: var(--color-gray-200);
	color: var(--color-gray-600);
}

.school-year-dates
{
	margin-top: 4px;
	color: var(--color-gray-600);
	font-size: .88rem;
}

.school-year-meta
{
	display: flex;
	gap: 12px;
	margin-top: 7px;
	color: var(--color-gray-500);
	font-size: .76rem;
}

.school-year-actions
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.school-year-actions form
{
	margin: 0;
}

.school-year-note
{
	margin-top: 18px;
}

.site-settings-form
{
	display: grid;
	gap: 20px;
}

.site-identity-layout
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 28px;
	align-items: start;
}

.site-identity-layout > .admin-form-grid-two { align-items: start; }

.site-logo-editor
{
	display: grid;
	gap: 14px;
}

.site-logo-preview
{
	display: grid;
	place-items: center;
	min-height: 150px;
	padding: 22px;
	background: var(--color-gray-050);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-large);
}

.site-logo-preview img
{
	display: block;
	max-width: 100%;
	max-height: 100px;
	object-fit: contain;
}

.compact-toggle-field
{
	padding: 12px;
}

.site-settings-actions
{
	margin-top: 0;
}

@media (max-width: 900px)
{
	.admin-dashboard-grid,
	.site-identity-layout
	{
		grid-template-columns: 1fr;
	}

	.site-logo-editor
	{
		max-width: 420px;
	}
}

@media (max-width: 650px)
{
	.admin-dashboard-grid
	{
		gap: 12px;
	}

	.admin-dashboard-card
	{
		grid-template-columns: 44px minmax(0, 1fr);
		padding: 17px;
	}


	.admin-dashboard-icon
	{
		width: 44px;
		height: 44px;
		font-size: 1.15rem;
	}

	.school-year-row
	{
		grid-template-columns: 1fr;
		padding-right: 16px;
	}

	.school-year-actions
	{
		justify-content: flex-start;
		flex-wrap: wrap;
	}
}

/* =========================================================
   39. v19 COURSE FEATURES + SIDEBAR UTILITIES
   ========================================================= */

/* A few v18 admin forms used an inner wrapper that had no padding.
   Keep form fields away from card edges everywhere. */
.admin-form-body
{
	padding: 20px;
}

.setup-heading-buttons
{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.setup-tool-links
{
	display: grid;
}

.setup-tool-links a
{
	padding: 14px 16px;
	display: grid;
	gap: 2px;
	border-bottom: 1px solid var(--color-gray-200);
	text-decoration: none;
	transition: background .15s ease;
}

.setup-tool-links a:last-child
{
	border-bottom: 0;
}

.setup-tool-links a:hover
{
	background: var(--course-light);
}

.setup-tool-links strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .84rem;
	font-weight: 600;
}

.setup-tool-links span
{
	color: var(--color-gray-600);
	font-size: .76rem;
	line-height: 1.45;
}

.feature-list
{
	display: grid;
}

.feature-row
{
	padding: 15px 20px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border-bottom: 1px solid var(--color-gray-200);
	cursor: pointer;
}

.feature-row:last-child
{
	border-bottom: 0;
}

.feature-row:hover
{
	background: var(--color-gray-050);
}

.feature-row > input
{
	margin-top: 3px;
}

.feature-row-copy
{
	display: grid;
	gap: 3px;
}

.feature-row-copy strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .86rem;
	font-weight: 600;
}

.feature-row-copy small
{
	color: var(--color-gray-600);
	font-size: .77rem;
	line-height: 1.45;
}

.widget-manager-list
{
	display: grid;
}

.widget-manager-row
{
	min-height: 72px;
	padding: 12px 16px 12px 20px;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 13px;
	border-bottom: 1px solid var(--color-gray-200);
	background: var(--color-white);
}

.widget-manager-row:last-child
{
	border-bottom: 0;
}

.widget-manager-toggle
{
	display: inline-flex;
	align-items: center;
}

.widget-manager-toggle input
{
	width: 18px;
	height: 18px;
	margin: 0;
}

.widget-manager-copy
{
	min-width: 0;
	display: grid;
	gap: 3px;
}

.widget-manager-copy strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .86rem;
	font-weight: 600;
}

.widget-manager-copy small
{
	color: var(--color-gray-600);
	font-size: .75rem;
	line-height: 1.4;
}

.widget-manager-manage
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .72rem;
	font-weight: 600;
	text-decoration: none;
}

.widget-manager-manage:hover
{
	color: var(--course-accent);
}

.widget-manager-drag-handle
{
	width: 34px;
	height: 42px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1.3rem;
	line-height: 1;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	transition: background .12s ease, color .12s ease;
}

.widget-manager-drag-handle:hover,
.widget-manager-drag-handle:focus-visible
{
	background: var(--course-light);
	color: var(--course-dark);
	outline: none;
}

.widget-manager-drag-handle:focus-visible
{
	box-shadow: 0 0 0 2px var(--course-accent);
}

.widget-manager-row
{
	position: relative;
	transition: background .12s ease, box-shadow .12s ease;
}

.widget-manager-row.is-dragging
{
	z-index: 2;
	background: var(--course-light);
	box-shadow: inset 4px 0 0 var(--course-accent);
}

.widget-manager-row.is-dragging .widget-manager-drag-handle
{
	cursor: grabbing;
}

.widget-manager-list.is-reordering
{
	user-select: none;
	-webkit-user-select: none;
}

.feature-settings-footer
{
	justify-content: space-between;
}

.feature-settings-footer > span
{
	max-width: 610px;
	color: var(--color-gray-600);
	font-size: .75rem;
	line-height: 1.45;
}

/* ---------------------------------------------------------
   Mini Calendar Widget
   --------------------------------------------------------- */

.widget-mini-calendar
{
	border-top: var(--radius-large) solid var(--course-dark);
}

.mini-calendar
{
	padding: 10px 12px 13px;
}

.mini-calendar-weekdays,
.mini-calendar-grid
{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.mini-calendar-weekdays
{
	margin-bottom: 4px;
}

.mini-calendar-weekdays span
{
	padding: 3px 0;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .58rem;
	font-weight: 600;
	text-align: center;
}

.mini-calendar-day
{
	min-height: 34px;
	padding: 4px 2px 3px;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 2px;
	border-radius: var(--radius-small);
	color: var(--color-gray-700);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 500;
	text-decoration: none;
}

.mini-calendar-day:not(.is-empty):hover
{
	background: var(--course-light);
	color: var(--course-dark);
}

.mini-calendar-day.is-today
{
	box-shadow: inset 0 0 0 2px var(--course-accent);
	color: var(--course-dark);
	font-weight: 700;
}

.mini-calendar-day.is-no-class
{
	background: var(--color-gray-100);
	color: var(--color-gray-500);
}

.mini-calendar-dots
{
	min-height: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.mini-calendar-dots b
{
	width: 4px;
	height: 4px;
	border-radius: 50%;
}

.mini-calendar-dots .dot-post
{
	background: var(--course-dark);
}

.mini-calendar-dots .dot-event
{
	background: var(--course-accent);
}

/* ---------------------------------------------------------
   Weekly Bell Work Widget
   --------------------------------------------------------- */

.widget-bell-work-week
{
	border-top: var(--radius-large) solid var(--course-accent);
}

.widget-title-row > div:first-child
{
	min-width: 0;
}

.widget-title-subtitle
{
	margin-top: 2px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 500;
}

.bell-work-week
{
	padding: 12px;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 6px;
}

.bell-work-day
{
	min-height: 64px;
	padding: 7px 2px 5px;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 1px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	text-decoration: none;
}

.bell-work-day span
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .54rem;
	font-weight: 600;
	letter-spacing: .05em;
}

.bell-work-day strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1rem;
	font-weight: 600;
}

.bell-work-day small
{
	min-height: 12px;
	color: var(--color-gray-400);
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 600;
}

.bell-work-day.has-bell-work
{
	background: var(--course-light);
	border-color: var(--course-accent);
}

.bell-work-day.has-bell-work small
{
	color: var(--course-accent);
}

.bell-work-day.has-bell-work:hover
{
	transform: translateY(-1px);
}

.bell-work-day.is-today
{
	box-shadow: inset 0 0 0 2px var(--course-dark);
}

.bell-work-day.is-no-class
{
	background: var(--color-gray-100);
	border-color: var(--color-gray-300);
}

.widget-helper-copy
{
	padding: 9px 13px 11px;
	border-top: 1px solid var(--color-gray-200);
	color: var(--color-gray-500);
	font-size: .68rem;
	line-height: 1.4;
}

/* ---------------------------------------------------------
   Countdown Widget
   --------------------------------------------------------- */

.widget-countdown
{
	border-top: var(--radius-large) solid var(--course-accent);
}

.countdown-widget-body
{
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 13px;
}

.countdown-number
{
	min-width: 70px;
	color: var(--course-accent);
	font-family: var(--font-interface);
	font-size: 2.35rem;
	font-weight: 600;
	line-height: .95;
	text-align: center;
}

.countdown-copy
{
	min-width: 0;
	display: grid;
	gap: 2px;
}

.countdown-copy strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .85rem;
	font-weight: 600;
}

.countdown-copy span
{
	color: var(--color-gray-600);
	font-size: .75rem;
}

.countdown-copy small
{
	color: var(--color-gray-500);
	font-size: .67rem;
}

/* ---------------------------------------------------------
   Poll Widget
   --------------------------------------------------------- */

.widget-poll
{
	border-top: var(--radius-large) solid var(--course-dark);
}

.poll-widget-body
{
	padding: 14px 15px 15px;
}

.poll-question
{
	display: block;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.4;
}

.poll-description
{
	margin: 5px 0 0;
	color: var(--color-gray-600);
	font-size: .76rem;
	line-height: 1.45;
}

.poll-vote-form
{
	margin-top: 12px;
	display: grid;
	gap: 10px;
}

.poll-options
{
	display: grid;
	gap: 7px;
}

.poll-option-choice
{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--color-gray-700);
	font-size: .77rem;
	line-height: 1.35;
	cursor: pointer;
}

.poll-option-choice input
{
	margin-top: 2px;
}

.poll-results
{
	margin-top: 13px;
	padding-top: 12px;
	display: grid;
	gap: 8px;
	border-top: 1px solid var(--color-gray-200);
}

.poll-result-row
{
	display: grid;
	gap: 4px;
}

.poll-result-label
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	color: var(--color-gray-600);
	font-size: .68rem;
}

.poll-result-label strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-weight: 600;
}

.poll-result-track
{
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--color-gray-200);
}

.poll-result-track span
{
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--course-accent);
}

.poll-results > small
{
	color: var(--color-gray-500);
	font-size: .64rem;
}

/* ---------------------------------------------------------
   Course Links Widget
   --------------------------------------------------------- */

.widget-course-links .quick-links a
{
	display: grid;
	gap: 1px;
}

.widget-course-links .quick-links a strong
{
	color: inherit;
	font-family: var(--font-interface);
	font-size: .76rem;
	font-weight: 600;
}

.widget-course-links .quick-links a span
{
	color: var(--color-gray-500);
	font-size: .64rem;
}

/* ---------------------------------------------------------
   Setup management lists used by links / countdowns / polls
   --------------------------------------------------------- */

.setup-management-list
{
	display: grid;
}

.setup-management-row
{
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	border-bottom: 1px solid var(--color-gray-200);
}

.setup-management-row:last-child
{
	border-bottom: 0;
}

.setup-management-row.is-muted
{
	opacity: .62;
}

.setup-management-main
{
	min-width: 0;
	flex: 1;
	display: grid;
	gap: 3px;
}

.setup-management-main > strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .86rem;
	font-weight: 600;
}

.setup-management-main > span
{
	overflow: hidden;
	color: var(--color-gray-600);
	font-size: .73rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.setup-management-badges
{
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.setup-management-badges span
{
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	font-family: var(--font-interface);
	font-size: .58rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.setup-management-badges .is-featured
{
	background: var(--course-light);
	color: var(--course-dark);
}

.setup-management-actions
{
	display: flex;
	align-items: center;
	gap: 8px;
}

.text-danger-button
{
	padding: 6px 8px;
	border: 0;
	background: transparent;
	color: var(--color-red-dark);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

.text-danger-button:hover
{
	text-decoration: underline;
}

.setup-empty-state
{
	padding: 34px 22px;
	display: grid;
	justify-items: center;
	gap: 7px;
	text-align: center;
}

.setup-empty-state strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-weight: 600;
}

.setup-empty-state span
{
	max-width: 560px;
	color: var(--color-gray-600);
	font-size: .8rem;
}

.setup-empty-state .primary-button
{
	margin-top: 8px;
}

.countdown-management-date
{
	width: 54px;
	height: 58px;
	flex: 0 0 54px;
	display: grid;
	place-items: center;
	align-content: center;
	border: 1px solid color-mix(in srgb, var(--course-accent) 35%, var(--color-gray-300));
	border-radius: var(--radius-medium);
	background: var(--course-light);
}

.countdown-management-date span
{
	color: var(--course-accent);
	font-family: var(--font-interface);
	font-size: .55rem;
	font-weight: 600;
	letter-spacing: .05em;
}

.countdown-management-date strong
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1rem;
	font-weight: 600;
}

.calendar-copy-box
{
	margin-bottom: 18px;
	padding: 14px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 10px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.poll-editor-options
{
	margin-top: 18px;
	padding-top: 18px;
	display: grid;
	gap: 9px;
	border-top: 1px solid var(--color-gray-200);
}

.poll-editor-heading
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.poll-editor-heading strong
{
	font-family: var(--font-interface);
	font-size: .8rem;
	font-weight: 600;
}

.poll-editor-option
{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
}

.poll-editor-option input[type="text"]
{
	width: 100%;
	padding: 10px 11px;
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	color: var(--color-text);
}

/* ---------------------------------------------------------
   School Year Danger Zone
   --------------------------------------------------------- */

.admin-danger-card
{
	margin-top: 22px;
	border-top: var(--radius-large) solid var(--color-red);
}

.admin-danger-body
{
	padding: 20px;
	display: grid;
	gap: 16px;
}

.admin-danger-body strong
{
	font-family: var(--font-interface);
	font-weight: 600;
}

.admin-danger-body p
{
	margin: 5px 0 0;
	color: var(--color-gray-600);
	font-size: .82rem;
	line-height: 1.5;
}

.admin-danger-form
{
	display: grid;
	grid-template-columns: minmax(220px, 1fr) auto;
	gap: 10px;
}

.admin-danger-form input
{
	width: 100%;
	padding: 10px 11px;
	border: 1px solid var(--color-gray-400);
	border-radius: var(--radius-medium);
}

.danger-button
{
	padding: 10px 14px;
	border: 0;
	border-radius: var(--radius-medium);
	background: var(--color-red);
	color: var(--color-white);
	font-family: var(--font-interface);
	font-size: .76rem;
	font-weight: 600;
	cursor: pointer;
}

.danger-button:hover
{
	filter: brightness(.9);
}

@media (max-width: 760px)
{
	.setup-heading-buttons
	{
		width: 100%;
		justify-content: flex-start;
	}

	.widget-manager-row
	{
		grid-template-columns: auto auto minmax(0, 1fr);
		gap: 10px;
	}

	.widget-manager-drag-handle,
	.widget-manager-toggle
	{
		grid-row: 1 / span 2;
	}

	.widget-manager-manage
	{
		grid-column: 3;
		justify-self: start;
	}

	.feature-settings-footer
	{
		align-items: stretch;
		flex-direction: column;
	}

	.feature-settings-footer .primary-button
	{
		width: 100%;
	}

	.setup-management-row
	{
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.setup-management-actions
	{
		width: 100%;
		justify-content: flex-end;
	}

	.calendar-copy-box,
	.admin-danger-form
	{
		grid-template-columns: 1fr;
	}
}

/* v19 admin form spacing cleanup */
.admin-form-grid-two
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.admin-form-card > .admin-form-actions
{
	padding: 0 20px 20px;
}

@media (max-width: 650px)
{
	.admin-form-grid-two
	{
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   40. v20 UI CONSISTENCY + CALENDAR DAY FOCUS
   ========================================================= */

/* ---------------------------------------------------------
   Shared widget spacing
   --------------------------------------------------------- */

.widget > .widget-title,
.widget-title-row
{
	min-height: 44px;
}

.widget-title-row
{
	align-items: center;
}

.widget-title-row .widget-title
{
	min-height: 0;
}

.widget-title-row > div:first-child
{
	flex: 1;
}

.calendar-legend-list,
.widget-empty-copy,
.widget-helper-copy
{
	line-height: 1.45;
}

/* ---------------------------------------------------------
   Import Students alignment
   --------------------------------------------------------- */

.admin-import-options-grid
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}

.admin-import-option-column,
.admin-import-enrollment-column
{
	display: grid;
	gap: 16px;
	align-content: start;
}

.admin-import-options-grid .admin-form-field
{
	margin: 0;
}

.admin-import-options-grid .admin-form-field > span
{
	min-height: 18px;
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.admin-import-options-grid .admin-form-field input,
.admin-import-options-grid .admin-form-field select,
.admin-import-options-grid .admin-password-row .secondary-button
{
	min-height: 46px;
}

.admin-import-options-grid .admin-password-row
{
	align-items: stretch;
}

.admin-import-options-grid .admin-password-row .secondary-button
{
	padding-top: 10px;
	padding-bottom: 10px;
}

/* ---------------------------------------------------------
   Calendar event editor spacing
   --------------------------------------------------------- */

.calendar-event-editor
{
	padding: 24px;
	display: grid;
	gap: 22px;
}

.calendar-event-editor .editor-card-heading
{
	margin: 0;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--color-gray-200);
}

.calendar-event-editor .form-grid
{
	gap: 18px;
}

.calendar-event-editor .form-grid-two
{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-event-editor > .form-field,
.calendar-event-editor .form-field + .form-field
{
	margin-top: 0;
}

.calendar-event-editor .form-field label
{
	margin-bottom: 8px;
	display: flex;
	align-items: baseline;
	gap: 3px;
}

.calendar-event-editor .optional-label
{
	margin-left: 0;
}

.calendar-event-editor .form-control
{
	min-height: 46px;
}

.calendar-event-editor textarea.form-control
{
	min-height: 132px;
}

.calendar-event-editor .choice-row
{
	min-height: 46px;
}

.calendar-event-editor .choice-pill span
{
	min-height: 42px;
}

.calendar-event-editor .editor-actions
{
	padding-top: 2px;
}

/* Keep the scope and visibility fields aligned even when the scope helper wraps. */
.calendar-event-editor .calendar-event-scope-grid
{
	align-items: start;
}

.calendar-event-editor .calendar-event-scope-grid > .form-field
{
	align-self: start;
	align-content: start;
	grid-auto-rows: max-content;
}

.calendar-event-editor .calendar-event-scope-grid select.form-control
{
	height: 46px;
	min-height: 46px;
	align-self: start;
}

.calendar-event-editor .calendar-event-scope-field .form-help
{
	margin-top: 5px;
	max-width: 520px;
}

/* ---------------------------------------------------------
   Calendar date selection + detail panel
   --------------------------------------------------------- */

.calendar-day
{
	position: relative;
	transition: background .14s ease, box-shadow .14s ease;
}

.calendar-day:not(.calendar-day-empty):hover
{
	background: color-mix(in srgb, var(--course-light) 55%, white);
}

.calendar-day.is-selected
{
	z-index: 1;
	background: color-mix(in srgb, var(--course-light) 72%, white);
	box-shadow: inset 0 0 0 var(--radius-small) var(--course-accent);
}

.calendar-day.is-selected.is-today
{
	box-shadow: inset 0 0 0 var(--radius-small) var(--course-accent);
}

/* Give a selected date marker the same breathing room as today. */
.calendar-day.is-selected .calendar-day-number-row
{
	margin-bottom: 6px;
}

.calendar-day-number-link
{
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 28px;
	padding: 0 5px;
	border-radius: var(--radius-small);
	text-decoration: none;
}

.calendar-day-number-link:hover
{
	background: var(--course-light);
	color: var(--course-dark);
}

.calendar-day.is-selected .calendar-day-number-link
{
	background: var(--course-accent);
	color: var(--color-white);
}

.calendar-day.is-today:not(.is-selected) .calendar-day-number-link
{
	border-radius: 50%;
	background: var(--course-accent);
	color: var(--color-white);
}

.calendar-day.is-today .calendar-day-number
{
	width: auto;
	height: 28px;
}

.calendar-selected-day
{
	margin-top: 18px;
	border: 1px solid var(--color-gray-300);
	border-top: var(--radius-large) solid var(--course-accent);
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	scroll-margin-top: 18px;
}

.calendar-selected-day-header
{
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-bottom: 1px solid var(--color-gray-200);
	background: color-mix(in srgb, var(--course-light) 45%, white);
}

.calendar-selected-day-header > div:first-child
{
	min-width: 0;
}

.calendar-selected-day-header h2
{
	margin: 2px 0 0;
	color: var(--course-dark);
	font-size: 1.05rem;
	font-weight: 600;
}

.calendar-selected-today
{
	display: inline-flex;
	margin-top: 7px;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--course-accent);
	color: var(--color-white);
	font-family: var(--font-interface);
	font-size: .61rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.calendar-selected-day-body
{
	padding: 18px;
	display: grid;
	gap: 18px;
}

.calendar-selected-group
{
	display: grid;
	gap: 9px;
}

.calendar-selected-group h3
{
	margin: 0;
	color: var(--course-dark);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.calendar-selected-list
{
	display: grid;
	gap: 9px;
}

.calendar-selected-item
{
	min-width: 0;
	padding: 12px 13px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	color: var(--color-gray-700);
	text-decoration: none;
}

.calendar-selected-item > div:first-child
{
	min-width: 0;
}

.calendar-selected-item strong
{
	display: block;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .87rem;
	font-weight: 600;
}

.calendar-selected-item small
{
	display: block;
	margin-top: 3px;
	color: var(--color-gray-500);
	font-size: .72rem;
}

.calendar-selected-item p
{
	margin: 6px 0 0;
	color: var(--color-gray-600);
	font-size: .8rem;
	line-height: 1.5;
}

.calendar-selected-item > a,
.calendar-selected-open
{
	flex: 0 0 auto;
	color: var(--course-accent);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.calendar-selected-item:hover
{
	border-color: var(--course-dark);
	background: color-mix(in srgb, var(--course-light) 35%, white);
}

.calendar-selected-event
{
	border-left: var(--radius-medium) solid var(--course-accent);
}

.calendar-selected-event.calendar-event-quiz,
.calendar-selected-event.calendar-event-test,
.calendar-selected-event.calendar-event-exam
{
	border-left-color: #cc3045;
}

.calendar-selected-event.calendar-event-project,
.calendar-selected-event.calendar-event-due-date
{
	border-left-color: #b16d12;
}

.calendar-selected-event.calendar-event-review
{
	border-left-color: #557d34;
}

.calendar-selected-event.is-cancelled
{
	opacity: .58;
}

.calendar-selected-post
{
	border-left: var(--radius-medium) solid var(--course-dark);
}

.calendar-selected-no-class
{
	padding: 13px 14px;
	display: grid;
	gap: 4px;
	border: 1px solid var(--color-gray-300);
	border-left: var(--radius-medium) solid var(--color-gray-500);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
}

.calendar-selected-no-class span
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.calendar-selected-no-class strong
{
	color: var(--color-gray-700);
	font-size: .84rem;
	font-weight: 500;
}

.calendar-selected-empty
{
	padding: 18px;
	display: grid;
	gap: 4px;
	border: 1px dashed var(--color-gray-300);
	border-radius: var(--radius-medium);
	background: var(--color-gray-050);
	text-align: center;
}

.calendar-selected-empty strong
{
	font-family: var(--font-interface);
	font-size: .82rem;
}

.calendar-selected-empty span
{
	color: var(--color-gray-500);
	font-size: .76rem;
}

.calendar-agenda-day.is-selected
{
	border-left: var(--radius-large) solid var(--course-accent);
	background: color-mix(in srgb, var(--course-light) 45%, white);
}

/* ---------------------------------------------------------
   Admin/site form rhythm
   --------------------------------------------------------- */

.admin-form-body
{
	padding: 22px;
}

.admin-form-card > .admin-form-actions
{
	padding: 0 22px 22px;
}

.site-identity-layout
{
	gap: 30px;
}

.site-logo-editor
{
	gap: 16px;
}

@media (max-width: 760px)
{
	.admin-import-options-grid,
	.calendar-event-editor .form-grid-two
	{
		grid-template-columns: 1fr;
	}

	.admin-import-options-grid
	{
		gap: 18px;
	}

	.calendar-selected-day-header,
	.calendar-selected-item
	{
		align-items: stretch;
		flex-direction: column;
	}

	.calendar-selected-day-header .secondary-button
	{
		width: 100%;
	}

	.calendar-selected-open,
	.calendar-selected-item > a
	{
		white-space: normal;
	}
}

@media (max-width: 520px)
{
	.calendar-event-editor
	{
		padding: 18px;
		gap: 18px;
	}

	.calendar-selected-day-body
	{
		padding: 14px;
	}
}

/* =========================================================
   74. V21 COURSE HERO + SETUP POLISH

   Course photos are stored as square crops. The hero gives the
   image its own square panel so course identity stays consistent.
   ========================================================= */

.setup-main-column,
.setup-side-column
{
	display: grid;
	gap: 18px;
	align-content: start;
}

.setup-portal-actions
{
	flex-wrap: wrap;
	justify-content: flex-end;
}

.course-hero
{
	min-height: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	border-top: 14px solid var(--course-accent);
	background: var(--course-dark);
}

.course-hero.no-photo
{
	grid-template-columns: minmax(0, 1fr);
}

.course-hero-content
{
	position: relative;
	min-height: 240px;
	padding: 36px 40px;
	justify-content: center;
	background: linear-gradient(125deg, var(--course-dark), color-mix(in srgb, var(--course-dark) 72%, var(--course-accent)));
}

.course-hero-photo-panel
{
	padding: 14px;
	display: grid;
	place-items: center;
	background: var(--course-light);
}

.course-hero-photo-frame
{
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-large);
	background: var(--color-white);
	box-shadow: 0 5px 17px rgba(25, 36, 47, .18);
	overflow: hidden;
}

.course-hero-image
{
	position: static;
	inset: auto;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.theme-preview-hero
{
	min-height: 150px;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 118px;
	align-items: stretch;
	background: var(--preview-dark);
}

.theme-preview-hero.no-photo
{
	grid-template-columns: minmax(0, 1fr);
}

.theme-preview-copy
{
	padding: 20px;
	align-content: center;
}

.theme-preview-photo-panel
{
	padding: 9px;
	display: grid;
	place-items: center;
	background: var(--preview-light);
}

.theme-preview-photo-panel[hidden]
{
	display: none;
}

.theme-preview-photo-frame
{
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-medium);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(25, 36, 47, .18);
}

.theme-preview-photo-frame img
{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

@media (max-width: 760px)
{
	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 1fr;
	}

	.course-hero-photo-panel
	{
		grid-row: 1;
		padding: 16px;
	}

	.course-hero-photo-frame
	{
		width: min(100%, 280px);
	}

	.course-hero-content
	{
		grid-row: 2;
		min-height: 0;
		padding: 26px 24px 28px;
	}

	.setup-portal-actions
	{
		width: 100%;
		align-items: stretch;
		flex-direction: column;
	}

	.setup-portal-actions .primary-button,
	.setup-portal-actions .secondary-button
	{
		width: 100%;
	}
}

/* =========================================================
   75. V22 LEFT-PHOTO COURSE HERO

   Square course artwork now sits on the left of the course
   identity. The framed image intentionally hangs below the
   dark hero background a little so it feels like a course
   badge rather than a cropped banner image.
   ========================================================= */

.course-hero-shell
{
	margin-bottom: 14px;
}

.course-hero,
.course-hero.has-photo
{
	min-height: 214px;
	grid-template-columns: 214px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 0 34px;
	overflow: visible;
	background: linear-gradient(115deg, var(--course-dark), color-mix(in srgb, var(--course-dark) 88%, var(--course-accent)));
}

.course-hero.no-photo
{
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
}

.course-hero-photo-panel
{
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transform: translateY(20px);
}

.course-hero-photo-frame
{
	width: 214px;
	height: 214px;
	aspect-ratio: 1 / 1;
	border: 3px solid var(--course-light);
	border-radius: var(--radius-large);
	background: var(--course-light);
	box-shadow: 0 12px 28px rgba(16, 28, 42, .26);
	overflow: hidden;
}

.course-hero-image
{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	background: var(--course-light);
}

.course-hero-content
{
	min-height: 214px;
	padding: 30px 4px 30px 0;
	justify-content: center;
	background: transparent;
}

.course-hero.no-photo .course-hero-content
{
	padding: 34px 40px;
}

.course-hero h1
{
	font-size: clamp(2rem, 3.4vw, 3.15rem);
	line-height: 1.06;
}

.course-hero-section
{
	margin-top: 9px;
	font-size: 1rem;
}

/* Live preview mirrors the real left-photo hero. */
.theme-preview-hero,
.theme-preview-hero.has-photo
{
	min-height: 154px;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	padding: 0 16px;
	overflow: visible;
	background: var(--preview-dark);
}

.theme-preview-hero.no-photo
{
	grid-template-columns: minmax(0, 1fr);
	padding: 0;
}

.theme-preview-photo-panel
{
	padding: 0;
	background: transparent;
	transform: translateY(9px);
}

.theme-preview-photo-frame
{
	width: 96px;
	height: 96px;
	border: 2px solid var(--preview-light);
	border-radius: var(--radius-medium);
	background: var(--preview-light);
	box-shadow: 0 6px 15px rgba(16, 28, 42, .22);
}

.theme-preview-photo-frame img
{
	object-fit: cover;
	background: var(--preview-light);
}

.theme-preview-copy
{
	padding: 22px 0;
}

.theme-preview-hero.no-photo .theme-preview-copy
{
	padding: 22px;
}

@media (max-width: 760px)
{
	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 118px minmax(0, 1fr);
		gap: 16px;
		padding: 0 18px;
	}

	.course-hero-photo-panel
	{
		grid-row: auto;
		transform: translateY(13px);
	}

	.course-hero-photo-frame
	{
		width: 118px;
		height: 118px;
	}

	.course-hero-content
	{
		grid-row: auto;
		min-height: 150px;
		padding: 22px 0;
	}

	.course-hero.no-photo
	{
		grid-template-columns: 1fr;
		padding: 0;
	}

	.course-hero.no-photo .course-hero-content
	{
		padding: 26px 24px;
	}

	.course-hero h1
	{
		font-size: clamp(1.55rem, 7vw, 2.25rem);
	}
}

@media (max-width: 480px)
{
	.course-hero-shell
	{
		width: min(var(--page-width), calc(100% - 24px));
	}

	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 12px;
		padding: 0 14px;
	}

	.course-hero-photo-frame
	{
		width: 92px;
		height: 92px;
		border-width: 2px;
	}

	.course-hero-content
	{
		min-height: 124px;
		padding: 18px 0;
	}

	.course-hero-eyebrow
	{
		font-size: .62rem;
	}

	.course-hero h1
	{
		font-size: 1.38rem;
	}

	.course-hero-section
	{
		font-size: .82rem;
	}
}


/* =========================================================
   47. SQUARE COURSE IMAGERY / MY CLASSES POLISH (v22.1)
   Course/section identity images are intentionally square.
   Site logos and user avatars are not affected by this rule.
   ========================================================= */

.class-card-grid
{
	gap: 22px;
}

.class-card
{
	min-height: 0;
}

.class-card-layout
{
	flex: 1;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	gap: 18px;
	align-items: center;
	padding: 16px;
}

.class-card-image
{
	width: 150px;
	aspect-ratio: 1 / 1;
	border: 3px solid var(--course-accent);
	border-radius: var(--radius-large);
	background: var(--course-light);
	box-shadow: 0 7px 18px rgba(24, 39, 55, .14);
	overflow: hidden;
}

.class-card-image img
{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.class-card-image-placeholder
{
	display: grid;
	place-items: center;
	padding: 14px;
	background: var(--course-dark);
	color: var(--course-light);
	font-family: var(--font-interface);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
}

.class-card-body
{
	min-width: 0;
	align-self: stretch;
	padding: 3px 0 1px;
}

.class-card h3
{
	margin-top: 18px;
}

.class-card-open
{
	align-self: flex-end;
	padding-top: 16px;
	text-align: right;
}

@media (max-width: 1100px)
{
	.class-card-grid
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px)
{
	.class-card-grid
	{
		grid-template-columns: 1fr;
	}

	.class-card-layout
	{
		grid-template-columns: 118px minmax(0, 1fr);
		gap: 15px;
		padding: 14px;
	}

	.class-card-image
	{
		width: 118px;
	}

	.class-card h3
	{
		margin-top: 12px;
	}
}

@media (max-width: 430px)
{
	.class-card-layout
	{
		grid-template-columns: 94px minmax(0, 1fr);
		gap: 13px;
	}

	.class-card-image
	{
		width: 94px;
	}

	.class-card-topline
	{
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}

	.class-card h3
	{
		font-size: 1.05rem;
	}

	.class-card-open
	{
		padding-top: 12px;
	}
}

/* =========================================================
   48. V23 MOBILE CLASSROOM EXPERIENCE

   Mobile should feel like the same HP Classroom, not a
   separate application. These rules tighten the hero/header,
   preserve horizontal course navigation, keep the feed first,
   move widgets naturally below it, and make the main classroom
   controls comfortable to use by touch.
   ========================================================= */

/* The square hero artwork intentionally hangs below the dark hero.
   Give the next page heading enough room to clear that overhang. */
.course-hero-shell
{
	margin-bottom: 44px;
}

@media (max-width: 900px)
{
	.app-header-inner
	{
		width: calc(100% - 24px);
		height: 66px;
		gap: 10px;
	}

	.brand img
	{
		height: 44px;
		max-width: 220px;
	}

	.user-button
	{
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}

	.user-button img
	{
		width: 36px;
		height: 36px;
	}

	.course-nav-inner
	{
		width: 100%;
		padding: 0 8px;
		scroll-snap-type: x proximity;
	}

	.course-nav a
	{
		min-height: 48px;
		padding: 14px 14px 12px;
		display: inline-flex;
		align-items: center;
		scroll-snap-align: start;
	}

	.course-hero-shell
	{
		width: calc(100% - 24px);
		margin-top: 16px;
		margin-bottom: 34px;
	}

	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 124px minmax(0, 1fr);
		gap: 18px;
		min-height: 160px;
		padding: 0 20px;
	}

	.course-hero-photo-panel
	{
		transform: translateY(13px);
	}

	.course-hero-photo-frame
	{
		width: 124px;
		height: 124px;
	}

	.course-hero-content
	{
		min-height: 160px;
		padding: 24px 0;
	}

	.course-hero.no-photo .course-hero-content
	{
		padding: 28px;
	}

	.course-hero h1
	{
		font-size: clamp(1.65rem, 5vw, 2.25rem);
	}

	.page-shell
	{
		width: calc(100% - 24px);
		margin-top: 16px;
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.widget-column
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.widget
	{
		min-width: 0;
	}

	.feed-heading
	{
		align-items: flex-start;
	}

	.site-footer-inner
	{
		width: calc(100% - 24px);
	}
}

@media (max-width: 640px)
{
	html,
	body
	{
		max-width: 100%;
		overflow-x: hidden;
	}

	body
	{
		background: #f1f3f5;
	}

	.app-header-inner
	{
		width: calc(100% - 18px);
		height: 58px;
	}

	.brand img
	{
		height: 36px;
		max-width: 170px;
	}

	.user-name,
	.user-chevron
	{
		display: none;
	}

	.user-button
	{
		padding: 4px;
	}

	.user-button img
	{
		width: 38px;
		height: 38px;
	}

	.header-user-menu-panel
	{
		right: 0;
		min-width: 210px;
	}

	/* Keep modules visible and easy to reach instead of hiding them
	   behind a mobile-only menu. */
	.course-nav
	{
		position: sticky;
		top: 0;
		z-index: 40;
		box-shadow: 0 3px 11px rgba(17, 30, 43, .16);
	}

	.course-nav-inner
	{
		padding: 0 5px;
	}

	.course-nav a
	{
		min-height: 46px;
		padding: 12px 13px 10px;
		font-size: .79rem;
	}

	.course-nav-settings
	{
		margin-left: 0;
	}

	.course-hero-shell
	{
		width: calc(100% - 20px);
		margin-top: 12px;
		margin-bottom: 30px;
	}

	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 13px;
		min-height: 128px;
		padding: 0 13px;
		border-radius: var(--radius-large);
	}

	.course-hero-photo-panel
	{
		transform: translateY(10px);
	}

	.course-hero-photo-frame
	{
		width: 96px;
		height: 96px;
		border-width: 2px;
	}

	.course-hero-content
	{
		min-height: 128px;
		padding: 18px 0;
	}

	.course-hero.no-photo .course-hero-content
	{
		padding: 22px 20px;
	}

	.course-hero-eyebrow
	{
		font-size: .6rem;
	}

	.course-hero h1
	{
		font-size: clamp(1.3rem, 6.3vw, 1.75rem);
		line-height: 1.08;
	}

	.course-hero-section
	{
		margin-top: 6px;
		font-size: .8rem;
		line-height: 1.35;
	}

	/* Only appears when the course has more than one section. */
	.mobile-course-context
	{
		width: calc(100% - 20px);
		margin: -10px auto 14px;
		padding: 9px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		border: 1px solid var(--color-gray-300);
		border-radius: var(--radius-medium);
		background: var(--color-white);
		box-shadow: 0 3px 10px rgba(24, 39, 55, .08);
	}

	.mobile-course-context-label
	{
		color: var(--course-dark);
		font-family: var(--font-interface);
		font-size: .7rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
	}

	.mobile-course-context .section-form
	{
		margin-left: auto;
	}

	.mobile-course-context .section-switcher
	{
		min-width: 116px;
		min-height: 40px;
	}

	.page-shell,
	.simple-page-shell,
	.calendar-page-shell,
	.materials-page-shell,
	.materials-management-shell,
	.discussions-page-shell,
	.discussion-thread-shell,
	.discussion-editor-shell,
	.people-page-shell,
	.people-profile-shell,
	.editor-page-shell,
	.announcement-management-shell
	{
		width: calc(100% - 20px);
		margin-top: 14px;
	}

	.feed-heading
	{
		margin-bottom: 14px;
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.feed-heading h1
	{
		font-size: 1.55rem;
	}

	.feed-heading-actions
	{
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.feed-heading-actions .primary-button,
	.feed-heading-actions .secondary-button
	{
		width: 100%;
		min-height: 44px;
	}

	/* A long semester of tags should not push the feed several rows
	   down on a phone. Swipe horizontally instead. */
	.feed-tag-filter
	{
		margin: -2px -10px 14px;
		padding: 0 10px 4px;
		gap: 7px;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.feed-tag-filter::-webkit-scrollbar
	{
		display: none;
	}

	.feed-tag-filter-link
	{
		flex: 0 0 auto;
		min-height: 36px;
		padding: 7px 11px;
	}

	.feed-post
	{
		margin-bottom: 14px;
	}

	.feed-post-header
	{
		padding: 14px;
		gap: 11px;
		align-items: flex-start;
	}

	.post-date
	{
		width: 44px;
		min-width: 44px;
	}

	.post-month
	{
		font-size: .56rem;
	}

	.post-day
	{
		font-size: 1.08rem;
	}

	.feed-post-header h2
	{
		margin-bottom: 4px;
		font-size: 1.06rem;
		line-height: 1.3;
	}

	.post-meta
	{
		font-size: .7rem;
		line-height: 1.45;
	}

	.post-tags
	{
		gap: 5px;
	}

	.feed-post-body
	{
		padding: 15px 14px 17px;
	}

	.post-content
	{
		font-size: .96rem;
		line-height: 1.6;
	}

	.attachment-card
	{
		padding: 10px;
		gap: 9px;
	}

	.attachment-icon
	{
		width: 40px;
		min-width: 40px;
		height: 40px;
	}

	.attachment-arrow
	{
		display: none !important;
	}

	.feed-post-footer
	{
		padding: 9px 12px;
		gap: 6px;
		justify-content: space-between;
	}

	.feed-post-footer .feed-action-form,
	.feed-post-footer .feed-action-button,
	.feed-action-static
	{
		min-width: 0;
	}

	.feed-post-footer .feed-action-button,
	.feed-action-static
	{
		min-height: 40px;
		padding: 7px 9px;
	}

	.feed-comments-inner
	{
		padding: 14px 12px 16px;
	}

	.comment-replies
	{
		margin-left: 9px;
		padding-left: 9px;
	}

	.comment-form-actions
	{
		align-items: stretch;
	}

	.small-primary-button
	{
		min-height: 40px;
		padding: 8px 12px;
	}

	/* Widgets belong after today's feed on mobile. */
	.widget-column
	{
		grid-template-columns: 1fr;
		gap: 13px;
	}

	.widget-title
	{
		padding: 12px 14px;
	}

	.widget-body
	{
		padding: 14px;
	}

	.widget-link
	{
		min-height: 44px;
		padding: 12px 14px;
		display: flex;
		align-items: center;
	}

	.upcoming-item
	{
		min-height: 56px;
		padding: 11px 13px;
	}

	/* Touch-friendly controls, and 16px text prevents iOS from
	   zooming the page when an input receives focus. */
	.form-control,
	.section-switcher,
	input[type="text"],
	input[type="email"],
	input[type="password"],
	input[type="date"],
	input[type="time"],
	input[type="datetime-local"],
	input[type="url"],
	input[type="number"],
	select,
	textarea
	{
		font-size: 16px;
	}

	.form-control,
	.section-switcher,
	.primary-button,
	.secondary-button
	{
		min-height: 44px;
	}

	.editor-page-heading,
	.calendar-heading,
	.materials-heading,
	.discussions-heading,
	.people-heading
	{
		align-items: stretch;
		flex-direction: column;
		gap: 10px;
	}

	.editor-page-heading .secondary-button,
	.calendar-heading .primary-button,
	.materials-heading .primary-button
	{
		width: 100%;
	}

	.editor-card,
	.material-management-card,
	.discussion-editor-card
	{
		padding: 16px;
	}

	.editor-actions,
	.admin-form-actions
	{
		width: 100%;
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.editor-actions .primary-button,
	.editor-actions .secondary-button,
	.admin-form-actions .primary-button,
	.admin-form-actions .secondary-button
	{
		width: 100%;
	}

	/* Calendar already switches to its agenda view; make the selected
	   day and month controls easier to operate with a thumb. */
	.calendar-toolbar
	{
		padding: 9px;
		gap: 8px;
	}

	.calendar-nav-button,
	.calendar-today-link
	{
		min-width: 42px;
		min-height: 42px;
	}

	.calendar-agenda-day
	{
		padding: 12px;
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 10px;
	}

	.calendar-selected-day-header
	{
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}

	.calendar-selected-day-header .secondary-button
	{
		width: 100%;
	}

	.calendar-selected-item
	{
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	.calendar-selected-open
	{
		align-self: flex-start;
	}

	/* Folder trails and tab/filter rows are better as horizontal
	   scrollers than multi-line walls of links. */
	.materials-breadcrumb,
	.discussion-board-tabs,
	.discussion-filter-links,
	.people-role-filters
	{
		max-width: 100%;
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.materials-breadcrumb::-webkit-scrollbar,
	.discussion-board-tabs::-webkit-scrollbar,
	.discussion-filter-links::-webkit-scrollbar,
	.people-role-filters::-webkit-scrollbar
	{
		display: none;
	}

	.materials-breadcrumb > *,
	.discussion-board-tabs a,
	.discussion-filter-links a,
	.people-role-filters a
	{
		flex: 0 0 auto;
	}

	.discussion-board-tabs a,
	.discussion-filter-links a,
	.people-role-filters a
	{
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}

	.discussion-children-depth-1,
	.discussion-children-depth-2,
	.discussion-children-depth-3
	{
		margin-left: 8px;
		padding-left: 8px;
	}

	.discussion-post
	{
		padding: 12px;
		grid-template-columns: 34px minmax(0, 1fr);
		gap: 9px;
	}

	.person-row,
	.people-profile-teacher-tools
	{
		align-items: stretch;
	}

	.people-profile-role-form
	{
		width: 100%;
		align-items: stretch;
		flex-direction: column;
	}

	.people-profile-role-form .form-control,
	.people-profile-role-form .primary-button,
	.people-profile-role-form .secondary-button
	{
		width: 100%;
	}

	.site-footer-inner
	{
		min-height: 64px;
		padding: 12px 0;
		align-items: flex-start;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
	}
}

@media (max-width: 430px)
{
	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 82px minmax(0, 1fr);
		gap: 11px;
		min-height: 116px;
		padding: 0 11px;
	}

	.course-hero-photo-frame
	{
		width: 82px;
		height: 82px;
	}

	.course-hero-content
	{
		min-height: 116px;
		padding: 15px 0;
	}

	.course-hero h1
	{
		font-size: 1.22rem;
	}

	.course-hero-section
	{
		font-size: .74rem;
	}

	.feed-heading-actions
	{
		grid-template-columns: 1fr;
	}

	.viewer-role-teacher .feed-post-header
	{
		position: relative;
		padding-right: 66px;
	}

	.viewer-role-teacher .post-edit-link
	{
		position: absolute;
		top: 12px;
		right: 11px;
	}

	.post-tags
	{
		margin-top: 7px;
	}

	.feed-post-footer
	{
		align-items: stretch;
		flex-wrap: wrap;
	}

	.feed-post-footer .feed-action-form,
	.feed-post-footer > .feed-action-button,
	.feed-post-footer > .feed-action-static
	{
		flex: 1 1 calc(50% - 4px);
	}

	.feed-post-footer .feed-action-button,
	.feed-action-static
	{
		width: 100%;
		justify-content: center;
	}

	.calendar-agenda-day
	{
		grid-template-columns: 40px minmax(0, 1fr);
	}
}

/* =========================================================
   49. V23.1 MOBILE HERO SPACING REFINEMENT

   Keep the desktop badge-style overhang, but make the phone
   hero more compact and evenly spaced. The image still hangs
   just slightly below the dark hero without creating a large
   empty gap before the page heading.
   ========================================================= */

@media (max-width: 640px)
{
	.course-hero-shell
	{
		margin-top: 12px;
		margin-bottom: 18px;
	}

	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 14px;
		min-height: 0;
		padding: 10px 14px 0;
		align-items: center;
	}

	.course-hero-photo-panel
	{
		align-self: center;
		transform: translateY(6px);
	}

	.course-hero-photo-frame
	{
		width: 96px;
		height: 96px;
	}

	.course-hero-content
	{
		min-height: 96px;
		padding: 8px 0 7px;
		justify-content: center;
	}

	.course-hero.no-photo
	{
		padding: 0;
	}

	.course-hero.no-photo .course-hero-content
	{
		min-height: 112px;
		padding: 22px 20px;
	}

	.course-hero-eyebrow
	{
		margin-bottom: 4px;
	}

	.course-hero-section
	{
		margin-top: 5px;
	}
}

@media (max-width: 430px)
{
	.course-hero-shell
	{
		margin-bottom: 17px;
	}

	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 88px minmax(0, 1fr);
		gap: 12px;
		padding: 10px 12px 0;
	}

	.course-hero-photo-panel
	{
		transform: translateY(6px);
	}

	.course-hero-photo-frame
	{
		width: 88px;
		height: 88px;
	}

	.course-hero-content
	{
		min-height: 88px;
		padding: 7px 0 6px;
	}

	.course-hero h1
	{
		font-size: 1.28rem;
		line-height: 1.08;
	}

	.course-hero-section
	{
		font-size: .76rem;
	}
}


/* =========================================================
   49. V23.2 USER IDENTITY HEADER

   Keep the signed-in person visible at a glance. The name gets
   the stronger Montserrat treatment, while the classroom/account
   role stays quieter underneath. A CSS chevron replaces the old
   text glyph so the menu affordance stays crisp at every size.
   ========================================================= */

.user-account-summary
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 50px;
	padding: 6px 9px;
}

.user-account-avatar
{
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--color-gray-300);
}

.user-account-copy
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	line-height: 1.08;
	text-align: left;
}

.user-account-welcome
{
	display: block;
	font-family: var(--font-interface);
	font-size: .82rem;
	font-weight: 500;
	color: var(--color-gray-700);
	white-space: nowrap;
}

.user-account-welcome strong
{
	font-weight: 700;
	color: var(--color-blue);
}

.user-account-role
{
	display: block;
	margin-top: 4px;
	font-family: var(--font-reading);
	font-size: .61rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--color-gray-500);
	white-space: nowrap;
}

.user-menu-chevron
{
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-left: 2px;
	border-right: 2px solid var(--color-gray-600);
	border-bottom: 2px solid var(--color-gray-600);
	transform: rotate(45deg) translateY(-2px);
	transform-origin: center;
	transition: transform .16s ease;
}

.portal-user-menu[open] > summary .user-menu-chevron,
.header-user-menu[open] > summary .user-menu-chevron
{
	transform: rotate(225deg) translate(-1px, -1px);
}

/* The older portal/mobile rules hid the first text span to save
   room. V23.2 has a deliberately compact two-line identity block,
   so keep it visible. */
.portal-user-menu summary .user-account-copy,
.header-user-menu summary .user-account-copy,
.portal-user-menu summary .user-account-welcome,
.header-user-menu summary .user-account-welcome,
.portal-user-menu summary .user-account-role,
.header-user-menu summary .user-account-role
{
	display: flex;
}

.portal-user-menu summary .user-account-welcome,
.header-user-menu summary .user-account-welcome,
.portal-user-menu summary .user-account-role,
.header-user-menu summary .user-account-role
{
	display: block;
}

/* The My Classes header already identifies the person now, so the
   older Signed in as block is no longer needed for page balance. */
.classes-heading-main-actions
{
	align-items: center;
}

@media (max-width: 900px)
{
	.portal-header-inner
	{
		height: 68px;
	}

	.portal-user-menu summary.user-account-summary,
	.header-user-menu summary.user-account-summary,
	.header-user-menu .user-button.user-account-summary
	{
		min-height: 46px;
		padding: 4px 6px;
		gap: 8px;
	}

	.user-account-avatar,
	.portal-user-menu summary .user-account-avatar,
	.header-user-menu summary .user-account-avatar,
	.header-user-menu .user-button .user-account-avatar
	{
		width: 38px;
		height: 38px;
	}

	.user-account-welcome
	{
		font-size: .78rem;
	}

	.user-account-role
	{
		font-size: .57rem;
		letter-spacing: .12em;
	}
}

@media (max-width: 640px)
{
	.app-header-inner,
	.portal-header-inner
	{
		height: 64px;
	}

	/* Preserve the welcome/name/role block on phones. */
	.portal-user-menu summary .user-account-copy,
	.header-user-menu summary .user-account-copy
	{
		display: flex !important;
	}

	.portal-user-menu summary .user-account-welcome,
	.header-user-menu summary .user-account-welcome,
	.portal-user-menu summary .user-account-role,
	.header-user-menu summary .user-account-role
	{
		display: block !important;
	}

	.portal-user-menu summary.user-account-summary,
	.header-user-menu summary.user-account-summary,
	.header-user-menu .user-button.user-account-summary
	{
		padding: 3px 4px;
		gap: 7px;
	}

	.user-account-avatar,
	.portal-user-menu summary .user-account-avatar,
	.header-user-menu summary .user-account-avatar,
	.header-user-menu .user-button .user-account-avatar
	{
		width: 36px;
		height: 36px;
	}

	.user-account-welcome
	{
		font-size: .75rem;
	}

	.user-account-role
	{
		margin-top: 3px;
		font-size: .54rem;
	}

	.user-menu-chevron
	{
		width: 7px;
		height: 7px;
		margin-left: 1px;
	}

	.portal-user-menu-panel,
	.header-user-menu-panel
	{
		min-width: 220px;
	}
}

@media (max-width: 390px)
{
	.portal-brand img,
	.brand img
	{
		max-width: 132px;
	}

	.user-account-welcome
	{
		font-size: .71rem;
	}

	.user-account-role
	{
		font-size: .51rem;
		letter-spacing: .1em;
	}
}

/* =========================================================
   80. V23.3 MOBILE HEADER / NAVIGATION HARDENING

   Keep the top of the classroom inside the viewport at phone
   widths. The course navigation remains intentionally swipeable,
   but it should scroll inside its own bar rather than making the
   whole page wider. Account identity text is allowed to shrink
   safely, and the menu panel can never extend beyond the screen.
   ========================================================= */

.app-header,
.portal-header,
.course-nav
{
	max-width: 100%;
}

.app-header
{
	overflow: visible;
}

.course-nav
{
	overflow: hidden;
}

.app-header-inner,
.portal-header-inner
{
	min-width: 0;
}

.header-user-menu,
.portal-user-menu
{
	min-width: 0;
}

.header-user-menu summary.user-account-summary,
.portal-user-menu summary.user-account-summary
{
	max-width: 100%;
}

.user-account-copy
{
	min-width: 0;
}

.user-account-welcome,
.user-account-role
{
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-user-menu-panel,
.portal-user-menu-panel
{
	max-width: calc(100vw - 20px);
}

.course-nav-inner
{
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
}

.course-nav a
{
	white-space: nowrap;
}

.course-hero-content
{
	min-width: 0;
}

.course-hero h1
{
	max-width: 100%;
	overflow-wrap: break-word;
}

@media (max-width: 640px)
{
	.app-header-inner,
	.portal-header-inner
	{
		width: calc(100% - 16px);
		gap: 6px;
	}

	.brand,
	.portal-brand
	{
		flex: 1 1 auto;
		min-width: 0;
		max-width: 42%;
	}

	.brand img,
	.portal-brand img
	{
		max-width: 100%;
	}

	.header-user-menu,
	.portal-user-menu
	{
		flex: 0 1 auto;
		max-width: 58%;
	}

	.header-user-menu summary.user-account-summary,
	.portal-user-menu summary.user-account-summary
	{
		min-width: 0;
		max-width: 100%;
	}

	.header-user-menu summary .user-account-copy,
	.portal-user-menu summary .user-account-copy
	{
		min-width: 0;
	}

	.user-account-welcome
	{
		line-height: 1.2;
	}

	.user-account-role
	{
		line-height: 1.15;
	}

	.header-user-menu-panel,
	.portal-user-menu-panel
	{
		right: 0;
		width: min(230px, calc(100vw - 20px));
		min-width: 0;
	}

	.course-nav-inner
	{
		width: 100%;
		max-width: 100vw;
		padding-inline: 4px;
		scroll-padding-inline: 8px;
	}

	.course-nav a
	{
		padding-left: 11px;
		padding-right: 11px;
		font-size: .77rem;
	}
}

@media (max-width: 420px)
{
	.brand,
	.portal-brand
	{
		max-width: 39%;
	}

	.header-user-menu,
	.portal-user-menu
	{
		max-width: 61%;
	}

	.user-account-welcome
	{
		font-size: .7rem;
	}

	.user-account-role
	{
		font-size: .49rem;
		letter-spacing: .09em;
	}

	.course-nav a
	{
		padding-left: 10px;
		padding-right: 10px;
		font-size: .74rem;
	}
}


/* =========================================================
   V23.15 - SELF-SERVICE ACCOUNT PROFILE
   ========================================================= */

.account-profile-page { min-height: 100vh; }
.account-profile-shell { width: min(920px, calc(100% - 40px)); margin: 0 auto; padding: 38px 0 64px; }
.account-profile-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.account-profile-heading h1 { margin: 3px 0 4px; color: var(--color-blue-dark); font-size: 2rem; }
.account-profile-heading p { margin: 0; color: var(--color-gray-600); }
.account-profile-form { display: grid; gap: 18px; }
.account-profile-card { overflow: hidden; border: 1px solid var(--color-gray-300); border-top: 8px solid var(--color-blue); border-radius: 0 0 var(--radius-large) var(--radius-large); background: var(--color-white); box-shadow: var(--shadow-card); }
.account-profile-card-header { padding: 20px 22px 16px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-050); }
.account-profile-card-header h2 { margin: 0 0 4px; color: var(--color-blue-dark); font-size: 1.08rem; }
.account-profile-card-header p { margin: 0; color: var(--color-gray-600); font-size: .84rem; line-height: 1.5; }
.account-profile-avatar-layout { padding: 24px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 28px; }
.account-profile-avatar-preview { width: 138px; height: 138px; overflow: hidden; border: 4px solid var(--color-white); border-radius: 50%; background: var(--color-gray-200); box-shadow: 0 0 0 1px var(--color-gray-300), var(--shadow-control); }
.account-profile-avatar-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.account-profile-avatar-controls { min-width: 0; display: grid; gap: 14px; }
.account-profile-avatar-controls input[type="file"] { padding: 9px; background: var(--color-gray-050); }
.account-profile-remove-avatar { display: flex; align-items: center; gap: 9px; color: var(--color-gray-700); font-family: var(--font-interface); font-size: .78rem; font-weight: 600; cursor: pointer; }
.account-profile-remove-avatar input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-red); }
.account-profile-fields { padding: 22px; }
.account-profile-readonly-grid { margin: 0 22px; padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-medium); background: var(--color-gray-050); }
.account-profile-readonly-grid div { min-width: 0; display: grid; gap: 3px; }
.account-profile-readonly-grid span { color: var(--color-gray-500); font-family: var(--font-interface); font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.account-profile-readonly-grid strong { overflow: hidden; color: var(--color-gray-700); font-family: var(--font-interface); font-size: .86rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-managed-note { margin: 10px 22px 22px; color: var(--color-gray-500); font-size: .74rem; }
.account-profile-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

@media (max-width: 700px)
{
	.account-profile-shell { width: calc(100% - 24px); padding: 24px 0 48px; }
	.account-profile-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
	.account-profile-heading h1 { font-size: 1.7rem; }
	.account-profile-avatar-layout { grid-template-columns: 1fr; justify-items: center; gap: 20px; padding: 20px 18px; }
	.account-profile-avatar-controls { width: 100%; }
	.account-profile-fields { grid-template-columns: 1fr; padding: 20px 18px; }
	.account-profile-fields .form-field-wide { grid-column: auto; }
	.account-profile-readonly-grid { margin: 0 18px; grid-template-columns: 1fr; }
	.account-profile-managed-note { margin-right: 18px; margin-left: 18px; }
}

/* =========================================================
   81. V23.4 MOBILE COURSE MENU + HERO/FEED REFINEMENT

   Phones get one contained hamburger menu for course destinations.
   The hero carries the full class identity, while feed headers stay
   intentionally compact so the post words and attachments remain the
   visual priority.
   ========================================================= */

.course-mobile-nav
{
	display: none;
}

.course-hero-meeting
{
	margin-top: 7px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	color: rgba(255, 255, 255, .94);
	font-family: var(--font-interface);
	font-size: .92rem;
	font-weight: 500;
}

.course-hero-meeting-divider
{
	color: var(--course-light);
	font-weight: 700;
}

.course-hero-teachers
{
	margin-top: 7px;
	color: rgba(255, 255, 255, .82);
	font-family: var(--font-interface);
	font-size: 1.2rem;
	font-weight: 500;
}

/* Compact identity-first post header. */
.feed-post-header-compact
{
	padding: 11px 16px 10px;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.feed-post-author
{
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.feed-post-author-avatar
{
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: 1px solid var(--color-gray-300);
	border-radius: 50%;
	background: var(--color-gray-100);
	object-fit: cover;
}

.feed-post-author-copy
{
	min-width: 0;
}

.feed-post-author-name
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.15;
}

.feed-post-author-role
{
	margin-top: 2px;
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-size: .66rem;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1.15;
	text-transform: uppercase;
}

.feed-post-published
{
	margin-top: 4px;
	color: var(--color-gray-500);
	font-family: var(--font-reading);
	font-size: .7rem;
	font-weight: 500;
	line-height: 1.2;
}

.feed-post-statuses
{
	margin: 6px 0 0;
}

.feed-post-header-side
{
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
	text-align: right;
}

.feed-post-weekday
{
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1.14rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1;
}

.feed-post-header-compact .post-edit-link
{
	font-size: .68rem;
}

.post-body-title
{
	margin: 0 0 12px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1.12rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.3;
}

.post-tags-bottom
{
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 700px)
{
	.course-nav
	{
		position: relative;
		overflow: visible;
		z-index: 35;
	}

	.course-nav-desktop
	{
		display: none;
	}

	.course-mobile-nav
	{
		position: relative;
		display: block;
		width: 100%;
	}

	.course-mobile-menu-button
	{
		width: 100%;
		min-height: 50px;
		padding: 0 14px;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 11px;
		border: 0;
		background: var(--course-dark);
		color: var(--color-white);
		font-family: var(--font-interface);
		cursor: pointer;
	}

	.course-mobile-hamburger
	{
		width: 22px;
		display: grid;
		gap: 4px;
	}

	.course-mobile-hamburger span
	{
		display: block;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform .16s ease, opacity .16s ease;
	}

	.course-mobile-menu-button[aria-expanded="true"] .course-mobile-hamburger span:nth-child(1)
	{
		transform: translateY(6px) rotate(45deg);
	}

	.course-mobile-menu-button[aria-expanded="true"] .course-mobile-hamburger span:nth-child(2)
	{
		opacity: 0;
	}

	.course-mobile-menu-button[aria-expanded="true"] .course-mobile-hamburger span:nth-child(3)
	{
		transform: translateY(-6px) rotate(-45deg);
	}

	.course-mobile-menu-current
	{
		min-width: 0;
		font-size: .86rem;
		font-weight: 600;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.course-mobile-menu-label
	{
		font-family: var(--font-reading);
		font-size: .67rem;
		font-weight: 600;
		letter-spacing: .1em;
		opacity: .75;
		text-transform: uppercase;
	}

	.course-mobile-menu-panel
	{
		position: absolute;
		top: 100%;
		left: 8px;
		right: 8px;
		z-index: 50;
		padding: 7px;
		border: 1px solid var(--color-gray-300);
		border-top: var(--radius-medium) solid var(--course-accent);
		border-radius: var(--radius-medium);
		background: var(--color-white);
		box-shadow: 0 14px 34px rgba(24, 39, 55, .24);
	}

	.course-mobile-menu-panel[hidden]
	{
		display: none;
	}

	.course-mobile-menu-panel a
	{
		min-height: 44px;
		padding: 10px 12px;
		display: flex;
		align-items: center;
		border: 0;
		border-radius: 6px;
		color: var(--color-gray-800);
		font-family: var(--font-interface);
		font-size: .86rem;
		font-weight: 500;
		text-decoration: none;
	}

	.course-mobile-menu-panel a:hover,
	.course-mobile-menu-panel a.active
	{
		background: var(--course-light);
		color: var(--course-dark);
	}

	.course-mobile-menu-panel a.active
	{
		font-weight: 700;
	}

	.course-hero-eyebrow
	{
		font-size: .65rem;
	}

	.course-hero-meeting
	{
		margin-top: 5px;
		gap: 5px;
		font-size: .76rem;
		line-height: 1.3;
	}

	.course-hero-teachers
	{
		margin-top: 4px;
		font-size: .73rem;
		line-height: 1.3;
	}

	.feed-post-header-compact
	{
		padding: 9px 11px 8px;
		gap: 8px;
	}

	.feed-post-author
	{
		gap: 8px;
	}

	.feed-post-author-avatar
	{
		width: 36px;
		height: 36px;
	}

	.feed-post-author-name
	{
		font-size: .83rem;
	}

	.feed-post-author-role
	{
		font-size: .56rem;
		letter-spacing: .08em;
	}

	.feed-post-published
	{
		font-size: .63rem;
	}

	.feed-post-statuses
	{
		margin-top: 4px;
	}

	.feed-post-weekday
	{
		font-size: .92rem;
		letter-spacing: .06em;
	}

	.feed-post-header-compact .post-edit-link
	{
		font-size: .62rem;
	}

	.post-body-title
	{
		margin-bottom: 10px;
		font-size: 1rem;
	}
}

@media (max-width: 390px)
{
	.course-mobile-menu-label
	{
		display: none;
	}

	.course-mobile-menu-button
	{
		grid-template-columns: auto minmax(0, 1fr);
	}

	.feed-post-weekday
	{
		font-size: .82rem;
		letter-spacing: .04em;
	}
}

/* =========================================================
   82. V23.5 FEED ACTIONS + ACCENT EDGE REFINEMENT

   Accent borders are now thinner and visually directional:
   the two corners touched by a colored edge are square, while
   the opposite corners keep their normal rounding. This makes
   the accent feel like an intentional edge instead of a thick cap.
   ========================================================= */

:root
{
	--accent-edge-width: 6px;
	--accent-edge-width-small: 5px;
}

/* Top accent edge: square the top corners, keep the bottom rounded. */
.feed-post,
.widget-bell-work,
.access-denied-card,
.materials-folder-intro,
.discussion-board-intro,
.discussion-thread-heading,
.discussion-post-starter,
.discussion-main-reply-card,
.person-row-role-teacher,
.people-profile-card,
.auth-brand-panel,
.auth-card,
.setup-card-accent,
.course-theme-preview,
.admin-stat-card,
.admin-filter-card,
.admin-people-card,
.admin-form-card,
.admin-person-hero,
.admin-enrollment-card,
.admin-account-summary,
.admin-password-reset-card,
.admin-import-preview-card,
.admin-dashboard-card-accent,
.widget-mini-calendar,
.widget-bell-work-week,
.widget-countdown,
.widget-poll,
.admin-danger-card,
.calendar-selected-day,
.course-mobile-menu-panel
{
	border-top-width: var(--accent-edge-width);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* The course hero is larger than a card, so its accent can be a touch stronger. */
.course-hero
{
	border-top-width: 7px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* Left accent edge: square the left corners and use a lighter-weight stripe. */
.system-message-warning,
.system-message-success,
.calendar-entry-event,
.calendar-day-status,
.material-row.is-current-unit,
.person-row-role-student,
.discussion-topic-row.is-pinned,
.discussion-post-reply,
.setup-note-card,
.calendar-selected-event,
.calendar-selected-post,
.calendar-selected-no-class,
.calendar-agenda-day.is-selected
{
	border-left-width: var(--accent-edge-width-small);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Student roster rows use the course-colored left accent used by resource cards. */
.person-row-role-student
{
	border-left-color: var(--course-dark);
}

.person-row-role-student:hover
{
	border-left-color: var(--course-dark);
}

/* Post header: make the weekday the strong date cue without crowding the author. */
.feed-post-weekday
{
	font-size: 1.55rem;
	font-weight: 600;
	letter-spacing: .07em;
}

/* Teacher-only post controls belong with the footer metadata, not the author header. */
.feed-post-footer-meta
{
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
}

.feed-post-footer-meta .post-visibility
{
	margin-left: 0;
}

.post-edit-footer-link
{
	padding-left: 9px;
	border-left: 1px solid var(--color-gray-300);
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: .7rem;
	font-weight: 600;
	text-decoration: none;
}

.post-edit-footer-link:hover
{
	text-decoration: underline;
}

.feed-action-button.is-working,
.feed-action-button:disabled
{
	opacity: .55;
	cursor: wait;
}

@media (max-width: 700px)
{
	.feed-post-weekday
	{
		font-size: 1.3rem;
		letter-spacing: .055em;
	}

	.feed-post-footer-meta
	{
		width: 100%;
		margin-left: 0;
		padding: 0 4px 4px;
		justify-content: flex-end;
	}
}

@media (max-width: 390px)
{
	.feed-post-weekday
	{
		font-size: 1.15rem;
	}
}

/* Landing card uses the colored edge on its logo row, so square the parent top corners too. */
.landing-card
{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.landing-logo-row
{
	border-top-width: var(--accent-edge-width);
}

/* =========================================================
   83. V23.6 MOBILE MENU CONTRAST + ACCENT EDGE AUDIT

   Mobile course menus must remain readable regardless of the
   course theme. Accent-edge cards now follow one visual rule:
   the two corners touched by the colored edge are square, while
   the opposite corners retain their normal rounding.
   ========================================================= */

:root
{
	--accent-edge-width: 5px;
	--accent-edge-width-small: 4px;
}

/* Mobile menu: explicitly override the desktop course-nav link colors. */
@media (max-width: 700px)
{
	.course-nav .course-mobile-menu-panel
	{
		background: var(--color-white);
		color: var(--course-dark);
	}

	.course-nav .course-mobile-menu-panel > a
	{
		background: transparent;
		color: var(--course-dark);
	}

	.course-nav .course-mobile-menu-panel > a:hover,
	.course-nav .course-mobile-menu-panel > a:focus-visible
	{
		background: var(--course-light);
		color: var(--course-dark);
	}

	.course-nav .course-mobile-menu-panel > a.active
	{
		background: var(--course-dark);
		color: var(--color-white);
		font-weight: 700;
	}
}

/* ---------------------------------------------------------
   TOP ACCENT EDGES
   Square the two corners touched by the accent.
   --------------------------------------------------------- */
.feed-post,
.widget-bell-work,
.access-denied-card,
.materials-folder-intro,
.discussion-board-intro,
.discussion-thread-heading,
.discussion-post-starter,
.discussion-main-reply-card,
.person-row-role-teacher,
.people-profile-card,
.auth-brand-panel,
.auth-card,
.setup-card-accent,
.theme-preview,
.admin-stat-card,
.admin-filter-card,
.admin-people-card,
.admin-form-card,
.admin-person-hero,
.admin-enrollment-card,
.admin-account-summary,
.admin-password-reset-card,
.admin-import-preview-card,
.admin-dashboard-card-accent,
.widget-mini-calendar,
.widget-bell-work-week,
.widget-countdown,
.widget-poll,
.admin-danger-card,
.calendar-selected-day,
.course-mobile-menu-panel,
.course-hero
{
	border-top-width: var(--accent-edge-width);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* These use a separate accent strip instead of border-top. */
.class-card,
.theme-preview-card,
.landing-card
{
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.class-card-accent,
.theme-preview-card-hat,
.landing-logo-row
{
	height: var(--accent-edge-width);
	min-height: var(--accent-edge-width);
}

.class-card-accent
{
	flex-basis: var(--accent-edge-width);
}

.landing-logo-row
{
	border-top-width: var(--accent-edge-width);
	height: auto;
	min-height: 0;
}

/* ---------------------------------------------------------
   LEFT ACCENT EDGES
   Square the two corners touched by the accent.
   --------------------------------------------------------- */
.system-message-warning,
.system-message-success,
.classroom-item-card,
.person-row-role-student,
.calendar-entry-event,
.calendar-day-status,
.material-row.is-current-unit,
.discussion-topic-row.is-pinned,
.discussion-post-reply,
.setup-note-card,
.calendar-selected-event,
.calendar-selected-post,
.calendar-selected-no-class,
.calendar-agenda-day.is-selected
{
	border-left-width: var(--accent-edge-width-small);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Utilities for future cards so this convention stays consistent. */
.accent-edge-top
{
	border-top-width: var(--accent-edge-width);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accent-edge-right
{
	border-right-width: var(--accent-edge-width-small);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.accent-edge-bottom
{
	border-bottom-width: var(--accent-edge-width-small);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.accent-edge-left
{
	border-left-width: var(--accent-edge-width-small);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* =========================================================
   84. V23.7 MOBILE NAV + HERO + FEED FOOTER POLISH

   The mobile course bar is now only a menu trigger: the hamburger
   itself is the clickable control. Repeated course context is removed
   from the feed heading, section switching is quieter, and post actions
   keep their full hover/focus background without wrapping awkwardly.
   Accent-edge corners are enforced here as the final visual rule.
   ========================================================= */

/* Keep action labels together so the hover/focus shape covers the
   complete Like / Comment control instead of a wrapped fragment. */
.feed-post-footer .feed-action-button,
.feed-action-static
{
	white-space: nowrap;
}

/* Enforce the directional-corner convention after all earlier module CSS.
   This intentionally uses !important only for corner geometry because a
   few older responsive rules still re-apply a full border-radius shorthand. */
.feed-post,
.widget-bell-work,
.access-denied-card,
.materials-folder-intro,
.discussion-board-intro,
.discussion-thread-heading,
.discussion-post-starter,
.discussion-main-reply-card,
.person-row-role-teacher,
.people-profile-card,
.auth-brand-panel,
.auth-card,
.setup-card-accent,
.theme-preview,
.admin-stat-card,
.admin-filter-card,
.admin-people-card,
.admin-form-card,
.admin-person-hero,
.admin-enrollment-card,
.admin-account-summary,
.admin-password-reset-card,
.admin-import-preview-card,
.admin-dashboard-card-accent,
.widget-mini-calendar,
.widget-bell-work-week,
.widget-countdown,
.widget-poll,
.admin-danger-card,
.calendar-selected-day,
.course-mobile-menu-panel,
.course-hero,
.class-card,
.theme-preview-card,
.landing-card
{
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.system-message-warning,
.system-message-success,
.classroom-item-card,
.person-row-role-student,
.calendar-entry-event,
.calendar-day-status,
.material-row.is-current-unit,
.discussion-topic-row.is-pinned,
.discussion-post-reply,
.setup-note-card,
.calendar-selected-event,
.calendar-selected-post,
.calendar-selected-no-class,
.calendar-agenda-day.is-selected
{
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* The hero gets an explicit shape so the accent line cannot inherit a
   rounded top corner from an older responsive rule. */
.course-theme .course-hero
{
	border-radius: 0 0 var(--radius-large) var(--radius-large) !important;
}

@media (max-width: 700px)
{
	/* The dark course bar remains a stable visual strip, but only the
	   hamburger is interactive. */
	.course-mobile-nav
	{
		min-height: 50px;
		display: flex;
		align-items: center;
	}

	.course-mobile-menu-button
	{
		width: 52px;
		min-width: 52px;
		min-height: 50px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		background: transparent;
	}

	.course-mobile-menu-button:hover,
	.course-mobile-menu-button:focus-visible
	{
		background: rgba(255, 255, 255, .08);
	}

	.course-mobile-hamburger
	{
		width: 22px;
	}

	/* Give the text side of the hero more breathing room at the bottom
	   while preserving the small square-image overhang. */
	.course-hero-content
	{
		padding-bottom: 14px;
	}

	.course-hero-photo-panel
	{
		transform: translateY(6px);
	}

	/* Section switching is a utility, not a second card competing with
	   the hero. Keep it compact and visually attached to the class header. */
	.mobile-course-context
	{
		width: calc(100% - 20px);
		margin: 2px auto 13px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 7px;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.mobile-course-context-label
	{
		margin: 0;
		color: var(--color-gray-500);
		font-size: .62rem;
		font-weight: 600;
		letter-spacing: .07em;
		text-transform: uppercase;
	}

	.mobile-course-context .section-form
	{
		margin: 0;
	}

	.mobile-course-context .section-switcher
	{
		min-width: 118px;
		min-height: 38px;
		padding: 6px 34px 6px 12px;
		border: 1px solid color-mix(in srgb, var(--course-dark) 22%, var(--color-gray-300));
		border-radius: 999px;
		background-color: var(--color-white);
		color: var(--course-dark);
		font-family: var(--font-interface);
		font-size: .82rem;
		font-weight: 600;
		box-shadow: 0 2px 7px rgba(24, 39, 55, .09);
	}

	/* A compact three-column footer keeps Like, Comments, and teacher
	   metadata aligned on one line instead of forcing 50% action boxes. */
	.feed-post-footer
	{
		display: grid;
		grid-template-columns: max-content max-content minmax(0, 1fr);
		align-items: center;
		gap: 6px 8px;
	}

	.feed-post-footer .feed-action-form
	{
		width: auto;
		min-width: 0;
	}

	.feed-post-footer .feed-action-form .feed-action-button,
	.feed-post-footer > .feed-action-button,
	.feed-post-footer > .feed-action-static
	{
		width: auto;
		min-width: 0;
		padding-left: 8px;
		padding-right: 8px;
		justify-content: flex-start;
		white-space: nowrap;
	}

	.feed-post-footer-meta
	{
		grid-column: 3;
		width: auto;
		margin-left: 0;
		padding: 0;
		justify-self: end;
	}
}

@media (max-width: 390px)
{
	.course-mobile-menu-button
	{
		width: 48px;
		min-width: 48px;
	}

	.mobile-course-context
	{
		margin-bottom: 11px;
	}

	.feed-post-footer
	{
		gap: 5px;
	}

	.feed-post-footer .feed-action-form .feed-action-button,
	.feed-post-footer > .feed-action-button,
	.feed-post-footer > .feed-action-static
	{
		padding-left: 6px;
		padding-right: 6px;
		font-size: .72rem;
	}

	.feed-post-footer-meta
	{
		font-size: .68rem;
	}
}


/* =========================================================
   85. V23.8 FEED IDENTITY + WIDGET CONSISTENCY

   Feed headers give the author a little more visual weight while
   keeping the post body as the main focus. All sidebar widgets now
   use the same course-dark top accent so the column reads as one
   coordinated system instead of a collection of unrelated cards.
   ========================================================= */

.feed-post-author
{
	gap: 12px;
}

.feed-post-author-avatar
{
	width: 52px;
	height: 52px;
	border-width: 2px;
}

.feed-post-author-name
{
	font-size: 1rem;
	line-height: 1.1;
}

.feed-post-author-role
{
	margin-top: 2px;
	font-size: .62rem;
	letter-spacing: .11em;
}

.feed-post-published
{
	margin-top: 5px;
	font-size: .75rem;
	line-height: 1.2;
}

/* Sidebar widget identity is intentionally uniform. Content and links
   still use the course accent color where interaction needs emphasis. */
.widget,
.widget-bell-work,
.widget-mini-calendar,
.widget-bell-work-week,
.widget-countdown,
.widget-poll,
.widget-announcements,
.widget-course-links
{
	border-top: var(--accent-edge-width) solid var(--course-dark) !important;
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	border-bottom-left-radius: var(--radius-large) !important;
	border-bottom-right-radius: var(--radius-large) !important;
}

@media (max-width: 700px)
{
	.feed-post-header-compact
	{
		padding: 12px 14px 11px;
	}

	.feed-post-author
	{
		gap: 11px;
	}

	.feed-post-author-avatar
	{
		width: 50px;
		height: 50px;
	}

	.feed-post-author-name
	{
		font-size: .96rem;
	}

	.feed-post-published
	{
		font-size: .72rem;
	}
}

@media (max-width: 390px)
{
	.feed-post-author-avatar
	{
		width: 46px;
		height: 46px;
	}
}


/* =========================================================
   86. V23.9 FEED DETAILS + BELL WORK + SHADOW POLISH

   Feed author identity is simplified: name first, published time as
   small spaced metadata, no role label. Bell Work dates carry their
   own month abbreviation. Cards and useful controls get a more
   visible but still restrained shadow so the interface has depth.
   ========================================================= */

/* Feed author identity */
.feed-post-author-name
{
	font-size: 1.12rem;
	font-weight: 700;
	line-height: 1.08;
}

.feed-post-published
{
	margin-top: 4px;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .64rem;
	font-weight: 600;
	letter-spacing: .095em;
	line-height: 1.25;
	text-transform: uppercase;
}

/* Bell Work week: month lives inside each date tile, so the range
   subtitle above the row is no longer necessary. */
.bell-work-day strong
{
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 3px;
}

.bell-work-day strong em
{
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .5rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .08em;
}

/* ---------------------------------------------------------
   Site-wide depth
   --------------------------------------------------------- */
.feed-post,
.widget,
.course-hero,
.editor-card,
.management-card,
.calendar-month-view,
.calendar-selected-day,
.material-row,
.material-resource-builder,
.material-existing-resource-panel,
.discussion-board-intro,
.discussion-topic-row,
.discussion-post,
.discussion-main-reply-card,
.people-profile-card,
.person-row,
.auth-card,
.landing-card,
.class-card,
.setup-card,
.setup-note-card,
.admin-card,
.admin-stat-card,
.admin-dashboard-card,
.placeholder-card,
.access-denied-card,
.public-announcement-panel,
.theme-preview-card,
.course-mobile-menu-panel
{
	box-shadow: var(--shadow-card);
}

/* Small boxes and controls get a lighter shadow so the page gains
   depth without every element looking like a floating modal. */
.section-switcher,
.form-control,
.form-field input,
.form-field select,
.form-field textarea,
.theme-color-control input[type="text"],
.primary-button,
.secondary-button,
.compact-button,
.text-button,
.feed-tag-filter-link,
.bell-work-day,
.mini-calendar-day.is-today,
.toggle-field
{
	box-shadow: var(--shadow-control);
}

.feed-post:hover,
.widget:hover,
.class-card:hover,
.material-row:hover,
.discussion-topic-row:hover,
.person-row:hover,
.admin-dashboard-card:hover
{
	box-shadow: var(--shadow-hover);
}

@media (max-width: 700px)
{
	.feed-post-author-name
	{
		font-size: 1.08rem;
	}

	.feed-post-published
	{
		font-size: .61rem;
		letter-spacing: .085em;
	}

	/* Students enter directly into the feed content on mobile/desktop;
	   teacher controls still retain the normal feed heading. */
	.viewer-role-student .feed-column
	{
		padding-top: 2px;
	}
}

.feed-post-author-avatar
{
	width: 60px;
	height: 60px;
}

@media (max-width: 700px)
{
	.feed-post-author-avatar
	{
		width: 56px;
		height: 56px;
	}
}

@media (max-width: 390px)
{
	.feed-post-author-avatar
	{
		width: 52px;
		height: 52px;
	}
}

/* ---------------------------------------------------------
   v23.10 - Bell Work date tiles
   Keep the weekday quiet, separate the date visually, and let
   the numeric day carry the visual weight on desktop and mobile.
   --------------------------------------------------------- */
.bell-work-week
{
	gap: 7px;
}

.bell-work-day
{
	min-width: 0;
	min-height: 92px;
	padding: 8px 5px 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	overflow: hidden;
}

.bell-work-weekday
{
	display: block;
	width: 100%;
	color: var(--color-gray-500);
	font-family: var(--font-interface);
	font-size: .56rem;
	font-weight: 600;
	letter-spacing: .075em;
	line-height: 1.15;
	text-align: center;
	white-space: nowrap;
}

.bell-work-divider
{
	display: block;
	width: 72%;
	height: 1px;
	margin: 6px 0 5px;
	background: var(--color-gray-200);
}

.bell-work-month
{
	display: block;
	color: var(--course-accent);
	font-family: var(--font-interface);
	font-size: .55rem;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .09em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.bell-work-date
{
	display: block;
	margin-top: 2px;
	color: var(--course-dark);
	font-family: var(--font-interface);
	font-size: 1.45rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: -.025em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
}

.bell-work-status
{
	display: block;
	min-height: 10px;
	margin-top: 3px;
	color: var(--color-gray-400);
	font-family: var(--font-interface);
	font-size: .56rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
}

.bell-work-day.has-bell-work .bell-work-status
{
	color: var(--course-accent);
}

/* Retire the older month/date flex treatment. */
.bell-work-day strong,
.bell-work-day strong em
{
	display: block;
}

@media (max-width: 700px)
{
	.bell-work-week
	{
		padding: 10px;
		gap: 5px;
	}

	.bell-work-day
	{
		min-height: 88px;
		padding: 7px 3px 5px;
	}

	.bell-work-weekday
	{
		font-size: .5rem;
	}

	.bell-work-divider
	{
		width: 68%;
		margin: 5px 0 4px;
	}

	.bell-work-month
	{
		font-size: .49rem;
	}

	.bell-work-date
	{
		font-size: 1.28rem;
	}
}

@media (max-width: 390px)
{
	.bell-work-week
	{
		gap: 4px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.bell-work-day
	{
		min-height: 84px;
		padding-left: 2px;
		padding-right: 2px;
	}

	.bell-work-date
	{
		font-size: 1.18rem;
	}
}

/* Bell Work management and teacher preview states. */
.bell-work-day.is-unreleased { background: var(--color-gray-100); border-style: dashed; }
.bell-work-day.is-unreleased .bell-work-status { color: var(--color-gray-600); }
.bell-work-current-images { margin-bottom: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 220px)); gap: 12px; }
.bell-work-image-preview { margin: 0; overflow: hidden; border: 1px solid var(--color-gray-300); border-radius: var(--radius-medium); background: var(--color-gray-050); }
.bell-work-image-preview img { width: 100%; height: 145px; display: block; object-fit: cover; }
.bell-work-image-preview figcaption { padding: 8px 10px; overflow: hidden; color: var(--color-gray-600); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.bell-work-remove-image { margin-top: 14px; }
.bell-work-batch-message { margin-top: 14px; padding: 11px 13px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-medium); background: var(--color-gray-050); color: var(--color-gray-600); font-size: .76rem; }
.bell-work-batch-message.is-warning { border-color: var(--color-red); background: var(--color-red-light); color: var(--color-red-dark); }
.bell-work-batch-list { display: grid; }
.bell-work-batch-row { padding: 14px 18px; display: grid; grid-template-columns: 76px minmax(150px, .7fr) minmax(360px, 1.3fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--color-gray-200); }
.bell-work-batch-row:last-child { border-bottom: 0; }
.bell-work-batch-preview { width: 76px; height: 58px; overflow: hidden; border: 1px solid var(--color-gray-300); border-radius: var(--radius-small); background: var(--color-gray-100); }
.bell-work-batch-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bell-work-batch-identity { min-width: 0; display: grid; gap: 3px; }
.bell-work-batch-identity strong { overflow: hidden; color: var(--course-dark); font-family: var(--font-interface); font-size: .8rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bell-work-batch-identity small { color: var(--color-gray-500); font-size: .67rem; }
.bell-work-batch-fields { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(150px, .62fr); align-items: start; gap: 12px; }
.bell-work-batch-remove { min-height: 36px; margin: 0; padding: 8px 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--course-accent) 38%, var(--color-gray-300)); border-radius: var(--radius-small); background: var(--color-white); color: var(--course-accent); font-family: var(--font-interface); font-size: .7rem; font-weight: 600; line-height: 1; cursor: pointer; }
.bell-work-batch-remove:hover { border-color: var(--course-accent); background: color-mix(in srgb, var(--course-accent) 7%, white); }
.bell-work-batch-remove:focus-visible { outline: 3px solid color-mix(in srgb, var(--course-accent) 24%, transparent); outline-offset: 2px; }
.bell-work-set-details-grid .form-field { align-content: start; gap: 4px; }
.bell-work-set-details-grid .form-field > span { min-height: 17px; display: flex; align-items: flex-end; }
.bell-work-set-details-grid .form-field > input, .bell-work-set-details-grid .form-field > select { height: 44px; min-height: 44px; }
.bell-work-release-days[hidden] { display: none; }
.bell-work-release-custom[hidden] { display: none; }
.bell-work-pattern-help { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--color-gray-200); line-height: 1.5; }
@media (max-width: 820px) { .bell-work-batch-row { grid-template-columns: 64px minmax(0, 1fr); } .bell-work-batch-preview { width: 64px; height: 52px; } .bell-work-batch-fields { grid-column: 1 / -1; } .bell-work-batch-remove { grid-column: 2; justify-self: end; } }
@media (max-width: 520px) { .bell-work-batch-fields { grid-template-columns: 1fr; } }

/* Bell Work is a first-class planned calendar item. */
.mini-calendar-dots .dot-bell-work { background: var(--course-accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--course-dark) 22%, transparent); }
.calendar-entry-bell-work { border-color: color-mix(in srgb, var(--course-accent) 30%, var(--color-gray-300)); border-left: var(--accent-edge-width-small) solid var(--course-accent); border-top-left-radius: 0; border-bottom-left-radius: 0; background: color-mix(in srgb, var(--course-accent) 8%, white); }
.calendar-entry-bell-work.is-planned { border-style: dashed; border-left-style: solid; background: #fff9e8; }
.calendar-selected-bell-work { border-left: var(--accent-edge-width-small) solid var(--course-accent); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.calendar-agenda-bell-work { display: block; border: 1px solid color-mix(in srgb, var(--course-accent) 30%, var(--color-gray-300)); border-left: var(--accent-edge-width-small) solid var(--course-accent); border-top-left-radius: 0; border-bottom-left-radius: 0; background: color-mix(in srgb, var(--course-accent) 8%, white); color: var(--color-gray-700); text-decoration: none; }
.calendar-agenda-bell-work:hover { border-color: var(--course-dark); }
.legend-swatch-bell-work { background: color-mix(in srgb, var(--course-accent) 12%, white); border-left: 4px solid var(--course-accent); }

/* =========================================================
   87. V23.11 MOBILE HERO + FEED HEADER CLEANUP

   On phones, the course artwork lives fully inside the hero rather
   than retaining the desktop overhang. The hero teacher name gets
   more weight, native select chrome is simplified, the redundant
   Class Feed label is removed, and post date/weekday metadata gets
   enough room to remain readable on one line.
   ========================================================= */

.feed-heading-actions-only
{
	justify-content: flex-end;
}

.feed-heading-note-standalone
{
	margin: 0 0 14px;
}

.feed-post-header-side
{
	margin-left: auto;
	align-self: flex-start;
	text-align: right;
}

.feed-post-weekday
{
	text-align: right;
	white-space: nowrap;
}

.feed-post-published
{
	white-space: nowrap;
}

@media (max-width: 700px)
{
	/* Mobile hero: no overhang. Center the square image vertically
	   against the complete block of course information. */
	.course-hero,
	.course-hero.has-photo
	{
		align-items: center;
		min-height: 0;
		padding-top: 16px;
		padding-bottom: 18px;
	}

	.course-hero-photo-panel
	{
		align-self: center;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: none;
	}

	.course-hero-photo-frame
	{
		margin: 0;
	}

	.course-hero-content
	{
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.course-hero-teachers
	{
		margin-top: 7px;
		color: rgba(255, 255, 255, .95);
		font-family: var(--font-interface);
		font-size: .92rem;
		font-weight: 600;
		line-height: 1.2;
	}

	/* Remove iOS's double-arrow/spinner-looking closed select chrome.
	   Tapping still uses the accessible native choice sheet, but the
	   resting control matches the rest of HP Classroom. */
	select,
	.section-switcher
	{
		-webkit-appearance: none;
		appearance: none;
		padding-right: 38px !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%235b6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 13px center;
		background-size: 12px 8px;
	}

	/* There is no page title above the feed anymore; keep the teacher
	   controls useful without reserving a heading-sized gap. */
	.feed-heading-actions-only
	{
		margin: 0 0 13px;
	}

	.feed-heading-actions-only .feed-heading-actions
	{
		margin-left: 0;
	}

	/* Header layout: author gets all remaining room and the weekday is
	   anchored to the far right. This keeps the published timestamp on
	   one line on normal iPhone widths. */
	.feed-post-header-compact
	{
		display: grid;
		grid-template-columns: minmax(0, 1fr) max-content;
		align-items: start;
		column-gap: 10px;
	}

	.feed-post-author
	{
		min-width: 0;
	}

	.feed-post-author-copy
	{
		min-width: 0;
	}

	.feed-post-published
	{
		font-size: .58rem;
		letter-spacing: .07em;
	}

	.feed-post-header-side
	{
		margin-left: 0;
		justify-self: end;
		align-self: start;
		min-width: max-content;
	}

	.feed-post-weekday
	{
		font-size: 1.55rem;
		letter-spacing: .065em;
		text-align: right;
	}
}

@media (max-width: 390px)
{
	.course-hero,
	.course-hero.has-photo
	{
		padding-top: 14px;
		padding-bottom: 16px;
	}

	.course-hero-teachers
	{
		font-size: .86rem;
	}

	.feed-post-header-compact
	{
		column-gap: 7px;
	}

	.feed-post-published
	{
		font-size: .54rem;
		letter-spacing: .055em;
	}

	.feed-post-weekday
	{
		font-size: 1.34rem;
		letter-spacing: .05em;
	}
}

/* =========================================================
   88. V23.12 IOS CACHE + MOBILE HERO REINFORCEMENT

   Static assets now use filemtime cache-busting in PHP. These final mobile
   rules make the intended hero/select/feed-header differences unmistakable
   once Safari receives the current stylesheet.
   ========================================================= */

@media (max-width: 700px)
{
	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 100px minmax(0, 1fr);
		gap: 16px;
		align-items: center;
		padding: 18px 16px 20px;
	}

	.course-hero-photo-panel
	{
		align-self: center;
		transform: none !important;
	}

	.course-hero-photo-frame
	{
		width: 100px;
		height: 100px;
		margin: 0;
	}

	.course-hero-content
	{
		align-self: center;
		min-height: 0;
		padding: 0;
	}

	.course-hero-teachers
	{
		margin-top: 8px;
		font-size: 1.05rem;
		font-weight: 600;
	}

	.section-switcher
	{
		-webkit-appearance: none !important;
		appearance: none !important;
		background-color: #fff;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M2 2l5 5 5-5' fill='none' stroke='%235b6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: right 14px center !important;
		background-size: 12px 8px !important;
		padding-right: 40px !important;
	}

	.feed-post-published
	{
		white-space: nowrap !important;
	}

	.feed-post-header-side
	{
		justify-self: end;
		text-align: right;
	}

	.feed-post-weekday
	{
		font-size: 1.65rem;
		text-align: right;
	}
}

@media (max-width: 390px)
{
	.course-hero,
	.course-hero.has-photo
	{
		grid-template-columns: 92px minmax(0, 1fr);
		gap: 13px;
		padding: 16px 13px 18px;
	}

	.course-hero-photo-frame
	{
		width: 92px;
		height: 92px;
	}

	.course-hero-teachers
	{
		font-size: .98rem;
	}
}

/* =========================================================
   89. V23.13 MOBILE FEED WEEKDAY ALIGNMENT

   Anchor the weekday to the actual right edge of the post header.
   Grid alignment can still leave the weekday visually close to the
   author column when the author content establishes the intrinsic
   width. On phones, the weekday is positioned against the header's
   right padding instead.
   ========================================================= */

@media (max-width: 700px)
{
	.feed-post-header-compact
	{
		position: relative;
		display: block;
		width: 100%;
		box-sizing: border-box;
		min-height: 78px;
	}

	.feed-post-author
	{
		width: 100%;
		box-sizing: border-box;
		padding-right: 155px;
	}

	.feed-post-header-side
	{
		position: absolute;
		top: 16px;
		right: 14px;
		margin: 0;
		text-align: right;
	}

	.feed-post-weekday
	{
		margin: 0;
		text-align: right;
	}
}

@media (max-width: 390px)
{
	.feed-post-author
	{
		padding-right: 130px;
	}

	.feed-post-header-side
	{
		top: 14px;
		right: 11px;
	}
}

/* =========================================================
   V23.14 - POST EDITOR RHYTHM + IOS FIELD CONTAINMENT
   ========================================================= */

/* The post editor has several stacked form groups. Give the
   major groups their own breathing room so labels never sit
   against the control above them. */
.editor-card > .form-grid + .form-field,
.editor-card > .form-field + .form-grid,
.editor-card > .form-grid + .form-grid
{
	margin-top: 20px;
}

/* Keep native date/time controls from using an intrinsic width
   wider than their grid column (notably Mobile Safari). */
.form-control[type="date"],
.form-control[type="time"],
.form-control[type="datetime-local"]
{
	width: 100%;
	min-width: 0;
	max-width: 100%;
	display: block;
}

/* The main post textarea should feel roomy without swallowing
   most of a phone screen before attachments/tags are reached. */
.post-textarea
{
	min-height: 190px;
}

@media (max-width: 700px)
{
	.editor-page-shell
	{
		width: calc(100% - 24px);
		margin-top: 16px;
		margin-bottom: 48px;
	}

	.editor-page-heading
	{
		margin-bottom: 14px;
		gap: 8px;
	}

	.editor-page-heading .eyebrow
	{
		line-height: 1.35;
	}

	.editor-page-heading h1
	{
		margin-top: 4px;
		line-height: 1.15;
	}

	/* Cancel already exists with the Save/Publish actions at the
	   bottom. Hiding the duplicate top button keeps narrow layouts
	   from creating an odd full-width bar under the page title. */
	.editor-page-heading .secondary-button
	{
		display: none;
	}

	.editor-card
	{
		padding: 18px 16px;
	}

	.editor-card-heading
	{
		margin-bottom: 18px;
	}

	.editor-card-heading h2
	{
		font-size: 1.08rem;
		line-height: 1.25;
	}

	.editor-card-heading p
	{
		margin-top: 6px;
		line-height: 1.55;
	}

	.form-grid
	{
		gap: 18px;
	}

	.editor-card > .form-grid + .form-field,
	.editor-card > .form-field + .form-grid,
	.editor-card > .form-grid + .form-grid
	{
		margin-top: 20px;
	}

	.form-field
	{
		min-width: 0;
		gap: 7px;
	}

	.form-field label
	{
		margin-bottom: 0;
		line-height: 1.3;
	}

	.form-control
	{
		max-width: 100%;
		padding: 11px 12px;
	}

	/* Mobile Safari gives native date fields a generous intrinsic
	   width and centered presentation. appearance:none keeps it
	   contained while tapping the control still invokes the native
	   date picker. */
	.form-control[type="date"],
	.form-control[type="time"],
	.form-control[type="datetime-local"]
	{
		-webkit-appearance: none;
		appearance: none;
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		text-align: left;
	}

	.post-textarea
	{
		min-height: 220px;
		line-height: 1.55;
	}

	.optional-label
	{
		white-space: nowrap;
	}

	.tag-choice-list
	{
		gap: 9px;
	}

	.tag-choice span
	{
		padding-inline: 13px;
	}

	.editor-actions
	{
		gap: 10px;
		margin-top: 2px;
	}
}

@media (max-width: 420px)
{
	.editor-page-shell
	{
		width: calc(100% - 20px);
	}

	.editor-card
	{
		padding: 17px 14px;
	}

	.post-textarea
	{
		min-height: 200px;
	}
}


/* =========================================================
   UNIFIED BUTTON SYSTEM

   Primary, secondary, and destructive actions share one box
   model throughout the application. Context determines color;
   size, shape, spacing, focus, and responsive behavior remain
   consistent. Compact controls and text actions are intentionally
   smaller. Pills, drag handles, and icon-only controls keep their
   purpose-specific geometry.
   ========================================================= */

.primary-button, .secondary-button, .danger-button { min-height: 40px; margin: 0; padding: 9px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; appearance: none; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-interface); font-size: .8rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; vertical-align: middle; white-space: nowrap; cursor: pointer; box-shadow: var(--shadow-control); transition: background .15s ease, border-color .15s ease, color .15s ease, filter .15s ease, box-shadow .15s ease, transform .15s ease; }
.primary-button { background: var(--course-accent); color: var(--color-white); }
.secondary-button { border-color: color-mix(in srgb, var(--course-dark) 18%, var(--color-gray-300)); background: var(--color-white); color: var(--course-dark); }
.danger-button { background: var(--color-red); color: var(--color-white); }
.primary-button:hover, .danger-button:hover { filter: brightness(.93); box-shadow: 0 6px 16px rgba(24, 39, 55, .16); transform: translateY(-1px); }
.secondary-button:hover { border-color: color-mix(in srgb, var(--course-dark) 34%, var(--color-gray-300)); background: color-mix(in srgb, var(--course-light) 52%, var(--color-white)); color: var(--course-dark); box-shadow: 0 6px 16px rgba(24, 39, 55, .14); transform: translateY(-1px); }
.primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(0); box-shadow: var(--shadow-control); }
.primary-button:focus-visible, .secondary-button:focus-visible, .danger-button:focus-visible, .small-primary-button:focus-visible, .calendar-nav-button:focus-visible, .calendar-today-link:focus-visible, .materials-icon-button:focus-visible, .class-day-edit-button:focus-visible, .people-filter-button:focus-visible, .theme-preset-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--course-accent) 28%, transparent); outline-offset: 2px; }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled, .small-primary-button:disabled { opacity: .52; filter: none; cursor: not-allowed; box-shadow: none; transform: none; }
.primary-button.primary-button-large, .primary-button.landing-login-button, .primary-button.auth-submit { min-height: 44px; padding: 11px 18px; font-size: .84rem; }
.primary-button.compact-button, .secondary-button.compact-button, .danger-button.compact-button { width: auto; min-height: 34px; padding: 6px 10px; border-radius: 7px; font-size: .68rem; }
.small-primary-button { min-height: 34px; margin: 0; padding: 6px 11px; display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 1px solid transparent; border-radius: 7px; background: var(--course-accent); color: var(--color-white); font-family: var(--font-interface); font-size: .7rem; font-weight: 600; line-height: 1.2; cursor: pointer; box-shadow: 0 2px 7px rgba(24, 39, 55, .11); transition: filter .15s ease, box-shadow .15s ease, transform .15s ease; }
.small-primary-button:hover { filter: brightness(.93); box-shadow: 0 4px 11px rgba(24, 39, 55, .14); transform: translateY(-1px); }

.calendar-nav-button, .calendar-today-link, .materials-icon-button, .class-day-edit-button { min-height: 36px; border-radius: 8px; }
.section-remove-button { width: 36px; height: 36px; border-radius: 8px; }
.people-filter-button, .theme-preset-button { min-height: 34px; }
.text-danger-button, .text-button-danger { min-height: 34px; margin: 0; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; appearance: none; line-height: 1.2; vertical-align: middle; }
.comment-form-actions .text-button, .discussion-inline-reply-actions .text-button, .discussion-main-reply-actions .text-button { min-height: 32px; margin: 0; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
.auth-form-actions .text-button { min-height: 40px; margin: 0; padding: 6px 8px; display: inline-flex; align-items: center; justify-content: center; }

.setup-page-heading-actions > div:first-child, .admin-page-heading > div:first-child, .classes-heading > div:first-child, .calendar-heading > div:first-child, .materials-heading > div:first-child, .management-heading > div:first-child, .discussions-heading > div:first-child { min-width: 0; }
.feed-heading-actions, .discussion-heading-actions, .admin-heading-actions, .setup-heading-buttons, .setup-portal-actions, .classes-heading-main-actions, .editor-actions, .form-actions, .setup-form-actions, .admin-form-actions, .account-profile-actions, .setup-card-footer, .auth-form-actions { align-items: center; gap: 10px; }
.feed-heading-actions, .discussion-heading-actions, .admin-heading-actions, .setup-heading-buttons, .setup-portal-actions, .classes-heading-main-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; }
.form-actions { display: flex; justify-content: flex-end; }
.feed-heading-actions > form, .discussion-heading-actions > form, .admin-heading-actions > form, .setup-heading-buttons > form, .setup-management-actions > form, .admin-membership-actions > form, .school-year-actions > form { margin: 0; display: flex; align-items: center; }
.feed-heading-actions > .primary-button, .feed-heading-actions > .secondary-button, .discussion-heading-actions > .primary-button, .discussion-heading-actions > .secondary-button, .setup-heading-buttons > .primary-button, .setup-heading-buttons > .secondary-button, .classes-heading-main-actions > .primary-button, .classes-heading-main-actions > .secondary-button, .setup-portal-actions > .primary-button, .setup-portal-actions > .secondary-button { width: auto; min-width: 120px; }
.admin-heading-actions > .primary-button, .admin-heading-actions > .secondary-button, .admin-heading-actions > form > .primary-button, .admin-heading-actions > form > .secondary-button { width: auto; min-width: 132px; }
.editor-actions > .primary-button:not(.compact-button), .editor-actions > .secondary-button:not(.compact-button), .form-actions > .primary-button:not(.compact-button), .form-actions > .secondary-button:not(.compact-button), .setup-form-actions > .primary-button:not(.compact-button), .setup-form-actions > .secondary-button:not(.compact-button), .admin-form-actions > .primary-button:not(.compact-button), .admin-form-actions > .secondary-button:not(.compact-button), .account-profile-actions > .primary-button:not(.compact-button), .account-profile-actions > .secondary-button:not(.compact-button), .setup-card-footer > .primary-button:not(.compact-button), .setup-card-footer > .secondary-button:not(.compact-button):not(.full-width-button) { width: auto; min-width: 132px; }
.editor-actions > .primary-button, .editor-actions > .secondary-button { min-height: 44px; }
.feature-settings-footer > .primary-button { width: auto; min-width: 132px; }
.secondary-button.full-width-button { width: 100%; }
.setup-management-actions, .admin-membership-actions, .school-year-actions { align-items: center; }
.admin-filter-actions .compact-button { height: 46px; min-height: 46px; }
.admin-add-enrollment-form .compact-button, .calendar-copy-box .compact-button, .admin-password-row .compact-button { min-height: 40px; }
.discussion-search-field .compact-button { min-height: 44px; }
.people-profile-role-form select, .people-profile-role-form .compact-button { min-height: 34px; }

@media (max-width: 700px)
{
	.primary-button, .secondary-button, .danger-button { min-height: 44px; }
	.primary-button.compact-button, .secondary-button.compact-button, .danger-button.compact-button, .text-danger-button, .text-button-danger { min-height: 40px; }
	.discussion-search-field .compact-button { min-height: 44px; }
	.people-profile-role-form select { min-height: 40px; }
	.small-primary-button, .comment-form-actions .text-button, .discussion-inline-reply-actions .text-button, .discussion-main-reply-actions .text-button { min-height: 36px; }
	.feed-heading-actions, .discussion-heading-actions { width: 100%; }
	.feed-heading-actions > .primary-button, .feed-heading-actions > .secondary-button, .discussion-heading-actions > .primary-button, .discussion-heading-actions > .secondary-button { width: auto; min-width: 0; flex: 1; }
	.editor-actions, .form-actions, .setup-form-actions, .admin-form-actions, .account-profile-actions { width: 100%; align-items: stretch; flex-direction: column-reverse; }
	.editor-actions > .primary-button:not(.compact-button), .editor-actions > .secondary-button:not(.compact-button), .form-actions > .primary-button:not(.compact-button), .form-actions > .secondary-button:not(.compact-button), .setup-form-actions > .primary-button:not(.compact-button), .setup-form-actions > .secondary-button:not(.compact-button), .admin-form-actions > .primary-button:not(.compact-button), .admin-form-actions > .secondary-button:not(.compact-button), .account-profile-actions > .primary-button:not(.compact-button), .account-profile-actions > .secondary-button:not(.compact-button) { width: 100%; min-width: 0; }
	.setup-card-footer:not(.feature-settings-footer) { align-items: stretch; flex-direction: column-reverse; }
	.feature-settings-footer { align-items: stretch; flex-direction: column; }
	.setup-card-footer > .primary-button:not(.compact-button), .setup-card-footer > .secondary-button:not(.compact-button), .feature-settings-footer > .primary-button { width: 100%; min-width: 0; }
}

@media (max-width: 640px)
{
	.setup-heading-buttons { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.setup-heading-buttons > .primary-button, .setup-heading-buttons > .secondary-button { width: 100%; min-width: 0; }
	.bell-work-heading-buttons > .secondary-button:first-child { grid-column: 1 / -1; }
	.admin-heading-actions, .classes-heading-main-actions, .setup-portal-actions { width: 100%; }
	.admin-heading-actions > .primary-button, .admin-heading-actions > .secondary-button, .admin-heading-actions > form, .admin-heading-actions > form > .primary-button, .admin-heading-actions > form > .secondary-button, .classes-heading-main-actions > .primary-button, .classes-heading-main-actions > .secondary-button, .setup-portal-actions > .primary-button, .setup-portal-actions > .secondary-button { width: 100%; min-width: 0; }
}


/* =========================================================
   UNIFIED NAVIGATION + WIDGET ICONS

   Each monochrome SVG is used as a mask, so one asset follows the
   surrounding text color on dark, light, hover, and active states.
   ========================================================= */

.ui-icon { --ui-icon: none; width: 18px; height: 18px; display: inline-block; flex: 0 0 18px; background-color: currentColor; -webkit-mask: var(--ui-icon) center / contain no-repeat; mask: var(--ui-icon) center / contain no-repeat; }
.ui-icon-home { --ui-icon: url('../icons/home.svg'); }
.ui-icon-calendar { --ui-icon: url('../icons/calendar.svg'); }
.ui-icon-materials { --ui-icon: url('../icons/materials.svg'); }
.ui-icon-discussions { --ui-icon: url('../icons/discussions.svg'); }
.ui-icon-flashcards { --ui-icon: url('../icons/flashcards.svg'); }
.ui-icon-people { --ui-icon: url('../icons/people.svg'); }
.ui-icon-settings { --ui-icon: url('../icons/settings.svg'); }
.ui-icon-overview { --ui-icon: url('../icons/overview.svg'); }
.ui-icon-import { --ui-icon: url('../icons/import.svg'); }
.ui-icon-classes { --ui-icon: url('../icons/classes.svg'); }
.ui-icon-create-class { --ui-icon: url('../icons/create-class.svg'); }
.ui-icon-profile { --ui-icon: url('../icons/profile.svg'); }
.ui-icon-user-add { --ui-icon: url('../icons/user-add.svg'); }
.ui-icon-password { --ui-icon: url('../icons/password.svg'); }
.ui-icon-sign-out { --ui-icon: url('../icons/sign-out.svg'); }
.ui-icon-announcement { --ui-icon: url('../icons/announcement.svg'); }
.ui-icon-bell-work { --ui-icon: url('../icons/bell-work.svg?v=3'); }
.ui-icon-countdown { --ui-icon: url('../icons/countdown.svg'); }
.ui-icon-unit { --ui-icon: url('../icons/unit.svg'); }
.ui-icon-upcoming { --ui-icon: url('../icons/upcoming.svg'); }
.ui-icon-poll { --ui-icon: url('../icons/poll.svg'); }
.ui-icon-link { --ui-icon: url('../icons/link.svg?v=6'); }
.ui-icon-database { --ui-icon: url('../icons/database.svg'); }
.ui-icon-themes { --ui-icon: url('../icons/themes.svg'); }

.course-nav-desktop > a, .course-mobile-menu-panel > a, .admin-nav a { display: inline-flex; align-items: center; gap: 8px; }
.course-nav-desktop > a { color: var(--color-white); }
.course-mobile-menu-panel > a { display: flex; }
.admin-nav a .ui-icon { width: 17px; height: 17px; flex-basis: 17px; }
.portal-user-menu-panel, .header-user-menu-panel { min-width: 224px; }
.portal-user-menu-panel a, .portal-user-menu-panel button, .header-user-menu-panel a, .header-user-menu-panel button { display: flex; align-items: center; gap: 10px; }
.portal-user-menu-panel .ui-icon, .header-user-menu-panel .ui-icon { width: 18px; height: 18px; flex-basis: 18px; color: var(--color-gray-600); }
.portal-user-menu-panel a:hover .ui-icon, .portal-user-menu-panel button:hover .ui-icon, .header-user-menu-panel a:hover .ui-icon, .header-user-menu-panel button:hover .ui-icon { color: var(--course-dark, var(--color-blue-dark)); }
.widget-title { display: flex; align-items: center; gap: 8px; }
.widget-title .ui-icon { width: 20px; height: 20px; flex-basis: 20px; color: var(--course-accent); }

@media (max-width: 700px)
{
	.course-mobile-menu-panel > a { gap: 11px; }
	.course-mobile-menu-panel .ui-icon { width: 20px; height: 20px; flex-basis: 20px; }
	.portal-user-menu-panel .ui-icon, .header-user-menu-panel .ui-icon { width: 19px; height: 19px; flex-basis: 19px; }
}


/* =========================================================
   SQUARE PHOTO CROPPER

   Shared by avatar and course-photo uploads. The browser creates
   the final square file; the server independently verifies it.
   ========================================================= */

body.square-photo-cropper-open { overflow: hidden; }
.square-photo-cropper[hidden] { display: none; }
.square-photo-cropper { position: fixed; inset: 0; z-index: 10000; padding: 24px; display: grid; place-items: center; }
.square-photo-cropper-backdrop { position: absolute; inset: 0; background: rgba(12, 27, 44, .72); backdrop-filter: blur(3px); }
.square-photo-cropper-panel { position: relative; width: min(620px, 100%); max-height: calc(100vh - 48px); overflow: auto; border-top: 7px solid var(--color-blue); border-radius: 0 0 var(--radius-large) var(--radius-large); background: var(--color-white); box-shadow: 0 24px 68px rgba(7, 20, 34, .36); }
.square-photo-cropper-header { padding: 19px 22px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-050); }
.square-photo-cropper-header h2 { margin: 3px 0 0; color: var(--color-blue-dark); font-size: 1.35rem; text-transform: capitalize; }
.square-photo-cropper-close { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border: 1px solid var(--color-gray-300); border-radius: 50%; background: var(--color-white); color: var(--color-gray-700); font-size: 1.55rem; line-height: 1; cursor: pointer; }
.square-photo-cropper-close:hover, .square-photo-cropper-close:focus-visible { border-color: var(--color-blue); color: var(--color-blue-dark); }
.square-photo-cropper-help { margin: 0; padding: 14px 22px; color: var(--color-gray-600); font-size: .84rem; line-height: 1.5; }
.square-photo-cropper-stage { position: relative; width: min(460px, calc(100% - 44px)); aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; border-radius: var(--radius-medium); background: #16202a; box-shadow: 0 0 0 1px var(--color-gray-300); cursor: grab; touch-action: none; user-select: none; }
.square-photo-cropper-stage.is-dragging { cursor: grabbing; }
.square-photo-cropper-stage canvas { width: 100%; height: 100%; display: block; }
.square-photo-cropper-frame { position: absolute; inset: 0; border: 3px solid rgba(255, 255, 255, .92); box-shadow: inset 0 0 0 1px rgba(10, 24, 40, .35); pointer-events: none; }
.square-photo-cropper-frame::before, .square-photo-cropper-frame::after { content: ''; position: absolute; inset: 33.333% 0 auto; border-top: 1px solid rgba(255, 255, 255, .42); }
.square-photo-cropper-frame::after { inset: 66.666% 0 auto; }
.square-photo-cropper-zoom { margin: 16px 22px 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 48px; align-items: center; gap: 12px; color: var(--color-gray-700); font-family: var(--font-interface); font-size: .78rem; font-weight: 600; }
.square-photo-cropper-zoom input { width: 100%; margin: 0; accent-color: var(--color-blue); }
.square-photo-cropper-zoom output { color: var(--color-gray-600); font-variant-numeric: tabular-nums; text-align: right; }
.square-photo-cropper-error { margin: 14px 22px 0; padding: 10px 12px; border-radius: var(--radius-small); background: #fff2f0; color: #9e231d; font-family: var(--font-interface); font-size: .78rem; line-height: 1.4; }
.square-photo-cropper-error[hidden] { display: none; }
.square-photo-cropper-actions { padding: 18px 22px 22px; display: flex; align-items: center; gap: 10px; }
.square-photo-cropper-actions .primary-button, .square-photo-cropper-actions .secondary-button { min-width: 112px; }
.square-photo-cropper-action-spacer { flex: 1; }

@media (max-width: 620px)
{
	.square-photo-cropper { padding: 10px; }
	.square-photo-cropper-panel { max-height: calc(100vh - 20px); }
	.square-photo-cropper-header { padding: 15px 16px 12px; }
	.square-photo-cropper-help { padding: 11px 16px; }
	.square-photo-cropper-stage { width: min(100% - 32px, 420px); }
	.square-photo-cropper-zoom { margin: 14px 16px 0; }
	.square-photo-cropper-actions { padding: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.square-photo-cropper-actions .primary-button, .square-photo-cropper-actions .secondary-button { width: 100%; min-width: 0; }
	.square-photo-cropper-action-spacer { display: none; }
	.square-photo-cropper-actions [data-square-crop-reset] { grid-column: 1 / -1; }
}


/* =========================================================
   PEOPLE LIST CHEVRONS

   A drawn chevron stays optically centered; the old font glyph
   sat unevenly inside its circular action target.
   ========================================================= */

.admin-people-table th:last-child, .admin-people-table td:last-child { width: 58px; text-align: center; }
.admin-row-arrow, .person-row-arrow { width: 30px; height: 30px; box-sizing: border-box; display: inline-grid; place-items: center; flex: 0 0 30px; border-radius: 50%; color: var(--color-blue); font-size: 0; line-height: 0; vertical-align: middle; }
.admin-row-arrow { margin: 0 auto; }
.admin-row-arrow::before, .person-row-arrow::before { content: ''; width: 10px; height: 14px; display: block; background: currentColor; -webkit-mask: url('../icons/chevron-right.svg') center / contain no-repeat; mask: url('../icons/chevron-right.svg') center / contain no-repeat; }
.admin-row-arrow:hover, .admin-row-arrow:focus-visible { background: var(--color-blue-light); }
.person-row-main { grid-template-columns: 48px minmax(0, 1fr) 30px; }
.person-row-arrow { color: var(--course-dark); transition: background-color .15s ease, color .15s ease; }
.person-row-main:hover .person-row-arrow, .person-row-main:focus-visible .person-row-arrow { background: var(--course-light); }

@media (max-width: 520px)
{
	.person-row-main { grid-template-columns: 40px minmax(0, 1fr) 30px; }
}


/* =========================================================
   COURSE IMAGE CATALOG
   ========================================================= */

.course-image-catalog-card { border-top: var(--accent-edge-width) solid var(--color-blue); border-radius: 0 0 var(--radius-large) var(--radius-large); }
.course-image-catalog-toolbar, .theme-catalog-toolbar { padding: 16px 18px; display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 210px)); gap: 10px; border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-050); }
.course-image-catalog-toolbar input, .course-image-catalog-toolbar select, .theme-catalog-toolbar input, .theme-catalog-toolbar select { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-small); background: var(--color-white); color: var(--color-gray-700); font-family: var(--font-interface); font-size: .8rem; }
.course-image-admin-grid { padding: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.course-image-admin-card { min-width: 0; overflow: hidden; border: 1px solid var(--color-gray-300); border-radius: var(--radius-medium); background: var(--color-white); box-shadow: var(--shadow-control); }
.course-image-admin-card[hidden] { display: none; }
.course-image-admin-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-gray-100); }
.course-image-admin-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.course-image-status { position: absolute; top: 9px; right: 9px; padding: 4px 8px; border-radius: 999px; font-family: var(--font-interface); font-size: .58rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 3px 9px rgba(16, 28, 42, .20); }
.course-image-status-active { background: #eaf6ef; color: #276c47; }
.course-image-status-inactive { background: var(--color-gray-200); color: var(--color-gray-600); }
.course-image-admin-copy { padding: 13px; display: grid; gap: 11px; }
.course-image-admin-copy > div:first-child { min-width: 0; display: grid; gap: 3px; }
.course-image-admin-copy strong { overflow: hidden; color: var(--color-blue-dark); font-family: var(--font-interface); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.course-image-admin-copy > div:first-child > span { color: var(--color-gray-500); font-family: var(--font-interface); font-size: .64rem; }
.course-image-swatches { display: flex; align-items: center; gap: 6px; }
.course-image-swatches > span, .course-image-swatches > i { width: 22px; height: 22px; display: block; border: 2px solid var(--color-white); border-radius: 50%; background: var(--swatch-color); box-shadow: 0 0 0 1px var(--color-gray-300); }
.course-image-no-results, .course-image-empty-state, .theme-catalog-empty-state { padding: 42px 22px; display: grid; justify-items: center; gap: 8px; color: var(--color-gray-600); text-align: center; }
.course-image-no-results[hidden] { display: none; }
.course-image-no-results strong, .course-image-empty-state strong, .theme-catalog-empty-state strong { color: var(--color-blue-dark); font-family: var(--font-interface); }
.course-image-no-results span, .course-image-empty-state p, .theme-catalog-empty-state p { margin: 0; font-size: .82rem; }
.course-image-placeholder-art { width: 92px; aspect-ratio: 1 / 1; display: grid; place-items: center; border: 2px dashed var(--color-gray-300); border-radius: var(--radius-medium); background: var(--color-gray-050); color: var(--color-gray-400); }
.course-image-placeholder-art .ui-icon { width: 34px; height: 34px; flex-basis: 34px; }
.course-image-editor { display: grid; grid-template-columns: minmax(0, 1fr) 310px; align-items: start; gap: 18px; }
.course-image-editor-layout { min-width: 0; display: grid; gap: 18px; }
.course-image-editor-preview-card { position: sticky; top: 18px; padding: 15px; display: grid; gap: 12px; border: 1px solid var(--color-gray-300); border-top: 6px solid var(--catalog-accent); border-radius: 0 0 var(--radius-large) var(--radius-large); background: var(--catalog-off-white); box-shadow: var(--shadow-card); }
.course-image-editor-preview-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 4px solid var(--catalog-off-white); border-radius: var(--radius-medium); background: var(--catalog-primary-dark); box-shadow: 0 7px 18px rgba(16, 28, 42, .20); }
.course-image-editor-preview-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.course-image-editor-preview-photo img[hidden], .course-image-editor-preview-photo .course-image-placeholder-art[hidden] { display: none; }
.course-image-editor-preview-photo .course-image-placeholder-art { width: 100%; height: 100%; border: 0; border-radius: 0; background: color-mix(in srgb, var(--catalog-primary-dark) 88%, white); color: var(--catalog-off-white); }
.course-image-editor-preview-photo .course-image-placeholder-art span { font-family: var(--font-interface); font-size: .72rem; }
.course-image-editor-preview-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.course-image-editor-preview-colors span { height: 13px; border: 1px solid rgba(16, 28, 42, .12); border-radius: 999px; }
.course-image-editor-preview-colors span:nth-child(1) { background: var(--catalog-primary-dark); }
.course-image-editor-preview-colors span:nth-child(2) { background: var(--catalog-accent); }
.course-image-editor-preview-colors span:nth-child(3) { background: var(--catalog-off-white); }
.course-image-color-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.course-image-active-toggle { margin-top: 18px; }
.course-image-editor-actions { grid-column: 1 / -1; }
.theme-catalog-picker .setup-card-header { align-items: center; }
.theme-catalog-picker .setup-card-body { padding: 0; }
.theme-catalog-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(150px, 210px); padding: 14px 16px; }
.theme-catalog-grid { max-height: 510px; padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; overflow-y: auto; overscroll-behavior: contain; }
.theme-catalog-card { position: relative; min-width: 0; padding: 0; overflow: hidden; display: grid; align-content: start; border: 2px solid transparent; border-radius: var(--radius-medium); background: var(--color-white); color: inherit; font: inherit; text-align: left; box-shadow: 0 0 0 1px var(--color-gray-300), var(--shadow-control); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.theme-catalog-card:hover, .theme-catalog-card:focus-visible { border-color: color-mix(in srgb, var(--course-dark) 40%, transparent); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.theme-catalog-card.is-selected { border-color: var(--course-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--course-accent) 22%, transparent), var(--shadow-hover); }
.theme-catalog-card[hidden] { display: none; }
.theme-catalog-card > img { width: 100%; aspect-ratio: 1 / 1; display: block; object-fit: cover; background: var(--color-gray-100); }
.theme-catalog-card-copy { min-width: 0; padding: 10px 10px 5px; display: grid; gap: 2px; }
.theme-catalog-card-copy strong { overflow: hidden; color: var(--course-dark); font-family: var(--font-interface); font-size: .73rem; text-overflow: ellipsis; white-space: nowrap; }
.theme-catalog-card-copy small { overflow: hidden; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
.theme-catalog-card .course-image-swatches { padding: 4px 10px 10px; }
.theme-catalog-card .course-image-swatches > i { width: 16px; height: 16px; }
.theme-catalog-selected-label { position: absolute; top: 8px; right: 8px; padding: 4px 7px; display: none; border-radius: 999px; background: var(--course-accent); color: var(--color-white); font-family: var(--font-interface); font-size: .5rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 3px 9px rgba(16, 28, 42, .22); }
.theme-catalog-card.is-selected .theme-catalog-selected-label { display: block; }
.theme-catalog-no-results { margin: 0 16px 16px; padding: 18px; border: 1px dashed var(--color-gray-300); border-radius: var(--radius-medium); color: var(--color-gray-500); font-size: .78rem; text-align: center; }
.theme-catalog-no-results[hidden] { display: none; }

@media (max-width: 1080px)
{
	.course-image-admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.course-image-editor { grid-template-columns: minmax(0, 1fr) 270px; }
	.course-image-color-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px)
{
	.course-image-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.course-image-editor { grid-template-columns: 1fr; }
	.course-image-editor-preview-card { position: static; width: min(360px, 100%); grid-row: 1; justify-self: center; }
	.course-image-editor-actions { grid-column: auto; }
	.theme-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px)
{
	.course-image-catalog-toolbar, .theme-catalog-toolbar { grid-template-columns: 1fr; }
	.course-image-admin-grid { padding: 12px; gap: 12px; }
}

@media (max-width: 430px)
{
	.course-image-admin-grid, .theme-catalog-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   94. DESKTOP COURSE HERO PHOTO BALANCE

   On desktop, keep the square course image equally inset from
   the hero's top and left edges while preserving the badge-style
   overhang below the hero.
   ========================================================= */

@media (min-width: 901px)
{
.course-hero, .course-hero.has-photo { grid-template-columns: 228px minmax(0, 1fr); gap: 24px; padding-right: 32px; padding-left: 32px; }
.course-hero-photo-panel { transform: translate(-4px, 23px); }
.course-hero-photo-frame { width: 228px; height: 228px; }
}

/* =========================================================
   FEED BELL WORK + ATTACHMENT ROWS
   The post text leads. Bell Work and file attachments follow as
   compact course-themed rows with directional left accents.
   ========================================================= */
.feed-bell-work-card { margin: 18px 0 0; display: flex; align-items: stretch; overflow: hidden; border: 1px solid var(--color-gray-300); border-left: var(--accent-edge-width-small) solid var(--course-accent); border-radius: 0 var(--radius-medium) var(--radius-medium) 0; background: var(--color-white); box-shadow: 0 3px 11px rgba(24, 39, 55, .08); }
.feed-bell-work-main { min-width: 0; padding: 12px 14px; display: grid; grid-template-columns: 45px minmax(0, 1fr) auto; align-items: center; gap: 12px; flex: 1; color: inherit; text-decoration: none; }
.feed-bell-work-main:hover { background: color-mix(in srgb, var(--course-light) 28%, var(--color-white)); }
.feed-bell-work-icon { width: 45px; height: 43px; display: grid; place-items: center; color: var(--course-dark); background: transparent; }
.feed-bell-work-icon .ui-icon { width: 24px; height: 24px; flex-basis: 24px; }
.feed-bell-work-copy { min-width: 0; }
.feed-bell-work-kicker { margin-bottom: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-interface); }
.feed-bell-work-kicker span { color: var(--course-dark); font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.feed-bell-work-kicker small { color: var(--color-gray-500); font-size: .64rem; font-weight: 600; }
.feed-bell-work-title { display: block; overflow: hidden; color: var(--course-dark); font-family: var(--font-interface); font-size: .88rem; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.feed-bell-work-main:hover .feed-bell-work-title { text-decoration: underline; }
.feed-bell-work-arrow { margin: 0 !important; color: #627487; font-family: var(--font-interface); font-size: 1.45rem; line-height: 1; }
.feed-bell-work-edit { width: 62px; min-width: 62px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--color-gray-200); background: var(--color-gray-050); color: var(--course-dark); font-family: var(--font-interface); font-size: .66rem; font-weight: 600; text-decoration: none; }
.feed-bell-work-edit:hover { background: color-mix(in srgb, var(--course-light) 45%, var(--color-white)); color: var(--course-dark); text-decoration: underline; }
.feed-bell-work-card + .feed-resource-group { margin-top: 8px; }
.feed-resource-group .attachment-card { border-left: var(--accent-edge-width-small) solid var(--course-dark); border-radius: 0 var(--radius-medium) var(--radius-medium) 0; background: var(--color-white); box-shadow: 0 3px 11px rgba(24, 39, 55, .08); }
.feed-resource-group .attachment-card:hover { border-color: color-mix(in srgb, var(--course-dark) 28%, var(--color-gray-300)); border-left-color: var(--course-dark); background: color-mix(in srgb, var(--course-light) 18%, var(--color-white)); box-shadow: 0 7px 18px rgba(24, 39, 55, .11); }
@media (max-width: 700px) { .feed-bell-work-main { grid-template-columns: 40px minmax(0, 1fr) auto; padding: 10px; gap: 9px; } .feed-bell-work-icon { width: 40px; height: 40px; } .feed-bell-work-edit { width: 54px; min-width: 54px; } }
@media (max-width: 480px) { .feed-bell-work-title { white-space: normal; } .feed-bell-work-kicker { gap: 6px; } .feed-bell-work-edit { width: 48px; min-width: 48px; font-size: .62rem; } }

/* =========================================================
   Bell Work weekly navigation
   ========================================================= */
.bell-work-week-nav { min-height: 39px; padding: 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; border-bottom: 1px solid var(--color-gray-200); background: #fbfcfd; }
.bell-work-week-nav-link { min-width: 0; display: inline-flex; align-items: center; gap: 4px; color: var(--course-dark); font-family: var(--font-interface); font-size: .62rem; font-weight: 600; text-decoration: none; }
.bell-work-week-nav-link:hover { color: var(--course-accent); }
.bell-work-week-nav-previous { justify-self: start; }
.bell-work-week-nav-next { justify-self: end; }
.bell-work-week-nav-chevron { color: var(--course-accent); font-size: 1.05rem; font-weight: 500; line-height: 1; transform: translateY(-1px); }
.bell-work-week-range { color: var(--course-dark); font-family: var(--font-interface); font-size: .64rem; font-weight: 700; letter-spacing: .035em; line-height: 1; text-align: center; white-space: nowrap; }
.widget-bell-work-week .bell-work-week { padding-top: 11px; padding-bottom: 12px; }

@media (max-width: 390px)
{
    .bell-work-week-nav { padding: 0 10px; gap: 6px; }
    .bell-work-week-nav-link { font-size: .58rem; }
    .bell-work-week-range { font-size: .59rem; }
}

/* =========================================================
   V23.6 DESKTOP CLASS SWITCHER
   The current classroom name in the application header doubles
   as a fast teacher/admin class switcher. Each destination keeps
   its own course color so the list remains easy to scan.
   ========================================================= */
.header-course-menu { position: relative; width: min(100%, 420px); min-width: 0; }
.header-course-menu > summary { list-style: none; }
.header-course-menu > summary::-webkit-details-marker { display: none; }
.header-course-switcher-summary { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: -8px -10px; border: 1px solid var(--course-dark); border-radius: 8px; background: var(--color-white); cursor: pointer; transition: background .14s ease, border-color .14s ease; }
.header-course-switcher-summary:hover { background: var(--course-light); }
.header-course-menu[open] > .header-course-switcher-summary { background: var(--course-light); }
.header-course-switcher-summary:focus-visible { outline: 2px solid var(--course-accent); outline-offset: 2px; }
.header-course-switcher-summary .header-course-text { flex: 1; }
.header-course-switcher-chevron { flex: 0 0 auto; width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid var(--course-dark); border-bottom: 2px solid var(--course-dark); transform: rotate(45deg) translateY(-2px); transform-origin: center; transition: transform .16s ease; }
.header-course-menu[open] > summary .header-course-switcher-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.header-course-menu-panel { position: absolute; top: calc(100% + 14px); left: -10px; z-index: 70; width: min(360px, calc(100vw - 40px)); padding: 8px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-large); background: var(--color-white); box-shadow: 0 16px 40px rgba(20, 38, 60, .20); }
.header-course-menu-heading { padding: 7px 8px 9px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.header-course-menu-heading span:last-child { min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--color-gray-100); color: var(--color-gray-600); font-size: .62rem; letter-spacing: 0; }
.header-course-menu-list { max-height: min(430px, calc(100vh - 180px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.header-course-menu-year { padding: 9px 8px 5px; color: var(--color-gray-500); font-family: var(--font-reading); font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.header-course-menu-item { margin: 3px 0; min-height: 54px; padding: 8px 10px 8px 12px; display: flex; align-items: center; gap: 12px; border-left: 4px solid var(--switch-course-dark); border-radius: 0 8px 8px 0; background: transparent; color: var(--color-gray-700); text-decoration: none; transition: background .14s ease, box-shadow .14s ease; }
.header-course-menu-item:hover { background: var(--switch-course-light); }
.header-course-menu-item.is-current { background: var(--switch-course-light); box-shadow: inset 0 0 0 1px rgba(20, 38, 60, .06); }
.header-course-menu-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.header-course-menu-copy strong { overflow: hidden; color: var(--switch-course-dark); font-family: var(--font-interface); font-size: .82rem; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.header-course-menu-copy span { overflow: hidden; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .68rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.header-course-menu-current { flex: 0 0 auto; padding: 4px 7px; border-radius: 10px; background: var(--switch-course-dark); color: var(--color-white); font-family: var(--font-interface); font-size: .57rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.header-course-menu-all { margin-top: 7px; padding: 10px 9px 7px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--color-gray-200); color: var(--course-dark); font-family: var(--font-interface); font-size: .75rem; font-weight: 650; text-decoration: none; }
.header-course-menu-all:hover { color: var(--course-accent); }
.header-course-menu-all .ui-icon { width: 17px; height: 17px; flex-basis: 17px; }
@media (max-width: 850px) { .header-course-menu-panel { display: none; } }


/* =========================================================
   V23.24 - MOBILE CLASS SWITCHER

   The desktop course switcher moves to its own compact row on
   tablet/phone widths. This preserves the logo and account menu
   while keeping class changes available everywhere in a course.
   ========================================================= */

.header-course-switcher-label { display: none; }

@media (max-width: 850px)
{
    .app-header-inner.has-course-switcher { height: auto; min-height: 70px; padding-top: 7px; padding-bottom: 9px; flex-wrap: wrap; row-gap: 6px; }
    .app-header-inner.has-course-switcher .header-course { order: 3; flex: 0 0 100%; width: 100%; display: flex; padding-left: 0; border-left: 0; }
    .app-header-inner.has-course-switcher .header-course-menu { width: 100%; max-width: none; }
    .app-header-inner.has-course-switcher .header-course-switcher-summary { width: 100%; min-height: 42px; margin: 0; padding: 7px 11px 7px 12px; gap: 9px; border: 1px solid var(--course-dark); border-radius: 7px; background: var(--color-white); }
    .app-header-inner.has-course-switcher .header-course-switcher-summary .header-course-text { min-width: 0; flex-direction: row; align-items: center; gap: 8px; }
    .app-header-inner.has-course-switcher .header-course-name { min-width: 0; overflow: hidden; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
    .app-header-inner.has-course-switcher .header-course-section { flex: 0 0 auto; margin-top: 0; padding-left: 8px; border-left: 1px solid var(--color-gray-300); font-size: .64rem; white-space: nowrap; }
    .app-header-inner.has-course-switcher .header-course-switcher-label { display: inline-block; flex: 0 0 auto; color: var(--course-dark); font-family: var(--font-interface); font-size: .64rem; font-weight: 650; letter-spacing: .03em; }
    .app-header-inner.has-course-switcher .header-course-switcher-chevron { margin-right: 1px; }
    .app-header-inner.has-course-switcher .header-course-menu-panel { display: block; top: calc(100% + 7px); left: 0; right: auto; width: 100%; max-width: none; padding: 8px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-large); background: var(--color-white); box-shadow: 0 16px 40px rgba(20, 38, 60, .20); }
    .app-header-inner.has-course-switcher .header-course-menu-list { max-height: min(420px, calc(100vh - 190px)); }
}

@media (max-width: 520px)
{
    .app-header-inner.has-course-switcher { height: auto; padding-top: 6px; padding-bottom: 8px; }
    .app-header-inner.has-course-switcher .header-course-switcher-summary { min-height: 40px; padding-left: 10px; padding-right: 10px; }
    .app-header-inner.has-course-switcher .header-course-name { font-size: .82rem; }
    .app-header-inner.has-course-switcher .header-course-section { font-size: .61rem; }
    .app-header-inner.has-course-switcher .header-course-switcher-label { font-size: .61rem; }
    .app-header-inner.has-course-switcher .header-course-menu-panel { width: 100%; }
}

/* =========================================================
   V23.26 - COURSE LINK DRAG REORDERING
   Course link ordering is managed visually; sort_order remains
   an implementation detail and is updated automatically.
   ========================================================= */
.course-link-order-status { flex: 0 0 auto; align-self: center; padding: 5px 9px; border: 1px solid var(--color-gray-300); border-radius: 999px; background: var(--color-white); color: var(--color-gray-500); font-family: var(--font-interface); font-size: .62rem; font-weight: 650; letter-spacing: .02em; white-space: nowrap; transition: color .15s ease, border-color .15s ease, background .15s ease; }
.course-link-order-status[data-state="saving"] { color: var(--color-gray-600); }
.course-link-order-status[data-state="saved"] { border-color: var(--course-dark); background: var(--course-light); color: var(--course-dark); }
.course-link-order-status[data-state="error"] { border-color: var(--color-red-dark); color: var(--color-red-dark); }
.course-link-sortable-row { position: relative; transition: background .12s ease, box-shadow .12s ease; }
.course-link-sortable-row.is-dragging { z-index: 2; background: var(--course-light); box-shadow: inset 4px 0 0 var(--course-accent); }
.course-link-drag-handle { width: 34px; height: 42px; flex: 0 0 34px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--course-dark); font-family: var(--font-interface); font-size: 1.3rem; line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .12s ease, color .12s ease; }
.course-link-drag-handle:hover, .course-link-drag-handle:focus-visible { background: var(--course-light); color: var(--course-dark); outline: none; }
.course-link-drag-handle:focus-visible { box-shadow: 0 0 0 2px var(--course-accent); }
.course-link-sortable-row.is-dragging .course-link-drag-handle { cursor: grabbing; }
.course-link-sortable-list.is-reordering { user-select: none; -webkit-user-select: none; }
@media (max-width: 640px) { .course-link-order-status { align-self: flex-start; } .course-link-sortable-row { gap: 10px; } .course-link-sortable-row .setup-management-main { min-width: calc(100% - 48px); } .course-link-sortable-row .setup-management-actions { padding-left: 44px; } }


/* =========================================================
   V23.20 - MOBILE ADMINISTRATION NAVIGATION

   Desktop keeps the full administration tab row. Phones use a
   single current-section control that opens the same destinations
   as a stacked menu, eliminating the horizontal nav scrollbar.
   ========================================================= */

.admin-nav-desktop
{
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.admin-mobile-menu
{
    display: none;
}

@media (max-width: 760px)
{
    .admin-nav
    {
        position: relative;
        z-index: 35;
        overflow: visible;
    }

    .admin-nav-inner
    {
        width: calc(100% - 16px);
        min-height: 0;
        padding: 8px 0;
        display: block;
        overflow: visible;
    }

    .admin-nav-desktop
    {
        display: none;
    }

    .admin-mobile-menu
    {
        position: relative;
        display: block;
        width: 100%;
        font-family: var(--font-interface);
    }

    .admin-mobile-menu > summary
    {
        min-height: 46px;
        padding: 0 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        list-style: none;
        border: 1px solid var(--color-gray-300);
        border-radius: var(--radius-medium);
        background: var(--color-white);
        box-shadow: var(--shadow-control);
        color: var(--color-blue-dark);
        cursor: pointer;
        user-select: none;
    }

    .admin-mobile-menu > summary::-webkit-details-marker
    {
        display: none;
    }

    .admin-mobile-menu > summary:hover
    {
        border-color: var(--color-blue-dark);
        background: var(--color-gray-050);
    }

    .admin-mobile-menu > summary:focus-visible
    {
        outline: 3px solid rgba( 20, 61, 111, .18 );
        outline-offset: 2px;
    }

    .admin-mobile-menu-current,
    .admin-mobile-menu-action
    {
        display: inline-flex;
        align-items: center;
    }

    .admin-mobile-menu-current
    {
        min-width: 0;
        gap: 10px;
        font-size: .84rem;
        font-weight: 700;
    }

    .admin-mobile-menu-current .ui-icon
    {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .admin-mobile-menu-action
    {
        flex: 0 0 auto;
        gap: 9px;
        color: var(--color-gray-600);
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
    }

    .admin-mobile-menu-chevron
    {
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg) translateY(-2px);
        transform-origin: center;
        transition: transform .16s ease;
    }

    .admin-mobile-menu[open] .admin-mobile-menu-chevron
    {
        transform: rotate(225deg) translate(-1px, -1px);
    }

    .admin-mobile-menu-panel
    {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        right: 0;
        z-index: 60;
        padding: 6px;
        border: 1px solid var(--color-gray-300);
        border-radius: var(--radius-medium);
        background: var(--color-white);
        box-shadow: var(--shadow-card);
    }

    .admin-mobile-menu-panel a
    {
        min-height: 44px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 11px;
        border-left: 3px solid transparent;
        border-radius: 7px;
        color: var(--color-gray-700);
        font-size: .82rem;
        font-weight: 600;
        white-space: normal;
    }

    .admin-mobile-menu-panel a:hover
    {
        background: var(--color-gray-050);
        color: var(--color-blue-dark);
    }

    .admin-mobile-menu-panel a.active
    {
        border-left-color: var(--color-red);
        border-radius: 0 7px 7px 0;
        background: var(--color-gray-050);
        color: var(--color-blue-dark);
        font-weight: 700;
    }

    .admin-mobile-menu-panel a.active::after
    {
        display: none;
    }

    .admin-mobile-menu-panel .ui-icon
    {
        width: 19px;
        height: 19px;
        flex-basis: 19px;
    }
}


/* =========================================================
   LOGIN PAGE — SINGLE-PANEL LANDING
   ========================================================= */
.auth-login-page
{
	background: linear-gradient( 135deg, rgba(23, 63, 119, .09), rgba(23, 63, 119, .025) ), var(--color-page);
}

.auth-login-shell
{
	width: min(500px, calc(100% - 32px));
	grid-template-columns: minmax(0, 1fr);
	justify-content: center;
	gap: 0;
}

.auth-login-card
{
	width: 100%;
	padding: 38px 40px 40px;
	border-top-color: var(--color-blue);
}

.auth-login-logo
{
	display: flex;
	justify-content: center;
	margin: 0 0 30px;
}

.auth-login-logo img
{
	width: auto;
	height: 74px;
	max-width: 100%;
	object-fit: contain;
	object-position: center;
}

.auth-login-card h1
{
	margin: 0 0 24px;
	font-size: 2rem;
	text-align: center;
}

.auth-login-card .auth-message
{
	margin-bottom: 20px;
}

@media (max-width: 640px)
{
	.auth-login-shell
	{
		width: min(100% - 24px, 500px);
		padding: 28px 0;
	}

	.auth-login-card
	{
		padding: 30px 24px 28px;
	}

	.auth-login-logo
	{
		margin-bottom: 24px;
	}

	.auth-login-logo img
	{
		height: 64px;
	}

	.auth-login-card h1
	{
		margin-bottom: 22px;
		font-size: 1.8rem;
	}
}


/* =========================================================
   MOBILE CLASS TOOLS
   On narrow course pages the desktop sidebar becomes a compact
   tool chooser immediately before the daily feed.
   ========================================================= */
.class-tools-mobile { display: none; }
.class-tools-panels { display: grid; gap: 16px; }
.class-tool-panel { min-width: 0; }
.mobile-class-tools-slot { display: none; }
@media (max-width: 900px)
{
    .class-tools-js .mobile-class-tools-slot { display: block; margin: 0 0 18px; }
    .class-tools-js .class-tools-container.is-mobile-class-tools { display: block; width: 100%; margin: 0; }
    .class-tools-js .class-tools-container.is-mobile-class-tools .class-tools-mobile { display: block; overflow: hidden; background: var(--color-white); border: 1px solid var(--color-gray-300); border-top: 4px solid var(--course-dark); border-radius: 0 0 var(--radius-large) var(--radius-large); box-shadow: var(--shadow-card); }
    .class-tools-js .class-tools-toggle { width: 100%; min-height: 58px; padding: 11px 14px; display: flex; align-items: center; gap: 11px; border: 0; background: var(--color-white); color: var(--course-dark); text-align: left; cursor: pointer; }
    .class-tools-js .class-tools-toggle:hover { background: var(--course-light); }
    .class-tools-js .class-tools-toggle-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; color: var(--course-dark); }
    .class-tools-js .class-tools-toggle-icon .ui-icon { width: 22px; height: 22px; }
    .class-tools-js .class-tools-toggle-copy { min-width: 0; flex: 1; display: grid; gap: 2px; }
    .class-tools-js .class-tools-toggle-copy strong { font-family: var(--font-interface); font-size: .92rem; font-weight: 600; }
    .class-tools-js .class-tools-toggle-copy small { color: var(--color-gray-500); font-family: var(--font-interface); font-size: .7rem; font-weight: 500; }
    .class-tools-js .class-tools-toggle-chevron { width: 9px; height: 9px; margin-right: 3px; flex: 0 0 9px; border-right: 2px solid var(--course-dark); border-bottom: 2px solid var(--course-dark); transform: rotate(225deg); transform-origin: center; transition: transform .16s ease; }
    .class-tools-js .class-tools-container.is-collapsed .class-tools-toggle-chevron { transform: rotate(45deg); }
    .class-tools-js .class-tools-menu { padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--color-gray-200); background: var(--color-gray-050); }
    .class-tools-js .class-tools-menu[hidden] { display: none !important; }
    .class-tools-js .class-tool-choice { min-width: 0; min-height: 50px; padding: 9px 10px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 12px; gap: 8px; align-items: center; border: 1px solid var(--color-gray-300); border-left: 4px solid var(--course-dark); border-radius: 0 var(--radius-medium) var(--radius-medium) 0; background: var(--color-white); color: var(--course-dark); font-family: var(--font-interface); font-size: .76rem; font-weight: 600; text-align: left; cursor: pointer; box-shadow: var(--shadow-control); }
    .class-tools-js .class-tool-choice:hover, .class-tools-js .class-tool-choice.is-active { background: var(--course-light); border-color: var(--course-dark); }
    .class-tools-js .class-tool-choice .ui-icon { width: 20px; height: 20px; }
    .class-tools-js .class-tool-choice > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .class-tools-js .class-tool-choice-chevron { justify-self: end; font-size: 1.2rem; line-height: 1; }
    .class-tools-js .class-tool-choice.is-active .class-tool-choice-chevron { transform: rotate(90deg); }
    .class-tools-js .class-tools-panels { display: block; margin-top: 12px; }
    .class-tools-js .class-tool-panel[hidden] { display: none !important; }
    .class-tools-js .class-tool-panel .widget { margin: 0; }
    .class-tools-js .class-tool-panel .widget-title-row, .class-tools-js .class-tool-panel > .widget > .widget-title { border-top-left-radius: 0; border-top-right-radius: 0; }
}
@media (max-width: 390px)
{
    .class-tools-js .class-tools-menu { grid-template-columns: 1fr; }
}


/* Bell Work week navigation swaps only the widget instead of reloading the course page. */
.widget-bell-work-week
{
    transition: opacity .15s ease;
}

.widget-bell-work-week.is-loading
{
    opacity: .58;
    pointer-events: none;
}

/* People roster chevron: fixed target + optically centered drawn icon. */
.person-row-main { grid-template-columns: 48px minmax(0, 1fr) 34px; }
.person-row-arrow { width: 34px; height: 34px; box-sizing: border-box; display: inline-grid; place-items: center; align-self: center; justify-self: center; flex: 0 0 34px; border-radius: 50%; color: var(--course-dark); font-size: 0; line-height: 0; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.person-row-arrow::before { content: ''; width: 12px; height: 18px; display: block; background: currentColor; -webkit-mask: url('../icons/chevron-right.svg') center / contain no-repeat; mask: url('../icons/chevron-right.svg') center / contain no-repeat; transform: translateX(1px); }
.person-row-main:hover .person-row-arrow, .person-row-main:focus-visible .person-row-arrow { background: var(--course-light); }
@media (max-width: 520px) { .person-row-main { grid-template-columns: 40px minmax(0, 1fr) 34px; } }


/* =========================================================
   PUBLIC LANDING + TEACHER DIRECTORY
   ========================================================= */

.landing-entry-page
{
    min-height: 100vh;
    background: var(--color-gray-050);
}

.landing-entry-shell
{
    width: min(560px, calc(100% - 32px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 40px 0;
    display: grid;
    place-items: center;
}

.landing-entry-card
{
    width: 100%;
    padding: 42px 44px 36px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-top: var(--accent-edge-width) solid var(--color-blue);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 46px rgba(24, 39, 55, .17);
}

.landing-entry-logo
{
    width: min(300px, 78%);
    margin: 0 auto 34px;
    display: block;
}

.landing-entry-logo img
{
    width: 100%;
    height: auto;
    display: block;
}

.landing-entry-actions
{
    display: grid;
    gap: 16px;
}

.landing-entry-action
{
    min-height: 88px;
    padding: 16px 20px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 16px;
    align-items: center;
    border: 1px solid var(--color-blue);
    border-radius: var(--radius-large);
    text-decoration: none;
    box-shadow: var(--shadow-control);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.landing-entry-action:hover
{
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

.landing-entry-action-primary
{
    background: var(--color-blue);
    color: var(--color-white);
}

.landing-entry-action-primary:hover
{
    background: var(--color-blue-dark);
    border-color: var(--color-blue-dark);
}

.landing-entry-action-secondary
{
    background: var(--color-white);
    color: var(--color-blue);
}

.landing-entry-action-secondary:hover
{
    background: var(--color-blue-light);
}

.landing-entry-action-icon
{
    display: grid;
    place-items: center;
}

.landing-entry-action-icon .ui-icon
{
    width: 31px;
    height: 31px;
}

.landing-entry-action-copy
{
    min-width: 0;
    display: grid;
    gap: 3px;
}

.landing-entry-action-copy strong
{
    font-family: var(--font-interface);
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.15;
}

.landing-entry-action-copy small
{
    color: inherit;
    font-family: var(--font-reading);
    font-size: .82rem;
    line-height: 1.35;
    opacity: .82;
}

.landing-entry-action-chevron,
.public-teacher-class-chevron
{
    width: 11px;
    height: 11px;
    justify-self: end;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.landing-entry-note
{
    max-width: 390px;
    margin: 28px auto 0;
    padding-top: 24px;
    border-top: 1px solid var(--color-gray-300);
    color: var(--color-gray-600);
    font-size: .82rem;
    line-height: 1.55;
    text-align: center;
}

.public-directory-page
{
    min-height: 100vh;
    background: var(--color-white);
}

.public-directory-shell
{
    width: min(900px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px 0 60px;
}

.public-directory-heading
{
    margin-bottom: 26px;
    display: flex;
    gap: 28px;
    align-items: center;
}

.public-directory-logo
{
    width: 190px;
    flex: 0 0 190px;
}

.public-directory-logo img
{
    width: 100%;
    height: auto;
    display: block;
}

.public-directory-heading h1
{
    margin: 4px 0 5px;
}

.public-directory-heading p
{
    margin: 0;
    color: var(--color-gray-600);
}

.public-teacher-directory
{
    display: grid;
    gap: 18px;
}

.public-teacher-card
{
    overflow: hidden;
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-top: var(--accent-edge-width) solid var(--color-blue);
    border-radius: 0 0 var(--radius-large) var(--radius-large);
    box-shadow: var(--shadow-card);
}

.public-teacher-card-heading
{
    min-height: 88px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 18px;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s ease;
}

.public-teacher-card-heading::-webkit-details-marker
{
    display: none;
}

.public-teacher-card-heading:hover
{
    background: var(--color-gray-050);
}

.public-teacher-card[open] .public-teacher-card-heading
{
    border-bottom: 1px solid var(--color-gray-200);
}

.public-teacher-avatar
{
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid var(--color-blue);
    border-radius: 50%;
    background: var(--color-blue-light);
    color: var(--color-blue);
    font-family: var(--font-interface);
    font-size: 1rem;
    font-weight: 600;
}

.public-teacher-avatar img
{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.public-teacher-card-copy
{
    min-width: 0;
    display: grid;
    gap: 4px;
}

.public-teacher-card-copy strong
{
    color: var(--color-blue-dark);
    font-family: var(--font-interface);
    font-size: 1.08rem;
    font-weight: 600;
}

.public-teacher-card-copy small
{
    color: var(--color-gray-500);
    font-size: .76rem;
}

.public-teacher-toggle-chevron
{
    width: 10px;
    height: 10px;
    justify-self: center;
    border-right: 2px solid var(--color-blue);
    border-bottom: 2px solid var(--color-blue);
    transform: rotate(45deg);
    transition: transform .16s ease;
}

.public-teacher-card[open] .public-teacher-toggle-chevron
{
    transform: rotate(225deg);
}

.public-teacher-class-list
{
    display: grid;
}

.public-teacher-class-link
{
    min-height: 66px;
    padding: 13px 18px 13px 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18px;
    gap: 16px;
    align-items: center;
    border-left: 4px solid var(--public-course-accent, var(--color-blue));
    border-bottom: 1px solid var(--color-gray-200);
    border-radius: 0;
    color: var(--color-blue-dark);
    text-decoration: none;
    transition: background .15s ease;
}

.public-teacher-class-link:last-child
{
    border-bottom: 0;
}

.public-teacher-class-link:hover
{
    background: var(--color-gray-050);
}

.public-teacher-class-copy
{
    display: grid;
    gap: 3px;
}

.public-teacher-class-copy strong
{
    font-family: var(--font-interface);
    font-size: .92rem;
}

.public-teacher-class-copy small
{
    color: var(--color-gray-500);
    font-size: .76rem;
}

.public-teacher-class-chevron
{
    color: var(--public-course-accent, var(--color-blue));
}

@media (max-width: 640px)
{
    .landing-entry-shell
    {
        width: min(100% - 20px, 520px);
        padding: 18px 0;
    }

    .landing-entry-card
    {
        padding: 32px 20px 28px;
    }

    .landing-entry-logo
    {
        width: min(250px, 82%);
        margin-bottom: 28px;
    }

    .landing-entry-action
    {
        min-height: 78px;
        padding: 14px 16px;
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        gap: 12px;
    }

    .landing-entry-action-icon .ui-icon
    {
        width: 27px;
        height: 27px;
    }

    .landing-entry-action-copy strong
    {
        font-size: 1rem;
    }

    .public-directory-shell
    {
        width: min(100% - 20px, 900px);
        padding-top: 24px;
    }

    .public-directory-heading
    {
        display: grid;
        gap: 18px;
    }

    .public-directory-logo
    {
        width: 150px;
    }

    .public-teacher-card-heading
    {
        min-height: 82px;
        padding: 12px 14px;
        grid-template-columns: 58px minmax(0, 1fr) 16px;
        gap: 13px;
    }

    .public-teacher-avatar
    {
        width: 58px;
        height: 58px;
    }
}

/* =========================================================
   MY CALENDAR
   ========================================================= */

.my-calendar-shell { width: min(var(--page-width), calc(100% - 40px)); margin: 30px auto 76px; }
.my-calendar-heading { align-items: center; }
.my-calendar-filter-panel { margin-bottom: 16px; padding: 14px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-large); background: var(--color-white); box-shadow: var(--shadow-card); }
.my-calendar-filter-heading { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--color-gray-600); font-family: var(--font-interface); font-size: .7rem; }
.my-calendar-filter-heading strong { color: var(--course-dark); font-size: .76rem; }
.my-calendar-filter-list { display: flex; gap: 8px; flex-wrap: wrap; }
.my-calendar-filter-chip { min-height: 44px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-gray-300); border-radius: 9px; background: var(--color-white); color: var(--color-gray-700); text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.my-calendar-filter-chip:hover { border-color: var(--course-dark); background: color-mix(in srgb, var(--course-light) 28%, white); transform: translateY(-1px); }
.my-calendar-filter-chip.is-active { border-color: var(--course-dark); box-shadow: inset 0 0 0 1px var(--course-dark); background: color-mix(in srgb, var(--course-light) 48%, white); }
.my-calendar-filter-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--course-accent); }
.my-calendar-filter-code { min-width: 38px; height: 26px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--course-dark); color: var(--color-white); font-family: var(--font-interface); font-size: .58rem; font-weight: 700; letter-spacing: .03em; }
.my-calendar-filter-copy { min-width: 0; display: grid; gap: 1px; }
.my-calendar-filter-copy strong { max-width: 150px; overflow: hidden; font-family: var(--font-interface); font-size: .68rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.my-calendar-filter-copy small { color: var(--color-gray-500); font-size: .58rem; }
.my-calendar-toolbar { border-bottom: 0; }
.my-calendar-month-view .calendar-day { min-height: 178px; }
.my-calendar-day-count { min-width: 21px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--color-gray-100); color: var(--color-gray-500); font-family: var(--font-interface); font-size: .52rem; font-weight: 650; }
.my-calendar-entry { padding: 5px 6px; border-left-width: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.my-calendar-entry-topline { margin-bottom: 2px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.my-calendar-entry .calendar-entry-type { margin: 0; flex: 0 0 auto; font-size: .48rem; }
.my-calendar-course-code { min-width: 30px; max-width: 54px; height: 16px; padding: 0 4px; display: inline-grid; place-items: center; overflow: hidden; border-radius: 4px; background: var(--course-dark); color: var(--color-white); font-family: var(--font-interface); font-size: .44rem; font-weight: 700; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; }
.my-calendar-entry strong { font-size: .6rem; }
.my-calendar-entry-no-class { border: 1px solid var(--color-gray-300); border-left: 4px solid var(--color-gray-500); border-top-left-radius: 0; border-bottom-left-radius: 0; background: var(--color-gray-050); }
.my-calendar-more-link { padding: 4px 5px; display: inline-flex; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .54rem; font-weight: 650; text-decoration: none; }
.my-calendar-more-link:hover { color: var(--course-dark); }
.my-calendar-selected-day { margin-bottom: 18px; }
.my-calendar-selected-class { display: grid; gap: 10px; }
.my-calendar-selected-class + .my-calendar-selected-class { padding-top: 18px; border-top: 1px solid var(--color-gray-200); }
.my-calendar-selected-class-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.my-calendar-selected-code { min-width: 46px; height: 34px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 7px; background: var(--course-dark); color: var(--color-white); font-family: var(--font-interface); font-size: .6rem; font-weight: 700; letter-spacing: .04em; }
.my-calendar-selected-class-heading h3 { margin: 0; color: var(--course-dark); font-size: .86rem; }
.my-calendar-selected-class-heading div > span { display: block; margin-top: 2px; color: var(--color-gray-500); font-size: .68rem; }
.my-calendar-selected-class-heading > a { color: var(--course-accent); font-family: var(--font-interface); font-size: .68rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.my-calendar-selected-item { border-left: 5px solid var(--course-accent); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.my-calendar-selected-item-post { border-left-color: var(--course-dark); background: color-mix(in srgb, var(--course-light) 28%, white); }
.my-calendar-selected-item-bell_work { border-left-color: var(--course-accent); }
.my-calendar-selected-item-no_class { border-left-color: var(--color-gray-500); background: var(--color-gray-050); }
.my-calendar-agenda-item { display: block; border: 1px solid color-mix(in srgb, var(--course-dark) 20%, var(--color-gray-300)); border-left: 5px solid var(--course-accent); border-top-left-radius: 0; border-bottom-left-radius: 0; background: color-mix(in srgb, var(--course-light) 38%, white); text-decoration: none; }
.my-calendar-agenda-item:hover { border-color: var(--course-dark); }
.my-calendar-agenda-view .calendar-agenda-weekday a { color: inherit; text-decoration: none; }
.my-calendar-empty-state { margin-top: 20px; }

@media (max-width: 760px) { .my-calendar-shell { width: calc(100% - 22px); margin-top: 18px; } .my-calendar-heading { align-items: flex-start; } .my-calendar-heading .secondary-button { width: 100%; } .my-calendar-filter-panel { padding: 11px; } .my-calendar-filter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .my-calendar-filter-chip { width: 100%; } .my-calendar-selected-class-heading { grid-template-columns: auto minmax(0, 1fr); } .my-calendar-selected-class-heading > a { grid-column: 1 / -1; padding-left: 57px; white-space: normal; } }
@media (max-width: 520px) { .my-calendar-filter-list { grid-template-columns: 1fr; } .my-calendar-filter-copy strong { max-width: none; } }


/* =========================================================
   ANNOUNCEMENT EDITOR + MANAGEMENT POLISH
   ========================================================= */
.announcement-editor { padding: 24px; display: grid; gap: 22px; }
.announcement-editor .editor-card-heading { margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--color-gray-200); }
.announcement-editor .form-grid { gap: 20px; }
.announcement-editor .form-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.announcement-editor > .form-field, .announcement-editor .form-field + .form-field, .announcement-editor > .form-grid + .form-field, .announcement-editor > .form-field + .form-grid, .announcement-editor > .form-grid + .form-grid { margin-top: 0; }
.announcement-editor .form-field label { margin-bottom: 8px; display: flex; align-items: baseline; gap: 3px; }
.announcement-editor .optional-label { margin-left: 0; }
.announcement-editor .form-control { min-height: 46px; }
.announcement-editor textarea.form-control { min-height: 156px; line-height: 1.55; resize: vertical; }
.announcement-editor .choice-row { min-height: 46px; }
.announcement-editor .choice-pill span { min-height: 42px; padding-left: 14px; padding-right: 14px; }
.announcement-editor .editor-actions { margin-top: 2px; padding-top: 20px; border-top: 1px solid var(--color-gray-200); }
.announcement-management-footer { margin-top: 22px; padding-top: 20px; display: flex; align-items: center; border-top: 1px solid var(--color-gray-200); }
.announcement-management-footer .secondary-button { min-width: 168px; }
@media (max-width: 700px) { .announcement-editor { padding: 18px 16px; gap: 18px; } .announcement-editor .form-grid-two { grid-template-columns: 1fr; } .announcement-editor .editor-actions { margin-top: 0; padding-top: 18px; } .announcement-management-footer .secondary-button { width: 100%; min-width: 0; } }

/* =========================================================
   ANNOUNCEMENT ORDERING
   ========================================================= */
.widget-announcements .announcement-item:first-child { padding-top: 10px; }
.announcement-order-heading { margin: 4px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--color-gray-500); font-family: var(--font-interface); font-size: .7rem; }
.announcement-order-status { flex: 0 0 auto; font-weight: 600; color: var(--color-gray-500); }
.announcement-order-status[data-state="saving"] { color: var(--course-dark); }
.announcement-order-status[data-state="saved"] { color: var(--course-accent); }
.announcement-order-status[data-state="error"] { color: var(--color-red); }
.announcement-sortable-list { margin-top: 8px; }
.announcement-sortable-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 14px; transition: background .12s ease, box-shadow .12s ease, transform .12s ease; }
.announcement-sortable-item.is-dragging { z-index: 2; background: var(--course-light); box-shadow: var(--shadow-card); }
.announcement-management-main { min-width: 0; }
.announcement-drag-handle { width: 34px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: transparent; color: var(--color-gray-500); font-family: var(--font-interface); font-size: 1.2rem; line-height: 1; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }
.announcement-drag-handle:hover, .announcement-drag-handle:focus-visible { background: var(--course-light); color: var(--course-dark); outline: none; }
.announcement-drag-handle:focus-visible { box-shadow: 0 0 0 2px var(--course-accent); }
.announcement-sortable-item.is-dragging .announcement-drag-handle { cursor: grabbing; }
.announcement-sortable-list.is-reordering { user-select: none; -webkit-user-select: none; }
@media (max-width: 700px) { .announcement-order-heading { align-items: flex-start; flex-direction: column; gap: 5px; } .announcement-sortable-item { grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 10px 12px; } .announcement-sortable-item .secondary-button { grid-column: 2; width: 100%; } .announcement-drag-handle { margin-top: 1px; } }

/* Announcement management actions */
.announcement-management-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.announcement-management-actions form { margin: 0; }
.announcement-management-actions .secondary-button, .announcement-delete-button { min-width: 62px; min-height: 40px; }
.announcement-delete-button { display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid var(--course-dark); border-radius: 7px; background: var(--course-dark); color: var(--color-white); font-family: var(--font-interface); font-size: .82rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter .12s ease, transform .12s ease; }
.announcement-delete-button:hover { filter: brightness(.9); }
.announcement-delete-button:active { transform: translateY(1px); }
.announcement-delete-button:focus-visible { outline: 2px solid var(--course-accent); outline-offset: 2px; }
@media (max-width: 700px) { .announcement-sortable-item .announcement-management-actions { grid-column: 2; width: 100%; } .announcement-management-actions > * { flex: 1 1 0; } .announcement-management-actions .secondary-button, .announcement-management-actions form, .announcement-delete-button { width: 100%; } }

/* =========================================================
   MY CALENDAR — PERSONAL DISPLAY PREFERENCES
   ========================================================= */
.my-calendar-preferences-panel { margin: 0 0 16px; border: 1px solid var(--color-gray-300); border-radius: var(--radius-large); background: var(--color-white); box-shadow: var(--shadow-control); }
.my-calendar-preferences-panel > summary { min-height: 54px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; font-family: var(--font-interface); }
.my-calendar-preferences-panel > summary::-webkit-details-marker { display: none; }
.my-calendar-preferences-panel > summary:hover { background: var(--color-gray-050); }
.my-calendar-preferences-panel[open] > summary { border-bottom: 1px solid var(--color-gray-200); }
.my-calendar-preferences-summary-copy { min-width: 0; display: grid; gap: 2px; }
.my-calendar-preferences-summary-copy strong { color: var(--course-dark); font-size: .77rem; }
.my-calendar-preferences-summary-copy small { overflow: hidden; color: var(--color-gray-500); font-size: .64rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.my-calendar-preferences-summary-action { flex: 0 0 auto; color: var(--course-accent); font-size: .7rem; font-weight: 650; }
.my-calendar-preferences-summary-action::after { content: ' ▾'; }
.my-calendar-preferences-panel[open] .my-calendar-preferences-summary-action::after { content: ' ▴'; }
.my-calendar-preferences-form { padding: 14px; display: grid; gap: 14px; }
.my-calendar-preferences-intro { display: grid; gap: 3px; }
.my-calendar-preferences-intro strong { color: var(--course-dark); font-family: var(--font-interface); font-size: .78rem; }
.my-calendar-preferences-intro span { color: var(--color-gray-500); font-size: .7rem; }
.my-calendar-preference-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.my-calendar-preference-option { min-width: 0; min-height: 62px; padding: 10px 11px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; border: 1px solid var(--color-gray-300); border-radius: 8px; background: var(--color-white); cursor: pointer; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.my-calendar-preference-option:hover { border-color: var(--course-accent); background: color-mix(in srgb, var(--course-light) 24%, white); }
.my-calendar-preference-option:has(input:checked) { border-color: var(--course-dark); background: color-mix(in srgb, var(--course-light) 38%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--course-dark) 20%, transparent); }
.my-calendar-preference-option input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--course-dark); }
.my-calendar-preference-option > span { min-width: 0; display: grid; gap: 2px; }
.my-calendar-preference-option strong { color: var(--course-dark); font-family: var(--font-interface); font-size: .72rem; }
.my-calendar-preference-option small { color: var(--color-gray-500); font-size: .61rem; line-height: 1.35; }
.my-calendar-preferences-actions { display: flex; justify-content: flex-end; padding-top: 2px; }
.my-calendar-preferences-actions .primary-button { min-width: 154px; }
@media (max-width: 900px) { .my-calendar-preference-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .my-calendar-preferences-panel > summary { align-items: flex-start; } .my-calendar-preferences-summary-copy small { white-space: normal; } .my-calendar-preference-options { grid-template-columns: 1fr; } .my-calendar-preferences-actions .primary-button { width: 100%; } }

/* =========================================================
   FEED RESOURCE ROW ALIGNMENT
   Bell Work, attached files, and compact links use the same icon rail,
   content inset, and action rail so every resource aligns as one system.
   ========================================================= */
.feed-bell-work-main, .feed-resource-group .attachment-card, .feed-link-card-compact { --feed-resource-icon-column: 62px; --feed-resource-action-column: 44px; --feed-resource-content-x: 16px; }
.feed-bell-work-main { min-height: 68px; padding: 0; grid-template-columns: var(--feed-resource-icon-column) minmax(0, 1fr) var(--feed-resource-action-column); align-items: stretch; gap: 0; }
.feed-bell-work-icon, .feed-resource-group .attachment-card .attachment-icon, .feed-link-card-compact .attachment-icon { width: var(--feed-resource-icon-column); min-width: var(--feed-resource-icon-column); height: 100%; min-height: 100%; margin: 0; display: grid; place-items: center; align-self: stretch; box-sizing: border-box; border-right: 1px solid var(--color-gray-200); color: var(--course-dark); line-height: 0; }
.feed-bell-work-icon .ui-icon, .feed-resource-group .attachment-card .attachment-icon svg, .feed-link-card-compact .attachment-icon svg { width: 26px; height: 26px; margin: 0; display: block; flex-basis: 26px; color: var(--course-dark); }
.feed-bell-work-copy { min-width: 0; padding: 11px var(--feed-resource-content-x); align-self: center; }
.feed-bell-work-arrow { width: var(--feed-resource-action-column); min-width: var(--feed-resource-action-column); height: 100%; margin: 0 !important; padding: 0; display: grid; place-items: center; align-self: stretch; color: #627487; font-family: var(--font-interface); font-size: 1.45rem; line-height: 1; }
.feed-resource-group .attachment-card { min-height: 82px; padding: 0; display: grid; grid-template-columns: var(--feed-resource-icon-column) minmax(0, 1fr) var(--feed-resource-action-column); align-items: stretch; gap: 0; }
.feed-resource-group .attachment-card .attachment-text { min-width: 0; padding: 12px var(--feed-resource-content-x); align-self: center; }
.feed-resource-group .attachment-card .attachment-arrow { width: var(--feed-resource-action-column); min-width: var(--feed-resource-action-column); height: 100%; margin: 0 !important; padding: 0; display: grid; place-items: center; align-self: stretch; color: #627487 !important; font-family: var(--font-interface); font-size: 1.45rem !important; line-height: 1; }
.feed-link-card-compact { min-height: 90px; grid-template-columns: var(--feed-resource-icon-column) minmax(0, 1fr) var(--feed-resource-action-column); align-items: stretch; gap: 0; }
.feed-link-card-compact .feed-link-copy { min-width: 0; padding: 12px var(--feed-resource-content-x); align-self: center; }
.feed-link-card-compact .feed-link-arrow { width: var(--feed-resource-action-column); min-width: var(--feed-resource-action-column); height: 100%; margin: 0; padding: 0; display: grid; place-items: center; align-self: stretch; color: var(--course-dark); font-family: var(--font-interface); font-size: 1.45rem; line-height: 1; }
@media (max-width: 700px) { .feed-bell-work-main, .feed-resource-group .attachment-card, .feed-link-card-compact { --feed-resource-icon-column: 54px; --feed-resource-action-column: 38px; --feed-resource-content-x: 12px; } .feed-bell-work-main { min-height: 64px; } .feed-resource-group .attachment-card { min-height: 74px; } .feed-link-card-compact { min-height: 84px; } .feed-bell-work-icon .ui-icon, .feed-resource-group .attachment-card .attachment-icon svg, .feed-link-card-compact .attachment-icon svg { width: 24px; height: 24px; flex-basis: 24px; } .feed-bell-work-arrow, .feed-link-card-compact .feed-link-arrow { font-size: 1.35rem; } }

/* =========================================================
   COURSE CALENDAR WEEK LAYOUT + POST ACCENT CONSISTENCY
   ========================================================= */

/* A five-day course calendar gives school days more usable width while
   preserving the seven-day option for courses that need weekends. */
.calendar-month-view-five-day .calendar-weekday-row,
.calendar-month-view-five-day .calendar-grid
{
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Undo the seven-column edge rule before applying the five-column edge. */
.calendar-month-view-five-day .calendar-day:nth-child(7n)
{
    border-right: 1px solid var(--color-gray-200);
}

.calendar-month-view-five-day .calendar-day:nth-child(5n)
{
    border-right: 0;
}

/* Class posts use the same directional accent language as events and Bell Work. */
.calendar-entry-post
{
    border-left: var(--accent-edge-width-small) solid var(--course-dark);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.calendar-entry-post.is-planned
{
    border-left-style: solid;
}

.calendar-agenda-post
{
    border-left: var(--accent-edge-width-small) solid var(--course-dark);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}



/* =========================================================
   PERSONAL CALENDAR WEEK LAYOUT
   Five-day / seven-day is a user preference shared by both the
   course calendar and My Calendar. It is intentionally not a
   teacher-controlled course setting.
   ========================================================= */
.calendar-toolbar-actions
{
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.calendar-week-toggle
{
    padding: 2px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    background: var(--color-gray-050);
}

.calendar-week-toggle-button
{
    min-height: 30px;
    padding: 5px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-gray-600);
    font-family: var(--font-interface);
    font-size: .68rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.calendar-week-toggle-button:hover
{
    background: var(--color-white);
    color: var(--course-dark);
}

.calendar-week-toggle-button.is-active
{
    background: var(--course-dark);
    color: var(--color-white);
    box-shadow: 0 1px 4px rgba(24, 39, 55, .16);
}

.calendar-week-toggle-button:focus-visible
{
    outline: 2px solid var(--course-accent);
    outline-offset: 2px;
}

@media (max-width: 760px)
{
    .calendar-toolbar
    {
        flex-wrap: wrap;
    }

    .calendar-toolbar-actions
    {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    .calendar-week-toggle
    {
        flex: 1 1 170px;
        max-width: 210px;
    }

    .calendar-week-toggle-button
    {
        flex: 1 1 0;
        min-height: 36px;
    }
}

@media (max-width: 520px)
{
    .calendar-toolbar-actions
    {
        justify-content: flex-start;
    }

    .calendar-week-toggle
    {
        width: 100%;
        max-width: none;
    }
}

/* =========================================================
   PERSON FORM ALIGNMENT
   Keep two-column person fields top-aligned so helper text in one
   column never stretches the neighboring control. Standardize the
   control rhythm across Add/Edit Person forms.
   ========================================================= */
.admin-person-form .admin-form-grid
{
    align-items: start;
}

.admin-person-form .admin-form-field
{
    align-content: start;
}

.admin-person-form .admin-form-field input,
.admin-person-form .admin-form-field select,
.admin-person-form .admin-password-row input
{
    height: 46px;
    min-height: 46px;
    box-sizing: border-box;
}

.admin-person-form .admin-form-field > small
{
    line-height: 1.4;
}

.admin-person-form .admin-password-row
{
    align-items: stretch;
}

.admin-person-form .admin-password-row .compact-button
{
    height: 46px;
    min-height: 46px;
}


/* =========================================================
   CALENDAR EVENT DELETE ACTION
   ========================================================= */

.calendar-event-editor .calendar-event-delete-button { margin-right: auto; min-width: 132px; }

@media (max-width: 700px) { .calendar-event-editor .calendar-event-delete-button { width: 100%; margin-right: 0; } }