/* AI Hybrid Tracker — 2026-08-15.
   Samme design-tokens som resten av appen (--amber/--panel/--border fra
   styles.css). Bevegelsen bruker de SAMME kurvene som jarvis-intro/msg-pop —
   ikke nye, for at treningsfanen skal føles som appen, ikke som noe limt på. */

/* Samme toppklarering som .view/#dashbord — MÅ gjentas fordi #trening (id)
   ellers overstyrer .view sin padding uten å ta med klareringen for de to
   faste stripene (.bar + .inbox, til sammen ~145px). Uten denne linja
   renderer alt innhold UNDER dem: usynlig, og tapp treffer capture-feltet i
   stedet for øvelseskortet. Funnet av Michael på ekte iPhone 2026-08-15 -
   mobil-viewport-emulering i Chrome fanget det aldri, fordi den testen
   sjekket at elementer FANTES og hadde riktig størrelse, ikke om et tapp på
   det faktiske skjermpunktet ville truffet dem eller noe som lå over. */
#trening {
  padding: calc(env(safe-area-inset-top) + 145px) 14px calc(env(safe-area-inset-bottom) + 100px);
  display: flex; flex-direction: column; gap: 14px;
  overflow-x: hidden;
}
body.trening-mode .composer { display: none; }

/* ── Kroppsvekt-widget ─────────────────────────────────────────────────── */
.tr-vekt {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
}
.tr-vekt label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); flex: 1; }
.tr-vekt label .ti { width: 16px; height: 16px; color: var(--amber); }
.tr-vekt input {
  width: 72px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 8px; color: var(--text); font: inherit; text-align: right;
}
.tr-vekt input:focus { outline: none; border-color: var(--amber-dim); }
.tr-vekt button {
  background: var(--amber); color: #1a1204; border: none; border-radius: 8px;
  padding: 7px 14px; font: inherit; font-weight: 700; cursor: pointer;
  transition: transform .12s, background .15s;
}
.tr-vekt button:active { transform: scale(.96); }

/* ── Coach-boks ────────────────────────────────────────────────────────── */
.tr-innsikt {
  background: linear-gradient(155deg, var(--panel-2), var(--panel));
  border: 1px solid var(--border-glow); border-radius: 14px; padding: 14px 16px;
  animation: jarvis-intro-in .5s cubic-bezier(.22,1,.36,1) both;
}
.tr-innsikt header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tr-innsikt header .ti { width: 18px; height: 18px; color: var(--amber); }
.tr-innsikt header span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--amber); }
.tr-innsikt p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.tr-innsikt--laster p, .tr-innsikt--laster { color: var(--muted); }

/* ── Økt-header ────────────────────────────────────────────────────────── */
.tr-okt-hode { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.tr-okt-hode h2 { margin: 0; font-family: var(--font-hud); font-size: 18px; }
.tr-antall { font-size: 12px; color: var(--muted); }

/* ── Øvelseskort ───────────────────────────────────────────────────────── */
.tr-kort {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px;
  /* IKKE overflow:hidden her. Målt 2026-08-15 (funnet av Michael på ekte
     iPhone): kombinert med denne inn-animasjonen kollapset kortet til ca.
     29px — nøyaktig høyden på <h3> alene — mens resten av innholdet fortsatt
     la seg ut i DOM-flyten langt under, usynlig og utappelig. Reproduserbart
     i Chrome også, ikke en iOS-quirk. Ingenting inni kortet trenger klipping
     fra bilde uten egen border-radius. */
  animation: tr-kort-in .4s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--tr-delay, 0ms);
}
@keyframes tr-kort-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tr-kort, .tr-innsikt { animation: none; } }

.tr-kort-topp { display: flex; gap: 12px; margin-bottom: 10px; }
.tr-bilde {
  width: 84px; height: 84px; border-radius: 12px; object-fit: cover; flex: none;
  background: var(--bg); border: 1px solid var(--border);
}
.tr-bilde--tom { display: flex; align-items: center; justify-content: center; }
.tr-bilde--tom .ti { width: 32px; height: 32px; color: var(--muted); }
.tr-kort-info { min-width: 0; flex: 1; }
.tr-kort-info h3 { margin: 0 0 2px; font-size: 15px; font-weight: 700; }
.tr-muskel { margin: 0 0 6px; font-size: 12px; color: var(--muted); text-transform: capitalize; }
.tr-cues { margin: 0; padding-left: 16px; font-size: 12px; color: var(--text); opacity: .85; line-height: 1.5; }
.tr-cues li { margin-bottom: 1px; }

