/*
 * Quest front end. Mobile-first; matches the approved mockups in design/.
 *
 * Every color, font, radius and shadow comes from the design tokens in
 * :root below, so the look can be changed in one place (and, from 0.10, from
 * Settings → Quest Design without a build). Don't hard-code colors in rules.
 *
 * Fonts are self-hosted (no requests to Google): Space Grotesk 500/700 for
 * headings and DM Sans 400/500/700 for body text, plus Inter, Roboto
 * (variable, 400–700) and Atkinson Hyperlegible (400/700, regular and
 * italic) as choices in Quest Design; all SIL Open Font License (see the
 * OFL*.txt files in fonts/).
 *
 * Base element rules are scoped with :where(.quest) (zero added
 * specificity), so Quest blocks on theme pages don't restyle the theme.
 */

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}

/* Optional fonts for Settings → Quest Design (only downloaded when chosen). */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("fonts/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/inter-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2");
}

/* Roboto: one variable file per style covers weights 400–700. */
@font-face {
	font-family: "Roboto";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/roboto-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/roboto-latin-wght-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto";
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url("fonts/roboto-latin-wght-italic.woff2") format("woff2-variations"), url("fonts/roboto-latin-wght-italic.woff2") format("woff2");
}

/* ---------- Design tokens (design/README.md) ---------- */

:root {
	/* Colors */
	--quest-navy: #02275a;            /* ink: navy backgrounds, primary text and buttons */
	--quest-navy-light: #0a3672;      /* avatar circle, chips on navy */
	--quest-navy-border: #2f5596;     /* borders and outlines on navy, progress track */
	--quest-orange: #ac8d15;          /* accent: mic, avatar ring, progress, Next step border */
	--quest-orange-dark: #004add;     /* accent dark: links and labels on light backgrounds */
	--quest-gray: #eaf1ff;            /* page and chat background */
	--quest-card: #ffffff;            /* cards and bubbles */
	--quest-border: #e3e8ef;          /* card borders */
	--quest-muted: #4b5563;           /* secondary text on light backgrounds */
	--quest-on-navy: #fff;            /* text on navy */
	--quest-on-navy-muted: #b7c6db;   /* small labels on navy */
	--quest-on-navy-soft: #d6e0ee;    /* body text on navy */
	--quest-text: var(--quest-navy);  /* primary text */
	--quest-body-text: #353a3c;       /* body text on light backgrounds */
	--quest-chip-bg: #e6eef7;         /* profile chips on light backgrounds */
	--quest-input-border: #7c8da3;    /* form field borders (3.3:1 on white) */
	--quest-placeholder: #5f6b7a;     /* placeholder text (5.4:1 on white) */
	--quest-danger: #b32d2e;
	--quest-ok: #00a32a;
	--quest-ok-bg: #edfaef;
	--quest-error-bg: #fcf0f1;
	--quest-tile-1-bg: #fde7d8;       /* goal-area icon tiles */
	--quest-tile-1: #b4531a;
	--quest-tile-2-bg: #ddf1ee;
	--quest-tile-2: #0f766e;
	--quest-tile-3-bg: #e6eef7;
	--quest-tile-3: #02275a;

	/* Type */
	--quest-heading: "Space Grotesk", system-ui, sans-serif;
	--quest-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Shape */
	--quest-radius-card: 16px;
	--quest-radius-tile: 14px;
	--quest-radius-bubble: 18px;
	--quest-radius-pill: 999px;
	--quest-radius-field: 24px;
	--quest-focus: 3px solid var(--quest-orange-dark);

	/* Text size: Standard (1), Large or Extra large; set on <html data-quest-text>. */
	--quest-text-scale: 1;
}

/* All Quest type is in rem, so this one root size scales every text size.
   Standard is 17px (106.25% of the usual 16px). */
html.quest-root {
	font-size: calc(106.25% * var(--quest-text-scale));
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

html[data-quest-text="large"] {
	--quest-text-scale: 1.15;
}

html[data-quest-text="xlarge"] {
	--quest-text-scale: 1.3;
}

/* ---------- Base ---------- */

:where(.quest),
:where(.quest) *,
:where(.quest) *::before,
:where(.quest) *::after {
	box-sizing: border-box;
}

/* Keep the hidden attribute working on elements given a display value below. */
:where(.quest) [hidden] {
	display: none !important;
}

body.quest {
	margin: 0;
	background: var(--quest-gray);
	color: var(--quest-text);
	font: 1rem/1.5 var(--quest-body);
}

/* A Quest block on a theme page. */
.quest-block {
	color: var(--quest-text);
	font: 1rem/1.5 var(--quest-body);
}

:where(.quest) :is(h1, h2, h3),
.quest-brand,
.quest-heading {
	font-family: var(--quest-heading);
	font-weight: 700;
}

:where(.quest) h1 {
	margin: 0 0 0.75rem;
	font-size: 1.75rem;
	line-height: 1.15;
}

:where(.quest) h2 {
	margin: 2rem 0 0.75rem;
	font-size: 1.25rem;
}

:where(.quest) a {
	color: var(--quest-orange-dark);
}

:where(.quest) a:hover {
	color: var(--quest-navy);
}

:where(.quest) :is(a, button, summary, input, textarea, select):focus-visible {
	outline: var(--quest-focus);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* "Skip to content": visually hidden but still in the accessibility tree
   (never display: none), shown only when reached with the keyboard
   (:focus-visible after Tab), never on page load, a tap or a click. The
   clip pattern doesn't depend on the page's width or on any other rule
   for links (an older "left: -9999px" did), and !important keeps Quest
   Design's custom CSS or a site's CSS tools from revealing it. The same
   hiding rule is inlined in the page's <head> (templates/page.php) so it
   holds even before quest.css arrives (e.g. when a cache or optimisation
   plugin defers stylesheets). */
.quest-root .quest-skip {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.quest-root .quest-skip:focus-visible {
	top: 0.75rem;
	left: 0.75rem;
	z-index: 30;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0.75rem 1rem !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	font-weight: 700;
	color: var(--quest-navy);
	background: var(--quest-card);
	border-radius: var(--quest-radius-pill);
	outline: 3px solid var(--quest-orange-dark);
	outline-offset: 2px;
}

/* Form fields: dark text on white wherever they sit (the navy areas set
   white text, which fields must not inherit). */
:where(.quest) :is(input, textarea, select) {
	color: var(--quest-text);
	background-color: var(--quest-card);
}

:where(.quest) ::placeholder {
	color: var(--quest-placeholder);
	opacity: 1;
}

/* ---------- Header and bottom tabs ---------- */

/* The header keeps its Standard size at every text size (its sizes are in em
   of this font-size, which undoes --quest-text-scale), so the wordmark and
   Dashboard · Aa · Me · Log out always fit on one line, even at Extra large
   on a 360px phone. The page text below still grows. */
.quest-header {
	position: sticky; /* Pinned at the top on every Quest page. */
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 1.25em 1em 0.5em;
	font-size: calc(1rem / var(--quest-text-scale));
	color: var(--quest-on-navy);
	background: var(--quest-navy);
}

.quest-brand {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	min-height: 44px;
	font-size: 1.375em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--quest-on-navy);
	text-decoration: none;
}

.quest-brand:hover {
	color: var(--quest-on-navy);
}

/* Round outline button on navy (the gear, "Play Scout's welcome"). */
.quest-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--quest-on-navy);
	background: transparent;
	border: 1px solid var(--quest-navy-border);
	border-radius: 50%;
	cursor: pointer;
}

.quest-icon-button:hover {
	color: var(--quest-on-navy);
	background: var(--quest-navy-light);
}

.quest-header .quest-icon-button:focus-visible,
.quest-welcome .quest-icon-button:focus-visible {
	outline-color: var(--quest-on-navy);
}

.quest-header-icons {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
}

/* Header buttons: an icon with a short label under it (Dashboard, Text size, Me, Log out). */
.quest-header-button {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 44px;
	min-height: 44px;
	padding: 2px 5px;
	font-size: 0.6875em;
	font-weight: 500;
	line-height: 1.1;
	white-space: nowrap;
	color: var(--quest-on-navy);
	text-decoration: none;
	border-radius: 10px;
	list-style: none;
	cursor: pointer;
}

.quest-header-button::-webkit-details-marker {
	display: none;
}

.quest-header-button:hover,
.quest-header-button[aria-current="page"] {
	color: var(--quest-on-navy);
	background: var(--quest-navy-light);
}

.quest-header-button svg {
	flex: 0 0 auto;
}

.quest-header-button:focus-visible {
	outline: 3px solid var(--quest-on-navy);
	outline-offset: 1px;
}

/* Scout's face in the header, the size of the other icons. */
.quest-header-scout-face {
	display: flex;
	height: 20px;
	align-items: center;
}

.quest-header-aa {
	font-family: var(--quest-heading);
	font-size: 1.545em; /* About 17px, the icons' height. */
	font-weight: 700;
	line-height: 20px;
}

/* Phones under 400px: a tighter header so all five items (Scout,
   Dashboard, Text size, Me, Log out) fit on one line. */
@media (max-width: 399px) {
	.quest-header {
		gap: 0.25em;
		padding-right: 0.5em;
		padding-left: 0.5em;
	}

	.quest-header-button {
		padding-right: 3px;
		padding-left: 3px;
	}
}

/* Narrower than 360px: smaller wordmark and labels, no gaps. */
@media (max-width: 359px) {
	.quest-brand {
		font-size: 1em;
	}

	.quest-header-icons {
		gap: 0;
	}

	.quest-header-button {
		padding-right: 1px;
		padding-left: 1px;
		font-size: 0.625em;
	}
}

/* "Aa Text size": a small menu under the header button. */
.quest-text-size-menu {
	position: relative;
}

.quest-text-size-menu[open] > .quest-header-button {
	background: var(--quest-navy-light);
}

