/*
Theme Name:   Csontváry-val utazunk
Theme URI:    https://csontvary.imac.hu/
Description:  A Twenty Twenty-Four gyermektémája a „Csontváry-val utazunk” bloghoz. Bal oldali tartalomjegyzék-sáv országonként, lapozás a festmények között, teljes képernyős képnéző további nagyítással, kattintható tartalomjegyzék, tartalmi sorrend az oldalmenüben.
Author:       Csontváry-val utazunk
Template:     twentytwentyfour
Version:      1.1.2
Requires at least: 6.5
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  csontvary
*/

/* Hallmark · genre: editorial · macrostructure: Index-First + Long Document · nav: side-rail index (sticky) · footer: Ft2 inline single line
 * theme: studied-DNA (source: usehallmark.com/_tests/06-anya-portfolio) · warmed paper
 * paper oklch(98.6% 0.007 85) · accent oklch(44% 0.16 248) sea-blue · second marker oklch(76% 0.15 72) ochre
 * display + body: Inter Tight · outlier: JetBrains Mono (codes, labels)
 * pre-emit critique: P4 H5 E4 S5 R4 V4
 */

/* =========================================================================
   Tokenek
   ====================================================================== */

:root {
	/* Színek – a theme.json palettájából */
	--color-paper:       var(--wp--preset--color--base);
	--color-paper-2:     var(--wp--preset--color--base-2);
	--color-paper-3:     var(--wp--preset--color--accent-5);
	--color-rule:        var(--wp--preset--color--accent-3);
	--color-ink:         var(--wp--preset--color--contrast);
	--color-ink-soft:    var(--wp--preset--color--contrast-2);
	--color-ink-muted:   var(--wp--preset--color--contrast-3);
	--color-accent:      var(--wp--preset--color--accent);
	--color-accent-soft: var(--wp--preset--color--accent-4);
	--color-sun:         var(--wp--preset--color--accent-2);
	--color-focus:       var(--wp--preset--color--accent);
	--color-flash:       oklch(76% 0.15 72 / 0.32);
	--color-viewer:      oklch(17% 0.015 252 / 0.97);
	--color-viewer-ink:  oklch(95% 0.006 85);
	--color-viewer-btn:  oklch(95% 0.006 85 / 0.12);
	--color-viewer-btn-hover: oklch(95% 0.006 85 / 0.26);
	--color-viewer-shade: oklch(10% 0.01 252 / 0.7);
	--color-shadow:      oklch(10% 0.01 252 / 0.5);

	/* Betűk */
	--font-body:    var(--wp--preset--font-family--body);
	--font-display: var(--wp--preset--font-family--heading);
	--font-mono:    var(--wp--preset--font-family--mono);

	/* Méretek */
	--text-2xs: 0.6875rem;
	--text-xs:  0.75rem;
	--text-sm:  0.8125rem;
	--text-nav: 0.875rem;
	--text-md:  1.0625rem;
	--text-lg:  1.625rem;
	--text-display: clamp(2rem, 1.2rem + 3vw, 3.25rem);

	/* 4 pontos térköz-skála */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs:  0.75rem;
	--space-sm:  1rem;
	--space-md:  1.5rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 4.5rem;
	--space-3xl: 6.5rem;
	--gutter:    clamp(1rem, 4vw, 2rem);

	--rail-width: 17.5rem;
	--measure:    var(--wp--style--global--content-size, 40rem);
	--media-max:  52rem;
	--admin-bar:  var(--wp-admin--admin-bar--height, 0px);

	--ease-out:  cubic-bezier(0.2, 0.8, 0.2, 1);
	--dur-micro: 120ms;
	--dur-short: 220ms;
	--radius-sm: 3px;
}

/* =========================================================================
   Alap
   ====================================================================== */

html,
body {
	overflow-x: clip;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--color-accent-soft);
	color: var(--color-ink);
}

:where(a, button, summary):focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* =========================================================================
   Elrendezés: sáv + tartalom
   ====================================================================== */

.wp-site-blocks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	padding-inline: var(--gutter);
}

.wp-site-blocks > * {
	margin-block: 0 !important;
	min-width: 0;
}

