/* pdes.css - visual rules for the materialized PDES DOM.
 * See blocks/pdes/pdes.md § `pdes.css` for the token catalog,
 * layer-swap rationale, grid-column policy, height ladder, and every
 * WEBEXP-109752 design decision. */

.pdes {
  /* Section chrome (bg lives inline; PDES is the only consumer) */
  --pdes-bg: radial-gradient(
    ellipse 1700px 1850px at 50% 920px,
    #e8e1cf 0%,
    #f8f6f1 70%
  );
  --pdes-section-pad-block: var(--ll-space-9);     /* 40 (SM) */

  /* Step layout gaps */
  --pdes-step-gap: var(--ll-space-8);              /* 32  header ↔ content */
  --pdes-step-header-gap: var(--ll-space-4);       /* 12  title ↔ subtitle */
  --pdes-input-group-gap: var(--ll-space-5);       /* 16  pill-row ↔ meta */
  --pdes-pill-row-gap: var(--ll-space-3);          /* 8   email ↔ Scan */
  --pdes-meta-gap: var(--ll-space-4);              /* 12  disclaimer ↔ opt-in */
  --pdes-form-body-gap: var(--ll-space-8);         /* 32 SM / 40 MD+ */

  /* Step 2 - loading pill */
  --pdes-loading-pill-block-size: 74px;
  --pdes-loading-pill-radius: var(--ds-radius-l);  /* 8 (not fully rounded) */

  /* Step 3 - form grid + submit */
  --pdes-form-cols: 1fr;
  --pdes-form-gap-block: var(--ll-space-8);        /* 32 SM row-gap */
  --pdes-form-gap-inline: 0;
  --pdes-submit-inline-size: 100%;                 /* SM: full-bleed */
  --pdes-submit-min-inline-size: 0;                /* MD+: 192 (Figma) */

  /* Primary-CTA paint (Step 1 Scan + Step 3 Submit) - flat brand-dark (lifelock-blue)
   * per WEBEXP-109752 design-lead confirmation. Step 4 Result CTA uses
   * `--pdes-result-cta-bg` (gradient) instead - see pdes.md
   * § Result-CTA gradient (Step 4 only). */
  --pdes-cta-bg: var(--ll-color-bg-inverse);       /* #00445a */
  --pdes-cta-bg-hover: var(--ds-color-neutral-800); /* #161616 */

  /* Step 4 Result CTA fill - brand gradient. Matches comparison-chart
   * `--cc-teal-gradient` (178.9deg, brand-mid → brand-dark). See .md. */
  --pdes-result-cta-bg: linear-gradient(
    178.9deg,
    #017a96 14.826%,
    #00445a 173.29%
  );

  /* Opt-in checkbox checked fill - see pdes.md § Opt-in checkbox */
  --pdes-optin-check-bg: #0f71f0;

  /* Step 4 - result frame + card + banner + rows + actions.
   * Two layers (frame + card) trade places by band: frame paints at SM/MD
   * (card transparent), card paints at LG/XL (frame transparent). See
   * pdes.md § CVar catalog for the SM / MD / LG-XL redeclaration matrix. */
  --pdes-result-frame-bg: var(--ll-color-bg-default);
  --pdes-result-frame-shadow: var(--ll-shadow-resting);
  --pdes-result-frame-border: var(--ll-border-width-xs) solid var(--ll-color-border-default);
  --pdes-result-frame-radius: var(--ds-radius-l);
  --pdes-result-frame-pad-block-start: var(--ll-space-6);   /* 20 (SM) */
  --pdes-result-frame-pad-block-end: var(--ll-space-7);     /* 24 (SM) */
  --pdes-result-frame-pad-inline: var(--ll-space-6);        /* 20 (SM) */
  --pdes-result-card-bg: transparent;
  --pdes-result-card-shadow: none;
  --pdes-result-card-border: none;
  --pdes-result-card-radius: 0;
  --pdes-result-card-pad-block-start: 0;
  --pdes-result-card-pad-block-end: 0;
  --pdes-result-card-pad-inline: 0;
  --pdes-result-banner-cols: 1fr;
  --pdes-result-banner-gap: var(--ll-space-6);              /* 20 (SM stack) */
  --pdes-result-banner-radius: var(--ll-radius-s);          /* 4 */
  --pdes-result-banner-pad-block-start: var(--ll-space-6);
  --pdes-result-banner-pad-block-end: var(--ll-space-6);
  --pdes-result-banner-pad-inline: var(--ll-space-6);
  --pdes-result-banner-gap-content: var(--ll-space-4);      /* 12 (SM) */
  --pdes-result-icon-size: 24px;
  --pdes-attribute-bg: color-mix(in srgb, var(--ll-color-text-primary) 4%, transparent);
  --pdes-attribute-pad-block: var(--ll-space-3);            /* 8 (SM) */
  --pdes-attribute-pad-inline: var(--ll-space-4);           /* 12 (SM) */
  --pdes-attribute-radius: var(--ll-radius-s);
  --pdes-result-rows-gap: var(--ll-space-4);                /* 12 (SM) */
  --pdes-result-actions-direction: column;
  --pdes-result-actions-gap: var(--ll-space-6);             /* 20 (SM) */
  --pdes-result-cta-inline-size: 100%;
  --pdes-result-cta-padding-inline: 20px;
  --pdes-result-cta-margin-top: var(--ll-space-8);          /* 32 (SM) */

  /* Variant axis (filled by .pdes--result-exposed | --result-safe) */
  --pdes-result-banner-bg: transparent;
  --pdes-result-icon-color: var(--ll-color-text-primary);
  --pdes-result-accent-color: var(--ll-color-text-primary);

  /* Focus + motion */
  --pdes-focus-ring-color: var(--ll-color-focus-ring);
  --pdes-focus-ring-width: var(--ll-border-width-strong);
  --pdes-focus-ring-offset: var(--ll-space-2);

  background: var(--pdes-bg);
  padding-block: var(--pdes-section-pad-block);
}

