/* The Training Room, Training Pack 1: The Cell That Arrived Whole.
   Shared styles for training/ pages. Builds on css/article.css. */

:root {
  --tp-gold: rgba(201,147,42,1);
  --tp-gold-dim: rgba(201,147,42,.5);
  --tp-gold-ghost: rgba(201,147,42,.06);
  --tp-text: rgba(255,255,255,.88);
  --tp-text-dim: rgba(255,255,255,.45);
  --tp-card-bg: #05050e;
  --tp-accent: var(--tp-gold);
  --tp-accent-dim: var(--tp-gold-dim);
  --tp-accent-ghost: var(--tp-gold-ghost);
}

body.tp-page { background:#07070a; }

/* Breadcrumb */
.tp-crumb { display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;padding:1rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.06);font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(255,255,255,.3); }
.tp-crumb a { color:var(--tp-gold-dim);text-decoration:none; }
.tp-crumb a:hover,.tp-crumb a:focus-visible { color:var(--tp-gold); }
.tp-crumb-sep { color:rgba(255,255,255,.15); }

/* Hero */
.tp-hero { position:relative;padding:4rem 2rem 2.5rem;max-width:860px;margin:0 auto;text-align:left; }
.tp-eyebrow { font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tp-accent-dim);display:block;margin-bottom:1rem; }
.tp-hero h1 { font-family:'Oswald',sans-serif;font-size:clamp(2rem,5vw,3.4rem);font-weight:700;letter-spacing:.02em;text-transform:uppercase;line-height:1.05;margin:0 0 .8rem;color:#fff; }
.tp-hero h1 em { font-style:normal;color:var(--tp-accent); }
.tp-sub { font-family:'Oswald',sans-serif;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-text-dim);margin:0; }

/* Body column */
.tp-body { max-width:760px;margin:0 auto;padding:1.5rem 2rem 3rem; }
.tp-body section { margin-bottom:2.6rem; }
.tp-label { font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tp-accent-dim);display:block;margin-bottom:.6rem; }
.tp-body h2 { font-family:'Oswald',sans-serif;font-size:1.5rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 1rem; }
.tp-body p { font-family:'Cormorant Garamond',serif;font-size:1.05rem;line-height:1.85;color:rgba(255,255,255,.72);margin:0 0 1.2rem; }
.tp-body p strong, .tp-beat strong { color:rgba(255,255,255,.85);font-weight:700; }
.tp-body a { color:var(--tp-gold-dim); }
.tp-body a:hover,.tp-body a:focus-visible { color:var(--tp-gold); }

/* Story scene */
.tp-scene { border-left:3px solid var(--tp-accent);background:var(--tp-accent-ghost);border-radius:0 4px 4px 0;padding:1.2rem 1.6rem; }
.tp-scene p { font-style:italic;font-size:1.12rem;color:rgba(255,255,255,.78);margin:0; }
.tp-scene p + p { margin-top:.9rem; }

/* Teaching beat list */
.tp-beat { list-style:none;margin:0;padding:0; }
.tp-beat li { position:relative;font-family:'Cormorant Garamond',serif;font-size:1.02rem;line-height:1.8;color:rgba(255,255,255,.72);padding:0 0 1rem 1.6rem; }
.tp-beat li::before { content:'';position:absolute;left:0;top:.62rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--tp-accent-dim); }
.tp-beat ol { margin:.5rem 0 0;padding-left:1.4rem; }
.tp-beat ol li { padding:0 0 .4rem 0; }
.tp-beat ol li::before { content:''; width:0;height:0; }

/* Animation block */
.tp-anim { background:var(--tp-card-bg);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:1.2rem;margin:.5rem 0 0; }
.tp-anim canvas { display:block;width:100%;height:320px;border-radius:4px;background:#030309; }
.tp-anim-note { font-family:'Inter',sans-serif;font-size:.78rem;color:var(--tp-text-dim);margin:.8rem 0 0;line-height:1.6; }
@media(max-width:600px) { .tp-anim canvas { height:240px; } }

/* Site page link card */
.tp-sitelink { display:block;border:1px solid rgba(255,255,255,.1);border-left:3px solid var(--tp-accent-dim);border-radius:0 4px 4px 0;background:var(--tp-card-bg);padding:1.1rem 1.4rem;text-decoration:none;transition:border-color .2s,background .2s; }
.tp-sitelink:hover,.tp-sitelink:focus-visible { border-left-color:var(--tp-accent);background:rgba(255,255,255,.02); }
.tp-sitelink-name { font-family:'Oswald',sans-serif;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tp-text);display:block;margin-bottom:.25rem; }
.tp-sitelink-meta { font-family:'Inter',sans-serif;font-size:.74rem;color:var(--tp-text-dim);display:block; }

