/*
 * Copyright (c) 2026 Philip Necsulescu.
 * All rights reserved.
 */

.information-page-shell {
    display: grid;
    gap: 20px;
    padding-top: 0;
    padding-bottom: 64px;
}

.information-page-date-content {
    display: grid;
    gap: 4px;
    padding: 16px;
    border-left: 4px solid var(--accent);
    background: var(--panel-soft);
    text-align: right;
}

.information-page-date-copy {
    margin: 0;
    color: var(--muted);
    font-size: var(--font-size-regular);
    line-height: 24px;
}

.information-page-section + .information-page-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: var(--card-border-internal) solid var(--accent-divider);
}

.information-page-section h2 {
    margin: 0 0 12px;
}

.information-page-section p,
.information-page-section li {
    color: var(--muted);
}

.information-page-section p {
    margin: 0;
    font-size: var(--font-size-regular);
    line-height: 28px;
}

.information-page-section p + p,
.information-page-section p + ul,
.information-page-section ul + p {
    margin-top: 12px;
}

.information-page-section li strong {
    color: var(--ink);
}

.information-page-section code {
    padding: 0 4px;
    background: var(--panel-soft);
    border: var(--card-border-internal) solid var(--accent-divider);
    border-radius: 4px;
    color: var(--ink);
}

.information-page-link {
    color: var(--accent-dark);
    font-weight: 700;
    text-decoration-color: var(--accent-underline);
    text-decoration-thickness: 4px;
    text-underline-offset: 4px;
    overflow-wrap: anywhere;
}

.information-page-link:hover,
.information-page-link:focus-visible {
    color: var(--ink);
    text-decoration-color: var(--accent);
    outline: none;
}

.information-page-actions-content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.information-page-section > .action-button {
    margin-top: 16px;
}

@media (max-width: 640px) {
    .information-page-date-content {
        padding: 12px;
    }

    .information-page-actions-content {
        flex-direction: column;
    }

    .information-page-actions-content .action-button,
    .information-page-section > .action-button {
        width: 100%;
    }
}