.species-main { padding-block:var(--space-8) var(--space-12); background:var(--color-surface-offset); overflow-wrap:anywhere; color-scheme:light; --species-control-border:var(--color-border); }
[data-theme='dark'] .species-main { color-scheme:dark; --species-control-border:#71836c; }
[data-theme='dark'] .species-main .btn--outline { border-color:var(--species-control-border); }
.species-main [hidden] { display:none !important; }
.species-skip { position:absolute; top:-100px; left:var(--space-4); z-index:1000; padding:var(--space-3); background:var(--color-surface); color:var(--color-text); }
.species-skip:focus { top:var(--space-2); }
.species-main .wrap { max-width:1100px; }
.species-intro { max-width:760px; margin-bottom:var(--space-6); }
.species-intro h1 { font-size:var(--text-2xl); margin:var(--space-2) 0 var(--space-3); }
.species-intro p { color:var(--color-text-muted); font-size:var(--text-base); max-width:68ch; }
.species-form { padding:var(--space-5); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); margin-bottom:var(--space-6); }
.species-form fieldset { padding:0; border:0; margin:0 0 var(--space-5); min-width:0; }
.species-form legend,.species-field>span { font-size:var(--text-sm); font-weight:600; display:block; margin-bottom:var(--space-2); }
.species-choice { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.species-choice label { cursor:pointer; display:flex; align-items:center; gap:var(--space-2); border:1px solid var(--species-control-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-2); font-size:var(--text-sm); font-weight:600; white-space:nowrap; }
.species-choice label:has(input:checked) { background:var(--color-primary-highlight); color:var(--color-primary); border-color:var(--color-primary); }
[data-theme='dark'] .species-choice label:has(input:checked) { color:var(--color-primary-hover); }
.species-choice input { accent-color:var(--color-primary); width:18px; height:18px; flex-shrink:0; }
.species-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.species-trip { border-top:1px solid var(--color-divider); padding-top:var(--space-3); }
.species-trip summary { cursor:pointer; min-height:44px; font-size:var(--text-sm); font-weight:600; }
.species-trip summary span { display:block; font-size:var(--text-xs); color:var(--color-text-muted); font-weight:400; margin-top:var(--space-1); }
.species-trip[open] .species-fields { margin-top:var(--space-4); }
.species-field>label { display:block; font-size:var(--text-sm); font-weight:600; margin-bottom:var(--space-2); }
.species-field { min-width:0; }
.species-field input:not([type=checkbox]),.species-field select { display:block; width:100%; min-width:0; max-width:100%; min-height:46px; padding:var(--space-3); font:inherit; font-size:16px; background:var(--color-surface-2); color:var(--color-text); border:1px solid var(--species-control-border); border-radius:var(--radius-sm); box-sizing:border-box; }
.species-field input::placeholder { color:var(--color-text-muted); opacity:1; }
/* iOS's native date bezel/value can exceed a percentage-width grid cell.
   Size the real control, rather than clipping its parent or replacing the picker. */
.species-field input[type=date] { -webkit-appearance:none; appearance:none; text-align:left; }
.species-field input[type=date]::-webkit-date-and-time-value { min-width:0; min-height:1.5em; text-align:left; }
.species-field input[type=date]::-webkit-datetime-edit { min-width:0; padding:0; }
.species-field input[type=date]::-webkit-calendar-picker-indicator { opacity:1; cursor:pointer; }
.species-town { position:relative; }
#species-town-options { position:absolute; top:78px; left:0; right:0; z-index:20; margin:0; padding:var(--space-1); list-style:none; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); max-height:300px; overflow:auto; }
#species-town-options li { padding:var(--space-3); cursor:pointer; min-height:44px; font-size:16px; }
#species-town-options li:hover,#species-town-options li[aria-selected=true] { background:var(--color-primary-highlight); color:var(--color-primary); }
[data-theme='dark'] #species-town-options li:hover,[data-theme='dark'] #species-town-options li[aria-selected=true] { color:var(--color-primary-hover); }
#species-town-options small { margin:0; }
#species-town-options li:hover small,#species-town-options li[aria-selected=true] small { color:inherit; }
.species-counties { border:1px solid var(--species-control-border); border-radius:var(--radius-sm); background:var(--color-surface-2); }
.species-counties summary { padding:var(--space-3); min-height:46px; cursor:pointer; font-size:16px; overflow-wrap:anywhere; }
.species-county-menu { padding:var(--space-3); border-top:1px solid var(--color-border); }
.species-county-menu>label { font-size:var(--text-sm); }
.species-county-menu>button { margin-block:var(--space-3); width:100%; white-space:normal; }
.species-county-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:space-between; margin-block:var(--space-3); }
.species-county-actions .btn { min-width:0; max-width:100%; min-height:44px; white-space:normal; overflow-wrap:anywhere; letter-spacing:0; }
.species-county-actions #species-all-counties { flex:1 1 8rem; }
.species-county-actions #species-county-done { flex:none; min-width:72px; }
#species-county-options { max-height:280px; overflow:auto; }
#species-county-options>label { display:flex; gap:var(--space-3); align-items:center; padding:var(--space-2); min-height:48px; cursor:pointer; font-size:var(--text-sm); }
#species-county-options>label[hidden] { display:none; }
#species-county-options input { width:18px; height:18px; accent-color:var(--color-primary); flex-shrink:0; }
#species-county-options small { margin:0; }
#species-county-options label:has(input:disabled) { color:var(--color-text-muted); cursor:default; }
.species-date-note { font-size:var(--text-sm); padding:var(--space-3); border-left:3px solid var(--color-primary); margin-bottom:var(--space-5); }
.species-date-note:empty { display:none; }
.species-season { margin-top:var(--space-4); font-size:var(--text-sm); }
.species-season>strong { display:block; margin-bottom:var(--space-2); }
.species-season p { font-size:var(--text-xs); }
.species-restriction { padding:var(--space-3); background:var(--color-warning-highlight); color:var(--color-warning); border-radius:var(--radius-sm); }
.species-restriction strong { display:block; }
.species-actions a[aria-disabled=true] { background:var(--color-surface-offset); color:var(--color-text); border:1px solid var(--species-control-border); cursor:not-allowed; }
.species-form small { display:block; font-size:var(--text-xs); color:var(--color-text-muted); margin-top:var(--space-3); line-height:1.6; }
.species-toolbar { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-4); }
.species-toolbar button { min-height:44px; min-width:0; max-width:100%; width:auto; padding-inline:var(--space-3); letter-spacing:0; white-space:normal; overflow-wrap:anywhere; }
.species-status { color:var(--color-text-muted); font-size:var(--text-sm); }
.species-heading { display:flex; justify-content:space-between; gap:var(--space-4); align-items:baseline; margin-bottom:var(--space-2); }
.species-heading h2 { font-size:var(--text-xl); }
.species-summary { color:var(--color-text-muted); font-size:var(--text-sm); margin-bottom:var(--space-5); }
.species-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:var(--space-5); align-items:start; }
.species-results>.species-card:only-child { max-width:760px; }
.species-card { min-width:0; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:var(--space-3) var(--space-5) var(--space-5); overflow-wrap:anywhere; box-shadow:var(--shadow-sm); }
.species-card h3 { font:600 var(--text-lg)/1.35 var(--font-display); margin:var(--space-2) 0; }
.species-card p { font-size:var(--text-sm); line-height:1.65; margin-bottom:var(--space-3); }
.species-meta { font-size:var(--text-xs); color:var(--color-text-muted); }
.species-badge { display:block; width:fit-content; max-width:100%; margin-inline:auto; padding:2px 6px; border:1px solid var(--color-border); border-radius:var(--radius-sm); font-size:0.75rem; font-weight:600; line-height:1.4; text-align:center; }
.species-restriction { color:var(--color-text); border-left:3px solid var(--color-warning); }
.species-restriction a { color:inherit; text-decoration:underline; }
.species-facts { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-2); padding:0; list-style:none; margin:var(--space-3) 0; color:var(--color-text); font-size:var(--text-xs); font-weight:500; line-height:1.4; }
.species-facts li { max-width:100%; padding:2px 6px; background:var(--color-surface-2); border:1px solid var(--species-control-border); border-radius:var(--radius-sm); }
.species-conditions { margin-block:var(--space-4); padding-block:var(--space-3); border-block:1px solid var(--color-divider); }
.species-conditions .river-card__row { margin-top:0; }
.species-conditions .river-card__value { font-variant-numeric:tabular-nums; }
.species-gauge-height { text-align:right; }
.species-gauge-height .river-card__value { font-size:var(--text-lg); color:var(--color-text); }
.species-gauge-height .river-card__unit { font-size:var(--text-xs); text-transform:none; letter-spacing:0; }
.species-reading-meta { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-2); margin-block:var(--space-2); }
.species-reading-meta .river-card__updated { margin:0; color:var(--color-text-muted); }
.species-conditions .river-card__badges { margin-top:var(--space-2); gap:var(--space-2); }
.species-conditions .river-flow-badge,.species-conditions .river-temp-advisory { line-height:1.5; padding:3px var(--space-2); text-align:left; }
.species-conditions .species-reach-notice { margin-top:var(--space-3); }
.species-reach-notice>strong,.species-reach-notice>span { display:block; }
.species-reach-notice>span { margin-top:var(--space-1); }
.species-reach-notice .river-closure-notice__toggle { margin-right:var(--space-2); }
.species-reach-notice a { color:inherit; text-decoration:underline; }
.species-card .species-observation-note { font-size:var(--text-xs); margin:var(--space-3) 0 0; color:var(--color-text); }
.species-access-caution strong { display:block; font-size:var(--text-xs); color:var(--color-text-muted); }
.species-card details { border-top:1px solid var(--color-divider); padding-top:var(--space-3); margin-top:var(--space-3); }
.species-card summary { cursor:pointer; font-size:var(--text-sm); font-weight:600; padding-block:var(--space-2); min-height:44px; }
.species-card details p { margin-top:var(--space-3); }
.species-card h4 { font-size:var(--text-sm); margin-top:var(--space-4); margin-bottom:var(--space-2); font-family:var(--font-body); }
.species-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-4); font-size:var(--text-sm); }
.species-actions .btn { width:auto; max-width:100%; text-align:center; justify-content:center; min-height:38px; }
.species-actions .species-directions { display:inline-flex; padding:var(--space-2) var(--space-3); white-space:normal; letter-spacing:0; text-transform:none; border:1px solid var(--color-primary); }
.species-directions-label { font-size:inherit; font-weight:600; line-height:1.5; }
.species-actions>a:not(.btn) { min-height:38px; display:inline-flex; align-items:center; font-size:var(--text-xs); font-weight:600; text-decoration:underline; }
.species-empty { border:1px dashed var(--color-border); padding:var(--space-6); border-radius:var(--radius-md); grid-column:1/-1; }
.species-empty p { color:var(--color-text-muted); margin-top:var(--space-2); }
.species-secondary { padding-block:0; margin-top:var(--space-8); }
.species-secondary h2 { font-size:var(--text-lg); margin-bottom:var(--space-2); font-family:var(--font-body); }
.species-method { margin-top:var(--space-8); padding-top:var(--space-5); border-top:1px solid var(--color-divider); font-size:var(--text-sm); color:var(--color-text-muted); }
.species-method summary { cursor:pointer; color:var(--color-text); font-weight:600; }
.species-method p { margin-top:var(--space-3); max-width:90ch; }
.species-link { display:inline-flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-4); margin-top:var(--space-5); background:var(--color-primary-highlight); border-radius:var(--radius-md); color:var(--color-primary); }
.species-link a { font-weight:600; }
.species-main :focus-visible { outline:3px solid var(--color-primary); outline-offset:3px; }
@media(max-width:600px) { .species-main { padding-top:var(--space-5); } .species-fields,.species-results { grid-template-columns:1fr; } .species-form,.species-card { padding:var(--space-4); } .species-card { padding-top:var(--space-3); } .species-choice label { flex:1; justify-content:center; } .species-toolbar { align-items:flex-start; flex-wrap:wrap; } .species-heading { display:block; } }
@media(max-width:600px) { .species-choice { display:grid; grid-template-columns:1fr 1fr; } .species-choice label { white-space:normal; justify-content:flex-start; min-height:48px; } }
@media(pointer:coarse) { .species-actions .btn,.species-actions>a:not(.btn) { min-height:44px; } }

