body {
}

.truncate-1-line {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Room for two lines however short the text, so what follows a name lines up across a row. */
.reserve-2-lines {
    min-height: 2lh;
}

.blog-post-title {
    transition: color 0.2s;
}

.blog-post-title:hover {
    color: var(--mud-palette-primary);
}

/* The price ticker (TickerBar). The entries are written out twice and the track slides left by
   half its width, so the end of the loop looks the same as the start. */
@keyframes price-ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.price-ticker {
    overflow: hidden;
    white-space: nowrap;
    padding: 9px 0;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.price-ticker__track {
    display: inline-flex;
    gap: 32px;
    padding-left: 32px;
}

.price-ticker--scrolling .price-ticker__track {
    animation: price-ticker-scroll 54s linear infinite;
}

.price-ticker:hover .price-ticker__track,
.price-ticker:focus-within .price-ticker__track {
    animation-play-state: paused;
}

.price-ticker__item {
    display: inline-flex;
    gap: 6px;
    color: #616161;
    text-decoration: none;
}

.price-ticker__item:hover,
.price-ticker__item:focus-visible {
    color: var(--mud-palette-text-primary);
}

.price-ticker__price {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

.price-ticker__up {
    color: var(--mud-palette-primary);
}

.price-ticker__down {
    color: #C62828;
}

/* For a visitor who has asked for less motion the strip stands still and can be scrolled by
   hand. The second set of entries is only there for the loop. */
@media (prefers-reduced-motion: reduce) {
    .price-ticker {
        overflow-x: auto;
    }

    .price-ticker--scrolling .price-ticker__track {
        animation: none;
    }

    .price-ticker__item[aria-hidden="true"] {
        display: none;
    }
}

@media print {
    .price-ticker {
        display: none;
    }
}

/* Picture cards: the theme hubs' (Shared.UI ThemeMemberCard, ThemeHubCard) and the home page's
   tiles (Shared.UI PictureTile). A card is one link, styled as if it were not one. */
.theme-card {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
    border-radius: var(--mud-default-borderradius);
}

.theme-card:hover .theme-card__body,
.theme-card:focus-visible .theme-card__body {
    box-shadow: var(--mud-elevation-4);
}

/* MudBlazor takes the outline off focused links, so a card draws its own. */
.theme-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.theme-card__body {
    height: 100%;
    overflow: hidden;
}

.theme-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.picture-tile__name {
    font-weight: 500;
}

.picture-tile__price {
    font-weight: 600;
}

/* A skeleton is a line of text high unless told otherwise: square, like a tile's picture. */
.picture-tile__skeleton-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* An item card's picture (Shared.UI ItemCardImage): a real image named for the item, cropped to
   the card as the old background picture was. Its height comes from the component. */
.item-card__media {
    display: block;
}

.item-card__media:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.item-card__image {
    display: block;
    width: 100%;
    object-fit: cover;
}

.item-card__name {
    font-weight: 500;
}

/* Rows of tiles that swipe sideways (Pages/Home). The padding leaves room inside the scroller
   for a card's shadow and focus ring; the negative margin keeps the first tile in line with the
   heading above. */
.tile-row {
    --tile-gap: 12px;
    display: flex;
    gap: var(--tile-gap);
    margin: -4px -4px 0;
    padding: 4px 4px 8px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: thin;
}

.tile-row > li {
    flex: 0 0 auto;
    min-width: 0;
    scroll-snap-align: start;
}

.tile-row--themes {
    scroll-snap-type: x proximity;
}

.tile-row--themes > li {
    width: 120px;
}

/* A little over two tiles on a phone, so the next one always peeks in. The widths below are the
   page's (the .home container), not the window's. */
.tile-row--items > li {
    width: calc((100% - 2 * var(--tile-gap)) / 2.2);
}

@container (min-width: 480px) {
    .tile-row--items > li {
        width: calc((100% - 3 * var(--tile-gap)) / 3.4);
    }
}

/* With room for all four, a list is one row of four, with nothing to swipe. */
@container (min-width: 640px) {
    .tile-row--items {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }

    .tile-row--items > li {
        width: auto;
    }
}

/* The home page (Pages/Home), written in phone order: heading, themes, the three lists, market
   stats, blog. Keep the gap at least 24px: the stats' MudGrid reaches 24px above itself and has
   to land in empty space. */
.home {
    display: flex;
    flex-direction: column;
    gap: 32px;
    container-type: inline-size;
}

.home > * {
    min-width: 0;
}

/* Two lines rather than three on a phone. */
@media (max-width: 599.98px) {
    .home__heading {
        font-size: 1.25rem;
    }
}

.home-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px 16px;
    margin-bottom: 12px;
}

.home-section__head > :last-child {
    flex: none;
    white-space: nowrap;
}

.home-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

/* Each list in its own panel, the tiles white on grey, so it is plain which list a tile is in. */
.home-list {
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.home-list__title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* The blog's newest posts: a picture and the title, one link each; one column on a phone, then
   two, then three. */
.home-headlines {
    display: grid;
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

@container (min-width: 560px) {
    .home-headlines {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 900px) {
    .home-headlines {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.home-headline {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--mud-default-borderradius);
}

.home-headline:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.home-headline__image {
    flex: none;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-background-gray);
}

.home-headline__image--none {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.home-headline__text {
    min-width: 0;
}

.home-headline__title {
    font-weight: 500;
}

.home-headline:hover .home-headline__title,
.home-headline:focus-visible .home-headline__title {
    color: var(--mud-palette-primary);
}

/* From 1280px wide (MudBlazor's lg, where the stats fit on one row) the stats move up under the
   heading, holding their row's height until they load so nothing below jumps. */
@media (min-width: 1280px) {
    .home__title {
        order: -2;
    }

    .home__stats {
        order: -1;
        min-height: 96px;
    }
}

/* Wherever the page is at least 900px wide (whether or not the menu is open) the three lists sit
   side by side, each as two rows of two. */
@container (min-width: 900px) {
    .home-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
        gap: 0 24px;
    }

    /* Each list's heading and tiles share rows with its neighbours', so the tiles line up even
       where a caption wraps. */
    .home-board > .home-list {
        display: grid;
        grid-row: span 2;
        grid-template-rows: subgrid;
    }

    .home-board > .home-list > .home-section__head {
        align-self: start;
    }

    .home-board .tile-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
        scroll-snap-type: none;
    }

    .home-board .tile-row > li {
        width: auto;
    }
}

/* A closed nav group (MudNavGroup) keeps its links in the page, so search engines still follow
   them, but MudBlazor only squeezes them to no height and marks them aria-hidden. Hidden here
   too, so Tab skips them until the group opens. A closed group carries no state class. */
.mud-navgroup-collapse:not(.mud-collapse-entering):not(.mud-collapse-entered):not(.mud-collapse-exiting) {
    visibility: hidden;
}

/* Collection and wishlist marks on item cards (Shared.UI CollectionMarks): a pill over the top
   corner of a card's picture, or an icon alone over the bottom corner of a list row's thumbnail.
   Not something to click, so a click lands on the card beneath. */
.item-marks-host {
    position: relative;
}

.item-marks {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    pointer-events: none;
}

.item-mark {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: var(--mud-elevation-2);
}

.item-mark .mud-icon-root {
    font-size: 1rem;
}

.item-mark--collection {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.item-mark--wishlist {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}

.item-marks--compact {
    top: auto;
    left: auto;
    right: -4px;
    bottom: -4px;
    gap: 2px;
}

.item-marks--compact .item-mark {
    padding: 2px;
}

/* The value bar's boxes are a fixed height, so a value too long for one line (a theme's or a
   category's name) ends in an ellipsis, with the whole of it in its tooltip. MudAlert's inner
   flex wrappers otherwise grow to fit the text instead of the box. */
.snapshot-alert .mud-alert-position,
.snapshot-alert .mud-alert-message {
    min-width: 0;
}

.snapshot-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On a phone the category chips stay on one line and scroll sideways. */
.theme-hub__chips {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.25rem;
}

.theme-hub__chips .mud-chip {
    flex: 0 0 auto;
}

.theme-hub__intro {
    max-width: 75ch;
}

.theme-hub__intro img {
    max-width: 100%;
    height: auto;
}