/* High Notes — bundled app stylesheet. Self-contained (no /static dependency) so it bundles into
   Capacitor. Holds the design tokens + the classes the app's views use; grows as views are ported. */
:root {
  --bg:#0c0b10; --surface:#131119; --surface-2:#1a1822; --surface-3:#232030;
  --text:#f4f2f8; --text-muted:#a9a5b8; --text-subtle:#76728a; --text-on-gold:#1a1205;
  --accent:#ffd166; --accent-hover:#ffdc85; --accent-press:#f7b733;
  --accent-soft:rgba(255,209,102,.14); --accent-line:rgba(255,209,102,.34);
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --danger:#fb7185; --danger-bg:rgba(251,113,133,.12);
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --glow-gold:0 0 0 1px var(--accent-line),0 8px 40px rgba(255,209,102,.22);
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body.app {
  margin:0; background:radial-gradient(120% 60% at 50% 0%, #161019, transparent 60%), var(--bg);
  color:var(--text); font:400 1rem/1.55 var(--font-sans); min-height:100vh;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
h1 { font-size:1.6rem; font-weight:800; margin:0 0 .4rem; letter-spacing:-.01em; }
p { margin:0 0 .75rem; }
a { color:var(--accent); }
.wrap { max-width:34rem; margin:0 auto; padding:1.5rem 1.25rem 4rem; }
.pad { padding:2rem 1.25rem; }
.center { text-align:center; }
.muted { color:var(--text-muted); }
.small { font-size:.875rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:0 1.25rem; font:600 1rem/1 var(--font-sans); letter-spacing:-.005em;
  background:var(--accent); color:var(--text-on-gold); border:1px solid transparent;
  border-radius:var(--radius-md); cursor:pointer; text-decoration:none; }
.btn:hover { background:var(--accent-hover); }
.btn:active { background:var(--accent-press); transform:translateY(1px) scale(.99); }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn.big { width:100%; min-height:54px; font-size:1.125rem; margin-top:.5rem; }
.btn.ghost { background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn.ghost:hover { background:var(--surface-3); }
.btn.link { background:none; border:none; color:var(--text-muted); min-height:36px; padding:0 .25rem; }
.btn.link:hover { color:var(--text); background:none; }

label { display:block; margin:0 0 .9rem; font-size:.9rem; color:var(--text-muted); }
input { display:block; width:100%; margin-top:.35rem; min-height:48px; padding:0 .9rem;
  font-size:1rem; color:var(--text); background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:var(--radius-md); }
input:focus { outline:2px solid var(--accent-line); outline-offset:1px; }

.banner { display:flex; gap:.6rem; padding:.7rem .9rem; border-radius:var(--radius-md);
  border:1px solid var(--border); margin:0 0 1rem; }
.banner.warn { background:var(--danger-bg); color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 30%,transparent); }

/* --- auth (login) --- */
.auth { max-width:24rem; margin:0 auto; padding:max(2.5rem,12vh) 1.25rem 4rem; }
.auth h1 { font-size:2rem; }

/* --- races list (app landing) --- */
.appbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.25rem; }
.racelist { list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.racerow { display:flex; align-items:stretch; gap:.5rem; }
.racerow .race-open { flex:1; }
.racerow .race-edit { width:auto; flex:0 0 auto; align-self:center; }
.edit label { display:block; margin:.75rem 0; font-weight:var(--fw-medium); }
.edit label input { display:block; width:100%; margin-top:.3rem; }
.edit h2 { margin-top:1.5rem; }
.cprow { display:flex; align-items:center; gap:.4rem; margin:.45rem 0; }
.cprow .cp-emoji { width:3.2rem; text-align:center; flex:0 0 auto; }
.cprow .cp-label { flex:1; min-width:0; }
.cprow .cp-flag { display:inline-flex; align-items:center; gap:.15rem; margin:0; font-weight:400; white-space:nowrap; }
#addCp { margin:.5rem 0 1rem; width:auto; }
.race-open { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; width:100%;
  text-align:left; padding:1rem 1.1rem; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-lg); cursor:pointer; }
.race-open:hover { border-color:var(--accent-line); box-shadow:var(--glow-gold); }
.race-name { font-weight:600; font-size:1.05rem; }

/* --- buttons: small + icon --- */
.btn.small { min-height:36px; padding:0 .75rem; font-size:.875rem; border-radius:var(--radius-sm); }
.btn.small.warn { background:var(--danger); color:#2a0a10; }
.btn[hidden] { display:none; }
.icbtn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--border); border-radius:var(--radius-md); cursor:pointer;
  color:var(--text-muted); font-size:1.05rem; }
.icbtn:hover { background:var(--surface-3); color:var(--text); }
.icbtn[hidden] { display:none; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--surface-2);
  padding:2px .4rem; border-radius:6px; border:1px solid var(--border); }

