/* Existing palette and typography, with clearer controls. */
:root { --nav-bg: var(--bg-color, var(--bg)); --nav-ink: var(--text-color, var(--ink)); }
.species-button {
    pointer-events: auto; min-height: 44px; padding: 5px 14px;
    border: 1px solid currentColor; border-radius: 24px;
    background: var(--nav-bg); color: var(--nav-ink); cursor: pointer;
    font: 12px var(--font-body); display: flex; align-items: center; gap: 10px;
}
.species-button #counter-text { font-size: 12px; opacity: .8; }
.species-picker {
    position: fixed; inset: 0; margin: auto; width: min(440px, calc(100% - 40px));
    max-height: min(680px, calc(100dvh - 48px)); padding: 0 24px;
    border: 1px solid var(--border-color, var(--border-medium, #b7b4a9)); border-radius: 3px;
    background: var(--nav-bg); color: var(--nav-ink); overflow: hidden;
    font-family: var(--font-body); box-shadow: 0 16px 70px rgb(0 0 0 / 12%);
}
.species-picker[open] { display: flex; flex-direction: column; }
.species-picker::backdrop { background: rgba(34,40,30,.22); }
.species-picker header { display: flex; align-items: center; gap: 12px; padding: 20px 0 14px; border-bottom: 1px solid var(--border-color, var(--border-medium, #b7b4a9)); flex-shrink: 0; }
.species-picker h2 { flex: 1; font: 26px/1.2 var(--font-heading); margin: 0; }
.species-picker-close { min-width: 44px; min-height: 44px; background: none; border: 1px solid var(--border-color, var(--border-medium, #b7b4a9)); border-radius: 50%; font: 24px var(--font-body); color: inherit; cursor: pointer; }
.species-picker-list { display: grid; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px 2px; }
.species-picker-list button { min-height: 76px; padding: 8px 4px; display: flex; align-items: center; gap: 16px; text-align: start; border: 0; border-bottom: 1px solid var(--border-color, var(--border-medium, #b7b4a9)); border-radius: 0; background: none; color: inherit; font: 18px/1.3 var(--font-heading); cursor: pointer; }
.species-picker-list img { width: 48px; height: 56px; object-fit: contain; flex: 0 0 48px; }
.species-caption { display: grid; gap: 4px; flex: 1; }
.species-caption i { font: italic 12px/1.35 'Tiempos Headline', serif; color: var(--nav-ink); opacity: .8; }
.species-picker-list button:hover, .species-picker-list [aria-current="true"] { background: color-mix(in srgb, var(--nav-ink) 5%, transparent); }
.species-picker-list [aria-current="true"]::after { content: '✓'; font: 16px var(--font-body); padding-inline: 5px; }
.species-picker-foot { margin: 0; padding: 6px 0 8px; text-align: center; font: 16px var(--font-body); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
button:focus-visible, a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.detail-panel { overscroll-behavior: contain; }
.detail-panel[aria-hidden="true"] { visibility: hidden; }
.detail-close-bar { position: sticky; top: -28px; z-index: 600; display: flex; justify-content: flex-end; background: var(--bg-color); padding: 8px 0; margin-top: -16px; }
.detail-close-bar .detail-close { position: static; opacity: 1; width: 44px; height: 44px; border: 1px solid var(--border-color); border-radius: 50%; background: var(--bg-color); }
.detail-trigger { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 16px; border: 1px solid currentColor; border-radius: 24px; opacity: 1; font-size: 13px; text-decoration: none; }
.scale-label-ui { color: #60605b; }
.dossier-section-label, .dossier-dist-label, .dossier-actions-label, .elevation-edge-label { opacity: .8; color: var(--ink); font-size: 11px; }
.companion-scientific, .dossier-action-item { opacity: .8; color: var(--ink); }
@media (max-width: 640px) {
    .icon-btn, .control-button { min-width: 44px; min-height: 44px; }
    .detail-panel { max-height: calc(100dvh - 64px); padding-bottom: max(28px, env(safe-area-inset-bottom)); }
    .progress-counter { bottom: max(12px, env(safe-area-inset-bottom)); }
    .species-button { max-width: 224px; font-size: 11px; gap: 8px; }
}

/* In the reading overlay, navigation no longer covers the final paragraphs. */
body.modal-open .arrow-nav, body.modal-open .progress-counter { visibility: hidden; pointer-events: none; }
.card-arabic, .gauge-label, .gauge-zero, .gauge-tick-label, .gauge-max-label, .card-stat-label { color: var(--ink); opacity: .8; }
@media (max-width: 640px) {
    .progress-dots { display: none; }
    .card-stat-label { font-size: 10px; }
    .card-arabic { font-size: 14px; }
    .card-info.expanded { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}