/* The wiki (docs/WEBSITE.md "Wiki"): a reference book inside the site's dark world. Dense, quiet, fast to scan:
   a sticky section list on the left, working tables in the middle, an item's card on the right. Rarity is the only
   color beyond the site's own ember and amber. */
.wiki { --r1: #a39c8f; --r2: #7fa36a; --r3: #5d9bd6; --r4: #a879d8; --r5: #e0a33a; padding-block: 22px 90px; }
.wiki.wrap { max-width: 1480px; }
.wiki a { text-decoration: none; }
.wiki section { margin-top: 34px; }
.wiki h2 { font-size: clamp(22px, 2.4vw, 30px); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 16px; scroll-margin-top: 120px; }
.wiki h3 { font-family: var(--label); font-weight: 700; font-size: 15px; letter-spacing: .16em; color: var(--bone-dim); margin: 22px 0 10px; }
.wiki .k { font-family: var(--label); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--bone-dim); }
.wiki p a:not(.wchip), .wiki dd a:not(.wchip), .wiki td > a:not(.wname):not(.wchip), .wprose a { color: var(--amber); border-bottom: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); }
.wiki p a:not(.wchip):hover, .wiki dd a:not(.wchip):hover, .wprose a:hover { border-bottom-color: var(--amber); }
.wiki code { font-family: var(--mono); font-size: 13px; color: var(--bone-dim); background: var(--ground-3); padding: 2px 6px; }
.wiki kbd { font-family: var(--mono); font-size: 12.5px; padding: 1px 7px; border: 1px solid var(--line-2); border-bottom-width: 2px; background: var(--ground-3); color: var(--bone); white-space: nowrap; }
.wnote { color: var(--bone-dim); font-size: 14.5px; margin-bottom: 12px; }

/* top row: breadcrumb and search */
.wtop { display: flex; align-items: center; gap: 18px; justify-content: space-between; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.wcrumbs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-family: var(--label); font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.wcrumbs a { color: var(--bone-dim); }
.wcrumbs a:hover { color: var(--bone); }
.wcrumbs span { color: var(--bone); }
.wcrumbs i { font-style: normal; color: var(--ash); }
.wsearch { position: relative; flex: 1 1 320px; max-width: 520px; }
.wsearch input { width: 100%; background: var(--ground-2); border: 1px solid var(--line-2); color: var(--bone); font: 500 15.5px var(--body); padding: 11px 46px 11px 14px; }
.wsearch input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px color-mix(in srgb, var(--amber) 40%, transparent), 0 0 22px color-mix(in srgb, var(--amber) 18%, transparent); }
.wsearch > kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.wsearch input:focus ~ kbd, .wsearch input:not(:placeholder-shown) ~ kbd { display: none; }
.wmore { margin-top: 6px; }
.wmore summary { cursor: pointer; width: fit-content; padding: 5px 12px; border: 1px solid var(--line-2); font: 700 12.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); list-style: none; }
.wmore summary::-webkit-details-marker { display: none; }
.wmore summary:hover { color: var(--bone); border-color: var(--amber); }
.wmore[open] summary { margin-bottom: 6px; }
.wres { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); background: #0b0908; border: 1px solid var(--line-2); max-height: min(70vh, 560px); overflow-y: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .7); }
.wres a { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--bone); }
.wres a[aria-selected='true'], .wres a:hover { background: var(--ground-3); }
.wres img { width: 36px; height: 36px; object-fit: contain; }
.wres b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wres em { font: 700 11.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); font-style: normal; }
.wres .none { padding: 14px; color: var(--bone-dim); }

