/* Global Resets and Basic Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.lightcurves-page {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    background-color: #f9f9f9;
}

.section-title {
    font-family: 'Inter', sans-serif;
}

#top-navbar {
    position: fixed;
    justify-content: space-between;
    top: 0;
    /* sit immediately to the right of the 18 % sidebar */
    left: 18%;
    width: calc(100% - 18%);
    height: 100px;
    /* requested height */
    background: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 0 40px;
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .08);
    z-index: 20;
    /* above #lightcurves-navigation (z-index 10) */
    box-sizing: border-box;
    /* keeps width calc accurate */
    border-bottom: 1px solid #d8d8d8;
    /* horizontal line */
    /* border-left: 1px solid #d8d8d8; */
}

/* group that holds the buttons */
.top-nav-links {
    display: flex;
    gap: 24px;
    margin-left: 55px;
    /* space between buttons */
}

/* ─── top-bar buttons ─────────────────────────────────────────────── */
.top-nav-btn {
    padding: 12px 6px;
    /* comfortable click target        */
    font-size: 20px;
    /* larger text                     */
    font-weight: 600;
    background: transparent;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}

/* active = dark text with rounded background box, not clickable */
.top-nav-btn.active {
    color: #1a1a1a;
    pointer-events: none;
    background-color: #E9E9ED;
    border-radius: 8px;
    padding: 12px 16px;
    /* slightly more horizontal padding for the box */
}

/* inactive = dark text, with lighter text on hover */
.top-nav-btn.inactive {
    color: #1a1a1a;
    font-weight: 600;
    transition: color 0.2s ease;
}

.top-nav-btn.inactive:hover {
    color: #6a6a6a;
    /* lighter text on hover */
}

/* clickable pill style matching the 'active' look */
.top-nav-btn.pill {
    color: #1a1a1a;
    background-color: #E9E9ED;
    border-radius: 8px;
    padding: 12px 16px; /* match active horizontal padding */
}
.top-nav-btn.pill:hover {
    color: #1a1a1a; /* keep stable like active buttons */
}
/* distinct "My Account" button using existing green accent */
.top-nav-btn.account-btn {
    color: #0b6e4f;
    background-color: #e0f3e9;
    border-radius: 8px;
    padding: 9px 12px;       /* ~25% smaller vs 12px 16px */
    font-size: 15px;         /* ~25% smaller vs 20px */
    font-weight: 700;
    border: none;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.top-nav-btn.account-btn:hover {
    background-color: #d0e3d9;
    color: #0b6e4f;
}
/* vertical separator between account and logout */
.nav-pipe {
    display: inline-block;
    width: 1px;
    height: 28px;
    background-color: #d8d8d8;
    margin: 0 16px;
    align-self: center;
}
/* logout button */
.logout-push {
    margin-left: auto;
    /* takes all remaining space */
}

/* Left Sidebar Navigation */
#lightcurves-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 18%;
    height: 100vh;
    background-color: #FFFFFF;
    padding: 150px 20px 25px 20px; /* Added 25px bottom padding for margin from bottom */
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.05);
    border-right: 1px solid #d8d8d8;
    z-index: 10;
}

/* ───── horizontal rule aligned with navbar bottom ─────────────── */
#lightcurves-navigation::after {
    content: "";
    position: absolute;
    top: 99px;
    /* exactly the navbar height */
    left: 0;
    width: 100%;
    height: 1px;
    background: #d8d8d8;
    /* subtle grey – adjust if needed */
}


/* Home logo in sidebar */
.nav-logo {
    position: absolute;
    top: 22px;
    left: 32px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary, #1a1a2e);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: transform 0.2s ease;
}

.nav-logo:hover {
    transform: translateY(-1px);
}

/* Sidebar Search Form Styling */
#search-form-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1; /* Take up all available space in the navigation */
    min-height: 0; /* Allow flexbox to shrink below content size */
}

#search-form-sidebar .nav-section-title {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #333;
    flex-shrink: 0; /* Prevent title from shrinking */
}

#search-form-sidebar form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0; /* Prevent forms from shrinking */
}

#search-form-sidebar label {
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 3px;
}

#search-form-sidebar input[type="text"],
#search-form-sidebar select {
    width: 100%;
    padding: 8px;
    border: 1px solid #cccccc;
    border-radius: 4px;
}

#search-form-sidebar small {
    font-size: 0.8em;
    color: #555;
}

#search-form-sidebar button.visit-button {
    margin-top: 10px;
    /* match distance-tag colors: light green background with darker green text */
    background-color: #e0f3e9;
    color: #0b6e4f;
    border: none;
    box-shadow: none;
    /* override inherited shadow from .visit-button */
}

#search-form-sidebar button.visit-button:hover {
    background-color: #d0e3d9;
    box-shadow: none;
    /* ensure no shadow on hover either */
}

/* Reprocessing data warning banner */
.reprocessing-warning {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 12px;
    background-color: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    font-size: 0.8em;
    line-height: 1.4;
    color: #6d5a00;
    flex-shrink: 0;
}

.reprocessing-warning-icon {
    flex-shrink: 0;
    font-size: 1em;
}

/* Position the second row of boxes in a row; allow wrap if needed */
.search-info-row {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* so boxes don't overflow on small screens */
}

/* Style search-info-boxes in the search-info-row (RA, DEC, Date Min, Date Max) */
.search-info-row .search-info-box {
    box-shadow: none;
    /* remove shadow from RA, DEC, Date Min, Date Max boxes */
    color: #666;
    /* lighter text color */
}

.search-info-box {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    /* If you want them aligned horizontally, ensure they have display:inline-block or display:flex */
    display: inline-block;
}


/* Navigation Links below the form */
.lightcurves-nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 1.2em;
    color: #646464;
    text-decoration: none;
    transition: font-size 0.7s ease, color 0.7s ease;
}

.lightcurves-nav-link.active-link {
    color: #333333;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px 20px 5px 10px;
    background-color: #DEE7E8;
    transition: all 0.3s ease;
}

/* Main Content Area (to the right of the sidebar) */
main {
    margin-left: 18%;
    /* Leaves space for the sidebar */
    padding: 20px;
    margin-top: 160px;
    /* Ensure content isn't hidden behind fixed elements */
}

/* Section Card styling - reused style for a card look */
.section-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-width: 1200px;
    margin: 0 auto 60px;
    padding: 40px;
}

/* Title Container in Cards */
.title-container {
    margin: -40px -40px 24px -40px;
    background-color: #EEF0F4;
    padding: 20px;
    border-radius: 16px 16px 0 0;
    width: 100%;
}

/* upcoming styles */

#data-policy .section-card .content-area>p {
    margin-top: 15px;
}

#data-policy .section-card {
    padding: 0;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
    border: 1px solid #e0f3e9;
    /* match the lighter green background color used in buttons */
}


/* Now the title-container can fill the top of the card fully */
#data-policy .title-container {
    margin: 0;
    /* Fill the width of the parent card */
    width: 100%;
    /* Internal spacing for the header area */
    padding: 20px;
    box-sizing: border-box;
    background-color: #EEF0F4;
    /* This ensures the top corners are also rounded if you want them to match the card's radius: */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

#data-policy .content-area {
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 0;
    padding-bottom: 30px;
}


/* results styling */

/* Target only the results .section-card */
#results .section-card {
    /* Remove or override the default 40px padding */
    padding: 0;
    /* Keep your desired rounding and box-shadow */
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    /* If you want the entire card to be flush with edges. */
    overflow: hidden;
    /* Ensures top corners or any child corners appear neatly */
}

/* Now the title-container can fill the top of the card fully */
#results .title-container {
    margin: 0;
    /* Fill the width of the parent card */
    width: 100%;
    /* Internal spacing for the header area */
    padding: 20px;
    box-sizing: border-box;
    background-color: #EEF0F4;
    /* This ensures the top corners are also rounded if you want them to match the card's radius: */
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}

/* The .content-area can supply standard padding for the main body of the card. */
#results .content-area {
    padding: 40px;
    padding-top: 0;
}


/* Target the search-info-box in the first title-row within the title-container of the results section */
#results .title-container .title-row:first-child .search-info-box {
    /* match distance-tag colors: light green background with darker green text */
    background-color: #e0f3e9;
    color: #0b6e4f;
    font-weight: 700;
    border: none;
    box-shadow: none;
    /* override inherited border and shadow from .search-info-box */
}


