/**
 * OWQ assessment — form and results.
 *
 * Colours come from the active theme's palette via the semantic tokens in
 * unified-theme/theme.json, each with the literal book-cover value as a
 * fallback so the plugin still looks deliberate under another theme.
 *
 * Two contrast notes, since the obvious choices here fail WCAG 2.2 §1.4.11
 * and it would be easy to reinstate them by accident:
 *
 * - The progress rail is moss on lime-tint, not electric on sand. Chartreuse
 *   on any light ground sits near 2:1, and a progress bar is a UI component
 *   that has to clear 3:1. The rail still reads as green, because both ends
 *   of it are in the chartreuse family.
 * - No bar fill uses gold or electric. Both are below 2:1 on white. Gold is
 *   a deep-green-surface colour only (DESIGN-GUIDELINES.md §2).
 */

/*
 * The palette is declared on BOTH roots, and that is not redundant.
 *
 * .owq is the <form>; .owq-results is what replaces it after submission and
 * is its sibling, not its child. Custom properties inherit down the tree and
 * nowhere else, so a results page that only inherited from .owq got none of
 * these — every var(--owq-grid) and var(--owq-accent) in the result SVG
 * resolved to nothing, and the chart drew with browser defaults. Adding a
 * root here is the fix; splitting the palette into two lists would only
 * invite them to drift.
 *
 * The same applies to the standalone banners and the history box. .owq-error
 * has always been echoed as a sibling of the form rather than inside it, so
 * it inherited none of this and its own rule below resolved to nothing: the
 * border had no colour and was dropped, and the alert rendered as bare text
 * at exactly the moment somebody needed to notice it.
 */
