/* XIT Publisher — "Aurora" theme.
 *
 * Presentation only. Nothing here knows anything about publishing; every class
 * is applied to markup that already existed, so the pages behave exactly as
 * they did before.
 */

/* ------------------------------------------------------------- tokens --- */

:root {
    color-scheme: dark;

    --bg:            #070b16;
    --bg-2:          #0b1224;
    --surface:       rgba(19, 27, 48, .72);
    --surface-solid: #131b30;
    --surface-2:     rgba(255, 255, 255, .04);
    --line:          rgba(255, 255, 255, .09);
    --line-strong:   rgba(255, 255, 255, .16);

    --text:          #e8edfb;
    --text-dim:      #a4b1d0;
    --text-faint:    #6f7d9c;

    --accent:        #5b8cff;
    --accent-soft:   rgba(91, 140, 255, .16);
    --cyan:          #22d3ee;
    --violet:        #a78bfa;
    --ok:            #34d399;
    --ok-soft:       rgba(52, 211, 153, .14);
    --warn:          #fbbf24;
    --warn-soft:     rgba(251, 191, 36, .14);
    --danger:        #fb7185;
    --danger-soft:   rgba(251, 113, 133, .14);

    --topbar:     rgba(7, 11, 22, .74);

    --radius:     14px;
    --radius-sm:  9px;
    --shadow:     0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lg:  0 24px 70px -24px rgba(0,0,0,.75);
    --ring:       0 0 0 3px var(--accent-soft);

    --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
            Menlo, Consolas, monospace;
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg:            #eef2fb;
    --bg-2:          #f7f9fe;
    --surface:       rgba(255, 255, 255, .82);
    --surface-solid: #ffffff;
    --surface-2:     rgba(15, 23, 42, .035);
    --line:          rgba(15, 23, 42, .10);
    --line-strong:   rgba(15, 23, 42, .18);

    --text:          #101828;
    --text-dim:      #4a5878;
    --text-faint:    #7b88a3;

    --accent:        #3b6fe8;
    --accent-soft:   rgba(59, 111, 232, .12);
    --cyan:          #0891b2;
    --violet:        #7c3aed;
    --ok:            #0f9d68;
    --ok-soft:       rgba(15, 157, 104, .12);
    --warn:          #b45309;
    --warn-soft:     rgba(180, 83, 9, .12);
    --danger:        #dc2650;
    --danger-soft:   rgba(220, 38, 80, .12);

    --topbar:    rgba(240, 244, 252, .80);

    --shadow:    0 1px 2px rgba(16,24,40,.06), 0 10px 28px -14px rgba(16,24,40,.22);
    --shadow-lg: 0 24px 60px -26px rgba(16,24,40,.30);
}

/* ---------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    font: 15px/1.6 var(--font);
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* The aurora. Two soft blooms fixed behind everything, so scrolling a long
   page does not drag them along and make the background look busy. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60rem 34rem at 12% -8%,  rgba(91,140,255,.22), transparent 60%),
        radial-gradient(48rem 30rem at 92% 4%,   rgba(167,139,250,.16), transparent 62%),
        radial-gradient(52rem 32rem at 50% 108%, rgba(34,211,238,.11),  transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

:root[data-theme="light"] body::before {
    background:
        radial-gradient(60rem 34rem at 12% -8%,  rgba(59,111,232,.16), transparent 60%),
        radial-gradient(48rem 30rem at 92% 4%,   rgba(124,58,237,.10), transparent 62%),
        radial-gradient(52rem 32rem at 50% 108%, rgba(8,145,178,.10),  transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ------------------------------------------------------ page progress --- */

/* Shown while a page is loading or a form is on its way. It is a hint that
   something is happening, not a measurement — the width is a decaying
   approach to 90%, and the load event finishes it. */
#pageload {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    z-index: 90;
    background: linear-gradient(90deg, var(--accent), var(--cyan), var(--violet));
    box-shadow: 0 0 12px rgba(91,140,255,.7);
    opacity: 0;
    transition: width .2s ease, opacity .3s ease;
    pointer-events: none;
}
#pageload.on { opacity: 1; }

