/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:         #0b1120;
  --card:       rgba(255,255,255,0.055);
  --border:     rgba(96,165,250,0.18);
  --text:       #e2e8f0;
  --muted:      #94a3b8;
  --blue:       #3b82f6;
  --blue-light: #60a5fa;
  --green:      #22c55e;
  --amber:      #f59e0b;
  --red:        #ef4444;
  --radius:     14px;
  --shadow:     0 4px 24px rgba(0,0,0,0.4);
}

body {
  font-family: system-ui,-apple-system,'Segoe UI',sans-serif;
  background: linear-gradient(145deg,#0b1120 0%,#111827 50%,#0f172a 100%);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
}

a { color:var(--blue-light); text-decoration:none; }
a:hover { text-decoration:underline; }
code { background:rgba(255,255,255,0.1); padding:.15em .4em; border-radius:4px; font-size:.88em; }

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
  background: rgba(11,17,32,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index:100;
  padding: 1rem 2rem;
}
.header-inner {
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; gap:1rem;
}
.logo { display:flex; align-items:center; gap:.9rem; }
.logo-icon { font-size:2rem; }
.logo h1 {
  font-size:1.6rem; font-weight:700;
  background:linear-gradient(90deg,#60a5fa,#a78bfa);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── Main ────────────────────────────────────────────────────────────────── */
main {
  max-width:1100px; margin:0 auto;
  padding:2rem 1.5rem 4rem;
  display:flex; flex-direction:column; gap:2.5rem;
}
section { animation:fadeIn .4s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
h2 { font-size:1.35rem; font-weight:700; color:var(--blue-light); margin-bottom:1rem; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.search-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:2rem; box-shadow:var(--shadow);
}
.search-card h2 { color:var(--text); margin-bottom:.3rem; }
.hint { color:var(--muted); font-size:.9rem; margin-bottom:1.2rem; }
.search-row { display:flex; gap:.75rem; flex-wrap:wrap; }
.postcode-wrap { flex:1; position:relative; min-width:200px; }

#postcode-input {
  width:100%; padding:.85rem 1.2rem; font-size:1.05rem;
  border-radius:999px; border:1.5px solid var(--border);
  background:rgba(255,255,255,0.07); color:var(--text);
  outline:none; transition:border .2s; text-transform:uppercase; letter-spacing:.06em;
}
#postcode-input:focus { border-color:var(--blue-light); }
#postcode-input::placeholder { color:var(--muted); text-transform:none; letter-spacing:0; }

.btn-primary {
  padding:.85rem 1.8rem; font-size:1rem; font-weight:600;
  border-radius:999px; background:linear-gradient(135deg,#3b82f6,#6366f1);
  color:white; border:none; cursor:pointer; transition:opacity .2s,transform .1s;
  white-space:nowrap;
}
.btn-primary:hover { opacity:.9; }
.btn-primary:active { transform:scale(.97); }

.error-msg {
  color:#fca5a5; font-size:.9rem; margin-top:.8rem;
  padding:.5rem .8rem; background:rgba(239,68,68,.1);
  border-radius:6px; border-left:3px solid var(--red);
}
.location-info {
  display:flex; align-items:center; gap:1rem; margin-top:1.2rem;
  padding:1rem 1.2rem; background:rgba(96,165,250,.08);
  border:1px solid rgba(96,165,250,.2); border-radius:10px;
}
.loc-icon { font-size:1.5rem; }
.loc-name { font-size:1.05rem; font-weight:600; }
.loc-detail { color:var(--muted); font-size:.85rem; }
.loc-coords { margin-left:auto; color:var(--muted); font-size:.82rem; font-family:monospace; white-space:nowrap; }

/* ── Section header ──────────────────────────────────────────────────────── */
.section-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.section-date { color:var(--muted); font-size:.9rem; }
.section-hint { color:var(--muted); font-size:.88rem; margin:-.5rem 0 1rem; }

/* ── Weather cards ───────────────────────────────────────────────────────── */
.weather-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:1rem; }
.wcard {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.2rem 1rem; text-align:center;
  transition:transform .2s;
}
.wcard:hover { transform:translateY(-3px); }
.wcard.alert-high { border-color:rgba(239,68,68,.5); background:rgba(239,68,68,.07); }
.wcard.alert-med  { border-color:rgba(245,158,11,.5); background:rgba(245,158,11,.06); }
.wcard.alert-low  { border-color:rgba(99,102,241,.5); background:rgba(99,102,241,.06); }
.wcard-icon  { font-size:1.6rem; margin-bottom:.3rem; }
.wcard-label { color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4rem; }
.wcard-value { font-size:1.25rem; font-weight:700; }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.chart-wrap {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.5rem; overflow-x:auto;
}
.chart-legend { display:flex; gap:1.5rem; margin-bottom:1rem; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.legend-dot  { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.legend-bar  { display:inline-block; width:12px; height:10px; border-radius:2px; margin-right:4px; vertical-align:middle; }
#d3-chart { display:block; }
.grid line { stroke:rgba(255,255,255,.05); }
.grid .domain { display:none; }

/* ── Day picker ──────────────────────────────────────────────────────────── */
.picker-row { text-align:center; margin-bottom:1rem; }
#day-dropdown {
  padding:.8rem 1.4rem; font-size:1rem; border-radius:10px;
  background:rgba(255,255,255,.08); color:var(--text);
  border:1.5px solid var(--border); cursor:pointer; min-width:300px;
}
.day-detail-card {
  max-width:640px; margin:0 auto;
  background:rgba(30,58,138,.2); border:1px solid rgba(96,165,250,.25);
  border-radius:var(--radius); padding:1.8rem;
}
.detail-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem;
}
.detail-header h3 { font-size:1.1rem; }
.risk-pill { padding:.35rem 1rem; border-radius:999px; font-size:.88rem; font-weight:700; }
.pill-flood { background:rgba(239,68,68,.2); color:#fca5a5; border:1px solid var(--red); }
.pill-safe  { background:rgba(34,197,94,.15); color:#86efac; border:1px solid var(--green); }

/* ── Risk verdict block ──────────────────────────────────────────────────── */
.risk-verdict {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.2rem; border-radius:10px; margin-bottom:1.2rem;
  border-left:4px solid;
}
.risk-verdict-icon { font-size:2rem; flex-shrink:0; }
.risk-verdict-label { font-size:1.15rem; font-weight:700; }
.risk-verdict-sub   { font-size:.82rem; color:var(--muted); margin-top:.1rem; }
.verdict-high  { background:rgba(239,68,68,.12);  border-color:#ef4444; }
.verdict-med   { background:rgba(245,158,11,.12); border-color:#f59e0b; }
.verdict-low   { background:rgba(59,130,246,.12); border-color:#3b82f6; }
.verdict-vlow  { background:rgba(34,197,94,.1);   border-color:#22c55e; }

.detail-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.6rem; margin-bottom:1.2rem; }
.detail-stat { display:flex; justify-content:space-between; font-size:.88rem; padding:.4rem .6rem; background:rgba(255,255,255,.04); border-radius:6px; }
.detail-stat span { color:var(--muted); }

/* ── Prediction section ──────────────────────────────────────────────────── */
#prediction-section { text-align:center; }
.btn-predict {
  padding:1rem 2.8rem; font-size:1.1rem; font-weight:700;
  border-radius:999px; background:linear-gradient(135deg,#1d4ed8,#7c3aed);
  color:white; border:none; cursor:pointer; margin:0 auto 1.5rem;
  display:inline-block; transition:all .2s;
  box-shadow:0 0 20px rgba(99,102,241,.35);
}
.btn-predict:hover   { transform:scale(1.04); box-shadow:0 0 30px rgba(99,102,241,.5); }
.btn-predict:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.pred-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.9rem; margin-top:1rem; }
.pred-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.1rem .7rem; text-align:center; transition:transform .2s;
}
.pred-card:hover { transform:translateY(-4px); }
.pred-card.pred-flood { border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.06); }
.pred-card.pred-safe  { border-color:rgba(34,197,94,.3);  background:rgba(34,197,94,.04); }
.pred-day   { font-weight:700; font-size:.95rem; }
.pred-date  { color:var(--muted); font-size:.75rem; margin-bottom:.5rem; }
.pred-icon  { font-size:1.8rem; margin:.2rem 0; }
.pred-label { font-size:.78rem; font-weight:600; margin-bottom:.3rem; }
.pred-prob  { font-size:1.1rem; font-weight:700; color:var(--blue-light); }

/* ── XAI ─────────────────────────────────────────────────────────────────── */
.xai-day-tabs { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.tab-btn {
  padding:.45rem 1rem; font-size:.82rem; font-weight:600;
  border-radius:999px; border:1.5px solid var(--border);
  background:transparent; color:var(--muted); cursor:pointer; transition:all .2s;
}
.tab-btn:hover  { border-color:var(--blue-light); color:var(--blue-light); }
.tab-btn.active { background:rgba(96,165,250,.15); border-color:var(--blue-light); color:var(--blue-light); }

.xai-panel {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow);
}
.xai-panel-header {
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin-bottom:1.5rem; padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.xai-panel-header h3 { font-size:1.1rem; font-weight:700; }
.xai-badge { padding:.25rem .75rem; border-radius:999px; font-size:.72rem; font-weight:800; letter-spacing:.06em; }
.shap-badge { background:rgba(239,68,68,.2); border:1px solid var(--red); color:#fca5a5; }
.xai-method { color:var(--muted); font-size:.78rem; margin-left:auto; font-style:italic; }

.gauge-row { display:flex; align-items:flex-start; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.gauge-wrap { position:relative; flex-shrink:0; }
.gauge-label { position:absolute; bottom:0; left:50%; transform:translateX(-50%); text-align:center; }
.gauge-pct  { font-size:1.6rem; font-weight:800; }
.gauge-risk { font-size:.8rem; font-weight:600; margin-top:-2px; }

.bullets-wrap { flex:1; min-width:240px; }
.bullets-wrap h4 { font-size:.88rem; color:var(--blue-light); margin-bottom:.6rem; }
.bullet-list { list-style:none; padding:0; }
.bullet-list li {
  font-size:.84rem; padding:.45rem .6rem .45rem 1.4rem; position:relative;
  border-bottom:1px solid rgba(255,255,255,.05); color:#cbd5e1;
}
.bullet-list li::before { content:"●"; position:absolute; left:0; color:var(--blue); font-size:.6rem; top:.65rem; }
.bullet-list li.loading { color:var(--muted); font-style:italic; }

.shap-chart-wrap { margin-top:.5rem; }
.shap-chart-wrap h4 { font-size:.9rem; margin-bottom:.3rem; }
.chart-hint { color:var(--muted); font-size:.78rem; margin-bottom:.8rem; }
#shap-chart { overflow:visible; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { text-align:center; padding:2rem; color:var(--muted); font-size:.82rem; border-top:1px solid rgba(255,255,255,.05); }

.loading { color:var(--muted); font-style:italic; text-align:center; padding:1rem 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:640px) {
  header { padding:.8rem 1rem; }
  .logo h1 { font-size:1.2rem; }
  main { padding:1.2rem 1rem 3rem; gap:2rem; }
  .gauge-row { flex-direction:column; align-items:center; }
  .loc-coords { display:none; }
  .pred-grid { grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}

/* ── Town selection grid ─────────────────────────────────────────────────── */
.town-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.town-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1rem 0.8rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text);
}
.town-btn:hover {
  border-color: var(--blue-light);
  transform: translateY(-2px);
  background: rgba(96,165,250,0.08);
}
.town-btn.active {
  border-color: var(--blue-light);
  background: rgba(96,165,250,0.15);
  box-shadow: 0 0 12px rgba(96,165,250,0.25);
}
.town-emoji  { font-size: 1.8rem; }
.town-name   { font-size: 1rem; font-weight: 700; }
.town-region { font-size: 0.72rem; color: var(--muted); }