/* Rail width + centring owned by `.is-fluid-width` on `.pdes__root`
 * (added in pdes.js). Kept as a stable hook for future rail tweaks. */
.pdes__root { /* intentionally empty */ }

/* Step visibility - see pdes.md § Step visibility for the absolute-
 * positioning rationale. */
.pdes__viewport {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

.pdes__step {
  grid-column: 1;
  grid-row: 1;
}

.pdes__step[data-state='pending'],
.pdes__step[hidden] {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Step 1 / 2 / 3 - shared step layout (header ↔ content row-gap) */
.pdes__step--scan,
.pdes__step--loading,
.pdes__step--details {
  row-gap: var(--pdes-step-gap);
  text-align: center;
}

/* Step 4 frame - paints card chrome at SM, collapses to transparent at MD+ */
.pdes__step--result {
  row-gap: var(--pdes-result-cta-margin-top);
  text-align: center;
  background-color: var(--pdes-result-frame-bg);
  border: var(--pdes-result-frame-border);
  border-radius: var(--pdes-result-frame-radius);
  box-shadow: var(--pdes-result-frame-shadow);
  padding-block:
    var(--pdes-result-frame-pad-block-start)
    var(--pdes-result-frame-pad-block-end);
  padding-inline: var(--pdes-result-frame-pad-inline);
}

.pdes__step-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pdes-step-header-gap);
  inline-size: 100%;
}

.pdes__scan-title {
  margin: 0;
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ll-color-text-secondary);
}

.pdes__scan-subtitle {
  margin: 0;
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
  color: var(--ll-color-text-secondary);
}

.pdes__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pdes-input-group-gap);
  inline-size: 100%;
}

/* Step 1 pill-row + inline scan error stacked so the error left-aligns
 * with the input start (not centered under the full form width). */
.pdes__pill-group {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-3); /* 8 between pill-row and inline error */
  inline-size: 100%;
}

/* Step 1 email pill + Scan button share this row */
.pdes__pill-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--pdes-pill-row-gap);
  inline-size: 100%;
}

/* Height ladder (56 MD+ / 44 SM) - see pdes.md § Height ladder */
.pdes__pill-row .l-form-input {
  --l-form-input-block-size: 56px;

  flex: 1 1 auto;
  max-inline-size: none;
  align-self: stretch;
}

.pdes__pill-row .button {
  flex: 0 0 auto;
}

/* Focus ring override - see pdes.md § Focus indicator (WEBEXP-109841).
 * Replaces the l-form-input primitive's 2px outline + 8px offset ring
 * with a near-black border + soft 3px brand-dark @ 12% shadow ring,
 * matching the legacy Norton PDES focus treatment (see the DevTools
 * screenshot on WEBEXP-109841). Scoped to `.pdes` so the primitive
 * keeps its wider ring for other consumers (footer). */
