/* The Predictive Purpose self-assessment (/self-assessment.html). Loaded with "sheets": ["shared", "self-assessment"].
   Without script every dimension shows in turn as a plain form; with it, .sa-on shows one step at a time. */
.sa-hero, .sa-dark { background: var(--ink); color: var(--paper); }
.sa-hero .hero { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.sa-hero em { font-style: italic; color: var(--gold); }
.sa-lead { color: var(--on-dark); margin-top: 1.5rem; }
.sa { background: var(--paper); color: var(--ink); }
.sa a { color: inherit; }

/* Progress: one row of steps, sticky so the totals stay in view. */
.sa-progress { position: sticky; top: 0; z-index: 5; display: flex; align-items: stretch; gap: 1rem; background: var(--ink); color: var(--paper); padding: 0 var(--gutter); --focus: var(--paper); }
.sa-steps { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); flex: 1; max-width: 1192px; margin: 0 auto; }
.sa-step { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-height: 60px; padding: 0.5rem 0.5rem 0.5rem 0; color: var(--on-dark); text-decoration: none; border-bottom: 4px solid transparent; }
.sa-step:hover { color: var(--gold); }
.sa-step[aria-current="step"] { color: var(--paper); border-bottom-color: var(--gold); }
.sa-step.is-done .sa-step-n::after { content: " ✓"; color: var(--gold); }
.sa-step-n { font-family: var(--serif); font-weight: 300; font-size: 1.375rem; line-height: 1; }
.sa-step-t { font-size: 0.875rem; font-weight: 600; line-height: 1.2; }
.sa-step-v { font-size: 0.875rem; }
.sa-total { display: flex; align-items: center; gap: 0.375rem; white-space: nowrap; font-family: var(--serif); font-weight: 300; font-size: 1.5rem; }
.sa-total-k { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; }

/* Panels */
.sa-panel { width: 100%; max-width: 1320px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 5rem) var(--gutter); border-bottom: 1px solid var(--stone); }
.sa-on .sa-panel { border-bottom: 0; }
.sa-on .sa-panel:not(.is-on) { display: none; }
.sa-head { display: grid; gap: 0.5rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.sa-group { font-weight: 600; color: var(--ink-mid); }
.sa-h { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 52rem; }
.sa-h:focus { outline: none; }
.sa-h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; margin-bottom: 1rem; }
.sa-sub { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; }
.sa-sub-n { color: var(--navy); }
.sa-p { max-width: 44rem; margin-bottom: 1.25rem; }
.sa-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }

/* Scoring key: three numbered tiles. */
.sa-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 1.5rem 0; background: var(--stone); border: 1px solid var(--stone); max-width: 44rem; }
.sa-key-i { display: grid; gap: 0.25rem; padding: 1rem; background: var(--paper); }
.sa-key-n { font-family: var(--serif); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--navy); }
.sa-call { max-width: 44rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; background: var(--gold); font-weight: 600; }

/* Details */
.sa-details { padding: clamp(1.5rem, 3vw, 2rem); background: var(--paper-mid); }
.sa-fields { display: grid; gap: 1rem; }
.sa-field { display: grid; gap: 0.375rem; }
.sa-field label, .sa-note-l { font-weight: 600; }
.sa-field input, .sa-field textarea, .sa-note-i { width: 100%; min-height: 48px; padding: 0.625rem 0.75rem; background: #fff; color: var(--ink); border: 1px solid var(--ink-mid); border-radius: 0; font: inherit; }
.sa-field textarea { min-height: 7rem; resize: vertical; }
.sa-priv { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--ink-mid); }
.sa-resume { margin-top: 1rem; font-weight: 600; }
.sa-pager { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3rem); }

