/**
 * UX review components — homepage feed + smart sidebar (Screen 01)
 * and the article trust bar (Screen 02).
 *
 * Every value here reads from a custom property defined in
 * variables.css, all of which are now editable in
 * Customize → JDEVerse Design Tokens. Nothing in this file hardcodes
 * a colour, font or radius, so an admin rebrand reaches these
 * components without any CSS being touched.
 */

/* ---------------------------------------------------------------
   Homepage: feed + sidebar
   --------------------------------------------------------------- */

.homepage-main__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-10);
  align-items: start;
}

/* Sidebar drops below the feed before the feed itself gets cramped. */
@media (max-width: 1024px) {
  .homepage-main__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.feed__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.feed__title {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0;
}

/* ---- Freshness badge (compact form of the trust bar) ---- */

.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.6;
  white-space: nowrap;
}

.freshness-badge--verified {
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  color: color-mix(in srgb, var(--color-success) 75%, var(--color-ink));
}

.freshness-badge--stale {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: color-mix(in srgb, var(--color-accent) 70%, var(--color-ink));
}

/* color-mix is widely supported but not universal; these fallbacks
   apply first and are overridden above where it is available. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .freshness-badge--verified {
    background: var(--color-surface);
    color: var(--color-success);
  }

  .freshness-badge--stale {
    background: var(--color-surface);
    color: var(--color-accent);
  }
}

/* ---------------------------------------------------------------
   Homepage sidebar
   --------------------------------------------------------------- */

.homepage-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: calc(var(--space-20) + var(--space-2));
}

@media (max-width: 1024px) {
  .homepage-sidebar {
    position: static;
  }
}

.sidebar-block {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.sidebar-block__title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}

.sidebar-people,
.sidebar-topics,
.sidebar-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-person a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
}

