/* G E N E R A L . C S S ------------------------------------------------------------------------ */

.general[data-change="false"], .general form { display: grid; grid-template-columns: 680px 1fr; gap: 1.25rem; }

/* T A B L E ------------------------------------------------------------------------------------ */

.general #details { height: min-content; border-collapse: separate; border-spacing: 0; }

.general[data-change="true"] #details tbody tr > * { background-clip: padding-box !important; border: 0 solid transparent; }

.general[data-change="true"] #details tbody tr:not(:last-of-type) > * { border-bottom-width: .5em; }

/* R O W ---------------------------------------------------------------------------------------- */

.general #details tbody tr :is(.entries, th) { transition: background 300ms; vertical-align: top; line-height: 1.5em; }

/* H I G H L I G H T I N G ---------------------------------------------------------------------- */

.general[data-change="true"] #details tbody tr:has(.change button:is(:focus-within, :hover)) th { background-color: var(--bg 03); }

.general[data-change="true"] #details tbody tr:has(.change button:is(:focus-within, :hover)) .entries { background-color: var(--bg 06); }

.general[data-change="true"] #details tbody th.on { background-color: var(--bg 03); }

.general[data-change="true"] #details tbody .entries.on,

.general[data-change="true"] #details tbody .entries.on textarea { background: var(--bg 06); }

/* R O W H E A D E R ---------------------------------------------------------------------------- */

.general #details tbody th { padding: .5em .75em .5em .85em; background: var(--bg 06); text-align: left; font-family: var(--font 2); }

/* C E L L -------------------------------------------------------------------------------------- */

.general #details tbody tr .entries { width: 100%; background: var(--bg 08); }

/* P A R A G R A P H ---------------------------------------------------------------------------- */

.general #details tbody td div { padding: .5em .75em .5em .85em; }

/* .general #details tbody td div { border-width: .5em .75em .5em .85em; border-style: solid; border-color: var(--bg 08); } */

.general[data-change="true"] #details tbody .entries:not(.open) div { overflow-y: hidden; height: 2.5em; }

.general #details tbody td p:not([hidden]) { display: flex; flex-wrap: wrap; white-space: pre-wrap; }

.general #details tbody td p:not(:last-of-type, .last-visible) { margin-bottom: .15em; }

/* A N C H O R ---------------------------------------------------------------------------------- */

.general #details tbody td a { color: var(--col 3); white-space: nowrap; }

.general #details tbody td a:is(:focus, :hover) { color: var(--col 1); }

.general #details tbody td a[target]::after {
	transition: color 300ms;
	display: inline-block;
	margin: 0 .2em 0 .125em;
	transform: scaleX(-1);
	color: var(--col 2);
	content: "⧉";
}

.general #details tbody td span.last-visible a[target]::after { margin-right: .125em; }

.general #details tbody td a[target]:is(:focus, :hover)::after { color: var(--col 1); }

/* T E X T A R E A ------------------------------------------------------------------------------ */

.general #details tbody td textarea {
	transition: background 300ms;
	overflow-y: hidden;
	width: 100%;
	height: 2.5em;
	max-height: 230px;
	padding: .5em .7em .5em .85em;
	vertical-align: top;
	font-family: var(--font 5);
	font-size: 1em;
	line-height: 1.5em;
	letter-spacing: .15em;
	color: var(--col 2);
}

.general #details tbody td textarea:is(:focus, :hover) { background: var(--bg 10); }

.general #details tbody td textarea.js { display: none; }

/* B U T T O N : T O G G L E - H I D D E N - E N T R I E S -------------------------------------- */

.general #details tbody .entries button { transition: color 300ms; color: var(--col 3); }

.general #details tbody .entries button::before { content: " … "; color: var(--col 2); }

.general #details tbody .entries button:is(:focus, :hover),

.general #details tbody .entries button:is(:focus, :hover)::before { color: var(--col 1); }

/* B U T T O N : C H A N G E -------------------------------------------------------------------- */

.general #details .change { width: 0; height: 100%; }

.general #details .change button {
	transition: background 300ms;
	width: 2.5em;
	height: 100%;
	margin-left: .5em;
	padding: .6675em;
	background: var(--bg 08);
	line-height: 0;
}

.general #details .change button:is(:focus-within, :hover) { background-color: var(--bg 06); }

.general #details .change button svg { transition: opacity 300ms; opacity: .8; }

.general #details .change button:is(:focus-within, :hover) svg { opacity: 1; }

/* M E N U -------------------------------------------------------------------------------------- */

.general #details .menu .wrapper { display: flex; gap: .5em; margin-top: .5em; }

.general #details .menu:is(:focus-within, :hover) :is(.selected, select) { background: var(--bg 06); color: var(--col 2); }

