/* infond-backend's tile (its static/css/styles.css), the part the dashboard's
   cookie cards use; unfold's precompiled Tailwind has neither a ring in a colour
   of ours, nor a zoom, nor a soft tint for dark mode. `.filter-card` is the
   wrapper of one card, the <a> of a
   linked tile or a <div>. Every state is drawn on that card, the element that
   owns the rounded edge and the border: drawn on the wrapper, a shadow follows
   the wrapper's square box and a ring lies outside the card's own border. The
   wrapper is a flex column, so the card (it grows) fills it where a row
   stretches its tiles to one height. The card's shadow has two layers – frame
   ring, lift – so a frame and the hover shadow add up instead of one overwriting
   the other. A frame is the card's 1px border plus a 1.3px ring, both in the
   state's colour – one line, nothing shifts. */
.filter-card {
    --tile-ring: transparent;  /* the frame ring's colour */
    --tile-lift: 0 1px 2px 0 rgb(0 0 0 / .05);  /* the card's resting shadow-xs */
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius, 6px);  /* the card's rounded-default – the focus outline follows it */
}
.filter-card > * {
    box-shadow: 0 0 0 1.3px var(--tile-ring), var(--tile-lift);
    transition: box-shadow .2s cubic-bezier(.4, 0, .2, 1);
}
/* A linked tile lifts on hover: the 2.5 % zoom eases in over 50 ms, the shadow
   (Tailwind's shadow-lg) over 200. */
a.filter-card { transition: transform .05s cubic-bezier(.4, 0, .2, 1); }
a.filter-card:hover {
    --tile-lift: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    transform: scale(1.025);
}
@media (prefers-reduced-motion: reduce) { a.filter-card { transition: none; } }
/* A tile, linked or not, takes a frame in its state's colour, on a soft tint of
   it – the tint is ours, infond's alert tile stays white. Hover leaves both
   alone and adds its lift. */
.filter-card-ok { --tile-ring: rgb(34 197 94); }  /* green-500 */
.filter-card-ok > * {
    border-color: rgb(34 197 94);
    background-color: rgb(240 253 244);  /* green-50 */
}
.filter-card-alert { --tile-ring: rgb(239 68 68); }  /* red-500 */
.filter-card-alert > * {
    border-color: rgb(239 68 68);
    background-color: rgb(254 242 242);  /* red-50 */
}
.dark .filter-card-ok > * { background-color: rgb(34 197 94 / .1); }
.dark .filter-card-alert > * { background-color: rgb(239 68 68 / .1); }