.cal-block { margin-block-end: var(--space-5); }
.cal-h { font-size: var(--step-1); font-weight: 400; margin: 0 0 var(--space-3); }
.cal-mono { font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-dim); }
.cal-wedge { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, 1fr); border: 1px solid var(--line); }
.cal-step { min-height: 6rem; display: flex; align-items: flex-end; padding: var(--space-1); font-family: var(--font-mono); font-size: var(--step--1); }
.cal-light { color: var(--fg); }
.cal-dark { color: var(--bg); }
@media (max-width: 40rem) { .cal-step span { writing-mode: vertical-rl; } }
.cal-swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-2); }
.cal-swatch { display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--line); padding: var(--space-2); }
.cal-chip { width: 3rem; height: 3rem; flex: none; border: 1px solid var(--line); }
.cal-name { font-size: var(--step--1); }
.cal-hex { display: block; font-family: var(--font-mono); color: var(--fg-dim); }
.cal-grid { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .cal-grid { grid-template-columns: 1fr 1fr; } }
.cal-pluge { display: grid; grid-template-columns: repeat(3, 1fr); height: 8rem; background: #000; padding: var(--space-3); gap: var(--space-3); border: 1px solid var(--line); margin-bottom: var(--space-3); }
/* The level labels sit under each bar at dim grey, so they never brighten the patch being judged. */
.cal-pluge span { display: flex; align-items: flex-end; padding: var(--space-1); font-family: var(--font-mono); font-size: var(--step--1); color: #8a8a8a; }
.cal-pair { padding: var(--space-3); margin: 0 0 var(--space-2); font-size: var(--step-1); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cal-pair-a { background: var(--bg); color: var(--fg); border: 1px solid var(--line); }
.cal-pair-b { background: var(--bg-2); color: var(--fg-dim); }