/* UPSA Object Registry.
   Family rules from upsa.org.ua: IBM Plex, navy + flag yellow, everything square.
   The instrument itself is light — this is a reference desk, not a viewport.
   Own motif: the measuring rule.  Ticked rules mark every section, because the
   whole register is a stack of measurements with error bars. */

:root{
  --paper:    #F5F6F8;
  --paper-2:  #FFFFFF;
  --paper-3:  #ECEFF4;
  --navy:     #0B2050;
  --navy-2:   #14306B;
  --ink:      #101726;
  --ink-70:   rgba(16,23,38,.70);
  --ink-48:   rgba(16,23,38,.48);
  --rule:     rgba(11,32,80,.16);
  --rule-2:   rgba(11,32,80,.28);
  --flag-b:   #2C63B8;
  --flag-y:   #FFD400;
  --warn:     #A8531B;

  --pad: clamp(1rem, 3.2vw, 2.6rem);
  --f-sans: "IBM Plex Sans", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --top-h: 3.6rem;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--paper); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 0.975rem/1.55 var(--f-sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--navy); text-decoration:none; border-bottom:1px solid var(--rule-2); }
a:hover{ color:var(--flag-b); border-bottom-color:currentColor; }
:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
table{ border-collapse:collapse; width:100%; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.num{ font-variant-numeric:tabular-nums; font-family:var(--f-mono); }

.wrap{ max-width:78rem; margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:56rem; }

/* ---------- the measuring rule: our signature divider ---------- */
.rule{
  height:9px; border-top:1px solid var(--navy);
  background:
    repeating-linear-gradient(90deg, var(--navy) 0 1px, transparent 1px 100%) 0 0/10px 4px no-repeat,
    repeating-linear-gradient(90deg, var(--navy) 0 1px, transparent 1px 100%) 0 0/50px 8px no-repeat;
  background-repeat:repeat-x;
  opacity:.55;
}
.rule--y{ border-top-color:var(--flag-y); opacity:1; }

/* ---------- header ---------- */
.top{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:1rem;
  min-height:var(--top-h); padding:.4rem var(--pad);
  background:rgba(245,246,248,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.brand{ display:flex; align-items:center; gap:.7rem; border:0; color:var(--ink); }
.brand__mark{
  width:1.85rem; height:1.85rem; flex:none; background:var(--navy);
  display:grid; place-items:center; padding:.2rem;
}
.brand__mark img{ width:100%; }
.brand__t{ display:flex; flex-direction:column; line-height:1.1; }
.brand__t b{ font:600 .84rem/1.1 var(--f-sans); letter-spacing:.15em; }
.brand__t i{ font-style:normal; font:400 .66rem/1.3 var(--f-mono); color:var(--ink-48);
  letter-spacing:.06em; text-transform:uppercase; }
.nav{ display:flex; gap:1.1rem; margin-left:auto; flex-wrap:wrap; }
.nav a{
  border:0; color:var(--ink-70);
  font:500 .7rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  padding:.45rem 0; border-bottom:1px solid transparent;
}
.nav a:hover, .nav a[aria-current]{ color:var(--navy); border-bottom-color:var(--flag-y); }

/* ---------- search ---------- */
.finder{ position:relative; }
.finder form{ display:flex; border:1px solid var(--navy); background:var(--paper-2); }
.finder input{
  flex:1; min-width:0; border:0; background:transparent; padding:.85rem 1rem;
  font:400 1.05rem/1.3 var(--f-mono); color:var(--ink);
}
.finder input::placeholder{ color:var(--ink-48); }
.finder input:focus{ outline:0; }
.finder button{
  border:0; border-left:1px solid var(--navy); background:var(--navy); color:#fff;
  font:500 .74rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  padding:0 1.4rem; cursor:pointer;
}
.finder button:hover{ background:var(--navy-2); }
.finder--big input{ font-size:1.25rem; padding:1.15rem 1.15rem; }
.hint{ margin-top:.5rem; font:400 .76rem/1.5 var(--f-mono); color:var(--ink-48); }
.hint b{ font-weight:500; color:var(--ink-70); }
.suggest{
  position:absolute; z-index:12; left:0; right:0; top:100%;
  background:var(--paper-2); border:1px solid var(--navy); border-top:0;
}
.suggest a{
  display:flex; gap:.7rem; align-items:baseline; padding:.5rem .9rem; border:0;
  border-bottom:1px solid var(--rule); font-size:.9rem;
}
.suggest a:last-child{ border-bottom:0; }
.suggest a:hover, .suggest a.on{ background:var(--paper-3); }
.suggest em{ font-style:normal; margin-left:auto; font:400 .7rem/1 var(--f-mono); color:var(--ink-48); }

/* ---------- hero ---------- */
.hero{ padding:clamp(2rem,5vw,3.6rem) 0 1.4rem; }
.hero h1{
  font:600 clamp(1.9rem,4.6vw,3.1rem)/1.06 var(--f-sans); letter-spacing:-.02em;
  max-width:22ch;
}
.hero p{ margin-top:.9rem; max-width:60ch; color:var(--ink-70); font-size:1.02rem; }
.hero .finder{ margin-top:1.6rem; }

/* ---------- holdings strip ---------- */
.holdings{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));
  border:1px solid var(--rule); border-bottom:0; background:var(--paper-2);
}
.holdings div{ padding:.85rem 1rem; border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule); }
.holdings div:last-child{ border-right:0; }
.holdings b{ display:block; font:500 1.5rem/1.1 var(--f-mono); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; }
.holdings span{ display:block; margin-top:.2rem; font:400 .68rem/1.3 var(--f-mono);
  text-transform:uppercase; letter-spacing:.1em; color:var(--ink-48); }

