/* meridian.css — styling for the RA/Dec <-> Alt/Az converter, scoped under
   .meridian so its tokens (note --ink means a dark background here, the opposite
   of the app shell's --ink) never leak to the AstroSat header/footer. The shell
   provides body background, header, footer and the --sans/--mono stacks; this
   sheet only styles the tool itself. Adapted from the standalone "Meridian"
   page: its own <title>/<header>/<footer> and web-font load were dropped. */
.meridian {
  --ink:#0b1020; --panel:#141a2e; --panel-2:#1b2238; --line:#2a3350;
  --star:#e8e4d4; --muted:#8b93b0; --dim:#5b6485;
  --eq:#d8a657;   /* equatorial - brass */
  --hor:#6fb3d6;  /* horizontal - star blue */
  --bad:#e0746a;
  --r:14px;
}
.wrap{position:relative; z-index:1; max-width:1080px; margin:0 auto; padding:30px 22px 56px}
.intro{color:var(--muted); margin:0 0 24px; max-width:62ch; font-size:14.5px; line-height:1.55}

.grid{display:grid; grid-template-columns:1.05fr .95fr; gap:22px; margin-top:8px}
@media (max-width:820px){ .grid{grid-template-columns:1fr} }

.card{background:linear-gradient(180deg,var(--panel) 0%,#11172a 100%);
      border:1px solid var(--line); border-radius:var(--r); padding:22px}
.card h2{font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.16em;
         text-transform:uppercase; color:var(--muted); margin:0 0 16px}

/* segmented direction toggle */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--ink);
     border:1px solid var(--line); border-radius:10px; padding:5px; margin-bottom:22px}
.seg button{appearance:none; border:0; cursor:pointer; padding:11px 8px; border-radius:7px;
            background:transparent; color:var(--muted); font:600 13px var(--sans);
            letter-spacing:.02em; transition:background .18s,color .18s}
.seg button .ar{opacity:.6; margin:0 3px}
.seg button[aria-pressed="true"]{color:var(--ink)}
.seg button[data-dir="eq2hor"][aria-pressed="true"]{background:var(--eq)}
.seg button[data-dir="hor2eq"][aria-pressed="true"]{background:var(--hor)}

.group{margin-bottom:18px}
.group > label{display:block; font-size:12px; letter-spacing:.04em; color:var(--muted); margin-bottom:7px}
.group .tag{font-weight:600}
.eq-accent .tag{color:var(--eq)} .hor-accent .tag{color:var(--hor)}

.row{display:flex; gap:8px; align-items:stretch}
.field{position:relative; flex:1}
.field .u{position:absolute; right:10px; top:50%; transform:translateY(-50%);
          font-size:11px; color:var(--muted); pointer-events:none; font-family:var(--mono)}
.meridian input, .meridian select{
  width:100%; background:var(--ink); color:var(--star); border:1px solid var(--line);
  border-radius:9px; padding:11px 12px; font:500 15px var(--mono);
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.meridian input::placeholder{color:#46506e}
.meridian input:focus, .meridian select:focus{border-color:var(--eq); box-shadow:0 0 0 3px #d8a6571f}
.meridian .hor-accent input:focus{border-color:var(--hor); box-shadow:0 0 0 3px #6fb3d61f}
.sign-sel{max-width:64px; flex:0 0 64px; text-align:center}
.unit-sel{max-width:104px; flex:0 0 104px; font:500 13px var(--sans)}

/* small format sub-toggle inside the equatorial panel */
.fmt{display:inline-flex; gap:4px; background:var(--ink); border:1px solid var(--line);
     border-radius:9px; padding:4px; margin-bottom:18px}
.fmt button{appearance:none; border:0; cursor:pointer; padding:7px 13px; border-radius:6px;
            background:transparent; color:var(--muted); font:600 12px var(--sans);
            letter-spacing:.02em; transition:background .15s,color .15s}
.fmt button[aria-pressed="true"]{background:var(--panel-2); color:var(--eq)}

.inline{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.ghost{appearance:none; cursor:pointer; background:transparent; color:var(--muted);
       border:1px solid var(--line); border-radius:8px; padding:8px 12px;
       font:500 12.5px var(--sans); transition:border-color .15s,color .15s}
.ghost:hover{color:var(--star); border-color:#3a466e}

.convert{width:100%; margin-top:6px; appearance:none; border:0; cursor:pointer;
         border-radius:11px; padding:15px; font:600 15px var(--sans); letter-spacing:.02em;
         color:var(--ink); background:var(--eq); transition:filter .15s, transform .05s}
.convert.hor{background:var(--hor)}
.convert:hover{filter:brightness(1.07)}
.convert:active{transform:translateY(1px)}

/* ---- result side ---- */
.readout{display:grid; gap:14px}
.big{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.stat{background:var(--ink); border:1px solid var(--line); border-radius:11px; padding:14px 15px}
.stat .k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.stat .v{font-family:var(--mono); font-weight:600; font-size:22px; margin-top:6px; letter-spacing:-.01em}
.stat .v small{font-size:13px; color:var(--muted); font-weight:400}
.stat .v2{font-family:var(--mono); font-size:12.5px; color:var(--muted); margin-top:4px}
.stat.eqc .v{color:var(--eq)} .stat.horc .v{color:var(--hor)}

.meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--mono); font-size:12px; color:var(--muted)}
.meta b{color:var(--star); font-weight:600}

.empty{color:var(--muted); font-size:14px; text-align:center; padding:24px 8px}
.err{display:none; background:#2a141b; border:1px solid #5a2b30; color:#f0b7af;
     border-radius:10px; padding:12px 14px; font-size:13.5px; margin-top:4px}
.err.show{display:block}

/* ---- sky dome ---- */
.dome-card{margin-top:22px}
.dome-wrap{display:flex; justify-content:center}
svg.dome{width:100%; max-width:340px; height:auto}
.dome .ring{fill:none; stroke:var(--line)}
.dome .ring.horizon{stroke:#3a466e}
.dome .card-line{stroke:#28314e}
.dome text{fill:var(--muted); font:600 12px var(--sans)}
.dome .alt-lab{fill:#566089; font:500 9px var(--mono)}
.dome .mark{fill:var(--hor); stroke:var(--ink); stroke-width:1.5}
.dome .mark-halo{fill:var(--hor); opacity:.18}
.dome .below{fill:var(--bad); opacity:.85}
.reduced .mark, .reduced .reveal{transition:none !important}
.mark, .mark-halo{transition:cx .5s cubic-bezier(.2,.7,.2,1), cy .5s cubic-bezier(.2,.7,.2,1)}
.reveal{opacity:0; transform:translateY(6px); transition:opacity .35s, transform .35s}
.reveal.in{opacity:1; transform:none}

.cnote{margin-top:30px; color:#4f597e; font-size:12px; line-height:1.6}
.cnote b{color:var(--muted); font-weight:600}