.pdes .l-form-input .l-form-input__field:focus-visible {
  outline: none;
  outline-offset: 0;
  border-color: var(--ll-color-border-strong);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ll-color-text-primary) 12%, transparent);
}

/* Invalid + focused - see pdes.md § Focus indicator (WEBEXP-109954).
 * The block-level `:focus-visible` override above forces a near-black
 * border via direct `border-color`, which beats the primitive's cvar-
 * driven `[aria-invalid="true"]` rule and hides the invalid signal
 * exactly when the user is fixing it. Restore the invalid border +
 * a warning-tinted focus ring while both states coincide. Specificity
 * is (0,5,0), one class above the plain focus override. */
.pdes .l-form-input .l-form-input__field[aria-invalid="true"]:focus-visible {
  border-color: var(--l-form-input-border-color-invalid);
  box-shadow: 0 0 0 3px rgb(224 113 0 / 12%);
}

/* Step 3 (details form) input color pairing - see pdes.md §
 * Details-form input colors. Figma spec for the compact --size-md
 * details form uses a lighter grey placeholder (`--ll-color-text-placeholder`
 * = `--ds-color-neutral-250` = `#b6b6b5`) and drops the value color from
 * `--ll-color-text-primary` (brand-LifeLock blue) to `--ll-color-text-secondary`
 * (`#161616`) so typed input reads as body copy, not as a brand accent.
 * Step 1 pill retains the primitive defaults (`--ll-color-text-primary`
 * value / `--ll-color-text-muted` placeholder) via unchanged cvars. */
.pdes__form--details .l-form-input {
  --l-form-input-text: var(--ll-color-text-secondary);
  --l-form-input-placeholder: var(--ll-color-text-placeholder);
}

/* Placeholder line-height + letter-spacing are set explicitly because
 * browsers do not inherit these into the ::placeholder pseudo; without
 * them the placeholder renders at `line-height: normal` and
 * `letter-spacing: normal`, breaking body-sm parity with the typed value. */
.pdes__form--details .l-form-input .l-form-input__field::placeholder {
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
}

/* Primary CTA (Step 1, 3, 4) - see pdes.md § Primary-CTA paint override.
 * Tag+class selector to match the specificity of the global .button
 * rule in styles.css and win the cascade. border-color matches fill so
 * the size-reservation 2px border reads as a single-color pill. */
.pdes a.button.primary:any-link,
.pdes button.button.primary {
  block-size: 56px;
  padding-block: 0;
  background: var(--pdes-cta-bg);
  border-color: var(--pdes-cta-bg);
}

.pdes a.button.primary:any-link:hover,
.pdes button.button.primary:hover,
.pdes a.button.primary:any-link:focus-visible,
.pdes button.button.primary:focus-visible {
  background: var(--pdes-cta-bg-hover);
  border-color: var(--pdes-cta-bg-hover);
}

.pdes__scan-meta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--pdes-meta-gap);
  inline-size: 100%;
}

/* Disclaimer + opt-in read leading-aligned per Figma Step 1 SM
 * (`22902:11305`) / MD (`22902:9778`); the Privacy Statement link is
 * underlined so the affordance is visible against secondary text
 * color. See pdes.md § Disclaimer + opt-in alignment (WEBEXP-109967). */
.pdes__disclaimer {
  margin: 0;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
  color: var(--ll-color-text-secondary);
  text-align: start;
}

.pdes__disclaimer > :first-child { margin-top: 0; }
.pdes__disclaimer > :last-child  { margin-bottom: 0; }

.pdes__disclaimer a {
  text-underline-offset: 2px;
}

.pdes__optin {
  display: flex;
  align-items: start;
  justify-content: flex-start;
  gap: var(--ll-space-3);
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
  color: var(--ll-color-text-secondary);
  text-align: start;
  cursor: pointer;
}

/* Opt-in checkbox (18x18, custom SVG tick) - see pdes.md § Opt-in checkbox */
.pdes__optin-checkbox {
  appearance: none;
  flex: 0 0 auto;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: var(--ll-border-width-xs) solid var(--ll-color-border-tertiary);
  border-radius: var(--ll-radius-s);
  background-color: var(--ll-color-bg-default);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  cursor: pointer;
  transition:
    background-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing),
    border-color var(--ll-motion-hover-duration) var(--ll-motion-hover-easing);
}

