/* ═══════════════════════════════════════════════
   .freq-tier — semantic frequency tier badge
   4-tier honest gradient: Core / Everyday / Occasional / Rare
   Describes position on the Tubelex spoken-frequency curve.

   Tier 1 · Core       · deep evergreen, top of the curve (rank 1–1K)
   Tier 2 · Everyday   · muted indigo (ai-iro), daily-life vocab (1K–10K)
   Tier 3 · Occasional · aged gold, situational (10K–25K)
   Tier 4 · Rare       · faint thin weight, long tail (25K+)

   Green for Core reads as "vital / structural" (evergreen pine).
   Muted indigo for Everyday sits in a different hue family (cool blue
   vs. warm green/brown), so Core and Everyday never blur. All four hues
   are muted earth/sky tones — distinct without being loud.

   Single source of truth lives in window.FreqTier (js/freq-tier.js).
   ═══════════════════════════════════════════════ */

.freq-tier {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;

    /* Latin only ever renders here ("Core" / "Everyday" / "1K"), so the stack
       ends at the generic. 'Klee One' used to sit second and, with
       &display=swap, painted the badge in the rounded Japanese handwriting
       face for a beat on every cold load. */
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;

    font-size: 11px;
    /* `filter` was in this list but is never animated on .freq-tier (the only
       filter declaration on it is a static `filter: none`) — dead weight. */
    transition: opacity 280ms var(--ease-settle, cubic-bezier(0.22, 1, 0.36, 1));
}

.freq-tier .label {
    font-weight: 600;
}

/* ═══════════════════════════════════════════════
   Tier 1 (Core) two-part typography — CORE 1K
   Small-caps prefix + tabular-figured numeral: muted prefix as the label,
   tier-colored numeral as the focal mark. Scoped to [data-freq-tier="1"]
   so tiers 2-4 stay as single-label pills.

   TYPE LAW (2026-08-01): the numeral is INTER, the app's number voice —
   every count the app says out loud (the hall's "29 LEARNED", a collection's
   "1,528 WORDS", the progress "2%") is Inter tabular. The badge used to set
   it in 'Noto Serif JP' 600, which was wrong twice over: the app loads that
   family at 400/500 ONLY (index.html), so 600 was a browser-SYNTHESIZED bold
   — a smeared face belonging to no typeface we ship — and a Latin serif is a
   voice this design system speaks nowhere else (its two faces are Klee One
   for Japanese, Inter for UI). The desktop-grid meta strip had already
   flattened the serif away for exactly this reason (block further down);
   this extends that ruling to the remaining surfaces so one badge = one voice.
   ═══════════════════════════════════════════════ */

