/* Open Sans Regular (400) */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url('fonts/OpenSans-Regular.woff2') format('woff2');
}

/* Open Sans Semi-Bold (600) */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url('fonts/OpenSans-SemiBold.woff2') format('woff2');
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f5f5f5;
    font-size: 13px;
    padding-top: 42px;
    margin: 0;
    color: #333;
}

/* Fixed Header */
.custom-header {
    background-color: #8A2422;
    height: 42px;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
    display: flex;
    align-items: center;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
}

.header-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.header-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ku-title-link {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.3s ease;
    position: relative;
    top: -2px;
}

.ku-title-link strong {
    font-weight: 700;
    letter-spacing: -0.5px;
}

.ku-title-link:hover {
    color: white;
    text-decoration: none;
}

/* Header navigation */
.header-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.header-nav-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    padding: 5px 15px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    transition: all 0.3s ease;
}

.header-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: white;
    text-decoration: none;
}

.header-nav-link--active {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: white;
}

/* Cluster badge */
.cluster-badge {
    display: inline-block;
    background: rgba(138, 36, 34, 0.10);
    color: #8A2422;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 6px;
}

/* White variant for dark backgrounds (hero banner) */
.hero-banner .cluster-badge {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.cluster-badge--small {
    font-size: 0.75rem;
    padding: 2px 8px;
    margin-top: 0;
    margin-left: 6px;
    vertical-align: middle;
}

/* AI Usage Modal - Better vertical centering and wider for readability */
#aiUsageModal .modal-content {
    margin: 50px auto;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    max-width: 850px;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

header {
    display: none;
    /* Hide the old header since we have fixed header now */
}

main {
    background: #f5f5f5;
    padding: 12px 35px;
    margin-top: 8px;
    margin-bottom: 10px;
    border: none;
    box-shadow: none;
}

/* The fixed header is a single 42px row on every page, so nothing in it may
   ever wrap — a wrapped nav link or title spills out of the bar and gets
   clipped. These live here (not in a page's inline <style>) so that every
   page using .custom-header gets the same mobile treatment; the research map
   used to miss out and rendered a broken header on real phone widths. */
.header-wrapper {
    flex-wrap: nowrap;
    gap: 10px;
}

.ku-title-link,
.header-nav,
.header-nav-link,
.contact-link {
    white-space: nowrap;
}

/* Long nav labels carry a short alternative that takes over on narrow
   screens (see the 480px block below), e.g. "Collaborator Search" → "Search". */
.nav-label-short {
    display: none;
}

/* Hamburger toggle — hidden on desktop, where the nav buttons fit in the row.
   Below 640px the buttons are replaced by this (see the media query), because
   three labelled buttons plus the title cannot share a 42px phone-width row. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 34px;
    height: 30px;
    padding: 0 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
}

.nav-toggle__bar {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

@media (max-width: 640px) {
    .container {
        padding: 0 12px;
    }
    main {
        padding: 10px 14px;
    }
    .header-content {
        padding: 0 12px;
    }

    /* Shrink the header row to fit a phone. !important because pages set the
       title size inline on the element itself. */
    .custom-header .ku-title-link {
        font-size: 1.15rem !important;
    }

    /* Phone header: the nav becomes a drop-down panel under the bar, opened by
       the hamburger. It is fixed (not absolute) because .custom-header is
       fixed and 42px tall — an absolutely positioned panel inside it would be
       clipped on pages that set overflow: hidden on the body (research map). */
    .nav-toggle {
        display: flex;
        margin-left: auto;
    }
    .custom-header .header-nav {
        display: none;
        position: fixed;
        top: 42px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin: 0;
        padding: 10px 12px 14px;
        background-color: #8A2422;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        z-index: 999;
    }
    .custom-header .header-nav.is-open {
        display: flex;
    }
    /* Menu rows, not chips: full width, tappable, left-aligned. The
       margin-left override undoes shared-ui.css's `contact-link { margin-left:
       auto !important }`, which in a column layout would shove the button off
       the right edge. */
    .custom-header .header-nav .header-nav-link,
    .custom-header .header-nav .contact-link {
        display: block;
        width: 100%;
        margin-left: 0 !important;
        padding: 11px 14px;
        font-size: 15px;
        text-align: left;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 8px;
        box-sizing: border-box;
    }
    /* Inside the panel there is room for the full label even on a 320px
       phone, so the 480px short-label swap below must not apply here. */
    .custom-header .header-nav .nav-label-full {
        display: inline;
    }
    .custom-header .header-nav .nav-label-short {
        display: none;
    }

    /* Headers without a .header-nav (e.g. the data viewer) keep their single
       inline Contact button, so it still needs the compact phone sizing. */
    .header-nav-link,
    .contact-link {
        padding: 5px 10px;
        font-size: 12.5px;
    }
}

