/* ================================================================
   Futur Design System — preview chrome
   ================================================================
   Delad styling för alla pattern-visningssidor (index.html i varje
   pattern-mapp). Innehåller site-header, theme-toggle, page-layout,
   group/row-mönster och pattern-spec-blocket.

   Konsumeras alltid tillsammans med:
   - https://cdn.futur.se/tokens/figma-tokens.css   (canonical värden)
   - https://cdn.futur.se/design-system/foundation/fonts/pattern.css  (font-loading)

   Pattern-CSS:er per komponent är fristående och importeras separat
   per pattern som visas. Inget i den här filen är pattern-API — bara
   visningssida-chrome.
================================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--background-primary);
  color: var(--content-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ SITE HEADER ============
   Matchar Futurs canonical header-arketyp (Figma 1037:8449 / 1038:8902):
   logotyp vänster, tagline centrerad, actions höger (theme-toggle + meny).

   Tre-kolumns grid där tagline:n alltid hamnar perfekt centrerad mellan
   logo och actions, oavsett deras bredd. På mobile (<600px) döljs tagline:n
   och meny-knappen kollapsar till en rund icon-button utan label.
============================================================ */

.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--spc-04);
  /* Vertikalt: 20px på mobil (spc-06) → 40px på desktop (spc-09).
     Horisontellt: 16px min (spc-05) → 80px max (spc-12). */
  padding: clamp(var(--spc-06), 5vw, var(--spc-09)) clamp(1rem, 4vw, 5rem);
  background: transparent;
  box-shadow: var(--elevation-header-default);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  background: var(--background-secondary);
  box-shadow: var(--elevation-header-scrolled);
}

/* Logo-länken tillbaka till /design-system/foundation/. Använder inline-flex
   istället för display: contents (bräckligt över browsers — Safari har haft
   issues där klick inte registreras). Inline-flex ger anchor:n eget bounding
   box som captureras hover/click reliably. */
.site-header__logo-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.site-header__logo-link:focus-visible {
  outline: var(--spc-outline-focus-width) solid var(--border-outline-default);
  outline-offset: var(--spc-outline-focus-offset);
  border-radius: var(--shp-xs);
}

.site-header__logo {
  display: block;
  height: 48px;
  width: auto;
  flex: none;
}
body[data-theme="dark-theme"] .site-header__logo--light { display: none; }
body[data-theme="dark-theme"] .site-header__logo--dark { display: block !important; }

.site-header__tagline {
  justify-self: center;
  text-align: center;
  color: var(--content-primary);
  /* Font-styling kommer från .type-style-title-prm-md i konsumerande markup */
}

.site-header__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--spc-03);
  justify-self: end;
}

/* Mobile: dölj tagline för att frigöra plats (tre kolumner kollapsar till två) */
@media (max-width: 37.5rem) {
  .site-header { grid-template-columns: auto 1fr; }
  .site-header__tagline { display: none; }
}

/* ============ THEME TOGGLE ============
   Ghost-style icon-button — ska vara sekundär visuell vikt jämfört
   med menu-btn (primary brand-färg). 48px klickbar yta så storleken
   matchar menu-btn på desktop och blir konsistent.
============================================================ */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: var(--shp-full);
  border: 2px solid var(--content-primary);
  background: transparent;
  color: var(--content-primary);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  flex: none;
}
.theme-toggle:hover { background: var(--background-secondary); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle:focus-visible {
  outline: var(--spc-outline-focus-width) solid var(--border-outline-default);
  outline-offset: var(--spc-outline-focus-offset);
}
.theme-toggle .icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
}
.theme-toggle .icon--sun { display: none; }
body[data-theme="dark-theme"] .theme-toggle .icon--moon { display: none; }
body[data-theme="dark-theme"] .theme-toggle .icon--sun { display: inline-block; }

/* ============ MENU BUTTON ============
   Primary brand-pill: mörkblå bakgrund, vit text. Visar menu-ikon + "Meny"-label
   på desktop. På mobile (<600px) kollapsar label:n bort så det blir en rund
   48×48 icon-button — exakt som Figma-arketypen (Figma 1038:8902).
============================================================ */

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spc-02);
  height: 48px;
  padding: 0 var(--spc-05);
  border: none;
  border-radius: var(--shp-full);
  background: var(--background-button-primary-default);
  color: var(--content-button-primary-default, var(--clr-key-white));
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  /* Typografi: label-prm-md kommer från .type-style-label-prm-md utility-klass
     på menu-btn__label-spannen. Vi sätter inget font-* här. */
}
.menu-btn:hover { background: var(--background-button-primary-hover, var(--clr-key-prm)); filter: brightness(1.15); }
.menu-btn:active { transform: translateY(1px); }
.menu-btn:focus-visible {
  outline: var(--spc-outline-focus-width) solid var(--border-outline-default);
  outline-offset: var(--spc-outline-focus-offset);
}
.menu-btn .icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  /* Forcerar vit ikon-färg eftersom .icon default följer color, vilket vi vill — vi sätter color: white på parent */
}
.menu-btn__label {
  white-space: nowrap;
}

