/* GAIM (Golf AI Modeler) website styles.
   Copyright (c) 2026 Greg Pejic. All rights reserved.
   Ported from docs/design/gaim-mockup-priority2.html (the approved Priority 2
   design). Per-tournament colours are never written here: app.jsx sets
   --t-primary / --t-accent / --t-accent-text from frontend/brands.json. */

/* ---------- Self-hosted fonts (SIL OFL 1.1, see fonts/SOURCES.txt) ---------- */
@font-face {
  font-family: "Inter";
  src: url(fonts/InterVariable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cascadia Code";
  src: url(fonts/CascadiaCode.woff2) format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --g-bg: #030907; --g-bg2: #08130f; --g-panel: rgba(10, 24, 19, .86); --g-panel-solid: #0a1813; --g-line: #163a2f;
  --g-mint: #2ee6a6; --g-mint-dim: #1aa678; --g-glow: rgba(46, 230, 166, .35);
  --g-silver: #d6dde0; --g-text: #e9f1ef; --g-muted: #86a198; --g-neg: #ff6b6b;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, ui-monospace, monospace;
  --fx: 1; /* effect intensity: Full */
}
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--g-bg); color: var(--g-text); font-family: var(--sans); font-size: 14px; overflow-x: hidden; min-height: 100vh }

button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--g-mint); outline-offset: 2px;
}

/* ---------- Background layers: matrix code rain + putting-grid floor ---------- */
#rain { position: fixed; inset: 0; z-index: 0; opacity: calc(.22 * var(--fx)); pointer-events: none }
.floor { position: fixed; left: -20%; right: -20%; bottom: -8vh; height: 55vh; z-index: 0; pointer-events: none;
  perspective: 520px; opacity: calc(.9 * var(--fx)) }
.floor::before { content: ""; position: absolute; inset: 0; transform: rotateX(68deg); transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(46, 230, 166, .28) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(0deg, rgba(46, 230, 166, .22) 0 1px, transparent 1px 60px);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 90%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 90%);
  animation: floor 9s linear infinite }
@keyframes floor { to { background-position: 0 60px, 0 60px } }
.vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, transparent 40%, rgba(0, 0, 0, .7) 100%) }

.layer { position: relative; z-index: 1 }

/* ---------- GAIM header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; padding: 12px 28px; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px 16px;
  background: linear-gradient(180deg, rgba(3, 12, 9, .94), rgba(3, 9, 7, .82)); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--g-line); box-shadow: 0 1px 0 rgba(46, 230, 166, .25), 0 8px 30px rgba(0, 0, 0, .5) }
.hdr::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--g-mint), transparent); opacity: .8 }
.brand { display: flex; align-items: center; gap: 14px }
/* Full transparent GAIM logo (G mark + wordmark + GOLF AI MODELER). */
.brand .logo { display: block; height: 60px; width: auto; margin: -4px 0; filter: drop-shadow(0 0 10px rgba(46, 230, 166, .22)) }
.ctrl { display: flex; align-items: center; gap: 8px; margin-left: 16px }
/* Tournament picker: compact trigger + GAIM-styled drop-down list. */
.picker { position: relative }
.plabel { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--g-muted) }
.pbtn { display: inline-flex; align-items: center; gap: 10px; background: rgba(8, 19, 15, .9); color: var(--g-text);
  border: 1px solid var(--g-line); border-radius: 8px; padding: 8px 12px; font: 600 14px var(--sans); cursor: pointer; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(46, 230, 166, .06); transition: .15s }
.pbtn:hover, .pbtn[aria-expanded=true] { border-color: var(--g-mint); box-shadow: 0 0 14px var(--g-glow) }
.pbtn .chev { color: var(--g-mint); transition: transform .15s }
.pbtn[aria-expanded=true] .chev { transform: rotate(180deg) }
.plist { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 340px; margin: 0; padding: 6px; list-style: none;
  background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim); border-radius: 10px;
  box-shadow: 0 0 24px var(--g-glow), 0 14px 40px rgba(0, 0, 0, .6); outline: none }
.plist ul { margin: 0; padding: 0; list-style: none }
.pyear { padding: 8px 10px 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 2px; color: var(--g-mint) }
.popt { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 8px 12px; border-radius: 6px; cursor: pointer;
  border-left: 3px solid transparent }
.popt .oname { font-weight: 700; color: var(--g-text) }
.popt .ometa { font-family: var(--mono); font-size: 11.5px; color: var(--g-muted) }
.popt.active { background: rgba(46, 230, 166, .08); border-left-color: var(--o-accent) }
.popt.cur .oname::after { content: " \2713"; color: var(--g-mint) }
.spacer { flex: 1 }
.hacts { display: flex; align-items: center; gap: 16px }
.hbtn { background: transparent; border: 1px solid var(--g-line); color: var(--g-silver); border-radius: 8px; padding: 9px 14px; font-size: 13px;
  font-family: var(--sans); cursor: pointer; transition: .15s }
