/* Proposal: load AFTER style.css, or append its contents to style.css.
   Keeps the existing HTML, desktop width, table and navigation structure.
   Not enabled automatically. */
:root {
    --rail-ink: #203247;
    --rail-muted: #526175;
    --rail-blue: #175b91;
    --rail-blue-dark: #10446e;
    --rail-border: #dce3eb;
    --rail-soft: #f3f6fa;
}

body {
    background: #edf1f5;
    color: var(--rail-ink);
}

.container {
    background: #fff;
    border-radius: 12px;
    backdrop-filter: none;
    box-shadow: 0 8px 28px rgba(24, 42, 62, .07);
}

/* About and Links contain a second, nested container. */
.container .container {
    border-radius: 0;
    box-shadow: none;
}

.header {
    background-image: linear-gradient(rgba(12, 30, 49, .65), rgba(12, 30, 49, .65)), url('1742080425740.jpg');
}
.header h1 { letter-spacing: -.025em; text-shadow: none; }
.subtitle { opacity: 1; color: #eef3f8; }

.menu { background: #203b57; box-shadow: none; }
.menu-link, .menu-link:hover, .menu-link.active { text-shadow: none; }
.menu-link::before { content: none; }
.menu-link:hover { background: #2d4d6d; }
.menu-link.active { background: #304f6d; }
.menu-link.active::after { background: #b8d9f3; box-shadow: none; }

.filters { background: var(--rail-soft); }
.filter-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filter-group { min-width: 0; }
.filter-input, .filter-select {
    width: 100%;
    min-width: 0;
    border: 1px solid #aab8c8;
    border-radius: 6px;
    color: var(--rail-ink);
    font-family: inherit;
}
/* .stats follows the button row, so :last-child does not match it. */
.filters > .filter-row:nth-child(2) {
    grid-template-columns: max-content max-content;
    justify-content: start;
}
.filter-input:focus, .filter-select:focus {
    border-color: var(--rail-blue);
    box-shadow: 0 0 0 3px rgba(23, 91, 145, .14);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid #175b91;
    outline-offset: 3px;
}
.menu-link:focus-visible { outline-color: #fff; outline-offset: -4px; }
.btn { border-radius: 6px; font-family: inherit; }
.btn-primary { background: var(--rail-blue); }
.btn-primary:hover { background: var(--rail-blue-dark); transform: none; box-shadow: none; }
.btn-secondary { background: #e4eaf1; color: var(--rail-ink); }
.btn-secondary:hover { background: #d5dfea; transform: none; }
.stats { box-shadow: none; border: 1px solid var(--rail-border); border-radius: 6px; }
.stats-text { color: var(--rail-muted); }
.results-count { color: var(--rail-blue); }

.table-wrapper { border: 1px solid var(--rail-border); border-radius: 8px; box-shadow: none; }
.data-table th {
    background: #eaf0f6;
    color: var(--rail-ink);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid #c6d2df;
}
.data-table td { vertical-align: top; line-height: 1.6; border-bottom-color: var(--rail-border); }
.data-table tbody tr:nth-child(even) { background: #f8fafc; }
.data-table tbody tr:hover { background: #eef4fa; }

/* These narrowly scoped overrides also beat existing inline hover colors. */
.data-table td a, footer a {
    color: var(--rail-blue) !important;
    background: #fff !important;
    border-color: #aebfd0 !important;
    border-radius: 6px !important;
}
.data-table td a:hover, footer a:hover {
    color: var(--rail-blue-dark) !important;
    background: #eaf1f8 !important;
    border-color: var(--rail-blue) !important;
}
.data-table td a { display: inline-block; white-space: nowrap; }
.pagination { flex-wrap: wrap; }
.pagination a { color: var(--rail-blue); border-color: var(--rail-border); }
.pagination a:hover, .pagination .current {
    color: #fff;
    background: var(--rail-blue);
    border-color: var(--rail-blue);
    transform: none;
}

.content { color: var(--rail-ink); }
.content a:not(.back-link) { color: var(--rail-blue); overflow-wrap: anywhere; }
.section h2, .section h3, .section-title, .feature-title { color: var(--rail-ink); }
.section2, .feature-card { background: #f8fafc; border-radius: 8px; box-shadow: none; }
.section2 { border-color: var(--rail-border); }
.section2:hover, .feature-card:hover { transform: none; box-shadow: none; }
.section-title::after { background: var(--rail-border); height: 1px; }
.features-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.feature-card { border-left-color: var(--rail-blue); }
.feature-card::before { content: none; }
.feature-description, .intro-text { color: var(--rail-muted); line-height: 1.65; }
.challenges-section { background: #f7f5ef; border-left-color: #927033; border-radius: 8px; }
.challenges-title { color: #70531f; }
.challenge-tag { background: #eee8d9; color: #60491e; border-color: #d6cbb3; }
.closing-section { background: #edf3f8; border-left-color: var(--rail-blue); border-radius: 8px; }
.closing-text { color: var(--rail-ink); }
.project-note { font-style: normal; border: 1px solid var(--rail-border); color: var(--rail-muted); }
.pulse-animation { animation: none; }
.contact-info { border-left-color: var(--rail-blue); }
.placeholder { background: #f8fafc; border-color: var(--rail-border); color: var(--rail-ink); font-style: normal; }
.back-link { color: var(--rail-blue); border-color: var(--rail-blue); border-radius: 6px; }
.back-link:hover { background: var(--rail-blue); transform: none; box-shadow: none; }
.spinner { border-top-color: var(--rail-blue); }

@media (max-width: 768px) {
    body { padding: 12px; }
    .filters, .data-container, .content { padding: 20px; }
    .section2, .challenges-section, .closing-section { padding: 20px; }
    .filter-row { grid-template-columns: 1fr; }
    .filters > .filter-row:nth-child(2) { grid-template-columns: 1fr; justify-content: stretch; }
    .section-title { font-size: 1.5rem; }
    .feature-card { padding: 20px; }
}
@media (max-width: 480px) {
    .menu { margin: 0; }
    .filters, .data-container, .content { padding: 16px; }
    .header { padding: 24px 16px; }
    .header h1 { font-size: 1.65rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}