/* MudBlazor supplies the component styling and CSS reset.
   Only app-specific overrides belong here. */

/* Truncation utilities. `text-truncate` is a Bootstrap class, and Bootstrap was removed
   during scaffolding — so every use of it here silently did nothing, letting long names
   and emoji-bearing nicknames wrap and leaving tiles at different heights. */
.ss-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Two lines, always occupying two lines' worth of height, so a one-line and a two-line
   title leave their tiles the same height and the Play buttons stay on a row. */
.ss-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
    line-height: 1.25;
}

/* The tile's metadata line sets 16px avatars and icons beside 12px caption text, and three
   MudBlazor details each break that row if left alone.

   MudTooltip wraps its child in an inline-block div and drops an empty popover placeholder
   div in beside it, so the wrapper builds a line box taller than the icon it holds and the
   icon ends up a few pixels above everything next to it — measured at 3.5px, with the row
   itself inflated from 16px to 27px. Size.Small icons are 20px, wider than the avatar they
   sit against. And the avatar is the only item carrying "min-width: 0", so when the row runs
   out of room flex crushes it to zero width and its circle overflows on top of the
   separator that follows.

   Every child is therefore pinned at its natural width except the uploader, which shrinks —
   down to its avatar and no further, since UserAvatar floors itself at the circle. */
.ss-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    min-width: 0;
    overflow: hidden;
}

.ss-meta > * {
    flex-shrink: 0;
}

.ss-meta .ss-uploader {
    flex-shrink: 1;
}

.ss-meta .mud-tooltip-root {
    display: inline-flex;
    align-items: center;
}

.ss-meta .mud-icon-root {
    font-size: 16px;
}

/* Favourite rides this row rather than taking a line of its own under the overflow menu,
   where one glyph cost every tile a full icon-button row.

   Two things have to be undone for it to fit. The auto margin goes on a plain span, not on
   the button: MudTooltip renders its own wrapper div between the two, so the flex item this
   row actually lays out is the wrapper, and a margin on the button never reaches it. And the
   rule above sizes the icon to 16px, which is right beside 12px text but leaves a 16px
   click target — under the 24px minimum — so the padding puts that back without growing
   the glyph. */
.ss-meta .ss-meta-end {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.ss-meta .ss-favourite {
    padding: 4px;
}

html, body {
    margin: 0;
    padding: 0;
}

/* Blazor's built-in error toast, restyled to sit above MudBlazor's layers. */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Marks the nav destination currently being viewed, in both the desktop button row and the
   mobile menu.

   An accent bar rather than a Primary text colour, for two reasons. The app bar is #1E1F22
   and the primary is Discord blurple #5865F2, which is a marginal contrast ratio for text
   but comfortably clears the lower bar a non-text indicator is held to. And the desktop row
   needs ~690px of fixed content already, so anything that changes a button's width — a
   filled Variant, extra padding — spends space the bar does not have. A pseudo-element
   costs none.

   Geometry flips by context: inside the app bar the bar sits under the item, while menu
   items render into the popover provider outside it and take a leading edge bar instead.
   Keyed on the app bar rather than on MudBlazor's own class names, which are not contract. */
.ss-nav-active {
    position: relative;
    font-weight: 600;
}

.ss-nav-active::after {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--mud-palette-primary);
}

.mud-appbar .ss-nav-active::after {
    left: 8px;
    right: 8px;
    top: auto;
    bottom: 2px;
    width: auto;
    height: 2px;
    border-radius: 1px;
}