/* ═══════════════════════════════════════════════
   .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;

    font-family: 'Inter', 'Klee One', sans-serif;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;

    font-size: 11px;
    transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 280ms ease;
}

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

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

   This block targets the .freq-tier surfaces (focus / video / revision /
   mobile-grid pills) where the badge is the focal accent. The desktop-grid
   hover meta strip flattens this back to uppercase tracked sans so it
   stays visually consistent with EVERYDAY / OCCASIONAL / RARE — override
   block lives further down with the other .grid-card-meta-top rules.
   ═══════════════════════════════════════════════ */

.freq-tier[data-freq-tier="1"] .pre {
    font-family: 'Inter', sans-serif;
    font-size: 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: 'Noto Serif JP', 'Klee One', serif;
    font-weight: 600;
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
    letter-spacing: -0.01em;
    text-transform: none;
}

.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) ── */
.freq-tier[data-freq-tier="1"] {
    color: var(--color-moss-bright);
    opacity: 0.72;
    text-shadow: 0 0 0.6px rgba(91, 140, 90, 0.4);
}

/* ── 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;
    top: 82px;
    right: 20px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    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.shoji-active .grid-card-meta-top {
    opacity: 1;
    pointer-events: auto;
}

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

/* POS = dictionary annotation voice — Inter italic lowercase, matches romaji at top-left */
.grid-card-meta-top .meta-pos {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0;
    font-size: 11px;
    color: var(--color-faint);
}

/* 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;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 20px 14px;
    flex-shrink: 0;

    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.shoji-active .grid-card-meta-row {
    opacity: 1;
    pointer-events: auto;
}

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

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

.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%;
}

/* Related-words trigger — same Inter italic voice as POS, paired sibling */
.grid-card-meta-row .meta-related,
.grid-card-meta-row .meta-related:hover,
.grid-card-meta-row .meta-related:active {
    box-shadow: none;
    transform: none;
}

.grid-card-meta-row .meta-related {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    width: auto;
    height: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-faint);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    text-transform: lowercase;
    letter-spacing: 0;
    line-height: 1;
    transition: color 200ms ease;
}

.grid-card-meta-row .meta-related:hover {
    color: var(--color-stone);
    background: none;
}

.grid-card-meta-row .meta-related .rel-peek-chevron {
    width: 11px;
    height: 11px;
    color: currentColor;
    opacity: 0.7;
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.grid-card.rel-open .grid-card-meta-row .meta-related .rel-peek-chevron {
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════
   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;

    /* Production spec — Noto Serif JP base so the serif numeral on Core
       (.num + .unit) reads as a continuation of the same family rather
       than a font-swap. Tight negative tracking matches the production
       feel (-0.02em ≈ -0.28px at 14px). For tiers 2–4 the .label
       overrides back to Inter sans uppercase tracked. */
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-weight: 600;
    font-feature-settings: "pnum" 1, "lnum" 1;
    font-variant-numeric: proportional-nums lining-nums;
    letter-spacing: -0.02em;
    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 = Inter sans gray label, .num + .unit
   inherit Noto Serif JP serif from the pill base — production parity. */
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: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-stone);
    opacity: 0.85;
    margin-right: 6px;
    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: 'Noto Serif JP', 'Klee One', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

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: 'Noto Serif JP', serif;
    font-size: 11px;
    font-weight: 600;
    font-feature-settings: "pnum" 1, "lnum" 1;
    font-variant-numeric: proportional-nums lining-nums;
    letter-spacing: -0.02em;
    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.08em;
    text-transform: uppercase;
}

/* Tier 1 two-part: .pre = Inter sans gray, .num + .unit = serif numeral */
.mg-row-inner .freq-tier[data-freq-tier="1"] .pre {
    font-family: 'Inter', sans-serif;
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-stone);
    opacity: 0.85;
    margin-right: 3.5px;
    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: 'Noto Serif JP', 'Klee One', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.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 (Noto Serif JP serif + tight kerning
   so Core's two-part "CORE 1K" renders with the elegant serif numeral).
   Per-surface tweaks: 13px font (vs 14px 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: 'Noto Serif JP', serif;
    font-size: 13px;
    font-weight: 600;
    font-feature-settings: "pnum" 1, "lnum" 1;
    font-variant-numeric: proportional-nums lining-nums;
    letter-spacing: -0.02em;
    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 = Inter sans gray label, .num + .unit = serif numeral */
.hero .freq-tier[data-freq-tier="1"] .pre {
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-stone);
    opacity: 0.85;
    margin-right: 5px;
    vertical-align: baseline;
}

.hero .freq-tier[data-freq-tier="1"] .num,
.hero .freq-tier[data-freq-tier="1"] .unit {
    font-family: 'Noto Serif JP', 'Klee One', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
}

.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 */