/* v1.21.4 — Sinhala Horoscope mobile presentation.
   Loaded ONLY for screen widths <= 767px. Desktop and printed report CSS
   remain the original style.css (including its existing 768+ behavior). */
:root { --ui-font-size: 16px; }
html, body { max-width: 100%; }
body { background: #eaf0f5; }
.topbar {
  padding: 15px 14px 13px; gap: 12px;
  background: linear-gradient(140deg, #202a35, #334453);
}
.topbar h1 { font-size: 1.35rem; line-height: 1.3; }
.topbar p { font-size: .75rem; line-height: 1.45; margin-top: 4px; }
.topbar-actions { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.topbar-actions > button, .topbar-actions > a {
  width: 100%; min-width: 0; min-height: 44px; margin: 0;
  padding: 9px 8px; font-size: .82rem; white-space: normal; line-height: 1.3;
}
.topbar-actions > #printBtn { grid-column: 1/-1; }
.topbar-actions > .account-status.hidden { display: none !important; }
.account-status {
  grid-column: 1/-1; display: flex; width: 100%; gap: 8px;
  align-items: center; justify-content: flex-start;
  padding-top: 9px; border-top: 1px solid rgba(255,255,255,.2);
}
.account-email { max-width: 100%; overflow-wrap: anywhere; }
.account-status .secondary { min-height: 44px; }
.account-status .quota-badge { padding: 7px 9px; }
.layout { display: block; width: 100%; min-width: 0; padding: 10px 10px 22px; }
.form-panel { width: 100%; position: static; margin: 0 0 12px; }
.layout-resizer { display: none; }
.panel, .empty { border-radius: 12px; padding: 13px; }
.workspace, #results, .screen { min-width: 0; max-width: 100%; }
.workspace { width: 100%; }
#results { margin: 0; }
.empty { min-height: 140px; text-align: left; }
.empty h2 { font-size: 1.2rem; }
.form-panel .mobile-birth-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.form-panel .mobile-birth-heading h2 { margin: 0; font-size: 1.14rem; }
.mobile-birth-summary { display: none; }
.mobile-hide-birth { display: none; }
.layout.mobile-has-results:not(.mobile-form-collapsed) .mobile-hide-birth { display: inline-flex; }
.mobile-birth-heading button { flex-shrink: 0; min-height: 40px; padding: 7px 10px; font-size: .82rem; }
.layout.mobile-form-collapsed .form-panel { padding: 10px 12px; }
.layout.mobile-form-collapsed .form-panel > .mobile-birth-heading,
.layout.mobile-form-collapsed .form-panel > #birthForm { display: none !important; }
.layout.mobile-form-collapsed .mobile-birth-summary { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.mobile-birth-summary-text { min-width: 0; display: grid; gap: 2px; }
.mobile-birth-summary-text strong { font-size: .95rem; overflow-wrap: anywhere; }
.mobile-birth-summary-text span { font-size: .73rem; color: #526576; overflow-wrap: anywhere; }
.mobile-birth-summary button { flex-shrink: 0; min-height: 44px; padding: 7px 9px; font-size: .78rem; }
#birthForm label { min-width: 0; }
#birthForm input, #birthForm select, #birthForm button, .auth-card input, .auth-card button {
  font-size: max(16px, 1em);
}
#birthForm input:not([type=checkbox]), #birthForm select { max-width: 100%; min-height: 44px; }
#birthForm .two-col, #birthForm .birth-datetime-stack { grid-template-columns: minmax(0,1fr); }
#birthForm .birth-date-input-row { min-width: 0; }
#birthForm #calcBtn { min-height: 50px; font-size: 1rem; }
.birth-calendar-popover { max-width: calc(100vw - 32px); }
/* Desktop's 20 tabs stay in the DOM (and still handle route/feature logic).
   A native selector is easier to use with Sinhala labels on a phone. */
#tabs { display: none !important; }
.mobile-screen-navigation {
  display: grid; gap: 8px; padding: 11px 12px 12px; margin: 0 0 12px;
  border: 1px solid #bcccd8; border-radius: 12px;
  background: #fff; box-shadow: 0 3px 12px rgba(14,33,52,.10);
  position: sticky; top: 0; z-index: 60;
}
.mobile-screen-navigation-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mobile-screen-navigation label { margin: 0; font-size: .87rem; font-weight: 800; color: #253545; }
.mobile-screen-navigation button { min-height: 40px; padding: 8px 10px; font-size: .78rem; white-space: nowrap; background: #e9f0f5; }
.mobile-screen-navigation select {
  display: block; width: 100%; margin: 0; min-width: 0; min-height: 48px;
  border: 1px solid #98abbc; border-radius: 9px; background: #f6f9fb;
  font-size: 1rem; font-weight: 750; color: #182838; padding: 9px 12px;
}
.mobile-screen-navigation select:focus-visible,
.mobile-screen-navigation button:focus-visible,
.mobile-birth-summary button:focus-visible { outline: 3px solid #b78b40; outline-offset: 2px; }
/* Large book-like report pages become a readable phone column. */
.classic-sheet { border: 0; box-shadow: none; width: 100%; padding: 12px 8px; }
.report-page { min-width: 0; max-width: 100%; padding: 15px 10px; margin-bottom: 13px; }
.classic-title h1 { font-size: 1.12rem; }
.classic-title h2 { font-size: 1.12rem; }
.classic-heading { font-size: 1.06rem; }
.chart-pair { grid-template-columns: minmax(0,1fr); gap: 12px; }
.legacy-chart-host, .classic-chart-block { max-width: 100%; min-width: 0; }
.legacy-chart-svg { max-width: 100%; height: auto; }
.classic-report, .prediction-screen { min-width: 0; }
.classic-sheet :is(p, li, td, th), .screen :is(p, li, td, th) { overflow-wrap: anywhere; }
/* Do not shrink the numeric columns of specialized calculation tables. Allow
   their pre-existing wrappers to scroll horizontally instead. */
.table-wrap, .porondam-table-wrap, .ashtaka-table-wrap,
.yoga-study-scroll, .saved-records-results, .pakshi-table-wrap,
.shadbala-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prediction-language-switch { max-width: 100%; flex-wrap: wrap; }
.prediction-language-switch button { min-height: 42px; }
.prediction-subtabs { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 9px; }
.prediction-subtabs button { width: auto; flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
/* Public login dialog and action dialogs must stay inside the phone viewport. */
.auth-gate { padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.auth-card { width: 100%; max-width: 450px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 18px 15px; }
.auth-actions { flex-direction: column; }
.auth-actions .primary, .auth-actions .secondary { width: 100%; min-height: 44px; }
.footer { padding: 12px 16px 24px; font-size: .8rem; }
@media (max-width: 370px) {
  .topbar h1 { font-size: 1.22rem; }
  .mobile-screen-navigation-heading { align-items: flex-start; }
  .mobile-screen-navigation label { max-width: 52%; }
  .mobile-screen-navigation button { white-space: normal; line-height: 1.15; }
  .mobile-birth-summary { gap: 6px; }
}

/* v1.21.5 — Mobile reading layout, not a scaled-down desktop print page.
   Loaded through the existing max-width:767px screen-only link. */
.mobile-screen-navigation {
  position: relative; top: auto; z-index: 1;
  padding: 10px; margin: 0 0 10px;
  box-shadow: 0 2px 7px rgba(14,33,52,.07);
}
.mobile-screen-navigation-heading { align-items: flex-start; }
.mobile-screen-navigation label { flex: 1 1 auto; font-size: .84rem; line-height: 1.45; }
.mobile-screen-navigation button { flex: 0 0 auto; max-width: 42%; line-height: 1.3; white-space: normal; }
.mobile-screen-navigation select { font-size: .97rem; min-height: 46px; }
.report-page { overflow-wrap: break-word; }
.report-page .classic-heading, .report-page .lagna-ashtaka-title { line-height: 1.42; }
.report-page .legacy-subtitle { font-size: .73rem; letter-spacing: .1em; }
/* In-page chapter menus: no fixed bubble covering calculations or text. */
#screen-classic > .classic-floating-nav,
#screen-general-analysis .ephemeris-floating-nav {
  position: static !important; transform: none !important;
  inset: auto !important; width: 100% !important; max-width: 100% !important;
  margin: 0 0 12px; border: 1px solid #c8d5df !important;
  border-radius: 10px; box-shadow: none !important; padding: 9px !important;
  background: #f2f6f9 !important; backdrop-filter: none !important;
}
#screen-classic > .classic-floating-nav .classic-floating-toggle,
#screen-general-analysis .ephemeris-floating-nav .ephemeris-floating-toggle {
  width: 100%; min-height: 44px; border-radius: 8px;
}
#screen-classic > .classic-floating-nav:not(.is-collapsed) > a,
#screen-general-analysis .ephemeris-floating-nav:not(.is-collapsed) > a {
  min-height: 44px; justify-content: flex-start; padding: 10px 12px;
}
.classic-report-section { scroll-margin-top: 10px; }
.go-top-button { right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); min-width: 44px; min-height: 44px; padding: 8px 12px; }
/* Tables with many Sinhala headers are reflowed into labeled per-planet cards.
   JS supplies the authoritative, dynamic header text, including ashtaka order. */
.mobile-readable-table { overflow: visible !important; max-width: 100%; }
.mobile-readable-table > table,
.mobile-readable-table > table > tbody { display: block; width: 100%; min-width: 0 !important; table-layout: auto; }
.mobile-readable-table > table > thead { display: none; }
.mobile-readable-table > table > tbody > tr {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; width: 100%; max-width: 100%; min-width: 0;
  margin: 0 0 12px; overflow: hidden;
  border: 1px solid #d6dfe6; border-radius: 10px;
  background: #fff; box-shadow: 0 1px 2px rgba(20,40,55,.04);
}
.mobile-readable-table > table > tbody > tr > :is(th,td) {
  display: block; width: auto !important; min-width: 0 !important;
  box-sizing: border-box; padding: 8px 10px !important;
  border: 0 !important; border-top: 1px solid #ebeff3 !important;
  background: transparent !important; position: static !important;
  text-align: left !important; white-space: normal !important;
  overflow-wrap: anywhere; font-size: .92rem; line-height: 1.42;
}
.mobile-readable-table > table > tbody > tr > :is(th,td):first-child {
  grid-column: 1/-1; padding: 10px 12px !important;
  border-top: 0 !important; background: #f3f6f9 !important;
  color: #223546; font-size: 1rem; font-weight: 850;
}
.mobile-readable-table > table > tbody > tr > :is(th,td):not(:first-child):nth-child(even) {
  border-right: 1px solid #ebeff3 !important;
}
.mobile-readable-table [data-mobile-label]:not(:first-child)::before {
  content: attr(data-mobile-label); display: block;
  font-size: .72rem; font-weight: 750; color: #576b7c;
  line-height: 1.35; margin-bottom: 3px;
}
.mobile-readable-table .ashtaka-total { border-color: #af8c58 !important; background: #fffaf0 !important; }
.mobile-readable-table .ashtaka-total > :first-child { background: #f6eacc !important; }
.mobile-readable-table .ashtaka-total :is(th,td) { font-weight: 800; }
.mobile-readable-table .ashtaka-table { font-size: .94rem !important; }
/* Compact, clearly labeled date cards for Maha/Antar/Vidasha/Sukshma.
   Keep original semantic values and click-to-expand behavior intact. */
.classic-dasha-pages { max-width: 100%; }
.report-page-dasha .legacy-dasha-group { margin: 14px 0 18px; min-width: 0; }
.report-page-dasha .legacy-maha-title { margin-top: 18px; }
.report-page-dasha .legacy-maha-title span { display: block; font-size: 1.12rem; line-height: 1.45; }
.report-page-dasha .legacy-maha-title small { font-size: .88rem; line-height: 1.45; overflow-wrap: anywhere; }
.report-page-dasha .legacy-dasha-heading {
  display: block !important; width: 100%; min-width: 0;
  padding: 13px 14px !important; border: 1px solid #c3d0da;
  border-radius: 10px; background: #f4f7f9;
}
.report-page-dasha .legacy-dasha-heading .dasha-heading-title { display: block; white-space: normal; line-height: 1.45; font-size: 1.1rem; }
.report-page-dasha .legacy-dasha-heading .dasha-date-range {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important; max-width: 100% !important;
  margin: 9px 0 0 !important; gap: 10px !important; overflow: visible !important;
  white-space: normal !important;
}
.report-page-dasha .legacy-dasha-heading .dasha-date-range b { display: none !important; }
.report-page-dasha .legacy-dasha-heading .dasha-date-range strong {
  display: block; min-width: 0 !important; width: auto !important;
  white-space: normal !important; font-size: .94rem; line-height: 1.5;
}
.report-page-dasha .heading-start-date::before,
.report-page-dasha .heading-end-date::before,
.report-page-dasha .legacy-dasha-line .start-date::before,
.report-page-dasha .legacy-dasha-line .end-date::before,
.report-page-dasha .legacy-sukshma-line .sukshma-start::before,
.report-page-dasha .legacy-sukshma-line .sukshma-end::before {
  display: block; color: #5b7182; font-size: .82rem; font-weight: 760;
  line-height: 1.35; font-family: "Noto Sans Sinhala", "Iskoola Pota", sans-serif;
}
.report-page-dasha .heading-start-date::before,
.report-page-dasha .legacy-dasha-line .start-date::before,
.report-page-dasha .legacy-sukshma-line .sukshma-start::before { content: "සිට / From"; }
.report-page-dasha .heading-end-date::before,
.report-page-dasha .legacy-dasha-line .end-date::before,
.report-page-dasha .legacy-sukshma-line .sukshma-end::before { content: "දක්වා / To"; }
.report-page-dasha .legacy-dasha-line,
.report-page-dasha .legacy-sukshma-line {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 14px !important; min-width: 0;
  margin-top: 10px; padding: 14px !important;
  border: 1px solid #e1e6eb; border-radius: 10px;
  background: #fff; font-size: .95rem; line-height: 1.55;
}
.report-page-dasha .legacy-vidasha-toggle { cursor: pointer; }
.report-page-dasha .legacy-dasha-line .lords,
.report-page-dasha .legacy-sukshma-line .sukshma-lord {
  grid-column: 1/-1 !important; min-width: 0; padding: 0 !important;
  font-size: 1.18rem; font-weight: 850; line-height: 1.35;
}
.report-page-dasha :is(.legacy-dasha-line,.legacy-sukshma-line) .arrow,
.report-page-dasha :is(.legacy-dasha-line,.legacy-sukshma-line) .age-label { display: none !important; }
.report-page-dasha :is(.legacy-dasha-line,.legacy-sukshma-line) :is(.date,.sukshma-start,.sukshma-end,.age) {
  min-width: 0 !important; width: auto !important; text-align: left !important;
  white-space: normal !important; line-height: 1.5;
}
.report-page-dasha :is(.legacy-dasha-line,.legacy-sukshma-line) .age::before {
  display: block; color: #657586; font: 700 .84rem/1.35 "Noto Sans Sinhala","Iskoola Pota",sans-serif;
  content: "වයස / Age";
}
.report-page-dasha .classic-dasha-datetime {
  display: flex !important; flex-wrap: wrap; align-items: baseline; justify-content: flex-start;
  gap: 2px 6px; width: 100%; min-width: 0; white-space: normal !important;
  grid-template-columns: none !important; font-size: .98rem;
}
.report-page-dasha .classic-dasha-datetime > * { min-width: 0; white-space: nowrap; }
.report-page-dasha .classic-dasha-ampm,
.report-page-dasha .classic-dasha-clock { display: none !important; }
.report-page-dasha .classic-dasha-date {
  font-size: 1.01rem; line-height: 1.45; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.report-page-dasha .legacy-sukshma-list { margin: 4px 0 0 7px !important; padding: 4px 0 4px 9px !important; }
.report-page-dasha .legacy-sukshma-section-label { position: static !important; }
@media (max-width: 360px) {
  .mobile-readable-table > table > tbody > tr > :is(th,td) { font-size: .86rem; padding: 7px 8px !important; }
  .report-page-dasha .legacy-dasha-line,
  .report-page-dasha .legacy-sukshma-line { gap: 8px !important; padding: 10px !important; }
}
/* v1.21.7 — Ashtakavarga on phones: do NOT compress into three narrow
   columns. Keep a roomy two-column scan layout so the Sinhala house labels and
   values stay readable. Desktop tables remain unchanged because this file only
   loads at <=767px. */
.ashtaka-wrap.mobile-readable-table > table > tbody > tr {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-color: #cfd8df; box-shadow: 0 2px 6px rgba(20,40,55,.05);
}
.ashtaka-wrap.mobile-readable-table > table > tbody > tr > :first-child {
  padding: 11px 13px !important; font-size: 1.15rem; line-height: 1.35;
  background: #f2f5f8 !important;
}
.ashtaka-wrap.mobile-readable-table > table > tbody > tr > [data-mobile-label] {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 84px; padding: 10px 12px !important;
  font-size: 1.15rem; font-weight: 700; line-height: 1.32;
  font-variant-numeric: tabular-nums;
}
.ashtaka-wrap.mobile-readable-table > table > tbody > tr > [data-mobile-label]::before {
  font-size: .89rem; line-height: 1.35; margin-bottom: 8px;
  color: #5e7080; font-weight: 780;
}
.ashtaka-wrap.mobile-readable-table > table > tbody > tr > :is(th,td):not(:first-child):nth-child(even) {
  border-right: 1px solid #ebeff3 !important;
}
.ashtaka-wrap.mobile-readable-table > table > tbody > tr > :last-child {
  grid-column: 1 / -1; min-height: auto;
  text-align: right !important; border-top: 1px solid #dde4ea !important;
  background: #f9fbfc !important; font-size: 1.16rem; font-weight: 800;
}
.ashtaka-wrap.mobile-readable-table > table > tbody > tr > :last-child::before {
  display: inline; margin-right: 10px;
}
@media (max-width: 359px) {
  .ashtaka-wrap.mobile-readable-table > table > tbody > tr > [data-mobile-label] {
    min-height: 78px; padding: 9px 10px !important; font-size: 1.07rem;
  }
  .ashtaka-wrap.mobile-readable-table > table > tbody > tr > [data-mobile-label]::before {
    font-size: .84rem; margin-bottom: 7px;
  }
}
/* Respect system reduced-motion preferences in navigation and jump helpers. */
@media (prefers-reduced-motion: reduce) {
  .mobile-screen-navigation *, .classic-floating-nav *, .ephemeris-floating-nav * { transition: none !important; }
}

/* v1.21.14+v1.21.15 — ONLY the Nirayana Planetary Positions table on phones.
   Keep the original eight-column desktop table, data, order, and print report.
   Present each graha as four compact two-cell bands rather than a tall card.
   v1.21.15 readability fix: no 13–15px text; labels >=16px and values >=18px.
   All other mobile table and navigation refinements remain unchanged. */
#classic-nirayana .mobile-nirayana-cards {
  overflow: hidden !important;
  border: 1px solid #cbd6df;
  border-radius: 8px;
  background: #fff;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets {
  display: block; width: 100%; min-width: 0 !important;
  margin: 0 !important; border: 0 !important;
  border-collapse: separate; border-spacing: 0;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
  width: 100%; margin: 0; border: 0; border-radius: 0;
  border-bottom: 1px solid #cbd6df;
  background: #fff; box-shadow: none; overflow: visible;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr:nth-child(even) {
  background: #f8fafc;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr:last-child {
  border-bottom: 0;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td {
  grid-column: span 5;
  display: block; min-width: 0 !important;
  padding: 10px 9px !important;
  border: 0 !important; border-top: 1px solid #e8edf1 !important;
  border-right: 0 !important;
  text-align: left !important;
  background: transparent !important;
  font-size: 18px; font-weight: 500; line-height: 1.5;
  overflow-wrap: anywhere; word-break: normal;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td:nth-child(odd) {
  border-right: 1px solid #e8edf1 !important;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td:first-child {
  grid-column: span 4;
  border-top: 0 !important;
  padding: 11px 9px !important;
  font-size: 21px; font-weight: 800; color: #263a49;
  background: #edf3f7 !important;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td:nth-child(2) {
  grid-column: span 6;
  border-top: 0 !important;
  padding: 9px 9px !important;
  background: #edf3f7 !important;
  font-size: 18px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow-wrap: normal;
  letter-spacing: 0;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td[data-mobile-label]::before {
  display: block; margin-bottom: 4px;
  color: #42576a; font-size: 16px; font-weight: 760;
  line-height: 1.45;
}
#classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td:nth-child(7):empty::after {
  content: "—"; color: #667785;
}
/* The desktop floating ↑ button covered planet cards and Ashtakavarga cells.
   In the mobile layout it becomes an ordinary full-width in-flow control at
   the bottom of the page, with its existing scroll-to-top click behavior. */
.go-top-button, .go-top-button.visible {
  position: static !important; inset: auto !important;
  display: block; width: calc(100% - 24px); max-width: 480px;
  margin: 12px auto max(18px, env(safe-area-inset-bottom));
  border-radius: 10px; padding: 12px 14px !important;
  box-shadow: none; transform: none !important; text-align: center;
}
.go-top-button:not(.visible) { display: none; }
.go-top-button span { display: inline; }
@media (max-width: 355px) {
  #classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td {
    padding: 9px 6px !important; font-size: 18px;
  }
  #classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td:first-child {
    font-size: 21px;
  }
  #classic-nirayana .mobile-nirayana-cards > .classic-planets > tbody > tr > td:nth-child(2) {
    padding: 9px 6px !important; font-size: 18px;
  }
}

/* v1.21.8 — Phone-only Dasa text hierarchy from Android feedback:
   labels are bold at 18px; dates and ages are regular at the same 18px.
   Keep the original 2-column From/To layout on standard-width phones. */
.report-page-dasha { padding-inline: 4px; }
.report-page-dasha .legacy-dasha-heading,
.report-page-dasha .legacy-dasha-line,
.report-page-dasha .legacy-sukshma-line { padding-inline: 9px !important; }
.report-page-dasha .legacy-dasha-heading .dasha-date-range,
.report-page-dasha .legacy-dasha-line,
.report-page-dasha .legacy-sukshma-line { column-gap: 8px !important; }
/* Dasa labels: bold and visibly distinct, including expanded Sukshma rows. */
.report-page-dasha .heading-start-date::before,
.report-page-dasha .heading-end-date::before,
.report-page-dasha .legacy-dasha-line .start-date::before,
.report-page-dasha .legacy-dasha-line .end-date::before,
.report-page-dasha .legacy-sukshma-line .sukshma-start::before,
.report-page-dasha .legacy-sukshma-line .sukshma-end::before,
.report-page-dasha :is(.legacy-dasha-line,.legacy-sukshma-line) .age::before {
  font-family: "Noto Sans Sinhala", "Iskoola Pota", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  margin-bottom: 5px;
}
/* Dasa values: same 18px size, normal weight, naturally spaced digits.
   Mobile-only timestamp concealment from v1.21.7 remains active. */
.report-page-dasha .classic-dasha-datetime,
.report-page-dasha .classic-dasha-date,
.report-page-dasha :is(.legacy-dasha-line,.legacy-sukshma-line) .age {
  font-family: "Noto Sans Sinhala", "Segoe UI", Arial, sans-serif;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.45;
}
.report-page-dasha .legacy-dasha-heading .dasha-date-range strong { font-weight: 400 !important; }
/* At very narrow widths, protect the requested 18px type size by stacking
   From/To groups instead of shrinking text or clipping a long year/date. */
@media (max-width: 359px) {
  .report-page-dasha .legacy-dasha-heading .dasha-date-range { grid-template-columns: minmax(0, 1fr) !important; }
  .report-page-dasha .legacy-dasha-line,
  .report-page-dasha .legacy-sukshma-line {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    padding-inline: 8px !important;
  }
  .report-page-dasha .legacy-dasha-line .lords,
  .report-page-dasha .legacy-sukshma-line .sukshma-lord { grid-column: 1 !important; }
  .report-page-dasha .legacy-dasha-line .start-date,
  .report-page-dasha .legacy-sukshma-line .sukshma-start { grid-row: 2; }
  .report-page-dasha .legacy-dasha-line .start-age,
  .report-page-dasha .legacy-sukshma-line .start-age { grid-row: 3; }
  .report-page-dasha .legacy-dasha-line .end-date,
  .report-page-dasha .legacy-sukshma-line .sukshma-end { grid-row: 4; }
  .report-page-dasha .legacy-dasha-line .end-age,
  .report-page-dasha .legacy-sukshma-line .end-age { grid-row: 5; }
}

/* v1.21.9 — Compact Ashtakavarga tables. The wide source tables still hold
   the canonical figures and remain unchanged for desktop and printing.
   On phones mobile.js mirrors them into accessible 3-column tables. */
.ashtaka-wrap.mobile-readable-table > table.ashtaka-table {
  display: none !important;
}
.mobile-ashtaka-tables[hidden] { display: none !important; }
.mobile-ashtaka-tables {
  display: grid;
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
.mobile-ashtaka-group {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d6dee5;
  border-radius: 10px;
  background: #fff;
}
.mobile-ashtaka-planet {
  margin: 0 !important;
  padding: 9px 11px !important;
  color: #263746;
  background: #edf2f6;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.3;
}
.mobile-ashtaka-table {
  border: 0 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: #fff;
}
.mobile-ashtaka-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.mobile-ashtaka-table :is(th, td) {
  border: 0 !important;
  padding: 6px 9px !important;
  text-align: left !important;
  vertical-align: middle !important;
  line-height: 1.32;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
.mobile-ashtaka-table thead th {
  color: #263746 !important;
  background: #e4eaf0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #9eaebb !important;
}
.mobile-ashtaka-table :is(thead th, tbody td):first-child { width: 22%; }
.mobile-ashtaka-table :is(thead th, tbody td):nth-child(2) { width: 53%; }
.mobile-ashtaka-table :is(thead th, tbody td):last-child {
  width: 25%;
  text-align: center !important;
}
.mobile-ashtaka-table tbody tr:nth-child(even) td { background: #f0f4f8 !important; }
.mobile-ashtaka-table tbody tr:nth-child(odd) td { background: #fff !important; }
.mobile-ashtaka-table tbody td {
  border-bottom: 1px solid #e2e8ed !important;
  color: #172735 !important;
  font-size: 17px !important;
  font-weight: 450 !important;
  font-variant-numeric: tabular-nums;
}
.mobile-ashtaka-table tbody td:last-child {
  color: #744e16 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}
.mobile-ashtaka-table tfoot tr { background: #f2f4f7; }
.mobile-ashtaka-table tfoot :is(th,td) {
  border-top: 2px solid #b8c5cf !important;
  color: #223445 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  padding: 8px 10px !important;
}
.mobile-ashtaka-table tfoot td { text-align: center !important; }
@media (max-width: 350px) {
  .mobile-ashtaka-table :is(th,td) { padding-inline: 6px !important; }
  .mobile-ashtaka-table thead th { font-size: 18px !important; }
}

/* v1.21.9 — Restore the quick side menus as small, collapsible phone controls.
   Open: readable, scrollable jump list with dismiss overlay.
   Closed: only a 48px edge button, avoiding the old wide floating obstruction.
   The original desktop floating navigation remains untouched. */
#screen-classic > .classic-floating-nav,
#screen-general-analysis .ephemeris-floating-nav {
  position: fixed !important;
  top: auto !important;
  bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  right: 6px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  transform: none !important;
  z-index: 1080 !important;
  width: min(290px, calc(100vw - 22px)) !important;
  max-width: calc(100vw - 22px) !important;
  max-height: min(68dvh, 500px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 10px !important;
  border: 1px solid #bfccd6 !important;
  border-radius: 14px !important;
  background: #f5f8fb !important;
  box-shadow: 0 12px 32px rgba(22, 39, 55, .24) !important;
}
#screen-classic > .classic-floating-nav.is-collapsed,
#screen-general-analysis .ephemeris-floating-nav.is-collapsed {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 1px solid #b5c4d0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 4px 12px rgba(25, 41, 55, .18) !important;
  overflow: hidden !important;
}
#screen-classic > .classic-floating-nav .classic-floating-toggle,
#screen-general-analysis .ephemeris-floating-nav .ephemeris-floating-toggle {
  width: 100%;
  min-height: 46px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
}
#screen-classic > .classic-floating-nav.is-collapsed .classic-floating-toggle,
#screen-general-analysis .ephemeris-floating-nav.is-collapsed .ephemeris-floating-toggle {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
}
#screen-classic > .classic-floating-nav.is-collapsed .classic-floating-toggle-text,
#screen-general-analysis .ephemeris-floating-nav.is-collapsed .ephemeris-floating-toggle-text {
  display: none !important;
}
#screen-classic > .classic-floating-nav.is-collapsed .classic-floating-toggle-icon,
#screen-general-analysis .ephemeris-floating-nav.is-collapsed .ephemeris-floating-toggle-icon {
  font-size: 22px;
}
#screen-classic > .classic-floating-nav:not(.is-collapsed) > a,
#screen-general-analysis .ephemeris-floating-nav:not(.is-collapsed) > a {
  display: flex !important;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.4;
  min-height: 42px;
  margin-top: 3px;
  justify-content: flex-start;
  padding: 9px 12px;
}
.mobile-quick-menu-dismiss {
  position: fixed;
  inset: 0;
  z-index: 1079;
  background: rgba(12, 26, 40, .34);
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  cursor: default;
}
.mobile-quick-menu-dismiss[hidden] { display: none !important; }


/* v1.21.10: Design C mobile header — compact appbar and permission-aware
   quick actions. Desktop markup/styles and existing action handlers untouched. */
.topbar {
  display: block !important; padding: 0 !important; gap: 0 !important;
  background: #223546; width: 100%;
}
.topbar > .topbar-desktop-title,
.topbar > .topbar-actions { display: none !important; }
.mobile-top:not([hidden]) { display: block; position: relative; }
.mobile-appbar {
  display: grid; grid-template-columns: 44px minmax(0,1fr) 44px;
  align-items: center; gap: 6px; min-height: 58px;
  padding: 7px 12px 5px;
}
.mobile-header-icon {
  min-width: 44px; width: 44px; height: 44px; padding: 10px;
  border: 1px solid rgba(255,255,255,.12); background: transparent;
  color: #fff; border-radius: 12px; display: flex;
  justify-content: center; align-items: center; cursor: pointer;
}
.mobile-header-icon svg, .mobile-top-shortcuts svg {
  width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.mobile-brand { min-width: 0; display: grid; justify-items: center; gap: 1px; text-align: center; }
.mobile-brand strong {
  font-family: "Noto Sans Sinhala", "Iskoola Pota", sans-serif;
  font-size: clamp(18px, 5.3vw, 22px); font-weight: 850;
  line-height: 1.3; white-space: nowrap; color: #fff;
}
.mobile-brand > span { font-size: 12px; color: #cfdae4; line-height: 1.2; }
.mobile-top-shortcuts {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid rgba(255,255,255,.15);
  background: #2b4356; padding: 3px 5px 6px;
}
.mobile-top-shortcuts button {
  min-width: 0; min-height: 54px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 2px;
  margin: 0; padding: 5px 2px;
  border: 0; border-radius: 7px; color: #fff;
  background: transparent; font-size: 13px; font-weight: 700;
  line-height: 1.2;
}
.mobile-top-shortcuts button[hidden] { display: none !important; }
.mobile-top-shortcuts button:disabled { opacity: .43; }
.mobile-top-shortcuts button:not(:disabled):active,
.mobile-header-icon:active { background: rgba(255,255,255,.14); }
.mobile-action-menu {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px;
  z-index: 1301; width: min(328px, calc(100vw - 24px));
  max-height: calc(100dvh - 30px); overflow-y: auto;
  background: #fff; color: #243749; border: 1px solid #cbd6df;
  border-radius: 14px; box-shadow: 0 16px 44px rgba(12,25,39,.32);
  padding: 10px; display: grid; gap: 3px;
}
.mobile-action-menu[hidden], .mobile-action-dismiss[hidden],
.mobile-menu-account[hidden] { display: none !important; }
.mobile-menu-account {
  padding: 10px 12px; margin-bottom: 5px;
  background: #edf3f7; border-radius: 9px;
  display: grid; gap: 3px;
}
.mobile-menu-account strong { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.mobile-menu-account small { font-size: 14px; color: #516879; line-height: 1.4; }
.mobile-action-menu :is(button,a) {
  color: #243749; min-height: 44px; width: 100%; padding: 11px 12px;
  font-size: 16px; font-weight: 700; text-align: left;
  text-decoration: none; background: #fff; border: 0;
  border-radius: 8px; display: flex; align-items: center;
}
.mobile-action-menu :is(button,a):not([hidden]):active { background: #e9f2f8; }
.mobile-action-menu :is(button,a)[hidden] { display: none !important; }
.mobile-action-menu button:disabled { color: #81909e; background: #f6f8f9; }
.mobile-action-dismiss {
  position: fixed; inset: 0; z-index: 1300;
  padding: 0; margin: 0; width: 100vw; height: 100dvh;
  background: rgba(10,25,38,.35); border: 0; border-radius: 0;
}
.mobile-appbar button:focus-visible,
.mobile-top-shortcuts button:focus-visible,
.mobile-action-menu :is(button,a):focus-visible {
  outline: 3px solid #edc680; outline-offset: -2px;
}
/* Remove the repeated Edit birth details button: the profile card already
   provides Edit, and the birth form remains editable as usual. */
.mobile-screen-navigation #mobileGoEditBtn { display: none !important; }
.mobile-screen-navigation { padding: 10px 11px !important; gap: 6px; }
.mobile-screen-navigation label { font-size: 16px; font-weight: 800; line-height: 1.4; }
.mobile-screen-navigation select { min-height: 45px; font-size: 17px; }
.layout.mobile-form-collapsed .form-panel { margin-bottom: 9px; padding: 9px 12px; }
.mobile-birth-summary-text strong { font-size: 17px; font-weight: 800; }
.mobile-birth-summary-text span { font-size: 14px; line-height: 1.3; }
.mobile-birth-summary button { font-size: 15px; min-height: 42px; }
@media (max-width: 350px) {
  .mobile-appbar { padding-inline: 7px; gap: 2px; }
  .mobile-brand strong { font-size: 17px; }
  .mobile-top-shortcuts button { font-size: 12px; }
}

/* v1.21.11 — Obvious, high-contrast dropdown affordance.  The blue chevron
   is decorative and click-through: the native <select> still owns the entire
   touch target, keyboard focus, screen-reader label and existing tab routing.
   This entire sheet is mobile-only (<=767px), never desktop or print. */
.mobile-screen-navigation label[for="mobileScreenSelect"] {
  font-size: 18px; font-weight: 850; line-height: 1.45; color: #243849;
}
.mobile-screen-select-control {
  display: block; position: relative; width: 100%; min-width: 0;
}
.mobile-screen-navigation .mobile-screen-select-control > select {
  display: block; width: 100%; min-width: 0; min-height: 56px;
  margin: 0; box-sizing: border-box;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding: 10px 71px 10px 14px;
  border: 2px solid #8b9eae; border-radius: 10px;
  background: #f6f9fb; color: #1c3042;
  font-size: 18px; font-weight: 800; line-height: 1.4;
  cursor: pointer;
}
.mobile-screen-navigation .mobile-screen-select-chevron {
  position: absolute; inset: 2px 2px 2px auto; width: 56px;
  display: flex; justify-content: center; align-items: center;
  color: #fff; background: #234b67;
  border-left: 1px solid #94a5b3; border-radius: 0 8px 8px 0;
  pointer-events: none;
}
.mobile-screen-navigation .mobile-screen-select-chevron svg { display: block; }
.mobile-screen-navigation .mobile-screen-select-control > select:focus-visible {
  outline: 3px solid #b78b40; outline-offset: 3px;
}
.mobile-screen-navigation .mobile-screen-select-control:focus-within .mobile-screen-select-chevron {
  background: #173d5a;
}

/* v1.21.12 — Ashtakavarga diagram overview: phone-only, two charts per row.
   Charts share the source table's values and Lagna-order house mapping.
   The color bands express BAV totals, NOT Shad Varga / Shadbala power. */
.mobile-ashtaka-overview { display: grid; gap: 10px; min-width: 0; }
.mobile-ashtaka-order-label {
  margin: 0; padding: 6px 9px; border-radius: 7px;
  background: #eaf1f6; color: #264258;
  font-size: 15px; font-weight: 800; line-height: 1.35;
}

.mobile-ashtaka-chart-legend {
  margin: 0 !important; color: #4e6274; font-size: 13px !important;
  font-weight: 650; line-height: 1.48; overflow-wrap: anywhere;
}
.mobile-ashtaka-chart-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  column-gap: 8px; row-gap: 11px; min-width: 0;
}
.mobile-ashtaka-chart-card {
  --chart-surface: #f5f6f9; --chart-accent: #63778b;
  overflow: hidden; min-width: 0; margin: 0;
  border: 1px solid #d3dce2; border-top: 3px solid var(--chart-accent);
  border-radius: 9px; padding: 4px 4px 6px;
  background: #ffffff;
}
.mobile-ashtaka-chart-card.strength-higher { --chart-surface: #e8f3f7; --chart-accent: #186f84; }
.mobile-ashtaka-chart-card.strength-middle { --chart-surface: #fbf4e6; --chart-accent: #a36c16; }
.mobile-ashtaka-chart-card.strength-lower { --chart-surface: #eef2eb; --chart-accent: #58774b; }
.mobile-ashtaka-chart-card.strength-sav { --chart-surface: #f3edf8; --chart-accent: #72568d; }
.mobile-ashtaka-chart-title {
  margin: 0 0 2px !important; font-size: 17px !important;
  color: #223748; font-weight: 800 !important; line-height: 1.38;
  text-align: center; overflow-wrap: anywhere;
}
.mobile-ashtaka-chart { display:block; width:100%; height:auto; max-width:100%; overflow: visible; }
.mobile-ashtaka-chart text { font-family: "Noto Sans Sinhala", "Iskoola Pota", sans-serif; }
.mobile-ashtaka-house-value { fill:#1c2c3a; font-size: 27px; font-weight: 550; font-variant-numeric: tabular-nums; }
.mobile-ashtaka-house-sign { fill:#345369; font-size: 17px; font-weight: 650; }
.mobile-ashtaka-center-total { fill:#955316; font-size: 33px; font-weight: 850; font-variant-numeric:tabular-nums; }
.mobile-ashtaka-center-name { fill:#284c35; font-size: 23px; font-weight: 800; }
.mobile-ashtaka-chart-footer {
  color:#415569; text-align:center; font-size: 14px !important;
  font-weight:800; line-height:1.3; padding:2px 0 0;
}
.mobile-ashtaka-matrix-title {
  color:#243746; font-size:20px !important; font-weight:850 !important;
  line-height:1.35; margin:6px 0 0 !important;
}
.mobile-ashtaka-matrix-scroll {
  width:100%; overflow-x:auto; overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch; border:1px solid #ccd6e0; border-radius:8px;
}
.mobile-ashtaka-matrix-scroll:focus-visible { outline:3px solid #ab803b; outline-offset:2px; }
.mobile-ashtaka-matrix {
  width:max-content; min-width:100%; border-collapse:collapse; table-layout:auto;
  margin:0 !important; background:#fff;
}
.mobile-ashtaka-matrix :is(th,td) {
  padding:8px 10px !important; border:1px solid #e1e6eb !important;
  text-align:center !important; color:#213648; font-size:16px !important;
  white-space:nowrap !important; font-variant-numeric:tabular-nums;
}
.mobile-ashtaka-matrix thead th { background:#e1e9ef !important; font-size:16px !important; font-weight:800 !important; }
.mobile-ashtaka-matrix tbody tr:nth-child(even) { background:#f3f6f9; }
.mobile-ashtaka-matrix tbody th,
.mobile-ashtaka-matrix thead th:first-child {
  position:sticky; left:0; z-index:1; background:#e9eff4 !important;
  text-align:left !important; font-weight:850 !important;
}
.mobile-ashtaka-matrix tbody tr:nth-child(even) th { background:#e4eaf0 !important; }
.mobile-ashtaka-matrix .mobile-ashtaka-matrix-total :is(th,td) {
  border-top:2px solid #9cafbf !important; font-weight:850 !important;
}
.mobile-ashtaka-detailed-values { border:1px solid #cbd8e1; border-radius:8px; overflow:hidden; }
.mobile-ashtaka-detailed-values > summary {
  cursor:pointer; padding:12px; font-size:17px; font-weight:800;
  color:#204663; background:#f1f6fa;
}
.mobile-ashtaka-detailed-values > .mobile-ashtaka-group { margin:10px 8px; }
@media (max-width:355px) {
  .mobile-ashtaka-chart-grid { gap:6px; }
  .mobile-ashtaka-chart-card { padding:3px; border-radius:7px; }
  .mobile-ashtaka-chart-title { font-size:15px !important; }
}