/* ==========================================================================
   KSAstroLite shell — the clean frame, ported onto the shared UI.

   The screens, their markup and their engine wiring are unchanged; only the
   frame around them is replaced:

     brand  ·  active chart / Natal-Now  ·  actions      (one header row)
     ─────────────────────────────────────────────────
     Panchanga  Jamakkol  Charts  Horoscope  KP  …       (one tab bar)
     ─────────────────────────────────────────────────
     the screen

   The left rail, the per-screen title with its prev/next/home arrows and the
   phone's bottom bar all went: three navigation systems for one choice.  The
   tab bar is drawn by js/jv/ui/topnav.js from the same JV.nav model, so it
   needs no wiring of its own — any [data-nav] button already navigates and
   is lit by the shell's markActiveNav().

   Loaded last, so it wins ties with the layers before it.  !important only
   where the older layers pin layout with high-specificity phone rules.
   ========================================================================== */

/* ---------- palette: KSAstroLite's paper and brass on the default theme ---- */
html[data-theme="cream"], html:not([data-theme]) {
  --th-page: #FBF3D5;
  --th-page-alt: #F3E9C6;
  --th-card: #FFFCF0;
  --th-card-alt: #F7EDCB;
  --th-text: #3A2E14;
  --th-text-dim: #75663A;
  --th-label: #6B5A2E;
  --th-value: #3A2E14;
  --th-line: #E2D3A0;
  --th-line-soft: #EDE2BE;
  --th-accent: #8A5F14;
  --th-accent-soft: #F5E7C0;
  --th-header: #FFFCF0;
  --th-header-text: #3A2E14;
  --th-tabs: #FFFCF0;
  --th-tab-active: #F5E7C0;
  --th-input-bg: #FFFCF0;
  --th-shadow: rgba(58, 46, 20, 0.07);
  --th-btn-text: #FFFCF0;
}
html[data-theme="cream"] body, html:not([data-theme]) body { background: var(--th-page); }

/* ---------- frame ------------------------------------------------------- */
html body .app,
html body .app.rail-collapsed {
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas: "brand topbar" "topnav topnav" "main main" !important;
}
html body .rail,
html body .rail-toggle,
html body .mobile-nav { display: none !important; }

/* header row: brand and toolbar read as one strip, no divider between them */
.app .brand-cell {
  background: var(--th-card);
  border-right: 0;
  padding-inline: max(12px, 2vw) var(--s-2);
}
.app .brand-logo { width: 32px; height: 32px; border-radius: 6px; }
.app .brand-title { font-size: 17px; letter-spacing: -0.01em; }
.app .brand-sub { font-size: 11px; color: var(--th-text-dim); }
.app .topbar {
  background: var(--th-card);
  box-shadow: none;
  padding-inline: var(--s-2) max(12px, 2vw);
}

/* actions: KSAstroLite's quiet outlined buttons */
.app .topbar .btn-topbar {
  background: transparent;
  color: var(--th-accent);
  border: 1px solid var(--th-accent);
  border-radius: 7px;
  font-weight: 500;
}
.app .topbar .btn-topbar:hover { background: var(--th-accent-soft); }

/* ---------- tab bar ------------------------------------------------------ */
.topnav {
  grid-area: topnav;
  position: sticky;
  top: var(--topbar-h);
  z-index: calc(var(--z-topbar) - 1);
  display: flex;
  align-items: stretch;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  touch-action: pan-x;
  padding: 0 max(12px, 2vw);
  background: var(--th-card);
  border-top: 1px solid var(--th-line);
  border-bottom: 1px solid var(--th-line);
}
.topnav::-webkit-scrollbar { display: none; }
.topnav button {
  flex: 0 0 auto;
  padding: 10px 14px 8px;
  font-size: 14px;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--th-text-dim);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
}
.topnav button:hover { color: var(--th-text); }
.topnav button.is-active {
  color: var(--th-accent);
  font-weight: 600;
  border-bottom-color: var(--th-accent);
}
.topnav button:focus-visible { outline: 2px solid var(--th-ring); outline-offset: -2px; }
/* a hairline between the nav groups (Daily · Natal · Research · Reference) */
.topnav .tn-sep {
  flex: 0 0 1px;
  margin: 9px 6px;
  background: var(--th-line);
}

/* ---------- screen ------------------------------------------------------- */
/* The tab says which screen this is; the big title and its arrows repeated
   it.  The head stays only when it carries the Research module picker. */
.page-head .page-nav-btn,
.page-head #page-title,
.page-head #page-sub { display: none !important; }
.page-head:not(:has(.page-research-bar:not(.hidden))) { display: none !important; }

