/*
 * wiki-legendary-armor.css — "Legendary Armor" showcase page sheet.
 * Layer 3 page CSS: composes shared ui-* controls (the search field is the
 * shared .ui-input; the sprite icons come from the `icon()` macro) and
 * consumes --ui-* tokens (defined in frontend-design-system.css) only.
 * Never restyles shared components; zero design debt per
 * docs/frontend_design_system.md. Structure and chip/stash styling mirror
 * the sibling sheets wiki-legendary-weapons.css / wiki-legendary-boxes.css.
 *
 * FROZEN CLASS CONTRACT (page prefix `ui-wiki-legendary-armor-`):
 *   page     ui-wiki-legendary-armor-page (body class; no styles needed)
 *   frame    ui-wiki-legendary-armor (the main.container hook; owns the
 *            container geometry because the legacy main.container width rule
 *            excludes [class*="ui-"] containers)
 *   header   -header, -title, -count (p#la-total[data-la-total]; the HTMX
 *            OOB copy replaces it in place — same element, same styles)
 *   hero     -hero, -hero-card, -hero-corner (--tl/--tr/--bl/--br),
 *            -hero-grid, -hero-main, -hero-headrow, -hero-badge, -hero-led,
 *            -hero-slug, -hero-kicker, -hero-title, -hero-caret, -hero-meta,
 *            -hero-side, -hero-gun (+ inner la-* svg part classes),
 *            -hero-chips, -hero-chip, -hero-marquee, -hero-marquee-track,
 *            -hero-marquee-group
 *   filters  -filters (#la-filters), -filters-row (--search modifier),
 *            -search (label wrapper around the shared .ui-input),
 *            -filters-group, -filters-tag, -filters-rail, -chips,
 *            -chip (+ .is-active), -chip-count
 *   rows     -rows (#la-rows), -section ([data-la-type]), -section-title,
 *            -section-count, -list, -empty
 *   row      -row (grid article, hairline-divider list item — no card boxes),
 *            -row-index (catalog numbering), -media ([data-la-media]; the
 *            service SVG has NO width/height attributes, so this sheet sizes
 *            [data-la-media] svg; the same slot accepts a future <img> per
 *            plan D6 without layout change),
 *            -name (name cell wrapper), -row-name (a),
 *            -row-effect (effect zone: description paragraphs +
 *            wrapping stat pairs, pre-split by the service; own cell
 *            on desktop / full-width line on mobile),
 *            -row-desc (description paragraph with diamond marker),
 *            -row-stats (+ --after-descs modifier), -row-stat
 *            (one label/value pair: muted mono label + strong value),
 *            -row-side (level badge + stash cluster; mobile line 2, desktop
 *            right-aligned), -row-level (mono level pill),
 *            -stash ([data-la-stash-slot]), -stash-chip (+ .is-empty),
 *            -stash-count, -stash-craft
 *   states   is-active (filter chips), is-empty (zero-quantity stash chip)
 *
 * LAYOUT (plan D5/R4 — ONE ITEM PER ROW): desktop >=768px renders each row as
 * a single-line grid `index | media | name | effect | side`, rows separated by hairline
 * dividers instead of card surfaces (no card-in-card framing). Mobile-first
 * base (<768px, composed at 320px per rule 3.17.1) stacks the row: line 1
 * media + name (+ wrapped meta line), line 2 the stash chips — exactly one
 * 16px outer gutter (--ui-space-4), chips wrap, interactive chips and the
 * name link are >=44px touch targets, nothing is clipped or hidden.
 *
 * COLOR DISCIPLINE: only token variables for color/radius/typography/spacing;
 * the active chip wash is the accent-soft state, not a second button variant.
 * Motion is limited to the design-system hover background/color transitions
 * (never the blanket transition shorthand), all suppressed under
 * prefers-reduced-motion.
 */

/* ---------- page frame ---------- */

.ui-wiki-legendary-armor {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--ui-space-6) var(--ui-space-4) var(--ui-space-12);
    display: grid;
    gap: var(--ui-space-6);
    min-width: 0;
}

/* ---------- compact header (legacy: OOB count target only) ---------- */

