.classes-view-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1rem 0 1.5rem;
}
.classes-view-link,
.classes-button {
	display: inline-block;
	min-height: 48px;
	box-sizing: border-box;
	padding: .75rem 1.15rem;
	border: 2px solid #135e96;
	border-radius: 6px;
	background: #135e96;
	color: #fff !important;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
}
.classes-view-link.is-active,
.classes-button-secondary {
	background: #fff;
	color: #135e96 !important;
}
.classes-button:focus,
.classes-view-link:focus {
	outline: 4px solid #ffbf47;
	outline-offset: 2px;
}
.classes-button[disabled] {
	border-color: #666;
	background: #666;
	cursor: not-allowed;
}
.classes-button-small { min-height: 44px; padding: .55rem 1rem; }
.classes-cards,
.classes-technology-grid,
.classes-instructor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1.25rem;
}
.classes-card,
.classes-technology,
.classes-feedback,
.classes-intro,
.classes-instructor-card,
.classes-instructor-profile {
	padding: 1.25rem;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	background: #fff;
}
.classes-details {
	margin: 1.5rem 0;
	padding: 1.4rem;
	border: 2px solid #c3c4c7;
	border-radius: 8px;
	background: #f0f0f1;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
}
.classes-details-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}
.classes-details-heading h2 { margin: 0; }
.classes-detail-list {
	margin: 1rem 0 1.25rem;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
}
.classes-detail-list > div {
	display: grid;
	grid-template-columns: minmax(110px, 30%) 1fr;
	gap: 1rem;
	padding: .8rem 1rem;
	border-bottom: 1px solid #dcdcde;
}
.classes-detail-list > div:last-child { border-bottom: 0; }
.classes-detail-list dt { font-weight: 700; }
.classes-detail-list dd { margin: 0; }
.classes-card h2,
.classes-technology h3 { margin-top: .25rem; }
.classes-status {
	display: inline-block;
	margin: 0;
	padding: .25rem .55rem;
	border-radius: 4px;
	background: #e5f5fa;
	font-weight: 700;
}
.classes-technologies { color: #3c434a; font-weight: 700; }
.classes-instructors { color: #3c434a; }
.classes-instructor-card { text-align: center; }
.classes-instructor-avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; }
.classes-instructor-card h3 { margin-bottom: .25rem; }
.classes-instructor-callsign { margin:.25rem 0; font-family:monospace; font-size:1.1rem; font-weight:700; }
.classes-instructor-heading { display:flex; align-items:center; gap:1.25rem; margin-bottom:1.25rem; }
.classes-instructor-heading h2 { margin-bottom:.25rem; }
.classes-instructor-profile .classes-instructor-avatar { width:160px; height:160px; }
.classes-session-list { padding: 1rem 1rem 1rem 2.75rem; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; }
.classes-session-list li { margin-bottom: .65rem; }
.classes-student-list { padding: 1rem 1rem 1rem 2.75rem; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; }
.classes-student-list li { margin-bottom: .5rem; }
.classes-student-callsign { font-family: monospace; font-weight: 700; }
.classes-private-note { color: #3c434a; font-size: .9rem; }
.classes-interest-form { margin-top: 1rem; }
.classes-joined-status { display: block; margin-top: .65rem; color: #116329; }
.classes-capacity {
	margin: 1.25rem 0 0;
	padding-top: .85rem;
	border-top: 1px solid #c3c4c7;
	color: #3c434a;
}
.classes-capacity-summary {
	flex: 0 0 auto;
	margin: 0;
	padding: .55rem .8rem;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
	background: #fff;
}
.classes-requirements { margin: 1.25rem 0; }
.classes-requirements > h3 { margin-bottom: .75rem; }
.classes-requirement-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: .85rem;
}
.classes-requirement-group {
	padding: 1rem;
	border: 1px solid #c3c4c7;
	border-left: 5px solid #135e96;
	border-radius: 6px;
	background: #fff;
}
.classes-requirement-optional { border-left-color: #787c82; }
.classes-requirement-group h4 { margin: 0 0 .55rem; }
.classes-requirement-group ul { margin: 0; padding-left: 1.35rem; }
.classes-requirement-group li { margin-bottom: .4rem; }
.classes-requirement-group li:last-child { margin-bottom: 0; }
.classes-notice,
.classes-alert {
	margin: 1rem 0;
	padding: 1rem;
	border-left: 6px solid #116329;
	background: #edf7ed;
	font-size: 1.05rem;
}
.classes-alert { border-color: #b32d2e; background: #fcf0f1; }
.classes-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.classes-filter label { font-weight: 700; }
.classes-filter select { min-height: 44px; min-width: 220px; font-size: 1rem; }
.classes-calendar-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.classes-calendar-heading h2 { text-align: center; }
.classes-calendar-scroll { overflow-x: auto; }
.classes-calendar { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.classes-calendar th,
.classes-calendar td { border: 1px solid #c3c4c7; padding: .5rem; vertical-align: top; }
.classes-calendar td { height: 110px; }
.classes-calendar-day { display: block; font-weight: 700; }
.classes-calendar-event { display: block; margin-top: .4rem; padding: .4rem; border-radius: 4px; background: #e5f5fa; }
.classes-calendar .is-outside { background: #f6f7f7; }
.classes-rating { display: block; margin: .55rem 0; font-size: 1.05rem; }
.classes-interest-section { margin-top: 2rem; }
.classes-interest-section > h2 { margin-bottom: .35rem; }
.classes-interest-section > p { margin-top: 0; }
.classes-feedback textarea { width: 100%; max-width: 720px; font-size: 1rem; }
@media (max-width: 600px) {
	.classes-view-link,
	.classes-button { width: 100%; }
	.classes-calendar-heading { align-items: stretch; flex-direction: column; }
	.classes-instructor-heading { align-items:flex-start; flex-direction:column; }
	.classes-detail-list > div { grid-template-columns: 1fr; gap: .2rem; }
	.classes-details-heading { align-items: flex-start; flex-direction: column; }
}