/*
 * Skill Suites - Guided Reading styles.
 *
 * Scope: only the elements the plugin's own script builds (the ss-guided-* classes) plus the two
 * states it toggles on the article's own .ss-sec sections. Nothing here touches theme layout
 * classes, so this is safe to load next to any block theme template.
 *
 * Reading progress itself is never written into this stylesheet or into the page's HTML. It is
 * read from localStorage by the script and expressed only as class names the script toggles at
 * runtime. See the plugin's PHP file and its script for the full explanation of why.
 */

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

/* ---------------------------------------------------------------------------------------------
 * Progressive reveal.
 *
 * A locked section is hidden with max-height: 0 plus overflow: hidden. It is deliberately not
 * display: none, not visibility: hidden and not the hidden attribute: all three of those remove
 * an element from the accessibility tree, and a crawler that renders the page treats them the
 * same way a screen reader does, as content that is "not really there". This plugin's one hard
 * rule is that every section's full text is always present in the DOM and always readable, so a
 * search engine indexes the whole article and a screen reader in browse mode reads straight
 * through a locked section exactly as if it were open. The lock is a purely visual affordance for
 * a sighted reader using a mouse, keyboard or touch screen; it is not a second, thinner copy of
 * the article that only some readers get.
 * ------------------------------------------------------------------------------------------- */
.ss-sec {
	max-height: none;
}

.ss-sec.is-locked {
	max-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
}

/* The transition is added only once the script has finished its first, unanimated render (see
   the "ss-guided-ready" class in the script), so a reader never sees the initial gating state
   animate into place while the page is still loading. */
body.ss-guided-ready .ss-sec {
	transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease, padding 0.35s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	body.ss-guided-ready .ss-sec {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Score bar: a compact, sticky strip so the running score stays visible without scrolling back
 * to the top of the article.
 * ------------------------------------------------------------------------------------------- */
.ss-guided-scorebar {
	position: sticky;
	top: 0;
	z-index: 20;
	background: #ffffff;
	border-bottom: 1px solid #e2e2e2;
}

body.admin-bar .ss-guided-scorebar {
	top: 32px;
}

@media ( max-width: 782px ) {
	body.admin-bar .ss-guided-scorebar {
		top: 46px;
	}
}

.ss-guided-scorebar-inner {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 780px;
	margin: 0 auto;
	padding: 0.4rem 1rem;
}

.ss-guided-scorebar-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #333333;
	white-space: nowrap;
}

.ss-guided-scorebar-track {
	flex: 1 1 auto;
	height: 8px;
	border-radius: 4px;
	background: #e6e6e6;
	overflow: hidden;
}

.ss-guided-scorebar-fill {
	height: 100%;
	width: 0%;
	background: #2454d6;
	transition: width 0.3s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.ss-guided-scorebar-fill {
		transition: none;
	}
}

.ss-guided-scorebar-percent {
	font-size: 0.85rem;
	font-weight: 700;
	color: #2454d6;
	min-width: 3ch;
	text-align: right;
}

/* Unobtrusive on mobile: the label text drops away and the bar itself thins, leaving only the
   thin track and the percentage number, per the "collapse to a thin bar plus a number" brief. */
@media ( max-width: 600px ) {
	.ss-guided-scorebar-label {
		display: none;
	}

	.ss-guided-scorebar-inner {
		padding: 0.3rem 0.75rem;
		gap: 0.5rem;
	}

	.ss-guided-scorebar-track {
		height: 6px;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Outline: the contents panel at the top of the article.
 * ------------------------------------------------------------------------------------------- */
.ss-guided-outline {
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 0 0 1.75rem;
	background: #fafafa;
}

.ss-guided-outline-title {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.ss-guided-outline-meta {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	color: #555555;
}

.ss-guided-expand-all-btn {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid #2454d6;
	border-radius: 6px;
	background: #ffffff;
	color: #2454d6;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.ss-guided-expand-all-btn:hover {
	background: #eef2ff;
}

.ss-guided-expand-all-btn[disabled] {
	cursor: default;
	opacity: 0.7;
}

.ss-guided-outline-list {
	margin: 0;
	padding-left: 1.25rem;
}

.ss-guided-outline-list li {
	margin: 0 0 0.4rem;
}

.ss-guided-outline-list a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #1a1a1a;
	text-decoration: underline;
}

/* The check mark is always in the DOM (never added or removed), just hidden with visibility so
   its own accessible name never disappears out from under a screen reader mid read. */
.ss-guided-outline-check {
	color: #1a8a3d;
	font-weight: 700;
	visibility: hidden;
}

.ss-guided-outline-list li.is-done .ss-guided-outline-check {
	visibility: visible;
}

/* ---------------------------------------------------------------------------------------------
 * The mark complete button and done tag at the end of every gated section.
 * ------------------------------------------------------------------------------------------- */
.ss-guided-section-footer {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px dashed #d8d8d8;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.ss-guided-mark-btn {
	padding: 0.55rem 1rem;
	border: 1px solid #2454d6;
	border-radius: 6px;
	background: #2454d6;
	color: #ffffff;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.ss-guided-mark-btn.is-done {
	background: #ffffff;
	color: #2454d6;
}

.ss-guided-done-tag {
	font-size: 0.85rem;
	font-weight: 700;
	color: #1a8a3d;
}

/* Visible focus everywhere the reader can land with a keyboard. */
.ss-guided-mark-btn:focus-visible,
.ss-guided-expand-all-btn:focus-visible,
.ss-guided-outline-list a:focus-visible {
	outline: 3px solid #ffb400;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
 * End of article summary. This plugin never authors the summary markup itself; it only styles
 * and completes whatever "ss-summary" block the article carries (or, if the article has none,
 * a minimal one the script generates so the completion state still has somewhere to appear).
 * ------------------------------------------------------------------------------------------- */
.ss-summary {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	background: #fafafa;
}

.ss-summary.is-complete {
	border-color: #1a8a3d;
	background: #f0fbf3;
}

.ss-guided-summary-note {
	margin: 0.5rem 0 0;
	font-weight: 600;
}