/*
 * The GAIDeT generator (templates/pages/tools/page-tool-gaidet.php), drawn as
 * the static generator that stood in /tools/gaidet/ until 2026-11 was: the
 * owner's design, chosen again on 2026-11-02 over the site's band layout.
 *
 * The rules below the base are the static pages' own stylesheet (index.html
 * and the Crossref helper), carried over by a script: its header and page
 * reset are left to the site, every selector is kept inside .gaidet-app, the
 * classes that the site already uses are renamed (page-wrapper to gd-wrapper,
 * page-nav to gd-nav), and its fixed colours are the theme's tokens, so the
 * dark theme works: navy words take --color-text-heading, blue links
 * --color-link, white boxes --color-surface-card, its pale blue tint a wash
 * of --color-tint--rgb. Navy surfaces with white words stay navy.
 *
 * At the end, what the site's page adds to it: the type of work and the
 * student's fields, the language of the declaration, the documents, the
 * rules.
 */

/* ---------------------------------------------------------------- base */

.gaidet-app {
	--page-top-gap: 1.5rem;
	/* The grey runs up to the site menu: the first section's room under the
	   fixed header stays inside it instead of collapsing through. */
	display: flow-root;
	background: var(--color-bg-secondary);
	color: var(--color-text-primary);
	line-height: 1.6;
	overflow-wrap: break-word;
}

.gaidet-app *,
.gaidet-app *::before,
.gaidet-app *::after {
	box-sizing: border-box;
	border-radius: 0 !important;
}

.gaidet-app :where(h1, h2, h3, p, ul, ol, li, dl, dd, figure, fieldset) {
	margin: 0;
	padding: 0;
}

/* layout.css spaces every <section> of the site apart on wide screens; only
   the first, section._first, keeps its room under the fixed site header. */
.gaidet-app section:not(._first) {
	margin: 0;
}

/* Below 1200px layout.css gives section._first 3rem, less than the fixed
   header there (56px on a phone, up to 80px on a tablet), so the side menu and
   the crumbs went under it; the room is the header's own height instead. */
@media (max-width: 1199px) {
	.gaidet-app section._first {
		margin-top: var(--header-height, 56px);
	}
}

.gaidet-app [hidden] {
	display: none !important;
}

/* The page's edges are the site menu's at any width: the static page's
   1560px cap left wide empty margins on a large screen. */
.gaidet-app .gd-wrapper {
	max-width: none !important;
	padding-right: var(--wrap) !important;
	padding-left: var(--wrap) !important;
}

/* The site header with its menu is taller than the static page's was. */
.gaidet-app .sidebar-wrapper {
	top: calc(var(--header-height, 120px) + 3.5rem) !important;
}

.gaidet-app .step-section,
.gaidet-app .attribution-section {
	scroll-margin-top: calc(var(--header-height, 120px) + 1.25rem) !important;
}

/* ------------------------------------------------- the static generator */

.gaidet-app .gd-wrapper {
	max-width: 1560px;
	margin: 0 auto;
	padding: var(--page-top-gap) clamp(1.25rem, 3vw, 2.5rem) 4rem;
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2.75rem;
	align-items: start;
}

.gaidet-app .sidebar-wrapper {
	position: sticky;
	top: calc(var(--header-height) + var(--page-top-gap));
}

.gaidet-app .gd-nav-header {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-heading);
	margin-bottom: 0.75rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--color-border);
}

.gaidet-app .gd-nav {
	list-style: none;
	padding-left: 0;
	margin: 0;
	border-left: 2px solid var(--color-border);
}

.gaidet-app .gd-nav-item {
	margin-bottom: 0.125rem;
}

.gaidet-app .gd-nav-link {
	display: block;
	padding: 4px 0 4px 12px;
	color: var(--color-text-muted);
	text-decoration: none;
	font-size: 0.8125rem;
	line-height: 1.35;
	transition: color 0.15s ease, border-color 0.15s ease;
	margin-left: -2px;
	border-left: 2px solid transparent;
}

.gaidet-app .gd-nav-link:hover {
	color: var(--color-text-heading);
}

.gaidet-app .gd-nav-link._active {
	color: var(--color-text-heading);
	font-weight: 500;
	border-left: 2px solid var(--color-text-heading);
}

.gaidet-app .sidebar-meta-nav {
	margin-top: 1.25rem;
	padding-top: 0.5rem;
}