.quest-text-size-panel {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: max-content;
	max-width: calc(100vw - 2rem);
	padding: 8px;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-tile);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.quest-text-size-option {
	min-height: 44px;
	padding: 0 1rem;
	font-family: var(--quest-body);
	font-weight: 500;
	text-align: left;
	color: var(--quest-text);
	background: var(--quest-card);
	border: 1px solid var(--quest-input-border);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-text-size-option[aria-pressed="true"] {
	color: var(--quest-on-navy);
	background: var(--quest-navy);
	border-color: var(--quest-navy);
}

/* Each choice shows its own size (relative to the current text). */
.quest-text-size-option.quest-text-size-standard,
.quest-text-size-choice.quest-text-size-standard {
	font-size: calc(1rem / var(--quest-text-scale));
}

.quest-text-size-option.quest-text-size-large,
.quest-text-size-choice.quest-text-size-large {
	font-size: calc(1.15rem / var(--quest-text-scale));
}

.quest-text-size-option.quest-text-size-xlarge,
.quest-text-size-choice.quest-text-size-xlarge {
	font-size: calc(1.3rem / var(--quest-text-scale));
}

/* Text size on the Me page. */
.quest-text-size-form,
.quest-voice-form {
	margin: 0 0 1.25rem;
	padding: 1rem;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-card);
}

.quest-text-size-form fieldset,
.quest-voice-form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.quest-text-size-choices {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0.5rem 0;
}

/* Me page: the Voice choice. */
.quest-voice-choices {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0.5rem 0;
}

.quest-voice-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--quest-input-border);
	border-radius: var(--quest-radius-tile);
	cursor: pointer;
}

.quest-voice-choice:has(input:checked) {
	border-color: var(--quest-navy);
	box-shadow: inset 0 0 0 1px var(--quest-navy);
}

.quest-voice-choice input {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--quest-navy);
}

.quest-voice-choice-hint {
	display: block;
	font-size: 0.875rem;
	color: var(--quest-muted);
}

.quest-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0.25rem 0;
	font-weight: 500;
	cursor: pointer;
}

.quest-switch input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--quest-navy);
}

.quest-text-size-choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 0.875rem;
	font-weight: 500;
	border: 1px solid var(--quest-input-border);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-text-size-choice:has(input:checked) {
	border-color: var(--quest-navy);
	box-shadow: inset 0 0 0 1px var(--quest-navy);
}

.quest-text-size-choice input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--quest-navy);
}

.quest-hint {
	margin: 0;
	font-size: 0.875rem;
	color: var(--quest-muted);
}

.quest-header-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--quest-on-navy);
}

.quest-tabs {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: space-around;
	padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
	background: var(--quest-card);
	border-top: 1px solid var(--quest-border);
}

.quest-tabs a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 64px;
	min-height: 48px;
	font-size: 0.8125rem;
	color: var(--quest-muted);
	text-decoration: none;
}

.quest-tabs a[aria-current="page"] {
	font-weight: 700;
	color: var(--quest-navy);
}

.quest-tabs svg {
	width: 22px;
	height: 22px;
}

body.quest-has-tabs {
	padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

/* While chatting, the message box takes the bottom of the screen. */
.quest-chatting .quest-tabs {
	display: none;
}

body.quest-chatting,
body.quest-chatting.quest-has-tabs {
	padding-bottom: calc(var(--quest-dock-height, 10rem) + 1rem); /* The docked box and its tools row (measured by quest-chat.js). */
}

.quest-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.5rem;
	padding: 1rem;
}

/* ---------- Page body ---------- */

.quest-main {
	max-width: 36rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 2rem;
}

.quest-lede,
.quest-empty,
.quest-empty-state {
	color: var(--quest-muted);
}

.quest-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--quest-orange-dark);
}

.quest-link-light {
	color: var(--quest-on-navy);
}

.quest-link-light:hover {
	color: var(--quest-on-navy-soft);
}

.quest-message {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	color: var(--quest-text);
	background: var(--quest-ok-bg);
	border-left: 4px solid var(--quest-ok);
	border-radius: 8px;
}

.quest-message p {
	margin: 0.25rem 0;
}

.quest-message-error {
	background: var(--quest-error-bg);
	border-left-color: var(--quest-danger);
}

/* Cards */
.quest-card,
.quest-item,
.quest-setup,
.quest-next,
.quest-celebrate,
.quest-intro-inner,
.quest-known {
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-card);
}

/* ---------- Forms and buttons ---------- */

.quest-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 1rem 0;
}

.quest-form label {
	font-weight: 700;
}

.quest-form input[type="email"],
.quest-form input[type="password"],
.quest-form input[type="text"],
.quest-form input[type="date"],
.quest-form select,
.quest-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.625rem 0.875rem;
	font: inherit;
	color: var(--quest-text);
	background: var(--quest-card);
	border: 1px solid var(--quest-input-border);
	border-radius: 12px;
}

.quest-form textarea {
	min-height: 6rem;
}

.quest-form-note {
	margin: 0;
	font-size: 0.875rem;
	color: var(--quest-muted);
}

.quest-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 48px;
	padding: 0.5rem 1.25rem;
	font: inherit;
	font-weight: 700;
	color: var(--quest-on-navy);
	text-decoration: none;
	background: var(--quest-navy);
	border: 2px solid var(--quest-navy);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
	list-style: none;
	overflow-wrap: anywhere;
}

.quest-button:hover {
	color: var(--quest-on-navy);
}

.quest-form .quest-button {
	align-self: flex-start;
}

.quest-button-secondary {
	color: var(--quest-navy);
	background: var(--quest-card);
}

.quest-button-secondary:hover {
	color: var(--quest-navy);
	background: var(--quest-gray);
}

.quest-button-accent {
	color: var(--quest-navy);
	background: var(--quest-orange);
	border-color: var(--quest-orange);
}

.quest-button-accent:hover {
	color: var(--quest-navy);
}

.quest-button-danger {
	color: var(--quest-on-navy);
	background: var(--quest-danger);
	border-color: var(--quest-danger);
}

.quest-button-block {
	display: flex;
	width: 100%;
}

summary.quest-button::-webkit-details-marker {
	display: none;
}

.quest-choice {
	margin: 0.25rem 0;
	padding: 0;
	border: 0;
}

.quest-choice legend {
	padding: 0;
	font-weight: 700;
}

.quest-form .quest-choice label,
.quest-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-weight: 400;
}

.quest-choice input,
.quest-checkbox input {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--quest-navy);
}

/* ---------- Profile ("Me") ---------- */

.quest-items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.quest-item {
	margin: 0 0 0.75rem;
	padding: 1rem;
}

.quest-item-label {
	margin: 0 0 0.25rem;
	font-size: 1rem;
}

.quest-item-value {
	margin: 0 0 0.75rem;
	overflow-wrap: anywhere;
}

.quest-item-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: flex-start;
}

.quest-edit {
	flex: 0 1 auto;
	max-width: 100%;
}

/* An open edit form takes the full row. */
.quest-edit[open] {
	flex-basis: 100%;
}

.quest-edit[open] > summary {
	margin-bottom: 0.25rem;
}

.quest-edit .quest-form {
	margin: 0.75rem 0 0;
}

.quest-danger-zone {
	margin-top: 2.5rem;
}

.quest-account-title {
	margin: 2.5rem 0 0.75rem;
	font-size: 1.125rem;
}

.quest-profile-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
}

/* ---------- Home: welcome (design/1-welcome.html) ---------- */

.quest-home .quest-main {
	max-width: none;
	padding: 0;
}

.quest-welcome {
	padding: 0.5rem 1.5rem 2rem;
	color: var(--quest-on-navy);
	text-align: center;
	background: var(--quest-navy);
}

.quest-welcome-inner,
.quest-chat-inner {
	max-width: 40rem;
	margin: 0 auto;
}

.quest-scout-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0.5rem 0 1.125rem;
}

/* "Hear Scout" sits beside the avatar; balance it so Scout stays centered. */
.quest-scout-row::before {
	content: "";
	flex: 0 0 64px;
}

.quest-play-welcome {
	display: inline-flex;
	flex: 0 0 64px;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding: 0;
	font: inherit;
	color: var(--quest-on-navy);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.quest-play-welcome:focus-visible {
	outline: 3px solid var(--quest-on-navy);
	outline-offset: 2px;
	border-radius: 10px;
}

.quest-play-welcome:hover .quest-icon-button {
	background: var(--quest-navy-light);
}

.quest-scout-row:not(:has(.quest-play-welcome:not([hidden])))::before {
	display: none;
}

/* Scout's avatar: the drawing in a navy circle with an orange ring. The
   circle clips the drawing (the shoulders reach its bottom edge). */
.quest-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--quest-navy-light);
	border: 4px solid var(--quest-orange);
	border-radius: 50%;
}

.quest-avatar-lg {
	width: 96px;
	height: 96px;
}

.quest-avatar-md {
	width: 48px;
	height: 48px;
	border-width: 3px;
}

.quest-avatar-sm {
	width: 40px;
	height: 40px;
	border-width: 2px;
}

.quest-avatar-xs {
	width: 22px;
	height: 22px;
	border-width: 1.5px;
}

/* Read-aloud: the full drawing, large (see "Scout on stage"). */
.quest-avatar-xl {
	width: 120px;
	height: 120px;
}

.quest-avatar .quest-scout-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.quest-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The intro line ("Tell Scout what you want to do…") above the avatar. */
.quest-welcome-intro {
	max-width: 18.75rem;
	margin: 0.75rem auto 1rem;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--quest-on-navy-soft);
}

/* Scout's greeting sentence, under the avatar. */
.quest-greeting {
	max-width: 21rem;
	margin: 0 auto 0.75rem;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--quest-on-navy-soft);
}

.quest-eyebrow {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--quest-on-navy-muted);
}

.quest-welcome h1 {
	margin: 0 0 1.25rem;
	font-size: 2rem;
}

/* Heading position "Top" (Quest Design → Words): heading, intro line, Scout,
   greeting; the greeting then leads into the message box. */
.quest-welcome h1.is-top {
	margin: 0.75rem 0 0.25rem;
}

.quest-welcome-title.is-top ~ .quest-greeting {
	margin-bottom: 1.25rem;
}

