/* =========================================================================
   Phase 5 — Scorecard Enhancement Pass
   Progressive enhancement over Phase 3 Drupal Webform rendering.
   Depends on tokens declared in style.css (Phase 3).
   ========================================================================= */

/* ---- 1. Wizard page transitions (SCR-03) ---- */
.scorecard-page {
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.scorecard-page.is-exiting {
  opacity: 0;
  transform: translateY(-8px);
}
.scorecard-page.is-entering {
  opacity: 0;
  transform: translateY(8px);
}
.scorecard-page.is-entered {
  opacity: 1;
  transform: translateY(0);
}

/* ---- 2. Enhanced progress step labels (SCR-03) ---- */
.scorecard-fallback-progress {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}
.scorecard-progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
  gap: var(--spacing-sm);
}
.scorecard-progress-steps .step-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-foreground-subtle);
  flex: 1;
  text-align: center;
}
.scorecard-progress-steps .step-label.is-current {
  color: var(--color-foreground-muted);
}
.scorecard-progress-mobile {
  display: none;
  text-align: center;
  font-size: 14px;
  color: var(--color-foreground-muted);
  margin-top: var(--spacing-sm);
}

@media (max-width: 767px) {
  .scorecard-progress-steps { display: none; }
  .scorecard-progress-mobile { display: block; }
}

/* ---- 3. Option card styling + mobile polish + press feedback (SCR-05) ---- */
/* Layout the radios/checkboxes wrapper as a responsive grid of cards.
   Use higher-specificity selectors throughout to override Webform's own
   webform-options-display-buttons defaults (which would otherwise render
   options as light-mode buttons with white backgrounds). */
.scorecard-main .webform-options-display-buttons,
.scorecard-main .form-radios.webform-options-display-buttons {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

/* Card styling targets the Webform-native .form-item directly so it works on
   AJAX-replaced content even before JS re-tags. The .scorecard-option class
   added by JS is only used for press feedback and selected state. */
.scorecard-main .webform-options-display-buttons > .form-item,
.scorecard-main .webform-options-display-buttons .form-item.form-type-radio,
.scorecard-main .webform-options-display-buttons .form-item.form-type-checkbox {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 44px;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, transform 100ms ease-in-out;
  position: relative;
  display: flex !important;
  align-items: stretch;
  box-shadow: none !important;
}

/* Hide the native radio bullet — the card itself is the visual control. */
.scorecard-main .webform-options-display-buttons .form-item input[type="radio"],
.scorecard-main .webform-options-display-buttons .form-item input[type="checkbox"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
}

/* The label IS the card content. Make it fill the box and the click target. */
.scorecard-main .webform-options-display-buttons .form-item > label,
.scorecard-main .webform-options-display-buttons .form-item label.option {
  color: var(--color-foreground) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  flex: 1 !important;
  margin: 0 !important;
  padding: var(--spacing-md) !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 8px !important;
  text-align: left !important;
  width: 100% !important;
  text-transform: none !important;
  text-shadow: none !important;
}

/* Hover state — intentionally subtle. Only a border-color shift, no
   background fill, so it cannot be visually confused with selected. */
.scorecard-main .webform-options-display-buttons > .form-item:hover,
.scorecard-main .webform-options-display-buttons .form-item.form-type-radio:hover,
.scorecard-main .webform-options-display-buttons .form-item.form-type-checkbox:hover {
  border-color: var(--color-accent) !important;
}

.scorecard-main .webform-options-display-buttons .form-item:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}

.scorecard-main .webform-options-display-buttons .form-item.is-pressing {
  transform: scale(0.98);
}

/* Selected state — primary (JS-driven .is-selected-card) and secondary
   (CSS-only :has(input:checked) fallback). Both produce identical visuals.
   Filled background + thick teal left border + checkmark badge make the
   selected state impossible to confuse with hover or default. */
.scorecard-main .webform-options-display-buttons .form-item.is-selected-card,
.scorecard-main .webform-options-display-buttons .form-item:has(input:checked) {
  border-color: var(--color-accent) !important;
  border-left-width: 4px !important;
  background: var(--color-background-secondary) !important;
}

