diff --git a/src/App.module.css b/src/App.module.css
index d68b444..0e6a231 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -112,3 +112,29 @@
 .sheetLabel:first-child {
   margin-top: 0;
 }
+
+/* The detail sheet: what the 84px card cannot hold. */
+.detailCombo {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+}
+
+/* The gesture is the instruction for the 24 entries that have one. */
+.detailHow {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.detailBody {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--muted);
+  text-wrap: pretty;
+}
diff --git a/src/App.tsx b/src/App.tsx
index ce76cb0..f56a5bb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,7 @@ import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "r
 import { DECKS, boxDistribution, deckPool, knownCount, pickCard } from "./domain/drill";
 import type { DeckId, Direction, InputMode } from "./domain/drill";
 import { ENTRIES, layerKeyOf } from "./domain/entries";
-import { controlName } from "./domain/format";
+import { comboText, contextNames, controlName } from "./domain/format";
 import { CTX, CTXHINT, NOLATCH } from "./domain/labels";
 import {
   entriesByTarget,
@@ -35,7 +35,7 @@ import styles from "./App.module.css";
 
 const TABS = ["Explore", "Drill", "Find", "Rules"] as const;
 type Tab = (typeof TABS)[number];
-type OpenSheet = null | "mode" | "layer" | "settings";
+type OpenSheet = null | "mode" | "layer" | "settings" | "detail";
 
 /** Longer than this and the press was a hold to peek, not a tap to lock. */
 const HOLD_MS = 350;
@@ -322,7 +322,13 @@ export function App() {
           onPickOption={(name) => dispatch({ type: "pickOption", name })}
         />
       ) : (
-        <InfoCard entry={selected} ctx={ctx} hint={CTXHINT[ctx]} count={onLayer.length} />
+        <InfoCard
+          entry={selected}
+          ctx={ctx}
+          hint={CTXHINT[ctx]}
+          count={onLayer.length}
+          onMore={() => setSheet("detail")}
+        />
       )}
 
       <nav className={styles.nav}>
@@ -337,6 +343,36 @@ export function App() {
         ))}
       </nav>
 
+      <Sheet
+        open={sheet === "detail" && selected !== null}
+        title={selected ? selected.name : ""}
+        onClose={() => setSheet(null)}
+      >
+        {selected ? (
+          <>
+            <p className={styles.sheetLabel}>Combo</p>
+            <p className={styles.detailCombo}>{comboText(selected)}</p>
+
+            {selected.how ? (
+              <>
+                <p className={styles.sheetLabel}>Gesture</p>
+                <p className={styles.detailHow}>{selected.how}</p>
+              </>
+            ) : null}
+
+            <p className={styles.sheetLabel}>What it does</p>
+            <p className={styles.detailBody}>
+              {selected.desc || "No description in the reference."}
+            </p>
+
+            <p className={styles.sheetLabel}>Where</p>
+            <p className={styles.detailBody}>
+              {contextNames(selected.ctx).join(", ")} &middot; manual p.{selected.page}
+            </p>
+          </>
+        ) : null}
+      </Sheet>
+
       <Sheet open={sheet === "mode"} title="Where you are" onClose={() => setSheet(null)}>
         {(Object.keys(CTX) as ContextCode[]).map((code) => (
           <SheetOption
diff --git a/src/ui/InfoCard.module.css b/src/ui/InfoCard.module.css
index 1ad86fa..b7570fa 100644
--- a/src/ui/InfoCard.module.css
+++ b/src/ui/InfoCard.module.css
@@ -35,6 +35,30 @@
   flex: 0 0 auto;
 }
 
+.metaRight {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.more {
+  font-family: var(--font);
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  color: var(--ink);
+  background: none;
+  border: var(--outline);
+  padding: 2px 6px;
+}
+
+/* The gesture, when the table gives one: read this before the description. */
+.how {
+  color: var(--accent);
+  font-weight: 700;
+}
+
 .combo {
   display: flex;
   align-items: center;
diff --git a/src/ui/InfoCard.tsx b/src/ui/InfoCard.tsx
index 6ed0755..762db94 100644
--- a/src/ui/InfoCard.tsx
+++ b/src/ui/InfoCard.tsx
@@ -1,5 +1,6 @@
 /** The card under the panel: the layer's hint, or the selected combo. */
-import { comboParts, contextNames } from "../domain/format";
+import { useEffect, useRef, useState } from "react";
+import { comboParts } from "../domain/format";
 import type { ContextCode, Entry } from "../domain/types";
 import styles from "./InfoCard.module.css";
 
@@ -8,9 +9,21 @@ export interface InfoCardProps {
   readonly ctx: ContextCode;
   readonly hint: string;
   readonly count: number;
+  /** Open the full description. Offered when the card cannot show it all. */
+  readonly onMore: () => void;
 }
 
-export function InfoCard({ entry, hint, count }: InfoCardProps) {
+export function InfoCard({ entry, hint, count, onMore }: InfoCardProps) {
+  const body = useRef<HTMLParagraphElement>(null);
+  const [clipped, setClipped] = useState(false);
+
+  // Measured rather than guessed from a character count: the card is a fixed
+  // 84px, so whether the text fits depends on how it wraps.
+  useEffect(() => {
+    const el = body.current;
+    setClipped(el !== null && el.scrollHeight > el.clientHeight + 1);
+  }, [entry]);
+
   if (!entry) {
     return (
       <div className={styles.card}>
@@ -27,6 +40,10 @@ export function InfoCard({ entry, hint, count }: InfoCardProps) {
     );
   }
 
+  // The gesture matters as much as the description — SHIFT + REMAIN is a
+  // three-second hold — so a card carrying one always offers the full text.
+  const showMore = clipped || entry.how !== undefined;
+
   return (
     <div className={styles.card}>
       <div className={styles.meta}>
@@ -38,11 +55,19 @@ export function InfoCard({ entry, hint, count }: InfoCardProps) {
             </span>
           ))}
         </span>
-        <span className={styles.page}>P.{entry.page}</span>
+        <span className={styles.metaRight}>
+          {showMore ? (
+            <button className={styles.more} onClick={onMore}>
+              MORE
+            </button>
+          ) : null}
+          <span className={styles.page}>P.{entry.page}</span>
+        </span>
       </div>
       <h2 className={styles.title}>{entry.name}</h2>
-      <p className={styles.body}>
-        {entry.desc || contextNames(entry.ctx).join(", ")}
+      <p className={styles.body} ref={body}>
+        {entry.how ? <b className={styles.how}>{entry.how}. </b> : null}
+        {entry.desc}
       </p>
     </div>
   );