/* ============================================================
   Moon Calendar — Deborah Lynna Astrology
   Dark house style: near-black ground, cream type, peach accent.
   ============================================================ */

:root{
  --ink:          #020E0F;   /* page ground, matches the site */
  --ink-2:        #06181A;   /* raised surfaces */
  --ink-3:        #0A2124;   /* hover */
  --cream:        #F3EEE7;
  --cream-dim:    #C9C6C0;
  --muted:        #7E8C8C;
  --peach:        #E5A87E;
  --terracotta:   #D4855A;
  --rust:         #B5583C;
  --line:         rgba(243,238,231,.14);
  --line-soft:    rgba(243,238,231,.07);

  --fire:  #D98A5F;
  --earth: #9CA783;
  --air:   #9FB6C4;
  --water: #8E9CC4;

  --sans: "Jost", "Futura", "Avenir Next", "Century Gothic", system-ui, -apple-system, sans-serif;
  --script: "Great Vibes", "Snell Roundhand", cursive;

  --r: 18px;
  --pad: clamp(20px, 6vw, 34px);
}

*{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-weight:300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  overflow-x:hidden;
}

/* ---------- starfield ---------- */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 78% 12%, rgba(255,255,255,.40), transparent 60%),
    radial-gradient(1px 1px   at 33% 72%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.6px 1.6px at 64% 44%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1px 1px   at 88% 68%, rgba(255,255,255,.30), transparent 60%),
    radial-gradient(1.2px 1.2px at 22% 92%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1px 1px   at 52% 8%,  rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1px 1px   at 5% 55%,  rgba(255,255,255,.22), transparent 60%),
    radial-gradient(1200px 700px at 50% -12%, rgba(229,168,126,.10), transparent 70%),
    radial-gradient(900px 600px at 50% 110%, rgba(143,156,196,.07), transparent 70%);
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--cream); color:var(--ink); padding:10px 16px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

.stage{
  position:relative; z-index:1;
  flex:1;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(16px, 4vw, 40px) 16px 8px;
}

.card{ width:100%; }

/* =========================================================
   DAY VIEW
   ========================================================= */
