/*
 * Zorvix Infotech — Solution Request modal + result screen.
 *
 * Reuses main.css's brand tokens (--z-deep/--z-surface/--z-elevated/
 * --z-navy/--z-ice/--z-steel/--z-steel-dim/--z-orange/--t-fast/--t-med/
 * --ease/--font-ui/--content-max) — orange reserved strictly for the
 * active/confirmed/submit signal, matching the rest of the site.
 *
 * The result screen below (`.sr-success*`) is the approved, previously
 * reviewed "cinematic atmosphere" success-screen visual language,
 * migrated here byte-for-byte (selectors renamed from the legacy
 * questionnaire tool's own success-screen classes to `.sr-success*`,
 * asset paths repointed to assets/images/solution-request/) so this
 * feature no longer depends on the retired legacy questionnaire tool's
 * stylesheet. The visual design itself is unchanged there — a
 * rename/relocation, not a redesign. NOT touched by Task O below.
 *
 * TASK O (owner visual review correction) — the modal system above the
 * "Result screen" marker is REWRITTEN here. The plain bordered dark box
 * the owner rejected is replaced with the same "cinematic atmosphere"
 * visual language already approved for the retired legacy questionnaire
 * tool's own main screen (that tool's own now-retired stylesheet's
 * root/surface/rail sections — inspected as a VISUAL reference only,
 * never re-linked at runtime) and already reused once for this feature's
 * own result screen below: a real photographic atmosphere layer
 * (assets/images/solution-request/request-atmosphere.*, migrated
 * byte-for-byte from that retired tool's own atmosphere artwork — see
 * TASK-O-FINAL-REPORT.md), a controlled readability overlay, a very
 * restrained decorative grid/signal layer, a translucent glass content
 * panel (not an opaque box), a lit gradient edge instead of a flat
 * uniform border, and the same cyan-forward ambient-glow / orange-for-
 * the-CTA-only convention. No form field, id, aria attribute, validation
 * rule, or submission behavior changes below — this is presentation
 * only. Every new element added to the markup (modal-partial.php) is
 * `aria-hidden="true"` and purely decorative/layout; nothing in the
 * existing focus trap, tab order, or accessible name/description chain
 * changes.
 *
 * Breakpoints match the rest of the site: 1279 / 1099 / 999 / 767 / 480,
 * plus one new modal-local split at 1000px (aside/scene two-column
 * composition vs. the mobile/tablet single-column near-full-screen
 * treatment) — chosen to sit just above the site's existing 999px tier
 * rather than introduce an unrelated breakpoint value.
 */

:root {
  --sr-radius-sm: 6px;
  --sr-radius-md: 10px;
  --sr-radius-lg: 18px;
  --sr-radius-xl: 26px;
  --sr-control-h: 48px;
  --sr-border: rgba(236, 240, 247, 0.12);
  --sr-border-strong: rgba(236, 240, 247, 0.22);
  --sr-glass-bg: rgba(9, 17, 32, 0.90);
  --sr-glass-border: rgba(146, 214, 255, 0.20);
  --sr-cyan: rgba(88, 196, 255, 0.85);
  --sr-cyan-wash: rgba(88, 196, 255, 0.10);
  --sr-orange-wash: rgba(226, 101, 11, 0.12);
  --sr-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.70), 0 1px 0 rgba(236, 240, 247, 0.05) inset;
  --sr-error: #FF8A80;

  /* Task O — modal cinematic-scene tokens. Local to the modal only (never
     redefining a shared main.css token); named --sr-scene-* so they never
     collide with the result screen's own --sr-success-* custom
     properties above, even though both ultimately paint the same
     migrated photograph at different crops. */
  --sr-scene-bg-image: image-set(
    url('/assets/images/solution-request/request-atmosphere.avif') type('image/avif'),
    url('/assets/images/solution-request/request-atmosphere.webp') type('image/webp'),
    url('/assets/images/solution-request/request-atmosphere.jpg') type('image/jpeg')
  );
  --sr-scene-glass: rgba(11, 21, 40, 0.66);
  --sr-scene-glass-strong: rgba(8, 16, 32, 0.82);
  --sr-scene-glow-cyan: rgba(88, 196, 255, 0.22);
  --sr-scene-glow-cyan-soft: rgba(88, 196, 255, 0.12);
  --sr-scene-edge: linear-gradient(150deg, rgba(158, 205, 255, 0.4), rgba(88, 196, 255, 0.5) 45%, transparent 82%);
  --sr-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------------
   Backdrop + dialog shell — cinematic scene (Task O visual correction)
--------------------------------------------------------------------- */

.sr-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  /* display:none by default (matching [hidden]'s own UA-stylesheet
     default) — display:flex is applied ONLY via :not([hidden]) below, so
     an author rule here can never accidentally out-specificity/override
     the [hidden] attribute the way a bare `display: flex` on this class
     would (a real bug caught in Playwright screenshot testing: the
     backdrop was intercepting pointer events site-wide even while
     [hidden] was set, since author CSS beats the UA stylesheet
     regardless of source order once display is set on the class itself). */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Task O: the page behind stays recognisable but appropriately
     subdued — a lighter blur than the previous pass (was 6px) so the
     backdrop never reads as "broken," while the modal scene itself
     stays the clear visual focus. */
  background: rgba(3, 8, 17, 0.76);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  overflow-y: auto;
  /* Safety-net scrollbar only (the backdrop itself rarely needs to
     scroll — .sr-modal has its own internal scroll region below) —
     still themed so an extreme case never shows a bright native bar. */
  scrollbar-width: thin;
  scrollbar-color: rgba(146, 214, 255, 0.35) transparent;
}

.sr-modal-backdrop::-webkit-scrollbar {
  width: 10px;
}

