*{box-sizing:border-box}
/* The instrument shows/hides layers via the hidden attribute; without this rule the
   display:grid on .overlay would override hidden and the overlay would sit on screen
   permanently. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- top bar ---------- */
.topbar{
  background:var(--accent); color:#fff; padding:12px 20px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  position:sticky; top:0; z-index:20; box-shadow:0 1px 6px rgba(0,0,0,.12);
}
.brand{display:flex; align-items:center; gap:11px}
.brand-mark{
  width:30px;height:30px;border-radius:7px;background:#fff;color:var(--accent);
  display:grid;place-items:center;font-weight:800;font-size:16px;
}
.brand-text{display:flex;flex-direction:column;line-height:1.2}
.brand-text strong{font-size:14px;letter-spacing:.06em}
.brand-text span{font-size:12px;opacity:.82}
.meta{display:flex;gap:14px;font-size:12px;opacity:.85;white-space:nowrap}

/* While a question is on screen the respondent sees the question first.  survey.js puts .answering on
   <body> for exactly as long as a question (or the pre-submit quality check) is up.  The project
   details (brand, study, respondent code, timer) and the progress line are hidden then.  When the
   author keeps the gamified feel on (body.gamified), a slim strip stays on top with the progress ring,
   insight points, rank and the voice and sound buttons, so the reward is visible while answering. */
body.answering .topbar,
body.answering .progress-wrap{display:none}
body.answering.gamified .topbar{display:flex;justify-content:center;padding:6px 20px}
body.answering.gamified .topbar .brand,
body.answering.gamified .topbar .meta{display:none}
/* the test-mode reminder sticks below the project bar - with that bar gone it moves to the top.
   It must not sit lower: the team bar above it is not sticky, so a lower offset would cover it */
body.answering.testmode::before{top:0}

/* ---------- progress ---------- */
.progress-wrap{padding:14px 20px 0;max-width:860px;margin:0 auto}
.progress-track{height:5px;background:#e2e9ee;border-radius:99px;overflow:hidden}
.progress-fill{height:100%;width:0;background:var(--accent-2);border-radius:99px;transition:width .25s ease}


/* ---------- layout ---------- */
main{max-width:860px;margin:0 auto;padding:16px 20px 90px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;box-shadow:0 1px 3px rgba(16,32,46,.05);
}
h1{font-size:23px;margin:0 0 12px;letter-spacing:-.01em}
h2{font-size:19px;margin:0 0 6px;letter-spacing:-.01em;line-height:1.35}
h3{font-size:15px;margin:0 0 10px;color:var(--accent)}
.section-tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:4px 9px;border-radius:5px;margin-bottom:14px;
}
.blurb{font-size:13.5px;color:var(--muted);background:#f8fafb;border-left:3px solid var(--line);
  padding:11px 14px;border-radius:0 6px 6px 0;margin:0 0 18px}
.help{font-size:13px;color:var(--muted);margin:-4px 0 16px}
.suffix{font-size:12.5px;color:var(--muted);margin:10px 0 0}

