/*
Calculator widget (AW Calculator): two sliders, the plan row, the serif answer, the dot field and the
WhatsApp link, for the ink #maths band. Phone first; the desktop two-column frame is the page's job.
At rest the block is complete: the sentences, outputs and lit dots are computed on the server for the
defaults, and the two ranges are disabled until calculator.js (T-039) enables them. Every colour,
font and size comes from tokens.css; the layout follows the prototype's .calc.
Last task: T-038. Date: 2026-10-21.
*/

.aw-calc {
	border: 1px solid var(--rule);
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: var(--paper);
}

/* ---------- Sliders ---------- */

.aw-calc__fields {
	display: grid;
	gap: 26px;
	padding: 28px 24px;
}

.aw-calc__field {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.aw-calc__field-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.aw-calc__field label {
	font-size: var(--fs-body);
	line-height: 1.3;
	color: var(--sand);
}

.aw-calc__field output {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--paper);
}

/* 44px tall so the whole track is a tap target on a phone. */
.aw-calc__range {
	width: 100%;
	height: 44px;
	margin: 0;
	background: transparent;
	accent-color: var(--signal);
	cursor: pointer;
}

/* Until calculator.js removes the attribute the slider cannot change anything, so it says so. */
.aw-calc__range:disabled {
	cursor: default;
}

.aw-calc__range:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* ---------- Plan row ---------- */

.aw-calc__plan {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	margin: 0;
	padding: 18px 24px;
	border-top: 1px solid var(--rule);
	border-bottom: 1px solid var(--rule);
	font-size: 16px;
	color: var(--stone);
}

.aw-calc__plan b {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--paper);
}

/* ---------- Answer ---------- */

.aw-calc__answer {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px 24px 8px;
}

.aw-calc__big,
.aw-calc__small {
	margin: 0;
}

.aw-calc__big {
	font-family: var(--voice);
	font-weight: 300;
	font-size: clamp(26px, 2.8vw, 38px);
	line-height: 1.22;
	color: var(--paper);
}

.aw-calc__small {
	font-size: 18px;
	line-height: 1.4;
	color: var(--sand);
}

/* The emphasis in both sentences: orange is allowed here because the band is ink. */
.aw-calc__big em,
.aw-calc__small em {
	font-style: normal;
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: 0.01em;
	color: var(--signal);
}

/* ---------- Dot field ---------- */

.aw-calc__dots-wrap {
	padding: 16px 24px 8px;
}

.aw-calc__dots {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

/* A dot is a bare <i>: up to 480 of them, so no class each. */
.aw-calc__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dot-off);
	transition: background-color 350ms ease, transform 350ms var(--ease-out);
}

.aw-calc__dots i.on {
	background: var(--signal);
	transform: scale(1.35);
}

.aw-calc__key {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--mist);
}

.aw-calc__key span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.aw-calc__key i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dot-off);
}

.aw-calc__key i.on {
	background: var(--signal);
}

/* ---------- WhatsApp link ---------- */

.aw-calc__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding: 20px 24px;
	border-top: 1px solid var(--rule);
	color: var(--paper);
	text-decoration: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(17px, 1.6vw, 20px);
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color 200ms ease;
}

.aw-calc__cta svg {
	flex: none;
}

/* SVG colours cannot read a token from a presentation attribute, so set the stroke here. */
.aw-calc__cta svg path {
	stroke: var(--signal);
}

.aw-calc__cta:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: -3px;
}

@media (hover: hover) and (pointer: fine) {
	.aw-calc__cta:hover {
		background: var(--char);
	}
}

/* ---------- From 760px ---------- */

@media (min-width: 760px) {
	.aw-calc__fields {
		gap: 30px;
		padding: 32px 32px;
	}

	.aw-calc__plan,
	.aw-calc__answer,
	.aw-calc__dots-wrap,
	.aw-calc__cta {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* ---------- From 1024px ---------- */

@media (min-width: 1024px) {
	.aw-calc__field output {
		font-size: 34px;
	}
}