.scorecard-main .webform-options-display-buttons .form-item.is-selected-card::after,
.scorecard-main .webform-options-display-buttons .form-item:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-background);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--color-card);
}

@media (max-width: 767px) {
  .scorecard-main .webform-options-display-buttons,
  .scorecard-main .form-radios.webform-options-display-buttons {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
  .scorecard-main .webform-options-display-buttons > .form-item {
    min-height: 56px;
  }
}

/* ---- 3b. Section heading and question label theming ---- */
.scorecard-main h2 {
  color: var(--color-foreground);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin: var(--spacing-2xl) 0 var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  position: relative;
}
.scorecard-main h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-accent);
  margin-top: var(--spacing-sm);
}

.scorecard-main .pillar-description {
  color: var(--color-foreground-muted);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

/* Question label / fieldset legend. */
.scorecard-main .fieldset-legend,
.scorecard-main legend > span {
  color: var(--color-foreground);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.scorecard-main fieldset.radios--wrapper,
.scorecard-main fieldset.webform-type-radios {
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: var(--spacing-xl);
}

/* ---- 3c. Wizard progress tracker (NigelOToole progress-tracker v2.0.7) ----
   The CDN library paints the circle via .progress-marker::before and the
   connector line via .progress-marker::after. All overrides below target
   those pseudo-elements directly — styling .progress-marker itself has no
   visual effect because the pseudos sit on top.
   Specificity prefix `.scorecard-main .webform-progress` gives 0,3,0 vs
   the CDN's 0,2,0 — we also use !important as belt-and-braces, matching
   the rest of this file.
   ------------------------------------------------------------------------ */
.scorecard-main .webform-progress {
  margin: var(--spacing-lg) 0 var(--spacing-2xl);
}

/* Base tracker — flex row, no list bullets, allow space for the scaled
   active marker so it doesn't clip. */
.scorecard-main .webform-progress .webform-progress-tracker.progress-tracker {
  list-style: none;
  padding: var(--spacing-md) 0;
  margin: 0;
}

/* Upcoming step (no state class): muted grey circle, muted grey connector,
   subtle-muted number. */
.scorecard-main .webform-progress .progress-step .progress-marker::before {
  background-color: var(--color-border) !important;
  color: var(--color-foreground-subtle) !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
}
.scorecard-main .webform-progress .progress-step .progress-marker::after {
  background-color: var(--color-border) !important;
  height: 3px !important;
  top: 12px !important;
  transition: background-color 200ms ease !important;
}

/* Completed step: solid teal circle, solid teal connector line to the next
   step, dark number for contrast against teal. */
.scorecard-main .webform-progress .progress-step.is-complete .progress-marker::before {
  background-color: var(--color-accent) !important;
  color: var(--color-background) !important;
}
.scorecard-main .webform-progress .progress-step.is-complete .progress-marker::after {
  background-color: var(--color-accent) !important;
}

/* Active (current) step: green outline, card-colored fill, white number.
   No scale, no glow — clean outlined treatment reads clearly as "you are here". */
.scorecard-main .webform-progress .progress-step.is-active .progress-marker::before {
  background-color: var(--color-card) !important;
  border: 2px solid var(--color-accent) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
/* The connector line FROM the active step onwards stays grey (upcoming). */
.scorecard-main .webform-progress .progress-step.is-active .progress-marker::after {
  background-color: var(--color-border) !important;
}

/* Hover state — subtle brighten on upcoming only, completed/active keep
   their fills stable. Overrides the CDN's hover blue. */
.scorecard-main .webform-progress .progress-step:hover .progress-marker::before {
  background-color: var(--color-foreground-subtle) !important;
}
/* Completed hover — keep solid teal. Active hover — keep card fill (don't flood the outlined circle). */
.scorecard-main .webform-progress .progress-step.is-complete:hover .progress-marker::before {
  background-color: var(--color-accent) !important;
}
.scorecard-main .webform-progress .progress-step.is-active:hover .progress-marker::before {
  background-color: var(--color-card) !important;
}

/* Step text below the marker — hidden entirely. The "X of 7" label rows
   duplicate information already shown by the "2 of 8" status line below
   the tracker. Hide all of them regardless of step state. */
.scorecard-main .webform-progress .progress-text,
.scorecard-main .webform-progress .progress-title {
  display: none !important;
}

/* "1 of 8" status line under the tracker. */
.scorecard-main .webform-progress .webform-progress__status,
.scorecard-main .webform-progress .webform-progress__summary {
  color: var(--color-foreground-muted);
  font-size: 14px;
  text-align: center;
  margin-top: var(--spacing-md);
}

/* Respect reduced motion — drop the scale so active marker sits flat. */
@media (prefers-reduced-motion: reduce) {
  .scorecard-main .webform-progress .progress-step.is-active .progress-marker::before {
    transform: none !important;
    transition: none !important;
  }
}

/* Suppress the JS-injected fallback band when Webform's tracker is present. */
.scorecard-main .webform-progress + .scorecard-fallback-progress,
.scorecard-main .webform-progress ~ .scorecard-fallback-progress,
.scorecard-main:has(.webform-progress) .scorecard-fallback-progress {
  display: none !important;
}

/* ---- 3d. Form action buttons (Next / Previous / Submit) ---- */
.scorecard-main .form-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  margin-top: var(--spacing-2xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}
.scorecard-main .webform-button--next,
.scorecard-main .webform-button--submit {
  background: var(--color-accent);
  color: var(--color-background);
  border: none;
  border-radius: 8px;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease;
}
.scorecard-main .webform-button--next:hover,
.scorecard-main .webform-button--submit:hover {
  background: #00B894;
}
.scorecard-main .webform-button--previous {
  background: transparent;
  color: var(--color-foreground-muted);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.scorecard-main .webform-button--previous:hover {
  border-color: var(--color-foreground-muted);
  color: var(--color-foreground);
}

/* ---- 4. Consent checkbox block (SCR-07) ---- */
.scorecard-consent {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
.scorecard-consent label {
  color: var(--color-foreground-muted);
  font-size: 16px;
  line-height: 1.6;
}
.scorecard-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.scorecard-consent.has-error {
  border-color: var(--color-error);
}
.scorecard-consent .error-message {
  color: var(--color-error);
  font-size: 14px;
  margin-top: var(--spacing-sm);
}

/* ---- 5. Follow-up opt-in block (SCR-07) ---- */
.scorecard-followup {
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-md);
  margin: var(--spacing-lg) 0;
}
.scorecard-followup label {
  color: var(--color-foreground-muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ---- 6. AI narrative block (renders Plan 05-02 output, styled here) ---- */
.ai-narrative {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
}
.ai-narrative .powered-by {
  text-align: right;
  font-size: 14px;
  color: var(--color-foreground-muted);
  margin-top: var(--spacing-md);
}

/* ---- 7. Service callout card (SCR-02, renders Plan 05-02 output) ---- */
.service-callout {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  padding: var(--spacing-md);
  margin-top: var(--spacing-lg);
}
.service-callout .service-tier-tag {
  font-size: 14px;
  color: var(--color-foreground-subtle);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.service-callout h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  margin: var(--spacing-sm) 0 var(--spacing-md);
}

/* ---- 8. Animated score bars (SCR-04) ---- */
.score-bar-track {
  height: 12px;
  background: var(--color-background-secondary);
  border-radius: 6px;
  overflow: hidden;
}
.score-bar-fill {
  height: 100%;
  width: 0;
  background: var(--color-accent);
  transition: width 600ms ease-out, background-color 300ms ease;
  border-radius: 6px;
}
.score-bar-fill.is-weak { background: var(--color-score-weak); }
.score-bar-fill.is-mid { background: var(--color-score-mid); }
.score-bar-fill.is-strong { background: var(--color-score-strong); }

/* ---- 9. Reduced motion override (mandatory per D-17) ---- */
@media (prefers-reduced-motion: reduce) {
  .scorecard-page,
  .scorecard-option,
  .score-bar-fill {
    transition: opacity 150ms ease !important;
  }
  .scorecard-page.is-exiting,
  .scorecard-page.is-entering {
    transform: none !important;
  }
  .scorecard-option.is-pressing {
    transform: none !important;
  }
  .score-bar-fill {
    transition: none !important;
  }
}

/* ---- 10. Scorecard results page (SCR-04b) ---- */

/* 10.1 Results page heading pass
   Promote the lead "Your AI Readiness Report" h2 to match the wizard hero h1.
   The :first-child selector targets only this lead heading, not the section
   titles ("Your scores by pillar", "What to do next") below it.
   Drupal's webform confirmation may wrap the message in .webform-confirmation —
   both selectors are covered. */
.scorecard-main .container > h2:first-child,
.scorecard-main .container .webform-confirmation > h2:first-child {
  font-size: 48px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center;
  margin: 0 0 var(--spacing-xl);
  color: var(--color-foreground);
}
@media (min-width: 1024px) {
  .scorecard-main .container > h2:first-child,
  .scorecard-main .container .webform-confirmation > h2:first-child {
    font-size: 56px !important;
  }
}

/* 10.2 Score pillars — teal bars, pillar row typography */

/* Pillar list container spacing */
.scorecard-main .score-pillars {
  margin: var(--spacing-xl) 0 var(--spacing-2xl);
}

/* Individual pillar row — vertical rhythm */
.scorecard-main .score-pillar {
  margin-bottom: var(--spacing-lg);
}

/* Pillar header: name (white) + score (teal, bold) on one row */
.scorecard-main .score-pillar .pillar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--spacing-sm);
}
.scorecard-main .score-pillar .pillar-label {
  color: var(--color-foreground);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}
.scorecard-main .score-pillar .pillar-score {
  color: var(--color-accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Track: subtle dark bar, overrides style.css default. */
.scorecard-main .score-pillars .score-bar-track {
  background: var(--color-background-secondary) !important;
  border: 1px solid var(--color-border);
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}

/* Fill: ALWAYS teal, regardless of .weak/.mid/.strong classes from scripts.js.
   These rules must beat:
     .score-bar        (style.css — no background set)
     .score-bar.weak   (style.css — red)
     .score-bar.mid    (style.css — amber)
     .score-bar.strong (style.css — green) */
.scorecard-main .score-pillars .score-bar,
.scorecard-main .score-pillars .score-bar.weak,
.scorecard-main .score-pillars .score-bar.mid,
.scorecard-main .score-pillars .score-bar.strong {
  background: var(--color-accent) !important;
  border-radius: 6px;
  height: 100%;
  transition: width 600ms ease-out;
}

/* 10.3 Recommendations — card wrappers */

/* Recommendations section spacing */
.scorecard-main .recommendations-section {
  margin: var(--spacing-2xl) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Each visible pillar recommendation = dark card matching option-card aesthetic. */
.scorecard-main .recommendations-section .pillar-recommendations.pillar-rec-visible {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 8px;
  padding: var(--spacing-xl);
  margin: 0;
}

/* Card heading — pillar name + "Recommendations" label */
.scorecard-main .recommendations-section .pillar-recommendations h3 {
  color: var(--color-foreground);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--spacing-md);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

/* Numbered list inside card */
.scorecard-main .recommendations-section .pillar-recommendations ol {
  color: var(--color-foreground-muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  padding-left: var(--spacing-lg);
}
.scorecard-main .recommendations-section .pillar-recommendations ol > li {
  margin-bottom: var(--spacing-md);
}
.scorecard-main .recommendations-section .pillar-recommendations ol > li:last-child {
  margin-bottom: 0;
}
.scorecard-main .recommendations-section .pillar-recommendations ol > li::marker {
  color: var(--color-accent);
  font-weight: 600;
}

/* 10.4 Responsive */
@media (max-width: 767px) {
  .scorecard-main .recommendations-section .pillar-recommendations.pillar-rec-visible {
    padding: var(--spacing-lg);
  }
  .scorecard-main .score-pillar .pillar-header {
    gap: var(--spacing-sm);
  }
}

/* ---- 10.5 Results page: hide wizard progress bar ---- */
/* The progress bar is meaningful during the wizard but redundant once the user
   reaches the results/confirmation page — the wizard is already complete.
   body.scorecard-results-page is set by koallabs_preprocess_html() in
   koallabs.theme only on /scorecard/results and the webform confirmation URL. */
body.scorecard-results-page .progress-tracker,
body.scorecard-results-page .webform-progress,
body.scorecard-results-page .webform-progress-tracker,
body.scorecard-results-page .scorecard-progress {
  display: none !important;
}