.gaidet-app .sidebar-meta-nav .gd-nav-link {
	padding: 4px 0;
	border: none;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	transition: color 0.15s ease;
}

.gaidet-app .sidebar-meta-nav .gd-nav-link:hover,
.gaidet-app .sidebar-meta-nav .gd-nav-link._active {
	color: var(--color-text-heading);
	font-weight: 500;
	border: none;
}

.gaidet-app .content-area {
	min-width: 0;
}

/* The first step's rule closes the opening. */
.gaidet-app .hero-section {
	padding: 0 0 2.5rem 0;
}

/* Emphasis in the texts is the site's medium weight, not bold. */
.gaidet-app :where(strong, b) {
	font-weight: 500;
}

.gaidet-app .hero-title {
	font-size: 2rem;
	font-weight: 500;
	color: var(--color-text-heading);
	line-height: 1.25;
	margin-bottom: 0.25rem;
}

.gaidet-app .hero-subtitle {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--color-text-heading);
	margin-bottom: 0.75rem;
}

.gaidet-app .hero-desc {
	color: var(--color-text-secondary);
	font-size: 0.9375rem;
	line-height: 1.55;
	margin-bottom: 1.5rem;
}

/* «Порядок дій»: one ruled list of numbered rows, a number on a navy square
   as the steps of the form have, the step's name, what to do on it. */
.gaidet-app .gd-howto {
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.gaidet-app .gd-howto__title {
	margin-bottom: 0.75rem;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-text-heading);
}

.gaidet-app .gd-howto__list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
}

.gaidet-app .gd-howto__item {
	display: grid;
	grid-template-columns: 1.75rem minmax(9rem, 14rem) 1fr;
	align-items: center;
	gap: 0.25rem 1.25rem;
	padding: 0.75rem 1.25rem;
}

.gaidet-app .gd-howto__item + .gd-howto__item {
	border-top: 1px solid var(--color-border);
}

.gaidet-app .gd-howto__num {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--color-blue-200);
	color: var(--color-white);
	font-size: 0.875rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.gaidet-app .gd-howto__name {
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--color-text-heading);
	text-decoration: none;
}

.gaidet-app a.gd-howto__name:hover {
	text-decoration: underline;
}

.gaidet-app .gd-howto__desc {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--color-text-secondary);
}

/* Each H2 opens a block of its own: a strong rule above it and room on both
   sides, so the steps and the reference sections read as separate parts of
   the page rather than one run of fields. The heading is set as the site's
   section headings are (page-section.css), at weight 500. */
.gaidet-app .step-section {
	padding: 2.5rem 0;
	margin: 0;
	border-top: 1px solid var(--color-border-strong);
	scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.gaidet-app .step-section-header {
	margin-bottom: 1.5rem;
}

.gaidet-app .step-section-title {
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--color-text-heading);
	margin: 0 0 0.5rem 0;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.gaidet-app .step-section-desc {
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
	line-height: 1.45;
	margin: 0;
}

.gaidet-app .form-input,
.gaidet-app .form-textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--color-text-primary);
	background-color: var(--color-surface-card);
	border: 1px solid var(--color-border);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gaidet-app .form-input:focus,
.gaidet-app .form-textarea:focus {
	outline: none;
	border-color: var(--color-text-heading);
	box-shadow: 0 0 0 1px var(--color-text-heading);
}

.gaidet-app .form-textarea {
	resize: vertical;
	min-height: 88px;
	line-height: 1.55;
}

.gaidet-app .form-field-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
}

/* A «0 / 200» under every field is noise; the count shows only once the
   text nears its limit. */
.gaidet-app .char-count {
	font-variant-numeric: tabular-nums;
	color: var(--color-text-muted);
}

.gaidet-app .char-count:not(.is-near, .is-full) {
	visibility: hidden;
}

.gaidet-app .char-count.is-near {
	color: var(--color-text-primary);
	font-weight: 500;
}

.gaidet-app .char-count.is-full {
	color: var(--color-danger);
	font-weight: 500;
}

.gaidet-app .tasks-toolbar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

.gaidet-app .tasks-text-btn {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-link);
	cursor: pointer;
	text-decoration: underline;
	transition: color 0.15s ease;
}

.gaidet-app .tasks-text-btn:hover {
	color: var(--color-text-heading);
}

