/* Desktop column. Ordinary pages stay centered so the mosaic shows in the side gutters.
   Phones keep each page's own full-width layout. TV, VR, the watch player, and editors are not columned. */
:root { --hub-col: 1180px; --hub-gutter: 1.5rem; }

html { overflow-x: clip; }

@media (min-width: 1000px) {
  body:not(.ltv-tvmode):not(.dnd-body):not(.ga-tvbody):not(.wr-tv):not(.gx-tv):not(.cr-immersive):not(.hub-vr):not(.hub-watch):not(.cr-page):not(.hm-app) .hub-top {
    width: min(var(--hub-col), calc(100% - 2 * var(--hub-gutter)));
    max-width: var(--hub-col);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    border-radius: 0 0 16px 16px;
  }

  body:not(.ltv-tvmode):not(.dnd-body):not(.ga-tvbody):not(.wr-tv):not(.gx-tv):not(.cr-immersive):not(.hub-vr):not(.hub-watch):not(.cr-page):not(.hm-app) :is(
    main, .st-wrap, .dl-wrap, .gl-wrap, .hr-wrap, .ga-wrap, .bk-wrap, .ab-wrap, .cmd-wrap, .ltv-main
  ) {
    width: min(var(--hub-col), calc(100% - 2 * var(--hub-gutter)));
    max-width: var(--hub-col);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* A page shell already provides the column; don't shrink a nested wrap again. */
  body :is(.st-wrap, .dl-wrap, .gl-wrap, .gl-party, main) :is(.ga-wrap, .st-wrap, .dl-wrap) {
    width: auto;
    max-width: none;
  }

}

/* Wide tables scroll inside the page instead of stretching the viewport. Phones included. */
body.st-page .st-wrap table,
body.st-page .st-wrap pre,
body.dl-page .dl-wrap table,
body.has-mosaic .cmd-wrap table,
body.hub .hub-stats-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Import review comparison stays inside the viewport, including the manual-import modal. */
.ir-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.45rem; min-width: 0; }
.ir-cmp > div { min-width: 0; overflow-wrap: anywhere; background: rgba(2, 6, 23, 0.45); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; padding: 0.35rem 0.5rem; }
.ir-k { display: block; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; margin-bottom: 0.15rem; }
.ir-choices { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; }
.ir-modal, .ir-panel, .ir-cand { max-width: 100%; min-width: 0; box-sizing: border-box; }
@media (max-width: 560px) {
  .ir-cmp { grid-template-columns: minmax(0, 1fr); }
}