:root{
  --c-primary:#02334e; --c-secondary:#d68c2a;
  --bg:#fff; --text:#0b1d27; --muted:#6e7b83; --ok:#17663a; --warn:#a15900;
}
body{font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);margin:0}
.header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #eef3f6}
.header img{height:38px}
.safe-exit{margin-left:auto}
.btn{background:var(--c-primary);color:#fff;border:0;border-radius:10px;padding:12px 14px;cursor:pointer}
.badge{display:inline-block;background:#eef3f6;color:var(--c-primary);border-radius:999px;padding:4px 10px}
.convo{max-width:720px;margin:0 auto;padding:16px}
.bubble{background:#f6fbff;border:1px solid #e3eef6;border-radius:14px;padding:14px 16px;margin:12px 0}
.choice{display:block;margin:8px 0}
.footer{margin-top:40px;padding:24px 16px;border-top:1px solid #eef3f6;text-align:center}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #02334e;       /* primary background */
}

.header .logo {
  height: 44px;
}

.header .safe-exit {
  background: #d68c2a;       /* secondary colour */
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.header .safe-exit:hover {
  background: #b37420;       /* slightly darker gold for hover */
}

/* Header already styled earlier */

/* Cards and layout polish */
.convo { max-width: 760px; margin: 0 auto; padding: 24px 16px; }
.card { background: #ffffff; border: 1px solid #e7eef3; border-radius: 16px; box-shadow: 0 6px 14px rgba(2,51,78,0.06); padding: 18px 20px; }
.bubble { margin: 14px 0; }
.bubble h2 { margin: 0 0 10px; font-size: 1.6rem; line-height: 1.25; }
.bubble p { margin: 8px 0 0; color: var(--muted); }
.bubble .elig { color: #0b1d27; }

.choice { display: block; margin: 10px 0; }
input[type="text"], input[type="number"], textarea, select {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid #dbe6ee; outline: none;
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(2,51,78,0.1);
}

.btn-row { display:flex; gap:10px; margin-top: 12px; }
.btn { background: var(--c-primary); color: #fff; border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; font-weight: 600; }
.btn.secondary { background: #eef3f7; color: #0b1d27; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Progress bar */
.progress { margin: 8px 0 16px; }
.progress__label { font-size: .9rem; color: var(--muted); display:flex; justify-content:space-between; }
.progress__bar { height: 10px; background:#eef3f7; border-radius: 999px; overflow:hidden; }
.progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, #d68c2a, #ffd08a); transition: width .3s ease; }

/* End screen */
.endnote h3 { margin: 6px 0 8px; }
.endnote p { color: var(--muted); }

/* Big, animated Start button */
.btn-xl { font-size: 1.125rem; padding: 16px 22px; border-radius: 14px; }
.btn-animate { animation: pulse 1.6s ease-in-out infinite; transform-origin: center; }
.btn-animate:hover { animation-play-state: paused; transform: translateY(-1px); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(214,140,42,.35); transform: scale(1); }
  70%  { box-shadow: 0 0 0 14px rgba(214,140,42,0); transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(214,140,42,0); transform: scale(1); }
}

/* Buttons row used on end/explain screens */
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top: 12px; }
.btn.link { background: transparent; color: var(--c-primary); border: 1px solid #dbe6ee; }
.btn.warn { background: #c0392b; } /* optional red for exit */

/* Tidy inputs so they don’t overflow the card */
input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #dbe6ee;
  outline: none;
  box-sizing: border-box;          /* prevents overflow */
  background: #fff;
}

/* prettier focus */
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(2,51,78,0.08);
}

/* radio / checkbox labels don’t stretch full width */
.choice { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.choice input[type="radio"],
.choice input[type="checkbox"] { width: 18px; height: 18px; }

/* (optional) hide number spinners in Chrome */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }


/* Header layout */
.header { background:#02334e; }
.header-inner{
  max-width:1100px;
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{ height:44px; width:auto; }

/* The pill is fixed (global); keep it, but protect header space on mobile */
@media (max-width: 520px){
  /* create space so the fixed pill doesn't cover the logo */
  .header{ padding-top:56px; }

  /* slightly smaller logo on mobile */
  .logo{ height:36px; }

  /* tighten the pill so it fits neatly on phones */
  .safe-exit{
    font-size:14px;
    line-height:1.1;
    padding:10px 12px;
    border-radius:10px;
    right:10px; top:10px;   /* make sure it sits inside the screen edge */
  }

  /* optional: keep header content away from the pill's area */
  .header-inner{ padding-right:130px; }
}

/* --- Mobile-first readability tweaks --- */
@media (max-width: 520px){
  .convo .bubble.card { padding: 16px; border-radius: 14px; }
  .convo .bubble.card label { font-size: 18px; line-height: 1.35; }
  .convo .choice { display:flex; align-items:flex-start; gap:10px; margin:10px 0; }
  .convo .choice input[type="checkbox"],
  .convo .choice input[type="radio"] { width:22px; height:22px; margin-top:2px; }
  .convo .btn { padding:12px 18px; font-size:16px; border-radius:12px; }
  .progress__label { font-size:14px; }
}

/* Hide the big campaign banner while the survey is in progress */
body.survey-active .footer { display:none; }