/* ==========================================================================
   Jyotish — design system
   --------------------------------------------------------------------------
   The palette is taken from two real sources rather than invented: the
   Navagraha ratna (the nine gemstones traditionally assigned to the planets)
   and the colour of the sky at brahma-muhurta, the hour before dawn when
   these observations were historically made.

   Consequence: the dark theme is the *primary* theme here, not an afterthought.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */

:root {
  /* Night sky — the substrate everything sits on */
  --void:        #0B0A1F;
  --void-2:      #14122E;
  --void-3:      #1E1B3F;
  --void-4:      #2A2657;

  /* Navagraha ratna */
  --kesari:      #FF8A3D;   /* marigold / Surya      */
  --sindoor:     #E8384F;   /* coral / Mangal        */
  --haldi:       #FFC93C;   /* yellow sapphire / Guru*/
  --neel:        #4A3AFF;   /* blue sapphire / Shani */
  --tulsi:       #16A34A;   /* emerald / Budh        */
  --moti:        #F4F1FF;   /* pearl / Chandra       */
  --heera:       #C9B6FF;   /* diamond / Shukra      */
  --gomed:       #A855F7;   /* hessonite / Rahu      */
  --lehsunia:    #7DD3FC;   /* cat's eye / Ketu      */

  /* Sandalwood paper, for the light theme */
  --paper:       #FFF9F0;
  --paper-2:     #FFF3E4;
  --ink:         #1A1630;

  /* Semantic — remapped wholesale by [data-theme] */
  --bg:          var(--void);
  --surface:     var(--void-2);
  --surface-2:   var(--void-3);
  --border:      rgba(244, 241, 255, 0.10);
  --border-firm: rgba(244, 241, 255, 0.18);
  --text:        #EDE9FE;
  --text-soft:   #A9A3C9;
  --text-faint:  #6F6992;
  --accent:      var(--kesari);
  --accent-ink:  #1A1000;

  --ok:      var(--tulsi);
  --warn:    var(--haldi);
  --danger:  var(--sindoor);

  /* Gradients. Each has a reason, not just a pair of colours. */
  --grad-dawn:    linear-gradient(135deg, #FF8A3D 0%, #E8384F 55%, #A855F7 100%);
  --grad-dusk:    linear-gradient(135deg, #4A3AFF 0%, #A855F7 60%, #E8384F 100%);
  --grad-gold:    linear-gradient(135deg, #FFC93C 0%, #FF8A3D 100%);
  --grad-cosmos:  radial-gradient(ellipse 120% 80% at 50% -20%, #2A2657 0%, transparent 70%);
  --grad-glass:   linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  --grad-text:    linear-gradient(100deg, #FFC93C, #FF8A3D 40%, #E8384F 75%, #C9B6FF);

  /* Type */
  --font-display: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif;
  --font-body:    'Mukta', 'Noto Sans Devanagari', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  /* A modular scale, ratio 1.25, fluid between 380px and 1280px */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.22vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.17rem + 0.38vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.42rem + 0.65vw, 2.00rem);
  --step-3:  clamp(1.95rem, 1.71rem + 1.05vw, 2.75rem);
  --step-4:  clamp(2.44rem, 2.04rem + 1.75vw, 3.75rem);

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;

  --r-sm: 8px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.28);
  --shadow-2: 0 6px 20px -6px rgba(0,0,0,.45);
  --shadow-3: 0 24px 60px -20px rgba(0,0,0,.65);
  --glow:     0 0 40px -8px rgba(255,138,61,.45);

  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       220ms;

  --header-h: 64px;
  --tabbar-h: 60px;
  --wrap: 1200px;
}

[data-theme="light"] {
  --bg:          var(--paper);
  --surface:     #FFFFFF;
  --surface-2:   var(--paper-2);
  --border:      rgba(26, 22, 48, 0.10);
  --border-firm: rgba(26, 22, 48, 0.20);
  --text:        var(--ink);
  --text-soft:   #57506F;
  --text-faint:  #8A82A6;
  --accent:      #D2621B;      /* darkened so it passes AA on paper */
  --accent-ink:  #FFFFFF;
  --grad-cosmos: radial-gradient(ellipse 120% 80% at 50% -20%, #FFE9CE 0%, transparent 70%);
  --grad-glass:  linear-gradient(160deg, rgba(26,22,48,.04), rgba(26,22,48,.01));
  --grad-text:   linear-gradient(100deg, #B45309, #D2621B 40%, #C2264A 75%, #6D28D9);
  --shadow-2:    0 6px 20px -8px rgba(90, 60, 20, .22);
  --shadow-3:    0 24px 60px -24px rgba(90, 60, 20, .30);
  --glow:        0 0 40px -10px rgba(210,98,27,.30);
}

/* ---------- 2. Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Prevents the address bar from resizing the layout mid-scroll on mobile */
  height: -webkit-fill-available;
}

body {
  background: var(--bg);
  background-image: var(--grad-cosmos);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--kesari); color: #1A1000; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

/* Devanagari needs more leading than Latin at the same size, and a slightly
   lower cap — otherwise matras collide with the line above. */
:lang(hi) body, [lang="hi"] { line-height: 1.85; }
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3 { line-height: 1.35; letter-spacing: 0; }

.display { font-family: var(--font-display); }
.mono    { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }

/* Degrees, times and longitudes. An ephemeris is an instrument table, so it
   should read like one: tabular figures, tight tracking, no line wrap. */
.figure {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for the handful of engines that ignore background-clip */
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.muted { color: var(--text-soft); }
.faint { color: var(--text-faint); }

/* ---------- 4. Layout ---------- */

.wrap {
  width: min(100% - 2rem, var(--wrap));
  margin-inline: auto;
}

.wrap-narrow { width: min(100% - 2rem, 780px); margin-inline: auto; }

.section { padding-block: var(--sp-7); }

.stack > * + * { margin-top: var(--flow, var(--sp-4)); }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.spacer { flex: 1; }

/* ---------- 5. Surfaces ---------- */

.card {
  background: var(--surface);
  background-image: var(--grad-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}

/* A one-pixel gradient hairline along the top edge. Reads as light catching
   a raised surface rather than as decoration. */
.card--lit::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--grad-dawn);
  opacity: .7;
}

.card--interactive {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease);
}

.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  border-color: var(--border-firm);
}

.card--interactive:active { transform: translateY(-1px) scale(.995); }

.panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

/* ---------- 6. Buttons ---------- */

.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.7rem 1.3rem;
  min-height: 44px;              /* iOS touch target floor */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--border-firm);
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: var(--step-0);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 140ms var(--ease-out), filter var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--grad-dawn);
  color: #180B00;
  border-color: transparent;
  box-shadow: var(--glow);
}

