/* Fonts laddas via <link> i index.html för parallell hämtning
   (tidigare @import → render-blockande seriell kedja) */

:root{
  --red:#EE2A2A;
  --blue:#0D47D9;
  --yellow:#FFD400;
  --black:#111;
  --cream:#F5EFE4;
  --ink:#1A1A1A;
}

*{box-sizing:border-box;margin:0;padding:0}

/* Mobile-app-feel: smooth scroll vid phase-byte, blockera iOS Safari pull-
   to-refresh-reload (annars hard-reloadas hela sidan), och tysta den blå
   tap-highlight-rektangeln iOS ritar på klickbara element. */
html{
  scroll-behavior:smooth;
  overscroll-behavior-y:contain;
}
body{
  -webkit-tap-highlight-color:transparent;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

/* I Capacitor-native-app:en behövs inget pull-to-refresh-skydd (vi är
   inte i en browser, app-reload är inte ett problem). overscroll-behavior:
   contain stänger AV iOS native rubberband-bounce — vi vill ha den, så
   återställ till default 'auto' när html.native-klassen är satt. */
html.native{
  overscroll-behavior-y:auto;
}

/* iOS frosted-glass-bar bakom status-bar (klocka/batteri) — fade-out.
   StatusBar.overlaysWebView=true gör att WebView:n går under iOS-rendered
   klocka/batteri/signal-ikoner. Utan blur ser scrollat innehåll skarpt
   genom iOS-baren. Med backdrop-filter + linear-gradient mask får vi en
   mjuk frostad glass-effekt som är starkast i toppen och fade:ar mjukt
   ut till klart längre ner.
   - Höjd: safe-area-inset-top + 28px → ger 28px fade-zon under iOS-baren
     så övergången sträcker sig en bit ner under bar:n.
   - mask-image: linjär fade från 75% alpha (topp) till 0% (botten) över
     hela höjden. Effekten når aldrig "full styrka" — alltid mjuk.
   - backdrop-filter: enhetlig 22px blur över hela elementet — masken är
     det som gör att blur:n "framstår" som progressivt fade:ad.
   - cream-tint blir också gradient eftersom masken applicerar på både
     bg-color och backdrop-filter (allt som elementet renderar).
   - z-index över allt content men under modals (modals är 9999).
   - pointer-events:none så tap inte fångas.
   - Gated på html.native så web-versionen är opåverkad. */
html.native::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:calc(env(safe-area-inset-top) + 28px);
  background:rgba(245,239,228,0.55);  /* cream med alpha — lite ljusare nu pga fade */
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0) 100%);
  z-index:500;
  pointer-events:none;
}

/* html får också cream-bg så bounce-överranden i iOS WKWebView visar
   cream-color istället för vit (UIScrollView exponeras under body vid
   overscroll). Native får också konfig via capacitor.config.json:s
   ios.backgroundColor — defense in depth. */
html{ background:var(--cream); }
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  min-height:100vh;
  background-image:
    radial-gradient(var(--ink) 1.2px, transparent 1.2px);
  background-size:14px 14px;
  background-position:0 0;
}

/* #app-regel flyttad nedanför header-regeln så safe-area-paddingen
   hanteras av header (som nu är body-level sibling till #app). */

/* Header: 3-kolumns grid med fixerade side-kolumner (42px för back/
   hamburger) och flexibel middle-kolumn för loggan. Loggan placeras
   med justify-self:center i mitt-kolumnen → den ligger ALLTID centrerad
   oavsett om back-pilen eller hamburgern är synliga eller dolda.
   Audit V1.25.15. */
header{
  /* Header är body-level sibling till #app (V1.25.17) → behöver egen
     max-width + auto-margin + horisontell padding för att matcha #app:s
     container-layout. Tidigare ärvdes detta från #app:s padding eftersom
     header låg innuti, men nu ligger header på body-nivå så hamburgern
     inte blir inert vid nav-öppning. */
  max-width:480px;
  margin:0 auto;
  padding:max(env(safe-area-inset-top),20px) 18px 22px;
  display:grid;
  grid-template-columns:42px minmax(0, 1fr) 42px;
  column-gap:8px;
  align-items:center;
  border-bottom:3px solid var(--ink);
}

/* #app tappar top-padding eftersom header nu är ovanför och hanterar
   safe-area. Behåller h-padding så phase-innehåll respekterar samma
   marginal som tidigare. */
#app{
  max-width:480px;
  margin:0 auto;
  padding:22px 18px 80px;
}

/* Back-knapp — matchar hamburger-stilen (samma 42px square, cream bg, ink
   border, 3px shadow). Placerad i grid-kolumn 1 (vänster). Visas bara när
   användaren navigerat in i result från en lista (Shazam-matches, picker,
   history). När hidden tar tom-cellen fortfarande 42px → loggan rör sig
   ALDRIG. */
.back-btn{
  grid-column:1;
  width:42px; height:42px;
  background:var(--cream);
  border:3px solid var(--ink);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.08s ease-out, box-shadow 0.08s ease-out;
  -webkit-tap-highlight-color:transparent;
}
.back-btn:hover{ background:var(--yellow); }
.back-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.back-btn:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
.back-btn[hidden]{ display:none; }

/* Loggan placeras i mitt-kolumnen + center-justeras inom den. Tar sin
   naturliga bredd (228px @ 30px höjd) som ALLTID får plats i 239px-bred
   mitt-kolumn med både back + hamburger synliga (42+8+228+8+42=328 < 339
   viewport-bredd). Storleken är fixerad så loggan inte hoppar mellan
   stater. Audit V1.25.15. */
.logo-wrap{
  grid-column:2;
  justify-self:center;
  display:flex;align-items:center;cursor:pointer;
  user-select:none;-webkit-tap-highlight-color:transparent;
}
@media (hover: hover){
  .logo-wrap:hover{opacity:0.85}
}
.logo-wrap:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}

/* Logotyp = inline SVG (kombinerad ikon + REKORD-text). 30px höjd ger
   ~228px bredd vid 7.6:1 aspect — passar in i grid-mitten (1fr ≈ 239px)
   även med både back-pil (42px) och hamburger (42px) synliga. Tidigare
   36px → 273px var för bred och fick loggan att flytta sig vid back-pil.
   Audit V1.25.15. */
