/* --- Tablet (640–1023px) ---------------------------------- */
@media (max-width: 1023px) {
  .t-shell { padding: 24px 20px 80px; }
  /* Topbar is ~960px wide on desktop (brand + 4 tabs + right-side
     controls) so it overflows any viewport narrower than ~1000px.
     Wrap the tabs onto a second row here, same pattern as mobile. */
  .t-topbar { flex-wrap: wrap; gap: 16px; row-gap: 14px; }
  .t-tabs { order: 3; flex: 1 0 100%; justify-content: flex-start; }
  .t-stats { grid-template-columns: 1fr 1fr; }
  .t-stat:nth-child(2) { border-right: 0; }
  .t-stat:nth-child(1), .t-stat:nth-child(2) { border-bottom: 1px solid var(--line); }
  .t-filters { flex-wrap: wrap; }
  .t-filter-spacer { display: none; }
  .t-search { flex: 1 0 100%; margin-top: 8px; }
  .t-table thead th { padding: 12px 8px 9px; font-size: 9.5px; }
  .t-table tbody td { padding: 12px 8px; }
  .t-detail-inner { padding: 18px 16px 22px 40px; gap: 24px; }
}

/* --- Mobile (<640px) -------------------------------------- */
@media (max-width: 639px) {
  /* Belt-and-suspenders: prevent any accidental horizontal overflow
     from escaping the viewport on narrow screens. */
  html, body { overflow-x: hidden; }

  .t-shell { padding: 16px 16px 60px; }
  .t-topbar { flex-wrap: wrap; gap: 12px; row-gap: 16px; }
  /* Tabs row: full width below the topbar. The 4 labels
     (summary/landscape/testing/methodology) don't all fit on viewports
     narrower than ~410px, so allow horizontal scroll and keep tabs from
     shrinking. Same pattern as .t-filter-group below. */
  .t-tabs {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
    /* Pull the scrollbar to the edge so it doesn't visually crowd
       the content. */
    padding-bottom: 2px;
  }
  .t-tabs::-webkit-scrollbar { height: 4px; }
  .t-tabs::-webkit-scrollbar-track { background: transparent; }
  .t-tabs::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 2px; }
  .t-tab {
    flex-shrink: 0;       /* don't let flex squash the labels */
    padding: 8px 14px;    /* tighter than desktop's 18px */
  }
  .t-topbar-right { gap: 10px; }
  .t-mcount { display: none; }
  .t-live { display: none; }

  .t-hero-headline { font-size: 26px; letter-spacing: -0.6px; }
  .t-hero-sub { font-size: 13px; }

  .t-stats { grid-template-columns: 1fr; }
  .t-stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .t-stat:last-child { border-bottom: 0; }

  .t-filters { padding: 10px 0 12px; gap: 6px; }
  .t-filter-group {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .t-filter-group::-webkit-scrollbar { height: 6px; }
  .t-filter-group::-webkit-scrollbar-track { background: transparent; }
  .t-filter-group::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
  .t-filter-sep { display: none; }
  .t-search { flex: 1 0 100%; margin-top: 6px; }

  /* Card list layout: hide table chrome, render rows as cards */
  .t-table thead { display: none; }
  .t-table, .t-table tbody, .t-table tr, .t-table td { display: block; width: 100%; }
  /* Hide detail rows by default on mobile (the universal 'tr' rule
     above would otherwise make them visible). */
  .t-table tbody tr.t-detail { display: none; }
  .t-table tbody tr.t-detail.open { display: block; }
  .t-table tbody tr.t-row {
    border: 1px solid var(--line);
    margin-bottom: 12px;
    padding: 14px 14px 12px;
    position: relative;
  }
  .t-table tbody tr.t-row:hover { background: var(--bg-1); }
  .t-table tbody tr.t-row td {
    padding: 0;
    border: 0;
  }
  .t-table tbody tr.t-row td.t-chev {
    position: absolute;
    top: 14px; right: 14px;
    width: auto;
  }
  .t-table tbody tr.t-row td:not(.t-chev) {
    margin-bottom: 8px;
  }
  .t-table tbody tr.t-row td:last-child { margin-bottom: 0; }

  /* Detail row in card mode — merged with the row above into one cohesive card */
  .t-table tbody tr.t-row.expanded {
    background: var(--bg-1);
    margin-bottom: 0;
    border-bottom-color: transparent;
  }
  .t-table tbody tr.t-detail { -webkit-tap-highlight-color: transparent; }
  .t-table tbody tr.t-detail.open {
    display: block;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-top: 0;
    margin-bottom: 12px;
    padding: 0 14px 14px;
  }
  .t-table tbody tr.t-detail.open td {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .t-table tbody tr.t-detail.open .t-detail-inner {
    padding: 14px 0 0;
    margin: 0;
    border-top: 1px solid var(--line);
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .t-detail-tools-grid { grid-template-columns: 1fr; }

  /* Testing table: labeled key-value rows in mobile card mode.
     Landscape cells are self-describing (Polygon, $52.5B), so labels
     only apply to #testTable. */
  #testTable tbody tr.t-row td[data-label] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 6px 0 !important;
    text-align: left;
  }
  #testTable tbody tr.t-row td[data-label]::before {
    content: attr(data-label);
    font-family: "JetBrains Mono", "IBM Plex Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ink-muted);
    flex-shrink: 0;
  }
}