.btn--gold { background: var(--grad-gold); color: #241400; border-color: transparent; }

.btn--ghost { background: transparent; border-color: var(--border-firm); }

.btn--block { width: 100%; }

.btn--lg { padding: 0.95rem 1.9rem; font-size: var(--step-1); min-height: 52px; }

.btn--sm { padding: 0.4rem 0.9rem; font-size: var(--step--1); min-height: 36px; }

/* ---------- 7. Forms ---------- */

.field { display: grid; gap: var(--sp-2); }

.label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: .02em;
}

.input, .select, .textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  min-height: 48px;             /* 16px+ font stops iOS zooming on focus */
  font-size: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border-firm);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,138,61,.18);
}

.input::placeholder { color: var(--text-faint); }

.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A9A3C9' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.field-error { color: var(--danger); font-size: var(--step--1); }

.help { color: var(--text-faint); font-size: var(--step--1); }

/* ---------- 8. Badges, chips, pills ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .2em .7em;
  border-radius: var(--r-full);
  font-size: var(--step--1);
  font-weight: 600;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.badge--hot   { background: var(--grad-dawn); color: #180B00; border-color: transparent; }
.badge--new   { background: var(--tulsi); color: #04140A; border-color: transparent; }
.badge--retro { background: rgba(232,56,79,.15); color: var(--sindoor); border-color: rgba(232,56,79,.3); }

/* ---------- 9. Tables ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md); }

.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }

.table th {
  text-align: start;
  padding: .7rem .9rem;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-firm);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.table td {
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:hover td { background: var(--surface-2); }

.table td.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: end; }

/* ---------- 10. Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

.brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: var(--step-1); }

.brand__mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--grad-dawn);
  border-radius: 10px;
  box-shadow: var(--glow);
  flex: none;
}

.nav { display: flex; align-items: center; gap: var(--sp-1); }

.nav__link {
  padding: .5rem .85rem;
  border-radius: var(--r-full);
  font-weight: 500;
  color: var(--text-soft);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.nav__link:hover, .nav__link[aria-current="page"] { color: var(--text); background: var(--surface-2); }

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform 140ms var(--ease-out);
}

.icon-btn:hover { background: var(--surface-2); }
.icon-btn:active { transform: scale(.92); }

/* Dropdown (language switcher, user menu) */
.dropdown { position: relative; }

