.section,
.sideCard {
	background: var(--surface-panel);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-3xl);
	box-shadow: var(--shadow-soft);
	padding: 1.2rem;
	min-width: 0;
}

.primaryAction,
.secondaryAction,
.queueButton {
	font: inherit;
}

.primaryAction,
.secondaryAction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.8rem 1rem;
	border-radius: var(--radius-pill);
	text-decoration: none;
	font-weight: 600;
	border: 1px solid transparent;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease;
}

.secondaryAction {
	background: var(--surface-soft);
	color: var(--text);
	border-color: var(--border-soft);
}

.secondaryAction:hover {
	text-decoration: none;
	background: color-mix(in srgb, var(--surface-soft) 88%, white 12%);
	border-color: var(--border-soft);
}

.primaryAction {
	background: linear-gradient(135deg, var(--action-primary-start), var(--action-primary-end));
	color: var(--action-primary-text);
	box-shadow: var(--action-primary-shadow);
}

.primaryAction:hover {
	filter: saturate(1.02);
}

.primaryAction:disabled,
.secondaryAction:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

.sideEyebrow,
.order,
.feedbackBlock label,
.responseBlock p,
.supportBlock p {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--text-subtle);
}

.statusPill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.42rem 0.68rem;
	border-radius: var(--radius-pill);
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	border: 1px solid transparent;
}

.review {
	background: var(--surface-warning-tint);
	color: var(--warning-text);
	border-color: color-mix(in srgb, var(--warning-text) 24%, transparent 76%);
}

.progress {
	background: color-mix(in srgb, var(--surface-info) 20%, white 80%);
	color: var(--info);
	border-color: color-mix(in srgb, var(--info) 24%, transparent 76%);
}

.success {
	background: var(--surface-success-tint);
	color: var(--success-text);
	border-color: var(--border-success-soft);
}

.muted {
	background: var(--surface-soft);
	color: var(--text-muted);
	border-color: var(--border-soft);
}

.contentGrid {
	display: grid;
	gap: 1.25rem;

	@include respond(desktop-lg) {
		grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.85fr);
		align-items: start;
	}
}

@media (max-width: 1023px) {
	.contentGrid {
		display: flex;
		flex-direction: column;
	}

	.sideColumn {
		order: -1;
	}
}

.mainColumn,
.sideColumn {
	min-width: 0;
}

.sideColumn {
	display: grid;
	gap: 1rem;
	min-height: 0;

	@include respond(desktop-lg) {
		position: sticky;
		top: 1.25rem;
		max-height: calc(100dvh - 2.5rem);
		overflow-y: auto;
		padding-right: 0.2rem;
	}
}

.queueCard {
	min-height: 0;
}

.mobileStickyNav {
	position: static;
}

.mobileStickyNavHeader {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 0.75rem;
}

.mobileStickyNavActions {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mobileStickyNavToggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 0.9rem;
	border-radius: var(--radius-full);
	border: 1px solid var(--border-soft);
	background: var(--surface-panel-strong);
	color: var(--text);
	font: inherit;
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.mobileStickyNavBackToTop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 0.9rem;
	border-radius: var(--radius-full);
	border: 1px solid color-mix(in srgb, var(--border-soft) 74%, white 26%);
	background: color-mix(in srgb, var(--surface-panel-strong) 82%, white 18%);
	color: var(--text);
	font: inherit;
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: 0 8px 18px hsl(220 35% 12% / 0.1);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;

	&:hover {
		transform: translateY(-1px);
		background: color-mix(in srgb, var(--surface-panel-strong) 74%, white 26%);
	}
}

.mobileStickyNavContent {
	display: grid;
	gap: 0.85rem;
}

.mobileStickyNavContentExpanded {
	display: grid;
	gap: 0.85rem;
}

.mobileQuestionNavList {
	display: grid;
	gap: 0.65rem;
}

.mobileQuestionNavButton {
	display: grid;
	gap: 0.15rem;
	padding: 0.85rem 0.95rem;
	text-align: left;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-divider);
	background: var(--surface-panel-strong);
	color: var(--text);
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;

	&:hover {
		transform: translateY(-1px);
	}

	strong {
		font-size: 0.95rem;
		color: var(--text);
	}

	small {
		color: var(--text-muted);
	}
}

.mobileQuestionNavAnswered {
	border-color: color-mix(in srgb, var(--border-soft) 62%, var(--info) 38%);
	background: color-mix(in srgb, var(--surface-soft) 88%, white 12%);
}

.sectionHeader,
.sideCard {
	display: grid;
	gap: 0.4rem;
}

