/* ==========================================================================
   Clunky Design System (CDS)
   Workflow Friction Score™
   File: /assets/css/components/friction-score.css

   Sprint 1
   Purpose:
   - Styles the Workflow Friction Score™ assessment
   - Provides reusable form, question, range-control, result and
     recommendation presentation styles
   - Uses only the canonical CDS --color-* / --space-* / --radius-* /
     --shadow-* / --transition-* tokens
========================================================================== */


/* ==========================================================================
   1. SCORE FORM
========================================================================== */

.friction-score {
  width: 100%;
  margin: 0;
}

.friction-score fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}


/* ==========================================================================
   2. SCORE FIELDSET
========================================================================== */

.score-fieldset {
  display: grid;
  gap: var(--space-7);
  margin: 0;
  padding: 0;
  border: 0;
}

.score-fieldset > legend {
  width: 100%;
  margin-bottom: var(--space-2);
  padding: 0;
  color: var(--color-heading);
  font-size: var(--fs-h4, 1.5rem);
  font-weight: var(--fw-bold, 700);
  line-height: var(--lh-tight, 1.2);
}


/* ==========================================================================
   3. SCORE QUESTION
========================================================================== */

.score-question {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 1rem);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm, 0 1px 2px rgb(15 23 42 / 0.05));
  transition:
    border-color var(--transition-fast, 160ms ease),
    box-shadow var(--transition-fast, 160ms ease),
    transform var(--transition-fast, 160ms ease);
}

.score-question:hover {
  border-color: var(--color-primary-light, var(--color-primary));
  box-shadow: var(--shadow-md, 0 8px 24px rgb(15 23 42 / 0.08));
}

.score-question:focus-within {
  border-color: var(--color-focus, var(--color-primary));
  box-shadow:
    0 0 0 3px color-mix(
      in srgb,
      var(--color-focus, var(--color-primary)) 16%,
      transparent
    ),
    var(--shadow-md, 0 8px 24px rgb(15 23 42 / 0.08));
}


/* ==========================================================================
   4. QUESTION LABEL
========================================================================== */

.score-question label {
  display: block;
  margin: 0;
  color: var(--color-heading);
  font-size: var(--fs-base, 1rem);
  font-weight: var(--fw-semibold, 600);
  line-height: var(--lh-body, 1.5);
}

.score-question-description {
  margin: calc(var(--space-2) * -1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm, 0.875rem);
  line-height: var(--lh-body, 1.7);
}


/* ==========================================================================
   5. RANGE CONTROL
========================================================================== */

.score-range {
  display: grid;
  gap: var(--space-3);
}

.score-range input[type="range"] {
  width: 100%;
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.score-range input[type="range"]:focus-visible {
  outline: 3px solid var(--color-focus, var(--color-primary));
  outline-offset: 4px;
}


/* ==========================================================================
   6. RANGE SCALE
========================================================================== */

.score-range-scale {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--fs-xs, 0.75rem);
  line-height: var(--lh-body, 1.5);
}

.score-range-scale span:last-child {
  text-align: right;
}


/* ==========================================================================
   7. CURRENT VALUE
========================================================================== */

.score-current-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  min-width: 2.5rem;
  min-height: 2rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill, 999px);
  background: var(--color-surface-subtle);
  color: var(--color-heading);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-bold, 700);
}


/* ==========================================================================
   8. SCORE RESULT
========================================================================== */

.score-result {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: clamp(var(--space-6), 4vw, var(--space-9));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl, 1.5rem);
  background:
    linear-gradient(
      135deg,
      var(--color-surface),
      var(--color-bg)
    );
  box-shadow: var(--shadow-lg, 0 16px 40px rgb(15 23 42 / 0.08));
  text-align: center;
}

.score-result-label {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.04em;
  line-height: var(--lh-body, 1.5);
  text-transform: uppercase;
}

.score-result-value {
  margin: 0;
  color: var(--color-heading);
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: var(--fw-black, 800);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.score-result-description {
  max-width: 55ch;
  margin: 0 auto;
  color: var(--color-text-light);
  font-size: var(--fs-base, 0.9375rem);
  line-height: var(--lh-body, 1.7);
}


/* ==========================================================================
   9. SCORE STATUS
========================================================================== */

.score-result[data-score-level="low"] {
  border-color: color-mix(
    in srgb,
    var(--color-success) 35%,
    var(--color-border)
  );
}

.score-result[data-score-level="moderate"] {
  border-color: color-mix(
    in srgb,
    var(--color-warning) 35%,
    var(--color-border)
  );
}

.score-result[data-score-level="high"] {
  border-color: color-mix(
    in srgb,
    var(--color-danger) 35%,
    var(--color-border)
  );
}


/* ==========================================================================
   10. RECOMMENDATIONS
========================================================================== */

.score-recommendations {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  text-align: left;
}

.score-recommendations-title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--fs-base, 1rem);
  font-weight: var(--fw-bold, 700);
}

.score-recommendations-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.score-recommendations-list li {
  position: relative;
  padding-left: calc(var(--space-5) + var(--space-2));
  color: var(--color-text);
  line-height: var(--lh-body, 1.7);
}

.score-recommendations-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--color-success);
  font-weight: var(--fw-bold, 700);
}


/* ==========================================================================
   11. SCORE ACTIONS
========================================================================== */

.score-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}


/* ==========================================================================
   12. REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .score-question {
    transition: none;
  }
}


/* ==========================================================================
   13. DARK MODE
========================================================================== */

@media (prefers-color-scheme: dark) {

  .score-question {
    border-color: var(--color-border-dark, var(--color-border));
    background: var(--color-surface-dark, var(--color-surface));
  }

  .score-question label,
  .score-fieldset > legend,
  .score-result-value,
  .score-recommendations-title,
  .score-recommendations-list li {
    color: var(--color-heading-dark, var(--color-heading));
  }

  .score-question-description,
  .score-range-scale,
  .score-result-label {
    color: var(--color-text-muted-dark, var(--color-text-muted));
  }

  .score-result {
    border-color: var(--color-border-dark, var(--color-border));
    background: var(--color-surface-dark, var(--color-surface));
  }

}


/* ==========================================================================
   END OF FILE
========================================================================== */