/* =====================================================================
   Power Map: page styles for /artifacts/power-map/ and /artifacts/power-map/channel/.
   The wheel (inline SVG drawn by power-map.js), the channel list (rows that expand),
   the benchmark table and the channel page. Tokens come from site.css; nothing here
   restyles a site.css class.
   ===================================================================== */

/* ---------- small shared pieces ---------- */
.pm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:14px}
.pm-tight{padding-top:clamp(36px,5vw,64px)}
.pm-g{row-gap:28px}
.pm-h2{margin-bottom:18px}
.pm-lead{margin-bottom:28px}
.pm-p{max-width:38em;margin-top:22px}
.pm-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pm-link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.pm-link:hover{text-decoration-thickness:2px}
.src .pm-link{color:var(--ink)}

/* ---------- the explorer: wheel beside its list on wide screens, above it otherwise ---------- */
.pm-x{row-gap:36px;align-items:start;margin-top:clamp(28px,4vw,56px)}
.pm-wheelcol,.pm-listcol{grid-column:1/-1;min-width:0}
.pm-listcol,.pm-cq{container-type:inline-size}
.pm-wheel{width:min(100%,560px);aspect-ratio:1;margin-inline:auto;--pm-f:13.5px}
.pm-wheel svg{width:100%;height:100%}
.pm-read{max-width:34em;margin:14px auto 0}
@media (max-width:560px){.pm-wheel{--pm-f:21px}}
@media (min-width:1040px){
  .pm-wheelcol{grid-column:1/9;position:sticky;top:76px}
  .pm-listcol{grid-column:9/13}
  .pm-wheel{width:clamp(420px,calc(100vh - 190px),640px);width:clamp(420px,calc(100svh - 190px),640px);max-width:100%}
}
@media (min-width:1040px) and (max-height:760px){.pm-wheel{--pm-f:17px}}

/* ---------- the wheel itself ---------- */
.pm-wheel text{font-family:inherit;pointer-events:none;-webkit-user-select:none;user-select:none}
.pm-seg{fill:var(--ink);stroke:var(--bg);stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linejoin:miter;transition:fill .15s}
.pm-hit{fill:transparent;stroke:none;pointer-events:all}
.pm-arc[role="button"],.pm-axle[role="button"]{cursor:pointer}
.pm-arc:focus,.pm-axle:focus,.pm-arc:focus-visible,.pm-axle:focus-visible{outline:none}
.pm-foc{fill:none;stroke:var(--ink);stroke-width:2px;vector-effect:non-scaling-stroke;opacity:0;pointer-events:none}
.pm-arc:focus-visible .pm-foc,.pm-axle:focus-visible .pm-foc{opacity:1}
.pm-arc[aria-pressed="false"]:hover .pm-seg,.pm-axle[aria-pressed="false"]:hover .pm-seg{fill:var(--ink2)}
.pm-arc[aria-pressed="true"] .pm-seg,.pm-axle[aria-pressed="true"] .pm-seg,.pm-on .pm-seg{fill:var(--pink)}
.pm-track{fill:none;stroke:var(--line);stroke-width:1px;vector-effect:non-scaling-stroke}
.pm-mark{fill:var(--ctx);pointer-events:none;transition:fill .15s}
.pm-mark.hi{fill:var(--ink)}
.pm-slot{fill:transparent;stroke:none;pointer-events:none}
@media (hover:hover){
  .pm-slot{pointer-events:all;cursor:pointer}
  .pm-slot:hover{fill:var(--soft)}
}
.pm-box{fill:none;stroke:var(--ink);stroke-width:2px;vector-effect:non-scaling-stroke;pointer-events:none}
.pm-lab,.pm-cap{font-stretch:85%;font-weight:700;font-size:var(--pm-f);letter-spacing:.06em;text-anchor:middle;fill:var(--ink)}
.pm-lab .pm-n,.pm-cap{fill:var(--ink2)}
.pm-big{font-stretch:125%;font-weight:900;font-size:78px;letter-spacing:-.05em;font-variant-numeric:lining-nums;text-anchor:middle;fill:var(--ink)}
/* the wheel turns into place once, when it is first drawn */
.pm-spin{transform-origin:0 0}
@keyframes pm-turn{from{transform:rotate(-32deg);opacity:0}to{transform:rotate(0deg);opacity:1}}
.pm-live .pm-spin{animation:pm-turn .9s cubic-bezier(.16,.8,.2,1) both}

/* ---------- search, filter and the list head ---------- */
.pm-tools{display:grid;gap:12px;margin-bottom:32px}
.pm-tools label{display:grid;gap:6px;font-size:15px;font-weight:600}
.pm-key{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;font-size:15px;color:var(--ink2)}
.pm-key span{white-space:nowrap}
.pm-lh{display:grid;gap:6px;justify-items:start;border-top:2px solid var(--ink);padding-top:14px;margin-bottom:16px}
.pm-lh .btn{margin-top:8px}
.pm-empty{padding:18px 0;max-width:30em}
.pm-foot{margin-top:20px}

