/* ── Tokens ─────────────────────────────────────── */
:root {
  --bg:       #FFFBED;
  --surface:  #F5F0E1;
  --border:   #A65555;
  --text:     #131330;
  --muted:    #80808A;
  --accent:   #B3051C;
  --hover:    #385DFF;
  --toggle-bg:#D8D4CC;
  --tog-knob: #FAFAF8;
  --inp-bg:   #EDE8D8;
  --inp-brd:  #A65555;
  --box-bg:   #FAF6EC;
  --box-shadow: 0 1px 4px #3c140a12;
 
  --col-bg:        #FAF6EC;
  --col-ring:      #744b4b;
  --col-core:      #b9b09f;
  --col-ring-fade: #b9b09f;
  --col-text:      #1a1408;
  --col-text-fade: #8a7850;
  --col-sign:      #7a5c5a;
  --col-sign-fade: #573232;
  --col-asp:       #1a1408;
  --col-angle:     #3a2a18;
  --col-angle-as:  #B3051C;
  --col-angle-mc:  #5776ff;
  --col-house-num: #8a7860;

  --col-sun:     #dca613;
  --col-moon:    #7a7aaa;
  --col-mercury: #998e46;
  --col-venus:   #4098a0;
  --col-mars:    #a20909;
  --col-jupiter: #183ae4;
  --col-saturn:  #48382a;
  --col-uranus:  #ce43c0;
  --col-neptune: #6a41ff;
  --col-pluto:   #703051;
  --col-rahu:    #7d7d7d;
  --col-ketu:    #7d7d7d;
  --col-fortune: #d68dc4;
  --col-spirit:  #8c91d3;
}

