/* Practice pages (calisthenics.html, yoga.html). Loaded after styles.css on those
   pages only. Reuses the shared section, principle-card, ml-* library, faq-item,
   kday timeline and mc-popup styles; everything here is prefixed pp-. */

.principle-body a, .faq-answer a { color: var(--fire); text-underline-offset: 2px; }

/* ── The Path: the keto-day timeline, recoloured for Train ── */
.pp-path .kday-timeline::before { background: linear-gradient(to bottom, var(--train), rgba(24,95,165,0.15)); }
.pp-path .kday-item::before { background: var(--train); box-shadow: 0 0 0 3px rgba(24,95,165,0.25); }
.pp-path .kday-item--anchor::before { background: var(--white); box-shadow: 0 0 0 3px var(--train); }
.pp-path .kday-time { color: var(--train); font-family: 'JetBrains Mono', monospace; }
.pp-path-meta { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--silver); margin-top: 0.6rem; }
.pp-path-gate { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--muted); margin-top: 0.3rem; line-height: 1.6; }
.pp-path-gate span { color: var(--fire); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-right: 0.5rem; }
.pp-link { background: none; border: none; padding: 0; margin-top: 0.75rem; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 600; color: var(--train); transition: color 0.15s; }
.pp-link:hover { color: var(--fire); }

/* ── The Ladders ── */
/* Cards draw their own overlapping borders, so a short last row leaves empty
   space rather than the grey block a gap-over-background grid shows. */
.pp-ladders { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 3rem; padding: 0 1px 1px 0; }
.pp-ladder { background: var(--black); border: 1px solid var(--ash); margin: 0 -1px -1px 0; padding: 1.5rem; transition: box-shadow 0.3s; scroll-margin-top: 6rem; }
.pp-library .ml-grid { gap: 0; background: none; border: none; padding: 0 1px 1px 0; }
.pp-library .ml-card, .pp-library .ml-empty { border: 1px solid var(--ash); margin: 0 -1px -1px 0; }
html[data-theme="light"] .pp-library .ml-grid { background: none; }
.pp-ladder.is-flash { box-shadow: inset 0 0 0 2px var(--fire); }
.pp-ladder-name { font-family: var(--bebas); font-size: 1.35rem; letter-spacing: 0.05em; color: var(--white); margin-bottom: 0.9rem; }
.pp-steps { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; }
.pp-step { width: 100%; display: flex; align-items: flex-start; gap: 0.75rem; text-align: left; background: transparent; color: inherit; border: 1px solid var(--ash); border-left-width: 3px; padding: 0.55rem 0.7rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pp-step:hover { border-color: var(--fire); }
.pp-step.is-current { border-color: var(--train); background: rgba(24,95,165,0.1); }
.pp-step-num { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; color: var(--train); padding-top: 0.15rem; }
.pp-step-text { flex: 1; min-width: 0; }
.pp-step-text strong { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; color: var(--offwhite); }
.pp-step-text small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }
.pp-step-flag { align-self: center; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: var(--train); padding: 0.15rem 0.4rem; }

/* ── The Practice: phase picker, week, sessions, gate ── */
.pp-practice { margin-top: 3rem; }
.pp-phase-tabs { margin-bottom: 1.5rem; }
.pp-phase { border: 1px solid var(--ash); padding: 2rem 2.25rem; }
.pp-phase-head { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; }
.pp-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--train); margin-bottom: 0.4rem; }
.pp-phase-title { font-family: var(--bebas); font-size: clamp(2rem, 3.5vw, 2.8rem); letter-spacing: 0.03em; line-height: 1; color: var(--white); margin-bottom: 0.75rem; }
.pp-phase-theme { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.05rem; color: var(--silver); max-width: 56ch; line-height: 1.7; }
.pp-stats { display: grid; grid-template-columns: repeat(3, auto); gap: 1px; background: var(--ash); border: 1px solid var(--ash); }
.pp-stats div { background: var(--black); padding: 0.75rem 1rem; min-width: 6.5rem; max-width: 15rem; }
.pp-stats dt { font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pp-stats dd { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; color: var(--offwhite); margin-top: 0.25rem; line-height: 1.45; }
.pp-focus { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }

.pp-sub { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fire); margin: 2.25rem 0 0.85rem; }

.pp-week { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ash); border: 1px solid var(--ash); }
.pp-day { background: var(--black); padding: 0.75rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; min-height: 5.5rem; }
.pp-day.has-session { background: var(--offblack); }
.pp-day-name { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pp-day-session { text-align: left; background: none; border: none; padding: 0; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; color: var(--fire); line-height: 1.35; }
.pp-day-session:hover { color: var(--offwhite); }
.pp-day-note { font-size: 0.75rem; color: var(--silver); line-height: 1.4; }
.pp-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.75rem; }

.pp-sessions.faq-list { margin-top: 0; max-width: none; }
.pp-session { scroll-margin-top: 6rem; }
.pp-session summary small { font-weight: 400; color: var(--muted); margin-left: 0.75rem; }
.pp-session-summary { margin-bottom: 1rem; }
.pp-block + .pp-block { margin-top: 1.1rem; }
.pp-block-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--train); border-bottom: 1px solid var(--ash); padding-bottom: 0.35rem; margin-bottom: 0.25rem; }
.pp-block-head span + span { color: var(--muted); font-weight: 400; letter-spacing: 0.03em; text-transform: none; }
.pp-items { list-style: none; }
.pp-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dashed rgba(255,255,255,0.06); }
.pp-item:last-child { border-bottom: none; }
.pp-item em { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--fire); text-align: right; flex-shrink: 0; max-width: 45%; }
.pp-item--note span { font-size: 0.85rem; color: var(--silver); }
.pp-item-btn { background: none; border: none; padding: 0; cursor: pointer; text-align: left; color: var(--offwhite); font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 400; }
.pp-item-name { border-bottom: 1px dotted var(--muted); transition: color 0.15s, border-color 0.15s; }
.pp-item-btn:hover .pp-item-name { color: var(--fire); border-color: var(--fire); }
.pp-item-btn small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; color: var(--train); margin-top: 0.2rem; }

