/**
 * Story form — sleek, modern, card on a gradient.
 *
 * Mobile-first. The brief expects most contributors to submit from a phone.
 *
 * COLOUR RULES, and they are not stylistic preferences — they are measured:
 *
 *   #0052A0 blue     7.73:1 on white   AAA. Safe for anything.
 *   #55606E body     6.39:1 on white   AA.  Floor for body text.
 *   #669C42 green    3.28:1 on white   Large text only.
 *   #F6931D orange   2.31:1 on white   FILL ONLY — never text on light.
 *
 * THE ORANGE BUTTON. #F6931D is the button fill, as asked. Its label is
 * --ink (#1F2933), which is 6.40:1 against it and passes AA. White on
 * #F6931D is 2.31:1 and is not used anywhere, because it cannot be read.
 */

.rods-form-wrap {
  --blue:        #0052A0;
  --blue-deep:   #003A73;
  --orange:      #F6931D;
  --orange-lt:   #FBB040;
  --orange-dk:   #E07B0A;
  --green:       #669C42;
  --ink:         #1F2933;
  --body:        #55606E;
  --pale:        #E4EFF9;
  --paper:       #FDFCFA;
  --line:        #D5DCE4;
  --error:       #ff3131;   /* borders, rails, fills  — 3.66:1, fine for non-text */
  --error-text:  #E60000;   /* error TEXT only        — 4.81:1, passes AA */

  --display: var(--rods-font-display, 'Josefin Sans', Helvetica, Arial, sans-serif);
  --sans:    var(--rods-font-body, 'Montserrat', Helvetica, Arial, sans-serif);

  --r:    14px;   /* card radius   */
  --r-sm: 10px;   /* control radius */

  /* The gradient field the card sits on. Full-bleed regardless of the theme's
     content width, without needing a wrapper element. */
  position: relative;
  isolation: isolate;
  padding: clamp( 0.85rem, 4vw, 3.25rem ) clamp( 0.6rem, 3vw, 1.5rem );
  font-family: var(--sans);
  color: var(--body);
}

/* ---------------------------------------------------------------------
   Pointer-tracked gradient
   Ported from the Marketing Portal login screen (.login-screen in
   app/assets/css/main.css), with the blue ramp swapped for orange.

   --bg-x / --bg-y are written by rods-form.js on pointermove; the transition
   smooths the movement so it glides rather than snapping. Both properties have
   defaults, so with JavaScript off this is simply a static radial gradient.
   --------------------------------------------------------------------- */

.rods-form-wrap::before,
.rods-form-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Bleed past the theme's content column. */
  margin-inline: calc( 50% - 50vw );
  width: 100vw;
}

.rods-form-wrap::before {
  z-index: -2;
  background: radial-gradient(
    circle at var(--bg-x, 50%) var(--bg-y, 12%),
    #FDC069 0%,
    var(--orange-lt) 22%,
    var(--orange) 38%,
    var(--orange-dk) 68%,
    #C26800 100%
  );
}

/* Soft highlights, screened over the top — this is what gives it depth rather
   than looking like a flat colour wash. */
.rods-form-wrap::after {
  z-index: -1;
  background:
    radial-gradient( circle at var(--bg-x, 50%) var(--bg-y, 12%), rgb( 255 255 255 / 0.26 ), transparent 0 18% ),
    radial-gradient( circle at 20% 16%, rgb( 255 255 255 / 0.12 ), transparent 0 16% ),
    radial-gradient( circle at 82% 18%, rgb( 255 255 255 / 0.10 ), transparent 0 16% ),
    linear-gradient( 180deg, rgb( 255 255 255 / 0.06 ), rgb( 0 0 0 / 0.08 ) );
  mix-blend-mode: screen;
}

/* The card. */
.rods-form,
.rods-thanks,
.rods-summary {
  max-width: 48rem;
  margin-inline: auto;
  background: #fff;
  border-radius: var(--r);
  box-shadow: 0 18px 50px -12px rgba( 31, 41, 51, 0.28 ),
              0 4px 12px rgba( 31, 41, 51, 0.08 );
  padding: clamp( 1.15rem, 4.5vw, 2.75rem );
}

.rods-summary { margin-bottom: 1.25rem; }

/* --- Honeypot ------------------------------------------------------------ */
.rods-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Progress -----------------------------------------------------------
   Numbered, with a connecting rail. Orange marks completion; blue marks
   where you are. */

.rods-progress {
  display: flex;
  list-style: none;
  margin: 0 0 clamp( 1.5rem, 4vw, 2.25rem );
  padding: 0;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  counter-reset: rods-step;
}

.rods-progress li {
  flex: 1;
  position: relative;
  padding-top: 2.5rem;
  text-align: center;
  color: var(--body);
  transition: color 0.25s ease;
}

/* The rail, drawn between circles rather than under them. */
.rods-progress li:not(:first-child)::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  right: 50%;
  width: 100%;
  height: 3px;
  background: var(--line);
  z-index: 0;
  transition: background 0.3s ease;
}

.rods-progress li::before {
  counter-increment: rods-step;
  content: counter( rods-step );
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX( -50% );
  z-index: 1;
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--line);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--body);
  transition: all 0.25s ease;
}

.rods-progress li.is-done::before {
  content: "\2713";
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);           /* dark on orange — 6.40:1 */
}

.rods-progress li.is-done::after { background: var(--orange); }

.rods-progress li.is-current {
  color: var(--ink);
  font-weight: 700;
}