.sr-modal-backdrop::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal-backdrop::-webkit-scrollbar-thumb {
  background-color: rgba(146, 214, 255, 0.30);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.sr-modal-backdrop:not([hidden]) {
  display: flex;
}

.sr-modal-backdrop.is-open {
  opacity: 1;
}

/* The dialog shell. A real layered scene, not a flat bordered box:
   .sr-modal__scene (full-bleed atmosphere, z-index 0) sits behind
   everything; .sr-modal__aside (desktop-only brand/context column) and
   .sr-modal__scroll (the actual readable form content) both sit above
   it at z-index 1; the lit edge (::before) at z-index 2; the close
   control at z-index 3. Single column up to 999px; a wider, two-column
   cinematic composition from 1000px (see that tier below). */
.sr-modal {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: linear-gradient(165deg, #0A1730 0%, #071026 100%);
  border: none;
  border-radius: var(--sr-radius-xl);
  box-shadow: var(--sr-shadow), 0 0 140px -70px var(--sr-scene-glow-cyan);
  color: var(--z-ice);
  font-family: var(--font-ui);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
  max-height: min(760px, calc(100vh - 48px));
  display: flex;
  flex-direction: column;
}

/* Lit gradient edge instead of a flat, full-box border — "selective
   illumination, not full-box emphasis" (the same mask-composite
   technique already approved for the retired legacy questionnaire
   tool's own question surface, in that tool's own now-retired
   stylesheet — inspected as a visual reference only). A 1px
   architectural seam, never a glow. */
.sr-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  padding: 1px;
  background: var(--sr-scene-edge);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.sr-modal-backdrop.is-open .sr-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Cinematic atmosphere — the migrated finder-atmosphere photograph
   (assets/images/solution-request/request-atmosphere.*), a controlled
   readability overlay, and a restrained decorative grid, each a
   separate layer so none of them has to compromise the others. Full
   bleed behind the whole shell (both the aside and the content column). */
.sr-modal__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sr-modal__scene-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--sr-scene-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 70% 32%;
}

/* Controlled readability overlay — a diagonal darken, never a flat
   page-wide dark sheet, favoring the left/aside text zone exactly like
   the old Finder reference's own overlay direction. */
.sr-modal__scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(100deg, rgba(4, 10, 24, 0.88) 0%, rgba(4, 10, 24, 0.62) 34%, rgba(4, 10, 24, 0.34) 58%, rgba(4, 10, 24, 0.50) 100%);
}

/* Restrained decorative signal/grid layer — faint fixed lines only,
   masked so it fades out rather than tiling edge-to-edge; never a busy
   sci-fi pattern and never competing with real content. */
.sr-modal__scene-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(146, 214, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 214, 255, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 85% 65% at 18% 26%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 85% 65% at 18% 26%, #000 0%, transparent 70%);
}

.sr-modal__scene-glow {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
}

.sr-modal__scene-glow--a {
  width: 320px;
  height: 320px;
  top: -120px;
  left: -90px;
  background: radial-gradient(circle, var(--sr-scene-glow-cyan) 0%, transparent 70%);
}

.sr-modal__scene-glow--b {
  width: 240px;
  height: 240px;
  bottom: -100px;
  right: 8%;
  background: radial-gradient(circle, rgba(226, 101, 11, 0.14) 0%, transparent 72%);
}

@media (max-width: 999px) {
  .sr-modal__scene-atmosphere {
    background-position: 74% 24%;
  }

  .sr-modal__scene::before {
    background: linear-gradient(170deg, rgba(4, 10, 24, 0.90) 0%, rgba(4, 10, 24, 0.68) 30%, rgba(4, 10, 24, 0.40) 58%, rgba(4, 10, 24, 0.62) 100%);
  }
}

/* Task P (production UX finalization), Part P2/P3 — the brand/context/
   intro column, now visible at EVERY width, not desktop-only. Below
   1000px it is a compact block stacked ABOVE .sr-modal__scroll (the
   modal is a column flex container there); at 1000px+ it becomes the
   wide left visual panel, side by side with the form. It deliberately
   has no glass fill of its own so the atmosphere reads through strongly
   — the form column carries its own glass panel for readability
   instead. It carries REAL content (the dialog's own accessible name/
   description sources) so it is never itself aria-hidden — see
   modal-partial.php's own docblock for the accessibility reasoning. */
.sr-modal__aside {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
}

/* The full production brand lockup (the SAME asset header.php already
   uses — no duplicate file, no altered artwork), scaled down to a small
   identity mark here. A fixed aspect-ratio box (from the image's own
   real 1410x252 intrinsic size, set in modal-partial.php) means the
   layout never shifts while the image loads.
   TASK P.1 (distortion fix): .sr-modal__aside (above) is a column flex
   container that never declares its own `align-items`, so it defaults
   to the initial flex value `stretch` — which stretches every flex
   item's CROSS axis (width, in a column container) to fill the
   container's content width unless that item opts out. This logo had
   only `height` fixed and `width: auto`, and "auto" is exactly the
   value `align-items: stretch` overrides, so the browser stretched the
   image's box to the full aside width while height stayed pinned —
   visibly squashing/widening the lockup on both desktop and mobile
   (confirmed by measurement: rendered box ratio ~10.9:1 and ~15.5:1
   against the source's real 1410:252 ~5.6:1 ratio). header.php's own
   use of this same asset (main.css's `.brand-logo--full`, effectively
   identical height:auto/width:auto sizing) never hit this bug only
   because ITS flex parent (`.brand`) explicitly sets
   `align-items: center`, which already opts every child out of stretch.
   Fix: `align-self: flex-start` opts JUST this element out of the
   aside's stretch behavior (nothing else in .sr-modal__aside is
   touched, so its other children's existing layout is unaffected) —
   once stretch no longer overrides it, `width: auto` correctly computes
   from the image's own intrinsic ratio again. `object-fit: contain` and
   `max-width: 100%` are added as defense-in-depth per the same
   never-distort contract (object-fit: contain never crops/stretches
   image CONTENT even if some future box-sizing regression reappears;
   max-width: 100% guarantees the box itself can never exceed the
   panel's available width). Never object-fit: fill (that IS the
   distortion behavior), never independent width+height, never a
   scaleX()/scaleY() transform. */
.sr-modal__aside-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
  object-fit: contain;
  margin: 0 0 16px;
}

.sr-modal__aside-line {
  position: relative;
  display: none;
  width: 42px;
  height: 2px;
  margin: 0 0 16px;
  background: linear-gradient(90deg, var(--sr-cyan), transparent);
  border-radius: 2px;
}

.sr-modal__aside-line::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--sr-cyan);
  box-shadow: 0 0 10px 2px var(--sr-scene-glow-cyan);
}

/* Desktop-only tiny contextual identity label (see the per-context
   ::before rules below) — kept out of the mobile composition entirely,
   matching Part P3's "no excessive visual decoration" instruction; the
   heading/body-copy alone already carry the capability context there. */
.sr-modal__aside-context {
  display: none;
  margin: 0 0 auto;
  font: 700 13px/1.3 var(--sr-font-mono);
  letter-spacing: 0.02em;
  color: var(--z-ice);
}

