/**
 * Threshold — front-end styles.
 * Editorial DSGN: sharp black/white. System fonts only — no external requests.
 *
 * Two parts:
 *  1. The panel UI  (hardened: ID-scoped reset + ID-prefixed rules so host
 *     themes cannot bleed styles into the widget).
 *  2. The actual preference EFFECTS — these change the host page for real.
 */

:root {
	--thr-ink: #121210;
	--thr-paper: #ffffff;
	--thr-muted: #56554e;
	--thr-hair: rgba(18, 18, 16, .12);
	--thr-amber: #ba7517;
	--thr-green: #2f7d4f;
	--thr-red: #b4453a;
	--thr-font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================================
 * ISOLATION RESET
 * Themes style bare elements (button, a, p, input…) with selectors that
 * are more specific than a plain class, and their values inherit into the
 * widget. We neutralise that here, scoped to #threshold-root, then re-apply
 * our own look with #threshold-root-prefixed rules (ID specificity) below.
 * Layout-critical `display` is intentionally NOT reset — our own rules set it.
 * ===================================================================== */
#threshold-root, #threshold-root *, #threshold-root *::before, #threshold-root *::after {
	box-sizing: border-box;
}
#threshold-root {
	font-family: var(--thr-font);
	font-size: 15px; font-weight: 400; line-height: 1.4;
	color: var(--thr-ink);
	letter-spacing: normal; word-spacing: normal; text-transform: none;
	text-align: left; text-shadow: none; white-space: normal;
	-webkit-font-smoothing: antialiased;
}
#threshold-root button,
#threshold-root a,
#threshold-root p,
#threshold-root span,
#threshold-root div,
#threshold-root label,
#threshold-root input,
#threshold-root textarea {
	margin: 0; padding: 0; border: 0;
	background: transparent; box-shadow: none; text-shadow: none;
	font: inherit; color: inherit; line-height: inherit;
	letter-spacing: normal; word-spacing: normal; text-transform: none;
	text-decoration: none; text-align: left;
	vertical-align: baseline; border-radius: 0;
	min-width: 0; min-height: 0; max-width: none; max-height: none;
	float: none; position: static; transform: none; transition: none;
}
#threshold-root button {
	-webkit-appearance: none; appearance: none;
	width: auto; height: auto; cursor: pointer; text-align: center;
	overflow: visible;
}
#threshold-root input,
#threshold-root textarea {
	-webkit-appearance: none; appearance: none;
}
#threshold-root svg {
	display: inline-block; vertical-align: middle;
	max-width: none; box-shadow: none;
}
/* Note: never set width/height:auto here. Author CSS beats the HTML width/height
   attributes, which would collapse icons to their intrinsic size. Each icon is
   sized explicitly in its own rule below instead. */
#threshold-root img {
	max-width: none; border: 0; vertical-align: middle; box-shadow: none;
	border-radius: 0; padding: 0;
}

/* ---------- Trigger ---------- */
#threshold-root { position: fixed; z-index: 99990; }
#threshold-root.threshold-pos-bottom-right { right: 20px; bottom: 20px; }
#threshold-root.threshold-pos-bottom-left { left: 20px; bottom: 20px; }

#threshold-root .threshold-trigger {
	width: 48px; height: 48px; border-radius: 999px;
	background: var(--thr-ink); color: #fff;
	border: 0; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	transition: transform .15s ease;
}
#threshold-root .threshold-trigger:hover { transform: translateY(-2px); }
#threshold-root .threshold-trigger svg { width: 24px !important; height: 24px !important; flex: 0 0 auto; }
#threshold-root .threshold-trigger:focus-visible { outline: 3px solid var(--thr-amber); outline-offset: 3px; }

/* ---------- Panel ---------- */
#threshold-root .threshold-panel {
	position: absolute; bottom: 60px;
	width: 360px; max-width: calc(100vw - 40px);
	background: var(--thr-paper); color: var(--thr-ink);
	border: 1px solid var(--thr-ink); border-radius: 14px;
	overflow: hidden;
	font-family: var(--thr-font);
	font-size: 15px; line-height: 1.4;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
