/* Shelly Wiki — tema
   Handboken tillhandahålls av StyraHem, och ska se ut som det.

   Färgerna är hämtade ur styrahem.se, inte påhittade:
     #007f00  butikens gröna — primär, aktiv, länk
     #e8e6d2  butikens sand — bär vänsterkolumnen och ger sajten sin värme

   Sanden är ram, inte bakgrund: läsytan är vit så att långa texter går att läsa
   i timmar. Monospace är reserverat för strängar som står ordagrant i appen —
   ser du JetBrains Mono ska texten gå att hitta i gränssnittet.
   Aldrig Shellys egen blå: sajten är fristående, inte officiell. */

:root {
  --paper: #f7f7f2;
  --card: #ffffff;
  --sand: #e8e6d2;
  --sand-soft: #f2f1e6;
  --sand-line: #d9d7c2;

  --ink: #171b18;
  --muted: #5b645d;
  --line: #dcdfd8;
  --line-soft: #eaece6;

  --brand: #007f00;
  --brand-deep: #00610b;
  --brand-soft: #e4f1e4;
  --brand-ink: #ffffff;

  /* Shelly-blå. Används ENDAST där Shelly själva talar: deras dokumentation,
     deras specifikationer, deras produkter. Aldrig för sajtens egen navigation
     eller våra egna påståenden — handboken är fristående och ska inte kunna
     förväxlas med officiell Shelly-dokumentation. Grönt = vi, blått = de. */
  --shelly: #1b7ce8;
  --shelly-deep: #1361bd;
  --shelly-soft: #e8f1fd;

  --danger: #a52016;
  --danger-soft: #fbedeb;
  --ok: #1c6047;
  --ok-soft: #e6f1ec;

  /* Samma röda som korsplankorna i loggan — reserverad för att ta bort/rensa
     val, aldrig för fel eller varningar (det är --danger). */
  --accent: #c1272d;
  --accent-deep: #96151a;
  --accent-soft: #fbe9ea;

  --shadow: 0 1px 2px rgba(23, 27, 24, 0.05);
  --shadow-lift: 0 4px 16px -6px rgba(23, 27, 24, 0.18);

  --font-display: Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, monospace;

  --sidenav: 16.5rem;
  --toc: 14rem;
  --topbar: 3.5rem;

  /* Loggan i stort format (startsidan): stolpe följer temat, plankorna är
     ledmärkesröda. Himmelsgradient bakom toppmenyn. */
  --logo-pole: #4f4a44;
  --logo-planks: #c1272d;
  --sky-top: #cfe6f7;
  --sky-bottom: #eef5fb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1210;
    --card: #161a17;
    --sand: #1d211b;
    --sand-soft: #191d18;
    --sand-line: #2b312a;

    --ink: #e8ebe6;
    --muted: #939c94;
    --line: #2a302b;
    --line-soft: #21261f;

    /* Butikens gröna är för mörk mot mörk bakgrund — ljusare tonvariant,
       inte samma hex. Kontrasten testas separat i mörkt läge. */
    --brand: #5cc45c;
    --brand-deep: #7ad47a;
    --brand-soft: #14251a;
    --brand-ink: #08170a;

    --shelly: #6aa9f0;
    --shelly-deep: #8fc0f5;
    --shelly-soft: #14202f;

    --danger: #f08a80;
    --danger-soft: #2c1512;
    --ok: #6fc2a0;
    --ok-soft: #11241c;

    --accent: #e8747a;
    --accent-deep: #f4a3a7;
    --accent-soft: #2b1416;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 4px 16px -6px rgba(0, 0, 0, 0.6);

    /* Ljus stolpe + något varmare röd syns bättre mot mörk bakgrund.
       Himlen blir en nattlig, dämpad blå. */
    --logo-pole: #cbcec6;
    --logo-planks: #e05a53;
    --sky-top: #17253d;
    --sky-bottom: #101720;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* hidden-attributet måste vinna även över klasser som sätter display
   (t.ex. .btn { display: inline-flex }) — annars visas dolda knappar ändå. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--card);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border: 2px solid var(--brand);
  border-radius: 4px;
  font-weight: 600;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* ---------- Topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar);
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-bottom) 70%,
    color-mix(in srgb, var(--sky-bottom) 55%, transparent) 100%
  );
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Butikens gröna som en hårfin remsa överst — sajten är StyraHems, och det
   syns innan man läst ett ord. */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--brand);
}

.topbar-inner {
  height: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}

/* Logotypen: svenskt vinterledsmärke (korsade röda plankor på stolpe). */
.brand-mark {
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
  display: block;
}

