/* public/css/cert-cards.css
 * 会員ページ 資格カード (window.CertDisplayNames.renderMemberCertCard 用)
 *
 * デザイン: ディプロマ(認定証)を思わせる和紙+深緑+金のトーン。
 * 4行の資格名ブロック(日本語/英語/学会名/タグライン)がカードの主役。
 *
 * ★ 資格レベル別カラー (member-credits-page.js が .mcx-tier-* を付与):
 *   .mcx-tier-gold   … 指導医/指導士/カウンセラー (最上位): 金
 *   .mcx-tier-silver … 認定医/認定士/アドバイザー: 銀 (プラチナ)
 *   .mcx-tier-green  … サポーター: 若葉のグリーン
 */

 :root {
    --jc-ink: #22312c;          /* 深緑がかった墨色 */
    --jc-pine: #2e6e5e;         /* 学会グリーン */
    --jc-pine-dark: #1f4f43;
    --jc-gold: #b8912f;         /* 金 */
    --jc-gold-soft: #d9c58a;
    --jc-paper: #fdfbf5;        /* 和紙 */
    --jc-gray: #8a938f;
    /* ★ 銀 (認定医/認定士/アドバイザー) */
    --jc-silver: #8fa0b3;
    --jc-silver-soft: #c9d3dd;
    --jc-silver-ink: #33414f;
    /* ★ 若葉 (サポーター) */
    --jc-fresh: #5aa871;
    --jc-fresh-soft: #b9dcc0;
    --jc-fresh-ink: #1d5a38;
}

/* ---- カード基礎 ---- */
.jc-card {
    position: relative;
    background: var(--jc-paper);
    border: 1px solid #e5e0d3;
    border-radius: 14px;
    padding: 26px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(34, 49, 44, 0.06);
    transition: box-shadow .2s ease, transform .2s ease;
    overflow: hidden;
}
.jc-card:hover {
    box-shadow: 0 6px 18px rgba(34, 49, 44, 0.12);
    transform: translateY(-2px);
}
/* 上辺のアクセントライン */
.jc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--jc-pine), var(--jc-gold));
    opacity: .5;
}

/* ---- 状態別 ---- */
.jc-earned {
    background:
        radial-gradient(circle at 100% 0%, rgba(184,145,47,.10), transparent 55%),
        var(--jc-paper);
    border-color: var(--jc-gold-soft);
}
.jc-earned::before { opacity: 1; }

