/* ============================================================================
   brand.css — shared design tokens + conventions (Branding guidelines).
   Canonical token set extracted from water-insider-armenia-tour-v3.html.
   Linked by every page (home, tests headers, calculator, admin) so the whole
   product feels unified. The home page keeps its own full inline stylesheet;
   these tokens are identical to it, and drive the re-skinned admin/calculator.
   ============================================================================ */
/* Load Poppins for every page that links brand.css (home + all /admin). */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
  --bg:#F2F8FB; --bg-alt:#EAF3F7; --bg-tint:#E1F1F5;
  --surface:#FFFFFF; --surface-soft:#F7FBFD;
  --border:rgba(13,27,42,.08); --border-strong:rgba(13,27,42,.16);
  --ink:#0D1B2A; --ink-2:#4A6076; --ink-3:#6E8093; --ink-4:#A7B4C0;
  --accent:#00BCD4; --accent-dark:#0096AB; --accent-tint:rgba(0,188,212,.10); --accent-tint-2:rgba(0,188,212,.20);
  --navy:#0D1B2A; --navy-soft:#24435A;
  --good:#2BB98A; --good-bg:#E1F5EE; --good-border:rgba(43,185,138,.35);
  --medium:#F5A83C; --medium-bg:#FDF0DB; --medium-border:rgba(245,168,60,.40);
  --bad:#EF6461; --bad-bg:#FCE7E6; --bad-border:rgba(239,100,97,.40);
  --untested:#A7B4C0; --untested-bg:#EEF3F6;
  --glass:rgba(255,255,255,.58); --glass-strong:rgba(255,255,255,.82); --glass-border-aqua:rgba(0,150,171,.30);
  --shadow-sm:0 2px 10px rgba(13,27,42,.05);
  --shadow-md:0 8px 30px rgba(13,27,42,.08);
  --shadow-lg:0 22px 56px rgba(0,150,171,.16);
}

/* ---- Typography helpers (Poppins loaded via the @import above) ---- */
.display{ font-family:'Poppins', sans-serif; }
.mono, .kicker{ font-family:'Poppins', sans-serif; }
.kicker{ text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--ink-3); font-weight:600; }

/* ---- Shared shell primitives (used by admin/tests headers) ---- */
.brand-body{
  margin:0; color:var(--ink);
  background:
    radial-gradient(circle at 18% -5%, rgba(0,188,212,.09), transparent 42%),
    var(--bg-alt);
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px;
  padding:12px 22px; background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.site-header .brand{ display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); text-decoration:none; }
.site-header .brand img{ height:30px; width:auto; }
.site-header .spacer{ flex:1; }

/* Admin top-bar tabs (shared across all /admin pages). */
.admin-tabs{ display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.admin-tab{
  font-family:inherit; font-weight:600; font-size:.86rem; text-decoration:none;
  color:var(--ink-2); padding:8px 14px; border-radius:999px;
  border:1px solid transparent; transition:background .15s, color .15s;
}
.admin-tab:hover{ background:var(--bg-tint); color:var(--navy); }
.admin-tab.active{ background:var(--accent-tint); color:var(--navy); }
.admin-who{ font-family:'JetBrains Mono', ui-monospace, monospace; font-size:.72rem; letter-spacing:.04em; color:var(--ink-3); }

/* Pills / buttons — pill radius, transparent nav, accent primary. */
.btn, .pill{
  font-family:inherit; font-weight:600; font-size:.9rem;
  border-radius:999px; border:1px solid var(--border-strong);
  padding:9px 18px; background:var(--surface); color:var(--ink-2);
  cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.btn:hover, .pill:hover{ border-color:var(--accent-dark); color:var(--navy); }
.btn.primary{ background:linear-gradient(120deg,#00A9C0,#14CBE0); border-color:transparent; color:#fff; box-shadow:0 4px 18px rgba(0,169,192,.28); }
.btn.primary:hover{ box-shadow:0 10px 28px rgba(0,169,192,.40); color:#fff; transform:translateY(-1px); }
.btn.danger{ background:var(--bad); border-color:var(--bad); color:#fff; }
.btn.danger:hover{ filter:brightness(.94); }
.btn.success{ background:var(--good); border-color:var(--good); color:#fff; }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.ghost.active{ background:var(--accent-tint); color:var(--navy); border-color:transparent; }
/* Disabled state — greyed and unclickable (overrides primary/danger/etc.). */
.btn:disabled, .btn.primary:disabled, .btn.danger:disabled, .btn.success:disabled{
  background:var(--bg-alt); border-color:var(--border); color:var(--ink-4);
  cursor:not-allowed; box-shadow:none; filter:none; pointer-events:none;
}

/* Verdict badges map to the good/medium/bad/untested tokens. */
.verdict-good{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-border); }
.verdict-medium{ background:var(--medium-bg); color:var(--medium); border:1px solid var(--medium-border); }
.verdict-bad{ background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-border); }
.verdict-untested{ background:var(--untested-bg); color:var(--ink-3); border:1px solid var(--border); }
.verdict-good,.verdict-medium,.verdict-bad,.verdict-untested{
  display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
  border-radius:999px; font-weight:700; font-size:.78rem; letter-spacing:.02em;
}

/* Back-link used on the test subpages. */
.back-home{ display:inline-flex; align-items:center; gap:6px; color:var(--ink-2); text-decoration:none; font-weight:600; font-size:.88rem; }
.back-home:hover{ color:var(--accent-dark); }