/* ActiveProspect Training Portal — application styles.
   Built on the ActiveProspect Design System tokens (fig-tokens.css).
   Unitless FLOAT tokens are multiplied by 1px via calc() where lengths are needed. */

html, body { margin: 0; height: 100%; }
a { color: var(--sky-700); text-decoration: none; }
a:hover { color: var(--sky-800); text-decoration: underline; }

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-100, #f2f4f6);
  font-family: var(--font-sans);
  color: var(--navy-950);
}
.app__body { display: flex; flex: 1; min-height: 0; }
.app__main { flex: 1; min-width: 0; overflow-y: auto; padding: 32px 40px 64px; }

/* ---------- Top navigation ---------- */

.ap-topnav {
  height: 64px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--navigation-top-paddingx, 24) * 1px);
  background: var(--navy-950);
}
.ap-topnav__logo { display: inline-flex; align-items: center; gap: 12px; }
.ap-topnav__logo:hover { text-decoration: none; }
.ap-topnav__logo img { height: 20px; display: block; }
.ap-topnav__product {
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, .25);
  font: 600 13px/1 var(--font-sans);
  letter-spacing: .02em;
  color: var(--navy-400, #96a1ad);
}
.ap-topnav__account { display: inline-flex; align-items: center; gap: 14px; }
.ap-topnav__flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: calc(var(--button-border-radius, 6) * 1px);
  background: none;
  cursor: pointer;
  font: 600 12px/1 var(--font-sans);
  color: var(--navy-400, #96a1ad);
}
.ap-topnav__flag:hover { border-color: rgba(255, 255, 255, .6); color: #fff; }
.ap-topnav__flag i { font-size: 15px; }
.ap-topnav__flag.is-flagged { color: var(--amber-400, #fbbf24); border-color: var(--amber-400, #fbbf24); }

.ap-avatar {
  width: calc(var(--navigation-topaccount-icon-size, 30) * 1px);
  height: calc(var(--navigation-topaccount-icon-size, 30) * 1px);
  border-radius: 50%;
  background: var(--sky-700);
  color: #fff;
  font: 700 12px/1 var(--font-sans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

/* ---------- Side navigation ---------- */

.ap-sidenav {
  width: 236px;
  flex-shrink: 0;
  background: var(--content-background);
  border-right: 1px solid var(--content-border-color);
  overflow-y: auto;
  padding: 12px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ap-sidenav__section { display: flex; flex-direction: column; gap: calc(var(--navigation-list-gap) * 1px); }
.ap-sidenav__label {
  padding: calc(var(--navigation-submenu-label-padding-y) * 1px) calc(var(--navigation-submenu-label-padding-x) * 1px);
  font: 700 10px/1.4 var(--font-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--navigation-submenu-label-color);
}
.ap-sidenav__item {
  display: flex;
  align-items: center;
  gap: calc(var(--navigation-item-gap) * 1px);
  padding: calc(var(--navigation-item-padding-y) * 1px) calc(var(--navigation-item-padding-x) * 1px);
  border: 0;
  border-radius: calc(var(--navigation-item-border-radius) * 1px);
  background: transparent;
  color: var(--navigation-item-color);
  font: 400 14px/20px var(--font-sans);
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.ap-sidenav__item i { font-size: 17px; color: var(--navigation-item-icon-color); }
.ap-sidenav__item:hover { background: var(--navigation-item-focus-background); color: var(--navigation-item-focus-color); }
.ap-sidenav__item:hover i { color: var(--navigation-item-icon-focus-color); }
.ap-sidenav__item.is-active { background: var(--navigation-item-active-background); color: var(--navigation-item-active-color); font-weight: 600; }
.ap-sidenav__item.is-active i { color: var(--navigation-item-icon-active-color); }
.ap-sidenav__badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--surface-200);
  color: var(--text-secondary-color);
  font: 600 11px/18px var(--font-sans);
  text-align: center;
}

/* ---------- Buttons ---------- */

.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--button-gap-2, 7) * 1px);
  height: calc(var(--button-height, 32) * 1px);
  padding: 0 calc(var(--form-field-padding-x) * 1px);
  border-radius: calc(var(--button-border-radius) * 1px);
  border: 1px solid var(--button-primary-border-color);
  background: var(--button-primary-background);
  color: var(--button-primary-color);
  font: var(--button-label-font-weight, 600) 14px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.ap-btn i { font-size: 16px; }
.ap-btn:hover { background: var(--button-primary-hover-background); border-color: var(--button-primary-hover-border-color); }
.ap-btn:disabled { opacity: .5; cursor: default; pointer-events: none; }
.ap-btn--text { background: transparent; border-color: transparent; color: var(--primary-color); }
.ap-btn--text:hover { background: color-mix(in srgb, var(--primary-color) 8%, transparent); border-color: transparent; }
.ap-btn--outlined-secondary {
  background: var(--content-background);
  border-color: var(--button-outlined-secondary-border-color);
  color: var(--button-outlined-secondary-color);
}
.ap-btn--outlined-secondary:hover { background: var(--surface-100); border-color: var(--button-outlined-secondary-border-color); }
.ap-btn--full { width: 100%; }

/* ---------- Tag ---------- */

.ap-tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--tag-gap, 4) * 1px);
  padding: calc(var(--tag-padding-y, 4) * 1px) calc(var(--tag-padding-x, 8) * 1px);
  border-radius: calc(var(--tag-border-radius) * 1px);
  font: var(--tag-font-weight, 600) calc(var(--font-size-caption, 12) * 1px)/1.1 var(--font-sans);
  white-space: nowrap;
}
.ap-tag--success { background: var(--tag-success-background); color: var(--tag-success-color); }
.ap-tag--info { background: var(--tag-info-background); color: var(--tag-info-color); }
.ap-tag--secondary { background: var(--tag-secondary-background); color: var(--tag-secondary-color); }
.ap-tag--error { background: var(--tag-danger-background); color: var(--tag-danger-color); }
.ap-tag--warning { background: var(--tag-marketing-background); color: var(--tag-marketing-color); }

/* ---------- Tabs ---------- */

.ap-tabs { display: flex; gap: 4px; border-bottom: calc(var(--tabs-tablist-border-width, 1) * 1px) solid var(--tabs-tablist-border-color); }
.ap-tabs__tab {
  position: relative;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--tabs-color);
  font: var(--tabs-tab-font-weight, 600) 14px/20px var(--font-sans);
  cursor: pointer;
}
.ap-tabs__tab:hover { color: var(--tabs-hover-color); }
.ap-tabs__tab.is-active { color: var(--tabs-active-color); }
.ap-tabs__tab.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--tabs-active-bar-bottom, -1) * 1px);
  height: calc(var(--tabs-active-bar-height, 1) * 1px);
  background: var(--tabs-active-bar-background);
}

/* ---------- Title block ---------- */

.ap-titleblock { display: flex; flex-direction: column; gap: calc(var(--titleblock-heading-subtext-gap, 8) * 1px); }
.ap-titleblock__row { display: flex; align-items: center; gap: calc(var(--titleblock-header-gap-x, 16) * 1px); }
.ap-titleblock__back {
  width: 32px; height: 32px;
  border: 0; border-radius: calc(var(--border-radius-sm) * 1px);
  background: transparent;
  color: var(--icon-default-color);
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.ap-titleblock__back:hover { background: var(--surface-200); }
.ap-titleblock__title { font: 600 24px/32px var(--font-sans); color: var(--titleblock-header-color); }
.ap-titleblock__subtext { font: 400 14px/20px var(--font-sans); color: var(--titleblock-description-color); max-width: 720px; text-wrap: pretty; }

/* ---------- Metric tile ---------- */

.ap-metric {
  min-width: 0;
  background: var(--metrictile-background);
  border: 1px solid var(--metrictile-border-color);
  border-radius: calc(var(--metrictile-border-radius) * 1px);
  padding: calc(var(--metrictile-padding-y, 16) * 1px) calc(var(--metrictile-padding-x, 16) * 1px);
  display: flex;
  flex-direction: column;
  gap: calc(var(--metrictile-gap, 16) * 1px);
}
.ap-metric__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--metrictile-header-gap, 8) * 1px);
  font: 400 13px/18px var(--font-sans);
  color: var(--text-secondary-color);
}
.ap-metric__header i { font-size: 18px; color: var(--icon-default-color); }
.ap-metric__value { font: var(--metrictile-unit-font-weight, 700) 30px/36px var(--font-sans); color: var(--metrictile-unit-color); }

/* ---------- Breadcrumb ---------- */

.ap-breadcrumb { display: flex; align-items: center; gap: calc(var(--breadcrumb-item-gap, 8) * 1px); font: 400 13px/18px var(--font-sans); flex-wrap: wrap; }
.ap-breadcrumb__link { border: 0; background: none; padding: 0; font: inherit; color: var(--text-secondary-color); cursor: pointer; }
.ap-breadcrumb__link:hover { color: var(--text-primary-color); text-decoration: underline; }
.ap-breadcrumb__current { color: var(--text-primary-color); font-weight: 600; }
.ap-breadcrumb__sep { font-size: 14px; color: var(--breadcrumb-separator-color); }

/* ---------- Progress bar ---------- */

.ap-progress { flex: 1; height: 8px; border-radius: 8px; background: var(--progressbar-background); overflow: hidden; }
.ap-progress__value { height: 100%; border-radius: 8px; background: var(--progressbar-value-background); transition: width .2s; }
.ap-progress--inverse { background: rgba(255, 255, 255, .16); }
.ap-progress--inverse .ap-progress__value { background: var(--sky-700); }

/* ---------- Message ---------- */

.ap-message {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--message-gap, 8) * 1px);
  padding: calc(var(--message-padding-y, 8) * 1px) calc(var(--message-padding-x, 12) * 1px);
  border-radius: calc(var(--message-border-radius) * 1px);
  border: calc(var(--message-border-width, 1) * 1px) solid;
  font: 400 14px/20px var(--font-sans);
}
.ap-message i { font-size: calc(var(--message-icon-size, 18) * 1px); flex-shrink: 0; margin-top: 1px; }
.ap-message--info { background: var(--message-info-background); border-color: var(--message-info-border-color); color: var(--message-info-color); }
.ap-message--success { background: var(--message-success-background); border-color: var(--message-success-border-color); color: var(--message-success-color); }
.ap-message--error { background: var(--message-error-background); border-color: var(--message-error-border-color); color: var(--message-error-color); }

/* ---------- Shared page scaffolding ---------- */

.view { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; }
.view--home { gap: 32px; }
.view--course { gap: 24px; }
.view--lesson { max-width: 820px; gap: 24px; }

.micro-label {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text-secondary-color);
}
.micro-label--sky { color: var(--sky-700); }

