/*
 * MyRoiduSurvey — Default 2.0 theme
 *
 * Drop-in replacement for my-roidu-survey-basic.css. Aims to make an embedded
 * survey rendered by myroidusurvey-js look like the same survey rendered by
 * survey.ui with the "default-2-0" theme.
 *
 * Palette and tokens mirror survey.ui/src/style/default-2-0/abstracts/_theme.scss
 * defaults. Override via :root custom properties or by re-declaring inside
 * .MRS-root-container.
 *
 * Caveats — these are noted in the embed_audit reply but worth keeping near
 * the code:
 *   • Slider uses native input[type=range]; survey.ui uses vue-slider-component.
 *     The styling here approximates but won't be identical.
 *   • Dropdown uses native <select>; survey.ui uses vue-multiselect with a
 *     custom popup, which native select cannot reproduce.
 *   • NPS colored variant (red/yellow/green by index) is not signalled by the
 *     renderer, so this theme uses the plain single-color NPS look.
 *   • survey.ui's "input-focused" mode (hide everything except the active
 *     field) is not implemented by the renderer, so not styled here.
 *   • Page slide transitions are not reproduced; pages still toggle via
 *     display per the renderer's MRS-page-active rules.
 */

/* -------------------------------------------------------------------------- */
/* Design tokens — matches default-2-0 defaults                               */
/* -------------------------------------------------------------------------- */

.MRS-root-container {
  /*
   * Two knobs. Content size is calc(var(--mrs-base) * N); VERTICAL spacing
   * (the gaps between title / description / choices / nav, and the root's
   * top/bottom padding) is calc(var(--mrs-gap) * N). Keeping them separate
   * lets the fit collapse whitespace first and only shrink the content
   * (fonts, buttons, icons) when the gaps are already as tight as they go —
   * so text stays as large as the space allows.
   *
   * 16px is the full-size default (≈ the old 1rem base); --mrs-gap defaults to
   * the base so the roomy layout looks exactly as before. At runtime the
   * library's _fitToContainer() overrides both: it keeps the survey as large
   * as fits the host (capped at full size), compressing --mrs-gap then
   * --mrs-base — a real reflow driven by measurement, so it works in any embed
   * (incl. auto-height/full-page). If the script doesn't run, the survey just
   * renders full size.
   */
  --mrs-base: 16px;
  --mrs-gap: var(--mrs-base);

  /* Colors */
  --theme-primary: #d2f6f9;
  --theme-on-primary: #2e3949;
  --theme-primary-variant: #febd7b;
  --theme-primary-variant-2: #ffe9ad;
  --theme-primary-variant-3: #739fdc;
  --theme-primary-outline: #000;
  --theme-primary-outline-variant: #000;
  --theme-on-primary-variant: #2e3949;
  --theme-on-primary-variant-2: #2e3949;

  --theme-secondary: #2e3949;
  --theme-on-secondary: #f2f2f2;
  --theme-secondary-variant: #febd7b;
  --theme-secondary-outline: #2e3949;
  --theme-secondary-outline-variant: #febd7b;
  --theme-secondary-outline-disabled: #000;
  --theme-secondary-disabled: #e2e2e2;
  --theme-secondary-disabled-variant: #a2a2a2;
  --theme-on-secondary-variant: #2e3949;
  --theme-on-secondary-disabled: #2e3949;

  --theme-tertiary: #656b75;
  --theme-on-tertiary: #efefef;
  --theme-tertiary-outline: #656b75;

  --theme-background: #fff;
  --theme-on-background: #2e3949;
  --theme-surface: #fff;
  --theme-on-surface: #2e3949;
  --theme-on-surface-variant: #e2e2e2;

  --theme-nps-bg-color: var(--theme-primary);
  --theme-nps-bg-color-selected: var(--theme-primary);
  --theme-nps-text-color: var(--theme-on-primary);

  /* Coloured NPS bucket palette (applied when nps.colored = true on the
   * question — see .MRS-question-nps-colored rules). Mirrors survey.ui's
   * default-2-0 palette so embedded surveys match. */
  --theme-nps-bg-color-bad:              #f39690;
  --theme-nps-bg-color-bad-selected:     #f39690;
  --theme-nps-bg-color-neutral:          #fdc84a;
  --theme-nps-bg-color-neutral-selected: #fdc84a;
  --theme-nps-bg-color-good:             #85c598;
  --theme-nps-bg-color-good-selected:    #85c598;

  /* Typography.
   *
   * Font family. Every text rule below resolves to var(--theme-font-family-base);
   * defining it here means the survey ACTUALLY uses Hind Siliguri (loaded via the
   * @font-face above) instead of silently inheriting whatever font the host page
   * happens to use — which made the text look different depending on the embed
   * (e.g. a bare iframe fell back to the browser's default serif). Falls back to
   * the system UI font if the webfont fails to load. */
  --theme-font-family-base: 'Hind Siliguri', system-ui, -apple-system, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;

   /* The tablet/mobile sizes are only modestly smaller than the full size:
   * everything already scales with --mrs-base (which the fit shrinks in tight
   * hosts), so the breakpoints shouldn't ALSO slash the font — that's what
   * made text unreadable in small embeds. Keep them close to full so text
   * stays legible; the base scaling does the real work. */
  --theme-font-size-title: calc(var(--mrs-base) * 2.5);
  --theme-font-size-title-tablet: calc(var(--mrs-base) * 2.1);
  --theme-font-size-title-mobile: calc(var(--mrs-base) * 1.8);
  --theme-font-size-subtitle: calc(var(--mrs-base) * 2);
  --theme-font-size-subtitle-tablet: calc(var(--mrs-base) * 1.85);
  --theme-font-size-subtitle-mobile: calc(var(--mrs-base) * 1.7);
  --theme-font-size-description: calc(var(--mrs-base) * 2);
  --theme-font-size-description-tablet: calc(var(--mrs-base) * 1.85);
  --theme-font-size-description-mobile: calc(var(--mrs-base) * 1.7);
  --theme-font-size-body: calc(var(--mrs-base) * 1.5);
  --theme-font-size-body-tablet: calc(var(--mrs-base) * 1.4);
  --theme-font-size-body-mobile: calc(var(--mrs-base) * 1.3);
  --theme-font-size-xsmall: calc(var(--mrs-base) * 0.8);

  /* Focus indicator */
  --theme-focus-outline: solid 3px #000;
  --theme-focus-outline-offset: 3px;
  --theme-focus-box-shadow: 0 0 0 7px #fff;
}

/* Self-host can replace this with a local font; survey.ui pulls Hind Siliguri
 * from Google Fonts.                                                          */
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hindsiliguri/v12/ijwTs5juQtsyLLR5jN4cxBEoTJzax8s3Jik.woff2)
    format('woff2');
}
@font-face {
  font-family: 'Hind Siliguri';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/hindsiliguri/v12/ijwOs5juQtsyLLR5jN4cxBEoREP-0uYVKwOs1to.woff2)
    format('woff2');
}

/* -------------------------------------------------------------------------- */
/* Root container                                                             */
/* -------------------------------------------------------------------------- */

.MRS-root-container {
  font-family: var(--theme-font-family-base);
  /* Root font-size IS the base unit, so getComputedStyle(root).fontSize reads
   * the resolved base in px (every text element sets its own size via the
   * tokens, so this doesn't shrink inherited body text). */
  font-size: var(--mrs-base);
  color: var(--theme-on-background);
  background: var(--theme-background);
  box-sizing: border-box;
  width: 100%;
  /*
   * Embed-safe sizing. This theme is injected into an arbitrary host
   * container (a customer page <div> of any size), so it must NOT assume it
   * owns the viewport. min-height: 100% fills the host container when it has
   * a definite height and otherwise collapses to content height; horizontal padding
   * is a percentage of the container, not of the viewport (was 5vw, which
   * over-padded narrow embeds and crushed the NPS row into pills). The
   * breakpoints below are container queries (see container-type) so the
   * survey responds to its own width, not the browser window.
   */
  min-height: 100%;
  padding: calc(var(--mrs-gap) * 1.5) 5% calc(var(--mrs-gap) * 0.75);
  position: relative;
  text-align: center;
  container-type: inline-size;
  container-name: mrs;
}

