/* The Out Lap - status. Brand values from brand/brand.css (cream on paddock black,
   Archivo 900 at width 62 for the title with a red full stop, Plex Mono for labels). */

@font-face {
  font-family: "Archivo Cond";
  src: url("/fonts/archivo-900c.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("/fonts/plexmono-600.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

:root {
  --signal-red: #e5170b;
  --paddock-black: #0d0c0b;
  --cream: #f2efea;
  --pit-grey: #8e8b86;
  --rule: #2a2826;
  --ok: #5fbf7a;
  --warn: #f28a2e;
  --down: #e5170b;
  --idle: #8e8b86;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--paddock-black);
  color: var(--cream);
  font-family: "Plex Mono", ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 600px) { .page { padding-left: 32px; padding-right: 32px; padding-top: 48px; } }

.label {
  font-family: "Plex Mono", ui-monospace, Menlo, monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 12px;
  margin: 0;
}
.muted { color: var(--pit-grey); }

.top { display: flex; justify-content: space-between; align-items: center; color: var(--pit-grey); }
.live-chip { color: var(--cream); display: inline-flex; align-items: center; gap: 8px; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--signal-red);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.hero { padding: 44px 0 32px; border-bottom: 1px solid var(--rule); }
.display {
  font-family: "Archivo Cond", "Arial Narrow", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0;
  font-size: clamp(96px, 30vw, 184px);
  margin: 0;
  overflow-wrap: anywhere;
}
/* Grit on the letters; the full stop stays solid red. Longhands only, so the clip holds. */
.grit {
  background-color: var(--cream);
  background-image: url("/grit-cream.png");
  background-size: 540px 540px;
  background-repeat: repeat;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
.dot { color: var(--signal-red); -webkit-text-fill-color: var(--signal-red); }

.reason { font-family: "Archivo", sans-serif; font-weight: 700; font-size: 18px; line-height: 1.35; margin: 20px 0 0; }
.session { margin-top: 18px; color: var(--cream); line-height: 1.7; }
.countdown { margin-top: 6px; color: var(--pit-grey); line-height: 1.7; }
.session:empty, .countdown:empty { display: none; }

.checks { list-style: none; margin: 0; padding: 0; }
.check {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.check .name { color: var(--pit-grey); flex: 0 1 auto; }
.check .note {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-align: right; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px;
}
.pip { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); background: var(--idle); }
.pip.ok { background: var(--ok); }
.pip.warn { background: var(--warn); }
.pip.down { background: var(--down); }
@media (max-width: 420px) {
  .check { flex-direction: column; gap: 6px; }
  .check .note { text-align: left; }
}

.foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; line-height: 1.7; }
.wordmark {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.41em;
  padding-left: 0.41em;
  text-transform: uppercase;
  margin: 0;
}

.page[data-state="loading"] .display { opacity: 0.5; }