.card {
  background: var(--card-background, #fff);
  border: 1px solid var(--content-border-color);
  border-radius: 12px;
}

/* ---------- Home ---------- */

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

.resume {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--navy-950);
  border-radius: 12px;
  padding: 28px 32px;
  color: #fff;
}
.resume__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.resume__title { font: 700 24px/32px var(--font-sans); }
.resume__context { font: 400 14px/20px var(--font-sans); color: var(--navy-400, #96a1ad); }
.resume__progress { display: flex; align-items: center; gap: 12px; margin-top: 6px; max-width: 520px; }
.resume__pct { font: 600 12px/16px var(--font-sans); color: var(--navy-300, #c3cad2); }

.catalog-section { display: flex; flex-direction: column; gap: 20px; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }

.course-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--card-background, #fff);
  border: 1px solid var(--content-border-color);
  border-radius: 12px;
  padding: 24px;
  cursor: pointer;
  min-height: 232px;
  transition: border-color .12s, box-shadow .12s;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--navy-950);
}
.course-card:hover { border-color: var(--sky-500); box-shadow: 0 2px 10px rgba(33, 43, 53, .07); }
.course-card--locked {
  cursor: default;
  background: transparent;
  border-style: dashed;
  opacity: .85;
}
.course-card--locked:hover { border-color: var(--content-border-color); box-shadow: none; }
.course-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.course-card__product { display: flex; align-items: center; gap: 10px; }
.course-card__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--sky-700);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.course-card__icon i { font-size: 20px; }
.course-card__icon--muted { background: var(--navy-900, #637381); }
.course-card__titles { display: flex; flex-direction: column; gap: 6px; }
.course-card__title { font: 700 20px/28px var(--font-sans); }
.course-card__blurb { font: 400 14px/20px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.course-card__meta { display: flex; align-items: center; gap: 16px; font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.course-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.course-card__progress { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.course-card__pct { font: 600 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.course-card__locked-note { display: flex; align-items: center; gap: 6px; margin-top: auto; font: 600 12px/16px var(--font-sans); color: var(--text-secondary-color); }

/* ---------- Course view ---------- */

.course-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.course-modules { display: flex; flex-direction: column; gap: 16px; }

.module { overflow: hidden; }
.module__header { display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--content-border-color); }
.module__num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--surface-100, #f2f4f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--font-sans);
  color: var(--text-secondary-color);
  flex-shrink: 0;
}
.module__title { flex: 1; min-width: 0; font: 700 16px/22px var(--font-sans); }
.module__meta { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.course-intro { padding: 20px 24px; }
.module__intro {
  padding: 12px 24px 0;
  font-style: italic;
  color: var(--text-secondary-color);
}
.module__intro .block-p { margin: 0 0 8px; font: 400 13px/19px var(--font-sans); color: inherit; }
.module__objectives {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 24px;
  background: var(--surface-50, #f7f8f9);
  border-bottom: 1px solid var(--content-border-color);
}
.module__objective { display: flex; gap: 8px; font: 400 13px/19px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.module__objective i { color: var(--green-700); flex-shrink: 0; margin-top: 2px; }

.lesson-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  cursor: pointer;
  border: 0;
  border-bottom: 1px solid var(--surface-100, #f2f4f6);
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}
.lesson-row:hover { background: var(--surface-50, #f7f8f9); }
.lesson-row--next { background: rgba(27, 150, 255, .04); }
.lesson-row__status { font-size: 20px; color: var(--navy-400, #96a1ad); flex-shrink: 0; }
.lesson-row--next .lesson-row__status { color: var(--sky-700); }
.lesson-row--done .lesson-row__status { color: var(--green-700); }
.lesson-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lesson-row__title { font: 400 15px/22px var(--font-sans); color: var(--navy-950); }
.lesson-row--next .lesson-row__title { font-weight: 700; }
.lesson-row__meta { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.lesson-row__chev { color: var(--navy-400, #96a1ad); }

.course-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; }
.aside-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.aside-card__pct-row { display: flex; align-items: baseline; justify-content: space-between; }
.aside-card__pct { font: 700 30px/38px var(--font-sans); }
.aside-card__count { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.aside-card__facts { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; border-top: 1px solid var(--content-border-color); }
.aside-card__fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 13px/18px var(--font-sans); padding-top: 6px; }
.aside-card__fact-label { color: var(--text-secondary-color); }
.aside-card__fact-value { font-weight: 600; }
.aside-card--outcomes { gap: 12px; }
.aside-card__heading { font: 700 14px/20px var(--font-sans); }
.outcome { display: flex; gap: 8px; font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.outcome i { color: var(--green-700); flex-shrink: 0; margin-top: 2px; }

/* ---------- Lesson view ---------- */

.lesson-header { display: flex; flex-direction: column; gap: 8px; }
.lesson-header__title { font: 700 30px/38px var(--font-sans); text-wrap: pretty; }
.lesson-header__meta { display: flex; align-items: center; gap: 14px; font: 400 13px/18px var(--font-sans); color: var(--text-secondary-color); }
.lesson-header__meta span { display: inline-flex; align-items: center; gap: 5px; }

.lesson-content { padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.lesson-content .block-h { font: 700 20px/28px var(--font-sans); margin-top: 8px; }
.lesson-content .block-p { font: 400 15px/24px var(--font-sans); color: var(--navy-800, #384453); margin: 0; text-wrap: pretty; }
.block-list { display: flex; flex-direction: column; gap: 8px; }
.block-list__item { display: flex; gap: 10px; font: 400 15px/23px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.block-list__item i { color: var(--sky-700); flex-shrink: 0; }
.block-terms { display: flex; flex-direction: column; border: 1px solid var(--content-border-color); border-radius: 8px; overflow: hidden; }
.block-terms__row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--surface-100, #f2f4f6); }
.block-terms__row:last-child { border-bottom: 0; }
.block-terms__term { font: 700 14px/20px var(--font-sans); }
.block-terms__def { font: 400 14px/20px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.block-olist { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 22px; }
.block-olist li { font: 400 15px/23px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.block-olist li::marker { font-weight: 700; color: var(--sky-700); }

/* Fenced blocks: ASCII diagrams and worked sums. They carry their meaning in
   their own spacing, so they never wrap — a wide one scrolls inside its frame
   instead of pushing the lesson column sideways. */
.block-pre {
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--surface-100, #f2f4f6);
  overflow-x: auto;
  max-width: 100%;
}
.block-pre pre { margin: 0; padding: 16px 18px; }
.block-pre code {
  font: 400 12.5px/1.55 var(--font-mono);
  color: var(--navy-900, #22303f);
  white-space: pre;
  background: none;
  padding: 0;
}

.block-table { overflow-x: auto; max-width: 100%; border: 1px solid var(--content-border-color); border-radius: 8px; }
.block-table table { border-collapse: collapse; width: 100%; min-width: 480px; }
.block-table th, .block-table td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-100, #f2f4f6);
  text-wrap: pretty;
}
.block-table th { font: 700 13px/19px var(--font-sans); background: var(--surface-100, #f2f4f6); white-space: nowrap; }
.block-table td { font: 400 14px/20px var(--font-sans); color: var(--navy-800, #384453); }
.block-table td:first-child { font-weight: 600; color: var(--navy-900, #22303f); }
.block-table tbody tr:last-child td { border-bottom: 0; }

.block-figure { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.block-figure img { max-width: 100%; border: 1px solid var(--content-border-color); border-radius: 8px; }
.block-figure figcaption { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }

.block-link { color: var(--sky-700); text-decoration: none; border-bottom: 1px solid rgba(27, 150, 255, .35); }
.block-link:hover { border-bottom-color: var(--sky-700); }
.block-link i { font-size: 13px; margin-left: 3px; vertical-align: -1px; }

.block-shot { display: flex; flex-direction: column; gap: 8px; }
.block-shot__frame {
  width: 100%;
  height: 320px;
  border: 1px dashed var(--content-border-color);
  border-radius: 8px;
  background: var(--surface-100, #f2f4f6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-secondary-color);
  font: 400 13px/18px var(--font-sans);
}
.block-shot__frame i { font-size: 28px; color: var(--navy-400, #96a1ad); }
.block-shot__caption { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }

/* An embedded video (@video). The frame holds a 16:9 box at whatever width the
   lesson column is, so the provider's iframe can fill it absolutely. */
.block-video { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.block-video__frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--navy-900, #1d2733);
  overflow: hidden;
}
.block-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.block-video figcaption { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.block-video__pass {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--surface-100, #f2f4f6);
  font: 400 13px/18px var(--font-sans);
  color: var(--text-secondary-color);
}
.block-video__pass i { font-size: 15px; color: var(--navy-400, #96a1ad); flex-shrink: 0; }
.block-video__pass code {
  font: 600 13px/1.4 var(--font-mono);
  background: var(--content-background);
  border: 1px solid var(--content-border-color);
  border-radius: 4px;
  padding: 1px 6px;
  user-select: all;
}

/* A sample TrustedForm certificate: the product's own certificate-details
   layout, rebuilt in markup with fictional data so a walkthrough can point at
   fields by name. Rows put the label left and the value right the way the real
   page does, and collapse to stacked pairs when the column gets narrow. */
.block-cert { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.block-cert__caption { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.tf-cert {
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(33, 43, 53, .07);
}
.tf-cert__bar { display: block; height: 5px; background: linear-gradient(90deg, #4fc9ea, #1b96ff 55%, #2f6fb5); }
.tf-cert__body { padding: 26px 30px 30px; display: flex; flex-direction: column; gap: 14px; }
.tf-cert__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.tf-cert__title { margin: 0; font: 700 24px/32px var(--font-sans); color: var(--navy-950); }

.tf-logo { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tf-logo__mark { width: 26px; height: 29px; display: block; }
.tf-logo__text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.tf-logo__word { font: 600 19px/1 var(--font-sans); letter-spacing: -.015em; color: var(--navy-800, #384453); }
.tf-logo__word strong { font-weight: 800; color: var(--navy-950); }
.tf-logo__by { font: 600 7.5px/1 var(--font-sans); letter-spacing: .03em; color: var(--navy-700, #52616f); }

.tf-cert__idrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-cert__idlabel { font: 400 13px/20px var(--font-sans); color: var(--text-secondary-color); }
.tf-cert__id {
  font: 400 13px/20px var(--font-mono);
  color: var(--navy-950);
  background: var(--surface-200, #f0f0f0);
  border-radius: 4px;
  padding: 6px 12px;
  word-break: break-all;
}
.tf-cert__idrow i { font-size: 15px; color: var(--navy-600, #acbdcd); }

.tf-cert__issued {
  margin: 4px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--surface-200, #ecf1f6);
  border-radius: 6px;
  background: var(--surface-100, #f9f9f9);
  font: 400 13.5px/22px var(--font-sans);
  color: var(--navy-800, #384453);
  text-wrap: pretty;
}

.tf-cert__section { display: flex; flex-direction: column; margin-top: 26px; }
.tf-cert__h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--surface-200, #ecf1f6);
  font: 700 18px/26px var(--font-sans);
  color: var(--navy-950);
}
.tf-cert__h i { font-size: 15px; color: var(--sky-700); }
.tf-cert__section > .tf-cert__h { margin-bottom: 6px; }
.tf-cert__rows { display: flex; flex-direction: column; padding: 0 16px; }
/* Rows wrap rather than squeeze: the lesson column is narrower than the real
   certificate page, so a long label and its value drop onto two lines instead
   of colliding. */
.tf-cert__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--surface-200, #ecf1f6);
}
.tf-cert__row:last-child { border-bottom: 0; }
.tf-cert__label { font: 700 13.5px/20px var(--font-sans); color: var(--navy-950); }
.tf-cert__value { margin-left: auto; font: 400 13.5px/20px var(--font-sans); color: var(--navy-800, #384453); text-align: right; word-break: break-word; }
.tf-cert__value--mono { font-family: var(--font-mono); background: var(--surface-200, #f0f0f0); border-radius: 4px; padding: 3px 8px; }
.tf-cert__value--link { color: var(--sky-700); text-decoration: underline; }

.tf-cert__replay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--surface-200, #ecf1f6);
  border-radius: 6px;
}
.tf-cert__replay p { margin: 0; font: 400 13px/21px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.tf-cert__btn {
  flex-shrink: 0;
  padding: 10px 16px;
  border: 1px solid var(--navy-500, #d1dbe4);
  border-radius: 6px;
  background: #fff;
  font: 700 13.5px/1 var(--font-sans);
  color: var(--navy-950);
}
.tf-cert__consent {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--surface-200, #ecf1f6);
  border-radius: 6px;
  background: var(--surface-100, #f9f9f9);
  font: 400 13px/21px var(--font-sans);
  color: var(--navy-800, #384453);
  text-wrap: pretty;
}

/* The event log that sits behind a certificate: the same card chrome, a search
   bar and sort caret that are drawn but inert, and a table that scrolls inside
   its own frame rather than widening the lesson column. */
.tf-cert__headtext { display: flex; flex-direction: column; gap: 6px; }
.tf-cert__sub { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--navy-600, #acbdcd); text-wrap: pretty; }
.tf-log__search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px solid var(--surface-200, #f0f0f0);
  border-radius: 6px;
}
.tf-log__search i { font-size: 15px; color: var(--navy-600, #acbdcd); }
.tf-log {
  margin-top: 14px;
  border: 1px solid var(--surface-200, #f0f0f0);
  border-radius: 6px;
  overflow-x: auto;
  max-width: 100%;
}
.tf-log table { border-collapse: collapse; width: 100%; min-width: 520px; }
.tf-log th, .tf-log td {
  text-align: left;
  vertical-align: middle;
  padding: 13px 16px;
  border-bottom: 1px solid var(--surface-200, #f0f0f0);
}
.tf-log thead th { background: var(--surface-100, #f9f9f9); color: var(--navy-950); white-space: nowrap; }
.tf-log tbody tr:last-child td { border-bottom: 0; }
.tf-log th i { font-size: 11px; color: var(--navy-700, #52616f); vertical-align: 1px; }
.tf-log .tf-log__when, .tf-log .tf-log__at { font: 400 12.5px/19px var(--font-mono); white-space: nowrap; }
.tf-log thead .tf-log__when, .tf-log thead .tf-log__at { font-weight: 500; }
.tf-log td.tf-log__when { color: var(--navy-800, #384453); }
.tf-log td.tf-log__at { color: var(--sky-700); text-decoration: underline; }
.tf-log .tf-log__what { font: 400 13.5px/20px var(--font-sans); color: var(--navy-950); }
.tf-log thead .tf-log__what { font-weight: 700; }

/* The certificate page around those cards: the title with its retention chip
   and share button, and the four tabs. The tabs are radio inputs behind their
   labels — :checked picks the pane, so a learner can click through Certificate,
   Session replay, Event log and History with no script and no lesson state. */
.tf-page {
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--surface-100, #f9f9f9);
  overflow: hidden;
}
.tf-page__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px 16px;
  background: #fff;
}
.tf-page__title { margin: 0; font: 700 22px/30px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.tf-page__actions { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tf-page__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 4px;
  background: var(--green-200, #e6f6eb);
  font: 700 12.5px/1 var(--font-sans);
  color: var(--green-900, #06754b);
}
.tf-page__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--content-border-color);
  border-radius: 6px;
  background: #fff;
  color: var(--navy-800, #384453);
  font-size: 16px;
}

.tf-tabs__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tf-tabs__strip {
  display: flex;
  gap: 26px;
  padding: 0 24px;
  background: #fff;
  border-bottom: 1px solid var(--content-border-color);
  overflow-x: auto;
}
.tf-tabs__tab {
  padding: 12px 2px 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  font: 600 14px/20px var(--font-sans);
  color: var(--navy-700, #52616f);
}
.tf-tabs__tab:hover { color: var(--navy-950); }
.tf-tabs__radio:nth-of-type(1):checked ~ .tf-tabs__strip .tf-tabs__tab:nth-child(1),
.tf-tabs__radio:nth-of-type(2):checked ~ .tf-tabs__strip .tf-tabs__tab:nth-child(2),
.tf-tabs__radio:nth-of-type(3):checked ~ .tf-tabs__strip .tf-tabs__tab:nth-child(3),
.tf-tabs__radio:nth-of-type(4):checked ~ .tf-tabs__strip .tf-tabs__tab:nth-child(4) {
  color: var(--sky-700);
  border-bottom-color: var(--sky-700);
}
.tf-tabs__radio:nth-of-type(1):focus-visible ~ .tf-tabs__strip .tf-tabs__tab:nth-child(1),
.tf-tabs__radio:nth-of-type(2):focus-visible ~ .tf-tabs__strip .tf-tabs__tab:nth-child(2),
.tf-tabs__radio:nth-of-type(3):focus-visible ~ .tf-tabs__strip .tf-tabs__tab:nth-child(3),
.tf-tabs__radio:nth-of-type(4):focus-visible ~ .tf-tabs__strip .tf-tabs__tab:nth-child(4) {
  outline: 2px solid var(--sky-500);
  outline-offset: 2px;
  border-radius: 2px;
}
.tf-tabs__panes { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.tf-tabs__pane { display: none; flex-direction: column; gap: 16px; }
.tf-tabs__radio:nth-of-type(1):checked ~ .tf-tabs__panes .tf-tabs__pane:nth-child(1),
.tf-tabs__radio:nth-of-type(2):checked ~ .tf-tabs__panes .tf-tabs__pane:nth-child(2),
.tf-tabs__radio:nth-of-type(3):checked ~ .tf-tabs__panes .tf-tabs__pane:nth-child(3),
.tf-tabs__radio:nth-of-type(4):checked ~ .tf-tabs__panes .tf-tabs__pane:nth-child(4) { display: flex; }

/* The gate above a replay: until the viewer proves they hold a matching email
   or phone, the form inputs stay hidden. */
.tf-notice {
  padding: 22px 24px;
  border: 1px solid var(--content-border-color);
  border-radius: 6px;
  background: var(--surface-100, #f9f9f9);
}
.tf-notice__h { margin: 0 0 10px; font: 400 20px/28px var(--font-sans); color: var(--navy-950); }
.tf-notice p { margin: 0 0 16px; font: 400 13.5px/22px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.tf-notice__link { color: var(--sky-700); text-decoration: underline; }
.tf-notice__label { display: block; margin-bottom: 6px; font: 700 13px/20px var(--font-sans); color: var(--navy-950); }
.tf-notice__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tf-notice__input {
  flex: 1 1 240px;
  max-width: 320px;
  padding: 9px 12px;
  border: 1px solid var(--content-border-color);
  border-radius: 4px;
  background: #fff;
  font: 400 13px/20px var(--font-sans);
  color: var(--navy-600, #acbdcd);
}
.tf-notice__btn {
  padding: 9px 22px;
  border-radius: 4px;
  background: var(--green-500, #adddc0);
  font: 700 13.5px/20px var(--font-sans);
  color: #fff;
}

/* The replay player: a scrubber whose ticks are the session's events, and a
   control row that is drawn rather than wired. */
.tf-player {
  margin-top: 16px;
  padding: 18px 20px 14px;
  border: 1px solid var(--surface-200, #f0f0f0);
  border-radius: 6px;
  background: var(--surface-100, #f9f9f9);
}
.tf-player__track { position: relative; height: 16px; margin: 0 4px 10px; }
.tf-player__track::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--navy-500, #d1dbe4);
}
.tf-player__head {
  position: absolute;
  top: 3px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sky-700);
}
.tf-player__tick { position: absolute; top: 2px; width: 3px; height: 12px; border-radius: 1px; background: var(--navy-700, #52616f); }
.tf-player__tick--end { background: var(--green-700, #30a46c); }
.tf-player__controls { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; }
.tf-player__controls i { font-size: 14px; color: var(--navy-800, #384453); }
.tf-player__time { font: 400 13px/20px var(--font-mono); color: var(--navy-800, #384453); }
.tf-player__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sky-700);
}
.tf-player__play i { font-size: 15px; color: #fff; }
.tf-player__skip { position: absolute; right: 2px; font: 700 13px/20px var(--font-sans); color: var(--navy-950); }

/* The captured page itself, shrunk the way the replay pane shrinks it. Type is
   deliberately tiny: this is a picture of a page, not text to read. */
.tf-snap { margin-top: 16px; border: 1px solid var(--surface-200, #f0f0f0); border-radius: 4px; overflow: hidden; }
.tf-snap__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: #274b3a;
}
.tf-snap__brand { display: inline-flex; align-items: center; gap: 4px; font: 700 8.5px/1 var(--font-sans); color: #fff; }
.tf-snap__brand i { font-size: 9px; color: #f0b429; }
.tf-snap__call { padding: 3px 6px; border-radius: 2px; background: rgba(255, 255, 255, .16); font: 700 7px/1 var(--font-sans); color: #fff; }
.tf-snap__page { padding: 12px 14px 16px; background: #f7f5ef; text-align: center; }
.tf-snap__badge {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid #dcd6c6;
  border-radius: 8px;
  background: #efece1;
  font: 700 6.5px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4a5a4f;
}
.tf-snap__hero { display: block; margin: 8px auto 4px; font-size: 24px; color: #2f6b4f; }
.tf-snap__h { margin: 0 0 4px; font: 700 13px/18px var(--font-sans); color: var(--navy-950); }
.tf-snap__lede { margin: 0 auto; max-width: 300px; font: 400 8px/13px var(--font-sans); color: #6b6f6a; }
.tf-snap__points { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 10px; }
.tf-snap__points span { display: inline-flex; align-items: center; gap: 3px; font: 600 7px/1 var(--font-sans); color: #5b6159; }
.tf-snap__points span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #e0a325; }
.tf-snap__form {
  max-width: 320px;
  margin: 0 auto;
  padding: 10px 12px 12px;
  border: 1px solid #e3ded1;
  border-radius: 3px;
  background: #fff;
  text-align: left;
}
.tf-snap__formh { display: block; font: 700 9.5px/1.3 var(--font-sans); color: var(--navy-950); }
.tf-snap__formsub { margin: 2px 0 0; font: 400 7px/11px var(--font-sans); color: #7c817a; }
.tf-snap__pair { display: flex; gap: 8px; }
.tf-snap__pair > * { flex: 1; min-width: 0; }
.tf-snap__field { display: flex; flex-direction: column; gap: 2px; margin-top: 7px; }
.tf-snap__flabel { font: 700 6.5px/1 var(--font-sans); color: #4d5358; }
.tf-snap__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 14px;
  padding: 0 4px;
  border: 1px solid #dcdcd6;
  border-radius: 2px;
  background: #fff;
  font: 400 7px/1 var(--font-sans);
  color: #9aa0a6;
}
.tf-snap__input--menu i { font-size: 7px; }
.tf-snap__consent { display: flex; gap: 5px; margin-top: 9px; font: 400 6px/1.5 var(--font-sans); color: #6b6f6a; }
.tf-snap__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  margin-top: 1px;
  border: 1px solid #b9bdc2;
  border-radius: 1px;
}
.tf-snap__check i { font-size: 6px; color: #4d5358; }
.tf-snap__cta {
  display: block;
  margin-top: 9px;
  padding: 5px;
  border-radius: 2px;
  background: #2f6b4f;
  font: 700 7.5px/1.2 var(--font-sans);
  color: #fff;
  text-align: center;
}

/* The History tab: when the certificate was created, and how old it was. */
.tf-hist { border: 1px solid var(--surface-200, #f0f0f0); border-radius: 6px; background: var(--surface-100, #f9f9f9); }
.tf-hist__when { padding: 18px 20px; border-bottom: 1px solid var(--surface-200, #f0f0f0); font: 700 15px/22px var(--font-sans); color: var(--navy-950); }
.tf-hist .tf-cert__rows { padding: 0 20px; }

/* The Share dialog: the view-only URL a retained certificate carries. */
.tf-share {
  max-width: 620px;
  border: 1px solid var(--content-border-color);
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(33, 43, 53, .1);
}
.tf-share__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: #64b5f6;
  font: 700 17px/24px var(--font-sans);
  color: #fff;
}
.tf-share__bar i { font-size: 17px; }
.tf-share__body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tf-share__h { margin: 0; font: 700 19px/26px var(--font-sans); color: var(--navy-950); }
.tf-share__help { margin: 0; font: 400 13.5px/20px var(--font-sans); color: var(--navy-800, #384453); }
.tf-share__link { color: var(--sky-700); text-decoration: underline; }
.tf-share__row { display: flex; align-items: stretch; border: 1px solid var(--content-border-color); border-radius: 4px; overflow: hidden; }
.tf-share__url {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font: 400 13px/20px var(--font-sans);
  color: var(--navy-600, #acbdcd);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tf-share__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--sky-700);
  font: 700 13.5px/20px var(--font-sans);
  color: #fff;
}
.tf-share__foot { padding: 12px 18px; border-top: 1px solid var(--surface-200, #f0f0f0); background: var(--surface-100, #f9f9f9); text-align: right; }
.tf-share__close { display: inline-block; padding: 9px 20px; border-radius: 4px; background: var(--surface-200, #f0f0f0); font: 700 13.5px/20px var(--font-sans); color: var(--navy-950); }

@media (max-width: 760px) {
  .tf-cert__body { padding: 20px 18px 24px; }
  .tf-cert__head { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .tf-cert__title { font-size: 21px; line-height: 28px; }
  .tf-cert__rows { padding: 0 4px; }
  .tf-cert__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tf-cert__value { margin-left: 0; text-align: left; }
  .tf-cert__replay { flex-direction: column; align-items: flex-start; gap: 14px; }
  .tf-cert__sub { font-size: 13px; line-height: 20px; }
  .tf-page__top { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px 14px; }
  .tf-tabs__strip { gap: 18px; padding: 0 16px; }
  .tf-tabs__panes { padding: 14px; }
  .tf-player__controls { flex-wrap: wrap; }
  .tf-player__skip { position: static; }
  .tf-share__row { flex-direction: column; }
}

/* ---------- Quiz ---------- */

.quiz { display: flex; flex-direction: column; gap: 28px; }
.quiz__question { display: flex; flex-direction: column; gap: 12px; }
.quiz__promptrow { display: flex; align-items: flex-start; gap: 10px; }
.quiz__prompt { flex: 1; min-width: 0; font: 700 16px/24px var(--font-sans); text-wrap: pretty; }
.quiz__options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--content-border-color);
  background: #fff;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  transition: border-color .12s, background .12s;
}
.quiz-option:hover { border-color: var(--sky-500); }
.quiz-option__letter {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 var(--font-sans);
  background: var(--surface-100, #f2f4f6);
  color: var(--text-secondary-color);
}
.quiz-option__text { flex: 1; font: 400 15px/22px var(--font-sans); text-wrap: pretty; }
.quiz-option__mark { font-size: 18px; }
.quiz-option--selected { border-color: var(--sky-700); background: rgba(27, 150, 255, .06); }
.quiz-option--selected .quiz-option__letter { background: var(--sky-700); color: #fff; }
.quiz-option--right { border-color: var(--green-700); background: rgba(45, 164, 78, .06); }
.quiz-option--right .quiz-option__mark { color: var(--green-700); }
.quiz-option--wrong { border-color: var(--red-700); background: rgba(217, 48, 48, .05); }
.quiz-option--wrong .quiz-option__mark { color: var(--red-700); }
.quiz-option--submitted { cursor: default; }
.quiz-option--submitted:hover { border-color: var(--content-border-color); }
.quiz-option--submitted.quiz-option--right:hover { border-color: var(--green-700); }
.quiz-option--submitted.quiz-option--wrong:hover { border-color: var(--red-700); }
.quiz-option--submitted.quiz-option--selected:hover { border-color: var(--sky-700); }
.quiz__why { font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); padding-left: 2px; text-wrap: pretty; }
.quiz__actions { display: flex; gap: 12px; }
.quiz__timer {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--content-border-color);
  background: var(--surface-100, #f2f4f6);
  color: var(--text-secondary-color);
  font-family: var(--font-sans);
}
.quiz__timer i { font-size: 16px; }
.quiz__timer-label { font: 400 13px/18px var(--font-sans); }
.quiz__timer-value { font: 700 15px/18px var(--font-mono, var(--font-sans)); font-variant-numeric: tabular-nums; color: var(--text-primary-color); }
.quiz__timer--urgent { border-color: var(--red-700); background: rgba(217, 48, 48, .06); }
.quiz__timer--urgent i, .quiz__timer--urgent .quiz__timer-value { color: var(--red-700); }

/* ---------- Simulation exercise ---------- */

.view--lesson-wide { max-width: 1180px; }

.sim { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .sim { grid-template-columns: minmax(0, 1fr); } }

.sim-panel { overflow: hidden; }
.sim-tabs { padding: 0 16px; background: var(--surface-50, #f7f8f9); }
.sim-tabs .ap-tabs__tab { display: inline-flex; align-items: center; gap: 6px; }
.sim-pane { padding: 20px; }
.sim-pane--editor { padding: 0; display: flex; flex-direction: column; }

.sim-code {
  width: 100%;
  min-height: 460px;
  border: 0;
  resize: vertical;
  padding: 16px 18px;
  background: var(--navy-950);
  color: #dce6f2;
  font: 400 12.5px/1.65 var(--font-mono);
  tab-size: 2;
  white-space: pre;
  overflow-x: auto;
}
.sim-code:focus { outline: none; box-shadow: inset 0 0 0 2px var(--sky-700); }
.sim-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 8px 18px;
  border-top: 1px solid var(--content-border-color);
}
.sim-editor-note { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }

.sim-task { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.sim-task__title { display: flex; align-items: center; gap: 8px; font: 700 16px/22px var(--font-sans); }
.sim-task__title i { color: var(--sky-700); font-size: 18px; }
.sim-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font: 400 14px/20px var(--font-sans); color: var(--navy-800, #384453); }
.sim-steps code { font: 500 12px/1 var(--font-mono); background: var(--surface-100, #f2f4f6); padding: 2px 5px; border-radius: 4px; }

.sim-snippet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sim-snippet {
  margin: 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--navy-950);
  color: #dce6f2;
  font: 400 11.5px/1.6 var(--font-mono);
  overflow-x: auto;
}
.ap-btn--sm { height: 26px; padding: 0 10px; font-size: 12px; }
.ap-btn--sm i { font-size: 14px; }

.sim-checks { display: flex; flex-direction: column; gap: 8px; }
.sim-check { display: flex; gap: 10px; font: 400 13px/19px var(--font-sans); }
.sim-check i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.sim-check--pass i { color: var(--green-700); }
.sim-check--fail i { color: var(--red-700); }
.sim-check__body { display: flex; flex-direction: column; gap: 2px; }
.sim-check--pass .sim-check__body > span:first-child { color: var(--navy-800, #384453); }
.sim-check--fail .sim-check__body > span:first-child { font-weight: 600; }
.sim-check__hint { color: var(--text-secondary-color); font-size: 12px; line-height: 17px; }

/* Mock landing page inside the preview tab */
.mock-page { border: 1px solid var(--content-border-color); border-radius: 10px; overflow: hidden; }
.mock-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px;
  background: var(--surface-100, #f2f4f6);
  border-bottom: 1px solid var(--content-border-color);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-400, #e0e0e0); }
.mock-url {
  flex: 1;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--content-border-color);
  font: 400 11px/1.4 var(--font-mono);
  color: var(--text-secondary-color);
}
.mock-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 12px; background: #fff; }
.mock-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font: 600 12px/16px var(--font-sans);
  background: var(--surface-100, #f2f4f6);
  color: var(--text-secondary-color);
  border: 1px dashed var(--content-border-color);
}
.mock-badge i { font-size: 15px; }
.mock-badge--on { background: var(--green-100); color: var(--green-900); border: 1px solid var(--green-500); }
.mock-h1 { font: 700 20px/26px var(--font-sans); }
.mock-sub { font: 400 13px/18px var(--font-sans); color: var(--text-secondary-color); margin-top: -6px; }
.mock-field { display: flex; flex-direction: column; gap: 4px; font: 600 12px/16px var(--font-sans); color: var(--navy-800, #384453); }
.mock-field input {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--surface-600, #bbb);
  border-radius: 6px;
  font: 400 13px/1 var(--font-sans);
}
.mock-consent { display: flex; gap: 8px; align-items: flex-start; font: 400 11.5px/16px var(--font-sans); color: var(--text-secondary-color); }
.mock-consent input { margin-top: 2px; }
.mock-submit {
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: var(--sky-700);
  color: #fff;
  font: 700 14px/1 var(--font-sans);
  cursor: pointer;
  align-self: flex-start;
  padding: 0 18px;
}
.mock-submit:hover { background: var(--sky-800); }
.mock-submit-result { display: flex; gap: 8px; align-items: flex-start; font: 400 12.5px/18px var(--font-sans); padding: 8px 10px; border-radius: 6px; }
.mock-submit-result i { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.mock-submit-result--ok { background: var(--green-100); color: var(--green-900); }
.mock-submit-result--bad { background: var(--red-100); color: var(--red-900); }
.mock-response {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--content-border-color);
  border-radius: 6px;
  overflow: hidden;
}
.mock-response__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--surface-100, #f2f4f6);
  font: 400 11.5px/16px var(--font-mono);
}
.mock-response__row:last-child { border-bottom: 0; }
.mock-response__row > span { color: var(--text-secondary-color); }
.mock-response__row > code { color: var(--navy-800, #384453); word-break: break-all; }
.mock-response__row--del { grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; }
.mock-response__row--del .rt-iconbtn { height: 22px; width: 22px; font-size: 12px; }
.mock-response__row--cert { background: var(--green-100); }
.mock-response__row--cert > span { color: var(--green-900); font-weight: 600; }
.mock-response__row--cert > code { color: var(--green-900); }
.mock-response__row--missing { background: var(--red-100); }
.mock-response__row--missing > span { color: var(--red-900); font-weight: 600; }
.mock-response__row--missing > code { color: var(--red-900); }
.mock-injected { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.mock-injected__label { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/14px var(--font-sans); color: var(--text-secondary-color); }
.mock-injected code {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface-100, #f2f4f6);
  border: 1px solid var(--content-border-color);
  font: 400 11px/1.5 var(--font-mono);
  color: var(--navy-800, #384453);
  white-space: pre;
  overflow-x: auto;
}

/* ---------- Profile modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 21, 33, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal { width: 480px; max-width: 100%; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.modal__head { display: flex; align-items: center; gap: 12px; }
.modal__avatar { width: 40px; height: 40px; font-size: 16px; }
.modal__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font: 700 15px/20px var(--font-sans); }
.modal__sub { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.modal__close {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--text-secondary-color);
  font-size: 18px;
  padding: 6px;
  border-radius: 6px;
  line-height: 0;
}
.modal__close:hover { background: var(--surface-100, #f2f4f6); color: var(--navy-950); }
.modal__actions { display: flex; align-items: center; gap: 10px; }

/* ---------- Product Experiences ---------- */

.view--exp { max-width: 1180px; gap: 24px; }

.exp-note { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.exp-note code { font: 500 11px/1.5 var(--font-mono); background: var(--surface-100, #f2f4f6); padding: 1px 5px; border-radius: 4px; word-break: break-all; }

.exp-form { display: flex; flex-direction: column; gap: 14px; }
.exp-row { display: flex; gap: 12px; }
.exp-label { display: flex; flex-direction: column; gap: 5px; font: 600 12px/16px var(--font-sans); color: var(--navy-800, #384453); }
.exp-label--grow { flex: 1; min-width: 0; }
.exp-input, .exp-select {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--surface-600, #bbb);
  border-radius: calc(var(--form-field-border-radius) * 1px);
  background: var(--content-background);
  font: 400 13px/1 var(--font-sans);
  color: var(--navy-950);
  width: 100%;
}
.exp-input:focus, .exp-select:focus, .exp-textarea:focus { outline: none; border-color: var(--sky-700); box-shadow: 0 0 0 1px var(--sky-700); }
.exp-textarea {
  padding: 10px 12px;
  border: 1px solid var(--surface-600, #bbb);
  border-radius: calc(var(--form-field-border-radius) * 1px);
  background: var(--content-background);
  font: 400 12px/1.6 var(--font-mono);
  color: var(--navy-950);
  width: 100%;
  resize: vertical;
  white-space: pre;
  overflow-x: auto;
}
.exp-input--mono { font: 500 12.5px/1 var(--font-mono); }
.exp-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sim-panel--full { grid-column: 1 / -1; }

/* ---------- Activity: auto-retain (Certify → Auto-retain certificates) ---------- */

.sim--ar .sim-panel, .sim--cl .sim-panel { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.ar-task { display: flex; flex-direction: column; gap: 6px; }
.ar-task__label { font: 700 10px/1.4 var(--font-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary-color); }
.ar-task p { margin: 0; font: 400 14px/22px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }

.ar-page { padding: 20px; border: 1px solid var(--content-border-color); border-radius: 8px; }
.ar-h { margin: 0 0 12px; font: 700 20px/28px var(--font-sans); color: var(--navy-950); }
.ar-p { margin: 0 0 10px; font: 400 13.5px/21px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.ar-link { color: var(--sky-700); text-decoration: underline; }
.ar-tablewrap { margin-top: 14px; border: 1px solid var(--surface-200, #f0f0f0); border-radius: 6px; overflow-x: auto; }
.ar-table { border-collapse: collapse; width: 100%; min-width: 620px; }
.ar-table th, .ar-table td { text-align: left; vertical-align: middle; padding: 12px 14px; border-bottom: 1px solid var(--surface-200, #f0f0f0); }
.ar-table thead th { background: var(--surface-100, #f9f9f9); font: 700 12.5px/18px var(--font-sans); color: var(--navy-950); white-space: nowrap; }
.ar-table thead th i { margin-left: 4px; font-size: 12px; color: var(--navy-600, #acbdcd); }
.ar-table tbody tr:last-child td { border-bottom: 0; }
.ar-domain { font: 400 13.5px/20px var(--font-sans); color: var(--navy-800, #384453); }
.ar-row--blocked .ar-domain { color: var(--navy-700, #52616f); }

.ar-switchwrap { display: inline-flex; align-items: center; gap: 10px; }
.ar-switch {
  position: relative;
  width: 36px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: var(--navy-600, #acbdcd);
  cursor: pointer;
  transition: background .12s;
}
.ar-switch:hover { background: var(--navy-700, #52616f); }
.ar-switch.is-on, .ar-switch.is-on:hover { background: var(--sky-700); }
.ar-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .12s;
}
.ar-switch.is-on .ar-switch__knob { transform: translateX(18px); }
.ar-switch__state { font: 400 13.5px/20px var(--font-sans); color: var(--navy-800, #384453); }
.ar-switch__state.is-on { font-weight: 700; color: var(--navy-950); }

.ar-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 4px;
  font: 700 12.5px/18px var(--font-sans);
}
.ar-chip i { font-size: 14px; }
.ar-chip--ok { background: var(--green-200, #e6f6eb); color: var(--green-900, #06754b); }
.ar-chip--warn { background: #fdf3c7; color: #8a5a00; }
.ar-chip--muted { background: var(--surface-200, #f0f0f0); color: var(--navy-700, #52616f); }

.ar-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ar-foot .ap-message { flex: 1 1 320px; }
.ar-foot__note { font: 400 13px/20px var(--font-sans); color: var(--text-secondary-color); }

/* ---------- Activity: add approved consent language (Verify) ---------- */

.cl-unreviewed { padding: 16px 18px; border: 1px solid var(--content-border-color); border-radius: 8px; background: var(--surface-100, #f9f9f9); }
.cl-unreviewed__h { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/20px var(--font-sans); color: var(--navy-950); }
.cl-unreviewed__h i { font-size: 16px; color: var(--navy-700, #52616f); }
.cl-vars { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cl-var { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--surface-200, #f0f0f0); border-radius: 6px; background: #fff; }
.cl-var__meta { font: 700 11px/16px var(--font-sans); color: var(--text-secondary-color); }
.cl-var__text { font: 400 12px/18px var(--font-mono); color: var(--navy-800, #384453); word-break: break-word; }

.cl-form { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--content-border-color); border-radius: 8px; }
.cl-h { margin: 0 0 6px; font: 700 22px/30px var(--font-sans); color: var(--navy-950); }
.cl-sub { margin: 0 0 18px; font: 400 13.5px/21px var(--font-sans); color: var(--navy-700, #52616f); }
.cl-label { margin-bottom: 6px; font: 700 13px/20px var(--font-sans); color: var(--navy-950); }
.cl-req { color: var(--red-900, #b91c1c); }
.cl-input, .cl-textarea {
  margin-bottom: 16px;
  padding: 10px 12px;
  border: 1px solid var(--content-border-color);
  border-radius: 4px;
  background: #fff;
  font: 400 13.5px/21px var(--font-sans);
  color: var(--navy-950);
  width: 100%;
  box-sizing: border-box;
}
.cl-textarea { margin-bottom: 8px; resize: vertical; min-height: 130px; }
.cl-input:focus, .cl-textarea:focus { outline: 2px solid var(--sky-500); outline-offset: -1px; border-color: var(--sky-700); }
.cl-tokens { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cl-tokens__spacer { flex: 1; min-width: 0; }
.cl-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .sim--ar .sim-panel, .sim--cl .sim-panel { padding: 14px; }
  .ar-page, .cl-form { padding: 14px; }
  .cl-tokens__spacer { display: none; }
}
.exp-row--end { align-items: flex-end; }
.exp-check { display: flex; align-items: flex-start; gap: 8px; font: 400 13px/18px var(--font-sans); color: var(--navy-800, #384453); cursor: pointer; }
.exp-check input { margin-top: 2px; accent-color: var(--sky-700); }
.exp-check--field { flex-shrink: 0; padding-bottom: 9px; white-space: nowrap; }
.exp-varline { font: 400 12px/17px var(--font-sans); color: var(--text-secondary-color); margin-top: -6px; }
.exp-varline code {
  font: 600 12px/1 var(--font-mono);
  background: var(--sky-200, #e8f3ff);
  color: var(--sky-900, #0074d8);
  padding: 3px 7px;
  border-radius: 4px;
}

.exp-resp { display: flex; flex-direction: column; gap: 10px; }
.exp-resp__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.exp-status { padding: 3px 8px; border-radius: 5px; font: 700 12px/16px var(--font-mono); }
.exp-status--ok { background: var(--green-200); color: var(--green-900); }
.exp-status--warn { background: var(--orange-200, #ffedd3); color: var(--orange-900, #b45309); }
.exp-status--bad { background: var(--red-200); color: var(--red-900); }
.exp-resp__stat { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.exp-resp__pre {
  margin: 0;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--navy-950);
  color: #dce6f2;
  font: 400 11.5px/1.6 var(--font-mono);
  overflow: auto;
  max-height: 420px;
  white-space: pre-wrap;
  word-break: break-word;
}
.exp-resp__pre--req { background: var(--navy-900, #1f2b3d); max-height: 300px; }
.exp-resp-empty { font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.exp-resp-empty code { font: 500 11px/1.5 var(--font-mono); background: var(--surface-100, #f2f4f6); padding: 1px 5px; border-radius: 4px; }

.sim-pane--frame { padding: 0; }
.wf-frame { display: block; width: 100%; height: 480px; border: 0; background: #fff; }
.wf-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--content-border-color);
  background: var(--surface-50, #f7f8f9);
  font: 400 12px/17px var(--font-sans);
  color: var(--text-secondary-color);
}
.wf-step__badge {
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--sky-200, #e8f3ff);
  color: var(--sky-900, #0074d8);
  font: 700 11px/16px var(--font-sans);
  white-space: nowrap;
}
.wf-step__label { flex: 1; min-width: 0; }
.wf-step a { white-space: nowrap; }

.wf-lc-detail--flat { margin-left: 0; }

.wf-pagetoggle {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--content-border-color);
  background: var(--surface-50, #f7f8f9);
}
.wf-pagetoggle__btn {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--content-border-color);
  border-radius: 13px;
  background: var(--content-background);
  color: var(--text-secondary-color);
  font: 600 12px/1 var(--font-sans);
  cursor: pointer;
}
.wf-pagetoggle__btn:hover { color: var(--navy-950); }
.wf-pagetoggle__btn.is-active {
  background: var(--navy-950);
  border-color: var(--navy-950);
  color: #fff;
}

.wf-sub { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.wf-sub--single { grid-template-columns: minmax(0, 1fr); }
.wf-sub__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 980px) { .wf-sub { grid-template-columns: minmax(0, 1fr); } }

.wf-lc-strip {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--content-border-color);
  background: var(--surface-50, #f7f8f9);
}
.wf-lc-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -2px 0 4px 24px;
}

/* Lead journey player */
.jr-step-title { font: 700 17px/23px var(--font-sans); color: var(--navy-950); }
.jr-prompt {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--sky-200, #e8f3ff);
  color: var(--sky-900, #0074d8);
  font: 600 13px/19px var(--font-sans);
}
.jr-prompt i { font-size: 17px; flex-shrink: 0; margin-top: 1px; }
.jr-stage--now .sim-check__body > span { font-weight: 700; color: var(--navy-950); }
.jr-stage--now i { color: var(--sky-700, #0176d3); }
.jr-callbtn {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 22px;
  border: 2px solid var(--green-700, #2e844a);
  border-radius: 12px;
  background: var(--green-100, #f4fbf6);
  cursor: pointer;
  font: 400 13px/18px var(--font-sans);
  color: var(--green-900, #194e31);
}
.jr-callbtn:hover { background: var(--green-200, #e3f6e9); }
.jr-callbtn i { font-size: 26px; color: var(--green-700, #2e844a); }
.jr-callbtn__num { font: 700 24px/30px var(--font-sans); letter-spacing: 0.02em; }
.jr-callbtn em { font-style: normal; color: var(--text-secondary-color); }
.jr-call { border: 1px solid var(--content-border-color); border-radius: 12px; overflow: hidden; }
.jr-call__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--navy-950);
  color: #dce6f2;
  font: 600 12px/17px var(--font-sans);
}
.jr-call__head > span:first-of-type { flex: 1; min-width: 0; }
.jr-call__rec { display: inline-flex; align-items: center; gap: 4px; color: #ff8a8a; font: 700 10px/1 var(--font-sans); letter-spacing: 0.08em; }
.jr-call__rec i { font-size: 8px; }
.jr-call__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-50, #f7f8f9); }
.jr-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  font: 400 13px/19px var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jr-msg__who { font: 700 10px/14px var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
.jr-msg--agent { align-self: flex-start; background: var(--content-background); border: 1px solid var(--content-border-color); }
.jr-msg--you { align-self: flex-end; background: var(--sky-200, #e8f3ff); color: var(--navy-950); }
.jr-msg--buyer { align-self: flex-start; background: var(--green-100, #f4fbf6); border: 1px solid var(--green-400, #c4e8d1); }
.jr-reply { align-self: flex-end; margin-top: 4px; }
.ck-site {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-top: 4px solid var(--ck-brand, #1b96ff);
  border-bottom: 1px solid #e5e8eb;
}
.ck-site__logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ck-brand, #1b96ff);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 12px/1 var(--font-sans);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ck-site__name { font: 800 15px/20px var(--font-sans); color: #1a1a1a; }
.ck-site__tag { margin-left: auto; font: 400 11px/15px var(--font-sans); color: #8a8a8a; font-style: italic; }
.ck-brand .mock-submit { background: var(--ck-brand, #1b96ff); }
.ck-brand .ck-card__btn { background: var(--ck-brand, #1b96ff); }
.ck-brand .ck-card__btn:hover { filter: brightness(0.85); }

.ck-away .mock-body { background: var(--ck-bg, #f5f7fa); }
.ck-away .ck-site { background: var(--ck-bg, #f5f7fa); }
.ck-received {
  margin-top: 12px;
  border: 1px solid #d9e6d9;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.ck-received__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: #f0f9f1;
  border-bottom: 1px solid #d9e6d9;
  font: 700 11px/15px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1e7a3a;
}
.ck-received__head i { font-size: 14px; }
.ck-received__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #f0f2f4;
  font: 400 12.5px/17px var(--font-sans);
  color: #666;
}
.ck-received__row:last-child { border-bottom: 0; }
.ck-received__row code { font: 600 12px/17px var(--font-mono); color: #222; }

.ck-qual { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ck-qual__q { font: 700 13px/18px var(--font-sans); color: #222; }
.ck-qual__opts { display: flex; gap: 8px; }
.ck-pill {
  flex: 1;
  padding: 10px 0;
  border: 1.5px solid #d5d9de;
  border-radius: 8px;
  background: #fff;
  font: 600 13px/1 var(--font-sans);
  color: #444;
  cursor: pointer;
}
.ck-pill:hover { border-color: var(--ck-brand, #1b96ff); }
.ck-pill.is-on {
  border-color: var(--ck-brand, #1b96ff);
  background: var(--ck-brand, #1b96ff);
  color: #fff;
}

.ck-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--content-border-color);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  background: var(--content-background);
}
.ck-card__logo {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface-100, #f2f4f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 13px/1 var(--font-sans);
  color: var(--navy-800, #384453);
  flex-shrink: 0;
}
.ck-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-card__name { font: 700 14px/19px var(--font-sans); color: var(--navy-950); }
.ck-card__meta { font: 400 11.5px/16px var(--font-sans); color: var(--text-secondary-color); }
.ck-card__meta em {
  font-style: normal;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--surface-100, #f2f4f6);
  font: 600 9.5px/14px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ck-card__btn {
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: #1b96ff;
  color: #fff;
  font: 600 12.5px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
}
.ck-card__btn:hover { background: #0b5cab; }
.jr-explain { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.jr-explain code { font: 500 12px/1.5 var(--font-mono); background: var(--surface-100, #f2f4f6); padding: 1px 5px; border-radius: 4px; }
.jr-hi {
  outline: 2px solid var(--sky-700, #0176d3);
  background: var(--sky-200, #e8f3ff);
  border-radius: 8px;
  padding: 10px !important;
}
/* In the explanation panel the flex gap already spaces it; the margin is only
   for the mock-page contexts that still stack one inline. */
.sim-task > .jr-backstage, .sim-task > [data-jr-backstage] > .jr-backstage { margin-top: 0; }
.sim-task > [data-jr-backstage]:empty { display: none; }
.jr-backstage {
  margin-top: 14px;
  border-radius: 10px;
  background: var(--navy-950);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.jr-backstage__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 10.5px/15px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8ea2bd;
}
.jr-brow { display: flex; align-items: center; gap: 8px; font: 400 12px/17px var(--font-mono); color: #dce6f2; }
.jr-brow i { color: #55677f; font-size: 15px; flex-shrink: 0; }
.jr-brow--win i { color: #ffd43b; }
.jr-brow--sent i { color: #61d1ff; }
.jr-brow span { flex: 1; min-width: 0; }
.jr-brow code { color: #b8e6c3; white-space: nowrap; }
/* In the narrower explanation panel a long note wraps to its own line rather
   than squeezing the buyer's name down to one word per line. */
.sim-task .jr-brow { flex-wrap: wrap; row-gap: 2px; }
.sim-task .jr-brow span { min-width: 45%; }
.sim-task .jr-brow code { margin-left: auto; }

/* Ping/post wire (pingpost-seller / pingpost-buyer) */
.pp { display: flex; flex-direction: column; gap: 18px; }

.pp-track { display: flex; align-items: flex-start; }
.pp-track__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  min-width: 0;
}
.pp-track__step:disabled { cursor: default; }
.pp-track__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--surface-400, #e0e0e0);
  background: #fff;
  font: 700 11px/1 var(--font-sans);
  color: var(--text-secondary-color);
}
.pp-track__dot i { font-size: 13px; }
.pp-track__step.is-done .pp-track__dot { border-color: var(--green-700, #2e844a); color: var(--green-700, #2e844a); }
.pp-track__step.is-now .pp-track__dot { border-color: var(--sky-700, #0176d3); background: var(--sky-700, #0176d3); color: #fff; }
.pp-track__label { font: 600 10.5px/13px var(--font-sans); color: var(--text-secondary-color); text-align: center; white-space: nowrap; }
.pp-track__step.is-now .pp-track__label { color: var(--navy-950); }
.pp-track__bar { flex: 1 1 18px; height: 2px; margin-top: 11px; background: var(--surface-300, #e6e9ec); min-width: 10px; }
.pp-track__bar.is-done { background: var(--sky-700, #0176d3); }

.pp-wire { display: flex; align-items: stretch; gap: 8px; }
.pp-node {
  flex: 0 1 132px;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--content-border-color);
  border-radius: 10px;
  background: var(--surface-50, #f7f8f9);
  text-align: center;
}
.pp-node--live { border-color: var(--sky-500, #57a3fd); background: #fff; box-shadow: 0 1px 6px rgba(33, 43, 53, .08); }
.pp-node__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-100, #f2f4f6);
  color: var(--navy-700, #52616f);
  font-size: 18px;
  margin-bottom: 4px;
}
.pp-node--live .pp-node__icon { background: var(--sky-200, #e8f3ff); color: var(--sky-700, #0176d3); }
.pp-node__name { font: 700 12px/16px var(--font-sans); color: var(--navy-950); }
.pp-node__sub { font: 400 10.5px/14px var(--font-sans); color: var(--text-secondary-color); }
.pp-roster { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; width: 100%; }
.pp-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font: 600 10px/14px var(--font-sans);
  color: var(--navy-800, #384453);
  background: var(--surface-100, #f2f4f6);
  border-radius: 5px;
  padding: 2px 6px;
}
.pp-mini code { font: 500 9.5px/13px var(--font-mono); white-space: nowrap; color: var(--text-secondary-color); }
.pp-mini--ok code { color: var(--green-700, #2e844a); }
.pp-mini--win { background: var(--sky-200, #e8f3ff); }
.pp-mini--win code { color: var(--sky-700, #0176d3); font-weight: 700; }
.pp-mini--out { opacity: .55; }
.pp-mini--out code { color: var(--red-700, #ba0517); }

.pp-seg { flex: 1 1 40px; min-width: 34px; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 5px; }
.pp-lane { position: relative; height: 2px; border-radius: 1px; color: var(--sky-700, #0176d3); background: color-mix(in srgb, currentColor 30%, transparent); }
.pp-lane--bid { color: var(--green-700, #2e844a); }
.pp-lane--pii { color: var(--red-700, #ba0517); }
.pp-lane--off { color: var(--surface-400, #e0e0e0); background: var(--surface-300, #e6e9ec); }
.pp-lane i { position: absolute; top: -6.5px; font-size: 14px; }
.pp-lane--fwd i { right: -5px; }
.pp-lane--back i { left: -5px; }
.pp-lane--fwd::after, .pp-lane--back::after {
  content: '';
  position: absolute;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pp-lane--fwd::after { animation: pp-dot-fwd 1.5s linear infinite; }
.pp-lane--back::after { animation: pp-dot-back 1.5s linear infinite; }
@keyframes pp-dot-fwd { from { left: 0; } to { left: calc(100% - 6px); } }
@keyframes pp-dot-back { from { right: 0; } to { right: calc(100% - 6px); } }
@media (prefers-reduced-motion: reduce) {
  .pp-lane--fwd::after, .pp-lane--back::after { animation: none; display: none; }
}

.pp-flows { display: flex; flex-direction: column; gap: 10px; }
.pp-flow { border: 1px solid var(--content-border-color); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.pp-flow__head { display: flex; align-items: center; gap: 7px; font: 700 12px/16px var(--font-sans); color: var(--navy-950); }
.pp-flow__head i { font-size: 16px; color: var(--sky-700, #0176d3); }
.pp-flow__head--bid i { color: var(--green-700, #2e844a); }
.pp-flow__head--pii i { color: var(--red-700, #ba0517); }
.pp-flow__head code { margin-left: auto; font: 600 10.5px/1 var(--font-mono); background: var(--surface-100, #f2f4f6); padding: 3px 6px; border-radius: 4px; color: var(--navy-800, #384453); white-space: nowrap; }
.pp-flow__note { font: 400 11.5px/16px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--content-border-color);
  background: var(--surface-50, #f7f8f9);
  border-radius: 6px;
  padding: 3px 7px;
  font: 600 10.5px/14px var(--font-sans);
  color: var(--navy-800, #384453);
}
.pp-chip code { font: 500 10.5px/14px var(--font-mono); color: var(--navy-950); }
.pp-chip i { font-size: 11px; }
.pp-chip--pii { border-color: rgba(186, 5, 23, .35); background: rgba(186, 5, 23, .05); color: var(--red-700, #ba0517); }
.pp-chip--pii code { color: var(--red-700, #ba0517); }

.pp-ledger { display: flex; flex-direction: column; gap: 7px; border: 1px solid var(--content-border-color); border-radius: 10px; padding: 12px; background: var(--surface-50, #f7f8f9); }
.pp-ledger__row { display: flex; gap: 9px; font: 400 12.5px/18px var(--font-sans); color: var(--navy-800, #384453); }
.pp-ledger__row i { font-size: 16px; flex-shrink: 0; margin-top: 1px; color: var(--sky-700, #0176d3); }

.pp-key { display: flex; align-items: center; gap: 7px; font: 400 11px/15px var(--font-sans); color: var(--text-secondary-color); }
.pp-nav { display: flex; align-items: center; gap: 8px; }

@media (max-width: 760px) {
  .pp-wire { overflow-x: auto; padding-bottom: 4px; }
  .pp-node { flex-shrink: 0; }
  .pp-seg { flex-shrink: 0; }
  .pp-track { overflow-x: auto; padding-bottom: 4px; }
  .pp-track__step { flex-shrink: 0; }
  .pp-track__bar { flex-shrink: 1; }
}

/* CRM experience */
.crm-table-wrap { overflow-x: auto; }
.crm-table { width: 100%; border-collapse: collapse; font: 400 12.5px/17px var(--font-sans); }
.crm-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--content-border-color);
  font: 700 10.5px/15px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary-color);
  white-space: nowrap;
}
.crm-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--surface-100, #f2f4f6);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--navy-800, #384453);
}
.crm-row { cursor: pointer; }
.crm-row:hover td { background: var(--surface-50, #f7f8f9); }
.crm-row.is-selected td { background: var(--sky-200, #e8f3ff); }
.crm-more {
  font: 600 10.5px/1 var(--font-sans);
  background: var(--surface-100, #f2f4f6);
  color: var(--text-secondary-color);
  border-radius: 9px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Guided learning path */
.view--path { max-width: 880px; gap: 20px; }
.path-summary { display: flex; flex-direction: column; gap: 8px; }
.path-list { display: flex; flex-direction: column; gap: 0; }
.path-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  position: relative;
}
.path-step + .path-step { border-top: 1px solid var(--content-border-color); }
.path-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-100, #f2f4f6);
  color: var(--navy-800, #384453);
  font: 700 13px/1 var(--font-sans);
  margin-top: 2px;
}
.path-step--done .path-step__num { background: var(--green-700, #2e844a); color: #fff; }
.path-step--current .path-step__num { background: var(--sky-700, #0176d3); color: #fff; }
.path-step__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.path-step__toprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.path-step__icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--sky-200, #e8f3ff);
  color: var(--sky-900, #0074d8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.path-step__title { font: 700 15px/20px var(--font-sans); color: var(--navy-950); }
.path-step__meta { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.path-step__why { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.path-step__progress { display: flex; align-items: center; gap: 10px; max-width: 320px; }
.path-step__progress .ap-progress { flex: 1; }
.path-step__pct { font: 400 11.5px/15px var(--font-sans); color: var(--text-secondary-color); white-space: nowrap; }
.path-step > .ap-btn { flex-shrink: 0; margin-top: 6px; }
.path-electives { margin-top: 8px; border-top: 2px solid var(--content-border-color); }
.path-electives__head {
  margin: 16px 0 4px;
  font: 700 12px/16px var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary-color);
}
.path-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--content-border-color);
  border-radius: 12px;
  background: var(--content-background);
}
.path-cta > i { font-size: 26px; color: var(--sky-700, #0176d3); flex-shrink: 0; }
.path-cta__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.path-cta__title { font: 700 14px/19px var(--font-sans); color: var(--navy-950); }
.path-cta__sub { font: 400 12.5px/17px var(--font-sans); color: var(--text-secondary-color); }
@media (max-width: 700px) { .path-step { flex-wrap: wrap; } }

/* LeadConduit flow lab (API-checked steps) */
.lclab-step {
  border: 1px solid var(--content-border-color);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lclab-step--done { border-color: var(--green-400, #9fd3a8); background: var(--green-100, #f2faf4); }
.lclab-step__head { display: flex; align-items: center; gap: 10px; }
.lclab-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-100, #f2f4f6);
  color: var(--navy-800, #384453);
  font: 700 12px/1 var(--font-sans);
}
.lclab-step--done .lclab-step__num { background: var(--green-700, #2e844a); color: #fff; }
.lclab-step__title { flex: 1; min-width: 0; font: 700 14px/19px var(--font-sans); }
.lclab-step__body { font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.lclab-step__body code { font: 500 11px/1.5 var(--font-mono); background: var(--surface-100, #f2f4f6); padding: 1px 5px; border-radius: 4px; }
.lclab-step__result:empty { display: none; }
.lclab-data { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
/* Scenario rail — five customer scenarios across the top of the lab */
.lclab-rail { display: flex; gap: 8px; flex-wrap: wrap; }
.lclab-rail__item {
  flex: 1 1 150px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--content-background);
  cursor: pointer;
  text-align: left;
  font: 400 12px/16px var(--font-sans);
  color: var(--navy-800, #384453);
}
.lclab-rail__num {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-100, #f2f4f6);
  font: 700 11px/1 var(--font-sans);
}
.lclab-rail__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lclab-rail__count { flex-shrink: 0; font: 600 11px/1 var(--font-sans); color: var(--text-secondary-color); }
.lclab-rail__item:hover:not(:disabled) { border-color: var(--sky-700); }
.lclab-rail__item--current { border-color: var(--sky-700, #0176d3); background: var(--sky-100, #f2f8ff); }
.lclab-rail__item--current .lclab-rail__label { font-weight: 700; }
.lclab-rail__item--done { border-color: var(--green-400, #9fd3a8); }
.lclab-rail__item--done .lclab-rail__num { background: var(--green-700, #2e844a); color: #fff; }
.lclab-rail__item--locked { opacity: .5; cursor: default; }

/* Scenario intro — the customer's own words, then what you will do */
.lclab-intro { display: flex; flex-direction: column; gap: 12px; }
.lclab-intro__kicker { font: 700 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--sky-700, #0176d3); }
.lclab-intro__title { font: 700 19px/25px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.lclab-note {
  border-left: 3px solid var(--sky-700, #0176d3);
  background: var(--sky-100, #f2f8ff);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.lclab-note__kind {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary-color);
}
.lclab-note__body { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.lclab-fact { display: flex; gap: 9px; }
.lclab-fact > i { color: var(--sky-700, #0176d3); font-size: 16px; flex-shrink: 0; }
.lclab-intro__tasks {
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.lclab-intro__taskshead { font: 700 12px/17px var(--font-sans); color: var(--navy-950); }
.lclab-intro__tasks .lclab-data { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); }
.lclab-tick { display: inline-flex; align-items: center; gap: 3px; font: 600 11px/1 var(--font-sans); color: var(--green-700, #2e844a); }

/* Task screen — which scenario this belongs to, and the tasks inside it */
.lclab-crumb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lclab-crumb__sc { flex: 1; min-width: 0; font: 700 12px/17px var(--font-sans); color: var(--navy-950); }
.lclab-crumb__link {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font: 600 12px/17px var(--font-sans); color: var(--sky-700, #0176d3);
}
.lclab-crumb__link:hover { text-decoration: underline; }
.lclab-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lclab-chip {
  padding: 4px 10px;
  border: 1px solid var(--content-border-color);
  border-radius: 999px;
  background: var(--content-background);
  cursor: pointer;
  font: 600 11px/16px var(--font-sans);
  color: var(--text-secondary-color);
}
.lclab-chip:hover:not(:disabled) { border-color: var(--sky-700); }
.lclab-chip--current { border-color: var(--sky-700, #0176d3); color: var(--sky-700, #0176d3); }
.lclab-chip--done { border-color: var(--green-400, #9fd3a8); background: var(--green-100, #f2faf4); color: var(--green-700, #2e844a); }
.lclab-chip:disabled { opacity: .5; cursor: default; }
.lclab-nav { display: flex; gap: 10px; }
.lclab-nav:empty { display: none; }

.lclab-debug summary {
  cursor: pointer;
  font: 600 12px/17px var(--font-sans);
  color: var(--text-secondary-color);
}
.lclab-debug summary:hover { color: var(--navy-950); }
.lclab-debug[open] summary { margin-bottom: 8px; }

/* SuppressionList training terminal */
.sl-templates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.term { border-radius: 10px; overflow: hidden; background: var(--navy-950); display: flex; flex-direction: column; }
.term__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--navy-900, #1f2b3d);
  color: #8ea2bd;
  font: 600 11px/1 var(--font-sans);
}
.term__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.term__dot--r { background: #ff5f57; }
.term__dot--y { background: #febc2e; }
.term__dot--g { background: #28c840; }
.term__title { flex: 1; text-align: center; }
.term__clear { background: none; border: 0; padding: 0; color: #8ea2bd; font: 600 11px/1 var(--font-mono); cursor: pointer; }
.term__clear:hover { color: #dce6f2; }
.term__body {
  padding: 14px 16px;
  min-height: 200px;
  max-height: 420px;
  overflow: auto;
  font: 400 11.5px/1.6 var(--font-mono);
  color: #dce6f2;
  white-space: pre-wrap;
  word-break: break-word;
}
.term__line + .term__line { margin-top: 10px; }
.term__ps1 { color: #61d1ff; }
.term__line--out { color: #b8e6c3; }
.term__line--err { color: #ff9d9d; }
.term__line--info { color: #8ea2bd; }
.term__prompt {
  display: flex;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--navy-900, #1f2b3d);
  font: 400 11.5px/1.6 var(--font-mono);
}
.term__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  padding: 0;
  color: #dce6f2;
  font: inherit;
  caret-color: #61d1ff;
}
.term__input::placeholder { color: #55677f; }

.ti-spin { animation: ap-spin 1s linear infinite; }
@keyframes ap-spin { to { transform: rotate(360deg); } }

/* ---------- Lead Routing waterfall ---------- */

.rt-list { display: flex; flex-direction: column; gap: 14px; }
.rt-route {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--content-border-color);
  border-radius: 10px;
  background: var(--surface-50, #f7f8f9);
}
.rt-route__head { display: flex; align-items: center; gap: 8px; }
.rt-route__name { flex: 1; min-width: 0; font-weight: 600; }
.rt-iconbtn {
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--content-border-color);
  border-radius: 6px;
  background: var(--content-background);
  color: var(--text-secondary-color);
  cursor: pointer;
  font-size: 14px;
}
.rt-iconbtn:hover:not(:disabled) { color: var(--navy-950); border-color: var(--surface-600, #bbb); }
.rt-iconbtn:disabled { opacity: 0.35; cursor: default; }
.rt-iconbtn--danger:hover:not(:disabled) { color: var(--red-700); border-color: var(--red-500); }

.rt-rules { display: flex; flex-direction: column; gap: 8px; }
.rt-rule {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.rt-rule .exp-select { width: auto; }
.rt-rule__novalue { min-width: 0; }
.rt-addrule { align-self: flex-start; }

.rt-trace { display: flex; flex-direction: column; }
.rt-trace__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 4px;
  border-bottom: 1px dashed var(--content-border-color);
}
.rt-trace__row:last-child { border-bottom: 0; }
.rt-trace__row > i { font-size: 17px; margin-top: 1px; }
.rt-trace__num {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-200, #eaedf0);
  color: var(--text-secondary-color);
  font: 700 11px/1 var(--font-sans);
}
.rt-trace__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rt-trace__name { font: 600 13px/18px var(--font-sans); }
.rt-trace__detail { font: 400 12px/17px var(--font-sans); color: var(--text-secondary-color); }
.rt-trace__row--delivered > i { color: var(--green-700); }
.rt-trace__row--delivered .rt-trace__num { background: var(--green-200); color: var(--green-900); }
.rt-trace__row--passed > i { color: var(--orange-700, #b45309); }
.rt-trace__row--no_url > i { color: var(--red-700); }
.rt-trace__row--skipped { opacity: 0.6; }
.rt-trace__row--skipped > i { color: var(--surface-600, #bbb); }

/* ---------- Lesson footer nav ---------- */

.lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; }
.lesson-nav__right { display: flex; align-items: center; gap: 12px; }
.lesson-nav__position { font: 400 13px/18px var(--font-sans); color: var(--text-secondary-color); }

/* ---------- Admin analytics dashboard (admin.js) ---------- */

.view--admin { max-width: 1320px; gap: 20px; padding-bottom: 32px; }

.adm-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adm-toolbar .ap-tabs { flex: 1 1 420px; }
.adm-toolbar .ap-tabs__tab { display: inline-flex; align-items: center; gap: 6px; }
.adm-toolbar .ap-tabs__tab i { font-size: 15px; }
.adm-range { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; }

.adm-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.adm-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.adm-card__title { font: 600 15px/20px var(--font-sans); }
.adm-muted { font: 400 12px/17px var(--font-sans); color: var(--text-secondary-color); }
.adm-metric__sub { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); margin-top: -8px; }
.adm-empty {
  padding: 28px 4px;
  text-align: center;
  font: 400 13px/18px var(--font-sans);
  color: var(--text-secondary-color);
}

/* Tables. Wide by nature — they scroll inside the card, never the page. */
.adm-table-wrap { overflow-x: auto; margin: 0 -4px; }
.adm-table { width: 100%; border-collapse: collapse; font: 400 13px/18px var(--font-sans); }
.adm-table th {
  position: sticky;
  top: 0;
  background: var(--card-background, #fff);
  text-align: left;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--content-border-color);
  font: 600 11px/16px var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary-color);
  white-space: nowrap;
}
.adm-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-100, #f2f4f6);
  vertical-align: middle;
}
.adm-table tbody tr:last-child td { border-bottom: 0; }
/* The name column carries the title + its subtitle: give it room so titles
   don't wrap to three lines while numeric columns sit half empty. */
.adm-table td:first-child, .adm-table th:first-child { min-width: 260px; }
.adm-table .adm-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-strong { display: block; font: 600 13px/18px var(--font-sans); }
.adm-sub { display: block; font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.adm-row--link { cursor: pointer; }
.adm-row--link:hover td, .adm-row--link:focus-visible td { background: var(--surface-100, #f2f4f6); }
.adm-row--link:focus-visible { outline: 2px solid var(--primary-color); outline-offset: -2px; }

/* Share bar: the number is the value, the bar only makes the column scannable. */
.adm-share { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.adm-share__bar { flex: 1; height: 6px; border-radius: 4px; background: var(--surface-200, #eaedf0); overflow: hidden; }
.adm-share__fill { display: block; height: 100%; border-radius: 4px; background: var(--primary-color); }
.adm-share__label { font: 600 12px/16px var(--font-sans); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }

/* Per-option answer distribution; the correct option is the one marked green. */
.adm-dist { display: flex; flex-direction: column; gap: 3px; min-width: 180px; }
.adm-dist__row { display: flex; align-items: center; gap: 8px; }
.adm-dist__letter { width: 12px; font: 600 11px/16px var(--font-sans); color: var(--text-secondary-color); }
.adm-dist__bar { flex: 1; height: 6px; border-radius: 4px; background: var(--surface-200, #eaedf0); overflow: hidden; }
.adm-dist__fill { display: block; height: 100%; border-radius: 4px; background: var(--surface-600, #9aa5b1); }
.adm-dist__row--right .adm-dist__fill { background: var(--green-700, #15803d); }
.adm-dist__row--right .adm-dist__letter { color: var(--green-700, #15803d); }
.adm-dist__n { width: 26px; text-align: right; font: 400 11px/16px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text-secondary-color); }

/* Daily activity: one series, one axis. Learners and quizzes are in the tooltip. */
.adm-chart { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 4px 8px; }
.adm-chart__scale {
  grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  height: 160px;
  font: 400 11px/14px var(--font-sans);
  color: var(--text-secondary-color);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.adm-chart__plot {
  grid-row: 1;
  display: flex; align-items: flex-end; gap: 2px;
  height: 160px;
  border-bottom: 1px solid var(--content-border-color);
}
.adm-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; cursor: default; }
.adm-bar__fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--primary-color);
  transition: background .12s ease;
}
.adm-bar:hover .adm-bar__fill, .adm-bar:focus-visible .adm-bar__fill { background: var(--text-primary-color, #111); }
.adm-bar:focus-visible { outline: none; }
.adm-chart__axis {
  grid-column: 2;
  display: flex; gap: 2px;
  font: 400 10px/14px var(--font-sans);
  color: var(--text-secondary-color);
}
.adm-chart__axis span { flex: 1; min-width: 3px; text-align: center; white-space: nowrap; }
.adm-tooltip {
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--text-primary-color, #111);
  color: #fff;
  font: 400 12px/16px var(--font-sans);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
.adm-tooltip[hidden] { display: none; }

/* ---------- Rule builder simulation ----------
   A replica of the LeadConduit criteria row: grip, field, sub-field,
   operator, value with the '#' hint, and a row action on the right. */
/* The builder needs the full width for five controls per row, so the task
   panel stacks underneath rather than sitting beside it. */
.sim--rb { grid-template-columns: minmax(0, 1fr); }
.sim--rb .sim-task { grid-column: 1 / -1; }
.rb-pane { padding: 20px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rb-filterhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.rb-filterhead__label {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 13px/18px var(--font-sans); color: var(--navy-800, #384453);
}
.rb-filterhead__label i { color: var(--sky-700); font-size: 17px; }

.rb-rows { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.rb-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.4fr) 34px;
  align-items: start;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--surface-100, #f2f4f6);
}
@media (max-width: 1180px) {
  .rb-row { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 34px; }
  .rb-row .rb-valuewrap { grid-column: 2 / 4; }
}
.rb-grip { color: var(--surface-600, #bbb); font-size: 16px; line-height: 34px; cursor: help; }
.rb-select, .rb-value {
  height: 34px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--surface-600, #bbb);
  border-radius: calc(var(--form-field-border-radius) * 1px);
  background: #fff;
  font: 400 13px/1 var(--font-sans);
  color: var(--navy-950);
}
.rb-select:focus, .rb-value:focus { outline: none; border-color: var(--sky-700); box-shadow: 0 0 0 1px var(--sky-700); }
.rb-select--empty { color: var(--text-secondary-color); background: var(--surface-50, #f7f8f9); }
.rb-select--join { height: 34px; width: auto; max-width: 320px; font-weight: 600; }
.rb-valuewrap { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rb-hint { font: italic 400 11.5px/15px var(--font-sans); color: var(--text-secondary-color); }
.rb-value--off {
  display: flex; align-items: center;
  background: var(--surface-50, #f7f8f9);
  color: var(--text-secondary-color);
  font: italic 400 12px/1 var(--font-sans);
  border-style: dashed;
}
.rb-icon {
  height: 34px; width: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--surface-600, #bbb);
  border-radius: calc(var(--form-field-border-radius) * 1px);
  background: #fff;
  color: var(--text-secondary-color);
  cursor: pointer;
}
.rb-icon:hover { color: var(--red-700); border-color: var(--red-700); }

/* Live verdict table */
.rb-results { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.rb-results__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rb-results__title { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/18px var(--font-sans); color: var(--navy-800, #384453); }
.rb-results__title i { color: var(--sky-700); font-size: 16px; }
.rb-tally {
  padding: 3px 9px; border-radius: 10px;
  font: 700 11.5px/16px var(--font-sans);
  background: var(--surface-100, #f2f4f6); color: var(--text-secondary-color);
}
.rb-tally--all { background: var(--green-200); color: var(--green-900); }
.rb-tablewrap { width: 100%; overflow-x: auto; }
.rb-table { width: 100%; min-width: 520px; border-collapse: collapse; font: 400 12.5px/17px var(--font-sans); }
.rb-table th {
  text-align: left; padding: 7px 10px;
  font: 600 11px/15px var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-secondary-color);
  border-bottom: 1px solid var(--content-border-color);
  white-space: nowrap;
}
.rb-table td { padding: 8px 10px; border-bottom: 1px solid var(--surface-100, #f2f4f6); vertical-align: middle; }
.rb-table td code { font: 500 11.5px/1.4 var(--font-mono); color: var(--navy-800, #384453); }

.rb-tr--ok { background: rgba(22, 163, 74, .05); }
.rb-tr--bad { background: rgba(220, 38, 38, .05); }
.rb-table .rb-ok { color: var(--green-700); font-size: 15px; vertical-align: -2px; margin-left: 4px; }
.rb-table .rb-bad { color: var(--red-700); font-size: 15px; vertical-align: -2px; margin-left: 4px; }
.rb-verdict { display: inline-block; padding: 2px 8px; border-radius: 5px; font: 600 11.5px/16px var(--font-sans); white-space: nowrap; }
.rb-verdict--stop { background: var(--red-200); color: var(--red-900); }
.rb-verdict--go { background: var(--green-200); color: var(--green-900); }
.rb-verdict--idle { background: var(--surface-100, #f2f4f6); color: var(--text-secondary-color); }
.rb-td--name { font-weight: 600; }
.rb-td__note {
  display: block;
  margin-top: 2px;
  font: 400 11.5px/16px var(--font-sans);
  color: var(--text-secondary-color);
  font-weight: 400;
  white-space: normal;
  max-width: 230px;
  text-wrap: pretty;
}

/* A rule the learner hasn't finished: visibly inert, with a line saying so */
.rb-row--unset { border: 1px dashed var(--surface-600, #bbb); background: var(--surface-50, #f7f8f9); }
.rb-rownote {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font: italic 400 12px/17px var(--font-sans);
  color: var(--text-secondary-color);
}
.rb-rownote i { font-style: normal; font-size: 14px; }

/* Task panel bits */
.rb-goal {
  display: flex; gap: 9px;
  padding: 12px 14px; border-radius: 8px;
  background: var(--sky-100, #f2f8ff);
  font: 400 13.5px/20px var(--font-sans); color: var(--navy-800, #384453);
  text-wrap: pretty;
}
.rb-goal i { color: var(--sky-700); font-size: 18px; flex-shrink: 0; }
.rb-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-help { font: 400 13px/19px var(--font-sans); color: var(--navy-800, #384453); }
.rb-help summary { cursor: pointer; font-weight: 600; color: var(--sky-700); }
.rb-hintlist { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; text-wrap: pretty; }
.rb-hintlist code, .rb-answer code, .rb-goal code {
  font: 500 12px/1 var(--font-mono);
  background: var(--surface-100, #f2f4f6);
  padding: 2px 5px; border-radius: 4px;
}
.rb-answer {
  padding: 12px 14px; border-radius: 8px;
  background: var(--surface-50, #f7f8f9);
  border: 1px dashed var(--content-border-color);
  font: 400 13px/20px var(--font-sans); color: var(--navy-800, #384453);
  text-wrap: pretty;
}

/* ---------- Step diagrams (@flow blocks) ----------
   A flow read top to bottom. Three tones do the teaching: "ask" steps call
   something and write the answer down, "send" steps hand the lead over, and
   "stop" steps are the only ones that can end its journey. */
.block-flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 0;
}
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 26px 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 12px;
  border: 1px solid var(--content-border-color);
  border-left: 3px solid var(--surface-600, #bbb);
  border-radius: 8px;
  background: var(--content-background, #fff);
}
/* The connector between consecutive steps */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: 24px;
  top: -7px;
  height: 7px;
  border-left: 2px dotted var(--surface-600, #bbb);
}
.flow-step__num {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-100, #f2f4f6);
  color: var(--text-secondary-color);
  font: 700 12px/1 var(--font-mono);
}
.flow-step__role {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11.5px/16px var(--font-sans);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flow-step__role i { font-size: 15px; }
.flow-step__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flow-step__label { font: 400 14px/20px var(--font-sans); color: var(--navy-900, #22303f); text-wrap: pretty; }
.flow-step__label code, .flow-step__detail code {
  font: 500 12px/1 var(--font-mono);
  background: var(--surface-100, #f2f4f6);
  padding: 2px 5px;
  border-radius: 4px;
}
.flow-step__detail { font: 400 12.5px/18px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.flow-step__if {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-100, #f2f4f6);
  color: var(--text-secondary-color);
  font: 700 10.5px/15px var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
/* Tones */
.flow-step--ask { border-left-color: var(--sky-700); }
.flow-step--ask .flow-step__role { color: var(--sky-900, #0074d8); }
.flow-step--send { border-left-color: var(--green-700); background: rgba(22, 163, 74, .035); }
.flow-step--send .flow-step__role { color: var(--green-900); }
.flow-step--stop { border-left-color: var(--red-700); background: rgba(220, 38, 38, .035); }
.flow-step--stop .flow-step__role { color: var(--red-900); }
.flow-step--done { border-left-color: var(--green-700); }
.flow-step--done .flow-step__role { color: var(--green-900); }
.flow-step--bad { border-color: var(--red-500, #ef4444); background: rgba(220, 38, 38, .06); }
.flow-step__warn { color: var(--red-700); font-size: 15px; margin-right: 5px; vertical-align: -2px; }

/* Narrow screens: the role chip moves above the text so the label gets the
   full width instead of wrapping every few words. */
@media (max-width: 900px) {
  .flow-step { grid-template-columns: 26px minmax(0, 1fr); row-gap: 5px; align-items: start; }
  .flow-step__num { margin-top: 1px; }
  .flow-step__role, .flow-step__body { grid-column: 2; }
}

/* Chain diagrams (@chain): the handoffs a lead makes, drawn as cards with a
   labelled arrow between each pair. */
.block-chain { display: flex; flex-direction: column; gap: 0; padding: 4px 0; }
.chain-start {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--navy-950, #1b2532);
  color: #fff;
  font: 700 13px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.chain-start i { font-size: 17px; }
.chain-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0 9px 20px;
  position: relative;
}
.chain-link__rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--content-border-color);
}
.chain-link i { color: var(--sky-700, #0176d3); font-size: 15px; }
.chain-link__label { font: 400 12.5px/1 var(--font-mono); color: var(--text-secondary-color); }
.chain-card {
  display: grid;
  grid-template-columns: minmax(180px, 270px) minmax(0, 1fr);
  gap: 20px;
  padding: 16px 18px;
  border: 1px solid var(--content-border-color);
  border-left: 3px solid var(--surface-600, #bbb);
  border-radius: 10px;
  background: var(--content-background, #fff);
}
.chain-card__who { display: flex; flex-direction: column; gap: 9px; }
.chain-card__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 13px/1 var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy-950);
}
.chain-card__name i { font-size: 17px; }
.chain-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chain-card__tags span {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-100, #f2f4f6);
  font: 500 12px/16px var(--font-sans);
  color: var(--navy-800, #384453);
}
.chain-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  border-left: 1px solid var(--content-border-color);
}
.chain-card__headline { font: 700 16px/22px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.chain-card__text { margin: 0; font: 400 14px/21px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
/* Position sets the accent, so a role keeps its colour across diagrams. */
.chain-card--1 { border-left-color: var(--sky-700, #0176d3); }
.chain-card--1 .chain-card__name i { color: var(--sky-700, #0176d3); }
.chain-card--2 { border-left-color: #6b4ee6; }
.chain-card--2 .chain-card__name i { color: #6b4ee6; }
.chain-card--3 { border-left-color: var(--green-700, #2e844a); }
.chain-card--3 .chain-card__name i { color: var(--green-700, #2e844a); }
.chain-card--4 { border-left-color: var(--navy-800, #384453); }
.chain-card--4 .chain-card__name i { color: var(--navy-800, #384453); }

/* Branch diagrams (@branch): one thing on top, several below it — legs
   holding something up, or one record fanning out to many buyers. */
.block-branch { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.branch__crown {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 10px;
  background: var(--navy-950, #1b2532);
  color: #fff;
  font: 700 13px/1 var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
}
.branch__crown i { font-size: 15px; }
.branch__stem { height: 18px; border-left: 1px solid var(--content-border-color); }
.branch__row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding-top: 18px;
}
/* The bar runs from the centre of the first branch to the centre of the last,
   which is where their drop lines meet it — hence the half-column inset. */
.branch__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - (var(--branches, 3) - 1) * 12px) / var(--branches, 3) / 2);
  right: calc((100% - (var(--branches, 3) - 1) * 12px) / var(--branches, 3) / 2);
  border-top: 1px solid var(--content-border-color);
}
.branch__leg {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--content-border-color);
  border-top: 3px solid var(--sky-700, #0176d3);
  border-radius: 10px;
  background: var(--content-background, #fff);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.branch__leg::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -18px;
  height: 18px;
  border-left: 1px solid var(--content-border-color);
}
/* The one that won, or the one the lesson is pointing at */
.branch__leg--pick { border-color: var(--green-700, #2e844a); background: var(--green-100, #f2faf4); }
.branch__leg--pick .branch__name { color: var(--green-900, #1c5f33); }
.branch__name {
  font: 700 13px/1 var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--navy-950);
}
.branch__says { font: 400 14px/20px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.branch__foot {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-100, #f2f4f6);
  font: 500 13px/19px var(--font-sans);
  color: var(--navy-800, #384453);
  text-wrap: pretty;
}
.branch__foot i { color: var(--orange-700, #a86403); font-size: 16px; flex-shrink: 0; }

/* Cascades (@steps): one thing leads to the next, straight down the page. */
.block-steps { display: flex; flex-direction: column; padding: 4px 0; }
.steps__node {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 15px;
  border: 1px solid var(--content-border-color);
  border-left: 3px solid var(--sky-700, #0176d3);
  border-radius: 8px;
  background: var(--content-background, #fff);
}
.steps__node--warn { border-left-color: var(--red-700, #ba0517); background: rgba(220, 38, 38, .035); }
.steps__node--good { border-left-color: var(--green-700, #2e844a); background: rgba(22, 163, 74, .035); }
.steps__text { font: 500 14px/20px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.steps__note { font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.steps__arrow {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 0 7px 18px;
  font: 400 12.5px/1 var(--font-mono);
  color: var(--text-secondary-color);
}
.steps__arrow i { color: var(--sky-700, #0176d3); font-size: 15px; }
/* An arrow-less pair still needs the drop between the two nodes */
.steps__node + .steps__node { margin-top: 6px; }

/* Comparisons (@versus): the same question answered two or three ways. */
.block-versus {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  gap: 12px;
  padding: 4px 0;
}
.versus__col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--content-border-color);
  border-top: 3px solid var(--navy-600, #acbdcd);
  border-radius: 10px;
  background: var(--content-background, #fff);
}
.versus__col--good { border-top-color: var(--green-700, #2e844a); }
.versus__col--bad { border-top-color: var(--red-700, #ba0517); }
.versus__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 13px/17px var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-950);
}
.versus__col--good .versus__title { color: var(--green-900, #1c5f33); }
.versus__col--bad .versus__title { color: var(--red-900, #8e030f); }
.versus__title i { font-size: 15px; }
.versus__line {
  font: 400 13.5px/20px var(--font-sans);
  color: var(--text-secondary-color);
  text-wrap: pretty;
}
.versus__line:first-of-type { color: var(--navy-950); font-weight: 500; }

/* Bars (@bars): magnitudes meant to be compared at a glance. */
.block-bars { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.bars__title { font: 700 13px/18px var(--font-sans); color: var(--navy-950); }
.bars__row {
  display: grid;
  grid-template-columns: minmax(90px, 190px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.bars__label { font: 500 13px/18px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.bars__track { height: 16px; border-radius: 4px; background: var(--surface-100, #f2f4f6); overflow: hidden; }
.bars__fill { display: block; height: 100%; border-radius: 4px; background: var(--sky-700, #0176d3); }
.bars__row--warn .bars__fill { background: var(--red-700, #ba0517); }
.bars__row--good .bars__fill { background: var(--green-700, #2e844a); }
.bars__note { font: 400 12.5px/18px var(--font-sans); color: var(--text-secondary-color); white-space: nowrap; }
.bars__foot { margin-top: 2px; font: 400 12.5px/18px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }

/* Timelines (@timeline): when each thing happened, and what it cost. */
.block-timeline { display: flex; flex-direction: column; padding: 4px 0; }
.tl__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(64px, 110px) 15px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 9px 0;
}
.tl__when { font: 700 12.5px/20px var(--font-sans); color: var(--navy-950); text-align: right; }
/* The dot sits in its own full-height cell, and the line under it runs to the
   next dot — so the rail lines up whatever the column widths resolve to. */
.tl__rail { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.tl__rail::after { content: ""; flex: 1; border-left: 1px solid var(--content-border-color); }
.tl__row:last-child .tl__rail::after { display: none; }
.tl__dot {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid var(--sky-700, #0176d3);
  background: var(--content-background, #fff);
}
.tl__row--warn .tl__dot { border-color: var(--red-700, #ba0517); background: var(--red-700, #ba0517); }
.tl__row--good .tl__dot { border-color: var(--green-700, #2e844a); background: var(--green-700, #2e844a); }
.tl__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl__what { font: 400 14px/20px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.tl__note { font: 500 12.5px/18px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.tl__row--warn .tl__note { color: var(--red-900, #8e030f); }

/* Tracks (@track): nodes left to right, and what travels each way along them. */
.block-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--content-border-color);
  border-radius: 10px;
  background: var(--content-background, #fff);
}
.track__way {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-secondary-color);
}
.track__way i { font-size: 15px; }
.track__way--fwd { color: var(--sky-700, #0176d3); }
.track__way--fwd i { margin-left: auto; }
.track__way--back { color: var(--green-700, #2e844a); }
.track__nodes { display: flex; align-items: stretch; gap: 8px; }
.track__sep { align-self: center; color: var(--navy-600, #acbdcd); font-size: 16px; flex-shrink: 0; }
.track__node {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--surface-100, #f9fafb);
}
.track__label { font: 700 13px/18px var(--font-sans); color: var(--navy-950); text-wrap: pretty; }
.track__sub { font: 400 12.5px/17px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }

/* Narrow screens: multi-column diagrams stack into lists. */
@media (max-width: 900px) {
  .chain-card { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .chain-card__body { padding-left: 0; border-left: 0; }
  .branch__row { flex-direction: column; gap: 18px; }
  .branch__row::before { display: none; }
  .branch__leg { border-top-width: 1px; border-left: 3px solid var(--sky-700, #0176d3); }
  .branch__leg--pick { border-left-color: var(--green-700, #2e844a); }
  /* Stacked, the drop lines have nothing to drop from — the stem carries it. */
  .branch__leg::before { display: none; }
  .block-versus { grid-template-columns: minmax(0, 1fr); }
  .bars__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .bars__track { grid-column: 1 / -1; }
  .track__nodes { flex-direction: column; }
  .track__sep { transform: rotate(90deg); }
  .tl__row { grid-template-columns: 15px minmax(0, 1fr); row-gap: 2px; }
  .tl__when { grid-column: 2; text-align: left; }
  .tl__rail { grid-row: 1 / span 2; grid-column: 1; }
  .tl__body { grid-column: 2; }
}

/* ---------- Admin: course content (course-admin.js) ---------- */

.cadm-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cadm-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.cadm-rowacts { display: inline-flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

/* The course facts strip: label over value, wrapping into as many columns as fit. */
.cadm-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 20px;
  margin: 0;
}
.cadm-facts dt { font: 400 11.5px/16px var(--font-sans); color: var(--text-secondary-color); text-transform: uppercase; letter-spacing: .04em; }
.cadm-facts dd { margin: 2px 0 0; font: 600 14px/20px var(--font-sans); color: var(--text-primary-color, #111); overflow-wrap: anywhere; }

/* File source viewers — long, so they scroll inside the card. */
.cadm-source {
  margin: 0;
  max-height: 520px;
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid var(--content-border-color);
  border-radius: 6px;
  background: var(--surface-50, #f8f9fa);
  font: 400 12.5px/19px var(--font-mono);
  color: var(--navy-900, #22303f);
  white-space: pre;
  tab-size: 2;
}
.cadm-source code { font: inherit; background: none; padding: 0; }
.cadm-source--json { max-height: 380px; }
.cadm-detailrow td { background: var(--surface-50, #f8f9fa); padding: 12px 10px 16px; }

/* Lock screen: courses whose interactive lessons live in sims.js. */
.cadm-lock {
  display: flex;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: repeating-linear-gradient(
    135deg,
    var(--surface-50, #f8f9fa) 0 10px,
    var(--surface-100, #f2f4f6) 10px 20px);
}
.cadm-lock__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-0, #fff);
  border: 1px solid var(--content-border-color);
  color: var(--text-secondary-color);
  font-size: 24px;
}
.cadm-lock__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cadm-lock__title { font: 600 16px/22px var(--font-sans); color: var(--text-primary-color, #111); }
.cadm-lock__text { margin: 0; max-width: 640px; font: 400 14px/21px var(--font-sans); color: var(--navy-800, #384453); text-wrap: pretty; }
.cadm-lock__text--muted { color: var(--text-secondary-color); font-size: 13px; }
.cadm-lock__text code, .cadm-lock code {
  font: 500 12px/1 var(--font-mono);
  background: var(--surface-0, #fff);
  border: 1px solid var(--content-border-color);
  padding: 1px 5px;
  border-radius: 4px;
}
.cadm-lock__sims { display: flex; flex-direction: column; gap: 6px; }
.cadm-simlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cadm-simlist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--surface-0, #fff);
  border: 1px solid var(--content-border-color);
}
.cadm-simlist i { color: var(--sky-700); font-size: 15px; margin-top: 1px; }
.cadm-lock .cadm-actions, .cadm-lock .ap-btn { align-self: flex-start; }

@media (max-width: 720px) {
  .cadm-lock { flex-direction: column; gap: 14px; }
}

/* ---------- API Explorer ---------- */

.tfx { display: flex; flex-direction: column; gap: 20px; }
.tfx-pane { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.tfx-head { display: flex; flex-direction: column; gap: 6px; }
.tfx-head .exp-note code { word-break: normal; }

.tfx-row { display: flex; gap: 16px; flex-wrap: wrap; }
.tfx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tfx-field--grow { flex: 1 1 280px; }
.tfx-field--narrow { flex: 0 0 130px; }
.tfx-field--cert { max-width: 440px; }
.tfx-field[hidden] { display: none; }

/* A parameter name, hoverable for what it does. */
.tfx-term {
  font: 600 12px/16px var(--font-sans);
  color: var(--sky-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: help;
}
.tfx-op__name { font: 600 13px/18px var(--font-mono); }

.tfx-ops-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tfx-ops-title { font: 600 15px/20px var(--font-sans); color: var(--text-primary-color, #111); }
.tfx-ops { display: flex; flex-direction: column; gap: 12px; }
.tfx-ops--min .tfx-op__body { display: none; }
.tfx-ops--min .tfx-op { padding: 10px 14px; }

.tfx-op {
  border: 1px solid var(--content-border-color);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tfx-op--off { background: var(--surface-50, #f7f8f9); }
.tfx-op--off .tfx-op__body { opacity: .45; pointer-events: none; }
.tfx-op__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tfx-op__toggle { align-items: center; }
.tfx-op__body { display: flex; flex-direction: column; gap: 12px; }
.tfx-op__desc { margin: 0; font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }

.tfx-check { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.tfx-check input { accent-color: var(--sky-700); flex-shrink: 0; }

.tfx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tfx-subhead { font: 600 13px/18px var(--font-sans); color: var(--navy-800, #384453); }
.tfx-props { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 16px; }
.tfx-props--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tfx-props .tfx-term { overflow-wrap: anywhere; }

.tfx-req {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--surface-50, #f7f8f9);
  color: var(--navy-800, #384453);
  font: 400 12px/1.7 var(--font-mono);
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.tfx-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tfx-actions .ap-btn { flex-shrink: 0; }
.tfx-issue { font: 400 12.5px/18px var(--font-sans); color: var(--text-secondary-color); }

@media (max-width: 1080px) {
  .tfx-props { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tfx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tfx-props, .tfx-props--wide, .tfx-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Jornaya API Explorer — the decoded audit, and the response reference tab.
   The query builder reuses the .tfx-* layout above. */
.jnx-decoded { display: flex; flex-direction: column; gap: 14px; }

.jnx-section {
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  overflow: hidden;
}
.jnx-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--surface-50, #f7f8f9);
  border-bottom: 1px solid var(--content-border-color);
  font: 600 13px/18px var(--font-sans);
  color: var(--navy-800, #384453);
}
.jnx-section__head i { font-size: 15px; color: var(--text-secondary-color); }

.jnx-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 14px;
  border-bottom: 1px solid var(--content-border-color);
  font: 400 13px/19px var(--font-sans);
}
.jnx-row:last-child { border-bottom: 0; }
.jnx-row__field {
  font: 600 12px/18px var(--font-mono);
  color: var(--navy-800, #384453);
  border-bottom: 1px dotted var(--content-border-color);
  cursor: help;
  justify-self: start;
  overflow-wrap: anywhere;
}
.jnx-row__val { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.jnx-raw {
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--navy-100, #e8ecf1);
  color: var(--navy-800, #384453);
  font: 600 11.5px/17px var(--font-mono);
  overflow-wrap: anywhere;
}
.jnx-score { font: 400 12px/17px var(--font-sans); color: var(--text-secondary-color); cursor: help; }

.jnx-flag {
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 999px;
  font: 600 11.5px/17px var(--font-sans);
  white-space: nowrap;
}
.jnx-flag--green { background: var(--green-200); color: var(--green-900); }
.jnx-flag--yellow { background: var(--amber-400, #fbbf24); color: var(--amber-900, #78350f); }
.jnx-flag--red { background: var(--red-200); color: var(--red-900); }

.jnx-sub {
  padding: 8px 14px 4px;
  font: 600 12px/17px var(--font-sans);
  color: var(--text-secondary-color);
}
.jnx-chips {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--content-border-color);
}
.jnx-chip {
  display: inline-block;
  margin: 0 6px 4px 0;
  padding: 1px 8px;
  border-radius: 4px;
  font: 500 11.5px/18px var(--font-mono);
  overflow-wrap: anywhere;
}
.jnx-chip--green { background: var(--green-200); color: var(--green-900); }
.jnx-chip--red { background: var(--red-200); color: var(--red-900); }
.jnx-chip--grey { background: var(--navy-100, #e8ecf1); color: var(--navy-800, #384453); }

.jnx-item { padding: 4px 0; border-bottom: 1px solid var(--content-border-color); }
.jnx-item:last-child { border-bottom: 0; }
.jnx-item__name {
  padding: 8px 14px 2px;
  font: 600 13px/18px var(--font-sans);
  color: var(--navy-800, #384453);
}
.jnx-item .jnx-row:last-child { border-bottom: 0; }

.jnx-errnote { display: block; margin-top: 2px; color: var(--text-secondary-color); }

.jnx-refgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jnx-ref { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jnx-ref__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.jnx-ref__head code { font: 600 12.5px/18px var(--font-mono); color: var(--navy-800, #384453); }
.jnx-ref__note { font: 400 11.5px/17px var(--font-sans); color: var(--text-secondary-color); }
.jnx-ref .mock-response__row { grid-template-columns: minmax(0, 1fr) auto; }

@media (max-width: 1080px) {
  .jnx-refgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .jnx-refgrid { grid-template-columns: minmax(0, 1fr); }
  .jnx-row, .jnx-chips { grid-template-columns: minmax(0, 1fr); }
  .jnx-row { grid-template-columns: minmax(0, 1fr) auto; }
  .jnx-row__field { grid-column: 1 / -1; }
}


/* Intelligence API Explorer — the credential guidance cards, the input grid
   with its per-field hints, the velocity matrix and the reference tables.
   Reuses .tfx-* for layout and .jnx-* for the decoded rows above. */
.ixp-cred {
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--surface-50, #f7f8f9);
}
.ixp-cred:last-of-type { margin-bottom: 0; }
.ixp-cred__top { display: flex; align-items: flex-end; gap: 12px; }
.ixp-cred__top .ap-tag { flex-shrink: 0; margin-bottom: 6px; }
.ixp-cred__help {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 12px 0 0;
}
.ixp-cred__help dt {
  font: 600 11px/16px var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary-color);
  margin-bottom: 2px;
}
.ixp-cred__help dd {
  margin: 0;
  font: 400 12.5px/18px var(--font-sans);
  color: var(--navy-800, #384453);
}
.ixp-cred__help code {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--navy-100, #e8ecf1);
  font: 500 11.5px/17px var(--font-mono);
}

.ixp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.ixp-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ixp-field__max {
  font: 400 10.5px/16px var(--font-sans);
  color: var(--text-secondary-color);
  text-transform: none;
  letter-spacing: 0;
}
.ixp-field__hint { font: 400 11.5px/17px var(--font-sans); color: var(--text-secondary-color); }
.ixp-field__hint code {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--navy-100, #e8ecf1);
  font: 500 11px/16px var(--font-mono);
}

.ixp-notes {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--content-border-color);
  border-left: 3px solid var(--blue-500);
  border-radius: 6px;
  background: var(--surface-50, #f7f8f9);
}
.ixp-notes__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font: 600 12.5px/18px var(--font-sans);
  color: var(--navy-800, #384453);
}
.ixp-notes ul { margin: 0; padding-left: 20px; }
.ixp-notes li { font: 400 12.5px/19px var(--font-sans); color: var(--navy-800, #384453); margin-bottom: 4px; }
.ixp-notes li:last-child { margin-bottom: 0; }
.ixp-notes code { padding: 0 3px; border-radius: 3px; background: var(--navy-100, #e8ecf1); font: 500 11.5px/17px var(--font-mono); }
.ixp-notes--ok {
  display: flex;
  align-items: center;
  gap: 7px;
  border-left-color: var(--green-700);
  font: 400 12.5px/19px var(--font-sans);
  color: var(--navy-800, #384453);
}

.ixp-verdict {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  background: var(--surface-50, #f7f8f9);
}
.ixp-verdict__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font: 600 14px/20px var(--font-sans);
  color: var(--navy-800, #384453);
}
.ixp-verdict p { margin: 0; font: 400 13.5px/21px var(--font-sans); color: var(--navy-800, #384453); }

.ixp-matrix { padding: 4px 14px 12px; }
.ixp-matrix__row {
  display: grid;
  grid-template-columns: 150px repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 5px 0;
}
.ixp-matrix__row--head { padding-bottom: 2px; }
.ixp-matrix__row--head .micro-label:not(:first-child) { text-align: center; }

.ixp-cell {
  display: block;
  padding: 3px 0;
  border-radius: 4px;
  text-align: center;
  font: 600 12px/18px var(--font-mono);
}
.ixp-cell--green { background: var(--green-200); color: var(--green-900); }
.ixp-cell--yellow { background: var(--amber-400, #fbbf24); color: var(--amber-900, #78350f); }
.ixp-cell--red { background: var(--red-200); color: var(--red-900); }
.ixp-cell--none { background: var(--navy-100, #e8ecf1); color: var(--text-secondary-color); }
.ixp-cell--blocked {
  background: repeating-linear-gradient(45deg, var(--navy-100, #e8ecf1), var(--navy-100, #e8ecf1) 4px, transparent 4px, transparent 8px);
  color: var(--navy-800, #384453);
}

.ixp-hint {
  padding: 10px 14px;
  border-top: 1px solid var(--content-border-color);
  font: 400 12.5px/19px var(--font-sans);
  color: var(--text-secondary-color);
}
.ixp-hint code { padding: 0 3px; border-radius: 3px; background: var(--navy-100, #e8ecf1); font: 500 11.5px/17px var(--font-mono); }

.ixp-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; padding: 4px 14px 12px; }
.ixp-score { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ixp-score code { font: 500 11px/16px var(--font-mono); color: var(--text-secondary-color); overflow-wrap: anywhere; }

.ixp-attrs {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--content-border-color);
}
.ixp-attrs__name { font: 600 12px/18px var(--font-mono); color: var(--navy-800, #384453); overflow-wrap: anywhere; }

.ixp-ref { border: 1px solid var(--content-border-color); border-radius: 8px; overflow: hidden; }
.ixp-ref__row {
  display: grid;
  grid-template-columns: 110px 130px 150px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--content-border-color);
  font: 400 12.5px/19px var(--font-sans);
}
.ixp-ref__row:last-child { border-bottom: 0; }
.ixp-ref__row--head { background: var(--surface-50, #f7f8f9); }
.ixp-ref__row > code { font: 600 12px/19px var(--font-mono); color: var(--navy-800, #384453); overflow-wrap: anywhere; }
.ixp-ref__req, .ixp-ref__fmt { color: var(--text-secondary-color); }
.ixp-ref__put { color: var(--navy-800, #384453); }
.ixp-ref__put code, .ixp-ref__out code:not(.jnx-row__field) {
  padding: 0 3px;
  border-radius: 3px;
  background: var(--navy-100, #e8ecf1);
  font: 500 11.5px/17px var(--font-mono);
}
.ixp-ref__out { grid-template-columns: 240px minmax(0, 1fr); align-items: start; }
.ixp-ref__out .jnx-row__field { border-bottom: 0; cursor: default; }

@media (max-width: 1080px) {
  .ixp-cred__help { grid-template-columns: minmax(0, 1fr); }
  .ixp-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ixp-fields { grid-template-columns: minmax(0, 1fr); }
  .ixp-cred__top { flex-direction: column; align-items: stretch; }
  .ixp-cred__top .ap-tag { align-self: flex-start; margin-bottom: 0; }
  .ixp-matrix__row { grid-template-columns: minmax(0, 1fr) repeat(5, minmax(0, 1fr)); gap: 4px; }
  .ixp-ref__row, .ixp-ref__out { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ixp-attrs { grid-template-columns: minmax(0, 1fr); }
}

/* The markdown editor on a course file. */
.cadm-editor {
  display: block;
  width: 100%;
  min-height: 460px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid var(--content-border-color);
  border-radius: 6px 6px 0 0;
  background: var(--surface-0, #fff);
  color: var(--navy-900, #22303f);
  font: 400 12.5px/19px var(--font-mono);
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.cadm-editor:focus { outline: 2px solid var(--primary-color); outline-offset: -2px; }
.cadm-editor:disabled { opacity: .6; }
.cadm-editstatus {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -1px;
  padding: 9px 14px;
  border: 1px solid var(--content-border-color);
  border-radius: 0 0 6px 6px;
  font: 400 12.5px/18px var(--font-sans);
  text-wrap: pretty;
}
.cadm-editstatus i { font-size: 15px; flex-shrink: 0; }
.cadm-editstatus.is-ok { background: var(--tag-success-background); color: var(--tag-success-color); }
.cadm-editstatus.is-bad { background: var(--tag-secondary-background); color: var(--text-primary-color, #111); }
.cadm-editstatus.is-bad i { color: var(--red-700, #b91c1c); }
.cadm-editstatus__state {
  margin-left: auto;
  padding-left: 12px;
  white-space: nowrap;
  font-size: 12px;
  opacity: .75;
}

/* ---------- Matching exercises (sims.js matchSim) ---------- */

.sim--mm { grid-template-columns: minmax(0, 1fr); }

.mm-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px 14px;
  flex-wrap: wrap;
}
.mm-head__text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mm-head__title { display: flex; align-items: center; gap: 8px; font: 600 15px/21px var(--font-sans); }
.mm-head__title i { color: var(--sky-700); font-size: 17px; }
.mm-head__sub { font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); max-width: 640px; text-wrap: pretty; }
.mm-head__sub strong { color: var(--text-primary-color, #111); font-weight: 600; }

.mm-progress { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mm-progress__count { font: 600 13px/18px var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-progress__bar { display: block; width: 120px; height: 6px; border-radius: 4px; background: var(--surface-200, #eaedf0); overflow: hidden; }
.mm-progress__fill { display: block; height: 100%; border-radius: 4px; background: var(--green-700, #15803d); transition: width .25s ease; }

.mm-tablewrap { overflow-x: auto; border-top: 1px solid var(--content-border-color); }
.mm-table { width: 100%; border-collapse: collapse; }
.mm-table th {
  text-align: left;
  padding: 9px 20px;
  background: var(--surface-50, #f8f9fa);
  border-bottom: 1px solid var(--content-border-color);
  font: 600 11px/16px var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary-color);
  white-space: nowrap;
}
.mm-cell { padding: 11px 20px; border-bottom: 1px solid var(--content-border-color); vertical-align: top; }
.mm-row:last-child .mm-cell { border-bottom: 0; }
.mm-cell--prompt { width: 46%; min-width: 240px; }
.mm-prompt { display: block; font: 600 13.5px/19px var(--font-sans); text-wrap: pretty; }
.mm-sub { display: block; margin-top: 2px; font: 400 12px/17px var(--font-sans); color: var(--text-secondary-color); text-wrap: pretty; }
.mm-sub code, .mm-prompt code, .mm-why code {
  font: 500 11.5px/1 var(--font-mono);
  background: var(--surface-100, #f2f4f6);
  padding: 2px 4px;
  border-radius: 3px;
}

.mm-slots { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Two dropdowns side by side would ellipsize the product names, so a row that
   takes a pair stacks them and gets the full width of the cell. */
.mm-slots--multi { flex-direction: column; align-items: stretch; gap: 6px; }
/* flex-basis is the main axis, so a column container would read 220px as a
   height — the stacked selects size themselves instead. */
.mm-slots--multi .mm-select { flex: 0 0 auto; max-width: none; height: 34px; }
.mm-plus { font: 600 13px/1 var(--font-sans); color: var(--text-secondary-color); }
.mm-slots--multi .mm-plus { align-self: flex-start; padding-left: 10px; }

/* Labelled columns (sales-led vs online): each answer is graded on its own, so
   each carries its own label and its own green. */
.mm-slots--cols { align-items: flex-start; gap: 12px; }
.mm-slot { display: flex; flex-direction: column; gap: 4px; flex: 1 1 190px; min-width: 160px; max-width: 260px; }
.mm-slot--plain { display: contents; }
.mm-slot__label {
  font: 600 10.5px/14px var(--font-sans);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-secondary-color);
}
.mm-slots--cols .mm-select { flex: 0 0 auto; width: 100%; max-width: none; }
.mm-slot--right .mm-slot__label { color: var(--green-900, #14532d); }
.mm-slot--right .mm-select { border-color: var(--green-700, #15803d); color: var(--green-900, #14532d); font-weight: 600; background-image: none; padding-right: 10px; }
.mm-slot--wrong .mm-select { border-color: var(--red-500, #ef4444); }
.mm-slot--wrong .mm-slot__label { color: var(--red-900, #7f1d1d); }
.mm-select {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 340px;
  height: 34px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--input-border-color, #c9d1d9);
  border-radius: 6px;
  background: var(--surface-0, #fff) no-repeat right 9px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  font: 400 13px/1 var(--font-sans);
  color: var(--text-primary-color, #111);
  appearance: none;
  cursor: pointer;
}
.mm-select:focus { outline: none; border-color: var(--sky-700); box-shadow: 0 0 0 1px var(--sky-700); }
.mm-select--empty { color: var(--text-secondary-color); background-color: var(--surface-50, #f7f8f9); }
.mm-select:disabled { cursor: default; opacity: 1; }

/* Right: the row commits to green and the dropdown stops being interactive. */
.mm-row--right .mm-cell { background: rgba(22, 163, 74, .07); }
.mm-row--right .mm-select { border-color: var(--green-700, #15803d); color: var(--green-900, #14532d); font-weight: 600; background-image: none; padding-right: 10px; }
.mm-row--wrong .mm-cell { background: rgba(220, 38, 38, .05); }
.mm-row--wrong .mm-select { border-color: var(--red-500, #ef4444); }

.mm-why {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 7px;
  font: 400 12.5px/18px var(--font-sans);
  color: var(--green-900, #14532d);
  text-wrap: pretty;
}
.mm-why i { font-size: 15px; flex-shrink: 0; color: var(--green-700, #15803d); }
.mm-why--bad, .mm-why--bad i { color: var(--red-900, #7f1d1d); }
.mm-why--bad i { color: var(--red-700, #b91c1c); }

.mm-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px 18px;
  flex-wrap: wrap;
}
.mm-foot .ap-message { flex: 1 1 320px; margin: 0; }
.mm-foot__note { font: 400 12.5px/18px var(--font-sans); color: var(--text-secondary-color); }

@media (max-width: 820px) {
  .mm-cell--prompt { width: auto; min-width: 180px; }
  .mm-select { min-width: 150px; }
  .mm-progress__bar { width: 80px; }
}

/* ---------- Flagging content (learner feedback) ---------- */

/* The icon that sits next to a quiz question or in a lesson header. Quiet
   until hovered — it is an escape hatch, not a call to action — and solid
   amber once this browser has flagged that item. */
.flag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 26px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: calc(var(--button-border-radius, 6) * 1px);
  background: none;
  cursor: pointer;
  font: 600 12px/1 var(--font-sans);
  color: var(--surface-600, #bbb);
}
.flag-btn i { font-size: 16px; }
.flag-btn:hover, .flag-btn:focus-visible {
  color: var(--orange-700, #c2410c);
  border-color: var(--surface-600, #bbb);
  background: var(--surface-100, #f2f4f6);
}
.flag-btn--done, .flag-btn--done:hover { color: var(--orange-700, #c2410c); }
.flag-btn--inline { color: var(--text-secondary-color); padding-left: 4px; }

.modal--flag { width: 560px; gap: 16px; }
.flag-modal__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--orange-100, #ffedd5);
  color: var(--orange-700, #c2410c);
}
.flag-quote {
  padding: 12px 14px;
  border-left: 3px solid var(--sky-500);
  background: var(--surface-100, #f2f4f6);
  border-radius: 0 6px 6px 0;
  font: 600 14px/21px var(--font-sans);
  text-wrap: pretty;
}
.flag-field { display: flex; flex-direction: column; gap: 7px; }
.flag-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.flag-reason {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--content-border-color, #dfe3e8);
  border-radius: calc(var(--content-border-radius, 8) * 1px);
  background: var(--content-background);
  cursor: pointer;
  text-align: left;
}
.flag-reason:hover { border-color: var(--sky-500); }
.flag-reason.is-active { border-color: var(--sky-700); background: rgba(27, 150, 255, .06); }
.flag-reason__label { font: 600 13px/18px var(--font-sans); color: var(--navy-950); }
.flag-reason__hint { font: 400 11.5px/16px var(--font-sans); color: var(--text-secondary-color); }
/* Prose, not a payload: the shared textarea is monospace and does not wrap. */
.flag-textarea { font: 400 13.5px/20px var(--font-sans); white-space: pre-wrap; }

/* ---------- Admin: flagged content ---------- */

.adm-flags { display: flex; flex-direction: column; gap: 14px; }
.adm-flag {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--content-border-color, #dfe3e8);
  border-radius: calc(var(--content-border-radius, 8) * 1px);
  background: var(--content-background);
}
.adm-flag__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-flag__where { font: 600 13px/18px var(--font-sans); }
.adm-flag__when { margin-left: auto; }
.adm-flag__prompt { font: 600 14px/21px var(--font-sans); text-wrap: pretty; }
.adm-flag__comment {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid var(--orange-400, #fb923c);
  background: var(--surface-100, #f2f4f6);
  border-radius: 0 6px 6px 0;
  font: 400 13.5px/21px var(--font-sans);
  white-space: pre-wrap;
  text-wrap: pretty;
}
.adm-flag__options { display: flex; flex-direction: column; gap: 5px; }
.adm-flag__option {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 400 12.5px/18px var(--font-sans);
  color: var(--text-secondary-color);
}
.adm-flag__option--right { color: var(--navy-950); font-weight: 600; }
.adm-flag__letter {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  border-radius: 4px;
  background: var(--surface-200, #e6e9ee);
  font: 600 11px/18px var(--font-sans);
  color: var(--navy-800, #384453);
}
.adm-flag__option--right .adm-flag__letter { background: var(--green-200, #bbf7d0); color: var(--green-900, #14532d); }
.adm-flag__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-flag__note { flex: 1 1 240px; width: auto; }
.adm-flag__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.adm-flag__toolbar { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adm-flag .ap-message { margin: 0; }

@media (max-width: 720px) {
  .ap-topnav__flag span { display: none; }
  .adm-flag__when { margin-left: 0; }
  .adm-flag__actions { margin-left: 0; }
}

/* ============================================================
   Get Started Quiz (placement.js) — adaptive placement per track
   ============================================================ */

.pl-cta {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; margin-bottom: 24px;
  background: var(--sky-700); color: #fff;
  border-radius: var(--form-field-border-radius, 6px);
}
.pl-cta > .ti { font-size: 28px; flex: none; opacity: .9; }
.pl-cta__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pl-cta__title { font-family: var(--font-sans); font-weight: 600; font-size: 16px; }
.pl-cta__sub { font-size: 13.5px; opacity: .92; line-height: 1.45; }
.pl-cta .ap-btn { flex: none; }
.pl-cta--done { background: var(--content-background); color: var(--text-primary-color); border: 1px solid var(--content-border-color); }
.pl-cta--done > .ti { color: var(--sky-700); opacity: 1; }
.pl-cta--done .pl-cta__sub { color: var(--text-secondary-color); }

/* --- intro: how it works --- */
.pl-how { display: grid; gap: 12px; margin-bottom: 26px; }
.pl-how__item { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary-color); }
.pl-how__item strong { color: var(--text-primary-color); font-weight: 600; }
.pl-how__n {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sky-700); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
}

/* --- intro: track picker --- */
.pl-picks { display: grid; gap: 10px; margin-bottom: 22px; }
.pl-pick {
  display: grid; grid-template-columns: 22px 34px 1fr auto; gap: 14px; align-items: start;
  padding: 15px 18px; cursor: pointer;
  background: var(--content-background); border: 1px solid var(--content-border-color);
  border-radius: var(--form-field-border-radius, 6px);
}
.pl-pick:hover { border-color: var(--sky-500); }
.pl-pick--on { border-color: var(--sky-700); box-shadow: inset 3px 0 0 var(--sky-700); }
.pl-pick--locked { cursor: default; }
.pl-pick input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--sky-700); }
.pl-pick__icon { font-size: 22px; color: var(--sky-700); line-height: 1.2; }
.pl-pick__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-pick__title { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-primary-color); }
.pl-pick__title em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-secondary-color); margin-left: 7px; }
.pl-pick__blurb { font-size: 13.5px; color: var(--text-secondary-color); line-height: 1.5; }
.pl-pick__meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary-color); }
.pl-warn { font-style: normal; color: var(--red-700); margin-left: 6px; }
.pl-pick__state { font-family: var(--font-mono); font-size: 11.5px; color: var(--green-700); white-space: nowrap; }
.pl-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* --- runner --- */
.pl-runner {
  padding: 22px 24px 20px;
  background: var(--content-background); border: 1px solid var(--content-border-color);
  border-radius: var(--form-field-border-radius, 6px);
}
.pl-runner__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pl-runner__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary-color); }

/* One tick per question. Height encodes the band it was asked at, so the
   staircase is visible as it happens. */
.pl-steps { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin: 14px 0 16px; }
.pl-step { flex: 1; min-width: 8px; background: var(--surface-200, #e6eaef); border-radius: 2px; height: 25%; }
.pl-step[style*="--b:1"] { height: 25%; }
.pl-step[style*="--b:2"] { height: 50%; }
.pl-step[style*="--b:3"] { height: 75%; }
.pl-step[style*="--b:4"] { height: 100%; }
.pl-step--right { background: var(--green-700); }
.pl-step--wrong { background: var(--red-700); }
.pl-step--now { background: var(--sky-700); }

.pl-band { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.pl-band__tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 3px;
  background: var(--tag-secondary-background); color: var(--tag-secondary-color);
}
.pl-band__tag--b3, .pl-band__tag--b4 { background: var(--sky-700); color: #fff; }
.pl-band__note { font-size: 13px; color: var(--text-secondary-color); }

.pl-q__prompt { font-family: var(--font-sans); font-size: 17px; font-weight: 600; line-height: 1.45; color: var(--text-primary-color); margin-bottom: 14px; }
.pl-q__options { display: grid; gap: 8px; }
.pl-q__hint { margin-top: 14px; font-size: 13px; color: var(--text-secondary-color); }
.pl-q__why { margin-top: 16px; padding: 13px 15px; background: var(--surface-200, #f2f5f8); border-radius: 4px; font-size: 14.5px; line-height: 1.55; }
.pl-q__source { margin-top: 9px; font-size: 13px; color: var(--text-secondary-color); }
.pl-runner__foot { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

.pl-secnav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary-color); }
.pl-secnav__item.is-now { color: var(--sky-700); font-weight: 600; }
.pl-secnav__item.is-done { color: var(--green-700); }

/* --- results --- */
.pl-results { display: grid; gap: 12px; margin-bottom: 24px; }
.pl-result {
  display: grid; grid-template-columns: minmax(190px, 1.1fr) minmax(200px, 1.4fr) auto minmax(210px, 1fr);
  gap: 20px; align-items: center; padding: 18px 20px;
  background: var(--content-background); border: 1px solid var(--content-border-color);
  border-radius: var(--form-field-border-radius, 6px);
}
@media (max-width: 1080px) { .pl-result { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pl-result { grid-template-columns: 1fr; } }
.pl-result__track { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-result__icon { font-size: 22px; color: var(--sky-700); flex: none; }
.pl-result__name { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-primary-color); }
.pl-result__score { display: block; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary-color); }
.pl-result__level { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pl-level {
  align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 9px; border-radius: 3px;
  background: var(--tag-secondary-background); color: var(--tag-secondary-color);
}
.pl-level--l2 { background: var(--green-100); color: var(--green-900); }
.pl-level--l3, .pl-level--l4 { background: var(--green-700); color: #fff; }
.pl-result__note { font-size: 13.5px; color: var(--text-secondary-color); line-height: 1.45; }
.pl-flag { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: var(--red-700); line-height: 1.4; }
.pl-flag .ti { flex: none; margin-top: 2px; }

/* Per-band accuracy: four columns, one per difficulty band. */
.pl-result__bands { display: flex; align-items: flex-end; gap: 5px; height: 52px; }
.pl-bandbar {
  width: 30px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 3px; background: var(--surface-200, #eef1f5); border-radius: 3px;
  position: relative; overflow: hidden;
}
.pl-bandbar > i { display: block; width: 100%; background: var(--sky-500); }
.pl-bandbar.is-cleared > i { background: var(--green-700); }
.pl-bandbar > span { position: absolute; bottom: 2px; font-family: var(--font-mono); font-size: 9px; color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.6); }
.pl-bandbar--empty { align-items: center; justify-content: center; color: var(--text-secondary-color); font-family: var(--font-mono); font-size: 11px; opacity: .55; }

.pl-result__entry { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.pl-entry__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary-color); }
.pl-entry__skip { font-size: 12px; color: var(--text-secondary-color); }

.pl-apply {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 20px;
  background: var(--content-background); border: 1px solid var(--sky-700);
  border-radius: var(--form-field-border-radius, 6px);
}
.pl-apply strong { display: block; font-family: var(--font-sans); font-size: 15px; margin-bottom: 3px; }
.pl-apply span { font-size: 13.5px; color: var(--text-secondary-color); line-height: 1.5; }
.pl-apply__btns { display: flex; gap: 10px; flex-wrap: wrap; }

.pl-more { padding: 15px 18px; margin-bottom: 20px; border: 1px dashed var(--content-border-color); border-radius: var(--form-field-border-radius, 6px); }
.pl-more__head { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary-color); margin-bottom: 5px; }
.pl-more__body { font-size: 14px; margin-bottom: 8px; }

.pl-caveat { display: flex; gap: 10px; font-size: 13px; color: var(--text-secondary-color); line-height: 1.55; }
.pl-caveat .ti { flex: none; margin-top: 2px; color: var(--sky-700); }

.path-step--review { opacity: .72; }

/* ---- sign-in screen -------------------------------------------------------
   Only reached on the AWS deployment. serve.py gates server-side and renders
   its own sign-in page (auth.py), so the SPA never sees an unauthenticated
   state locally — but CloudFront hands index.html straight out of S3, where no
   Python can intercept, so the app has to be able to draw its own gate. */
.signin { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.signin__card {
  padding: 44px 48px;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.signin__logo { height: 40px; width: 40px; }
.signin__title { font: 700 22px/28px var(--font-sans); color: var(--navy-950); }
.signin__note { margin: 0; font: 400 14px/20px var(--font-sans); color: var(--text-secondary-color); }
.signin__btn { margin-top: 10px; min-height: 44px; display: flex; justify-content: center; }
.signin__btn .ap-btn { text-decoration: none; }  /* sign-in is an <a>: a redirect, not a JS widget */
.signin__msg { width: 100%; }
.signin__msg:empty { display: none; }

/* ---------- Activity: confirm domain ownership (Domains → registrar DNS) ---------- */

.sim--dv .sim-panel { display: flex; flex-direction: column; gap: 16px; padding: 20px; }

.dv-rail { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.dv-step {
  flex: 1 1 160px; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--content-border-color); border-radius: 6px;
  background: var(--surface-100, #f9f9f9);
}
.dv-step.is-now { border-color: var(--sky-700); background: var(--content-background); }
.dv-step.is-done { border-color: var(--green-700, #15803d); background: var(--green-200, #e6f6eb); }
.dv-step__n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy-600, #acbdcd); color: #fff;
  font: 700 12px/1 var(--font-sans);
}
.dv-step.is-now .dv-step__n { background: var(--sky-700); }
.dv-step.is-done .dv-step__n { background: var(--green-700, #15803d); }
.dv-step__n i { font-size: 14px; }
.dv-step__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dv-step__label { font: 700 12.5px/18px var(--font-sans); color: var(--navy-950); }
.dv-step__where { font: 400 11px/16px var(--font-sans); color: var(--text-secondary-color); }

.dv-browser { border: 1px solid var(--content-border-color); border-radius: 8px; overflow: hidden; }
.dv-tabbar { display: flex; gap: 4px; padding: 6px 6px 0; background: var(--surface-200, #eef1f5); }
.dv-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 6px 6px 0 0; background: transparent; cursor: pointer;
  font: 600 12.5px/18px var(--font-sans); color: var(--navy-700, #52616f);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dv-tab i { font-size: 15px; }
.dv-tab:hover { color: var(--navy-950); }
.dv-tab.is-active { background: var(--content-background); border-color: var(--content-border-color); color: var(--navy-950); }
.dv-urlbar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; background: var(--content-background);
  border-bottom: 1px solid var(--content-border-color);
  font: 400 12px/18px var(--font-mono); color: var(--text-secondary-color);
}
.dv-urlbar i { font-size: 13px; color: var(--green-900, #06754b); }
.dv-screen { padding: 20px; background: var(--content-background); }

.dv-toolbar { display: flex; justify-content: flex-end; margin: 14px 0; }
.dv-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 28px; border: 1px dashed var(--content-border-color); border-radius: 6px;
  font: 400 13.5px/20px var(--font-sans); color: var(--text-secondary-color);
}
.dv-empty i { font-size: 18px; }
.dv-muted { font: 400 13px/20px var(--font-sans); color: var(--text-secondary-color); }

.dv-form { display: flex; flex-direction: column; gap: 14px; padding: 16px; margin-bottom: 14px; border: 1px solid var(--content-border-color); border-radius: 6px; background: var(--surface-100, #f9f9f9); }
.dv-form--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dv-form__wide { grid-column: 1 / -1; }
.dv-hint { display: block; font: 400 11.5px/17px var(--font-sans); color: var(--text-secondary-color); }
.dv-valrow { display: flex; gap: 8px; align-items: center; }
.dv-valrow .ap-btn { flex: none; }
.dv-h5 { margin: 4px 0 0; font: 700 15px/22px var(--font-sans); color: var(--navy-950); }

.dv-code { padding: 16px; border: 1px solid var(--sky-700); border-radius: 6px; background: var(--content-background); }
.dv-code__h { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 700 13px/20px var(--font-sans); color: var(--navy-950); }
.dv-code__h i { font-size: 16px; color: var(--sky-700); }
.dv-code__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-code__val {
  flex: 1 1 320px; padding: 9px 12px; border-radius: 4px;
  background: var(--surface-100, #f2f4f6);
  font: 500 12.5px/18px var(--font-mono); color: var(--navy-950); word-break: break-all;
}
.dv-val { font: 400 12px/18px var(--font-mono); color: var(--navy-800, #384453); word-break: break-all; }
.dv-row--new td { background: var(--green-200, #e6f6eb); }

.dv-dns__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.dv-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: var(--surface-200, #f0f0f0);
  font: 700 11px/18px var(--font-sans); color: var(--navy-700, #52616f);
}

@media (max-width: 760px) {
  .sim--dv .sim-panel { padding: 14px; }
  .dv-screen { padding: 14px; }
  .dv-form--grid { grid-template-columns: minmax(0, 1fr); }
  .dv-tab { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 11.5px; }
}

/* ============================== Ask AI =====================================
   The product-trainer chat (ask-ai.js): a drawer that slides in from the
   right over the current lesson, opened from the "Ask AI" top-nav button.
   Non-modal — the page behind stays readable and scrollable, so a learner
   can keep the lesson and the answer side by side. */

.ask-drawer {
  position: fixed; top: 64px; right: 0; bottom: 0; z-index: 60;
  width: min(420px, calc(100vw - 24px));
  display: flex; flex-direction: column;
  background: var(--content-background);
  border-left: 1px solid var(--content-border-color);
  box-shadow: -8px 0 24px rgba(16, 24, 40, .12);
  transform: translateX(100%); visibility: hidden;
  transition: transform .22s ease, visibility .22s;
}
.ask-drawer.is-open { transform: translateX(0); visibility: visible; }

.ask-drawer__head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--content-border-color);
}
.ask-drawer__title { display: flex; flex-direction: column; line-height: 1.2; }
.ask-drawer__title strong { font: 600 14px/20px var(--font-sans); color: var(--text-primary-color); }
.ask-drawer__title span { font: 400 12px/16px var(--font-sans); color: var(--text-secondary-color); }
.ask-drawer__close {
  margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; font-size: 16px;
  color: var(--text-secondary-color);
  display: inline-flex; align-items: center; justify-content: center;
}
.ask-drawer__close:hover { background: var(--surface-100, #f2f4f6); color: var(--text-primary-color); }

.ask-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.ask-msg { display: flex; align-items: flex-start; gap: 10px; }
.ask-msg--user { justify-content: flex-end; }
.ask-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color); font-size: 16px;
}
.ask-bubble {
  max-width: 85%; padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--content-border-color);
  font: 400 14px/21px var(--font-sans); color: var(--text-primary-color);
  overflow-wrap: break-word;
}
.ask-bubble p { margin: 0 0 8px; }
.ask-bubble p:last-child { margin-bottom: 0; }
.ask-bubble ul { margin: 0 0 8px; padding-left: 20px; }
.ask-bubble ul:last-child { margin-bottom: 0; }
.ask-bubble li { margin: 2px 0; }
.ask-bubble code {
  font: 500 12.5px/18px var(--font-mono);
  background: var(--surface-100, #f2f4f6); padding: 1px 5px; border-radius: 4px;
}
.ask-bubble a { color: var(--primary-color); }
.ask-bubble--user {
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary-color) 25%, transparent);
  white-space: pre-wrap;
}
.ask-bubble--pending { display: inline-flex; gap: 5px; align-items: center; min-height: 21px; }
.ask-bubble--pending span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-secondary-color); opacity: .4;
  animation: ask-pulse 1.2s infinite ease-in-out;
}
.ask-bubble--pending span:nth-child(2) { animation-delay: .2s; }
.ask-bubble--pending span:nth-child(3) { animation-delay: .4s; }
@keyframes ask-pulse { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }

.ask-msg--error {
  align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px;
  background: var(--tag-danger-background, #fdecec); color: var(--tag-danger-color, #b3261e);
  font: 400 13px/19px var(--font-sans);
}
.ask-msg--error i { font-size: 16px; flex: none; }

.ask-empty { margin: auto; text-align: center; max-width: 560px; padding: 24px 16px; }
.ask-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color); font-size: 24px; margin-bottom: 12px;
}
.ask-empty h2 { font: 600 18px/26px var(--font-sans); color: var(--text-primary-color); margin: 0 0 8px; }
.ask-empty p { font: 400 13.5px/20px var(--font-sans); color: var(--text-secondary-color); margin: 0 0 18px; }
.ask-suggestions { display: flex; flex-direction: column; gap: 8px; }
.ask-suggestion {
  padding: 10px 14px; border: 1px solid var(--content-border-color); border-radius: 8px;
  background: var(--content-background); cursor: pointer; text-align: left;
  font: 400 13.5px/19px var(--font-sans); color: var(--text-primary-color);
}
.ask-suggestion:hover {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, transparent);
}

.ask-composer {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 16px; border-top: 1px solid var(--content-border-color);
}
.ask-composer textarea {
  flex: 1; resize: none; max-height: 140px; padding: 9px 12px;
  border: 1px solid var(--content-border-color);
  border-radius: var(--form-field-border-radius, 6px);
  font: 400 14px/21px var(--font-sans); color: var(--text-primary-color);
  background: var(--content-background);
}
.ask-composer textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary-color) 40%, transparent); outline-offset: -1px; }
.ask-footnote { padding: 0 16px 12px; margin: 0; font: 400 12px/17px var(--font-sans); color: var(--text-secondary-color); }
.ask-footnote a { color: var(--text-secondary-color); }

/* Portal settings card on the admin Overview (admin.js). */
.adm-setting {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--content-border-color); border-radius: 8px;
  cursor: pointer; font: 400 13.5px/20px var(--font-sans); color: var(--text-primary-color);
}
.adm-setting:hover { background: var(--surface-100, #f6f8fa); }
.adm-setting input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary-color); flex: none; cursor: pointer; }
.adm-setting strong { display: block; margin-bottom: 2px; }
.adm-setting span { color: var(--text-secondary-color); }
.adm-setting span strong { color: var(--text-primary-color); }
[data-setting-note] { margin-top: 10px; }
[data-setting-note]:empty { display: none; }

/* Admin › Users: add-user form and CSV upload (admin.js). */
.adm-userform { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.adm-userform label {
  display: flex; flex-direction: column; gap: 5px; min-width: 150px; flex: 1 1 150px;
  font: 600 12px/16px var(--font-sans); color: var(--text-secondary-color);
}
.adm-userform button[type="submit"] { flex: none; }
.adm-userform__csv { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.adm-userform__file { position: relative; overflow: hidden; }
[data-user-note] { margin-top: 10px; }
[data-user-note]:empty { display: none; }
[data-assign-note] { margin-top: 10px; }
[data-assign-note]:empty { display: none; }

/* Admin › Users: the assignment picker — a full-page modal (users-admin.js). */
.asgn-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(22, 50, 92, .45);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.asgn-modal {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  max-width: 980px; background: var(--content-background, #fff);
  border: 1px solid var(--content-border-color); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(22, 50, 92, .25); overflow: hidden;
}
.asgn-modal__head {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--content-border-color);
}
.asgn-modal__title { font: 700 16px/22px var(--font-sans); color: var(--text-primary-color); }
.asgn-modal__head .adm-muted { flex: 1; }
.asgn-modal__controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px 20px; border-bottom: 1px solid var(--content-border-color);
}
.asgn-modal__controls label {
  display: flex; flex-direction: column; gap: 5px; min-width: 200px; flex: 1 1 200px;
  font: 600 12px/16px var(--font-sans); color: var(--text-secondary-color);
}
.asgn-modal__list { flex: 1; overflow-y: auto; padding: 8px 20px 20px; }
.asgn-modal--sm { height: auto; max-width: 560px; }
.asgn-modal__controls--form { border-bottom: 0; }

/* Analytics › Questions: the difficulty filter bar and the per-learner answer
   letters on the question detail (admin.js). */
.adm-qfilter {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px 16px; margin-bottom: 16px; background: var(--content-background, #fff);
  border: 1px solid var(--content-border-color); border-radius: 12px;
}
.adm-qfilter label {
  display: flex; flex-direction: column; gap: 5px; min-width: 170px; flex: 1 1 170px;
  font: 600 12px/16px var(--font-sans); color: var(--text-secondary-color);
}
.adm-picks { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.adm-pickletter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  font: 700 11px/1 var(--font-sans);
  background: #fdeceb; color: #8e1f0b; border: 1px solid #f3b7b2;
}
.adm-pickletter--right { background: #ebf7ee; color: #1d6f42; border-color: #b5dfc4; }
.asgn-course { border-bottom: 1px solid var(--content-border-color); }
.asgn-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  font: 400 13.5px/20px var(--font-sans); color: var(--text-primary-color); cursor: pointer;
}
.asgn-row input { width: 16px; height: 16px; accent-color: var(--primary-color); flex: none; cursor: pointer; }
.asgn-row input:disabled { cursor: default; }
.asgn-row input:disabled ~ span { color: var(--text-secondary-color); opacity: .55; }
.asgn-row .adm-muted { margin-left: auto; white-space: nowrap; }
.asgn-row--course { padding-right: 0; }
.asgn-row__pick { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.asgn-row__pick .adm-muted { margin-left: auto; }
.asgn-row--course > button { flex: none; margin-left: 12px; }
.asgn-children { padding: 0 0 8px 26px; }
.asgn-row--module { border-top: 1px dashed var(--content-border-color); }
.asgn-row--lesson { padding-left: 26px; }
.asgn-modal__foot {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-top: 1px solid var(--content-border-color);
}
.asgn-modal__foot .adm-muted { flex: 1; }
.asgn-modal__actions { display: flex; align-items: center; gap: 10px; }
[data-assign-error]:empty { display: none; }

/* Learning path › the Full Course / Assigned to You tabs, and the assigned
   list (app.js renderPath). Assignments add to the path; they hide nothing. */
.path-tabs { margin: 4px 0 16px; }
.path-tabs .ap-sidenav__badge { margin-left: 6px; }
.req-empty { padding: 18px 0; font: 400 13.5px/20px var(--font-sans); color: var(--text-secondary-color); }
.home-assigned { margin: 0 0 4px; }
.home-assigned__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.home-assigned__pager {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 10px 0 12px; border-top: 1px solid var(--content-border-color);
}
.home-assigned__count { font: 400 12.5px/18px var(--font-sans); color: var(--text-secondary-color); margin-right: auto; }
.path-required {
  margin: 4px 0 20px; padding: 4px 18px; background: var(--content-background, #fff);
  border: 1px solid var(--content-border-color); border-radius: 12px;
}
.path-required .path-electives__head { padding: 12px 0 4px; }
.req-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-top: 1px solid var(--content-border-color);
}
.req-row:first-of-type { border-top: 0; }
.req-row__main { flex: 1; min-width: 0; }
.req-row__title {
  font: 600 14px/20px var(--font-sans); color: var(--text-primary-color);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.req-row__meta { font: 400 12.5px/18px var(--font-sans); color: var(--text-secondary-color); margin-top: 2px; }
.req-row--done .req-row__title { color: var(--text-secondary-color); }
.req-row .ap-btn { flex: none; }

/* Getting Started experience (experiences.js) — the tour of the other experiences. */
.gs { display: flex; flex-direction: column; gap: 20px; }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: stretch; }
.gs-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.gs-card .sim-task__title i { color: var(--primary-color); }
.gs-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); }
.gs-card__foot { margin-top: auto; padding-top: 8px; }

/* Course drafts (Creators) — the staging area between an authored course and
   the live catalog. The banner rides every draft page; the cards are the
   #/drafts list. */
.draft-banner { flex-wrap: wrap; align-items: center; }
.draft-banner__actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
.draft-banner code { font: 600 12px/1 var(--font-mono, monospace); }
.draft-card { padding-bottom: 16px; }
.draft-card + .draft-card { margin-top: 16px; }
.draft-card .module__title code { font: 600 12px/1 var(--font-mono, monospace); color: var(--text-secondary-color); }
.draft-card__meta { padding: 4px 16px 0; font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); }
.draft-card__note { margin: 8px 16px 0; padding: 10px 12px; border-left: 3px solid var(--content-border-color);
  font: 400 13px/19px var(--font-sans); color: var(--text-secondary-color); background: var(--surface-100, #f6f8fa); border-radius: 0 6px 6px 0; }
.draft-card .quiz__actions { padding: 12px 16px 0; }
.draft-card .ap-message { margin: 10px 16px 0; }

/* Creator API tokens (profile modal). */
.token-box { border-top: 1px solid var(--content-border-color); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.token-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 400 13px/19px var(--font-sans); }
.token-row code { font: 600 12px/1 var(--font-mono, monospace); }
.token-row__meta { color: var(--text-secondary-color); flex: 1; }
.token-reveal { flex-wrap: wrap; }
.token-reveal code { display: inline-block; margin-top: 6px; word-break: break-all; font: 600 12px/18px var(--font-mono, monospace); user-select: all; }
.token-reveal .ap-btn { margin-left: auto; flex: none; }

/* ---------- draft lesson tools (edit-in-place under a draft lesson) ---------- */

.draft-tools { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.draft-addimg {
  border: 1.5px dashed var(--content-border-color);
  border-radius: 8px;
  padding: 14px 16px;
  text-align: center;
  color: var(--text-secondary-color);
  cursor: pointer;
  font-size: 14px;
  background: transparent;
  transition: border-color .12s, color .12s;
}
.draft-addimg:hover { border-color: var(--sky-500); color: var(--sky-700); }
.draft-addimg i { vertical-align: -2px; margin-right: 4px; }
.draft-editor { background: var(--content-background, #fff); border: 1px solid var(--content-border-color); border-radius: 10px; padding: 16px; }
.draft-editor__hint { font-size: 13px; color: var(--text-secondary-color); margin-bottom: 10px; }
.draft-editor__text {
  width: 100%;
  box-sizing: border-box;
  font: 13px/1.6 var(--font-mono, monospace);
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  color: var(--text-primary-color);
  background: var(--surface-100, #f8f9fb);
}
.draft-editor__text:focus { outline: 2px solid var(--sky-500); outline-offset: -1px; }
.draft-editor__menu { margin-top: 8px; }

/* Slash-menu popup inside the draft lesson editor */
.draft-editor__wrap { position: relative; }
.draft-editor__menu {
  position: absolute;
  z-index: 30;
  min-width: 260px;
  background: var(--content-background, #fff);
  border: 1px solid var(--content-border-color);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.draft-editor__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: none;
  border-radius: 7px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-primary-color);
}
.draft-editor__item i { font-size: 18px; color: var(--text-secondary-color); }
.draft-editor__item b { display: block; font-size: 13.5px; font-weight: 600; }
.draft-editor__item small { display: block; font-size: 11.5px; color: var(--text-secondary-color); }
.draft-editor__item:hover, .draft-editor__item.is-active { background: var(--surface-100, #f2f4f6); }
.draft-editor__item.is-active i { color: var(--sky-700); }

/* Draft course page: pencil beside each lesson row jumps into the editor */
.lesson-row__wrap { display: flex; align-items: stretch; gap: 8px; }
.lesson-row__wrap .lesson-row { flex: 1; min-width: 0; }
.lesson-row__edit {
  flex: none;
  border: 1px solid var(--content-border-color);
  background: var(--content-background, #fff);
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--text-secondary-color);
  font-size: 16px;
}
.lesson-row__edit:hover { border-color: var(--sky-500); color: var(--sky-700); }

/* Draft lesson Preview / Edit markdown tabs */
.draft-lesson-tabs { margin: 4px 0 16px; }
.draft-lesson-tabs .ap-tabs__tab i { margin-right: 4px; vertical-align: -1px; }
.draft-dirty { color: var(--orange-600, #d97706); font-size: 10px; vertical-align: 2px; margin-left: 2px; }
.lesson-nav.is-hidden { display: none; }

/* "Add a lesson to a live course" controls on the drafts page */
.draft-addlesson { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.draft-addlesson__course, .draft-addlesson__title {
  border: 1px solid var(--content-border-color);
  border-radius: 8px;
  padding: 9px 12px;
  font: 14px/20px var(--font-sans);
  color: var(--text-primary-color);
  background: var(--content-background, #fff);
}
.draft-addlesson__course { max-width: 320px; }
.draft-addlesson__title { flex: 1; min-width: 200px; }

/* A lesson this draft adds — highlighted wherever it appears */
.lesson-row--new { border-left: 3px solid var(--green-600, #16a34a); background: var(--green-50, #f0faf4); }