/* The rashifal hub (templates/rashifal/page.html) and the 12 rashi pages (rashi.html), on top of page.css. The
   panchang's parchment and night colours and its patterns (hero, location card, chips, tables), copied here so the
   pages can change on their own. Three calm tones: green "supportive", gold "mixed", soft rust "a time for
   patience"; Chandrashtama the same rust. Text never moves: no animation or transition on any text. The only moving
   things are the Moon markers on the wheel and the star map (rashifal.js), and the hero's star canvas. */
.rf { --good: #2f6b4f; --good-bg: #dfe9df; --mix: #8a6d2b; --mix-bg: #f1e7cf; --care: #9a4426; --care-bg: #f0dfd4; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 1. opening */
.rf-hero { min-height: 0; padding: 64px 0 56px; align-items: stretch; }
.rf-hero h1 { max-width: 20ch; font-size: clamp(2.2rem, 5.2vw, 4.2rem); }
.ed[lang="hi"] .rf-hero h1 { font-size: clamp(2rem, 4.6vw, 3.6rem); }
.rf-hero .ed-lead { max-width: 62ch; margin-bottom: 20px; }
.rf-date { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--gold); margin: -8px 0 12px; }
.rf-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.rf-chip { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(242, 236, 224, .45); color: #f2ece0; background: rgba(255, 255, 255, .04); text-decoration: none;
  font: inherit; font-size: .95rem; cursor: pointer; }
