/* APProfile v1.0.111 – publika komponenter
   Startsida, inriktningssidor och gemensam tillgänglighet. */

/* ═══════════════════════════════════════════════════════════════════
   v1.0.110 – professionellt omtag av startsidan
   En sammanhållen,
icke-scrollbar desktopvy med tydlig hierarki.
   ═══════════════════════════════════════════════════════════════════ */
body:has(.shell[data-page="home"]),
#app:has(.shell[data-page="home"]){
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
}

/* APProfile v16.8.0 – professional workspace refinement */
:root{
  --ui-ink:#172b42;
  --ui-muted:#5f7185;
  --ui-line:#dce4ee;
  --ui-soft:#f7f9fc;
  --ui-blue:#1855f4;
  --ui-green:#16824f;
}

/* A calmer, repeatable type and spacing hierarchy in the two workspaces. */
.to-page,.program-main{color:var(--ui-ink)}
.to-page h1,.program-main h1{letter-spacing:-.035em}
.to-page h2,.program-main h2{letter-spacing:-.018em}
.to-page p,.program-main p{line-height:1.55}
.wiz-intro p,.program-simple-section-head p,.program-result-top p,
.pg-exercise-body p{color:var(--ui-muted)}
.wiz-card small,.program-simple-form small,.program-result-mode small{font-size:max(.8rem,13px)}