.pdes__optin-checkbox:checked {
  background-color: var(--pdes-optin-check-bg);
  border-color: var(--pdes-optin-check-bg);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

.pdes__optin-checkbox:focus-visible {
  outline: var(--ll-border-width-strong) solid var(--ll-color-focus-ring);
  outline-offset: var(--ll-space-2);
}

.pdes__optin-label > :first-child { margin-top: 0; }
.pdes__optin-label > :last-child  { margin-bottom: 0; }

/* Inline form error (Step 1 scan-error + Step 3 details-error) */
.pdes__error {
  margin: 0;
  padding-left: 24px;
  font-family: var(--ll-text-body-sm-family);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
  color: var(--ll-color-status-error);
  text-align: left;
}

/* Step 2 - loading pill. DO NOT set inline-size:100% (see pdes.md § Miscellaneous) */
.pdes__loading-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--ll-space-5);
  block-size: var(--pdes-loading-pill-block-size);
  padding-inline: var(--ll-space-7);
  background-color: var(--ll-color-bg-default);
  border-radius: var(--pdes-loading-pill-radius);
  box-shadow: var(--ll-shadow-resting);
}

.pdes__loading-spinner {
  box-sizing: border-box;
  flex: 0 0 auto;
  inline-size: 24px;
  block-size: 24px;
  border: 3px solid color-mix(in srgb, var(--ll-color-brand-deep) 25%, transparent);
  border-top-color: var(--ll-color-text-brand);
  border-radius: var(--ll-radius-pill);
  animation: pdes-spin 800ms linear infinite;
}

@keyframes pdes-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .pdes__loading-spinner {
    animation: none;
  }
}

.pdes__loading-label {
  margin: 0;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  color: var(--ll-color-text-secondary);
}

/* Step 3 - details form */
.pdes__details-title {
  margin: 0;
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ll-text-h5-weight);
  color: var(--ll-color-text-secondary);
}

.pdes__details-subtitle {
  margin: 0;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  color: var(--ll-color-text-secondary);
}

.pdes__form-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pdes-form-body-gap);
  inline-size: 100%;
}

.pdes__form-grid {
  display: grid;
  grid-template-columns: var(--pdes-form-cols);
  gap: var(--pdes-form-gap-block) var(--pdes-form-gap-inline);
  inline-size: 100%;
  text-align: start;
}

/* Per-field cell (WEBEXP-109841) - wraps each l-form-input + its
 * hidden .pdes__field-error slot so the error stacks beneath the input
 * inside the same grid cell. */
.pdes__form-field {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-3); /* 8 between input and inline error */
  inline-size: 100%;
}

/* Cancel the l-form-input primitive's 480px cap inside the grid.
 * Second selector kept for legacy prerendered HTML (pre-WEBEXP-109841
 * layout without the .pdes__form-field wrapper). */
.pdes__form-field > .l-form-input,
.pdes__form-grid > .l-form-input {
  max-inline-size: none;
}

/* Per-field inline error (WEBEXP-109841) - populated by the runtime
 * when a required field is left blank on blur or on submit. */
.pdes__field-error {
  margin: 0;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
  color: var(--ll-color-status-warning);
  text-align: start;
}

/* Specificity match against global `button.button { width: ... }` (0,2,1)
 * so the SM `inline-size: 100%` cvar actually applies. Matches the CTA-paint
 * override pattern above. See pdes.md § Step 3 submit specificity. */
.pdes button.pdes__submit {
  inline-size: var(--pdes-submit-inline-size);
  min-inline-size: var(--pdes-submit-min-inline-size);
}

/* Canonical icon slot (mask + currentcolor) - see pdes.md § Canonical icon slot */
.pdes__icon {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-color: currentcolor;
  mask: var(--pdes-icon-url) center / contain no-repeat;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--pdes-icon-url) center / contain no-repeat;
}

.pdes__icon > img { display: none; }

/* Step 3 trust line (lock icon + text) */
.pdes__trust {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ll-space-3);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
  color: var(--ll-color-text-secondary);
}