/* pagination styling for restults table */
/* simple pagination styling */
.pagination-form {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* make the pagination buttons look like search-info-box cards */
.pagination-form button {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

/* hover "lift" effect */
.pagination-form button:hover:not([disabled]) {
    background-color: #f7f7f7;
    transform: translateY(-1px);
}

/* disabled state matches other disabled controls */
.pagination-form button[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* spacing between buttons and page label */
.pagination-form span {
    margin: 0 8px;
}



.small-icon {
    width: 16px;
    /* Adjust width as needed */
    height: auto;
    vertical-align: middle;
    /* Align vertically with text */
    margin-right: 3px;
    position: relative;
    top: -2px;
    /* Move the icon up by 2px; adjust as needed */
}





/* Title Row */
.title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

/* Pagination Loading Spinner */
.pagination-spinner {
    margin-left: auto; /* Pushes to far right */
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 0.9em;
    font-weight: 500;
}

.spinner-icon {
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top: 2px solid #0466c8;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Section Titles */
.section-title {
    font-family: "Inter", sans-serif;
    font-size: 1.75em;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    margin: 0;
    text-align: left;
}

/* Section Subtext */
.section-subtext {
    font-size: 1.05em;
    font-weight: 400;
    color: #444;
    margin-top: 16px;
    text-align: left;
    max-width: 750px;
}

/* Content Area inside Cards */
.content-area {
    margin-top: 24px;
}

/* Visit Button Styling (as used on the search form) */
.visit-button {
    display: inline-block;
    padding: 12px 24px;
    border: 1px solid #ccc;
    border-radius: 9999px;
    font-size: 0.95em;
    font-weight: 500;
    text-decoration: none;
    color: #1a1a1a;
    background-color: #e6f9e6;
    /* Normal green background */
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.visit-button:hover {
    background-color: #d6f3d6;
    /* Slightly darker green for hover */
    color: 1a1a1a;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}


/* The table-wrapper is optional if you want extra shadow or spacing, 
   but let's assume we rely on the card's shadow & rounding. */
.table-wrapper {
    margin-top: 20px;
    /* If you do want an extra subtle shadow behind just the table area:
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
    */
}

.frames-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    /* Overall table corners */
    border: 1px solid #ddd;
    /* Optional outer border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Remove overflow: hidden if you used it on a wrapper; not needed here. */
}

/* Top-left corner */
.frames-table thead tr:first-child th:first-child {
    border-top-left-radius: 8px;
}

/* Top-right corner */
.frames-table thead tr:first-child th:last-child {
    border-top-right-radius: 8px;
}

/* Bottom-left corner (assuming the last row is in tbody) */
.frames-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

/* Bottom-right corner */
.frames-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}



/* Remove thick borders so corners don't appear clipped */
.frames-table th,
.frames-table td {
    border: 1px solid #ddd;
    /* minimal cell borders */
    padding: 10px;
    text-align: left;
}

/* Header row color */
.frames-table thead th {
    background-color: #EEF0F4;
    font-weight: bold;
}

/* Alternating row colors */
.frames-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.frames-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

/* Hover effect */
.frames-table tbody tr:hover {
    background-color: #e9e9e9;
}

/* view button in frames table */
.frames-table .view-btn {
    /* make it smaller */
    padding: 6px 14px;
    /* top/bottom, left/right */
    font-size: 0.8em;

    /* match the search-info-box rounding */
    border-radius: 8px;

    /* match distance-tag colors: light green background with darker green text */
    background-color: #e0f3e9;
    color: #0b6e4f;
    border: none;
    font-weight: 500;
    box-shadow: none;
    /* override inherited shadow from .visit-button */
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
    display: block;
    margin: 0 auto;
}

.frames-table .view-btn:hover {
    background-color: #d0e3d9;
    transform: translateY(-1px);
    box-shadow: none;
    /* ensure no shadow on hover either */
}


/* Container for the toggle, centered above the cards */
.radio-switch {
    display: flex;
    align-items: center;
    gap: 16px;

    /* match your .section-card's width and centering */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 24px;
}


/* Turn each label into a clickable "button" */
.radio-switch .container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
    color: #333333;
}

/* Hide the native radio control */
.radio-switch .container input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* The custom square "checkbox" */
.radio-switch .container .checkmark {
    position: relative;
    /* for the pseudo-element */
    width: 1.3em;
    height: 1.3em;
    border: 1px solid #888;
    border-radius: 5px;
    flex-shrink: 0;
    transition: all 0.2s;
}

/* When checked: gradient & heavier shadow */
/* replace the gradient with white */
.radio-switch .container input[type="radio"]:checked~.checkmark {
    background-image: none;
    background-color: #fff;
    border: 1px solid #555;
    /* dark grey instead of black */
}


/* Draw the tick mark (initially hidden) */
.radio-switch .container .checkmark::after {
    content: "";
    position: absolute;
    top: 0.25em;
    left: 0.45em;
    width: 0.25em;
    height: 0.5em;
    border: solid #555;
    /* dark grey instead of black */
    border-width: 0 0.15em 0.15em 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s;
}

/* Reveal the tick when checked */
.radio-switch .container input[type="radio"]:checked~.checkmark::after {
    opacity: 1;
}

/* highlight the active "button" - match search-tab.active styling */
.radio-switch .container:has(input[type="radio"]:checked) {
    background-color: #C4D7FF;
    /* soft blue - matches search-tab.active */
    border: none;
    /* no border - matches search-tab.active */
    color: #0466c8;
    /* darker blue text - matches search-tab.active */
    font-weight: 700;
    /* bold text - matches search-tab.active */
}

.radio-switch .container:not(:has(input[type="radio"]:checked)):hover {
    transform: translateY(-3px);
}




/* ihu info graphic */
/* tooltip container */

/* icon next to "IHU" */
.info-icon {
    position: relative;
    /* (already there) */
    display: inline-flex;
    /* lets us centre the glyph */
    align-items: center;
    justify-content: center;

    /* NEW "badge" styling */
    width: 18px;
    /* circle size — change to taste */
    height: 18px;
    margin-left: 6px;
    /* extra gap after "IHU" */

    font-size: 1rem;
    /* glyph size inside the circle */
    color: black;
    /* glyph colour               */
    background: #c4d7ff;
    /* badge background (HATPI blue?) */
    border-radius: 50%;
    /* makes it a circle           */


    cursor: help;
    user-select: none;
    font-weight: 700;
    line-height: 1;
    /* keeps glyph centred         */
}


/* tooltip container */
.tooltip-box {
    display: none;
    /* hidden until hover/focus */
    position: absolute;
    top: calc(100% - 250px);
    left: calc(100% + 8px);
    /* anchor tooltip just to the right of the icon */
    transform: none;
    width: 620px;
    /* enlarge the pop-up        */
    max-width: 100vw;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
    padding: 12px;
    text-align: center;
    z-index: 50;
}

/* diagram fills the tooltip */
.tooltip-img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 8px;
}

/* ── this rule makes the pop-up appear ── */
.info-icon:hover .tooltip-box,
.info-icon:focus .tooltip-box {
    display: block;
}

.tooltip-caption {
    font-weight: 400;
}


.twilight-note {
    margin-left: 24px;
    font-style: italic;

}


/* CLI query box styling */

/* Container for the CLI Query Box */
.cli-section {
    max-width: 1000px;
    /* 40px top and bottom margin; auto centers horizontally */
    /* Optional: horizontal padding for breathing room */
    box-sizing: border-box;
}

.cli-query-container {
    background-color: #1e1e1e;
    /* dark code editor style */
    border-radius: 0.5rem;
    padding: 30px;
    overflow-x: auto;
    /* box-shadow removed */
    position: relative;
}

.cli-query {
    color: #d4d4d4;
    /* light gray text */
    font-family: 'Source Code Pro', 'Courier New', monospace;
    font-size: 0.95rem;
    white-space: pre-wrap;
    line-height: 1.5;
    margin: 0;
}

.cli-query span.command {
    color: #4ec9b0;
}

.cli-query span.option {
    color: #569cd6;
}

.cli-query span.string {
    color: #ce9178;
}



.cli-section h1.section-title {
    font-size: 1.2em;
    font-weight: 500;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    margin: 0;
    text-align: left;
}

.cli-block {
    position: relative;
    margin-bottom: 2rem;
}

.cli-block .copy-button {
    position: absolute;
    right: 0;
    bottom: -1.5rem;
}



/* Styling for the Copy Button */
.copy-button {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background-color: #555555;
    /* Button background */
    color: #dcdcdc;
    /* Button text color */
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 0.8em;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.copy-button:hover {
    opacity: 1;
}





/* Utility text styles */
.error-text {
    color: red;
    margin-top: 15px;
}

.message-text {
    color: #333;
    margin-top: 15px;
}

.small-text {
    font-size: 0.9em;
    color: #555;
}



/* login auth modal */
/* ───── modal core (keeps old backdrop + centering) ───────── */
#auth-backdrop {
    /* existing blur layer kept */
    position: fixed;
    inset: 0;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, .4);
    z-index: 998;
}

