/* Identify flow — tightened surfaces (photo + sound pages). Linked AFTER each
   page's inline <style> so equal-specificity rules here win. Visual only:
   every id, class hook and handler the apps use is unchanged. */

/* ---- photo: upload screen ---- */
.ai-usage-indicator { text-align: left; padding: 10px 14px; margin: 0 0 14px; border-radius: 12px; }
.ai-usage-indicator span { font-size: 0.85rem; color: var(--text-muted, #666); }
.ai-usage-indicator a { color: var(--forest-600, #2d5a3d); font-weight: 600; }
.upload-zone { background: none; border: 0; padding: 0; text-align: left; margin-bottom: 20px; }
.upload-zone:hover, .upload-zone.drag-over { background: none; transform: none; border: 0; }
.upload-zone.drag-over .upload-buttons { outline: 2px dashed var(--forest-600, #2d5a3d); outline-offset: 6px; border-radius: 14px; }
.upload-icon, .upload-zone h2, .upload-zone p { display: none; }
.upload-buttons { flex-direction: column; gap: 10px; }
.upload-btn { width: 100%; justify-content: center; padding: 15px 20px; border-radius: 14px; font-size: 1rem; font-weight: 600; transition: none; }
.upload-btn svg { width: 20px; height: 20px; stroke-width: 1.75; }
.upload-btn.primary { background: var(--forest-800, #1a3a2a); }
.upload-btn.primary:hover { background: var(--forest-800, #1a3a2a); transform: none; }
.upload-btn.secondary { background: #fff; color: var(--forest-800, #1a3a2a); border: 1px solid #e4e0d4; }
.upload-btn.secondary:hover { background: #fff; border-color: #e4e0d4; }
.upload-alt-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid #e4e0d4; color: var(--forest-800, #1a3a2a); font-size: 0.95rem; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.upload-alt-link-icon { display: flex; color: var(--forest-700, #234d38); }
.upload-alt-link-icon svg { display: block; }
.sample-strip { margin: 8px 0 0; }
.sample-strip-heading { text-align: left; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); margin: 0 0 10px; }
.sample-strip-row { justify-content: flex-start; gap: 10px; scrollbar-width: none; }
.sample-strip-row::-webkit-scrollbar { display: none; }
.sample-thumb { width: 104px; gap: 6px; }
.sample-thumb img { width: 104px; height: 104px; border-radius: 12px; border: 0; }
.sample-thumb-label { font-size: 0.78rem; color: var(--text-primary, #1a1a1a); text-align: left; align-self: stretch; }
.tips-card { background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; padding: 0; margin-top: 20px; }
.tips-card summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 0.95rem; font-weight: 600; color: var(--text-primary, #1a1a1a); display: flex; align-items: center; justify-content: space-between; }
.tips-card summary::-webkit-details-marker { display: none; }
.tips-card summary::after { content: ''; width: 8px; height: 8px; border-right: 1.75px solid var(--forest-800, #1a3a2a); border-bottom: 1.75px solid var(--forest-800, #1a3a2a); transform: rotate(45deg); margin-right: 4px; transition: transform 0.15s; }
.tips-card[open] summary::after { transform: rotate(-135deg); }
.tips-card summary svg { display: none; }
.tips-card h3 { display: none; }
.tips-list { padding: 0 16px 14px; }

/* ---- photo: context screen ---- */
.context-card { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 8px; }
.context-card h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 600; color: var(--forest-800, #1a3a2a); margin-bottom: 4px; }
.context-card h3 svg { display: none; }
.context-field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); margin: 14px 0 6px; }
.context-field textarea, .context-field select { background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; padding: 13px 14px; font-size: 0.95rem; }
.context-field textarea:focus, .context-field select:focus { border-color: var(--forest-600, #2d5a3d); }
.context-field select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a3a2a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.accuracy-pill { background: #e8f5ed; color: var(--forest-800, #1a3a2a); }
#contextPhotosStrip img { width: 100%; max-height: 300px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; border: 0; }

/* ---- photo: result screen ---- */
.result-photos-strip { padding-bottom: 14px; }
.result-photos-strip img { max-height: 380px; aspect-ratio: 4 / 3; border-radius: 16px; border: 0; }
.result-photos-strip.multi img { width: 140px; height: 140px; aspect-ratio: auto; border-radius: 12px; }
.result-card.primary { background: none; border: 0; padding: 0; box-shadow: none; margin-bottom: 4px; }
.result-verdict { background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.result-verdict.conf-high { color: #2f7a3e; }
.result-verdict.conf-mid { color: #a86c12; }
.result-verdict.conf-low { color: #b23b3b; }
.result-verdict svg { flex-shrink: 0; }
.result-header { display: block; margin-bottom: 14px; }
.species-name { font-size: 1.75rem; line-height: 1.15; }
.species-name a { border-bottom: 0; }
.result-names-line { font-size: 0.95rem; color: var(--text-muted, #666); margin-top: 4px; }
.result-names-line .scientific-name { font-weight: 400; font-size: inherit; }
.result-names-line .secondary-name { display: inline; margin: 0; font-weight: 500; color: var(--text-muted, #666); }
.result-card.primary .confidence-badge, .gbif-badge, .taxonomy-row { display: none; }
.what-we-saw { margin: 0 0 16px; }
.what-we-saw h4 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); margin: 0 0 8px; }
.what-we-saw ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.what-we-saw li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; line-height: 1.4; color: var(--text-primary, #1a1a1a); }
.what-we-saw li svg { flex-shrink: 0; margin-top: 2px; }
.what-we-saw li.for svg { color: #2f7a3e; }
.what-we-saw li.against svg { color: #a86c12; }
.result-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.result-btn-row .log-sighting-btn { margin: 0; flex: 1 1 150px; padding: 15px 16px; border-radius: 14px; background: var(--forest-800, #1a3a2a); font-size: 1rem; white-space: nowrap; }
.result-btn-row .result-share-btn { flex: 1 0 auto; }
.result-btn-row .log-sighting-btn.secondary { background: #fff; color: var(--forest-800, #1a3a2a); border: 1px solid #e4e0d4; }
.result-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 18px; border-radius: 14px; background: #fff; color: var(--forest-800, #1a3a2a); border: 1px solid #e4e0d4; font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }
.result-actions #shareIdBtn { display: none !important; }
.result-actions { margin-top: 16px; }
.result-actions .upload-btn.primary { flex: 1; }
.result-logged { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #e8f5ed; color: var(--forest-800, #1a3a2a); font-weight: 600; font-size: 0.95rem; margin: 0 0 10px; }
.result-logged svg { flex-shrink: 0; color: #2f7a3e; }
.section-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--forest-800, #1a3a2a); margin: 22px 0 10px; }
.sample-result-banner { border-radius: 14px; }
.discovery-celebration { border-radius: 14px; }

/* rich sections (chat, reference, alternatives, second opinion) */
.rich-result-section { background: none; border: 0; box-shadow: none; margin: 20px 0 0; overflow: visible; }
.rich-chat { padding: 0; margin-top: 18px; }
.rich-chat-title, .rich-chat-subtitle { display: none; }
.rich-chat-messages:empty { display: none; margin: 0; }
.rich-chat-messages { margin: 0 0 12px; }
.rich-chat-message { font-size: 0.95rem; }
.rich-chat-message.assistant { background: #fff; border: 1px solid #e4e0d4; color: var(--text-primary, #1a1a1a); }
.rich-chat-message.user { background: var(--forest-800, #1a3a2a); }
.rich-chat-chips { gap: 8px; padding-bottom: 12px; }
.rich-chat-chip { border: 1px solid #e4e0d4; background: #fff; color: var(--forest-800, #1a3a2a); border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; font-weight: 500; }
.rich-chat-form { gap: 8px; align-items: center; }
.rich-chat-input { background: #fff; border: 1px solid #e4e0d4; border-radius: 999px; padding: 12px 16px; font-size: 16px; }
.rich-chat-input:focus { border-color: var(--forest-600, #2d5a3d); box-shadow: none; }
.rich-chat-send { width: 44px; height: 44px; background: var(--forest-800, #1a3a2a); display: inline-flex; align-items: center; justify-content: center; }
.rich-chat-note { font-size: 0.7rem; }
.rich-result-head { padding: 0 0 10px; align-items: baseline; }
.rich-result-head h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; font-weight: 600; }
.rich-result-head p { font-size: 0.8rem; }
.reference-strip { padding: 0 0 8px; gap: 10px; }
.reference-photo { flex: 0 0 120px; height: 120px; border-radius: 12px; }
.reference-status, .reference-credit { padding: 6px 0 0; text-align: left; font-size: 0.72rem; }
.alternatives-container { background: none; border: 0; padding: 0; margin-top: 22px; }
.alternatives-container .section-title { margin-top: 0; }
.alternatives-hint { display: none; }
.alt-card { background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; padding: 14px; box-shadow: none; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.alt-reference-photo { width: 64px; height: 64px; flex-basis: 64px; border-radius: 10px; border: 0; align-self: flex-start; }
.alt-card h4 { font-size: 1.05rem; font-weight: 600; }
.alt-card h4 a { border-bottom: 0; }
.alt-card .scientific-name { font-size: 0.85rem; }
.alt-card p { font-size: 0.85rem; color: var(--text-primary, #1a1a1a); margin-top: 6px; }
.alt-reasons { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.alt-reasons li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; line-height: 1.4; color: var(--text-primary, #1a1a1a); }
.alt-reasons li svg { flex-shrink: 0; margin-top: 2px; }
.alt-reasons li.why-not svg { color: #a86c12; }
.alt-reasons li.would-fit svg { color: #2f7a3e; }
.alt-card-right { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; margin-top: 2px; }
.alt-conf { background: none; padding: 0; font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.alt-conf.conf-high { color: #2f7a3e; } .alt-conf.conf-mid { color: #a86c12; } .alt-conf.conf-low { color: var(--text-muted, #666); }
.alt-log-btn { width: auto; height: auto; border-radius: 0; background: none; color: var(--forest-600, #2d5a3d); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0; white-space: nowrap; }
.alt-log-btn:hover { background: none; }
.alt-log-btn:active { transform: none; }
.second-opinion { background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; margin: 18px 0 0; }
.second-opinion-icon { background: #f1eee6; color: var(--forest-800, #1a3a2a); }
.second-opinion button { border-radius: 12px; border-color: #e4e0d4; }
.notes-box { background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; }
.identify-toast { border-radius: 14px; background: var(--forest-800, #1a3a2a); }

/* ---- sound page ---- */
.steps { display: none; }
.sound-record-area { background: none; border: 0; box-shadow: none; padding: 0; text-align: left; }
.sound-record-area h2 { display: none; }
.sound-record-area > p { font-size: 0.95rem; color: var(--text-muted, #666); margin-bottom: 14px; }
.sound-upload-btn { width: 100%; justify-content: center; border-radius: 14px; background: var(--forest-800, #1a3a2a); color: #fff; border: 0; font-weight: 600; padding: 15px 20px !important; font-size: 1rem !important; transition: none; }
.sound-upload-btn:hover { background: var(--forest-800, #1a3a2a); transform: none; }
.sound-preview { text-align: left; }
.sound-preview-actions { gap: 10px; }
.sound-identify-btn { border-radius: 14px; background: var(--forest-800, #1a3a2a); color: #fff; font-weight: 600; }
.sound-rerecord-btn { border-radius: 14px; border: 1px solid #e4e0d4; background: #fff; color: var(--forest-800, #1a3a2a); }
.birdnet-attribution { background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; padding: 0; margin-top: 12px !important; }
.birdnet-attribution summary { list-style: none; cursor: pointer; padding: 14px 16px; font-size: 0.95rem; font-weight: 600; color: var(--text-primary, #1a1a1a); display: flex; align-items: center; justify-content: space-between; }
.birdnet-attribution summary::-webkit-details-marker { display: none; }
.birdnet-attribution summary::after { content: ''; width: 8px; height: 8px; border-right: 1.75px solid var(--forest-800, #1a3a2a); border-bottom: 1.75px solid var(--forest-800, #1a3a2a); transform: rotate(45deg); margin-right: 4px; }
.birdnet-attribution[open] summary::after { transform: rotate(-135deg); }
.birdnet-attribution h4 { display: none; }
.birdnet-attribution p { padding: 0 16px; font-size: 0.85rem; }
.birdnet-attribution p:last-child { padding-bottom: 14px; }
.birdnet-attribution .tips-list { padding: 0 16px 14px; }
.results-header { display: none; }
.result-card { background: #fff; border: 1px solid #e4e0d4; border-radius: 16px; box-shadow: none; }
.result-card.primary { border-color: #e4e0d4; border-width: 1px; }
.result-card:hover { transform: none; box-shadow: none; }
.result-card-inner { flex-direction: column; }
.result-image { width: 100%; height: 200px; border-radius: 12px; }
.result-info h3 { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--forest-800, #1a3a2a); }
.result-info .scientific { font-style: italic; color: var(--text-muted, #666); }
.sound-verdict { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.sound-verdict.conf-high { color: #2f7a3e; } .sound-verdict.conf-mid { color: #a86c12; } .sound-verdict.conf-low { color: #b23b3b; }
.nudge-card { background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; color: var(--text-primary, #1a1a1a); }
.nudge-card h3, .nudge-card p { color: inherit; }
.nudge-btn { border-radius: 12px; }
.nudge-btn.primary { background: var(--forest-800, #1a3a2a); color: #fff; }
.nudge-btn.secondary { background: #fff; color: var(--forest-800, #1a3a2a); border: 1px solid #e4e0d4; }
.try-again { margin-top: 16px; }
.try-again-btn { border-radius: 14px !important; background: var(--forest-800, #1a3a2a); font-weight: 600; transition: none; }
.try-again-btn:hover { transform: none; }
#saveRecordingBtn, #shareIdBtn.try-again-btn { background: #fff !important; color: var(--forest-800, #1a3a2a) !important; border: 1px solid #e4e0d4 !important; }

body.on-result .page-title-row { display: none; }
.reference-photo .credit-i { top: auto; bottom: 4px; right: 4px; width: 20px; height: 20px; font-size: 0.68rem; z-index: 2; }
.alt-reference-wrap { position: relative; flex: 0 0 64px; width: 64px; height: 64px; }
.alt-reference-wrap .alt-reference-photo { width: 64px; height: 64px; }
.alt-reference-wrap .credit-i { top: auto; bottom: 3px; right: 3px; width: 20px; height: 20px; font-size: 0.68rem; }
/* reference photos in a framed card (Willem 2026-09-06: "a bit disjointed") */
.rich-result-section.rich-reference { background: #fff; border: 1px solid #e4e0d4; border-radius: 16px; padding: 14px 14px 12px; margin-top: 20px; }
.rich-reference .rich-result-head { padding: 0 0 10px; }
.rich-reference .reference-strip { margin: 0 -14px; padding: 0 14px 4px; }
.rich-reference .reference-photo { flex: 0 0 116px; height: 116px; border-radius: 12px; background: #f1eee6; }
.rich-reference .reference-status { padding: 4px 0 0; color: #555; }
.rich-reference .reference-status[role="button"] { color: var(--forest-800, #1a3a2a); font-weight: 600; cursor: pointer; }