@import url("/assets/fonts.css");

/* =====================================================================
   BIG FAIRWAYS APP THEME
   Loaded after each page's own styles so it wins.

   This is the mock 4 system carried onto the app screens: the same
   navy, the same Manrope at weight 800 with tight tracking, the same
   silver gradient on the wordmark, the same pill buttons, the same
   card with a hairline of light along its top edge. The serif is an
   accent only, never a heading.
   ===================================================================== */

:root{
  /* straight from the home page */
  --navy-900:#03101b;
  --navy-800:#061a2a;
  --navy-700:#0a2135;
  --bf-green:#2f7a34;
  --bf-green-br:#7ec24a;
  --bf-green-glow:rgba(126,194,74,.35);
  --bf-gold:#d8b354;
  --bf-gold-lt:#f0d489;
  --bf-silver-2:#dfe7ee;
  --bf-silver-3:#9fb0bf;
  --bf-silver-4:#6f8496;
  --bf-ink:#eef4f8;
  --bf-ink-2:#b3c4d1;
  --bf-ink-3:#7f95a6;
  --bf-line:rgba(190,212,230,.13);
  --bf-line-soft:rgba(190,212,230,.07);
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --bf-silvergrad:linear-gradient(98deg,#b9c9d6 0%,#ffffff 18%,#f4f8fb 34%,#aebecc 52%,#ffffff 72%,#e3ecf3 100%);
  --bf-card:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
}

/* ---------- ground ---------- */
html,body{background:var(--navy-900);color:var(--bf-ink)}
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type. Heavy sans, tight. The serif is an accent only ---------- */
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1.06}
h1{font-size:clamp(30px,8.4vw,44px)}
h2{font-size:clamp(25px,6.6vw,34px)}
h3{font-size:20px;letter-spacing:-.025em;line-height:1.22}
.serif-it,.bf-serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}
.silver,.bf-silver{
  background:var(--bf-silvergrad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
button,input,select,textarea{font-family:var(--sans)}
b,strong{font-weight:800}

/* small uppercase labels, the home page eyebrow voice */
.topbar .ttl span,.lab,.chipm,.eyebrow,.sec-eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8ea1b2;
}

/* ---------- the top bar ---------- */
.topbar,.holebar{
  background:rgba(3,16,27,.82);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--bf-line-soft);
  box-shadow:none;
}
.topbar .ttl b{font-size:18px;font-weight:800;letter-spacing:-.02em}
.topbar .back{background:rgba(255,255,255,.06);border:1px solid var(--bf-line)}
.topbar .act{
  font-size:14px;font-weight:800;letter-spacing:-.01em;
  color:var(--bf-gold);background:rgba(216,179,84,.10);
  border:1px solid rgba(216,179,84,.30);border-radius:999px;padding:0 15px;
}