.rods-progress li.is-current::before {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 0 5px rgba( 0, 82, 160, 0.15 );
}

@media (max-width: 30rem) {
  /* Labels get cramped on a narrow phone; the numbers still carry the
     meaning, and the step heading names the step anyway. */
  .rods-progress li { font-size: 0; padding-top: 2.35rem; }
  .rods-progress li::before { font-size: 0.8rem; }
}

/* --- Steps --------------------------------------------------------------- */

.rods-step {
  border: none;
  padding: 0;
  margin: 0;
  animation: rods-in 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

@keyframes rods-in {
  from { opacity: 0; transform: translateY( 10px ); }
  to   { opacity: 1; transform: none; }
}

.rods-step legend {
  padding: 0;
  margin-bottom: 0.35rem;
  font-family: var(--display);
  font-size: clamp( 1.3rem, 5vw, 2rem );
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.rods-step legend:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
  border-radius: 3px;
}

.rods-step-n {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.rods-hint,
.rods-prompt-intro {
  margin: 0 0 1.4rem;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--body);
}

.rods-prompt-intro {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

/* --- Prompt cards ------------------------------------------------------- */

.rods-prompts { margin: 0 0 2rem; }

.rods-prompts-intro { margin: 0 0 1rem; color: var(--body); }

.rods-prompt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

@media (min-width: 32rem) { .rods-prompt-grid { grid-template-columns: repeat( 2, 1fr ); } }
@media (min-width: 52rem) { .rods-prompt-grid { grid-template-columns: repeat( 3, 1fr ); } }

.rods-prompt {
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  padding: 0.8rem 0.9rem;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease,
              transform 0.18s ease, box-shadow 0.18s ease;
}

.rods-prompt:hover {
  border-color: var(--blue);
  background: #fff;
  transform: translateY( -2px );
  box-shadow: 0 6px 16px -6px rgba( 0, 82, 160, 0.3 );
}

.rods-prompt:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* Selected: orange rail on the left, pale blue fill. Non-colour signal too —
   the title turns bold — so selection survives greyscale. */
.rods-prompt[aria-pressed="true"] {
  background: var(--pale);
  border-color: var(--blue);
  box-shadow: inset 4px 0 0 var(--orange);
}

.rods-prompt[aria-pressed="true"] .rods-prompt-title { font-weight: 700; }

.rods-prompt[aria-pressed="true"] .rods-prompt-title::after {
  content: " \2713";
  color: var(--blue-deep);
}

.rods-prompt-title {
  display: block;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--blue-deep);
  margin-bottom: 0.2rem;
}

.rods-prompt-body {
  display: block;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--body);
}

/* --- Fields ------------------------------------------------------------- */

.rods-field {
  border: none;
  padding: 0;
  margin: 0 0 1.35rem;
}

.rods-field[hidden] { display: none; }

.rods-field > label,
.rods-field > legend {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.rods-required {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--body);
}

/* Two columns for the short identity fields, one on a phone. */
@media (min-width: 38rem) {
  .rods-step[data-step="1"] {
    display: grid;
    grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
    gap: 0 1.25rem;
  }

  .rods-step[data-step="1"] > legend,
  .rods-step[data-step="1"] > .rods-hint,
  .rods-step[data-step="1"] > .rods-field--choice,
  .rods-step[data-step="1"] > .rods-field--decade,
  .rods-step[data-step="1"] > .rods-field--conditional {
    grid-column: 1 / -1;
  }
}

.rods-field input[type="text"],
.rods-field input[type="email"],
.rods-field input[type="tel"],
.rods-field input[type="date"],
.rods-field select,
.rods-field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  /* 16px minimum stops iOS Safari zooming the page on focus. */
  font-size: max( 1rem, 16px );
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.rods-field :is(input, select, textarea):hover { border-color: #AEB9C5; }

.rods-field :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba( 0, 82, 160, 0.16 );
}

/* Native select arrow, drawn rather than inherited, so it matches. */
.rods-select {
  appearance: none;
  background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230052A0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

.rods-date { max-width: 16rem; }

/* The story field is the most important input on the site. */
.rods-field--story textarea {
  background: var(--paper);
  border-radius: 12px;
  padding: 1.2rem 1.3rem;
  font-size: max( 1.07rem, 17px );
  line-height: 1.75;
  min-height: 10.5rem;
  resize: vertical;
  box-shadow: inset 0 2px 6px rgba( 31, 41, 51, 0.04 );
}

.rods-field--story textarea::placeholder {
  color: #7C8794;
  font-style: italic;
}

.rods-field:not(.rods-field--story) textarea {
  line-height: 1.6;
  resize: vertical;
  min-height: 6rem;
}

.rods-encouragement {
  margin: 0.55rem 0 0;
  min-height: 1.4em;   /* reserve the line so text appearing doesn't shift layout */
  font-size: 0.88rem;
  font-style: italic;
  color: var(--body);
}

/* --- Option cards ------------------------------------------------------
   :has() gives the selected state with no JavaScript. Where unsupported the
   controls still work — they just don't tint. */

.rods-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 32rem) {
  .rods-field--choice .rods-options,
  .rods-field--choice_list .rods-options { grid-template-columns: repeat( 2, 1fr ); }
}

@media (min-width: 52rem) {
  .rods-field--choice .rods-options { grid-template-columns: repeat( 3, 1fr ); }
}

.rods-option,
.rods-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.95rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.rods-option:hover,
.rods-check:hover { border-color: var(--blue); background: var(--paper); }