/* Avsändaren. En betald handbok måste vara tydlig med vem som står bakom den. */
.byline {
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.byline strong {
  color: var(--brand);
  font-weight: 600;
}

.byline:hover {
  border-bottom-color: var(--brand);
}

@media (max-width: 40rem) {
  .byline {
    display: none;
  }
}

.langswitch {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  border-radius: 999px;
  padding: 2px;
}

.langswitch a {
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  line-height: 1.4;
  transition: background 0.15s, color 0.15s;
}

.langswitch a:hover {
  color: var(--ink);
}

.langswitch a[aria-current="true"] {
  background: var(--brand);
  color: var(--brand-ink);
}

.menu-toggle {
  display: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  min-height: 2.25rem;
}

@media (max-width: 64rem) {
  .menu-toggle {
    display: block;
  }
}

/* ---------- Shell ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidenav) minmax(0, 1fr) var(--toc);
  gap: 0;
  max-width: 90rem;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 75rem) {
  .shell {
    grid-template-columns: var(--sidenav) minmax(0, 1fr);
  }
}

@media (max-width: 64rem) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Sidnav ---------- */

.sidenav {
  position: sticky;
  top: var(--topbar);
  max-height: calc(100vh - var(--topbar));
  overflow-y: auto;
  padding: 2rem 1.25rem 3rem;
  background: var(--sand);
  border-right: 1px solid var(--sand-line);
  min-height: calc(100vh - var(--topbar));
}

@media (max-width: 64rem) {
  .sidenav {
    display: none;
    position: static;
    max-height: none;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--sand-line);
  }

  .sidenav.is-open {
    display: block;
  }
}

.nav-group + .nav-group {
  margin-top: 1.5rem;
}

.nav-heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.sidenav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidenav a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-decoration: none;
  color: var(--ink);
  border-left: 3px solid transparent;
  transition: background 0.13s, border-color 0.13s;
}

.sidenav a:hover {
  background: color-mix(in srgb, var(--card) 55%, transparent);
}

.sidenav a[aria-current="page"] {
  background: var(--card);
  border-left-color: var(--brand);
  font-weight: 600;
  box-shadow: var(--shadow);
}

/* ---------- Main ---------- */

.main {
  min-width: 0;
  padding: 2.5rem 3rem 4rem;
}

@media (max-width: 52rem) {
  .main {
    padding: 2rem 1.25rem 3rem;
  }
}

.article {
  max-width: 44rem;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 0.6rem;
}

.article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
}

.lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.article h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 2.75rem 0 0.75rem;
  scroll-margin-top: calc(var(--topbar) + 1rem);
}

.article h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 2rem 0 0.5rem;
  scroll-margin-top: calc(var(--topbar) + 1rem);
}

.article p {
  margin: 0 0 1rem;
}

.article ul,
.article ol {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

.article li {
  margin-bottom: 0.45rem;
}

.article li::marker {
  color: var(--brand);
}

.article a {
  color: var(--brand-deep);
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
  text-underline-offset: 2px;
}

.article a:hover {
  text-decoration-color: var(--brand);
}

/* Knapp-länkar inuti artikeln får INTE ärva den gröna länkfärgen — annars blir
   t.ex. "Jämför valda" grön text på grön knapp. Två klasser (0,2,1) vinner. */
.article a.btn {
  color: var(--ink);
  text-decoration: none;
}
.article a.btn-primary {
  color: var(--brand-ink);
}

.article strong {
  font-weight: 600;
}

/* Ordagranna UI-strängar. Ser du det här ska du hitta texten i appen. */
.article code {
  font-family: var(--font-mono);
  font-size: 0.8375em;
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  padding: 0.08em 0.34em;
  border-radius: 4px;
  white-space: nowrap;
}

.article pre {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 6px;
  padding: 1rem 1.125rem;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 1.25rem 0;
}

.article pre code {
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
  font-size: inherit;
}

.article blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.125rem;
  border-left: 3px solid var(--sand-line);
  color: var(--muted);
}

.article hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* ---------- Figurer och skärmdumpar ---------- */

.figure {
  margin: 1.75rem 0;
}

.figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

.figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Appskärmdumpar är höga och smala. Ram som en telefon och begränsad bredd,
   så en mobilbild inte sträcks ut över hela textkolumnen. Flera i rad läggs
   bredvid varandra via <div class="shots"> runt dem. */
.figure-shot {
  max-width: 15rem;
}

.figure-shot img {
  border: 6px solid #14181d;
  border-radius: 22px;
  box-shadow: var(--shadow-lift);
  background: #000;
}

@media (prefers-color-scheme: dark) {
  .figure-shot img {
    border-color: #2a3038;
  }
}

.figure-shot figcaption {
  text-align: center;
}

/* Flera skärmdumpar sida vid sida: omslut dem i <div class="shots">…</div>
   i Markdown (rå HTML) så radar de upp sig och bryter snyggt på mobil. */
.shots {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 1.75rem 0;
}

