/* ===================== SCHEDULE SECTION =====================
   The chrome around the slots. The rows themselves are the session rows from
   styles/sessions.css, wearing a room badge and a start time - a session should
   look the same whether the day is read by format or by the clock.

   Loaded after shared.css and sessions.css, both of which it leans on:
   shared.css for .section, .section__title and .section-note, sessions.css for
   .session-row and the panel a row opens. */

/* ===================== ROOM KEY ===================== */
/* Built from the rooms the sheet actually used, so the badges on the rows can
   stay as short as the signs at the venue.

   It is a key, not part of the day, so it is pinned out of the way and kept
   small: a stack in the left margin on a wide window, where the section's
   960px leaves the gutter empty anyway. */
.schedule-legend {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  list-style: none;
  background: rgba(0, 42, 99, 0.94);
  border: 1px solid #1a4a8a;
  border-radius: 9px;
}

/* .schedule-legend sets a display, which would otherwise beat the browser's
   rule for [hidden] and show an empty bar before the sheet has loaded. */
.schedule-legend[hidden] {
  display: none;
}

.schedule-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.schedule-legend__name {
  font-size: 11px;
  line-height: 1.2;
  color: #8ab4e0;
}

/* Half the size of the badge on a row - the key is being read once, and the
   rows are what the eye should be on. */
.schedule-legend .schedule-row__room {
  /* Holds 5A-F, which is the longest thing the key has to say */
  width: 31px;
  padding: 2px 0;
  font-size: 9px;
}

/* Where the schedule is one view inside a longer page, a key pinned to the
   window would outlive the section it explains, so it stays in the flow and
   sits above the day it is a key to. */
.schedule-legend--inline {
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  /* Centred in its box. Left-aligned it read as a list that had been cut off
     rather than as the whole key. */
  justify-content: center;
  gap: 8px 20px;
  margin-top: 20px;
  padding: 10px 14px;
  border-radius: 10px;
}

/* Below this the margin is too narrow to hold the stack without it crossing
   the rows, so the key lies along the foot of the window instead. */
@media (max-width: 1239px) {
  .schedule-legend {
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    padding: 7px 12px;
    border-width: 1px 0 0;
    border-radius: 0;
  }

  /* Room for the bar to sit over, so it never covers the last row of the day */
  #schedule {
    padding-bottom: 108px;
  }

  /* Never the foot of the window - this one belongs to its section */
  .schedule-legend--inline {
    position: static;
    border-width: 1px;
    border-radius: 10px;
  }
}

/* ===================== SLOTS ===================== */
.schedule {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 28px;
}

.schedule-slot {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The band that names the slot. The hours lead in yellow, and what the slot is
   called - Lunch, Introduction - follows in the purple the eyebrows use. */
.schedule-slot__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1a4a8a;
}

.schedule-slot__time {
  font-family: 'Bungee', cursive;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 1px;
  color: #f5ee1d;
}

.schedule-slot__label {
  font-family: 'Bungee', cursive;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #BB3EFD;
}

/* A slot the tabs are not showing. .schedule-slot sets a display of its own,
   which would otherwise beat the browser's rule for [hidden]. */
.schedule-slot[hidden] {
  display: none;
}

/* Leaving together, arriving one after another - the same move the session
   rows make when their format is swapped. */
