/* ==========================================================================
   FemaleMetrix Generation 2 — vereinfachte App (meinplan.html)
   Nutzt die Design-Tokens aus style.css (dunkles Interface, Cyan-Akzente,
   präzise Typografie). Bewusst wenige Komponenten: Karte, Aufgabe, Chip,
   Bottom-Nav. Keine Systembegriffe, keine Karten-Flut.
   ========================================================================== */

/* Der Site-Header ist position:fixed (Höhe --header-h). Ohne diesen Abstand
   liegt die erste Karte (Woche · Ziel) unter dem Header und wirkt oben
   abgeschnitten. */
.sapp { max-width: 640px; margin: 0 auto; padding: calc(var(--header-h) + 18px) 16px calc(84px + env(safe-area-inset-bottom)); min-height: 70vh; }
.sapp h1, .sapp h2, .sapp h3 { letter-spacing: 0.01em; }
.sapp h2 { font-size: 1.35rem; margin: 4px 0 4px; }
.sapp .s-sub { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }

/* Kopfzeile: Woche · Ziel */
.s-head { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 14px 16px; margin-bottom: 14px; }
.s-head .k { font-size: 0.68rem; letter-spacing: 0.14em; color: var(--accent-2); text-transform: uppercase; display: block; margin-bottom: 4px; }
.s-head .goal { color: var(--text); font-weight: 600; }
.s-head .phase { color: var(--muted); font-size: 0.9rem; margin-top: 3px; }
.s-head .status { margin-top: 8px; font-size: 0.88rem; color: var(--green); }
.s-head .status.warn { color: var(--amber); }

/* Aufgabenliste (max. 3 primäre) */
.s-tasks { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.s-task { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 13px 14px; cursor: pointer; transition: border-color 0.15s; }
.s-task:hover { border-color: var(--accent-line); }
.s-task .box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line-strong); flex: 0 0 auto; display: grid; place-items: center; font-size: 15px; color: transparent; }
.s-task.done .box { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.s-task .t { flex: 1; }
.s-task .t b { display: block; font-weight: 600; }
.s-task.done .t b { text-decoration: line-through; color: var(--muted); }
.s-task .t span { color: var(--muted); font-size: 0.85rem; }
/* Eigener Button in der Aufgabenzeile (navigiert, statt abzuhaken) —
   Browser-Default zurückgesetzt, Optik wie zuvor. */
.s-task .go { color: var(--accent-2); font-size: 0.82rem; white-space: nowrap; background: none; border: 0; font-family: inherit; padding: 6px 2px; margin: -6px 0; cursor: pointer; }
.s-task .go:hover { text-decoration: underline; }
.s-task .go:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }

/* Sekundär-Chips (Einkauf, Prep, Wiegen, Foto, Wochencheck) */
.s-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.s-chip { border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 0.82rem; color: var(--muted); background: transparent; cursor: pointer; }
.s-chip.on { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.s-chip.cta { color: var(--accent-2); border-color: var(--accent-line); }

/* Karten */
.s-card { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 15px 16px; margin: 12px 0; }
.s-card h3 { font-size: 1.02rem; margin: 0 0 8px; }
/* Nebentext — auch außerhalb einer Karte (Stack-Hinweise, Rechtliches). */
.sapp .hint, .s-card .hint { color: var(--muted-2); font-size: 0.84rem; }
.s-note { border-left: 3px solid var(--accent-2); padding: 10px 14px; background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 0.9rem; margin: 12px 0; }
.s-note.warn { border-left-color: var(--amber); background: var(--amber-soft); }

/* Untertabs in "Mein Plan" */
.s-subtabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 12px; padding-bottom: 4px; }
.s-subtabs button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 8px 14px; font-size: 0.86rem; cursor: pointer; white-space: nowrap; }
.s-subtabs button.on { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); }

/* Woche */
.s-week { display: flex; flex-direction: column; gap: 6px; }
.s-week .d { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 0.9rem; }
.s-week .d.today { border-color: var(--accent-line); background: var(--accent-soft); }
.s-week .d .wd { width: 34px; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; }
/* Wochenansicht zeigt echte Plantage (Wochentag + Datum) — braucht Breite. */
.s-week .d .wd.date { width: 64px; flex: 0 0 auto; }
.s-week .d .what { flex: 1; }
.s-week .d .tag { color: var(--accent-2); font-size: 0.78rem; }

