/* HYPE Fundamentals — compact mobile screener patch
   Append AFTER /mobile-five-column.css. Desktop and tablet >720px unaffected.
   Keeps original data, five metric order, SVG behavior, info popups, and card selection. */
@media (max-width: 720px), (min-width: 721px) and (max-width: 1060px) and (orientation: landscape) and (max-height: 500px) and (any-pointer: coarse) {
  /* One compact header line: token | price | score | verdict. */
  #mobileTokenCards .mobile-token-card-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 1.05fr) minmax(0, .91fr) minmax(0, .86fr) !important;
    grid-template-rows: minmax(0, auto) !important;
    align-items: center !important;
    column-gap: clamp(2px, .8vw, 7px) !important;
    row-gap: 0 !important;
    padding: 9px 7px !important;
  }
  #mobileTokenCards .mobile-token-identity {
    grid-column: 1 !important; grid-row: 1 !important;
    min-width: 0 !important; align-self: center !important;
    justify-self: stretch !important;
  }
  #mobileTokenCards .mobile-token-identity .table-token {
    gap: clamp(3px, .8vw, 6px) !important; min-width: 0 !important;
  }
  #mobileTokenCards .mobile-token-identity .token-mini { flex: 0 0 auto; }
  #mobileTokenCards .mobile-token-identity .table-name {
    max-width: 100% !important; overflow: hidden; text-overflow: ellipsis;
  }
  #mobileTokenCards .mobile-token-primary {
    grid-column: 2 !important; grid-row: 1 !important;
    justify-self: center !important; align-self: center !important;
    min-width: 0 !important; max-width: 100% !important;
    text-align: center !important;
  }
  #mobileTokenCards .mobile-token-primary .mobile-token-field-label {
    min-height: 0 !important; margin: 0 0 3px !important;
    font-size: clamp(8px, 1.9vw, 10px) !important;
    justify-content: center;
  }
  #mobileTokenCards .mobile-token-price {
    font-size: clamp(9px, 2.55vw, 15px) !important;
    line-height: 1.18 !important; letter-spacing: -.025em;
    white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  #mobileTokenCards .mobile-price-change {
    font-size: clamp(8px, 1.95vw, 10px) !important; margin-top: 3px !important;
  }
  #mobileTokenCards .mobile-review-row { display: contents !important; }
  #mobileTokenCards .mobile-review-row > .mobile-review-score,
  #mobileTokenCards .mobile-review-row > .mobile-review-verdict {
    grid-row: 1 !important; min-width: 0 !important;
    align-self: center !important; justify-self: center !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 3px !important;
  }
  #mobileTokenCards .mobile-review-row > .mobile-review-score { grid-column: 3 !important; }
  #mobileTokenCards .mobile-review-row > .mobile-review-verdict { grid-column: 4 !important; }
  #mobileTokenCards .mobile-review-row .mobile-token-field-label {
    width: auto !important; min-height: 0 !important;
    line-height: 1.1 !important; font-size: clamp(8px, 1.9vw, 10px) !important;
    gap: 2px !important; align-items: center !important;
    justify-content: center !important; white-space: nowrap;
  }
  #mobileTokenCards .mobile-review-row .mobile-token-field-label [data-tip],
  #mobileTokenCards .mobile-token-primary .mobile-token-field-label [data-tip] {
    transform: scale(.78); transform-origin: center center;
  }
  #mobileTokenCards .mobile-review-row .mobile-token-score,
  #mobileTokenCards .mobile-review-row .mobile-token-verdict {
    min-height: 26px !important; min-width: 0 !important;
    max-width: 100% !important;
    padding: 3px clamp(2px, .7vw, 6px) !important;
    margin: 0 !important; align-self: center !important;
    line-height: 1.15 !important;
    font-size: clamp(9px, 2.25vw, 12px) !important;
    white-space: nowrap;
  }
  #mobileTokenCards .mobile-review-row .mobile-token-verdict {
    font-size: clamp(8px, 2.1vw, 11px) !important;
  }
  /* Date also exists in the score breakdown. Hide header duplication to remove dead space. */
  #mobileTokenCards .mobile-review-date { display: none !important; }

  /* Trim metrics strip height. Five columns, no horizontal scroll, no wrapping. */
  #mobileTokenCards .mobile-token-secondary.one-line-metrics {
    display: grid !important;
    grid-template-columns: minmax(76px, 1.24fr) minmax(0, 1fr) minmax(0, .88fr) minmax(0, .98fr) minmax(28px, .58fr) !important;
    gap: 2px !important;
    padding: 5px 2px !important;
    width: 100%; max-width: 100%; min-width: 0;
    overflow: visible !important; scroll-snap-type: none !important;
    align-items: stretch;
  }
  #mobileTokenCards .one-line-metrics > .mobile-token-field,
  #mobileTokenCards .one-line-metrics > .mobile-token-field-wide {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: flex-start !important;
    gap: 3px !important;
    min-width: 0 !important; max-width: 100% !important;
    margin: 0 !important; padding: 6px 1px 5px !important;
    height: 91px !important; min-height: 91px !important;
    box-sizing: border-box !important; overflow: hidden;
  }
  #mobileTokenCards .one-line-metrics .mobile-token-field-label {
    display: flex; align-items: center; justify-content: center;
    min-height: 14px; width: 100%; line-height: 1.1;
    font-size: clamp(8px, 1.9vw, 10px) !important;
  }
  #mobileTokenCards .one-line-metrics .mobile-token-field-value {
    min-width: 0; width: 100%; margin: 1px 0 0 !important;
    font-size: clamp(11px, 3.05vw, 17px) !important;
    font-weight: 750 !important; line-height: 1.15 !important;
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  #mobileTokenCards .one-line-metrics .table-number {
    font-size: inherit !important; line-height: inherit !important;
    letter-spacing: -.035em; white-space: nowrap;
  }
  #mobileTokenCards .one-line-metrics .table-small {
    font-size: clamp(7px, 1.8vw, 9px) !important;
    font-weight: 500 !important; line-height: 1.07 !important;
    overflow-wrap: anywhere;
  }
  /* Move existing tooltip buttons to bottom, freeing horizontal room for numbers. */
  #mobileTokenCards .one-line-metrics > .mobile-token-field > .mobile-token-field-label [data-tip] {
    position: absolute !important;
    bottom: 5px !important; left: 50% !important;
    transform: translateX(-50%) scale(.66) !important;
    transform-origin: center bottom !important;
    margin: 0 !important;
  }
  #mobileTokenCards .one-line-metrics > .mobile-token-field { position: relative !important; }
  #mobileTokenCards .one-line-metrics .mobile-token-field-label .mobile-field-label-short {
    display: block; width: 100%; text-align: center;
  }
  /* Preserve SVG chart physical size (72 × 34), rather than allowing it to grow. */
  #mobileTokenCards .one-line-metrics .mini-chart-svg {
    width: 72px !important; height: 34px !important;
    max-width: none !important; min-width: 72px !important;
    flex: 0 0 auto;
  }
  #mobileTokenCards .one-line-metrics .sparkline-wrap {
    max-width: 100% !important;
  }
  #mobileTokenCards .one-line-metrics .mobile-token-field-wide {
    position: relative !important;
    justify-content: center !important;
  }
  #mobileTokenCards .one-line-metrics .mobile-token-field-wide > :not(.mobile-token-field-label) {
    display: none !important;
  }
  #mobileTokenCards .one-line-metrics .mobile-token-field-wide .mobile-field-label-short {
    display: none !important;
  }
  /* Capture: only its clickable info button, centered, with no label or number. */
  #mobileTokenCards .one-line-metrics .mobile-token-field-wide .mobile-token-field-label {
    height: 100% !important; min-height: 0 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
  }
  #mobileTokenCards .one-line-metrics .mobile-token-field-wide .mobile-token-field-label [data-tip] {
    position: static !important; transform: scale(.85) !important;
    min-height: 28px; min-width: 28px;
  }
}
/* Extra width constraints on small phones, without changing chart size. */
@media (max-width: 385px) {
  #mobileTokenCards .mobile-token-card-main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.16fr) minmax(0, .95fr) minmax(0, .85fr) !important;
    padding: 8px 4px !important;
    column-gap: 2px !important;
  }
  #mobileTokenCards .mobile-token-identity .table-token { gap: 2px !important; }
  #mobileTokenCards .mobile-token-identity .table-name { display: none !important; }
  #mobileTokenCards .mobile-token-price { font-size: clamp(9px, 2.6vw, 12px) !important; }
  #mobileTokenCards .mobile-review-row .mobile-token-score,
  #mobileTokenCards .mobile-review-row .mobile-token-verdict { padding-inline: 2px !important; }
}
