/* UPSA — catalogue of Ukraine's private space sector.
   Same rules as the rest of the site: dark only, one yellow accent, everything
   square, IBM Plex.  The catalogue is a register, so it is set as a register:
   numbered rows, a rule between every line, monospace for anything countable. */

/* ---------- counters under the page title ---------- */
.cstats{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:0 1.6rem; align-items:baseline;
  font:400 .78rem/1.6 var(--f-mono); color:var(--pale-42);
  letter-spacing:.06em; text-transform:uppercase;
}
.cstats li{ display:flex; align-items:baseline; gap:.4rem; }
.cstats b{ font:500 1.35rem/1 var(--f-mono); color:var(--pale); letter-spacing:-.02em; }
.cstats__d{ color:var(--pale-42); }

/* ---------- the criterion box ---------- */
.cnote{
  border:1px solid var(--rule); border-left:2px solid var(--flag-y);
  background:var(--space-2); padding:1rem 1.2rem; max-width:64rem;
  margin-bottom:clamp(2rem, 5vh, 3rem);
}
.cnote__h{
  font:500 .68rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--flag-y); margin:0 0 .6rem;
}
.cnote p{ margin:0; color:var(--pale-70); font-size:.96rem; max-width:70ch; }

.csec{
  font:500 .72rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--pale-42); margin:clamp(2.2rem,5vh,3.2rem) 0 1rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--rule);
}