/* -------------------------------------------------------------------------- */
/* Stable height + anchored nav (multi-page surveys)                          */
/* -------------------------------------------------------------------------- */
/*
 * Two goals from embedded use:
 *   1. The survey shouldn't change height page to page. When the host area
 *      has more room than the survey needs, every page is sized to the
 *      TALLEST page, so content / nav / progress don't jump up and down as
 *      the respondent navigates.
 *   2. The nav (Previous / Next / Send) sits at the BOTTOM of that stable
 *      area instead of floating up on shorter pages.
 *
 * Technique: stack every visible page in a single CSS grid cell. Inactive
 * pages stay in the layout but are visibility:hidden (invisible, and out of
 * the tab order + a11y tree) so they keep occupying the cell — the grid row,
 * and therefore the survey, is always as tall as the tallest page.
 *
 * `display: flex` here beats the renderer's inline `.MRS-page{display:none}`
 * / `.MRS-page.MRS-page-active{display:block}` by selector specificity, so
 * visibility (not display) decides which page shows. Pages the renderer hides
 * structurally (.MRS-hidden / -by-default / -by-pipes) are excluded so they
 * neither show nor inflate the height.
 *
 * Scoped to :not(.MRS-single-page-form): a single-page form is one long
 * scrolling form and must keep its natural height.
 *
 * Note: this stabilises height, it does NOT shrink a survey that is taller
 * than a small host box — for that the host area should be tall enough (a JS
 * fit/scale step would be needed to auto-shrink).
 */
/* Root is a flex column that fills the host container, so the pages region
 * can take all the leftover height and the nav can sit at the very bottom of
 * the container — not floating partway up when the content is short. */
.MRS-root-container:not(.MRS-single-page-form) {
  display: flex;
  flex-direction: column;
}
.MRS-root-container:not(.MRS-single-page-form) .MRS-pages {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* Single stacked row that stretches to fill .MRS-pages (the leftover
   * height). With a fixed-height host this pins the page — and its
   * bottom-anchored nav — to the container's full height; with an auto-height
   * host the row collapses to the tallest page, keeping pages equalized. */
  grid-template-rows: minmax(0, 1fr);
}
.MRS-root-container:not(.MRS-single-page-form)
  .MRS-page:not(.MRS-hidden):not(.MRS-hidden-by-default):not(.MRS-hidden-by-pipes) {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.MRS-root-container:not(.MRS-single-page-form) .MRS-page:not(.MRS-page-active) {
  visibility: hidden;
}
/*
 * Matrix pages are intrinsically tall (a wide grid of cells) and image elements
 * can be arbitrarily large; both are allowed to OVERFLOW rather than shrink the
 * survey to fit them. An INACTIVE such page is fully removed from the stack
 * (display:none, beating the display:flex above on specificity) so it doesn't
 * inflate the shared cell and shrink every other page. When ACTIVE it overlays
 * the cell as normal and is allowed to overflow — the host scrolls for that page
 * only, while the rest of the survey stays sized to fit. (The JS fit also
 * excludes matrix/image pages.)
 */
.MRS-root-container:not(.MRS-single-page-form)
  .MRS-page:not(.MRS-hidden):not(.MRS-hidden-by-default):not(.MRS-hidden-by-pipes):has(.MRS-element-matrix, .MRS-element-image):not(.MRS-page-active) {
  display: none;
}
/* Nav anchored to the bottom of the (tallest) page cell, so it stays put
 * across pages instead of riding up with shorter content. */
.MRS-root-container:not(.MRS-single-page-form) .MRS-page-nav {
  margin-top: auto;
}

/*
 * In a SMALL/narrow host, anchoring the nav to the very bottom leaves a big
 * empty gap above it on short pages (and the content hugs the lang menu at the
 * top). So below ~700px of container width we CENTRE the content + nav as a
 * group and put the nav right under the content: short pages stay compact (no
 * huge choices→nav gap), content drops off the lang menu, leftover space is
 * balanced. Wide hosts keep the bottom-anchored nav (looks intentional there).
 * Keyed off container WIDTH (not the overflow/tight state) because a short page
 * can FIT a small host yet still want the compact treatment. Placed after the
 * anchored rule so it wins at equal specificity.
 */
@container mrs (max-width: 700px) {
  .MRS-root-container:not(.MRS-single-page-form) .MRS-page.MRS-page-active {
    justify-content: center;
  }
  .MRS-root-container:not(.MRS-single-page-form) .MRS-page-nav {
    margin-top: calc(var(--mrs-gap) * 1.5);
  }
}

/*
 * Compact structural sizing for tight hosts. The bulky bits — tall choice
 * buttons, big NPS circles and smiley icons, the slider's padding — are the
 * first thing to trade away so MORE of the limited height goes to the TEXT
 * (which the fit then keeps as large as it can). Tuned to use the available
 * width rather than vertical space (the icons/choices spread wider, shorter).
 */
.MRS-root-container.MRS-fit-tight .MRS-question-container > .MRS-choice {
  min-height: calc(var(--mrs-base) * 2.4);
}
.MRS-root-container.MRS-fit-tight .MRS-choice {
  padding: calc(var(--mrs-base) * 0.4) calc(var(--mrs-base) * 0.9);
}
/* Trim the root's side padding (5% → 2.5%) when tight so the limited width is
 * spent on the content, not the gutters. Most visible on the single-row NPS
 * scale and the icon row, where every extra pixel of width makes the circles /
 * smileys bigger (they are width-bound: 11 squares across one row). */
.MRS-root-container.MRS-fit-tight {
  padding-left: 2.5%;
  padding-right: 2.5%;
}
/*
 * NPS in a tight host. The 0-to-10 circles are squares (aspect-ratio 1/1) laid
 * out in ONE non-wrapping row, so their size is capped by the WIDTH each of the
 * 11 buttons gets — vertical space can't enlarge them. To make them as big as a
 * single row allows we (a) shrink the inter-button gap to a small base-multiple
 * and (b) let max-width grow, so the row consumes the full (now wider) content
 * width. A thinner border keeps the inner number area legible at the small size.
 */
.MRS-root-container.MRS-fit-tight .MRS-element-nps .MRS-question-container,
.MRS-root-container.MRS-fit-tight .MRS-question-container.MRS-question-nps {
  gap: calc(var(--mrs-base) * 0.3);
}
.MRS-root-container.MRS-fit-tight .MRS-element-nps .MRS-choice,
.MRS-root-container.MRS-fit-tight .MRS-question-nps .MRS-choice {
  /* max-width scales with base (not a big fixed cap) ON PURPOSE: the circles are
   * otherwise width-bound and the fit — which shrinks --mrs-base — could not
   * shrink them to recover height on an extremely short host (it would just
   * overflow). Tying the cap to base lets the fit trade circle size for fit when
   * it truly must, while staying generous enough that on a normal small host the
   * row is width-bound and the circles are as large as one row allows. */
  max-width: calc(var(--mrs-base) * 3);
  border-width: 2px !important;
  font-size: calc(var(--mrs-base) * 1.6);
}
.MRS-root-container.MRS-fit-tight .MRS-icon-container {
  width: calc(var(--mrs-base) * 4.5);
  max-width: calc(var(--mrs-base) * 4.5);
}
/*
 * Label-less icon question: keep the question text the SAME size as the labelled
 * variant. The fit keeps text as large as the content height allows, so an icon
 * row WITHOUT the per-icon labels is shorter, leaves more height, and the fit
 * settles on a bigger --mrs-base — making the title balloon (and overflow on a
 * very short host). Reserving the height a label would have taken makes the
 * label-less question occupy the same vertical space as the labelled one, so the
 * fit lands on the same base and the title/description render at the same size.
 * Only when tight (the fit is active) and only for the standalone icon question
 * (not matrix cells). The reserved strip sits under the icon, where the label
 * would be, so the icon stays top-aligned exactly as in the labelled layout.
 */
.MRS-root-container.MRS-fit-tight
  .MRS-question-icon
  .MRS-icon-container:not(:has(.MRS-icon-label)) {
  padding-bottom: calc(var(--mrs-base) * 2);
}
.MRS-root-container.MRS-fit-tight .MRS-question-slider {
  padding: calc(var(--mrs-gap) * 0.5) calc(var(--mrs-base) * 1)
    calc(var(--mrs-gap) * 1.5);
}
/* Smaller, closer lang menu so it steals less off the top. */
.MRS-root-container.MRS-fit-tight .MRS-lang-button {
  width: calc(var(--mrs-base) * 2);
  height: calc(var(--mrs-base) * 2);
}
/*
 * Lang-menu clearance when tight. The floating EN/SV buttons sit top-LEFT, so
 * for the centred question types (NPS, icon, file, slider, choice) the centre
 * column above the title is actually empty — we can pull the whole question
 * group up to ~2.2×base and only keep enough room that the title doesn't ride
 * over the buttons. The checkbox is the exception: its control + label start at
 * the LEFT edge, directly under the buttons, so it keeps the full clearance.
 */
.MRS-root-container.MRS-fit-tight:has(.MRS-lang-menu.MRS-lang-visible) {
  padding-top: calc(var(--mrs-base) * 2.2);
}
.MRS-root-container.MRS-fit-tight:has(.MRS-lang-menu.MRS-lang-visible):has(
    .MRS-element-checkbox
  ) {
  padding-top: calc(var(--mrs-base) * 3);
}
/* Compact the title/description block when tight so the question text sits
 * higher and the interactive part (choices, NPS, slider…) gets the room. */
.MRS-root-container.MRS-fit-tight .MRS-question-header {
  margin-bottom: calc(var(--mrs-gap) * 0.75);
}
.MRS-root-container.MRS-fit-tight .MRS-question-title {
  margin: calc(var(--mrs-gap) * 0.5) 0 calc(var(--mrs-gap) * 0.5) 0;
}
.MRS-root-container.MRS-fit-tight .MRS-question-description {
  margin-bottom: calc(var(--mrs-gap) * 0.75);
}
/* Slightly smaller nav buttons when tight, so they don't crowd the content. */
.MRS-root-container.MRS-fit-tight .MRS-previous-page,
.MRS-root-container.MRS-fit-tight .MRS-next-page,
.MRS-root-container.MRS-fit-tight .MRS-single-page-send {
  padding: calc(var(--mrs-base) * 0.5) calc(var(--mrs-base) * 1.4);
  min-width: calc(var(--mrs-base) * 6);
  font-size: var(--theme-font-size-subtitle-mobile);
}
/* File upload: in tight hosts the selected-file banner sits BESIDE the upload
 * button instead of taking its own full-width row (which pushed content down
 * and forced overflow). Roomy hosts keep the full-width banner (rule below). */
.MRS-root-container.MRS-fit-tight .MRS-file-list {
  /* 0 1 auto: hug the content ("1 file · Remove") rather than stretching to
   * fill the row, so the green box stays a sensible width next to the button. */
  flex: 0 1 auto;
  min-width: 0;
  width: auto;
  margin: calc(var(--mrs-gap) * 0.5) 0;
}
/* Upload button and status box sit level (vertically centred) on one line. */
.MRS-element-file .MRS-question-container {
  align-items: center;
}
/*
 * Open feedback (text input + textarea) in a tight host. At full size the
 * textarea reserves height: 12×base / min-height: 8×base — on a short host that
 * single element forces the fit to crush --mrs-base toward the floor (≈8px),
 * making ALL the text tiny and still overflowing. Cap it to a few base-units
 * tall (it stays a usable multi-line box) and trim the input margins so the
 * field is compact; the fit can then keep the text far larger.
 */
.MRS-root-container.MRS-fit-tight .MRS-textarea {
  min-height: calc(var(--mrs-base) * 3);
  height: calc(var(--mrs-base) * 4.5);
}
.MRS-root-container.MRS-fit-tight .MRS-input,
.MRS-root-container.MRS-fit-tight .MRS-textarea {
  padding: calc(var(--mrs-base) * 0.5) calc(var(--mrs-base) * 0.75);
  margin: calc(var(--mrs-gap) * 0.5) 0;
}
/* Checkbox in a tight host: drop the generous row padding so the control +
 * label + description cluster higher instead of floating mid-box. */
.MRS-root-container.MRS-fit-tight
  .MRS-element-checkbox
  .MRS-question-container.MRS-question-checkbox {
  padding: calc(var(--mrs-gap) * 0.5) 0;
}
.MRS-root-container.MRS-fit-tight .MRS-element-checkbox .MRS-checkbox-description {
  margin-top: calc(var(--mrs-gap) * 0.75);
}

/*
 * Lang menu sits absolutely at top:calc(var(--mrs-base) * 1) / left:calc(var(--mrs-base) * 1) and stretches calc(var(--mrs-base) * 4) down.
 * On any page where it's visible (.MRS-lang-visible), bump the root's top
 * padding so the floating buttons stop overlapping content — most visible
 * with checkbox questions where the checkbox itself is at the left edge.
 */
.MRS-root-container:has(.MRS-lang-menu.MRS-lang-visible) {
  padding-top: calc(var(--mrs-base) * 3.5);
}
/*
 * This one stays a viewport media query on purpose: it styles
 * .MRS-root-container itself, and an element can't respond to its own
 * container query (container queries only match descendants of the
 * container). It only trims top padding for the absolutely-positioned lang
 * menu, so a viewport breakpoint here is harmless.
 */
@media screen and (max-width: 500px) {
  /* Lang buttons shrink to calc(var(--mrs-base) * 2) on mobile; less clearance needed. */
  .MRS-root-container:has(.MRS-lang-menu.MRS-lang-visible) {
    padding-top: calc(var(--mrs-base) * 2.75);
  }
}
.MRS-root-container *,
.MRS-root-container *::before,
.MRS-root-container *::after {
  box-sizing: border-box;
}

.MRS-root-container *:focus-visible {
  outline: var(--theme-focus-outline);
  outline-offset: var(--theme-focus-outline-offset);
  box-shadow: var(--theme-focus-box-shadow);
}
@media (forced-colors: active) {
  .MRS-root-container *:focus-visible {
    outline: 0.2em solid;
  }
}

/*
 * Visually-hidden utility for content that should reach screen readers but
 * stay invisible on screen. Standard sr-only pattern (clip + 1px box) so
 * the element stays in the accessibility tree and keeps its dimensions
 * for live-region announcements.
 */
.MRS-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* Pages                                                                      */
/* -------------------------------------------------------------------------- */

.MRS-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------------- */
/* Question element wrapper                                                   */
/* -------------------------------------------------------------------------- */

.MRS-element {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0 0 calc(var(--mrs-gap) * 2.5) 0;
}
@container mrs (max-width: 500px) {
  .MRS-element { margin-bottom: calc(var(--mrs-gap) * 0.5); }
}

.MRS-question-header {
  margin-bottom: calc(var(--mrs-gap) * 2);
}
@container mrs (max-width: 500px) {
  .MRS-question-header { margin-bottom: calc(var(--mrs-gap) * 1); }
}

.MRS-question-title {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-title);
  font-weight: 700;
  line-height: 1;
  /* !important: renderer sets `color` inline from settings.colors.title */
  color: var(--theme-on-background) !important;
  text-align: center;
  /* Slightly bigger bottom margin gives a small breath between the title and
   * the description below it (margins collapse, so this sets that gap). */
  margin: calc(var(--mrs-gap) * 1) 0 calc(var(--mrs-gap) * 1.4) 0;
}
@container mrs (max-width: 850px) {
  .MRS-question-title { font-size: var(--theme-font-size-title-tablet); }
}
@container mrs (max-width: 500px) {
  .MRS-question-title { font-size: var(--theme-font-size-title-mobile); }
}