/* --- voice wall --- */
.wall header { margin:.5rem 0 1.5rem; }
.dlrace { margin-top:.75rem; }
.dlrace .btn { width:auto; }
.dlrace p { margin:.4rem 0 0; min-height:1.1rem; }
.share { margin-top:1rem; }
.sharerow { display:flex; align-items:center; gap:.5rem; justify-content:center; margin-top:.3rem; flex-wrap:wrap; }
.shareurl { max-width:100%; overflow-wrap:anywhere; word-break:break-all; }
.share .btn { width:auto; }
.cp { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1rem 1.1rem; margin:0 0 .9rem; }
.cp.featured { border-color:var(--accent-line); box-shadow:var(--glow-gold); }
.cp-head { display:flex; gap:.75rem; align-items:flex-start; }
.cp-emoji { font-size:1.6rem; line-height:1; }
.cp-text { flex:1; }
.cp-text h2 { font-size:1.125rem; margin:0; }
.memos { display:flex; flex-direction:column; gap:.5rem; margin-top:.75rem; }
.memo { display:flex; align-items:center; gap:.75rem; padding:.5rem .75rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); }
.memo .play { flex:0 0 auto; min-width:48px; }
.memo-from { flex:1; font-weight:500; }
.memo-del { margin-left:auto; }
.memo-confirm { margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }

/* --- tokens + keyframes the race view needs --- */
:root {
  --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem;
  --gutter:clamp(1.25rem,5vw,2rem);
  --fs-xs:0.75rem; --fs-sm:0.875rem; --fs-2xl:2.25rem; --fs-3xl:3rem; --fw-medium:500;
  --surface-3:#232030; --text-subtle:#76728a;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes breathIn { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
@keyframes bloom { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:none; } }
@keyframes confettiFall { to { transform:translateY(105vh) rotate(540deg); opacity:0; } }

/* --- race view: full-screen, one-checkpoint-at-a-time focus mode (slideshow) --- */
body.rv-on { overflow:hidden; }
.rv { position:fixed; inset:0; z-index:60; display:flex; align-items:stretch; justify-content:center;
  background:radial-gradient(125% 80% at 50% -10%, #1b1430, var(--bg) 65%);
  padding:max(var(--space-6), env(safe-area-inset-top)) var(--gutter) max(var(--space-6), env(safe-area-inset-bottom));
  animation:fadeIn .25s ease both; overscroll-behavior:contain; }
.rv[hidden] { display:none; }
.rv-close { position:absolute; top:max(var(--space-4), env(safe-area-inset-top)); right:var(--gutter);
  width:40px; height:40px; border-radius:var(--radius-pill); border:1px solid var(--border-strong);
  background:var(--surface); color:var(--text-muted); font-size:1.05rem; cursor:pointer; z-index:2; }
.rv-close:hover { background:var(--surface-3); color:var(--text); }
.rv-screen { position:relative; width:100%; max-width:30rem; margin:auto; display:flex; flex-direction:column;
  gap:var(--space-5); min-height:0; animation:breathIn .3s ease both; }
.rv-top { display:flex; align-items:center; gap:var(--space-3); padding-right:48px; }
.rv-count { font-size:var(--fs-sm); color:var(--text-subtle); font-variant-numeric:tabular-nums; }
.rv-dots { flex:1; display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.rv-dot { width:7px; height:7px; border-radius:var(--radius-pill); background:var(--surface-3); transition:background .2s,transform .2s; }
.rv-dot.on { background:var(--accent); transform:scale(1.35); }
.rv-body { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); text-align:center;
  overflow-y:auto; min-height:0; }
.rv-emoji { font-size:clamp(3rem,16vw,5rem); line-height:1; }
.rv-emoji.big { font-size:clamp(4rem,22vw,7rem); animation:bloom .5s ease both; }
.rv-label { font-size:var(--fs-2xl); margin:0; }
.rv-sub { margin:0; }
.rv-memos { width:100%; display:flex; flex-direction:column; gap:var(--space-2); }
.rv-memo { display:flex; flex-direction:column; padding:var(--space-2) var(--space-3);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); text-align:left;
  transition:border-color .25s ease, box-shadow .25s ease; }
