/* ═══════════════════════════════════════════════════════════════════════
   Horā होरा — chart-application shell
   Layout chrome for the restructured /chart page only: the collapsed
   birth-summary bar, the single-line scrollable tab row, and the
   "Astrologers (Pro)" disclosure. Same optical-glass material system;
   every colour comes from the tokens in styles.css :root. styles.css is
   shared with the public site and must not grow — chart chrome lives here.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Birth summary bar (details entered once, kept on this device) ──*/
.birth-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
#formCard.collapsed h2,
#formCard.collapsed .form-intro,
#formCard.collapsed form { display: none; }
#formCard.collapsed { padding: 14px 20px; max-width: 1080px; }
#formCard.collapsed .privacy-note { margin-top: 8px; }

.birth-summary .bs-text {
  flex: 1 1 280px; min-width: 0; font-size: .95rem; color: var(--ink);
  overflow-wrap: anywhere;
}
.birth-summary .bs-text b { font-weight: 650; }
.birth-summary .bs-meta { color: var(--ink-soft); }
.birth-summary .bs-dot { color: var(--ink-faint); }
.birth-summary .bs-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto;
}
.birth-summary .glass-btn { min-height: 44px; padding: 10px 18px; font-size: .86rem; }

.privacy-note { color: var(--ink-soft); font-size: .76rem; margin: 12px 0 0; }

@media (max-width: 560px) {
  .birth-summary .bs-actions { margin-left: 0; width: 100%; }
  .birth-summary .bs-actions .glass-btn { flex: 1 1 auto; }
}

/* ── 2 · Tab row: one scrollable line, never three wrapped rows ────────*/
#tabs {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  padding: 6px 2px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#tabs::-webkit-scrollbar { display: none; }
#tabs .tab {
  flex: 0 0 auto; white-space: nowrap; min-height: 44px;
}

/* ── 3 · Astrologers (Pro) — one disclosure after the public tabs ──────*/
.pro-card { padding: 0; }
.pro-toggle {
  width: 100%; min-height: 56px; cursor: pointer; border: 0; background: none;
  font: inherit; color: var(--ink); text-align: left; padding: 16px 22px;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center;
  border-radius: var(--radius);
}
.pro-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.pro-title { font-weight: 650; font-size: 1rem; grid-column: 1; }
.pro-chev {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--ink-soft);
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.pro-toggle[aria-expanded="true"] .pro-chev { transform: rotate(180deg); }
.pro-sub { grid-column: 1; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }

#proBody { padding: 0 24px 24px; }
.pro-sec { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(120,150,200,.25); }
.pro-sec:first-child { margin-top: 0; }
.pro-h {
  color: var(--ink); font-size: 1.02rem; margin: 0 0 12px; padding-left: 12px;
  border-left: 3px solid rgba(120,170,255,.6);
}
.pro-audit {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(120,150,200,.25);
  color: var(--ink-soft); font-size: .78rem;
}

/* Wide technical tables scroll inside their own container — the page
   itself never scrolls horizontally, even at 390. */
.tbl-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.tbl-scroll table { min-width: 480px; }
#proBody .tbl-scroll table { min-width: 640px; }

@media (max-width: 560px) {
  #proBody { padding: 0 16px 18px; }
  .pro-toggle { padding: 14px 16px; }
}

/* ── 4 · Print: the technical layer always prints in full ──────────────
   Parity with the pre-restructure page, where every panel printed. The
   summary bar and toggle are screen chrome only. */
@media print {
  .birth-summary, .pro-toggle, .privacy-note { display: none !important; }
  #proBody { display: block !important; padding: 0; }
  #proBody[hidden] { display: block !important; }
  .pro-card { padding: 18px; }
  .pro-sec { border-top: none; }
  .pro-h { display: none; } /* data-ptitle provides the printed heading */
}