/* decypher - shared styles for the access and sign-up pages.
   The tokens are the site's own, copied from nowhere: one source, so a colour changed on the site
   is a colour changed here. Authorship and ownership: @Tori, @Decypher_oficial */

:root{
  --ink:#08090f; --ink-2:#0c0e18; --surface:#101322; --raised:#171b2d;
  --hair:#252a42; --hair-soft:#191d30;
  --gold:#f5a524; --gold-deep:#d18700; --gold-soft:#ffc86b; --acc:#f5a524;
  --text:#f7f5f2; --text-2:#bcc2d4; --muted:#8b93aa; --thread:#8b8fff;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"Yu Gothic UI","Hiragino Sans","Noto Sans JP","Microsoft YaHei","PingFang SC","Noto Sans SC","Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR","Segoe UI Historic","Noto Naskh Arabic","Geeza Pro","Tahoma","Nirmala UI","Noto Sans Devanagari","Kohinoor Devanagari",sans-serif;
  --mono:"Cascadia Code",ui-monospace,Consolas,"SF Mono",Menlo,monospace;
  --fast:120ms; --base:220ms;
  --eo:cubic-bezier(.22,1,.36,1);
  --edge:clamp(1.1rem,4vw,4rem);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ink:#f6f6f9; --ink-2:#edeef4; --surface:#ffffff; --raised:#fafbfd;
  --hair:#dcdfe9; --hair-soft:#e9ebf2;
  --gold:#c97f00; --gold-deep:#9a5f00; --gold-soft:#e09a1f; --acc:#8a5400;
  --text:#111220; --text-2:#454a5e; --muted:#656b81; --thread:#4a4fd4;
  color-scheme:light;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:var(--sans); background:var(--ink); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:4px;
}

/* header: the way back to the site is always in reach. A page you can only leave by going back
   is a page that traps whoever landed on it by mistake. */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem var(--edge); border-bottom:1px solid var(--hair-soft);
}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700; text-decoration:none; color:var(--text)}
.brand .mono{font-family:var(--mono); color:var(--acc)}
.tabs{display:flex; gap:.5rem}
.seg{display:flex; border:1px solid var(--hair); border-radius:999px; overflow:hidden}
.segbtn{
  font:inherit; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  background:transparent; color:var(--muted); border:0; padding:.35rem .7rem; cursor:pointer;
}
.segbtn.is-on{background:var(--gold); color:#0b0b12; font-weight:700}

main{flex:1; display:grid; place-items:center; padding:clamp(2rem,6vw,4rem) var(--edge)}
.panel{
  width:100%; max-width:26rem; background:var(--surface);
  border:1px solid var(--hair); border-radius:16px; padding:clamp(1.6rem,4vw,2.4rem);
}
.eyebrow{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--acc); margin-bottom:.5rem;
}
h1{font-size:clamp(1.5rem,3.4vw,2rem); line-height:1.15; letter-spacing:-.02em; text-wrap:balance}
.lede{color:var(--text-2); font-size:.95rem; margin-top:.6rem}

form{display:flex; flex-direction:column; gap:1rem; margin-top:1.6rem}
label{display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; color:var(--text-2)}
input{
  font:inherit; color:var(--text); background:var(--ink-2);
  border:1px solid var(--hair); border-radius:8px; padding:.7rem .8rem;
}
input::placeholder{color:var(--muted)}
.hint{font-size:.78rem; color:var(--muted)}

.btn{
  font:inherit; font-weight:700; text-align:center; text-decoration:none; cursor:pointer;
  border-radius:999px; padding:.75rem 1.2rem; border:1px solid var(--hair);
  color:var(--text); background:transparent; transition:transform var(--fast) var(--eo);
}
.btn.solid{background:var(--gold); color:#0b0b12; border-color:var(--gold)}
.btn:hover{transform:translateY(-1px)}

.alt{margin-top:1.2rem; font-size:.88rem; color:var(--text-2); display:flex; flex-wrap:wrap; gap:.4rem}
/* This rule beats the browser default for [hidden]. The Google block is hidden on purpose and
   entrada.js is what reveals it, once the API answers that Google is available. */
.alt[hidden]{display:none}

/* What the page promises about the voucher. It is said before signing up, not after: somebody who
   learns their code is shown once only after it scrolled past has already lost it. */
.aviso{
  margin-top:1.4rem; border-left:2px solid var(--gold); background:var(--raised);
  padding:.9rem 1rem; border-radius:0 10px 10px 0; font-size:.85rem; color:var(--text-2);
}
.aviso strong{color:var(--text)}

footer{padding:1.2rem var(--edge); border-top:1px solid var(--hair-soft); font-size:.78rem; color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

/* The mark beside the name, at the same measurements as the cover and both panels. It lives in this
   sheet because this sheet is the one for the access pages: each surface declares its own. */
.brandlogo{width:30px; height:30px; display:inline-grid; place-items:center; flex:none}
.brandlogo img,.brandlogo svg{width:100%; height:100%; display:block}

/* Narrow screen: the header settles into two rows instead of shrinking, because a switch smaller
   than the finger pressing it is not a switch. */
@media (max-width: 30rem){
  .top{flex-wrap:wrap; row-gap:.55rem}
  .top .tabs{flex-wrap:wrap; gap:.5rem; justify-content:flex-end; width:100%}
}

/* --- What is pressed with a finger at the door ---------------------------------------------
   The link to the other door is running text, 16px tall. It does not grow, which would break the
   paragraph line; the touch area widens underneath at 24px, since 44 would steal the field above. */
@media (pointer: coarse) {
  .alt a:not(.btn) { position: relative; }
  .alt a:not(.btn)::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 24px; transform: translateY(-50%);
  }
}