/* Golf Cart Training Center lab frame theme (Release 3a): the navy/white "manufacturer training" look
   for the training labs (tools, brakes, dc-motor, ac-motor, lithium, gas-engine).
   Everything is scoped under body.lab so core.css (and the hub, which also loads it) is untouched.
   Only the FRAME changes: menu rail, tool-window chrome, Pete, modal, toast, buttons.
   The work areas (stage SVGs, gauges, LCDs, canvases, the meter, the BMS phone) stay dark on purpose,
   like OEM diagnostic software, so wires and glowing circuits stay readable.
   2026-10 rebrand: the old variable names point at /shared/brand-tokens.css (loaded first). */
body.lab{--navy:var(--gct-navy,#0B1F33); --navy2:var(--gct-navy-2,#132B44); --volt:var(--gct-electric-blue,#3FA9F5); --green:var(--gct-tech-blue,#1468B0); --green-d:var(--gct-tech-blue-hover,#0F5390);
  --paper:var(--gct-paper,#F4F6F8); --line:var(--gct-line,#DDE3EA); --gold:var(--gct-signal-yellow,#FFC72C); --mut-dark:var(--gct-text-on-dark-muted,#B7C4D4); --tint:#E8F1FA;
  --lab-ink:var(--gct-ink,#111820); --lab-mut:var(--gct-steel-grey,#5F6B78);
  --lab-font:var(--font-body,"Barlow","Helvetica Neue",Arial,sans-serif); --lab-head:var(--font-heading,"Barlow Condensed","Arial Narrow",sans-serif);}

/* ---------------- menu rail: white, navy header block ---------------- */
body.lab #menu{background:#fff; color:var(--lab-ink); border-right:1px solid var(--line); padding-top:0;
  box-shadow:1px 0 0 rgba(11,31,51,.04);}
body.lab #menu, body.lab #menu *{font-family:var(--lab-font);}
body.lab #menu .labbrand{display:flex; align-items:center; gap:10px; background:var(--navy); padding:12px 14px 10px;
  text-decoration:none; color:var(--mut-dark); font-family:var(--lab-head) !important; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; line-height:1.25;
  border-bottom:1px solid rgba(255,255,255,.08);}
body.lab #menu .labbrand img{flex:none; display:block; width:36px; height:36px;}
body.lab #menu .labbrand:hover{color:#fff;}
body.lab #menu .labbrand:focus-visible{outline:2px solid var(--volt); outline-offset:-2px;}
body.lab #menu h1{background:var(--navy); color:#fff; margin:0; padding:12px 14px 2px; font-family:var(--lab-head); font-size:19px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase; line-height:1.05;}
body.lab #menu .logo{width:26px; height:26px; border-radius:4px; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  font-size:14px; font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;}
body.lab #menu .sub{background:var(--navy); color:var(--mut-dark); font-size:11.5px; font-weight:500; line-height:1.45;
  padding:2px 14px 13px; border-bottom:3px solid var(--volt);}
body.lab .mlabel{color:var(--lab-mut); font-family:var(--lab-head) !important; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:16px 16px 5px;}
body.lab .mbtn{color:var(--lab-ink); font-size:13px; font-weight:600; border-radius:4px; padding:7px 10px; margin:1px 8px; width:calc(100% - 16px);
  border-left:3px solid transparent; transition:background .12s, color .12s;}
body.lab .mbtn .ic{font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;}
body.lab .mbtn:hover{background:var(--paper); color:var(--navy);}
body.lab .mbtn.open{background:var(--tint); color:var(--green-d); border-left-color:var(--green);}
body.lab .mbtn:focus-visible{outline:2px solid var(--green); outline-offset:-2px;}
body.lab .mbtn.done .ic::after{color:var(--green);}
body.lab #menu .foot{color:var(--lab-mut); font-size:11px; font-weight:500; border-top:1px solid var(--line); background:var(--paper); padding:12px 14px 14px;}
body.lab #menu .labdef{margin-top:7px; font-size:10px; line-height:1.45; color:var(--lab-mut);}

