.tl-usgs-picker,
.tl-usgs-picker *,
.tl-usgs-rg,
.tl-usgs-rg *{box-sizing:border-box}
.tl-usgs-rg{width:100%;max-width:860px;margin:auto;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px;font-family:Arial,Helvetica,sans-serif;color:#1f2937}
.tl-usgs-rg h2{margin:0 0 4px;font-size:20px}
.tl-usgs-rg .sub{font-size:13px;color:#6b7280;margin-bottom:10px}
.tl-usgs-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.tl-usgs-heading{min-width:0}
.tl-usgs-range{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tl-usgs-range label{font-size:13px;font-weight:700;color:#374151;white-space:nowrap}
.tl-usgs-range select{min-width:140px;max-width:100%;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#111827;font:inherit;padding:8px 10px}
.tl-usgs-picker{width:100%;max-width:860px;margin:auto;font-family:Arial,Helvetica,sans-serif;color:#1f2937}
.tl-usgs-picker .tl-usgs-rg{max-width:none}
.tl-usgs-select-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.tl-usgs-select-row label{font-size:13px;font-weight:700;color:#374151}
.tl-usgs-select-row select{flex:1;min-width:0;max-width:100%;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#111827;font:inherit;padding:8px 10px}
.tl-usgs-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px}
.tl-usgs-card{min-width:0;background:#f3f4f6;border-radius:8px;padding:8px}
.tl-usgs-card span{display:block;font-size:11px;color:#6b7280}
.tl-usgs-card strong{display:block;min-width:0;font-size:14px;overflow-wrap:anywhere}
.tl-usgs-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tl-usgs-buttons button{max-width:100%;border:0;border-radius:999px;padding:7px 12px;font-weight:700;cursor:pointer;background:#e5e7eb;color:#111827;white-space:normal}
.tl-usgs-buttons button.active{background:#1d4ed8;color:#fff}
.tl-usgs-buttons button.muted{color:#9ca3af;background:#f9fafb;border:1px dashed #cbd5e1}
.tl-usgs-chart{height:260px;position:relative}
.tl-usgs-no-data{display:none;height:260px;align-items:center;justify-content:center;text-align:center;color:#6b7280;font-size:17px}
.tl-usgs-chart {
  display: block;
  height: 260px;
  position: relative;
  margin-top: 8px;
}

.tl-usgs-chart canvas {
  width: 100% !important;
  height: 260px !important;
}

/* Responsive river widget layout */
@media(max-width:767px){
  .tl-usgs-picker{max-width:100%;overflow-x:hidden}
  .tl-usgs-rg{max-width:100%;padding:10px}
  .tl-usgs-rg h2{font-size:23px;line-height:1.2}
  .tl-usgs-rg .sub{font-size:16px;line-height:1.35;margin-bottom:0}
  .tl-usgs-select-row,
  .tl-usgs-panel-header,
  .tl-usgs-range{align-items:stretch;flex-direction:column}
  .tl-usgs-select-row{gap:6px;margin-bottom:14px}
  .tl-usgs-panel-header{gap:12px;margin-bottom:14px}
  .tl-usgs-range{gap:6px}
  .tl-usgs-select-row select,
  .tl-usgs-range select{width:100%;min-width:0}
  .tl-usgs-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
  .tl-usgs-card{padding:10px}
  .tl-usgs-buttons{gap:8px;margin-bottom:14px}
  .tl-usgs-buttons button{font-size:15px;line-height:1.2;padding:8px 12px}
  .tl-usgs-chart,
  .tl-usgs-no-data{width:calc(100% + 8px);height:360px;min-height:360px;margin:10px -4px 0}
  .tl-usgs-chart canvas{height:360px !important}
}

/* Narrow phones need single-column stat cards to avoid squeezed values. */
@media(max-width:420px){
  .tl-usgs-stats{grid-template-columns:1fr}
  .tl-usgs-rg h2{font-size:22px}
  .tl-usgs-rg .sub{font-size:15px}
  .tl-usgs-buttons button{font-size:14px}
}