/* Training */
.s-ex { border-top: 1px solid var(--line); padding: 10px 0; display: flex; align-items: center; gap: 10px; }
.s-ex:first-of-type { border-top: 0; }
.s-ex .n { flex: 1; }
.s-ex .n b { font-weight: 600; display: block; }
.s-ex .n span { color: var(--muted); font-size: 0.82rem; }
.s-ex .short-mark { color: var(--accent-2); font-size: 0.7rem; letter-spacing: 0.1em; }
.s-ex input[type="number"] { width: 64px; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text); border-radius: 8px; padding: 7px 8px; font-size: 0.9rem; }
.s-ex .setbox { display: flex; gap: 5px; }
.s-ex .setbox button { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--muted); cursor: pointer; font-size: 0.8rem; }
.s-ex .setbox button.on { border-color: var(--green); color: var(--green); background: var(--green-soft); }
.s-ex select { background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); border-radius: 8px; padding: 6px; font-size: 0.8rem; max-width: 130px; }
/* Was heute schon im Protokoll steht bzw. was letztes Mal stand — die
   beiden Zeilen, aus denen progressive Überlastung überhaupt erst wird. */
.s-ex .s-done { color: var(--green); font-size: 0.82rem; display: block; margin-top: 2px; }
.s-ex .s-last { color: var(--muted-2); font-size: 0.82rem; display: block; margin-top: 2px; }

/* Übungszeile als Schaltfläche (Mein Plan → Training) */
.s-ex.tap { width: 100%; text-align: left; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; cursor: pointer; }
.s-ex.tap:hover .n b, .s-ex.tap:focus-visible .n b { color: var(--accent-2); }
.s-ex.tap:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; border-radius: 8px; }
.s-ex.tap .go { color: var(--accent-2); font-size: 0.82rem; white-space: nowrap; flex: 0 0 auto; }

/* Satz-Protokoll im Sheet */
.s-lastlog { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 4px 0 14px; background: var(--card); }
.s-lastlog .l { font-size: 0.9rem; }
.s-lastlog .v { color: var(--muted-2); font-size: 0.8rem; margin-top: 2px; }
.s-lastlog .g { color: var(--accent-2); font-size: 0.86rem; margin-top: 6px; }
.s-setlog .row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.s-setlog .row .n { flex: 0 0 54px; color: var(--muted); font-size: 0.8rem; }
.s-setlog .row .x { color: var(--muted-2); }
.s-setlog .row input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text); border-radius: 10px; padding: 11px 10px; font-size: 1.02rem; font-weight: 600; text-align: center; font-family: inherit; }
.s-setlog .row .cp { flex: 0 0 auto; width: 40px; height: 42px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; }
.s-setlog .row .cp:hover { color: var(--accent-2); border-color: var(--accent-line); }