.gaidet-app .tasks-text-btn-danger {
	color: var(--color-danger);
}

.gaidet-app .tasks-text-btn-danger:hover {
	color: var(--color-danger);
}

.gaidet-app .task-categories-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gaidet-app .task-group-item {
	width: 100%;
	background: var(--color-bg-primary);
	border: 1px solid var(--color-border);
	transition: border-color 0.15s ease;
}

.gaidet-app .task-group-item[open] {
	border-color: var(--color-blue-200);
}

.gaidet-app .task-group-summary {
	background: var(--color-blue-200);
	color: var(--color-white);
	padding: 0.5rem 1rem;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.35;
	cursor: pointer;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	list-style: none;
	transition: background-color 0.15s ease;
}

.gaidet-app .task-group-summary::-webkit-details-marker {
	display: none;
}

.gaidet-app .task-group-summary:hover {
	background: var(--color-blue-100);
}


.gaidet-app .summary-title {
	font-weight: 500;
	color: var(--color-white);
}

.gaidet-app .task-group-summary::after {
	content: "+";
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	display: inline-block;
	color: var(--color-white);
	transition: transform 0.15s ease;
	margin-left: 1rem;
	flex-shrink: 0;
}

.gaidet-app .task-group-item[open] > .task-group-summary::after {
	transform: rotate(45deg);
}

.gaidet-app .task-checklist {
	padding: 1rem 1.25rem;
	background: var(--color-bg-primary);
	border-top: 1px solid var(--color-border);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 0.75rem 1.5rem;
}

.gaidet-app .task-check-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	color: var(--color-text-primary);
	cursor: pointer;
	line-height: 1.45;
}

.gaidet-app .task-check-label:hover {
	color: var(--color-text-heading);
}

.gaidet-app .task-check-input {
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--color-blue-200);
	cursor: pointer;
	flex-shrink: 0;
}

.gaidet-app .output-action-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	flex-wrap: wrap;
}

/* Buttons are the site's .btn (css-components/buttons.css); the page only
   says how a button that has just copied looks, through the .btn variables. */
.gaidet-app .btn.copied {
	--btn-bg: var(--color-blue-200);
	--btn-fg: var(--color-white);
	--btn-line: var(--color-blue-200);
}

.gaidet-app .output-textarea {
	width: 100%;
	min-height: 240px;
	padding: 1rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875rem;
	line-height: 1.6;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	color: var(--color-text-primary);
}

.gaidet-app .attribution-section {
	padding: 2.5rem 0 1rem;
	margin: 0;
	border-top: 1px solid var(--color-border-strong);
	scroll-margin-top: calc(var(--header-height) + 1.25rem);
}

.gaidet-app .attribution-inst-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0;
	margin-bottom: 2rem;
}

.gaidet-app .attribution-gerb-img {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	object-fit: contain;
}

.gaidet-app .attribution-inst-title {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-text-heading);
	margin-bottom: 0.5rem;
	line-height: 1.3;
}

.gaidet-app .attribution-inst-text {
	font-size: 0.9375rem;
	color: var(--color-text-secondary);
	line-height: 1.55;
	margin: 0;
}

.gaidet-app .wiki-info-card {
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.gaidet-app .wiki-info-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.gaidet-app .wiki-info-label {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-text-heading);
}

.gaidet-app .wiki-source-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-link);
	text-decoration: underline;
	transition: color 0.15s ease;
}

.gaidet-app .wiki-source-link:hover {
	color: var(--color-text-heading);
}

.gaidet-app .wiki-info-desc {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-primary);
	margin-bottom: 1rem;
}

/* Who it serves reads as a short list, not three columns of cards. */
.gaidet-app .wiki-info-points {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border);
}

.gaidet-app .wiki-point-item {
	font-size: 0.9375rem;
	line-height: 1.5;
}

.gaidet-app .wiki-point-title::after {
	content: " ";
}

.gaidet-app .wiki-point-title {
	font-weight: 500;
	color: var(--color-text-heading);
}

.gaidet-app .wiki-point-text {
	color: var(--color-text-secondary);
}

.gaidet-app .citation-card {
	background: var(--color-surface-card);
	border: 1px solid var(--color-border);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.gaidet-app .citation-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	color: var(--color-text-heading);
}

.gaidet-app .citation-label {
	font-size: 1.0625rem;
	font-weight: 500;
}