#auth-modal {
    z-index: 999;
}

/* use form_container class styles below */

/* ───── new look, borrowed from sample — colours match site  ───── */
.form_container {
    width: 500px;
    max-width: 90vw;
    background: #fff;
    padding: 50px 40px 30px;
    border-radius: 11px;
    box-shadow: 0 26px 26px rgba(0, 0, 0, .09),
        0 7px 15px rgba(0, 0, 0, .1);
    font-family: 'Inter', sans-serif;
    position: fixed;
    /* ← NEW  makes z-index take effect */
    top: 50%;
    /* ← NEW  vertical centre */
    left: 50%;
    /* ← NEW  horizontal centre */
    transform: translate(-50%, -50%);
}

/* ───── modal tabs, inputs & button – green variant ───────── */
.tab-header {
    display: flex;
    gap: 6px;
    justify-content: center;
}

/* ───────────────── modal tab buttons, same look as top-nav ─────────── */
.tab-btn {
    padding: 5px 6px;
    font-size: 1.3rem;
    font-weight: 600;
    background: none;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s;
}

/* active  →  dark text with grey pill background, not clickable */
.tab-btn.active {
    color: #1a1a1a;
    pointer-events: none;
    background-color: #E9E9ED;
    border-radius: 8px;
    padding: 8px 14px;
}

/* inactive  →  light grey + underline animation */
.tab-btn:not(.active) {
    color: #9a9a9a;
    position: relative;
    padding: 8px 14px;
    /* anchor underline pseudo */
}

.tab-btn:not(.active)::after {
    content: "";
    position: absolute;
    left: 5%;
    bottom: -2px;
    /* 4 px gap below text      */
    width: 90%;
    height: 2px;
    /* underline thickness      */
    background: #1a1a1a;
    transform: scaleX(0);
    /* start hidden             */
    transform-origin: left;
    transition: transform .25s ease-in-out;
}

.tab-btn:not(.active):hover::after {
    transform: scaleX(1);
    /* animate left→right hover */
}

.tab-btn:not(.active):hover {
    color: #1a1a1a;
    /* darken text on hover     */
}


.input_container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.input_label {
    font-size: .75rem;
    color: #8B8E98;
    font-weight: 600;
}

/* subtle shadow + white fill behind every input box */
.input_field {
    height: 40px;
    padding-left: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    transition: box-shadow .3s, border-color .3s;
    background: #fff;
    /* ensure white fill */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    /* ← new soft shadow */
}

.input_field:focus {
    outline: none;
    border-color: #a5c9ff;
    box-shadow: 0 0 0 2px #D6F3D680,
        /* existing green ring */
        0 2px 6px rgba(0, 0, 0, .12);
    /* emphasise on focus */
}


.sign-in_btn {
    margin-top: 30px;
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 7px;
    background: #D6F3D6;
    /* green fill                 */
    color: #1a1a1a;
    /* dark text                  */
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}

.sign-in_btn:hover {
    background: #c0e9c0;
    /* slightly darker on hover   */
}

.flash {
    color: #d63031;
    font-size: .8rem;
    margin-top: 6px;
    text-align: center;
}

/* "Already have an account? Log In" link */
.auth-switch-text {
    margin-top: 16px;
    font-size: .9rem;
    color: #666;
    text-align: center;
}

.auth-switch-link {
    background: none;
    border: none;
    color: #2d6a4f;
    font-weight: 600;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    text-decoration: underline;
    transition: color .2s;
}

.auth-switch-link:hover {
    color: #1b4332;
}

/* Login error message styling */
.auth-error {
    margin-top: 12px;
    padding: 10px 14px;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: .9rem;
    text-align: center;
}

/* success toast */
#toast {
    position: fixed;
    top: 16px;
    right: 16px;
    background: #D6F3D6;
    color: #1a1a1a;
    padding: 10px 16px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    font-weight: 600;
    z-index: 2000;
    opacity: 0;
    transition: opacity .4s;
}

/* lightweight intro sentence under the tabs */
.modal-intro {
    margin: 10px 0 35px;
    /* top, sides, bottom */
    font-size: 0.9rem;
    /* smaller text       */
    font-weight: 400;
    color: #8B8E98;
    /* medium grey        */
    text-align: center;
    background: none;
    /* no banner          */
    border: none;
    box-shadow: none;
    padding: 0;
}




/* ─── put checkbox to the left of its label ────────────── */
.checkbox_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.checkbox_container label {
    margin: 0;
}

/* Show only the auth form that carries the .active flag */
.auth-form:not(.active) {
    display: none;
}

/* finer, lighter copy under the checkbox */
#notify-row label {
    font-size: 0.85rem;
    /* slightly smaller */
    color: #6a6a6a;
    /* soft grey        */
    line-height: 1.3;
}

/* ───────── Light-curve toolbar + controls (clean rebuild) ───────── */
/* ──────────────────────────────────────────────────────────
   LIGHT-CURVE TOOLBARS + CONTROLS
   ‣ Two toolbars   (.lc-toolbar  /  .lc-phasebar)
   ‣ Series selector (3-column grid → 2 → 1 on narrow)
   ‣ Compact visit-buttons         (.visit-button.sm)
   ‣ Re-organised with CSS vars for easier theming
   ────────────────────────────────────────────────────────── */

:root {
    --lc-bg: #F7F9FC;
    --lc-border: #DDE3EE;
    --lc-pill-bg: #C4D7FF;
    --lc-pill-bdr: #333;
    --lc-gap: 20px;
    --lc-font-small: .9rem;
    --lc-font-tiny: .8rem;
}

/* —— shared toolbar wrapper —————————————————————— */
.lc-toolbar {
    display: flex;
    gap: 24px;
    padding: 16px;
    background: #f7f9fc;
    /* border-bottom: 1px solid #e5e9f0; */
}

.toolbar-column {
    min-width: 0;
    background-color: #F9F9F9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.toolbar-column:first-child {
    flex: 2 1 auto; /* Series column gets more space */
    flex-basis: calc(50% + 112.5px); /* Increase by ~225px total */
}

.toolbar-column:nth-child(2) {
    flex: 1 1 auto; /* Display Options column */
    flex-basis: calc(25% - 37.5px); /* Reduce by ~75px */
}

.toolbar-column:nth-child(3) {
    flex: 1 1 auto; /* Download column */
    flex-basis: calc(25% - 75px); /* Reduce by ~150px total */
}

.toolbar-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #4a5568;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e9f0;
}

/* Remove light pipe from phase folding toolbar title when using radio buttons */
#fold-bar .toolbar-title-with-radio .toolbar-title {
    border-bottom: none;
    margin-bottom: 0;
}

/* Fallback for original structure */
#fold-bar .toolbar-title {
    border-bottom: none;
}

.toggle-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.download-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.periodogram-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-start;
}

.periodogram-row {
    display: contents;
}

.periodogram-row .visit-button.sm {
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}

.periodogram-row .visit-button.sm:hover {
    transform: translateY(-2px);
}

/* Generalized Lomb-Scargle - Blue (matches PNG button) */
#periodogram-gls {
    background-color: #C4D7FF;
    color: #0466c8;
    font-weight: 700;
    box-shadow: none;
    border: none;
}

