* { box-sizing: border-box; }
body { font-family: -apple-system, system-ui, sans-serif; margin: 0; color: #0f172a; background: #f8fafc; }

/* Header */
.site-header { display:flex; justify-content:space-between; align-items:flex-start; padding:1rem 1.5rem; border-bottom:1px solid #e2e8f0; background:#fff; }
.site-header h1 { margin:0; font-size:1.15rem; font-weight:700; letter-spacing:-0.015em; }
.subtitle { margin:0.2rem 0 0; font-size:0.85rem; color:#64748b; }
.source-meta { text-align:right; flex-shrink:0; margin-left:1rem; }
.updated { font-size:0.72rem; color:#94a3b8; margin-top:0.3rem; }

/* Layout */
.layout { display:flex; gap:1rem; padding:1rem 1.5rem; min-height:calc(100vh - 80px); }

/* Controls sidebar */
.controls { flex:0 0 240px; position:sticky; top:1rem; align-self:flex-start; background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:1rem; }
.controls h3 { margin:0 0 0.8rem; font-size:0.9rem; font-weight:600; }
.controls label { display:block; margin:0.6rem 0; font-size:0.82rem; color:#334155; }
.controls input[type="range"] { width:100%; margin-top:0.2rem; }
.controls hr { border:none; border-top:1px solid #e2e8f0; margin:0.8rem 0; }
.toggle { display:flex; align-items:center; gap:0.4rem; }
.custom-coeffs label { font-size:0.75rem; }

/* Content area */
.content { flex:1 1 auto; min-width:0; }

/* Tabs */
.tabs { display:flex; gap:1.5rem; border-bottom:1px solid #e2e8f0; margin-bottom:1rem; background:#fff; padding:0 1rem; }
.tab { background:none; border:none; border-bottom:2px solid transparent; padding:0.6rem 0; cursor:pointer; opacity:0.55; font-weight:500; font-size:0.9rem; color:#0f172a; }
.tab.active { opacity:1; border-bottom-color:#0f172a; }
.tab-plume-link { margin-left:auto; background:none; border:none; border-bottom:2px solid transparent; padding:0.6rem 0; opacity:0.55; font-weight:500; font-size:0.9rem; color:#0f172a; text-decoration:none; white-space:nowrap; flex-shrink:0; }
.tab-plume-link:hover { opacity:1; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* 16-day grid */
.card-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:0.5rem; margin-top:0.6rem; }
@media (max-width: 1200px) { .card-grid { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 700px)  { .card-grid { grid-template-columns:repeat(2,1fr); } }

/* Calendar */
.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:0.4rem; margin-top:0.4rem; }
.calendar-head { margin-bottom:0.1rem; }
.calendar-head div { font-size:0.72rem; text-align:center; font-weight:600; color:#64748b; padding:0.2rem 0; }

/* Cards */
.clean-card { background:rgba(128,128,128,0.06); border:1px solid rgba(128,128,128,0.14); border-radius:8px; padding:0.7rem 0.5rem; text-align:center; }

/* Badges */
.badge-pill { display:inline-block; padding:0.2rem 0.5rem; font-size:0.68rem; font-weight:500; border-radius:4px; }
.badge-clear    { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.badge-moderate { background:#fefdf0; color:#854d0e; border:1px solid #fef08a; }
.badge-elevated { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.badge-high     { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* Map */
#map { height:520px; border-radius:8px; }
.map-toolbar { display:flex; gap:1.5rem; align-items:center; margin-bottom:0.6rem; flex-wrap:wrap; }
.map-toolbar label { font-size:0.82rem; }


/* Report tab */
button { padding:0.4rem 0.7rem; border:1px solid #cbd5e1; border-radius:6px; background:#fff; cursor:pointer; font-size:0.82rem; }
button:hover { background:#f1f5f9; }
.report-btn { padding:0.65rem 1rem; font-size:0.88rem; font-weight:500; border:1px solid #cbd5e1; border-radius:8px; background:#fff; text-align:left; cursor:pointer; transition:background 0.1s; }
.report-btn:hover { background:#f1f5f9; border-color:#94a3b8; }
.report-btn-link { display:block; text-decoration:none; color:#0f172a; }

/* Location selects */
#tab-forecast > label, #tab-monthly > label { font-size:0.82rem; display:block; margin-bottom:0.4rem; }
select { font-size:0.82rem; padding:0.25rem 0.4rem; border:1px solid #cbd5e1; border-radius:4px; }

/* Location-select mini-map (16-Day and 30-Day tabs) */
.loc-select-map { height: 200px; border-radius: 8px; margin: 0.4rem 0 0.6rem; border: 1px solid #e2e8f0; }
.loc-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.loc-label { font-size: 0.82rem; color: #475569; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-locate-small { padding: 0.3rem 0.65rem; font-size: 0.78rem; font-weight: 500; background: #2563eb; color: white; border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.btn-locate-small:hover { background: #1d4ed8; }

/* Custom coefficient section headers */
.cc-section-head { font-size: 0.64rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.07em; margin: 0.75rem 0 0.25rem; padding-top: 0.5rem; border-top: 1px solid #e2e8f0; }
.custom-coeffs .cc-section-head:first-child { border-top: none; margin-top: 0.25rem; }

/* Methodology tab */
.methods-wrap { max-width: 820px; }
.method-card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:1.1rem 1.3rem; margin-bottom:1rem; }
.method-card h2 { margin:0 0 0.6rem; font-size:1.05rem; font-weight:700; color:#0f172a; }
.method-card h3 { margin:0 0 0.3rem; font-size:0.98rem; font-weight:700; color:#0f172a; }
.method-card p { font-size:0.9rem; line-height:1.5; color:#334155; margin:0 0 0.7rem; }
.method-card ul { font-size:0.88rem; line-height:1.5; color:#334155; margin:0 0 0.5rem; padding-left:1.2rem; }
.method-card li { margin-bottom:0.35rem; }
.tier-row { display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:0.7rem; }
.model-card { border-left:4px solid #2563eb; }
.model-card .tagline { font-weight:600; color:#1e293b; font-size:0.92rem; margin-bottom:0.6rem; }
.model-card .m-label { font-weight:700; color:#475569; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.03em; }
.model-card .m-notes { margin-top:0.2rem; }
.model-card .m-best { font-size:0.86rem; color:#1d4ed8; background:#eff6ff; border-radius:6px; padding:0.45rem 0.7rem; margin-bottom:0; }
.model-card .fitted-stats { font-size:0.85rem; color:#166534; background:#f0fdf4; border-radius:6px; padding:0.4rem 0.7rem; }
.default-chip { display:inline-block; font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; background:#2563eb; color:#fff; border-radius:4px; padding:0.12rem 0.4rem; vertical-align:middle; margin-left:0.4rem; }
.method-card.limitations { border-left:4px solid #d97706; }

/* Formula display (methodology tab) */
.formula-block { background:#f8fafc; border:1px solid #cbd5e1; border-left:3px solid #3b82f6; border-radius:0 6px 6px 0; padding:0.75rem 1rem; margin:0.5rem 0; overflow-x:auto; }
.formula-block + .formula-block { margin-top:0.8rem; }
.formula-step-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#64748b; margin-bottom:0.35rem; }
.formula-eq { font-size:0.93rem; line-height:2; color:#0f172a; white-space:nowrap; display:flex; align-items:center; flex-wrap:wrap; gap:0.15rem; }
.fv { font-style:italic; color:#1d4ed8; }
.fv sup { font-style:normal; }
.frac { display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; line-height:1.3; margin:0 0.15rem; }
.frac-n { border-bottom:1.5px solid #0f172a; padding:0 0.25rem 0.06rem; font-size:0.88em; }
.frac-d { padding:0.06rem 0.25rem 0; font-size:0.88em; }
.coeff-pos { color:#166534; font-weight:600; font-variant-numeric:tabular-nums; }
.coeff-neg { color:#991b1b; font-weight:600; font-variant-numeric:tabular-nums; }
.formula-prox { background:#eff6ff; border:1px dashed #93c5fd; border-radius:5px; padding:0.45rem 0.75rem; margin-top:0.5rem; font-size:0.83rem; color:#1e3a8a; }
.formula-coeff-table { width:100%; border-collapse:collapse; font-size:0.82rem; margin-top:0.6rem; font-variant-numeric:tabular-nums; }
.formula-coeff-table th { background:#f1f5f9; font-weight:600; color:#475569; padding:0.35rem 0.6rem; text-align:left; border:1px solid #e2e8f0; white-space:nowrap; }
.formula-coeff-table td { padding:0.28rem 0.6rem; border:1px solid #e2e8f0; vertical-align:middle; }
.formula-coeff-table tr:nth-child(even) td { background:#f8fafc; }
.formula-coeff-table .sym { font-style:italic; color:#1d4ed8; white-space:nowrap; }
.formula-coeff-table .na { color:#94a3b8; text-align:center; }
.formula-coeff-table .prox-row td { background:#eff6ff; }

/* Forecast alert banner */
.forecast-alert { border-radius:8px; padding:0.65rem 0.9rem; margin:0.5rem 0 0.25rem; font-size:0.875rem; line-height:1.45; display:none; }
.forecast-alert.alert-elevated { display:block; background:#fff7ed; border:1px solid #fb923c; color:#7c2d12; }
.forecast-alert.alert-high { display:block; background:#fef2f2; border:1px solid #f87171; color:#7f1d1d; }
.forecast-alert strong { display:block; margin-bottom:0.2rem; }
.forecast-alert .alert-days { font-size:0.82rem; color:inherit; opacity:0.8; margin-top:0.2rem; }

/* Validation charts (Methodology tab) */
.validation-charts { display: flex; gap: 0.75rem; margin-bottom: 0.6rem; }
.val-chart { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.5rem; }
.val-chart-svg { width: 100%; display: block; }
.val-legend { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.val-legend-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: #334155; }
.val-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.metrics-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 0.4rem; }
.metrics-table th { text-align: left; padding: 0.3rem 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; border-bottom: 2px solid #e2e8f0; }
.metrics-table td { padding: 0.3rem 0.5rem; border-bottom: 1px solid #f1f5f9; color: #1e293b; }
.metrics-table tr:last-child td { border-bottom: none; }
@media (max-width: 700px) { .validation-charts { flex-direction: column; } }

/* Hourly tab */
.hourly-chart { width: 100%; display: block; }
.hourly-chart-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 0.75rem; margin-bottom: 0.6rem; }
.hour-strip { display: flex; margin-bottom: 0.5rem; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.hour-cell { flex: 1; min-width: 0; text-align: center; padding: 0.3rem 0.05rem; cursor: default; transition: filter 0.1s; }
.hour-cell:hover { filter: brightness(0.85); }
.hour-cell-label { font-size: 0.6rem; font-weight: 600; line-height: 1.3; }
.hour-cell-ori { font-size: 0.55rem; line-height: 1.2; opacity: 0.9; }
.hourly-legend { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }
@media (max-width: 700px) {
  .hour-cell-ori { display: none; }
  .hour-cell { padding: 0.4rem 0; }
}

/* Locate button */
.btn-locate {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.4rem 0.8rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.875rem;
}
.btn-locate:hover { background: #1d4ed8; }

/* Mobile layout — sidebar stacks above content */
@media (max-width: 700px) {
  .layout {
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.75rem;
  }
  #controls, .controls {
    width: 100%;
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem;
    flex: none;
  }
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    gap: 0.75rem;
    padding: 0 0.5rem;
  }
  .tabs button {
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
  }
  #map {
    height: 320px;
  }
  .site-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
  }
  .site-header h1 {
    font-size: 1rem;
  }
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .controls input[type="range"],
  .controls select {
    width: 100%;
  }
}