/* Editorial risk/upside visualization. Loaded only by the player directory. */
html { scroll-padding-top:calc(var(--blog-sticky-header-height, 120px) + 20px); }
.playerDirectoryMain { width:min(100%,1448px); max-width:1448px; }
.playerDirectoryBody .playerDirectoryMain > .breadcrumb,
.playerDirectoryBody .playerDirectoryMain > .artHero,
.playerDirectoryBody .playerDirectoryMain > .sourcesNote { max-width:1000px; margin-inline:auto; }

.riskExplorer {
  max-width:1400px;
  margin:44px auto;
  --matrix-green:#168a58;
  --matrix-orange:#e58b10;
  --matrix-blue:#527b9f;
  --matrix-red:#d84b45;
}
.matrixIntro { max-width:760px; margin:0 0 22px; }
.matrixEyebrow,.matrixCardKicker { margin:0 0 7px; color:var(--color-accent-strong); font:650 10px/1.4 var(--font-mono); letter-spacing:.13em; text-transform:uppercase; }
.matrixIntro h2 { margin:0 0 7px; color:var(--color-text-strong); font:800 clamp(26px,3.2vw,38px)/1.1 var(--font-display); letter-spacing:-.035em; }
.matrixIntro > p:last-child { margin:0; color:var(--color-text-muted); font-size:14px; }

