:root {
  color-scheme: dark;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-height: 100svh;
  overflow-x: hidden;
  color: #f6fbff;
  /* Delivery derivatives of the approved 4K wallpaper: pure downscale, same 16:9
     framing, no crop and no content change. Small viewports never fetch the large
     one. See PUBLIC-ASSETS.md for the exact source hash and commands.

     These live in ../source/ rather than beside this file because the desktop behind
     the gate uses the same two images. One copy in the build, and the browser has
     already downloaded it by the time the desktop paints, so login shows no flash. */
  background: #071218 url("../source/A2-wallpaper-desktop-1280.jpg") 50% 50% / cover no-repeat fixed;
}

@media (min-width: 720px) {
  body { background-image: url("../source/A2-wallpaper-desktop-2560.jpg"); }
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 8, 12, .43) 0%, rgba(2, 10, 14, .18) 43%, rgba(2, 8, 12, .1) 100%),
    linear-gradient(180deg, rgba(2, 8, 11, .16), rgba(2, 8, 11, .26));
}

a, button, input { font: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #d9f4ff;
  outline-offset: 2px;
}

.gate-menu {
  position: fixed;
  z-index: 10;
  inset: 0 0 auto;
  height: 24px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #23343f;
  font-size: 12px;
  text-shadow: 0 1px rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(75,99,112,.58);
  box-shadow: 0 1px 2px rgba(20,35,43,.26);
  background: linear-gradient(180deg, #fcfeff 0%, #dce5ea 48%, #c5d0d6 51%, #edf3f6 100%);
}

.gate-menu-left { height: 100%; display: flex; align-items: center; gap: 7px; }
.gate-home-mark { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 3px; }
.gate-home-mark img { width: 13px; height: 13px; display: block; }
.gate-home-mark:hover, .gate-home-mark:focus-visible, .gate-menu-link:hover, .gate-menu-link:focus-visible {
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,.28);
  background: linear-gradient(#659fc3, #347ca7);
  outline-offset: -2px;
}
.gate-menu strong { padding: 0 3px; white-space: nowrap; }
.gate-menu-link { height: 100%; padding: 0 7px; display: grid; place-items: center; color: inherit; text-decoration: none; }
.gate-clock { white-space: nowrap; }

.gate-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  /* The bias is the second term. Centring means the card drops by half of whatever is added
     here, so ~74px of extra top padding puts the heading back where r04 measured it. Kept as
     padding rather than a translate so the card can never be pushed off the top of a short
     viewport — the shell simply grows and the page scrolls. */
  padding: calc(max(72px, 12vh) + 74px) 5vw 58px;
  display: grid;
  align-items: center;
}

/* One content column. The brand header is centred inside it; everything from the section
   heading down shares the column's left edge, so the heading, the supporting sentence, the
   field label, the field, its status line, the contract panel and the X action all line up
   on a single left and right edge. 540px is wide enough for the panel's two sentences to
   wrap naturally and still clears the animal at the wide placements. */
.gate-card {
  width: min(540px, calc(100vw - 40px));
  margin-left: clamp(18px, 6vw, 116px);
  display: grid;
  justify-items: stretch;
  text-align: left;
  /* The shadow is what carries the copy over the wallpaper. Worst-case contrast, measured
     shadow-free against the actual pixels behind each glyph, is checked at 4.5:1 across
     every reviewed viewport, so no full-width panel or scrim is needed behind the login.
     Lighter than r04's: the contract panel now has a surface of its own, so the shadow no
     longer has to do that block's work as well.
     Numbers in QA-REPORT.md; re-measure with working/gate_contrast_qa.js. */
  text-shadow: 0 1px 2px rgba(0,0,0,.78), 0 2px 10px rgba(0,0,0,.34);
}

/* The Help view has no form to align to, so its heading and mark stay centred. These two
   selectors match only there — on the login view both sit inside .gate-identity. */
