/* ============================================================
   My Daily Discount Research — shared styles for the research hub,
   study page and methodology page. Builds on the design tokens and
   shared components (.container, .section, .prose, .faq-*, .badge,
   .btn-primary/.btn-ghost) already defined in /style.css — this file
   only adds what's specific to research/survey pages.
   ============================================================ */

/* ---------- page shell ---------- */
.research-page main { padding-bottom: 56px; }

/* Research pages' footer only has 3 link columns (Research/Company/Legal),
   not the homepage's 5 — reusing style.css's 5-column desktop grid left them
   clustered on the left with a large dead gap on the right. Tablet/mobile
   breakpoints already resolve to 3 and 2 columns respectively, which fits
   this footer exactly, so only the desktop (>980px) width needs overriding. */
@media (min-width: 981px) {
  .research-page .footer-inner { grid-template-columns: 1.7fr repeat(3, 1fr); }
}

/* style.css's universal reset (margin/padding: 0 on every element) strips the
   browser's default list indent, so .prose lists render with markers flush
   against the edge unless we restore it here. */
.prose ul, .prose ol { padding-left: 1.3em; margin: 4px 0 14px; }
.prose li { margin-bottom: 6px; line-height: 1.65; color: var(--ink-2); font-size: .95rem; }
.prose li:last-child { margin-bottom: 0; }

/* style.css gives .prose h2/h3 bottom spacing but no top spacing, so a heading
   sits flush against the previous section's last line with no separation. */
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 26px; }

/* Full-width branded band behind the breadcrumb + page title on every inner
   page, echoing the homepage hero's warm gradient instead of dropping
   straight onto plain white. Sits flush under the sticky header, which
   already reserves its own height in normal flow. */
.research-banner {
  background: linear-gradient(180deg, var(--brand-tint) 0%, var(--hero-mid) 55%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
}

.research-hero {
  padding: 6px 0 32px;
}
.research-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.research-hero h1 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.research-hero .lede {
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 720px;
}
.research-breadcrumb {
  font-size: .82rem;
  color: var(--ink-3);
  padding-top: 24px;
  margin-bottom: 18px;
}
.research-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.research-breadcrumb a:hover { color: var(--brand); }
.research-breadcrumb .sep { margin: 0 6px; opacity: .5; }

/* ---------- neutral-notice banner (no-predetermined-winner language) ---------- */
.research-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin: 22px 0;
  font-size: .89rem;
  color: var(--ink-2);
  line-height: 1.6;
}
.research-notice svg { width: 20px; height: 20px; flex-shrink: 0; stroke: var(--brand); fill: none; stroke-width: 2; margin-top: 2px; }

/* ---------- hub: current/future study cards ---------- */
.study-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 22px; }
.study-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  text-decoration: none;
  color: inherit;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.study-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--border-strong); }
.study-card .study-status { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green); background: var(--green-tint); padding: 3px 10px; border-radius: var(--r-pill); margin-bottom: 12px; }
.study-card h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em; }
.study-card p { font-size: .88rem; color: var(--ink-3); line-height: 1.6; }
.study-card .study-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; padding: 9px 16px;
  border-radius: var(--r-pill); background: var(--brand-tint);
  font-size: .82rem; font-weight: 700; color: var(--brand-dark);
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.study-card:hover .study-cta { background: var(--brand); color: var(--on-brand); transform: translateX(2px); }
.study-card.study-card-future { opacity: .7; }
.study-card.study-card-future .study-status { color: var(--ink-4); background: var(--surface-alt); }

/* ---------- how-it-works steps ---------- */
/* Fixed 1/2/4-column steps (this list is always exactly 4 items) rather than
   auto-fit, which would strand the 4th card alone on its own half-empty row. */
.how-steps { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
@media (min-width: 560px) { .how-steps { grid-template-columns: repeat(2, 1fr); } }
.how-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px; }
.how-step .how-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-weight: 800; font-size: .82rem; margin-bottom: 10px; }
.how-step h4 { font-size: .95rem; font-weight: 700; margin-bottom: 6px; }
.how-step p { font-size: .85rem; color: var(--ink-3); line-height: 1.6; }

