/* The Golf King — design system.
 *
 * Built to Home Run King's quality bar (same type system: Bebas Neue display /
 * Inter body / JetBrains Mono stats; same dense, data-rich card+table language)
 * but with a golf identity: fairway green primary + flag-gold accent on a
 * near-black green-tinted base. Pairs with topbar.css (nav) + app-shell.css (PWA
 * shell). Loaded on every page via pagekit.head().
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  --bg:#0a0e0b; --bg-2:#0e130f; --panel:#121912; --panel-solid:#121912; --panel-2:#18211a; --panel-3:#212c23;
  --border:#1e281f; --border-2:#2c3a2e;
  --text:#eef5ef; --text-2:#cfd9d0; --muted:#8a988c; --muted-2:#5b685e;
  /* brand: fairway green primary, flag gold accent (HRK gold kept as accent) */
  --green:#34c46e; --green-2:#48e085; --green-deep:#1f7a45;
  --gold:#F5C542; --gold-2:#ffd866;
  --brand-gold:#F5C542;  /* alias for ported topbar.css/app-shell.css */
  --brand-crimson:#34c46e; /* alias: ported nav 'feat' color → green for golf */
  --pos:#7dd3a8; --neg:#ff8a8a; --warn:#f5c542; --discord:#5865F2;
  --grass:#34c46e; --bermuda:#c9a24b; --bent:#46b3a6; --poa:#9a86d6; /* grass-type accents */
  --glow:radial-gradient(1200px 600px at 78% -10%,rgba(52,196,110,.10),transparent 60%),
         radial-gradient(900px 500px at 8% -8%,rgba(245,197,66,.05),transparent 55%);
  --shadow:0 18px 44px -18px rgba(0,0,0,.72);
  --shadow-sm:0 6px 18px -10px rgba(0,0,0,.6);
  --r:15px; --r-sm:10px; --r-xs:6px;
  --maxw:1180px;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);background-image:var(--glow);background-attachment:fixed;
  color:var(--text);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:13px;
  line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom);}
a{color:inherit}
::selection{background:rgba(52,196,110,.28)}
h1,h2,h3{margin:0}
.mono{font-family:'JetBrains Mono',monospace}
.pos{color:var(--pos)} .neg{color:var(--neg)} .gold{color:var(--gold)} .green{color:var(--green)}
.muted{color:var(--muted)} .tnum{font-variant-numeric:tabular-nums}
img{max-width:100%}

/* scrollbar */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:10px;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap{max-width:var(--maxw);margin:0 auto;padding:26px 20px 96px}
.sect{margin-top:22px}
.sect-h{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.sect-h h2{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.05em;color:var(--text);line-height:1}
.sect-h .sub{font-size:12px;color:var(--muted)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ── Page hero / title ───────────────────────────────────────────────────── */
.hero{padding:8px 0 18px;border-bottom:1px solid var(--border);margin-bottom:20px}
.page-title{font-family:'Bebas Neue',sans-serif;font-size:38px;letter-spacing:.04em;line-height:.96;color:var(--text)}
.page-title .gold{color:var(--gold)} .page-title .green{color:var(--green)}
.hero p{color:var(--muted);font-size:13.5px;max-width:62ch;margin:9px 0 0}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:7px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--green);border-radius:2px;display:inline-block}

/* ── Topbar logo/wordmark (nav itself in topbar.css) ─────────────────────── */
header.topbar{font-family:'Inter',sans-serif}
.hrk-logo,.gk-logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.gk-mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:16px;
  background:linear-gradient(135deg,var(--green-deep),var(--green));box-shadow:0 3px 10px rgba(52,196,110,.32)}
.hrk-name,.gk-name{font-family:'Bebas Neue',sans-serif;font-size:17px;letter-spacing:.09em;white-space:nowrap}
.gk-name .feat{color:var(--green)} .gk-name .gold{color:var(--gold)}
.navsearch{margin-left:6px;min-width:200px;max-width:300px;flex:1;background:var(--bg-2);border:1px solid var(--border-2);
  color:var(--text);border-radius:8px;padding:8px 12px;font-size:12.5px;font-family:inherit;outline:none}
.navsearch:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(52,196,110,.14)}
.navsearch-results{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:300;background:var(--panel);
  border:1px solid var(--border-2);border-radius:10px;padding:5px;display:none;box-shadow:var(--shadow);max-height:60vh;overflow:auto}