/* Message box: a pill with a round Send button. */
.quest-composer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
	max-width: 32rem;
	margin: 0 auto;
}

.quest-composer textarea {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	max-height: 160px;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--quest-text);
	background: var(--quest-card);
	border: 1px solid var(--quest-input-border);
	border-radius: var(--quest-radius-field);
	resize: none;
}

/* Round Send and (docked) mic: the circle, with a short label under it. */
.quest-send,
.quest-mic-small {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: auto;
	height: auto;
	min-width: 48px;
	padding: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.quest-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.quest-round-label {
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.15;
	text-align: center;
}

.quest-send .quest-round {
	color: var(--quest-navy);
	background: var(--quest-card); /* White on the navy welcome; navy once docked. */
}

.quest-send svg {
	width: 22px;
	height: 22px;
}

.quest-send:disabled {
	opacity: 0.6;
	cursor: default;
}

.quest-remaining {
	max-width: 32rem;
	margin: 0.25rem auto 0;
	font-size: 0.875rem;
	color: var(--quest-on-navy-muted);
	text-align: right;
}

.quest-remaining:empty {
	display: none;
}

/* "Tap to talk": the big round orange mic. */
.quest-voice {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 1.5rem 0 0.5rem;
}

.quest-mic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: var(--quest-navy);
	background: var(--quest-orange);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.quest-mic-big {
	width: 80px;
	height: 80px;
}

.quest-mic-big svg {
	width: 34px;
	height: 34px;
}

.quest-mic-small .quest-round {
	width: 52px;
	height: 52px;
	color: var(--quest-navy);
	background: var(--quest-orange);
}

.quest-mic.quest-mic-small,
.quest-mic.quest-mic-small.is-listening {
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
}

.quest-mic-small.is-listening .quest-round {
	color: var(--quest-on-navy);
	background: var(--quest-danger);
}

.quest-mic-small svg {
	width: 24px;
	height: 24px;
}

.quest-mic.is-listening {
	color: var(--quest-on-navy);
	background: var(--quest-danger);
}

.quest-mic-caption {
	margin: 0;
	font-size: 1rem;
	font-weight: 500;
}

.quest-voice-note {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--quest-on-navy-muted);
}

.quest-invite {
	max-width: 19.5rem;
	margin: 1.25rem auto 0.75rem;
	font-size: 0.875rem;
	color: var(--quest-on-navy-muted);
}

.quest-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.quest-chip {
	display: flex;
	align-items: center;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 16px;
	font: inherit;
	font-size: 0.9375rem;
	text-align: left;
	overflow-wrap: anywhere; /* Long words from Quest Design → Words still fit. */
	color: var(--quest-on-navy);
	background: var(--quest-navy-light);
	border: 1px solid var(--quest-navy-border);
	border-radius: 22px;
	cursor: pointer;
}

.quest-chip:hover,
.quest-chip:focus-visible {
	color: var(--quest-navy);
	background: var(--quest-orange);
	border-color: var(--quest-orange);
}

.quest-chip:focus-visible {
	outline-color: var(--quest-on-navy);
}

.quest-chip:disabled {
	opacity: 0.6;
	cursor: default;
}

.quest-retention-note {
	max-width: 30rem;
	margin: 0 auto;
	font-size: 0.8125rem;
	color: var(--quest-on-navy-muted);
}

.quest-unavailable {
	text-align: left;
}

/* Continue-your-quest card (navy-light on navy; also used on My quests). */
.quest-continue {
	display: block;
	max-width: 30rem;
	margin: 1.5rem auto 0;
	padding: 1rem;
	color: var(--quest-on-navy);
	text-align: left;
	text-decoration: none;
	background: var(--quest-navy-light);
	border: 2px solid var(--quest-orange);
	border-radius: var(--quest-radius-card);
}

.quest-continue:hover {
	color: var(--quest-on-navy);
}

.quest-continue:hover .quest-continue-title,
.quest-continue:focus-visible .quest-continue-title {
	text-decoration: underline;
}

.quest-continue:focus-visible {
	outline-color: var(--quest-on-navy);
}

.quest-continue-eyebrow {
	display: block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--quest-on-navy-muted);
}

.quest-continue-title {
	display: block;
	margin: 0.125rem 0 0.5rem;
	font-family: var(--quest-heading);
	font-size: 1.1875rem;
	font-weight: 700;
}

.quest-continue-meta,
.quest-continue-next {
	display: block;
	font-size: 0.9375rem;
	color: var(--quest-on-navy-soft);
}

.quest-continue-next {
	margin-top: 0.25rem;
	color: var(--quest-on-navy);
}

.quest-all-quests {
	margin: 0.5rem 0 0;
}

/* Progress bars (welcome card and quest header). */
.quest-progress {
	display: block;
	height: 10px;
	margin: 0.25rem 0;
	overflow: hidden;
	background: var(--quest-navy-border);
	border-radius: 5px;
}

.quest-progress-fill {
	display: block;
	height: 100%;
	min-width: 6px;
	background: var(--quest-orange);
	border-radius: 5px;
}

/* First visit: one line and a Got it button. */
.quest-intro {
	padding: 1rem 1.25rem 0;
	background: var(--quest-navy);
}

.quest-intro-inner {
	max-width: 40rem;
	margin: 0 auto;
	padding: 1.25rem 1rem;
	color: var(--quest-text);
	border-top: 6px solid var(--quest-orange);
}

.quest-intro-inner:has(.quest-intro-dismiss) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.75rem 1rem;
	border-top-width: 1px;
}

.quest-intro-inner:has(.quest-intro-dismiss) p {
	margin: 0;
}

.quest-intro h2 {
	margin-top: 0;
}

/* ---------- Home: the chat window (design/2-conversation.html) ----------
   While chatting on the built-in home the screen is one column that fills
   the viewport: the header at the top, the conversation in its own
   scrolling panel, and the message box with its tools at the bottom (in the
   column, not fixed, so the on-screen keyboard pushes it up rather than
   covering it). Only the conversation scrolls. Scout floats as a navy pill
   at the bottom right, just above the message box, and "New message" shows
   when a reply arrives while the reader has scrolled up (quest-chat.js).
   --quest-dock-height is the message box area's height and --quest-vv-height
   the visible height when a phone keyboard is open (both set by
   quest-chat.js). */
html:has(body.quest-home-chat.quest-chatting) {
	height: 100%;
	overflow: hidden;
}

body.quest-home-chat.quest-chatting,
body.quest-home-chat.quest-chatting.quest-has-tabs {
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: var(--quest-vv-height, 100dvh);
	padding-bottom: 0;
	overflow: hidden;
}

.quest-home-chat.quest-chatting .quest-header {
	flex: 0 0 auto;
}

.quest-home-chat.quest-chatting .quest-main {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}

.quest-home-chat.quest-chatting .quest-main > * {
	flex: 0 0 auto;
}

.quest-home-chat.quest-chatting .quest-chat {
	order: 1;
	flex: 1 1 auto;
	min-height: 0;
	padding-bottom: 5.5rem; /* Room for Scout's pill, so it never covers the newest message. */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.quest-home-chat.quest-chatting .quest-chat:focus-visible {
	outline: var(--quest-focus);
	outline-offset: -3px;
}

.quest-home-chat.quest-chatting .quest-welcome {
	order: 2;
	display: flex;
	flex-direction: column;
	padding: 0;
	color: var(--quest-text);
	background: var(--quest-card);
}

.quest-home-chat.quest-chatting .quest-welcome-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
}

/* "N messages left today" and the unavailable note sit above the message box. */
.quest-home-chat.quest-chatting .quest-welcome .quest-remaining,
.quest-home-chat.quest-chatting .quest-unavailable {
	order: -1;
	width: 100%;
	max-width: 40rem;
	margin: 0 auto;
	padding: 0.5rem 1rem;
}

.quest-home-chat.quest-chatting .quest-welcome .quest-remaining:empty {
	display: none;
}

.quest-home-chat.quest-chatting .quest-welcome .quest-composer {
	position: static;
	z-index: 14; /* Above Scout's pill, so the Voice menu opens over it. */
}

/* Scout, floating: a navy pill at the bottom right, just above the message
   box (lined up with the 40rem column on wide screens). */
.quest-home-chat.quest-chatting .quest-chat-identity {
	position: absolute;
	right: max(1rem, calc((100% - 40rem) / 2));
	bottom: calc(var(--quest-dock-height, 10rem) + 12px);
	z-index: 12;
	max-width: calc(100% - 2rem);
	padding: 6px 16px 6px 6px;
	color: var(--quest-on-navy);
	background: var(--quest-navy);
	border-radius: var(--quest-radius-pill);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--quest-navy) 35%, transparent);
}

.quest-home-chat.quest-chatting .quest-chat-identity .quest-avatar {
	flex: 0 0 auto;
}

/* "New message ↓": a reply came in while the reader was scrolled up. */
.quest-new-msg {
	position: absolute;
	bottom: calc(var(--quest-dock-height, 10rem) + 12px);
	left: 50%;
	z-index: 13;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0 1rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--quest-on-navy);
	background: var(--quest-orange-dark);
	border: 0;
	border-radius: var(--quest-radius-pill);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--quest-navy) 30%, transparent);
	cursor: pointer;
	transform: translateX(-50%);
}

.quest-new-msg[hidden],
body:not(.quest-home-chat) .quest-new-msg,
body:not(.quest-chatting) .quest-new-msg {
	display: none;
}

.quest-new-msg:focus-visible {
	outline: 3px solid var(--quest-navy);
	outline-offset: 2px;
}

/* On a narrow phone the button sits on the left, clear of Scout's pill. */
@media (max-width: 30rem) {
	.quest-new-msg {
		left: 1rem;
		transform: none;
	}
}

/* ---------- Home: conversation (design/2-conversation.html) ---------- */

/* Scout bar shown while chatting: avatar, name and what Scout is doing. */
.quest-chat-identity {
	display: none;
	align-items: center;
	gap: 12px;
	text-align: left;
}

