/* COVERAGE — two blocks of six rows, mirrored around one protection axis.
   The left half of the axis is populated row by row. The right half is a
   single void. That asymmetry is the whole figure. */

.cov{display:grid;gap:clamp(.9rem,2vw,1.4rem);padding:clamp(1.1rem,2.6vw,2rem)}

.cov__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 .5rem}

.cov__side{
  display:grid;gap:.28rem .5rem;align-content:start;min-width:0;
  grid-template-rows:auto;grid-auto-rows:3.6rem;
}
.cov__side--l{grid-template-columns:minmax(0,1fr) minmax(6.2rem,8.6rem)}
.cov__side--r{grid-template-columns:minmax(6.2rem,8.6rem) minmax(0,1fr)}

.cov__hd{
  grid-column:1/-1;display:grid;gap:.15rem;align-content:end;
  padding-bottom:.7rem;border-bottom:1px solid var(--line);margin-bottom:.45rem;
}
.cov__side--r .cov__hd{text-align:right}
.cov__hd-k{color:var(--text-4)}
.cov__side--r .cov__hd-k{color:var(--cyan);opacity:.75}
.cov__hd-t{font-family:var(--serif);font-size:clamp(1.05rem,2vw,1.32rem);color:var(--text);line-height:1.2}
.cov__hd-n{font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--text-4);margin-left:.5rem}

/* ---------------------------------------------------------------- rows */
.cov__it{
  position:relative;display:flex;align-items:center;gap:.6rem;text-align:left;
  padding:.5rem .7rem;border:1px solid transparent;border-radius:var(--radius);
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.cov__it--l{grid-column:1}
.cov__it--r{grid-column:2;flex-direction:row-reverse;text-align:right}
.cov__pr{grid-column:2}
.cov__void{grid-column:1}

.cov__it-t{font-size:.85rem;line-height:1.35;color:var(--text-2)}
.cov__mk{width:.55rem;height:.55rem;border-radius:1px;flex:none;font-style:normal;display:block}
.cov__it.is-out .cov__mk{border:1px dashed var(--slate)}
.cov__it.is-rule .cov__mk{border:1px solid var(--text-3)}
.cov__it.is-in .cov__mk{background:var(--cyan)}
.cov__it:hover,.cov__it.is-on{background:var(--surface-2);border-color:var(--line-2)}
.cov__it.is-on .cov__it-t{color:var(--text)}

/* the provisions that do exist: one per row, quiet slate */
.cov__pr{
  display:grid;align-content:center;padding:.42rem .55rem;
  border:1px dashed var(--slate);border-radius:var(--radius);color:var(--slate);
  font-family:var(--mono);font-size:.575rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.4;
}
.cov__pr.is-rule{border-style:solid;border-color:var(--text-3);color:var(--text-2)}

/* the spine: these six are the records that join to each other */
.cov__it--r{border-right:1px solid rgba(255,93,77,.22);border-radius:var(--radius) 0 0 var(--radius)}
.cov__it--r::after{
  content:"";position:absolute;right:-2.5px;top:50%;margin-top:-2.5px;
  width:5px;height:5px;border-radius:100px;background:var(--red);opacity:.3;
  transition:opacity var(--dur-1) var(--ease);
}
.cov[data-side="r"] .cov__it--r{border-right-color:rgba(255,93,77,.6)}
.cov[data-side="r"] .cov__it--r::after{opacity:1}

/* ---------------------------------------------------------------- the void */
/* The hatch stays faint on purpose: the emptiness has to read as emptiness,
   and the one label inside it has to stay legible against it. */
.cov__void{
  --st:rgba(255,93,77,.19);
  display:grid;align-content:center;justify-items:stretch;gap:.4rem;text-align:center;
  padding:1rem .5rem;border:1px solid rgba(255,93,77,.4);border-radius:var(--radius);
  background-color:rgba(255,93,77,.025);
  transition:border-color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease),
             box-shadow var(--dur-2) var(--ease);
}
.cov__void-l,.cov__void-s{
  display:block;background:var(--surface);padding:.5rem .4rem;border-radius:2px;
  font-family:var(--mono);text-transform:uppercase;
}
.cov__void-l{
  font-size:.64rem;font-weight:600;letter-spacing:.1em;color:var(--red);line-height:1.55;
  box-shadow:inset 0 0 0 1px rgba(255,93,77,.35);
}
.cov__void-s{font-size:.55rem;letter-spacing:.12em;color:var(--text-4);padding-block:.35rem}
.cov__void.is-hot{
  --st:rgba(255,93,77,.3);
  border-color:var(--red);background-color:rgba(255,93,77,.06);box-shadow:0 0 34px -14px var(--red);
}

/* ------------------------------------------------------------- the readout */
.cov__read{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem;
  border-top:1px solid var(--line);padding-top:.9rem;min-height:3.6rem;
  font-size:.88rem;line-height:1.5;color:var(--text-3);
}
.cov__read-m{
  width:.55rem;height:.55rem;border-radius:1px;background:var(--line-2);flex:none;
  align-self:center;font-style:normal;display:block;
}
.cov[data-side="l"] .cov__read-m{background:transparent;border:1px dashed var(--slate)}
.cov[data-side="r"] .cov__read-m{background:var(--cyan)}
.cov__read-t{color:var(--text);font-weight:600}
.cov[data-side="r"] .cov__read-d{color:var(--red-2)}

.cov__key{gap:.4rem 1.15rem;font-size:.64rem}
.cov__key span{align-items:center}
.cov-k-void{
  width:.62rem;height:.62rem;border-radius:2px;flex:none;font-style:normal;
  border:1px solid var(--red);
  background-image:repeating-linear-gradient(45deg,var(--red) 0 1.5px,transparent 1.5px 5px);
}
.cov-k-spine{width:.2rem;height:.75rem;border-radius:2px;background:var(--red);opacity:.55;flex:none;font-style:normal}

/* --------- narrow: two stacked groups, each keeping the same axis --------- */
@media (max-width:820px){
  .cov__grid{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .cov__side{grid-auto-rows:minmax(3.3rem,auto)}
  .cov__side--r{grid-template-columns:minmax(0,1fr) minmax(6.2rem,8.6rem)}
  .cov__side--r .cov__hd{text-align:left}
  .cov__it--r{grid-column:1;flex-direction:row;text-align:left}
  .cov__void{grid-column:2}

  /* the spine moves to the outer edge so it still reads as a spine */
  .cov__it--r{border-right:0;border-left:1px solid rgba(255,93,77,.22);border-radius:0 var(--radius) var(--radius) 0}
  .cov__it--r::after{right:auto;left:-2.5px}
  .cov[data-side="r"] .cov__it--r{border-right-color:transparent;border-left-color:rgba(255,93,77,.6)}
}
@media (max-width:480px){
  .cov__side--l,.cov__side--r{grid-template-columns:minmax(0,1fr) 6.4rem}
  .cov__it-t{font-size:.82rem}
  .cov__pr{font-size:.55rem;padding:.4rem .45rem}
  .cov__void-l{font-size:.6rem;letter-spacing:.08em}
  .cov__read{font-size:.84rem}
}