.shots .figure {
  margin: 0;
  flex: 0 1 13rem;
}

/* ---------- Tabeller ---------- */

.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table-scroll th,
.table-scroll td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.table-scroll thead th {
  background: var(--sand-soft);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--sand-line);
  white-space: nowrap;
}

.table-scroll tbody tr:last-child td {
  border-bottom: 0;
}

.table-scroll tbody tr:hover {
  background: color-mix(in srgb, var(--sand-soft) 45%, transparent);
}

.table-scroll td code {
  white-space: nowrap;
}

/* ---------- Innehållsförteckning ---------- */

.toc {
  position: sticky;
  top: var(--topbar);
  align-self: start;
  max-height: calc(100vh - var(--topbar));
  overflow-y: auto;
  padding: 2.75rem 1.25rem 3rem 0;
  font-size: 0.8125rem;
}

@media (max-width: 75rem) {
  .toc {
    display: none;
  }
}

.toc-heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6rem;
  padding-left: 0.75rem;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.toc a {
  display: block;
  padding: 0.28rem 0 0.28rem 0.75rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.45;
}

.toc a:hover {
  color: var(--ink);
}

.toc a.is-active {
  color: var(--brand-deep);
  border-left-color: var(--brand);
  font-weight: 600;
}

.toc-d3 a {
  padding-left: 1.5rem;
  font-size: 0.78rem;
}

/* ---------- Pager ---------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 44rem;
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.pager-link:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lift);
  transform: translateY(-1px);
}

.pager-link span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.pager-link strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.35;
}

.pager-next {
  text-align: right;
}

@media (max-width: 40rem) {
  .pager {
    grid-template-columns: 1fr;
  }

  .pager-next {
    text-align: left;
  }
}

/* ---------- Rapportera fel ---------- */

.report-line {
  max-width: 44rem;
  margin: 2rem 0 0;
  font-size: 0.8125rem;
}

.report-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.report-link::before {
  content: "✎ ";
}

.report-link:hover {
  color: var(--brand-deep);
}

/* ---------- Omdömen ---------- */

.reviews {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.review-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.review {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.review-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.stars {
  color: #e6a817;
  letter-spacing: 0.05em;
  font-size: 0.9375rem;
}

.review-empty {
  color: var(--muted);
  font-size: 0.9375rem;
  padding: 0.5rem 0 1rem;
}

/* ---------- Footer ---------- */

.foot {
  border-top: 1px solid var(--line);
  background: var(--sand-soft);
}

.foot-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--muted);
}

.foot a {
  color: var(--brand-deep);
  font-weight: 600;
  text-underline-offset: 2px;
}

/* ---------- 404 ---------- */

.notfound {
  max-width: 34rem;
  margin: 0 auto;
  padding-top: 5rem;
}

.nf-home {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--brand-deep);
  border-bottom: 2px solid var(--brand);
  padding-bottom: 1px;
}

.nf-home:hover {
  border-bottom-color: var(--ink);
}

/* ---------- Startsida ---------- */

.home main {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Fotografisk hero: fjällandskap med ledmärke. Bilden är ljus (snö/himmel),
   så heron är alltid ljus med mörk text i båda teman — en foto-sektion. */
/* Transparent hero — loggan och rubriken står på sidans egen bakgrund,
   himlen har flyttat upp i menyraden. */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-top: 1rem;
  padding: 3rem 1.5rem 2.25rem;
  display: grid;
  justify-items: center;
  text-align: center;
  isolation: isolate;
}

/* Fjäll-hero: FAL-genererat landskap bakom loggan. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #dfe6ea url(/assets/img/hero.webp) center / cover no-repeat;
}

/* Tema-anpassad slöja — ljus i ljust läge, mörk i mörkt. Tunnare upptill så
   fjället skymtar igenom, tätare nedtill där texten sitter. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--paper) 52%, transparent) 0%,
    color-mix(in srgb, var(--paper) 78%, transparent) 55%,
    color-mix(in srgb, var(--paper) 90%, transparent) 100%
  );
}

/* Den stora loggan: väl synlig, temaanpassad. */
.hero-logo {
  width: clamp(6rem, 15vw, 10rem);
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;
  filter: drop-shadow(0 3px 8px rgba(23, 27, 24, 0.14));
}

@media (max-width: 40rem) {
  .hero {
    padding: 2rem 1.25rem 1.5rem;
  }
  .hero-logo {
    margin-bottom: 1.25rem;
  }
}

.hero-inner {
  max-width: 40rem;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 1rem;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  color: var(--ink);
}