.general #details .menu button { transition: background 300ms; aspect-ratio: 1/1; height: 2.5em; background: var(--bg 08); }

.general #details .menu button:is(:focus, :hover) { background: var(--bg 06); }

.general #details .menu button svg * { stroke: var(--col 2); stroke-width: 78; stroke-linecap: round; }

.general #details .menu button[name="add"] { padding: .5625em; }

.general #details .menu button[name="remove"] { padding: .4625em; }

.general #details .menu button[name="remove"] svg { transform: rotate(45deg); }

.general #details .menu button[name="remove"] svg * { stroke-width: 70; }

.general #details .menu button[name="remove"]:is(:focus, :hover) ~ .select .selected,

.general #details .menu button[name="remove"]:is(:focus, :hover) + select { background: var(--bg 06); color: var(--col 2); }

.general #details .menu button svg { transition: opacity 300ms; opacity: .8; }

.general #details .menu button:is(:focus, :hover) svg { opacity: initial; }

.general #details .menu select[name="category"] {
	transition:
		background 300ms,
		color 300ms;
	width: 100%;
	padding: 0 .6em 0 .75em;
	background: var(--bg 08);
	text-align: center;
	font-family: var(--font 5);
	font-size: 1em;
	letter-spacing: .15em;
	color: var(--col 5);
}

/* L O G O -------------------------------------------------------------------------------------- */

.general #logo { display: flex; flex-direction: column; row-gap: .5em; overflow-x: hidden; }

.general #logo .wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 4.5em 2.5em;
	position: relative;
	background: var(--bg 08);
	border-radius: .75rem;
}

.general[data-change="true"] #logo .wrapper { border-radius: initial; }

.general #logo img { filter: drop-shadow( .0625em .0625em 0 var(--bg 04) ); }

.general #logo .wrapper > :not(img) { position: absolute; }

.general #logo .wrapper > div:nth-of-type(1) { top: 0; right: 0; }

.general #logo .wrapper > div:nth-of-type(2) { bottom: 0; left: 0; }

/* Y E A R -------------------------------------------------------------------------------------- */

.general #year {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5em;
	background: var(--bg 04);
	border-radius: 0 .75rem 0 .75rem;
}

.general[data-change="true"] #logo #year { border-radius: initial; }

.general #year :is(span, input[type="text"]) {
	width: 5em;
	padding-left: .1325em;
	text-align: center;
	font-family: var(--font 6);
	font-size: .9em;
	letter-spacing: .15em;
	color: var(--col 2);
}

.general #year input[type="text"] { transition: background 300ms, color 300ms; height: 100%; color: var(--col 4); }

.general #year input[type="text"]:is(:focus, :hover) { background: var(--bg 01); color: var(--col 1); }

/* F I L E -------------------------------------------------------------------------------------- */

.general #logo .menu { display: flex; column-gap: .5em; }

.general #logo .menu input[type="file"] {
	transition:
		background 300ms,
		color 300ms;
	overflow-x: hidden;
	display: none;
	width: 100%;
	padding-right: 6.5em;
	background: var(--bg 08);
	font-family: var(--font 5);
	font-size: 1em;
	letter-spacing: .15em;
	color: var(--col 5);
}

.general #logo .menu input[type="file"]:is(:focus, :focus-within, :hover) { background-color: var(--bg 06); color: var(--col 2); }

.general #logo .menu input[type="file"]::file-selector-button {
	transition:
		background-color 300ms,
		border-color 300ms,
		opacity 300ms;
	width: 3em;
	height: 2.5em;
	margin-right: .85em;
	background:
		url("/images/image.svg")
		center center / 1.45em 1.45em
		no-repeat;
	border-right: .525em solid var(--bg 14);
	font-family: var(--font 5);
	letter-spacing: .15em;
	color: transparent;
	opacity: .8;
}

.general #logo .menu input[type="file"]:is(:focus-within, :hover)::file-selector-button { border-color: var(--bg 13); opacity: initial; }

/* L A B E L ------------------------------------------------------------------------------------ */

.general #logo .menu label { display: flex; column-gap: .5em; overflow-x: hidden; width: 100%; }

.general #logo .menu label > * { background: var(--bg 08); }

.general #logo .menu label:is(:focus-within, :hover) > * { background: var(--bg 06); }

.general #logo .menu label:is(:focus-within, :hover) span { color: var(--col 2) !important; }

.general #logo .menu label:is(:focus-within, :hover) svg { opacity: initial !important; }

.general #logo .menu label .image { transition: 300ms background; aspect-ratio: 1/1; height: 2.5em; padding: .525em; }

.general #logo .menu label .image svg { transition: opacity 300ms; opacity: .8; }

.general #logo .menu label .name { transition: background 300ms; overflow-x: hidden; display: flex; align-items: center; width: 100%; }