@media (max-width: 480px) {
    .nav-label-full {
        display: none;
    }
    .nav-label-short {
        display: inline;
    }
}

/* Last resort on the narrowest phones still in use (~320px), where even the
   short labels don't leave room for the tag: "(alpha)" is the one thing in the
   row nobody needs to tap. */
@media (max-width: 350px) {
    .custom-header .ku-title-tag {
        display: none;
    }
}

/* Search Section */
.search-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .search-section {
        grid-template-columns: 1fr;
    }
}

.search-box {
    background: white;
    padding: 25px;
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.search-box h2 {
    color: #8A2422;
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: 600;
}

.description {
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Input Group */
.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.autocomplete-wrapper {
    flex: 1;
    position: relative;
}

.input-group input {
    width: 100%;
    padding: 0 16px;
    border: 1px solid #000000;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
    height: 40px;
    line-height: 40px;
}

.input-group input::-webkit-calendar-picker-indicator {
    display: none;
}

.input-group input::-webkit-list-button {
    display: none;
}

.input-group input:focus {
    outline: none;
    border-color: #000000;
}

/* Autocomplete Dropdown */
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #000000;
    border-top: none;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    z-index: 100;
}

.autocomplete-dropdown.show {
    display: block;
}

.autocomplete-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #e9ecef;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: #f8f9fa;
}

.autocomplete-item.selected {
    background: #8A2422;
    color: white;
}

.autocomplete-no-results {
    padding: 10px 16px;
    color: #6c757d;
    font-style: italic;
}