/* ---------------------------------------------------------------- shell --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    background: var(--topbar);
    border-bottom: 1px solid var(--line);
}

.topbar-inner {
    max-width: 64rem;
    margin: 0 auto;
    padding: .7rem 1.15rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand i { font-style: normal; font-weight: 650; }
.brand-mark {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: linear-gradient(140deg, var(--accent), var(--violet));
    box-shadow: 0 4px 14px -4px rgba(91,140,255,.7);
    flex: none;
}
.brand-mark svg { width: 17px; height: 17px; display: block; }
.brand span small {
    display: block;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1.1;
}

nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }

nav a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 520;
    color: var(--text-dim);
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
nav a.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
nav a svg { width: 15px; height: 15px; flex: none; }
nav a em { font-style: normal; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    padding: 0;
    margin: 0;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text-dim);
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-btn svg { width: 16px; height: 16px; }
/* Only one of the two glyphs shows, whichever the current theme is not. */
:root[data-theme="light"] .icon-btn .i-moon { display: none; }
:root:not([data-theme="light"]) .icon-btn .i-sun { display: none; }

.wrap {
    max-width: 64rem;
    margin: 0 auto;
    padding: 1.75rem 1.15rem 5rem;
}

/* --------------------------------------------------------- typography --- */

h1 {
    font-size: 1.55rem;
    font-weight: 660;
    letter-spacing: -.022em;
    margin: 0 0 .35rem;
    line-height: 1.25;
}

h2 {
    font-size: 1.02rem;
    font-weight: 620;
    letter-spacing: -.012em;
    margin: 0 0 .9rem;
    display: flex;
    align-items: center;
    gap: .55rem;
}
h2 svg { width: 16px; height: 16px; color: var(--text-faint); flex: none; }

h3 { font-size: .95rem; font-weight: 620; margin: 0 0 .3rem; letter-spacing: -.01em; }

p { margin: 0 0 .9rem; }
p:last-child { margin-bottom: 0; }

.muted { color: var(--text-dim); }
.small { font-size: .82rem; }
.faint { color: var(--text-faint); }

.lede {
    color: var(--text-dim);
    font-size: .96rem;
    max-width: 46rem;
    margin-bottom: 0;
}

code {
    font: .85em/1.4 var(--mono);
    background: var(--surface-2);
    border: 1px solid var(--line);
    padding: .1rem .35rem;
    border-radius: 6px;
    word-break: break-all;
}

pre {
    font: .8rem/1.65 var(--mono);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    overflow-x: auto;
    margin: 0;
    color: var(--text-dim);
}
pre code { background: none; border: 0; padding: 0; }

/* -------------------------------------------------------------- layout --- */

.page-head {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.page-head .lottie { flex: none; }

.cols {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.15rem;
    align-items: start;
}
.stack { display: grid; gap: 1.15rem; align-content: start; }

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

/* --------------------------------------------------------------- cards --- */

.card {
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
}
.card-tight { padding: 1rem 1.1rem; }

.card-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}
.card-head h2 { margin: 0; }
.card-head .spacer { margin-left: auto; }

/* The panel that shows what is live right now. */
.live {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--ok) 32%, var(--line));
    background:
        linear-gradient(135deg, var(--ok-soft), transparent 55%),
        var(--surface);
}
.live::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--ok), var(--cyan));
}

.dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent);
    animation: beat 2.4s ease-out infinite;
    flex: none;
}
@keyframes beat {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
    70%  { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------------------------------------------------------------- list --- */

.item {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .9rem 1rem;
    background: var(--surface-2);
    transition: border-color .15s, transform .15s, background .15s;
}
.item + .item { margin-top: .7rem; }
.item:hover { border-color: var(--line-strong); }
.item h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .6rem;
    font-size: .78rem;
    color: var(--text-faint);
    margin-top: .6rem;
}
.item-meta code { font-size: .72rem; }

.item-actions {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .75rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--line);
}

/* Severity accents. The class name is the severity the panel uses, so the
   colour follows the data with nothing extra to keep in step. */
.item.sev-warning  { border-left: 3px solid var(--warn); }
.item.sev-critical { border-left: 3px solid var(--danger); background: var(--danger-soft); }
.item.sev-info     { border-left: 3px solid var(--accent); }

.tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .68rem;
    font-weight: 620;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .16rem .45rem;
    border-radius: 5px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
    white-space: nowrap;
}
.tag.info     { background: var(--accent-soft); color: var(--accent);
                border-color: color-mix(in srgb, var(--accent) 26%, transparent); }
