/* ==========================================================================
   Radian Affiliate

   Two blocks, one file (they never load together):
     .radian-aff  — the My Account -> Affiliate dashboard
     .radian-afp  — the public /affiliate marketing page

   Colours come from main.css tokens, so dark mode is inherited rather than
   restated. The only explicit dark-mode rules below are where a token has no
   dark value: --color-warning (light-mode only in main.css) and the amber used
   for the prohibited-claims panel, which must stay legible on the dark surface
   and must NOT blend into the page — the same reasoning as the payment-box
   warning strip in payment-box.css.
   ========================================================================== */

.radian-aff,
.radian-afp {
    --aff-warn-bg:     #FFFBEB;
    --aff-warn-border: #FCD34D;
    --aff-warn-text:   #78350F;
}

body.dark-mode .radian-aff,
body.dark-mode .radian-afp {
    --aff-warn-bg:     #2A2113;
    --aff-warn-border: #7C5E1E;
    --aff-warn-text:   #F5D98B;
}

/* ==========================================================================
   My Account -> Affiliate
   ========================================================================== */

.radian-aff { font-size: 0.95rem; }

.radian-aff section { margin-bottom: 2.5rem; }

.radian-aff h3 {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.radian-aff-hint {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0.6rem 0 0;
    line-height: 1.55;
}

/* --- Copyable link + code ------------------------------------------------- */

.radian-aff-copy {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 1.25rem;
}

.radian-aff-copy__field {
    flex: 1 1 auto;
    min-width: 0;                     /* so a long URL shrinks instead of pushing the row wide */
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg-alt);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
}

.radian-aff-copy__field--code {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.radian-aff-copy__button {
    flex: 0 0 auto;
    padding: 0 1.1rem;
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.radian-aff-copy__button:hover { background: var(--color-primary-hover); }

.radian-aff-copy__button.is-copied {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/* --- One-time code rename ------------------------------------------------- */

.radian-aff-rename {
    margin-top: 0.5rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
}

.radian-aff-rename summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.radian-aff-rename__row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.radian-aff-rename__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.radian-aff-rename__msg {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    min-height: 1.2em;                /* reserve the line so the panel doesn't jump */
}

.radian-aff-rename__msg.is-error   { color: var(--color-error); }
.radian-aff-rename__msg.is-success { color: var(--color-success); }

/* --- Payout details ------------------------------------------------------- */

.radian-aff-payout__current {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.9rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
}

.radian-aff-payout__current-label {
    flex: 0 0 100%;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.radian-aff-payout__current-method { font-weight: 700; }

/* Monospace, and allowed to break anywhere: a wallet address is up to 120
   characters of meaningful detail that has to stay readable character by
   character on a phone, and one that overflows its card cannot be checked. */
.radian-aff-payout__current-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    word-break: break-all;
    min-width: 0;
}

.radian-aff-payout__current-network {
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    background: var(--color-border);
    font-size: 0.75rem;
    font-weight: 600;
}

.radian-aff-payout__current-date {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.radian-aff-payout__warn {
    margin: 0.85rem 0 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--aff-warn-border);
    border-radius: 8px;
    background: var(--aff-warn-bg);
    color: var(--aff-warn-text);
    font-size: 0.88rem;
    line-height: 1.6;
}

.radian-aff-payout__warn a { color: inherit; font-weight: 600; }

.radian-aff-payout__errors {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem 0.75rem 2rem;
    border: 1px solid var(--color-error);
    border-radius: 8px;
    color: var(--color-error);
    font-size: 0.88rem;
}

.radian-aff-payout__saved {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--color-success);
}

.radian-aff-payout__panel {
    margin-top: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
}

.radian-aff-payout__panel summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
}

.radian-aff-payout__methods {
    margin: 0.9rem 0 0;
    padding: 0;
    border: 0;
}

.radian-aff-payout__methods legend {
    padding: 0;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.radian-aff-payout__method {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg);
}

.radian-aff-payout__choice {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    cursor: pointer;
}

.radian-aff-payout__choice input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}

.radian-aff-payout__fields { margin-top: 0.75rem; }

/* Collapsing the unselected blocks is progressive enhancement only. The class
   is added by affiliate.js, so with the script absent every method stays open
   and the form still submits the right field — which is the whole reason each
   method carries its own input rather than sharing one that JS relabels. */
.radian-aff-payout__form.is-enhanced .radian-aff-payout__fields { display: none; }

.radian-aff-payout__form.is-enhanced .radian-aff-payout__method.is-selected {
    border-color: var(--color-primary);
}

.radian-aff-payout__form.is-enhanced .radian-aff-payout__method.is-selected .radian-aff-payout__fields {
    display: block;
}

.radian-aff-payout__label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.radian-aff-payout__input {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
}

.radian-aff-payout__input--network { margin-top: 0.3rem; }

.radian-aff-payout__fields .radian-aff-hint { margin: 0.4rem 0 0.9rem; }

