/*
Widget: AW Guide (Pre-flight panel), static.
Phone first. Every colour, font, size and easing comes from tokens.css; no hex values.
The panel is ink; the section around it is paper (T-050). Motion is limited to the live dot and
the chip press, both stopped by Calm mode and prefers-reduced-motion.
Last task: T-035. Date: 2026-10-21.
*/

.aw-guide {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	background: var(--ink);
	color: var(--paper);
	overflow-wrap: break-word;
}

/* Header: live dot and title on the left, the step counter on the right. */
.aw-guide__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--rule);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

.aw-guide__who {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.aw-guide__dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--signal);
}

/* The one piece of motion in the static panel: a slow pulse while motion is on.
   Calm mode removes the class motion-on at the root, and reduced motion is honoured too. */
html.motion-on .aw-guide__dot {
	animation: aw-guide-pulse 1.8s ease-in-out infinite;
}

@keyframes aw-guide-pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.3;
	}
}

.aw-guide__step {
	flex: none;
	color: var(--stone);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-align: right;
}

/* Message log. The opening message is in the markup, so it shows at once with no delay. */
.aw-guide__log {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 26px 22px;
	min-height: 260px;
}

.aw-guide__msg {
	margin: 0;
	max-width: 34ch;
}

.aw-guide__msg--guide {
	font-family: var(--voice);
	font-weight: 300;
	font-size: clamp(22px, 2.3vw, 30px);
	line-height: 1.3;
}

/* A visitor's answer: orange bubble, ink text. */
.aw-guide__msg--visitor {
	align-self: flex-end;
	max-width: 85%;
	padding: 11px 15px;
	background: var(--signal);
	color: var(--ink);
	font-family: var(--body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.4;
}

/* New lines settle in. Only lines the script adds carry .is-in, so the opening message in the markup
   still shows at once. Calm mode and reduced motion drop the animation and show the line as it is. */
.aw-guide__msg.is-in {
	animation: aw-guide-in var(--t-message) var(--ease-out) both;
}

@keyframes aw-guide-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Typing dots: the conversation's only motion (T-035). Three 6px dots breathe in turn while the
   guide "thinks"; Calm mode and reduced motion keep the dots still, and the script posts the line
   at once there, so they are a moment rather than a wait. */
.aw-guide__typing {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px 0;
}

.aw-guide__typing i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--stone);
	animation: aw-guide-type 1.2s ease-in-out infinite;
}

.aw-guide__typing i:nth-child(2) {
	animation-delay: 0.15s;
}

.aw-guide__typing i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes aw-guide-type {
	0%,
	100% {
		opacity: 0.35;
	}

	50% {
		opacity: 1;
	}
}

html.calm .aw-guide__msg.is-in,
html.calm .aw-guide__choice.is-in,
html.calm .aw-guide__done.is-in,
html.calm .aw-guide__done.is-in .aw-btn:first-child {
	animation: none;
}

html.calm .aw-guide__typing i {
	animation: none;
	opacity: 0.6;
}

/* Footer: the answers, the done row, the fallback text area and the text form. */
.aw-guide__foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 0 22px 22px;
}

.aw-guide__choices {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Answer chips: real buttons, 48px tall, paper text on ink. */
.aw-guide__choice {
	min-height: 48px;
	padding: 10px 16px;
	background: transparent;
	color: var(--paper);
	border: 1px solid var(--field-line);
	border-radius: 0;
	font-family: var(--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	white-space: normal;
	cursor: pointer;
	/* Without this the browser paints its own button face over the ink panel, which on some
	   engines is a light or magenta default rather than the transparent background asked for
	   here. The calm toggle sets the same thing. */
	-webkit-appearance: none;
	appearance: none;
	transition: transform var(--t-press) var(--ease-out), border-color 200ms ease, background-color 200ms ease;
}

.aw-guide__choice:not(:disabled):active {
	transform: scale(0.97);
}

.aw-guide__choice:focus-visible,
.aw-guide__input:focus-visible,
.aw-guide__fallback:focus-visible,
.aw-guide__textbtn:focus-visible,
.aw-guide__done .aw-btn:focus-visible,
.aw-guide__done .aw-btn--ghost:focus-visible,
.aw-guide__form .aw-btn--ghost:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
	.aw-guide__choice:not(:disabled):hover {
		border-color: var(--paper);
		background: color-mix(in srgb, var(--paper) 6%, transparent);
	}

	.aw-guide__done .aw-btn--ghost:not(:disabled):hover,
	.aw-guide__form .aw-btn--ghost:not(:disabled):hover {
		background: color-mix(in srgb, var(--paper) 8%, transparent);
	}
}

.aw-guide__done {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

/* Answer chips stagger in 40ms apart; --i is the chip's position, set by guide.js. */
.aw-guide__choice.is-in {
	animation: aw-guide-in 240ms var(--ease-out) backwards;
	animation-delay: calc(var(--i, 0) * 40ms);
}

/* The brief is the payoff: the row settles in, then the send button gives two soft beats so the
   eye lands on the one action that matters. Once, never a loop. */
.aw-guide__done.is-in {
	animation: aw-guide-in var(--t-message) var(--ease-out) both;
}

.aw-guide__done.is-in .aw-btn:first-child {
	animation: aw-guide-beat 520ms var(--ease-out) 450ms 2;
}

@keyframes aw-guide-beat {
	0%,
	100% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.05);
	}
}

