/*
 * nnq2/quiz: the plugin's only CSS (rules §4 cap: 20 lines; 10 used). Loaded per
 * block via block.json. Presets and custom properties only, 4px radius token,
 * no shadows. Buttons, headings, text colours and sizes come from theme.json
 * through core classes in the markup, so they need no lines here.
 */

/* The hidden attribute must win over the display values set below. */
.wp-block-nnq2-quiz [hidden] { display: none !important; }
/* Native fieldset/legend carry a UA border, padding and margin; theme.json has no form-element styles. */
.wp-block-nnq2-quiz :is(fieldset, legend) { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
/* Option list: vertical stack with a preset gap (no core layout class fits an unblocked list of labels). */
.nnq2-options { display: grid; gap: var(--wp--preset--spacing--20); margin-block: var(--wp--preset--spacing--40); }
/* Option row: the whole bordered row is the click/touch target; no core equivalent for form inputs. */
.nnq2-option { display: flex; gap: var(--wp--preset--spacing--30); align-items: baseline; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border: thin solid var(--wp--custom--border--muted); border-radius: var(--wp--custom--radius--default); accent-color: var(--wp--preset--color--accent); cursor: pointer; }
/* Selected state: brand accent border and a tonal surface (depth by tone, not shadow). */
.nnq2-option:has(:checked) { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--base-2); }
/* Keyboard focus is shown on the whole row, using the theme's focus-ring token. */
.nnq2-option:has(:focus-visible) { outline: medium solid var(--wp--custom--focus--ring); outline-offset: var(--wp--preset--spacing--10); }
/* "Something else" text field: full width, token border and radius, like the option rows. */
.nnq2-other input { box-sizing: border-box; width: 100%; padding: var(--wp--preset--spacing--30); border: thin solid var(--wp--custom--border--muted); border-radius: var(--wp--custom--radius--default); font: inherit; }
/* Result cards: a column whose visual order follows the server ranking (inline order from view.js). */
.nnq2-cards { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); margin-block: var(--wp--preset--spacing--50); }
/* Card surface: thin soft border and padding, no shadow. */
.nnq2-card { padding: var(--wp--preset--spacing--50); border: thin solid var(--wp--custom--border--soft); border-radius: var(--wp--custom--radius--default); }
/* Screen headings take focus from script only (tabindex -1) to announce the new step; they are not controls, so no focus box. */
.wp-block-nnq2-quiz h2[tabindex="-1"]:focus { outline: none; }