/* v1.2.3 */
:root {
    --bp-bg: #1a3e58;
    --paper: #f5f1e8;
    --grid-lines: #3a5a78;
    --line: #6082b6;
    --text: #2c3e50;
    --text-on-bg: var(--paper);
    --accent: #4a6fa5;
    --accent-hover: #6082b6;
    --accent-active: #2c3e50;
    --panel: #ffffff;
    --bg-hover: #6082b614;
    --radius: 8px;
    --border-color-base: var(--line);
    --border-color-focus: var(--accent);
    --border-color-invalid: #e74c3c;
    --disabled-bg: #ecf0f1;
    --disabled-border: #bdc3c7;
    --disabled-text: #7f8c8d;
    --placeholder-color: #7f8c8d;
    --tooltip-bg: var(--text);
    --tooltip-text: var(--paper);
    --progress-track-bg: #ecf0f1;
    --progress-bar-bg: var(--accent);
    --meter-bar-bg: #ecf0f1;
    --meter-optimum-bg: #2ecc71;
    --meter-suboptimum-bg: #f1c40f;
    --meter-even-less-good-bg: #e74c3c;
    --code-bg: #ecf0f1;
    --code-text: var(--text);
    --pre-border: var(--line);
    --success-bg: #d4edda;
    --success-border: #c3e6cb;
    --success-text: #155724;
    --success-icon: #155724;
    --info-bg: #cce5ff;
    --info-border: #b8daff;
    --info-text: #004085;
    --info-icon: #004085;
    --warning-bg: #fff3cd;
    --warning-border: #ffeeba;
    --warning-text: #856404;
    --warning-icon: #856404;
    --danger-bg: #f8d7da;
    --danger-border: #f5c6cb;
    --danger-text: #721c24;
    --danger-icon: #721c24;
    --sidebar-bg: var(--panel);
    --sidebar-border: var(--line);
    --sidebar-text-color: var(--text);
    --sidebar-icon-color: var(--text);
    --sidebar-link-bg: transparent;
    --sidebar-link-text: var(--text);
    --sidebar-link-border: var(--line);
    --sidebar-link-hover-bg: #6082b688;
    --sidebar-link-active-bg: var(--accent);
    --sidebar-link-active-text: var(--text-on-bg);
    --bottom-nav-bg: var(--panel);
    --bottom-nav-border: var(--line);
    --bottom-nav-link-text: var(--text);
    --bottom-nav-link-icon: var(--text);
    --bottom-nav-active-text: var(--accent);
    --bottom-nav-stat-summary-bg: var(--accent);
    --bottom-nav-stat-summary-text: var(--text-on-bg);
}

html, body {
    background-color: var(--bp-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M20 1H0M1 20V0' stroke='%233a5a78'/%3E%3C/svg%3E");
    color: var(--text-on-bg);
    font-family: monospace;
    font-weight: 600;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--text-on-bg);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-on-bg);
    font-weight: bold;
}

body {
    /* color: var(--text); */
}

body :is(h1,h2,h3,h4,h5,h6) {
    /* color: var(--text); */
}

.input, input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select, input[type="date"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="time"], input[type="color"] {
    border-style: solid;
    border-color: var(--border-color-base);
    border-radius: var(--radius);
    background-color: var(--paper);
    color: var(--text);
    font-family: Georgia, serif;
}

input[type="file"] {
    border-style: solid;
    border-color: var(--border-color-base);
    border-radius: var(--radius);
    background-color: var(--paper);
    color: var(--text);
    font-family: Georgia, serif;
}

input[type="file"]::file-selector-button {
    border-style: solid;
    border-color: var(--accent);
    border-radius: calc(var(--radius) / 2);
    background-color: var(--accent);
    color: var(--paper);
    font-family: Georgia, serif;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.input:focus, input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--border-color-focus);
}

.input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid var(--border-color-focus);
    outline-offset: 1px;
}

:invalid, input:invalid, textarea:invalid, select:invalid {
    border-color: var(--border-color-invalid);
}

:disabled, [disabled] {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-text);
}

/* :read-only { background-color: var(--disabled-bg); border-color: var(--disabled-border); } */
::placeholder {
    color: var(--placeholder-color);
    opacity: 1;
    font-style: italic;
}

.input-checkbox, .input-radio, input[type="checkbox"], input[type="radio"] {
    border-color: var(--border-color-base);
    background-color: var(--paper);
    border-radius: 4px;
}

