/* =========================================================
   COMPONENTS — reusable pieces: buttons, cards, tags, fields.

   Restraint is the rule: one accent voice, glass used sparingly,
   glow as light rather than ornament.
========================================================= */

/* ---------- surface / card ----------
   The default card is a solid elevated surface, not glass. Glass is
   opt-in via .glass so it stays a highlight rather than the norm. */
.surface{
  position:relative;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  transition:border-color var(--dur) var(--ease-out),
             background var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
.surface:hover{
  background:var(--c-surface-hi);
  border-color:var(--c-border-strong);
}

.glass{
  position:relative;
  background:color-mix(in srgb, var(--c-surface) 60%, transparent);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  box-shadow:var(--shadow-lg);
  transition:border-color var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
/* hairline of light along the top edge */
.glass::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.glass:hover{ border-color:var(--c-border-strong); }

/* cursor-tracked glow, opt-in via .glow-hover.
   js/modules/ui.js writes --mx/--my; without JS this is simply inert. */
.glow-hover{ position:relative; overflow:hidden; }
.glow-hover::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
                             var(--c-accent-soft), transparent 65%);
  transition:opacity var(--dur) var(--ease-out);
}
.glow-hover:hover::after{ opacity:1; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-6);
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  font-size:var(--fs-sm);
  font-weight:500;
  letter-spacing:-0.01em;
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  /* transform is listed here so the magnetic follow in ui.js is smoothed
     by CSS rather than fought by it — see initMagnetic() */
  transition:background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn--primary{
  background:var(--c-accent);
  color:var(--c-on-accent);
  font-weight:600;
  box-shadow:0 0 0 rgba(79,140,255,0);
}
.btn--primary:hover{
  background:var(--c-accent-hover);
  box-shadow:var(--glow-accent);
}
.btn--ghost{
  border-color:var(--c-border-strong);
  color:var(--c-text);
  background:transparent;
}
.btn--ghost:hover{
  border-color:var(--c-accent);
  background:var(--c-accent-soft);
  box-shadow:0 0 30px rgba(79,140,255,.18);
}
.btn--block{ width:100%; }

/* ---------- tags ---------- */
.tag-list{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-2);
}
.tag-list li{
  padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--c-border);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--c-text-faint);
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.tag-list li:hover{
  color:var(--c-text-muted);
  border-color:var(--c-border-strong);
}

/* ---------- bullets ---------- */
.bullets{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.bullets li{
  position:relative;
  padding-left:var(--sp-5);
  color:var(--c-text-muted);
  font-size:var(--fs-sm);
}
.bullets li::before{
  content:"";
  position:absolute;
  left:0; top:.72em;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--c-accent);
  box-shadow:0 0 10px var(--c-accent-glow);
}

/* ---------- stats ---------- */
.stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-8);
}
.stat__value{
  font-family:var(--font-display);
  font-size:var(--fs-xl);
  font-weight:600;
  letter-spacing:var(--tracking-tight);
  line-height:1;
}
.stat__label{
  margin-top:var(--sp-2);
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  color:var(--c-text-faint);
}

/* ---------- facts ---------- */
.facts__row{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--c-border);
  font-size:var(--fs-sm);
}
.facts__row:last-child{ border-bottom:0; }
.facts dt{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--c-text-faint);
}
.facts dd{ text-align:right; color:var(--c-text-muted); }

/* ---------- portrait ---------- */
/* box-shadow, not a pseudo-element: overflow:hidden clips descendants
   but not the element's own shadow, so the halo reaches past the frame. */
.portrait{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(circle at 38% 28%, rgba(79,140,255,.16), transparent 62%),
    var(--c-surface);
  box-shadow:0 0 80px rgba(79,140,255,.16);
}
.portrait img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.portrait__fallback{
  font-family:var(--font-display);
  font-size:var(--fs-2xl);
  font-weight:500;
  color:var(--c-text-faint);
  letter-spacing:.04em;
}

/* ---------- form ---------- */
.field{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.field label{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--c-text-faint);
}
.field input,
.field textarea{
  padding:var(--sp-4);
  background:var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--radius-sm);
  color:var(--c-text);
  resize:vertical;
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--c-accent);
  box-shadow:0 0 0 3px var(--c-accent-soft);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:var(--c-danger); }

.form-status{
  min-height:1.4em;
  font-size:var(--fs-sm);
  color:var(--c-text-muted);
}
.form-status[data-state="error"]{ color:var(--c-danger); }
.form-status[data-state="ok"]{ color:var(--c-success); }

/* ---------- quote ---------- */
.quote{ padding:var(--sp-6); }
.quote blockquote p{
  font-size:var(--fs-md);
  color:var(--c-text-muted);
  letter-spacing:-0.01em;
}
.quote__by{
  display:flex;
  flex-direction:column;
  gap:var(--sp-1);
  margin-top:var(--sp-5);
  font-size:var(--fs-sm);
}
.quote__name{ font-weight:600; }
.quote__role{ color:var(--c-text-faint); }

/* ---------- the cat ---------- */
.cat{ width:100%; max-width:190px; margin-inline:auto; overflow:visible; }
.cat__shape{
  fill:color-mix(in srgb, var(--c-accent) 12%, transparent);
  stroke:var(--c-accent);
  stroke-width:1.6;
  stroke-linejoin:round;
}
.cat__stroke{
  fill:none;
  stroke:var(--c-accent);
  stroke-width:10;
  stroke-linecap:round;
}
.cat__sclera{ fill:var(--c-bg); stroke:var(--c-accent); stroke-width:1.4; }
.cat__pupil{ fill:var(--c-cyan); transition:transform var(--dur-fast) ease-out; }
.cat__nose{ fill:var(--c-cyan); }
.cat__whiskers line{
  stroke:var(--c-accent);
  stroke-width:1.3;
  opacity:.45;
  stroke-linecap:round;
}

/* ---------- placeholder marker ----------
   Makes unfinished content obvious while building. Deleted once real
   content lands. */
[data-placeholder]{
  opacity:.5;
  outline:1px dashed var(--c-border-strong);
  outline-offset:6px;
}