/* Cross-view mobile finishing pass. Loaded last so the reference geometry wins. */

@media (max-width: 820px) {
  #ideas .world-stage {
    overflow: hidden !important;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] .world-stage {
    height: 430px;
    min-height: 430px;
  }

  #ideas .opc-pixel-world[data-mobile-world-expanded="true"] .world-stage canvas {
    object-fit: cover;
  }

  /* Demand bounty: four hot cards remain visible and the primary action stays circular. */
  .opc-v2-hot-demand__rail {
    grid-auto-columns: min(22vw, 96px);
    gap: 6px;
  }

  .opc-v2-hot-demand__rail > button {
    min-height: 84px;
    padding-inline: 7px;
  }

  .opc-v2-hot-demand__rail > button > span {
    width: 100%;
    font-size: 10px;
  }

  .opc-v2-hot-demand__rail strong,
  .opc-v2-hot-demand__rail em {
    font-size: 9px;
  }

  .opc-v2-demand-fab {
    width: 56px;
    min-width: 56px;
    height: 56px;
    min-height: 56px;
    flex-direction: column;
    gap: 1px;
    padding: 5px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 13px;
    white-space: nowrap;
  }

  .opc-v2-demand-fab img {
    width: 21px;
    height: 21px;
  }

  .opc-page[data-mobile-view="demands"] .opc-mobile-dock button[aria-pressed="true"] {
    background: transparent;
  }

  /* Heat ranking: all seven status choices fit at the reference width. */
  .opc-v2-heat__status-rail {
    gap: 4px;
  }

  .opc-v2-heat__status-rail button {
    min-width: 52px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .opc-v2-heat-card.is-top .opc-v2-heat-card__identity h3 {
    font-size: 10px;
    line-height: 13px;
    -webkit-line-clamp: 2;
  }

  .opc-v2-heat-card.is-top footer {
    bottom: 5px;
  }

  /* Learning: compact the portals, then restore real information inside all four tool cards. */
  .opc-page[data-mobile-view="learning"] #resources {
    padding-top: 10px;
  }

  .opc-page[data-mobile-view="learning"] #learning {
    margin-bottom: 4px;
  }

  .opc-page[data-mobile-view="learning"] #learning > a {
    min-height: 38px;
  }

  .opc-page[data-mobile-view="learning"] #resource-tools .opc-resource-card--portal .opc-resource-card__media {
    height: 90px;
  }

  .opc-page[data-mobile-view="learning"] #resource-tools .opc-resource-card--portal .opc-resource-card__body {
    padding: 6px 7px;
  }

  .opc-page[data-mobile-view="learning"] #resource-tools .opc-resource-card--portal .opc-resource-card__body > p {
    display: none;
  }

  .opc-page[data-mobile-view="learning"] #resource-tools .opc-resource-tool-list a {
    min-height: 104px;
    align-content: start;
    align-items: start;
    padding: 8px;
  }

  .opc-page[data-mobile-view="learning"] #resource-tools .opc-resource-tool-list p {
    display: -webkit-box;
    margin: 2px 0 0;
    overflow: hidden;
    color: #66758d;
    font-size: 8px;
    line-height: 12px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .opc-page[data-mobile-view="learning"] #resource-tools .opc-resource-tool-list em {
    display: block;
    margin-top: 2px;
    color: #0052d9;
    font-size: 8px;
    font-style: normal;
    line-height: 12px;
  }

  /* News: match the tighter editorial rhythm so all three stories enter the first screen. */
  #news.tcwf-section {
    padding-top: 10px;
  }

  #news .tcwf-section__header {
    margin-bottom: 6px;
  }

  #news .opc-event-slide--static > img {
    height: clamp(150px, 34vw, 162px);
  }

  #news .opc-event-slide--static > div {
    padding: 8px 10px 9px;
  }

  #news .opc-news-marquee {
    margin-top: 8px;
  }

  #news .opc-news-marquee .opc-news-grid {
    gap: 7px;
  }

  #news .opc-news-marquee .opc-news-grid article {
    padding-block: 8px;
  }
}