/* MGM Financials — [mgm_donation_goal] and [mgm_donation_leaderboard].
   Gold-on-dark to match the MGM theme. */

.mgmf-goal, .mgmf-board {
    --mgmf-gold:   #d4af37;
    --mgmf-bright: #f4d03f;
    --mgmf-bronze: #8b6914;
    --mgmf-panel:  #14100c;
    --mgmf-track:  #0a0604;
    --mgmf-border: #3a2c18;
    --mgmf-text:   #e8e0d0;
    --mgmf-dim:    #b0a890;
    --mgmf-green:  #4caf7a;

    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto 24px;
    padding: 22px 24px;
    border: 1px solid var(--mgmf-border);
    border-radius: 10px;
    background: linear-gradient(180deg, #1f1812 0%, var(--mgmf-panel) 100%);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(212, 175, 55, 0.08);
    color: var(--mgmf-text);
    font-size: 1rem;     /* every size inside is em: a page scales a card by setting this */
    line-height: 1.5;
}
.mgmf-goal *, .mgmf-goal *::before, .mgmf-goal *::after { box-sizing: border-box; }

.mgmf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mgmf-title {
    margin: 0 !important;
    font-size: 1.35em;
    letter-spacing: 0.04em;
    color: var(--mgmf-gold) !important;
}
.mgmf-period { font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mgmf-dim); }
.mgmf-blurb { margin: 8px 0 0 !important; font-size: 0.95em; color: var(--mgmf-dim); }

.mgmf-figures { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.mgmf-raised { font-size: 2em; font-weight: 700; line-height: 1; color: var(--mgmf-text); font-variant-numeric: tabular-nums; }
.mgmf-of { font-size: 0.95em; color: var(--mgmf-dim); }
.mgmf-pct { margin-left: auto; font-size: 1.15em; font-weight: 700; color: var(--mgmf-bright); font-variant-numeric: tabular-nums; }

.mgmf-track {
    position: relative;
    height: 18px;
    overflow: hidden;
    border: 1px solid var(--mgmf-border);
    border-radius: 999px;
    background: var(--mgmf-track);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}
.mgmf-fill {
    height: 100%;
    min-width: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mgmf-bronze) 0%, var(--mgmf-gold) 70%, var(--mgmf-bright) 100%);
    box-shadow: 0 0 12px rgba(244, 208, 63, 0.35);
    animation: mgmf-grow 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mgmf-done .mgmf-fill { background: linear-gradient(90deg, #2e7d52 0%, var(--mgmf-green) 100%); box-shadow: 0 0 12px rgba(76, 175, 122, 0.4); }
@keyframes mgmf-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .mgmf-fill { animation: none; } }

.mgmf-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 0.88em; color: var(--mgmf-dim); }

.mgmf-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mgmf-border); }
.mgmf-section-title { margin-bottom: 8px; font-size: 0.78em; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mgmf-gold); }

.mgmf-breakdown, .mgmf-supporters { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.mgmf-breakdown li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.92em; border-bottom: 1px dashed rgba(58, 44, 24, 0.7); }
.mgmf-breakdown li:last-child { border-bottom: 0; }
.mgmf-breakdown li span:last-child { color: var(--mgmf-text); font-variant-numeric: tabular-nums; }
.mgmf-breakdown li span:first-child { color: var(--mgmf-dim); }

.mgmf-supporters li { padding: 5px 0; font-size: 0.92em; }
.mgmf-supporters strong { color: var(--mgmf-text); }
.mgmf-supporters .mgmf-amt { margin-left: 6px; color: var(--mgmf-bright); font-variant-numeric: tabular-nums; }
.mgmf-supporters em { display: block; margin-top: 1px; color: var(--mgmf-dim); font-size: 0.94em; }

