/* AI Enablement program — web-specific styles.
   Layered on top of the vendored design system (tokens, brand.css, site.css).
   Everything here uses the shared tokens. The only additions to the palette are the
   two grading states below, which the marketing system has no equivalent for. */
:root {
  --grade-ok: #2E7D4F;  --grade-ok-fill: #EEF7F0;
  --grade-bad: #B23A3A; --grade-bad-fill: #FBEFEF; --grade-bad-soft: #F3B4B4;
}

/* ---------- Chrome ---------- */
.learn-nav .navlinks a.is-current { color: var(--royal-violet); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--royal-violet); color: #fff; padding: 8px 14px; border-radius: var(--radius-card); }
.skip-link:focus { left: 8px; text-decoration: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .progress-bar > span { transition: none; } }
.progress-pill {
  display: inline-flex; align-items: center; gap: 0; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--midnight-plum); background: var(--lavender-mist);
  border: 1px solid var(--lavender-deep); border-radius: 999px; padding: 6px 12px;
}
.progress-pill b { color: var(--royal-violet); }
@media (max-width: 860px) {
  .learn-nav .topnav__inner { flex-wrap: wrap; height: auto; row-gap: 6px; padding: 12px 20px; }
  .learn-nav .navlinks { width: 100%; gap: 6px 16px; flex-wrap: wrap; }
  .learn-nav .navlinks a { display: inline-flex; font-size: 13px; white-space: nowrap; }
  .learn-nav .navlinks .progress-pill, .learn-nav .navlinks .nav-cta { margin-left: auto; padding: 5px 10px; font-size: 11px; }
}