.hbtn:hover { border-color: var(--g-mint); color: #fff; box-shadow: 0 0 14px var(--g-glow) }
.hbtn.primary { background: var(--g-mint); color: #04261a; border-color: var(--g-mint); font-weight: 700; box-shadow: 0 0 16px var(--g-glow) }
/* Coming-soon placeholders: muted text instead of opacity, so the Soon badge
   keeps full contrast (mint on near-black). */
.hbtn[aria-disabled=true] { color: var(--g-muted); cursor: not-allowed }
.hbtn[aria-disabled=true]:hover { border-color: var(--g-line); color: var(--g-muted); box-shadow: none }
.hbtn[disabled] { opacity: .35; cursor: not-allowed; box-shadow: none }
.soon { display: inline-block; margin-left: 5px; padding: 1px 6px; border: 1px solid var(--g-mint-dim); border-radius: 999px; line-height: 1.4;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--g-mint); vertical-align: middle }
.avatar { position: relative; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim);
  display: grid; place-items: center; color: var(--g-silver); cursor: pointer; transition: .15s }
.avatar:hover, .avatar[aria-expanded=true] { border-color: var(--g-mint); color: #fff; box-shadow: 0 0 14px var(--g-glow) }
/* Login: the account menu (GAIM_AUTH=cognito) or the local-mode note. */
.acct { position: relative }
.amenu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; min-width: 230px; padding: 6px;
  background: var(--g-panel-solid); border: 1px solid var(--g-mint-dim); border-radius: 8px;
  box-shadow: 0 0 24px var(--g-glow), 0 14px 40px rgba(0, 0, 0, .6) }
.aemail { padding: 8px 10px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--g-muted);
  border-bottom: 1px solid var(--g-line); margin-bottom: 6px }
.aemail span { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; letter-spacing: 0; color: var(--g-text);
  overflow-wrap: anywhere }
.amenu [role=menuitem] { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent;
  color: var(--g-silver); border-radius: 6px; padding: 9px 10px; font: 13px var(--sans); cursor: pointer }
.amenu [role=menuitem]:hover { border-color: var(--g-mint); color: #fff; background: rgba(46, 230, 166, .08) }
.amenu [role=menuitem]:focus-visible { outline: 2px solid var(--g-mint); outline-offset: 2px }
.localnote { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; color: var(--g-muted); border: 1px solid var(--g-line);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap }
/* The tagline shows in full on the header row; below 1100px it is hidden
   (see Responsive) rather than cut off. */
.brand, .ctrl, .hacts { flex: none }
.tagline { flex: none; font-size: 13px; color: var(--g-text); font-style: italic;
  letter-spacing: .3px; white-space: nowrap; margin-left: 6px; padding-left: 16px; border-left: 1px solid var(--g-line) }

/* ---------- Tournament banner: tournament colour at 55% over the GAIM scene ---------- */
.banner { position: relative; overflow: hidden; color: #fff; padding: 24px 28px; display: flex; align-items: center; gap: 20px; min-height: 120px;
  background: color-mix(in srgb, var(--t-primary) 55%, transparent); border-bottom: 1px solid var(--g-line) }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 34px),
              linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)) }
.banner svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: calc(1 * var(--fx)) }
.banner > *:not(svg) { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .7) }
.flight { stroke: var(--g-mint); stroke-width: 2; fill: none; stroke-dasharray: 6 10; filter: drop-shadow(0 0 6px var(--g-mint));
  animation: roll 3.5s linear infinite }
@keyframes roll { to { stroke-dashoffset: -160 } }
.node { fill: var(--g-mint); filter: drop-shadow(0 0 6px var(--g-mint)) }
.ring { fill: none; stroke: var(--g-mint); stroke-opacity: .35 }
.contour { fill: none; stroke: var(--g-mint); stroke-opacity: .16 }
.tlogo { height: 56px; width: auto; background: #fff; border-radius: 8px; padding: 6px 10px }
.btitle { font-size: 24px; font-weight: 800 }
.bsub { color: var(--g-silver); margin-top: 3px }
.bstripe { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--t-accent); z-index: 2 }
.chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px; padding: 4px 11px; font-size: 12px; margin-top: 8px }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--t-accent) }
.chip.field .dot { background: var(--g-mint); box-shadow: 0 0 6px var(--g-mint) }
.chip.full_roster { border-style: dashed }
.chip.full_roster .dot { background: var(--g-muted) }
.banner .right { margin-left: auto; text-align: right; font-size: 12px; color: var(--g-silver); font-family: var(--mono);
  background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 6px 10px }

