/* ═══════════════════════════════════════════════════════════════
   STATUS EFFECTS (status-effects.php)
   Builds on css/character.css (cd-* tokens, panels, tabs, .tb-search and the .it-* item markup of mhui_item_html);
   everything here is se-* scoped. Static by design: no loaders or entrance animations.
   ═══════════════════════════════════════════════════════════════ */

.se { display: grid; gap: 20px; align-content: start; }
.se > * { min-width: 0; }
.se-pending .se-sec, .se-pending .se-count { visibility: hidden; }

.se-head { display: grid; gap: 6px; padding-top: 12px; }
.se-h1 { justify-self: start; font-size: clamp(1.6rem, 4.4vw, 2.2rem); }
.se-lead { margin: 6px 0 0; color: var(--text-2); max-width: 760px; }

/* ── Tools ──────────────────────────────────────────────────────── */
.se-tools { display: grid; gap: 10px; }
.se-kinds { justify-self: start; border-radius: 14px; }
.se-n { margin-left: 2px; opacity: 0.75; font-weight: 500; }
.se-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.se-search { flex: 1 1 260px; max-width: 420px; }
.se-count { margin: 0; color: var(--text-3); font-size: 0.85rem; }
.se-empty { margin: 0; padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.03); color: var(--text-3); text-align: center; }
.se-about { margin: 0; }

/* ── Cards ──────────────────────────────────────────────────────── */
.se-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
    gap: 12px;
    align-items: stretch;   /* every card in a row is as tall as the tallest: no ragged gaps */
    margin: 0;
    padding: 0;
    list-style: none;
}
.se-card {
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid var(--se-c, var(--acc2));
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
    scroll-margin-top: 16px;
}
.se-card.is-target { outline: 2px solid var(--gold); outline-offset: 2px; }
.se-k-buff    { --se-c: #57dd5c; }
.se-k-debuff  { --se-c: #ff6f6f; }
.se-k-ailment { --se-c: #c46cf0; }
.se-k-resup   { --se-c: #5fb4ff; }
.se-k-resdown { --se-c: #ffa552; }
.se-k-immune  { --se-c: #ffd553; }
.se-k-instant { --se-c: #9fb2d3; }

.se-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.se-ic {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.se-ic img { width: 100%; height: 100%; object-fit: contain; }
.se-ic-none::before {
    content: '';
    width: 70%;
    height: 70%;
    border: 2px solid var(--se-c, var(--text-3));
    border-radius: 50%;
    opacity: 0.6;
}
.se-tt { flex: 1; min-width: 0; }
.se-name { margin: 0; font: 400 1.05rem/1.25 var(--font-display); letter-spacing: 0.3px; overflow-wrap: anywhere; }
.cd-jp .se-name { letter-spacing: 0; }
.se-alt { margin: 1px 0 0; color: var(--text-3); font-size: 0.78rem; line-height: 1.3; overflow-wrap: anywhere; }
.se-badge {
    flex: none;
    align-self: flex-start;
    padding: 1px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--se-c) 18%, transparent);
    color: var(--se-c);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.se-desc { margin: 0; color: var(--text); font-size: 0.88rem; line-height: 1.5; overflow-wrap: anywhere; }
.se-desc .tx-up { color: var(--up); font-weight: 700; }
.se-desc .tx-down { color: var(--down); font-weight: 700; }
.se-var { margin: 0; color: var(--text-3); font-size: 0.76rem; font-style: italic; }

.se-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 0.78rem; }
.se-facts > div { display: flex; gap: 5px; }
.se-facts dt { color: var(--text-3); font-weight: 600; }
.se-facts dd { margin: 0; color: var(--text-2); }

.se-use, .se-rel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 0.84rem; }
.se-use-h { color: var(--text-3); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.cd-jp .se-use-h { letter-spacing: 0; }
.se .se-link { color: var(--acc2); font-weight: 600; text-decoration: none; }
.se .se-link:hover { text-decoration: underline; }
.se-kinds-line { flex-basis: 100%; margin: 0; color: var(--text-3); font-size: 0.74rem; }
.se-unused { margin: 0; color: var(--text-3); font-size: 0.8rem; }

.se-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-2);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.se-more > summary::-webkit-details-marker { display: none; }
.se-more > summary::after { content: '▸'; font-size: 0.75em; }
.se-more[open] > summary::after { content: '▾'; }
.se-more > summary:hover { color: #fff; }
.se-use .se-more[open] { flex-basis: 100%; }
.se-enemies { margin: 6px 0 0; color: var(--text-2); font-size: 0.8rem; line-height: 1.5; }

.se-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.se .se-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px 2px 3px;
    border: 1px solid color-mix(in srgb, var(--se-c) 35%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.3;
    text-decoration: none;
}
.se .se-chip:hover { border-color: var(--se-c); }
.se-chip .se-ic { width: 20px; height: 20px; }

.se-res > summary { font-size: 0.8rem; }
.se-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.se-tiles > li { display: grid; justify-items: center; gap: 2px; }
.se-tiles .it-tile .it-ic { width: 48px; }
.se-rv { color: var(--text-2); font-size: 0.72rem; font-weight: 700; }
.se-rv.is-full { color: var(--gold); }