/* =========================================================================
   Blad – komponentene til bla-visningen, bygget på jaktia.css
   Dokumentasjon: docs/designsystem.md · Stilguide: /viewer/ds/
   Regel: ingen fargeverdier, skygger eller radier her som ikke er et token.
   ========================================================================= */

:root {
  /* Blad-tokens. Systemet har ingen bevegelsestokens; tallene er de samme
     som Jaktia Studio bruker (materiell/DESIGN.md): rolig, ingen sprett. */
  --blad-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --blad-dur: 300ms;
  --blad-dur-slow: 450ms;

  --blad-topbar-h: 56px;
  --blad-touch: 44px;          /* minste trykkflate (Apple 44 pt, WCAG 2.5.5) */
  --blad-marker-y: 28px;       /* markørens høyde – radius og luft regnes av den */
  --blad-sheet-peek: 56px;     /* høyden på «Produkter på siden»-stripen */
  --blad-card-w: 216px;        /* produktkort i raden */
  --blad-page-ratio: 210 / 297;
}

/* ---- Grunn ------------------------------------------------------------ */
.blad {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 400 16px/1.4 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.blad *, .blad *::before, .blad *::after { box-sizing: border-box; }
.blad [hidden] { display: none !important; }
.blad :focus-visible { outline: var(--border-thin) solid var(--focus-ring); outline-offset: var(--space-1); }

/* =========================================================================
   Square – merkets knapp. Høyde 3X, luft X, X = versalhøyden.
   ========================================================================= */
.sq {
  --fs: 14px;
  --x: calc(var(--fs) * var(--cap-height));
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: calc(var(--x) * 3);
  padding: 0 calc(var(--x) * 1.4);
  border: 0; border-radius: var(--radius-none);
  font: 700 var(--fs)/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  background: var(--surface-brand); color: var(--ink-inverse);
  transition: background-color var(--blad-dur) var(--blad-ease), color var(--blad-dur) var(--blad-ease);
}
/* Trykkflaten er minst 44 px selv om formen er mindre */
.sq::before { content: ""; position: absolute; inset: 50% 0 auto; height: max(100%, var(--blad-touch)); transform: translateY(-50%); }
.sq--lg { --fs: 16px; }
.sq--block { display: flex; width: 100%; }
/* Hover: rødt tones aldri – primær blir sort, de andre fylles */
.sq:hover { background: var(--black); }
.sq--dark { background: var(--surface-dark); }
.sq--dark:hover { background: var(--black); }
.sq--outline { background: transparent; color: var(--ink); box-shadow: none; outline: var(--border-thin) solid var(--border-strong); outline-offset: calc(var(--border-thin) * -1); }
.sq--outline:hover { background: var(--black); color: var(--ink-inverse); }
.sq--outline-red { background: transparent; color: var(--ink-emphasis); outline: var(--border-thin) solid var(--jaktia-red); outline-offset: calc(var(--border-thin) * -1); }
.sq--outline-red:hover { background: var(--surface-brand); color: var(--ink-inverse); }
.sq--quiet { background: transparent; color: var(--ink); }
.sq--quiet:hover { background: var(--surface-tint); }
.sq[aria-pressed="true"] { background: var(--black); color: var(--ink-inverse); outline: 0; }
/* Deaktivert: grått, ikke halvgjennomsiktig – gjennomsiktig rødt blir rosa */
.sq:disabled, .sq[aria-disabled="true"] { background: var(--grey-03); color: var(--ink-secondary); outline: 0; pointer-events: none; }
.on-brand .sq:focus-visible, .sq:not(.sq--outline):not(.sq--quiet):not(.sq--outline-red):focus-visible { outline-color: var(--black); }
/* Ikon-Square: kvadratisk, for piler og lukk */
.sq--icon { width: calc(var(--x) * 3); padding: 0; }
.sq svg { width: 1.15em; height: 1.15em; stroke: currentColor; stroke-width: var(--border-thin); fill: none; flex: none; }

/* =========================================================================
   Bobler – radius 0,4Y, luft Y/3, versalhøyde Y/3
   ========================================================================= */
.bubble {
  --y: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--y); min-width: var(--y);
  padding: 0 calc(var(--y) / 3);
  font: 700 calc(var(--y) / 3 / var(--cap-height))/1 var(--font-sans); letter-spacing: 0.01em; text-transform: uppercase;
  white-space: nowrap;
  background: var(--surface-brand); color: var(--ink-inverse);
  border-radius: calc(var(--y) * 0.4) calc(var(--y) * 0.4) calc(var(--y) * 0.4) 0; /* skarpt hjørne nede til venstre */
}
.bubble--tl { border-radius: 0 calc(var(--y) * 0.4) calc(var(--y) * 0.4) calc(var(--y) * 0.4); }
.bubble--tr { border-radius: calc(var(--y) * 0.4) 0 calc(var(--y) * 0.4) calc(var(--y) * 0.4); }
.bubble--br { border-radius: calc(var(--y) * 0.4) calc(var(--y) * 0.4) 0 calc(var(--y) * 0.4); }
.bubble--outline { background: transparent; color: var(--ink-emphasis); outline: var(--border-thin) solid var(--jaktia-red); outline-offset: calc(var(--border-thin) * -1); }
.bubble--outline-ink { background: transparent; color: var(--ink); outline: var(--border-thin) solid var(--border-strong); outline-offset: calc(var(--border-thin) * -1); }
.bubble--grey { background: var(--surface-dark); color: var(--ink-inverse); }

/* RoundedBubble – lengre beskjeder i vanlig setning, først og fremst med kant */
.rbubble {
  --y: 48px;
  display: block;
  padding: calc(var(--y) / 3) calc(var(--y) / 3 + var(--space-1));
  border-radius: calc(var(--y) * 0.4);
  outline: var(--border-hairline) solid var(--border-strong); outline-offset: calc(var(--border-hairline) * -1);
  font: 400 14px/1.4 var(--font-sans); color: var(--ink);
}
.rbubble--tint { outline: 0; background: var(--surface-tint); }

/* =========================================================================
   Toppstripe
   ========================================================================= */
.topbar {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--blad-topbar-h);
  padding: 0 max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left));
  background: var(--surface);
  border-bottom: var(--border-hairline) solid var(--border);
}
.topbar__logo { display: block; height: 22px; width: auto; flex: none; }
.topbar__title { margin: 0 auto 0 0; padding-left: var(--space-4); border-left: var(--border-hairline) solid var(--border); font: 900 12px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__actions { display: flex; gap: var(--space-2); }
/* Innebygd i en iFrame: lavere topp, og tittelen viker for knappene når rammen er smal */
.is-embed { --blad-topbar-h: 48px; }
@media (max-width: 480px) { .is-embed .topbar__title { display: none; } .is-embed .topbar__actions { margin-left: auto; } }

/* =========================================================================
   Scenen og sidene
   ========================================================================= */
.stage { position: relative; background: var(--surface-tint); }
.page { position: relative; aspect-ratio: var(--blad-page-ratio); background: var(--white); overflow: hidden; }
.page > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; user-select: none; -webkit-user-drag: none; }
/* Oppslag: to sider, en hårstrek i ryggen – ingen skygge */
.spread { display: grid; grid-template-columns: 1fr 1fr; }
.spread > .page + .page { border-left: var(--border-hairline) solid var(--border); }

/* =========================================================================
   Klikkfelt og markører
   ========================================================================= */
/* Feltet dekker hele produktet. Usynlig til det brukes: rød kontur, aldri rød tone. */
.hs {
  position: absolute; display: block;
  outline: var(--border-thin) solid transparent; outline-offset: 0;
  transition: outline-color var(--blad-dur) var(--blad-ease);
  cursor: pointer;
}
.hs:hover, .hs.is-lit, .hs:focus-visible { outline-color: var(--jaktia-red); }
/* Etiketten som kommer på hover (PC): en SpeechBubble med navn og pris */
.hs__tag {
  --y: 28px;
  position: absolute; left: 0; bottom: calc(100% + var(--space-1));
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--y); padding: 0 calc(var(--y) / 3);
  border-radius: calc(var(--y) * 0.4) calc(var(--y) * 0.4) calc(var(--y) * 0.4) 0;
  background: var(--surface-brand); color: var(--ink-inverse);
  font: 700 12px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity var(--blad-dur) var(--blad-ease), transform var(--blad-dur) var(--blad-ease);
}
.hs:hover .hs__tag, .hs:focus-visible .hs__tag, .hs.is-lit .hs__tag { opacity: 1; transform: none; }
.hs--below .hs__tag { bottom: auto; top: calc(100% + var(--space-1)); border-radius: 0 calc(var(--y) * 0.4) calc(var(--y) * 0.4) calc(var(--y) * 0.4); }

/* Markør (mobil, og alltid i visningsmodus «Vis produkter»): nummerert SpeechBubble
   med det skarpe hjørnet mot produktet. Nummeret er det samme som i produktlista. */