.input-group button {
    padding: 0 30px;
    background: #8A2422;
    color: white;
    border: none;
    height: 40px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.input-group button:hover {
    background: #6A1C1A;
}

.input-group button:active {
    background: #6A1C1A;
}

.examples {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
}

/* Loading */
.loading {
    text-align: center;
    padding: 40px;
}

.spinner {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #8A2422;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Inline progress spinner used while a long job runs.
   index.html carries its own copy of these rules in an inline <style> block;
   they live here too so any other page that loads this stylesheet (the SUND
   collab page) gets a spinner that actually animates rather than a bare div. */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 3px solid rgba(138, 36, 34, 0.3);
    border-radius: 50%;
    border-top-color: #8A2422;
    animation: spin 1s ease-in-out infinite;
}

/* The panel these two rules styled — a centered overlay reading "Processing,
   may take 1-2 minutes..." — was replaced by the shared .progress-card in
   shared-ui.css, which both pages now render. */

/* Results */
.results {
    margin-top: 30px;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 3px solid #8A2422;
}

.results-header h2 {
    color: #8A2422;
    font-size: 1.8rem;
    font-weight: 600;
}

.close-btn {
    background: #e9ecef;
    border: none;
    padding: 8px 16px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #495057;
    font-weight: 500;
}

.close-btn:hover {
    background: #dc3545;
    color: white;
}

/* Theme Card */
.theme-card {
    background: white;
    padding: 25px;
    margin-bottom: 25px;
    border-left: 5px solid #8A2422;
}

.theme-card h3 {
    color: #8A2422;
    margin-bottom: 15px;
    font-size: 1.4rem;
    font-weight: 600;
}

.theme-card .description {
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Researcher List */
.researcher-list {
    margin-bottom: 20px;
}

.researcher-list h4 {
    color: #495057;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
}

.researcher-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    background: #8A2422;
    color: white;
    padding: 6px 12px;
    font-size: 0.85rem;
}

.tag a {
    color: white;
    text-decoration: none;
}

.tag a:hover {
    text-decoration: underline;
}

/* Papers List */
.papers-list h4 {
    color: #495057;
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: 600;
}

.paper-item {
    background: #f8f9fa;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #dee2e6;
}

.paper-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.paper-meta {
    font-size: 0.9rem;
    color: #6c757d;
}

/* Collaborator Section */
.collaborator-section {
    margin-bottom: 30px;
}

.collaborator-section h3 {
    color: #8A2422;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
}

.collaborator-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.collaborator-table th,
.collaborator-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.collaborator-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.collaborator-table tr:hover {
    background: #f8f9fa;
}

/* Badges */
.rank-badge {
    background: #8A2422;
    color: white;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 0.9rem;
}

.similarity-badge {
    background: #e9ecef;
    padding: 4px 10px;
    font-size: 0.85rem;
    color: #495057;
}

.theme-badge {
    background: #ffc107;
    color: #333;
    padding: 4px 10px;
    font-size: 0.85rem;
}

.explanation {
    color: #6c757d;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Error */
.error {
    background: #f8d7da;
    border: 2px solid #f5c2c7;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.error h3 {
    color: #842029;
    margin-bottom: 10px;
    font-weight: 600;
}

.error p {
    color: #58151c;
    margin-bottom: 15px;
}

.error button {
    background: #dc3545;
    color: white;
    border: none;
    padding: 10px 25px;
    cursor: pointer;
    font-size: 1rem;
}

.error button:hover {
    background: #bb2d3b;
}

/* Footer */
footer {
    text-align: center;
    color: #666;
    margin-top: 30px;
    padding: 20px;
    font-size: 0.9rem;
}

/* Raw Output */
.raw-output {
    background: #f8f9fa;
    padding: 20px;
    border-left: 4px solid #6c757d;
    white-space: pre-wrap;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Link styles */
a {
    color: #8A2422;
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: #6A1C1A;
    text-decoration: underline;
}

/* Result name links - show underline by default to indicate clickable profile */
.result-name a:not(.curis-tag) {
    color: #8A2422;
    text-decoration: underline;
    font-weight: inherit;
}

.result-name a:not(.curis-tag):hover {
    color: #6A1C1A;
}

/* CURIS external-link tag */
.curis-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: white;
    background: #8A2422;
    padding: 1px 6px 2px;
    border-radius: 3px;
    text-decoration: none !important;
    vertical-align: middle;
    margin-left: 7px;
    white-space: nowrap;
    line-height: 1.6;
    font-family: inherit;
}
.curis-tag:hover {
    background: #6A1C1A;
    color: white;
    text-decoration: none !important;
}
/* Inside the red hero banner — use white outline instead */
.hero-banner .curis-tag {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.65);
    color: white;
    padding: 1px 6px;
}
.hero-banner .curis-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    color: white;
}

/* Upload "recognized authors" note inside the red hero banner */
.hero-banner .upload-match-note {
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-top: 15px;
}
.hero-banner .upload-match-author {
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
}
.hero-banner .upload-match-author:hover {
    color: rgba(255, 255, 255, 0.85);
}


.paper-title a {
    color: #333;
    font-weight: 600;
}

.paper-title a:hover {
    color: #8A2422;
}

/* Author highlighting */
.author-highlight {
    background-color: #8A2422;
    color: white;
    padding: 2px 8px;
    font-weight: 500;
}

.author-highlight a {
    color: white;
    text-decoration: none;
}

.author-highlight a:hover {
    color: white;
    text-decoration: underline;
}

/* Visualization Button on Landing Page */
.viz-button-container {
    margin-top: 30px;
    text-align: center;
}

.viz-button {
    display: inline-block;
    background: white;
    padding: 20px 40px;
    text-decoration: none;
    color: #8A2422;
    transition: all 0.3s ease;
    border: 2px solid #8A2422;
}

.viz-button:hover {
    background: #8A2422;
    color: white;
    text-decoration: none;
}

