:root {
    --gb-ink: #16302e;
    --gb-border: #1c4b46;
    --gb-bg: #eafaf6;
    --gb-accent: #2f8f74;
    --gb-accent-dark: #1f6b56;
    --gb-success-bg: #dff5e4;
    --gb-success-border: #3a9a5c;
    --gb-success-ink: #1c5a34;
}

.guestbook-layout,
.guestbook-layout *,
.guestbook-layout *::before,
.guestbook-layout *::after {
    box-sizing: border-box;
}

.guestbook-layout {
    display: flex;
    align-items: flex-start; /* form's height must stay intrinsic -- see guestbook.js */
    gap: 1.5rem;
    /* No max-width here on purpose: the two panels should always split
       whatever width the actual parent container provides, 50/50 -- not
       cap out and leave dead space once the container gets wide. */
}

.guestbook-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 50%;
    min-width: 0;
    padding: 1.5rem;
    background: var(--gb-bg);
    border: 2px dashed var(--gb-border);
    border-radius: 10px;
}

.guestbook-entries {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%;
    min-width: 0;
    min-height: 0; /* lets the inner list actually scroll instead of overflowing the flex box */
    max-height: 24rem; /* fallback cap if JS hasn't run yet / is disabled; JS sets an exact px height that overrides this */
    padding: 1.5rem;
    background: var(--gb-bg);
    border: 2px dashed var(--gb-border);
    border-radius: 10px;
}

.guestbook-entries-title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--gb-ink);
}

.guestbook-entries-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    overflow-y: auto; /* the scrollbar that keeps the panel's shape fixed */
    min-height: 0;
    flex: 1 1 auto;
}

.guestbook-entry {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--gb-border);
}

.guestbook-entry:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.guestbook-entry-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.guestbook-entry-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.guestbook-entry-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.guestbook-entry-name {
    font-weight: 600;
    color: var(--gb-ink);
    text-decoration: none;
}

.guestbook-entry-name[href]:hover,
.guestbook-entry-name[href]:focus-visible {
    text-decoration: underline;
}

.guestbook-entry-date {
    font-size: 0.8rem;
    color: #5c7d78;
}

.guestbook-entry-content {
    margin: 0;
    color: var(--gb-ink);
    overflow-wrap: break-word;
}

.guestbook-entries-empty {
    margin: 0;
    color: #5c7d78;
    font-style: italic;
}

@media (max-width: 700px) {
    .guestbook-layout {
        flex-direction: column;
        align-items: stretch;
        max-width: 34rem;
    }

    .guestbook-form,
    .guestbook-entries {
        flex-basis: auto;
    }

    /* Once stacked, there's no form height to inherit, so the entries
       panel needs its own cap to keep the scrollbar (rather than the
       page) doing the growing. */
    .guestbook-entries {
        max-height: 20rem;
    }

    .guestbook-entries-list {
        max-height: 100%;
    }
}

.guestbook-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.guestbook-field label {
    font-size: 0.95rem;
    color: var(--gb-ink);
}

.guestbook-field .optional {
    color: #5c7d78;
    font-weight: normal;
}

.guestbook-field input,
.guestbook-field textarea {
    font: inherit;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gb-border);
    border-radius: 6px;
    background: #fff;
    color: var(--gb-ink);
}

.guestbook-field input:focus,
.guestbook-field textarea:focus {
    outline: 2px solid var(--gb-accent);
    outline-offset: 1px;
}

.guestbook-field--message textarea {
    resize: vertical;
    min-height: 4rem;
}

.guestbook-submit {
    align-self: flex-start;
    font: inherit;
    padding: 0.55rem 1.1rem;
    background: var(--gb-accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.guestbook-submit:hover,
.guestbook-submit:focus-visible {
    background: var(--gb-accent-dark);
}

.guestbook-toast {
    position: relative;
    align-items: center;
    gap: 0.5rem;
    max-width: 34rem;
    margin-top: 1rem;
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    background: var(--gb-success-bg);
    border: 1px solid var(--gb-success-border);
    border-radius: 8px;
    color: var(--gb-success-ink);
    animation: guestbook-toast-pulse 2s ease-in-out infinite;
}

.guestbook-toast:not([hidden]) {
    display: flex;
}

.guestbook-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--gb-success-border);
    color: #fff;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.guestbook-toast-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    background: transparent;
    border: none;
    color: var(--gb-success-ink);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.guestbook-toast-close:hover,
.guestbook-toast-close:focus-visible {
    opacity: 1;
    background-color: rgba(28, 90, 52, 0.12);
    outline: none;
}

@keyframes guestbook-toast-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

@media (prefers-reduced-motion: reduce) {
    .guestbook-toast {
        animation: none;
    }
}