.app .main { padding: 14px max(12px, 2vw) 60px; }
.app .main-inner { max-width: 1400px; }

/* cards: one border, a tinted header strip, tight corners */
.app .card {
  background: var(--th-card);
  border: 1px solid var(--th-line);
  border-radius: 10px;
  box-shadow: none;
}
.app .card > h2,
.app .card > h3 {
  margin: calc(-1 * var(--s-3, 0.75rem)) calc(-1 * var(--s-3, 0.75rem)) var(--s-2, 0.5rem);
  padding: 9px 12px;
  font-size: 14px;
  background: var(--th-page-alt);
  border-bottom: 1px solid var(--th-line);
  border-radius: 10px 10px 0 0;
}

/* ---------- phones & mobile browser optimization --------------------------- */
@media (max-width: 720px) {
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  html body .app,
  html body .app.rail-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "brand" "topbar" "topnav" "main" !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  html body .app .brand-cell {
    display: flex !important;
    align-items: center;
    padding: 6px 12px !important;
    height: auto !important;
    gap: 8px !important;
    background: var(--th-card);
    border-bottom: 1px solid var(--th-line);
  }
  html body .brand-logo {
    width: 1.85rem !important;
    height: 1.85rem !important;
  }
  html body .brand-title {
    font-size: 1.05rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }
  html body .brand-sub {
    display: none !important;
  }

  /* Compact, non-overlapping mobile topbar */
  .app .topbar {
    position: static;
    display: flex !important;
    flex-wrap: wrap !important;
    row-gap: 5px !important;
    column-gap: 4px !important;
    padding: 6px 8px !important;
    align-items: center !important;
  }
  .app .topbar .ctx-chip {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: -1 !important;
    padding: 3px 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .app .topbar .ctx-body {
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
  }
  .app .topbar .ctx-name,
  .app .topbar .ctx-meta {
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .app .topbar .topbar-spacer { display: none !important; }
  .app .topbar .mode-switch {
    margin-right: auto !important;
    flex: 0 0 auto !important;
  }
  .app .topbar .mode-switch button {
    padding: 3px 7px !important;
    font-size: 12px !important;
    min-width: 3.2rem !important;
  }
  .app .topbar .btn-topbar {
    padding: 4px 6px !important;
    font-size: 12px !important;
  }
  .app .topbar .btn-topbar .btn-text { display: none !important; }
  .app .topbar .btn-icon {
    width: 30px !important;
    height: 30px !important;
    padding: 3px !important;
  }

  .topnav {
    top: env(safe-area-inset-top, 0px) !important;
    padding-inline: 4px !important;
    height: 40px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .topnav button {
    padding: 8px 10px !important;
    font-size: 13px !important;
  }
  .app .main {
    padding: 8px 8px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .app .main-inner {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}
/* the bottom bar is gone, so its reserved strip goes with it */
html.is-phone body,
html.is-capacitor body {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
html.is-phone .app,
html.is-capacitor .app {
  padding: 0 !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
html.is-phone .topnav,
html.is-capacitor .topnav { top: env(safe-area-inset-top, 0px); }
/* The header scrolls away on phones; only the tab bar stays pinned.  The
   older shell rules make html.is-phone/.is-capacitor .topbar sticky, which
   left both pinned at top 0 -- the tab bar slid over the mode buttons. */
@media (max-width: 760px) {
  html .app .topbar, html.is-phone .app .topbar,
  html.is-capacitor .app .topbar { position: static; }
}

@media print {
  .topnav { display: none !important; }
}

/* ---------- option groups as KSAstroLite segmented buttons ----------------
   Radio pairs (dasa balance, year basis, …) rendered as loose dots that
   drifted away from their labels on narrow screens.  The same inputs are
   drawn as one segmented control: the radio stays in the DOM and keeps the
   keyboard and change events, it is just not what you look at. */
.app .mode-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 10px; margin: 6px 0;
}
.app .mode-row .mode-title {
  flex: 0 0 auto; font-size: 12.5px; color: var(--th-text-dim); min-width: 7.5rem;
}
.app .mode-row .mode-opt {
  position: relative;
  display: inline-flex; align-items: center; width: auto;
  margin: 0 -1px 0 0; padding: 6px 12px;
  font-size: 13px; line-height: 1.2; white-space: nowrap; cursor: pointer;
  color: var(--th-text-dim); background: var(--th-page);
  border: 1px solid var(--th-line);
}
.app .mode-row .mode-title + .mode-opt { border-radius: 7px 0 0 7px; }
.app .mode-row .mode-opt:last-of-type { border-radius: 0 7px 7px 0; margin-right: 0; }
.app .mode-row .mode-opt input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.app .mode-row .mode-opt:has(input:checked) {
  background: var(--th-accent); border-color: var(--th-accent); color: var(--th-btn-text); z-index: 1;
}
.app .mode-row .mode-opt:has(input:focus-visible) { outline: 2px solid var(--th-ring); outline-offset: 1px; }
.app .mode-row .mode-opt > span { display: inline; }
@media (max-width: 720px) {
  .app .mode-row { gap: 4px 0; }
  .app .mode-row .mode-title { flex-basis: 100%; min-width: 0; }
  .app .mode-row .mode-opt { padding: 6px 10px; font-size: 12.5px; }
}

/* With the rail gone a lone chart stretched to the full screen -- a 750px
   square of mostly empty cells.  KSAstroLite keeps a chart at reading size;
   pairs (D1 + D9) are already narrower than this and are unaffected. */
.app .si-chart.chart-fixed { max-width: 560px; margin-inline: auto; }

/* Horoscope: doshas read at a glance — present in red, absent muted */
.pj-doshas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pj-dosha.is-present { border-left: 3px solid #dc2626; }
.pj-dosha.is-absent { border-left: 3px solid #16a34a; opacity: .85; }

/* Jamakkol: the outer jama labels hang off the edges of #jk-outer.  It used
   to span the whole gold frame, so they landed outside it -- over the card
   heading and past the screen edge on phones -- while the frame's inside
   margin sat empty.  Pin #jk-outer to the chart square instead and size the
   gutter for the labels: they now sit in the frame, beside their rasi. */
html .jk-chart-wrap { --jg-t: 3.2rem; --jg-s: 6rem; --jg-b: 3.2rem; }
html .jk-chart-wrap .jk-chart-inner { margin: var(--jg-t) var(--jg-s) var(--jg-b); }
html .jk-chart-wrap .jk-outer {
  inset: calc(var(--jg-t) + 0.35rem) calc(var(--jg-s) + 0.35rem)
         calc(var(--jg-b) + 0.35rem);
}
html .jk-outer-lbl { max-width: 5.6rem; }
@media (max-width: 760px) {
  html .jk-chart-wrap { --jg-t: 2.7rem; --jg-s: 3.5rem; --jg-b: 2.7rem; }
  html .jk-outer-lbl { max-width: 3.3rem; min-width: 0; }
  html #jk-chart-card { padding-inline: 6px; }
}
@media (min-width: 761px) { html .jk-chart-wrap { max-width: 660px; } }

/* Prediction module chips: a generic phone rule stacks label contents in a
   column, which floated the checkbox above its pill.  Keep them inline. */
html .pr-modchip { flex-direction: row; align-items: center; gap: 6px; }
html .pr-modchip input { width: auto; margin: 0; }
/* ...and the same for every checkbox / radio label (KP, Prediction,
   Settings): box beside its text, never stacked above it. */
html label:has(> input[type="checkbox"]),
html label:has(> input[type="radio"]) { flex-direction: row; align-items: center; gap: 6px; }
html label:has(> input[type="checkbox"]) > input,
html label:has(> input[type="radio"]) > input { width: auto; flex: none; margin: 0; }

/* Phones / Android: the header keeps its fixed desktop height plus the
   safe-area padding from the older shell, leaving a tall empty band round
   the mode switch.  The brand row already clears the status bar. */
@media (max-width: 760px) {
  html .app .topbar, html.is-phone .app .topbar,
  html.is-capacitor .app .topbar {
    min-height: 0; height: auto; padding-top: 8px; padding-bottom: 8px;
  }
  html.is-capacitor .app .brand-cell { padding-top: max(8px, env(safe-area-inset-top, 0px)); }
}

/* Settings → Data & backup */
.data-box { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--th-line); }
.data-title { margin: 0 0 .3rem; font-size: .95rem; }
.data-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#data-where { word-break: break-all; }
#data-box [hidden] { display: none !important; }

/* ---------- phones: every control is a comfortable tap target ----------
   Measured on a 375 px screen the validators found toggles at 23 px, header
   icons at 29-32, selects at 23-35, checkboxes at 13 and Dasa radios at 29.
   44 px is the common touch minimum; the floor applies to what people press,
   not to chart or table internals. */
@media (max-width: 760px) {
  html .app button:not(.chip):not(.si-cell):not([class*="si-"]):not(.tn-dot),
  html .app select,
  html .app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  html .app .tab, html .app .an-sub, html .app .btn, html .app .btn-icon,
  html .app .btn-topbar, html .app .mode-opt, html .app .pr-modchip,
  html .app .seg > *, html .app [role="tab"] {
    min-height: 44px;
  }
  html .app .mode-switch button { min-height: 40px; padding-inline: 10px; }
  html .app .btn-topbar, html .app .btn-icon { min-width: 42px; min-height: 42px; }
  /* the mode switch and four actions share one 375 px row */
  html .app .topbar { column-gap: 4px; }
  html .app input[type="checkbox"], html .app input[type="radio"] {
    width: 22px; height: 22px; min-height: 0; flex: none;
  }
  /* the row holding a checkbox or radio is the target, not the box */
  html .app label:has(> input[type="checkbox"]),
  html .app label:has(> input[type="radio"]) {
    min-height: 44px; padding-block: 6px;
  }
  html .app select { padding-block: 8px; }
  html .app summary { min-height: 44px; padding-block: 11px; box-sizing: border-box; }
}

/* ---------- Prediction: question first, one group at a time ---------- */
.pr-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0 12px; }
.pr-topic { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; text-align: left;
  background: var(--th-card); border: 1px solid var(--th-line); border-radius: 12px; color: var(--th-text); cursor: pointer; }
.pr-topic:hover { border-color: var(--th-accent); }
.pr-topic.is-on { border-color: var(--th-accent); background: var(--th-accent-soft); font-weight: 600; }
.pr-topic-ico { font-size: 1.3rem; color: var(--th-accent); }
.pr-topic-txt { line-height: 1.25; }
.pr-adv { margin: 4px 0 10px; }
.pr-adv > summary { cursor: pointer; padding: 10px 0; color: var(--th-accent); min-height: 44px; display: flex; align-items: center; }
.pr-start { padding: 14px; border: 1px dashed var(--th-line); border-radius: 10px; color: var(--th-text-dim); }
.pr-glance { margin: 6px 0 8px; color: var(--th-text-dim); }
.pr-glance b { color: var(--th-text); font-size: 1.1em; }
.pr-sectabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; margin: 0 -2px; }
.pr-sectabs::-webkit-scrollbar { display: none; }
.pr-sectab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px;
  border: 1px solid var(--th-line); border-radius: 999px; background: var(--th-card); color: var(--th-text); cursor: pointer; }
.pr-sectab.is-on { background: var(--th-accent); color: #fff; border-color: var(--th-accent); }
.pr-sectab b { font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.12); }
.pr-secbody .pr-rules { display: grid; gap: 10px; }
.pr-topics-line { margin: 4px 0; }
.pr-showmore { display: block; width: 100%; min-height: 46px; margin: 12px 0; border: 1px solid var(--th-accent); border-radius: 10px;
  background: transparent; color: var(--th-accent); font-weight: 600; cursor: pointer; }
.pr-aux { margin-top: 16px; }
.pr-aux > summary { cursor: pointer; color: var(--th-text-dim); min-height: 44px; display: flex; align-items: center; }
.pr-sec-d1 { margin-top: 10px; }


/* ---------- open charts: several horoscopes, one tab each ---------- */
.open-charts { display: flex; align-items: center; gap: 6px; overflow-x: auto;
  scrollbar-width: none; padding: 2px 0 10px; margin-bottom: 4px; }
.open-charts::-webkit-scrollbar { display: none; }
.open-charts[hidden] { display: none; }
.oc-tab { flex: none; display: inline-flex; align-items: stretch; border: 1px solid var(--th-line);
  border-radius: 999px; background: var(--th-card); overflow: hidden; }
.oc-tab.is-on { border-color: var(--th-accent); background: var(--th-accent-soft); }
.oc-pick { border: 0; background: transparent; color: var(--th-text); padding: 6px 4px 6px 14px;
  min-height: 38px; cursor: pointer; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
.oc-tab.is-on .oc-pick { font-weight: 600; color: var(--th-accent); }
.oc-close { border: 0; background: transparent; color: var(--th-text-dim); width: 34px; min-height: 38px;
  cursor: pointer; font-size: 1.05rem; }
.oc-close:hover { color: #b91c1c; }
.oc-add { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px dashed var(--th-accent);
  background: transparent; color: var(--th-accent); font-size: 1.3rem; cursor: pointer; }
@media (max-width: 760px) {
  html .app .oc-pick, html .app .oc-close { min-height: 44px; }
  html .app .oc-add { width: 44px; height: 44px; min-height: 44px; }
}