/* IMPA polish layer. Loaded after styles.css, journey.css and premium.css.
   It refines colour consistency, type size, contrast and motion without changing the layout.
   To go back to the previous look, remove the <link> to this file from index.html. */

:root {
  /* Primary actions return to the brand maroon (the earlier dusty-mauve accent clashed with the maroon banner and the gold). */
  --mauve: var(--wine);
  --mauve-dark: var(--wine-dark);
  /* Slightly deeper tokens so small text meets 4.5:1 on the cream background. */
  --muted: #6e6058;
  --gold-text: #86591a;
}

/* ---- Colour consistency ---- */
.button-primary,
.member-mode .button-primary,
.member-main .button-primary,
.refined-profile-footer .button-primary { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.button-primary:hover,
.member-mode .button-primary:hover,
.member-main .button-primary:hover,
.refined-profile-footer .button-primary:hover { background: var(--wine-dark); border-color: var(--wine-dark); }
.button-primary { box-shadow: 0 8px 18px -10px rgba(120, 12, 33, .7); }
.button-primary:active { transform: translateY(0); box-shadow: none; }
.button-primary:disabled { box-shadow: none; }
.hero-progress > span { background: #eadfd2; }
.hero-progress .current { background: var(--wine); }
.hero-registration h2 { color: var(--wine); }
.hero-login button { color: var(--wine); font-weight: 500; }
.hero-login button:hover { text-decoration: underline; text-underline-offset: 3px; }
.profile-tabs button.selected { color: var(--wine); background: #f7eadb; }
.plan-featured { border-color: #b7833d; background: #fcf0dc; }
.plan li::before { color: var(--gold); }
.eyebrow { color: var(--gold-text); }
.begin-banner .eyebrow { color: #e3c18b; }
.preview-note { color: #e6cca4; }

/* ---- Readable type. Nothing below 10px, and body copy at 13px or more. ---- */
.topline, .topline-inner > span:first-child { font-size:var(--fs-hint); }
.preview-note { font-size:var(--fs-hint); }
.language-button { font-size:var(--fs-ui); }
.eyebrow { font-size:var(--fs-hint); }
.hero-tamil { font-size:var(--fs-body); }
.hero-footnote { font-size:var(--fs-body); }
.art-blessing p { font-size:var(--fs-body); }
.search-heading > span { font-size:var(--fs-body); }
.search-fields > label > span { font-size:var(--fs-ui); }
.reassurance, .reassurance > div { font-size:var(--fs-body); }
.profile-tabs button { font-size:var(--fs-ui); }
.results-line { font-size:var(--fs-body); }
.sample-note { font-size:var(--fs-hint); }
.sample-chip { font-size:var(--fs-hint); }
.profile-id { font-size:var(--fs-hint); }
.profile-basics, .profile-career { font-size:var(--fs-body); }
.profile-tags span { font-size:var(--fs-body); padding: 5px 10px; color: #7c5f36; }
.profile-card-actions .text-link { font-size:var(--fs-ui); }
.interest-button { font-size:var(--fs-ui); }
.discovery-bottom .text-link { font-size:var(--fs-ui); }
.step p { font-size:var(--fs-body); }
.approach-copy > .text-link { font-size:var(--fs-ui); }
.plan-ribbon { font-size:var(--fs-hint); letter-spacing: 1.2px; }
.plan-eyebrow { font-size:var(--fs-hint); }
.plan > p:not(.plan-eyebrow), .plan ul { font-size:var(--fs-body); }
.plan .button { font-size:var(--fs-ui); }
.begin-banner .eyebrow { font-size:var(--fs-hint); }
.begin-banner p[lang] { font-size:var(--fs-body); }
.footer-brand > p[lang], .footer-brand > p:last-child { font-size:var(--fs-body); }
.footer-links h3 { font-size:var(--fs-ui); }
.footer-links a, .footer-links button { font-size:var(--fs-ui); }
.footer-bottom, .footer-bottom button { font-size:var(--fs-ui); }
.form-field { font-size:var(--fs-ui); }
.nav-register { font-size:var(--fs-ui); }
.heritage-hero .eyebrow { font-size:var(--fs-hint); }
.heritage-values > span { font-size:var(--fs-hint); }
.hero-registration > .eyebrow { font-size:var(--fs-hint); }
.free-badge { font-size:var(--fs-hint); }
.hero-form-description { font-size:var(--fs-body); }
.hero-step-label { font-size:var(--fs-ui); }
.hero-registration .form-field { font-size:var(--fs-ui); }
.hero-registration .form-field input, .hero-registration .form-field select { font-size:var(--fs-ui); }
.hero-registration .button { font-size:var(--fs-ui); }
.hero-form-note { font-size:var(--fs-hint); }
.hero-login, .hero-login button { font-size:var(--fs-ui); }
.member-entry { font-size:var(--fs-ui); }
.membership-note { font-size:var(--fs-body); }
html[lang=ta] .eyebrow { font-size:var(--fs-hint); }
html[lang=ta] .desktop-nav { font-size:var(--fs-ui); }
html[lang=ta] .hero-description { font-size:var(--fs-body); }
html[lang=ta] .button { font-size:var(--fs-ui); }
html[lang=ta] .section-heading > div > p:last-child { font-size:var(--fs-body); }

/* ---- Cards: gentle lift, and the photo eases in rather than jumping ---- */
.profile-card { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.profile-card:hover, .profile-card:focus-within { transform: translateY(-4px); border-color: #d9bc90; box-shadow: 0 22px 44px -24px rgba(76, 12, 24, .4); }
.profile-image-wrap .portrait { transition: transform .6s ease; }
.save-button, .interest-button, .text-link { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.interest-button:hover { background: #f1dfc2; }
.interest-button.sent { color: var(--wine); }

/* ---- Keyboard users: a way past the header, and a visible target ---- */
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--wine); color: var(--paper); padding: 10px 16px; border-radius: 4px; font-size:var(--fs-body); transition: top .15s ease; }
.skip-link:focus { top: 10px; }

@media (prefers-reduced-motion: reduce) {
  .profile-card, .profile-image-wrap .portrait, .button-primary { transition: none; }
  .profile-card:hover, .profile-card:focus-within { transform: none; }
}

/* ---- Small screens: the top strip keeps to one line ---- */
@media (max-width: 560px) {
  .preview-note { display: none; }
  .topline-inner { justify-content: center; }
  .topline, .topline-inner > span:first-child { font-size:var(--fs-hint); white-space: nowrap; }
}

/* ---- Festival greeting: a calm, traditional band. Shown only while an admin-scheduled greeting is active. ---- */
.festival-band { position: relative; background: linear-gradient(180deg, #fbf2e1, #f9ecd3); border-top: 1px solid #ead7ac; border-bottom: 1px solid #dcc08f; }
.festival-band::after { content: ""; display: block; height: 7px; background: radial-gradient(circle, #b7833d 1.2px, transparent 1.7px) 0 50% / 14px 7px repeat-x; opacity: .55; }
.festival-inner { display: flex; align-items: center; justify-content: center; gap: 30px; padding: 22px 52px 16px; text-align: center; position: relative; }
.festival-inner.has-image { justify-content: flex-start; text-align: left; }
.festival-figure { margin: 0; flex: 0 0 auto; padding: 5px; background: #fffaf0; border: 1px solid #d9b774; border-radius: 4px; }
.festival-figure img { display: block; width: 210px; height: 118px; object-fit: cover; border-radius: 2px; }
.festival-copy { max-width: 780px; }
.festival-kicker { font-size:var(--fs-hint); letter-spacing: 2.2px; font-weight: 500; color: var(--gold-text); }
.festival-title { font-family: var(--serif); font-size: 30px; line-height: 1.3; color: var(--wine); margin: 4px 0 6px; }
.festival-message { font-size:var(--fs-body); color: #5b4a43; }
.festival-offer { display: inline-block; margin-top: 10px; padding-top: 8px; border-top: 1px solid #e0c692; font-size:var(--fs-body); color: var(--wine-dark); }
.festival-offer span { margin-right: 9px; font-size:var(--fs-hint); letter-spacing: 1.6px; text-transform: uppercase; color: var(--gold-text); }
.festival-close { position: absolute; right: 14px; top: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #7c5f36; }
.festival-close:hover { background: #f1dfc2; }
.festival-close .icon { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .festival-inner, .festival-inner.has-image { flex-direction: column; gap: 14px; padding: 22px 20px 14px; text-align: center; }
  .festival-figure img { width: 100%; max-width: 300px; height: auto; aspect-ratio: 16 / 9; }
  .festival-title { font-size: 24px; }
  .festival-message { font-size:var(--fs-body); }
}

/* ---- Admin page (admin.html) ---- */
.admin-main { max-width: 900px; padding: 36px 0 80px; }
.admin-tag { font-size:var(--fs-hint); letter-spacing: 2px; color: var(--gold-text); border: 1px solid #d9b774; border-radius: 3px; padding: 4px 9px; }
.admin-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 26px 28px; margin-bottom: 22px; }
.admin-card h1 { font-size:var(--fs-section); color: var(--wine); margin: 4px 0 8px; }
.admin-card p { color: var(--muted); font-size:var(--fs-body); }
.admin-narrow { max-width: 460px; margin: 40px auto; }
.admin-loading { color: var(--muted); padding: 40px 0; text-align: center; }
.admin-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.admin-thumb { width: 96px; height: 54px; flex: 0 0 auto; border: 1px solid #d9b774; border-radius: 3px; background: #fbf2e1; display: grid; place-items: center; overflow: hidden; font-size:var(--fs-hint); color: var(--muted); }
.admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.admin-row-text small { color: var(--muted); font-size:var(--fs-body); }
.admin-row-actions { display: flex; gap: 8px; }
.admin-row-actions .button { padding: 8px 14px; font-size:var(--fs-ui); min-height: 0; }
.admin-chip { font-size:var(--fs-hint); letter-spacing: .6px; padding: 4px 10px; border-radius: 20px; border: 1px solid var(--line); white-space: nowrap; }
.admin-chip-live { background: #e9f1e1; border-color: #b9d0a5; color: #3f5f2c; }
.admin-chip-scheduled { background: #fcf0dc; border-color: #e0c692; color: #7c5a1d; }
.admin-chip-paused, .admin-chip-ended { background: #f3ede6; color: #75665d; }
.admin-current-image { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; }
.admin-current-image img { width: 160px; height: 90px; object-fit: cover; border: 1px solid #d9b774; border-radius: 3px; }
.admin-card textarea { width: 100%; }
@media (max-width: 640px) { .admin-row { flex-wrap: wrap; } .admin-row-actions { width: 100%; } .admin-card { padding: 20px; } }

/* Tamil letters join into clusters; wide letter-spacing pulls them apart, so keep it tight in Tamil. */
html[lang=ta] .eyebrow, html[lang=ta] .festival-kicker, html[lang=ta] .festival-offer span,
html[lang=ta] .plan-eyebrow, html[lang=ta] .plan-ribbon, html[lang=ta] .hero-step-label, html[lang=ta] .search-fields > label > span { ; text-transform: none; }
html[lang=ta] .festival-kicker { font-size:var(--fs-body); }
html[lang=ta] .festival-offer span { font-size:var(--fs-body); }

/* Mobile festival close button sits above the picture instead of over it. */
@media (max-width: 720px) {
  .festival-inner, .festival-inner.has-image { padding-top: 46px; }
  .festival-close { top: 8px; right: 10px; }
}

/* The quick-navigation bar is for members; visitors see a clean page. Its labels were 8px. */
body:not(.signed-in) .mobile-bottom-nav { display: none; }
.mobile-bottom-nav > a, .mobile-bottom-nav > button { font-size:14px; color: #7c6a5f; }
.mobile-bottom-nav > .current, .mobile-bottom-nav > a:first-child { color: var(--wine); }

/* ---- Legal pages (privacy.html, terms.html) ---- */
.legal { max-width: 760px; padding: 48px 16px 80px; }
.legal h1 { font-family: var(--serif); font-size:var(--fs-section); color: var(--wine); margin: 4px 0 6px; }
.legal h2 { font-family: var(--serif); font-size:var(--fs-section); color: var(--wine); margin: 34px 0 8px; }
.legal p, .legal li { font-size:var(--fs-body); line-height:var(--lh); color: var(--ink); }
.legal ul { padding-left: 22px; display: grid; gap: 6px; }
.legal a { color: var(--wine); text-decoration: underline; text-underline-offset: 3px; }
.legal-meta { color: var(--muted); font-size:var(--fs-body); }
.legal-fill { background: #fff1c9; border-radius: 3px; padding: 0 4px; }
.consent-link { color: var(--wine); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Porutham (inside the Horoscope tab of a profile) ---- */
.porutham-box { margin-top: 22px; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; background: #fffaf0; }
.porutham-box h4 { font-family: var(--serif); font-size:var(--fs-card); color: var(--wine); margin: 0 0 6px; }
.porutham-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.porutham-score strong { font-family: var(--serif); font-size: 34px; color: var(--wine); line-height: 1; }
.porutham-score span { color: var(--muted); font-size:var(--fs-body); }
.porutham-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 22px; }
.porutham-list li { display: flex; align-items: center; gap: 9px; font-size:var(--fs-body); }
.porutham-list li::before { font-weight: 700; width: 16px; text-align: center; }
.porutham-list .ok::before { content: '✓'; color: #2f7a45; }
.porutham-list .no::before { content: '✗'; color: #a6112a; }
.porutham-list .unknown::before { content: '–'; color: var(--muted); }
.porutham-list .unknown { color: var(--muted); }
.porutham-note { margin: 14px 0 0; font-size:var(--fs-body); color: var(--muted); line-height:var(--lh); }
.porutham-flag { margin: 12px 0 0; padding: 9px 12px; border-radius: 6px; background: #fbeee6; border: 1px solid #ecc9b4; color: #7a3416; font-size:var(--fs-body); }
@media (max-width: 560px) { .porutham-list { grid-template-columns: 1fr; } }

/* ---- Admin tabs, photo review and reports ---- */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.admin-tabs button { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 9px 18px; font-size:var(--fs-ui); color: var(--ink); cursor: pointer; }
.admin-tabs button.active { background: var(--wine); border-color: var(--wine); color: var(--paper); }
.admin-tabs button b { margin-left: 6px; font-weight: 600; opacity: .85; }
.admin-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin-top: 14px; }
.admin-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.admin-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #f3e6d3; }
.admin-photo > div { padding: 10px 12px 12px; display: grid; gap: 8px; font-size:var(--fs-body); }
.admin-photo-actions { display: flex; gap: 8px; }
.admin-photo-actions .button { flex: 1; padding: 8px 10px; min-height: 0; font-size:var(--fs-ui); }
.admin-chip-open { background: #fcf0dc; border-color: #e0c692; color: #7c5a1d; }
.admin-note { margin: 4px 0 0; color: var(--ink); font-size:var(--fs-body); }
.admin-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-top: 14px; }
.admin-inline .form-field { flex: 1 1 180px; }
@media (max-width: 640px) { .admin-row { flex-wrap: wrap; } }

/* Offers on the landing page */
.offer-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:16px 0 32px}
.offer-card{border:1px solid #d9c9a8;border-radius:12px;background:#fffaf0;padding:16px}
.offer-card img{width:100%;height:auto;border-radius:8px}
.offer-card ul{padding-left:18px}
.offer-badge{display:inline-block;background:#791d3b;color:#fff;border-radius:999px;padding:2px 10px;font-size:.8rem}
.offer-countdown{font-weight:600;color:#791d3b}
.offer-popup{position:fixed;right:16px;bottom:16px;max-width:300px;background:#fffaf0;border:1px solid #d9c9a8;border-radius:12px;padding:14px 16px;box-shadow:0 6px 20px rgba(0,0,0,.18);z-index:40}
.offer-popup-close{position:absolute;top:2px;right:6px;min-width:44px;min-height:44px;background:none;border:0;font-size:1.4rem;cursor:pointer}
@media (max-width:640px){.offer-popup{left:12px;right:12px;bottom:76px;max-width:none}}
.admin-table{width:100%;border-collapse:collapse}.admin-table th,.admin-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #e6d9c8;vertical-align:top}.admin-scroll{overflow-x:auto}

.admin-row-text{min-width:0;overflow-wrap:anywhere}.admin-row{gap:12px}

/* Member flows: access requests, notes, private documents, deletion options */
.field-counter { margin: 4px 0 0; text-align: right; font-size:var(--fs-hint); color: var(--muted); }
.access-request { margin-top: 14px; display: grid; gap: 10px; }
.access-request .premium-soft-note { margin-top: 0; }
.access-message { margin: 0; font-size:var(--fs-body); line-height:var(--lh); color: var(--wine); }
.card-access { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 0; font-size:var(--fs-hint); color: var(--wine); min-height: 32px; background: none; border: 0; cursor: pointer; text-align: left; }
.card-access .icon { width: 13px; height: 13px; }
button.card-access:hover { text-decoration: underline; }
p.card-access { color: var(--muted); cursor: default; }
.horoscope-files-box { margin-top: 14px; }
.horoscope-files { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size:var(--fs-body); }
.horoscope-files small { color: var(--muted); margin-left: 6px; }
.member-note { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e0cfb4; font-size:var(--fs-hint); line-height:var(--lh); color: var(--ink); overflow-wrap: anywhere; }
.member-note p { margin: 0; }
.member-note-empty { color: var(--muted); }
.chat-header-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.chat-header-actions .text-link { font-size:var(--fs-ui); }
.chat-thread-header { flex-wrap: wrap; }
.delete-option { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #fffaf2; }
.delete-option h3 { margin: 0 0 6px; font-family: var(--sans); font-size:var(--fs-body); color: var(--wine); }
.delete-option p { margin: 0 0 12px; font-size:var(--fs-body); line-height:var(--lh); color: var(--muted); }
.delete-option .button { font-size:var(--fs-ui); }
.hidden-profile-row > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.hidden-profile-row .text-link { font-size:var(--fs-ui); }
@media (max-width: 640px) { .hidden-profile-row { flex-wrap: wrap; } }