/* =========================================================
   ISO 42001 Self Assessment – Public UI (UX 1–8)
   Breakdance-safe, no global resets.
   ========================================================= */

:root{
  --iso-green:#6fb15c;
  --iso-green-dark:#5aa14c;
  --iso-amber:#f59e0b;
  --iso-red:#ef4444;
  --iso-blue:#60a5fa;

  --iso-text:#0f172a;
  --iso-muted:#6b7280;
  --iso-border:#e5e7eb;
  --iso-border-soft:#eef2f7;
  --iso-bg:#ffffff;
  --iso-card:#ffffff;
  --iso-card-muted:#fafafa;

  --iso-radius:14px;
  --iso-shadow:0 6px 18px rgba(15,23,42,0.06);
  --iso-focus:0 0 0 4px rgba(147,197,253,0.35);
}

.iso42k-app{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--iso-text);
  line-height:1.45;
}

.iso42k-step{ display:none; }
.iso42k-step.is-active{ display:block; }

/* ---------------------------------------------------------
   Intro / Step 1 (NO PROGRESS BAR)
--------------------------------------------------------- */

.iso42k-hero{
  max-width:960px;
  margin:0 auto;
  padding:48px 20px 32px;
}

.iso42k-title{
  text-align:center;
  font-size:52px;
  font-weight:900;
  letter-spacing:.4px;
  margin:0 0 10px;
}

.iso42k-subtitle{
  text-align:center;
  font-size:16px;
  color:#334155;
  margin:0 0 28px;
}

.iso42k-expect{
  max-width:780px;
  margin:0 auto 22px;
  background:#eef6ff;
  border:1px solid #dbeafe;
  border-left:5px solid var(--iso-blue);
  border-radius:var(--iso-radius);
  padding:18px 20px;
}

.iso42k-expect-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
}

.iso42k-expect-list{
  margin:0;
  padding-left:18px;
  color:#111827;
}

.iso42k-expect-list li{ margin:8px 0; }

.iso42k-form{
  max-width:780px;
  margin:0 auto;
}

.iso42k-label{
  display:block;
  margin:18px 0 8px;
  font-weight:800;
  color:var(--iso-text);
}

.iso42k-required{ color:var(--iso-red); }

.iso42k-input{
  width:100%;
  padding:14px 14px;
  font-size:16px;
  border:1px solid var(--iso-border);
  border-radius:12px;
  outline:none;
  background:#fff;
}

.iso42k-input:focus{
  border-color:#93c5fd;
  box-shadow:var(--iso-focus);
}

.iso42k-help{
  margin-top:6px;
  font-size:13px;
  color:var(--iso-muted);
}

.iso42k-muted{
  color:var(--iso-muted);
  font-size:14px;
}

