/* =========================================================================
   MM Fitness · Dark Studio theme
   App shell + theme tokens (Task 4). Screen-specific styles arrive in later
   tasks. Pure CSS, no build step, no external fonts/frameworks.
   ========================================================================= */

:root{
  /* --- Plan contract tokens (names are load-bearing; do not rename) --- */
  --bg-0:#100c12;            /* deepest near-black */
  --bg-1:#241a25;            /* lifted plum at the top of the radial */
  --pink:#ec0f8f;            /* brand pink — large surfaces only */
  --pink-bright:#ff3db4;     /* WCAG-AA on dark for small text/glow */
  --pink-text:#ff5bc0;       /* labels */
  --ink:#ffffff;
  --muted:#9a949c;
  --glass-bg:rgba(255,255,255,.06);
  --glass-br:rgba(255,255,255,.10);
  --radius:16px;

  /* --- Extended Dark Studio palette --- */
  --bg-2:#0a070c;            /* vignette floor, darker than bg-0 */
  --ink-dim:rgba(255,255,255,.82);
  --hairline:rgba(255,255,255,.07);
  --pink-deep:#b50a6e;       /* shadow side of gradients */
  --ember:#ff5a3c;           /* warm tail used in primary CTA gradient */

  /* Glass depth system */
  --glass-bg-2:rgba(255,255,255,.09);   /* hover / raised */
  --glass-hi:rgba(255,255,255,.16);     /* top inner-light edge */
  --blur:14px;

  /* Pink glow language (reused across cards, rings, CTAs) */
  --glow-soft:0 0 0 1px rgba(236,15,143,.18), 0 8px 30px -8px rgba(236,15,143,.32);
  --glow-strong:0 0 24px -2px rgba(255,61,180,.55), 0 0 60px -10px rgba(236,15,143,.45);
  --shadow-card:0 1px 0 0 var(--glass-hi) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --shadow-lift:0 24px 60px -28px rgba(0,0,0,.95), 0 0 0 1px var(--glass-br);

  /* Type scale (modular ~1.25, system stack — distinctive weight/tracking) */
  --fs-kicker:.72rem;
  --fs-meta:.78rem;
  --fs-body:1rem;
  --fs-lead:1.18rem;
  --fs-h2:clamp(1.35rem,4vw,1.7rem);
  --fs-h1:clamp(1.9rem,7vw,2.9rem);
  --fs-clock:clamp(3.4rem,16vw,5.5rem);

  /* Spacing rhythm (8px base) */
  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2rem; --sp-6:3rem;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.28s;

  color-scheme:dark;
}

*{box-sizing:border-box}
*::selection{background:rgba(255,61,180,.32);color:#fff}

html,body{margin:0;height:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Layered atmosphere: top plum glow + off-axis pink bloom + dark floor */
  background:
    radial-gradient(80% 55% at 78% 8%, rgba(236,15,143,.16) 0%, rgba(236,15,143,0) 55%),
    radial-gradient(120% 90% at 50% 0%, var(--bg-1) 0%, var(--bg-0) 60%, var(--bg-2) 100%);
  background-attachment:fixed;
  color:var(--ink);
  min-height:100dvh;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.01em;
  line-height:1.5;
  overflow-x:hidden;
}

/* Subtle film grain so the dark background never looks flat / banded. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter>\
<rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Screens ---- */
.screen{
  max-width:760px;
  margin:0 auto;
  padding:clamp(20px,5vw,32px);
  padding-top:max(env(safe-area-inset-top),clamp(20px,5vw,32px));
  padding-bottom:max(env(safe-area-inset-bottom),24px);
  min-height:100dvh;
  animation:screen-in .4s var(--ease-out) both;
}
.screen[hidden]{display:none}

@keyframes screen-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---- Typography primitives ---- */
h1{
  font-size:var(--fs-h1);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.04;
  margin:0 0 var(--sp-3);
}
h2{
  font-size:var(--fs-h2);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 var(--sp-3);
}

/* ---- Glass surface ---- */
.glass{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    var(--glass-bg);
  border:1px solid var(--glass-br);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);
  backdrop-filter:blur(var(--blur)) saturate(140%);
  box-shadow:var(--shadow-card);
}
/* hairline of light along the top edge of glass cards */
.glass::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,var(--glass-hi),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