.schedule-slot--out {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.schedule-slot--in {
  animation: scheduleSlotIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes scheduleSlotIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-slot--out {
    transition: none;
  }

  .schedule-slot--in {
    animation: none;
  }
}

/* One slot at a time needs no room kept between it and the next */
.schedule--tabbed {
  gap: 30px;
  margin-top: 22px;
}

/* ===================== ROOMS WITHIN A SLOT ===================== */
/* One block per room, in the order a slot lists them. The rows in a block sit
   closer together than the blocks do, so the micro-talks running four to a slot
   read as the one run and the roundtables as another. */
.schedule-room {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* .schedule-room sets a display of its own, which would otherwise beat the
   browser's rule for [hidden] */
.schedule-room[hidden] {
  display: none;
}

/* Which room a block is in, where there is nothing else to call it. Only a
   phone needs it: everywhere else the badge on each row has already said so,
   and in less room. */
.schedule-room__head--room {
  display: none;
}

/* And where the block is called something already, the room is added to the
   end of that name instead of taking a line of its own. Same rule: only where
   the badges have gone. */
.schedule-room__where {
  display: none;
}

/* Which table, in front of the title, for the blocks that hold several. Same
   job as the badge and shown only where the badge is not. */
.schedule-row__table {
  display: none;
  font-weight: 700;
  color: #dcb0ff;
}

/* What a run of one format is called. Quieter than the purple on the slot
   heading above it, so the two do not read as the same rank. */
.schedule-room__head {
  margin-top: 2px;
  font-family: 'Bungee', cursive;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8ab4e0;
}

.schedule-slot .schedule-room + .schedule-room {
  margin-top: 8px;
}

/* ===================== A ROW ===================== */
/* .session-row carries the look. What is added here is the two columns in
   front of the title: which room, and - where the block needs it - when. */
.schedule-row {
  gap: 12px;
  /* The badge and the time sit against the first line of the title rather than
     the middle of a row that now runs to two or three of them */
  align-items: flex-start;
}

/* Which sitting of a repeated session this row is. It leads the block that
   follows the title, with the names after it at a plain word space - blue
   rather than the names' grey, so it reads as a note about the row and not as
   somebody on the bill. */
.schedule-row__sitting {
  /* Kept whole, so a break can never land between the brackets */
  white-space: nowrap;
  /* Relative, so it stays the same shade smaller than the names it sits in
     front of once the row drops to 14px on a phone */
  font-size: 0.88em;
  color: #8ab4e0;
}

.schedule-row__room {
  flex-shrink: 0;
  /* Wide enough for the longest label, which is AUD at 26px of Bungee. The
     two-letter codes wear the same box so the badges line up down a slot. */
  width: 40px;
  padding: 4px 0;
  background: rgba(187, 62, 253, 0.16);
  border: 1px solid #BB3EFD;
  border-radius: 6px;
  font-family: 'Bungee', cursive;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  text-align: center;
  color: #dcb0ff;
}

/* Held at a fixed width so the titles in a block line up whether or not a
   given row is carrying a time. Only blocks that need times reserve the room
   for them - see .schedule-room--timed. */
.schedule-row__time {
  display: none;
  flex-shrink: 0;
  width: 66px;
  /* Sits smaller than the title, so a shade of padding drops it onto the
     first line's middle rather than its top */
  padding-top: 2px;
  font-size: 13px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: #8ab4e0;
}

.schedule-room--timed .schedule-row__time {
  display: block;
}

/* A fixture runs for a stretch rather than starting at a moment, so its hours
   are always worth showing and are wider than a clock time - the column sizes
   to what it has to say rather than to the 66px "4:56 PM" needs. */
.schedule-row--fixture .schedule-row__time {
  display: block;
  width: auto;
  min-width: 66px;
  white-space: nowrap;
}

/* What a slot has to say for itself. The lunch hour has nothing on and a
   neighbourhood to point at, so it talks in page text rather than in cards. */
.schedule-slot__note {
  max-width: 68ch;
  /* Centred in the slot, and centred within itself - it is an aside to the
     hour rather than the first item in a list of them */
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.7;
  text-align: center;
  color: #c0c0c0;
}

/* The word the hour turns on - lunch being somewhere else - in the yellow the
   rest of the site gives to the one thing a sentence is really saying. */
.schedule-slot__note strong {
  color: #f5ee1d;
}

/* The places named in the note, each a way to the walk there. Purple and
   underlined only on hover, as inline links read elsewhere on the site. */
.schedule-slot__note a {
  color: #BB3EFD;
  text-decoration: none;
}

.schedule-slot__note a:hover {
  text-decoration: underline;
}

@media (max-width: 520px) {
  .schedule-slot__note {
    font-size: 15px;
  }
}

@media (max-width: 640px) {
  .schedule {
    gap: 24px;
  }

  .schedule-row {
    gap: 10px;
  }

  .schedule-row__room {
    width: 34px;
    font-size: 10px;
  }

  .schedule-row__time {
    width: 58px;
    font-size: 12px;
  }

  .schedule-slot__time {
    font-size: 16px;
  }

  .schedule-room__head {
    font-size: 10px;
    letter-spacing: 1.5px;
  }

  /* Tighter still, so the four rooms hold one line across a phone. Small even
     for a key, which is the point - it is a footnote to the rows above it. */
  .schedule-legend {
    gap: 3px 10px;
    padding: 6px 8px;
  }

  .schedule-legend__item {
    gap: 5px;
  }

  .schedule-legend__name {
    font-size: 9px;
  }

  .schedule-legend .schedule-row__room {
    width: 29px;
    font-size: 8px;
  }
}

/* ===================== ON A PHONE =====================
   A card here was carrying a room badge, a chevron and a key at the foot of the
   window, and running two or three lines longer than the title needed. All of
   that goes. What the badge was saying is said instead by a heading over the
   block, or - where a block holds several tables - by a letter in front of the
   title, both of which cost no width at all.

   This is also why the badge and the chevron no longer need a line of their own
   above the title: there is nothing left up there to crowd it. */
@media (max-width: 520px) {
  .schedule-row__room {
    display: none;
  }

  .schedule-legend {
    display: none;
  }

  /* The key at the foot of the window has gone, so the room it was given back */
  #schedule {
    padding-bottom: 80px;
  }

  .schedule-room__head--room {
    display: block;
  }

  .schedule-room__where {
    display: inline;
  }

  .schedule-row__table {
    display: inline;
    /* The space in the text is a word space, which is narrower than the letter
       wants. The rest of the gap is made up here, where it costs nothing when
       the label is not being shown. */
    margin-right: 0.2em;
  }

  /* The one block with every room in it and so no heading able to name them.
     It keeps the badges the rest of the day has given up. */
  .schedule-room--mixed .schedule-row__room {
    display: block;
  }
}

.schedule-note {
  margin-top: 32px;
}