/*
 * Sommerhimmel: det fælles udseende for alle apps i Familien Sommer hub (Kewins valg, 10. oktober 2026, i lys version).
 * Glas og farveforløb: en himmel af bløde farver bag frostede glaskort, app-mærker som farvede "squircles" med hvidt
 * ikon, Plus Jakarta Sans og Font Awesome Solid. Baggrund: docs/DESIGN-FORSLAG.md.
 *
 * Indlæses efter sommer-palette.css (og fonts/fonts.css). Gælder, når <html> har data-design="sommerhimmel"; sæt også
 * data-theme="light", så paletten og light-dark() altid giver den lyse version. De mørke værdier står klar til senere.
 * Kategorifarverne (--c-fjord …) er Sommer-paletten og ændres ikke. Kopieres til apps'ene af scripts/sync-shared.mjs.
 */

:root[data-design="sommerhimmel"] {
  --page: light-dark(#f3f0fa, #0b0e1d);
  --page-bg:
    radial-gradient(1100px 620px at 0% 0%, light-dark(#ffd9c6, #3b1d4c) 0%, transparent 62%),
    radial-gradient(1000px 700px at 100% 0%, light-dark(#cfe2ff, #11305c) 0%, transparent 62%),
    radial-gradient(900px 700px at 50% 100%, light-dark(#e4dbff, #0d3a46) 0%, transparent 62%),
    var(--page);
  --surface: light-dark(#ffffff, #1a1e34);
  --surface-2: light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.07));
  --ink: light-dark(#1b1a2e, #f3f2ff);
  --ink-2: light-dark(#4d4a66, #c3c1de);
  --muted: light-dark(#7d7a99, #8a88a8);
  --grid: light-dark(rgba(27, 26, 46, 0.08), rgba(255, 255, 255, 0.08));
  --axis: light-dark(rgba(27, 26, 46, 0.18), rgba(255, 255, 255, 0.16));
  --border: light-dark(rgba(27, 26, 46, 0.08), rgba(255, 255, 255, 0.1));
  --accent: light-dark(#3c5fe0, #8aa2ff);
  --on-accent: light-dark(#ffffff, #0b0e1d);

  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-num: "Plus Jakarta Sans", system-ui, sans-serif;
  --body-weight: 500;
  --display-weight: 800;
  --display-tracking: -0.02em;

  --radius-card: 26px;
  --radius-ctl: 999px;
  --radius-chip: 999px;
  --radius-img: 18px;
  --card-bg: light-dark(rgba(255, 255, 255, 0.58), rgba(30, 34, 62, 0.55));
  --card-border: 1px solid light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.09));
  --card-shadow: 0 10px 30px -14px light-dark(rgba(60, 50, 120, 0.35), rgba(0, 0, 0, 0.7));
  --card-shadow-hover: 0 20px 44px -18px light-dark(rgba(60, 50, 120, 0.5), rgba(0, 0, 0, 0.85));
  --card-lift: -3px;
  --card-blur: blur(20px) saturate(170%);
  --ctl-bg: light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.07));
  --btn-weight: 700;

  --ico-family: "Font Awesome 5 Pro";
  --ico-weight: 900;
  --ico-before-pos: static;
  --ico-duo: none;
}

/* ---------- Ikoner: Font Awesome Pro 5 (kun private repoer) ----------
 * Alle ikoner skrives som <i class="ico fad fa-<navn>">. Designet vælger stilen; Sommerhimmel bruger solid (900).
 */
.ico.fad {
  font-family: var(--ico-family, "Font Awesome 5 Pro");
  font-weight: var(--ico-weight, 900);
}
.ico.fad::before {
  position: var(--ico-before-pos, static);
}
.ico.fad::after {
  display: var(--ico-duo, none);
}

/* ---------- Fælles grundlag for apps uden egen opsætning ----------
 * Himlen bag siden, skriften og app-mærket. Appens egen CSS bruger tokens til kort, knapper og felter.
 */
:root[data-design="sommerhimmel"] body {
  min-height: 100vh;
  background: var(--page-bg);
  background-attachment: fixed;
  font-family: var(--font-body);
  font-weight: var(--body-weight);
}
:root[data-design="sommerhimmel"] :is(h1, h2, h3) {
  font-family: var(--font-display);
  letter-spacing: var(--display-tracking);
}

/* Glaskort: <div class="glass">, eller brug tokens direkte i appens egne klasser. */
:root[data-design="sommerhimmel"] .glass {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: var(--card-blur);
  backdrop-filter: var(--card-blur);
}

/* App-mærket: en farvet squircle med hvidt ikon. Sæt --app til appens farve fra paletten (fx var(--c-lyng)). */
:root[data-design="sommerhimmel"] .app-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(150deg, color-mix(in oklab, var(--app, var(--accent)) 60%, white), var(--app, var(--accent)) 55%, color-mix(in oklab, var(--app, var(--accent)) 80%, black));
  box-shadow: 0 8px 16px -8px color-mix(in oklab, var(--app, var(--accent)) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* ---------- Fælles ramme og topmenu (Strøm er pejlemærket, 10. oktober 2026) ----------
 * Alle apps med en menu bruger samme glasbjælke og sidebredde: <div class="sh-shell"><header class="sh-bar">
 * <h1 class="sh-brand"><span class="app-mark">…</span>Navn</h1><nav class="sh-nav"><a aria-current="page">…</a></nav></header>…</div>.
 * Menuen har egne farvetokens (--sh-*), fordi økonomi-appens shadcn-tokens overskriver --accent og --border med HSL-tal.
 * Siden vokser op til 1560 px og er responsiv under det. Menupunkter har ingen ikoner. Et andet niveau (fx
 * Økonomi: Kewins sider) er en <nav class="sh-sub"> inde i bjælken. Gruppeskel: <span class="sh-sep">.
 */
:root[data-design="sommerhimmel"] {
  --sh-active: light-dark(#3c5fe0, #8aa2ff);
  --sh-active-ink: light-dark(#ffffff, #0b0e1d);
  --sh-line: light-dark(rgba(27, 26, 46, 0.08), rgba(255, 255, 255, 0.1));
}
:root[data-design="sommerhimmel"] .sh-shell {
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 56px) 64px;
}
:root[data-design="sommerhimmel"] .sh-bar {
  position: sticky;
  top: 10px;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  margin: 12px 0 16px;
  padding: 8px 10px 8px 12px;
  border-radius: 22px;
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: var(--card-blur);
  backdrop-filter: var(--card-blur);
}
:root[data-design="sommerhimmel"] .sh-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 20px;
  font-weight: var(--display-weight);
  color: var(--ink);
  text-decoration: none;
}
:root[data-design="sommerhimmel"] .sh-brand .app-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 19px;
}
:root[data-design="sommerhimmel"] .sh-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
:root[data-design="sommerhimmel"] .sh-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
:root[data-design="sommerhimmel"] .sh-nav a:hover {
  background: var(--ctl-bg);
  color: var(--ink);
}
:root[data-design="sommerhimmel"] .sh-nav a:is([aria-current="page"], .active),
:root[data-design="sommerhimmel"] .sh-nav a:is([aria-current="page"], .active):hover {
  background: var(--sh-active);
  color: var(--sh-active-ink);
  font-weight: 700;
}
:root[data-design="sommerhimmel"] .sh-sep {
  width: 1px;
  height: 24px;
  margin: 0 6px;
  background: var(--sh-line);
}
:root[data-design="sommerhimmel"] .sh-sub {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 4px 2px;
  border-top: 1px solid var(--sh-line);
}
:root[data-design="sommerhimmel"] .sh-sub a {
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
}
:root[data-design="sommerhimmel"] .sh-sub a:hover {
  background: var(--ctl-bg);
  color: var(--ink);
}
:root[data-design="sommerhimmel"] .sh-sub a:is([aria-current="page"], .active),
:root[data-design="sommerhimmel"] .sh-sub a:is([aria-current="page"], .active):hover {
  background: color-mix(in oklab, var(--sh-active) 14%, transparent);
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 699px) {
  :root[data-design="sommerhimmel"] .sh-bar {
    top: 6px;
  }
}

/* ---------- App-skifteren (Kewins valg, 14. oktober 2026) ----------
 * sommer-apps.js (kopi fra hub'ens design/ med apps'ene fra summer-frontpage/apps.json) gør mærket i bjælken til en knap,
 * der folder <nav class="sh-apps"> ud lige under det: forsiden og alle apps som små app-mærker med navn. Uden scriptet
 * (fx det offentlige Skrald) ændres intet. Forsiden bruger samme gitter øverst på telefonen. Farven følger --sh-*, ikke
 * --muted/--accent, fordi økonomi-appens shadcn-tokens bruger de navne til HSL-tal.
 */
:root[data-design="sommerhimmel"][data-apps] .sh-bar .sh-brand {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
:root[data-design="sommerhimmel"][data-apps] .sh-bar .sh-brand::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -4px 4px 0 -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.45;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
:root[data-design="sommerhimmel"][data-apps] .sh-bar .sh-brand[aria-expanded="true"]::after {
  transform: translateY(4px) rotate(225deg);
}
:root[data-design="sommerhimmel"] .sh-apps {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 4px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--sh-line);
}
:root[data-design="sommerhimmel"] .sh-apps a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-2);
  text-decoration: none;
}
:root[data-design="sommerhimmel"] .sh-apps a:hover {
  background: var(--ctl-bg);
  color: var(--ink);
}
:root[data-design="sommerhimmel"] .sh-apps a[aria-current="page"] {
  background: color-mix(in oklab, var(--sh-active) 12%, transparent);
  color: var(--ink);
  font-weight: 700;
}
:root[data-design="sommerhimmel"] .sh-apps .app-mark {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 20px;
}
/* Forsidens mærke: hvid sol på orange forløb, som på forsiden og dens hjemmeskærmsikon. */
:root[data-design="sommerhimmel"] .sh-apps .app-mark.home {
  background: linear-gradient(150deg, #ffcf5a, #f59a3a 55%, #e8603c);
  box-shadow: 0 8px 16px -8px rgba(232, 96, 60, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
/* Meeple (Brætspil) findes ikke i Font Awesome; samme tegning som meeple.svg i Brætspil og på forsiden. */
:root[data-design="sommerhimmel"] .sh-apps i.fa-meeple {
  display: inline-block;
  width: 1.2em;
  height: 1.25em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8.5 8 47 48.5'%3E%3Ccircle cx='32' cy='15.7' r='7.6'/%3E%3Cpath d='M27.5 22.7C20 23.7 13 25.7 9.5 28.2c-1.5 1-1.5 3 0 4L21 37.7C19.5 43.2 16.5 49.2 13.5 52.7c-1 1.2-.2 3 1.5 3h12.5c1.2 0 2.2-.7 2.6-1.8L32 48.7l1.9 5.2c.4 1.1 1.4 1.8 2.6 1.8H49c1.7 0 2.5-1.8 1.5-3C47.5 49.2 44.5 43.2 43 37.7L54.5 32.2c1.5-1 1.5-3 0-4C51 25.7 44 23.7 36.5 22.7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8.5 8 47 48.5'%3E%3Ccircle cx='32' cy='15.7' r='7.6'/%3E%3Cpath d='M27.5 22.7C20 23.7 13 25.7 9.5 28.2c-1.5 1-1.5 3 0 4L21 37.7C19.5 43.2 16.5 49.2 13.5 52.7c-1 1.2-.2 3 1.5 3h12.5c1.2 0 2.2-.7 2.6-1.8L32 48.7l1.9 5.2c.4 1.1 1.4 1.8 2.6 1.8H49c1.7 0 2.5-1.8 1.5-3C47.5 49.2 44.5 43.2 43 37.7L54.5 32.2c1.5-1 1.5-3 0-4C51 25.7 44 23.7 36.5 22.7z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-design="sommerhimmel"] .sh-apps i.fa-meeple::before,
:root[data-design="sommerhimmel"] .sh-apps i.fa-meeple::after {
  content: none;
}