#periodogram-gls.active {
    background-color: #C4D7FF;
    color: #0466c8;
    font-weight: 700;
    box-shadow: 0 4px 8px rgba(4, 102, 200, 0.3);
    border: 1px solid #0466c8;
}

/* Lomb-Scargle top 5 peaks - Purple */
#periodogram-ls-top5 {
    background-color: #f3e5f5;
    color: #7b1fa2;
    box-shadow: none;
    border: none;
}

#periodogram-ls-top5.active {
    background-color: #f3e5f5;
    color: #7b1fa2;
    box-shadow: 0 4px 8px rgba(123, 31, 162, 0.3);
    border: 1px solid #7b1fa2;
}

#periodogram-ls-top5.disabled {
    background-color: #f5f5f5;
    color: #9e9e9e;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Analysis of Variance - Green */
#periodogram-aov-top5 {
    background-color: #e8f5e8;
    color: #2e7d32;
    box-shadow: none;
    border: none;
}

#periodogram-aov-top5.active {
    background-color: #e8f5e8;
    color: #2e7d32;
    box-shadow: 0 4px 8px rgba(46, 125, 50, 0.3);
    border: 1px solid #2e7d32;
}

#periodogram-aov-top5.disabled {
    background-color: #f5f5f5;
    color: #9e9e9e;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Box Least Squares - Orange */
#periodogram-bls-top5 {
    background-color: #fff3e0;
    color: #f57c00;
    box-shadow: none;
    border: none;
}

#periodogram-bls-top5.active {
    background-color: #fff3e0;
    color: #f57c00;
    box-shadow: 0 4px 8px rgba(245, 124, 0, 0.3);
    border: 1px solid #f57c00;
}

#periodogram-bls-top5.disabled {
    background-color: #f5f5f5;
    color: #9e9e9e;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Update existing styles */
.lc-fieldset {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: none;
}

.radio-pill {
    margin: 0;
}

.lc-label {
    margin-top: 0px;
}

.lc-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lc-gap);
}

.lc-phasebar {
    margin-top: 28px;
}

/* —— input/label pairs ———————————————————————— */
.lc-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lc-font-small);
}

.lc-label input[type="number"] {
    width: 90px;
    padding: 4px 6px;
}

.lc-label .unit {
    opacity: .7;
    font-size: var(--lc-font-tiny);
}

/* —— compact checkbox label ———————————————————— */
.lc-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--lc-font-small);
}

/* —— series selector as a single flex row ——————————— */
.lc-fieldset {
    display: flex;
    flex-wrap: wrap;
    /* will wrap only if absolutely needed */
    gap: 8px 16px;
    /* same spacing you had before         */
    align-items: center;
    border: none;
    margin: 0;
    padding: 0;
}

.lc-fieldset legend {
    margin-right: 12px;
    /* small gap after "Series" label      */
}

.radio-pill {
    display: inline-flex;
}

.radio-pill input {
    display: none;
}

.radio-pill span {
    display: block;
    width: 100%;
    /* fill grid cell */
    text-align: center;
    padding: 6px 14px;
    border: none;
    border-radius: 9999px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: .15s;
    /* remove border like Object/Twilight frames buttons */
}

.radio-pill input:checked+span {
    background: #C4D7FF;
    color: #0466c8;
    font-weight: 700;
    border: 1px solid #0466c8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* —— download / action buttons ——————————————— */
.visit-button.sm {
    padding: 6px 14px;
    font-size: var(--lc-font-tiny);
}

.spacer {
    flex: 1 1 auto;
}

/* pushes following items to right */

/* —— plot canvases ——————————————————————————— */
.lc-plot,
.ls-plot {
    width: 100%;
}

/* ─── styled <select> for "Colour-by" ───────────────────────────── */
.select-wrap {
    position: relative;
    display: inline-block;
}

/* ▼ arrow inside the box */
.select-wrap::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-top-color: #555;
    transform: translateY(-40%);
    pointer-events: none;
}

#color-by {
    appearance: none;
    -webkit-appearance: none;
    background: #FFF;
    /* leave background plain; arrow is via ::after   */
    border: 1px solid #999;
    border-radius: 6px;
    padding: 6px 36px 6px 10px;
    /* 36 px right-padding for arrow */
    font-size: .9rem;
    cursor: pointer;
    transition: border .15s, box-shadow .15s;
}

#color-by:focus {
    outline: none;
    border-color: #4E8CFF;
    box-shadow: 0 0 0 3px rgba(78, 140, 255, .25);
}



#color-by {
    appearance: none;
    /* remove system styling        */
    -webkit-appearance: none;
    background: #FFF;
    border: 1px solid #999;
    border-radius: 6px;
    padding: 6px 36px 6px 10px;
    /* right-padding leaves room for arrow */
    font-size: .9rem;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s;
}

#color-by:focus {
    outline: none;
    border-color: #4e8cff;
    box-shadow: 0 0 0 3px rgba(78, 140, 255, .25);
}

/* a card that contains only a toolbar — no inner padding */
.lc-card.lc-toolbar-only{
    padding:0;
    box-shadow:none;          /* optional: drop shadow for middle bar */
  }
  


/* —— breakpoints ——————————————————————————— */
@media (max-width:520px) {
    .lc-fieldset {
        --cols: 2;
    }

    /* 2-wide grid         */
}

@media (max-width:380px) {
    .lc-fieldset {
        --cols: 1;
    }

    /* stack vertically    */
    .lc-label input[type="number"] {
        width: 70px;
    }

    .visit-button.sm {
        padding: 6px 10px;
    }
}

/* Plot container and Gaia ID display */
.lc-plot-container {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 500px;  /* Minimum height, but grows if header content is taller */
}

.gaia-id-display {
  padding: 8px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid #e5e9f0;
  font-family: 'Inter', sans-serif;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.gaia-id-content {
  display: flex;
  align-items: center;
}

/* Saturation Warning Styling */
.saturation-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 12px;
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
  border-radius: 6px;
  color: #c53030;
  font-size: 0.85rem;
  line-height: 1;
  white-space: nowrap;
  width: fit-content;
}

.saturation-warning .warning-icon {
  flex-shrink: 0;
  font-size: 0.95rem;
}

.saturation-warning .warning-text {
  font-weight: 500;
}

.gaia-id-display .gaia-label {
  font-weight: 600;
  color: #4a5568;
  margin-right: 8px;
}

.gaia-id-display .gaia-value {
  color: #2d3748;
  font-family: monospace;
}

/* Ensure metadata tags in gaia-id-display match those in search results */
.gaia-id-display .result-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 0;
}

.lc-plot {
  width: 100%;
  flex: 1 1 auto;       /* Fill remaining space after the Gaia ID / saturation header */
  min-height: 400px;    /* Ensure the plot area never gets too small */
  box-sizing: border-box;
}

/* Series Groups Layout */
.series-groups {
    display: flex;
    gap: 12px;
}

.series-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Add new series legend styles */
.series-divider {
    width: 1px;
    background-color: #ddd;
    margin: 0 8px;
}

.series-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.85em;
    color: #777;
}

.legend-item {
    line-height: 1.4;
}

.legend-item strong {
    background: #fafafa;
    color: #495057;
    padding: 2px 0;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    display: inline-block;
}

/* --- Series info tooltip (hover) --- */
.series-info {
    position: relative;
    display: inline-block;
    margin-top: 6px;
}
.series-info-trigger {
    margin-left: 0;
    padding: 2px 8px;                /* ~50% smaller overall */
    background-color: #C4D7FF;       /* blue background (same family as selected series) */
    color: #0466c8;                  /* blue text */
    border: 1px solid #0466c8;       /* blue border */
    border-radius: 9999px;           /* pill radius like FITMAG0 */
    box-shadow: none;                /* remove shadow */
    text-decoration: none;           /* no underline */
    font-size: 10px;                 /* smaller text */
}
.series-info-trigger:hover,
.series-info-trigger:focus {
    outline: none;
    background-color: #C4D7FF;       /* keep stable on hover */
    color: #0466c8;
    border-color: #0466c8;
    box-shadow: none;                /* ensure no hover shadow */
    transform: none;                 /* no lift */
}
.series-info-popover {
    position: absolute;
    left: 0;
    top: 130%;
    min-width: 280px;
    max-width: 380px;
    background: #fff;
    color: #222;
    border: 1px solid #E1E6F9;
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    padding: 12px 14px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.series-info:hover .series-info-popover,
.series-info-trigger:focus + .series-info-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.series-info-popover .popover-content {
    font-size: 0.9rem;
    line-height: 1.3rem;
}

/* Improve spacing inside the series info popover */
.series-info-popover .popover-content p {
    margin: 10px 0;
}
.series-info-popover .popover-content ul {
    margin: 6px 0 12px 20px;
    padding-left: 16px;
}
.series-info-popover .popover-content li {
    margin: 2px 0;
}
.series-info-popover .popover-content strong {
    background: transparent;
}

/* Update display options to remove shadows and center */
#display-options .container {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    position: relative;
    color: #333333;
    width: 100%;
    justify-content: flex-start;
    box-shadow: none;
}

