/* =============================================================================
   CO Print Press — Auth, Account, Admin styles
   -----------------------------------------------------------------------------
   Loaded after app.css. Same grunge / silkscreen aesthetic, applied to forms,
   account dashboards, and the back-office.
   ========================================================================== */

/* =================================================================
   AUTH PAGES (login, register, forgot/reset password)
   ================================================================= */
.cpp-auth {
    max-width: var(--cpp-max);
    margin: 0 auto;
    padding: var(--cpp-s8) var(--cpp-s5);
    min-height: calc(100vh - 200px);
}
.cpp-auth__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--cpp-s8);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
.cpp-auth__inner--single { grid-template-columns: 1fr; max-width: 540px; }
.cpp-auth--narrow .cpp-auth__inner { grid-template-columns: 1fr; max-width: 540px; }

.cpp-auth__art {
    background: var(--cpp-paper-2);
    padding: var(--cpp-s8) var(--cpp-s6);
    border: 3px solid var(--cpp-ink);
    box-shadow: 8px 8px 0 var(--cpp-ink);
    position: relative;
    overflow: hidden;
    transform: rotate(-1.5deg);
}
.cpp-auth__splat {
    position: absolute;
    top: -20px; right: -20px;
    width: 200px; height: 200px;
    opacity: 0.4;
    filter: url(#cpp-rough-heavy);
    animation: cpp-spatter-drift 18s ease-in-out infinite;
}
.cpp-auth__art-h {
    font-family: var(--cpp-font-display);
    font-size: clamp(2.5rem, 4.5vw, 4rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 0 0 var(--cpp-s4);
    position: relative;
    color: var(--cpp-ink);
}
.cpp-auth__art-h em {
    font-family: var(--cpp-font-brush);
    font-style: normal;
    color: var(--cpp-magenta);
    font-weight: 400;
    background: linear-gradient(180deg, transparent 60%, var(--cpp-yellow) 60%, var(--cpp-yellow) 92%, transparent 92%);
    padding: 0 6px;
    transform: rotate(-2deg);
    display: inline-block;
}
.cpp-auth__art p {
    font-size: 1.1rem;
    color: var(--cpp-ink-soft);
    max-width: 30ch;
    position: relative;
    margin: 0;
}

.cpp-auth__form {
    background: var(--cpp-paper);
    padding: var(--cpp-s7) var(--cpp-s6);
    border: 3px solid var(--cpp-ink);
    box-shadow: 8px 8px 0 var(--cpp-magenta);
    position: relative;
}
.cpp-auth__title {
    font-family: var(--cpp-font-display);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    font-weight: 900;
    line-height: 1;
    margin: 0 0 var(--cpp-s5);
}
.cpp-auth__lede {
    color: var(--cpp-ink-soft);
    margin-bottom: var(--cpp-s5);
}
.cpp-auth__footer {
    margin-top: var(--cpp-s5);
    font-size: 0.92rem;
    color: var(--cpp-ink-soft);
    text-align: center;
}
.cpp-auth__footer a {
    color: var(--cpp-magenta);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.cpp-auth__footer a:hover { color: var(--cpp-ink); }

/* =================================================================
   FORM FIELDS — used in auth, account, and admin
   ================================================================= */
.cpp-field {
    display: block;
    margin-bottom: var(--cpp-s4);
}
.cpp-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cpp-s4);
}
.cpp-field__label {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--cpp-font-mono);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cpp-ink);
    margin-bottom: 6px;
}
.cpp-field__opt {
    font-weight: 500;
    color: var(--cpp-ink-soft);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    font-size: 10px;
}
.cpp-field__sublink {
    font-size: 11px;
    color: var(--cpp-magenta);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-transform: none;
    letter-spacing: 0.02em;
}
.cpp-field__sublink:hover { color: var(--cpp-ink); }

.cpp-field__input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    font-family: var(--cpp-font-body);
    font-size: 1rem;
    color: var(--cpp-ink);
    background: var(--cpp-paper);
    border: 2px solid var(--cpp-ink);
    border-radius: 0;
    transition: box-shadow .15s, border-color .15s, background .15s;
    -webkit-appearance: none; appearance: none;
}
.cpp-field__input:focus {
    outline: none;
    background: var(--cpp-paper);
    box-shadow: 4px 4px 0 var(--cpp-magenta);
    transform: translate(-2px, -2px);
}
.cpp-field__input.has-error,
.cpp-field__input:invalid:not(:placeholder-shown) {
    border-color: var(--cpp-magenta);
}
.cpp-field__hint {
    display: block;
    font-family: var(--cpp-font-mono);
    font-size: 11px;
    color: var(--cpp-ink-soft);
    margin-top: 5px;
    letter-spacing: 0.02em;
}
.cpp-field__error {
    display: block;
    font-family: var(--cpp-font-mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--cpp-magenta);
    margin-top: 5px;
    letter-spacing: 0.04em;
}

