/* Riverbank field guide, scoped to the Collect tab container. */
#collectContent {
    --collect-ink: #344739;
    --collect-muted: #758372;
    --collect-leaf: #527c58;
    --collect-leaf-dark: #3e6249;
    --collect-paper: #fffdf4;
    --collect-cream: #f7f3e3;
    --collect-line: #e2e6d5;
    color: var(--collect-ink);
    display: grid;
    gap: 20px;
    padding: clamp(12px, 2vw, 22px);
}

#collectContent * { box-sizing: border-box; }

#collectContent .collect-welcome,
#collectContent .collect-survey-card,
#collectContent .collect-species-card,
#collectContent .collect-ability-card {
    border: 1px solid var(--collect-line);
    border-radius: 18px;
    background: var(--collect-paper);
    box-shadow: 0 5px 18px rgba(68, 84, 57, .055);
}

#collectContent .collect-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: clamp(18px, 3vw, 30px);
    background: linear-gradient(110deg, #fbf7e9, #f2f4df 68%, #e8efdc);
}

#collectContent .collect-welcome-copy { max-width: 680px; }
#collectContent .collect-eyebrow { display: block; color: #74886a; font-size: .69rem; font-weight: 800; letter-spacing: .14em; }
#collectContent h2, #collectContent h3, #collectContent h4, #collectContent p { margin-top: 0; }
#collectContent .collect-welcome h2 { margin: 5px 0 8px; color: #364d3e; font: 700 clamp(1.45rem, 3vw, 2rem)/1.15 Georgia, serif; }
#collectContent .collect-welcome p { margin-bottom: 0; max-width: 620px; color: #667466; font-size: .95rem; line-height: 1.55; }

#collectContent .collect-automation-switch {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border: 1px solid rgba(84, 119, 80, .22);
    border-radius: 14px;
    background: rgba(255, 255, 250, .78);
    cursor: pointer;
}

#collectContent .collect-automation-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
#collectContent .collect-switch-mark { position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 99px; background: #c4c9b7; transition: background .18s ease; }
#collectContent .collect-switch-mark::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #38473540; transition: transform .18s ease; }
#collectContent .collect-automation-switch input:checked + .collect-switch-mark { background: #6e956b; }
#collectContent .collect-automation-switch input:checked + .collect-switch-mark::after { transform: translateX(16px); }
#collectContent .collect-automation-switch input:focus-visible + .collect-switch-mark { outline: 3px solid #9dc19a; outline-offset: 3px; }
#collectContent .collect-automation-switch strong, #collectContent .collect-automation-switch small { display: block; }
#collectContent .collect-automation-switch strong { font-size: .85rem; }
#collectContent .collect-automation-switch small { margin-top: 3px; color: var(--collect-muted); font-size: .72rem; }

#collectContent .collect-survey-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, .46fr);
    align-items: center;
    gap: 22px;
    padding: clamp(18px, 2.7vw, 28px);
    background: linear-gradient(125deg, #f3f7ea, #fffdf4 70%);
}

#collectContent .collect-survey-copy h3,
#collectContent .collect-section-heading h3 { margin: 5px 0 7px; color: #3b5141; font: 700 1.28rem/1.2 Georgia, serif; }
#collectContent .collect-survey-copy > p { margin: 0 0 16px; color: #6b7868; font-size: .87rem; line-height: 1.45; }
#collectContent .collect-survey-track { width: 100%; height: 9px; overflow: hidden; border-radius: 99px; background: #e2e9d9; }
#collectContent .collect-survey-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a4bd76, #5f916c); transition: width .2s linear; }
#collectContent .collect-survey-action { display: grid; justify-items: stretch; gap: 9px; }
#collectContent .collect-note-total { display: flex; align-items: baseline; gap: 8px; justify-content: center; color: #6e7b68; }
#collectContent .collect-note-total strong { color: #3c6648; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
#collectContent .collect-note-total > span:last-child { font-size: .82rem; }
#collectContent .collect-note-symbol { color: #c79655; font-size: 1.25rem; }
#collectContent .collect-primary-button,
#collectContent .collect-buy-button { min-height: 40px; padding: 9px 13px; border: 1px solid #4f7756; border-radius: 11px; background: #5d845f; color: #fffdf4; font: inherit; font-size: .83rem; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .15s, transform .15s, opacity .15s; }
#collectContent .collect-primary-button:hover:not(:disabled),
#collectContent .collect-buy-button:hover:not(:disabled) { transform: translateY(-1px); background: #466f50; }
#collectContent button:focus-visible { outline: 3px solid #9dc19a; outline-offset: 2px; }
#collectContent button:disabled { cursor: default; opacity: .56; }
#collectContent .collect-survey-action > small { color: var(--collect-muted); font-size: .7rem; line-height: 1.35; text-align: center; }

#collectContent .collect-section { min-width: 0; }
#collectContent .collect-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 2px 13px; }
#collectContent .collect-section-heading h3 { margin-bottom: 0; }
#collectContent .collect-count-pill { padding: 7px 11px; border: 1px solid #dce4d3; border-radius: 99px; background: #f3f6ed; color: #597254; font-size: .74rem; white-space: nowrap; }
#collectContent .collect-count-pill span { font-variant-numeric: tabular-nums; }

