/* Snap PDF Accessibility — ADA 2.0 viewer styles
   Color pairs are AAA. Every interactive element declares BOTH background and
   text color in EVERY state. Hover always darkens the accent (never lightens)
   so white toolbar text keeps its contrast. */

:root {
	--spa-accent: #1b3a6b;
	--spa-accent-text: #ffffff;
	--spa-ink: #14213d;
	--spa-paper: #ffffff;
	--spa-line: #d5dbe6;
	--spa-focus: #0b5fff;
}

html.spa-locked { overflow: hidden; }

.spa-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	background: #f4f6fb;
	overflow: hidden; /* modal contains its own scroll region */
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--spa-ink);
}

/* ---------- toolbar ---------- */

.spa-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 10px 14px;
	background: var(--spa-accent);
	color: var(--spa-accent-text);
	border-bottom: 3px solid rgba(0, 0, 0, .25);
}

.spa-toolbar__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--spa-accent-text);
	flex: 1 1 180px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spa-toolbar__controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.spa-pageind {
	color: var(--spa-accent-text);
	font-size: .9rem;
	min-width: 6ch;
	text-align: center;
}

/* Toolbar buttons: base bg = accent, text = accent-text; hover darkens. */
.spa-toolbar__btn,
.spa-toolbar__close {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 8px;
	background: var(--spa-accent);
	color: var(--spa-accent-text);
	font-size: .88rem;
	line-height: 1;
	cursor: pointer;
}
.spa-toolbar__btn:hover,
.spa-toolbar__close:hover {
	background: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)), var(--spa-accent);
	color: var(--spa-accent-text);
}
.spa-toolbar__btn:focus-visible,
.spa-toolbar__close:focus-visible {
	background: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)), var(--spa-accent);
	color: var(--spa-accent-text);
	outline: 3px solid #ffd54a;
	outline-offset: 2px;
}
.spa-toolbar__btn:active,
.spa-toolbar__close:active {
	background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, .34)), var(--spa-accent);
	color: var(--spa-accent-text);
}
.spa-toolbar__btn:disabled {
	background: #3a4658;
	color: var(--spa-accent-text);
	border-color: rgba(255, 255, 255, .3);
	cursor: not-allowed;
}
.spa-toolbar__close { margin-left: auto; }
.spa-dl { text-decoration: none; }

/* ---------- page-view / text-view toggle ---------- */

.spa-toggle {
	display: inline-flex;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 8px;
	overflow: hidden;
}
.spa-toggle__btn {
	padding: 8px 12px;
	border: 0;
	background: var(--spa-paper);
	color: var(--spa-accent);
	font-size: .85rem;
	cursor: pointer;
}
.spa-toggle__btn:hover {
	background: var(--spa-accent);
	color: var(--spa-accent-text);
}
.spa-toggle__btn:focus-visible {
	background: var(--spa-accent);
	color: var(--spa-accent-text);
	outline: 3px solid #ffd54a;
	outline-offset: -3px;
}
.spa-toggle__btn[aria-pressed="true"] {
	background: var(--spa-accent);
	color: var(--spa-accent-text);
	font-weight: 600;
}

/* ---------- stage ---------- */

.spa-stage {
	flex: 1 1 auto;
	overflow: auto;
	padding: 20px;
	display: flex;
	justify-content: center;
}
.spa-canvaswrap {
	position: relative;
	background: var(--spa-paper);
	box-shadow: 0 6px 22px rgba(20, 33, 61, .18);
	align-self: flex-start;
}
.spa-canvas { display: block; }
.spa-textlayer { position: absolute; inset: 0; }

/* ---------- reflowable text view ---------- */

.spa-textview {
	max-width: 780px;
	width: 100%;
	background: var(--spa-paper);
	color: var(--spa-ink);
	padding: 28px 32px;
	border: 1px solid var(--spa-line);
	border-radius: 10px;
	line-height: 1.65;
	font-size: 1.05rem;
	align-self: flex-start;
}
.spa-textview:focus-visible { outline: 3px solid var(--spa-focus); outline-offset: 3px; }
.spa-textpage { margin: 0 0 26px; }
.spa-textpage__h {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #46566b;
	border-bottom: 1px solid var(--spa-line);
	padding-bottom: 4px;
	margin: 0 0 10px;
}
.spa-textview p { margin: 0 0 .8em; }

