/* Astrologer-Desk — layout: page reset, topbar, shell, panes, resizers,
   universal popup/modal pattern. Component styles live in components.css. */

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:radial-gradient(circle at 15% 10%,rgba(138,77,94,.10),transparent 45%),radial-gradient(circle at 90% 90%,rgba(217,176,106,.06),transparent 50%),var(--bg);color:var(--txt);font-family:'Jost',sans-serif;font-size:14px;line-height:1.5;overflow:hidden}
.body-serif{font-family:'Spectral',serif}

/* Top bar */
.topbar{height:52px;display:flex;align-items:center;gap:10px;padding:0 12px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--bg-2),var(--bg));overflow-x:auto;scrollbar-width:none}
.topbar::-webkit-scrollbar{display:none}
.logo{display:flex;align-items:center;gap:6px;padding:4px 11px;border:1px solid var(--rose-deep);border-radius:30px;white-space:nowrap;flex-shrink:0}
.logo .name{font-family:'Cormorant Garamond',serif;font-size:13px;letter-spacing:.14em;color:var(--rose);text-transform:uppercase}
.who{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex-shrink:1;overflow:hidden}
.who .nm{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--txt);display:flex;align-items:center;gap:6px;white-space:nowrap}
.who .meta{font-size:10px;color:var(--txt-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chart-mgr{display:inline-flex;gap:3px;margin-left:4px}
.cm-btn{width:22px;height:22px;border-radius:5px;border:1px solid var(--line-soft);background:transparent;color:var(--txt-3);cursor:pointer;font-size:10.5px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.12s;flex-shrink:0}
.cm-btn:hover{color:var(--gold);border-color:var(--gold-dim);background:var(--panel)}
.topbar-spacer{flex:1;min-width:8px}
.panchang-mini{display:flex;gap:11px;font-size:10px;color:var(--txt-3);border-left:1px solid var(--line-soft);padding-left:11px;flex-shrink:0;white-space:nowrap}
.panchang-mini b{color:var(--txt-2);font-weight:500}
/* Panchang is space-hungry — hide by default and surface inline only on
   ultra-wide monitors. Users on normal-wide displays can still see it via
   the panchang section that lives in the right pane. */
.panchang-mini{display:none}
@media (min-width: 1800px){ .panchang-mini{display:flex} }

.tool-btn{font-family:'Jost';font-size:11px;letter-spacing:.04em;color:var(--gold);background:var(--panel);border:1px solid var(--gold-dim);border-radius:7px;padding:6px 11px;cursor:pointer;flex-shrink:0;white-space:nowrap;transition:.12s}
.tool-btn:hover{background:var(--panel-hi);border-color:var(--gold)}
.mode-toggle{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:2px;flex-shrink:0}
.mode-toggle button{font-family:'Jost';font-size:11px;letter-spacing:.05em;border:0;background:transparent;color:var(--txt-3);padding:5px 11px;border-radius:20px;cursor:pointer;text-transform:uppercase}
.mode-toggle button.on{background:var(--rose-deep);color:#fff}
.reader-toggle{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:2px;flex-shrink:0}
.reader-toggle button{font-family:'Jost';font-size:11px;letter-spacing:.05em;border:0;background:transparent;color:var(--txt-3);padding:5px 10px;border-radius:20px;cursor:pointer;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.reader-toggle button.on{background:var(--gold-dim);color:#fff}
.reader-toggle .ric{font-size:11px;line-height:1}
.screen-tools{display:flex;align-items:center;gap:5px;flex-shrink:0}
.screen-tools .seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.screen-tools .seg button{font-family:'Jost';font-size:11.5px;color:var(--txt-2);background:transparent;border:0;padding:5px 9px;cursor:pointer;border-right:1px solid var(--line-soft);transition:.12s}
.screen-tools .seg button:last-child{border-right:0}
.screen-tools .seg button:hover{color:var(--gold);background:var(--panel-hi)}
.restore-btn{font-family:'Jost';font-size:11px;letter-spacing:.04em;color:var(--rose);background:var(--panel);border:1px solid var(--rose-deep);border-radius:7px;padding:5px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;transition:.12s;flex-shrink:0;white-space:nowrap}
.restore-btn:hover{background:var(--panel-hi);color:var(--gold);border-color:var(--gold-dim)}
.restore-btn .rico{font-size:12px;line-height:1}
.tool-icon{font-family:'Jost';font-size:12.5px;color:var(--txt-2);background:var(--panel);border:1px solid var(--line);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s;line-height:1;flex-shrink:0}
.tool-icon:hover{color:var(--gold);border-color:var(--gold-dim)}
.tool-icon.on{color:var(--gold);border-color:var(--gold);background:rgba(217,176,106,.12)}
.theme-select{font-family:'Jost';font-size:11px;letter-spacing:.03em;color:var(--txt-2);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 20px 5px 9px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);background-position:calc(100% - 10px) 50%,calc(100% - 6px) 50%;background-size:4px 4px;background-repeat:no-repeat;transition:.12s;flex-shrink:0}
.theme-select:hover{color:var(--gold);border-color:var(--gold-dim)}
.theme-select option{background:var(--panel-2);color:var(--txt)}
.icon-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--txt-2);cursor:pointer;flex-shrink:0}

/* Hide nonessential tools on tighter widths so primary CTAs (Sign in, Time
   Tweak, Tools, theme) always fit. A/A+ zoom + High-contrast + Help can
   move into the Tools modal long-term. */
@media (max-width: 1280px){
  .screen-tools .seg{display:none}              /* A- A+ zoom hidden */
  .tool-icon[id="hcBtn"]{display:none}          /* high-contrast icon */
}
@media (max-width: 1180px){
  .restore-btn span{display:none}               /* show only ↻ */
  .restore-btn{padding:5px 8px}
  .reader-toggle .ric + *{display:none}         /* hide "Reader" label */
}

/* Main shell — 3-col grid with draggable resizers + reader mode collapse */
.shell{display:grid;grid-template-columns:var(--left-w) 1fr var(--right-w);height:calc(100vh - 54px);transition:grid-template-columns .25s ease;position:relative}
.shell.dragging{transition:none}
body.reader .shell{grid-template-columns:var(--left-w) 1fr 0}
body.reader .right,body.reader .right-resizer{display:none}
body.reader .center-body{max-width:920px;margin:0 auto}

.col{overflow-y:auto;height:100%}
.col::-webkit-scrollbar{width:7px}.col::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}.col::-webkit-scrollbar-track{background:transparent}
.left{border-right:1px solid var(--line-soft);background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.right{border-left:1px solid var(--line-soft);background:linear-gradient(180deg,var(--bg-2),var(--bg))}

/* Pane resize handles */
.resizer{position:absolute;top:0;bottom:0;width:6px;background:transparent;cursor:col-resize;z-index:50}
.resizer::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:32px;background:var(--line);border-radius:2px;opacity:.5;transition:.15s}
.resizer:hover::before,.resizer.active::before{background:var(--gold);opacity:1;height:60px}
.resizer.left-resizer{left:var(--left-w);transform:translateX(-3px)}
.resizer.right-resizer{right:var(--right-w);transform:translateX(3px)}

/* Section header shared across panes */
.sec-h{display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-dim);padding:13px 16px 7px;font-weight:500}
.sec-h .ln{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.sec-h.click{cursor:pointer}
.sec-h .chev{color:var(--txt-faint);font-size:9px;transition:.2s}
.collapsed .chev{transform:rotate(-90deg)}
.collapse-body{overflow:hidden;transition:.25s;max-height:1200px}.collapsed .collapse-body{max-height:0!important;opacity:0}
.footnote{font-size:10px;color:var(--txt-faint);padding:0 16px 16px;font-style:italic;line-height:1.5}

/* Universal popup pattern (chart popup, help popup) */
.popup-bg{position:fixed;inset:0;background:rgba(8,4,6,.85);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.popup-bg.open{display:flex}
.popup{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px 24px;box-shadow:0 30px 80px rgba(0,0,0,.7);max-height:92vh;overflow-y:auto}
.popup-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.popup-head h2{font-family:'Cormorant Garamond';font-size:22px;font-weight:600;color:var(--txt);flex:1;line-height:1.1}
.popup-close{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--bg-2);color:var(--txt-2);cursor:pointer;font-size:14px;line-height:1}
.popup-close:hover{color:var(--rose);border-color:var(--rose-deep)}

/* Tools modal — older modal pattern (top-anchored) */
.modal-bg{position:fixed;inset:0;background:rgba(8,4,6,.7);backdrop-filter:blur(3px);display:none;align-items:flex-start;justify-content:center;z-index:100;padding-top:90px}
.modal-bg.open{display:flex}
.modal{width:560px;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — < 768px
   Strategy: single-pane mode with bottom tab-bar (Chart / Reading / Strength).
   Topbar collapses extras into a hamburger drawer. Modals + chat go full-screen.
   ════════════════════════════════════════════════════════════════════════ */

/* Bottom pane-switcher tab-bar — only visible on mobile */
.mobile-tabs{display:none;position:fixed;bottom:0;left:0;right:0;height:54px;background:var(--bg-2);border-top:1px solid var(--gold-dim);z-index:80;align-items:stretch;box-shadow:0 -4px 14px rgba(0,0,0,0.35)}
.mt-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:none;color:var(--txt-3);font-family:'Jost',sans-serif;font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:6px 4px;border-top:2px solid transparent;transition:.12s}
.mt-tab.on{color:var(--gold);border-top-color:var(--gold)}
.mt-tab-ico{font-size:16px;line-height:1}

/* Mobile topbar drawer (hamburger menu opens this) */
.mobile-drawer-btn{display:none;background:var(--panel);border:1px solid var(--gold-dim);border-radius:8px;color:var(--gold);padding:6px 11px;font-size:16px;line-height:1;cursor:pointer;flex-shrink:0}
.mobile-drawer{position:fixed;top:52px;left:0;right:0;background:var(--bg-2);border-bottom:1px solid var(--gold-dim);box-shadow:0 8px 20px rgba(0,0,0,0.3);z-index:79;padding:12px;display:none;flex-direction:column;gap:8px}
.mobile-drawer.open{display:flex}
.mobile-drawer .tool-btn,.mobile-drawer .restore-btn,.mobile-drawer .icon-btn,.mobile-drawer .reader-toggle,.mobile-drawer .mode-toggle{width:100%;justify-content:center}

@media (max-width: 767px){
  /* 2026-06-14: switched from hide-secondary-items-to-drawer to a fully
     horizontally-scrollable topbar. User reported they couldn't find
     Theme / Tools / Restore / Reader / Time Tweak because they were
     hidden; a swipeable row of icons is more discoverable than a drawer.
     Everything is in the row now — swipe left/right to reach any tool.
     The ☰ hamburger stays for users who prefer the drawer pattern. */
  .topbar{
    height:52px;padding:0 6px;gap:4px;
    overflow-x:auto;overflow-y:visible;
    flex-wrap:nowrap;
    scrollbar-width:thin;
    scrollbar-color:var(--gold-dim) transparent;
    -webkit-overflow-scrolling:touch;
  }
  .topbar::-webkit-scrollbar{height:3px}
  .topbar::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:2px}
  .topbar::-webkit-scrollbar-track{background:transparent}
  /* Every topbar child stays at its natural width — never shrink, never
     overlap. The scroll container handles overflow. */
  .topbar > *{flex-shrink:0}
  /* .who only carries the welcome label + meta line, both hidden on mobile;
     collapse the wrapper too so it doesn't eat space. */
  .who{display:none}
  /* Chart-mgr buttons (now a direct child of .topbar — see _topbar.html) */
  .chart-mgr{margin-left:0;gap:2px;display:inline-flex;align-items:center}
  .cm-btn{width:30px;height:30px;font-size:14px;padding:0}
  /* Logo: keep only the 📖 icon to save first-screen real estate */
  .topbar .logo{flex-shrink:0}
  .topbar .logo .name{display:none}
  /* Compact the persistent items — anything visible without scrolling */
  .topbar .home-btn{padding:5px 9px;font-size:11px;white-space:nowrap}
  .topbar #balancePill{font-size:10px;padding:3px 7px;white-space:nowrap}
  .topbar #authWidget{display:flex;align-items:center}
  .topbar #authWidget .auth-pill{padding:3px 7px;font-size:10.5px;white-space:nowrap}
  /* Tool / Restore / Reader / Mode-toggle — visible now, compact font so
     the scroll row is dense but readable. */
  .topbar .tool-btn{padding:5px 9px;font-size:11px;white-space:nowrap}
  .topbar .restore-btn{padding:5px 9px;font-size:11px;white-space:nowrap}
  .topbar .reader-toggle button,
  .topbar .mode-toggle button{padding:5px 8px;font-size:11px;white-space:nowrap}
  .topbar .icon-btn{padding:5px 8px}
  .topbar .ai-cost-badge{font-size:10px}
  /* Drop the legacy spacer; nothing to push apart in a scroll container */
  .topbar-spacer{display:none}
  /* Hamburger stays at the end of the row (scrolls into view) */
  .mobile-drawer-btn{margin-left:0;display:inline-flex;align-items:center;justify-content:center}
  /* Hidden inline mirror — not a user control */
  .topbar .theme-select{display:none}

  /* Shell — switch to single-pane, full-screen, tab-driven */
  .shell{display:block;grid-template-columns:none;height:calc(100vh - 54px - 54px); /* topbar + bottom-tabs */}
  .col{display:none;width:100%;height:100%;border:none !important}
  body[data-pane="left"]   .col.left,
  body[data-pane="center"] .col.center,
  body[data-pane="right"]  .col.right{display:block}
  /* Default to center pane on first load */
  body:not([data-pane]) .col.center{display:block}
  /* Hide column resizers entirely on mobile */
  .resizer{display:none}
  /* Reader-mode is meaningless on single-pane; reset */
  body.reader .shell{grid-template-columns:none}
  body.reader .col.right{display:none}
  body.reader .col.center{max-width:none;margin:0}

  /* Show bottom tab-bar */
  .mobile-tabs{display:flex}

  /* Popup chart + modals — full-screen */
  .popup-bg{padding:0}
  .popup{border-radius:0;width:100% !important;max-width:none !important;max-height:100vh !important;min-height:100vh;padding:14px 14px 70px}
  .modal-bg{padding-top:0}
  .modal{width:100% !important;border-radius:0;min-height:100vh}

  /* Chat panel — full-screen */
  .chat-panel{right:0;left:0;bottom:0;width:100% !important;height:100vh !important;max-height:100vh !important;border-radius:0;border-left:none;border-right:none;border-top:1px solid var(--gold-dim)}
  body.chat-expanded .chat-panel{width:100% !important;height:100vh !important}
  /* 2026-06-14: tab-bar is 54px tall + 4px shadow; bubble was at 64px
     bottom (only 10px clearance) which let its "Ask Aditya" pill hug
     the Periods tab. Lift to 78px so there's healthy clearance and the
     bubble visually sits ABOVE the tab strip rather than touching it. */
  .chat-bubble{bottom:78px;right:14px}
  body.chat-open .chat-bubble{display:none}

  /* Time-Tweak floating panel — full-width drawer */
  .ttk-panel{right:0;left:0;width:100% !important;top:60px;max-height:calc(100vh - 130px);border-radius:0}

  /* Settings popover — center on mobile */
  .settings-pop{right:auto !important;left:50% !important;transform:translateX(-50%) !important;width:min(360px,94vw) !important;top:60px !important}

  /* Tables — horizontal scroll wrappers so columns don't squish */
  .rich-tbl,.tbl-wrap,.pano-cell #chartPopupPlanets,.pano-cell #chartPopupHouses{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Detail blocks — tighter padding to gain reading width */
  .detail-block{padding:11px 12px;margin-top:8px}
  .center-head{padding:14px 16px 11px}
  .ch-pills{gap:4px}

  /* Section headers smaller on mobile */
  .sec-h{padding:10px 12px 5px;font-size:9.5px}

  /* Hide section subtitles that crowd small screens */
  .pano-section-h .pano-chart-cap{display:none}
}

/* Smaller-phone tweaks */
@media (max-width: 420px){
  .topbar .home-btn{padding:4px 7px;font-size:10.5px}
  .topbar .home-btn span{display:none}        /* show emoji only */
  .who .nm{font-size:12px}
  .logo{padding:3px 8px}
  .logo .name{font-size:11px;letter-spacing:.08em}
  .mobile-tabs{height:50px}
  .mt-tab{font-size:9px}
  .mt-tab-ico{font-size:14px}
  .shell{height:calc(100vh - 52px - 50px)}
}