/* ============================================================
   Houselights — shared styles for the show-survey research pages
   Tokens lifted from docs/houselights-design-system.html
   Used by both index.html (questionnaire) and dashboard.html
   ============================================================ */

:root{
  --bg:#0A0D11;            /* page background            */
  --s1:#12161C;            /* raised: cards, tab base    */
  --s2:#1A2028;            /* card / field surface       */
  --s3:#242B34;            /* elevated: toggle-on, hover */
  --scrim:rgba(6,9,12,.72);
  --tx:#F0F3F6;            /* primary text               */
  --tx2:#9AA4B0;           /* secondary                  */
  --tx3:#67717D;           /* tertiary / captions        */
  --on-acc:#03231E;        /* text on accent fill        */
  --hair:rgba(240,243,246,.09);
  --hair2:rgba(240,243,246,.16);
  --acc:#21C0AC;           /* ocean teal — primary / "Yes" */
  --acc-press:#1BA894;
  --acc-tint:rgba(33,192,172,.15);
  --no:#7569E2;            /* purple — the "No" answer     */
  --no-tint:rgba(117,105,226,.15);
  --sold:#FF7A66;          /* coral                      */
  --warn:#FFB84D;
  --danger:#FF5C5C;
  --f-ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--tx);
  font-family:var(--f-ui);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
::selection{background:var(--acc-tint)}

/* ---- layout ------------------------------------------------ */
.wrap{max-width:600px;margin:0 auto;padding:26px 20px 64px}
.wrap--wide{max-width:920px}

/* ---- brand + type ------------------------------------------ */
.brand{display:flex;align-items:center;gap:10px}
.brand__mark{
  width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--acc);color:var(--on-acc);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;letter-spacing:-.03em;
}
.brand__name{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.brand__name b{color:var(--acc)}

.kick{
  font:600 11px/1 var(--f-mono);
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
}
h1.title{
  font:800 clamp(26px,6vw,34px)/1.08 var(--f-ui);
  letter-spacing:-.035em;margin-top:14px;
}
.lede{margin-top:12px;color:var(--tx2);font-size:15px;max-width:52ch}
.lede strong{color:var(--tx);font-weight:600}

/* ---- segmented control (.seg) ------------------------------ */
.seg{display:flex;background:var(--s1);border-radius:100px;padding:4px;gap:4px}
.seg button{
  flex:1;padding:11px 8px;background:none;border:0;border-radius:100px;
  color:var(--tx3);font:600 13px/1 var(--f-ui);cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.seg button.on{background:var(--s3);color:var(--tx)}
.seg button.on.tick{background:var(--acc);color:var(--on-acc)}

/* ---- questions --------------------------------------------- */
.q{margin-top:30px}
.q__n{font:600 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--tx3)}
.q__label{margin-top:9px;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.34}
.q__hint{margin-top:7px;font-size:13px;color:var(--tx3)}

/* multi/single-select options */
.opts{display:flex;flex-direction:column;gap:9px;margin-top:15px}
.opt{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:11px 15px;
  background:var(--s2);border:1.5px solid transparent;border-radius:14px;
  color:var(--tx);font-size:15px;cursor:pointer;user-select:none;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.opt:hover{background:var(--s3)}
.opt__box{
  width:22px;height:22px;flex:none;border-radius:7px;
  border:1.5px solid var(--hair2);
  display:flex;align-items:center;justify-content:center;
  color:var(--on-acc);font-size:13px;transition:.16s var(--ease);
}
.opt--radio .opt__box{border-radius:50%}
.opt.on{border-color:var(--acc);background:var(--acc-tint)}
.opt.on .opt__box{background:var(--acc);border-color:var(--acc)}
.opt__box svg{width:13px;height:13px;opacity:0;transition:opacity .12s}
.opt.on .opt__box svg{opacity:1}

/* yes / no pair */
.yn{display:flex;gap:10px;margin-top:15px}
.yn button{
  flex:1;min-height:54px;border-radius:14px;
  background:var(--s2);border:1.5px solid transparent;color:var(--tx);
  font-size:15.5px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:.16s var(--ease);
}
.yn button:hover{background:var(--s3)}
.yn button.on{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.yn button.on--no{background:var(--no);border-color:var(--no);color:#fff}

/* text answer */
.ta{
  width:100%;margin-top:14px;min-height:96px;resize:vertical;
  background:var(--s2);border:1.5px solid transparent;border-radius:14px;
  padding:14px 15px;color:var(--tx);font:400 15px/1.5 var(--f-ui);
  transition:border-color .16s var(--ease);
}
.ta::placeholder{color:var(--tx3)}
.ta:focus{outline:none;border-color:var(--acc)}

/* other-text reveal */
.other-in{
  width:100%;margin-top:9px;height:46px;
  background:var(--s1);border:1.5px solid var(--hair);border-radius:12px;
  padding:0 14px;color:var(--tx);font:400 14.5px var(--f-ui);
}
.other-in:focus{outline:none;border-color:var(--acc)}

/* ---- buttons ----------------------------------------------- */
.btn{
  height:54px;border-radius:100px;border:0;cursor:pointer;
  background:var(--acc);color:var(--on-acc);
  font:700 16px/1 var(--f-ui);letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s var(--ease),background .16s var(--ease);
}
.btn:hover{background:var(--acc-press)}
.btn:active{transform:scale(.98)}
.btn--block{display:flex;width:100%}
.btn--secondary{background:var(--s2);color:var(--tx)}
.btn--secondary:hover{background:var(--s3)}
.btn--ghost{background:transparent;color:var(--tx2);box-shadow:inset 0 0 0 1px var(--hair2)}
.btn--ghost:hover{background:var(--s1)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn--sm{height:40px;font-size:13.5px;padding:0 16px}

/* ---- misc -------------------------------------------------- */
.hr{height:1px;background:var(--hair);border:0;margin:34px 0}
.foot{margin-top:36px;color:var(--tx3);font-size:12.5px;line-height:1.6}

/* live dot */
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);display:inline-block;flex:none}
.dot--live{animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--acc-tint)}70%{box-shadow:0 0 0 8px rgba(33,192,172,0)}100%{box-shadow:0 0 0 0 rgba(33,192,172,0)}}

/* banner (offline / errors) */
.banner{
  margin-top:18px;border-radius:12px;padding:12px 14px;
  display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;
  background:rgba(255,184,77,.1);color:#F4D08A;border:1px solid rgba(255,184,77,.24);
}
.banner--err{background:rgba(255,92,92,.1);color:#FFA3A3;border-color:rgba(255,92,92,.28)}
.banner b{font-weight:700}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}