@media (max-width: 37.5rem) {
  .menu-btn {
    width: 48px;
    padding: 0;
  }
  .menu-btn__label { display: none; }
}

/* ============ SITE DRAWER ============
   Slide-in nav från höger. Markup auto-injekteras av preview.js (en gång
   per sida) så pattern-sidor bara behöver menu-btn:en i headern. Nav:n
   renderas dynamiskt från api/design-system.json så när nya patterns
   läggs till dyker de upp utan kod-ändringar.

   Strukturmässigt matchar drawer Figma-arketypen (Figma 4823:12811 /
   4823:12711): off-white surround, vit panel inuti med 20px radius,
   stora link-items i Gilroy.
============================================================ */

.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  /* aria-hidden styr display via visibility/opacity istället för display:none
     så transform-transition på panel funkar. */
  visibility: hidden;
  transition: visibility 0s linear 0.25s;
}
.site-drawer[aria-hidden="false"] {
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.site-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.25s ease;
}
.site-drawer[aria-hidden="false"] .site-drawer__backdrop {
  opacity: 1;
}

.site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--background-secondary);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: var(--elevation-header-scrolled);
}
.site-drawer[aria-hidden="false"] .site-drawer__panel {
  transform: translateX(0);
}

.site-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spc-03);
  /* Asymmetrisk på mobil — topp/bot 20px (spc-06), L/R 16px (spc-05).
     På desktop klamras båda axlar till 32px (spc-08). */
  padding: clamp(var(--spc-06), 3vw, var(--spc-08)) clamp(var(--spc-05), 3vw, var(--spc-08));
  /* Innehåll: [theme-toggle (vänster)] ... [close-btn (höger)] —
     close i top-right enligt konvention, theme-toggle på andra sidan
     så de inte konkurrerar visuellt och har semantisk separation
     (persistent setting vs sessions-action). */
}

/* Close-button — samma stil som menu-btn (mörkblå rund) men icon-only.
   Konsistens med Figma-arketypen där close speglar menu. */
.site-drawer__close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  border-radius: var(--shp-full);
  background: var(--background-button-primary-default);
  color: var(--content-button-primary-default, var(--clr-key-white));
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  flex: none;
}
.site-drawer__close-btn:hover { filter: brightness(1.15); }
.site-drawer__close-btn:active { transform: translateY(1px); }
.site-drawer__close-btn:focus-visible {
  outline: var(--spc-outline-focus-width) solid var(--border-outline-default);
  outline-offset: var(--spc-outline-focus-offset);
}
.site-drawer__close-btn .icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}

.site-drawer__nav {
  flex: 1;
  overflow-y: auto;
  /* L/R: 16px mobil → 32px desktop. Botten (höjd-axeln): 20px mobil → 32px desktop.
     Topp = 0 eftersom drawer-head ovanför redan ger spacing. */
  padding: 0 clamp(var(--spc-05), 3vw, var(--spc-08)) clamp(var(--spc-06), 3vw, var(--spc-08));
}

.site-drawer__section-title {
  margin: var(--spc-06) 0 var(--spc-03);
  color: var(--content-tertiary);
  /* Typografi från .type-style-label-prm-sm utility-klass på elementet
     (regular weight, ingen caps — vi använder aldrig bold caps för section-titles) */
}

.site-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-drawer__link {
  display: block;
  padding: var(--spc-03) var(--spc-04);
  margin: 0 calc(var(--spc-04) * -1);
  border-radius: var(--shp-sm);
  color: var(--content-primary);
  text-decoration: none;
  transition: background 0.15s ease;
  text-transform: capitalize;
  /* Typografi från .type-style-title-prm-md utility-klass på elementet */
}
.site-drawer__link:hover {
  background: var(--background-tertiary);
}
.site-drawer__link--active {
  /* Aktiv-link använder .type-style-title-lnk-md utility-klass — defined
     hyperlink-style från typografi-skalan (weight + underline från tokens).
     Vi sätter ingen text-decoration här — utility-klassen äger det. */
}