.quest-chat-name {
	margin: 0;
	font-family: var(--quest-heading);
	font-size: 1.125rem;
	font-weight: 700;
}

.quest-chat-status {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--quest-on-navy-muted);
}

.quest-chatting .quest-welcome {
	padding: 0.75rem 1.25rem 1rem;
}

.quest-chatting .quest-chat-identity {
	display: flex;
}

.quest-chatting .quest-scout-row,
.quest-chatting .quest-eyebrow,
.quest-chatting .quest-welcome-intro,
.quest-chatting .quest-greeting,
.quest-chatting .quest-voice,
.quest-chatting .quest-invite,
.quest-chatting .quest-chips,
.quest-chatting .quest-welcome .quest-retention-note,
.quest-chatting .quest-welcome .quest-continue,
.quest-chatting .quest-all-quests {
	display: none !important;
}

/* The greeting stays for screen readers while chatting. */
.quest-chatting .quest-welcome h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.quest-chatting .quest-welcome .quest-remaining,
.quest-chatting .quest-unavailable {
	margin-top: 0.5rem;
	text-align: left;
}

/* Docked message box: white bar, pill field, round Send and mic. */
.quest-chatting .quest-welcome .quest-composer {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	align-items: center;
	max-width: none;
	padding: 0.875rem max(1rem, calc((100% - 40rem) / 2)) calc(1.5rem + env(safe-area-inset-bottom));
	background: var(--quest-card);
	border-top: 1px solid var(--quest-border);
}

.quest-chatting .quest-welcome .quest-send .quest-round {
	color: var(--quest-on-navy);
	background: var(--quest-navy);
}

.quest-chatting .quest-welcome .quest-composer {
	color: var(--quest-text);
}

/* Scout on stage: while a reply is read aloud, the full drawing (120px)
   sits at the top of the screen, grown out of the chat bar's small Scout
   (quest-chat.js animates it). When the page is at the top, the chat bar
   grows to make room so he never covers the reply being read. */
.quest-scout-stage {
	position: fixed;
	z-index: 15;
	left: 50%;
	width: 120px;
	height: 120px;
	margin-left: -60px;
	pointer-events: none;
}

.quest-scout-stage[hidden] {
	display: none;
}

.quest-scout-stage .quest-avatar {
	box-shadow: 0 6px 20px color-mix(in srgb, var(--quest-navy) 45%, transparent);
}

.quest-scout-big .quest-chat-identity .quest-avatar {
	visibility: hidden;
}

.quest-chatting.quest-scout-big .quest-welcome {
	padding-bottom: calc(1rem + var(--quest-stage-room, 0px));
}

@media (prefers-reduced-motion: no-preference) {
	.quest-chatting .quest-welcome {
		transition: padding-bottom 0.28s ease;
	}
}

/* Hands-free cue, on top of the docked message box: "Listening… tap to
   stop" while the mic is on by itself, or a pulsing "Tap to talk" when the
   browser needs a tap to start it. */
.quest-cue {
	flex: 1 0 100%;
	order: -1;
	margin: 0 0 0.5rem;
	text-align: center;
}

.quest-cue[hidden] {
	display: none;
}

.quest-cue-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 1rem;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--quest-navy);
	background: var(--quest-card);
	border: 2px solid var(--quest-orange);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-cue-button:focus-visible {
	outline: 3px solid var(--quest-orange-dark);
	outline-offset: 2px;
}

.quest-cue-dot {
	width: 10px;
	height: 10px;
	background: var(--quest-danger);
	border-radius: 50%;
}

.quest-cue.is-tap .quest-cue-dot {
	background: var(--quest-orange);
}

@media (prefers-reduced-motion: no-preference) {
	.quest-cue.is-listening .quest-cue-dot {
		animation: quest-cue-blink 1s ease-in-out infinite;
	}

	.quest-cue.is-tap .quest-cue-button,
	.quest-mic.is-prompting .quest-round,
	.quest-mic-big.is-prompting {
		animation: quest-scout-pulse 1.4s ease-out infinite;
	}
}

@keyframes quest-cue-blink {
	50% {
		opacity: 0.3;
	}
}

body:not(.quest-chatting) .quest-mic-small {
	display: none !important;
}

/* The mic goes last in the docked bar, as in the mockup. */
.quest-mic-small {
	order: 3;
}

.quest-chat {
	padding: 1.25rem 1.25rem 0;
}

/* Done for now, New conversation and Read aloud: one compact row right
   under the message box (a full-width line inside the composer, so it docks
   with the box while chatting). Wraps instead of scrolling on narrow phones. */
.quest-chat-tools {
	display: flex;
	flex: 1 0 100%;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	order: 4;
}

.quest-chat-tools:not(:has(> :not([hidden]))) {
	display: none;
}

.quest-tool {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding: 0 0.4rem;
	font: inherit;
	font-size: 0.765rem;
	font-weight: 500;
	white-space: nowrap;
	color: var(--quest-navy);
	background: var(--quest-card);
	border: 1px solid var(--quest-input-border);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-tool[aria-pressed="false"] {
	color: var(--quest-muted);
}

/* Voice: one button that opens a small menu of three modes. Its look shows
   the mode at a glance, never by color alone (the icon and label change too):
   Quiet is an outline with a speaker-off icon ("Voice: Off"); Read to me and
   Talk with Scout are filled with the accent (navy text, AA), with a speaker
   or speaker-and-mic icon; while Talk with Scout is listening a ring pulses. */
.quest-voice-control {
	position: relative;
	display: inline-flex;
}

.quest-voice-control[hidden] {
	display: none;
}

.quest-voice-icon {
	display: none;
	flex: 0 0 auto;
}

.quest-voice-button.is-quiet .quest-voice-icon-quiet,
.quest-voice-button.is-read .quest-voice-icon-read,
.quest-voice-button.is-talk .quest-voice-icon-talk {
	display: block;
}

.quest-voice-button.is-quiet {
	color: var(--quest-muted);
}

.quest-voice-button.is-read,
.quest-voice-button.is-talk {
	font-weight: 700;
	color: var(--quest-navy);
	background: var(--quest-orange);
	border-color: var(--quest-orange);
}

.quest-voice-button:focus-visible,
.quest-voice-option:focus-visible {
	outline: 3px solid var(--quest-orange-dark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
	.quest-voice-button.is-talk.is-listening {
		animation: quest-scout-pulse 1.4s ease-out infinite;
	}
}

/* The menu opens upward, above the docked tools row. */
.quest-voice-menu {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: min(18rem, calc(100vw - 2rem));
	padding: 6px;
	text-align: left;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-tile);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--quest-navy) 25%, transparent);
	transform: translateX(-50%);
}

.quest-voice-menu[hidden] {
	display: none;
}

.quest-voice-option {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	min-height: 44px;
	padding: 8px 10px 8px 36px;
	font: inherit;
	text-align: left;
	color: var(--quest-text);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--quest-radius-tile);
	cursor: pointer;
	position: relative;
}

.quest-voice-option::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 10px;
	width: 16px;
	height: 16px;
	border: 2px solid var(--quest-input-border);
	border-radius: 50%;
}

.quest-voice-option[aria-checked="true"] {
	background: var(--quest-gray);
	border-color: var(--quest-border);
}

.quest-voice-option[aria-checked="true"]::before {
	border-color: var(--quest-navy);
	background: radial-gradient(circle, var(--quest-navy) 0 4px, transparent 5px);
}

.quest-voice-option-name {
	font-weight: 700;
}

.quest-voice-option-hint {
	font-size: 0.8125rem;
	color: var(--quest-muted);
}

/* The speaker badge on Scout's pill while Voice is on. */
.quest-chat-identity {
	position: relative;
}

.quest-voice-badge {
	position: absolute;
	top: 0;
	left: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--quest-navy);
	background: var(--quest-orange);
	border: 2px solid var(--quest-navy);
	border-radius: 50%;
}

.quest-voice-badge[hidden],
body:not(.quest-chatting) .quest-voice-badge {
	display: none;
}

.quest-log {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.quest-msg {
	max-width: 85%;
	padding: 14px 16px;
	font-size: 1rem;
	line-height: 1.45;
	border-radius: var(--quest-radius-bubble);
	overflow-wrap: anywhere;
	scroll-margin-bottom: 7rem;
}

/* Keep line breaks in message text (but not in the surrounding markup). */
.quest-msg-text {
	white-space: pre-wrap;
}

.quest-msg-user {
	align-self: flex-end;
	color: var(--quest-on-navy);
	background: var(--quest-navy);
	border-bottom-right-radius: 4px;
}

.quest-msg-assistant {
	align-self: flex-start;
	color: var(--quest-text);
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-bottom-left-radius: 4px;
}

.quest-msg-note {
	align-self: flex-start;
	padding: 0.25rem 0.75rem;
	font-size: 0.9375rem;
	color: var(--quest-orange-dark);
	background: transparent;
	border-left: 3px solid var(--quest-orange);
	border-radius: 0;
}

/* Undo on a change Scout made (a task or quest step). */
.quest-undo {
	min-height: 44px;
	margin-left: 0.5rem;
	padding: 0.25rem 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--quest-navy);
	background: var(--quest-card);
	border: 1px solid var(--quest-input-border);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-undone {
	margin-left: 0.5rem;
	font-size: 0.875rem;
	color: var(--quest-muted);
}

/* "Talking about: …" above the chat, after Discuss on the dashboard. */
.quest-focus {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 0.75rem;
	padding: 0 0 0 0.875rem;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--quest-navy);
	background: var(--quest-card);
	border: 1px solid var(--quest-orange);
	border-radius: var(--quest-radius-pill);
}

