/* ═══════════════════════════════════════════════════════════════════════
   Muhurata — "Bold" theme layer.

   Loaded AFTER each page's inline <style>. Re-tunes the whole look by
   remapping the CSS custom properties the pages already run on
   (--wall, --ink, --brass …) plus a set of new component styles for the
   nav, hero and pills.

   Direction: near-black warm ground · one bright amber accent ·
   Space Grotesk everywhere, heavy · fat rounded pill buttons ·
   punchy oversized headlines. Dark-committed (the old light/dark toggle
   is neutralised).
   ═══════════════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  --wall:        #0e0b08;
  --wall-lit:    #191512;
  --wall-shade:  #120f0c;

  --ink:      #f2ece0;
  --teak:     #fbf5e8;
  --teak-dk:  #ffffff;
  --rule:     color-mix(in srgb, #f2ece0 13%, transparent);

  --brass:     #f4b52e;   /* the one accent */
  --brass-lt:  #ffd15e;
  --marigold:  #f4b52e;
  --oxide:     #f4b52e;
  --oxide-dk:  #d99a1e;
  --kumkum:    #f4b52e;   /* no reds anywhere */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --pill: 999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 10px 30px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  --glow: 0 0 40px -8px color-mix(in srgb, var(--brass) 55%, transparent);

  --font-heading: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

/* ── base ─────────────────────────────────────────────────────────── */
body {
  background: var(--wall) !important;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.room, .room::after, .stars, .thread { background: none !important; }
.room { background: radial-gradient(70% 50% at 78% -5%, color-mix(in srgb, var(--brass) 12%, transparent), transparent 70%), var(--wall) !important; }
.toran { display: none !important; }

/* section-divider "floor" — a quiet dark strip with a glowing amber hairline */
.floor { background: var(--wall-shade) !important; box-shadow: inset 0 8px 20px -14px #000 !important; }
.floor::before { background: linear-gradient(90deg, transparent, var(--brass), transparent) !important; height: 1px !important; opacity: .6; }
.kolam .kd { fill: color-mix(in srgb, var(--brass) 55%, transparent) !important; }
.kolam .kl { stroke: var(--brass) !important; opacity: .8 !important; }

h1, h2, h3, h4, h5, h6, .brand, .pull, .say, .mh-title,
.nk-head-txt b, .card-title, .rd h2, .rd h3, .pred-title, .tab-h {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--teak-dk);
}
h1 { line-height: 1.02; }
.pull { font-style: normal; }
a { color: var(--brass); }

/* oversized hero headline */
.hero h1 { font-size: clamp(38px, 6.4vw, 74px); margin: 10px 0 16px; }
.hero .pull {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
  border-radius: var(--pill); padding: 6px 14px; margin: 0 0 6px;
}
.hero .lede { font-size: clamp(15px, 1.7vw, 18px); color: color-mix(in srgb, var(--ink) 72%, transparent); max-width: 46ch; }

/* ── sticky top nav ──────────────────────────────────────────────── */
.mh-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 18px;
  padding: 12px clamp(14px, 4vw, 40px);
  background: color-mix(in srgb, var(--wall) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.mh-nav .mh-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-heading); font-weight: 700; font-size: 19px;
  color: var(--teak-dk); text-decoration: none; letter-spacing: -0.02em;
}
.mh-nav .mh-brand svg { width: 30px; height: 30px; }
.mh-nav-links { display: flex; gap: 4px; margin-left: 8px; }
.mh-nav-links a {
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--ink) 80%, transparent);
  text-decoration: none; transition: background .15s ease, color .15s ease;
}
.mh-nav-links a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--teak-dk); }
.mh-nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mh-nav-toggle { display: none; }

.mh-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; border-radius: var(--pill); cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  padding: 10px 20px; background: var(--brass); color: #17110a;
  box-shadow: var(--glow); transition: transform .12s ease, filter .15s ease;
}
.mh-pill:hover { filter: brightness(1.06); transform: translateY(-1px); }
.mh-pill.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); box-shadow: none; }
.mh-pill.ghost:hover { border-color: var(--brass); color: var(--brass); }

