From b05d262b5263b81f3f99a32f52a4199039e702c0 Mon Sep 17 00:00:00 2001
From: Fable Integrator <fable@helm.local>
Date: Fri, 10 Jul 2026 12:11:39 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20app-tab=20Rule-8=20sweep=20=E2=80=94=20r?=
 =?UTF-8?q?oster/stats/pipeline/scorecard/qualifier=20tables=20become=20re?=
 =?UTF-8?q?al=20phone=20layouts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Bridge-sweep scouts found the same disease on the app side: min-w
tables and unwrapped control rows forcing horizontal scroll at 390px on
phone-primary surfaces. Each fix keeps md+ byte-identical:

- Golf calendar hero: phone composition = grid nav row (prev/today/next)
  + full-width primary action in the thumb zone (was a single unwrapping
  4-control row that overflowed the Surface at 390px).
- Baseball roster wall (default surface): full-width PlayerRowPlate rows
  with AVG/OPS below md; the 5-column min-w-[680px] wall stays at md+.
- Baseball stats center record book: 2-stat self-labeled card rows below
  md (AVG/OPS hitting, ERA/WHIP pitching), leaders computed per column
  set; ghost ready-rows get matching placeholders.
- Baseball pipeline list view: card rows below lg mirroring the
  Academics split; desktop table unchanged except the list row's avatar
  no longer stacks above the name (Button single-child contract — real
  desktop render bug, wrapped in one flex child).
- Golf round scorecard: real phone scorecard — per-hole strips (hole
  chip · par · tone-colored score + to-par pill · putts · FW/GIR marks)
  + nine-total rows; the min-w table stays md+. Qualifier round-by-round
  becomes rank/name/total card rows with per-round chips.
- Baseball dev-plan goal filter tabs ride a contained edge-bled
  scroller below md (4 nowrap triggers exceeded 390px content width).

Verification: every packet adversarially verified (all correct /
correct-with-nits); tsc, eslint --max-warnings 0, vitest 975 tests green.
Local production build hit ENOSPC (disk, not code) — CI build is the
authoritative gate on this PR.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01J2E46URHkhCnEQSYDtZLJX
---
 .../dashboard/dev-plan/DevPlanClient.tsx      |  11 +-
 .../dashboard/pipeline/PipelineClient.tsx     | 199 +++++++++++-
 .../dashboard/roster/RosterFairway.tsx        |  74 +++--
 .../stats-center/StatsCenterClient.tsx        | 119 +++++++-
 .../pages/calendar/FairwayCalendarHero.tsx    |  58 +++-
 .../qualifiers/FairwayQualifierDetail.tsx     | 240 ++++++++++-----
 .../pages/rounds/FairwayRoundDetail.tsx       | 283 +++++++++++++-----
 7 files changed, 785 insertions(+), 199 deletions(-)

diff --git a/src/app/baseball/(dashboard)/dashboard/dev-plan/DevPlanClient.tsx b/src/app/baseball/(dashboard)/dashboard/dev-plan/DevPlanClient.tsx
index eb1dc90b4..9930c9df0 100644
--- a/src/app/baseball/(dashboard)/dashboard/dev-plan/DevPlanClient.tsx
+++ b/src/app/baseball/(dashboard)/dashboard/dev-plan/DevPlanClient.tsx
@@ -559,9 +559,15 @@ export default function DevPlanClient() {
                 </PaperCard>
               ) : null}
 
-              {/* Goals with Tabs */}
+              {/* Goals with Tabs. The four icon+label+badge triggers are
+                  whitespace-nowrap and sum past the ~338px content width at
+                  390px, and TabsList has no scroll handling of its own — so
+                  below md the list rides a contained edge-bled scroller
+                  (matching the page's px-4 shell) instead of overflowing the
+                  page. md+ is untouched (overflow-visible, no bleed). */}
               <Tabs defaultValue="active" value={activeTab} onChange={setActiveTab}>
-                <TabsList className="mb-4">
+                <div className="-mx-4 mb-4 overflow-x-auto px-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden md:mx-0 md:overflow-visible md:px-0">
+                <TabsList>
                   <TabsTrigger value="active" icon={<IconTarget size={16} />} badge={activeCount > 0 ? activeCount : undefined}>
                     Active
                   </TabsTrigger>
