/*
    The server row, shared by the servers list and the browser origin pages.

    Lifted out of the list page's inline <style> when the origin pages started rendering the
    same partial: the row's flag positioning lives here, and a page that rendered the markup
    without these rules had the flag fall out of its corner and wedge itself between the icon
    and the server name.
*/

/* ── Server row ── */

/* The meta line keeps the size it inherits; it only needs to stop wrapping under
   the icon on a narrow screen. */
.server-row-meta {
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* The flag sits on the corner of the server's own icon, so it costs no horizontal
   room and reads as a property of the server rather than another field in the line.
   This wrapper is what makes that possible: without position: relative here the
   flag has nothing to anchor to and falls back into the flow, wedging itself
   between the icon and the name. */
.server-row-icon-wrap {
    position: relative;
    flex-shrink: 0;
    line-height: 0;
}

/* A fixed chip, not a scaled image. Both flag packs vary: the SVGs carry each
   flag's true aspect ratio and the PNGs are square canvases with the flag centred
   in transparent padding, so either way the visible flag differs per country.
   object-fit: cover fills a fixed box, so every country occupies the same
   rectangle. */
.server-row-flag {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 15px;
    height: 10px;
    object-fit: cover;
    border-radius: 2px;
    /* drop-shadow, not box-shadow: box-shadow traces the element's box and drew a
       rectangle around the transparent parts. This traces the artwork. */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* The download size, graded rather than one flat colour. Measured across the list:
   140 servers under 100MB, 146 up to 512MB, 443 up to 1GB, 270 up to 3GB, 42 above.
   A 40MB server and a 4GB one are a different decision, so they should not read the
   same. One hue throughout, because yellow is the brand accent and means "this
   filter is active" everywhere else on the page. */
/* Always the workshop colour, never grey. Grey reads as "not applicable" rather than
   "small", and this site's curated and source badges never drop out of their colour
   either, so a small download should be a quieter blue rather than a different
   thing entirely. */
.mod-size-xs {
    color: var(--bs-info);
    opacity: 0.6;
}

.mod-size-sm {
    color: var(--bs-info);
    opacity: 0.8;
}

.mod-size-md {
    color: var(--bs-info);
}

.mod-size-lg {
    color: var(--bs-info);
    font-weight: 600;
}


/* ── The statistics link at the top of the browser sidebar ────────────────────
 * The whole card is the anchor, so the target is the card rather than a few words
 * inside it, and it picks up the accent on approach the way a row does.
 */
.stats-link-card {
    display: block;
    color: inherit;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.stats-link-card:hover,
.stats-link-card:focus-visible {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    background-color: var(--bs-secondary-bg);
    color: inherit;
}

.stats-link-icon {
    font-size: 1.4rem;
    color: var(--bs-primary);
    flex: 0 0 auto;
}

/* Slides on hover, which is the cheapest way to say a card goes somewhere. */
.stats-link-arrow {
    color: var(--bs-secondary-color);
    flex: 0 0 auto;
    transition: transform 0.15s ease, color 0.15s ease;
}

.stats-link-card:hover .stats-link-arrow {
    color: var(--bs-primary);
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .stats-link-card,
    .stats-link-arrow {
        transition: none;
    }

    .stats-link-card:hover .stats-link-arrow {
        transform: none;
    }
}