/* ====================================================================
   srk-editor — the gate (1509:15713). On top of editage.css (the tokens,
   .field, .btn-stroke) and srk.css (the print behind and its veil). The
   window is placed exactly where the editor's is, so logging in swaps the
   card and nothing else appears to move.
   ==================================================================== */

#gate{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px 32px 72px;   /* 16 below, plus the recent edits' 48 and 8 the editor keeps under its window */
  --win-w:min(calc(100vw - 64px), max(1136px, 80vw), 1680px)}

/* 1509:15714 — the line in the 32 above the window. */
#gate .line{position:absolute;top:0;left:0;right:0;height:32px;display:flex;align-items:center;justify-content:space-between;
  gap:var(--4);padding:var(--3) 32px;font-size:10px;line-height:1.2;letter-spacing:-.1px;
  color:rgba(217,215,210,.5);white-space:nowrap;overflow:hidden}
#gate .line .right{display:flex;gap:var(--3)}
#gate .line a,#gate .line .u{text-decoration:underline;text-decoration-color:rgba(217,215,210,.5);text-underline-offset:2px}
#gate .line a:hover{color:var(--300)}

/* The window, as srk.css sizes the editor's, empty: the wallpaper washed
   into the paper toward the top, and 1509:15723's soft inner edge. */
#gate .win{position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--win-w);height:min(calc(100vh - 104px), max(696px, 80vh), 1080px);max-height:100%;
  padding:var(--8) var(--8) 64px;border-radius:var(--r);overflow:hidden;background:var(--300);
  box-shadow:0 18px 60px rgba(20,26,30,.28)}
#gate .win::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 48px 24px var(--400)}
#gate .plate{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#gate .plate img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
  opacity:0;transition:opacity .9s ease-out}
#gate .plate img.on{opacity:1}
#gate .plate .wash{position:absolute;inset:0;background:linear-gradient(to top,rgba(217,215,210,0),var(--300))}

/* 1509:17195 — the card: what this is, the logogram, the password; 380 x 361,
   16 in, the three held apart. */
#gate .gate-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  width:380px;max-width:100%;height:361px;max-height:100%;padding:var(--5);gap:var(--5);
  border-radius:var(--r);background:var(--300);border-bottom:1px solid var(--100-15)}
#gate .says{margin:0;font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.25;letter-spacing:-.18px;
  text-align:center;color:var(--100)}
#gate .mark{width:21px;height:21px;flex:none}
#gate .password{display:flex;flex-direction:column;gap:var(--3);width:100%}
#gate .form-short{display:flex;flex-direction:column;gap:var(--1);width:100%}
#gate .label{display:flex;align-items:flex-end;gap:var(--3);line-height:1.2;letter-spacing:-.14px}
#gate .label b{font-weight:300}
#gate .label em{flex:1 1 0;min-width:0;font-style:normal;font-size:12px;letter-spacing:-.12px;color:var(--error);text-align:right}
#gate .field input{letter-spacing:-.14px}
#gate .btn-stroke{width:100%}
#gate .btn-stroke[disabled]{color:var(--100-50);cursor:default}
#gate.shake .gate-card{animation:srk-shake .32s ease-in-out}
@keyframes srk-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){#gate .plate img{transition:none}#gate.shake .gate-card{animation:none}}

/* A phone: the window takes the screen under the line. */
@media (max-width:640px){
  #gate{padding:32px 16px 16px}
  #gate .line{padding:var(--3) 16px}
  #gate .line .right > :not(:first-child){display:none}
  #gate .win{width:100%;height:100%;padding:var(--5)}
  #gate .gate-card{height:auto;gap:var(--6)}
}