.MRS-question-description {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-description);
  font-weight: 400;
  line-height: 1.1;
  /* !important: renderer sets `color` inline from settings.colors.text */
  color: var(--theme-on-background) !important;
  text-align: center;
  margin: 0 0 calc(var(--mrs-gap) * 1.75) 0;
}
@container mrs (max-width: 850px) {
  .MRS-question-description { font-size: var(--theme-font-size-description-tablet); }
}
@container mrs (max-width: 500px) {
  .MRS-question-description { font-size: var(--theme-font-size-description-mobile); }
}

/* Required indicator — survey.ui style: small asterisk in on-background color */
.MRS-required::after {
  content: '*';
  color: var(--theme-on-background);
  margin-left: calc(var(--mrs-base) * 0.25);
}

/* -------------------------------------------------------------------------- */
/* Choice buttons (default + NPS share the choice surface)                    */
/* -------------------------------------------------------------------------- */

.MRS-question-container {
  display: flex;
  flex-wrap: wrap;
  /* flex-start, not stretch: every choice in a row starts at the SAME top, and
   * a choice whose label wraps to several lines simply grows DOWNWARD instead
   * of forcing its short-label neighbours into equally-tall boxes with the
   * text floating in the middle. */
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
  gap: calc(var(--mrs-base) * 1);
  width: 100%;
}

