/*
 * VP Guestbook — a 1996 guestbook page.
 *
 * On a theme that sets html[data-mode="1996"|"2026"] (Violet Pixels) the
 * book shows in 1996 and a short notice shows in 2026; on any other theme
 * the book simply shows. Colours, fonts and borders come from the theme's
 * custom properties with the Violet Pixels violets as fallbacks, so the
 * palette stays within the six violets and the one accent pink.
 *
 * The look is period: raised and sunken bevels, a grooved rule, a hit
 * counter, bracketed links and a blinking NEW! (which stays still for
 * anyone who asks for reduced motion). Mobile first.
 *
 * Author: Steve Austen, The PCGP.
 */

/* ---------- Which one shows ---------- */
.vpgb-closed { display: none; }
html[data-mode="2026"] .vpgb-book { display: none; }
html[data-mode="2026"] .vpgb-closed { display: block; }

.vpgb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vpgb-book .screen-reader-text, .vpgb-closed .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- The 2026 notice ---------- */
.vpgb-closed { max-width: 640px; margin: 8px 0 24px; padding: 24px; background: var(--bg2, #1E0F33); border: 1px solid var(--line, #3E2166); border-radius: var(--radius, 10px); }
.vpgb-closed p { margin: 0 0 12px; }
.vpgb-closed p:last-child { margin-bottom: 0; }
.vpgb-closed-title { font-size: 1.25rem; font-weight: 500; }

/* ---------- The book ---------- */
.vpgb-book {
	--vpgb-light: var(--v5, #F2E9FF);
	--vpgb-dark: var(--v2, #3E2166);
	--vpgb-ink: var(--v0, #12071F);
	max-width: 820px;
	color: var(--fg, #12071F);
	font-family: var(--font, "IBM Plex Mono", "Courier New", monospace);
}
.vpgb-book p { max-width: none; }
/* The theme pads and rules every section and narrows lists in page content; the book sets its own. */
.vpgb-book section { padding: 0; border-top: 0; }
.vpgb-book .vpgb-list { max-width: none; }
.vpgb-book h2 { font-family: var(--display, "Silkscreen", "Courier New", monospace); font-size: clamp(1.1rem, 2.4vw, 1.5rem); margin: 0 0 14px; }


.vpgb-welcome { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; }
.vpgb-welcome-text { flex: 1 1 18rem; }
.vpgb-counter { display: inline-flex; gap: 2px; padding: 3px; background: var(--vpgb-ink); border: 2px solid var(--vpgb-dark); border-right-color: var(--vpgb-light); border-bottom-color: var(--vpgb-light); }
.vpgb-counter span { display: inline-block; min-width: 1.15em; padding: 1px 2px; text-align: center; background: #1E0F33; color: var(--v4, #B14CFF); font-weight: 500; line-height: 1.3; }
.vpgb-jump, .vpgb-pages { margin: 0 0 6px; }
.vpgb-jump a, .vpgb-pages a { color: var(--fg, #12071F); }

.vpgb-rule { height: 0; margin: 26px 0; border: 0; border-top: 2px solid var(--vpgb-dark); border-bottom: 2px solid var(--vpgb-light); }

/* ---------- The form ---------- */
.vpgb-form { display: grid; gap: 14px; padding: 18px; background: var(--bg2, #F2E9FF); border: 3px solid var(--vpgb-light); border-right-color: var(--vpgb-dark); border-bottom-color: var(--vpgb-dark); }
.vpgb-field label { display: block; font-weight: 500; margin: 0 0 4px; }
.vpgb-req { color: var(--vpgb-dark); }
.vpgb-form input[type="text"], .vpgb-form input[type="url"], .vpgb-form select, .vpgb-form textarea {
	width: 100%; padding: 8px 10px; font: inherit; font-size: 1rem; color: var(--vpgb-ink); background: #FFFFFF;
	border: 3px solid var(--vpgb-dark); border-right-color: var(--vpgb-light); border-bottom-color: var(--vpgb-light); border-radius: 0;
}
.vpgb-form textarea { resize: vertical; min-height: 8em; }
.vpgb-form [aria-invalid="true"] { outline: 3px dashed var(--vpgb-dark); outline-offset: 2px; }
.vpgb-rules { margin: 0; font-size: .9rem; color: var(--fg2, #3E2166); }
.vpgb-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.vpgb-fax { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 640px) {
	/* Table-style rows: label on the left, box on the right. */
	.vpgb-form { grid-template-columns: 11rem 1fr; column-gap: 16px; padding: 22px; }
	.vpgb-field { display: contents; }
	.vpgb-field label { margin: 0; padding-top: 10px; text-align: right; }
	.vpgb-wide label { align-self: start; }
	.vpgb-smiley-bar, .vpgb-wide textarea { grid-column: 2; }
	.vpgb-rules, .vpgb-buttons { grid-column: 2; }
}

.vpgb-button {
	padding: 9px 16px; font: inherit; font-weight: 500; cursor: pointer; color: var(--vpgb-ink); background: var(--lilac2, #B899DB);
	border: 3px solid var(--vpgb-light); border-right-color: var(--vpgb-dark); border-bottom-color: var(--vpgb-dark); border-radius: 0;
}
.vpgb-button:active { border-color: var(--vpgb-dark); border-right-color: var(--vpgb-light); border-bottom-color: var(--vpgb-light); }
.vpgb-submit { background: var(--vpgb-dark); color: var(--vpgb-light); border-color: var(--v3, #7F3FD6); border-right-color: var(--vpgb-ink); border-bottom-color: var(--vpgb-ink); }
.vpgb-button[disabled] { cursor: wait; opacity: .7; }
.vpgb-button:focus-visible, .vpgb-smiley-btn:focus-visible { outline: 3px solid var(--vpgb-ink); outline-offset: 2px; }

.vpgb-smiley-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .9rem; }
.vpgb-smiley-btn { display: inline-flex; width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center; cursor: pointer; background: var(--lilac2, #B899DB); border: 3px solid var(--vpgb-light); border-right-color: var(--vpgb-dark); border-bottom-color: var(--vpgb-dark); }
.vpgb-smiley-btn svg { width: 16px; height: 16px; }

/* ---------- Messages to the visitor ---------- */
.vpgb-thanks, .vpgb-errors { margin: 0 0 16px; padding: 14px 16px; background: var(--bg2, #F2E9FF); border: 3px solid var(--vpgb-dark); }
.vpgb-thanks p, .vpgb-errors p, .vpgb-errors ul { margin: 0 0 6px; }
.vpgb-thanks p:last-child, .vpgb-errors > :last-child { margin-bottom: 0; }
.vpgb-thanks-title { font-family: var(--display, "Silkscreen", "Courier New", monospace); font-size: 1.05rem; }
.vpgb-errors { border-style: dashed; }
.vpgb-errors ul { padding-left: 20px; }

/* ---------- Entries ---------- */
.vpgb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.vpgb-entry { background: var(--bg2, #F2E9FF); border: 3px solid var(--vpgb-light); border-right-color: var(--vpgb-dark); border-bottom-color: var(--vpgb-dark); }
.vpgb-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 6px 12px; background: var(--vpgb-dark); color: var(--vpgb-light); }
.vpgb-no { font-size: .9rem; opacity: .85; }
.vpgb-author { font-weight: 500; overflow-wrap: anywhere; }
.vpgb-new { display: inline-block; padding: 0 6px; font-size: .78rem; font-weight: 500; background: var(--pink, #D94BB0); color: var(--vpgb-ink); }
@media (prefers-reduced-motion: no-preference) {
	.vpgb-new { animation: vpgb-blink 1.2s steps(2, start) infinite; }
}
@keyframes vpgb-blink { to { visibility: hidden; } }
.vpgb-facts { margin: 0; padding: 10px 12px 0; display: grid; gap: 2px; font-size: .92rem; }
.vpgb-facts div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.vpgb-facts dt { font-weight: 500; min-width: 6.5em; }
.vpgb-facts dd { margin: 0; overflow-wrap: anywhere; }
.vpgb-facts a { color: var(--fg, #12071F); }
.vpgb-message { padding: 8px 12px 12px; border-top: 0; overflow-wrap: anywhere; }
.vpgb-message p { margin: 6px 0 0; }
.vpgb-reply { margin: 0 12px 12px; padding: 8px 12px; border: 2px dashed var(--vpgb-dark); }
.vpgb-reply p { margin: 0; }
.vpgb-reply-head { font-weight: 500; margin-bottom: 4px !important; }
.vpgb-smiley { display: inline-block; vertical-align: -3px; }
.vpgb-smiley svg { display: block; width: 16px; height: 16px; }
.vpgb-empty { font-style: italic; }
.vpgb-pages { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; margin-top: 18px; }