/* One reusable visual system, contextual only in its label text — never
   seven separate layouts. Mirrors the exact capability ids
   assets/js/solution-request.js already resolves (see openModal()'s own
   resolvedCapability), just presented as a short display name. */
.sr-modal__aside-context::before {
  content: "Solution Request";
}

.sr-modal[data-context="websites"] .sr-modal__aside-context::before { content: "Websites"; }
.sr-modal[data-context="mobile-apps"] .sr-modal__aside-context::before { content: "Mobile Apps"; }
.sr-modal[data-context="custom-software"] .sr-modal__aside-context::before { content: "Custom Software"; }
.sr-modal[data-context="web-apps"] .sr-modal__aside-context::before { content: "Web Apps"; }
.sr-modal[data-context="crm"] .sr-modal__aside-context::before { content: "CRM"; }
.sr-modal[data-context="saas"] .sr-modal__aside-context::before { content: "SaaS"; }
.sr-modal[data-context="ai"] .sr-modal__aside-context::before { content: "AI"; }

/* The dynamic, capability-driven heading + supporting copy — MOVED here
   from the top of .sr-modal__scroll (Part P2) so the right/form column
   can begin directly with the form itself. Same #sr-modal-heading /
   #sr-modal-body-copy elements, same ids, same text, same runtime
   swapping logic in assets/js/solution-request.js — only their position
   in the composition changed. On mobile this simply sits compactly
   above the form (the pre-existing stacked order, just now grouped with
   the brand mark instead of the fields); on desktop it gets pushed
   toward the lower half of the left panel for strong hierarchy — see
   the 1000px+ tier below. */
.sr-modal__intro {
  position: relative;
}

@media (min-width: 1000px) {
  .sr-modal {
    max-width: 980px;
    flex-direction: row;
    align-items: stretch;
  }

  .sr-modal__aside {
    flex: 0 0 38%;
    padding: 40px 28px 40px 40px;
  }

  .sr-modal__aside-logo {
    height: 28px;
    margin: 0 0 auto;
  }

  .sr-modal__aside-line {
    display: block;
  }

  .sr-modal__aside-context {
    display: block;
  }

  /* Pushed toward the lower half of the panel — "strong hierarchy and
     readable contrast" against the atmosphere/overlay, which is
     darkest in exactly this lower-left zone (see .sr-modal__scene::before
     above). The logo stays pinned near the upper-left via its own
     sibling's margin-bottom:auto above. */
  .sr-modal__intro {
    margin-top: 32px;
  }

  /* The in-scroll eyebrow no longer exists in the markup at all (Part
     P2/P3 removed it — the aside's own logo + heading now cover every
     width), so there is nothing to hide here anymore. */
}

.sr-modal__scroll {
  position: relative;
  z-index: 1;
  /* flex:1 1 auto + min-height:0 is what actually lets this panel shrink
     to the shell's own max-height and scroll INTERNALLY (the height-
     stress requirement) instead of the whole shell growing past the
     viewport — a plain flex child with auto min-height cannot shrink
     below its content's size in a fixed-height flex column otherwise. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
  background: var(--sr-scene-glass);
  scrollbar-width: thin;
  scrollbar-color: rgba(146, 214, 255, 0.35) transparent;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sr-modal__scroll {
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
  }
}

/* Subtle, on-brand scroll indicator — never a bright/native scrollbar
   dominating the composition, per the brief. Firefox via
   scrollbar-width/scrollbar-color above; WebKit/Blink via the
   pseudo-elements below. Both degrade gracefully to the browser's own
   default in engines that support neither, which is still acceptable
   (never invisible, never blocking scroll). */
.sr-modal__scroll::-webkit-scrollbar {
  width: 8px;
}

.sr-modal__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sr-modal__scroll::-webkit-scrollbar-thumb {
  background-color: rgba(146, 214, 255, 0.32);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.sr-modal__scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(146, 214, 255, 0.50);
}

@media (min-width: 1000px) {
  .sr-modal__scroll {
    flex: 1 1 62%;
    background: var(--sr-scene-glass-strong);
    border-left: 1px solid rgba(146, 214, 255, 0.12);
  }
}

.sr-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--sr-border);
  background: rgba(8, 16, 32, 0.55);
  color: var(--z-ice);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.sr-modal__close:hover,
.sr-modal__close:focus-visible {
  background: rgba(236, 240, 247, 0.16);
  border-color: var(--sr-border-strong);
}

/* Task P: the heading/body-copy now live inside .sr-modal__aside at
   every width (see modal-partial.php's own docblock) — no separate
   in-scroll "eyebrow" element exists anymore; the aside's own logo (or,
   on desktop, its logo + accent line + context label) already carries
   that identity role. */
.sr-modal__heading {
  margin: 0 0 10px 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.18;
  font-weight: 700;
  color: var(--z-ice);
  text-shadow: 0 2px 26px rgba(88, 196, 255, 0.20);
}

/* Task O visual fix: this heading carries tabindex="-1" so
   assets/js/solution-request.js can move focus here on open (a standard,
   pre-existing accessibility pattern — it announces the dialog to screen
   readers and is NOT a change to that behavior). Left unstyled it shows
   the browser's default solid focus rectangle, which is exactly the
   "generic bordered box" look this task exists to remove. The heading is
   never Tab-reachable by a sighted keyboard user (only programmatically
   focused once, on open), so suppressing the visible outline here is the
   same convention used by the WAI-ARIA APG's own dialog examples — no
   accessibility behavior changes, only the stray visible rectangle. */
.sr-modal__heading:focus {
  outline: none;
}

.sr-modal__body-copy {
  margin: 0 0 24px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--z-steel);
  max-width: 52ch;
}

/* ---------------------------------------------------------------------
   Form
--------------------------------------------------------------------- */

.sr-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sr-field__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--z-ice);
  opacity: 0.92;
}

.sr-field__helper {
  margin: -2px 0 2px 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--z-steel);
}

.sr-field__label .sr-optional {
  font-weight: 400;
  color: var(--z-steel);
  text-transform: none;
  letter-spacing: 0;
}

/* Task O: a translucent "engineered glass" surface rather than a flat
   near-black fill, so the scene behind the panel still reads faintly
   through every control — with a real focus GLOW (a soft cyan halo, not
   only a border-color swap) so focus states feel like part of the same
   cinematic system rather than a plain form-library default. */