/* ---------- rubric tiles ---------- */
.rubs{
  display:grid; gap:0; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.rub{
  display:flex; align-items:baseline; gap:.7rem; text-decoration:none; color:var(--pale);
  padding:.95rem 1.1rem; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  transition:background .25s var(--ease);
}
.rub:hover{ background:var(--navy); }
.rub__code{
  font:500 .72rem/1 var(--f-mono); color:var(--flag-y); letter-spacing:.1em; flex:none;
}
.rub__code--big{
  display:inline-block; font-size:1rem; border:1px solid var(--flag-y);
  padding:.35rem .5rem; margin-bottom:.9rem;
}
.rub__t{ font:500 .98rem/1.3 var(--f-sans); flex:1; }
.rub__n{ font:400 .8rem/1 var(--f-mono); color:var(--pale-42); flex:none; }

/* ---------- grouped card lists ---------- */
.cgroup{ margin-bottom:clamp(1.8rem,4vh,2.6rem); }
.cgroup__h{
  display:flex; align-items:baseline; gap:.7rem;
  font:500 .92rem/1.3 var(--f-sans); margin:0 0 .2rem; padding-bottom:.5rem;
}
.cgroup__code{ font:500 .72rem/1 var(--f-mono); color:var(--flag-y); letter-spacing:.1em; }
.cgroup__all{
  margin-left:auto; font:400 .78rem/1 var(--f-mono); color:var(--pale-42);
  text-decoration:none; border-bottom:1px solid var(--rule);
}
.cgroup__all:hover{ color:var(--flag-y); border-color:var(--flag-y); }

.clist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.crow{
  display:flex; align-items:center; gap:1rem; text-decoration:none; color:var(--pale);
  padding:.8rem .2rem; border-bottom:1px solid var(--rule);
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
.crow:hover{ background:var(--space-2); padding-left:.7rem; }
.crow__id{
  font:400 .74rem/1 var(--f-mono); color:var(--pale-42); flex:none; width:1.8rem;
}
.crow__b{ display:flex; flex-direction:column; gap:.2rem; min-width:0; flex:1; }
.crow__b b{ font:500 1.02rem/1.3 var(--f-sans); }
.crow:hover .crow__b b{ color:var(--flag-y); }
.crow__org{ font:400 .84rem/1.4 var(--f-sans); color:var(--pale-42); }
.clist--wide .crow{ padding-block:1rem; }

/* ---------- tags ---------- */
.tag--cur{ color:var(--pale); border-color:rgba(255,212,0,.5); }
.tag--hist{ color:var(--pale-42); }
.tag--rub{ text-transform:none; letter-spacing:.02em; }
.ctags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }

/* ---------- one card ---------- */
.wrap--card{ max-width:58rem; }
.crumb{
  font:500 .68rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:1.1rem;
}
.crumb a{ color:var(--pale-42); text-decoration:none; border-bottom:1px solid var(--rule); }
.crumb a:hover{ color:var(--flag-y); border-color:var(--flag-y); }

.cdesc{ font-size:1.06rem; line-height:1.65; color:var(--pale); max-width:62ch; }
.cbody{ margin-bottom:clamp(1.6rem,4vh,2.4rem); }

.ctable{ width:100%; border-collapse:collapse; border-top:1px solid var(--rule); }
.ctable th{
  text-align:left; vertical-align:top; width:14rem; padding:.85rem 1rem .85rem 0;
  border-bottom:1px solid var(--rule);
  font:500 .68rem/1.5 var(--f-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--pale-42);
}
.ctable td{
  vertical-align:top; padding:.85rem 0; border-bottom:1px solid var(--rule);
  color:var(--pale-70); font-size:.98rem;
}
.ctable a{ color:var(--pale); text-decoration:none; border-bottom:1px solid var(--rule); }
.ctable a:hover{ color:var(--flag-y); border-color:var(--flag-y); }
.csrc a{ display:block; margin-bottom:.3rem; font:400 .86rem/1.5 var(--f-mono); }

.cstatus, .cchecked{
  margin-top:1.2rem; font:400 .84rem/1.6 var(--f-mono); color:var(--pale-42);
  max-width:70ch;
}
.cchecked{ margin-top:.4rem; }

.cnav{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:clamp(2.4rem,6vh,3.6rem); padding-top:1.1rem; border-top:1px solid var(--rule);
  font:400 .88rem/1.4 var(--f-sans);
}
.cnav a{ color:var(--pale-70); text-decoration:none; max-width:22rem; }
.cnav a:hover{ color:var(--flag-y); }
.cnav__n{ margin-left:auto; text-align:right; }

.crubnav{
  display:flex; flex-wrap:wrap; gap:.5rem 1.2rem;
  margin-top:clamp(2.4rem,6vh,3.6rem); padding-top:1.1rem; border-top:1px solid var(--rule);
  font:400 .86rem/1.5 var(--f-sans);
}
.crubnav a{ color:var(--pale-42); text-decoration:none; }
.crubnav a:hover{ color:var(--flag-y); }

.cfoot{
  margin-top:clamp(2.6rem,6vh,4rem); padding-top:1.2rem; border-top:1px solid var(--rule);
  color:var(--pale-42); font-size:.9rem; max-width:70ch;
}

@media (max-width:640px){
  .ctable th{ width:auto; display:block; padding-bottom:.2rem; border-bottom:0; }
  .ctable td{ display:block; padding-top:0; }
  .crow{ align-items:flex-start; }
}

/* ---------- the rubric strip works as the filter ---------- */
.rub--all .rub__code{ color:var(--pale-42); }
.rub.is-on{
  background:var(--navy); border-bottom-color:var(--flag-y);
}
.rub.is-on .rub__t{ color:var(--pale); }
.rub.is-on .rub__code{ color:var(--flag-y); }
.rub.is-on .rub__n{ color:var(--pale-70); }
.rubs{ margin-bottom:clamp(1.6rem,4vh,2.4rem); }

.cgroup__link{
  display:flex; align-items:baseline; gap:.7rem; text-decoration:none; color:var(--pale);
}
.cgroup__link:hover{ color:var(--flag-y); }
.cgroup__link:hover .cgroup__code{ color:var(--pale); }
.cgroup__all{ margin-left:auto; font:400 .78rem/1 var(--f-mono); color:var(--pale-42); }

/* ---------- country labels ---------- */
.cgeo{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:baseline; }
.tag--geo{ text-transform:none; letter-spacing:.02em; }
.cgeo__note{ color:var(--pale-42); font-size:.86rem; }
.cgeo__txt{ color:var(--pale-70); }
.rubs--geo{ grid-template-columns:repeat(auto-fill, minmax(12rem, 1fr)); }
.rubs--geo .rub__code{ color:var(--pale-42); }

/* ---------- the projects page ---------- */
/* No pictures: a service is its address, the two numbers it stands on and one
   sentence. The whole row is the link. */
.pjx{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.pjx__i{
  position:relative; display:grid; align-items:start;
  grid-template-columns:3rem minmax(0,1fr) minmax(12rem,17rem);
  gap:clamp(1rem,3vw,2.4rem);
  margin-inline:calc(var(--pad) * -.4); padding-inline:calc(var(--pad) * .4);
  padding-block:clamp(1.7rem,4.5vh,3rem);
  border-bottom:1px solid var(--rule); color:inherit; text-decoration:none;
  transition:background-color .3s var(--ease);
}
.pjx__i::before{
  content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:2px;
  background:var(--flag-y); transform:scaleY(0); transform-origin:50% 0;
  transition:transform .4s var(--ease);
}
.pjx__i:hover{ background:rgba(232,238,250,.035); }
.pjx__i:hover::before,.pjx__i:focus-visible::before{ transform:scaleY(1); }

.pjx__no{
  font:400 .72rem/1.9 var(--f-mono); color:var(--pale-42);
  letter-spacing:.14em; font-variant-numeric:tabular-nums;
}
.pjx__b{ min-width:0; }
.pjx__meta{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font:400 .7rem/1.5 var(--f-mono); color:var(--pale-42); letter-spacing:.02em;
}
.pjx__state{ display:flex; align-items:center; gap:.36rem; color:var(--pale-70); }
.pjx__state::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--flag-y);
  box-shadow:0 0 0 0 rgba(255,212,0,.5); animation:pjxpulse 2.8s var(--ease) infinite;
}
@keyframes pjxpulse{ 70%,100%{ box-shadow:0 0 0 .42rem rgba(255,212,0,0); } }
.pjx__state--wip{ color:var(--pale-42); }
.pjx__state--wip::before{ background:rgba(232,238,250,.34); box-shadow:none; animation:none; }