#collectContent .collect-reward-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 13px; }
#collectContent .collect-reward-summary span { padding: 6px 9px; border: 1px solid #e4e8d9; border-radius: 99px; background: #f8f7eb; color: #687565; font-size: .69rem; }
#collectContent .collect-reward-summary b { color: #4a684f; }

#collectContent .collect-species-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#collectContent .collect-species-card { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 172px; padding: 13px; overflow: hidden; }
#collectContent .collect-species-card::before { content: ""; position: absolute; top: -44px; left: -33px; width: 120px; height: 95px; border-radius: 50%; background: #f2f3e4; opacity: .75; pointer-events: none; }
#collectContent .collect-portrait-wrap { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 72px; border: 1px solid #e3e8d8; border-radius: 17px; background: linear-gradient(145deg, #f7f4e4, #e9f0df); }
#collectContent .collect-portrait { display: block; width: 72px; height: 62px; overflow: visible; }
#collectContent .collect-portrait image { filter: drop-shadow(0 2px 2px rgba(60,74,54,.12)); }
#collectContent .collect-found-mark { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 19px; height: 19px; border: 2px solid white; border-radius: 50%; background: #6e956b; color: white; font-size: .69rem; font-weight: 800; opacity: 0; transform: scale(.75); transition: .2s ease; }
#collectContent .collect-species-copy { position: relative; z-index: 1; min-width: 0; align-self: center; }
#collectContent .collect-species-kind { color: #91a083; font-size: .57rem; font-weight: 800; letter-spacing: .1em; }
#collectContent .collect-species-copy h4, #collectContent .collect-ability-card h4 { margin: 3px 0 4px; color: #415644; font: 700 1rem/1.2 Georgia, serif; }
#collectContent .collect-species-effect, #collectContent .collect-ability-effect { margin: 0; color: #687667; font-size: .72rem; line-height: 1.38; }
#collectContent .collect-card-requirement { grid-column: 1 / -1; min-height: 2.1em; margin: 9px 0 0; color: #8b7451; font-size: .68rem; line-height: 1.4; }
#collectContent .collect-species-card .collect-buy-button { grid-column: 1 / -1; width: 100%; min-height: 34px; margin-top: 7px; padding: 7px 10px; font-size: .74rem; }
#collectContent .collect-species-card.is-found { border-color: #c5d7bb; background: linear-gradient(145deg, #f7fbf1, #fffdf4); }
#collectContent .collect-species-card.is-found .collect-found-mark { opacity: 1; transform: scale(1); }
#collectContent .collect-species-card.is-found .collect-portrait-wrap { border-color: #c9d8bd; background: linear-gradient(145deg, #f3f8ea, #e4efdd); }
#collectContent .collect-species-card.is-habitat-locked .collect-portrait { opacity: .63; }

#collectContent .collect-ability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#collectContent .collect-ability-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 10px; padding: 13px; }
#collectContent .collect-ability-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: #edf2e3; color: #66825c; font: 700 1.35rem/1 Georgia, serif; }
#collectContent .collect-ability-card .collect-card-requirement { margin: 7px 0 0; padding: 0; list-style: none; }
#collectContent .collect-ability-card .collect-card-requirement li + li { margin-top: 2px; }
#collectContent .collect-ability-card .collect-buy-button { grid-column: 1 / -1; width: 100%; min-height: 34px; padding: 7px 10px; font-size: .74rem; }
#collectContent .collect-ability-card.is-learned { border-color: #c5d7bb; background: #f5f9ee; }
#collectContent .collect-automation-footnote { margin: 9px 2px 0; color: #7b8676; font-size: .72rem; line-height: 1.5; }

@media (max-width: 850px) {
    #collectContent .collect-species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    #collectContent { gap: 15px; padding: 10px; }
    #collectContent .collect-welcome { align-items: stretch; flex-direction: column; gap: 15px; padding: 17px; }
    #collectContent .collect-automation-switch { align-self: flex-start; }
    #collectContent .collect-survey-card { grid-template-columns: 1fr; gap: 17px; padding: 17px; }
    #collectContent .collect-survey-action { grid-template-columns: 1fr 1.3fr; align-items: center; }
    #collectContent .collect-note-total { justify-content: flex-start; }
    #collectContent .collect-survey-action > small { grid-column: 1 / -1; text-align: left; }
    #collectContent .collect-section-heading { align-items: start; flex-direction: column; gap: 9px; }
    #collectContent .collect-count-pill { align-self: flex-start; }
    #collectContent .collect-reward-summary { gap: 5px; }
    #collectContent .collect-reward-summary span { font-size: .65rem; }
    #collectContent .collect-species-grid { grid-template-columns: 1fr; }
    #collectContent .collect-species-card { grid-template-columns: 70px minmax(0, 1fr); min-height: 0; }
    #collectContent .collect-portrait-wrap { width: 68px; height: 65px; }
    #collectContent .collect-portrait { width: 65px; height: 58px; }
    #collectContent .collect-ability-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    #collectContent *, #collectContent *::before, #collectContent *::after { scroll-behavior: auto !important; transition: none !important; }
}