/* Booking modal — nocturne. Steps: syllabus/mode → dates → form → done. */
.overlay{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(8,7,6,.82);backdrop-filter:blur(8px);
}
.overlay.open{display:flex}
.modal{
  width:min(720px,100%);max-height:92vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 50px 120px rgba(0,0,0,.7);
}
.modal-head{
  position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding:1.6rem 1.8rem 1.1rem;
  background:linear-gradient(180deg,var(--surface) 72%,transparent);
  border-bottom:1px solid var(--line);
}
.modal-head h3{font-family:var(--serif);font-weight:500;font-size:1.7rem}
.modal-head .sub{color:var(--cream-faint);font-size:.88rem;margin-top:.25rem;letter-spacing:.02em}
.x{background:transparent;border:1px solid var(--line-strong);color:var(--cream-dim);
  width:34px;height:34px;border-radius:0;font-size:1.15rem;line-height:1;flex-shrink:0}
.x:hover{color:var(--cream);border-color:var(--cream-dim)}
.modal-body{padding:1.4rem 1.8rem 1.8rem}

.step{display:none}
.step.on{display:block;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step h3{font-family:var(--serif);font-weight:500;font-size:1.35rem}

/* syllabus — numbered course-catalog list */
.syl{list-style:none;margin:.4rem 0 1.4rem;counter-reset:syl}
.syl li{
  counter-increment:syl;position:relative;
  padding:.62rem .1rem .62rem 0;padding-inline-start:2.4rem;
  color:var(--cream-dim);border-bottom:1px solid var(--line);font-size:.97rem;
}
.syl li::before{
  content:counter(syl,decimal-leading-zero);
  position:absolute;inset-inline-start:0;top:.68rem;
  font-family:var(--display);font-size:.95rem;letter-spacing:.05em;color:var(--accent);
}

/* solo / group */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.3rem 0}
.mode{
  text-align:start;padding:1.25rem 1.3rem;cursor:pointer;
  background:var(--bg-2);border:1px solid var(--line-strong);color:var(--cream);
  transition:border-color .25s,background .25s;
}
.mode:hover{border-color:var(--cream-dim)}
.mode.sel{border-color:var(--accent);background:var(--accent-soft)}
.mode .k{font-weight:700;font-size:1rem;letter-spacing:.01em}
.mode .v{font-family:var(--serif);font-size:1.85rem;font-weight:500;margin-top:.35rem}
.mode .v small{font-family:var(--sans);font-size:.72rem;color:var(--cream-faint);font-weight:400}
.mode .d{font-size:.85rem;color:var(--cream-dim);margin-top:.35rem}

.note{
  font-size:.88rem;color:var(--cream-dim);
  border:1px solid var(--line);border-inline-start:2px solid var(--accent);
  background:var(--bg-2);padding:.8rem 1rem;
}

/* dates */
.slots{display:grid;gap:.55rem;margin-top:.6rem;max-height:320px;overflow-y:auto}
.slot{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.9rem 1.1rem;cursor:pointer;text-align:start;
  background:var(--bg-2);border:1px solid var(--line-strong);color:var(--cream);
  transition:border-color .25s,background .25s;
}
.slot:hover{border-color:var(--cream-dim)}
.slot.sel{border-color:var(--accent);background:var(--accent-soft)}
.slot .when{font-weight:700}
.slot .meta2{font-size:.84rem;color:var(--cream-dim)}
.slot .seats{font-size:.8rem;color:var(--accent-bright);font-weight:700;white-space:nowrap}
.empty{color:var(--cream-faint);text-align:center;padding:1.4rem}

.actions-row{display:flex;gap:.8rem;margin-top:1.4rem}
.actions-row .btn{flex:1}

/* confirmation */
.confirm-ok{text-align:center;padding:.6rem 0}
.confirm-ok .mark{
  font-family:var(--display);font-size:1.2rem;letter-spacing:.28em;direction:ltr;
  color:var(--accent-bright);margin-bottom:1rem;
}
.confirm-ok h3{font-size:1.7rem}
.cal-row{display:flex;gap:.8rem;margin-top:1.3rem}
.cal-row a{flex:1}

/* terms checkbox */
.terms-row{display:flex;align-items:flex-start;gap:.65rem;margin:.4rem 0 .8rem;font-size:.9rem;color:var(--cream-dim)}
.terms-row input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);flex-shrink:0}
.terms-row a{color:var(--accent-bright);text-decoration:underline;text-underline-offset:3px}

/* booking calendar (student-facing) */
.cal{background:var(--bg-2);border:1px solid var(--line-strong);padding:1rem}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.cal-title{font-family:var(--display);font-weight:700;font-size:1.25rem}
.cal-nav{background:transparent;border:1px solid var(--line-strong);color:var(--cream-dim);
  width:32px;height:32px;font-size:1.2rem;line-height:1}
.cal-nav:hover{color:var(--cream);border-color:var(--cream-dim)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-dow{text-align:center;font-size:.75rem;font-weight:700;color:var(--cream-faint);padding-bottom:.3rem}
.cal-day{min-height:56px;border:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:3px}
.cal-day .n{font-size:.72rem;color:var(--cream-faint);line-height:1}
.cal-day.off{opacity:.35}
.cal-day.has{border-color:rgba(194,74,44,.5);background:var(--accent-soft)}
.cal-day.has .n{color:var(--cream)}
.cal-chip{display:block;width:100%;border:1px solid var(--accent);background:transparent;
  color:var(--cream);font-family:var(--font);font-size:.72rem;font-weight:700;
  padding:.22rem .2rem;cursor:pointer;transition:.15s}
.cal-chip:hover{background:var(--accent-soft)}
.cal-chip.sel{background:var(--accent);color:var(--cream)}
.pick-info{margin-top:.8rem;min-height:1.4em;font-size:.92rem;color:var(--accent-bright);font-weight:600}
@media (max-width:560px){.cal-day{min-height:46px}.cal-chip{font-size:.62rem;padding:.16rem .1rem}}