/* OddsQ r77: aligned desktop intelligence composition and continuous depth rail. */

@media (min-width: 1181px) {
  body {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 50% 10%, rgba(255, 255, 255, 0.025), transparent 34rem),
      linear-gradient(180deg, #07090a 0%, #040606 58%, #080a0a 100%) !important;
  }

  /* One quiet frame connects the header composition to the footer instead of
     making the footer look like a separate floating box. */
  body::after {
    position: absolute;
    z-index: 0;
    top: 102px;
    right: max(8px, calc((100% - var(--page)) / 2 - 10px));
    bottom: 0;
    left: max(8px, calc((100% - var(--page)) / 2 - 10px));
    pointer-events: none;
    content: "";
    border: 1px solid rgba(192, 201, 204, 0.105);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, 0.012), transparent 7%, transparent 93%, rgba(255, 255, 255, 0.012));
    box-shadow:
      inset 1px 0 0 rgba(255, 255, 255, 0.018),
      inset -1px 0 0 rgba(255, 255, 255, 0.018),
      0 0 34px rgba(0, 0, 0, 0.38);
  }

  .site-header,
  .market-ticker,
  .status-banner,
  .dashboard,
  .site-footer {
    position: relative;
    z-index: 1;
  }

  /* Align Top Story with 1H + 6H and split the remaining three tracks evenly
     between High-Confidence Markets and Asset Price Odds. */
  .top-grid {
    grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 3fr)) !important;
    grid-template-rows: 338px !important;
    gap: 12px !important;
  }

  .top-grid > .lead-panel,
  .top-grid > .certain-panel,
  .top-grid > .asset-panel {
    height: 338px !important;
    min-height: 338px !important;
    grid-row: 1 !important;
  }

  .top-grid > .lead-panel {
    grid-column: 1 !important;
  }

  .top-grid > .certain-panel {
    grid-column: 2 !important;
  }

  .top-grid > .asset-panel {
    grid-column: 3 !important;
  }

  /* A restrained silver bevel gives every major surface physical depth while
     preserving the black OddsQ visual language. */
  .top-grid > .panel,
  .primary-window-grid .market-card,
  .continuation-stream .market-card,
  .window-continuation {
    border-color: rgba(188, 199, 202, 0.16) !important;
    background:
      radial-gradient(circle at 92% 3%, rgba(255, 255, 255, 0.045), transparent 15rem),
      linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 38%),
      rgba(20, 24, 26, 0.97) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(0, 0, 0, 0.72),
      0 2px 0 rgba(0, 0, 0, 0.72),
      0 13px 30px rgba(0, 0, 0, 0.2) !important;
  }

  .top-grid > .panel::before,
  .window-continuation::before {
    display: block !important;
    right: 18px;
    left: 18px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(225, 231, 231, 0.2), transparent) !important;
  }

  /* Compact Top Story horizontally by sizing metrics for their real maximums,
     not four equal oversized columns. */
  .lead-panel {
    padding: 15px 18px 15px !important;
  }

  .lead-copy {
    margin: 13px 0 auto !important;
  }

  .lead-copy.has-image {
    grid-template-columns: minmax(0, 1fr) 72px !important;
    gap: 10px !important;
  }

  .lead-copy.has-image .lead-event-image {
    width: 72px !important;
    margin-top: 3px !important;
  }

  .lead-title {
    max-width: 100% !important;
    font-size: 21px !important;
    letter-spacing: -0.038em !important;
    line-height: 1.13 !important;
  }

  .lead-subtitle {
    max-width: 100% !important;
    font-size: 10.5px !important;
    line-height: 1.36 !important;
    -webkit-line-clamp: 3 !important;
  }

  .lead-bottom {
    grid-template-columns: minmax(0, 1fr) 186px !important;
    gap: 10px !important;
    padding-top: 10px !important;
  }

  .lead-metrics {
    display: grid !important;
    width: 100%;
    height: 56px !important;
    grid-template-columns:
      minmax(58px, 0.95fr)
      minmax(52px, 0.78fr)
      minmax(58px, 0.88fr)
      minmax(65px, 1fr) !important;
  }

  .lead-metric {
    min-width: 0;
    height: 52px !important;
    padding: 0 5px !important;
  }

  .lead-value,
  .lead-value.primary {
    overflow: hidden;
    font-size: 22px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  .lead-label {
    font-size: 7.5px !important;
  }

  .lead-action {
    width: 186px;
    min-width: 0 !important;
    grid-template-columns: 31px minmax(0, 1fr) !important;
    padding: 8px 10px !important;
  }

  /* High-confidence rows use every available pixel and reserve only the
     measured probability width, keeping normal headlines on two lines. */
  .certain-panel .panel-title,
  .certain-panel .intel-row {
    grid-template-columns: minmax(0, 1fr) 70px !important;
  }

  .certain-panel .panel-title {
    min-height: 44px !important;
    padding: 0 13px !important;
  }

  .certain-panel .intel-list {
    height: 294px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-color: rgba(184, 194, 196, 0.26) transparent;
    scrollbar-width: thin;
    scroll-snap-type: y proximity;
  }

  .certain-panel .intel-scroll-track,
  .certain-panel .intel-scroll-track.is-looping,
  .asset-panel .asset-rows,
  .asset-panel .asset-rows.is-scrolling.is-looping {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .certain-panel .intel-scroll-sequence[data-loop-clone="true"],
  .asset-panel .asset-sequence[data-loop-clone="true"] {
    display: none !important;
  }

  .certain-panel .intel-scroll-sequence {
    gap: 6px !important;
    padding: 3px 7px !important;
  }

  .certain-panel .intel-row,
  .certain-panel .intel-scroll-track > .intel-row {
    flex: 0 0 92px !important;
    height: 92px !important;
    min-height: 92px !important;
    gap: 10px !important;
    padding: 10px 11px 10px 13px !important;
    border: 1px solid rgba(255, 255, 255, 0.075) !important;
    border-radius: 12px;
    background: rgba(5, 8, 9, 0.34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.025),
      0 4px 11px rgba(0, 0, 0, 0.12);
    scroll-snap-align: start;
  }

  .certain-panel .intel-copy b {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13.5px !important;
    line-height: 1.28 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2 !important;
  }

  .certain-panel .intel-value {
    justify-self: stretch;
    text-align: right;
  }

  .certain-panel .intel-value b {
    display: inline-flex;
    width: 62px;
    min-width: 62px !important;
    justify-content: center;
    padding: 5px 5px !important;
    font-size: 15px !important;
  }

  /* Five complete asset rows remain visible. A fixed icon column aligns every
     logo, name, and ticker regardless of label length. */
  .asset-panel .panel-title {
    min-height: 44px !important;
    padding: 0 13px !important;
  }

  .asset-panel .asset-scroll,
  .asset-panel .asset-track,
  .asset-panel .asset-body {
    height: 294px !important;
  }

  .asset-panel .asset-body {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-color: rgba(184, 194, 196, 0.26) transparent;
    scrollbar-width: thin;
    scroll-snap-type: y proximity;
  }

  .asset-panel .asset-sequence {
    gap: 4px !important;
    padding: 2px 7px !important;
  }

  .asset-panel .asset-rows {
    grid-auto-rows: 54px !important;
  }

  .asset-panel .asset-row,
  .asset-panel .asset-row:nth-child(odd) {
    min-height: 54px !important;
    height: 54px !important;
    grid-template-columns: minmax(0, 1.03fr) minmax(106px, 0.97fr) !important;
    gap: 10px !important;
    padding: 6px 11px !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: 11px;
    background: rgba(5, 8, 9, 0.32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.022);
    scroll-snap-align: start;
  }

  .asset-panel .asset-identity {
    display: grid !important;
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 9px !important;
  }

  .asset-panel .asset-icon {
    width: 34px !important;
    height: 34px !important;
    justify-self: center;
  }

  .asset-panel .asset-icon img {
    width: 33px !important;
    height: 33px !important;
  }

  .asset-panel .asset-copy {
    display: grid;
    min-width: 0;
    align-content: center;
  }

  .asset-panel .asset-copy b {
    overflow: hidden;
    font-size: 13px !important;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .asset-panel .asset-copy em {
    margin-top: 2px;
    font-size: 9px !important;
    line-height: 1;
  }

  .asset-panel .asset-range-wrap {
    min-width: 0;
    justify-self: stretch;
    text-align: right;
  }

  .asset-panel .asset-range {
    font-size: 13px !important;
    white-space: nowrap;
  }

  /* Empty verification slots should look intentional, not like missing DOM. */
  .primary-window-grid .empty-card {
    border-style: dashed !important;
    border-color: rgba(188, 199, 202, 0.13) !important;
    background:
      radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.028), transparent 10rem),
      rgba(13, 17, 18, 0.78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  }

  .primary-window-grid .empty-card .card-title {
    color: rgba(225, 230, 228, 0.66);
  }

  .primary-window-grid .empty-card .card-change,
  .primary-window-grid .empty-card .card-meta {
    color: rgba(188, 198, 195, 0.46);
  }

  /* The footer is the lower crossbar of the page frame, not another box. */
  .site-footer {
    margin-top: 22px !important;
    margin-bottom: 0 !important;
    padding: 21px 24px 25px !important;
    border: 0 !important;
    border-top: 1px solid rgba(192, 201, 204, 0.15) !important;
    border-radius: 22px 22px 0 0 !important;
    background:
      radial-gradient(ellipse at 50% 0, rgba(255, 255, 255, 0.045), transparent 55%),
      linear-gradient(180deg, rgba(15, 18, 19, 0.98), rgba(6, 8, 8, 0.99)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.035),
      0 -14px 32px rgba(0, 0, 0, 0.26) !important;
  }
}