.general #logo .menu label .name span { text-overflow: ellipsis; }

.general #logo .menu label .name span {
	transition: color 300ms;
	overflow-x: hidden;
	width: 100%;
	padding: 0 .85em;
	text-overflow: " …";
	letter-spacing: .15em;
	color: var(--col 5);
	white-space: nowrap;
	user-select: none;
}

/* B U T T O N : A P P L Y ---------------------------------------------------------------------- */

.general #logo .menu button[name="apply"] { transition: background 300ms; aspect-ratio: 1/1; height: 2.5em; padding: .5625em; background: var(--bg 08); }

.general #logo .menu button[name="apply"]:is(:focus, :hover) { background: var(--bg 06); }

.general #logo .menu button[name="apply"] svg { transition: opacity 300ms; opacity: .8; }

.general #logo .menu button[name="apply"]:is(:focus, :hover) svg { opacity: initial; }

/* D E S C R I P T I O N ------------------------------------------------------------------------ */

.general #description { grid-column: 1 / 3; }

.general[data-change="true"] #description { display: grid; grid-template-columns: auto 2.5em; grid-template-rows: repeat(3, auto); column-gap: .5em; }

.general #description :is(textarea, p) { grid-row: span 3; background: var(--bg 08); line-height: 1.5em; }

.general #description p {
	padding: .65em 1em .8em 1em;
	text-shadow: .075em .075em 0 var(--bg 02);
	text-align: justify;
	font-size: 1.1em;
	hyphens: auto;
}

.general #description button { transition: background 300ms; height: 2.5em; padding: .6675em; background: var(--bg 08); }

.general #description button:not(:last-of-type) { margin-bottom: .5em; }

.general #description button:is(:focus, :hover) { background: var(--bg 06); }

.general #description button svg { transition: opacity 300ms; opacity: .8; }

.general #description button:is(:focus, :hover) svg { opacity: 1; }



















































/* D E S C R I P T I O N ------------------------------------------------------------------------ */









.general #description textarea {
	transition: background 300ms;
	overflow-y: auto;
	width: 100%;
	min-height: 79.2px;
	max-height: 237px;
	padding: .65em .85em .65em 1em;
	font-family: var(--font 4);
	letter-spacing: .15em;
	color: var(--col 2);
}

.general #description textarea:is(:focus, :hover) { background: var(--bg 06); }

.general[data-change="false"] #description p { border-radius: .75rem; }

.general[data-change="true"] #description p { border-radius: 0; }



































/* T A G S -------------------------------------------------------------------------------------- */

.general #tags {
	grid-column: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	background: var(--bg 04);
	border-radius: 0.75rem;
}

.general #tags .label {
	order: 1;
	padding: 0 1em;
	border-radius: 0 .75rem .75rem 0;
	font-family: var(--font 2);
	font-size: 1.025em;
	letter-spacing: .09em;
}

/* w r a p p e r -------------------------------------------------------------------------------- */

.general #tags .wrapper {
	overflow: hidden;
	margin-left: .85em;
	position: relative;
	background: var(--bg 09);
	border-radius: 50px;
}

.general #tags .wrapper::before, #tags .wrapper::after {
	content: "";
	transition: var(--transition tags wrapper);
	height: 100%;
	width: 3.5em;
	position: absolute;
	top: 0;
}

.general #tags .wrapper::before {
	visibility: var(--visibility tags wrapper before);
	right: 0;
	background: linear-gradient(to left, var(--bg 09) 30%, transparent);
	border-radius: 0 50px 50px 0;
	opacity: var(--opacity tags wrapper before, 0);
}

.general #tags .wrapper::after {
	visibility: var(--visibility tags wrapper after);
	left: 0;
	background: linear-gradient(to right, var(--bg 09) 30%, transparent);
	border-radius: 50px 0 0 50px;
	opacity: var(--opacity tags wrapper after, 0);
}

/* c o n t a i n e r ---------------------------------------------------------------------------- */

.general #tags .container::-webkit-scrollbar { display: none; }

.general #tags .container {
	overflow: auto;
	scrollbar-width: none;
	display: flex;
	flex-direction: row-reverse;
	padding: .5em .6em;
	border-left: 1px solid var(--bg 09);
	border-right: 1px solid var(--bg 09);
}

/* b u t t o n ---------------------------------------------------------------------------------- */

.general #tags button {
	transition: background-color 300ms;
	flex-shrink: 0;
	display: none;
	width: 1.5rem;
	height: 1.5rem;
	margin-left: .85em;
	background:
		url("/images/chevron.svg")
		.325rem center / .75rem .75rem
		no-repeat
		var(--bg 11);
	border-radius: 50%;
}