.tag.warning  { background: var(--warn-soft); color: var(--warn);
                border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.tag.critical { background: var(--danger-soft); color: var(--danger);
                border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.tag.ok       { background: var(--ok-soft); color: var(--ok);
                border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

.empty {
    text-align: center;
    padding: 1.75rem 1rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    color: var(--text-faint);
}
.empty .lottie { margin: 0 auto .25rem; }

/* --------------------------------------------------------------- forms --- */

form { margin: 0; }

label {
    display: block;
    margin-top: 1.05rem;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: -.005em;
}
label:first-of-type { margin-top: 0; }

label small {
    display: block;
    font-weight: 430;
    font-size: .79rem;
    line-height: 1.5;
    color: var(--text-faint);
    margin: .15rem 0 .1rem;
}

input[type=text], input[type=password], input[type=url],
input[type=datetime-local], input[type=number], textarea, select {
    width: 100%;
    padding: .58rem .7rem;
    margin-top: .35rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-solid);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: .75; }

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

textarea { min-height: 7rem; resize: vertical; line-height: 1.6; }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
                      linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2.2rem;
    cursor: pointer;
}

/* A counter under a length-limited field. The panel truncates past the limit,
   so it is worth seeing the ceiling approach rather than meeting it. */
.counter {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .4rem;
    font: 500 .72rem/1 var(--mono);
    color: var(--text-faint);
}
.counter .counter-n { flex: none; white-space: nowrap; }
.counter .track {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: var(--surface-2);
    overflow: hidden;
}
.counter .track i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--accent);
    transition: width .18s ease, background .18s ease;
}
.counter.near .track i { background: var(--warn); }
.counter.near { color: var(--warn); }
.counter.full .track i { background: var(--danger); }
.counter.full { color: var(--danger); }

/* File pickers. The native control is kept in the DOM and driven by the label
   around it, so the form submits exactly the same fields it always did. */
.drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: .45rem;
    padding: .8rem .9rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.drop:hover { border-color: var(--accent); }
.drop.over { border-color: var(--accent); background: var(--accent-soft); }
.drop.filled { border-style: solid; border-color: color-mix(in srgb, var(--ok) 42%, transparent); }
.drop input[type=file] {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.drop-icon {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border-radius: 9px;
    background: var(--surface-solid);
    border: 1px solid var(--line);
    color: var(--text-faint);
    flex: none;
}
.drop.filled .drop-icon { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.drop-icon svg { width: 16px; height: 16px; }
.drop-text { min-width: 0; font-weight: 500; font-size: .85rem; }
.drop-text b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.drop-text span { display: block; font-weight: 430; font-size: .76rem; color: var(--text-faint); }

/* Two short fields side by side. Anything with prose under it stays full
   width — a hint that wraps to four lines is worse than a wide field. */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .9rem; }
.grid-2 > label:first-of-type { margin-top: 1.05rem; }
.grid-2:first-child > label { margin-top: 0; }
@media (max-width: 560px) { .grid-2 { grid-template-columns: 1fr; } }

.hint { margin: .45rem 0 0; }
/* Announcement text is plain text, blank lines and all. */
.body-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-after { margin: 1rem 0 0; }

/* ------------------------------------------------------------- buttons --- */

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: 1.25rem;
    padding: .58rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--violet) 55%, var(--accent)));
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(91,140,255,.85);
    transition: transform .12s, box-shadow .15s, filter .15s, opacity .15s;
}
button:hover, .btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 10px 24px -10px rgba(91,140,255,.95);
    text-decoration: none;
}
button:active { transform: translateY(0); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
button svg, .btn svg { width: 15px; height: 15px; }

button.ghost, .btn.ghost {
    background: var(--surface-2);
    border-color: var(--line-strong);
    color: var(--text-dim);
    box-shadow: none;
}
button.ghost:hover, .btn.ghost:hover { color: var(--text); border-color: var(--accent); filter: none; }

button.danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 34%, transparent);
    color: var(--danger);
    box-shadow: none;
}
button.danger:hover { background: var(--danger); color: #fff; filter: none; }

button.small, .btn.small {
    margin-top: 0;
    padding: .3rem .6rem;
    font-size: .78rem;
    border-radius: 7px;
}
button.wide { width: 100%; margin-top: 1.4rem; }

/* -------------------------------------------------------------- flashes --- */

.flashes {
    display: grid;
    gap: .55rem;
    margin-bottom: 1.4rem;
}

.flash {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent);
    background: var(--ok-soft);
    color: var(--text);
    font-size: .88rem;
    box-shadow: var(--shadow);
    animation: rise .35s cubic-bezier(.21,1.02,.73,1) both;
}
.flash span { white-space: pre-line; min-width: 0; }
.flash svg { width: 17px; height: 17px; flex: none; margin-top: .1rem; color: var(--ok); }
.flash.error {
    border-color: color-mix(in srgb, var(--danger) 36%, transparent);
    background: var(--danger-soft);
}
.flash.error svg { color: var(--danger); }