#threshold-root.threshold-pos-bottom-right .threshold-panel { right: 0; }
#threshold-root.threshold-pos-bottom-left .threshold-panel { left: 0; }

#threshold-root .threshold-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px; border-bottom: 1px solid var(--thr-ink);
}
#threshold-root .threshold-title { font-family: var(--thr-font); font-size: 17px; font-weight: 500; }
#threshold-root .threshold-close {
	background: 0; border: 0; cursor: pointer;
	font-size: 24px; line-height: 1; color: var(--thr-ink); padding: 0 2px;
}
#threshold-root .threshold-close:focus-visible { outline: 2px solid var(--thr-amber); outline-offset: 2px; }

#threshold-root .threshold-body { padding: 12px 20px 6px; }

#threshold-root .threshold-status {
	display: flex; align-items: center; gap: 8px;
	margin: 4px 0 0; font-size: 13px; color: var(--thr-muted);
}
#threshold-root .threshold-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; background: var(--thr-amber); }
#threshold-root .threshold-dot--full { background: var(--thr-green); }
#threshold-root .threshold-dot--none { background: var(--thr-red); }

#threshold-root .threshold-group {
	font-family: var(--thr-font);
	font-size: 12px; font-weight: 500; letter-spacing: .3px;
	color: var(--thr-muted); margin: 16px 0 0;
}

#threshold-root .threshold-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 0; border-bottom: 1px solid var(--thr-hair);
}
#threshold-root .threshold-row--last { border-bottom: 1px solid var(--thr-ink); }

/* Stepper */
#threshold-root .threshold-stepper { display: flex; align-items: center; gap: 6px; }
#threshold-root .threshold-stepper button {
	width: 30px; height: 30px; border: 1px solid var(--thr-ink); border-radius: 7px;
	background: #fff; color: var(--thr-ink); cursor: pointer; font-size: 14px;
	display: flex; align-items: center; justify-content: center;
}
#threshold-root .threshold-stepper button:hover { background: var(--thr-ink); color: #fff; }
#threshold-root .threshold-stepper button:focus-visible { outline: 2px solid var(--thr-amber); outline-offset: 2px; }

/* Switch */
#threshold-root .threshold-switch {
	width: 40px; height: 23px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
	background: #d9d8d0; position: relative; flex: 0 0 auto; transition: background .15s ease;
}
#threshold-root .threshold-switch[aria-checked="true"] { background: var(--thr-ink); }
#threshold-root .threshold-knob {
	position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
	border-radius: 999px; background: #fff; transition: left .15s ease;
}
#threshold-root .threshold-switch[aria-checked="true"] .threshold-knob { left: 20px; }
#threshold-root .threshold-switch:focus-visible { outline: 2px solid var(--thr-amber); outline-offset: 2px; }

/* Links */
#threshold-root .threshold-link {
	display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
	padding: 13px 0; border: 0; border-bottom: 1px solid var(--thr-hair);
	background: 0; color: var(--thr-ink); text-decoration: none; cursor: pointer;
	font-size: 15px; text-align: left; font-family: var(--thr-font);
}
#threshold-root .threshold-link span[aria-hidden] { font-size: 18px; }
#threshold-root .threshold-link-ico { flex: 0 0 auto; color: var(--thr-ink); width: 17px !important; height: 17px !important; }
#threshold-root .threshold-link:hover span:first-child { text-decoration: underline; }
#threshold-root .threshold-link:focus-visible { outline: 2px solid var(--thr-amber); outline-offset: 2px; }
#threshold-root .threshold-link--btn { border-bottom: 0; }

/* Report form */
#threshold-root .threshold-report { padding: 6px 0 12px; }
#threshold-root .threshold-report textarea,
#threshold-root .threshold-report input {
	width: 100%; box-sizing: border-box; margin-top: 8px;
	border: 1px solid var(--thr-ink); border-radius: 8px; padding: 9px 11px;
	font: inherit; color: var(--thr-ink); background: #fff;
}
#threshold-root .threshold-send {
	margin-top: 8px; width: 100%; padding: 10px; border: 0; border-radius: 8px;
	background: var(--thr-ink); color: #fff; cursor: pointer; font: inherit; font-weight: 500;
}
#threshold-root .threshold-send:focus-visible { outline: 2px solid var(--thr-amber); outline-offset: 2px; }
#threshold-root .threshold-report-feedback { margin: 8px 0 0; font-size: 13px; color: var(--thr-muted); }

