/* Startflode: splash -> Valj upplevelse -> landning per lage -> intro ->
   inloggning. Prefix be- (bnh entry).

   Typografi: tre vikter (400/500/600), ingen text under 12px, radavstand
   1.15-1.25 pa rubriker och 1.5-1.55 pa brodtext.
   Rytm: 8 px for sektioner, 4 px for finjustering.
   Djup: lagrade skuggor i stallet for kanter.
   Radier: yttre = inre + padding (koncentriskt).

   Resetten ar skriven med :where() (noll specificitet) sa att den aldrig kan
   sla klassreglerna nedan. Inte #bnh-entry * (starkare) och inte @layer
   (saknas i aldre iOS Safari). */
:where(#bnh-entry) *{box-sizing:border-box;margin:0;padding:0}
:where(#bnh-entry) :is(ol,ul){list-style:none}

#bnh-entry{
  /* farg */
  --be-ink:#103539;
  --be-ink-svag:#4e676a;
  --be-petrol:#073b32;
  --be-petrol-ljus:#0a4d41;
  --be-petrol-djup:#04231d;
  --be-paper:#f8f7f3;
  --be-linje:#e3e3df;
  --be-guld:#d6b15a;
  --be-fokus:#d2ae55;
  --be-fel:#a8372c;

  /* text */
  --be-400:400; --be-500:500; --be-600:600;
  --be-meta:12px; --be-sek:14px; --be-brod:16px;
  --be-serif:Georgia,'Times New Roman',serif;
  --be-sans:Arial,Helvetica,sans-serif;

  /* rytm */
  --be-1:4px; --be-2:8px; --be-3:12px; --be-4:16px;
  --be-5:20px; --be-6:24px; --be-8:32px; --be-10:40px;

  /* radier: input 12 + kortets padding 20 = kortets 32 */
  --be-r-falt:12px; --be-r-kort:32px; --be-r-ruta:16px;

  /* djup */
  --be-skugga:0 1px 2px rgba(4,35,29,.06),0 8px 24px rgba(4,35,29,.10),0 24px 48px rgba(4,35,29,.08);
  --be-skugga-lyft:0 1px 2px rgba(4,35,29,.10),0 12px 32px rgba(4,35,29,.16);

  position:fixed;inset:0;z-index:100001;
  background:var(--be-petrol-djup);
  font:var(--be-400) var(--be-brod)/1.55 var(--be-sans);
  color:#fff;overflow:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#bnh-entry :focus-visible{outline:3px solid var(--be-fokus);outline-offset:2px;border-radius:6px}
/* rubriker tar fokus vid skarmbyte for skarmlasare - ingen synlig ring dar */
#bnh-entry [tabindex="-1"]:focus,#bnh-entry [tabindex="-1"]:focus-visible{outline:none}
#bnh-entry svg{flex-shrink:0}
#bnh-entry img{display:block}

/* --- skarmram --------------------------------------------------------- */
.be-screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + var(--be-5)) var(--be-5)
          calc(env(safe-area-inset-bottom,0px) + var(--be-6));
  overflow-y:auto;overscroll-behavior:contain;
}
.be-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.be-screen::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,35,29,.62) 0%,rgba(4,35,29,.30) 34%,rgba(4,35,29,.88) 100%);
}
.be-screen[data-skugga="tung"]::before{
  background:linear-gradient(180deg,rgba(4,35,29,.80) 0%,rgba(4,35,29,.72) 40%,rgba(4,35,29,.94) 100%);
}
.be-screen[data-skugga="ingen"]::before{background:none}

/* --- typografi -------------------------------------------------------- */
#bnh-entry h1{
  font:var(--be-500) clamp(32px,8.6vw,44px)/1.14 var(--be-serif);
  letter-spacing:-.015em;text-wrap:balance;
}
#bnh-entry h2{font:var(--be-500) clamp(24px,6vw,30px)/1.18 var(--be-serif);text-wrap:balance}
#bnh-entry h3{font:var(--be-600) var(--be-brod)/1.25 var(--be-serif)}
.be-sub{font:var(--be-400) var(--be-sek)/1.5 var(--be-sans);opacity:.86}
.be-eyebrow{
  font:var(--be-600) var(--be-meta)/1.4 var(--be-sans);
  letter-spacing:.18em;text-transform:uppercase;opacity:.76;
}
.be-fot{font:var(--be-400) var(--be-sek)/1.5 var(--be-sans);opacity:.72;text-align:center;margin-top:var(--be-5)}

