/* Central WebAuthn sign-in (auth.s.permalink.fr/login.php).
   permalink.fr charter: warm paper, ink text, amber accent; IBM Plex Mono (voice) + Plex Serif
   (display). Light, modern (2026 passkey sign-in pattern), reusable as a template.
   Self-hosted fonts (auth/ is a separate docroot from www.permalink.fr). */

@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/IBMPlexMono-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/IBMPlexMono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/fonts/IBMPlexMono-500-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/fonts/IBMPlexMono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/fonts/IBMPlexMono-700-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Plex Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/fonts/IBMPlexMono-700-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Plex Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/IBMPlexSerif-600-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Plex Serif'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/fonts/IBMPlexSerif-600-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --ink:#141414; --bone:#F4EDDB; --paper:#FAF6E8;
  --amber:#C9851C; --amber-bright:#E5BB1F; --amber-ink:#8C5E10;
  --mute:#5E6470; --err:#B33A3A;
  --rule:rgba(20,20,20,0.12);
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Plex Serif','Iowan Old Style',Cambria,Georgia,serif;
}

* { box-sizing:border-box; }
html,body { margin:0; }

body {
  font-family:var(--mono);
  background:
    radial-gradient(900px 460px at 50% -8%, rgba(201,133,28,0.10), transparent 62%),
    var(--paper);
  color:var(--ink);
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:28px 24px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.card {
  position:relative;
  width:100%; max-width:430px;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:0 0 18px 18px;
  padding:38px 34px 32px;
  text-align:center;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 14px 34px rgba(20,20,20,0.07);
}
.card::before {
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--amber), var(--amber-bright));
}

.lockmark {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:rgba(229,187,31,0.16); color:var(--amber-ink);
  margin:0 0 16px;
  box-shadow:0 0 0 1px rgba(201,133,28,0.18) inset;
}
.lockmark svg { display:block; }

.brand {
  font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:0.02em;
  color:var(--mute); margin:0 0 18px;
}
.brand .dot-fr { color:var(--amber-ink); }

h1 {
  font-family:var(--serif); font-weight:600; font-size:24px; line-height:1.22;
  letter-spacing:0; margin:0 0 18px; color:var(--ink);
}

/* Destination: prominent "which site am I authenticating to". */
.dest {
  display:flex; flex-direction:column; gap:7px; text-align:left;
  width:100%; margin:0 0 24px; padding:13px 16px;
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
}
.dest-head { display:flex; align-items:center; gap:8px; }
.dest-ico { flex:0 0 auto; color:var(--amber-ink); }
.dest-label {
  font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--mute);
}
.dest-site {
  font-family:var(--mono); font-weight:600; font-size:15px; color:var(--ink);
  line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em; width:100%;
  font-family:var(--mono); font-size:13.5px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:1rem 1.4rem; cursor:pointer;
  background:var(--amber-bright); color:var(--ink);
  border:1px solid var(--amber); border-radius:11px;
  transition:background .15s ease, transform .04s ease, box-shadow .15s ease;
  box-shadow:0 6px 18px rgba(201,133,28,0.22);
}
.btn:hover { background:var(--amber); }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:3px solid rgba(201,133,28,0.45); outline-offset:2px; }
.btn:disabled { opacity:0.6; cursor:default; box-shadow:none; }
.btn .arrow { transition:transform .15s ease; }
.btn:hover .arrow { transform:translateX(3px); }

.hint { font-size:13px; line-height:1.6; color:var(--mute); margin:18px 0 0; text-align:left; }
.hint em { font-style:normal; font-weight:600; color:var(--ink); }

.status { font-size:12.5px; letter-spacing:0.01em; color:var(--mute); margin-top:14px; min-height:16px; text-align:left; }
.status.err { color:var(--err); font-weight:500; }

.note { font-size:13.5px; line-height:1.65; color:var(--ink); margin:0; text-align:left; }
.note-center { text-align:center; }
.note code {
  font-family:var(--mono); color:var(--amber-ink);
  background:rgba(229,187,31,0.16); padding:1px 6px; border-radius:4px;
}

/* Footer meta: terminal-ish fluff + legal. */
.meta {
  width:100%; max-width:430px; text-align:center;
  font-size:11px; line-height:1.7; color:var(--mute); letter-spacing:0.01em;
}
.meta .mono { font-family:var(--mono); }
.meta .meta-line + .meta-line { opacity:0.85; }