/* Loaded on pages with different :root palettes (homepage.css, signup.css,
   login.css, student-dashboard.css), so every color pulls from whichever
   page-level custom property exists, with a sane fallback chain -- keeps this
   modal re-themed correctly wherever it's used instead of drifting from
   each page's own palette. Overlay dim/blur/shadow/radius match the
   .modal-overlay/.modal-content convention already established in
   student-dashboard.css (the one modal pattern used app-wide). */

.site-content-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(30, 42, 96, 0.34);
	backdrop-filter: blur(7px);
	align-items: center;
	justify-content: center;
	z-index: 2000;
	padding: 24px;
}

.site-content-modal-overlay.show {
	display: flex;
	animation: siteContentModalFadeIn 0.24s ease;
}

@keyframes siteContentModalFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.site-content-modal {
	width: min(640px, 100%);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/* The surface is declared HERE, not inherited from the shared
	   .modal-content. These two dialogs only ever render on login.php and the
	   three signup pages, and none of them loads student-dashboard.css -- where
	   .modal-content lives. So the Privacy Policy and Terms opened with no
	   background at all: body text sat directly on the blurred page behind it
	   and could not be read, which is the one thing a consent document has to
	   be. This stylesheet ships with the partial, so it is the only place the
	   surface can safely be defined. */
	background: #ffffff;
	border: 1px solid #e1e8f9;
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 30px 60px rgba(20, 30, 70, 0.28);
	color: #1e2242;
}

/* The shared modal vocabulary, redeclared for the same reason as the surface
   above: the markup uses .modal-header-row / .modal-close-btn / .modal-actions,
   but the pages these dialogs appear on never load the stylesheet that defines
   them, so the header collapsed and both close controls rendered as raw
   browser buttons. */
.site-content-modal .modal-header-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding-bottom: 14px;
	border-bottom: 1px solid #e8edfa;
}

.site-content-modal .modal-header-row h3 {
	margin: 0;
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	font-weight: 800;
	color: #1e2242;
}

.site-content-modal .modal-close-btn {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #e1e8f9;
	border-radius: 10px;
	background: #f5f7ff;
	color: #45507d;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.site-content-modal .modal-close-btn:hover {
	background: #eaeefc;
	color: #1e2242;
}

.site-content-modal .modal-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	padding-top: 14px;
	border-top: 1px solid #e8edfa;
}

/* Reading progress on the left, the button on the right. */
.site-content-modal .modal-actions.split {
	justify-content: space-between;
}

.site-content-modal .modal-btn-primary {
	border: 0;
	border-radius: 999px;
	padding: 10px 22px;
	background: #2f4bd4;
	color: #ffffff;
	font-family: inherit;
	font-size: 0.86rem;
	font-weight: 700;
	cursor: pointer;
}

.site-content-modal .modal-btn-primary:hover {
	background: #2740b8;
}

.site-content-modal .terms-progress {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	color: #5c6480;
}

/* Retained as aliases: the markup now uses .modal-header-row/.modal-close-btn,
   but the login and homepage bundles may still render the older classes. */
.site-content-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--line, var(--input-border, #dde3f4));
}

.site-content-modal-header h3 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--text-deep, var(--text-main, #1e2242));
}

.site-content-modal-close {
	border: none;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--text-muted, #6a7085);
	cursor: pointer;
	padding: 2px 6px;
}

.site-content-modal-close:hover {
	color: var(--text-deep, var(--text-main, #1e2242));
}

/* The body is the only scrolling region; negative side margins let it use the
   card's full width while the header and actions keep the card's padding. */
.site-content-modal-body {
	/* flex:1 with min-height:0 is what actually makes the document scroll
	   inside the dialog instead of running underneath the footer -- without the
	   min-height a flex item refuses to shrink below its content. */
	flex: 1 1 auto;
	min-height: 0;
	margin: 0 -4px;
	padding: 16px 4px;
	overflow-y: auto;
	color: var(--text-deep, var(--text-main, #1e2242));
	font-size: 0.95rem;
	line-height: 1.6;
}

.site-content-modal-body p {
	margin: 0 0 14px;
}

.site-content-modal-body p:last-child {
	margin-bottom: 0;
}

.site-content-modal-body h4 {
	margin: 22px 0 8px;
	font-size: 0.86rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--primary, var(--text-deep, #1e2242));
}

.site-content-modal-body h4:first-child {
	margin-top: 0;
}

/*
 * .field-block has no margin of its own (it's a bare label+input flex
 * column, reused all over the dashboards' own forms which supply their own
 * grid `gap`), so a form dropped straight into this modal body -- like the
 * correction-request form -- needs its own spacing here or every field
 * renders stacked with ~0px between them.
 */
.site-content-modal-body form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* admin-dashboard.css defines these too, but that file isn't loaded on the
   student/teacher dashboards that use this modal, so mirror the spacing
   here rather than leaving the submit row and status message unstyled. */
.site-content-modal-body .admin-actions-row {
	display: flex;
	gap: 12px;
	margin-top: 4px;
}

.site-content-modal-body .form-status {
	margin: 0;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
}

.site-content-modal-body .form-status.status-error {
	background: rgba(207, 61, 74, 0.1);
	color: #9f2530;
	border: 1px solid rgba(207, 61, 74, 0.2);
}

.site-content-modal-body .form-status.status-success {
	background: rgba(68, 179, 95, 0.12);
	color: #1e7a4a;
	border: 1px solid rgba(68, 179, 95, 0.22);
}

.captcha-verify-intro {
	margin: 0 0 16px;
	font-size: 0.9rem;
	color: var(--text-muted, #6a7085);
}

.captcha-verify-actions {
	display: flex;
	gap: 12px;
	margin-top: 16px;
}

.captcha-verify-error {
	margin-top: 12px !important;
}

.site-privacy-trigger {
	background: none;
	border: none;
	padding: 0;
	/* Matches the established inline-link color in signup.css (.login-link,
	   #33489f / hover #27397d) via the fallback, since login.css/signup.css
	   don't define --primary; dashboard pages that do define it use their
	   own token instead. */
	color: var(--primary, #33489f);
	font: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.site-privacy-trigger:hover {
	color: var(--primary-dark, #27397d);
}

/* Reading-progress line in the Terms dialog footer. The signup checkbox is
   gated on reaching the end of this document, so the state of that requirement
   needs to be visible while reading it. */
.terms-progress {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--text-muted, #6a7085);
}

.terms-progress.is-complete {
	color: #1f7a4d;
}

.terms-progress.is-complete::before {
	content: "✓ ";
	font-weight: 700;
}

/* The two documents are one agreement in one dialog now, so each needs a title
   of its own inside the body: both number their sections from 1, and run
   together without a break "1. ACCEPTANCE OF TERMS" and "1. WHO THIS POLICY
   COVERS" would read as one contradictory document. */
.site-content-doc-title {
	margin: 26px 0 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--primary, #33489f);
	color: var(--primary, #33489f);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.01em;
}

.site-content-modal-body > .site-content-doc-title:first-child {
	margin-top: 0;
}

.site-content-modal-subtitle {
	margin: 4px 0 0;
	font-size: 0.82rem;
	color: var(--text-muted, #6a7085);
}