/* ---------- Model output head + tiles ---------- */
.tag { font-family: var(--mono); color: var(--g-mint); font-size: 12px; letter-spacing: 2px; text-shadow: 0 0 8px var(--g-glow) }
.outhead { margin: 4px 0 14px }
.outhead .tag { display: block }
.outhead .sub { color: var(--g-muted); font-size: 12.5px; margin-top: 4px }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.wrap > .tiles { margin-bottom: 24px }
.tile { position: relative; background: rgba(6, 18, 14, .78); backdrop-filter: blur(4px); border: 1px solid var(--g-line); border-radius: 12px; padding: 16px 18px; overflow: hidden }
.tile::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(46, 230, 166, .05) 0 1px, transparent 1px 22px),
              repeating-linear-gradient(0deg, rgba(46, 230, 166, .05) 0 1px, transparent 1px 22px) }
.tile .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--g-muted) }
.tile .v { font-size: 32px; font-weight: 800; margin-top: 8px; letter-spacing: -.5px; overflow-wrap: anywhere }
.tile .s { color: var(--g-muted); font-size: 12px; margin-top: 4px }
.tile.accent { border-color: var(--g-mint-dim); box-shadow: 0 0 24px rgba(46, 230, 166, .12) inset }
.tile.accent .v { color: var(--g-mint); text-shadow: 0 0 16px var(--g-glow) }
/* corner brackets */
.br { position: absolute; width: 12px; height: 12px; border-color: var(--g-mint); opacity: .7 }
.br.tl { top: 6px; left: 6px; border-top: 1px solid; border-left: 1px solid }
.br.tr { top: 6px; right: 6px; border-top: 1px solid; border-right: 1px solid }
.br.bl { bottom: 6px; left: 6px; border-bottom: 1px solid; border-left: 1px solid }
.br.brr { bottom: 6px; right: 6px; border-bottom: 1px solid; border-right: 1px solid }

/* ---------- Content ---------- */
.wrap { max-width: 1360px; margin: 0 auto; padding: 24px 28px 90px }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start }
.card { position: relative; background: var(--g-panel); backdrop-filter: blur(6px); border: 1px solid var(--g-line); border-radius: 14px; overflow: hidden }
.card::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(46, 230, 166, .6), transparent) }
.card h3 { margin: 0; padding: 15px 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--g-silver);
  border-bottom: 1px solid var(--g-line); display: flex; align-items: center; gap: 10px }
.card h3 .pfx { color: var(--g-mint) }
.card h3 .note { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--g-muted); font-weight: 400; font-family: var(--sans) }
.lbtools { padding: 10px 18px; border-bottom: 1px solid var(--g-line) }
.search { width: 240px; max-width: 100%; background: rgba(3, 9, 7, .9); border: 1px solid var(--g-line); color: var(--g-text); border-radius: 6px;
  padding: 7px 10px; font-size: 13px; font-family: var(--sans) }
.tblwrap { overflow-x: auto }

table { width: 100%; border-collapse: collapse }
thead th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--g-muted); text-align: right; font-weight: 600;
  padding: 10px; border-bottom: 2px solid var(--t-accent); white-space: nowrap }