.site-drawer__link--top {
  margin-top: var(--spc-04);
  /* Använder .type-style-title-str-lg på elementet för större vikt */
}

.site-drawer__placeholder {
  margin: var(--spc-06) 0;
  color: var(--content-tertiary);
  font-style: italic;
}

/* ============ PAGE LAYOUT ============ */

.page {
  max-width: 1920px;
  margin: 0 auto;
  /* L/R: 16px (spc-05) på mobil → 80px (spc-12) på desktop —
     matchar header. Drawer-innehåll har egen spacing (20px). */
  padding: clamp(3rem, 6vw, 7rem) clamp(var(--spc-05), 5vw, 5rem) clamp(4rem, 8vw, 10rem);
  font-family: var(--type-family-body);
  font-size: var(--type-size-body-md);
  line-height: var(--type-line-height-body-md);
}

.page__intro {
  max-width: 60rem;
  margin-bottom: clamp(4rem, 8vw, 8rem);
}
.page__intro h1 {
  margin: 0 0 var(--spc-03);
  color: var(--content-primary);
}

/* Tillbaka-länk — bor över page__intro h1 på sub-sidor.
   Markup: <a class="back-link" href="..."><span class="icon">arrow_back</span> Tillbaka till X</a> */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spc-02);
  text-decoration: none;
  color: var(--content-primary);
  margin-bottom: var(--spc-03);
  font-family: var(--type-family-body);
  font-weight: 400;
  font-size: var(--type-size-body-md);
  line-height: 1.5;
  transition: color 0.15s ease;
}
.back-link:hover {
  color: var(--content-tertiary);
}
.back-link .icon {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  user-select: none;
}

.page__lede {
  margin: 0;
  max-width: 42rem;
  color: var(--content-primary);
  /* Font-styling kommer från .type-style-title-prm-md i konsumerande pattern */
}
.page__lede code {
  font-family: var(--type-family-code);
  font-size: 0.9em;
  color: var(--content-primary);
}

/* ============ GROUP / ROW (demo-katalog-mönster) ============
   Generic struktur för foundations som typography-scale, color-system,
   spacing — där pattern.html är en katalog av varianter.
============================================================ */

.group {
  /* Generös spacing mellan sektioner så de visuellt andas och inte
     blandas ihop med varandra. ~144px på desktop, ~112px min mobil. */
  margin-bottom: clamp(7rem, 10vw, 9rem);
}

.group__head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: clamp(2rem, 3vw, 3rem);
  /* Mer breathing room mellan section-header och dess innehåll. */
  margin-bottom: clamp(2rem, 3vw, 3rem);
  border-bottom: 1px solid var(--border-tertiary);
}

.group__title {
  margin: 0;
  font-family: var(--type-family-disp);
  font-weight: var(--type-weight-disp-prm-sm);
  font-size: clamp(1.75rem, 1.5vw + 1.25rem, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--content-primary);
}

.group__lede {
  margin: 0;
  font-family: var(--type-family-body);
  font-weight: 400;
  font-size: var(--type-size-body-md);
  line-height: 1.6;
  color: var(--content-primary);
  max-width: 40rem;
}

.group__tag {
  display: inline-block;
  padding: var(--spc-02) var(--spc-03);
  margin-bottom: 0.75rem;
  border-radius: var(--shp-sm);
  background: var(--background-secondary);
  color: var(--content-primary);
}

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(1.75rem, 3vw, 2.75rem) 0;
  border-bottom: 1px solid var(--border-tertiary);
}
.row:last-child { border-bottom: none; }

@media (min-width: 960px) {
  .row {
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: 4rem;
    align-items: baseline;
  }
}

.row__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding-top: 0.5rem;
}

.row__class {
  font-family: var(--type-family-code);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-primary);
  word-break: break-all;
}

.row__specs {
  font-family: var(--type-family-code);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--content-tertiary);
  white-space: pre-line;
}

.row__demo {
  min-width: 0;
  color: var(--content-primary);
}
.row__demo a { color: inherit; }
.row__demo p { margin: 0; max-width: 38rem; }

/* ============ PATTERN SPEC ============
   Renderas från sibling design.md. Vit panel med Spec & rationale-summary
   som expanderas. Body innehåller frontmatter-facts + rendered markdown.
============================================================ */

