/* ==========================================================================
   MSL Dividends Hub — plugin CSS v1.0.0
   --------------------------------------------------------------------------
   Layout wrappers + sort-button skins + bar-color modifiers.
   All visual substance via canonical kit classes (msl-kit.css / kit-extensions.css).
   ZERO inline styles — bar width via kit's own CSS variable mechanism (--s).
   ========================================================================== */

/* ── Logo chip + id layout (shared with mockup, not yet in kit) ─────────── */
.msl-rankid {
    display: flex;
    align-items: center;
    gap: var(--msl-sp-3);
}

.msl-logo-chip {
    width: 36px;
    height: 36px;
    border-radius: var(--msl-r-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--msl-line);
    font-family: var(--msl-font);
    font-weight: var(--msl-w-heavy);
    font-size: 12px;
    color: var(--msl-amber-deep);
    letter-spacing: .02em;
    line-height: 1;
}
.msl-logo-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
}

.msl-rank-idtext {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.msl-rank-idtext .msl-rank-sub {
    margin-top: 0;
    order: -1;
}

/* ── Safety stack (tag above bar) ─────────────────────────────────────── */
.msl-rank-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--msl-sp-2);
    min-width: 150px;
}

/* ── Bar color modifiers — extend kit's .msl-rank-bar-fill ──────────── */
/* safe (payout < 60%) → green */
.msl-rank-bar--safe .msl-rank-bar-fill {
    background: var(--msl-up);
}
/* caution (payout ≥ 60%) → amber (kit default, explicit for clarity) */
.msl-rank-bar--caution .msl-rank-bar-fill {
    background: var(--msl-amber);
}

/* ── Sort buttons in table headers ──────────────────────────────────── */
.msl-sort {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: var(--msl-size-tiny);
    font-weight: var(--msl-w-bold);
    letter-spacing: var(--msl-ls-label);
    text-transform: uppercase;
    color: var(--msl-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--msl-sp-2);
    white-space: nowrap;
}
.msl-sort:hover {
    color: var(--msl-ink-strong);
}
.msl-sort--desc,
.msl-sort--asc {
    color: var(--msl-ink-strong);
}
.msl-sort-car {
    font-size: 10px;
    opacity: .7;
}

/* ── Hero stats strip ────────────────────────────────────────────────── */
.dv-hero-stats {
    display: flex;
    gap: var(--msl-sp-6);
    margin-top: var(--msl-sp-7);
    flex-wrap: wrap;
}
.dv-stat {
    display: flex;
    flex-direction: column;
    gap: var(--msl-sp-1);
}
.dv-stat-num {
    font-family: var(--msl-font);
    font-weight: var(--msl-w-black);
    font-size: var(--msl-size-h3);
    color: #fff;
    line-height: 1;
    letter-spacing: var(--msl-ls-heading);
}
.dv-stat--amber .dv-stat-num {
    color: var(--msl-amber);
}
.dv-stat-lbl {
    font-size: var(--msl-size-tiny);
    color: rgba(255, 255, 255, .65);
    font-weight: var(--msl-w-mid);
}

/* ── Mini-calculator layout (from mockup dividend-ext.css) ───────────── */
.msl-minicalc-head {
    margin-top: var(--msl-sp-9);
}
.msl-minicalc-head .msl-h2 {
    margin: 0 0 var(--msl-sp-3);
}
.msl-minicalc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--msl-sp-6);
    align-items: stretch;
    margin-top: var(--msl-sp-5);
}
.msl-minicalc .msl-card {
    gap: var(--msl-sp-5);
}
.msl-minicalc .msl-card .msl-btn {
    align-self: flex-start;
}
.msl-minicalc .msl-num--xl {
    margin: var(--msl-sp-2) 0;
}
.msl-minicalc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--msl-sp-4);
    padding: var(--msl-sp-3) 0;
    border-top: 1px solid var(--msl-line-dark);
    font-size: var(--msl-size-small);
}
.msl-minicalc-row .k {
    color: var(--msl-on-navy);
    opacity: .82;
}
.msl-minicalc-row .num {
    font-variant-numeric: tabular-nums;
    font-weight: var(--msl-w-bold);
    color: #fff;
}
.msl-minicalc-row .num--amber {
    color: var(--msl-amber);
}
.msl-minicalc-note {
    font-size: var(--msl-size-meta);
    color: var(--msl-on-navy);
    opacity: .75;
    margin-top: var(--msl-sp-2);
    line-height: var(--msl-lh-normal);
}

/* breathing room between table and calculator */
.msl-pattern-rank {
    margin-bottom: var(--msl-sp-6);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .msl-minicalc {
        grid-template-columns: 1fr;
    }
    .dv-hero-stats {
        gap: var(--msl-sp-5);
    }
}