.pdes__trust-icon {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  color: var(--ll-color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pdes__trust-icon > .pdes__icon {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

/* Step 4 - result card (banner + rows) */
.pdes__result-card {
  display: grid;
  grid-template-columns: var(--pdes-result-banner-cols);
  gap: var(--pdes-result-banner-gap);
  align-items: stretch;
  background-color: var(--pdes-result-card-bg);
  border: var(--pdes-result-card-border);
  border-radius: var(--pdes-result-card-radius);
  box-shadow: var(--pdes-result-card-shadow);
  padding-block:
    var(--pdes-result-card-pad-block-start)
    var(--pdes-result-card-pad-block-end);
  padding-inline: var(--pdes-result-card-pad-inline);
}

/* Banner layout - SM icon-left-of-headline / MD+ centered column.
 * See pdes.md § Result banner layout for the SM two-col grid rationale. */
.pdes__result-banner {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  align-items: center;
  gap: var(--pdes-result-banner-gap-content) var(--ll-space-3);
  padding-block:
    var(--pdes-result-banner-pad-block-start)
    var(--pdes-result-banner-pad-block-end);
  padding-inline: var(--pdes-result-banner-pad-inline);
  background-color: var(--pdes-result-banner-bg);
  border-radius: var(--pdes-result-banner-radius);
}

.pdes__result-icon {
  grid-column: 1;
  grid-row: 1;
  inline-size: var(--pdes-result-icon-size);
  block-size: var(--pdes-result-icon-size);
  color: var(--pdes-result-icon-color);
}

.pdes__result-icon > .pdes__icon {
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

/* Headline reads 18/26 SemiBold at SM/MD per Figma safe frames
 * (`22902:10950` / `22902:10761`). Figma's `body-xl` tier ships 18/26,
 * which maps to LL `--ll-text-body-lg-*` (LL's `--ll-text-body-xl-*`
 * is 20/30 - see .cursor/rules/lledsue-atomic-design § Typography
 * tier-name lookup). Weight is 600 explicitly. LG/XL promote to h5
 * (28/34) via the >=1024 media query below. See pdes.md §
 * Result banner typography (WEBEXP-109959). */
.pdes__result-headline {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--ll-text-body-lg-family);
  font-size: var(--ll-text-body-lg-size);
  line-height: var(--ll-text-body-lg-line-height);
  letter-spacing: var(--ll-text-body-lg-letter-spacing);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ll-color-text-secondary);
  text-align: start;
}

.pdes__result-headline em {
  font-style: normal;
  color: var(--pdes-result-accent-color);
}

.pdes__result-email {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  color: var(--ll-color-text-secondary);
  text-align: center;
  word-break: break-all;
}

/* Attribute rows - filled tiles, no divider borders */
.pdes__result-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pdes-result-rows-gap);
}

.pdes__attribute {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-5);
  padding-block: var(--pdes-attribute-pad-block);
  padding-inline: var(--pdes-attribute-pad-inline);
  background-color: var(--pdes-attribute-bg);
  border-radius: var(--pdes-attribute-radius);
}

.pdes__attribute-label {
  margin: 0;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  color: var(--ll-color-text-secondary);
}

/* Per-row status; decoupled from parent variant (see pdes.md § Miscellaneous).
 * Weight is `semibold` (600) per the Figma Body-*-SemiBold treatment -
 * see pdes.md § Result attribute status weight (WEBEXP-109959). */
.pdes__attribute-status {
  flex: 0 0 auto;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ds-font-weight-semibold);
  margin: 0;
}

.pdes__attribute-status[data-status='exposed'] {
  color: var(--ll-color-status-warning);
}

.pdes__attribute-status[data-status='safe'] {
  color: var(--ll-color-status-success);
}

.pdes__result-actions {
  display: flex;
  flex-direction: var(--pdes-result-actions-direction);
  align-items: center;
  justify-content: center;
  gap: var(--pdes-result-actions-gap);
}

/* Step 4 result CTA width + inline padding. Tag+class matches the global
 * a.button:any-link / button.button specificity to win the cascade. */
a.pdes__result-cta:any-link,
button.pdes__result-cta {
  inline-size: var(--pdes-result-cta-inline-size);
  padding-inline: var(--pdes-result-cta-padding-inline);
}

/* Step 4 result CTA gradient + transparent border. Overrides the general
 * `.pdes a.button.primary` flat fill at higher specificity (adds
 * `.pdes__result-cta` to the class chain). Border-color transparent keeps
 * the global `.button`'s 2px border for `box-sizing: border-box` size
 * reservation while the gradient reads clean at the pill edge.
 *
 * `background-origin: border-box` is required because the gradient
 * painting area (border-box, per the shorthand default) is larger than
 * the coordinate space (padding-box, the default origin). Without this
 * override, the gradient's dark #00445a end tiles into the 2px transparent
 * border shell and paints a visible dark ring around the pill. Setting
 * origin=border-box stretches the gradient's 0-100% over the full paint
 * area so the pill edge reads clean. */
