/* GRADIENTKNAPPEN - ÉN kilde (regel 11). Glass bolk 1, Sverre 29. sep.
   Lenkes av public/xpulse.html og importeres av app/globals.css (appen og
   undersidene), så forsiden og appen bruker samme fil.
   Verdiene er målt i design/xpulse-glass-utkast-design.html (--grad og
   .pill.grad) og er den samme gradienten som forsidens CTA-bånd (.cta).
   Bruk: bare på handlinger uten rolle (Start gratis prøve, Lagre, Start live,
   Fullfør), høyst én per skjerm, ALDRI i trenerpanelet (.xp-coach) - der er
   blått identiteten. «Prøv gratis som trener» er blå (#1A6FD4).
   Tekst er alltid hvit, i lys og mørk: svart på den blå enden gir under 4,5:1.
   Hover, trykk og deaktivert står ikke i designfila - vertens egne gjelder
   (løft/skala på forsiden og undersidene, opacity på .xp-pill i appen).
   Selektorlista: vertene setter egen bakgrunn/tekstfarge med samme eller
   høyere spesifisitet og lastes etter (undersidenes .lp-pill/.lp-panel-cta,
   forsidens `.nav-links a` og `.nav-links a:hover`, appens `.xp-btn.xp-primary`
   i lagrelinja), så gradienten og den
   hvite teksten må vinne over dem. */
:root { --xp-grad: linear-gradient(115deg, #F04A10 0%, #9A4A55 35%, #2268BE 78%, #1E5FAF 100%); }
.xp-btn-grad, .lp-pill.xp-btn-grad, .lp-panel-cta.xp-btn-grad,
.nav-links a.xp-btn-grad, .nav-links a.xp-btn-grad:hover, .xp-btn.xp-primary.xp-btn-grad {
  /* border-box: gradienten dekker også den gjennomsiktige kanten - ellers
     gjentas den der og gir en stripe i endene av pillen. */
  background: var(--xp-grad) border-box; border-color: transparent; color: #fff;
  box-shadow: 0 6px 22px rgba(240, 74, 16, .28);
}
/* ALDRI gradient i trenerpanelet: der er blått identiteten. En gradientknapp
   som havner i .xp-coach (treneren i utøverens skjema) blir rollens aksent. */
.xp-coach .xp-btn-grad, .xp-coach .xp-btn.xp-primary.xp-btn-grad, .xp-coach .xp-knapp--utover {
  background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 24px var(--accent-soft, transparent);
}

/* HERO-UTØVERKNAPPEN (Sverre 2. okt) - bevisst unntak fra regelen over: den er
   rollebærende OG har gradient, med treneren i blå kant ved siden av. Bare
   heroen på forsiden. Egen hero-gradient fra design/xpulse-hero-justering-design.html:
   100deg og tre stopp, litt rettere enn --xp-grad (115deg, fire stopp).
   border-box av samme grunn som over: kanten er gjennomsiktig. */
.xp-knapp--utover {
  background: linear-gradient(100deg, #F04A10 0%, #C24A44 55%, #2268BE 100%) border-box;
  border: 1.5px solid transparent; color: #fff;
  box-shadow: 0 18px 50px rgba(160, 70, 90, .35);
}
@media (max-width: 640px) {
  .xp-knapp--utover { box-shadow: 0 14px 34px rgba(160, 70, 90, .35); }
}