/* Golf Cart Training Center — shared engine styles. 2026-10 rebrand: greens -> Tech Blue tokens, yellows -> Signal Yellow,
   Barlow body font (load /shared/brand-tokens.css first).
   Copied/adapted from the TXT48 simulator (v5.1) so every module keeps the
   same look: dark shop stage, light tool windows, Pete's guide bubble. */
:root{
  --bg:#12171f;
  --accent:var(--gct-tech-blue,#1468B0); --accent2:var(--gct-tech-blue,#1468B0); --accent-d:var(--gct-tech-blue-hover,#0F5390);
  --gold:var(--gct-signal-yellow,#FFC72C);
  --panel:#f6f8fa; --panel-dark:#252f3f;
  --ink:var(--gct-ink,#111820); --mut:var(--gct-steel-grey,#5F6B78);
  --red:#d6453d; --blk:#20242a; --warn:#e8790c;
  --menu:#1a222e;
}
*{box-sizing:border-box; margin:0; padding:0; font-family:var(--font-body,"Barlow","Helvetica Neue",Arial,sans-serif);}
html,body{height:100%; overflow:hidden; background:var(--bg);}

::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-thumb{background:#9aa9ba; border-radius:8px; border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-track{background:transparent;}

/* ---------- stage ---------- */
#stage{position:relative; overflow:hidden; background:
  radial-gradient(1100px 480px at 62% 30%, #35435644 0%, transparent 60%),
  linear-gradient(#232d3b 0%, #283344 56%, #313d4d 100%);}
#toast{position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(15,22,32,.92); backdrop-filter:blur(6px); color:#fff; padding:10px 20px; border-radius:22px; font-size:13px; opacity:0; transition:opacity .3s; pointer-events:none; max-width:70%; border:1px solid rgba(255,255,255,.1); box-shadow:0 6px 22px rgba(0,0,0,.45); z-index:65;}
#hud{position:absolute; top:12px; left:14px; color:#d5e2f2; font-size:12px; background:rgba(13,19,28,.66); backdrop-filter:blur(6px); padding:9px 13px; border-radius:11px; max-width:470px; line-height:1.55; border:1px solid rgba(255,255,255,.07); box-shadow:0 4px 18px rgba(0,0,0,.35); z-index:16;}
#hud b{color:var(--gold);}

/* hotspots on stage SVGs */
.hotspot{cursor:pointer;}
.hotspot .hittarget{fill:transparent; stroke:transparent; transition:fill .15s;}
.hotspot:hover .hittarget{fill:rgba(255,199,44,.13); stroke:var(--gold); stroke-width:1.6; stroke-dasharray:5 4;}
.hotdot{fill:var(--gold); opacity:.9; pointer-events:none;}
.hotring{fill:none; stroke:var(--gold); stroke-width:1.6; pointer-events:none; animation:hpulse 2.4s ease-out infinite;}
@keyframes hpulse{0%{r:4px; opacity:.75;} 70%{r:13px; opacity:0;} 100%{r:13px; opacity:0;}}
.hotspot:hover .hotring{animation-play-state:paused; opacity:0;}
.hotlabel{font-size:12.5px; font-weight:600; fill:#fff; opacity:0; pointer-events:none; paint-order:stroke; stroke:#0d1219; stroke-width:3.5px; stroke-linejoin:round; transition:opacity .15s;}
.hotspot:hover .hotlabel{opacity:1;}
/* the part the current lesson step is asking for */
.hotspot.focus .hittarget{fill:rgba(255,199,44,.16); stroke:var(--gold); stroke-width:2; stroke-dasharray:6 4; animation:hfocus 1.2s ease-in-out infinite;}
.hotspot.focus .hotlabel{opacity:1;}
@keyframes hfocus{50%{fill:rgba(255,199,44,.30);}}

/* ---------- windows ---------- */
.win{position:absolute; background:var(--panel); border-radius:12px; box-shadow:0 14px 44px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); min-width:190px; max-height:84vh; display:none; z-index:20; border:1px solid rgba(255,255,255,.35); overflow:hidden; resize:both;}
.win.show{display:flex; flex-direction:column;}
.win.min{resize:none; min-height:0; height:auto !important;}
.win.min .body{display:none;}
.winctl{display:flex; gap:6px; align-items:center;}
.win .bar{background:linear-gradient(180deg,#303c50,#232c3c); color:#fff; padding:8px 13px; font-size:13px; font-weight:600; cursor:move; display:flex; justify-content:space-between; align-items:center; user-select:none; -webkit-user-select:none; touch-action:none; letter-spacing:.2px; border-bottom:2px solid var(--accent);}
.win .bar .x, .win .bar .mn{cursor:pointer; background:rgba(255,255,255,.08); border:none; color:#dbe4ef; font-size:13px; padding:2px 8px; border-radius:6px; transition:background .15s;}
.win .bar .x:hover{background:var(--red); color:#fff;}
.win .bar .mn:hover{background:#3d5273; color:#fff;}
.win .body{padding:13px; font-size:13px; color:var(--ink); flex:1 1 auto; overflow-y:auto;}

.btn{background:linear-gradient(180deg,var(--accent2),var(--accent-d)); color:#fff; border:none; padding:7px 13px; border-radius:7px; font-size:12.5px; font-weight:600; cursor:pointer; margin:3px 3px 3px 0; box-shadow:0 2px 6px rgba(20,104,176,.35); transition:transform .1s, filter .15s;}
.btn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn.gray{background:linear-gradient(180deg,#77879c,#5b6b80); box-shadow:0 2px 6px rgba(0,0,0,.25);}
.btn.redb{background:linear-gradient(180deg,#e0554d,#b93831);}
.btn.small{padding:4px 9px; font-size:11.5px;}
.btn:disabled{background:#aab4bf; box-shadow:none; cursor:default;}
.btn.gold{background:var(--gct-signal-yellow,#FFC72C); color:var(--gct-navy,#0B1F33); box-shadow:0 2px 6px rgba(255,199,44,.4);}

/* test-point chips + probe select (meter interaction) */
.tp{display:inline-block; background:#eaeff5; border:1px solid #a9b8c9; border-radius:14px; padding:4px 10px 4px 8px; margin:3px 4px 3px 0; font-size:11.5px; cursor:pointer; user-select:none; transition:background .12s, transform .1s;}
.tp::before{content:'◉ '; color:#8496aa; font-size:9px;}
.tp:hover{background:#d8e2ec; transform:translateY(-1px);}
.tp.redp{outline:2px solid var(--red); background:#fdeceb;}
.tp.redp::before{color:var(--red);}
.tp.blkp{outline:2px solid var(--blk); background:#e8eaed;}
.tp.blkp::before{color:var(--blk);}
.complabel{font-size:10.5px; color:var(--mut); margin-top:9px; letter-spacing:.8px; font-weight:700;}
.pselect{border:none; border-radius:11px; padding:3px 10px; font-size:10px; font-weight:700; cursor:pointer; color:#fff; opacity:.55; margin-right:4px;}
.pselect.psr{background:linear-gradient(180deg,#e0554d,#b02e27);}
.pselect.psb{background:linear-gradient(180deg,#3a414b,#1c2127);}
.pselect.on{opacity:1; outline:2px solid var(--gold); outline-offset:1px;}
.spec{background:#eef5ff; border-left:3px solid #4a90d9; padding:7px 10px; margin:7px 0; font-size:12px; border-radius:0 6px 6px 0;}

/* ---------- DMM ---------- */
.dmmbody{padding:10px 12px 12px;}
#dmmshell{background:linear-gradient(180deg,#3a4149,#262c33); border:3px solid #e8b21f; border-radius:14px; padding:12px 12px 10px; box-shadow:0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);}
#dmmlcd{background:linear-gradient(180deg,#b9c9b1,#cfdcc4); border:2px solid #171c21; border-radius:6px; padding:6px 10px 8px; box-shadow:inset 0 2px 8px rgba(20,30,20,.35); font-family:Consolas,monospace; color:#1c2a1c; min-height:64px;}
#dmmann{display:flex; justify-content:space-between; font-size:10px; font-weight:700; letter-spacing:1px; color:#33452f;}
#dmmread{font-size:32px; text-align:right; letter-spacing:2px; line-height:1.2; min-height:38px;}
#dialwrap{display:flex; justify-content:center; margin:12px 0 4px;}
#dialring{position:relative; width:126px; height:118px;}
#dialknob{position:absolute; left:50%; top:50%; width:62px; height:62px; margin:-31px 0 0 -31px; border-radius:50%; background:radial-gradient(circle at 38% 30%, #4e565f, #22272d 72%); border:2px solid #14181d; transition:transform .18s; box-shadow:0 3px 9px rgba(0,0,0,.5);}
#dialmark{position:absolute; left:50%; top:3px; width:5px; height:15px; margin-left:-2.5px; background:#e8b21f; border-radius:3px;}
.dialpos{position:absolute; left:50%; top:50%; width:46px; height:24px; margin:-12px 0 0 -23px; transform:rotate(var(--a)) translateY(-50px) rotate(calc(var(--a) * -1)); background:none; border:none; color:#c3cedb; font-size:11px; font-weight:700; cursor:pointer; border-radius:6px; padding:2px;}
.dialpos:hover{color:#fff; background:rgba(255,255,255,.07);}
.dialpos.on{color:var(--gold);}
#jacks{display:flex; justify-content:center; gap:24px; margin-top:6px;}
.jackcol{text-align:center; max-width:118px;}
.jack{width:26px; height:26px; border-radius:50%; border:4px solid #14181d; cursor:pointer; box-shadow:inset 0 0 0 3px #0c0f12;}
.jack.red{background:#c0392f;} .jack.blk{background:#20242a;}
.jack.sel{outline:3px solid var(--gold); outline-offset:2px;}
.jlab{font-size:9px; color:#aeb9c6; letter-spacing:1px; margin-top:3px; font-weight:700;}
.jinfo{font-size:10px; color:var(--gct-text-on-dark-muted,#B7C4D4); min-height:26px; line-height:1.25; margin-top:2px;}
.dmmhint{font-size:10.5px; color:#9fb0c2; margin-top:9px; line-height:1.45;}

/* ---------- modal ---------- */
#modalveil{position:fixed; inset:0; background:rgba(8,12,18,.66); backdrop-filter:blur(3px); display:none; z-index:70; align-items:center; justify-content:center;}
#modalveil.show{display:flex;}
#modal{background:#fff; border-radius:14px; max-width:560px; width:92%; max-height:85vh; overflow-y:auto; padding:24px; box-shadow:0 24px 70px rgba(0,0,0,.55);}
#modal h2{font-size:18px; margin-bottom:10px; color:#20303f;}
.scoreline{display:flex; justify-content:space-between; font-size:13px; padding:5px 0; border-bottom:1px dotted #ccd5df;}
.scorebig{font-size:46px; font-weight:800; color:var(--accent); text-align:center; margin:10px 0; text-shadow:none;}

/* ---------- Pete guide bubble ---------- */
#guide{display:none; position:absolute; left:14px; bottom:14px; z-index:25; max-width:440px; background:rgba(13,19,28,.93); backdrop-filter:blur(6px); border:1px solid rgba(255,199,44,.4); border-radius:14px; padding:12px 30px 12px 14px; gap:11px; box-shadow:0 8px 26px rgba(0,0,0,.5); align-items:flex-start;}
#guide.show{display:flex;}
#guideavatar{width:56px; height:56px; flex:none; animation:guidebob 3s ease-in-out infinite;}
@keyframes guidebob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
#guidename{font-size:10px; letter-spacing:1.4px; color:var(--gold); font-weight:700; margin-bottom:4px;}
#guidename span{color:#8fa8c0; letter-spacing:.5px;}
#guidebox{flex:1;}
#guidebox.pop{animation:guidepop .25s ease-out;}
@keyframes guidepop{0%{transform:scale(.97); opacity:.5;}100%{transform:scale(1); opacity:1;}}
#guidetext{font-size:12.5px; color:var(--gct-text-on-dark-muted,#B7C4D4); line-height:1.55;}
#guidetext b{color:#fff;}
#guidenext{margin-top:8px;}
#guideend{position:absolute; top:6px; right:8px; background:none; border:none; color:#7d93ab; cursor:pointer; font-size:12px;}
#guideend:hover{color:#fff;}

/* ---------- glossary term bubbles ---------- */
.term{font-style:normal; font-weight:inherit; border-bottom:1.5px dotted currentColor; cursor:help;}
#guidetext .term, .dmmhint .term{color:var(--gold);}
.win .body .term, #modal .term, .spec .term{color:var(--accent);}
#termpop{position:fixed; z-index:95; max-width:280px; background:rgba(13,19,28,.97); border:1px solid rgba(255,199,44,.5); border-radius:11px; padding:10px 13px; color:var(--gct-text-on-dark-muted,#B7C4D4); font-size:12.5px; line-height:1.55; box-shadow:0 10px 30px rgba(0,0,0,.6); display:none;}
#termpop.show{display:block;}
#termpop b{color:var(--gold);}
#termpop .tclose{position:absolute; top:4px; right:7px; background:none; border:none; color:#7d93ab; cursor:pointer; font-size:11px;}

/* pan/zoom targets + zoom controls */
.pz{touch-action:none; cursor:grab;}
.pz:active{cursor:grabbing;}
#zoomctl{position:absolute; right:12px; bottom:14px; display:flex; flex-direction:column; gap:6px; z-index:15;}
#zoomctl button{width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(15,22,32,.78); color:var(--gct-text-on-dark-muted,#B7C4D4); font-size:17px; cursor:pointer; backdrop-filter:blur(4px);}
#zoomctl button:hover{background:rgba(40,53,74,.9);}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .win{position:fixed !important; left:0 !important; right:0 !important; top:auto !important; bottom:0 !important; width:100% !important; max-width:100vw; min-width:0; border-radius:16px 16px 0 0; z-index:45; resize:none;}
  .win .body{max-height:52vh; padding:12px 14px;}
  .win .bar{cursor:default; padding:10px 14px; touch-action:auto;}
  .btn{padding:9px 14px; font-size:13px;}
  .tp{padding:7px 11px; font-size:12.5px;}
  #guide{left:6px; right:6px; top:62px; bottom:auto; max-width:none; padding:9px 26px 9px 11px;}
  #guideavatar{width:44px; height:44px;}
  #guidetext{font-size:11.5px;}
  #modal{padding:16px;}
  #hud{left:8px; right:8px; top:8px; max-width:none; font-size:10.5px; padding:6px 10px;}
}