.hero-intro {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 1.75rem;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-lg {
  font-size: 0.9375rem;
  padding: 0.65rem 1.35rem;
  min-height: 2.75rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Enhetsväggen: hela Shelly-sortimentet som en yta. Det här är sajtens
   koppling till Shelly — deras produkter, inte deras varumärke. Bilderna är
   dekor, därför aria-hidden; databasen är den riktiga ingången. */
/* Höjden är låst till exakt två rader och resten klipps bort. Antalet celler
   går aldrig jämnt upp mot ett responsivt kolumnantal, och en halvfylld sista
   rad läser som slarv. Bättre att alltid visa en hel rektangel. */
.wall {
  --cell: 3.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));
  grid-auto-rows: var(--cell);
  gap: 1px;
  height: calc(var(--cell) * 2 + 1px);
  overflow: hidden;
  margin: 3rem 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--line);
}

@media (max-width: 40rem) {
  .wall {
    --cell: 3rem;
  }
}

.wall-cell {
  display: grid;
  place-items: center;
  background: #fff;
  padding: 0.35rem;
}

.wall-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Lätt nedtonat så väggen läses som en yta — men produkterna ska fortfarande
     gå att känna igen. Full gråskala gjorde dem till grå klumpar. */
  opacity: 0.72;
  transition: opacity 0.2s, transform 0.2s;
}

.wall-cell:hover img {
  opacity: 1;
  transform: scale(1.15);
}

.wall-caption {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0;
}

/* Ingångskort — startsidans huvudsakliga wayfinding. */
.explore {
  padding: 3rem 0 1rem;
  border-top: 1px solid var(--line);
  margin-top: 2.5rem;
}

.explore-head {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

.doorways {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 40rem) {
  .doorways {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 60rem) {
  .doorways {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.doorway {
  position: relative;
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: border-color 0.14s, box-shadow 0.14s, transform 0.14s;
}

.doorway:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lift);
  transform: translateY(-2px);
}

.doorway strong {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  display: block;
  margin-bottom: 0.3rem;
}

.doorway p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
}

.doorway-go {
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  color: var(--brand);
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.14s, transform 0.14s;
}

.doorway:hover .doorway-go {
  opacity: 1;
  transform: translateX(2px);
}

.promise {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 3rem 0;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

@media (min-width: 52rem) {
  .promise {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.promise-item h2 {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--brand);
}

.promise-item p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  padding-left: 0.75rem;
}

.chapters {
  padding: 0 0 4rem;
  border-top: 1px solid var(--line);
  padding-top: 2.5rem;
}

.chapters-head {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.75rem 1.5rem;
}

.chapter-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--sand-line);
}

.chapter-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapter-group li {
  margin-bottom: 0.3rem;
}

.chapter-group a {
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.chapter-group a:hover {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Enhetsdatabas ---------- */

/* Enhetsvyn är en tabell förklädd till kort — den behöver mer bredd än löptext. */
.article-wide {
  max-width: 64rem;
}

.devnote {
  font-size: 0.8125rem;
  color: var(--muted);
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  margin-bottom: 1.5rem;
}

.filters {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line);
}

/* Kompakt filterrad: tre dropdowns i stället för tre rader chips — samma
   filtrering på en bråkdel av höjden, särskilt på mobil. */
.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 9rem;
  min-width: 8rem;
}

.filter-select {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  min-height: 2.75rem;
  cursor: pointer;
}

.filter-select:hover {
  border-color: var(--brand);
}

.filter-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

@media (max-width: 40rem) {
  .filter-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem;
  }
}

.filter-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.4rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  cursor: pointer;
  min-height: 2.75rem;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.chip:hover {
  border-color: var(--brand);
}

.chip.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
}

.chip-feat.is-on::before {
  content: "✓ ";
}

.devbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin: 1.25rem 0 0.25rem;
}

.devcount {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

.devcount span {
  font-weight: 700;
  color: var(--ink);
}

.devbar-actions {
  display: flex;
  gap: 0.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  min-height: 2.75rem;
  text-decoration: none;
  transition: border-color 0.13s, background 0.13s;
}

.btn:hover {
  border-color: var(--brand);
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.btn-primary:hover:not(:disabled) {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--line);
}

.btn-primary:disabled {
  background: var(--muted);
  border-color: var(--muted);
}

.selecthint {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

/* Katalogen är ett rutnät av klickbara produktkort: bild överst, namn och
   nyckelspecar under, hela kortet länkar till produktsidan. Jämför-kryssrutan
   ligger ovanpå som en fristående knapp så den aldrig hamnar inuti länken. */
.devgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem;
}

.dev {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: border-color 0.13s, box-shadow 0.13s;
}

.dev:hover {
  border-color: var(--sand-line);
  box-shadow: var(--shadow-lift);
}

.dev.is-picked {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand);
}