@media (max-width: 860px) {
  .mh-nav-links, .mh-nav .mh-pill:not(.mh-cta) { display: none; }
  .mh-nav-right { margin-left: auto; gap: 8px; }
  .mh-nav-toggle {
    display: inline-flex; margin-left: 4px; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-sm);
    color: var(--ink); cursor: pointer;
  }
  .mh-nav.is-open { flex-wrap: wrap; }
  .mh-nav.is-open .mh-nav-links {
    display: flex; flex-direction: column; width: 100%; order: 3; gap: 2px; margin: 8px 0 4px;
  }
  .mh-nav.is-open .mh-nav-links a { padding: 12px 8px; font-size: 15px; }
}
@media (max-width: 560px) {
  .mh-nav-right .mh-cta { display: none; }   /* the hero carries its own CTA */
}

/* the old decorative header inside .wrap — hide it, the nav replaces it */
.wrap > header { display: none; }

/* ── account control (avatar + menu), shared by nav and kundli ──── */
.mh-acct { position: relative; display: inline-flex; align-items: center; }
.mh-acct-float { position: fixed; top: 16px; right: 66px; z-index: 210; }
.mh-acct-in {
  border: 1px solid var(--rule); background: transparent; color: var(--ink);
  font-family: var(--font-heading); font-weight: 700; font-size: 13.5px;
  padding: 9px 18px; border-radius: var(--pill); cursor: pointer;
}
.mh-acct-in:hover { border-color: var(--brass); color: var(--brass); }
.mh-acct-btn {
  position: relative; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  cursor: pointer; border: 1px solid var(--rule); background: var(--wall-lit);
  overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
}
.mh-acct-btn:hover { border-color: var(--brass); }
.mh-acct-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-acct-ini { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--brass); }
.mh-acct-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 216px;
  gap: 2px; padding: 12px;
  background: var(--wall-lit); border: 1px solid var(--rule);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 502;
}
.mh-acct-menu.is-open { display: grid; }
.mh-acct-menu .nm { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--teak-dk); }
.mh-acct-menu .em {
  font-size: 12px; margin-bottom: 8px; word-break: break-all;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.mh-acct-menu button {
  text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm);
  padding: 9px 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.mh-acct-menu button:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--brass); }

/* ── Naksha FAB / panel must float above the sticky nav and cards ── */
.nk-fab { z-index: 500 !important; }
.nk-panel { z-index: 501 !important; }
@media (max-width: 640px) { .nk-panel.is-open { z-index: 501 !important; } }
@keyframes nk-fade { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ── buttons → pills everywhere ─────────────────────────────────── */
.go, button.go, .rd-pdf-btn, .nk-notify, .per, .pred-tab, .ct-tab, .svc-tab,
.wa-btn, .rd-full-link, .sw-add {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}
.go, button.go, .wa-btn {
  background: var(--brass) !important; color: #17110a !important;
  border: 0 !important; border-radius: var(--pill) !important;
  box-shadow: var(--glow);
  transition: transform .12s ease, filter .15s ease;
}
.go:hover, button.go:hover, .wa-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.rd-pdf-btn, .nk-notify {
  background: transparent !important; color: var(--brass) !important;
  border: 1px solid var(--brass) !important; border-radius: var(--pill) !important;
}
.per, .ct-tab, .pred-tab {
  border-radius: var(--pill) !important; border: 1px solid var(--rule) !important;
  background: transparent !important; color: color-mix(in srgb, var(--ink) 75%, transparent) !important;
}
.per.is-on, .ct-tab.is-on, .pred-tab.is-on,
.per.on, .ct-tab.on {
  background: var(--brass) !important; color: #17110a !important; border-color: var(--brass) !important;
}

/* ── cards / surfaces ──────────────────────────────────────────── */
.card, .svc-card, .sw-card, .rd, .pred-card, .tab-body, .dv, .dasha-card,
.d, .hz, .ct-hold, .form-card {
  background: var(--wall-lit) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
}
.card .form-body h2, .svc-card h3 { color: var(--teak-dk); }
.sub, .svc-sub, .say, .lede, .rd-f, .pred-note, .ct-key, footer, .card-body {
  color: color-mix(in srgb, var(--ink) 62%, transparent) !important;
}
.field input, .sw-p input, input[type="text"], input[type="date"], input[type="time"],
input[type="tel"], .wp-trigger, .nk-input, #nk-input {
  background: color-mix(in srgb, #000 28%, var(--wall-lit)) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink) !important;
}
.field input:focus-visible, .sw-p input:focus-visible, .wp-trigger:focus-visible {
  border-color: var(--brass) !important; outline: none;
}
.svc-tabs { border-bottom: 1px solid var(--rule); }
.svc-tab { color: color-mix(in srgb, var(--ink) 62%, transparent) !important; }
.svc-tab.is-on { color: var(--brass) !important; border-bottom-color: var(--brass) !important; }

/* ── social-proof ticker (added in the hero) ──────────────────── */
.mh-proof {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 18px 0 26px; font-size: 13px; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 66%, transparent);
}
.mh-proof .dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #46d17a; box-shadow: 0 0 8px #46d17a; }
.mh-proof b { color: var(--teak-dk); font-weight: 700; }