.MRS-question-container > .MRS-choice {
  flex: 1 1 calc(33% - calc(var(--mrs-base) * 1));
  min-height: calc(var(--mrs-base) * 6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Icon containers size to the icon + label (no button min-height, no vertical
 * centering, and no growing to fill the row) so the icons stay clustered as a
 * centred group with small gaps. They MAY shrink, though: the icon row is
 * flex-nowrap, so a no-shrink (flex-shrink: 0) item would overflow a narrow
 * host and — being centred — get clipped at BOTH ends (the classic "only half
 * of the first and last icon show"). The fit normally hides this by shrinking
 * --mrs-base, but only on VERTICAL overflow; a short icon question (e.g. no
 * per-icon labels) doesn't overflow vertically, so the fit never fires and the
 * rigid row spills sideways. flex-shrink: 1 + min-width: 0 lets the icons give
 * way to the available width instead; shrink only engages under deficit, so
 * roomy hosts still cluster them at full size. */
.MRS-question-container > .MRS-icon-container {
  flex: 0 1 auto;
  min-width: 0;
}

/*
 * Choice colors use !important because the renderer injects an inline
 * `style="background-color: ...; color: ...; border-color: ..."` from
 * settings.colors.button/buttonText on each choice button. Inline styles win
 * over class rules unless the class declares !important. Without this, the
 * MRS-selected state would not be visible.
 */
.MRS-choice {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  font-weight: 700;
  text-align: center;
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  border: 2px solid var(--theme-primary-outline) !important;
  border-radius: 0;
  padding: calc(var(--mrs-base) * 0.75) calc(var(--mrs-base) * 1.5);
  cursor: pointer;
  transition: background-color 200ms ease-out, color 200ms ease-out,
    border-color 200ms ease-out;
  text-shadow: none;
  box-shadow: none;
}
.MRS-choice:hover {
  background-color: var(--theme-primary-variant-3) !important;
  border-color: var(--theme-primary-outline-variant) !important;
  color: var(--theme-on-primary-variant) !important;
}
.MRS-choice.MRS-selected {
  background-color: var(--theme-primary-variant-3) !important;
  color: var(--theme-on-primary-variant) !important;
  border-color: var(--theme-primary-outline-variant) !important;
}
.MRS-choice.MRS-autoselected {
  background-color: var(--theme-primary-variant-2) !important;
  color: var(--theme-on-primary-variant) !important;
  border: 2px dashed var(--theme-primary-outline) !important;
}

/* "Other" and "dummy" choices share the choice surface. The text input for
 * "Other" lives in MRS-other-wrapper and is styled below.                    */

/* -------------------------------------------------------------------------- */
/* NPS                                                                        */
/* -------------------------------------------------------------------------- */

.MRS-element-nps .MRS-question-container,
.MRS-question-container.MRS-question-nps {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: calc(var(--mrs-base) * 0.5);
  margin-top: calc(var(--mrs-gap) * 1.5);
}
.MRS-element-nps .MRS-choice,
.MRS-question-nps .MRS-choice {
  flex: 1 1 0;
  min-width: 0;
  /*
   * Don't set explicit height/max-height. The previous rule set
   *   height: calc((100vw - calc(var(--mrs-base) * 12)) / 14)
   * which fought aspect-ratio 1/1: flex decided the width (~109px on a
   * 1200px content area) but the calc forced a smaller height, producing
   * pill shapes. With height left to auto, aspect-ratio derives it from
   * the flex-computed width and the buttons render as circles. max-width
   * keeps them from ballooning on ultra-wide viewports.
   */
  max-width: calc(var(--mrs-base) * 6);
  aspect-ratio: 1 / 1;
  /*
   * Override the calc(var(--mrs-base) * 6) min-height inherited from
   * `.MRS-question-container > .MRS-choice`. Without this, a narrow container
   * shrinks the flex width below calc(var(--mrs-base) * 6) while min-height holds at calc(var(--mrs-base) * 6), so the
   * buttons stretch into vertical pills instead of circles. min-height: 0 lets
   * aspect-ratio drive a square from the flex-computed width.
   */
  min-height: 0;
  padding: 0;
  /* !important: see comment on .MRS-choice base rule */
  background-color: var(--theme-nps-bg-color) !important;
  color: var(--theme-nps-text-color) !important;
  border: 3px solid var(--theme-primary-outline) !important;
  border-radius: 50%;
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-title);
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.MRS-element-nps .MRS-choice.MRS-selected,
.MRS-question-nps .MRS-choice.MRS-selected {
  transform: scale(1.2);
  background-color: var(--theme-nps-bg-color-selected) !important;
  border: 3px solid var(--theme-primary-variant) !important;
}
@container mrs (max-width: 850px) {
  .MRS-element-nps .MRS-choice,
  .MRS-question-nps .MRS-choice { font-size: calc(var(--mrs-base) * 2); }
}
/*
 * Mobile NPS — the desktop height formula calc((100vw - calc(var(--mrs-base) * 12)) / 14)
 * collapses to ~13px on a 375px phone, which then fights a calc(var(--mrs-base) * 1.5) text
 * size and the buttons render as illegible tiny circles. Switch to a
 * wrap-friendly layout with fixed calc(var(--mrs-base) * 2.5) (40px) circles so each button
 * stays tappable and the whole row gracefully spills onto two lines if
 * needed. Keeps justify-content centered so the wrapped row reads as
 * one cluster.
 */
@container mrs (max-width: 500px) {
  .MRS-element-nps .MRS-question-container,
  .MRS-question-container.MRS-question-nps {
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--mrs-base) * 0.4);
    margin-top: calc(var(--mrs-base) * 1);
  }
  .MRS-element-nps .MRS-choice,
  .MRS-question-nps .MRS-choice {
    flex: 0 0 auto;
    width: calc(var(--mrs-base) * 2.5);
    height: calc(var(--mrs-base) * 2.5);
    min-width: 0;
    min-height: 0;
    max-height: none;
    font-size: calc(var(--mrs-base) * 1);
    border-width: 2px;
  }
  /* Selected scales up — clamp the scale so it doesn't overflow the row */
  .MRS-element-nps .MRS-choice.MRS-selected,
  .MRS-question-nps .MRS-choice.MRS-selected {
    transform: scale(1.15);
  }
}

/*
 * Coloured NPS variant — opt-in via the renderer adding
 * .MRS-question-nps-colored and .MRS-nps-asc / .MRS-nps-desc to the
 * question container. Bucket distribution for the 0-to-10 scale (11
 * buttons), matching survey.ui default-2-0:
 *   ASC  (0 leftmost):  1-7 red, 8-9 yellow, 10-11 green
 *   DESC (10 leftmost): 1-2 green, 3-4 yellow, 5-11 red
 *
 * Selected state uses the same colour family — visual feedback comes from
 * the scale(1.2) + orange border applied via the base
 * .MRS-question-nps .MRS-choice.MRS-selected rule above.
 *
 * Non-0-to-10 scales fall through to the plain single-colour NPS look
 * (the bucket positions are scale-specific and survey.ui only colours the
 * 11-button scale).
 *
 * Note: :nth-of-type counts every <button> sibling — if a survey ever
 * adds an Other or Dummy choice to an NPS question they would shift the
 * bucket positions. survey.ui has the same limitation; we mirror it.
 */
.MRS-question-nps-colored .MRS-choice {
  background-color: var(--theme-nps-bg-color-bad) !important;
}
.MRS-question-nps-colored .MRS-choice.MRS-selected {
  background-color: var(--theme-nps-bg-color-bad-selected) !important;
}

/* ASC */
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice:nth-of-type(8),
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice:nth-of-type(9) {
  background-color: var(--theme-nps-bg-color-neutral) !important;
}
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice:nth-of-type(10),
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice:nth-of-type(11) {
  background-color: var(--theme-nps-bg-color-good) !important;
}
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice.MRS-selected:nth-of-type(8),
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice.MRS-selected:nth-of-type(9) {
  background-color: var(--theme-nps-bg-color-neutral-selected) !important;
}
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice.MRS-selected:nth-of-type(10),
.MRS-question-nps-colored.MRS-nps-asc .MRS-choice.MRS-selected:nth-of-type(11) {
  background-color: var(--theme-nps-bg-color-good-selected) !important;
}

/* DESC */
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice:nth-of-type(1),
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice:nth-of-type(2) {
  background-color: var(--theme-nps-bg-color-good) !important;
}
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice:nth-of-type(3),
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice:nth-of-type(4) {
  background-color: var(--theme-nps-bg-color-neutral) !important;
}
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice.MRS-selected:nth-of-type(1),
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice.MRS-selected:nth-of-type(2) {
  background-color: var(--theme-nps-bg-color-good-selected) !important;
}
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice.MRS-selected:nth-of-type(3),
.MRS-question-nps-colored.MRS-nps-desc .MRS-choice.MRS-selected:nth-of-type(4) {
  background-color: var(--theme-nps-bg-color-neutral-selected) !important;
}

.MRS-minmax-labels {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--mrs-gap) * 0.5);
  width: 100%;
  /* Larger than body so the Not-likely / Very-likely extremes read well next to
   * the large circles in a roomy / full-page host (where the circles reach
   * ~5×base and a 2.2×base label looked undersized beside them). The breakpoints
   * below walk it back down on smaller containers so it doesn't dominate. */
  font-size: calc(var(--mrs-base) * 2.8);
  /* The renderer emits the min/max labels BEFORE the button row; order:1 moves
   * them BELOW the buttons (the element wrapper is a flex column). Keeping the
   * extreme labels under the scale puts breathing room between the NPS buttons
   * and the nav buttons, so picking a score doesn't risk hitting Next/Prev. */
  order: 1;
}
@container mrs (max-width: 850px) {
  .MRS-minmax-labels { font-size: calc(var(--mrs-base) * 2.4); }
}
@container mrs (max-width: 500px) {
  .MRS-minmax-labels { font-size: calc(var(--mrs-base) * 2); }
}
/* In a tight host the extremes compete with the (now larger) circles for the
 * scarce height — keep them modest so the fit doesn't have to shrink everything
 * else to make room. */