/* ---- Accessibility ---- */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

:focus-visible{
  outline:2px solid var(--pink-bright);
  outline-offset:3px;
  border-radius:6px;
}

/* Respect reduced-motion: kill atmospheric/entrance motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* =========================================================================
   Task 5 — Home + Browse screens.
   Built on the Dark Studio token system above (glass, pink glow, motion).
   Class/ID hooks here are load-bearing — app.js wires them up.
   ========================================================================= */

/* ---- Home: masthead ---- */
.home-head{
  text-align:center;
  padding:clamp(8px,4vw,24px) 0 var(--sp-5);
}
.logo{
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#fff 0%,#f3eef1 100%);
  padding:8px;
  box-shadow:var(--glow-soft), 0 10px 30px -10px rgba(0,0,0,.8);
  animation:logo-in .7s var(--ease-out) both;
}
@keyframes logo-in{
  from{opacity:0;transform:translateY(-8px) scale(.9)}
  to{opacity:1;transform:none}
}
.kicker{
  color:var(--pink-text);
  letter-spacing:.28em;
  font-size:var(--fs-kicker);
  font-weight:700;
  text-transform:uppercase;
  margin:var(--sp-3) 0 0;
}
.home-title{
  margin:var(--sp-2) 0 0;
  font-size:var(--fs-h1);
}
.home-title em{
  font-style:normal;
  background:linear-gradient(100deg,var(--pink-bright),var(--ember));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

/* ---- Home: day cards ---- */
.days{display:flex;flex-direction:column;gap:var(--sp-2)}

.daycard{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  width:100%;
  padding:clamp(16px,4vw,22px) clamp(18px,4vw,24px);
  text-align:left;
  color:var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%),
    var(--glass-bg);
  border:1px solid var(--glass-br);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
  /* staggered entrance, driven by --i set inline per card */
  animation:card-in .5s var(--ease-out) both;
  animation-delay:calc(.06s * var(--i) + .12s);
}
@keyframes card-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
/* sweeping pink bloom that grows on the left edge as a focus marker */
.daycard::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:linear-gradient(180deg,var(--pink-bright),var(--pink-deep));
  box-shadow:0 0 16px -2px var(--pink-bright);
  opacity:.55;
  transition:width var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.daycard:hover,.daycard:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,61,180,.4);
  box-shadow:var(--shadow-lift),var(--glow-soft);
}
.daycard:hover::before,.daycard:focus-visible::before{width:5px;opacity:1}
.daycard:active{transform:translateY(0) scale(.995)}

.dc-index{
  font-size:clamp(1.4rem,6vw,1.9rem);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1.2px rgba(255,91,192,.55);
  line-height:1;
  min-width:2.4ch;
}
.dc-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.daycard .d{font-size:var(--fs-lead);font-weight:700;letter-spacing:-.01em}
.daycard .m{
  font-size:var(--fs-meta);
  color:var(--pink-text);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.dc-go{
  font-size:1.5rem;
  color:var(--muted);
  transition:transform var(--dur) var(--ease-out),color var(--dur) var(--ease);
}
.daycard:hover .dc-go,.daycard:focus-visible .dc-go{
  transform:translateX(3px);color:var(--pink-bright);
}

/* ---- Buttons (shared by sheet, browse, later screens) ---- */
.btn{
  position:relative;
  display:block;
  width:100%;
  padding:14px 16px;
  margin-top:var(--sp-2);
  border-radius:12px;
  border:1px solid var(--glass-br);
  background:var(--glass-bg);
  color:var(--ink);
  font-size:var(--fs-body);
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease),
             background var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn:hover{border-color:rgba(255,255,255,.22);background:var(--glass-bg-2)}
.btn:active{transform:scale(.985)}

.btn.primary{
  border:none;
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  background:linear-gradient(135deg,var(--pink) 0%,var(--ember) 100%);
  box-shadow:var(--glow-soft);
}
.btn.primary span{position:relative;z-index:1}
/* glossy top sheen + glow lift on hover */
.btn.primary::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 48%);
  opacity:.8;
}
.btn.primary:hover{transform:translateY(-1px);box-shadow:var(--glow-strong)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--glass-bg)}

