/* ============================================================================
 * BBWLoader — premium loading states for Prime
 * ----------------------------------------------------------------------------
 * Two pieces, one visual language:
 *   1. skeletons (.bbw-sk*) that reserve the space a table/card will fill,
 *   2. a phase card (.bbw-phase) that names the real work being done.
 *
 * Honesty contract: the progress bar exists only when a page calls
 * progress(done, total) with two real numbers; otherwise the card shows step
 * chips and, once known, real counts. No invented percentages.
 *
 * ARIA: the card is role="status" aria-live="polite"; the bar becomes a
 * progressbar only when determinate. Reduced motion stops shimmer/pulse.
 * Paired with assets/js/shared/bbw-loader.js.
 * ========================================================================== */

/* ---- §1 Skeleton --------------------------------------------------------- */

.bbw-sk {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    background: #eef2f7;
    border-radius: 7px;
}

.bbw-sk::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: bbw-sk-shimmer 1.3s ease-in-out infinite;
}

@keyframes bbw-sk-shimmer {
    100% { transform: translateX(100%); }
}

.bbw-sk-line { height: 9px; width: 100%; border-radius: 6px; }
.bbw-sk-line.is-w90 { width: 90%; }
.bbw-sk-line.is-w75 { width: 75%; }
.bbw-sk-line.is-w60 { width: 60%; }
.bbw-sk-line.is-w45 { width: 45%; }
.bbw-sk-line.is-w30 { width: 30%; }
.bbw-sk-line.is-lg { height: 14px; }
.bbw-sk-line.is-sm { height: 7px; }

.bbw-sk-dot { width: 30px; height: 30px; border-radius: 9px; }

/* Table skeleton rows inherit the table's own cell rhythm. */
.bbw-sk-tr > td { padding-top: 11px; padding-bottom: 11px; }
.bbw-sk-tr .bbw-sk-line { min-width: 34px; }