[data-theme="dark"] {
  --bg:       #0D0505;
  --surface:  #120A0A;
  --border:   #27303e;
  --text:     #C7BFBB;
  --muted:    #c4c4e3;
  --accent:   #5776ff;
  --hover:    #B3051C;
  --toggle-bg:#333028;
  --tog-knob: #EDEAE4;
  --inp-bg:   #0f0f12;
  --inp-brd:  #3f526f;
  --box-bg:   #141220;
  --box-shadow: 0 1px 6px rgba(0,0,0,0.35);

  --col-bg:        #141220;
  --col-ring:      #363c57;
  --col-core:      #52545c;
  --col-ring-fade: #333439;
  --col-text:      #c8bfb0;
  --col-text-fade: #605e90;
  --col-sign:      #b0a090;
  --col-sign-fade: #748aaa;
  --col-asp:       #d7dcf6;
  --col-angle:     #8a7a6a;
  --col-angle-as:  #B3051C;
  --col-angle-mc:  #5776ff;
  --col-house-num: #494e6b;

  --col-sun:     #efc44d;
  --col-moon:    #a5a5e3;
  --col-mercury: #bcbe77;
  --col-venus:   #74cdd5;
  --col-mars:    #b13131;
  --col-jupiter: #4972ec;
  --col-saturn:  #6e6453;
  --col-uranus:  #d36aac;
  --col-neptune: #7059c0;
  --col-pluto:   #833245;
  --col-rahu:    #7c7c7c;
  --col-ketu:    #7c7c7c;
  --col-fortune: #ff95e3;
  --col-spirit:  #9ca2ff;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
@media(min-width:701px){
  html,body{overflow:hidden}
}

html{
  scroll-behavior: smooth;
  animation: fadein 1.5s ease-out both;
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@font-face {
  font-family: "Esoterik";
  src: url("../fonts/Esoterik.ttf") format("truetype");
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"EB Garamond",serif;
  font-size:15px;
  line-height:1.5;
  transition:background .2s,color .2s;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

a {
  color: var(--accent);
  text-decoration: underline;
}
a:hover {
  color: var(--hover);
}

.page {
  display:grid;
  grid-template-columns:1fr 390px;
  height:100vh;
  width:100%;
  position:relative;
}

/* ── Chart column ──────────────────────────────── */
.chart-col {
  grid-column:1;
  grid-row:1;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.8rem;
}
.chart-links {
  position:absolute;
  bottom:0.75rem;
  left:1.2rem;
  display:flex;
  gap:0.75rem;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:11px;
}
.chart-links a { color:var(--muted); text-decoration:underline; }
#wheel { display:block; }

/* ── Right column ──────────────────────────────── */
.right-col {
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:1rem;
  overflow-y:auto;
  position:sticky;
  top:0;
  height:100vh;
  padding:4.2rem 2.5rem 4.2rem 0rem;
}

/* ── Boxes (sections) ──────────────────────────── */
.section {
  background:var(--box-bg);
  border:0.5px solid var(--border);
  border-radius:5px;
  padding:0.75rem 1rem;
  box-shadow:var(--box-shadow);
  flex-shrink:0;
}

.sec-title {
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.55rem;
  text-align: center;
}

/* ── Toggle (floating in navigator section) ────── */
.toggle-wrap {
  position:fixed;
  top:0.75rem;
  right:0.9rem;
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  user-select:none;
  z-index:100;
}
.toggle-lbl {
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.05em;
}
.tog {
  position:relative;
  width:34px;height:18px;
  background:var(--toggle-bg);
  border-radius:9px;
  transition:background .2s;
  flex-shrink:0;
}
.tog::after {
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:14px;height:14px;
  background:var(--tog-knob);
  border-radius:50%;
  transition:transform .2s;
}
[data-theme="dark"] .tog{background:var(--accent)}
[data-theme="dark"] .tog::after{transform:translateX(16px)}

/* ── Navigator ─────────────────────────────────── */
.nav-lbl {
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.06em;
}
.nav-grid-rows {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:.35rem .5rem;
  align-items:center;
  margin-top:.35rem;
}
.nav-left {
  display:flex;
  justify-content:flex-end;
  gap:2px;
}
.nav-right {
  display:flex;
  justify-content:flex-start;
  gap:2px;
}
.nav-grid-rows input {
  background:var(--inp-bg);
  border:.5px solid var(--inp-brd);
  color:var(--text);
  font-family:"EB Garamond",serif;
  font-size:.85rem;
  padding:.28rem .45rem;
  border-radius:3px;
  outline:none;
  text-align:center;
  width:100%;
}
.nav-grid-rows input:focus { border-color:var(--accent); }
.nav-grid-rows .nav-lbl {
  text-align:right;
}
.nav-grid-rows .loc-wrap {
  width:100%;
}

.nav-inline-row input:focus { border-color:var(--accent); }

.sbtn {
  background:none;
  border:0px solid var(--inp-brd);
  color:var(--muted);
  font-size:.8rem;
  padding:.1rem .15rem;
  white-space:nowrap;
  border-radius:2px;
  cursor:pointer;
  text-align:center;
  transition:all .12s;
  font-family:"Bricolage Grotesque",sans-serif;
}
.sbtn:hover{border-color:var(--accent);color:var(--accent)}
.sbtn:active{transform:scale(.95)}

.btn-now {
  width:20%;
  margin: 0.4em;
  background:var(--inp-bg);
  border:.5px solid var(--inp-brd);
  color:var(--accent);
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:.32rem;
  border-radius:2px;
  cursor:pointer;
  margin-top:1em;
  transition:all .12s;
}
.btn-now:hover{border-color:var(--accent);background:var(--surface)}

/* location autocomplete */

.nav-inline-row .loc-wrap {
  flex:1;
  min-width:0;
  max-width:120px;
}

.loc-wrap{
  position:relative;
  width:100%}

.suggestions {
  display:none;
  position:absolute;
  top:100%;left:0;right:0;
  background:var(--surface);
  border:.5px solid var(--border);
  border-top:none;
  border-radius:0 0 3px 3px;
  z-index:50;
  max-height:160px;
  overflow-y:auto;
}
.sug-item {
  padding:.28rem .45rem;
  font-size:.78rem;
  cursor:pointer;
  color:var(--muted);
  border-bottom:.5px solid var(--border);
}
.sug-item:hover{background:var(--inp-bg);color:var(--text)}
.sug-item:last-child{border-bottom:none}

/* ── Feature toggles ────────────────────────────── */
.feat-row {
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
}
.feat-tog {
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:10px;
  letter-spacing:.06em;
  color:var(--muted);
  background:var(--inp-bg);
  border:.5px solid var(--inp-brd);
  border-radius:2px;
  padding:.22rem .55rem;
  cursor:pointer;
  transition:all .12s;
  user-select:none;
}
.feat-tog.on {
  color:var(--accent);
  border-color:var(--accent);
  background:var(--surface);
}

/* ── Bottom grid: Next Aspects + Positions ──────── */
.bottom-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.6rem;
  flex:1;
  min-height:0;
  /* not a section box itself; children are */
}
.bottom-box {
  background:var(--box-bg);
  border:0.5px solid var(--border);
  border-radius:5px;
  padding:.65rem .85rem;
  overflow-y:auto;
  box-shadow:var(--box-shadow);
}
.bb-title {
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.5rem;
}

/* Aspects */
.asprow {
  display:grid;
  grid-template-columns:1.2rem 1rem 1.2rem 1fr;
  gap:.15rem;
  align-items:center;
  padding:.18rem 0;
  border-bottom:.5px solid var(--border);
  cursor:pointer;
  font-size:.8rem;
}
.asprow:last-child{border-bottom:none}
.asprow:hover{background:var(--inp-bg)}
.ap{
  text-align:center;
  font-size:1.1rem;
  font-family: "Esoterik";
  }
.asym{
  text-align:center;
  font-size:0.9rem;
  color:var(--muted);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
}
.atime{font-size:.7rem;color:var(--muted);text-align:right}
.dim{font-size:.72rem;color:var(--muted)}

/* Positions + Angles */
.srow {
  display:grid;
  grid-template-columns:1.2rem 1fr auto;
  gap:.2rem;
  align-items:center;
  padding:.15rem 0;
  border-bottom:.5px solid var(--border);
  font-size:.75rem;
}
.srow:last-child{border-bottom:none}
.ssym{
  text-align:center;
  font-size:1.1rem;
  font-family: "Esoterik";
}
.sname{color:var(--muted);font-size:.68rem;font-family:"Bricolage Grotesque",sans-serif;letter-spacing:.04em}
.sval{
  text-align:right;
  font-variant-numeric: tabular-nums;
  font-family:"EB Garamond",serif;
  color:var(--muted);
  font-size:.75rem;
}
.slbl{font-family:"Bricolage Grotesque",sans-serif;font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.04em}
.℞{color:#a03020;
  font-size:.6rem;
 }

 /* ── Donate modal ──────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  position: relative;
  width: min(550px, 90vw);
  min-height: 200px; /* your value */
  padding: 1.5rem 2rem 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:var(--box-bg);
}

.modal-box p {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.9rem;
  line-height: 1.7;
}

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  transition: color .12s;
}
.modal-close:hover { color: var(--accent); }

@media(max-width:768px){
  html, body { overflow: auto; height: auto; }

  .page {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  /* Chart first */
  .chart-col {
    order: 1;
    grid-column: unset;
    grid-row: unset;
    width: 100%;
    height: 100vw;
    padding: 6rem 0.8rem 1rem;
  }

  /* links flow at the bottom of the page naturally */
  .chart-links {
    position: static;
    order: 3;
    padding: 0.5rem 1rem 1.5rem;
  }

  /* Right-col boxes underneath */
  .right-col {
    order: 2;
    grid-column: unset;
    grid-row: unset;
    position: static;
    height: auto;
    overflow-y: visible;
    padding: 4rem 1rem 2rem;
    border-left: none;
  }
}