.sr-field__control {
  width: 100%;
  min-height: var(--sr-control-h);
  padding: 12px 14px;
  border-radius: var(--sr-radius-sm);
  border: 1px solid var(--sr-border);
  background: rgba(146, 214, 255, 0.045);
  color: var(--z-ice);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

textarea.sr-field__control {
  min-height: 128px;
  resize: vertical;
}

.sr-field__control::placeholder {
  color: var(--z-steel-dim);
}

.sr-field__control:hover {
  border-color: var(--sr-border-strong);
}

.sr-field__control:focus-visible {
  outline: none;
  border-color: var(--sr-cyan);
  background: rgba(88, 196, 255, 0.07);
  box-shadow: 0 0 0 4px var(--sr-scene-glow-cyan-soft);
}

.sr-field__control[aria-invalid="true"] {
  border-color: var(--sr-error);
}

.sr-field__control[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 138, 128, 0.16);
}

.sr-field__error {
  font-size: 12.5px;
  color: var(--sr-error);
  min-height: 1em;
}

.sr-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.sr-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--sr-radius-sm);
  border: 1px solid var(--sr-border);
  background: rgba(146, 214, 255, 0.035);
  font-size: 13px;
  line-height: 1.5;
  color: var(--z-steel);
}

.sr-consent input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--z-orange);
}

.sr-consent a {
  color: var(--sr-cyan);
}

.sr-form__submit-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

/* CTA: "visually important and unmistakably the completion action" —
   premium and confident via a real depth/glow treatment, restrained via
   keeping the exact same pill shape/copy/size family as before (not
   oversized, no new motion beyond the existing hover/active states). */