/* ---------- disclosure / hold-point callouts ---------- */
.callout {
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: 16px 18px;
  font-size: .88rem;
  line-height: 1.65;
  margin: 18px 0;
}
.callout-todo { border-color: #f5c76a; background: #fff9ec; color: #6b4e00; }
:root[data-theme="dark"] .callout-todo { background: rgba(245, 199, 106, .1); color: #f5c76a; border-color: rgba(245,199,106,.35); }
.callout-todo strong { display: block; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }

/* ---------- methodology tables ---------- */
.meth-table-wrap { overflow-x: auto; margin: 16px 0 28px; -webkit-overflow-scrolling: touch; }
.meth-table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 480px; }
.meth-table th, .meth-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.meth-table th { color: var(--ink-3); font-weight: 700; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
.meth-table tr:last-child td { border-bottom: none; }
.meth-county-label { font-weight: 700; color: var(--ink); }

/* Sidebar + article layout for the methodology page. The TOC sits fixed-width
   on the left and sticks in place (within its own scrollable max-height) as
   the long article scrolls past it. Below ~980px there's no room for a
   sidebar, so it collapses back to a normal block above the content. */
.meth-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 48px; align-items: start; padding: 8px 0 40px; }
.meth-content { min-width: 0; }

.meth-toc {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  background: var(--surface-alt);
  border-radius: var(--r-md);
  padding: 18px 20px;
}
.meth-toc h4 { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.meth-toc ol { columns: 1; padding-left: 18px; font-size: .85rem; }
.meth-toc li { margin-bottom: 9px; break-inside: avoid; }
.meth-toc a { color: var(--ink-2); text-decoration: none; }
.meth-toc a:hover { color: var(--brand); }

@media (max-width: 980px) {
  .meth-layout { grid-template-columns: 1fr; gap: 0; max-width: 760px; margin: 0 auto; }
  .meth-toc { position: static; max-height: none; overflow-y: visible; margin-bottom: 24px; }
  .meth-toc ol { columns: 2; column-gap: 24px; }
}
@media (max-width: 640px) { .meth-toc ol { columns: 1; } }

/* ---------- survey shell ---------- */
.survey-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 28px;
  margin: 28px 0 8px;
  max-width: 640px;
}
@media (max-width: 640px) { .survey-shell { padding: 20px; } }

.survey-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.survey-progress-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
.survey-progress-fill { height: 100%; background: var(--brand-grad); border-radius: var(--r-pill); transition: width .3s var(--ease); width: 0%; }
.survey-progress-label { font-size: .76rem; font-weight: 700; color: var(--ink-3); white-space: nowrap; }

.survey-step { display: none; }
.survey-step.active { display: block; animation: surveyFadeIn .25s var(--ease); }
@keyframes surveyFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.survey-q { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin-bottom: 6px; }
.survey-q-sub { font-size: .85rem; color: var(--ink-3); margin-bottom: 16px; line-height: 1.55; }

.survey-choice-row { display: flex; flex-direction: column; gap: 10px; }
.survey-choice {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 13px 16px; cursor: pointer; font-size: .92rem; font-weight: 600;
  background: var(--surface); transition: border-color .15s, background .15s;
}
.survey-choice:hover { border-color: var(--brand-light); }
.survey-choice input { accent-color: var(--brand); width: 17px; height: 17px; flex-shrink: 0; }
.survey-choice.selected { border-color: var(--brand); background: var(--brand-tint); }

.survey-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.survey-scale-opt {
  text-align: center;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 12px 2px; cursor: pointer; font-size: .72rem; font-weight: 700;
  color: var(--ink-3); background: var(--surface); transition: all .15s;
}
.survey-scale-opt .n { display: block; font-size: 1.1rem; font-weight: 800; color: var(--ink); margin-bottom: 2px; }
.survey-scale-opt:hover { border-color: var(--brand-light); }
.survey-scale-opt.selected { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }

@media (min-width: 480px) {
  .survey-scale { gap: 8px; }
  .survey-scale-opt { padding: 12px 4px; font-size: .82rem; }
  .survey-scale-opt .n { font-size: 1.15rem; }
}
.survey-scale-opt.selected .n { color: var(--brand-dark); }

.survey-search { position: relative; margin-bottom: 12px; }
.survey-search input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-md); border: 1.5px solid var(--border);
  font-size: .92rem; background: var(--surface); color: var(--ink);
}
.survey-search input:focus { outline: none; border-color: var(--brand); }

.survey-business-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.survey-business-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; font-size: .88rem;
}
.survey-business-item:hover { border-color: var(--brand-light); }
.survey-business-item.selected { border-color: var(--brand); background: var(--brand-tint); }
.survey-business-item .biz-name { font-weight: 700; }
.survey-business-item .biz-muni { color: var(--ink-3); font-size: .78rem; }
.survey-business-empty { text-align: center; color: var(--ink-4); font-size: .85rem; padding: 20px 0; }

.survey-assigned-banner {
  background: var(--brand-tint); border-radius: var(--r-md); padding: 14px 16px;
  font-size: .88rem; margin-bottom: 18px; color: var(--ink-2);
}
.survey-assigned-banner strong { color: var(--brand-dark); }

.survey-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.survey-error { color: #d93c0c; font-size: .84rem; margin-top: 10px; min-height: 1em; }

.survey-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.survey-thankyou { text-align: center; padding: 12px 0; }
.survey-thankyou svg { width: 52px; height: 52px; stroke: var(--green); fill: none; stroke-width: 2; margin-bottom: 14px; }
.survey-thankyou h3 { font-size: 1.2rem; font-weight: 800; margin-bottom: 8px; }
.survey-thankyou p { color: var(--ink-3); font-size: .9rem; line-height: 1.6; max-width: 440px; margin: 0 auto; }

/* ---------- AEO answer block ---------- */
.aeo-block { border: 1.5px solid var(--border); border-radius: var(--r-md); padding: 20px; margin: 20px 0; background: var(--surface-alt); }
.aeo-block h4 { font-size: .95rem; font-weight: 700; margin-bottom: 8px; }
.aeo-block dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: .84rem; margin-top: 10px; }
.aeo-block dt { color: var(--ink-3); }
.aeo-block dd { color: var(--ink-2); font-weight: 600; }