/*
 * PostAnything brand layer — loaded after app.min.css (see partials/head-css.php).
 *
 * The app runs on the Homer admin template. This file nudges its typography toward the
 * marketing pages (slightly larger body text, bolder headings) and styles the auth pages'
 * brand block. Colours are deliberately left to the template, so the skin picker behind
 * the topbar gear keeps working.
 *
 * Kept as plain CSS rather than edits to assets/scss, since the template's gulp build
 * isn't set up in this repo.
 */

:root {
    --ins-body-font-size: 0.875rem;
}

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ---------- Auth pages (sign in / sign up / reset …) ---------- */
.auth-box .card {
    border-radius: 1rem;
}

.pa-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--ins-heading-color);
    text-decoration: none;
}

.pa-auth-brand:hover {
    color: var(--ins-heading-color);
}

.auth-brand h4 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.pa-auth-back {
    color: var(--ins-heading-color);
    border: 1px solid var(--ins-border-color);
    font-weight: 600;
}

.pa-auth-back:hover {
    color: var(--ins-heading-color);
    border-color: var(--ins-heading-color);
}

/* ---------- Post History: live status while posts are processing ---------- */
.pa-spin {
    display: inline-block;
    animation: pa-spin 1.2s linear infinite;
}

@keyframes pa-spin {
    to { transform: rotate(360deg); }
}

.pa-live-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
}

.pa-live-status .spinner-grow {
    --ins-spinner-width: .65rem;
    --ins-spinner-height: .65rem;
}

/* A row whose result just arrived, so the change is noticed. */
.pa-row-updated > td {
    animation: pa-row-updated 2.5s ease-out;
}

@keyframes pa-row-updated {
    from { box-shadow: inset 0 0 0 9999px rgba(var(--ins-success-rgb), .18); }
    to   { box-shadow: inset 0 0 0 9999px rgba(var(--ins-success-rgb), 0); }
}

.pa-row-updated.pa-row-failed > td {
    animation-name: pa-row-failed;
}

@keyframes pa-row-failed {
    from { box-shadow: inset 0 0 0 9999px rgba(var(--ins-danger-rgb), .18); }
    to   { box-shadow: inset 0 0 0 9999px rgba(var(--ins-danger-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
    .pa-spin, .pa-row-updated > td { animation: none; }
}