/* Mewgenics resource explorer.
   Built on the site tokens in CSS/tokens.css; the --mew-* layer only names the
   things this page needs, so a token change upstream still lands here. */

.mew-page,
.mew-modal,
.mew-toast,
.mew-detail-backdrop {
    --mew-accent: #f0abfc;
    --mew-accent-bright: #f8d4ff;
    --mew-accent-soft: rgba(240, 171, 252, .12);
    --mew-accent-line: rgba(240, 171, 252, .36);
    --mew-bg: #0a0a0f;
    --mew-surface-1: rgba(255, 255, 255, .028);
    --mew-surface-2: #12121a;
    --mew-surface-3: #181822;
    --mew-surface-4: #1e1e2a;
    --mew-line: rgba(255, 255, 255, .08);
    --mew-line-strong: rgba(255, 255, 255, .15);
    --mew-text: #f2f2f5;
    --mew-text-2: #a9a9b5;
    --mew-text-3: #74747f;
    --mew-radius-sm: 8px;
    --mew-radius: 12px;
    --mew-radius-lg: 16px;
    --mew-control: 40px;
    --mew-focus: 0 0 0 3px rgba(240, 171, 252, .28);
    --mew-ease: cubic-bezier(.2, .7, .2, 1);
    --mew-header-offset: 80px;

    --mew-common: #b7b7c2;
    --mew-uncommon: #6ee7a8;
    --mew-rare: #7dd3fc;
    --mew-very-rare: #f0abfc;
    --mew-quest: #fbbf24;

    /* The lit plate. The sprites are black outline over flat colour, authored
       on a light game background, so the ground they sit on has to be light for
       them to read at all -- which makes its tint the one place rarity can live
       without costing legibility. Card-scoped: a [data-rarity] block sets all
       three and the gradient, the closing rule and the list plate all read them,
       so no colour literal is ever repeated downstream. */
    --mew-plate-top: #f1f0f5;
    --mew-plate-bottom: #d4d3de;
    --mew-plate-rule: var(--mew-line);
    --mew-ink: #14141c;
    --mew-plate-h: 104px;
}

.mew-page {
    min-height: 100vh;
    color: var(--mew-text);
    background:
        radial-gradient(circle at 84% 0, rgba(240, 171, 252, .07), transparent 26rem),
        radial-gradient(circle at 0 32%, rgba(125, 211, 252, .04), transparent 30rem);
}

/* Several controls here are display:flex/grid, which beats the user-agent rule
   for [hidden]; the explorer toggles visibility through that attribute. */
.mew-page [hidden],
.mew-modal[hidden],
.mew-modal [hidden],
.mew-detail-backdrop[hidden],
.mew-modal-backdrop[hidden] {
    display: none !important;
}

.mew-page *:focus {
    outline: none;
}

.mew-page :is(button, a, input, select, textarea, [tabindex]):focus-visible,
.mew-modal :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--mew-accent);
    outline-offset: 2px;
    box-shadow: var(--mew-focus);
}

.mew-page button {
    cursor: pointer;
    font-family: var(--ds-font-sans, inherit);
}

.mew-page code,
.mew-modal code {
    font-family: var(--ds-font-mono, ui-monospace, monospace);
    font-size: .92em;
    color: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mew-shell {
    max-width: 1500px;
    margin: 0 auto;
    padding: calc(var(--mew-header-offset) + 2rem) 1rem 4rem;
}

/* --- header --------------------------------------------------------------- */

.mew-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mew-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .84rem;
    color: var(--mew-text-3);
}

.mew-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: "/";
    margin-right: .35rem;
    color: var(--mew-text-3);
}

.mew-breadcrumb a {
    color: var(--mew-text-2);
    text-decoration: none;
}

.mew-breadcrumb a:hover {
    color: var(--mew-accent-bright);
}

.mew-breadcrumb .active {
    color: var(--mew-text);
}

.mew-header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mew-intro {
    margin: 1.75rem 0 1.5rem;
    max-width: 62ch;
}

.mew-intro h1 {
    margin: 0 0 .5rem;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 650;
    letter-spacing: -.02em;
}

.mew-intro h1 span {
    color: var(--mew-accent);
}

.mew-intro p {
    margin: 0;
    color: var(--mew-text-2);
    line-height: 1.65;
}

.mew-intro code {
    padding: .1em .35em;
    border-radius: 5px;
    background: var(--mew-surface-3);
    color: var(--mew-accent-bright);
}

.mew-intro abbr {
    text-decoration-color: var(--mew-accent-line);
    cursor: help;
}

.mew-generated {
    margin-top: .75rem !important;
    font-size: .82rem;
    color: var(--mew-text-3) !important;
}

/* --- search --------------------------------------------------------------- */

.mew-search-wrap {
    position: relative;
    margin-bottom: 1.25rem;
}

