Fix: card text contrast, stable grid order, independent highlight/input states, highlight dismiss

- Explicit dark colors on .result-value, .result-label, .result-symbol, .highlighted-value, .highlighted-label
- Include from-unit in results grid (stable definition-order); from-unit tile shows Big(inputValue) and gets is-input-unit dashed-border class
- Shift+click no longer clears highlightedUnitId — fromUnitId and highlightedUnitId are now fully independent states
- Add × dismiss button (aria-label="Remove highlight") to .highlighted-result banner; .highlighted-result gains position:relative

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import { browser } from '$app/environment';
   import { goto } from '$app/navigation';
   import { page } from '$app/state';
+  import { Big } from 'big.js';
   import { florpUnits } from '$lib/units/definitions';
   import { convertById } from '$lib/convert';
   import { FRACTIONAL_DIGITS } from '$lib/config';
@@ -41,18 +42,19 @@
     }
   }
 
-  // ── Derived: results for all units except fromUnit ─────────────────────────
+  // ── Derived: results for ALL units in definition order ─────────────────────
   let results = $derived<ResultItem[]>(
-    units
-      .filter((u) => u.id !== fromUnitId)
-      .map((u) => ({
-        unit: u,
-        convertedValue: convertById(inputValue, fromUnitId, u.id, units)
-      }))
+    units.map((u) => ({
+      unit: u,
+      convertedValue:
+        u.id === fromUnitId
+          ? Big(inputValue) // from-unit always equals inputValue
+          : convertById(inputValue, fromUnitId, u.id, units)
+    }))
   );
 
-  // ── Derived: highlighted result (unit + value) sourced from results array ──
-  // The highlighted unit is always a non-from unit, so it's always in results.
+  // ── Derived: highlighted result (unit + value) sourced from full results ────
+  // Results now includes all units, so from-unit can be highlighted too.
   let highlightedResult = $derived(
     highlightedUnitId !== null
       ? (results.find((r) => r.unit.id === highlightedUnitId) ?? null)
@@ -90,10 +92,10 @@
   function handleSetInput(id: string) {
     // Shift+click: promote result unit to from-unit.
     // Re-express the current value in terms of the new from-unit.
+    // highlightedUnitId is NOT cleared — the two states are independent.
     const convertedValue = convertById(inputValue, fromUnitId, id, units);
     inputValue = parseFloat(convertedValue.toFixed(FRACTIONAL_DIGITS));
     fromUnitId = id;
-    highlightedUnitId = null;
   }
 </script>
 
@@ -103,6 +105,11 @@
 
 {#if highlightedResult !== null}
   <div class="highlighted-result">
+    <button
+      class="highlight-dismiss"
+      aria-label="Remove highlight"
+      onclick={() => (highlightedUnitId = null)}
+    >×</button>
     <span class="highlighted-value">{formatBig(highlightedResult.convertedValue)}</span>
     <span class="highlighted-label">{highlightedResult.unit.labelPlural}</span>
     <span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>