.pdes a.button.primary.pdes__result-cta:any-link,
.pdes button.button.primary.pdes__result-cta {
  background: var(--pdes-result-cta-bg) border-box;
  border-color: transparent;
}

/* Result CTA hover / focus-visible: keep the same gradient and brighten
 * via `filter: brightness(1.06)`, matching comparison-chart's teal CTA
 * hover (see `.comparison-chart__cta--teal:hover`). Overrides the shared
 * `.pdes a.button.primary:hover` flat near-black hover for Step 4 only. */
.pdes a.button.primary.pdes__result-cta:hover,
.pdes a.button.primary.pdes__result-cta:focus-visible,
.pdes button.button.primary.pdes__result-cta:hover,
.pdes button.button.primary.pdes__result-cta:focus-visible {
  background: var(--pdes-result-cta-bg) border-box;
  border-color: transparent;
  filter: brightness(1.06);
}

/* Step 4 result CTA label typography - always Button/Large/Medium
 * (18/24/0.24/500) per Figma, independent of the general button-lg gate
 * below (which only applies at MD+). Uses tag+class selectors so
 * specificity (0,4,1) beats the global `.button` (0,2,1) at SM where
 * the general PDES button-lg ramp does not apply. */
.pdes a.button.pdes__result-cta:any-link,
.pdes button.button.pdes__result-cta {
  font-family: var(--ll-text-button-lg-family);
  font-size: var(--ll-text-button-lg-size);
  line-height: var(--ll-text-button-lg-line-height);
  letter-spacing: var(--ll-text-button-lg-letter-spacing);
  font-weight: var(--ll-text-button-lg-weight);
}

/* Restore [hidden] behaviour - global .button rule sets display:inline-flex
 * with higher specificity than the UA [hidden] rule. */
a.pdes__result-cta[hidden],
button.pdes__result-cta[hidden] {
  display: none;
}

/* Button type ramp: button-lg at MD+ (SM keeps the default .button 16/20) */
@media (width >= 768px) {
  .pdes a.button:any-link,
  .pdes button.button {
    font-family: var(--ll-text-button-lg-family);
    font-size: var(--ll-text-button-lg-size);
    line-height: var(--ll-text-button-lg-line-height);
    letter-spacing: var(--ll-text-button-lg-letter-spacing);
    font-weight: var(--ll-text-button-lg-weight);
  }
}

