/* Refresh feedback stays with its action; source details are shown on demand. */
.refresh-action {
    --refresh-surface: var(--surface, #101725);
    --refresh-raised: var(--raised, #1b2945);
    --refresh-line: var(--border, #2b354e);
    --refresh-text: var(--text, #eef2ff);
    --refresh-muted: var(--muted, #a0a9bd);
    --refresh-accent: var(--accent, #5676ff);
    --refresh-positive: var(--positive, #80e6bd);
    --refresh-warning: var(--warning, #e6bd7e);
    --refresh-negative: var(--negative, #ff929e);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    color: var(--refresh-text);
    font: inherit;
}

.refresh-action *, .refresh-action *::before, .refresh-action *::after { box-sizing: border-box; }
.refresh-action [hidden] { display: none !important; }

.refresh-action .refresh-action-status {
    --refresh-state-color: var(--refresh-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    min-width: 0;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--refresh-state-color);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.refresh-action .refresh-action-status[data-state="loading"] { --refresh-state-color: #afc1ff; }
.refresh-action .refresh-action-status[data-state="success"] { --refresh-state-color: var(--refresh-positive); }
.refresh-action .refresh-action-status[data-state="partial"] {
    --refresh-state-color: var(--refresh-warning);
    background: color-mix(in srgb, var(--refresh-warning) 7%, transparent);
}
.refresh-action .refresh-action-status[data-state="error"] {
    --refresh-state-color: var(--refresh-negative);
    background: color-mix(in srgb, var(--refresh-negative) 8%, transparent);
}
.refresh-action .refresh-action-status[data-quiet="true"] { --refresh-state-color: var(--refresh-muted); }
.refresh-action .refresh-action-status:hover,
.refresh-action .refresh-action-status[aria-expanded="true"] {
    border-color: var(--refresh-line);
    background: color-mix(in srgb, var(--refresh-raised) 65%, transparent);
}

.refresh-action .refresh-action-status .refresh-action-label {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.refresh-action .refresh-action-status .refresh-action-dot {
    position: relative;
    display: block;
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    color: inherit;
}
.refresh-action .refresh-action-status[data-state="loading"] .refresh-action-dot::after {
    position: absolute;
    inset: -4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    animation: refresh-action-pulse 1.8s ease-out infinite;
}
.refresh-action .refresh-action-status .refresh-action-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    color: inherit;
    opacity: .72;
    transition: transform 160ms ease;
}
.refresh-action .refresh-action-chevron svg { width: 12px; height: 12px; }
.refresh-action .refresh-action-status[aria-expanded="true"] .refresh-action-chevron { transform: rotate(180deg); }
.refresh-action > .btn-dolphin { flex: 0 0 auto; white-space: nowrap; }
.refresh-action > .btn-dolphin:disabled { cursor: wait; opacity: .62; }

.refresh-action .refresh-action-panel {
    position: absolute;
    z-index: 95;
    top: calc(100% + 10px);
    right: 0;
    width: 410px;
    max-width: calc(100vw - 32px);
    max-height: min(560px, calc(100dvh - 32px));
    overflow: auto;
    overscroll-behavior: contain;
    padding: 18px;
    border: 1px solid var(--refresh-line);
    border-radius: 14px;
    background: var(--refresh-surface);
    background: linear-gradient(140deg, color-mix(in srgb, var(--refresh-raised) 50%, var(--refresh-surface)), var(--refresh-surface) 70%);
    color: var(--refresh-text);
    box-shadow: 0 1px 0 #dce6ff0a inset, 0 18px 54px #0006, 0 3px 10px #0003;
    scrollbar-color: var(--refresh-line) transparent;
    scrollbar-width: thin;
    animation: refresh-action-reveal 150ms ease-out both;
}
.refresh-action .refresh-action-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.refresh-action .refresh-action-panel-heading h3 {
    margin: 0;
    color: var(--refresh-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.2px;
}
.refresh-action .refresh-action-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: -5px -5px -5px 0;
    padding: 5px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--refresh-muted);
    font: inherit;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}
.refresh-action .refresh-action-close:hover { background: var(--refresh-raised); color: var(--refresh-text); }
.refresh-action .refresh-action-close svg { width: 15px; height: 15px; }
.refresh-action .refresh-action-panel .refresh-action-context {
    margin: 5px 0 8px;
    color: var(--refresh-muted);
    font-size: 11px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}
.refresh-action .refresh-action-sources { margin: 0; padding: 0; list-style: none; }
.refresh-action .refresh-action-source {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--refresh-line) 75%, transparent);
    --refresh-source-color: var(--refresh-muted);
}
.refresh-action .refresh-action-source:last-child { border-bottom: 0; }
.refresh-action .refresh-action-source[data-state="loading"] { --refresh-source-color: #afc1ff; }
.refresh-action .refresh-action-source[data-state="success"] { --refresh-source-color: var(--refresh-positive); }
.refresh-action .refresh-action-source[data-state="partial"] { --refresh-source-color: var(--refresh-warning); }
.refresh-action .refresh-action-source[data-state="error"] { --refresh-source-color: var(--refresh-negative); }
.refresh-action .refresh-action-source .refresh-action-source-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--refresh-source-color) 10%, transparent);
    color: var(--refresh-source-color);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.refresh-action .refresh-action-source-mark svg { width: 13px; height: 13px; }
.refresh-action .refresh-action-source-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.refresh-action .refresh-action-source-body strong {
    display: block;
    color: var(--refresh-text);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.6;
}
.refresh-action .refresh-action-source-body p {
    margin: 3px 0 0;
    color: var(--refresh-muted);
    font-size: 11px;
    line-height: 1.7;
    white-space: pre-line;
}
.refresh-action .refresh-action-warnings {
    display: grid;
    gap: 7px;
    margin: 5px 0 10px;
    padding: 10px 12px 10px 25px;
    border: 1px solid color-mix(in srgb, var(--refresh-warning) 18%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--refresh-warning) 5%, transparent);
    color: var(--refresh-warning);
    font-size: 11px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.refresh-action .refresh-action-warnings:empty { display: none; }
.refresh-action .refresh-action-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 9px 16px;
    margin-top: 7px;
    padding-top: 12px;
    border-top: 1px solid var(--refresh-line);
}
.refresh-action .refresh-action-retry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid var(--refresh-line);
    border-radius: 7px;
    background: var(--refresh-raised);
    color: var(--refresh-text);
    font: inherit;
    font-size: 11px;
    font-weight: 550;
    line-height: 1.5;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}
.refresh-action .refresh-action-retry:hover { border-color: var(--refresh-accent); }
.refresh-action .refresh-action-retry:disabled { cursor: wait; opacity: .6; }
.refresh-action .refresh-action-footer .refresh-action-time { margin: 0; color: var(--refresh-muted); font-size: 10px; line-height: 1.6; }
.refresh-action :is(.refresh-action-status, .refresh-action-close, .refresh-action-retry, .btn-dolphin):focus-visible {
    outline: 2px solid var(--refresh-accent);
    outline-offset: 3px;
}
.refresh-action .refresh-action-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

html[data-theme="light"]:not([data-skin="nocturne"]) .refresh-action {
    --refresh-surface: #fff;
    --refresh-raised: #eef2f9;
    --refresh-line: #d8deeb;
    --refresh-text: #202c43;
    --refresh-muted: #65728b;
    --refresh-positive: #147858;
    --refresh-warning: #986016;
    --refresh-negative: #b43146;
}
html[data-theme="light"]:not([data-skin="nocturne"]) .refresh-action-status[data-state="loading"] { --refresh-state-color: #4262bb; }

@keyframes refresh-action-pulse { 0% { transform: scale(.6); opacity: .6; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
@keyframes refresh-action-reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 760px) {
    html[data-skin] .tracker-page-heading { flex-wrap: wrap; }
    html[data-skin] .tracker-page-heading .tracker-heading-actions {
        position: relative;
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
        gap: 8px;
    }
    .tracker-heading-actions .refresh-action {
        position: static;
        flex: 1 1 auto;
        justify-content: space-between;
        max-width: 100%;
    }
    .refresh-action .refresh-action-status { font-size: 10px; padding-inline: 7px; gap: 6px; }
    .refresh-action .refresh-action-panel { width: min(410px, calc(100vw - 32px)); padding: 16px; }
    .tracker-heading-actions .refresh-action-panel { max-width: 100%; }
    .refresh-action .refresh-action-close { flex-basis: 34px; width: 34px; height: 34px; }
    .refresh-action .refresh-action-retry { min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .refresh-action *, .refresh-action *::before, .refresh-action *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}