/* ==========================================================
   AISEL — SHARED COMPONENTS
   Reusable primitives used across multiple sections, so each
   section's own CSS file only needs section-specific rules.
   Loaded once in index.html, after variables.css + base.css.

   Identity rule: terminal/lab aesthetic is primary. Glass
   (.glass) is an opt-in utility for cards, nav, modals, and
   stat panels only — it is never the default card treatment.
========================================================== */

  /* ==========================================================
     BUTTONS
  ========================================================== */
  .btn{
    font-family:var(--font-mono); font-size:16px; font-weight:600;
    padding:18px 34px; border-radius:16px; border:1px solid var(--ink); transition:.35s;
    display:inline-flex; align-items:center; gap:var(--space-2); cursor:pointer;
    transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-standard);
    background:none; text-decoration:none; color:var(--ink);
  }
  .btn:hover{ transform:translateY(-4px); box-shadow:0 20px 35px rgba(37,99,235,.20); }
  .btn-primary{ background:var(--ink); color:var(--bg); }
  .btn-primary:hover{ transform:translateY(-2px); text-decoration:none; box-shadow:var(--shadow-sm); }
  .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-ghost:hover{ transform:translateY(-2px); text-decoration:none; border-color:var(--ink); }
  .btn-accent{ background:var(--violet); border-color:var(--violet); color:#fff; }
  .btn-accent:hover{ transform:translateY(-2px); text-decoration:none; box-shadow:0 6px 16px rgba(var(--violet-rgb),0.28); }
  .btn-sm{ font-size:var(--fs-xs); padding:8px var(--space-4); border-radius:var(--radius-md); }
  .btn-lg{ font-size:var(--fs-base); padding:15px var(--space-7); }
  .btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

  /* ---------- icon buttons (footer socials, back-to-top, carousel arrows) ---------- */
  .icon-btn{
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    border-radius:var(--radius-full); border:1px solid var(--line); background:var(--card); color:var(--ink-soft);
    cursor:pointer; transition:transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
  }
  .icon-btn:hover{ transform:translateY(-2px); color:var(--violet); border-color:var(--violet); }

  /* ==========================================================
     BADGES & TAGS
     Badge = status indicator (dot + label, or solid pill).
     Tag   = category/label chip, neutral by default.
  ========================================================== */
  .badge{ display:inline-flex; align-items:center; gap:var(--space-2); border:1px solid var(--line); border-radius:var(--radius-full); padding:4px 10px; font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-soft); }
  .badge .b-dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); animation:pulseDot 2s ease-in-out infinite; }

  .badge-pill{ display:inline-flex; align-items:center; gap:var(--space-2); font-family:var(--font-mono); font-size:var(--fs-xs); padding:3px 10px; border-radius:var(--radius-full); border:1px solid currentColor; }
  .badge-active{ color:var(--teal); }
  .badge-completed{ color:var(--ink-faint); }
  .badge-ongoing{ color:var(--amber); }

  .tag{
    display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-xs);
    padding:3px 10px; border-radius:var(--radius-full); border:1px solid var(--line); color:var(--ink-soft); background:var(--card);
    line-height:1.6;
  }
  .tag-accent{ color:var(--violet); border-color:rgba(var(--violet-rgb),0.4); background:rgba(var(--violet-rgb),0.06); }
  .tag-teal{ color:var(--teal); border-color:rgba(var(--teal-rgb),0.4); background:rgba(var(--teal-rgb),0.06); }
  .tag-amber{ color:var(--amber); border-color:rgba(var(--amber-rgb),0.4); background:rgba(var(--amber-rgb),0.06); }

  /* ---------- placeholder-content marker (unfilled sample entries) ---------- */
  .is-placeholder{ opacity:0.6; }
  .placeholder-note{ font-family:var(--font-mono); font-size:10.5px; color:var(--amber); border:1px dashed var(--amber); border-radius:var(--radius-full); padding:2px 9px; display:inline-block; }

  /* ==========================================================
     CARDS
     .card       — base surface, matte, terminal-consistent (default everywhere)
     .card-hover — adds the standard lift/border-accent interaction
     .glass      — opt-in translucent/blur treatment, layered on top
                   of .card for the sparing set of surfaces called
                   out in the design brief (stat panels, nav, modals,
                   select cards) — never applied site-wide.
  ========================================================== */
  .card{
    border:var(--border); background:var(--card); border-radius:var(--radius-xl);
    transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
  }
  .card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--violet); }

  /* legacy alias — existing markup in projects/partners/testimonials already
     uses .glass-card; keep it working, aliased to .card + .card-hover */
  .glass-card{ border:var(--border); background:var(--card); border-radius:var(--radius-xl); transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
  .glass-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--violet); }

  .glass{
    background:var(--glass-bg);
    -webkit-backdrop-filter:blur(var(--glass-blur));
    backdrop-filter:blur(var(--glass-blur));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
  }
  .glass-dark{
    background:var(--glass-bg-dark);
    -webkit-backdrop-filter:blur(var(--glass-blur));
    backdrop-filter:blur(var(--glass-blur));
    border:1px solid rgba(255,255,255,0.12);
    color:var(--term-ink);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    /* graceful fallback: solid card instead of a flat, unblurred translucent smear */
    .glass{ background:var(--card); }
    .glass-dark{ background:var(--term-bg); }
  }

  /* ---------- generic stat card (publications dashboard, footer, hero, etc.) ---------- */
  .stat-card{ border:var(--border); background:var(--card); border-radius:var(--radius-lg); padding:var(--space-4) var(--space-3); text-align:center; }
  .stat-card h3{ margin:0 0 var(--space-1); font-family:var(--font-mono); font-size:var(--fs-xl); font-weight:var(--fw-semibold); color:var(--violet); letter-spacing:var(--tracking-tight); }
  .stat-card span{ font-size:var(--fs-xs); color:var(--ink-soft); letter-spacing:0.02em; }

  /* ==========================================================
     SHADOW UTILITIES (for one-off use outside .card/.glass)
  ========================================================== */
  .shadow-xs{ box-shadow:var(--shadow-xs); }
  .shadow-sm{ box-shadow:var(--shadow-sm); }
  .shadow-md{ box-shadow:var(--shadow-md); }
  .shadow-lg{ box-shadow:var(--shadow-lg); }

  /* ---------- back-to-top ---------- */
  #backToTop{ position:fixed; right:20px; bottom:20px; z-index:var(--z-back-to-top); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--dur-slow) var(--ease-standard), transform var(--dur-slow) var(--ease-standard), visibility var(--dur-slow) var(--ease-standard); }
  #backToTop.show{ opacity:1; visibility:visible; transform:none; }

  /* ---------- skip-to-content link (accessibility) ---------- */
  .skip-link{ position:fixed; top:-48px; left:12px; z-index:var(--z-skip-link); background:var(--ink); color:var(--bg); font-family:var(--font-mono); font-size:var(--fs-base); padding:10px var(--space-4); border-radius:var(--radius-md); transition:top var(--dur-base) var(--ease-standard); }
  .skip-link:focus{ top:12px; }