/* Progress sharing with an independent image theme and optional medals. */
.progress-share {
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(26rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    overflow: hidden auto;
    display: none;
    flex-direction: column;
    gap: .75rem;
    padding: 0;
    background: transparent;
    color: var(--text);
    border: 0;
}

.progress-share[open] {
    display: flex;
}

/* Opaque, so a screenshot of the screen shows only the card. */
.progress-share::backdrop {
    background: var(--bg);
}

.progress-share__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.progress-share__actions .btn {
    flex: 1 1 7rem;
    width: auto;
}

.progress-share__options {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .5rem .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.progress-share__option {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    cursor: pointer;
}

.progress-share__hint {
    font-size: .8rem;
    color: var(--text-muted);
}

/* Square and without a border: the exported image ends at the card's edge,
   so rounded corners would leave the background showing in them. */
.progress-share__card {
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 0;
    color-scheme: dark;
    color: var(--text);
    background: var(--surface);
    padding: 1rem;
    gap: 1rem;
}

/* Only the image changes theme; preview controls keep the page appearance. */
.progress-share__card--light {
    color-scheme: light;
    --surface: var(--share-bg);
    --surface-2: var(--share-surface);
    --text: var(--share-text);
    --text-muted: var(--share-muted);
    --border: var(--share-border);
}

/* The card's rows and medals come from the Simple view (progress-overview.css). */
.progress-share__card {
    min-width: 0;
}

.progress-share__card .progress-medal__tier {
    color: var(--text);
}

.progress-share__card .progress-medal__delta {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* On the light image the coloured changes are darkened, so they read on white. */
.progress-share__card--light .progress-simple__delta {
    color: color-mix(in srgb, var(--metric-color) 70%, var(--text));
}

.progress-share__card--light.progress-simple--delta-green .progress-simple__delta,
.progress-share__card--light .progress-simple__medals--delta-green .progress-medal__delta {
    color: color-mix(in srgb, var(--green) 70%, var(--text));
}

.progress-share__card--light .progress-simple__medals--delta-own .progress-medal__delta {
    color: color-mix(in srgb, var(--tier-text, var(--text-muted)) 70%, var(--text));
}

.progress-share__card--light.progress-simple--delta-neutral .progress-simple__delta {
    color: var(--text);
}