/* Donation controls in the site's bone, charcoal, and brass palette. */
.donation-shell {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
}

.donation-header {
    margin-bottom: var(--space-4);
}

.donation-header .page-title {
    max-width: 16ch;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 500;
    line-height: 1.08;
}

.donation-visibility { margin-top: var(--space-4); max-width: 42rem; }
.donation-sandbox-notice { margin: 0 0 var(--space-3); padding: var(--space-2); border: 1px solid var(--primary-color); color: var(--primary-color); font-family: var(--font-code); font-size: 0.8rem; line-height: 1.6; }

.donation-policy {
    max-width: 42rem;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.65;
}

.donation-policy h2 {
    margin: 0 0 var(--space-2);
    color: var(--text-color);
    font-family: var(--font-code);
    font-size: 0.8rem;
    font-weight: 400;
}

.donation-policy p { margin: 0 0 var(--space-2); }
.donation-policy p:last-child { margin-bottom: 0; }
.donation-policy a { color: var(--text-color); text-underline-offset: 3px; overflow-wrap: anywhere; }

.donation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.donation-copy > p:first-child {
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--quote-text);
}

.donation-copy { padding-top: var(--space-1); }

.donation-panel {
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    background: var(--surface-1);
    min-width: 0;
}

.donation-panel h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.15;
    text-wrap: balance;
}

.donation-method-panel > p,
.crypto-network-note {
    margin: 0 0 var(--space-3);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.donation-action {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0.8rem 1rem;
    background: var(--primary-color);
    color: var(--bg-color);
    border: 1px solid var(--primary-color);
    font-family: var(--font-code);
    font-size: 0.85rem;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
}

.donation-action:hover { background: var(--accent-color); }

.donation-action > :last-child { flex-shrink: 0; }

.donation-panel .donation-detail {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

@media (min-width: 880px) {
    .donation-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
        gap: var(--space-5);
    }

    .donation-panel {
        position: sticky;
        top: 5.5rem;
    }
}

.donation-panel-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: var(--space-3);
}

.donation-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 var(--space-3);
    border: 1px solid var(--border-strong);
}

.donation-methods button,
.crypto-assets button {
    min-height: 44px;
    padding: 0.7rem 0.6rem;
    border: 0;
    color: var(--text-muted);
    background: transparent;
    font-family: var(--font-code);
    font-size: 0.78rem;
    cursor: pointer;
}

.donation-methods button { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.donation-methods svg { fill: none; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.donation-methods button + button { border-left: 1px solid var(--border-strong); }

.donation-methods [aria-pressed="true"],
.crypto-assets [aria-pressed="true"] {
    color: var(--primary-color);
    background: var(--surface-2);
    box-shadow: inset 0 -2px var(--primary-color);
}

.donation-methods button:hover,
.crypto-assets button:hover { color: var(--text-color); }

.donation-method-panel { padding: var(--space-3); border-top: 1px solid var(--border-color); }
.donation-panel.is-enhanced .donation-method-panel { border-top: 0; }

.donation-method-panel h3 {
    margin: 0 0 0.75rem;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    line-height: 1.4;
    font-weight: 500;
}

.donation-action-secondary {
    background: var(--surface-2);
    color: var(--text-color);
    border-color: var(--border-strong);
    margin-top: 0.7rem;
}

.donation-action-secondary:hover {
    color: var(--primary-color);
    background: var(--surface-2);
    border-color: var(--primary-color);
}

.donation-action:disabled {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border-color);
    cursor: not-allowed;
}

.donation-detail a { color: var(--text-color); text-underline-offset: 3px; }

.donation-field-label {
    display: block;
    padding: 0;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-family: var(--font-code);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
}

.crypto-controls select,
.crypto-address {
    width: 100%;
    min-height: 46px;
    padding: 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    color: var(--text-color);
    background: var(--bg-soft);
    font-family: var(--font-code);
    font-size: 0.85rem;
    color-scheme: dark;
}

.crypto-controls select:focus-visible,
.crypto-address:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 3px; }

.crypto-assets { min-width: 0; border: 0; padding: 0; margin: var(--space-2) 0 0; }
.crypto-asset-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crypto-assets button { min-width: 4rem; border: 1px solid var(--border-strong); }
.crypto-wallet { margin-top: var(--space-3); }
.crypto-wallet + .crypto-wallet { padding-top: var(--space-3); border-top: 1px solid var(--border-color); }
.is-enhanced .crypto-wallet { padding-top: 0; border-top: 0; }

.crypto-wallet h4 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-code);
    font-size: 0.85rem;
    font-weight: 500;
}

.crypto-wallet h4 span { color: var(--text-muted); font-weight: 400; }
.crypto-qr { width: min(100%, 12rem); margin: 0 auto var(--space-2); background: #fff; line-height: 0; }
.crypto-qr svg { display: block; width: 100%; height: auto; }
.crypto-network-note { margin-bottom: var(--space-2); font-size: 0.78rem; }
.crypto-network-note strong { color: var(--text-color); font-weight: 500; }
.crypto-address { font-size: 0.75rem; }

.crypto-copy-status {
    display: block;
    min-height: 1.5em;
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.donation-page [hidden] { display: none !important; }

.donation-frequency {
    display: flex;
    gap: var(--space-3);
    margin: 0 var(--space-3) var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.donation-frequency button {
    min-height: 44px;
    padding: 0.5rem 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-code);
    font-size: 0.8rem;
    cursor: pointer;
}

.donation-frequency [aria-pressed="true"] { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.donation-frequency button:hover { color: var(--text-color); }
.donation-period-heading { margin: 0; padding: 0 var(--space-3) var(--space-2); font-family: var(--font-code); font-size: 0.85rem; font-weight: 400; }
.is-enhanced .donation-period-heading { display: none; }
.donation-monthly { padding: var(--space-3); border-top: 1px solid var(--border-color); }
.donation-monthly .donation-period-heading { padding: 0 0 var(--space-2); }
.is-enhanced .donation-monthly { padding-top: 0; border-top: 0; }
.donation-period-info { margin: 0 0 var(--space-2); font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); }
.donation-monthly-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.65rem; }

.donation-monthly-plan {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 80px;
    padding: 0.85rem;
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-color);
    font-family: var(--font-code);
    font-size: 1.1rem;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.donation-monthly-plan:hover { border-color: var(--primary-color); color: var(--primary-color); }
.monthly-currency { font-size: 0.75rem; }
.monthly-interval { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--text-muted); }
.donation-monthly-custom { margin-top: var(--space-2); }
.donation-sponsors { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border-color); }
.donation-management { padding: 0 var(--space-3); border-top: 1px solid var(--border-color); }
.donation-management a { display: inline-flex; align-items: center; min-height: 48px; color: var(--text-muted); font-family: var(--font-code); font-size: 0.7rem; text-underline-offset: 3px; }
.donation-management a:hover { color: var(--text-color); }

@media (max-width: 600px) {
    .donation-shell { padding-top: var(--space-4); }
    .donation-panel-heading, .donation-method-panel { padding: var(--space-2); }
    .donation-methods { margin: 0 var(--space-2); }
    .donation-methods button { font-size: 0.72rem; }
    .donation-frequency { margin-right: var(--space-2); margin-left: var(--space-2); }
    .donation-monthly { padding: var(--space-2); }
    .donation-management { padding: 0 var(--space-2); }
}