/* scout.css — Scout Analysis + the badge system.
   Append to ui.css or load after it. Everything is scoped to #v-scout
   except .bdg / .gloss, which are global so badges work on every view. */

/* ---------------------------------------------------------- badges */
.bdg{position:relative;display:inline-flex;align-items:center;gap:4px;
 font-family:'DM Mono',monospace;font-size:8.5px;letter-spacing:.05em;
 padding:2.5px 7px 2.5px 5px;border-radius:6px;cursor:help;vertical-align:middle;
 border:1px solid transparent;transition:border-color .14s, background .14s}
.bdg svg{flex:0 0 auto;opacity:.92}
.bdg-l{white-space:nowrap}
.bdg.static{cursor:default;padding:4px;border-radius:7px}
.bdg-pos{background:hsl(160 70% 50% / .13);color:var(--pos)}
.bdg-neg{background:hsl(345 90% 65% / .13);color:var(--neg)}
.bdg-warn{background:hsl(42 90% 55% / .14);color:var(--wrn)}
.bdg-info{background:hsl(var(--h) 60% 55% / .13);color:var(--ac)}
.bdg:hover,.bdg:focus-visible{border-color:currentColor;outline:none}
.bdg-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
 width:270px;padding:10px 12px;border-radius:11px;z-index:60;
 background:hsl(var(--h) 24% 9% / .97);border:1px solid var(--ln);
 box-shadow:0 14px 34px -12px hsl(var(--h) 50% 1% / .95);
 backdrop-filter:blur(16px);
 font-family:'Plus Jakarta Sans',sans-serif;font-size:11px;line-height:1.5;
 color:var(--d1);letter-spacing:0;text-transform:none;
 opacity:0;pointer-events:none;transition:opacity .15s, transform .15s}
.bdg-tip b{display:block;font-family:'DM Mono';font-size:9.5px;letter-spacing:.1em;
 text-transform:uppercase;color:currentColor;margin-bottom:2px}
.bdg-tip i{display:block;font-style:normal;color:var(--tx);font-size:11.5px;margin-bottom:5px}
.bdg-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
 border:6px solid transparent;border-top-color:hsl(var(--h) 24% 9% / .97)}
.bdg:hover .bdg-tip,.bdg:focus-visible .bdg-tip{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:640px){.bdg-tip{width:210px}}
@media(prefers-reduced-motion:reduce){.bdg-tip{transition:none}}

/* glossary */
.gloss{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.gloss-g h3{font-family:'DM Mono';font-size:9px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--ac);margin:0 0 8px;font-weight:400}
.gloss-r{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;padding:7px 0;
 border-bottom:1px dotted hsl(var(--h) 20% 22% / .4)}
.gloss-r:last-child{border-bottom:0}
.gloss-r b{font-size:11.5px;font-weight:600;color:var(--tx);display:block}
.gloss-r em{font-style:normal;font-family:'DM Mono';font-size:9px;color:var(--d1);display:block;margin:1px 0 3px}
.gloss-r p{margin:0;font-size:10.5px;line-height:1.55;color:var(--d2)}

/* ---------------------------------------------------------- the tab */
#v-scout .sc-h1{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0 0 3px}
#v-scout .sc-sub{font-family:'DM Mono';font-size:10.5px;color:var(--d2);margin:0 0 14px}
#v-scout .sc-sec{font-family:'DM Mono';font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
 color:var(--d1);margin:0 0 9px;font-weight:400}
#v-scout .sc-u{color:var(--d2)}
#v-scout .sc-lbl{font-family:'DM Mono';font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--d2)}
#v-scout .sc-card{background:linear-gradient(168deg,hsl(var(--h) 22% 13% / .8),hsl(var(--h) 24% 8% / .8));
 border:1px solid var(--ln);border-radius:15px;padding:14px 16px;overflow:hidden;
 backdrop-filter:blur(22px) saturate(1.3);box-shadow:0 6px 20px -8px hsl(var(--h) 40% 2% / .8)}
