/* Course pages on top of /style.css (Joy's design system).
   Reading measure about 65 characters, 18px body on phones and 19px up, cream page, white cards. */

:root {
  --measure: 42rem;
  --focus: var(--bright-coral);
  --ink-soft: #5f574d; /* greige darkened a touch: 6.4:1 on cream */
  --card-radius: 20px;
}

html {
  font-size: 18px;
  scroll-padding-top: 24px;
}
@media (min-width: 640px) {
  html { font-size: 19px; }
}

body {
  background: var(--cream);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- focus: coral ring with a dark hairline so it reads on cream and on white ---- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--black);
  border-radius: 6px;
}
.btn:focus-visible,
.choice-card:focus-within,
input:focus-visible,
textarea:focus-visible { border-radius: 100px; }
textarea:focus-visible, input[type="checkbox"]:focus-visible, .choice-card:focus-within { border-radius: 12px; }
.choice-card:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--black);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--black);
  color: var(--white);
  padding: 10px 16px;
  border-radius: 100px;
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- nav and footer ---- */
.course-nav {
  width: 100%;
  margin: 0;
  max-width: none;
  background: var(--white);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 20px;
}
.course-nav .nav-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--measure);
  margin: 0 auto;
}
.course-nav .nav-links a { font-size: 0.85rem; }
.course-nav .nav-links a:not(.nav-cta) { display: inline; }
.course-nav .nav-cta { padding: 8px 16px; }

.course-footer { margin-top: auto; font-size: 0.8rem; }
.course-footer .footer-inner { max-width: var(--measure); }
.course-footer .footer-bottom { border-top: 0; padding-top: 0; }
.course-footer a { text-decoration: underline; }

/* ---- main column ---- */
.course-main {
  width: 100%;
  max-width: calc(var(--measure) + 32px);
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.course-main:focus { outline: none; }

.page-head { margin: 8px 0 28px; }
.page-head h1 {
  font-size: clamp(30px, 5.5vw, 44px);
  margin-bottom: 14px;
}
.page-head .lead { font-size: 1.05rem; color: var(--ink-soft); }
.page-head .eyebrow { margin-bottom: 10px; }

h2 { font-size: clamp(23px, 3.6vw, 30px); }
h3 { font-size: clamp(19px, 2.6vw, 23px); }

.hint { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }
.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 100px;
  background: var(--burnt-cream);
  color: var(--black);
  vertical-align: middle;
}
.tag-placeholder { background: var(--burnt-cream); }
.tag-recommended { background: var(--soft-green); margin-bottom: 8px; }
.tag-passed { background: var(--soft-green); }

/* ---- cards and notices ---- */
.card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 26px 24px;
  margin: 24px 0;
}
@media (max-width: 480px) { .card { padding: 20px 16px; } }
.card h2 { margin-bottom: 10px; }
.card > p { margin-bottom: 12px; }
.card > p:last-child { margin-bottom: 0; }

.notice {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 5px solid var(--burnt-cream);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 0.92rem;
  line-height: 1.5;
}
.notice-placeholder { border-left-color: var(--bright-coral); }
.notice-rules { border-left-color: var(--bright-lilac); }

/* Static preview only (COURSE_STATIC_PREVIEW=1): the draft line on every page, and no sign-in,
   assessment or certificate control, since no API answers behind these pages. */
.draft-banner { background: var(--white); border-bottom: 3px solid var(--bright-coral); padding: 10px 20px; font-size: 0.92rem; line-height: 1.5; text-align: center; }
.draft-banner p { margin: 0; }
body[data-static-preview] #account,
body[data-static-preview] [data-modules-hint],
body[data-static-preview] [data-progress-status],
body[data-static-preview] [data-assess-signed-out],
body[data-static-preview] [data-assess-start],
body[data-static-preview] [data-assess-form],
body[data-static-preview] [data-cert-loading],
body[data-static-preview] [data-cert-error],
body[data-static-preview] [data-cert-signed-out],
body[data-static-preview] [data-cert-form-wrap],
body[data-static-preview] [data-cert-issued],
body[data-static-preview] [data-continue-link],
body[data-static-preview] [data-continue-code] { display: none !important; }