.mgmf-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.mgmf-btn {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.92em;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mgmf-btn:hover { transform: translateY(-1px); }
.mgmf-btn-kofi {
    background: linear-gradient(180deg, var(--mgmf-bright), var(--mgmf-gold));
    color: #1a1208 !important;
    box-shadow: 0 2px 10px rgba(212, 175, 55, 0.3);
}
.mgmf-btn-paypal {
    border: 1px solid var(--mgmf-gold);
    color: var(--mgmf-gold) !important;
    background: transparent;
}
.mgmf-btn-paypal:hover { background: rgba(212, 175, 55, 0.08); }

/* compact="1" — bar and figures only */
.mgmf-compact { padding: 14px 16px; }
.mgmf-compact .mgmf-title { font-size: 1em; }
.mgmf-compact .mgmf-raised { font-size: 1.35em; }
.mgmf-compact .mgmf-figures { margin: 10px 0 8px; }
.mgmf-compact .mgmf-track { height: 12px; }
.mgmf-compact .mgmf-buttons { margin-top: 12px; }
.mgmf-compact .mgmf-btn { padding: 7px 14px; font-size: 0.85em; }

@media (max-width: 480px) {
    .mgmf-goal { padding: 16px; }
    .mgmf-raised { font-size: 1.6em; }
    .mgmf-pct { margin-left: 0; }
}

/* ── [mgm_donation_leaderboard] ─────────────────────────────────────────── */

.mgmf-board { max-width: 960px; padding: 24px; }
.mgmf-board *, .mgmf-board *::before, .mgmf-board *::after { box-sizing: border-box; }
.mgmf-sr {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.mgmf-board-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }

/* Tabs and the segmented choice share one look. The selectors carry the element
   so the theme's own button styles (background, padding, radius) never win. */
.mgmf-tabs, .mgmf-seg {
    display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
    border: 1px solid var(--mgmf-border); border-radius: 999px; background: var(--mgmf-track);
}
.mgmf-seg { border-radius: 10px; }
.mgmf-board button.mgmf-tab, .mgmf-board button.mgmf-seg-btn {
    appearance: none; -webkit-appearance: none; margin: 0; border: 0; border-radius: 999px; box-shadow: none;
    background: transparent; color: var(--mgmf-dim); cursor: pointer;
    font: inherit; font-size: 0.82em; font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 8px 16px; transition: background-color 0.15s ease, color 0.15s ease;
}
.mgmf-board button.mgmf-seg-btn { border-radius: 7px; letter-spacing: 0.02em; text-transform: none; font-size: 0.88em; }
.mgmf-board button.mgmf-tab:hover, .mgmf-board button.mgmf-seg-btn:hover { color: var(--mgmf-text); background: rgba(212, 175, 55, 0.08); }
.mgmf-board button.mgmf-tab[aria-selected="true"], .mgmf-board button.mgmf-seg-btn[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--mgmf-bright), var(--mgmf-gold)); color: #1a1208;
}
.mgmf-board button.mgmf-tab:focus-visible, .mgmf-board button.mgmf-seg-btn:focus-visible { outline: 2px solid var(--mgmf-bright); outline-offset: 2px; }
.mgmf-board button.mgmf-seg-btn:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--mgmf-dim); }
.mgmf-board.is-busy .mgmf-seg { opacity: 0.6; pointer-events: none; }

.mgmf-pane-sum { margin: 0 0 22px !important; font-size: 0.95em; color: var(--mgmf-dim); }
.mgmf-pane-sum strong { margin-right: 4px; font-size: 1.36em; color: var(--mgmf-text); font-variant-numeric: tabular-nums; }
.mgmf-pane-sum span::before { content: "· "; }

.mgmf-podium, .mgmf-ranks { margin: 0 !important; padding: 0 !important; list-style: none !important; }

/* Podium: DOM order 1-2-3 for screen readers, drawn 2-1-3 on wide screens. */
.mgmf-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; margin-bottom: 14px !important; }
.mgmf-podium-1 { grid-template-columns: minmax(0, 380px); justify-content: center; }
.mgmf-podium-2 { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; }
.mgmf-podium-3 .mgmf-p1 { order: 2; }
.mgmf-podium-3 .mgmf-p2 { order: 1; }
.mgmf-podium-3 .mgmf-p3 { order: 3; }

