/* PPCS Self Check — mobile-first interactive self-assessment.
   All styles scoped under .tlp-sc so nothing leaks into the rest of the page. */

/* Registered custom properties so the slider colour/position glide smoothly.
   Browsers without @property simply jump between states — still fully usable. */
@property --pct  { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --mixp { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --frac { syntax: '<number>';     inherits: true; initial-value: 0;  }

.tlp-sc{
	--sc-teal:#4b858e;
	--sc-teal-d:#3a6a72;
	--sc-teal-l:#e9f1f2;
	--sc-ink:#3a3a3a;
	--sc-grey:#6a6a6a;
	--sc-line:#dfe5e6;
	--sc-track:#e2e8e9;
	--sc-thumb0:#c3ced0;
	--sc-warm:#c07f46;
	--sc-warm-d:#a56a37;
	--sc-shadow:0 10px 30px -14px rgba(37,66,71,.35);

	font-family:Poppins,Helvetica,Arial,sans-serif;
	color:var(--sc-grey);
	max-width:760px;
	margin:0 auto;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	text-align:left;

	/* the card — same treatment as the design preview */
	background:#fff;
	border:1px solid #e8eeee;
	border-radius:22px;
	padding:clamp(26px, 4vw, 38px) clamp(20px, 5vw, 40px) clamp(30px, 4.5vw, 42px);
	box-shadow:0 24px 60px -30px rgba(37,66,71,.4);
}
.tlp-sc *{box-sizing:border-box}
/* the hidden attribute always wins, even over our own display rules */
.tlp-sc [hidden]{display:none !important}

/* ---------- header (all type fluid via clamp) ---------- */
.tlp-sc__eyebrow{
	text-transform:uppercase;letter-spacing:.18em;
	font-size:clamp(.66rem, .62rem + .2vw, .78rem);font-weight:700;
	color:var(--sc-teal);margin:0 0 .35em;
}
/* the !importants are deliberate: the site theme sets headings in ZoojaPro,
   uppercase — this title must stay Poppins, sentence case, our size. */
.tlp-sc__title{
	font-family:Poppins,Helvetica,Arial,sans-serif !important;
	font-size:clamp(2.2rem, 2.1rem + 1.5vw, 3.25rem) !important;
	line-height:1.12 !important;
	font-weight:700 !important;
	text-transform:none !important;
	letter-spacing:normal !important;
	color:var(--sc-ink) !important;
	margin:0 0 .45em;padding:0;
	text-wrap:balance;
}
.tlp-sc__ref{font-size:clamp(.72rem, .7rem + .15vw, .8rem);line-height:1.55;color:#8a8a8a;margin:0 0 1.1em}
.tlp-sc__ref a{color:var(--sc-teal);text-decoration:underline}
.tlp-sc__intro{font-size:clamp(.92rem, .88rem + .3vw, 1.05rem);color:var(--sc-ink);margin:0 0 .6em;font-weight:500}
.tlp-sc__note{font-size:clamp(.78rem, .76rem + .15vw, .86rem);color:#8a9697;margin:0 0 .7em;line-height:1.55}

/* "About this check": the citation and housekeeping, one tap away */
.tlp-sc__about{margin:0 0 1.4em}
.tlp-sc__about summary{
	cursor:pointer;display:inline-block;
	font-size:clamp(.78rem, .76rem + .15vw, .86rem);font-weight:600;color:var(--sc-teal-d);
	text-decoration:underline;text-underline-offset:3px;
}
.tlp-sc__about summary::-webkit-details-marker{display:none}
.tlp-sc__about summary::marker{content:""}
.tlp-sc__about[open] summary{margin-bottom:.6em;text-decoration:none}
.tlp-sc__about .tlp-sc__ref{margin-bottom:0}

/* ---------- steps: three dots + "1 of 3" ---------- */
.tlp-sc__steps{display:flex;align-items:center;gap:.7em;margin:0 0 1em}
.tlp-sc__step-dots{display:flex;gap:.45em;align-items:center}
.tlp-sc__step-dots i{width:8px;height:8px;border-radius:50%;background:var(--sc-line);transition:background .3s}
.tlp-sc__step-dots i.is-on{background:var(--sc-teal)}
.tlp-sc__steps-label{font-size:clamp(.72rem, .7rem + .15vw, .8rem);font-weight:600;color:#8a9697}

/* ---------- the questions: a plain open list, whitespace only ----------
   The hard zeroes are deliberate: host environments (page builders, preview
   wrappers) sometimes style bare form/p elements — nothing may indent these. */
.tlp-sc__form{margin:0 !important;padding:0 !important;border:0;background:none}
.tlp-sc__page{display:grid;gap:.5em;margin:0;padding:0}
.tlp-sc__page[hidden]{display:none}
.tlp-sc__page:not([hidden]){animation:tlpsc-pagein .35s ease}
@keyframes tlpsc-pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tlp-sc__q{margin:0 !important;padding:0 !important}

/* question line: text left, live answer word on the same line, right.
   The question balances across two even lines when long, and the answer column
   is always reserved, so rating never reflows the text or shifts the slider. */
.tlp-sc__q-text{
	display:flex;align-items:baseline;gap:.75em;
	padding:0 !important;margin:0 0 .3em !important;
	font-size:clamp(.9rem, .86rem + .3vw, 1.02rem);
	font-weight:600;color:var(--sc-ink);line-height:1.4;
}
.tlp-sc__q-word{flex:1 1 auto;min-width:0;text-wrap:balance;transition:color .3s}
/* after a failed submit, unanswered questions read amber */
.tlp-sc__q.is-missed .tlp-sc__q-word{color:var(--sc-warm-d)}

/* ---------- slider row (full width — flush with the question text) ---------- */
.tlp-sc__slider{display:flex;align-items:center;margin:0 !important;padding:0 !important}
.tlp-sc__track-wrap{position:relative;flex:1 1 auto;min-width:0;display:flex;margin:0;padding:0}

.tlp-sc__range{
	--pct:0%;--mixp:0%;
	-webkit-appearance:none;appearance:none;
	width:100%;height:44px;background:transparent;cursor:pointer;margin:0;padding:0;
	transition:--pct .25s ease,--mixp .25s ease; /* smooth fill where @property is supported */
}
.tlp-sc__range:focus{outline:none}

/* track — fill colour blends from neutral grey to teal as the rating rises */
.tlp-sc__range::-webkit-slider-runnable-track{
	height:8px;border-radius:99px;
	background:linear-gradient(90deg,
		var(--sc-teal) 0 var(--pct),
		var(--sc-track) var(--pct) 100%);
}
.tlp-sc__range::-moz-range-track{height:8px;border-radius:99px;background:var(--sc-track)}
.tlp-sc__range::-moz-range-progress{height:8px;border-radius:99px;background:var(--sc-teal)}
@supports (color: color-mix(in oklab, red 50%, blue)){
	.tlp-sc__range::-webkit-slider-runnable-track{
		background:linear-gradient(90deg,
			color-mix(in oklab, var(--sc-teal) var(--mixp), var(--sc-thumb0)) 0 var(--pct),
			var(--sc-track) var(--pct) 100%);
	}
	.tlp-sc__range::-moz-range-progress{background:color-mix(in oklab, var(--sc-teal) var(--mixp), var(--sc-thumb0))}
}

/* native thumb is the invisible hit area — the numbered dot below is the visual */
.tlp-sc__range::-webkit-slider-thumb{
	-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
	background:transparent;border:0;box-shadow:none;margin-top:-9px;
}
.tlp-sc__range::-moz-range-thumb{
	width:26px;height:26px;border-radius:50%;background:transparent;border:0;box-shadow:none;
}

/* the numbered dot — glides with the value, colour blends grey -> teal.
   The vars are set inline on this element by the script; `left` and
   `background-color` are standard properties, so the glide/blend animate in
   every browser (no @property dependency). */
.tlp-sc__tnum{
	--frac:0;--mixp:0%;
	position:absolute;top:50%;
	left:calc((100% - 26px) * var(--frac, 0) + 13px);
	transform:translate(-50%,-50%);
	width:26px;height:26px;border-radius:50%;
	display:grid;place-items:center;
	background:var(--sc-thumb0);
	border:3px solid #fff;
	box-shadow:0 2px 6px rgba(37,66,71,.35);
	font-size:.68rem;font-weight:700;color:#5c6e71;
	pointer-events:none;
	transition:left .25s ease,background-color .25s ease,color .25s,transform .15s;
}
@supports (color: color-mix(in oklab, red 50%, blue)){
	.tlp-sc__tnum{background:color-mix(in oklab, var(--sc-teal) var(--mixp, 0%), var(--sc-thumb0))}
}
.tlp-sc__q.is-answered .tlp-sc__tnum{color:#fff}
/* not yet placed: a hollow dashed marker waiting at the 1-position — the track
   itself always reads 1 (far left) to 7 (far right) */
.tlp-sc__q:not(.is-answered) .tlp-sc__tnum{
	background:#fff;
	border:2px dashed #b9c6c8;
	box-shadow:none;
}
.tlp-sc__range:active + .tlp-sc__tnum{transform:translate(-50%,-50%) scale(1.15)}
.tlp-sc__range:focus-visible + .tlp-sc__tnum{box-shadow:0 0 0 4px rgba(75,133,142,.4),0 2px 6px rgba(37,66,71,.35)}

/* fallback when color-mix is unavailable: answered = solid teal */
@supports not (color: color-mix(in oklab, red 50%, blue)){
	.tlp-sc__q.is-answered .tlp-sc__tnum{background:var(--sc-teal)}
}

/* live word ("often") on the question line, right-aligned. Width is reserved
   even while empty so the question never rewraps when the word appears. */
.tlp-sc__val{
	flex:0 0 auto;min-width:7em;text-align:right;white-space:nowrap;
	font-size:clamp(.78rem, .76rem + .2vw, .88rem);
	font-weight:700;color:var(--sc-teal-d);line-height:1.2;
}

/* ---------- CTA ---------- */
.tlp-sc__cta{margin:1.4em 0 0;text-align:center}
.tlp-sc__nav{display:flex;gap:.7em;justify-content:center;align-items:stretch}
.tlp-sc__back{
	appearance:none;cursor:pointer;font-family:inherit;
	background:transparent;border:1.5px solid var(--sc-teal);color:var(--sc-teal-d);
	font-weight:700;font-size:clamp(.95rem, .92rem + .25vw, 1.05rem);
	padding:.9em 1.6em;border-radius:99px;
	transition:background .2s,transform .2s;
}
.tlp-sc__back:hover{background:var(--sc-teal-l);transform:translateY(-2px)}
.tlp-sc__submit{
	appearance:none;border:0;cursor:pointer;font-family:inherit;
	background:var(--sc-teal);color:#fff;font-weight:700;
	font-size:clamp(.95rem, .92rem + .25vw, 1.05rem);
	padding:.95em 2.2em;border-radius:99px;flex:0 1 340px;min-width:0;
	box-shadow:var(--sc-shadow);
	transition:transform .2s,background .2s,box-shadow .2s,opacity .2s;
}
.tlp-sc__submit:hover{background:var(--sc-teal-d);transform:translateY(-2px)}
.tlp-sc__submit:active{transform:translateY(0)}
.tlp-sc__submit.is-nudge{animation:tlpsc-shake .4s}
@keyframes tlpsc-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.tlp-sc__hint{margin:.75em 0 0;font-size:.83rem;color:var(--sc-warm-d);font-weight:600}
.tlp-sc__privacy{margin:.9em auto 0;font-size:.76rem;color:#9aa4a5;max-width:42ch;text-align:center}

/* ---------- the result view: score first, everything else steps aside ---------- */
.tlp-sc.is-result .tlp-sc__intro,
.tlp-sc.is-result .tlp-sc__about{display:none}
.tlp-sc.is-result .tlp-sc__cta{margin:0 0 .8em;text-align:left}
.tlp-sc.is-result .tlp-sc__nav{justify-content:flex-start}
.tlp-sc.is-result .tlp-sc__back{
	background:none;border:0;padding:.2em 0;
	font-size:clamp(.8rem, .78rem + .15vw, .9rem);font-weight:600;
	color:var(--sc-teal-d);text-decoration:underline;text-underline-offset:3px;
}
.tlp-sc.is-result .tlp-sc__back:hover{background:none;transform:none;color:var(--sc-teal)}
/* the share link when it sits inside the results card */
.tlp-sc__results .tlp-sc__share-btn{display:block;margin:.2em auto 1.1em}

/* share-the-test — a quiet text action; shares the page link, never answers */
.tlp-sc__share-btn{
	appearance:none;background:none;border:0;cursor:pointer;font-family:inherit;
	margin:1em auto 0;display:inline-block;padding:.4em .6em;
	color:var(--sc-teal-d);font-weight:600;
	font-size:clamp(.8rem, .78rem + .15vw, .9rem);
	text-decoration:underline;text-underline-offset:3px;
	transition:color .2s;
}
.tlp-sc__share-btn:hover{color:var(--sc-teal)}
.tlp-sc__share-btn.is-copied{color:var(--sc-teal);text-decoration:none;font-weight:700}

/* ---------- results ---------- */
.tlp-sc__results{
	margin-top:1.4em;padding:1.5em 1.25em 1.6em;border-radius:20px;
	background:linear-gradient(180deg,#fff,#f7fafa);
	border:1px solid var(--sc-line);box-shadow:var(--sc-shadow);
	text-align:center;
}
.tlp-sc__results[hidden]{display:none}
.tlp-sc__results.is-in{animation:tlpsc-reveal .6s cubic-bezier(.22,1,.36,1) both}
@keyframes tlpsc-reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.tlp-sc__score{font-weight:800;line-height:1;color:var(--sc-ink);margin-bottom:.6em}
.tlp-sc__score-num{font-size:clamp(2.9rem, 2.5rem + 2.2vw, 4.2rem);color:var(--sc-teal);letter-spacing:-.02em}
.tlp-sc.is-above .tlp-sc__score-num{color:var(--sc-warm)}
.tlp-sc__score-max{font-size:clamp(1.1rem, 1rem + .5vw, 1.35rem);color:#a9b3b4;font-weight:700}

/* gauge */
.tlp-sc__gauge{max-width:460px;margin:0 auto 1.4em}
.tlp-sc__gauge-track{
	position:relative;height:14px;border-radius:99px;overflow:visible;
	background:var(--sc-line);margin:1.5em 0 .1em;
}
.tlp-sc__gauge-fill{
	position:absolute;left:0;top:0;height:100%;width:0;border-radius:99px;
	background:linear-gradient(90deg,var(--sc-teal),#6ba7b0);
	transition:width 1s cubic-bezier(.22,1,.36,1) .15s,background .4s;
}
.tlp-sc.is-above .tlp-sc__gauge-fill{background:linear-gradient(90deg,var(--sc-teal),var(--sc-warm))}
.tlp-sc__gauge-mark{position:absolute;top:-9px;bottom:-9px;width:2px;background:var(--sc-ink);opacity:.55;transform:translateX(-1px)}
.tlp-sc__gauge-mark-label{
	position:absolute;top:-1.9em;left:50%;transform:translateX(-50%);
	font-size:.72rem;font-weight:700;color:var(--sc-ink);white-space:nowrap;
}
.tlp-sc__gauge-mark-label::after{content:" · problematic";color:#9aa4a5;font-weight:600}
.tlp-sc__gauge-ends{display:flex;justify-content:space-between;margin-top:.5em;font-size:.72rem;color:#9aa4a5}

.tlp-sc__verdict-head{
	font-family:Poppins,sans-serif !important;
	font-size:clamp(1.1rem, 1.05rem + .5vw, 1.35rem) !important;
	font-weight:700 !important;text-transform:none !important;letter-spacing:normal !important;
	color:var(--sc-ink);margin:0 0 .4em;
}
.tlp-sc__verdict-body{font-size:clamp(.9rem, .87rem + .3vw, 1rem);color:var(--sc-grey);margin:0 auto 1.3em;max-width:44ch}

/* anonymous opt-in card — consent moment, shown with the result */
.tlp-sc__optin{
	background:var(--sc-teal-l);border-radius:14px;
	padding:1.05em 1.2em 1.15em;margin:0 auto 1.3em;max-width:52ch;
}
.tlp-sc__optin-text{margin:0 0 .8em;font-size:clamp(.84rem, .82rem + .2vw, .92rem);color:var(--sc-teal-d);font-weight:500;line-height:1.55}
.tlp-sc__optin.is-done .tlp-sc__optin-text{margin:0;font-weight:600}

/* stage two: one question at a time, the third answer sends */
.tlp-sc__optin-sub{margin:0 0 .9em;font-size:clamp(.76rem, .74rem + .15vw, .84rem);color:#7f9296;line-height:1.5}
.tlp-sc__optin.is-done .tlp-sc__optin-sub{display:none}
.tlp-sc__optin-flow[hidden]{display:none}
.tlp-sc__optin-extra[hidden]{display:none}
.tlp-sc__optin-extra:not([hidden]){animation:tlpsc-pagein .22s ease}
.tlp-sc__optin-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.75em}
.tlp-sc__optin-count{font-size:.74rem;font-weight:600;color:#8a9697}
.tlp-sc__optin-cancel{
	appearance:none;background:none;border:0;cursor:pointer;font-family:inherit;
	font-size:.78rem;font-weight:600;color:var(--sc-teal-d);
	text-decoration:underline;text-underline-offset:3px;padding:.2em;
}
.tlp-sc__optin-cancel:hover{color:var(--sc-teal)}
.tlp-sc__optin-extras{display:grid;gap:.85em;margin:0;text-align:left}
.tlp-sc__optin-extra-label{
	display:block;margin:0 0 .4em;
	font-size:clamp(.78rem, .76rem + .15vw, .86rem);font-weight:600;color:var(--sc-teal-d);
}
.tlp-sc__pills{display:flex;flex-wrap:wrap;gap:.4em}
.tlp-sc__pill{position:relative;cursor:pointer}
.tlp-sc__pill input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;top:0;left:0}
.tlp-sc__pill span{
	display:inline-block;padding:.45em 1em;border-radius:99px;
	font-size:clamp(.76rem, .74rem + .15vw, .84rem);font-weight:600;line-height:1.3;
	background:#fff;border:1.5px solid var(--sc-line);color:var(--sc-grey);
	transition:background .2s,border-color .2s,color .2s;
}
.tlp-sc__pill:hover span{border-color:var(--sc-teal);color:var(--sc-teal-d)}
.tlp-sc__pill input:checked + span{background:var(--sc-teal);border-color:var(--sc-teal);color:#fff}
.tlp-sc__pill input:focus-visible + span{outline:3px solid rgba(75,133,142,.45);outline-offset:1px}
.tlp-sc__optin-actions{display:flex;gap:.9em;justify-content:center;align-items:center;flex-wrap:wrap}
.tlp-sc__optin-yes{
	appearance:none;border:0;cursor:pointer;font-family:inherit;
	background:var(--sc-teal);color:#fff;font-weight:700;
	font-size:clamp(.84rem, .82rem + .2vw, .92rem);
	padding:.65em 1.5em;border-radius:99px;
	transition:background .2s,transform .2s,opacity .2s;
}
.tlp-sc__optin-yes:hover{background:var(--sc-teal-d);transform:translateY(-1px)}
.tlp-sc__optin-yes:disabled{opacity:.6;cursor:default;transform:none}
.tlp-sc__optin-no{
	appearance:none;background:none;border:0;cursor:pointer;font-family:inherit;
	color:var(--sc-teal-d);font-weight:600;font-size:clamp(.8rem, .78rem + .15vw, .88rem);
	text-decoration:underline;text-underline-offset:3px;padding:.4em;
}
.tlp-sc__optin-no:disabled{opacity:.6;cursor:default}

.tlp-sc__help{display:flex;flex-direction:column;gap:.6em;max-width:340px;margin:0 auto 1.1em}
.tlp-sc__btn{
	display:block;text-decoration:none;font-weight:700;font-size:.98rem;
	padding:.85em 1.4em;border-radius:99px;transition:transform .2s,background .2s,color .2s;
}
.tlp-sc__btn--solid{background:var(--sc-teal);color:#fff}
.tlp-sc__btn--solid:hover{background:var(--sc-teal-d);color:#fff;transform:translateY(-2px)}
.tlp-sc__btn--ghost{background:transparent;color:var(--sc-teal-d);border:1.5px solid var(--sc-teal)}
.tlp-sc__btn--ghost:hover{background:var(--sc-teal-l);transform:translateY(-2px)}

.tlp-sc__disclaimer{font-size:.78rem;color:#9aa4a5;margin:0 auto 1.2em;max-width:40ch}
.tlp-sc__restart{
	appearance:none;background:transparent;border:0;cursor:pointer;font-family:inherit;
	color:var(--sc-teal-d);font-weight:700;font-size:.9rem;text-decoration:underline;padding:.3em;
}
.tlp-sc__restart:hover{color:var(--sc-teal)}

/* reveal-on-scroll for rows (opacity only — rows share one box) */
.tlp-sc.js .tlp-sc__q{opacity:0;transition:opacity .5s ease,border-color .3s}
.tlp-sc.js .tlp-sc__q.is-visible{opacity:1}

/* ---------- wider screens (type is fluid; only layout changes here) ---------- */
@media (min-width:600px){
	.tlp-sc__help{flex-direction:row;max-width:none;justify-content:center}
	.tlp-sc__btn{flex:0 1 auto;min-width:200px}
}

@media (prefers-reduced-motion:reduce){
	.tlp-sc *{animation:none !important;transition:none !important}
	.tlp-sc.js .tlp-sc__q{opacity:1}
}