/* Inloggningen i Tournament, formgiven som Trips (assets/v3/app-entry.css):
   foto som tar den plats som blir over, formularet som ett ark nederst hogt
   som sitt innehall. Egen prefix ts- sa att den gamla .tournament-profile-
   stilen inte blandar sig i. Innehallet skiljer sig fran Trips - har loggar
   man in med en mejllank, inte losenord. */
#app .ts-signin{
  --ts-ink:#103539;
  --ts-ink-svag:#4e676a;
  --ts-petrol:#073b32;
  --ts-petrol-ljus:#0a4d41;
  --ts-paper:#f8f7f3;
  --ts-linje:#e3e3df;
  --ts-fokus:#d2ae55;
  --ts-serif:Georgia,'Times New Roman',serif;
  --ts-sans:Arial,Helvetica,sans-serif;

  position:fixed;inset:0;z-index:50;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:#04231d;color:#fff;
  font:400 16px/1.55 var(--ts-sans);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#app .ts-signin *{box-sizing:border-box}
#app .ts-signin :focus-visible{outline:3px solid var(--ts-fokus);outline-offset:2px;border-radius:6px}
#app .ts-signin [tabindex="-1"]:focus{outline:none}

/* --- foto --------------------------------------------------------------- */
.ts-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) + 16px) 20px 32px;
}
.ts-hero>img.ts-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ts-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%);
}
/* Ordmarkets slinga har 9,6 % genomskinlig luft till vanster i filen - samma
   kompensation som Trip gor, sa att loggan star kant i kant med texten. */
.ts-marke{
  --ts-logo:clamp(112px,30vw,138px);
  width:var(--ts-logo);margin:auto 0 0 calc(var(--ts-logo) * -0.096);
}
.ts-marke img{width:100%;height:auto;display:block;filter:brightness(0) invert(1)}

/* --- arket -------------------------------------------------------------- */
.ts-kort{
  position:relative;flex:0 0 auto;
  background:var(--ts-paper);color:var(--ts-ink);
  border-radius:32px 32px 0 0;
  padding:24px 20px calc(env(safe-area-inset-bottom,0px) + 24px);
  box-shadow:0 -1px 2px rgba(4,35,29,.08),0 -16px 40px rgba(4,35,29,.22);
}
.ts-eyebrow{
  font:600 12px/1.4 var(--ts-sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ts-ink-svag);margin:0;
}
#app .ts-kort h2{
  font:500 clamp(24px,6vw,30px)/1.18 var(--ts-serif);
  color:var(--ts-ink);margin:4px 0 0;text-wrap:balance;
}
.ts-sub{font:400 14px/1.5 var(--ts-sans);color:var(--ts-ink-svag);margin:4px 0 24px}

#app .ts-kort form{display:block;margin:0}
.ts-falt{margin-bottom:8px}
#app .ts-falt label{
  display:block;font:600 12px/1.4 var(--ts-sans);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ts-ink-svag);
  margin:0 0 4px;
}
#app .ts-falt input{
  width:100%;min-height:52px;padding:0 16px;
  border:1px solid var(--ts-linje);border-radius:12px;background:#fff;
  font:400 16px/1.4 var(--ts-sans);color:var(--ts-ink);
  box-shadow:0 1px 2px rgba(4,35,29,.04);
  transition:border-color 140ms ease-out;
}
#app .ts-falt input:hover{border-color:#cfd4ce}
#app .ts-falt input:focus{border-color:var(--ts-petrol);outline:3px solid var(--ts-fokus);outline-offset:1px}
.ts-hjalp{font:400 12px/1.4 var(--ts-sans);color:var(--ts-ink-svag);margin:0 0 16px}

