/* help.css — what the help centre adds on top of the site: the list of articles by section,
   and the prose of one article. Drawn only in the contract's tokens (docs/WEBSITE.md). */

/* The front page: the sections and what each holds ------------------------- */

.help-section { margin-bottom: 2.5rem; }
.help-section:last-child { margin-bottom: 0; }

.help-section-name {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.help-articles {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

.help-article {
	display: grid;
	gap: 0.3rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--text);
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}
.help-article:hover { transform: translateY(-2px); border-color: var(--muted); }

.help-article-title { font-size: 1.05rem; }
.help-article-summary { font-size: 0.95rem; color: var(--muted); }

/* One article: prose, and the pictures that walk through it ---------------- */

.help-body { font-size: 1.05rem; line-height: 1.7; }
.help-body h1 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); font-weight: 600; letter-spacing: -0.01em; }
.help-body h2 { margin: 2.25rem 0 0.6em; font-size: 1.35rem; font-weight: 600; letter-spacing: 0; }
.help-body h3 { margin: 1.75rem 0 0.5em; font-size: 1.1rem; font-weight: 600; letter-spacing: 0; }
.help-body ul, .help-body ol { margin: 0 0 1em; padding-left: 1.4rem; }
.help-body li { margin-bottom: 0.4em; }
.help-body blockquote {
	margin: 1.5rem 0;
	padding: 0.1rem 1.25rem;
	border-left: 3px solid var(--accent);
	color: var(--muted);
}

/* A screenshot is the point of a step-by-step article: it gets the width of the column and
   a frame, so a picture of a screen does not read as part of the page it is shown on. */
.help-body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.5rem 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.help-body code {
	padding: 0.15em 0.4em;
	border-radius: 0.35rem;
	background: var(--bg);
	font-size: 0.9em;
}
.help-body pre {
	overflow-x: auto;
	margin: 1.5rem 0;
	padding: 1rem 1.15rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--bg);
	line-height: 1.5;
}
.help-body pre code { padding: 0; background: none; }

.help-body table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.help-body th, .help-body td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; }
.help-body th { font-weight: 600; }

.help-updated { margin-top: 2.5rem; font-size: 0.9rem; color: var(--muted); }