/* ***** CSS Reset ***** */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
	margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
	line-height: 1.1;
}

/* TODO: (Lance) Fix - Causing issues with icon being wrapped to next line on header */
/* Balance text wrapping on headings */
/* h1, h2,
h3, h4 {
	text-wrap: balance;
} */

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
	font-family: inherit;
	font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}










:root {
	--border-radius: 0.25rem;
	--border-radius_large: 0.5rem;
	--item-gap: 0.25rem;
	--item-gap_large: 0.5rem;

	--primary: darkgreen;
	--highlight: white;
	--row-color: #efefef;
	--endcap-color: lightgray;
}

body {
	margin: 0;
}

nav {
	display: flex;
	align-items: center;
	height: 2em;
	margin: 0;
	padding: 0 1em;
	color: white;
	background: green;
}

nav a {
	display: flex;
	align-items: center;
	height: 2em;
	padding: 0 1em;
	border-inline: 1px solid white;
	text-decoration: none;
	/* color: white; */
}

nav a:hover {
	color: green;
	background: white;
}

main {
	max-width: 110ch;
	padding: 0 1em;
	margin: 0 auto;
	/* inset: 0; */
}

/* main > * {
	flex-grow: 1;
} */

h1 {
	padding: 1em;
	text-align: center;
}

h2 {
	position: relative;
	margin-block-start: 2em;
	text-align: center;
	border-block-end: 1px solid black;
}

button {
	cursor: pointer;
}

dialog {
	width: 80ch;
	border-radius: var(--border-radius_large);
}

dialog form {
	display: grid;
	grid-template-columns: auto 2fr;
	column-gap: 1em;
	row-gap: 0.5em;
}

dialog h4 {
	grid-column-start: span 2;
	margin-block-start: 0;
	margin-block-end: 2rem;
	font-size: 1.25em;
	text-align: center;
}

.dialog__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid black;
	border-end-start-radius: 0.5em;
	color: white;
	background: black;
}

.dialog__submit {
	grid-column-start: span 2;
	width: 100%;
	height: 2.5rem;
	margin-block-start: 1em;
	border: 1px solid black;
	border-radius: var(--border-radius);
	color: white;
	background: black;
}

.dialog__close:hover,
.dialog__submit:hover {
	border: 1px solid darkgray;
	color: black;
	background: darkgray;
}

#stats {
	/* display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; */
	position: sticky;
	top: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--item-gap_large);
	justify-content: center;
	padding: 1rem 0;
	border-bottom-left-radius: 20%;
	border-bottom-right-radius: 20%;
	background: white;
	z-index: 10;
}

#stats div {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.5em;
	border: 1px solid #ccc;
	border-radius: var(--border-radius_large);
	align-items: center;
}

#stats div button {
	font-size: 1em;
}

#wp.no_wp {
	animation: noWP 2s linear 2;
	animation-direction: alternate;
}

@keyframes noWP {
  0% {
    background-color: white;
  }
  100% {
    background-color: red;
  }
}

#attributes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 2em 0;
}

#attributes input {
	display: none;
}

#attributes input:checked + label {
	color: black;
	background: orange;
}

/* #attributes input:checked + label:hover {
	background: orangered;
} */

#attributes label {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1em;
	border-radius: var(--border-radius_large);
	text-align: center;
	color: white;
	background: darkgreen;
	transition: 0.25s;
}

#attributes label > :nth-child(2) {
	font-size: 2em;
}

#attributes label > :last-child {
	margin-block-start: 1em;
}

/* #attributes label:hover {
	color: black;
	background: lightgreen;
} */

.attribute__tag {
	font-size: 0.5em;
	color: #666;
}

#skills .bane,
#skills .bane button,
#skills .armor_bane,
#skills .armor_bane button {
	background: orange;
}

#skills .bane .attribute__tag {
	color: black;
}

#skills .bane:is(.armor_bane),
#skills .bane:is(.armor_bane) button {
	background: red;
}

#skills .armor_bane .attribute__tag {
	color: white;
}

#skills {
	display: flex;
	column-gap: 0.5em;
	flex-wrap: wrap;
}

#skills button {
	border: none;
	font-size: 2em;
	font-weight: lighter;
}

#skills div {
	flex-grow: 1;
}

#skills div div {
	display: grid;
	grid-template-columns: 5ch 1fr 4em;
	gap: 1em;
	align-items: center;
	margin: var(--item-gap) 0;
	/* padding: 1em; */
	border-radius: var(--border-radius);
	background: #efefef;
	transition: 0.5s;
	overflow: hidden;
}

