/* Mobile shell — MY PERFORMANCE (see mshell/performance.js). */
@media (max-width: 979px) {
  html.web-shell .mwp { gap: 12px; }
  html.web-shell .mwp-priv { display: inline-flex; align-items: center; gap: 5px; }
  html.web-shell .mwp-hero { gap: 12px; padding: 18px 16px 16px; background: linear-gradient(180deg, var(--mws-hero-a), var(--mws-hero-b)); }
  html.web-shell .mwp-herohd { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  html.web-shell .mwp-herohd .mws-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.web-shell .mwp-bigrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  html.web-shell .mwp-big {
    font-family: var(--mws-mono); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--mws-ink);
  }
  html.web-shell .mwp-roc { font-size: 11px; padding: 3px 8px; }
  html.web-shell .mwp-sub { font-size: 11.5px; color: var(--mws-ink-3); margin-top: -6px; }
  html.web-shell .mwp-picks { display: flex; gap: 8px; min-width: 0; }
  html.web-shell .mwp-pick {
    position: relative; display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    height: 34px; padding: 0 12px; border-radius: 999px;
    border: 1px solid var(--mws-line); color: var(--mws-ink-2);
    font-family: var(--mws-mono); font-size: 11px; cursor: pointer;
  }
  html.web-shell .mwp-pick .tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.web-shell .mwp-pick .car { font-size: 9px; color: var(--mws-ink-3); }
  html.web-shell .mwp-pick.on { color: var(--mws-gold); border-color: rgba(240, 185, 11, 0.35); background: rgba(240, 185, 11, 0.08); }
  html.web-shell .mwp-selnative { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
  html.web-shell .mwp-chartwrap { display: flex; flex-direction: column; gap: 6px; }
  html.web-shell .mwp-chartcap {
    display: flex; justify-content: space-between; gap: 6px;
    font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3);
  }
  html.web-shell .mwp-ranges .mws-chip { min-height: 32px; }
  html.web-shell .mwp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html.web-shell .mwp-tile { padding: 14px; gap: 5px; border-radius: 14px; min-width: 0; }
  html.web-shell .mwp-tile .mws-lbl { font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.web-shell .mwp-tile .v {
    font-family: var(--mws-mono); font-size: 17px; font-weight: 600; color: var(--mws-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html.web-shell .mwp-tile .v.mwp-streak { font-family: var(--font); font-size: 15px; font-weight: 800; }
  html.web-shell .mwp-tile .s { font-family: var(--mws-mono); font-size: 10px; color: var(--mws-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.web-shell .mwp-end { font-family: var(--mws-mono); font-size: 13px; font-weight: 600; }
  html.web-shell .mwp-cap { text-align: left; font-size: 11px; }
  html.web-shell .mwp-share { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; }
  html.web-shell .mwp-cstats { padding-bottom: 4px; }
  html.web-shell .mwp-cstats .v { font-size: 14px; }
  html.web-shell .mwp-clist { display: flex; flex-direction: column; margin: 0 -4px; }
  html.web-shell .mwp-crow { border-top: 1px solid var(--mws-line-2); }
  html.web-shell .mwp-crowhd {
    display: flex; align-items: center; gap: 12px; padding: 12px 4px; cursor: pointer; min-height: 44px;
  }
  html.web-shell .mwp-crowhd .meta { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
  html.web-shell .mwp-crowhd .nm { font-weight: 800; font-size: 14px; display: flex; align-items: baseline; gap: 8px; }
  html.web-shell .mwp-pct { font-family: var(--mws-mono); font-size: 10px; font-weight: 500; }
  html.web-shell .mwp-crowhd .sub { font-family: var(--mws-mono); font-size: 10.5px; color: var(--mws-ink-3); }
  html.web-shell .mwp-crowhd .v { font-family: var(--mws-mono); font-size: 14px; font-weight: 600; flex-shrink: 0; }
  html.web-shell .mwp-track { height: 4px; border-radius: 999px; background: var(--mws-well); overflow: hidden; margin-top: 3px; }
  html.web-shell .mwp-track span { display: block; height: 100%; background: var(--mws-up); border-radius: 999px; }
  html.web-shell .mwp-track span.dn { background: var(--mws-down); }
  html.web-shell .mwp-chev { color: var(--mws-ink-3); font-size: 18px; transition: transform .15s; flex-shrink: 0; }
  html.web-shell .mwp-crow.open .mwp-chev { transform: rotate(90deg); }
  html.web-shell .mwp-cdet { display: flex; flex-direction: column; gap: 12px; padding: 4px 4px 14px; }
  html.web-shell .mwp-cdet .mws-btn { height: 42px; font-size: 13px; }
  html.web-shell .mwp-hnote { font-size: 11.5px; color: var(--mws-ink-3); line-height: 1.45; }
  html.web-shell .mwp-disc { font-size: 11.5px; padding: 2px 6px; }
  html.web-shell .mwp-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  html.web-shell .mwp-empty svg { color: var(--mws-gold); }
  html.web-shell .mwp-empty .t { font-weight: 800; color: var(--mws-ink); font-size: 15px; }
}