/* ==========================================================================
   The Burning Fire — the dusty path
   Outfitting on the left, hard-won perks on the right.
   ========================================================================== */

#outfitting {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-panel);
	width: 200px;
	margin-bottom: 22px;
	padding: 9px 12px 7px;
	box-sizing: content-box;
}

div#perks {
	position: absolute;
	top: 0;
	right: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg-panel);
	cursor: default;
	padding: 9px 12px 7px;
	width: 200px;
	box-sizing: content-box;
}

div#outfitting:before,
div#perks:before {
	content: attr(data-legend);
	position: absolute;
	top: -0.72em;
	left: 10px;
	padding: 0 7px;
	background: var(--bg);
	line-height: 1.4;
}

div#bagspace {
	position: absolute;
	top: -0.72em;
	right: 12px;
	padding: 0 7px;
	background: var(--bg);
	color: var(--ink-dim);
	font-family: var(--font-mono);
	font-size: var(--fs-micro);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}

div.outfitRow {
	position: relative;
	cursor: default;
	margin: 12px -30px 12px 0;
}

div.outfitRow > .row_val {
	padding-right: 32px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.outfitRow .tooltip { width: 150px; }

div.perkRow {
	position: relative;
	padding: 3px 0;
}

div.perkRow .row_key {
	float: none;
	color: var(--gold);
	font-style: italic;
}