.dev-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.dev-link:hover .dev-name {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Jämför-knappen: 44px träffyta, men en liten rund markör inuti — stor nog
   att peka på, liten nog att inte dominera kortet. */
.dev-pick {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.dev-pick-mark {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--card);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  box-shadow: var(--shadow);
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.dev-pick:hover .dev-pick-mark {
  border-color: var(--brand);
}

.dev-pick[aria-pressed="true"] .dev-pick-mark {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

/* Produktbilderna är foton på vit botten. I mörkt tema får de en egen ljus
   platta i stället för att svärtas — en Shelly ska se ut som en Shelly. */
.dev-figure {
  display: grid;
  place-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line-soft);
  padding: 1.1rem;
}

.dev-img {
  width: 100%;
  max-width: 6rem;
  height: 6rem;
  object-fit: contain;
}

.dev-img-none {
  background: var(--sand-soft);
  border: 1px dashed var(--sand-line);
  border-radius: 5px;
}

.dev-body {
  display: block;
  padding: 0.85rem 0.9rem 1rem;
}

.dev-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}

.dev-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
}

.tag {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  white-space: nowrap;
}

/* Äldre generationer tonas ned: de är fortfarande giltiga, men de är inte
   det du köper i dag. */
.tag-gen1,
.tag-gen2-plus,
.tag-gen2-pro {
  background: var(--sand-soft);
  color: var(--muted);
  border-color: var(--sand-line);
}

.dev-sub {
  font-size: 0.75rem;
  color: var(--muted);
}

.dev-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.dev-specs {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.75rem;
}

.dev-spec {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}

.dev-spec-k {
  color: var(--muted);
}

.dev-spec-v {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dev-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0.6rem 0 0;
}

.badge {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

.nomatch {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--muted);
  background: var(--sand-soft);
  border: 1px dashed var(--sand-line);
  border-radius: 8px;
}

/* ---------- Färgkodning ---------- */

.swatch-table td:first-child {
  white-space: nowrap;
}

.swatch {
  display: inline-block;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  vertical-align: -0.2rem;
  margin-right: 0.5rem;
}

