/* The Schoolroom (build 2026.11.01.13) — dressed entirely in the
 * house tokens, so the Red Door skin (html.nc17) re-dresses it
 * with the rest of the manor and nothing here hard-codes a color
 * the flip cannot reach. */

.sr-path { margin: 18px 0; padding: 20px; }
.sr-path-head { display: flex; gap: 14px; align-items: center; }
/* The fold (build 2026.11.03.1): the head is the card's handle —
 * it taps open and shut, wearing the hub fold's caret dress. */
.sr-path-head[data-sr-head] { cursor: pointer; }
.sr-path-head-main { flex: 1; min-width: 0; }
.sr-caret { flex: none; color: var(--gold); font-size: 1.05rem; padding: 3px 8px; border: 1px solid var(--line-gold);
  border-radius: 999px; background: rgba(201, 162, 39, .06); transition: transform .25s ease, background .25s ease; }
.sr-path.open .sr-caret { transform: rotate(180deg); background: rgba(201, 162, 39, .18); }
.sr-path-body.hidden { display: none; }
.sr-path-ico { font-size: 2rem; }
.sr-path-title { font-family: var(--display); color: var(--gold); letter-spacing: .04em; margin: 0; }

/* The progress map: lit steps on a road — a map, never a meter. */
.sr-map { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 14px 0 6px; }
.sr-node {
  width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-gold); color: var(--muted); font-family: var(--serif); font-size: .95rem;
  background: var(--card2);
}
.sr-node.lit { background: var(--grad-btn); color: #fff; border-color: var(--gold); box-shadow: 0 0 10px rgba(201, 162, 39, .45); }
.sr-node.locked { opacity: .55; }
.sr-link { width: 18px; height: 2px; background: var(--line-gold); opacity: .6; }
.sr-map-line { width: 100%; color: var(--dim); font-size: .85rem; margin-top: 4px; }

.sr-lessons { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.sr-lesson { display: flex; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card2); }
.sr-lesson.done { border-color: var(--line-gold); }
.sr-thumb { width: 96px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-gold); background: var(--bg2); flex: none; }
.sr-thumb.gone { display: none; }
.sr-lesson-main { flex: 1; min-width: 0; }
.sr-lesson-title { font-family: var(--serif); font-size: 1.05rem; color: var(--txt); }
.sr-state { font-size: .82rem; }
.sr-state.lit { color: var(--candle); }
.sr-state.locked { color: var(--dim); }
.sr-state.open { color: var(--ok); }

