body {
  background: #0d0d1a;
  color: #ddd;
  margin: 0;
  font-family: sans-serif;
  overflow: hidden;
}
/* dvh, not vh: on a phone with the address bar showing, 100vh is taller than what you
   can see, which put the Tenor button below the fold with no way to scroll to it. dvh
   is the height actually visible, and the vh line above it is the fallback for older
   browsers. Installed to the home screen there is no address bar and the two agree. */
#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  box-sizing: border-box;
  gap: 8px;
}
#pick {
  margin: auto;
  max-width: 480px;
  text-align: center;
}
#pick h1 {
  font-size: 32px;
  margin: 0 0 8px;
}
#pick p {
  color: #aaa;
  font-size: 16px;
}
#pick p.note {
  color: #888;
  font-size: 14px;
}
div.bells {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 24px 0;
}
button.bell {
  flex: 1;
  font-size: 30px;
  padding: 18px 0;
  background: #1a2a1a;
  color: #6c6;
  border: 1px solid #4a4;
  border-radius: 8px;
  cursor: pointer;
}
button.bell:hover {
  background: #2a3a2a;
}
#ringing {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 8px;
}
/* The columns are fixed widths, not ems, so that a bolder or brighter row still lines
   up with the rest of the list. */
#head, div.line {
  display: grid;
  grid-template-columns: 32px 20px 62px 30px 1fr;
  gap: 0 8px;
  align-items: baseline;
  padding: 5px 8px;
  border-left: 3px solid transparent;
}
#head {
  font-size: 13px;
  text-transform: uppercase;
  color: #667;
  border-bottom: 1px solid #222;
  padding-bottom: 6px;
}
#rows {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
div.line {
  font-size: 22px;
  line-height: 1.25;
}
div.line span.n {
  font-family: monospace;
  font-size: 15px;
  color: #667;
  text-align: right;
}
div.line span.s {
  font-weight: bold;
  color: #6cf;
}
div.line span.f {
  color: #bbb;
}
div.line.past {
  opacity: 0.25;
}
div.line.now {
  opacity: 1;
  font-weight: bold;
  background: #16243a;
  border-left-color: #6cf;
  border-radius: 0 4px 4px 0;
}
div.line.d1 {
  opacity: 0.75;
}
div.line.d2 {
  opacity: 0.6;
}
div.line.d3 {
  opacity: 0.45;
}
div.line.pulse {
  animation: hit 0.4s ease-out;
}
@keyframes hit {
  0% {
    background: #2b4d6b;
    transform: translateX(6px);
  }
  100% {
    background: #16243a;
    transform: translateX(0);
  }
}
#status {
  color: #888;
  font-size: 14px;
  text-align: center;
  min-height: 18px;
}
#buttons {
  display: flex;
  gap: 8px;
}
#buttons button {
  flex: 1;
  padding: 11px 0;
  font-size: 15px;
  background: #1a1a2a;
  color: #ccc;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
}
#bob {
  color: #fb4;
  border-color: #a72;
}
#go {
  padding: 26px 0;
  font-size: 28px;
  font-weight: bold;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid #2b6b9b;
  background: #16243a;
  color: #6cf;
  touch-action: manipulation;
}
#go.go {
  border-color: #4a4;
  background: #1a2a1a;
  color: #6c6;
}