/* ============================================================
   app.css, gemensam stilmall för Hjärtfrisk-appen.

   Här samlas den CSS som tidigare upprepades i varje skärmfil:
   färg- och måttvariabler, grundåterställning, appens ram och
   det vanliga sidhuvudet med tillbaka-länk.

   Skärmspecifik CSS ligger kvar i respektive HTML-fil. När en
   skärm vill avvika från grunden, till exempel startskärmen som
   har ett eget sidhuvud, skriver den sin egen regel i sin egen
   stiltagg, som då går före den här filen.
   ============================================================ */

/* ---------- Konfiguration: färger och mått ---------- */
:root{
  --page:#DEE3E1;          /* yta runt appen på dator */
  --bg:#EFF2F1;            /* appens bakgrund */
  --surface:#FFFFFF;       /* kort */
  --accent:#2F7D5D;        /* lugn grön accent */
  --accent-soft:#E6F0EB;   /* mjuk accentbakgrund för ikoner */
  --text:#1E2A2E;          /* mörk text för god läsbarhet */
  --text-muted:#4F5E62;    /* sekundär text, kontrastsäkrad mot WCAG AA */
  --border:#E2E7E5;        /* fina avgränsningar */
  --track:#E8ECEA;         /* spår för förloppsindikator */
  --placeholder:#6A7670;   /* platshållartext i inmatningsfält, WCAG AA */
  --radius:16px;           /* hörnradie, startskärmen höjer den till 18px */
  --shadow:0 1px 2px rgba(30,42,46,.05), 0 8px 22px rgba(30,42,46,.07);
}

/* ---------- Textstorlek: Stor ----------
   Sätts av lagring.js på html-elementet när användaren valt Stor
   textstorlek i inställningarna. Zoom på rot-elementet förstorar hela
   appen, texten med, och beter sig som webbläsarens sidzoom: layouten
   flödar om utan sidled-scroll. Faktorn justeras här. */
html[data-textstorlek="stor"]{ zoom:1.15; }

/* ---------- Grundåterställning ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--page);
  color:var(--text);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Appens ram: telefonbredd, centrerad ---------- */
.app{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
}
@media (min-width:540px){
  body{padding:36px 16px;}
  .app{min-height:auto; border-radius:30px; box-shadow:var(--shadow); overflow:hidden;}
}

/* ---------- Sidhuvud med tillbaka-länk ----------
   Används av alla skärmar utom startskärmen, som har ett eget
   sidhuvud med ordbild och datum. */
.topbar{padding:22px 22px 4px;}
.back{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 12px 8px 8px; margin-left:-8px;
  border-radius:12px;
  color:var(--text-muted);
  text-decoration:none; font-size:16px; font-weight:500;
}
.back:hover{background:var(--surface);}
.back:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ---------- Gemensam kryssruta för listrader ----------
   Används i fiberkortet, motion, inställningar och välkomstflödet.
   Den fyllda varianten styrs av radens tillståndsklass. */
.kryssruta{
  flex:none; width:28px; height:28px;
  border:2px solid var(--border); border-radius:8px;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  color:#FFFFFF;
  transition:background .12s ease, border-color .12s ease;
}
.kryssruta::after{
  content:"\2713";
  font-size:17px; font-weight:700;
  opacity:0; transition:opacity .12s ease;
}
.frow.done .kryssruta,
.alt-card.checked .kryssruta,
.kryss-rad.vald .kryssruta,
.alder-rad.ikryssad .kryssruta{
  background:var(--accent); border-color:var(--accent);
}
.frow.done .kryssruta::after,
.alt-card.checked .kryssruta::after,
.kryss-rad.vald .kryssruta::after,
.alder-rad.ikryssad .kryssruta::after{
  opacity:1;
}