.rods-option:has( input:checked ),
.rods-check:has( input:checked ) {
  border-color: var(--blue);
  background: var(--pale);
  box-shadow: inset 3px 0 0 var(--orange);
}

.rods-option:has( input:focus-visible ),
.rods-check:has( input:focus-visible ) {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.rods-option input,
.rods-check input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.1rem 0 0;
  flex: none;
  accent-color: var(--blue);
  cursor: pointer;
}

.rods-option label,
.rods-check label {
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}

/* The consent statement is long and matters — give it room. */
.rods-field--boolean .rods-check {
  padding: 1.05rem 1.2rem;
  background: var(--paper);
}

/* --- Decade picker -----------------------------------------------------
   Segmented control. Still radios underneath, so arrow-key navigation is the
   platform's own. */

.rods-decades {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rods-decade { position: relative; flex: 1 1 4.5rem; }

.rods-decade--unsure { flex-basis: 100%; }

@media (min-width: 32rem) { .rods-decade--unsure { flex-basis: 6.5rem; } }

/* Hide the input visually but keep it focusable and in the a11y tree; the
   label is the visible control and :has() styles from the checked state. */
.rods-decade input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  inset: 0;
  cursor: pointer;
}

.rods-decade label {
  display: block;
  padding: 0.7rem 0.4rem;
  text-align: center;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  transition: all 0.16s ease;
}

.rods-decade:hover label { border-color: var(--blue); color: var(--ink); }

.rods-decade:has( input:checked ) label {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba( 0, 82, 160, 0.5 );
}

.rods-decade:has( input:focus-visible ) label {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* --- Errors ------------------------------------------------------------
   Never colour alone: text, plus a thicker border. */

.rods-error {
  display: flex;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  color: var(--error-text);
  font-size: 0.92rem;
  font-weight: 600;
}

.rods-field--error :is(input, select, textarea) {
  border-color: var(--error);
  border-width: 3px;
}

.rods-summary {
  border-top: 5px solid var(--error);
}

.rods-summary:focus-visible { outline: 3px solid var(--error); outline-offset: 4px; }

.rods-summary h2 {
  margin: 0 0 0.6rem;
  font-family: var(--display);
  /* 1.35rem bold clears the large-text threshold, so the vivid #ff3131 is
     legitimate here even though it would not be at body size. */
  color: var(--error);
  font-size: 1.35rem;
}

.rods-summary ul { margin: 0; padding-left: 1.2rem; }
.rods-summary li { margin: 0.3rem 0; }
.rods-summary a  { color: var(--error-text); font-weight: 600; }

/* --- Notices ----------------------------------------------------------- */

.rods-notice {
  padding: 0.95rem 1.1rem;
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: #FEF5E7;
  color: var(--ink);
}

/* --- Actions and the submit gate --------------------------------------- */

.rods-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.rods-actions button {
  flex: 1 1 auto;
  padding: 0.9rem 1.8rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 3rem;           /* 44px+ touch target */
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

@media (min-width: 32rem) { .rods-actions button { flex: 0 0 auto; } }

/* Orange fill with an INK label. White on this orange is 2.31:1 and unusable. */
.rods-submit,
.rods-next {
  background: var(--orange);
  color: var(--ink);
  box-shadow: 0 4px 14px -4px rgba( 224, 123, 10, 0.65 );
}

.rods-submit:hover,
.rods-next:hover {
  background: var(--orange-dk);
  transform: translateY( -2px );
  box-shadow: 0 8px 20px -6px rgba( 224, 123, 10, 0.7 );
}

.rods-submit { padding-inline: 2.3rem; }

.rods-back {
  background: #fff;
  border-color: var(--blue);
  color: var(--blue);
}

.rods-back:hover { background: var(--pale); }

.rods-actions button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Shown in place of the submit button until the form is complete. */
.rods-gate {
  margin-top: 1.25rem;
  padding: 1rem 1.2rem;
  border: 2px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 0.94rem;
  color: var(--body);
}

.rods-gate-title {
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--ink);
}

.rods-gate ul { margin: 0; padding-left: 1.2rem; }
.rods-gate li { margin: 0.2rem 0; }

.rods-note {
  margin-top: 1.35rem;
  font-size: 0.9rem;
  color: var(--body);
}

/* Visually hidden, still announced. */
.rods-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect( 0 0 0 0 );
  white-space: nowrap;
  border: 0;
}

/* --- Thank you --------------------------------------------------------- */

.rods-thanks {
  border-top: 6px solid var(--orange);
  animation: rods-in 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

.rods-thanks:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.rods-thanks h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp( 1.35rem, 5vw, 2rem );
  font-weight: 600;
  line-height: 1.15;
  color: var(--blue-deep);
}

.rods-thanks p { margin: 0 0 1rem; color: var(--ink); line-height: 1.7; }
.rods-thanks p:last-child { margin-bottom: 0; }

/* --- Uppy, tinted to match -------------------------------------------- */

.rods-form-wrap .uppy-Dashboard-inner {
  border-radius: var(--r-sm);
  border: 2px dashed var(--line);
  background: var(--paper);
}

.rods-form-wrap .uppy-Dashboard-AddFiles-title { color: var(--ink); }

.rods-form-wrap .uppy-Dashboard-browse {
  color: var(--blue);
  font-weight: 600;
}

.rods-form-wrap .uppy-StatusBar-actionBtn--upload { background: var(--blue); }

