/* =====================================================================
   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;

  /* ---------------------------------------------------------------------
     Design tokens (documented 2026-05-29). Use these instead of ad-hoc
     px values so spacing, type and interaction stay consistent across the
     landing page, hub, course and certificate.
     --------------------------------------------------------------------- */
  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  /* Type scale */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  /* Interaction */
  --focus-ring: 3px solid var(--teal);
  --focus-offset: 2px;
  --tap-min: 44px;            /* WCAG 2.5.5 minimum target size */
  --transition: .15s ease;
}

* {
  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, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", "Meiryo", 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;
}

/* Broader keyboard focus ring for custom interactive elements that aren't
   native buttons/links (flip cards, option chips, disclosure toggles, the
   language picker, etc.). :focus-visible keeps it keyboard-only. */
[role="button"]:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
.disclosure-toggle:focus-visible,
.likert label:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ===== Skeleton loading placeholders =====
   Use .skeleton on a block (give it a height) or .skeleton-text on a line.
   Replaces bare spinners so a slow Supabase fetch reads as "loading", not
   "broken". Honours reduced-motion (the shimmer is disabled below). */
.skeleton, .skeleton-text {
  position: relative;
  overflow: hidden;
  background: var(--pale-50);
  border-radius: var(--radius);
}
.skeleton-text {
  height: .8em;
  border-radius: 4px;
  margin: 6px 0;
}
.skeleton::after, .skeleton-text::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: prism-skeleton 1.25s infinite;
}
@keyframes prism-skeleton { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after, .skeleton-text::after { animation: none; }
}

/* Friendly empty state */
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 28px 16px;
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* ===== 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;
}

/* =====================================================================
   Japanese / CJK type rules (added 28 May 2026)
   ---------------------------------------------------------------------
   `text-transform: uppercase` has no visual effect on kana/kanji, and
   `letter-spacing` larger than ~0.02em looks unnaturally wide on CJK.
   Both are still applied broadly to eyebrows / chips / module labels
   because Latin titlecase needs them. Reset both for :lang(ja) so the
   same components read naturally in Japanese.
   ===================================================================== */
:lang(ja) .eyebrow,
:lang(ja) .meta,
:lang(ja) .chip,
:lang(ja) .step-meta,
:lang(ja) .ar-hero-eyebrow,
:lang(ja) .ar-eyebrow,
:lang(ja) .mt-eyebrow,
:lang(ja) .module-label,
:lang(ja) .module-title,
:lang(ja) .cs-section-tag,
:lang(ja) .cs-section-title,
:lang(ja) .summary-archetype-card .sac-tag,
:lang(ja) .lang-code {
  letter-spacing: 0;
  text-transform: none;
}