/**
 * WoollyWaffles — front-end chart styles.
 *
 * The chart is a CSS grid of square cells inside a <figure>. Column count
 * and gap arrive as CSS custom properties set inline by the renderer
 * (--waffly-cols, --waffly-gap); each cell carries its colour (--waffly-c)
 * and fill-order index (--waffly-i, used to stagger the fill animation).
 */

.waffly-waffle {
    position: relative;
    margin: 1.5em auto;
}

.waffly-waffle__grid {
    display: grid;
    grid-template-columns: repeat(var(--waffly-cols, 10), 1fr);
    gap: var(--waffly-gap, 3px);
}

.waffly-waffle__cell {
    background: var(--waffly-c, #E8E8EB);
    aspect-ratio: 1 / 1;
    border-radius: var(--waffly-radius, 18%);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.waffly-waffle--square  { --waffly-radius: 0; }
.waffly-waffle--rounded { --waffly-radius: 18%; }
.waffly-waffle--circle  { --waffly-radius: 50%; }

.waffly-waffle__cell--link {
    cursor: pointer;
}

/* -------------------------------------------------------------------------
   Fill animation.

   The hidden state is applied by JS (--armed) only when animation is enabled
   and the visitor does not prefer reduced motion, so the chart is always
   fully visible without JS. JS removes both classes once the fill finishes
   so the per-cell transition-delay never leaks into hover/highlight effects.
   ------------------------------------------------------------------------- */

.waffly-waffle--armed .waffly-waffle__cell {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: calc(var(--waffly-i, 0) * var(--waffly-stagger, 8ms));
}

.waffly-waffle--filled .waffly-waffle__cell {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------------------
   Category highlight / isolate (driven by legend hover and click).
   ------------------------------------------------------------------------- */

.waffly-waffle--focus .waffly-waffle__cell {
    opacity: 0.22;
}

.waffly-waffle--focus .waffly-waffle__cell.is-active {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   Legend.
   ------------------------------------------------------------------------- */

.waffly-waffle__legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
    margin-top: 12px;
    font-size: 0.85em;
    line-height: 1.4;
}

.waffly-waffle__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 2px 4px;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 3px;
}

.waffly-waffle__key:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.waffly-waffle__key.is-locked .waffly-waffle__key-label {
    font-weight: 700;
    text-decoration: underline;
}

.waffly-waffle__swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
    border-radius: var(--waffly-radius, 18%);
}

.waffly-waffle__key-value {
    opacity: 0.7;
}

.waffly-waffle__key-link {
    text-decoration: none;
    margin-left: -8px;
}

/* -------------------------------------------------------------------------
   Tooltip (created by JS, positioned relative to the figure).
   ------------------------------------------------------------------------- */

.waffly-tooltip {
    position: absolute;
    transform: translate(-50%, calc(-100% - 8px));
    background: #1d2327;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 10;
}

.waffly-tooltip.is-visible {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   Reduced motion: no transitions at all; highlight states still apply.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .waffly-waffle__cell,
    .waffly-tooltip {
        transition: none;
    }
}