.gaidet-app .citation-text {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--color-text-primary);
	margin-bottom: 0.75rem;
}

.gaidet-app .citation-doi {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.gaidet-app .doi-label {
	font-weight: 500;
	color: var(--color-text-heading);
}

.gaidet-app .doi-link {
	color: var(--color-link);
	text-decoration: underline;
	word-break: break-all;
}

.gaidet-app .doi-link:hover {
	color: var(--color-text-heading);
}

.gaidet-app .sources-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid var(--color-border);
	background: var(--color-surface-card);
}

.gaidet-app .sources-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--color-border);
	font-size: 0.9375rem;
	transition: background-color 0.15s ease;
}

.gaidet-app .sources-list-item:last-child {
	border-bottom: none;
}

.gaidet-app .sources-list-item:hover {
	background-color: rgba(var(--color-tint--rgb), 0.06);
}

.gaidet-app .source-item-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.gaidet-app .source-item-label {
	color: var(--color-text-primary);
}

.gaidet-app .source-item-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-link);
	text-decoration: none;
	font-size: 0.875rem;
	word-break: break-all;
	transition: color 0.15s ease;
	flex-shrink: 0;
}

.gaidet-app .source-item-link:hover {
	color: var(--color-text-heading);
	text-decoration: underline;
}

@media (max-width: 992px) {
	.gaidet-app .gd-wrapper {
		grid-template-columns: minmax(0, 1fr);
		min-width: 0;
		max-width: 100%;
		gap: 1.5rem;
	}

	.gaidet-app .content-area {
		min-width: 0;
		max-width: 100%;
	}

	.gaidet-app .sidebar-wrapper {
		position: static;
		width: 100%;
		min-width: 0;
		max-width: 100%;
		background: transparent;
		box-shadow: none;
		border: none;
		margin: 0;
		padding: 0;
	}

	.gaidet-app .gd-nav-header {
		display: block;
		font-size: 0.875rem;
		margin-top: 1rem;
		margin-bottom: 0.5rem;
	}

	.gaidet-app .gd-nav {
		display: flex;
		flex-direction: column;
		border-left: none;
		border-top: 1px solid var(--color-border);
		padding-bottom: 0;
		gap: 0;
		list-style: none;
		width: 100%;
	}

	.gaidet-app .gd-nav-item {
		margin-bottom: 0;
		flex-shrink: 0;
		width: 100%;
	}

	.gaidet-app .gd-nav-link {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
		border-left: none;
		margin-left: 0;
		background: transparent;
		border: none;
		border-bottom: 1px solid var(--color-border);
		color: var(--color-text-secondary);
		display: block;
		width: 100%;
	}

	.gaidet-app .gd-nav-link:hover {
		background: rgba(var(--color-tint--rgb), 0.06);
		color: var(--color-text-heading);
	}

	.gaidet-app .gd-nav-link._active {
		background: rgba(var(--color-tint--rgb), 0.06);
		color: var(--color-text-heading);
		font-weight: 500;
		border-left: 3px solid var(--color-text-heading);
		border-bottom: 1px solid var(--color-border);
	}

	.gaidet-app .sidebar-meta-nav {
		margin-top: 0;
		padding-top: 0;
	}

	.gaidet-app .sidebar-meta-nav .gd-nav-link {
		padding: 0.5rem 0.75rem;
		font-size: 0.8125rem;
		background: transparent;
		border: none;
		border-left: none;
		border-bottom: 1px solid var(--color-border);
		display: block;
		width: 100%;
	}

	.gaidet-app .sidebar-meta-nav .gd-nav-link._active {
		background: rgba(var(--color-tint--rgb), 0.06);
		color: var(--color-text-heading);
		font-weight: 500;
		border-left: 3px solid var(--color-text-heading);
		border-bottom: 1px solid var(--color-border);
	}
}

@media (max-width: 768px) {
	.gaidet-app .form-input {
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
	}

	.gaidet-app .form-textarea {
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
		min-height: 88px;
	}

	.gaidet-app .task-checklist {
		grid-template-columns: 1fr;
		padding: 10px 12px;
		gap: 0.5rem;
	}

	.gaidet-app .task-check-label {
		padding: 2px 0;
		min-height: auto;
		align-items: flex-start;
		font-size: 0.875rem;
		line-height: 1.35;
		gap: 0.75rem;
	}

	.gaidet-app .task-check-input {
		width: 17px;
		height: 17px;
		margin-top: 2px;
	}

	.gaidet-app .sources-list-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
		padding: 0.75rem 1rem;
	}

	.gaidet-app .source-item-meta {
		width: 100%;
	}

	.gaidet-app .source-item-link {
		font-size: 0.8125rem;
		word-break: break-all;
	}
}