#app .ts-knapp{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:52px;padding:0 20px;margin:0;
  border:0;border-radius:26px;background:var(--ts-petrol);
  color:#fff;-webkit-text-fill-color:#fff;
  font:600 15px/1.3 var(--ts-sans);letter-spacing:0;text-transform:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(4,35,29,.10),0 12px 32px rgba(4,35,29,.16);
  transition:background-color 160ms ease-out,scale 120ms ease-out;
}
#app .ts-knapp:hover{background:var(--ts-petrol-ljus)}
#app .ts-knapp:active{scale:.98}

#app .ts-signin .auth-status{
  font:400 13px/1.5 var(--ts-sans);color:var(--ts-ink-svag);
  margin:12px 0 0;text-align:center;
}

.ts-delare{
  display:flex;align-items:center;gap:12px;
  margin:20px 0 12px;font:400 12px/1.4 var(--ts-sans);color:var(--ts-ink-svag);
}
.ts-delare::before,.ts-delare::after{content:'';flex:1;height:1px;background:var(--ts-linje)}

/* Andrahandsval - lagre och lattare an primarknappen. */
#app .ts-andra{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:46px;padding:0 20px;margin:0;
  border:1px solid var(--ts-linje);border-radius:23px;background:#fff;
  color:var(--ts-ink);-webkit-text-fill-color:var(--ts-ink);
  font:500 14px/1.3 var(--ts-sans);letter-spacing:0;text-transform:none;cursor:pointer;
  box-shadow:none;
  transition:border-color 160ms ease-out,background-color 160ms ease-out,scale 120ms ease-out;
}
#app .ts-andra:hover{border-color:#cfd4ce;background:#fdfdfc}
#app .ts-andra:active{scale:.98}
#app .ts-andra+.ts-andra{margin-top:8px}
#app .ts-andra svg{width:20px;height:20px;flex-shrink:0}

.ts-fot{
  font:400 12px/1.5 var(--ts-sans);color:var(--ts-ink-svag);
  text-align:center;margin:20px 0 0;
}

@media (min-height:760px){.ts-hero{min-height:220px}}
@media (min-width:520px){
  .ts-hero{padding-left:max(20px,calc((100% - 440px) / 2));
           padding-right:max(20px,calc((100% - 440px) / 2))}
  .ts-kort{max-width:480px;margin:0 auto;padding-left:32px;padding-right:32px}
}

.ts-marke,.ts-kort{animation:ts-stig 460ms ease-out both}
.ts-kort{animation-delay:100ms}
@keyframes ts-stig{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .ts-marke,.ts-kort{animation-duration:1ms!important;animation-delay:0ms!important}
  #app .ts-knapp:active,#app .ts-andra:active{scale:none}
}

/* --- startsidan ---------------------------------------------------------- */
/* Samma uppbyggnad som Trips: ordmarke hogst upp, budskap och knapp nere,
   skuggan bara dar texten ligger sa att fotot far vara ifred. */
#app .ts-start{
  --ts-serif:Georgia,'Times New Roman',serif;
  --ts-sans:Arial,Helvetica,sans-serif;
  --ts-fokus:#d2ae55;
  position:fixed;inset:0;z-index:50;isolation:isolate;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 20px) 20px
          calc(env(safe-area-inset-bottom,0px) + 24px);
  background:#04231d;color:#fff;
  font:400 16px/1.55 var(--ts-sans);
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#app .ts-start *{box-sizing:border-box}
#app .ts-start :focus-visible{outline:3px solid var(--ts-fokus);outline-offset:2px;border-radius:6px}
#app .ts-start [tabindex="-1"]:focus{outline:none}
#app .ts-start>img.ts-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
#app .ts-start::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(4,35,29,.46) 0%, rgba(4,35,29,.06) 24%,
    rgba(4,35,29,.34) 56%, rgba(4,35,29,.78) 76%,
    rgba(4,35,29,.93) 92%, rgba(4,35,29,.96) 100%);
}

