/* ═══════════════════════════════════════════════════════════════════════════
   BuYüm — Components  [SHARED]
   ───────────────────────────────────────────────────────────────────────────
   Recurring building blocks shared across pages — the canonical definition for
   each, so a restyle is one edit. Contents: buttons, fields (input/select),
   pills + .plan-tag, the login card (+ global fadeUp keyframes), and the
   glass-card base (+ shared top-line and the .lic-empty empty-state).

   LOAD ORDER: tokens.css → components.css → shared.css → page <style>.
   DIVISION OF LABOR:
     tokens     = values (colors, fonts, radius/shadow/spacing/type scales)
     components = recurring building blocks (this file)
     shared     = site chrome (header, footer, modals, widgets)

   All values resolve from tokens.css. Page-local extensions (e.g. account's
   .btn.is-sent label-swap, its .login-error.with-action variant, and each
   card's own padding/layout/margins) stay in that page's <style> and extend
   the canonical components defined here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-8);
  border: none;
  border-radius: var(--radius-btn);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.18s, transform 0.14s, opacity 0.2s;
  white-space: nowrap;
  line-height: 1;
  text-decoration: none;
}
.btn:hover:not(:disabled) { filter: brightness(1.18); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; }

.btn-primary { background: var(--accent-blue); color: var(--bg-deep); }
.btn-green   { background: rgba(var(--accent-green-rgb), 0.13); color: var(--accent-green); border: 1px solid rgba(var(--accent-green-rgb), 0.28); }
.btn-red     { background: rgba(var(--accent-red-rgb), 0.12);   color: var(--accent-red);   border: 1px solid rgba(var(--accent-red-rgb), 0.28); }
.btn-ghost   { background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid var(--glass-border); }

.btn-sm   { padding: var(--space-2) var(--space-5); font-size: var(--text-2xs); border-radius: var(--radius-btn-sm); }
.btn-lg   { padding: var(--space-6) var(--space-11); font-size: var(--text-sm); border-radius: var(--radius-btn-lg); }
.btn-full { width: 100%; }

/* ── Sale button (silver) ──
   Canonical "silver / sales" CTA — the premium marketing button used by the
   studiostream hero ("Get Studio Stream"), the pricing-card Buy/Subscribe
   buttons, and the hidden notify button. It is a display-font silver family
   that shares almost nothing with the mono .btn above (font, size, weight,
   casing, radius, fixed height, hover intensity all differ), so it stands as
   its own class rather than a .btn modifier. Flat — no inner top-highlight
   gloss; the soft OUTER silver glow is the identity. Silver from the shared
   --accent-silver token; glow alphas via --accent-silver-rgb. Layout (full-
   width, bottom-align) and the green "best value" variant are page/pricing
   modifiers that extend this. */
.btn-sale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  height: 46px;
  padding: 0 var(--space-10);
  background: var(--accent-silver);
  color: var(--bg-deep);
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: var(--shadow-sale);
}
.btn-sale:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sale-hover);
}

/* ── Fields ── */
/* Canonical input/select field family (admin's select-inclusive superset). The
   select / option rules are inert on pages without a <select> in .field. */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.field input,
.field select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-input);
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--text-primary);
  outline: none;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input::placeholder { color: var(--text-dim); }
.field input:focus,
.field select:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-focus);
}
.field select option { background: var(--bg-surface); color: var(--text-primary); }

/* ── Pills ── */
/* Canonical status-pill family (admin's superset). The admin-only variants are
   inert on pages that don't use them. Green/red/amber tints route through the
   --accent-*-rgb channels; the neutral/anonymized white tint stays raw (not a
   status colour). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px var(--space-4);
  border-radius: var(--radius-4xl);
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Status variants (account + admin) */
.pill.active    { color: var(--accent-green);  background: rgba(var(--accent-green-rgb), 0.1);  border: 1px solid rgba(var(--accent-green-rgb), 0.22); }
.pill.active::before    { background: var(--accent-green); }
.pill.revoked   { color: var(--accent-red);    background: rgba(var(--accent-red-rgb), 0.1);    border: 1px solid rgba(var(--accent-red-rgb), 0.22); }
.pill.revoked::before   { background: var(--accent-red); }
.pill.suspended { color: var(--accent-amber);  background: rgba(var(--accent-amber-rgb), 0.1);  border: 1px solid rgba(var(--accent-amber-rgb), 0.22); }
.pill.suspended::before { background: var(--accent-amber); }
.pill.neutral   { color: var(--text-dim);      background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); }
.pill.neutral::before   { background: var(--text-dim); }