@media (max-width: 640px) {
	.gaidet-app .gd-wrapper {
		padding: var(--page-top-gap) 0.75rem 2.5rem;
	}

	/* The phone scale: section headings under the page title. */
	.gaidet-app .step-section,
	.gaidet-app .attribution-section {
		padding-top: 2rem;
	}

	.gaidet-app .step-section {
		padding-bottom: 2rem;
	}

	.gaidet-app .step-section-title {
		font-size: var(--fs-section);
	}

	.gaidet-app .hero-title {
		font-size: var(--fs-title);
		line-height: 1.25;
	}

	.gaidet-app .hero-subtitle {
		font-size: var(--fs-secondary);
	}

	.gaidet-app .hero-desc {
		font-size: var(--fs-secondary);
		line-height: 1.5;
	}

	.gaidet-app .gd-howto__item {
		grid-template-columns: 1.75rem 1fr;
		align-items: start;
		gap: 0.25rem 0.75rem;
		padding: 0.75rem 0.75rem;
	}

	.gaidet-app .gd-howto__name {
		line-height: 1.75rem;
	}

	.gaidet-app .gd-howto__desc {
		grid-column: 2;
		font-size: var(--fs-secondary);
	}

	.gaidet-app .task-group-summary {
		padding: 8px 12px;
	}

	.gaidet-app .summary-title {
		font-size: 0.875rem;
	}

	.gaidet-app .tasks-toolbar {
		gap: 0.5rem 1rem;
	}

	.gaidet-app .output-action-row {
		flex-direction: column;
		gap: 0.5rem;
	}

	.gaidet-app .output-action-row .btn {
		width: 100%;
	}

	.gaidet-app .output-textarea {
		font-size: 0.8125rem;
		padding: 0.75rem;
		min-height: 160px;
	}

	.gaidet-app .attribution-inst-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		padding: 0;
	}

	.gaidet-app .attribution-gerb-img {
		width: 56px;
		height: 56px;
	}

	.gaidet-app .attribution-inst-title {
		font-size: 1.0625rem;
	}

	.gaidet-app .wiki-info-card,
	.gaidet-app .citation-card {
		padding: 1.25rem 1rem;
	}

	.gaidet-app .wiki-info-points {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

/* From the authors' Crossref helper (its own page until 2026-11). */

.gaidet-app .mono-field {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.9375rem;
}

.gaidet-app .name-input-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.75rem;
	align-items: center;
	max-width: 720px;
}

.gaidet-app .table-container {
	width: 100%;
	overflow-x: auto;
	border: 1px solid var(--color-border);
	background: var(--color-surface-card);
	margin-top: 1rem;
}

.gaidet-app .helper-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	text-align: left;
}

.gaidet-app .helper-table th {
	background: var(--color-blue-200);
	color: var(--color-white);
	font-weight: 500;
	padding: 0.75rem 1rem;
	white-space: nowrap;
	border-right: 1px solid rgba(255,255,255,0.15);
}

.gaidet-app .helper-table th:last-child {
	border-right: none;
}

.gaidet-app .helper-table td {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	vertical-align: middle;
}

.gaidet-app .helper-table td:last-child {
	border-right: none;
}

.gaidet-app .helper-table tbody tr:hover {
	background-color: rgba(var(--color-tint--rgb), 0.06);
}

.gaidet-app .helper-table tbody tr:last-child td {
	border-bottom: none;
}

.gaidet-app .task-id-badge {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--color-text-heading);
	background: rgba(var(--color-tint--rgb), 0.06);
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--color-border);
	display: inline-block;
}

.gaidet-app .task-label-primary {
	font-weight: 500;
	color: var(--color-text-heading);
	display: block;
	line-height: 1.35;
}

.gaidet-app .task-label-secondary {
	font-size: 0.8125rem;
	color: var(--color-text-secondary);
	display: block;
	margin-top: 0.25rem;
}

