/* Training · interval camina-córre — estil iOS/Apple Fitness
   (fons negre, anells, tipografia del sistema, vidre esmerilat) */

:root {
  --bg: #000;
  --card: rgba(255,255,255,.055);
  --card-borde: rgba(255,255,255,.09);
  --text: #f5f5f7;
  --text-2: rgba(235,235,245,.6);
  --text-3: rgba(235,235,245,.38);
  --camina: #30d158;   /* systemGreen */
  --corre:  #0a84ff;   /* systemBlue  */
  --perill: #ff453a;   /* systemRed   */
  --radio: 22px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f2f2f7;
    --card: rgba(255,255,255,.92);
    --card-borde: rgba(0,0,0,.06);
    --text: #1c1c1e;
    --text-2: rgba(60,60,67,.6);
    --text-3: rgba(60,60,67,.38);
  }
  body { background: linear-gradient(180deg, #fff, #f2f2f7); }
}

/* ── pantalles ── */
.screen {
  width: min(430px, 100vw);
  min-height: 100vh;
  margin: auto;                /* centrada si hi cap, amb scroll si no */
  padding: calc(env(safe-area-inset-top) + 26px) 20px calc(env(safe-area-inset-bottom) + 26px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  opacity: 1;
  transition: opacity .28s ease;
}
body { align-items: flex-start; }
.screen.ocult { display: none; }
.ocult { display: none !important; }

.cap { text-align: center; }
.cap h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.cap .sub { margin: 2px 0 0; color: var(--text-2); font-size: 15px; }

/* ── targeta de configuració ── */
.card {
  background: var(--card);
  border: 1px solid var(--card-borde);
  border-radius: var(--radio);
  backdrop-filter: blur(20px) saturate(1.2);
  padding: 6px 16px;
}
.fila { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.sep { height: 1px; background: var(--card-borde); margin-left: 50px; }

.icona {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center; flex: none;
}
.icona svg { width: 22px; height: 22px; fill: #fff; }
.icona.camina { background: var(--camina); }
.icona.corre  { background: var(--corre); }
.icona.sèries { background: #8e8e93; }

.dada { flex: 1; min-width: 0; }
.dada label { font-size: 16px; font-weight: 600; }
.dada .help { margin: 1px 0 0; font-size: 12.5px; color: var(--text-3); }

/* stepper iOS */
.stepper {
  display: flex; align-items: center;
  background: rgba(120,120,128,.16);
  border-radius: 10px; overflow: hidden; flex: none;
}
.stepper button {
  width: 38px; height: 34px; border: 0; background: none; color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer; touch-action: manipulation;
  display: grid; place-items: center;
}
.stepper button:active { background: rgba(120,120,128,.28); }
.stepper output {
  min-width: 58px; text-align: center; font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.resum .dada label { color: var(--text-2); font-weight: 500; }
.total {
  font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ── commutador iOS ── */
.switch {
  width: 51px; height: 31px; border-radius: 16px; border: 0; padding: 0;
  background: rgba(120,120,128,.24); cursor: pointer; position: relative;
  transition: background .2s ease; flex: none;
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.28);
  transition: transform .2s cubic-bezier(.3,1.2,.4,1);
}
.switch[aria-checked="true"] { background: var(--camina); }
.switch[aria-checked="true"] .knob { transform: translateX(20px); }

/* ── llista de sèries (mode per sèrie) ── */
.icona.llista-ic { background: #5e5ce6; }
.llista { max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#llista-series { max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sèrie-fila { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.sèrie-num {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: rgba(120,120,128,.18); color: var(--text-2);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.mini { flex: 1; display: grid; gap: 4px; }
.mini-fila { display: flex; align-items: center; gap: 8px; }
.punt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.punt.c { background: var(--camina); }
.punt.r { background: var(--corre); }
.mini output {
  width: 46px; text-align: right; font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mini-stepper {
  display: flex; align-items: center;
  background: rgba(120,120,128,.14); border-radius: 8px; overflow: hidden;
}
.mini-stepper button {
  width: 30px; height: 26px; border: 0; background: none; color: var(--text);
  font-size: 17px; cursor: pointer; display: grid; place-items: center;
}
.mini-stepper button:active { background: rgba(120,120,128,.26); }
.btn-borra {
  width: 28px; height: 28px; border-radius: 50%; border: 0; flex: none;
  background: rgba(255,69,58,.14); color: var(--perill);
  font-size: 17px; line-height: 1; cursor: pointer;
}
.btn-fantasma {
  width: 100%; margin-top: 10px; padding: 10px; border: 0; border-radius: 12px;
  background: rgba(120,120,128,.14); color: var(--text); cursor: pointer;
  font-size: 15px; font-weight: 600; font-family: inherit;
}
.btn-fantasma:active { opacity: .7; }

/* ── botons ── */
.btn-primari {
  width: 100%; height: 54px; border: 0; border-radius: 16px; cursor: pointer;
  background: var(--text); color: var(--bg);
  font-size: 18px; font-weight: 600; font-family: inherit;
  transition: transform .12s ease, opacity .15s ease;
}
.btn-primari:active { transform: scale(.97); opacity: .85; }

.peu { text-align: center; color: var(--text-3); font-size: 12.5px; margin: 0; }

/* ── pantalla del cronòmetre ── */
.cap-timer {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; color: var(--text-2);
  padding: 0 6px; font-variant-numeric: tabular-nums;
}
#t-round { font-weight: 600; color: var(--text); }

.anell { display: grid; place-items: center; margin: 4px 0; }
.anell svg { transform: rotate(-90deg); overflow: visible; }
.anell circle { fill: none; stroke-width: 14; }
.anell-fons  { stroke: rgba(120,120,128,.22); }
.anell-total { stroke: rgba(120,120,128,.14); stroke-width: 5; }
.anell-fase  {
  stroke: var(--camina);
  stroke-linecap: round;
  transition: stroke .4s ease;
}
.anell-fase.fi { stroke: var(--camina); stroke-width: 8; }

.centre {
  position: absolute; display: grid; place-items: center; text-align: center;
  gap: 2px;
}
.fase {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--camina); transition: color .4s ease;
}
.temps {
  margin: 0; font-size: 88px; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.temps.tick { animation: tick .45s ease; }
@keyframes tick { 0%{transform:scale(1)} 22%{transform:scale(1.06)} 100%{transform:scale(1)} }
.seguent { margin: 4px 0 0; font-size: 13.5px; color: var(--text-3); min-height: 1.2em; }

@media (max-width: 380px) {
  .anell svg { width: 280px; height: 280px; }
  .temps { font-size: 76px; }
}

/* ── controls ── */
.controls {
  display: flex; align-items: center; justify-content: center;
  gap: 26px;
}
.btn-primari.circular {
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center; padding: 0;
}
.btn-primari.circular svg { width: 34px; height: 34px; fill: var(--bg); }
.btn-sec {
  width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(120,120,128,.18); color: var(--text);
  display: grid; place-items: center; transition: transform .12s ease;
}
.btn-sec svg { width: 26px; height: 26px; fill: currentColor; }
.btn-sec:active { transform: scale(.93); }
.btn-sec.perill { color: var(--perill); }

/* ── pantalla de fi ── */
#screen-fi { align-items: center; text-align: center; gap: 16px; }
.fi-anell { display: grid; place-items: center; }
.fi-anell svg { transform: rotate(-90deg); }
.fi-anell .check {
  fill: none; stroke: var(--camina); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 80; stroke-dashoffset: 80; transform: rotate(90deg);
  transform-origin: 60px 60px;
  animation: dibuixa .55s .25s cubic-bezier(.3,1.4,.5,1) forwards;
}
@keyframes dibuixa { to { stroke-dashoffset: 0; } }
.fi-titol { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.fi-sub { margin: 0; color: var(--text-2); font-size: 15px; }
#screen-fi .btn-primari { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}