/* Shared visual refresh. Keep the original Bootstrap grid and data layouts. */
:root {
    --stripy-ink: #233747;
    --stripy-accent: #527c89;
    --stripy-link: #315b6e;
    --stripy-link-hover: #203f4d;
    --stripy-control: #688f9f;
    --bs-primary: #527c89;
    --bs-primary-rgb: 82, 124, 137;
    --bs-link-color: #315b6e;
    --bs-link-color-rgb: 49, 91, 110;
    --bs-link-hover-color: #203f4d;
    --bs-link-hover-color-rgb: 32, 63, 77;
    --stripy-border: #dce6ec;
    --stripy-hover: #edf2f1;
}
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    color: var(--stripy-ink);
    background: #f7fafc;
    line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
    font-family: inherit;
    color: #203849;
    letter-spacing: -.025em;
}
a { color: var(--stripy-link); }
a:hover { color: var(--stripy-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid var(--stripy-accent);
    outline-offset: 3px;
}
.main-header { background: #fff; border-bottom: 1px solid var(--stripy-border); }
.navbar { padding: .7rem 0; }
.navbar-brand { padding: .5rem 0; }
.navbar-brand img { width: 172px; height: auto; }
nav .links li { margin: 0 .15rem; }
nav .links li > a, .tools-toggle {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--stripy-link);
    padding: .65rem .85rem;
    height: auto;
    line-height: 1.5;
    border-radius: .5rem;
}
.tools-toggle { background: transparent; border: 0; cursor: pointer; line-height: inherit; }
nav .links li > a:hover, nav .links li > a[aria-current="page"], .tools-toggle:hover, .tools-toggle.active {
    color: var(--stripy-link);
    background: var(--stripy-hover);
    text-decoration: none;
    border-radius: .5rem;
}
nav .links li ul.dropdown-menu {
    left: auto;
    right: 0;
    border: 1px solid var(--stripy-border);
    border-radius: .65rem;
    padding: .4rem;
    box-shadow: 0 8px 24px #20384912;
}
nav .links li ul.dropdown-menu.show { display: block; }
nav .links li ul > li { padding: 0; }
nav .links li ul > li:hover { background: transparent; }
nav .links li ul > li:hover > a { background: var(--stripy-hover); color: var(--stripy-link); }
.hero-section { padding-bottom: 2.5rem; }
.site-headline { font-size: 1.85rem; margin-bottom: 1.25rem; }
.site-tagline { font-size: 1rem; line-height: 1.8; }
.btn { border-radius: .5rem; transition: background-color .15s, border-color .15s; }
.btn-primary, .btn-secondary { background: var(--stripy-accent); border-color: var(--stripy-accent); color: #fff; }
.btn-primary:hover, .btn-secondary:hover { background: var(--stripy-link-hover); border-color: var(--stripy-link-hover); }
.btn-outline-primary { border-color: var(--stripy-accent); color: var(--stripy-link); background: #fff; }
.btn-outline-primary:hover { background: var(--stripy-accent); border-color: var(--stripy-accent); color: #fff; }
.maintable { border: 1px solid var(--stripy-border); border-radius: .75rem; box-shadow: 0 4px 20px #20384906; }
.maintable-head { background: var(--stripy-hover); }
.gene-header { color: #203849; background: var(--stripy-hover); }
.gene-header a { color: var(--stripy-link); }
.form-control, .custom-select { border-color: #c8d7e1; border-radius: .4rem; }
.footer {
    position: static;
    margin-top: auto;
    border-top: 1px solid var(--stripy-border);
    background: var(--stripy-hover);
    display: block;
    visibility: visible;
}
.footer small { font-size: 1rem; line-height: 1.7; font-weight: 400; color: #455d6c; }
.footer a, .footer a:hover { color: var(--stripy-link); font-weight: 600; }
@media (max-width: 991.98px) {
    nav .links { text-align: left; padding-top: .75rem; }
    nav .links li { margin: .15rem 0; }
    nav .links li > a, .tools-toggle { display: block; width: 100%; text-align: left; }
    nav .links li ul.dropdown-menu { position: static; box-shadow: none; }
}
@media (max-width: 575.98px) {
    .site-headline { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Layout continuity for the existing theme on Bootstrap 5. */
a { text-decoration: none; }
a:hover { text-decoration: none; }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: .5rem; }
.input-group-prepend, .input-group-append { display: flex; }
.close { float: right; padding: 0; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: inherit; opacity: .65; }
.form-control-file { display: block; width: 100%; }
.row { --bs-gutter-x: 30px; }

/* Download choices stay on one row, with wrapping labels on small screens. */
.download-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: .5rem;
}
.download-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
    padding: .65rem .5rem;
    font-size: .95rem;
}
.btn-link, .btn-link:hover, .btn-link:focus { color: var(--stripy-link); text-decoration: none; }
.btn-outline-light, .btn-outline-secondary, .population-filter {
    --bs-btn-color: #425a6c;
    --bs-btn-border-color: #bdcdd8;
    --bs-btn-hover-color: #233747;
    --bs-btn-hover-bg: var(--stripy-hover);
    --bs-btn-hover-border-color: #8fa8b9;
    --bs-btn-active-color: #233747;
    --bs-btn-active-bg: #dfe9e6;
    --bs-btn-active-border-color: #8fa8b9;
}
.population-filter { margin: .2rem .15rem .2rem 0; }
.population-filter.is-active { color: #164f69; background: #dfe9e6; border-color: #8fa8b9; font-weight: 600; }
.catalogue-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.catalogue-actions strong { margin-bottom: .15rem; }
.catalogue-actions .btn { white-space: normal; text-align: left; }
#groups-select { max-height: 55vh; overflow-y: auto; border-color: #dce6ec; border-radius: .5rem; }
#groups-select .dropdown-item { color: #425a6c; padding: .4rem .85rem; font-size: .9rem; }
#groups-select .dropdown-item:hover, #groups-select .dropdown-item:focus { color: var(--stripy-link); background: var(--stripy-hover); }
.catalogue-page .form-switch .form-check-input:checked { background-color: var(--stripy-control); border-color: var(--stripy-control); }
.catalogue-page .form-switch .form-check-input:focus { border-color: var(--stripy-control); box-shadow: 0 0 0 .2rem rgba(104, 143, 159, .15); }
@media (max-width: 575.98px) {
    .catalogue-actions { margin-bottom: 1rem; }
    .download-buttons .btn { font-size: .8rem; }
}

/* Keep focus and pressed states in the same palette as the resting controls. */
.btn-primary, .btn-secondary {
    --bs-btn-bg: var(--stripy-accent);
    --bs-btn-border-color: var(--stripy-accent);
    --bs-btn-hover-bg: var(--stripy-link-hover);
    --bs-btn-hover-border-color: var(--stripy-link-hover);
    --bs-btn-active-bg: var(--stripy-link-hover);
    --bs-btn-active-border-color: var(--stripy-link-hover);
    --bs-btn-focus-shadow-rgb: 104, 143, 159;
    --bs-btn-disabled-bg: var(--stripy-accent);
    --bs-btn-disabled-border-color: var(--stripy-accent);
}
.btn-outline-primary {
    --bs-btn-color: var(--stripy-link);
    --bs-btn-border-color: var(--stripy-accent);
    --bs-btn-active-bg: var(--stripy-accent);
    --bs-btn-active-border-color: var(--stripy-accent);
    --bs-btn-focus-shadow-rgb: 104, 143, 159;
}
.form-check-input:checked { background-color: var(--stripy-control); border-color: var(--stripy-control); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--stripy-control); box-shadow: 0 0 0 .2rem #688f9f26; }

nav .links li > a:focus-visible, .tools-toggle:focus-visible,
nav .links li ul > li > a:focus-visible { color: var(--stripy-link-hover); background: var(--stripy-hover); }