.lake-main { padding-block:var(--space-8) var(--space-12); background:var(--color-surface-offset); overflow-wrap:anywhere; }
.lake-main .wrap { max-width:1100px; }
.lake-intro { max-width:760px; margin-bottom:var(--space-6); }
.lake-intro h1 { font-size:var(--text-2xl); margin:var(--space-2) 0 var(--space-3); }
.lake-intro p { color:var(--color-text-muted); font-size:var(--text-base); max-width:68ch; }
.lake-caveat { margin-top:var(--space-4); padding:var(--space-4); border-left:3px solid var(--color-primary); background:var(--color-surface); border-radius:var(--radius-sm); }
.lake-caveat strong { color:var(--color-text); }
.lake-main h2 { font-size:var(--text-xl); margin:var(--space-8) 0 var(--space-2); }
.lake-hint { color:var(--color-text-muted); font-size:var(--text-sm); margin-bottom:var(--space-4); }

/* The summary table is wide by nature; let it scroll rather than crushing the
   columns on a phone, and keep the lake name visible while it does. */
.lake-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
table.lake-summary { width:100%; border-collapse:collapse; font-size:var(--text-sm); min-width:640px; }
.lake-summary th,.lake-summary td { padding:var(--space-3); text-align:left; vertical-align:top; border-bottom:1px solid var(--color-divider); }
.lake-summary thead th { position:sticky; top:0; background:var(--color-surface-2); font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; z-index:1; }
.lake-summary thead th.is-sortable { cursor:pointer; user-select:none; }
.lake-summary thead th.is-sortable:hover,.lake-summary thead th.is-sortable:focus-visible { color:var(--color-primary); }
.lake-summary thead th[aria-sort=ascending]::after { content:' \2191'; }
.lake-summary thead th[aria-sort=descending]::after { content:' \2193'; }
.lake-summary tbody th { font-weight:600; }
.lake-summary tbody tr:last-child th,.lake-summary tbody tr:last-child td { border-bottom:0; }
.lake-county,.lake-sub { display:block; font-weight:400; font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }

.lake-method { margin:var(--space-8) 0; padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-lg); background:var(--color-surface); }
.lake-method summary { cursor:pointer; min-height:44px; display:flex; align-items:center; font-weight:600; font-size:var(--text-sm); }
.lake-method p { color:var(--color-text-muted); font-size:var(--text-sm); max-width:72ch; margin-top:var(--space-3); }
.lake-method strong { color:var(--color-text); }


.lake-meta { font-size:var(--text-xs); color:var(--color-text-muted); margin:0 0 var(--space-3); }
.lake-headline { font-size:var(--text-sm); margin:0 0 var(--space-4); }
/* "Smallmouth Bass" must not break into "Smallm outh Bass". The page sets
   overflow-wrap:anywhere so long URLs and source names cannot overflow, but a
   five-column table at phone width turns that on species names, which are
   proper nouns. Let the table keep its words whole and scroll instead. */

.lake-detail-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
table.lake-detail { width:100%; border-collapse:collapse; font-size:var(--text-sm); min-width:430px; overflow-wrap:normal; }
.lake-detail th,.lake-detail td { hyphens:none; }
.lake-detail tbody th { white-space:nowrap; }
.lake-detail th,.lake-detail td { padding:var(--space-2) var(--space-3); text-align:left; border-bottom:1px solid var(--color-divider); }
.lake-detail thead th { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--color-text-muted); white-space:nowrap; }
.lake-detail tbody th { font-weight:600; }
.lake-detail tr.is-rough th,.lake-detail tr.is-rough td { color:var(--color-text-muted); }
.lake-tag { font-size:var(--text-xs); font-weight:400; color:var(--color-text-muted); }
.lake-note-row td { font-size:var(--text-xs); color:var(--color-text-muted); border-bottom:1px solid var(--color-divider); padding-top:0; }
.lake-source { margin:var(--space-4) 0 0; font-size:var(--text-sm); }
.lake-footer-note { margin-top:var(--space-8); font-size:var(--text-sm); color:var(--color-text-muted); }
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }



/* ---- a single lake's page ---- */
.lake-intro--single h1 { font-size:var(--text-2xl); }
.lake-top { display:grid; gap:var(--space-5); margin:var(--space-6) 0; align-items:start; }
@media (min-width:720px) { .lake-top { grid-template-columns:minmax(0,1fr) auto; } }

/* The stat bar is the comparable part: the same six facts on every lake, so
   two lakes can be read against each other at a glance. */
.lake-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  margin:0; background:var(--color-border); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); overflow:hidden; }
@media (min-width:860px) { .lake-stats { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.lake-stat { background:var(--color-surface); padding:var(--space-4); min-width:0; }
.lake-stat dt { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-text-muted); margin-bottom:var(--space-1); }
.lake-stat dd { margin:0; font-size:var(--text-lg); font-weight:600; line-height:1.2; }
.lake-stat__sub { display:block; font-size:var(--text-xs); font-weight:400;
  color:var(--color-text-muted); margin-top:4px; }

.lake-flag { font-size:var(--text-sm); color:var(--color-text-muted); border-left:3px solid var(--color-border);
  padding-left:var(--space-3); margin:var(--space-4) 0; max-width:72ch; }
.lake-caveat--tight { margin-top:var(--space-4); font-size:var(--text-sm); }

table.lake-drive { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.lake-drive th,.lake-drive td { padding:var(--space-3); text-align:left; border-bottom:1px solid var(--color-divider); }
.lake-drive thead th { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-text-muted); white-space:nowrap; }
.lake-drive tbody tr:last-child th,.lake-drive tbody tr:last-child td { border-bottom:0; }

.lake-cta { margin:var(--space-8) 0; padding:var(--space-5); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); background:var(--color-surface); }
.lake-cta h2 { margin-top:0; }
.lake-cta p { color:var(--color-text-muted); font-size:var(--text-sm); max-width:62ch; margin-bottom:var(--space-4); }
/* The label names a species and a county, so it is long. `.btn` is nowrap
   everywhere else, which pushed the whole page sideways at 320px. */
.lake-cta .btn { white-space:normal; text-align:center; }

.lake-nearby { list-style:none; padding:0; margin:var(--space-4) 0 0; display:grid; gap:var(--space-2); }
@media (min-width:560px) { .lake-nearby { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lake-nearby li { padding:var(--space-3); border:1px solid var(--color-border);
  border-radius:var(--radius-md); background:var(--color-surface); min-width:0; }
.lake-nearby span { display:block; font-size:var(--text-xs); color:var(--color-text-muted); margin-top:2px; }

table.lake-stock { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.lake-stock th,.lake-stock td { padding:var(--space-3); text-align:left; vertical-align:top;
  border-bottom:1px solid var(--color-divider); }
.lake-stock thead th { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--color-text-muted); }
.lake-stock tbody th { font-weight:600; white-space:nowrap; width:5.5em; }
.lake-stock__list { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.lake-stock__detail { color:var(--color-text-muted); }