/* Voice Timer — phosphor-amber seven-segment stopwatch on black */

@font-face {
  font-family: "DSEG7";
  src: url("vendor/fonts/DSEG7Classic-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: block; /* never mis-measure against a fallback face */
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("vendor/fonts/BarlowCondensed-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("vendor/fonts/BarlowCondensed-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --amber: #FFB000;
  --amber-dim: rgba(255, 176, 0, 0.55);
  --amber-faint: rgba(255, 176, 0, 0.4);
  --amber-ghost: rgba(255, 176, 0, 0.07);
  --amber-line: rgba(255, 176, 0, 0.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; background: #000; }

body {
  height: 100dvh;
  overflow: hidden;
  background: #000;
  color: var(--amber);
  display: flex;
  flex-direction: column;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- display region (~95dvh) ---------- */

.display {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.display:focus-visible { outline-offset: -4px; }

/* Ghost "8:88.88" stacked exactly under the live digits: the unlit LED segments
   of a scoreboard. Grid stacking keeps both layers on the same cell origin. */
.digits-stack {
  display: grid;
  line-height: 1;
  font-family: "DSEG7", monospace;
  font-weight: 700;
  font-size: 15vw; /* pre-JS fallback; app.js fits the real size */
}
.digits-stack > span { grid-area: 1 / 1; white-space: pre; }

.digits-ghost { color: var(--amber-ghost); }
.digits {
  color: var(--amber);
  /* sanctioned glow: restrained phosphor bloom on lit segments only */
  text-shadow: 0 0 0.05em rgba(255, 176, 0, 0.5);
}

/* Fixed-height slot so the flash never shifts layout */
.flash-slot {
  height: 2.4rem;
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flash {
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  padding-left: 0.35em; /* recenter letterspaced text */
  color: var(--amber);
  opacity: 0;
}
.flash.show { opacity: 1; animation: flash-pop 600ms ease-out forwards; }
@keyframes flash-pop {
  0%   { opacity: 0; transform: translateY(4px) scale(0.96); }
  15%  { opacity: 1; transform: none; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

.status {
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
  color: var(--amber-dim);
}

/* ---------- bottom bar (~5dvh) ---------- */

.bar {
  height: calc(max(5dvh, 44px) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--amber-line);
  display: flex;
  align-items: stretch;
}

.listen-btn {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 5px 8px;
  padding: 0 14px;
  border: 1px solid var(--amber);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: transform 120ms ease, background-color 120ms ease;
}
.listen-btn:hover { background: rgba(255, 176, 0, 0.1); transform: translateY(-1px); }
.listen-btn:active { transform: scale(0.97); }
.listen-btn:disabled { cursor: default; transform: none; background: none; }
.listen-btn[data-state="loading"] { border-color: var(--amber-dim); color: var(--amber-dim); }
.listen-btn[data-state="unavailable"] { border-color: var(--amber-faint); color: var(--amber-faint); }

.dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}
/* Spec-required recording indicator (REC-light idiom); static under reduced motion */
.listen-btn[data-state="listening"] .dot { display: block; animation: dot-pulse 1.4s ease-in-out infinite; }
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

.divider { width: 1px; background: var(--amber-line); margin: 8px 4px 8px 0; flex: 0 0 auto; }

.times {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  padding: 0 12px;
  scrollbar-width: none;
}
.times::-webkit-scrollbar { display: none; }

.entry {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  flex: 0 0 auto;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}
.rank { color: var(--amber-faint); font-size: 0.8em; }
.time {
  color: rgba(255, 176, 0, 0.85);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.entry.is-latest .time {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.empty {
  color: var(--amber-faint);
  letter-spacing: 0.25em;
  font-size: 0.8rem;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.clr {
  flex: 0 0 auto;
  margin-left: auto; /* hugs strip end until entries overflow */
  align-self: center;
  border: 1px solid var(--amber-faint);
  color: rgba(255, 176, 0, 0.6);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  padding: 3px 9px;
  transition: transform 120ms ease, color 120ms ease, border-color 120ms ease;
}
.clr:hover { color: var(--amber); border-color: var(--amber); transform: translateY(-1px); }
.clr:active { transform: scale(0.95); }
.clr.armed { color: #000; background: var(--amber); border-color: var(--amber); }

.today {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0 14px 0 10px;
  align-self: center;
}
.today-label { color: var(--amber-faint); font-size: 0.72rem; letter-spacing: 0.25em; }
.today-time {
  color: rgba(255, 176, 0, 0.85);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---------- utility ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.debug {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 8px;
  font-family: ui-monospace, "Courier New", monospace;
  font-size: 11px;
  color: rgba(255, 176, 0, 0.75);
  border: 1px solid rgba(255, 176, 0, 0.3);
  background: #000;
  padding: 3px 7px;
  z-index: 10;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .flash.show { animation: none; }               /* static 600ms appearance (JS-timed) */
  .listen-btn[data-state="listening"] .dot { animation: none; }
  .listen-btn, .clr { transition: none; }
  .listen-btn:hover, .listen-btn:active, .clr:hover, .clr:active { transform: none; }
}