/* Priority Badge */
/* -------------------------------------------------------------------------- */
.priority-badge
{
	display: inline-block;
	font-family: 'cinzel', serif;
	font-size: .65rem;
	padding: .1rem .4rem;
	border-radius: 999px;
	border: 1px solid;
	white-space: nowrap;
}

.priority-badge.priority-Top      { border-color: var(--color-priority-Top);        color: var(--color-priority-Top); }
.priority-badge.priority-High     { border-color: var(--color-priority-High);       color: var(--color-priority-High); }
.priority-badge.priority-Medium   { border-color: var(--color-priority-Medium);     color: var(--color-priority-Medium); }
.priority-badge.priority-Low      { border-color: var(--color-priority-Low);        color: var(--color-priority-Low); }
.priority-badge.priority-Interested { border-color: var(--color-priority-Interested); color: var(--color-priority-Interested); }
.priority-badge.priority-Willing   { border-color: var(--color-priority-Willing);    color: var(--color-priority-Willing); }
.priority-badge.priority-Favorite  { border-color: var(--color-priority-Favorite);   color: var(--color-priority-Favorite); }
.priority-badge.priority-Available { border-color: var(--color-priority-Available);  color: var(--color-priority-Available); }
.priority-badge.priority-Ignore    { border-color: var(--color-priority-Ignore);     color: var(--color-priority-Ignore); }

a.priority-badge
{
	cursor: pointer;
	text-decoration: none;
}

a.priority-badge:hover
{
	filter: brightness(1.3);
}

.compact-row:hover
{
	background-color: var(--color-primary2);
}

.h3-box-meta
{
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-left: .1rem;
	margin-top: .25rem;
}

/* Chip */
/* -------------------------------------------------------------------------- */
.chip
{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: var(--color-primary2);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	padding: .1rem .5rem .1rem .1rem;
	font-size: .7rem;
	color: var(--color-text-normal);
	font-family: 'courgette';
}

.chip-icon
{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--color-primary4);
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .5rem;
	color: var(--color-text-dimmed);
	overflow: hidden;
	flex-shrink: 0;
	font-family: 'courgette';
}

.chip-icon img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.chip-detail
{
	font-size: .6rem;
	color: var(--color-text-dimmed);
	margin-left: .1rem;
}

.chip-delete
{
	color: red;
	font-size: .7rem;
	margin-left: .2rem;
	text-decoration: none;
	line-height: 1;
}

a.chip-delete:link,
a.chip-delete:visited
{
	color: red;
}

a.chip-delete:hover
{
	color: var(--color-highlight);
}

/* Action Chip (Complete / Withdraw) */
/* -------------------------------------------------------------------------- */
.chip-action
{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: var(--color-primary3);
	border: 1px solid var(--color-secondary4);
	border-radius: 999px;
	padding: .1rem .6rem;
	font-size: .7rem;
	font-family: 'courgette';
	color: var(--color-text-normal);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 1px 1px 6px var(--color-decoration-dark);
}

a.chip-action
{
	color: var(--color-text-normal);
}

.chip-action:hover
{
	border-color: var(--color-decoration-dark);
	color: var(--color-decoration);
	box-shadow: none;
}

/* Objective Chips */
/* -------------------------------------------------------------------------- */
a.chip.objective-pending,
a.chip.objective-done
{
	text-decoration: none;
}

.chip.objective-pending
{
	background: var(--color-primary3);
	border-color: var(--color-decoration-dark);
	box-shadow: 1px 1px 6px var(--color-decoration-dark);
	cursor: pointer;
}

.chip.objective-pending:hover
{
	border-color: var(--color-decoration);
	box-shadow: none;
}

.chip.objective-pending .chip-icon
{
	border-color: var(--color-decoration-dark);
	color: var(--color-decoration-dark);
}

.chip.objective-done
{
	background: var(--color-background-good);
	border-color: var(--color-border-good);
	color: var(--color-text-normal);
	box-shadow: 1px 1px 6px var(--color-shadow-good);
	cursor: pointer;
}

.chip.objective-done:hover
{
	border-color: var(--color-border-good);
	box-shadow: none;
}

.chip.objective-done .chip-icon
{
	border-color: var(--color-border-good);
	color: var(--color-border-good);
}

/* Activity interest tier colors on chips */
/* -------------------------------------------------------------------------- */
.chip.priority-Favorite   { border-color: var(--color-priority-Favorite); }
.chip.priority-Interested { border-color: var(--color-priority-Interested); }
.chip.priority-Available  { border-color: var(--color-priority-Available); }
.chip.priority-Willing    { border-color: var(--color-priority-Willing); }

/* Chip row container */
.chip-row
{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .5rem;
}

/* Character profile link inside a chip */
/* -------------------------------------------------------------------------- */
.chip-inner-link
{
	display: contents;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.chip-inner-link:hover
{
	color: var(--color-decoration);
}

a.chip,
.chip:has(.chip-inner-link)
{
	text-decoration: none;
	color: var(--color-text-normal);
	box-shadow: 1px 1px 6px var(--color-decoration-dark);
}

a.chip:visited
{
	color: var(--color-text-normal);
}

a.chip:hover,
.chip:has(.chip-inner-link):hover
{
	color: var(--color-decoration);
	border-color: var(--color-decoration-dark);
	box-shadow: none;
}