/* Phase 1 — community ID corrections.
   Anchored in the app's forest/sand palette so the surface reads
   as native to the sighting modal, not bolted on. */

/* ============================================
   SECTION HEADING — matches DATE & TIME / LOCATION label pattern
   ============================================ */
.sighting-view-cc-heading {
    margin: 24px 0 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted, #666);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Inline badge sits next to the heading — drop the uppercase/letter-spacing
   the heading inherits so the pill text reads naturally. */
.sighting-view-cc-heading .kagn-cc-state-badge {
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================
   AGREE BUTTON — mirrors .sighting-view-btn.tertiary (Share button)
   ============================================ */
.kagn-cc-agree-btn {
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid var(--forest-200, #c5e0d0);
    background: transparent;
    color: var(--forest-600, #2d5a3d);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 12px;
}

.kagn-cc-agree-btn:hover {
    background: var(--forest-50, #f4faf6);
    border-color: var(--forest-300, #9fd1b3);
}

.kagn-cc-agree-btn:active {
    transform: scale(0.97);
}

.kagn-cc-agree-btn[aria-pressed="true"] {
    background: var(--forest-600, #2d5a3d);
    color: #fff;
    border-color: var(--forest-600, #2d5a3d);
}

.kagn-cc-agree-btn[aria-pressed="true"]:hover {
    background: var(--forest-500, #3d7a52);
    border-color: var(--forest-500, #3d7a52);
}

/* ============================================
   COMMENT THREAD
   ============================================ */
.kagn-cc-thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
}

.kagn-cc-comment {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--sand-100, #faf8f4);
    border: 1px solid var(--sand-border, #e6d8bf);
}

.kagn-cc-comment-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-muted, #666);
    margin-bottom: 6px;
}

.kagn-cc-comment-author {
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
}

.kagn-cc-comment-body {
    white-space: pre-wrap;
    line-height: 1.45;
    color: var(--text-primary, #1a1a1a);
    font-size: 0.95rem;
}

/* Row that holds the suggestion pill + (optional) accepted/rejected pill
   side-by-side on the same line. */
.kagn-cc-suggestion-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.kagn-cc-suggestion-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--forest-100, #e8f5ed);
    color: var(--forest-700, #234d38);
    font-size: 0.8rem;
    font-weight: 600;
}
a.kagn-cc-suggestion-pill {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
a.kagn-cc-suggestion-pill:hover,
a.kagn-cc-suggestion-pill:focus-visible {
    background: var(--forest-200, #c5e0d0);
    box-shadow: 0 0 0 2px var(--forest-200, #c5e0d0) inset;
    outline: none;
}

/* Owner's decision pill — sits next to the suggestion. ACCEPTED = forest
   green to match the verified badge; REJECTED = red so the negative
   verdict is unambiguous at a glance. Uppercase for verdict tone. */
.kagn-cc-decision-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
}
.kagn-cc-decision-pill.accepted {
    background: var(--forest-100, #e8f5ed);
    color: var(--forest-700, #234d38);
    border-color: var(--forest-200, #c5e0d0);
}
.kagn-cc-decision-pill.rejected {
    background: #fdecec;
    color: #9b2222;
    border-color: #f1c4c4;
}
/* Superseded sits next to Accepted when the owner has since manually
   edited the sighting to a different species. Muted/neutral so it reads
   as historical context, not a positive or negative verdict. */
.kagn-cc-decision-pill.superseded {
    background: #f3efe6;
    color: #6b5e3e;
    border-color: #d9cdb1;
}

/* ============================================
   VOTES — small tertiary chips
   ============================================ */
.kagn-cc-votes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.kagn-cc-vote-btn {
    padding: 5px 12px;
    border: 1px solid var(--forest-200, #c5e0d0);
    background: transparent;
    color: var(--forest-600, #2d5a3d);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.kagn-cc-vote-btn:hover {
    background: var(--forest-50, #f4faf6);
    border-color: var(--forest-300, #9fd1b3);
}

/* Active (pressed) state — colour matches the vote's semantic intent so
   "Disagree" and "Not enough detail" don't end up green. Re-clicking the
   active vote retracts it (handled server-side); the title attr nudges
   that affordance. */
.kagn-cc-vote-btn[aria-pressed="true"] {
    background: var(--forest-600, #2d5a3d);
    color: #fff;
    border-color: var(--forest-600, #2d5a3d);
}
.kagn-cc-vote-btn[data-vote="disagree"][aria-pressed="true"] {
    background: #b53e3e;
    border-color: #b53e3e;
}
.kagn-cc-vote-btn[data-vote="not_enough_detail"][aria-pressed="true"] {
    background: #b97d1c;
    border-color: #b97d1c;
}

.kagn-cc-vote-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    margin-left: 4px;
}

/* ============================================
   ACCEPT BUTTON — owner action, primary weight
   ============================================ */
.kagn-cc-accept-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    background: var(--forest-600, #2d5a3d);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    margin-top: 10px;
}

.kagn-cc-accept-btn:hover {
    background: var(--forest-500, #3d7a52);
}

/* Voter attribution under a suggestion's vote buttons. Each non-empty
   vote bucket gets one line: "Agreed by: Caty N., Sarah W." */
.kagn-cc-voters-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 6px;
}
.kagn-cc-voters {
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-secondary, #555);
}
.kagn-cc-voters-label {
    font-weight: 600;
    color: var(--text-muted, #666);
}
.kagn-cc-voters-names {
    color: var(--text-primary, #1a1a1a);
}

/* Owner actions row: Accept (primary) sits next to Reject (secondary). */
.kagn-cc-owner-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.kagn-cc-owner-actions .kagn-cc-accept-btn {
    margin-top: 0; /* row controls spacing now */
}

/* Reject — secondary destructive. Outline-style so Accept stays the
   default visual choice for the owner, but with red on hover so the
   rejection intent is unambiguous on click. */
.kagn-cc-reject-btn {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--sand-border, #e6d8bf);
    background: transparent;
    color: var(--text-secondary, #555);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.kagn-cc-reject-btn:hover {
    background: #fdf2f2;
    border-color: #d3a3a3;
    color: #b53e3e;
}

/* Author's withdraw/delete button — quiet outline so it doesn't compete
   with Accept (the owner's primary action when a suggestion is present). */
.kagn-cc-withdraw-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--sand-border, #e6d8bf);
    background: transparent;
    color: var(--text-secondary, #555);
    font-size: 0.85rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    margin-top: 10px;
    margin-left: 8px;
}

.kagn-cc-withdraw-btn:hover {
    background: var(--sand-100, #faf8f4);
    color: #b53e3e;
    border-color: #d3a3a3;
}

/* ============================================
   COMPOSER — sand surface to mirror the modal's secondary buttons
   ============================================ */
.kagn-cc-composer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 12px;
    background: var(--sand-200, #f5f0e8);
    border: 1px solid var(--sand-border, #e6d8bf);
}

/* Numbered step labels guiding the user through species → field marks. */
.kagn-cc-composer-label {
    margin: 4px 0 2px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.kagn-cc-composer-label:first-child { margin-top: 0; }

.kagn-cc-composer textarea {
    width: 100%;
    min-height: 84px;
    padding: 10px 12px;
    border: 1px solid var(--sand-border, #e6d8bf);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text-primary, #1a1a1a);
    resize: vertical;
    box-sizing: border-box;
}

/* Disabled state for step 2 before species is picked — visually muted so
   the user's eye is drawn to the species picker first. */
.kagn-cc-composer textarea:disabled {
    background: var(--sand-100, #faf8f4);
    color: var(--text-muted, #999);
    cursor: not-allowed;
}

.kagn-cc-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.kagn-cc-composer textarea:focus,
.kagn-cc-composer input[type="text"]:focus {
    outline: none;
    border-color: var(--forest-300, #9fd1b3);
    box-shadow: 0 0 0 3px var(--forest-100, #e8f5ed);
}

.kagn-cc-composer input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--sand-border, #e6d8bf);
    border-radius: 10px;
    background: #fff;
    font: inherit;
    font-size: 0.9rem;
    color: var(--text-primary, #1a1a1a);
    box-sizing: border-box;
}

/* ============================================
   SPECIES TYPEAHEAD DROPDOWN
   ============================================ */
.kagn-cc-species-field {
    position: relative;
}

.kagn-cc-typeahead {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10;
    max-height: min(60vh, 540px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--sand-border, #e6d8bf);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(13, 40, 24, 0.12);
}

.kagn-cc-typeahead.open {
    display: block;
}

.kagn-cc-typeahead-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--sand-100, #faf8f4);
    transition: background 0.1s;
}

.kagn-cc-typeahead-row:last-child {
    border-bottom: none;
}

.kagn-cc-typeahead-row.active,
.kagn-cc-typeahead-row:hover {
    background: var(--forest-50, #f4faf6);
}

.kagn-cc-typeahead-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--sand-100, #faf8f4);
}

.kagn-cc-typeahead-text {
    min-width: 0;
    flex: 1;
}

.kagn-cc-typeahead-common {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kagn-cc-typeahead-sci {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-muted, #666);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kagn-cc-composer-actions {
    display: flex;
    justify-content: flex-end;
}

.kagn-cc-submit-btn {
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    background: var(--forest-600, #2d5a3d);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.kagn-cc-submit-btn:hover:not(:disabled) {
    background: var(--forest-500, #3d7a52);
}

.kagn-cc-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.kagn-cc-empty-hint {
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--sand-100, #faf8f4);
    border: 1px dashed var(--sand-border, #e6d8bf);
    color: var(--text-secondary, #555);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* ============================================
   VERIFICATION BADGES — palette-tuned, not bootstrap
   ============================================ */
.kagn-cc-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.kagn-cc-state-badge.verified {
    background: var(--forest-100, #e8f5ed);
    color: var(--forest-700, #234d38);
    border: 1px solid var(--forest-200, #c5e0d0);
}

.kagn-cc-state-badge.disputed {
    background: #fef3c7;
    color: #854d0e;
    border: 1px solid #fde68a;
}

/* Place the badge inline above the agree button on the modal */
.sighting-view-cc-badge {
    margin-bottom: 12px;
}