/* ═══════════════════════════════════════════════════════════════════
   NPolls — the twelve legacy pages.

   about faq contact privacy terms mygifts forum
   login register profile my_account verify

   Their inline CSS was stripped along with everything else, so their
   markup survives but had no layout. Rather than rewriting twelve
   templates, this styles the vocabulary they already use: .shell .card
   .field .tabs .badge .toast .col, and the 38 form inputs across them.

   Article-internal classes are scoped under .prose in np-article.css,
   so the .card here and the .card there cannot collide.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────
   None of these pages wrapped their content, so it ran the full width
   of the viewport once the old CSS went. */
body > main,
body > .container,
body > .shell,
body > section,
body > .page,
body > form {
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container, .page, .shell { max-width: var(--page); margin: 0 auto; padding: 40px 24px 20px; }

/* Long-form legal and info pages read best on a narrower measure. */
.legal, .page-narrow { max-width: 800px; }

h1 + p, .page-header p, .hero p { color: var(--txt-2); }
.page-header, .hero-block { padding: 46px 0 26px; }
.page-header h1, .hero-block h1 { margin: 0 0 14px; }

/* Headings on these pages behave like article headings, not heroes. */
main h2, .container h2, .shell h2 {
  font-family: var(--body); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(20px, 2.3vw, 25px); margin: 2em 0 .6em;
  padding-bottom: .4em; border-bottom: 1px solid var(--edge);
}
main h3, .container h3, .shell h3 {
  font-family: var(--body); font-weight: 700;
  font-size: 17.5px; margin: 1.6em 0 .45em;
}
main p, .container p, .shell p { color: var(--txt-2); max-width: 72ch; }
main ul, main ol, .container ul, .container ol { color: var(--txt-2); padding-left: 1.3em; max-width: 72ch; }
main li, .container li { margin-bottom: .45em; }
main li::marker { color: var(--c3); }
/* Underline links in running prose only. The earlier blanket rule also
   caught .pill, .go, .related and the back link, which is why every
   control on the poll pages appeared underlined. */
main p a, main li a, .container p a, .container li a,
.legal-card a, .about-card a, .faq-answer a {
  color: var(--c3); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Anything that is a control must never be underlined. */
.pill, .btn, .chip, .go, .vote-btn, .related a, .np-links a,
.np-foot-col a, .tab, .sbtn, .ghost, .np-logo { text-decoration: none !important; }

/* ── Panels ─────────────────────────────────────────────────────── */
.card, .panel, .box {
  position: relative;
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 26px 28px; margin: 0 0 20px;
  backdrop-filter: blur(18px) saturate(150%);
}
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }
.card h2, .card h3 { border: 0; padding: 0; margin-top: 0; }

/* ── Auth pages ─────────────────────────────────────────────────────
   login and register are the conversion path — only 196 people reached
   the register page in two years — so they get a real centred card
   rather than a form floating on the page. */
.shell {
  min-height: 68vh; display: grid; place-items: center;
  padding: 48px 24px 72px;
}
.shell .card {
  width: 100%; max-width: 440px; padding: 34px 32px; margin: 0;
  text-align: center; box-shadow: var(--glow-a);
}
.shell .card h2 { font-family: var(--display); font-size: 26px; margin: 0 0 8px; }
.shell .card p { margin: 0 auto 22px; font-size: 15px; }
.shell .card form { text-align: left; display: grid; gap: 14px; }
.shell .card .icon {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; color:var(--on-cta);
  background:var(--grad-cta); box-shadow: var(--glow-a);
}
.shell .card .btn { width: 100%; margin-top: 4px; }

/* ── Forms ──────────────────────────────────────────────────────── */
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label, .label { font-size: 13px; font-weight: 600; color: var(--txt-2); }
.input, input.input { width: 100%; }
form .btn { margin-top: 6px; }
.hint, .sub-msg, .tiny, .sm, .muted {
  font-size: 13px; color: var(--txt-3);
}
.sub-msg { margin-top: 14px; }

/* ── Tabs (my_account) ──────────────────────────────────────────── */
.tabs {
  display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 24px;
  padding: 7px; border-radius: 99px;
  background: var(--glass); border: 1px solid var(--edge);
}
.tab {
  padding: 9px 17px; border-radius: 99px; font-size: 14px; font-weight: 600;
  color: var(--txt-2); text-decoration: none !important; white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.tab:hover { color: var(--txt); background: var(--glass-2); }
.tab.active { color:var(--on-cta); background:var(--grad-cta); box-shadow: var(--glow-a); }
@media (max-width: 700px) {
  .tabs { border-radius: var(--r); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}

/* ── Key / value ────────────────────────────────────────────────── */
.row, .kv {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--edge);
}
.row:last-child, .kv:last-child { border-bottom: 0; }
.value { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--txt-2);
}
.badge.ok, .badge.success { color: var(--ok); border-color: rgba(var(--ok-rgb),.35); }
.badge.warn { color: var(--c5); border-color: rgba(245,158,11,.35); }
.badge.err, .badge.danger { color: var(--c4); border-color: rgba(244,63,94,.35); }

/* ── Toasts ─────────────────────────────────────────────────────── */
.toast {
  padding: 14px 20px; border-radius: var(--r); margin: 0 0 20px;
  background: var(--glass-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--c3); font-size: 14.5px;
}
.toast.error   { border-left-color: var(--c4); }
.toast.success { border-left-color: var(--ok); }
.toast:empty   { display: none; }

/* ── Columns and card grids ─────────────────────────────────────── */
.cols, .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.col { min-width: 0; }

/* Monthly gifts */
.cat-card {
  position: relative; overflow: hidden;
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 22px 24px;
  transition: transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--glow-a); }
.cat-card.locked { opacity: .55; }
.cat-card.locked::after {
  content: "Locked"; position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--txt-3);
}

/* ── Tables on these pages ──────────────────────────────────────── */
main table, .container table {
  width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 22px;
  display: block; overflow-x: auto;
}
main th, main td, .container th, .container td {
  padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--edge);
}
main thead th, .container thead th {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--txt-3); font-weight: 700;
}

/* ── Empty states ───────────────────────────────────────────────── */
.empty, .no-results {
  text-align: center; padding: 60px 20px; color: var(--txt-3);
}

@media (max-width: 620px) {
  .container, .page, .shell { padding-left: 18px; padding-right: 18px; }
  .card, .panel { padding: 20px 20px; }
  .shell .card { padding: 26px 22px; }
}