.quest-focus-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.quest-focus-clear {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.875rem 0 0.5rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1;
	color: var(--quest-navy);
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.quest-msg-recap {
	align-self: stretch;
	max-width: none;
	background: var(--quest-card);
	border: 2px solid var(--quest-orange);
	border-radius: var(--quest-radius-card);
}

.quest-msg-status {
	align-self: flex-start;
	font-style: italic;
	color: var(--quest-muted);
}

.quest-msg-error {
	align-self: stretch;
	max-width: none;
	background: var(--quest-error-bg);
	border-left: 4px solid var(--quest-danger);
	border-radius: 8px;
}

.quest-retry {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: 0.5rem;
	padding: 0.25rem 1rem;
	font: inherit;
	font-weight: 700;
	color: var(--quest-on-navy);
	background: var(--quest-navy);
	border: 0;
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

/* Typing indicator and status line while Scout writes or searches. */
.quest-typing {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.375rem 0;
}

.quest-typing span:not(.screen-reader-text) {
	width: 0.5rem;
	height: 0.5rem;
	background: var(--quest-muted);
	border-radius: 50%;
	opacity: 0.4;
}

.quest-msg-status-line {
	display: block;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--quest-muted);
}

.quest-msg-text:not(:empty) + .quest-msg-status-line,
.quest-msg-status-line:has(+ .quest-msg-text:not(:empty)) {
	margin-top: 0.375rem;
}

.quest-msg-status-line:empty {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.quest-typing span:not(.screen-reader-text) {
		animation: quest-dot 1.2s ease-in-out infinite;
	}

	.quest-typing span:nth-child(2) {
		animation-delay: 0.2s;
	}

	.quest-typing span:nth-child(3) {
		animation-delay: 0.4s;
	}
}

@keyframes quest-dot {

	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

/* "What I know so far" card (profile chips) at the top of the chat. */
.quest-known {
	margin: 1rem 0 0;
	padding: 0 1rem;
}

body:not(.quest-chatting) .quest-known {
	display: none;
}

.quest-known > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	font-family: var(--quest-heading);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.quest-known > summary::-webkit-details-marker {
	display: none;
}

.quest-known > summary::after {
	content: "+";
	font-size: 1.25rem;
	color: var(--quest-muted);
}

.quest-known[open] > summary::after {
	content: "−";
}

.quest-known-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quest-known-chip {
	padding: 8px 12px;
	font-size: 0.875rem;
	background: var(--quest-chip-bg);
	border-radius: var(--quest-radius-pill);
}

.quest-known-chip.is-missing {
	color: var(--quest-muted);
	background: transparent;
	border: 1px dashed var(--quest-input-border);
}

.quest-known-note {
	margin: 0.75rem 0 0.25rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--quest-muted);
}

/* Links and sources under replies. */
.quest-search-links {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 0.75rem;
}

.quest-search-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
}

.quest-link-filters {
	font-size: 0.875rem;
	font-weight: 700;
}

.quest-link-note {
	font-size: 0.875rem;
	color: var(--quest-muted);
}

.quest-sources {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.75rem;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	font-size: 0.875rem;
	border-top: 1px solid var(--quest-border);
}

.quest-sources-label {
	font-weight: 700;
	color: var(--quest-muted);
}

.quest-sources a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	overflow-wrap: anywhere;
}

.quest-start-quest,
.quest-intro-offer {
	display: flex;
	margin-top: 0.75rem;
}

/* Thumbs on replies. */
.quest-thumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin-top: 0.375rem;
}

.quest-thumb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.75rem;
	font: inherit;
	font-size: 0.875rem;
	color: var(--quest-muted);
	background: transparent;
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-thumb > span[aria-hidden] {
	font-size: 1.125rem;
	filter: grayscale(1);
}

.quest-thumb:hover > span[aria-hidden],
.quest-thumb[aria-pressed="true"] > span[aria-hidden] {
	filter: none;
}

.quest-thumb[aria-pressed="true"] {
	color: var(--quest-text);
	background: var(--quest-gray);
	border-color: var(--quest-orange-dark);
}

.quest-thumb-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	flex-basis: 100%;
	gap: 0.375rem 0.5rem;
}

.quest-thumb-note label {
	flex-basis: 100%;
	font-size: 0.875rem;
	font-weight: 700;
}

.quest-thumb-note input {
	flex: 1;
	min-width: 10rem;
	min-height: 44px;
	padding: 0.375rem 0.75rem;
	font: inherit;
	border: 1px solid var(--quest-input-border);
	border-radius: var(--quest-radius-field);
}

.quest-thumb-thanks {
	font-size: 0.875rem;
	color: var(--quest-muted);
}

/* "Last time" card and the end of a conversation (in the welcome area). */
.quest-last-time {
	max-width: 30rem;
	margin: 1.5rem auto 0;
	color: var(--quest-text);
	text-align: left;
	padding: 1rem;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-left: 6px solid var(--quest-orange);
	border-radius: var(--quest-radius-card);
}

.quest-last-time-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	cursor: pointer;
	list-style: none;
}

.quest-last-time-summary::-webkit-details-marker {
	display: none;
}

.quest-last-time-summary::after {
	content: "+";
	font-size: 1.25rem;
	color: var(--quest-muted);
}

.quest-last-time[open] > .quest-last-time-summary::after {
	content: "−";
}

.quest-last-time h2 {
	margin: 0;
	font-size: 1rem;
}

/* Collapsed after "Start something new": a slim, out-of-the-way line. */
.quest-last-time:not([open]) {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
}

.quest-last-time p {
	margin: 0;
}

.quest-ended {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.quest-ended-text {
	flex-basis: 100%;
	margin: 0;
	color: var(--quest-muted);
}

.quest-ended .quest-button {
	flex: 1 1 12rem;
}

.quest-ended-logout {
	flex-basis: 100%;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.9375rem;
}

/* ---------- Quest screen (design/3-quest.html) ---------- */

.quest-quest-page .quest-main {
	max-width: none;
	padding: 0;
}

.quest-q-header {
	padding: 1.375rem 1.25rem 1.5rem;
	color: var(--quest-on-navy);
	background: var(--quest-navy);
}

.quest-q-inner,
.quest-q-body {
	max-width: 40rem;
	margin: 0 auto;
}

.quest-q-eyebrow,
.quest-next-eyebrow {
	display: block;
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
}

.quest-q-eyebrow {
	color: var(--quest-on-navy-muted);
}

.quest-q-header h1 {
	margin: 0.75rem 0;
	font-size: 1.625rem;
	line-height: 1.2;
}

.quest-q-progress {
	display: flex;
	align-items: center;
	gap: 10px;
}

.quest-q-progress .quest-progress {
	flex: 1;
	margin: 0;
}

.quest-progress-text {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.quest-q-body {
	padding: 1.125rem 1.25rem 2rem;
}

.quest-details {
	margin: 0.75rem 0 0;
	font-size: 0.9375rem;
	color: var(--quest-muted);
}

.quest-details-label {
	font-weight: 700;
}

/* Next step card: orange outline, navy pill button. */
.quest-next {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0.875rem 0;
	padding: 16px;
	border: 2px solid var(--quest-orange);
}

.quest-next .quest-next-eyebrow {
	font-weight: 700;
	letter-spacing: 0.03125rem;
	color: var(--quest-orange-dark);
}

.quest-next h2 {
	margin: 0;
	font-size: 1.1875rem;
}

.quest-next p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--quest-body-text);
}

.quest-next .quest-step-actions {
	flex-direction: column;
	margin-top: 0.25rem;
}

.quest-next .quest-step-actions .quest-step-form,
.quest-next .quest-step-actions .quest-button {
	width: 100%;
}

.quest-next .quest-step-actions .quest-button-accent {
	color: var(--quest-on-navy);
	background: var(--quest-navy);
	border-color: var(--quest-navy);
}

.quest-celebrate {
	margin: 0.875rem 0;
	padding: 1rem;
	text-align: center;
	border: 2px solid var(--quest-orange);
}

.quest-celebrate h2 {
	margin: 0.125rem 0 0.5rem;
}

.quest-celebrate-icon {
	margin: 0;
	font-size: 2.5rem;
	line-height: 1;
}

.quest-steps-title {
	margin: 1.5rem 0 0.75rem;
	font-size: 1rem;
}

.quest-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.quest-step {
	display: flex;
	gap: 0.75rem;
	margin: 0 0 10px;
	padding: 14px;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-tile);
}

.quest-step-marker {
	display: inline-flex;
	flex: 0 0 2rem;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	font-weight: 700;
	color: var(--quest-muted);
	border: 2px solid var(--quest-input-border);
	border-radius: 50%;
}

.quest-step.is-in-progress .quest-step-marker {
	color: var(--quest-navy);
	background: var(--quest-orange);
	border-color: var(--quest-orange);
}

.quest-step.is-done .quest-step-marker {
	color: var(--quest-on-navy);
	background: var(--quest-navy);
	border-color: var(--quest-navy);
}

.quest-step-body {
	flex: 1;
	min-width: 0;
}

.quest-step-title {
	margin: 0.125rem 0 0;
	font-family: var(--quest-heading);
	font-size: 1rem;
}

.quest-step.is-done .quest-step-title {
	color: var(--quest-muted);
}

.quest-step-status {
	margin: 0.125rem 0 0.375rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--quest-muted);
}

.quest-step.is-in-progress .quest-step-status {
	color: var(--quest-orange-dark);
}

.quest-step-type {
	display: inline-block;
	margin-right: 0.375rem;
	padding: 0 0.5rem;
	font-size: 0.8125rem;
	color: var(--quest-navy);
	background: var(--quest-chip-bg);
	border-radius: var(--quest-radius-pill);
}

.quest-step-type:empty {
	display: none;
}

.quest-step-desc {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--quest-body-text);
	overflow-wrap: anywhere;
}

.quest-step-note {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--quest-muted);
}

.quest-step-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.quest-step-form {
	margin: 0;
}

.quest-step-change {
	margin-top: 0.5rem;
}

.quest-step-change[open] {
	padding: 0.75rem;
	background: var(--quest-gray);
	border-radius: 12px;
}

.quest-remove-step {
	margin-top: 0.75rem;
}

.quest-confirm {
	margin-top: 0.5rem;
	padding: 0.75rem;
	background: var(--quest-error-bg);
	border-radius: 12px;
}

.quest-confirm p {
	margin: 0 0 0.5rem;
}

.quest-add-step,
.quest-remove-quest {
	margin: 1rem 0 0;
}

