/* ============================================================
   WaveKey — Spatial Glass + Marquee type
   Load this AFTER the inline <style> in index.html (i.e. just before
   </head>) so these rules win on equal specificity — no !important needed.
   Pairs with wavekey-fonts.css (@font-face + tokens) and wavekey-spatial.js.
   ============================================================ */

:root{
  --glass:rgba(255,255,255,.05);
  --glass-brd:rgba(255,255,255,.07);
  --wk-pink:#e8186d;
  --wk-glow-1:#e8186d;  /* themeable ambient glows (retinted by wavekey-theme.js) */
  --wk-glow-2:#b01253;
  --wk-glow-3:#5A1E7A;
}

/* ---------------- Type: Marquee ----------------------------- */
/* Display -> Cabinet Grotesk (name / titles / buttons / big numbers).
   NOTE: Cabinet Grotesk has NO 600 weight — titles use 500, name/buttons 700,
   big stat numbers 900. */
.profile-name,.login-heading,.share-card-title,.write-title,.sub-title,
.nfc-title,.success-title,.ac-title,.tags-empty-title,.dash-logo,
.profile-avatar-initials{ font-family:var(--disp); font-weight:700; }

.swc-title,.tag-card-name,.bc-name{ font-family:var(--disp); font-weight:500; }

.hero-number,.estimate-stat-value,.bc-taps,.settings-header,.conv-rate{
  font-family:var(--disp); font-weight:900;
}
.detail-value,.writing-info-type{ font-family:var(--disp); font-weight:700; }
.btn-primary,.btn-ghost,.swc-btn-write{ font-family:var(--disp); font-weight:700; }

/* Interface -> General Sans (body, labels, tracked caps) */
html,body{ font-family:var(--ui); }
.card-title,.section-title,.write-section-title{ font-family:var(--ui); font-weight:700; }
.period-btn,.form-input{ font-family:var(--ui); }

/* Data -> IBM Plex Mono (phone / email / URLs / tap counts) */
.swc-value,.profile-meta,.tag-card-dest{ font-family:var(--mono); font-weight:400; }
.tag-card-taps{ font-family:var(--mono); font-weight:700; }

/* ---------------- Ambient glow layer ------------------------ */
/* Sits behind the tab content; the glow layer (not #app) clips the blur so
   #app can still show its fixed sub-screen overlays. */
#app{ --lx:30%; --ly:12%; }
.wk-glow-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.tab-screen,.bottom-nav{ position:relative; z-index:1; }
.wk-glow{ position:absolute; border-radius:50%; will-change:transform; }
.wk-glow.g1{ width:340px; height:340px; background:var(--wk-glow-1); top:-70px;  left:-40px;  opacity:.22; filter:blur(70px); }
.wk-glow.g2{ width:280px; height:280px; background:var(--wk-glow-2); top:220px;  right:-90px; opacity:.18; filter:blur(70px); }
.wk-glow.g3{ width:320px; height:320px; background:var(--wk-glow-3); bottom:120px;left:-70px;  opacity:.12; filter:blur(70px); }

/* ---------------- Glass primitive --------------------------- */
.glass{
  position:relative;
  background:var(--glass);
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--glass-brd);
  box-shadow:0 12px 38px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.glass > *{ position:relative; z-index:2; }
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:1;
  background:radial-gradient(240px 180px at var(--lx) var(--ly), rgba(255,255,255,.12), transparent 60%);
}
/* moving specular rim (light-tracking) */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:3; padding:1.5px;
  background:
    radial-gradient(150px 150px at var(--lx) var(--ly), rgba(255,255,255,.9), rgba(255,255,255,.26) 34%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,0) 46%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}
/* PERF: list cards get a cheaper, STATIC rim + lighter blur.
   Only the profile (hero) card keeps the moving rim above. */
.glass.flat{ backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px) saturate(130%); }
.glass.flat::before{ background:radial-gradient(220px 160px at 32% -10%, rgba(255,255,255,.08), transparent 62%); }
.glass.flat::after{
  background:
    radial-gradient(140px 140px at var(--lx) var(--ly), rgba(255,255,255,.85), rgba(255,255,255,.22) 36%, rgba(255,255,255,0) 62%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 46%);
}

/* Rim helper (avatar + icon tiles) */
.rim{ position:relative; }
.rim::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4; padding:1.5px;
  background:radial-gradient(90px 90px at var(--lx) var(--ly), rgba(255,255,255,.85), rgba(255,255,255,.2) 36%, rgba(255,255,255,0) 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
}

/* ---------------- Component fit-ups ------------------------- */
/* higher specificity than the plain component rules, so these win regardless */
#profile-card.glass{ background:var(--glass); border-radius:20px; }
/* .rim sets position:relative which would clobber the avatar's absolute
   placement (both single-class) — re-assert it here (higher specificity). */
.profile-avatar-wrap.rim{ position:absolute; }
/* The masked ::after ring can fail to composite on the avatar in some WebViews
   and cover the photo. Neutralise the rim's overlay on the avatar only —
   the icon tiles keep theirs. Avatar keeps a soft static edge instead. */
.profile-avatar-wrap.rim::after{
  background:none;
  -webkit-mask:none; mask:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);
}
.smart-write-card.glass{ background:var(--glass); border-radius:16px; }
.swc-icon.rim{ border-radius:12px; }

/* Bottom nav: frosted, still docked (no rounded corners at the screen edge) */
.bottom-nav{
  background:#141416;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border-top:1px solid var(--glass-brd);
}

/* ---------------- Reduced motion ---------------------------- */
@media (prefers-reduced-motion:reduce){
  #app{ --lx:30% !important; --ly:10% !important; }
}

/* Fix: .estimate-card has its own ::after glow that collides with the glass rim.
   When it's a glass card, suppress the card's own ::after so the rim renders. */
.estimate-card.glass::after,
.estimate-card.glass.flat::after{
  /* restore the glass rim geometry (full container), not the card's corner blob */
  content:""; position:absolute; inset:0; bottom:auto; left:auto; top:auto; right:auto;
  width:auto; height:auto; border-radius:inherit; filter:none; background:
    radial-gradient(140px 140px at 30% -14%, rgba(255,255,255,.85), rgba(255,255,255,.22) 36%, rgba(255,255,255,0) 62%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 46%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  padding:1.5px; pointer-events:none;
}