.ui-wiki-legendary-armor-count {
    margin: 0;
    color: var(--ui-text-secondary);
    font: 600 0.8125rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---------- hero (ax3-style showcase card) ---------- */

.ui-wiki-legendary-armor-hero {
    min-width: 0;
}

.ui-wiki-legendary-armor-hero-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-surface);
    background:
        radial-gradient(460px 240px at 86% -10%, var(--ui-brand-signal-soft), transparent 70%),
        linear-gradient(
            150deg,
            color-mix(in oklch, var(--ui-accent) 14%, transparent),
            var(--ui-bg-surface) 48%,
            color-mix(in oklch, var(--ui-brand-signal) 7%, transparent)
        );
    box-shadow: var(--ui-shadow-panel);
}

/* HUD corner brackets */
.ui-wiki-legendary-armor-hero-corner {
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    border: 2px solid var(--ui-brand-signal);
    opacity: 0.75;
    pointer-events: none;
}

.ui-wiki-legendary-armor-hero-corner--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.ui-wiki-legendary-armor-hero-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.ui-wiki-legendary-armor-hero-corner--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.ui-wiki-legendary-armor-hero-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.ui-wiki-legendary-armor-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--ui-space-4);
    align-items: center;
    padding: var(--ui-space-8) var(--ui-space-6) 0;
}

/* --- left column --- */

.ui-wiki-legendary-armor-hero-headrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-4);
}

.ui-wiki-legendary-armor-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid color-mix(in oklch, var(--ui-brand-signal) 40%, transparent);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-brand-signal-soft);
    color: var(--ui-brand-signal);
    font: 800 0.625rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ui-wiki-legendary-armor-hero-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ui-brand-signal);
    box-shadow: 0 0 10px var(--ui-brand-signal);
    animation: la-hero-led 1.6s ease-in-out infinite;
}

.ui-wiki-legendary-armor-hero-slug {
    padding: 5px 11px;
    border: 1px dashed var(--ui-border-default);
    border-radius: var(--ui-radius-pill);
    color: var(--ui-text-muted);
    font: 600 0.64rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ui-wiki-legendary-armor-hero-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--ui-space-2);
    color: var(--ui-brand-signal);
    font: 800 0.74rem/1.2 "Onest", system-ui, sans-serif;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.ui-wiki-legendary-armor-hero-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--ui-brand-signal);
}

.ui-wiki-legendary-armor-hero-title {
    margin: 0 0 var(--ui-space-2);
    min-height: 1.15em;
    color: var(--ui-text-primary);
    font: 700 clamp(1.5rem, 2.9vw, 2.3rem)/1.1 "Onest", system-ui, sans-serif;
    letter-spacing: -0.02em;
}