input[type="radio"] {
    border-radius: 50%;
}

.input-checkbox:checked, input[type="checkbox"]:checked, .input-radio:checked, input[type="radio"]:checked {
    border-color: var(--accent);
}

.input-checkbox:checked::after, input[type="checkbox"]:checked::after {
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}

.input-radio:checked::after, input[type="radio"]:checked::after {
    background-color: var(--accent);
    border-radius: 50%;
}

.input-toggle {
    background-color: var(--line);
    border-color: var(--line);
    border-radius: 8px;
}

.input-toggle::after {
    background-color: var(--panel);
    border-radius: 50%;
}

.input-toggle:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.input-range, input[type="range"] {
    background-color: var(--progress-track-bg);
    border-radius: 2px;
}

.input-range::-webkit-slider-thumb, input[type="range"]::-webkit-slider-thumb {
    background-color: var(--accent);
    border-color: var(--paper);
    border-radius: 50%;
}

.input-range::-moz-range-thumb, input[type="range"]::-moz-range-thumb {
    background-color: var(--accent);
    border-color: var(--paper);
    border-radius: 50%;
}

.btn, button, input[type="submit"], input[type="reset"], input[type="button"] {
    border-style: solid;
    border-color: var(--accent);
    border-radius: var(--radius);
    background-color: var(--accent);
    color: var(--paper);
    font-family: Georgia, serif;
}

.btn:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn:active, button:active, input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active {
    background-color: var(--accent-active);
    border-color: var(--accent-active);
}

.btn:disabled, button:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, input[type="button"]:disabled {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-text);
}

.card, .table-container {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: var(--panel);
    color: var(--text);
}

.card :is(h1,h2,h3,h4,h5,h6,span,p, a) {
    color: var(--text);
}

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

.card .btn span, .card button span {
    color: var(--paper);
}

.card__header {
    border-bottom: 1px solid var(--line);
}

.card__footer {
    border-top: 1px solid var(--line);
}

.alert {
    border-radius: var(--radius);
    border-style: solid;
}

.alert--success {
    background-color: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
}

.alert--success .alert__icon {
    color: var(--success-icon);
}

.alert--info {
    background-color: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
}

.alert--info .alert__icon {
    color: var(--info-icon);
}

.alert--warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.alert--warning .alert__icon {
    color: var(--warning-icon);
}

.alert--danger {
    background-color: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger-text);
}

.alert--danger .alert__icon {
    color: var(--danger-icon);
}

.progress__track {
    background-color: var(--progress-track-bg);
    border-color: var(--line);
    border-radius: 4px;
    border-style: solid;
}

.progress__bar {
    background-color: var(--progress-bar-bg);
    border-radius: 3px;
}

progress {
    border-style: solid;
    border-color: var(--line);
    border-radius: 5px;
    background-color: var(--progress-track-bg);
}

progress::-webkit-progress-bar {
    background-color: var(--progress-track-bg);
    border-radius: 4px;
}

progress::-webkit-progress-value {
    background-color: var(--progress-bar-bg);
    border-radius: 4px;
}

progress::-moz-progress-bar {
    background-color: var(--progress-bar-bg);
    border-radius: 4px;
}

meter {
    border-style: solid;
    border-color: var(--line);
    border-radius: 5px;
    background-color: var(--meter-bar-bg);
}

meter::-webkit-meter-bar {
    background-color: var(--meter-bar-bg);
    border-radius: 4px;
}

meter::-webkit-meter-optimum-value {
    background-color: var(--meter-optimum-bg);
    border-radius: 4px;
}

meter::-webkit-meter-suboptimum-value {
    background-color: var(--meter-suboptimum-bg);
    border-radius: 4px;
}

meter::-webkit-meter-even-less-good-value {
    background-color: var(--meter-even-less-good-bg);
    border-radius: 4px;
}

.credential-field {
    border-bottom-color: var(--line);
    border-bottom-style: solid;
}

.module-card {
    border-color: var(--line);
    border-style: solid;
    border-radius: var(--radius);
    background-color: var(--panel);
}

.module-card__icon {
    color: var(--accent);
}

.module-card__actions {
    border-top-color: var(--line);
    border-top-style: solid;
}

summary::before {
    color: var(--accent);
}

.tooltip::after {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    border-color: var(--line);
    border-style: solid;
    border-radius: var(--radius);
}

.divider {
    border-top-color: var(--line);
    border-top-style: solid;
}