/* ---------------- tool windows: navy title bar, white body ---------------- */
body.lab .win{background:#fff; border-radius:6px; border:1px solid #c8d2dd;
  box-shadow:0 18px 46px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.25);}
body.lab .win > .bar{background:var(--navy); color:#fff; font-family:var(--lab-font); font-size:14px; font-weight:700; letter-spacing:.3px;
  padding:8px 10px 8px 13px; border-bottom:3px solid var(--volt);}
body.lab .win > .bar .x, body.lab .win > .bar .mn{background:rgba(255,255,255,.1); color:#fff; border-radius:4px; font-family:var(--lab-font);}
body.lab .win > .bar .mn:hover{background:var(--navy2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}
body.lab .win > .bar .x:hover{background:#c92a2a;}
body.lab .win > .body{background:#fff; color:var(--lab-ink);}
body.lab .complabel{color:var(--lab-mut);}
body.lab .spec{background:#f1f6fc; border-left-color:var(--navy2);}

/* ---------------- buttons: flat, Tech Blue primary (Barlow Condensed caps) ---------------- */
body.lab .btn{background:var(--green); color:#fff; border-radius:6px; box-shadow:none; font-family:var(--lab-head);
  font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; transition:background .15s, transform .1s;}
body.lab .btn:hover{background:var(--green-d); filter:none;}
body.lab .btn:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
body.lab .btn.gray{background:#e9edf2; color:var(--navy); box-shadow:inset 0 0 0 1px #9AA6B2;}
body.lab .btn.gray:hover{background:#dde3ea;}
body.lab .btn.gold{background:var(--navy); color:#fff; box-shadow:none;}
body.lab .btn.gold:hover{background:var(--navy2);}
body.lab .btn.redb{background:#c92a2a; color:#fff;}
body.lab .btn.redb:hover{background:#a51f1f;}
body.lab .btn.small{font-size:13px;}
body.lab .btn:disabled, body.lab .btn:disabled:hover{background:#d3d9e0; color:var(--lab-mut); box-shadow:none; transform:none;}
/* the meter's own button sits on the dark meter body */
body.lab #dmmshell .btn.gray{background:#4a525c; color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);}
body.lab #dmmshell .btn.gray:hover{background:#59626d;}

/* ---------------- Pete: white card with a navy header strip ---------------- */
body.lab #guide{background:#fff; backdrop-filter:none; border:1px solid #c8d2dd; border-radius:6px; padding:42px 14px 12px 12px;
  box-shadow:0 14px 38px rgba(0,0,0,.45);}
body.lab #guideavatar{border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line);}
body.lab #guidename{position:absolute; left:0; right:0; top:0; height:32px; margin:0; padding:9px 40px 0 13px; box-sizing:border-box;
  background:var(--navy); border-bottom:3px solid var(--volt); border-radius:5px 5px 0 0;
  color:#fff; font-family:var(--lab-head); font-size:13px; font-weight:700; letter-spacing:.1em;}
body.lab #guidename span{color:var(--mut-dark); letter-spacing:.6px;}
body.lab #guidename #guidevoice{margin-top:-4px; color:#fff;}
/* Pete voice button (core.js injects a gold-bordered style; on the navy strip it is Electric Blue) */
body.lab .pvbtn{border-color:rgba(63,169,245,.55) !important;}
body.lab .pvbtn:hover, body.lab .pvbtn.talking{border-color:var(--volt) !important; box-shadow:0 0 0 2px rgba(63,169,245,.25);}
body.lab .pvbtn.blocked{animation:gctpvblink 1.1s ease-in-out infinite;}
@keyframes gctpvblink{50%{box-shadow:0 0 0 4px rgba(63,169,245,.55);}}
body.lab #guidetext{color:var(--lab-ink); font-size:13px; line-height:1.55;}
body.lab #guidetext b{color:var(--navy);}
body.lab #guidetext .term{color:var(--green); border-bottom-color:var(--green);}
body.lab #guideend{top:4px; right:4px; z-index:1; width:32px; height:28px; color:var(--mut-dark); border-radius:4px; font-size:13px;}
body.lab #guideend:hover{color:#fff; background:rgba(255,255,255,.12);}

/* ---------------- modal ---------------- */
body.lab #modalveil{background:rgba(11,31,51,.62);}
body.lab #modal{border-radius:6px; border-top:4px solid var(--navy); color:var(--lab-ink); box-shadow:0 24px 70px rgba(0,0,0,.5);}
body.lab #modal h2{color:var(--navy); font-family:var(--lab-head); font-size:24px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; line-height:1.05;}
body.lab .scoreline{border-bottom-color:var(--line);}
body.lab .scorebig{color:var(--green); font-family:var(--lab-head); text-shadow:none;}

/* ---------------- toast, glossary, zoom, hamburger ---------------- */
body.lab #hud{border-left:3px solid var(--volt);}
body.lab #hud b{color:var(--volt);}
body.lab #toast{background:var(--navy); backdrop-filter:none; border:1px solid rgba(255,255,255,.12); border-left:4px solid var(--volt);
  border-radius:6px; font-family:var(--lab-font); font-size:14px; font-weight:600;}
body.lab #termpop{background:#fff; color:var(--lab-ink); border:1px solid #c8d2dd; border-top:4px solid var(--navy); border-radius:6px;
  box-shadow:0 12px 32px rgba(0,0,0,.4);}
body.lab #termpop b{color:var(--navy); font-family:var(--lab-head); font-size:14px;}
body.lab #termpop .tclose{color:var(--lab-mut);}
body.lab #termpop .tclose:hover{color:var(--lab-ink);}
body.lab #zoomctl button{background:rgba(11,31,51,.88); border:1px solid rgba(255,255,255,.18); border-radius:6px; color:#fff;}
body.lab #zoomctl button:hover{background:var(--navy2);}
body.lab #hamb{background:var(--navy); border:1px solid rgba(255,255,255,.2); border-radius:6px;}

/* ---------------- phones ---------------- */
@media (max-width:760px){
  body.lab #menu{box-shadow:12px 0 30px rgba(0,0,0,.45);}
  body.lab .mbtn{min-height:44px; font-size:14px;}
  body.lab #hamb{width:44px; height:44px; top:8px; left:8px;}
  body.lab #mobilebar{background:#fff; border-top:1px solid var(--line); box-shadow:0 -4px 14px rgba(11,31,51,.12);}
  body.lab #mobilebar .nbtn{color:var(--lab-ink); font-family:var(--lab-head); font-size:12px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; min-height:44px;}
  body.lab #mobilebar .nbtn.open{color:var(--green-d); box-shadow:inset 0 3px 0 var(--green); background:var(--tint);}
  body.lab .win{border-radius:8px 8px 0 0;}
  body.lab .win > .bar{padding:2px 2px 2px 14px; min-height:48px;}
  body.lab .win > .bar .x, body.lab .win > .bar .mn{min-width:44px; min-height:44px; font-size:15px;}
  body.lab .btn{min-height:44px;}
  body.lab .tp{min-height:44px; display:inline-flex; align-items:center;}
  body.lab #guide{padding:56px 10px 9px 10px;}
  body.lab #guidename{height:48px; display:flex; align-items:center; gap:6px; padding:0 48px 0 12px;}
  body.lab #guidename #guidevoice{float:none; margin:0 0 0 auto; min-width:44px; height:44px; font-size:15px;}
  body.lab #guideend{width:46px; height:48px; top:0; right:0; font-size:15px;}
  body.lab #guidetext{font-size:12px; line-height:1.5;}
  body.lab #hud{padding-left:60px; min-height:44px;}
  body.lab #zoomctl{bottom:66px;}
  body.lab #zoomctl button{width:44px; height:44px;}
  body.lab #modal .btn{min-height:44px;}
}

/* the Basics certificate still prints on white (tools): nothing of the frame prints */
@media print{
  body.lab{background:#fff !important;}
}