/* =============================================================================
   track-render.css — shared styling for the reviewed-markdown content renderer
   (PHX3 Galley Training Hub content rebuild). Consumes the host page's CSS
   variables (--ink, --deep, --green, --crimson, --lemon, --paper, --card,
   --line, --muted, --txt, --head, --body). Loaded by Role Tracks + Foundations.
   ============================================================================= */

/* role-tracks sidebar: stack title over duration cleanly */
.nav .nm{display:block}
.nav .du{display:block}

.trk{max-width:920px}
.trk h1.trk-title{font-family:var(--head);font-weight:800;font-size:27px;color:var(--ink);margin:0 0 6px;line-height:1.08}
.trk .trk-meta{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0 0 6px}
.trk .trk-meta strong{color:var(--ink)}

/* section (chapter / module) */
.trk section.mod2{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:0;margin:0 0 16px;overflow:hidden;scroll-margin-top:14px}
.trk section.mod2 > .mh2{display:flex;align-items:baseline;gap:12px;padding:15px 20px 12px;border-bottom:1px solid var(--line);background:#FbFcfd}
.trk section.mod2 > .mh2 h2{font-family:var(--head);font-weight:800;font-size:17px;color:var(--ink);margin:0;line-height:1.2}
.trk section.mod2 > .mh2 .msrc{font-size:11px;color:var(--muted);margin-left:auto;text-align:right;max-width:340px;line-height:1.35}
.trk .mbody{padding:16px 20px 18px}

/* generic prose */
.trk .mbody p{font-size:13.5px;line-height:1.6;color:var(--txt);margin:0 0 11px}
.trk .mbody p:last-child{margin-bottom:0}
.trk .mbody ul,.trk .mbody ol{margin:0 0 11px;padding-left:20px}
.trk .mbody li{font-size:13.5px;line-height:1.55;color:var(--txt);margin:2px 0}
.trk .mbody strong{color:var(--ink)}
.trk .mbody code{background:#EFF4F7;border:1px solid var(--line);border-radius:5px;padding:1px 6px;font-size:12.5px;color:var(--ink);font-family:var(--body)}
.trk .mbody a{color:var(--crimson);font-weight:600}
.trk .mbody pre{background:linear-gradient(135deg,#08374f,var(--deep));color:#EAF2F6;border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:12.5px;line-height:1.5;margin:0 0 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}

/* h3 sub-labels */
.trk .sub3{font-family:var(--head);font-weight:700;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--crimson);margin:16px 0 8px}
.trk .sub3:first-child{margin-top:0}

/* tables */
.trk .tblwrap{overflow-x:auto;margin:0 0 12px}
.trk table.md{border-collapse:collapse;width:100%;font-size:12.5px}
.trk table.md th,.trk table.md td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top;line-height:1.4}
.trk table.md th{background:var(--paper);font-family:var(--head);font-weight:700;color:var(--ink)}
.trk table.md code{background:#EFF4F7;border:1px solid var(--line);border-radius:4px;padding:0 4px}

/* PHX3 Standard callout — visually distinct from stock Galley behaviour */
.trk .phx3std{border-left:4px solid var(--crimson);background:linear-gradient(120deg,rgba(239,56,39,.06),rgba(247,204,31,.06));border-radius:0 11px 11px 0;padding:12px 16px;margin:0 0 12px}
.trk .phx3std .pl{font-family:var(--head);font-weight:800;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--crimson);display:block;margin-bottom:4px}
.trk .phx3std p{font-size:13px;line-height:1.55;color:var(--txt);margin:0 0 6px}
.trk .phx3std p:last-child{margin:0}

/* generic blockquote (scope / takeaway / rule) */
.trk blockquote.gq{border-left:3px solid var(--ink);background:var(--paper);border-radius:0 10px 10px 0;padding:10px 15px;margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--txt)}
.trk blockquote.gq p{margin:0 0 6px}.trk blockquote.gq p:last-child{margin:0}

/* takeaway pill */
.trk .takeaway{display:flex;gap:10px;align-items:flex-start;background:rgba(0,99,65,.07);border:1px solid rgba(0,99,65,.2);border-radius:10px;padding:11px 15px;margin:0 0 12px}
.trk .takeaway .tl{font-family:var(--head);font-weight:800;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--green);flex:0 0 auto;padding-top:2px}
.trk .takeaway p{font-size:13px;line-height:1.5;color:var(--txt);margin:0;font-weight:600}

