/* Herstijl van de bestaande assessment-tool (nimbus-assessment.css) naar het
   nieuwe ontwerpsysteem. De structuur en klassen van de tool blijven
   ongewijzigd (de JavaScript-logica hangt eraan vast); alleen kleur,
   typografie en vorm worden overschreven, met dezelfde tokens als de rest
   van de site. Laadt na nimbus-assessment.css. */

.na-assessment {
  --na-ink: var(--ink);
  --na-muted: var(--ink-2);
  --na-line: var(--line);
  --na-panel: var(--card);
  --na-surface: var(--bg-2);
  --na-brand: var(--accent);
  --na-brand-strong: var(--ink);
  --na-accent: var(--accent);
  --na-accent-strong: var(--accent);
  --na-success: var(--ok);
  --na-warning: var(--warn);
  --na-danger: var(--bad);
  --na-shadow: var(--shadow);
  font-family: var(--font-body);
}

.na-assessment .na-hero-copy h2,
.na-assessment .na-panel-heading h3,
.na-assessment .na-panel-heading h4,
.na-assessment .na-chart-card h4,
.na-assessment .na-analysis-card h4,
.na-assessment .na-security-box h4,
.na-assessment .na-metric-card strong,
.na-assessment .na-label,
.na-assessment .na-option-title {
  font-family: var(--font-body);
  letter-spacing: -0.02em;
}

/* Omhulsel: geen glasmorfisme, gewoon de paginagrond. */
.na-assessment .na-shell {
  padding: 0 var(--gutter);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.na-assessment .na-hero {
  margin-bottom: 24px;
}

.na-assessment .na-hero-copy,
.na-assessment .na-hero-metrics {
  border: 1px solid var(--line);
  border-radius: 20px;
  backdrop-filter: none;
}

.na-assessment .na-hero-copy {
  background: var(--ink);
  color: var(--bg);
}

.na-assessment .na-hero-copy p {
  color: color-mix(in srgb, var(--bg) 78%, transparent);
}

.na-assessment .na-eyebrow {
  background: color-mix(in srgb, var(--bg) 14%, transparent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.na-assessment .na-hero-metrics {
  background: var(--bg-2);
}

.na-assessment .na-metric-card {
  border-radius: 14px;
  border-color: var(--line);
  background: var(--card);
}

/* Stepper */
.na-assessment .na-stepper li {
  border-radius: 14px;
  border-color: var(--line);
  background: var(--card);
}

.na-assessment .na-stepper li::before {
  background: var(--chip);
  color: var(--ink-2);
  font-family: var(--font-mono);
}

.na-assessment .na-stepper li.is-active {
  border-color: var(--accent);
  background: var(--chip);
}

.na-assessment .na-stepper li.is-active::before {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Panelen en velden */
.na-assessment .na-panel {
  border-radius: 20px;
  border-color: var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
}

.na-assessment .na-panel-kicker {
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
}

.na-assessment input[type="text"],
.na-assessment input[type="email"],
.na-assessment input[type="tel"],
.na-assessment input:not([type]),
.na-assessment select {
  border-radius: 12px;
  border-color: var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

.na-assessment input[type="text"]:focus,
.na-assessment input[type="email"]:focus,
.na-assessment input[type="tel"]:focus,
.na-assessment input:not([type]):focus,
.na-assessment select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.na-assessment .na-tooltip-trigger {
  background: var(--chip);
  color: var(--accent);
}

.na-assessment .na-tooltip-text {
  background: var(--ink);
  color: var(--bg);
}

.na-assessment .na-tooltip-text::after {
  border-top-color: var(--ink);
}

.na-assessment .na-option-item {
  border-radius: 14px;
  border-color: var(--line);
  background: var(--card);
}

.na-assessment .na-option-item:hover,
.na-assessment .na-option-item.is-selected {
  border-color: var(--accent);
  background: var(--chip);
  box-shadow: none;
}

.na-assessment .na-option-item input[type="checkbox"] {
  accent-color: var(--accent);
}

/* Resultaten */
.na-assessment .na-score-card,
.na-assessment .na-chart-card,
.na-assessment .na-analysis-card,
.na-assessment .na-security-box {
  border-radius: 18px;
  border-color: var(--line);
  background: var(--card);
}

.na-assessment .na-score-card {
  background: var(--ink);
  color: var(--bg);
}

.na-assessment .na-score-label {
  color: color-mix(in srgb, var(--bg) 78%, transparent);
}

.na-assessment .na-score-output {
  font-family: var(--font-body);
}

.na-assessment .na-score-card p {
  color: color-mix(in srgb, var(--bg) 76%, transparent);
}

.na-assessment .na-risk-banner {
  border-radius: 14px;
}

.na-assessment .na-risk-banner.is-good,
.na-assessment .na-good-item {
  background: color-mix(in srgb, var(--ok) 14%, var(--card));
  color: var(--ok);
}

.na-assessment .na-risk-banner.is-medium {
  background: color-mix(in srgb, var(--warn) 16%, var(--card));
  color: var(--warn);
}

.na-assessment .na-risk-banner.is-high,
.na-assessment .na-bad-item {
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
  color: var(--bad);
}

.na-assessment .na-good-item,
.na-assessment .na-bad-item {
  border-radius: 10px;
}

.na-assessment .na-security-box {
  background: var(--bg-2);
}

.na-assessment .na-validation-error {
  border-radius: 12px;
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
  color: var(--bad);
}

.na-assessment .na-submit-feedback {
  border-radius: 14px;
}

.na-assessment .na-submit-feedback.is-info {
  background: var(--chip);
  color: var(--ink);
}

.na-assessment .na-submit-feedback.is-success {
  background: color-mix(in srgb, var(--ok) 14%, var(--card));
  color: var(--ok);
}

.na-assessment .na-submit-feedback.is-error {
  background: color-mix(in srgb, var(--bad) 12%, var(--card));
  color: var(--bad);
}

/* Knoppen: dezelfde vorm als de rest van de site. */
.na-assessment .na-button {
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.na-assessment .na-button:hover {
  transform: translateY(-1px);
}

.na-assessment .na-button-secondary {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}

.na-assessment .na-button-primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
}

/* Mobiel: harde garantie dat niets breder wordt dan het scherm, los van de
   volgorde waarin deze stylesheet en nimbus-assessment.css laden. */
.na-assessment,
.na-assessment .na-shell,
.na-assessment .na-hero,
.na-assessment .na-hero-copy,
.na-assessment .na-hero-metrics,
.na-assessment .na-grid,
.na-assessment .na-option-grid,
.na-assessment .na-chart-grid,
.na-assessment .na-analysis-grid,
.na-assessment .na-results-overview {
  min-width: 0;
}

@media (max-width: 860px) {
  .na-assessment .na-hero,
  .na-assessment .na-grid,
  .na-assessment .na-option-grid,
  .na-assessment .na-chart-grid,
  .na-assessment .na-analysis-grid,
  .na-assessment .na-results-overview {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 620px) {
  .na-assessment .na-stepper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .na-assessment .na-shell {
    padding: 0 16px;
  }
}

/* Vangnet: nooit horizontaal scrollen, wat de oorzaak ook is. */
.assess-embed {
  overflow-x: hidden;
}
.assess-embed * {
  max-width: 100%;
}