/* Statistics-only eight-metric desktop strip.
   Keeps the mobile summary compact and adds a separate mobile-only
   settled-results row below it. DAY is the unique recorded lockedAt date count.
   Desktop type/card sizing restored to the pre-DAY baseline on 2026-09-02. */

.stats-win-metric strong {
  color:var(--green);
}

.stats-loss-metric strong {
  color:#ff8b8b;
}

.stats-push-metric strong {
  color:var(--muted);
}

.stats-day-metric strong {
  color:#d9e3d9;
}

.mobile-settled-summary {
  display:none;
}

@media (min-width:701px) {
  .statistics-summary-grid {
    grid-template-columns:1.05fr .62fr .78fr .78fr .78fr .98fr .98fr .92fr;
  }

  .statistics-summary-grid > .metric {
    min-width:0;
    padding:6.75px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .statistics-summary-grid > .metric span {
    width:100%;
    font-size:7.5px;
    line-height:1.1;
    text-align:center;
    white-space:nowrap;
  }

  .statistics-summary-grid > .metric strong {
    width:100%;
    margin:2px 0 0;
    font-size:14.4px;
    line-height:1.05;
    text-align:center;
  }

  .statistics-summary-grid .metric-info {
    width:11px;
    height:11px;
    margin-left:2px;
    vertical-align:-1px;
  }

  /* Preserve the original first four DOM positions for statistics-live.js.
     DAY is appended in DOM and visually moved to slot two only with CSS order. */
  .statistics-summary-grid > .metric:nth-child(1) { order:1; }
  .statistics-summary-grid > .stats-day-metric { order:2; }
  .statistics-summary-grid > .stats-win-metric { order:3; }
  .statistics-summary-grid > .stats-loss-metric { order:4; }
  .statistics-summary-grid > .stats-push-metric { order:5; }
  .statistics-summary-grid > .metric:nth-child(2) { order:6; }
  .statistics-summary-grid > .metric:nth-child(3) { order:7; }
  .statistics-summary-grid > .metric:nth-child(4) { order:8; }

  /* Desktop gets the breakdown in the metric strip, so avoid duplicate text. */
  .statistics-results-summary {
    display:none;
  }
}

@media (max-width:700px) {
  .statistics-summary-grid > .stats-breakdown-metric {
    display:none!important;
  }

  .mobile-settled-summary {
    display:block;
    margin:8px 0 0;
    overflow:hidden;
    border:1px solid rgba(150,158,151,.10);
    border-radius:12px;
    background:linear-gradient(145deg,#20251f,#191d17 52%,#141712);
    box-shadow:var(--shadow);
  }

  .mobile-settled-head {
    padding:9px 12px 2px;
  }

  .mobile-settled-head span {
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    line-height:1.15;
    text-transform:uppercase;
  }

  .mobile-settled-head small {
    display:block;
    margin-top:3px;
    color:rgba(232,236,231,.78);
    font-size:10px;
    line-height:1.2;
  }

  .mobile-settled-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:5px 0 9px;
  }

  .mobile-settled-metric {
    position:relative;
    min-width:0;
    padding:4px 8px 3px;
    text-align:center;
  }

  .mobile-settled-metric + .mobile-settled-metric::before {
    content:"";
    position:absolute;
    left:0;
    top:12%;
    bottom:12%;
    width:1px;
    background:rgba(150,158,151,.14);
  }

  .mobile-settled-metric span {
    display:block;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    line-height:1.1;
    white-space:nowrap;
  }

  .mobile-settled-metric strong {
    display:block;
    margin-top:4px;
    color:var(--text);
    font-size:20px;
    line-height:1;
  }

  .mobile-settled-win span { color:var(--green); }
  .mobile-settled-loss span { color:#ff6f74; }
  .mobile-settled-push span { color:var(--muted); }
}