.sr-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--z-orange);
  background: linear-gradient(180deg, #F07B24 0%, var(--z-orange) 100%);
  color: var(--z-ice);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 18px 36px -18px rgba(226, 101, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.sr-submit-btn:hover,
.sr-submit-btn:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 22px 44px -18px rgba(226, 101, 11, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.sr-submit-btn:active {
  transform: scale(0.99);
}

.sr-submit-btn:disabled {
  cursor: progress;
  filter: grayscale(0.3) brightness(0.9);
}

.sr-form__error-banner {
  display: none;
  padding: 12px 14px;
  border-radius: var(--sr-radius-sm);
  border: 1px solid rgba(255, 138, 128, 0.35);
  background: rgba(255, 138, 128, 0.08);
  color: var(--sr-error);
  font-size: 13.5px;
  line-height: 1.5;
}

.sr-form__error-banner.is-visible {
  display: block;
}

.sr-form__hint {
  font-size: 12px;
  color: var(--z-steel-dim);
}

/* Task P, Part P2 — desktop-only vertical-space reduction so the submit
   CTA is reachable WITHOUT internal modal scrolling at every required
   desktop viewport (1024x768, 1280x720, 1280x800, 1366x768, 1440x900,
   1920x1080 — tightest case 1280x720, where .sr-modal's own max-height
   caps .sr-modal__scroll's available height at min(760px,
   720-48=672px)). Measured (not estimated) form content at 1280px was
   ~802px tall before this block, driven mostly by the scroll panel's
   own top/bottom padding, the inter-field gap, and — the single biggest
   contributor — six .sr-field__error paragraphs each permanently
   reserving a full line-height of blank space via min-height:1em even
   while genuinely empty (no validation error currently shown). This
   block is placed AFTER every rule it overrides (a plain CSS cascade
   fact: at equal specificity the later declaration wins even inside an
   earlier `@media` block — an earlier attempt at this same fix, placed
   before the base rules in source order, silently lost the cascade and
   was moved down here instead) so every property below reliably applies
   at >=1000px. Nothing here removes a field, changes a label/copy
   string, or shrinks a control below a comfortably usable size — the
   textarea keeps room for several lines, the submit button and every
   input keep their existing tap-target sizing, and the error mechanism
   itself (aria-describedby, error text, aria-invalid) is entirely
   unchanged: only the BLANK reserved space an empty error paragraph
   takes up on desktop is removed, so real error text still displays
   exactly as before (and mobile's own unaffected 1em reservation is
   untouched, since the brief does not ask P2 to change mobile). Below
   1000px every one of these properties keeps its original, already-
   approved mobile value. */
@media (min-width: 1000px) {
  .sr-modal__scroll {
    padding: 20px clamp(20px, 3vw, 32px);
  }

  .sr-form {
    gap: 10px;
  }

  .sr-field {
    gap: 4px;
  }

  textarea.sr-field__control {
    min-height: 92px;
  }

  .sr-field__error {
    min-height: 0;
  }
}

/* ---------------------------------------------------------------------
   Result page: "A Practical Starting Point" bullet list.
   Same color/opacity/spacing system as the .sr-success__snapshot ul/li
   rules below, under its own class name — this is a bare (non-card)
   list, so it isn't a duplicate of the snapshot card's own list style.
--------------------------------------------------------------------- */

.sr-success__starting-point-list {
  margin: 0;
  padding-left: 20px;
  color: var(--z-ice);
}

.sr-success__starting-point-list li {
  opacity: 0.82;
  line-height: 1.65;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.sr-success__starting-point-list li + li {
  margin-top: 6px;
}

/* ---------------------------------------------------------------------
   Screen-reader-only utility (mirrors main.css's own convention)
--------------------------------------------------------------------- */

.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */

/* Task O — mobile is a genuinely near-full-screen experience, not a
   squeezed desktop layout: the backdrop's own side/top padding drops to
   0 so the sheet reaches every edge, and the modal's max-height is
   measured against the DYNAMIC viewport (dvh) where supported, so a
   mobile keyboard opening (which shrinks the visual viewport without
   necessarily firing a resize the old 100vh math would catch) never
   pushes the CTA or close control out of reach — engines without dvh
   support simply keep the vh-based fallback declared first, which is
   still fully correct, just slightly less precise. Atmosphere/overlay/
   grid are preserved (see the ≤999px scene tier above); only the glow
   accents are dropped at the very narrowest widths below, per "no
   excessive visual decoration." */
@media (max-width: 767px) {
  .sr-field-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sr-modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }
  .sr-modal {
    max-width: 100%;
    max-height: calc(100vh - 24px);
    max-height: min(92dvh, 760px);
    border-radius: var(--sr-radius-lg) var(--sr-radius-lg) 0 0;
  }
}

@media (max-width: 480px) {
  .sr-modal__scroll {
    padding: 20px 18px 24px;
  }
  .sr-modal {
    max-height: calc(100vh - 12px);
    max-height: min(94dvh, 760px);
  }
  .sr-modal__scene-grid {
    opacity: 0.32;
  }
  .sr-modal__scene-glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-modal-backdrop,
  .sr-modal {
    transition-duration: 1ms;
  }
}

/* =====================================================================
   Result screen ("Request received" success page) — migrated from
   the retired legacy questionnaire tool's stylesheet (that tool's own
   Notifications + Success architecture, §8/§9.3/§30) so this feature no
   longer requires that file. Selectors
   renamed from that tool's own success-screen classes to .sr-success*; asset paths repointed to
   assets/images/solution-request/result-atmosphere.*; visual design is
   otherwise byte-for-byte unchanged.
===================================================================== */

/* ------------------------------------------------------------------ */
/* Success screen (Notifications + Success, architecture §8/§9.3/§30)   */
/*                                                                      */
/* VISUAL REDESIGN, CORRECTION PASS #2 (owner-directed, reference-image- */
/* led, external-review-corrected): this screen ONLY is deliberately     */
/* given a luminous, cinematic gradient/glow treatment, overriding this  */
/* file's own general "no gradient / no glassmorphism / no glow/neon"    */
/* rule stated in the header comment above. That general rule still      */
/* fully governs every other screen in this file (Define/Understand/     */
/* Shape/Review/Send) — none of those selectors are touched here, and no */
/* shared/global token is redefined. The teal/blue glow accents below    */
/* are new, LOCAL, success-screen-only custom properties declared on     */
/* .sr-success itself (--sr-success-*), never global :root tokens.       */
/*                                                                        */
/* BACKGROUND ASSET INTEGRATION (external review, pass #3): the bespoke  */
/* background-only asset requested in pass #2 has now been approved and  */
/* delivered, and is wired up through the same --sr-success-bg-image     */
/* hook this comment previously specified — no parallel styling system   */
/* was introduced. Actual file: assets/images/solution-request/            */
/* result-atmosphere.{avif,webp,jpg} (master source kept alongside as   */
/* result-atmosphere.png, never overwritten). See the final report for  */
/* exact dimensions/filesizes and the full integration write-up.         */
/*                                                                        */
/*   .sr-success {                                                       */
/*     --sr-success-bg-image: image-set(                                 */
/*       url("/assets/images/solution-request/result-atmosphere.avif") type("image/avif"), */
/*       url("/assets/images/solution-request/result-atmosphere.webp") type("image/webp"), */
/*       url("/assets/images/solution-request/result-atmosphere.jpg")     */
/*     );                                                                */
/*   }                                                                    */
/*                                                                        */
/* Placement note: the custom property is declared here on .sr-success   */
/* (so it stays discoverable at the same scope this comment has always   */
/* documented it at), but the image itself is painted by the descendant  */
/* .sr-success__atmosphere band below, not by .sr-success's own          */
/* background — this page's content can run to several thousand pixels   */
/* tall (long-content-stress, mobile), and a single `background-size:    */
/* cover` image stretched across the WHOLE component would have to blow  */
/* itself up to an extreme, unrecognizable crop to cover that height.    */
/* Confining the real photo to a top-anchored hero band (with a bottom   */
/* mask-fade into the existing navy gradient) is what actually satisfies */
/* "do not just use background-size: cover and assume the job is done."  */
/* .sr-success itself keeps only the plain navy gradient as its base —   */
/* the correct backdrop for everything below the hero band, and the      */
/* correct fallback if every image format in the image-set() ever fails. */
/*                                                                        */
/* Every animation below is purely decorative opacity/box-shadow and    */
/* explicitly disabled under prefers-reduced-motion (main.css's blanket */
/* --t-fast/--t-med clamp does not reach a keyframe `animation:`        */
/* declaration, so this block adds its own guard). Color is never the   */
/* only signal for anything meaningful — the reset-error and            */
/* copy-status text each carry their own wording, exactly as this file's */
/* existing §30 rule already requires elsewhere.                        */
/* ------------------------------------------------------------------ */

.sr-success {
  --sr-success-teal: #2FE0C0;
  --sr-success-blue: #3E7BD6;
  --sr-success-blue-bright: #6FB4FF;
  --sr-success-ice-glow: rgba(255, 255, 255, 0.16);
  --sr-success-max: 1600px;
  /* Pre-push correction (post-Task-O): this result page used to load
     the retired legacy questionnaire tool's own stylesheet purely for a
     handful of its design-token custom properties, but an earlier task
     removed that stylesheet link without replacing the tokens
     themselves, so every one of those references below was silently
     resolving to nothing. Solution Request must not depend on that
     tool's stylesheet or its own namespaced variables at all, so these
     are genuinely new, Solution-Request-owned tokens — not aliases of
     the old ones. Each value is copied verbatim from that tool's own
     now-retired stylesheet's :root (read-only reference, never linked
     here) so the already-approved result-page appearance this task must
     preserve renders identically to before. Three of the old tokens
     already have an identically-valued global --sr-* token above
     (--sr-font-mono, --sr-radius-sm, --sr-radius-md) and reuse those
     directly instead of duplicating a value here — see the replaced
     declarations below. */
  --sr-result-tracking-eyebrow: 0.14em;
  --sr-result-border: rgba(236, 240, 247, 0.10);
  --sr-result-border-strong: rgba(236, 240, 247, 0.20);
  --sr-result-radius-lg: 16px;
  --sr-result-shadow-card: 0 16px 32px -24px rgba(0, 0, 0, 0.55);
  --sr-result-orange-border: rgba(226, 101, 11, 0.50);
  --sr-success-bg-image: image-set(
    url('/assets/images/solution-request/result-atmosphere.avif') type('image/avif'),
    url('/assets/images/solution-request/result-atmosphere.webp') type('image/webp'),
    url('/assets/images/solution-request/result-atmosphere.jpg') type('image/jpeg')
  );
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--z-deep) 0%, #0C2450 42%, #0A1F42 70%, var(--z-navy) 100%);
}

/* The real cinematic photo, confined to a top hero band (see placement
   note above). Height clamp matches what the previous CSS-only
   illustration used for the same band, so overall hero proportions are
   unchanged — only the artwork inside the band is now real. A
   mask-image fade at the bottom blends the photo into the plain navy
   gradient below rather than ending in a hard seam; the same mask
   applies to this element's ::before/::after overlay children too,
   since they paint within the same box. */
.sr-success__atmosphere {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(460px, 62vw, 760px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background-image: var(--sr-success-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 68% 22%;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
}

/* Selective readability overlay, not a blanket dark sheet — the owner
   explicitly wants the page brighter and the photo to stay visible.
   A soft diagonal darkening covers only the upper-left quadrant, where
   the eyebrow/headline/body copy are laid directly over the image; the
   photo's own right/lower two-thirds (where the artwork's own dark sky
   and dense mountain silhouette already sit) are left essentially
   untouched so the real artwork reads clearly. Declared BEFORE the
   responsive block below on purpose: its mobile override has identical
   specificity, so source order (not media-query nesting) decides which
   wins, and the narrower, more targeted override must come second. */
.sr-success__atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(4, 11, 28, 0.62) 0%, rgba(4, 11, 28, 0.4) 26%, rgba(4, 11, 28, 0.12) 46%, transparent 62%);
}

/* A handful of extra star specks, concentrated in the photo's own plain
   sky area (upper-left) as a small complementary detail rather than
   competing with the photo's own starfield (upper-right) — kept subtle
   and low-opacity on purpose. */
.sr-success__atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1.4px 1.4px at 10% 14%, rgba(236, 240, 247, 0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 22% 28%, rgba(236, 240, 247, 0.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 6% 34%, rgba(236, 240, 247, 0.35), transparent 60%),
    radial-gradient(1.4px 1.4px at 30% 10%, rgba(236, 240, 247, 0.4), transparent 60%);
}

/* Responsive art direction: the photo's bright landmarks (the glowing
   planet-limb arc, the mountain ridge, the lit lake) sit roughly in its
   right two-thirds, with plain dark sky across its own left third — a
   fortunate match for this layout's own left-headline/right-card
   asymmetry at wide widths. As the hero collapses to one column
   (<1100px) and the band's own aspect ratio gets taller relative to its
   width on narrow phones, the position is nudged so the arc/horizon
   stays a deliberate, visible feature instead of drifting off-canvas or
   shrinking to a sliver — never a re-crop of "the whole desktop scene
   squeezed smaller," a genuinely different, deliberate crop per range,
   per this pass's explicit instruction. */
@media (max-width: 1365px) {
  .sr-success__atmosphere {
    background-position: 63% 24%;
  }
}

@media (max-width: 999px) {
  .sr-success__atmosphere {
    height: clamp(360px, 68vw, 560px);
    background-position: 62% 30%;
  }
}

/* Visual QA at 600px specifically caught a real contrast gap this tier
   alone didn't cover: .sr-success__title's own font-size clamp
   (clamp(32px, 4.6vw, 56px)) resolves SMALLER at 600px than it does at
   767-999px (4.6vw clamps to its 32px floor here, vs. an unclamped
   ~38-46px just above), so "Project received successfully!" fits on one
   long line here instead of wrapping — reaching much further across the
   band, closer to the image's own bright arc, than the shorter wrapped
   line above this range. Rather than fight that pre-existing type-scale
   behavior (out of scope for an asset-integration pass), a moderately
   stronger overlay in exactly this 600-999px band keeps the longer line
   readable without darkening the image any more than necessary above or
   below it. */
@media (max-width: 999px) and (min-width: 600px) {
  .sr-success__atmosphere::before {
    background: linear-gradient(130deg, rgba(4, 11, 28, 0.7) 0%, rgba(4, 11, 28, 0.48) 32%, rgba(4, 11, 28, 0.18) 54%, transparent 70%);
  }
}

@media (max-width: 599px) {
  .sr-success__atmosphere {
    height: clamp(260px, 82vw, 380px);
    /* Pushed further right/down than the tablet crop: at this band's
       proportionally taller aspect ratio, the wide-viewport position put
       the bright orange arc directly behind the (also orange) headline
       accent word — a genuine contrast problem, not a stylistic
       preference. Moving the focal point further from the top-left text
       zone keeps the headline over the photo's own calmer sky. */
    background-position: 82% 58%;
    mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 96%);
  }

  /* Mobile-only reinforcement of the readability overlay above: the band
     is proportionally taller relative to the headline's own footprint
     here than at wider widths, so the same "soft diagonal, not a
     blanket sheet" approach needs a bit more reach/strength to keep the
     confirmation paragraph (which runs further down than the headline
     alone) clear of the mountain silhouette texture. This rule comes
     after the base .sr-success__atmosphere::before rule above in source
     order, so it correctly wins at this width despite equal specificity. */
  .sr-success__atmosphere::before {
    background: linear-gradient(160deg, rgba(4, 11, 28, 0.78) 0%, rgba(4, 11, 28, 0.6) 34%, rgba(4, 11, 28, 0.28) 58%, transparent 78%);
  }
}

.sr-success__inner {
  position: relative;
  z-index: 1;
  max-width: var(--sr-success-max);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 72px) clamp(56px, 7vw, 104px);
  color: var(--z-ice);
  font-family: var(--font-ui);
}