/* layout */
.wgrid { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 36px; align-items: start; margin-top: 22px; }
.wside { position: sticky; top: 116px; max-height: calc(100vh - 132px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ground-3) transparent; }
.wside-in { display: grid; gap: 1px; padding-right: 6px; }
.wside h4 { font: 700 11.5px var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--ash); margin: 18px 0 6px; }
.wside a { display: flex; justify-content: space-between; gap: 10px; padding: 5px 10px; font-size: 14.5px; color: var(--bone-dim); border-left: 2px solid transparent; }
.wside a:hover { color: var(--bone); background: var(--ground-2); }
.wside a[aria-current] { color: var(--bone); border-left-color: var(--ember); background: var(--ground-2); }
.wside em { font: 400 12px var(--mono); color: var(--ash); font-style: normal; }
@media (max-width: 980px) {
    .wgrid { grid-template-columns: minmax(0, 1fr); }
    .wside { position: static; max-height: none; order: 2; border-top: 1px solid var(--line); padding-top: 10px; }
    .wside-in { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
    .wside h4 { grid-column: 1 / -1; }
}

/* headings */
.whead { display: grid; gap: 8px; }
.whead h1 { font-size: clamp(34px, 5vw, 62px); }
.whead .lede { color: var(--bone-dim); max-width: 78ch; font-size: 17px; }
.whead.hub h1 { font-size: clamp(48px, 8vw, 104px); }
.wstats { display: flex; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 14px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.wstats div { background: var(--ground-2); padding: 12px 22px; display: grid; flex: 1 1 auto; }
.wstats b { font: 800 30px var(--display); }
.wstats span { font: 700 11.5px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }

/* tags and item chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-2); font: 600 13px var(--label); letter-spacing: .1em; text-transform: uppercase; color: var(--bone); background: var(--ground-2); }
.tag a { color: inherit; }
a.tag:hover { border-color: var(--amber); }
.tag.warn { border-color: color-mix(in srgb, var(--amber) 60%, transparent); color: var(--amber); }
.tag em { font-style: normal; color: var(--ash); font-family: var(--mono); font-weight: 400; }
.wchip { --rc: var(--r1); display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; background: var(--ground-2); border: 1px solid var(--line); border-left: 2px solid var(--rc); color: var(--bone); font-size: 14px; line-height: 1.2; transition: border-color .15s, background .15s; }
.wchip:hover { background: var(--ground-3); border-color: var(--rc); }
.wchip .ic { width: 30px; height: 30px; object-fit: contain; flex: none; }
.wchip .q { font: 400 13px var(--mono); color: var(--amber); }
.wchip .std { font: 700 10.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--ok); font-style: normal; }
.chips.sm .wchip { font-size: 13px; padding-right: 8px; }
.chips.sm .wchip .ic { width: 24px; height: 24px; }
.r1 { --rc: var(--r1); } .r2 { --rc: var(--r2); } .r3 { --rc: var(--r3); } .r4 { --rc: var(--r4); } .r5 { --rc: var(--r5); }
.rar { font: 700 12.5px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--rc); }

/* tables */
.wfilter { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.wfilter input { flex: 0 1 320px; background: var(--ground-2); border: 1px solid var(--line-2); color: var(--bone); font: 500 14.5px var(--body); padding: 8px 12px; }
.wfilter input:focus { outline: none; border-color: var(--amber); }
.wcount { font: 400 12.5px var(--mono); color: var(--ash); text-transform: uppercase; letter-spacing: .08em; }
.wtable-wrap { overflow-x: auto; border: 1px solid var(--line); scrollbar-width: thin; }
.wtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.wtable th { position: sticky; top: 0; background: #0b0908; text-align: left; padding: 0; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.wtable th button { all: unset; cursor: pointer; display: block; padding: 10px 12px; font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.wtable.plain th { padding: 10px 12px; font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); white-space: normal; }
.wtable th button:hover, .wtable th button:focus-visible { color: var(--bone); }
.wtable th[aria-sort='ascending'] button::after { content: ' \25B2'; color: var(--ember); font-size: 9px; }
.wtable th[aria-sort='descending'] button::after { content: ' \25BC'; color: var(--ember); font-size: 9px; }
.wtable td { padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wtable td:not(.num):not(:first-child) { min-width: 120px; }
.wtable tbody tr:hover { background: color-mix(in srgb, var(--ground-3) 70%, transparent); }
.wtable tbody tr:last-child td { border-bottom: 0; }
.wtable .num { text-align: right; font-family: var(--mono); font-size: 13.5px; white-space: nowrap; }
.wtable th.num button { text-align: right; }
.wname { --rc: var(--r1); display: inline-flex; align-items: center; gap: 10px; color: var(--bone); min-width: 180px; }
.wname .ic { width: 40px; height: 40px; object-fit: contain; flex: none; background: var(--ground-2); border-bottom: 2px solid var(--rc); }
.wname span { display: grid; line-height: 1.25; }
.wname b { font-weight: 600; }
.wname small { color: var(--bone-dim); font-size: 12.5px; }
a.wname:hover b { color: var(--amber); }
.wtable.recipes-t td { vertical-align: top; }

/* item page */
.witem { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; margin-top: 22px; }
.witem .wbody { order: 1; min-width: 0; }
.witem .wbody > :first-child { margin-top: 0; }
.wbox { --rc: var(--r1); order: 2; position: sticky; top: 116px; background: var(--ground-2); border: 1px solid var(--line); border-top: 3px solid var(--rc); }
.wbox-img { display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--rc) 22%, transparent), transparent 68%), #0b0908; border-bottom: 1px solid var(--line); }
.wbox-img img { width: min(100%, 256px); height: auto; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65)); }
.wbox h2 { font-size: 24px; padding: 14px 16px 12px; margin: 0; border-bottom: 1px solid var(--line); }
.wbox .wkv { padding: 6px 16px 12px; }
@media (max-width: 1180px) { .witem { grid-template-columns: minmax(0, 1fr); } .wbox { position: static; order: 0; max-width: 460px; } }
.wdesc { font-family: var(--type); font-size: 17px; line-height: 1.65; color: var(--bone); padding: 16px 18px; background: var(--ground-2); border-left: 3px solid var(--ember); }
.wkv { display: grid; margin: 0; }
.wkv > div { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
.wkv > div:last-child { border-bottom: 0; }
.wkv dt { font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.wkv dd { margin: 0; font-size: 15px; }
.wbody .wkv { max-width: 720px; }
.wbars { display: grid; gap: 9px; max-width: 720px; margin-bottom: 18px; }
.wbar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 130px; gap: 14px; align-items: center; }
.wbar span { font: 700 12px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.wbar i { height: 8px; background: var(--ground-3); display: block; }
.wbar b { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-deep), var(--ember)); }
.wbar em { font: 400 13.5px var(--mono); font-style: normal; text-align: right; }
@media (max-width: 560px) { .wbar { grid-template-columns: 96px minmax(0, 1fr) 84px; gap: 8px; } }
.ring { margin-top: 14px; display: grid; gap: 8px; }
.ring:first-child { margin-top: 0; }
.recipes { display: grid; gap: 14px; }
.recipe { border: 1px solid var(--line); background: var(--ground-2); padding: 14px 16px; }
.rneed { display: flex; flex-wrap: wrap; gap: 6px; }
.rmk { color: var(--bone-dim); margin-bottom: 8px; }
.rout { margin-bottom: 10px; }

/* tiles */
.wtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; padding: 1px; }
.wtile { outline: 1px solid var(--line); }
.wtile { position: relative; background: var(--ground-2); padding: 16px 18px; display: grid; gap: 4px; align-content: start; color: var(--bone); transition: background .15s; }
.wtile:hover { background: var(--ground-3); }
.wtile:hover b { color: var(--amber); }
.wtile b { font: 700 18px var(--label); letter-spacing: .08em; text-transform: uppercase; }
.wtile span { color: var(--bone-dim); font-size: 14px; line-height: 1.45; }
.wtile em { font: 400 12px var(--mono); color: var(--ash); font-style: normal; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.wtile.pic { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
.wtile.pic .tp { grid-row: 1 / span 3; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.wtoc { margin: 18px 0 0; }
.wgls { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 28px; }
.wgl { display: grid; gap: 4px; align-content: start; }
.wgl h3 { margin: 0 0 6px; }
.wgl a { color: var(--bone); font-size: 15px; padding: 2px 0; }
.wgl a:hover { color: var(--amber); }

/* guides */
.wguide { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 34px; align-items: start; margin-top: 24px; }
.wguide .wprose { order: 1; min-width: 0; max-width: 82ch; }
.wtocbox { order: 2; position: sticky; top: 116px; display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); background: var(--ground-2); }
.wtocbox a { color: var(--bone-dim); font-size: 14px; line-height: 1.35; }
.wtocbox a:hover { color: var(--amber); }
@media (max-width: 1180px) { .wguide { grid-template-columns: minmax(0, 1fr); } .wtocbox { position: static; order: 0; } }
.wprose > * + * { margin-top: 14px; }
.wprose h2 { margin-top: 34px; }
.wprose ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.wprose li::marker { color: var(--ember); }
.wprose strong { color: #fff; font-weight: 600; }
.wtip { padding: 12px 16px; border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--ground-2)); }
.wpn { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 44px; }
.wpn a, .wpn > span { background: var(--ground-2); padding: 14px 18px; display: grid; gap: 2px; color: var(--bone); }
.wpn a:hover b { color: var(--amber); }
.wpn a.n { text-align: right; }
.wpn span span, .wpn a span { font: 700 11.5px var(--label); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }
.wpn b { font: 700 17px var(--label); letter-spacing: .06em; text-transform: uppercase; }