/* Jaksa's website. Colours are the app's (app/src/theme.js). */
:root {
  --bg: #101215;
  --panel: #1b1d21;
  --line: #33363b;
  --ink: #f4f5f7;
  --mute: #a5a9b0;
  --accent: #c8ef4c;
  --danger: #e5534b;
  --on-light: #14140c;
  --z1: #48c5ff; --z2: #49d3a1; --z3: #d3b63b; --z4: #fb9d59; --z5: #ff9092;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ── Top bar ─────────────────────────────────────────── */
.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; }
/* The logo comes from app/brand/logo.js via scripts/make-logo.mjs; its speed cuts are the ground colour. */
.mark { display: block; line-height: 0; }
.mark img { height: 48px; width: auto; }
.top nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; transition: border-color .2s, background .2s; }
.top nav a:hover { border-color: var(--accent); background: rgba(200,239,76,.06); }

/* The five heart-rate zones as one stripe: the site's signature. */
.zones { height: 6px; display: flex; border-radius: 3px; overflow: hidden; }
.zones span { flex: 1; }
.zones span:nth-child(1) { background: var(--z1); } .zones span:nth-child(2) { background: var(--z2); }
.zones span:nth-child(3) { background: var(--z3); } .zones span:nth-child(4) { background: var(--z4); }
.zones span:nth-child(5) { background: var(--z5); }

/* ── Hero ────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: 56px 0 88px; }
.kicker { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; }
h1 { font: 800 clamp(64px, 10vw, 136px)/.86 var(--display); text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 28px; }
h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: 20px; color: #d6d9de; max-width: 33ch; margin: 0 0 34px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--body); padding: 16px 24px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.btn.primary { background: var(--accent); color: var(--on-light); box-shadow: 0 10px 30px -10px rgba(200,239,76,.55); }
.btn.primary:hover { transform: translateY(-2px); }
.btn.ghost { color: var(--ink); border: 1px solid var(--line); background: transparent; }
.btn.ghost:hover { border-color: var(--ink); }

/* The live card: what the coach sees, and what it says. */
.live { position: relative; background: linear-gradient(160deg, #1f2226, #15171a); border: 1px solid var(--line); border-radius: 28px; padding: 26px; box-shadow: 0 40px 80px -40px #000; transform: rotate(1.5deg); }
.live .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin: 20px 0 22px; }
.live .k { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.live .v { font: 700 46px/1 var(--display); margin-top: 6px; font-variant-numeric: tabular-nums; }
.live .v small { font: 500 14px var(--body); color: var(--mute); margin-left: 4px; }
.live .hr { color: var(--z3); transition: color .6s; }
.live .meter { position: relative; }
.live .meter b { position: absolute; top: -5px; width: 3px; height: 16px; background: var(--ink); border-radius: 2px; transition: left 1.2s cubic-bezier(.5,0,.2,1); }
.say { margin-top: 22px; background: var(--accent); color: var(--on-light); border-radius: 20px 20px 20px 6px; padding: 16px 18px; font-weight: 600; font-size: 17px; line-height: 1.4; min-height: 78px; }
.say .who { display: block; font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: 6px; }
.say.fade { animation: say .5s ease-out; }
@keyframes say { from { opacity: 0; transform: translateY(8px); } }

/* ── Sections ────────────────────────────────────────── */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; margin-bottom: 96px; }
.three div { background: var(--bg); padding: 34px 30px 38px; }
.three .n { font: 600 13px var(--mono); color: var(--mute); }
h2 { font: 800 clamp(40px, 5vw, 64px)/.95 var(--display); text-transform: uppercase; margin: 0 0 18px; }
h3 { font: 800 34px/1 var(--display); text-transform: uppercase; margin: 14px 0 12px; }
.three p { color: #c9ccd2; margin: 0; }

.get { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; padding: 64px 0 96px; border-top: 1px solid var(--line); }
.get p { color: #c9ccd2; font-size: 19px; margin: 0 0 26px; max-width: 40ch; }
.fine { color: var(--mute); font-size: 14px; }
footer { border-top: 1px solid var(--line); padding: 28px 0 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--mute); font-size: 14px; }
footer a { color: var(--mute); }

/* Entrance: one staggered reveal on load. */
.rise { opacity: 0; transform: translateY(18px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: .08s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .3s; } .d4 { animation-delay: .45s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }

/* ── My runs ─────────────────────────────────────────── */
.page { padding: 40px 0 96px; min-height: 70vh; }
.signin { max-width: 460px; margin: 40px auto; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; padding: 34px 30px; }
.signin p { color: #c9ccd2; margin: 0 0 22px; }
.code { width: 100%; font: 600 30px/1 var(--mono); letter-spacing: .18em; text-align: center; text-transform: uppercase; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px; outline: none; }
.code:focus { border-color: var(--accent); }
.signin .btn { width: 100%; justify-content: center; margin-top: 16px; }
.signin .err, .err { color: var(--danger); font-size: 15px; min-height: 22px; margin: 12px 0 0; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.head h2 { margin: 0; }
.totals { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 30px; }
.totals div { font: 700 40px/1 var(--display); }
.totals small { display: block; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.runs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.runs li { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr) auto; gap: 12px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); }
.runs .when { font-weight: 600; }
.runs .when small { display: block; color: var(--mute); font-weight: 400; font-size: 14px; }
.runs .num { font: 700 28px/1 var(--display); font-variant-numeric: tabular-nums; }
.runs .num small { font: 500 12px var(--body); color: var(--mute); margin-left: 3px; }
.runs .strava { font-size: 14px; white-space: nowrap; }
.runs .strava.off { color: var(--mute); }
.empty { color: var(--mute); padding: 40px 0; }
.linkish { background: none; border: 0; color: var(--mute); font: inherit; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.linkish:hover { color: var(--ink); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 28px 0 64px; }
  .live { transform: none; }
  .three { grid-template-columns: 1fr; }
  .get { grid-template-columns: 1fr; gap: 0; }
  .runs li { grid-template-columns: 1fr 1fr 1fr; row-gap: 14px; }
  .runs .when { grid-column: 1 / -1; }
  .runs .strava { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .wrap { padding: 0 16px; }
  .top nav a { padding: 8px 12px; font-size: 14px; }
  .lede { font-size: 18px; }
}