/* FLL Remote Timer — shared styles */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-display: block;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
  font-weight: 600;
  font-display: block;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-display: block;
}

/* ---- Tokens ------------------------------------------------------------ */

:root {
  color-scheme: light dark;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', monospace;

  --brand: #0066b3;
  --brand-ink: #0066b3;
  --on-brand: #ffffff;

  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --line: #dde1e7;
  --text: #0f1419;
  --muted: #5d6773;
  --track: #e4e8ed;

  --teleop: #0066b3;
  --endgame: #d96400;
  --finished: #c62828;
  --ok: #1b873f;

  --radius: 14px;
  --phase: var(--teleop);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand-ink: #5aa9ec;
    --bg: #0b0d10;
    --surface: #14171c;
    --surface-2: #1c2027;
    --line: #2a3039;
    --text: #f3f5f8;
    --muted: #8f99a6;
    --track: #1e232b;
    --teleop: #2b8de0;
    --endgame: #ffa53a;
    --finished: #ff5c5c;
    --ok: #3ccf6e;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --brand-ink: #5aa9ec;
  --bg: #0b0d10;
  --surface: #14171c;
  --surface-2: #1c2027;
  --line: #2a3039;
  --text: #f3f5f8;
  --muted: #8f99a6;
  --track: #1e232b;
  --teleop: #2b8de0;
  --endgame: #ffa53a;
  --finished: #ff5c5c;
  --ok: #3ccf6e;
}
:root[data-theme='light'] {
  color-scheme: light;
}

[data-phase='Teleop'] { --phase: var(--teleop); }
[data-phase='Endgame'] { --phase: var(--endgame); }
[data-phase='Finished'] { --phase: var(--finished); }

/* ---- Base -------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

/* ---- Time digits ------------------------------------------------------- */

.time {
  display: inline-flex;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.78;
  color: var(--text);
  transition: color 0.25s, opacity 0.25s;
}
.time .digit {
  display: inline-block;
  width: 0.5em;
  text-align: center;
}
.time .colon {
  display: inline-block;
  width: 0.24em;
  text-align: center;
  transform: translateY(-0.06em);
}

[data-phase='Endgame'] .time,
[data-phase='Finished'] .time {
  color: var(--phase);
}
[data-label='Paused'] .time {
  opacity: 0.55;
}
[data-blink='off'] .time {
  opacity: 0.2;
  transition-duration: 0.08s;
}

/* ---- Period + status --------------------------------------------------- */

.period {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--phase);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: color 0.25s;
}
.period::before {
  content: '';
  width: 0.62em;
  height: 0.62em;
  border-radius: 2px;
  background: currentColor;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.2em 0.6em;
  border: 1.5px solid currentColor;
  border-radius: 0.35em;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- Segmented progress ----------------------------------------------- */

.progress {
  display: flex;
  gap: var(--seg-gap, 6px);
}
.seg {
  position: relative;
  flex: 1 1 0;
  height: var(--seg-height, 14px);
  background: var(--track);
  background: color-mix(in srgb, var(--phase) 16%, var(--track));
  border-radius: var(--seg-radius, 4px);
  overflow: hidden;
}
.seg-fill {
  position: absolute;
  inset: 0;
  background: var(--phase);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- Connection badge -------------------------------------------------- */

.conn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.conn::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--finished);
}
.conn[data-on='true']::before {
  background: var(--ok);
}