/* Standalone block skeleton (cards / chart / detail sections). */
.bbw-sk-block {
    background: var(--bbw-surface, #fff);
    border: 1px solid var(--bbw-border, #e2e7ee);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: inset 0 1px 0 #fff, 0 8px 26px -20px rgba(11, 21, 38, .4);
    text-align: left;
}
.bbw-sk-block-row { display: flex; align-items: center; gap: 12px; }
.bbw-sk-block-col { display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.bbw-sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.bbw-sk-grid .bbw-sk-cell { padding: 12px; border: 1px solid var(--bbw-border, #e2e7ee); border-radius: 10px; }
.bbw-sk-chart { height: 180px; border-radius: 10px; margin-top: 14px; width: 100%; }

/* ---- §2 Phase card ------------------------------------------------------- */

.bbw-phase-host { min-width: 0; }

.bbw-phase {
    position: relative;
    overflow: hidden;
    background: var(--bbw-surface, #fff);
    border: 1px solid var(--bbw-border, #e2e7ee);
    border-radius: 14px;
    padding: 15px 17px 14px;
    box-shadow: inset 0 1px 0 #fff, 0 14px 34px -26px rgba(11, 21, 38, .5);
    color: var(--bbw-ink, #0b1526);
    text-align: left;
    animation: bbw-phase-in .22s ease both;
}

.bbw-phase::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, #0b2a5b, #1e56e0 56%, #6f9bff);
}

.bbw-phase-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.bbw-phase-copy { min-width: 0; }

.bbw-phase-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bbw-ink-3-text, #5c6b80);
}

.bbw-phase-title {
    margin-top: 3px;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.bbw-phase-note {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--bbw-ink-2, #46556c);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.bbw-phase-live {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    color: var(--bbw-blue, #1e56e0);
    background: var(--bbw-blue-soft, #eef3ff);
    border: 1px solid rgba(30, 86, 224, .18);
    border-radius: 999px;
    padding: 5px 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bbw-phase-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bbw-blue, #1e56e0);
    animation: bbw-phase-pulse 1.25s ease-in-out infinite;
}

@keyframes bbw-phase-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .45; transform: scale(.8); }
}

.bbw-phase-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 11px;
}

.bbw-phase-step {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 8px;
    border: 1px solid var(--bbw-border, #e2e7ee);
    background: var(--bbw-surface-2, #f7f9fb);
    color: var(--bbw-ink-3-text, #5c6b80);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.bbw-step-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bbw-border-strong, #cfd8e3);
    flex: none;
}

.bbw-phase-step.is-active {
    color: var(--bbw-blue-strong, #1745b5);
    background: #f3f7ff;
    border-color: #ceddff;
}

.bbw-phase-step.is-active .bbw-step-dot {
    background: var(--bbw-blue, #1e56e0);
    box-shadow: 0 0 0 3px rgba(30, 86, 224, .14);
}

.bbw-phase-step.is-done {
    color: var(--bbw-up, #0c7f5c);
    background: var(--bbw-up-soft, #e8f8f1);
    border-color: #d3eee3;
}

.bbw-phase-step.is-done .bbw-step-dot {
    background: var(--bbw-up, #0c7f5c);
}

.bbw-phase-step .bbw-step-tick {
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.bbw-phase-metric {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 11px;
    font-variant-numeric: tabular-nums;
}

.bbw-phase-metric[hidden] { display: none; }

.bbw-phase-metric b {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: var(--bbw-ink, #0b1526);
}

.bbw-phase-metric span {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bbw-ink-2, #46556c);
}

.bbw-phase-bar {
    margin-top: 10px;
    height: 5px;
    border-radius: 999px;
    background: var(--bbw-surface-3, #f0f3f7);
    overflow: hidden;
}

.bbw-phase-bar[hidden] { display: none; }

.bbw-phase-bar > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #1745b5, #1e56e0);
    transition: width .28s ease;
}

.bbw-phase-bartext {
    margin-top: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bbw-ink-2, #46556c);
    font-variant-numeric: tabular-nums;
}

.bbw-phase-bartext[hidden] { display: none; }

.bbw-phase-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px dashed var(--bbw-border, #e2e7ee);
}

.bbw-phase-hint {
    font-size: 11px;
    font-weight: 600;
    color: var(--bbw-ink-3-text, #5c6b80);
    line-height: 1.45;
}

.bbw-phase-retry {
    margin-left: auto;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--bbw-blue, #1e56e0);
    background: var(--bbw-blue-soft, #eef3ff);
    border: 1px solid rgba(30, 86, 224, .22);
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}

.bbw-phase-retry:hover { background: #e3ecff; border-color: rgba(30, 86, 224, .38); }

.bbw-phase.is-slow .bbw-phase-note { color: var(--bbw-amber, #b45309); }

.bbw-phase.is-error::before { background: linear-gradient(90deg, #8a0f22, #d90429); }

.bbw-phase.is-error .bbw-phase-live {
    color: var(--bbw-down, #d90429);
    background: var(--bbw-down-soft, #fdeef1);
    border-color: rgba(217, 4, 41, .2);
}

.bbw-phase.is-error .bbw-phase-dot { animation: none; background: var(--bbw-down, #d90429); }

.bbw-phase.is-done { animation: bbw-phase-out .26s ease forwards; }

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

@keyframes bbw-phase-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Slim inline variant for loads that replace an already-filled panel. */
.bbw-phase.is-slim {
    padding: 10px 13px;
    border-radius: 11px;
    box-shadow: none;
}

.bbw-phase.is-slim::before { height: 2px; }
.bbw-phase.is-slim .bbw-phase-title { font-size: 12.5px; }
.bbw-phase.is-slim .bbw-phase-steps { display: none; }
.bbw-phase.is-slim .bbw-phase-foot { display: none; }

/* Inline micro-loader used where a one-line wait already exists. */
.bbw-inline-load {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
}

.bbw-inline-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bbw-blue, #1e56e0);
    animation: bbw-phase-pulse 1.1s ease-in-out infinite;
    flex: none;
}

/* ---- §3 Navigation progress bar ----------------------------------------- */

.bbw-navbar {
    position: fixed;
    inset: 0 0 auto;
    height: 2px;
    z-index: 2147483001;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}

.bbw-navbar.is-on { opacity: 1; }

.bbw-navbar > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #0b2a5b, #1e56e0 60%, #6f9bff);
    box-shadow: 0 0 10px rgba(30, 86, 224, .5);
    transition: width .24s ease;
}

/* ---- §4 Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .bbw-sk::after { animation: none; opacity: .4; }
    .bbw-phase { animation: none; }
    .bbw-phase-dot,
    .bbw-inline-dot { animation: none; }
    .bbw-phase.is-done { animation: none; opacity: 0; }
    .bbw-phase-bar > span { transition: none; }
    .bbw-navbar { transition: none; }
    .bbw-navbar > span { transition: none; }
}