/* Black on white with one blue, square corners; a Bodoni for the name and headlines. */
:root {
  --bg: #ffffff;
  --text: #0a0a0a;
  --muted: #6b6b6b;
  --rule: #0a0a0a;
  --hairline: #dcdcdc;
  --accent: #215caf;
  --ok: #627313;
  --warn: #b7352d;
  --display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --body: Barlow, 'Helvetica Neue', Arial, sans-serif;
  /* Side margin of the page: slim on phones, wider on big screens, and never under
     the notch or rounded corners of a phone. */
  --gutter: max(clamp(16px, 3vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right));
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 var(--body);
}

header,
main,
footer {
  padding: 0 var(--gutter);
}

header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-top: max(22px, env(safe-area-inset-top));
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0;
}

.logo {
  font: 500 1.9rem/1 var(--display);
  letter-spacing: -0.01em;
}

.logo em {
  font-style: italic;
  font-weight: 400;
}

.motto {
  color: var(--muted);
  font: italic 400 1.05rem/1 var(--display);
  letter-spacing: 0.01em;
}

.header-end {
  display: flex;
  align-items: baseline;
  gap: 20px;
}

/* The language picker in the header: small and quiet. */
#lang {
  width: auto;
  margin: 0;
  padding: 2px 0;
  border-bottom-color: var(--hairline);
  font-size: 0.95rem;
}

#whoami {
  display: flex;
  gap: 14px;
  margin: 0;
  font-size: 0.95rem;
  white-space: nowrap;
}

/* The offer to put LibStudy on the phone: one slim row under the header. */
.install {
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}

.install p {
  margin: 0 0 10px;
}

.install .actions {
  align-items: center;
  gap: 18px;
}

.install .actions button:first-child {
  padding: 8px 18px;
}

.install ol {
  margin: 16px 0 4px;
  padding-left: 22px;
}

.install li {
  margin-bottom: 8px;
}

.install svg {
  vertical-align: -4px;
}

main {
  padding-top: 36px;
  padding-bottom: 64px;
}

footer {
  padding-bottom: max(28px, env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 0.85rem;
}

footer p {
  max-width: 70ch;
  margin: 0 0 8px;
}

footer button {
  margin-left: 20px;
}

a {
  color: var(--accent);
}

.auth .consent {
  margin: 22px 0 0;
  font-size: 0.9rem;
}

/* The privacy and terms page: plain reading text. */
.legal {
  max-width: 70ch;
}

.legal h2 {
  margin: 44px 0 12px;
  font: 500 1.5rem/1.2 var(--display);
  letter-spacing: 0;
  text-transform: none;
}

.legal p,
.legal li {
  margin: 0 0 12px;
}

.legal ul {
  padding-left: 20px;
}

.legal .meta {
  margin-top: 14px;
}

h1 {
  margin: 0;
  font: 400 clamp(2.4rem, 5.5vw, 4.2rem) / 1.05 var(--display);
  letter-spacing: -0.015em;
}

h2,
h3,
label,
legend {
  font: 500 0.78rem/1.4 var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h2,
h3 {
  margin: 0;
}

.summary {
  margin-bottom: 32px;
}

.summary p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.auth {
  max-width: 460px;
  margin: 8vh 0 0;
}

.auth p {
  margin: 16px 0 30px;
  color: var(--muted);
}

.layout {
  display: grid;
  gap: 40px;
}

.map {
  height: 360px;
  border: 1px solid var(--rule);
  z-index: 0;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr);
    gap: clamp(40px, 4vw, 72px);
    align-items: start;
  }

  .map-col {
    position: sticky;
    top: 16px;
  }

  .map {
    height: calc(100vh - 120px);
    min-height: 420px;
  }
}

.map .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.05) brightness(1.03);
}

.leaflet-container {
  font-family: var(--body);
}

/* The square bubble that opens on a place. */
.bubble .leaflet-popup-content-wrapper {
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: 0 6px 24px rgb(0 0 0 / 14%);
}