.jc-available { border-color: #bfe0d5; }
.jc-available::before { background: var(--jc-pine); opacity: .9; }

.jc-pending { border-color: #f0dfae; }
.jc-pending::before { background: #d4a938; opacity: .9; }

.jc-locked { background: #fbfaf7; }
.jc-locked::before { opacity: .18; }
.jc-ineligible { opacity: .72; }

/* ---- リボン ---- */
.jc-ribbon {
    position: absolute;
    top: 14px; right: -1px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 12px 4px 14px;
    border-radius: 100px 0 0 100px;
    color: #fff;
}
.jc-ribbon-earned    { background: linear-gradient(90deg, var(--jc-gold), #a37c1e); }
.jc-ribbon-available { background: var(--jc-pine); }
.jc-ribbon-pending   { background: #d4a938; }
.jc-ribbon-ineligible{ background: var(--jc-gray); }

/* ---- 紋章 ---- */
.jc-emblem {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--jc-gold-soft);
    box-shadow: inset 0 0 0 3px var(--jc-paper), 0 1px 3px rgba(34,49,44,.08);
}
.jc-emblem-muted { filter: grayscale(.6); border-color: #ddd; }

/* ---- 資格名ブロック (このカードの主役) ---- */
.jc-names { display: flex; flex-direction: column; gap: 3px; }

.jc-name-ja {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    color: var(--jc-ink);
    line-height: 1.35;
}
.jc-name-main {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .02em;
}
.jc-name-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--jc-pine-dark);
    margin-left: 2px;
    white-space: nowrap;
}
.jc-name-en {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 12.5px;
    color: var(--jc-gold);
    letter-spacing: .01em;
    line-height: 1.4;
}
.jc-name-society {
    font-size: 12px;
    color: #5d6a64;
    letter-spacing: .05em;
}
.jc-tagline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .28em;
    color: var(--jc-pine);
}
.jc-tagline-rule {
    flex: 0 0 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jc-gold-soft));
}
.jc-tagline-rule:last-child {
    background: linear-gradient(90deg, var(--jc-gold-soft), transparent);
}

/* ---- 詳細 ---- */
.jc-details {
    border-top: 1px dashed #e0dac8;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
}
.jc-detail-label { color: #7d8781; }
.jc-detail-value { color: var(--jc-ink); font-weight: 600; }
.jc-certnum {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12.5px;
    background: #f2efe4;
    padding: 1px 8px;
    border-radius: 6px;
}
.jc-detail-value.jc-state-expired  { color: #dc2626; }
.jc-detail-value.jc-state-expiring { color: #d97706; }
.jc-detail-value.jc-state-active   { color: var(--jc-pine); }
.jc-detail-value.jc-ok             { color: var(--jc-pine); }

.jc-payment-reminder {
    font-size: 12px;
    color: #b45309;
    background: #fef6e0;
    border-radius: 8px;
    padding: 6px 10px;
}
.jc-hierarchy-note {
    font-size: 12px;
    color: #5d6a64;
    background: #f4f2ea;
    border-radius: 8px;
    padding: 6px 10px;
}

/* ---- 進捗 ---- */
.jc-progress-section { display: flex; flex-direction: column; gap: 6px; }
.jc-progress-header {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #7d8781;
}
.jc-progress-fraction { font-weight: 700; color: var(--jc-ink); }
.jc-progress-bar {
    height: 7px; border-radius: 100px;
    background: #ece8da; overflow: hidden;
}
.jc-progress-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--jc-pine), var(--jc-gold));
    transition: width .4s ease;
}
.jc-remaining { font-size: 12.5px; color: #5d6a64; }
.jc-remaining strong { color: var(--jc-pine-dark); }
.jc-reasons { display: flex; flex-direction: column; gap: 3px; }
.jc-reason { font-size: 11.5px; color: #b45309; }
.jc-ineligible-info {
    font-size: 12.5px; color: #8a938f;
    background: #f4f4f2; border-radius: 8px; padding: 8px 10px;
}

/* ---- ボタン ---- */
.jc-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.jc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600;
    padding: 9px 16px; border-radius: 9px;
    cursor: pointer;
}
.jc-btn-apply {
    background: linear-gradient(135deg, var(--jc-pine), var(--jc-pine-dark));
    color: #fff; border: none;
    box-shadow: 0 2px 6px rgba(46,110,94,.3);
}
.jc-btn-apply:hover { filter: brightness(1.07); }
.jc-btn-download {
    background: #fff;
    color: var(--jc-gold);
    border: 1.5px solid var(--jc-gold-soft);
}
.jc-btn-download:hover { background: #fbf6e8; }

/* ---- レスポンシブ / モーション配慮 ---- */
@media (max-width: 480px) {
    .jc-card { padding: 22px 16px 16px; }
    .jc-name-main { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .jc-card, .jc-progress-fill { transition: none; }
    .jc-card:hover { transform: none; }
}

/* ============================================================
 * 取得資格カード(member-credits-page.js)のレイアウト調整
 *  - 状態バッジは「期間」行の右端に表示
 *  - 資格名ブロックはバッジがなくなった分カード全幅で大きく表示
 * ============================================================ */
.mcx-cert-head-full {
    display: block !important;   /* 旧: name と badge の flex 2カラムを解除 */
    width: 100%;
}
.mcx-cert-head-full .jc-names,
.mcx-cert-head-full .mcx-cert-name {
    width: 100%;
    max-width: 100%;
}
/* ★ 資格名ブロックを中央揃え */
.mcx-cert-head-full .jc-names {
    align-items: center;
    text-align: center;
}
.mcx-cert-head-full .jc-tagline {
    justify-content: center;
    padding-left: .28em;   /* letter-spacing 分の視覚補正 */
}
/* ★ PC: 資格名ブロックをひと回り大きく (20/13/12.5 → 22/14.5/14) */
.mcx-cert-head-full .jc-names        { gap: 4px; }
.mcx-cert-head-full .jc-name-main    { font-size: 22px; }
.mcx-cert-head-full .jc-name-sub     { font-size: 13.5px; }
.mcx-cert-head-full .jc-name-en      { font-size: 14.5px; }
.mcx-cert-head-full .jc-name-society { font-size: 14px; }
.mcx-cert-head-full .jc-tagline      { font-size: 13px; }

/* ★ PC: メタ情報(番号/取得日/期間/使用単位)も大きく */
.mcx-cert-card .mcx-cert-meta {
    font-size: 14px;
    line-height: 1.8;
}

/* 期間行: 期間テキストのすぐ右に状態バッジ (★右端寄せではなく隣接配置) */
.mcx-cert-period-row {
    display: flex;
    flex-wrap: wrap;             /* ★ 長い期間 + バッジが収まらない場合はバッジが次行へ */
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
}
.mcx-cert-period-row .mcx-badge {
    flex-shrink: 0;
    margin-left: 0;              /* ★ 右端寄せを解除し「期間」の直後に */
    font-size: 12px;             /* ★ PC: バッジも文字拡大に合わせて調整 */
    padding: 2px 11px;
}

/* ★ 「有効」バッジ: 金色デザイン (最上位 = gold のデフォルト) */
.mcx-cert-period-row .mcx-badge-valid {
    background: linear-gradient(135deg, #e6d29a 0%, #c9a544 45%, #b8912f 100%) !important;
    color: #4a3a10 !important;
    border: 1px solid #d9c58a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
    box-shadow: 0 1px 3px rgba(184, 145, 47, .35),
                inset 0 1px 0 rgba(255, 255, 255, .5);
    font-weight: 700;
    letter-spacing: .06em;
    border-radius: 100px;
    padding: 2px 10px;
}

/* ============================================================
 * ★ 取得資格カード: 金色グラデーション + 静かな波のきらめき
 *   (mcx-tier-gold = 指導医/指導士/カウンセラー のベースデザイン。
 *    tier クラスが無いカードもこの金デザインになります)
 *   - 薄い金のグラデーション背景
 *   - 周期の異なる光だまり4つがゆっくり漂い・明滅する
 *     (周期が互いに素に近い秒数なのでパターンが揃わず
 *      ランダムな水面のゆらぎに見える)
 *   - prefers-reduced-motion では静止 / 印刷時は非表示
 * ============================================================ */
 .mcx-cert-card.jc-mini-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            #fdfbf5 0%,
            #faf3df 28%,
            #f5e9c8 50%,
            #faf3df 72%,
            #fdfbf5 100%);
    border-color: var(--jc-gold-soft);
}

/* きらめきレイヤー1: 大きな光だまり2つ (ゆっくり漂う) */
.mcx-cert-card.jc-mini-card::before {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 30% at 30% 38%,
            rgba(255, 248, 218, .45), transparent 60%),
        radial-gradient(ellipse 40% 26% at 72% 66%,
            rgba(228, 204, 138, .3), transparent 58%);
    animation: jcWaveDrift 9s ease-in-out infinite alternate;
    will-change: transform;
}

/* きらめきレイヤー2: 小さな光の粒2つ (別周期で明滅しながら漂う) */
.mcx-cert-card.jc-mini-card::after {
    content: '';
    position: absolute;
    inset: -40%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 20% 13% at 56% 30%,
            rgba(255, 250, 228, .4), transparent 68%),
        radial-gradient(ellipse 16% 11% at 38% 72%,
            rgba(235, 213, 150, .35), transparent 68%);
    animation:
        jcWaveDrift2 13s ease-in-out infinite alternate,
        jcTwinkle 6s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes jcWaveDrift {
    0%   { transform: translate(-7%, -5%) rotate(0.8deg)  scale(1); }
    35%  { transform: translate(5%, 4%)   rotate(-0.6deg) scale(1.06); }
    70%  { transform: translate(-3%, 7%)  rotate(0.4deg)  scale(0.97); }
    100% { transform: translate(6%, -3%)  rotate(-0.8deg) scale(1.04); }
}

@keyframes jcWaveDrift2 {
    0%   { transform: translate(5%, 6%)   scale(1); }
    40%  { transform: translate(-6%, -3%) scale(1.1); }
    75%  { transform: translate(4%, -6%)  scale(0.95); }
    100% { transform: translate(-3%, 4%)  scale(1.06); }
}

@keyframes jcTwinkle {
    0%, 100% { opacity: .3; }
    30%      { opacity: .65; }
    55%      { opacity: .4; }
    80%      { opacity: .55; }
}

/* 動きを控えたいユーザー: 静止したグラデーション+光だまりのみ表示 */
@media (prefers-reduced-motion: reduce) {
    .mcx-cert-card.jc-mini-card::before,
    .mcx-cert-card.jc-mini-card::after {
        animation: none;
    }
}
@media print {
    .mcx-cert-card.jc-mini-card::before,
    .mcx-cert-card.jc-mini-card::after { display: none; }
}

/* ============================================================
 * ★★ 資格レベル別カラーバリエーション ★★
 *   きらめき(::before/::after)のアニメーションは金デザインと共通、
 *   背景・光の色だけをレベルカラーに差し替えます (軽量)。
 * ============================================================ */

/* ------------------------------------------------------------
 * ★ 銀 (mcx-tier-silver = 認定医/認定士/アドバイザー)
 *   プラチナのような静かな輝き。
 * ------------------------------------------------------------ */
.mcx-cert-card.jc-mini-card.mcx-tier-silver {
    background:
        linear-gradient(135deg,
            #fdfdfe 0%,
            #f1f4f8 28%,
            #e3e9f0 50%,
            #f1f4f8 72%,
            #fdfdfe 100%);
    border-color: var(--jc-silver-soft);
}
.mcx-cert-card.jc-mini-card.mcx-tier-silver::before {
    background:
        radial-gradient(ellipse 45% 30% at 30% 38%,
            rgba(255, 255, 255, .55), transparent 60%),
        radial-gradient(ellipse 40% 26% at 72% 66%,
            rgba(176, 192, 210, .32), transparent 58%);
}
.mcx-cert-card.jc-mini-card.mcx-tier-silver::after {
    background:
        radial-gradient(ellipse 20% 13% at 56% 30%,
            rgba(255, 255, 255, .5), transparent 68%),
        radial-gradient(ellipse 16% 11% at 38% 72%,
            rgba(190, 204, 222, .4), transparent 68%);
}
/* 資格名ブロックの差し色を銀トーンに */
.mcx-tier-silver .jc-name-en       { color: #7a8aa0; }
.mcx-tier-silver .jc-name-society  { color: #64707d; }
.mcx-tier-silver .jc-tagline       { color: #55647a; }
.mcx-tier-silver .jc-tagline-rule  { background: linear-gradient(90deg, transparent, var(--jc-silver-soft)); }
.mcx-tier-silver .jc-tagline-rule:last-child {
    background: linear-gradient(90deg, var(--jc-silver-soft), transparent);
}
/* 「有効」バッジ: 銀色 */
.mcx-tier-silver .mcx-cert-period-row .mcx-badge-valid {
    background: linear-gradient(135deg, #f2f5f9 0%, #c7d2de 45%, #a9b8c8 100%) !important;
    color: var(--jc-silver-ink) !important;
    border: 1px solid var(--jc-silver-soft) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
    box-shadow: 0 1px 3px rgba(120, 140, 160, .35),
                inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* ------------------------------------------------------------
 * ★ 若葉グリーン (mcx-tier-green = サポーター)
 *   芽吹きを思わせる、明るくフレッシュなトーン。
 * ------------------------------------------------------------ */
.mcx-cert-card.jc-mini-card.mcx-tier-green {
    background:
        linear-gradient(135deg,
            #f8fcf5 0%,
            #ecf6e3 28%,
            #ddefd0 50%,
            #ecf6e3 72%,
            #f8fcf5 100%);
    border-color: var(--jc-fresh-soft);
}
.mcx-cert-card.jc-mini-card.mcx-tier-green::before {
    background:
        radial-gradient(ellipse 45% 30% at 30% 38%,
            rgba(226, 246, 214, .5), transparent 60%),
        radial-gradient(ellipse 40% 26% at 72% 66%,
            rgba(140, 195, 150, .28), transparent 58%);
}
.mcx-cert-card.jc-mini-card.mcx-tier-green::after {
    background:
        radial-gradient(ellipse 20% 13% at 56% 30%,
            rgba(244, 252, 232, .5), transparent 68%),
        radial-gradient(ellipse 16% 11% at 38% 72%,
            rgba(170, 216, 172, .4), transparent 68%);
}
/* 資格名ブロックの差し色をグリーントーンに */
.mcx-tier-green .jc-name-en       { color: #4f8a63; }
.mcx-tier-green .jc-name-society  { color: #4d6a58; }
.mcx-tier-green .jc-tagline       { color: var(--jc-pine); }
.mcx-tier-green .jc-tagline-rule  { background: linear-gradient(90deg, transparent, var(--jc-fresh-soft)); }
.mcx-tier-green .jc-tagline-rule:last-child {
    background: linear-gradient(90deg, var(--jc-fresh-soft), transparent);
}
/* 「有効」バッジ: 若葉グリーン */
.mcx-tier-green .mcx-cert-period-row .mcx-badge-valid {
    background: linear-gradient(135deg, #c6ead0 0%, #85c896 45%, #5aa871 100%) !important;
    color: var(--jc-fresh-ink) !important;
    border: 1px solid var(--jc-fresh-soft) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    box-shadow: 0 1px 3px rgba(90, 168, 113, .35),
                inset 0 1px 0 rgba(255, 255, 255, .55);
}

/* ============================================================
 * ★ スマホ画面: 取得資格カードの文字をさらに大きく
 * ============================================================ */
@media (max-width: 600px) {
    .mcx-cert-card                       { padding: 16px 15px 13px; }
    .mcx-cert-head-full .jc-names        { gap: 5px; }
    .mcx-cert-head-full .jc-name-main    { font-size: 24px; letter-spacing: .01em; }
    .mcx-cert-head-full .jc-name-sub     { font-size: 14.5px; }
    .mcx-cert-head-full .jc-name-en      { font-size: 15.5px; }
    .mcx-cert-head-full .jc-name-society { font-size: 15px; }
    .mcx-cert-head-full .jc-tagline      { font-size: 14px; letter-spacing: .24em; }
    .mcx-cert-card .mcx-cert-meta        { font-size: 16px !important; line-height: 1.85; }
    .mcx-cert-period-row .mcx-badge      { font-size: 13.5px; padding: 3px 13px; }
}

/* ============================================================
 * ★ 取得単位リスト: 単位数(mcx-tx-amount)の横幅を最小化
 *    列幅は member-credits.css の grid-template-columns を
 *    「max-content(内容ぶんの幅)」に変更して対応済み。
 *    バッジ列が固定幅で右端に固定されるため、amount の右端は
 *    全行で揃い、数字は right-align + 等幅数字でズレません。
 * ============================================================ */
.mcx-tx-row .mcx-tx-amount {
    white-space: nowrap;                /* 「+20」「-10」を1行維持 */
    text-align: right;
    font-variant-numeric: tabular-nums; /* 数字幅を揃えて桁ズレ防止 */
}
.mcx-tx-row .mcx-tx-name {
    min-width: 0;                       /* grid内で ellipsis を効かせる */
}

/* ============================================================
 * ★ 取得単位リスト: 省略された項目名の全文表示 UI
 *    - JSが実際に省略されている行にだけ .mcx-truncatable を付与
 *      (省略されていない行はタップしても反応しない = 誤操作防止)
 *    - タップ/クリック → .mcx-expanded で行内に折り返して全文表示
 *      (再タップで元に戻る)
 *    - マウス環境のみ hover でツールチップ表示(レイアウトが跳ねない)
 * ============================================================ */
.mcx-tx-row.mcx-truncatable .mcx-tx-name {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(184, 145, 47, .15);
    position: relative;
}
/* 省略されていることの視覚ヒント: 名称の末尾をふわっとフェード */
.mcx-tx-row.mcx-name-clipped:not(.mcx-expanded) .mcx-tx-name {
    text-overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 86%, transparent 100%);
}
.mcx-tx-row.mcx-truncatable .mcx-tx-name:focus-visible {
    outline: 2px solid var(--jc-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

.mcx-tx-row.mcx-expanded .mcx-tx-name {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
    line-height: 1.5;
    -webkit-mask-image: none;
            mask-image: none;
}

/* マウス環境のみ: hover ツールチップ (タッチ端末では出さない) */
@media (hover: hover) and (pointer: fine) {
    .mcx-tx-row.mcx-name-clipped:not(.mcx-expanded) .mcx-tx-name:hover::after {
        content: attr(data-full);
        position: absolute;
        left: 0;
        top: calc(100% + 6px);
        z-index: 30;
        width: max-content;
        max-width: min(320px, 80vw);
        background: var(--jc-ink);
        color: #fdfbf5;
        font-size: 12.5px;
        line-height: 1.5;
        padding: 8px 12px;
        border-radius: 8px;
        white-space: normal;
        word-break: break-word;
        box-shadow: 0 6px 18px rgba(34, 49, 44, .25);
        pointer-events: none;
    }
    .mcx-tx-row.mcx-name-clipped:not(.mcx-expanded) .mcx-tx-name:hover::before {
        content: '';
        position: absolute;
        left: 16px;
        top: calc(100% + 1px);
        z-index: 31;
        border: 5px solid transparent;
        border-bottom-color: var(--jc-ink);
        pointer-events: none;
    }
}

/* ============================================================
 * ★ 行展開時(.mcx-expanded)のレイアウト
 *   1行目: 日付 | 項目名(全文・右端まで)
 *   2行目: 右寄せ一列で 単位数 / 期限 / 状態バッジ
 * ============================================================ */
 .mcx-tx-row.mcx-expanded {
    grid-template-columns: max-content minmax(0, 1fr) max-content max-content max-content;
    grid-template-rows: auto auto;
    row-gap: 5px;
    align-items: center;
}

.mcx-tx-row.mcx-expanded .mcx-tx-date {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
    padding-top: 2px;
}
.mcx-tx-row.mcx-expanded .mcx-tx-name {
    grid-row: 1;
    grid-column: 2 / -1;
}

.mcx-tx-row.mcx-expanded .mcx-tx-amount {
    grid-row: 2;
    grid-column: 3;
}
.mcx-tx-row.mcx-expanded .mcx-tx-exp {
    grid-row: 2;
    grid-column: 4;
}
.mcx-tx-row.mcx-expanded .mcx-badge,
.mcx-tx-row.mcx-expanded .mcx-badge-split {
    grid-row: 2;
    grid-column: 5;
    justify-self: end;
}

.mcx-tx-row.mcx-expanded .mcx-tx-exp:not(:empty) {
    display: inline-block;
    padding: 2px 10px;
    background: #f4f2ea;
    border: 1px solid #e0dac8;
    border-radius: 999px;
    font-size: 11.5px;
    color: #5d6a64;
    white-space: nowrap;
}
.mcx-tx-row.mcx-expanded .mcx-tx-exp:empty { display: none; }