From 49caad8252fb65426b2ae9f713c34d22d41a1e10 Mon Sep 17 00:00:00 2001
From: Jeff Chen <hello@jeff.yt>
Date: Wed, 12 Aug 2026 11:32:12 -0600
Subject: [PATCH 1/3] Points calculator: box the mark/points results, add
 equivalent-marks table

Wrap the mark and points fields in a tinted, bordered box so they read
as calculator output rather than more form inputs. Below them, add a
collapsed-by-default table listing the mark worth the same points in
every other event for the selected category and gender.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 pages/projects/track/points-calculator.tsx | 118 ++++++++++++++++-----
 styles/pages/track-calculators.module.scss |  48 +++++++++
 2 files changed, 141 insertions(+), 25 deletions(-)

diff --git a/pages/projects/track/points-calculator.tsx b/pages/projects/track/points-calculator.tsx
index e862d99..56fb51c 100644
--- a/pages/projects/track/points-calculator.tsx
+++ b/pages/projects/track/points-calculator.tsx
@@ -110,6 +110,24 @@ function markToUserMark(mark: number, markType: MarkType) {
   }
 }
 
+function equivalentMark(eventType: string, points: number, gender: string) {
+  const eventCoefficients = coefficients[gender][eventType];
+  if (!eventCoefficients) {
+    return null;
+  }
+
+  const markType = markTypes[eventType];
+  const mark = getMarkFromScore(eventCoefficients, points);
+  if (!Number.isFinite(mark) || mark <= 0) {
+    return null;
+  }
+
+  return markToUserMark(
+    markType === "points" ? Math.round(mark) : mark,
+    markType,
+  );
+}
+
 export const metas: Metas = {
   title: "World Athletics Points Calculator",
   description:
@@ -296,6 +314,23 @@ export default function PointsCalculator({ pages }: PointsCalculatorProps) {
     );
   }, [category, gender]);
 
