/* ============================================================
   ARQUETIPO — sign-in surface (prod-login, Mike 1 Oct)
   One stylesheet for the two doors into the house:
     - the portal's /login            (src/pages/login.astro, served at /auth/signin.css)
     - Forgejo's /user/login          (infra/forgejo-custom/templates/user/auth/signin.tmpl,
                                       copied by infra/migrate/apply-forgejo-skin.sh to
                                       Forgejo's custom/public/assets/arquetipo/signin.css)
   This file is the single source; the Forgejo copy is made from it, never edited there.
   Tokens are the portal's own (src/styles/portal.css, foundations v2): Geist for display,
   Inter for text, Geist Mono for labels; slate/serene with oro as the signature; depth as
   glass and hairline, never shadow. Self-contained on purpose: Forgejo's page loads nothing
   else of the portal.
   ============================================================ */
.arq-signin{
  --font-display:"Geist",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --canvas:#F7F8F9; --surface:#FFFFFF; --ink-1:#1A1A1A; --ink-2:#4E565C; --ink-3:#646E75;
  --hairline:#E3E8EC; --hairline-strong:#CBD5DC; --accent:#34414A; --signature:#B5803A;
  --focus:#8DA3B3; --glass:rgba(255,255,255,.78); --glass-line:rgba(203,213,220,.8);
  --grid-line:rgba(52,65,74,.07);
  --field:radial-gradient(120% 80% at 80% -10%,rgba(168,187,201,.26),transparent 60%);
  --g-bg:#FFFFFF; --g-ink:#1F1F1F; --g-line:#747775; --g-hover:rgba(52,65,74,.06);
  --block:#9A4A3C; --block-bg:rgba(154,74,60,.08);
}
@media (prefers-color-scheme: dark){
  .arq-signin:not([data-theme="light"]){
    --canvas:#14181C; --surface:#1A2026; --ink-1:#F2F5F7; --ink-2:#B4C0C8; --ink-3:#909EA8;
    --hairline:rgba(168,187,201,.16); --hairline-strong:rgba(168,187,201,.30);
    --accent:#A8BBC9; --signature:#D19E56; --focus:#A8BBC9;
    --glass:rgba(26,32,38,.72); --glass-line:rgba(168,187,201,.18);
    --grid-line:rgba(168,187,201,.07);
    --field:radial-gradient(120% 80% at 80% -10%,rgba(168,187,201,.16),transparent 60%);
    --g-bg:#131314; --g-ink:#E3E3E3; --g-line:#8E918F; --g-hover:rgba(168,187,201,.08);
    --block:#DC9788; --block-bg:rgba(220,151,136,.12);
  }
}
.arq-signin[data-theme="dark"]{
  --canvas:#14181C; --surface:#1A2026; --ink-1:#F2F5F7; --ink-2:#B4C0C8; --ink-3:#909EA8;
  --hairline:rgba(168,187,201,.16); --hairline-strong:rgba(168,187,201,.30);
  --accent:#A8BBC9; --signature:#D19E56; --focus:#A8BBC9;
  --glass:rgba(26,32,38,.72); --glass-line:rgba(168,187,201,.18);
  --grid-line:rgba(168,187,201,.07);
  --field:radial-gradient(120% 80% at 80% -10%,rgba(168,187,201,.16),transparent 60%);
  --g-bg:#131314; --g-ink:#E3E3E3; --g-line:#8E918F; --g-hover:rgba(168,187,201,.08);
  --block:#DC9788; --block-bg:rgba(220,151,136,.12);
}

.arq-signin, .arq-signin *{box-sizing:border-box;}
html.arq-signin{min-height:100%;}
.arq-signin body, body.arq-signin{
  margin:0; min-height:100vh;
  background-color:var(--canvas);
  background-image:
    var(--field),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:auto, 48px 48px, 48px 48px;
  background-position:0 0, -1px -1px, -1px -1px;
  color:var(--ink-1);
  font-family:var(--font-body); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}

.arq-signin__frame{
  min-height:100vh; display:grid; grid-template-rows:auto 1fr auto;
  padding:28px clamp(20px,4vw,48px);
}
.arq-signin__mark{
  font-family:var(--font-display); font-weight:500; font-size:15px; letter-spacing:-.01em;
  color:var(--ink-1); text-decoration:none; display:inline-flex; align-items:center;
}
.arq-signin__mark i{
  display:inline-block; width:6px; height:6px; background:var(--signature); margin-right:10px;
}
.arq-signin__center{display:grid; place-items:center; padding:48px 0;}

.arq-signin__card{
  width:min(420px, 100%);
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--glass-line); border-radius:3px;
  padding:36px 34px 30px;
  animation:arq-rise .72s var(--ease) both;
}
/* Movement only, never opacity: the card is legible from the first frame (and in a
   screenshot or a slow machine's first paint), it just settles into place. */
@keyframes arq-rise{from{transform:translateY(8px);} to{transform:none;}}
@media (prefers-reduced-motion: reduce){ .arq-signin__card{animation:none;} }

.arq-signin__eyebrow{
  margin:0 0 18px; font-family:var(--font-mono); font-size:11px; line-height:1.3;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:10px;
}
.arq-signin__eyebrow::before{content:""; width:18px; height:1px; background:var(--signature);}
.arq-signin__title{
  margin:0 0 10px; font-family:var(--font-display); font-weight:500;
  font-size:30px; line-height:1.12; letter-spacing:-.022em; color:var(--ink-1);
}
.arq-signin__lede{margin:0 0 28px; color:var(--ink-2); font-size:14.5px; line-height:1.55;}

.arq-signin__problem{
  margin:0 0 20px; padding:10px 12px; border-left:2px solid var(--block);
  background:var(--block-bg); color:var(--block); font-size:13px; line-height:1.45;
}
.arq-signin__problem p{margin:0;}

/* The one action. Google's own button proportions (40px, 4px radius, the four-colour G,
   "Continue with Google"), filled to the card's width. */
.arq-signin__google{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; height:44px; padding:0 16px;
  background:var(--g-bg); color:var(--g-ink); border:1px solid var(--g-line); border-radius:4px;
  font-family:var(--font-body); font-weight:500; font-size:14.5px; letter-spacing:.01em;
  text-decoration:none; cursor:pointer;
  transition:background-color .16s var(--ease), border-color .16s var(--ease);
}
.arq-signin__google:hover{background-image:linear-gradient(var(--g-hover),var(--g-hover)); border-color:var(--ink-3);}
.arq-signin__google:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
.arq-signin__google svg{width:18px; height:18px; flex:none;}
.arq-signin__google[aria-busy="true"]{opacity:.7; pointer-events:none;}

.arq-signin__status{
  min-height:18px; margin:14px 0 0; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); text-align:center;
}
.arq-signin__status:empty{display:none;}
.arq-signin__fine{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--hairline);
  color:var(--ink-3); font-size:12.5px; line-height:1.5;
}
.arq-signin__unconfigured{margin:0; color:var(--ink-3); font-size:13px;}

.arq-signin__foot{
  display:flex; flex-wrap:wrap; gap:6px 22px; justify-content:space-between;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.arq-signin__foot a{color:inherit; text-decoration:none;}
.arq-signin__foot a:hover{color:var(--ink-1);}

@media (max-width:480px){
  .arq-signin__card{padding:28px 22px 24px;}
  .arq-signin__title{font-size:26px;}
}