/* The Midnight Milonga (build 2026.11.09.5) — the Dance Studio,
 * dressed in the house tokens like every other room: ember gold,
 * candlelit glass, the serif display face. The Red Door skin
 * re-dresses it with the rest of the manor. */

.mg-page h1 { margin-bottom: 4px; }
.mg-line { margin-top: 0; }
.mg-wingline {
  font-family: var(--serif); font-style: italic; font-size: 1.15rem;
  color: var(--gold); text-align: center; margin: 14px auto 20px; max-width: 560px;
}
.mg-section-h { font-family: var(--display); color: var(--gold); letter-spacing: .04em; margin: 26px 0 6px; }
.mg-fine { font-size: .82rem; opacity: .85; }
.mg-note { font-style: italic; }

/* — THE ONE CARD FORMAT (build 2026.11.09.8) —
 * Every element on this page — the school doors, the path cards,
 * the lesson rows, the film cards, the floor's cards, the
 * Maestros' rail, the practice mirror — wears this one dress,
 * built on the house's .card shell and the house scale: a head
 * row (a leading mark, a main column that takes the room, the
 * door at the end), the display-gold title, one meta line, the
 * house padding rhythm. Nothing on the page invents a format of
 * its own ever again.
 * The main column is a plain block div — flex: 1, min-width: 0 —
 * the pattern the Schoolroom's path heads wear. The school doors
 * once hung their text in a span turned into a nested flex
 * column of its own, and on the phone that span sized to the
 * longest word: the text fell into a one-word-per-line column
 * and the door link rode over the title (Steven's screenshots,
 * 2026-11-09). The cause is removed with the class itself —
 * the text container now carries the standard card body, and
 * no shrink-to-min-content track remains on the page. */
.mg-card-head { display: flex; align-items: center; gap: 14px; }
.mg-card-main { flex: 1 1 auto; min-width: 0; }
.mg-card-ico { font-size: 1.7rem; flex: none; }
.mg-card-title {
  display: block; margin: 0; font-family: var(--display); color: var(--gold);
  letter-spacing: .04em; font-size: 1.12rem; line-height: 1.3;
}
.mg-card-meta { color: var(--muted); line-height: 1.5; font-size: .95rem; margin-top: 2px; }
.mg-card-name { font-family: var(--serif); font-size: 1.05rem; }
.mg-card-go { flex: none; margin-left: auto; color: var(--gold); font-size: .9rem; white-space: nowrap; }
.mg-doors { display: flex; flex-direction: column; gap: var(--house-gap); margin: 12px 0 18px; }
.mg-door {
  display: flex; align-items: center; gap: 14px; margin-bottom: 0;
  color: inherit; text-decoration: none;
}
.mg-door:hover { border-color: var(--gold); }
.mg-face-card { display: flex; gap: 14px; align-items: flex-start; }
.mg-path { padding: var(--house-pad); }

/* Studio lessons: the Schoolroom's card fold, a written lesson
 * behind it — steps, then the candle's note. */
.mg-lesson { border-top: 1px solid var(--line-gold); padding: 10px 2px; }
.mg-lesson-head { cursor: pointer; }
.mg-lesson-title { font-family: var(--serif); font-size: 1.05rem; }
.mg-lesson-body { padding: 6px 2px 4px; }
.mg-lit { color: var(--gold); }

/* The floor: dancers standing in the candlelight. */
.mg-dancers { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 12px 0; }
.mg-face { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--gold); }
.mg-face-none { display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--card2); }
.mg-maestro-doors { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

.mg-invite { border-color: var(--gold); box-shadow: 0 0 18px rgba(217, 164, 65, .18); }
.mg-tanda { border-color: var(--gold); }
.mg-cortina-card { text-align: center; }
.mg-question { font-family: var(--display); font-size: 1.4rem; color: var(--gold); margin: 10px 0; }
.mg-tanda-doors { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mg-cortina-card .mg-tanda-doors { justify-content: center; }
.mg-parted { border-style: dashed; }
.mg-pip { color: var(--gold); letter-spacing: 2px; }
.mg-pip.lit { text-shadow: 0 0 8px rgba(217, 164, 65, .8); }

/* The Maestro stand form. */
.mg-stand-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.mg-input {
  flex: 1; min-width: 220px; padding: 9px 12px; border-radius: var(--house-radius-sm);
  border: 1px solid var(--line-gold); background: var(--card2); color: var(--house-ink);
  font: inherit;
}

/* A Velvet lesson's film frame: the video IS the lesson — its
 * running time stands on the card, and the written road beneath
 * is its lesson notes. */
.mg-film {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--house-radius-sm);
  border: 1px solid var(--gold); margin: 10px 0 6px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(217, 164, 65, .16), rgba(10, 5, 18, .94));
  display: flex; align-items: center; justify-content: center;
}
.mg-film-play { font-size: 2.2rem; color: var(--gold); text-shadow: 0 0 18px rgba(217, 164, 65, .7); }
.mg-film-tag {
  position: absolute; top: 8px; left: 10px; font-size: .68rem; letter-spacing: 3px; color: var(--gold);
}
.mg-film-badge {
  position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(0, 0, 0, .72); border: 1px solid var(--gold); color: #f3e9d2;
  font-size: .8rem; font-variant-numeric: tabular-nums;
}
.mg-badge-inline { position: static; flex: none; }
.mg-films-h { margin-top: 18px; }

/* A house film that STANDS on the shelf (build 2026.11.09.9):
 * the studio's films are shot tall, so the frame stands tall —
 * the same portrait frame the Schoolroom's films stand in. */
.mg-video {
  display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 560px;
  background: #000; border: 1px solid var(--gold); border-radius: var(--house-radius-sm);
  margin: 10px 0 6px;
}
.mg-film-name { flex: 1; min-width: 180px; }

/* The after-dark register: a rose-lit line, served only behind
 * the Red Door — the markup never exists otherwise. */
.mg-afterdark {
  font-family: var(--serif); font-style: italic; color: #e8a0b4;
  border-left: 2px solid #b04a6a; padding: 6px 12px; margin: 10px 0;
  background: linear-gradient(90deg, rgba(176, 74, 106, .12), transparent);
}

/* Saved places: the step a member stopped at glows on the road. */
.mg-steps li { cursor: pointer; }
.mg-steps li.mg-here { color: var(--gold); font-weight: 600; }

/* The practice mirror. */
.mg-self { width: 100%; max-height: 46vh; border-radius: var(--house-radius-sm); border: 1px solid var(--gold); background: #000; margin-top: 10px; }
.mg-self.hidden { display: none; }

/* The tanda strip: rides at the top of the glass while a tanda
 * lives — above even the dance room (z 1200) — so the songs can
 * be turned and the cortina called from inside the dance. */
.mg-strip {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  z-index: 1250; width: min(680px, calc(100vw - 16px));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; margin-top: 8px;
  border: 1px solid var(--gold); border-radius: 999px;
  background: rgba(14, 7, 22, .92); backdrop-filter: blur(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .5), 0 0 18px rgba(217, 164, 65, .22);
  font-size: .9rem;
}
.mg-strip-doors { display: flex; gap: 6px; flex: none; }