/* ---------- rows that expand (channels, enablers, regulation levers) ---------- */
.pm-rows{border-top:1px solid var(--line)}
.pm-row{border-bottom:1px solid var(--line)}
.pm-row.open{box-shadow:inset 0 2px 0 var(--ink)}
.pm-grp{padding:22px 0 8px;border-bottom:1px solid var(--line)}
.pm-grp:first-child{padding-top:12px}
.pm-rb{display:grid;grid-template-columns:46px minmax(0,1fr) auto 12px;column-gap:12px;align-items:baseline;width:100%;min-height:48px;padding:13px 0;text-align:left;font-size:17px;line-height:1.3}
.pm-rows--plain .pm-rb{grid-template-columns:minmax(0,1fr) 12px}
.pm-id{color:var(--ink)}
.pm-nm{font-weight:600;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:4px;transition:text-decoration-color .15s}
.pm-rb:hover .pm-nm{text-decoration-color:var(--ink)}
.pm-sub{display:block;margin-top:3px;font-weight:400;font-size:15px;color:var(--ink2)}
/* the five-step scale: 1 pure brand, 5 pure performance; a filled step is where the channel sits */
.pm-sc{display:inline-grid;grid-template-columns:repeat(5,8px);gap:2px}
.pm-sc i{height:8px;background:var(--ctx)}
.pm-sc i.on{background:var(--ink)}
/* plus that becomes a minus */
.pm-ix{position:relative;width:12px;height:12px;align-self:center}
.pm-ix::before,.pm-ix::after{content:"";position:absolute;background:var(--ink)}
.pm-ix::before{left:0;right:0;top:5px;height:2px}
.pm-ix::after{top:0;bottom:0;left:5px;width:2px;transition:transform .2s}
.pm-rb[aria-expanded="true"] .pm-ix::after{transform:scaleY(0)}
/* the panel opens by animating a grid row from 0fr to 1fr, so no height is ever measured */
.pm-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1)}
.pm-row.open>.pm-panel{grid-template-rows:1fr}
.pm-pin{min-height:0;overflow:hidden;margin-inline:-6px;visibility:hidden;transition:visibility 0s .28s}
.pm-row.open>.pm-panel>.pm-pin{visibility:visible;transition-delay:0s}
.pm-body{padding:2px 6px 26px}
.pm-facts dt{margin-top:14px}
.pm-facts dt:first-child{margin-top:4px}
.pm-facts dd{margin-top:2px;font-size:16px;line-height:1.45;max-width:40em;overflow-wrap:anywhere}
.pm-unv{margin-top:16px;max-width:36em}
.pm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:20px}
.pm-acts .u{font-size:15px}
@container (min-width:560px){
  .pm-rows:not(.pm-rows--plain) .pm-body{padding-left:64px}
  .pm-facts{display:grid;grid-template-columns:9.5em minmax(0,1fr);column-gap:var(--gap)}
  .pm-facts dt,.pm-facts dt:first-child,.pm-facts dd{margin-top:0;padding:10px 0;border-top:1px solid var(--line)}
}

/* ---------- benchmarks ---------- */
.pm-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4;font-variant-numeric:tabular-nums;margin-top:18px}
.pm-table th,.pm-table td{text-align:left;vertical-align:top;padding:12px 18px 12px 0;border-top:1px solid var(--line);font-weight:400}
.pm-table thead th{border-top:2px solid var(--ink);font-weight:600;vertical-align:bottom}
.pm-table tbody th{font-weight:700}
.pm-table .np{color:var(--ink2)}
.pm-table tr.pm-gap>*{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
@media (max-width:700px){
  .pm-table,.pm-table tbody,.pm-table tr,.pm-table th,.pm-table td{display:block}
  .pm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pm-table tr{padding:14px 0;border-top:1px solid var(--line)}
  .pm-table tbody th,.pm-table td{border:0;padding:0}
  .pm-table tbody th{margin-bottom:6px;font-size:17px}
  .pm-table td{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;padding:3px 0}
  .pm-table td::before{content:attr(data-label);font-stretch:85%;font-size:12.5px;line-height:1.5;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
  .pm-table tr.pm-gap{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
  .pm-table tr.pm-gap>*{border:0}
}

/* ---------- known gaps ---------- */
.pm-gaps li{padding:16px 0;border-top:1px solid var(--line);max-width:40em}
.pm-gaps li:last-child{border-bottom:1px solid var(--line)}

/* ---------- version history ---------- */
.pm-next{margin:36px 0 10px}

/* ---------- the channel page ---------- */
.ph-b .pm-h1{font-size:clamp(30px,4.6vw,64px);overflow-wrap:anywhere}
.pm-small{width:min(100%,320px);margin:22px 0 14px;--pm-f:24px}
@media (max-width:800px){.pm-small{width:min(100%,260px)}}
.pm-rec dd{overflow-wrap:anywhere}
.pm-rec .pm-sc{margin-right:10px}
.pm-srcs li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;padding:12px 0;border-top:1px solid var(--line)}
.pm-srcs li:last-child{border-bottom:1px solid var(--line)}
.pm-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.pm-pn{row-gap:0}
.pm-pn a{display:block;border-top:2px solid var(--ink);padding:14px 0 30px}
.pm-pn .h{display:block;margin-top:8px;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color .15s;overflow-wrap:anywhere}
.pm-pn a:hover .h{text-decoration-color:var(--ink)}
.pm-index{columns:2;column-gap:var(--gap)}
.pm-index li{break-inside:avoid;border-top:1px solid var(--line)}
.pm-index a{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:10px;align-items:baseline;padding:10px 0;font-size:16px;line-height:1.3}
.pm-index a:hover span:last-child{text-decoration:underline;text-underline-offset:4px}
@media (max-width:560px){.pm-index{columns:1}}

@media (prefers-reduced-motion:reduce){
  .pm-live .pm-spin{animation:none}
  .pm-panel,.pm-pin,.pm-ix::after,.pm-seg,.pm-mark,.pm-nm{transition:none}
}