/* =======================================================================
   cctrl-band.css — app-bandet (.app-band + .akademi-nav), EN källa för alla
   ytor: apparna OCH den publika (2011 § 4.1, 2026-09-06).

   Blocket bodde i app-shell.css till 2026-09-06 och laddades bara med
   app-skalet. Sedan den publika ytan är en app bland de andra (Erik,
   app-band.md § Publik yta) renderas bandet också på Start, Priser, Bloggen,
   Poddarna och Kontakta oss, i båda inloggningslägena, och reglerna måste
   laddas överallt. Enqueuas efter cctrl-nav-claude.css, före app-shell.css.

   Publikt saknas .app-band-basens flex och inre containrar (de bor i
   app-shell.css, app-skalets klister). Basen nedan ger bandet det som
   :has(.akademi-nav)-reglerna förutsätter, med samma värden som app-skalet.
   ======================================================================= */
.app-band:has(.akademi-nav) {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.app-band:has(.akademi-nav) .app-band-inner {
  display: flex;
  width: 100%;
  box-sizing: border-box;
}
.app-band:has(.akademi-nav) .app-band-main {
  display: flex;
  flex: 1;
  min-width: 0;
}

/* =======================================================================
   KANONISK APP-BAND NAV (.akademi-nav) – EN KÄLLA, DELAS AV ALLA APPAR
   Speglar det publika navy-bandet .cctrl-gnav__band (cctrl-nav-claude.css,
   referens = Bloggen): samma höjd (42px), samma länkstil (platt text +
   terracotta aktiv-understrykning), INGA pills, INGA avskiljare. Gäller
   Akademin/Biblioteket/Gemenskap/Konto via EN källa (#83).
   Gold standard: globala tokens, navy är temaoberoende (lav-900 flippar ej →
   samma i ljus+mörk), vinner på specificitet (0,3,1) i st.f. !important.
   ======================================================================= */

/* Container: navy, ingen vit-variant-tuck, 42px höjd (matchar bloggbandet).
   0,3,1-selektorn slår body.app-shell-header .app-band (0,2,1) utan !important;
   0,2,0-selektorn täcker forum/icke-app-shell-sidor (slår .app-band 0,1,0). */
.app-band:has(.akademi-nav),
body.app-shell-header .app-band:has(.akademi-nav),
html[data-theme="dark"] .app-band:has(.akademi-nav),
html[data-theme="dark"] body.app-shell-header .app-band:has(.akademi-nav) {
  /* Navy är temaoberoende: de mörka selektorerna (0,4,2) återställer lav-900
     över vit-variantens dark-regel html[data-theme="dark"] body.app-shell-header
     .app-band (0,3,2, avsedd för Nyheter/Tips-bandet). Motivering inline = gold
     standard regel 2 (element som inte ärver en token-flip). */
  background: var(--lav-900);
  border-top: none;
  border-bottom: none;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  /* Sido-padding bort: innerns clamp-padding definierar vänsterkanten, exakt
     som det publika bandet .cctrl-gnav__band (utan padding) → texten startar
     under loggan. Slår .app-band-basens padding (0,1,0). */
  padding-left: 0;
  padding-right: 0;
  min-height: var(--gnav-band-h);
}
/* Inner-container = SAMMA kolumn som headern (.cctrl-gnav__inner) och det
   publika bandet (.cctrl-gnav__band-inner): 1280px centrerad + clamp-padding.
   Då startar AKADEMI/BIBLIOTEKET/GEMENSKAP/KONTO på samma x som loggan och som
   START på startsidan. (0,3,0) slår body.app-shell-header .app-band-inner (0,2,1). */
.app-band:has(.akademi-nav) .app-band-inner {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 40px);
  min-height: var(--gnav-band-h);
  align-items: center;
}
.app-band:has(.akademi-nav) .app-band-main {
  min-height: var(--gnav-band-h);
  align-items: center;
}

/* Nav-raden: spacing via gap (som bloggbandet), inga avskiljare */
.app-band .akademi-nav {
  display: flex;
  /* #1515 F: wrap gav 46/62/65 px bandhojd vid 390 px - kugghjulet, "Ordlista" och
     "Installningar" hamnade pa rad 2. Bandet ska vara 42 px i alla appar. Fler lankar
     an bredd loses med sidled-scroll, aldrig med radbrytning. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 22px;
  min-height: var(--gnav-band-h);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* #2204: flex-barn har min-width:auto som default - utan denna rad vagrar
     raden nagonsin krympa till overflow-x:auto:s scrollcontainer, och vaxer
     i stallet sidan bredare an viewporten (matt: 15px lack pa /news-feed/
     vid 360px, inloggad). Standardfixen for "overflow-x:auto funkar inte i
     ett flex-barn". */
  min-width: 0;
}
.app-band .akademi-nav::-webkit-scrollbar {
  display: none;
}
.app-band .akademi-nav > * {
  flex: none;
}
.app-band:has(.akademi-nav) .akademi-nav-sep {
  display: none;
}

/* Kontext-etikett (AKADEMI/BIBLIOTEKET…): subtil eyebrow, harmoniserad */
.app-band:has(.akademi-nav) .akademi-nav-context {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, #ffffff 55%, var(--lav-900));
}
/* #777 punkt 4: kontext-etiketten ÄR länken tillbaka till appens startsida.
   Samma eyebrow-utseende, länkbeteende utan pill/underline. */
.app-band:has(.akademi-nav) a.akademi-nav-context--link {
  text-decoration: none;
  transition: color 0.15s ease;
}
.app-band:has(.akademi-nav) a.akademi-nav-context--link:hover,
.app-band:has(.akademi-nav) a.akademi-nav-context--link:focus-visible {
  color: #ffffff;
  text-decoration: none;
  outline: none;
}
/* #777 punkt 8: ikon-ingång (kugghjul) – vertikal centrering i bandet */
.app-band:has(.akademi-nav) .akademi-nav-link--ikon {
  display: inline-flex;
  align-items: center;
}
.app-band:has(.akademi-nav) .akademi-nav-link--ikon svg { display: block; }

/* Länkar: identiska med .cctrl-gnav__band-link (platt, 0.8125rem/600) */
.app-band:has(.akademi-nav) .akademi-nav-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, #ffffff 70%, var(--lav-900));
  text-decoration: none;
  transition: color 0.15s ease;
}
.app-band:has(.akademi-nav) .akademi-nav-link:hover,
.app-band:has(.akademi-nav) .akademi-nav-link:focus-visible {
  color: #ffffff;
  background: transparent;
  text-decoration: none;
  outline: none;
}

/* Aktiv flik: terracotta-understrykning (som bloggbandet), ingen pill */
.app-band:has(.akademi-nav) .akademi-nav-link.is-active,
.app-band:has(.akademi-nav) .akademi-nav-link[aria-current="page"] {
  color: #ffffff;
  background: transparent;
  font-weight: 600;
  position: relative;
}
.app-band:has(.akademi-nav) .akademi-nav-link.is-active::after,
.app-band:has(.akademi-nav) .akademi-nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--terracotta-500);
}