/* Lore index (/lore), topic hubs (/topic/<slug>) and the topic chips on articles.
 * Calm, text-first and RTL-correct: logical properties only, the canonical tokens of assets/css/nx-tokens.css, one signal colour for actions.
 * No fonts, no external requests; portraits are lazy with explicit width and height. Loaded only by lore.php, topic.php and article.php (when a chip exists). */

.nxl{padding-block:var(--nx-sp-6,24px) var(--nx-sp-14,56px);color:var(--nx-text,#F2F4F6)}
.nxl .container{max-width:1120px}
:where(.nxl) a{color:inherit}
.nxl-crumbs{margin-block-end:var(--nx-sp-4,16px);font-size:var(--nx-fs-13,13px);color:var(--nx-text-3,#8A919A)}
.nxl-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.nxl-crumbs li+li::before{content:"/";margin-inline-end:6px;opacity:.5}
.nxl-crumbs a{text-decoration:none}
.nxl-crumbs a:hover{color:var(--nx-signal,#45F882)}

/* hero ------------------------------------------------------------------ */
.nxl-hero{display:flex;gap:var(--nx-sp-5,20px);align-items:flex-start;padding-block-end:var(--nx-sp-6,24px);border-block-end:1px solid var(--nx-line,#1F2D25);margin-block-end:var(--nx-sp-6,24px)}
.nxl-hero-copy{min-width:0;flex:1}
.nxl-eyebrow{margin:0 0 6px;font-size:var(--nx-fs-12,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--nx-signal,#45F882);font-weight:700}
html[lang="ar"] .nxl-eyebrow{letter-spacing:0;text-transform:none;font-size:var(--nx-fs-13,13px)}
.nxl h1{margin:0 0 var(--nx-sp-3,12px);font-size:clamp(28px,2.2vw + 20px,44px);line-height:1.1;overflow-wrap:anywhere}
.nxl-lead{margin:0 0 var(--nx-sp-4,16px);max-width:64ch;color:var(--nx-text-2,#B2B8BF);font-size:var(--nx-fs-16,16px);line-height:1.7}
.nxl-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 var(--nx-sp-4,16px)}
.nxl-chip{display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;border:1px solid var(--nx-line-strong,#2F4337);border-radius:var(--nx-r-pill,999px);background:var(--nx-s2,#131A16);color:var(--nx-text-2,#B2B8BF);font-size:var(--nx-fs-13,13px);text-decoration:none;transition:border-color .15s,color .15s}
.nxl-chip:hover,.nxl-chip:focus-visible{border-color:var(--nx-signal,#45F882);color:var(--nx-text,#F2F4F6)}
.nxl-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.nxl-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--nx-touch,44px);padding:0 18px;border:1px solid var(--nx-line-strong,#2F4337);border-radius:var(--nx-r-control,10px);background:transparent;color:var(--nx-text,#F2F4F6);font-weight:700;text-decoration:none;transition:border-color .15s,background-color .15s}
.nxl-btn:hover,.nxl-btn:focus-visible{border-color:var(--nx-signal,#45F882)}
.nxl-btn--primary{border-color:transparent;background:var(--nx-signal,#45F882);color:var(--nx-on-signal,#04140A)}
.nxl-btn--primary:hover,.nxl-btn--primary:focus-visible{background:var(--nx-signal-hover,#6BFF9C)}
.nxl :focus-visible{outline:2px solid var(--nx-signal-hover,#6BFF9C);outline-offset:2px}

/* portraits -------------------------------------------------------------- */
.nxl-portrait{flex:none;display:block;border-radius:var(--nx-r-card,14px);border:1px solid var(--nx-line-strong,#2F4337);background:var(--nx-s2,#131A16);object-fit:cover}
.nxl-portrait--lg{width:96px;height:96px}
.nxl-portrait--sm{width:56px;height:56px;border-radius:var(--nx-r-control,10px)}
.nxl-portrait--mono{display:grid;place-items:center;font:800 28px/1 var(--nx-font-display,inherit);color:var(--nx-signal,#45F882)}
.nxl-portrait--sm.nxl-portrait--mono{font-size:20px}

/* sections ---------------------------------------------------------------- */
.nxl-sec{margin-block:var(--nx-sp-8,32px)}
.nxl-sec h2{display:flex;align-items:center;gap:10px;margin:0 0 var(--nx-sp-4,16px);font-size:var(--nx-fs-24,24px);line-height:1.25}
.nxl-sec h2::before{content:"";flex:none;width:6px;height:18px;border-radius:2px;background:var(--nx-signal,#45F882)}
.nxl-note,.nxl-legal,.nxl-empty{color:var(--nx-text-3,#8A919A);font-size:var(--nx-fs-14,14px);line-height:1.6}
.nxl-note a,.nxl-legal a,.nxl-empty a{color:var(--nx-text-2,#B2B8BF);text-decoration:underline;text-underline-offset:3px}
.nxl-note a:hover,.nxl-legal a:hover,.nxl-empty a:hover{color:var(--nx-signal,#45F882)}
.nxl-legal{margin-block:var(--nx-sp-10,40px) 0;padding-block-start:var(--nx-sp-4,16px);border-block-start:1px solid var(--nx-line,#1F2D25);max-width:80ch}
.nxl-empty{padding:var(--nx-sp-5,20px);border:1px dashed var(--nx-line-strong,#2F4337);border-radius:var(--nx-r-card,14px)}

/* snapshot ---------------------------------------------------------------- */
.nxl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:0 0 var(--nx-sp-3,12px)}
.nxl-stats div{padding:12px 14px;border:1px solid var(--nx-line,#1F2D25);border-radius:var(--nx-r-card,14px);background:var(--nx-s1,#0D1210)}
.nxl-stats dt{margin:0 0 2px;font-size:var(--nx-fs-12,12px);color:var(--nx-text-3,#8A919A)}
.nxl-stats dd{margin:0;font-size:var(--nx-fs-20,20px);font-weight:700}

/* cards ------------------------------------------------------------------- */
.nxl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px}
.nxl-card{border:1px solid var(--nx-line,#1F2D25);border-radius:var(--nx-r-card,14px);background:var(--nx-s1,#0D1210);overflow:hidden;transition:border-color .15s,transform .15s}
.nxl-card-link{display:flex;flex-direction:column;height:100%;text-decoration:none}
.nxl-card-img{display:block;aspect-ratio:16/9;background:var(--nx-s2,#131A16);overflow:hidden}
.nxl-card-img img{display:block;width:100%;height:100%;object-fit:cover}
.nxl-card-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.nxl-kicker{font-size:var(--nx-fs-12,12px);letter-spacing:.08em;text-transform:uppercase;color:var(--nx-signal,#45F882);font-weight:700}
html[lang="ar"] .nxl-kicker{letter-spacing:0;text-transform:none}
.nxl-card-title{font-size:var(--nx-fs-16,16px);line-height:1.35;font-weight:700}
.nxl-card-ex{font-size:var(--nx-fs-14,14px);line-height:1.55;color:var(--nx-text-2,#B2B8BF)}
.nxl-card-date{font-size:var(--nx-fs-12,12px);color:var(--nx-text-3,#8A919A)}
@media (hover:hover){.nxl-card:hover{border-color:var(--nx-panel-line,rgba(69,248,130,.2));transform:translateY(-2px)}.nxl-card:hover .nxl-card-title{color:var(--nx-signal,#45F882)}}

/* related champions / store links ------------------------------------------ */
.nxl-related,.nxl-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.nxl-related a{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--nx-line,#1F2D25);border-radius:var(--nx-r-card,14px);background:var(--nx-s1,#0D1210);text-decoration:none;font-weight:600}
html[dir="rtl"] .nxl-related a,[dir="rtl"] .nxl-related a{padding:6px 6px 6px 14px}
.nxl-related a:hover{border-color:var(--nx-signal,#45F882)}
.nxl-links a{display:inline-flex;min-height:var(--nx-touch,44px);align-items:center;padding:0 16px;border:1px solid var(--nx-line,#1F2D25);border-radius:var(--nx-r-control,10px);background:var(--nx-s1,#0D1210);text-decoration:none}
.nxl-links a:hover{border-color:var(--nx-signal,#45F882)}

/* lore index: filter + tiles ------------------------------------------------ */
.nxl-filter{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-block-end:var(--nx-sp-4,16px)}
.nxl-filter input[type=search]{flex:1 1 220px;min-height:var(--nx-input-h,44px);padding:0 14px;border:1px solid var(--nx-field-line,rgba(69,248,130,.28));border-radius:var(--nx-r-control,10px);background:var(--nx-field,#0A0F0C);color:var(--nx-text,#F2F4F6);font:inherit}
.nxl-roles{display:flex;flex-wrap:wrap;gap:8px}
.nxl-role{min-height:36px;padding:0 14px;border:1px solid var(--nx-line-strong,#2F4337);border-radius:var(--nx-r-pill,999px);background:var(--nx-s2,#131A16);color:var(--nx-text-2,#B2B8BF);font:inherit;font-size:var(--nx-fs-13,13px);cursor:pointer}
.nxl-role.is-on,.nxl-role[aria-pressed="true"]{border-color:var(--nx-signal,#45F882);color:var(--nx-text,#F2F4F6);background:var(--nx-signal-tint,rgba(69,248,130,.1))}
.nxl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:12px}
.nxl-tile{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--nx-line,#1F2D25);border-radius:var(--nx-r-card,14px);background:var(--nx-s1,#0D1210);text-decoration:none;min-width:0}
.nxl-tile:hover{border-color:var(--nx-signal,#45F882)}
.nxl-tile[hidden]{display:none}
.nxl-tile-name{display:block;font-weight:700;line-height:1.25;overflow-wrap:break-word;word-break:normal}
.nxl-tile-sub{display:block;font-size:var(--nx-fs-12,12px);color:var(--nx-text-3,#8A919A)}
.nxl-tile>span:not(.nxl-portrait){display:flex;flex-direction:column;min-width:0}
.nxl-tile .nxl-tile-name+.nxl-tile-sub{margin-block-start:2px}

/* chips under an article's cover (article.php) ------------------------------- */
.nx-topic-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 var(--nx-sp-5,20px);padding:0}
.nx-topic-chips-label{font-size:var(--nx-fs-12,12px);color:var(--nx-text-3,#8A919A);margin-inline-end:2px}
.nx-topic-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border:1px solid var(--nx-line-strong,#2F4337);border-radius:var(--nx-r-pill,999px);background:var(--nx-s2,#131A16);color:var(--nx-text-2,#B2B8BF);font-size:var(--nx-fs-13,13px);text-decoration:none;transition:border-color .15s,color .15s}
.nx-topic-chip:hover,.nx-topic-chip:focus-visible{border-color:var(--nx-signal,#45F882);color:var(--nx-text,#F2F4F6)}
.nx-topic-chip small{font-size:11px;color:var(--nx-text-3,#8A919A)}
a.nx-entity-link{color:inherit;text-decoration:underline;text-decoration-color:var(--nx-signal,#45F882);text-decoration-thickness:1px;text-underline-offset:3px}
a.nx-entity-link:hover{color:var(--nx-signal,#45F882)}

@media (max-width:640px){
  .nxl-hero{flex-direction:column;gap:var(--nx-sp-4,16px)}
  .nxl-portrait--lg{width:80px;height:80px}
  .nxl-actions .nxl-btn{flex:1 1 100%}
  .nxl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.nxl-card,.nxl-chip,.nx-topic-chip,.nxl-btn{transition:none}.nxl-card:hover{transform:none}}