/* Footer signature */
#threshold-root .threshold-foot {
	display: flex; align-items: center; gap: 9px;
	padding: 16px 20px; text-decoration: none;
	background: var(--thr-ink);
}
#threshold-root .threshold-foot:hover { background: #000; }
#threshold-root .threshold-foot-mark { flex: 0 0 auto; width: 18px !important; height: 18px !important; }
#threshold-root .threshold-sig-name { font-family: var(--thr-font); font-weight: 500; font-size: 13px; color: #fff; letter-spacing: .2px; margin: 0; }
#threshold-root .threshold-sig-name span { color: #b9b8b1; font-weight: 400; }

#threshold-root .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;
}

/* =====================================================================
 * REAL PREFERENCE EFFECTS — applied to <html data-thr-*> on the host page.
 * These genuinely alter the site; they are not cosmetic.
 * ===================================================================== */

/* 1.4.4 Resize Text and 1.4.12 Text Spacing are both handled in JS (per-element
   inline styles) so they work on px-based themes and reliably beat theme CSS.
   No CSS rules are needed here. */

/* 1.4.1 Use of Color — links no longer rely on color alone. */
html[data-thr-highlight="1"] a:not(.threshold-link):not(.threshold-close) {
	text-decoration: underline !important;
	text-underline-offset: 2px;
	outline: 1px dotted currentColor; outline-offset: 2px;
}

/* 2.2.2 Pause, Stop, Hide — freeze all CSS animation & smooth scroll. */
html[data-thr-pause="1"] *:not(.threshold-knob) {
	animation-play-state: paused !important;
}
html[data-thr-pause="1"] { scroll-behavior: auto !important; }

/* prefers-reduced-motion equivalent — collapse animation/transition durations. */
html[data-thr-reduce="1"] *:not(.threshold-switch):not(.threshold-knob):not(.threshold-trigger) {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	scroll-behavior: auto !important;
}

/* High contrast and negative colours — comfort preferences (perceptual, not a
   compliance claim). Both combine into a single --thr-filter set in JS, applied
   to top-level page content only. The panel is a direct child of <body> and is
   excluded here, so its fixed position is never broken by the filter. */
body > *:not(#threshold-root) {
	filter: var(--thr-filter, none) !important;
}

/* 2.4.7 Focus Visible — make the keyboard focus obvious everywhere. */
html[data-thr-keyboard="1"] a:focus,
html[data-thr-keyboard="1"] button:focus,
html[data-thr-keyboard="1"] input:focus,
html[data-thr-keyboard="1"] select:focus,
html[data-thr-keyboard="1"] textarea:focus,
html[data-thr-keyboard="1"] summary:focus,
html[data-thr-keyboard="1"] [tabindex]:focus,
html[data-thr-keyboard="1"] [role="button"]:focus,
html[data-thr-keyboard="1"] [contenteditable]:focus {
	outline: 3px solid var(--thr-amber) !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* Bigger cursor — a larger pointer for low-vision / motor comfort. */
html[data-thr-cursor="1"],
html[data-thr-cursor="1"] *:not(#threshold-root):not(#threshold-root *) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24'%3E%3Cpath d='M3 2 L3 20 L8 15 L11 21.5 L14 20 L11 13.8 L17.5 13.8 Z' fill='%23121210' stroke='%23ffffff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 3, auto !important;
}

/* Read aloud — hint that blocks of text are clickable to be spoken. */
html[data-thr-readaloud="1"] p:not(#threshold-root *),
html[data-thr-readaloud="1"] :is(h1, h2, h3, h4, h5, h6, li, blockquote):not(#threshold-root *) {
	cursor: pointer;
}

/* The panel must NEVER be affected by any of its own effects. High
   specificity + !important so it wins over the spacing rule above. */
#threshold-root, #threshold-root * {
	letter-spacing: normal !important;
	word-spacing: normal !important;
	filter: none !important;
}