#calculator {
    content-visibility: visible;
}
#calculator .inner-container {
    display:block;
    padding:16px;
}

.pulseMarker {
    animation: pulseAnimation 6s infinite; /* Extend the duration */
}

@keyframes pulseAnimation {
    0%, 20% { /* Complete the pulse quickly */
        transform: scale(1);
        opacity: 1;
    }
    10% { /* Peak of the pulse */
        transform: scale(1.5); /* Adjust size increase if needed */
        opacity: 0.5;
    }
    20%, 100% { /* Extended pause */
        transform: scale(1);
        opacity: 1;
    }
}

.progress-container {
    width: 100%; /* Full width */
    background-color: #ddd; /* Light grey background */
    border-radius: 10px; /* Rounded corners for the container */
    padding: 3px; /* Padding around the progress bar */
    position: relative; /* Needed for absolute positioning of the tooltip */
    max-width: 600px; /* Max width of the outer container */
    margin: 20px auto; /* Centering the container */
}

.progress-bar {
    background-color: #007bff; /* Bootstrap primary blue */
    height: 20px; /* Height of the progress bar */
    border-radius: 10px; /* Rounded corners for the progress bar */
    position: relative; /* Relative positioning for the tooltip */
}


.progress-tooltip {
    position: absolute; /* Absolute position */
    top: -35px; /* Position above the progress bar */
    right: 0; /* Align to the right */
    background-color: #333; /* Tooltip background */
    color: #fff; /* Tooltip text color */
    padding: 5px 10px; /* Padding inside the tooltip */
    border-radius: 5px; /* Rounded corners for the tooltip */
    white-space: nowrap; /* Ensure the tooltip text does not wrap */
    font-size: 13px; /* Smaller text size for tooltip */
    display: flex; /* Use flex for centering */
    align-items: center; /* Vertical align */
    justify-content: center; /* Horizontal align */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Shadow for the tooltip */
}

/* Triangle pointing down from the tooltip */
.progress-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Compact public directories and stable chart placeholders. */
.directory-links {columns: 3 16rem; list-style: none; margin: 1.5rem 0;}
.directory-links li {break-inside: avoid; padding: .5rem 0;}
.source-summary {margin-top: 2rem; margin-bottom: 2rem;}
.data-sources {font-size: .9rem; color: #555;}
.chart [id^="chart"] {min-height: 350px;}
#period-picker select {width: 100%; min-height: 44px;}

.input-currency img {width:48px; height:48px; flex:0 0 48px;}

.price-data {margin-top:2rem; margin-bottom:2rem;}
.price-statistics {display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; margin:1.5rem 0;}
.price-statistics > div {padding:1rem; background:#f5f5f9; border-radius:.5rem; min-width:0;}
.price-statistics dt {font-weight:600; margin-bottom:.5rem;}
.price-statistics dd {margin:0; font-variant-numeric:tabular-nums; overflow-wrap:anywhere;}
.price-table-scroll {overflow-x:auto; max-width:100%; min-width:0; overscroll-behavior-x:contain;}
.price-table-scroll:focus-visible {outline:2px solid #3e4fff; outline-offset:2px;}
.price-data table {font-variant-numeric:tabular-nums;}
.price-data caption {text-align:start; font-weight:600; padding:.75rem 0;}
.price-data th {text-align:start;}
.historical-price-table {min-width:58rem;}
.historical-price-table td {white-space:nowrap;}
.historical-price-table tbody th {white-space:nowrap;}
.conversion-tables {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem;}
@media(max-width:639px) {.conversion-tables {grid-template-columns:minmax(0,1fr);}}