.day{
  max-width: 400px;
  text-align:center;
  animation: rise .5s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes rise{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.eyebrow{
  margin:0 0 14px;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:400;
}

.lede{
  margin:0;
  font-size: clamp(1.24rem, 5.2vw, 1.5rem);
  font-weight:300; letter-spacing:.03em;
  color:var(--cream);
}

.sign{
  font-family:var(--script);
  font-size: clamp(3.6rem, 16vw, 4.6rem);
  line-height:.94;
  margin:.06em 0 .1em;
  color:var(--cream);
  text-shadow: 0 0 34px rgba(229,168,126,.25);
}

.signMeta{
  margin:10px 0 2px;
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.signMeta i{
  display:block; width:36px; height:1px;
  background:rgba(229,168,126,.45);
}
.signMeta .glyph{ font-size:1.3rem; color:var(--peach); line-height:1; }

/* zodiac glyphs must stay as letterforms, never emoji, and must look
   the same on every device — hence the hosted symbol font first.
   Only ever put a glyph inside these: the symbol font's digits are
   very wide and would wreck any time sitting next to it. */
.glyph, .sg{
  font-family: "Noto Sans Symbols 2", "Apple Symbols", "Segoe UI Symbol", "DejaVu Sans", var(--sans);
  font-variant-emoji: text;
}

/* ---------- the moon ---------- */
.moonWrap{
  position:relative;
  width: min(212px, 56vw); aspect-ratio:1;
  margin: 14px auto 18px;
  display:grid; place-items:center;
}
.moonGlow{
  position:absolute; inset:-26%;
  border-radius:50%;
  background: radial-gradient(circle, rgba(229,168,126,.22), rgba(229,168,126,.06) 45%, transparent 68%);
  filter: blur(6px);
  transition: opacity .6s ease;
}
.moonArt{ position:relative; width:100%; height:100%; }
.moonArt svg, .moonArt img{ width:100%; height:100%; display:block; }
.moonArt img{ object-fit:contain; }

.lit{ filter: sepia(.5) saturate(1.7) hue-rotate(-12deg) brightness(1.04); }
.night{ fill:#020E0F; fill-opacity:.90; }

/* ---------- words ---------- */
.phaseLine{
  margin:0 0 8px;
  font-size: clamp(1rem, 4.4vw, 1.1rem);
  font-weight:300; letter-spacing:.02em;
}
.phaseLine.big{ color:var(--peach); }

.teach{
  margin:0 auto 20px;
  max-width: 33ch;
  font-size:.84rem; line-height:1.62;
  color:var(--cream-dim); font-weight:200;
}
.teach b{ font-weight:400; color:var(--cream); }

/* ---------- facts strip ---------- */
.facts{
  display:flex; justify-content:center; gap:0;
  margin:0 0 20px; padding:0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.facts .fact{
  flex:1; padding:12px 6px;
  border-left:1px solid var(--line-soft);
}
.facts .fact:first-child{ border-left:0; }
.facts dt{
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin:0 0 5px;
}
.facts dd{
  margin:0; font-size:.86rem; font-weight:300;
  font-variant-numeric: tabular-nums;
}

/* ---------- what's coming ---------- */
.upNext{ display:grid; gap:8px; margin-bottom:22px; }
.upItem{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:12px;
  text-align:left;
  width:100%;
  font:inherit; color:inherit;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.upItem:hover{ background:var(--ink-3); border-color:var(--line); }
.upItem:active{ transform:scale(.99); }
.upItem .mini{ width:26px; height:26px; flex:none; }
.upItem .txt{ flex:1; min-width:0; }
.upItem .t1{
  display:block; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  margin-bottom:3px;
}
.upItem .t2{ display:block; font-size:.84rem; font-weight:300; }
.upItem .when{
  font-size:.68rem; color:var(--peach); white-space:nowrap;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.controls{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:14px;
}
.ctl{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:transparent; color:var(--cream);
  border:1px solid var(--line); border-radius:999px;
  min-height:42px; padding:0 14px;
  font:inherit; font-size:.86rem; letter-spacing:.02em;
  cursor:pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.ctl:hover{ background:var(--ink-2); border-color:rgba(243,238,231,.3); }
.ctl:active{ transform:scale(.96); }
.ctl svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.ctl.small{ min-height:34px; padding:0 9px; }
.dateBtn{ min-width:190px; font-variant-numeric: tabular-nums; }
.calIcon{ color:var(--peach); }

.subControls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 18px;
}
.link{
  background:none; border:0; padding:6px 2px;
  font:inherit; font-size:.72rem; font-weight:300; letter-spacing:.06em;
  color:var(--muted); cursor:pointer;
  border-bottom:1px solid transparent;
  display:inline-flex; align-items:center; gap:6px;
  transition: color .2s ease, border-color .2s ease;
}
.link:hover{ color:var(--cream); border-bottom-color:var(--terracotta); }
.pinIcon{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.5; }

:where(button, input, [tabindex]):focus-visible{
  outline:2px solid var(--peach); outline-offset:3px; border-radius:6px;
}

/* =========================================================
   MONTH VIEW
   ========================================================= */
.month{
  max-width: 740px;
  animation: rise .4s cubic-bezier(.2,.7,.3,1) both;
}
.monthHead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:18px;
}
.monthTitleWrap{ text-align:center; flex:1; min-width:0; }
.monthTitle{
  margin:0; font-size: clamp(1.2rem, 5vw, 1.6rem); font-weight:300; letter-spacing:.06em;
}
.monthSub{
  margin:4px 0 0; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* ---------- follow one sign ---------- */
.filterWrap{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:max-content; max-width:100%;
  margin:0 auto 24px;
  padding:14px 20px;
  background:var(--ink-2);
  border-radius:14px;
}
/* A hand-built dropdown. The browser's own one cannot be styled —
   it arrives grey, in the system font, with a blue ring. */
.selectWrap{ position:relative; width:min(260px,100%); }

.pill{
  width:100%; height:42px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 16px 0 22px;
  background:var(--ink); color:var(--cream-dim);
  border:1px solid var(--line); border-radius:999px;
  font:inherit; font-size:.82rem; font-weight:300; letter-spacing:.05em;
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease;
}
.pill:hover{ border-color:rgba(243,238,231,.32); color:var(--cream); }
.pill .caret{
  width:15px; height:15px; flex:none;
  fill:none; stroke:var(--peach); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  transition: transform .22s ease;
}
.pill[aria-expanded="true"] .caret{ transform:rotate(180deg); }
.filterWrap.on .pill{ border-color:rgba(229,168,126,.6); color:var(--cream); }

.signMenu{
  position:absolute; z-index:30;
  top:calc(100% + 8px); left:0; right:0;
  margin:0; padding:6px;
  list-style:none;
  max-height:min(320px, 52vh); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  animation: menuIn .16s ease both;
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }

.signMenu button{
  width:100%; min-height:38px; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:none; border:0; border-radius:9px;
  font:inherit; font-size:.82rem; font-weight:300; letter-spacing:.05em;
  color:var(--cream-dim); text-align:left; cursor:pointer;
  white-space:nowrap;
  transition: background .15s ease, color .15s ease;
}
.signMenu button:hover{ background:var(--ink-3); color:var(--cream); }
.signMenu button[aria-selected="true"]{ color:var(--peach); }
.signMenu button .tick{ width:14px; height:14px; flex:none; opacity:0;
  fill:none; stroke:var(--peach); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.signMenu button[aria-selected="true"] .tick{ opacity:1; }
.signMenu .divide{ height:1px; background:var(--line-soft); margin:5px 8px; }


.cell.dim{ opacity:.18; }
.cell.dim:hover{ opacity:.45; }
.cell.hit{ border-color:rgba(229,168,126,.5); }

.dows{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px;
  margin-bottom:6px;
}
.dows span{
  text-align:center; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-bottom:4px;
}

.grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }

.cell{
  position:relative;
  min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  min-height:88px; padding:7px 3px 8px;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:11px;
  color:inherit; font:inherit;
  cursor:pointer; text-align:center;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cell:hover{ background:var(--ink-3); border-color:var(--line); }
.cell:active{ transform:scale(.97); }
.cell.blank{ background:transparent; border-color:transparent; cursor:default; pointer-events:none; }
.cell.today{ border-color:var(--terracotta); }
.cell.today .num{ color:var(--peach); }
.cell.sel{ background:var(--ink-3); box-shadow: inset 0 0 0 1px var(--peach); }

.cell .num{
  font-size:.7rem; font-variant-numeric: tabular-nums; color:var(--cream-dim);
  line-height:1;
}
.cell .mini{ width:26px; height:26px; margin:2px 0 1px; }
@media (min-width:700px){
  .cell{ min-height:104px; }
  .cell .mini{ width:34px; height:34px; margin:4px 0 3px; }
  .cell .num{ font-size:.76rem; }
}
.cell .sg{ font-size:.86rem; line-height:1; }
.cell .sn{
  font-size:.5rem; letter-spacing:.07em; text-transform:uppercase; color:var(--muted);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cell .ing{
  display:inline-flex; align-items:baseline; gap:4px;
  font-size:.62rem; letter-spacing:0; color:var(--peach);
  font-variant-numeric: tabular-nums; white-space:nowrap;
  max-width:100%; margin-top:1px;
}
.cell .ing .sg{ font-size:.74rem; }
.cell .tag{
  font-size:.46rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); background:var(--peach);
  border-radius:99px; padding:1.5px 5px; margin-top:2px;
  white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.cell .tag.ecl{ background:var(--rust); color:var(--cream); }
.cell .short{ display:none; }
@media (max-width:600px){
  .cell .long{ display:none; }
  .cell .short{ display:inline; }
}

.legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px;
  margin:18px 0 14px;
  font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot.new{ background:#2E3A3A; box-shadow:inset 0 0 0 1px var(--line); }
.dot.full{ background:var(--cream); }
.dot.qtr{ background:linear-gradient(90deg, var(--cream) 50%, #2E3A3A 50%); }
.dot.ecl{ background:var(--rust); }
.dot.ing{ background:var(--peach); }

/* =========================================================
   PLACE PICKER
   ========================================================= */
.sheetWrap{ position:fixed; inset:0; z-index:40; display:grid; place-items:end center; }
.sheetBack{ position:absolute; inset:0; background:rgba(2,14,15,.72); backdrop-filter: blur(3px); }
.sheet{
  position:relative;
  width:100%; max-width:440px;
  max-height:86dvh;
  display:flex; flex-direction:column;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:20px 20px 0 0;
  padding:20px var(--pad) max(20px, env(safe-area-inset-bottom));
  animation: slideUp .3s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes slideUp{ from{ transform:translateY(16px); opacity:0;} to{ transform:none; opacity:1;} }
@media (min-width:560px){
  .sheetWrap{ place-items:center; }
  .sheet{ border-radius:20px; max-height:80dvh; }
}
.sheetHead{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sheetHead h2{ margin:0; font-size:1.05rem; font-weight:300; letter-spacing:.04em; }
.sheetNote{ margin:8px 0 14px; font-size:.76rem; line-height:1.55; color:var(--cream-dim); font-weight:200; }

#tzSearch{
  width:100%; min-height:44px; padding:0 14px;
  background:var(--ink); color:var(--cream);
  border:1px solid var(--line); border-radius:11px;
  font:inherit; font-size:.88rem;
}
#tzSearch::placeholder{ color:var(--muted); }
.auto{ margin:10px 0 4px; color:var(--peach); }

.tzList{
  list-style:none; margin:8px 0 0; padding:0;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  flex:1; min-height:120px;
}
.tzList li{ border-bottom:1px solid var(--line-soft); }
.tzList button{
  width:100%; text-align:left;
  background:none; border:0; padding:11px 4px;
  font:inherit; font-size:.86rem; font-weight:300; color:var(--cream);
  cursor:pointer; display:flex; justify-content:space-between; gap:12px;
}
.tzList button:hover{ color:var(--peach); }
.tzList .off{ color:var(--muted); font-size:.7rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tzList .cur{ color:var(--peach); }

/* =========================================================
   MISC
   ========================================================= */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  z-index:60;
  margin:0; padding:10px 18px;
  background:var(--cream); color:var(--ink);
  border-radius:99px; font-size:.76rem; letter-spacing:.04em;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  animation: rise .25s ease both;
}

.foot{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:26px 16px 30px;
  border-top:1px solid var(--line-soft);
  margin:8px clamp(16px,6vw,40px) 0;
}
.brand{
  display:inline-flex; align-items:center; gap:11px;
  text-decoration:none; color:var(--cream);
  padding:6px 4px; border-radius:10px;
  opacity:.86;
  transition: opacity .25s ease, transform .25s ease;
}
.brand:hover{ opacity:1; transform:translateY(-1px); }
.brand img{ width:auto; height:30px; display:block; }
.brandName{
  display:flex; flex-direction:column; align-items:flex-start;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; line-height:1.35;
  font-weight:300;
}
.brandName em{ font-style:normal; color:var(--muted); letter-spacing:.2em; font-size:.9em; }
.backTo{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:2px; padding-bottom:4px;
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--peach); text-decoration:none;
  border-bottom:1px solid rgba(229,168,126,.28);
  transition: border-color .22s ease, gap .22s ease;
}
.backTo svg{
  width:14px; height:14px;
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.backTo:hover{ border-bottom-color:var(--peach); gap:11px; }
.brand:hover + .backTo{ border-bottom-color:var(--peach); }

@media (max-width:420px){
  .cell{ min-height:78px; padding:6px 2px 7px; }
  .cell .mini{ width:22px; height:22px; }
  .dateBtn{ min-width:0; flex:1; }
  .grid, .dows{ gap:4px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}