.questionList,
.queueList,
.noteList {
	display: grid;
	gap: 0.85rem;
}

.sideActions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.queueScroller {
	min-height: 0;
}

.assignmentFeedbackCard {
	display: grid;
	gap: 0.85rem;
	padding: 1rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface-panel-strong);
	margin-bottom: 0.95rem;
}

.saveAllCard {
	display: grid;
	gap: 0.85rem;
	padding: 1rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface-panel-strong);
	margin-top: 1rem;
}

.nextStepCard,
.optionCard {
	display: grid;
	gap: 0.85rem;
	padding: 1rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface-panel-strong);
	min-width: 0;
}

.planList,
.scoreList {
	display: grid;
	gap: 0.85rem;
}

.planCard {
	display: grid;
	gap: 0.85rem;
	padding: 1rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface-panel-strong);
	min-width: 0;
}

.scoreRow {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8rem 0.95rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);

	span {
		color: var(--text);
	}

	strong {
		color: var(--text-muted);
	}
}

.questionCard,
.queueButton {
	display: grid;
	gap: 0.85rem;
	padding: 1rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-soft);
	background: var(--surface-panel-strong);
	min-width: 0;
}

.optionGrid {
	display: grid;
	gap: 0.85rem;

	@include respond(tablet) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.optionCard {
	text-align: left;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;

	strong {
		font-size: 1rem;
		color: var(--text);
	}

	span {
		color: var(--text-muted);
		line-height: 1.5;
	}

	&:hover {
		border-color: color-mix(in srgb, var(--border-soft) 68%, var(--info) 32%);
		background: color-mix(in srgb, var(--surface-panel-strong) 86%, white 14%);
	}
}

.optionCardActive {
	border-color: color-mix(in srgb, var(--border-soft) 54%, var(--info) 46%);
	background: color-mix(in srgb, var(--surface-info) 14%, white 86%);
	box-shadow: var(--focus-ring-info-shadow);
}

.questionTop {
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 0.75rem;

	h3 {
		line-height: 1.25;
	}
}

.metaRow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;

	span {
		padding: 0.35rem 0.55rem;
		border-radius: var(--radius-pill);
		background: var(--surface-soft);
		color: color-mix(in srgb, var(--text-muted) 84%, var(--info) 16%);
		font-size: 0.82rem;
		border: 1px solid var(--border-soft);
	}
}

.responseBlock,
.supportBlock,
.feedbackBlock {
	display: grid;
	gap: 0.45rem;
}

.reviewEditorCard {
	display: grid;
	gap: 0.9rem;
	padding: 0.95rem 1rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-soft);
	background: color-mix(in srgb, var(--surface-soft) 88%, white 12%);
}

.reviewEditorTop {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;

	h4 {
		font-size: 1rem;
		color: var(--text);
	}
}

.reviewCheckbox {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 600;
	color: var(--text);

	input {
		inline-size: 1rem;
		block-size: 1rem;
	}
}

.reviewField {
	display: grid;
	gap: 0.35rem;

	label {
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--text-muted);
	}

	small {
		color: var(--text-muted);
		line-height: 1.4;
	}
}

.reviewScoreGrid {
	display: grid;
	gap: 0.75rem;

	@include respond(tablet) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.scoreHighlight {
	padding: 1rem;
	border-radius: var(--radius-lg);
	border: 1px solid color-mix(in srgb, var(--border-soft) 56%, var(--info) 44%);
	background: color-mix(in srgb, var(--surface-info) 12%, white 88%);

	@include respond(tablet) {
		grid-column: 1 / -1;
	}

	label {
		font-size: 0.8rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	small {
		font-size: 0.9rem;
	}
}

.scoreHighlightValue {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-height: 3rem;

	strong,
	span {
		font-size: clamp(2rem, 4vw, 3rem);
		line-height: 1;
		font-weight: 800;
		color: var(--text);
	}
}

.compactInput {
	width: 100%;
	min-width: 0;
	padding: 0.75rem 0.85rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-soft);
	background: var(--surface-panel);
	color: var(--text);
	font: inherit;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;

	&:focus {
		outline: none;
		border-color: color-mix(in srgb, var(--border-soft) 56%, var(--info) 44%);
		box-shadow: var(--focus-ring-info-shadow);
		background: color-mix(in srgb, var(--surface-panel) 88%, white 12%);
	}
	}

.tagList {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tagPill {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.7rem;
	border-radius: 999px;
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);
	color: var(--text-muted);
	font-size: 0.9rem;
	line-height: 1.2;
}

.reviewDraftEmpty {
	padding: 0.9rem 1rem;
	border-radius: var(--radius-md);
	border: 1px dashed var(--border-soft);
	background: var(--surface-soft);
	color: var(--text-muted);
	font-size: 0.94rem;
	line-height: 1.45;
}

.responseBlock,
.supportBlock {
	padding: 0.9rem 1rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);
}

