/* Mobil først. Store trykkflater, høy kontrast, tall lesbart på avstand. */
:root {
  --bg: #111;
  --flate: #1c1c1e;
  --tekst: #f2f2f7;
  --dempet: #8e8e93;
  --aksent: #30d158;
  --pause: #0a84ff;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 1rem 1rem calc(5rem + env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--tekst);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 .5rem; }

button {
  min-height: 48px;
  padding: 0 1.2rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--flate);
  color: var(--tekst);
  font: inherit;
  cursor: pointer;
}
button.stor { width: 100%; min-height: 60px; font-size: 1.2rem;
  background: var(--aksent); color: #000; font-weight: 600; }
button.flat { background: transparent; color: var(--dempet); }
button.valgt { background: var(--aksent); color: #000; }

input {
  min-height: 48px; width: 100%; padding: 0 .8rem;
  border: 1px solid var(--dempet); border-radius: var(--radius);
  background: var(--flate); color: var(--tekst); font: inherit;
}

.tid { display: flex; gap: .5rem; margin-bottom: 1rem; }
.tid button { flex: 1; }

.forslag { background: var(--flate); border-radius: var(--radius); padding: 1rem; }
.begrunnelse { color: var(--aksent); }
.ovelser { color: var(--dempet); }
.tom { color: var(--dempet); }

/*
 * Øktspilleren. Tallet skal leses fra to skritts avstand, og layouten
 * følger et Bend-lignende mønster ovenfra og ned: lukk + steg-teller,
 * sirkel med fremdriftsring (figur kommer i en senere task), en valgfri
 * bytt-side-markør, øvelsesnavn, nedtelling, og tre runde knapper nederst
 * innen tommelrekkevidde.
 */
.spiller {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding-top: .25rem;
}

.spiller-topp {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.spiller-topp .lukk {
  /* (V4-rettelse) var 44px - kravet er minst 48. */
  min-height: 48px; min-width: 48px; padding: 0;
  background: transparent; color: var(--dempet); font-size: 1.3rem;
}
.spiller-topp .steg-teller {
  margin: 0; color: var(--dempet); font-variant-numeric: tabular-nums;
}
.spiller-topp-plass { display: inline-block; width: 48px; }

.sirkel-wrap {
  position: relative; width: min(70vw, 300px); height: min(70vw, 300px);
  margin: 1.5rem 0 0;
}
.sirkel-wrap .ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-spor { fill: none; stroke: var(--flate); stroke-width: 10; }
.ring-fremdrift {
  fill: none; stroke: var(--aksent); stroke-width: 10; stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}
.spiller.pause .ring-fremdrift { stroke: var(--pause); }
/* Plass til en figur i en senere task - foreløpig bare en dempet flate. */
.spiller-figur {
  position: absolute; inset: 15%; border-radius: 50%; background: var(--flate);
}

.bytt-side { margin: .75rem 0 0; color: var(--dempet); font-size: 1.4rem; }

.spiller .ovelse { font-size: 1.8rem; margin: 1rem 0 0; }
/* (K3-rettelse) undertittelen fra spiller.js ("Runde 2 av 4", parametrene
   på en varighet-blokk, instruksjonen på en fri-blokk) - viste ingen
   steder før denne rettelsen. */
.spiller .under { color: var(--dempet); margin: .25rem 0 0; }
.spiller .tall {
  font-size: clamp(4rem, 24vw, 7rem);
  font-variant-numeric: tabular-nums;
  font-weight: 200; line-height: 1; margin: .25rem 0 0;
}
.spiller.pause .tall { color: var(--pause); }

.kontroller-runde {
  position: fixed; left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: center; gap: 1.5rem;
}
.rund {
  width: 60px; height: 60px; min-height: 60px; border-radius: 50%;
  padding: 0; font-size: 1.4rem;
}
.rund:disabled { opacity: .35; }
.rund.stor {
  width: 84px; height: 84px; min-height: 84px;
  font-size: 1rem; font-weight: 600; background: var(--aksent); color: #000;
}
.spiller.pause .rund.stor { background: var(--pause); color: #fff; }

.advarsel:not(:empty) {
  margin-top: 1rem; padding: .75rem;
  border-radius: var(--radius); background: #4a3000; color: #ffd479;
  display: flex; flex-direction: column; gap: .5rem; align-items: center;
}

.okter { list-style: none; padding: 0; }
.okter li {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .8rem 0; border-bottom: 1px solid var(--flate);
}
.okter .dato { color: var(--dempet); font-variant-numeric: tabular-nums; }

progress { width: 100%; height: 12px; }

.tilbakemelding { list-style: none; padding: 0; }
.tilbakemelding li { padding: .8rem 0; border-bottom: 1px solid var(--flate); }
.tilbakemelding div { display: flex; gap: .5rem; margin-top: .5rem; }
.tilbakemelding div button { flex: 1; }

.rpe { border: 0; padding: 0; display: flex; gap: .5rem; }
.rpe label {
  flex: 1; text-align: center; padding: .8rem 0;
  background: var(--flate); border-radius: var(--radius);
}
.rpe input { width: auto; min-height: auto; }

#meny {
  position: fixed; left: 0; right: 0;
  bottom: 0; display: flex;
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--flate);
}
#meny a {
  flex: 1; text-align: center; padding: .6rem 0;
  color: var(--dempet); text-decoration: none; font-size: .85rem;
}