.logo-svg{
  display:block;
  height:30px;
  width:auto;
  flex-shrink:0;
}

/* Subtil ögon-animation: blink + soft look-around. Ögonen är wrappade
   i två nestade <g>: yttre .eye för blink (scaleY), inre .eye-look för
   look-around (translateX). transform-box: fill-box gör origo relativt
   varje grupps egen bbox (centrum av ögat) i stället för hela viewBox. */
.eye, .eye-look{
  transform-box: fill-box;
  transform-origin: center;
}
/* Båda animationer har SAMMA duration (10s) så de håller sig synkade i en
   alternerande pattern:
     t=0s   blink
     t=5s   look around (höger → vänster → hem, ~3s att utföra)
     t=10s  blink (ny cykel)
     t=15s  look around
   Blink händer vid loopens start, look-around mellan 50-90% av loopen. */
.eye{ animation: rekord-blink 10s ease-in-out infinite; }
.eye-look{ animation: rekord-look 10s ease-in-out infinite; }

/* Blink: snabb scaleY-nedklipp runt loopens början (~150ms aktiv blink). */
@keyframes rekord-blink{
  0%, 4%, 100%{ transform: scaleY(1); }
  2%{ transform: scaleY(0.08); }
}

/* Look-around: vid 50% av loopen (= 5s in) börjar ögonen titta höger,
   sen vänster, sen tillbaka. 25 SVG-units amplitude → ~2px på skärmen
   vid 36px logo-höjd, tydligt synligt men inte distraherande. */
@keyframes rekord-look{
  0%, 48%, 92%, 100%{ transform: translateX(0); }
  55%, 64%{ transform: translateX(25px); }   /* höger */
  72%, 82%{ transform: translateX(-25px); }  /* vänster */
}

/* Respektera prefers-reduced-motion (a11y) */
@media (prefers-reduced-motion: reduce){
  .eye, .eye-look{ animation: none; }
}

/* App-splash: visas BARA i Capacitor-native (html.native). Apple's
   native launch screen är statisk gul + ikon ~0.5-1s medan WKWebView
   laddar; sen tar denna över med:
     1. Roboten (.robot-body) svävar upp/ner mjukt — translateY-keyframe
     2. Skuggan (.splash-shadow) stannar på fast y-position, scale-ar
        + fade-ar i takt med svävet (synkad samma duration)
     3. Ögonen (.eye/.eye-look) blinkar + tittar runt — samma keyframes
        som header-loggan, ärvda automatiskt
   Bakgrunden är linear-gradient (matchar SVG-designens vertikala gul-
   gradient) i stället för en bg-rect i SVG:n — så vi kan crop:a viewBox
   tight runt roboten utan att förlora fullskärmsbakgrund. Fade-out efter
   visning, sen tar JS bort elementet ur DOM. */
#app-splash{ display:none; }
html.native #app-splash{
  display:flex;
  position:fixed;
  inset:0;
  background:linear-gradient(to bottom, #FDDF54 0%, #FFD200 100%);
  align-items:center;
  justify-content:center;
  z-index:9999;
  /* Visning: 2.0s så vi hinner se en hel float-cykel + en blink innan fade. */
  animation: splash-out 0.5s ease-in-out 2.0s forwards;
  /* Respektera safe-area så ikonen inte hamnar under notch. */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.splash-svg{
  width:80%;
  max-width:520px;
  height:auto;
  /* Pop-in: subtil scale + fade när splashen visas. */
  animation: splash-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Robot-kropp svävar upp/ner. transform-box: fill-box så transform-origin
   blir relativt gruppens egen bbox, inte hela SVG-viewBox. translateY:
   -38 SVG-units = ~5% av robot-höjden, tydligt synligt utan att kännas
   för dramatiskt. Synkad med .splash-shadow (samma duration + ease) så
   skuggan smalnar exakt när roboten är som högst. */
.splash-svg .robot-body{
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-float 2.4s ease-in-out infinite;
}
@keyframes splash-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-38px); }
}

/* Skuggan: stannar på samma y, men scale:as in (smalare ellips) och
   fade:ar lite när roboten lyfter — fysiskt korrekt: ljuset från ovan
   gör att den stigande robotens skugga smalnar och blir mjukare.
   transform-origin: center så scaleX händer åt båda håll runt skuggans
   centrum. */
.splash-svg .splash-shadow{
  transform-box: fill-box;
  transform-origin: center;
  animation: splash-shadow-pulse 2.4s ease-in-out infinite;
}
@keyframes splash-shadow-pulse{
  0%, 100% { transform: scaleX(1);    opacity: 1;    }
  50%      { transform: scaleX(0.78); opacity: 0.6; }
}

@keyframes splash-pop{
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes splash-out{
  to { opacity: 0; visibility: hidden; }
}

/* Reduce-motion: skippa float + pop-animationen, förkorta visning. */
@media (prefers-reduced-motion: reduce){
  .splash-svg{ animation: none; }
  .splash-svg .robot-body,
  .splash-svg .splash-shadow{ animation: none; }
  html.native #app-splash{ animation-delay: 0.4s; }
}

.version{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.1em;
  background:var(--ink);
  color:var(--yellow);
  padding:4px 7px;
  border-radius:3px;
}

/* Version-footer — version-pillen längst ner, centrerad. Flyttades hit
   från header (1.24.15) för att slippa krocka med hamburger-knappen på
   små skärmar. */
.version-footer{
  margin-top:28px;
  text-align:center;
}

.mono{font-family:'JetBrains Mono',monospace}

.label{
  font-family:'Archivo Black',sans-serif;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink);
  margin-bottom:10px;
  display:inline-block;
  background:var(--yellow);
  padding:3px 8px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}

.card{
  background:#fff;
  border:3px solid var(--ink);
  padding:16px;
  box-shadow:5px 5px 0 var(--ink);
}