.swatch-blue { background: #1b6fd6; }
.swatch-red { background: #d6372b; }
.swatch-green { background: #4cae2a; }
.swatch-orange { background: #e88423; }
.swatch-black { background: #222; }
.swatch-white { background: #f2f2f2; }
.swatch-grey { background: #9aa0a6; }
.swatch-brown { background: #8a5a2b; }
.swatch-purple { background: #8b46c4; }
.swatch-yellow { background: #e6c02a; }

/* Färgkort: färgruta + representativ produktbild. */
.colorcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.colorcard {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
}

.colorcard-bar {
  height: 0.4rem;
}

.colorcard-img {
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0.75rem;
}

.colorcard-img img {
  width: 100%;
  height: 5.5rem;
  object-fit: contain;
}

.colorcard-body {
  padding: 0.6rem 0.75rem 0.85rem;
}

.colorcard-body strong {
  font-family: var(--font-display);
  font-size: 0.9375rem;
}

.colorcard-body p {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---------- Produktsida ---------- */

.product-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0.5rem 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 40rem) {
  .product-head {
    grid-template-columns: 15rem 1fr;
    gap: 2rem;
    align-items: start;
  }
}

.product-figure {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
  display: grid;
  place-items: center;
}

.product-img {
  width: 100%;
  max-width: 13rem;
  height: auto;
  object-fit: contain;
}

.product-img-none {
  width: 100%;
  aspect-ratio: 1;
  background: var(--sand-soft);
  border: 1px dashed var(--sand-line);
  border-radius: 8px;
}

.product-intro h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.product-intro .lede {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  font-size: 1.0625rem;
}

.product-kb {
  font-weight: 600;
  color: var(--shelly-deep);
  text-decoration: none;
}

.product-kb:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.product-spec {
  width: 100%;
}

.product-spec th[scope="row"] {
  width: 40%;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  background: var(--sand-soft);
}

.product-spec td {
  font-variant-numeric: tabular-nums;
}

.kicker a {
  color: var(--muted);
  text-decoration: none;
}

.kicker a:hover {
  color: var(--brand-deep);
}

/* ---------- Jämförelse (/compare/) ---------- */

.cmppage-back {
  margin: -0.25rem 0 1.5rem;
  font-size: 0.875rem;
}

.cmppage-back a {
  color: var(--muted);
  text-decoration: none;
}

.cmppage-back a:hover {
  color: var(--brand-deep);
}

/* Verktygsraden ovanför tabellen: skillnadsväxel + rensa-alla. Döljs helt när
   inget är valt (renderas av compare.js). */
.cmp-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.cmp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.cmp-toggle input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--brand);
  cursor: pointer;
}

.cmp-hint {
  font-size: 0.875rem;
  color: var(--muted);
  margin: -0.5rem 0 1.25rem;
}

/* Tomläge: 0 valda enheter. Stor, tydlig uppmaning i stället för tre tomma
   sektioner — det var precis det gamla gränssnittet gjorde fel. */
.cmp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--sand-line);
  border-radius: 12px;
  background: var(--sand-soft);
}

.cmp-empty-text {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink);
}

/* ---------- Jämförelsetabellen ---------- */
/* Enheterna är kolumner, specarna är rader. Wrappern är sticky under toppbaren
   (samma knep som .sidenav) och äger BÅDA scrollriktningarna internt — det är
   medvetet: en ensam overflow-x:auto-behållare gör webbläsaren om overflow-y
   till "auto" ändå (CSS overflow-specen), vilket i praktiken kopplar loss
   thead:s "sticky top" från sidans scroll. Genom att låta samma behållare äga
   både x- och y-scroll blir sticky-referensen entydig och header/första
   kolumn förblir synliga oavsett scrollriktning. Sidan själv scrollar aldrig
   i sidled — bara den här behållaren gör. */
.cmp-table-wrap {
  position: sticky;
  top: var(--topbar);
  max-height: calc(100vh - var(--topbar) - 1.5rem);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  overscroll-behavior: contain;
}

/* En sticky ruta behöver "landningsbana" under sig i sin innehållande block
   för att kunna sitta fast medan man scrollar — annars tar rutans egen botten
   slut i exakt samma ögonblick som den skulle börja sitta fast (den här sidan
   har annars inte mycket innehåll efter tabellen). compare.js sätter denna
   höjd (inline, via --cmp-runway) utifrån tabellens FAKTISKA höjd just nu —
   en statisk gissning här skulle antingen bli för kort för en stor tabell
   eller lämna ett enormt tomrum efter en kort (t.ex. "visa bara skillnader"
   med få rader, eller bara ett kort valt). */
.article:has(.cmp-table-wrap:not(.is-collapsed)) {
  min-height: var(--cmp-runway, auto);
}

/* 0 valda: fälls ihop till höjd 0 i stället för display:none — se kommentaren
   i build.mjs om varför ett sticky-element aldrig får bli display:none. */
.cmp-table-wrap.is-collapsed {
  visibility: hidden;
  height: 0;
  min-height: 0;
  max-height: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
}

.cmp-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
}

.cmp-table th,
.cmp-table td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.cmp-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sand-soft);
  border-bottom: 1px solid var(--sand-line);
  box-shadow: 0 2px 4px -2px rgba(23, 27, 24, 0.12);
}

.cmp-corner,
.cmp-row-label {
  width: 8rem;
  min-width: 7.5rem;
  max-width: 9rem;
}

.cmp-corner {
  left: 0;
  z-index: 3;
}

/* Första kolumnen (spec-etiketter) är sticky i sidled, oberoende av den
   lodräta stickyn på thead — de två axlarna stör inte varandra eftersom det
   är samma scrollcontainer (.cmp-table-wrap) för sidled och sidan för lodrätt. */
.cmp-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  box-shadow: 2px 0 4px -2px rgba(23, 27, 24, 0.12);
}

.cmp-table td {
  font-variant-numeric: tabular-nums;
  min-width: 10rem;
}

/* Skillnaderna är hela anledningen att jämföra — de ska synas direkt. */
.cmp-table td.is-diff {
  background: var(--brand-soft);
  font-weight: 600;
}

/* Kort-huvudena: bild, namn, en liten borttagningsknapp uppe i hörnet och en
   länk till produktsidan. Samma bredd som en dataenhets-kolumn.
   position:sticky (ärvt från ".cmp-table thead th") gör cellen till en giltig
   positioneringskontext, så borttagningsknappen kan vara absolut positionerad
   utan att ett extra "position: relative" krockar med stickyn. */
.cmp-card-head,
.cmp-add-head {
  min-width: 10rem;
  text-align: center;
}

.cmp-card-head {
  padding-top: 0.5rem;
}

.cmp-card-remove {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}

.cmp-card-remove:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.cmp-card-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.15rem 1.75rem 0;
}

.cmp-card-link:hover .cmp-card-name {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmp-card-img,
.cmp-dialog-item-img {
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 3px;
  flex: none;
}

.cmp-card-img {
  width: 4rem;
  height: 4rem;
}

.cmp-card-img-none {
  background: var(--sand-soft);
  border-style: dashed;
  border-color: var(--sand-line);
}

.cmp-card-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Lägg till-kolumnen: streckad ruta, samma bredd som en enhetskolumn, alltid
   sist. */
.cmp-add-head {
  vertical-align: middle;
  padding: 0.5rem;
}

.cmp-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 4.5rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-deep);
  background: transparent;
  border: 1.5px dashed var(--sand-line);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s;
}

.cmp-add-btn:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
}

