/* The gate and the plain pages around a share link (expired, not found). One
   card on the theme's ground. The gate names what it opens and who sent it,
   on an inverse head like the title cards, and nothing inside. Reads only
   --deck-* tokens, like deck.css, so the page follows whichever theme is
   linked before it. */
*{box-sizing:border-box}
html,body{margin:0}
body.gate{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:var(--deck-ground); color:var(--deck-text);
  font-family:var(--deck-font-sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.gate-card{
  width:min(420px,100%); background:var(--deck-sheet); border-radius:var(--deck-radius);
  box-shadow:var(--deck-sheet-shadow); padding:32px; display:flex; flex-direction:column; gap:14px;
}
.gate-card h1{font-family:var(--deck-font-display); font-weight:var(--deck-display-bold); font-size:24px; letter-spacing:calc(-0.02em * var(--deck-display-tracking)); line-height:1.15; margin:0}
.gate-head{
  margin:-32px -32px 6px; padding:28px 32px 22px; border-radius:var(--deck-radius) var(--deck-radius) 0 0;
  background:var(--deck-inverse-sheet); color:var(--deck-inverse-text); display:flex; flex-direction:column; gap:8px;
}
.gate-head h1{font-weight:var(--deck-display-heavy); font-size:28px; letter-spacing:calc(-0.04em * var(--deck-display-tracking)); line-height:1.05; overflow-wrap:anywhere}
.gate-card .gate-kicker{font-family:var(--deck-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--deck-inverse-link)}
.gate-card .gate-by{display:flex; align-items:center; gap:8px; margin-top:8px; padding-top:12px; border-top:1px solid color-mix(in srgb, var(--deck-inverse-text) 12%, transparent);
  font-size:13px; color:color-mix(in srgb, var(--deck-inverse-text) 72%, transparent)}
.gate-by b{color:var(--deck-inverse-text); font-weight:600}
.gate-mark{width:18px; height:15px; flex:none; color:color-mix(in srgb, var(--deck-inverse-text) 72%, transparent)}
.gate-card p{margin:0; color:var(--deck-text-muted)}
.gate-card form{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.gate-field{display:flex; flex-direction:column; gap:6px}
.gate-field span{font-family:var(--deck-font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--deck-text-muted)}
.gate-field input{
  height:42px; padding:0 12px; font:inherit; color:var(--deck-text);
  border:1px solid var(--deck-sheet-border); border-radius:var(--deck-radius-sm); background:var(--deck-sheet);
}
.gate-field input:focus{outline:none; border-color:var(--deck-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--deck-primary) 22%, transparent)}
.gate-error{color:var(--deck-danger-fg) !important; font-size:14px}
.gate-button{
  height:42px; border:0; border-radius:var(--deck-radius-sm); cursor:pointer;
  background:var(--deck-text); color:var(--deck-sheet); font:600 15px var(--deck-font-sans);
}
.gate-button:hover{background:color-mix(in srgb, var(--deck-text) 88%, var(--deck-sheet))}
/* Under the code field: ask for a new code, or start again with another
   address. Quiet text buttons, one line. */
.gate-card form.gate-again{flex-direction:row; flex-wrap:wrap; align-items:center; gap:16px; margin-top:0}
.gate-link{
  padding:0; border:0; background:none; cursor:pointer; font:inherit; font-size:14px;
  color:var(--deck-text-muted); text-decoration:underline; text-underline-offset:3px;
}
.gate-link:hover{color:var(--deck-text)}