.rf-chip:hover { background: rgba(255, 255, 255, .12); }
.rf-chip.on { background: var(--gold); border-color: var(--gold); color: var(--night); font-weight: 600; }
.rf-back { display: inline-block; width: .42em; height: .42em; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: rotate(45deg); margin-right: .15em; }
.rf-dateform { display: inline-flex; gap: 6px; align-items: center; }
.rf-dateform input { min-height: 44px; border-radius: 999px; border: 1px solid rgba(242, 236, 224, .45); background: rgba(255, 255, 255, .06);
  color: #f2ece0; padding: 0 14px; font: inherit; color-scheme: dark; }
.rf-city { color: #cfc8b8; margin: 0; font-size: .98rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rf-linkbtn { background: none; border: 0; color: var(--gold); font: inherit; cursor: pointer; padding: 10px 2px; text-decoration: underline; text-underline-offset: 3px; }
.rf-suggest { margin-left: 4px; padding: 8px 14px; border-radius: 999px; background: var(--gold); color: var(--night); text-decoration: none; font-weight: 600; }

/* 2. the location card (the panchang's) */
.rf-ask-band { background: var(--paper2); padding: 22px 0; border-bottom: 1px solid var(--line); }
.rf-ask { display: flex; gap: 16px; align-items: flex-start; background: #fbf6ea; color: var(--ink); border-radius: 8px;
  padding: 18px 22px; border-left: 4px solid var(--gold); box-shadow: 0 10px 26px rgba(21, 26, 44, .08); margin: 0; max-width: 820px; }
.rf-ask-band:has(.rf-ask[hidden]) { display: none; }
.rf-ask[hidden] { display: none; }
.rf-ask-pin { font-size: 1.5rem; line-height: 1; }
.rf-ask-h { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin: 0 0 6px; color: var(--rust); }
.rf-ask-p { margin: 0 0 12px; color: #3b3a40; max-width: 70ch; }
.rf-ask-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rf-ask .rf-chip { color: var(--ink); border-color: rgba(30, 30, 36, .3); background: rgba(255, 255, 255, .5); }
.rf-ask .rf-linkbtn { color: #6d665a; }
.rf-ask-small { margin: 10px 0 0; font-size: .88rem; color: #6d665a; }

/* 3. the owner's own block */
.rf-me-sec { padding: 48px 0; background: #fbf6ea; }
.rf-me { border-left: 3px solid var(--gold); padding-left: 18px; }

/* tones and polarity (calm: colour and a thin bar, never a score) */
.pol-good { --pc: var(--good); } .pol-neutral { --pc: var(--mix); } .pol-care { --pc: var(--care); } .pol-fact { --pc: #8a8273; }
.lab-supportive { --lc: var(--good); --lb: var(--good-bg); } .lab-patience { --lc: var(--care); --lb: var(--care-bg); }
.lab-chandrashtama { --lc: var(--care); --lb: var(--care-bg); }
.rf-tone { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .88rem; font-weight: 600; white-space: nowrap;
  color: #fff; background: var(--mix); }
.tone-supportive .rf-tone { background: var(--good); }
.tone-patience .rf-tone, .tone-chandrashtama .rf-tone { background: var(--care); }
.rf-tone.big { font-size: 1rem; padding: 6px 14px; }

/* 4. the 12 cards */
.rf-grid-sec { padding-top: 52px; }
.rf-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rf-card { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px 16px; border-radius: 8px;
  background: #fbf8f2; border: 1px solid var(--line); border-top: 4px solid var(--lc, var(--line)); color: var(--ink); text-decoration: none; }
.rf-card:hover, .rf-card:focus-visible { border-color: var(--lc); background: #fff; }
.rf-card-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rf-card-top b { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; }
.rf-card-top em { margin-left: auto; font-style: normal; font-size: .82rem; font-weight: 600; color: var(--lc); }
.rf-card-label { color: #6d665a; font-size: .8rem; }
.rf-card-moon { font-weight: 600; font-size: .95rem; }
.rf-card-parts { display: flex; flex-direction: column; font-size: .82rem; color: #6d665a; }
.rf-card-parts .main { color: var(--ink); }
.rf-card-line { color: #3b3a40; font-size: .9rem; line-height: 1.45; margin-top: 4px; }
.rf-card-go { margin-top: auto; padding-top: 8px; color: var(--rust); font-weight: 600; font-size: .88rem; }
.rf-glyph { font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", serif; color: var(--rust); font-size: 1.15em; }

/* the reading (rashi pages) */
.rf-head { padding: 18px 0 6px; }
.rf-line { margin: 10px 0 4px; line-height: 1.65; color: #2c2b31; }
.rf-line.rf-headline { font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.55rem); line-height: 1.45; color: var(--ink); }
.ed[lang="hi"] .rf-line.rf-headline { font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.7; }
.rf-line .pol-care { color: #7a3a22; }
.rf-line.rf-same { background: #fff8e6; border-left: 3px solid var(--gold); padding: 8px 12px; }
.rf-tone-row { margin: 12px 0 0; padding: 8px 12px; border-radius: 6px; background: #f6f1e6; border-left: 4px solid var(--pc); font-size: .95rem; color: #3b3a40; }
.rf-small { font-size: .95rem; color: #6d665a; }
.rf-h3 { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; margin: 26px 0 8px; color: var(--ink); display: inline-flex; gap: 6px; align-items: baseline; }
.rf-h4 { font-family: var(--serif); font-weight: 500; font-size: 1.15rem; margin: 16px 0 6px; }
.rf-areas { margin: 0; border-top: 1px solid var(--line); }
.rf-areas > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 18px; padding: 10px 0 10px 14px; border-bottom: 1px solid var(--line); position: relative; }
.rf-areas > div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 4px; background: var(--pc); }
.rf-areas dt { font-weight: 600; padding-top: 10px; }
.rf-areas dd { margin: 0; }
.rf-areas .rf-line { margin-top: 8px; }
.rf-sub { border-top: 1px solid var(--line); margin-top: 18px; }
.rf-sub > summary { list-style: none; cursor: pointer; padding: 4px 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.rf-sub > summary::-webkit-details-marker { display: none; }
.rf-sub > summary::after { content: "+"; color: var(--rust); font-size: 1.3rem; margin-left: auto; }
.rf-sub[open] > summary::after { content: "–"; }
.rf-sub > summary small { color: #6d665a; flex-basis: 100%; }
.rf-sub > summary .rf-h3 { margin: 14px 0 2px; }
.rf-sub.inner { margin-top: 10px; }
.rf-why { list-style: none; padding: 0; margin: 6px 0 0; }
.rf-why-row { padding: 12px 0 12px 14px; border-bottom: 1px solid var(--line); position: relative; }
.rf-why-row::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: var(--pc); }
.rf-why-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.rf-why-head b { font-size: 1.05rem; }
.rf-why-pos { color: #4d4a44; }
.rf-state { font-style: normal; font-size: .85rem; font-weight: 600; color: var(--pc); border: 1px solid var(--pc); border-radius: 999px; padding: 1px 9px; }
.rf-why-text { margin: 6px 0 2px; line-height: 1.6; }
.rf-why-meta { margin: 0; font-size: .88rem; color: #6d665a; }
.rf-chips { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chips li { font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: #f3ede1; color: #4d4a44; display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.rf-chips li i { font-style: normal; color: var(--rust); }
.rf-share { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.rf-chip-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(154, 68, 38, .45);
  background: transparent; color: var(--rust); font: inherit; font-size: .95rem; text-decoration: none; cursor: pointer; }
.rf-chip-btn:hover { background: var(--rust); color: #fff; }
.rf-tap { display: inline-block; padding: 10px 0; }
.rf-citynote { margin: 18px 0 0; color: #6d665a; font-size: .95rem; }

/* the "?" meanings: each links to its line in the glossary; rashifal.js shows it in place (a tap, never hover-only) */
.rf-q { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 22px; height: 22px; margin-left: 4px;
  border-radius: 50%; border: 1px solid rgba(154, 68, 38, .45); color: var(--rust); font: 700 .75rem/1 system-ui, sans-serif;
  text-decoration: none; vertical-align: baseline; flex: none; }
.rf-q::before { content: ""; position: absolute; inset: -11px; }                 /* a 44px target around the small mark */
.rf-q:hover, .rf-q[aria-expanded="true"] { background: var(--rust); color: #fff; }
.rf-chips a, .rf-tag { color: inherit; text-decoration: underline dotted rgba(154, 68, 38, .55); text-underline-offset: 3px; }
.rf-tag { font-size: .78rem; color: var(--rust); margin-left: 4px; white-space: nowrap; }
.rf-pop { position: absolute; z-index: 50; max-width: min(340px, calc(100vw - 32px)); background: var(--night, #151A2C); color: #f2ece0;
  font: 400 .9rem/1.5 system-ui, "Noto Sans Devanagari", sans-serif; padding: 12px 14px; border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.rf-pop b { display: block; color: var(--gold, #C9A45C); margin-bottom: 2px; }
.rf-pop[hidden] { display: none; }
.rf-gloss { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; border-top: 1px solid var(--line); }
.rf-gloss > div { padding: 10px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.rf-gloss > div:target { background: #fff8e6; }
.rf-gloss dt { font-weight: 600; }
.rf-gloss dd { margin: 2px 0 0; color: #4d4a44; line-height: 1.5; }

/* 6-7. tables and rows */
.rf-rows { margin: 0 0 8px; display: grid; }
.rf-rows > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rf-rows dt { color: #6d665a; }
.rf-rows dd { margin: 0; }
.rf-rows dd small { color: #6d665a; margin-left: 4px; }
.rf-table-wrap { overflow-x: auto; }
.rf-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 600px; }
.rf-table th, .rf-table td { text-align: left; padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rf-table thead th { font-size: .85rem; color: #6d665a; font-weight: 600; }
.rf-table tbody th { font-weight: 600; white-space: nowrap; }
.rf-table tbody th a { color: var(--ink); text-decoration: none; }
.rf-table tbody th a:hover { color: var(--rust); }
.rf-table em { font-style: normal; font-size: .78rem; color: var(--rust); border: 1px solid rgba(154, 68, 38, .35); border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.rf-table td small { display: block; color: #6d665a; font-size: .82rem; }
.rf-moon-grid td { color: var(--lc); font-weight: 600; background: var(--lb); border-bottom-color: #fff; }
.rf-moon-grid th small { display: block; font-weight: 400; }
.rf-names { min-width: 760px; }

/* 8. tomorrow, lists */
.rf-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rf-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0 12px 14px; border-bottom: 1px solid var(--line); position: relative; }
.rf-list li::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 4px; background: var(--pc, transparent); }
.rf-list.plain li { grid-template-columns: minmax(0, 1fr); padding-left: 0; }
.rf-list b { font-weight: 600; }

/* 10. coming changes */
.rf-timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.rf-event { padding: 16px 0; border-bottom: 1px solid var(--line); }
.rf-event-h { margin: 0 0 10px; font-size: 1.05rem; }
.rf-event-h small { color: #6d665a; }
.rf-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.rf-strip li { font-size: .75rem; padding: 6px 6px; border-radius: 4px; background: #f3ede1; color: #4d4a44; border-top: 3px solid var(--pc, #d9cfbd); }
.rf-strip li b { display: block; font-weight: 600; color: var(--ink); }
.rf-strip li small { display: block; color: var(--pc); font-weight: 600; }

/* 11. finder */
.rf-find { margin: 18px 0; }
.rf-find summary { cursor: pointer; color: var(--rust); text-decoration: underline; text-underline-offset: 3px; list-style: none; min-height: 44px; display: inline-flex; align-items: center; }
.rf-find summary::-webkit-details-marker { display: none; }
.rf-find[open] summary { text-decoration: none; font-weight: 600; }
.rf-find-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.rf-find-form > label { display: grid; gap: 6px; font-weight: 600; }
.rf-find-form input[type="date"], .rf-find-form input[type="time"], .rf-find-form input[type="search"] {
  min-height: 46px; font: inherit; border-radius: 8px; border: 1.5px solid #cdbfa8; background: #fff; padding: 0 12px; width: 100%; box-sizing: border-box; }
.rf-find-form input:disabled { opacity: .45; }
.rf-find-form .rf-check { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; margin-top: -6px; }
.rf-find-form .rf-check input { width: 20px; height: 20px; }
.rf-find-place, .rf-find-go, .rf-find-out { grid-column: 1 / -1; }
.rf-find-place { display: grid; gap: 6px; }
.rf-find-place > label { font-weight: 600; }
.rf-find-place .rf-small { margin: 0; }
.rf-find-go { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.rf-find-go .ed-btn { border: 0; cursor: pointer; font: inherit; }
.rf-find-go .rf-small { margin: 0; }
.rf-find-out:empty { display: none; }
.rf-find-out p { margin: 0 0 8px; font-size: 1.05rem; }
.rf-find-out ul { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 6px; }

/* 13. method */
.rf-method { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); max-width: 80ch; }
.rf-method li { padding: 12px 0; border-bottom: 1px solid var(--line); line-height: 1.6; color: #3b3a40; }
.rf-method.off li { color: #4d4a44; }
.rf-final-p { color: #cfc8b8; max-width: 46ch; margin: 0 auto 26px; position: relative; z-index: 1; }

/* the first screen: text on the left, the live sky on the right (the wheel on the hub; the star map and the
   kundli on a rashi page, the kundli right under the heading); one column on phones, the sky right under the
   heading and, on a rashi page, the kundli right under the map. The map's key follows the first screen. */
.rf-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head fig" "rest fig";
  grid-template-rows: auto 1fr; gap: 6px 52px; align-items: start; }
/* Rashi pages: the hero stacks (the map key comes below the grid, not beside it); the heading spans the width,
   then the star map and the rashi's kundli sit side by side, both on the first screen. */
.rf-rhero { flex-direction: column; align-items: stretch; }
.rf-rgrid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "head head" "fig kundli" "fig rest";
  grid-template-rows: auto auto 1fr; gap: 10px 44px; }
.rf-rgrid .rf-kundli-fig { margin: 0 0 8px; max-width: 420px; }
.rf-rhero .rf-mapkey { margin-top: 26px; }
.rf-hero-head { grid-area: head; }
.rf-hero-rest { grid-area: rest; }
.rf-wheel-fig, .rf-map-fig { grid-area: fig; margin: 0; min-width: 0; }
.rf-kundli-fig { grid-area: kundli; margin: 14px 0 6px; max-width: 380px; }
.rf-hero-grid h1 { max-width: 18ch; }
.rf.rf-r .rf-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 22ch; }
.rf-mapkey { margin-top: 26px; }
.rf-mapkey .rf-legend { margin-top: 0; }
.rf-crumb { display: flex; width: fit-content; align-items: center; gap: .3em; min-height: 44px; color: var(--gold); text-decoration: none; font-size: .95rem; margin: -10px 0 6px; }
.rf-crumb:hover { text-decoration: underline; text-underline-offset: 3px; }
.rf-fig-h { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--gold); margin: 0 0 12px; }
.ed[lang="hi"] .rf-fig-h { font-family: system-ui, "Noto Sans Devanagari", sans-serif; letter-spacing: .03em; font-size: .9rem; font-weight: 600; }
.rf-fig-cap { color: #ece4d4; margin: 14px 0 6px; line-height: 1.6; font-size: 1rem; }
.rf-fig-small { color: #b9b2a3; font-size: .86rem; line-height: 1.55; margin: 6px 0 0; }
.rf-credit { color: #8f8a7e; font-size: .78rem; line-height: 1.5; margin: 12px 0 0; }

/* SVG text: the page's own fonts; a dark halo keeps labels clear of lines and stars */
.rf-wheel text, .rf-starmap text, .rf-kundli text { font-family: system-ui, "Noto Sans Devanagari", sans-serif; }
.rf-starmap text { paint-order: stroke; stroke: #0b1020; stroke-width: 4px; stroke-linejoin: round; }

/* the live Moon wheel (hub) */
.rf-wheel { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; }
.wh-bg { fill: rgba(10, 14, 28, .6); stroke: rgba(201, 164, 92, .45); stroke-width: 1.5; }
.wh-seg { fill: rgba(255, 255, 255, .03); stroke: rgba(201, 164, 92, .3); stroke-width: 1; }
.wh-seg.lab-supportive { fill: rgba(78, 160, 118, .30); }
.wh-seg.lab-patience { fill: rgba(196, 108, 76, .20); }
.wh-seg.lab-chandrashtama { fill: rgba(196, 96, 64, .42); }
.wh-seg.here { stroke: var(--gold); stroke-width: 3; }
.wh-a { cursor: pointer; }
.wh-a:hover .wh-seg, .wh-a:focus-visible .wh-seg { filter: brightness(1.5); }
.wh-a:focus-visible { outline: none; }
.wh-name { fill: #f5efe3; font-size: 19px; text-anchor: middle; dominant-baseline: middle; font-weight: 600; }
.wh-house { fill: #e2c98f; font-size: 15px; text-anchor: middle; dominant-baseline: middle; }
.wh-ring { fill: none; stroke: rgba(201, 164, 92, .35); }
.wh-tick { fill: none; stroke: rgba(201, 164, 92, .26); stroke-width: 1; }
.wh-nak.here { fill: rgba(201, 164, 92, .22); }
.wh-star { fill: #f6f1e3; opacity: .9; }
.wh-centre { fill: #12172a; stroke: rgba(201, 164, 92, .4); }
.wh-sign { fill: #f5efe3; font-size: 46px; text-anchor: middle; font-family: var(--serif) !important; }
.wh-nakname { fill: #e2c98f; font-size: 19px; text-anchor: middle; }
.wh-deg { fill: #b9b2a3; font-size: 17px; text-anchor: middle; }
.wh-moon { transform-origin: 300px 300px; transition: transform 1.5s ease; }

/* the Moon marker (wheel and map): its real phase, lit on the Sun's side */
.mk-glow { fill: rgba(246, 241, 227, .15); }
.mk-dark { fill: #2a3050; stroke: rgba(246, 241, 227, .6); stroke-width: 1; }
.mk-lit { fill: #f8f3e6; }

/* the star map (rashi pages): real stars, east on the left */
.rf-starmap { display: block; width: 100%; height: auto; max-height: 86vh; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.sm-sky { fill: #0b1020; }
.sm-band { fill: rgba(201, 164, 92, .07); }
.sm-redge { stroke: rgba(201, 164, 92, .8); stroke-width: 1.6; }
.sm-nedge { stroke: rgba(159, 176, 208, .45); stroke-width: 1; stroke-dasharray: 5 6; }
.sm-ecl { stroke: rgba(242, 206, 120, .5); stroke-width: 1.3; stroke-dasharray: 2 6; }
.sm-fig { fill: none; stroke: rgba(150, 170, 210, .36); stroke-width: 1.3; stroke-linecap: round; }
.sm-fig.own { stroke: rgba(176, 196, 236, .62); stroke-width: 1.7; }
.sm-star { fill: #f6f1e3; }
.sm-star.m4 { opacity: .8; } .sm-star.m5 { opacity: .6; }
.sm-yoga { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.sm-rashi { fill: rgba(201, 164, 92, .72); font-size: 15px; font-family: var(--serif) !important; }
.sm-rashi.own { fill: var(--gold); font-size: 24px; }
.sm-nak { fill: #b4c1dc; font-size: 16px; text-anchor: middle; }
.sm-ylab { fill: #ead39d; font-size: 14px; }
.sm-slab { fill: #cfc8b8; font-size: 12px; }
.sm-dir { fill: rgba(242, 236, 224, .55); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.sm-ecl-lab { fill: rgba(242, 206, 120, .7); font-size: 12px; }
.sm-g.planet { fill: #f0cf8a; }
.sm-g.g-mars { fill: #e3765c; } .sm-g.g-mercury { fill: #9fd3b2; } .sm-g.g-jupiter { fill: #f0cf8a; }
.sm-g.g-venus { fill: #fdf8ec; } .sm-g.g-saturn { fill: #cdb68c; }
.sm-g.sun { fill: #f3c35b; stroke: rgba(243, 195, 91, .35); stroke-width: 7; }
.sm-g.node { fill: none; stroke: #c9b9f0; stroke-width: 2.2; }
.sm-glab { fill: #f5efe3; font-size: 15px; font-weight: 600; }
.sm-moon { transition: transform 1.5s ease; }
.sm-moon.off { display: none; }
.rf-legend { list-style: none; padding: 0; margin: 12px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .84rem; color: #cfc8b8; }
.rf-legend li { display: inline-flex; align-items: center; gap: 7px; }
.sw { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.sw-moon { background: #f8f3e6; box-shadow: 0 0 0 4px rgba(246, 241, 227, .16); }
.sw-planet { background: #e3765c; width: 10px; height: 10px; }
.sw-node { border: 2px solid #c9b9f0; }
.sw-yoga { width: 14px; height: 14px; border: 1.5px solid var(--gold); background: radial-gradient(circle, #f6f1e3 0 2px, transparent 2.6px); }
.sw-fig, .sw-ecl, .sw-redge, .sw-nedge { width: 22px; height: 0; border-radius: 0; border-top: 2px solid rgba(176, 196, 236, .7); }
.sw-ecl { border-top-style: dotted; border-top-color: rgba(242, 206, 120, .75); }
.sw-redge { border-top-color: rgba(201, 164, 92, .9); }
.sw-nedge { border-top-style: dashed; border-top-color: rgba(159, 176, 208, .7); }
.sw-size { width: 22px; height: 10px; border-radius: 0;
  background: radial-gradient(circle at 4px 5px, #f6f1e3 0 1.4px, transparent 2px), radial-gradient(circle at 15px 5px, #f6f1e3 0 4px, transparent 4.6px); }
.rf-sub-dark { border-top-color: rgba(242, 236, 224, .16); margin-top: 12px; }
.rf-sub-dark > summary::after { color: var(--gold); }
.rf-sub-dark .rf-h4 { color: #f2ece0; margin: 10px 0 4px; font-size: 1.1rem; }
.rf-naklist { list-style: none; padding: 0; margin: 4px 0 0; }
.rf-naklist li { padding: 10px 0; border-bottom: 1px solid rgba(242, 236, 224, .12); color: #cfc8b8; font-size: .9rem; line-height: 1.55; }
.rf-naklist b { color: #f5efe3; font-weight: 600; }
.rf-naklist small { color: #9f988a; margin-left: 4px; }
.rf-naklist span { display: block; margin-top: 2px; }

/* the kundli (rashi pages): the rashi as the 1st house */
.rf-kundli { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.rk-bg { fill: #fffaf0; }
.rk-h1 { fill: rgba(201, 164, 92, .3); }
.rk-line { fill: none; stroke: #1f2a5a; stroke-width: 1.6; }
.rk-n { fill: #b8860b; font-size: 13px; text-anchor: middle; dominant-baseline: middle; }
.rk-n.own { fill: #8c2f39; font-weight: 700; font-size: 15px; }
.rk-p { fill: #1c1c1c; font-weight: 600; text-anchor: middle; dominant-baseline: middle; }
.rk-p.moon { fill: #8c2f39; }
.rk-r { font-size: .72em; }

/* why our rashifal (hub) */
.rf-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 8px 0 0; }
.rf-points > div { border-top: 1px solid var(--line); padding: 16px 0 18px; }
.rf-points dt { font-family: var(--serif); font-size: 1.35rem; color: var(--ink); line-height: 1.25; }
.ed[lang="hi"] .rf-points dt { font-size: 1.2rem; font-weight: 500; }
.rf-points dd { margin: 6px 0 0; color: #4d4a44; line-height: 1.6; }

/* a rashi page's reading */
.rf-read .ed-p { margin-bottom: 8px; }
.rf-tone-big { margin: 18px 0 0; display: flex; align-items: center; }
.rf-lines > div { border-bottom: 1px solid var(--line); padding: 2px 0 8px; }

/* facts, notes, the other rashis */
.rf-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.rf-facts > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.rf-facts dt { color: #6d665a; }
.rf-facts dd { margin: 0; color: var(--ink); line-height: 1.5; }
.rf-facts dd small { display: block; color: #8a8273; font-size: .8rem; margin-top: 2px; }
.rf-notes { margin: 18px 0 0; padding: 0 0 0 18px; color: #3b3a40; line-height: 1.6; max-width: 80ch; }
.rf-notes li { margin: 0 0 6px; }
.rf-others { list-style: none; padding: 0; margin: 0 0 8px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rf-others a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px;
  background: #fbf8f2; color: var(--ink); text-decoration: none; font-weight: 600; }
.rf-others a:hover { border-color: var(--rust); background: #fff; }
.rf-gloss-sec { padding: 36px 0; }
.rf-gloss-sec .rf-sub { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .wh-moon, .sm-moon { transition: none; } }

@media (max-width: 1000px) {
  .rf-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-others { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-facts { grid-template-columns: minmax(0, 1fr); }
  .rf-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rf-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "fig" "rest";
    grid-template-rows: auto; gap: 4px; }
  .rf-rgrid { grid-template-areas: "head" "fig" "kundli" "rest"; }
  .rf-wheel-fig, .rf-map-fig { margin: 4px 0 18px; }
  .rf-kundli-fig { max-width: 420px; margin: 0 auto 18px; width: 100%; }
}
@media (max-width: 640px) {
  .rf-hero { padding: 36px 0 30px; }
  .rf-wheel { max-width: 400px; }
  .rf-starmap { max-height: none; border-radius: 8px; }
  .rf-starmap .sm-mk { transform: scale(1.8); }
  .sm-nak { font-size: 24px; } .sm-ylab { font-size: 20px; } .sm-rashi { font-size: 19px; } .sm-rashi.own { font-size: 30px; }
  .sm-dir { font-size: 20px; }
  .rf-starmap .minor { display: none; }
  .rf-legend { font-size: .8rem; gap: 4px 12px; }
  .rf-points { grid-template-columns: minmax(0, 1fr); }
  .rf-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rf-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rf-ask-band { padding: 14px 0; }
  .rf .ed-sec { padding: 44px 0; }
  .rf-grid-sec { padding-top: 32px; }
  .rf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rf-card { padding: 10px 12px 12px; }
  .rf-card-top b { font-size: 1.2rem; }
  .rf-card-top em { margin-left: 0; flex-basis: 100%; }
  .rf-card-label, .rf-card-parts { display: none; }
  .rf-card-line { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: .85rem; }
  .rf-areas > div, .rf-rows > div, .rf-list li, .rf-gloss { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rf-areas dt { padding-top: 0; }
  .rf-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rf-find-form { grid-template-columns: minmax(0, 1fr); }
  .rf-ask { padding: 14px 16px; }
  .rf-ask-p, .rf-hero .ed-pill { display: none; }             /* short hero: the live sky reaches the first screen */
  .rf-hero h1 { margin-bottom: 12px; }
  .rf-hero .ed-lead { font-size: 1rem; margin-bottom: 14px; }
  .rf-chip { padding: 0 13px; }
}
@media print {
  .rf-hero .sv-stars, .rf-nav, .rf-city, .rf-ask-band, .ed-final, .pg-more-btn, .rf-share, .rf-q, .rf-pop, .rf-find, .site-header, .visitor-bar,
  .rf-wheel-fig, .rf-map-fig, .rf-crumb, .rf-mapkey .rf-legend { display: none !important; }
  .rf-hero { background: none; color: #000; }
  .rf-hero h1, .rf-date, .ed-lead, .rf-fig-h, .rf-fig-small { color: #000; }
  .pg-more > [data-more] { max-height: none !important; -webkit-mask-image: none; mask-image: none; }
}