.marker {
  --y: var(--blad-marker-y);
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--y); min-width: var(--y); padding: 0 calc(var(--y) / 3);
  border-radius: calc(var(--y) * 0.4) calc(var(--y) * 0.4) calc(var(--y) * 0.4) 0;
  background: var(--surface-brand); color: var(--ink-inverse);
  font: 700 calc(var(--y) / 3 / var(--cap-height))/1 var(--font-sans); font-variant-numeric: tabular-nums;
  transform: translate(0, -100%); /* hjørnet står på punktet */
  border: 0; cursor: pointer; text-decoration: none;
  outline: var(--border-thin) solid var(--white); outline-offset: 0; /* skiller den fra mørke bilder */
}
.marker::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: var(--blad-touch); height: var(--blad-touch); transform: translate(-50%, -50%); }
.marker.is-lit, .marker:hover { background: var(--black); }
.marker--search { background: var(--white); color: var(--ink); outline-color: var(--black); }

/* =========================================================================
   Produktkort
   ========================================================================= */
.pcard {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  color: var(--ink); text-decoration: none;
}
/* Rød linje vokser inn øverst ved hover / når feltet på siden er tent */
.pcard::before { content: ""; position: absolute; left: 0; top: 0; height: var(--border-thin); width: 100%; background: var(--jaktia-red); transform: scaleX(0); transform-origin: left; transition: transform var(--blad-dur) var(--blad-ease); }
.pcard:hover::before, .pcard.is-lit::before, .pcard.is-current::before, .pcard:focus-visible::before { transform: scaleX(1); }
.pcard.is-current { background: var(--surface-tint); }
.pcard__media { position: relative; aspect-ratio: 1; background: var(--white); display: grid; place-items: center; }
.pcard__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pcard__media--empty { background: var(--surface-tint); }
.pcard__media--empty::after { content: "Søk"; font: 900 12px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-secondary); }
.pcard__no { position: absolute; left: 0; top: 0; }
.pcard__name { margin: 0; font: 700 14px/1.3 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__meta { margin: var(--space-1) 0 0; font: 400 14px/1.4 var(--font-sans); color: var(--ink-secondary); }
.pcard__foot { display: grid; gap: var(--space-2); justify-items: start; }
.pcard__price { font: 900 22px/1.05 var(--font-sans); color: var(--ink-emphasis); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard__price small { display: block; margin-bottom: 2px; font: 400 12px/1.4 var(--font-sans); color: var(--ink); }
.pcard__go { font: 700 12px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* Rad-variant: i lister og bunnark */
.pcard--row { grid-template-rows: none; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--border-hairline) solid var(--border); }
.pcard--row .pcard__media { width: 64px; }
.pcard--row .pcard__foot { justify-items: end; text-align: right; gap: var(--space-1); }
.pcard--row .pcard__price { font-size: 18px; }

/* Produktnummer: samme SpeechBubble som markøren */
.pno { --y: 24px; display: inline-flex; align-items: center; justify-content: center; height: var(--y); min-width: var(--y); padding: 0 calc(var(--y) / 3); border-radius: calc(var(--y) * 0.4) calc(var(--y) * 0.4) calc(var(--y) * 0.4) 0; background: var(--surface-brand); color: var(--ink-inverse); font: 700 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.pno--search { background: var(--white); color: var(--ink); outline: var(--border-hairline) solid var(--black); outline-offset: -1px; }

/* =========================================================================
   Produktrad (PC) – under oppslaget
   ========================================================================= */
.prail { background: var(--surface); border-top: var(--border-hairline) solid var(--border); }
.prail__head { display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-5) 0; }
.prail__head h2 { margin: 0; font: 900 12px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.prail__head span { font: 400 14px/1.4 var(--font-sans); color: var(--ink-secondary); }
.prail__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--blad-card-w);
  gap: var(--border-hairline); background: var(--border); /* hårstrek mellom kortene */
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
  margin: var(--space-3) 0 0; padding: 0; list-style: none;
  border-top: var(--border-hairline) solid var(--border);
}
.prail__list > * { scroll-snap-align: start; display: grid; }
.prail__empty { padding: var(--space-4) var(--space-5) var(--space-5); color: var(--ink-secondary); font-size: 14px; }

/* =========================================================================
   Bunnark (mobil)
   ========================================================================= */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-direction: column;
  max-height: 85dvh;
  background: var(--surface);
  border-top: var(--border-hairline) solid var(--border-strong);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(calc(100% - var(--blad-sheet-peek) - env(safe-area-inset-bottom)));
  transition: transform var(--blad-dur-slow) var(--blad-ease);
}
.sheet.is-open { transform: none; }
.sheet__peek {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  min-height: var(--blad-sheet-peek); width: 100%;
  padding: 0 var(--space-4);
  border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left;
  font: 900 12px/1.4 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
}
.sheet__grip { position: absolute; top: var(--space-2); left: 50%; width: 32px; height: 4px; margin-left: -16px; background: var(--grey-05); }
.sheet__body { overflow: auto; overscroll-behavior: contain; border-top: var(--border-hairline) solid var(--border); }
.scrim { position: fixed; inset: 0; z-index: 29; background: var(--black); opacity: 0; pointer-events: none; transition: opacity var(--blad-dur-slow) var(--blad-ease); }
.scrim.is-on { opacity: 0.32; pointer-events: auto; }