/* Admin-only variants (inert on account — no element uses them) */
.pill.verified   { color: var(--accent-green); background: rgba(var(--accent-green-rgb), 0.1);  border: 1px solid rgba(var(--accent-green-rgb), 0.22); }
.pill.verified::before   { background: var(--accent-green); }
.pill.unverified { color: var(--accent-amber); background: rgba(var(--accent-amber-rgb), 0.1);  border: 1px solid rgba(var(--accent-amber-rgb), 0.22); }
.pill.unverified::before { background: var(--accent-amber); }
.pill.anonymized { color: var(--text-dim);    background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); }
.pill.anonymized::before { background: var(--text-dim); }
.pill.req-export   { color: var(--accent-blue);  background: var(--accent-blue-glow); border: 1px solid var(--accent-blue); }
.pill.req-export::before   { background: var(--accent-blue); }
.pill.req-deletion { color: var(--accent-red);   background: rgba(var(--accent-red-rgb), 0.1);    border: 1px solid rgba(var(--accent-red-rgb), 0.22); }
.pill.req-deletion::before { background: var(--accent-red); }

/* Plan-type label (Monthly/Yearly) stacked under the status pill in license rows. */
.plan-tag {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ── Eyebrow ──
   Canonical small "kicker" label above a section heading (mono, uppercase,
   dim). Base = the quiet, left-aligned product-page treatment. Modifiers:
   .is-center centers it; .is-lead is the prominent landing-page treatment
   (larger, wider tracking, centered, more space below).
   NOTE: refguid/.nav-section-label is a DIFFERENT concept (sidebar nav group
   header) living in the intentionally-siloed refguid page — NOT part of this. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--space-7);
}
.eyebrow.is-center { text-align: center; }
.eyebrow.is-lead {
  font-size: var(--text-xs);
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: var(--space-14);
}

/* ── Tag ──
   Canonical small mono chip used for inline labels (homepage product-card tags,
   the product page's feature labels). Cool, low-key — the cool hairline edge
   (not --glass-border) matches the homepage card family. Shared by index.html
   and studiostream/. */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-dim);
  background: var(--glass);
  border: 1px solid var(--hairline-soft);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
}

/* ── Cards ── */
/* Auth / login card — shared by every account auth state + the admin login
   screen. Canonical = account's system (blue badge + .amber variant). Status
   tints route through --accent-*-rgb (zero value change). Page-local extensions
   (e.g. account's .login-error.with-action) stay in that page. */
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-4xl);
  padding: var(--space-16) var(--space-14) var(--space-16);
  box-shadow: var(--shadow-card);
  animation: fadeUp 0.45s ease-out both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-blue);
  background: var(--accent-blue-glow);
  border: 1px solid rgba(var(--accent-blue-rgb), 0.3);
  border-radius: 5px;
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-9);
}
.login-badge.amber {
  color: var(--accent-amber);
  background: rgba(var(--accent-amber-rgb), 0.1);
  border-color: rgba(var(--accent-amber-rgb), 0.28);
}
.login-title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}
.login-sub {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: var(--space-12);
}
.login-error {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-red);
  background: rgba(var(--accent-red-rgb), 0.08);
  border: 1px solid rgba(var(--accent-red-rgb), 0.22);
  border-radius: 9px;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-7);
  display: none;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.login-error.show { display: block; }

/* Login card — mobile padding (folded in from account + admin; identical on both). */
@media (max-width: 480px) {
  .login-card { padding: var(--space-12) var(--space-10) var(--space-14); }
}

/* Glass card — shared surface for the recurring content cards (account + admin).
   Fill + border + radius are identical across all; each card's own padding /
   layout / margins / animation / modifiers stay in its page. */
.section-msg,
.lic-card,
.help-card,
.acct-action-card,
.stat-card,
.ud-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
}

/* Top-edge highlight line shared by the elevated content cards.
   (The white is a decorative hairline, kept raw — not a status colour,
   consistent with the ghost/neutral white tints.) */
.lic-card::after,
.help-card::after,
.acct-action-card::after,
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
}

/* Empty-state card — dashed glass variant with a centered mono caption.
   Only padding differs per use, so it stays in the page. */
.lic-empty {
  background: var(--glass);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-card);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

/* ── Contact-link primary modifier ──
   Filled-blue emphasis variant of the homepage's .contact-link CTA (the base
   .contact-link lives in the homepage <style>). Compound selector so it wins
   over the outline base regardless of source order. Used by the Join /
   "Create your account" CTA. Values via tokens (--accent-blue / --shadow-cta). */
.contact-link.contact-link--primary {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--bg-deep);
  box-shadow: var(--shadow-cta);
}
.contact-link.contact-link--primary:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: var(--bg-deep);
  box-shadow: var(--shadow-cta-hover);
  transform: translateY(-2px);
}