#v-scout .hud{position:relative}
#v-scout .hud::before,#v-scout .hud::after{content:'';position:absolute;width:13px;height:13px;pointer-events:none;opacity:.5}
#v-scout .hud::before{top:8px;left:8px;border-top:1.5px solid var(--ac);border-left:1.5px solid var(--ac);border-radius:4px 0 0 0}
#v-scout .hud::after{bottom:8px;right:8px;border-bottom:1.5px solid var(--ac);border-right:1.5px solid var(--ac);border-radius:0 0 4px 0}
#v-scout .sc-ctl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;
 background:hsl(var(--h) 24% 10% / .55);border:1px solid var(--ln);margin-bottom:13px}
#v-scout .sc-seg{display:flex;gap:3px;padding:4px;border-radius:11px;
 background:linear-gradient(168deg,hsl(var(--h) 22% 16% / .85),hsl(var(--h) 24% 9% / .85));border:1px solid var(--ln)}
#v-scout .sc-seg button{font-family:'DM Mono';font-size:10px;padding:5px 11px;border-radius:8px;
 color:var(--d1);background:none;border:0;cursor:pointer}
#v-scout .sc-seg button.on{background:var(--ac);color:hsl(var(--h) 45% 8%);font-weight:600}
#v-scout .sc-seg button:focus-visible{outline:1.5px solid var(--ac);outline-offset:1px}
#v-scout .sc-sel{font-family:'DM Mono';font-size:10px;padding:6px 10px;border-radius:7px;color:var(--tx);
 background:hsl(var(--h) 24% 10% / .85);border:1px solid var(--ln);outline:none;min-width:180px}
#v-scout .sc-games{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 12px}
#v-scout .sc-gp{font-family:'DM Mono';font-size:9.5px;letter-spacing:.04em;padding:5px 9px;border-radius:8px;
 color:var(--d1);background:hsl(var(--h) 24% 10% / .55);border:1px solid var(--ln);cursor:pointer}
#v-scout .sc-gp i{color:var(--d2);font-style:normal;margin:0 3px}
#v-scout .sc-gp:hover{border-color:color-mix(in srgb,var(--ac) 40%,transparent)}
#v-scout .sc-gp.on{background:var(--ac);color:hsl(var(--h) 45% 8%);border-color:var(--ac);font-weight:600}
#v-scout .sc-gp.on i{color:hsl(var(--h) 45% 8%)}
#v-scout .sc-gp-n{opacity:.65;margin-left:3px;font-weight:600}
#v-scout .sc-warn{display:flex;align-items:center;gap:8px;font-family:'DM Mono';font-size:10px;
 color:var(--wrn);padding:8px 12px;border-radius:10px;margin-bottom:13px;
 background:hsl(42 90% 55% / .08);border:1px solid hsl(42 90% 55% / .22)}
#v-scout .sc-grid{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:13px;align-items:start}
#v-scout .sc-grid>*{min-width:0}
#v-scout .sc-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:13px}
#v-scout .sc-row2>*{min-width:0}
@media(max-width:1120px){#v-scout .sc-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){#v-scout .sc-row2{grid-template-columns:minmax(0,1fr)}}

/* plate — same geometry as the batters view */
#v-scout .sc-pwrap{max-width:268px;margin:0 auto;position:relative}
#v-scout .sc-pout{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:3px}
#v-scout .sc-pin{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;border-radius:9px;
 border:1px solid hsl(var(--h) 55% 60% / .3);background:hsl(var(--h) 30% 6% / .5)}
#v-scout .c{position:relative;aspect-ratio:1.15;min-width:0;border-radius:6px;display:flex;
 flex-direction:column;align-items:center;justify-content:center;transition:transform .13s;cursor:help}
#v-scout .c:hover{transform:scale(1.07);z-index:4}
#v-scout .c i{position:absolute;top:3px;left:4px;font-family:'DM Mono';font-size:7px;font-style:normal;color:var(--d2)}
#v-scout .c b{font-family:'DM Mono';font-size:11px;font-weight:500;color:var(--tx);line-height:1}
#v-scout .c em{font-family:'DM Mono';font-size:7px;font-style:normal;margin-top:2px}
#v-scout .c.na{background:hsl(var(--h) 18% 16% / .3)}#v-scout .c.na b{color:var(--d2)}
#v-scout .c.thin{opacity:.5}
#v-scout .c.thin::after{content:'';position:absolute;inset:0;border-radius:6px;
 background:repeating-linear-gradient(45deg,transparent,transparent 3px,
   hsl(var(--h) 20% 40% / .13) 3px,hsl(var(--h) 20% 40% / .13) 6px)}
