/* The evidence panel (src/components/EvidencePanel.astro): on each principle page, and in an insight's sidebar.
   Where it sits on the page is up to the page's own stylesheet. */
.arr{display:inline-block;transition:transform .25s var(--ease)}
.panel-wrap{position:relative}
.panel{position:relative;background:var(--navy-900);color:var(--white);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:22px;box-shadow:0 36px 90px rgba(6,24,38,.3),0 4px 12px rgba(6,24,38,.16)}

/* The rating's character peeks round the panel, there from the start. Its pose is cut flat where the panel's edge
   meets it, so the body sits outside that edge and the hands curl over onto the panel.
   peek-side: leans out from the left edge, low down, when side by side; looks over the top when stacked (phones, narrow tablets).
   peek-top: always looks over the top. */
.panel-wrap>.peek{--w:var(--lw);--h:var(--lh);--c:var(--lc);position:absolute;z-index:2;left:calc(var(--w) * var(--c) * -1);bottom:44px;width:var(--w);height:var(--h);pointer-events:none}
.panel-wrap>.peek img{display:block;width:var(--w);height:var(--h);max-width:none}
.peek-top{margin-top:calc(var(--th) * var(--tc) - 24px)}
.peek-top>.peek{--w:var(--tw);--h:var(--th);--c:var(--tc);left:auto;right:28px;bottom:auto;top:calc(var(--h) * var(--c) * -1)}
@media (max-width:979px){
  .peek-side{margin-top:calc(var(--th) * var(--tc) - 24px)}
  .peek-side>.peek{--w:var(--tw);--h:var(--th);--c:var(--tc);left:auto;right:28px;bottom:auto;top:calc(var(--h) * var(--c) * -1)}
}

.panel .lab{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--navy-100)}
.verdict{display:flex;align-items:center;gap:14px;font-size:44px;line-height:1;font-weight:700;transition:color .2s}
.verdict i{width:16px;height:16px;border-radius:999px;background:currentColor;box-shadow:0 0 0 6px rgba(255,255,255,.12);flex:none}
.c-Strong{color:var(--mint-300)}
.c-Moderate{color:var(--navy-100)}
.c-Contested{color:var(--amber)}
.c-Framework{color:var(--mauve-300)}
.def{font-size:16px;line-height:1.6;color:var(--navy-100);min-height:3.2em;display:grid}
/* Every wording the scale can show sits invisibly in the same spot, so the panel is already tall enough for the longest
   and nothing below it moves while a visitor points along the scale */
.def>span{grid-area:1/1}
.def .ghost{visibility:hidden}
.scale{display:flex;gap:4px}
.scale button{flex:1 1 0;padding:10px 0;display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--navy-300);transition:color .2s}
.scale button::before{content:"";height:8px;border-radius:999px;background:var(--navy-500);transition:background .2s,transform .25s var(--ease)}
.scale button:hover{color:var(--white)}
.scale button:hover::before{transform:scaleY(1.5);background:var(--navy-300)}
.scale button.is{color:var(--white)}
.scale button.is.c-Strong::before{background:var(--mint-300)}
.scale button.is.c-Moderate::before{background:var(--navy-100)}
.scale button.is.c-Contested::before{background:var(--amber)}
.scale button.is.c-Framework::before{background:var(--mauve-300)}
.scale button.previewing::before{background:var(--white)}
.stats{display:flex;flex-wrap:wrap;gap:16px 32px;padding-top:18px;border-top:1px solid var(--navy-500)}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:26px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.stats span{font-size:14px;color:var(--navy-100)}
.shop{display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:1px solid var(--navy-500)}
.shop .lab{margin:0}
.shop .tst{font-size:16px;font-weight:700;color:var(--white);white-space:normal}
.shop .tst i{width:12px;height:12px;color:var(--mint-300)}
.shop .tst.t-none{color:var(--navy-100)}
.shop .tst.t-none i{color:var(--navy-100)}
.shop p{font-size:14px;line-height:1.5;color:var(--navy-100)}
.panel .links{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}
.panel .how{font-size:15px;font-weight:700;color:var(--mint-300);padding:6px 0;text-decoration:none;display:inline-flex;gap:6px;align-self:flex-start}
.panel .how:hover .arr{transform:translateX(5px)}
.panel .how.sub{font-weight:600;color:var(--navy-100)}
.panel .how.sub:hover{color:var(--white)}

/* Named (an insight's sidebar): the principle's name and summary head the panel */
.named{display:flex;flex-direction:column;gap:8px;padding-bottom:20px;border-bottom:1px solid var(--navy-500)}
.pname{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0}
.pname a{color:var(--white);text-decoration:none;text-underline-offset:5px;text-decoration-thickness:2px}
.pname a:hover{text-decoration:underline;text-decoration-color:var(--mint-300)}
.psum{font-size:15px;line-height:1.55;color:var(--navy-100)}