/* ============================================================
   TrainedResponder — core feature deep-dive pages (/features/*)

   A COMPANION to module-page.css, not a replacement. Those pages and
   these are one set: the hero, the figure frame (.mp-fig), captions,
   numbered notes, the cross-page rail and the status chips all come
   from module-page.css and are loaded alongside this file. Restyling
   every deep-dive at once therefore means editing that file, not both.

   What lives here is only what those pages had no figure for: the
   course outline, the lesson player, the advancement gates and rank
   ladder, the exam and evaluation sheets. Same rule as the module
   figures — drawn in HTML/CSS, mirroring the shipped UI's own grammar,
   so they stay sharp at any width. Change one of those screens
   materially and the matching figure here needs the same edit.
   ============================================================ */

/* ── Ordered content list: a course's lessons, an exam's questions ──
   Mirrors the Academy editor's sortable rows, grip and all. */
.fp-outline { list-style: none; margin: 0; padding: 0; }
.fp-outline > li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.62rem 1rem;
    border-bottom: 1px solid var(--tr-line);
}
.fp-outline > li:last-child { border-bottom: 0; }
.fp-grip { color: #b9c4ce; font-size: 0.8rem; }
.fp-item-n {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--tr-navy);
    color: #fff;
    font-family: var(--tr-font-display);
    font-size: 0.92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-item-b { flex: 1 1 auto; min-width: 0; }
.fp-item-t { display: block; font-size: 0.9rem; font-weight: 600; color: var(--tr-navy-ink); }
.fp-item-sub { display: block; font-size: 0.76rem; color: var(--tr-gray); margin-top: 0.1rem; }
.fp-item-meta { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; }

/* ── Requirement flags on a course ─────────────────────────
   The editor's Completion Requirements, as the on/off state a reader
   can scan. Off is drawn, not hidden — half the point is that a course
   can require nothing but its lessons. */
.fp-flags { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--tr-line); }
.fp-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--tr-line);
    background: #fff;
    color: #8b96a1;
    font-size: 0.76rem;
    font-weight: 600;
}
.fp-flag i { font-size: 0.72rem; }
.fp-flag.is-on { border-color: var(--mp-green-line); background: var(--mp-green-wash); color: var(--mp-green-text); }

/* ── Chapter-kind art ──────────────────────────────────────
   Four small drawn glyphs standing in for what a chapter can hold.
   Each is an inline SVG in the marketing hand — flat fills, navy
   strokes, orange accent — sitting on a plate the size of a thumbnail. */