.MRS-root-container.MRS-fit-tight .MRS-minmax-labels {
  font-size: calc(var(--mrs-base) * 1.8);
}
/* !important: renderer sets `color` inline from settings.colors.text on each label */
.MRS-minmax-min,
.MRS-minmax-max { color: var(--theme-on-background) !important; }
.MRS-minmax-min { text-align: left; }
.MRS-minmax-max { text-align: right; }

/* -------------------------------------------------------------------------- */
/* Icon (smiley) choices                                                      */
/* -------------------------------------------------------------------------- */

.MRS-element-icon .MRS-question-container,
.MRS-question-container.MRS-question-icon {
  flex-wrap: nowrap;
  /* Keep the icons clustered as a group with modest gaps rather than spread
   * edge-to-edge (which looks sparse/odd as the container gets wider). */
  justify-content: center;
  gap: calc(var(--mrs-base) * 1.25);
  margin-top: calc(var(--mrs-gap) * 1.5);
}

.MRS-icon-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  /* Size to the icon (width below) but allow shrinking so that, with MANY
   * icons in a narrow host, they all stay visible (shrink to fit) instead of
   * overflowing and getting clipped. Don't grow, so a few icons cluster
   * centered rather than spreading edge to edge. */
  flex: 0 1 auto;
  min-width: 0;
  width: calc(var(--mrs-base) * 6);
  max-width: calc(var(--mrs-base) * 6);
}

/*
 * Icons must override the .MRS-choice base rule (the smiley input carries
 * both classes). Unselected icons have no border or background — only the
 * selected state gets a visible border. Without !important the base wins
 * and every smiley gets a 2px black box around it.
 */
.MRS-icon-container .MRS-icon {
  width: 100%;
  height: auto;
  max-width: none;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none;
  cursor: pointer;
  transition: transform 120ms ease;
}
.MRS-icon-container .MRS-icon:hover {
  transform: scale(1.05);
  background: transparent !important;
  border: 0 !important;
}

/* survey.ui: selected icon gets outer outline + inner img border + scale.    */
.MRS-icon-container .MRS-icon.MRS-selected {
  transform: scale(1.2);
  border-radius: 50%;
  border: 4px solid #000 !important;
  outline: 3px solid var(--theme-primary-variant);
  background: transparent !important;
}

.MRS-icon-container .MRS-icon-label {
  font-family: var(--theme-font-family-base);
  /* The label is the readable part of an icon question — keep it generous and
   * scaling with the base, not slashed at narrow widths (it used to drop to
   * 0.64×base ≈ 10px, which was the "unreadable" report). */
  font-size: calc(var(--mrs-base) * 1.6);
  color: var(--theme-on-background);
  text-align: center;
  margin-top: calc(var(--mrs-gap) * 0.5);
  display: block;
  line-height: 1.1;
}

/* -------------------------------------------------------------------------- */
/* Slider (native input[type=range]; approximates vue-slider-component)       */
/* -------------------------------------------------------------------------- */

.MRS-question-slider {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Compact vertical padding (gap-based, so it shrinks further when tight);
   * horizontal padding stays put for the rail. */
  padding: calc(var(--mrs-gap) * 0.5) calc(var(--mrs-base) * 1.5) calc(var(--mrs-gap) * 0.75);
}

.MRS-question-slider .MRS-slider-question[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  width: 100%;
  margin: 0;
  cursor: pointer;
}
.MRS-question-slider .MRS-slider-question[type='range']::-webkit-slider-runnable-track {
  background: var(--theme-primary);
  height: calc(var(--mrs-base) * 1.5);
  border-radius: 0;
}
.MRS-question-slider .MRS-slider-question[type='range']::-moz-range-track {
  background: var(--theme-primary);
  height: calc(var(--mrs-base) * 1.5);
  border-radius: 0;
}
.MRS-question-slider .MRS-slider-question[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--theme-primary-variant);
  border: 3px solid var(--theme-primary-outline);
  height: calc(var(--mrs-base) * 2.25);
  width: calc(var(--mrs-base) * 2.25);
  border-radius: 50%;
  margin-top: calc(var(--mrs-base) * -0.4);
}
.MRS-question-slider .MRS-slider-question[type='range']::-moz-range-thumb {
  background: var(--theme-primary-variant);
  border: 3px solid var(--theme-primary-outline);
  height: calc(var(--mrs-base) * 2.25);
  width: calc(var(--mrs-base) * 2.25);
  border-radius: 50%;
}

/*
 * Slider value labels — show the min/max extremes anchored at the left and
 * right of the rail at all times, plus the currently selected value as a
 * highlighted pill in the middle. Layout: flex row, space-between pushes
 * first to the left and last to the right; the selected option sits
 * naturally between them.
 *
 * When the user picks the first or last option, that extreme also gets the
 * pill styling so the focus stays on what's selected.
 */
.MRS-range-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--mrs-base) * 0.5);
  min-height: calc(var(--mrs-base) * 2);
  margin-top: calc(var(--mrs-gap) * 0.75);
  pointer-events: none;
}
.MRS-range-labels option {
  display: none;
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  font-weight: 400;
  color: var(--theme-on-background);
  background: transparent;
  padding: 0;
  line-height: 1.2;
  white-space: normal;
  max-width: 30%;
  /*
   * Keep all labels visually the same size regardless of content length.
   * Without this, "1" gets a smaller box than "10" (proportional digits),
   * and the selected pill grows wider for two-digit values than one-digit
   * — visually unbalanced. min-width gives a stable footprint;
   * text-align centers the content within it; tabular-nums asks the font
   * for equal-width digits so "1" and "0" occupy the same advance.
   */
  min-width: calc(var(--mrs-base) * 2.5);
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
/* Always show the extremes (min on left, max on right) */
.MRS-range-labels option:first-child,
.MRS-range-labels option:last-child {
  display: inline-block;
}
/* Always show the active selection too — wider pill, but still fixed
 * width so the highlighted box stays the same shape on every value. */
.MRS-range-labels option.MRS-selected {
  display: inline-block;
  font-weight: 600;
  color: var(--theme-on-tertiary);
  background: var(--theme-tertiary);
  padding: calc(var(--mrs-base) * 0.4) calc(var(--mrs-base) * 1);
  min-width: calc(var(--mrs-base) * 4);
}

.MRS-slider-reset {
  margin-top: calc(var(--mrs-gap) * 0.6);
  align-self: center;
  background: transparent;
  border: 0;
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  color: var(--theme-on-background);
  cursor: pointer;
  padding: calc(var(--mrs-base) * 0.5);
  line-height: calc(var(--mrs-base) * 1.5);
}
.MRS-slider-reset:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------- */
/* Dropdown (native <select>)                                                 */
/* -------------------------------------------------------------------------- */

.MRS-question-dropdown {
  width: 100%;
  min-height: 50px;
  margin: calc(var(--mrs-base) * 0.5) auto;
  font-family: var(--theme-font-family-base);
  font-size: calc(var(--mrs-base) * 2);
  background-color: var(--theme-surface);
  color: var(--theme-on-surface);
  border: 2px solid var(--theme-primary-outline);
  border-radius: 0;
  padding: calc(var(--mrs-base) * 0.5) calc(var(--mrs-base) * 0.75);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--theme-tertiary) 50%),
    linear-gradient(135deg, var(--theme-tertiary) 50%, transparent 50%);
  background-position: right 15px top 1.1em, right 10px top 1.1em;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
@container mrs (max-width: 500px) {
  .MRS-question-dropdown { font-size: calc(var(--mrs-base) * 1.5); }
}
.MRS-question-dropdown:focus {
  border-color: var(--theme-primary-outline);
}
.MRS-question-dropdown option:checked {
  background-color: var(--theme-primary-variant-3);
  color: var(--theme-on-primary-variant);
}
.MRS-question-dropdown-multiple {
  appearance: listbox;
  -webkit-appearance: listbox;
  -moz-appearance: listbox;
  background-image: none;
  min-height: calc(var(--mrs-base) * 8);
}

/* -------------------------------------------------------------------------- */
/* Checkbox question                                                          */
/* -------------------------------------------------------------------------- */

.MRS-element-checkbox {
  align-items: flex-start;
  text-align: left;
}
/* Checkbox questions are left-aligned and read a bit cramped at the top when
 * there's plenty of room — add some air above them in roomy hosts only (tight
 * hosts are already fine and can't spare the space). */