.general #tags button:last-of-type { margin-left: .65em; transform: rotate(180deg); }

.general #tags button:not(.off):active, .general #tags button:not(.off):focus, 

.general #tags button:not(.off):hover { background-color: var(--bg 13); }

.general #tags button.on { display: inline-block; }

.general #tags button.off { cursor: default; }

/* t a g ---------------------------------------------------------------------------------------- */

.general #tags .tag {
	transition:
		background-color 300ms,
		color 300ms;
	padding: 6px 11px 6px .75rem;
	background: var(--bg 04);
	border-radius: 50px;
	text-transform: uppercase;
	font-family: var(--font 8);
	font-size: .9rem;
	letter-spacing: .105em;
	white-space: nowrap;
	-webkit-user-select: none;
	user-select: none;
	color: var(--col 2);
}

.general #tags .tag:not(:first-of-type) { margin-right: .5em; }

.general #tags .tag:focus, .general #tags .tag:hover { background: var(--bg 02); color: var(--col 1); }

/* S P E C S ------------------------------------------------------------------------------------ */

.general #specs { grid-column: 1 / 3; }

.general #specs table { margin-top: .625rem; }

.general #specs tr { text-align: center; }

.general #specs :is(td, th) { padding: .5rem; background-clip: padding-box !important; border: 0 solid transparent; }

.general #specs th { background: var(--bg 06); font-family: var(--font 8); letter-spacing: .105em; }

.general #specs td { background: var(--bg 09); }

.general #specs thead th { text-transform: uppercase; }

.general #specs thead th:first-of-type button { display: none; }

.general #specs tbody th { width: 12%; }

.general #specs td { width: 44%; font-size: .925em; }

.general #specs.broad td { width: 22%; }

.general #specs tbody p { line-height: 1.5em; }

.general #specs tr > * + * { border-left-width: .625rem !important; }

.general #specs tr + tr > * { border-top-width: .625rem !important; }

.general #specs thead th { border-bottom-width: .625rem !important; }

/* V I E W P O R T <= 1 0 2 4 p x --------------------------------------------------------------- */

@media only screen and (max-width: 1024px) {

	.general #details { grid-column: 1 / 3 !important; }

	.general #logo { grid-column: 1 / 3 !important; grid-row: 1 / 3; }

	/* S P E C S -------------------------------------------------------------------------------- */

	.general #specs thead th { background: var(--bg 03); }

	.general #specs thead th { border-bottom-width: 0 !important; }

	.general #specs thead th.on { display: flex; align-items: center; justify-content: space-between; }

	.general #specs thead th.on button { display: initial; }

	.general #specs thead th.on button[disabled] { opacity: .25 !important; }

	.general #specs thead th.on button { transition: opacity 300ms; height: .85rem; opacity: .8; }

	.general #specs thead th.on button:focus, .general #specs thead th.on button:hover { opacity: 1; }

	.general #specs thead th.on button:last-of-type { transform: rotate(180deg); }

	.general #specs tbody tr:first-of-type > * { border-top-width: 0.625rem !important; }

	.general #specs tbody th { width: 25% !important; }

	.general #specs tbody td { width: 37.5% !important; }

}

/* V I E W P O R T <= 7 2 0 p x ----------------------------------------------------------------- */

@media only screen and (max-width: 720px) {

	.general[data-change="false"], .general form { grid-template-columns: 1fr; gap: initial; row-gap: 1.25rem; padding: 0 .5em; }

	.general[data-change="true"] #details tbody :is(.entries, th) { display: flex; }

	.general[data-change="true"] #details tbody tr > th { border-bottom-width: 0 !important; }

	.general[data-change="true"] #details tbody .entries:not(.open) div { overflow-y: initial; height: initial; }

	.general #logo { grid-row: 1 / 2; }

	.general #logo .wrapper { padding: 4em 2em; border-radius: 0; }

	.general #year { border-radius: 0; }

	.general #tags .tag { font-size: .9em !important; }

	.general[data-change="false"] #description p { border-radius: 0; }

	.general #description p { hyphens: initial; text-align: initial; }

	.general #description textarea { min-height: 70.2px; }

	/* S P E C S -------------------------------------------------------------------------------- */

	.general #specs table { margin: 0 0 -.5em 0; border-collapse: separate; border-spacing: .5em; }

	.general #specs tbody th { width: 35% !important; }

	.general #specs tbody td { width: 65% !important; }

	.general #specs tbody tr:first-of-type > * { border-top-width: 0 !important; }

	.general #specs th, .general #specs td { background-clip: border-box !important; }

	.general #specs tr > * + * { border-left-width: 0 !important; }

	.general #specs tr + tr > * { border-top-width: 0 !important; }

	.general #specs thead th { border-bottom-width: 0 !important; }

}