.rv-memo.heard { opacity:.6; }
.rv-memo.playing { opacity:1; border-color:var(--accent-line); box-shadow:var(--glow-gold); }
.rv-memo-head { display:flex; align-items:center; gap:var(--space-3); }
.rv-memo .play { flex:0 0 auto; min-width:48px; }
.rv-from { flex:1; font-weight:var(--fw-medium); }
.rv-time { font-size:var(--fs-sm); color:var(--text-muted); font-variant-numeric:tabular-nums;
  opacity:0; transition:opacity .2s ease; }
.rv-memo.playing .rv-time { opacity:1; }
.rv-check { color:var(--accent); min-width:1rem; text-align:right; }
.rv-mseek { max-height:0; opacity:0; margin-top:0; overflow:hidden; pointer-events:none;
  transition:max-height .28s ease, opacity .28s ease, margin-top .28s ease; }
.rv-memo.playing .rv-mseek { max-height:48px; opacity:1; margin-top:var(--space-2); pointer-events:auto; }
.rv-seek { width:100%; height:34px; margin:0; accent-color:var(--accent); background:transparent;
  cursor:pointer; touch-action:none; }
.rv-seek:disabled { opacity:.5; }
.rv-empty { padding:var(--space-4) 0; margin:0; }
.rv-hint { display:flex; align-items:center; justify-content:center; gap:var(--space-2); margin:var(--space-3) 0 0;
  color:var(--text-subtle); font-size:var(--fs-sm); }
.rv-hint .l { display:inline-block; animation:rvNudgeL 1.6s ease-in-out infinite; }
.rv-hint .r { display:inline-block; animation:rvNudgeR 1.6s ease-in-out infinite; }
@keyframes rvNudgeL { 0%,100% { transform:translateX(0); opacity:.45; } 50% { transform:translateX(-5px); opacity:1; } }
@keyframes rvNudgeR { 0%,100% { transform:translateX(0); opacity:.45; } 50% { transform:translateX(5px); opacity:1; } }
.rv-lift { margin-top:var(--space-2); border-style:dashed; }
.rv-lift.on { border-style:solid; border-color:var(--accent-line); color:var(--accent); box-shadow:var(--glow-gold); }
.rv-nav { display:flex; gap:var(--space-3); margin-top:auto; padding-top:var(--space-4); }
.rv-nav .btn { flex:1; min-height:54px; }
.rv-intro, .rv-end { align-items:center; justify-content:center; text-align:center; }
.rv-introbody, .rv-endbody { display:flex; flex-direction:column; align-items:center; gap:var(--space-4); margin:auto 0; }
.rv-introbody .btn.big, .rv-endbody .btn.big { max-width:20rem; }
.rv-kicker { text-transform:uppercase; letter-spacing:.18em; font-size:var(--fs-xs); color:var(--accent); margin:0; }
.rv-title { font-size:var(--fs-3xl); margin:0; }
.rv-confettis { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.rv-confetti { position:absolute; top:-8vh; width:9px; height:14px; border-radius:2px; opacity:.95;
  animation:confettiFall 2.6s linear infinite; }
.rv-end > *:not(.rv-confettis) { position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce) { .rv, .rv-screen, .rv-emoji.big, .rv-confetti, .rv-hint .l, .rv-hint .r { animation:none; } }