/* The RCL's own stylesheet: rules MudBlazor has no utility for, shared by components across
   Musikti.Ui. Served as _content/Musikti.Ui/musikti-ui.css, so every host - the WASM app today,
   the native host later - picks up the same copy by referencing it once.

   Not to be confused with the host's css/app.css, which paints the boot screen before WebAssembly
   exists and therefore cannot live here. Anything a component depends on belongs in this file;
   anything that has to render before the app starts belongs in the host's. */

/* A label that gives up its space on a phone without giving up its name (#220).

   Below MudBlazor's md breakpoint - 960px, the same boundary MainLayout switches the rail for the
   bottom bar at - the label is visually hidden rather than display:none. The control shrinks to its
   icon; a screen reader still announces the word. display:none would take the accessible name with
   the pixels, which is how a working screen-reader path becomes a broken one.

   .musikti-label-kept opts one label out of the collapse. Three unlabelled glyphs for graph
   distance are terser than they are clear, so the position you are on keeps its word at every
   width - the row still fits, and you can always see what you are looking at. */
.musikti-collapsing-label {
    white-space: nowrap;
}

@media (max-width: 959.98px) {
    .musikti-collapsing-label:not(.musikti-label-kept) {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        border: 0;
    }
}

/* The nights under a tour, residency or festival heading. A rule down the left plus the indent it
   pays for is the whole of it: it says "these belong to the thing above" without a nested card,
   which at this depth would be a box inside a box inside a container. MudBlazor has no utility for
   a grouping rule, which is what earns it a place here. */
.musikti-gig-nights {
    border-left: 2px solid var(--mud-palette-lines-default);
    padding-left: 12px;
}

/* A bottom-bar tab's caption. The bar is five tabs wide for an owner, and at 360px a caption that
   will not shrink wraps the whole bar onto two rows. Truncating "Moderation" is the cheaper loss -
   the icon above it is still the thing being read. */
.musikti-nav-label {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 599.98px) {
    .musikti-nav-label {
        font-size: 0.65rem;
    }
}

/* A fact and the decisions on it (#221): side by side where there is room, stacked below md with
   the decisions right-aligned underneath. The buttons are a fixed width and will not yield, so
   sharing a row on a phone costs the summary everything - which is the one thing on the row a
   moderator is actually reading. flex-shrink: 0 on the decisions is what keeps the wide layout
   honest, since min-width: 0 on the summary is what lets it be the one that gives. */
.musikti-decision-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.musikti-decisions {
    display: flex;
    align-items: center;
    align-self: flex-end;
    flex-shrink: 0;
}

@media (min-width: 960px) {
    .musikti-decision-row {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .musikti-decisions {
        align-self: auto;
    }
}