/**
 * Front-end quiz styles (spec 10.2, 17).
 *
 * Deliberately small and deliberately unopinionated about colour: this markup
 * lands inside somebody else's theme, and a stylesheet that repaints it is a
 * stylesheet every site then has to fight. What is here is layout, spacing and
 * the things spec 17 makes non-negotiable -- a visible focus ring that does
 * not depend on the theme having one, a hit area big enough to press, and
 * state that is never carried by colour alone.
 *
 * `currentColor` and the theme's own font are used throughout for the same
 * reason. The DisplayObject theme of spec 8.2 colours the *plot*, which is
 * S14's and S15's job; it does not colour the questionnaire.
 */

.pcompass {
	margin: 0 0 2em;
}

.pcompass--notice {
	border-left: 4px solid currentColor;
	opacity: 0.75;
	padding: 0.5em 0.75em;
}

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

.pcompass__title {
	margin: 0 0 0.5em;
}

.pcompass__description {
	margin: 0 0 1em;
}

.pcompass__count {
	margin: 0 0 1em;
	opacity: 0.75;
}

/* --- progress ---------------------------------------------------------- */

.pcompass__progress {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin: 0 0 1.5em;
}

.pcompass__meter {
	flex: 1 1 12em;
	max-width: 100%;
}

.pcompass__progress-text {
	margin: 0;
	white-space: nowrap;
}

/* --- questions --------------------------------------------------------- */

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

.pcompass__question {
	margin: 0 0 2em;
}

/* A question hidden by pagination. The attribute is what quiz.js sets, so the
   selector matches the mechanism rather than a class that could drift. */
.pcompass__question[hidden] {
	display: none;
}

.pcompass__fieldset {
	border: 0;
	margin: 0;
	min-width: 0; /* fieldsets refuse to shrink in flex/grid without this. */
	padding: 0;
}

.pcompass__legend {
	display: block;
	font-weight: 600;
	margin: 0 0 0.5em;
	padding: 0;
	width: 100%;
}

.pcompass__number {
	opacity: 0.6;
}

.pcompass__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.pcompass__option {
	align-items: center;
	border: 1px solid currentColor;
	border-radius: 0.25em;
	cursor: pointer;
	display: inline-flex;
	gap: 0.5em;
	/* Comfortably past the 24px minimum target size of WCAG 2.2 (2.5.8). */
	min-height: 2.75em;
	padding: 0.4em 0.8em;
}

/* Chosen state carries a border weight and a background, not colour alone --
   and the radio itself remains visible, so the native checked indicator is
   still the primary signal (spec 17). */
.pcompass__option:has( .pcompass__radio:checked ) {
	background: rgba( 127, 127, 127, 0.14 );
	box-shadow: inset 0 0 0 1px currentColor;
}

/* The focus ring is drawn on the label, because the radio inside it is small
   and often themed away. :focus-visible keeps it off pointer interaction. */