.pattern-spec {
  margin: 0 0 clamp(3rem, 5vw, 5rem);
  background: var(--background-secondary);
  border-radius: var(--shp-lg);
  overflow: hidden;
}

.pattern-spec__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spc-04);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--content-primary);
  transition: background 0.15s ease;
}
.pattern-spec__summary::-webkit-details-marker { display: none; }
.pattern-spec__summary::marker { display: none; content: ""; }
.pattern-spec__summary:hover { background: rgba(0, 0, 0, 0.03); }

.pattern-spec__chevron {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  flex: none;
  transition: transform 0.2s ease;
  color: var(--content-primary);
}
.pattern-spec[open] > .pattern-spec__summary .pattern-spec__chevron {
  transform: rotate(180deg);
}

.pattern-spec__body {
  padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
  max-width: 56rem;
}
.pattern-spec__body > :first-child { margin-top: 0; }
.pattern-spec__body > :last-child { margin-bottom: 0; }
.pattern-spec__body h1 { display: none; /* dupe av page-title */ }
.pattern-spec__body h2 {
  font-family: var(--type-family-title);
  font-weight: var(--type-weight-title-prm-lg);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.4;
  margin: var(--spc-06) 0 var(--spc-03);
  color: var(--content-primary);
}
.pattern-spec__body h3 {
  font-family: var(--type-family-title);
  font-weight: var(--type-weight-title-str-md);
  font-size: 1rem;
  line-height: 1.4;
  margin: var(--spc-05) 0 var(--spc-02);
  color: var(--content-primary);
}
.pattern-spec__body p,
.pattern-spec__body ul,
.pattern-spec__body ol {
  font-family: var(--type-family-body);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--content-primary);
  margin: 0 0 var(--spc-03);
}
.pattern-spec__body ul,
.pattern-spec__body ol { padding-left: 1.25rem; }
.pattern-spec__body li { margin-bottom: 0.25rem; }

.pattern-spec__body code {
  font-family: var(--type-family-code);
  font-size: 0.875em;
  background: var(--background-tertiary);
  color: var(--content-primary);
  padding: 0.125em 0.375em;
  border-radius: var(--shp-xs);
}
.pattern-spec__body pre {
  font-family: var(--type-family-code);
  font-size: 0.8125rem;
  line-height: 1.5;
  background: var(--background-tertiary);
  color: var(--content-primary);
  padding: var(--spc-04);
  border-radius: var(--shp-sm);
  overflow-x: auto;
  margin: var(--spc-03) 0;
}
.pattern-spec__body pre code {
  background: transparent;
  padding: 0;
  font-size: inherit;
}
.pattern-spec__placeholder {
  color: var(--content-tertiary);
  font-style: italic;
}

/* Do / Don't headings — färgad ikon-prefix, accent-border på listan */
.pattern-spec__body h2.is-do,
.pattern-spec__body h2.is-dont {
  display: flex;
  align-items: center;
  gap: var(--spc-03);
}
.pattern-spec__body h2.is-do::before,
.pattern-spec__body h2.is-dont::before {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  flex: none;
}
.pattern-spec__body h2.is-do::before {
  content: "check_circle";
  color: var(--clr-accent-shade-3);
}
.pattern-spec__body h2.is-dont::before {
  content: "cancel";
  color: var(--clr-signal-crit-shade-1);
}
.pattern-spec__body h2.is-do + ul,
.pattern-spec__body h2.is-dont + ul {
  list-style: none;
  padding-left: 0;
  border-left: 3px solid var(--border-tertiary);
  padding: var(--spc-02) 0 var(--spc-02) var(--spc-04);
  margin-left: 0;
}
.pattern-spec__body h2.is-do + ul { border-left-color: var(--clr-accent-base); }
.pattern-spec__body h2.is-dont + ul { border-left-color: var(--clr-signal-crit-base); }

/* Facts-rad — primitives ur frontmatter ovanför markdown-body */
.pattern-spec__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: var(--spc-04);
  margin: 0 0 var(--spc-05);
  border-radius: var(--shp-sm);
  background: var(--background-tertiary);
  font-family: var(--type-family-code);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--content-primary);
}
.pattern-spec__facts strong { font-weight: 700; }
.pattern-spec__facts a { color: inherit; }
.pattern-spec__facts a:hover { text-decoration: underline; }
.pattern-spec__facts .pattern-spec__sep {
  color: var(--content-tertiary);
  user-select: none;
}