.viz-button-text {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.viz-button-desc {
    display: block;
    font-size: 0.9rem;
    font-weight: 400;
}

/* UMAP Mini Visualization */
.umap-mini-section {
    background: white;
    padding: 25px;
    margin-bottom: 30px;
    border-left: 5px solid #8A2422;
}

.umap-mini-header h3 {
    color: #8A2422;
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 600;
}

.umap-mini-header .description {
    margin-bottom: 20px;
}

.umap-mini-plot {
    width: 100%;
    height: 450px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.umap-mini-plot>div {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
}

.umap-error {
    color: #6c757d;
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* Contact Link in Header */
.contact-link {
    color: white;
    text-decoration: none;
    font-size: 14px;
    margin-left: auto;
    padding: 5px 15px;
    border: 1px solid white;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.contact-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: white;
}

/* Voting Buttons */
.vote-buttons {
    display: flex;
    gap: 5px;
}

.vote-btn {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #666;
}

/* Upvote button - green theme */
.vote-btn.vote-up {
    border-color: #d4edda;
}

.vote-btn.vote-up:hover {
    border-color: #28a745;
    background: #f1f9f3;
}

.vote-btn.vote-up .vote-arrow {
    font-size: 10px;
    color: #28a745;
    font-weight: bold;
}

.vote-btn.vote-up.active {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.vote-btn.vote-up.active .vote-arrow {
    color: white;
}

.vote-btn.vote-up:hover:not(.active) .vote-arrow {
    transform: translateY(-1px);
}

/* Downvote button - red theme */
.vote-btn.vote-down {
    border-color: #f8d7da;
}

.vote-btn.vote-down:hover {
    border-color: #dc3545;
    background: #fef5f6;
}

.vote-btn.vote-down .vote-arrow {
    font-size: 10px;
    color: #dc3545;
    font-weight: bold;
}

.vote-btn.vote-down.active {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.vote-btn.vote-down.active .vote-arrow {
    color: white;
}

.vote-btn.vote-down:hover:not(.active) .vote-arrow {
    transform: translateY(1px);
}

.vote-count {
    font-size: 12px;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    /* A percentage margin resolves against the containing block's WIDTH, so a
       plain `5%` grew to 64-96px above and below the box on a laptop-width
       screen and pushed the contact form past the bottom of the overlay. The
       6vh ceiling keeps it proportional to the height it actually has to fit
       in; on a phone, where 5% is only ~18px, nothing changes. */
    margin: min(5%, 6vh) auto;
    padding: 30px;
    border: 1px solid #dee2e6;
    width: 90%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Short viewports — the contact form is ~590px tall, which does not fit a
   1080p laptop (~627 CSS px at 150% scaling, ~629 on a 1366x768 panel) once
   the margins are added, so the overlay grew its own scrollbar. Tighten the
   box and the form's vertical rhythm until it fits. The "How does it work?"
   and "Data handling" modals carry their own margin and max-height (see
   .kx-modal) and are unaffected. */
@media (max-height: 760px) {
    .modal-content:not(.kx-modal) {
        margin: 20px auto;
        padding: 22px 24px;
    }
    .modal-content:not(.kx-modal) h2 {
        margin-top: 0;
        margin-bottom: 10px;
    }
    .modal-content:not(.kx-modal)>p {
        margin-bottom: 14px;
    }
    .modal-content:not(.kx-modal) .form-group {
        margin-bottom: 12px;
    }
    .modal-content:not(.kx-modal) .form-actions {
        margin-top: 12px;
    }
    /* Overrides the textarea's rows="5" */
    .modal-content #contact-message {
        height: 96px;
    }
}

.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 20px;
    cursor: pointer;
}

.modal-close:hover,
.modal-close:focus {
    color: #000;
}

.modal-content h2 {
    color: #8A2422;
    margin-bottom: 20px;
}

.modal-content>p {
    color: #6c757d;
    margin-bottom: 20px;
}

/* Citation Styles */
.citation-link {
    color: #8A2422;
    text-decoration: none;
    font-weight: 600;
}

.citation-link:hover {
    text-decoration: underline;
}

.hero-banner .citation-link {
    color: #ffd1d1;
}

.hero-banner .citation-link:hover {
    color: #ffffff;
}

#citations-list li {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

#citations-list li:last-child {
    border-bottom: none;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}

.form-group textarea {
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #8A2422;
    box-shadow: 0 0 0 2px rgba(138, 36, 34, 0.1);
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.btn-primary,
.btn-secondary {
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: #8A2422;
    color: white;
}

.btn-primary:hover {
    background-color: #6d1c1a;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.success-message {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: 4px;
    text-align: center;
}

.success-message p {
    margin: 0;
    font-weight: 600;
}

/* Author Visualization Button */
.author-viz-button:hover {
    background: #6A1C1A !important;
    color: white;
    text-decoration: none;
}
.abstract-slot {
    height: 120px;
    position: relative;
    margin-bottom: 10px;
}

.citation-publication-link {
    color: var(--primary-color);
    text-decoration: none;
}
.citation-publication-link:hover {
    text-decoration: underline;
}

/* =============================================================================
   KUnnect — maintenance notice
   -----------------------------------------------------------------------------
   Shown wherever a feature is switched off by MAINTENANCE_MODE (webapp/app.py):
   under the search card for the disabled Describe/Upload modes, in place of the
   contact form, and as the body of the /sund-collab stand-in page. Lives here
   rather than in shared-ui.css because the Research Map page loads style.css
   only.
   ========================================================================== */

.maintenance-notice {
    background: #fdf4e7;
    border: 1px solid #eccfa2;
    color: #6b4a12;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
}

.maintenance-links {
    margin-top: 18px;
    font-size: 0.92rem;
    color: #5f5f5f;
}

/* =============================================================================
   KUnnect — redesigned "How does it work?" + "Data Handling" modals
   ========================================================================== */

:root {
  --kx-red: #8A2422;
  --kx-red-dark: #6d1c1a;
  --kx-ink: #2b2b2b;
  --kx-ink-soft: #5f5f5f;
  --kx-ink-faint: #8a8a8a;
  --kx-line: #e6e6e6;
  --kx-line-strong: #d7d7d7;
  --kx-tint: #f7eeed;
  --kx-tint-2: #fbf6f5;
}

#aiUsageModal .kx-modal,
#dataHandlingModal .kx-modal {
  padding: 0;
  width: 90%;
  max-width: 800px;
  margin: 50px auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  box-shadow: 0 24px 60px -18px rgba(43, 12, 11, 0.42);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px);
}

.kx-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 34px 22px;
  border-bottom: 1px solid var(--kx-line);
}
.kx-modal__title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  line-height: 1.1;
  color: var(--kx-ink);
}
.kx-modal .kx-modal__close.modal-close {
  float: none;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--kx-line);
  border-radius: 10px;
  background: #fff;
  color: var(--kx-ink-faint);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.kx-modal .kx-modal__close.modal-close:hover,
