/* Shared with the wiki. Pixel cells, shaded lettering, and the left nav. */
:root { --u: 3px; }

a.cell.app-back { margin-bottom: 8px; }

.side { overflow-y: auto; padding: 12px 10px 40px 12px; border-right: calc(2 * var(--u)) solid var(--k-ink); scrollbar-color: var(--k-q) var(--k-b); }

.ramp {
	background: repeating-linear-gradient(to bottom, var(--rt) 0 .5em, var(--rb) .5em .75em, var(--rd) .75em 1.125em);
	-webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
	filter: drop-shadow(0 .125em 0 var(--k-z)); line-height: 1.125em;
}

.cell {
	display: block; border-style: solid; border-color: transparent;
	border-width: calc(2 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u));
	border-image-source: var(--img-cell); border-image-slice: 2 2 4 fill;
	border-image-width: calc(2 * var(--u)) calc(2 * var(--u)) calc(4 * var(--u));
	image-rendering: pixelated;
}
a.cell:hover, button.cell:hover, .cell.hov:hover { border-image-source: var(--img-cell-hover); }
.cell.marked { border-image-source: var(--img-cell-marked); }
a.cell.marked:hover { border-image-source: var(--img-cell-marked-hover); }

.nav h4 { margin: 14px 4px 4px; font-weight: normal; font-size: 16px; color: var(--k-g); }
.nav a.cell { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; min-height: 30px; margin-bottom: 2px; }
.nav a.cell img { width: 26px; height: 26px; object-fit: contain; }
.nav a.cell .ico { width: 30px; display: flex; justify-content: center; flex: none; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 30px; cursor: pointer; color: inherit; }