/* Test workspace: the global journey becomes a compact orientation rail. */
.to-page>.journey{
  align-items:center;
  gap:0;
  margin:0 0 24px;
  padding:0 2px;
}
.to-page>.journey .journey-step{
  flex:0 1 auto;
  min-width:0;
  padding:7px 9px;
  border-color:transparent;
  border-radius:10px;
  background:transparent;
  box-shadow:none;
}
.to-page>.journey .journey-step b{width:24px;height:24px}
.to-page>.journey .journey-step small{display:none}
.to-page>.journey .journey-sep{flex:1 1 42px;max-width:72px;background:#cfd9e6}
.to-page>.journey .journey-step.now{background:#edf3ff;color:var(--ui-blue)!important}
.to-page>.journey .journey-step.done{color:#315777!important}
.to-page>.journey .journey-step.next{opacity:.48}
.to-header{padding-bottom:18px;border-bottom:1px solid var(--ui-line)}
.to-header h1{margin-bottom:8px}
.to-header-lead{max-width:68ch;color:var(--ui-muted)}
.to-tabs{margin-top:18px}
.to-tab{border-radius:10px 10px 0 0}
.to-tab.active{color:var(--ui-blue)}
.wiz-card{
  border-color:var(--ui-line);
  border-radius:18px;
  box-shadow:0 12px 32px rgba(26,48,75,.055);
}
.wiz-card-body{padding-top:24px}
.wiz-track-note,.wiz-mixed-note{box-shadow:none}
.wiz-actions{border-top-color:var(--ui-line)}
.wiz-cta{min-height:50px;padding-inline:24px}

/* Programme setup: one continuous workflow instead of cards inside cards. */
.program-setup-mode{max-width:1120px;padding-top:30px}
.program-simple-hero{margin-bottom:28px}
.program-simple-hero h1{font-size:clamp(2rem,3.3vw,2.75rem)}
.program-simple-form{
  gap:0;
  overflow:visible;
  border:1px solid var(--ui-line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 18px 48px rgba(28,50,78,.065);
}
.program-stepper{
  display:flex;
  align-items:center;
  gap:10px;
  padding:17px 22px;
  border-bottom:1px solid var(--ui-line);
  background:#fbfcfe;
  border-radius:22px 22px 0 0;
}
.program-stepper span{display:flex;align-items:center;gap:8px;color:#718196;font-size:13px;font-weight:750;white-space:nowrap}
.program-stepper span b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e8edf4;color:#52667c;font-size:12px}
.program-stepper i{flex:1 1 24px;height:1px;background:#d8e0ea}
.program-stepper span.is-active,.program-simple-form:has(#programTestSessionSelect:focus) .program-stepper span:nth-of-type(1){color:var(--ui-blue)}
.program-stepper span.is-active b,.program-simple-form:has(#programTestSessionSelect:focus) .program-stepper span:nth-of-type(1) b{background:var(--ui-blue);color:#fff}
.program-simple-form:has(#programSessions:focus) .program-stepper span:nth-of-type(1),
.program-simple-form:has(#programTime:focus) .program-stepper span:nth-of-type(1),
.program-simple-form:has(.programQualityEnabled:focus) .program-stepper span:nth-of-type(1){color:#718196}
.program-simple-form:has(#programSessions:focus) .program-stepper span:nth-of-type(1) b,
.program-simple-form:has(#programTime:focus) .program-stepper span:nth-of-type(1) b,
.program-simple-form:has(.programQualityEnabled:focus) .program-stepper span:nth-of-type(1) b{background:#e8edf4;color:#52667c}
.program-simple-form:has(#programSessions:focus) .program-stepper span:nth-of-type(2),
.program-simple-form:has(#programTime:focus) .program-stepper span:nth-of-type(2),
.program-simple-form:has(.programQualityEnabled:focus) .program-stepper span:nth-of-type(3){color:var(--ui-blue)}
.program-simple-form:has(#programSessions:focus) .program-stepper span:nth-of-type(2) b,
.program-simple-form:has(#programTime:focus) .program-stepper span:nth-of-type(2) b,
.program-simple-form:has(.programQualityEnabled:focus) .program-stepper span:nth-of-type(3) b{background:var(--ui-blue);color:#fff}
.program-simple-source{
  gap:0;
  padding:18px 22px;
  border-bottom:1px solid var(--ui-line);
  background:#f7f9fc;
}
.program-simple-source>div{
  min-height:58px;
  padding:5px 18px;
  border:0;
  border-right:1px solid var(--ui-line);
  border-radius:0;
  background:transparent;
}
.program-simple-source>div:first-child{padding-left:0}
.program-simple-source>div:last-child{border-right:0}
.program-simple-section{
  margin:0 22px;
  padding:26px 0 28px;
  border:0;
  border-bottom:1px solid var(--ui-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.program-simple-section-head{margin-bottom:18px}
.program-simple-section-head>span{background:#edf3ff;color:var(--ui-blue)}
.program-simple-section-head h2{font-size:1.18rem}
.program-standard-equipment{
  display:flex;
  align-items:baseline;
  gap:5px;
  margin:0 22px;
  padding:13px 0;
  border:0;
  border-bottom:1px solid var(--ui-line);
  border-radius:0;
  background:transparent;
  color:var(--ui-muted);
  font-size:13px;
}
.program-standard-equipment b{color:var(--ui-ink)}
.program-standard-icon{display:none}
.pg-simple-quality-card{min-height:108px;border-radius:13px;box-shadow:none}
.pg-simple-quality-card:hover{transform:none;border-color:#7c9eff;background:#fbfcff}
.pg-simple-quality-card.is-selected{border-color:var(--ui-blue);background:#f1f5ff;box-shadow:0 0 0 2px rgba(24,85,244,.08)}
.pg-simple-quality-card input:checked+.pg-simple-check{border-color:var(--ui-blue);background:var(--ui-blue)}
.program-simple-submit{
  margin:0;
  padding:20px 22px;
  border:0;
  border-radius:0 0 22px 22px;
  background:#f7f9fc;
}
.program-simple-submit .btn{background:var(--ui-blue)}

/* Programme result: pass and prescription are the strongest visual anchors. */
.program-result-mode{max-width:1180px}
.program-result-top{padding-bottom:20px;border-bottom:1px solid var(--ui-line)}
.program-result-mode .pg-session{
  overflow:hidden;
  border-left:4px solid var(--ui-blue);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(28,50,78,.055);
}
.program-result-mode .pg-session-head{padding-bottom:14px;border-bottom:1px solid var(--ui-line)}
.program-result-mode .pg-exercise-row{border-bottom:1px solid #e6ebf2}
.program-result-mode .pg-exercise-row:last-child{border-bottom:0}
.program-result-mode .pg-dose-summary b{color:#123fba;font-size:.96rem}
.program-result-mode .pg-exercise-details{margin-top:8px}

/* Standard dialogs belong to the light application surface. */
.app-dialog-overlay{background:rgba(12,25,43,.48);backdrop-filter:blur(6px)}
.app-dialog-box{
  border-color:#d6e0eb;
  background:#fff;
  color:var(--ui-ink);
  box-shadow:0 28px 80px rgba(10,28,50,.28);
}
.app-dialog-title{color:var(--ui-ink)}
.app-dialog-msg{color:var(--ui-muted)}
.app-dialog-detail,.app-dialog-hint{color:#718196}
.app-dialog-input{border-color:#aebed0;background:#fff;color:var(--ui-ink)}
.app-dialog-actions{border-top-color:#e2e8f0;background:#fbfcfe}
.app-dialog-cancel{border-color:#bdc9d7;background:#fff;color:#334a62}
.app-dialog-danger{border-color:#713d45;background:linear-gradient(180deg,#2b1b22,#21161b);color:#fff}
.app-dialog-danger .app-dialog-title{color:#fff}
.app-dialog-danger .app-dialog-msg{color:#ead9dc}
.app-dialog-danger .app-dialog-detail{color:#cdb6bb}
.app-dialog-danger .app-dialog-actions{border-top-color:rgba(255,255,255,.12);background:rgba(0,0,0,.1)}
.app-dialog-danger .app-dialog-cancel{border-color:#86646b;background:transparent;color:#fff}

@media(max-width:760px){
  .to-page>.journey{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .to-page>.journey .journey-step{flex:0 0 auto}
  .to-page>.journey .journey-sep{flex:0 0 22px}
  .to-header{gap:14px}
  .program-simple-form{border-radius:17px}
  .program-stepper{overflow-x:auto;gap:7px;padding:13px 14px;border-radius:17px 17px 0 0}
  .program-stepper span{font-size:12px}
  .program-stepper i{flex:0 0 16px}
  .program-simple-source{grid-template-columns:1fr;padding:8px 15px}
  .program-simple-source>div{min-height:0;padding:10px 0;border-right:0;border-bottom:1px solid var(--ui-line)}
  .program-simple-source>div:last-child{border-bottom:0}
  .program-simple-section{margin:0 15px;padding:22px 0}
  .program-standard-equipment{align-items:flex-start;margin:0 15px;padding:12px 0;line-height:1.4}
  .program-simple-submit{
    position:sticky;
    bottom:8px;
    z-index:30;
    flex-direction:row;
    align-items:center;
    margin:8px;
    padding:10px;
    border:1px solid #d5dfeb;
    border-radius:14px;
    box-shadow:0 12px 32px rgba(23,50,77,.17);
  }
  .program-simple-submit>div small{display:none}
  .program-simple-submit>div b{font-size:13px}
  .program-simple-submit .btn{width:auto;min-width:150px;min-height:46px}
}

@media(max-width:430px){
  .program-stepper span{gap:5px}
  .program-stepper span b{width:23px;height:23px}
  .program-stepper i{display:none}
  .program-simple-submit>div{display:none}
  .program-simple-submit .btn{width:100%}
}

/* v16.8.1 – transparent and auditable session time */
.pg-time-breakdown{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px;padding:10px 12px;border:1px solid #dce5ef;border-radius:11px;background:#f7f9fc}
.pg-time-breakdown span{color:#607286;font-size:12.5px}
.pg-time-breakdown span b{color:#263f5a;font-weight:750}
.pg-session-time{max-width:245px}
.pg-session-time small{line-height:1.35}
@media(max-width:760px){.pg-time-breakdown{display:grid;grid-template-columns:1fr 1fr}.pg-session-time{max-width:none}}
.pg-short-session{display:inline-flex;margin-top:7px;padding:4px 8px;border-radius:999px;background:#eef3ff;color:#1855f4;font-size:11.5px;font-style:normal;font-weight:750}
.shell[data-page="home"]{
  height:100dvh !important;
  min-height:100dvh !important;
  overflow:hidden !important;
  background:#071321 !important;
}
.shell[data-page="home"] .footer{display:none !important}
.shell[data-page="home"] .topbar{
  position:relative !important;
  z-index:50 !important;
  height:60px !important;
  min-height:60px !important;
  background:rgba(5,15,28,.97) !important;
  border-bottom:0 !important;
  backdrop-filter:blur(18px) !important;
}
.shell[data-page="home"] .topbar-inner{
  height:60px !important;
  min-height:60px !important;
  max-width:1360px !important;
  margin:0 auto !important;
  padding:0 18px !important;
  gap:10px !important;
}
.shell[data-page="home"] .logo-compact{
  height:32px !important;
  max-width:190px !important;
}
.shell[data-page="home"] .topbar-nav-primary{
  margin-left:14px !important;
  gap:2px !important;
}
.shell[data-page="home"] .topbar-nav-primary .topbar-nav-link{
  min-height:36px !important;
  padding:7px 10px !important;
  color:rgba(255,255,255,.82) !important;
  font-size:12.5px !important;
  border-radius:9px !important;
}
.shell[data-page="home"] .topbar-nav-primary .topbar-nav-link span{
  width:18px !important;
  height:18px !important;
  color:#d8e5ff !important;
  background:rgba(255,255,255,.08) !important;
}
.shell[data-page="home"] .topbar-nav-primary .topbar-nav-link:hover,
.shell[data-page="home"] .topbar-nav-primary .topbar-nav-link.active{
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
}
.shell[data-page="home"] .topbar-area-chip{display:none !important}
.shell[data-page="home"] .nav-right{gap:7px !important}
.shell[data-page="home"] .language-switch,
.shell[data-page="home"] .nav-user,
.shell[data-page="home"] .nav-register{
  min-height:36px !important;
  border-color:rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.04) !important;
  color:#fff !important;
}
.shell[data-page="home"] .language-switch .lang-option.active{
  background:#fff !important;
  color:#071321 !important;
}

.home-pro{
  height:calc(100dvh - 60px);
  min-height:0;
  background:#071321;
}
.home-pro-stage{
  position:relative;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) 42px;
  overflow:hidden;
  color:#fff;
  isolation:isolate;
}
.home-pro-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  background-image:url('hero-performance-lab-v27.webp?v=1692');
  background-size:cover;
  background-position:center 44%;
  transform:scale(1.01);
}
.home-pro-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(90deg,rgba(4,14,27,.98) 0%,rgba(4,14,27,.91) 34%,rgba(4,14,27,.62) 62%,rgba(4,14,27,.24) 100%),
    linear-gradient(180deg,rgba(4,14,27,.12) 0%,rgba(4,14,27,.10) 55%,rgba(4,14,27,.74) 100%);
}
.home-pro-inner{
  width:min(1280px,calc(100vw - 40px));
  min-height:0;
  margin:0 auto;
  padding:22px 0 16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 350px;
  grid-template-rows:minmax(0,1fr) auto;
  column-gap:32px;
  row-gap:16px;
  align-items:stretch;
}
.home-pro-copy{
  min-width:0;
  align-self:center;
  max-width:720px;
  padding:0 0 4px;
}
.home-pro-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:30px;
  padding:5px 12px 5px 6px;
  border:1px solid rgba(89,147,255,.50);
  border-radius:999px;
  background:rgba(24,76,166,.24);
  color:#cbdcff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.home-pro-kicker span{
  display:grid;
  place-items:center;
  min-width:40px;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  background:#2f67df;
  color:#fff;
  letter-spacing:.06em;
}
.home-pro-copy h1{
  max-width:780px;
  margin:14px 0 12px;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(40px,4.2vw,58px);
  font-weight:900;
  line-height:1.06;
  letter-spacing:-.048em;
  text-transform:none;
  text-wrap:balance;
}
.home-pro-copy p{
  max-width:650px;
  margin:0;
  color:rgba(224,234,247,.82);
  font-size:15px;
  line-height:1.58;
}
.home-pro-actions{margin-top:18px}
.home-pro-primary{
  min-height:44px;
  padding:0 20px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:12px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font:inherit;
  font-size:13.5px;
  font-weight:800;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}
.home-pro-primary:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.30);
}

.home-pro-score{
  grid-column:2;
  grid-row:1;
  min-height:0;
  padding:20px 20px 18px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 0%,rgba(164,133,255,.25),transparent 38%),
    linear-gradient(155deg,rgba(113,127,151,.54),rgba(17,32,46,.83));
  box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(24px) saturate(1.05);
  display:flex;
  flex-direction:column;
}
.home-pro-score-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:rgba(225,233,245,.70);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.home-pro-score-head b{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:11.5px;
  letter-spacing:0;
  text-transform:none;
}
.home-pro-score-main{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin:10px 0 6px;
}
.home-pro-score-main strong{
  color:#fff;
  font-family:var(--font-display);
  font-size:64px;
  font-weight:900;
  line-height:.84;
  letter-spacing:-.055em;
}
.home-pro-score-main span{
  padding-bottom:7px;
  color:rgba(227,235,246,.64);
  font-size:14px;
  font-weight:700;
}
.home-pro-score-level{
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:rgba(244,247,252,.87);
  font-size:10.5px;
  font-weight:800;
}
.home-pro-metrics{
  display:grid;
  gap:13px;
  margin-top:19px;
}
.home-pro-metric{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 28px;
  align-items:center;
  gap:10px;
  color:rgba(230,237,247,.79);
  font-size:12.5px;
  font-weight:700;
}
.home-pro-metric i{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.14);
}
.home-pro-metric u{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#5a8df8,#8d67e8 55%,#45c3a3);
  text-decoration:none;
}
.home-pro-metric b{
  color:#fff;
  text-align:right;
  font-size:12.5px;
}
.home-pro-areas{
  grid-column:1 / -1;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.home-pro-area{
  position:relative;
  min-width:0;
  min-height:112px;
  padding:14px 14px 13px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(27,43,62,.90),rgba(12,25,40,.89));
  color:#fff;
  text-align:left;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 14px 36px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.home-pro-area::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:var(--area);
  opacity:.85;
}
.home-pro-area:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--area) 70%,white 30%);
  background:linear-gradient(160deg,rgba(35,52,73,.94),rgba(15,29,45,.94));
}
.home-pro-area-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid color-mix(in srgb,var(--area) 65%,transparent);
  border-radius:11px;
  background:var(--area-soft);
  color:var(--area);
}
.home-pro-area-svg{width:18px;height:18px;stroke:currentColor}
.home-pro-area-copy{
  display:block;
  min-width:0;
  margin-top:9px;
}
.home-pro-area-copy b{
  display:block;
  color:#fff;
  font-size:14px;
  font-weight:850;
  line-height:1.15;
}
.home-pro-area-copy small{
  margin-top:5px;
  color:rgba(215,226,239,.70);
  font-size:10.5px;
  line-height:1.35;
  -webkit-box-orient:vertical;
}
.home-pro-area-meta{
  display:block;
  color:var(--area);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.home-pro-area-arrow{
  position:absolute;
  top:16px;
  right:15px;
  color:var(--area);
  font-size:16px;
}

.home-pro-utility{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(3,11,22,.84);
  backdrop-filter:blur(18px);
}
.home-pro-utility a{
  min-height:30px;
  padding:0 15px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:rgba(219,230,244,.72);
  font:inherit;
  font-size:11.5px;
  font-weight:800;
  cursor:pointer;
}
.home-pro-utility a + a{border-left:1px solid rgba(255,255,255,.12);border-radius:0}
.home-pro-utility a:hover{color:#fff;background:rgba(255,255,255,.05)}
.home-pro-version{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 13px;
  border-left:1px solid rgba(255,255,255,.12);
  color:rgba(219,230,244,.62);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
}

@media(max-width:1100px){
  .home-pro-inner{
    width:min(100%,calc(100vw - 28px));
    grid-template-columns:minmax(0,1fr) 310px;
    column-gap:20px;
    padding-top:18px;
  }
  .home-pro-copy h1{font-size:clamp(36px,4.2vw,52px)}
  .home-pro-copy p{font-size:13.5px;line-height:1.5}
  .home-pro-score{padding:17px}
  .home-pro-score-main strong{font-size:56px}
  .home-pro-area{min-height:104px;padding:12px}
}

@media(max-height:660px) and (min-width:901px){
  .home-pro-inner{padding-top:14px;padding-bottom:10px;row-gap:12px}
  .home-pro-kicker{min-height:27px;font-size:9.5px}
  .home-pro-copy h1{margin:10px 0 8px;font-size:clamp(34px,4vw,50px)}
  .home-pro-copy p{font-size:12.5px;line-height:1.46;max-width:610px}
  .home-pro-actions{margin-top:13px}
  .home-pro-primary{min-height:40px}
  .home-pro-score{padding:16px 17px 14px;border-radius:21px}
  .home-pro-score-main{margin-top:8px}
  .home-pro-score-main strong{font-size:52px}
  .home-pro-metrics{gap:10px;margin-top:14px}
  .home-pro-area{min-height:94px;padding:11px 12px}
  .home-pro-area-icon{width:30px;height:30px}
  .home-pro-area-copy{margin-top:7px}
  .home-pro-area-meta{margin-top:5px}
}

@media(max-width:900px){
  .home-pro-inner{
  grid-template-columns:1fr;
  grid-template-rows:auto auto auto;
}
  .home-pro-copy{align-self:start}
  .home-pro-score{grid-column:1;grid-row:2;min-height:330px}
  .home-pro-areas{grid-column:1;grid-row:3;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .home-pro-inner{width:calc(100vw - 24px);padding-top:18px}
  .home-pro-copy h1{font-size:36px;line-height:1.1}
  .home-pro-copy p{font-size:13.5px}
  .home-pro-areas{grid-template-columns:1fr}
  .home-pro-area{min-height:104px}
  .home-pro-utility a{padding:0 9px;font-size:10.5px}
}

/* v1.0.110 finjustering: exempelkortet ska vara kompakt, inte en tom helkolumn. */
.home-pro-score{
  align-self:center !important;
  height:clamp(320px,52vh,390px);
}
@media(max-height:660px) and (min-width:901px){
  .home-pro-score{height:320px}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.111 – kompakta och enhetliga inriktningssidor
   ═══════════════════════════════════════════════════════════════ */
.track-v111{
  --track:#4f7cff;
  --track-soft:rgba(79,124,255,.16);
  min-height:calc(100dvh - 68px);
  padding:28px 24px 64px;
  background:
    radial-gradient(circle at 78% 6%,color-mix(in srgb,var(--track) 22%,transparent),transparent 30%),
    linear-gradient(180deg,#07111f 0%,#0b1728 46%,#f3f6fb 46%,#f3f6fb 100%);
}
.track-v111-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);
  gap:28px;
  max-width:1180px;
  min-height:360px;
  margin:0 auto;
  padding:40px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;
  background:linear-gradient(90deg,rgba(4,13,27,.96) 0%,rgba(4,13,27,.84) 48%,rgba(4,13,27,.54) 100%);
  box-shadow:0 28px 72px rgba(0,0,0,.27);
}
.track-v111-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--track-image);
  background-size:cover;
  background-position:center;
  opacity:.45;
  filter:saturate(.9) contrast(1.05);
}
.track-v111-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#07111f 0%,rgba(7,17,31,.92) 50%,rgba(7,17,31,.55) 100%);
}
.track-v111-hero-copy{align-self:center;max-width:720px}
.track-v111-back{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0;
  border:0;
  background:transparent;
  color:rgba(229,237,249,.72);
  font:inherit;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}
.track-v111-back:hover{color:#fff}
.track-v111-badge{
  display:table;
  margin-top:18px;
  padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--track) 58%,transparent);
  border-radius:999px;
  background:var(--track-soft);
  color:#fff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.track-v111-hero h1{
  max-width:15ch;
  margin:15px 0 12px;
  color:#fff;
  font-size:clamp(34px,4.4vw,58px);
  line-height:1.06;
  letter-spacing:-.045em;
  text-transform:none;
}
.track-v111-hero-copy>p{
  max-width:52ch;
  margin:0;
  color:rgba(222,231,244,.79);
  font-size:16px;
  line-height:1.65;
  text-wrap:balance;
}
@media (min-width:821px){
  .track-v111-hero-copy>p{
    min-height:calc(2 * 1.65em);
  }
}
.track-v111-action{
  align-self:center;
  padding:25px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  background:rgba(10,25,43,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}
.track-v111-action small{
  color:color-mix(in srgb,var(--track) 60%,white 40%);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.track-v111-action h2{margin:8px 0 8px;color:#fff;font-size:25px;line-height:1.1;text-transform:none}
.track-v111-action p{margin:0;color:rgba(220,230,244,.72);font-size:13.5px;line-height:1.55}
.track-v111-action a{
  width:100%;
  margin-top:18px;
  border:0;
  border-radius:12px;
  background:var(--track);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  box-shadow:0 14px 30px color-mix(in srgb,var(--track) 30%,transparent);
}
.track-v111-action a:hover{filter:brightness(1.08)}
.track-v111-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  max-width:1100px;
  margin:22px auto 0;
}
.track-v111-summary article{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:start;
  min-height:94px;
  padding:18px;
  border:1px solid #d9e2ef;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 28px rgba(17,35,59,.07);
}
.track-v111-summary article>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:color-mix(in srgb,var(--track) 13%,white 87%);
  color:var(--track);
  font-size:13px;
  font-weight:900;
}
.track-v111-summary p{margin:1px 0 0;color:#36455b;font-size:13px;line-height:1.55}
.track-v111-example{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);
  gap:20px;
  max-width:1100px;
  margin:22px auto 0;
}
.track-v111-about,
.track-v111-score,
.track-v111-profiles{
  border:1px solid #d9e2ef;
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 34px rgba(17,35,59,.07);
}
.track-v111-about{padding:28px}
.track-v111-about>span,
.track-v111-profiles>div:first-child>span{
  color:var(--track);
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.track-v111-about h2,
.track-v111-profiles h2{margin:8px 0 10px;color:#0b182b;font-size:27px;line-height:1.12;text-transform:none}
.track-v111-about p,
.track-v111-profiles p{margin:0;color:#5d6c81;font-size:14.5px;line-height:1.68}
.track-v111-score{padding:24px;background:linear-gradient(160deg,#13233a,#0a1728);color:#fff}
.track-v111-score-head{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#9fb0c9;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.track-v111-score-head b{padding:7px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#fff;letter-spacing:0;text-transform:none}
.track-v111-score h3{margin:17px 0 4px;color:#fff;font-size:22px;text-transform:none}
.track-v111-score>p{margin:0 0 18px;color:#aebdd1;font-size:12px}
.track-v111-score>div:last-child{display:grid;gap:12px}
.track-v111-bar{display:grid;grid-template-columns:92px minmax(0,1fr) 28px;align-items:center;gap:10px;color:#dbe4ef;font-size:12px;font-weight:700}
.track-v111-bar i{height:6px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.13)}
.track-v111-bar u{display:block;height:100%;border-radius:999px;text-decoration:none}
.track-v111-bar b{text-align:right;color:#fff}
.track-v111-profiles{
  display:grid;
  grid-template-columns:minmax(220px,.55fr) minmax(0,1.45fr);
  gap:20px;
  align-items:center;
  max-width:1100px;
  margin:22px auto 0;
  padding:24px 26px;
}
.track-v111-profiles h2{font-size:23px;margin-bottom:5px}
.track-v111-profiles p{font-size:13px}
.track-v111-chips{display:flex;gap:8px;overflow-x:auto;padding:3px 1px 7px;scrollbar-width:thin}
.track-v111-chip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:9px 12px;border:1px solid #dce5f1;border-radius:999px;background:#f7f9fc;color:#26364d;font-size:12px}
.track-v111-chip b{font-weight:800}
.track-v111-chip-svg{width:15px;height:15px;stroke:var(--track)}

@media(max-width:900px){
  .track-v111{padding:18px 16px 44px;background:linear-gradient(180deg,#07111f 0%,#0b1728 34%,#f3f6fb 34%,#f3f6fb 100%)}
  .track-v111-hero{grid-template-columns:1fr;min-height:auto;padding:28px}
  .track-v111-action{width:min(100%,520px)}
  .track-v111-summary{grid-template-columns:1fr}
  .track-v111-example{grid-template-columns:1fr}
  .track-v111-profiles{grid-template-columns:1fr}
}
@media(max-width:560px){
  .track-v111{padding:12px 10px 34px}
  .track-v111-hero{padding:22px 18px;border-radius:21px}
  .track-v111-hero h1{font-size:32px}
  .track-v111-hero-copy>p{font-size:14px}
  .track-v111-action{padding:19px}
  .track-v111-summary,
  .track-v111-example,
  .track-v111-profiles{margin-top:12px}
  .track-v111-about,
  .track-v111-score,
  .track-v111-profiles{border-radius:18px}
  .track-v111-profiles{padding:21px 18px}
}

/* Gemensam tangentbordsfokus och läsbarhet */
:where(button,
a,
input,
select,
textarea,
summary,
[role="button"]):focus-visible{
  outline:3px solid #7fb0ff !important;
  outline-offset:3px !important;
}
:where(button,
[role="button"],
summary){touch-action:manipulation}
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.111 – stegvis programgenerator
   ═══════════════════════════════════════════════════════════════ */
.program-panel-wizard{padding:20px !important}
.pg-steps{display:grid;gap:12px;margin-top:14px}
.pg-step{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
}
.pg-step>summary{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 18px;
  gap:12px;
  align-items:center;
  min-height:66px;
  padding:12px 14px;
  list-style:none;
  cursor:pointer;
  background:linear-gradient(180deg,#fff,#f8fafc);
}
.pg-step>summary::-webkit-details-marker{display:none}
.pg-step>summary::after{content:'+';color:var(--muted);font-size:20px;font-weight:500;text-align:center}
.pg-step[open]>summary::after{content:'−'}
.pg-step>summary>span{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:11px;
  background:#eaf1ff;
  color:var(--blue);
  font-size:13px;
  font-weight:900;
}
.pg-step>summary b,
.pg-step>summary small{display:block}
.pg-step>summary b{color:var(--navy);font-size:14px}
.pg-step>summary small{margin-top:3px;color:var(--muted);font-size:11.5px;font-weight:500;line-height:1.35}
.pg-step-body{padding:16px;border-top:1px solid var(--line)}
.pg-step-body .pg-form-grid{margin:0}
.pg-step .pg-constraints{margin:0 0 18px}
.pg-step .pg-score-head{margin-top:4px}
.pg-step-followup{border-color:#bfd4ff;background:#f8fbff}
.program-actions-sticky{
  position:sticky;
  bottom:10px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:16px;
  padding:12px;
  border:1px solid #ccd8ea;
  border-radius:15px;
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 32px rgba(15,31,52,.12);
  backdrop-filter:blur(14px);
}
.program-actions-sticky small{color:var(--muted);font-size:11.5px}
@media(max-width:720px){
  .program-panel-wizard{padding:14px !important}
  .pg-step>summary{grid-template-columns:34px minmax(0,1fr) 18px;padding:11px 12px}
  .pg-step-body{padding:13px}
  .program-actions-sticky{position:static;flex-direction:column;align-items:stretch}
  .program-actions-sticky .btn{width:100%}
}

.skip-link{
  transform:translateY(-160%);
}
.skip-link:focus{transform:translateY(0)}
.local-data-card{margin-top:18px;padding:24px}
.local-data-card h2{margin:7px 0 8px;font-size:22px;text-transform:none}
.local-data-card p{margin:0 0 16px;color:var(--muted);line-height:1.65}

/* v1.0.142: den här filen tvingade tillbaka hela menyraden på mobil
   (.topbar-nav{display:flex !important}) och krympte länkarna till ikoner –
   det var det som gjorde headern rörig. Toppraden på telefon och surfplatta
   innehåller nu bara logga + synk-bricka + hamburgare; resten ligger i
   panelen (.mnav-panel i styles.css). */
@media(max-width:900px){
  .topbar-inner-v103{min-height:58px !important;padding:0 12px !important;gap:10px !important}
  .topbar .logo-compact{height:28px !important;max-width:150px !important}
  .topbar .topbar-nav,
  .topbar .topbar-nav-primary,
  .topbar .language-switch,
  .topbar .nav-user,
  .topbar .nav-login,
  .topbar .nav-register{display:none !important}
  .topbar .nav-burger{display:inline-flex !important}
  /* Startsidans topprad ligger genomskinlig över den mörka hjälten. Den ljusa
     plattan syns bra där också – vi lyfter bara kontrasten på kanten. */
  .shell[data-page="home"] .topbar:not(.topbar-solid) .nav-burger{
    border-color:rgba(255,255,255,.55);
    box-shadow:0 2px 14px rgba(0,0,0,.35);
  }
}
@media(max-width:430px){
  .topbar .logo-compact{max-width:120px !important;height:25px !important}
}

/* v1.0.111 – länkbeteende efter tillgänglighetsomläggningen */
.logo-btn,
.topbar-nav-link,
.home-pro-area,
.home-pro-utility a,
.track-v111-back,
.track-v111-action a{text-decoration:none}
.home-pro-utility a{display:inline-flex;align-items:center;justify-content:center}

/* v1.0.112 – avancerat steg i programgeneratorn (volym + dagsform flyttade hit) */
.pg-step-body .pg-advanced-grid{margin:0 0 12px}

/* ═══════════════════════════════════════════════════════════════
   v1.0.114 – startsidan: exempelanalysen och inriktningskorten
   i samma rutnät.

   Tidigare låg .home-pro-areas på grid-column:1 / -1 och spände
   alltså hela bredden, in under analyskortets 350px-kolumn. Kortens
   fyra kolumngränser hade därmed ingen relation till analyskortet.

   Nu: korten ligger i kolumn 1 (samma bredd som ingressen ovanför)
   och analyskortet spänner båda raderna med underkanten linjerad
   mot kortens underkant. Kortens högerkant = analyskortets vänsterkant.
   ═══════════════════════════════════════════════════════════════ */
@media(min-width:901px){
  .home-pro-inner{
    grid-template-columns:minmax(0,1fr) 330px;
    column-gap:28px;
    row-gap:18px;
  }
  .home-pro-areas{
    grid-column:1;
    grid-row:2;
  }
  .home-pro-score{
    grid-column:2;
    grid-row:1 / -1;
    align-self:end !important;
    height:clamp(300px,48vh,368px);
  }
}
@media(min-width:901px) and (max-width:1200px){
  .home-pro-inner{grid-template-columns:minmax(0,1fr) 296px;column-gap:20px}
  /* smalare kort: låt rubriken radbrytas i stället för att kapas */
  .home-pro-area-copy b{
    display:-webkit-box;
    white-space:normal;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
}
@media(min-width:901px) and (min-height:661px){
}
@media(min-width:901px) and (max-height:660px){
  .home-pro-score{height:clamp(276px,42vh,300px)}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.115 – CTA-knappen på inriktningssidorna

   .track-v111-action a är ett <a>, alltså inline. width:100%,
   min-height:46px och text-align:center är verkningslösa på ett
   inline-element, och ingen padding var satt. Rutan krympte därför
   till textens egen rad och texten låg dikt an mot kanten.

   Regeln var skriven som om elementet vore en <button>. Sätter
   display:flex så att den befintliga min-höjden och bredden får
   verkan, plus horisontell padding som fallback om bredden krymper.
   ═══════════════════════════════════════════════════════════════ */
.track-v111-action a{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  min-height:48px;
  line-height:1.25;
  box-sizing:border-box;
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.116 – inriktningskorten visar hela beskrivningen

   Beskrivningen klipptes av -webkit-line-clamp:2 (och :1 under
   1200px, tillagt i v114). Klippningen är borttagen – texten flödar
   nu fritt. Den längsta beskrivningen (Physical Performance, 73
   tecken) kräver 3 rader vid samtliga desktopbredder.

   Korthöjden höjs därefter. Korten är grid-items och sträcks till
   den högsta i raden, så alla fyra behåller samma höjd automatiskt.
   Höjdbudgeten mot den låsta 100dvh-scenen är kontrollräknad: minst
   346px kvar till ingressen, som behöver ~300px.
   ═══════════════════════════════════════════════════════════════ */
.home-pro-area-copy small{
  display:block;
  overflow:visible;
  -webkit-line-clamp:none;
}
.home-pro-area-copy b{
  overflow:visible;
  white-space:normal;
  text-overflow:clip;
}
@media(min-width:901px) and (min-height:661px){
  .home-pro-area{min-height:156px}
}
@media(min-width:901px) and (max-height:660px){
  .home-pro-area{min-height:148px}
  .home-pro-area-copy small{-webkit-line-clamp:none}
}
@media(min-width:901px) and (max-width:1200px){
  .home-pro-area-copy small{-webkit-line-clamp:none}
  .home-pro-area{min-height:172px}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.117 – profilraden linjerar mellan korten

   .home-pro-area var display:block, så .home-pro-area-meta följde
   direkt efter beskrivningen. Beskrivningarna är olika långa (2–3
   rader) och profilraden hamnade därför på olika höjd i varje kort.

   Kortet blir nu en flex-kolumn och profilraden får margin-top:auto.
   Eftersom korten är grid-items och sträcks till den högsta i raden
   bottnar profilraden på exakt samma linje i alla fyra.
   ═══════════════════════════════════════════════════════════════ */
.home-pro-area{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.home-pro-area-copy{width:100%}
.home-pro-area-meta{
  margin-top:auto;
  padding-top:10px;
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.118 – enhetliga sidheaders (samma som Varför testa?)
   Accentstreck · badge · rubrik · två rader ingress

   v1.0.119 – lägre band. 340 px var för högt: bandet tog en tredjedel
   av skärmen innan innehållet ens började. Höjden styrs nu av innehållet
   med ett golv på 236 px, så att alla sidor fortfarande får exakt samma
   ram oavsett hur långa rubrikerna är.
   ═══════════════════════════════════════════════════════════════ */
.shell:not([data-page="home"]) .page-hero{
  height:auto !important;
  min-height:236px !important;
  max-height:none !important;
}
.shell:not([data-page="home"]) .page-hero-inner{
  height:auto !important;
  min-height:236px !important;
  max-height:none !important;
  justify-content:center !important;
  padding-top:32px !important;
  padding-bottom:30px !important;
}
.page-hero-inner::before{margin-bottom:12px !important}
.shell:not([data-page="home"]) .page-hero h1{margin-top:12px !important}
.page-hero-lead{
  color:rgba(226,235,249,.86);
  font-size:17px;
  line-height:1.55;
  margin:14px 0 0;
  max-width:52ch;
  text-wrap:balance;
}
@media (min-width:821px){
  .page-hero h1{ white-space:nowrap; }
  .page-hero-lead{
    min-height:calc(2 * 1.55em);
    font-size:clamp(15px,1.35vw,17px);
  }
}
@media (max-width:820px){
  .shell:not([data-page="home"]) .page-hero,
  .shell:not([data-page="home"]) .page-hero-inner{
    min-height:184px !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
  }
  .page-hero h1{ white-space:normal; }
  .page-hero-lead{
    max-width:100%;
    min-height:0;
    font-size:15.5px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.119 – Resan under "Varför testa?"

   Fem steg som ska läsas som en väg, inte som fem lösa kort. Stegen
   ligger i ett rutnät med fem lika breda kolumner; linjen dras med en
   ::before på spåret och löper genom nodernas mittpunkt, så den håller
   även om texterna blir olika långa.

   Brytpunkter:
     ≥ 1101 px   fem steg på rad, vågrät linje
     901–1100    tre + två steg, vågrät linje per rad
     ≤ 900 px    lodrät tidslinje – samma ordning, en kolumn
   ═══════════════════════════════════════════════════════════════ */
.journey{padding:26px 26px 22px}
.journey-head{margin-bottom:18px}
.journey-head h2{margin:6px 0 0;font-size:26px;color:var(--navy);text-transform:none}
.journey-track{
  position:relative;
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
}
.journey-step{position:relative;display:flex;flex-direction:column;min-width:0}
.journey-node{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:none;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  box-shadow:0 0 0 5px var(--surface),0 8px 18px rgba(24,85,244,.24);
}
.journey-node b{font-size:14px;font-weight:900;line-height:1}
.journey-body{padding-top:14px}
.journey-kicker{
  display:block;
  color:var(--blue);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.journey-step h3{
  margin:6px 0 6px;
  color:var(--navy);
  font-size:16px;
  line-height:1.25;
  text-transform:none;
}
.journey-step p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

@media(min-width:901px){
  /* Linjen genom nodernas mitt (19px = halva noden). */
  .journey-track::before{
    content:"";
    position:absolute;
    top:19px;
    left:19px;
    right:19px;
    height:2px;
    background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--blue) 22%,transparent));
    border-radius:2px;
  }
  /* Pilspets i slutet av resan. */
  .journey-track::after{
    content:"";
    position:absolute;
    top:14px;
    right:12px;
    width:9px;
    height:9px;
    border-top:2px solid color-mix(in srgb,var(--blue) 45%,transparent);
    border-right:2px solid color-mix(in srgb,var(--blue) 45%,transparent);
    transform:rotate(45deg);
  }
}
@media(min-width:901px) and (max-width:1100px){
  .journey-track{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:26px}
  .journey-track::before,
  .journey-track::after{display:none}
  .journey-step::before{
    content:"";
    position:absolute;
    top:19px;
    left:38px;
    right:-18px;
    height:2px;
    background:color-mix(in srgb,var(--blue) 28%,transparent);
  }
  .journey-step:nth-child(3)::before,
  .journey-step:last-child::before{display:none}
}
@media(max-width:900px){
  .journey{padding:22px 20px 18px}
  .journey-track{grid-template-columns:1fr;gap:0}
  .journey-step{flex-direction:row;gap:14px;padding-bottom:20px}
  .journey-step:last-child{padding-bottom:0}
  /* Lodrät linje från nodens underkant till nästa nod. */
  .journey-step:not(:last-child)::before{
    content:"";
    position:absolute;
    top:38px;
    bottom:0;
    left:18px;
    width:2px;
    background:color-mix(in srgb,var(--blue) 26%,transparent);
  }
  .journey-body{padding-top:2px}
  .journey-step h3{font-size:15.5px}
}

/* Hjälptext under Träningsupplägg: vad typen faktiskt tränar och dess dos. */
.pg-type-hint{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

/* Toast: förklarande besked (t.ex. varför ett program sparades lokalt i stället
   för i molnet) är hela meningar. Utan bredd och radbrytning sköts de ut ur
   skärmen på mobil. */
.toast{
  max-width:min(560px,calc(100vw - 32px));
  text-align:center;
  line-height:1.45;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.123 – ALLA HEADERS MED BLÅ RAM ÄR IDENTISKA

   Ett accentstreck, en badge, EN rubrik och TVÅ textrader. Inget annat.

   Höjden var förut olika från sida till sida, eftersom ingressen kunde bli
   en, två eller tre rader beroende på hur lång texten råkade vara. Två saker
   krävdes för att fixa det:

     1. Texterna. Alla 28 ingresser (svenska och engelska) ligger nu på
        60–110 tecken, vilket ger exakt två rader vid 52ch. Release-grinden
        underkänner en ingress som hamnar utanför intervallet.
     2. Måtten här. Samma bredd, samma radhöjd och samma reserverade
        tvåradshöjd för varenda header – inklusive programsidan, som tidigare
        hade en egen bredd (760 px) och därför bröt raderna på ett annat ställe.

   Ingressen klipps inte. Blir texten mot förmodan längre växer bandet i
   stället för att kapa meningen på mitten.
   ═══════════════════════════════════════════════════════════════ */
.shell:not([data-page="home"]) .page-hero p.page-hero-lead,
.shell[data-page="program"] .program-page-hero p.page-hero-lead{
  max-width:52ch;
  text-wrap:balance;
  line-height:1.55;
}
@media (min-width:821px){
  /* Två rader reserveras alltid,
  så bandet är lika högt även om en text
     skulle bli kort. */
  .shell:not([data-page="home"]) .page-hero p.page-hero-lead,
  .shell[data-page="program"] .program-page-hero p.page-hero-lead{
    min-height:calc(2 * 1.55em);
    max-width:52ch;
  }
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.124 – STARTSIDAN PÅ MOBIL OCH SURFPLATTA

   Två fel:

   1. Texten flöt ihop högst upp. Rubriken hade line-height 1.02 på telefon –
      på tre rader satt de bokstavligen i varandra, och avståndet ned till
      ingressen var mindre än radavståndet inuti rubriken.

   2. Startsidan var flera skärmar hög. Kort staplades i en kolumn med
      överskrivningen `overflow:auto !important`, så man fick skrolla förbi
      exempelkortet innan man ens såg inriktningarna – som är det man ska välja.

   Nu är startsidan EN skärm på både telefon och surfplatta. Måtten är
   vh-relativa, så innehållet krymper med skärmen i stället för att spilla över
   kanten. På telefon utgår exempelanalysen: den är illustration, och det som
   ska rymmas är rubriken, ingressen, de fyra inriktningarna och menyn.

   Liggande telefon (låg höjd) får skrolla – där går det inte att rymma
   innehållet utan att göra texten oläslig.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  body:has(.shell[data-page="home"]),
  #app:has(.shell[data-page="home"]),
  .shell[data-page="home"]{
    height:100dvh !important;
    min-height:100dvh !important;
    overflow:hidden !important;
  }
  .home-pro{height:calc(100dvh - 60px);min-height:0}
  .home-pro-stage{
    height:100%;
    min-height:0;
    grid-template-rows:minmax(0,1fr) 42px;
    overflow:hidden;
  }
  .home-pro-inner{
    height:100%;
    min-height:0;
    align-content:center;
    padding:clamp(12px,2.4vh,22px) 0 clamp(10px,2vh,18px);
    row-gap:clamp(12px,2.2vh,20px);
  }

  /* Luften högst upp: rubriken får andas igen. */
  .home-pro-kicker{min-height:26px;font-size:9.5px;letter-spacing:.12em}
  .home-pro-copy h1{
    margin:clamp(10px,1.8vh,16px) 0 clamp(8px,1.4vh,12px);
    font-size:clamp(25px,4.4vh,38px);
    line-height:1.14;                    /* var 1.02 – därav ihopflytningen */
    text-wrap:balance;
  }
  .home-pro-copy p{
    margin:0;
    font-size:clamp(12.5px,1.75vh,14.5px);
    line-height:1.5;
  }
  .home-pro-actions{margin-top:clamp(10px,1.8vh,16px)}
  .home-pro-primary{min-height:clamp(38px,5.4vh,46px)}
}

/* ── Surfplatta: en skärm, exempelkortet kvar bredvid inriktningarna ── */
@media(min-width:701px) and (max-width:900px){
  .home-pro-inner{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    column-gap:20px;
  }
  .home-pro-copy{grid-column:1 / -1;grid-row:1;align-self:start;max-width:none}
  .home-pro-score{
    grid-column:1;grid-row:2;
    align-self:stretch !important;
    height:auto;
    min-height:0;
    padding:16px 18px;
  }
  .home-pro-score-main strong{font-size:clamp(38px,6vh,52px)}
  .home-pro-areas{
    grid-column:2;grid-row:2;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    align-content:stretch;
  }
  .home-pro-area{min-height:0;padding:11px 12px}
  .home-pro-area-copy small{-webkit-line-clamp:2}
}

/* ── Telefon: en skärm. Exempelanalysen utgår, inriktningarna är rader ── */
@media(max-width:700px){
  .home-pro-inner{
    width:calc(100vw - 24px);
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,auto);
  }
  .home-pro-score{display:none}
  .home-pro-copy{grid-column:1;grid-row:1;align-self:start;max-width:none}
  .home-pro-areas{
    grid-column:1;grid-row:2;
    grid-template-columns:1fr;
    gap:clamp(7px,1.2vh,11px);
  }
  /* Kortet blir en rad: ikon · namn och antal · pil. Beskrivningen utgår –
     den är det första som får ge vika när allt ska rymmas på en skärm. */
  .home-pro-area{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    column-gap:12px;
    min-height:clamp(50px,7.4vh,64px);
    padding:clamp(8px,1.3vh,12px) 40px clamp(8px,1.3vh,12px) 12px;
  }
  .home-pro-area-icon{width:32px;height:32px;margin:0}
  .home-pro-area-copy{margin:0}
  .home-pro-area-copy b{font-size:14px}
  .home-pro-area-copy small{display:none}
  .home-pro-area-meta{
    grid-column:2;
    margin:2px 0 0;
    font-size:8.5px;
  }
  .home-pro-area-arrow{top:50%;right:14px;transform:translateY(-50%)}
  .home-pro-utility a{padding:0 10px;font-size:10.5px}
  .home-pro-version{padding:0 9px;font-size:9.5px}
}

/* Liggande telefon: för låg för att rymma något. Låt sidan skrolla i stället
   för att pressa texten till oläslighet. */
@media(max-width:900px) and (max-height:560px){
  body:has(.shell[data-page="home"]),
  #app:has(.shell[data-page="home"]),
  .shell[data-page="home"]{
    height:auto !important;
    min-height:100dvh !important;
    overflow:auto !important;
  }
  .home-pro,
  .home-pro-stage{height:auto;min-height:calc(100dvh - 60px)}
  .home-pro-stage{grid-template-rows:auto 42px;overflow:visible}
  .home-pro-inner{height:auto;padding:20px 0 16px}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.128 – SIFFROR OCH LÅNGA ORD

   1. SIFFRORNA HOPPADE. Inte en enda regel i hela produkten satte
      `font-variant-numeric: tabular-nums` – i ett mätverktyg. DM Sans har
      proportionella siffror som standard: en etta är smalare än en nolla. Följden:

        · poäng i en tabellkolumn står inte under varandra
        · ett värde som går från 9 till 10 knuffar allt i raden i sidled
        · en räknare som tickar ser ostadig ut

      Tabulära siffror är lika breda. Kolumner linjerar, och ett tal som ändras
      byter siffra utan att flytta något. Det gäller siffror – bokstäverna påverkas
      inte, så regeln kan ligga brett.

   2. LÅNGA SVENSKA ORD SPRÄNGDE SMALA YTOR. "Kombinationsträning",
      "Elitförberedande", "Personuppgiftsansvarig", "utvecklingsriktning" – i en
      smal tabellcell eller ett mobilkort finns ingen brytpunkt, så ordet sticker
      ut ur sin behållare eller tvingar fram vågrät skroll. Med `hyphens:auto`
      avstavas de på rätt ställe (sidan är märkt lang="sv"), och `overflow-wrap`
      är sista utvägen om avstavning inte går.
   ═══════════════════════════════════════════════════════════════ */
table,
input,
select,
.score,
.bar,
[class*="score"],
[class*="credit"],
[class*="count"],
[class*="metric"],
[class*="-num"],
.home-pro-score-main strong,
.home-pro-area-meta,
.track-v111-stat b{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Långa sammansatta ord får brytas i stället för att spränga sin behållare. */
p,
li,
td,
th,
h1,h2,h3,h4,
.card,
.home-pro-area-copy,
.track-v111-summary p{
  overflow-wrap:break-word;
  hyphens:auto;
}
/* Rubriker avstavas inte – det ser billigt ut i display-storlek. De bryts bara
   om ett enskilt ord är bredare än ytan. */
h1,h2{
  hyphens:manual;
  overflow-wrap:break-word;
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.129 – TILLGÄNGLIGHET

   Hoppa till innehållet. En tangentbordsanvändare var tvungen att tabba genom
   hela toppmenyn – logotyp, sju länkar, språkval, temaväxlare – på VARJE sida
   innan hen nådde det hen kom för. Länken är osynlig tills den får fokus, och
   är då det första man når.
   ═══════════════════════════════════════════════════════════════ */
.skip-link{
  position:fixed;
  top:-100px;
  left:16px;
  z-index:10000;
  padding:12px 18px;
  border-radius:0 0 12px 12px;
  background:var(--blue);
  color:#fff;
  font-size:14px;
  font-weight:800;
  box-shadow:0 12px 30px rgba(24,85,244,.35);
  transition:top .16s ease;
}
.skip-link:focus{top:0}

/* Toasten är ett statusmeddelande – markera den som sådant även visuellt genom
   att inte fånga fokus eller mus. */
.toast{pointer-events:none}

/* ═══════════════════════════════════════════════════════════════
   v1.0.131 – VÄGEN FRÅN TEST TILL PROGRAM

   Tre problem för en ny användare:

     1. Toppmenyn saknade både Testomgång och Programgenerator. Produktens två
        huvudflöden gick inte att navigera till.
     2. Testet slutade i en återvändsgränd. Man hade sina siffror och ingen
        aning om vad man skulle göra med dem.
     3. Generatorn förklarade sig inte. Utan ett genomfört test möttes man av
        hela arbetsytan med en tom rullgardin.

   Tre komponenter nedan: spåret (var är jag), nästa-steg-kortet (vart ska jag
   härnäst) och tomma läget (vad krävs innan jag kan börja).
   ═══════════════════════════════════════════════════════════════ */

/* ── Spåret: var i flödet är jag ─────────────────────────────── */
.pg-trail,
.next-step-trail,
.pg-empty-trail{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 14px;
  font-size:11.5px;
  font-weight:800;
}
.pg-trail a,
.pg-trail .now,
.next-step-trail span,
.pg-empty-trail span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 11px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  white-space:nowrap;
}
.pg-trail a b,
.pg-empty-trail b{
  display:grid;
  place-items:center;
  width:16px; height:16px;
  border-radius:999px;
  background:var(--line);
  color:var(--muted);
  font-size:9.5px;
}
.pg-trail a:hover{border-color:var(--blue);color:var(--blue)}
.pg-trail a:hover b{background:var(--blue);color:#fff}
.pg-trail .now,
.next-step-trail .now,
.pg-empty-trail .now{
  border-color:transparent;
  background:var(--blue);
  color:#fff;
}
.pg-trail .now b,
.pg-empty-trail .now b{background:rgba(255,255,255,.28);color:#fff}
.next-step-trail .done{
  border-color:transparent;
  background:color-mix(in srgb, #16a34a 12%, transparent);
  color:#15803d;
}
.next-step-trail .done:before{content:"✓";font-weight:900}
.pg-trail i,
.next-step-trail i,
.pg-empty-trail i{
  width:16px; height:2px;
  border-radius:2px;
  background:var(--line2);
  flex:0 0 auto;
}

/* ── Nästa steg: sist i Resultat och Individuell profil ──────── */
.next-step{
  margin:20px 0 0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 5%, transparent), transparent 70%),
    var(--surface);
  box-shadow:var(--sh);
}
.next-step-body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.next-step-body b{
  display:block;
  color:var(--navy);
  font-size:16px;
  font-weight:800;
}
.next-step-body p{
  margin:5px 0 0;
  max-width:62ch;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.next-step-body .btn{flex:0 0 auto;white-space:nowrap}
@media(max-width:720px){
  .next-step-body{flex-direction:column;align-items:stretch}
  .next-step-body .btn{width:100%}
}

/* ── Tomma läget: generatorn utan testresultat ───────────────── */
.pg-empty{
  max-width:760px;
  margin:28px auto 40px;
  padding:30px 32px 28px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:var(--sh2);
}
.pg-empty h2{
  margin:6px 0 8px;
  color:var(--navy);
  font-size:26px;
  text-transform:none;
}
.pg-empty>p{
  margin:0 0 20px;
  max-width:60ch;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.pg-empty-steps{
  list-style:none;
  margin:0 0 22px;
  padding:0;
  counter-reset:pgstep;
  display:grid;
  gap:12px;
}
.pg-empty-steps li{
  position:relative;
  counter-increment:pgstep;
  padding:0 0 0 38px;
}
.pg-empty-steps li:before{
  content:counter(pgstep);
  position:absolute;
  left:0; top:1px;
  display:grid;
  place-items:center;
  width:24px; height:24px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:11px;
  font-weight:900;
}
.pg-empty-steps b{display:block;color:var(--navy);font-size:14.5px;font-weight:800}
.pg-empty-steps span{display:block;margin-top:2px;color:var(--muted);font-size:13px;line-height:1.5}
.pg-empty-actions{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:600px){
  .pg-empty{margin:18px 12px 30px;padding:22px 20px}
  .pg-empty-actions .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.132 – Bootfelet

   Appens värsta fel – den startar inte alls – visade ett rått JS-felmeddelande,
   på svenska oavsett språk, utan någon väg vidare. Det var dessutom det ENDA
   felet som aldrig rapporterades: det fångas i boots try/catch, så
   window.onerror ser det aldrig.
   ═══════════════════════════════════════════════════════════════ */
.boot-error{
  max-width:620px;
  margin:64px auto;
  padding:32px 34px;
}
.boot-error h1{
  margin:0 0 10px;
  color:var(--navy);
  font-size:28px;
  text-transform:none;
}
.boot-error p{
  margin:0 0 20px;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.6;
}
.boot-error-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.boot-error-detail summary{
  cursor:pointer;
  color:var(--hint);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.boot-error-detail code{
  display:block;
  margin-top:10px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--s3, #f1f5fb);
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
@media(max-width:600px){
  .boot-error{margin:28px 12px;padding:24px 20px}
  .boot-error-actions .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.133 – TESTINMATNING PÅ TELEFON

   Produktens kärnmoment – att mata in resultat – var byggt som en bred tabell
   och hade inte en enda mediefråga. Kolumnerna är 40 px (nr) + 148 px (namn,
   fastfryst) + fyra metakolumner + 84 px per test + snitt + radera. Med åtta
   tester blir tabellen omkring 1 200 px bred.

   På en telefon (390 px) betyder det: du ser namnet och två och en halv
   testkolumn. För att fylla i åtta tester för en person skrollar du i sidled
   tre gånger, skrollar tillbaka, byter rad, och gör om det. För sex deltagare.
   I en gymnastiksal, med telefonen i ena handen.

   Under 760 px flödar tabellen om till kort – ETT kort per deltagare. Samma
   markup, samma id:n, samma tabindex, samma händelsehanterare: bara CSS. Varje
   cell bär redan sitt namn i data-label, och det namnet blir etiketten.

   Ingen skrollar i sidled längre.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .pt-scroll{
    overflow-x:visible !important;
    overflow-y:visible !important;
    max-height:none !important;
  }
  .pt-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:auto !important;
    display:block !important;
    background:transparent !important;
  }
  .pt-table thead{display:none !important}
  .pt-table tbody{display:block !important}

  /* Varje deltagare blir ett kort. */
  .pt-table tr.pt-row{
    display:block !important;
    position:relative;
    margin:0 0 14px;
    padding:14px 14px 12px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface);
    box-shadow:var(--sh);
  }
  .pt-table tr.pt-row.pt-has-results{border-color:color-mix(in srgb, var(--blue) 30%, var(--line))}

  .pt-table td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
    position:static !important;
    border:0 !important;
    padding:0 !important;
    background:transparent !important;
    text-align:left !important;
  }

  /* Radnumret blir kortets nummer, uppe till vänster. */
  .pt-table td.pt-num-cell{
    display:inline-grid !important;
    place-items:center;
    width:22px !important;
    height:22px !important;
    margin-bottom:8px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-size:11px;
    font-weight:900;
  }
  /* Namnet är kortets rubrik. */
  .pt-table td.pt-name{margin:0 0 10px}
  .pt-table td.pt-name .pt-name-input{
    width:100% !important;
    font-size:16px !important;      /* 16px = iOS zoomar inte in vid fokus */
    font-weight:800;
  }
  /* Radera-knappen i kortets övre högra hörn. */
  .pt-table td.pt-del-cell{
    position:absolute !important;
    top:10px; right:10px;
  }

  /* Metafälten: två i bredd, med sin etikett. */
  .pt-table td.pt-meta-cell{
    display:inline-block !important;
    width:calc(50% - 5px) !important;
    margin:0 0 8px;
    vertical-align:top;
  }
  .pt-table td.pt-meta-cell:nth-of-type(odd){margin-right:8px}
  .pt-table td.pt-meta-cell:before,
  .pt-table td.pt-res-cell:before,
  .pt-table td.pt-avg-cell:before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    color:var(--hint);
    font-size:10px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .pt-table td.pt-meta-cell .pt-meta-input{width:100% !important;font-size:16px !important}

  /* Testerna: en rad var, etikett till vänster, fält och poäng till höger. */
  .pt-table td.pt-res-cell{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 96px;
    align-items:center;
    gap:10px;
    padding:9px 0 !important;
    border-top:1px solid var(--line) !important;
  }
  .pt-table td.pt-res-cell:before{
    grid-column:1;
    margin:0;
    font-size:12px;
    letter-spacing:0;
    text-transform:none;
    color:var(--text);
    font-weight:700;
  }
  .pt-table td.pt-res-cell .pt-res-inner{
    grid-column:2;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
  }
  .pt-table td.pt-res-cell .pt-res-input{
    width:60px !important;
    font-size:16px !important;
    text-align:center;
  }

  /* Snittet blir kortets fot. */
  .pt-table td.pt-avg-cell{
    margin-top:10px;
    padding-top:10px !important;
    border-top:2px solid var(--line) !important;
  }
  .pt-table td.pt-avg-cell .pt-avg-num{font-size:26px}
}

/* ═══════════════════════════════════════════════════════════════
   v1.0.134 – Synkbrickan

   Två lägen, och båda betyder samma sak för användaren: ditt arbete är inte
   borta. Offline = allt sparas på enheten. Väntar = det ligger i kön och
   skickas av sig självt.

   Brickan syns bara när den behövs. Är allt synkat finns den inte.
   ═══════════════════════════════════════════════════════════════ */
.sync-chip{
  appearance:none;
  font-family:inherit;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em;
  white-space:nowrap;
  cursor:pointer;
}
.sync-chip i{
  width:7px; height:7px;
  border-radius:999px;
  flex:0 0 auto;
}
.sync-chip.is-offline{
  background:color-mix(in srgb, #d97706 12%, transparent);
  border-color:color-mix(in srgb, #d97706 30%, transparent);
  color:#a45c07;
}
.sync-chip.is-offline i{background:#d97706}
.sync-chip.is-pending{
  background:color-mix(in srgb, var(--blue) 10%, transparent);
  border-color:color-mix(in srgb, var(--blue) 26%, transparent);
  color:var(--blue);
}
.sync-chip.is-pending i{
  background:var(--blue);
  animation:sync-pulse 1.4s ease-in-out infinite;
}
@keyframes sync-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.35;transform:scale(.7)}
}
@media(prefers-reduced-motion:reduce){
  .sync-chip.is-pending i{animation:none}
}
/* På startsidan är toppmenyn genomskinlig mot mörk bakgrund. */
.shell[data-page="home"] .sync-chip.is-offline{background:rgba(217,119,6,.22);color:#ffd9a0;border-color:rgba(217,119,6,.45)}
.shell[data-page="home"] .sync-chip.is-pending{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.28)}
@media(max-width:620px){
  .sync-chip{height:28px;padding:0 9px;font-size:10.5px}
  .sync-chip.is-pending span{display:none}
}

/* Versionsnumret i sidfoten. Litet, men det avgör en hel felsökning: utan det
   går det inte att veta om en deploy slagit igenom eller om webbläsaren visar
   en cachad version. */
.footer-version{
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  background:color-mix(in srgb, var(--blue) 10%, transparent);
  color:var(--blue);
  font-size:10.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  cursor:help;
}


/* v1.0.144: startsidans topprad är mörk även på telefon och surfplatta.
   Loggan (som är mörkblå i original) måste därför inverteras till vit på
   ALLA bredder – inte bara på desktop. */
.shell[data-page="home"] .topbar .logo,
.shell[data-page="home"] .topbar .logo-compact{
  filter:brightness(0) invert(1) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   v1.0.146 – STARTSIDANS HJÄLTE PÅ MOBIL
   .home-pro låser hjälten till skärmhöjden: height:calc(100dvh - 60px), och
   .home-pro-stage klipper med overflow:hidden. På desktop stämmer det – där
   ligger text, poängkort och områdeskort bredvid varandra och får plats.

   På telefon staplas allt på varandra: kicker, rubrik, ingress, knapp,
   poängkort och fyra områdeskort. Innehållet blir mycket högre än rutan.
   Griden centrerar det, överskottet svämmar uppåt, och klippningen döljer
   att det hamnat bakom toppraden – texten ser ut att överlappa loggan.
   På iOS förvärras det av att 100dvh ändras när adressfältet glider undan,
   så överlappet flyttar sig medan man skrollar.

   Lösningen är inte mer marginal – det är att sluta låsa höjden. Hjälten ska
   växa med sitt innehåll på liten skärm och skrollas som vilken sida som helst.
   Bakgrunden ligger på inset:0 i scenen och följer därför med när den växer.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  .home-pro{
    height:auto !important;
    min-height:0 !important;
  }
  .home-pro-stage{
    height:auto !important;
    grid-template-rows:auto auto !important;
    overflow:visible !important;
  }
  .home-pro-inner{
    padding-top:24px !important;
    padding-bottom:24px !important;
    align-items:start !important;
  }
  .home-pro-copy{ align-self:start !important; }
  .home-pro-score{ min-height:0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v16.9.0 – responsiv slutjustering
   Jämna formulärfält på surfplatta och en startsida som alltid ryms i vyn.
   Detta block ligger sist i startsidans kaskad och ersätter v1.0.146, vars
   avsiktliga mobilscroll inte längre stämmer med produktkravet.
   ═══════════════════════════════════════════════════════════════════════ */
.wiz-card .proto-toolbar-fields{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:14px !important;
  align-items:end !important;
}
.wiz-card .proto-toolbar-fields > .field,
.wiz-card .proto-toolbar-fields .input{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  box-sizing:border-box !important;
}
.wiz-card .proto-toolbar-fields .input{
  min-height:46px !important;
  font-size:14px !important;
}

@media (min-width:701px) and (max-width:1199px){
  .wiz-card .proto-toolbar-fields{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .wiz-card .proto-toolbar-fields > .field:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }
  .wiz-track-note{
    display:grid !important;
    grid-template-columns:minmax(220px,.8fr) minmax(0,2fr) !important;
    align-items:start !important;
  }
}
@media (max-width:700px){
  .wiz-card .proto-toolbar-fields{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .wiz-card .proto-toolbar-fields > .field{grid-column:auto !important}
  .wiz-card-body{padding-left:16px !important;padding-right:16px !important}
  .wiz-actions{align-items:stretch !important;gap:10px !important}
  .wiz-actions .btn{width:100% !important;min-height:46px !important}
  .wiz-actions-right{width:100% !important}
  .wiz-action-note{line-height:1.4 !important}
}

html:has(.shell[data-page="home"]),
body:has(.shell[data-page="home"]),
#app:has(.shell[data-page="home"]){
  height:100% !important;
  height:100dvh !important;
  min-height:0 !important;
  overflow:hidden !important;
  overscroll-behavior:none !important;
}
.shell[data-page="home"]{
  height:100dvh !important;
  min-height:0 !important;
  max-height:100dvh !important;
  overflow:hidden !important;
}
.shell[data-page="home"] .topbar{flex:0 0 60px !important}
.shell[data-page="home"] .home-pro{
  height:calc(100dvh - 60px) !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.shell[data-page="home"] .home-pro-stage{
  height:100% !important;
  min-height:0 !important;
  grid-template-rows:minmax(0,1fr) 42px !important;
  overflow:hidden !important;
}
.shell[data-page="home"] .home-pro-inner{
  height:100% !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Surfplatta: två kompakta områdeskolumner; analyskortet får vara kvar i
   liggande läge men tas bort i stående läge där höjden är den knappa resursen. */
@media (max-width:900px){
  .shell[data-page="home"] .home-pro{
    height:calc(100dvh - 60px) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .shell[data-page="home"] .home-pro-stage{
    height:100% !important;
    grid-template-rows:minmax(0,1fr) 38px !important;
    overflow:hidden !important;
  }
  .shell[data-page="home"] .home-pro-inner{
    width:calc(100vw - 28px) !important;
    padding:16px 0 12px !important;
    grid-template-columns:minmax(0,1fr) minmax(250px,.72fr) !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    gap:12px 18px !important;
    align-items:center !important;
  }
  .shell[data-page="home"] .home-pro-copy{grid-column:1;grid-row:1;align-self:center !important}
  .shell[data-page="home"] .home-pro-score{
    display:flex !important;
    grid-column:2 !important;
    grid-row:1 !important;
    width:auto !important;
    height:min(300px,44vh) !important;
    min-height:230px !important;
    padding:16px !important;
  }
  .shell[data-page="home"] .home-pro-areas{
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  .shell[data-page="home"] .home-pro-area{min-height:86px !important;padding:10px 11px !important}
  .shell[data-page="home"] .home-pro-area-icon{width:28px !important;height:28px !important}
  .shell[data-page="home"] .home-pro-area-copy{margin-top:6px !important}
  .shell[data-page="home"] .home-pro-area-copy small{display:none !important}
}

@media (max-width:700px), (max-width:900px) and (orientation:portrait){
  .shell[data-page="home"] .home-pro-inner{
    width:calc(100vw - 24px) !important;
    padding:clamp(10px,2.5vh,18px) 0 9px !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    gap:clamp(9px,2vh,15px) !important;
    align-content:stretch !important;
  }
  .shell[data-page="home"] .home-pro-copy{grid-column:1;grid-row:1;align-self:start !important}
  .shell[data-page="home"] .home-pro-kicker{min-height:25px !important;font-size:9px !important}
  .shell[data-page="home"] .home-pro-copy h1{
    margin:9px 0 7px !important;
    font-size:clamp(27px,8vw,40px) !important;
    line-height:1.04 !important;
  }
  .shell[data-page="home"] .home-pro-copy p{
    display:-webkit-box !important;
    margin:0 !important;
    overflow:hidden !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    font-size:12px !important;
    line-height:1.4 !important;
  }
  .shell[data-page="home"] .home-pro-actions{margin-top:10px !important}
  .shell[data-page="home"] .home-pro-primary{min-height:40px !important;padding:0 15px !important}
  .shell[data-page="home"] .home-pro-score{display:none !important}
  .shell[data-page="home"] .home-pro-areas{
    grid-column:1 !important;
    grid-row:2 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    min-height:0 !important;
    gap:8px !important;
  }
  .shell[data-page="home"] .home-pro-area{
    min-height:0 !important;
    height:auto !important;
    padding:9px 10px !important;
    display:flex !important;
    align-items:center !important;
    gap:9px !important;
  }
  .shell[data-page="home"] .home-pro-area-copy{margin:0 !important}
  .shell[data-page="home"] .home-pro-area-meta{display:none !important}
  .shell[data-page="home"] .home-pro-area-arrow{top:10px !important;right:9px !important}
  .shell[data-page="home"] .home-pro-utility{min-height:38px !important}
}

@media (max-width:420px){
  .shell[data-page="home"] .topbar,
  .shell[data-page="home"] .topbar-inner{height:56px !important;min-height:56px !important}
  .shell[data-page="home"] .home-pro{height:calc(100dvh - 56px) !important}
  .shell[data-page="home"] .home-pro-copy h1{font-size:clamp(25px,7.6vw,32px) !important}
  .shell[data-page="home"] .home-pro-area-copy b{font-size:12.5px !important}
  .shell[data-page="home"] .home-pro-utility a{padding:0 7px !important;font-size:9.5px !important}
  .shell[data-page="home"] .home-pro-version{padding:0 6px !important;font-size:8.5px !important}
}
@media (max-height:600px){
  .shell[data-page="home"] .home-pro-copy p{display:none !important}
  .shell[data-page="home"] .home-pro-kicker{display:none !important}
  .shell[data-page="home"] .home-pro-copy h1{margin-top:0 !important;font-size:clamp(25px,6vh,36px) !important}
  .shell[data-page="home"] .home-pro-actions{margin-top:7px !important}
  .shell[data-page="home"] .home-pro-area-icon{width:25px !important;height:25px !important}
}


/* ═══════════════════════════════════════════════════════════════
   APProfile v15.6.1 – Programgenerator UX, fas 1
   Pedagogisk landning före de befintliga valen. Motorn är orörd.
   ═══════════════════════════════════════════════════════════════ */
.program-guide-hero .page-hero-inner{max-width:850px}
.program-guide-hero h1{text-transform:none;letter-spacing:-.035em}
.pg-guide-intro{max-width:1180px;margin:0 auto 24px}
.pg-guide-progress{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 14px;padding:0 4px}
.pg-guide-progress span{display:block;color:var(--blue);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.pg-guide-progress b{display:block;margin-top:3px;color:var(--navy);font-size:15px}
.pg-guide-progress-track{display:grid;grid-template-columns:repeat(4,42px);gap:7px}
.pg-guide-progress-track i{height:5px;border-radius:999px;background:var(--line2)}
.pg-guide-progress-track i:first-child{background:var(--blue)}
.pg-guide-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(290px,.75fr);gap:26px;padding:28px;border:1px solid color-mix(in srgb,var(--blue) 20%,var(--line));border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 6%,var(--surface)),var(--surface) 48%,color-mix(in srgb,var(--teal,#0f766e) 5%,var(--surface)));box-shadow:var(--sh2)}
.pg-guide-copy h2{margin:6px 0 10px;color:var(--navy);font-size:clamp(24px,3vw,34px);line-height:1.12;letter-spacing:-.025em;text-transform:none}
.pg-guide-copy>p{max-width:68ch;margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.pg-guide-checks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px}
.pg-guide-checks li{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,transparent)}
.pg-guide-checks li>span{display:grid;place-items:center;flex:0 0 auto;width:25px;height:25px;border-radius:50%;background:rgba(22,163,74,.13);color:#15803d;font-size:12px;font-weight:900}
.pg-guide-checks b{display:block;color:var(--navy);font-size:13.5px}
.pg-guide-checks small{display:block;margin-top:2px;color:var(--muted);font-size:12px;line-height:1.45}
.pg-guide-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px}
.pg-guide-actions small{max-width:42ch;color:var(--muted);font-size:11.5px;line-height:1.45}
.pg-guide-start{min-height:48px;padding-inline:20px;text-decoration:none!important}
.pg-guide-flow{display:grid;align-content:start;gap:9px;padding:15px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.pg-guide-flow article{position:relative;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;background:var(--s2)}
.pg-guide-flow article:not(:last-child):after{content:"";position:absolute;left:24px;bottom:-10px;width:2px;height:11px;background:var(--line2)}
.pg-guide-flow article>span{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:12px;font-weight:900}
.pg-guide-flow article:first-child{background:color-mix(in srgb,var(--blue) 9%,var(--surface));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 24%,transparent)}
.pg-guide-flow article:first-child>span{background:var(--blue)}
.pg-guide-flow b{display:block;color:var(--navy);font-size:13px}
.pg-guide-flow small{display:block;margin-top:1px;color:var(--muted);font-size:11.5px}
.pg-guide-trust{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;padding:13px 16px;color:var(--muted);font-size:11.5px;font-weight:700}
.pg-guide-trust span{white-space:nowrap}
#programGuideForm{scroll-margin-top:92px}
html{scroll-behavior:smooth}
@media(max-width:900px){.pg-guide-card{grid-template-columns:1fr}.pg-guide-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.pg-guide-flow article:not(:last-child):after{display:none}}
@media(max-width:620px){.pg-guide-intro{margin:0 0 18px}.pg-guide-progress{align-items:flex-start;flex-direction:column;gap:10px}.pg-guide-progress-track{width:100%;grid-template-columns:repeat(4,1fr)}.pg-guide-card{padding:20px 16px;border-radius:18px}.pg-guide-flow{grid-template-columns:1fr}.pg-guide-actions{align-items:stretch}.pg-guide-actions .btn{width:100%;justify-content:center}.pg-guide-trust{justify-content:flex-start;gap:8px}.pg-guide-trust span{white-space:normal;width:100%}}

/* APProfile v15.6.2 – focused mesocycle selection */
.program-guide-hero h1{font-size:clamp(2rem,4vw,3.35rem);line-height:1.02;letter-spacing:-.03em}
.program-guide-hero .page-hero-lead{max-width:760px;font-size:clamp(1rem,1.5vw,1.16rem)}
.pg-guide-copy h2{font-size:clamp(1.45rem,2.4vw,2.05rem);line-height:1.12;letter-spacing:-.022em}
.pg-step summary b,.pg-score-head h3,.pg-quality-guidance b{text-transform:none;letter-spacing:0}
.pg-quality-selector{padding:20px}
.pg-quality-selector .pg-score-head{align-items:flex-start;gap:18px}
.pg-quality-selector .pg-score-head h3{margin:0 0 5px;font-size:clamp(1.15rem,2vw,1.45rem)}
.pg-quality-selector .pg-score-head>span{flex:none;border-radius:999px;padding:7px 11px;background:#eaf4f5;color:#0b6e75;font-weight:800;font-size:.78rem}
.pg-quality-guidance{display:flex;gap:10px;align-items:flex-start;margin:14px 0;padding:12px 14px;border-radius:14px;background:#f5f8fb;color:#405366}
.pg-quality-guidance b{flex:none;color:#17324d}
.pg-quality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-quality-card{border:1px solid rgba(23,50,77,.14);border-radius:16px;padding:14px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.pg-quality-card.is-selected{border-color:#0b6e75;background:#f3fbfb;box-shadow:0 0 0 2px rgba(11,110,117,.08)}
.pg-quality-toggle{display:flex;align-items:flex-start;gap:11px;cursor:pointer}
.pg-quality-toggle input{position:absolute;opacity:0;pointer-events:none}
.pg-quality-check{width:22px;height:22px;flex:0 0 22px;border:2px solid #9aabba;border-radius:7px;background:#fff;position:relative;margin-top:1px}
.pg-quality-toggle input:checked+.pg-quality-check{border-color:#0b6e75;background:#0b6e75}
.pg-quality-toggle input:checked+.pg-quality-check:after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pg-quality-toggle b{display:block;color:#17324d;font-size:1rem}
.pg-quality-toggle small{display:block;color:#607283;line-height:1.35;margin-top:3px}
.pg-quality-role{display:block;margin-top:12px}
.pg-quality-role>span{display:block;font-size:.76rem;font-weight:750;color:#536779;margin-bottom:5px}
.pg-quality-role select:disabled{opacity:.45;cursor:not-allowed}
.pg-quality-validation{margin-top:13px;padding:10px 12px;border-radius:12px;font-size:.86rem;font-weight:650}
.pg-quality-validation.is-valid{background:#edf8f2;color:#22633e}
.pg-quality-validation.is-error{background:#fff1ef;color:#9b3428}
@media(max-width:720px){.program-guide-hero h1{font-size:2rem}.pg-quality-grid{grid-template-columns:1fr}.pg-quality-selector .pg-score-head{flex-direction:column}.pg-quality-guidance{flex-direction:column}}

/* APProfile v16.0 preview – 14-day periodisation */
.pg-step-fixed{padding:0;border:1px solid rgba(23,50,77,.12);border-radius:16px;background:#fff}
.pg-step-fixed-head{display:flex;gap:13px;align-items:flex-start;padding:16px}
.pg-step-fixed-head>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#17324d;color:#fff;font-weight:800}
.pg-step-fixed-head b{display:block;color:#17324d;font-size:1rem}
.pg-step-fixed-head small{display:block;margin-top:4px;color:#637587;line-height:1.4}
.pg-cycle-overview{margin:24px 0;padding:20px;border:1px solid rgba(23,50,77,.12);border-radius:20px;background:linear-gradient(180deg,#f8fbfd,#fff)}
.pg-cycle-head h3{margin:4px 0 7px;font-size:clamp(1.25rem,2vw,1.7rem);color:#17324d}
.pg-cycle-head p{margin:0;max-width:850px;color:#5d6f80;line-height:1.5}
.pg-cycle-ranking{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.pg-cycle-ranking article{display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:13px;background:#fff;border:1px solid rgba(23,50,77,.1)}
.pg-cycle-ranking article>span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#17324d;color:#fff;font-weight:800;font-size:.75rem}
.pg-cycle-ranking b,.pg-cycle-ranking small{display:block}
.pg-cycle-ranking small{margin-top:2px;color:#66788a;font-size:.74rem}
.pg-cycle-weeks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pg-cycle-week{padding:15px;border-radius:16px;background:#fff;border:1px solid rgba(23,50,77,.1)}
.pg-cycle-week header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
.pg-cycle-week header span{font-weight:850;color:#17324d}
.pg-cycle-week header small{color:#6a7b8b;text-align:right}
.pg-cycle-week>div{display:grid;gap:7px}
.pg-cycle-session{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 11px;border-left:4px solid #708090;border-radius:9px;background:#f7f9fb}
.pg-cycle-session em{font-style:normal;color:#697b8b;font-size:.77rem}
.pg-cycle-session b{color:#17324d;text-align:right}
.pg-cycle-session.q-strength{border-left-color:#a4433c}.pg-cycle-session.q-conditioning{border-left-color:#2875a8}
.pg-cycle-session.q-speed{border-left-color:#23866d}.pg-cycle-session.q-power{border-left-color:#c38a12}
.pg-cycle-session.q-anaerobic{border-left-color:#704a91}
@media(max-width:760px){.pg-cycle-weeks{grid-template-columns:1fr}.pg-cycle-week header{align-items:flex-start;flex-direction:column}.pg-cycle-week header small{text-align:left}}

.pg-model-card{display:flex;flex-direction:column;gap:3px;margin:16px 0 10px;padding:13px 15px;border-radius:14px;background:#eef5f8;border:1px solid rgba(23,50,77,.1)}
.pg-model-card span{font-size:.75rem;font-weight:800;color:#607283;text-transform:uppercase;letter-spacing:.04em}
.pg-model-card b{font-size:1.05rem;color:#17324d}.pg-model-card small{color:#607283}

/* APProfile v16.1 – systematic conditioning */
.pg-cycle-session{flex-wrap:wrap}.pg-cycle-session small{flex-basis:100%;padding-left:calc(100% - 220px);color:#6a7b8b;font-size:.72rem;text-align:right}
@media(max-width:760px){.pg-cycle-session small{padding-left:0;text-align:left}}


/* APProfile v16.3 – simplified full-width programme flow */
.program-setup-mode,
.program-result-mode{
  width:min(100%,1240px);
  margin:0 auto;
  padding:22px 24px 52px;
}
.program-simple-hero{
  max-width:880px;
  margin:8px 0 22px;
}
.program-simple-hero h1,
.program-result-top h1{
  margin:5px 0 9px;
  color:#15263b;
  font-size:clamp(1.9rem,3.5vw,3rem);
  line-height:1.05;
  letter-spacing:-.035em;
}
.program-simple-hero p,
.program-result-top p{
  margin:0;
  color:#5d6d80;
  font-size:1rem;
  line-height:1.55;
}
.program-simple-form{
  display:grid;
  gap:16px;
}
.program-simple-source{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.program-simple-source>div{
  min-height:78px;
  padding:14px 16px;
  border:1px solid rgba(23,50,77,.12);
  border-radius:15px;
  background:#f7f9fc;
}
.program-simple-source span,
.program-simple-source b{
  display:block;
}
.program-simple-source span{
  margin-bottom:5px;
  color:#6c7c8e;
  font-size:.75rem;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.program-simple-source b{
  color:#17324d;
  line-height:1.35;
}
.program-simple-section{
  padding:22px;
  border:1px solid rgba(23,50,77,.12);
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 28px rgba(31,52,79,.045);
}
.program-simple-section-head{
  display:flex;
  align-items:flex-start;
  gap:13px;
  margin-bottom:18px;
}
.program-simple-section-head>span{
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#355bd6;
  color:#fff;
  font-size:.82rem;
  font-weight:850;
}
.program-simple-section-head>div{
  flex:1;
}
.program-simple-section-head h2{
  margin:1px 0 4px;
  color:#17324d;
  font-size:1.2rem;
}
.program-simple-section-head p{
  margin:0;
  color:#657587;
  line-height:1.45;
}
.program-simple-section-head>strong{
  flex:none;
  padding:7px 10px;
  border-radius:999px;
  background:#eef3ff;
  color:#355bd6;
  font-size:.78rem;
}
.program-simple-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.program-simple-grid-three{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.program-simple-quality-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:11px;
}
.pg-simple-quality-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-height:118px;
  padding:15px;
  border:1px solid rgba(23,50,77,.14);
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease;
}
.pg-simple-quality-card:hover{
  transform:translateY(-1px);
  border-color:#8fa6e9;
}
.pg-simple-quality-card.is-selected{
  border-color:#355bd6;
  background:#f4f7ff;
  box-shadow:0 0 0 2px rgba(53,91,214,.08);
}
.pg-simple-quality-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.pg-simple-check{
  position:relative;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border:2px solid #a8b4c2;
  border-radius:7px;
  background:#fff;
}
.pg-simple-quality-card input:checked+.pg-simple-check{
  border-color:#355bd6;
  background:#355bd6;
}
.pg-simple-quality-card input:checked+.pg-simple-check::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:6px;
  height:11px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.pg-simple-quality-card b,
.pg-simple-quality-card small{
  display:block;
}
.pg-simple-quality-card b{
  color:#17324d;
  font-size:.96rem;
}
.pg-simple-quality-card small{
  margin-top:5px;
  color:#69798a;
  font-size:.77rem;
  line-height:1.35;
}
.program-simple-submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  border:1px solid #cbd7f7;
  border-radius:18px;
  background:#f5f8ff;
}
.program-simple-submit b,
.program-simple-submit small{
  display:block;
}
.program-simple-submit b{
  color:#17324d;
}
.program-simple-submit small{
  margin-top:4px;
  color:#647589;
  line-height:1.4;
}
.program-simple-submit .btn{
  min-width:210px;
  min-height:50px;
}
.program-result-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:22px;
  margin:6px 0 20px;
}
.program-result-top>div:first-child{
  max-width:730px;
}
.program-result-top-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.program-result-full{
  width:100%;
}
.program-result-mode .program-output,
.program-result-mode .pg-result,
.program-result-mode .pg-sessions{
  width:100%;
  max-width:none;
}
.program-result-mode .pg-session{
  width:100%;
}
.shell[data-page="program"] .program-workbench,
.shell[data-page="program"] .program-page-body{
  max-width:none;
}
@media(max-width:1000px){
  .program-simple-quality-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .program-result-top{align-items:flex-start;flex-direction:column}
  .program-result-top-actions{justify-content:flex-start}
}
@media(max-width:760px){
  .program-setup-mode,.program-result-mode{padding:14px 12px 36px}
  .program-simple-source,
  .program-simple-grid,
  .program-simple-grid-three,
  .program-simple-quality-grid{grid-template-columns:1fr}
  .program-simple-section{padding:17px}
  .program-simple-submit{align-items:stretch;flex-direction:column}
  .program-simple-submit .btn{width:100%}
  .program-result-top-actions{width:100%}
  .program-result-top-actions .btn{flex:1 1 auto}
}


/* APProfile v16.4 – navigation and action hierarchy */
.topbar-inner-v103{
  gap:14px;
}
.topbar-nav-primary{
  gap:5px;
}
.topbar-nav-link{
  min-height:42px;
  padding:8px 12px;
}
.topbar-nav-link span{
  opacity:.72;
}
.nav-right{
  gap:8px;
}
.topbar-menu{
  position:relative;
}
.topbar-menu>summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:8px 11px;
  border:1px solid rgba(31,52,79,.13);
  border-radius:12px;
  background:#fff;
  color:#394b60;
  cursor:pointer;
  font-size:.84rem;
  font-weight:750;
  white-space:nowrap;
}
.topbar-menu>summary::-webkit-details-marker{
  display:none;
}
.topbar-menu[open]>summary,
.topbar-menu.active>summary{
  border-color:#9fb1ec;
  background:#f4f7ff;
  color:#2f55cf;
}
.topbar-menu-panel{
  position:absolute;
  z-index:120;
  top:calc(100% + 8px);
  right:0;
  width:280px;
  padding:8px;
  border:1px solid rgba(31,52,79,.14);
  border-radius:15px;
  background:#fff;
  box-shadow:0 18px 48px rgba(23,50,77,.18);
}
.topbar-menu-panel a,
.topbar-menu-panel button{
  display:block;
  width:100%;
  padding:10px 11px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#263a50;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.topbar-menu-panel a:hover,
.topbar-menu-panel button:hover{
  background:#f3f6fb;
}
.topbar-menu-panel b,
.topbar-menu-panel small{
  display:block;
}
.topbar-menu-panel small{
  margin-top:3px;
  color:#6d7d8f;
  font-size:.74rem;
  line-height:1.3;
}
.topbar-account>summary{
  max-width:220px;
}
.account-avatar{
  display:grid;
  place-items:center;
  flex:0 0 29px;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#355bd6;
  color:#fff;
  font-weight:850;
}
.account-summary{
  min-width:0;
}
.account-summary b,
.account-summary small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.account-summary b{
  max-width:125px;
  font-size:.82rem;
}
.account-summary small{
  max-width:125px;
  color:#778697;
  font-size:.68rem;
  font-weight:600;
}
.account-language{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:5px 3px;
  padding:9px 8px;
  border-top:1px solid #edf0f4;
  border-bottom:1px solid #edf0f4;
  color:#627286;
  font-size:.78rem;
  font-weight:700;
}
.topbar-menu-logout{
  color:#a33d35!important;
}
.topbar-auth-actions{
  display:flex;
  gap:7px;
}
.action-more-menu{
  position:relative;
}
.action-more-menu>summary{
  list-style:none;
  display:flex;
  align-items:center;
  min-height:42px;
  padding:9px 13px;
  border:1px solid rgba(31,52,79,.15);
  border-radius:11px;
  background:#fff;
  color:#394b60;
  cursor:pointer;
  font-weight:750;
}
.action-more-menu>summary::-webkit-details-marker{
  display:none;
}
.action-more-menu[open]>summary{
  border-color:#91a7e8;
  background:#f5f7ff;
}
.action-more-menu>div{
  position:absolute;
  z-index:80;
  top:calc(100% + 7px);
  right:0;
  width:230px;
  padding:7px;
  border:1px solid rgba(31,52,79,.14);
  border-radius:13px;
  background:#fff;
  box-shadow:0 15px 38px rgba(23,50,77,.16);
}
.action-more-menu button{
  display:block;
  width:100%;
  padding:10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#304257;
  text-align:left;
  cursor:pointer;
}
.action-more-menu button:hover{
  background:#f3f6fb;
}

/* One primary action per action group */
.program-result-top-actions>.btn.primary,
.program-simple-submit>.btn.primary{
  box-shadow:0 7px 18px rgba(53,91,214,.18);
}
.program-result-top-actions>.btn:not(.primary){
  background:#fff;
}
.page-actions,
.toolbar,
.action-row,
.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.page-actions .btn,
.toolbar .btn,
.action-row .btn,
.form-actions .btn{
  min-height:40px;
}
.page-actions .btn:not(.primary),
.toolbar .btn:not(.primary),
.action-row .btn:not(.primary),
.form-actions .btn:not(.primary){
  box-shadow:none;
}

/* Avoid duplicate emphasis in dense views */
.btn.xs,
.btn.sm{
  font-weight:700;
}
.btn.xs:not(.primary):not(.danger),
.btn.sm:not(.primary):not(.danger){
  background:#fff;
  border-color:#d8dee8;
  color:#415267;
}
@media(max-width:1120px){
  .topbar-more{display:none}
  .account-summary small{display:none}
}
@media(max-width:760px){
  .topbar-account{display:none}
  .topbar-auth-actions{display:none}
  .program-result-top-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .program-result-top-actions>.btn,
  .program-result-top-actions>.action-more-menu,
  .program-result-top-actions>.action-more-menu>summary{
    width:100%;
  }
  .action-more-menu>div{
    right:auto;
    left:0;
  }
}

/* APProfile v16.5 */
.topbar-nav-link{appearance:none;border:0;cursor:pointer;font:inherit}
.mnav-link{appearance:none;width:100%;border:0;text-align:left;font:inherit;cursor:pointer}
.pg-section-prep [data-pg-action="add"],.pg-section-prep .pg-edit-actions{display:none!important}

/* APProfile v16.6 – cooldown + mobile/tablet */
.pg-block-v076[data-group="prep"] .pg-edit-actions,
.pg-block-v076[data-group="cooldown"] .pg-edit-actions,
.pg-section-prep [data-pg-action],
.pg-section-cooldown [data-pg-action]{display:none!important}
html,body,#app,.shell,.program-main,.program-result-full,.program-simple-form{max-width:100%;overflow-x:hidden}
img,svg,canvas,video{max-width:100%;height:auto}
select,input,textarea,button{max-width:100%}

@media (min-width:761px) and (max-width:1100px){
 .program-setup-mode,.program-result-mode{padding-inline:18px}
 .program-simple-quality-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .program-simple-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
 .pg-cycle-weeks{grid-template-columns:1fr 1fr}
 .pg-exercise{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
 body{font-size:16px}
 .topbar-nav-primary,.nav-right{display:none!important}
 .mobile-menu-toggle{display:flex!important;min-width:44px;min-height:44px}
 .mobile-nav-drawer{width:min(92vw,380px);overflow-y:auto;-webkit-overflow-scrolling:touch}
 .mnav-link{min-height:50px;padding:12px 14px}
 .program-simple-hero h1,.program-result-top h1{font-size:1.8rem;line-height:1.08}
 .program-simple-source,.program-simple-grid,.program-simple-grid-three,.program-simple-quality-grid{grid-template-columns:1fr}
 .program-simple-section-head{flex-wrap:wrap}
 .program-simple-section-head>strong{margin-left:45px}
 .pg-simple-quality-card{min-height:88px}
 .program-simple-submit{position:sticky;bottom:8px;z-index:30;padding:14px;box-shadow:0 12px 35px rgba(23,50,77,.18)}
 .program-result-top-actions{grid-template-columns:1fr}
 .program-result-top-actions>.btn,.program-result-top-actions>.action-more-menu{min-height:46px}
 .action-more-menu>summary{min-height:46px;justify-content:center}
 .action-more-menu>div{position:fixed;left:12px;right:12px;bottom:12px;top:auto;width:auto;max-height:60vh;overflow:auto}
 .pg-cycle-weeks{grid-template-columns:1fr}
 .pg-cycle-session{align-items:flex-start;flex-direction:column}
 .pg-cycle-session b{text-align:left}
 .pg-session-head{align-items:flex-start;flex-direction:column}
 .pg-session-time{align-items:flex-start;text-align:left}
 .pg-section-head{align-items:flex-start;flex-wrap:wrap}
 .pg-exercise{padding:14px}
 .pg-exercise-dose,.pg-dose-line{width:100%;white-space:normal}
 .pg-edit-actions{width:100%}
 .pg-edit-actions .btn{width:100%;min-height:44px}
 .field .input,.field select,.field input{min-height:48px;font-size:16px}
 .btn{min-height:44px}
}
@media (max-width:390px){
 .program-setup-mode,.program-result-mode{padding-inline:9px}
 .program-simple-section,.pg-cycle-overview{padding:14px;border-radius:15px}
 .program-simple-hero h1,.program-result-top h1{font-size:1.62rem}
}


/* APProfile v16.7.2 – aligned content and simplified equipment handling */

/* Five-step guide: equal column starts, stable text positions */
.steps-grid-aligned,
.how-steps,
.steps-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;
  align-items:start;
}
.steps-grid-aligned > *,
.how-steps > *,
.steps-grid > *{
  min-width:0;
  padding:0;
}
.step-card-aligned,
.how-step{
  display:grid;
  grid-template-rows:auto minmax(48px,auto) 1fr;
  align-content:start;
}
.step-card-aligned h3,
.how-step h3,
.steps-grid h3{
  margin:14px 0 9px;
  min-height:44px;
  font-size:1rem;
  line-height:1.3;
}
.step-card-aligned p,
.how-step p,
.steps-grid p{
  margin:0;
  line-height:1.55;
}
.step-card-aligned .step-number,
.how-step .step-number,
.steps-grid .step-number{
  margin-bottom:0;
}

/* Feature cards: headings and body text start at the same vertical position */
.program-feature-grid-aligned,
.feature-grid-aligned,
.program-feature-grid,
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
}
.program-feature-grid-aligned > *,
.feature-grid-aligned > *,
.program-feature-grid > *,
.feature-grid > *{
  height:100%;
}
.program-feature-grid h3,
.feature-grid h3{
  margin:0 0 10px;
  min-height:30px;
  line-height:1.3;
}
.program-feature-grid p,
.feature-grid p{
  margin:0;
  line-height:1.55;
}

/* Consistent page/card spacing */
.how-section,
.program-generator-section,
.info-section,
.content-card{
  padding:28px 30px;
}
.how-section > header,
.program-generator-section > header{
  margin-bottom:22px;
}
.how-section h2,
.program-generator-section h2{
  margin:6px 0 8px;
}
.how-section > p,
.program-generator-section > p{
  max-width:920px;
  margin:0;
  line-height:1.55;
}

/* Equipment is no longer a user decision */
.program-standard-equipment{
  display:flex;
  align-items:center;
  padding:15px 17px;
  border:1px solid #dbe3ef;
  border-radius:15px;
  background:#f8fafc;
}
.program-standard-equipment>div{
  display:flex;
  align-items:center;
  gap:12px;
}
.program-standard-equipment b,
.program-standard-equipment small{
  display:block;
}
.program-standard-equipment b{
  color:#17324d;
}
.program-standard-equipment small{
  margin-top:3px;
  color:#667789;
  line-height:1.4;
}
.program-standard-icon{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:10px;
  background:#eef3ff;
  font-size:1.25rem;
}

/* Two fields now share available width evenly */
.program-simple-grid-three{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

@media (min-width:761px) and (max-width:1100px){
  .steps-grid-aligned,
  .how-steps,
  .steps-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .steps-grid-aligned > *:last-child,
  .how-steps > *:last-child,
  .steps-grid > *:last-child{
    grid-column:1 / -1;
    max-width:50%;
  }
  .program-feature-grid-aligned,
  .feature-grid-aligned,
  .program-feature-grid,
  .feature-grid{
    grid-template-columns:1fr 1fr;
  }
  .program-feature-grid > *:last-child,
  .feature-grid > *:last-child{
    grid-column:1 / -1;
  }
}

@media (max-width:760px){
  .how-section,
  .program-generator-section,
  .info-section,
  .content-card{
    padding:18px 16px;
  }
  .steps-grid-aligned,
  .how-steps,
  .steps-grid,
  .program-feature-grid-aligned,
  .feature-grid-aligned,
  .program-feature-grid,
  .feature-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .steps-grid-aligned > *:last-child,
  .how-steps > *:last-child,
  .steps-grid > *:last-child,
  .program-feature-grid > *:last-child,
  .feature-grid > *:last-child{
    grid-column:auto;
    max-width:none;
  }
  .step-card-aligned,
  .how-step{
    grid-template-rows:auto;
  }
  .step-card-aligned h3,
  .how-step h3,
  .steps-grid h3{
    min-height:0;
  }
  .program-standard-equipment>div{
    align-items:flex-start;
  }
  .program-simple-grid-three{
    grid-template-columns:1fr;
  }
}


/* APProfile v16.7.2 – icon-free menu and unified response dialog */
.topbar-nav-link{gap:0!important}
.topbar-nav-link>span,
.mnav-link>span{display:none!important}
.mnav-link{gap:0!important}

/* Unified dialog used by prompts, confirmations and alerts */
.app-dialog-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(3,11,26,.66);
  backdrop-filter:blur(8px);
}
.app-dialog-box{
  width:min(100%,480px);
  padding:0;
  overflow:hidden;
  border:1px solid rgba(137,161,197,.32);
  border-radius:22px;
  background:linear-gradient(180deg,#17263d 0%,#101b2d 100%);
  color:#fff;
  box-shadow:0 30px 90px rgba(0,0,0,.48);
}
.app-dialog-icon{
  display:none!important;
}
.app-dialog-title{
  padding:28px 30px 0;
  color:#fff;
  font-size:1.4rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
}
.app-dialog-msg{
  padding:10px 30px 0;
  color:#d0d9e5;
  font-size:.95rem;
  line-height:1.5;
}
.app-dialog-detail{
  padding:8px 30px 0;
  color:#9fb0c6;
  font-size:.82rem;
  line-height:1.45;
}
.app-dialog-input{
  display:block;
  width:calc(100% - 60px);
  min-height:52px;
  margin:20px 30px 0;
  padding:12px 14px;
  border:1px solid #6385b2;
  border-radius:12px;
  outline:none;
  background:#182a43;
  color:#fff;
  font:inherit;
}
.app-dialog-input:focus{
  border-color:#4d8cff;
  box-shadow:0 0 0 3px rgba(77,140,255,.2);
}
.app-dialog-hint{
  padding:7px 30px 0;
  color:#90a2ba;
  font-size:.75rem;
}
.app-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:24px;
  padding:18px 30px 26px;
  border-top:1px solid rgba(150,170,198,.18);
}
.app-dialog-btn{
  min-width:116px;
  min-height:46px;
  padding:10px 18px;
  border-radius:12px;
  font:inherit;
  font-weight:750;
  cursor:pointer;
}
.app-dialog-cancel{
  border:1px solid #6d7f97;
  background:transparent;
  color:#eef3f8;
}
.app-dialog-confirm{
  border:1px solid #2e6ce8;
  background:linear-gradient(180deg,#3b7fff,#1f56d6);
  color:#fff;
  box-shadow:0 8px 22px rgba(31,86,214,.3);
}
.app-dialog-danger .app-dialog-confirm{
  border-color:#c54b4b;
  background:linear-gradient(180deg,#df6464,#b63838);
}
.app-dialog-in .app-dialog-box{
  animation:appDialogIn .18s ease both;
}
.app-dialog-out .app-dialog-box{
  animation:appDialogOut .16s ease both;
}
@keyframes appDialogIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes appDialogOut{
  from{opacity:1;transform:translateY(0) scale(1)}
  to{opacity:0;transform:translateY(8px) scale(.985)}
}
@media(max-width:600px){
  .app-dialog-overlay{
    align-items:end;
    padding:12px;
  }
  .app-dialog-box{
    width:100%;
    border-radius:20px;
  }
  .app-dialog-title{
    padding:22px 20px 0;
    font-size:1.25rem;
  }
  .app-dialog-msg,
  .app-dialog-detail,
  .app-dialog-hint{
    padding-left:20px;
    padding-right:20px;
  }
  .app-dialog-input{
    width:calc(100% - 40px);
    margin-left:20px;
    margin-right:20px;
    font-size:16px;
  }
  .app-dialog-actions{
    padding:15px 20px 20px;
    flex-direction:column-reverse;
  }
  .app-dialog-btn{
    width:100%;
  }
}

/* v16.8.0 final cascade: keep the workspace refinement above legacy layers. */
.to-page>.journey{align-items:center;gap:0;margin:0 0 24px;padding:0 2px}
.to-page>.journey .journey-step{flex:0 1 auto;min-width:0;padding:7px 9px;border-color:transparent;border-radius:10px;background:transparent;box-shadow:none}
.to-page>.journey .journey-step b{width:24px;height:24px}
.to-page>.journey .journey-step small{display:none}
.to-page>.journey .journey-sep{flex:1 1 42px;max-width:72px;background:#cfd9e6}
.to-page>.journey .journey-step.now{background:#edf3ff;color:var(--ui-blue)!important}
.to-header{padding-bottom:18px;border-bottom:1px solid var(--ui-line)}
.to-header-lead{max-width:68ch;color:var(--ui-muted)}
.wiz-card{border-color:var(--ui-line);border-radius:18px;box-shadow:0 12px 32px rgba(26,48,75,.055)}

.program-setup-mode{max-width:1120px;padding-top:30px}
.program-simple-form{gap:0;overflow:visible;border:1px solid var(--ui-line);border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(28,50,78,.065)}
.program-stepper{display:flex;align-items:center;gap:10px;padding:17px 22px;border-bottom:1px solid var(--ui-line);background:#fbfcfe;border-radius:22px 22px 0 0}
.program-stepper span{display:flex;align-items:center;gap:8px;color:#718196;font-size:13px;font-weight:750;white-space:nowrap}
.program-stepper span b{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#e8edf4;color:#52667c;font-size:12px}
.program-stepper i{flex:1 1 24px;height:1px;background:#d8e0ea}
.program-stepper span.is-active{color:var(--ui-blue)}
.program-stepper span.is-active b{background:var(--ui-blue);color:#fff}
.program-simple-source{gap:0;padding:18px 22px;border-bottom:1px solid var(--ui-line);background:#f7f9fc}
.program-simple-source>div{min-height:58px;padding:5px 18px;border:0;border-right:1px solid var(--ui-line);border-radius:0;background:transparent}
.program-simple-source>div:first-child{padding-left:0}
.program-simple-source>div:last-child{border-right:0}
.program-simple-section{margin:0 22px;padding:26px 0 28px;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:transparent;box-shadow:none}
.program-simple-section-head>span{background:#edf3ff;color:var(--ui-blue)}
.program-standard-equipment{display:flex;align-items:baseline;gap:5px;margin:0 22px;padding:13px 0;border:0;border-bottom:1px solid var(--ui-line);border-radius:0;background:transparent;color:var(--ui-muted);font-size:13px}
.program-standard-equipment b{color:var(--ui-ink)}
.program-standard-icon{display:none}
.pg-simple-quality-card{min-height:108px;border-radius:13px;box-shadow:none}
.pg-simple-quality-card:hover{transform:none;border-color:#7c9eff;background:#fbfcff}
.pg-simple-quality-card.is-selected{border-color:var(--ui-blue);background:#f1f5ff;box-shadow:0 0 0 2px rgba(24,85,244,.08)}
.program-simple-submit{margin:0;padding:20px 22px;border:0;border-radius:0 0 22px 22px;background:#f7f9fc}
.program-result-top{padding-bottom:20px;border-bottom:1px solid var(--ui-line)}
.program-result-mode .pg-session{overflow:hidden;border-left:4px solid var(--ui-blue);border-radius:16px;box-shadow:0 10px 30px rgba(28,50,78,.055)}
.program-result-mode .pg-session-head{padding-bottom:14px;border-bottom:1px solid var(--ui-line)}
.program-result-mode .pg-dose-summary b{color:#123fba;font-size:.96rem}

/* v16.10.21: styles.css innehåller fortfarande den äldre mörka programvyn.
   Resultatläget är numera ljust, så block, rubrik och övningsrader måste ha
   egna opaka ytor. Annars blir de grå på iPhone när den äldre regeln vinner. */
.program-result-mode .pg-block-v076{
  background:#fff;
  border-color:#dbe4ef;
}
.program-result-mode .pg-block-head-v076{
  background:#f7f9fc;
  border-bottom-color:#dbe4ef;
}
.program-result-mode .pg-block-head-v076 h4,
.program-result-mode .pg-exercise-body strong{color:var(--ui-ink,#13233a)}
.program-result-mode .pg-block-head-v076 p,
.program-result-mode .pg-exercise-body p{color:var(--ui-muted,#607086)}
.program-result-mode .pg-block-head-v076 span{color:#176f91;border-color:#8fc9df;background:#f2fbff}
.program-result-mode .pg-exercise-row-v084{background:#fff}
.program-result-mode .pg-exercise-row-v084.is-locked{background:linear-gradient(90deg,#fff8fa 0,#fff 24%)}
.program-result-mode .pg-why-v076{background:#fff8e8;border-color:#edcf82;color:#704500}
.program-result-mode .pg-coach-extra small{background:#f7f9fc;border-color:#dbe4ef;color:#40546b}

.app-dialog-overlay{background:rgba(12,25,43,.48);backdrop-filter:blur(6px)}
.app-dialog-box{border-color:#d6e0eb;background:#fff;color:var(--ui-ink);box-shadow:0 28px 80px rgba(10,28,50,.28)}
.app-dialog-title{color:var(--ui-ink)}
.app-dialog-msg{color:var(--ui-muted)}
.app-dialog-detail,.app-dialog-hint{color:#718196}
.app-dialog-input{border-color:#aebed0;background:#fff;color:var(--ui-ink)}
.app-dialog-actions{border-top-color:#e2e8f0;background:#fbfcfe}
.app-dialog-cancel{border-color:#bdc9d7;background:#fff;color:#334a62}
.app-dialog-danger{border-color:#713d45;background:linear-gradient(180deg,#2b1b22,#21161b);color:#fff}
.app-dialog-danger .app-dialog-title{color:#fff}
.app-dialog-danger .app-dialog-msg{color:#ead9dc}
.app-dialog-danger .app-dialog-actions{border-top-color:rgba(255,255,255,.12);background:rgba(0,0,0,.1)}
.app-dialog-danger .app-dialog-cancel{border-color:#86646b;background:transparent;color:#fff}

@media(max-width:760px){
  .to-page>.journey{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .to-page>.journey .journey-step{flex:0 0 auto}
  .to-page>.journey .journey-sep{flex:0 0 22px}
  .program-simple-form{border-radius:17px}
  .program-stepper{overflow-x:auto;gap:7px;padding:13px 14px;border-radius:17px 17px 0 0}
  .program-stepper span{font-size:12px}
  .program-stepper i{flex:0 0 16px}
  .program-simple-source{grid-template-columns:1fr;padding:8px 15px}
  .program-simple-source>div{min-height:0;padding:10px 0;border-right:0;border-bottom:1px solid var(--ui-line)}
  .program-simple-source>div:last-child{border-bottom:0}
  .program-simple-section{margin:0 15px;padding:22px 0}
  .program-standard-equipment{align-items:flex-start;margin:0 15px;padding:12px 0;line-height:1.4}
  .program-simple-submit{position:sticky;bottom:8px;z-index:30;flex-direction:row;align-items:center;margin:8px;padding:10px;border:1px solid #d5dfeb;border-radius:14px;box-shadow:0 12px 32px rgba(23,50,77,.17)}
  .program-simple-submit>div small{display:none}
  .program-simple-submit .btn{width:auto;min-width:150px;min-height:46px}
}
@media(max-width:430px){
  .program-stepper i{display:none}
  .program-simple-submit>div{display:none}
  .program-simple-submit .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   v16.10.31 – balanserad rubrikhierarki för Football
   Football återanvänder Sports-motorn, men får en egen tydlig väg från
   utvecklingsnivå till rätt kravprofil.
   ═══════════════════════════════════════════════════════════════ */
.area-dot.area-football{background:#14b8a6}

@media(min-width:901px){
  .shell[data-page="home"] .home-pro-areas{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:9px;
  }
  .shell[data-page="home"] .home-pro-area{
    min-height:156px;
    padding:12px 11px;
  }
  .shell[data-page="home"] .home-pro-area-copy b{font-size:12.5px}
  .shell[data-page="home"] .home-pro-area-copy small{font-size:9.5px;line-height:1.3}
}

/* v16.10.33 – redaktionellt och professionellt förtroendelager */
.trust-v132{position:relative;max-width:1100px;margin:24px auto 0;padding:34px 34px 30px;overflow:hidden;border:1px solid #dce4ec;border-radius:22px;background:linear-gradient(145deg,#fff 0%,#fbfcfe 72%,color-mix(in srgb,var(--trust,#1855f4) 4%,#fff) 100%);box-shadow:0 12px 30px rgba(17,35,59,.055)}
.trust-v132::before{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:3px;background:linear-gradient(90deg,var(--trust,#1855f4),color-mix(in srgb,var(--trust,#1855f4) 22%,transparent) 65%,transparent)}
.football-hub .trust-v132{max-width:1120px}
.trust-v132-head{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:end;padding-bottom:25px;border-bottom:1px solid #e3e9ef}
.trust-v132-head>div>span{color:var(--trust,#1855f4);font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.trust-v132-head h2{margin:8px 0 0;color:#0b182b;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.025em;text-transform:none}
.trust-v132-head>p{max-width:610px;margin:0;color:#5b6b80;font-size:14.5px;line-height:1.7}
.trust-v132-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:24px}
.trust-v132-grid article{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;min-height:150px;padding:9px 26px 8px;border-left:1px solid #e2e8ef;background:transparent}
.trust-v132-grid article:first-child{padding-left:0;border-left:0}
.trust-v132-grid article:last-child{padding-right:0}
.trust-v132-grid article>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid color-mix(in srgb,var(--trust,#1855f4) 22%,#dce5ed);border-radius:999px;background:color-mix(in srgb,var(--trust,#1855f4) 9%,white);color:var(--trust,#1855f4);font-size:13px;font-weight:900}
.trust-v132-grid h3{margin:2px 0 8px;color:#0b182b;font-size:17px;line-height:1.2;text-transform:none}
.trust-v132-grid p{margin:0;color:#607086;font-size:13px;line-height:1.58}
.trust-v132-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:13px 16px;border:1px solid color-mix(in srgb,var(--trust,#1855f4) 18%,#dce5ed);border-radius:12px;background:color-mix(in srgb,var(--trust,#1855f4) 4%,white);color:#53667a;font-size:12.5px;line-height:1.55}
.trust-v132-note b{flex:0 0 auto;color:color-mix(in srgb,var(--trust,#1855f4) 72%,#0b182b)}
@media(max-width:900px){.trust-v132-head{grid-template-columns:1fr;gap:12px}}
@media(max-width:760px){.trust-v132{margin-top:14px;padding:25px 20px 21px;border-radius:18px;box-shadow:0 8px 22px rgba(17,35,59,.05)}.trust-v132-head{padding-bottom:20px}.trust-v132-grid{grid-template-columns:1fr;margin-top:0}.trust-v132-grid article,.trust-v132-grid article:first-child,.trust-v132-grid article:last-child{min-height:0;padding:18px 0;border:0;border-top:1px solid #e4eaf0}.trust-v132-grid article:first-child{border-top:0}.trust-v132-note{display:block;margin-top:2px}.trust-v132-note b{display:block;margin-bottom:4px}.trust-v132-head h2{font-size:23px}.trust-v132-head>p{font-size:13px;line-height:1.62}.trust-v132-grid h3{font-size:16px}}
@media(min-width:901px) and (max-width:1200px){
  .shell[data-page="home"] .home-pro-inner{
    grid-template-columns:minmax(0,1fr);
  }
  .shell[data-page="home"] .home-pro-copy{grid-column:1;grid-row:1;max-width:820px}
  .shell[data-page="home"] .home-pro-score{display:none}
  .shell[data-page="home"] .home-pro-areas{grid-column:1;grid-row:2}
  .shell[data-page="home"] .home-pro-area{min-height:160px;padding:11px 9px}
  .shell[data-page="home"] .home-pro-area-copy b{font-size:11.5px}
  .shell[data-page="home"] .home-pro-area-copy small{font-size:8.9px}
  .shell[data-page="home"] .home-pro-area-arrow{right:10px}
}

.football-hub{
  --football:#14b8a6;
  min-height:calc(100dvh - 68px);
  padding:28px 24px 72px;
  background:
    radial-gradient(circle at 88% 10%,rgba(20,184,166,.17),transparent 29%),
    linear-gradient(180deg,#07111f 0,#0a1728 430px,#f3f6fb 430px,#f3f6fb 100%);
}

/* ═══════════════════════════════════════════════════════════════
   v16.10.35 – Football som utvalt affärsområde på startsidan
   En större, bildburen ingång utan att de fyra huvudområdena tappar ordning.
   ═══════════════════════════════════════════════════════════════ */
.shell[data-page="home"] .home-pro-area-featured{
  grid-column:span 2;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  grid-template-rows:auto auto 1fr auto;
  align-content:start;
  column-gap:12px;
  padding:14px 16px;
  border-color:rgba(66,226,206,.42);
  background:
    linear-gradient(90deg,rgba(5,22,35,.98) 0%,rgba(7,29,42,.94) 53%,rgba(7,24,35,.45) 100%),
    var(--feature-image) center 42%/cover no-repeat;
  box-shadow:0 18px 44px rgba(0,0,0,.24),0 0 0 1px rgba(20,184,166,.08) inset;
}
.shell[data-page="home"] .home-pro-area-featured:hover{
  border-color:rgba(92,241,222,.78);
  background:
    linear-gradient(90deg,rgba(5,22,35,.96) 0%,rgba(7,29,42,.89) 53%,rgba(7,24,35,.35) 100%),
    var(--feature-image) center 42%/cover no-repeat;
}
.home-pro-feature-badge{
  grid-column:1 / 3;
  justify-self:start;
  margin-bottom:8px;
  padding:5px 8px;
  border:1px solid rgba(82,231,214,.36);
  border-radius:999px;
  background:rgba(20,184,166,.13);
  color:#75eadb;
  font-size:8px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.shell[data-page="home"] .home-pro-area-featured .home-pro-area-icon{grid-column:1;grid-row:2 / 4;margin:0}
.shell[data-page="home"] .home-pro-area-featured .home-pro-area-copy{grid-column:2;grid-row:2;margin:0;max-width:245px}
.shell[data-page="home"] .home-pro-area-featured .home-pro-area-copy b{font-size:18px;letter-spacing:-.01em}
.shell[data-page="home"] .home-pro-area-featured .home-pro-area-copy small{display:-webkit-box;margin-top:4px;color:rgba(225,238,242,.77);font-size:10px;line-height:1.35;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shell[data-page="home"] .home-pro-area-featured .home-pro-area-meta{grid-column:2;grid-row:3;align-self:end;margin-top:8px;color:#56ddcc}
.home-pro-feature-cta{grid-column:2;grid-row:4;align-self:end;margin-top:8px;color:#fff;font-size:10px;font-weight:850}
.shell[data-page="home"] .home-pro-area-featured .home-pro-area-arrow{top:auto;right:16px;bottom:14px;color:#69eadb;font-size:20px}

@media(min-width:901px){
  .shell[data-page="home"] .home-pro-areas{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(min-width:701px) and (max-width:900px){
  .shell[data-page="home"] .home-pro-areas{grid-template-columns:repeat(4,minmax(0,1fr)) !important;grid-template-rows:repeat(2,minmax(0,1fr)) !important}
  .shell[data-page="home"] .home-pro-area-featured{grid-column:span 2;min-height:86px !important}
  .shell[data-page="home"] .home-pro-area-featured .home-pro-area-copy small{display:none !important}
  .home-pro-feature-cta{display:none}
}
@media(max-width:700px){
  .shell[data-page="home"] .home-pro-areas{grid-template-columns:repeat(2,minmax(0,1fr)) !important;grid-template-rows:auto repeat(2,minmax(0,1fr)) !important}
  .shell[data-page="home"] .home-pro-area-featured{
    grid-column:1 / -1;
    min-height:clamp(92px,13.5vh,116px) !important;
    padding:11px 14px !important;
    grid-template-columns:34px minmax(0,1fr) auto !important;
    grid-template-rows:auto auto 1fr !important;
    align-items:start !important;
  }
  .home-pro-feature-badge{grid-column:1 / 3;margin-bottom:5px;padding:3px 7px;font-size:7px}
  .shell[data-page="home"] .home-pro-area-featured .home-pro-area-icon{grid-column:1;grid-row:2 / 4;width:30px !important;height:30px !important}
  .shell[data-page="home"] .home-pro-area-featured .home-pro-area-copy{grid-column:2;grid-row:2;margin:0 !important;max-width:240px}
  .shell[data-page="home"] .home-pro-area-featured .home-pro-area-copy b{font-size:16px !important}
  .shell[data-page="home"] .home-pro-area-featured .home-pro-area-copy small{display:-webkit-box !important;margin-top:2px;font-size:9px !important;line-height:1.28;-webkit-line-clamp:2}
  .shell[data-page="home"] .home-pro-area-featured .home-pro-area-meta{display:block !important;grid-column:2;grid-row:3;align-self:end;margin-top:4px;font-size:7.5px}
  .home-pro-feature-cta{display:none}
  .shell[data-page="home"] .home-pro-area-featured .home-pro-area-arrow{top:50% !important;right:13px !important;bottom:auto;transform:translateY(-50%) !important}
}
.football-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(255px,.55fr);
  gap:34px;
  align-items:end;
  max-width:1240px;
  min-height:500px;
  margin:0 auto;
  padding:48px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:30px;
  background:#07111f;
  box-shadow:0 30px 82px rgba(0,0,0,.31);
}
.football-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--football-image);
  background-size:cover;
  background-position:center;
  filter:saturate(.92) contrast(1.04);
}
.football-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(3,12,24,.99) 0%,rgba(4,15,29,.95) 37%,rgba(4,15,29,.60) 69%,rgba(4,15,29,.24) 100%);
}
.football-hero-copy{align-self:center;max-width:690px}
.football-back{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  color:rgba(230,238,249,.72);
  font-size:12px;
  font-weight:850;
  text-decoration:none;
}
.football-back:hover{color:#fff}
.football-badge{
  display:table;
  margin-top:17px;
  padding:7px 11px;
  border:1px solid rgba(45,212,191,.48);
  border-radius:999px;
  background:rgba(20,184,166,.15);
  color:#c9fff6;
  font-size:10px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.football-hero h1{
  max-width:13ch;
  margin:17px 0 14px;
  color:#fff;
  font-size:clamp(36px,4.4vw,58px);
  line-height:1.04;
  letter-spacing:-.05em;
  text-transform:none;
}
.football-hero-copy>p{
  max-width:56ch;
  margin:0;
  color:rgba(226,235,246,.82);
  font-size:16px;
  line-height:1.62;
}
.football-definition{
  display:flex;
  align-items:flex-start;
  gap:9px;
  max-width:620px;
  margin-top:21px;
  padding:13px 15px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(8,24,40,.64);
  color:rgba(223,233,245,.72);
  font-size:12px;
  line-height:1.5;
  backdrop-filter:blur(14px);
}
.football-definition b{flex:0 0 auto;color:#d1fff8}
.football-hero-stats{
  display:grid;
  gap:1px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:rgba(7,23,40,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(18px);
}
.football-hero-stats>div{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  min-height:92px;
  padding:17px 20px;
  background:rgba(255,255,255,.035);
}
.football-hero-stats>div+div{border-top:1px solid rgba(255,255,255,.12)}
.football-hero-stats strong{color:#fff;font-size:35px;line-height:1}
.football-hero-stats span{color:#b9c9dc;font-size:11px;font-weight:800;line-height:1.35;text-transform:uppercase;letter-spacing:.08em}

.football-intro,
.football-paths-wrap,
.football-profiles{
  max-width:1120px;
  margin:22px auto 0;
  border:1px solid #d9e3ee;
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 38px rgba(17,35,59,.07);
}
.football-intro{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:34px;
  align-items:center;
  padding:30px 32px;
}
.football-intro span,
.football-section-head>span{
  color:#0e9384;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.football-intro h2,
.football-section-head h2{
  margin:8px 0 0;
  color:#0b182b;
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.1;
  letter-spacing:-.025em;
  text-transform:none;
}
.football-intro p,
.football-section-head p{
  margin:0;
  color:#5d6c81;
  font-size:14.5px;
  line-height:1.68;
}
.football-paths-wrap,
.football-profiles{padding:30px 32px}
.football-section-head{max-width:760px}
.football-section-head>p{margin-top:10px}
.football-section-head>a{
  display:table;
  margin-bottom:18px;
  color:#587087;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.football-section-head>a:hover{color:#0e9384}
.football-paths{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:24px;
}
.football-path{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:360px;
  padding:0;
  overflow:hidden;
  border:1px solid #dce5ed;
  border-radius:20px;
  background:linear-gradient(160deg,#f9fbfd,#f1f7f7);
  color:#0b182b;
  text-decoration:none;
  transition:transform .17s ease,border-color .17s ease,box-shadow .17s ease;
}
.football-path::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:4px;
  background:linear-gradient(90deg,#0f766e,#2dd4bf);
}
.football-path:hover,
.football-path.active{transform:translateY(-2px);border-color:#72d8cc;box-shadow:0 17px 36px rgba(14,116,106,.12)}
.football-path.active{background:linear-gradient(160deg,#effcf9,#f7fffd)}
.football-path-image{
  position:relative;
  display:block;
  flex:0 0 146px;
  width:100%;
  overflow:hidden;
  background-color:#0a1728;
  background-position:center;
  background-size:cover;
}
.football-path-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(3,12,24,.03),rgba(3,12,24,.52));
}
.football-path-number{
  position:absolute;
  left:16px;
  bottom:14px;
  z-index:1;
  display:inline-flex;
  min-width:36px;
  min-height:27px;
  align-items:center;
  justify-content:center;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(4,20,34,.72);
  color:#cffff7;
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  backdrop-filter:blur(10px);
}
.football-path-copy{display:block;margin:18px 22px 0}
.football-path-copy small{display:block;color:#6c7d90;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.football-path-copy b{display:block;margin-top:5px;color:#0b182b;font-size:25px;line-height:1.1}
.football-path-copy p{margin:10px 0 0;color:#607086;font-size:13px;line-height:1.58}
.football-path-count{margin:0 22px;margin-top:auto;padding:18px 34px 20px 0;color:#0e9384;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.football-path-arrow{position:absolute;right:21px;bottom:20px;color:#0e9384;font-size:20px}

.football-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}
.football-profile-card{
  display:flex;
  flex-direction:column;
  min-height:230px;
  padding:22px;
  border:1px solid #dce5ed;
  border-radius:19px;
  background:linear-gradient(180deg,#fbfcfe,#f5f8fb);
}
.football-profile-meta{display:flex;justify-content:space-between;gap:12px;color:#607086;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}
.football-profile-meta span:first-child{color:#0e9384}
.football-profile-card h3{margin:18px 0 8px;color:#0b182b;font-size:22px;line-height:1.18;text-transform:none}
.football-profile-card p{margin:0 0 20px;color:#607086;font-size:13px;line-height:1.58}
.football-profile-card button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:47px;
  margin-top:auto;
  padding:0 15px;
  border:0;
  border-radius:12px;
  background:#0f766e;
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(15,118,110,.18);
}
.football-profile-card button:hover{background:#0b625c}
.football-profile-footnote{margin:18px 0 0;padding:15px 17px;border:1px solid #bfe7e2;border-radius:14px;background:#f0fdfa;color:#4f657a;font-size:12.5px;line-height:1.55}
.football-profile-footnote b{color:#0b625c}

@media(max-width:900px){
  .football-hub{padding:18px 16px 52px;background:linear-gradient(180deg,#07111f 0,#0a1728 390px,#f3f6fb 390px)}
  .football-hero{grid-template-columns:1fr;min-height:560px;padding:34px;background-position:center}
  .football-hero::after{background:linear-gradient(90deg,rgba(3,12,24,.98),rgba(3,12,24,.82) 58%,rgba(3,12,24,.38))}
  .football-hero-copy{max-width:650px}
  .football-hero-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .football-hero-stats>div{grid-template-columns:1fr;align-content:center;min-height:82px;text-align:center;padding:12px}
  .football-hero-stats>div+div{border-top:0;border-left:1px solid rgba(255,255,255,.12)}
  .football-hero-stats strong{font-size:28px}
  .football-hero-stats span{margin-top:4px;font-size:9px}
  .football-intro{grid-template-columns:1fr;gap:14px}
  .football-paths{grid-template-columns:1fr}
  .football-path{min-height:344px}
}
@media(max-width:620px){
  .football-hub{padding:10px 10px 38px;background:linear-gradient(180deg,#07111f 0,#0a1728 430px,#f3f6fb 430px)}
  .football-hero{min-height:620px;padding:24px 19px;border-radius:22px;align-content:space-between}
  .football-hero::before{background-position:64% center}
  .football-hero::after{background:linear-gradient(180deg,rgba(3,12,24,.96) 0%,rgba(3,12,24,.87) 58%,rgba(3,12,24,.58) 100%)}
  .football-badge{margin-top:12px;font-size:8.5px}
  .football-hero h1{max-width:12ch;margin:13px 0 10px;font-size:clamp(32px,9vw,40px)}
  .football-hero-copy>p{font-size:13.5px;line-height:1.53}
  .football-definition{display:block;margin-top:14px;padding:11px 12px;font-size:11px}
  .football-definition b{display:block;margin-bottom:3px}
  .football-hero-stats{border-radius:16px}
  .football-hero-stats>div{min-height:70px;padding:10px 5px}
  .football-hero-stats strong{font-size:24px}
  .football-hero-stats span{font-size:7.5px;letter-spacing:.05em}
  .football-intro,.football-paths-wrap,.football-profiles{margin-top:12px;border-radius:18px}
  .football-intro,.football-paths-wrap,.football-profiles{padding:21px 18px}
  .football-intro h2,.football-section-head h2{font-size:24px}
  .football-intro p,.football-section-head p{font-size:13px}
  .football-paths{margin-top:18px}
  .football-path{min-height:330px;padding:0}
  .football-path-image{flex-basis:142px}
  .football-path-copy{margin:16px 18px 0}
  .football-path-copy b{font-size:22px}
  .football-path-count{margin-left:18px;margin-right:18px;padding-bottom:18px}
  .football-profile-grid{grid-template-columns:1fr;margin-top:18px}
  .football-profile-card{min-height:218px;padding:19px}
}


/* Football v3.4 – two-path layout and profile-matched manuals */
.football-manual-category{grid-column:1/-1}
.football-manual-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}
.football-manual-test{padding:18px;border:1px solid #dce5ed;border-radius:16px;background:#f8fbfc}
.football-manual-title{display:flex;align-items:flex-start;gap:10px}
.football-manual-title>span{flex:none;padding:5px 8px;border-radius:8px;background:#dff6f2;color:#0f766e;font-size:11px;font-weight:900}
.football-manual-title h4{margin:2px 0 0;font-size:17px;line-height:1.25}
.football-manual-test>p{margin:8px 0 12px;color:#587087;font-size:13px}
.football-manual-test ul{display:grid;gap:7px;margin:0;padding-left:18px;color:#243a4d;font-size:13px;line-height:1.45}
.football-manual-test small{display:block;margin-top:12px;padding:9px 11px;border-radius:10px;background:#fff3cd;color:#735c0f;font-weight:700}
@media(max-width:760px){.football-manual-list{grid-template-columns:1fr}}


/* APProfile 16.14.12 – verifierad sidtextpersistens och stabila innehållsnycklar */
:root{
  --user-font-heading:'Questrial',Arial,sans-serif;
  --user-font-subheading:'DM Sans',Arial,sans-serif;
  --user-font-body:'DM Sans',Arial,sans-serif;
  --user-heading-size:48px;
  --user-subheading-size:28px;
  --user-body-size:16px;
}
body{font-family:var(--user-font-body,var(--font-body));}
main h1,.page-hero h1,.track-hero h1,.football-hero h1{font-family:var(--user-font-heading,var(--font-display))!important;}
main h2{font-family:var(--user-font-subheading,var(--font-display))!important;font-size:var(--user-subheading-size)!important;}
main h3,main h4{font-family:var(--user-font-subheading,var(--font-display))!important;}
main p,main li,.page-hero-lead{font-family:var(--user-font-body,var(--font-body));font-size:var(--user-body-size);}
.page-hero h1{font-size:clamp(34px,4.2vw,var(--user-heading-size))!important;}
main h3{font-size:clamp(18px,2vw,calc(var(--user-subheading-size) * .78));}
main h4{font-size:clamp(16px,1.7vw,calc(var(--user-subheading-size) * .66));}

.shell[data-page="program"] .program-page-content{
  width:100%;max-width:var(--max)!important;margin:0 auto;padding-left:24px;padding-right:24px;
}
.shell[data-page="program"] .pg-empty{width:100%;max-width:none;margin:28px 0 40px;padding:34px 38px;}
.shell[data-page="program"] .pg-empty>p{max-width:88ch;}
.shell[data-page="program"] .pg-empty-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px;}
.shell[data-page="program"] .pg-empty-steps li{min-height:76px;padding:4px 12px 4px 42px;border-right:1px solid var(--line);}
.shell[data-page="program"] .pg-empty-steps li:last-child{border-right:0;}
@media(max-width:760px){
  .shell[data-page="program"] .program-page-content{padding-left:14px;padding-right:14px;}
  .shell[data-page="program"] .pg-empty{margin:18px 0 30px;padding:23px 20px;}
  .shell[data-page="program"] .pg-empty-steps{grid-template-columns:1fr;}
  .shell[data-page="program"] .pg-empty-steps li{border-right:0;border-bottom:1px solid var(--line);padding-bottom:14px;}
  .shell[data-page="program"] .pg-empty-steps li:last-child{border-bottom:0;}
}

.account-settings-body{max-width:980px!important;}
.account-typography-card{grid-column:1/-1;}
.typography-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 16px;}
.typography-settings-grid article{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:color-mix(in srgb,var(--surface) 92%,var(--blue) 8%);}
.typography-settings-grid label{display:grid;gap:6px;}
.typography-settings-grid label>span{font-size:12px;font-weight:800;color:var(--muted);}
.typography-current-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--line) 78%,var(--blue) 22%);border-radius:11px;background:var(--surface);}
.typography-current-setting span{display:block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.typography-current-setting small{display:block;margin-top:2px;font-size:10px;line-height:1.35;color:var(--muted);}
.typography-current-setting strong{font-size:13px;color:var(--navy);text-align:right;}
.typography-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.65fr);gap:10px;align-items:end;}
.typography-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.typography-actions>span{font-size:12px;color:var(--muted);}
.typography-preview{min-height:62px;display:flex;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);color:var(--navy);}
.typography-preview-heading{font-family:var(--user-font-heading);font-size:min(var(--user-heading-size),38px);line-height:1.05;}
.typography-preview-subheading{font-family:var(--user-font-subheading);font-size:min(var(--user-subheading-size),30px);line-height:1.12;}
.typography-preview-body{font-family:var(--user-font-body);font-size:var(--user-body-size);line-height:1.55;color:var(--muted);}
@media(max-width:820px){.typography-settings-grid{grid-template-columns:1fr;}}
@media(max-width:520px){.typography-controls{grid-template-columns:1fr}.typography-current-setting{align-items:flex-start;flex-direction:column}.typography-current-setting strong{text-align:left}}

.manual-complete-page{display:grid;gap:22px;}
.manual-complete-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 30px;}
.manual-complete-intro h2{margin:8px 0 10px;}
.manual-complete-intro p{max-width:78ch;margin:0;color:var(--muted);line-height:1.65;}
.manual-complete-stat{flex:0 0 150px;display:grid;place-items:center;text-align:center;min-height:120px;border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--blue) 14%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--blue) 22%,var(--line));}
.manual-complete-stat strong{font-size:38px;color:var(--blue);line-height:1;}.manual-complete-stat span{max-width:12ch;font-size:12px;font-weight:800;color:var(--muted);}
.manual-area-filters{display:flex;flex-wrap:wrap;gap:9px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);}
.manual-area-filter{display:flex;align-items:center;gap:8px;min-height:39px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--text);font:inherit;font-size:13px;font-weight:800;cursor:pointer;}
.manual-area-filter span{display:grid;place-items:center;min-width:23px;height:23px;padding:0 6px;border-radius:999px;background:var(--soft);font-size:10px;}
.manual-area-filter.active{border-color:var(--blue);background:var(--blue);color:#fff;}.manual-area-filter.active span{background:rgba(255,255,255,.2);}
.manual-complete-category{display:grid;gap:14px;}
.manual-complete-category-head{display:flex;align-items:center;gap:13px;padding:0 4px;}.manual-complete-category-head>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--blue) 12%,var(--surface));color:var(--blue);font-size:20px;font-weight:900;}.manual-complete-category-head h2{margin:0;}.manual-complete-category-head p{margin:3px 0 0;color:var(--muted);font-size:12px;}
.manual-complete-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:start;}
.manual-protocol-card{border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:var(--sh);overflow:hidden;}
.manual-protocol-card summary{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:124px;padding:20px 22px;cursor:pointer;list-style:none;}.manual-protocol-card summary::-webkit-details-marker{display:none;}.manual-protocol-card summary>div{min-width:0;}.manual-protocol-card summary small{display:flex;flex-wrap:wrap;gap:5px;}.manual-protocol-card summary small span{padding:4px 7px;border-radius:999px;background:var(--soft);color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;}.manual-protocol-card summary h3{margin:10px 0 5px;color:var(--navy);text-transform:none;}.manual-protocol-card summary p{margin:0;color:var(--muted);font-size:12px;}.manual-protocol-card summary>span{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--soft);color:var(--blue);font-size:20px;transition:.18s;}.manual-protocol-card[open] summary>span{transform:rotate(45deg);}
.manual-protocol-body{padding:0 22px 22px;border-top:1px solid var(--line);}.manual-variants{margin:18px 0 0;padding:13px 15px;border-radius:12px;background:var(--soft);}.manual-variants b{font-size:12px;color:var(--navy);}.manual-variants ul{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0;padding:0;list-style:none;}.manual-variants li{padding:5px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:11px;}
.manual-protocol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;}.manual-protocol-grid article{padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 96%,var(--blue) 4%);}.manual-protocol-grid b{display:block;margin-bottom:6px;color:var(--blue);font-size:11px;text-transform:uppercase;letter-spacing:.05em;}.manual-protocol-grid p{margin:0;color:var(--text);font-size:13px;line-height:1.55;}
@media(max-width:820px){.manual-complete-list,.manual-protocol-grid{grid-template-columns:1fr}.manual-complete-intro{align-items:flex-start;flex-direction:column}.manual-complete-stat{width:100%;min-height:92px}.manual-protocol-card summary{min-height:0}.manual-area-filters{overflow-x:auto;flex-wrap:nowrap}.manual-area-filter{flex:0 0 auto}}

/* Typografi: innehållstext följer användarens val utan att förstora knappar och metadata. */
.page-hero-lead,.info-page-grid p,.how-page p,.program-main .pg-empty>p,.program-main .pg-empty-steps span,.program-simple-section p,.program-result-mode p,.manual-complete-page p,.track-page .card>p{font-size:var(--user-body-size)!important;}
main h3{font-family:var(--user-font-subheading,var(--font-display))!important;}

/* APProfile 16.14.13 – tydligare Work-nivåguide och redigerbar typografi */
main h1{font-size:clamp(30px,4.8vw,var(--user-heading-size))!important;}

.work-demand-guide{
  margin-top:16px;
  padding:30px;
  border:1px solid #dce5ed;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 48px rgba(7,17,31,.08);
}
.work-demand-guide-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:32px;align-items:end}
.work-demand-guide-head .eyebrow{color:#c85108}
.work-demand-guide-head h2{max-width:24ch;margin:8px 0 0;color:#0b182b;line-height:1.08}
.work-demand-guide-head>p{margin:0;color:#607086;line-height:1.65}
.work-occupation-finder{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(260px,1.2fr) auto;
  gap:14px;
  align-items:end;
  margin-top:26px;
  padding:18px;
  border:1px solid #f1c5a9;
  border-radius:17px;
  background:linear-gradient(145deg,#fff9f5,#fff);
}
.work-occupation-finder label{display:block;margin-bottom:7px;color:#27364a;font-size:12px;font-weight:850}
.work-occupation-result{min-height:76px;padding:12px 14px;border:1px solid #eadfd7;border-radius:12px;background:#fff}
.work-occupation-result span{display:block;color:#c85108;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.work-occupation-result strong{display:block;margin-top:3px;color:#0b182b;font-size:16px}
.work-occupation-result p{margin:4px 0 0;color:#607086;line-height:1.45}
.work-occupation-open,.work-level-card button{
  min-height:46px;padding:0 15px;border:0;border-radius:11px;background:#c85108;color:#fff;font:inherit;font-size:12.5px;font-weight:900;cursor:pointer;
}
.work-occupation-open:disabled{opacity:.42;cursor:not-allowed}
.work-occupation-open:not(:disabled):hover,.work-level-card button:hover{background:#9f3d05}
.work-level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:20px}
.work-level-card{display:flex;flex-direction:column;min-height:440px;padding:22px;border:1px solid #dde6ee;border-top:5px solid var(--level);border-radius:18px;background:linear-gradient(180deg,#fff,#f8fafc)}
.work-level-card-head{display:flex;gap:13px;align-items:center}
.work-level-card-head>span{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:13px;background:color-mix(in srgb,var(--level) 14%,white);color:var(--level);font-size:20px;font-weight:950}
.work-level-card-head small{display:block;color:#78879a;font-size:9px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.work-level-card h3{margin:3px 0 0;color:#0b182b;line-height:1.1}
.work-level-summary{margin:16px 0 0;color:#35485d;font-weight:650;line-height:1.55}
.work-level-card dl{display:grid;gap:12px;margin:18px 0 0}
.work-level-card dl>div{padding-top:11px;border-top:1px solid #e5eaf0}
.work-level-card dt{color:var(--level);font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.work-level-card dd{margin:5px 0 0;color:#607086;font-size:13px;line-height:1.52}
.work-level-module{margin:16px 0 18px;padding:12px;border-radius:11px;background:color-mix(in srgb,var(--level) 8%,white);color:#485b70;line-height:1.5}
.work-level-module b{color:var(--level)}
.work-level-card button{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;background:var(--level)}
.work-level-card button:hover{filter:brightness(.88);background:var(--level)}
.work-level-rule{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:18px;padding:16px 18px;border-radius:14px;background:#0b182b;color:#fff}
.work-level-rule b{white-space:nowrap;color:#ffd4b8}
.work-level-rule p{margin:0;color:#dbe5f0;line-height:1.55}

.site-text-format{display:grid;grid-template-columns:auto minmax(235px,1.2fr) minmax(170px,1fr) minmax(140px,180px);gap:10px;align-items:end;padding:11px;border:1px solid #dce5ef;border-radius:11px;background:#f7f9fc}
.site-text-format .typography-current-setting{min-height:38px;padding:7px 10px;background:#fff}
.site-text-format label{display:grid;gap:5px}
.site-text-format label>span{color:#607086;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.site-text-kind{align-self:center;padding:6px 9px;border-radius:999px;background:#e8eefc;color:#1749c7;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.07em}
.site-text-format .input{min-height:38px}

@media(max-width:980px){
  .work-demand-guide-head{grid-template-columns:1fr;gap:12px}
  .work-occupation-finder{grid-template-columns:1fr 1fr}
  .work-occupation-open{grid-column:1/-1}
}
@media(max-width:720px){
  .work-demand-guide{margin-top:12px;padding:21px 17px;border-radius:18px}
  .work-level-grid{grid-template-columns:1fr}
  .work-occupation-finder{grid-template-columns:1fr;padding:14px}
  .work-occupation-open{grid-column:auto;width:100%}
  .work-level-card{min-height:0;padding:19px}
  .work-level-rule{grid-template-columns:1fr;gap:6px}
  .work-level-rule b{white-space:normal}
  .site-text-format{grid-template-columns:1fr}
  .site-text-kind{justify-self:start}
}

/* APProfile 16.14.13 – Work-nivåguide och utökad texttypografi */