.tr-mal {
  margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--amber);
  background: var(--amber-glow); border-radius: 8px; padding: 6px 10px; display: inline-block;
}

/* ── Loggingstabell (RepCount-stil: én rad per sett) ──────────────────── */
.tr-settabell { display: flex; flex-direction: column; gap: 6px; }
.tr-settrad {
  display: grid;
  grid-template-columns: 18px 1fr 1fr 1fr 78px 34px;
  gap: 6px; align-items: center;
}
.tr-settrad--hode { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 0 2px; }
.tr-settrad--hode span:last-child { grid-column: span 1; }
.tr-settnr { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }

.tr-input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 6px; color: var(--text); font: inherit; font-size: 16px;
  width: 100%; min-width: 0; text-align: center;
  transition: border-color .15s, box-shadow .15s;
}
.tr-input::placeholder { color: var(--muted); opacity: .55; font-weight: 500; }
.tr-input:focus { outline: none; border-color: var(--amber-dim); box-shadow: 0 0 0 3px var(--amber-glow); }

/* 16px, ikke mindre — under det trigger iOS Safari auto-zoom ved fokus,
   og zoomer aldri tilbake selv. Michael 2026-08-16: "aldri ut igjen". */
.tr-select { appearance: none; padding: 8px 2px; font-size: 16px; text-align: center; text-overflow: ellipsis; }

.tr-samme {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--muted); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .12s, border-color .15s, color .15s, background .15s;
}
.tr-samme .ti { width: 16px; height: 16px; }
.tr-samme:active { transform: scale(.92); }
.tr-samme--valgt { color: var(--green); border-color: var(--green); background: rgba(52,211,153,.12); }

.tr-notat {
  grid-column: 1 / -1; text-align: left; margin-top: -2px;
}

/* Settrad med data logget: en tynn amber-kant i venstre for å se raskt hva som er gjort. */
.tr-settrad:has(.tr-input--reps:not(:placeholder-shown)) {
  box-shadow: inset 3px 0 0 var(--amber-dim);
  padding-left: 4px;
  border-radius: 6px;
}

/* ── Fullfør-knapp ─────────────────────────────────────────────────────── */
.tr-fullfor {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--amber); color: #1a1204; border: none; border-radius: 14px;
  padding: 14px; font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  transition: transform .12s, opacity .2s;
  /* IKKE position:sticky. Målt 2026-08-15: en sticky knapp parkerer seg over
     hva enn som befinner seg i det skjermbåndet mens man scroller forbi —
     her landet den rett over notat-feltet på siste øvelse, og blokkerte
     tappet dit. Normal dokumentflyt garanterer at den aldri kan dekke noe. */
  box-shadow: 0 8px 24px rgba(245,158,11,.28);
}
.tr-fullfor .ti { width: 20px; height: 20px; }
.tr-fullfor:active { transform: scale(.97); }
.tr-fullfor:disabled { opacity: .6; }

/* ── Ferdig-tilstand ───────────────────────────────────────────────────── */
.tr-ferdig {
  text-align: center; padding: 40px 20px;
  animation: msg-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}
.tr-ferdig-ikon { color: var(--green); margin-bottom: 10px; }
.tr-ferdig-ikon .ti, .tr-ferdig-ikon { width: 48px; height: 48px; margin: 0 auto 10px; }
.tr-ferdig h3 { margin: 0 0 8px; font-family: var(--font-hud); }
.tr-ferdig p { margin: 0 0 4px; color: var(--text); font-size: 14px; line-height: 1.5; }
.tr-ferdig-under { color: var(--muted); font-size: 12px; }

/* ── Historikk — alltid synlig, ingen sammenleggbare kort ───────────────── */
.tr-muskelkart {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px;
}
.tr-muskelkart h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.tr-muskelkart h3 .ti { width: 16px; height: 16px; }
/* body-muscles (v3, 2026-08-16) mountes i .tr-muskel-mount — biblioteket
   tegner sin egen SVG i full bredde/høyde av containeren, forfra/bakfra
   side om side (ikke bak en fane/klikk — matcher Michaels "vis alt"-regel). */