thead th:nth-child(1), thead th:nth-child(2) { text-align: left }
thead th:not(:nth-child(-n+2)) { padding: 10px 7px }
tbody td { padding: 10px 7px; border-bottom: 1px solid rgba(22, 58, 47, .6); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap }
tbody td:nth-child(1), tbody td:nth-child(2) { text-align: left }
tbody td:nth-child(1), tbody td:nth-child(2) { padding-left: 10px }
tbody tr { transition: background .12s }
tbody tr:hover { background: rgba(46, 230, 166, .06); box-shadow: inset 3px 0 0 var(--g-mint) }
tbody tr.cutline:hover { background: none; box-shadow: none }
.rk { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: #12302a; color: var(--g-silver); font-family: var(--mono) }
.rk.top3 { background: var(--t-accent); color: var(--t-accent-text) }
.rk.top10 { background: var(--t-primary); color: #fff }
.pl { font-weight: 600 }
.pl small { display: flex; align-items: center; gap: 4px; color: var(--g-muted); font-weight: 400; font-size: 11.5px; margin-top: 2px }
.pl small img { width: 16px; height: 12px }
.score { font-weight: 800; font-size: 15px; font-family: var(--mono) }
.pos { color: var(--g-mint) } .neg { color: var(--g-neg) }
td.z { font-family: var(--mono); font-size: 12.5px }
/* The stat bar sits under its value so eight stat columns fit beside the weights panel. */
.bar { display: block; height: 3px; border-radius: 2px; margin: 4px 0 0 auto; opacity: .75 }
.bar.up { background: var(--g-mint) } .bar.down { background: var(--g-neg) }
.pill { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; font-family: var(--mono) }
.pill.ok { background: rgba(46, 230, 166, .14); color: var(--g-mint) }
.pill.warn { background: rgba(255, 196, 0, .12); color: #ffcc4d }
.cutline td { padding: 0; border: 0 }
.cutline div { margin: 4px 0; border-top: 1px dashed var(--g-mint-dim); color: var(--g-mint-dim); font-size: 11px; text-align: center; letter-spacing: 2px; padding-top: 4px; font-family: var(--mono) }
.empty { padding: 18px; color: var(--g-muted) }
.insuff { padding: 14px 18px; color: var(--g-muted); font-size: 12.5px; border-top: 1px solid var(--g-line); line-height: 1.6 }
.insuff b { color: var(--g-silver) }

/* ---------- Weights side panel ---------- */
.wlist { padding-top: 6px }
.wrow { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 7px 18px }
.wrow label { color: var(--g-silver) }
.wrow label small { color: var(--g-muted); margin-left: 6px; font-family: var(--mono); font-size: 10.5px }
/* Number pill + GAIM step buttons beside it (outside the pill). The pill's
   right padding leaves room for the caret after the digits. */
.wctl { display: flex; align-items: center; gap: 6px }
.wrow input { width: 52px; background: rgba(3, 9, 7, .9); border: 1px solid var(--g-line); color: var(--g-text); border-radius: 999px;
  padding: 5px 10px 5px 6px; text-align: right; caret-color: var(--g-mint); font-size: 13px; font-family: var(--mono) }
/* No native spinners on any number input in the editor. */
.wrow input::-webkit-inner-spin-button, .wrow input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.wrow input[type=number] { -moz-appearance: textfield; appearance: textfield }
.wstep { display: flex; flex-direction: column; gap: 2px }
.wstep button { width: 20px; height: 14px; padding: 0; display: grid; place-items: center; background: rgba(3, 9, 7, .9);
  border: 1px solid var(--g-line); border-radius: 4px; color: var(--g-mint); cursor: pointer; transition: .15s }
.wstep button:hover:not([disabled]) { border-color: var(--g-mint); box-shadow: 0 0 8px var(--g-glow) }
.wstep button[disabled] { opacity: .35; cursor: not-allowed }
.wstep svg { display: block }
.wrow input[aria-invalid=true] { border-color: var(--g-neg) }
.wrow.zero label { color: var(--g-muted) }
.wmeter { height: 3px; margin: 0 18px; background: rgba(46, 230, 166, .1); border-radius: 2px; overflow: hidden }
.wmeter i { display: block; height: 100%; background: var(--g-mint); box-shadow: 0 0 8px var(--g-mint) }
.wfoot { padding: 14px 18px; border-top: 1px solid var(--g-line); display: flex; flex-direction: column; gap: 10px }
.total { display: flex; justify-content: space-between; font-weight: 700; font-family: var(--mono) }
.total.bad { color: var(--g-neg) } .total.good { color: var(--g-mint) }
.wbtns { display: flex; flex-wrap: wrap; gap: 8px } .wbtns button { flex: 1 1 auto }
.hint { color: var(--g-muted); font-size: 11.5px }
.wstatus { color: var(--g-silver); font-size: 12px; font-family: var(--mono) }
.err { color: var(--g-neg); font-size: 12px }
.src { font-size: 11px; color: var(--g-muted); padding: 0 18px 12px; font-family: var(--mono) }

.footer { color: var(--g-muted); font-size: 12px; text-align: center; margin-top: 30px; font-family: var(--mono); line-height: 1.8 }
.footer p { margin: 0 }
.footer .copy { margin-top: 10px; color: var(--g-silver) }

/* ---------- Responsive ---------- */
@media (max-width: 1380px) {
  /* The wide local-only note gives way first; the live site shows the small avatar. */
  .localnote { display: none }
}
@media (max-width: 1100px) {
  .tagline { display: none }
}
@media (max-width: 980px) {
  .hdr { flex-wrap: wrap }
  .grid { grid-template-columns: 1fr }
  .tiles { grid-template-columns: repeat(2, 1fr) }
  .ctrl { margin-left: 0 }
  /* The header buttons + login note/avatar wrap instead of running off a phone screen. */
  .hacts { flex: 1 1 100%; flex-wrap: wrap }
  .banner { flex-wrap: wrap }
  .banner .right { margin-left: 0; text-align: left }
}

/* Reduced motion: no animations or transitions anywhere (effects.js also
   stops the rain loop and draws one static frame). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}