/* ═══════════════════════════════════════════════════════════════
   CHARACTER + MEMORY LISTS (characters.php, memories.php, js/lists.js)
   Builds on css/character.css (the cd-* tokens and panels, the .tb-lcard
   portrait frame, the .md-thumb memory frame, .tb-search / .tb-fchip);
   everything here is ls-* scoped. The search / filter / sort UI only works
   with JS, so it is shown only once <html> has the "js" class (set inline in
   <head>); without JS the page is the full list of links.
   ═══════════════════════════════════════════════════════════════ */

.ls { display: grid; gap: 16px; align-content: start; }
.ls > * { min-width: 0; }
html:not(.js) .ls-tools, html:not(.js) .ls-bar, html:not(.js) .ls-statnote { display: none !important; }
/* A filtered link (?rarity=ur ...) keeps the grid invisible until lists.js has applied it (no flash of the full list). */
.ls-pending .ls-grid, .ls-pending .ls-empty { visibility: hidden; }

/* ── Heading ───────────────────────────────────────────────────── */
.ls-hero { margin-top: 6px; }
.ls-h1 {
    margin: 0;
    font: 400 clamp(1.9rem, 6vw, 2.8rem)/1.1 var(--font-display);
    letter-spacing: 0.5px;
    color: #fff;
    text-shadow: 0 3px 0 var(--acc), 0 6px 18px rgba(0, 0, 0, 0.5);
}
.cd-jp .ls-h1 { letter-spacing: 0; }
.ls-stats { margin: 8px 0 0; color: var(--text-2); font-size: 0.92rem; font-weight: 600; }
.ls-stats b { color: var(--gold); font-variant-numeric: tabular-nums; }
.ls-lead { max-width: 72ch; margin: 6px 0 0; color: var(--text-3); font-size: 0.88rem; }

/* ── Tools: search + filters ───────────────────────────────────── */
.ls-tools { padding-top: 16px; padding-bottom: 16px; }
.ls-top { display: flex; align-items: center; gap: 8px; }
.ls-q { flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: 1rem; }
.ls-q::-webkit-search-cancel-button { filter: invert(0.8); }
.ls-toggle { flex: none; padding: 8px 14px; }
.ls-nf {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--navy);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}
.ls-panel { display: grid; gap: 14px; margin-top: 14px; }
.ls-chiprows { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; }
.ls-field { display: grid; align-content: start; gap: 5px; min-width: 0; margin: 0; }
.ls-k { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text-3); }
.cd-jp .ls-k { letter-spacing: 0.5px; }
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-chips .tb-fchip { min-height: 30px; padding: 3px 12px; font-size: 0.8rem; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.ls-chips .tb-fchip:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.ls-chips .tb-fchip.is-on { border-color: var(--gold); background: rgba(255, 213, 83, 0.14); color: #fff; }
.ls-rchip { min-width: 44px; justify-content: center; font-weight: 800; letter-spacing: 0.5px; }
.ls-r-ur { color: #ff9fd4; }
.ls-r-sr { color: #ffd553; }
.ls-r-r  { color: #e3ad74; }
.ls-r-n  { color: #b5c1d3; }
.ls-eb img { width: auto; height: 16px; }

.ls-sels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px 12px; }
@media (min-width: 576px) { .ls-field-wide { grid-column: span 2; } }
.ls-select {
    width: 100%;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: var(--navy);
    color: var(--text);
    color-scheme: dark;                      /* dark native dropdowns */
    font: 500 0.88rem/1.25 var(--font-body);
    text-overflow: ellipsis;
    cursor: pointer;
}
.ls-select:hover { border-color: rgba(255, 255, 255, 0.35); }
.ls-select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.ls-select option, .ls-select optgroup { background: var(--navy); color: var(--text); }

/* Phones: the filters fold away behind the Filter button (search and sort stay visible). */
@media (max-width: 767px) {
    .ls-panel:not(.is-open) { display: none; }
    .ls-q, .ls-select { font-size: 16px; }   /* iOS zooms into smaller form fields */
}
@media (min-width: 768px) {
    .ls-toggle { display: none; }
}

/* ── Result bar: count, sort, clear ───────────────────────────── */
.ls-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ls-count { flex: 1 1 auto; margin: 0; color: var(--text); font-size: 0.92rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ls-sort { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ls-sort-l { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.ls-sort-l .ls-k { white-space: nowrap; }
.ls-sort-l .ls-select { width: auto; min-width: 0; max-width: 62vw; }
.ls-order { flex: none; gap: 4px; padding: 7px 12px; font-size: 0.82rem; }
.ls-order-ic { font-weight: 800; }
.ls-reset { padding: 7px 14px; font-size: 0.82rem; border-color: rgba(255, 213, 83, 0.55); }
.ls-statnote { margin: -6px 0 0; font-size: 0.78rem; }
@media (max-width: 479px) {
    .ls-count { flex-basis: 100%; }
    .ls-sort { flex: 1 1 auto; }
    .ls-sort-l { flex: 1 1 auto; }
    .ls-sort-l .ls-select { flex: 1 1 auto; width: 100%; max-width: none; }
}

/* ── Grid ──────────────────────────────────────────────────────── */
.ls-grid { display: grid; gap: 16px 10px; margin: 0; padding: 0; list-style: none; }
.ls-grid-c { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.ls-grid-m { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 14px 8px; }
@media (min-width: 576px) { .ls-grid-m { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 16px 10px; } }
@media (min-width: 992px) { .ls-grid-c { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }

.ls-cell {
    display: grid;
    align-content: start;
    gap: 3px;
    height: 100%;
    min-width: 0;
    text-decoration: none;
    transition: transform 0.2s;
}
.ls-cell:hover { transform: translateY(-3px); }
.ls-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.ls-cell .tb-lcard, .ls-cell .md-thumb { margin-bottom: 3px; }
.ls-grid-m .md-thumb-icon { -webkit-mask-image: var(--ls-mask); mask-image: var(--ls-mask); }

.ls-t { overflow: hidden; color: var(--text-3); font-size: 0.7rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ls-n {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ls-m { color: var(--gold); font-size: 0.68rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ls-m.is-stat { color: #ffe980; }
.ls-grid-m .ls-n { font-size: 0.74rem; text-align: center; }
.ls-grid-m .ls-m { text-align: center; }

/* "LTD" / 限定 badge on limited-recruit cards and memories (text, so it reads in both languages) */
.ls-ltd {
    position: absolute;
    top: 3.5%;
    right: 4%;
    z-index: 1;
    padding: 1px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #ff6b93, #d0234f);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    color: #fff;
    font: 800 0.6rem/1.4 var(--font-body);
    letter-spacing: 0.6px;
    pointer-events: none;
}
.cd-jp .ls-ltd { letter-spacing: 0; }
.md-thumb .ls-ltd { top: 6%; right: 6%; }

.ls-empty { text-align: center; }
.ls-empty p { margin: 0 0 12px; color: var(--text-2); }
.ls-empty .cd-btn { margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .ls-cell, .ls-chips .tb-fchip { transition: none; }
    .ls-cell:hover { transform: none; }
}