/* MiracleReps astrology styles. Everything is scoped to .ax-* classes so the rest of the app is untouched.
   Celestial palette: midnight blue to violet, with a soft gold accent. */
:root{
  --ax-night:#151A3D; --ax-violet:#4B3A8F; --ax-plum:#7A3C82; --ax-gold:#D9A93A; --ax-gold-soft:#F4DFA6; --ax-star:#FFFFFF;
  --ax-calc:#1F7A78; --ax-calc-bg:#DDF2F0; --ax-trad:#6A4BB5; --ax-trad-bg:#ECE6FA;
  --ax-fire:#D9573F; --ax-earth:#4E9163; --ax-air:#C99A1E; --ax-water:#3D7FCF;
  --ax-card-edge:linear-gradient(90deg,#4B3A8F,#B05FB3,#D9A93A);
}
:root[data-theme="dark"]{
  --ax-night:#0B0F26; --ax-violet:#352a6e; --ax-plum:#5B2D63; --ax-gold:#E8C06A; --ax-gold-soft:#5A4A22;
  --ax-calc:#5CC9C3; --ax-calc-bg:#12302F; --ax-trad:#B7A2F0; --ax-trad-bg:#272040;
  --ax-fire:#F07A5F; --ax-earth:#6DBA84; --ax-air:#E6BE4C; --ax-water:#6AA6F0;
}
.tabs button[hidden]{display:none}

/* hero */
.ax-hero{position:relative;overflow:hidden;border-radius:14px;color:#F3F1FF;padding:16px;
  background:radial-gradient(120% 90% at 85% 0%,rgba(217,169,58,.28),transparent 55%),radial-gradient(90% 120% at 0% 100%,rgba(176,95,179,.35),transparent 60%),linear-gradient(135deg,var(--ax-night),var(--ax-violet) 60%,var(--ax-plum));
  box-shadow:0 6px 24px rgba(21,26,61,.25)}
.ax-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.75}
.ax-stars circle{fill:var(--ax-star)}
.ax-stars polyline{fill:none;stroke:rgba(255,255,255,.35);stroke-width:.6;stroke-dasharray:2 2}
.ax-hero-in{position:relative;display:flex;align-items:center;gap:14px}
.ax-sigil{flex:none;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:34px;line-height:1;color:var(--ax-gold-soft);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.22),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 0 22px rgba(217,169,58,.35);font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif}
:root[data-theme="dark"] .ax-sigil{color:#F4DFA6}
.ax-hero-txt{flex:1;min-width:0}
.ax-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.ax-hero h2{margin:2px 0 4px;color:#fff;font:800 30px/1 var(--font-display);letter-spacing:.02em;text-transform:uppercase}
.ax-big3{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:13.5px;font-weight:600;opacity:.95}
.ax-moonbtn{flex:none;border:0;background:rgba(255,255,255,.08);color:inherit;border-radius:12px;padding:6px 8px 5px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;max-width:84px;text-align:center;line-height:1.15}
.ax-moonbtn:hover{background:rgba(255,255,255,.16)}
.ax-moon .dark{fill:#2B2F4A} .ax-moon .lit{fill:#F6EFD2} .ax-moon .rim{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.5}
.ax-sub{margin-top:2px}
.ax-sub button{flex:1 1 auto;padding-left:6px;padding-right:6px;white-space:nowrap}
.ax-sub button[aria-pressed="true"]{background:var(--ax-violet);color:#fff}

/* cards and labels */
.ax-card{position:relative;border-top-color:transparent}
.ax-card::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:12px 12px 0 0;background:var(--ax-card-edge)}
.ax-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ax-row h2,.ax-row h3{margin:0;min-width:0}
.ax-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;white-space:nowrap;vertical-align:middle}
.ax-badge.calc{color:var(--ax-calc);background:var(--ax-calc-bg)}
.ax-badge.trad{color:var(--ax-trad);background:var(--ax-trad-bg)}
.ax-lead{font-size:17px;line-height:1.5;margin:0}
.ax-period{align-self:stretch}
.ax-period button{flex:1}

/* horoscope topic tiles */
.ax-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ax-tiles button{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--fg);min-width:0}
.ax-tiles button[aria-pressed="true"]{border-color:var(--ax-violet);box-shadow:inset 0 0 0 1px var(--ax-violet);background:linear-gradient(180deg,var(--ax-trad-bg),var(--surface))}
.ax-tiles .i{font-size:20px;line-height:1.1;color:var(--ax-trad)}
.ax-tiles .l{font-size:13px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-tiles .st,.ax-stars-s{color:var(--ax-gold);font-size:12px;letter-spacing:1px}
.ax-tiles .st .off{color:var(--line)}
.ax-read p{margin:0;line-height:1.55}
.ax-fav{border:0;background:none;font-size:26px;line-height:1;color:var(--ax-gold);width:40px;height:40px;border-radius:50%}
.ax-fav:hover{background:var(--surface-2)}
.ax-why{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ax-chip{font-size:12.5px;background:var(--surface-2);border-radius:999px;padding:3px 9px}

/* sign picker */
.ax-signs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ax-signs button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;font-size:13px;font-weight:600;color:var(--fg);min-width:0}
.ax-signs button[aria-pressed="true"]{border-color:var(--ax-violet);background:var(--ax-trad-bg)}
.ax-signs .g{font-size:24px;line-height:1.1;color:var(--ax-trad)}
.ax-signs small{font-size:10.5px;color:var(--muted);font-weight:500;white-space:nowrap}

/* lists of dates */
.ax-dates li{align-items:flex-start;justify-content:flex-start;gap:12px}
.ax-dates .d{flex:none;width:96px;font-weight:700;font-size:14px;display:flex;flex-direction:column}
.ax-dates .d small{font-weight:500;color:var(--muted);font-size:12px}
.ax-dates .now{display:inline-block;width:auto;color:var(--ax-calc);font-weight:700;text-transform:uppercase;letter-spacing:.06em}

/* lucky, fitness, journal */
.ax-lucky{display:flex;gap:10px;flex-wrap:wrap}
.ax-sw{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 30%}
.ax-sw i{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.ax-sw b{font-size:14px} .ax-sw small{display:block;font-size:11.5px;color:var(--muted)}
.ax-nums{display:flex;gap:8px;flex-wrap:wrap}
.ax-nums span{min-width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font:800 18px/1 var(--font-display);color:var(--ax-trad);background:var(--ax-trad-bg)}
.ax-quote{margin:0;padding:10px 14px;border-left:3px solid var(--ax-gold);background:var(--surface-2);border-radius:0 10px 10px 0;font-size:16px;font-style:italic}
.ax-theme,.ax-chal{display:flex;flex-direction:column;align-items:flex-start;gap:8px;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.ax-chal.joined{flex-direction:row}
.ax-theme p,.ax-chal p{margin:2px 0 0}
.ax-kick{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ax-chal .bar{margin-top:6px;--c:var(--ax-violet)}
.ax-chal.joined{align-items:flex-start}
.ax-journal{display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.ax-journal textarea,.ax-card textarea{width:100%;resize:vertical;min-height:64px;font:inherit}
.ax-evidence{margin:0;font-size:13px;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.ax-fit .btn{flex:none}

/* wheel */
.ax-wheel-wrap{display:flex;justify-content:center}
.ax-wheel{width:100%;max-width:420px;height:auto;touch-action:manipulation;font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif}
.ax-seg path{stroke:var(--surface);stroke-width:1.2;opacity:.9;cursor:pointer;transition:opacity .15s}
.ax-seg text{font-size:15px;text-anchor:middle;dominant-baseline:central;fill:#fff;pointer-events:none;font-weight:700}
.ax-seg.el-fire path{fill:var(--ax-fire)} .ax-seg.el-earth path{fill:var(--ax-earth)} .ax-seg.el-air path{fill:var(--ax-air)} .ax-seg.el-water path{fill:var(--ax-water)}
.ax-seg:hover path,.ax-seg:focus path{opacity:1}
.ax-seg.on path{opacity:1;stroke:var(--fg);stroke-width:2.5}
.ax-seg:focus{outline:none}
.ax-wheel .tick{stroke:var(--muted);stroke-width:1;opacity:.6}
.ax-wheel .hn{font-size:10px;fill:var(--muted);text-anchor:middle;dominant-baseline:central;font-family:var(--font-body)}
.ax-wheel .axis{stroke:var(--ax-gold);stroke-width:1.4;opacity:.8}
.ax-wheel .axis.mc{stroke-dasharray:4 3}
.ax-wheel .axl{font:700 10px var(--font-body);fill:var(--ax-gold);text-anchor:middle;dominant-baseline:central}
.ax-wheel .pt{stroke:var(--fg);stroke-width:1.4}
.ax-wheel .pt.natal{stroke:var(--ax-trad)}
.ax-pl{cursor:pointer}
.ax-pl circle{fill:var(--surface);stroke:var(--fg);stroke-width:1.2}
.ax-pl.natal circle{stroke:var(--ax-trad);fill:var(--ax-trad-bg)}
.ax-pl text{font-size:13px;text-anchor:middle;dominant-baseline:central;fill:var(--fg)}
.ax-pl.natal text{fill:var(--ax-trad)}
.ax-pl.on circle,.ax-pl:focus circle{stroke:var(--ax-gold);stroke-width:2.6}
.ax-pl:focus{outline:none}
.ax-wheel .hub{fill:var(--surface-2)}
.ax-wheel .hubt{font:700 12px var(--font-body);fill:var(--muted);text-anchor:middle;dominant-baseline:central;letter-spacing:.08em;text-transform:uppercase}
.ax-info{background:var(--surface-2);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ax-info p{margin:0}
.ax-info h3{font-size:16px}
.ax-hint{text-align:center;margin:0}

/* moon and planets */
.ax-moonrow{display:flex;gap:14px;align-items:center}
.ax-moonrow .ax-moon .dark{fill:#30344F}
.ax-trad{display:flex;flex-direction:column;gap:6px;align-items:flex-start;border-top:1px dashed var(--line);padding-top:10px}
.ax-trad p{margin:0}
.ax-planets li{padding:6px 0}
.ax-plrow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;border:0;background:none;padding:2px 0;text-align:left;color:inherit;font:inherit;flex:1;min-width:0}
.ax-plrow .pn small{display:block;font-weight:500;font-size:12.5px;color:var(--muted)}
.ax-plrow .ax-ac{font:700 13px var(--font-body)}
.ax-plrow .pg{font-size:18px;text-align:center;color:var(--ax-trad);font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif}
.ax-plrow .pn{font-weight:700;font-size:14.5px}
.ax-plrow .ps{font-size:14.5px;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.rx{color:var(--protein);font-weight:700}

/* chart */
.ax-big3cards{display:grid;grid-template-columns:1fr;gap:8px}
.ax-b3{background:var(--surface-2);border-radius:10px;padding:10px 12px;display:grid;grid-template-columns:34px auto minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:baseline;min-width:0}
.ax-b3 .g{grid-row:1/3}
.ax-b3 small{grid-column:2/4}
.ax-b3 p{grid-column:1/4}
.ax-b3 .g{font-size:26px;line-height:1.1;color:var(--ax-trad);font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif}
.ax-b3 .k{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ax-b3 b{font-size:16px}
.ax-b3 small{font-size:11.5px;color:var(--muted)}
.ax-b3 p{margin:4px 0 0;font-size:13px}
.ax-b3.na{opacity:.75}
.ax-notes{background:var(--warn-bg);color:var(--warn-fg);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ax-notes p{margin:0}
.ax-ul{margin:4px 0 0;padding-left:18px;font-size:14px}
.ax-el-fire{background:var(--ax-fire)!important} .ax-el-earth{background:var(--ax-earth)!important} .ax-el-air{background:var(--ax-air)!important} .ax-el-water{background:var(--ax-water)!important}

/* match */
.ax-score{display:flex;flex-direction:column;gap:6px;padding:4px 0}
.ax-score .num{font:800 26px/1 var(--font-display);color:var(--ax-trad)}
.ax-score .bar{--c:linear-gradient(90deg,var(--ax-violet),var(--ax-gold))}
.ax-score .bar i{background:linear-gradient(90deg,var(--ax-violet),var(--ax-gold))}
.ax-score p{margin:0}
.ax-syn li{align-items:flex-start}

/* saved and birth sheet */
.ax-clip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ax-geo:empty{display:none}
.ax-geolist li{padding:6px 0}
.ax-picked{margin:0;color:var(--ax-calc);font-weight:600}

@media (max-width:380px){
  .ax-tiles .l{font-size:12px}
  .ax-dates .d{width:84px}
}
/* Seven tabs on a phone: tighten the labels so every word fits. */
@media (max-width:430px){
  .tabs{padding-left:4px;padding-right:4px}
  .tabs button{font-size:9.5px;letter-spacing:0}
}
@media (max-width:359px){
  .tabs button{font-size:8.5px}
  .tabs button svg{width:21px;height:21px}
  .ax-signs{grid-template-columns:repeat(3,minmax(0,1fr))}
}