/* The Seven Questions - BVI brand dark theme + liquid glass.
   Palette and card language from research/BVI-Infographic-Design-Spec.md:
   near-black navy field, electric-blue accent, "lit glass panel" cards
   (near-background fill + thin pale-cyan glow border), orange on the one CTA only.
   No external fonts or assets: the page must make zero network requests. */

:root {
  --bg-darkest: #00071A;
  --bg-glow: #011C4E;
  --ink: #FDFDFF;            /* cool off-white, primary text */
  --ink-soft: #BACFEC;       /* pale blue-grey, secondary text */
  --ink-body: #E4F5FF;       /* pale cyan, small body text */
  --accent: #0068F8;         /* primary blue */
  --badge: #0058F8;          /* badge blue */
  --stroke: #0F5CB8;         /* icon/line blue */
  --card-fill: rgba(4, 15, 40, 0.55);
  --card-border: rgba(180, 223, 255, 0.28);
  --positive: #34D399;
  --negative: #F87171;
  --neutral: #FDFDFF;        /* dark-theme equivalent of "neutral black": default ink */
  --radius: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink);
  font: 16px/1.55 Montserrat, Poppins, Archivo, Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-darkest);
}

/* --- liquid background: navy radial field + drifting glow blobs.
       The blobs are what the glass visibly refracts. --- */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1100px 900px at 30% 110%, var(--bg-glow) 0%, transparent 60%),
    radial-gradient(900px 700px at 85% -10%, #010B26 0%, transparent 65%),
    var(--bg-darkest);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.b1 { width: 480px; height: 480px; background: rgba(0, 104, 248, 0.30); top: -120px; left: -130px; animation: drift1 28s ease-in-out infinite alternate; }
.b2 { width: 420px; height: 420px; background: rgba(15, 92, 184, 0.34); top: 38%; right: -140px; animation: drift2 34s ease-in-out infinite alternate; }
.b3 { width: 520px; height: 520px; background: rgba(1, 28, 78, 0.85); bottom: -180px; left: 26%; animation: drift3 40s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(80px, 60px) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-70px, -50px) scale(1.06); } }
@keyframes drift3 { to { transform: translate(50px, -70px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
}

/* --- layout --- */
main {
  max-width: 760px;
  margin: 0 auto;
  padding: 34px 20px 60px;
}

/* --- brand bar (header + footer rules with node dots) --- */
.brandbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 6px 0 26px;
}
.brandbar.footer { margin: 44px 0 0; }
.brandbar .wordmark {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  white-space: nowrap;
}
.brandbar a.wordmark-link { text-decoration: none; }
.brandbar a.wordmark-link:hover { color: var(--accent); text-decoration: underline; }
.brandbar .rule {
  flex: 1;
  height: 1px;
  background: rgba(186, 207, 236, 0.28);
  position: relative;
}
.brandbar .rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(186, 207, 236, 0.45);
}
.brandbar .rule-r::after { right: auto; left: 0; }

/* --- liquid glass panels --- */
.glass {
  background:
    linear-gradient(120deg, rgba(180, 223, 255, 0.10) 0%, rgba(180, 223, 255, 0.02) 30%, transparent 60%),
    var(--card-fill);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow:
    0 0 28px rgba(15, 92, 184, 0.22),
    0 12px 36px rgba(0, 7, 26, 0.55),
    inset 0 1px 0 rgba(253, 253, 255, 0.14),
    inset 0 0 22px rgba(180, 223, 255, 0.04);
}

.hero {
  padding: 36px 40px;
  margin-bottom: 26px;
  text-align: center;
}
.hero h1 {
  margin: 0 0 8px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero h1 .accent { color: var(--accent); }
.hero .sub {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--ink);
}
.hero .sub .accent-soft { color: var(--accent); font-weight: 600; }
.hero .privacy {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  border-top: 1px solid rgba(186, 207, 236, 0.16);
  padding-top: 13px;
}