.ui-wiki-legendary-armor-hero-title em {
    font-style: normal;
    background: linear-gradient(100deg, var(--ui-brand-signal), #fff 45%, var(--ui-brand-signal));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: la-hero-shimmer 4s linear infinite;
}

.ui-wiki-legendary-armor-hero-caret {
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: 4px;
    vertical-align: -0.1em;
    background: var(--ui-brand-signal);
    box-shadow: 0 0 14px var(--ui-brand-signal-soft);
    animation: la-hero-blink 1s steps(2) infinite;
}

.ui-wiki-legendary-armor-hero-meta {
    margin: 0;
    max-width: 46ch;
    color: var(--ui-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* --- right column: animated legendary lock-on emblem --- */

.ui-wiki-legendary-armor-hero-side {
    display: grid;
    place-items: center;
    min-width: 0;
}

.ui-wiki-legendary-armor-hero-gun {
    width: min(100%, 340px);
    height: auto;
}

/* SVG paint: token-driven stops and parts */
.la-stop-star-a { stop-color: var(--ui-brand-signal); }
/* Mix toward black (not the blue canvas) so the gradient darkens the yellow
   without sweeping the oklch hue through green. */
.la-stop-star-b { stop-color: color-mix(in oklch, var(--ui-brand-signal) 62%, black); }
.la-stop-halo-a { stop-color: color-mix(in oklch, var(--ui-brand-signal) 40%, transparent); }
.la-stop-halo-b { stop-color: transparent; }

.la-ticks line {
    stroke: var(--ui-text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.6;
}

.la-ring-tick {
    stroke: var(--ui-text-muted);
    stroke-width: 1.2;
    opacity: 0.35;
}

.la-arc { transform-box: view-box; transform-origin: 180px 110px; }
.la-arc--a { animation: la-hero-spin 22s linear infinite; }
.la-arc--b { animation: la-hero-spin 15s linear infinite reverse; }
.la-arc--inner { animation: la-hero-spin 30s linear infinite; }

.la-arc circle {
    stroke: var(--ui-brand-signal);
    opacity: 0.55;
}

.la-arc--inner circle { stroke: var(--ui-text-muted); opacity: 0.4; }

.la-sat { transform-box: view-box; transform-origin: 180px 110px; }
.la-sat--a { animation: la-hero-spin 10s linear infinite; }
.la-sat--b { animation: la-hero-spin 16s linear infinite reverse; }
.la-sat-dot-a { fill: var(--ui-brand-signal); }
.la-sat-dot-b { fill: var(--ui-accent); }

.la-core-glow {
    transform-box: fill-box;
    transform-origin: center;
    animation: la-hero-core 3s ease-in-out infinite;
}

.la-star { fill: url(#la-hero-star); }

.la-bracket path {
    stroke: var(--ui-brand-signal);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.75;
    animation: la-hero-lock 3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes la-hero-spin { to { transform: rotate(360deg); } }
@keyframes la-hero-core { 0%, 100% { opacity: 0.5; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes la-hero-lock { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }
@keyframes la-hero-led { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes la-hero-shimmer { to { background-position: 200% 0; } }
@keyframes la-hero-blink { 50% { opacity: 0; } }

/* --- bottom stat chips --- */

.ui-wiki-legendary-armor-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-6);
    padding: var(--ui-space-4) var(--ui-space-6);
    border-top: 1px solid var(--ui-border-subtle);
}

.ui-wiki-legendary-armor-hero-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ui-space-2);
    padding: 7px 14px;
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-pill);
    background: color-mix(in oklch, var(--ui-bg-raised) 40%, transparent);
    color: var(--ui-text-secondary);
    font: 600 0.72rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.04em;
}

.ui-wiki-legendary-armor-hero-chip b {
    color: var(--ui-brand-signal);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* The OOB-refreshed result count lives inside a hero chip: keep the p
   inline and quiet here (the HTMX copy carries the same class). */
.ui-wiki-legendary-armor-hero-chip .ui-wiki-legendary-armor-count {
    margin: 0;
    color: var(--ui-brand-signal);
    font: 700 0.72rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* --- bottom marquee --- */

.ui-wiki-legendary-armor-hero-marquee {
    overflow: hidden;
    border-top: 1px solid var(--ui-border-subtle);
    background: color-mix(in oklch, var(--ui-accent) 5%, transparent);
}

.ui-wiki-legendary-armor-hero-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: la-hero-slide 30s linear infinite;
}

.ui-wiki-legendary-armor-hero-marquee-group {
    display: inline-flex;
    align-items: center;
}

.ui-wiki-legendary-armor-hero-marquee-group > span {
    padding: 10px 0 10px 28px;
    color: var(--ui-text-muted);
    font: 600 0.68rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ui-wiki-legendary-armor-hero-marquee-group > span::after {
    content: "◆";
    margin-left: 28px;
    color: var(--ui-brand-signal);
    font-size: 0.7em;
}

@keyframes la-hero-slide { to { transform: translateX(-25%); } }

@media (hover: hover) {
    .ui-wiki-legendary-armor-hero-marquee:hover .ui-wiki-legendary-armor-hero-marquee-track {
        animation-play-state: paused;
    }
}

/* ---------- hero responsive ---------- */

@media (max-width: 899px) {
    .ui-wiki-legendary-armor-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--ui-space-2);
        padding: var(--ui-space-6) var(--ui-space-4) 0;
    }

    .ui-wiki-legendary-armor-hero-side { order: -1; }

    .ui-wiki-legendary-armor-hero-gun { width: min(72%, 300px); }

    .ui-wiki-legendary-armor-hero-chips {
        padding-inline: var(--ui-space-4);
    }
}



/* ---------- filters (boxes chip-toolbar pattern) ---------- */

.ui-wiki-legendary-armor-filters {
    display: grid;
    gap: var(--ui-space-4);
    min-width: 0;
}

.ui-wiki-legendary-armor-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2) var(--ui-space-6);
    min-width: 0;
}

.ui-wiki-legendary-armor-filters-row--search {
    display: grid;
}

/* Label wrapper for the shared .ui-input; the input itself is never
   restyled here. */
.ui-wiki-legendary-armor-search {
    display: block;
    min-width: 0;
}

.ui-wiki-legendary-armor-filters-group {
    display: grid;
    gap: var(--ui-space-2);
    min-width: 0;
}

/* Compact mono tag introducing each chip group. Sits above its chips on
   mobile (labeled chip blocks), inline before them from 768px up. */
.ui-wiki-legendary-armor-filters-tag {
    color: var(--ui-text-muted);
    font: 700 0.625rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ui-wiki-legendary-armor-filters-rail {
    display: flex;
    min-width: 0;
}

.ui-wiki-legendary-armor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--ui-space-2) - 2px);
    min-width: 0;
}

.ui-wiki-legendary-armor-chip {
    min-height: var(--ui-control-touch);
    min-width: var(--ui-control-touch);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-2);
    max-width: 100%;
    padding: 0 var(--ui-space-3);
    border: 1px solid var(--ui-border-default);
    border-radius: var(--ui-radius-control);
    background: color-mix(in oklch, var(--ui-bg-raised) 38%, transparent);
    color: var(--ui-text-secondary);
    font: 650 0.8125rem/1.2 "Onest", system-ui, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--ui-duration-fast) ease,
        background-color var(--ui-duration-fast) ease,
        border-color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-armor-chip:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 3px;
}