.sidebar-person img {
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.sidebar-person__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sidebar-person__body strong {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.sidebar-person__body small,
.sidebar-event small {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-person a:hover strong {
  color: var(--color-primary);
}

.sidebar-topics a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

.sidebar-topics a:hover {
  color: var(--color-primary);
}

/* Counts are the cold-start defence: a topic showing "12" reads as
   a populated section, an empty one is never rendered at all. */
.sidebar-topics__count {
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.sidebar-event a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

.sidebar-event a:hover strong {
  color: var(--color-primary);
}

/* ---------------------------------------------------------------
   Article trust bar (Screen 02)
   --------------------------------------------------------------- */

.trust-bar {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}

.trust-bar--stale {
  border-left-color: var(--color-accent);
}

.trust-bar__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.trust-bar__fact {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

.trust-bar__icon {
  display: inline-flex;
  color: var(--color-text-muted);
}

.trust-bar--stale .trust-bar__icon {
  color: var(--color-accent);
}

.trust-bar__label {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.trust-bar__toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  text-align: left;
  font-family: inherit;
}

.trust-bar__toggle:hover .trust-bar__label {
  color: var(--color-secondary);
}

.trust-bar__toggle:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.trust-bar__stale {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.trust-bar__corrections {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.trust-bar__corrections ol {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.trust-bar__corrections li {
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.trust-bar__corrections time {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .trust-bar__facts {
    gap: var(--space-4);
  }
}

/* ---------------------------------------------------------------
   Search-first hero (Screen 01, pin 1)
   --------------------------------------------------------------- */

/* With the mockup hidden the hero becomes a single centred column,
   so the search box is the only thing competing for the eye. */
.hero--search-first .container {
  display: block;
}

.hero--search-first .hero__content {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero--search-first .hero__search {
  justify-content: center;
}

.hero--search-first .hero__trending {
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .feed__tab,
  .feed-item__title a {
    transition: none;
  }
}

/* ===============================================================
   NEXT · CONVERSE — Screens 03, 06, 09
   Same rule as above: no hardcoded colours, fonts or radii. Every
   value resolves through a token editable in the Customizer.
   =============================================================== */

/* ---------------------------------------------------------------
   Screen 06 — dashboard: needs attention
   --------------------------------------------------------------- */

.attention {
  margin-bottom: var(--space-8);
}

.attention__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0;
}

.attention__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .attention__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.attention-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.attention-card--empty {
  background: var(--color-surface);
  border-style: dashed;
}

.attention-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.attention-card__icon {
  display: inline-flex;
  color: var(--color-secondary);
}

.attention-card--reputation .attention-card__icon {
  color: var(--color-success);
}

.attention-card--requests .attention-card__icon {
  color: var(--color-accent);
}

.attention-card__label {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
  flex: 1 1 auto;
}

.attention-card__count {
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.attention-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.attention-card__list a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--color-ink);
}

.attention-card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.attention-card__list a:hover .attention-card__text {
  color: var(--color-primary);
}

.attention-card__time,
.attention-card__empty {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.attention-card__empty {
  margin: 0;
  line-height: var(--lh-normal);
}

/* ---------------------------------------------------------------
   Screen 06 — streak card
   --------------------------------------------------------------- */

.streak-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.streak-card--active {
  border-left: 3px solid var(--color-success);
}

/* At-risk uses the accent, not a red: the point is a nudge, not an
   alarm. Nothing has gone wrong yet. */
.streak-card--at-risk {
  border-left: 3px solid var(--color-accent);
}

.streak-card__figure {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.streak-card--active .streak-card__figure {
  color: var(--color-success);
}

.streak-card--at-risk .streak-card__figure {
  color: var(--color-accent);
}

.streak-card__headline {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}

.streak-card__note,
.streak-card__best {
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.streak-card__best {
  font-size: var(--fs-xs);
}

/* ---------------------------------------------------------------
   Screen 03 — Q&A: the answer is the hero
   --------------------------------------------------------------- */

.qa-accepted {
  margin: var(--space-8) 0 var(--space-6);
}

.qa-accepted__heading,
.qa-answers__heading {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.qa-answers__heading {
  margin-top: var(--space-8);
}

/* The green frame from the wireframe. Applied only to the hero copy
   of the accepted answer, so the treatment stays exclusive. */
.qa-answer--hero {
  border: 1px solid var(--color-success);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-white);
}

.qa-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.qa-author img {
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.qa-author__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qa-author__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  text-decoration: none;
}

.qa-author__name:hover {
  color: var(--color-primary);
}

.qa-author__signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 2px;
}

.qa-author__rep {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.qa-author__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 1px var(--space-2);
}

/* ---------------------------------------------------------------
   AI blocks — Q&A consensus + search answer
   --------------------------------------------------------------- */

.ai-consensus,
.ai-answer {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-ai);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
  margin: var(--space-6) 0;
}

.ai-consensus__head,
.ai-answer__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.ai-consensus__icon,
.ai-answer__icon {
  display: inline-flex;
  color: var(--color-ai);
}

.ai-consensus__title,
.ai-answer__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
}

.ai-consensus__body,
.ai-answer__body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
}

.ai-consensus__body p:last-child,
.ai-answer__body p:last-child {
  margin-bottom: 0;
}

.ai-consensus__cites,
.ai-answer__cites {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

.ai-consensus__cites {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.ai-answer__cites-label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.ai-answer__cites ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ai-consensus__disclaimer {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* ---------------------------------------------------------------
   Screen 09 — search result signals
   --------------------------------------------------------------- */

.result-signals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.result-type {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.result-type--article  { color: var(--color-secondary); }
.result-type--question { color: var(--color-primary); }
.result-type--job      { color: var(--color-accent); }
.result-type--resource { color: var(--color-ai); }
.result-type--person   { color: var(--color-success); }

.result-answered {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

.result-answered--accepted {
  color: var(--color-success);
  font-weight: var(--fw-semibold);
}

.result-answered--none {
  color: var(--color-accent);
}

/* Resource rows put the badge on the right of the title. */
.simple-list__row .result-type {
  margin-left: auto;
}

/* ===============================================================
   THEN · TEACH — Screen 04, certificates, contextual Q&A
   =============================================================== */

/* ---------------------------------------------------------------
   Screen 04 — progress in the header
   --------------------------------------------------------------- */

.path-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  margin: var(--space-6) 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.path-progress__bar-wrap {
  flex: 1 1 320px;
  min-width: 0;
}

.path-progress__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.path-progress__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.path-progress__cta {
  flex-shrink: 0;
}

.path-save-form {
  display: inline-block;
  margin-bottom: var(--space-4);
}

/* ---------------------------------------------------------------
   Screen 04 — state-aware syllabus
   --------------------------------------------------------------- */

.syllabus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.syllabus-module {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
}

.syllabus-module--done {
  border-left: 3px solid var(--color-success);
}

.syllabus-module--current {
  border-left: 3px solid var(--color-secondary);
  box-shadow: var(--shadow-sm);
}

/* Dimmed, not hidden — a locked module still communicates what is
   coming, which is half the reason to finish the current one. */
.syllabus-module--locked {
  opacity: 0.55;
  background: var(--color-surface);
}

.syllabus-module__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.syllabus-module__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.syllabus-module--done .syllabus-module__marker {
  background: var(--color-success);
  color: var(--color-white);
}

.syllabus-module--current .syllabus-module__marker {
  background: var(--color-secondary);
  color: var(--color-white);
}

.syllabus-module__title-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.syllabus-module__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
}

.syllabus-module__count {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.syllabus-module__flag {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  padding: 2px var(--space-3);
}

.syllabus-module__locked-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.syllabus-lessons {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0 0 0 calc(28px + var(--space-3));
  display: flex;
  flex-direction: column;
}

.syllabus-lesson a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border-soft);
}

.syllabus-lesson:last-child a {
  border-bottom: 0;
}

.syllabus-lesson a:hover .syllabus-lesson__title {
  color: var(--color-primary);
}

.syllabus-lesson__icon {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
}

.syllabus-lesson.is-complete .syllabus-lesson__icon {
  color: var(--color-success);
}

.syllabus-lesson__title {
  flex: 1 1 auto;
  min-width: 0;
}

.syllabus-lesson.is-complete .syllabus-lesson__title {
  color: var(--color-text-muted);
}

.syllabus-lesson__duration {
  flex-shrink: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   Path certificate
   --------------------------------------------------------------- */

.certificate {
  margin: var(--space-6) 0;
}

.certificate__frame {
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  background: var(--color-white);
}

.certificate__eyebrow {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

.certificate__path {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.certificate__awarded {
  font-size: var(--fs-base);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2);
}

.certificate__date {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

.certificate__code {
  margin: 0;
  font-size: var(--fs-xs);
}

.certificate__code-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.certificate__code code {
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  color: var(--color-ink);
}

.certificate__actions {
  margin-top: var(--space-4);
}

.certificate__share {
  display: block;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.certificate__share input {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-ink);
  background: var(--color-surface);
}

.certificate__verified {
  margin: var(--space-3) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---- Certificates on the profile ---- */

.profile-certificates__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.profile-certificate {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.profile-certificate__icon {
  display: inline-flex;
  color: var(--color-accent);
  flex-shrink: 0;
}

.profile-certificate__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.profile-certificate__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  text-decoration: none;
}

.profile-certificate__title:hover {
  color: var(--color-primary);
}

.profile-certificate__date {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   Contextual Q&A (Screen 02, pin 3)
   --------------------------------------------------------------- */

.contextual-qa {
  margin: var(--space-8) 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.contextual-qa__ai {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-ai);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.contextual-qa__ai-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.contextual-qa__ai-icon {
  display: inline-flex;
  color: var(--color-ai);
}

.contextual-qa__ai-title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0;
}

.contextual-qa__ai-body {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
}

.contextual-qa__ai-note {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.contextual-qa__linked {
  margin-bottom: var(--space-5);
}

.contextual-qa__linked-title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.contextual-qa__linked ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contextual-qa__linked li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.contextual-qa__linked a {
  color: var(--color-ink);
  text-decoration: none;
}

.contextual-qa__linked a:hover {
  color: var(--color-primary);
}

.contextual-qa__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
}

.contextual-qa__prompt {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.ask-about-note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 var(--space-4);
}

/* ===============================================================
   LATER · CONNECT (partial) — Screens 07 & 08
   =============================================================== */

/* ---- Screen 07: profile-match badge ---- */

.job-match {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.job-match__percent {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
}

.job-match--strong .job-match__percent  { color: var(--color-success); }
.job-match--partial .job-match__percent { color: var(--color-accent); }
.job-match--weak .job-match__percent    { color: var(--color-text-muted); }

.job-match__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.job-match__detail {
  flex-basis: 100%;
  margin-top: var(--space-2);
}

.job-match__line {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

.job-match__line--endorsed strong { color: var(--color-success); }
.job-match__line--missing strong  { color: var(--color-accent); }

/* ---- Screen 08: ERP taxonomy tree ---- */

.erp-tree {
  margin-bottom: var(--space-6);
}

.erp-tree__title {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.erp-tree__list,
.erp-tree__children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.erp-tree__branch {
  border-bottom: 1px solid var(--color-border-soft);
}

.erp-tree__branch:last-child {
  border-bottom: 0;
}

.erp-tree__parent,
.erp-tree__child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--fs-sm);
}

.erp-tree__parent {
  font-weight: var(--fw-semibold);
}

.erp-tree__child {
  padding-left: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
}

.erp-tree__parent:hover,
.erp-tree__child:hover,
.erp-tree__parent.is-current,
.erp-tree__child.is-current {
  color: var(--color-primary);
}

.erp-tree__parent.is-current,
.erp-tree__child.is-current {
  font-weight: var(--fw-semibold);
}

/* Counts are the cold-start defence again: a section showing a real
   number never reads as empty. */
.erp-tree__count {
  flex-shrink: 0;
  min-width: 20px;
  text-align: center;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  padding: 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* Collapse deep branches on narrow screens; the current branch and
   top level stay visible so the map never loses the reader. */
@media (max-width: 900px) {
  .erp-tree__list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
  }

  .erp-tree__branch {
    border-bottom: 0;
    flex: 0 0 auto;
  }

  .erp-tree__parent {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    white-space: nowrap;
  }

  .erp-tree__children {
    display: none;
  }

  .erp-tree__branch.is-open .erp-tree__parent {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* ===============================================================
   Screens 05, 07 (master-detail), 08 (sub-modules), 10 (wizard)
   =============================================================== */

/* ---- Screen 05: persistent completeness meter ---- */

.completeness {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.completeness__body {
  flex: 1 1 320px;
  min-width: 0;
}

.completeness__title {
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0 0 2px;
}

.completeness__note {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

.completeness__cta {
  flex-shrink: 0;
}

/* ---- Screen 08: sub-module badges (GL / AP / AR) ---- */

.submodule-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.submodule-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  text-decoration: none;
  white-space: nowrap;
}

a.submodule-badge:hover {
  border-color: var(--color-secondary);
  color: var(--color-primary);
}

/* ---- Screen 07: master-detail ---- */

.jobs-master-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--space-6);
  align-items: start;
}

.jobs-detail {
  position: sticky;
  top: var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--space-5);
  max-height: calc(100vh - var(--space-20));
  overflow-y: auto;
}

.jobs-detail__back {
  display: none;
  font-size: var(--fs-sm);
  color: var(--color-secondary);
  text-decoration: none;
  margin-bottom: var(--space-3);
}

.jobs-detail__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-1);
}

.jobs-detail__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.jobs-detail__title a:hover {
  color: var(--color-primary);
}

.jobs-detail__company {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.jobs-detail__facts {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.jobs-detail__facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-soft);
}

.jobs-detail__facts span {
  color: var(--color-text-muted);
}

.jobs-detail__systems {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.jobs-detail__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-5);
}

/* Mobile: "collapses to a stacked list". Without a selection the
   list is the whole page; with one, the detail replaces it and the
   back link returns — never a dead end. */
@media (max-width: 1024px) {
  .jobs-master-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .jobs-detail {
    position: static;
    max-height: none;
  }

  .jobs-master-detail:not(.has-selection) .jobs-detail {
    display: none;
  }

  .jobs-master-detail.has-selection .job-list-full {
    display: none;
  }

  .jobs-master-detail.has-selection .jobs-detail__back {
    display: inline-block;
  }
}

/* ---- Screen 10: skip for now ---- */

.profile-wizard__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.profile-wizard__skip {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.profile-wizard__skip:hover {
  color: var(--color-primary);
}

/* ===============================================================
   WIREFRAME ALIGNMENT — visual layer matched to the hi-fi mockups
   Replaces the pill tabs / list rows / progress bars from the
   earlier structural pass with the treatments shown in the deck.
   =============================================================== */

/* ---- Screen 01: underline tabs, not pills ---- */

.feed__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
}

.feed__header {
  display: block;
}

.feed__title {
  margin-bottom: var(--space-4);
}

.feed__tab {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 0 var(--space-3);
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.feed__tab:hover {
  color: var(--color-ink);
}

.feed__tab.is-active {
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}

.feed__tab:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

/* ---- Screen 01: feed as a card grid ---- */

.feed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

@media (max-width: 1024px) {
  .feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .feed-grid { grid-template-columns: minmax(0, 1fr); }
}

.feed-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.feed-card:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--shadow-md);
}

.feed-card__tag {
  align-self: flex-start;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  color: var(--color-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .feed-card__tag { background: var(--color-surface); }
}

.feed-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0;
  flex: 1 1 auto;
}

.feed-card__title a {
  color: var(--color-ink);
  text-decoration: none;
}

.feed-card__title a:hover { color: var(--color-primary); }

.feed-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.feed-card__author img {
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.feed-card__author-name {
  font-weight: var(--fw-medium);
  color: var(--color-ink-soft);
}

.feed-card__stats {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.feed-card__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ---- Screen 02: trust bar as one inline strip ---- */

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

.trust-bar--stale { border-left-color: var(--color-accent); }

.trust-bar__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  flex: 1 1 auto;
}

/* Inline label + value, matching the wireframe's single-line strip
   rather than the stacked caption/value pairing used earlier. */
.trust-bar__fact {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.trust-bar__fact > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.trust-bar__label {
  display: inline;
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
}

.trust-bar__icon { color: var(--color-success); }
.trust-bar--stale .trust-bar__icon { color: var(--color-accent); }

/* ---- Screens 04 & 05: progress rings ---- */

.progress-ring {
  --ring-size: 96px;
  --ring-thickness: 8px;
  --ring-color: var(--color-success);
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  flex-shrink: 0;
  border-radius: var(--radius-full);
  display: grid;
  place-items: center;
  background: conic-gradient(
    var(--ring-color) calc(var(--percent) * 1%),
    var(--color-border-soft) 0
  );
}

.progress-ring::after {
  content: '';
  position: absolute;
  inset: var(--ring-thickness);
  border-radius: var(--radius-full);
  background: var(--color-white);
}

.progress-ring__value {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  line-height: 1.1;
}

.progress-ring__value small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* Path header: ring + resume button stacked to the right, as drawn. */
.path-progress {
  align-items: center;
  justify-content: space-between;
}

.path-progress__ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

/* ---- Screen 04: module rows ---- */

.syllabus-module--locked .syllabus-module__title { color: var(--color-text-muted); }

.syllabus-module__percent {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-success);
}

.syllabus-module--current .syllabus-module__percent { color: var(--color-secondary); }
.syllabus-module--locked .syllabus-module__percent,
.syllabus-module--available .syllabus-module__percent { color: var(--color-text-muted); }

/* ---- Screen 03: accepted answer gets a green wash ---- */

.qa-answer--hero {
  background: color-mix(in srgb, var(--color-success) 5%, var(--color-white));
  border-color: var(--color-success);
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .qa-answer--hero { background: var(--color-white); }
}

.badge-pill--accepted {
  background: var(--color-success);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* ---- Screen 05: completeness as a ring + checklist ---- */

.completeness__ring-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.completeness__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-5);
}

@media (max-width: 640px) {
  .completeness__checklist { grid-template-columns: minmax(0, 1fr); }
}

.completeness__check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.completeness__check--done { color: var(--color-ink); }

.completeness__check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
}

.completeness__check--done .completeness__check-mark {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-white);
}

/* ---- Screen 05: endorsement pills with counts ---- */

.skill-tag__endorse-count {
  display: inline-flex;
  align-items: center;
  min-width: 20px;
  justify-content: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-secondary);
}

/* ---- Screen 07: match % as a green pill on the card ---- */

.job-match {
  border: 0;
  background: color-mix(in srgb, var(--color-success) 12%, transparent);
  padding: 2px var(--space-3);
}

.job-match--partial { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.job-match--weak    { background: var(--color-surface); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .job-match,
  .job-match--partial { background: var(--color-surface); }
}

/* ---- Screen 06: streak as an amber pill in the header ---- */

.streak-card {
  display: inline-flex;
  width: auto;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border-left-width: 1px;
}

.streak-card--active {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: transparent;
}

@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .streak-card--active { background: var(--color-surface); }
}

.streak-card__figure {
  width: 28px;
  height: 28px;
  background: transparent;
  color: var(--color-accent);
}

.streak-card__headline { font-size: var(--fs-sm); }
.streak-card__note,
.streak-card__best { font-size: var(--fs-xs); }