.MRS-root-container:not(.MRS-fit-tight) .MRS-element-checkbox {
  margin-top: calc(var(--mrs-gap) * 4);
}
.MRS-element-checkbox .MRS-question-container.MRS-question-checkbox {
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: calc(var(--mrs-base) * 1) 0;
}
input.MRS-checkbox {
  flex: 0 0 auto;
  width: calc(var(--mrs-base) * 2);
  height: calc(var(--mrs-base) * 2);
  margin: 0 calc(var(--mrs-base) * 1) 0 0;
  border: 2px solid var(--theme-secondary);
  background-color: var(--theme-on-secondary);
  accent-color: var(--theme-secondary);
  cursor: pointer;
}
.MRS-element-checkbox label.MRS-label {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-description);
  font-weight: 400;
  color: var(--theme-on-background);
  text-align: left;
  cursor: pointer;
  line-height: 1.1;
}
@container mrs (max-width: 850px) {
  .MRS-element-checkbox label.MRS-label { font-size: var(--theme-font-size-description-tablet); }
}
@container mrs (max-width: 500px) {
  .MRS-element-checkbox label.MRS-label { font-size: var(--theme-font-size-description-mobile); }
}
.MRS-element-checkbox .MRS-checkbox-description {
  font-size: var(--theme-font-size-body);
  margin-top: calc(var(--mrs-gap) * 1.5);
  text-align: left;
}

/* -------------------------------------------------------------------------- */
/* Matrix                                                                     */
/* -------------------------------------------------------------------------- */

.MRS-element-matrix .MRS-question-container {
  display: table;
  border-collapse: collapse;
  width: auto;
  max-width: 100%;
  margin: calc(var(--mrs-base) * 0.5) auto;
  overflow-x: auto;
}
.MRS-element-matrix .MRS-matrix-row { display: table-row; }
.MRS-element-matrix .MRS-matrix-cell {
  display: table-cell;
  padding: calc(var(--mrs-base) * 1);
  vertical-align: middle;
  text-align: center;
}
@container mrs (max-width: 500px) {
  .MRS-element-matrix .MRS-matrix-cell { padding: calc(var(--mrs-base) * 0.4); }
}

.MRS-element-matrix .MRS-matrix-header-cell,
.MRS-element-matrix .MRS-matrix-row-title {
  font-family: var(--theme-font-family-base);
  font-size: calc(var(--mrs-base) * 1.9);
  font-weight: 600;
  color: var(--theme-on-background);
  text-align: left;
}
@container mrs (max-width: 500px) {
  .MRS-element-matrix .MRS-matrix-header-cell,
  .MRS-element-matrix .MRS-matrix-row-title { font-size: calc(var(--mrs-base) * 1.6); }
}

.MRS-element-matrix .MRS-matrix-cell .MRS-choice {
  width: 100%;
  min-width: calc(var(--mrs-base) * 4);
  min-height: calc(var(--mrs-base) * 4);
  padding: calc(var(--mrs-base) * 2);
  font-family: var(--theme-font-family-base);
  font-weight: 600;
  font-size: calc(var(--mrs-base) * 1.8);
  line-height: 1;
  text-align: center;
  /* !important: see comment on .MRS-choice base rule */
  background-color: var(--theme-primary) !important;
  color: var(--theme-on-primary) !important;
  border: 2px solid var(--theme-primary-outline) !important;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.MRS-element-matrix .MRS-matrix-cell .MRS-choice:hover {
  background-color: var(--theme-primary-variant-3) !important;
  border-color: var(--theme-primary-outline-variant) !important;
  color: var(--theme-on-primary-variant) !important;
}
.MRS-element-matrix .MRS-matrix-cell .MRS-choice.MRS-selected {
  background-color: var(--theme-primary-variant-3) !important;
  color: var(--theme-on-primary-variant) !important;
  border-color: var(--theme-primary-outline-variant) !important;
}
@container mrs (max-width: 850px) {
  .MRS-element-matrix .MRS-matrix-cell .MRS-choice {
    font-size: calc(var(--mrs-base) * 1.6);
    padding: calc(var(--mrs-base) * 1.5);
  }
}
@container mrs (max-width: 500px) {
  .MRS-element-matrix .MRS-matrix-cell .MRS-choice {
    font-size: calc(var(--mrs-base) * 1.4);
    padding: calc(var(--mrs-base) * 0.8);
  }
}

.MRS-element-matrix .MRS-matrix-cell .MRS-icon-container {
  max-width: calc(var(--mrs-base) * 4.5);
}
.MRS-element-matrix .MRS-matrix-cell .MRS-icon-container .MRS-icon.MRS-selected {
  transform: scale(1.3);
  border: 3px solid var(--theme-primary-variant) !important;
  outline: 3px solid #000;
  background: transparent !important;
}
.MRS-element-matrix .MRS-matrix-cell .MRS-question-dropdown {
  width: 100%;
  min-width: calc(var(--mrs-base) * 8);
  font-size: calc(var(--mrs-base) * 1.5);
}

/* -------------------------------------------------------------------------- */
/* Hierarchy                                                                  */
/* -------------------------------------------------------------------------- */

.MRS-question-hierarchy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 0;
  width: 100%;
}

.MRS-hierarchy-search {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-subtitle);
  height: calc(var(--mrs-base) * 3);
  width: 100%;
  border: 1px solid var(--theme-tertiary-outline);
  border-radius: 0;
  padding: 0 calc(var(--mrs-base) * 0.5);
  margin-bottom: calc(var(--mrs-base) * 0.5);
  outline: none;
  background-color: #2e3949;
  color: #ffffff;
  -webkit-appearance: none;
  appearance: none;
}
.MRS-hierarchy-search::placeholder { color: #ffffffaa; }
@container mrs (max-width: 850px) {
  .MRS-hierarchy-search { font-size: var(--theme-font-size-subtitle-tablet); }
}
@container mrs (max-width: 500px) {
  .MRS-hierarchy-search { font-size: var(--theme-font-size-subtitle-mobile); }
}

.MRS-hierarchy-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
}

.MRS-hierarchy-level,
.MRS-hierarchy-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--mrs-base) * 0.5) calc(var(--mrs-base) * 0.5);
  margin: calc(var(--mrs-base) * 1) 0 0 calc(var(--mrs-base) * 1);
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-subtitle);
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  width: auto;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
@container mrs (max-width: 850px) {
  .MRS-hierarchy-level,
  .MRS-hierarchy-choice { font-size: var(--theme-font-size-subtitle-tablet); }
}
@container mrs (max-width: 500px) {
  .MRS-hierarchy-level,
  .MRS-hierarchy-choice {
    font-size: var(--theme-font-size-subtitle-mobile);
    padding: calc(var(--mrs-base) * 0.75) calc(var(--mrs-base) * 0.5);
  }
}

.MRS-hierarchy-level {
  background-color: var(--theme-primary);
  color: var(--theme-on-primary);
  border: 2px solid var(--theme-primary-outline);
}
.MRS-hierarchy-level:hover {
  background-color: var(--theme-primary-variant);
  border-color: var(--theme-primary-outline-variant);
  color: var(--theme-on-primary-variant);
}
.MRS-hierarchy-level.expanded {
  background-color: var(--theme-primary-variant);
  color: var(--theme-on-primary-variant);
}

.MRS-hierarchy-choice {
  background-color: var(--theme-primary-variant);
  color: var(--theme-on-primary);
  border: 2px solid var(--theme-primary-outline);
  padding-left: calc(var(--mrs-base) * 1);
}
.MRS-hierarchy-choice:hover {
  background-color: var(--theme-primary-variant-2);
  border-color: var(--theme-primary-outline-variant);
  color: var(--theme-on-primary-variant);
}
.MRS-hierarchy-choice.MRS-selected {
  background-color: var(--theme-primary-variant-2);
  color: var(--theme-on-primary-variant-2);
  border: 4px solid #000;
}

.MRS-hierarchy-level-expander {
  display: inline-block;
  margin: 0 calc(var(--mrs-base) * 0.5) 0 calc(var(--mrs-base) * 0.5);
  width: 24px;
  height: 28px;
  color: var(--theme-on-background);
}
@container mrs (max-width: 500px) {
  .MRS-hierarchy-level-expander {
    margin: 0 calc(var(--mrs-base) * 1) 0 calc(var(--mrs-base) * 0.5);
    width: 14px;
    height: 18px;
  }
}
/* arrows ▶ / ▼ are added by helper-functions inline via ::after content      */
.MRS-hierarchy-level .MRS-hierarchy-level-expander::after {
  content: '▶';
  font-size: calc(var(--mrs-base) * 1);
  display: inline-block;
  transition: transform 150ms ease;
}
.MRS-hierarchy-level.expanded .MRS-hierarchy-level-expander::after {
  content: '▼';
}

.MRS-hierarchy-node-hidden { display: none !important; }

.MRS-search-hilight {
  background-color: var(--theme-primary-variant-2);
  color: var(--theme-on-primary-variant-2);
}

/* -------------------------------------------------------------------------- */
/* Text inputs / textarea                                                     */
/* -------------------------------------------------------------------------- */

.MRS-textarea-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/*
 * Small text-input question — renderer puts the label, description and
 * input as direct flex children of .MRS-question-container (no wrapper),
 * so by default they line up side-by-side until something wraps. Force
 * each onto its own row and center them.
 *
 * Scoped via the parent .MRS-question-input child (small input adds this
 * class but the textarea wrapper does NOT, so this won't touch large
 * textareas, and the standalone .MRS-element-text has no
 * .MRS-question-container inside it either).
 */