/* Identification adds a small thumbnail, not another destination-card image. */
.species-choice { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.species-choice label { padding:var(--space-2); white-space:normal; min-height:48px; min-width:0; }
.species-choice label>span { min-width:0; overflow-wrap:anywhere; }
.species-thumbnail { width:56px; height:26px; flex:none; object-fit:contain; background:transparent; }
.species-identify-row { display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--space-4); margin-top:var(--space-1); font-size:var(--text-xs); }
.species-identify-row button,.species-identify-row a { min-height:44px; display:inline-flex; align-items:center; text-align:left; color:var(--color-primary); text-decoration:underline; font-weight:600; }
.species-identify-row button { padding:0; border:0; background:none; font-size:inherit; cursor:pointer; }
.species-id-dialog { width:min(640px,calc(100% - 32px)); max-height:85dvh; margin:auto; padding:var(--space-5); background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:auto; }
.species-id-dialog::backdrop { background:rgb(0 0 0 / 55%); }
.species-id-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); position:sticky; top:calc(-1 * var(--space-5)); background:var(--color-surface); padding-block:var(--space-3); z-index:1; }
.species-id-heading h2,.species-guide h2,.species-guide-directory h2 { font:600 var(--text-lg)/1.35 var(--font-body); margin:0; }
.species-id-heading button { min-height:44px; padding:var(--space-2) var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface-2); color:var(--color-text); cursor:pointer; flex:none; font-size:var(--text-sm); }
.species-id-images { display:grid; gap:var(--space-4); }
.species-reference { margin:0; }
.species-reference img:not(.species-thumbnail) { display:block; width:100%; height:auto; max-height:240px; object-fit:contain; background:transparent; border-radius:var(--radius-sm); }
.species-reference figcaption { font-size:var(--text-xs); color:var(--color-text); line-height:1.6; padding-top:var(--space-2); }
.species-image-credit { display:block; color:var(--color-text-muted); }
.species-reference a,.species-id-source a,.species-guide a:not(.btn),.species-guide-directory a { text-decoration:underline; }
.species-id-features { margin:var(--space-4) 0; padding-left:var(--space-5); font-size:var(--text-sm); line-height:1.65; }
.species-id-features li+li { margin-top:var(--space-2); }
.species-id-source,.species-id-caution,.species-image-fallback { font-size:var(--text-xs); line-height:1.65; margin-block:var(--space-3); color:var(--color-text-muted); }
#species-identification-guide { display:inline-flex; min-height:44px; align-items:center; text-decoration:underline; font-size:var(--text-sm); font-weight:600; }
.species-guide-directory { margin-top:var(--space-6); padding-block:var(--space-5) 0; border-top:1px solid var(--color-divider); }
.species-guide-directory p { font-size:var(--text-sm); color:var(--color-text-muted); margin-top:var(--space-2); }
.species-guide-links { display:flex; flex-wrap:wrap; gap:0 var(--space-4); margin-top:var(--space-2); font-size:var(--text-sm); }
.species-guide-links a { display:inline-flex; min-height:44px; align-items:center; }
.species-guide .wrap { max-width:820px; }
.species-guide .species-intro { margin-bottom:var(--space-4); }
.species-guide-cta { min-height:44px; max-width:100%; white-space:normal; letter-spacing:0; text-align:center; }
.species-guide-identification { background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-lg); padding:var(--space-5); margin-block:var(--space-6); }
.species-guide-identification>h2 { margin-bottom:var(--space-4); }
.species-guide-destinations,.species-guide-season { padding:0; margin-top:var(--space-6); }
.species-guide-destinations>p,.species-guide-season p { margin-top:var(--space-3); font-size:var(--text-sm); line-height:1.7; }
.species-guide-outing { border-top:1px solid var(--color-divider); margin-top:var(--space-5); padding-top:var(--space-5); font-size:var(--text-sm); line-height:1.7; overflow-wrap:anywhere; }
.species-guide-outing h3 { font:600 var(--text-lg)/1.4 var(--font-body); margin-bottom:var(--space-2); }
.species-guide-outing p { margin-block:var(--space-2); }
.species-guide-limit { color:var(--color-text-muted); }
.species-guide-outing dt { font-weight:600; margin-top:var(--space-3); }
.species-guide-outing dd { margin:0; }
.species-guide-river { display:inline-flex; align-items:center; min-height:44px; margin-top:var(--space-2); }
.species-guide>.wrap>.species-meta { margin-top:var(--space-6); }
.species-related-heading { margin-top:var(--space-6)!important; }
/* Keep two compact columns normally; allow one when enlarged text needs it. */
@media(max-width:600px) { .species-choice { grid-template-columns:repeat(auto-fit,minmax(min(100%,max(7rem,calc(50% - var(--space-2)))),1fr)); } .species-thumbnail { width:40px; height:24px; } .species-choice label { gap:var(--space-1); font-size:var(--text-xs); } .species-guide-identification { padding:var(--space-4); } }
@media(max-width:360px) { .species-thumbnail { width:24px; height:20px; } .species-choice label { padding:var(--space-1); } }