#skills div div > :nth-child(2) {
	padding: 1em 0;
}

#skills .edit {
	height: 100%;
}

#skills input {
	margin: auto;
}

#weapons {
	margin-block-start: 1em;
}

#weapons div,
#spells div {
	margin: var(--item-gap_large) 0;
	display: grid;
	grid-template-columns: 10ch repeat(2, 1fr) 5ch;
	gap:0.5em;
	padding: 1em;
	border-radius: var(--border-radius);
	background: #efefef;
	overflow: hidden;
}

#spells div {
	grid-template-columns: 10ch 1fr 1fr 5ch;
}

/* Skill Level */
#weapons div > :first-child,
#spells div > :first-child {
	grid-row-start: span 2;
	display: flex;
	justify-content: center;
	align-items: center;
	background: lightgray;
	margin: -1rem 0 -1rem -1rem;
	font-size: 2em;
}

#weapons div > :first-child {
	grid-row-start: span 1;
}

#spells div > :first-child {
	grid-row-start: span 2;
}

/* Name */
#weapons div > :nth-child(2) {
	grid-column-start: span 2;
	font-weight: bold;
}
#spells div > :nth-child(2) {
	grid-column-start: span 2;
}

/* Edit */
#weapons div > :nth-child(3),
#spells div > :nth-child(3) {
	grid-row-start: span 3;
	margin: -1rem;
}

/* Damage / WP */
#spells div > :nth-child(6),
#weapons div > :nth-child(4),
#weapons div > :nth-child(7) {
	display: flex;
	justify-content: center;
	align-items: center;
	background: lightgray;
	margin: 0 0 -1rem -1rem;
}

/* Features / Requirements */
#weapons div > :last-child {
	grid-column-start: span 2;
}

#spells div > :last-child {
	grid-column-start: span 2;
}

.weapons__broken,
.spells__not_prepared {
	font-size: 0.75em;
	color: darkred;
	margin-inline-start: 0.25em;
}

#armor,
#helmet {
	margin: var(--item-gap_large) 0;
	display: grid;
	grid-template-columns: 2fr 1fr 5ch;
	row-gap: 0.5em;
	margin-block-start: 1em;
	padding: 1em;
	border-radius: var(--border-radius);
	background: #efefef;
	overflow: hidden;
}

/* Type/Name */
#armor > :first-child,
#helmet > :first-child {
	font-weight: bold;
}

/* Rating */
#armor > :nth-child(2),
#helmet > :nth-child(2) {
	grid-row-start: span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
}

/* Edit */
#armor > :nth-child(3),
#helmet > :nth-child(3) {
	grid-row-start: span 2;
	margin: -1em;
}

#abilities {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	margin-block-start: 1em;
}

#abilities div {
	display: grid;
	grid-template-columns: 1fr 1ch auto;
	gap: 1em;
	min-width: 30%;
	flex-grow: 1;
	justify-content: center;
	padding: 1em;
	border-radius: var(--border-radius);
	background: #efefef;
	overflow: hidden;
}

#abilities div > :first-child {
	flex-grow: 1;
	font-weight: bold;
}

#abilities div > :last-child {
	margin: -1rem -1rem -1rem 0;
	padding: 1em;
	background: lightgray;
	flex-grow: 1;
	display: flex;
	justify-content: center;
}

#coinage {
	display: flex;
	gap: 1em;
	justify-content: center;
}

#inventory {
	margin-block-start: 1em;
}

.inventory__item {
	display: grid;
	grid-template-columns: 1fr auto repeat(2, 6ch);
	margin: 0.1em 0;
	border-radius: var(--border-radius);
	background: #efefef;
	overflow: hidden;
}

.inventory__item > * {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: nowrap;
	padding: 1em;
}

.inventory__item > :first-child {
	font-weight: bold;
}

.inventory__item .delete {
	border-inline-start: 1px solid darkgray;
}

.over_limit {
	color: red;
}

.delete,
.edit {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	font-size: 1em;
	background: var(--endcap-color);
	transition: 0.25s;
}

.delete:hover,
.edit:hover,
.edit__non-row:hover {
	color: var(--highlight);
	background: darkgray;
}

.edit__non-row {
	border: 0;
	border-radius: var(--border-radius);
	font-size: 0.75em;
	background: none;
}

.button__title {
	position: absolute;
	right: 0;
}

.add__button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

/* Delete Inventory Item */
div.htmx-swapping {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}