.mgmf-p {
    --medal: #cfd6e0;
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: 18px 16px 20px; border: 1px solid var(--mgmf-border); border-radius: 12px; background: rgba(0, 0, 0, 0.28);
}
.mgmf-p1 {
    --medal: #f4d03f;
    padding-top: 26px; padding-bottom: 28px; border-color: rgba(244, 208, 63, 0.45);
    background: radial-gradient(120% 80% at 50% 0%, rgba(244, 208, 63, 0.14), transparent 70%), rgba(0, 0, 0, 0.28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(244, 208, 63, 0.08) inset;
}
.mgmf-p3 { --medal: #cd8a4b; }
.mgmf-medal {
    display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 50%;
    font-weight: 800; font-size: 1.1em; line-height: 1; color: #16110a;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.85) 0, var(--medal) 42%, var(--medal) 70%, rgba(0, 0, 0, 0.35) 100%);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45), 0 0 18px rgba(244, 208, 63, 0.25);
}
.mgmf-p1 .mgmf-medal { width: 54px; height: 54px; font-size: 1.4em; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.45), 0 0 24px rgba(244, 208, 63, 0.5); }
.mgmf-p .mgmf-who { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.mgmf-p .mgmf-name { font-size: 1.15em; }
.mgmf-p1 .mgmf-name { font-size: 1.35em; }
.mgmf-p .mgmf-total { margin-top: 6px; font-size: 1.5em; text-align: center; }
.mgmf-p1 .mgmf-total { font-size: 1.85em; }

.mgmf-ranks { display: grid; gap: 6px; }
.mgmf-r {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(70px, 26%) auto; align-items: center; gap: 14px;
    padding: 10px 14px; border: 1px solid rgba(58, 44, 24, 0.7); border-radius: 8px; background: rgba(0, 0, 0, 0.2);
}
.mgmf-noamt .mgmf-r { grid-template-columns: 40px minmax(0, 1fr); }
.mgmf-rk { text-align: center; font-weight: 800; font-size: 1.05em; color: var(--mgmf-gold); font-variant-numeric: tabular-nums; }
.mgmf-r .mgmf-who { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
.mgmf-r .mgmf-meta { flex-basis: 100%; }

.mgmf-name { font-weight: 700; color: var(--mgmf-text); overflow-wrap: anywhere; }
.mgmf-is-anon .mgmf-name { font-style: italic; font-weight: 600; color: var(--mgmf-dim); }
.mgmf-meta { font-size: 0.8em; color: var(--mgmf-dim); }
.mgmf-tag {
    display: inline-block; padding: 3px 8px; border: 1px solid rgba(76, 175, 122, 0.5); border-radius: 999px;
    font-size: 0.66em; font-weight: 800; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: #8fdcb1;
}
.mgmf-total { font-weight: 800; color: var(--mgmf-bright); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mgmf-share { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--mgmf-track); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); }
.mgmf-share i {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--mgmf-bronze), var(--mgmf-gold));
    animation: mgmf-grow 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mgmf-is-anon .mgmf-share i { background: linear-gradient(90deg, #4a4232, #7d7157); }
@media (prefers-reduced-motion: reduce) { .mgmf-share i { animation: none; } }

.mgmf-empty {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px 16px;
    border: 1px dashed var(--mgmf-border); border-radius: 10px; text-align: center; color: var(--mgmf-dim);
}
.mgmf-empty strong { font-size: 1.1em; color: var(--mgmf-text); }

/* Your standing */
.mgmf-you {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
    margin-top: 20px; padding: 16px 18px; border: 1px dashed rgba(212, 175, 55, 0.35); border-radius: 10px;
    background: rgba(212, 175, 55, 0.04);
}
.mgmf-you-main { flex: 1 1 320px; min-width: 0; }
.mgmf-you-kicker, .mgmf-you-label { display: block; margin-bottom: 4px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mgmf-gold); }
.mgmf-you-label { margin-bottom: 0; color: var(--mgmf-dim); }
.mgmf-you p { margin: 0 !important; font-size: 0.95em; color: var(--mgmf-text); }
.mgmf-you p strong { color: var(--mgmf-bright); }
.mgmf-you p + p { margin-top: 6px !important; }
.mgmf-you .mgmf-you-warn { color: #e9b8a3; }
.mgmf-you .mgmf-you-warn a { color: var(--mgmf-bright); }
.mgmf-you-choice { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.mgmf-you-help { font-size: 0.8em; color: var(--mgmf-dim); }
.mgmf-you-status { min-height: 1em; font-size: 0.8em; color: var(--mgmf-bright); }
.mgmf-you-status:empty { display: none; }
.mgmf-btn-ghost { border: 1px solid var(--mgmf-gold); color: var(--mgmf-gold) !important; background: transparent; }
.mgmf-btn-ghost:hover { background: rgba(212, 175, 55, 0.08); }

.mgmf-board-note { margin: 14px 0 0 !important; font-size: 0.8em; color: var(--mgmf-dim); }

@media (max-width: 640px) {
    .mgmf-board { padding: 16px; }
    .mgmf-podium, .mgmf-podium-2 { grid-template-columns: minmax(0, 1fr); }
    .mgmf-podium-3 .mgmf-p1, .mgmf-podium-3 .mgmf-p2, .mgmf-podium-3 .mgmf-p3 { order: 0; }
    .mgmf-r { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px; }
    .mgmf-r .mgmf-share { display: none; }
    .mgmf-tabs { width: 100%; }
    .mgmf-board button.mgmf-tab { flex: 1 1 auto; padding: 8px 10px; }
}