.ui-wiki-legendary-armor-chip.is-active {
    border-color: color-mix(in oklch, var(--ui-accent) 42%, transparent);
    background: var(--ui-accent-soft);
    color: var(--ui-text-primary);
}

/* Plain count inside a chip: just the number, no badge chrome. */
.ui-wiki-legendary-armor-chip-count {
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- rows (one item per row, hairline dividers) ---------- */

.ui-wiki-legendary-armor-rows {
    display: grid;
    gap: var(--ui-space-8);
    min-width: 0;
}

.ui-wiki-legendary-armor-section {
    display: grid;
    gap: var(--ui-space-2);
    min-width: 0;
}

/* Section header: mono kicker + count + trailing hairline. */
.ui-wiki-legendary-armor-section-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-3);
    margin: 0;
    color: var(--ui-text-muted);
    font: 700 0.75rem/1.3 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ui-wiki-legendary-armor-section-count {
    min-width: 22px;
    padding: 1px 7px;
    border: 1px solid var(--ui-border-subtle);
    border-radius: var(--ui-radius-pill);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Trailing hairline after the header labels the section without a box. */
.ui-wiki-legendary-armor-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--ui-border-subtle), transparent);
}

.ui-wiki-legendary-armor-list {
    display: grid;
    min-width: 0;
}

.ui-wiki-legendary-armor-empty {
    margin: 0;
    padding: var(--ui-space-8) var(--ui-space-4);
    color: var(--ui-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: center;
}

/* ---------- row (stacked mobile-first; single-line grid from 768px) ---------- */

.ui-wiki-legendary-armor-row {
    position: relative;
    display: grid;
    grid-template-columns: auto var(--ui-space-12) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--ui-space-3);
    row-gap: var(--ui-space-2);
    min-width: 0;
    padding: var(--ui-space-3) var(--ui-space-2);
    border-radius: var(--ui-radius-control);
}

/* Hairline divider between rows — the list rhythm, no card boxes. */
.ui-wiki-legendary-armor-row + .ui-wiki-legendary-armor-row {
    border-top: 1px solid var(--ui-border-subtle);
}

/* Accent bar sliding in on hover — the row's "legend is live" affordance. */
.ui-wiki-legendary-armor-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 2px;
    border-radius: 2px;
    background: var(--ui-brand-signal);
    opacity: 0;
    transform: scaleY(0.4);
    transition:
        opacity var(--ui-duration-fast) ease,
        transform var(--ui-duration-fast) var(--ui-ease-out);
}

/* Row index: quiet catalog numbering inside its own column,
   top-aligned with the name cell. */
.ui-wiki-legendary-armor-row-index {
    align-self: start;
    padding-top: var(--ui-space-3);
    color: var(--ui-text-muted);
    font: 600 0.6875rem/1 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
    min-width: 2ch;
    text-align: right;
}

/* Media slot (D6): fixed square so the future <img> swap needs no layout
   change. The subtle token surface keeps light and dark SVGs readable on
   the dark canvas. */
.ui-wiki-legendary-armor-media {
    display: grid;
    place-items: center;
    width: var(--ui-space-12);
    height: var(--ui-space-12);
    overflow: hidden;
    border: 1px solid var(--ui-border-subtle);
    border-radius: var(--ui-radius-control);
    background: var(--ui-bg-subtle);
    color: var(--ui-text-secondary);
    transition: border-color var(--ui-duration-fast) ease;
}