.gaidet-app .task-uri-text {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.8125rem;
	color: var(--color-link);
	word-break: break-all;
}

.gaidet-app .table-actions-cell {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}

/* The copy buttons of a table row: the site's small secondary button, a
   step lower, so a row of the table stays one line. */
.gaidet-app .table-actions-cell .btn {
	min-height: 32px;
	padding: 5px 11px;
	font-size: 0.8125rem;
	white-space: nowrap;
}

.gaidet-app .tip-box {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	background: var(--color-bg-secondary);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-text-heading);
	font-size: 0.875rem;
	color: var(--color-text-secondary);
	line-height: 1.55;
}

.gaidet-app .tip-box strong {
	color: var(--color-text-heading);
}

@media (max-width: 768px) {
	.gaidet-app .name-input-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.gaidet-app .table-container {
		overflow-x: visible;
		border: none;
		background: transparent;
	}

	.gaidet-app .helper-table tbody tr:hover {
		background-color: var(--color-surface-card);
		border-color: var(--color-link);
	}

	.gaidet-app .helper-table td {
		padding: 0 !important;
		border: none !important;
	}

	.gaidet-app .task-id-badge {
		font-size: 0.8125rem;
	}

	.gaidet-app .task-label-primary {
		font-size: 0.9375rem;
		margin-top: 0.125rem;
	}

	.gaidet-app .task-label-secondary {
		font-size: 0.875rem;
	}

	.gaidet-app .task-uri-text {
		display: block;
		font-size: 0.8125rem;
		word-break: break-all;
		background: rgba(var(--color-tint--rgb), 0.06);
		padding: 0.5rem 0.5rem;
		border: 1px solid var(--color-border);
		margin: 0.25rem 0;
	}

	.gaidet-app .table-actions-cell {
		display: grid;
		grid-template-columns: 1fr 1fr 1.35fr;
		gap: 0.5rem;
		margin-top: 0.25rem;
		width: 100%;
	}

	.gaidet-app .table-actions-cell .btn {
		width: 100%;
		min-height: 40px;
	}
}

@media (max-width: 640px) {
	.gaidet-app .tip-box {
		padding: 0.75rem 1rem;
		font-size: 0.8125rem;
	}
}

/* ------------------------------------------------- what the site adds */

.gaidet-app .gd-crumbs {
	margin-bottom: 0.75rem;
}

/* Steps and their menu are numbered by a counter, so the steps hidden for the
   other kind of work take no number. */
.gaidet-app .content-area {
	counter-reset: step;
}

.gaidet-app .step-section[data-step]:not([hidden]) {
	counter-increment: step;
}

.gaidet-app .step-section[data-step] .step-section-title {
	display: flex;
	align-items: flex-start;
	column-gap: 0.75rem;
}

.gaidet-app .step-section[data-step] .step-section-title::before {
	content: counter(step);
	display: grid;
	flex: none;
	place-items: center;
	width: 1.875rem;
	height: 1.875rem;
	background: var(--color-blue-200);
	color: var(--color-white);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.gaidet-app .step-section[data-step] .step-section-title::before {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.875rem;
	}
}

.gaidet-app .gd-nav {
	counter-reset: navstep;
}

.gaidet-app .gd-nav-item:not([hidden]) {
	counter-increment: navstep;
}

.gaidet-app .gd-nav-item .gd-nav-link::before {
	content: counter(navstep) ". ";
}

/* The Crossref helper numbers its menu in the words, as it did. */
.gaidet-app .gd-nav--plain .gd-nav-link::before {
	content: none;
}

/* style.css draws every input of the site as a bare underline. */
.gaidet-app .form-input,
.gaidet-app .form-textarea {
	-webkit-appearance: none;
	appearance: none;
}

.gaidet-app select.form-input {
	padding-right: 2.5rem;
	background-color: var(--color-surface-card);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
	background-size: 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.gaidet-app input[type="checkbox"],
.gaidet-app input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	background: none;
	accent-color: var(--color-blue-200);
	cursor: pointer;
}

.gaidet-app .form-field {
	display: block;
	margin-bottom: 1rem;
}

.gaidet-app .form-label {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--color-text-primary);
	font-size: 0.875rem;
	font-weight: 500;
}

.gaidet-app .form-row {
	display: grid;
	gap: 0 1.25rem;
}

@media (min-width: 768px) {
	.gaidet-app .form-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gaidet-app .form-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	margin-bottom: 1rem;
}