.quest-back-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin-top: 1.5rem;
}

/* Quick setup and the plan-building wait. */
.quest-setup {
	margin: 1rem 0;
	padding: 1rem;
	border-top: 6px solid var(--quest-orange);
}

.quest-setup h2 {
	margin-top: 0;
}

.quest-setup-note {
	margin: 0.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--quest-muted);
}

.quest-planning {
	padding: 1.5rem 1rem;
	text-align: center;
}

.quest-planning-title {
	margin: 0.75rem 0 0.25rem;
	font-family: var(--quest-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.quest-planning-step,
.quest-planning-slow {
	margin: 0.25rem 0;
	color: var(--quest-muted);
}

.quest-planning-bar {
	position: relative;
	max-width: 18rem;
	height: 10px;
	margin: 1rem auto;
	overflow: hidden;
	background: var(--quest-gray);
	border-radius: 5px;
}

.quest-planning-bar span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: var(--quest-orange);
	border-radius: 5px;
}

@media (prefers-reduced-motion: no-preference) {
	.quest-planning-bar span {
		animation: quest-indeterminate 1.6s ease-in-out infinite;
	}
}

@keyframes quest-indeterminate {

	0% {
		left: -40%;
	}

	100% {
		left: 100%;
	}
}

/* ---------- My quests: "Quest areas" cards ---------- */

.quest-list,
.quest-finished {
	margin: 0;
	padding: 0;
	list-style: none;
}

.quest-list-item {
	margin: 0 0 10px;
}

.quest-area {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px;
	color: var(--quest-text);
	text-decoration: none;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-tile);
}

.quest-area:hover {
	color: var(--quest-text);
	border-color: var(--quest-orange);
}

.quest-area-icon {
	display: flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--quest-tile-3);
	background: var(--quest-tile-3-bg);
	border-radius: 12px;
}

.quest-area-icon svg {
	width: 22px;
	height: 22px;
}

.quest-area-icon.is-tile-1 {
	color: var(--quest-tile-1);
	background: var(--quest-tile-1-bg);
}

.quest-area-icon.is-tile-2 {
	color: var(--quest-tile-2);
	background: var(--quest-tile-2-bg);
}

.quest-area-body {
	flex: 1;
	min-width: 0;
}

.quest-area-title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
}

.quest-area-sub {
	display: block;
	font-size: 0.875rem;
	color: var(--quest-muted);
}

.quest-area-count {
	font-size: 0.875rem;
	font-weight: 700;
	white-space: nowrap;
}

.quest-area .quest-progress {
	height: 6px;
	margin: 0.375rem 0 0.25rem;
	background: var(--quest-chip-bg);
}

.quest-finished .quest-link {
	color: var(--quest-muted);
}

/* ---------- About ---------- */

.quest-about h3 {
	margin: 1.25rem 0 0.25rem;
	font-size: 1.0625rem;
}

.quest-about ul {
	margin: 0.25rem 0 0.75rem;
	padding-left: 1.25rem;
}

@media (min-width: 40rem) {
	.quest-main {
		padding-top: 2.5rem;
	}

	.quest-welcome {
		padding-bottom: 3rem;
	}

	.quest-q-header {
		padding: 2.5rem 1.25rem 2rem;
	}
}

/* ---------- Quest blocks (custom home or theme pages) ---------- */

/* Navy blocks stacked on a custom home read as one welcome area. */
.quest-block.quest-welcome {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.quest-block.quest-welcome:last-child,
.quest-block.quest-welcome:not(:has(+ .quest-block.quest-welcome)) {
	padding-bottom: 2rem;
}

.quest-block-conversation .quest-chat,
.quest-block-my-quests {
	max-width: 40rem;
	margin: 0 auto;
}

.quest-block-my-quests {
	padding: 1.25rem;
}

/* Anything else on a custom home (headings, paragraphs, images). */
.quest-page-content > :not(.quest-block) {
	max-width: 36rem;
	margin-right: auto;
	margin-left: auto;
	padding-right: 1.25rem;
	padding-left: 1.25rem;
}

/* ---------- Passkeys and sign-in ---------- */

.quest-passkey-signin {
	margin: 0 0 1.25rem;
}

.quest-passkey-signin .quest-button {
	gap: 0.5rem;
}

.quest-passkey-signin .quest-form-note {
	margin: 0.5rem 0 0;
	text-align: center;
}

/* "or" between the passkey button and the email form. */
.quest-or {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.25rem 0 0;
	color: var(--quest-muted);
}

.quest-or::before,
.quest-or::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--quest-border);
}

.quest-passkey-status:empty {
	display: none;
}

.quest-passkey-dates {
	font-size: 0.875rem;
	color: var(--quest-muted);
}

.quest-passkeys h3 {
	margin: 1rem 0 0.25rem;
	font-size: 1.0625rem;
}

.quest-logout-all {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 1.5rem 0 0;
}

/* ---------- Dashboard (design/4-dashboard.html) ---------- */

.quest-dashboard-page .quest-main {
	max-width: none;
	padding: 0;
}

.quest-dash-header {
	padding: 0.75rem 1.25rem 1.375rem;
	color: var(--quest-on-navy);
	background: var(--quest-navy);
}

.quest-dash-header-inner,
.quest-dash-body {
	max-width: 40rem;
	margin: 0 auto;
}

.quest-dash-header-inner {
	display: flex;
	align-items: center;
	gap: 12px;
}

.quest-dash-header .quest-eyebrow {
	margin: 0 0 2px;
	font-size: 0.8125rem;
}

.quest-dash-header h1 {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.2;
}

.quest-dash-body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 1.125rem 1.25rem 1.5rem;
}

.quest-dash-body > .quest-message {
	margin: 0;
}

.quest-dash-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.quest-dash-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.quest-dash-section h2 {
	margin: 0;
	font-size: 1.125rem;
}

/* Small pill buttons (44px tall to keep touch targets). */
.quest-button-small {
	min-height: 44px;
	padding: 0.25rem 0.875rem;
	font-size: 0.875rem;
	gap: 6px;
}

/* Edit / Delete: light outline, as in the mockup. */
.quest-dash-actions .quest-button-secondary {
	font-weight: 400;
	border-width: 1px;
	border-color: var(--quest-border);
}

.quest-dash-section-head .quest-button-secondary {
	border-width: 1px;
}

.quest-dash-actions .quest-button-small {
	padding-right: 0.75rem;
	padding-left: 0.75rem;
}

.quest-dash-add,
.quest-dash-section-head > .quest-button {
	margin-left: auto;
}

.quest-dash-add[open] {
	flex-basis: 100%;
}

.quest-dash-add > summary,
.quest-dash-edit > summary,
.quest-chip-menu > summary {
	list-style: none;
	cursor: pointer;
}

.quest-dash-add > summary::-webkit-details-marker,
.quest-dash-edit > summary::-webkit-details-marker,
.quest-chip-menu > summary::-webkit-details-marker,
.quest-more > summary::-webkit-details-marker {
	display: none;
}

.quest-dash-add .quest-form,
.quest-dash-edit .quest-form,
.quest-chip-menu .quest-form {
	margin-top: 0.5rem;
	padding: 0.875rem;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-tile);
}

.quest-dash-group {
	margin: 0.25rem 0 0;
	font-family: var(--quest-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03125rem;
	text-transform: uppercase;
	color: var(--quest-muted);
}

.quest-dash-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quest-dash-item,
.quest-dash-goal,
.quest-dash-card {
	padding: 10px 12px;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-tile);
}

/* The next step: highlighted, with its actions showing. */
.quest-dash-item.is-next {
	padding: 12px 14px 14px;
	border: 2px solid var(--quest-orange);
	border-radius: var(--quest-radius-card);
}

/* Faded, but the title stays above 4.5:1; the ⋯ actions stay full strength. */
.quest-dash-item.is-done .quest-check,
.quest-dash-item.is-done .quest-dash-item-body {
	opacity: 0.7;
}

.quest-dash-item.is-done .quest-dash-item-title {
	text-decoration: line-through;
}

.quest-dash-item-main,
.quest-dash-goal-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.quest-dash-item.is-next .quest-dash-item-main {
	align-items: flex-start;
}

.quest-dash-item-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.quest-dash-item-title {
	font-size: 0.9375rem;
}

.quest-dash-item.is-next .quest-dash-item-title,
.quest-dash-goal .quest-dash-item-title {
	font-size: 1rem;
	font-weight: 700;
}

.quest-dash-item-desc {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--quest-muted);
}

.quest-dash-due {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--quest-orange-dark);
}

/* Round checkbox: a 26px circle inside a 44px button. */
.quest-check-form {
	flex: 0 0 auto;
}

.quest-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -4px 0 -4px -6px;
	padding: 0;
	color: var(--quest-on-navy);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.quest-check-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--quest-input-border);
	border-radius: 50%;
}

.quest-check[aria-pressed="true"] .quest-check-box {
	background: var(--quest-navy);
	border-color: var(--quest-navy);
}

.quest-dash-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.quest-dash-item.is-next > .quest-dash-actions {
	padding-left: 38px;
}

.quest-dash-delete {
	color: var(--quest-orange-dark);
}

.quest-dash-actions form {
	margin: 0;
}

.quest-dash-edit[open] {
	flex-basis: 100%;
	order: 5;
}

/* "⋯" menu for the other rows. */
.quest-more {
	flex: 0 0 auto;
}

.quest-more[open] {
	flex-basis: 100%;
	order: 5;
}

.quest-more-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 44px;
	min-height: 44px;
	margin-left: auto;
	padding: 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--quest-muted);
	border-radius: var(--quest-radius-pill);
	list-style: none;
	cursor: pointer;
}

.quest-more-button > span[aria-hidden] {
	font-size: 1.25rem;
	line-height: 1;
}

.quest-dash-item-main:has(.quest-more[open]),
.quest-dash-goal-head:has(.quest-more[open]) {
	flex-wrap: wrap;
}

.quest-dash-more {
	margin: 0;
}

.quest-dash-goal {
	padding: 14px;
}

