/* ══ SENRA · astrolabe ══════════════════════════════════════ */

.astro-shell{ max-width:1240px; margin:0 auto; }
.astro-head{ margin-bottom:46px; }

.astro-grid{
  display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(26px,4vw,58px); align-items:start;
}

/* ── wheel ─────────────────────────────────────────────────────── */
.wheel-col{ position:sticky; top:calc(var(--topbar-h) + 24px); }
.wheel-holder{
  position:relative; width:100%; max-width:560px; margin:0 auto; aspect-ratio:1;
}
.wheel-holder::before{
  content:''; position:absolute; inset:8%; border-radius:50%;
  background:radial-gradient(circle, rgba(142,125,208,.14), transparent 66%);
  filter:blur(22px);
}
#wheel{ position:relative; width:100%; height:100%; overflow:visible; }

.w-ring{ fill:none; stroke:var(--hair-2); stroke-width:1; vector-effect:non-scaling-stroke; }
.w-ring-soft{ fill:none; stroke:var(--hair); stroke-width:1; vector-effect:non-scaling-stroke; }
.w-tick{ stroke:rgba(226,229,242,.16); stroke-width:.7; vector-effect:non-scaling-stroke; }
.w-tick-5{ stroke:rgba(226,229,242,.3); stroke-width:.8; vector-effect:non-scaling-stroke; }
.w-div{ stroke:var(--hair-v); stroke-width:.9; vector-effect:non-scaling-stroke; }
.w-glyph{
  fill:var(--silver-2); font-family:var(--serif); font-size:17px; text-anchor:middle;
  dominant-baseline:central; opacity:.82;
}
.w-glyph.is-elem-fire{ fill:#d8a898; }
.w-glyph.is-elem-earth{ fill:#a9c0a4; }
.w-glyph.is-elem-air{ fill:#a8bcd8; }
.w-glyph.is-elem-water{ fill:#b2a8d8; }
.w-house-num{
  fill:var(--silver-3); font-family:var(--sans); font-size:8.5px; text-anchor:middle;
  dominant-baseline:central; letter-spacing:.1em;
}
.w-axis-lab{
  fill:var(--glow); font-family:var(--sans); font-size:8.5px; letter-spacing:.24em;
  text-anchor:middle; dominant-baseline:central;
  /* a hairline of ground behind the letters, in case a ring passes beneath */
  paint-order:stroke; stroke:var(--ink); stroke-width:2.6px; stroke-linejoin:round;
}
.w-aspect{ stroke:rgba(142,125,208,.2); stroke-width:.7; fill:none; vector-effect:non-scaling-stroke; }
.w-aspect-2{ stroke:rgba(127,149,200,.16); stroke-width:.7; fill:none; vector-effect:non-scaling-stroke; }

.w-rot-slow{ animation:spin 190s linear infinite; transform-origin:260px 260px; }
.w-rot-rev{ animation:spinRev 320s linear infinite; transform-origin:260px 260px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spinRev{ to{ transform:rotate(-360deg); } }
body[data-motion="calm"] .w-rot-slow,
body[data-motion="calm"] .w-rot-rev{ animation:none; }

.w-pointer{ stroke:var(--glow); stroke-width:1; vector-effect:non-scaling-stroke; opacity:.85; }
.w-pointer-dot{ fill:var(--glow); }
.w-spark{ fill:var(--silver); opacity:.75; animation:twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.16} 50%{opacity:.95} }
.w-core-glow{ animation:breathe 7s ease-in-out infinite; transform-origin:260px 260px; }
@keyframes breathe{ 0%,100%{ opacity:.5; transform:scale(1) } 50%{ opacity:.95; transform:scale(1.045) } }

.wheel-caption{
  text-align:center; margin-top:16px;
  font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-3);
}

/* ── form ──────────────────────────────────────────────────────── */
/* a composed 3×2 grid, so no single mode is ever orphaned on its own row */
.mode-chips{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px; margin-bottom:26px;
}
.mode-chips .chip{ padding:9px 6px; text-align:center; }
@media (max-width:520px){
  .mode-chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

.field-set{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hair); border:1px solid var(--hair);
}
.field{ background:rgba(10,10,18,.5); padding:13px 15px; grid-column:span 2; }
.field-half{ grid-column:span 1; }
.field-b{ grid-column:span 2; }
.field label{
  display:block; font-size:8.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--silver-3); margin-bottom:7px;
}
.field input,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
  color:var(--silver); font-family:var(--serif); font-size:16px; padding:3px 0 6px;
  outline:none; transition:border-color .4s; border-radius:0;
}
.field input::placeholder{ color:var(--silver-4); font-style:italic; }
.field input:focus,.field select:focus{ border-bottom-color:var(--violet); }
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237d859e' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
}
.field select option{ background:#0d0d16; color:var(--silver); font-family:var(--sans); }
.field input[type=date],.field input[type=time]{ font-variant-numeric:tabular-nums; }
.field input[type=date]::-webkit-calendar-picker-indicator,
.field input[type=time]::-webkit-calendar-picker-indicator{
  filter:invert(.72) sepia(.2) saturate(2) hue-rotate(200deg); cursor:pointer; opacity:.6;
}

.field-inline{
  grid-column:span 2; background:rgba(10,10,18,.5); padding:14px 15px;
  display:flex; flex-wrap:wrap; gap:20px;
}
.switch{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.sw-track{
  position:relative; width:30px; height:14px; border:1px solid var(--hair-2); border-radius:8px;
  transition:border-color .4s, background .4s; flex:0 0 auto;
}
.sw-track::after{
  content:''; position:absolute; top:2px; left:2px; width:8px; height:8px; border-radius:50%;
  background:var(--silver-4); transition:transform .4s var(--ease-out), background .4s, box-shadow .4s;
}
.switch input:checked + .sw-track{ border-color:var(--hair-v); background:rgba(142,125,208,.14); }
.switch input:checked + .sw-track::after{
  transform:translateX(16px); background:var(--glow); box-shadow:0 0 10px var(--glow);
}
.switch input:focus-visible + .sw-track{ outline:1px solid var(--violet); outline-offset:2px; }
.sw-label{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--silver-3); }

/* ── computed ──────────────────────────────────────────────────── */
.computed{ margin-top:28px; }
.computed-head{
  margin:0 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--silver-3);
}
.computed-head em{
  font-style:normal; font-size:8.5px; letter-spacing:.18em; color:var(--silver-3); text-transform:none;
}
.computed-grid{
  /* eight cells, so fixed column counts keep every row full */
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--hair); border:1px solid var(--hair);
}
.cg-cell{
  background:rgba(10,10,18,.5); padding:12px 13px;
  display:flex; flex-direction:column; justify-content:space-between; gap:5px;
}
.cg-k{
  font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--silver-3);
  min-height:2.1em;   /* two-line labels keep the values on one baseline */
}
.cg-v{
  font-family:var(--serif); font-size:15px; color:var(--silver-2);
  font-variant-numeric:tabular-nums; line-height:1.3;
}
.cg-v small{ font-size:10px; color:var(--silver-3); font-family:var(--sans); letter-spacing:.06em; }

