/* Header lab (header-lab branch only).
   Desktop: the big wordmark and a ticket link to the quiz sit above the toolbar and scroll
   away. The views are text links in the toolbar, and once the toolbar sticks the film reel
   logo (back to top) and a small ticket slide into it.
   Phones: the views and the quiz move to a tab bar along the bottom of the screen.
   Both: a sun/moon button switches the theme. */

:root {
  --ticket-bg: var(--accent);
  --ticket-ink: #fff8ef;
  --ticket-perforation: rgba(255, 248, 239, 0.55);
  --tabbar-height: 76px;
}

:root[data-theme="dark"] {
  --ticket-ink: #2a120a;
  --ticket-perforation: rgba(42, 18, 10, 0.4);
}

.tabbar {
  display: none;
}

.site-header {
  align-items: center;
}

/* ---------- The quiz ticket ---------- */

/* Cut like an admission ticket: notches on both ends and a perforation. */
.quiz-ticket {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  padding: 0.7rem 1.6rem 0.75rem 1.5rem;
  background: var(--ticket-bg);
  color: var(--ticket-ink);
  text-decoration: none;
  border-radius: 6px;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 50%, transparent 8px, #000 8.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 8px, #000 8.5px) right / 51% 100% no-repeat;
  transform: rotate(-2deg);
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-ticket::after {
  content: "";
  position: absolute;
  inset: 5px 14px;
  border: 1.5px dashed var(--ticket-perforation);
  border-radius: 3px;
  pointer-events: none;
}

.quiz-ticket:hover,
.quiz-ticket:focus-visible {
  transform: rotate(0deg) scale(1.03);
}

.quiz-ticket:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 0 var(--ink)) drop-shadow(0 0 3px var(--ink));
}

.quiz-ticket-hint {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.85;
}

