/* Readiness self-check. Builds on the tokens and components in site.css
   (.button, .field, .form-card, .privacy-note, .check); only the stepper,
   options and result pieces are defined here. */

.sc { max-width: var(--measure); margin-block: 8px 48px; }
.sc h2 { margin: 0 0 8px; color: var(--ink-strong); font-size: var(--h2); font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.sc h3 { margin: 32px 0 12px; color: var(--ink-strong); font-size: var(--h3); font-weight: 500; line-height: 1.3; }
.sc h2:focus, .sc-confirm:focus, .sc-error-summary:focus { outline: none; }
.sc h2:focus-visible, .sc-confirm:focus-visible, .sc-error-summary:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }

.sc-lede { margin: 0 0 24px; color: var(--body); font-size: var(--text-lede); line-height: 1.5; }
.sc-small { margin: 0; color: var(--body); font-size: var(--text-sm); line-height: 1.5; }
.sc-loading, .sc-error { color: var(--body); }
.sc-error { color: var(--danger); }

/* If the module never runs (blocked, failed to load, very old browser), the
   static shell stays. After a short delay, show a hint; an optional
   <p class="sc-fallback"> in the shell (with a link) is preferred and is
   revealed the same way. The script adds .sc to the root, which cancels both. */
#self-check:not(.sc) .sc-fallback { visibility: hidden; animation: sc-reveal 0s linear 6s forwards; }
#self-check:not(.sc):not(:has(.sc-fallback))::after {
  content: "If the self-check doesn't appear, please refresh the page, or use the early-access link below.";
  display: block;
  margin-top: 16px;
  color: var(--body);
  visibility: hidden;
  animation: sc-reveal 0s linear 6s forwards;
}
@keyframes sc-reveal { to { visibility: visible; } }

/* Progress */
.sc-progress { margin-bottom: 20px; }
.sc-progress__label { margin: 0 0 6px; color: var(--slate); font-size: 13px; font-weight: 700; }
.sc-progress__track { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.sc-progress__bar { height: 100%; border-radius: inherit; background: var(--blue); transition: width 200ms ease; }

/* Questions */
.sc-form { display: grid; gap: 20px; }
.sc-q {
  margin: 0;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-panel);
  padding: 16px 18px 18px;
  background: var(--form-bg);
}
.sc-q--invalid { border-color: var(--danger); }
.sc-q legend { float: left; width: 100%; margin: 0 0 6px; padding: 0; color: var(--ink-strong); font-size: 18px; font-weight: 500; line-height: 1.4; }
.sc-q legend + * { clear: both; }
.sc-help { margin: 0 0 10px; color: var(--body); font-size: 15px; line-height: 1.5; }
.sc-options { display: grid; gap: 8px; clear: both; }
.sc-option {
  display: flex;
  min-height: 44px;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--control-border);
  border-radius: 12px;
  padding: 11px 14px;
  background: var(--white);
  color: var(--ink-strong);
  font-size: 16px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sc-option:hover { border-color: var(--secondary-border-hover); }
.sc-option:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.sc-option:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }
.sc-option input { width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--blue); }
.sc-option input:focus-visible { outline: none; }

.sc-field-error { margin: 0 0 8px; color: var(--danger); font-size: 15px; font-weight: 500; }
.sc-error-summary {
  margin: 0 0 20px;
  border: 2px solid var(--danger);
  border-radius: var(--radius-panel);
  padding: 14px 18px;
  background: var(--white);
}
.sc-error-summary p { margin: 0 0 6px; color: var(--ink-strong); font-weight: 700; }
.sc-error-summary ul { margin: 0; padding-left: 20px; }
.sc-error-summary a { color: var(--danger); }

.sc-notes textarea {
  width: 100%;
  min-height: 112px;
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-strong);
  font: 500 16px/1.5 var(--font-sans);
  resize: vertical;
}
.sc-notes textarea:focus-visible { outline: none; }
.sc .privacy-note { margin: 0; }

/* Actions */
.sc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 0; }
.sc-actions--nav { justify-content: space-between; margin-top: 4px; }
.sc-back::after, .sc-plain::after { display: none; }

/* Prefill */
.sc-prefill { margin: 20px 0 0; border: 1px solid var(--line); border-radius: var(--radius-panel); padding: 16px 18px; background: var(--hero-bg); }
.sc-prefill h3 { margin: 0 0 10px; font-size: 17px; }
.sc-prefill dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 10px; font-size: 15px; }
.sc-prefill dt { color: var(--slate); font-weight: 700; }
.sc-prefill dd { margin: 0; color: var(--ink-strong); overflow-wrap: anywhere; }
.sc-prefill a, .sc a:not(.button) { color: var(--blue); }

/* Result */
.sc-disclaimer { margin: 0 0 8px; border-left: 3px solid var(--line-faq); padding: 4px 0 4px 14px; color: var(--body); font-size: 15px; }
.sc-areas { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--white);
}
.sc-area__label { flex: 1 1 220px; color: var(--ink-strong); font-weight: 500; }
.sc-area__note { flex-basis: 100%; }

