/* Shared data display; the four compositions vary around this compact calendar. */
.horizontal-row { align-items:stretch; }
.horizontal-side { min-width:0; display:flex; }
.horizontal-side > div { flex:1; min-width:0; }
.horizontal-row .stats-v05 h2 { margin-top:0; }
/* Alternate the larger panel: leaderboard on the right, compute receipt on the left. */
@media(min-width:821px) {
  .competition-page:has(.take-b) .competition-entry.section-row {
    grid-template-columns:minmax(0,1fr) calc((100% - 2rem) * 6 / 11);
    gap:0;
  }
  .horizontal-row:has(.take-b) {
    grid-template-columns:calc((100% - 2rem) * 6 / 11) minmax(0,1fr);
    gap:0;
  }
}
.h-grid { display:grid; grid-template-columns:repeat(7,24px); grid-template-rows:repeat(5,24px); gap:4px; width:192px; flex-shrink:0; }
.h-day, .h-scale i { --green:#202820; display:block; background:var(--green); }
.h-day { width:24px; height:24px; appearance:none; padding:0; border:1px solid #ffffff0c; border-radius:2px; cursor:crosshair; transition:filter .2s; }
.h-day[data-level="1"], .h-scale i[data-level="1"] { --green:#0e4429; }
.h-day[data-level="2"], .h-scale i[data-level="2"] { --green:#006d32; }
.h-day[data-level="3"], .h-scale i[data-level="3"] { --green:#26a641; }
.h-day[data-level="4"], .h-scale i[data-level="4"] { --green:#39d353; }
.h-day.h-final { outline:2px solid #e9bd5f; outline-offset:1px; }
.h-day:hover { filter:brightness(1.3); }
.h-day:focus-visible { outline:2px solid #5fbcdf; outline-offset:1px; }
.h-day.h-final:focus-visible { outline-color:#ffe6ad; }
.h-legend { margin-top:1rem; display:flex; flex-direction:column; align-items:flex-start; gap:.65rem; font:.65rem/1.5 var(--mono); color:inherit; }
.h-scale { display:flex; align-items:center; gap:4px; }
.h-scale > span:first-child { margin-right:3px; }
.h-scale > span:last-child { margin-left:3px; }
.h-scale i, .h-final-key i { width:9px; height:9px; border-radius:1px; font-style:normal; }
.h-final-key { display:flex; gap:.5rem; align-items:center; }
.h-final-key i { display:block; background:#39d353; outline:1px solid #e9bd5f; outline-offset:1px; }
.h-readout { min-height:2.8em; font:.65rem/1.5 var(--mono); margin:1rem 0 0; }
.take-a .h-readout, .take-b .h-readout { margin:.75rem 0 0; }
.h-source { display:inline-block; font:.65rem/1.6 var(--mono); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:820px) { .horizontal-side { width:100%; } }
@media(prefers-reduced-motion:reduce) { .h-day { transition:none; } }