.pdes__result-secondary {
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  color: var(--ll-color-text-link);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.pdes__result-secondary:hover {
  color: var(--ll-color-text-link-hover);
}

.pdes__result-secondary:focus-visible {
  outline: var(--pdes-focus-ring-width) solid var(--pdes-focus-ring-color);
  outline-offset: var(--pdes-focus-ring-offset);
  border-radius: var(--ll-radius-sm);
}

/* Secondary link typography ramp:
 * - SM (< 768): body-base size (16/24/0.32) with weight 500 (Body-base/Medium)
 *   per Figma SM Hyperlink `24876:14152` / `24876:14186`; plus 8px inline
 *   padding matching Figma's `px-8` wrapper.
 * - MD+ (>= 768): promote to body-lg (18/26/0.48) with weight 400 (Body-lg/
 *   Regular) per Figma LG/MD Hyperlink `24876:11093` / `24876:11170` /
 *   `24876:14005` / `24876:13973`. */
@media (width < 768px) {
  .pdes__result-secondary {
    font-weight: var(--ds-font-weight-medium);
    padding-inline: var(--ll-space-3);
  }
}

@media (width >= 768px) {
  .pdes__result-secondary {
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
  }
}

/* Variant axis - runtime sets .pdes--result-exposed | --result-safe */
.pdes--result-exposed {
  --pdes-result-banner-bg: rgb(247 236 224 / 50%);
  --pdes-result-icon-color: var(--ll-color-status-warning);
  --pdes-result-accent-color: var(--ll-color-status-warning);
  --pdes-result-icon-name: 'warning-triangle';
}

.pdes--result-safe {
  --pdes-result-banner-bg: rgb(227 242 234 / 50%);
  --pdes-result-icon-color: var(--ll-color-status-success);
  --pdes-result-accent-color: var(--ll-color-status-success);
  --pdes-result-icon-name: 'check-circle';
}

/* Tablet (MD, >= 768px) */
@media (width >= 768px) {
  .pdes {
    --pdes-section-pad-block: var(--ll-space-15);   /* 80 */
    --pdes-step-gap: var(--ll-space-11);            /* 48 */
    --pdes-step-header-gap: var(--ll-space-6);      /* 20 */
    --pdes-input-group-gap: var(--ll-space-7);      /* 24 */
    --pdes-pill-row-gap: var(--ll-space-5);         /* 16 */
    --pdes-form-body-gap: var(--ll-space-9);        /* 40 */
    --pdes-form-gap-block: var(--ll-space-8);       /* 32 row-gap */
    --pdes-form-gap-inline: var(--ll-space-5);      /* 16 col-gap */
    --pdes-form-cols: repeat(2, 1fr);
    --pdes-submit-inline-size: auto;
    --pdes-submit-min-inline-size: 192px;
    --pdes-result-cta-padding-inline: 24px;

    /* Frame paints at MD (mirrors SM), card stays transparent. Figma parent
     * frames `24876:13975` (exposed) / `24876:13942` (safe) wrap banner+rows
     * AND the actions block in one white `Results` surface at MD - so the
     * chrome moves up one layer from card to step. The step's row-gap
     * (--pdes-result-cta-margin-top = 40) becomes the card-internal spacing
     * between the (now-transparent) card and the actions block. */
    --pdes-result-frame-pad-block-start: var(--ll-space-8);       /* 32 */
    --pdes-result-frame-pad-block-end: var(--ll-space-9);         /* 40 */
    --pdes-result-frame-pad-inline: var(--ll-space-8);            /* 32 */
    --pdes-result-banner-gap: var(--ll-space-8);                  /* 32 */
    --pdes-result-banner-pad-block-start: var(--ll-space-8);      /* 32 */
    --pdes-result-banner-pad-block-end: var(--ll-space-9);        /* 40 */
    --pdes-result-banner-pad-inline: var(--ll-space-8);           /* 32 */
    --pdes-result-banner-gap-content: var(--ll-space-3);          /* 8 (WEBEXP-109959) */
    --pdes-result-icon-size: 40px;
    --pdes-attribute-bg: var(--ll-color-bg-secondary);
    --pdes-attribute-pad-block: var(--ll-space-5);                /* 16 */
    --pdes-attribute-pad-inline: var(--ll-space-6);               /* 20 */
    --pdes-result-rows-gap: var(--ll-space-5);                    /* 16 */
    --pdes-result-cta-margin-top: var(--ll-space-9);              /* 40 */
    --pdes-result-actions-gap: var(--ll-space-8);                 /* 32 */
    --pdes-result-cta-inline-size: auto;
  }

  /* Title h-role swap: h5 -> h3 at MD+ */
  .pdes__scan-title,
  .pdes__details-title {
    font-family: var(--ll-text-h3-family);
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h3-line-height);
    letter-spacing: var(--ll-text-h3-letter-spacing);
  }

  .pdes__scan-title {
    font-weight: var(--ds-font-weight-medium);
  }

  .pdes__details-title {
    font-weight: var(--ll-text-h3-weight);
  }

  /* Subtitles promote to body-lg at MD+ */
  .pdes__scan-subtitle,
  .pdes__details-subtitle {
    font-family: var(--ll-text-body-lg-family);
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
    font-weight: var(--ll-text-body-lg-weight);
  }

  .pdes__loading-label,
  .pdes__attribute-label,
  .pdes__attribute-status {
    font-family: var(--ll-text-body-lg-family);
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
  }

  /* MD+ scan-meta centers its text AND the opt-in flex group. SM keeps
   * `text-align: start` + `justify-content: flex-start` / `align-items: start`
   * from the base declarations for wrapped-disclaimer legibility
   * (WEBEXP-109967). At MD+ the disclaimer sentence fits on one line and the
   * whole meta band reads as a centered footer under the pill row. */
  .pdes__disclaimer,
  .pdes__optin {
    text-align: center;
  }

  .pdes__optin {
    justify-content: center;
    align-items: center;
  }

  /* Banner switches from SM's icon-left grid to MD+ centered column */
  .pdes__result-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--pdes-result-banner-gap-content);
  }

  .pdes__result-icon,
  .pdes__result-headline,
  .pdes__result-email {
    grid-column: auto;
    grid-row: auto;
  }

  .pdes__result-headline,
  .pdes__result-email {
    text-align: center;
  }

  /* Grid-column spans (12-col band) - see pdes.md § Grid-column policy */
  .pdes__step--loading > .pdes__loading-pill {
    grid-column: 1 / span 11;
  }

  .pdes__step--details > .pdes__form--details,
  .pdes__step--result > .pdes__result-card,
  .pdes__step--result > .pdes__result-actions {
    grid-column: 2 / span 10;
  }
}

