/* CountrySafety.com — shared styles */
:root{
  --bg:#0b1220; --card:#0f1a2f; --text:#e7eefc; --muted:#a9b6d4;
  --line:rgba(255,255,255,.12); --shadow: 0 14px 40px rgba(0,0,0,.35);
  --green:#2e7d32; --yellow:#f9a825; --orange:#ef6c00; --red:#c62828;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 20% 5%, rgba(78, 132, 255, .22), transparent 65%),
    radial-gradient(900px 500px at 80% 0%, rgba(16, 185, 129, .16), transparent 60%),
    radial-gradient(700px 400px at 50% 100%, rgba(245, 158, 11, .14), transparent 55%),
    linear-gradient(180deg, var(--bg), #070b14 65%);
}
a{ color:#9cc2ff; text-decoration:none; } a:hover{ text-decoration:underline; }
.wrap{ width:min(1150px, calc(100% - 44px)); margin:0 auto; }
.muted{ color:var(--muted); }
.skip{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{ left:18px; top:18px; width:auto; height:auto; padding:10px 12px; background:#111a2e; border:1px solid var(--line); border-radius:10px; z-index:999; }
.topbar{ position:sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: rgba(11,18,32,.72); border-bottom:1px solid var(--line); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; gap:18px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background: rgba(255,255,255,.07); border:1px solid var(--line); font-weight:900; letter-spacing:.04em; }
.brand__title{ font-weight:900; line-height:1.1; letter-spacing:-.02em; }
.brand__sub{ color:var(--muted); font-size:13px; margin-top:2px; }
.nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.nav a{ padding:8px 10px; border-radius:999px; border:1px solid transparent; }
.nav a:hover{ border-color: var(--line); background: rgba(255,255,255,.05); text-decoration:none; }
.nav a.active{ border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.hero{ padding:52px 0 28px; }
.hero__inner{ padding:26px 26px; background: rgba(255,255,255,.05); border:1px solid var(--line); border-radius:18px; box-shadow: var(--shadow); }
.hero h1{ margin:0 0 10px; font-size: clamp(28px, 3vw, 38px); letter-spacing:-.02em; }
.hero p{ margin:0; color: var(--muted); line-height:1.6; max-width: 90ch; }
.hero__chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.chip{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid var(--line); background: rgba(255,255,255,.04); color: #d9e6ff; font-size: 13px; }
.section{ padding:40px 0; }
.section--alt{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); }
.section__head{ margin-bottom:18px; }
.section__head h2{ margin:0 0 6px; font-size: 22px; letter-spacing:-.01em; }
.grid{ display:grid; gap:16px; }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px){ .grid--2,.grid--3{ grid-template-columns:1fr; } }
.card{ background: rgba(255,255,255,.05); border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow); padding:16px 16px; }
.card__title{ font-weight:900; margin-bottom:10px; }
.card p{ margin:0; color: var(--muted); line-height:1.6; }
.legend{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.tag{ display:inline-block; padding:5px 10px; border-radius:999px; font-weight:900; font-size:12px; border:1px solid rgba(255,255,255,.18); }
.tag.potable{ background: var(--green); color:#fff; border-color: rgba(255,255,255,.10); }
.tag.probably-safe{ background: var(--yellow); color:#111; border-color: rgba(0,0,0,.15); }
.tag.probably-unsafe{ background: var(--orange); color:#fff; border-color: rgba(255,255,255,.10); }
.tag.definitely-unsafe{ background: var(--red); color:#fff; border-color: rgba(255,255,255,.10); }
.controls{ display:flex; gap:12px; flex-wrap:wrap; margin: 14px 0 18px; }
.control{ display:flex; flex-direction:column; gap:6px; min-width: 220px; }
.control span{ color: var(--muted); font-size: 12px; }
.control input, .control select{ background: rgba(255,255,255,.06); border:1px solid var(--line); color: var(--text); padding:10px 12px; border-radius:12px; outline:none; }
.control input::placeholder{ color: rgba(231,238,252,.45); }
.tableWrap{ overflow:auto; border-radius:16px; border:1px solid var(--line); background: rgba(255,255,255,.03); }
.water-table{ width:100%; border-collapse:separate; border-spacing:0; min-width: 900px; font-size: 14px; }
.water-table thead th{ position:sticky; top:0; background: rgba(15,26,47,.95); border-bottom:1px solid var(--line); padding:12px 12px; text-align:left; font-weight:900; }
.water-table tbody td{ padding:12px 12px; border-bottom:1px solid rgba(255,255,255,.08); vertical-align:top; }
.water-table tbody tr:hover{ background: rgba(255,255,255,.04); cursor:pointer; }
.score{ font-weight:900; letter-spacing:.01em; }
.fineprint{ margin-top:18px; color: rgba(231,238,252,.70); font-size: 13px; line-height: 1.6; }
.bullets{ margin:0; padding-left: 18px; color: var(--muted); line-height: 1.7; }
.bullets li{ margin: 6px 0; }
.accordion{ display:flex; flex-direction:column; gap:10px; }
.acc{ border:1px solid var(--line); border-radius:16px; background: rgba(255,255,255,.04); overflow:hidden; }
.acc button{ width:100%; text-align:left; background: transparent; border:0; color: var(--text); padding:14px 14px; font-weight:900; display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; }
.acc .meta{ color: var(--muted); font-weight:700; font-size: 12px; margin-top:4px; }
.acc .panel{ display:none; padding: 0 14px 14px; }
.acc.open .panel{ display:block; }
.acc .panel ul{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.7; }
.footer{ padding: 26px 0 34px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.footer__inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }


/* Co-brand badge: Anonamed prominence */
.cobrand{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(198,40,40,.55);
  background: rgba(198,40,40,.16);
  color:#ffe3e3; font-weight:900; font-size:13px; white-space:nowrap;
}
.cobrand strong{ color:#ff9a9a; letter-spacing:.01em; }
.cobrand:hover{ text-decoration:none; border-color: rgba(198,40,40,.85); background: rgba(198,40,40,.22); }

/* Sortable table headers */
.water-table thead th[data-sort]{ cursor:pointer; user-select:none; }
.water-table thead th[data-sort]:hover{ background: rgba(255,255,255,.06); }
.water-table thead th .sort-ind{ font-weight:900; opacity:.8; }
.water-table thead th.sorted-asc .sort-ind{ opacity:1; }
.water-table thead th.sorted-desc .sort-ind{ opacity:1; }


/* Level pills */
.pill{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;padding:.15em .55em;border-radius:999px;border:1px solid rgba(0,0,0,.12);font-weight:700;font-size:.85rem;}
.pill.l1{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.35);} 
.pill.l2{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.40);} 
.pill.l3{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.40);} 
.pill.l4{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.40);} 
.legend{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.6rem;}

.card canvas{ width:100% !important; max-height:260px; }

.btn{display:inline-block;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:800;letter-spacing:.2px}
.btn--danger{background:#d32f2f;color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 24px rgba(211,47,47,.25)}
.btn--danger:hover{filter:brightness(1.06)}