/* pages.css: the few pieces the PAGES lane cards add on top of base.css (tokens only, no colour values).
   Recipe card, rarity swatch, effects table, lore groups, patch notes, phone menu row. */

/* rarity swatch: a square in the rarity colour (Epic shows only this, its text colour is under the contrast floor) */
.swatch {
  display: inline-block; width: 0.8em; height: 0.8em; margin-right: var(--sp-1); vertical-align: -0.05em;
  background: currentColor; border: var(--u) solid var(--c-line); box-sizing: border-box;
}
.recipe-card + .recipe-card { margin-top: var(--sp-4); }
.recipe-card .kv { margin: 0 0 var(--sp-3); }
.refs.ingr { list-style: none; padding: 0; margin: 0; }
.refs.ingr > li { margin: 0; }
table.recipe td, table.crafted td { vertical-align: top; }
.tag { font-size: var(--fs-s); color: var(--c-ink-soft); white-space: nowrap; }
.perks { padding-left: 1.2em; }
.perks strong { color: var(--c-title); }

/* lore: one folded window per group; the lines keep the game's capitals */
.lore-group { margin: 0 0 var(--sp-3); }
.lore-group > summary .n { color: var(--c-ink-soft); }
.lore-lines { padding-left: 1.2em; margin: 0 0 var(--sp-3); }
.lore-lines > li { margin: 0 0 var(--sp-1); }
.lore-name { color: var(--c-value); }

/* patch notes */
.patch-list { padding-left: 1.2em; }
.patch-list > li { margin: 0 0 var(--sp-2); }
.patch-meta { color: var(--c-ink-soft); font-size: var(--fs-s); }

/* phone: brand + search on one row (base.css), the menu as ONE row that scrolls sideways instead of three rows */
@media (max-width: 719px) {
  .site-head .site-nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-head .site-nav ul::-webkit-scrollbar { display: none; }
  .site-head .site-nav a { white-space: nowrap; }
}
@media (max-width: 719px) {
  /* menu row and language links share the second row: the menu takes the rest of the width and scrolls */
  .site-head .site-nav { flex: 1 1 calc(100% - 11rem); min-width: 0; }
  .site-head .langs { order: 3; flex: none; }
}

/* controls and realms pages: action list in columns, client messages in the game's capitals, quoted patch notes */
.actions-list { columns: 3 12rem; column-gap: var(--sp-4); padding-left: 2em; margin: 0 0 var(--sp-3); }
.actions-list > li { break-inside: avoid; margin: 0 0 var(--sp-1); }
.msgs { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.msgs > li { margin: 0 0 var(--sp-2); }
.msg { color: var(--c-value); }
.pn-list { padding-left: 1.2em; margin: 0 0 var(--sp-2); }
.pn-list > li { margin: 0 0 var(--sp-2); }
.pn-list .sub, .cite { color: var(--c-ink-soft); font-size: var(--fs-s); }
.pn-list .sub, .cite time { white-space: nowrap; }
.cite { margin: var(--sp-2) 0 0; }
table.keys th[scope="row"] { vertical-align: top; white-space: nowrap; }
table.keys .pn-list { margin: 0; }
table.keys kbd { font: inherit; color: var(--c-title); }

/* NPC speech: icon tiles (craft tabs, one per icon) and the icon lines; a group with no line left after a filter hides */
.sp-form > .card { flex: 1 1 100%; margin: 0; }
.sp-dict { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 40%), 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
/* the word in the body font: the pixel font is unreadable below its 24 px size, and 24 px words do not fit a tile */
.sp-tile, .sp-idle > li { font-family: var(--font-body); font-size: var(--fs-0); text-transform: none; text-shadow: none; -webkit-font-smoothing: auto; }
.sp-tile { justify-content: flex-start; text-align: left; min-width: 0; padding: var(--sp-1) var(--sp-2); }
.sp-tile .chip-n { margin-left: auto; }
.sp-tile .sp-w, .sp-idle .sp-w { min-width: 0; overflow-wrap: anywhere; }
.sp-idle > li { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); }
.sp-dict .ico, .sp-dict .spr, .sp-seq .ico, .sp-seq .spr { flex: none; object-fit: contain; image-rendering: pixelated; }
.sp-lines { list-style: none; padding: 0; margin: 0 0 var(--sp-3); }
.sp-lines > li { display: grid; grid-template-columns: 20rem 1fr; align-items: center; gap: var(--sp-1) var(--sp-3); padding: var(--sp-1) 0; border-bottom: var(--u) solid var(--c-line); }
@media (max-width: 719px) { .sp-lines > li { grid-template-columns: 1fr; } }
.sp-seq { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.sp-seq a { display: inline-flex; }
.sp-text { min-width: 0; }
.sp-group:not(:has(li[data-row]:not([hidden]))) { display: none; }
#sp-q { scroll-margin-top: var(--sp-4); }
#sp-lines > .card:not(:has(li[data-row]:not([hidden]))) { display: none; }

/* item looks: one row of model icons per rarity, each icon at its own 64 px square */
.looks-rar { margin: var(--sp-3) 0 var(--sp-2); }
.looks { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.looks > li { margin: 0; line-height: 0; }
.looks img.look { width: 64px; height: 64px; }