.fp-art {
    /* Matches the 120x62 viewBox every glyph is drawn in, so a percentage width
       fits the plate exactly instead of overflowing its clipped box. */
    aspect-ratio: 120 / 62;
    border-radius: 8px;
    background: #f4f7fa;
    border: 1px solid var(--tr-line);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fp-art svg { width: 74%; height: auto; display: block; }
.fp-art-vid { background: var(--tr-navy-ink); border-color: var(--tr-navy-ink); }
.fp-art-vid svg { width: 100%; }

/* ── Member lesson player ──────────────────────────────────
   The trainee surface: chapter stepper, chapter body, progress. */
.fp-stepper { display: flex; gap: 0.25rem; padding: 0.7rem 1rem 0; overflow-x: auto; }
.fp-step {
    flex: 1 1 0;
    min-width: 7.5rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    background: #fff;
    font-size: 0.76rem;
    color: var(--tr-slate);
}
.fp-step.is-current { background: #fdf0e6; border-color: #f4c89e; color: var(--tr-orange-text); }
.fp-step.is-done { color: var(--mp-green-text); border-color: var(--mp-green-line); }
.fp-step-dot {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e6ecf2;
    color: var(--tr-navy-ink);
    font-size: 0.64rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-step.is-current .fp-step-dot { background: var(--tr-orange); color: #fff; }
.fp-step.is-done .fp-step-dot { background: var(--mp-green); color: #fff; }

.fp-body { padding: 1rem; }
.fp-body h4 { font-size: 1rem; margin: 0 0 0.35rem; color: var(--tr-navy-ink); }
.fp-body p { font-size: 0.87rem; color: var(--tr-slate); margin-bottom: 0.85rem; }
.fp-body p:last-child { margin-bottom: 0; }

/* A video chapter's player, drawn. The scrub bar's filled portion is the
   watch requirement made visible — which is why the figure has one. */
.fp-video {
    position: relative;
    border-radius: 8px;
    background: var(--tr-navy-ink);
    aspect-ratio: 16 / 9;
    /* Capped: at the figure's full width a true 16:9 player is ~390px tall and
       swallows the chapter body underneath it, which is the part being shown. */
    max-width: 24rem;
    margin-bottom: 0.85rem;
    overflow: hidden;
}
.fp-play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    border: 2px solid rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
/* The Font Awesome play glyph carries left bearing; nudge it back to the optical
   center of the ring. */
.fp-play i { margin-left: 3px; }
.fp-scrub { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.24); }
.fp-scrub span { display: block; height: 100%; border-radius: 2px; background: var(--tr-orange); }
.fp-vid-note {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Numbered procedure inside a chapter (the Steps tab). */
.fp-steps { list-style: none; margin: 0; padding: 0; counter-reset: fpstep; }
.fp-steps li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
    color: var(--tr-slate);
}
.fp-steps li:last-child { margin-bottom: 0; }
.fp-steps li::before {
    counter-increment: fpstep;
    content: counter(fpstep);
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: var(--tr-navy);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-steps li strong { color: var(--tr-navy-ink); }

/* Labelled progress bar (thicker than .mp-gauge, carries a caption). */
.fp-bar { display: flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; color: var(--tr-gray); }
.fp-bar-track { flex: 1 1 auto; height: 7px; border-radius: 4px; background: #e6ecf2; overflow: hidden; }
.fp-bar-track span { display: block; height: 100%; background: var(--mp-green); }

/* ── A row of My Courses ───────────────────────────────────── */
.fp-cr { display: flex; align-items: center; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--tr-line); flex-wrap: wrap; }
.fp-cr:last-child { border-bottom: 0; }
.fp-cr-b { flex: 1 1 14rem; min-width: 0; }
.fp-cr-t { display: block; font-size: 0.9rem; font-weight: 600; color: var(--tr-navy-ink); }
.fp-cr-t .mp-tag { margin-left: 0.4rem; vertical-align: 1px; }
.fp-cr-meta { display: block; font-size: 0.76rem; color: var(--tr-gray); margin-top: 0.35rem; }
.fp-cr-act { display: flex; gap: 0.4rem; flex-shrink: 0; }

/* Fake buttons inside a figure. */
.fp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: 6px;
    border: 1px solid var(--tr-line);
    background: #fff;
    color: var(--tr-slate);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.fp-btn i { font-size: 0.72rem; }
.fp-btn.is-primary { background: var(--tr-navy); border-color: var(--tr-navy); color: #fff; }
.fp-btn.is-green { background: var(--mp-green); border-color: var(--mp-green); color: #fff; }

/* ── The advancement flow ──────────────────────────────────
   Courses feed a rating; ratings feed a rank. Horizontal on desktop,
   stacked with the arrows rotated on narrow screens. */
.fp-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 0.75rem; }
.fp-node {
    background: #fff;
    border: 1px solid var(--tr-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(15, 51, 87, 0.07);
}
.fp-node-h {
    padding: 0.5rem 0.85rem;
    background: #f4f7fa;
    border-bottom: 1px solid var(--tr-line);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tr-gray);
}
.fp-node.is-award .fp-node-h { background: var(--mp-green-wash); color: var(--mp-green-text); border-bottom-color: var(--mp-green-line); }
.fp-node.is-rank .fp-node-h { background: var(--tr-navy-ink); color: #fff; border-bottom-color: var(--tr-navy-ink); }
.fp-node-b { padding: 0.7rem 0.85rem; }
.fp-node-b ul { list-style: none; margin: 0; padding: 0; }
.fp-node-b li { font-size: 0.82rem; color: var(--tr-slate); padding: 0.2rem 0; display: flex; gap: 0.5rem; align-items: baseline; }
.fp-node-b li i { color: var(--mp-green); font-size: 0.75rem; }
.fp-node-name { display: block; font-family: var(--tr-font-display); font-size: 1.35rem; line-height: 1.1; color: var(--tr-navy-ink); }
.fp-node-sub { font-size: 0.78rem; color: var(--tr-gray); margin-top: 0.15rem; }
.fp-arrow { color: var(--tr-orange); font-size: 1.1rem; text-align: center; align-self: center; }

@media (max-width: 991.98px) {
    .fp-flow { grid-template-columns: 1fr; }
    .fp-arrow { transform: rotate(90deg); }
}

/* ── Advancement check: the rank ladder and its gates ─────── */
.fp-ladder { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 1rem; }
.fp-rank {
    border: 1px solid var(--tr-line);
    border-radius: 10px;
    padding: 0.6rem 0.95rem;
    background: #fff;
    min-width: 9rem;
}
.fp-rank span { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tr-gray); }
.fp-rank strong { font-family: var(--tr-font-display); font-size: 1.3rem; color: var(--tr-navy-ink); font-weight: 700; }
.fp-rank.is-next { border-style: dashed; border-color: var(--tr-orange); background: #fff8f2; }
.fp-rank.is-next strong { color: var(--tr-orange-text); }

.fp-verdict {
    margin: 0 1rem 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(234, 113, 37, 0.1);
    color: var(--tr-orange-text);
}
.fp-verdict.is-ok { background: var(--mp-green-wash); color: var(--mp-green-text); }

.fp-gate-h {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tr-gray);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.fp-gate-list { list-style: none; margin: 0; padding: 0; }
.fp-gate-list li {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    font-size: 0.85rem;
    padding: 0.22rem 0;
    color: var(--tr-slate);
}
.fp-gate-list li i { font-size: 0.78rem; flex-shrink: 0; }
.fp-gate-list li.is-met i { color: var(--mp-green); }
.fp-gate-list li.is-unmet { color: var(--tr-gray); }
.fp-gate-list li.is-unmet i { color: #b9c4ce; }
.fp-gate-list li small { color: var(--tr-gray); }

/* ── Three shapes an org can run in (ranks / ratings / blend) ── */
.fp-shape { height: 68px; display: flex; align-items: flex-end; justify-content: center; gap: 0.4rem; margin-bottom: 0.9rem; }
.fp-shape i { display: block; width: 26px; border-radius: 3px 3px 0 0; background: var(--tr-navy); opacity: 0.85; }
.fp-shape.is-mix { align-items: center; flex-wrap: wrap; max-width: 8.5rem; margin-inline: auto; gap: 0.4rem; }
.fp-shape.is-mix i { width: 16px; height: 16px; border-radius: 50%; background: var(--mp-green); }
.fp-shape.is-blend i:nth-child(even) { background: var(--mp-green); }

/* ── Exam question card ────────────────────────────────────── */
.fp-q { padding: 1rem; }
.fp-q-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.6rem; }
.fp-q-h h4 { font-size: 0.98rem; margin: 0; color: var(--tr-navy-ink); }
.fp-opt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    margin-bottom: 0.45rem;
    font-size: 0.86rem;
    color: var(--tr-slate);
    background: #fff;
}
.fp-opt:last-child { margin-bottom: 0; }
.fp-radio {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid #c3ced8;
    background: #fff;
}
.fp-opt.is-picked { border-color: var(--tr-navy); background: #f6f9fc; }
.fp-opt.is-picked .fp-radio { border-color: var(--tr-navy); box-shadow: inset 0 0 0 3px var(--tr-navy); }
.fp-opt.is-right { border-color: var(--mp-green-line); background: var(--mp-green-wash); color: var(--mp-green-text); font-weight: 600; }
.fp-opt.is-right .fp-radio { border-color: var(--mp-green); box-shadow: inset 0 0 0 3px var(--mp-green); }
.fp-opt.is-wrong { border-color: rgba(181, 78, 6, 0.35); background: rgba(234, 113, 37, 0.07); color: var(--tr-orange-text); }
.fp-opt.is-wrong .fp-radio { border-color: var(--tr-orange-text); box-shadow: inset 0 0 0 3px var(--tr-orange-text); }
.fp-opt-mark { margin-left: auto; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

.fp-explain {
    margin-top: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--tr-navy);
    background: #f6f9fc;
    font-size: 0.83rem;
    color: var(--tr-slate);
}
.fp-explain strong { color: var(--tr-navy-ink); }

/* Result banner. */
.fp-score { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--tr-line); }
.fp-score-n {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--tr-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mp-green-text);
    background: var(--mp-green-wash);
    border: 2px solid var(--mp-green-line);
}
.fp-score-t { display: block; font-family: var(--tr-font-display); font-size: 1.5rem; line-height: 1.1; color: var(--tr-navy-ink); }
.fp-score-s { display: block; font-size: 0.82rem; color: var(--tr-gray); }

/* ── Diagram-label question ────────────────────────────────── */
.fp-dia { position: relative; padding: 1rem; }
.fp-dia-photo { display: block; width: 100%; height: auto; border-radius: .5rem; }
.fp-bank { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 1rem; }
.fp-bank span {
    padding: 0.24rem 0.7rem;
    border-radius: 6px;
    border: 1px dashed #c3ced8;
    background: #f8fafc;
    font-size: 0.78rem;
    color: var(--tr-slate);
}
.fp-bank span.is-placed { border-style: solid; border-color: var(--mp-green-line); background: var(--mp-green-wash); color: var(--mp-green-text); font-weight: 600; }

/* ── Practical evaluation sheet ────────────────────────────── */
.fp-check { list-style: none; margin: 0; padding: 0.4rem 0; }
.fp-check li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.35rem 1rem; font-size: 0.86rem; color: var(--tr-slate); }
.fp-box {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid #c3ced8;
    background: #fff;
    margin-top: 0.12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: #fff;
}
.fp-check li.is-checked .fp-box { background: var(--mp-green); border-color: var(--mp-green); }
.fp-field {
    margin: 0.5rem 1rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--tr-line);
    border-radius: 8px;
    background: #fbfcfd;
    font-size: 0.83rem;
    color: var(--tr-slate);
    min-height: 3.2rem;
}
.fp-field em { color: #8b96a1; font-style: normal; }
.fp-outcomes { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.4rem 1rem 1rem; }

/* ── Landing-page inline figures ───────────────────────────
   Miniatures of the figures above, sitting inside a capability card on
   the landing page: smaller type, no shadow — the card already has one. */
.fp-mini {
    border: 1px solid var(--tr-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 1.1rem;
}
.fp-mini .mp-fig-bar { padding: 0.45rem 0.7rem; font-size: 0.76rem; }
.fp-mini .mp-fig-foot { padding: 0.45rem 0.7rem; font-size: 0.74rem; }
.fp-mini .fp-outline > li { padding: 0.4rem 0.7rem; gap: 0.5rem; }
.fp-mini .fp-item-t { font-size: 0.8rem; }
.fp-mini .fp-item-sub { font-size: 0.7rem; }
.fp-mini .fp-item-n { width: 1.3rem; height: 1.3rem; font-size: 0.78rem; }
.fp-mini .fp-gate-list li { font-size: 0.78rem; padding: 0.15rem 0.7rem; }
.fp-mini .fp-q { padding: 0.7rem; }
.fp-mini .fp-opt { padding: 0.32rem 0.55rem; font-size: 0.78rem; margin-bottom: 0.3rem; }
.fp-mini .fp-check li { font-size: 0.78rem; padding: 0.25rem 0.7rem; }
.fp-mini .fp-cr { padding: 0.5rem 0.7rem; }
.fp-mini .fp-ladder { padding: 0.7rem; gap: 0.6rem; }
.fp-mini .fp-rank { min-width: 6.5rem; padding: 0.4rem 0.65rem; }
.fp-mini .fp-rank strong { font-size: 1.05rem; }
.fp-mini .fp-verdict { margin: 0 0.7rem 0.7rem; font-size: 0.78rem; padding: 0.4rem 0.6rem; }