.quiz-ticket-title {
  font-family: "Big Shoulders Display", "IBM Plex Sans", sans-serif;
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.quiz-ticket--compact {
  padding: 0.55rem 1.25rem 0.55rem 1.2rem;
}

.quiz-ticket--compact::after {
  inset: 4px 12px;
}

.quiz-ticket--compact .quiz-ticket-title {
  font-size: 1.25rem;
}

/* ---------- Sun/moon theme button ---------- */

.theme-icon-button {
  display: inline-flex;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.theme-icon-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon-sun,
:root[data-theme="dark"] .theme-icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-icon-sun {
  display: block;
}

/* ---------- Toolbar ---------- */

/* The reel logo and the small ticket only show once the toolbar has stuck. While hidden,
   a negative margin cancels the toolbar gap beside them. */
.controls-logo,
.quiz-ticket--compact {
  --controls-gap: 0.75rem;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-width 260ms cubic-bezier(0.16, 1, 0.3, 1),
    margin 260ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 260ms;
}

.controls-logo {
  margin-right: calc(-1 * var(--controls-gap));
}

/* Its side padding goes too, or the hidden ticket would still take up room. */
.quiz-ticket--compact {
  margin-left: calc(-1 * var(--controls-gap));
  padding-inline: 0;
  overflow: hidden;
  flex: 0 0 auto;
}

.controls.is-stuck .quiz-ticket--compact {
  padding-inline: 1.2rem 1.25rem;
}

.controls.is-stuck .controls-logo,
.controls.is-stuck .quiz-ticket--compact {
  max-width: 220px;
  margin: 0;
  opacity: 1;
  visibility: visible;
  transition:
    max-width 260ms cubic-bezier(0.16, 1, 0.3, 1),
    margin 260ms cubic-bezier(0.16, 1, 0.3, 1),
    padding 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease 60ms,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.controls-logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  border-radius: 999px;
}

.controls-logo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The reel no longer switches the theme, so it doesn't wiggle for attention, but it still
   spins when the theme changes. */
.controls-logo .brand-logo {
  width: 46px;
}

.controls-logo .brand-logo:not(.is-animating) {
  animation: none;
}

@media (min-width: 641px) {
  .controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  /* The views are text links rather than pills. */
  .tabs {
    flex: 0 0 auto;
    gap: 0.1rem;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .tab {
    position: relative;
    padding: 0.55rem 0.7rem;
    border-color: transparent;
    border-radius: 8px;
    background: transparent;
    font-weight: 600;
  }

  .tab::after {
    content: "";
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 160ms ease;
  }

  .tab:hover {
    border-color: transparent;
    background: var(--hover-soft);
  }

  .tab.active {
    border-color: transparent;
    background: transparent;
    color: var(--accent);
  }

  .tab.active::after {
    transform: scaleX(1);
  }

  .public-search,
  .day-picker {
    flex: 1 1 auto;
    min-width: 180px;
  }

  .location-chip {
    flex: 0 0 auto;
  }

  .theme-icon-button--header {
    display: none;
  }
}

/* ---------- Phones ---------- */

/* Narrow desktops: once the reel and small ticket slide in there's little room left, so the
   date picker uses arrows (as on phones) and everything packs a little tighter. */
@media (min-width: 901px) and (max-width: 1100px) {
  .tab {
    padding-inline: 0.55rem;
  }

  .tab::after {
    left: 0.55rem;
    right: 0.55rem;
  }

  .public-search,
  .day-picker {
    min-width: 120px;
  }

  .day-picker-nav-label {
    display: none;
  }

  .day-picker-nav-chevron {
    display: inline;
    font-size: 1.1rem;
    line-height: 1;
  }

  .day-picker-display-label {
    padding-inline: 0.4rem;
  }
}

/* Below 900px there isn't room for the views in the toolbar, so they and the quiz move to a
   tab bar along the bottom of the screen. Tablets keep the big ticket up top as well; phones
   don't have room for it. */
@media (max-width: 900px) {
  .quiz-ticket--compact,
  .tabs,
  .nav-menu-wrap {
    display: none;
  }

  body {
    padding-bottom: calc(var(--tabbar-height) + 2rem + env(safe-area-inset-bottom));
  }

  .tabbar {
    position: fixed;
    z-index: 60;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 96px));
    justify-content: center;
    align-items: end;
    padding: 0.3rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom));
    background: var(--panel-overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .tabbar-item,
  .tabbar-quiz {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    min-height: 52px;
    padding: 0.35rem 0.1rem 0.2rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }

  .tabbar-item:hover {
    background: transparent;
  }

  .tabbar-item svg,
  .tabbar-quiz svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .tabbar-item.active {
    color: var(--accent);
  }

  .tabbar-quiz {
    color: var(--ink);
  }

  /* The quiz tab is a ticket that sits up out of the bar. */
  .tabbar-quiz-stub {
    display: grid;
    place-items: center;
    width: 54px;
    height: 40px;
    margin-top: -1.3rem;
    border-radius: 8px;
    background: var(--ticket-bg);
    color: var(--ticket-ink);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    transform: rotate(-6deg);
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  .tabbar-quiz:active .tabbar-quiz-stub {
    transform: rotate(0deg) scale(0.95);
  }

  .tabbar-quiz-stub svg {
    width: 28px;
    height: 28px;
  }

  /* The staging label (previews only) sits above the tab bar. */
  #staging-data-badge {
    bottom: calc(var(--tabbar-height) + 8px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 640px) {
  .site-header > .quiz-ticket,
  .theme-icon-button--controls {
    display: none;
  }

  .controls-logo,
  .quiz-ticket--compact {
    --controls-gap: 0.55rem;
  }

  .controls-logo .brand-logo {
    width: 38px;
  }

  .controls.is-stuck .controls-logo {
    max-width: 38px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .quiz-ticket,
  .quiz-ticket:hover,
  .quiz-ticket:focus-visible,
  .controls-logo,
  .controls.is-stuck .controls-logo,
  .quiz-ticket--compact,
  .controls.is-stuck .quiz-ticket--compact,
  .tabbar-quiz-stub,
  .tab::after {
    transition: none;
  }
}