/* ---------- "Lägg till enhet"-dialogen ---------- */
/* Nativ <dialog>: gratis fokusfälla, ESC-stängning och ::backdrop. På mobil
   blir den i praktiken en bottensheet (se media query nedan). */
.cmp-dialog {
  width: min(30rem, 92vw);
  max-height: 82vh;
  margin: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lift);
}

.cmp-dialog:not([open]) {
  display: none;
}

.cmp-dialog::backdrop {
  background: rgba(15, 18, 16, 0.55);
}

.cmp-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.1rem 0.75rem 0.6rem 1.25rem;
  flex: none;
}

.cmp-dialog-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
}

.cmp-dialog-close {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
}

.cmp-dialog-close:hover {
  background: var(--sand-soft);
  color: var(--ink);
}

.cmp-dialog .cmp-search {
  flex: none;
  margin: 0 1.25rem 0.75rem;
}

.cmp-dialog-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 1.25rem 0.5rem;
  overscroll-behavior: contain;
}

.cmp-dialog-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
  min-height: 2.75rem;
  cursor: pointer;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.cmp-dialog-item:hover {
  border-color: var(--brand);
}

.cmp-dialog-item.is-picked {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
  font-weight: 600;
}

.cmp-dialog-item-img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.cmp-dialog-item-img-none {
  background: var(--sand-soft);
  border-style: dashed;
  border-color: var(--sand-line);
}

.cmp-dialog-item-name {
  flex: 1 1 auto;
}

.cmp-dialog-item-mark {
  flex: none;
  width: 1.25rem;
  text-align: center;
  font-weight: 700;
  color: var(--brand);
}

.cmp-dialog-foot {
  display: flex;
  justify-content: flex-end;
  flex: none;
  padding: 0.75rem 1.25rem 1.1rem;
  border-top: 1px solid var(--line-soft);
}

/* Sökfältet: används både i dialogen och (via samma klass) för andra
   sökfilter i temat. */
.cmp-search {
  display: block;
  width: 100%;
  max-width: 22rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--sand-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem 0.75rem;
  min-height: 2.75rem;
}

.cmp-search:hover {
  border-color: var(--brand);
}

.cmppage-back + .cmp-toolbar {
  margin-top: -0.25rem;
}

@media (max-width: 40rem) {
  /* Dialogen blir en bottensheet på mobil: lätt att nå, lätt att stänga. */
  .cmp-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border: 0;
  }

  .cmp-dialog .cmp-search {
    max-width: none;
  }

  .cmp-toolbar {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Språkröstning (startsidan) ---------- */

.langvote {
  padding: 3rem 0;
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

.langvote h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--accent);
}

.langvote-intro {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 42rem;
  margin: 0 0 1.5rem;
  padding-left: 0.75rem;
}

.langvote-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 40rem) {
  .langvote-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 60rem) {
  .langvote-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.langvote-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.75rem 0.75rem 0.75rem 1rem;
  box-shadow: var(--shadow);
  transition: border-color 0.14s, box-shadow 0.14s;
}

.langvote-item:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lift);
}

.langvote-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.langvote-btn {
  flex-shrink: 0;
  min-width: 5.5rem;
  min-height: 2.75rem;
  justify-content: center;
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.langvote-btn:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

@media (max-width: 26rem) {
  .langvote-item {
    flex-wrap: wrap;
  }

  .langvote-btn {
    width: 100%;
  }
}


/* ==========================================================================
   Navigering — sektionsnav, brödsmulor, mobilmeny (uppgift #11)
   Tillagt separat här i slutet av filen; rör inte reglerna ovan.
   Transitions nedan neutraliseras redan av *,*::before,*::after ovan under
   prefers-reduced-motion (den regeln är !important och universell, så den
   vinner oavsett läsordning i filen). Ingen egen reduced-motion-regel behövs.
   ========================================================================== */

/* ---------- Sektionsnav (topp) ---------- */
/* En rad under topbaren med länkar till varje sektion. Medvetet inte sticky
   (position: static) — den rullar bort med sidan i stället för att kräva
   omräkning av var(--topbar)-baserade offsets som .sidenav/.toc redan äger. */

.sectionnav {
  background: var(--sand-soft);
  border-bottom: 1px solid var(--sand-line);
}

.sectionnav ul {
  list-style: none;
  margin: 0 auto;
  padding: 0.4rem 1.25rem;
  max-width: 90rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}

.sectionnav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.13s, color 0.13s, border-color 0.13s;
}

.sectionnav-link:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 70%, transparent);
}

/* Aktiv sektion — samma grönt som resten av sajtens aktiva tillstånd. Delas
   av topp-navet och mobilmenyns sektionslista. */
.sectionnav-link.nav-state-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

@media (max-width: 64rem) {
  /* Under 64rem tar mobilmenyn (#sidenav) över sektionsnavigeringen —
     se .sidenav-sections nedan — så raden här är överflödig. */
  .sectionnav {
    display: none;
  }
}