.dropdown__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + .5rem);
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-firm);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease-out), visibility 160ms;
  z-index: 70;
}

.dropdown[data-open="true"] .dropdown__menu { opacity: 1; visibility: visible; transform: none; }

.dropdown__item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%;
  padding: .55rem .7rem;
  border: 0; background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: start;
}

.dropdown__item:hover { background: var(--surface-2); }
.dropdown__item[aria-selected="true"] { color: var(--accent); font-weight: 600; }

/* ---------- 11. Tool slider (the pinned calculators) ---------- */

.slider {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--sp-2) 1rem var(--sp-4);
  margin-inline: -1rem;
  scroll-padding-inline: 1rem;
}

.slider::-webkit-scrollbar { display: none; }

.slider__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 150px;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  border-radius: var(--r-lg);
  background: var(--surface);
  background-image: var(--grad-glass);
  border: 1px solid var(--border);
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease);
}

.slider__item:hover { transform: translateY(-4px); border-color: var(--border-firm); }

.slider__icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--sp-3);
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--grad-dusk);
  color: #fff;
}

.slider__label { font-weight: 600; font-size: var(--step--1); line-height: 1.35; }

/* ---------- 12. The chakra (hero kundli) ---------- */

.chakra { width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 1; }

.chakra__frame  { fill: none; stroke: url(#chakraGrad); stroke-width: 1.5; }
.chakra__inner  { fill: none; stroke: var(--border-firm); stroke-width: 1; }
.chakra__house  { fill: var(--text-faint); font-family: var(--font-mono); font-size: 11px; }
.chakra__graha  { fill: var(--haldi); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

.chakra--spin { animation: chakra-spin 90s linear infinite; transform-origin: center; }

@keyframes chakra-spin { to { transform: rotate(360deg); } }

/* A slow pulse on the outer ring — reads as an instrument that is live,
   not as a loading state. */
.pulse-ring { animation: pulse-ring 4s var(--ease) infinite; transform-origin: center; }

@keyframes pulse-ring {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.015); }
}

/* ---------- 13. Ad slots ---------- */

/* Reserving the height stops layout shift, which is both a Core Web Vitals
   metric and the single most irritating thing an ad can do to a reader. */
.ad-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: var(--sp-5);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  min-height: var(--ad-h, 100px);
  background: var(--surface-2);
  border: 1px dashed var(--border);
}

.ad-slot::before {
  content: attr(data-label);
  position: absolute;
  top: 4px; inset-inline-start: 8px;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ad-slot--filled { border-style: solid; background: transparent; }

.ad-slot--sticky-mobile {
  position: fixed;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  inset-inline: 0;
  z-index: 55;
  margin: 0;
  border-radius: 0;
  min-height: 56px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
}

/* ---------- 14. Mobile app shell ---------- */

.tabbar { display: none; }

@media (max-width: 860px) {
  .nav--desktop { display: none; }

  .tabbar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border);
  }

  .tabbar__item {
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-faint);
    padding-top: 6px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color 160ms var(--ease);
  }

  .tabbar__item[aria-current="page"] { color: var(--accent); }

  /* The active pip — the small detail that makes a web page read as an app */
  .tabbar__item[aria-current="page"]::after {
    content: '';
    position: absolute;
    top: 0;
    width: 22px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--grad-dawn);
  }

  .tabbar__item:active { transform: scale(.94); }

  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  .section { padding-block: var(--sp-6); }
}

/* Bottom sheet — used for filters and the place picker on mobile */
.sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  max-height: 86dvh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--border-firm);
  padding: var(--sp-5) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);
  box-shadow: var(--shadow-3);
}

