/* Preview gate (core/gate.py): the seller's world fills the page, sign-in stays a small fixed panel above it.
   Light only for now (Martin 22. 10. 2026); radii: panel 12px, controls 8px. */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/hanken-grotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --bg:#f5f7fb;--surface:#fff;--line:#e2e6ee;--line-strong:#c7cedc;--text:#0a1633;--muted:#566280;
  --accent:#1541d0;--accent-hover:#1236b0;--accent-ink:#fff;--danger:#b3261e;--header-bg:var(--surface);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font:400 1rem/1.5 "Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}

.gate-world{position:relative;z-index:0;min-height:100dvh}
.gate-photo{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}

.gate-panel{
  position:fixed;z-index:100;top:24px;right:24px;width:min(340px,calc(100vw - 48px));
  padding:20px 22px 22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 1px 2px rgb(10 22 51 / .06),0 22px 48px -18px rgb(10 22 51 / .32);
}
.gate-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* The seller's logo is drawn for its header colour (Copytech: white letters on blue), so it sits on that colour here too. */
.gate-brand{display:inline-flex;align-items:center;padding:8px 12px;border-radius:8px;background:var(--header-bg)}
.gate-logo{display:block;height:28px;width:auto;max-width:100%}
.gate-form{display:grid;gap:6px;margin-top:20px}
.gate-form h1{margin:0 0 6px;font-size:1.125rem;line-height:1.3;font-weight:650;letter-spacing:-.01em}
.gate-form label{margin-top:8px;font-size:.875rem;font-weight:600}
.gate-form input{
  width:100%;min-height:44px;padding:10px 12px;font:inherit;color:var(--text);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;
}
.gate-form input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.gate-error{margin:0 0 2px;padding:10px 12px;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--surface))}

.gate-submit,.gate-toggle{
  min-height:44px;padding:0 18px;border:0;border-radius:8px;font:inherit;font-weight:650;cursor:pointer;
  color:var(--accent-ink);background:var(--accent);transition:background-color .15s ease-out,transform .1s ease-out;
}
.gate-submit{margin-top:16px}
.gate-submit:hover,.gate-toggle:hover{background:var(--accent-hover)}
.gate-submit:active,.gate-toggle:active{transform:translateY(1px)}
.gate-submit:focus-visible,.gate-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gate-toggle[hidden]{display:none}

/* Phones: a bar at the bottom edge with the logo; the form unfolds above it (gate.js). Without JS it stays open. */
@media (max-width:860px){
  .gate-panel{top:auto;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));width:auto;padding:12px 12px 12px 16px}
  .gate-logo{height:24px}
  .gate-brand{padding:7px 10px}
  .gate-panel[data-open="false"] .gate-form{display:none}
  .gate-form{margin-top:16px;padding-bottom:4px}
}
@media (prefers-reduced-motion:no-preference){
  .gate-panel[data-open="true"] .gate-form{animation:gate-unfold .24s cubic-bezier(.16,1,.3,1)}
  @keyframes gate-unfold{from{opacity:0;transform:translateY(6px)}}
}