/* ==========================================================
   Food Compare Tool — food-compare.css
   ALL selectors scoped under .vx-fc
   ========================================================== */

.vx-fc {
    --vx-brand:      #71b230;
    --vx-brand-alt:  #4d7d20;
    --vx-accent:     #e8750a;
    --vx-accent-alt: #c9630a;
    --vx-heading:    #000f2b;
    --vx-text:       #2a3245;
    --vx-primary:    #ffffff;
    --vx-secondary:  #f7f3ee;
    --vx-extra:      #eaf4d5;
    --vx-border:     #e2e8f0;
    --vx-dark-bg:    #000920;
    --vx-win-bg:     rgba(113,178,48,0.09);
    --vx-lose-bg:    rgba(232,117,10,0.07);
    --vx-radius:     10px;
    --vx-radius-sm:  6px;
    --vx-shadow:     0 2px 12px rgba(0,0,0,0.07);
    --vx-shadow-lg:  0 8px 32px rgba(0,0,0,0.13);

    font-family: 'DM Sans', sans-serif;
    color: var(--vx-text);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0 48px;
    box-sizing: border-box;
}

/* ── Header Bar (Navy) ───────────────────────────────────── */
.vx-fc__header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--vx-heading);
    padding: 22px 28px;
    border-radius: var(--vx-radius) var(--vx-radius) 0 0;
    margin-bottom: 20px;
}

.vx-fc__title {
    font-family: 'Lora', serif;
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 5px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.vx-fc__subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin: 0;
    letter-spacing: 0.1px;
}

.vx-fc__header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Header buttons */
.vx-fc__hbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    border-radius: var(--vx-radius-sm);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    line-height: 1;
    white-space: nowrap;
}
.vx-fc__hbtn:active { transform: scale(0.97); }

.vx-fc__dl-group {
    display: flex;
    gap: 6px;
}

.vx-fc__hbtn--dl {
    background: var(--vx-brand);
    color: white;
    border-color: var(--vx-brand);
}
.vx-fc__hbtn--dl:hover {
    background: var(--vx-brand-alt);
    border-color: var(--vx-brand-alt);
}

.vx-fc__hbtn--danger {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.25);
}
.vx-fc__hbtn--danger:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    border-color: rgba(255,255,255,0.5);
}

/* ── Slot Grid ───────────────────────────────────────────── */
.vx-fc__slots-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 0 2px;
}