/* ---------- the wordmark: crest, then BIG FAIRWAYS in silver ---------- */
.pot{gap:10px}
.pot .ball{
  background:url("/assets/icons/mark-96.webp") center/contain no-repeat;
  box-shadow:none;width:34px;height:34px;border-radius:0;
}
.pot .ball::after{content:"" !important}
.pot b{
  font-family:var(--sans);font-size:16px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  background:var(--bf-silvergrad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pot b i{font-style:normal;-webkit-text-fill-color:transparent}
.authlogo .pot .ball{width:46px;height:46px}
.authlogo .pot b{font-size:22px}
.authlogo p{
  font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#8ea1b2;
}

/* ---------- cards and panels, the home page treatment ---------- */
.card,.panel,.tile,.box,.sheet,.authcard,.evbig,.note{
  background:var(--bf-card) !important;
  border:1px solid var(--bf-line);
  border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 20px 40px -30px #000;
}

/* ---------- buttons: pills, heavy, the green from the home page ---------- */
.btn,.key.save,.bigbtn,.cta,.primary{
  border-radius:999px;font-weight:800;letter-spacing:-.01em;font-size:17px;
}
.btn{min-height:54px;padding:0 24px}
/* in this app a plain .btn is the go button, so it wears the home page green */
.btn,.btn.primary,.primary,.cta,.bigbtn,.key.save.green,.btn.go{
  color:#06210a !important;
  background:linear-gradient(180deg,#a9e06c 0%,#7ec24a 42%,#4f9a31 100%) !important;
  border:0 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
             0 12px 30px -10px var(--bf-green-glow),
             0 0 0 1px rgba(126,194,74,.35);
}
.btn.gold,.gold{
  color:#1d1607 !important;
  background:linear-gradient(180deg,#f0d489 0%,#d8b354 46%,#b78f34 100%) !important;
  border:0 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 30px -12px rgba(216,179,84,.5);
}
.btn.ghost,.ghost{
  color:var(--bf-ink) !important;
  border:1px solid var(--bf-line) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset;
}
.btn:active{transform:translateY(1px)}

/* ---------- chips and pills ---------- */
.pill,.chip,.jchip,.wchip,.gtag,.tag{
  border-radius:999px;font-weight:800;letter-spacing:.06em;
}

/* ---------- fields ---------- */
input,select,textarea{
  background-color:rgba(255,255,255,.045);
  border:1px solid var(--bf-line);
  color:var(--bf-ink);
  font-size:17px;
  border-radius:14px;
}
input::placeholder,textarea::placeholder{color:var(--bf-silver-4)}
input:focus,select:focus,textarea:focus{
  border-color:rgba(126,194,74,.55);
  box-shadow:0 0 0 3px rgba(126,194,74,.16);
}
select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%239fb0bf' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

/* ---------- the scoring keypad ---------- */
.key{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--bf-line);
  color:var(--bf-ink);
  font-size:24px;font-weight:800;letter-spacing:-.03em;
  border-radius:16px;
}
.key:active,.key.on,.key.sel{
  color:#06210a;
  background:linear-gradient(180deg,#a9e06c,#4f9a31);
  border-color:transparent;
}
.bigscore{font-weight:800;letter-spacing:-.04em}

/* ---------- bottom nav ---------- */
.navb{
  background:rgba(3,16,27,.82);
  backdrop-filter:blur(18px) saturate(150%);
  border-top:1px solid var(--bf-line-soft);
  border-radius:999px;font-weight:800;
}

/* ---------- rows and tables ---------- */
.prow,.lbrow,.row{border-color:var(--bf-line)}
.prow.me,.lbrow.me{background:rgba(126,194,74,.09);box-shadow:inset 3px 0 0 var(--bf-green-br)}
table{color:var(--bf-ink)}
th{color:var(--bf-silver-4);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
td,th{border-color:var(--bf-line)}
.lbhead,.lbtable thead th{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  color:var(--bf-silver-3);
}

/* ---------- links ---------- */
a{color:var(--bf-green-br)}
a:hover{color:#98d76a}
::selection{background:rgba(126,194,74,.3)}

/* ---------- sign in ---------- */
#s-auth{
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(47,122,52,.26) 0%, transparent 62%),
    linear-gradient(170deg,#03101b 0%, #071d2f 52%, #03101b 100%) !important;
}

/* the handicap dial: Big Fairways is a longer name than the one that
   used to sit in there, so the line under the number needs the room */
#hcapSub{font-size:12.5px;line-height:1.3;max-width:150px;margin-left:auto;margin-right:auto}

@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms !important}}

/* =====================================================================
   SECOND PASS
   The same move as the home page, so the utility screens do not feel
   like a different website: larger type set for a phone, numbers in
   their own column, and gold on the record rather than green on
   everything.
   ===================================================================== */

body{
  font-size:18.5px;line-height:1.56;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}
p,li{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance;line-height:1.02}
h3{font-size:22px;line-height:1.2}
h1{font-size:clamp(34px,8.8vw,48px);letter-spacing:-.04em}
h2{font-size:clamp(27px,7vw,36px)}
.serif-it,.bf-serif{font-size:1.1em;line-height:.98}

/* numbers hold their column */
.num,[class*="score"],[class*="total"],[class*="stat"] b,td b{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}

/* a thumb sized target everywhere */
a,button,summary,label,input,select{touch-action:manipulation}
:focus-visible{outline:2px solid var(--bf-gold);outline-offset:3px;border-radius:12px}

@media (max-width:360px){ body{font-size:17.5px} }
@media (min-width:900px){ body{font-size:17.5px} }