/* ---------------------------------------------------------------- */
/* Hero: text + hero cards. One column by default; an intentionally  */
/* asymmetric two-column composition opens up from ~1100px so the    */
/* hero uses the available width instead of floating a narrow column */
/* inside a huge dark canvas (external review, pass #2).             */
/* ---------------------------------------------------------------- */
.sr-success__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin-bottom: 44px;
}

@media (min-width: 1100px) {
  .sr-success__hero {
    grid-template-columns: minmax(360px, 1fr) minmax(440px, 620px);
    align-items: center;
    gap: clamp(32px, 4vw, 72px);
  }
}

@media (min-width: 1600px) {
  .sr-success__hero {
    grid-template-columns: minmax(420px, 0.85fr) minmax(480px, 680px);
  }
}

.sr-success__hero-text {
  max-width: 60ch;
}

.sr-success__eyebrow {
  margin: 0 0 14px;
  font: 700 11px/1 var(--font-ui);
  letter-spacing: var(--sr-result-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sr-success-blue-bright);
}

.sr-success__title {
  margin: 0 0 22px;
  font: 700 clamp(32px, 4.6vw, 56px)/1.1 var(--font-ui);
  color: var(--z-ice);
  text-shadow: 0 2px 30px rgba(111, 180, 255, 0.25);
}

.sr-success__title-accent {
  color: var(--z-orange);
}