.gaidet-app .form-choice label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9375rem;
	cursor: pointer;
}

.gaidet-app .form-hint {
	display: block;
	margin-top: 0.25rem;
	color: var(--color-text-muted);
	font-size: 0.8125rem;
}

/* The search over the tasks and the count of ticked boxes on a stage. */
.gaidet-app .tasks-search {
	flex: 1 1 100%;
}

.gaidet-app .tasks-empty {
	margin-bottom: 0.75rem;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

.gaidet-app .summary-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	margin-left: auto;
	padding: 0 8px;
	background: var(--color-white);
	color: var(--color-blue-200);
	font-size: 0.8125rem;
	font-weight: 500;
}

.gaidet-app .summary-count:empty {
	display: none;
}

.gaidet-app .task-check-text {
	display: flex;
	flex-direction: column;
}

.gaidet-app .task-check-hint {
	color: var(--color-text-muted);
	font-size: 0.8125rem;
}

.gaidet-app .step-section-count {
	color: var(--color-text-secondary);
	font-size: 0.875rem;
	font-weight: 400;
}

.gaidet-app .confirm-list {
	display: grid;
	gap: 0.75rem;
}

/* The language of the declaration, before the buttons. */
.gaidet-app .output-lang {
	display: inline-flex;
	border: 1px solid var(--color-border);
	background: var(--color-surface-card);
}

.gaidet-app .output-lang-btn {
	min-height: 38px;
	padding: 0 1rem;
	border: 0;
	background: none;
	color: var(--color-text-secondary);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
}

.gaidet-app .output-lang-btn[aria-pressed="true"] {
	background: var(--color-blue-200);
	color: var(--color-white);
}

