/* Vizslas eget tema med hunden som pekar ut nästa steg: marinblått, orange och Poppins som på vizsla.se. Används med "theme": "pointer". */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root {
  --raspberry: #e0700b; --raspberry-hi: #f58a1f; --raspberry-lo: #d0650a;
  --brown: #152039; --brown-2: #101a30;
  --blue: #2c5aa0; --blue-dark: #1d3f75;
  --beige: #f1ece4; --cream: #faf8f4; --blush: #f4f6fa; --line: #e3e6ee;
  --head: "Poppins", "Source Sans 3", Arial, sans-serif;
  --body: "Poppins", "Source Sans 3", Arial, sans-serif;
}

/* Prickrutnät som millimeterpapper */
body {
  background-color: #eef1f7;
  background-image: radial-gradient(circle, rgba(21, 32, 57, .14) 1.2px, transparent 1.6px);
  background-size: 22px 22px;
}

h1, h2, h3 { letter-spacing: -.01em; }
h2 { font-weight: 700; }
.kpi .value, .ytd-kpi .value, .sit-kpi .value { letter-spacing: -.02em; }

.wordmark {
  color: var(--brown); text-shadow: none; font-weight: 800; letter-spacing: -.03em; font-size: 2rem;
  display: inline-flex; align-items: center; gap: 10px;
}
/* Samma märke som favicon på vizsla.se */
.wordmark::before {
  content: ""; width: 34px; height: 34px; flex: none;
  background: no-repeat center / contain url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='8' fill='%23152039'/><path d='M7 21l6-6 4 4 8-9' fill='none' stroke='%23e0700b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.brand-sub { background: var(--raspberry); border-radius: 8px; font-weight: 600; font-size: .85rem; }
.fetched, .source-pick, .lang-pick { background-color: rgba(255, 255, 255, .92); }

.sheet { border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(21, 32, 57, .06), 0 18px 44px rgba(21, 32, 57, .14); }
.pagenav { background: var(--brown); }
.pages a { font-weight: 600; font-size: .95rem; }
.pages a.active { background: var(--raspberry); box-shadow: none; }
.pagesub { background: #fff; border-bottom-color: var(--line); }
.pagesub a { font-weight: 500; }

.cover-photo { background: var(--brown); }
.cover-overlay { background: linear-gradient(180deg, rgba(16, 26, 48, 0) 30%, rgba(16, 26, 48, .86) 100%); }
.cover-title { color: #fff; font-weight: 800; letter-spacing: -.03em; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.cover-overlay .cover-eyebrow { color: #ffb35c; }

.demo-banner { background: var(--brown); color: #fff; text-align: center; font-size: .9rem; padding: 6px 12px; }
.demo-banner b { color: #ffb35c; }