:root {
	--yce-ink: #182726;
	--yce-muted: #61706e;
	--yce-line: #d9e2df;
	--yce-surface: #ffffff;
	--yce-soft: #f3f7f5;
	--yce-primary: #16766e;
	--yce-primary-dark: #105a54;
	--yce-accent: #d95f45;
}

.yce-dashboard,
.yce-assignment-panel,
.yce-results-table-wrap,
.yce-login-form,
.yce-login-prompt {
	color: var(--yce-ink);
}

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

.yce-section-heading h2,
.yce-video-section h2,
.yce-feedback h3 {
	margin: 0;
	color: var(--yce-ink);
}

.yce-section-heading h2 {
	font-size: 34px;
	line-height: 1.25;
}

.yce-eyebrow {
	margin: 0 0 5px;
	color: var(--yce-primary);
	font-size: 13px;
	font-weight: 700;
}

.yce-button {
	display: inline-flex;
	min-height: 42px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	padding: 9px 17px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.yce-button--primary {
	border-color: var(--yce-primary);
	background: var(--yce-primary);
	color: #fff;
}

.yce-button--primary:hover,
.yce-button--primary:focus {
	border-color: var(--yce-primary-dark);
	background: var(--yce-primary-dark);
	color: #fff;
}

.yce-button--secondary {
	border-color: var(--yce-line);
	background: #fff;
	color: var(--yce-primary-dark);
}

.yce-button--secondary:hover,
.yce-button--secondary:focus {
	border-color: var(--yce-primary);
	color: var(--yce-primary-dark);
}

.yce-text-link {
	color: var(--yce-primary-dark);
	font-weight: 700;
}

.yce-assignment-list {
	border-top: 1px solid var(--yce-line);
}

.yce-assignment-row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--yce-line);
}

.yce-assignment-row__index {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 6px;
	background: #e0f0ec;
	color: var(--yce-primary-dark);
}

.yce-assignment-row__index .dashicons {
	width: 24px;
	height: 24px;
	font-size: 24px;
}

.yce-assignment-row h3 {
	margin: 0 0 5px;
	font-size: 19px;
	line-height: 1.4;
}

.yce-assignment-row h3 a {
	color: var(--yce-ink);
	text-decoration: none;
}

.yce-assignment-row__body > p {
	margin: 0;
	color: var(--yce-muted);
}

.yce-assignment-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 10px;
	color: var(--yce-muted);
	font-size: 13px;
}

.yce-assignment-row__action {
	display: flex;
	align-items: center;
	gap: 10px;
}

.yce-status {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	box-sizing: border-box;
	padding: 4px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}

.yce-status--submitted {
	background: #fff1d5;
	color: #805000;
}

.yce-status--reviewed {
	background: #dcf2e5;
	color: #145e38;
}

.yce-assignment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	padding: 15px 18px;
	border-left: 3px solid var(--yce-primary);
	background: var(--yce-soft);
	color: var(--yce-muted);
}

.yce-assignment-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.yce-video-section,
.yce-submission-section {
	margin-top: 36px;
}

.yce-video-section video {
	display: block;
	width: 100%;
	max-height: 620px;
	margin-top: 16px;
	border-radius: 6px;
	background: #101817;
}

.yce-teacher-callout,
.yce-login-prompt {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 30px;
	padding: 20px;
	border: 1px solid var(--yce-line);
	border-radius: 6px;
	background: var(--yce-surface);
}

.yce-teacher-callout {
	justify-content: space-between;
}

.yce-teacher-callout strong,
.yce-teacher-callout span {
	display: block;
}

.yce-teacher-callout strong {
	font-size: 26px;
}

.yce-login-prompt .dashicons {
	width: 32px;
	height: 32px;
	color: var(--yce-primary);
	font-size: 32px;
}

.yce-login-prompt h2,
.yce-login-prompt p {
	margin: 0;
}