/* ---------- sections ---------- */
section{ padding:2.2rem 0 .4rem; }
.sec-h{ display:flex; align-items:baseline; gap:1rem; margin-bottom:.9rem; }
.sec-h h2{ font:500 .78rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--navy); }
.sec-h span{ font:400 .76rem/1 var(--f-mono); color:var(--ink-48); margin-left:auto; }

/* ---------- sky density map ----------
   The one dark surface on the site: a sky map should read as sky.  Same rule as
   the almanac's simulator and the radar's globe — light instrument, dark viewport. */
.skymap{
  margin:0; border:1px solid var(--navy); background:#050A16; padding:0;
  min-height:6rem;
}
.skymap svg{ width:100%; height:auto; display:block; }
.skymap .cells polygon{
  fill:#BBD0F2; stroke:none; shape-rendering:crispEdges; transition:fill .12s;
}
.skymap .cells a:hover polygon{ fill:var(--flag-y); fill-opacity:1; }
.skymap .cells a:focus-visible polygon{ fill:var(--flag-y); fill-opacity:1; }
.skymap .grat{ fill:none; stroke:rgba(232,238,250,.16); stroke-width:.6; }
.skymap .edge{ fill:none; stroke:rgba(232,238,250,.38); stroke-width:1; }
.skymap .plane{ fill:none; stroke:rgba(255,212,0,.42); stroke-width:1.3; }
.skymap .ax{
  fill:rgba(232,238,250,.55); font:500 9px var(--f-mono); letter-spacing:.06em;
}
.skymap .mark path{ stroke:var(--flag-y); stroke-width:1; fill:none; }
.skymap .mark text{
  fill:rgba(232,238,250,.82); font:500 9px var(--f-mono); letter-spacing:.04em;
}
.skymap--live{ position:relative; overflow:hidden; }
.skymap--live canvas{ display:block; width:100%; touch-action:none; }
.skyhud{
  position:absolute; inset:auto 0 2.1rem 0; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  padding:.55rem .7rem; font:400 .7rem/1.5 var(--f-mono);
  color:rgba(232,238,250,.62);
}
.skyhud__pos b{ font-weight:500; color:rgba(232,238,250,.9); margin-right:.5rem; }
.skyhud__pos em{ font-style:normal; color:rgba(232,238,250,.45); }
.skyhud__obj{
  display:block; margin-top:.15rem; color:var(--flag-y); font-weight:500;
  letter-spacing:.04em;
}
.skykeys{ display:flex; gap:.3rem; pointer-events:auto; }
.skykeys button{
  width:1.7rem; height:1.7rem; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(232,238,250,.28); background:rgba(5,10,22,.7);
  color:rgba(232,238,250,.8); font:500 .85rem/1 var(--f-mono);
}
.skykeys button:hover{ border-color:var(--flag-y); color:var(--flag-y); }