.bubble .leaflet-popup-content {
  margin: 18px 20px;
  font: 400 0.95rem/1.5 var(--body);
}

.bubble .leaflet-popup-tip {
  border: 1px solid var(--rule);
  box-shadow: none;
}

.bubble h3 {
  margin-bottom: 10px;
  padding-right: 14px;
  font: 500 1.2rem/1.2 var(--display);
  letter-spacing: 0;
  text-transform: none;
}

.bubble p {
  margin: 0 0 8px;
}

.bubble button {
  margin-top: 4px;
}

.campuses {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.campuses button {
  padding: 5px 12px;
  font-size: 0.85rem;
}

.side section {
  margin-bottom: 48px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.section-head select {
  width: auto;
  max-width: 60%;
  margin: 0;
  padding: 4px 0;
  border-bottom-color: var(--hairline);
  font-size: 0.95rem;
}

label,
fieldset {
  display: block;
  margin: 0 0 24px;
  color: var(--muted);
}

fieldset {
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

input,
select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: 400 1.05rem var(--body);
  letter-spacing: 0;
  text-transform: none;
}

/* Floor, row and side share one line. */
.position {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr;
  gap: 14px;
}

.position legend {
  grid-column: 1 / -1;
}

/* Hour, minutes and AM/PM sit side by side as three short drop-downs. */
.time select {
  display: inline-block;
  width: 4.6em;
  margin-right: 6px;
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}

.time span {
  margin-right: 6px;
  color: var(--text);
}

input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input::placeholder {
  color: #a8a8a8;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  padding: 11px 22px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--text);
  color: var(--bg);
  font: 500 0.95rem var(--body);
  cursor: pointer;
}

button:hover {
  background: var(--accent);
  border-color: var(--accent);
}

button.secondary {
  background: transparent;
  color: var(--text);
}

button.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

button.link,
button.place {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: inherit;
}

button.link:hover,
button.place:hover {
  text-decoration: underline;
}

#reg {
  padding-top: 24px;
}

.lead {
  margin: 0 0 28px;
  font-size: 1.1rem;
}

.meta {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

#pin-hint {
  margin: -12px 0 24px;
}

#empty {
  margin: 24px 0;
}

/* Checking in stays one slim row at the top, with air before the list of seats. */
#checkin {
  margin-bottom: 72px;
}

#checkin .section-head {
  padding-bottom: 14px;
}

#checkin-open {
  padding: 7px 16px;
}

#claim-slot:empty,
#checkin-slot:empty,
#yours-slot:empty {
  display: none;
}

#yours-slot #registration {
  margin: 0;
}

#yours-slot #registration .section-head {
  display: none;
}

#checkin-slot #registration {
  margin: 0;
}

#checkin-slot #registration .section-head {
  display: none;
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cards li {
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
}

.cards li.mine {
  padding-left: 16px;
  border-left: 3px solid var(--accent);
}

.card-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

button.place {
  margin-bottom: 4px;
  color: var(--text);
  font: 500 1.3rem/1.25 var(--display);
  text-align: left;
}

.when {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}

.when strong {
  font: 600 1.4rem/1 var(--body);
  font-variant-numeric: tabular-nums;
}

.when span {
  color: var(--muted);
  font-size: 0.95rem;
}

.when.soon strong {
  color: var(--warn);
}

.when.free strong {
  color: var(--ok);
}

.card-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

/* Finding each other: who to look for, and the code both people see. */
.handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
}

.handoff p {
  margin: 0;
}

.handoff .meta {
  margin-top: 4px;
}

/* A short reminder that matters: be early. */
.note {
  margin: -8px 0 28px;
  padding: 12px 16px;
  border-left: 3px solid var(--warn);
  background: #fbf1f0;
  color: var(--warn);
  font-weight: 500;
}