/* =========================================================================
   Navigasjon: sideteller og glidebryter
   ========================================================================= */
.pager { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-4); background: var(--surface); border-top: var(--border-hairline) solid var(--border); }
.pager__count { font: 700 14px/1 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; }
.pager__count span { color: var(--ink-secondary); font-weight: 400; }
.range { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: var(--blad-touch); background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: var(--border-thin); background: var(--grey-03); }
.range::-moz-range-track { height: var(--border-thin); background: var(--grey-03); }
.range::-moz-range-progress { height: var(--border-thin); background: var(--jaktia-red); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -7px; border-radius: 0; background: var(--jaktia-red); border: 0; }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 0; background: var(--jaktia-red); border: 0; }

/* =========================================================================
   Miniatyrer
   ========================================================================= */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-5) var(--space-4); }
.thumb { display: grid; gap: var(--space-2); padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.thumb img { width: 100%; aspect-ratio: var(--blad-page-ratio); object-fit: cover; background: var(--white); outline: var(--border-hairline) solid var(--border); outline-offset: -1px; display: block; }
.thumb:hover img, .thumb[aria-current="page"] img { outline: var(--border-thin) solid var(--jaktia-red); outline-offset: -2px; }
.thumb span { font: 700 12px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.thumb small { font: 400 12px/1 var(--font-sans); color: var(--ink-secondary); }

/* =========================================================================
   Status (godkjenningssiden). Systemet har ingen grønn eller gul –
   status sies i ord, og formen skiller: fylt, kontur, rød kontur.
   ========================================================================= */
.status { --y: 24px; display: inline-flex; align-items: center; height: var(--y); padding: 0 calc(var(--y) / 3); border-radius: calc(var(--y) * 0.4) calc(var(--y) * 0.4) calc(var(--y) * 0.4) 0; font: 700 11px/1 var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.status--ok { background: var(--surface-dark); color: var(--ink-inverse); }
.status--check { background: transparent; color: var(--ink); outline: var(--border-hairline) solid var(--border-strong); outline-offset: -1px; }
.status--weak { background: transparent; color: var(--ink-emphasis); outline: var(--border-hairline) solid var(--jaktia-red); outline-offset: -1px; }
.status--approved { background: var(--surface-brand); color: var(--ink-inverse); }

/* ---- Redusert bevegelse ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blad *, .blad *::before, .blad *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* =========================================================================
   Kompakt produktrad (PC): rad-kort side om side, så oppslaget får plassen
   ========================================================================= */
.prail--compact .prail__head { padding: var(--space-3) var(--space-5) 0; }
.prail--compact .prail__list { grid-auto-columns: 304px; margin-top: var(--space-2); }
.prail--compact .pcard--row { border-bottom: 0; height: 100%; }
.prail--compact .pcard--row .pcard__name { -webkit-line-clamp: 2; }
/* Hele kortet er lenken; i den kompakte raden får prisen plassen */
.prail--compact .pcard__go { display: none; }
.prail--compact .pcard--row { grid-template-columns: 56px 1fr auto; gap: var(--space-3); }
.prail--compact .pcard--row .pcard__media { width: 56px; }
.prail--compact .prail__empty { padding: var(--space-3) var(--space-5) var(--space-4); }

/* =========================================================================
   Mobil: én side om gangen, sveip med scroll-snap, dobbelttrykk zoomer
   ========================================================================= */
.mstage {
  display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  touch-action: pan-x pan-y pinch-zoom;
  background: var(--surface-tint);
}
.mstage::-webkit-scrollbar { display: none; }
.mstage.is-locked { overflow-x: hidden; scroll-snap-type: none; }
.mpage { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: var(--space-3); overflow: hidden; }
.mpage__zoom { width: 100%; max-height: 100%; overflow: hidden; display: grid; place-items: center; }
.mpage .page { width: min(100%, calc((var(--mh, 100dvh) - var(--space-5)) * 210 / 297)); }
.mpage.is-zoomed { padding: 0; }
.mpage.is-zoomed .mpage__zoom { overflow: auto; width: 100%; height: 100%; place-items: start; touch-action: pan-x pan-y; }
.mpage.is-zoomed .page { width: 250%; max-width: none; }