.cpp-checkbox {
    display: flex; align-items: flex-start; gap: 10px;
    margin: var(--cpp-s4) 0;
    font-size: 0.93rem;
    color: var(--cpp-ink-soft);
    cursor: pointer;
    line-height: 1.45;
}
.cpp-checkbox input {
    -webkit-appearance: none; appearance: none;
    width: 22px; height: 22px;
    border: 2px solid var(--cpp-ink);
    background: var(--cpp-paper);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 1px;
    transition: background .15s, transform .15s;
    position: relative;
}
.cpp-checkbox input:checked {
    background: var(--cpp-magenta);
}
.cpp-checkbox input:checked::after {
    content: ''; position: absolute;
    left: 5px; top: 1px;
    width: 6px; height: 12px;
    border: solid var(--cpp-paper);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.cpp-checkbox input:focus { outline: 2px solid var(--cpp-magenta); outline-offset: 2px; }
.cpp-checkbox a { color: var(--cpp-magenta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.cpp-checkbox--required span::after { content: ' *'; color: var(--cpp-magenta); }

.cpp-btn--full { width: 100%; justify-content: center; margin-top: var(--cpp-s4); }

/* =================================================================
   FLASH MESSAGES
   ================================================================= */
.cpp-flash {
    padding: 14px 18px;
    border: 2px solid var(--cpp-ink);
    background: var(--cpp-yellow);
    box-shadow: 4px 4px 0 var(--cpp-ink);
    margin-bottom: var(--cpp-s5);
    font-family: var(--cpp-font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cpp-ink);
    transform: rotate(-0.5deg);
}
.cpp-flash--ok { background: var(--cpp-yellow); }
.cpp-flash--err { background: var(--cpp-magenta); color: var(--cpp-paper); }

/* =================================================================
   ACCOUNT DASHBOARD
   ================================================================= */
.cpp-account {
    max-width: var(--cpp-max);
    margin: 0 auto;
    padding: var(--cpp-s7) var(--cpp-s5) var(--cpp-s9);
}
.cpp-account__hero {
    margin-bottom: var(--cpp-s7);
    max-width: 720px;
}
.cpp-account__hero h1 {
    font-family: var(--cpp-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    line-height: 1;
    margin: 0 0 var(--cpp-s3);
}
.cpp-account__hero h1 em {
    font-family: var(--cpp-font-brush);
    font-style: normal;
    color: var(--cpp-magenta);
    font-weight: 400;
}
.cpp-account__hero p {
    font-size: 1.15rem;
    color: var(--cpp-ink-soft);
    margin: 0;
}
.cpp-backlink {
    font-family: var(--cpp-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cpp-magenta);
    font-weight: 700;
}
.cpp-backlink:hover { color: var(--cpp-ink); }

.cpp-account__sub {
    font-family: var(--cpp-font-display);
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0 0 var(--cpp-s4);
}

.cpp-account__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--cpp-s5);
    margin-bottom: var(--cpp-s8);
}
.cpp-account-card {
    display: block;
    padding: var(--cpp-s6);
    border: 3px solid var(--cpp-ink);
    box-shadow: 6px 6px 0 var(--cpp-ink);
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
    position: relative;
    overflow: hidden;
}
.cpp-account-card:hover {
    transform: translate(-4px, -4px) rotate(-0.8deg);
    box-shadow: 10px 10px 0 var(--cpp-ink);
}
.cpp-account-card--magenta { background: var(--cpp-magenta); color: var(--cpp-paper); }
.cpp-account-card--yellow { background: var(--cpp-yellow); color: var(--cpp-ink); }
.cpp-account-card--blue { background: var(--cpp-blue); color: var(--cpp-paper); }
.cpp-account-card--ink { background: var(--cpp-ink); color: var(--cpp-paper); }
.cpp-account-card--magenta:nth-child(2):hover,
.cpp-account-card--yellow:nth-child(2):hover { transform: translate(-4px, -4px) rotate(0.8deg); }
.cpp-account-card__num {
    font-family: var(--cpp-font-mono);
    font-size: 13px; font-weight: 800;
    letter-spacing: 0.1em;
    opacity: 0.6;
}
.cpp-account-card h3 {
    font-size: 1.8rem;
    margin: var(--cpp-s2) 0 var(--cpp-s3);
}
.cpp-account-card p {
    margin-bottom: var(--cpp-s4);
    opacity: 0.85;
}
.cpp-account-card__cta {
    font-family: var(--cpp-font-mono);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid currentColor;
    padding-bottom: 2px;
}

.cpp-account__quickactions {
    margin-top: var(--cpp-s7);
    padding-top: var(--cpp-s6);
    border-top: 3px solid var(--cpp-ink);
    position: relative;
}
.cpp-account__actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cpp-s3);
}

/* =================================================================
   PROFILE PAGE
   ================================================================= */
.cpp-profile-grid {
    display: grid;
    gap: var(--cpp-s6);
}
.cpp-profile-block {
    background: var(--cpp-paper);
    padding: var(--cpp-s6);
    border: 3px solid var(--cpp-ink);
    box-shadow: 6px 6px 0 var(--cpp-ink);
}