@keyframes rise {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- table --- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}
td, th {
    text-align: left;
    padding: .6rem .1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
td:first-child {
    width: 8.5rem;
    color: var(--text);
    font-weight: 570;
    padding-right: 1rem;
}
td:last-child { color: var(--text-dim); }

/* -------------------------------------------------------------- lottie --- */

.lottie { width: 64px; height: 64px; }
.lottie svg { display: block; }
.lottie-lg { width: 120px; height: 120px; }
.lottie-sm { width: 40px; height: 40px; }

/* ------------------------------------------------------------ sign-in --- */

.signin {
    min-height: calc(100vh - 3.2rem);
    display: grid;
    place-items: center;
    padding: 2rem 1.15rem 4rem;
}
.signin-card {
    width: 100%;
    max-width: 25rem;
    text-align: center;
    padding: 2rem 1.9rem 1.9rem;
    box-shadow: var(--shadow-lg);
}
.signin-card .lottie { margin: 0 auto .5rem; }
.signin-card label { text-align: left; }
.signin-note {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: .76rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}
.signin-note svg { width: 13px; height: 13px; }

/* ------------------------------------------------------ upload progress --- */

/* The real one: bytes actually sent, reported by the browser. It replaces the
   form while a release is on its way, because a 40 MB upload over a domestic
   connection is a long time to look at a button that has stopped responding. */
.uploader { display: none; }
.uploader.on { display: block; animation: rise .3s ease both; }
form.uploading { display: none; }

.uploader-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 1.1rem;
}
.uploader-head .lottie { flex: none; }
.uploader-head b { display: block; font-size: .95rem; }
.uploader-head span { font-size: .82rem; color: var(--text-dim); }

.bar {
    height: 9px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    overflow: hidden;
    position: relative;
}
.bar i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent), var(--cyan));
    transition: width .25s ease;
    position: relative;
    overflow: hidden;
}
/* Moving stripes, so a slow upload still looks alive between updates. */
.bar i::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(115deg,
        rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%,
        rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%);
    background-size: 22px 22px;
    animation: slide .8s linear infinite;
}
@keyframes slide { to { background-position: 22px 0; } }

/* Once the bytes are all sent the server is still verifying signatures and
   writing files, and there is nothing left to measure. */
.bar.indeterminate i {
    width: 35% !important;
    animation: sweep 1.3s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes sweep {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}

.bar-stats {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .55rem;
    font: 500 .78rem/1 var(--mono);
    color: var(--text-faint);
}
.bar-pct { color: var(--text); font-weight: 600; }

.steps {
    display: grid;
    gap: .1rem;
    margin-top: 1.3rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
}
.step {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem 0;
    font-size: .83rem;
    color: var(--text-faint);
    transition: color .2s;
}
.step .pip {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--line-strong);
    flex: none;
    display: grid;
    place-items: center;
    transition: border-color .2s, background .2s;
}
.step .pip svg { width: 9px; height: 9px; stroke-width: 3.4; opacity: 0; transition: opacity .2s; }
.step.active { color: var(--text); }
.step.active .pip {
    border-color: var(--accent);
    border-right-color: transparent;
    animation: spin .7s linear infinite;
}
.step.done { color: var(--text-dim); }
.step.done .pip { border-color: var(--ok); background: var(--ok); color: #04120c; animation: none; }
.step.done .pip svg { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ niceties --- */

.reveal { animation: rise .4s cubic-bezier(.21,1.02,.73,1) both; }
.reveal:nth-child(2) { animation-delay: .05s; }
.reveal:nth-child(3) { animation-delay: .1s; }

.hr { height: 1px; background: var(--line); border: 0; margin: 1.3rem 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media (max-width: 560px) {
    .topbar-inner { padding: .6rem .9rem; gap: .5rem; }
    .brand span > i { display: none; }
    nav a { padding: .4rem .55rem; }
    nav a em { display: none; }
    .wrap { padding: 1.25rem .9rem 4rem; }
    h1 { font-size: 1.3rem; }
    .page-head { gap: .8rem; }
    .page-head .lottie { width: 48px; height: 48px; }
}