/* yak-fish gate — shared by Dex (sign-in), oauth2-proxy (errors) and Caddy (no access).
   Served from https://auth.yak-fish.ts.net/yf/gate.css. System fonts only: an auth page
   shouldn't call third parties. */
:root {
  --bg: #f4f3ef; --card: #ffffff; --fg: #17181b; --mute: #6a6b70; --line: #e3e1da;
  --acc: #2f6f73; --acc-fg: #ffffff; --btn: #ffffff; --btn-hover: #f7f6f2; --warn: #9a3b1f;
  --shadow: 0 1px 2px #0000000d, 0 12px 32px -12px #0000002e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1113; --card: #171a1d; --fg: #eceae4; --mute: #979aa0; --line: #2a2e33;
    --acc: #7cc3c0; --acc-fg: #0f1113; --btn: #1d2125; --btn-hover: #23282d; --warn: #f0a58a;
    --shadow: 0 1px 2px #0006, 0 16px 40px -16px #000c;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid; place-items: center; padding: 24px;
  -webkit-font-smoothing: antialiased;
}
.card {
  width: min(380px, 100%); background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 32px 28px 24px; box-shadow: var(--shadow);
}
@media (prefers-reduced-motion: no-preference) {
  .card { animation: rise .28s cubic-bezier(.2, .7, .3, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; color: var(--fg); }
.brand svg { width: 28px; height: 28px; color: var(--acc); flex: none; }
.brand span { font-weight: 650; font-size: 17px; letter-spacing: -.01em; }
h1 { font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -.015em; margin: 0 0 4px; }
.lede { color: var(--mute); margin: 0 0 24px; }
.lede strong { color: var(--fg); font-weight: 600; }
.stack { display: grid; gap: 10px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 46px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--btn); color: var(--fg); font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background .12s ease, transform .06s ease, border-color .12s ease;
}
.btn:hover { background: var(--btn-hover); border-color: var(--mute); }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn.primary { background: var(--acc); border-color: var(--acc); color: var(--acc-fg); }
.btn.primary:hover { filter: brightness(1.06); background: var(--acc); }
.btn svg { width: 18px; height: 18px; flex: none; }
.foot { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line); color: var(--mute); font-size: 12.5px; text-align: center; }
.err { color: var(--warn); }
.detail { color: var(--mute); font-size: 13px; margin: -12px 0 20px; word-break: break-word; }