@media (min-width: 64rem) {
	.wp-site-blocks {
		grid-template-columns: var(--rail-width) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		column-gap: clamp(2.5rem, 5vw, 5.5rem);
		max-width: 84rem;
		margin-inline: auto;
		padding-inline: var(--space-lg);
		min-height: 100dvh;
	}

	.wp-site-blocks > header.wp-block-template-part {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	.wp-site-blocks > main,
	.wp-site-blocks > footer.wp-block-template-part {
		grid-column: 2;
	}
}

/* =========================================================================
   Tartalomjegyzék-sáv
   ====================================================================== */

.csv-rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: var(--space-sm);
	padding-block: var(--space-md);
	border-block-end: 1px solid var(--color-rule);
	margin: 0;
}

.csv-rail > *,
.csv-rail__head > * {
	margin-block: 0;
}

.csv-rail__brand {
	font-family: var(--font-display);
	font-size: var(--text-nav);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
}

.csv-rail__brand a {
	color: var(--color-ink);
	text-decoration: none;
	white-space: nowrap;
}

.csv-rail__brand a:hover {
	color: var(--color-accent);
}

.csv-rail__role {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.02em;
	color: var(--color-ink-soft);
	margin-block-start: var(--space-3xs) !important;
	line-height: 1.5;
}

/* Mobilon a nav „szétesik” a rács celláira: gomb jobbra fent, lista alatta. */
.csv-index {
	display: contents;
}

.csv-index__toggle {
	grid-column: 2;
	grid-row: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2xs);
	min-height: 44px;
	padding: 0 var(--space-sm);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-sm);
	background: var(--color-paper-2);
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	white-space: nowrap;
	cursor: pointer;
	transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.csv-index__toggle:hover {
	border-color: var(--color-accent);
}

.csv-index__toggle:active {
	background: var(--color-paper-3);
}

.csv-index__toggle-icon {
	width: 0.5rem;
	height: 0.5rem;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dur-short) var(--ease-out);
}

.csv-index__toggle[aria-expanded="true"] .csv-index__toggle-icon {
	transform: translateY(2px) rotate(-135deg);
}

.csv-index__list {
	grid-column: 1 / -1;
}

.csv-rail.is-collapsed .csv-index__list {
	display: none;
}

.csv-index__list,
.csv-index__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}

.csv-index__list {
	display: grid;
	gap: 1px;
	margin-block-start: var(--space-md);
	padding-block-start: var(--space-sm);
	border-block-start: 1px solid var(--color-rule);
}

.csv-index__link,
.csv-index__summary {
	display: block;
	padding: 0.3125rem var(--space-2xs);
	font-size: var(--text-nav);
	line-height: 1.35;
	color: var(--color-ink-soft);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

/* A cím eleji jelölés („E/20.”, „A)”) – csak kiemelés, a szöveg változatlan */
.csv-code {
	font-family: var(--font-mono);
	font-size: 0.86em;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

.csv-index__link,
.csv-index__label {
	overflow-wrap: anywhere;
}

.csv-index__link:hover,
.csv-index__summary:hover {
	color: var(--color-accent);
}

.csv-index__link[aria-current="page"] {
	color: var(--color-ink);
	font-weight: 600;
	background: linear-gradient(90deg, var(--color-accent-soft), transparent 92%);
	box-shadow: inset 2px 0 0 var(--color-sun);
}

.csv-index__item > .csv-index__link,
.csv-index__summary {
	color: var(--color-ink);
	font-weight: 500;
}

/* Országok: összecsukható csoportok */
.csv-index__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--space-xs);
	align-items: baseline;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.csv-index__summary::-webkit-details-marker {
	display: none;
}

.csv-index__count {
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 400;
	color: var(--color-ink-muted);
	font-variant-numeric: tabular-nums;
}

.csv-index__count::after {
	content: "+";
	display: inline-block;
	width: 1.25ch;
	margin-inline-start: var(--space-3xs);
	text-align: center;
	color: var(--color-ink-soft);
}

details[open] > .csv-index__summary .csv-index__count::after {
	content: "−";
}

details[open] > .csv-index__summary {
	color: var(--color-ink);
}

.csv-index__sub {
	display: grid;
	gap: 1px;
	margin: var(--space-3xs) 0 var(--space-xs);
	border-inline-start: 1px solid var(--color-rule);
	margin-inline-start: calc(1.375ch);
	padding-inline-start: calc(1.375ch + var(--space-xs) - 1px);
}

.csv-index__sub .csv-index__link {
	font-size: var(--text-sm);
}

.csv-index__sub .csv-code {
	color: var(--color-ink-muted);
}

.csv-index__sub .csv-index__link:hover .csv-code,
.csv-index__sub .csv-index__link[aria-current="page"] .csv-code {
	color: var(--color-accent);
}

.csv-index__link--intro {
	font-family: var(--font-mono);
	font-size: var(--text-2xs) !important;
	letter-spacing: 0.04em;
	color: var(--color-ink-muted);
}

.csv-index__subhead {
	margin-block-start: var(--space-xs);
}

.csv-index__link--subhead {
	font-weight: 600;
	color: var(--color-ink);
	border-block-start: 1px dashed var(--color-rule);
	padding-block-start: var(--space-xs);
}

@media (min-width: 64rem) {
	.wp-site-blocks > header.wp-block-template-part {
		padding-block-start: var(--space-2xl);
	}

	.csv-rail {
		display: block;
		position: sticky;
		top: calc(var(--admin-bar) + var(--space-lg));
		max-height: calc(100dvh - var(--admin-bar) - var(--space-xl));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
		scrollbar-color: var(--color-rule) transparent;
		padding: 0 var(--space-2xs) var(--space-lg) 0;
		border-block-end: 0;
	}

	.csv-index {
		display: block;
	}

	.csv-index__toggle {
		display: none;
	}

	.csv-rail.is-collapsed .csv-index__list {
		display: grid;
	}

	.csv-index__list {
		margin-block-start: var(--space-xl);
	}
}

/* =========================================================================
   Tartalom
   ====================================================================== */

.csv-main {
	padding-block: var(--space-xl) var(--space-2xl);
	margin: 0;
}

@media (min-width: 64rem) {
	.csv-main {
		padding-block: var(--space-2xl) var(--space-3xl);
	}
}

.csv-main .has-global-padding {
	padding-inline: 0;
}

/* Balra zárt hasáb a rácsban, nem középre igazítva */
.csv-main .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-inline: 0 !important;
}