/* ── prompt ────────────────────────────────────────────────────── */
.prompt-block{ margin-top:30px; border-top:1px solid var(--hair); padding-top:22px; }
.prompt-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.prompt-title{
  margin:0; font-size:9px; letter-spacing:.3em; text-transform:uppercase; color:var(--silver-3);
}
.prompt-tools{ display:flex; gap:7px; }
.prompt-pre{
  margin:0 0 16px; max-height:290px; overflow-y:auto;
  background:rgba(6,6,11,.7); border:1px solid var(--hair);
  padding:16px 17px; color:var(--silver-3);
  font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:11px; line-height:1.72; white-space:pre-wrap; word-break:break-word;
  animation:stepIn .5s var(--ease-out) both;
}
.btn-copy-wide{ width:100%; padding:15px 20px; }
.copy-ic{ display:inline-flex; }
.copy-ic svg .s-thin,.copy-ic svg .s-hair{ stroke:currentColor; }
.prompt-foot{
  margin:11px 0 0; font-size:10px; color:var(--silver-3); line-height:1.7; text-align:center;
}

@media (max-width:1020px){
  .astro-grid{ grid-template-columns:1fr; }
  .wheel-col{ position:static; }
  .wheel-holder{ max-width:440px; }
}
@media (max-width:820px){
  .computed-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  /* keep the ASC / DSC captions inside the glass on a phone */
  .wheel-holder{ width:92%; }
  .field-set{ grid-template-columns:1fr; }
  .field,.field-half,.field-b{ grid-column:span 1; }
  .field-inline{ grid-column:span 1; }
}