.ts-marke-topp{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:4vh;text-align:center}
.ts-marke-topp img{width:clamp(84px,23vw,104px);height:auto;display:block;filter:brightness(0) invert(1)}
.ts-ordmarke{
  font:400 clamp(22px,6vw,27px)/1.1 var(--ts-serif);margin:0;
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
}
.ts-eyebrow-ljus{
  font:600 12px/1.4 var(--ts-sans);letter-spacing:.22em;
  text-transform:uppercase;opacity:.8;margin:0;
}

.ts-start-fot{display:flex;flex-direction:column;gap:12px;padding-top:32px}
#app .ts-start h1{
  font:400 clamp(32px,8.6vw,44px)/1.14 var(--ts-serif);
  letter-spacing:-.015em;margin:0 0 4px;white-space:pre-line;text-wrap:balance;
}
.ts-start-sub{font:400 14px/1.5 var(--ts-sans);opacity:.86;margin:0 0 16px;max-width:34ch}

#app .ts-knapp-ljus{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:52px;padding:0 20px;margin:0;
  border:0;border-radius:26px;background:#f8f7f3;
  color:#103539;-webkit-text-fill-color:#103539;
  font:600 15px/1.3 var(--ts-sans);letter-spacing:0;text-transform:none;cursor:pointer;
  box-shadow:0 1px 2px rgba(4,35,29,.10),0 12px 32px rgba(4,35,29,.16);
  transition:background-color 160ms ease-out,scale 120ms ease-out;
}
#app .ts-knapp-ljus:hover{background:#fff}
#app .ts-knapp-ljus:active{scale:.98}
#app .ts-lank{
  display:block;width:100%;min-height:44px;margin:0;padding:0;
  background:none;border:0;box-shadow:none;
  color:#fff;-webkit-text-fill-color:#fff;
  font:600 14px/44px var(--ts-sans);letter-spacing:0;text-transform:none;
  text-align:center;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}

/* tillbaka till startsidan fran inloggningen */
.ts-topp{display:flex;align-items:center;min-height:44px}
#app .ts-tillbaka{
  width:44px;height:44px;min-height:44px;padding:0;margin:0;
  border:0;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;-webkit-text-fill-color:#fff;box-shadow:none;
  display:grid;place-items:center;cursor:pointer;
  transition:background-color 160ms ease-out,scale 120ms ease-out;
}
#app .ts-tillbaka:hover{background:rgba(255,255,255,.24)}
#app .ts-tillbaka:active{scale:.94}

.ts-marke-topp,.ts-start-fot{animation:ts-stig 460ms ease-out both}
.ts-start-fot{animation-delay:100ms}
@media (min-width:520px){
  #app .ts-start{padding-left:max(20px,calc((100% - 440px) / 2));
                 padding-right:max(20px,calc((100% - 440px) / 2))}
}
@media (prefers-reduced-motion:reduce){
  .ts-marke-topp,.ts-start-fot{animation-duration:1ms!important;animation-delay:0ms!important}
  #app .ts-knapp-ljus:active,#app .ts-tillbaka:active{scale:none}
}

/* Match the Trip and BNH welcome typography. */
#app .ts-start :is(.ts-ordmarke,h1){font-family:'Bodoni Moda',Georgia,serif;font-weight:400;font-size:clamp(22px,6vw,27px);font-optical-sizing:none;font-variation-settings:"opsz" 27}
#app .ts-start #ts-start-rubrik{font-size:clamp(28px,8vw,36px);letter-spacing:0;line-height:1.08;text-wrap:initial}
#app .ts-start .ts-eyebrow-ljus{font-family:Inter,Arial,sans-serif;font-weight:400}

/* Same desktop composition as Trip; preserve the mobile sign-in sheet. */
@media (min-width:900px){
  #app .ts-signin{
    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);
  }
  .ts-signin .ts-hero{
    align-self:stretch;min-width:0;min-height:440px;
    padding:28px;border-radius:24px;overflow:hidden;
  }
  .ts-signin .ts-kort{
    width:100%;max-width:480px;margin:0;
    border-radius:32px;padding:32px;
  }
}