.kx-modal .kx-modal__close.modal-close:focus {
  color: var(--kx-ink);
  background: var(--kx-tint-2);
  border-color: var(--kx-line-strong);
}

.kx-modal__body {
  padding: 28px 34px 30px;
  overflow-y: auto;
}

.kx-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 34px;
  border-top: 1px solid var(--kx-line);
  background: var(--kx-tint-2);
}
.kx-modal__note {
  font-size: 12.5px;
  color: var(--kx-ink-faint);
}

.kx-modal__body p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--kx-ink-soft);
  margin: 0;
}
.kx-lede {
  font-size: 15px !important;
  line-height: 1.62;
  color: var(--kx-ink) !important;
  margin: 0 0 24px !important;
}
.kx-modal__body a {
  color: var(--kx-red);
  font-weight: 700;
  text-decoration: none;
}
.kx-modal__body a:hover { text-decoration: underline; }

.kx-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "How does it work?" — vertical journey */
.kx-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 20px;
}
.kx-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kx-step__icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--kx-tint);
  color: var(--kx-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kx-step__icon .kx-icon { width: 26px; height: 26px; }
.kx-step__line {
  width: 2px;
  flex: 1;
  background: var(--kx-line);
  margin: 4px 0;
}
.kx-step__body { padding-bottom: 26px; }
.kx-step:last-child .kx-step__body { padding-bottom: 0; }
.kx-step__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 6px;
}
.kx-step__num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--kx-red);
}
.kx-step__label {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--kx-ink);
}

.kx-divider {
  border: 0;
  border-top: 1px solid var(--kx-line);
  margin: 28px 0 24px;
}
.kx-extras {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kx-extra {
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 16px;
}
.kx-extra__icon { color: var(--kx-red); margin-top: 1px; }
.kx-extra__icon .kx-icon { width: 24px; height: 24px; }
.kx-extra__label {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--kx-ink);
  margin-bottom: 5px;
}

/* "Data Handling" — plain text rows */
.kx-facts {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.kx-fact__label {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--kx-ink);
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .kx-modal__header { padding: 20px 20px 16px; }
  .kx-modal__title { font-size: 22px; }
  .kx-modal__body { padding: 22px 20px 24px; }
  .kx-modal__footer { padding: 14px 20px; }
  .kx-step { column-gap: 14px; grid-template-columns: 46px 1fr; }
  .kx-step__icon { width: 46px; height: 46px; }
}