/* ==========================================================================
   timetable.html — page-specific rules only. Owned by the timetable task.
   Shared system lives in assets/style.css (do not edit that file).
   ========================================================================== */

/* --- family legend row sits tight above the night list ------------------- */
.ttkey{align-items:center;margin-bottom:14px}
.ttkey .famkey{gap:18px}

/* --- each night's headline is an <h2> so the page has a real outline.
       The heading level is semantic only: reset the h2 type scale back to the
       .headline treatment so the rows render exactly as before. ------------- */
h2.headline{
  font-size:1rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:normal;
  margin:0;
}

/* --- Monday's emphasised shout: no rotation, no handwriting.
       --accent is only 3.38:1 on --paper, so accent-coloured TEXT here uses
       --accent-d (4.99:1), the same rule the shared system follows. -------- */
.night .yaa{color:var(--accent-d);font-weight:800;letter-spacing:.01em}

/* --- today's row: accent treatment applied by the inline script.
       The row sits on --paper-2, where --accent is 3.23:1 and --accent-d
       is 4.76:1. ------------------------------------------------------------ */
.night .todaytag{display:none}
.night.today{background:var(--paper-2)}
.night.today .day{color:var(--accent-d)}
.night.today .todaytag{
  display:inline-block;
  margin-left:8px;
  vertical-align:2px;
  font-size:.6rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  line-height:1.5;
  color:#fff;
  background:var(--accent-d);  /* #fff on --accent is 3.61:1; on --accent-d 5.32:1 */
  border-radius:999px;
  padding:1px 8px;
}

/* --- the pricing block's visible eyebrow is also its heading: as an <h2> it
       must keep the .kicker metrics, so put the body line-height back ------- */
h2.kicker{line-height:inherit;margin-top:0}

/* --- closing cross-link: one line + one button, no dead column ----------- */
.ttclose{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
/* Its lead line is body copy and stays a <p>: the section is named by an
   .sr-only h2, the same pattern dances.html and studios.html use. */
.ttclose p{color:var(--muted)}
.ttclose strong{color:var(--ink)}

/* --- stacked rows: the studio line goes inline, so give it a separator ---- */
@media (max-width:720px){
  .night .when span::before{content:"\00a0\00b7\00a0"}
}

@media (max-width:480px){
  .ttkey{align-items:flex-start}
  .ttclose{display:block}
  .ttclose .btn{display:block;margin-top:16px}
}