.vx-fc__slot {
    background: var(--vx-primary);
    border: 2px dashed var(--vx-border);
    border-radius: var(--vx-radius);
    min-height: 92px;
    position: relative;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.15s;
}
.vx-fc__slot--empty:hover { border-color: var(--vx-brand); background: rgba(113,178,48,0.03); }
.vx-fc__slot--filled { border-style: solid; border-color: var(--vx-brand); background: var(--vx-extra); }
.vx-fc__slot--add { border-style: dashed; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vx-fc__slot--add:hover { border-color: var(--vx-brand-alt); }

/* Search inside slot */
.vx-fc__slot-search { padding: 12px; }
.vx-fc__slot-number { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #aaa; margin-bottom: 8px; }

.vx-fc__input-wrap { position: relative; }

.vx-fc__search-icon {
    position: absolute; left: 9px; top: 50%;
    transform: translateY(-50%); color: #bbb; pointer-events: none;
}

.vx-fc__slot-input {
    width: 100%; box-sizing: border-box;
    padding: 8px 36px 8px 30px;
    border: 1.5px solid var(--vx-border);
    border-radius: var(--vx-radius-sm);
    font-size: 13px; font-family: inherit; color: var(--vx-text);
    background: white; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.vx-fc__slot-input::placeholder { color: #bbb; }
.vx-fc__slot-input:focus { border-color: var(--vx-brand); box-shadow: 0 0 0 3px rgba(113,178,48,0.14); }

/* Mic button */
.vx-fc__mic-btn {
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: #ccc; padding: 3px; border-radius: 4px;
    font-size: 13px; line-height: 1;
    transition: color 0.15s;
    display: flex; align-items: center;
}
.vx-fc__mic-btn:hover { color: var(--vx-brand); }
.vx-fc__mic-btn.vx-mic--listening { color: var(--vx-accent); animation: vx-pulse 0.9s ease infinite; }
.vx-fc__mic-btn.vx-mic--hidden { display: none; }

@keyframes vx-pulse { 0%,100% { opacity:1; transform:translateY(-50%) scale(1); } 50% { opacity:0.5; transform:translateY(-50%) scale(1.2); } }

/* Spinner */
.vx-fc__loading-spinner {
    position: absolute; right: 32px; top: 50%;
    transform: translateY(-50%);
    width: 13px; height: 13px;
    border: 2px solid var(--vx-border); border-top-color: var(--vx-brand);
    border-radius: 50%; animation: vx-spin 0.7s linear infinite; display: none;
}
@keyframes vx-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* Search dropdown */
.vx-fc__dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: white; border: 1.5px solid var(--vx-border);
    border-radius: var(--vx-radius); box-shadow: var(--vx-shadow-lg);
    max-height: 240px; overflow-y: auto; z-index: 99999; display: none;
}
.vx-fc__dropdown-item { padding: 9px 12px; cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background 0.1s; }
.vx-fc__dropdown-item:last-child { border-bottom: none; }
.vx-fc__dropdown-item:hover { background: var(--vx-extra); }
.vx-fc__dropdown-name { font-size: 13px; font-weight: 500; color: var(--vx-heading); margin-bottom: 2px; }
.vx-fc__dropdown-meta { font-size: 11px; color: #999; display: flex; gap: 8px; flex-wrap: wrap; }
.vx-fc__dropdown-badge { font-size: 10px; background: var(--vx-secondary); padding: 1px 5px; border-radius: 3px; }
.vx-fc__dropdown-msg { padding: 10px 12px; font-size: 13px; color: #aaa; pointer-events: none; }

/* External / USDA results section in dropdown */
.vx-fc__dropdown-ext-hdr {
    padding: 6px 12px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #1565c0;
    background: #f0f7ff;
    border-top: 1px solid #d0e4f7;
    border-bottom: 1px solid #d0e4f7;
    pointer-events: none;
}
.vx-fc__dropdown-item--ext { background: #fafcff; }
.vx-fc__dropdown-item--ext:hover { background: #e8f0fb; }

/* Voice search status bar */
.vx-fc__voice-bar {
    margin-top: 6px; padding: 5px 8px;
    background: rgba(232,117,10,0.08); border-radius: 5px;
    font-size: 11px; color: var(--vx-accent); display: none;
    align-items: center; gap: 5px;
}
.vx-fc__voice-bar.vx-voice--active { display: flex; }

/* Filled slot */
.vx-fc__slot-body { padding: 12px; }
.vx-fc__slot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.vx-fc__slot-name { font-size: 13px; font-weight: 600; color: var(--vx-heading); line-height: 1.35; flex: 1; }
.vx-fc__slot-remove { background: none; border: none; cursor: pointer; color: #ccc; font-size: 16px; line-height: 1; padding: 2px 4px; border-radius: 4px; transition: color 0.15s; flex-shrink: 0; }
.vx-fc__slot-remove:hover { color: #e53e3e; }
.vx-fc__slot-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.vx-fc__pill { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; line-height: 1.6; }
.vx-fc__pill--cat  { background: var(--vx-secondary); color: var(--vx-text); }
.vx-fc__pill--kcal { background: #fff3e4; color: var(--vx-accent-alt); }
.vx-fc__pill--pro  { background: var(--vx-extra); color: var(--vx-brand-alt); }
.vx-fc__pill--vv   { background: #e8f5e9; color: #2e7d32; font-weight: 600; }
.vx-fc__pill--usda { background: #e3f2fd; color: #1565c0; }
.vx-fc__pill--of   { background: #f3e5f5; color: #6a1b9a; }

/* Add-slot button */
.vx-fc__add-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--vx-brand-alt); padding: 20px 10px; width: 100%; height: 100%; transition: color 0.15s; }
.vx-fc__add-btn:hover { color: var(--vx-brand); }
.vx-fc__add-icon { width: 28px; height: 28px; border: 2px dashed currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 300; }

/* ── Empty State ─────────────────────────────────────────── */
.vx-fc__empty { text-align: center; padding: 72px 24px; background: var(--vx-secondary); border-radius: var(--vx-radius); margin-bottom: 8px; }
.vx-fc__empty-emoji { font-size: 52px; margin-bottom: 14px; }
.vx-fc__empty-title { font-family: 'Lora', serif; font-size: 20px; font-weight: 600; color: var(--vx-heading); margin: 0 0 8px; }
.vx-fc__empty-desc { font-size: 14px; color: var(--vx-text); opacity: 0.65; margin: 0 auto; max-width: 400px; }

/* ── Serving Bar ─────────────────────────────────────────── */
.vx-fc__serving-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 11px 18px; background: var(--vx-secondary); border-radius: var(--vx-radius); margin-bottom: 18px; font-size: 13px; }
.vx-fc__serving-bar-label { font-weight: 600; color: var(--vx-text); white-space: nowrap; }
.vx-fc__serving-item { display: flex; align-items: center; gap: 6px; }
.vx-fc__serving-food-name { font-weight: 500; color: var(--vx-heading); max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.vx-fc__serving-input { width: 62px; padding: 4px 7px; border: 1.5px solid var(--vx-border); border-radius: var(--vx-radius-sm); font-size: 13px; font-family: inherit; text-align: center; color: var(--vx-text); outline: none; transition: border-color 0.15s; }
.vx-fc__serving-input:focus { border-color: var(--vx-brand); }
.vx-fc__serving-unit { color: #888; font-size: 12px; }

/* ── Winner Strip ────────────────────────────────────────── */
.vx-fc__winners { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 22px; scrollbar-width: thin; scrollbar-color: var(--vx-border) transparent; }
.vx-fc__win-card { flex: 0 0 auto; min-width: 120px; max-width: 148px; background: white; border: 1.5px solid var(--vx-border); border-radius: var(--vx-radius); padding: 10px 12px; text-align: center; box-shadow: var(--vx-shadow); transition: border-color 0.15s; cursor: default; }
.vx-fc__win-card--active { border-color: var(--vx-brand); background: var(--vx-extra); }
/* Computed/estimated cards shown with dashed border */
.vx-fc__win-card--est { border-style: dashed; opacity: 0.82; }
.vx-fc__win-emoji { font-size: 18px; margin-bottom: 4px; }
.vx-fc__win-goal { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #aaa; margin-bottom: 3px; }
/* Allow 2 lines so full name shows without (... truncation */
.vx-fc__win-name { font-size: 12px; font-weight: 600; color: var(--vx-heading); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 120px; margin: 0 auto; line-height: 1.3; }
.vx-fc__win-val  { font-size: 11px; color: var(--vx-brand-alt); margin-top: 3px; }
/* Runner-up margin line */
.vx-fc__win-sub  { font-size: 10px; color: #bbb; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Estimated/computed value indicator */
.vx-fc__win-est  { font-size: 9px; color: #bbb; vertical-align: super; font-style: italic; margin-left: 1px; }

/* ── Tab Bar ─────────────────────────────────────────────── */
/* Sticky offsets below are driven by --vx-fc-admin-offset and
   --vx-fc-tabs-height, two custom properties the JS sets from the ACTUAL
   measured height of #wpadminbar (when it's really position:fixed --
   WordPress switches it to position:absolute under 600px, where it
   scrolls away normally and needs no offset at all) and of this tab bar
   itself. Two earlier attempts hardcoded these as fixed pixel guesses and
   both broke in a different way -- once from ordinary font-rendering
   variance, once from not accounting for the WP admin bar at all. Reading
   the real DOM instead of guessing at it removes that whole category of
   bug: it self-corrects for any admin bar height, theme, browser, zoom
   level, or WordPress version without needing to be re-guessed again.
   The literal 0px/44px fallbacks only matter for the first paint before
   the JS measurement runs. */
.vx-fc__tabs-wrap { position: sticky; top: var(--vx-fc-admin-offset, 0px); z-index: 20; background: white; border-bottom: 2px solid var(--vx-border); box-sizing: border-box; }
.vx-fc__tab-bar { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.vx-fc__tab-bar::-webkit-scrollbar { display: none; }
.vx-fc__tab { padding: 11px 17px; border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--vx-text); opacity: 0.55; cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; transition: opacity 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; }
.vx-fc__tab:hover { opacity: 0.85; }
.vx-fc__tab--active { color: var(--vx-brand-alt); opacity: 1; border-bottom-color: var(--vx-brand); font-weight: 600; }

/* ── Table ───────────────────────────────────────────────── */
.vx-fc__table-outer { overflow-x: auto; margin-bottom: 32px; box-shadow: var(--vx-shadow); border-radius: 0 0 var(--vx-radius) var(--vx-radius); }
.vx-fc__table { width: 100%; border-collapse: collapse; min-width: 480px; background: white; }
/* Background set on the row itself, not just each <th> -- a solid safety
   net so no sliver of the row underneath can show through at the cell
   edges even in the split second before the JS measurement above lands. */
.vx-fc__table thead tr { border-bottom: 2px solid var(--vx-border); background: var(--vx-secondary); }
.vx-fc__table thead th { padding: 13px 16px; background: var(--vx-secondary); font-size: 12px; font-weight: 600; color: var(--vx-text); text-align: center; white-space: nowrap; position: sticky; top: calc(var(--vx-fc-admin-offset, 0px) + var(--vx-fc-tabs-height, 44px)); z-index: 10; }
.vx-fc__table thead th:first-child { text-align: left; width: 165px; min-width: 140px; }
.vx-fc__th-food-name { font-size: 12px; font-weight: 700; color: var(--vx-heading); max-width: 150px; margin: 0 auto 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-fc__th-food-cat { font-size: 10px; color: var(--vx-brand-alt); background: var(--vx-extra); padding: 1px 6px; border-radius: 10px; display: inline-block; }

.vx-fc__table tbody tr { border-bottom: 1px solid #f2f2f2; transition: background 0.1s; }
.vx-fc__table tbody tr:hover { background: #fafafa; }
.vx-fc__table tbody td { padding: 9px 14px; font-size: 13px; vertical-align: middle; }
.vx-fc__table tbody td:first-child { font-weight: 500; color: var(--vx-heading); font-size: 12px; }
.vx-fc__table tbody td.td-val { text-align: center; min-width: 110px; }
.vx-fc__table tbody td.td-winner { background: var(--vx-win-bg); }
.vx-fc__table tbody td.td-worst  { background: var(--vx-lose-bg); }

/* Cell content */
.vx-fc__cell-num { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.vx-fc__cell-val { font-size: 13px; font-weight: 600; color: var(--vx-heading); display: flex; align-items: baseline; gap: 2px; }
.td-worst .vx-fc__cell-val { color: #bbb; }
.vx-fc__cell-unit { font-size: 10px; font-weight: 400; color: #aaa; }
.vx-fc__win-badge { font-size: 11px; }
.vx-fc__bar { width: 88px; height: 3px; background: #eee; border-radius: 2px; overflow: hidden; }
.vx-fc__bar-fill { height: 100%; border-radius: 2px; background: var(--vx-brand); transition: width 0.4s cubic-bezier(.4,0,.2,1); }
.td-worst .vx-fc__bar-fill { background: #ddd; }
.vx-fc__rda-label { font-size: 10px; color: #aaa; white-space: nowrap; }

/* Bool / special cells */
.vx-fc__bool-yes { color: var(--vx-brand-alt); font-size: 15px; font-weight: 700; }
.vx-fc__bool-no  { color: #e2e8f0; font-size: 15px; }
.vx-fc__nova-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; display: inline-block; }
.vx-fc__nova-1 { background: #eaf4d5; color: #2e6b0a; }
.vx-fc__nova-2 { background: #fef3c7; color: #78350f; }
.vx-fc__nova-3 { background: #fee2cc; color: #9a3412; }
.vx-fc__nova-4 { background: #fecaca; color: #7f1d1d; }
.vx-fc__nova-x { background: #f3f4f6; color: #6b7280; }
.vx-fc__tag-wrap { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.vx-fc__tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: var(--vx-secondary); color: var(--vx-text); }
.vx-fc__na { color: #ccc; font-size: 13px; }

/* ── Radar Section ───────────────────────────────────────── */
.vx-fc__radar-section { margin-bottom: 28px; padding: 24px; background: white; border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); }
.vx-fc__section-title { font-family: 'Lora', serif; font-size: 18px; font-weight: 700; color: var(--vx-heading); margin: 0 0 4px; }
.vx-fc__section-desc { font-size: 13px; color: var(--vx-text); opacity: 0.6; margin: 0 0 18px; }
.vx-fc__radar-wrap { display: flex; justify-content: center; overflow-x: auto; }
.vx-fc__radar-wrap svg { max-width: 100%; height: auto; }

/* ── Goals Section ───────────────────────────────────────── */
.vx-fc__goals-section { margin-bottom: 28px; padding: 24px; background: white; border-radius: var(--vx-radius); box-shadow: var(--vx-shadow); }
.vx-fc__goals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.vx-fc__goal-card { background: var(--vx-secondary); border-radius: var(--vx-radius); padding: 14px; border-left: 3px solid var(--vx-brand); }
.vx-fc__goal-icon { font-size: 20px; margin-bottom: 5px; }
.vx-fc__goal-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #999; margin-bottom: 4px; }
.vx-fc__goal-winner { font-size: 14px; font-weight: 700; color: var(--vx-brand-alt); line-height: 1.3; }
.vx-fc__goal-val { font-size: 11px; color: var(--vx-text); opacity: 0.6; margin-top: 2px; }
.vx-fc__goals-empty { grid-column: 1/-1; text-align:center; color:var(--vx-muted); font-size:13px; padding:24px 0; }
/* Values ending in ~ are estimated/computed, not from DB */
.vx-fc__goal-val--est { font-style: italic; opacity: 0.5; }

/* ── Disclaimer ──────────────────────────────────────────── */
.vx-fc__disclaimer {
    display: flex; gap: 12px; align-items: flex-start;
    background: #fff8f0; border: 1px solid #fde2c4;
    border-left: 4px solid var(--vx-accent);
    border-radius: 0 var(--vx-radius) var(--vx-radius) 0;
    padding: 14px 18px; font-size: 12px; color: #6b4f36;
    line-height: 1.65; margin-bottom: 16px;
}
.vx-fc__disclaimer-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.vx-fc__disclaimer strong { color: var(--vx-accent-alt); }

.vx-fc__footnote { font-size: 11px; color: #ccc; text-align: center; margin: 0; }

/* ── Print / Export ──────────────────────────────────────── */
@media print {
    .vx-fc__header-bar .vx-fc__header-actions,
    .vx-fc__slots-wrap,
    .vx-fc__serving-bar,
    .vx-fc__tabs-wrap,
    .vx-fc__winners { display: none !important; }
    .vx-fc__table-outer { overflow: visible; box-shadow: none; }
    .vx-fc__panel { display: block !important; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 680px) {
    .vx-fc { padding: 0 0 32px; }
    .vx-fc__header-bar { padding: 18px 16px; border-radius: 0; flex-direction: column; align-items: flex-start; gap: 12px; }
    .vx-fc__title { font-size: 22px; }
    .vx-fc__slots-wrap { grid-template-columns: 1fr 1fr; }
    .vx-fc__tab { padding: 9px 12px; font-size: 12px; }
    .vx-fc__goals-grid { grid-template-columns: 1fr 1fr; }
    .vx-fc__radar-section, .vx-fc__goals-section { padding: 16px; }

    /* ── Table: fix first-row cut on mobile ────────────── */
    /* Remove sticky from thead — prevents rows hiding behind overlapping headers */
    .vx-fc__table thead th {
        position: static;
        padding: 10px 10px;
        font-size: 11px;
    }
    /* Narrower first (label) column on mobile */
    .vx-fc__table thead th:first-child { width: 88px; min-width: 80px; }
    .vx-fc__table tbody td:first-child  { min-width: 80px; font-size: 11px; }
    /* Allow food-name header to wrap instead of overflowing */
    .vx-fc__th-food-name {
        white-space: normal;
        word-break: break-word;
        max-width: 90px;
        font-size: 11px;
    }
    /* Slightly lower table min-width for narrow screens */
    .vx-fc__table { min-width: 340px; }
    /* Tighter value cells */
    .vx-fc__table tbody td.td-val { min-width: 90px; }
    .vx-fc__bar { width: 70px; }
}
@media (max-width: 400px) {
    .vx-fc__slots-wrap { grid-template-columns: 1fr; }
    .vx-fc__goals-grid { grid-template-columns: 1fr; }
}

/* ── "How are these ranked?" button ──────────────────────── */
.vx-fc__explain-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 14px;
    padding: 6px 12px;
    background: transparent;
    border: 1.5px solid var(--vx-border);
    border-radius: 20px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--vx-text);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.vx-fc__explain-btn:hover {
    border-color: var(--vx-brand);
    background: var(--vx-extra);
    color: var(--vx-brand-alt);
}

/* Goal label row (inline with icon) */
.vx-fc__goal-label-row { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.vx-fc__goal-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: #999; }

/* ── Ranking Explanation Modal ───────────────────────────── */
.vx-fc__modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 15, 43, 0.55);
    backdrop-filter: blur(3px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: vx-modal-in 0.18s ease;
}

@keyframes vx-modal-in {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.vx-fc__modal {
    background: white;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 620px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vx-fc__modal-head {
    background: var(--vx-heading);
    padding: 20px 24px;
    position: relative;
    flex-shrink: 0;
}

.vx-fc__modal-title {
    font-family: 'Lora', serif;
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0 0 4px;
}

.vx-fc__modal-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.vx-fc__modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255,255,255,0.12);
    border: none;
    color: rgba(255,255,255,0.8);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.vx-fc__modal-close:hover { background: rgba(255,255,255,0.25); color: white; }

.vx-fc__modal-body {
    overflow-y: auto;
    padding: 8px 0;
    flex: 1;
    scrollbar-width: thin;
}

.vx-fcm__row {
    padding: 16px 24px;
    border-bottom: 1px solid #f5f5f5;
}
.vx-fcm__row:last-child { border-bottom: none; }

.vx-fcm__row-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.vx-fcm__row-icon { font-size: 22px; flex-shrink: 0; line-height: 1.2; }

.vx-fcm__row-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--vx-heading);
    margin-bottom: 2px;
}

.vx-fcm__row-metric {
    font-size: 11px;
    color: #888;
}
.vx-fcm__row-metric strong { color: var(--vx-brand-alt); }

.vx-fcm__row-detail {
    font-size: 12.5px;
    color: var(--vx-text);
    line-height: 1.65;
    margin: 0;
    padding-left: 34px;
}

.vx-fc__modal-foot {
    padding: 12px 24px;
    border-top: 1px solid var(--vx-border);
    font-size: 10px;
    color: #bbb;
    text-align: center;
    flex-shrink: 0;
    background: #fafafa;
}

/* Mobile modal */
@media (max-width: 600px) {
    .vx-fc__modal { max-height: 92vh; border-radius: 10px 10px 0 0; align-self: flex-end; }
    .vx-fc__modal-overlay { align-items: flex-end; padding: 0; }
    .vx-fcm__row-detail { padding-left: 0; }
}