feat: two-line cards, responsive grid, real uniform font size

src/app.css

@@ -2,8 +2,8 @@
 
 /* CSS custom properties (set dynamically via inline style from ConverterCard) */
 :root {
-  --min-col-width: 160px;
   --grid-gap: 1rem;
+  --card-font-size: 1rem; /* overridden per-grid by uniformFontSize action */
 
   /* Shadow for card elevation (theme-neutral) */
   --shadow-color: 30deg 8% 20%;
@@ -238,13 +238,28 @@
 }
 
 /* ── Results grid ──────────────────────────────────────────────────────────── */
+/* Responsive column count: 1 col mobile, 2 col tablet, 3 col desktop.        */
+/* Cards grow to fill available space (1fr). Column count is a minimum —      */
+/* more columns are fine if content allows.                                    */
 .results-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(var(--min-col-width), 1fr));
+  grid-template-columns: 1fr;
   gap: var(--grid-gap);
   margin-top: 1.5rem;
 }
 
+@media (min-width: 480px) {
+  .results-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 900px) {
+  .results-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
 /* ── Result tile ───────────────────────────────────────────────────────────── */
 .result-tile {
   cursor: pointer;
@@ -256,6 +271,9 @@
   display: flex;
   flex-direction: column;
   gap: 0.2rem;
+  /* Fixed two-line height so all cards are the same size */
+  min-height: 4.5rem;
+  justify-content: center;
   transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
   user-select: none;
   /* Pico's [role=button] rule sets --pico-color: var(--pico-primary-inverse)
@@ -272,16 +290,21 @@
 }
 
 .result-value {
-  font-size: 1rem;
+  font-size: var(--card-font-size, 1rem);
   font-weight: 600;
   font-variant-numeric: tabular-nums;
-  word-break: break-all;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   /* color inherits from .result-tile which has already corrected for Pico's button reset */
 }
 
 .result-label {
-  font-size: 0.85rem;
+  font-size: var(--card-font-size, 0.85rem);
   color: var(--color-label);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* .result-symbol removed — symbol is now rendered inline in the label */