.pp-gate { margin-top: 2.25rem; border: 1px solid var(--ash); border-left: 3px solid var(--train); background: rgba(24,95,165,0.05); padding: 0.25rem 1.5rem 1.25rem; }
.pp-gate .pp-sub { margin-top: 1rem; }
.pp-gate-intro { font-size: 0.85rem; color: var(--silver); margin-bottom: 0.75rem; }
.pp-gate-list { list-style: none; }
.pp-gate-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--ash); font-size: 0.88rem; color: var(--offwhite); }
.pp-gate-list strong { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 600; color: var(--fire); text-align: right; }
.pp-disclaimer { margin-top: 1.5rem; padding-left: 0; padding-right: 0; }

/* ── The Rules: an odd count lets the last card span the row ── */
.pp-rules .principle-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ── The Library ── */
.pp-library .ml-search { display: block; width: 100%; margin-bottom: 1rem; }
.pp-sanskrit { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 0.92rem; color: var(--silver); line-height: 1.3; margin: -0.15rem 0 0.45rem; }

/* ── Movement sheet (mc-popup shell) ── */
.pp-sheet .mc-popup-header { align-items: flex-start; }
.pp-sheet .pp-sanskrit { margin: 0.2rem 0 0; }
.pp-sheet-back { display: block; background: none; border: none; padding: 0; margin-bottom: 0.4rem; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.04em; color: var(--train); transition: color 0.15s; }
.pp-sheet-back:hover { color: var(--fire); }
/* display:block above would otherwise beat the browser's own rule for [hidden],
   leaving an empty Back button on cards opened straight from the library. */
.pp-sheet-back[hidden] { display: none; }
.pp-sheet-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.4rem; transition: color 0.15s; }
.pp-sheet-close:hover { color: var(--offwhite); }
.pp-sheet-img { display: block; width: 100%; max-height: 50vh; object-fit: contain; background: #fff; margin-bottom: 1rem; }
.pp-sheet-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.pp-sheet-dose { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 600; color: var(--fire); margin-left: 0.3rem; }
.pp-sheet-purpose { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1rem; color: var(--silver); line-height: 1.6; margin-top: 0.9rem; }
.pp-sheet .pp-sub { margin: 1.5rem 0 0.5rem; }
.pp-sheet-list { padding-left: 1.25rem; }
.pp-sheet-list li { font-size: 0.88rem; color: var(--offwhite); line-height: 1.65; margin-bottom: 0.35rem; }
.pp-sheet-list li::marker { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; }
.pp-cautions li { color: var(--silver); }
.pp-cautions li::marker { color: var(--fire); }
/* A flow's sequence is its illustration: every pose as a thumbnail, in order. */
.pp-sequence { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.9rem; padding-left: 0; counter-reset: seq; }
.pp-sequence li { counter-increment: seq; }
.pp-seq-btn { display: block; width: 100%; padding: 0; background: none; border: none; text-align: left; cursor: pointer; }
.pp-seq-img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: contain; background: #fff; border: 1px solid var(--ash); transition: border-color 0.15s; }
.pp-seq-name { display: block; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; color: var(--offwhite); line-height: 1.35; margin-top: 0.35rem; transition: color 0.15s; }
.pp-seq-name::before { content: counter(seq) ". "; color: var(--muted); }
.pp-seq-btn:hover .pp-seq-img { border-color: var(--fire); }
.pp-seq-btn:hover .pp-seq-name { color: var(--fire); }
.pp-sheet-equip { margin-top: 1.25rem; font-size: 0.82rem; color: var(--silver); }
.pp-sheet-equip span { font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-right: 0.5rem; }
.pp-sheet-ladder { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--coal); }
.pp-sheet-ladder p { font-size: 0.85rem; color: var(--silver); }
.pp-sheet-ladder p span { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--train); margin-right: 0.5rem; }
.pp-sheet-ladder-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 0.75rem 0 1rem; }
.pp-set-step { width: 100%; padding: 0.65rem 1rem; background: var(--fire); border: 1px solid var(--fire); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: background 0.15s; }
.pp-set-step:hover { background: var(--fire-dim); }
.pp-set-step.is-set { background: transparent; color: var(--train); border-color: var(--train); }

.pp-error { padding: 2rem; border: 1px solid var(--ash); background: var(--black); font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--muted); }

html[data-theme="light"] .pp-item { border-bottom-color: rgba(0,0,0,0.08); }

@media (max-width: 900px) {
  .pp-phase-head { grid-template-columns: 1fr; gap: 1.25rem; }
  .pp-week { grid-template-columns: 1fr; }
  .pp-day { flex-direction: row; align-items: baseline; gap: 1rem; min-height: 0; }
  .pp-day-name { min-width: 2.5rem; }
}
@media (max-width: 600px) {
  .pp-phase { padding: 1.25rem; }
  .pp-stats { grid-template-columns: 1fr; }
  .pp-stats div { max-width: none; }
  .pp-item { flex-direction: column; gap: 0.15rem; }
  .pp-item em { text-align: left; max-width: none; }
  .pp-gate { padding: 0.25rem 1rem 1rem; }
  .pp-gate-list li { flex-direction: column; gap: 0.15rem; }
  .pp-gate-list strong { text-align: left; }
  .pp-sequence { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 0.6rem; }
}