.skymodes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:-1px;
  justify-content:space-between; }
.skymodes__group{ display:flex; flex-wrap:wrap; gap:0; }
.skymodes__group--right button{ border-left:0; }
.skymodes__group--right button:first-child{ border-left:1px solid var(--rule-2); }
.skymodes button{
  border:1px solid var(--rule-2); border-right:0; background:var(--paper-2);
  color:var(--ink-70); padding:.4rem .8rem; cursor:pointer;
  font:500 .68rem/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
}
.skymodes button:last-child{ border-right:1px solid var(--rule-2); }
.skymodes button:hover{ color:var(--navy); border-color:var(--navy); }
.skymodes button[aria-pressed="true"]{
  background:var(--navy); border-color:var(--navy); color:#fff;
}
.skymap[aria-busy="true"]{ opacity:.55; }

.legend{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  padding:.5rem .7rem; border-top:1px solid rgba(232,238,250,.16);
  font:400 .68rem/1 var(--f-mono); color:rgba(232,238,250,.6);
}
.legend i{ width:1.6rem; height:.62rem; background:#BBD0F2; display:block; }
.legend b{
  margin-left:auto; font-weight:500; color:var(--flag-y); letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- class grid ---------- */
.classes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.classes a{
  border:0; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:.9rem 1rem; background:var(--paper-2); display:block;
}
.classes a:hover{ background:var(--flag-y); }
.classes b{ display:block; font:500 .95rem/1.2 var(--f-sans); }
.classes span{ font:400 .8rem/1.4 var(--f-mono); color:var(--ink-48); }

/* ---------- data tables ---------- */
.tbl{ font-size:.9rem; background:var(--paper-2); border:1px solid var(--rule); }
.tbl th{
  text-align:left; padding:.5rem .7rem; border-bottom:1px solid var(--navy);
  font:500 .66rem/1.2 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); white-space:nowrap;
}
.tbl td{ padding:.42rem .7rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover{ background:var(--paper-3); }
.tbl .r{ text-align:right; }
.scroll{ overflow-x:auto; }

/* ---------- chips ---------- */
.tag{
  display:inline-block; padding:.1rem .38rem; border:1px solid var(--rule-2);
  font:500 .62rem/1.5 var(--f-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-70); background:var(--paper); white-space:nowrap;
}
.tag--simbad{ border-color:#2C63B8; color:#1F4C93; }
.tag--gaia-dr3{ border-color:#5B3FA8; color:#4A3190; }
.tag--nasa-exo{ border-color:#B0451F; color:#8F3717; }
.tag--jpl-sbdb{ border-color:#1F7A5A; color:#186047; }
.tag--horizons{ border-color:#1F7A5A; color:#186047; }
.tag--ned{ border-color:#8A6D1F; color:#6F5716; }
.tag--vizier{ border-color:#2C63B8; color:#1F4C93; }
.tag--class{ border-color:var(--navy); color:var(--navy); }

/* ---------- object card ---------- */
.card-head{
  border:1px solid var(--navy); background:var(--paper-2); margin-top:1.4rem;
  display:grid; grid-template-columns:auto 1fr;
}
.card-tab{
  background:var(--navy); color:#fff; padding:1rem .6rem;
  font:500 .66rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  writing-mode:vertical-rl; text-orientation:mixed; display:grid; place-items:center;
}
.card-body{ padding:1.1rem 1.3rem 1.2rem; min-width:0; }
.card-body h1{ font:600 clamp(1.5rem,3.4vw,2.3rem)/1.1 var(--f-sans); letter-spacing:-.02em;
  word-break:break-word; }
.card-meta{ margin-top:.5rem; display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center; }
.card-note{ margin-top:.7rem; color:var(--ink-70); font-size:.92rem; max-width:70ch; }

.facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  border-top:1px solid var(--rule); margin-top:1rem; }
.facts div{ padding:.6rem .1rem; border-bottom:1px solid var(--rule); border-right:1px solid var(--rule); }
.facts div:last-child{ border-right:0; }
.facts dt{ font:400 .66rem/1.3 var(--f-mono); text-transform:uppercase; letter-spacing:.09em;
  color:var(--ink-48); padding-left:.7rem; }
.facts dd{ margin:.15rem 0 0; padding-left:.7rem; font:500 1.02rem/1.3 var(--f-mono);
  font-variant-numeric:tabular-nums; }

/* ---------- measurement groups ---------- */
.mgroup{ margin-bottom:1.4rem; }
.mgroup > h3{
  font:500 .92rem/1.3 var(--f-sans); display:flex; align-items:baseline; gap:.6rem;
  padding-bottom:.35rem;
}
.mgroup > h3 em{ font-style:normal; font:400 .7rem/1 var(--f-mono); color:var(--ink-48); }
.err{ color:var(--ink-48); font-size:.86em; }
.more{ margin-top:.4rem; }
.more > summary{
  cursor:pointer; display:inline-block; padding:.3rem .7rem;
  border:1px solid var(--rule-2); background:var(--paper-2);
  font:500 .7rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-70);
}
.more > summary:hover{ border-color:var(--navy); color:var(--navy); }
.more[open] > summary{ margin-bottom:.5rem; }

/* ---------- boxes ---------- */
.note{
  border:1px solid var(--rule-2); border-left:3px solid var(--flag-y);
  background:var(--paper-2); padding:.75rem .95rem; font-size:.9rem; color:var(--ink-70);
}
.note b{ color:var(--ink); }
.grid2{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
.steps{ counter-reset:s; display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border-left:1px solid var(--rule); border-top:1px solid var(--rule); }
.steps li{ list-style:none; counter-increment:s; padding:1rem 1.1rem; background:var(--paper-2);
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.steps li::before{ content:counter(s,decimal-leading-zero); display:block;
  font:500 .7rem/1 var(--f-mono); color:var(--flag-b); letter-spacing:.1em; margin-bottom:.45rem; }
.steps b{ display:block; font:600 .98rem/1.3 var(--f-sans); margin-bottom:.25rem; }
.steps p{ font-size:.88rem; color:var(--ink-70); }

/* ---------- footer ---------- */
.foot{ margin-top:3rem; border-top:1px solid var(--navy); background:var(--paper-2); }
.foot .wrap{ display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  padding-block:1.6rem 2rem; }
.foot h4{ font:500 .68rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-48); margin-bottom:.6rem; }
.foot p, .foot li{ font-size:.85rem; color:var(--ink-70); }
.foot ul{ margin:0; padding:0; list-style:none; display:grid; gap:.3rem; }
.foot .sponge{ display:inline-flex; align-items:center; gap:.45rem; border:0; }
.foot .sponge img{ height:.95rem; width:auto; opacity:.75; }

.pager{ display:flex; gap:.4rem; align-items:center; margin:1rem 0 0; flex-wrap:wrap;
  font:400 .8rem/1 var(--f-mono); }
.pager a, .pager span{ border:1px solid var(--rule-2); padding:.35rem .6rem; }
.pager span{ background:var(--navy); color:#fff; border-color:var(--navy); }

@media (max-width:640px){
  .card-head{ grid-template-columns:1fr; }
  .card-tab{ writing-mode:horizontal-tb; padding:.45rem .8rem; }
  .nav{ gap:.75rem; }
  .nav a{ font-size:.64rem; }
}