.quest-dash-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.quest-dash-progress .quest-progress {
	flex: 1;
	height: 8px;
	margin: 0;
	background: var(--quest-chip-bg);
}


.quest-dash-card {
	padding: 14px;
}

.quest-dash-chips {
	align-items: flex-start;
}

.quest-chip-menu > summary.quest-known-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 14px;
	color: var(--quest-text);
}

.quest-chip-menu[open] {
	flex-basis: 100%;
}

.quest-dash-edit-all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}

.quest-dash-chips > li:has(.quest-chip-menu[open]) {
	flex-basis: 100%;
}

/* Finished quests, tucked under Goals. */
.quest-dash-finished {
	margin-top: 0.75rem;
}

.quest-dash-finished-list {
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.quest-dash-finished-list a {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Dashboard cards (design/4-dashboard.html, 0.12.2) ----------
   One card per quest, plus the "My own tasks" card. Each is a <details>
   (name="quest-dash": one open at a time); the summary is the header. */

.quest-dash-hint {
	margin: -4px 0 0;
	font-size: 0.8125rem;
	color: var(--quest-muted);
}

.quest-dash-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quest-dash-goal {
	padding: 0;
	border-radius: var(--quest-radius-card);
}

/* The open card: 2px orange border (1px of it taken from the padding so nothing shifts). */
.quest-dash-goal:has(> details[open]) {
	border: 2px solid var(--quest-orange);
}

.quest-dash-goal:has(> details[open]) > details {
	margin: -1px;
}

.quest-dash-card-head {
	display: block;
	padding: 14px;
	list-style: none;
	cursor: pointer;
	border-radius: var(--quest-radius-card);
}

.quest-dash-card-head::-webkit-details-marker {
	display: none;
}

.quest-dash-card-head .quest-dash-goal-head {
	gap: 12px;
}

.quest-dash-card-head .quest-dash-item-title {
	font-size: 1rem;
	font-weight: 700;
}

.quest-dash-card-head .quest-dash-item-desc {
	font-size: 0.8125rem;
}

/* The quest's own budget, under its next step. */
.quest-dash-budget {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--quest-body-text);
}

.quest-dash-chevron {
	flex: 0 0 auto;
	margin-left: auto;
	color: var(--quest-muted);
	transition: transform 0.15s ease;
}

details[open] > .quest-dash-card-head .quest-dash-chevron {
	transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
	.quest-dash-chevron {
		transition: none;
	}
}

.quest-dash-card-head .quest-area-count {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--quest-navy);
	white-space: nowrap;
}

.quest-area-icon.is-tile-tasks {
	color: var(--quest-navy);
	background: var(--quest-chip-bg);
}

.quest-dash-tasks-summary {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--quest-orange-dark);
}

.quest-dash-card-body {
	padding: 0 14px 14px;
}

/* Steps and tasks inside an open card: plain rows with a hairline between. */
.quest-dash-steps {
	gap: 0;
}

.quest-dash-steps > .quest-dash-item,
.quest-dash-steps > .quest-dash-item.is-next {
	padding: 6px 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--quest-border);
	border-radius: 0;
}

.quest-dash-steps .quest-dash-item-main {
	align-items: center;
}

.quest-dash-steps .quest-dash-item-title,
.quest-dash-steps .is-next .quest-dash-item-title {
	font-size: 0.9375rem;
	font-weight: 400;
}

.quest-dash-steps .quest-check {
	margin: 0 0 0 -9px;
}

.quest-dash-next-label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.03125rem;
	text-transform: uppercase;
	color: var(--quest-orange-dark);
}

.quest-dash-steps .quest-more[open] .quest-dash-actions {
	margin: 4px 0 6px;
	padding-left: 26px;
}

.quest-dash-card-body > .quest-dash-actions {
	margin-top: 10px;
}

.quest-dash-setup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.875rem;
	color: var(--quest-muted);
}

.quest-dash-card-body .quest-empty-state {
	margin: 0;
}

/* ---------- Scout's states (assets/quest-scout.js) ----------
   The avatar circle carries data-quest-state (idle, listening, thinking,
   talking) and data-quest-mouth (0–3). Poses below apply always; looping
   motion only when the device allows motion. The 96px drawing gets every
   motion; the simplified 48px one (.is-simple) only blinks, shows the ring
   and talks. A custom picture only shows the ring. */

.scout-figure {
	transform-origin: 110px 220px;
}

.scout-head {
	transform-origin: 110px 150px;
	transition: transform 0.35s ease;
}

.scout-eyes {
	transition: transform 0.35s ease;
}

.scout-eye {
	transform-box: fill-box;
	transform-origin: center;
}

.scout-eye circle {
	transition: r 0.25s ease;
}

.scout-needle {
	transform-origin: 110px 203px;
}

/* Mouth shapes: 0 = smile; 1–3 open wider. */
.quest-avatar:is([data-quest-mouth="1"], [data-quest-mouth="2"], [data-quest-mouth="3"]) .scout-mouth-0 {
	opacity: 0;
}

.quest-avatar[data-quest-mouth="1"] .scout-mouth-1,
.quest-avatar[data-quest-mouth="2"] .scout-mouth-2,
.quest-avatar[data-quest-mouth="3"] .scout-mouth-3 {
	opacity: 1;
}

/* Listening: leans in, eyes wide; the ring glows. */
.quest-avatar[data-quest-state="listening"] .quest-scout-svg:not(.is-simple) .scout-head {
	transform: rotate(-5deg) translateY(3px);
}

.quest-avatar[data-quest-state="listening"] .quest-scout-svg:not(.is-simple) .scout-eye circle {
	r: 6.2px;
}

.quest-avatar[data-quest-state="listening"],
.quest-avatar.is-picture[data-quest-state]:not([data-quest-state="idle"]) {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--quest-orange) 45%, transparent);
}

/* Thinking: eyes glance up and to the side. */
.quest-avatar[data-quest-state="thinking"] .quest-scout-svg:not(.is-simple) .scout-eyes {
	transform: translate(-6px, -7px);
}

@media (prefers-reduced-motion: no-preference) {
	/* Every state: an occasional blink (all sizes). */
	.quest-avatar .scout-eye {
		animation: quest-scout-blink 5.4s ease-in-out infinite;
	}

	/* Idle and listening: gentle breathing (96px). */
	.quest-avatar:is([data-quest-state="idle"], [data-quest-state="listening"]) .quest-scout-svg:not(.is-simple) .scout-figure {
		animation: quest-scout-breathe 4s ease-in-out infinite;
	}

	/* Listening: the ring pulses (every size, and a custom picture). */
	.quest-avatar[data-quest-state="listening"],
	.quest-avatar.is-picture[data-quest-state]:not([data-quest-state="idle"]) {
		animation: quest-scout-pulse 1.6s ease-out infinite;
	}

	/* Thinking: eyes glance from side to side; the compass needle spins. */
	.quest-avatar[data-quest-state="thinking"] .quest-scout-svg:not(.is-simple) .scout-eyes {
		animation: quest-scout-glance 2.4s ease-in-out infinite;
	}

	.quest-avatar[data-quest-state="thinking"] .scout-needle {
		animation: quest-scout-spin 1.4s linear infinite;
	}

	/* Talking: a small nod (96px); the mouth follows the voice (quest-scout.js). */
	.quest-avatar[data-quest-state="talking"] .quest-scout-svg:not(.is-simple) .scout-head {
		animation: quest-scout-nod 1.8s ease-in-out infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.scout-head,
	.scout-eyes,
	.scout-eye circle {
		transition: none;
	}
}

@keyframes quest-scout-blink {
	0%, 93%, 100% {
		transform: scaleY(1);
	}

	96% {
		transform: scaleY(0.12);
	}
}

@keyframes quest-scout-breathe {
	0%, 100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-1.5px) scale(1.012);
	}
}

@keyframes quest-scout-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--quest-orange) 60%, transparent);
	}

	100% {
		box-shadow: 0 0 0 12px color-mix(in srgb, var(--quest-orange) 0%, transparent);
	}
}

@keyframes quest-scout-glance {
	0%, 100% {
		transform: translate(-6px, -7px);
	}

	50% {
		transform: translate(5px, -7px);
	}
}

@keyframes quest-scout-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes quest-scout-nod {
	0%, 100% {
		transform: rotate(0deg);
	}

	50% {
		transform: rotate(2deg) translateY(1px);
	}
}

/* ---------- Signing in: code, password, explainer ---------- */

.quest-signin-explainer {
	color: var(--quest-muted);
}

.quest-code-input {
	max-width: 12rem;
	font-family: var(--quest-heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-align: center;
}

.quest-password-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.quest-password-row input {
	flex: 1 1 auto;
	min-width: 0;
}

.quest-show-password {
	flex: 0 0 auto;
	min-width: 4.5rem;
}

.quest-form-inline {
	margin: 0 0 1rem;
}

.quest-password {
	margin: 0 0 1.5rem;
}

.quest-password-edit > summary {
	display: inline-flex;
	list-style: none;
	margin-bottom: 0.75rem;
}

.quest-password-edit > summary::-webkit-details-marker {
	display: none;
}

.quest-password-remove {
	margin-top: 0.5rem;
}

/* ---------- Landing page (design/5-landing.html) ----------
   What visitors see before they sign in: on a wide screen two cards side
   by side (Scout with What is Quest?, and Join with "More options" for
   the other sign-ins), on a phone one column in the same order. */

.quest-landing-page .quest-main {
	max-width: calc(1200px + 3rem);
	padding: 1.5rem 1.5rem 3rem;
}

.quest-landing {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start; /* Each card keeps its own height. */
	gap: 24px;
}

@media (min-width: 60rem) {
	.quest-landing {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.quest-landing-notice {
	margin: 0 0 1.5rem;
}

.quest-landing-card {
	min-width: 0;
	padding: 1.5rem;
	color: var(--quest-body-text);
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-card);
	scroll-margin-top: 1rem;
}

.quest-landing-card h2 {
	margin: 0 0 0.5rem;
	font-family: var(--quest-heading);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--quest-text);
}

.quest-landing-card > p {
	margin: 0 0 1rem;
}

/* Scout and What is Quest?: a white card like the chat screen's (only
   Scout's navy circle and accent ring stay navy). */
.quest-landing-scout {
	color: var(--quest-body-text);
}

.quest-landing-hello {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 1.5rem;
}

.quest-landing-avatar {
	flex: 0 0 auto;
}

.quest-avatar-hero {
	width: 196px;
	height: 196px;
	border-width: 6px;
}

.quest-landing-words {
	flex: 1 1 14rem;
	min-width: 0;
}

.quest-landing-label {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--quest-orange-dark);
}