/* Storylane embed */
.trk .storylane{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--line);margin:0 0 12px;box-shadow:var(--shadow)}
.trk .storylane iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
.trk .storylane .slfallback{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(125deg,var(--ink),var(--deep));color:#CFE0EA;font-size:12.5px;text-align:center;padding:20px}
.trk .storylane .slfallback b{font-family:var(--head);color:#fff;font-size:13px}
.trk .storylane .slfallback a{color:var(--lemon);font-weight:700}

/* image slots */
.trk figure.imgslot{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.trk figure.imgslot img{display:block;width:100%;height:auto;background:#fff}
.trk figure.imgslot figcaption{font-size:11.5px;color:var(--muted);padding:8px 13px;line-height:1.45;border-top:1px solid var(--line);background:#FbFcfd}
.trk figure.imgslot figcaption .cid{font-family:var(--head);font-weight:700;color:var(--ink);letter-spacing:.3px}
.trk figure.imgslot .attrib{font-size:10.5px;color:#9BA3AF}
/* placeholder card (needs-capture) */
.trk .phcard{border:1.5px dashed var(--line);border-radius:12px;background:repeating-linear-gradient(135deg,#FbFcfd,#FbFcfd 12px,#F4F7F9 12px,#F4F7F9 24px);padding:18px 18px;margin:0 0 12px;display:flex;gap:14px;align-items:flex-start}
.trk .phcard .phic{font-size:22px;line-height:1;flex:0 0 auto}
.trk .phcard .phtxt b{font-family:var(--head);font-weight:800;font-size:12px;letter-spacing:.4px;color:var(--ink);display:block;margin-bottom:3px}
.trk .phcard .phtxt p{font-size:12px;color:var(--muted);margin:0 0 4px;line-height:1.45}
.trk .phcard .phtxt .anno{font-size:10.5px;color:#9a6a00;background:rgba(247,204,31,.16);border-radius:5px;padding:1px 7px;display:inline-block}

/* inline (ungraded) Check yourself */
.trk .icheck{border:1px solid var(--line);border-left:4px solid var(--lemon);border-radius:0 12px 12px 0;background:var(--card);padding:14px 18px;margin:0 0 12px}
.trk .icheck .icl{font-family:var(--head);font-weight:800;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#9a6a00;margin-bottom:8px}
.trk .icheck .icq{font-family:var(--head);font-weight:700;font-size:14px;color:var(--ink);margin:0 0 11px;line-height:1.4}
.trk .icheck .icq + .icq{margin-top:16px}
.trk .icheck .iopt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 13px;margin-bottom:8px;cursor:pointer;font-size:13px;color:var(--txt);line-height:1.4;transition:.12s;font-family:var(--body)}
.trk .icheck .iopt:hover{border-color:var(--ink);background:var(--paper)}
.trk .icheck .iopt .il{font-family:var(--head);font-weight:800;color:var(--ink);flex:0 0 auto}
.trk .icheck .iopt.correct{border-color:var(--green);background:rgba(0,99,65,.08)}
.trk .icheck .iopt.wrong{border-color:var(--crimson);background:rgba(239,56,39,.06)}
.trk .icheck .ifb{font-size:12.5px;line-height:1.55;border-radius:9px;padding:10px 13px;margin:4px 0 2px;display:none}
.trk .icheck .ifb.show{display:block}
.trk .icheck .ifb.ok{background:rgba(0,99,65,.08);color:#1c5a2e;border:1px solid rgba(0,99,65,.25)}
.trk .icheck .ifb.no{background:rgba(239,56,39,.06);color:#9e2418;border:1px solid rgba(239,56,39,.25)}
.trk .icheck .ifb b{font-family:var(--head)}

/* interactive exercises (drag-to-match / hotspot) */
.trk .interx{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:15px 18px;margin:0 0 12px;box-shadow:var(--shadow)}
.trk .interx .ixl{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--crimson);margin-bottom:4px}
.trk .interx .ixsub{font-size:12px;color:var(--muted);margin:0 0 12px;line-height:1.45}
/* drag-to-match */
.trk .dmrow{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:8px}
.trk .dmrow .dmleft{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--txt)}
.trk .dmrow .dmarrow{color:var(--muted);font-weight:800}
.trk .dmrow select.dmsel{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:9px 11px;font-size:12.5px;font-family:var(--body);color:var(--txt);background:#fff}
.trk .dmrow select.dmsel.ok{border-color:var(--green);background:rgba(0,99,65,.06)}
.trk .dmrow select.dmsel.no{border-color:var(--crimson);background:rgba(239,56,39,.05)}
.trk .dmnote{font-size:11.5px;color:var(--muted);margin-top:8px}
/* hotspot grid */
.trk .hotgrid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.trk .hotchip{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:8px 14px;font-size:12.5px;cursor:pointer;font-family:var(--body);color:var(--txt);transition:.12s}
.trk .hotchip:hover{border-color:var(--ink)}
.trk .hotchip.right{border-color:var(--green);background:rgba(0,99,65,.10);color:#1c5a2e}
.trk .hotchip.wrongpick{border-color:var(--crimson);background:rgba(239,56,39,.08);color:#9e2418;text-decoration:line-through}
.trk .hotscore{font-family:var(--head);font-weight:700;font-size:12px;color:var(--muted);margin-top:8px}

/* hands-on gates + quick-reference */
.trk .gates2{border:1.5px solid var(--lemon);background:rgba(247,204,31,.09);border-radius:12px;padding:14px 18px;margin:8px 0 12px}
.trk .gates2 .g2l{font-family:var(--head);font-weight:800;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9a6a00;margin-bottom:8px}
.trk .gates2 ol,.trk .gates2 ul{margin:0;padding-left:20px}
.trk .gates2 li{font-size:13px;line-height:1.55;color:var(--txt);margin:4px 0}
.trk .qref{background:linear-gradient(135deg,#08374f,var(--deep));color:#EAF2F6;border-radius:14px;padding:16px 22px 20px;margin:8px 0 14px;box-shadow:var(--shadow)}
.trk .qref .qrl{display:flex;align-items:center;gap:9px;font-family:var(--head);font-weight:800;font-size:14px;color:#fff;margin-bottom:8px}
.trk .qref p{font-size:12.5px;line-height:1.55;color:#DCEAF1;margin:0 0 7px}
.trk .qref strong{color:var(--lemon)}
.trk .qref code{background:rgba(255,255,255,.1);border-radius:4px;padding:0 5px;color:#fff}
.trk .qref ul{margin:0;padding-left:18px}.trk .qref li{font-size:12.5px;color:#DCEAF1;margin:3px 0;line-height:1.5}
@media print{
  .trk .qref{background:#fff;color:#000;border:1.5px solid var(--ink);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .trk .qref .qrl,.trk .qref strong{color:var(--ink)}.trk .qref p,.trk .qref li{color:#16323F}
  .trk .storylane,.trk .interx,.trk .icheck{display:none}
}