.form-error {
  color: #b3261e; /* 5.9:1 on white */
  font-weight: 500;
  font-size: 0.92rem;
  margin: 8px 0;
}
.form-error:empty { display: none; }

/* ---- hero on the hub ---- */
.course-hero {
  margin: 8px 0 0;
  padding: 44px 24px 40px;
  border-radius: 24px;
  text-align: left;
}
.course-hero .hero-content { margin: 0; max-width: none; }
.course-hero h1 { font-size: clamp(30px, 5.5vw, 44px); margin-bottom: 14px; }
.course-hero .subhead { margin: 0; max-width: none; font-size: 1rem; }
@media (max-width: 480px) { .course-hero { padding: 32px 18px 30px; border-radius: 18px; } }

/* ---- forms ---- */
.field { margin: 0 0 18px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.field .hint { margin: 0 0 8px; }
.field input[type="text"],
.field input[type="email"],
.field input[type="url"],
.field textarea {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--white);
  border: 1.5px solid var(--dark-greige);
  border-radius: 14px;
  padding: 12px 16px;
}
.field textarea { min-height: 6.5em; resize: vertical; line-height: 1.5; }
.field input:read-only { background: var(--light-gray); }
.field-check { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start; }
.field-check input { width: 22px; height: 22px; margin-top: 4px; accent-color: var(--bright-coral); }
.field-check label { margin: 0; font-weight: 500; }
.field-check .hint { grid-column: 2; margin: 0; }

.btn {
  font-size: 1rem;
  padding: 13px 28px;
  color: var(--black);
}
.btn-primary { color: var(--black); } /* black on coral: 6.3:1; white on coral is 2.8:1 */
.btn-secondary { color: var(--black); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.btn + .btn-link { margin-left: 14px; }
.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--bright-coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
}
form .btn { margin-top: 6px; }
@media (max-width: 480px) {
  .btn { display: block; width: 100%; text-align: center; }
  .btn + .btn-link { margin: 14px 0 0; display: inline-block; }
}

