/* ==========================================================
   AUTH MODAL -- .cp-auth-modal-*, the shared "sign up to continue"
   prompt behind every gated action on this site (Comment, React,
   Follow, and the header's own "Sign in" -- see site.js's
   openAuthModal()/[data-cp-auth-modal-open]). Rendered once per page by
   site_header.php, anonymous viewers only. Backdrop/panel/close follow
   the same structure as the existing .cp-post-modal-* (comments modal,
   08_content.css) -- a new, narrower variant for a short prompt instead
   of a full comment thread, not a new pattern.
========================================================== */

.cp-auth-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(16, 21, 29, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
}

.cp-auth-modal-backdrop[hidden] { display: none; }

.cp-auth-modal-panel {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--cp-surface);
    border-radius: var(--cp-radius-lg);
    padding: 32px 28px 28px;
    text-align: center;
}

.cp-auth-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: var(--cp-surface-soft);
    color: var(--cp-text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.cp-auth-modal-close:hover { background: var(--cp-border); }

/* The ShiftTrack mark specifically -- white circle + minimal shadow,
   same recipe as the header's own .cp-header-signin-avatar (05_header.css)
   -- this modal exists precisely to make "this page runs on a separate
   platform" unmistakable, so its own brand mark reads the same way. */
.cp-auth-modal-brand {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--cp-surface);
    box-shadow: 0 2px 8px rgba(16, 21, 29, .18);
}

.cp-auth-modal-brand img { width: 32px; height: 32px; object-fit: contain; }

.cp-auth-modal-eyebrow {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cp-primary, #137A5A);
}

.cp-auth-modal-title {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cp-heading);
}

.cp-auth-modal-body {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--cp-text-muted);
}

.cp-auth-modal-signup {
    display: block;
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 12px;
    background: var(--cp-primary, #137A5A);
    color: var(--cp-inverse);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--cp-radius-md);
}

.cp-auth-modal-signup:hover { opacity: .92; }

.cp-auth-modal-login {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cp-text-muted);
    text-decoration: none;
}

.cp-auth-modal-login:hover { color: var(--cp-primary, #137A5A); text-decoration: underline; }