.gate-card > .gate-mark { justify-self: center; }
.gate-card > h1 { justify-self: center; text-align: center; }

.gate-identity { margin-bottom: 26px; text-align: center; }

.gate-mark {
  width: 94px;
  height: 94px;
  margin-bottom: 12px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.54));
}

h1 { margin: 0; font-size: clamp(27px, 3vw, 36px); line-height: 1.1; letter-spacing: -.7px; }
.tagline { margin: 8px 0 0; font-size: 14px; font-weight: 700; }

.preview-label { margin: 0; font-size: 15px; font-weight: 700; }
.instruction { margin: 6px 0 14px; font-size: 14px; line-height: 1.45; }

.access-form { display: grid; }
/* The username field password managers look for: present to them, absent to everyone else. */
.offscreen { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.access-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; }

/* Full-width field, full-width button under it. One arrangement at every width, so there is
   no narrow-screen variant to reason about, and no arrow-only control whose meaning has to
   be guessed. The light, subtly inset field is kept from r04 for the 2009 character. */
.access-code {
  width: 100%;
  min-height: 48px;
  padding: 5px 13px;
  color: #1f313b;
  background: rgba(255,255,255,.96);
  border: 1px solid #70838e;
  border-radius: 7px;
  box-shadow: inset 0 1px 2px rgba(23,41,51,.28), 0 1px rgba(255,255,255,.35);
}

/* The primary action, in a green related to the approved apple rather than sampled from its
   brightest highlight: #00C805 is the mark's own accent and is too luminous to sit a label
   on. This is that hue held down to a mid tone, which lets the label be dark and gives the
   restrained vertical gradient and single top highlight the era used. Dark text measures
   4.9:1 against the darkest band of the gradient and better everywhere above it. */