.mew-search {
    display: flex;
    align-items: center;
    gap: .7rem;
    height: 52px;
    padding: 0 .9rem;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius);
    background: var(--mew-surface-2);
    transition: border-color 150ms var(--mew-ease), box-shadow 150ms var(--mew-ease);
}

.mew-search:focus-within {
    border-color: var(--mew-accent-line);
    box-shadow: var(--mew-focus);
}

.mew-search>i {
    color: var(--mew-text-3);
}

.mew-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    color: var(--mew-text);
    font: inherit;
    font-size: .98rem;
}

.mew-search input::placeholder {
    color: var(--mew-text-3);
}

.mew-search input::-webkit-search-cancel-button {
    display: none;
}

.mew-search kbd {
    padding: .2rem .45rem;
    border: 1px solid var(--mew-line);
    border-radius: 6px;
    background: var(--mew-surface-4);
    color: var(--mew-text-3);
    font-family: var(--ds-font-mono, monospace);
    font-size: .7rem;
}

.mew-search-clear {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: var(--mew-surface-4);
    color: var(--mew-text-2);
}

.mew-search-clear:hover {
    color: var(--mew-text);
}

.mew-suggestions {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + .4rem);
    z-index: 40;
    padding: .35rem;
    border: 1px solid var(--mew-line-strong);
    border-radius: var(--mew-radius);
    background: var(--mew-surface-2);
    box-shadow: var(--ds-shadow-pop, 0 18px 40px rgba(0, 0, 0, .45));
}

.mew-suggestion {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .55rem .65rem;
    border: 0;
    border-radius: var(--mew-radius-sm);
    background: none;
    color: var(--mew-text);
    text-align: left;
}

.mew-suggestion:hover {
    background: var(--mew-surface-4);
}

.mew-suggestion>i {
    color: var(--mew-accent);
    width: 1rem;
    text-align: center;
}

.mew-suggestion-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.mew-suggestion-main strong {
    font-weight: 550;
    font-size: .92rem;
}

.mew-suggestion-main small {
    color: var(--mew-text-3);
    font-family: var(--ds-font-mono, monospace);
    font-size: .74rem;
}

.mew-suggestion-type {
    color: var(--mew-text-3);
    font-size: .76rem;
    white-space: nowrap;
}

/* --- categories ----------------------------------------------------------- */

.mew-categories {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--mew-line);
}

.mew-tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.mew-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 36px;
    padding: 0 .8rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--mew-text-2);
    font-size: .87rem;
    transition: background 150ms var(--mew-ease), color 150ms var(--mew-ease);
}

.mew-tab:hover {
    background: var(--mew-surface-3);
    color: var(--mew-text);
}

.mew-tab.is-active {
    background: var(--mew-accent-soft);
    border-color: var(--mew-accent-line);
    color: var(--mew-accent-bright);
}

.mew-tab small {
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--mew-surface-4);
    color: var(--mew-text-3);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
}

.mew-tab.is-active small {
    background: rgba(240, 171, 252, .18);
    color: var(--mew-accent-bright);
}

.mew-index-status {
    margin-left: auto;
    color: var(--mew-text-3);
    font-size: .8rem;
}

/* --- toolbar -------------------------------------------------------------- */

.mew-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .9rem 0;
}

.mew-summary {
    margin: 0;
    color: var(--mew-text-2);
    font-size: .88rem;
}

.mew-toolbar-end {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.mew-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: var(--mew-control);
    padding: 0 .85rem;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-sm);
    background: var(--mew-surface-2);
    color: var(--mew-text-2);
    font-size: .87rem;
    text-decoration: none;
    transition: border-color 150ms var(--mew-ease), color 150ms var(--mew-ease), background 150ms var(--mew-ease);
}

.mew-btn:hover {
    border-color: var(--mew-line-strong);
    color: var(--mew-text);
}

.mew-btn-primary {
    background: var(--mew-accent-soft);
    border-color: var(--mew-accent-line);
    color: var(--mew-accent-bright);
}

.mew-btn-star.is-on {
    border-color: var(--mew-accent-line);
    color: var(--mew-accent-bright);
}

.mew-icon-btn {
    display: grid;
    place-items: center;
    width: var(--mew-control);
    height: var(--mew-control);
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-sm);
    background: var(--mew-surface-2);
    color: var(--mew-text-2);
    transition: border-color 150ms var(--mew-ease), color 150ms var(--mew-ease);
}

.mew-icon-btn:hover {
    border-color: var(--mew-line-strong);
    color: var(--mew-text);
}

.mew-icon-btn.is-on {
    color: var(--mew-accent);
    border-color: var(--mew-accent-line);
}

.mew-count-badge {
    min-width: 18px;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--mew-accent);
    color: #14141c;
    font-size: .7rem;
    font-weight: 650;
    text-align: center;
}

.mew-segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-sm);
    background: var(--mew-surface-2);
}

