/* ==========================================================================
   SPORAFIND SHARED COMPONENTS — canonical recipes (2026-10-01)
   Namespaced .sf-* so adoption never collides with page-local styles.
   Load AFTER tokens.css. New code: use these. Old pages: adopt gradually.
   ========================================================================== */

/* Buttons */
.sf-btn{display:inline-block;font:600 13px/1 Inter,system-ui,sans-serif;border-radius:8px;padding:9px 18px;min-height:40px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.sf-btn-primary{background:var(--green);color:#fff}.sf-btn-primary:hover{background:var(--green-dark)}
.sf-btn-gold{background:var(--gold);color:#0A0E1A}.sf-btn-gold:hover{background:var(--gold-dark)}
.sf-btn-outline{background:transparent;border-color:var(--cream3);color:var(--text-dark)}
.sf-btn-ghost{background:transparent;color:var(--text-mid)}
.sf-btn-danger{background:var(--red-deep);color:#fff}.sf-btn-danger:hover{background:var(--red-dark)}
.sf-btn-bright{background:var(--gl);color:#0f0f0f}.sf-btn-bright:hover{filter:brightness(1.1)}

/* Cards */
.sf-card{background:#fff;border:0.5px solid var(--cream2);border-radius:16px;padding:32px 28px}
.sf-card-dark{background:var(--s1);border:1px solid var(--bd);border-radius:10px;padding:20px}

/* Tags & badges */
.sf-tag{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:rgba(0,107,60,.1);color:var(--green)}
.sf-tag-gold{background:rgba(212,160,23,.12);color:var(--gold-dark)}
.sf-eyebrow{display:inline-block;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--green)}
.sf-eyebrow-pill{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--gold);background:rgba(212,160,23,.12);border:0.5px solid rgba(212,160,23,.3);border-radius:20px;padding:5px 12px}

/* Forms */
.sf-input{font:400 13px Inter,system-ui,sans-serif;background:#fff;border:1px solid var(--cream2);border-radius:6px;padding:9px 12px;color:var(--text-dark)}
.sf-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,160,23,.15)}
.sf-input-dark{background:var(--s2);border:1px solid var(--bd);color:var(--t1)}
.sf-input-dark:focus{border-color:var(--gl);box-shadow:0 0 0 3px rgba(0,168,90,.15)}

/* Tables */
.sf-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:0.5px solid var(--cream2);border-radius:16px;overflow:hidden}
.sf-table th{font-size:11px;text-transform:uppercase;letter-spacing:.4px;background:var(--bg);color:var(--text-mid);text-align:left;padding:9px 12px;border-bottom:1px solid var(--cream2)}
.sf-table td{padding:9px 12px;color:var(--text-mid);border-bottom:1px solid var(--cream2)}
.sf-table tr:hover td{background:var(--cream)}

/* Progress */
.sf-bar{height:8px;background:var(--s2);border:1px solid var(--bd);border-radius:4px;overflow:hidden}
.sf-bar > span{display:block;height:100%;background:var(--green);border-radius:4px}
.sf-num{font-family:'JetBrains Mono',monospace;font-weight:700}

/* Tables (scroll recipe — wrap wide tables, never clip) */
.sf-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sf-table-wrap table{min-width:600px}

/* Shared chrome: canonical nav + footer (page-local rules win where present).
   Sticky (not fixed) so pages need no padding compensation. */
nav{position:sticky;top:0;z-index:100;background:rgba(8,13,26,0.92);backdrop-filter:blur(12px);border-bottom:0.5px solid rgba(255,255,255,0.06);padding:0 48px}
.nav-inner{max-width:1200px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-logomark{width:34px;height:34px;border-radius:8px;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-star{width:15px;height:15px;background:var(--gold);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.nav-wordmark{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.3px;color:#fff}
.nav-wordmark span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:32px}
.nav-links a{font-size:14px;color:rgba(255,255,255,0.65);font-weight:500;text-decoration:none;transition:color 0.15s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn-ghost-nav{padding:8px 16px;border:0.5px solid rgba(255,255,255,0.2);border-radius:8px;font-size:14px;font-weight:500;color:rgba(255,255,255,0.8);cursor:pointer;font-family:'Inter',sans-serif;background:transparent;text-decoration:none}
.btn-ghost-nav:hover{border-color:rgba(255,255,255,0.5);color:#fff}
.btn-primary-nav{padding:8px 18px;border:none;border-radius:8px;font-size:14px;font-weight:600;color:#0A0E1A;background:var(--gold);cursor:pointer;font-family:'Inter',sans-serif;text-decoration:none}
.btn-primary-nav:hover{background:var(--gold-dark)}
footer{background:var(--navy);padding:72px 48px 40px}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding-bottom:48px;border-bottom:0.5px solid rgba(255,255,255,0.07)}
.footer-brand p{font-size:14px;color:rgba(255,255,255,0.4);line-height:1.7;margin-top:12px;max-width:260px}
.footer-socials{display:flex;align-items:center;gap:10px;margin-top:18px}
.footer-social{width:36px;height:36px;border-radius:10px;border:0.5px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:17px;color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.03);transition:all 0.2s}
.footer-social:hover{color:#fff;background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.25);transform:translateY(-1px)}
.footer-social:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.footer-col-title{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.25);margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:10px;text-decoration:none;transition:color 0.15s}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:32px;flex-wrap:wrap;gap:16px}
.footer-copy{font-size:13px;color:rgba(255,255,255,0.25)}
.footer-copy span{color:var(--gold)}

/* Decorative glow guard (700px glows must never cause page scroll) */
.hero-bg-glow,.login-bg-glow{max-width:100vw}

/* Mobile nav (canonical; page-local rules win where present) */
.nav-mobile-toggle{display:none;background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px;min-width:40px;min-height:40px;align-items:center;justify-content:center}
@media(max-width:900px){
  nav{padding:0 20px}
  .nav-mobile-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(8,13,26,0.98);flex-direction:column;padding:16px 20px;gap:16px;border-bottom:0.5px solid rgba(255,255,255,0.06)}
  .nav-links.open{display:flex}
  .nav-cta .btn-ghost-nav{display:none}
}