/* =================================================================
   ADMIN
   ================================================================= */
.cpp-admin {
    max-width: var(--cpp-max);
    margin: 0 auto;
    padding: var(--cpp-s6) var(--cpp-s5) var(--cpp-s9);
}
.cpp-admin__topbar {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: var(--cpp-s4);
    padding-bottom: var(--cpp-s5);
    border-bottom: 3px solid var(--cpp-ink);
    margin-bottom: var(--cpp-s7);
    position: relative;
}
.cpp-eyebrow--admin { background: var(--cpp-ink); color: var(--cpp-yellow); border-color: var(--cpp-yellow); box-shadow: 3px 3px 0 var(--cpp-magenta); }
.cpp-admin__title {
    font-family: var(--cpp-font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 900;
    line-height: 1;
    margin: 0;
}
.cpp-admin__title em {
    font-family: var(--cpp-font-brush);
    font-style: normal;
    color: var(--cpp-magenta);
    font-weight: 400;
    background: linear-gradient(180deg, transparent 60%, var(--cpp-yellow) 60%, var(--cpp-yellow) 92%, transparent 92%);
    padding: 0 6px;
    transform: rotate(-2deg);
    display: inline-block;
}
.cpp-admin__userbox {
    display: flex; align-items: center; gap: var(--cpp-s3);
    font-family: var(--cpp-font-mono);
    font-size: 12px;
    color: var(--cpp-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.cpp-admin__userbox strong { color: var(--cpp-magenta); }
.cpp-admin__userbox form { display: flex; }

.cpp-admin__statgrid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--cpp-s3);
    margin-bottom: var(--cpp-s8);
}
.cpp-stat {
    padding: var(--cpp-s5) var(--cpp-s4);
    border: 3px solid var(--cpp-ink);
    box-shadow: 5px 5px 0 var(--cpp-ink);
    transition: transform .25s;
}
.cpp-stat:hover { transform: translate(-2px, -2px); }
.cpp-stat--magenta { background: var(--cpp-magenta); color: var(--cpp-paper); }
.cpp-stat--yellow  { background: var(--cpp-yellow); color: var(--cpp-ink); }
.cpp-stat--blue    { background: var(--cpp-blue); color: var(--cpp-paper); }
.cpp-stat--ink     { background: var(--cpp-ink); color: var(--cpp-paper); }
.cpp-stat--paper   { background: var(--cpp-paper); color: var(--cpp-ink); }
.cpp-stat__num {
    display: block;
    font-family: var(--cpp-font-display);
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
}
.cpp-stat__label {
    display: block;
    font-family: var(--cpp-font-mono);
    font-size: 12px; font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 8px;
}
.cpp-stat__hint {
    display: block;
    font-family: var(--cpp-font-mono);
    font-size: 10px;
    opacity: 0.7;
    margin-top: 3px;
    letter-spacing: 0.04em;
}

.cpp-admin__h2 {
    font-family: var(--cpp-font-display);
    font-size: 1.8rem;
    font-weight: 900;
    margin: 0 0 var(--cpp-s4);
}
.cpp-admin__shortcuts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--cpp-s3);
    margin-bottom: var(--cpp-s7);
}
.cpp-admin-link {
    display: block;
    padding: var(--cpp-s5);
    background: var(--cpp-paper);
    border: 2px solid var(--cpp-ink);
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 3px 3px 0 var(--cpp-ink);
}
.cpp-admin-link:hover {
    background: var(--cpp-yellow);
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--cpp-ink);
}
.cpp-admin-link__title {
    display: block;
    font-family: var(--cpp-font-display);
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--cpp-ink);
    margin-bottom: 4px;
}
.cpp-admin-link__hint {
    display: block;
    font-family: var(--cpp-font-mono);
    font-size: 11px;
    color: var(--cpp-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cpp-admin__buildnote {
    margin-top: var(--cpp-s7);
    padding: var(--cpp-s4) var(--cpp-s5);
    background: var(--cpp-paper-2);
    border: 2px dashed var(--cpp-ink);
    font-size: 0.92rem;
    color: var(--cpp-ink-soft);
}
.cpp-admin__buildnote strong { color: var(--cpp-magenta); }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 1100px) {
    .cpp-auth__inner { grid-template-columns: 1fr; }
    .cpp-auth__art { display: none; }
    .cpp-account__grid { grid-template-columns: 1fr 1fr; }
    .cpp-admin__statgrid { grid-template-columns: repeat(3, 1fr); }
    .cpp-admin__shortcuts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
    .cpp-field-row { grid-template-columns: 1fr; }
    .cpp-account__grid { grid-template-columns: 1fr; }
    .cpp-admin__statgrid { grid-template-columns: repeat(2, 1fr); }
    .cpp-admin__shortcuts { grid-template-columns: 1fr; }
    .cpp-admin__topbar { flex-direction: column; align-items: flex-start; }
}