.mew-segment {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--mew-text-3);
}

.mew-segment[aria-pressed="true"] {
    background: var(--mew-surface-4);
    color: var(--mew-accent-bright);
}

/* --- popovers ------------------------------------------------------------- */

.mew-popover-anchor {
    position: relative;
}

.mew-menu,
.mew-popover {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 45;
    min-width: 220px;
    padding: .35rem;
    border: 1px solid var(--mew-line-strong);
    border-radius: var(--mew-radius);
    background: var(--mew-surface-2);
    box-shadow: var(--ds-shadow-pop, 0 18px 40px rgba(0, 0, 0, .45));
}

.mew-more-menu {
    left: 0;
    right: auto;
    max-height: 60vh;
    overflow-y: auto;
}

.mew-menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 0;
    border-radius: var(--mew-radius-sm);
    background: none;
    color: var(--mew-text-2);
    font-size: .87rem;
    text-align: left;
}

.mew-menu-item:hover {
    background: var(--mew-surface-4);
    color: var(--mew-text);
}

.mew-menu-item.is-active {
    color: var(--mew-accent-bright);
}

.mew-menu-item>i:first-child {
    width: 1rem;
    text-align: center;
}

.mew-menu-item span {
    flex: 1;
}

.mew-menu-item small {
    color: var(--mew-text-3);
    font-variant-numeric: tabular-nums;
}

.mew-filter-panel {
    width: min(420px, 88vw);
    max-height: 62vh;
    overflow-y: auto;
    padding: .75rem;
}

.mew-popover-empty {
    margin: 0;
    padding: .5rem;
    color: var(--mew-text-3);
    font-size: .86rem;
}

.mew-filter-group+.mew-filter-group {
    margin-top: 1rem;
}

.mew-filter-group {
    padding: 0;
}

.mew-filter-group h4 {
    margin: 0 0 .5rem;
    color: var(--mew-text-3);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.mew-filter-values {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.mew-filter-value {
    padding: .3rem .6rem;
    border: 1px solid var(--mew-line);
    border-radius: 999px;
    background: var(--mew-surface-3);
    color: var(--mew-text-2);
    font-size: .8rem;
}

.mew-filter-value:hover {
    border-color: var(--mew-line-strong);
    color: var(--mew-text);
}

.mew-filter-value.is-on {
    background: var(--mew-accent-soft);
    border-color: var(--mew-accent-line);
    color: var(--mew-accent-bright);
}

.mew-filter-foot {
    margin-top: 1rem;
    padding-top: .6rem;
    border-top: 1px solid var(--mew-line);
}

.mew-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding-bottom: .9rem;
}

.mew-active-filter {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .6rem;
    border: 1px solid var(--mew-accent-line);
    border-radius: 999px;
    background: var(--mew-accent-soft);
    color: var(--mew-accent-bright);
    font-size: .78rem;
}

.mew-active-filter i {
    opacity: .7;
}

.mew-active-filter:hover i {
    opacity: 1;
}

/* --- workspace ------------------------------------------------------------ */

.mew-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 1180px) {
    .mew-workspace[data-detail="open"] {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 460px);
    }
}

.mew-results {
    display: grid;
    gap: .75rem;
}

/* 212 rather than 260 buys a sixth column at 1440 and, more usefully, keeps
   four when the detail panel is open -- at 260 that case fell straight to
   three and the grid lurched every time a record was opened. */
.mew-results.is-grid {
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
}

.mew-results.is-list,
.mew-results.is-table {
    grid-template-columns: minmax(0, 1fr);
}

.mew-empty {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: 4rem 1rem;
    color: var(--mew-text-3);
    text-align: center;
}

.mew-empty i {
    font-size: 1.75rem;
    opacity: .5;
}

.mew-empty strong {
    color: var(--mew-text-2);
    font-weight: 550;
}

.mew-empty span {
    font-size: .87rem;
}

/* --- cards ---------------------------------------------------------------- */

.mew-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;                 /* clips the plate to the top corners */
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius);
    background: var(--mew-surface-2);
    transition: border-color 150ms var(--mew-ease), transform 150ms var(--mew-ease),
                background 150ms var(--mew-ease);
}

.mew-card:hover {
    border-color: var(--mew-line-strong);
    background: var(--mew-surface-3);
    transform: translateY(-1px);
}

.mew-card:hover .mew-card-plate {
    filter: brightness(1.04);
}

/* Selection lives on the frame and the body, rank lives on the plate, so the
   two never compete for the same pixels. */
.mew-card.is-active {
    border-color: var(--mew-accent-line);
    background: var(--mew-accent-soft);
}

.mew-card.is-active .mew-card-name {
    color: var(--mew-accent-bright);
}

