/* Six-pack trainer: instrument faces stay dark like a real panel in day and night themes. */
.sp-layout { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.sp-panel { padding: 14px; background: linear-gradient(180deg, #2a2f3a, #1b1f28); border-color: #11141b; position: sticky; top: calc(var(--bar) + 12px); }
.sp-six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sp-inst { position: relative; border-radius: 50%; transition: box-shadow .3s; }
.sp-inst svg { display: block; width: 100%; height: auto; }
.sp-inst.warn { box-shadow: 0 0 0 2px rgba(var(--amber-rgb), .55); }
.sp-inst.glow { animation: spGlow 1.4s ease-in-out infinite; }
@keyframes spGlow { 0%, 100% { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .6), 0 0 14px 4px rgba(var(--accent-rgb), .45); } 50% { box-shadow: 0 0 0 4px var(--amber), 0 0 26px 10px rgba(var(--accent-rgb), .75); } }
@media (prefers-reduced-motion: reduce) { .sp-inst.glow { animation: none; box-shadow: 0 0 0 4px var(--orange); } }
.sp-small { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; align-items: center; margin-top: 12px; }
.sp-small .sp-inst.sm { max-width: 120px; justify-self: center; width: 100%; }
.sp-annun { display: grid; grid-template-columns: 1fr; gap: 6px; }
.sp-annun span { padding: 6px 8px; border-radius: 4px; background: #11141b; border: 1px solid #333a47; color: #4a5263; font: 800 .78rem var(--display); letter-spacing: .08em; text-align: center; }
#spLowVac.on { color: #1b1300; background: var(--amber); border-color: var(--amber); box-shadow: 0 0 12px rgba(var(--amber-rgb), .6); }
#spVolts.on { color: #fff; background: var(--bad); border-color: var(--bad); box-shadow: 0 0 12px rgba(220, 38, 38, .6); }
#spHeat.on { color: #052e16; background: #4ade80; border-color: #4ade80; }
.sp-truthbox { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-s); background: rgba(255, 255, 255, .06); color: #cbd5e1; }
.sp-truthbox .eyebrow { color: #94a3b8; }
.sp-truth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sp-truth span { display: block; font-size: .72rem; color: #94a3b8; }
.sp-truth b { font: 800 1.15rem var(--display); color: #f8fafc; }
.sp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sp-side h3 { margin: 0 0 10px; }
.sp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.sp-row > .small.muted:first-child { width: 64px; }
.sp-row .btn { padding: 0 11px; min-width: 0; }
.sp-val { min-width: 54px; text-align: center; font: 800 1rem var(--display); }
.sp-chips { display: grid; grid-template-columns: 1fr; gap: 6px; }
.sp-why p { margin: 0 0 8px; font-size: .92rem; }
.sp-why p:last-child { margin: 0; }
/* instrument faces */
.sp-bezel { fill: #23272f; stroke: #11141b; stroke-width: 2; }
.sp-face { fill: #0b0d12; }
.sp-screw { fill: #3a404c; }
.sp-tick { stroke: #e5e7eb; stroke-width: 2; }
.sp-btick { stroke: #e5e7eb; stroke-width: 2.4; }
.sp-red { stroke: #ef4444; stroke-width: 5; }
.sp-num { fill: #f3f4f6; font-family: var(--display); font-weight: 700; text-anchor: middle; }
.sp-cap { fill: #9ca3af; font: 700 9px var(--display); letter-spacing: .1em; text-anchor: middle; }
.sp-capxs { font-size: 7.5px; }
.sp-arc { fill: none; stroke-width: 8; }
.sp-arc.white { stroke: #f3f4f6; stroke-width: 5; }
.sp-arc.green { stroke: #22c55e; }
.sp-arc.yellow { stroke: var(--amber); }
.sp-needle path { fill: #f9fafb; stroke: #0b0d12; stroke-width: .8; }
.sp-needle.thin path { fill: #e5e7eb; }
.sp-hub { fill: #2f3540; stroke: #555d6b; stroke-width: 1.5; }
.sp-window { fill: #f3f4f6; stroke: #555d6b; }
.sp-win { fill: #111; font: 700 11px var(--display); text-anchor: middle; }
.sp-sky { fill: #2e7bd6; }
.sp-ground { fill: #8b5a2b; }
.sp-horizon { stroke: #fff; stroke-width: 2; }
.sp-ladder { stroke: #fff; stroke-width: 1.5; }
.sp-skyptr { fill: #fff; }
.sp-bankidx { fill: var(--orange); }
.sp-mini { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sp-minidot { fill: var(--orange); }
.sp-tube { fill: none; stroke: #3a404c; stroke-width: 15; stroke-linecap: round; }
.sp-tubeline { stroke: #9ca3af; stroke-width: 1.2; }
.sp-ball { fill: #f9fafb; }
.sp-tcwing { stroke: #f9fafb; stroke-width: 5; stroke-linecap: round; fill: none; }
.sp-tcbody { fill: #f9fafb; }
.sp-flag rect { fill: #dc2626; }
.sp-flag text { fill: #fff; font: 800 9px var(--display); text-anchor: middle; }
.sp-lubber { stroke: var(--amber); stroke-width: 3; }
.sp-hiplane { fill: var(--orange); }
@media (max-width: 980px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-panel { position: static; }
}
@media (max-width: 520px) {
  .sp-six { grid-template-columns: repeat(2, 1fr); }
  .sp-truth { grid-template-columns: repeat(2, 1fr); }
}
.sp-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sp-fr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(170px, 1fr); gap: 16px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.sp-grid label.check { padding: 6px 10px; font-size: .88rem; }
.sp-rem { display: flex; flex-direction: column; gap: 6px; }
.sp-rem > .btn { justify-content: flex-start; }
.sp-rem .btn[aria-pressed="true"] { background: var(--good-soft); color: var(--good); border-color: var(--good); }
@media (max-width: 1200px) { .sp-fr { grid-template-columns: 1fr; } .sp-rem { flex-direction: row; flex-wrap: wrap; } }
.sp-whycard h3 { margin: 0 0 8px; }
.sp-list { display: flex; flex-direction: column; gap: 6px; }
.sp-item > .check, .sp-item > .btn { width: 100%; justify-content: flex-start; }
.sp-note { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease, margin .3s ease; margin: 0 4px; }
.sp-note > * { overflow: hidden; }
.sp-note.on { grid-template-rows: 1fr; margin: 6px 4px 8px; }
.sp-note p { margin: 0; padding: 8px 12px; border-left: 3px solid var(--orange); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--orange-soft); font-size: .88rem; color: var(--ink); }
.sp-note p + p { margin-top: 4px; }
.sp-note[data-note="none"] p { border-left-color: var(--good); background: var(--good-soft); }
.sp-note[data-note="altStatic"] p, .sp-note[data-note="heat"] p, .sp-note[data-note="glass"] p { border-left-color: #0891b2; background: rgba(34, 211, 238, .1); }

/* ---------- display toggle and the dual Garmin G5 ---------- */
.sp-disp { display: inline-flex; margin: 0 0 12px; padding: 3px; border-radius: 99px; background: #11141b; border: 1px solid #333a47; }
.sp-disp button { height: 30px; padding: 0 14px; border: 0; border-radius: 99px; background: none; color: #9ca3af; font: 700 .85rem var(--ui); cursor: pointer; }
.sp-disp button[aria-pressed="true"] { background: var(--sunrise); color: #fff; box-shadow: 0 3px 10px rgba(var(--accent-rgb), .35); }
.g5-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.g5-unit { width: min(100%, 340px); border-radius: 18px; transition: box-shadow .3s; }
.g5-unit svg { display: block; width: 100%; height: auto; }
.g5-unit.warn { box-shadow: 0 0 0 2px rgba(var(--amber-rgb), .55); }
.g5-unit.glow { animation: spGlow 1.4s ease-in-out infinite; }
.g5-bezel { fill: #15171c; stroke: #050608; stroke-width: 2; }
.g5-glass { fill: #000; }
.g5-off { fill: #000; }
.g5-brand { fill: #9aa0aa; font: 700 9px Arial, sans-serif; letter-spacing: .25em; text-anchor: middle; }
.g5-knob { fill: #2a2d33; stroke: #0b0c0f; stroke-width: 2; }
.g5-knob2 { fill: #1d2025; stroke: #3a3e46; stroke-width: 1; }
.g5-pwr { fill: #2a2d33; stroke: #0b0c0f; }
.g5-sensor { fill: #2a2d33; }
.g5-sky { fill: #2f6fd8; }
.g5-gnd { fill: #8a5a24; }
.g5-hor { stroke: #fff; stroke-width: 1.5; }
.g5-ladder { stroke: #fff; stroke-width: 1.2; }
.g5-lad { fill: #fff; font: 700 8px Arial, sans-serif; }
.g5-roll { stroke: #fff; stroke-width: 1.6; }
.g5-rollarc { fill: none; stroke: #fff; stroke-width: 1.2; }
.g5-zero, .g5-ptr { fill: #fff; }
.g5-slip { fill: #fff; }
.g5-sym { fill: none; stroke: #fde047; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 1px #000); }
.g5-tapebg { fill: rgba(40, 44, 52, .62); }
.g5-tk { stroke: #fff; stroke-width: 1.1; }
.g5-tkw { stroke: #fff; stroke-width: 1.5; }
.g5-tape { fill: #fff; font: 700 9px Arial, sans-serif; }
.g5-hdgl { fill: #fff; font: 700 8px Arial, sans-serif; text-anchor: middle; }
.g5-box { fill: #000; stroke: #fff; stroke-width: 1.2; }
.g5-read { fill: #fff; font: 700 12px Arial, sans-serif; }
.g5-small { fill: #fff; font: 700 8.5px Arial, sans-serif; }
.g5-cyan { fill: #22d3ee; font: 700 9px Arial, sans-serif; }
.g5-green { fill: #22c55e; font: 700 9px Arial, sans-serif; }
.g5-msg { fill: #fff; font: 700 10px Arial, sans-serif; }
.g5-red { fill: #e11d1d; } .g5-white { fill: #fff; } .g5-green { fill: #16a34a; } .g5-yellow { fill: var(--amber); }
text.g5-green { fill: #22c55e; }
.g5-trend { fill: var(--amber); }
.g5-vsi { fill: #fff; }
.g5-selbug { fill: #22d3ee; }
.g5-bug { fill: #22d3ee; }
.g5-cdiscale { stroke: #fff; stroke-width: 1; }
.g5-dot { fill: none; stroke: #fff; stroke-width: 1.2; }
.g5-cdivor, .g5-crsvor { fill: #22c55e; }
.g5-card { fill: #fff; font: 700 12px Arial, sans-serif; text-anchor: middle; }
.g5-plane { fill: #fff; }
.g5-x { stroke: #e11d1d; stroke-width: 5; }
.g5-fail { fill: var(--amber); font: 800 13px Arial, sans-serif; text-anchor: middle; paint-order: stroke; stroke: #000; stroke-width: 3px; }
.g5-batbg { fill: #000; stroke: #555; }
.g5-batic { fill: none; stroke: #fff; stroke-width: 1; }
.g5-batfill { fill: #22c55e; }
.g5-reg { fill: none; stroke: none; }
.g5-reg.warn { stroke: rgba(var(--amber-rgb), .9); stroke-width: 2; }
.g5-reg.glow { stroke: var(--orange); stroke-width: 3; animation: g5Glow 1.2s ease-in-out infinite; filter: drop-shadow(0 0 4px var(--orange)); }
@keyframes g5Glow { 0%, 100% { stroke-opacity: .55; } 50% { stroke-opacity: 1; } }
.sp-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; position: relative; z-index: 5; }
.sp-panel.night { cursor: none; }
.sp-panel.night .sp-toggles, .sp-panel.night .sp-truthbox { cursor: auto; }
.sp-tint { position: absolute; border-radius: inherit; mix-blend-mode: multiply; pointer-events: none; z-index: 3; }
.sp-night { position: absolute; border-radius: inherit; pointer-events: none; z-index: 4; }

/* ---------- G1000 and Avidyne glass panels ---------- */
.sp-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.sp-toggles .sp-disp { flex-wrap: wrap; margin: 0; border-radius: 16px; }
.gl-wrap { display: flex; flex-direction: column; gap: 10px; }
.gl-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.gl-unit { border-radius: 14px; transition: box-shadow .3s; }
.gl-unit svg { display: block; width: 100%; height: auto; }
.gl-unit.warn { box-shadow: 0 0 0 2px rgba(var(--amber-rgb), .55); }
.gl-unit.glow { animation: spGlow 1.4s ease-in-out infinite; }
.gl-stby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-items: center; }
.gl-stby > span { grid-column: 1 / -1; color: #9ca3af; font: 700 .7rem var(--display); letter-spacing: .1em; text-transform: uppercase; }
.gl-wrap > .gl-stby { max-width: 360px; margin: 0 auto; width: 100%; }
.gl-bezel { fill: #3b3f46; stroke: #15171b; stroke-width: 2; }
.av-bezel { fill: #1d1f24; stroke: #08090b; stroke-width: 2; }
.gl-screen { fill: #000; }
.gl-brand { fill: #b8bdc6; font: 700 8px Arial, sans-serif; letter-spacing: .12em; }
.gl-bar { fill: #0d1015; }
.gl-nav { fill: #e5e7eb; font: 700 8.5px Arial, sans-serif; }
.gl-nav .gl-green, .gl-green { fill: #22c55e; }
.gl-cyanb { fill: #22d3ee; }
.gl-soft { fill: #e5e7eb; font: 700 7px Arial, sans-serif; }
.gl-annbg { fill: #05070a; stroke: #4b5563; stroke-width: 1; }
.gl-annr { fill: #ef4444; font: 800 9px Arial, sans-serif; }
.gl-anny { fill: var(--amber); font: 800 9px Arial, sans-serif; }
.gl-red { fill: var(--bad); }
.gl-ybus { fill: var(--amber); }
.gl-vref { fill: #22d3ee; font: 700 7px Arial, sans-serif; }
.gl-vsit { fill: #fff; font: 700 7px Arial, sans-serif; }
.gl-trend-b { fill: #38bdf8; }
.gl-delta { fill: var(--amber); stroke: #000; stroke-width: .8; }
.gl-lower { fill: #000; }
.gl-hsibg { fill: rgba(0, 0, 0, .55); }
.gl-crs { fill: var(--amber); }
.gl-eis { fill: #0b0e13; stroke: #333; }
.gl-map { fill: #1f3b22; }
.gl-lake { fill: #1e40af; opacity: .8; }
@media (max-width: 520px) { .gl-row { grid-template-columns: 1fr; } }
.sp-panel.tall { position: relative; top: auto; }