/* Beast Lap — the phone app (app.beastlap.com). The Clutch7 app's frame: a pager of panes on a dark
   ground, a floating glass bar with a sliding pill, and here a big Start button over it. The website's
   colours and type: the four sector colours, Saira headings, Inter text. */
:root{
  --ground:#05060A; --ink:#0B0D10; --ink-2:#12151A; --ink-3:#1A1E25; --line:#262B34;
  --text:#F2F4F7; --muted:#9AA3B2; --dim:#6B7482;
  --blue:#1E6BFF; --red:#FF2D3A; --yellow:#FFB800; --green:#00C26E; --purple:#8F3BFF;
  --head:"Saira",system-ui,sans-serif;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tabbar-h:60px; --tabbar-gap:30px; --start:76px; --gap:20px;
  --foot:calc(var(--tabbar-gap) + var(--tabbar-h) + var(--start) + 44px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--ground)}
body{color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  /* Pinned so only the panes scroll: a body that moves lets the browser's toolbar slide and lose swipes. */
  position:fixed;inset:0;overflow:hidden;overscroll-behavior:none}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.1}
p{margin:0}
input,select,button{font:inherit;color:inherit}
input,select{font-size:16px}
/* The status bar sits on the app's own ground, not on the cards travelling under it. */
body::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--ground);z-index:90;pointer-events:none}

/* ---- the pager ---- */
.pager{position:fixed;top:0;left:0;right:0;height:100dvh;display:flex;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior:contain;scrollbar-width:none;background:var(--ground)}
.pager::-webkit-scrollbar{display:none}
.pane{flex:0 0 100%;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;
  touch-action:pan-y;padding:calc(env(safe-area-inset-top) + 18px) var(--gap) var(--foot)}