#display-options .container:hover {
    /* No hover animation for display options */
}

#display-options .checkmark {
    box-shadow: none;
}

#display-options .container input:checked ~ .checkmark {
    background-color: #fff;
    border: 1px solid black;
    box-shadow: none;
}

/* Update download group centering */
.download-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

/* Ensure consistent button font styling */
.radio-pill span {
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}

.visit-button.sm {
    font-weight: 500;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
/* =================================================================
   ADDITIONAL STYLES FROM lightcurves-page.css
   ================================================================= */

/* ===================================================================
   LIGHTCURVES PAGE SPECIFIC STYLES
   Extracted from templates/lightcurves.html inline <style> blocks
   =================================================================== */

/* ─── Gaia ID Content and Metadata Alignment ─────────────────────── */
.gaia-id-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.result-metadata {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gaia-id-content .metadata-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 8px;
  line-height: 1;
}

.gaia-id-content .gaia-label,
.gaia-id-content .gaia-value {
  display: inline-flex;
  align-items: center;
  height: 24px;
}

/* ─── Search Button Navigation Styling ────────────────────────────── */
.search-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  margin-top: 15px;
  width: 100%;
  flex-shrink: 0; /* Prevent search tabs from shrinking */
}

.search-tab {
  padding: 6px 8px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background-color: #f5f5f5;
  font-size: 0.75em;
  flex: 1;
  text-align: center;
  transition: all 0.2s;
  color: #495057;
}

.search-tab:hover {
  transform: translateY(-2px);
}

.search-tab.active {
  background-color: #C4D7FF;
  border: none;
  font-weight: 700;
  color: #0466c8;
}

/* ─── Form Container Styling ───────────────────────────────────────── */
.form-container {
  display: none;
  padding-top: 8px;
  flex-shrink: 0; /* Prevent form containers from shrinking */
}

.form-container.active {
  display: block;
  flex-shrink: 0; /* Prevent active form container from shrinking */
}

.error-message {
  color: #721c24;
  background-color: #f8d7da;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 15px;
  font-size: 0.9em;
}

/* Input validation error message styling */
.input-error-message {
  color: #d9534f;
  font-size: 0.8em;
  margin-top: 4px;
  font-weight: 500;
  display: none;
}

/* ─── Search Type Radio Buttons Styling ──────────────────────────── */
.search-type-options {
  display: flex;
  gap: 20px;
  margin: 0 0 2px 0;
  padding: 2px 0;
}

.search-type-options .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  color: #555;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}

.search-type-options input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: #0466c8;
}

.search-type-options .radio-label:hover {
  color: #0466c8;
}

/* ─── Required Field Styling for Frames Search ────────────────────── */
#frames-search-form input[required], #frames-search-form select[required] {
  border-left: 3px solid #007bff;
}

#frames-search-form input[required]:invalid, #frames-search-form select[required]:invalid {
  border-left-color: #f8a5a5;
  /* lighter red */
}

#frames-search-form input[required]:valid, #frames-search-form select[required]:valid {
  border-left-color: #c7e2d1;
  /* slightly darker green for better visibility */
}

/* ─── Return to Search Button Hover ────────────────────────────────── */
#return-to-search-btn:hover {
  background-color: #d0e3d9 !important;
  border-color: #333 !important;
  transform: translateY(-2px);
}

/* ─── Search History Scrollbar Behavior ───────────────────────────── */
#search-history-section {
  display: flex;
  flex-direction: column;
  flex: 1; /* Take up remaining space after other elements */
  min-height: 0; /* Allow flexbox to shrink below content size */
  margin-top: 20px;
}

.history-list {
  flex: 1; /* Fill remaining space in the history section */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  min-height: 0; /* Allow flexbox to shrink below content size */
}

.history-list:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.3) transparent;
}

.history-list::-webkit-scrollbar {
  width: 8px;
}

.history-list::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

.history-list::-webkit-scrollbar-track {
  background: transparent; 
}

.history-list:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3); 
}

.history-list:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5); 
}

/* ─── Two-Column Layout Styling ────────────────────────────────────── */
.two-column-layout {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.left-column, .right-column {
  flex: 1;
}

.right-column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.cli-section {
  height: 100%;
  background: #f8f9fa;
  border-radius: 8px;
}

/* ─── Centered Layout Styling for Light Curves Page ───────────────── */
.centered-policy-layout {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.centered-policy-layout section {
  max-width: 800px;
  width: 100%;
}

/* ─── Section Cards Consistency ────────────────────────────────────── */
.section-card {
  margin-bottom: 25px;
}

.left-column .section-card:last-child,
.right-column .section-card:last-child,
.centered-policy-layout .section-card:last-child {
  margin-bottom: 0;
}

/* ─── Search Results Styling ───────────────────────────────────────── */
#search-results-container {
  margin-top: 20px;
}

.search-count {
  font-size: 0.9em;
  color: #666;
  margin-left: 10px;
}

#search-results-list {
  margin-top: 15px;
}

/* ─── Single Result Item (for non-grouped results) ───────────────────── */
.search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.result-info {
  flex: 1;
}

.result-identification-line {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-weight: 500;
}

.searched-name-tag {
  background: #fafafa;
  color: #495057;
  border: 1px solid #888;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
  display: inline-block;
  font-size: 0.9em;
  margin-right: 10px;
}

.result-id-text {
  /* Inherits font-weight from .result-identification-line */
}

.result-id {
  font-weight: 400;
  margin-bottom: 5px;
}
.result-id .result-id-label {
  font-weight: 400;
}
.result-id .result-id-value {
  font-weight: 700;
}

.result-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  border: none;
  outline: none;
  background: transparent;
}

.metadata-tag {
  font-size: 0.8em;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: #e9ecef;
  color: #495057;
}

.photometry-tag {
  background-color: #cfe8fc;
  color: #0466c8;
}

.season-tag {
  background-color: #e6e0f3;
  color: #563d8c;
}

/* Variant colors for multiple seasons of the same Gaia ID */
.season-tag.season-tag-1 {
  /* default purple (kept as-is) */
  background-color: #e6e0f3;
  color: #563d8c;
}
.season-tag.season-tag-2 {
  /* orange variant for second season */
  background-color: #ffe8d6;
  color: #9c5300;
  /* no border to match season-tag-1 */
}
.distance-tag {
  background-color: #e0f3e9;
  color: #0b6e4f;
}

.season-year {
  font-weight: 600;
  color: #495057;
  margin: 2px 0 6px 0;
}

.result-actions {
  display: flex;
  gap: 10px;
}

.no-results {
  text-align: center;
  padding: 30px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 20px 0;
}

.no-results p {
  margin: 10px 0;
  color: #495057;
}

.gaia-id-info {
  font-family: 'Source Code Pro', monospace;
  font-size: 0.9em;
  background-color: #e9ecef;
  padding: 5px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 10px;
  color: #343a40;
}

/* ─── JS9 Modal and Layout Overrides ──────────────────────────────── */
#fits-modal {
  position: fixed;
  top: 2vh;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 12px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  width: 96vw;
  max-width: 96vw;
  height: 96vh;
  max-height: 96vh;
  overflow: auto;
  z-index: 1000;
  display: none;
  padding-bottom: 50px;
}

#js9-layout {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: 100%;
  padding-bottom: 8px;
}

#js9-left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#js9-right {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

#js9-viewerMenubar,
#js9-viewerToolbar,
#js9-viewerStatusbar {
  width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
  overflow-x: hidden !important;
}