.pcompass__option:has( .pcompass__radio:focus-visible ) {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

.pcompass__radio {
	flex: 0 0 auto;
	margin: 0;
}

/* Spec 7.1's no-opinion control. It is the last radio in the same group -- so
   choosing it and choosing a point on the scale stay mutually exclusive -- but
   it is deliberately not in the .pcompass__options row, because a control that
   rendered as the eighth chip in a row of seven would read as an eighth option
   however the data model describes it. The rule above it is the separation:
   distinct on its own, and not carried by colour (spec 17).

   The indent is F1c, and it is the half the rule could not carry. A seven-point
   scale wraps to three rows of chips, so a fourth row of chip below a divider
   still reads as more of the same list -- same left edge, same column, same
   scan. Stepping it out of that column is what says "this one is not on the
   scale", and it costs no colour and no markup. The rule itself stays full
   width because `border-top` spans the padding box: the division is across the
   item, and the control below it is the aside. */
.pcompass__abstain {
	border-top: 1px solid rgba( 127, 127, 127, 0.35 );
	margin-top: 1.25em;
	padding-left: 1.75em;
	padding-top: 1em;
}

/* Quieter than a scale option, and still a full-size target. Two non-colour
   signals that this one is not a position, because the owner's complaint in
   item 6 was that nothing on screen says which control is an opinion and which
   is an exemption: a dashed border rather than a solid one, and a pill rather
   than the scale's rounded rectangle. Shape reads at a glance and survives any
   theme, which a tint would not -- and a tinted background is unavailable here
   anyway, because .pcompass__option:has( :checked ) already spends one, so a
   shaded abstain block would read as an answer already given. */
.pcompass__option--abstain {
	border-radius: 999px;
	border-style: dashed;
	font-size: 0.95em;
}

/* --- controls ---------------------------------------------------------- */

/*
 * A three-column grid rather than a flex row, and F1 item 8 is why.
 *
 * Back and Next are now `hidden` on the pages they cannot leave, so this row
 * holds two children on the first and last pages and three in between. Under
 * `display: flex` the page label then slides -- measured in a browser at 43px
 * left on page 1, centred on page 2, 44px right on page 3 -- because the label
 * only ever centres itself in whatever space the buttons left over. Auto
 * margins were tried first and moved the number by nothing.
 *
 * Naming the column each control sits in fixes it. The outer tracks are `1fr`
 * each, so they stay equal whether or not anything is in them, and the label in
 * the middle track is centred on the row itself. The buttons appear and
 * disappear; nothing else moves.
 */
.pcompass__nav {
	align-items: center;
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr auto 1fr;
	margin: 0 0 1.5em;
}

.pcompass__button--prev {
	grid-column: 1;
	justify-self: start;
}

.pcompass__button--next {
	grid-column: 3;
	justify-self: end;
}

/*
 * S10 rendered the pager `hidden` until the respondent presses Begin, and this
 * rule is what made that true. Without it the `display: flex` above wins on
 * specificity and "Back / Page 1 of 2 / Next" sits under the intro card on a
 * paginated test before anyone has started.
 *
 * Found by the `guards` check S12 added after shipping the identical mistake on
 * the result panel -- which is the whole argument for writing the check rather
 * than fixing the one instance.
 */
.pcompass__nav[hidden] {
	display: none;
}

/* Column 2 of the grid above -- see that rule for why this is named at all. */
.pcompass__page-text {
	grid-column: 2;
	margin: 0;
	text-align: center;
}

/*
 * The `[hidden]` pairing this file's other rules keep warning about. No rule
 * here sets `display` on a button today, so the UA sheet's
 * `[hidden] { display: none }` already wins -- but a later rule that gives one
 * `display: inline-flex` for an icon would silently un-hide Back, Next and See
 * results all at once, and the failure would look like a JavaScript bug.
 */
.pcompass__button[hidden] {
	display: none;
}

.pcompass__footer {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.pcompass__message[hidden] {
	display: none;
}

.pcompass__button {
	align-self: flex-start;
	cursor: pointer;
	min-height: 2.75em;
	padding: 0.5em 1.25em;
}

.pcompass__button:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* --- the results gate (spec 10.5) -------------------------------------- */

.pcompass__gate {
	margin: 1.5em 0 0;
}

.pcompass__gate[hidden] {
	display: none;
}

.pcompass__gate:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* --- the captcha inside it (spec 10.5, 14.11, 17) ---------------------- */

.pcompass__captcha {
	border: 1px solid currentColor;
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	padding: 1em;
}

.pcompass__captcha-heading {
	margin: 0;
}

.pcompass__captcha-status,
.pcompass__captcha-question {
	margin: 0;
}

.pcompass__captcha-status[hidden],
.pcompass__captcha-question[hidden],
.pcompass__captcha-image[hidden] {
	display: none;
}

/*
 * Where Turnstile and hCaptcha draw (A31). Nothing of ours goes inside it, so
 * this styles the hole rather than the widget: the vendors render a fixed-size
 * iframe and both are explicit that its dimensions are theirs. What it does
 * say is that the box may not push the panel wider than the page -- these
 * widgets are ~300px and a narrow phone in a themed container is narrower than
 * that -- and `min-height` holds the space before the iframe arrives, so the
 * submit control does not jump down the page under the visitor's thumb.
 */
.pcompass__captcha-widget {
	max-width: 100%;
	min-height: 65px;
	overflow-x: auto;
}

/*
 * The image is drawn at a fixed pixel size by GD, and it has to stay legible
 * on a narrow screen without being upscaled into mush. max-width shrinks it;
 * height: auto keeps the aspect ratio; the light background is the one colour
 * opinion in this file, and it is here because the PNG's own background is
 * near-white and a dark theme would otherwise frame it in a hard rectangle.
 */
.pcompass__captcha-image {
	align-self: flex-start;
	background: #f6f6f8;
	border: 1px solid rgba( 0, 0, 0, 0.2 );
	height: auto;
	max-width: 100%;
}

.pcompass__captcha-label {
	font-weight: 600;
}

.pcompass__captcha-answer {
	font-size: 1.1em;

	/* Spec 17's hit area, and enough room for the six characters plus a
	   comfortable overshoot. */
	max-width: 16em;
	min-height: 2.75em;
	padding: 0.4em 0.6em;
}

.pcompass__captcha-answer:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * The honeypot (spec 14.7). Hidden from people, not from a machine parsing the
 * markup -- which is the entire mechanism. `display: none` would work too and
 * is what a bot would look for; taking it out of the layout without taking it
 * out of the document is less obvious from the outside.
 *
 * It is already aria-hidden and tabindex="-1" in the markup, so nothing here
 * is what keeps assistive technology away from it. This is only the visual
 * half.
 */
.pcompass__hp {
	height: 1px;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	top: auto;
	width: 1px;
}

/* --- the opt-in card (spec 10.5) ---------------------------------------- */

/*
 * Drawn between the challenge and the submit, and styled as one block so it
 * reads as a single ask rather than as form fields bolted under a captcha.
 *
 * Nothing here is ever rendered with `hidden`: the card is a server-side
 * decision (PCompass_Optin::renders_card), so a test that does not capture a
 * lead emits no markup at all rather than markup that is hidden. That is why
 * this section needs none of the `[hidden]` pairings the block below is so
 * careful about -- there is no hidden element to lose.
 */
.pcompass__optin {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-top: 1em;
}

.pcompass__optin-heading {
	margin: 0;
}

.pcompass__optin-body {
	margin: 0;
}

.pcompass__optin-field {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	margin: 0;
}

.pcompass__optin-label {
	font-weight: 600;
}

/*
 * Spec 17: never one carrier. The `required` attribute is what assistive
 * technology reads and this is what everybody else does, so it is styled to be
 * legible rather than decorative -- no `display: none` at any breakpoint, and
 * no colour-only distinction.
 */
.pcompass__optin-required {
	font-weight: 400;
	opacity: 0.75;
}

.pcompass__optin-input {
	font: inherit;
	padding: 0.4em 0.5em;
}

.pcompass__optin-input:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * The box and its sentence sit on one line and wrap together. `align-items:
 * flex-start` rather than `center` so a two-line consent sentence keeps its
 * checkbox beside the first line instead of floating to the middle of the
 * paragraph.
 */
.pcompass__optin-consent {
	align-items: flex-start;
	display: flex;
	gap: 0.5em;
	margin: 0;
}

.pcompass__optin-check {
	flex: none;
	margin-top: 0.25em;
}

/* Spec 10.5's storage disclosure. A statement, above the box, for every
   respondent -- not a control, because a checkbox would imply a choice the
   feature does not have. */
.pcompass__optin-disclosure {
	margin: 1.5em 0 0.75em;
}

/* The promises. Outside the label deliberately -- see PCompass_Shortcode::optin()
   -- so that reading them cannot tick the box. Indented to the label's text so
   it still reads as belonging to the control it describes. */
.pcompass__optin-consent-body {
	font-size: 0.95em;
	margin: 0.4em 0 0 1.9em;
	opacity: 0.85;
}

/* Promise 4, and the difference between a checkbox and a toll gate. It is not
   quieter than the promises above it: this is the line that has to be read. */
.pcompass__optin-either-way {
	font-weight: 600;
	margin: 0.75em 0 0 1.9em;
}

/*
 * The bypass is a real button and deliberately a quieter one. Spec 10.5 gives
 * mode `optional` a way past the card, and a way past it that looks identical
 * to the primary action invites the respondent to take it by accident.
 */
.pcompass__button--skip {
	background: none;
	font-weight: 400;
	text-decoration: underline;
}

/* --- the submit control and the result (spec 10.2 steps 4-6, 10.4) ------ */

.pcompass__submit {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	margin-top: 1em;
}

.pcompass__submit-status {
	margin: 0;
}

/*
 * The attribute means what it says.
 *
 * `hidden` is a UA-stylesheet rule -- `[hidden] { display: none }` -- and any
 * author rule with a class selector beats it on specificity. Every `display:`
 * above therefore has to be paired with one of these, and the pairing is not
 * optional: the first version of this file gave `.pcompass__result` a
 * `display: flex` and no `[hidden]` rule, and the result panel rendered
 * visible, empty and above the fold on a quiz nobody had submitted yet.
 *
 * Nothing in the suite could see it. jsdom does not apply stylesheets, so
 * `element.hidden` reads true in jest and the integration leg asserts on the
 * markup; it took opening the page in a browser. The `guards` leg now pairs
 * the two, which is the check that would have.
 */
.pcompass__submit-status[hidden] {
	display: none;
}

/*
 * The disabled state is the one that matters here rather than the styling: a
 * submission spends its challenge token and writes a row, so the button is
 * disabled the moment it is pressed and stays disabled once a result exists.
 * Saying so visually is what stops a respondent pressing it again.
 */
.pcompass__button--submit[disabled] {
	cursor: default;
	opacity: 0.6;
}

.pcompass__result {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin-top: 1.5em;
}

.pcompass__result:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.pcompass__result-heading {
	margin: 0;
}

.pcompass__result-status {
	margin: 0;
}

.pcompass__result[hidden],
.pcompass__result-status[hidden] {
	display: none;
}

/*
 * The readouts of spec 10.4. A list, not a table: there is one column of
 * values, and a table with one column is a table a screen reader has to
 * announce as one.
 */
.pcompass__readouts {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcompass__readout-label {
	font-weight: 600;
}

/*
 * Tabular figures, so a column of scores lines up on the decimal point and
 * does not shuffle sideways as the digits change.
 */
.pcompass__readout-score {
	font-variant-numeric: tabular-nums;
}

/*
 * Spec 7.5's retake prompt. Shown only on *Uncommitted*, which is the one
 * state whose copy asks the respondent to come back.
 *
 * The `[hidden]` pairing, for the reason the button rule above gives at
 * length and one more that is specific to this element: `.pcompass__result`
 * is a flex column, so this is a flex item, and the day a rule here sets
 * `display` for its own layout the UA sheet stops winning and the prompt
 * appears under every result. It is declared now, while the reason is in
 * front of somebody, rather than after the bug.
 */
.pcompass__retake {
	margin: 0.5em 0 0;
}

.pcompass__retake[hidden] {
	display: none;
}

/*
 * `F5-1`'s way out of the quiz page, and the same two rules for the same two
 * reasons the retake prompt above gives -- it is a flex item of
 * `.pcompass__result`, so the `[hidden]` pairing is declared with the rule
 * rather than after somebody finds the link under every unanswered quiz.
 */
.pcompass__result-link {
	margin: 0.75em 0 0;
}

.pcompass__result-link[hidden] {
	display: none;
}

/*
 * And the underline, which the first version of this rule deliberately did not
 * set -- on the reasoning that the theme's own link styling is what the
 * respondent has been reading all the way down the page, so spec 17 is best
 * served by leaving it alone.
 *
 * **The live site disproved that on the first look.** On the owner's theme
 * this anchor computes to `#6b7280` with `text-decoration: none`, at the body
 * font size, sitting alone under a paragraph -- which reads as a caption, not
 * as somewhere to go. It is the only route to the share row and to spec 10.6's
 * claim control, and `F5-1` is the defect where that route did not exist at
 * all; a link nobody recognizes is most of the way back to it.
 *
 * Colour is still the theme's. This sets the one affordance that does not
 * depend on the palette, and is what WCAG asks for wherever colour alone would
 * have to carry it.
 */
.pcompass__link--result {
	text-decoration: underline;
}

/* --- the plot (spec 11.1, 11.2, 11.3) ---------------------------------- */

/*
 * No `display` here on purpose. The mount is emitted with `hidden`, and a
 * class selector beats the `[hidden]` UA rule on specificity -- so a layout
 * declaration on this class would show an empty box on every page that has
 * not been submitted yet. Spacing only.
 */
.pcompass__plot {
	margin-top: 1rem;
	max-width: 100%;
}

/*
 * All three pictures scale with the container. The SVG has a viewBox and no
 * width; the cube's canvas is sized in device pixels by the renderer and laid
 * out at 100% here, which is what keeps a retina canvas from being twice its
 * box; spec 8.2's PNG carries its intrinsic size as attributes, so `height:
 * auto` is what stops it being squashed when the box is narrower.
 */
.pcompass__plot svg,
.pcompass__plot img,
.pcompass__plot canvas {
	display: block;
	height: auto;
	max-width: 100%;
}

/*
 * Spec 11.3: drag to orbit, pinch to zoom. A browser that also pans the page
 * on those gestures makes the cube unusable on a phone. Set inline on the
 * canvas as well, so an embed served without this stylesheet still orbits.
 */
.pcompass__plot canvas {
	touch-action: none;
}

/*
 * Spec 11.3's region label chip, on the WebGL path only. The two SVG
 * renderers draw their own into the picture, in a band reserved for it; a
 * scene the respondent can orbit has no such band, so the cube's chip is an
 * element above its canvas. Its colours are set inline, because they are the
 * region's own and the document chose them.
 *
 * `inline-block` and `align-self: start` so the box is the width of the name
 * rather than of the mount -- a full-width bar reads as a heading, and this is
 * a chip.
 */
.pcompass__cube-chip {
	align-self: start;
	border-radius: 4px;
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	padding: 0.25rem 0.5rem;
}

/*
 * The WebGL-off fallback (spec 11.3, 17). Words, never a blank box -- and
 * until S17's isometric image lands, the only thing in the mount.
 */
.pcompass__cube-note {
	font-size: 0.9375rem;
	margin: 0 0 0.5rem;
}

.pcompass__cube-octant {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcompass__cube-octant li {
	margin: 0 0 0.25rem;
}

/* --- reduced motion (spec 17) ------------------------------------------ */

@media ( prefers-reduced-motion: reduce ) {
	.pcompass * {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

/* --- the stored-result page (spec 10.6) --------------------------------- */

/*
 * PCompass_Permalinks::page() builds a whole document rather than rendering
 * into a theme, so there is no theme container to sit inside and nothing else
 * bounds the width. Without this the responsive plot of S15 does what it was
 * asked to and fills the viewport -- a 2000-pixel compass on a wide monitor,
 * which the browser pass for S18 walked into.
 */
.pcompass-page {
	margin: 0 auto;
	max-width: 44rem;
	padding: 2em 1.25em 4em;
}

/* --- claim a custom link (spec 10.6) ------------------------------------ */

.pcompass__claim {
	border-top: 1px solid currentColor;
	margin-top: 2em;
	padding-top: 1.5em;
}

.pcompass__claim-label {
	display: block;
	font-weight: 600;
}

.pcompass__claim-help {
	margin: 0.25em 0 0.75em;
	opacity: 0.8;
}

.pcompass__claim-row {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/*
 * The prefix can be longer than the box on a narrow screen, and it is not the
 * part a respondent is editing -- so it wraps and shrinks rather than pushing
 * the input off the row.
 */
.pcompass__claim-prefix {
	flex: 0 1 auto;
	min-width: 0;
	opacity: 0.75;
	overflow-wrap: anywhere;
}

.pcompass__claim-input {
	flex: 1 1 8em;
	min-width: 8em;
}

.pcompass__claim-status {
	margin: 0.75em 0 0;
	overflow-wrap: anywhere;
}

/* --- sharing (spec 11.5) ------------------------------------------------ */

.pcompass__share {
	border-top: 1px solid currentColor;
	margin-top: 2em;
	padding-top: 1.5em;
}

.pcompass__share-heading {
	font-size: 1em;
	margin: 0 0 0.75em;
}

/*
 * A list, because it is one, with the bullets off: assistive technology is
 * told how many share options there are and a sighted visitor is not shown a
 * column of dots.
 */
.pcompass__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcompass__share-item {
	margin: 0;
}

.pcompass__share-link {
	border: 1px solid currentColor;
	border-radius: 0.25em;
	display: inline-block;
	padding: 0.4em 0.8em;
	text-decoration: none;
}

.pcompass__share-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pcompass__share-status {
	margin: 0.75em 0 0;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
 * Respondent accounts and the "my results" listing (spec 10.8)
 * ------------------------------------------------------------------------ */

.pcompass__account,
.pcompass__account-note,
.pcompass__account-disclosure {
	margin: 1em 0 0;
}

.pcompass__account-status {
	margin: 0.5em 0 0;
	overflow-wrap: anywhere;
}

.pcompass-results__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pcompass-results__row {
	border-top: 1px solid currentColor;
	margin: 0;
	padding: 1.25em 0;
}

.pcompass-results__row:first-child {
	border-top: 0;
}

.pcompass-results__row.is-removed {
	opacity: 0.6;
}

.pcompass-results__title {
	margin: 0 0 0.25em;
}

.pcompass-results__taken,
.pcompass-results__summary,
.pcompass-results__links {
	margin: 0 0 0.5em;
}

.pcompass-results__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0.75em 0 0;
}

.pcompass-results__confirm {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.pcompass-results__button--danger {
	border-color: currentColor;
}

.pcompass-results__status {
	margin: 0.5em 0 0;
	overflow-wrap: anywhere;
}

.pcompass-results__pages {
	margin: 1.25em 0 0;
}

.pcompass-results__page-of {
	margin: 0 0.5em;
}

.pcompass-results__empty,
.pcompass-results__prompt {
	margin: 0 0 0.5em;
}

/*
 * The `[hidden]` pairings for the two rules above, and they are not optional.
 * `hidden` is a UA-stylesheet rule -- `[hidden] { display: none }` -- and a
 * class selector with a `display` beats it on specificity, so a control the
 * renderer emits `hidden` and this file lays out is a control that is on the
 * page from the first paint.
 *
 * Both of these shipped without their pairing and the S20 browser pass found
 * it: the delete confirmation was visible beside the button that is supposed
 * to reveal it, so "delete asks twice" was not true in a browser. jsdom
 * applies no stylesheets, so jest read `element.hidden` as true; the
 * integration leg asserted on markup that was correct. Only a browser -- or
 * the guards check this taught -- can see it.
 */
.pcompass-results__actions[hidden],
.pcompass-results__confirm[hidden] {
	display: none;
}

/* -----------------------------------------------------------------------
 * Spec 10.7's data-request form, and the page its confirmation link lands on.
 * -------------------------------------------------------------------- */

.pcompass-dsr {
	max-width: 40em;
}

.pcompass-dsr__heading {
	margin: 0 0 0.75em;
}

.pcompass-dsr__field {
	margin: 0 0 1em;
}

.pcompass-dsr__label {
	display: block;
	font-weight: 600;
	margin: 0 0 0.35em;
}

.pcompass-dsr__input {
	box-sizing: border-box;
	max-width: 24em;
	padding: 0.4em 0.6em;
	width: 100%;
}

.pcompass-dsr__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 1em 0 0;
}

.pcompass-dsr__lead,
.pcompass-dsr__notice {
	margin: 0 0 1em;
}

.pcompass-dsr__status {
	margin: 0.75em 0 0;
	overflow-wrap: anywhere;
}

.pcompass-dsr__scope,
.pcompass-dsr__closed,
.pcompass-dsr__policy {
	font-size: 0.9em;
	margin: 1em 0 0;
}

.pcompass-dsr__button--delete {
	border-color: currentColor;
}

/*
 * The `[hidden]` pairing the S20 browser pass taught this file to write. A
 * class selector carrying `display` outranks the UA sheet's
 * `[hidden] { display: none }`, so a status line the renderer emits hidden
 * would otherwise be on the page from the first paint -- here, an empty
 * paragraph above the scope notice.
 */
.pcompass-dsr__status[hidden] {
	display: none;
}

/* -----------------------------------------------------------------------
 * The two pages `D32`'s respondent emails land on: confirm an address, and
 * withdraw consent. Their own block rather than the data-request one above,
 * because sharing those class names would be markup claiming to be a surface
 * it is not -- and because these two carry no form, no input and no captcha.
 * -------------------------------------------------------------------- */

.pcompass-optin-mail {
	max-width: 40em;
}

.pcompass-optin-mail__heading {
	margin: 0 0 0.75em;
}

.pcompass-optin-mail__notice {
	margin: 0 0 1em;
}

.pcompass-optin-mail__actions {
	margin: 1.5em 0 0;
}

/* ---------------------------------------------------------------------------
 * The insight surface and its entry control (spec 10.9)
 * ------------------------------------------------------------------------ */

.pcompass-insight__control {
	border-top: 1px solid currentColor;
	margin-top: 2em;
	padding-top: 1.5em;
}

.pcompass-insight__control-heading {
	font-size: 1em;
	margin: 0 0 0.75em;
}

.pcompass-insight__lede,
.pcompass-insight__cta,
.pcompass-insight__quiz,
.pcompass-insight__cohort,
.pcompass-insight__summary,
.pcompass-insight__back {
	margin: 0 0 0.75em;
}

.pcompass-insight__offers {
	list-style: disc;
	margin: 0 0 1em;
	padding-left: 1.25em;
}

.pcompass-insight__link {
	border: 1px solid currentColor;
	border-radius: 0.25em;
	display: inline-block;
	padding: 0.4em 0.8em;
	text-decoration: none;
}

.pcompass-insight__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.pcompass-insight__notice,
.pcompass-insight__absent {
	border-left: 3px solid currentColor;
	font-size: 0.95em;
	margin: 0.75em 0;
	padding: 0.25em 0 0.25em 0.75em;
}

.pcompass-insight__section {
	margin: 2em 0;
}

/*
 * Every figure on this surface is a table, and the wide ones scroll inside
 * their own box rather than pushing the page sideways.
 */
.pcompass-insight__table {
	border-collapse: collapse;
	display: block;
	max-width: 100%;
	overflow-x: auto;
	width: max-content;
}

.pcompass-insight__table th,
.pcompass-insight__table td {
	border: 1px solid currentColor;
	padding: 0.3em 0.6em;
	text-align: left;
	white-space: nowrap;
}

/*
 * The bar is decoration behind a number that is already printed beside it --
 * see PCompass_Insight::render_histogram(). It is never the only channel.
 */
.pcompass-insight__bar {
	background: currentColor;
	display: inline-block;
	height: 0.7em;
	margin-right: 0.5em;
	opacity: 0.25;
	vertical-align: baseline;
}

.pcompass-insight__heatmap td {
	text-align: right;
}

/*
 * `--pcompass-shade` is set per cell from its share of the largest count. The
 * count is in the cell as text, so a viewer who cannot see the shade loses
 * nothing (spec 17).
 */
.pcompass-insight__cell {
	background: rgba(127, 127, 127, calc(var(--pcompass-shade, 0) * 0.6));
}

.pcompass-insight__cell.is-mine,
.pcompass-insight__histogram .is-mine {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.pcompass-insight__views ul,
.pcompass-insight__filter ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
}

.pcompass-insight__nav-link,
.pcompass-insight__nav-current {
	border: 1px solid currentColor;
	border-radius: 0.25em;
	display: inline-block;
	padding: 0.3em 0.7em;
}

.pcompass-insight__nav-current {
	font-weight: 700;
}

.pcompass-insight__scatter {
	height: auto;
	max-width: 320px;
	width: 100%;
}