/* =====================================================================
   PRISM Assessment v2 · Shared stylesheet
   =====================================================================
   Mobile-first responsive, print-friendly, accessible WCAG 2.1 AA.
   CSS variables for easy theming. No frameworks.
   ===================================================================== */

:root {
  /* PRISM palette (Brett's selection, locked 2026-04-29).
     teal  is the primary action colour
     coral is the accent and the strongest negative feedback
     navy  is body text and structural hierarchy
     aqua  is positive feedback and the active rating cell
     pale  is soft surfaces and progress-bar tracks */
  --teal: #2A7B9F;
  --teal-700: #1F5F7C;
  --coral: #E97862;
  --coral-50: #FBE8E2;
  --coral-700: #B8492F;
  --navy: #103D5E;
  --navy-50: #DDE5EC;
  --aqua: #3FAFA1;
  --aqua-50: #DEF2EE;
  --aqua-700: #2A8073;
  --pale: #CDD9DD;
  --pale-50: #ECF1F3;

  /* Surfaces and structure */
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --ink: var(--navy);
  --muted: #5A6A75;
  --line: #DDE4E8;

  /* Action accent (primary buttons, links, progress fill) */
  --accent: var(--teal);
  --accent-soft: var(--pale-50);

  /* Sliding-scale bar uses pale-blue and pale-coral so the two halves
     hint at the dimension polarity without being primary brand colours */
  --bar-left: var(--pale);
  --bar-right: var(--coral-50);
  --handle: var(--navy);
  --handle-ring: var(--pale);

  /* Likert chip default versus selected */
  --chip-bg: var(--pale-50);
  --chip-bg-active: var(--teal);
  --chip-fg: var(--navy);
  --chip-fg-active: #FFFFFF;

  /* Reflection slider (1-5) selected state uses aqua so it reads as
     positive engagement, distinct from the teal of the primary CTA */
  --reflection-active: var(--aqua);
  --reflection-active-text: #FFFFFF;

  /* Scenario feedback states. Aqua for Best, amber for Less effective,
     coral for Least effective. Amber is intentionally the only colour
     outside the five palette swatches; needed to give the three states
     visual differentiation */
  --feedback-best-bg: var(--aqua-50);
  --feedback-best-border: var(--aqua-700);
  --feedback-best-ink: #0d4a40;
  --feedback-less-bg: #FAEFD9;
  --feedback-less-border: #C47A18;
  --feedback-less-ink: #5a3a06;
  --feedback-least-bg: var(--coral-50);
  --feedback-least-border: var(--coral);
  --feedback-least-ink: var(--coral-700);

  /* Layout tokens */
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(16,61,94,.04), 0 6px 18px rgba(16,61,94,.06);

  /* System messaging (errors and warnings, separate from scenario feedback) */
  --error: #B8492F;
  --error-bg: var(--coral-50);
  --error-border: var(--coral);
  --warning-bg: #FAEFD9;
  --warning-border: #C47A18;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* ===== Header ===== */
header.brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

header.brand h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: .02em;
  font-weight: 600;
}

header.brand .v {
  color: var(--muted);
  font-size: 12px;
}

/* ===== Cards & Sections ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
  margin-bottom: 20px;
}

h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
}

h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
}

h4 {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
}

p {
  margin: 0 0 12px;
  color: var(--ink);
}

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

/* ===== Forms ===== */
label.field {
  display: block;
  margin: 14px 0 6px;
  font-size: 14px;
  color: var(--muted);
}

input[type="email"],
input[type="text"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: var(--ink);
}

input[type="email"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

textarea {
  resize: vertical;
  min-height: 100px;
}

/* ===== Buttons ===== */
button {
  font: inherit;
  cursor: pointer;
}

button.primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 11px 18px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .15s;
}

button.primary:hover:not(:disabled) {
  background: #151f2a;
}

button.primary:disabled {
  opacity: .45;
  cursor: not-allowed;
}

button.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 16px;
  transition: background .15s, border-color .15s;
}

button.ghost:hover {
  background: var(--chip-bg);
  border-color: var(--accent);
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}

/* ===== Checkboxes & Radios ===== */
.checkbox, .radio-group {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0;
  font-size: 14px;
}

.checkbox input[type="checkbox"],
.radio-group input[type="radio"] {
  margin-top: 3px;
  cursor: pointer;
}

/* ===== Progress Bar ===== */
.progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.progress-row .pct {
  font-size: 13px;
  color: var(--muted);
  min-width: 60px;
  text-align: right;
}

.progress {
  flex: 1;
  height: 6px;
  background: #eceae5;
  border-radius: 3px;
  overflow: hidden;
}

.progress .pf {
  height: 100%;
  background: var(--accent);
  transition: width .3s ease;
  width: 0%;
}