.pane::-webkit-scrollbar{display:none}
.pane-in{max-width:560px;margin:0 auto}
.pane h1{font-size:30px;font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.lead{color:var(--muted);margin-top:6px;font-size:15px}

/* ---- the floating bar (as in the Clutch7 app) ---- */
.tabbar{display:grid;position:fixed;z-index:60;left:0;right:0;margin-inline:auto;width:min(400px,calc(100% - 60px));
  bottom:var(--tabbar-gap);height:var(--tabbar-h);background:rgba(58,64,74,.5);
  -webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  border:.5px solid rgba(255,255,255,.18);border-radius:999px;grid-template-columns:repeat(5,1fr);padding:0 8px;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s}
.tabbar__tab{min-width:0;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer}
.tabbar__tab span{display:none}
.tabbar__tab svg{display:block}
.tabbar__ind{position:absolute;top:4px;height:calc(100% - 8px);width:calc((100% - 16px) / 5 + 8px);
  left:calc(4px + var(--ind-i,0) * ((100% - 16px) / 5));background:rgba(255,255,255,.22);border-radius:999px;
  z-index:0;opacity:0;pointer-events:none}
.tabbar.has-ind .tabbar__ind{opacity:1}
/* Signed in, Account wears the driver's initials. */
.tabbar__tab--me.has-initials svg{display:none}
.tabbar__tab--me.has-initials::after{content:attr(data-initials);display:grid;place-items:center;width:36px;height:36px;border-radius:999px;
  background:var(--purple);color:#fff;font:800 13px var(--head);letter-spacing:.02em}

/* ---- Start ---- */
.start{position:fixed;z-index:61;left:50%;bottom:calc(var(--tabbar-gap) + var(--tabbar-h) + 14px);transform:translateX(-50%);
  width:var(--start);height:var(--start);border-radius:999px;border:0;cursor:pointer;color:#fff;
  font:800 17px var(--head);letter-spacing:.06em;
  background:radial-gradient(circle at 30% 25%,#B57BFF 0%,var(--purple) 45%,#5A17C8 100%);
  box-shadow:0 0 0 4px rgba(143,59,255,.25),0 16px 36px -8px rgba(143,59,255,.75),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s}
.start:active{transform:translateX(-50%) scale(.94)}
.start::after{content:'';position:absolute;inset:-4px;border-radius:inherit;border:2px solid rgba(181,123,255,.6);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.start.is-live{background:radial-gradient(circle at 30% 25%,#7CF0B8 0%,var(--green) 45%,#00824A 100%);
  box-shadow:0 0 0 4px rgba(0,194,110,.25),0 16px 36px -8px rgba(0,194,110,.7)}
.start.is-live::after{border-color:rgba(0,194,110,.6)}
/* While the Dashboard is in, the bar and Start step aside. */
body.dash-open .tabbar,body.dash-open .start{opacity:0;pointer-events:none}

/* ---- cards, rows, buttons ---- */
.card{background:var(--ink-2);border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:16px}
.card h2{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.card h2 + .row,.row:first-child{border-top:0;padding-top:4px}
.row .k{color:var(--muted);font-size:15px}
.row .v{font-weight:600;text-align:right}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--ink-3);color:var(--text);font:700 15px var(--font);cursor:pointer;white-space:nowrap}
.btn:active{background:#262B34}
.btn-primary{background:var(--purple);border-color:var(--purple);color:#fff}
.btn-primary:active{background:#7a2ee6}
.btn-block{display:flex;width:100%}
.btns{display:grid;gap:10px;margin-top:14px}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font:700 12px var(--font);letter-spacing:.04em;text-transform:uppercase;background:var(--ink-3);border:1px solid var(--line);color:var(--muted)}
.badge.on{color:var(--green);border-color:#00C26E55}
.badge.warn{color:var(--yellow);border-color:#FFB80055}
.badge.pro{color:#C9A6FF;border-color:#8F3BFF77}
.muted{color:var(--muted)}
.small{font-size:14px}

/* ---- Home ---- */
.hero-logo{display:block;width:min(300px,78%);height:auto;margin:6px auto 4px}
.hello{text-align:center;color:var(--muted);margin-top:6px}
.go-card{text-align:center}
.go-card p{color:var(--muted);font-size:15px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.stat{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:14px 10px;text-align:center}
.stat b{display:block;font:800 22px var(--head);font-variant-numeric:tabular-nums}
.stat span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.sectors{display:flex;gap:4px;margin:18px auto 0;width:120px}
.sectors i{flex:1;height:4px;border-radius:2px}

/* ---- Sessions ---- */
.sess{display:block;width:100%;text-align:left;background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin-top:12px;cursor:pointer}
.sess-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sess-top b{font:700 16px var(--head)}
.sess-best{font:800 20px var(--head);color:#C9A6FF;font-variant-numeric:tabular-nums}
.sess-sub{color:var(--muted);font-size:14px;margin-top:2px}
.laps{margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.lap-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;padding:6px 0;font-variant-numeric:tabular-nums}
.lap-row .n{color:var(--dim)}
.lap-row .d{color:var(--muted);font-size:14px}
.lap-row.best .t{color:#C9A6FF;font-weight:700}
.empty{text-align:center;padding:30px 10px 10px;color:var(--muted)}
.empty svg{opacity:.7;margin-bottom:10px}
.empty b{display:block;color:var(--text);font:700 18px var(--head);margin-bottom:4px}

/* ---- Settings ---- */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--ink-3);font-weight:600;font-size:14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--purple);border-color:var(--purple);color:#fff}
.set{padding:14px 0;border-top:1px solid var(--line)}
.card h2 + .set{border-top:0;padding-top:2px}
.set label,.set .lbl{display:block;font-weight:600;margin-bottom:8px}
.set .hint{color:var(--muted);font-size:13px;margin-top:8px}
.flag{width:22px;height:15px;border-radius:2px;box-shadow:0 0 0 1px #ffffff26;display:block}
.seg .lang{display:inline-flex;align-items:center;gap:8px}

/* ---- Account ---- */
.me-head{display:flex;align-items:center;gap:14px;margin-top:18px}
.avatar{flex:none;width:58px;height:58px;border-radius:999px;display:grid;place-items:center;background:var(--purple);font:800 20px var(--head)}
.me-head b{display:block;font:700 19px var(--head)}
.me-head span{color:var(--muted);font-size:14px;word-break:break-all}
.links a{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);font-weight:600}
.links a:first-of-type{border-top:0;padding-top:4px}
.links a::after{content:'›';color:var(--dim);font-size:22px;line-height:1}

/* ---- the Dashboard ---- */
.dash{position:fixed;inset:0;z-index:80;background:var(--ground);transform:translateX(100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 12px) var(--gap) calc(env(safe-area-inset-bottom) + 18px);overflow:hidden;touch-action:pan-y}
.dash.is-in{transform:none}
.dash.is-drag{transition:none}
.dash-top{display:flex;align-items:center;gap:10px}
.dash-top .src{flex:1;min-width:0;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:9px;height:9px;border-radius:9px;background:var(--dim);margin-right:6px;vertical-align:middle}
.dot.live{background:var(--green);box-shadow:0 0 10px var(--green)}
.dot.wait{background:var(--yellow)}
.dot.err{background:var(--red)}
.icon-btn{flex:none;width:42px;height:42px;border-radius:999px;border:1.5px solid var(--line);background:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.dash-main{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;text-align:center;overflow-y:auto}
.dash-main::-webkit-scrollbar{display:none}
.lapno{font:700 14px var(--head);color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.clock{font:800 clamp(60px,20vw,112px)/1 var(--head);font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin:6px 0 2px}
.delta{font:800 30px var(--head);font-variant-numeric:tabular-nums;min-height:38px}
.delta.up{color:var(--red)}
.delta.down{color:var(--green)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px}
.tile{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:10px 6px}
.tile span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.tile b{display:block;font:800 22px var(--head);font-variant-numeric:tabular-nums;margin-top:2px}
.tile.best b{color:#C9A6FF}
/* Speed: big, under the lap clock, with a bar against the session's top speed. */
.speed{margin-top:14px;font:800 clamp(52px,17vw,84px)/1 var(--head);font-variant-numeric:tabular-nums;color:var(--yellow)}
.speed small{font:700 18px var(--font);color:var(--muted);margin-left:8px;letter-spacing:.02em}
.speedbar{height:8px;border-radius:8px;background:var(--ink-3);margin:12px auto 0;width:min(320px,100%);overflow:hidden}
.speedbar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));transition:width .15s linear}
.dash-laps{max-height:24vh;overflow-y:auto;margin-top:12px;border-top:1px solid var(--line);text-align:left}
.dash-msg{margin-top:12px;font-size:14px;color:var(--yellow);min-height:20px}
.dash-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.btn-stop{background:var(--red);border-color:var(--red);color:#fff}
.btn-stop:active{background:#d61f2b}
/* A new best lap: the clock flashes purple; a lap done flashes green. */
.flash-best .clock{animation:fb 1.2s ease}
@keyframes fb{0%,60%{color:#C9A6FF}100%{color:var(--text)}}

/* A short message at the foot. */
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-gap) + var(--tabbar-h) + var(--start) + 30px);transform:translateX(-50%);
  z-index:95;background:var(--ink-3);border:1px solid var(--line);border-radius:14px;padding:10px 16px;font-size:14px;max-width:calc(100% - 40px);
  box-shadow:0 14px 34px -10px #000;text-align:center}