.progress
{
	width: 100%;
	height: 4px;
	background-color: var(--color-sunken);
	border: 1px solid var(--color-gold-muted);

	& div
	{
		height: 100%;
		background: var(--gradient-gold);
		box-shadow: 0 0 5px var(--color-gold);
	}
}

.parchment
{
	position: relative;
	padding: var(--spacing);
	isolation: isolate;
	color: var(--color-ink);
	font-family: var(--font-written);
	font-style: italic;
	letter-spacing: 0.025em;
	background-color: var(--color-parchment);
	background-image: var(--texture-parchment);
	border-radius: 2px;

	& .red
	{
		color: var(--color-ink-red);
	}

	h1, h2, h3, h4, h5, h6
	{
		font-family: var(--font-written);
	}

	a
	{
		color: currentColor;
	}

	/* The paper lives on a pseudo-element so the ragged filter distorts its edges, not the content. */
	&.ragged::before
	{
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background-color: var(--color-parchment);
		background-image: var(--texture-parchment);
		filter: url('#filter-ragged');
	}

	ol
	{
		list-style-type: lower-roman;
		padding-left: calc(var(--spacing) * 1.5);

		li + li
		{
			margin-top: var(--spacing-text);
		}
	}
}

/* A row of buttons, e.g. Edit and Delete. */
.actions
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing);
}

.flash-container
{
	position: fixed;
	z-index: 1;
	bottom: calc(var(--spacing) * 2);
	right: var(--spacing);
	width: 320px;
	margin-bottom: var(--spacing);
	box-shadow: 0 0 20px rgb(0 0 0 / .5);
}


.spacer
{
	height: calc(var(--spacing) * 2);
}


.panel
{
	position: relative;
	padding: calc(var(--spacing) + 6px);
	background: linear-gradient(180deg, rgb(255 226 186 / .05), transparent 30%, var(--color-panel-shade)), linear-gradient(var(--color-panel-veil), var(--color-panel-veil)), var(--grain), var(--color-panel);
	border: 1px solid var(--color-edge);
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), inset 0 0 40px var(--color-panel-hollow), 0 10px 30px var(--color-drop-shadow);

  &::before
  {
	content: '';
    position: absolute;
    inset: 6px;
    pointer-events: none;
    border: 1px solid var(--color-gold-line);
    outline: 1px solid rgb(201 164 76 / .1);
    outline-offset: 3px;
  }
}