/* Statements: the score is a set of three large radio tiles. */
.sa-sts { display: grid; gap: 0; border-top: 1px solid var(--ink); }
.sa-st { padding: clamp(1.25rem, 3vw, 1.75rem) 0; border-bottom: 1px solid var(--stone); }
.sa-st fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.sa-st-t { display: block; float: left; width: 100%; max-width: 52rem; padding: 0; margin-bottom: 1rem; font-family: var(--serif); font-weight: 300; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.25; }
.sa-st-k { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-mid); margin-right: 0.25rem; }
.sa-opts { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; max-width: 52rem; }
.sa-opt { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 56px; padding: 0.5rem 0.875rem; border: 1px solid var(--ink-mid); background: #fff; cursor: pointer; }
.sa-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sa-opt-n { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--ink); border-radius: 50%; font-weight: 600; }
.sa-opt-t { font-weight: 600; line-height: 1.2; }
.sa-opt:hover { border-color: var(--ink); background: var(--paper-mid); }
.sa-opt:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sa-opt:has(input:checked) .sa-opt-n { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.sa-opt:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.sa-note { margin-top: 0.75rem; max-width: 52rem; }
.sa-note summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.sa-note[open] summary { margin-bottom: 0.5rem; }
.sa-note-l { display: block; margin-bottom: 0.375rem; }
.sa-note.has-note summary::after { content: " (noted)"; font-weight: 400; text-decoration: none; }

/* Results */
.sa-done { font-weight: 600; }
.sa-on .sa-nojs { display: none; }
.sa-recap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0 0 2rem; padding: 1rem 0; border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.sa-recap dt { font-size: 0.875rem; font-weight: 600; color: var(--ink-mid); }
.sa-recap dd { margin: 0; }
.sa-prof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.sa-radar { margin: 0; width: 100%; max-width: 30rem; justify-self: center; }
.sa-radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.sa-r-ring { fill: none; stroke: var(--stone); stroke-width: 1; }
.sa-r-ring-out { stroke: var(--ink-mid); }
.sa-r-axis { stroke: var(--stone); stroke-width: 1; }
.sa-r-area { fill: rgba(232,183,90,0.45); stroke: var(--gold-deep); stroke-width: 2; stroke-linejoin: round; }
.sa-r-dot { fill: var(--gold-deep); }
.sa-r-dot-low { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.sa-r-num { font: 600 14px var(--sans); fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.sa-r-arc { fill: none; stroke-width: 6; }
.sa-r-arc-0 { stroke: var(--gold); } .sa-r-arc-1 { stroke: var(--navy); } .sa-r-arc-2 { stroke: var(--ink); }
.sa-bars { display: grid; gap: 1.25rem; }
.sa-bg-t { font-weight: 600; margin-bottom: 0.5rem; padding-left: 0.75rem; border-left: 6px solid var(--gold); }
.sa-bg:nth-child(2) .sa-bg-t { border-left-color: var(--navy); }
.sa-bg:nth-child(3) .sa-bg-t { border-left-color: var(--ink); }
.sa-bar { display: grid; grid-template-columns: minmax(9rem, 1.3fr) minmax(0, 2fr) 4.5rem; gap: 0.75rem; align-items: center; min-height: 36px; }
.sa-bar-t { position: relative; height: 12px; background: var(--paper-mid); border: 1px solid var(--stone); }
.sa-bar-f { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold-deep); }
.sa-bar.is-low .sa-bar-l { font-weight: 600; }
.sa-bar.is-low .sa-bar-f { background: var(--ink); }
.sa-bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.sa-score { background: var(--gold); color: var(--ink); padding: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 1.5rem; }
.sa-score-n { font-family: var(--serif); font-weight: 300; font-size: clamp(4rem, 12vw, 8rem); line-height: 0.95; letter-spacing: -0.03em; }
.sa-score-of { font-size: 0.4em; letter-spacing: 0; }
.sa-scale { position: relative; height: 14px; margin: 1.5rem 0 1.25rem; background: linear-gradient(to right, rgba(26,23,20,0.12) 0 33.75%, rgba(26,23,20,0.28) 33.75% 67.5%, rgba(26,23,20,0.5) 67.5% 100%); }
.sa-scale-m { position: absolute; top: -6px; bottom: -6px; left: 0; width: 4px; margin-left: -2px; background: var(--ink); }
.sa-low { max-width: 44rem; font-weight: 600; }
.sa-bands { display: grid; gap: 0; margin-bottom: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--stone); }
.sa-band { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--stone); color: var(--ink-mid); }
.sa-band-r { font-family: var(--serif); font-weight: 300; font-size: 1.375rem; line-height: 1.1; }
.sa-band.is-on { color: var(--ink); }
.sa-band.is-on .sa-band-t { font-weight: 600; }
.sa-band.is-on .sa-band-r { color: var(--navy); }
.sa-band.is-on { padding-left: 1rem; box-shadow: inset 6px 0 0 var(--gold-deep); background: var(--paper-mid); }
.sa-band-y { display: block; font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.sa-read { margin-bottom: 2rem; }
.sa-notes { margin-bottom: 2rem; }
.sa-notes li { padding: 0.75rem 0; border-bottom: 1px solid var(--stone); max-width: 52rem; }
.sa-notes .sa-n-k { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ink-mid); }
.sa-notes .sa-n-n { font-style: italic; }
.sa-gen { max-width: 52rem; }
.sa-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2rem; }
.sa-reset { min-height: 44px; padding: 0 0.25rem; background: transparent; color: var(--ink); border: 0; font: 600 1rem var(--sans); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.sa-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; flex-basis: 100%; padding: 1rem; background: var(--paper-mid); }
.sa-confirm-t { flex-basis: 100%; font-weight: 600; }
.sa-more .lead { margin-top: 1.25rem; color: var(--on-dark); }
.sa-more a { color: var(--gold); }