.sc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.sc-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sc-status--ready { background: #e8f6ee; color: #136c3a; }
.sc-status--some_gaps { background: #fff8ec; color: #7a4a00; }
.sc-status--at_risk { background: #fdecea; color: var(--danger); }
.sc-status--not_applicable { background: var(--panel); color: var(--slate); }

.sc-gaps { display: grid; gap: 12px; margin: 0; padding-left: 24px; }
.sc-gap { padding-left: 4px; }
.sc-gap p { margin: 0 0 4px; }
.sc-gap__title { color: var(--ink-strong); font-weight: 500; }
.sc-gap__meta, .sc-gap__refs { color: var(--body); font-size: 15px; }

.sc .form-card { margin: 32px 0; }
.sc .form-card h3 { margin-top: 0; }
.sc-consent { grid-column: 1 / -1; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.sc-consent input { margin-top: 3px; }
.sc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.sc-pilot { margin-top: 8px; border-radius: var(--radius-card); padding: 28px; background: linear-gradient(180deg, var(--hero-bg) 0%, var(--panel) 100%); box-shadow: inset 0 0 0 1px var(--line); }
.sc-pilot h3 { margin-top: 0; }
.sc-pilot p { margin: 0 0 18px; color: var(--body); }

@media (max-width: 599px) {
  .sc-q { padding: 14px; }
  .sc-actions .button, .sc-pilot .button { width: 100%; }
  .sc-actions--nav { flex-direction: column-reverse; align-items: stretch; }
  .sc-pilot { padding: 20px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-progress__bar, .sc-option { transition: none; }
}

/* The widget sits inside .prose on the built page. Undo the prose rules that
   would otherwise win on specificity (lists, paragraph margins, link colour on
   buttons, blue h2). */
.prose .sc :is(.sc-areas) { margin: 0; padding: 0; }
.prose .sc .sc-area { margin: 0; padding: 12px 14px; }
.prose .sc .sc-gaps { margin: 0; padding-left: 24px; }
.prose .sc .sc-gap { margin: 0; padding-left: 4px; }
.prose .sc .sc-gap p { margin: 0 0 4px; }
.prose .sc h2 { margin: 0 0 8px; color: var(--ink-strong); }
.prose .sc h3 { margin: 32px 0 12px; }
.prose .sc .form-card h3, .prose .sc .sc-pilot h3 { margin-top: 0; }
.prose .sc .sc-prefill h3 { margin: 0 0 10px; }
.prose .sc .sc-lede { margin: 0 0 24px; }
.prose .sc :is(.sc-help, .sc-field-error, .sc-small, .sc-progress__label, .form-help, .sc-error-summary p) { margin-bottom: 0; }
.prose .sc .sc-help { margin-bottom: 10px; }
.prose .sc .sc-field-error { margin-bottom: 8px; }
.prose .sc .sc-progress__label { margin-bottom: 6px; }
.prose .sc .sc-error-summary ul { margin: 0; padding-left: 20px; }
.prose .sc .sc-error-summary li { margin-bottom: 4px; }
.prose .sc .sc-disclaimer { margin: 0 0 8px; }
.prose .sc .sc-pilot p { margin: 0 0 18px; }
.prose .sc a.button { text-decoration: none; }
.prose .sc a.button--primary { color: var(--white); }
.prose .sc a.button--secondary { color: var(--secondary-ink); }

/* ---------- Report, review and not-found pages (/r/<id>, /api/review) ----------
   Served by the API with a strict CSP (style-src 'self'), so every style lives here. */
.rp { padding-block: 40px 72px; }
.rp-prose { max-width: var(--measure); }
.prose .rp-title { margin: 0 0 8px; color: var(--ink-strong); font-size: clamp(30px, 4vw, 42px); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.prose .rp-meta { margin: 0 0 24px; color: var(--body); font-size: 15px; }
.prose .rp-note { margin: 0 0 24px; border-left: 3px solid var(--line-faq); padding: 4px 0 4px 14px; color: var(--body); font-size: 15px; }
.rp-review { margin: 0 0 24px; border: 2px solid #f1c27d; border-radius: var(--radius-panel); padding: 16px 18px; background: #fff8ec; color: #5c3a06; }
.prose .rp-review p { margin: 0 0 8px; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-inline { display: inline; margin: 0; }
.rp-areas, .rp-plan { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.prose :is(.rp-areas, .rp-plan) :is(th, td) { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; }
.rp-plan { font-size: 15px; }
.rp-plan td:first-child { white-space: nowrap; }
.prose .rp-refs { margin: 4px 0 16px; color: var(--body); font-size: 14px; }
.rp-cta { margin-top: 40px; border-radius: var(--radius-card); padding: 28px; background: var(--panel); }
.prose .rp-cta h2 { margin-top: 0; color: var(--ink-strong); }
.prose .rp a.button { text-decoration: none; }
.prose .rp a.button--primary { color: var(--white); }
.rp-footer { margin: 0; font-size: 14px; }
.rp-form-row { display: block; margin: 0 0 16px; }
.rp-form-row input { width: 100%; }
@media (max-width: 599px) {
  .rp { padding-top: 24px; }
  .rp-plan td:first-child { white-space: normal; }
  .rp-cta { padding: 20px 16px; }
}