/* PhilaCon Valley brand tokens (Brand Book Ed. 1.1). Fonts ship with the page
   so the timer works with no network. */
@font-face { font-family: "Baloo 2"; src: url("fonts/Baloo2-800.ttf") format("truetype"); font-weight: 800; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-400.ttf") format("truetype"); font-weight: 400; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-700.ttf") format("truetype"); font-weight: 700; }

:root {
  --ink: #1a1a1a;
  --cream: #ffeed0;
  --yellow: #fdc873;
  --pink: #ff66a8;
  --coral: #ef657f;
  --display: "Baloo 2", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3vh;
  padding: 16px;
}

/* The number is the whole point: sized to the viewport so the back row can read it. */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: min(32vw, 55vh);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
  /* Baloo 2's tall font metrics make the text's hit area reach past its box and
     cover the preset buttons. The number is never clicked, so let clicks through. */
  pointer-events: none;
}

.display.warning { color: var(--coral); }
.display.done { color: var(--yellow); }

.presets, .controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

button {
  font-family: var(--display);
  font-weight: 800;
  cursor: pointer;
  border-radius: 999px;
  border: 3px solid var(--cream);
}

.preset {
  font-size: 1.1rem;
  padding: 0.35em 1.1em;
  background: transparent;
  color: var(--cream);
}

.preset[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

.control {
  font-size: 1.8rem;
  padding: 0.4em 1.6em;
  background: transparent;
  color: var(--cream);
}

.control.primary { background: var(--pink); border-color: var(--pink); color: var(--ink); }

button:disabled { opacity: 0.35; cursor: default; }

button:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }

.keys { margin: 0; font-size: 0.95rem; opacity: 0.55; }

.footer {
  padding: 14px 16px 18px;
  text-align: center;
  font-size: 1rem;
  opacity: 0.8;
}

.footer a { color: var(--pink); font-weight: 700; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* While presenting, hide everything but the clock. */
:fullscreen .presets,
:fullscreen .keys { display: none; }