/* --- rank ------------------------------------------------------------------
   Five blocks, driving both the card plate and the list row plate. The JS
   folds `consumable_*`, `sidequest`, `medium` and the game data's `uncommmon`
   typo onto these keys, so they cover more values than the eleven selectors
   they replace. No rank is the :root default and is deliberately brighter than
   common -- 11,099 of 12,093 records have no rank, and absence of rank is a
   state of its own, not the bottom of the scale. */

.mew-card[data-rarity="common"],
.mew-row[data-rarity="common"],
.mew-table tr[data-rarity="common"] {
    --mew-plate-top: #cdced9;
    --mew-plate-bottom: #a5a6b6;
    --mew-plate-rule: rgba(183, 183, 194, .55);
}

.mew-card[data-rarity="uncommon"],
.mew-row[data-rarity="uncommon"],
.mew-table tr[data-rarity="uncommon"] {
    --mew-plate-top: #dcf6e7;
    --mew-plate-bottom: #9ddcbc;
    --mew-plate-rule: var(--mew-uncommon);
}

.mew-card[data-rarity="rare"],
.mew-row[data-rarity="rare"],
.mew-table tr[data-rarity="rare"] {
    --mew-plate-top: #ddf0fd;
    --mew-plate-bottom: #9dd3f2;
    --mew-plate-rule: var(--mew-rare);
}

.mew-card[data-rarity="very_rare"],
.mew-row[data-rarity="very_rare"],
.mew-table tr[data-rarity="very_rare"] {
    --mew-plate-top: #f7e0fc;
    --mew-plate-bottom: #d9ade6;
    --mew-plate-rule: var(--mew-very-rare);
}

.mew-card[data-rarity="quest"],
.mew-row[data-rarity="quest"],
.mew-table tr[data-rarity="quest"] {
    --mew-plate-top: #fbecc7;
    --mew-plate-bottom: #ecc986;
    --mew-plate-rule: var(--mew-quest);
}

/* --- the plate ------------------------------------------------------------ */

.mew-card-plate {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    height: var(--mew-plate-h);
    padding: 8px 10px;
    background: linear-gradient(180deg, var(--mew-plate-top), var(--mew-plate-bottom));
    border-bottom: 2px solid var(--mew-plate-rule);
    transition: filter 150ms var(--mew-ease);
}

.mew-card-plate .mew-art,
.mew-row-plate .mew-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* What the plate holds when there is no sprite, which is the majority state:
   7,587 records will never have one, and on Abilities -- 3,076 records -- only
   27% resolve. It is the category glyph, small and low-contrast: quiet enough
   that the cards which DO carry art are what the eye lands on, and meaningful
   in the mixed sets where the type chip used to say this.

   A drop-cap initial was the other candidate and reads worse at corpus scale:
   ability names are frequently numeric, so a real screen of them spells
   "0 1 2 2 3 4 4 5 6" in 2.6rem serif -- loud, and carrying nothing.

   Only the plate's CONTENTS change when art lands, never its ground. Dimming
   the ground for the no-art state would mean every card visibly changing
   colour as its sheet arrives. */
.mew-plate-cat {
    color: rgba(0, 0, 0, .22);
    font-size: 1.5rem;
}

.mew-card-plate.is-art .mew-plate-cat,
.mew-row-plate.is-art .mew-plate-cat,
.mew-detail-plate.is-art .mew-plate-cat {
    display: none;
}

/* --- body ----------------------------------------------------------------- */

.mew-card-body {
    display: flex;
    flex-direction: column;
    gap: .18rem;
    height: 100px;                    /* 204 total, so every card matches */
    padding: .6rem .7rem .65rem;
}

.mew-card-name {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0;
    color: var(--mew-text);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
}