/* Check your understanding */
.tp-check { border:1px solid rgba(255,255,255,.1);border-radius:6px;background:var(--tp-card-bg);padding:1.4rem 1.6rem; }
.tp-q { font-family:'Cormorant Garamond',serif;font-size:1.08rem;color:rgba(255,255,255,.82); }
.tp-reveal-btn { font-family:'Oswald',sans-serif;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-accent);background:var(--tp-accent-ghost);border:1px solid var(--tp-accent-dim);border-radius:3px;padding:.5rem 1rem;cursor:pointer;min-height:40px;transition:background .2s; }
.tp-reveal-btn:hover,.tp-reveal-btn:focus-visible { background:rgba(255,255,255,.06); }
.tp-answer { margin-top:1rem;border-top:1px solid rgba(255,255,255,.08);padding-top:1rem; }
.tp-answer p { margin:0;color:rgba(255,255,255,.78); }

/* Takeaway */
.tp-takeaway { border-left:3px solid var(--tp-gold);background:var(--tp-gold-ghost);border-radius:0 4px 4px 0;padding:1rem 1.4rem;font-size:1.1rem !important;color:rgba(255,255,255,.82) !important; }

/* Light the node */
.tp-light { border:1px solid var(--tp-accent-dim);border-radius:6px;background:var(--tp-accent-ghost);padding:1.5rem 1.6rem;text-align:center; }
.tp-light .tp-label { margin-bottom:1rem; }
.tp-light-btn { font-family:'Oswald',sans-serif;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#07070a;background:var(--tp-accent);border:1px solid var(--tp-accent);border-radius:3px;padding:.7rem 1.6rem;cursor:pointer;min-height:44px;transition:opacity .2s; }
.tp-light-btn:hover,.tp-light-btn:focus-visible { opacity:.85; }
.tp-light-btn.tp-lit { color:var(--tp-accent);background:transparent;cursor:default;opacity:1; }
.tp-light-note { font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:rgba(255,255,255,.78);margin:1rem auto 0;max-width:520px;line-height:1.7; }
.tp-map-link { display:inline-block;margin-top:1rem;font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-gold-dim);text-decoration:none; }
.tp-map-link:hover,.tp-map-link:focus-visible { color:var(--tp-gold); }

/* Prev / next */
.tp-pagenav { display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:760px;margin:0 auto;padding:1.6rem 2rem;border-top:1px solid rgba(255,255,255,.07); }
.tp-pagenav a { font-family:'Oswald',sans-serif;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tp-gold-dim);text-decoration:none;padding:.4rem 0;min-height:44px;display:inline-flex;align-items:center; }
.tp-pagenav a:hover,.tp-pagenav a:focus-visible { color:var(--tp-gold); }

/* Footer */
.tp-footer { text-align:center;padding:2.5rem 2rem 3rem;border-top:1px solid rgba(255,255,255,.07); }
.tp-footer-word { font-family:'Oswald',sans-serif;font-size:1rem;letter-spacing:.3em;color:rgba(255,255,255,.5);text-decoration:none; }
.tp-footer-word:hover,.tp-footer-word:focus-visible { color:var(--tp-gold); }
.tp-footer-note { font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;color:var(--tp-text-dim);margin:.8rem 0 .3rem; }
.tp-footer-copy { font-family:'Inter',sans-serif;font-size:.72rem;color:rgba(255,255,255,.25);margin:0; }

/* ===== Landing page ===== */
.tp-home-hero { text-align:center;padding:4.5rem 2rem 2rem;max-width:860px;margin:0 auto; }
.tp-home-hero h1 { font-family:'Oswald',sans-serif;font-size:clamp(2.1rem,5.5vw,3.6rem);font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1.05;color:#fff;margin:0 0 1rem; }
.tp-home-hero h1 span { color:var(--tp-gold); }
.tp-home-lead { font-family:'Cormorant Garamond',serif;font-size:1.18rem;line-height:1.75;color:rgba(255,255,255,.7);max-width:640px;margin:0 auto 1.5rem; }

.tp-acts { display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.07);margin:1rem 0 0;border-radius:4px;overflow:hidden; }
.tp-act { background:var(--tp-card-bg);padding:1.2rem; }
.tp-act-num { font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-gold-dim);display:block;margin-bottom:.4rem; }
.tp-act-name { font-family:'Oswald',sans-serif;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tp-text);display:block;margin-bottom:.4rem; }
.tp-act-desc { font-family:'Inter',sans-serif;font-size:.76rem;line-height:1.6;color:var(--tp-text-dim);margin:0; }
@media(max-width:760px) { .tp-acts { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .tp-acts { grid-template-columns:1fr; } }

/* Cell map */
.tp-map-wrap { background:var(--tp-card-bg);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:1.5rem;margin:.5rem 0 0; }
.tp-map-svg { display:block;width:100%;max-width:620px;height:auto;margin:0 auto; }
.tp-map-progress { font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-gold-dim);text-align:center;margin:1rem 0 0; }
.tp-map-progress strong { color:var(--tp-gold);font-weight:600; }

