:root {
  --navy: #003B71;
  --navy-dark: #002B52;
  --navy-tint: #EBF1F7;
  --bg: #F4F6F9;
  --card: #FFFFFF;
  --line: #E3E8EF;
  --text: #16232F;
  --muted: #5C6B7A;
  --green: #1E7A44;
  --green-tint: #E8F4ED;
  --red: #B3261E;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 35, 47, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 1.45rem; line-height: 1.3; margin: 0 0 6px; }
a { color: var(--navy); }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

.wordmark {
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--navy);
}

/* ---- buttons ---- */
.btn {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  padding: 9px 16px;
}
.btn:hover { border-color: var(--navy); color: var(--navy); }
.btn.primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.btn.primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); color: #fff; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn.quiet:hover { color: var(--navy); }
.btn:disabled { opacity: 0.55; cursor: default; }
.err { color: var(--red); font-size: 0.9rem; margin: 8px 0 0; }

/* ---- respondent ---- */
.respondent {
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}
.s-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 18px;
}
.head-tag { color: var(--muted); font-size: 0.85rem; }
.s-desc { color: var(--muted); margin: 0 0 14px; white-space: pre-line; }

.anon-note {
  background: var(--navy-tint);
  border: 1px solid #D5E1EC;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 14px 0 22px;
  font-size: 0.9rem;
}
.anon-note summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.anon-note ul { margin: 8px 0 4px; padding-left: 20px; }
.anon-note li { margin: 4px 0; }

fieldset.q {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 0 0 14px;
  padding: 16px 18px 14px;
}
fieldset.q legend {
  float: left;           /* keeps the legend inside the card flow */
  width: 100%;
  font-weight: 600;
  padding: 0 0 10px;
}
fieldset.q legend + * { clear: both; }
.opt-tag { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

label.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
}
label.choice:hover { background: var(--navy-tint); }
label.choice input { accent-color: var(--navy); width: 17px; height: 17px; flex: none; }

.scale { display: flex; gap: 8px; }
.scale-btn { position: relative; }
.scale-btn input { position: absolute; opacity: 0; inset: 0; }
.scale-btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  font-weight: 600;
  color: var(--muted);
}
.scale-btn:hover span { border-color: var(--navy); color: var(--navy); }
.scale-btn input:checked + span {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.scale-btn input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }
.scale-labels {
  display: flex;
  justify-content: space-between;
  max-width: 262px;
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: 6px;
}

textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  background: var(--card);
}
textarea:focus, input[type="text"]:focus, input[type="password"]:focus {
  outline: 2px solid var(--navy);
  outline-offset: -1px;
  border-color: var(--navy);
}

fieldset.q.q-missing { border-color: var(--red); }
.q-err { color: var(--red); font-size: 0.85rem; margin: 8px 0 0; }

.submit-row { margin-top: 20px; }
.submit-row .btn { padding: 11px 26px; }
.s-foot { color: var(--muted); font-size: 0.8rem; margin-top: 34px; }

.respondent.center { padding-top: 12vh; text-align: left; }
.msg-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px 28px;
}
.msg-card p { color: var(--muted); margin: 6px 0 0; }

/* ---- login ---- */
.login { display: flex; justify-content: center; padding-top: 14vh; }
.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 32px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-card h1 { margin: 0 0 8px; }
.login-card label { font-size: 0.85rem; color: var(--muted); }
.login-card input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

/* ---- admin ---- */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-title { color: var(--muted); }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }

.admin { max-width: 980px; margin: 0 auto; padding: 26px 20px 80px; }

.list-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 4px 2px 14px;
}
.list-head h1 { font-size: 1.15rem; margin: 0; }
.list-head .count { color: var(--muted); font-size: 0.9rem; }