.owq,
.owq-results,
.owq-error,
.owq-notice,
.owq-history-request {
	--owq-ink: var(--wp--preset--color--ink, #1B3549);
	--owq-paper: var(--wp--preset--color--paper, #F4F4E6);
	--owq-white: var(--wp--preset--color--white, #FFFFFF);
	--owq-accent: var(--wp--preset--color--clay, #0A6B8C);
	--owq-accent-hover: var(--wp--preset--color--clay-dark, #075670);
	--owq-info: var(--wp--preset--color--teal, #1B5878);
	--owq-info-tint: var(--wp--preset--color--teal-tint, #E4F0F3);
	--owq-muted: var(--wp--preset--color--stone, #4E5C67);
	--owq-grid: var(--wp--preset--color--sand, #DCDCC4);
	--owq-green: var(--wp--preset--color--electric, #C3CA46);
	--owq-fill: var(--wp--preset--color--lime-tint, #E3E9B4);
	--owq-deep: var(--wp--preset--color--moss, #363B1C);
	--owq-warn: var(--wp--preset--color--amber, #96611A);
	--owq-warn-surface: var(--wp--preset--color--surface-pending, #F7EFE0);
	--owq-error: var(--wp--preset--color--state-error, #9A4A38);
	--owq-error-surface: var(--wp--preset--color--surface-error, #F7EAE7);
	--owq-ease: cubic-bezier(.22, .61, .36, 1);

	/*
	 * Profile-chart series, oldest to newest. Distinguished by dash pattern
	 * as well as colour (see owq_profile_strokes) so the chart survives
	 * greyscale printing and colour-blind readers — it is a clinical figure
	 * that gets photocopied into notes.
	 */
	--owq-series-1: var(--wp--preset--color--stone, #4E5C67);
	--owq-series-2: var(--wp--preset--color--teal, #1B5878);
	--owq-series-3: var(--wp--preset--color--clay, #0A6B8C);
}

.owq {
	display: block;
	margin-inline: auto;
}

/*
 * The measure, and why it needs !important.
 *
 * WordPress's constrained layout gives every child of a .wp-block-group a
 * `max-width: var(--wp--style--global--content-size)` through a selector of
 * specificity (0,2,0) — two classes. `.owq` is (0,1,0) and loses, so the
 * form was rendering at the band's full 1200px: a 24-question instrument
 * stretched into one long line per question, five demographic fields across,
 * and a progress rail so wide and thin it read as a rule rather than a bar.
 *
 * A questionnaire has a reading measure like any other body text. Nothing
 * short of !important reaches past core's layout rule here, and the theme
 * sets the same precedent a few hundred lines into theme.css for the same
 * reason.
 */
form.owq,
.owq-results {
	max-width: 44rem !important;
}

.owq *,
.owq *::before,
.owq *::after {
	box-sizing: border-box;
}

/* Visually hidden, still announced. The six response anchors ride in here:
   the buttons show a numeral, screen readers get the full wording. */
.owq-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.owq-hp {
	position: absolute;
	left: -9999px;
}

/*
 * `hidden` is a display:none of the weakest possible specificity, so any
 * `display: flex` in this file silently defeats it — and the step script
 * hides every step, every item and every conditional reveal that way. One
 * catch-all is safer than remembering to pair each rule with its own
 * [hidden] variant.
 */
.owq [hidden] {
	display: none !important;
}

/* ==========================================================================
   PROGRESS RAIL
   ========================================================================== */

/*
 * --owq-rail-top is measured from the theme's sticky header by owq-steps.js
 * and set on the form. At top:0 the rail slid underneath .site-header, which
 * is also sticky and sits at z-index 40 — so the one element that tells a
 * person how far through they are was the one element hidden the moment they
 * scrolled. The height is not hardcoded because the header wraps to two rows
 * in locales with longer navigation labels (see theme.css, .site-header).
 */
.owq-rail {
	position: sticky;
	top: var(--owq-rail-top, 0px);
	z-index: 20;
	margin-bottom: 1.5rem;
	/* Opaque, not a wash: the rail is only as wide as the measure, so a
	   translucent bar let the page show through beside and behind it. */
	background: var(--owq-paper);
	border-bottom: 1px solid var(--owq-grid);
	box-shadow: 0 6px 16px -12px rgba(27, 53, 73, .5);
}

.owq-track {
	height: 6px;
	border-radius: 100px;
	background: var(--owq-fill);
	overflow: hidden;
}

.owq-progress {
	height: 100%;
	width: 0;
	background: var(--owq-deep);
	transition: width .35s var(--owq-ease);
}

.owq-rail-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	min-height: 3.25rem;
	padding-block: .5rem;
}

.owq-back {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1.5px solid var(--owq-grid);
	border-radius: 9px;
	background: var(--owq-white);
	color: var(--owq-muted);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color .18s var(--owq-ease), color .18s var(--owq-ease);
}

.owq-back:hover:not(:disabled) {
	border-color: var(--owq-accent);
	color: var(--owq-accent);
}

.owq-back:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.owq-chip {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 600;
	font-size: .8rem;
	padding: .2rem .7rem;
	border-radius: 100px;
	background: var(--owq-fill);
	color: var(--owq-deep);
}

.owq-modeswitch {
	flex: none;
	padding: .25rem .35rem;
	border: 0;
	background: none;
	font: inherit;
	font-size: .82rem;
	color: var(--owq-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.owq-modeswitch:hover {
	color: var(--owq-accent-hover);
}

.owq-count {
	margin-inline-start: auto;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	font-size: .85rem;
	font-weight: 600;
	color: var(--owq-ink);
}

/*
 * "All optional" is not a progress count and should not whisper like one — it
 * is the answer to the question a person asks on reaching a form full of
 * blank fields, and it was set in muted grey mono at the far edge of the rail
 * where it read as a timestamp. Given a pill in the info register, so it is
 * distinct from the green sub-scale chip on the other side of the rail.
 */
.owq-count.is-standing {
	padding: .25rem .8rem;
	border-radius: 100px;
	background: var(--owq-info-tint);
	color: var(--owq-info);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 600;
	font-size: .82rem;
	letter-spacing: 0;
}

/* ==========================================================================
   STEPS
   ========================================================================== */

.owq-step {
	margin: 0 0 1.75rem;
	padding: 0;
	border: 0;
}

/* Only the enhanced view gets the animation. Without JS every step is on
   screen at once and 5 things easing in at load is noise, not information. */
.owq-enhanced .owq-step:not([hidden]),
.owq-enhanced .owq-item:not([hidden]) {
	animation: owq-in .3s var(--owq-ease) both;
}

@keyframes owq-in {
	from { opacity: 0; transform: translateY(8px); }
}

.owq-step legend {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 0;
	margin-bottom: 1.25rem;
	float: left;   /* so the flex column actually applies in Chrome */
	width: 100%;
}

.owq-step legend + * {
	clear: both;
}

.owq-section-name {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--owq-ink);
}

.owq-section-frame {
	font-size: .9rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--owq-muted);
}

/* In one-question-at-a-time mode the chip in the rail already names the
   sub-scale, so the heading would be the same word twice on one screen. */
.owq.is-focus .owq-section-name {
	display: none;
}

.owq-eyebrow {
	margin: 0 0 .5rem;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .7rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--owq-muted);
}

/* --- intro --------------------------------------------------------------- */

.owq-intro-title {
	margin: 0 0 1rem;
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
	line-height: 1.15;
	text-wrap: balance;
}

.owq-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.owq-meta li {
	font-size: .82rem;
	padding: .22rem .75rem;
	border: 1px solid var(--owq-grid);
	border-radius: 100px;
	background: var(--owq-white);
	color: var(--owq-muted);
}

.owq-body {
	margin: 0 0 1rem;
	color: var(--owq-muted);
}

/* --- the explanation, above the items ------------------------------------
   Required to sit above the questionnaire, not below it: someone who does
   not know what is being asked of them answers a different question, and an
   explanation underneath arrives too late to help.
   -------------------------------------------------------------------------- */

.owq-explain {
	margin: 0 0 1.5rem;
	padding: 1.25rem 1.5rem;
	border-inline-start: 4px solid var(--owq-grid);
	border-start-end-radius: 12px;
	border-end-end-radius: 12px;
	background: var(--owq-white);
}

.owq-explain .owq-body:last-child {
	margin-bottom: 0;
}

/* The lead paragraph is the one piece of explanation that is never
   collapsed, so it carries slightly more weight than body copy. */
.owq-lead {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--owq-ink);
}

/* The storage reassurance under the Start button. Quiet on purpose: it
   answers a worry, it is not a selling point. */
.owq-note {
	margin: 0 0 1.75rem;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--owq-muted);
}

.owq-actions-start {
	margin-bottom: 1rem;
}

/* --- collapsed panels ----------------------------------------------------
   Progressive disclosure on the landing screen: the detail is all still
   here, but a visitor reaches the Start button without scrolling past it.
   Native <details>, per docs/DESIGN-GUIDELINES.md §8. Styled here rather
   than borrowed from the theme's details.faq, because a plugin cannot
   assume unified-theme is active.
   -------------------------------------------------------------------------- */

.owq-panels {
	margin: 0;
	border-top: 1px solid var(--owq-grid);
}

.owq-panel {
	border-bottom: 1px solid var(--owq-grid);
}

.owq-panel-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1rem 0;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	font-size: .98rem;
	color: var(--owq-ink);
}

/* Safari still paints the disclosure triangle without this. */
.owq-panel-summary::-webkit-details-marker {
	display: none;
}

.owq-panel-summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--owq-accent);
}

.owq-panel[open] > .owq-panel-summary::after {
	content: "\2013";
}

/* Keyboard focus has to land somewhere visible — the summary is the
   control, and removing the outline here would strand keyboard users. */
.owq-panel-summary:focus-visible {
	outline: 2px solid var(--owq-accent);
	outline-offset: 3px;
}

.owq-panel-body {
	padding-bottom: 1.1rem;
}

.owq-panel-body > .owq-body:last-child {
	margin-bottom: 0;
}

.owq-faq-q {
	margin: 0 0 .35rem;
	font-size: .95rem;
	color: var(--owq-ink);
}

.owq-faq-q + .owq-body {
	margin-bottom: 1.1rem;
}

/* --- the scale key, alongside the questions ------------------------------
   One open copy of the six anchors for the whole questionnaire, shown while
   answering. Per-item it would be 5-7 words six times over under every
   question; on the landing page only, it is a page a respondent has to leave
   mid-questionnaire to re-read.
   -------------------------------------------------------------------------- */

.owq-scalekey {
	margin: 0 0 1.25rem;
	padding: .9rem 1rem 1.1rem;
	border: 1px solid var(--owq-grid);
	border-radius: 12px;
	background: var(--owq-white);
}

.owq-scalekey[hidden] {
	display: none;
}

.owq-scalekey-title {
	margin: 0;
	font-weight: 600;
	font-size: .88rem;
	color: var(--owq-accent);
}

/* The anchors follow the title directly here; the top margin they carry in
   the landing panel would double the gap the padding already gives. */
.owq-scalekey > .owq-explain-scale {
	margin-top: .6rem;
}

/*
 * The six anchors. Printed in two places — the "How to respond" panel on the
 * landing screen and the scale key that travels with the questionnaire —
 * from one PHP function, because inside the items themselves only the
 * numerals appear. There is no room for 5-7 words six times over on a phone,
 * which makes this the one place a respondent can read what each button
 * actually means, and therefore part of the instrument rather than
 * decoration.
 */
.owq-explain-scale {
	display: grid;
	gap: .35rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.owq-explain-scale li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: .6rem;
	align-items: baseline;
	font-size: .88rem;
	line-height: 1.5;
}

.owq-explain-num {
	display: inline-grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 100px;
	background: var(--owq-fill);
	color: var(--owq-deep);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	font-size: .82rem;
	font-weight: 600;
}

.owq-explain-anchor {
	color: var(--owq-muted);
}

/* ==========================================================================
   ITEMS
   ========================================================================== */

.owq-items {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.owq-item {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--owq-grid);
	border-radius: 14px;
	background: var(--owq-white);
}

/* One question alone on the screen is not a card in a list — it is the
   screen. Drop the frame and let it breathe. */
.owq.is-focus .owq-item {
	padding: 0;
	border: 0;
	background: none;
	gap: 1rem;
}

.owq-item.is-answered {
	border-inline-start: 4px solid var(--owq-green);
}

.owq-item.is-flagged {
	border-color: var(--owq-error);
	background: var(--owq-error-surface);
}

.owq-num {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--owq-muted);
}

.owq-stem {
	margin: 0;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.4;
	text-wrap: balance;
}

.owq.is-focus .owq-stem {
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
	line-height: 1.28;
	letter-spacing: -.008em;
}

/* --- the six-point scale -------------------------------------------------- */

.owq-scale {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: .4rem;
}

.owq-opt {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 48px;
	border: 1.5px solid var(--owq-muted);
	border-radius: 11px;
	background: var(--owq-white);
	cursor: pointer;
	transition: background-color .16s var(--owq-ease), color .16s var(--owq-ease),
		border-color .16s var(--owq-ease), transform .16s var(--owq-ease);
}

.owq.is-focus .owq-opt {
	min-height: 60px;
}

.owq-opt input[type="radio"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.owq-opt-num {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 600;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.owq-opt:hover:not(:has(input:checked)) {
	border-color: var(--owq-accent);
	color: var(--owq-accent);
	transform: translateY(-2px);
}

/*
 * Selected state is the one place colour appears on the scale, and it marks
 * *your choice*, never *the right choice*. A red-to-green ramp across 1-6 is
 * the obvious styling and is wrong here: this is a scored psychometric
 * instrument, and colouring the anchors by valence tells the respondent which
 * end they are supposed to be at.
 */
.owq-opt:has(input:checked) {
	background: var(--owq-accent);
	border-color: var(--owq-accent);
	color: var(--owq-white);
	transform: none;
}

.owq-opt:has(input:focus-visible) {
	outline: 3px solid var(--owq-info);
	outline-offset: 2px;
}

.owq-ends {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin: 0;
	font-size: .75rem;
	line-height: 1.35;
	color: var(--owq-muted);
}

.owq-ends span:last-child {
	text-align: end;
}

.owq-echo {
	margin: 0;
	min-height: 1.4rem;
	font-size: .9rem;
	font-weight: 600;
	color: var(--owq-info);
}

.owq-echo:empty {
	visibility: hidden;
}

/* ==========================================================================
   ABOUT YOU / CONSENT
   ========================================================================== */

.owq-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1rem;
}

.owq-field {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
}

.owq-field > label {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	font-weight: 600;
	font-size: .92rem;
}

.owq-hint {
	font-size: .78rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--owq-muted);
}

.owq-field input[type="text"],
.owq-field input[type="email"],
.owq-field select,
.owq-other input {
	width: 100%;
	padding: .6rem .75rem;
	border: 1.5px solid var(--owq-muted);
	border-radius: 9px;
	background: var(--owq-white);
	color: var(--owq-ink);
	font: inherit;
	font-size: .95rem;
}

.owq-field input:focus-visible,
.owq-field select:focus-visible,
.owq-other input:focus-visible {
	outline: 3px solid var(--owq-info);
	outline-offset: 1px;
}

.owq-field input:user-invalid {
	border-color: var(--owq-error);
}

/* The "Other, describe it yourself" partner, and the email field. Rendered
   open and closed by script — a reveal that needs JS must fail open. */
.owq-other {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-top: .6rem;
}

.owq-other[hidden] {
	display: none;
}

.owq-other-label {
	font-size: .82rem;
	font-weight: 600;
}

.owq-consent-card {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.1rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid var(--owq-grid);
	border-radius: 14px;
	background: var(--owq-white);
}

.owq-consent-card.is-required {
	border-inline-start: 4px solid var(--owq-accent);
}

/*
 * Not display:flex on the label — the consent sentence is a text run with an
 * inline <a> in it, and flex promotes each of those to its own item, breaking
 * one sentence into side-by-side columns. Hanging indent instead, so the text
 * stays a single wrapping paragraph beside the box.
 */
.owq-check {
	display: block;
	position: relative;
	padding-inline-start: 1.9rem;
	font-size: .95rem;
	line-height: 1.55;
	cursor: pointer;
}

.owq-check input[type="checkbox"] {
	position: absolute;
	inset-inline-start: 0;
	top: .28em;
	width: 1.1rem;
	height: 1.1rem;
	margin: 0;
	accent-color: var(--owq-accent);
}

.owq-check strong {
	font-weight: 600;
}

.owq-why {
	margin: 0;
	padding-inline-start: 1.9rem;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--owq-muted);
}

.owq-consent-card .owq-other {
	padding-inline-start: 1.9rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.owq-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-top: 1.5rem;
}

.owq-actions[hidden] {
	display: none;
}

.owq-btn {
	padding: .7rem 1.6rem;
	border: 1.5px solid var(--owq-accent);
	border-radius: 100px;
	background: var(--owq-accent);
	color: var(--owq-white);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 600;
	font-size: .95rem;
	cursor: pointer;
	transition: background-color .18s var(--owq-ease), border-color .18s var(--owq-ease);
}

.owq-btn:hover:not(:disabled) {
	background: var(--owq-accent-hover);
	border-color: var(--owq-accent-hover);
}

.owq-btn:focus-visible {
	outline: 3px solid var(--owq-info);
	outline-offset: 2px;
}

.owq-btn:disabled {
	background: var(--owq-muted);
	border-color: var(--owq-muted);
	opacity: .45;
	cursor: not-allowed;
}

.owq-btn-ghost {
	background: transparent;
	color: var(--owq-accent);
}

.owq-btn-ghost:hover:not(:disabled) {
	background: var(--owq-info-tint);
	border-color: var(--owq-accent-hover);
	color: var(--owq-accent-hover);
}

.owq-btn-ghost:disabled {
	background: transparent;
	color: var(--owq-muted);
}

/* ==========================================================================
   ERRORS
   ========================================================================== */

.owq-error {
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--owq-error);
	border-radius: 12px;
	background: var(--owq-error-surface);
	color: var(--owq-error);
}

.owq-error:focus-visible {
	outline: 3px solid var(--owq-error);
	outline-offset: 2px;
}

/* ==========================================================================
   RESULTS
   ========================================================================== */

.owq-results {
	margin-inline: auto;
}

.owq-results h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
	line-height: 1.15;
}

/* --- profile chart -------------------------------------------------------
   The respondent's whole result. Mirrors Figure 12.1 of the book: 24 items
   across, the 1-6 response up, one dated line per sitting.
   -------------------------------------------------------------------------- */

.owq-profile {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--owq-grid);
	border-radius: 18px;
	background: var(--owq-white);
}

.owq-profile-svg {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The axis numerals run 1-24 along the bottom, which at phone width is about
 * 13px of room each. They are allowed to get small because they are a
 * reference grid rather than reading matter — the shape of the line is what
 * carries the meaning, and the visually-hidden table carries the exact
 * values for anyone who needs them.
 */
.owq-axis-label {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	fill: var(--owq-muted);
}

.owq-legend-label {
	font-size: 13px;
	font-weight: 600;
	fill: var(--owq-ink);
}

.owq-profile-caption {
	margin-top: 1rem;
}

.owq-profile-date {
	margin: 0 0 .4rem;
	font-size: .95rem;
}

.owq-profile-how {
	margin: 0 0 .6rem;
	font-size: .86rem;
	line-height: 1.55;
	color: var(--owq-muted);
}

/* Which instrument produced the diagram. Sits with the book credit in
   weight — provenance, not commentary — because that is what it is. */
.owq-profile-instrument {
	margin: 0 0 .6rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--owq-muted);
}

.owq-profile-caption .owq-credit,
.owq-profile-caption figcaption {
	font-size: .74rem;
	line-height: 1.45;
	color: var(--owq-muted);
}

/* --- readings ------------------------------------------------------------ */

.owq-readings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.owq-reading {
	padding: 1rem 1.25rem;
	border-inline-start: 4px solid var(--owq-muted);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: 12px;
	border-end-end-radius: 12px;
	background: var(--owq-white);
}

.owq-reading h3 {
	margin: 0 0 .4rem;
	font-size: 1rem;
}

.owq-reading p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
}

/*
 * Two readings only, and neither is colour-coded by band. The band is
 * internal — colouring the overall reading red for "poor" would hand the
 * respondent the grade the brief says they must not be given, just in
 * pigment instead of digits.
 */
.owq-reading-overall  { border-color: var(--owq-accent); background: var(--owq-white); }
.owq-reading-wellness { border-color: var(--owq-info);   background: var(--owq-info-tint); }

.owq-repeat {
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
	border-inline-start: 4px solid var(--owq-green);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	border-start-end-radius: 12px;
	border-end-end-radius: 12px;
	background: var(--owq-fill);
	font-size: .93rem;
}

.owq-disclaimer {
	font-size: .88rem;
	font-style: italic;
	color: var(--owq-muted);
}

.owq-retake-wrap {
	margin-top: 1.5rem;
}

/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */

@media (max-width: 30rem) {
	.owq-scale {
		gap: .28rem;
	}

	.owq-opt {
		min-height: 46px;
		border-radius: 9px;
	}

	.owq-opt-num {
		font-size: .95rem;
	}

	.owq-ends {
		gap: .75rem;
		font-size: .7rem;
	}

	.owq-item {
		padding: 1rem;
	}

	.owq-bar {
		grid-template-columns: 4.5rem 1fr auto;
		gap: .15rem .5rem;
	}

	/*
	 * A 320px rail cannot fit a back button, a chip, a count and "See all in
	 * Belonging" on one line. Give the switch its own row instead of dropping
	 * it — list mode is the accommodation for people who need to see the
	 * whole section, and taking it away on small screens takes it away from
	 * the people most likely to want it.
	 */
	.owq-modeswitch {
		order: 3;
		flex-basis: 100%;
		padding-inline: 0;
		text-align: start;
	}
}

/* ==========================================================================
   HISTORY
   ==========================================================================
   The "if we hold results, a link is on its way" banner, and the box that
   asks for one. Styled as a quiet aside rather than a second call to action:
   the questionnaire above is what the page is for, and this serves the
   minority who took it months ago and no longer have the email. */

.owq-notice {
	max-width: 44rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--owq-info);
	border-radius: 12px;
	background: var(--owq-info-tint);
	color: var(--owq-info);
}

.owq-notice:focus-visible {
	outline: 3px solid var(--owq-info);
	outline-offset: 2px;
}

.owq-history-request {
	max-width: 44rem;
	margin-block-start: 3rem;
	padding: 1.5rem;
	border: 1px solid var(--owq-grid);
	border-radius: 14px;
	background: var(--owq-white);
	color: var(--owq-ink);
}

.owq-history-request h2 {
	margin-block: 0 .5rem;
	font-size: 1.15rem;
}

.owq-history-request p {
	margin-block: 0 1rem;
	font-size: .92rem;
	line-height: 1.6;
}

.owq-history-request .owq-why {
	padding-inline-start: 0;
	margin-block-end: 0;
}

/* Label, field and button in a row where there is room, stacked where there
   is not — the field is the only thing that should grow. */
.owq-history-form {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: .6rem;
	margin-block-end: 1rem;
}

.owq-history-form label {
	flex-basis: 100%;
	font-size: .84rem;
	color: var(--owq-muted);
}

.owq-history-form input[type="email"] {
	flex: 1 1 16rem;
	min-width: 0;
	padding: .65rem .8rem;
	border: 1.5px solid var(--owq-grid);
	border-radius: 10px;
	background: var(--owq-white);
	color: var(--owq-ink);
	font: inherit;
}

.owq-history-form input[type="email"]:focus-visible {
	outline: 3px solid var(--owq-accent);
	outline-offset: 1px;
	border-color: var(--owq-accent);
}

.owq-history-form .owq-submit {
	flex: 0 0 auto;
	padding: .7rem 1.25rem;
	border: 0;
	border-radius: 10px;
	background: var(--owq-accent);
	color: var(--owq-white);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s var(--owq-ease);
}

.owq-history-form .owq-submit:hover,
.owq-history-form .owq-submit:focus-visible {
	background: var(--owq-accent-hover);
}

/* ==========================================================================
   RIGHT-TO-LEFT
   ==========================================================================
   Everything above is written in logical properties and mirrors itself, per
   docs/MULTILINGUAL.md §5. The back arrow is the exception: the markup uses a
   literal <- glyph, and mirroring it beats keeping a second string. */

[dir="rtl"] .owq-back {
	transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
	.owq *,
	.owq *::before,
	.owq *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}