Update style.css

style.css

@@ -431,6 +431,13 @@ tr.detail-row td { background: rgba(255,255,255,0.03); padding: 16px 18px; white
 }
 
 
+/* ============================================================
+   ADDITIONS ONLY — append this block to the end of style.css.
+   No existing rules are modified. Uses existing design tokens
+   (--ink, --muted, --line, --green, --accent, --card-bg, etc.)
+   so it matches the current look exactly.
+   ============================================================ */
+
 /* ---- Capability radar (replaces the old cat-table sliders) ---- */
 .capability-panel {
   display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
@@ -499,4 +506,58 @@ tr.detail-row td { background: rgba(255,255,255,0.03); padding: 16px 18px; white
 }
 .flag-dot {
   font-size: 0.72rem; cursor: help; opacity: 0.75;
+}
+
+/* ---- Mobile fixes ----
+   The base stylesheet only ever wired up #model-cards for the <640px
+   breakpoint; #t2i-cards didn't exist yet, so on mobile the T2I table
+   (display:none below 640px) had no replacement and the whole section
+   effectively vanished. This makes #t2i-cards behave the same way
+   #model-cards already does, and makes both card lists tappable so rows
+   stay openable on mobile instead of only working with mouse hover/click
+   on the desktop table. */
+@media (max-width: 640px) {
+  #t2i-cards { display: block; }
+}
+#t2i-cards { display: none; }
+
+.m-card, .t2i-m-card {
+  cursor: pointer;
+  position: relative;
+}
+.m-card:active, .t2i-m-card:active {
+  background: rgba(255,255,255,0.04);
+}
+.m-card .m-card-top, .t2i-m-card .m-card-top {
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+}
+.m-card .expand-hint, .t2i-m-card .expand-hint {
+  color: var(--muted-2); font-size: 0.7rem; transition: transform var(--t);
+  flex-shrink: 0;
+}
+.m-card.open .expand-hint, .t2i-m-card.open .expand-hint {
+  transform: rotate(90deg); color: var(--accent);
+}
+.m-card-detail, .t2i-m-card-detail {
+  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
+}
+
+.t2i-m-card {
+  padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); transition: background var(--t);
+}
+.t2i-m-card:last-child { border-bottom: 0; }
+.t2i-m-card-top a { color: var(--ink); font-weight: 600; font-size: 0.96rem; letter-spacing: -0.01em; }
+.t2i-m-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 10px; align-items: center; }
+.t2i-m-card-meta .params, .t2i-m-card-meta .res, .t2i-m-card-meta .date {
+  color: var(--muted-2); font-size: 0.76rem; font-variant-numeric: tabular-nums;
+}
+.t2i-m-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 7px; }
+.t2i-m-score { background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; }
+.t2i-m-score .k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); font-weight: 500; margin-bottom: 2px; }
+.t2i-m-score .v { font-size: 0.92rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
+.t2i-m-score .v.best { color: var(--green); }
+
+/* Composite-score column */
+td.score.composite, .m-score.composite .v, .t2i-m-score.composite .v {
+  color: var(--accent-2);
 }