/* text links inside content */
.course-main a:not(.btn):not(.module-title):not(.logo) {
  text-decoration: underline;
  text-decoration-color: var(--bright-coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---- hub: account and module list ---- */
.signed-in-line { margin: 0 0 12px; }
.account [data-cta-wrap] { margin: 16px 0 0; }

.modules { margin-top: 36px; }
.modules h2 { margin-bottom: 12px; }
.module-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  overflow: hidden;
}
.module-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.module-row:last-child { border-bottom: 0; }
.module-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pastel-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}
.module-row-main { min-width: 0; }
.module-title { font-weight: 600; display: inline; }
.module-title:hover { text-decoration: underline; text-decoration-color: var(--bright-coral); text-decoration-thickness: 2px; }
.module-meta { display: block; font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; }
.module-state {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.module-state:empty { display: none; }
.module-state.is-passed { color: #23662a; } /* 6.4:1 on white */
.module-state.is-progress { color: var(--text-primary); }
@media (max-width: 480px) {
  .module-row { grid-template-columns: 36px 1fr; }
  .module-num { width: 32px; height: 32px; font-size: 0.78rem; }
  .module-state { grid-column: 2; }
}

.certificate-card { margin-top: 28px; }

/* ---- module page ---- */
.progress-strip {
  margin: 4px 0 20px;
}
.progress-strip-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.progress-strip-bar {
  height: 6px;
  border-radius: 100px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.progress-strip-bar span {
  display: block;
  height: 100%;
  background: var(--soft-green);
  border-radius: 100px;
}

.module-head .notice { margin: 0 0 20px; }
.outcomes-label { font-weight: 600; margin-top: 18px; }
.outcomes { margin: 8px 0 0 22px; }
.outcomes li { margin-top: 6px; }

.block { margin: 36px 0; }
.block h2 { margin-bottom: 12px; }

.prose > * + * { margin-top: 14px; }
.prose p { line-height: 1.6; }
.prose ul, .prose ol { padding-left: 24px; }
.prose li { margin-top: 6px; }
.prose li > p { margin: 0; }
.prose h3 { margin-top: 22px; }
.prose code { font-size: 0.9em; background: var(--light-gray); padding: 1px 5px; border-radius: 4px; }

/* sources */
.source {
  margin: 28px 0;
  padding: 6px 0 6px 20px;
  border-left: 4px solid var(--soft-green);
}
.source-joy { border-left-color: var(--bright-lilac); }
.source-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.source-quote { font-size: 1rem; line-height: 1.6; }
.source-framework .source-quote { font-style: italic; }
.source-framework .source-quote::before { content: "\201C"; }
.source-framework .source-quote::after { content: "\201D"; }
.source-cite { margin-top: 8px; font-size: 0.85rem; color: var(--ink-soft); }

/* scenario */
.block-scenario form { margin-top: 18px; }
fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.choice-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 0 10px;
  cursor: pointer;
  line-height: 1.5;
}
.choice-card:hover { border-color: var(--dark-greige); }
.choice-card:has(input:checked) { border-color: var(--black); background: var(--pastel-green); }
.choice-card input {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  accent-color: var(--bright-coral);
}
.choice-card input:focus-visible { outline: none; box-shadow: none; }
.scenario-feedback-item {
  margin-top: 20px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 5px solid var(--burnt-cream);
  border-radius: 14px;
  padding: 16px 18px;
}
.scenario-feedback-item.is-recommended { border-left-color: var(--soft-green); }

/* worksheet */
.block-worksheet { background: var(--white); border: 1px solid var(--border-soft); border-radius: var(--card-radius); padding: 24px; }
@media (max-width: 480px) { .block-worksheet { padding: 20px 16px; } }
.block-worksheet form { margin-top: 18px; }

/* audio */
.block-audio audio { width: 100%; margin-top: 8px; }
.block-audio figcaption { font-weight: 600; }
.audio-note { font-size: 0.92rem; color: var(--ink-soft); }
.transcript { margin-top: 12px; }
.transcript summary { font-weight: 600; cursor: pointer; }

/* assessment */
.block-assessment {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--card-radius);
  padding: 24px;
}
@media (max-width: 480px) { .block-assessment { padding: 20px 16px; } }
.block-assessment .notice { margin: 12px 0 16px; }
.question { margin: 24px 0; }
.question legend { font-weight: 600; line-height: 1.45; }
.assess-result { margin-top: 20px; }
.assess-result:empty { display: none; }
.score-line { font-size: 1.15rem; font-weight: 700; }
.result-item {
  margin-top: 14px;
  padding: 12px 16px;
  border-left: 5px solid var(--burnt-cream);
  background: var(--cream);
  border-radius: 12px;
}
.result-item.is-correct { border-left-color: var(--soft-green); }
.result-item p + p { margin-top: 6px; }
.result-item .result-label { font-weight: 600; }
.result-actions { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* foot navigation */
.module-foot {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  align-items: flex-start;
}
@media (min-width: 640px) {
  .module-foot { flex-direction: row; justify-content: space-between; align-items: center; }
}
.foot-back { font-weight: 500; }
.module-foot .btn { text-align: center; }

/* ---- certificate page ---- */
.cert-required { list-style: none; padding: 0; margin: 12px 0 0; }
.cert-required li { padding: 10px 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.cert-required li:last-child { border-bottom: 0; }
.preview-label { font-weight: 600; margin-top: 6px; }
.cert-preview {
  background: var(--cream);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 8px 0 16px;
  font-style: italic;
  line-height: 1.5;
}
.cert-statement { font-size: 1.05rem; line-height: 1.55; margin: 8px 0 18px; }
.cert-facts { display: grid; gap: 10px; margin-bottom: 20px; }
.cert-facts div { display: grid; grid-template-columns: minmax(120px, 0.4fr) 1fr; gap: 12px; }
.cert-facts dt { font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); }
.cert-facts code { font-size: 0.95em; letter-spacing: 0.04em; }
.cert-actions { margin: 0 0 22px; }
.copy-row { display: flex; gap: 10px; flex-wrap: wrap; }
.copy-row input { flex: 1 1 220px; min-width: 0; }
.copy-row .btn { flex: 0 0 auto; margin: 0; }
.copy-row + .hint { margin-top: 12px; }
@media (max-width: 480px) { .copy-row .btn { width: 100%; } }
.cert-issued h3 { margin: 22px 0 10px; }
.record { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.record th, .record td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.record th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.disclaimer { font-size: 0.85rem; color: var(--ink-soft); margin-top: 24px; line-height: 1.55; }

/* ---- share your achievement (certificate page, after issuance) ---- */
.share { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-soft); }
.share h3 { margin: 0 0 10px; }
.share h4 { font-size: 1rem; margin: 22px 0 10px; }
.share > p { margin-bottom: 12px; }
.share-formats { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.share-formats legend { margin-bottom: 8px; width: 100%; }
.share-format {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--border-soft);
  border-radius: 100px;
  padding: 8px 16px 8px 12px;
  cursor: pointer;
  font-weight: 500;
  line-height: 1.3;
}
.share-format:hover { border-color: var(--dark-greige); }
.share-format:has(input:checked) { border-color: var(--black); background: var(--pastel-green); }
.share-format:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--black); }
.share-format input { width: 20px; height: 20px; margin: 0; accent-color: var(--bright-coral); }
.share-format input:focus-visible { outline: none; box-shadow: none; }
.share-format small { display: block; font-size: 0.72rem; font-weight: 400; color: var(--ink-soft); }
.share-photo-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.share-photo input[type="file"] { font: inherit; font-size: 0.92rem; max-width: 100%; }
.share-preview {
  margin: 8px 0 18px;
  padding: 16px;
  background: var(--light-gray);
  border-radius: 14px;
  display: flex;
  justify-content: center;
}
.share-preview canvas {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 1px solid var(--border-soft);
  box-shadow: 0 2px 10px rgba(26, 26, 26, 0.08);
}
.share-preview.is-feed canvas, .share-preview.is-square canvas { max-width: 340px; }
.share-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 8px; }
.share-actions .btn { margin: 0; }
.share [hidden] { display: none !important; } /* .btn sets display, which would otherwise beat the hidden attribute */
.share-captions { list-style: none; padding: 0; margin: 0; }
.share-caption {
  background: var(--cream);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 10px;
  line-height: 1.5;
}
.share-caption p { margin: 0 0 6px; }
.share-caption-tags,
.share-caption-link { font-size: 0.85rem; color: var(--ink-soft); }
.share-caption-link { overflow-wrap: anywhere; }
.share-slot { margin: 10px 0 0; }
.share-colleague { margin: 24px 0 0; }
.share-colleague-preview {
  background: var(--cream);
  border-radius: 12px;
  padding: 12px 16px;
  margin: 8px 0 16px;
  white-space: pre-wrap;
}
.share-caption .btn { margin: 8px 0 0; font-size: 0.92rem; padding: 10px 20px; }
@media (max-width: 480px) { .share-caption .btn { width: auto; display: inline-block; } }

/* ---- index ---- */
.course-card h2 { margin-bottom: 10px; }
.course-card h2 a { text-decoration: none; }
.course-card .btn { margin-top: 8px; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover { transition: none; transform: none; }
}