.responseBlock strong,
.supportBlock span,
.supportBlock pre {
	font-size: 0.98rem;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.responseBlock strong {
	color: color-mix(in srgb, var(--text) 88%, var(--info) 12%);
}

.supportBlock span,
.supportBlock pre {
	color: var(--text-muted);
	margin: 0;
}

.feedbackInput {
	width: 100%;
	min-height: 8rem;
	padding: 0.9rem 1rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-soft);
	background: var(--surface-soft);
	color: var(--text);
	font: inherit;
	resize: vertical;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background-color 0.2s ease;
}

.feedbackInput:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--border-soft) 56%, var(--info) 44%);
	box-shadow: var(--focus-ring-info-shadow);
	background: color-mix(in srgb, var(--surface-soft) 88%, white 12%);
}

.draftHint {
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--text-muted);
}

.actionRow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.notice {
	padding: 0.8rem 0.95rem;
	border-radius: var(--radius-md);
	font-size: 0.92rem;
	font-weight: 600;
}

.noticeSuccess {
	background: var(--surface-success-tint);
	color: var(--success-text);
}

.noticeError {
	background: var(--surface-danger);
	color: var(--danger-text);
}

.queueButton {
	text-align: left;
	cursor: pointer;
	color: var(--text);
	transition:
		border-color 0.2s ease,
		background-color 0.2s ease;

	strong {
		color: var(--text);
	}

	p {
		color: var(--text-muted);
	}

	&:hover {
		border-color: color-mix(in srgb, var(--border-soft) 70%, var(--info) 30%);
		background: color-mix(in srgb, var(--surface-soft) 92%, white 8%);
	}
}

.queueButtonActive {
	border-color: color-mix(in srgb, var(--border-soft) 60%, var(--info) 40%);
	background: color-mix(in srgb, var(--surface-soft) 86%, white 14%);
}

.queueMeta {
	display: grid;
	gap: 0.35rem;
	justify-items: start;

	small {
		color: var(--text-muted);
	}
}

.queueEmpty,
.emptyState,
.progressNote {
	padding: 0.95rem;
	border-radius: var(--radius-md);
	background: var(--surface-soft);
	color: var(--text-muted);
	border: 1px dashed var(--border-soft);
}

.closeAssignmentStatusRow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.closeBlockerList {
	display: grid;
	gap: 0.55rem;
	padding-left: 1rem;

	li {
		color: var(--text-muted);
		line-height: 1.45;
	}
}

.noteList {
	padding-left: 1rem;

	li {
		color: var(--text-muted);
		line-height: 1.45;
	}
}

@media (max-width: 1023px) {
	.mobileStickyNav {
		position: sticky;
		top: 0.75rem;
		z-index: 25;
		pointer-events: auto;
		background: color-mix(in srgb, var(--surface-panel) 84%, white 16%);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid color-mix(in srgb, var(--border-soft) 78%, white 22%);
		border-radius: calc(var(--radius-3xl) + 0.25rem);
		box-shadow: 0 16px 36px hsl(220 35% 12% / 0.14);
	}

	.mobileStickyNav {
		gap: 0.75rem;
		padding: 0.95rem;
	}

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

	.mobileStickyNavActions {
		justify-content: space-between;
	}

	.mobileStickyNavToggle {
		display: inline-flex;
	}

	.mobileStickyNavContent {
		display: none;
	}

	.mobileStickyNavContentExpanded {
		display: grid;
	}

	.queueScroller,
	.mobileQuestionNavList {
		max-height: min(55dvh, 24rem);
		overflow-y: auto;
		padding-right: 0.15rem;
	}

	.section,
	.sideCard,
	.questionCard,
	.queueButton,
	.assignmentFeedbackCard,
	.saveAllCard {
		padding: 1rem;
	}

	.questionTop,
	.reviewEditorTop {
		display: grid;
		gap: 0.6rem;
	}

	.questionCard {
		scroll-margin-top: 8.5rem;
	}

	.sideActions {
		gap: 0.55rem;
	}

	.sideActions > * {
		flex: 1 1 auto;
	}

	.queueMeta {
		width: 100%;
		grid-template-columns: minmax(0, 1fr);
	}
}

@include respond(desktop-lg) {
	.mobileStickyNavToggle {
		display: none;
	}

	.mobileStickyNavContent {
		display: grid;
	}
}