.MRS-element-text
  .MRS-question-container:has(> .MRS-question-input)
  > .MRS-label,
.MRS-element-text
  .MRS-question-container:has(> .MRS-question-input)
  > .MRS-question-description,
.MRS-element-text
  .MRS-question-container:has(> .MRS-question-input)
  > .MRS-question-input {
  flex: 0 0 100%;
  width: 100%;
  text-align: center;
}
.MRS-element-text
  .MRS-question-container:has(> .MRS-question-input)
  > .MRS-label {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-subtitle);
  font-weight: 400;
  color: var(--theme-on-background) !important;
  margin: 0 0 calc(var(--mrs-base) * 0.5) 0;
}

.MRS-textarea-title {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-subtitle);
  font-weight: 400;
  color: var(--theme-on-background);
  /* Centered to match the description and textarea below it. */
  text-align: center;
  margin: 0 0 calc(var(--mrs-base) * 0.5) 0;
}

.MRS-input,
.MRS-textarea {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  width: 100%;
  padding: calc(var(--mrs-base) * 1);
  margin: calc(var(--mrs-base) * 0.5) 0 calc(var(--mrs-base) * 1.5) 0;
  resize: none;
  outline: none;
  background-color: var(--theme-surface);
  color: var(--theme-on-surface);
  border: 2px solid var(--theme-primary-outline);
  border-radius: 0;
  transition: box-shadow 200ms ease;
}
.MRS-input:focus,
.MRS-textarea:focus {
  box-shadow: inset 0 0 0 calc(var(--mrs-base) * 0.25) rgba(46, 57, 73, 0.5);
}
.MRS-textarea { min-height: calc(var(--mrs-base) * 8); height: calc(var(--mrs-base) * 12); }
.MRS-input::placeholder,
.MRS-textarea::placeholder {
  color: var(--theme-on-surface-variant);
  font-style: oblique;
}

/*
 * Validation styling — must not rely on colour alone (WCAG 1.4.1).
 * Invalid inputs get red colour PLUS a thicker, dashed border. That gives
 * three orthogonal visual channels (colour, line weight, line style) so a
 * user with red/green colour vision deficiency still sees the difference
 * between :valid and :invalid. The library's inline CSS sets a 1px solid
 * border by default; the !important overrides land it at 3px dashed.
 */
.MRS-input-validatable:invalid {
  border-color: #c43951;
  border-width: 3px !important;
  border-style: dashed !important;
}
.MRS-input-validatable[aria-invalid='true'] {
  border-color: #c43951;
  border-width: 3px !important;
  border-style: dashed !important;
  outline: 3px solid #e0652f;
  outline-offset: 0;
}

/* -------------------------------------------------------------------------- */
/* "Other" choice text input                                                  */
/* -------------------------------------------------------------------------- */

.MRS-other-wrapper {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  width: 100%;
  margin-top: calc(var(--mrs-base) * 2);
  gap: calc(var(--mrs-base) * 0.5);
}
.MRS-other-wrapper .MRS-other-label {
  display: none; /* survey.ui hides the label, the button itself reads as "Other" */
}
.MRS-other-input {
  flex: 1 1 auto;
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  padding: calc(var(--mrs-base) * 1);
  height: calc(var(--mrs-base) * 5);
  background-color: var(--theme-surface);
  color: var(--theme-on-surface);
  border: 2px solid var(--theme-secondary-outline);
  border-radius: 0;
  outline: none;
}
.MRS-other-input:focus {
  box-shadow: inset 0 0 0 calc(var(--mrs-base) * 0.25) rgba(46, 57, 73, 0.5);
}

/* -------------------------------------------------------------------------- */
/* File upload                                                                */
/* -------------------------------------------------------------------------- */

input[type='file'].MRS-file-input {
  /*
   * Visually hidden but still keyboard-focusable.
   *
   * The library's own inline CSS (src/my-roidu-survey.scss) sets
   *   input[type="file"] { display: none; }
   * and gets injected into the document AFTER this stylesheet loads, so
   * without an explicit override the input ends up display:none and is
   * removed from the tab order entirely. The display:block !important
   * below restores focusability; clip + 1px + absolute positioning hide
   * it visually without taking it out of tab order (sr-only pattern).
   */
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.file-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--theme-primary);
  color: var(--theme-on-primary);
  border: 2px solid #000;
  padding: calc(var(--mrs-base) * 0.5) calc(var(--mrs-base) * 1.5);
  min-height: calc(var(--mrs-base) * 3.6);
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  text-align: center;
}
.file-input:hover {
  background-color: var(--theme-primary-variant-3);
  color: var(--theme-on-primary-variant);
}
/*
 * Keyboard focus indicator for the file upload "button".
 *
 * The actual <input type="file"> is visually hidden but still focusable so
 * Tab can reach it. The renderer outputs DOM order [label, input], so the
 * visible label needs to react to its sibling input's :focus-visible state.
 * `:has()` lets us style the label when the next sibling input is focused
 * (supported in Chrome 105+, Safari 15.4+, Firefox 121+).
 *
 * The older selector `input + .file-input` is kept as a fallback in case
 * future renderer changes swap the DOM order to [input, label].
 */
.file-input:has(+ input[type='file'].MRS-file-input:focus-visible),
input[type='file'].MRS-file-input:focus-visible + .file-input {
  outline: var(--theme-focus-outline);
  outline-offset: var(--theme-focus-outline-offset);
  box-shadow: var(--theme-focus-box-shadow);
}

/*
 * File upload status indicators (success / error) — injected by the renderer
 * after the (hidden) file input. The .MRS-file-list base class also overrides
 * the generic .MRS-element-text alignment so it renders close to the upload
 * button rather than as a centered survey-text paragraph.
 *
 * Wrapping rule: this banner MUST sit on its own row below the upload
 * button. flex-basis: 100% normally forces a wrap inside a flex-wrap
 * container — BUT max-width caps the flex "hypothetical main size" per the
 * spec, which would let the upload button share the row on wide screens.
 * So instead we use min-width: 100% (overrides any max-width) and let the
 * banner span the full row. Content is centered inside via flex; the wide
 * green/red rectangle is the intended visual treatment.
 */
.MRS-file-list {
  flex: 0 0 100%;
  min-width: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--mrs-base) * 0.5);
  margin: calc(var(--mrs-base) * 1) 0;
  padding: calc(var(--mrs-base) * 0.5) calc(var(--mrs-base) * 1);
  /* Same min-height as the upload button so, side by side in tight hosts, the
   * green box and the button are the same height. */
  min-height: calc(var(--mrs-base) * 3.6);
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  font-weight: 600;
  text-align: center;
  border: 2px solid;
}
.MRS-file-list-success {
  color: #1d6b1d;
  background-color: #e9f9ec;
  border-color: #1d6b1d;
}
.MRS-file-list-error {
  color: #c43951;
  background-color: #fde8eb;
  border-color: #c43951;
}

/* Remove-uploaded-file button — sits inside the green success banner so the
 * user can undo the upload. Underline-on-hover keeps it visually distinct
 * from the "Lataa tiedosto" primary action without competing for attention. */
.MRS-file-remove {
  margin-left: calc(var(--mrs-base) * 0.5);
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--theme-font-family-base);
  font-size: 0.9em;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.MRS-file-remove:hover {
  text-decoration: none;
}
.MRS-file-list-error::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #c43951;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

/*
 * File upload loading spinner — shown while xhr is in flight.
 *
 * The renderer inserts this as a sibling of the file label inside the
 * flex .MRS-question-container, so without flex-basis: 100% the spinner
 * would sit next to the upload button and push it sideways. flex: 0 0 100%
 * forces it onto its own row. The visible spinning ring is the ::before
 * pseudo-element so the .MRS-file-loading element itself can be a full-row
 * centering wrapper.
 */
.MRS-file-loading {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(var(--mrs-base) * 3);
  margin: calc(var(--mrs-base) * 1) 0;
  background: transparent;
  border: 0;
}
.MRS-file-loading::before {
  content: '';
  display: block;
  width: calc(var(--mrs-base) * 2);
  height: calc(var(--mrs-base) * 2);
  box-sizing: border-box;
  border: 3px solid var(--theme-primary);
  border-top-color: var(--theme-secondary);
  border-radius: 50%;
  animation: MRS-spin 0.8s linear infinite;
}
@keyframes MRS-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .MRS-file-loading::before {
    animation-duration: 2s;
  }
}

/* -------------------------------------------------------------------------- */
/* Image element                                                              */
/* -------------------------------------------------------------------------- */

.MRS-element-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: calc(var(--mrs-base) * 1) auto;
}

/* -------------------------------------------------------------------------- */
/* Text element (rich content paragraph)                                      */
/* -------------------------------------------------------------------------- */