.sr-stage { padding: 6px 10px 14px; }
.sr-video { width: 100%; max-height: 62vh; border-radius: 12px; border: 1px solid var(--line-gold); background: #000; }
.sr-warn { margin-top: 8px; }
.sr-steps { margin: 10px 0 10px 22px; color: var(--muted); line-height: 1.65; font-family: var(--serif); font-size: 1.02rem; }
.sr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.sr-door { text-align: center; padding: 22px 12px; }
.sr-door .big { font-size: 2.2rem; margin-bottom: 8px; }
.sr-door p { color: var(--muted); max-width: 46ch; margin: 0 auto 14px; line-height: 1.6; }

.sr-practice { margin-top: 14px; border-top: 1px dashed var(--line-gold); padding-top: 12px; }
.sr-practice-h { font-family: var(--serif); color: var(--candle); margin: 0 0 6px; }
.sr-self { width: 100%; max-height: 48vh; border-radius: 12px; border: 1px solid var(--line); background: #000; margin: 8px 0; }

.sr-rec-banner {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 200;
  background: rgba(20, 4, 8, .92); color: #ffb3ab; border: 1px solid var(--blood2);
  padding: 8px 16px; border-radius: 999px; font-size: .88rem; letter-spacing: .02em;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .5);
}
.sr-rec-banner.hidden { display: none; }

/* ---- Season Two & the Pole Package (build 2026.11.02) ---- */

/* The road summary: the member's whole lit road, worn at the top
 * of the wing and on their portrait alike — one rendering, a warm
 * line and a string of candle-beads. */
.sr-road {
  margin: 16px 0 4px; padding: 14px 18px; border: 1px solid var(--line-gold); border-radius: var(--r);
  background: linear-gradient(180deg, var(--card), var(--card2));
  box-shadow: inset 0 1px 0 rgba(232, 179, 75, .12), 0 6px 22px rgba(0, 0, 0, .35);
}
.sr-road-line { font-family: var(--serif); font-size: 1.12rem; color: var(--candle); letter-spacing: .02em; }
.sr-road-beads { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.sr-road-bead {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--dim); font-size: .8rem; background: var(--bg2);
  transition: box-shadow .3s ease, background .3s ease;
}
.sr-road-bead.lit { background: var(--grad-btn); color: #fff; border-color: var(--gold); box-shadow: 0 0 9px rgba(201, 162, 39, .5); }
.sr-road-link { width: 10px; height: 2px; background: var(--line-gold); opacity: .55; }

/* The NEW badge, worn like jewelry: a small gold pill with a
 * candle-glow, tokens only so the Red Door flip re-dresses it. */
.sr-new-pill {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 10px;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  color: #1d1206; background: linear-gradient(135deg, var(--candle), var(--gold));
  border-radius: 999px; box-shadow: 0 0 12px rgba(232, 179, 75, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.sr-special-pill {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 10px;
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  color: var(--candle); background: var(--purple-deep); border: 1px solid var(--gold);
  border-radius: 999px; box-shadow: 0 0 12px rgba(91, 42, 134, .6), inset 0 0 8px rgba(201, 162, 39, .25);
}

/* The Pole Package: the jewel of the wing — a velvet rope and
 * brass dressing on the path card, richer than its sisters. */
.sr-path-pole {
  border: 1px solid var(--gold);
  background: linear-gradient(165deg, var(--card), var(--purple-deep) 130%);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, .25), 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(232, 179, 75, .22);
  position: relative; overflow: hidden;
}
.sr-path-pole::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--blood2) 0 26px, var(--gold) 26px 30px, var(--blood) 30px 56px, var(--gold) 56px 60px);
  opacity: .85;
}
.sr-path-pole .sr-thumb { width: 128px; height: 72px; border: 1px solid var(--gold); box-shadow: 0 0 14px rgba(201, 162, 39, .35); }
.sr-path-pole .sr-lesson { border-color: var(--line-gold); }

/* A resting lesson: the curtain drawn — dark, quiet, still
 * hanging in the wing with its poster on the wall. */
.sr-lesson.resting { opacity: .62; filter: saturate(.55); }
.sr-lesson.resting .sr-thumb { filter: brightness(.6); }
.sr-state.resting { color: var(--dim); font-style: italic; }
.sr-resting-note { font-family: var(--serif); color: var(--dim); font-size: .95rem; white-space: nowrap; }

.sr-lesson { transition: opacity .35s ease, filter .35s ease, border-color .35s ease; }
.sr-path { animation: sr-arrive .5s ease both; }
@keyframes sr-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sr-node.lit { box-shadow: none; }
  .sr-road-bead.lit { box-shadow: none; }
  .sr-path { animation: none; }
  .sr-lesson { transition: none; }
}

/* The Big Leagues rail — the Studio's roll of honor (2026-11-02). */
.sr-big-rail { border-color:#c9a22788; background:linear-gradient(160deg,#22131c,#140b12 75%); }
.sr-big-h { color:#ffd977; letter-spacing:.04em; }
.sr-big-names { color:#e8d9ae; line-height:1.6; }
.sr-big-shows { display:flex; flex-direction:column; gap:6px; }
.sr-big-show { color:#ffd977; text-decoration:none; }
.sr-big-show:hover { text-decoration:underline; }