:root{
  --accent:#0B3C5D;
  --accent-600:#0a3554;
  --text:#0b1220;
  --muted:#64748b;
  --panel:#ffffff;
  --bg:#f6f7fb;
  --border:#e5e7eb;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.wrap{ max-width:1040px; margin:28px auto; padding:0 16px }
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:20px; box-shadow:0 1px 0 rgba(16,24,40,.02);
}
h1{ margin:0 0 6px 0; color:var(--text); font-size:22px }
.subtle{ color:var(--muted); margin:0 }

.top-bar{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.reloadbtn{
  padding:6px 12px; border:1px solid var(--accent); border-radius:8px;
  background:var(--accent); color:#fff; cursor:pointer;
}
.reloadbtn:hover{ background:var(--accent-600); }

.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; }
.mt12{ margin-top:12px } .mt16{ margin-top:16px } .mb12{ margin-bottom:12px }

.field{ min-width:240px; max-width:100% }
.field.grow{ flex:1 1 320px }
label{ display:block; font-size:13px; color:#1f2937; margin:0 0 6px 0 }
.hint{ font-size:12px; color:var(--muted); margin-top:6px }

.instructions {
  margin: 12px 0;
  padding-left: 24px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.4;
}
.instructions li {
  margin-bottom: 6px;
}

input, select{
  width:100%; padding:10px 12px; border:1px solid var(--border);
  border-radius:10px; background:#fff; font-size:14px;
}
input:focus, select:focus{ outline:2px solid rgba(11,60,93,.15); border-color:#c7d2fe }

.btn{
  padding:10px 14px; border:1px solid var(--border); border-radius:999px;
  background:#f8fafc; cursor:pointer; font-weight:600;
}
.btn:hover{ background:#eef2f7 }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-600) }

.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px }
.badge{
  padding:6px 10px; border:1px solid var(--border); border-radius:999px;
  font-size:12px; color:#334155; background:#f8fafc;
}

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }

/* single caption under the Min/Midpoint/Max grid */
.gridcaption{
  margin: 8px 0 0 0;
  font-size: 12px;
  color: var(--muted);
}

.stat{ border:1px solid var(--border); border-radius:14px; padding:14px; background:#fff; }
.stat .k{ font-size:12px; color:var(--muted); margin:0 0 6px 0 }
.stat .v{ font-size:20px; font-weight:700; margin:0 }

.target{ margin-top:12px; border:1px dashed var(--border); border-radius:14px; padding:14px; background:#fff; }
.target h3{ margin:0 0 6px 0; font-size:14px; color:#111827 }
.target .v{ font-size:20px; font-weight:700; margin:0 }

.note{ margin-top:10px; font-size:12px; color:var(--muted) }

.barwrap{ position:relative; border:1px solid var(--border); border-radius:14px; padding:12px; background:#fff; }
.barhdr { margin-bottom: 14px; }
.barlbl {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}
.barsublbl {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 14px;
}

.bar{ height:22px; border-radius:6px; background:#e9eef6; position:relative; overflow:visible }
.bar .fill{ position:absolute; top:0; left:0; height:22px; border-radius:6px; background:#cad8e8; z-index:0; }
.bar .overlay{ position:absolute; top:2px; height:18px; border-radius:5px; background:var(--accent); opacity:.9; z-index:1; }
.bar .tick { position:absolute; top:0; width:2px; height:105%; background:var(--accent); opacity:.9; z-index:2; }

/* Min/Max vertical markers */
.vmark{ position:absolute; top:-6px; bottom:-6px; width:2px; border-radius:1px; opacity:.9; z-index:3; transform:translateX(-1px); }
.vmark.min{ background:#659beb; }   /* blue */
.vmark.max{ background:#dd6464; }   /* red */
.vmark .vlabel{
  position:absolute;
  top:auto;bottom:-24px;                   
  transform:translateX(-50%);
  font-size:11px; color:#475569; margin-bottom:12px;
  white-space:nowrap;           /* these are short strings */
  text-align:center;
  pointer-events:none;
}

.legend{ font-size:12px; color:var(--muted); margin-top:20px; z-index:4}

.kv{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; }
.hr{ height:12px }

/* Notes card styling */
.target .note-list {
  margin: 6px 0 0 0;
  padding-left: 18px;         /* indent bullets */
  list-style: disc;
}

.target .note-list li {
  margin: 4px 0;
  font-size: 14px;            /* matches other body text in cards */
  line-height: 1.45;
  color: var(--text);
}
/* ===== Survey source bubble tints ===== */
.badge[data-badge="surveys"]{ transition: background-color .2s ease, border-color .2s ease; }
.badge.src-1{ background:#ffe6ea; border-color:#f8b4c0; color:#7a1f2b; }   /* 1 source = light pink */
.badge.src-2{ background:#fff8cc; border-color:#f2e39b; color:#6b6000; }   /* 2 sources = light yellow */
.badge.src-3{ background:#e7f7e7; border-color:#bfe6bf; color:#1f6b1f; }   /* 3+ sources = light green */

.range-track{ position:relative; }  /* ensure chart tracks are positioned */