.access-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #06240c;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.34);
  cursor: pointer;
  border: 1px solid #14761f;
  border-radius: 7px;
  background: linear-gradient(180deg, #58d365 0%, #2ab441 46%, #1da233 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(3,20,8,.4);
}
.access-submit:hover { background: linear-gradient(180deg, #63d970 0%, #2fbd47 46%, #21ac38 100%); }
.access-submit:active {
  background: linear-gradient(180deg, #1f9c30 0%, #27ad3a 54%, #34ba48 100%);
  box-shadow: inset 0 2px 4px rgba(3,20,8,.42);
}

.feedback {
  min-height: 22px;
  margin: 8px 0 0;
  color: #fff4e6;
  font-size: 13px;
  line-height: 1.35;
}
.feedback[data-state="pending"] { color: rgba(240, 249, 253, .82); }

/* Pending state: quiet, no spinner, no fake progress. The label says what is happening and
   stays readable — 5.4:1 on the muted green — rather than being dimmed into the surface. */
.access-form[data-pending="true"] .access-code { color: #62717a; }
.access-form[data-pending="true"] .access-submit,
.access-submit[disabled] {
  color: #0d2b14;
  border-color: #4d7f57;
  background: linear-gradient(180deg, #9fd2a9 0%, #7ab486 52%, #6aa876 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34);
  cursor: default;
}

.help-copy { margin: 6px 0 18px; font-size: 14px; line-height: 1.5; }
.home-link { color: #fff; font-size: 13px; justify-self: start; }

/* The public half of the gate: what there is to say about a token that does not exist, and
   where the real account is. Its own translucent surface rather than a rule and a caption,
   because this is the block a stranger who followed a scam link came for. Dark and neutral
   on purpose — green here, or a tick, would read as "launched" or "verified", which is the
   opposite of what it says. No address, no explorer link, no copy control. */
.gate-notice {
  margin-top: 18px;
  padding: 13px 15px;
  display: grid;
  gap: 5px;
  background: rgba(6,16,22,.5);
  border: 1px solid rgba(207,228,241,.26);
  border-radius: 8px;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.gate-contract { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.gate-verify { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(234,245,251,.92); }

/* Secondary to the green button by weight, not by hue: outlined and translucent against a
   filled control. Hover and focus add an underline as well as lightening the surface, so
   interactivity is never carried by colour alone. */
.gate-x-link {
  margin-top: 10px;
  min-height: 44px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #eef7fb;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  background: rgba(8,19,26,.44);
  border: 1px solid rgba(214,235,247,.44);
  border-radius: 7px;
}
.gate-x-link:hover, .gate-x-link:focus-visible {
  background: rgba(14,32,43,.62);
  border-color: rgba(230,244,252,.72);
  text-decoration: underline;
}
.gate-x-icon { flex: none; }

@media (max-width: 760px) {
  /* Matches the A8 menu bar's own narrow-screen behaviour: taller bar, no clock. */
  .gate-clock { display: none; }
}

@media (max-width: 700px) {
  body { background-attachment: scroll; background-position: 62% center; }
  body::before { background: linear-gradient(180deg, rgba(1,7,10,.18), rgba(1,7,10,.54)); }
  .gate-menu { height: 36px; padding: 0 8px; }
  .gate-home-mark { width: 28px; height: 36px; }
  .gate-menu-link { padding: 0 8px; }
  /* Generous side padding kept at 20px, and the column simply fills it. */
  .gate-shell { min-height: 100svh; padding: 78px 20px max(42px, env(safe-area-inset-bottom)); align-items: end; }
  .gate-card { width: 100%; margin: 0 auto; }
  .gate-mark { width: 78px; height: 78px; margin-bottom: 11px; }
  .gate-identity { margin-bottom: 26px; }
}

/* A small portrait phone. r04 fitted its whole card into 320 x 568 by taking pixels from
   below the tagline; this revision adds a padded panel and a second full-width control on
   top of that, which no amount of tightening fits into 568px without cutting approved copy
   or shrinking the controls below a comfortable target size. So this tier compacts what it
   can and then scrolls, which §8 asks for in preference to clipping.
   What it still guarantees is unchanged and is asserted per viewport by
   working/gate_contrast_qa.js: nothing sideways, the field and the "Token not launched"
   heading above the fold, and everything below it reachable rather than clipped.
   Where the reclaimed space comes from still matters. This layout is bottom-anchored, so
   pixels taken above the heading push the heading down into the aurora, where r04 measured
   it at 3.96:1. Everything below is therefore tightened first, and the mark, heading and
   tagline keep their own proportions.
   The min-height floor is the other half of that. At 320 x 568 the compacted card fits the
   viewport almost exactly, which leaves bottom-anchoring nothing to work with and strands
   the heading at y=127 — inside the aurora, measured at 3.79:1 shadow-free. Measuring the
   wallpaper row by row at this width puts the bright band between roughly y=100 and y=168,
   with dark water from y=172 down. A 615px floor is what places the heading at y=174, in
   that water, at the price of about 47px of scrolling. Taller phones in this tier are past
   the floor and keep their existing bottom-anchored placement untouched. */
@media (max-width: 700px) and (max-height: 720px) {
  .gate-shell { min-height: max(100svh, 615px); padding-top: 58px; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
  .gate-mark { width: 56px; height: 56px; margin-bottom: 8px; }
  .gate-identity { margin-bottom: 14px; }
  .tagline { margin-top: 5px; }
  .instruction { margin: 5px 0 11px; }
  .access-label { margin-bottom: 4px; }
  .access-code, .access-submit { min-height: 44px; }
  .access-submit { margin-top: 8px; }
  .feedback { min-height: 18px; margin-top: 6px; }
  .gate-notice { margin-top: 12px; padding: 9px 12px; gap: 4px; }
  .gate-x-link { margin-top: 8px; min-height: 40px; }
}

@media (max-width: 350px) {
  .gate-menu strong { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }
  .gate-shell { padding-inline: 14px; }
  .gate-card { width: 100%; }
  h1 { font-size: 26px; }
}

/* Portrait tablets — wider than the mobile tier, but taller than they are wide.
   A 16:9 photograph covering a portrait box is cropped hard on both sides, which moves
   the leopard from the right of the frame to the middle of it. A vertically centred card
   then lands on its face: at 768 x 1024 the mark sat on the animal's muzzle. The crop
   cannot be shifted out of the way either — pan far enough right and the head leaves the
   frame entirely, which loses the identity the gate is meant to show.
   So the card moves instead, down into the open water and rock at the lower left, where
   nothing is behind it. Landscape tablets keep the centred left-of-frame placement, which
   already clears the animal. */
@media (min-width: 701px) and (orientation: portrait) {
  .gate-shell { align-items: end; padding-bottom: max(88px, 10vh); }
  .gate-card { margin-left: clamp(18px, 4vw, 64px); }
}

/* A landscape tablet, which is the tightest fit for the downward bias on .gate-shell.
   At 1024 x 768 the bias is what lifts the heading out of the aurora — 4.06:1 without it,
   5.56:1 with it — but 768px of height cannot hold the bias and the full-height card at
   once, and the page overflowed by 27px. The bias therefore stays and the card gives up the
   pixels, every one of them from below the tagline so the heading does not move back up.
   Nothing here changes copy, control width or the ~48px target height of the two controls. */
@media (min-width: 701px) and (min-height: 561px) and (max-height: 820px) {
  .gate-shell { padding-bottom: 46px; }
  .gate-identity { margin-bottom: 18px; }
  .instruction { margin: 6px 0 11px; }
  .feedback { min-height: 18px; }
  .gate-notice { margin-top: 13px; padding: 11px 15px; }
  .gate-x-link { margin-top: 8px; min-height: 42px; }
}

/* Short viewports: a landscape phone, or a portrait one with the keyboard open.
   Compact the identity so the field and its feedback stay above the keyboard, and anchor to
   the top so the field is reachable while it is open. */
@media (max-height: 560px) {
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(1,7,10,.34) 0%, rgba(1,7,10,.12) 58%, rgba(1,7,10,.3) 100%);
  }
  /* Drops the small-phone min-height floor. That floor exists to let bottom-anchoring put
     the heading below the aurora, and this tier is top-anchored instead, so keeping it would
     add scrolling — 195px of it at 390 x 420 — while moving nothing. */
  .gate-shell { align-items: start; min-height: 100svh; padding-top: 32px; padding-bottom: 18px; }
  .gate-mark { width: 46px; height: 46px; margin-bottom: 4px; }
  h1 { font-size: 25px; }
  .gate-identity { margin-bottom: 9px; }
  .tagline { margin-top: 4px; }
  .instruction { margin: 5px 0 9px; }
  .access-label { margin-bottom: 4px; }
  .access-code, .access-submit { min-height: 44px; }
  .access-submit { margin-top: 8px; }
  .feedback { min-height: 18px; margin-top: 6px; }
  /* Compacted, not dropped, and never hidden: the whole block is in the markup at every
     size. It does not all fit above the fold at every size, though, and the approved copy
     above it is not being cut to buy the space. What this tier guarantees instead is an
     order of priority: the access field and the "Token not launched" heading stay above the
     fold, because those are what someone arriving from a scam link needs to see, and the
     rest is one short scroll under them. working/gate_contrast_qa.js measures exactly that,
     per viewport, and fails on any tier where the contract heading drops below the fold. */
  .gate-notice { margin-top: 8px; padding: 9px 12px; gap: 3px; }
  .gate-x-link { margin-top: 8px; min-height: 40px; }
}

@media (max-height: 400px) {
  .gate-shell { padding-top: 24px; }
  .gate-mark { width: 40px; height: 40px; }
  .gate-identity { margin-bottom: 8px; }
  .instruction { margin: 4px 0 8px; }
  .feedback { min-height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}