.iso42k-center-note{
  text-align:center;
  margin-top:10px;
  font-size:13px;
  color:var(--iso-muted);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.iso42k-btn-primary,
.iso42k-btn-secondary{
  border:none;
  border-radius:14px;
  padding:14px 16px;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.iso42k-btn-primary{
  width:100%;
  background:var(--iso-green);
  color:#fff;
  margin-top:18px;
  box-shadow:0 8px 18px rgba(15,23,42,0.10);
}

.iso42k-btn-primary:hover{ background:var(--iso-green-dark); }
.iso42k-btn-primary:hover{ box-shadow:0 10px 22px rgba(15,23,42,0.14); }
.iso42k-btn-primary:active{ transform:translateY(1px); box-shadow:0 6px 14px rgba(15,23,42,0.12); }

.iso42k-btn-primary:disabled{
  background:#d1d5db;
  cursor:not-allowed;
}

.iso42k-btn-secondary{
  background:#ffffff;
  color:#111827;
  border:1px solid var(--iso-border);
  box-shadow:0 6px 14px rgba(15,23,42,0.06);
}

.iso42k-btn-secondary:hover{
  background:#fbfbfc;
  border-color:#cbd5e1;
  box-shadow:0 10px 20px rgba(15,23,42,0.10);
}

.iso42k-btn-secondary:active{
  transform:translateY(1px);
  box-shadow:0 6px 14px rgba(15,23,42,0.08);
}

.iso42k-btn-link{
  display:inline-block;
  text-decoration:none;
  text-align:center;
}

/* ---------------------------------------------------------
   Errors (ARIA friendly)
--------------------------------------------------------- */

.iso42k-error{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
  font-size:14px;
}

/* Hide empty error containers to avoid layout gaps */
.iso42k-error:empty{
  display:none;
}

/* ---------------------------------------------------------
   Questions Step (Progress starts here)
--------------------------------------------------------- */

.iso42k-progress-wrap{
  position:sticky;
  top:0;
  z-index:30;
  background:#fff;
  border-bottom:1px solid var(--iso-border-soft);
  padding:12px 14px;
}

.iso42k-progress-top{
  max-width:960px;
  margin:0 auto 6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:900;
  color:#111827;
}

.iso42k-progress-note{
  max-width:960px;
  margin:6px auto 0;
  font-size:12px;
  color:var(--iso-muted);
}

.iso42k-progress-bar{
  max-width:960px;
  margin:0 auto;
  height:10px;
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}


.iso42k-progress-fill{
  height:10px;
  width:0%;
  background:linear-gradient(90deg, #111827 0%, #2563eb 100%);
  transition:width .35s ease;
}


/* ---------------------------------------------------------
   Card + Question
--------------------------------------------------------- */

.iso42k-card{
  max-width:960px;
  margin:18px auto 40px;
  background:var(--iso-card);
  border:1px solid var(--iso-border-soft);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--iso-shadow);
  animation:isoFadeIn .22s ease;
}

@keyframes isoFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.iso42k-theme{
  font-size:12px;
  font-weight:900;
  color:#334155;
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:6px;
}

.iso42k-question{
  font-size:18px;
  font-weight:900;
  color:var(--iso-text);
  margin:0 0 16px 0;
  line-height:1.35;
}

.iso42k-options{
  display:grid;
  gap:12px;
}

.iso42k-option{
  width:100%;
  display:flex;
  gap:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--iso-border);
  background:#fff;
  cursor:pointer;
  text-align:left;
}

.iso42k-option:hover{
  background:#fbfbfc;
  border-color:#cbd5e1;
}

.iso42k-option.is-selected{
  border-color:#93c5fd;
  box-shadow:var(--iso-focus);
}

.iso42k-option-key{
  width:36px;
  height:36px;
  border-radius:12px;
  background:#0f172a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  flex:0 0 auto;
}

/* Give B and C distinctive colours (even before selection) */
.iso42k-option[data-answer="A"] .iso42k-option-key{ background:var(--iso-green); }
.iso42k-option[data-answer="B"] .iso42k-option-key{ background:var(--iso-amber); }
.iso42k-option[data-answer="C"] .iso42k-option-key{ background:var(--iso-red); }

/* When selected, deepen the key colour for stronger feedback */
.iso42k-option.is-selected[data-answer="A"] .iso42k-option-key{ background:var(--iso-green-dark); }
.iso42k-option.is-selected[data-answer="B"] .iso42k-option-key{ background:#d97706; }
.iso42k-option.is-selected[data-answer="C"] .iso42k-option-key{ background:#b91c1c; }

.iso42k-option-text{
  font-size:15px;
  color:#111827;
  line-height:1.35;
}

.iso42k-option-hint{
  font-size:12px;
  color:var(--iso-muted);
  margin-top:3px;
}

/* Color semantics for A/B/C when selected */
.iso42k-option.is-selected[data-answer="A"]{
  border-color:var(--iso-green);
  box-shadow:0 0 0 4px rgba(111,177,92,0.22);
}

.iso42k-option.is-selected[data-answer="B"]{
  border-color:var(--iso-amber);
  box-shadow:0 0 0 4px rgba(245,158,11,0.18);
}

.iso42k-option.is-selected[data-answer="C"]{
  border-color:var(--iso-red);
  box-shadow:0 0 0 4px rgba(239,68,68,0.18);
}

/* ---------------------------------------------------------
   Nav + hints
--------------------------------------------------------- */

.iso42k-nav{
  display:flex;
  gap:12px;
  margin-top:18px;
}

.iso42k-nav .iso42k-btn-secondary,
.iso42k-nav .iso42k-btn-primary{
  width:100%;
  margin-top:0;
}

/* Enhance Previous / Next buttons */
.iso42k-btn-primary,
.iso42k-btn-secondary{
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  box-shadow:0 8px 18px rgba(15,23,42,0.08);
}

.iso42k-btn-secondary{
  border:1px solid var(--iso-border);
  box-shadow:0 6px 14px rgba(15,23,42,0.06);
}

.iso42k-btn-secondary:hover{
  background:#f4f6fa;
  border-color:#cbd5e1;
  transform:translateY(-1px);
}

.iso42k-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(15,23,42,0.12);
}

.iso42k-btn-primary:active,
.iso42k-btn-secondary:active{
  transform:translateY(0);
}

.iso42k-nav-note{
  margin-top:10px;
  font-size:12px;
  color:var(--iso-muted);
}

.iso42k-hint{
  margin-top:10px;
  font-size:13px;
  color:var(--iso-muted);
}

/* ---------------------------------------------------------
   Preview / Results cards
--------------------------------------------------------- */

.iso42k-section-title{
  margin:0 0 10px 0;
  font-size:20px;
  font-weight:900;
}

.iso42k-preview{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.iso42k-preview-score{
  background:var(--iso-card-muted);
  border:1px solid var(--iso-border-soft);
  border-radius:16px;
  padding:16px;
}

.iso42k-preview-label{
  font-size:12px;
  color:var(--iso-muted);
  margin-bottom:6px;
  font-weight:800;
}

.iso42k-preview-value{
  font-size:24px;
  font-weight:900;
  color:var(--iso-text);
}

/* Responsive */
@media (max-width:768px){
  .iso42k-title{ font-size:34px; }
  .iso42k-preview{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------
   Enhanced UX additions
--------------------------------------------------------- */

.iso42k-badge{
  display:inline-block;
  margin:0 auto 14px;
  padding:6px 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#1e40af;
  background:#eff6ff;
  border:1px solid #bfdbfe;
  border-radius:999px;
}

.iso42k-hero .iso42k-badge{
  display:block;
  width:fit-content;
  margin-left:auto;
  margin-right:auto;
}

.iso42k-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  justify-content:center;
  margin:16px 0 4px;
}

.iso42k-trust-item{
  font-size:13px;
  color:var(--iso-muted);
  font-weight:600;
}

.iso42k-select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:40px;
  cursor:pointer;
}

.iso42k-divider{
  height:1px;
  background:var(--iso-border-soft);
  margin:22px 0;
}

/* Maturity badges */
.iso42k-maturity-badge{
  display:inline-block;
  padding:8px 16px;
  border-radius:999px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.3px;
}

.iso42k-maturity-badge[data-level="initial"],
.iso42k-maturity-badge[data-level="Initial"]{
  background:#fef2f2;
  color:#991b1b;
  border:1px solid #fecaca;
}

.iso42k-maturity-badge[data-level="managed"],
.iso42k-maturity-badge[data-level="Managed"]{
  background:#fffbeb;
  color:#92400e;
  border:1px solid #fde68a;
}

.iso42k-maturity-badge[data-level="established"],
.iso42k-maturity-badge[data-level="Established"]{
  background:#eff6ff;
  color:#1e40af;
  border:1px solid #bfdbfe;
}

.iso42k-maturity-badge[data-level="optimised"],
.iso42k-maturity-badge[data-level="Optimised"]{
  background:#ecfdf5;
  color:#065f46;
  border:1px solid #a7f3d0;
}

.iso42k-maturity-explain{
  margin-top:12px;
  padding:14px 16px;
  background:var(--iso-card-muted);
  border-radius:12px;
  border-left:4px solid var(--iso-blue);
  font-size:14px;
  color:#334155;
  line-height:1.5;
}

.iso42k-preview-enhanced .iso42k-preview-score{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.iso42k-preview-percent{
  font-size:36px !important;
  background:linear-gradient(135deg,#111827,#2563eb);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Question scale legend */
.iso42k-scale-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin-bottom:14px;
  padding:10px 12px;
  background:var(--iso-card-muted);
  border-radius:10px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.iso42k-scale-a{ color:var(--iso-green-dark); }
.iso42k-scale-b{ color:#b45309; }
.iso42k-scale-c{ color:#b91c1c; }

/* Keyboard hints */
.iso42k-hint kbd{
  display:inline-block;
  padding:2px 6px;
  font-size:11px;
  font-family:inherit;
  background:#f1f5f9;
  border:1px solid #cbd5e1;
  border-radius:4px;
  box-shadow:0 1px 0 #cbd5e1;
}

/* Option focus for keyboard nav */
.iso42k-option:focus-visible{
  outline:none;
  border-color:#93c5fd;
  box-shadow:var(--iso-focus);
}

/* Loading pulse on question card */
.iso42k-question-card.is-loading .iso42k-question{
  color:var(--iso-muted);
  animation:isoPulse 1.2s ease-in-out infinite;
}

@keyframes isoPulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}

/* Results page */
.iso42k-results-header{
  text-align:center;
  margin-bottom:24px;
}

.iso42k-results-icon{
  width:56px;
  height:56px;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:900;
  color:#fff;
  background:var(--iso-green);
  border-radius:50%;
  box-shadow:0 8px 20px rgba(111,177,92,.35);
}

.iso42k-results-subtitle{
  margin:0;
}

.iso42k-score-hero{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:24px;
  align-items:center;
  padding:20px;
  background:var(--iso-card-muted);
  border-radius:16px;
  border:1px solid var(--iso-border-soft);
  margin-bottom:20px;
}

.iso42k-score-ring{
  position:relative;
  width:120px;
  height:120px;
  flex-shrink:0;
}

.iso42k-score-ring-svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.iso42k-score-ring-bg{
  fill:none;
  stroke:#e5e7eb;
  stroke-width:8;
}

.iso42k-score-ring-fill{
  fill:none;
  stroke:url(#isoScoreGradient);
  stroke:#2563eb;
  stroke-width:8;
  stroke-linecap:round;
  stroke-dasharray:327;
  stroke-dashoffset:327;
  transition:stroke-dashoffset .6s ease, stroke .3s ease;
}

.iso42k-score-ring-value{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.iso42k-score-number{
  font-size:28px;
  font-weight:900;
  color:var(--iso-text);
}

.iso42k-score-details .iso42k-preview-label{
  margin-bottom:8px;
}

/* Status banners */
.iso42k-status-area{
  margin-top:4px;
}

.iso42k-status{
  padding:20px 22px;
  border-radius:14px;
  text-align:center;
}

.iso42k-status-title{
  font-size:18px;
  font-weight:800;
  margin:0 0 8px;
}

.iso42k-status-text{
  margin:0;
  font-size:15px;
  line-height:1.45;
}

.iso42k-status-email{
  margin:8px 0 0;
  font-size:16px;
  font-weight:700;
}

.iso42k-status-meta{
  margin:12px 0 0;
  font-size:13px;
}

.iso42k-status-checks{
  margin:10px 0 0;
  font-size:14px;
}

.iso42k-status-processing{
  background:#fffbeb;
  border:1px solid #fcd34d;
  color:#78350f;
}

.iso42k-status-processing .iso42k-status-title{ color:#92400e; }

.iso42k-status-success{
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#047857;
}

.iso42k-status-success .iso42k-status-title{ color:#065f46; }
.iso42k-status-success .iso42k-status-email{ color:#065f46; }

.iso42k-status-warning{
  background:#fffbeb;
  border:1px solid #fcd34d;
  color:#78350f;
}

.iso42k-status-warning .iso42k-status-title{ color:#92400e; }

.iso42k-status-icon{
  font-size:40px;
  margin-bottom:10px;
  line-height:1;
}

/* Spinner */
.iso42k-spinner{
  width:32px;
  height:32px;
  margin:18px auto 0;
  border:3px solid #fcd34d;
  border-top-color:#92400e;
  border-radius:50%;
  animation:isoSpin .8s linear infinite;
}

@keyframes isoSpin{
  to{ transform:rotate(360deg); }
}

/* PDF download block */
.iso42k-pdf-section{
  margin-top:20px;
}

.iso42k-pdf-card{
  padding:24px;
  background:linear-gradient(135deg,#1e40af,#3b82f6);
  border-radius:14px;
  text-align:center;
  color:#fff;
}

.iso42k-pdf-card h3{
  margin:0 0 8px;
  font-size:18px;
  color:#fff;
}

.iso42k-pdf-card p{
  margin:0 0 18px;
  font-size:14px;
  color:#e0e7ff;
}

.iso42k-btn-pdf{
  display:inline-block;
  background:#fff !important;
  color:#1e40af !important;
  width:auto !important;
  padding:14px 28px !important;
  margin-top:0 !important;
  text-decoration:none;
}

/* CTA block */
.iso42k-cta-block{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--iso-border-soft);
  text-align:center;
}

.iso42k-cta-text{
  margin:0 0 14px;
  color:var(--iso-muted);
  font-size:15px;
}

.iso42k-btn-cta{
  width:auto !important;
  display:inline-block !important;
  padding:14px 32px !important;
  margin-top:0 !important;
}

.iso42k-restart-wrap{
  margin-top:20px;
  text-align:center;
}

.iso42k-restart-wrap .iso42k-btn-secondary{
  width:auto;
  padding:12px 24px;
}

/* Step transition */
.iso42k-step.is-active{
  animation:isoStepIn .28s ease;
}

@keyframes isoStepIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Error hidden state */
.iso42k-error[hidden]{
  display:none !important;
}

/* Mobile enhancements */
@media (max-width:768px){
  .iso42k-hero{ padding:32px 16px 24px; }
  .iso42k-card{ margin:12px 12px 32px; padding:18px; }
  .iso42k-progress-wrap{ padding:10px 12px; }
  .iso42k-scale-legend{ flex-direction:column; gap:6px; }
  .iso42k-score-hero{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .iso42k-nav{
    flex-direction:column-reverse;
  }
  .iso42k-trust-row{
    flex-direction:column;
    align-items:center;
    gap:6px;
  }
}

@media (prefers-reduced-motion:reduce){
  .iso42k-step.is-active,
  .iso42k-card,
  .iso42k-progress-fill,
  .iso42k-score-ring-fill{
    animation:none;
    transition:none;
  }
}

/* ---------------------------------------------------------
   UX/UI polish
--------------------------------------------------------- */

/* Invalid field state (inline validation) */
.iso42k-input.is-invalid,
.iso42k-select.is-invalid{
  border-color:var(--iso-red);
  box-shadow:0 0 0 4px rgba(239,68,68,0.15);
}

/* Option: hover lift + clearer selected feedback */
.iso42k-option{
  position:relative;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

.iso42k-option:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,23,42,0.07);
}

.iso42k-option .iso42k-option-text{
  padding-right:30px; /* room for the checkmark */
}

.iso42k-option.is-selected::after{
  content:"✓";
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:13px;
  font-weight:900;
  color:#fff;
  background:var(--iso-green);
}

.iso42k-option.is-selected[data-answer="A"]::after{ background:var(--iso-green-dark); }
.iso42k-option.is-selected[data-answer="B"]::after{ background:#d97706; }
.iso42k-option.is-selected[data-answer="C"]::after{ background:#b91c1c; }

.iso42k-option.is-selected .iso42k-option-key{
  transform:scale(1.06);
  transition:transform .12s ease;
}

/* Animated shimmer along the progress fill */
.iso42k-progress-fill{
  position:relative;
  overflow:hidden;
}

.iso42k-progress-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform:translateX(-100%);
  animation:isoShimmer 2.2s ease-in-out infinite;
}

@keyframes isoShimmer{
  to{ transform:translateX(100%); }
}

/* Clear keyboard focus rings */
.iso42k-btn-primary:focus-visible,
.iso42k-btn-secondary:focus-visible,
.iso42k-btn-pdf:focus-visible,
.iso42k-btn-cta:focus-visible{
  outline:none;
  box-shadow:var(--iso-focus);
}

.iso42k-title:focus,
.iso42k-section-title:focus,
.iso42k-question:focus,
.iso42k-results-icon:focus{
  outline:none;
}

/* Results checkmark pop-in */
.iso42k-results-icon{
  animation:isoPop .45s cubic-bezier(.18,.89,.32,1.28);
}

@keyframes isoPop{
  0%{ transform:scale(0); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .iso42k-progress-fill::after,
  .iso42k-results-icon,
  .iso42k-option,
  .iso42k-option.is-selected .iso42k-option-key{
    animation:none;
    transition:none;
  }
}