/* The service SVG carries no width/height attributes — size it here. */
.ui-wiki-legendary-armor-media svg {
    width: 100%;
    height: 100%;
    padding: 4px;
    transition: transform var(--ui-duration-standard) var(--ui-ease-out);
}

/* Future per-item screenshots land inside the same slot (D6). */
.ui-wiki-legendary-armor-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Name cell: the display-name link (the section header already carries the
   armor-type context — no per-row type label). */
.ui-wiki-legendary-armor-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.ui-wiki-legendary-armor-row-name {
    display: inline-flex;
    align-items: center;
    min-height: var(--ui-control-touch);
    min-width: 0;
    color: var(--ui-text-primary);
    font: 650 0.9375rem/1.3 "Onest", system-ui, sans-serif;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: color var(--ui-duration-fast) ease;
}

.ui-wiki-legendary-armor-row-name:hover,
.ui-wiki-legendary-armor-row-name:focus-visible {
    color: var(--ui-brand-signal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ui-wiki-legendary-armor-row-name:focus-visible {
    outline: 2px solid var(--ui-focus);
    outline-offset: 2px;
}

/* Side cluster: level badge first (guests see it too), stash chips after.
   Its own line on mobile, right-aligned cell on desktop. */
.ui-wiki-legendary-armor-row-side {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
}

/* Stash chips live inside the row-side cluster (placement) — this rule only
   lays the chips out. */
.ui-wiki-legendary-armor-stash {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
}

/* Level badge: mono pill, the whole "Lvl N+" string in the brand signal —
   the row's scannable stat on the right. */
.ui-wiki-legendary-armor-row-level {
    display: inline-flex;
    align-items: baseline;
    padding: 4px 10px;
    border: 1px solid color-mix(in oklch, var(--ui-brand-signal) 30%, transparent);
    border-radius: var(--ui-radius-pill);
    background: var(--ui-brand-signal-soft);
    white-space: nowrap;
}

.ui-wiki-legendary-armor-row-level b {
    color: var(--ui-brand-signal);
    font: 700 0.6875rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

/* Effect zone: descriptions first (plain paragraphs with a diamond
   marker — the generic "Эффект"/"Effect" kicker carries no information
   and is never rendered), then named stats as a wrapping pair row.
   Mobile: full-width second line, flat (no card frame per Flat Mode).
   Desktop: its own grid cell right of the name. Either group may be
   absent; word breaking is word-aware (`break-word`, never `anywhere`)
   so labels never split per letter. */
.ui-wiki-legendary-armor-row-effect {
    grid-column: 1 / -1;
    display: grid;
    align-content: start;
    gap: var(--ui-space-2);
    min-width: 0;
    margin: 0;
    padding: var(--ui-space-2);
    border-top: 1px dashed var(--ui-border-subtle);
}

/* Description paragraph: the mechanic in plain words. */
.ui-wiki-legendary-armor-row-desc {
    display: flex;
    gap: var(--ui-space-2);
    min-width: 0;
    margin: 0;
    color: var(--ui-text-primary);
    font: 500 0.8125rem/1.5 "Onest", system-ui, sans-serif;
    overflow-wrap: break-word;
    word-break: normal;
}

.ui-wiki-legendary-armor-row-desc::before {
    content: "◆";
    flex: 0 0 auto;
    padding-top: 4px;
    color: var(--ui-brand-signal);
    font-size: 0.625rem;
    line-height: 1;
}

/* Named stats: a wrapping row of compact label/value pairs — three short
   stats fit one line instead of three tall stacked blocks. */
.ui-wiki-legendary-armor-row-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1) var(--ui-space-4);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ui-wiki-legendary-armor-row-stats--after-descs {
    padding-top: var(--ui-space-2);
    border-top: 1px solid var(--ui-border-subtle);
}

.ui-wiki-legendary-armor-row-stat {
    display: inline-flex;
    align-items: baseline;
    gap: var(--ui-space-2);
    min-width: 0;
}

.ui-wiki-legendary-armor-row-stat span {
    color: var(--ui-text-muted);
    font: 700 0.625rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-break: normal;
}

.ui-wiki-legendary-armor-row-stat b {
    color: var(--ui-text-primary);
    font: 650 0.8125rem/1.4 "Onest", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
    word-break: normal;
}

/* --- own-stash platform chips (boxes precedent) --- */

.ui-wiki-legendary-armor-stash-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: var(--ui-radius-pill);
    background: var(--ui-bg-subtle);
    color: var(--ui-text-secondary);
    font: 600 0.75rem/1.2 "Onest", system-ui, sans-serif;
    white-space: nowrap;
}

.ui-wiki-legendary-armor-stash-chip .ui-icon {
    flex: 0 0 auto;
    color: var(--ui-text-muted);
}

.ui-wiki-legendary-armor-stash-count {
    color: var(--ui-accent);
    font: 700 0.6875rem/1 "IBM Plex Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

/* ×0 line: dimmed (out of stock parity with the stash page). */
.ui-wiki-legendary-armor-stash-chip.is-empty {
    opacity: 0.55;
}

.ui-wiki-legendary-armor-stash-chip.is-empty .ui-wiki-legendary-armor-stash-count {
    color: var(--ui-text-muted);
}

.ui-wiki-legendary-armor-stash-craft {
    display: inline-flex;
    align-items: center;
    color: var(--ui-text-muted);
}

/* ---------- >=768px: tablet — single-line row, 2-line description ---------- */

@media (min-width: 768px) {
    .ui-wiki-legendary-armor {
        padding-inline: var(--ui-space-6);
    }

    /* Labeled groups sit inline: tag then chips on one wrapping row. */
    .ui-wiki-legendary-armor-filters-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--ui-space-2) var(--ui-space-3);
    }

    .ui-wiki-legendary-armor-chip {
        min-height: 36px;
        min-width: 0;
        padding: 0 8px;
    }

    /* Single-line row: index | media | name | effect | level+stash.
       Effect takes the larger share (long RU descriptions) while the
       name column stays compact (short display names). */
    .ui-wiki-legendary-armor-row {
        grid-template-columns:
            auto
            var(--ui-space-12)
            minmax(0, 0.85fr)
            minmax(0, 1.35fr)
            auto;
        column-gap: var(--ui-space-4);
        padding-block: var(--ui-space-2);
    }

    .ui-wiki-legendary-armor-row-name {
        display: inline;
        min-height: 0;
    }

    /* Effect is the fourth cell on desktop: no top divider, left hairline
       separates it from the name, compact padding. */
    .ui-wiki-legendary-armor-row-effect {
        grid-column: auto;
        align-content: start;
        padding: var(--ui-space-1) 0 var(--ui-space-1) var(--ui-space-4);
        border-top: 0;
        border-left: 1px solid var(--ui-border-subtle);
    }

    .ui-wiki-legendary-armor-row-side {
        grid-column: auto;
        justify-content: flex-end;
    }
}