.pjx__t{
  font:600 clamp(1.5rem,3.2vw,2.4rem)/1.1 var(--f-sans); letter-spacing:-.02em;
  margin:.55rem 0 0; transition:color .3s var(--ease);
}
.pjx__i:hover .pjx__t{ color:var(--flag-y); }
.pjx__d{ display:block; margin:.9rem 0 0; color:var(--pale-70); max-width:56ch; font-size:1.02rem; }

.pjx__side{
  display:grid; gap:1rem; padding-left:clamp(1rem,2vw,1.6rem);
  border-left:1px solid var(--rule);
}
.pjx__st b{
  display:block; font:400 1.2rem/1.2 var(--f-mono); color:var(--pale);
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.pjx__st span{
  display:block; margin-top:.3rem; font:400 .66rem/1.35 var(--f-mono);
  color:var(--pale-42); letter-spacing:.1em; text-transform:uppercase;
}
.pjx__go{
  font:500 .72rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--pale); border-bottom:1px solid var(--flag-y); padding-bottom:.35rem;
  justify-self:start; margin-top:.2rem;
}

@media (max-width:900px){
  .pjx__i{ grid-template-columns:2.4rem minmax(0,1fr); }
  .pjx__side{
    grid-column:1 / -1; grid-auto-flow:column; justify-content:start; gap:2rem;
    border-left:0; padding-left:0; margin-top:1.2rem;
  }
}
@media (max-width:560px){
  .pjx__i{ grid-template-columns:1fr; gap:.2rem; }
  .pjx__no{ line-height:1.2; }
  .pjx__side{ grid-auto-flow:row; gap:1rem; }
}
@media (prefers-reduced-motion:reduce){
  .pjx__i,.pjx__i::before,.pjx__t{ transition:none; }
  .pjx__state::before{ animation:none; }
}