.csv-main > * {
	margin-block: 0;
}

/* Cím */
.csv-title {
	max-width: var(--media-max);
	margin-block-end: var(--space-lg) !important;
}

.csv-eyebrow {
	margin: 0 0 var(--space-sm);
	padding-inline-start: var(--space-sm);
	border-inline-start: 3px solid var(--color-sun);
	font-size: var(--text-sm);
	line-height: 1.4;
	color: var(--color-ink-soft);
}

.csv-eyebrow__parent {
	color: var(--color-ink-soft);
	text-decoration: none;
}

.csv-eyebrow__parent:hover {
	color: var(--color-accent);
}

.csv-title .wp-block-post-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-display);
	font-weight: 600;
	font-style: normal;
	line-height: 1.06;
	letter-spacing: -0.028em;
	color: var(--color-ink);
	text-align: start;
	overflow-wrap: anywhere;
	min-width: 0;
	text-wrap: balance;
}

.csv-title .wp-block-post-title .csv-code {
	font-size: 0.6em;
	font-weight: 500;
	vertical-align: 0.12em;
}

.csv-featured {
	max-width: var(--media-max);
	margin-block-end: var(--space-xl) !important;
}

/* Folyószöveg */
.csv-main .wp-block-post-content {
	font-size: var(--text-md);
	line-height: 1.68;
	color: var(--color-ink);
}

.csv-main .wp-block-post-content > * {
	margin-block: 0 var(--space-sm);
}

.csv-main .wp-block-post-content > :first-child {
	margin-block-start: 0 !important;
}

.csv-main .wp-block-post-content p {
	text-wrap: pretty;
}

.csv-main .wp-block-post-content strong,
.csv-main .wp-block-post-content b {
	font-weight: 600;
}

.csv-main .wp-block-post-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in oklch, var(--color-accent) 40%, transparent);
	transition: text-decoration-color var(--dur-micro) var(--ease-out);
}

.csv-main .wp-block-post-content a:hover {
	text-decoration-color: var(--color-accent);
}

/* Fejezetcímek: valódi címsorok és a „Nagy” betűméretű bekezdések */
.csv-main .wp-block-post-content :where(h2, h3, h4),
.csv-main .wp-block-post-content p:is(.has-large-font-size, .has-x-large-font-size, .has-xx-large-font-size) {
	font-family: var(--font-display);
	font-weight: 600;
	font-style: normal;
	letter-spacing: -0.018em;
	line-height: 1.2;
	color: var(--color-ink);
	text-wrap: balance;
	margin-block: var(--space-2xl) var(--space-sm);
	padding-block-start: var(--space-md);
	border-block-start: 1px solid var(--color-rule);
}