/* The send button is the panel's one strong action: orange fill, ink text, arrow circle. */
.aw-guide__done .aw-btn {
	min-height: 52px;
	font-size: 18px;
}

.aw-guide__done .aw-btn--ghost {
	color: var(--paper);
	border-color: var(--field-line);
}

.aw-guide__note {
	font-family: var(--body);
	font-size: 14px;
	line-height: 1.4;
	color: var(--stone);
}

/* Fallback brief, shown only when the clipboard is blocked. */
.aw-guide__fallback {
	width: 100%;
	min-height: 150px;
	padding: 12px;
	background: var(--char);
	color: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0;
	font-family: var(--body);
	font-size: 15px;
	line-height: 1.5;
	resize: vertical;
}

.aw-guide__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--rule);
}

.aw-guide__input {
	flex: 1 1 200px;
	min-width: 0;
	min-height: 48px;
	padding: 0 14px;
	background: var(--char);
	color: var(--paper);
	border: 1px solid var(--field-line);
	border-radius: 0;
	font-family: var(--body);
	font-size: 16px;
}

.aw-guide__input::placeholder {
	color: var(--mist);
	opacity: 1;
}

/* Disabled at rest, like the chips: keep the token colours rather than the browser's grey text. */
.aw-guide__input:disabled {
	color: var(--paper);
	opacity: 1;
	border-color: var(--rule);
}

.aw-guide__form .aw-btn--ghost {
	color: var(--paper);
	border-color: var(--field-line);
}

/* Skip and Start again: quiet text buttons, still 48px tall. */
.aw-guide__textbtn {
	min-height: 48px;
	padding: 0 10px;
	background: transparent;
	border: 0;
	color: var(--stone);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 160ms ease;
}

/* With JavaScript off the conversation cannot run. Rather than hiding the answers (which leaves a
   question with nothing to answer it), the chips and the form ship `disabled` in the markup and
   guide.js (T-035) enables them on boot: the same rest-state rule as the calculator's ranges. Every
   word the panel will ever show is on screen, and no control can pretend to work.
   The done row is hidden until there is a brief, so [hidden] must beat the flex rule above. */
.aw-guide [hidden] {
	display: none !important;
}

.aw-guide__choice:disabled,
.aw-guide__input:disabled,
.aw-guide__form .aw-btn--ghost:disabled,
.aw-guide__textbtn:disabled {
	cursor: default;
}

.aw-guide__choice:disabled {
	border-color: var(--rule);
}

/* Wider phones and tablets: a little more room in the log. */
@media (min-width: 760px) {
	.aw-guide__log {
		min-height: 300px;
		padding: 30px;
	}

	.aw-guide__foot {
		padding: 0 30px 30px;
	}

	.aw-guide__head {
		padding: 18px 30px;
	}
}

/* Desktop: the panel sits in the right column of the Pre-flight section (T-050). */
@media (min-width: 1024px) {
	.aw-guide__log {
		min-height: 320px;
	}
}

/* Calm mode: no animation at all inside the panel. */
html.calm .aw-guide__dot {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.aw-guide__dot {
		animation: none;
	}

	.aw-guide__typing i {
		animation: none;
		opacity: 0.6;
	}

	.aw-guide__choice,
	.aw-guide__textbtn {
		transition: none;
	}
}