/* #sr-success-heading is a non-interactive H1 (tabindex="-1") that only
   ever receives PROGRAMMATIC focus, once, from success.js's own
   accessibility-required initial-focus behavior (§30) — it is never a
   real interactive control a visitor tabs to or activates. External
   review (pass #2): that programmatic focus must keep happening (do not
   remove focusSuccessHeadingOnce() or this rule's selector), but it must
   not paint a giant interactive-looking rectangle around an entire
   headline. Every REAL interactive control on this screen (the copy
   button, the CTAs) keeps a full, unmodified :focus-visible outline —
   see .sr-success__copy-btn/.sr-success__cta below, both unchanged. */
.sr-success__title:focus-visible {
  outline: none;
}

.sr-success__confirmation,
.sr-success__next,
.sr-success__contact-method {
  margin: 0 0 12px;
  color: var(--z-ice);
  opacity: 0.82;
  line-height: 1.65;
  font-size: 15.5px;
}

/* ---------------------------------------------------------------- */
/* Hero cards — the reference card is the strongest visual object on */
/* the page (external review, pass #2): more weight/space than the   */
/* email card, not an equal twin.                                    */
/* ---------------------------------------------------------------- */
.sr-success__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.sr-success__ref-card,
.sr-success__email-card {
  position: relative;
  border: 1px solid var(--sr-result-border-strong);
  border-radius: var(--sr-result-radius-lg);
  background: linear-gradient(165deg, rgba(46, 78, 138, 0.55), rgba(13, 32, 66, 0.7));
  box-shadow: var(--sr-result-shadow-card), 0 30px 60px -30px rgba(6, 16, 38, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
}

.sr-success__ref-card {
  flex: 1.35 1 340px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 36px);
  text-align: center;
  background: linear-gradient(165deg, rgba(52, 88, 152, 0.6), rgba(11, 28, 60, 0.75));
}

.sr-success__email-card {
  flex: 1 1 260px;
  padding: 24px 26px;
}

.sr-success__ref-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: var(--sr-success-teal);
  background: radial-gradient(circle at 40% 32%, rgba(47, 224, 192, 0.32), rgba(47, 224, 192, 0.1));
  border: 1px solid rgba(47, 224, 192, 0.55);
  box-shadow: 0 0 0 8px rgba(47, 224, 192, 0.10), 0 0 40px rgba(47, 224, 192, 0.45);
  animation: sr-success-pulse 2.6s ease-in-out infinite;
}

.sr-success__ref-check-halo {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 224, 192, 0.22), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

@keyframes sr-success-pulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(47, 224, 192, 0.10), 0 0 40px rgba(47, 224, 192, 0.45); }
  50% { box-shadow: 0 0 0 14px rgba(47, 224, 192, 0.06), 0 0 56px rgba(47, 224, 192, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .sr-success__ref-check {
    animation: none;
  }
}

.sr-success__ref-label {
  margin: 0 0 12px;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sr-success-blue-bright);
}

.sr-success__ref-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sr-success__ref-value {
  font-family: var(--sr-font-mono);
  font-size: clamp(20px, 2.8vw, 28px);
  letter-spacing: 0.03em;
  font-weight: 600;
  color: var(--z-ice);
  word-break: break-word;
}

.sr-success__copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: var(--sr-radius-sm);
  border: 1px solid var(--sr-result-border-strong);
  background: rgba(255, 255, 255, 0.06);
  color: var(--z-ice);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.sr-success__copy-btn:hover,
.sr-success__copy-btn:focus-visible {
  color: var(--z-orange);
  border-color: var(--sr-result-orange-border);
  background: rgba(226, 101, 11, 0.12);
}

.sr-success__copy-btn:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

.sr-success__ref-gotit {
  margin: 20px 0 4px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sr-success-blue-bright);
}

.sr-success__ref-gotit span {
  position: relative;
  padding: 0 14px;
}

.sr-success__ref-gotit span::before,
.sr-success__ref-gotit span::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  border-top: 1px solid var(--sr-result-border-strong);
}

.sr-success__ref-gotit span::before { right: 100%; }
.sr-success__ref-gotit span::after { left: 100%; }

.sr-success__copy-status {
  min-height: 16px;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--sr-success-teal);
}

.sr-success__email-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.sr-success__email-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--sr-success-blue-bright);
  background: radial-gradient(circle at 35% 30%, rgba(111, 180, 255, 0.3), rgba(62, 123, 214, 0.12));
  border: 1px solid rgba(111, 180, 255, 0.45);
  box-shadow: 0 0 20px rgba(62, 123, 214, 0.3);
}

.sr-success__email-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--z-ice);
}

.sr-success__email-copy {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--z-ice);
  opacity: 0.78;
}

/* ---------------------------------------------------------------- */
/* Completion ribbon — a light, luminous surface breaking up the dark */
/* hero (external review, pass #2: "too dark", "plain vertical        */
/* utility list" rejected). Connected nodes, first three complete,    */
/* final Submitted stage strongly highlighted. A 2-column grid from    */
/* 767px down (never a bare stacked list, never horizontal overflow). */
/* ---------------------------------------------------------------- */
.sr-success__progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0 0 44px;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 36px);
  list-style: none;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(236, 240, 247, 0.97), rgba(210, 222, 242, 0.92));
  box-shadow: 0 20px 44px -20px rgba(4, 12, 30, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.sr-success__progress-item {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding-right: clamp(18px, 3vw, 36px);
  margin-right: clamp(18px, 3vw, 36px);
}

.sr-success__progress-item:not(.is-final)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: clamp(18px, 3vw, 36px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sr-success-blue), var(--sr-success-teal));
  opacity: 0.7;
  transform: translate(100%, -50%);
}

.sr-success__progress-item.is-final:not(:last-child)::after {
  background: linear-gradient(90deg, var(--sr-success-blue), var(--z-orange));
}

.sr-success__progress-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(155deg, var(--sr-success-blue-bright), var(--sr-success-blue));
  box-shadow: 0 6px 16px -4px rgba(62, 123, 214, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  flex: 0 0 auto;
}

.sr-success__progress-item.is-final .sr-success__progress-icon {
  background: linear-gradient(155deg, #FF9A4D, var(--z-orange));
  box-shadow: 0 0 0 5px rgba(226, 101, 11, 0.18), 0 8px 20px -4px rgba(226, 101, 11, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--z-deep);
}

.sr-success__progress-label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--z-deep);
}

.sr-success__progress-state {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sr-success-blue);
}

.sr-success__progress-item.is-final .sr-success__progress-state {
  color: var(--z-orange);
}

