/* =========================================================================
   THE CLOUD
   Its own ground: neither paper, because it is about both of them.
   ========================================================================= */
.cloud{
  --ground:#0a0908;
  --fg:#e8e0d5;
  --fg-dim:#8d8478;
  --rule:rgba(232,224,213,.13);
  --up:var(--patina-lift);      /* hope */
  --down:var(--oxide-lift);     /* decay */
  background:var(--ground); color:var(--fg);
  margin:0; min-height:100svh;
  display:grid; grid-template-rows:auto 1fr auto;
  overflow:hidden;
}

/* ── bar ────────────────────────────────────────────────────────────────── */
.cloud #bar{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem clamp(1rem,3vw,2rem);
  border-bottom:1px solid var(--rule);
  font-family:var(--font-meta); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase;
}
.cloud #bar a{ color:var(--fg-dim); text-decoration:none; }
.cloud #bar a:hover{ color:var(--fg); }
.cloud #bar .here{ color:var(--gold); }
.cloud #clear{
  font-family:var(--font-meta); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer;
  color:var(--fg-dim); background:none;
  border:1px solid var(--rule); border-radius:999px; padding:.35rem .8rem;
}
.cloud #clear:hover{ color:var(--fg); border-color:var(--fg-dim); }

/* ── the field ──────────────────────────────────────────────────────────── */
#stage{ position:relative; min-height:0; display:grid; grid-template-columns:1fr; }
#field{
  position:relative; width:100%; height:100%;
  min-height:26rem;
}

/* the horizon: the line between the two records */
#field::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--rule);
}
#stage .horizon-l, #stage .horizon-r{
  position:absolute; top:50%; transform:translateY(-50%);
  font-family:var(--font-meta); font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-dim); pointer-events:none; z-index:1;
}
#stage .horizon-l{ left:clamp(.6rem,2vw,1.4rem); }
#stage .horizon-r{ right:clamp(.6rem,2vw,1.4rem); }

.w{
  position:absolute; transform:translate(-50%,-50%);
  font-family:var(--font-display); font-weight:400; line-height:1;
  letter-spacing:-.01em; white-space:nowrap;
  background:none; border:0; padding:.1em .15em; cursor:pointer;
  color:color-mix(in srgb,
        var(--up) calc((var(--lean) + 1) * 50%),
        var(--down) calc((1 - var(--lean)) * 50%));
  opacity:.82;
  transition:opacity .25s var(--ease), transform .25s var(--ease),
             text-shadow .25s var(--ease);
}
.w:hover, .w:focus-visible{
  opacity:1; outline:none;
  transform:translate(-50%,-50%) scale(1.09);
  text-shadow:0 0 2.4rem currentColor;
}
.w.on{
  opacity:1; color:var(--gold);
  text-shadow:0 0 2.8rem color-mix(in srgb, var(--gold) 55%, transparent);
}
.w.near{ opacity:.9; }
.w.dim{ opacity:.13; }

/* ── the era axis ───────────────────────────────────────────────────────── */
#axis{
  position:relative; height:3.4rem; border-top:1px solid var(--rule);
}
#axis .tick{
  position:absolute; top:.55rem; transform:translateX(-50%);
  text-align:center; white-space:nowrap;
  font-family:var(--font-meta); letter-spacing:.14em; text-transform:uppercase;
}
#axis .tick i{ display:block; font-style:normal; font-size:.48rem; color:var(--fg-dim); }
#axis .tick b{ display:block; font-size:.52rem; font-weight:400; color:var(--fg); margin-top:.25rem; }

/* ── the panel ──────────────────────────────────────────────────────────── */
#panel{
  position:absolute; right:0; top:0; bottom:0; width:min(23rem, 34vw);
  padding:1.4rem clamp(1rem,2vw,1.6rem) 2rem;
  border-left:1px solid var(--rule);
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  overflow-y:auto; z-index:3;
}
#panel .hint{
  font-family:var(--font-meta); font-size:.6rem; line-height:2.05;
  letter-spacing:.05em; color:var(--fg-dim); margin:0 0 1rem;
}
#panel .picked{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
#panel .chip{
  font-family:var(--font-meta); font-size:.56rem; letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer;
  color:var(--gold); background:none;
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius:999px; padding:.3rem .7rem;
}
#panel .chip::after{ content:" ×"; opacity:.6; }
#panel .chip:hover{ background:color-mix(in srgb, var(--gold) 12%, transparent); }
#panel .tally{
  font-family:var(--font-meta); font-size:.55rem; letter-spacing:.1em;
  color:var(--fg-dim); margin:0 0 1.1rem;
}
#panel .res{
  display:grid; grid-template-columns:3.4rem 1fr; gap:.7rem;
  padding:.55rem 0; text-decoration:none; color:inherit;
  border-top:1px solid var(--rule);
}
#panel .res:hover{ background:rgba(232,224,213,.04); }
#panel .res img{
  width:3.4rem; height:2.5rem; object-fit:cover;
  filter:grayscale(1) sepia(.3) brightness(.75);
}
#panel .res .noplate{ display:block; width:3.4rem; height:2.5rem; border:1px dashed var(--rule); }
#panel .res .y{
  font-family:var(--font-meta); font-size:.48rem; letter-spacing:.16em;
  color:var(--fg-dim);
}
#panel .res.decay .y{ color:var(--down); }
#panel .res.potential .y{ color:var(--up); }
#panel .res.fork .y{ color:var(--gold); }
#panel .res .t{ font-family:var(--font-body); font-size:.82rem; line-height:1.3; margin-top:.2rem; }

@media (max-width: 900px){
  #panel{
    position:relative; width:auto; inset:auto;
    border-left:0; border-top:1px solid var(--rule);
    max-height:42svh;
  }
  .cloud{ grid-template-rows:auto 1fr auto auto; }
  #stage{ min-height:24rem; }
}
@media (prefers-reduced-motion: reduce){
  .w{ transition:none; }
  .w:hover, .w:focus-visible{ transform:translate(-50%,-50%); }
}