/* ---------- Brödsmulor ---------- */

.breadcrumbs {
  margin: 0 0 1rem;
}

.breadcrumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.breadcrumbs li + li::before {
  content: "/";
  color: var(--line);
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover {
  color: var(--brand-deep);
  border-bottom-color: var(--brand);
}

.breadcrumbs li[aria-current="page"] span {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Mobilmeny: huvud + sektionslista i sidenavet ---------- */
/* .sidenav är sedan tidigare mobilmenyns innehåll (togglas av .menu-toggle).
   Huvudet med stängknapp och sektionslistan syns bara som del av den menyn
   (<=64rem) — på desktop sköter .sectionnav ovan sektionsbyte i stället. */

.sidenav-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--sand-line);
}

.sidenav-head-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}

.sidenav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.sidenav-close:hover {
  border-color: var(--brand);
}

.sidenav-sections {
  display: none;
}

@media (max-width: 64rem) {
  .sidenav-head {
    display: flex;
  }

  .sidenav-sections {
    display: block;
  }

  /* Klickytor ≥44px i mobilmenyn och i menyknappen. */
  .sidenav a,
  .menu-toggle,
  .sidenav-close {
    min-height: 44px;
  }

  .sidenav a {
    display: flex;
    align-items: center;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* ==========================================================================
   Community-formulär — felrapport, omdömen, språkröstning (Cloudflare Pages
   Functions i stället för mailto). Tillagt separat här i slutet av filen;
   rör inte reglerna ovan. mailto: lever kvar som dolda subject/body-fält i
   varje formulär (build/build.mjs) — en riktig fallback utan JavaScript.
   ========================================================================== */

/* ---------- Delade formulärstilar ---------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0 0 0.85rem;
}

.field-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
}

.field-input {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  min-height: 2.75rem;
  width: 100%;
  max-width: 32rem;
}

textarea.field-input {
  min-height: 5.5rem;
  resize: vertical;
}

.field-input:hover {
  border-color: var(--brand);
}

.field-input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.field-hint {
  font-size: 0.8125rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
  max-width: 32rem;
}

/* Honeypot: osynligt för människor — även skärmläsare (aria-hidden,
   tabindex -1) — men enkla formulärbottar fyller ofta i varje fält de hittar
   i DOM:en. Flyttat utanför synligt område i stället för display:none, som
   en del bottar känner igen och hoppar över. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.form-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.form-status {
  font-size: 0.8125rem;
  color: var(--muted);
  min-height: 1.2em;
}

/* ---------- Rapportera fel (formulär) ---------- */

.report-block {
  max-width: 44rem;
  margin: 2rem 0 0;
  font-size: 0.8125rem;
}

.report-block summary.report-link {
  cursor: pointer;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
}

.report-block summary.report-link::before {
  content: "✎ ";
}

.report-block summary.report-link:hover {
  color: var(--brand-deep);
}

.report-form {
  margin: 0.75rem 0 0;
  padding: 0.9rem 1rem 1.1rem;
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  border-radius: 8px;
  font-size: 0.9375rem;
}

/* ---------- Omdömen: skriv-formulär ---------- */

.review-write {
  margin-top: 0.75rem;
}

.review-write-toggle {
  cursor: pointer;
}

.review-form {
  margin: 0.9rem 0 0;
  padding: 1rem 1.1rem 1.2rem;
  background: var(--sand-soft);
  border: 1px solid var(--sand-line);
  border-radius: 8px;
  max-width: 32rem;
}

/* ---------- Röstning: röstetal + formulär ---------- */

.langvote-count {
  font-size: 0.75rem;
  color: var(--muted);
  min-width: 3.5rem;
}

/* display:contents gör att formulärets barn (knapp, honeypot) beter sig som
   direkta flex-barn till .langvote-item — inget extra formulär-boxlager i
   layouten, men submit/fetch fungerar precis som ett vanligt formulär. */
.langvote-form {
  display: contents;
}

/* ---------- Mobil: fullbredds fält, tryckytor ≥44px ---------- */

@media (max-width: 30rem) {
  .field-input {
    max-width: none;
  }

  .report-form,
  .review-form {
    padding: 0.85rem 0.85rem 1rem;
  }

  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions .btn {
    width: 100%;
  }
}

/* ---------- Produktsida: Om enheten / Inkoppling ---------- */

.product-about {
  margin-bottom: 2rem;
}

.product-about p {
  max-width: 46rem;
}

.product-wiring {
  margin-bottom: 2rem;
}

.wiring-links {
  margin-top: 0.85rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.wiring-links a {
  font-weight: 600;
  color: var(--shelly-deep);
  text-decoration: none;
}

.wiring-links a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}