/* Shared chrome for the customer-facing pages: index.html and download-ready.html.
 *
 * Only what BOTH pages need. Anything one page alone uses stays in that page -- a
 * shared file that collects single-use rules is just a second place to look.
 *
 * LOADED BEFORE each page's own <style>, deliberately. Equal-specificity rules here
 * are therefore overridable by the page, which is what lets the two account pills
 * differ: the header one on index.html is a button and takes a hover and a pointer,
 * the one on download-ready.html is a static label with a green border. The geometry
 * they agree on lives here once; the parts they disagree on stay with them.
 *
 * Expects the colour variables each page defines on :root -- --primary-green,
 * --primary-green-rgb and --dark-blue.
 */

/* ── The busy state ────────────────────────────────────────────────────────────
 *
 * currentColor, not white. Hard-coded white, this was invisible on any button that
 * is not the green one: the white "Send the link again" button spun a white ring on
 * a white background, which is why that button looked like it did nothing.
 * Inheriting the button's own text colour means one spinner works on all of them.
 */
.gn-spin {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    /* The gap is what makes the rotation visible. */
    border-top-color: transparent;
    border-radius: 50%;
    margin-right: 9px;
    vertical-align: -2px;
    opacity: 0.85;
    animation: gn-spin 0.7s linear infinite;
}

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

/* ── The account pill ──────────────────────────────────────────────────────────
 *
 * Geometry and the avatar disc. Both pages had their own copy of these, which is how
 * they came to sit at different sizes on the same site.
 */
.account-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    color: var(--dark-blue);
    white-space: nowrap;
}

.account-pill .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-green);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}