.svy-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 13px 16px;
  margin-bottom: 10px;
  position: relative;
}
.svy-row:hover { border-color: #C9D4E0; }
.svy-main { min-width: 0; flex: 1; }
.svy-title {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.svy-title:hover { color: var(--navy); }
.svy-meta { color: var(--muted); font-size: 0.83rem; margin-top: 2px; }

.pill {
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 11px;
  flex: none;
}
.pill.draft { color: var(--muted); border: 1px solid var(--line); background: var(--bg); }
.pill.open { color: var(--green); background: var(--green-tint); }
.pill.closed { color: #46586B; background: #E8ECF1; }

.svy-resp { color: var(--muted); font-size: 0.9rem; flex: none; width: 96px; text-align: right; }

.row-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.row-actions .btn.small { padding: 5px 11px; font-size: 0.85rem; }
.hover-only { opacity: 0; transition: opacity 0.12s; }
.svy-row:hover .hover-only,
.svy-row:focus-within .hover-only { opacity: 1; }
@media (hover: none) { .hover-only { opacity: 1; } }

/* kebab menu */
.kebab-wrap { position: relative; }
.kebab {
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 1.1rem;
  line-height: 1;
}
.kebab:hover { background: var(--navy-tint); color: var(--navy); }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(22, 35, 47, 0.12);
  min-width: 168px;
  padding: 5px;
  z-index: 20;
}
.menu button {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text);
}
.menu button:hover { background: var(--navy-tint); }
.menu button.danger { color: var(--red); }
.menu button.danger:hover { background: #FBEDEC; }
.menu hr { border: none; border-top: 1px solid var(--line); margin: 5px 4px; }

.empty {
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 34px;
  text-align: center;
}

/* editor */
.ed-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 12px;
}
.ed-field { margin-bottom: 12px; }
.ed-field label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 4px; }
.ed-field input[type="text"], .ed-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: var(--card);
}
.q-card { position: relative; }
.q-card .q-tools {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 4px;
}
.q-tools button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 3px 8px;
}
.q-tools button:hover { border-color: var(--line); color: var(--navy); background: var(--bg); }
.q-head { display: flex; gap: 10px; margin-bottom: 10px; padding-right: 110px; }
.q-head select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--card);
  flex: none;
}
.q-head input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.q-opts { margin: 8px 0 4px; }
.q-opt { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.q-opt input { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; }
.q-opt .rm {
  border: none;
  background: none;
  color: var(--muted);
  padding: 4px 7px;
  border-radius: 6px;
}
.q-opt .rm:hover { color: var(--red); background: #FBEDEC; }
.scale-lab-row { display: flex; gap: 10px; }
.scale-lab-row input { flex: 1; border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; }
.q-foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.q-foot label { display: flex; align-items: center; gap: 6px; }
.q-foot input { accent-color: var(--navy); }

.add-dashed {
  width: 100%;
  border: 1px dashed #C9D4E0;
  background: transparent;
  color: var(--muted);
  border-radius: var(--radius);
  padding: 13px;
  margin-bottom: 16px;
}
.add-dashed:hover { color: var(--navy); border-color: var(--navy); background: var(--navy-tint); }
.ed-actions { display: flex; gap: 10px; align-items: center; }

/* results */
.res-head { margin-bottom: 18px; }
.res-head .back { font-size: 0.9rem; }
.res-total { color: var(--muted); margin-top: 2px; }
.warn {
  background: #FFF7E8;
  border: 1px solid #F0DFBB;
  color: #7A5B14;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.res-q {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 12px;
}
.res-q h3 { margin: 0 0 4px; font-size: 1rem; }
.res-sub { color: var(--muted); font-size: 0.83rem; margin: 0 0 12px; }
.bar-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.bar-label { width: 34%; min-width: 120px; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; background: var(--bg); border-radius: 5px; height: 18px; overflow: hidden; }
.bar-fill { background: var(--navy); height: 100%; border-radius: 5px 0 0 5px; min-width: 2px; }
.bar-fill.zero { background: transparent; }
.bar-count { width: 90px; flex: none; font-size: 0.85rem; color: var(--muted); text-align: right; }
.res-mean { color: var(--navy); font-weight: 600; font-size: 0.9rem; margin-top: 8px; }
.res-text {
  border-left: 3px solid var(--navy-tint);
  padding: 6px 12px;
  margin: 8px 0;
  color: var(--text);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.res-none { color: var(--muted); font-style: italic; }

/* share box */
.share-box {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--navy-tint);
  border: 1px solid #D5E1EC;
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
}
.share-box code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--navy-dark);
}
.share-box .btn.small { padding: 5px 11px; font-size: 0.85rem; flex: none; }

@media (max-width: 640px) {
  .svy-resp { display: none; }
  .bar-label { min-width: 90px; }
  .q-head { flex-direction: column; padding-right: 0; }
  .q-card .q-tools { position: static; margin-bottom: 8px; }
}