/* =====================================================================
   Outreach Challenge page (/challenge) + shared difficulty-pill styles.

   The pill styles live here (not in marketing.css) because they're
   referenced from BOTH the /challenge page AND the inline "this week's
   challenge" box on the home newsletter section. The newsletter inline
   box enqueues marketing.css universally, so we ship the pill rules
   here too with the same class names and let them apply by source
   order — challenge.css doesn't load on the home page, so we duplicate
   minimal pill CSS into marketing.css for that case. (See bottom of
   marketing.css for the duplicated copy.)

   Visual language matches the rest of the marketing site: same tinted
   section background, same .qrt-mkt-signup-card chrome wraps the form.
   ===================================================================== */

.qrt-chal-page {
    /* Match the newsletter section's vertical rhythm — same eyebrow
       + section-head pattern lives above. */
    padding-top: 56px;
    padding-bottom: 80px;
}

/* ─── Challenge card (extends .qrt-mkt-signup-card) ──────────────── */
.qrt-chal-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
}
.qrt-chal-card.qrt-chal-empty {
    text-align: center;
}
.qrt-chal-card.qrt-chal-empty p {
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--qrt-text-secondary);
}

/* ─── Prompt block — difficulty pill + challenge text ──────────────
   Standalone bordered card that sits between the section-head and the
   form card. Centered + capped at the same max-width as .qrt-chal-card
   so the two stacked cards align edge-to-edge. */
.qrt-chal-prompt {
    max-width: 640px;
    margin: 28px auto 16px;
    padding: 22px 24px;
    border-radius: 14px;
    border: 1px solid var(--qrt-card-border);
    background: #fff;
}
.qrt-chal-prompt-meta {
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 10px;
}
.qrt-chal-prompt-text {
    margin: 0;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--qrt-text-primary);
}

/* ─── Mode toggle — Log vs View history ───────────────────────────
   Segmented pill toggle above the form. Active tab gets the white
   background + soft shadow (matches the analytics range-pill pattern). */
.qrt-chal-mode-toggle {
    display: flex;
    padding: 4px;
    gap: 4px;
    margin: 0 0 18px;
    background: rgba(15, 23, 42, 0.04);
    border-radius: 12px;
}
.qrt-chal-mode-btn {
    flex: 1;
    appearance: none; border: 0; cursor: pointer;
    background: transparent;
    color: var(--qrt-text-secondary);
    font: inherit;
    font-family: inherit;
    font-size: 13.5px; font-weight: 600;
    padding: 9px 12px;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
    line-height: 1.3;
}
.qrt-chal-mode-btn:hover { color: var(--qrt-text-primary); }
.qrt-chal-mode-btn.is-active {
    background: #fff;
    color: var(--qrt-text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ─── Submit form ────────────────────────────────────────────────── */
.qrt-chal-form {
    display: flex; flex-direction: column;
    gap: 14px;
}
.qrt-chal-field {
    display: flex; flex-direction: column;
    gap: 5px;
}
.qrt-chal-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--qrt-text-secondary);
    letter-spacing: 0.02em;
}
.qrt-chal-input {
    width: 100%;
    padding: 12px 14px !important;
    border: 1px solid var(--qrt-card-border) !important;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    background: #fff;
    color: var(--qrt-text-primary) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qrt-chal-input:focus {
    outline: 0;
    border-color: var(--qrt-accent) !important;
    box-shadow: 0 0 0 3px var(--qrt-accent-soft);
}
.qrt-chal-submit {
    align-self: stretch;
}
.qrt-chal-submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
/* Honeypot — same idiom as the newsletter form. */
.qrt-chal-hp {
    position: absolute !important;
    left: -9999px; top: -9999px;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.qrt-chal-status {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    text-align: center;
}
.qrt-chal-status:empty { display: none; }
.qrt-chal-status.is-success { color: #15803d; font-weight: 600; }
.qrt-chal-status.is-error   { color: #b91c1c; font-weight: 600; }
.qrt-chal-fineprint {
    margin: 0;
    font-size: 12px;
    text-align: center;
    color: var(--qrt-text-secondary);
}

/* ─── History block — revealed after submit ──────────────────────── */
.qrt-chal-history {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--qrt-card-border);
}
.qrt-chal-history-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin-bottom: 14px;
}
.qrt-chal-history-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--qrt-text-primary);
}
.qrt-chal-history-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--qrt-text-secondary);
    background: var(--qrt-accent-soft);
    padding: 4px 10px;
    border-radius: 999px;
}
.qrt-chal-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 10px;
}
.qrt-chal-history-item {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--qrt-card-border);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qrt-chal-history-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.qrt-chal-history-week {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--qrt-accent);
    background: var(--qrt-accent-soft);
    padding: 6px 8px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.2;
}
.qrt-chal-history-week strong { display: block; font-size: 16px; }
.qrt-chal-history-body {
    min-width: 0;
}
.qrt-chal-history-text {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--qrt-text-primary);
    line-height: 1.35;
}
.qrt-chal-history-meta {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--qrt-text-secondary);
}
.qrt-chal-history-pill {
    flex-shrink: 0;
}
.qrt-chal-share {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--qrt-text-secondary);
}

/* ─── Difficulty pills — shared by /challenge AND home newsletter ─ */
/* Same class names used everywhere the pill renders so the look stays
   consistent. The selectors are bare-class (no parent prefix) so they
   work whether or not challenge.css is enqueued — the home page's
   inline box reuses these via marketing.css duplicates (see bottom of
   marketing.css). */
.qrt-chal-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
}
.qrt-chal-pill--easy {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.qrt-chal-pill--medium {
    background: #fef9c3;
    color: #a16207;
    border: 1px solid #fde68a;
}
.qrt-chal-pill--hard {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .qrt-chal-card {
        padding: 22px;
    }
    .qrt-chal-prompt {
        padding: 18px 18px;
    }
    .qrt-chal-prompt-text {
        font-size: 18px;
    }
    .qrt-chal-history-item {
        grid-template-columns: 56px 1fr;
        grid-template-rows: auto auto;
    }
    .qrt-chal-history-pill {
        grid-column: 1 / -1;
        justify-self: start;
    }
}