#v-scout .sc-pedge{font-family:'DM Mono';font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;
 color:var(--d2);text-align:center;margin:5px 0}
#v-scout .sc-hand{display:flex;gap:6px;align-items:center;font-family:'DM Mono';font-size:9px;color:var(--d2);margin-top:7px}
#v-scout .sc-tag{padding:2px 6px;border-radius:5px;background:hsl(var(--h) 30% 18% / .7);color:var(--d1)}
#v-scout .sc-scale{display:flex;align-items:center;gap:7px;margin-top:10px;font-family:'DM Mono';font-size:8px;color:var(--d2)}
#v-scout .sc-ramp{flex:1;height:7px;border-radius:4px;
 background:linear-gradient(90deg,hsl(212 90% 58% / .72),hsl(var(--h) 8% 55% / .12),hsl(352 88% 58% / .72))}

/* comparative rows */
#v-scout .sc-drow{display:grid;grid-template-columns:88px minmax(0,1fr) 96px;align-items:center;gap:9px;
 padding:6px 0;border-bottom:1px dotted hsl(var(--h) 20% 22% / .45)}
#v-scout .sc-drow:last-child{border-bottom:0}
#v-scout .sc-dn{font-family:'DM Mono';font-size:10px;color:var(--d1)}
#v-scout .sc-bar{position:relative;height:16px;border-radius:4px;background:hsl(var(--h) 24% 12% / .8);overflow:hidden}
#v-scout .sc-bar i{position:absolute;left:0;border-radius:4px}
#v-scout .sc-bar .b0{top:0;bottom:0;background:hsl(var(--h) 20% 44% / .34)}
#v-scout .sc-bar .b1{top:2px;height:6px;background:hsl(var(--h) 8% 55% / .3)}
#v-scout .sc-bar .b2{bottom:2px;height:6px}
#v-scout .sc-dv{font-family:'DM Mono';font-size:10px;text-align:right}
#v-scout .up{color:hsl(352 88% 64%)}#v-scout .dn{color:hsl(212 90% 62%)}#v-scout .nu{color:var(--d2)}
#v-scout .sc-leg{display:flex;gap:13px;align-items:center}
#v-scout .sc-leg i{display:inline-block;width:16px;height:5px;border-radius:3px;margin-right:4px;vertical-align:1px}
#v-scout .sc-leg .k0{background:hsl(var(--h) 20% 44% / .5)}
#v-scout .sc-leg .k1{background:hsl(var(--h) 8% 55% / .45)}
#v-scout .sc-leg .k2{background:hsl(352 88% 58% / .7)}

#v-scout .sc-dens{font-family:'DM Mono';font-size:9.5px;color:var(--d1);line-height:1.8}
#v-scout .sc-dens b{color:var(--tx);font-weight:500}
#v-scout .sc-dens .z{color:var(--ac)}
#v-scout .sc-dens .thin{color:var(--wrn)}
#v-scout .sc-read{font-size:12.5px;line-height:1.62;color:var(--tx);margin:0}
#v-scout .sc-read em{font-style:normal;color:hsl(352 88% 64%);font-weight:600}
#v-scout .sc-pill{display:inline-flex;align-items:center;font-family:'DM Mono';font-size:8.5px;
 padding:2px 7px;border-radius:5px;letter-spacing:.05em}
#v-scout .sc-thin{background:hsl(var(--h) 30% 40% / .16);color:var(--d1)}
#v-scout .sc-empty{font-family:'DM Mono';font-size:10px;color:var(--d2);padding:16px 0;text-align:center}
#v-scout .sc-note{font-family:'DM Mono';font-size:9px;color:var(--d2);line-height:1.65;margin-top:11px;
 padding-top:9px;border-top:1px solid hsl(var(--h) 20% 20% / .4)}

/* per-start tabs */
#v-scout .sc-starts{display:flex;gap:5px;margin-bottom:10px;flex-wrap:wrap}
#v-scout .sc-st{flex:1 1 120px;padding:8px 9px;border-radius:10px;cursor:pointer;
 background:hsl(var(--h) 24% 11% / .6);border:1px solid var(--ln);transition:border-color .15s}