.freq-tier[data-freq-tier="1"] .pre {
    font-family: 'Inter', sans-serif;
    /* Floor the relative step: surfaces that shrink the pill without
       re-stating .pre (the 稽古 walk's 10px colophon chip) collapsed "CORE"
       to 6.5px — a grey smudge beside a full-size "1K". */
    font-size: max(8.5px, 0.65em);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.45em;
    vertical-align: 0.12em;
    opacity: 0.78;
    color: var(--color-stone, #57534e);
}

.freq-tier[data-freq-tier="1"] .num,
.freq-tier[data-freq-tier="1"] .unit {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.freq-tier[data-freq-tier="1"] .unit {
    font-weight: 500;
    font-size: 0.82em;
    margin-left: 0.5px;
}

/* Distinct hues per tier — green Core, indigo Everyday, warm cascade. */

/* ── Tier 1 · Core — deep evergreen (vital, structural) ──
   No halo. The app has exactly one text-shadow idiom and it is COLOURLESS
   sumi at 12% ("ink absorption", on Klee display glyphs only); a 0.4-alpha
   GREEN glow in the label's own hue was the single self-coloured halo in
   css/ and reads as a badge printed out of register. Design principle 5:
   "No dramatic lifts or glows." */
.freq-tier[data-freq-tier="1"] {
    color: var(--color-moss-bright);
    opacity: 0.72;
    text-shadow: none;
}

/* ── Tier 2 · Everyday — muted indigo (cool, calm) ── */
.freq-tier[data-freq-tier="2"] {
    color: #8FA8C8; /* brighter indigo for watermark surfaces */
    opacity: 0.62;
}

/* ── Tier 3 · Occasional — aged gold (autumn warm, not red) ── */
.freq-tier[data-freq-tier="3"] {
    color: #D4B570; /* brighter gold for watermark surfaces */
    opacity: 0.58;
}

/* ── Tier 4 · Rare — faint + thin (visually last) ── */
.freq-tier[data-freq-tier="4"] {
    color: var(--color-faint);
    opacity: 0.42;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════
   Desktop grid card — hover-revealed meta, split across two zones
   Top zone (under chrome icons): identity stack — noun · CORE
   Bottom zone: triptych — category (left) | related (center) | action (right)
   Category appears only when tier ≥ 3 (Occasional / Rare); common-vocab
   buckets are redundant noise next to the image and headword.
   ═══════════════════════════════════════════════ */

/* ── Top-right identity pill — POS · FREQ ──
   Vertically aligned with the romaji line at top-left so the header zone
   shares one baseline grid: furigana / kanji / romaji on the left, chrome
   icons / blank / POS·FREQ on the right. Right padding matches the header's
   right padding (20px) so the column edge aligns too.
   Typography follows the romaji at top-left (Inter italic) so POS reads as
   a familiar dictionary annotation, not a visiting design system. FREQ keeps
   the uppercase tracked-sans stamp form, but the tier hue is pulled from the
   muted earth palette tokens so it harmonizes with the rest of the card. */
.grid-card-meta-top {
    position: absolute;
    /* Gallery placard: the identity line sits at the label's top-right corner,
       sharing the headword's line — a museum label annotation, not chrome on
       the painting. (--painting-h published on .grid-cards.) The headword
       stands below the ruby seat every word tile now holds (--ruby-seat,
       desktop polish round 3, finding 2a), so the line drops by the seat with
       it. */
    top: calc(var(--painting-h, 260px) + 18px + var(--ruby-seat, 0px));
    right: 4px;
    z-index: 3;
    display: inline-flex;
    /* BASELINE, never box-centre: the strip mixes three sizes (11px lowercase
       POS, 10px tracked caps band, 11px roman rank tail) and align-items:center
       centres their BOXES, so no two of them sat on one line. Measured before:
       POS bottom 131.9 / band 133.6 / tail 131.1. */
    align-items: baseline;
    gap: 6px;

    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-stone, #57534e);

    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-card:hover .grid-card-meta-top,
.grid-card:focus-within .grid-card-meta-top {
    opacity: 1;
    pointer-events: auto;
    transition-delay: var(--wake-2, 0ms);  /* knowledge beat of the hover cascade */
}

.grid-card-meta-top .meta-sep {
    color: var(--color-faint);
    opacity: 0.5;
}

/* POS = dictionary annotation voice — Inter lowercase. Roman, not italic:
   italic is reserved for romaji (the pronunciation layer). faint-warm holds
   WCAG AA at this size where --color-faint does not. */
.grid-card-meta-top .meta-pos {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-style: normal;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--color-faint-warm);
}

/* FREQ tier — design-token earth hues, deliberately quiet next to POS */
.grid-card-meta-top .meta-freq[data-freq-tier="1"] { color: var(--color-moss); }
.grid-card-meta-top .meta-freq[data-freq-tier="2"] { color: #7C8FA6; }
.grid-card-meta-top .meta-freq[data-freq-tier="3"] { color: var(--color-amber-deep); }
.grid-card-meta-top .meta-freq[data-freq-tier="4"] {
    color: var(--color-faint);
    font-weight: 400;
}

/* Core 1K override on this surface — flatten the two-part serif treatment
   to a single uppercase tracked-sans label so it reads as a sibling of
   EVERYDAY / OCCASIONAL / RARE in the inline meta strip. The rich serif
   personality stays on the .freq-tier focus-mode pill where it has room. */
.grid-card-meta-top .meta-freq[data-freq-tier="1"] .pre,
.grid-card-meta-top .meta-freq[data-freq-tier="1"] .num,
.grid-card-meta-top .meta-freq[data-freq-tier="1"] .unit {
    font-family: inherit;
    font-weight: 500;
    font-size: 1em;
    letter-spacing: inherit;
    text-transform: uppercase;
    font-feature-settings: normal;
    font-variant-numeric: normal;
    color: inherit;
    opacity: 1;
    vertical-align: baseline;
}

.grid-card-meta-top .meta-freq[data-freq-tier="1"] .pre {
    margin-right: 0.35em;
}

.grid-card-meta-top .meta-freq[data-freq-tier="1"] .unit {
    margin-left: 1px;
}

/* ── Bottom triptych — context | exploration | action ── */
.grid-card-meta-row {
    display: grid;
    /* Collision-proof by construction: only the category column flexes
       (and truncates); the trigger chips and grade buttons are content-
       sized and can never overlap at any card width (owner critique). */
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 6px 4px 10px;
    flex-shrink: 0;
    /* Gallery placard: the action line pins to the hanging's bottom edge so
       Save/Skip sit on one line across every card on the wall. */
    margin-top: auto;

    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-stone, #8C8578);

    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.grid-card:hover .grid-card-meta-row,
.grid-card:focus-within .grid-card-meta-row {
    opacity: 1;
    pointer-events: auto;
    transition-delay: var(--wake-2, 0ms);  /* knowledge beat of the hover cascade */
}

.grid-card-meta-row .meta-cell {
    display: flex;
    align-items: center;
    min-width: 0;
}

.grid-card-meta-row .meta-cell-left {
    justify-self: start;
}

/* Center cell — empty since the 活用 handle retired (the related chip left
   before it). The track stays so the grade pair keeps its edge. */
.grid-card-meta-row .meta-cell-center {
    justify-self: center;
}

.grid-card-meta-row .meta-cell-right {
    justify-self: end;
    gap: 6px;
}

/* Category — uppercase tracked sans, muted stone */
.grid-card-meta-row .meta-cat {
    color: var(--color-stone);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* (The center-cell trigger chip .meta-related + its .rel-peek-chevron are
   gone: the related-words chip went in owner round 5, the 活用 conjugation
   handle after it. Both destinations are the word page now, and no card
   renders a chip on this line.) */

/* ═══════════════════════════════════════════════
   Focus / Video / Revision mode — frosted dark pill
   ═══════════════════════════════════════════════ */

body.focus-mode .card-face .freq-tier,
body.video-mode .card-face .freq-tier,
body.revision-mode .card-face .freq-tier {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
    bottom: auto;
    z-index: 2200;
    pointer-events: none;

    background: rgba(250, 247, 242, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: 0 1px 3px rgba(60, 52, 40, 0.08);
    border-radius: var(--radius-xl);
    /* Twin-chip with #class-badge: same height, same padding, same baseline.
       JS in flashcard.js positions #class-badge dynamically just-left-of this
       pill to keep the gap consistent regardless of label length. */
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    line-height: 1;

    /* One voice: Inter tracked caps, the same stamp the grid placard and the
       tier 2–4 labels already speak (see the TYPE LAW at the top of this
       file — the old 'Noto Serif JP' 600 base was a synthesized bold). */
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
    filter: none;
    transition: opacity 0.25s ease;
}

/* Tiers 2-4 word labels (EVERYDAY / OCCASIONAL / RARE) stay in the
   modern uppercase tracked-sans treatment so they read as taxonomy
   stamps; only Core's two-part serif numeral inherits the production
   serif family. */
body.focus-mode .card-face .freq-tier .label,
body.video-mode .card-face .freq-tier .label,
body.revision-mode .card-face .freq-tier .label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Core (tier 1) two-part: .pre = the muted label, .num + .unit inherit the
   pill's Inter tracked caps so "CORE 1K" reads as one stamp. */
body.focus-mode .card-face .freq-tier[data-freq-tier="1"] .pre,
body.video-mode .card-face .freq-tier[data-freq-tier="1"] .pre,
body.revision-mode .card-face .freq-tier[data-freq-tier="1"] .pre {
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-stone);
    opacity: 0.85;
    margin-right: 0.4em;
    vertical-align: baseline;
}

body.focus-mode .card-face .freq-tier[data-freq-tier="1"] .num,
body.video-mode .card-face .freq-tier[data-freq-tier="1"] .num,
body.revision-mode .card-face .freq-tier[data-freq-tier="1"] .num,
body.focus-mode .card-face .freq-tier[data-freq-tier="1"] .unit,
body.video-mode .card-face .freq-tier[data-freq-tier="1"] .unit,
body.revision-mode .card-face .freq-tier[data-freq-tier="1"] .unit {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.focus-mode .card-face .freq-tier[data-freq-tier="1"] .unit,
body.video-mode .card-face .freq-tier[data-freq-tier="1"] .unit,
body.revision-mode .card-face .freq-tier[data-freq-tier="1"] .unit {
    font-size: 1em;
    margin-left: 1px;
}

body.focus-mode .card-face .freq-tier[data-freq-tier="1"],
body.video-mode .card-face .freq-tier[data-freq-tier="1"],
body.revision-mode .card-face .freq-tier[data-freq-tier="1"] {
    color: #3a6438; /* Core evergreen */
}
body.focus-mode .card-face .freq-tier[data-freq-tier="2"],
body.video-mode .card-face .freq-tier[data-freq-tier="2"],
body.revision-mode .card-face .freq-tier[data-freq-tier="2"] {
    color: #5A7494; /* Everyday muted indigo */
}
body.focus-mode .card-face .freq-tier[data-freq-tier="3"],
body.video-mode .card-face .freq-tier[data-freq-tier="3"],
body.revision-mode .card-face .freq-tier[data-freq-tier="3"] {
    color: #A88542; /* Occasional gold */
}
body.focus-mode .card-face .freq-tier[data-freq-tier="4"],
body.video-mode .card-face .freq-tier[data-freq-tier="4"],
body.revision-mode .card-face .freq-tier[data-freq-tier="4"] {
    color: var(--color-faint); /* Rare */
    font-weight: 400;
    opacity: 0.75;
}

/* Hide duplicate back-face pill — front face fixed pill covers both */
body.focus-mode #freq-tier-back,
body.video-mode #freq-tier-back,
body.revision-mode #freq-tier-back {
    display: none !important;
}

/* Mobile focus override */
body.focus-mode.mobile-focus .card-face .freq-tier {
    top: 14px;
    right: 14px;
    height: 36px;
    padding: 0 14px;
    font-size: 11px;
}

/* ═══════════════════════════════════════════════
   Mobile grid (mg-row list) — compact cream frosted pill
   Same chip system as desktop focus + mobile learn hero, scaled down
   for row density (22px pill height, 11px font). Restores the serif
   numeral on Core's two-part "CORE 1K" badge — production parity
   without the bare-label divergence.
   ═══════════════════════════════════════════════ */
.mg-row-inner .freq-tier {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);

    background: rgba(250, 247, 242, 0.78);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
    border: 1px solid rgba(44, 44, 44, 0.06);
    box-shadow: 0 1px 2px rgba(60, 52, 40, 0.05);
    border-radius: var(--radius-xl, 22px);
    height: 22px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;

    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-shadow: none;
}

/* Tier 2-4 word labels — Inter sans uppercase tracked, same voice as
   focus mode + learn hero. */
.mg-row-inner .freq-tier .label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Tier 1 two-part: .pre = the muted label, .num + .unit = the same stamp */
.mg-row-inner .freq-tier[data-freq-tier="1"] .pre {
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-stone);
    opacity: 0.85;
    margin-right: 0.4em;
    vertical-align: baseline;
}

.mg-row-inner .freq-tier[data-freq-tier="1"] .num,
.mg-row-inner .freq-tier[data-freq-tier="1"] .unit {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.mg-row-inner .freq-tier[data-freq-tier="1"] .unit {
    font-size: 1em;
    margin-left: 1px;
}

.mg-row-inner .freq-tier[data-freq-tier="1"] { color: #3a6438; opacity: 1; } /* Core evergreen */
.mg-row-inner .freq-tier[data-freq-tier="2"] { color: #5A7494; opacity: 1; } /* Everyday muted indigo */
.mg-row-inner .freq-tier[data-freq-tier="3"] { color: #A88542; opacity: 1; } /* Occasional gold */
.mg-row-inner .freq-tier[data-freq-tier="4"] { color: var(--color-faint); opacity: 0.7; font-weight: 400; } /* Rare — thin */

/* Cream pill needs more clearance than the old bare label — bump to 100px */
.mg-row .mg-details {
    padding-right: 100px;
}

/* ═══════════════════════════════════════════════
   Mobile Learn Mode (emaki hero) — cream frosted pill
   Mirrors the desktop focus-mode pill (Inter tracked caps — see the TYPE LAW
   at the top of this file), so "CORE 1K" reads as one stamp.
   Per-surface tweaks: 11px font (vs 12px on focus), absolute positioning,
   slightly tighter padding. Tier colors stay on the moss/indigo/amber
   palette — Core remains evergreen (production used gold #8a6325 here
   but the project's design-system Core color is the deeper green).
   ═══════════════════════════════════════════════ */
.hero .freq-tier {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    background: rgba(250, 247, 242, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(44, 44, 44, 0.08);
    box-shadow: 0 1px 3px rgba(60, 52, 40, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-xl, 22px);
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
    pointer-events: none;
}

/* Tier 2-4 word labels — Inter sans uppercase tracked, matches focus mode */
.hero .freq-tier .label {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Tier 1 two-part: .pre = the muted label, .num + .unit = the same stamp */
.hero .freq-tier[data-freq-tier="1"] .pre {
    font-family: 'Inter', sans-serif;
    font-size: 1em;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-stone);
    opacity: 0.85;
    margin-right: 0.4em;
    vertical-align: baseline;
}

.hero .freq-tier[data-freq-tier="1"] .num,
.hero .freq-tier[data-freq-tier="1"] .unit {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero .freq-tier[data-freq-tier="1"] .unit {
    font-size: 1em;
    margin-left: 1px;
}

.hero .freq-tier[data-freq-tier="1"] { color: #3a6438; } /* Core evergreen */
.hero .freq-tier[data-freq-tier="2"] { color: #5A7494; } /* Everyday muted indigo */
.hero .freq-tier[data-freq-tier="3"] { color: #A88542; } /* Occasional gold */
.hero .freq-tier[data-freq-tier="4"] { color: var(--color-faint); opacity: 0.75; font-weight: 400; } /* Rare — thin */

/* ═══════════════════════════════════════════════
   地の文 SET ON THE WALL — the rank tail (owner ruling 2026-08-01)

   The .freq-whisper paper card is GONE, and with it ~165 lines of CSS, the
   whole hover engine in js/freq-tier.js and its six global listeners.

   Why: the wall has no containers. `.grid-card` is background:transparent /
   border-radius:0 — a watercolour hangs on warm stone and the placard sits
   directly on it. The most native thing a hover reveal can do here is not
   produce a box at all. The identity strip already fades in on the hover
   cascade's knowledge beat; the exact rank simply arrives one beat later on
   that same line, set on the wall:

       noun · EVERYDAY                    (at rest / knowledge beat)
       noun · EVERYDAY  1,011th most common   (action beat)

   The strip is position:absolute; right:4px; display:inline-flex, so the
   tail grows LEFTWARD from the right edge and nothing on the placard
   reflows around it.

   Where the four band CUT-POINTS went: the browse sidebar's own band rows
   (.freq-tier-range, css/browse-sidebar.css). That is not just tidiness —
   the card that used to carry the ladder could only ever open under
   (hover:hover) and (pointer:fine), so on iPad, which runs the desktop
   product as a primary device, the whole scale was unreachable. A sidebar
   row is reachable by finger.
   ═══════════════════════════════════════════════ */

/* A plain inline run on the strip's shared baseline. It must NOT be an
   inline-block with overflow:hidden — that makes an element's baseline its
   bottom margin edge, which floated the tail a further ~0.8px high. */
.grid-card-meta-top .meta-freq-tail {
    /* No width animation: the whole strip is opacity:0 at rest, so the tail's
       width costs nothing to lay out and nothing reflows when it appears. That
       lets it stay a plain inline run that sits on the shared baseline. */
    opacity: 0;
    white-space: nowrap;
    margin-left: 0.5em;

    /* the tail speaks the placard's prose voice, not the stamp's: roman,
       untracked, sentence case — it is a fact about the word, not a tag */
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-faint-warm);
    font-variant-numeric: tabular-nums lining-nums;

    transition: opacity 190ms linear;
}

.grid-card:hover .meta-freq-tail,
.grid-card:focus-within .meta-freq-tail {
    opacity: 1;
    transition-delay: var(--wake-3, 0ms);   /* the action beat of the hover cascade */
}

@media (prefers-reduced-motion: reduce) {
    /* the end state must LAND — an opacity:0 base with the transition removed
       would hide the tail forever */
    .grid-card-meta-top .meta-freq-tail { transition: none; }
    .grid-card:hover .meta-freq-tail,
    .grid-card:focus-within .meta-freq-tail { opacity: 1; }
}