/* --- valkomstskarm ---------------------------------------------------- */
/* Ordmarke hogst upp, budskap och knapp nere. Ingen skugga over fotot - himlen bar ordmarket pa egen hand (matt 6,8:1).
   Bara en toning nedtill, dar rubriken annars ligger over solbelyst fairway.
   Dubbel klass sa att regeln sakert slar .be-screen::before. */
.be-screen.be-valkommen::before{
  background:linear-gradient(180deg,
    rgba(4,35,29,0) 46%,
    rgba(4,35,29,.34) 62%,
    rgba(4,35,29,.72) 78%,
    rgba(4,35,29,.92) 92%,
    rgba(4,35,29,.96) 100%);
}
.be-ordmarke{
  font:var(--be-400) clamp(22px,6vw,27px)/1.1 var(--be-serif);
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
}

.be-valkommen{justify-content:space-between}
.be-valkommen .be-marke{
  display:flex;flex-direction:column;align-items:center;gap:var(--be-2);
  margin-top:4vh;text-align:center;
}
.be-valkommen .be-marke img{width:clamp(84px,23vw,104px);height:auto;filter:brightness(0) invert(1)}
#bnh-entry .be-valkommen .be-eyebrow{font-weight:var(--be-400);letter-spacing:.22em;opacity:.8}

.be-vk-fot{display:flex;flex-direction:column;gap:var(--be-3);padding-top:var(--be-8)}
#bnh-entry .be-valkommen h1{font-family:var(--be-serif);font-weight:var(--be-400);white-space:pre-line;margin-bottom:var(--be-1)}
.be-valkommen .be-sub{margin-bottom:var(--be-4);max-width:34ch}

/* --- ikoner och ordmarke ---------------------------------------------- */
/* Appens ikoner ar morkgrona PNG - vands till vitt pa foto. */
#bnh-entry .be-ikon{width:30px;height:30px;object-fit:contain;filter:brightness(0) invert(1)}
#bnh-entry .be-intro .be-ikon{filter:none}

/* --- landning per lage ------------------------------------------------ */
.be-landning{justify-content:flex-end}
/* Latt hand: texten ligger vanster och nere, sa skuggan behovs bara dar.
   Uppmatt med texten dold ger den har 5,3:1 som samst - marginal till kravet
   4,5 utan att dranka fotot. Ungefar halva den skugga som stod har forst. */
.be-landning::before{
  background:
    linear-gradient(90deg,rgba(4,35,29,.32) 0%,rgba(4,35,29,.10) 44%,rgba(4,35,29,0) 68%),
    linear-gradient(180deg,rgba(4,35,29,.28) 0%,rgba(4,35,29,.06) 30%,
                    rgba(4,35,29,.54) 74%,rgba(4,35,29,.74) 100%);
}
.be-landning .be-topp{display:flex;align-items:center;min-height:44px}
.be-landning .be-huvud{text-align:left;margin:auto 0 var(--be-6)}

/* Optisk inpassning. Varje PNG har olika mycket genomskinlig luft till
   vanster om sin synliga form - uppmatt vid alfa > 8: ordmarket 9,6 %,
   vaskan 14,2 % och pokalen 11,1 % av bildbredden. Utan kompensation hamnar
   de inte kant i kant. Marginalen raknas fran elementets egen bredd sa att
   den foljer clamp-skalningen. */
.be-landning .be-logga{
  --be-logo-bredd:clamp(124px,33vw,156px);
  width:var(--be-logo-bredd);height:auto;
  margin:0 0 var(--be-4) calc(var(--be-logo-bredd) * -0.096);
  filter:brightness(0) invert(1);
}
.be-landning h1{
  display:flex;align-items:center;gap:var(--be-3);
  margin-bottom:var(--be-3);
  font-weight:var(--be-400);   /* tunnare an ovriga rubriker */
}
.be-landning h1 .be-ikon{--be-ikon-bredd:clamp(30px,7.4vw,38px);width:var(--be-ikon-bredd);height:auto}
.be-landning h1 .be-ikon{margin-left:calc(var(--be-ikon-bredd) * -0.142)}
.be-landning .be-sub{max-width:34ch}