/* Ernährung */
.s-meal { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.s-meal .slot { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--accent-2); text-transform: uppercase; }
.s-meal .opt { border-top: 1px solid var(--line); padding: 9px 0; }
.s-meal .opt:first-of-type { border-top: 0; }
.s-meal .opt .row { display: flex; align-items: baseline; gap: 8px; }
.s-meal .opt .row b { flex: 1; font-weight: 600; }
.s-meal .opt .row .kp { color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.s-meal .opt .items, .s-meal .opt .prep { color: var(--muted-2); font-size: 0.82rem; margin-top: 3px; }
.s-meal .opt.chosen { background: var(--accent-soft); border-radius: 8px; padding-left: 10px; padding-right: 10px; }
.s-meal .opt button { margin-top: 6px; }
/* Gesperrte Wahl (dritter Shake): sichtbar, aber gedämpft — der Klick
   erklärt die Grenze, statt sie kommentarlos zu verweigern. */
.sapp .btn-disabled { opacity: 0.55; }
.s-meal .opt .s-err { margin: 6px 0 0; }

/* Einkaufsliste */
/* Tageswahl in der Ernährung: gestern · heute · morgen */
.s-daynav { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.s-daynav button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 8px 13px; font-size: 0.86rem; cursor: pointer; font-family: inherit; }
.s-daynav button.cur { color: var(--text); border-color: var(--accent-line); background: var(--accent-soft); flex: 1; }
.s-daynav button:disabled { opacity: 0.35; cursor: default; }

/* Fortschritt */
.s-stat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
.s-stat .cell { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card); }
.s-stat .cell .v { font-size: 1.35rem; font-weight: 650; }
.s-stat .cell .l { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.s-bars { display: flex; gap: 3px; align-items: flex-end; height: 60px; margin: 10px 0; }
.s-bars .b { flex: 1; background: var(--accent-soft); border-radius: 3px 3px 0 0; min-height: 4px; position: relative; }
.s-bars .b.hit { background: var(--accent-2); }

/* Kraftentwicklung: eine Zeile je Einheit — Datum, Sätze, Gesamtlast */
.s-histlist { display: flex; flex-direction: column; }
.s-histlist .r { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.s-histlist .r:last-child { border-bottom: 0; }
.s-histlist .r .d { flex: 0 0 74px; color: var(--muted); font-size: 0.78rem; }
.s-histlist .r .s { flex: 1; }
.s-histlist .r .m { color: var(--muted-2); font-size: 0.8rem; white-space: nowrap; }
.s-histlist .r .m .up { color: var(--green); font-style: normal; }
.s-histlist .r .m .flat { color: var(--muted-2); font-style: normal; }

/* Formulare (Fragebogen, Wochencheck) */
.s-q { margin: 14px 0; }
.s-q .lbl { font-weight: 600; margin-bottom: 3px; }
.s-q .why { color: var(--muted-2); font-size: 0.8rem; margin-bottom: 8px; }
.s-q .opts { display: flex; flex-wrap: wrap; gap: 7px; }
.s-q .opts button { border: 1px solid var(--line-strong); background: transparent; color: var(--muted); border-radius: 999px; padding: 8px 15px; cursor: pointer; font-size: 0.88rem; }
.s-q .opts button.on { color: var(--text); border-color: var(--accent-2); background: var(--accent-soft); }
.s-q input[type="number"], .s-q input[type="time"] { background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text); border-radius: 9px; padding: 9px 11px; font-size: 0.95rem; width: 120px; }
.s-err { color: var(--red); font-size: 0.87rem; margin: 8px 0; }

/* Bottom-Navigation — genau vier Bereiche */
.s-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; justify-content: space-around; background: var(--card); backdrop-filter: blur(10px); border-top: 1px solid var(--line-strong); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.s-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--muted); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; padding: 5px 10px; border-radius: 10px; min-width: 62px; }
.s-nav a svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.s-nav a.on { color: var(--accent-2); }

/* Bottom-Sheet (Gewicht eintragen u. a.) */
.s-sheet-back { position: fixed; inset: 0; background: var(--card); z-index: 90; }
.s-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; background: var(--bg-1); border-top: 1px solid var(--line-strong); border-radius: 18px 18px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
.s-sheet h3 { margin: 0 0 4px; }
.s-sheet .ctx { color: var(--muted); font-size: 0.86rem; margin-bottom: 12px; }
.s-sheet .big-input { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
.s-sheet .big-input input { flex: 1; background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text); border-radius: 12px; padding: 14px; font-size: 1.5rem; font-weight: 650; text-align: center; }
.s-sheet .big-input button { width: 46px; height: 52px; border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font-size: 1.2rem; cursor: pointer; }
.s-sheet .fb { font-size: 0.86rem; color: var(--green); min-height: 1.2em; margin-bottom: 10px; }

/* Rest-Timer im Workout */
.s-timer { position: sticky; top: 8px; z-index: 40; display: flex; align-items: center; gap: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px; padding: 10px 14px; margin: 10px 0; }
.s-timer .t { font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-2); min-width: 62px; }
.s-timer .l { color: var(--muted); font-size: 0.84rem; flex: 1; }
.s-timer button { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 0.8rem; }
.s-timer.done { background: var(--green-soft); border-color: var(--green); }
.s-timer.done .t { color: var(--green); }
.s-goal { color: var(--accent-2); font-size: 0.82rem; display: block; margin-top: 2px; }

/* Portions-Stepper (Ernährung) */
.s-portion { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.s-portion button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); cursor: pointer; font-size: 1rem; }
.s-portion .f { color: var(--muted); font-size: 0.84rem; min-width: 130px; text-align: center; }

/* Fotos (gerätelokal) */
.s-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.s-photos .ph { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; display: grid; place-items: center; color: var(--muted-2); font-size: 0.72rem; text-align: center; background: var(--bg-2); cursor: pointer; }
.s-photos .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-photos .ph .cap { padding: 4px; }

/* Wizard */
.s-steps { display: flex; gap: 6px; margin: 6px 0 16px; }
.s-steps i { height: 3px; flex: 1; background: var(--line); border-radius: 2px; }
.s-steps i.on { background: var(--accent-2); }

.s-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 360px) {
  .sapp { padding-left: 12px; padding-right: 12px; }
  .s-stat { grid-template-columns: 1fr 1fr; }
  .s-ex input[type="number"] { width: 54px; }
}