/* ---------- welcome ---------- */
.facts{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap}
.facts div{
  flex:1;min-width:110px;background:#f8fafb;border:1px solid var(--line);border-radius:8px;
  padding:13px;text-align:center;
}
.facts span{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.facts strong{font-size:20px;color:var(--accent)}
.notice{
  font-size:13px;background:#fff8e8;border:1px solid #f0dca8;border-radius:8px;
  padding:13px 15px;margin-bottom:20px;color:#5c4a12;
}

/* ---------- options ---------- */
.opts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.opt{
  display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border:1px solid var(--line);
  border-radius:8px;cursor:pointer;transition:border-color .12s,background .12s;
}
.opt:hover{border-color:#b9cddb;background:#fafcfd}
.opt input{margin-top:3px;accent-color:var(--accent-2);width:16px;height:16px;flex:none}
.opt.checked{border-color:var(--accent-2);background:var(--accent-soft)}
.opt label{cursor:pointer;flex:1}
.opt .code{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:16px}
.opt-multi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.other-input{
  width:100%;margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;
  font:inherit;display:none;
}
.other-input.show{display:block}

/* ---------- grids ---------- */
.grid{margin-top:12px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.grid-row{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:12px 14px;border-bottom:1px solid var(--line)}
.grid-row:last-child{border-bottom:none}
.grid-row:nth-child(even){background:#fafcfd}
.grid-row .rlabel{font-size:13.5px}
.scale{display:flex;gap:5px;align-items:center}
.scale button{
  width:34px;height:32px;border:1px solid var(--line);background:#fff;border-radius:6px;
  cursor:pointer;font-size:12.5px;color:var(--ink);transition:all .1s;
}
.scale button:hover{border-color:var(--accent-2)}
.scale button.on{background:var(--accent-2);border-color:var(--accent-2);color:#fff;font-weight:600}
.scale-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);
  padding:7px 14px;background:#f4f7f9;border-top:1px solid var(--line)}
/* rating scale: three anchor labels - low end, middle, high end */
.scale-ends.rs-ends{position:relative}
.rs-end-low{text-align:left;max-width:30%}
.rs-end-high{text-align:right;max-width:30%;margin-left:auto}
.rs-end-mid{position:absolute;left:50%;transform:translateX(-50%);text-align:center;max-width:36%}
.sem-left,.sem-right{font-size:11.5px;color:var(--muted);white-space:nowrap}

/* ---------- inputs ---------- */
input[type=number],input[type=text],textarea,select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;font:inherit;color:var(--ink);
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent-2);
  box-shadow:0 0 0 3px rgba(18,120,158,.13)}
textarea{min-height:96px;resize:vertical}
.num-row{display:flex;align-items:center;gap:10px;max-width:340px}
.num-row .pre,.num-row .suf{font-size:14px;color:var(--muted);white-space:nowrap}
input[type=range]{width:100%;accent-color:var(--accent-2)}
.slider-val{font-size:22px;font-weight:700;color:var(--accent);text-align:center;margin:6px 0 2px;
  font-variant-numeric:tabular-nums}
.slider-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}

/* ---------- sum to 100 ---------- */
.s100-row{display:grid;grid-template-columns:1fr 108px;gap:12px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.s100-row:last-child{border-bottom:none}
.s100-row input{text-align:right}
.s100-total{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  background:#f4f7f9;font-size:13.5px;border-top:1px solid var(--line)}
.s100-total strong{font-variant-numeric:tabular-nums;font-size:16px}
.s100-total.ok strong{color:var(--good)}
.s100-total.bad strong{color:var(--bad)}

/* ---------- rank ---------- */
.rank-help{font-size:12px;color:var(--muted);margin:8px 0 0}
.rank-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.rank-item{
  display:flex;align-items:center;gap:11px;padding:11px 13px;background:#fff;
  border:1px solid var(--line);border-radius:8px;cursor:grab;
  transition:border-color .14s,background .14s,box-shadow .14s;
}
.rank-item .rank-label{flex:1;min-width:0}
.rank-item .pos{
  width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:12px;font-weight:700;flex:none;
}
.rank-item.top .pos{background:var(--accent);color:#fff}
.rank-drag-handle{
  width:34px;height:34px;display:grid;place-items:center;flex:none;padding:0;
  border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);
  font:700 17px/1 sans-serif;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
}
.rank-drag-handle:hover{border-color:var(--accent-2);background:var(--accent-soft);color:var(--accent)}
.rank-drag-handle:focus-visible{outline:3px solid rgba(18,120,158,.28);outline-offset:2px}
.rank-drag-handle:active{cursor:grabbing}
.rank-item.dragging{opacity:.62;background:var(--accent-soft);border-color:var(--accent-2);box-shadow:0 5px 16px rgba(16,32,46,.12);cursor:grabbing}
.rank-list.drag-active .rank-item{transition:none}
.rank-item.drop-target{border-color:var(--accent-2)}
.rank-item.drop-before{box-shadow:inset 0 3px var(--accent-2)}
.rank-item.drop-after{box-shadow:inset 0 -3px var(--accent-2)}
.rank-item .arrows{display:flex;flex-direction:column;margin-left:auto;gap:2px}
.rank-item .arrows button{
  border:1px solid var(--line);background:#fff;border-radius:4px;width:28px;height:20px;
  cursor:pointer;font-size:9px;line-height:1;color:var(--muted);padding:0;
}
.rank-item .arrows button:hover{background:var(--accent-soft);color:var(--accent)}
.rank-item .arrows button:focus-visible{outline:3px solid rgba(18,120,158,.28);outline-offset:1px}
.rank-item .arrows button:disabled{opacity:.35;cursor:not-allowed}

/* ---------- conjoint ---------- */
.vignette{
  background:var(--accent-soft);border:1px solid #cfe2ec;border-radius:8px;padding:13px 15px;
  font-size:13.5px;margin-bottom:16px;
}
.vignette strong{color:var(--accent)}
.task-table{border:1px solid var(--line);border-radius:8px;overflow:hidden;width:100%;
  border-collapse:separate;border-spacing:0}
.task-table th,.task-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px;
  vertical-align:top}
.task-table thead th{background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;text-align:left}
.task-table tbody th{
  background:#f6f9fb;text-align:left;font-weight:600;color:var(--muted);font-size:12px;
  width:180px;white-space:normal;
}
.task-table tbody tr:last-child td,.task-table tbody tr:last-child th{border-bottom:none}
.task-table td.pick{cursor:pointer;transition:background .12s}
.task-table td.pick:hover{background:#f2f8fb}
.task-table td.pick.sel{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent-2)}
.pick-mark{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line);margin-bottom:7px;
}
td.pick.sel .pick-mark{border-color:var(--accent-2);background:var(--accent-2);
  box-shadow:inset 0 0 0 3px #fff}
.optout{
  margin-top:12px;border:1px dashed var(--line);border-radius:8px;padding:12px 14px;
  cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13.5px;transition:all .12s;
}
.optout:hover{border-color:var(--accent-2);background:#fafcfd}
.optout.sel{border-color:var(--accent-2);border-style:solid;background:var(--accent-soft)}
.task-count{font-size:12px;color:var(--muted);margin-bottom:10px}

/* ---------- buttons / nav ---------- */
.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);padding:11px 22px;border-radius:8px;
  font:inherit;font-size:14px;cursor:pointer;transition:all .12s;
}
.btn:hover{border-color:#b9cddb;background:#fafcfd}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:#093f57;border-color:#093f57}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{background:#eef2f5;color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px;gap:10px}
.err{
  color:var(--bad);font-size:13px;margin-top:12px;display:none;
  background:#fdf0ef;border:1px solid #f3cfcb;border-radius:7px;padding:10px 13px;
}
.err.show{display:block}

/* ---------- TPP panel ---------- */
.tpp-panel{
  position:fixed;right:16px;bottom:16px;width:min(400px,calc(100vw - 32px));z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px rgba(16,32,46,.16);
  overflow:hidden;
}
.tpp-toggle{
  width:100%;text-align:left;padding:12px 16px;background:var(--accent);color:#fff;border:none;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.tpp-body{padding:15px 16px;max-height:52vh;overflow:auto}
.tpp-body table{width:100%;border-collapse:collapse;font-size:12.5px}
.tpp-body th{text-align:left;color:var(--muted);font-weight:600;padding:6px 8px 6px 0;
  vertical-align:top;width:118px;border-bottom:1px solid var(--line)}
.tpp-body td{padding:6px 0;border-bottom:1px solid var(--line)}
.tpp-note{font-size:11.5px;color:var(--muted);margin:12px 0 0}

/* ---------- footer / done ---------- */
.foot{
  text-align:center;font-size:11.5px;color:var(--muted);padding:20px;
  border-top:1px solid var(--line);margin-top:20px;
}
.done-icon{
  width:56px;height:56px;border-radius:50%;background:var(--good);color:#fff;display:grid;
  place-items:center;font-size:26px;margin-bottom:16px;
}
.done-icon.stop{background:var(--muted)}
.summary{font-size:13px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.summary code{background:#f4f7f9;padding:2px 6px;border-radius:4px;font-size:12px}

@media (max-width:640px){
  .card{padding:20px 15px}
  .grid-row{grid-template-columns:1fr;gap:9px}
  .s100-row{grid-template-columns:1fr 88px}
  .task-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .task-table tbody th{width:auto;min-width:110px}
  .task-table td.pick,.task-table thead th{min-width:120px}
  .meta{display:none}
}

/* ---------- test mode ---------- */
body.testmode .topbar{background:var(--an-violet)}
body.testmode .brand-mark{color:var(--an-violet)}
body.testmode::before{
  content:"TEST MODE \2014 responses are stored separately and excluded from real-data exports";
  display:block;background:#f0e9f7;color:#5b2f8f;text-align:center;font-size:12px;
  font-weight:600;padding:7px 12px;border-bottom:1px solid #ddd0ee;
  position:sticky;top:54px;z-index:19;
}

/* ================= HUD / gamification ================= */
.hud{display:flex;align-items:center;gap:14px}
.hud-item{display:flex;align-items:center;gap:6px}
.ring{width:30px;height:30px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.4}
.ring-bg{stroke:rgba(255,255,255,.25)}
.ring-fg{stroke:#7fd4f0;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1)}
#ring-label{font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.9}
.hud-item.pts{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.hud-item.pts .star{color:#ffd166;font-size:15px}
.hud-item.pts.bump{animation:bump .5s cubic-bezier(.34,1.56,.64,1)}
.hud-item.pts{position:relative}
.pts-float{position:absolute;left:50%;top:100%;margin-top:1px;transform:translateX(-50%);
  font-size:12px;font-weight:800;color:#ffd166;white-space:nowrap;pointer-events:none;
  animation:pts-rise 1.4s ease-out forwards}
@keyframes pts-rise{0%{opacity:0;transform:translate(-50%,2px)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-16px)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.hud-btn{background:rgba(255,255,255,.14);border:none;color:#fff;width:30px;height:30px;
  border-radius:7px;cursor:pointer;font-size:14px;line-height:1}
.hud-btn:hover{background:rgba(255,255,255,.26)}
.hud-btn.off{opacity:.45}
/* phones: the study name steps aside so the gamified strip (ring, points, rank, mic, sound) fits */
@media (max-width:720px){.meta{display:none}.brand-text{display:none}}

/* ================= welcome hero + audio ================= */
.welcome-hero{text-align:center;padding:6px 0 4px}
.hero-glyph{width:64px;height:64px;margin:0 auto 14px}
.hero-glyph svg{width:100%;height:100%}
.welcome-hero h1{margin-bottom:8px}
.welcome-hero p{font-size:14.5px;color:var(--muted);max-width:520px;margin:0 auto}
.btn.big{padding:14px 30px;font-size:15px;width:100%}

/* welcome: audio + answer-mode choices. A disabled option (no speech recognition in this browser)
   stays visible and says why. */
.audio-choice{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:18px 0;background:#f8fafb}
.audio-choice legend{font-weight:800;padding:0 6px}
.audio-choice label{display:flex;gap:9px;align-items:flex-start;padding:8px;border-radius:8px;cursor:pointer}
.audio-choice label:hover{background:#e8f2f7}
.audio-choice label.is-off{opacity:.55;cursor:not-allowed}
.audio-choice label.is-off:hover{background:none}
.audio-choice input{margin-top:4px;accent-color:var(--accent-2)}
.audio-choice span,.audio-choice small{display:block}
.audio-choice small{color:var(--muted);margin-top:2px}

.audio-card{background:#f8fafb;border:1px solid var(--line);border-radius:10px;padding:13px;
  margin-bottom:18px}
.play-btn{display:flex;align-items:center;gap:13px;width:100%;background:none;border:none;
  cursor:pointer;text-align:left;font:inherit;color:var(--ink);padding:2px}
.play-ico{width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:15px;flex:none;transition:transform .15s}
.play-btn:hover .play-ico{transform:scale(1.07)}
.play-btn.playing .play-ico{background:var(--good)}
.play-txt{display:flex;flex-direction:column;gap:1px}
.play-txt strong{font-size:14px}
.play-txt span{font-size:12px;color:var(--muted)}
.play-wave{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:11px;padding-left:55px}
.play-wave i{width:4px;background:var(--accent-2);border-radius:2px;height:20%;
  animation:wave 1s ease-in-out infinite}
.play-wave i:nth-child(1){animation-delay:0s}   .play-wave i:nth-child(2){animation-delay:.12s}
.play-wave i:nth-child(3){animation-delay:.24s} .play-wave i:nth-child(4){animation-delay:.36s}
.play-wave i:nth-child(5){animation-delay:.48s} .play-wave i:nth-child(6){animation-delay:.6s}
.play-wave i:nth-child(7){animation-delay:.72s}
@keyframes wave{0%,100%{height:18%}50%{height:100%}}

/* ================= confetti ================= */
/* the between-section celebration overlay was removed - sections now run straight into each
   other.  Confetti is still thrown on the closing screen and on a rank-up. */
.confetti{position:fixed;width:9px;height:14px;top:-20px;z-index:56;pointer-events:none;
  animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.2}}

/* ================= comprehension check ================= */
.cc-banner{background:var(--accent-soft);border:1px solid #cfe2ec;border-radius:8px;
  padding:11px 14px;font-size:13px;margin-bottom:16px;color:var(--accent)}
.cc-feedback{border-radius:8px;padding:13px 15px;font-size:13.5px;margin-top:14px;display:none}
.cc-feedback.show{display:block}
.cc-feedback.ok{background:var(--good-soft);border:1px solid #c8e4d3;color:#14603a}
.cc-feedback.retry{background:var(--warn-soft);border:1px solid #ecd6a8;color:#8a5200}
.cc-feedback button{margin-top:10px}

/* ================= conjoint dwell gate ================= */
.dwell{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);
  margin-top:14px;padding:10px 13px;background:#f8fafb;border:1px solid var(--line);border-radius:8px}
.dwell.done{background:var(--good-soft);border-color:#c8e4d3;color:#14603a}
.dwell-ring{width:22px;height:22px;flex:none;transform:rotate(-90deg)}
.dwell-ring circle{fill:none;stroke-width:3}
.dwell-ring .bg{stroke:#e2e9ee}
.dwell-ring .fg{stroke:var(--accent-2);stroke-linecap:round;stroke-dasharray:56.5;
  stroke-dashoffset:56.5;transition:stroke-dashoffset .3s linear}
.dwell.done .dwell-ring .fg{stroke:var(--good)}

/* ================= conjoint as cards ================= */
.alt-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:11px;
  margin-top:6px}
.alt-card{border:2px solid var(--line);border-radius:11px;overflow:hidden;cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .15s;background:#fff;display:flex;
  flex-direction:column}
.alt-card:hover{border-color:#a8c6d6;transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,32,46,.09)}
.alt-card.sel{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(18,120,158,.16)}
.alt-head{background:#f6f9fb;padding:10px 13px;display:flex;align-items:center;gap:9px;
  border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--accent)}
.alt-card.sel .alt-head{background:var(--accent);color:#fff}
.alt-tick{width:19px;height:19px;border-radius:50%;border:2px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:10px}
.alt-card.sel .alt-tick{border-color:#fff;background:#fff;color:var(--accent)}
.alt-rows{padding:5px 0}
.alt-row{display:grid;grid-template-columns:16px 1fr;gap:9px;padding:7px 13px;
  border-bottom:1px solid #f2f5f7;font-size:12.5px;align-items:start}
.alt-row:last-child{border-bottom:none}
.alt-row .ico{font-size:13px;line-height:1.35;text-align:center;opacity:.85}
.alt-row .txt{line-height:1.4}
.alt-row .lbl{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:1px}
.optout-card{margin-top:11px;border:2px dashed var(--line);border-radius:11px;padding:13px 15px;
  cursor:pointer;display:flex;align-items:center;gap:11px;font-size:13.5px;transition:all .15s}
.optout-card:hover{border-color:var(--accent-2);background:#fafcfd}
.optout-card.sel{border-color:var(--accent-2);border-style:solid;background:var(--accent-soft)}

.cel-close{position:absolute;top:10px;right:10px;background:rgba(26,39,51,.08);border:none;
  color:var(--muted);width:30px;height:30px;border-radius:7px;font-size:17px;line-height:1;cursor:pointer}
.cel-close:hover{background:rgba(26,39,51,.16);color:var(--ink)}

/* ================= v2 UX: ambience, motion, gamification ================= */
body{background:linear-gradient(180deg,#f4f7f9,#edf3f8)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 42% at 88% -10%,rgba(127,212,240,.16),transparent 60%),
             radial-gradient(52% 36% at 8% 112%,rgba(11,79,108,.09),transparent 60%)}
.card{animation:cardIn .5s cubic-bezier(.16,1,.3,1) both}
@keyframes cardIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}

/* insight ranks + toasts */
.rank{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);
  padding:3px 10px;border-radius:999px;color:#ffd166;white-space:nowrap}
.toast{position:fixed;top:64px;left:50%;transform:translateX(-50%);background:var(--accent);
  color:#fff;padding:9px 20px;border-radius:999px;font-size:13px;font-weight:700;
  box-shadow:0 10px 30px rgba(11,79,108,.4);z-index:80;animation:toastIn 2.7s ease both}
@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-12px)}10%,85%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-10px)}}

/* listen / read-along / replay guide bar */
.guide{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 14px;padding:8px 10px;
  border-radius:10px;background:linear-gradient(90deg,#eaf5fb,#f6fbfe);border:1px solid #d3e9f5}
.g-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent-2);color:var(--accent);
  background:#fff;border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;cursor:pointer;
  transition:all .15s}
.g-btn:hover{background:var(--accent-soft)}
.g-btn.playing{background:var(--accent);color:#fff;border-color:var(--accent)}
.g-hint{font-size:11.5px;color:var(--muted)}
.g-ico{font-size:10px}

/* spectrum scale - replaces the plain 1-7 button row */
.spectrum{position:relative;padding:6px 12px 4px;user-select:none;touch-action:none;outline:none;min-width:200px}
.spectrum:focus-visible .sp-track{box-shadow:0 0 0 3px rgba(18,120,158,.35)}
.sp-track{position:relative;height:12px;border-radius:8px;background:#e3edf3;
  box-shadow:inset 0 1px 3px rgba(26,39,51,.14);cursor:pointer}
.sp-fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;width:0;
  background:linear-gradient(90deg,#7fd4f0,#12789e);transition:width .18s ease}
.sp-detent{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 1px rgba(26,39,51,.2);transform:translate(-50%,-50%);transition:all .2s}
.sp-detent.hit{background:#ffd166;box-shadow:0 0 0 2px rgba(255,209,102,.45)}
.sp-thumb{position:absolute;top:50%;left:50%;width:26px;height:26px;border-radius:50%;background:#fff;
  border:3px solid var(--accent-2);box-shadow:0 3px 10px rgba(11,79,108,.35);
  transform:translate(-50%,-50%);cursor:grab;transition:left .18s cubic-bezier(.2,1,.3,1);padding:0}
.sp-thumb:active{cursor:grabbing}
.sp-thumb.idle{border-style:dashed;border-color:#9db2c2;animation:idlePulse 1.6s ease-in-out infinite}
@keyframes idlePulse{0%,100%{box-shadow:0 0 0 0 rgba(18,120,158,.35)}50%{box-shadow:0 0 0 9px rgba(18,120,158,0)}}
.sp-bubble{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:var(--accent);
  color:#fff;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:10px;white-space:nowrap;
  transition:left .18s cubic-bezier(.2,1,.3,1);pointer-events:none}
.sp-bubble:after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--accent)}
.sp-bubble.pop{animation:bump .3s ease}

/* continuous sliders, restyled to match the spectrum */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:8px;
  background:linear-gradient(90deg,#7fd4f0,#12789e);outline:none;border:none;padding:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;
  border-radius:50%;background:#fff;border:3px solid var(--accent-2);
  box-shadow:0 3px 10px rgba(11,79,108,.35);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;
  border:3px solid var(--accent-2);box-shadow:0 3px 10px rgba(11,79,108,.35);cursor:grab}

/* ================= v3: coach mascot, verbatim quality, voice, pattern nudge ===== */
.coach{position:fixed;left:16px;bottom:16px;z-index:70;display:flex;gap:11px;align-items:center;
  max-width:340px;background:#fff;border:1.5px solid var(--accent-2);border-radius:14px;
  padding:10px 14px;box-shadow:0 14px 40px rgba(11,79,108,.28);
  transform:translateY(140%);opacity:0;transition:all .5s cubic-bezier(.16,1,.3,1)}
.coach.show{transform:none;opacity:1}
.coach.warn{border-color:var(--warn)}
.coach.good{border-color:var(--good)}
.coach-face svg{width:36px;height:36px;display:block;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.coach-msg{font-size:12.5px;color:var(--ink);line-height:1.45}
.coach-msg a{color:var(--accent);font-weight:800;text-decoration:underline}
body.voice-on .coach{bottom:76px;z-index:80}

.straightline-flag-banner{
  margin-top:12px;
  padding:11px 14px;
  border-radius:10px;
  background:linear-gradient(135deg,#fff8eb 0%,#fff1d6 100%);
  border:1.5px solid #e5a93b;
  box-shadow:0 6px 18px rgba(178,106,0,.14);
  color:#5c3700;
  animation:capIn .28s ease;
}
.straightline-flag-banner .sl-flag-top{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:5px;
}
.straightline-flag-banner .sl-flag-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:#b25000;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
}
.straightline-flag-banner .sl-flag-code{
  background:rgba(178,80,0,.12);
  color:#7a3300;
  border:1px solid rgba(178,80,0,.28);
  border-radius:6px;
  padding:2px 7px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px;
  font-weight:700;
}
.straightline-flag-banner .sl-flag-sigma{
  font-size:11.5px;
  font-weight:700;
  color:#8a4200;
}
.straightline-flag-banner .sl-flag-msg{
  font-size:12.5px;
  line-height:1.45;
  color:#5c3700;
}
.grid.is-straightlined .grid-row:not(.grid-head),
.grid.is-straightlined .cg-row:not(.cg-head){
  border-left:3px solid #e5a93b;
  padding-left:8px;
}

.oq-chip{display:none;margin-top:8px;font-size:12px;font-weight:600;border-radius:8px;padding:7px 11px}
.oq-chip.warn{display:block;background:#fff4e2;color:#b26a00;border:1px solid #ecd6a8;animation:capIn .3s ease}
.oq-chip.ok{display:block;background:#eefaf3;color:#1a7f4b;border:1px solid #bfe6d2;animation:capIn .3s ease}

.rec-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.rec-btn.recording{background:var(--bad);border-color:var(--bad);color:#fff;
  animation:recPulse 1.2s ease-in-out infinite}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.4)}50%{box-shadow:0 0 0 9px rgba(179,38,30,0)}}
.rec-play{height:36px;max-width:230px}

.grid.ripple .grid-row{animation:rowFlash 1.2s ease both}
.grid.ripple .grid-row:nth-child(odd){animation-delay:.12s}
.grid.ripple .grid-row:nth-child(3n){animation-delay:.26s}
@keyframes rowFlash{0%{background:rgba(255,209,102,0)}30%{background:rgba(255,209,102,.35)}
  100%{background:transparent}}

.alt-card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.alt-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,79,108,.16)}
.opt{transition:transform .15s ease,background .15s ease}
.opt:hover{transform:translateX(3px)}

/* ================= v4 instruments: emoji grid, heat map, MaxDiff ================= */

.egrid{display:flex;flex-direction:column;gap:8px}
.egrid-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.egrid-row .rlabel{flex:1 1 180px}
.faces{display:flex;gap:6px}
.face{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:#fff;
  font-size:22px;cursor:pointer;transition:all .15s;display:grid;place-items:center}
.face:hover{transform:scale(1.12);border-color:var(--accent-2)}
.face.on{border-color:var(--accent-2);background:var(--accent-soft);transform:scale(1.18);
  box-shadow:0 4px 14px rgba(18,120,158,.3)}
.face.pop{animation:bump .3s ease}

.hmap{display:flex;flex-direction:column;gap:6px}
.hmap-head,.hmap-row{display:grid;grid-template-columns:minmax(140px,1.4fr) repeat(3,minmax(70px,1fr));
  gap:6px;align-items:center}
.hmap-head span{font-size:11px;font-weight:800;color:var(--muted);text-align:center}
.hmap-head span:first-child{text-align:left}
.hmap-row .rlabel{font-size:12.5px}
.hcell{height:40px;border-radius:9px;border:1px solid var(--line);cursor:pointer;font-weight:800;
  font-size:14px;color:#fff;transition:all .18s;padding:0}
.hcell.h0{background:#eef3f6;color:transparent}
.hcell.h0:hover{background:#e2ebf1}
.hcell.h1{background:#ffd166;color:#6b4c00}
.hcell.h2{background:#e09b2d;color:#fff}
.hcell.h3{background:#b3261e;box-shadow:0 0 14px rgba(179,38,30,.5)}
.hcell.ping{animation:bump .3s ease}
.hmap-legend{font-size:11px;color:var(--muted);margin-top:4px}

.mdx{display:flex;flex-direction:column;gap:10px}
.mdx-dots{display:flex;gap:7px;justify-content:center}
.mdx-dot{width:9px;height:9px;border-radius:50%;background:#cfdce6;transition:all .25s}
.mdx-dot.done{background:var(--good)}
.mdx-dot.cur{background:var(--accent-2);transform:scale(1.4)}
.mdx-list{display:flex;flex-direction:column;gap:8px;animation:cardIn .4s ease both}
.mdx-item{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;padding:10px 12px;transition:all .2s;flex-wrap:wrap}
.mdx-item.is-best{border-color:#e09b2d;background:#fff9ec}
.mdx-item.is-worst{border-color:#9db2c2;background:#f4f7f9}
.mdx-label{flex:1 1 160px;font-weight:700;font-size:13.5px}
.mdx-pick{border-radius:999px;border:1.5px solid var(--line);background:#fff;padding:6px 13px;
  font-size:12px;font-weight:800;cursor:pointer;transition:all .15s}
.mdx-pick.best{color:#b26a00}
.mdx-pick.worst{color:#5f7284}
.mdx-pick.best.on{background:#e09b2d;border-color:#e09b2d;color:#fff}
.mdx-pick.worst.on{background:#5f7284;border-color:#5f7284;color:#fff}
.mdx-pick:hover{transform:scale(1.06)}

/* Slim strip shown above the survey in test mode only (research-team view) */
.teambar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--an-ink);color:#fff;padding:6px 22px;font-size:12.5px}
.teambar-note{opacity:.9}
.teambar .appnav{background:rgba(255,255,255,.1)}

/* ---------- rich question text, media, option layouts ---------- */
h2.stem .qnum{color:var(--muted);font-weight:600}
h2.stem ul,h2.stem ol,.help ul,.help ol{margin:8px 0 4px;padding-left:22px;font-size:15px;font-weight:500}
h2.stem li,.help li{margin:2px 0}
h2.stem p,.help p{margin:0 0 6px}
h2.stem mark,.help mark,.opt mark{padding:0 3px;border-radius:3px}
/* tables an author inserts with the rich-text toolbar */
h2.stem table,.help table{border-collapse:collapse;margin:8px 0;font-size:13.5px;font-weight:500}
h2.stem table td,h2.stem table th,.help table td,.help table th{border:1px solid var(--line);
  padding:5px 10px;text-align:left}
.qmedia{margin:6px 0 16px}
.qmedia img,.qmedia video{max-width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.qmedia-center img,.qmedia-center video{margin:0 auto}
.qmedia-right img,.qmedia-right video{margin-left:auto}
.qmedia-cap{font-size:12.5px;color:var(--muted);margin-top:6px}
.opt-inline{flex-direction:row;flex-wrap:wrap}
.opt-inline .opt{flex:0 1 auto}
.opt-excl{border-style:dashed}
.opt-excl.checked{border-style:solid}
.opt-img{display:block;max-width:220px;max-height:140px;margin-top:6px;border-radius:6px;border:1px solid var(--line)}

/* ================= AI-written answer check + final proofreading pass ================= */
.oq-chip.ai{display:block;background:#fdecea;color:#8f1d17;border:1px solid #f0c2bd;
  animation:capIn .3s ease}
.oq-chip strong{font-weight:800}
.ai-score{font-variant-numeric:tabular-nums;opacity:.85;font-weight:800}
.ai-why{font-weight:500;opacity:.9}
.ai-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.ai-actions:empty{display:none}
.g-btn.ghost{border-color:var(--line);color:var(--muted);background:#fff}
.g-btn:disabled{opacity:.6;cursor:default}
.ai-note{margin-top:12px;padding:10px 12px;border-radius:8px;font-size:12.5px;
  background:#fff4e2;border:1px solid #ecd6a8;color:#8a5300}

.proof-card{max-width:760px}
.proof-list{margin-top:6px}
.proof-note{font-weight:700;margin:10px 0 4px}
.proof-row{border:1px solid #f0c2bd;background:#fffdfc;border-radius:10px;padding:12px 13px;
  margin:10px 0;animation:capIn .25s ease}
.proof-head{font-size:13.5px;font-weight:600;margin-bottom:7px}
.proof-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pr-chip{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);border:1px solid #cfe3ec}
.pr-chip.warn{background:#fff4e2;color:#b26a00;border-color:#ecd6a8}
.proof-text{width:100%;min-height:96px;font:inherit;font-size:14px;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;resize:vertical}
.proof-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.done-icon.note{background:var(--accent-soft);color:var(--accent)}

/* globalisation + new question types */
.lang-pick{display:flex;align-items:center;gap:10px;margin:14px 0 4px;justify-content:center}
.lang-pick-ic{color:var(--accent);font-size:18px}
.lang-pick select{padding:8px 12px;border-radius:10px;border:1px solid var(--line);font:inherit;background:#fff}
.nummatrix{display:flex;flex-direction:column;gap:10px}
.nm-row{display:flex;align-items:center;gap:12px}
.nm-label{flex:1}
.nm-row input{width:130px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font:inherit}
.delta{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end}
.delta-cell{display:flex;flex-direction:column;gap:5px}
.delta-cell label{font-size:12.5px;color:var(--muted);font-weight:600}
.delta-cell input{width:130px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit}
.delta-out{font-size:22px;font-weight:800;color:var(--accent);padding:4px 2px}
.concept-html{background:#f7fafc;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.textblock p{margin:0 0 10px}
.loopq{display:flex;flex-direction:column;gap:12px}
.loop-row{display:flex;flex-direction:column;gap:5px}
.loop-label{font-weight:600}
.loop-row input,.loop-row textarea{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;width:100%;box-sizing:border-box}
.i18n-chip{display:inline-flex;align-items:center;gap:5px;margin:0 0 8px;border:1px solid var(--line);
  background:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:700;
  color:var(--accent);cursor:pointer}
.i18n-chip:hover{border-color:var(--accent)}

/* ---------- grids: title, column captions, N/A, comments, heat map, emoji grid ---------- */
.grid-title{font-size:14px;font-weight:700;margin:0 0 8px}
.grid-head{background:#f4f7f9;border-bottom:1px solid var(--line)}
.grid-head .grid-rowname,.grid-colname{font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.grid-colname{text-align:center;margin-bottom:2px}
.grid-cells{display:flex;flex-direction:column;gap:2px;min-width:0}
.grid-plabels{display:flex;justify-content:space-between;gap:6px}
.grid-plabel{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.25;max-width:110px;
  display:flex;flex-direction:column;align-items:center;gap:2px}
/* choice grid: rows x columns, one or several picks per row */
.choice-grid{overflow-x:auto}
.cg-row{display:grid;grid-template-columns:var(--cg-tmpl);gap:8px;align-items:center;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.cg-row:last-child{border-bottom:none}
.cg-row:nth-child(even){background:#fafcfd}
.cg-head{background:#f4f7f9;border-bottom:1px solid var(--line)}
.cg-head .cg-col{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);text-align:center}
.cg-corner{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cg-rlabel{font-size:13.5px}
.cg-cell{display:flex;justify-content:center;align-items:center;margin:0;cursor:pointer}
.cg-cell input{width:19px;height:19px;accent-color:var(--accent-2);cursor:pointer}
.cg-na .na-cell{justify-content:center}
.grid-plabel-na{font-weight:700;color:var(--ink)}
.grid-nacell{display:inline-flex;align-items:center;margin-left:10px}
.na-cell{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  color:var(--muted);white-space:nowrap;cursor:pointer;user-select:none}
.na-cell input{width:15px;height:15px;accent-color:#8c1d16}
.na-cell:hover{color:var(--ink)}
.sp-labels{position:relative;height:15px;margin:1px 12px 0}
.sp-label{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;font-size:10px;color:var(--muted);white-space:nowrap}
.qmedia-sm{max-width:150px;margin-top:4px}
.qmedia-xs{max-width:64px;margin:2px 0 0}
.qmedia-sm img,.qmedia-xs img{width:100%;border-radius:6px}
.qmedia-sm audio,.qmedia-xs audio{width:100%}
.grid-cmtrow{border-bottom:1px solid var(--line);background:#fcfdfe;padding:8px 14px}
.cmt-box{width:100%;font:inherit;font-size:13px;padding:8px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;resize:vertical}
.cmt-box.req{border-color:#d9857c;background:#fffaf9}
.q-comment{margin-top:12px}
.q-comment-lbl{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px}
/* emoji grid */
.emoji-cells{flex-direction:row;gap:8px;flex-wrap:wrap}
.emoji-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;
  border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;min-width:46px}
.emoji-btn:hover{border-color:var(--accent2);background:#f7fbfd}
.emoji-face{font-size:22px;line-height:1.1}
.emoji-btn.on{border-color:#12789e;background:#eaf6fb;box-shadow:0 0 0 2px rgba(18,120,158,.18)}
/* heat map */
.heatmap{margin-top:12px}
.hm-table{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.hm-tr{display:grid;grid-template-columns:var(--hm-cols);align-items:stretch}
.hm-tr+.hm-tr{border-top:1px solid var(--line)}
.hm-head{background:#f4f7f9;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.hm-th{padding:9px 10px;display:flex;flex-direction:column;justify-content:center;text-align:center;
  font-size:12px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.hm-corner,.hm-rowlabel{align-items:flex-start;text-align:left;background:#fafcfd}
.hm-cell{position:relative;border:1px solid var(--line);background:#fff;cursor:pointer;
  min-height:46px;display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
.hm-cell:hover{border-color:var(--accent2)}
.hm-cell[data-lvl="1"]{background:#e8f4fa}
.hm-cell[data-lvl="2"]{background:#bfe3f2}
.hm-cell[data-lvl="3"]{background:#7fc4e0;border-color:#5aa9c9}
.hm-mark{font-size:12px;font-weight:800;color:#0d5a78}
.hm-legend{font-size:11.5px;color:var(--muted);margin-top:7px}
.hm-cmtrow{border-top:1px solid var(--line);padding:6px 10px;background:#fcfdfe}
/* numeric matrix with columns */
.nm-table{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:4px}
.nm-tr{display:grid;grid-template-columns:var(--nm-cols);align-items:center}
.nm-tr+.nm-tr{border-top:1px solid var(--line)}
.nm-head{background:#f4f7f9;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.nm-th{padding:9px 10px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);text-align:center}
.nm-corner,.nm-rowlabel{text-align:left;background:#fafcfd}
.nm-td{padding:8px 10px}
.nm-td-na,.nm-th-na{text-align:center}
.nm-input{width:100%;padding:8px 9px;border:1px solid var(--line);border-radius:8px;font:inherit}
.nm-cmtrow{border-top:1px solid var(--line);padding:6px 10px;background:#fcfdfe}
/* Text Grid – rows left once, columns across: Column 1/2 headers, Row 1/2 labels left */
.text-grid{margin-top:10px}
.tg-table{display:flex;flex-direction:column;gap:8px}
.tg-tr{display:grid;grid-template-columns:var(--tg-cols);gap:12px;align-items:start}
.tg-th{padding:6px 8px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ink)}
.tg-corner{background:transparent}
.tg-th.tg-col-head{justify-content:center;text-align:center;background:#f4f6f8;border-radius:8px;padding:10px 8px}
.tg-th.tg-col-head img{max-width:50px;max-height:36px;border-radius:6px;border:1px solid var(--line);object-fit:cover}
.tg-th.tg-rowlabel{justify-content:flex-start;background:transparent;padding:14px 8px 0 0;font-size:13px;font-weight:600;text-align:left}
.tg-td{padding:0;display:flex;flex-direction:column;gap:6px;background:#f4f6f8;border-radius:10px;padding:10px}
.tg-td:nth-child(even){background:#fff;border:1px solid var(--line)}
.tg-td textarea.tg-input{width:100%;min-height:40px;resize:vertical;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;font:inherit;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tg-td textarea.tg-input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(18,120,158,.08)}
.tg-voice-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:var(--accent);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s}
.tg-voice-btn:hover{background:var(--soft);border-color:var(--accent2)}
.tg-voice-btn.recording{background:#b3261e;color:#fff;border-color:#b3261e;animation:recPulse 1.2s ease-in-out infinite}
.tg-voice-btn .g-ico{font-size:11px}

/* ============ gamified touches: bull's-eyes, voice mode, target HUD ============ */
.opt{position:relative}
/* The "hit": two target rings ripple out of the answer the moment it lands. */
.opt.hit::before,.opt.hit::after{
  content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;
  border-radius:50%;border:2px solid #12789e;pointer-events:none;
  animation:hit-ring .7s ease-out forwards;
}
.opt.hit::after{animation-delay:.18s;border-color:#ffd166}
@keyframes hit-ring{
  0%{opacity:.95;transform:scale(.4)}
  70%{opacity:.55}
  100%{opacity:0;transform:scale(2.6)}
}
.opt.hit{animation:hit-pop .35s ease-out}
@keyframes hit-pop{0%{transform:scale(1)}40%{transform:scale(1.015) translateX(3px)}100%{transform:scale(1)}}
.cg-cell{position:relative}
.cg-cell.hit::before{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;border:2px solid #12789e;pointer-events:none;animation:hit-ring .7s ease-out forwards;
}

/* HUD progress ring reads as a little target: outer guide, mid ring, solid core. */
.ring-mid{stroke:rgba(255,255,255,.4);stroke-dasharray:2 3}
.ring-core{fill:#ffd166;stroke:none}

/* Mic toggle in the HUD (hidden by default; revealed where speech recognition exists). */
#voice-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);color:inherit;display:grid;place-items:center;
  cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;
}
#voice-btn:hover{background:rgba(255,255,255,.18)}
#voice-btn.on{background:#ffd166;color:#0b4f6c;border-color:#ffd166;box-shadow:0 0 0 4px rgba(255,209,102,.25)}
#voice-btn svg{width:16px;height:16px}

/* Floating voice bar: pulsing mic, a live hint, and what was heard. */
.voice-bar{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;
  display:flex;align-items:center;gap:10px;max-width:92vw;
  background:#0b4f6c;color:#fff;border-radius:999px;padding:9px 18px 9px 12px;
  box-shadow:0 8px 28px rgba(11,79,108,.35);font-size:13.5px;
}
.vb-mic{position:relative;width:30px;height:30px;border-radius:50%;background:#12789e;display:grid;place-items:center;flex:0 0 auto}
.vb-mic::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(127,212,240,.7);
  animation:mic-pulse 1.6s ease-out infinite;
}
.vb-mic::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid rgba(127,212,240,.45);
  animation:mic-pulse 1.6s .5s ease-out infinite;
}
@keyframes mic-pulse{0%{opacity:.9;transform:scale(.75)}100%{opacity:0;transform:scale(1.5)}}
.vb-mic i{width:8px;height:14px;border-radius:4px;background:#fff}
.vb-live{opacity:.9;white-space:nowrap}
.vb-heard{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw;color:#7fd4f0}
.vb-stop{flex:0 0 auto;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  border-radius:999px;padding:3px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.vb-stop:hover{background:rgba(255,255,255,.14)}

/* Completion screen: arrow in the bull's-eye. */
.done-icon.done-target{background:#fff;border:none;width:76px;height:76px}
.done-icon.done-target svg{width:100%;height:100%;display:block}

/* Voice control badges are distinct from answer values and option codes. */
.voice-control-tag { display:none !important; } /* hidden — numbers on Answer by Voice were confusing; voice still works via row names/numbers */
.voice-bar { flex-wrap:wrap; max-width:min(900px, 94vw); }
.voice-bar .vb-live { flex:1; min-width:220px; white-space:normal; }
body.voice-on { padding-bottom:130px; }

.study-privacy{font-size:13px;line-height:1.65;white-space:pre-line;margin:18px 0}.survey-consent{display:flex;align-items:flex-start;gap:10px}.survey-consent input{flex:0 0 auto;margin-top:6px}#survey-save-status{text-align:center;font-size:12px;color:#52675d;min-height:20px;padding:4px 12px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #218c77;outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep wide heatmaps reachable in surveys and the narrow Studio preview. */
.hm-scroll{max-width:100%;overflow-x:auto;padding:3px;overscroll-behavior-x:contain}
.hm-cell:focus-visible,.hm-scroll:focus-visible{outline:3px solid #126688;outline-offset:-3px}
.hm-cmtrow>*{grid-column:1/-1;min-width:0;width:100%}

/* Voice active row indicator and animations for rating scale & multi-field questions */
body.voice-on .voice-active-row {
  background: rgba(18, 120, 158, 0.08) !important;
  border-left: 4px solid var(--accent, #12789e) !important;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(18, 120, 158, 0.25), 0 4px 12px rgba(18, 120, 158, 0.12);
  transition: all 0.22s ease;
  position: relative;
}
.voice-row-mic {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 13px;
  animation: voiceMicPulse 1.2s infinite ease-in-out;
  filter: drop-shadow(0 0 2px rgba(18, 120, 158, 0.6));
}
@keyframes voiceMicPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 5px #12789e); }
}
.row-rated-pop {
  animation: rowPopAnim 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes rowPopAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); background: rgba(39, 174, 96, 0.15) !important; }
  100% { transform: scale(1); }
}
.voice-row-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  transition: transform 0.2s cubic-bezier(0.2, 1, 0.3, 1);
}
.voice-row-status.pop {
  animation: bump 0.3s ease;
}

/* Gauge Meter Question Type Styles */
.single-gauge-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  margin: 10px auto;
  max-width: 420px;
}
.gauge-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  outline: none;
  touch-action: none;
  user-select: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.gauge-box:focus-visible {
  box-shadow: 0 0 0 3px rgba(18, 120, 158, 0.35);
  background: rgba(18, 120, 158, 0.04);
}
.gauge-svg {
  width: 260px;
  height: 155px;
  overflow: visible;
  filter: drop-shadow(0 4px 10px rgba(15, 43, 72, 0.08));
}
/* The needle, tip, hub and zone bands are positioned with direct SVG coordinates in
   survey.js.  Never rotate the needle from CSS here: a transform-origin on an SVG group
   is applied *in addition to* a rotate() attribute transform, which is what used to swing
   the needle around a point outside the dial. */
.gauge-needle-poly {
  fill: #0f2b48;
  stroke: #0f2b48;
  stroke-width: 1;
  stroke-linejoin: round;
  pointer-events: none;
}
.gauge-tip {
  transition: fill 0.2s ease;
  pointer-events: none;
}
.gauge-hub,
.gauge-hub-dot {
  pointer-events: none;
}
.gauge-zone,
.gauge-track,
.gauge-target,
.gauge-target-halo {
  pointer-events: none;
}
.gauge-readout {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-top: -12px;
}
.gauge-val {
  font-size: 28px;
  font-weight: 800;
  color: #0f2b48;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gauge-unit {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
}
.gauge-zone-pill {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.gauge-zone-pill.low { background: #fee2e2; color: #b91c1c; }
.gauge-zone-pill.mid { background: #fef3c7; color: #b45309; }
.gauge-zone-pill.high { background: #d1fae5; color: #047857; }
.gauge-ends {
  display: flex;
  justify-content: space-between;
  width: 240px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}
.gauge-ends span {
  max-width: 75px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gauge-ends .g-mid { text-align: center; }
.gauge-ends .g-max { text-align: right; }

/* ---------- Anaking Global Brand Lockup for Survey Runtime ---------- */
/* Rating voice hint — shows what to say for the active row */
.voice-rating-hint{display:none;font-size:12px;color:#0b4f6c;background:#e8f6fb;border:1px solid #b8e0ef;border-radius:8px;padding:6px 10px;margin:6px 0;text-align:center}
body.voice-on .voice-rating-hint{display:block}
.voice-rating-hint b{font-weight:800}

/* heatmap image click map */
.heatmap-img{ margin-top:8px }
.hm-title{ font-size:13px; font-weight:800; color:var(--muted); margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em }
.hm-desc{ font-size:14px; line-height:1.6; text-align:center; color:var(--ink); margin:6px 0 10px; max-width:720px; margin-left:auto; margin-right:auto }
.hm-image-title{ font-size:14px; font-weight:700; color:var(--ink); margin:8px 0 4px }
.hm-instructions{ font-size:12.5px; color:var(--muted); font-style:italic; margin:4px 0 8px }
.hm-reactions-picker{ margin:8px 0 }
.hm-picker-label{ font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px }
.hm-pills{ display:flex; gap:8px; flex-wrap:wrap }
.hm-pill{ border:1.5px solid var(--line); background:#fff; border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; cursor:pointer }
.hm-pill:hover{ border-color:var(--accent2); background:var(--soft) }
.hm-pill.on{ background:var(--accent); color:#fff; border-color:var(--accent) }
.hm-canvas{ position:relative; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#f8fafc; max-width:760px; margin:10px auto }
.hm-image{ width:100%; display:block; max-height:520px; object-fit:contain; background:#fff }
.hm-overlay{ position:absolute; inset:0; pointer-events:none }
.hm-dot{ position:absolute; width:28px; height:28px; border-radius:50%; background:#e53935; color:#fff; border:2px solid #fff; box-shadow:0 2px 6px rgba(0,0,0,.3); font-size:10px; font-weight:800; display:grid; place-items:center; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer }
.hm-dot:hover{ background:#c62828; transform:translate(-50%,-50%) scale(1.1) }
.hm-counter{ font-size:12px; color:var(--muted); margin-top:6px; text-align:center; font-weight:600 }
.hm-counter.warn{ color:var(--warn) }
.hm-counter.bad{ color:var(--bad) }
.hm-counter.ok{ color:var(--good) }
.hm-legend{ font-size:11.5px; color:var(--muted); margin-top:8px; text-align:center }

.hm-canvas{ min-height:220px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="13" fill="%2390a0b0">Loading image…</text></svg>') center no-repeat; }
.hm-canvas.hm-error{ background:#fdf0ef; border-color:#f1d3d0; }
.hm-canvas.hm-error::after{ content:"Image failed to load"; position:absolute; inset:auto 0 30% 0; text-align:center; font-size:12px; color:var(--bad); }

/* Loop */
.loop-ctx{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#1a9a8a; background:#e6f3f0; border:1px solid #c8e0db; border-radius:7px; padding:6px 10px; margin-bottom:10px }
.loopq{ display:flex; flex-direction:column; gap:12px }
.loop-row{ display:flex; flex-direction:column; gap:5px; padding:12px; border:1px solid var(--line); border-radius:8px; background:#fff }
.loop-label{ font-weight:700; font-size:13px; color:var(--ink) }
.loop-row input, .loop-row textarea{ padding:9px 11px; border:1px solid var(--line); border-radius:8px; font:inherit; width:100%; box-sizing:border-box }
.loop-row input:focus, .loop-row textarea:focus{ border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(18,120,158,.13) }
/* Concept Test respondent */
.concept-ctx{ background:#f0f4f7; border:1px solid #d5e3ec; border-radius:10px; padding:14px; margin-bottom:14px }
.concept-exec{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:6px }
.concept-header{ display:flex; flex-direction:column; gap:8px }
.concept-label{ font-size:13px; font-weight:800; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 10px; width:max-content }
.concept-body{ font-size:14px; line-height:1.6; color:var(--ink) }
.concept-media img{ max-width:100%; border-radius:8px; border:1px solid var(--line) }
.concept-desc{ margin-top:10px; font-size:13.5px; line-height:1.6; background:#fff; border:1px solid var(--line); border-radius:8px; padding:10px 12px }
.concept-header{ display:flex; flex-direction:column; gap:10px }
.concept-topbar{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.concept-label{ font-size:11px; font-weight:800; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:999px; padding:2px 7px; width:max-content; flex:none }
.concept-timer-group{ display:flex; align-items:center; gap:5px; flex:none }
.concept-timer-pill{ display:inline-flex; align-items:center; gap:4px; background:#0b4f6c; color:#fff; border-radius:999px; padding:2px 6px 2px 5px; font-size:10px; font-weight:700; box-shadow:0 1px 4px rgba(11,79,108,.14); border:1px solid #0a3d52; min-width:58px; justify-content:center; line-height:1 }
.concept-timer-icon{ width:11px; height:11px; flex:none; color:#7fd4f0 }
.concept-timer{ min-width:18px; text-align:center; font-variant-numeric:tabular-nums; color:#fff; font-size:10px }
.concept-timer-bar{ width:22px; height:2.5px; background:rgba(255,255,255,.32); border-radius:999px; overflow:hidden; flex:none }
.concept-timer-fill{ height:100%; background:linear-gradient(90deg,#7fd4f0,#5eead4); width:100%; transition:width 1s linear }
.concept-replay-btn{ display:inline-flex; align-items:center; gap:3px; background:linear-gradient(135deg,#ff6b35 0%,#f7931e 100%); color:#fff; border:1px solid #e05a2a; border-radius:999px; padding:2px 7px; font-size:10px; font-weight:700; cursor:pointer; box-shadow:0 1px 4px rgba(255,107,53,.2); transition:transform .12s, box-shadow .12s; white-space:nowrap; line-height:1 }
.concept-replay-btn:hover{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(255,107,53,.3) }
.concept-replay-btn:active{ transform:none }
.concept-replay-icon{ width:10px; height:10px; flex:none }
.concept-media-wrap{ position:relative; margin-top:2px }
.concept-media-wrap img, .concept-media-wrap video{ max-width:100%; border-radius:8px; border:1px solid var(--line); display:block }
.concept-hidden-msg{ font-size:11px; color:var(--muted); text-align:center; margin-top:6px; font-style:italic }
.concept-hidden-msg a.concept-view-link{ color:var(--accent-2); font-weight:700; text-decoration:underline; cursor:pointer; font-style:normal }
.concept-hidden-msg a.concept-view-link:hover{ color:var(--accent) }
.concept-pip-overlay{ position:fixed; inset:0; background:rgba(10,26,40,.72); display:grid; place-items:center; z-index:90; padding:20px; backdrop-filter:blur(3px); animation:pipIn .18s ease }
@keyframes pipIn{ from{ opacity:0 } to{ opacity:1 } }
.concept-pip-box{ position:relative; background:#fff; border-radius:12px; padding:12px; max-width:min(760px,92vw); max-height:85vh; overflow:auto; box-shadow:0 18px 50px rgba(0,0,0,.32); border:1px solid var(--line); animation:pipBox .2s ease }
@keyframes pipBox{ from{ transform:scale(.96); opacity:0 } to{ transform:scale(1); opacity:1 } }
.concept-pip-box img, .concept-pip-box video{ max-width:100%; border-radius:8px; display:block; max-height:72vh; width:auto; height:auto }
.concept-pip-close{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:16px; line-height:1; cursor:pointer; display:grid; place-items:center; box-shadow:0 1px 6px rgba(0,0,0,.12) }
.concept-pip-close:hover{ background:#f4f7f9 }
.concept-pip-title{ font-size:11px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; padding-right:30px }

/* ---------- Delta grid ---------- */
.deltagrid{ --dg-src:#fffdf4; --dg-src-line:#e6d9a8; --dg-src-ink:#5c4a12;
  --dg-new:#f4fbf7; --dg-new-line:#bfe3cd; --dg-new-ink:#14472c }
.dg-table{ border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff }
.dg-tr{ display:grid; grid-template-columns:var(--dg-cols); gap:0 10px; align-items:center;
  padding:9px 12px; border-top:1px solid var(--line2) }
.dg-tr:first-child{ border-top:0 }
.dg-head{ background:#f8fafb; align-items:end; padding-bottom:10px }
.dg-corner{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) }
.dg-th{ min-width:0; font-size:12.5px; font-weight:700; color:var(--ink) }
.dg-th.dg-src{ color:var(--dg-src-ink) }
.dg-th.dg-new{ color:var(--dg-new-ink) }
.dg-th-na{ text-align:center }
.dg-groups{ padding:0 12px 6px; background:#f8fafb }
.dg-group{ display:flex; align-items:center; justify-content:center; padding:3px 8px;
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; border-radius:5px }
.dg-group-src{ background:var(--dg-src); border:1px solid var(--dg-src-line); color:var(--dg-src-ink) }
.dg-group-new{ background:var(--dg-new); border:1px solid var(--dg-new-line); color:var(--dg-new-ink) }
.dg-rowlabel{ min-width:0; font-size:13px; font-weight:600; color:var(--ink) }
.dg-td{ min-width:0 }
.dg-td-src{ background:var(--dg-src); border:1px solid var(--dg-src-line); border-radius:7px;
  padding:6px 10px; text-align:center }
.dg-td-src .dg-ref{ font-size:13px; font-weight:700; color:var(--dg-src-ink); font-variant-numeric:tabular-nums }
.dg-td-new .nm-input{ width:100%; text-align:center; background:var(--dg-new);
  border-color:var(--dg-new-line) }
.dg-td-na{ text-align:center }
.dg-total{ background:#fbfcfd; font-weight:700 }
.dg-total .dg-sum{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--ink) }
.dg-total .dg-sum.bad{ color:#c0392b }
.dg-hint{ font-size:12px; color:var(--muted); margin-top:8px }
.dg-empty{ padding:14px; font-size:12.5px; color:var(--muted) }
@media (max-width:900px){
  .dg-tr{ gap:0 6px; padding:8px }
  .dg-th{ font-size:11.5px }
  .dg-td-src{ padding:5px 6px }
}

/* =====================================================================
   COMPREHENSIVE TABLET & SMARTPHONE RESPONSIVE RULES (SURVEY RUNTIME)
   ===================================================================== */
@media (max-width:860px){
  main{
    padding:18px 12px 68px;
  }
  .choice-grid,
  .nm-table,
  .dg-table,
  .hm-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .cg-row,
  .nm-tr,
  .dg-tr,
  .hm-tr{
    min-width:480px;
  }
}

@media (max-width:640px){
  .topbar{
    padding:9px 12px;
    gap:8px;
    flex-wrap:wrap;
  }
  .hud{
    gap:8px;
    margin-left:auto;
  }
  .teambar{
    padding:7px 12px;
    gap:8px;
    font-size:11.5px;
  }
  body.testmode::before{
    top:0;
    position:relative;
    font-size:11px;
    padding:6px 10px;
  }
  main{
    padding:14px 10px 64px;
  }
  .card{
    padding:18px 14px;
    border-radius:10px;
  }
  h2.stem{
    font-size:17px;
  }
  .scale{
    flex-wrap:wrap;
    gap:6px;
  }
  .scale-btn{
    flex:1 1 42px;
    min-width:40px;
    padding:10px 4px;
  }
  .scale-ends.rs-ends{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
    align-items:start;
  }
  .scale-ends.rs-ends .rs-end{
    max-width:none;
    font-size:11px;
  }
  .scale-ends.rs-ends .rs-end-mid{
    position:static;
    transform:none;
    text-align:center;
  }
  /* Text Grid: stack rows vertically on phones so every textarea + Dictate button has 100% width */
  .tg-tr.tg-head{
    display:none;
  }
  .tg-tr{
    grid-template-columns:1fr!important;
    gap:8px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
  }
  .tg-th.tg-rowlabel{
    padding:2px 0 4px;
    border-bottom:1px dashed var(--line);
  }
  .single-gauge-wrap{
    max-width:100%;
    padding:10px 4px;
  }
  .gauge-svg{
    width:min(240px, 82vw);
    height:auto;
  }
  .gauge-ends{
    width:min(230px, 80vw);
  }
  .hmap-head,
  .hmap-row{
    grid-template-columns:minmax(95px, 1.2fr) repeat(3, minmax(52px, 1fr));
    gap:5px;
  }
  .nm-row{
    flex-wrap:wrap;
    gap:8px;
  }
  .nm-label{
    flex:1 1 160px;
  }
  .nm-row input{
    width:110px;
  }
  .delta{
    gap:10px;
  }
  .delta-cell{
    flex:1 1 115px;
  }
  .delta-cell input{
    width:100%;
  }
  .concept-topbar{
    flex-wrap:wrap;
  }
  .nav{
    gap:8px;
    margin-top:18px;
  }
  .btn{
    padding:10px 16px;
    font-size:13.5px;
  }
  .voice-bar{
    bottom:10px;
    padding:8px 12px;
    font-size:12.5px;
  }
  .coach{
    left:10px;
    right:10px;
    bottom:10px;
    max-width:none;
  }
}


/* First-use guidance shown after the respondent chooses Answer by voice. */
.voice-intro-overlay{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:20px;background:rgba(9,25,37,.72);backdrop-filter:blur(4px)}
.voice-intro-card{width:min(540px,100%);max-height:min(90vh,760px);overflow:auto;padding:30px;border:1px solid rgba(255,255,255,.65);border-radius:22px;background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.3);color:var(--ink);animation:voiceIntroIn .2s ease-out}
.voice-intro-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:#e8f2f7;font-size:24px}
.voice-intro-kicker{margin:18px 0 4px;color:var(--accent2);font-size:11px;font-weight:850;letter-spacing:.13em}
.voice-intro-card h2{margin:0 0 9px;font-size:clamp(23px,5vw,30px);line-height:1.2;letter-spacing:-.025em}
.voice-intro-card>p:not(.voice-intro-kicker){color:var(--muted);line-height:1.55}
.voice-intro-tips{display:grid;gap:10px;margin:18px 0;padding:16px 18px 16px 36px;border-radius:14px;background:#f3f7f9;color:var(--ink);font-size:14px}
.voice-intro-tips strong{color:var(--accent)}
.voice-intro-card .voice-intro-footnote{font-size:13px}
.voice-intro-start{width:100%;min-height:48px;margin-top:8px;padding:12px 18px;border:0;border-radius:12px;background:var(--accent);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.voice-intro-start:hover{background:var(--accent2)}
.voice-intro-start:focus-visible{outline:3px solid #ffd166;outline-offset:3px}
@keyframes voiceIntroIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:520px){.voice-intro-overlay{padding:12px}.voice-intro-card{padding:22px 18px;border-radius:18px}.voice-intro-tips{padding:14px 14px 14px 32px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.voice-intro-card{animation:none}}