.sheet[data-open="true"] { transform: none; }

.sheet__grabber {
  width: 40px; height: 4px;
  border-radius: var(--r-full);
  background: var(--border-firm);
  margin: 0 auto var(--sp-4);
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(5, 4, 15, .6);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 260ms;
}

.scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* ---------- 15. Utilities ---------- */

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  padding: .8rem 1.2rem;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 0 0 var(--r-md) 0;
}

.skip-link:focus { inset-inline-start: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.hide-mobile  { }
.hide-desktop { display: none; }

@media (max-width: 860px) {
  .hide-mobile  { display: none !important; }
  .hide-desktop { display: revert; }
}

.divider { height: 1px; background: var(--border); border: 0; margin-block: var(--sp-5); }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  color: transparent;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- 16. Print — people do print their kundli ---------- */

@media print {
  .site-header, .tabbar, .ad-slot, .btn, .sheet, .scrim, .no-print { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .chakra--spin { animation: none; }
  a[href]::after { content: ''; }
}

/* An element told to hide must hide. Without this a display rule on the
   button overrides the attribute, and it sits there looking clickable while
   nothing has offered to install anything. */
[hidden] { display: none !important; }





/* ---------- Place field ---------- */

.field { position: relative; }

.place-arrow {
  position: absolute;
  inset-inline-end: .6rem;
  bottom: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 160ms, transform 200ms;
}

.place-arrow:hover { color: var(--accent); }
.place-arrow[data-open="true"] { transform: rotate(180deg); color: var(--accent); }

/* Its own panel rather than an animated dropdown: opacity and visibility are
   set outright, so nothing is left mid-transition. */
[id$="place-results"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  background: #211C3D;
  border: 1px solid #37305E;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(5, 4, 15, .55);
  margin-top: .4rem;
  padding: .35rem;
  scrollbar-width: thin;
  scrollbar-color: #4A4278 transparent;
}

[id$="place-results"][hidden] { display: none; }

[id$="place-results"]::-webkit-scrollbar { width: 8px; }
[id$="place-results"]::-webkit-scrollbar-track { background: transparent; }
[id$="place-results"]::-webkit-scrollbar-thumb {
  background: #4A4278;
  border-radius: 8px;
}

[id$="place-results"] .dropdown__item {
  display: block;
  width: 100%;
  text-align: start;
  padding: .62rem .8rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #F2EFFF;
  font: inherit;
  line-height: 1.35;
  cursor: pointer;
  opacity: 1;
}

[id$="place-results"] .dropdown__item:hover,
[id$="place-results"] .dropdown__item:focus {
  background: #322B57;
  color: #FF8A3D;
  outline: none;
}

[id$="place-results"] .help { color: #A9A3C9; }
/* Eight names instead of four. A list you have to scroll to see a second
   entry does not read as a list. */


/* The panel sets its own height. .dropdown__menu caps it far shorter and is
   declared later in the file, so this has to come after everything. */
[id$="place-results"].dropdown__menu { /* replaced below */
  max-height: 32rem;
  overflow-y: auto;
}

/* The place list, as tall as the screen sensibly allows.

   A fixed height in rem is wrong on a phone and wasteful on a desktop, so it
   is measured against the viewport instead: most of the screen, minus room
   for the field above it. The floor keeps it usable on a short window. */
[id$="place-results"],
[id$="place-results"].dropdown__menu {
  max-height: min(60vh, 34rem) !important;
  min-height: 14rem;
  overflow-y: auto !important;
}

@media (max-height: 640px) {
  [id$="place-results"],
  [id$="place-results"].dropdown__menu {
    max-height: 55vh !important;
    min-height: 10rem;
  }
}

/* The card clips its children — border-radius needs that — so an absolutely
   positioned panel inside it is cut at the card's edge however tall it is.
   Every height set on this list was correct and none of them could show.

   Fixed positioning takes it out of the card entirely; the script below gives
   it the coordinates, since a fixed element no longer follows the field. */
.field:has([id$="place-results"]:not([hidden])) { z-index: 60; }

[id$="place-results"] {
  position: fixed !important;
  max-height: min(62vh, 36rem) !important;
  overflow-y: auto !important;
  z-index: 200 !important;
}