.radian-aff-payout__fields .radian-aff-hint:last-child { margin-bottom: 0; }

.radian-aff-payout__actions { margin: 1rem 0 0; }

/* --- Stat grids ----------------------------------------------------------- */

.radian-aff-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

.radian-aff-grid li {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
}

.radian-aff-grid__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.radian-aff-grid__value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.radian-aff-grid--money .radian-aff-grid__value { font-size: 1.35rem; }

/* --- Commission table ----------------------------------------------------- */

.radian-aff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.radian-aff-table th,
.radian-aff-table td {
    padding: 0.7rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.radian-aff-table th {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    font-weight: 600;
}

.radian-aff-table td.is-negative { color: var(--color-error); }

.radian-aff-badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--color-bg-card);
    color: var(--color-text-muted);
}

.radian-aff-badge--approved { background: rgba(22, 163, 74, 0.12); color: var(--color-success); }
.radian-aff-badge--paid     { background: rgba(22, 163, 74, 0.2);  color: var(--color-success); }
.radian-aff-badge--reversed { background: rgba(220, 38, 38, 0.12); color: var(--color-error); }

.radian-aff-empty-note {
    padding: 1.5rem;
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    text-align: center;
    color: var(--color-text-muted);
}

/* --- Application status --------------------------------------------------- */

.radian-aff-status {
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
}

.radian-aff-status--pending {
    background: var(--aff-warn-bg);
    border-color: var(--aff-warn-border);
    color: var(--aff-warn-text);
}

.radian-aff-status__label {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

.radian-aff-status__note {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    font-style: italic;
}

/* Stack the table into cards on narrow screens — five columns of money never
   fits a phone, and a horizontally scrolling table hides the figure that
   matters most. */
@media (max-width: 600px) {
    .radian-aff-table thead { display: none; }

    .radian-aff-table tr {
        display: block;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--color-border);
    }

    .radian-aff-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border: 0;
        padding: 0.3rem 0;
    }

    .radian-aff-table td::before {
        content: attr(data-label);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--color-text-muted);
    }
}

/* ==========================================================================
   Public /affiliate page
   ========================================================================== */

.radian-afp__section { padding: 4rem 0; }

.radian-afp__section--alt { background: var(--color-bg-alt); }

.radian-container--narrow { max-width: 720px; }

.radian-afp__label {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 0.6rem;
}

.radian-afp__h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.25;
    margin: 0 0 1.5rem;
    color: var(--color-primary);
}

/* --- Rates ---------------------------------------------------------------- */

.radian-afp__rates {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.radian-afp__rates li {
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg);
}

.radian-afp__rate {
    display: block;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
}

.radian-afp__rate-label {
    display: block;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.radian-afp__rates p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text);
}

.radian-afp__fine {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Steps ---------------------------------------------------------------- */

.radian-afp__steps {
    list-style: none;
    counter-reset: step;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.radian-afp__steps li { counter-increment: step; }

.radian-afp__steps li::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    margin-bottom: 0.5rem;
}

.radian-afp__steps h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    color: var(--color-primary);
}

.radian-afp__steps p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--color-text);
}

/* --- Prohibited claims ---------------------------------------------------- */

.radian-afp__prohibited {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    line-height: 1.8;
}

.radian-afp__warn {
    padding: 1rem 1.25rem;
    border: 1px solid var(--aff-warn-border);
    border-radius: 8px;
    background: var(--aff-warn-bg);
    color: var(--aff-warn-text);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0;
}

/* --- Form ----------------------------------------------------------------- */

.radian-afp__errors {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-error);
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.06);
    color: var(--color-error);
}

.radian-afp__errors ul { margin: 0; padding-left: 1.1rem; }

.radian-afp__field { margin: 0 0 1.1rem; }

.radian-afp__field label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary);
}

.radian-afp__field label span { color: var(--color-error); }

.radian-afp__field input,
.radian-afp__field textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 0.95rem;
}

.radian-afp__hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.radian-afp__note {
    padding: 0.8rem 1rem;
    border-radius: 6px;
    background: var(--color-bg-card);
    font-size: 0.9rem;
    margin: 0 0 1.1rem;
}

.radian-afp__socials {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 0.15rem;
    margin: 0 0 1.5rem;
}

.radian-afp__socials legend {
    padding: 0 0.5rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   anything explicitly hidden. */
.radian-afp__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.radian-afp__attest {
    margin: 0 0 1.75rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-alt);
}

.radian-afp__check {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    cursor: pointer;
}

.radian-afp__check:last-child { margin-bottom: 0; }

.radian-afp__check input {
    flex: 0 0 auto;
    margin-top: 0.25rem;
    width: 1rem;
    height: 1rem;
}

.radian-afp__button {
    display: inline-block;
    padding: 0.85rem 1.9rem;
    border: 0;
    border-radius: 6px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.radian-afp__button:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-contrast);
}

.radian-afp__done {
    padding: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-bg);
    text-align: center;
}

.radian-afp__done p { line-height: 1.7; }