/* --- Reduced motion ---------------------------------------------------
   Everything above that moves is decorative, so all of it goes. */

@media (prefers-reduced-motion: reduce) {
  .rods-form-wrap *,
  .rods-form-wrap *::before,
  .rods-form-wrap *::after {
    animation: none !important;
    transition: none !important;
  }

  .rods-prompt:hover,
  .rods-submit:hover,
  .rods-next:hover { transform: none; }
}


/* =======================================================================
   Icons
   ======================================================================= */

.rods-icon {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.1em;
}

.rods-step-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.rods-icon--step {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.32rem;
  box-sizing: content-box;
  border-radius: 10px;
  background: var(--pale);
  color: var(--blue);
  flex: none;
}

@media (max-width: 26rem) {
  /* On the narrowest phones the icon competes with the heading for the line. */
  .rods-icon--step { width: 1.35rem; height: 1.35rem; padding: 0.28rem; }
}

/* =======================================================================
   Whole-row clickable options
   The <label> is now the card and wraps the input, so the entire area is a
   hit target with no JavaScript. These rules replace the earlier ones.
   ======================================================================= */

label.rods-option,
label.rods-check {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  transition: border-color 0.16s ease, background 0.16s ease;
  /* Stops a double-tap being read as zoom on iOS. */
  touch-action: manipulation;
}

.rods-option-text { flex: 1; }

label.rods-option:has( input:checked ),
label.rods-check:has( input:checked ) {
  border-color: var(--blue);
  background: var(--pale);
  box-shadow: inset 3px 0 0 var(--orange);
  font-weight: 600;
}