.tr-muskel-visninger { display: flex; gap: 10px; justify-content: center; }
.tr-muskel-visning { flex: 1; min-width: 0; text-align: center; }
.tr-muskel-mount { width: 100%; max-width: 170px; margin: 0 auto; aspect-ratio: 0.43; }
.tr-muskel-visning-lbl { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.tr-muskel-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin: 10px 0 0; font-size: 10.5px; color: var(--muted); }
.tr-muskel-legende span { display: flex; align-items: center; gap: 4px; }
.tr-muskel-dott { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.tr-muskel-info {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; text-align: center;
}
.tr-muskel-info strong { color: var(--amber); }

/* ── Smerte-melding ────────────────────────────────────────────────────── */
.tr-smerte-apne, .tr-smerte-hist-apne {
  display: flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 7px 12px;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); font: inherit; font-size: 12px; cursor: pointer;
}
.tr-smerte-apne .ti { width: 14px; height: 14px; color: var(--amber); }
.tr-smerte-hist-apne { display: block; text-align: center; width: 100%; }
.tr-smerte-form {
  display: flex; flex-direction: column; gap: 10px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.tr-smerte-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.tr-smerte-form select, .tr-smerte-form input[type="text"], .tr-smerte-form input[type="number"], .tr-smerte-form textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; color: var(--text); font: inherit; font-size: 16px;
}
.tr-smerte-form textarea { min-height: 60px; resize: vertical; }
.tr-smerte-form output { color: var(--amber); font-weight: 700; }
.tr-slider-hint { font-weight: 400; color: var(--muted); }
.tr-smerte-form input[type="range"] {
  width: 100%; margin-top: 4px; accent-color: var(--amber);
}
.tr-smerte-check { flex-direction: row !important; align-items: center; gap: 8px !important; }
.tr-smerte-knapper { display: flex; gap: 8px; }
.tr-smerte-knapper button[type="submit"] {
  flex: 1; background: var(--amber); color: #1a1204; border: none; border-radius: 8px;
  padding: 9px; font: inherit; font-weight: 700; cursor: pointer;
}
.tr-smerte-knapper button[data-smerte-lukk] {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 14px; color: var(--muted); font: inherit; cursor: pointer;
}
.tr-smerte-resultat {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); font-size: 12.5px; line-height: 1.5;
}
.tr-smerte-resultat--rod { border-color: #b8452f; }
.tr-smerte-flagg { color: #e2694e; font-weight: 700; display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.tr-smerte-flagg .ti { width: 16px; height: 16px; flex-shrink: 0; }
.tr-smerte-hist-liste { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tr-smerte-hist-liste li {
  padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-size: 12px;
}
.tr-smerte-hist--rod { border-color: #b8452f; }
.tr-smerte-hist-topp { display: flex; justify-content: space-between; color: var(--amber); font-size: 12px; }
.tr-smerte-hist-meta { color: var(--muted); display: block; margin: 2px 0 4px; }

.tr-historikk {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-top: 4px;
}
.tr-historikk h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.tr-historikk h3 .ti { width: 16px; height: 16px; }
.tr-historikk h4 { margin: 14px 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.tr-plan-fremover {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-top: 4px;
}
.tr-plan-fremover h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.tr-plan-fremover h3 .ti { width: 16px; height: 16px; }
.tr-plan-ant { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: auto; }
.tr-plan-uke { margin-bottom: 4px; }
.tr-plan-uke:last-child { margin-bottom: 0; }
.tr-plan-uke-tittel { margin: 12px 0 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tr-plan-uke:first-child .tr-plan-uke-tittel { margin-top: 0; }
.tr-plan-ovelse-rad {
  display: flex; justify-content: space-between; gap: 8px; padding: 4px 0;
  font-size: 12px; border-bottom: 1px solid var(--border);
}
.tr-plan-ovelse-rad:last-child { border-bottom: none; }
.tr-plan-ovelse-navn { font-weight: 600; }
.tr-plan-ovelse-tall { color: var(--muted); white-space: nowrap; }

.tr-vekttrend { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.tr-vektpunkt {
  flex: none; background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; font-size: 14px; font-weight: 700; text-align: center;
}
.tr-vektpunkt i { display: block; font-style: normal; font-size: 10px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.tr-diff--opp { color: var(--amber); }
.tr-diff--ned { color: var(--blue); }

.tr-stats {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px;
}
.tr-stats h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.tr-stats h3:not(:first-child) { margin-top: 14px; }
.tr-stats h3 .ti { width: 16px; height: 16px; }
.tr-stats-rad {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: 12.5px; font-weight: 600;
}
.tr-stats-rad span { display: flex; align-items: center; gap: 5px; }
.tr-stats-rad .ti { width: 14px; height: 14px; color: var(--amber); flex: none; }
.tr-styrke-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-styrke-rad {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.tr-styrke-rad:last-child { border-bottom: none; }
.tr-styrke-navn { color: var(--muted); }
.tr-styrke-tall { font-weight: 700; }

.tr-hist-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* 2026-08-16: tr-hist-rad ble <li> -> <details>, se trening.js historikkHtml().
   Grid-layoutet som før satt direkte på raden, sitter nå på <summary> — selve
   <details> beholder kun border-bottom, slik at den fortsatt strekker seg
   under det utvidede innholdet når raden er åpen. */
.tr-hist-rad { border-bottom: 1px solid var(--border); }
.tr-hist-rad summary {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 16px 28px; gap: 8px; align-items: baseline;
  padding: 7px 0; font-size: 12.5px; cursor: pointer; list-style: none;
}
.tr-hist-rad summary::-webkit-details-marker { display: none; }
.tr-hist-rad summary:active { opacity: .7; }
.tr-hist-chevron { grid-row: 1 / 3; align-self: center; color: var(--muted); transition: transform .15s ease; }
.tr-hist-chevron .ti { width: 14px; height: 14px; }
.tr-hist-rad[open] .tr-hist-chevron { transform: rotate(180deg); }
.tr-hist-utvidet:empty { display: none; }

.tr-okt-detalj, .tr-hist-utvidet {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px; margin: 4px 0 10px; font-size: 12.5px;
  max-height: 55vh; overflow-y: auto;
}
.tr-detalj-dato { margin: 0 0 8px; font-weight: 700; text-transform: capitalize; color: var(--muted); }
.tr-detalj-ovelse { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; }
.tr-detalj-ovelse[open] { padding-bottom: 6px; }
.tr-detalj-ovelse summary {
  padding: 8px 0; font-size: 12.5px; font-weight: 600; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; list-style: none;
}
.tr-detalj-ovelse summary::-webkit-details-marker { display: none; }
.tr-detalj-ant { font-weight: 400; color: var(--muted); font-size: 11px; }
.tr-detalj-tabell { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.tr-detalj-tabell th { text-align: left; color: var(--muted); font-weight: 600; padding: 2px 4px; }
.tr-detalj-tabell td { padding: 2px 4px; border-top: 1px solid var(--border); }
.tr-detalj-lopetur { display: flex; gap: 12px; font-weight: 700; margin-bottom: 8px; }
.tr-detalj-garmin { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.tr-detalj-garmin .ti { width: 12px; height: 12px; }
.tr-detalj-tips { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--border); color: var(--amber); font-weight: 600; }
.tr-detalj-tips .ti { width: 13px; height: 13px; }
.tr-hist-innsikt {
  display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.tr-hist-rad:last-child, .tr-hist-innsikt:last-child { border-bottom: none; }
.tr-hist-dato { color: var(--muted); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
.tr-hist-dato .ti { width: 12px; height: 12px; }
.tr-hist-rad--lopetur .tr-hist-dato { color: var(--amber); }
.tr-hist-navn { font-weight: 600; overflow-wrap: anywhere; }
.tr-hist-tall { grid-column: 2; color: var(--muted); font-size: 11px; margin-top: -3px; overflow-wrap: anywhere; }
.tr-hist-slett {
  grid-row: 1 / 3; align-self: center; width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .15s, border-color .15s, transform .12s;
}
.tr-hist-slett .ti { width: 13px; height: 13px; }
.tr-hist-slett:active { transform: scale(.9); color: var(--red); border-color: var(--red); }
.tr-hist-innsikt span:last-child { color: var(--text); opacity: .85; line-height: 1.4; }
.tr-hist-innsikt--monster span:last-child { color: var(--amber); opacity: 1; }
.tr-kreditt { margin: 10px 0 0; font-size: 10.5px; color: var(--muted); opacity: .6; text-align: center; }

/* ── Mobil: smalere skjerm mister settabellens luft først ──────────────── */
@media (max-width: 380px) {
  .tr-settrad { grid-template-columns: 14px 1fr 1fr 1fr 64px 30px; gap: 4px; }
  .tr-input, .tr-samme { padding: 7px 3px; } /* font-size holdes på 16px selv her, se over */
  .tr-bilde { width: 68px; height: 68px; }
}