#js9-viewerStatusbar {
  height: 28px !important;
  overflow: visible !important;
  flex: 0 0 28px;
  white-space: nowrap;
}

#js9-viewer {
  flex: 1 1 0;
  width: 100% !important;
  max-height: 100%;
}

#js9-viewerInfo,
#js9-viewerMagnifier {
  flex: 1 1 0;
  overflow: auto;
}

#js9-close {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1010;
  padding: 8px 18px;
  font-size: 0.95rem;
  border-radius: 8px !important;
}

#js9-viewerToolbar {
  height: 55px !important;
  overflow: visible !important;
  flex: 0 0 36px;
}

#viewerStatusbarContainer,
#js9-viewerStatusbarContainer {
  height: 28px !important;
  overflow: visible !important;
  flex: 0 0 28px;
}

#viewerStatusbarContainer .JS9Statusbar {
  height: 100% !important;
  overflow: visible !important;
  white-space: nowrap;
}

/* ─── reCAPTCHA Styling ─────────────────────────────────────────────── */
.grecaptcha-badge {
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 1001;
}

.recaptcha-notice {
  position: relative;
  background-color: #f8f9fa;
  border: 1px solid #e5e9ed;
  border-radius: 4px;
  padding: 10px 15px;
  margin: 15px 0;
  font-size: 0.85em;
  color: #495057;
  line-height: 1.4;
}

.recaptcha-notice a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
}

.recaptcha-notice a:hover {
  text-decoration: underline;
}

.recaptcha-notice:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E");
  vertical-align: middle;
}

/* ─── Search History Styles ────────────────────────────────────────── */
#search-history-section {
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
  /* margin-top is now handled in the scrollbar behavior section above */
}

#search-history-section .nav-section-title {
  font-size: 1.2em;
  display: flex;
  align-items: center;
  gap: 6px;
}

#search-history-section .nav-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.history-list {
  margin-top: 10px;
}

.history-item {
  padding: 8px 12px;
  margin: 4px 0;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9em;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}

.history-item:hover {
  background: #e0e0e0;
}

.history-coords {
  /* Main part of the history item, typically uses default .history-item font size */
}

.history-daterange, .history-misc {
  font-size: 0.85em;
  color: #555;
  display: inline-block;
  margin-top: 2px;
}

/* ─── Loading Overlay ──────────────────────────────────────────────── */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(244, 247, 252, 0.78);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: none;
  z-index: 9999;
  animation: overlay-in 0.18s ease-out;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

.status-widget {
  width: min(400px, 100%);
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e3e8f1;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(22, 38, 74, 0.14), 0 2px 6px rgba(22, 38, 74, 0.06);
  padding: 22px 24px;
  font-family: 'Inter', sans-serif;
  animation: widget-in 0.22s ease-out;
}

@keyframes widget-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.status-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.loader-ring {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #e6ecf6;
  border-top-color: #234a85;
  border-right-color: #6f93cf;
  animation: loader-spin 0.85s linear infinite;
}

@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

.status-heading {
  min-width: 0;
}

.status-text {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.3;
}

.status-sub {
  margin-top: 3px;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #6b7280;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.status-sub:empty {
  display: none;
}

/* Progress bar (frames, name and coordinate searches) */
.progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #edf1f7;
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #234a85, #6f93cf);
  transition: width 0.3s ease;
}

.progress-percentage {
  min-width: 36px;
  text-align: right;
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a5568;
}

.status-metrics {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.metric {
  background: #f7f9fc;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #e5e9f0;
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-title {
  font-size: 0.68rem;
  color: #7a8394;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
}

.metric-value {
  font-size: 0.85rem;
  color: #1a1a2e;
  font-weight: 500;
  line-height: 1.1;
}

/* Show/hide metrics based on search type */
#loading-overlay .frames-metric {
  display: flex;
}

#loading-overlay .name-metric {
  display: none;
}

#loading-overlay[data-search-type="name"] .frames-metric {
  display: none;
}

#loading-overlay[data-search-type="name"] .name-metric {
  display: flex;
}

/* Hide all metrics for fast search types (coords, gaia, lightcurve) */
#loading-overlay[data-search-type="coords"] .status-metrics,
#loading-overlay[data-search-type="gaia"] .status-metrics,
#loading-overlay[data-search-type="lightcurve"] .status-metrics {
  display: none;
}

/* Light-curve steps replace the progress bar */
.load-steps {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

#loading-overlay[data-lc-stage] .load-steps {
  display: block;
}

#loading-overlay[data-lc-stage] .progress-container {
  display: none;
}

.load-step {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 0;
  font-size: 0.88rem;
  color: #9aa3b2;
}

.load-step + .load-step {
  border-top: 1px solid #f0f3f8;
}

.load-step-label {
  flex: 1;
}

.load-step-time {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 0.8rem;
  color: #6b7280;
}

.load-step-marker {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #dde3ec;
}

/* Active step */
#loading-overlay[data-lc-stage="archive"] [data-step="archive"],
#loading-overlay[data-lc-stage="plot"] [data-step="plot"] {
  color: #1a1a2e;
  font-weight: 500;
}

#loading-overlay[data-lc-stage="archive"] [data-step="archive"] .load-step-marker,
#loading-overlay[data-lc-stage="plot"] [data-step="plot"] .load-step-marker {
  border-color: #234a85;
}

#loading-overlay[data-lc-stage="archive"] [data-step="archive"] .load-step-marker::after,
#loading-overlay[data-lc-stage="plot"] [data-step="plot"] .load-step-marker::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #234a85;
  animation: step-pulse 1.2s ease-in-out infinite;
}

@keyframes step-pulse {
  0%, 100% { transform: scale(0.55); opacity: 0.55; }
  50% { transform: scale(1); opacity: 1; }
}

/* Completed step */
#loading-overlay[data-lc-stage="plot"] [data-step="archive"] {
  color: #4a5568;
}

#loading-overlay[data-lc-stage="plot"] [data-step="archive"] .load-step-marker {
  border-color: #234a85;
  background: #234a85;
}

#loading-overlay[data-lc-stage="plot"] [data-step="archive"] .load-step-marker::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  #loading-overlay,
  .status-widget {
    animation: none;
  }

  .loader-ring,
  .load-step-marker::after {
    animation-duration: 2s !important;
  }
}

/* ─── Flag Legend Styles ───────────────────────────────────────────── */
#flag-legend-bar {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  padding: 8px 16px;
}

.flag-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}

.flag-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flag-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9em;
  color: #495057;
}

.flag-value {
  background: #fafafa;
  color: #495057;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
  min-width: 24px;
  text-align: center;
}

.flag-link {
  background: #fafafa;
  border: 1px solid #ccc;
  color: #0d6efd;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  font-size: 0.85em;
}

.flag-link:hover {
  background: #dee2e6;
  color: #0a58ca;
}

.section-card .content-area .flag-link {
  border: none;
}

.flag-desc {
  line-height: 1.4;
}

@media (max-width: 1200px) {
  .flag-legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ─── Phase Folding Control Styles ─────────────────────────────────── */
.phase-fold-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 2px;
}

/* ─── Phase Folding Radio Buttons (inline with title) ──────────────── */
.toolbar-title-with-radio {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e9f0;
}

.phase-radio-group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}

.phase-radio-group .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #555;
  cursor: pointer;
  font-weight: normal;
  margin: 0;
}

.phase-radio-group input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: #0466c8;
}

.phase-radio-group .radio-label:hover {
  color: #0466c8;
}

.fold-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fold-row.button-row {
  justify-content: flex-start;
}

.phase-fold-controls .lc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #333;
  width: 100%;
}

.phase-fold-controls input[type="number"] {
  padding: 8px 12px;
  border: 1px solid #ccd0d9;
  border-radius: 6px;
  background-color: #fafafa;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  width: 140px;
  flex-grow: 1;
}

.phase-fold-controls input[type="number"]:focus {
  border-color: #8FA8FF;
  outline: none;
  box-shadow: 0 0 0 2px rgba(143, 168, 255, 0.2);
}

.phase-fold-controls .unit {
  color: #666;
  font-size: 0.9em;
  min-width: 25px;
}

.phase-fold-controls button.visit-button.sm {
  background-color: #fafafa;
  color: #333;
  border: 1px solid #888;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  width: 140px;
}

