/* Reusable "skeleton" shimmer placeholders, shown in a section while its
   data is still loading (as opposed to #line-loader below, which signals a
   request is in flight globally). Site-wide, loaded once in layout.html so
   any page/section can drop these classes in without a separate include. */

@keyframes skeleton-shimmer {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    display: inline-block;
    border-radius: 4px;
    background-color: #eef1f5;
    background-image: linear-gradient(90deg, #eef1f5 0px, #f8fafc 60px, #eef1f5 120px);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    vertical-align: middle;
}

.skeleton-text { height: 12px; width: 100%; }
.skeleton-pill { height: 13px; width: 70px; border-radius: 99px; }
.skeleton-circle { border-radius: 50%; }

/* Dark-surface variant for placeholders on navy backgrounds (ticker bar,
   live-quote panel) -- same shimmer, lighter-on-dark sweep. */
.skeleton--dark {
    background-color: #26374a;
    background-image: linear-gradient(90deg, #26374a 0px, #38526d 60px, #26374a 120px);
    background-size: 200px 100%;
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* Line loader -- sits where .top-header used to be (see layout.js for what
   starts/stops it: nav clicks, form submits, any jQuery AJAX call). A thin
   bar that grows toward ~70% while a request is pending, then snaps to
   100% and fades out once it resolves -- the same "still working" signal
   as a top-of-page progress bar, just placed inline instead of fixed. */
#line-loader {
    position: relative;
    height: 3px;
    background: transparent;
    overflow: hidden;
}
#line-loader-bar {
    position: absolute;
    top: 0; left: 0; height: 100%;
    width: 0%;
    opacity: 0;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, var(--amber-dark), var(--amber));
    box-shadow: 0 0 8px rgba(255, 191, 0, .5);
    transition: width .25s ease, opacity .2s ease;
}
#line-loader.is-active #line-loader-bar {
    width: 70%;
    opacity: 1;
    transition: width 6s cubic-bezier(.1, .6, .2, 1), opacity .2s ease;
}
#line-loader.is-done #line-loader-bar {
    width: 100%;
    opacity: 1;
    transition: width .25s ease, opacity .2s ease .2s;
}
#line-loader.is-done.is-fading #line-loader-bar {
    opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
    #line-loader-bar { transition: opacity .2s ease !important; }
}