/* ---------- Page band additions ---------- */
.page-band .crumb { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orchid-soft); }
.page-band .crumb a { color: var(--orchid-soft); }
.page-band .crumb a:hover { color: #fff; text-decoration: none; }
.page-band .meta { margin-top: 16px; font-size: 14px; color: var(--orchid-soft);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.page-band .chip { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; line-height: 1.3;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.page-band .chip__k { text-transform: uppercase; letter-spacing: 0.07em; font-size: 11px;
  font-weight: 700; color: var(--orchid-soft); }
.page-band .chip__v { color: #fff; }
/* A chip carries an author's sentence, so it has to be able to shrink and wrap.
   Without this a long audience or time value runs off the right edge on a phone. */
.page-band .chip { max-width: 100%; }
.page-band .chip__k, .page-band .chip__v { min-width: 0; overflow-wrap: anywhere; }
.page-band .chip__icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--orchid-soft); }
/* The time to complete is the one fact a learner looks for before starting, so it
   reads as a filled pill rather than one outline among several. */
.page-band .chip--time { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.34); }
.page-band .chip--time .chip__v { font-weight: 700; }
@media (max-width: 560px) {
  .page-band .chip__k { display: none; }
  .page-band .chip--time .chip__k { display: inline; }
}

/* ---------- Module body ---------- */
.page-body h2 { scroll-margin-top: 80px; }
.page-body h3 { scroll-margin-top: 80px; }
.page-body p { margin: 0 0 1em; }
.page-body p:last-child { margin-bottom: 0; }
.page-body ul { list-style: square; }
.page-body ul li::marker { color: var(--royal-violet); }
.page-body code, .quiz code { overflow-wrap: anywhere; }
.quiz code { font-family: var(--font-mono); background: var(--code-fill); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.92em; }
.page-body pre {
  background: var(--code-fill); border: 1px solid var(--hairline); border-radius: var(--radius-card);
  padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55;
  margin: 1.2em 0;
}
.page-body pre code { background: none; padding: 0; font-size: inherit; }
.page-body ul, .page-body ol { padding-left: 1.4em; margin: 0.6em 0 1em; }
.page-body li { margin: 0.3em 0; }
.page-body li > ul, .page-body li > ol { margin: 0.3em 0 0.4em; }
.page-body blockquote p { margin: 0; }
.page-body blockquote p + p, .page-body blockquote p + ul, .page-body blockquote p + ol { margin-top: 0.7em; }
.page-body blockquote table { margin: 0.8em 0 0; font-size: 14px; }
.page-body .tbl { overflow-x: auto; margin: 1.2em 0; }
.page-body .tbl table { margin: 0; }
.page-body img { max-width: 100%; }
.page-body .toc { background: var(--lavender-mist); border-radius: var(--radius-card); padding: 16px 20px; margin: 0 0 2em; font-size: 14px; }
.page-body .toc .eyebrow { margin-bottom: 8px; color: var(--royal-violet); }
.quiz .toc .eyebrow { color: var(--royal-violet); }
.page-body .toc ol { margin: 0; padding-left: 1.2em; }
.page-body .toc li { margin: 0.15em 0; }

/* ---------- Module footer nav ---------- */
.module-actions {
  max-width: 820px; margin: 0 auto; padding: 0 32px 24px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
}
.module-actions .complete { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mark-complete { cursor: pointer; }
.mark-complete.is-done { background: var(--midnight-plum); border-color: var(--midnight-plum); color: #fff; box-shadow: none; }
.mark-complete[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.gate-note { margin: 0; font-size: 13px; color: var(--slate); max-width: 46ch; }
.gate-note[hidden] { display: none; }
.module-nav {
  max-width: 820px; margin: 0 auto 60px; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.module-nav a {
  display: block; border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 16px 18px;
  color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.module-nav a:hover { box-shadow: 0 8px 24px rgba(76, 56, 200, 0.10); }
.module-nav a:hover { border-color: var(--royal-violet); text-decoration: none; }
.module-nav a.next { text-align: right; }
.module-nav .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--royal-violet); margin-bottom: 4px; }
.module-nav .ttl { font-weight: 700; color: var(--midnight-plum); }
@media (max-width: 640px) { .module-nav { grid-template-columns: 1fr; } .module-nav a.next { text-align: left; } }

/* ---------- Program home ---------- */
.tracks { max-width: var(--maxw); margin: 0 auto; padding: 48px 32px 72px; display: grid; gap: 28px; }
.track { border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #fff; padding: 26px 28px; }
.track__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.track__head h2 { font-size: 22px; color: var(--midnight-plum); }
.track__head .muted { font-size: 14px; }
.track__desc { color: var(--slate); font-size: 15px; margin: 0 0 16px; max-width: 70ch; }
.progress-bar { height: 8px; background: var(--lavender-deep); border-radius: 999px; overflow: hidden; margin: 0 0 18px; }
.progress-bar > span { display: block; height: 100%; width: 0; background: var(--gradient); border-radius: 999px; transition: width .3s ease; }
.module-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.module-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 6px; }
.module-list li:hover { background: var(--lavender-mist); }
.module-list .code { font-family: var(--font-mono); font-size: 12px; color: var(--slate); min-width: 3ch; }
.module-list .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-mid); flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.module-list li.is-done .tick { background: var(--royal-violet); border-color: var(--royal-violet); }
.module-list li.is-done .tick::after { content: "✓"; }
.module-list .mins { margin-left: auto; font-size: 12px; color: var(--slate); white-space: nowrap; }
.module-list .mins + .score { margin-left: 12px; min-width: 5ch; text-align: right; }
.module-list .score { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--slate); }
.module-list .score.pass { color: var(--royal-violet); }
.resume { max-width: var(--maxw); margin: 0 auto; padding: 36px 32px 0; }
.resume .card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }

/* ---------- Exams ---------- */
.quiz { max-width: 820px; margin: 0 auto; padding: 48px 32px 80px; }
.quiz .intro { color: var(--slate); font-size: 15px; margin: 0 0 24px; }
.quiz .intro .toc { margin-top: 20px; }
.quiz fieldset { border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 18px 20px 14px; margin: 0 0 16px; background: #fff; }
.quiz legend { font-weight: 700; color: var(--midnight-plum); padding: 0 6px; }
.quiz .q-text { margin: 0 0 12px; font-size: 16px; line-height: 1.6; }
.quiz .opt { display: flex; gap: 10px; align-items: flex-start; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.quiz .opt:hover { background: var(--lavender-mist); }
.quiz .opt input { margin-top: 4px; }
.quiz .section-head { margin: 32px 0 12px; }
.quiz .section-head h2 { font-size: 20px; color: var(--royal-violet); }
.quiz .section-head p { color: var(--slate); font-size: 14px; margin-top: 4px; }
.quiz .feedback { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 6px; font-size: 14.5px; line-height: 1.55; }
.quiz.is-graded .feedback { display: block; }
.quiz .feedback.ok { background: var(--grade-ok-fill); border-left: 4px solid var(--grade-ok); }
.quiz .feedback.bad { background: var(--grade-bad-fill); border-left: 4px solid var(--grade-bad); }
.quiz .feedback .lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); display: block; margin-bottom: 4px; }
.quiz .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.quiz .record-note { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; color: var(--slate); }
.quiz .result { display: none; margin-top: 24px; padding: 24px 26px; border-radius: var(--radius-card); background: var(--midnight-plum); color: #fff; }
.quiz.is-graded .result { display: block; }
.quiz .result .stat-num { font-size: 40px; font-weight: 700; color: #fff; }
.quiz .result .stat-label { color: var(--orchid-soft); }
.quiz .result .verdict { margin-top: 8px; font-weight: 700; }
.quiz .result .verdict.pass { color: var(--orchid-soft); }
.quiz .result .verdict.fail { color: var(--grade-bad-soft); }
.quiz .note { font-size: 13.5px; color: var(--orchid-soft); margin-top: 10px; }
.quiz .result:focus { outline: 3px solid var(--orchid); outline-offset: 2px; }
.quiz .result .unanswered { margin-top: 6px; font-size: 14px; color: var(--orchid-soft); }
.quiz fieldset.is-correct { border-color: var(--grade-ok); }
.quiz fieldset.is-wrong { border-color: var(--grade-bad); }

/* ---------- Catalog ---------- */
/* Four offerings at 1120px is 247px a card, narrower than the bullet lists
   inside them read at, so they pair up instead. */
.offers { max-width: var(--maxw); margin: 46px auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 0 32px; }
@media (max-width: 760px) { .offers { grid-template-columns: 1fr; } }
.offer { border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #fff; padding: 26px 26px 22px; display: flex; flex-direction: column; }
.offer--featured { border-color: rgba(91, 61, 245, 0.45); box-shadow: var(--shadow-card); }
.offer h3 { font-size: 22px; color: var(--midnight-plum); margin-bottom: 6px; }
.offer .tagline { color: var(--slate); font-size: 14.5px; min-height: 3.2em; margin-bottom: 14px; }
.offer .price { font-size: 34px; font-weight: 700; color: var(--royal-violet); line-height: 1; }
.offer .price small { font-size: 13px; font-weight: 400; color: var(--slate); margin-left: 6px; }
.offer .price-note { font-size: 12.5px; color: var(--slate); margin: 6px 0 16px; }
.offer .sq-list { margin: 0 0 18px; flex: 0 0 auto; }
.offer .sq-list li { font-size: 14.5px; }
.offer .btn { align-self: flex-start; margin-top: auto; }
.offer .best { font-size: 13px; color: var(--slate); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.offer .cert-badge { display: inline-flex; align-items: center; align-self: flex-start; margin: 8px 0 6px; padding: 5px 10px; border-radius: 999px; background: #E6F6EE; color: #1F8A5B; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.offer .cert-badge img { width: 13px; height: 15px; flex: none; margin-right: 6px; }
.credential { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 28px; }
.credential .sq-list { margin: 18px 0 0; }
.credential .note { font-size: 13.5px; color: var(--slate); margin-top: 16px; }
.credential figure { margin: 0; }
.credential img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); background: #fff; }
.credential figcaption { margin-top: 10px; font-size: 13px; color: var(--slate); text-align: center; }
.verify-form { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #fff; max-width: 520px; }
.verify-form label { display: block; font-weight: 600; color: var(--midnight-plum); font-size: 14px; margin-bottom: 8px; }
.verify-form .row { display: flex; gap: 10px; }
.verify-form input { flex: 1 1 auto; min-width: 0; padding: 11px 12px; border: 1px solid var(--hairline); border-radius: 8px; font: inherit; font-size: 14px; color: var(--midnight-plum); }
@media (max-width: 860px) { .credential { grid-template-columns: 1fr; } .verify-form .row { flex-direction: column; } }
.tier-table { max-width: 820px; margin: 0 auto; padding: 0 32px; overflow-x: auto; }
.tier-table th small { display: block; font-weight: 400; font-size: 12px; color: var(--slate); margin-top: 2px; }
/* The hero's photo slot carries an abstract brand panel (no program photography yet);
   below 900px site.css turns the slot into a static block, which is meaningless
   without an image, so the panel is dropped there. */
.hero__panel {
  background:
    radial-gradient(circle at 78% 30%, rgba(157,123,224,0.55) 0, rgba(157,123,224,0) 38%),
    radial-gradient(circle at 60% 85%, rgba(107,63,199,0.7) 0, rgba(107,63,199,0) 42%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px),
    linear-gradient(160deg, var(--royal-violet) 0%, var(--midnight-plum) 70%);
}
@media (max-width: 900px) { .hero__panel { display: none; } }
/* Phones: dense tables scroll inside .tbl instead of squeezing one word per line. */
@media (max-width: 720px) {
  .page-body .tbl table { min-width: 560px; }
  .page-body td, .page-body th { padding: 8px 10px; font-size: 14px; }
}
.tier-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tier-table th { background: var(--lavender-mist); color: var(--midnight-plum); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--hairline); }
.tier-table td { padding: 11px 14px; border-bottom: 1px solid var(--hairline); }
.tier-table td.num { font-weight: 700; color: var(--midnight-plum); }
.tier-table tbody tr:nth-child(even) td { background: var(--lavender-mist); }
.tier-table .foot { font-size: 13px; color: var(--slate); margin-top: 10px; }
.cards { display: grid; gap: 22px; margin-top: 46px; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .cards-3, .cards-2 { grid-template-columns: 1fr; } }
.cards .card h3 { font-size: 20px; color: var(--midnight-plum); margin: 0 0 10px; }
.cards .card p { color: var(--ink); font-size: 15px; line-height: 1.55; }
.cards .card .numeral { display: block; margin-bottom: 8px; }
.cards .card .card__note { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--royal-violet); }
.section .lead { max-width: 70ch; }
.preview-banner { background: var(--lavender-mist); border-bottom: 1px solid var(--lavender-deep); color: var(--midnight-plum); font-size: 13px; text-align: center; padding: 8px 16px; }

/* ---- Seat-aware lists and the sign-out link (learn.js) ---- */
.module-list li.is-locked, li.is-locked { display: none; }
.is-locked-link { color: var(--slate); }
.track__note { margin-top: 10px; }
.learn-nav .navlinks .nav-signout { color: var(--slate); font-weight: 600; }
.learn-nav .navlinks .nav-signout:hover { color: var(--royal-violet); }

/* ---- Signed-in greeting in the top nav ---- */
.learn-nav .navlinks .nav-welcome { color: var(--slate); font-weight: 400; font-size: 13px; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .learn-nav .navlinks .nav-welcome { display: none; } }

/* .btn sets its own display, which beats the browser's rule for [hidden];
   without this the Buy button and its mailto fallback would both show. */
[hidden] { display: none !important; }

/* ---- Checkout ------------------------------------------------------------
   Revealed by checkout.js once the API is configured; hidden markup
   otherwise, so a page served without it looks exactly as it did. */
.checkout { border: 1px solid var(--hairline); border-radius: var(--radius-card); background: #fff; padding: 30px; }
/* The learner's way home: the dashboard link reads as the primary place, not one link among several. */
.learn-nav .navlinks .nav-home { font-weight: 600; }
.checkout-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; margin: 8px 0 22px; }
@media (max-width: 700px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout label { display: block; font-size: 13px; font-weight: 700; color: var(--midnight-plum); letter-spacing: 0.02em; }
.checkout input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-weight: 400;
  color: var(--ink); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius);
}
.checkout input:focus { outline: 2px solid var(--royal-violet); outline-offset: 1px; border-color: var(--royal-violet); }
.checkout label small { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 400; color: var(--slate); }
.checkout-code { margin-bottom: 22px; max-width: 420px; }
.checkout-code__row { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.checkout-code__row input { margin-top: 0; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono, monospace); }
.checkout-code__row .btn { flex: none; }
.checkout-note { font-size: 12.5px; color: var(--slate); margin: 8px 0 0; }
.checkout-lines { width: 100%; border-collapse: collapse; margin: 4px 0 18px; }
.checkout-lines td { padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; vertical-align: top; }
.checkout-lines td small { display: block; font-size: 12.5px; color: var(--slate); margin-top: 2px; }
.checkout-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.checkout-lines .checkout-discount td { color: var(--royal-violet); }
.checkout-lines .checkout-total td { font-weight: 700; font-size: 19px; color: var(--midnight-plum); border-bottom: 0; }
.checkout-message { margin: 0 0 14px; font-size: 14px; }
.checkout-message--error { color: var(--danger, #B42318); }
.checkout-message--ok { color: var(--ok, #1F7A4D); font-size: 16px; }