.MRS-element-text {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-description);
  font-weight: 400;
  text-align: center;
  color: var(--theme-on-background);
  line-height: 1.1;
  margin: 0 auto calc(var(--mrs-base) * 1.75) auto;
  max-width: 1200px;
}
.MRS-element-text a {
  color: var(--theme-primary-variant);
  text-decoration: underline;
}
.MRS-element-text a:hover {
  color: var(--theme-primary-variant-2);
}

/* -------------------------------------------------------------------------- */
/* Language picker                                                            */
/* -------------------------------------------------------------------------- */

.MRS-lang-menu {
  display: none;
  position: absolute;
  top: calc(var(--mrs-base) * 1);
  left: calc(var(--mrs-base) * 1);
  z-index: 9;
  flex-direction: row;
  gap: calc(var(--mrs-base) * 1);
}
/*
 * !important because the library's compiled inline CSS sets
 *   .MRS-lang-menu.MRS-lang-visible { display: block }
 * which loads after this theme link and would otherwise win at equal
 * specificity, defeating the `gap: calc(var(--mrs-base) * 1)` above.
 */
.MRS-lang-menu.MRS-lang-visible { display: flex !important; }

.MRS-lang-button {
  width: calc(var(--mrs-base) * 2.5);
  height: calc(var(--mrs-base) * 2.5);
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--theme-secondary);
  color: var(--theme-on-secondary);
  border: 0 solid var(--theme-secondary-outline);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border 200ms ease;
}
.MRS-lang-button:hover {
  background-color: var(--theme-secondary-variant);
  color: var(--theme-on-secondary-variant);
  border: 2px solid #000;
}
.MRS-lang-button.MRS-lang-active {
  background-color: var(--theme-secondary-variant);
  color: var(--theme-on-secondary-variant);
  border: 2px solid #000;
}
@container mrs (max-width: 500px) {
  .MRS-lang-button { width: calc(var(--mrs-base) * 2); height: calc(var(--mrs-base) * 2); font-size: calc(var(--mrs-base) * 1); }
}

/* -------------------------------------------------------------------------- */
/* Page navigation (previous / next / send)                                    */
/* -------------------------------------------------------------------------- */

/*
 * Nav buttons flow inside the survey instead of position:fixed to the
 * viewport. Fixed positioning escaped the embed container entirely (the
 * buttons rendered at the bottom corners of the whole page). A flex row at
 * the foot of the page keeps Previous on the left and Next/Send on the right
 * within whatever container the survey is embedded in. margin-left:auto on
 * Next/Send pushes it to the right edge even when there is no Previous
 * button on the page.
 */
.MRS-page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--mrs-base) * 1);
  margin-top: calc(var(--mrs-gap) * 1.5);
}

.MRS-previous-page,
.MRS-next-page,
.MRS-single-page-send {
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-subtitle);
  background-color: var(--theme-secondary);
  color: var(--theme-on-secondary);
  border: 2px solid var(--theme-secondary-outline);
  border-radius: calc(var(--mrs-base) * 1);
  padding: calc(var(--mrs-base) * 0.75) calc(var(--mrs-base) * 2.5);
  /* Constant size regardless of which label ("Previous" / "Next" / "Send",
   * and across languages) so the buttons don't change width page to page. */
  min-width: calc(var(--mrs-base) * 8);
  text-align: center;
  cursor: pointer;
  z-index: 99;
  transition: transform 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s;
}
.MRS-next-page,
.MRS-single-page-send { margin-left: auto; }
.MRS-previous-page:hover,
.MRS-next-page:hover,
.MRS-single-page-send:hover,
/* Mirror the hover state on keyboard focus so Tab-navigating users get
 * the same colour confirmation that a button is the current target —
 * not just the focus outline. :focus-visible only matches when focus
 * arrived via keyboard, so mouse clicks don't leave a button stuck in
 * the hover colours after release. */
.MRS-previous-page:focus-visible,
.MRS-next-page:focus-visible,
.MRS-single-page-send:focus-visible {
  transform: scale(1.05);
  background-color: var(--theme-secondary-variant);
  border-color: var(--theme-secondary-outline-variant);
  color: var(--theme-on-secondary-variant);
}

/*
 * Tablet — bring the nav buttons down from the calc(var(--mrs-base) * 2) desktop subtitle to a
 * tablet-appropriate calc(var(--mrs-base) * 1.5), otherwise the floating buttons dominate the
 * fold on landscape phones / smaller tablets.
 */
@container mrs (max-width: 850px) {
  .MRS-previous-page,
  .MRS-next-page,
  .MRS-single-page-send {
    font-size: var(--theme-font-size-subtitle-tablet);
    padding: calc(var(--mrs-base) * 0.6) calc(var(--mrs-base) * 2);
  }
}

/*
 * Mobile — switch to a compact rem-based size so the buttons stop eating
 * a third of the viewport. The previous rule (padding: 4vmin 5vmin without
 * a font-size override) left the buttons at calc(var(--mrs-base) * 2) text inside large vmin
 * padding — ~60px-tall pills on a phone.
 */
@container mrs (max-width: 500px) {
  .MRS-previous-page,
  .MRS-next-page,
  .MRS-single-page-send {
    font-size: var(--theme-font-size-subtitle-mobile);
    padding: calc(var(--mrs-base) * 0.6) calc(var(--mrs-base) * 1.25);
    border-radius: calc(var(--mrs-base) * 0.5);
  }
}

/* Renderer hides the first page's previous button via a class rule in the
 * helper SCSS already; we don't duplicate that here.                          */

/* -------------------------------------------------------------------------- */
/* Progress (numbers + bar)                                                   */
/* -------------------------------------------------------------------------- */

/*
 * Progress indicators are anchored to the survey root (position: relative)
 * rather than the viewport, so they stay inside the embed container. The
 * bar spans the container width (100%), not 100vw.
 */
.MRS-progress-wrapper {
  position: absolute;
  bottom: calc(var(--mrs-base) * 1);
  left: 0;
  right: 0;
  z-index: 12;
  pointer-events: none;
  text-align: center;
}
.MRS-progress-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--mrs-base) * 0.1);
  background-color: var(--theme-background);
  color: var(--theme-on-background);
  border-radius: 50%;
  width: fit-content;
  height: fit-content;
  padding: calc(var(--mrs-base) * 0.5);
  margin: 0 auto;
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  pointer-events: auto;
}
.MRS-progress-numbers span { display: inline-block; padding: 0 calc(var(--mrs-base) * 0.1); }

.MRS-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: calc(var(--mrs-base) * 0.75);
  background-color: var(--theme-on-tertiary);
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: hidden;
  z-index: 99;
  pointer-events: none;
}
.MRS-progress-meter {
  display: block;
  height: 100%;
  background-color: var(--theme-tertiary);
  transition: width 300ms ease;
}

/* The progress bar / numbers float at the bottom (position:absolute), and the
 * nav is anchored at the bottom too — reserve bottom padding when a progress
 * indicator is present so they don't touch. (numbers are taller than the bar,
 * so that rule wins by source order when both are shown.) */
.MRS-root-container:has(.MRS-progress-bar) {
  padding-bottom: calc(var(--mrs-base) * 1.4);
}
.MRS-root-container:has(.MRS-progress-wrapper) {
  padding-bottom: calc(var(--mrs-base) * 2.4);
}

/* -------------------------------------------------------------------------- */
/* Status banners                                                             */
/* -------------------------------------------------------------------------- */

.MRS-missing-required,
.MRS-invalid-inputs {
  display: block;
  margin: calc(var(--mrs-base) * 1) auto;
  max-width: 1200px;
  padding: calc(var(--mrs-base) * 1) calc(var(--mrs-base) * 1.5);
  background-color: var(--theme-background);
  color: #c43951;
  border: 3px solid #e0652f;
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-body);
  font-weight: 600;
  text-align: center;
}
.MRS-hidden { display: none !important; }

.MRS-already-responded {
  display: block;
  margin: calc(var(--mrs-base) * 4) auto;
  max-width: 800px;
  padding: calc(var(--mrs-base) * 3) calc(var(--mrs-base) * 2);
  font-family: var(--theme-font-family-base);
  font-size: var(--theme-font-size-description);
  font-weight: 400;
  color: var(--theme-on-background);
  text-align: center;
  background: var(--theme-background);
  border: 2px solid var(--theme-primary-outline);
}

/* -------------------------------------------------------------------------- */
/* Misc utility resets                                                        */
/* -------------------------------------------------------------------------- */

.MRS-root-container button { font-family: inherit; }
.MRS-translatable { /* hook only; no visual styles */ }

/* The inline CSS injected by the renderer also lives under .MRS-root-container
 * but it only carries the structural rules (hide/show pages, hierarchy hides,
 * etc.). Those rules use !important where needed, so the visual rules above
 * win for everything visual.                                                  */