/* Episode cards */
.tp-cards { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:.5rem 0 0; }
.tp-card { position:relative;display:flex;flex-direction:column;background:var(--tp-card-bg);border:1px solid rgba(255,255,255,.08);border-left:3px solid var(--tp-card-color,rgba(255,255,255,.2));border-radius:0 4px 4px 0;padding:1.1rem 1.2rem;text-decoration:none;transition:background .2s,border-color .2s;min-height:120px; }
.tp-card:hover,.tp-card:focus-visible { background:rgba(255,255,255,.03);border-left-color:var(--tp-card-color-full,#fff); }
.tp-card-num { font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tp-text-dim);display:block;margin-bottom:.35rem; }
.tp-card-title { font-family:'Oswald',sans-serif;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--tp-text);line-height:1.25;display:block;margin-bottom:.35rem; }
.tp-card-sys { font-family:'Inter',sans-serif;font-size:.72rem;color:var(--tp-text-dim);display:block;margin-top:auto; }
.tp-card-lit { position:absolute;top:.8rem;right:.9rem;font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tp-gold);opacity:0; }
.tp-card.tp-lit .tp-card-lit { opacity:1; }
.tp-card.tp-lit { border-left-color:var(--tp-card-color-full,#fff); }
@media(max-width:860px) { .tp-cards { grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px) { .tp-cards { grid-template-columns:1fr; } }

/* Core page list */
.tp-links { list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem; }
.tp-links li { margin:0; }
.tp-links a { display:block;border:1px solid rgba(255,255,255,.08);border-radius:4px;background:var(--tp-card-bg);padding:.8rem 1rem;font-family:'Inter',sans-serif;font-size:.8rem;color:var(--tp-text);text-decoration:none;transition:border-color .2s; }
.tp-links a:hover,.tp-links a:focus-visible { border-color:var(--tp-gold-dim); }
.tp-links a span { display:block;font-size:.72rem;color:var(--tp-text-dim);margin-top:.2rem; }
@media(max-width:600px) { .tp-links { grid-template-columns:1fr; } }

/* ===== Facilitator page ===== */
.tp-steps { list-style:none;counter-reset:tpstep;margin:0;padding:0; }
.tp-steps li { position:relative;counter-increment:tpstep;font-family:'Cormorant Garamond',serif;font-size:1.02rem;line-height:1.75;color:rgba(255,255,255,.72);padding:0 0 .9rem 2.4rem; }
.tp-steps li::before { content:counter(tpstep);position:absolute;left:0;top:.1rem;width:1.6rem;height:1.6rem;border-radius:50%;border:1px solid var(--tp-gold-dim);color:var(--tp-gold);font-family:'Oswald',sans-serif;font-size:.78rem;display:flex;align-items:center;justify-content:center; }

.tp-table-wrap { overflow-x:auto;border:1px solid rgba(255,255,255,.08);border-radius:4px; }
.tp-table { width:100%;border-collapse:collapse;font-family:'Inter',sans-serif;font-size:.78rem;line-height:1.55;color:rgba(255,255,255,.72); }
.tp-table th { font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tp-gold-dim);text-align:left;padding:.7rem .9rem;background:rgba(201,147,42,.05);border-bottom:1px solid rgba(255,255,255,.1); }
.tp-table td { padding:.65rem .9rem;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top; }
.tp-table tr:last-child td { border-bottom:0; }

.tp-print-btn { font-family:'Oswald',sans-serif;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tp-gold);background:var(--tp-gold-ghost);border:1px solid var(--tp-gold-dim);border-radius:3px;padding:.55rem 1.2rem;cursor:pointer;min-height:44px; }
.tp-print-btn:hover,.tp-print-btn:focus-visible { background:rgba(201,147,42,.14); }

/* Focus visibility for keyboard users */
.tp-page a:focus-visible, .tp-page button:focus-visible { outline:2px solid var(--tp-gold);outline-offset:2px; }

/* Reduced motion: stop CSS transitions */
@media (prefers-reduced-motion: reduce) {
  .tp-page * { transition-duration:.01ms !important;animation-duration:.01ms !important; }
}

/* ===== Print view (facilitator guide and any training page) ===== */
@media print {
  body.tp-page { background:#fff !important;color:#000 !important; }
  .tp-crumb,.tp-pagenav,.tp-print-btn,.anim-ctrl-bar,.tp-light,.tp-anim,.tp-footer-word,.tp-map-link { display:none !important; }
  .tp-page h1,.tp-page h2,.tp-page .tp-label,.tp-eyebrow,.tp-sub,.tp-act-name,.tp-act-num,.tp-card-num,.tp-card-title { color:#000 !important; }
  .tp-body p,.tp-beat li,.tp-steps li,.tp-scene p,.tp-q,.tp-answer p,.tp-takeaway,.tp-act-desc,.tp-card-sys,.tp-table,.tp-table td,.tp-footer-note,.tp-footer-copy { color:#111 !important; }
  .tp-scene,.tp-takeaway,.tp-check,.tp-sitelink,.tp-act,.tp-card,.tp-map-wrap,.tp-table th { background:#fff !important;border-color:#999 !important; }
  .tp-table th { color:#000 !important; }
  .tp-answer { display:block !important; }
  .tp-answer[hidden] { display:block !important; }
  .tp-body a { color:#000 !important;text-decoration:underline; }
  .tp-map-svg text { fill:#000 !important; }
}