/* ---------------------------------------------------------------------------
   Free tools

   Loaded only on a tool page. Built from the same custom properties as the
   rest of the site, so a change to the brand palette in the admin restyles the
   calculators too and nothing here has to be kept in sync by hand.
   --------------------------------------------------------------------------- */

.sb-tool{
	--tool-gap:clamp(20px,3vw,34px);
	margin:0 0 var(--sb-section);
	container-type:inline-size;
}

.sb-tool__grid{
	display:grid;
	gap:var(--tool-gap);
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:start;
}
.sb-tool__stack{display:grid;gap:var(--tool-gap)}

@media(max-width:900px){
	.sb-tool__grid{grid-template-columns:minmax(0,1fr)}
}

/* --- the form side ------------------------------------------------------ */

.sb-tool__inputs{
	background:var(--sb-surface);
	border:1px solid var(--sb-line);
	border-radius:var(--sb-radius-lg);
	padding:clamp(20px,3vw,30px);
	box-shadow:var(--sb-shadow-sm);
}
.sb-tool__title{font-size:1.28rem;line-height:1.25;margin:0 0 8px}
.sb-tool__lede{color:var(--sb-ink-2);margin:0 0 22px;font-size:.95rem}

.sb-tool__field{margin:0 0 18px}
.sb-tool__field:last-child{margin-bottom:0}
.sb-tool__field label{
	display:block;font-weight:600;font-size:.92rem;
	color:var(--sb-ink);margin:0 0 6px;
}

.sb-tool__input{display:flex;align-items:stretch;position:relative}
.sb-tool__input input,
.sb-tool__field textarea{
	width:100%;
	font:inherit;
	font-size:1rem;
	color:var(--sb-ink);
	background:var(--sb-bg);
	border:1px solid var(--sb-line-strong);
	border-radius:var(--sb-radius);
	padding:11px 13px;
	transition:border-color .16s var(--sb-ease),box-shadow .16s var(--sb-ease);
}
.sb-tool__field textarea{
	font-family:var(--sb-mono);
	font-size:.82rem;
	line-height:1.5;
	resize:vertical;
	min-height:150px;
}
.sb-tool__input input:focus-visible,
.sb-tool__field textarea:focus-visible{
	outline:none;
	border-color:var(--sb-blue);
	box-shadow:0 0 0 3px rgba(var(--sb-blue-rgb),.18);
}

/* Prefix and suffix sit inside the field's border rather than beside it, so a
   currency symbol reads as part of the number instead of as a label. */
.sb-tool__affix{
	display:flex;align-items:center;
	padding:0 12px;
	font-size:.92rem;font-weight:600;
	color:var(--sb-ink-3);
	background:var(--sb-surface-2);
	border:1px solid var(--sb-line-strong);
}
.sb-tool__input--prefixed .sb-tool__affix:first-child{
	border-right:0;border-radius:var(--sb-radius) 0 0 var(--sb-radius);
}
.sb-tool__input--prefixed input{border-top-left-radius:0;border-bottom-left-radius:0}
.sb-tool__input--suffixed .sb-tool__affix:last-child{
	border-left:0;border-radius:0 var(--sb-radius) var(--sb-radius) 0;
}
.sb-tool__input--suffixed input{border-top-right-radius:0;border-bottom-right-radius:0}

.sb-tool__input--colour{gap:10px}
.sb-tool__input--colour input[type=color]{
	width:56px;flex:0 0 56px;padding:4px;cursor:pointer;
}
.sb-tool__input--colour input[type=text]{font-family:var(--sb-mono);text-transform:uppercase}

.sb-tool__hint{
	display:block;margin:6px 0 0;
	font-size:.82rem;line-height:1.45;color:var(--sb-ink-3);
}

.sb-tool__how{
	margin:0 0 22px;padding:14px 16px;
	background:var(--sb-surface-2);border:1px solid var(--sb-line);
	border-radius:var(--sb-radius);font-size:.88rem;
}
.sb-tool__how summary{cursor:pointer;font-weight:600;color:var(--sb-navy)}
.sb-tool__how ol{margin:12px 0 0;padding-left:20px;color:var(--sb-ink-2)}
.sb-tool__how li{margin:0 0 5px}
.sb-tool__how p{margin:10px 0 0;color:var(--sb-ink-3)}

/* --- choice questions --------------------------------------------------- */