.sr-success__summary {
  margin: 0 0 40px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--sr-result-radius-lg);
  background: linear-gradient(165deg, rgba(30, 58, 108, 0.4), rgba(10, 24, 52, 0.35));
  border: 1px solid var(--sr-result-border);
}

.sr-success__summary-heading {
  margin: 0 0 8px;
  font: 700 24px/1.3 var(--font-ui);
  color: var(--z-ice);
  text-align: center;
}

.sr-success__summary-sub {
  margin: 0 auto 28px;
  max-width: 56ch;
  text-align: center;
  color: var(--z-ice);
  opacity: 0.75;
  font-size: 14px;
}

.sr-success__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}

.sr-success__snapshot {
  position: relative;
  padding: 22px 24px;
  border-radius: var(--sr-radius-md);
  background: linear-gradient(165deg, rgba(58, 96, 162, 0.35), rgba(12, 28, 58, 0.55));
  border: 1px solid var(--sr-result-border-strong);
  box-shadow: 0 18px 34px -22px rgba(4, 12, 30, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.sr-success__snapshot-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(236, 240, 247, 0.14);
}

.sr-success__snapshot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--z-orange);
  background: radial-gradient(circle at 35% 30%, rgba(226, 101, 11, 0.28), rgba(226, 101, 11, 0.08));
  border: 1px solid var(--sr-result-orange-border);
  box-shadow: 0 0 16px rgba(226, 101, 11, 0.28);
  flex: 0 0 auto;
}

.sr-success__snapshot h3 {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--z-ice);
}

.sr-success__snapshot p,
.sr-success__snapshot li {
  color: var(--z-ice);
  opacity: 0.82;
  line-height: 1.65;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.sr-success__snapshot ul {
  margin: 0;
  padding-left: 20px;
}

.sr-success__snapshot li + li {
  margin-top: 6px;
}

/* The one restrained live region on this screen (§30) — a color change is
   never the only signal a reset failed, so the text content itself
   (toggled by success.js) is what actually communicates the failure;
   this rule only positions/spaces it. Hidden by default via the native
   [hidden] attribute, exactly like .pf-validation[hidden] above. */
.sr-success__error {
  margin: 0 0 20px;
  color: var(--z-orange);
  font-size: 14px;
  line-height: 1.5;
}

.sr-success__error[hidden] {
  display: none;
}

.sr-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sr-success__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--sr-radius-sm);
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--font-ui);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}

.sr-success__cta--primary {
  border: 1px solid var(--z-orange);
  background: linear-gradient(155deg, #FF9A4D, var(--z-orange));
  color: var(--z-deep);
  box-shadow: 0 10px 26px -8px rgba(226, 101, 11, 0.6);
  padding-left: 32px;
  padding-right: 32px;
}

.sr-success__cta--secondary {
  border: 1px solid var(--sr-result-border-strong);
  background: rgba(255, 255, 255, 0.05);
  color: var(--z-ice);
}

.sr-success__cta:hover {
  opacity: 0.9;
}

.sr-success__cta:focus-visible {
  outline: 2px solid var(--z-orange);
  outline-offset: 2px;
}

/* Busy/disabled state (success.js's setBusyState()) — conveyed through
   both the native :disabled/aria-busy attributes AND a visible opacity
   change together, never color alone (§30's own "color never the sole
   signal" rule); main.css's :root already clamps --t-fast/--t-med to 1ms
   under prefers-reduced-motion, so this opacity transition needs no
   separate reduced-motion override. */
.sr-success__cta--primary:disabled,
.sr-success__cta--primary[aria-busy='true'] {
  opacity: 0.4;
  cursor: wait;
}

/* ---------------------------------------------------------------- */
/* Responsive corrections (external review, pass #2): the ribbon      */
/* becomes a compact 2-column grid rather than a plain vertical list, */
/* and a 2x2 grid is explicitly acceptable even at 320px. Never a     */
/* single-file stacked utility list, never horizontal overflow.       */
/*                                                                    */
/* Breakpoint note (pass #2 visual QA, 834px spot-check): the         */
/* horizontal 4-across flex ribbon only has room to stay on one row   */
/* down to roughly 900px — below that it used to flex-wrap, stranding */
/* "Submitted" alone on a second row with a dangling connector and no */
/* leading one, an actually-broken-looking chain, not the "four       */
/* horizontal columns become unreadable -> use the grid" case the     */
/* 320px note anticipated. So the 2-column grid takes over at 900px,  */
/* a full step earlier than the 767px point everything else (button   */
/* stacking) still uses — 999px+ still gets the connected single-row  */
/* ribbon, exactly as before.                                         */
/* ---------------------------------------------------------------- */
@media (max-width: 900px) {
  .sr-success__progress {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--sr-result-radius-lg);
    gap: 14px 18px;
  }

  .sr-success__progress-item {
    /* A cramped icon-beside-label row leaves too little width for the
       label at 2-column widths (~130-150px per cell) — ordinary words
       like "Requirements" or "Completed" don't fit beside a 36px icon
       and end up force-broken mid-word, which reads as broken rather
       than "carefully designed" (external review's own bar for this
       2x2 state). Stacking icon-above-label instead gives the label the
       item's full width, so it wraps normally, on whole words, exactly
       like a small compact tile. */
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-right: 0;
    padding-right: 0;
    padding: 14px 12px;
    border-radius: var(--sr-radius-md);
    background: rgba(255, 255, 255, 0.55);
    /* A flex item's default min-width:auto uses its content's intrinsic
       minimum, which can exceed the 2-column grid track and overflow the
       ribbon horizontally (the exact bug external review's 320px pass
       caught: "Requirements Completed" clipped past the right edge).
       min-width: 0 lets it shrink to the track and wrap instead. */
    min-width: 0;
  }

  .sr-success__progress-label,
  .sr-success__progress-state {
    /* Safety net only, not the primary fix — with the column layout
       above, whole-word wrapping is normally sufficient. break-word only
       forces a mid-word break as a last resort (unlike `anywhere`, which
       permits it more eagerly), so a genuinely long label still wraps on
       word boundaries first. */
    overflow-wrap: break-word;
    width: 100%;
  }

  .sr-success__progress-item::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .sr-success__actions {
    flex-direction: column;
  }

  .sr-success__cta {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .sr-success__ref-value-row {
    flex-direction: column;
  }

  .sr-success__progress-label {
    font-size: 12.5px;
  }
}