.gaidet-app .output-status {
	margin-top: 0.75rem;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

.gaidet-app .output-status ul {
	padding-left: 1.1em;
	list-style: disc;
}

.gaidet-app .output-status.is-ok {
	color: var(--color-text-heading);
	font-weight: 500;
}

/* The rules and the students' notes, in the boxes of the attribution. */
.gaidet-app .rules-grid {
	display: grid;
	gap: 1rem;
}

@media (min-width: 900px) {
	.gaidet-app .rules-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.gaidet-app .rules-grid .wiki-info-card {
	margin-bottom: 0;
}

.gaidet-app .rules-list {
	padding-left: 1.15em;
	color: var(--color-text-primary);
	font-size: 0.9375rem;
	line-height: 1.55;
	list-style: disc;
}

.gaidet-app .rules-list li + li {
	margin-top: 0.25rem;
}

.gaidet-app .rules-note {
	margin-top: 0.5rem;
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

.gaidet-app .rules-more {
	margin-top: 1rem;
	color: var(--color-text-secondary);
	font-size: 0.875rem;
}

.gaidet-app .rules-more a,
.gaidet-app .rules-grid a {
	color: var(--color-link);
}

/* The Crossref helper's search and its explanation preview. */
.gaidet-app .helper-search-box {
	margin-bottom: 1rem;
}

.gaidet-app .output-textarea--short {
	min-height: 180px;
	margin-top: 1rem;
}

/* --------------------------------------------------------------- print */

.gaidet-app .tool-print {
	display: none;
}

/* The student's declaration on a sheet of its own, to be signed: only the
   text, set as the university's papers are. */
/* ---------------------------------------------------------------- phones */

/* The Crossref helper's table on a narrow screen: each row a box of its own,
   the number and the task's names on top, the address under them, the three
   copy buttons in a row. The static helper meant this (its cells lose their
   padding and lines below 768px) but the rule that unmade the table was lost
   in the move, so four columns were squeezed into a phone's width and the
   buttons ran off its edge. The head stays for screen readers only. */
@media (max-width: 768px) {
	.gaidet-app .helper-table,
	.gaidet-app .helper-table tbody,
	.gaidet-app .helper-table tr,
	.gaidet-app .helper-table td {
		display: block;
	}

	.gaidet-app .helper-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.gaidet-app .helper-table tbody tr {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		gap: 0.5rem 0.75rem;
		margin-bottom: 0.5rem;
		padding: 0.75rem;
		border: 1px solid var(--color-border);
		background: var(--color-surface-card);
	}

	.gaidet-app .helper-table td:nth-child(n + 3),
	.gaidet-app .helper-table td[colspan] {
		grid-column: 1 / -1;
	}

	.gaidet-app .task-uri-text {
		margin: 0;
	}

	.gaidet-app .table-actions-cell {
		margin-top: 0;
	}
}

/* Phones: only sizes and spacing, a step below the desktop, as the owner
   asked of phone polish. The section heading sits under the page title. */
@media (max-width: 640px) {
	.gaidet-app .gd-nav-header {
		margin-top: 0;
	}

	.gaidet-app .gd-nav-link,
	.gaidet-app .sidebar-meta-nav .gd-nav-link {
		padding: 0.375rem 0.75rem;
	}

	.gaidet-app .hero-section {
		padding-bottom: 1.5rem;
	}

	.gaidet-app .hero-desc {
		margin-bottom: 1rem;
	}

	.gaidet-app .gd-howto {
		padding-top: 1rem;
	}

	.gaidet-app .gd-howto__title {
		margin-bottom: 0.5rem;
		font-size: 0.9375rem;
	}

	.gaidet-app .gd-howto__item {
		grid-template-columns: 1.5rem 1fr;
		gap: 0.25rem 0.75rem;
		padding: 0.5rem 0.75rem;
	}

	.gaidet-app .gd-howto__num {
		width: 1.5rem;
		height: 1.5rem;
		font-size: 0.8125rem;
	}

	.gaidet-app .gd-howto__name {
		font-size: 0.9375rem;
		line-height: 1.5rem;
	}

	.gaidet-app .gd-howto__desc {
		font-size: 0.8125rem;
	}

	.gaidet-app .step-section,
	.gaidet-app .attribution-section {
		padding-top: 1.5rem;
	}

	.gaidet-app .step-section {
		padding-bottom: 1.5rem;
	}

	.gaidet-app .step-section-header {
		margin-bottom: 1rem;
	}

	.gaidet-app .step-section-title {
		font-size: 1.25rem;
		line-height: 1.5rem;
	}

	.gaidet-app .step-section[data-step] .step-section-title::before {
		width: 1.5rem;
		height: 1.5rem;
		font-size: 0.8125rem;
	}

	.gaidet-app .step-section-desc,
	.gaidet-app .form-label,
	.gaidet-app .form-hint {
		font-size: 0.8125rem;
	}

	.gaidet-app .form-choice {
		gap: 0.25rem 1.25rem;
	}

	.gaidet-app .form-choice label,
	.gaidet-app .rules-list,
	.gaidet-app .wiki-info-desc,
	.gaidet-app .wiki-point-item,
	.gaidet-app .citation-text,
	.gaidet-app .sources-list-item {
		font-size: 0.875rem;
	}

	.gaidet-app .rules-grid {
		gap: 0.75rem;
	}

	.gaidet-app .wiki-info-card,
	.gaidet-app .rules-grid .wiki-info-card,
	.gaidet-app .citation-card {
		padding: 1rem;
	}

	.gaidet-app .wiki-info-label,
	.gaidet-app .citation-label,
	.gaidet-app .attribution-inst-title {
		font-size: 0.9375rem;
	}

	.gaidet-app .rules-note,
	.gaidet-app .rules-more,
	.gaidet-app .attribution-inst-text {
		font-size: 0.8125rem;
	}

	.gaidet-app .attribution-gerb-img {
		width: 48px;
		height: 48px;
	}

	.gaidet-app .sources-list-item {
		padding: 0.5rem 0.75rem;
	}
}

@media print {
	@page {
		margin: 20mm 15mm 20mm 25mm;
	}

	body:has(.tool-print) .header,
	body:has(.tool-print) .footer,
	body:has(.tool-print) .gaidet-app > :not(.tool-print),
	body:has(.tool-print) .site-main ~ * {
		display: none !important;
	}

	body:has(.tool-print) * {
		visibility: hidden;
	}

	body .tool-print,
	body .tool-print * {
		visibility: visible;
	}

	body .gaidet-app {
		background: none;
	}

	body .gaidet-app .tool-print {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		color: #000;
		font-family: "Times New Roman", Times, serif;
		font-size: 14pt;
		line-height: 1.5;
	}

	.gaidet-app .tool-print__org {
		margin: 0 0 18pt;
		text-align: center;
	}

	.gaidet-app .tool-print__text {
		white-space: pre-wrap;
	}
}
