/* ciphera-link — the Connect Discord page.
   Facet tokens inlined (dark ground, 0px radius, Geist, brand orange). Matches
   the ciphera-id public login layout: 2fr/3fr grid, inset branding card with a
   faded grid pattern, 448px card in the form panel. Single-theme by design:
   the Ciphera auth surfaces are dark-only, so this commits to dark and paints
   every color explicitly. */
:root{
  --bg:#0a0a0a; --surface:#0f0f0f; --line:#1c1c1c; --line-strong:#242424;
  --fg:#f4f4f4; --muted:#8a8a8a; --muted-strong:#5f5f5f; --n400:#a3a3a3; --n600:#525252;
  --brand:#FD5E0F; --brand-btn:#CC4C0C; --brand-btn-hover:#B93F00;
  --pos:#3ECF8E; --neg:#F8836B;
  --sans:"Geist",system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;
     line-height:1.5;-webkit-font-smoothing:antialiased}

.layout{display:grid;grid-template-columns:1fr;min-height:100dvh}
@media (min-width:1024px){.layout{grid-template-columns:2fr 3fr;height:100vh;overflow:hidden}}

/* branding panel */
.brand{display:none;position:relative;margin:12px;border:1px solid var(--line);
       background:var(--surface);padding:40px;overflow:hidden;
       flex-direction:column;justify-content:space-between}
@media (min-width:1024px){.brand{display:flex}}
.gridpat{position:absolute;inset:0;overflow:hidden;
         -webkit-mask-image:linear-gradient(to bottom,#fff,transparent);
         mask-image:linear-gradient(to bottom,#fff,transparent)}
.gridpat svg{position:absolute;left:0;right:0;top:-80px;height:110%;
         -webkit-mask-image:radial-gradient(circle,#fff 0%,transparent 85%);
         mask-image:radial-gradient(circle,#fff 0%,transparent 85%)}
.brandmark{position:relative;z-index:1;display:flex;align-items:center;gap:10px;
           font-size:18px;font-weight:700;letter-spacing:-.02em;color:#fff;text-decoration:none;width:fit-content}
.brandhead{position:relative;z-index:1;max-width:430px}
.brandhead h1{font-size:44px;line-height:1.1;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
.brandhead h1 .w{color:#fff}.brandhead h1 .o{color:var(--brand)}
.brandhead p{margin-top:24px;max-width:24rem;font-size:16px;line-height:1.6;color:var(--n400)}
.brandfoot{position:relative;z-index:1;font-size:12px;color:var(--n600)}

/* The real Ciphera ID mark, served from the CDN — the same asset id-frontend's
   public layout uses (lib/cdn.ts → /id/id_icon_no_margins.png). Height is auto
   because the source is 2375×2308, very slightly wider than tall: forcing a
   square would squash it by ~3%. */
.brandmark img{height:auto;flex:none;display:block}
.pair .tile img{height:auto;display:block}

/* form panel */
.panel{display:flex;flex-direction:column;align-items:center;justify-content:center;
       padding:40px 24px;background:var(--bg)}
@media (min-width:1024px){.panel{padding:56px}}
.brandmark.mobile{margin-bottom:28px}
@media (min-width:1024px){.brandmark.mobile{display:none}}

.card{width:100%;max-width:448px;border:1px solid var(--line);background:var(--surface);
      padding:32px;display:flex;flex-direction:column;gap:18px;
      animation:slideup 200ms cubic-bezier(0.32,0.72,0,1)}
@keyframes slideup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.card{animation:none}}

/* Ciphera <-> Discord pairing: centered, short connector */
.pair{display:flex;align-items:center;gap:14px;width:100%;justify-content:center}
.pair .tile{width:44px;height:44px;border:1px solid var(--line-strong);background:var(--bg);
            display:flex;align-items:center;justify-content:center;flex:none}
.pair .seg{flex:0 0 72px;height:0;border-top:2px dotted var(--muted-strong)}
.pair .seg.ok{border-color:var(--pos)}
.pair .seg.err{border-color:var(--neg)}

.card h2{font-size:24px;line-height:1.2;letter-spacing:-.01em;font-weight:600;text-wrap:balance}
.desc{color:var(--muted)}
.desc b{color:var(--fg);font-weight:500}
.cap{font-size:12px;line-height:1.4;color:var(--muted-strong)}

.statusline{display:flex;gap:8px;align-items:center;font-size:11px;line-height:1;
            letter-spacing:.08em;text-transform:uppercase}
.statusline.ok{color:var(--pos)}.statusline.err{color:var(--neg)}
.dot{width:7px;height:7px;border-radius:9999px;display:inline-block;flex:none;position:relative;top:-1px}
.dot.pos{background:var(--pos)}.dot.neg{background:var(--neg)}

.facts{list-style:none;display:flex;flex-direction:column;gap:10px;
       border:1px solid var(--line);padding:16px 18px}
.facts li{display:flex;gap:10px;align-items:baseline;color:var(--muted);font-size:13px}

form{margin:0}
/* .btn is worn by both <button> (form submits) and <a> (the return-to-Discord
   deep link), so it resets link decoration too. */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;width:100%;
     background:var(--brand-btn);color:var(--fg);font-weight:500;font-size:14px;
     border:0;font-family:var(--sans);cursor:pointer;transition:background 150ms ease;
     text-decoration:none}
.btn:hover{background:var(--brand-btn-hover)}
.btn.narrow{width:auto;align-self:flex-start;padding:0 22px}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;
     background:transparent;color:var(--fg);font-weight:500;font-size:13px;
     border:1px solid var(--line-strong);cursor:pointer;font-family:var(--sans);align-self:flex-start;
     transition:border-color 150ms ease}
.btn-ghost:hover{border-color:var(--muted-strong)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}