.yce-login-prompt p {
	margin-top: 4px;
	color: var(--yce-muted);
}

.yce-login-prompt .yce-button {
	margin-left: auto;
}

.yce-submission-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0;
}

.yce-submission-summary > div {
	padding: 16px;
	border: 1px solid var(--yce-line);
	border-radius: 6px;
}

.yce-submission-summary span,
.yce-submission-summary strong {
	display: block;
}

.yce-submission-summary span {
	margin-bottom: 5px;
	color: var(--yce-muted);
	font-size: 13px;
}

.yce-feedback {
	margin: 22px 0;
	padding: 20px;
	border-left: 3px solid #3e8a58;
	background: #f0f8f3;
}

.yce-upload-box {
	margin-top: 24px;
	border: 1px solid var(--yce-line);
	border-radius: 6px;
	background: #fff;
}

.yce-upload-box summary {
	padding: 15px 18px;
	font-weight: 700;
	cursor: pointer;
}

.yce-upload-box form {
	padding: 4px 18px 20px;
}

.yce-upload-box textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 7px 0 16px;
	padding: 10px;
	border: 1px solid var(--yce-line);
	border-radius: 4px;
}

.yce-file-field {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	padding: 16px;
	border: 1px dashed #9bb7b2;
	border-radius: 5px;
	background: var(--yce-soft);
}

.yce-file-field .dashicons {
	width: 30px;
	height: 30px;
	color: var(--yce-primary);
	font-size: 30px;
}

.yce-file-field span,
.yce-file-field small {
	display: block;
}

.yce-file-field input {
	margin-left: auto;
	max-width: 45%;
}

.yce-notice {
	margin: 16px 0;
	padding: 12px 15px;
	border-left: 3px solid var(--yce-primary);
	background: var(--yce-soft);
}

.yce-notice--success {
	border-color: #3e8a58;
	background: #edf8f1;
}

.yce-notice--error {
	border-color: var(--yce-accent);
	background: #fff1ee;
}

.yce-results-table-wrap {
	overflow-x: auto;
}

.yce-results-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
}

.yce-results-table th,
.yce-results-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--yce-line);
	text-align: left;
	vertical-align: top;
}

.yce-results-table th {
	background: var(--yce-soft);
	font-size: 13px;
}

.yce-login-form {
	max-width: 460px;
}

.yce-login-form label,
.yce-login-form input[type="text"],
.yce-login-form input[type="password"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.yce-login-form input[type="text"],
.yce-login-form input[type="password"] {
	min-height: 46px;
	margin-top: 6px;
	padding: 9px 11px;
	border: 1px solid var(--yce-line);
	border-radius: 4px;
}

.yce-login-form input[type="submit"] {
	min-height: 42px;
	padding: 9px 20px;
	border: 0;
	border-radius: 5px;
	background: var(--yce-primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.yce-empty {
	padding: 44px 0;
	color: var(--yce-muted);
	text-align: center;
}

.yce-empty .dashicons {
	width: 40px;
	height: 40px;
	font-size: 40px;
}

@media (max-width: 720px) {
	.yce-section-heading h2 {
		font-size: 26px;
	}

	.yce-section-heading,
	.yce-login-prompt,
	.yce-teacher-callout {
		align-items: flex-start;
		flex-direction: column;
	}

	.yce-login-prompt .yce-button {
		width: 100%;
		margin-left: 0;
	}

	.yce-assignment-row {
		grid-template-columns: 42px minmax(0, 1fr);
		gap: 12px;
	}

	.yce-assignment-row__index {
		width: 40px;
		height: 40px;
	}

	.yce-assignment-row__action {
		grid-column: 2;
		flex-wrap: wrap;
	}

	.yce-submission-summary {
		grid-template-columns: 1fr;
	}

	.yce-file-field {
		align-items: flex-start;
		flex-direction: column;
	}

	.yce-file-field input {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
	}
}