/* =====================================================================
   portal.css — shared UI components for the client portal
   (login.html + onboarding.html).

   Sits on top of space-bg.css. Mirrors the portfolio site's buttons,
   glass cards, and liquid-glass form fields so the portal looks and
   feels like one continuous product.
   ===================================================================== */

/* Body type: Abril Fatface is used for display headings (.disp); the
   body/UI uses Space Grotesk — both are already loaded by the portfolio. */
body{font-family:'Space Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}

/* ---- Fixed brand bar (same logo + size as the portfolio nav) ---- */
.portal-nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:.4rem 2rem .4rem 1rem;display:flex;align-items:center;justify-content:space-between}
.portal-logo{display:block;line-height:0}
.portal-logo img{height:70px;width:auto;display:block;filter:brightness(1.12);transition:filter .35s}
.portal-logo:hover img{filter:brightness(1.3)}
.portal-nav .nav-back{color:var(--tm);text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.02em;transition:color .3s}
.portal-nav .nav-back:hover{color:var(--t)}

/* ---- Headings / accents ---- */
/* Display headings use a single consistent accent blue (the hero "s" colour);
   the old white+gradient split treatment was removed for a cohesive look. */
.disp{font-family:'Abril Fatface',serif;font-weight:400;letter-spacing:-.5px;line-height:1.12;color:var(--s)}
.grad{color:var(--s);-webkit-text-fill-color:var(--s);background:none}
.sec-lbl{font-size:.7rem;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--p)}

/* ---- Glass card (portfolio card vocabulary) ---- */
.glass-card{background:rgba(255,255,255,.025);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(255,255,255,.05),0 16px 44px rgba(0,0,0,.5);border-radius:12px}

/* ---- Buttons (ported verbatim from the portfolio) ---- */
.btn{padding:1rem 2.4rem;border-radius:8px;font-size:.95rem;font-weight:600;letter-spacing:.02em;text-decoration:none;display:inline-block;text-align:center;cursor:pointer;transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s,background .25s,border-color .25s;border:none;font-family:inherit}
.btn-p{background:linear-gradient(135deg,rgba(108,99,255,.28),rgba(0,212,255,.18));color:#fff;position:relative;overflow:hidden;backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(140,120,255,.38)!important;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 6px 24px rgba(108,99,255,.22)}
.btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.10),transparent);opacity:0;transition:opacity .3s;pointer-events:none}
.btn-p:hover{transform:translateY(-3px);background:linear-gradient(135deg,rgba(108,99,255,.44),rgba(0,212,255,.28));border-color:rgba(160,140,255,.58)!important;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 16px 45px rgba(108,99,255,.42)}
.btn-p:hover::after{opacity:1}
.btn-s{background:rgba(255,255,255,.04);color:var(--t);border:1px solid var(--gb);backdrop-filter:blur(12px)}
.btn-s:hover{border-color:rgba(108,99,255,.5);color:var(--p);background:rgba(108,99,255,.08);transform:translateY(-3px)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ---- Liquid-glass form fields (ported .fi from the contact form) ---- */
.lbl{display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tm);margin-bottom:.5rem}
.lbl .req{color:var(--a);margin-left:.15rem}
.fi{padding:1rem 1.3rem;background:rgba(108,99,255,.08);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 4px 16px rgba(0,0,0,.18);border-radius:8px;color:var(--t);font-size:.9rem;font-family:inherit;transition:border-color .3s,box-shadow .3s,background .3s;outline:none;width:100%;letter-spacing:.01em}
.fi::placeholder{color:rgba(180,170,220,.5)}
.fi:focus{border-color:rgba(140,120,255,.55);box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 0 0 3px rgba(108,99,255,.14);background:rgba(108,99,255,.14)}
textarea.fi{resize:vertical;min-height:120px;line-height:1.55}
/* Invalid required fields (set by JS validation). */
.fi.invalid{border-color:rgba(255,101,132,.7);box-shadow:0 0 0 3px rgba(255,101,132,.14)}

/* ---- Status message ---- */
.msg{font-size:.9rem;text-align:center;display:none}
.msg.show{display:block}
.msg.error{color:var(--a)}
.msg.ok{color:var(--s)}