@@ -575,6 +581,7 @@ export default function DevPlanClient() {
                     All
                   </TabsTrigger>
                 </TabsList>
+                </div>
 
                 <TabsContent value="active">
                   <GoalsList
diff --git a/src/app/baseball/(dashboard)/dashboard/pipeline/PipelineClient.tsx b/src/app/baseball/(dashboard)/dashboard/pipeline/PipelineClient.tsx
index 06c992282..9aad81232 100644
--- a/src/app/baseball/(dashboard)/dashboard/pipeline/PipelineClient.tsx
+++ b/src/app/baseball/(dashboard)/dashboard/pipeline/PipelineClient.tsx
@@ -56,7 +56,7 @@ import { PlayerDetailModal } from '@/components/coach/PlayerDetailModal';
 import { PlayerPeekPanel } from '@/components/panels/PlayerPeekPanel';
 import { PositionPlanner } from '@/components/baseball/position-planner';
 import { ConfirmDialog } from '@/components/ui/confirm-dialog';
-import { IconUsers, IconLayoutGrid, IconList, IconTarget, IconTrash, IconTrendingUp, IconChevronDown, IconChevronUp } from '@/components/icons';
+import { IconUsers, IconLayoutGrid, IconList, IconTarget, IconTrash, IconTrendingUp, IconChevronDown, IconChevronUp, IconChevronRight } from '@/components/icons';
 import { useWatchlist } from '@/hooks/use-watchlist';
 import { useAuth } from '@/hooks/use-auth';
 import { useToast } from '@/components/ui/sonner';
@@ -537,10 +537,15 @@ function PipelineListRow({
           onClick={onOpenPeek}
           className="h-auto min-h-0 justify-start gap-3 rounded-fw-sm px-2 py-1 text-left font-normal"
         >
-          <Avatar src={item.player?.avatar_url} name={name} size="md" />
-          <div className="min-w-0">
-            <span className="block truncate font-annual text-body-lg text-text-primary">{name}</span>
-            <span className="text-eyebrow text-text-tertiary">{item.player?.high_school_name || 'No school'}</span>
+          {/* ONE pre-composed flex child — Button wraps children in a bare
+              <span>, so Avatar + div as siblings stack vertically (see
+              Button's CHILDREN CONTRACT doc). Same pattern as the card row. */}
+          <div className="flex min-w-0 flex-1 items-center gap-3">
+            <Avatar src={item.player?.avatar_url} name={name} size="md" />
+            <div className="min-w-0">
+              <span className="block truncate font-annual text-body-lg text-text-primary">{name}</span>
+              <span className="text-eyebrow text-text-tertiary">{item.player?.high_school_name || 'No school'}</span>
+            </div>
           </div>
         </Button>
       </td>
@@ -607,6 +612,147 @@ function PipelineListRow({
   );
 }
 
+// Rule 8 (docs/MOBILE_DOCTRINE.md) — a `min-w` table wrapped only in
+// `overflow-x-auto` is not the phone treatment on a reading surface. Below
+// `lg` each row becomes a composed card (identity + position/grad-year +
+// status + updated + tap-through/actions), mirroring the `hidden lg:block` /
+// `lg:hidden` split already shipped in AcademicsClient.tsx:291/294 in this
+// same app. The desktop `<table>` above stays byte-identical; this card
+// consumes the exact same row props/callbacks — no new read/write path.
+function PipelineListCard({
+  item,
+  focused,
+  selected,
+  editing,
+  noteValue,
+  onFocus,
+  onOpenPeek,
+  onToggleSelect,
+  onStatusChange,
+  onStartEditNote,
+  onNoteValueChange,
+  onSaveNote,
+  onCancelNote,
+  onViewProfile,
+  onRemove,
+}: PipelineListRowProps) {
+  const name = getFullName(item.player?.first_name, item.player?.last_name);
+  const location = item.player?.city && item.player?.state ? `${item.player.city}, ${item.player.state}` : 'N/A';
+
+  return (
+    <PaperCard
+      onClick={onFocus}
+      className={cn(
+        'p-4',
+        pressableClass({ ink: 'pursuit', lift: true }),
+        focused && 'ring-2 ring-inset ring-pursuit',
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {/* Long-press multi-select isn't available on a card row — a compact,
+            always-visible checkbox keeps single-tap selection reachable. */}
+        <Checkbox checked={selected} onCheckedChange={onToggleSelect} aria-label={`Select ${name}`} className="mt-1 shrink-0" />
+        <Button
+          variant="ghost"
+          onClick={onOpenPeek}
+          rightIcon={<IconChevronRight size={16} aria-hidden className="text-text-tertiary" />}
+          className="h-auto min-h-0 flex-1 justify-between gap-3 rounded-fw-sm px-2 py-1 text-left font-normal"
+        >
+          {/* Fairway's <Button> renders non-icon children inside a single bare
+              <span> (no className) as a direct child of its inline-flex
+              container — that span gets blockified, and an inline Avatar
+              followed by a block-level name/school div inside it triggers
+              anonymous-block-box generation (Avatar stacks above the name
+              instead of beside it). An explicit flex wrapper here establishes
+              its own flex formatting context so Avatar + text lay out as a
+              real identity row, matching the Avatar+name idiom used elsewhere
+              (MessagesClient.tsx, AcademicsClient.tsx) instead of relying on
+              the Button's auto-wrapping children slot. */}
+          <div className="flex min-w-0 flex-1 items-center gap-3">
+            <Avatar src={item.player?.avatar_url} name={name} size="md" />
+            <div className="min-w-0 flex-1">
+              <span className="block truncate font-annual text-body-lg text-text-primary">{name}</span>
+              <span className="block truncate text-eyebrow text-text-tertiary">{item.player?.high_school_name || 'No school'}</span>
+            </div>
+          </div>
+        </Button>
+      </div>
+
+      <div className="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 font-annual text-body-sm text-text-secondary">
+        <span>{item.player?.primary_position || '—'}</span>
+        <span aria-hidden className="text-text-tertiary">·</span>
+        <span>{item.player?.grad_year ?? '—'}</span>
+        <span aria-hidden className="text-text-tertiary">·</span>
+        <span className="truncate">{location}</span>
+      </div>
+
+      <HairlineRule ink="hairline" className="my-3" />
+
+      <div className="flex items-center justify-between gap-3">
+        <div className="w-40">
+          <Select
+            size="sm"
+            aria-label={`Change stage for ${name}`}
+            value={item.pipeline_stage ?? 'watchlist'}
+            onValueChange={(v) => v && onStatusChange(v as PipelineStage)}
+            options={statusOptions}
+          />
+        </div>
+        <span className="shrink-0 font-annual text-eyebrow uppercase tracking-[0.1em] text-text-tertiary">
+          {formatDate(item.updated_at)}
+        </span>
+      </div>
+
+      <div className="mt-3">
+        {editing ? (
+          <div className="space-y-2">
+            <TextArea
+              size="sm"
+              value={noteValue}
+              onChange={(e) => onNoteValueChange(e.target.value)}
+              placeholder="Add notes about this player…"
+              rows={3}
+              className="w-full resize-none focus-visible:ring-pursuit"
+            />
+            <div className="flex gap-2">
+              <Button size="sm" onClick={onSaveNote} className="min-h-[44px] flex-1">
+                Save
+              </Button>
+              <Button variant="ghost" size="sm" onClick={onCancelNote} className="min-h-[44px] flex-1">
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onStartEditNote}
+            className="h-auto min-h-0 w-full justify-start truncate px-2 py-1 text-left font-normal underline decoration-[color:var(--hairline)] underline-offset-2"
+          >
+            {item.notes ? (item.notes.length > 48 ? `${item.notes.slice(0, 48)}…` : item.notes) : 'Add note'}
+          </Button>
+        )}
+      </div>
+
+      <div className="mt-3 flex items-center gap-2">
+        <Button variant="secondary" size="sm" onClick={onViewProfile} className="min-h-[44px] flex-1">
+          View profile
+        </Button>
+        <IconButton
+          variant="danger"
+          size="sm"
+          aria-label={`Remove ${name} from pipeline`}
+          onClick={onRemove}
+          className="min-h-[44px] min-w-[44px]"
+        >
+          <IconTrash size={16} />
+        </IconButton>
+      </div>
+    </PaperCard>
+  );
+}
+
 // ─── Page ───────────────────────────────────────────────────────────────────
 
 export default function PipelinePage() {
@@ -1173,14 +1319,53 @@ export default function PipelinePage() {
                   />
                 ) : (
                   <div className="space-y-3">
-                    <p className="text-eyebrow uppercase tracking-[0.14em] text-text-tertiary">
+                    <p className="hidden font-annual text-eyebrow uppercase tracking-[0.14em] text-text-tertiary lg:block">
                       <kbd className="rounded-fw-sm border border-[color:var(--hairline)] bg-surface-sunken px-1.5 py-0.5 font-mono text-text-secondary">j</kbd>/
                       <kbd className="rounded-fw-sm border border-[color:var(--hairline)] bg-surface-sunken px-1.5 py-0.5 font-mono text-text-secondary">k</kbd> navigate ·{' '}
                       <kbd className="rounded-fw-sm border border-[color:var(--hairline)] bg-surface-sunken px-1.5 py-0.5 font-mono text-text-secondary">Enter</kbd> view ·{' '}
                       <kbd className="rounded-fw-sm border border-[color:var(--hairline)] bg-surface-sunken px-1.5 py-0.5 font-mono text-text-secondary">x</kbd> select
                     </p>
 
-                    <PaperCard className="overflow-hidden p-0">
+                    {/* Rule 8 — cards below `lg`, byte-identical table at `lg`+. The
+                        thead's "select all" checkbox has no card-list equivalent, so
+                        a lightweight select-all/deselect-all row replaces it here
+                        rather than dropping the capability on phone. */}
+                    <div className="flex items-center justify-between gap-3 lg:hidden">
+                      <span className="font-annual text-eyebrow uppercase tracking-[0.14em] text-text-tertiary">
+                        {filteredWatchlist.length} player{filteredWatchlist.length !== 1 ? 's' : ''}
+                      </span>
+                      <Button variant="ghost" size="sm" onClick={toggleSelectAll}>
+                        {selectedPlayers.size === filteredWatchlist.length && filteredWatchlist.length > 0 ? 'Deselect all' : 'Select all'}
+                      </Button>
+                    </div>
+
+                    <div className="space-y-3 lg:hidden">
+                      {filteredWatchlist.map((item, index) => (
+                        <PipelineListCard
+                          key={item.id}
+                          item={item}
+                          focused={focusedIndex === index}
+                          selected={selectedPlayers.has(item.id)}
+                          editing={editingNote === item.id}
+                          noteValue={noteValue}
+                          onFocus={() => setFocusedIndex(index)}
+                          onOpenPeek={() => setPeekPlayerId(item.player?.id || null)}
+                          onToggleSelect={() => togglePlayerSelection(item.id)}
+                          onStatusChange={(stage) => handleStatusChange(item.id, stage)}
+                          onStartEditNote={() => startEditingNote(item.id, item.notes)}
+                          onNoteValueChange={setNoteValue}
+                          onSaveNote={() => handleSaveNote(item.id)}
+                          onCancelNote={() => {
+                            setEditingNote(null);
+                            setNoteValue('');
+                          }}
+                          onViewProfile={() => item.player && setSelectedPlayer(item.player)}
+                          onRemove={() => setRemoveConfirm(item.id)}
+                        />
+                      ))}
+                    </div>
+
+                    <PaperCard className="hidden overflow-hidden p-0 lg:block">
                       <div className="overflow-x-auto">
                         <table className="w-full">
                           <thead>
diff --git a/src/app/baseball/(dashboard)/dashboard/roster/RosterFairway.tsx b/src/app/baseball/(dashboard)/dashboard/roster/RosterFairway.tsx
index d48ea828a..4a7cbeda7 100644
--- a/src/app/baseball/(dashboard)/dashboard/roster/RosterFairway.tsx
+++ b/src/app/baseball/(dashboard)/dashboard/roster/RosterFairway.tsx
@@ -115,6 +115,24 @@ function buildWallStats(agg: BaseballPlayerAggregates | undefined, leader: boole
   ];
 }
 
+// Phone read (doctrine Rule 8): a coach triages the wall by contact (AVG)
+// and overall production (OPS) — OBP/SLG/SESS live on the player detail page
+// this row already taps through to. Labels render inline (PlayerRowStat's
+// "standalone row" mode) since there's no shared `PlayerRowPlateHeader` at
+// this width to carry the column labels instead.
+function buildWallStatsMobile(agg: BaseballPlayerAggregates | undefined, leader: boolean): PlayerRowStat[] {
+  if (!agg) {
+    return [
+      { label: 'AVG', value: EM_DASH },
+      { label: 'OPS', value: EM_DASH },
+    ];
+  }
+  return [
+    { label: 'AVG', value: agg.career_avg == null ? EM_DASH : formatRate(agg.career_avg, 3) },
+    { label: 'OPS', value: agg.career_ops == null ? EM_DASH : formatRate(agg.career_ops, 3), leader },
+  ];
+}
+
 function RosterWall({
   members,
   aggregates,
@@ -136,25 +154,47 @@ function RosterWall({
   }, [members, aggregates]);
 
   return (
-    <div className="overflow-x-auto">
-      <div className="min-w-[680px]">
-        <PlayerRowPlateHeader columns={WALL_COLUMNS} />
-        <div className="flex flex-col">
-          {members.map((member, i) => (
-            <Reveal key={member.id} staggerIndex={Math.min(i, 10)}>
-              <PlayerRowPlate
-                firstName={member.player.first_name ?? ''}
-                lastName={member.player.last_name ?? ''}
-                jerseyNumber={member.jersey_number ?? undefined}
-                position={member.player.primary_position ?? undefined}
-                stats={buildWallStats(aggregates[member.player.id], member.player.id === opsLeaderId)}
-                onClick={() => onSelect(member.player.id)}
-              />
-            </Reveal>
-          ))}
+    <>
+      {/* Below md (Rule 8): identity + the two stats a coach actually
+          triages by, full-width rows, tap-through to the detail page for
+          the rest of the record book — never the five-column table's
+          horizontal scroll on a reading surface. */}
+      <div className="flex flex-col md:hidden">
+        {members.map((member, i) => (
+          <Reveal key={member.id} staggerIndex={Math.min(i, 10)}>
+            <PlayerRowPlate
+              firstName={member.player.first_name ?? ''}
+              lastName={member.player.last_name ?? ''}
+              jerseyNumber={member.jersey_number ?? undefined}
+              position={member.player.primary_position ?? undefined}
+              stats={buildWallStatsMobile(aggregates[member.player.id], member.player.id === opsLeaderId)}
+              onClick={() => onSelect(member.player.id)}
+            />
+          </Reveal>
+        ))}
+      </div>
+
+      {/* md+: the full five-column record book, unchanged. */}
+      <div className="hidden overflow-x-auto md:block">
+        <div className="min-w-[680px]">
+          <PlayerRowPlateHeader columns={WALL_COLUMNS} />
+          <div className="flex flex-col">
+            {members.map((member, i) => (
+              <Reveal key={member.id} staggerIndex={Math.min(i, 10)}>
+                <PlayerRowPlate
+                  firstName={member.player.first_name ?? ''}
+                  lastName={member.player.last_name ?? ''}
+                  jerseyNumber={member.jersey_number ?? undefined}
+                  position={member.player.primary_position ?? undefined}
+                  stats={buildWallStats(aggregates[member.player.id], member.player.id === opsLeaderId)}
+                  onClick={() => onSelect(member.player.id)}
+                />
+              </Reveal>
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 
diff --git a/src/components/baseball/stats-center/StatsCenterClient.tsx b/src/components/baseball/stats-center/StatsCenterClient.tsx
index 03695860d..147a66634 100644
--- a/src/components/baseball/stats-center/StatsCenterClient.tsx
+++ b/src/components/baseball/stats-center/StatsCenterClient.tsx
@@ -143,6 +143,22 @@ const PITCHING_COLS: ReadonlyArray<StatColSpec<PitchingSplit>> = [
   { label: 'SV', read: (p) => p.sv, dir: 'high', cell: (p) => p.sv },
 ];
 
+// -----------------------------------------------------------------------------
+// Mobile record-book "headline" columns (Rule 8, docs/MOBILE_DOCTRINE.md): below
+// `md` a spread renders as full-width identity + 2 cards rather than the fixed
+// six-column plate, so each row only carries the two figures a coach reads a
+// season by at a glance — batting AVG/OPS, pitching ERA/WHIP. Pitching reuses
+// the first two full-column specs verbatim (same read/cell/leader logic); AVG
+// is likewise shared with the full batting spec — OPS is the one addition.
+// -----------------------------------------------------------------------------
+
+const MOBILE_BATTING_COLS: ReadonlyArray<StatColSpec<BattingSplit>> = [
+  ...BATTING_COLS.slice(0, 1), // AVG
+  { label: 'OPS', read: (b) => b.ops, dir: 'high', cell: (b) => (b.ops === null ? EM_DASH : formatRate(b.ops, 3)) },
+];
+
+const MOBILE_PITCHING_COLS: ReadonlyArray<StatColSpec<PitchingSplit>> = PITCHING_COLS.slice(0, 2); // ERA, WHIP
+
 /**
  * For each column, the set of player ids that lead it (green). A column needs at
  * least two non-null values to have a meaningful "leader" — so a lone qualifier
@@ -179,35 +195,78 @@ const playerHref = (row: StatsCenterRow) => `/baseball/dashboard/players/${row.p
 function StatSpread({
   heading,
   columns,
+  mobileColumns,
   realRows,
   ghostRows,
   buildStats,
+  buildMobileStats,
   emptyTitle,
   emptyBody,
 }: {
   heading: string;
   columns: string[];
+  /** Headline labels for the below-`md` card stats (2 cols — see MOBILE_*_COLS). */
+  mobileColumns: string[];
   realRows: StatsCenterRow[];
   ghostRows: StatsCenterRow[];
   buildStats: (row: StatsCenterRow) => PlayerRowStat[];
+  buildMobileStats: (row: StatsCenterRow) => PlayerRowStat[];
   emptyTitle: string;
   emptyBody: string;
 }) {
   const hasRows = realRows.length > 0 || ghostRows.length > 0;
   const ghostStats: PlayerRowStat[] = columns.map(() => ({ value: EM_DASH }));
+  // Self-labeled (each card stands alone — there's no shared column header below md).
+  const mobileGhostStats: PlayerRowStat[] = mobileColumns.map((label) => ({ label, value: EM_DASH }));
 
   return (
     <section className="flex flex-col gap-3">
       <Eyebrow ink="team">{heading}</Eyebrow>
       {hasRows ? (
-        // Mobile: the fixed stat-column grid scrolls horizontally as one plate.
-        <div className="overflow-x-auto">
-          <div className="min-w-[680px]">
-            <PlayerRowPlateHeader columns={columns} />
-            {/* Interaction layer (Stage-0): the wall settles top-to-bottom on
-                load via `<Reveal>` — the same ink-settle curve `<Masthead>`
-                uses, just extended to a whole spread. Capped at row 10 so a
-                deep roster doesn't stretch the cascade into a slow crawl. */}
+        <>
+          {/* md+: the fixed stat-column grid scrolls horizontally as one plate. */}
+          <div className="hidden md:block overflow-x-auto">
+            <div className="min-w-[680px]">
+              <PlayerRowPlateHeader columns={columns} />
+              {/* Interaction layer (Stage-0): the wall settles top-to-bottom on
+                  load via `<Reveal>` — the same ink-settle curve `<Masthead>`
+                  uses, just extended to a whole spread. Capped at row 10 so a
+                  deep roster doesn't stretch the cascade into a slow crawl. */}
+              {realRows.map((row, i) => (
+                <Reveal key={row.playerId} staggerIndex={Math.min(i, 10)}>
+                  <PlayerRowPlate
+                    firstName={row.firstName ?? ''}
+                    lastName={row.lastName ?? ''}
+                    jerseyNumber={row.jerseyNumber ?? undefined}
+                    position={row.primaryPosition ?? undefined}
+                    stats={buildStats(row)}
+                    href={playerHref(row)}
+                  />
+                </Reveal>
+              ))}
+              {/* noData players — quiet ghost rows, honest em-dashes, sorted last. */}
+              {ghostRows.map((row, i) => (
+                <div key={row.playerId} className="opacity-45">
+                  <Reveal staggerIndex={Math.min(realRows.length + i, 10)}>
+                    <PlayerRowPlate
+                      firstName={row.firstName ?? ''}
+                      lastName={row.lastName ?? ''}
+                      jerseyNumber={row.jerseyNumber ?? undefined}
+                      position={row.primaryPosition ?? undefined}
+                      stats={ghostStats}
+                      href={playerHref(row)}
+                    />
+                  </Reveal>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {/* Below md (Rule 8): the six-column plate can't card-ify by shrinking
+              — it becomes full-width identity rows carrying only the 2 headline
+              figures for this side, each self-labeled, full-row tap-through to
+              the player's stats page. No horizontal scroll on a reading surface. */}
+          <div className="md:hidden flex flex-col">
             {realRows.map((row, i) => (
               <Reveal key={row.playerId} staggerIndex={Math.min(i, 10)}>
                 <PlayerRowPlate
@@ -215,12 +274,11 @@ function StatSpread({
                   lastName={row.lastName ?? ''}
                   jerseyNumber={row.jerseyNumber ?? undefined}
                   position={row.primaryPosition ?? undefined}
-                  stats={buildStats(row)}
+                  stats={buildMobileStats(row)}
                   href={playerHref(row)}
                 />
               </Reveal>
             ))}
-            {/* noData players — quiet ghost rows, honest em-dashes, sorted last. */}
             {ghostRows.map((row, i) => (
               <div key={row.playerId} className="opacity-45">
                 <Reveal staggerIndex={Math.min(realRows.length + i, 10)}>
@@ -229,14 +287,14 @@ function StatSpread({
                     lastName={row.lastName ?? ''}
                     jerseyNumber={row.jerseyNumber ?? undefined}
                     position={row.primaryPosition ?? undefined}
-                    stats={ghostStats}
+                    stats={mobileGhostStats}
                     href={playerHref(row)}
                   />
                 </Reveal>
               </div>
             ))}
           </div>
-        </div>
+        </>
       ) : (
         <EditorsLetter ink="team" title={emptyTitle} body={emptyBody} />
       )}
@@ -514,6 +572,16 @@ export function StatsCenterClient({ model: initialModel, initialFilters, statVis
     () => computeLeaders(pitchingRows, (r) => (gameSet === 'official' ? r.pitchingOfficial : r.pitchingAll), PITCHING_COLS),
     [pitchingRows, gameSet],
   );
+  // Mobile headline-column leaders (Rule 8 card stats) — computed separately
+  // since OPS isn't a full-plate column and leader sets are column-specific.
+  const mobileBattingLeaders = useMemo(
+    () => computeLeaders(battingRows, (r) => (gameSet === 'official' ? r.battingOfficial : r.battingAll), MOBILE_BATTING_COLS),
+    [battingRows, gameSet],
+  );
+  const mobilePitchingLeaders = useMemo(
+    () => computeLeaders(pitchingRows, (r) => (gameSet === 'official' ? r.pitchingOfficial : r.pitchingAll), MOBILE_PITCHING_COLS),
+    [pitchingRows, gameSet],
+  );
 
   const buildBattingStats = useCallback(
     (row: StatsCenterRow): PlayerRowStat[] => {
@@ -529,6 +597,29 @@ export function StatsCenterClient({ model: initialModel, initialFilters, statVis
     },
     [gameSet, pitchingLeaders],
   );
+  // Mobile card stats are self-labeled (no shared column header below md).
+  const buildMobileBattingStats = useCallback(
+    (row: StatsCenterRow): PlayerRowStat[] => {
+      const b = gameSet === 'official' ? row.battingOfficial : row.battingAll;
+      return MOBILE_BATTING_COLS.map((col, i) => ({
+        label: col.label,
+        value: col.cell(b),
+        leader: mobileBattingLeaders[i]?.has(row.playerId) ?? false,
+      }));
+    },
+    [gameSet, mobileBattingLeaders],
+  );
+  const buildMobilePitchingStats = useCallback(
+    (row: StatsCenterRow): PlayerRowStat[] => {
+      const p = gameSet === 'official' ? row.pitchingOfficial : row.pitchingAll;
+      return MOBILE_PITCHING_COLS.map((col, i) => ({
+        label: col.label,
+        value: col.cell(p),
+        leader: mobilePitchingLeaders[i]?.has(row.playerId) ?? false,
+      }));
+    },
+    [gameSet, mobilePitchingLeaders],
+  );
 
   const showBatting = side !== 'pitching';
   const showPitching = side !== 'batting';
@@ -755,9 +846,11 @@ export function StatsCenterClient({ model: initialModel, initialFilters, statVis
                 <StatSpread
                   heading="Batting"
                   columns={BATTING_COLS.map((c) => c.label)}
+                  mobileColumns={MOBILE_BATTING_COLS.map((c) => c.label)}
                   realRows={battingRows}
                   ghostRows={battingGhosts}
                   buildStats={buildBattingStats}
+                  buildMobileStats={buildMobileBattingStats}
                   emptyTitle="No batting lines yet."
                   emptyBody="Batting production prints here after your first captured box score in this game set."
                 />
@@ -766,9 +859,11 @@ export function StatsCenterClient({ model: initialModel, initialFilters, statVis
                 <StatSpread
                   heading="Pitching"
                   columns={PITCHING_COLS.map((c) => c.label)}
+                  mobileColumns={MOBILE_PITCHING_COLS.map((c) => c.label)}
                   realRows={pitchingRows}
                   ghostRows={pitchingGhosts}
                   buildStats={buildPitchingStats}
+                  buildMobileStats={buildMobilePitchingStats}
                   emptyTitle="No pitching lines yet."
                   emptyBody="Pitching lines print here after your first captured appearance in this game set."
                 />
diff --git a/src/components/fairway/pages/calendar/FairwayCalendarHero.tsx b/src/components/fairway/pages/calendar/FairwayCalendarHero.tsx
index 4f884970e..04c2a4141 100644
--- a/src/components/fairway/pages/calendar/FairwayCalendarHero.tsx
+++ b/src/components/fairway/pages/calendar/FairwayCalendarHero.tsx
@@ -114,8 +114,17 @@ export function FairwayCalendarHero({
           )}
         </div>
 
-        {/* Action cluster — nav + the ONE primary action. */}
-        <div className="flex flex-shrink-0 items-center gap-2">
+        {/* Action cluster — nav + the ONE primary action.
+            DESKTOP (md+): byte-identical single row — unchanged.
+            PHONE (<md): the four controls (2× 44px IconButton + Today + a
+            primary CTA) blow the ~294px content budget at 390px in one row
+            (Surface padding="lg" + page px-4), so the phone treatment is
+            hand-composed, not wrapped: a centered Prev · Today · Next nav row,
+            then the ONE primary action full-width on its own row in the
+            thumb zone. "Today" drops to `size="sm"` on phone — a compact
+            affordance, not a full chip — while Prev/Next stay `md` (44px,
+            the touch-target minimum). */}
+        <div className="hidden flex-shrink-0 items-center gap-2 md:flex">
           <IconButton
             variant="secondary"
             size="md"
@@ -153,6 +162,51 @@ export function FairwayCalendarHero({
             </Button>
           ) : null}
         </div>
+
+        {/* PHONE ONLY — nav row (centered Today) + full-width primary CTA. */}
+        <div className="flex flex-col gap-3 md:hidden">
+          <div className="grid grid-cols-3 items-center">
+            <IconButton
+              variant="secondary"
+              size="md"
+              aria-label="Previous"
+              className="justify-self-start"
+              onClick={() => onNavigate('prev')}
+            >
+              <ChevronLeft />
+            </IconButton>
+            <Button
+              variant={focusIsToday ? 'secondary' : 'ghost'}
+              size="sm"
+              className="justify-self-center"
+              onClick={() => onNavigate('today')}
+              aria-pressed={focusIsToday}
+            >
+              Today
+            </Button>
+            <IconButton
+              variant="secondary"
+              size="md"
+              aria-label="Next"
+              className="justify-self-end"
+              onClick={() => onNavigate('next')}
+            >
+              <ChevronRight />
+            </IconButton>
+          </div>
+
+          {onPrimaryAction ? (
+            <Button
+              variant="primary"
+              size="md"
+              fullWidth
+              onClick={onPrimaryAction}
+              leftIcon={isCoach ? <Plus /> : undefined}
+            >
+              {primaryActionLabel ?? (isCoach ? 'New event' : 'Respond')}
+            </Button>
+          ) : null}
+        </div>
       </div>
 
       {/* Day strip — sits inside the plinth, beneath the title. */}
diff --git a/src/components/fairway/pages/qualifiers/FairwayQualifierDetail.tsx b/src/components/fairway/pages/qualifiers/FairwayQualifierDetail.tsx
index a204a4aff..4b851fbe7 100644
--- a/src/components/fairway/pages/qualifiers/FairwayQualifierDetail.tsx
+++ b/src/components/fairway/pages/qualifiers/FairwayQualifierDetail.tsx
@@ -399,7 +399,9 @@ function DetailItem({
 }
 
 /* ─────────────────────────────────────────────────────────────────────────
- * Round-by-round matte table — drops the skeuomorphic surface-matte card chrome
+ * Round-by-round breakdown — coach-only. Below `md` this is card rows
+ * (player + per-round scores as compact inline chips + total/to-par), not a
+ * squeezed table (Rule 8). The `md+` table is byte-identical to before.
  * ──────────────────────────────────────────────────────────────────────── */
 
 function RoundBreakdownTable({
@@ -410,99 +412,177 @@ function RoundBreakdownTable({
   maxRoundNumber: number;
 }) {
   const roundColumns = Array.from({ length: maxRoundNumber }, (_, i) => i + 1);
+
   // Only rank players who actually posted a round (honest position).
+  // Computed once, up front, so both the phone card list and the md+ table
+  // read identical ranks off the same map — two independent render passes
+  // must never share a mutable counter.
   let scoredSeen = 0;
+  const positions = new Map<string, number | null>();
+  for (const [playerId, data] of breakdown) {
+    positions.set(playerId, data.rounds.length > 0 ? ++scoredSeen : null);
+  }
 
   return (
-    <div className="overflow-x-auto overscroll-x-contain">
-      <table className="w-full min-w-[480px] border-collapse font-fw-sans text-body">
-        <thead>
-          <tr className="border-b border-border-strong text-left">
-            <th className="w-8 pb-2 pr-3 font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
-              #
-            </th>
-            <th className="pb-2 pr-3 font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
-              Player
-            </th>
-            {roundColumns.map((n) => (
-              <th
-                key={n}
-                className="px-2 pb-2 text-center font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary"
-              >
-                R{n}
-              </th>
-            ))}
-            <th className="pb-2 pl-3 text-right font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
-              Total
-            </th>
-            <th className="pb-2 pl-3 text-right font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
-              To par
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {breakdown.map(([playerId, data]) => {
-            const hasRounds = data.rounds.length > 0;
-            const position = hasRounds ? ++scoredSeen : null;
-            const leader = position === 1;
-
-            return (
-              <tr
-                key={playerId}
-                className={cn(
-                  'border-b border-border-subtle last:border-b-0',
-                  leader && 'bg-accent-50/60',
-                )}
-              >
-                <td className="py-2.5 pr-3 tabular-nums">
-                  <span className={cn(leader ? 'font-medium text-accent-700' : 'text-text-tertiary')}>
+    <>
+      {/* Phone — card rows: player + per-round chips + total (Rule 8) */}
+      <ul className="divide-y divide-border-subtle md:hidden">
+        {breakdown.map(([playerId, data]) => {
+          const hasRounds = data.rounds.length > 0;
+          const position = positions.get(playerId) ?? null;
+          const leader = position === 1;
+
+          return (
+            <li
+              key={playerId}
+              className={cn('flex flex-col gap-2.5 py-3 first:pt-0 last:pb-0', leader && 'bg-accent-50/60')}
+            >
+              <div className="flex items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-2.5">
+                  <span
+                    className={cn(
+                      'w-5 shrink-0 text-right font-fw-mono text-body-sm tabular-nums',
+                      leader ? 'font-medium text-accent-700' : 'text-text-tertiary',
+                    )}
+                  >
                     {position ?? '—'}
                   </span>
-                </td>
-                <td className="whitespace-nowrap py-2.5 pr-3 font-medium text-text-primary">
                   <Link
                     href={`/golf/dashboard/stats?player=${playerId}`}
-                    className="rounded-fw-sm underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+                    className="min-w-0 flex-1 truncate rounded-fw-sm font-fw-sans text-body font-medium text-text-primary underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
                   >
                     {data.playerName}
                   </Link>
-                </td>
-                {roundColumns.map((n) => {
-                  const round = data.rounds.find((r) => r.roundNumber === n);
-                  return (
-                    <td key={n} className="px-2 py-2.5 text-center">
-                      {round ? (
-                        <div className="flex flex-col items-center">
-                          <span className="font-fw-mono text-body-sm font-medium text-text-primary tabular-nums">
-                            {round.score ?? '—'}
-                          </span>
-                          <span className={cn('font-fw-mono text-caption tabular-nums', toParToneClass(round.toPar))}>
-                            {formatToPar(round.toPar)}
-                          </span>
-                        </div>
-                      ) : (
-                        <span className="text-caption text-text-tertiary">—</span>
-                      )}
-                    </td>
-                  );
-                })}
-                <td className="py-2.5 pl-3 text-right font-fw-mono font-medium text-text-primary tabular-nums">
-                  {hasRounds ? data.totalScore : '—'}
-                </td>
-                <td
+                </div>
+                <div className="shrink-0 text-right">
+                  <p className="font-fw-mono text-body font-semibold tabular-nums text-text-primary">
+                    {hasRounds ? data.totalScore : '—'}
+                  </p>
+                  <p
+                    className={cn(
+                      'font-fw-mono text-caption tabular-nums',
+                      hasRounds ? toParToneClass(data.totalToPar) : 'text-text-tertiary',
+                    )}
+                  >
+                    {hasRounds ? formatToPar(data.totalToPar) : '—'}
+                  </p>
+                </div>
+              </div>
+
+              {hasRounds ? (
+                <div className="flex flex-wrap gap-1.5">
+                  {roundColumns.map((n) => {
+                    const round = data.rounds.find((r) => r.roundNumber === n);
+                    if (!round) return null;
+                    return (
+                      <span
+                        key={n}
+                        className="inline-flex items-center gap-1 rounded-fw-sm bg-surface-sunken px-2 py-1 font-fw-mono text-caption tabular-nums"
+                      >
+                        <span className="text-text-tertiary">R{n}</span>
+                        <span className="font-medium text-text-primary">{round.score ?? '—'}</span>
+                        <span className={toParToneClass(round.toPar)}>{formatToPar(round.toPar)}</span>
+                      </span>
+                    );
+                  })}
+                </div>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+
+      {/* md+ — the original matte table, unchanged */}
+      <div className="hidden overflow-x-auto overscroll-x-contain md:block">
+        <table className="w-full min-w-[480px] border-collapse font-fw-sans text-body">
+          <thead>
+            <tr className="border-b border-border-strong text-left">
+              <th className="w-8 pb-2 pr-3 font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
+                #
+              </th>
+              <th className="pb-2 pr-3 font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
+                Player
+              </th>
+              {roundColumns.map((n) => (
+                <th
+                  key={n}
+                  className="px-2 pb-2 text-center font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary"
+                >
+                  R{n}
+                </th>
+              ))}
+              <th className="pb-2 pl-3 text-right font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
+                Total
+              </th>
+              <th className="pb-2 pl-3 text-right font-fw-sans text-eyebrow font-semibold uppercase tracking-[0.07em] text-text-tertiary">
+                To par
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {breakdown.map(([playerId, data]) => {
+              const hasRounds = data.rounds.length > 0;
+              const position = positions.get(playerId) ?? null;
+              const leader = position === 1;
+
+              return (
+                <tr
+                  key={playerId}
                   className={cn(
-                    'py-2.5 pl-3 text-right font-fw-mono font-medium tabular-nums',
-                    hasRounds ? toParToneClass(data.totalToPar) : 'text-text-tertiary',
+                    'border-b border-border-subtle last:border-b-0',
+                    leader && 'bg-accent-50/60',
                   )}
                 >
-                  {hasRounds ? formatToPar(data.totalToPar) : '—'}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </div>
+                  <td className="py-2.5 pr-3 tabular-nums">
+                    <span className={cn(leader ? 'font-medium text-accent-700' : 'text-text-tertiary')}>
+                      {position ?? '—'}
+                    </span>
+                  </td>
+                  <td className="whitespace-nowrap py-2.5 pr-3 font-medium text-text-primary">
+                    <Link
+                      href={`/golf/dashboard/stats?player=${playerId}`}
+                      className="rounded-fw-sm underline-offset-2 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 focus-visible:ring-offset-canvas"
+                    >
+                      {data.playerName}
+                    </Link>
+                  </td>
+                  {roundColumns.map((n) => {
+                    const round = data.rounds.find((r) => r.roundNumber === n);
+                    return (
+                      <td key={n} className="px-2 py-2.5 text-center">
+                        {round ? (
+                          <div className="flex flex-col items-center">
+                            <span className="font-fw-mono text-body-sm font-medium text-text-primary tabular-nums">
+                              {round.score ?? '—'}
+                            </span>
+                            <span className={cn('font-fw-mono text-caption tabular-nums', toParToneClass(round.toPar))}>
+                              {formatToPar(round.toPar)}
+                            </span>
+                          </div>
+                        ) : (
+                          <span className="text-caption text-text-tertiary">—</span>
+                        )}
+                      </td>
+                    );
+                  })}
+                  <td className="py-2.5 pl-3 text-right font-fw-mono font-medium text-text-primary tabular-nums">
+                    {hasRounds ? data.totalScore : '—'}
+                  </td>
+                  <td
+                    className={cn(
+                      'py-2.5 pl-3 text-right font-fw-mono font-medium tabular-nums',
+                      hasRounds ? toParToneClass(data.totalToPar) : 'text-text-tertiary',
+                    )}
+                  >
+                    {hasRounds ? formatToPar(data.totalToPar) : '—'}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </>
   );
 }
 
diff --git a/src/components/fairway/pages/rounds/FairwayRoundDetail.tsx b/src/components/fairway/pages/rounds/FairwayRoundDetail.tsx
index 447187893..a27fede5d 100644
--- a/src/components/fairway/pages/rounds/FairwayRoundDetail.tsx
+++ b/src/components/fairway/pages/rounds/FairwayRoundDetail.tsx
@@ -57,6 +57,7 @@ import {
   EmptyState,
   Button,
 } from '@/components/fairway';
+import { cn } from '@/lib/utils';
 
 /* ───────────────────────────────────────────────────────────────────────────
  * Props — fully-resolved, serializable data from the server page.
@@ -583,7 +584,12 @@ function Scorecard({
 }
 
 /** A single nine-hole block: a hole-number header row + par/score/putts/FW/GIR
- *  rows, then a nine total. */
+ *  rows, then a nine total.
+ *
+ *  Below `md` this renders as a real phone scorecard — per-hole row strips
+ *  (hole · par · score-vs-par pill · putts · FW/GIR marks), the shape a
+ *  golfer actually recognizes — NOT the desktop table squeezed into a
+ *  scroll box (Rule 8). The `md+` table is byte-identical to before. */
 function ScorecardNine({
   label,
   holes,
@@ -601,90 +607,209 @@ function ScorecardNine({
   const puttTotal = holes.reduce((s, h) => s + (finite(h.putts) ?? 0), 0);
 
   return (
-    <div className="overflow-x-auto px-2 py-3">
-      <table className="w-full min-w-[560px] border-collapse text-center">
-        <caption className="sr-only">{label} nine scorecard</caption>
-        <thead>
-          <tr>
-            <Th className="text-left">{label}</Th>
-            {holes.map((h) => (
-              <Th key={h.hole_number}>{h.hole_number}</Th>
-            ))}
-            <Th className="bg-surface-tint">Out</Th>
-          </tr>
-        </thead>
-        <tbody>
-          {/* Par */}
-          <tr>
-            <RowLabel>Par</RowLabel>
-            {holes.map((h) => (
-              <Td key={h.hole_number} className="text-text-tertiary">
-                {finite(h.par) ?? '—'}
-              </Td>
-            ))}
-            <Td className="bg-surface-tint font-semibold text-text-secondary">{parTotal || '—'}</Td>
-          </tr>
-          {/* Score — tone-coded vs par (never color-only: glyph-free but the
-              number itself is the primary channel; tone is a quiet reinforcement) */}
-          <tr>
-            <RowLabel>Score</RowLabel>
-            {holes.map((h) => {
-              const s = finite(h.score);
-              const p = finite(h.par);
-              const tone =
-                s != null && p != null
-                  ? s < p
-                    ? 'text-fw-success'
-                    : s > p
-                      ? 'text-fw-warning'
-                      : 'text-text-primary'
-                  : 'text-text-tertiary';
-              return (
-                <Td key={h.hole_number} className={`font-semibold ${tone}`}>
-                  {s ?? '—'}
-                </Td>
-              );
-            })}
-            <Td className="bg-surface-tint font-semibold text-text-primary">
+    <div className="flex flex-col">
+      {/* Phone — per-hole row strips (Rule 8: never a squeezed table) */}
+      <div className="flex flex-col gap-2 px-3 py-3 md:hidden">
+        <div className="flex items-center justify-between px-1">
+          <span className="font-fw-display text-eyebrow font-medium uppercase tracking-[0.14em] text-text-tertiary">
+            {label} nine
+          </span>
+          {parTotal ? (
+            <span className="font-fw-mono text-caption tabular-nums text-text-tertiary">
+              Par {parTotal}
+            </span>
+          ) : null}
+        </div>
+        <ul className="divide-y divide-border-subtle">
+          {holes.map((h) => (
+            <ScorecardHoleRow key={h.hole_number} hole={h} />
+          ))}
+        </ul>
+        <div className="mt-1 flex items-center justify-between rounded-fw-md bg-surface-tint px-3 py-2.5">
+          <span className="font-fw-display text-caption font-medium uppercase tracking-[0.1em] text-text-tertiary">
+            {label} total
+          </span>
+          <div className="flex items-baseline gap-3">
+            <span className="font-fw-mono text-caption tabular-nums text-text-secondary">
+              {puttTotal || '—'} putts
+            </span>
+            <span className="font-fw-mono text-h3 font-semibold tabular-nums text-text-primary">
               {scoreTotal || '—'}
-            </Td>
-          </tr>
-          {/* Putts */}
-          <tr>
-            <RowLabel>Putts</RowLabel>
-            {holes.map((h) => (
-              <Td key={h.hole_number} className="text-text-secondary">
-                {finite(h.putts) ?? '—'}
-              </Td>
-            ))}
-            <Td className="bg-surface-tint text-text-secondary">{puttTotal || '—'}</Td>
-          </tr>
-          {/* Fairway hit — par-3s have no fairway (fairway_hit NULL → blank dot) */}
-          <tr>
-            <RowLabel>FW</RowLabel>
-            {holes.map((h) => (
-              <Td key={h.hole_number}>
-                <HitMark value={h.fairway_hit} />
-              </Td>
-            ))}
-            <Td className="bg-surface-tint" />
-          </tr>
-          {/* GIR */}
-          <tr>
-            <RowLabel>GIR</RowLabel>
-            {holes.map((h) => (
-              <Td key={h.hole_number}>
-                <HitMark value={h.gir} />
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* md+ — the original matte table, unchanged */}
+      <div className="hidden overflow-x-auto px-2 py-3 md:block">
+        <table className="w-full min-w-[560px] border-collapse text-center">
+          <caption className="sr-only">{label} nine scorecard</caption>
+          <thead>
+            <tr>
+              <Th className="text-left">{label}</Th>
+              {holes.map((h) => (
+                <Th key={h.hole_number}>{h.hole_number}</Th>
+              ))}
+              <Th className="bg-surface-tint">Out</Th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* Par */}
+            <tr>
+              <RowLabel>Par</RowLabel>
+              {holes.map((h) => (
+                <Td key={h.hole_number} className="text-text-tertiary">
+                  {finite(h.par) ?? '—'}
+                </Td>
+              ))}
+              <Td className="bg-surface-tint font-semibold text-text-secondary">{parTotal || '—'}</Td>
+            </tr>
+            {/* Score — tone-coded vs par (never color-only: glyph-free but the
+                number itself is the primary channel; tone is a quiet reinforcement) */}
+            <tr>
+              <RowLabel>Score</RowLabel>
+              {holes.map((h) => {
+                const s = finite(h.score);
+                const p = finite(h.par);
+                const tone =
+                  s != null && p != null
+                    ? s < p
+                      ? 'text-fw-success'
+                      : s > p
+                        ? 'text-fw-warning'
+                        : 'text-text-primary'
+                    : 'text-text-tertiary';
+                return (
+                  <Td key={h.hole_number} className={`font-semibold ${tone}`}>
+                    {s ?? '—'}
+                  </Td>
+                );
+              })}
+              <Td className="bg-surface-tint font-semibold text-text-primary">
+                {scoreTotal || '—'}
               </Td>
-            ))}
-            <Td className="bg-surface-tint" />
-          </tr>
-        </tbody>
-      </table>
+            </tr>
+            {/* Putts */}
+            <tr>
+              <RowLabel>Putts</RowLabel>
+              {holes.map((h) => (
+                <Td key={h.hole_number} className="text-text-secondary">
+                  {finite(h.putts) ?? '—'}
+                </Td>
+              ))}
+              <Td className="bg-surface-tint text-text-secondary">{puttTotal || '—'}</Td>
+            </tr>
+            {/* Fairway hit — par-3s have no fairway (fairway_hit NULL → blank dot) */}
+            <tr>
+              <RowLabel>FW</RowLabel>
+              {holes.map((h) => (
+                <Td key={h.hole_number}>
+                  <HitMark value={h.fairway_hit} />
+                </Td>
+              ))}
+              <Td className="bg-surface-tint" />
+            </tr>
+            {/* GIR */}
+            <tr>
+              <RowLabel>GIR</RowLabel>
+              {holes.map((h) => (
+                <Td key={h.hole_number}>
+                  <HitMark value={h.gir} />
+                </Td>
+              ))}
+              <Td className="bg-surface-tint" />
+            </tr>
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
 
+/** Phone-only per-hole row: hole · par · score-vs-par pill · putts · FW/GIR
+ *  marks. Same underlying data + tone rules as the md+ table's Score row
+ *  (glyph-free color reinforcement backed by the explicit to-par pill text —
+ *  never color-only). */
+function ScorecardHoleRow({ hole }: { hole: RoundHoleRow }) {
+  const s = finite(hole.score);
+  const p = finite(hole.par);
+  const toPar = s != null && p != null ? s - p : null;
+
+  const scoreTone =
+    toPar == null
+      ? 'text-text-tertiary'
+      : toPar < 0
+        ? 'text-fw-success'
+        : toPar > 0
+          ? 'text-fw-warning'
+          : 'text-text-primary';
+
+  const pillTone =
+    toPar == null
+      ? 'bg-surface-sunken text-text-tertiary'
+      : toPar < 0
+        ? 'bg-fw-success-bg text-fw-success'
+        : toPar > 0
+          ? 'bg-fw-warning-bg text-fw-warning'
+          : 'bg-surface-sunken text-text-secondary';
+
+  return (
+    <li className="flex items-center gap-2.5 py-2.5 first:pt-0 last:pb-0">
+      <span
+        aria-hidden="true"
+        className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-surface-sunken font-fw-mono text-body-sm font-semibold tabular-nums text-text-secondary"
+      >
+        {hole.hole_number}
+      </span>
+      <div className="w-8 shrink-0 leading-tight">
+        <p className="font-fw-display text-eyebrow font-medium uppercase tracking-[0.06em] text-text-tertiary">
+          Par
+        </p>
+        <p className="font-fw-mono text-body-sm font-medium tabular-nums text-text-secondary">
+          {p ?? '—'}
+        </p>
+      </div>
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <span className={cn('font-fw-mono text-h3 font-semibold tabular-nums', scoreTone)}>
+          {s ?? '—'}
+        </span>
+        <span
+          className={cn(
+            'shrink-0 rounded-full px-1.5 py-0.5 font-fw-mono text-caption font-medium tabular-nums',
+            pillTone,
+          )}
+        >
+          {formatToPar(toPar)}
+        </span>
+      </div>
+      {/* Label-over-value, mirroring the Par block — one micro-pattern
+          across the row's small data blocks. */}
+      <div className="w-10 shrink-0 text-right leading-tight">
+        <p className="font-fw-display text-eyebrow font-medium uppercase tracking-[0.06em] text-text-tertiary">
+          Putts
+        </p>
+        <p className="font-fw-mono text-body-sm tabular-nums text-text-secondary">
+          {finite(hole.putts) ?? '—'}
+        </p>
+      </div>
+      <div className="flex shrink-0 flex-col items-end gap-1 pl-1">
+        <span className="inline-flex items-center gap-1.5">
+          <span className="font-fw-display text-eyebrow font-medium uppercase tracking-[0.06em] text-text-tertiary">
+            FW
+          </span>
+          <HitMark value={hole.fairway_hit} />
+        </span>
+        <span className="inline-flex items-center gap-1.5">
+          <span className="font-fw-display text-eyebrow font-medium uppercase tracking-[0.06em] text-text-tertiary">
+            GIR
+          </span>
+          <HitMark value={hole.gir} />
+        </span>
+      </div>
+    </li>
+  );
+}
+
 function Th({ children, className = '' }: { children?: React.ReactNode; className?: string }) {
   return (
     <th