/* ==========================================================================
   The live rule list, in the poster system.

   Same surface as the docs, so the same vocabulary: paper ground, ink borders,
   hard offset shadows. The three rule states use the poster accents rather
   than a semantic scale of their own, because introducing a fourth palette to
   this site would be the actual problem.
   ========================================================================== */

.rules{ padding-block:2.5rem 5rem; max-width:66rem; }
.rules h1{
  font-family:var(--poster-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.4rem,2rem + 1.9vw,3.6rem); line-height:.94;
  margin:0 0 1rem; text-wrap:balance; color:var(--poster-ink);
}

.rules__status{
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.28rem .32rem 0 var(--poster-ink);
  padding:.75rem 1rem; margin:0 0 2rem; font-size:.9rem; font-weight:500;
  background:var(--poster-paper); color:var(--poster-copy-dark);
}
.rules__status--ok { background:var(--poster-mint); color:var(--poster-ink); }
.rules__status--bad{ background:var(--poster-red);  color:var(--poster-paper); }
.rules__status a{ color:inherit; }

.rules__list{ display:grid; gap:1.5rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:48rem){ .rules__list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

.rule{
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.32rem .36rem 0 var(--poster-ink);
  background:var(--poster-paper); padding:1.25rem;
  display:flex; flex-direction:column; gap:1rem; min-width:0;
}
.rule__head{ display:flex; gap:1rem; justify-content:space-between; align-items:flex-start; }
.rule__id{
  font:400 .7rem/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--poster-ink-muted); margin:0 0 .5rem;
}
.rule__what{ font-weight:700; font-size:1.02rem; line-height:1.32; margin:0;
             color:var(--poster-ink); text-wrap:pretty; }

.rule__status{
  flex:none; font-size:.66rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:.4em .65em; border-radius:.3rem;
  border:2px solid var(--poster-ink); color:var(--poster-ink);
}
.rule__status--live{ background:var(--poster-lime); }
.rule__status--done{ background:var(--poster-paper-deep); }
.rule__status--off { background:var(--poster-orange); }

.rule__bar{
  height:10px; border:2px solid var(--poster-ink); border-radius:.3rem;
  background:var(--poster-paper-cell); overflow:hidden;
}
.rule__bar > span{ display:block; height:100%; background:var(--poster-violet); }
.rule__progress{ margin:0; font-size:.85rem; color:var(--poster-ink-muted); }

.rule__facts{ display:grid; gap:.75rem 1.5rem; margin:0;
              grid-template-columns:repeat(2,minmax(0,1fr)); }
.rule__facts > div{ min-width:0; }
.rule__facts dt{
  font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--poster-ink-muted); margin-bottom:.35em;
}
.rule__facts dd{ margin:0; font-size:.88rem; color:var(--poster-ink);
                 font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.rule__facts a{ color:var(--poster-violet-dark); font-family:var(--font-mono); }

.rule__note{
  margin:0; font-size:.85rem; color:var(--poster-copy-dark);
  background:var(--poster-paper-cell); border:2px dashed var(--poster-ink-muted);
  border-radius:.4rem; padding:.7rem .9rem;
}
.rule__note b{ color:var(--poster-ink); }

.rules__check{ margin-top:3.5rem; padding-top:2rem; border-top:3px solid var(--poster-ink); }
.rules__check h2{
  font-family:var(--poster-display); font-weight:400; text-transform:uppercase;
  font-size:1.6rem; line-height:1.05; margin:0 0 .75rem;
}
.rules__check p{ margin:0 0 1rem; color:var(--poster-copy-dark); }
.rules__check pre{
  background:var(--poster-ink); color:var(--poster-paper);
  border:3px solid var(--poster-ink); border-radius:var(--poster-cell-radius);
  box-shadow:.32rem .36rem 0 var(--poster-violet);
  padding:1.25rem 1.4rem; overflow-x:auto; margin:0 0 1rem;
  font:400 .875rem/1.65 var(--font-mono);
}
.rules__check code{ white-space:pre; }
.rules__check p code{
  background:var(--poster-paper-cell); border:1px solid var(--poster-paper-deep);
  padding:.1em .36em; border-radius:.25rem; white-space:normal;
}
.rules__check a{ color:var(--poster-violet-dark); font-weight:600; }