:root{
  --bg:#0b0f17;
  --card:#111827;
  --muted:#94a3b8;
  --text:#e5e7eb;
  --line:#23324a;
  --accent:#60a5fa;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 15% 0%, #0f2448 0%, var(--bg) 55%);
  color:var(--text);
}

.topbar{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background: rgba(11,15,23,0.8);
  backdrop-filter: blur(10px);
  z-index:10;
}

.brand .title{ font-weight:800; letter-spacing:0.2px; font-size:18px; }
.brand .subtitle{ color:var(--muted); font-size:12px; margin-top:2px; }

.controls{
  display:flex;
  gap:10px;
  align-items:end;
  flex-wrap:wrap;
}

.control{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}

select, input{
  background:#0b1220;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  outline:none;
  min-width:150px;
}
input{ min-width:220px; }

.btn{
  background:#0b1220;
  border:1px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:9px 12px;
  cursor:pointer;
}
.btn:hover{ border-color: #35507a; }

.grid{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap:14px;
  padding:14px;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, rgba(17,24,39,0.95), rgba(17,24,39,0.75));
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}

.cardHeader{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.cardTitle{ font-weight:800; }
.cardMeta{ color:var(--muted); font-size:12px; }

.mapCard #map{
  height: 420px;
}
.legend{
  padding:10px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}

.summaryCard{ grid-column:2; }
@media (max-width: 980px){
  .summaryCard{ grid-column:auto; }
}
.latestList{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.latestItem{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  background:#0b1220;
}
.latestItem .row1{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-weight:700;
}
.latestItem .row2{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.tableCard{ grid-column: 1 / span 2; }
@media (max-width: 980px){
  .tableCard{ grid-column:auto; }
}
.tableHeader{ align-items:flex-end; }
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:end;
}

.tableWrap{
  overflow:auto;
  max-height: 520px;
}

/* Summary tables should be fully visible (no scroll box) */
.tableWrap.noScroll{
  overflow: visible;
  max-height: none;
}

/* Section header row with copy button */
.sectionHeaderRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.iconBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:#0b1220;
  border:1px solid var(--line);
  color:var(--text);
  cursor:pointer;
  font-weight:700;
  user-select:none;
}
.iconBtn:hover{ border-color:#35507a; }
.iconBtn:active{ transform: translateY(1px); }
.iconBtnText{ font-size:12px; color:var(--muted); font-weight:700; }

/* Make summary tables fit without forcing horizontal scroll */
#latestSummaryTable{
  min-width: 0;
}
#latestSummaryTable th, #latestSummaryTable td{
  white-space: normal;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width: 900px;
}
thead th{
  position:sticky;
  top:0;
  background:#0b1220;
  border-bottom:1px solid var(--line);
  font-size:12px;
  color:var(--muted);
  padding:10px 10px;
  text-align:left;
  cursor:pointer;
  user-select:none;
}
tbody td{
  border-bottom:1px solid rgba(35,50,74,0.6);
  padding:10px 10px;
  vertical-align:top;
}
tbody tr:hover{ background: rgba(96,165,250,0.08); }

.badge{
  display:inline-block;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  color:var(--text);
  background: rgba(96,165,250,0.10);
}

.footerNote{
  padding:10px 14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
}
.footerNote a{ color:var(--accent); text-decoration:none; }
.footerNote a:hover{ text-decoration:underline; }

.mapHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.mapControls{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.customRangeWrap{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.customRangeWrap input{
  min-width: 160px;
}

.menuBtn{
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(11,18,32,0.92);
  backdrop-filter: blur(10px);
  z-index: 5000;              /* was 1000 */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}

.menuPanel{
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(70px + env(safe-area-inset-bottom));
  width: min(320px, calc(100vw - 28px));
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(17,24,39,0.92);
  backdrop-filter: blur(12px);
  z-index: 5000;              /* was 1000 */
  padding: 12px;
  display:none;
}

.menuPanel.open{
  display:block;
}

.menuBtn span{
  display:block;
  width:18px;
  height:2px;
  background: var(--text);
  border-radius: 2px;
}

/* Make Reddit report links high-contrast */
.reportCard a {
  color: #0b5cff; /* strong blue */
  text-decoration: underline;
}

.reportCard a:hover {
  color: #083fa1;
}

/* Allow horizontal scrolling for wide summary tables (averages table) */
.tableWrap.hscroll {
  overflow-x: auto;
  overflow-y: visible;        /* don't force vertical scrolling */
  -webkit-overflow-scrolling: touch;
}

/* Keep the table from squeezing columns too hard */
.tableWrap.hscroll table {
  width: max-content;         /* expand to fit columns */
  min-width: 100%;            /* but at least fill the card */
}

/* Optional: nicer scroll behavior on mobile */
.tableWrap.hscroll::-webkit-scrollbar {
  height: 10px;
}

.markdownWrap {
  overflow-x: auto;
  overflow-y: hidden;          /* critical: no vertical scroll */
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.markdownWrap pre {
  margin: 0;
  padding: 0.75rem;
  background: transparent;
}

.markdownWrap code {
  display: inline-block;
  white-space: pre;            /* preserve markdown layout */
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.4;
}

.markdownRenderWrap { max-width: 100%; }

.mdRendered table {
  width: 100%;
  border-collapse: collapse;
}

.mdRendered th, .mdRendered td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  text-align: left;
  vertical-align: top;
}

.mdRendered th {
  font-weight: 800;
}

.mdRendered code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Horizontal scroll container for rendered markdown tables */
.markdownRenderWrap {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Let the table take as much width as it needs, but not less than the card */
.mdRendered table {
  border-collapse: collapse;
  min-width: 100%;      /* still fills the card when it fits */
}

/* -----------------------------
   Collapsible table cells (3-line clamp)
   - Default: clamp to 3 lines
   - If clamped, show a small button to expand/collapse
------------------------------ */

/* Ensure cell text can wrap */
.mdRendered td,
.mdRendered th {
  white-space: normal;
  word-break: break-word;
}

/* The clamped text wrapper (JS injects this div into each cell) */
.cellClampText {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  line-height: 1.35;
  max-height: calc(1.35em * 3);
}

/* Expanded state: show full text */
td.cellExpanded .cellClampText {
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
}

/* Only show the button when JS detects overflow */
.cellExpandBtn {
  display: none;
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.12);
  color: inherit;
  cursor: pointer;
}

td.cellClamped .cellExpandBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cellExpandBtn:hover {
  background: rgba(0,0,0,0.22);
}

.cellExpandBtn:focus-visible {
  outline: 3px solid rgba(0,120,255,.55);
  outline-offset: 2px;
}

.cellExpandBtn {
  width: 26px;
  height: 22px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
  line-height: 1;
  font-size: 1rem;
}

/* --- Fix ugly word-splitting + force horizontal scroll on phones --- */

/* Let the table become wider than the screen (so scroll activates) */
.mdRendered table {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}

/* Default: DO NOT wrap / DO NOT break words in cells */
.mdRendered th,
.mdRendered td {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Notes column: allow wrapping + your 3-line clamp behavior */
.mdRendered th:last-child,
.mdRendered td:last-child {
  white-space: normal;
  max-width: 360px; /* tweak: 280–480px */
}

/* Clamp wrapper: NEVER break words mid-word */
.cellClampText {
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Keep the clamp only on Notes (last column) so other columns stay compact */
.mdRendered td:not(:last-child) .cellClampText {
  -webkit-line-clamp: unset !important;
  max-height: none !important;
  overflow: visible !important;
}
.mdRendered td:not(:last-child) .cellExpandBtn {
  display: none !important; /* expand button only meaningful for Notes */
}

/* ---------- Markdown table layout balance ---------- */

.mdRendered table {
  border-collapse: collapse;
  table-layout: auto;
  min-width: 100%;
  max-width: 100%;
}

/* Base cell styling */
.mdRendered th,
.mdRendered td {
  padding: 8px 10px;
  vertical-align: top;
}

/* Numeric / short columns → never wrap */
.mdRendered th:nth-child(2),
.mdRendered th:nth-child(3),
.mdRendered th:nth-child(4),
.mdRendered th:nth-child(5),
.mdRendered th:nth-child(6),
.mdRendered td:nth-child(2),
.mdRendered td:nth-child(3),
.mdRendered td:nth-child(4),
.mdRendered td:nth-child(5),
.mdRendered td:nth-child(6) {
  white-space: nowrap;
}

/* Lake / Location → natural word wrapping only */
.mdRendered th:first-child,
.mdRendered td:first-child {
  white-space: normal;
  max-width: 220px;
  overflow-wrap: break-word;
}

/* Notes → controlled wrapping + clamp */
.mdRendered th:last-child,
.mdRendered td:last-child {
  white-space: normal;
  max-width: 320px;
  overflow-wrap: break-word;
}

/* Hide extra latest-per-lake items until expanded */
.latestItem.isHidden {
  display: none;
}

/* Expand / collapse button */
.latestMoreWrap {
  text-align: center;
  margin-top: 6px;
}

.latestMoreBtn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.75;
}

.latestMoreBtn:hover {
  opacity: 1;
}