/* ---- Day bottom sheet ---- */
.sheet{
  position:fixed;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(6,4,8,.62);
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
  z-index:20;
  padding:var(--sp-2);
  animation:sheet-fade .25s var(--ease) both;
}
@keyframes sheet-fade{from{opacity:0}to{opacity:1}}
.sheet.closing{animation:sheet-fade .2s var(--ease) reverse both}

.sheet-card{
  width:100%;
  max-width:440px;
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  text-align:center;
  animation:sheet-rise .42s var(--ease-out) both;
}
.sheet.closing .sheet-card{animation:sheet-rise .24s var(--ease) reverse both}
@keyframes sheet-rise{
  from{opacity:0;transform:translateY(40px) scale(.98)}
  to{opacity:1;transform:none}
}
.sheet-grip{
  display:block;
  width:42px;height:4px;
  margin:0 auto var(--sp-4);
  border-radius:99px;
  background:rgba(255,255,255,.22);
}
.sheet-kicker{
  margin:0 0 var(--sp-1);
  font-size:var(--fs-kicker);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--pink-text);
  font-weight:700;
}
.sheet-card h2{margin-bottom:var(--sp-4)}

/* ---- Browse ---- */
.back{
  width:auto;
  display:inline-flex;
  align-items:center;
  margin:0 0 var(--sp-2);
  padding:8px 14px 8px 10px;
}
#screen-browse h1{margin-top:var(--sp-1)}

.grid{
  display:grid;
  gap:clamp(14px,3vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin-top:var(--sp-3);
}
.vcard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 40%),
    var(--glass-bg);
  border:1px solid var(--glass-br);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.vcard:hover{
  transform:translateY(-3px);
  border-color:rgba(255,61,180,.35);
  box-shadow:var(--shadow-lift),var(--glow-soft);
}
.vmedia{
  position:relative;
  aspect-ratio:9/16;
  background:#000;
}
.vplayer{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.vmeta{padding:var(--sp-2) var(--sp-3) var(--sp-3)}
.vname{font-weight:700;letter-spacing:-.01em;line-height:1.2}
.vreps{
  margin-top:4px;
  font-size:var(--fs-meta);
  color:var(--muted);
  letter-spacing:.02em;
}

/* ---- Footer credit ---- */
.foot{text-align:center;padding:var(--sp-6) 0 var(--sp-3)}
.credit{
  color:var(--muted);
  font-size:var(--fs-meta);
  text-decoration:none;
  letter-spacing:.04em;
  transition:color var(--dur) var(--ease);
}
.credit:hover{color:var(--pink-text)}

/* =========================================================================
   Guided player + Complete screen (Task 6)
   Glass timer card, glowing ring, room-legible clock, work/rest states.
   Baseline rules follow the plan contract; the rest is Dark Studio polish.
   ========================================================================= */

.player,.complete{display:flex;flex-direction:column;gap:14px;min-height:100dvh}
.player{
  position:relative;
  padding-top:env(safe-area-inset-top,0);
  isolation:isolate;
}

/* The guided player is a hands-free timer: pin the whole column to the
   viewport so the hero ring + clock + controls stay above the fold and the
   demo video flexes to fill the leftover space. The video is the only
   shrinkable region. */
#screen-player.screen{
  height:100dvh;
  min-height:0;
  overflow:hidden;
  padding:max(env(safe-area-inset-top),12px)
          clamp(14px,4vw,24px)
          max(env(safe-area-inset-bottom),14px);
}
#screen-player .player{
  height:100%;
  min-height:0;
  gap:10px;
}
/* Work/rest atmosphere: a soft tinted aura behind the whole player that
   swaps hue between states. Sits below content via z-index. */
.player::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,rgba(255,61,180,.16),transparent 60%);
  opacity:0;transition:opacity .6s var(--ease),background .6s var(--ease);
}
.player.is-work::before{opacity:1}
.player.is-rest::before{
  opacity:1;
  background:radial-gradient(120% 80% at 50% -10%,rgba(90,180,255,.14),transparent 60%);
}