.mew-card-name > span:first-child {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mew-card-refs {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    color: var(--mew-text-3);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* One line, never wrapping. The old footer wrapped to two ragged rows and was
   the direct cause of the grid never settling to a common card height. */
.mew-card-meta {
    display: flex;
    align-items: baseline;
    gap: .34rem;
    min-height: 1.05rem;
    margin: 0;
    overflow: hidden;
    font-size: .72rem;
    white-space: nowrap;
}

.mew-card-meta > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mew-card-meta > span + span::before {
    content: "\00b7";
    margin-right: .34rem;
    color: var(--mew-text-3);
}

.mew-card-grade {
    color: var(--mew-text-2);
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.mew-card-grade.is-rank.r-common { color: var(--mew-common); }
.mew-card-grade.is-rank.r-uncommon { color: var(--mew-uncommon); }
.mew-card-grade.is-rank.r-rare { color: var(--mew-rare); }
.mew-card-grade.is-rank.r-very_rare { color: var(--mew-very-rare); }
.mew-card-grade.is-rank.r-quest { color: var(--mew-quest); }

.mew-card-grade.is-type,
.mew-card-grade.is-id {
    color: var(--mew-text-3);
    font-weight: 500;
}

.mew-card-grade.is-id {
    font-family: var(--ds-font-mono, monospace);
    text-transform: none;
    letter-spacing: 0;
}

.mew-card-facet {
    color: var(--mew-text-3);
}

.mew-card-meta [data-facet],
.mew-row-meta [data-facet] {
    cursor: pointer;
}

.mew-card-meta [data-facet]:hover,
.mew-row-meta [data-facet]:hover {
    color: var(--mew-accent-bright);
}

/* Keywords, classes and most events have no rank and no classifier, so their
   meta line would otherwise be a reserved gap on 43 of 60 cards. Drop it and
   hand the room to the description instead -- the card height is pinned above,
   so nothing moves. */
.mew-card-meta:empty {
    display: none;
}

.mew-card-meta:empty + .mew-card-line {
    -webkit-line-clamp: 3;
    height: 3.45rem;
}

/* Height reserved, so an absent description can never shorten a card and a
   long one can never stretch it. */
.mew-card-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.3rem;
    margin: 0;
    color: var(--mew-text-2);
    font-size: .8rem;
    line-height: 1.15rem;
}

/* The fallback for the 7,504 records with no description: where the record
   came from. Right content, quieter register -- a source path set in the prose
   voice reads as leaked plumbing. */
.mew-card-line.is-path {
    color: var(--mew-text-3);
    font-family: var(--ds-font-mono, monospace);
    font-size: .72rem;
}

.mew-star {
    position: absolute;
    top: 4px;
    right: 4px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(0, 0, 0, .34);
    font-size: .78rem;
    opacity: 0;
    transition: opacity 120ms var(--mew-ease), color 120ms var(--mew-ease);
}

.mew-card:hover .mew-star,
.mew-card:focus-within .mew-star,
.mew-star.is-on,
.mew-star:focus-visible {
    opacity: 1;
}

.mew-star:hover {
    color: var(--mew-ink);
}

.mew-star.is-on {
    color: #d97706;
}


/* --- list + table --------------------------------------------------------- */

.mew-row {
    display: grid;
    /* Every row is its own grid container, so an `auto` track is measured
       against that row's own content -- "RARE" and "SIDEQUEST" then produce
       different column widths and the description edge zig-zags down the list.
       A fixed last track makes all four resolve identically in every row. */
    grid-template-columns: 44px minmax(140px, 1fr) minmax(0, 2fr) 96px;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-sm);
    background: var(--mew-surface-2);
}

.mew-row:hover {
    border-color: var(--mew-line-strong);
    background: var(--mew-surface-3);
}

.mew-row.is-active {
    border-color: var(--mew-accent-line);
    background: var(--mew-accent-soft);
}

.mew-row-plate {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 3px;
    border-radius: var(--mew-radius-sm);
    background: linear-gradient(180deg, var(--mew-plate-top), var(--mew-plate-bottom));
    border-bottom: 2px solid var(--mew-plate-rule);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

.mew-row-plate .mew-plate-cat {
    font-size: .95rem;
}

.mew-row-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mew-row-main strong {
    font-size: .9rem;
    font-weight: 550;
}

.mew-row-main code {
    color: var(--mew-text-3);
    font-size: .74rem;
}

.mew-row-desc {
    color: var(--mew-text-2);
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mew-row-meta {
    color: var(--mew-text-3);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-align: right;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .mew-row {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .mew-row-desc,
    .mew-row-meta {
        display: none;
    }
}

.mew-results.is-table {
    overflow-x: auto;
}

.mew-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.mew-table th {
    position: sticky;
    top: 0;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--mew-line-strong);
    background: var(--mew-surface-2);
    color: var(--mew-text-3);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.mew-table td {
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--mew-line);
    color: var(--mew-text-2);
}

.mew-table tbody tr:hover {
    background: var(--mew-surface-3);
    cursor: pointer;
}

.mew-table tbody tr.is-active {
    background: var(--mew-accent-soft);
}

.mew-table td:first-child {
    color: var(--mew-text);
}

.mew-cell-desc {
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mew-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 1.5rem 0;
    color: var(--mew-text-3);
    font-size: .84rem;
}

.mew-sentinel {
    height: 1px;
}

/* --- detail --------------------------------------------------------------- */

.mew-detail {
    align-self: start;
    max-height: calc(100vh - var(--mew-header-offset) - 2rem);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-lg);
    background: var(--mew-surface-2);
}

@media (min-width: 1180px) {
    .mew-detail {
        position: sticky;
        top: calc(var(--mew-header-offset) + 1rem);
    }

    .mew-detail-backdrop {
        display: none;
    }
}

@media (max-width: 1179px) {
    .mew-detail {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 60;
        max-height: 84vh;
        border-radius: var(--mew-radius-lg) var(--mew-radius-lg) 0 0;
        box-shadow: var(--ds-shadow-modal, 0 28px 80px rgba(0, 0, 0, .55));
    }

    .mew-detail-backdrop {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(5, 5, 8, .6);
    }
}

.mew-detail-loading {
    display: grid;
    place-items: center;
    padding: 3rem;
    color: var(--mew-text-3);
}

.mew-detail-missing {
    color: var(--mew-text-3);
    font-size: .88rem;
}

.mew-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .9rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid var(--mew-line);
}

.mew-detail-heading {
    min-width: 0;
}

.mew-detail-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--mew-accent);
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mew-detail-head h2 {
    margin: .3rem 0 .35rem;
    font-size: 1.3rem;
    font-weight: 620;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.mew-detail-id {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    color: var(--mew-text-3);
    font-size: .76rem;
}

.mew-detail-id code {
    color: var(--mew-text-2);
}

.mew-detail-file {
    font-family: var(--ds-font-mono, monospace);
}

.mew-detail-actions {
    display: flex;
    gap: .35rem;
    flex: none;
}

.mew-detail-actions .mew-icon-btn {
    width: 34px;
    height: 34px;
}

.mew-detail-desc {
    padding: .75rem .85rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--mew-accent-line);
    border-radius: 0 var(--mew-radius-sm) var(--mew-radius-sm) 0;
    background: var(--mew-surface-3);
    color: var(--mew-text);
    font-size: .9rem;
    line-height: 1.6;
}

