.card-dummy {
    opacity: 0.5;
    pointer-events: none;
}

.card-hidden {
    display: none;
}

/* The samples and import cards are stripped from index.html by the g2g CLI for
   a package that has neither folder, which can leave this row with no children
   at all. :empty is useless here because the whitespace between the markers is
   a text node; :has() ignores text nodes. A browser without :has() support
   renders an empty row, which is a gap, not a defect. */
.tm-optional-row:not(:has(> div)) {
    display: none;
}

/* Every clickable surface on this page lifts on hover, from one rule.
   .tm-button in main.css already did, and the two compact cards were given the
   same 2px when they were added -- but the workflow and viewer cards, the
   largest click targets on the page, had no hover response at all, and the
   footer icons and back-to-top arrows only changed colour. A card added later
   joins this selector list rather than growing a third copy of the same two
   declarations. */
.card-proper,
.tm-card-compact,
.uk-icon-link,
.uk-totop {
    transition: transform 100ms ease-in-out, box-shadow 100ms ease-in-out;
    transform: translateY(0);
}

/* Both card kinds sit on .uk-box-shadow-medium (0 5px 15px / 0.08), so the
   hover shadow is that one deepened rather than a value borrowed from
   .tm-button, whose resting shadow is a different shape. A single class plus
   :hover already outranks .uk-box-shadow-medium, and custom.css is loaded after
   main.css, so no !important is involved. */
.card-proper:hover,
.tm-card-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 18px rgba(0, 0, 0, 0.12);
}

/* The footer icons and the back-to-top arrows carry no shadow of their own, so
   they lift alone -- a drop shadow under a 20px glyph reads as a rendering
   artefact rather than elevation. :focus is included because these are the two
   targets on the page small enough to be reached by keyboard and missed. */
.uk-icon-link:hover,
.uk-icon-link:focus,
.uk-totop:hover,
.uk-totop:focus {
    transform: translateY(-2px);
}

.tm-card-compact .tm-card-icon {
    color: #2196F3;
}

.tm-card-compact .uk-card-title {
    margin: 15px 0 10px;
    font-size: 1.3rem;
}

.tm-card-compact p {
    margin: 0;
}

/* Motion on this page is decoration: every target above is identifiable
   without it, and the colour and shadow changes survive. .tm-button and
   .hvr-forward are named here although their transforms live in main.css --
   custom.css is loaded after it, so this is the one place that can make the
   whole page's answer to prefers-reduced-motion complete rather than partial. */
@media (prefers-reduced-motion: reduce) {
    .card-proper,
    .tm-card-compact,
    .uk-icon-link,
    .uk-totop,
    .tm-button,
    .hvr-forward {
        transition-property: color, background-color, box-shadow;
    }

    .card-proper:hover,
    .tm-card-compact:hover,
    .uk-icon-link:hover,
    .uk-icon-link:focus,
    .uk-totop:hover,
    .uk-totop:focus,
    .tm-button:hover,
    .hvr-forward:hover,
    .hvr-forward:focus,
    .hvr-forward:active {
        transform: none;
    }
}