/* ==================================================================
   weekly-fx.css — the motion layer for weekly issues that opt in.

   Loaded after weekly-v2.css. Styles three editorial blocks an issue
   can carry in its body (day-by-day rail, numbers grid, price chart)
   and the canvas weekly-fx.js paints into the masthead.
   Every block reads correctly with no JavaScript and with reduced
   motion: the script only adds the `wx-on` class when it will animate,
   and nothing here hides content unless that class is present.
   ================================================================== */

.wk2{--wx-old:#6d7fd1;--wx-new:#059669}
html[data-theme="dark"] .wk2{--wx-old:#6f80d6;--wx-new:#0e9f6e}

/* ---------------- masthead constellation ---------------- */
.wx-sky{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s var(--p-ease,ease)}
.wx-sky.-in{opacity:.75}
@media (max-width:640px){.wx-sky.-in{opacity:.55}}

/* ---------------- shared kicker ---------------- */
.wk2 .wx-kicker{margin:0 0 12px;font:700 12px var(--p-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--p-accent)}

/* ---------------- day-by-day rail ---------------- */
.wk2 .wx-glance{margin:2em 0 1.4em;padding:22px 0 8px;border-top:1px solid var(--p-line)}
.wk2 .wx-tl{position:relative;display:flex;gap:12px;margin:0;padding:6px 2px 22px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.wk2 .wx-tl::before{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;border-radius:2px;background:var(--p-line);pointer-events:none}
.wk2 .wx-tl li{position:relative;flex:0 0 min(230px,72%);margin:0;padding:34px 16px 16px;scroll-snap-align:start;border:1px solid var(--p-line);border-radius:20px;background:var(--p-paper)}
.wk2 .wx-tl li::before{content:"";position:absolute;left:16px;top:19px;width:12px;height:12px;border-radius:50%;background:var(--p-paper);border:2px solid var(--p-accent)}
.wk2 .wx-tl li::marker{content:none}
.wk2 .wx-tl time{position:absolute;left:36px;top:14px;font:700 12px var(--p-mono);letter-spacing:.06em;color:var(--p-muted)}
.wk2 .wx-tl a{display:block;font:650 15.5px/1.38 var(--p-sans);color:var(--p-head);text-decoration:none}
.wk2 .wx-tl a:hover,.wk2 .wx-tl a:focus-visible{color:var(--p-accent)}
.wk2 .wx-tl__ink{position:absolute;left:0;bottom:6px;height:2px;border-radius:2px;width:100%;background:var(--p-accent);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ---------------- numbers grid ---------------- */
.wk2 .wx-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 1.6em}
.wk2 .wx-num{position:relative;overflow:hidden;padding:18px 16px 16px;border:1px solid var(--p-line);border-radius:20px;background:var(--p-paper)}
.wk2 .wx-num b{display:block;white-space:nowrap;font:800 clamp(26px,3vw,36px)/1 var(--p-sans);letter-spacing:-.04em;color:var(--p-head);font-variant-numeric:tabular-nums}
.wk2 .wx-num span{display:block;margin-top:8px;font:500 13.5px/1.4 var(--p-sans);color:var(--p-muted)}
.wk2 .wx-num::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--p-accent);opacity:.8}

/* ---------------- price chart ---------------- */
.wk2 .wx-chart{margin:0 0 2.2em;padding:22px 22px 16px;border:1px solid var(--p-line);border-radius:24px;background:var(--p-paper)}
.wk2 .wx-chart__cap{margin:0 0 12px;font:400 15px/1.5 var(--p-sans);color:var(--p-muted)}
.wk2 .wx-chart__cap strong{display:block;margin-bottom:2px;font:750 18px/1.3 var(--p-sans);color:var(--p-head)}
.wk2 .wx-chart__key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 14px;padding:0;list-style:none;font:500 13px var(--p-sans);color:var(--p-text)}
.wk2 .wx-chart__key li{display:inline-flex;align-items:center;gap:8px;margin:0}
.wk2 .wx-chart__key li::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--wx-old)}
.wk2 .wx-chart__key li.-new::before{background:var(--wx-new)}
.wk2 .wx-chart__rows{display:grid;gap:14px}
.wk2 .wx-row{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:12px}
.wk2 .wx-row__name{font:650 13.5px var(--p-sans);color:var(--p-head)}
.wk2 .wx-row__bars{display:grid;gap:2px}
.wk2 .wx-bar{position:relative;display:flex;align-items:center;min-height:26px;outline:none}
.wk2 .wx-bar i{display:block;flex:0 0 auto;height:18px;min-width:4px;width:calc(var(--v) / 50 * 72%);border-radius:0 4px 4px 0;background:var(--wx-old)}
.wk2 .wx-bar.-new i{background:var(--wx-new)}
.wk2 .wx-bar em{margin-left:10px;font:500 12.5px var(--p-mono);font-style:normal;color:var(--p-text);white-space:nowrap}
.wk2 .wx-bar:hover i,.wk2 .wx-bar:focus-visible i{filter:brightness(1.12)}
.wk2 .wx-tip{position:fixed;z-index:60;max-width:260px;padding:8px 12px;border-radius:10px;background:var(--wk-ink,#04110d);color:#e7f5ef;
  font:500 13px/1.4 var(--p-sans);pointer-events:none;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity .15s}
.wk2 .wx-tip.-on{opacity:1}
.wk2 .wx-chart__table{margin-top:14px;font:500 14px var(--p-sans)}
.wk2 .wx-chart__table summary{cursor:pointer;color:var(--p-accent);font-weight:600}
.wk2 .wx-chart__table table{width:100%;margin-top:10px;border-collapse:collapse;font-size:14px}
.wk2 .wx-chart__table th,.wk2 .wx-chart__table td{padding:7px 8px;border-bottom:1px solid var(--p-line);text-align:left}
@media (max-width:560px){
  .wk2 .wx-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk2 .wx-row{grid-template-columns:1fr;gap:4px}
  .wk2 .wx-chart{padding:18px 16px 14px}
}

/* ---------------- motion states (only when weekly-fx.js animates) ---------------- */
.wk2.wx-on .wx-bar i{width:0}
.wk2.wx-on .wx-bar em{opacity:0}
.wk2.wx-on .wx-tl li{opacity:0}
.wk2 .ev.-wx-stamp{display:inline-block}
@media (prefers-reduced-motion:reduce){
  .wk2.wx-on .wx-bar i{width:calc(var(--v) / 50 * 72%)}
  .wk2.wx-on .wx-bar em,.wk2.wx-on .wx-tl li{opacity:1}
}
@media print{.wx-sky{display:none}}