/* Focus lands on the input; ring the card so it is visible. */
label.rods-option:has( input:focus-visible ),
label.rods-check:has( input:focus-visible ) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.rods-question {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

/* Decade: the label wraps the input too. */
label.rods-decade {
  display: block;
  position: relative;
  flex: 1 1 4.5rem;
  margin: 0;
  padding: 0.6rem 0.4rem;
  text-align: center;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  touch-action: manipulation;
  transition: all 0.16s ease;
}

label.rods-decade input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

label.rods-decade.rods-decade--unsure { flex-basis: 100%; }

@media (min-width: 32rem) {
  label.rods-decade.rods-decade--unsure { flex-basis: 6.5rem; }
}

label.rods-decade:hover { border-color: var(--blue); color: var(--ink); }

label.rods-decade:has( input:checked ) {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

label.rods-decade:has( input:focus-visible ) {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* =======================================================================
   Uppy — contain it
   Uppy's Dashboard sizes itself and will happily run past a narrow container.
   Every one of these is a real overflow fix on a phone, not decoration.
   ======================================================================= */

#rods-uploads { max-width: 100%; overflow: hidden; }

.rods-form-wrap .uppy-Root,
.rods-form-wrap .uppy-Dashboard,
.rods-form-wrap .uppy-Dashboard-inner,
.rods-form-wrap .uppy-Dashboard-innerWrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.rods-form-wrap .uppy-Dashboard-inner {
  /* Deliberately NOT `height: auto` — the camera and audio panels size
     themselves against the Dashboard's height, so collapsing it shrank the
     video preview to a postage stamp. Constrain with max-height instead. */
  min-height: 24rem;
  max-height: min( 80vh, 34rem );
}

@media (max-width: 34rem) {
  .rods-form-wrap .uppy-Dashboard-inner { min-height: 22rem; max-height: 70vh; }

  /* The default note wraps badly in a narrow column. */
  .rods-form-wrap .uppy-Dashboard-note {
    font-size: 0.8rem;
    line-height: 1.4;
    padding-inline: 0.5rem;
  }

  .rods-form-wrap .uppy-DashboardTab-name { font-size: 0.75rem; }
}

/* Long filenames are the other classic overflow. */
.rods-form-wrap .uppy-Dashboard-Item-name,
.rods-form-wrap .uppy-Dashboard-Item-status {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =======================================================================
   Overflow safety net
   Nothing inside the card may push the page sideways. Long unbroken words,
   pasted URLs and email addresses are the usual culprits.
   ======================================================================= */

/* No overflow on .rods-form-wrap — it would clip the full-bleed gradient.
   Horizontal scroll is prevented at the root instead; see the theme. */

.rods-form,
.rods-thanks,
.rods-summary { overflow-wrap: break-word; }

.rods-form :is(input, select, textarea) { max-width: 100%; }

.rods-select {
  /* A 120-entry language list must not stretch the layout. */
  text-overflow: ellipsis;
}

/* =======================================================================
   Phone refinements
   ======================================================================= */

@media (max-width: 30rem) {
  .rods-form,
  .rods-thanks,
  .rods-summary { border-radius: 12px; }

  .rods-step legend { line-height: 1.2; }

  .rods-hint { margin-bottom: 1.15rem; }

  .rods-prompt-body { font-size: 0.82rem; }

  .rods-field { margin-bottom: 1.15rem; }

  .rods-field--story textarea { padding: 1rem; font-size: 16px; }

  /* Full-width stacked buttons are far easier to hit with a thumb. */
  /* Order is set explicitly further down — never reverse it. Reversing put
     'Send my story' above the navigation on phones. */
  .rods-actions { gap: 0.6rem; }

  .rods-date { max-width: 100%; }
}


/* The pointer gradient is motion. Reduced-motion users get a calm static one. */
@media (prefers-reduced-motion: reduce) {
  .rods-form-wrap::before {
    background: linear-gradient( 160deg, var(--orange-lt) 0%, var(--orange) 45%, var(--orange-dk) 100% );
    transition: none;
  }

  .rods-form-wrap::after {
    background: linear-gradient( 180deg, rgb( 255 255 255 / 0.05 ), rgb( 0 0 0 / 0.06 ) );
    transition: none;
  }
}


/* =======================================================================
   Fixes and refinements — this block supersedes earlier rules
   ======================================================================= */

/* --- Gradient reaches the edges again -------------------------------------
   The pseudo-elements are 100vw and pulled out with a negative inline margin.
   Nothing between them and the viewport may set overflow, or the bleed is
   clipped back to the content column — which is exactly what went wrong. */

.rods-form-wrap {
  padding-inline: clamp( 0.75rem, 4vw, 2.5rem );
  padding-block: clamp( 1.25rem, 5vw, 3.5rem );
}

/* --- Icons: orange, and quieter ------------------------------------------ */

.rods-icon--step {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.42rem;
  border-radius: 12px;
  /* Solid orange tile, white glyph, sized so white comfortably clears
     the 3:1 floor for graphics with margin (3.29:1 at the light end, 5.1:1
     at the dark end). The earlier pale tile with an orange glyph reached only
     2.69:1, which is why it read as washed out. */
  background: linear-gradient( 145deg, #D57505 0%, #A85700 100% );
  color: #fff;
  stroke-width: 2;
  box-shadow: 0 2px 6px -2px rgba( 143, 75, 0, 0.5 );
}

@media (max-width: 26rem) {
  .rods-icon--step {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.34rem;
    border-radius: 10px;
  }
}

/* --- Step badge ----------------------------------------------------------- */

.rods-step-n {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  padding: 0.28rem 0.7rem 0.28rem 0.3rem;
  border-radius: 999px;
  background: var(--pale);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.rods-step-n-num {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0;
}

/* --- Selects: give the text room ----------------------------------------
   A select centres its text using line-height, so it needs an explicit one.
   Inheriting the body's 1.7 was clipping descenders on the longer language
   names. */

.rods-field select,
.rods-select {
  min-height: 3.1rem;
  line-height: 1.4;
  padding-block: 0.75rem;
  text-overflow: ellipsis;
}

.rods-field input[type="date"] { min-height: 3.1rem; }

@media (max-width: 30rem) {
  .rods-field select,
  .rods-select { min-height: 3.25rem; font-size: 16px; }
}

/* --- Buttons ------------------------------------------------------------
   White labels, not dark. #F6931D cannot carry white text (2.31:1), so the
   button uses a deeper tone of the same hue: #B25F00 at the top of the
   gradient is 4.64:1 against white, which passes AA. On the white card it
   still reads as the brand orange, just richer. */

.rods-actions button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  min-height: 3.25rem;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.rods-submit,
.rods-next {
  background: linear-gradient( 180deg, #B25F00 0%, #8F4B00 100% );
  color: #fff;
  box-shadow: 0 2px 4px rgba( 143, 75, 0, 0.24 ),
              0 8px 20px -6px rgba( 143, 75, 0, 0.45 );
}

.rods-submit:hover,
.rods-next:hover {
  filter: brightness( 1.08 );
  transform: translateY( -2px );
  box-shadow: 0 4px 8px rgba( 143, 75, 0, 0.26 ),
              0 14px 28px -8px rgba( 143, 75, 0, 0.5 );
}

.rods-submit:active,
.rods-next:active {
  transform: translateY( 0 );
  filter: brightness( 0.96 );
}

.rods-submit {
  padding-inline: 2.4rem;
  font-size: 1.05rem;
}

/* Secondary: quiet, so it never competes with the primary action. */
.rods-back {
  background: #fff;
  color: var(--blue-deep);
  box-shadow: inset 0 0 0 2px var(--line);
}

.rods-back:hover {
  background: var(--pale);
  box-shadow: inset 0 0 0 2px var(--blue);
  transform: none;
  filter: none;
}

.rods-actions button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* --- Optional questions panel ------------------------------------------- */

.rods-optional {
  margin: 2rem 0 0;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  overflow: hidden;
}

.rods-optional-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.6rem;
  padding: 1rem 1.15rem;
  cursor: pointer;
  list-style: none;
  transition: background 0.16s ease;
}

.rods-optional-summary::-webkit-details-marker { display: none; }

.rods-optional-summary::after {
  content: "";
  margin-left: auto;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate( 45deg );
  transition: transform 0.2s ease;
  flex: none;
  align-self: center;
}

.rods-optional[open] .rods-optional-summary::after { transform: rotate( -135deg ); }

.rods-optional-summary:hover { background: var(--pale); }

.rods-optional-summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

.rods-optional-title {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blue-deep);
}

.rods-optional-note {
  font-size: 0.85rem;
  color: var(--body);
}

.rods-optional-body {
  padding: 0.25rem 1.15rem 1.15rem;
  border-top: 1px solid var(--line);
}

.rods-optional-body .rods-field:last-child { margin-bottom: 0; }

/* --- Mobile ------------------------------------------------------------- */

@media (max-width: 30rem) {
  /* The action bar sticks to the bottom so Next is always in reach, instead
     of being below however much the step happens to contain. */
  .rods-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-direction: row;
    gap: 0.5rem;
    margin-inline: -1.15rem;
    padding: 0.85rem 1.15rem;
    background: rgba( 255, 255, 255, 0.96 );
    backdrop-filter: blur( 8px );
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px -8px rgba( 31, 41, 51, 0.18 );
  }

  .rods-actions button {
    flex: 1 1 auto;
    width: auto;
    padding-inline: 1rem;
    font-size: 0.98rem;
  }

  .rods-back { flex: 0 0 auto; padding-inline: 1.25rem; }

  .rods-form { padding-bottom: 0.5rem; }

  .rods-optional-summary { padding: 0.85rem 1rem; }
  .rods-optional-body { padding: 0.25rem 1rem 1rem; }

  /* Two prompt cards per row rather than one, so the list is not six screens
     tall. The description is dropped — the title carries it on a phone. */
  .rods-prompt-grid { grid-template-columns: repeat( 2, 1fr ); gap: 0.45rem; }
  .rods-prompt { padding: 0.7rem; }
  .rods-prompt-title { font-size: 0.95rem; margin-bottom: 0; }
  .rods-prompt-body { display: none; }
}

/* Sticky needs no blur fallback, but reduced-transparency users get solid. */
@media (prefers-reduced-transparency: reduce) {
  .rods-actions { background: #fff; backdrop-filter: none; }
}


/* =======================================================================
   Button order and the disabled submit
   ======================================================================= */

/* Navigation first, submit last — at every width, and matching DOM order so
   the visual sequence and the tab sequence agree. */
.rods-actions {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.rods-back   { order: 1; }
.rods-next   { order: 2; }
.rods-submit { order: 3; }

/* The gate message belongs under the buttons, not between them. */
.rods-gate { order: 4; flex: 1 0 100%; }

/* --- Submit, awaiting completion ---------------------------------------
   Visible but inert. Using aria-disabled rather than the `disabled`
   attribute is deliberate: a truly disabled button leaves the tab order
   entirely, so a keyboard user tabs straight past it and never finds out why
   they cannot send. This way it is reachable, announced as unavailable, and
   activating it jumps to the first thing still missing. */

.rods-submit[aria-disabled="true"] {
  background: #E7EAEE;
  color: #5A636E;              /* 5.05:1 on that grey — readable, not shouting */
  box-shadow: inset 0 0 0 2px #D5DCE4;
  cursor: not-allowed;
}

.rods-submit[aria-disabled="true"]:hover {
  filter: none;
  transform: none;
  box-shadow: inset 0 0 0 2px var(--blue);
}

.rods-submit[aria-disabled="true"]:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (max-width: 30rem) {
  /* Submit takes the full width on its own row beneath the navigation, which
     keeps it the obvious final action without crowding Back and Next. */
  .rods-submit { flex: 1 0 100%; order: 3; }
  .rods-back   { flex: 0 0 auto; }
  .rods-next   { flex: 1 1 auto; }
}


/* =======================================================================
   The gradient's easing
   ======================================================================= */

/*
 * Registering the two custom properties as <percentage> is what makes them
 * animatable — an unregistered custom property is just a string to the engine
 * and jumps straight to its new value. inherits: true matters too: the values
 * are set on .rods-form-wrap by script, and the ::before/::after that draw the
 * gradient need to inherit the mid-animation value.
 *
 * Where @property is unsupported the gradient simply tracks the pointer
 * instantly instead of gliding — no styling breaks.
 */
@property --bg-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --bg-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 12%;
}

/*
 * No transition on the gradient — it tracks the pointer instantly.
 *
 * The @property registrations above are kept even though nothing animates
 * them: they give the two properties a typed initial value, so the gradient
 * still has a sensible centre before any script runs (and if none ever does).
 */


/* =======================================================================
   Final pass — supersedes earlier rules
   ======================================================================= */

/* --- Label alignment ----------------------------------------------------
   Labels sat flush against the card edge while the input's text was inset by
   its own padding, so nothing lined up vertically. Everything that describes
   a field now shares the input's inset, giving one clean text axis down the
   form. --field-pad is the input's horizontal padding plus its 2px border. */

.rods-form-wrap { --field-pad: 1.05rem; }

.rods-field > label,
.rods-field > legend,
.rods-question,
.rods-error,
.rods-encouragement,
.rods-prompts-intro,
.rods-hint {
  padding-inline-start: var(--field-pad);
}

/* The story field's own label follows the same axis. */
.rods-field--story > label { padding-inline-start: var(--field-pad); }

/* --- Step heading: no counter ------------------------------------------- */

.rods-step-n { display: none; }

/* Direct child only. As a descendant selector this also matched the <legend>
   of every field fieldset nested inside the step — radio groups, checkbox
   groups, the decade picker — and reset their indent to zero, which is why
   "Your connection to…" sat flush against the card while the text inputs'
   labels were correctly aligned. */
.rods-step > legend {
  display: block;
  margin-bottom: 0.4rem;
  padding-inline-start: 0;
}

.rods-step-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* --- Icons: brand orange, white glyph -----------------------------------
   #F6931D with a white glyph, as asked. These are decorative — aria-hidden,
   sitting beside a heading that already says the same thing — so the 3:1
   graphics floor does not apply to them. A heavier stroke and a rim keep the
   shape crisp at this contrast. */

.rods-icon--step {
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.42rem;
  border-radius: 12px;
  background: var(--orange);
  color: #fff;
  stroke-width: 2.2;
  box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.35 ),
              0 2px 6px -2px rgba( 224, 123, 10, 0.55 );
}

@media (max-width: 26rem) {
  .rods-icon--step {
    width: 1.2rem;
    height: 1.2rem;
    padding: 0.34rem;
    border-radius: 10px;
  }
}

/* --- Buttons: brighter, white label -------------------------------------
   #D57505 gives white 3.29:1. That is short of the 4.5:1 needed for normal
   text, but the label is 1.2rem at weight 700 — 19.2px bold — which is WCAG
   "large text", where the requirement is 3:1. So this passes on its own terms
   rather than by looking the other way. The size is what makes it legal, so
   do not shrink the label without darkening the fill. */

.rods-submit,
.rods-next {
  background: linear-gradient( 180deg, #D57505 0%, #BE6600 100% );
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba( 190, 102, 0, 0.22 ),
              0 8px 20px -6px rgba( 190, 102, 0, 0.42 );
}

.rods-submit:hover,
.rods-next:hover {
  background: linear-gradient( 180deg, #E0820A 0%, #C97005 100% );
  filter: none;
  transform: translateY( -2px );
  box-shadow: 0 4px 8px rgba( 190, 102, 0, 0.26 ),
              0 14px 28px -8px rgba( 190, 102, 0, 0.48 );
}

.rods-submit:active,
.rods-next:active { transform: translateY( 0 ); filter: brightness( 0.96 ); }

.rods-back {
  font-size: 1.05rem;
  font-weight: 600;
}

@media (max-width: 30rem) {
  .rods-submit,
  .rods-next { font-size: 1.1rem; }
  .rods-back { font-size: 1rem; }
}


/* =======================================================================
   Alignment and mobile spacing
   ======================================================================= */

/* Everything that labels a field shares one text axis with the input's own
   text. Stated last and explicitly so nothing further up can undo it. */

.rods-field > label,
.rods-field > legend,
.rods-field--choice > legend,
.rods-field--choice_list > legend,
.rods-field--decade > legend,
.rods-field--boolean > .rods-question,
.rods-question,
.rods-error,
.rods-encouragement {
  padding-inline-start: var(--field-pad);
}

/* <legend> ignores width and shrink-wraps, so a long one wraps oddly without
   this. Also kills the browser's default 2px inline padding, which would add
   itself to our indent. */
.rods-field > legend {
  display: block;
  width: 100%;
  padding-inline-end: var(--field-pad);
  box-sizing: border-box;
}

/* The "(required)" note should sit with its label, not start a new line, but
   must still be allowed to wrap on a narrow phone. */
.rods-required { white-space: nowrap; }

/* --- Mobile breathing room ---------------------------------------------
   The card was nearly touching the screen edges, which is what made it feel
   cramped regardless of the internal spacing. */

@media (max-width: 30rem) {
  .rods-form-wrap {
    padding-inline: 0.9rem;
    padding-block: 1.1rem;
  }

  .rods-form,
  .rods-thanks,
  .rods-summary { padding: 1.35rem 1.1rem; }

  /* Keep the sticky bar flush with the card's new padding. */
  .rods-actions {
    margin-inline: -1.1rem;
    padding-inline: 1.1rem;
  }

  .rods-form-wrap { --field-pad: 0.95rem; }

  /* A little more air between question groups than between plain inputs —
     the option lists are tall, and without it they run together. */
  .rods-field--choice,
  .rods-field--choice_list,
  .rods-field--decade { margin-bottom: 1.6rem; }

  .rods-field > label,
  .rods-field > legend { margin-bottom: 0.45rem; }
}

/* Very narrow phones: pull the indent in so long labels do not wrap early. */
@media (max-width: 22rem) {
  .rods-form-wrap { --field-pad: 0.75rem; }
  .rods-form { padding-inline: 0.9rem; }
  .rods-actions { margin-inline: -0.9rem; padding-inline: 0.9rem; }
}


/* =======================================================================
   Buttons — final colours
   ======================================================================= */

/*
 * #f57f2a base, #f6931d hover, as specified.
 *
 * Recorded for whoever reads this next: white on #f57f2a measures 2.64:1 and
 * on #f6931d 2.31:1, against 4.5:1 for normal text and 3:1 for large bold.
 * Dark ink on the same fills is 5.59:1 and 6.40:1 respectively. The colours
 * were chosen deliberately by the client after the measurements were put in
 * front of them; this is a known, accepted trade-off, not an oversight.
 * Do not "fix" it without asking.
 */

.rods-submit,
.rods-next {
  background: #f57f2a;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  box-shadow: 0 2px 4px rgba( 191, 88, 0, 0.2 ),
              0 8px 20px -6px rgba( 191, 88, 0, 0.34 );
}

.rods-submit:hover,
.rods-next:hover {
  background: #f6931d;
  filter: none;
  transform: translateY( -2px );
  box-shadow: 0 4px 8px rgba( 191, 88, 0, 0.24 ),
              0 14px 28px -8px rgba( 191, 88, 0, 0.4 );
}

.rods-submit:active,
.rods-next:active {
  background: #e87220;
  transform: translateY( 0 );
  filter: none;
}

.rods-submit:focus-visible,
.rods-next:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (max-width: 30rem) {
  .rods-submit,
  .rods-next { font-size: 1.05rem; }
}


/* =======================================================================
   Alignment, done once
   ======================================================================= */

/*
 * A field's title is a <label>, a <legend>, or a <p> depending on the field
 * type, and each was previously aligned by its own selector — which is why
 * "May we contact you about this story?" (a <p>) and "How Regina Open Door
 * Society may use this" (a <legend>) did not line up. They all carry
 * .rods-field-label now, so this is the only rule that positions them.
 *
 * <legend> needs the extra declarations: it shrink-wraps and ignores width by
 * default, and browsers add 2px of inline padding of their own, which would
 * stack on top of our indent.
 */
.rods-field-label {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.5rem;
  padding-inline: var(--field-pad);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-align: start;
  float: none;
}

.rods-field-label .rods-required {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--body);
}

/* Everything else that sits under a title shares the same axis. */
.rods-error,
.rods-encouragement,
.rods-prompts-intro {
  padding-inline-start: var(--field-pad);
}

/* --- Step headers: centred -----------------------------------------------
   Icon, title and description as one centred block. They are introducing the
   step rather than labelling a field, so they do not belong on the field axis
   at all — which also removes the mismatch that made the whole thing look
   misaligned. */

.rods-step > legend {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
  padding-inline: 0;
  text-align: center;
}

.rods-step-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
}

.rods-hint {
  padding-inline: var(--field-pad);
  text-align: center;
  margin-bottom: 1.75rem;
}

/* The prompt intro stays left, with the cards it describes. */
.rods-prompts-intro { text-align: start; }

/* --- Progress: white check in the completed circle ---------------------- */

.rods-progress li.is-done::before {
  color: #fff;
}

@media (max-width: 30rem) {
  .rods-hint { margin-bottom: 1.4rem; }
  .rods-field-label { margin-bottom: 0.45rem; }
}


/* =======================================================================
   The hidden attribute must win
   =======================================================================

   `[hidden] { display: none }` lives in the browser's own stylesheet, which
   loses to any author rule that sets `display` — and `.rods-actions button`
   sets `display: inline-flex`. The result was that Back, Next and Send my
   story all stayed on screen no matter what the script did, because
   `element.hidden = true` had no visual effect.

   This is the one place !important is the right tool: the whole point of the
   attribute is that it overrides layout, and every element that carries it in
   this form is genuinely meant to be gone — not just invisible, but out of the
   accessibility tree and the tab order too.
*/

.rods-form-wrap [hidden],
.rods-actions button[hidden],
.rods-field[hidden],
.rods-gate[hidden] {
  display: none !important;
}


/* =======================================================================
   Uppy: camera and audio previews
   =======================================================================

   Uppy's webcam and audio panels are absolutely positioned inside the
   Dashboard and inherit their size from it, so anything that collapses the
   Dashboard's height collapses the preview with it. These rules make the panel
   fill the available space and let the video scale to it.
*/

.rods-form-wrap .uppy-DashboardContent-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.rods-form-wrap .uppy-Dashboard-AddFiles,
.rods-form-wrap .uppy-Dashboard-files { min-height: 0; }

/* --- Camera ------------------------------------------------------------- */

.rods-form-wrap .uppy-Webcam-container,
.rods-form-wrap .uppy-Audio-container {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.rods-form-wrap .uppy-Webcam-videoContainer,
.rods-form-wrap .uppy-Audio-audioContainer {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 15rem;
  background: #16181c;
  overflow: hidden;
}

.rods-form-wrap .uppy-Webcam-video,
.rods-form-wrap .uppy-Webcam-videoContainer video,
.rods-form-wrap .uppy-Audio-audioContainer canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: none !important;
  /* contain, not cover — a cropped face is worse than letterboxing when
     somebody is framing themselves to record a message. */
  object-fit: contain;
  display: block;
}

/* The recording controls must stay visible beneath the preview rather than
   being pushed out by the video. */
.rods-form-wrap .uppy-Webcam-buttonContainer,
.rods-form-wrap .uppy-Audio-footer {
  flex: 0 0 auto;
  padding-block: 0.75rem;
  background: #fff;
}

.rods-form-wrap .uppy-Audio-audioContainer { min-height: 11rem; }

/* Recording timer / level meter sizing on a phone. */
@media (max-width: 34rem) {
  .rods-form-wrap .uppy-Webcam-videoContainer { min-height: 13rem; }
  .rods-form-wrap .uppy-Audio-audioContainer { min-height: 9rem; }
}

/* =======================================================================
   Progress: completed steps are green
   ======================================================================= */

/*
 * #669C42 rather than the orange. White on it is 3.28:1, which clears the 3:1
 * floor for a status graphic — the orange was 2.31:1 and did not.
 */
.rods-progress li.is-done::before {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.rods-progress li.is-done::after { background: var(--green); }


/* =======================================================================
   Saved-draft prompt
   ======================================================================= */

.rods-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0 0 1.75rem;
  padding: 1rem 1.15rem;
  border: 2px solid var(--line);
  border-left: 4px solid var(--green);
  border-radius: var(--r-sm);
  background: var(--paper);
}

.rods-draft-text {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
}

.rods-draft-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rods-draft button {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 600;
  min-height: 2.6rem;
  cursor: pointer;
}

.rods-draft-restore {
  background: var(--blue);
  color: #fff;
}

.rods-draft-restore:hover { background: var(--blue-deep); }

.rods-draft-discard {
  background: #fff;
  border-color: var(--line);
  color: var(--body);
}

.rods-draft-discard:hover { border-color: var(--blue); color: var(--blue-deep); }

.rods-draft button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 30rem) {
  .rods-draft { padding: 0.85rem 1rem; }
  .rods-draft-actions { width: 100%; }
  .rods-draft button { flex: 1 1 auto; }
}