/* One final layout contract for every public page. Page styles may theme
   components, but they must not create a second viewport or scroll root. */
*, *::before, *::after { box-sizing: border-box; }
html {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

@media (max-width: 700px) {
  body.parchment-theme .picker-field { position: relative !important; }
  body.parchment-theme .picker-trigger {
    position: absolute !important;
    right: 8px !important;
    bottom: 7px !important;
    z-index: 2 !important;
    min-width: 38px !important;
    min-height: 28px !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(104,75,36,.18) !important;
    border-radius: 7px !important;
    background: #fffaf1 !important;
    color: #6f5738 !important;
    font: 700 10px/1 Inter, sans-serif !important;
  }
  body.parchment-theme .picker-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}
body.parchment-theme {
  width: 100%;
  min-width: 0 !important;
  min-height: 100%;
  height: auto !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
}
body.parchment-theme main,
body.parchment-theme .wrap,
body.parchment-theme .section-shell,
body.parchment-theme section,
body.parchment-theme footer {
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
}
body.parchment-theme main { display: block !important; overflow: visible !important; }
body.parchment-theme .wrap,
body.parchment-theme .section-shell,
body.parchment-theme > .site-header,
body.parchment-theme > .site-footer {
  width: min(1180px, calc(100% - 40px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.parchment-theme .site-header {
  position: relative !important;
  z-index: 30 !important;
  min-width: 0 !important;
}
body.parchment-theme img,
body.parchment-theme svg,
body.parchment-theme video,
body.parchment-theme canvas { max-width: 100%; }
body.parchment-theme input,
body.parchment-theme select,
body.parchment-theme textarea,
body.parchment-theme button { max-width: 100%; min-width: 0; }
body.parchment-theme table { max-width: 100%; }
body.parchment-theme pre { max-width: 100%; overflow-x: auto; }

@media (max-width: 700px) {
  body.parchment-theme > .site-header,
  body.parchment-theme > .site-footer {
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body.parchment-theme > .wrap,
  body.parchment-theme > .site-header,
  body.parchment-theme > .site-footer,
  body.parchment-theme .wrap,
  body.parchment-theme .section-shell {
    width: calc(100% - 24px) !important;
  }
  body.parchment-theme .site-header {
    width: 100% !important;
    min-height: 52px !important;
    height: auto !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
    border-radius: 13px !important;
  }
  body.parchment-theme .site-header .brand,
  body.parchment-theme .top .brand {
    min-width: 0 !important;
    max-width: calc(100% - 48px);
    overflow: hidden;
    white-space: nowrap;
  }
  body.parchment-theme .site-header .brand-mark,
  body.parchment-theme .top .brand-mark {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  body.parchment-theme .site-header .brand-mark img,
  body.parchment-theme .top .brand-mark img { width: 32px !important; height: 32px !important; object-fit: contain; }
  body.parchment-theme .site-header .brand-text { min-width: 0 !important; overflow: hidden; }
  body.parchment-theme .site-header .brand-text small { display: none !important; }
  body.parchment-theme .site-header .nav,
  body.parchment-theme .top .nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 10px !important;
    background: var(--bj-paper, #fffaf1) !important;
    border: 1px solid var(--bj-line, rgba(104,75,36,.18)) !important;
    border-radius: 14px !important;
    box-shadow: var(--bj-shadow, 0 14px 34px rgba(40,30,20,.14)) !important;
  }
  body.parchment-theme .site-header .nav.mobile-open,
  body.parchment-theme .top .nav.mobile-open { display: grid !important; }
  body.parchment-theme .site-header .nav a,
  body.parchment-theme .top .nav a {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center;
    padding: 10px 12px !important;
    white-space: normal !important;
  }
  body.parchment-theme .nav-toggle,
  body.parchment-theme .mobile-nav-toggle {
    display: inline-flex !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  body.parchment-theme main > section.section-shell,
  body.parchment-theme main > .section-shell,
  body.parchment-theme .hero,
  body.parchment-theme .content-section {
    width: calc(100% - 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    min-height: 0 !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
  body.parchment-theme .hero h1,
  body.parchment-theme .section-page-title { font-size: clamp(28px, 8.5vw, 42px) !important; line-height: 1.08 !important; }
  body.parchment-theme .section-heading h2,
  body.parchment-theme .chart-panel h2,
  body.parchment-theme .moon-copy h2,
  body.parchment-theme .newsletter h2 { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.12 !important; }
  body.parchment-theme .chart-form,
  body.parchment-theme .natal-form,
  body.parchment-theme .consultation-form,
  body.parchment-theme .form { grid-template-columns: 1fr !important; }
  body.parchment-theme .chart-form > *,
  body.parchment-theme .natal-form > *,
  body.parchment-theme .consultation-form > *,
  body.parchment-theme .form > * { grid-column: 1 / -1 !important; min-width: 0 !important; }
  /* Birth forms use a compact phone arrangement instead of seven stacked
     controls. Name/place and the action remain full width; compatible
     numeric/time fields share rows without shrinking below a usable size. */
  body.parchment-theme .birth-chart-page .chart-form,
  body.parchment-theme .hero-chart .chart-form,
  body.parchment-theme .match-person .chart-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body.parchment-theme .birth-chart-page .chart-form > label:first-child,
  body.parchment-theme .hero-chart .chart-form > label:first-child,
  body.parchment-theme .birth-chart-page .chart-form > label:nth-of-type(4),
  body.parchment-theme .hero-chart .chart-form > label:nth-of-type(4),
  body.parchment-theme .birth-chart-page .chart-form > label:nth-of-type(7),
  body.parchment-theme .hero-chart .chart-form > label:nth-of-type(7),
  body.parchment-theme .birth-chart-page .chart-form > button,
  body.parchment-theme .hero-chart .chart-form > button,
  body.parchment-theme .match-person .chart-form > label:first-child,
  body.parchment-theme .match-person .chart-form > label:nth-of-type(4),
  body.parchment-theme .match-person .chart-form > label:nth-of-type(7) {
    grid-column: 1 / -1 !important;
  }
  body.parchment-theme .birth-chart-page .chart-form > label,
  body.parchment-theme .hero-chart .chart-form > label,
  body.parchment-theme .match-person .chart-form > label { grid-column: auto !important; }
  body.parchment-theme .birth-chart-page .chart-form > label:first-child,
  body.parchment-theme .hero-chart .chart-form > label:first-child,
  body.parchment-theme .birth-chart-page .chart-form > label:nth-of-type(4),
  body.parchment-theme .hero-chart .chart-form > label:nth-of-type(4),
  body.parchment-theme .birth-chart-page .chart-form > label:nth-of-type(7),
  body.parchment-theme .hero-chart .chart-form > label:nth-of-type(7),
  body.parchment-theme .birth-chart-page .chart-form > button,
  body.parchment-theme .hero-chart .chart-form > button,
  body.parchment-theme .match-person .chart-form > label:first-child,
  body.parchment-theme .match-person .chart-form > label:nth-of-type(4),
  body.parchment-theme .match-person .chart-form > label:nth-of-type(7) { grid-column: 1 / -1 !important; }
  body.parchment-theme .birth-chart-page .chart-form > label,
  body.parchment-theme .hero-chart .chart-form > label,
  body.parchment-theme .match-person .chart-form > label { min-width: 0 !important; }
  body.parchment-theme .hero-chart .chart-form input,
  body.parchment-theme .hero-chart .chart-form select { min-width: 0 !important; padding: 11px 10px !important; }
  body.parchment-theme .birth-chart-page .chart-form input,
  body.parchment-theme .birth-chart-page .chart-form select,
  body.parchment-theme .match-person .chart-form input,
  body.parchment-theme .match-person .chart-form select { min-width: 0 !important; padding: 11px 10px !important; }
  body.parchment-theme .chart-panel,
  body.parchment-theme .consultation-panel,
  body.parchment-theme .package-card,
  body.parchment-theme .compatibility-card,
  body.parchment-theme .match-form-shell,
  body.parchment-theme .match-person,
  body.parchment-theme .south-card,
  body.parchment-theme .prediction-panel,
  body.parchment-theme .planet-table-card,
  body.parchment-theme .aspect-card,
  body.parchment-theme .house-card { padding: 16px !important; }
  body.parchment-theme .natal-layout,
  body.parchment-theme .birth-grid,
  body.parchment-theme .vedic-block,
  body.parchment-theme .consultation-layout,
  body.parchment-theme .seo-grid,
  body.parchment-theme .grid,
  body.parchment-theme .portal { grid-template-columns: 1fr !important; }
  body.parchment-theme .south-chart { width: 100% !important; max-width: 100% !important; }
  body.parchment-theme .quick-table,
  body.parchment-theme .planet-list { display: block; width: 100%; overflow-x: auto; }
  body.parchment-theme .quick-table table,
  body.parchment-theme .planet-list table { min-width: 520px; }
  body.parchment-theme .site-footer {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 36px !important;
  }
  body.parchment-theme .site-footer p { max-width: none !important; overflow-wrap: anywhere; }
  body.parchment-theme .astro-chat-panel { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 88px) !important; }
  body.parchment-theme .astro-chat-launcher {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: 150px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  body.parchment-theme .astro-chat-launcher {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: 150px !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }
  body.parchment-theme > header.site-header,
  body.parchment-theme > footer.site-footer { width: calc(100% - 24px) !important; }

  /* Mobile app rhythm: compact panels, clear steps, and no desktop-sized
     whitespace between the form and its generated output. */
  body.parchment-theme .section-heading { margin-bottom: 14px !important; }
  body.parchment-theme .section-heading > p:last-child,
  body.parchment-theme .lead,
  body.parchment-theme .chart-panel > p { line-height: 1.45 !important; }
  body.parchment-theme .eyebrow { margin-bottom: 8px !important; font-size: 10px !important; letter-spacing: .16em !important; }
  body.parchment-theme .btn { width: 100%; border-radius: 12px !important; padding: 11px 14px !important; }
  body.parchment-theme input,
  body.parchment-theme select,
  body.parchment-theme textarea {
    width: 100% !important;
    min-height: 44px !important;
    border: 1px solid rgba(104, 75, 36, .18) !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #2b241b !important;
    font: inherit !important;
    padding: 11px 12px !important;
  }
  body.parchment-theme textarea { min-height: 104px !important; }
  body.parchment-theme label { min-width: 0 !important; overflow-wrap: anywhere; }
  body.parchment-theme .hero-actions,
  body.parchment-theme .actions,
  body.parchment-theme .match-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  body.parchment-theme .sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  body.parchment-theme .sign-btn { min-height: 76px !important; padding: 11px !important; border-radius: 14px !important; }
  body.parchment-theme .sign-btn b { font-size: 21px !important; margin-bottom: 4px !important; }
  body.parchment-theme .horoscope-card { padding: 16px !important; border-radius: 18px !important; }
  body.parchment-theme .meter-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  body.parchment-theme .meter-row div { padding: 9px 6px !important; text-align: center; }
  body.parchment-theme .meter-row b { font-size: 15px !important; }
  body.parchment-theme .match-split-grid { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 12px !important; }
  /* Kundli is a comparison screen: keep Bride and Groom visible as two
     parallel cards even on phones. Their internal fields stay single-column
     so dates, places, and autocomplete remain usable. */
  body.parchment-theme.kundli-page .match-split-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  body.parchment-theme.kundli-page .match-person {
    min-width: 0 !important;
    padding: 10px !important;
  }
  body.parchment-theme.kundli-page .match-person .chart-form {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  body.parchment-theme.kundli-page .match-person .chart-form > label,
  body.parchment-theme.kundli-page .match-person .chart-form > label:first-child,
  body.parchment-theme.kundli-page .match-person .chart-form > label:nth-of-type(4),
  body.parchment-theme.kundli-page .match-person .chart-form > label:nth-of-type(7) {
    grid-column: 1 / -1 !important;
  }
  body.parchment-theme.kundli-page .match-person .chart-form input,
  body.parchment-theme.kundli-page .match-person .chart-form select { padding: 9px 7px !important; font-size: 11px !important; }
  body.parchment-theme .match-person { border-radius: 16px !important; }
  body.parchment-theme .match-person .chart-form label { font-size: 12px !important; }
  body.parchment-theme .match-summary-table-wrap { max-width: 100% !important; overflow-x: auto !important; }
  body.parchment-theme .match-summary-table { min-width: 420px !important; font-size: 12px !important; }
  body.parchment-theme .profile-table,
  body.parchment-theme .profile-key-table { width: 100% !important; table-layout: fixed; font-size: 12px !important; }
  body.parchment-theme .profile-table td,
  body.parchment-theme .profile-key-table td,
  body.parchment-theme .profile-key-table th { overflow-wrap: anywhere; word-break: normal; }
  body.parchment-theme .results-shell { margin-top: 12px !important; }
  body.parchment-theme .result-title { align-items: flex-start !important; flex-direction: column !important; gap: 6px !important; }
  body.parchment-theme .panchang-hero,
  body.parchment-theme .summary-section,
  body.parchment-theme .timings-panel { border-radius: 18px !important; }
  body.parchment-theme .hero-card-top { gap: 12px !important; }
  body.parchment-theme .hero-metrics { gap: 8px !important; }
  body.parchment-theme .hero-metric { padding: 10px !important; }
  body.parchment-theme .astro-chat-launcher { z-index: 1000 !important; }
  body.parchment-theme .astro-chat-panel { width: calc(100vw - 24px) !important; right: 12px !important; border-radius: 16px !important; }
}

/* The menu is part of the header flow. It must push the page down instead
   of covering the hero or form beneath it. */
@media (max-width: 700px) {
  body.parchment-theme .birth-results,
  body.parchment-theme .birth-results > *,
  body.parchment-theme .chart-card,
  body.parchment-theme .south-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.parchment-theme .chart-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
  }
  body.parchment-theme .chart-table {
    min-width: 620px !important;
    table-layout: fixed !important;
  }
  body.parchment-theme .chart-table th,
  body.parchment-theme .chart-table td {
    padding: 9px 8px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
  }
  body.parchment-theme .south-chart { min-width: 0 !important; }
  body.parchment-theme .chart-planet {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.parchment-theme.panchang-page .hero-card h1,
  body.parchment-theme.panchang-page .hero-copy h1 {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }
  body.parchment-theme.panchang-page .panchang-panel .panel-head h3 {
    font-size: 17px !important;
    line-height: 1.15 !important;
  }
  body.parchment-theme.panchang-page .daily-card h4 {
    font-size: 17px !important;
    line-height: 1.2 !important;
  }

  body.parchment-theme .site-header,
  body.parchment-theme .top {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
  }

  body.parchment-theme .site-header > .nav,
  body.parchment-theme .top > .nav {
    position: static !important;
    inset: auto !important;
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: max-height .2s ease, padding .2s ease, margin .2s ease !important;
  }

  body.parchment-theme .site-header > .nav.open,
  body.parchment-theme .site-header > .nav.mobile-open,
  body.parchment-theme .top > .nav.open,
  body.parchment-theme .top > .nav.mobile-open {
    max-height: 420px !important;
    padding: 8px 0 2px !important;
    margin-top: 8px !important;
    overflow: visible !important;
  }

  body.parchment-theme .site-header > nav.nav.open,
  body.parchment-theme .site-header > nav.nav.mobile-open,
  body.parchment-theme .top > nav.nav.open,
  body.parchment-theme .top > nav.nav.mobile-open {
    position: static !important;
    inset: auto !important;
    height: 326px !important;
    max-height: 326px !important;
  }

  body.parchment-theme .site-header > .nav a,
  body.parchment-theme .top > .nav a {
    width: 100% !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 10px 12px !important;
    white-space: normal !important;
    border-radius: 10px !important;
  }

  body.parchment-theme .astro-chat-launcher {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  body.parchment-theme .site-header > .nav-toggle,
  body.parchment-theme .top > .nav-toggle {
    display: inline-flex !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 1px solid var(--bj-line, rgba(104,75,36,.22)) !important;
    border-radius: 9px !important;
    background: var(--bj-paper, #fffaf1) !important;
    color: var(--bj-ink, #2c2117) !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
}

/* Desktop-safe date/time picker layout. */
body.parchment-theme .picker-field { position: relative; }
body.parchment-theme .picker-field > input:not(.picker-native) { padding-right: 58px; }
body.parchment-theme .picker-trigger { position: absolute; right: 8px; bottom: 7px; z-index: 2; min-width: 38px; min-height: 28px; padding: 4px 6px; border: 1px solid rgba(104,75,36,.18); border-radius: 7px; background: #fffaf1; color: #6f5738; font: 700 10px/1 Inter, sans-serif; cursor: pointer; }
body.parchment-theme .picker-native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Picker helper hardening: native controls must never occupy page layout. */
body.parchment-theme .picker-native { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }