/* 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){
  /* Topbar — keep logo + name + hamburger; hide rest (move to drawer via JS) */
  .topbar{height:52px;padding:0 8px;gap:6px}
  .who .nm{font-size:13px}
  .who .meta{display:none}
  .chart-mgr{margin-left:2px;gap:2px}
  .cm-btn{width:26px;height:26px;font-size:12px}
  .mobile-drawer-btn{display:inline-flex;align-items:center;justify-content:center}
  /* Hide secondary tools by default; they move to the drawer */
  .topbar .tool-btn:not(.home-btn),
  .topbar .restore-btn,
  .topbar .reader-toggle,
  .topbar .mode-toggle,
  .topbar .theme-select,
  .topbar .icon-btn:not(.mobile-drawer-btn),
  .topbar .ai-cost-badge{display:none}
  /* Always keep Home + AI cost badge + auth widget visible */
  .topbar .home-btn{padding:5px 9px;font-size:11px}
  .topbar #authWidget{display:flex;align-items:center}

  /* 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}
  .chat-bubble{bottom:64px;right:14px}        /* Above bottom tab-bar */
  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)}
}