.prose pre {
    background-color: var(--code-bg);
    border-color: var(--pre-border);
    border-style: solid;
    border-radius: var(--radius);
    color: var(--code-text);
}

.prose code {
    background-color: var(--code-bg);
    color: var(--code-text);
}

.prose pre code {
    background-color: transparent;
}

.site-footer {
    border-top-color: var(--line);
    border-top-style: solid;
    color: var(--text-on-bg);
}

.site-footer a {
    color: var(--paper);
}

.site-footer a:hover {
    color: var(--accent-hover);
}

.sidebar {
    border-color: var(--sidebar-border);
    border-style: solid;
    border-radius: var(--radius);
}

.sidebar__section {
    border-color: var(--sidebar-border);
    border-style: solid;
    border-radius: calc(var(--radius) / 2);
    background-color: transparent;
}

.sidebar__icon-wrapper {
    color: var(--sidebar-icon-color);
}

.sidebar__text {
    color: var(--sidebar-text-color);
}

.sidebar__nav-link {
    /* background-color: var(--sidebar-link-bg); */
    color: var(--sidebar-link-text);
    border-color: var(--sidebar-link-border);
    border-style: solid;
    border-radius: calc(var(--radius) / 2);
}

.sidebar__nav-link:hover, .sidebar__nav-link:focus {
    background-color: var(--sidebar-link-hover-bg);
    color: var(--accent);
}

.sidebar__nav-link.active, .sidebar__nav-link[aria-current="page"] {
    background-color: var(--sidebar-link-active-bg);
    color: var(--sidebar-link-active-text);
    border-color: var(--sidebar-link-active-bg);
}

.sidebar__stats {
    border-color: var(--sidebar-border);
    border-style: solid;
    border-radius: calc(var(--radius) / 2);
}

.sidebar__stats-title {
    color: var(--sidebar-text-color);
    font-weight: bold;
}

.sidebar__stat-item {
    color: var(--sidebar-text-color);
}

.sidebar:not(:hover) .sidebar__stat-item[data-tooltip]::after {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    border-color: var(--line);
    border-style: solid;
    border-radius: var(--radius);
}

.sidebar__footer {
    border-color: var(--sidebar-border);
    border-style: solid;
    border-radius: calc(var(--radius) / 2);
}

.sidebar__footer-link {
    color: var(--sidebar-icon-color);
}

.sidebar__footer-link:hover {
    color: var(--accent);
}

.bottom-nav {
    background-color: var(--bottom-nav-bg);
    border-top-color: var(--bottom-nav-border);
    border-top-style: solid;
}

.bottom-nav__link, .bottom-nav__stat-group {
    color: var(--bottom-nav-link-text);
}

.bottom-nav__icon {
    color: var(--bottom-nav-link-icon);
}

.bottom-nav__link:hover, .bottom-nav__link:focus {
    color: var(--accent);
}

.bottom-nav__link.active, .bottom-nav__link[aria-current="page"] {
    color: var(--bottom-nav-active-text);
}

.bottom-nav__link.active .bottom-nav__icon, .bottom-nav__link[aria-current="page"] .bottom-nav__icon {
    color: var(--bottom-nav-active-text);
}

.bottom-nav__stat-summary {
    background-color: var(--bottom-nav-stat-summary-bg);
    color: var(--bottom-nav-stat-summary-text);
    border-radius: 50%;
}

.table-container {
    border-color: var(--line);
    border-style: solid;
    border-radius: var(--radius);
    background-color: var(--panel);
}

.posts-table th, .posts-table td {
    border-bottom-color: var(--line);
    border-bottom-style: solid;
    color: var(--text);
}

.posts-table th {
    background-color: var(--paper);
    color: var(--text);
    font-weight: bold;
}

.posts-table__body tr:hover {
    background-color: var(--bg-hover);
}

.posts-table__row {
    border-color: var(--line);
    border-style: solid;
    border-radius: var(--radius);
    background-color: var(--panel);
}

.posts-table__row:hover {
    background-color: var(--bg-hover);
}

.post-image-stack__item {
    border-color: var(--panel);
    border-style: solid;
    border-radius: var(--radius);
    background-color: var(--line);
}

@media (max-width: 768px) {
    .table-container {
        border-width: 0;
        background-color: transparent;
    }

    .posts-table__row {
        border-color: var(--line);
        border-style: solid;
        border-radius: var(--radius);
        background-color: var(--panel);
    }

    .posts-table__row:hover {
        background-color: var(--bg-hover);
    }
}