/* ── Naksha: identity + dark pill FAB, draggable + bouncy ─────── */
.nk-fab {
  background: var(--brass) !important; border: 0 !important;
  box-shadow: var(--glow), var(--shadow-md) !important;
  touch-action: none;
}
.nk-fab.nk-free { animation: nk-bob 5s ease-in-out infinite; }
.nk-fab.nk-free:hover, .nk-fab.nk-dragging, .nk-fab.is-hidden { animation: none; }
.nk-fab.nk-dragging { cursor: grabbing; transform: scale(1.08) !important; }
@keyframes nk-bob {
  0%, 62%, 100% { transform: translateY(0) scale(1) rotate(0); }
  68% { transform: translateY(-10px) scale(1.08, 0.92) rotate(-6deg); }
  74% { transform: translateY(0) scale(0.94, 1.06) rotate(4deg); }
  80% { transform: translateY(-4px) scale(1.03, 0.97) rotate(-2deg); }
  86% { transform: translateY(0) scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .nk-fab.nk-free { animation: none; } }
.nk-fab::after {
  content: "Naksha"; position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-heading); font-weight: 700; font-size: 13px;
  color: var(--teak-dk); background: var(--wall-lit);
  border: 1px solid var(--rule); border-radius: var(--pill);
  padding: 6px 12px; white-space: nowrap; box-shadow: var(--shadow-sm);
  pointer-events: none;
}
@media (max-width: 480px) { .nk-fab::after { font-size: 11.5px; padding: 5px 10px; } }
.nk-panel { background: var(--wall-lit) !important; border: 1px solid var(--rule) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; }
.nk-head { border-bottom: 1px solid var(--rule); }
.nk-head-txt b { font-size: 18px; color: var(--teak-dk); }
.nk-head-txt span { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.nk-msg { border-radius: var(--radius-md); font-size: 14px; }
.nk-msg.nk-bot { background: color-mix(in srgb, var(--brass) 9%, var(--wall-shade)) !important; color: var(--ink) !important; }
.nk-msg.nk-user { background: var(--brass) !important; color: #17110a !important; }
.nk-chip { border: 1px solid var(--rule) !important; border-radius: var(--pill) !important; background: transparent !important; color: var(--ink) !important; }
.nk-chip:hover { border-color: var(--brass) !important; color: var(--brass) !important; }
.nk-people { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 10px; }
.nk-people-h { width: 100%; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 50%, transparent); }
.nk-people .nk-chip { background: color-mix(in srgb, var(--brass) 12%, transparent) !important; border-color: color-mix(in srgb, var(--brass) 40%, transparent) !important; }
.nk-input-row { border-top: 1px solid var(--rule); }
.nk-send { background: var(--brass) !important; color: #17110a !important; }
.nk-quota { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.nk-head-mark circle { stroke: var(--brass) !important; }

/* ── Naksha panel: stable full-screen sheet on phones ─────────── */
.nk-panel, .nk-body { overscroll-behavior: contain; }
html.nk-scroll-lock { overflow: hidden !important; }
body.nk-scroll-lock { overflow: hidden !important; position: fixed !important; width: 100%; left: 0; right: 0; }
@media (max-width: 640px) {
  .nk-panel.is-open {
    position: fixed !important; inset: 0 !important;
    width: 100% !important; max-width: 100% !important;
    height: 100dvh !important; margin: 0 !important; border-radius: 0 !important;
    transform: none !important; z-index: 300;
  }
  .nk-body { flex: 1 1 auto; min-height: 0; }
}

/* ── Naksha proactive nudge ──────────────────────────────────── */
.nk-nudge {
  position: fixed; right: 22px; bottom: 92px; z-index: 60;
  width: 250px; max-width: calc(100vw - 44px); padding: 12px 30px 13px 14px;
  background: var(--wall-lit); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 13.5px; line-height: 1.45; cursor: pointer;
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.nk-nudge.is-in { opacity: 1; transform: none; }
.nk-nudge::after {
  content: ""; position: absolute; right: 22px; bottom: -6px; width: 11px; height: 11px;
  background: var(--wall-lit); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  transform: rotate(45deg);
}
.nk-nudge b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 12px; color: var(--brass); margin-bottom: 3px; }
.nk-nudge-x { position: absolute; top: 3px; right: 5px; width: 20px; height: 20px; line-height: 18px; text-align: center; border: 0; background: transparent; cursor: pointer; font-size: 15px; color: color-mix(in srgb, var(--ink) 45%, transparent); }
.nk-think { display: inline-flex; gap: 3px; align-items: center; height: 14px; }
.nk-think i { width: 5px; height: 5px; border-radius: 50%; background: var(--brass); display: block; animation: nk-nudge-dot 1s infinite ease-in-out; }
.nk-think i:nth-child(2) { animation-delay: .15s; }
.nk-think i:nth-child(3) { animation-delay: .3s; }
@keyframes nk-nudge-dot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 480px) { .nk-nudge { right: 16px; left: 16px; width: auto; bottom: 84px; } }
@media (prefers-reduced-motion: reduce) { .nk-nudge { transition: opacity .2s ease; } .nk-think i { animation: none; } }

/* ── Tarot flip cards ───────────────────────────────────────── */
:root { --tr-back: url("cards/back.png"); }
.tr-hint { font-size: 13px; color: var(--brass); margin: 16px 0 10px; }
.tr-fan { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 8px; }
.tr-fc { --w: 74px; width: var(--w); height: calc(var(--w) * 1.66); flex: none; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; transition: transform .18s ease, opacity .3s ease, width .3s ease, margin .3s ease; }
.tr-fc:hover:not(.is-picked):not(.is-flipped) { transform: translateY(-6px); }
.tr-fc.is-picked { transform: translateY(-10px); }
.tr-fc.is-gone { opacity: 0; width: 0; margin-left: -3px; margin-right: -3px; pointer-events: none; }
.tr-fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tr-fc.is-flipped .tr-fc-inner { transform: rotateY(180deg); }
.tr-fc-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px 6px;
  background-size: cover; background-position: center;
}
.tr-fc-back {
  border: 1px solid color-mix(in srgb, var(--brass) 55%, transparent);
  background:
    radial-gradient(60% 60% at 50% 42%, color-mix(in srgb, var(--brass) 16%, transparent), transparent 75%),
    linear-gradient(155deg, #1b1712, #0e0b08);
  box-shadow: inset 0 0 22px -6px color-mix(in srgb, var(--brass) 40%, transparent),
              0 8px 22px -8px rgba(0,0,0,.7);
}
.tr-fc-back .tr-gl { width: 58%; height: auto; color: var(--brass);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--brass) 70%, transparent));
  animation: tr-glow 3.2s ease-in-out infinite; }