.phase-fold-controls button.visit-button.sm:hover {
  background-color: #C4D7FF;
  transform: translateY(-2px);
  border-color: #333;
}

#apply-fold {
  background-color: #E2EAFF;
  border-color: #333;
  margin-right: 6px;
}

.fold-row.button-row:last-child {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
}

/* ─── Flag Citation Style ──────────────────────────────────────────── */
.flag-citation {
  margin-top: 0;
  text-align: center;
  font-size: 0.9em;
  color: #9a9a9a;
  padding: 0 0;
  border-top: 1px solid #e9ecef;
}

/* ─── Download Button Styling ──────────────────────────────────────── */
.download-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.download-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.download-row .visit-button.sm {
  width: 140px;
  padding: 8px 16px;
  background-color: #fafafa;
  color: #333;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.download-row .visit-button.sm:hover {
  transform: translateY(-2px);
}

/* PNG Button - Green styling */
#save-png {
  background-color: #e0f3e9 !important;
  color: #0b6e4f !important;
  font-weight: 700 !important;
}

#save-png:hover {
  background-color: #d0e3d9 !important;
}

/* CSV Button - Green styling */
#save-csv {
  background-color: #e0f3e9 !important;
  color: #0b6e4f !important;
  font-weight: 700 !important;
}

#save-csv:hover {
  background-color: #d0e3d9 !important;
}

/* FITS Button - Green styling */
#save-fits {
  background-color: #e0f3e9 !important;
  color: #0b6e4f !important;
  font-weight: 700 !important;
}

#save-fits:hover {
  background-color: #d0e3d9 !important;
}

/* ASCII Button - Green styling */
#save-ascii {
  background-color: #e0f3e9 !important;
  color: #0b6e4f !important;
  font-weight: 700 !important;
}

#save-ascii:hover {
  background-color: #d0e3d9 !important;
}

/* Return to Search Results Button - Green styling */
#return-to-search-btn {
  background-color: #e0f3e9 !important;
  color: #0b6e4f !important;
  font-weight: 700 !important;
}

#return-to-search-btn:hover {
  background-color: #d0e3d9 !important;
  transform: translateY(-2px);
}

/* ─── Modern Button Styling ────────────────────────────────────────── */
.view-lc-btn, .download-fits-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid #d0d0d0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.view-lc-btn {
  background-color: #C4D7FF;
  color: #0466c8;
  border: none;
  font-weight: 700;
  /* match search-tab.active styling */
}

.view-lc-btn:hover {
  background-color: #A0B8E0;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  border: none;
}

.download-fits-btn {
  background-color: #e0f3e9;
  color: #0b6e4f;
  border: none;
  box-shadow: none;
  margin-left: 8px;
  /* match Search button styling */
}

.download-fits-btn:hover {
  background-color: #d0e3d9;
  transform: translateY(-2px);
  box-shadow: none;
  color: #0b6e4f;
  border: none;
}

.download-all-btn {
  background-color: #ffeaa7;
  color: #d35400;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 50px;
  /* orange color scheme and move left */
}

.download-all-btn:hover {
  background-color: #fdcb6e;
  transform: translateY(-2px);
  box-shadow: none;
  color: #d35400;
  border: none;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.view-lc-btn::before, .download-fits-btn::before, .download-all-btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: text-bottom;
}

.view-lc-btn::before {
  display: none;
  /* remove the eyeball icon */
}

.download-fits-btn::before {
  display: none;
  /* remove the download arrow icon */
}

.download-all-btn::before {
  display: none;
  /* remove the download arrow icon */
}



/* ─── Flag Filter Styling ──────────────────────────────────────────── */
/* Flag filter checkbox styling - updated to match frame-switch */
#flag-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}

#flag-switch .container {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
  color: #333333;
}

#flag-switch .container input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

#flag-switch .checkmark {
  position: relative;
  width: 1.3em;
  height: 1.3em;
  border: 1px solid #888;
  border-radius: 5px;
  flex-shrink: 0;
  transition: all 0.2s;
}

/* When checked: white background with dark grey border */
#flag-switch .container input:checked ~ .checkmark {
  background-color: #fff;
  border: 1px solid #555;
}

/* Draw the tick mark (initially hidden) */
#flag-switch .checkmark:after {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0.45em;
  width: 0.25em;
  height: 0.5em;
  border: solid #555;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Reveal the tick when checked */
#flag-switch .container input:checked ~ .checkmark:after {
  opacity: 1;
}

/* highlight the active "button" - match Object/Twilight styling */
#flag-switch .container:has(input:checked) {
  background-color: #C4D7FF;
  border: none;
  color: #0466c8;
  font-weight: 700;
}

/* hover effect for inactive buttons */
#flag-switch .container:not(:has(input:checked)):hover {
  transform: translateY(-3px);
}

/* Results limit notice styling */
.results-limit-notice {
  color: #8e44ad;
  font-style: italic;
  font-size: 0.9em;
  margin-left: 16px;
  align-self: center;
}

/* ─── Toolbar and UI Styling ───────────────────────────────────────── */
/* Update toolbar background color */
.lc-toolbar {
  background: #ECEFF6 !important;
}

/* Add rounded corners to the top of the display bar */
#display-bar.lc-toolbar {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Update the radio-pill styling */
.radio-pill span {
  display: inline-block;
  padding: 6px 12px;
  background-color: #e8e8e8;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  border-radius: 8px; /* Match the flag buttons radius */
}

.radio-pill {
  background: transparent !important;
  margin-right: 6px;
}

/* Override the :has selector to target just the span */
.radio-pill input[type="radio"]:checked + span {
  background-color: #C4D7FF;
  color: #0466c8;
  font-weight: 700;
  border: 1px solid #0466c8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Hover animation for inactive series buttons */
.radio-pill input[type="radio"]:not(:checked) + span:hover {
  transform: translateY(-2px);
}

/* Remove any added margins/gaps */
.radio-pill {
  margin: 0;
  background: transparent !important;
  margin-right: 6px; /* Add gap between buttons */
}

.series-groups, .series-row {
  margin: 0;
  padding: 0;
}

/* Style for Lomb-Scargle display to match gaia-id-display */
.lomb-scargle-display {
  padding: 8px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid #e5e9f0;
  font-family: 'Inter', sans-serif;
  width: 100%;
  box-sizing: border-box;
}

/* Display options container */
#display-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Display options buttons - simple checkbox style */
#display-options .container {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: transform 0.2s;
  position: relative;
  color: #333333;
  width: fit-content;
}

#display-options .container input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

#display-options .checkmark {
  position: relative;
  width: 1.3em;
  height: 1.3em;
  border: 1px solid #888;
  border-radius: 5px;
  flex-shrink: 0;
  transition: all 0.2s;
  background-color: #fff;
}

#display-options .container input:checked ~ .checkmark {
  background-color: #fff;
  border: 1px solid black;
}

#display-options .checkmark:after {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0.45em;
  width: 0.25em;
  height: 0.5em;
  border: solid black;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s;
}

#display-options .container input:checked ~ .checkmark:after {
  opacity: 1;
}

/* Remove hover animation for display options checkboxes */
#display-options .container:hover {
  /* No hover animation */
}

/* Disabled styling for display options checkboxes during mutex */
#display-options .container:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

#display-options .container:has(input:disabled) .checkmark {
  background-color: #f5f5f5;
  border-color: #ccc;
}

#display-options .container:has(input:disabled) span:not(.checkmark) {
  color: #999;
}

/* ===== Additional Phase Folding Toolbar Styles ===== */
#fold-bar.lc-toolbar {
  margin-top: 1px;
  padding: 12px 16px;
}

#fold-bar .toolbar-column h3.toolbar-title {
  margin-bottom: 0px; /* Reduced space between title and controls */
}

#fold-bar .lc-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.fold-control-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.fold-control-group.fold-buttons {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-left: auto;
}

#fold-bar .lc-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #333;
}

#fold-bar input[type="number"] {
  padding: 8px 12px;
  border: 1px solid #ccd0d9;
  border-radius: 6px;
  background-color: #fafafa;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s;
  width: 140px;
}

#fold-bar input[type="number"]:focus {
  border-color: #8FA8FF;
  outline: none;
  box-shadow: 0 0 0 2px rgba(143, 168, 255, 0.2);
}