.navsearch-results.open{display:block}
.navsearch-results a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 11px;
  border-radius:7px;text-decoration:none;color:var(--text-2);font-size:13px;font-weight:600}
.navsearch-results a:hover,.navsearch-results a.sel{background:var(--panel-2);color:var(--text)}
.navsearch-results .r-tour{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);white-space:nowrap}

/* ── Panels & cards ──────────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:16px 17px;transition:.15s}
.card:hover{border-color:var(--border-2)}
.card.accent{border-color:rgba(52,196,110,.32);box-shadow:0 0 0 1px rgba(52,196,110,.08),var(--shadow-sm)}
.card-h{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}

/* big stat tile (slate-hero analogue) */
.stat-hero{display:flex;flex-wrap:wrap;gap:10px}
.stat-tile{flex:1;min-width:120px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r);
  padding:15px 16px;position:relative;overflow:hidden}
.stat-tile .v{font-family:'Bebas Neue',sans-serif;font-size:40px;line-height:.9;color:var(--gold);font-variant-numeric:tabular-nums}
.stat-tile .v.green{color:var(--green)}
.stat-tile .lbl{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-top:9px}
.stat-tile .sub{font-size:11px;color:var(--muted);margin-top:3px}

/* ── Badges / chips / pills ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:9px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;line-height:1.4;border:1px solid transparent;white-space:nowrap}
.badge.g{background:rgba(52,196,110,.13);color:var(--green-2);border-color:rgba(52,196,110,.3)}
.badge.gold{background:rgba(245,197,66,.13);color:var(--gold-2);border-color:rgba(245,197,66,.3)}
.badge.red{background:rgba(255,138,138,.12);color:var(--neg);border-color:rgba(255,138,138,.28)}
.badge.live{background:rgba(255,80,80,.16);color:#ff8a8a;border-color:rgba(255,80,80,.4)}
.badge.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff5050;animation:pulse 1.6s infinite}
.badge.am{background:rgba(70,179,166,.14);color:var(--bent);border-color:rgba(70,179,166,.3)}
.badge.pm{background:rgba(154,134,214,.14);color:var(--poa);border-color:rgba(154,134,214,.3)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,80,80,.6)}70%{box-shadow:0 0 0 6px rgba(255,80,80,0)}100%{box-shadow:0 0 0 0 rgba(255,80,80,0)}}

/* ── Chips / segmented / tabs ────────────────────────────────────────────── */
.lens{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--border-2);background:var(--panel-2);color:var(--muted);font-weight:700;font-size:12px;
  padding:7px 13px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.13s;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--green);color:var(--text)}
.chip[aria-pressed="true"]{color:var(--bg);background:var(--green);border-color:var(--green);font-weight:800}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.seg{display:inline-flex;background:var(--panel-2);border:1px solid var(--border-2);border-radius:9px;padding:3px;gap:2px}
.seg button{background:transparent;border:none;color:var(--muted);font-weight:700;font-size:12px;padding:6px 14px;
  border-radius:7px;cursor:pointer;font-family:inherit;transition:.13s}
.seg button[aria-pressed="true"]{background:var(--green);color:var(--bg);font-weight:800}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.tab{padding:10px 15px;background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  font-size:12px;font-weight:700;letter-spacing:.03em;cursor:pointer;font-family:inherit;white-space:nowrap;transition:.13s}
.tab:hover{color:var(--text)}
.tab[aria-pressed="true"],.tab.active{color:var(--green);border-bottom-color:var(--green)}
.breadcrumb{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.breadcrumb b{color:var(--text-2)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;border-radius:9px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--border-2);background:var(--panel-2);color:var(--text-2);cursor:pointer;text-decoration:none;transition:.13s}
.btn:hover{border-color:var(--green);color:var(--text)}
.btn.primary{background:linear-gradient(135deg,var(--green-deep),var(--green));border-color:transparent;color:#04140a}
.btn.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.gold{background:linear-gradient(135deg,var(--gold),var(--gold-2));border-color:transparent;color:#241c04}
.btn.sm{padding:6px 11px;font-size:10px}

/* ── Data table (the workhorse) ──────────────────────────────────────────── */
.dt-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);background:var(--panel)}
table.dt{width:100%;border-collapse:collapse;font-size:12.5px}
table.dt thead th{position:sticky;top:0;background:var(--panel-3);color:var(--muted);font-family:'JetBrains Mono',monospace;
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;text-align:right;padding:11px 12px;
  border-bottom:1px solid var(--border-2);white-space:nowrap;cursor:pointer;user-select:none;z-index:2}
