/* =========================================================================
   tile-loading.css — shared click / loading feedback for clickable tiles.
   -------------------------------------------------------------------------
   Works for two tile shapes:
     1. Platform tiles  (Home/Index)   — <a class="platform-tile"> with a
        colored .platform-tile__head band + .platform-tile__spinner.
     2. Report tiles    (Omeda/Index…) — <article class="report-tool"> wrapping
        an <a class="report-tool__link"> with a .report-tool__icon block +
        .report-tool__spinner.

   USAGE
     - Put data-loading-tiles on the container that holds the tiles
       (e.g. the .tile-grid or the .subgrid in #reports-tools).
     - Give each tile head/icon a spinner span:
         <span class="platform-tile__spinner" aria-hidden="true"></span>
         <span class="report-tool__spinner"   aria-hidden="true"></span>
     - Include tile-loading.js (the layout already does).
   On click, the chosen tile shows a spinner + shimmer and swaps its link text
   to "Opening…", while sibling tiles dim. Real navigation proceeds underneath.
   ========================================================================= */

/* Anchor points for the absolutely-positioned spinner + shimmer */
.platform-tile__head {
    position: relative;
}

.report-tool__icon {
    position: relative;
}

/* Dim the siblings while one tile is navigating */
[data-loading-tiles].is-navigating .platform-tile:not(.is-loading),
[data-loading-tiles].is-navigating .report-tool:not(.is-loading) {
    opacity: .45;
    filter: saturate(.6);
    pointer-events: none;
}

.platform-tile.is-loading,
.report-tool.is-loading {
    pointer-events: none;
}

    .platform-tile.is-loading:hover,
    .report-tool.is-loading:hover {
        transform: none;
    }

    /* Shimmer sweep across the colored area */
    .platform-tile.is-loading .platform-tile__head::before,
    .report-tool.is-loading .report-tool__icon::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .28) 50%, transparent 80%);
        background-size: 220% 100%;
        animation: tileSweep 1.1s ease-in-out infinite;
    }

/* Spinner ring */
.platform-tile__spinner,
.report-tool__spinner {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.platform-tile__spinner {
    top: 1.25rem;
    left: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
}

.report-tool__spinner {
    inset: 0;
    margin: auto;
    width: 1.8rem;
    height: 1.8rem;
    border-width: 2px;
}

.platform-tile.is-loading .platform-tile__spinner,
.report-tool.is-loading .report-tool__spinner {
    opacity: 1;
    transform: scale(1);
    animation: tileSpin .7s linear infinite;
}

/* Hide the resting icon while the spinner is up */
.platform-tile.is-loading .platform-tile__head i,
.report-tool.is-loading .report-tool__icon i {
    opacity: 0;
}

/* Swap the link label for an "Opening…" working state */
.platform-tile.is-loading .link-arrow,
.report-tool.is-loading .link-arrow {
    visibility: hidden;
    position: relative;
}

    .platform-tile.is-loading .link-arrow::after,
    .report-tool.is-loading .link-arrow::after {
        content: "Opening\2026";
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
        white-space: nowrap;
        color: var(--pico-primary, #cc3f4d);
    }

@keyframes tileSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes tileSweep {
    0% {
        background-position: 140% 0;
    }

    100% {
        background-position: -40% 0;
    }
}

/* -------------------------------------------------------------------------
   Busy buttons / links — feedback while a click triggers navigation or a
   form submit. Add data-busy to a link/button (or data-busy-submit to a form,
   which busies its submit button when the form actually submits). The label
   is hidden and a spinner is centered in place. tile-loading.js wires it.
   ------------------------------------------------------------------------- */
button.is-busy, [role="button"].is-busy {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

    button.is-busy > *, [role="button"].is-busy > *,
    button.is-busy *, [role="button"].is-busy * {
        visibility: hidden !important;
    }

    button.is-busy::before, [role="button"].is-busy::before {
        display: none !important;
    }

    button[aria-busy="true"].is-busy {
        cursor: default;
    }

    button.is-busy::after, [role="button"].is-busy::after {
        content: "";
        visibility: visible;
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.15em;
        height: 1.15em;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .45);
        border-top-color: #fff;
        animation: tileSpin .7s linear infinite;
    }
    /* Outline / secondary buttons sit on a light fill — use a dark spinner */
    button.is-busy.outline::after, button.is-busy.secondary::after,
    [role="button"].is-busy.outline::after, [role="button"].is-busy.secondary::after {
        border-color: rgba(49, 22, 39, .25);
        border-top-color: var(--pico-primary, #cc3f4d);
    }

@media (prefers-reduced-motion: reduce) {
    button.is-busy::after, [role="button"].is-busy::after {
        animation: none;
    }
}
.report-tool {
    background-color: #f9f8f6;
}
/* -------------------------------------------------------------------------
   Breadcrumb link inside a .mini-heading eyebrow (platform pages link back to
   the Platforms landing). Inherits the eyebrow's color so it stays legible on
   any theme; underline signals it's clickable.
   ------------------------------------------------------------------------- */
.mini-heading a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity .15s ease;
}

    .mini-heading a:hover {
        opacity: .7;
    }

@media (prefers-reduced-motion: reduce) {
    .platform-tile.is-loading .platform-tile__head::before,
    .report-tool.is-loading .report-tool__icon::before,
    .platform-tile.is-loading .platform-tile__spinner,
    .report-tool.is-loading .report-tool__spinner {
        animation: none;
    }
}