/* Desktop (LG, >= 1024px) */
@media (width >= 1024px) {
  .pdes {
    --pdes-section-pad-block: var(--ll-space-15);
    --pdes-form-cols: repeat(4, 1fr);
    --pdes-form-gap-block: var(--ll-space-5);       /* 16 (single row) */

    /* Banner splits 50/50 - cvar semantics flip from row-gap to col-gap */
    --pdes-result-banner-cols: 1fr 1fr;
    --pdes-result-banner-gap: var(--ll-space-8);    /* 32 col-gap */

    /* LG explicitly re-swaps: frame collapses back to a bare wrapper and the
     * card takes over the chrome. Required because MD paints the frame; if
     * LG inherited MD, the step wrapper would keep chrome that Figma
     * `24876:11062` (exposed) / `24876:11130` (safe) places on the card. */
    --pdes-result-frame-bg: transparent;
    --pdes-result-frame-shadow: none;
    --pdes-result-frame-border: none;
    --pdes-result-frame-radius: 0;
    --pdes-result-frame-pad-block-start: 0;
    --pdes-result-frame-pad-block-end: 0;
    --pdes-result-frame-pad-inline: 0;
    --pdes-result-card-bg: var(--ll-color-bg-default);
    --pdes-result-card-shadow: var(--ll-shadow-floating);
    --pdes-result-card-border: var(--ll-border-width-xs) solid var(--ll-color-border-default);
    --pdes-result-card-radius: var(--ds-radius-l);
    --pdes-result-card-pad-block-start: var(--ll-space-8);
    --pdes-result-card-pad-block-end: var(--ll-space-8);
    --pdes-result-card-pad-inline: var(--ll-space-8);
    --pdes-result-banner-pad-block-start: var(--ll-space-8);
    --pdes-result-banner-pad-block-end: var(--ll-space-8);
    --pdes-result-banner-pad-inline: var(--ll-space-8);
    --pdes-result-actions-direction: row;
    --pdes-result-actions-gap: var(--ll-space-9);   /* 40 */
    --pdes-result-cta-margin-top: var(--ll-space-11); /* 48 - Figma "Links pt-48" */
  }

  /* Headline promotes SM/MD body-xl -> LG/XL h5 (28/34 SemiBold) per Figma
   * safe LG `22902:9130` / exposed LG `22992:1283`. Weight stays 600. */
  .pdes__result-headline {
    font-family: var(--ll-text-h5-family);
    font-size: var(--ll-text-h5-size);
    line-height: var(--ll-text-h5-line-height);
    letter-spacing: var(--ll-text-h5-letter-spacing);
  }

  /* Grid-column spans (LG/XL) - see pdes.md § Grid-column policy */
  .pdes__step--loading > .pdes__loading-pill {
    grid-column: 4 / span 6;
  }

  .pdes__step--details > .pdes__form--details {
    grid-column: 3 / span 8;
  }

  /* Step 1 form spans full 12; pill-group (pill-row + error) constrained
     to 640 + centered so the error left-aligns with the input start */
  .pdes__step--scan > .pdes__form--scan > .pdes__pill-group {
    max-inline-size: 640px;
    align-self: center;
  }
}

/* SM (< 768px) pill height override - Figma pins pills at 44 at SM
 * (both l-form-input and .button.primary) - see pdes.md § Height ladder */
@media (width < 768px) {
  .pdes__pill-row .l-form-input {
    --l-form-input-block-size: 44px;
    --l-form-input-padding-block: 0;
    --l-form-input-padding-inline: var(--ll-space-5);   /* 16 (Figma) */
  }

  .pdes__pill-row .l-form-input__field {
    font-size: var(--ll-text-body-base-size);
    line-height: var(--ll-text-body-base-line-height);
  }

  .pdes a.button.primary:any-link,
  .pdes button.button.primary {
    block-size: 44px;
  }
}