table.dt thead th:first-child,table.dt thead th.l{text-align:left}
table.dt thead th.sorted{color:var(--green)}
table.dt thead th .ar{opacity:.6;font-size:9px;margin-left:2px}
table.dt tbody td{padding:10px 12px;text-align:right;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;
  font-family:'JetBrains Mono',monospace;color:var(--text-2);white-space:nowrap}
table.dt tbody td:first-child,table.dt tbody td.l{text-align:left;font-family:'Inter',sans-serif}
table.dt tbody tr{transition:background .1s}
table.dt tbody tr:hover{background:var(--panel-2)}
table.dt tbody tr:last-child td{border-bottom:0}
table.dt .rk{color:var(--muted-2);font-weight:800;width:34px}
table.dt tr:nth-child(-n+3) .rk{color:var(--gold)}
.pname{font-weight:700;color:var(--text);text-decoration:none}
.pname:hover{color:var(--green)}
.pflag{font-size:10px;color:var(--muted-2);font-family:'JetBrains Mono',monospace;margin-left:5px}
.cellbar{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;min-width:54px}
.cellbar b{font-weight:700} .cellbar.pos b{color:var(--pos)} .cellbar.neg b{color:var(--neg)}
.cellbar i{height:3px;border-radius:2px;display:block;background:currentColor;opacity:.5}
.cellbar.pos i{color:var(--pos)} .cellbar.neg i{color:var(--neg)}

/* probability bar (win%, make-cut%, etc.) */
.pbar{position:relative;height:20px;border-radius:5px;background:var(--panel-3);overflow:hidden;min-width:80px}
.pbar>i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--green-deep),var(--green));opacity:.85}
.pbar>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding-right:7px;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:800;color:var(--text)}

/* odds cell — model vs market, +EV highlight */
.odds{font-family:'JetBrains Mono',monospace;font-weight:700}
.odds.best{color:var(--green-2)}
.ev{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px}
.ev.plus{color:var(--green-2)} .ev.minus{color:var(--muted-2)}
td.edge-hi{background:rgba(52,196,110,.10)}

/* leaderboard score box */
.score-box{font-family:'Bebas Neue',sans-serif;font-size:26px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;
  padding:7px 9px;background:rgba(245,197,66,.08);border:1px solid rgba(245,197,66,.22);border-radius:9px;min-width:54px;text-align:center}
.score-box.under{color:var(--green);background:rgba(52,196,110,.08);border-color:rgba(52,196,110,.24)}

/* ── Forms ───────────────────────────────────────────────────────────────── */
input,select{font-family:inherit}
.inp{background:var(--bg-2);border:1px solid var(--border-2);color:var(--text);border-radius:8px;padding:8px 11px;font-size:12.5px;outline:none}
.inp:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(52,196,110,.13)}

/* ── Notes / footer ──────────────────────────────────────────────────────── */
.note{color:var(--muted-2);font-size:11.5px;line-height:1.6;border-top:1px solid var(--border);
  margin-top:30px;padding:16px 20px;max-width:var(--maxw);margin-left:auto;margin-right:auto}
.note a{color:var(--green)}
.empty{padding:40px 18px;text-align:center;color:var(--muted)}
.skel{background:linear-gradient(90deg,var(--panel-2),var(--panel-3),var(--panel-2));background-size:200% 100%;
  animation:shimmer 1.3s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Radar (course-fit) ──────────────────────────────────────────────────── */
.radar{display:block;margin:0 auto}
.radar .axis{stroke:var(--border-2);stroke-width:1}
.radar .ring{fill:none;stroke:var(--border);stroke-width:1}
.radar .poly{fill:rgba(52,196,110,.18);stroke:var(--green);stroke-width:2}
.radar .lbl{fill:var(--muted);font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:560px){
  .wrap{padding:20px 14px 90px}
  .page-title{font-size:30px}
  .breadcrumb{width:100%;margin-top:4px}
  table.dt{font-size:12px}
  table.dt tbody td,table.dt thead th{padding:9px 9px}
}

/* ── Model Builder (mymodel.html) ──────────────────────────────────────── */
.mb-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
@media(max-width:900px){.mb-grid{grid-template-columns:1fr}}
.mb-controls{padding:16px;position:sticky;top:64px}
@media(max-width:900px){.mb-controls{position:static}}
.mb-row{margin-bottom:12px}
.mb-presetbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.mb-presetbar .chip{font-size:11px;padding:6px 11px}
.mb-group{margin-bottom:16px}
.mb-group .card-h{margin-bottom:8px}
.mb-stat{margin-bottom:11px}
.mb-stat-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.mb-wval{width:54px;background:var(--bg-2);border:1px solid var(--border-2);color:var(--text);border-radius:6px;
  padding:3px 6px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;text-align:right;outline:none}
.mb-wval:focus{border-color:var(--green)}
.mb-slider{width:100%;-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;outline:none;
  background:linear-gradient(90deg,var(--neg) 0%,var(--panel-3) 50%,var(--green) 100%)}
.mb-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--green);
  border:2px solid var(--bg);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.mb-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--green);border:2px solid var(--bg);cursor:pointer}