/* Citatet hogst upp till hoger, mindre - loggan och produktnamnet far
   platsen dar citatet tidigare lag. */
.be-landning .be-slogan{
  position:absolute;
  top:calc(env(safe-area-inset-top,0px) + var(--be-4));right:var(--be-5);
  height:clamp(72px,19.5vw,92px);width:auto;pointer-events:none;
}

.be-handlingar{display:flex;flex-direction:column;gap:var(--be-2)}
.be-landning .be-handlingar .be-lank{margin-top:var(--be-2)}
.be-delare{
  display:flex;align-items:center;gap:var(--be-3);
  margin:var(--be-5) 0 var(--be-3);
  font:var(--be-400) var(--be-sek)/1.4 var(--be-sans);opacity:.76;
}
.be-delare::before,.be-delare::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.22)}

/* --- knappar ---------------------------------------------------------- */
.be-knapp{
  display:flex;align-items:center;gap:var(--be-3);
  width:100%;min-height:52px;padding:0 var(--be-5);
  border-radius:26px;border:1px solid transparent;
  font:var(--be-600) 15px/1.3 var(--be-sans);text-align:left;cursor:pointer;
  transition:background-color 160ms ease-out,border-color 160ms ease-out,
             box-shadow 160ms ease-out,scale 120ms ease-out;
}
.be-knapp span{flex:1 1 auto}
.be-knapp:active{scale:.98}
.be-knapp[data-ton="ljus"]{background:var(--be-paper);color:var(--be-ink);box-shadow:var(--be-skugga-lyft)}
.be-knapp[data-ton="ljus"]:hover{background:#fff}
.be-knapp[data-ton="hal"]{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.42)}
.be-knapp[data-ton="hal"]:hover{background:rgba(255,255,255,.18)}
.be-knapp[data-ton="petrol"]{background:var(--be-petrol);color:#fff;box-shadow:var(--be-skugga-lyft)}
.be-knapp[data-ton="petrol"]:hover{background:var(--be-petrol-ljus)}
.be-lank{
  display:block;width:100%;min-height:44px;
  background:none;border:0;color:#fff;
  font:var(--be-600) var(--be-sek)/44px var(--be-sans);text-align:center;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.be-tillbaka{
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background-color 160ms ease-out,scale 120ms ease-out;
}
.be-tillbaka:hover{background:rgba(255,255,255,.24)}
.be-tillbaka:active{scale:.94}

/* --- intro: sa har gar det till --------------------------------------- */
.be-intro{justify-content:flex-start;background:var(--be-paper);color:var(--be-ink)}
.be-intro .be-topp{display:flex;align-items:center;min-height:44px}
.be-intro .be-tillbaka{background:rgba(16,53,57,.08);color:var(--be-ink)}
.be-intro .be-tillbaka:hover{background:rgba(16,53,57,.14)}
.be-intro .be-huvud{margin:var(--be-5) 0 var(--be-8)}
.be-intro .be-huvud>span{display:block;margin-bottom:var(--be-3);line-height:0}
.be-intro h1{font-size:clamp(28px,7.2vw,34px)}
.be-intro .be-sub{opacity:.72;margin-top:var(--be-2);max-width:40ch}
.be-steg{display:flex;flex-direction:column;gap:var(--be-5);margin-bottom:var(--be-8)}
.be-steg li{display:flex;gap:var(--be-4);align-items:flex-start}
.be-steg .be-nr{
  flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--be-petrol);color:#fff;
  font:var(--be-600) var(--be-meta)/28px var(--be-sans);text-align:center;
}
.be-steg h3{color:var(--be-ink)}
.be-steg p{font:var(--be-400) var(--be-sek)/1.5 var(--be-sans);color:var(--be-ink-svag);margin-top:2px}
.be-intro .be-handlingar{margin-top:auto}

/* --- inloggning (Monster 3: Form) ------------------------------------- */
/* Fotot tar den plats som blir over och formularet ligger som ett ark
   nederst, hogt som sitt innehall - inget dott vitt falt. */
.be-login{padding:0;justify-content:flex-end}
.be-login-hero{
  position:relative;isolation:isolate;
  flex:1 1 auto;min-height:150px;
  display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + var(--be-4)) var(--be-5) var(--be-8);
}
.be-login-hero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(4,35,29,.52) 0%,rgba(4,35,29,.34) 46%,rgba(4,35,29,.72) 100%);
}
.be-login-hero .be-topp{display:flex;align-items:center;min-height:44px}
.be-login-hero .be-logga{
  --be-logo-bredd:clamp(112px,30vw,138px);
  width:var(--be-logo-bredd);height:auto;
  margin:auto 0 0 calc(var(--be-logo-bredd) * -0.096);
  filter:brightness(0) invert(1);
}