.csv-main .wp-block-post-content :where(h2, h3, h4)::before,
.csv-main .wp-block-post-content p:is(.has-large-font-size, .has-x-large-font-size, .has-xx-large-font-size)::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	margin-block: calc(-1 * var(--space-md) - 2px) var(--space-md);
	background: var(--color-sun);
}

.csv-main .wp-block-post-content p.has-large-font-size {
	font-size: var(--text-lg) !important;
}

.csv-main .wp-block-post-content h2 { font-size: var(--text-lg); }
.csv-main .wp-block-post-content h3 { font-size: 1.3125rem; }
.csv-main .wp-block-post-content h4 { font-size: var(--text-md); }

/* Üres bekezdés ne nyisson nagy lyukat */
.csv-main .wp-block-post-content p:empty {
	margin: 0;
	height: var(--space-xs);
}

.csv-main .wp-block-post-content .wp-block-spacer {
	max-height: var(--space-lg);
}

/* Képek: a festmények szélesebbek lehetnek, mint a szövegsáv */
.csv-main .wp-block-post-content > figure,
.csv-main .wp-block-post-content > .wp-block-image,
.csv-main .wp-block-post-content > .wp-block-gallery,
.csv-main .wp-block-post-content > .wp-block-columns,
.csv-main .wp-block-post-content > .alignwide {
	max-width: var(--media-max) !important;
	margin-block: var(--space-lg) var(--space-lg);
}

.csv-main .wp-block-post-content figure img {
	display: block;
	height: auto;
	border-radius: var(--radius-sm);
	background: var(--color-paper-2);
}

.csv-main .wp-block-post-content figcaption,
.csv-main .wp-block-post-content .wp-element-caption {
	margin-block-start: var(--space-xs);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--color-ink-soft);
	text-align: start;
}

.csv-main .wp-block-post-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-md);
	border-inline-start: 2px solid var(--color-sun);
	color: var(--color-ink-soft);
}

.csv-main .wp-block-post-content hr,
.csv-main .wp-block-post-content .wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--color-rule);
	margin-block: var(--space-xl);
}

/* =========================================================================
   Lapozó
   ====================================================================== */

.csv-pager {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-sm);
	max-width: var(--media-max);
	margin-block-start: var(--space-2xl) !important;
	padding-block-start: var(--space-md);
	border-block-start: 1px solid var(--color-rule);
}

@media (min-width: 40rem) {
	.csv-pager {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--space-lg);
	}
}

.csv-pager__cell {
	display: grid;
	gap: var(--space-3xs);
	padding: var(--space-sm);
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-sm);
	background: var(--color-paper);
	color: var(--color-ink);
	text-decoration: none;
	transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

span.csv-pager__cell {
	border-color: transparent;
	background: none;
}

.csv-pager__cell--next {
	text-align: end;
}

a.csv-pager__cell:hover {
	border-color: var(--color-accent);
	background: var(--color-paper-2);
}

a.csv-pager__cell:active {
	background: var(--color-paper-3);
}

.csv-pager__dir {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ink-soft);
	white-space: nowrap;
}

.csv-pager__title {
	font-weight: 500;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

a.csv-pager__cell:hover .csv-pager__title {
	color: var(--color-accent);
}


/* =========================================================================
   Lábléc
   ====================================================================== */

.csv-foot {
	padding-block: var(--space-md) var(--space-xl);
	border-block-start: 1px solid var(--color-rule);
	font-size: var(--text-sm);
	color: var(--color-ink-soft);
	margin: 0;
}

.csv-foot p {
	margin: 0;
}

.csv-foot strong {
	color: var(--color-ink);
	font-weight: 600;
}

/* =========================================================================
   Kattintható tartalomjegyzék (a. b. c. … pontok)
   ====================================================================== */

.wp-block-post-content [id] {
	scroll-margin-top: calc(var(--admin-bar) + var(--space-lg));
}

.csv-toc-item {
	margin-block: 0 var(--space-3xs) !important;
}

.csv-toc-link {
	color: var(--color-ink) !important;
	text-decoration: none !important;
	border-block-end: 1px solid var(--color-rule);
	transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}

.csv-toc-link:hover,
.csv-toc-link:focus-visible {
	color: var(--color-accent) !important;
	border-color: var(--color-accent);
}

.csv-toc-item::before {
	content: "→";
	display: inline-block;
	width: 1.5ch;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-sun);
}

.csv-back-to-toc {
	display: inline-block;
	margin-inline-start: var(--space-xs);
	font-family: var(--font-mono);
	font-size: var(--text-2xs);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
	text-decoration: none !important;
	color: var(--color-ink-muted) !important;
	white-space: nowrap;
}