/* The word "Attention" in front of a warning. */
.note strong,
.early strong,
#notice-list li.urgent strong {
  margin-right: 8px;
  font: 600 0.78rem var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.handoff .early {
  margin-top: 8px;
  color: var(--warn);
  font-weight: 500;
}

#notice-list li.urgent {
  padding-left: 14px;
  border-left: 3px solid var(--warn);
  color: var(--warn);
  font-weight: 500;
}

.position-line {
  margin: 8px 0 0;
  font-weight: 500;
}

.handoff .code {
  text-align: right;
}

.handoff .code strong {
  font: 500 2.2rem/1 var(--display);
  letter-spacing: 0.06em;
}

.handoff small {
  display: block;
  color: var(--muted);
  font: 500 0.7rem var(--body);
  letter-spacing: 0.1em;
  text-align: right;
  text-transform: uppercase;
}

.status {
  color: var(--muted);
  font-size: 0.95rem;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
}

.controls label {
  margin: 0;
}

.controls input {
  width: 4.5em;
  padding: 6px 0;
}

#notice-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#notice-list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}

#notice-list time {
  color: var(--muted);
  font-size: 0.85rem;
}

.pin {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--accent);
  color: #fff;
  font: 600 1rem var(--body);
  box-shadow: 0 0 0 2px #fff;
}

.pin.none {
  background: var(--text);
}

.banner {
  margin: 0 0 28px;
  padding: 16px 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
}

.error {
  position: fixed;
  z-index: 1500;
  left: var(--gutter);
  bottom: max(24px, env(safe-area-inset-bottom));
  max-width: calc(100vw - 2 * var(--gutter));
  margin: 0;
  padding: 12px 18px;
  background: var(--warn);
  color: #fff;
}

/* Entrance: a pencil tracing of the main building (made by tools/trace_photo.py) with
   the name under it; then the camera walks up to the open middle door while the page
   fades in behind it, before the drawing is magnified enough to look soft. Two seconds
   from start to finish. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
}

.intro.play {
  animation: intro-out 0.5s ease 1.4s forwards;
}

.sketch {
  position: absolute;
  left: 50%;
  top: 43%;
  width: max(125vw, 175svh);
  max-width: none;
  height: auto;
  /* the middle door sits here in the drawing; the zoom pivots on it */
  transform-origin: 50% 87.4%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.intro.play .sketch {
  animation:
    intro-in 0.3s ease forwards,
    intro-walk 1.3s cubic-bezier(0.7, 0, 0.9, 0.45) 0.5s forwards;
}

.intro-logo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vh;
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
  opacity: 0;
}

.intro.play .intro-logo {
  animation:
    intro-in 0.25s ease 0.05s forwards,
    intro-out 0.2s ease 0.5s forwards;
}

@keyframes intro-in {
  to {
    opacity: 1;
  }
}

@keyframes intro-walk {
  to {
    transform: translate(-50%, -87%) scale(11);
  }
}

@keyframes intro-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Phones: the list matters most, so the map is shorter and everything is thumb-sized. */
@media (max-width: 899px) {
  main {
    padding-top: 24px;
  }

  .summary {
    margin-bottom: 22px;
  }

  .map {
    height: 250px;
  }

  .layout {
    gap: 32px;
  }

  #checkin {
    margin-bottom: 48px;
  }

  button,
  .section-head select {
    min-height: 44px;
  }

  button.link,
  button.place {
    min-height: 0;
  }

  .campuses button {
    min-height: 38px;
  }

  #reg button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  /* The header gets tight on a phone: the name gives way, Sign out stays. */
  .header-end {
    gap: 12px;
  }

  #whoami-name {
    display: none;
  }

  .logo {
    font-size: 1.7rem;
  }

  .motto {
    font-size: 0.95rem;
  }

  .card-top {
    gap: 12px;
  }

  button.place {
    font-size: 1.2rem;
  }

  .when strong {
    font-size: 1.25rem;
  }

  .handoff {
    padding: 14px;
  }
}