.be-login-kort{
  position:relative;flex:0 0 auto;
  background:var(--be-paper);color:var(--be-ink);
  border-radius:var(--be-r-kort) var(--be-r-kort) 0 0;
  padding:var(--be-6) var(--be-5) calc(env(safe-area-inset-bottom,0px) + var(--be-6));
  box-shadow:0 -1px 2px rgba(4,35,29,.08),0 -16px 40px rgba(4,35,29,.22);
}
.be-login-kort .be-eyebrow{color:var(--be-ink-svag);opacity:1}
.be-login-kort h2{color:var(--be-ink);margin-top:var(--be-1)}
.be-login-kort>.be-sub{color:var(--be-ink-svag);opacity:1;margin:var(--be-1) 0 var(--be-6)}

.be-falt{margin-bottom:var(--be-4)}
.be-falt label{
  display:block;font:var(--be-600) var(--be-meta)/1.4 var(--be-sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--be-ink-svag);
  margin-bottom:var(--be-1);
}
.be-input-rad{position:relative;display:flex}
.be-falt input{
  width:100%;min-height:52px;padding:0 var(--be-4);
  border:1px solid var(--be-linje);border-radius:var(--be-r-falt);background:#fff;
  font:var(--be-400) var(--be-brod)/1.4 var(--be-sans);color:var(--be-ink);
  box-shadow:0 1px 2px rgba(4,35,29,.04);
  transition:border-color 140ms ease-out,box-shadow 140ms ease-out;
}
.be-falt input:hover{border-color:#cfd4ce}
.be-falt input:focus{border-color:var(--be-petrol);outline:3px solid var(--be-fokus);outline-offset:1px}
.be-falt[data-ogiltigt="1"] input{border-color:var(--be-fel)}
.be-falt .be-visa{
  position:absolute;right:var(--be-1);top:var(--be-1);width:44px;height:44px;
  border:0;background:none;color:var(--be-ink-svag);display:grid;place-items:center;
  cursor:pointer;border-radius:10px;transition:color 140ms ease-out}
.be-falt .be-visa:hover{color:var(--be-ink)}
.be-hjalp{font:var(--be-400) var(--be-meta)/1.4 var(--be-sans);color:var(--be-ink-svag);margin-top:var(--be-1)}
.be-fel{font:var(--be-400) var(--be-meta)/1.4 var(--be-sans);color:var(--be-fel);margin-top:var(--be-1)}
.be-falt[data-ogiltigt="1"] .be-hjalp{display:none}

#auth-error,#auth-success{
  display:none;font:var(--be-400) var(--be-sek)/1.5 var(--be-sans);
  padding:var(--be-3) var(--be-4);border-radius:var(--be-r-falt);margin-bottom:var(--be-4);
}
#auth-error{background:#fbecea;color:#8c2d23;box-shadow:inset 0 0 0 1px #e9c6c0}
#auth-success{background:#eaf3ec;color:#1f5c3a;box-shadow:inset 0 0 0 1px #c3dfcc}