.sb-tool__q{border:0;padding:0;margin:0 0 26px;min-width:0}
.sb-tool__q legend{
	display:flex;align-items:center;gap:10px;
	font-weight:650;font-size:1rem;color:var(--sb-ink);
	padding:0;margin:0 0 12px;
}
.sb-tool__q-num{
	display:grid;place-items:center;
	width:24px;height:24px;flex:0 0 24px;
	border-radius:50%;
	background:var(--sb-navy);color:#fff;
	font-size:.75rem;font-weight:700;
}
.sb-tool__choices{display:grid;gap:8px}
.sb-tool__choices--inline{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

.sb-tool__choice{
	display:flex;align-items:flex-start;gap:11px;
	padding:12px 14px;
	background:var(--sb-bg);
	border:1px solid var(--sb-line-strong);
	border-radius:var(--sb-radius);
	cursor:pointer;
	transition:border-color .14s var(--sb-ease),background .14s var(--sb-ease);
}
.sb-tool__choice:hover{border-color:var(--sb-navy-300);background:var(--sb-navy-050)}
.sb-tool__choice input{margin:2px 0 0;flex:0 0 auto;accent-color:var(--sb-blue)}
.sb-tool__choice span{display:block;min-width:0}
.sb-tool__choice strong{display:block;font-weight:600;font-size:.93rem;line-height:1.35}
.sb-tool__choice em{display:block;font-style:normal;font-size:.82rem;color:var(--sb-ink-3);margin-top:2px}
.sb-tool__choice:has(input:checked){
	border-color:var(--sb-blue);
	background:var(--sb-blue-050);
	box-shadow:inset 0 0 0 1px var(--sb-blue);
}
.sb-tool__choice:has(input:focus-visible){outline:2px solid var(--sb-blue);outline-offset:2px}
.sb-tool__choice:has(input:disabled){opacity:.45;cursor:not-allowed}
.sb-tool__choice--chip{padding:9px 13px}
.sb-tool__choice--chip em{display:none}

/* --- results ------------------------------------------------------------ */

.sb-tool__outputs{position:sticky;top:100px}
@media(max-width:900px){.sb-tool__outputs{position:static}}
.sb-tool__outputs--report{position:static}

/*
 * The separators are drawn inside each cell rather than as a 1px gap over a
 * dark background. With auto-fit columns the last row is usually short, and a
 * gap-over-background panel paints that missing cell as a solid grey block —
 * a hole that reads as a rendering fault. Drawn this way, the space a cell
 * does not occupy is simply the panel.
 */
.sb-tool__results{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	gap:0;
	background:var(--sb-surface);
	border:1px solid var(--sb-line);
	border-radius:var(--sb-radius-lg);
	overflow:hidden;
}
.sb-tool__result{
	background:var(--sb-surface);
	padding:16px 18px;
	box-shadow:inset 1px 1px 0 var(--sb-line);
}
.sb-tool__result--lead{
	grid-column:1/-1;
	background:var(--sb-navy);
	color:#fff;
	padding:22px 20px;
}
.sb-tool__result-label{
	margin:0;font-size:.78rem;font-weight:650;
	letter-spacing:.04em;text-transform:uppercase;
	color:var(--sb-ink-3);
}
.sb-tool__result--lead .sb-tool__result-label{color:rgba(255,255,255,.72)}
.sb-tool__result-value{
	margin:4px 0 0;
	font-size:1.42rem;font-weight:700;line-height:1.15;
	font-variant-numeric:tabular-nums;
	color:var(--sb-navy);
}
.sb-tool__result--lead .sb-tool__result-value{font-size:2.15rem;color:var(--sb-orange)}
.sb-tool__result-note{
	margin:5px 0 0;font-size:.76rem;line-height:1.4;color:var(--sb-ink-3);
}
.sb-tool__result--lead .sb-tool__result-note{color:rgba(255,255,255,.6)}

.sb-tool__verdict{
	margin:14px 0 0;padding:13px 16px;
	border-radius:var(--sb-radius);
	font-size:.9rem;line-height:1.5;
	background:var(--sb-surface-2);color:var(--sb-ink-2);
	border-left:3px solid var(--sb-line-strong);
}
.sb-tool__verdict:empty{display:none}
.sb-tool__verdict.is-good{background:var(--sb-ok-050);border-left-color:var(--sb-ok);color:var(--sb-ok-deep)}
.sb-tool__verdict.is-warn{background:var(--sb-orange-100);border-left-color:var(--sb-orange);color:#7a4408}
.sb-tool__verdict.is-bad{background:#fdeceb;border-left-color:#d64541;color:#8d2b28}

.sb-tool__actions{
	display:flex;flex-wrap:wrap;align-items:center;gap:8px;
	margin:16px 0 0;
}
.sb-tool__said{font-size:.82rem;color:var(--sb-ok-deep)}
.sb-tool__privacy{
	display:flex;align-items:flex-start;gap:8px;
	margin:14px 0 0;font-size:.8rem;line-height:1.45;color:var(--sb-ink-3);
}
.sb-tool__privacy svg{flex:0 0 auto;margin-top:1px;color:var(--sb-ok)}
.sb-tool__empty{
	margin:0;padding:24px;text-align:center;
	background:var(--sb-surface-2);border:1px dashed var(--sb-line-strong);
	border-radius:var(--sb-radius-lg);color:var(--sb-ink-3);font-size:.92rem;
}

/* --- the SEO report ----------------------------------------------------- */

.sb-tool__score{
	display:grid;place-items:center;text-align:center;
	padding:26px 20px;margin:0 0 20px;
	border-radius:var(--sb-radius-lg);
	background:var(--sb-navy);color:#fff;
}
.sb-tool__score-value{
	margin:0;font-size:3.2rem;font-weight:800;line-height:1;
	font-variant-numeric:tabular-nums;color:var(--sb-orange);
}
.sb-tool__score.is-good .sb-tool__score-value{color:#5fe3a1}
.sb-tool__score.is-bad .sb-tool__score-value{color:#ff8f8a}
.sb-tool__score-label{margin:8px 0 0;font-weight:600;font-size:.9rem}
.sb-tool__score-note{
	margin:8px 0 0;max-width:46ch;
	font-size:.8rem;line-height:1.5;color:rgba(255,255,255,.66);
}

.sb-audit__group{margin:0 0 26px}
.sb-audit__group h3{font-size:1.05rem;margin:0 0 3px}
.sb-audit__note{margin:0 0 12px;font-size:.84rem;color:var(--sb-ink-3)}
.sb-audit__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sb-audit__item{
	padding:13px 15px;
	background:var(--sb-surface);
	border:1px solid var(--sb-line);
	border-left:3px solid var(--sb-line-strong);
	border-radius:var(--sb-radius);
}
.sb-audit__item.is-good{border-left-color:var(--sb-ok)}
.sb-audit__item.is-warn{border-left-color:var(--sb-orange)}
.sb-audit__item.is-bad{border-left-color:#d64541}
.sb-audit__item.is-skip{opacity:.7}
.sb-audit__head{
	display:flex;align-items:center;gap:9px;flex-wrap:wrap;
	margin:0;font-weight:650;font-size:.94rem;
}
.sb-audit__flag{
	font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
	padding:3px 7px;border-radius:999px;
	background:var(--sb-surface-2);color:var(--sb-ink-3);
}
.is-good .sb-audit__flag{background:var(--sb-ok-050);color:var(--sb-ok-deep)}
.is-warn .sb-audit__flag{background:var(--sb-orange-100);color:#7a4408}
.is-bad .sb-audit__flag{background:#fdeceb;color:#8d2b28}
.sb-audit__detail{margin:6px 0 0;font-size:.86rem;line-height:1.5;color:var(--sb-ink-2);overflow-wrap:anywhere}
.sb-audit__fix{
	margin:8px 0 0;padding:9px 11px;
	font-size:.84rem;line-height:1.5;
	background:var(--sb-surface-2);border-radius:8px;color:var(--sb-ink-2);
}
.sb-audit__meta{margin:18px 0 0;font-size:.8rem;color:var(--sb-ink-3)}

/* --- the plan ----------------------------------------------------------- */

.sb-plan__title{font-size:1.3rem;margin:0 0 6px}
.sb-plan__lede{margin:0 0 20px;color:var(--sb-ink-2);font-size:.95rem}
.sb-plan__phases{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;counter-reset:none}
.sb-plan__phase{
	padding:15px 17px;background:var(--sb-surface);
	border:1px solid var(--sb-line);border-radius:var(--sb-radius);
}
.sb-plan__phase-name{
	display:flex;align-items:center;gap:11px;
	margin:0;font-weight:650;font-size:1rem;
}
.sb-plan__phase-name span{
	display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px;
	border-radius:50%;background:var(--sb-orange);color:#12202b;
	font-size:.8rem;font-weight:700;
}
.sb-plan__phase-why{margin:7px 0 0 37px;font-size:.88rem;line-height:1.5;color:var(--sb-ink-2)}
.sb-plan__sub{font-size:1rem;margin:0 0 8px}
.sb-plan__list{margin:0 0 20px;padding-left:20px;color:var(--sb-ink-2);font-size:.9rem;line-height:1.6}
.sb-plan__note{
	margin:0;padding:13px 15px;font-size:.86rem;line-height:1.5;
	background:var(--sb-surface-2);border-radius:var(--sb-radius);color:var(--sb-ink-3);
}

/* --- the brand guideline ------------------------------------------------ */

.sb-brand__title{font-size:1.35rem;margin:0 0 18px}
.sb-brand__block{
	margin:0 0 22px;padding:18px 20px;
	background:var(--sb-surface);border:1px solid var(--sb-line);
	border-radius:var(--sb-radius-lg);
}
.sb-brand__block h4{font-size:1.02rem;margin:0 0 10px}
.sb-brand__block h5{font-size:.85rem;margin:16px 0 8px;color:var(--sb-ink-3);text-transform:uppercase;letter-spacing:.05em}
.sb-brand__block code{
	font-family:var(--sb-mono);font-size:.8rem;
	background:var(--sb-surface-2);padding:2px 5px;border-radius:5px;
	overflow-wrap:anywhere;
}
.sb-brand__positioning{margin:0 0 8px;font-size:1.06rem;line-height:1.5;font-weight:600;color:var(--sb-navy)}
.sb-brand__words{margin:0 0 8px;font-size:.9rem;color:var(--sb-ink-2)}
.sb-brand__note{margin:8px 0 0;font-size:.82rem;line-height:1.5;color:var(--sb-ink-3)}
.sb-brand__list{margin:0;padding-left:20px;font-size:.9rem;line-height:1.65;color:var(--sb-ink-2)}
.sb-brand__list li{margin:0 0 5px}

.sb-brand__swatches{
	list-style:none;margin:0;padding:0;
	display:grid;gap:8px;
	grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.sb-brand__swatch{display:flex;align-items:center;gap:11px;min-width:0}
.sb-brand__chip{
	display:grid;place-items:center;
	width:46px;height:46px;flex:0 0 46px;
	border-radius:10px;border:1px solid var(--sb-line);
	font-weight:700;font-size:.9rem;
}
.sb-brand__meta{display:block;min-width:0;font-size:.8rem;line-height:1.35}
.sb-brand__meta strong{display:block;font-size:.86rem}
.sb-brand__meta code{display:inline-block;margin:1px 0}
.sb-brand__meta em{display:block;font-style:normal;color:var(--sb-ink-3);margin-top:1px}

.sb-brand__scale{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.sb-brand__scale li{
	display:flex;justify-content:space-between;gap:12px;
	padding:6px 0;border-bottom:1px dashed var(--sb-line);
	font-size:.86rem;
}
.sb-brand__scale li:last-child{border-bottom:0}

/* --- print -------------------------------------------------------------- */

/* ------------------------------------------- 08a Long values

   A result box has to hold whatever the arithmetic produces, including a
   figure somebody produced with a typo. Without these two rules a long
   number is simply clipped by its own box: the tool then shows a number
   that is not the number, which is worse than showing an ugly one.
   ------------------------------------------------------------------- */

.sb-tool__result-value{
	overflow-wrap:anywhere;
	word-break:break-word;
	min-width:0;
}
.sb-tool__result{min-width:0}

/* ---------------------------------------------- 08b Modes & errors */

.sb-tool__modes{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.sb-tool__mode{
	appearance:none;
	border:1px solid var(--sb-line-strong);
	background:var(--sb-bg);
	color:var(--sb-ink-2);
	font-weight:600;
	font-size:.875rem;
	padding:8px 16px;
	border-radius:999px;
	cursor:pointer;
	transition:background .15s var(--sb-ease),color .15s var(--sb-ease),border-color .15s var(--sb-ease);
}
.sb-tool__mode:hover{border-color:var(--sb-blue);color:var(--sb-blue)}
.sb-tool__mode.is-on{background:var(--sb-navy);border-color:var(--sb-navy);color:#fff}

.sb-tool__error{
	margin:14px 0 0;
	padding:12px 14px;
	border-left:3px solid #d64541;
	background:#fdeceb;
	color:#8d2b28;
	border-radius:0 var(--sb-radius) var(--sb-radius) 0;
	font-size:.925rem;
}

.sb-btn[disabled]{opacity:.6;cursor:progress}

/* -------------------------------------------------- 09 Paper

   The rule here is: change the TOKENS, not the elements.

   The obvious way to write a print stylesheet is to find every dark panel
   and set `background:none;color:#000` on it. That is how the brand tool's
   colour swatches came out blank on paper — the swatch is a coloured square
   and nothing else, so a rule that removes colour from panels removes the
   only information it carries. An element-level reset cannot tell the
   difference between a decorative fill and a fill that IS the content, and
   the next person to add a coloured thing will be caught by the same rule
   without ever reading it.

   So the whole page is re-tinted by redefining the design tokens for print.
   Every panel that draws its colour from a token quietly becomes ink on
   white, including panels written after this file. Then, separately and
   explicitly, the few fills that carry meaning are told to print as they
   are. Adding a decorative panel needs no change here; adding a meaningful
   one is one line, in a list short enough to read.

   `print-color-adjust: exact` is what overrides the browser's own
   background-stripping, which is why it appears on those and nowhere else.
   ------------------------------------------------------------------- */

@media print{
	:root{
		--sb-bg:#fff;
		--sb-surface:#fff;
		--sb-surface-2:#fff;
		--sb-navy:#000;
		--sb-navy-050:#fff;
		--sb-navy-300:#666;
		--sb-blue:#000;
		--sb-blue-050:#fff;
		--sb-ink:#000;
		--sb-ink-2:#333;
		--sb-ink-3:#555;
		--sb-line:#bbb;
		--sb-line-strong:#888;
		--sb-shadow-sm:none;
		--sb-shadow:none;
		--sb-shadow-lg:none;
	}

	/* Controls are not part of a document. The inputs are, so they stay. */
	.sb-tool__actions,.sb-tool__privacy,.sb-tool__how,.sb-tool__modes,.sb-tool__error{display:none!important}
	.sb-tool__grid,.sb-tool__stack{display:block}
	.sb-tool__outputs{position:static}
	.sb-tool__inputs{border:0;padding:0}
	.sb-tool__field input,.sb-tool__field textarea{border:0;border-bottom:1px solid #bbb;padding-left:0}
	.sb-tool__hint{display:none}

	/* A printed page needs a top edge and a source. */
	.sb-tool::before{
		content:attr(data-print-title);
		display:block;
		font-weight:700;
		font-size:1.2rem;
		border-bottom:2px solid #000;
		padding-bottom:6px;
		margin-bottom:16px;
	}

	.sb-tool__result--lead,.sb-tool__score{border:1px solid #888;box-shadow:none}
	.sb-tool__score-value{font-size:2.4rem}

	.sb-audit__item,.sb-brand__block,.sb-brand__swatch,.sb-plan__phase,.sb-tool__result{break-inside:avoid}
	.sb-audit__group,.sb-brand__block{break-before:auto}
	h2,h3,h4,h5{break-after:avoid}

	/*
	 * The fills that are the content. Everything not in this list is
	 * decoration and has already been turned to ink by the tokens above.
	 */
	.sb-brand__chip{
		-webkit-print-color-adjust:exact;
		print-color-adjust:exact;
		border:1px solid #888;
	}
	.sb-audit__item.is-good,.sb-audit__item.is-warn,.sb-audit__item.is-bad,
	.sb-audit__flag,.sb-tool__verdict{
		-webkit-print-color-adjust:exact;
		print-color-adjust:exact;
	}

	.sb-tool::after{
		content:attr(data-print-source);
		display:block;
		margin-top:20px;
		padding-top:8px;
		border-top:1px solid #bbb;
		font-size:.75rem;
		color:#555;
	}

	/* Links: the address matters on paper and nowhere else. */
	.sb-tool a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
}

/*
 * Set while a print is being laid out, by the button and by Ctrl+P alike.
 * Its job is to get the report to the top of the paper instead of printing
 * whatever happened to be above it.
 */
body.sb-printing .sb-tool{page-break-before:auto}

/* --- reduced motion ------------------------------------------------------ */

@media(prefers-reduced-motion:reduce){
	.sb-tool__input input,.sb-tool__field textarea,.sb-tool__choice{transition:none}
}