.quest-landing-scout h1 {
	margin: 0.25rem 0 0.5rem;
	font-family: var(--quest-heading);
	font-size: 2.25rem;
	line-height: 1.1;
	color: var(--quest-text);
}

.quest-landing-intro {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	color: var(--quest-body-text);
}

.quest-landing-play {
	gap: 0.5rem;
}

.quest-landing-play:focus-visible {
	outline: var(--quest-focus);
	outline-offset: 2px;
}

/* Join and sign in. */
.quest-signup {
	margin: 0;
}

.quest-signup-button {
	min-height: 56px;
	font-size: 1.125rem;
}

.quest-signup-form {
	margin-bottom: 0;
}

.quest-signup-thanks {
	margin: 0;
}

/* The honeypot: never shown, and skipped by screen readers and Tab. */
.quest-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.quest-passkey-button {
	gap: 0.5rem;
	min-height: 56px;
}

.quest-code-request {
	margin-top: 0.75rem;
}

.quest-code-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 0.3em;
	min-height: 44px;
	padding: 0.5rem;
	font-weight: 700;
	text-align: center;
	color: var(--quest-orange-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	list-style: none;
	cursor: pointer;
}

.quest-code-summary::-webkit-details-marker {
	display: none;
}

.quest-code-summary:focus-visible {
	outline: var(--quest-focus);
	outline-offset: 2px;
}

/* No passkeys on this browser (or switched off): the code is the main way in. */
.quest-landing-join.is-no-passkeys .quest-code-summary,
.quest-landing-join:has(.quest-passkey-signin[hidden]) .quest-code-summary {
	min-height: 56px;
	padding: 0.5rem 1.25rem;
	color: var(--quest-on-navy);
	text-decoration: none;
	background: var(--quest-navy);
	border-radius: var(--quest-radius-pill);
}

.quest-landing-join.is-no-passkeys .quest-code-ask,
.quest-landing-join:has(.quest-passkey-signin[hidden]) .quest-code-ask {
	display: none;
}

/* What is Quest?, inside Scout's card. */
.quest-landing-about {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--quest-border);
}

.quest-landing-card .quest-landing-lead {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
}

.quest-about-items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 2×2 when the card is wide enough (a phone gets one column). */
@media (min-width: 30rem) {
	.quest-about-items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 60rem) and (max-width: 72rem) {
	html[data-quest-text="xlarge"] .quest-about-items {
		grid-template-columns: minmax(0, 1fr);
	}
}

.quest-about-item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.quest-about-icon {
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--quest-tile-3);
	background: var(--quest-tile-3-bg);
	border-radius: var(--quest-radius-tile);
}

.quest-about-item-title {
	display: block;
	color: var(--quest-text);
}

.quest-about-item-text {
	display: block;
	font-size: 0.9375rem;
	color: var(--quest-muted);
}

.quest-landing-card .quest-landing-footer {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	font-size: 0.9375rem;
	color: var(--quest-muted);
	border-top: 1px solid var(--quest-border);
}

/* "More options": the passkey, code and password sign-ins, shown in place. */
.quest-more {
	margin-top: 1rem;
	scroll-margin-top: 1rem;
}

.quest-more-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 700;
	color: var(--quest-orange-dark);
	background: transparent;
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-more-toggle[hidden] {
	display: none;
}

.quest-more-toggle:hover {
	border-color: var(--quest-orange-dark);
}

.quest-more-toggle:focus-visible {
	outline: var(--quest-focus);
	outline-offset: 2px;
}

.quest-more-chevron {
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.quest-more-toggle[aria-expanded="true"] .quest-more-chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.quest-more-chevron {
		transition: none;
	}
}

.quest-more-panel {
	padding-top: 1rem;
}

.quest-more-panel[hidden] {
	display: none;
}

/* Password sign-in, inside "More options". */
.quest-landing-password {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--quest-border);
	scroll-margin-top: 1rem;
}

.quest-landing-password h3 {
	margin: 0 0 0.25rem;
	font-family: var(--quest-heading);
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--quest-text);
}

.quest-landing-password .quest-form {
	margin-bottom: 0;
}

.quest-landing-password .quest-hint {
	margin: 0 0 0.5rem;
}

.quest-forgot {
	margin: 0;
}

.quest-forgot .quest-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.quest-landing-card .quest-signin-explainer {
	margin: 1.25rem 0 0;
	font-size: 0.9375rem;
	color: var(--quest-muted);
}

/* Header: "Already a member? Sign in". */
.quest-header-signin {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.5em;
	font-size: 0.875em;
	font-weight: 700;
	white-space: nowrap;
	color: var(--quest-on-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.quest-header-signin:hover {
	color: var(--quest-on-navy);
}

.quest-header-signin:focus-visible {
	outline: 3px solid var(--quest-on-navy);
	outline-offset: 1px;
}

.quest-header-signin-ask {
	margin-right: 0.3em;
	font-weight: 500;
}

@media (max-width: 399px) {
	.quest-header-signin-ask {
		display: none;
	}
}

@media (max-width: 30rem) {
	.quest-landing-page .quest-main {
		padding-right: 1rem;
		padding-left: 1rem;
	}

	.quest-landing-card {
		padding: 1.25rem 1rem;
	}

	.quest-landing-hello {
		justify-content: center;
		text-align: center;
	}
}

/* ---------- Continue with Google / Apple ----------
   Each provider's own button style (their brand guidelines): Google is
   white with a grey outline, the four-colour G and Roboto Medium; Apple is
   black with the white Apple logo. These are the providers' brand colours,
   not Quest's theme tokens, so Quest Design doesn't change them. */
:root {
	--quest-google-bg: #fff;
	--quest-google-border: #747775;
	--quest-google-text: #1f1f1f;
	--quest-apple-bg: #000;
	--quest-apple-text: #fff;
}

.quest-oidc-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 1rem;
}

.quest-oidc-form {
	margin: 0;
}

.quest-oidc-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
	padding: 0.5rem 1rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	border-radius: var(--quest-radius-pill);
	cursor: pointer;
}

.quest-oidc-button svg {
	flex: 0 0 auto;
}

.quest-oidc-button.is-google {
	font-family: "Roboto", var(--quest-body);
	color: var(--quest-google-text);
	background: var(--quest-google-bg);
	border: 1px solid var(--quest-google-border);
}

.quest-oidc-button.is-apple {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--quest-body);
	color: var(--quest-apple-text);
	background: var(--quest-apple-bg);
	border: 1px solid var(--quest-apple-bg);
}

.quest-oidc-button.is-google:hover {
	color: var(--quest-google-text);
	background: color-mix(in srgb, var(--quest-google-text) 6%, var(--quest-google-bg));
}

.quest-oidc-button.is-apple:hover {
	color: var(--quest-apple-text);
	background: color-mix(in srgb, var(--quest-apple-text) 15%, var(--quest-apple-bg));
}

.quest-oidc-button:focus-visible {
	outline: var(--quest-focus);
	outline-offset: 2px;
}

/* Me page: Linked sign-ins. */
.quest-linked {
	margin: 0 0 1.25rem;
	padding: 1rem;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-card);
	scroll-margin-top: 1rem;
}

.quest-linked h3 {
	margin-top: 0;
}

.quest-linked-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.quest-linked-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.quest-linked-item .quest-oidc-form {
	flex-basis: 100%;
}

.quest-linked-name {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow-wrap: anywhere;
}

.quest-linked-email {
	font-size: 0.9375rem;
	color: var(--quest-muted);
}

.quest-linked-last {
	flex-basis: 100%;
}

/* ---------- Dashboard: "Need an idea?" and the testing note ---------- */

/* The five starter chips at the top of the Dashboard (light card version). */
.quest-dash-ideas {
	padding: 14px;
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-card);
}

.quest-dash-ideas .quest-chips {
	justify-content: flex-start;
	margin: 0;
}

.quest-dash-ideas .quest-chip {
	color: var(--quest-text);
	text-decoration: none;
	background: var(--quest-gray);
	border-color: var(--quest-border);
}

.quest-dash-ideas .quest-chip:hover {
	border-color: var(--quest-navy);
}

.quest-dash-ideas .quest-chip:focus-visible {
	outline: var(--quest-focus);
	outline-offset: 2px;
}

/* A small card at the very bottom: Quest is in testing, with its links. */
.quest-dash-testing {
	margin-top: 0.5rem;
	padding: 12px 14px;
	font-size: 0.9375rem;
	color: var(--quest-muted);
	background: var(--quest-card);
	border: 1px solid var(--quest-border);
	border-radius: var(--quest-radius-card);
}

.quest-dash-testing p {
	margin: 0;
}

.quest-dash-testing-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.quest-dash-testing-links .quest-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* The large read-aloud Scout: room is made inside the chat window instead. */
.quest-home-chat.quest-chatting.quest-scout-big .quest-welcome {
	padding-bottom: 0;
}

.quest-home-chat.quest-chatting.quest-scout-big .quest-chat {
	padding-top: calc(1.25rem + var(--quest-stage-room, 0px));
}

.quest-voice-option[aria-disabled="true"] {
	cursor: not-allowed;
}

.quest-voice-option[aria-disabled="true"] .quest-voice-option-name {
	color: var(--quest-muted);
	text-decoration: line-through;
}

/* The chat window's dock never animates its padding (it would leave a gap under the message box). */
.quest-home-chat.quest-chatting .quest-welcome {
	transition: none;
}