/* ===== Questions & Likert ===== */
.q {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.q:first-child {
  border-top: 0;
  padding-top: 8px;
}

.q .num {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.q .stem {
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 16px;
  color: var(--ink);
}

.likert {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.likert label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  line-height: 1.25;
  border: 1px solid transparent;
  user-select: none;
  transition: background .15s, color .15s, border-color .15s;
}

.likert label:hover {
  border-color: var(--accent-soft);
}

.likert input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.likert .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px #c9cfd6;
}

.likert input:checked + .dot {
  background: var(--accent);
  box-shadow: inset 0 0 0 3px #fff, 0 0 0 1px var(--accent);
}

.likert label.is-checked {
  background: var(--chip-bg-active);
  color: var(--chip-fg-active);
}

.likert label.is-checked .dot {
  background: #fff;
  box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 1px #fff;
}

/* ===== Results: Dimension Bars ===== */
.dim-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.dim-row:first-child {
  border-top: 0;
}

.dim-name {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .01em;
}

.slider-block {
  position: relative;
  padding-top: 34px;
  padding-bottom: 24px;
}

.slider-block .moderate {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .02em;
}

.slider-block .track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, var(--bar-left) 0, var(--bar-left) 50%, var(--bar-right) 50%, var(--bar-right) 100%);
}

.slider-block .handle {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--handle);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px var(--handle-ring), 0 1px 3px rgba(0,0,0,.18);
  transform: translate(-50%, -50%);
  transition: left .35s ease;
}

.slider-block .bubble {
  position: absolute;
  bottom: calc(100% - 18px);
  transform: translateX(-50%);
  background: #e7eef8;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 10px;
  white-space: nowrap;
  transition: left .35s ease;
}

.slider-block .bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: #e7eef8;
  transform: translateX(-50%) rotate(45deg);
}

.slider-block .pole-l, .slider-block .pole-r {
  position: absolute;
  top: calc(100% - 18px);
  font-size: 13px;
  color: var(--muted);
}

.slider-block .pole-l {
  left: 0;
}

.slider-block .pole-r {
  right: 0;
}

.dim-narrative {
  padding: 14px 0 6px;
  border-top: 1px dashed var(--line);
  margin-top: 8px;
}

.dim-narrative h4 {
  margin: 0 0 4px;
}

.dim-narrative p {
  font-size: 14px;
  margin: 0;
  color: var(--ink);
}

/* ===== Archetypes ===== */
.archetype {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #faf8f3;
  margin-top: 14px;
}

.archetype .name {
  font-size: 24px;
  font-weight: 600;
  color: var(--accent);
}

.archetype .sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
}

.archetype .why {
  font-size: 14px;
}

.archetype .why p {
  margin: 6px 0;
}

.archetype .why strong {
  color: var(--accent);
}

.badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 6px;
}

/* ===== Notices & Alerts ===== */
.notice {
  font-size: 12px;
  color: var(--muted);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 16px;
}

.notice.error {
  background: var(--error-bg);
  border-color: var(--error-border);
  color: #7a1f1f;
}

/* ===== Governance Text Sections ===== */
.governance-section {
  margin: 28px 0 0 0;
  padding: 20px;
  background: #fafaf9;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.governance-section h3 {
  margin-top: 0;
}

.governance-section ol, .governance-section ul {
  margin: 12px 0;
  padding-left: 24px;
}

.governance-section li {
  margin: 8px 0;
  color: var(--ink);
}

.disclosure-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 12px 0;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}

.disclosure-toggle:hover {
  background: #e3e8f0;
}

.disclosure-toggle summary {
  font-weight: 600;
  color: var(--accent);
}

.disclosure-content {
  margin-top: 12px;
  padding: 12px;
  background: white;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .wrap {
    padding: 20px 16px 60px;
  }

  header.brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .card {
    padding: 20px;
    margin-bottom: 16px;
  }

  .likert {
    grid-template-columns: repeat(5, 1fr);
  }

  .likert label {
    font-size: 11px;
    padding: 10px 4px;
  }

  .dim-row {
    grid-template-columns: 100px 1fr;
    gap: 10px;
  }

  .dim-name {
    font-size: 15px;
  }

  .actions {
    flex-direction: column;
  }

  .actions button {
    width: 100%;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 14px;
  }
}

/* ===== Print ===== */
@media print {
  body {
    background: #fff;
  }

  .wrap {
    max-width: 100%;
    padding: 0;
  }

  .card {
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0 0 16px;
  }

  header.brand .v,
  .actions,
  .notice,
  #btn-print,
  #btn-save-later,
  .governance-section,
  .disclosure-toggle {
    display: none !important;
  }

  .archetype {
    background: #fff;
    border: 1px solid #ccc;
  }

  .slider-block .bubble {
    background: #fff;
    border: 1px solid #999;
    color: #000;
  }

  .slider-block .bubble::after {
    background: #fff;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
  }

  .slider-block .handle {
    background: #000;
    box-shadow: 0 0 0 1px #000;
  }

  .slider-block .track {
    background: linear-gradient(90deg, #e8e8e8 0, #e8e8e8 50%, #cfcfcf 50%, #cfcfcf 100%);
  }

  .dim-row {
    page-break-inside: avoid;
  }
}

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

a:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

button:focus, input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Utility ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hidden {
  display: none !important;
}