/* --- question cards --- */
.card {
  padding: 26px 30px;
  margin-bottom: 18px;
}
.card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}
.badge {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--badge);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 0 14px rgba(0, 88, 248, 0.45);
}
.card-head h2 { flex: 1; min-width: 0; }
.card h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pts input {
  width: 44px;
  text-align: center;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid rgba(180, 223, 255, 0.22);
  background: rgba(4, 15, 40, 0.5);
  -moz-appearance: textfield;
  appearance: textfield;
}
/* native spinners replaced by the custom +/- steppers below */
.pts input::-webkit-outer-spin-button,
.pts input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pts input:focus {
  outline: 2px solid rgba(180, 223, 255, 0.7);
  outline-offset: 2px;
}
.pts-step {
  appearance: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(180, 223, 255, 0.3);
  background: rgba(4, 15, 40, 0.5);
  color: var(--ink-soft);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s;
}
.pts-step:hover {
  background: rgba(15, 92, 184, 0.3);
  border-color: rgba(180, 223, 255, 0.55);
  color: var(--ink);
}
.pts-step:active { transform: scale(0.94); }
.pts-step:focus-visible {
  outline: 2px solid rgba(180, 223, 255, 0.7);
  outline-offset: 2px;
}
.card .qlabel {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.card .help {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* answer buttons - tone-neutral while answering; colors only on the mirror */
.opts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.opt {
  appearance: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 14px;
  border: 1px solid rgba(180, 223, 255, 0.22);
  background: rgba(4, 15, 40, 0.45);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.06s;
}
.opt:hover {
  background: rgba(15, 92, 184, 0.22);
  border-color: rgba(180, 223, 255, 0.45);
}
.opt:active { transform: scale(0.98); }
.opt[aria-pressed="true"] {
  background: var(--badge);
  border-color: rgba(180, 223, 255, 0.6);
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 88, 248, 0.5);
}

/* Issue #15: a long unbroken token in member-authored text must wrap rather
   than overflow the card. overflow-wrap:anywhere breaks only when a token would
   otherwise overflow; normal spaced prose is unaffected. Covers every surface
   that renders member text: live question/help/options, the mirror + history +
   compare cells (.mq/.ma, shared), and the bear-case answer. Editor inputs are
   excluded (they scroll, not overflow). */
.card h2,
.card .help,
.opt,
.mq,
.ma,
.bear p,
.snap-bear { overflow-wrap: anywhere; }

textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(180, 223, 255, 0.22);
  background: rgba(4, 15, 40, 0.5);
  /* Firefox themed scrollbar; WebKit/Blink handled by the rules below. */
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 223, 255, 0.3) transparent;
}
textarea::placeholder { color: rgba(186, 207, 236, 0.55); }
textarea:focus, .opt:focus-visible {
  outline: 2px solid rgba(180, 223, 255, 0.7);
  outline-offset: 2px;
}
/* Themed textarea scrollbar (Blink/WebKit) so desktop matches the UI instead
   of the native gray scrollbar (mobile uses overlay scrollbars already). */
textarea::-webkit-scrollbar { width: 11px; }
textarea::-webkit-scrollbar-track { background: transparent; }
textarea::-webkit-scrollbar-thumb {
  background: rgba(180, 223, 255, 0.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
textarea::-webkit-scrollbar-thumb:hover { background: rgba(180, 223, 255, 0.45); }

/* --- actions: the single orange CTA (spec: orange appears exactly once) --- */
.actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.primary {
  appearance: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #FFA954 0%, #F06000 55%, #BA391A 100%);
  border: none;
  border-radius: 16px;
  padding: 14px 36px;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(240, 96, 0, 0.45), 0 8px 24px rgba(0, 7, 26, 0.5);
  transition: transform 0.06s, opacity 0.15s, box-shadow 0.15s;
}
.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(240, 96, 0, 0.6), 0 8px 24px rgba(0, 7, 26, 0.5);
}
.primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* secondary (ghost blue) - used on the mirror screen so orange stays unique */
.ghost {
  appearance: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  background: rgba(4, 15, 40, 0.45);
  border: 1px solid rgba(180, 223, 255, 0.35);
  border-radius: 16px;
  padding: 14px 36px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.06s;
}
.ghost:hover {
  background: rgba(15, 92, 184, 0.25);
  border-color: rgba(180, 223, 255, 0.6);
  transform: translateY(-1px);
}
.hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* --- mirror screen --- */
.mirror-title {
  padding: 30px 36px;
  margin-bottom: 18px;
  text-align: center;
}
.mirror-title h2 {
  margin: 0 0 5px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.mirror-title h2 .accent { color: var(--accent); }
.mirror-title p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.mirror-row {
  padding: 18px 30px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  align-items: center;
}
.mirror-row .mq {
  font-size: 14px;
  color: var(--ink-soft);
}
.mirror-row .ma {
  font-size: 17px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.ma.tone-positive { color: var(--positive); text-shadow: 0 0 18px rgba(52, 211, 153, 0.35); }
.ma.tone-negative { color: var(--negative); text-shadow: 0 0 18px rgba(248, 113, 113, 0.35); }
.ma.tone-neutral  { color: var(--neutral); }
.ma .sep { color: rgba(186, 207, 236, 0.4); font-weight: 400; }

.score {
  padding: 24px 30px;
  margin: 18px 0 0;
  text-align: center;
}
.score h3 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.score-num {
  margin: 0;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.score-sub {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}
.score-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.bear {
  padding: 24px 30px;
  margin: 18px 0;
}
.bear h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.bear p {
  margin: 0;
  font-size: 16px;
  color: var(--neutral);
  white-space: pre-wrap;
}

@media (max-width: 560px) {
  .mirror-row { grid-template-columns: 1fr; }
  .mirror-row .ma { text-align: left; white-space: normal; }
  .hero, .card { padding: 22px 22px; }
  .hero h1 { font-size: 30px; }
  .brandbar .wordmark { font-size: 12px; }
  /* Issue #13: give the question the full card width and drop the point
     stepper to its own row so the text is not crammed into 2-3 words/line. */
  .card-head { flex-wrap: wrap; }
  .card-head h2 { flex: 1 1 auto; }
  .card-head .pts { flex: 0 0 100%; justify-content: flex-end; margin-top: 6px; }
  /* Even, tappable answer rows instead of ragged wrapping. */
  .opts { flex-direction: column; align-items: stretch; }
  .opt { text-align: left; }
}