.tr-fc-front {
  transform: rotateY(180deg);
  gap: 5px;
  font-family: var(--font-heading); font-weight: 700; font-size: 11px; line-height: 1.15;
  color: var(--teak-dk);
  border: 1px solid var(--brass);
  background-image: var(--img, none);
  background-color: color-mix(in srgb, var(--brass) 14%, #14100b);
  box-shadow: inset 0 0 20px -8px color-mix(in srgb, var(--brass) 60%, transparent);
}
.tr-fc-front .tr-gl { width: 30%; color: color-mix(in srgb, var(--brass) 85%, transparent); }
.tr-fc-front[style*="--img"] .tr-gl,
.tr-fc-front[style*="--img"] .tr-nm { text-shadow: 0 1px 4px #000; }
.tr-fc.is-rev .tr-fc-front { transform: rotateY(180deg) rotate(180deg); }
@keyframes tr-glow {
  0%, 100% { opacity: .8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .tr-fc-back .tr-gl { animation: none; } }
.tr-legend { display: flex; flex-direction: column; gap: 6px; margin: 20px 0 4px; }
.tr-leg { font-size: 13.5px; }
.tr-leg .p { display: inline-block; min-width: 130px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.tr-leg b { font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--teak-dk); }
.tr-leg .r { font-size: 11px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.tr-reading { margin-top: 14px; line-height: 1.7; white-space: pre-wrap; }
@media (max-width: 480px) { .tr-fc { --w: 52px; } .tr-leg .p { display: block; min-width: 0; } }
@media (prefers-reduced-motion: reduce) { .tr-fc-inner { transition: none; } }

/* ── Wheel date/time picker (shared, wheelpicker.js) ───────────── */
.wp-trigger {
  width: 100%; min-height: 44px; padding: 0 12px; text-align: left;
  font-family: var(--font-body); font-size: 15px;
  display: flex; align-items: center; cursor: pointer;
  background: color-mix(in srgb, #000 28%, var(--wall-lit)) !important;
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.wp-trigger.has-value { color: var(--ink); }
.wp-trigger:focus-visible { outline: none; border-color: var(--brass); }
.wp-overlay {
  position: fixed; inset: 0; z-index: 400; display: none;
  background: rgba(0,0,0,.6); align-items: flex-end; justify-content: center;
}
.wp-overlay.is-open { display: flex; }
@media (min-width: 640px) { .wp-overlay { align-items: center; } }
.wp-sheet {
  background: var(--wall-lit); border: 1px solid var(--rule);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
@media (min-width: 640px) { .wp-sheet { border-radius: var(--radius-lg); } }
.wp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.wp-head .wp-title { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--teak-dk); }
.wp-done { background: var(--brass); color: #17110a; border: 0; border-radius: var(--pill); padding: 9px 20px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; cursor: pointer; }
.wp-cols { display: flex; height: 210px; position: relative; padding: 0 16px; }
.wp-hl { position: absolute; top: 84px; left: 16px; right: 16px; height: 42px; border-top: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); pointer-events: none; }
.wp-col { flex: 1; height: 210px; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.wp-col::-webkit-scrollbar { display: none; }
.wp-spacer { height: 84px; }
.wp-item { height: 42px; line-height: 42px; text-align: center; scroll-snap-align: center; font-size: 16px; color: color-mix(in srgb, var(--ink) 45%, transparent); transition: color .12s, font-size .12s; }
.wp-item.is-sel { font-weight: 700; color: var(--brass); font-size: 19px; }

/* ── "Pick a saved person" dropdown ──────────────────────────── */
.mh-people-wrap { margin-bottom: 14px; }
.mh-people {
  width: 100%; max-width: 340px; min-height: 40px; padding: 8px 12px;
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
  color: var(--ink);
  background: color-mix(in srgb, var(--brass) 10%, var(--wall-lit));
  border: 1px dashed color-mix(in srgb, var(--brass) 55%, transparent);
  border-radius: var(--radius-md);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.mh-people[hidden] { display: none; }
.mh-people option { background: var(--wall-lit); color: var(--ink); }
.sw-p .mh-people-row { grid-column: 1 / -1; max-width: 100%; margin-bottom: 4px; }

/* ── Swayamvar ─────────────────────────────────────────────── */
.sw-card { display: block; }
.sw-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; }
@media (max-width: 720px) { .sw-grid { grid-template-columns: 1fr; gap: 18px; } }
.sw-you h3, .sw-partners h3 { font-family: var(--font-heading); font-weight: 700; font-size: 16px; color: var(--teak-dk); margin: 0 0 10px; }
.sw-count { color: var(--brass); font-size: 13px; }
.sw-role { display: flex; gap: 16px; margin-top: 6px; }
.sw-radio { font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.sw-p { display: grid; grid-template-columns: 1.2fr 1fr .8fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.sw-p input { width: 100%; min-height: 38px; padding: 6px 9px; font: inherit; font-size: 14px; }
.sw-rm { width: 30px; height: 30px; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--brass); cursor: pointer; font-size: 16px; line-height: 1; }
.sw-rm:disabled { opacity: .35; cursor: default; }
@media (max-width: 560px) { .sw-p { grid-template-columns: 1fr 1fr; } .sw-p .sw-rm { grid-column: 2; justify-self: end; } }
.sw-add { font-family: var(--font-heading); font-size: 13px; color: var(--brass); background: transparent; border: 1px dashed var(--brass); border-radius: var(--pill); padding: 8px 14px; cursor: pointer; margin-top: 2px; }
.sw-add:disabled { opacity: .4; cursor: default; }
.sw-best { font-size: 15px; margin: 6px 0 12px; }
.sw-best b { font-family: var(--font-heading); font-weight: 700; color: var(--brass); font-size: 18px; }
.sw-summary { margin-top: 16px; line-height: 1.7; white-space: pre-wrap; font-size: 14.5px; }
.sw-signin {
  margin-top: 14px; font-size: 13.5px; padding: 12px 14px;
  border: 1px dashed color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: var(--radius-md); color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.sw-tbl td.num, .sw-tbl th:nth-child(3) { white-space: nowrap; }
.sw-tbl tr.is-best td { background: color-mix(in srgb, var(--brass) 14%, transparent); font-weight: 700; }
.sw-tbl tr.is-best td:first-child { box-shadow: inset 3px 0 0 var(--brass); }