.mew-detail-section {
    margin-bottom: 1.4rem;
    padding: 0;
}

.mew-detail-section>h3 {
    margin: 0 0 .6rem;
    color: var(--mew-text-3);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mew-detail-section>h3 small {
    margin-left: .4rem;
    color: var(--mew-text-3);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.mew-detail-collapsible>h3 {
    margin: 0;
}

.mew-detail-collapsible>h3 button {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-sm);
    background: var(--mew-surface-3);
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.mew-detail-collapsible>h3 button:hover {
    border-color: var(--mew-line-strong);
    color: var(--mew-text-2);
}

.mew-detail-collapsible>h3 button>i:last-child {
    margin-left: auto;
    transition: transform 150ms var(--mew-ease);
}

.mew-detail-collapsible[data-collapsed="false"]>h3 button>i:last-child {
    transform: rotate(180deg);
}

.mew-detail-collapsible[data-collapsed="true"] .mew-section-body {
    display: none;
}

.mew-detail-collapsible .mew-section-body {
    padding-top: .7rem;
}

.mew-section-note {
    margin: 0 0 .6rem;
    color: var(--mew-text-3);
    font-size: .8rem;
    line-height: 1.5;
}

/* --- data tree ------------------------------------------------------------ */

.mew-tree {
    margin: 0;
    font-size: .85rem;
}

.mew-tree-row {
    display: grid;
    grid-template-columns: minmax(90px, 34%) minmax(0, 1fr);
    gap: .6rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--mew-line);
}

/* A row whose value is itself a tree stacks: the key reads as a heading and the
   subtree gets the full width. GON nests four or five deep and a rank block can
   run twenty rows, so holding the key column open beside one leaves a third of
   the panel empty for that whole height. Leaf rows keep their two columns. */
.mew-tree-row.is-branch {
    grid-template-columns: minmax(0, 1fr);
    gap: .15rem;
    padding-bottom: .45rem;
}

.mew-tree-row.is-branch > dt {
    color: var(--mew-text-2);
    font-size: .8rem;
}

.mew-tree.is-nested {
    margin-top: .3rem;
    padding-left: .6rem;
    border-left: 1px solid var(--mew-line);
}

/* Indented rows have already lost width to the gutter, so their key column is
   narrower than the outermost one rather than stacked -- `Charmed 1` belongs on
   one line, not two. */
.mew-tree.is-nested .mew-tree-row {
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    gap: .5rem;
}

.mew-tree.is-nested .mew-tree-row.is-branch {
    grid-template-columns: minmax(0, 1fr);
}

/* The tree only ever renders inside the detail panel, and that panel is a fixed
   380-460px column on desktop however wide the window gets. Sizing these rows
   against the viewport therefore asks the wrong question -- it reports "roomy"
   for a panel that is not. The query below asks the panel. */
.mew-detail {
    container-type: inline-size;
    container-name: mew-detail;
}

@container mew-detail (max-width: 330px) {
    .mew-tree-row,
    .mew-tree.is-nested .mew-tree-row {
        grid-template-columns: minmax(0, 1fr);
        gap: .1rem;
    }
}

.mew-tree.is-nested .mew-tree-row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.mew-tree dt {
    color: var(--mew-text-3);
    font-family: var(--ds-font-mono, monospace);
    font-size: .78rem;
    overflow-wrap: anywhere;
}

.mew-tree dd {
    margin: 0;
    color: var(--mew-text-2);
    min-width: 0;
    overflow-wrap: anywhere;
}

.mew-v-num {
    color: var(--mew-rare);
    font-family: var(--ds-font-mono, monospace);
}

.mew-v-str {
    color: var(--mew-text);
}

.mew-v-null {
    color: var(--mew-text-3);
    font-style: italic;
}

.mew-v-sep {
    color: var(--mew-text-3);
}

.mew-v-key {
    color: var(--mew-text);
    border-bottom: 1px dotted var(--mew-line-strong);
}

.mew-v-array {
    margin: .2rem 0 0;
    padding-left: 1rem;
}

.mew-ref,
.mew-ref-key {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: var(--mew-accent-bright);
    text-decoration: none;
    border-bottom: 1px solid var(--mew-accent-line);
}

.mew-ref i {
    font-size: .62em;
    opacity: .6;
}

.mew-ref:hover,
.mew-ref-key:hover {
    color: #fff;
    border-bottom-color: var(--mew-accent-bright);
}

.mew-ref-key {
    font-family: var(--ds-font-mono, monospace);
    font-size: .78rem;
}

/* --- links ---------------------------------------------------------------- */

.mew-link-group+.mew-link-group {
    margin-top: .7rem;
}

.mew-link-field {
    display: block;
    margin-bottom: .35rem;
    color: var(--mew-text-3);
    font-size: .74rem;
}

.mew-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.mew-link-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .6rem;
    border: 1px solid var(--mew-line);
    border-radius: 999px;
    background: var(--mew-surface-3);
    color: var(--mew-text-2);
    font-size: .8rem;
    text-decoration: none;
}