/* ---------- hover affordances (fine pointers only) ---------- */

@media (hover: hover) and (pointer: fine) {
    /* Quiet row wash + accent bar + icon lift on hover. */
    .ui-wiki-legendary-armor-row:hover {
        background: color-mix(in oklch, var(--ui-bg-subtle) 70%, transparent);
    }

    .ui-wiki-legendary-armor-row:hover::before {
        opacity: 1;
        transform: none;
    }

    .ui-wiki-legendary-armor-row:hover .ui-wiki-legendary-armor-media {
        border-color: color-mix(in oklch, var(--ui-brand-signal) 35%, var(--ui-border-subtle));
    }

    .ui-wiki-legendary-armor-row:hover .ui-wiki-legendary-armor-media svg {
        transform: scale(1.08);
    }

    .ui-wiki-legendary-armor-chip:hover {
        border-color: var(--ui-border-strong);
        background: color-mix(in oklch, var(--ui-bg-raised) 58%, transparent);
        color: var(--ui-text-primary);
    }

    .ui-wiki-legendary-armor-chip.is-active:hover {
        border-color: color-mix(in oklch, var(--ui-accent) 60%, transparent);
        background: var(--ui-accent-soft);
        color: var(--ui-text-primary);
    }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    .ui-wiki-legendary-armor-row,
    .ui-wiki-legendary-armor-row::before,
    .ui-wiki-legendary-armor-media,
    .ui-wiki-legendary-armor-media svg,
    .ui-wiki-legendary-armor-row-name,
    .ui-wiki-legendary-armor-chip {
        transition: none;
    }

    .ui-wiki-legendary-armor-hero-led,
    .ui-wiki-legendary-armor-hero-title em,
    .ui-wiki-legendary-armor-hero-caret,
    .la-arc,
    .la-sat,
    .la-core-glow,
    .la-bracket path,
    .ui-wiki-legendary-armor-hero-marquee-track {
        animation: none;
    }
}