.btn{
  width:100%;
  padding:14px;
  border:3px solid var(--ink);
  background:#fff;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  font-family:'Space Grotesk',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform 0.08s, box-shadow 0.08s;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

.btn.red{background:var(--red);color:#fff}
.btn.blue{background:var(--blue);color:#fff}
.btn.yellow{background:var(--yellow);color:var(--ink)}

.btn-row{display:flex;gap:10px;margin-top:14px}

.phase{display:none}.phase.active{display:block}

.store-link{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 12px 22px;
  border:3px solid var(--ink);
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  margin-bottom:10px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform 0.08s, box-shadow 0.08s;
}
.store-link:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.store-link.disabled{
  opacity:0.4;pointer-events:none;
  background:repeating-linear-gradient(45deg,#fff,#fff 6px,#eee 6px,#eee 12px);
}

.store-name{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:0.01em}
.store-type{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;color:var(--ink);margin-top:2px;opacity:0.6}
.store-price{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--ink)}
.store-price.ok{color:var(--blue)}
.store-price.no{color:var(--red)}

.badge{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  padding:3px 8px;
  border:2px solid var(--ink);
  background:#fff;
  color:var(--ink);
  display:inline-block;
  margin:3px 5px 3px 0;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.badge.yr{background:var(--yellow)}

.track-row{
  display:flex;align-items:center;gap:12px;
  padding:8px 12px;
  border-bottom:1.5px solid var(--ink);
  background:transparent;border-left:none;border-right:none;border-top:none;
  width:100%;text-align:left;
  font-family:inherit;color:inherit;
  cursor:pointer;
  transition:background 0.1s ease;
}
.track-row:last-child{border-bottom:none}
@media (hover: hover){
  .track-row:hover{background:rgba(13,71,217,0.06)}
}
.track-row.is-open{background:rgba(255,212,0,0.18)}
.track-row .track-duration{
  margin-left:auto;
  font-size:11px;opacity:0.55;
}
/* Chevron längst till höger — signalerar att raden är expanderbar.
   ▸ roterar 90° till ▾ när panelen är öppen. */
.track-row::after{
  content:"▸";
  font-size:12px;
  opacity:0.35;
  margin-left:8px;
  transition:transform 0.18s ease, opacity 0.18s ease;
}
.track-row:not(:has(.track-duration))::after{ margin-left:auto; }
.track-row.is-open::after{
  opacity:0.75;
  transform:rotate(90deg);
}

/* Expanderad streaming-rad under en track. Samma grid-fr-animation som
   watch-popup ovan: 0fr → 1fr för smooth slide. Layout + bakgrund +
   border ligger på inner så ingen tunnstrip-linje flashar vid 0 height. */
.track-streams{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.track-streams.is-open{
  grid-template-rows:1fr;
}
.track-streams-inner{
  overflow:hidden;
  min-height:0;
}
.track-streams-inner > .track-streams-content{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:10px 12px 12px;
  border-bottom:1.5px solid var(--ink);
  background:rgba(255,212,0,0.08);
}
@media (prefers-reduced-motion: reduce){
  .track-streams{ transition:none; }
}
.track-stream{
  flex:1 1 0;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;
  text-decoration:none;
  padding:8px 10px;
  border:2px solid var(--ink);
  background:#fff;color:var(--ink);
  box-shadow:2px 2px 0 var(--ink);
  transition:transform 0.06s ease, box-shadow 0.06s ease;
}
.track-stream:hover{
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--ink);
}
.track-stream:active{
  transform:translate(1px,1px);
  box-shadow:1px 1px 0 var(--ink);
}

.dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ink);
  animation:blink 1.2s ease-in-out infinite;
  margin:0 2px;
}
.dot:nth-child(2){animation-delay:.2s;background:var(--red)}
.dot:nth-child(3){animation-delay:.4s;background:var(--blue)}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

@keyframes scanline{0%{transform:translateY(-50%);top:0}100%{transform:translateY(-50%);top:100%}}
.scanbar{
  position:absolute;left:-5%;right:-5%;height:6px;
  background:var(--red);
  animation:scanline 2s linear infinite;
  box-shadow:0 0 0 2px var(--ink);
}

/* Radiella pulse-cirklar för Shazam-audio-listening.
   Aktiveras via .is-listening på #phase-scanning. Fyra cirklar med
   staggered delay (0.5s mellanrum) ger en kontinuerlig "vågrörelse inåt"
   — visuell metafor för "appen suger in ljud". Default hidden, döljer
   även scanbar + scan-img (som ändå är tom under Shazam). */
.pulse-rings{
  position:absolute;inset:0;
  display:none;
  pointer-events:none;
}
.pulse-rings span{
  position:absolute;
  top:50%;left:50%;
  width:320px;height:320px;
  margin:-160px 0 0 -160px;
  border:4px solid var(--red);
  border-radius:50%;
  opacity:0;
  animation:rekord-pulse-in 2.2s ease-out infinite;
}
.pulse-rings span:nth-child(1){ animation-delay:0s;     }
.pulse-rings span:nth-child(2){ animation-delay:0.55s;  }
.pulse-rings span:nth-child(3){ animation-delay:1.1s;   }
.pulse-rings span:nth-child(4){ animation-delay:1.65s;  }

#phase-scanning.is-listening .pulse-rings{ display:block; }
#phase-scanning.is-listening .scanbar{ display:none; }
#phase-scanning.is-listening #scan-img{ display:none; }

@keyframes rekord-pulse-in{
  0%   { transform:scale(1.0); opacity:0;   }
  15%  { opacity:0.85; }
  100% { transform:scale(0.10); opacity:0;  }
}
@media (prefers-reduced-motion: reduce){
  .pulse-rings span{
    animation:none;
    opacity:0.4;
    transform:scale(0.5);
  }
  /* Lämna kvar den största som statisk markör så användaren ser ATT
     något händer — bara inte en pulserande animation. */
  .pulse-rings span:nth-child(n+2){ display:none; }
}

.log-line{
  padding:5px 0;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;
  color:var(--ink);
  opacity:0.4;
}
.log-line.active{opacity:1;color:var(--red)}

@keyframes spin{to{transform:rotate(360deg)}}

.dz{
  width:100%;
  aspect-ratio:1;
  max-height:300px;
  border:3px solid var(--ink);
  background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;
  cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);
  position:relative;
  overflow:hidden;
  transition:transform 0.1s,box-shadow 0.1s;
}
.dz:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.dz.over{background:var(--yellow)}

.dz-shapes{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.shape-circle{
  position:absolute;top:-30px;right:-30px;
  width:90px;height:90px;border-radius:50%;
  background:var(--red);
  border:3px solid var(--ink);
}
.shape-tri{
  position:absolute;bottom:-10px;left:-20px;
  width:0;height:0;
  border-left:55px solid transparent;
  border-right:55px solid transparent;
  border-bottom:75px solid var(--yellow);
  filter:drop-shadow(0 0 0 var(--ink));
}
.shape-tri::before{
  content:"";
  position:absolute;
  left:-55px;top:0;
  width:0;height:0;
  border-left:55px solid transparent;
  border-right:55px solid transparent;
  border-bottom:75px solid var(--ink);
  transform:translate(-3px,3px);
  z-index:-1;
}
.shape-sq{
  position:absolute;top:30%;left:-20px;
  width:40px;height:40px;
  background:var(--blue);
  border:3px solid var(--ink);
  transform:rotate(15deg);
}

.vinyl-big{
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at center, var(--ink) 0%, var(--ink) 18%, transparent 18.5%, transparent 20%, var(--ink) 20.5%, var(--ink) 22%, transparent 22.5%, transparent 24%, var(--ink) 24.5%, var(--ink) 26%, transparent 26.5%, transparent 28%, var(--ink) 28.5%, var(--ink) 98%, var(--ink) 100%);
  border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  z-index:1;
  animation:spin 4s linear infinite;
  animation-play-state:paused;
}
.dz:hover .vinyl-big{animation-play-state:running}

.vinyl-label-inner{
  width:54px;height:54px;border-radius:50%;
  background:var(--red);
  border:3px solid var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.vinyl-label-inner::after{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--ink);
}

.dz-text{
  text-align:center;z-index:1;
  background:#fff;
  padding:6px 14px;
  border:3px solid var(--ink);
}
.dz-text-main{
  font-family:'Archivo Black',sans-serif;
  font-size:14px;letter-spacing:0.08em;text-transform:uppercase;
}
.dz-text-sub{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  margin-top:3px;opacity:0.6;
}

h1.hero{
  font-family:'Archivo Black',sans-serif;
  font-size:46px;
  line-height:0.92;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  margin-bottom:14px;
}
h1.hero .word-red{color:var(--red)}
h1.hero .word-blue{color:var(--blue)}
h1.hero .word-yellow{
  background:var(--yellow);
  padding:0 6px;
  display:inline-block;
  transform:rotate(-2deg);
  margin:2px 0;
}

.hero-sub{
  display:inline-block;
  font-size:15px;line-height:1.5;
  margin-bottom:30px;
  max-width:340px;
  font-weight:500;
  /* Cream-bg täcker dot-mönstret bakom texten utan att se ut som en
     "ruta" — samma färg som body-bg, bara solid. */
  background:var(--cream);
  padding:4px 8px;
  margin-left:-8px;  /* kompensera padding så texten alignar med kanten */
}

h2.section-title{
  font-family:'Archivo Black',sans-serif;
  font-size:28px;text-transform:uppercase;
  line-height:1;margin-bottom:20px;
}

.scan-frame{
  width:100%;aspect-ratio:1;max-height:300px;
  border:3px solid var(--ink);
  background:#fff;
  position:relative;overflow:hidden;
  margin-bottom:20px;
  box-shadow:5px 5px 0 var(--ink);
}

/* Avbryt-knappen i scanning-phase: gul + extra mellanrum från scan-log
   ovanför så den inte ligger kant-mot-kant. */
#cancel-scan-btn{ margin-top:18px; }

.result-header{
  display:flex;gap:14px;margin-bottom:14px;
  padding:14px;
  background:var(--yellow);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  position:relative;  /* för absolut-positionerad bell-knapp */
}

.result-cover{
  width:84px;height:84px;
  object-fit:cover;
  border:3px solid var(--ink);
  flex-shrink:0;
}

/* Container för pills på resultsidans gula box (IDENTIFIERAD + raritet) */
.result-pills{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-bottom:6px;
}
.result-pills > *{ margin-bottom:0 !important; }

/* Rarity-pill + i-symbol hamnar alltid på egen rad under IDENTIFIERAD.
   flex-basis:100% tvingar wrapping. */
.rarity-row{
  flex-basis:100%;
  display:flex;align-items:center;gap:6px;
}
.rarity-row:has(.rarity-pill[hidden]){ display:none; }

.confidence-pill{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  padding:2px 8px;
  border:2px solid var(--ink);
  display:inline-block;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

/* Raritets-pill — färgkodad efter community-data-baserad klass */
.rarity-pill{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  padding:2px 8px;
  border:2px solid var(--ink);
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:#fff;
  color:var(--ink);
}
.rarity-pill[hidden]{ display:none; }
/* Visuell hierarki, lägst → högst:  yellow → blue → red → ink/yellow */
.rarity-demanded{ background:var(--yellow); }
.rarity-scarce  { background:var(--blue);   color:#fff; }
.rarity-sought  { background:var(--red);    color:#fff; }
.rarity-rare    { background:var(--ink);    color:var(--yellow); }

/* Liten "i"-knapp som öppnar förklaring av klassning. Pushas till höger
   ände av pills-raden via margin-left:auto så raden känns balanserad. */
.rarity-info{
  position:relative;
  width:20px; height:20px;
  border-radius:50%;
  border:2px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background 0.15s, color 0.15s;
  -webkit-tap-highlight-color:transparent;
}
/* WCAG 2.5.5: expand touch-target till 44×44 utan att ändra visuell
   storlek (audit V1.25). ::before täcker en osynlig 44×44-cirkel
   centrerad över ikonen som fångar klick. */
.rarity-info::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:44px; height:44px;
  transform:translate(-50%, -50%);
}
.rarity-info[hidden]{ display:none; }
@media (hover: hover){
  .rarity-info:hover{ background:var(--ink); color:var(--yellow); }
}
.rarity-info:active,
.rarity-info.is-active{ background:var(--ink); color:var(--yellow); }

/* Rarity-tooltip — samma slide-animation som watch-popup. */
.rarity-tooltip{
  display:grid;
  grid-template-rows:0fr;
  margin-bottom:0;
  background:#fff;
  border:0 solid var(--ink);
  box-shadow:5px 5px 0 transparent;
  transition:
    grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    margin-bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    border-width 0.22s ease-out,
    box-shadow 0.32s ease-out;
}
.rarity-tooltip.is-open{
  grid-template-rows:1fr;
  margin-bottom:22px;
  border-width:3px;
  box-shadow:5px 5px 0 var(--ink);
}
.rarity-tooltip-inner{
  overflow:hidden;
  min-height:0;
}
.rarity-tooltip-content{
  padding:16px;
  font-size:13px;
  line-height:1.55;
}
.rarity-tooltip-stats{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:2px solid var(--ink);
}
.rarity-tooltip-stats strong{
  font-family:'Archivo Black',sans-serif;
  font-size:16px;
  letter-spacing:-0.01em;
}
.rarity-tooltip-explain{
  margin:0;
}
.rarity-tooltip-explain strong{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:12px;
  padding:2px 6px;
  border:2px solid var(--ink);
  background:var(--yellow);
}
@media (prefers-reduced-motion: reduce){
  .rarity-tooltip{ transition:none; }
}

.sh-label{
  font-family:'Archivo Black',sans-serif;
  font-size:13px;letter-spacing:0.1em;text-transform:uppercase;
  margin:22px 0 12px;
  color:var(--ink);
  display:inline-block;
  background:var(--red);
  color:#fff;
  padding:5px 10px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.sh-label.stream-label{
  background:var(--blue);
}

.tag{display:inline-block}

input[type=file]{display:none}

.disclaimer{
  display:block;
  width:fit-content;
  max-width:90%;
  margin:16px auto 0;
  padding:6px 14px;
  /* Cream-färgen täcker dot-mönstret under texten utan att se ut som en
     "ruta" (samma färg som body-bg, bara solid). Bara länkar/knappar får
     vit bg som signalerar interaktion. */
  background:var(--cream);
  font-size:11px;
  font-family:'JetBrains Mono',monospace;
  text-align:center;
  color:#888;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
}

.error-box{
  background:var(--red);color:#fff;
  padding:22px;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  text-align:center;margin-bottom:20px;
}
.error-title{
  font-family:'Archivo Black',sans-serif;
  font-size:18px;text-transform:uppercase;
  margin-bottom:10px;
}

/* Loader: mjukt pulserande opacity. Läggs på vilket element som helst som
   väntar på async-data (description-text, cover-bild, etc). Respekterar
   prefers-reduced-motion för folk som blir åksjuka av animationer. */
@keyframes rekord-pulse{
  0%, 100%{ opacity:0.35; }
  50%     { opacity:0.85; }
}
.is-loading{
  animation: rekord-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .is-loading{ animation: none; opacity:0.55; }
}

/* half-tone backdrop for empty state */
.halftone{
  position:absolute;
  width:60px;height:60px;
  background-image:radial-gradient(var(--ink) 2px, transparent 2px);
  background-size:8px 8px;
  pointer-events:none;
}

/* ── Scan-historik på home-screen ───────────────────────────────────────── */
.history-section{
  margin-top:28px;
}
.history-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.history-clear{
  background:#fff;
  border:none;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
  color:#555;
  cursor:pointer;
  /* WCAG-touch-target ≥44px. Discret text behåller sin storlek; bara
     hit-arean expanderar. Audit V1.25. */
  padding:14px 12px;
  min-height:44px;
  text-decoration:underline;
  -webkit-tap-highlight-color:transparent;
}
.history-clear:hover{ color:var(--ink); }
.history-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.history-item{
  background:#fff;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;
  display:flex;flex-direction:column;
  text-align:left;
  font-family:inherit;
  padding:0;
  overflow:hidden;
  transition:transform 0.08s ease, box-shadow 0.08s ease;
}
.history-item:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}
.history-item:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
.history-cover{
  width:100%;aspect-ratio:1;
  object-fit:cover;
  display:block;
  background:#F0E8D8;
  border-bottom:2.5px solid var(--ink);
}
.history-cover-fallback{
  width:100%;aspect-ratio:1;
  background:repeating-linear-gradient(45deg, #F0E8D8, #F0E8D8 6px, #E5DCC9 6px, #E5DCC9 12px);
  border-bottom:2.5px solid var(--ink);
}
.history-meta{
  padding:6px 8px;
  min-height:42px;
}
.history-artist{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.04em;
  color:var(--red);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.history-album{
  font-size:11px;font-weight:500;
  line-height:1.2;
  margin-top:2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* "Visa alla"-knapp under home-grid:en. [hidden]-regeln behövs eftersom
   display:flex annars överrider HTML-hidden-attributet. */
.history-show-all[hidden]{ display:none; }
.history-show-all{
  margin-top:14px;
  width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;
  border:2.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
  color:var(--ink);
  padding:12px;
  cursor:pointer;
  transition:transform 0.08s ease, box-shadow 0.08s ease;
}
.history-show-all:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 var(--ink);
}
.history-show-all:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
.history-count{
  opacity:0.55;
  font-size:11px;
}
.history-count::before{ content:"("; }
.history-count::after{ content:")"; }

/* Full historik-vy — samma grid men hela bredden, ev. fler rader */
.history-grid-full{
  margin-top:18px;
}

/* ── Country + lang picker (botten av appen) ────────────────────────────── */
.country-toggle-wrap{
  position:relative;
  text-align:center;
  padding:30px 0 16px;
}

.country-toggle{
  background:var(--cream);
  border:3px solid var(--ink);
  padding:8px 12px;
  min-height:38px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--ink);
  transition:transform 0.08s, box-shadow 0.08s;
  /* iOS Safari: ta bort default tap-highlight + double-tap-zoom-fördröjning */
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.country-toggle:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.country-toggle:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.country-toggle #country-flag{font-size:18px}
.country-toggle #lang-code{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.05em;
}

/* Dropdown öppnas UPPÅT (bottom-anchored) eftersom knappen är i botten av sidan.
   Centrerad horisontellt med translateX. */
.country-menu{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  min-width:230px;
  display:none;
}
.country-menu.open{display:block}

.country-option{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  background:#fff;
  border:none;
  border-bottom:2px solid var(--ink);
  font-family:'Space Grotesk',sans-serif;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-align:left;
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.country-option:last-child{border-bottom:none}
.country-option:hover{background:var(--yellow)}
.country-option.active{background:var(--blue);color:#fff}
.country-option .flag{font-size:20px}

/* ── Scan phase ─────────────────────────────────────────────────────────── */
.scan-frame img{width:100%;height:100%;object-fit:cover}

/* ── Result phase ───────────────────────────────────────────────────────── */
.result-info{flex:1;min-width:0;padding-right:42px}  /* utrymme för bell-knappen i hörnet */
.result-artist{
  font-size:10px;font-weight:700;letter-spacing:0.1em;
  margin-bottom:3px;opacity:0.7;
}
.result-album{
  font-family:'Archivo Black',sans-serif;
  font-size:20px;line-height:1.05;
  text-transform:uppercase;
  margin-bottom:8px;
  /* Tillåt brytning av jättelånga ord-utan-mellanslag (typ
     "feelslikeimfallinginlove") så de inte rinner ut ur kortet.
     'anywhere' = bryt på vilket tecken som helst när annat inte funkar.
     hyphens:auto = mjuka avstavningar för naturliga ord när lang-attribut
     stämmer (sv på html → fungerar för svenska ord). */
  overflow-wrap:anywhere;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.result-artist{ overflow-wrap:anywhere; }
.result-desc{margin-bottom:18px;font-size:14px;line-height:1.6}
.result-tracks{padding:0}
.track-row .num{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;font-weight:700;
  color:var(--red);
  width:22px;text-align:right;
}
.track-row .title{font-size:13px;font-weight:500}
.btn-newscan{margin-top:20px}

/* "Fel skiva?" — escape hatch som tar användaren till manual-input.
   Diskret ton (opacity 0.55) — ska inte distrahera 99% som har rätt
   resultat, men finns där för de som behöver korrigera. */
.wrong-record-row{
  margin-top:18px;
  text-align:center;
}
.wrong-record-link{
  background:#fff;
  border:none;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  font-weight:500;
  color:#555;
  text-decoration:underline;
  cursor:pointer;
  /* WCAG-touch ≥44px (audit V1.25). */
  padding:14px 16px;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
}
@media (hover: hover){
  .wrong-record-link:hover{ color:var(--ink); }
}
.wrong-record-link:active{ color:var(--ink); }

/* "Dela skiva" — fullbredd-knapp mellan tracklist och Köp ny */
.btn-share-full{
  width:100%;
  margin-top:22px;
}
/* "Ny skanning" — fullbredd ensam i botten */
.btn-newscan-full{
  width:100%;
  margin-top:18px;
}

/* ── Pris-bevakning ─────────────────────────────────────────────────────── */

/* Bell-ikon i resultat-headerns övre högra hörn (på den gula bakgrunden).
   Klick öppnar watch-popup nedanför stores-listan. */
.result-bell{
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  background:transparent;
  border:2.5px solid var(--ink);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:var(--ink);
  transition:transform 0.08s ease, background 0.15s ease;
  -webkit-tap-highlight-color:transparent;
}
.result-bell svg{ width:18px; height:18px; }
@media (hover: hover){
  .result-bell:hover{ transform:translate(-1px,-1px); }
}
.result-bell:active{ transform:translate(1px,1px); }
.result-bell.is-active{
  background:var(--ink);
  color:var(--yellow);
}

/* Klockan pendlar lite vid klick — subtil känsla, stannar efter ~0.9s.
   Vi animerar bara SVG:n (inte hela bell-knappen) så ringen behåller sin
   form. Pivot-punkt högst upp = pendel-känsla istället för rotering. */
@keyframes bell-pendulum{
  0%   { transform:rotate(0); }
  18%  { transform:rotate(-12deg); }
  36%  { transform:rotate(9deg); }
  54%  { transform:rotate(-6deg); }
  72%  { transform:rotate(3deg); }
  100% { transform:rotate(0); }
}
.result-bell.is-ringing svg{
  animation:bell-pendulum 0.9s ease-out;
  transform-origin:50% 18%;
}
@media (prefers-reduced-motion: reduce){
  .result-bell.is-ringing svg{ animation:none; }
}

/* Watch-popup: visas när användaren klickat bell-ikonen.
   Sitter högst upp i phase-result, mellan header och info-box. Använder
   CSS Grid-trick (0fr ↔ 1fr) för smooth slide-down/up som auto-anpassar
   sig till content-höjd. Border + shadow ligger på inner-elementet så
   ingen tunnstruts-effekt syns under animationen.
   Allt nedanför skuffas ner när popup expanderar.

   Element + states:
     .watch-popup            — grid container, 0fr (stängd) eller 1fr (öppen)
     .watch-popup-inner      — den synliga box:en med border + content
     .is-open                — class som JS lägger på .watch-popup */
.watch-popup{
  display:grid;
  grid-template-rows:0fr;
  margin-bottom:0;
  background:#fff;
  /* Border + shadow ligger på outer-elementet och animeras från 0
     så ingen tunnstrip-linje syns när popup är stängd. */
  border:0 solid var(--ink);
  box-shadow:5px 5px 0 transparent;
  transition:
    grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    margin-bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    border-width 0.22s ease-out,
    box-shadow 0.32s ease-out;
}
.watch-popup.is-open{
  grid-template-rows:1fr;
  margin-bottom:22px;
  border-width:3px;
  box-shadow:5px 5px 0 var(--ink);
}
.watch-popup-inner{
  overflow:hidden;
  min-height:0;
}
@media (prefers-reduced-motion: reduce){
  .watch-popup{ transition:none; }
}

/* Rapport-popup ("Fel skiva?") — samma grid-fr-animation som watch-popup,
   bara annan placering (under stores, inte i toppen). */
.report-popup{
  display:grid;
  grid-template-rows:0fr;
  margin-top:0;
  background:#fff;
  border:0 solid var(--ink);
  box-shadow:5px 5px 0 transparent;
  transition:
    grid-template-rows 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    margin-top 0.38s cubic-bezier(0.16, 1, 0.3, 1),
    border-width 0.22s ease-out,
    box-shadow 0.32s ease-out;
}
.report-popup.is-open{
  grid-template-rows:1fr;
  margin-top:14px;
  border-width:3px;
  box-shadow:5px 5px 0 var(--ink);
}
.report-popup-inner{
  overflow:hidden;
  min-height:0;
}
.report-intro{
  font-size:13px;
  line-height:1.4;
  margin-bottom:14px;
  opacity:0.75;
}
@media (prefers-reduced-motion: reduce){
  .report-popup{ transition:none; }
}
.watch-popup-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  border-bottom:3px solid var(--ink);
}
.watch-popup-title{
  font-family:'Archivo Black',sans-serif;
  font-size:14px;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.watch-popup-close{
  background:transparent;
  border:none;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  color:var(--ink);
  /* WCAG 2.5.5: minst 44×44 touch-area. Padding-runt-text räcker eftersom
     × är 24px font. Audit V1.25 #frontend-touch-targets. */
  min-width:44px;
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.watch-popup-close:hover{ opacity:0.6; }

.watch-form{padding:16px}
.watch-label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:6px;
}
.watch-threshold-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.watch-threshold-row input{
  flex:1;
  padding:10px 12px;
  border:3px solid var(--ink);
  background:#fff;
  font-family:'Space Grotesk',sans-serif;
  font-size:16px;
  font-weight:700;
  -webkit-appearance:none;
  -moz-appearance:textfield;
}
.watch-currency{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  font-size:16px;
  color:var(--ink);
}
/* "(Från 110)" — discrete hint som visar dagens pris från Discogs */
.watch-current-hint{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:500;
  color:#888;
  white-space:nowrap;
}
.watch-current-hint:empty{ display:none; }
.watch-email-input{
  width:100%;
  padding:10px 12px;
  border:3px solid var(--ink);
  background:#fff;
  font-family:'Space Grotesk',sans-serif;
  /* 16px för att slippa iOS Safari auto-zoom-on-focus (under 16px triggar
     den och scrollar inte tillbaka). Audit V1.25 #frontend-iOS-zoom. */
  font-size:16px;font-weight:500;
  margin-bottom:14px;
}
.watch-status{
  margin-top:12px;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  min-height:18px;
  line-height:1.4;
}
.watch-status.success{color:var(--blue);font-weight:700}
.watch-status.error{color:var(--red);font-weight:700}

/* ── Help & error phases (shared framed image) ──────────────────────────── */
.framed-img{
  width:100%;
  object-fit:cover;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  margin-bottom:20px;
}
.framed-img.help{max-height:240px}
.framed-img.error{max-height:260px;margin-bottom:24px}

.help-title{font-size:22px;margin-bottom:8px}
.help-msg{font-size:14px;line-height:1.5;margin-bottom:22px;font-weight:500}
.help-card-title{
  font-family:'Archivo Black',sans-serif;
  font-size:13px;text-transform:uppercase;
  margin-bottom:14px;
}
.help-input-label{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.08em;
  margin-bottom:4px;
}
.help-input{
  width:100%;
  padding:10px 12px;
  border:3px solid var(--ink);
  background:#fff;
  font-family:'Space Grotesk',sans-serif;
  /* 16px för att slippa iOS auto-zoom-on-focus (audit V1.25). */
  font-size:16px;font-weight:500;
  margin-bottom:12px;
}
.help-input:last-of-type{margin-bottom:0}

.label.red{background:var(--red);color:#fff}

.error-msg{font-size:12px;font-weight:700;line-height:1.6}

/* ── Store button extras (extracted from JS-built innerHTML) ───────────── */
.store-stripe{
  position:absolute;left:0;top:0;bottom:0;
  width:12px;
  border-right:3px solid var(--ink);
}
.store-right{display:flex;align-items:center;gap:8px}
.store-arrow{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  color:var(--blue);
}

/* ── Pick-match cards (manual-input borderline confidence) ──────────────
   Visas i phase-pick-match. Renderas dynamiskt av app.js → renderPickMatch().
   Varje kort visar Discogs cover + artist + album + år. Klick triggar
   buildVerifiedFromSearchResult och renderResultPage. */
.pick-match-card{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:12px;
  margin-bottom:12px;
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  transition:transform 0.1s ease-out, box-shadow 0.1s ease-out;
}
@media (hover: hover){
  .pick-match-card:hover{
    transform:translate(-2px, -2px);
    box-shadow:7px 7px 0 var(--ink);
  }
}
.pick-match-card:active{
  transform:translate(2px, 2px);
  box-shadow:3px 3px 0 var(--ink);
}
.pick-match-cover{
  flex-shrink:0;
  width:72px;
  height:72px;
  background:#eee;
  border:2px solid var(--ink);
  object-fit:cover;
}
.pick-match-info{
  flex:1;
  min-width:0;  /* tillåt text-truncate i flex-child */
}
.pick-match-artist{
  font-family:'Archivo Black',sans-serif;
  font-size:13px;
  letter-spacing:0.04em;
  color:var(--ink);
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pick-match-album{
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  margin-top:2px;
  /* Albumtitel kan vara lång — wrap till 2 rader sen klipp */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25;
}
.pick-match-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#666;
  margin-top:4px;
}

/* ─── Modal (bauhaus alert/confirm — audit V1.24.2 frontend #9) ──────────
   Overlay täcker full viewport med tonad bg, card centreras via flex.
   Fade-in animation matchar app:ens slide-easing (cubic-bezier exp-out).
   Reduced-motion: skip animation, instant show.
   A11y: role=alertdialog + aria-modal sätts på #rekord-modal, ui.js
   focus:ar OK-knappen vid open, ESC + click-outside resolvar cancel. */
.rekord-modal{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(26,26,26,0.42);
  animation:rekord-modal-fade 0.18s ease-out;
}
.rekord-modal[hidden]{ display:none; }
.rekord-modal-card{
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  padding:26px 24px 22px;
  max-width:380px; width:100%;
  animation:rekord-modal-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.rekord-modal-msg{
  font-family:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.4;
  color:var(--ink);
  margin:0 0 22px;
  word-wrap:break-word;
}
.rekord-modal-actions{
  display:flex; gap:10px; justify-content:flex-end;
  flex-wrap:wrap;
}
.rekord-modal-btn{
  font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;
  font-size:13px; text-transform:uppercase;
  letter-spacing:0.04em;
  border:3px solid var(--ink);
  padding:10px 18px;
  cursor:pointer;
  background:#fff;
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.06s ease-out, box-shadow 0.06s ease-out;
  min-width:90px;
}
.rekord-modal-btn:hover{ background:var(--cream); }
.rekord-modal-btn:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
.rekord-modal-btn:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
.rekord-modal-ok{ background:var(--yellow); }
.rekord-modal-ok:hover{ background:#ffdf3a; }
/* Danger-variant för destruktiva confirms (history-wipe etc) — röd OK-knapp */
.rekord-modal-ok.is-danger{ background:var(--red); color:#fff; }
.rekord-modal-ok.is-danger:hover{ background:#d62020; }
.rekord-modal-cancel{ background:#fff; }
.rekord-modal-cancel[hidden]{ display:none; }
@keyframes rekord-modal-fade{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes rekord-modal-pop{
  from{ opacity:0; transform:translateY(6px) scale(0.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .rekord-modal, .rekord-modal-card{ animation:none; }
}

/* ─── Hamburger-menu + site-nav (1.24.14) ──────────────────────────────
   Bara web. html.native-klassen (sätts av native-flag.js) gör den dold
   i Capacitor-bundlen där navigation sker via app-flow istället. */
.hamburger-btn{
  /* Grid-kolumn 3 (höger). Cream bg så prick-mönstret inte skiner igenom.
     z-index 9100 så knappen ligger OVER site-nav-backdrop+card (z:9001)
     när menyn är öppen — då morphas hamburgern till ett X som stänger.
     Audit V1.25.16. */
  position:relative;
  z-index:9100;
  grid-column:3;
  width:42px; height:42px;
  background:var(--cream);
  border:3px solid var(--ink);
  cursor:pointer;
  display:flex; flex-direction:column;
  justify-content:space-around; align-items:center;
  padding:9px 8px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.15s;
}
/* Stiliserade hamburger-bars: rundade ändar, 22×3px, jämna avstånd.
   transform-origin:center så rotation vid X-state är symmetrisk. */
.hamburger-btn span{
  display:block;
  width:22px; height:3px;
  background:var(--ink);
  border-radius:2px;
  transform-origin:center;
  transition:transform 0.32s cubic-bezier(0.65, 0, 0.35, 1),
             opacity 0.18s ease;
}
/* Open-state: morphas till ett kryss (X). Mid-bar fadar ut + scaleX:0.
   Top/bottom bar rör sig till mitten + roterar ±45° simultant.
   Container 42px med border 3px + padding 9px → content-area 18px tall.
   3 bars (3px) med space-around → centers vid y=3, 9, 15 (container
   center = 9). translateY-värdet ±6px = avståndet från bar-center till
   container-center så de möts exakt i mitten → symmetriskt X. V1.25.17. */
.hamburger-btn.is-open span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.hamburger-btn.is-open span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.hamburger-btn.is-open span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}
/* Open-state: bredare hover-färg-yta så X känns "closeable". Same hover
   gul som default men persistent (sätt på selector istället för hover).
   Egentligen ingen styling-ändring krävs — bars-färgen behåller --ink. */
.hamburger-btn:hover{ background:var(--yellow); }
.hamburger-btn:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}
.hamburger-btn:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
html.native .hamburger-btn,
html.native .site-nav{ display:none !important; }

.site-nav{
  position:fixed; inset:0;
  z-index:9001;
  display:flex; justify-content:flex-end;
}
.site-nav[hidden]{ display:none; }
.site-nav-backdrop{
  position:absolute; inset:0;
  background:rgba(26,26,26,0.42);
  animation:site-nav-fade 0.2s ease-out;
}
.site-nav-card{
  position:relative;
  width:min(320px, 80vw);
  background:var(--cream);
  border-left:3px solid var(--ink);
  box-shadow:-6px 0 0 var(--ink);
  /* Top-padding nedjusterad efter att visible × togs bort (V1.25.16) —
     hamburgern morphas till X istället så vi sparar luft i top. */
  padding:90px 24px 24px;
  animation:site-nav-slide 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y:auto;
}
/* Gömd från V1.25.16 — hamburgern morphas själv till X som stänger menyn.
   Bevarad i DOM så a11y/screen-reader fortfarande hittar en "Stäng"-knapp
   som fallback om hamburgerns z-index-trick failar. */
.site-nav-close{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0; padding:0;
}
.site-nav-close:hover{ color:var(--red); }
.site-nav-close:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
.site-nav-list{
  list-style:none; padding:0; margin:0;
}
.site-nav-list li{ margin-bottom:14px; }
.site-nav-list a{
  display:block;
  font-family:'Archivo Black','Helvetica Neue',Arial,sans-serif;
  font-size:18px; text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--ink);
  text-decoration:none;
  padding:14px 18px;
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.1s;
}
.site-nav-list a:hover{ background:var(--yellow); }
.site-nav-list a:active{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--ink);
}
.site-nav-list a:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
@keyframes site-nav-fade{
  from{ opacity:0; } to{ opacity:1; }
}
@keyframes site-nav-slide{
  from{ transform:translateX(100%); }
  to{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .site-nav-backdrop, .site-nav-card{ animation:none; }
}