.mb-actions{display:flex;gap:8px;margin:14px 0}
.mb-actions .btn{flex:1}
.mb-saved{border-top:1px solid var(--border);padding-top:12px}
.mb-savedlist{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.mb-saveditem{display:flex;gap:5px}
.mb-load{flex:1;text-align:left;background:var(--panel-2);border:1px solid var(--border-2);color:var(--text-2);
  border-radius:6px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.mb-load:hover{border-color:var(--green);color:var(--text)}
.mb-del{background:transparent;border:1px solid var(--border-2);color:var(--muted);border-radius:6px;padding:0 9px;cursor:pointer;font-size:11px}
.mb-del:hover{border-color:var(--neg);color:var(--neg)}

/* Owner dashboard (admin.html) */
.sec-h{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:.03em;margin:26px 0 12px;color:var(--text)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.brow{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--border)}
.brow:last-child{border-bottom:0}
.brow .blbl{flex:0 0 42%;font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'JetBrains Mono',monospace}
.brow .pbar{flex:1}

/* Account pill (auth.js) — signed-out gold CTA, signed-in avatar + dropdown */
.gk-acc{position:relative;display:inline-flex;align-items:center}
.gk-acc-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;
  background:var(--gold);border:1px solid var(--gold);color:#0a0e0b;font-size:11px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:inherit;white-space:nowrap;transition:.14s}
.gk-acc-btn:hover{background:var(--gold-2);border-color:var(--gold-2);transform:translateY(-1px)}
.gk-acc-btn.signed{background:var(--panel-2);border-color:var(--border-2);color:var(--text);
  padding:3px 9px 3px 3px;gap:6px;text-transform:none;letter-spacing:0;font-weight:700}
.gk-acc-btn.signed:hover{border-color:var(--green);transform:none}
.gk-acc-av{width:24px;height:24px;border-radius:50%;border:1px solid var(--border-2);background:var(--bg);flex-shrink:0;object-fit:cover}
.gk-acc-av-l{display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#0a0e0b;background:var(--gold);border-color:var(--gold)}
.gk-acc-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:700}
.gk-acc-caret{font-size:9px;color:var(--muted);margin-right:3px}
.gk-acc-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;padding:7px;
  background:var(--panel);border:1px solid var(--border-2);border-radius:11px;box-shadow:0 16px 44px rgba(0,0,0,.55);display:none;z-index:200}
.gk-acc-menu.open{display:block}
.gk-acc-row{padding:9px 11px;font-size:12.5px;color:var(--text-2);border-radius:7px}
.gk-acc-row.head{color:var(--muted);font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;padding:6px 11px 3px}
.gk-acc-row.strong{color:var(--text);font-weight:700;padding-top:0}
.gk-acc-row.act{cursor:pointer;color:var(--text);text-decoration:none;display:block}
.gk-acc-row.act:hover{background:rgba(245,197,66,.10);color:var(--gold)}
.gk-acc-row.act.danger:hover{background:rgba(217,52,43,.12);color:#ff8a8a}
.gk-acc-menu hr{border:0;border-top:1px solid var(--border);margin:5px 0}
#hrk-drawer-auth-slot .gk-acc{width:100%;display:block}
#hrk-drawer-auth-slot .gk-acc-btn{width:100%;justify-content:center;padding:12px 14px;font-size:13px}
#hrk-drawer-auth-slot .gk-acc-menu{position:static;margin-top:7px;width:100%;min-width:0;box-shadow:none}