.ptop{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ptop .btn.ghost{padding:.45rem .7rem;min-height:auto}
.wake{color:var(--pink-text);font-size:11px;letter-spacing:.06em}

.pname{
  text-align:center;font-size:22px;margin:0;font-weight:800;
  letter-spacing:-.01em;line-height:1.1;
  animation:pname-in .5s var(--ease) both;
}
.is-rest .pname{color:var(--ink-dim);font-weight:700}
@keyframes pname-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pvideo{
  flex:1;min-height:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--glass-br);background:#000;
  position:relative;box-shadow:var(--shadow-card);
  transition:opacity .5s var(--ease),box-shadow .5s var(--ease);
}
.is-work .pvideo{box-shadow:var(--shadow-card),var(--glow-soft)}
.pvideo.dim{opacity:.5}
.pvideo video{width:100%;height:100%;object-fit:contain;background:#000;display:block}

.pglass{padding:14px;text-align:center;position:relative;overflow:hidden}
.pglass::after{ /* top inner-light edge consistent with other glass */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--glass-hi),transparent 40%);opacity:.5;
}

.ring{position:relative;width:118px;height:118px;margin:0 auto}
.ring svg{display:block;overflow:visible}
/* Glow the depleting progress arc; work = pink, rest = cool blue. */
.ring svg #p-ringfg{
  filter:drop-shadow(0 0 6px rgba(255,61,180,.65));
  transition:stroke-dashoffset 1s linear;
}
.is-rest .ring svg #p-ringfg{
  stroke:#5ab4ff;
  filter:drop-shadow(0 0 6px rgba(90,180,255,.7));
}
.ring-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.big{
  font-size:30px;font-weight:800;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
/* The clock is the one element read across a room — push it large. */
.ring-t .big{font-size:clamp(2rem,9vw,2.6rem)}
.lab{font-size:10px;letter-spacing:2px;color:var(--muted);text-transform:uppercase}
.psub{
  margin-top:8px;color:var(--pink-text);font-weight:600;
  letter-spacing:1px;font-size:12px;text-transform:uppercase;
}
.is-rest .psub{color:#8fcaff}

.pcontrols{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.pcontrols .btn{font-weight:700;letter-spacing:.02em}
#p-pause{grid-column:1 / -1} /* pause is the primary in-workout action */

.dots{display:flex;gap:4px;padding:0 2px 6px}
.dot{height:4px;flex:1;border-radius:3px;background:rgba(255,255,255,.15);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.dot.on{background:var(--pink-bright);box-shadow:0 0 6px var(--pink-bright)}

/* ---- Complete celebration -------------------------------------------- */
.complete{align-items:center;justify-content:center;text-align:center;gap:16px;padding:24px}
.complete h1{
  font-size:var(--fs-h1);font-weight:800;letter-spacing:-.02em;margin:0;
  background:linear-gradient(120deg,#fff 20%,var(--pink-bright) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise .6s var(--ease) .1s both;
}
.burst{
  font-size:54px;line-height:1;
  filter:drop-shadow(0 0 18px rgba(255,61,180,.55));
  animation:pop .7s var(--ease-bounce,cubic-bezier(.34,1.56,.64,1)) both;
}
@keyframes pop{0%{opacity:0;transform:scale(.4) rotate(-12deg)}60%{transform:scale(1.12)}100%{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stat{
  padding:18px 26px;margin:8px 0;min-width:min(280px,80vw);
  box-shadow:var(--shadow-card),var(--glow-soft);
  animation:rise .6s var(--ease) .2s both;
}
.stat .big{font-size:clamp(2.2rem,11vw,3rem);margin:.15em 0;color:var(--ink)}
.complete .btn{min-width:min(280px,80vw);animation:rise .6s var(--ease) .3s both}
.complete .btn.primary{animation-delay:.28s}
.complete .foot{margin-top:8px;animation:rise .6s var(--ease) .4s both}

@media (prefers-reduced-motion:reduce){
  .pname,.complete h1,.burst,.stat,.complete .btn,.complete .foot{animation:none}
  .ring svg #p-ringfg{transition:none}
  .player::before{transition:none}
}

/* Landscape contract (Task 10): timer/controls sit beside the video. */
@media (orientation:landscape) and (max-height:560px){
  .player{flex-direction:row;flex-wrap:wrap;align-items:center}
  .ptop{flex:1 0 100%}
  .pname{flex:1 0 100%}
  .pvideo{flex:1 1 55%;height:70dvh;min-height:0}
  .pglass{flex:1 1 35%;align-self:center}
  .pcontrols{flex:1 0 100%}
  .dots{flex:1 0 100%}
}