/* ===========================================================================
   Fitness & Golf — design system
   Dark canvas, neon accents (lime / pink / cyan), rounded cards, mono labels.
   =========================================================================== */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/space-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/space-mono-700.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --bg:        #080b0e;
  --surface:   #10151a;
  --surface-2: #161d24;
  --border:    #1f2832;
  --border-2:  #2a3540;

  /* Text */
  --text:   #f2f5f7;
  --muted:  #7d8a96;
  --faint:  #4f5a65;

  /* Accents */
  --lime:   #c2f24a;
  --pink:   #ff2e74;
  --cyan:   #28d7ef;
  --violet: #8b7bff;
  --amber:  #d99a3a;

  --radius:    22px;
  --radius-sm: 14px;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-display);
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  /* Subtle glow from the top, like the reference */
  background-image:
    radial-gradient(900px 500px at 50% -8%, rgba(40, 215, 239, 0.10), transparent 60%),
    radial-gradient(700px 400px at 85% 0%, rgba(194, 242, 74, 0.06), transparent 60%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }

/* ---- Layout ------------------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 1.5rem; max-width: 1080px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand .logo {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--lime), var(--cyan) 45%, var(--pink));
  box-shadow: 0 0 22px rgba(255, 46, 116, 0.35);
}
.brand .name { font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.brand .date {
  font-family: var(--font-mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--muted); margin-top: 2px;
}

main { max-width: 1080px; margin: 0 auto; padding: .5rem 1.5rem 4rem; }

/* ---- Pills / toggles / buttons ----------------------------------------- */
.segmented {
  display: inline-flex; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px;
}
.segmented a {
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: 1px; color: var(--muted); padding: .4rem .85rem; border-radius: 999px;
}
.segmented a.active { background: var(--lime); color: #0a1400; font-weight: 700; }

.btn {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  background: var(--lime); color: #0a1400; padding: .6rem 1.1rem;
  border-radius: 999px; border: none; cursor: pointer; font-size: .95rem;
}
.btn:hover { filter: brightness(1.05); }
.btn.ghost {
  background: transparent; color: var(--text); border: 1px solid var(--border-2);
}
.btn.small { padding: .35rem .8rem; font-size: .82rem; }

.danger {
  background: transparent; border: 1px solid #5a2230; color: #ff7b8f;
  border-radius: 8px; padding: .28rem .6rem; font-size: .78rem; cursor: pointer;
  font-family: var(--font-mono);
}
.danger:hover { background: rgba(255, 46, 116, 0.08); }

/* ---- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem;
}
.card.hero { padding: 2rem; }
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stack > * + * { margin-top: 1rem; }

.eyebrow {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: 1.6px; color: var(--muted);
}
.section-title { font-size: 1.35rem; font-weight: 700; margin: 2rem 0 .25rem; }
.section-sub { color: var(--muted); margin: 0 0 1rem; font-size: .95rem; }

/* Big metric number */
.metric-label {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: 1.4px; color: var(--muted); margin-bottom: .5rem;
}
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.pink { background: var(--pink); }
.dot.lime { background: var(--lime); }
.dot.cyan { background: var(--cyan); }
.dot.violet { background: var(--violet); }
.dot.amber { background: var(--amber); }

.metric-value { font-size: 2.3rem; font-weight: 700; line-height: 1; }
.metric-value .unit { font-size: .9rem; color: var(--muted); font-weight: 400; margin-left: .25rem; }
.metric-sub { color: var(--faint); font-family: var(--font-mono); font-size: .72rem; margin-top: .35rem; }

.spark { margin-top: .9rem; height: 46px; width: 100%; display: block; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; }
.chg {
  font-family: var(--font-mono); font-size: .68rem; padding: .12rem .4rem;
  border-radius: 999px; white-space: nowrap;
}
.chg.up       { color: var(--pink); background: rgba(255, 46, 116, 0.12); }
.chg.down     { color: var(--cyan); background: rgba(40, 215, 239, 0.12); }
.chg.positive { color: var(--lime); background: rgba(194, 242, 74, 0.12); }
.chg.negative { color: var(--pink); background: rgba(255, 46, 116, 0.12); }
.spark-empty {
  margin-top: .9rem; height: 52px; display: flex; align-items: center;
  justify-content: center; color: var(--faint); font-family: var(--font-mono);
  font-size: .7rem; border: 1px dashed var(--border-2); border-radius: 10px;
}

/* Hero */
.hero-grid { display: grid; grid-template-columns: 280px 1fr; gap: 2rem; align-items: center; }
.hero h1 { font-size: 2.6rem; line-height: 1.05; margin: .3rem 0 0; font-weight: 700; }
.hero h1 .hl { color: var(--lime); }
.hero p.lead { color: var(--muted); font-size: 1rem; margin-top: .6rem; }
.ring-wrap { display: flex; align-items: center; justify-content: center; }

.mini-stats { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.mini-stat {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .85rem 1rem; min-width: 120px;
}

/* Empty state */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--muted); gap: .6rem; padding: 1.5rem;
}
.empty .icon { font-size: 1.5rem; opacity: .6; }

/* Badges */
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: .68rem;
  padding: .15rem .55rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 1px;
}
.badge.ok    { background: rgba(194,242,74,.12); color: var(--lime); }
.badge.info  { background: rgba(40,215,239,.12); color: var(--cyan); }
.tag {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-2);
  font-family: var(--font-mono); font-size: .72rem;
}

/* ---- Tables ------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .65rem; border-bottom: 1px solid var(--border); font-size: .92rem; }
th {
  font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: 1.2px; color: var(--muted); font-weight: 400;
}
tr:last-child td { border-bottom: none; }

/* ---- Forms -------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field.full { grid-column: 1 / -1; }
label {
  display: block; font-family: var(--font-mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: .35rem;
}
input, select, textarea {
  width: 100%; padding: .65rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text);
  font-size: .95rem; font-family: var(--font-display);
}
input[type="date"], input[type="time"] { text-align: left; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(194,242,74,.12);
}

.muted { color: var(--muted); }

/* ---- Responsive (phone is the eventual target) -------------------------- */
@media (max-width: 820px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-3 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .ring-wrap { order: -1; }
  .hero h1 { font-size: 2.1rem; }
  .form-grid { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  /* Prevent iOS auto-zoom: inputs below 16px trigger pinch-zoom on focus */
  input, select, textarea { font-size: 1rem; }
}

@media (max-width: 480px) {
  main { padding: .5rem 1.25rem 4rem; }
  .card { padding: 1.25rem; }
  /* Comfortable touch targets (iOS HIG: 44px min) */
  input, select, textarea { min-height: 44px; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* Topbar: compact nav, no overflow */
  .topbar { padding: .6rem .75rem; gap: .4rem; flex-wrap: wrap; }
  .segmented { padding: 3px; }
  .segmented a { padding: .32rem .5rem; font-size: .6rem; letter-spacing: .4px; }
}