+  const equivalentMarks = useMemo(() => {
+    const pointsNum = Number(points);
+    if (points === "" || !Number.isFinite(pointsNum)) {
+      return [];
+    }
+    return events
+      .filter(other => other !== event)
+      .map(other => ({
+        event: other,
+        mark: equivalentMark(other, pointsNum, gender),
+        unit: units[markTypes[other]],
+      }))
+      .filter((row): row is { event: string; mark: string; unit: string } =>
+        Boolean(row.mark),
+      );
+  }, [points, events, event, gender]);
+
   return (
     <article className={blogStyles.article}>
       <Meta {...metas} />
@@ -355,31 +390,64 @@ export default function PointsCalculator({ pages }: PointsCalculatorProps) {
             </select>
           </div>
         </label>
-        <label className={styles.formContainer}>
-          <strong>Mark</strong>
-          <UnitInput
-            className={styles.input}
-            type="text"
-            value={mark}
-            onChange={v => onMarkChanged(v)}
-            unit={unit}
-          />
-        </label>
-        <label className={styles.formContainer}>
-          <strong>Points</strong>
-          <UnitInput
-            className={styles.input}
-            type="number"
-            step="1"
-            min="0"
-            max="1400"
-            value={points}
-            charBlacklist={["e", ".", "-", "+"]}
-            onChange={v => onPointsChanged(v)}
-            placeholder="0-1400"
-            unit="pts"
-          />
-        </label>
+        <div className={styles.results}>
+          <label className={styles.formContainer}>
+            <strong>Mark</strong>
+            <UnitInput
+              className={styles.input}
+              type="text"
+              value={mark}
+              onChange={v => onMarkChanged(v)}
+              unit={unit}
+            />
+          </label>
+          <label className={styles.formContainer}>
+            <strong>Points</strong>
+            <UnitInput
+              className={styles.input}
+              type="number"
+              step="1"
+              min="0"
+              max="1400"
+              value={points}
+              charBlacklist={["e", ".", "-", "+"]}
+              onChange={v => onPointsChanged(v)}
+              placeholder="0-1400"
+              unit="pts"
+            />
+          </label>
+        </div>
+        <details className={styles.equivalents}>
+          <summary>Equivalent marks in other events</summary>
+          {equivalentMarks.length > 0 ? (
+            <>
+              <p>
+                Marks worth {points} points in other {category}{" "}
+                {gender === "men" ? "men’s" : "women’s"} events.
+              </p>
+              <table>
+                <thead>
+                  <tr>
+                    <th>Event</th>
+                    <th>Mark</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {equivalentMarks.map(({ event, mark, unit }) => (
+                    <tr key={event}>
+                      <td>{eventNames[event]}</td>
+                      <td>
+                        {mark} {unit}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </>
+          ) : (
+            <p>Enter a mark or points above to compare across events.</p>
+          )}
+        </details>
         <button
           className={styles.shareButton}
           onClick={handleShare}
diff --git a/styles/pages/track-calculators.module.scss b/styles/pages/track-calculators.module.scss
index 4e5814c..a047580 100644
--- a/styles/pages/track-calculators.module.scss
+++ b/styles/pages/track-calculators.module.scss
@@ -67,6 +67,54 @@
   }
 }
 
+.results {
+  margin: 1rem 0;
+  padding: 0.25rem 1rem 0.75rem;
+  background-color: var(--secondary-light-gray);
+  border: 1px solid var(--secondary);
+  border-radius: 0.25rem;
+}
+
+.equivalents {
+  margin: 1rem 0;
+  font-size: 16px;
+
+  summary {
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+
+  p {
+    margin: 0.5rem 0;
+    color: var(--gray);
+  }
+
+  table {
+    width: 100%;
+    margin: 0.75rem 0;
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 0.375rem 0.5rem;
+      text-align: left;
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+
+    th {
+      border-bottom: 2px solid var(--dark-gray);
+    }
+
+    tbody tr:nth-child(even) {
+      background-color: var(--light-gray);
+    }
+  }
+}
+
 .methodology {
   border-top: 0.25rem solid var(--primary);
   margin: var(--horizontal-margin) 0 0;

From 03cf2b5be2735e418ffd55d8d68ac355f4ac7e67 Mon Sep 17 00:00:00 2001
From: Jeff Chen <hello@jeff.yt>
Date: Wed, 12 Aug 2026 12:14:36 -0600
Subject: [PATCH 2/3] Equivalents table: indoor/outdoor tabs, drop the
 results-box tint

The equivalent-marks table gets an Outdoor/Indoor tab row so a mark can
be compared across categories; the tabs follow the main category
selector until one is clicked. The results box keeps its border but
loses the background tint.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 pages/projects/track/points-calculator.tsx | 28 +++++++++++++++---
 styles/pages/track-calculators.module.scss | 34 +++++++++++++++++++++-
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/pages/projects/track/points-calculator.tsx b/pages/projects/track/points-calculator.tsx
index 56fb51c..d259400 100644
--- a/pages/projects/track/points-calculator.tsx
+++ b/pages/projects/track/points-calculator.tsx
@@ -147,6 +147,10 @@ export default function PointsCalculator({ pages }: PointsCalculatorProps) {
   const [mark, setMark] = useState("");
   const [points, setPoints] = useState("");
   const [hasShared, setHasShared] = useState(false);
+  // null follows the main category selector until a tab is clicked
+  const [equivalentsCategory, setEquivalentsCategory] = useState<string | null>(
+    null,
+  );
   const [lastChanged, setLastChanged] = useState<"mark" | "points" | null>(
     null,
   );
@@ -314,13 +318,16 @@ export default function PointsCalculator({ pages }: PointsCalculatorProps) {
     );
   }, [category, gender]);
 
+  const tableCategory = equivalentsCategory ?? category;
+
   const equivalentMarks = useMemo(() => {
     const pointsNum = Number(points);
     if (points === "" || !Number.isFinite(pointsNum)) {
       return [];
     }
-    return events
-      .filter(other => other !== event)
+    return order[tableCategory]
+      .filter(other => isEventValidForGender(other, gender === "men"))
+      .filter(other => tableCategory !== category || other !== event)
       .map(other => ({
         event: other,
         mark: equivalentMark(other, pointsNum, gender),
@@ -329,7 +336,7 @@ export default function PointsCalculator({ pages }: PointsCalculatorProps) {
       .filter((row): row is { event: string; mark: string; unit: string } =>
         Boolean(row.mark),
       );
-  }, [points, events, event, gender]);
+  }, [points, tableCategory, category, event, gender]);
 
   return (
     <article className={blogStyles.article}>
@@ -419,10 +426,23 @@ export default function PointsCalculator({ pages }: PointsCalculatorProps) {
         </div>
         <details className={styles.equivalents}>
           <summary>Equivalent marks in other events</summary>
+          <div className={styles.tabs}>
+            {Object.keys(order).map(c => (
+              <button
+                key={c}
+                type="button"
+                className={c === tableCategory ? styles.activeTab : undefined}
+                aria-pressed={c === tableCategory}
+                onClick={() => setEquivalentsCategory(c)}
+              >
+                {c.charAt(0).toUpperCase() + c.slice(1)}
+              </button>
+            ))}
+          </div>
           {equivalentMarks.length > 0 ? (
             <>
               <p>
-                Marks worth {points} points in other {category}{" "}
+                Marks worth {points} points in {tableCategory}{" "}
                 {gender === "men" ? "men’s" : "women’s"} events.
               </p>
               <table>
diff --git a/styles/pages/track-calculators.module.scss b/styles/pages/track-calculators.module.scss
index a047580..58caf07 100644
--- a/styles/pages/track-calculators.module.scss
+++ b/styles/pages/track-calculators.module.scss
@@ -70,7 +70,6 @@
 .results {
   margin: 1rem 0;
   padding: 0.25rem 1rem 0.75rem;
-  background-color: var(--secondary-light-gray);
   border: 1px solid var(--secondary);
   border-radius: 0.25rem;
 }
@@ -85,6 +84,39 @@
     font-size: 1.2em;
   }
 
+  .tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin: 0.75rem 0 0;
+
+    button {
+      padding: 0.25rem 1rem;
+      border: 1px solid var(--dark-gray);
+      border-radius: 0.25rem;
+      background: var(--white);
+      color: var(--dark-gray);
+      font-size: 1em;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:hover {
+        background-color: var(--light-gray);
+      }
+    }
+
+    .activeTab {
+      background: var(--primary);
+      border-color: var(--primary);
+      color: var(--primary-gray);
+      font-weight: bold;
+      cursor: default;
+
+      &:hover {
+        background-color: var(--primary);
+      }
+    }
+  }
+
   p {
     margin: 0.5rem 0;
     color: var(--gray);

From ffe57dd2f9b95e96465ef199b86cb0850366c15b Mon Sep 17 00:00:00 2001
From: Jeff Chen <hello@jeff.yt>
Date: Wed, 12 Aug 2026 12:21:50 -0600
Subject: [PATCH 3/3] Drop the results box around mark/points

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 pages/projects/track/points-calculator.tsx | 52 +++++++++++-----------
 styles/pages/track-calculators.module.scss |  7 ---
 2 files changed, 25 insertions(+), 34 deletions(-)

diff --git a/pages/projects/track/points-calculator.tsx b/pages/projects/track/points-calculator.tsx
index d259400..7a3600a 100644
--- a/pages/projects/track/points-calculator.tsx
+++ b/pages/projects/track/points-calculator.tsx
@@ -397,33 +397,31 @@ export default function PointsCalculator({ pages }: PointsCalculatorProps) {
             </select>
           </div>
         </label>
-        <div className={styles.results}>
-          <label className={styles.formContainer}>
-            <strong>Mark</strong>
-            <UnitInput
-              className={styles.input}
-              type="text"
-              value={mark}
-              onChange={v => onMarkChanged(v)}
-              unit={unit}
-            />
-          </label>
-          <label className={styles.formContainer}>
-            <strong>Points</strong>
-            <UnitInput
-              className={styles.input}
-              type="number"
-              step="1"
-              min="0"
-              max="1400"
-              value={points}
-              charBlacklist={["e", ".", "-", "+"]}
-              onChange={v => onPointsChanged(v)}
-              placeholder="0-1400"
-              unit="pts"
-            />
-          </label>
-        </div>
+        <label className={styles.formContainer}>
+          <strong>Mark</strong>
+          <UnitInput
+            className={styles.input}
+            type="text"
+            value={mark}
+            onChange={v => onMarkChanged(v)}
+            unit={unit}
+          />
+        </label>
+        <label className={styles.formContainer}>
+          <strong>Points</strong>
+          <UnitInput
+            className={styles.input}
+            type="number"
+            step="1"
+            min="0"
+            max="1400"
+            value={points}
+            charBlacklist={["e", ".", "-", "+"]}
+            onChange={v => onPointsChanged(v)}
+            placeholder="0-1400"
+            unit="pts"
+          />
+        </label>
         <details className={styles.equivalents}>
           <summary>Equivalent marks in other events</summary>
           <div className={styles.tabs}>
diff --git a/styles/pages/track-calculators.module.scss b/styles/pages/track-calculators.module.scss
index 58caf07..9f2004f 100644
--- a/styles/pages/track-calculators.module.scss
+++ b/styles/pages/track-calculators.module.scss
@@ -67,13 +67,6 @@
   }
 }
 
-.results {
-  margin: 1rem 0;
-  padding: 0.25rem 1rem 0.75rem;
-  border: 1px solid var(--secondary);
-  border-radius: 0.25rem;
-}
-
 .equivalents {
   margin: 1rem 0;
   font-size: 16px;