/* Astroloje v3 for the signed-in app: diya mark, warm paper surfaces and the owner-made app art.
   Loads after v3-devotional.css (which supplies the Haldi / Sandhya tokens under body.v3). */

/* diya mark before the wordmark */
body.v3 .app-header__logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); }
body.v3 .app-header__logo::before {
  content: ""; width: 28px; height: 28px; flex: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 10c-6 7.5-9.5 13-9.5 18.5a9.5 9.5 0 0 0 19 0C41.5 23 38 17.5 32 10z' fill='%23F5A524'/><path d='M32 21c-2.8 3.8-4.4 6.4-4.4 9a4.4 4.4 0 0 0 8.8 0c0-2.6-1.6-5.2-4.4-9z' fill='%23FFF3C4'/><path d='M6 42h52c0 12-11.6 19-26 19S6 54 6 42z' fill='%23B8860B'/><path d='M6 42h52' stroke='%236E4A0B' stroke-width='2' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

/* serif for page titles, softer card edges */
body.v3 .app-shell__main h1, body.v3 .app-shell__main h2, body.v3 .reg-title, body.v3 .profile-greeting { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
body.v3 .app-card, body.v3 .journey-panel { border: 1px solid var(--border); box-shadow: 0 6px 18px var(--v3-shadow); border-radius: 16px; }
body.v3 .app-button--primary { box-shadow: 0 4px 14px var(--v3-glow); }

/* pooja-ghar banner on the dashboard and account screens */
body.v3[data-app-scene="pooja"] .app-shell__main::before {
  content: ""; display: block; width: calc(100% - 24px); max-width: 960px; margin: 12px auto 0; aspect-ratio: 4 / 1;
  border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 6px 18px var(--v3-shadow);
  background-image: image-set(url("/static/art/v1/app/pooja-ghar-header-800.avif") type("image/avif") 1x, url("/static/art/v1/app/pooja-ghar-header-1600.avif") type("image/avif") 2x, url("/static/art/v1/app/pooja-ghar-header-800.webp") type("image/webp") 1x, url("/static/art/v1/app/pooja-ghar-header-1600.webp") type("image/webp") 2x);
}

/* round scene on a card: waiting for the chart, nothing saved yet */
body.v3 .journey-panel--waiting::before, body.v3 .app-card--empty::before, body.v3 .empty-state::before {
  content: ""; display: block; width: 112px; height: 112px; margin: 0 auto 12px; border-radius: 50%; flex: none;
  background-size: cover; background-position: center; box-shadow: 0 4px 14px var(--v3-shadow);
}
body.v3 .journey-panel--waiting::before { background-image: image-set(url("/static/art/v1/app/waiting-scene-360.avif") type("image/avif") 1x, url("/static/art/v1/app/waiting-scene-720.avif") type("image/avif") 2x, url("/static/art/v1/app/waiting-scene-360.webp") type("image/webp") 1x, url("/static/art/v1/app/waiting-scene-720.webp") type("image/webp") 2x); }
body.v3 .app-card--empty::before, body.v3 .empty-state::before { background-image: image-set(url("/static/art/v1/app/empty-saved-360.avif") type("image/avif") 1x, url("/static/art/v1/app/empty-saved-720.avif") type("image/avif") 2x, url("/static/art/v1/app/empty-saved-360.webp") type("image/webp") 1x, url("/static/art/v1/app/empty-saved-720.webp") type("image/webp") 2x); }
body.v3 .app-card--empty { text-align: center; }
body.v3 .empty-state > i { display: none; }

/* the answer box: warm paper, not lavender */
body.v3 .bot-reply {
  position: relative; background: var(--bg-elevated); border: 1px solid var(--v3-brass); border-left-width: 4px; border-radius: 14px;
  box-shadow: 0 4px 14px var(--v3-shadow); padding-top: 56px; overflow: hidden;
}
body.v3 .bot-reply::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 40px; background-size: cover; background-position: center; opacity: .9;
  background-image: image-set(url("/static/art/v1/app/answer-paper-640.avif") type("image/avif") 1x, url("/static/art/v1/app/answer-paper-1280.avif") type("image/avif") 2x, url("/static/art/v1/app/answer-paper-640.webp") type("image/webp") 1x, url("/static/art/v1/app/answer-paper-1280.webp") type("image/webp") 2x);
}
body.v3 .user-question { background: rgba(245, 165, 36, .14); border-color: rgba(184, 134, 11, .45); }
body.v3.dark-mode .bot-reply { background: var(--bg-elevated); border-color: #B8860B; }

/* guided registration: a small picture beside each question */
body.v3 .reg-field:has(#name) .reg-label::before, body.v3 .reg-field:has(#date_of_birth) .reg-label::before,
body.v3 .reg-field:has(#time_of_birth) .reg-label::before, body.v3 .reg-field:has(#location_of_birth) .reg-label::before {
  content: ""; display: inline-block; width: 28px; height: 28px; margin-right: 8px; vertical-align: middle; border-radius: 50%;
  background-size: cover; background-position: center; box-shadow: 0 2px 6px var(--v3-shadow);
}
body.v3 .reg-field:has(#name) .reg-label::before { background-image: url("/static/art/v1/app/step1-name-360.webp"); }
body.v3 .reg-field:has(#date_of_birth) .reg-label::before { background-image: url("/static/art/v1/app/step2-date-360.webp"); }
body.v3 .reg-field:has(#time_of_birth) .reg-label::before { background-image: url("/static/art/v1/app/step3-time-360.webp"); }
body.v3 .reg-field:has(#location_of_birth) .reg-label::before { background-image: url("/static/art/v1/app/step4-place-360.webp"); }
body.v3 #stage-success::before {
  content: ""; display: block; width: 160px; height: 160px; margin: 0 auto 12px; border-radius: 50%;
  background: url("/static/art/v1/app/step5-done-360.webp") center / cover; box-shadow: 0 6px 18px var(--v3-shadow);
}
body.v3 #stage-success .reg-title, body.v3 #stage-success .reg-subtitle { text-align: center; }
body.v3 #stage-success .reg-actions { justify-content: center; }

/* spacing under the banner; the purple-tinted profile card turns saffron and cream */
body.v3[data-app-scene="pooja"] .app-shell__main::before { margin-bottom: 14px; }
body.v3 .profile-hero { background: linear-gradient(135deg, rgba(245,165,36,.16), rgba(179,38,30,.06)); border-color: rgba(184,134,11,.4); }
body.v3.dark-mode .profile-hero { background: linear-gradient(135deg, rgba(245,165,36,.20), rgba(179,38,30,.10)); }
body.v3 .reg-progress__fill { background: linear-gradient(90deg, #F5A524, #E8710A); }
body.v3 .app-button--primary, body.v3 .app-header__link--active { color: #2A1A08; }

/* notched phones in landscape: keep content clear of the cut-out (viewport-fit=cover is set on these pages) */
body.v3 { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* large text or narrow phones: the header row wraps instead of pushing the page wider (the diya mark adds width) */
body.v3 .app-header__container { flex-wrap: wrap; row-gap: 6px; }
body.v3 .app-header__logo { min-width: 0; }
body.v3 .signup-shell > *, body.v3 .reg-shell > * { min-width: 0; }
body.v3 .signup-card input, body.v3 .signup-card select, body.v3 .signup-card textarea { max-width: 100%; }
/* readable active tab on dark header (was dark text on dark) */
body.v3.dark-mode .app-header__link--active { color: #FFD76A; border-bottom: 2px solid #F5A524; }

/* dashboard: compact opening screen, the pooja art moves inside the greeting card */
body.v3[data-dashboard] .app-shell__main::before { display: none; }
body.v3[data-dashboard] .app-container { padding-top: 12px; }
body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: .5rem .9rem; margin: 0 0 .75rem; border-radius: 12px; }
body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) h2 { font-size: .9rem; margin: 0; }
body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) p { display: none; }
body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) .journey-actions { margin: 0; }
body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) .app-button { min-height: 34px; padding: 4px 12px; font-size: .8rem; }
body.v3[data-dashboard] .profile-hero { padding: 1rem 1.25rem; margin-bottom: .75rem; overflow: hidden; }
body.v3[data-dashboard] .profile-hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; pointer-events: none; opacity: .32; background-size: cover; background-position: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%); mask-image: linear-gradient(90deg, transparent, #000 65%); background-image: image-set(url("/static/art/v1/app/pooja-ghar-header-800.avif") type("image/avif") 1x, url("/static/art/v1/app/pooja-ghar-header-1600.avif") type("image/avif") 2x); }
body.v3[data-dashboard] .profile-hero__body, body.v3[data-dashboard] .credits-badge { position: relative; z-index: 1; }
body.v3[data-dashboard] .credits-badge { position: absolute; }
body.v3[data-dashboard] .profile-date { font-size: .78rem; opacity: .75; margin: 0 0 2px; }
body.v3[data-dashboard] .profile-greeting { margin-bottom: .4rem; }
body.v3[data-dashboard] .profile-links { margin-top: .6rem; padding-top: .55rem; }
body.v3[data-dashboard] .transit-preview { padding: 1rem 1.25rem; margin-bottom: .75rem; gap: 1rem; }
body.v3[data-dashboard] .transit-preview__title { font-size: 1.1rem; margin: 0 0 .25rem; }
body.v3[data-dashboard] .transit-preview__copy { font-size: .9rem; margin: .25rem 0 .5rem; }
body.v3[data-dashboard] .transit-preview__side { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
body.v3[data-dashboard] .transit-preview__side .app-button { grid-column: 1 / -1; margin-top: 4px !important; }
@media (max-width: 640px) {
  body.v3[data-dashboard] .profile-hero__body { flex-direction: row; align-items: center; gap: .75rem; }
  body.v3[data-dashboard] .lagna-badge { margin: 0; flex: 0 0 auto; transform: scale(.82); transform-origin: left center; }
  body.v3[data-dashboard] .profile-greeting, body.v3[data-dashboard] .profile-facts, body.v3[data-dashboard] .profile-links { text-align: left; justify-content: flex-start; }
  body.v3[data-dashboard] .profile-hero::before { width: 70%; opacity: .2; }
  body.v3[data-dashboard] .transit-preview__side { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body.v3[data-dashboard] .profile-date { display: none; }
  body.v3[data-dashboard] .profile-greeting { padding-right: 86px; }
  body.v3[data-dashboard] .profile-hero::before { opacity: .12; }
  body.v3[data-dashboard] .profile-links { gap: 6px; }
  body.v3[data-dashboard] .profile-pill { padding: 4px 10px; font-size: .76rem; }
  body.v3[data-dashboard] .profile-facts { gap: .5rem 1rem; }
}
@media (max-width: 640px) {
  body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) { flex-wrap: nowrap; }
  body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) h2 { font-size: .85rem; }
  body.v3[data-dashboard] .journey-panel:not(.journey-panel--waiting) .app-button { white-space: nowrap; }
  body.v3[data-dashboard] .transit-preview__side { padding: .6rem .8rem; }
  body.v3[data-dashboard] .transit-preview__metric { padding: 3px 0; }
}
body.v3[data-dashboard] .credits-badge { background: var(--bg-elevated, #fff); color: #8A5A00; border-color: rgba(184,134,11,.55); font-weight: 700; }
body.v3.dark-mode[data-dashboard] .credits-badge { color: #FFD76A; }