#v-scout .sc-st:hover{border-color:hsl(var(--h) 60% 50% / .5)}
#v-scout .sc-st.on{border-color:var(--ac);background:hsl(var(--h) 40% 16% / .5)}
#v-scout .sc-st .d{font-family:'DM Mono';font-size:9px;color:var(--d2)}
#v-scout .sc-st .l{font-family:'DM Mono';font-size:11px;color:var(--tx);margin-top:2px}
#v-scout .sc-st .r{font-family:'DM Mono';font-size:8.5px;margin-top:2px}

/* sequencing */
#v-scout .sc-seq{display:grid;grid-template-columns:60px repeat(4,minmax(0,1fr));gap:4px;font-family:'DM Mono';font-size:9px}
#v-scout .sc-seq .hd{color:var(--d2);font-size:8px;letter-spacing:.08em;text-transform:uppercase;padding-bottom:3px}
#v-scout .sc-seq .cell{padding:5px 6px;border-radius:6px;background:hsl(var(--h) 24% 12% / .7);
 color:var(--d1);position:relative;overflow:hidden}
#v-scout .sc-seq .cell b{color:var(--tx);font-weight:500}
#v-scout .sc-seq .cell .sh{position:absolute;left:0;top:0;bottom:0}
#v-scout .sc-seq .cell span{position:relative}
#v-scout .sc-seq .rl{color:var(--d1);display:flex;align-items:center;font-size:9px}

/* ---- v2.1 zone card: Zone Approach twin plates + two-tier gold ---- */
#v-scout .sc2-row{display:flex;gap:5px;align-items:center;margin:11px 0 0;flex-wrap:wrap}
#v-scout .sc2-l{font-family:'DM Mono';font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--d2);margin-right:3px;min-width:44px}
#v-scout .sc2-b{font-family:'DM Mono';font-size:11px;padding:6px 12px;border-radius:9px;cursor:pointer;color:var(--d1);
 background:linear-gradient(168deg,hsl(var(--h) 22% 17% / .85),hsl(var(--h) 24% 10% / .85));
 border:1px solid var(--ln);border-top-color:hsl(var(--h) 30% 42% / .48);transition:.16s}
#v-scout .sc2-b:hover{color:var(--tx)}
#v-scout .sc2-b.on{background:linear-gradient(165deg,hsl(var(--h) 95% 72%),hsl(var(--h) 92% 55%));color:hsl(var(--h) 45% 8%);
 font-weight:600;border-color:hsl(var(--h) 92% 68%);box-shadow:0 0 16px hsl(var(--h) 92% 58% / .38)}
#v-scout .sc2-hint{margin-left:auto;font-family:'DM Mono';font-size:9px;color:var(--d2)}
#v-scout .sc2-slab{border-radius:17px;padding:15px 16px;margin-top:13px;
 background:linear-gradient(170deg,hsl(var(--h) 30% 3.5%),hsl(var(--h) 32% 1.8%));
 border:1px solid hsl(var(--h) 25% 14% / .8);border-top-color:hsl(var(--h) 28% 26% / .6);
 box-shadow:0 3px 10px hsl(var(--h) 40% 1% / .9) inset}
#v-scout .sc2-zw{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#v-scout .sc2-zt{font-family:'DM Mono';font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--d2);text-align:center;margin-bottom:7px}
#v-scout .sc2-plate{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;
 background:hsl(var(--h) 30% 6% / .6);box-shadow:0 2px 6px hsl(var(--h) 45% 1% / .8) inset}
#v-scout .sc2-pout{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px}
#v-scout .sc2-pin{position:absolute;inset:23%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;
 border-radius:3px;outline:1px solid hsl(var(--h) 40% 78% / .3);overflow:hidden;background:hsl(var(--h) 30% 4%);
 box-shadow:0 0 0 1px hsl(var(--h) 30% 2% / .9),0 2px 8px hsl(var(--h) 45% 1% / .55)}
#v-scout .sc2-plate .c{position:relative;display:flex;align-items:center;justify-content:center;
 font-family:'DM Mono';transition:.3s cubic-bezier(.2,.8,.3,1)}
#v-scout .sc2-plate .c b{font-size:10.5px;position:relative;z-index:1;font-weight:500}
/* zone ids: white, same face as the values */
#v-scout .sc2-plate .c i{position:absolute;font-size:6.5px;font-style:normal;color:rgba(255,255,255,.82);
 font-weight:500;text-shadow:0 1px 2px hsl(var(--h) 45% 2% / .9)}
#v-scout .sc2-pout .c i{top:4px;left:6px}
#v-scout .sc2-pin .c i{top:2px;left:3px}
#v-scout .sc2-pout .c:nth-child(1){border-radius:10px 0 0 0}
#v-scout .sc2-pout .c:nth-child(2){border-radius:0 10px 0 0}
#v-scout .sc2-pout .c:nth-child(3){border-radius:0 0 0 10px}
#v-scout .sc2-pout .c:nth-child(4){border-radius:0 0 10px 0}
#v-scout .sc2-pout .c b{position:absolute}
#v-scout .sc2-pout .c:nth-child(1) b{top:10px;left:12px}
#v-scout .sc2-pout .c:nth-child(2) b{top:10px;right:12px}
#v-scout .sc2-pout .c:nth-child(3) b{bottom:10px;left:12px}
#v-scout .sc2-pout .c:nth-child(4) b{bottom:10px;right:12px}
#v-scout .sc2-pin .c{border-radius:0;box-shadow:inset 0 0 0 .5px hsl(var(--h) 40% 78% / .10)}
#v-scout .sc2-pin .c b{text-shadow:0 1px 3px hsl(var(--h) 45% 2% / .95)}
#v-scout .sc2-plate .na{color:var(--d2);opacity:.5}
#v-scout .sc2-plate .thin b{opacity:.55}
/* two-tier gold */
#v-scout .sc2-plate .c.g2{box-shadow:inset 0 0 0 1.6px #e9c46a,0 0 10px hsl(43 75% 62% / .45);z-index:2}
#v-scout .sc2-pin .c.g2{box-shadow:inset 0 0 0 1.6px #e9c46a,0 0 10px hsl(43 75% 62% / .45)}
#v-scout .sc2-plate .c.h2g{z-index:2}
#v-scout .sc2-plate .c.h2g::after{content:'';position:absolute;inset:1.5px;border:1.4px dashed hsl(43 75% 62% / .75);
 border-radius:inherit;pointer-events:none}
#v-scout .sc2-pin .c.h2g::after{border-radius:0}
/* stat row */
#v-scout .sc2-sts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
#v-scout .sc2-st{background:hsl(var(--h) 26% 6% / .7);border:1px solid var(--ln);border-radius:11px;
 padding:9px 11px;display:flex;flex-direction:column;gap:2px}
#v-scout .sc2-st span{font-family:'DM Mono';font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--d2)}
#v-scout .sc2-st b{font-family:'DM Mono';font-size:16px}
#v-scout .sc2-st em{font-style:normal;font-family:'DM Mono';font-size:8px;color:var(--d2)}
/* density */
#v-scout .sc2-dens{font-family:'DM Mono';font-size:10px;color:var(--d1);line-height:2;margin-top:12px}
#v-scout .sc2-dens b{color:var(--tx);font-weight:500}
#v-scout .sc2-dens .z{color:var(--ac)}
#v-scout .sc2-dens .on{color:var(--tx)}
/* gloss */
#v-scout .sc2-gloss{margin-top:14px;border-top:1px solid var(--ln);padding-top:12px}
#v-scout .sc2-gloss h3{font-family:'DM Mono';font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--d1);margin:0 0 9px}
#v-scout .sc2-grow{display:flex;gap:10px;align-items:flex-start;margin-bottom:9px}
#v-scout .sc2-sw{flex:0 0 22px;height:22px;border-radius:6px;margin-top:1px;background:hsl(352 88% 58% / .28)}
#v-scout .sc2-sw.solid{box-shadow:inset 0 0 0 1.6px #e9c46a,0 0 8px hsl(43 75% 62% / .5)}
#v-scout .sc2-sw.hollow{position:relative}
#v-scout .sc2-sw.hollow::after{content:'';position:absolute;inset:2px;border:1.4px dashed hsl(43 75% 62% / .8);border-radius:4px}
#v-scout .sc2-grow p{font-size:11px;color:var(--d1);line-height:1.65;margin:0}
#v-scout .sc2-grow p b{color:var(--tx);font-weight:600}
#v-scout .sc2-fine{font-family:'DM Mono';font-size:8.5px;color:var(--d2);line-height:1.7;margin:4px 0 0}
#v-scout .sc2-fine b{color:#e9c46a;font-weight:500}