.spa-notext {
	border: 2px solid #8a3a00;
	background: #fff4ea;
	color: #5c2a00;
	padding: 18px 20px;
	border-radius: 10px;
}
.spa-notext p { margin: 0 0 12px; }
.spa-ocr-note { color: #5c2a00; font-style: italic; }
.spa-error { color: #6a1010; }

/* ---------- shared buttons (solid / ghost) ---------- */

.spa-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
}
.spa-btn--solid {
	background: var(--spa-accent);
	color: var(--spa-accent-text);
	border-color: var(--spa-accent);
}
.spa-btn--solid:hover {
	background: #12294d;
	color: var(--spa-accent-text);
	border-color: #12294d;
}
.spa-btn--solid:focus-visible {
	background: #12294d;
	color: var(--spa-accent-text);
	border-color: #12294d;
	outline: 3px solid var(--spa-focus);
	outline-offset: 2px;
}
.spa-btn--solid:active {
	background: #0d1f3a;
	color: var(--spa-accent-text);
	border-color: #0d1f3a;
}
.spa-btn--solid:disabled {
	background: #3a4658;
	color: #ffffff;
	border-color: #3a4658;
	cursor: not-allowed;
}
.spa-btn--ghost {
	background: #ffffff;
	color: #12294d;
	border-color: #12294d;
}
.spa-btn--ghost:hover {
	background: #eef2f8;
	color: #0d1f3a;
	border-color: #0d1f3a;
}
.spa-btn--ghost:focus-visible {
	background: #eef2f8;
	color: #0d1f3a;
	border-color: #0d1f3a;
	outline: 3px solid var(--spa-focus);
	outline-offset: 2px;
}

/* ---------- external-link confirm modal ---------- */

.spa-confirm {
	position: fixed;
	inset: 0;
	z-index: 1000000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 23, 42, .6);
	padding: 20px;
}
.spa-confirm__box {
	background: #ffffff;
	color: var(--spa-ink);
	max-width: 480px;
	width: 100%;
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.spa-confirm__box h2 { margin: 0 0 10px; font-size: 1.1rem; color: var(--spa-ink); }
.spa-confirm__url {
	word-break: break-all;
	background: #f1f4f9;
	color: #12294d;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: .9rem;
	margin: 0 0 18px;
}
.spa-confirm__actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- high-contrast mode ---------- */

.spa-overlay--hc { background: #000000; }
.spa-overlay--hc .spa-toolbar { background: #000000; color: #ffffff; border-bottom-color: #ffffff; }
.spa-overlay--hc .spa-toolbar__title,
.spa-overlay--hc .spa-pageind { color: #ffffff; }
.spa-overlay--hc .spa-toolbar__btn,
.spa-overlay--hc .spa-toolbar__close {
	background: #000000;
	color: #ffff00;
	border-color: #ffff00;
}
.spa-overlay--hc .spa-toolbar__btn:hover,
.spa-overlay--hc .spa-toolbar__close:hover {
	background: #ffff00;
	color: #000000;
}
.spa-overlay--hc .spa-toggle__btn { background: #000000; color: #ffff00; }
.spa-overlay--hc .spa-toggle__btn[aria-pressed="true"] { background: #ffff00; color: #000000; }
.spa-overlay--hc .spa-textview {
	background: #000000;
	color: #ffffff;
	border-color: #ffffff;
}
.spa-overlay--hc .spa-textpage__h { color: #ffff00; border-bottom-color: #666666; }

/* ---------- shortcode document list ---------- */

.spa-doclist { margin: 1.5em 0; }
.spa-doclist__title { margin: 0 0 .6em; }
.spa-doclist__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.spa-open-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border: 2px solid var(--spa-line);
	border-radius: 10px;
	background: #ffffff;
	color: #12294d;
	font-size: 1rem;
	cursor: pointer;
}
.spa-open-btn:hover {
	background: var(--spa-accent);
	color: var(--spa-accent-text);
	border-color: var(--spa-accent);
}
.spa-open-btn:focus-visible {
	background: var(--spa-accent);
	color: var(--spa-accent-text);
	border-color: var(--spa-accent);
	outline: 3px solid var(--spa-focus);
	outline-offset: 2px;
}
.spa-open-btn__icon { flex: 0 0 auto; display: inline-flex; }
.spa-open-btn__label { flex: 1 1 auto; }

/* screen-reader-only utility (in case theme lacks it) */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
	.spa-toolbar__title { flex-basis: 100%; }
	.spa-textview { padding: 20px; }
}

/* ============================================================
   Theme-proofing (v2.0.1)
   Municipal host themes frequently set button/link text colors
   (e.g. red #d3273e) that cascade into this fixed overlay and wreck
   contrast — including the SVG icons, which inherit via currentColor.
   Force the intended AAA pairs so no host theme can override them.
   ============================================================ */
.spa-overlay .spa-toolbar__title,
.spa-overlay .spa-pageind { color: var(--spa-accent-text) !important; }

.spa-overlay .spa-toolbar__btn,
.spa-overlay .spa-toolbar__close,
.spa-overlay a.spa-dl {
	background: var(--spa-accent) !important;
	color: var(--spa-accent-text) !important;
	border-color: rgba(255, 255, 255, .55) !important;
	text-decoration: none !important;
}
.spa-overlay .spa-toolbar__btn:hover,
.spa-overlay .spa-toolbar__close:hover,
.spa-overlay a.spa-dl:hover,
.spa-overlay .spa-toolbar__btn:focus-visible,
.spa-overlay .spa-toolbar__close:focus-visible,
.spa-overlay a.spa-dl:focus-visible {
	background: linear-gradient(rgba(0, 0, 0, .22), rgba(0, 0, 0, .22)), var(--spa-accent) !important;
	color: var(--spa-accent-text) !important;
}
.spa-overlay .spa-toolbar__btn:focus-visible,
.spa-overlay .spa-toolbar__close:focus-visible,
.spa-overlay a.spa-dl:focus-visible { outline: 3px solid #ffd54a !important; outline-offset: 2px; }
.spa-overlay .spa-toolbar__btn:disabled { background: #3a4658 !important; color: #ffffff !important; }

.spa-overlay .spa-toggle__btn { background: #ffffff !important; color: var(--spa-accent) !important; }
.spa-overlay .spa-toggle__btn:hover,
.spa-overlay .spa-toggle__btn:focus-visible,
.spa-overlay .spa-toggle__btn[aria-pressed="true"] {
	background: var(--spa-accent) !important;
	color: var(--spa-accent-text) !important;
}

/* High-contrast mode must still win over the forced defaults above */
.spa-overlay.spa-overlay--hc .spa-toolbar__btn,
.spa-overlay.spa-overlay--hc .spa-toolbar__close,
.spa-overlay.spa-overlay--hc a.spa-dl { background: #000 !important; color: #ff0 !important; border-color: #ff0 !important; }
.spa-overlay.spa-overlay--hc .spa-toolbar__btn:hover,
.spa-overlay.spa-overlay--hc .spa-toolbar__close:hover,
.spa-overlay.spa-overlay--hc a.spa-dl:hover { background: #ff0 !important; color: #000 !important; }
.spa-overlay.spa-overlay--hc .spa-toolbar__title,
.spa-overlay.spa-overlay--hc .spa-pageind { color: #fff !important; }
.spa-overlay.spa-overlay--hc .spa-toggle__btn { background: #000 !important; color: #ff0 !important; }
.spa-overlay.spa-overlay--hc .spa-toggle__btn[aria-pressed="true"] { background: #ff0 !important; color: #000 !important; }

/* ---- Accessible HTML alternative links (v2.1.0) ---- */
.spa-overlay a.spa-htmlbtn { text-decoration: none !important; }

.spa-html-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 2px 4px;
	font-size: .85rem;
	font-weight: 600;
}
.spa-html-link:link { color: #12294d; }
.spa-html-link:visited { color: #3a2a6b; }
.spa-html-link:hover { color: #0d1f3a; text-decoration: underline; }
.spa-html-link:active { color: #0d1f3a; }
.spa-html-link:focus-visible { outline: 3px solid var(--spa-focus); outline-offset: 2px; }

.spa-inline-html-wrap { white-space: nowrap; }
.spa-inline-html:link { color: #12294d; font-weight: 600; }
.spa-inline-html:visited { color: #3a2a6b; }
.spa-inline-html:hover { color: #0d1f3a; }
.spa-inline-html:active { color: #0d1f3a; }
.spa-inline-html:focus-visible { outline: 3px solid var(--spa-focus); outline-offset: 2px; }