.matrixPositions { display:flex; gap:7px; margin:0 0 14px; }
.matrixPositions a { display:flex; flex:1 1 0; align-items:center; gap:8px; min-width:0; padding:10px 13px; border:1px solid var(--color-border); border-radius:999px; color:var(--color-text-muted); background:color-mix(in srgb,var(--color-surface) 90%,transparent); text-decoration:none; }
.matrixPositions strong { color:var(--color-text-strong); font:800 15px/1 var(--font-display); }
.matrixPositions span { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.matrixPositions small { margin-left:auto; font:600 10px/1 var(--font-mono); }
.matrixPositions a:hover,.matrixPositions a[aria-current="true"] { border-color:color-mix(in srgb,var(--color-accent) 65%,transparent); background:color-mix(in srgb,var(--color-accent) 11%,var(--color-surface)); }
.matrixPositions a[aria-current="true"] strong { color:var(--color-accent-strong); }

.riskExplorer [hidden] { display:none !important; }
.matrixControls { display:flex; gap:10px; align-items:end; margin-bottom:8px; }
.matrixControls label { display:grid; gap:5px; color:var(--color-text-muted); font-size:10.5px; font-weight:650; }
.matrixSearch { flex:1; }
.matrixScale { width:205px; }
.matrixLimit { width:145px; }
.matrixControls input,.matrixControls select { min-height:40px; width:100%; min-width:0; border:1px solid var(--color-border-strong); border-radius:8px; padding:8px 11px; background:color-mix(in srgb,var(--color-surface) 92%,transparent); color:var(--color-text-strong); font:500 13px/1.4 var(--font-sans); }
.matrixControls input::placeholder { color:var(--color-text-subtle); }
.matrixStatus { min-height:18px; margin:8px 0 16px; color:var(--color-text-muted); font-size:11.5px; }
.matrixPanel { margin:0 0 38px; scroll-margin-top:calc(var(--blog-sticky-header-height, 120px) + 20px); }

.playerMatrix {
  max-width:1400px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #d9dedb;
  border-radius:22px;
  background:#fbfbf8;
  color:#1e2a30;
  box-shadow:0 14px 34px rgba(8,24,18,.09);
}
.matrixCardHeader { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; padding:30px 34px 24px; border-bottom:1px solid #e1e5e2; }
.matrixCardHeader h3 { margin:0; color:#17242b; font:850 clamp(28px,3vw,43px)/1.04 var(--font-display); letter-spacing:-.045em; }
.matrixCardHeader h3 em { color:#617078; font-style:normal; font-weight:650; }
.matrixCardHeader > div > p:last-child { margin:9px 0 0; color:#607078; font-size:15px; }
.matrixCardLinks { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; padding-top:4px; }
.matrixCardLinks a { color:#53676f; font-size:11.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
.matrixCardLinks a:hover { color:#167651; text-decoration:underline; text-underline-offset:3px; }

.matrixStage { min-width:0; padding:24px 28px 28px; background:#fbfbf8; }
.matrixScroll { width:100%; overflow:visible; }
.matrixScroll::-webkit-scrollbar { display:none; }
.matrixCanvas {
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  height:700px;
  overflow:visible;
  border:1px solid #dce2de;
  border-radius:15px;
  background:conic-gradient(from 0deg at 50% 50%,#f3faf6 0 25%,#f5f8fb 25% 50%,#fff6f5 50% 75%,#fff9f0 75% 100%);
}
.matrixGrid { position:absolute; inset:8% 7% 11%; border:1px solid rgba(54,74,65,.08); border-radius:10px; background-image:linear-gradient(rgba(42,62,54,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(42,62,54,.035) 1px,transparent 1px); background-size:10% 10%; pointer-events:none; }
.matrixCanvas::before,.matrixCanvas::after { content:""; position:absolute; z-index:1; background:rgba(36,51,45,.5); pointer-events:none; }
.matrixCanvas::before { top:7%; bottom:10%; left:50%; width:1px; }
.matrixCanvas::after { top:50%; right:6%; left:6%; height:1px; }

.matrixYAxis { position:absolute; z-index:5; top:8%; bottom:11%; left:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#77837e; font-size:9.5px; font-weight:700; letter-spacing:.035em; text-transform:uppercase; }
.matrixYAxis span,.matrixYAxis strong { writing-mode:vertical-rl; transform:rotate(180deg); }
.matrixYAxis strong { color:#35433d; font:850 13px/1 var(--font-display); letter-spacing:.08em; }
.matrixYAxis b { color:#87928d; font:700 14px/1 var(--font-sans); }
.matrixXAxis { position:absolute; z-index:5; right:7%; bottom:12px; left:7%; display:flex; align-items:center; justify-content:center; gap:10px; color:#6b7772; font-size:10.5px; font-weight:700; text-transform:uppercase; }
.matrixXAxis strong { color:#35433d; font:850 15px/1 var(--font-display); letter-spacing:.07em; }
.matrixXAxis b { color:#87928d; font-size:15px; }
.matrixYAxis .favorable,.matrixXAxis .favorable { color:#178257; }

.matrixQuadrant { position:absolute; z-index:2; display:grid; gap:3px; max-width:220px; pointer-events:none; text-transform:uppercase; }
.matrixQuadrant strong { color:#59645f; font:800 12px/1.15 var(--font-display); letter-spacing:.015em; }
.matrixQuadrant span { color:#87918c; font-size:9px; font-weight:600; text-transform:none; }
.matrixTopLeft { top:18px; left:7%; }
.matrixTopLeft strong { color:#b66c0e; }
.matrixTopRight { top:18px; right:7%; text-align:right; }
.matrixTopRight strong { color:#117b4d; }
.matrixTopRight i { display:inline-grid; width:17px; height:17px; margin-left:3px; place-items:center; border-radius:50%; background:#168a58; color:white; font:800 10px/1 var(--font-sans); }
.matrixBottomLeft { bottom:42px; left:7%; }
.matrixBottomLeft strong { color:#c4403c; }
.matrixBottomRight { right:7%; bottom:42px; text-align:right; }
.matrixBottomRight strong { color:#55748e; }

.matrixNode { --map-color:#667771; }
.matrixNode[data-map="best"] { --map-color:var(--matrix-green); }
.matrixNode[data-map="ceiling"] { --map-color:var(--matrix-orange); }
.matrixNode[data-map="floor"] { --map-color:var(--matrix-blue); }
.matrixNode[data-map="fragile"] { --map-color:var(--matrix-red); }
.matrixNode[data-label-visible="false"] .matrixName { display:none; }

.matrixDot { position:absolute; z-index:6; width:9px; height:9px; margin:0; padding:0; border:0; border-radius:50%; background:var(--map-color); box-shadow:0 0 0 2px rgba(255,255,255,.82); transform:translate(-50%,-50%); cursor:pointer; }
.matrixDot:hover,.matrixDot:focus-visible { z-index:12; outline:3px solid color-mix(in srgb,var(--map-color) 28%,transparent); outline-offset:3px; transform:translate(-50%,-50%) scale(1.16); }
.matrixName { position:absolute; z-index:4; display:grid; max-width:170px; padding:4px 7px 3px; border:1px solid rgba(83,101,93,.17); border-radius:7px; background:rgba(255,255,255,.94); color:#1e2a30; box-shadow:0 1px 3px rgba(26,49,39,.06); font:650 12.5px/1.12 var(--font-sans); text-align:left; text-decoration:none; white-space:nowrap; transform:translate(-50%,-50%); }
.matrixName small { margin-top:2px; color:#7a8681; font:500 10px/1.05 var(--font-sans); }
.matrixName:hover,.matrixName:focus-visible { z-index:11; border-color:color-mix(in srgb,var(--map-color) 40%,#ccd5d0); background:white; color:#13241c; outline:2px solid color-mix(in srgb,var(--map-color) 25%,transparent); outline-offset:2px; }
.matrixLeader { position:absolute; z-index:3; display:none; height:1px; background:color-mix(in srgb,var(--map-color) 42%,transparent); transform-origin:left center; pointer-events:none; }
.matrixNode[data-leader-visible="true"] .matrixLeader { display:block; }

.matrixTooltip { position:absolute; z-index:30; width:240px; padding:13px 14px; border:1px solid rgba(255,255,255,.12); border-radius:11px; visibility:hidden; opacity:0; pointer-events:none; background:#14251f; color:#f6faf8; box-shadow:0 14px 34px rgba(11,28,21,.22); transform:translate(-50%,calc(-100% - 15px)); transition:opacity .12s ease,visibility .12s ease; }
.matrixNode[data-tooltip-y="below"] .matrixTooltip { transform:translate(-50%,15px); }
.matrixNode[data-tooltip-x="left"] .matrixTooltip { transform:translate(calc(-100% - 15px),-50%); }
.matrixNode[data-tooltip-x="right"] .matrixTooltip { transform:translate(15px,-50%); }
.matrixNode:hover .matrixTooltip,.matrixNode:focus-within .matrixTooltip { visibility:visible; opacity:1; }
.matrixTooltip > strong { display:block; margin-bottom:9px; font:800 14px/1.2 var(--font-display); }
.matrixTooltip dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; margin:0; }
.matrixTooltip dl div { display:grid; gap:1px; }
.matrixTooltip dt { color:#9fb3aa; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.matrixTooltip dd { margin:0; color:#fff; font-size:11.5px; font-weight:650; }
.matrixTooltip p { margin:10px 0 0; padding-top:9px; border-top:1px solid rgba(255,255,255,.1); color:#cbd8d2; font-size:10.5px; line-height:1.45; }

.matrixScrollHint { display:none; margin:12px 2px 0; color:#52665c; font-size:11px; font-weight:650; }
.matrixMethod { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:8px 28px; margin-top:18px; padding-top:17px; border-top:1px solid #e1e5e2; color:#67736d; font-size:10.5px; line-height:1.55; }
.matrixMethod p { margin:0; }
.matrixMethod strong { color:#44534c; }
.matrixMissing { color:#956220; }

.matrixTable { margin-top:14px; border:1px solid var(--color-border); border-radius:10px; background:var(--color-surface); }
.matrixTable summary { padding:15px 18px; cursor:pointer; color:var(--color-text-strong); font:700 13.5px/1.5 var(--font-display); }
.matrixTable summary span { margin-left:10px; color:var(--color-text-subtle); font:400 11px/1.4 var(--font-sans); }
.matrixPanel .matrixTable .tableWrap { margin:0; border-inline:0; border-bottom:0; border-radius:0 0 10px 10px; }
.riskExplorer a:focus-visible,.riskExplorer input:focus-visible,.riskExplorer select:focus-visible,.matrixTable summary:focus-visible,.matrixScroll:focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }

@media (max-width:1100px) {
  .matrixCardHeader { padding-inline:26px; }
  .matrixStage { padding-inline:20px; }
  .matrixControls { flex-wrap:wrap; }
  .matrixSearch { flex-basis:100%; }
  .matrixScale { flex:1 1 220px; }
  .matrixLimit { flex:0 1 170px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:calc(var(--blog-mobile-header-height, 56px) + 14px); }
  .riskExplorer { margin:30px auto; }
  .matrixPositions { gap:5px; }
  .matrixPositions a { display:grid; justify-items:center; gap:3px; padding:9px 5px; border-radius:10px; }
  .matrixPositions span { display:none; }
  .matrixPositions small { margin:0; font-size:9px; }
  .matrixControls { gap:9px; }
  .matrixScale,.matrixLimit { width:calc(50% - 5px); flex:1 1 calc(50% - 5px); }
  .matrixControls input,.matrixControls select { font-size:16px; }
  .matrixCardHeader { display:block; padding:23px 20px 19px; }
  .matrixCardHeader h3 { font-size:30px; }
  .matrixCardHeader > div > p:last-child { font-size:13px; }
  .matrixCardLinks { justify-content:flex-start; margin-top:15px; }
  .playerMatrix { border-radius:15px; }
  .matrixStage { padding:16px 12px 22px; }
  .matrixScroll { overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .matrixCanvas { width:820px; min-width:820px; height:720px; }
  .matrixScrollHint { display:block; }
  .matrixMethod { grid-template-columns:1fr; gap:8px; }
  .matrixTooltip { width:220px; }
  .matrixTable summary span { display:block; margin:4px 0 0 14px; }
}
@media (max-width:420px) {
  .matrixScale,.matrixLimit { width:100%; flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .matrixTooltip { transition:none; }
}