#fold-bar .unit {
  color: #666;
  font-size: 0.9em;
  min-width: 25px;
}

/* Style buttons consistently with other UI elements */
#fold-bar button.visit-button.sm {
  background-color: #fafafa;
  color: #333;
  border: 1px solid #888;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

#fold-bar button.visit-button.sm:hover {
  background-color: #C4D7FF;
  transform: translateY(-2px);
  border-color: #333;
}

/* Specific styling for the three lc-group buttons */
/* Halve Frequency - Purple styling */
#halve-freq {
  background-color: #e6e0f3 !important;
  color: #563d8c !important;
  font-weight: 700 !important;
  border: none !important;
}

#halve-freq:hover {
  background-color: #d6c8e8 !important;
}

/* Apply - Green styling (like FITS button) */
#apply-fold {
  background-color: #e0f3e9 !important;
  color: #0b6e4f !important;
  font-weight: 700 !important;
  border: none !important;
}

#apply-fold:hover {
  background-color: #d0e3d9 !important;
}

/* Reset - Coral/Salmon styling */
#reset-fold {
  background-color: #ffe4e1 !important;
  color: #c44536 !important;
  font-weight: 700 !important;
  border: none !important;
}

#reset-fold:hover {
  background-color: #ffb3b3 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .toolbar-title-with-radio {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .phase-radio-group {
    align-self: flex-start;
    gap: 12px;
  }
  
  #fold-bar .lc-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .fold-control-group, .fold-control-group.fold-buttons, .fold-buttons {
    width: 100%;
    flex-direction: column;
    margin-left: 0;
  }
  
  #fold-bar input[type="number"] {
    width: 100%;
  }
  
  #fold-bar button.visit-button.sm {
    width: 100%;
  }
}

/* ─── Periodogram Table Styling ────────────────────────────────────── */
.periodogram-table-container {
  position: absolute;
  top: 50%;
  right: 0;
  width: 30%;
  height: auto;
  max-height: 80%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: translateY(-50%);
}

.periodogram-table {
  font-size: 0.85rem;
  margin: 0;
  width: 100%;
}

.periodogram-table th,
.periodogram-table td {
  padding: 8px 6px;
  font-size: 0.8rem;
}

.periodogram-table th {
  font-size: 0.75rem;
  font-weight: 600;
}

/* Hide table by default - will be shown when periodogram type is selected */
.periodogram-table-container {
  display: none;
}

/* Show table only for top 5 peaks types */
.periodogram-table-container.show-for-peaks {
  display: block;
}

/* Ensure the ls-plot container is positioned relatively so table can be absolutely positioned */
.lc-plot-container {
  position: relative;
}

/* ─── Today Button Styling (Purple Theme) ─────────────────────────── */
.label-button-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.today-button {
  padding: 6px 8px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background-color: #e6ccff;
  font-size: 0.75em;
  text-align: center;
  transition: all 0.2s;
  color: #6f2c91;
  font-weight: 700;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.today-button:hover {
  background-color: #d4b3ff;
  transform: translateY(-2px);
}

.today-button:active {
  background-color: #c299ff;
  transform: translateY(0);
}

/* Table row highlighting for periodogram interaction */
.periodogram-table tbody tr {
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.periodogram-table tbody tr:hover {
  background-color: #f0f8ff;
}

.periodogram-table tbody tr.highlighted-row {
  background-color: #e8f5e8 !important;
  font-weight: 600;
}

/* ─── API docs teaser card (frames page right column) ─────────────── */
.api-teaser {
  background-color: #1e1e1e;
  border-radius: 0.5rem;
  padding: 30px;
  color: #d4d4d4;
}

.api-teaser-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 8px;
}

.api-teaser-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #a8a8ae;
  margin-bottom: 20px;
}

.api-teaser-code {
  margin: 0 0 24px;
  padding: 14px 16px;
  background: #161617;
  border: 1px solid #343437;
  border-radius: 8px;
  font-family: 'Source Code Pro', 'Courier New', monospace;
  font-size: 0.8rem;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
}

.api-teaser-code .command { color: #4ec9b0; }
.api-teaser-code .option  { color: #569cd6; }
.api-teaser-code .string  { color: #ce9178; }
.api-teaser-code .url     { color: #dcdcaa; }

.api-teaser-btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 8px;
  background: #ececec;
  color: #1a1a1a;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.api-teaser-btn:hover {
  background: #ffffff;
}

/* ─── Data pages: Data Use Policy + API card row ───────────── */
.info-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto 24px;
}

.info-row #data-policy {
  display: flex;
}

.info-row #data-policy .section-card {
  flex: 1;
  margin: 0;
  max-width: none;
}

.info-row .api-teaser {
  display: flex;
  flex-direction: column;
}

.info-row .api-teaser-code {
  font-size: 0.76rem;
}

.info-row .api-teaser-btn {
  align-self: flex-start;
  margin-top: auto;
}

@media (max-width: 1100px) {
  .info-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ─── Light-curve search results: one table per star ──────────────── */
.lc-result {
  background: #ffffff;
  border: 1px solid #e4e4ea;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}

.lc-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 18px;
  background: #fafafb;
  border-bottom: 1px solid #e4e4ea;
}

.lc-result-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.lc-result-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7a85;
}

.lc-result-id {
  font-family: 'Source Code Pro', 'Courier New', monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
  overflow-wrap: anywhere;
}

.lc-result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.lc-result-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: #f0f0f4;
  color: #4a4a52;
  font-size: 0.78rem;
}

.lc-result-chip.is-name {
  background: #eef3fb;
  color: #234a85;
  font-weight: 600;
}

.lc-result-distance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  background: #234a85;
  color: #fff;
  font-size: 0.82rem;
  box-shadow: 0 1px 2px rgba(35, 74, 133, 0.25);
}

.lc-result-distance svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.lc-result-distance-value {
  font-family: 'Source Code Pro', ui-monospace, monospace;
  font-size: 1.02rem;
  font-weight: 700;
}

.lc-result-distance-label {
  color: #dce6f6;
}

.lc-result-count {
  font-size: 0.8rem;
  color: #7a7a85;
}

.lc-seasons {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.lc-seasons thead th {
  padding: 10px 18px 8px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7a85;
}

.lc-seasons tbody th,
.lc-seasons tbody td {
  padding: 10px 18px;
  border-top: 1px solid #efeff3;
  text-align: left;
  vertical-align: middle;
}

.lc-seasons tbody tr:hover > * {
  background: #fbfbfd;
}

.lc-season-year {
  width: 1%;
  font-weight: 700;
  color: #1a1a1a;
}

.lc-season-dates {
  color: #4a4a52;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lc-actions {
  display: flex;
  gap: 6px;
}

.lc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  font: 600 0.8rem 'Inter', sans-serif;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lc-btn:focus-visible {
  outline: 2px solid #2f5fa8;
  outline-offset: 2px;
}

.lc-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.lc-btn-view {
  background: #e8effc;
  color: #1f4fa3;
}

.lc-btn-view:hover {
  background: #d9e5fa;
}

.lc-btn-fits {
  background: #ffffff;
  border-color: #dcdce3;
  color: #3a3a42;
}

.lc-btn-fits:hover {
  background: #f3f3f6;
}

.lc-btn svg {
  width: 13px;
  height: 13px;
}

.lc-missing {
  color: #a0a0aa;
}

/* Narrow screens: each season becomes a labelled block */
@media (max-width: 760px) {
  .lc-seasons thead {
    display: none;
  }
  .lc-seasons,
  .lc-seasons tbody,
  .lc-seasons tr {
    display: block;
  }
  .lc-seasons tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    padding: 12px 16px;
    border-top: 1px solid #efeff3;
  }
  .lc-seasons tbody th,
  .lc-seasons tbody td {
    padding: 0;
    border: none;
  }
  .lc-seasons tbody tr:hover > * {
    background: none;
  }
  .lc-season-dates {
    white-space: normal;
  }
  .lc-cell {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
  }
  .lc-seasons {
    overflow-wrap: anywhere;
  }
  .lc-cell::before {
    content: attr(data-label);
    font-size: 0.8rem;
    color: #7a7a85;
  }
}