.csv-back-to-toc:hover,
.csv-back-to-toc:focus-visible {
	color: var(--color-accent) !important;
}

@keyframes csv-flash {
	0%   { background-color: var(--color-flash); }
	100% { background-color: transparent; }
}

.csv-flash {
	animation: csv-flash 1.6s var(--ease-out);
	border-radius: var(--radius-sm);
}

/* =========================================================================
   Képek a tartalomban
   ====================================================================== */

.wp-block-post-content figure.wp-block-image img {
	cursor: zoom-in;
}

/* A beépített (kis) nagyítás gombot elrejtjük, a saját képnéző veszi át */
.wp-block-post-content .wp-lightbox-container .lightbox-trigger {
	display: none !important;
}

/* =========================================================================
   Képnéző
   ====================================================================== */

.csv-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: var(--color-viewer);
	display: none;
	color: var(--color-viewer-ink);
	font-family: var(--font-body);
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.csv-viewer.is-open {
	display: block;
}

.csv-viewer__stage {
	position: absolute;
	inset: 0;
	overflow: hidden;
	cursor: grab;
}

.csv-viewer__stage.is-dragging {
	cursor: grabbing;
}

.csv-viewer__img {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	max-width: none !important;
	max-height: none !important;
	will-change: transform;
	box-shadow: 0 4px 30px var(--color-shadow);
}

.csv-viewer__img.is-animating {
	transition: transform var(--dur-short) var(--ease-out);
}

.csv-viewer__bar {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: 6px;
	padding: 10px;
	z-index: 2;
}

.csv-viewer__btn {
	appearance: none;
	border: 0;
	background: var(--color-viewer-btn);
	color: var(--color-viewer-ink);
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color var(--dur-micro) var(--ease-out);
}

.csv-viewer__btn:hover,
.csv-viewer__btn:focus-visible {
	background: var(--color-viewer-btn-hover);
}

.csv-viewer__btn:focus-visible {
	outline: 2px solid var(--color-sun);
	outline-offset: 2px;
}

.csv-viewer__btn svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.csv-viewer__zoom-label {
	min-width: 56px;
	height: 44px;
	display: grid;
	place-items: center;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	opacity: .8;
	font-variant-numeric: tabular-nums;
}

.csv-viewer__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 52px;
	height: 72px;
}

.csv-viewer__nav--prev { left: 10px; }
.csv-viewer__nav--next { right: 10px; }

.csv-viewer__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 12px 70px 16px;
	text-align: center;
	font-size: 15px;
	line-height: 1.4;
	background: linear-gradient(transparent, var(--color-viewer-shade));
	pointer-events: none;
	z-index: 2;
}

.csv-viewer__counter {
	position: absolute;
	top: 0;
	left: 0;
	padding: 22px 16px;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	opacity: .7;
	z-index: 2;
}

.csv-viewer__hint {
	position: absolute;
	left: 50%;
	bottom: 60px;
	transform: translateX(-50%);
	padding: 8px 14px;
	border-radius: 20px;
	background: var(--color-viewer-btn);
	font-size: var(--text-sm);
	opacity: 0;
	transition: opacity .4s var(--ease-out);
	pointer-events: none;
	z-index: 2;
	white-space: nowrap;
}

.csv-viewer__hint.is-visible {
	opacity: 1;
}

.csv-viewer__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid var(--color-viewer-btn-hover);
	border-top-color: var(--color-viewer-ink);
	border-radius: 50%;
	animation: csv-spin .8s linear infinite;
	display: none;
	z-index: 1;
}

.csv-viewer.is-loading .csv-viewer__spinner {
	display: block;
}

@keyframes csv-spin {
	to { transform: rotate(360deg); }
}

body.csv-viewer-open {
	overflow: hidden;
}

@media (max-width: 600px) {
	.csv-viewer__nav { width: 40px; height: 56px; }
	.csv-viewer__nav--prev { left: 4px; }
	.csv-viewer__nav--next { right: 4px; }
	.csv-viewer__caption { padding: 10px 50px 14px; font-size: 13px; }
	.csv-viewer__zoom-label { display: none; }
	.csv-viewer__btn--zoomin,
	.csv-viewer__btn--zoomout { display: none; }
	.csv-viewer__hint { white-space: normal; text-align: center; width: 80%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		transition-duration: 1ms !important;
		animation-duration: 1ms !important;
	}
	.csv-viewer__spinner { animation-duration: .8s !important; }
}