.be-glomt{
  display:block;margin:0 0 var(--be-4) auto;min-height:44px;padding:0 var(--be-1);
  background:none;border:0;color:var(--be-ink-svag);
  font:var(--be-400) var(--be-sek)/44px var(--be-sans);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.be-glomt:hover{color:var(--be-ink)}
.be-login .be-delare{color:var(--be-ink-svag);opacity:1;margin:var(--be-5) 0 var(--be-3);font-size:var(--be-meta)}
.be-login .be-delare::before,.be-login .be-delare::after{background:var(--be-linje)}
/* Google ar ett andrahandsval - lagre och lattare an primarknappen. */
.be-google{
  display:flex;align-items:center;justify-content:center;gap:var(--be-2);
  width:100%;min-height:46px;padding:0 var(--be-5);border-radius:23px;
  border:1px solid var(--be-linje);background:#fff;color:var(--be-ink);
  font:var(--be-500) var(--be-sek)/1.3 var(--be-sans);cursor:pointer;
  transition:border-color 160ms ease-out,background-color 160ms ease-out,scale 120ms ease-out;
}
.be-google:hover{border-color:#cfd4ce;background:#fdfdfc}
.be-google:active{scale:.98}
.be-konto{
  text-align:center;font:var(--be-400) var(--be-sek)/1.5 var(--be-sans);
  color:var(--be-ink-svag);margin-top:var(--be-5);
}
.be-konto button{
  display:inline-flex;align-items:center;min-height:44px;padding:0 var(--be-1);
  background:none;border:0;color:var(--be-ink);
  font:var(--be-600) var(--be-sek)/1.5 var(--be-sans);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}

/* --- rorelse: delad och forskjuten entre, mjuk uttoning -------------- */
.be-screen{animation:be-in 220ms ease-out both}
@keyframes be-in{from{opacity:0}to{opacity:1}}
.be-valkommen .be-marke,.be-valkommen h1,.be-valkommen .be-vk-fot,
.be-landning .be-huvud,.be-landning .be-handlingar,.be-landning .be-slogan,
.be-login-hero .be-logga,.be-login-kort{animation:be-stig 460ms ease-out both}
@keyframes be-stig{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  #bnh-entry *,#bnh-entry *::before,#bnh-entry *::after{
    animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important;
  }
  .be-knapp:active,.be-google:active,.be-tillbaka:active{scale:none}
}

/* --- storre skarmar --------------------------------------------------- */
@media (min-height:760px){
  .be-kort{min-height:196px}
  .be-login-hero{min-height:220px}
}
/* En lasbar kolumn i stallet for en utstrackt yta. */
@media (min-width:520px){
  .be-screen{padding-left:max(var(--be-5),calc((100% - 440px) / 2));
             padding-right:max(var(--be-5),calc((100% - 440px) / 2))}
  .be-login{padding:0}
  .be-login-hero{padding-left:max(var(--be-5),calc((100% - 440px) / 2));
                 padding-right:max(var(--be-5),calc((100% - 440px) / 2))}
  .be-login-kort{
    max-width:480px;margin:0 auto;
    border-radius:var(--be-r-kort) var(--be-r-kort) 0 0;
    padding-left:var(--be-8);padding-right:var(--be-8);
  }
}

/* Use the app's high-contrast serif: Georgia 400 and 500 render alike. */
#bnh-entry .be-valkommen{--be-serif:'Bodoni Moda',Georgia,serif}
#bnh-entry .be-valkommen .be-eyebrow{font-family:Inter,Arial,sans-serif;font-weight:400}

#bnh-entry .be-valkommen :is(.be-ordmarke,h1){font-size:clamp(22px,6vw,27px);font-optical-sizing:none;font-variation-settings:"opsz" 27}
#bnh-entry .be-valkommen #be-vk-rubrik{font-size:clamp(28px,8vw,36px);letter-spacing:0;line-height:1.08;text-wrap:initial}

/* Desktop login: keep the form readable beside the photograph. Mobile stays stacked. */
@media (min-width:900px){
  .be-screen.be-login{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,480px);
    grid-template-rows:minmax(min-content,1fr);align-items:center;
    gap:clamp(32px,4vw,72px);padding:32px clamp(32px,4vw,72px);
  }
  .be-login .be-login-hero{
    align-self:stretch;min-width:0;min-height:440px;
    padding:28px;border-radius:24px;overflow:hidden;
  }
  .be-login .be-login-kort{
    width:100%;max-width:480px;margin:0;
    border-radius:32px;padding:32px;
  }
}