.mew-link-pill:hover {
    border-color: var(--mew-accent-line);
    background: var(--mew-accent-soft);
    color: var(--mew-accent-bright);
}

.mew-link-pill i {
    color: var(--mew-accent);
    font-size: .78em;
}

.mew-link-pill small {
    color: var(--mew-text-3);
    font-size: .68rem;
}

.mew-link-pill.is-self {
    border-style: dashed;
    color: var(--mew-text);
}

.mew-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.mew-chain-arrow {
    color: var(--mew-text-3);
    font-size: .7rem;
}

/* --- translations + source ------------------------------------------------ */

.mew-lang-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.mew-lang-key {
    padding: .6rem 0 .3rem;
    color: var(--mew-text-3);
    font-weight: 500;
    text-align: left;
}

.mew-lang-table td {
    padding: .3rem .5rem .3rem 0;
    border-bottom: 1px solid var(--mew-line);
    vertical-align: top;
}

.mew-lang-code {
    width: 8rem;
    color: var(--mew-text-3);
    font-size: .78rem;
}

.mew-source {
    max-height: 26rem;
    margin: 0;
    padding: .75rem;
    overflow: auto;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-sm);
    background: var(--ds-bg-code, #0e0e15);
    color: var(--mew-text-2);
    font-family: var(--ds-font-mono, monospace);
    font-size: .78rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
}

.mew-texture-frame {
    display: grid;
    place-items: center;
    padding: .75rem;
    margin-bottom: .75rem;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius-sm);
    background:
        repeating-conic-gradient(#16161e 0 25%, #101018 0 50%) 50% / 20px 20px;
}

.mew-texture-frame img {
    max-width: 100%;
    max-height: 22rem;
    image-rendering: pixelated;
}

/* --- vector art ----------------------------------------------------------- */

/* The bin mewgenics.js injects the SVG sprite sheets into. They carry
   display:none themselves; this keeps a sheet that ever loses that attribute
   from pushing the page around. */