@media (max-width: 1100px) {
  .sa-step-t { display: none; }
  .sa-step { align-items: center; padding-right: 0; text-align: center; }
}
@media (max-width: 900px) {
  .sa-cols, .sa-prof { grid-template-columns: 1fr; }
  .sa-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sa-progress { flex-direction: column; gap: 0; padding-top: 0.25rem; }
  .sa-steps { grid-template-columns: repeat(10, minmax(0, 1fr)); width: 100%; }
  .sa-step { min-height: 44px; }
  .sa-step-n { font-size: 1rem; }
  .sa-step-v { display: none; }
  .sa-step.is-done .sa-step-n::after { content: ""; }
  .sa-step.is-done { border-bottom-color: var(--on-dark-rule); }
  .sa-step[aria-current="step"] { border-bottom-color: var(--gold); }
  .sa-total { justify-content: flex-end; font-size: 1.125rem; padding: 0.25rem 0 0.375rem; }
  .sa-opts, .sa-key { grid-template-columns: 1fr; }
  .sa-bar { grid-template-columns: minmax(0, 1fr) 4rem; }
  .sa-bar-t { grid-column: 1 / -1; grid-row: 2; }
  .sa-band { grid-template-columns: 1fr; gap: 0.25rem; }
  .sa-recap { grid-template-columns: 1fr; }
}
@media (forced-colors: active) {
  .sa-opt:has(input:checked) { outline: 3px solid Highlight; }
  .sa-bar-f, .sa-scale-m { forced-color-adjust: none; background: CanvasText; }
}

/* Print: the results only, in black on white. */
@media print {
  @page { size: A4; margin: 14mm; }
  .sa-results, .sa-results * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body, .sa { background: #fff !important; color: #000 !important; }
  .nv, .site-foot, .ann, .skip, .sa-hero, .sa-progress, .sa-start, .sa-dim, .sa-acts, .sa-gen label, .sa-nojs, .dark, footer, header { display: none !important; }
  .sa-on .sa-results, .sa-results { display: block !important; padding: 0 !important; }
  .sa-prof { grid-template-columns: 0.9fr 1.1fr; break-inside: avoid; }
  .sa-score { background: #fff !important; border: 1px solid #000; break-inside: avoid; }
  .sa-score-n { font-size: 3.5rem; }
  .sa-h { font-size: 1.75rem; }
  .sa-results::before { content: "Predictive Purpose: Self-Assessment Diagnostic · neilcatton.com/self-assessment.html"; display: block; margin-bottom: 0.5rem; font-weight: 600; }
  .sa-gen textarea { border: 0; padding: 0; min-height: 0; resize: none; }
  .sa-gen textarea:placeholder-shown { display: none; }
  .sa-bands, .sa-read, .sa-notes { break-inside: avoid-page; }
}