/*
 * Atlas Discover
 * Founder-approved mobile reference implementation.
 *
 * This stylesheet owns Discover component structure only.
 * Final visual convergence and shell-specific mobile rules live in
 * discover-render.css, which is loaded later by base.html.
 */

.main-content--discover {
    width: min(100%, var(--discover-width));
}

.discover-page {
    display: grid;
    min-width: 0;
}

.discover-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.discover-hero h1 {
    margin: 0;
    font-family: var(--font-family-display);
    font-weight: 500;
}

.discover-hero__proposition,
.discover-hero__monitoring {
    color: var(--color-text-secondary);
}

.discover-hero__monitoring {
    display: flex;
    align-items: center;
    margin: 0;
}

.discover-hero__monitoring > span {
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--color-success);
}

.discover-fixture-notice {
    color: var(--color-warning);
    font-size: var(--font-size-caption);
}

.discover-search {
    position: relative;
    display: grid;
    align-items: center;
}

.discover-search__copy {
    display: grid;
    min-width: 0;
    pointer-events: none;
}

.discover-search__copy label {
    position: static;
}

.discover-search__icon {
    position: relative;
    border: 2px solid var(--color-text-secondary);
    border-radius: 50%;
}

.discover-search__icon::after {
    position: absolute;
    background: var(--color-text-secondary);
    content: "";
    transform: rotate(45deg);
}

.discover-search input {
    position: absolute;
    border: 0;
    outline: 0;
    background: transparent;
}

.discover-search button {
    display: grid;
    place-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.discover-insight {
    display: grid;
    align-items: center;
}

.discover-insight__copy {
    min-width: 0;
}

.discover-insight h2,
.discover-insight p {
    display: inline;
}

.discover-insight > a {
    display: grid;
    place-items: center;
    text-decoration: none;
}

.discover-module {
    min-width: 0;
}

.journey-carousel {
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.journey-carousel::-webkit-scrollbar,
.discover-categories::-webkit-scrollbar {
    display: none;
}

.journey-card {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    scroll-snap-align: start;
}

.journey-card__heading,
.journey-card .atlas-status-line,
.journey-card__count,
.journey-card__goal,
.journey-card > small {
    position: relative;
    z-index: 2;
}

.journey-card__image {
    position: absolute;
    z-index: 1;
    object-fit: contain;
    pointer-events: none;
}

.journey-card__count {
    display: grid;
}

.journey-carousel__position {
    display: flex;
    justify-content: center;
}

.journey-carousel__position span {
    border-radius: 999px;
}

.goal-card,
.update-card {
    display: grid;
}

.goal-card__heading,
.goal-card__body,
.goal-card__summary,
.update-card__heading {
    display: flex;
}

.goal-card__heading,
.goal-card__body {
    justify-content: space-between;
}

.goal-card__heading h2,
.update-card__heading h2,
.discover-expand h2 {
    margin: 0;
    font-family: var(--font-family-display);
    font-weight: 500;
}

.goal-card__main {
    display: grid;
    min-width: 0;
}

.goal-card__summary {
    align-items: end;
    justify-content: space-between;
}

.goal-card__summary h3 {
    margin: 0;
}

.goal-card__percentage {
    color: var(--color-success);
    font-variant-numeric: tabular-nums;
}

.goal-card__percentage small {
    display: block;
    color: var(--color-text-secondary);
}

.goal-card__signals,
.update-metrics {
    display: grid;
    margin: 0;
}

.goal-card__signals div {
    position: relative;
    min-width: 0;
}

.goal-card__signals dd,
.update-metrics dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.goal-card__signals dt,
.update-metrics dt {
    color: var(--color-text-secondary);
}

.goal-card__saving {
    display: grid;
}

.goal-card__saving strong {
    color: var(--color-success);
    font-variant-numeric: tabular-nums;
}

.update-card__heading {
    align-items: center;
}

.update-card__mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
}

.update-card__heading p,
.update-card__message {
    margin: 0;
    color: var(--color-text-secondary);
}

.update-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.update-metrics > div {
    position: relative;
    display: grid;
    min-width: 0;
    justify-items: center;
    text-align: center;
}

.update-metrics__icon {
    position: relative;
    display: block;
}

.discover-categories {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

.discover-categories a {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    text-decoration: none;
}

.discover-activity {
    min-width: 0;
}