.mew-art-host {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.mew-art {
    display: block;
    width: 100%;
    height: 100%;
}

/* The same lit plate the card leads with. If the grid moves to a light tray
   and the hero here does not, opening a card contradicts the card you clicked. */
.mew-detail-plate {
    position: relative;
    display: grid;
    place-items: center;
    height: 168px;
    margin-bottom: 1rem;
    padding: 12px;
    border-radius: var(--mew-radius);
    background: linear-gradient(180deg, var(--mew-plate-top), var(--mew-plate-bottom));
    border-bottom: 2px solid var(--mew-plate-rule);
}

.mew-detail-plate[data-rarity="common"] {
    --mew-plate-top: #cdced9; --mew-plate-bottom: #a5a6b6;
    --mew-plate-rule: rgba(183, 183, 194, .55);
}
.mew-detail-plate[data-rarity="uncommon"] {
    --mew-plate-top: #dcf6e7; --mew-plate-bottom: #9ddcbc;
    --mew-plate-rule: var(--mew-uncommon);
}
.mew-detail-plate[data-rarity="rare"] {
    --mew-plate-top: #ddf0fd; --mew-plate-bottom: #9dd3f2;
    --mew-plate-rule: var(--mew-rare);
}
.mew-detail-plate[data-rarity="very_rare"] {
    --mew-plate-top: #f7e0fc; --mew-plate-bottom: #d9ade6;
    --mew-plate-rule: var(--mew-very-rare);
}
.mew-detail-plate[data-rarity="quest"] {
    --mew-plate-top: #fbecc7; --mew-plate-bottom: #ecc986;
    --mew-plate-rule: var(--mew-quest);
}

.mew-detail-plate .mew-plate-cat {
    font-size: 3rem;
}

.mew-detail-plate .mew-art {
    width: auto;
    height: 100%;
    max-width: 100%;
}

/* Event illustrations and map backgrounds are full scenes, up to 4489 x 1510
   units, so they take the panel width and derive their own height. */
.mew-detail-plate.is-wide {
    height: auto;
}

.mew-detail-plate.is-wide .mew-art {
    width: 100%;
    height: auto;
}

/* --- inline markup -------------------------------------------------------- */

.mew-inline-stat {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .05rem .35rem;
    border-radius: 5px;
    background: var(--mew-surface-4);
    color: var(--mew-accent-bright);
    font-size: .82em;
}

.mew-inline-cue {
    padding: .05rem .3rem;
    border: 1px dashed var(--mew-line-strong);
    border-radius: 5px;
    color: var(--mew-text-3);
    font-family: var(--ds-font-mono, monospace);
    font-size: .72em;
}

.mew-t-b {
    font-weight: 700;
}

.mew-t-i {
    font-style: italic;
}

/* --- export modal --------------------------------------------------------- */

.mew-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: rgba(5, 5, 8, .65);
}

.mew-modal {
    position: fixed;
    z-index: 75;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, 92vw);
    max-height: 86vh;
    overflow-y: auto;
    border: 1px solid var(--mew-line-strong);
    border-radius: var(--mew-radius-lg);
    background: var(--mew-surface-2);
    color: var(--mew-text);
    box-shadow: var(--ds-shadow-modal, 0 28px 80px rgba(0, 0, 0, .55));
}

.mew-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--mew-line);
}

.mew-modal-header>div>span {
    color: var(--mew-accent);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mew-modal-header h2 {
    margin: .25rem 0 0;
    font-size: 1.15rem;
    font-weight: 600;
}

.mew-modal-content {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
}

.mew-export-card {
    padding: 1rem;
    border: 1px solid var(--mew-line);
    border-radius: var(--mew-radius);
    background: var(--mew-surface-1);
}

.mew-export-card-primary {
    border-color: var(--mew-accent-line);
    background: var(--mew-accent-soft);
}

.mew-export-card-heading {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.mew-export-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--mew-radius-sm);
    background: var(--mew-surface-4);
    color: var(--mew-accent);
}

.mew-export-card-heading>div {
    flex: 1;
    min-width: 0;
}

.mew-export-kicker {
    color: var(--mew-text-3);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mew-export-card h3 {
    margin: .15rem 0 .3rem;
    font-size: 1rem;
    font-weight: 580;
}

.mew-export-card p {
    margin: 0;
    color: var(--mew-text-2);
    font-size: .84rem;
    line-height: 1.5;
}

.mew-export-count {
    flex: none;
    color: var(--mew-text-3);
    font-size: .78rem;
    text-align: right;
}

.mew-export-count strong {
    display: block;
    color: var(--mew-text);
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}

.mew-export-preview {
    max-height: 9rem;
    margin: .8rem 0 0;
    padding: .6rem .7rem;
    overflow: auto;
    border-radius: var(--mew-radius-sm);
    background: var(--ds-bg-code, #0e0e15);
    color: var(--mew-text-2);
    font-family: var(--ds-font-mono, monospace);
    font-size: .76rem;
    line-height: 1.5;
}

.mew-export-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .8rem;
}

.mew-export-actions>span {
    color: var(--mew-text-3);
    font-size: .78rem;
}

.mew-export-actions>div {
    display: flex;
    gap: .5rem;
}

.mew-export-actions-single {
    margin-top: .9rem;
}

/* --- toast ---------------------------------------------------------------- */

.mew-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 90;
    padding: .6rem 1rem;
    border: 1px solid var(--mew-line-strong);
    border-radius: 999px;
    background: var(--mew-surface-4);
    color: var(--mew-text);
    font-size: .85rem;
    opacity: 0;
    transform: translate(-50%, .5rem);
    pointer-events: none;
    transition: opacity 200ms var(--mew-ease), transform 200ms var(--mew-ease);
}

.mew-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {

    .mew-page *,
    .mew-modal *,
    .mew-toast {
        transition-duration: 1ms !important;
    }

    .mew-card:hover {
        transform: none;
    }
}
/* The table is the raw-data escape hatch and should not grow chrome, but rank
   was invisible there, so sorting by it had no visible result. One pip, taking
   the same token as the plate rule. */
.mew-table tr[data-rarity] td:first-child::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: .5rem;
    border-radius: 999px;
    background: var(--mew-plate-rule);
    vertical-align: middle;
}