/*
 * Visual hardening r14
 *
 * Static presentation only. The live feed, motion source, story ordering,
 * curation, lifecycle, and cycle runtime remain unchanged.
 */

/* The supplied mark is transparent and tightly cropped so it can stay crisp
   without the old circular image treatment at every placement. */
.brand-logo,
.footer-brand img,
.about-mark img {
  object-fit: contain;
  background: transparent;
}

.brand-logo {
  border-radius: 0;
  box-shadow: none;
}

/* The content rail shares the exact right reading edge with the header
   controls rather than appearing to run into the page edge. */
.market-ticker {
  --ticker-page-edge: max(20px, calc((100vw - var(--page)) / 2));
}

.ticker-viewport {
  padding-right: var(--ticker-page-edge);
}

/* Three PNG marks replace boxed SVG treatments. They remain pure artwork:
   no tile, plate, or square background sits behind them. */
.panel-mark {
  display: block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.lead-kicker > .panel-mark {
  width: 25px;
  height: 25px;
}

.certain-panel .panel-title .panel-mark,
.asset-panel .panel-title .panel-mark {
  width: 22px;
  height: 22px;
}

/* The signal-rail pattern stays intact, but yellow lighting is removed from
   the moving rows. Gold is now reserved for key values and brand marks. */
.certain-panel .intel-scroll-sequence > .intel-row,
.asset-scroll .asset-row,
.asset-scroll .asset-row:nth-child(odd) {
  background: #0b0e0f;
}

.certain-panel .intel-scroll-sequence > .intel-row::before,
.asset-scroll .asset-row::before {
  display: none;
}

.certain-panel .intel-scroll-sequence > .intel-row:hover,
.asset-scroll .asset-row:hover {
  background: #121617;
}

.certain-panel .intel-value,
.asset-scroll .asset-range-wrap {
  background: rgba(255, 255, 255, 0.018);
}

/* Replace static pseudo-labels with real, source-derived labels. The marker
   is deliberately high in the panel header, away from moving content. */
.certain-panel .panel-title,
.asset-panel .panel-title {
  position: relative;
}

.certain-panel .panel-title::after,
.asset-panel .panel-title::after {
  display: none;
  content: none;
}

.panel-horizon {
  position: absolute;
  top: 9px;
  right: 15px;
  color: var(--muted-strong);
  font-family: var(--sans);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
}

.asset-scroll .asset-range-wrap {
  display: grid;
  place-content: center end;
}

/* All Top Story values now occupy the same visual baseline. Change keeps its
   direction in color and sign while its number receives equal emphasis. */
.lead-bottom {
  align-items: flex-end;
}

.lead-metrics {
  align-items: stretch;
}

.lead-metric {
  min-height: 54px;
  justify-content: flex-end;
}

.lead-value,
.lead-value.primary {
  display: block;
  color: var(--ink);
  font-size: clamp(21px, 1.5vw, 25px);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
  letter-spacing: -0.06em;
  line-height: 1;
  white-space: nowrap;
}

.lead-value.primary {
  color: var(--accent-bright);
}

.lead-label {
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* The market actions have a clear raised/resting state and a pressed state,
   including the Kalshi source color. */
.lead-action {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 0 rgba(12, 52, 111, 0.94),
    0 12px 24px rgba(47, 120, 238, 0.16);
}

.lead-action.source-kalshi {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 0 #087352,
    0 12px 24px rgba(9, 216, 150, 0.14);
}

.lead-action:hover {
  transform: translateY(-2px);
}

.lead-action:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(12, 52, 111, 0.94),
    0 4px 9px rgba(47, 120, 238, 0.14);
}

.lead-action.source-kalshi:active {
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.18),
    0 1px 0 #087352,
    0 4px 9px rgba(9, 216, 150, 0.12);
}

.poly-btn {
  border: 1px solid rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 rgba(12, 52, 111, 0.88),
    0 8px 16px rgba(47, 120, 238, 0.14);
}

.poly-btn.source-kalshi {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 3px 0 #087352,
    0 8px 16px rgba(9, 216, 150, 0.12);
}

.poly-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
}

.poly-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.16),
    0 1px 0 rgba(12, 52, 111, 0.88),
    0 3px 8px rgba(47, 120, 238, 0.12);
}

.poly-btn.source-kalshi:active {
  box-shadow:
    inset 0 1px 0 rgba(0, 0, 0, 0.16),
    0 1px 0 #087352,
    0 3px 8px rgba(9, 216, 150, 0.1);
}

@media (max-width: 760px) {
  .market-ticker {
    --ticker-page-edge: 16px;
  }

  .panel-horizon {
    top: 8px;
    right: 13px;
    font-size: 8px;
  }

  .top-grid {
    grid-template-rows: 370px 186px 210px;
  }

  .lead-metric {
    min-height: 47px;
  }

  .lead-value,
  .lead-value.primary {
    font-size: clamp(18px, 5.65vw, 22px);
  }
}