/* My Media II – front end. Inherits the theme's fonts and colours; no frameworks. */

:root {
	--mm-gap: 1rem;
	--mm-radius: 6px;
	--mm-line: rgba(127, 127, 127, .35);
	--mm-soft: rgba(127, 127, 127, .1);
	--mm-accent: #2563eb;
	--mm-danger: #b91c1c;
	--mm-ok: #15803d;
}

.mm-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* Grids and cards */
.mm-grid {
	--mm-cols: 4;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(9rem, calc((100% - (var(--mm-cols) - 1) * var(--mm-gap)) / var(--mm-cols)))), 1fr));
	gap: var(--mm-gap);
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}
.mm-grid--small { --mm-cols: 6; --mm-gap: .5rem; }
.mm-card { margin: 0; min-width: 0; }
.mm-card__link { display: block; color: inherit; text-decoration: none; border-radius: var(--mm-radius); }
.mm-card__link:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 2px; }
.mm-card__pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--mm-radius); background: var(--mm-soft); }
.mm-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-card__link:hover .mm-card__pic img { opacity: .9; }
.mm-card__title { display: block; margin-top: .35rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.mm-card__caption, .mm-card__meta { display: block; font-size: .875em; opacity: .8; margin-top: .15rem; }
.mm-badge {
	display: inline-block; font-size: .75rem; line-height: 1.4; padding: 0 .4em;
	border-radius: 3px; background: rgba(0, 0, 0, .7); color: #fff;
}
.mm-card__pic .mm-badge { position: absolute; left: .4rem; bottom: .4rem; }

/* Lists (audio, list view) */
.mm-list { list-style: none; margin: 1rem 0; padding: 0; }
.mm-row { padding: .75rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-row__title { font-size: 1em; margin: 0 0 .4rem; }
.mm-row audio, .mm-row video { width: 100%; }

/* Album and item pages */
.mm-meta { font-size: .9em; opacity: .85; }
.mm-back { margin: 0 0 .5rem; }
.mm-item__title { margin-top: 0; }
.mm-item__media { margin: 0 0 1rem; }
.mm-item__media img, .mm-photo { max-width: 100%; height: auto; display: block; }
.mm-item__media figcaption { margin-top: .4rem; font-size: .95em; }
.mm-video { width: 100%; max-height: 80vh; background: #000; }
.mm-audio { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.mm-audio audio { flex: 1 1 16rem; }
.mm-audio__cover { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--mm-radius); }
.mm-pdf { width: 100%; height: 80vh; border: 1px solid var(--mm-line); }
.mm-embed { position: relative; }
.mm-embed iframe { max-width: 100%; }
.mm-prevnext { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.mm-empty { padding: 1rem; background: var(--mm-soft); border-radius: var(--mm-radius); }

/* Tabs (album management) */
.mm-tabs ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; margin: 0 0 1rem; padding: 0; border-bottom: 1px solid var(--mm-line); }
.mm-tabs a { display: block; padding: .45rem .8rem; text-decoration: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--mm-radius) var(--mm-radius) 0 0; color: inherit; }
.mm-tabs a[aria-current="page"] { border-color: var(--mm-line); background: var(--mm-soft); font-weight: 600; }
.mm-tabs a:focus-visible { outline: 3px solid var(--mm-accent); }

/* Pages */
.mm-pages ul { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 1rem 0; }
.mm-pages a, .mm-pages span { display: inline-block; min-width: 2.25rem; padding: .3rem .6rem; text-align: center; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); text-decoration: none; }
.mm-pages [aria-current="page"] { font-weight: 700; background: var(--mm-soft); }

/* Notices */
.mm-notice { padding: .75rem 1rem; margin: 0 0 1rem; border-left: 4px solid var(--mm-ok); background: var(--mm-soft); border-radius: 0 var(--mm-radius) var(--mm-radius) 0; }
.mm-notice--error { border-left-color: var(--mm-danger); }
.mm-notice:focus { outline: 3px solid var(--mm-accent); outline-offset: 2px; }

/* Forms */
.mm-panel { padding: 1rem; margin: 0 0 1.25rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); }
.mm-panel > h3:first-child, .mm-panel > h3:first-of-type { margin-top: 0; }
.mm-field { margin: 0 0 .9rem; }
.mm-field label, .mm-choose legend { display: block; font-weight: 600; margin-bottom: .25rem; }
.mm-field input[type="text"], .mm-field input[type="url"], .mm-field textarea, .mm-field select { width: 100%; max-width: 40rem; box-sizing: border-box; }
.mm-field--inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mm-field--inline label { margin: 0; }
.mm-field--inline select { width: auto; }
.mm-help { display: block; font-size: .875em; opacity: .85; margin-top: .2rem; }
.mm-check { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 .75rem; }
.mm-check input { margin-top: .25em; }
.mm-button {
	display: inline-flex; align-items: center; gap: .3em;
	padding: .45rem .9rem; border: 1px solid currentColor; border-radius: var(--mm-radius);
	background: transparent; color: inherit; font: inherit; line-height: 1.3; cursor: pointer; text-decoration: none;
}
.mm-button:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 2px; }
.mm-button--primary { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; }
.mm-button--danger { border-color: var(--mm-danger); color: var(--mm-danger); }
.mm-button[disabled], .mm-button[aria-disabled="true"] { opacity: .5; cursor: default; }
.mm-danger { border-color: var(--mm-danger); }

/* Uploads */
.mm-upload__drop {
	display: block; padding: 1.5rem 1rem; text-align: center; cursor: pointer;
	border: 2px dashed var(--mm-line); border-radius: var(--mm-radius); margin-bottom: .5rem;
}
.mm-upload__drop.is-over, .mm-upload__drop:focus-within { border-color: var(--mm-accent); background: var(--mm-soft); }
.mm-upload__text { display: block; font-weight: 600; margin-bottom: .5rem; }
.mm-upload__progress { list-style: none; padding: 0; margin: .5rem 0 0; }
.mm-upload__progress li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .2rem 0; }
.mm-upload__progress progress { width: 10rem; }
.mm-upload__progress .is-error { color: var(--mm-danger); }
.mm-upload__progress .is-done .mm-upload__state { color: var(--mm-ok); }

/* Bulk edit */
.mm-bulk__bar { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding: .75rem; background: var(--mm-soft); border-radius: var(--mm-radius); margin-bottom: 1rem; }
.mm-bulk__bar > * { margin: 0; }
.mm-edit-list { list-style: none; margin: 0; padding: 0; }
.mm-edit-item { display: grid; grid-template-columns: auto 6rem 1fr; gap: .75rem; align-items: start; padding: .75rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-edit-item.is-hidden .mm-edit-item__pic img { opacity: .5; }
.mm-edit-item__pic img { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--mm-radius); display: block; }
.mm-edit-item__pic .mm-badge { margin-top: .25rem; }
.mm-edit-item__fields summary { cursor: pointer; font-weight: 600; }
.mm-edit-item__pick label { overflow-wrap: anywhere; }
@media (max-width: 600px) {
	.mm-edit-item { grid-template-columns: auto 1fr; }
	.mm-edit-item__fields { grid-column: 1 / -1; }
}
.mm-edit-pic img { max-width: 16rem; height: auto; border-radius: var(--mm-radius); }

/* Reorder */
.mm-order { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: mm; }
.mm-order__item { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .5rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); margin-bottom: .4rem; background: inherit; cursor: grab; }
.mm-order__item::before { counter-increment: mm; content: counter(mm); min-width: 1.5rem; font-weight: 700; opacity: .7; }
.mm-order__item.is-dragging { opacity: .5; }
.mm-order__pic img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 4px; display: block; }
.mm-order__name { flex: 1 1 10rem; overflow-wrap: anywhere; }
.mm-order__buttons { display: flex; gap: .4rem; }

/* Choosing a cover */
.mm-choose { border: 0; padding: 0; margin: 0 0 .75rem; }
.mm-choose__item { position: relative; }
.mm-choose__item input { position: absolute; top: .4rem; left: .4rem; z-index: 1; }
.mm-choose__item label { display: block; border: 3px solid transparent; border-radius: var(--mm-radius); cursor: pointer; }
.mm-choose__item input:checked + label { border-color: var(--mm-accent); }
.mm-choose__item input:focus-visible + label { outline: 3px solid var(--mm-accent); }
.mm-choose__item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }

/* Comments */
.mm-comments { margin-top: 2rem; }
.mm-comment-list { padding-left: 1.25rem; }
.mm-comments--bp .mm-comment-list { list-style: none; padding-left: 0; }
.mm-comments--bp .mm-comment-list--replies { padding-left: 1.5rem; border-left: 2px solid var(--mm-line); }
.mm-comment { padding: .5rem 0; }
.mm-comment__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mm-comment__head img { border-radius: 50%; }
.mm-comment__when { opacity: .75; font-size: .9em; }
.mm-comment__text p { margin: .25rem 0; }
.mm-comment__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; font-size: .95em; }
.mm-comment__reply summary { cursor: pointer; }
.mm-inline-form { display: inline; margin: 0; }
.mm-link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; font: inherit; cursor: pointer; }
.mm-share { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1rem; }
.mm-share p { margin: 0; flex: 1 1 100%; }
.mm-filter { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
.mm-filter p { margin: 0; }

/* BuddyPress: media in status updates */
.mm-act { margin: .5rem 0; }
.mm-act[hidden] { display: none; }
#whats-new-form:not(.activity-form-expanded) .mm-act { display: none; }
.mm-act__add { cursor: pointer; }
.mm-act__add:has(+ input:focus-visible) { outline: 3px solid var(--mm-accent); outline-offset: 2px; }
.mm-act__link { margin-top: .5rem; }
.mm-act__link summary { cursor: pointer; }
.mm-act__list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; }
.mm-act__item { position: relative; }
.mm-act__item img { width: 5rem; height: 5rem; object-fit: cover; border-radius: var(--mm-radius); display: block; }
.mm-act__item.is-uploading, .mm-act__item.is-error { display: flex; gap: .4rem; align-items: center; }
.mm-act__item.is-error { color: var(--mm-danger); }
.mm-act__remove, #buddypress .mm-act__remove { position: absolute; top: .2rem; right: .2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .7); color: #fff; cursor: pointer; line-height: 1; }
.mm-act__remove:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 1px; }
.mm-act__status:empty { display: none; }
.mm-act-media { margin: .5rem 0; }
.mm-act-media .mm-grid { --mm-cols: 3; }
.mm-act-player { margin: .5rem 0; }
.mm-act-player__title { margin: .25rem 0 0; }
.mm-act-more { margin: .25rem 0 0; }
/* BuddyPress Nouveau styles buttons by id (#buddypress button): keep ours. */
#buddypress .mm-act__remove { padding: 0; min-height: 0; font-size: 1rem; box-shadow: none; }
#buddypress .mm-button { padding: .5rem 1rem; border: 1px solid currentColor; border-radius: var(--mm-radius); background: transparent; color: inherit; font: inherit; line-height: 1.3; }
#buddypress .mm-button--primary { background: var(--mm-accent); border-color: var(--mm-accent); color: #fff; }
#buddypress .mm-link-button { background: none; border: 0; padding: 0; text-decoration: underline; }

/* Lightbox (native dialog) */
.mm-lb-open { overflow: hidden; }
.mm-lb {
	width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0;
	background: #0b0b0b; color: #f5f5f5;
	display: none; flex-direction: column;
}
.mm-lb[open] { display: flex; }
.mm-lb::backdrop { background: rgba(0, 0, 0, .8); }
.mm-lb__bar { display: flex; gap: 1rem; align-items: center; padding: .5rem 1rem; }
.mm-lb__title { flex: 1; font-size: 1rem; margin: 0; color: inherit; overflow-wrap: anywhere; }
.mm-lb__count { opacity: .8; font-size: .9rem; }
.mm-lb button { background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--mm-radius); font: inherit; cursor: pointer; }
.mm-lb button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.mm-lb__close { font-size: 1.5rem; line-height: 1; padding: .2rem .6rem; }
.mm-lb__body { flex: 1; min-height: 0; display: flex; align-items: center; gap: .5rem; padding: 0 .5rem; }
.mm-lb__stage { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.mm-lb__stage img, .mm-lb__stage video { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; }
.mm-lb__stage .mm-audio { max-width: 40rem; width: 100%; }
.mm-lb__stage .mm-embed { width: min(100%, 60rem); aspect-ratio: 16 / 9; }
.mm-lb__stage .mm-embed iframe { width: 100%; height: 100%; }
.mm-lb__stage .mm-pdf { height: calc(100vh - 10rem); }
.mm-lb__nav { font-size: 2rem; line-height: 1; padding: .5rem .75rem; }
.mm-lb__info { max-height: 30vh; overflow: auto; padding: .5rem 1rem 1rem; font-size: .95rem; }
.mm-lb__info a { color: #93c5fd; }
.mm-lb__info p { margin: .25rem 0; }
@media (max-width: 600px) {
	.mm-lb__nav { position: absolute; bottom: 30vh; z-index: 1; background: rgba(0, 0, 0, .5); }
	.mm-lb__prev { left: .25rem; }
	.mm-lb__next { right: .25rem; }
}
@media (prefers-reduced-motion: no-preference) {
	.mm-card__pic img { transition: opacity .15s; }
}
@media (forced-colors: active) {
	.mm-lb button, .mm-button { border: 1px solid ButtonText; }
}

/* Rights, approval, extensions */
.mm-credit { font-size: .9em; opacity: .85; margin: .25rem 0; }
.mm-fieldset { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: .25rem .75rem; margin: .75rem 0; }
.mm-fieldset legend { font-weight: 600; padding: 0 .25rem; }
.mm-badge--pending { background: #fef3c7; color: #78350f; }
.mm-pending { border-left: 4px solid #d97706; }
.mm-views, .mm-download-line { font-size: .9em; margin: .25rem 0; }
.mm-download__size { opacity: .75; }
.mm-likes { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: .5em 0; font-size: .9em; }
.mm-like { display: inline-flex; align-items: center; gap: .3em; padding: .3em .8em; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 1.3; }
.mm-like:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 2px; }
.mm-like.is-liked { background: #b32d2e; border-color: #b32d2e; color: #fff; }
.mm-like[aria-busy="true"] { opacity: .6; }
.mm-likes__who { opacity: .85; }
.mm-lb__info .mm-like { border-color: rgba(255, 255, 255, .6); }

/* Albums for posts */
.mm-pa-list { list-style: none; margin: .75rem 0; padding: 0; }
.mm-pa-card { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: .6rem; margin-bottom: .6rem; }
.mm-pa-card.is-pending { border-left: 4px solid #d97706; }
.mm-pa-card__head { display: flex; gap: .75rem; align-items: flex-start; }
.mm-pa-card__pic img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 4px; display: block; }
.mm-pa-card__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.mm-pa-card__title { overflow-wrap: anywhere; }
.mm-pa-card__meta { font-size: .9em; opacity: .85; }
.mm-pa-card__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.mm-pa-card__details summary { cursor: pointer; font-weight: 600; margin-top: .5rem; }
.mm-pa-front > summary { cursor: pointer; font-weight: 600; }
.mm-pa-intro { font-size: .95em; }
.mm-pa-settings label { font-weight: 600; margin-right: .5rem; }
#mpp-post-album .mm-button { font-size: 13px; padding: .3rem .7rem; }

/* Small helpers (phase 3) */
.mm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mm-choices { border: 0; padding: 0; margin: .5rem 0; }
.mm-choices legend { font-weight: 600; padding: 0; }
.mm-choice { display: block; margin: .15rem 0; }
.mm-table-wrap { overflow-x: auto; max-width: 100%; }
.mm-table-wrap:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 2px; }
.mm-table { border-collapse: collapse; width: 100%; }
.mm-table th, .mm-table td { text-align: left; vertical-align: top; padding: .4rem; border-bottom: 1px solid var(--mm-line); }
.mm-table img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 4px; float: left; margin-right: .5rem; }
.mm-filter { display: flex; flex-wrap: wrap; gap: .25rem 1rem; list-style: none; margin: .5rem 0; padding: 0; }
.mm-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mm-album-actions { margin: .5rem 0; }

/* Rating: stars to look at, and radio buttons to rate */
.mm-rating { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: .5em 0; font-size: .9em; }
.mm-stars { display: inline-block; line-height: 1; font-size: 1.1em; }
.mm-stars::before {
	content: "★★★★★"; letter-spacing: .1em;
	background: linear-gradient(90deg, #b45309 var(--mm-stars, 0%), rgba(127, 127, 127, .45) var(--mm-stars, 0%));
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.mm-rate { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: 0; }
.mm-rate__stars { position: relative; border: 0; margin: 0; padding: 0; display: inline-flex; }
.mm-rate__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mm-rate__star { cursor: pointer; font-size: 1.4em; line-height: 1; padding: 0 .05em; color: #b45309; min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.mm-rate__star::before { content: "☆"; }
.mm-rate__stars:has(.mm-rate__radio:checked) .mm-rate__star::before { content: "★"; }
.mm-rate__radio:checked + .mm-rate__star ~ .mm-rate__star::before { content: "☆"; }
.mm-rate__stars:hover .mm-rate__star::before { content: "★"; }
.mm-rate__stars .mm-rate__star:hover ~ .mm-rate__star::before { content: "☆"; }
.mm-rate__radio:focus-visible + .mm-rate__star { outline: 3px solid var(--mm-accent); outline-offset: 1px; border-radius: 2px; }
.mm-rating__mine { opacity: .85; }

/* Featured */
.mm-feature__button[aria-pressed="true"] { border-color: #b45309; }
.mm-badge--featured { background: #92400e; }
.mm-strip { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: .5rem 0; padding: 0; }
.mm-strip img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: 4px; display: block; }
.mm-strip a:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 2px; display: block; border-radius: 4px; }

/* Ranked lists (top rated, contest results) */
.mm-ranked { margin: .75rem 0; padding-left: 1.75rem; }
.mm-ranked__item { margin: 0 0 .6rem; }
.mm-ranked__link { display: inline-flex; align-items: center; gap: .5rem; color: inherit; }
.mm-ranked__link img { width: 3rem; height: 3rem; object-fit: cover; border-radius: 4px; }
.mm-ranked__title { font-weight: 600; overflow-wrap: anywhere; }
.mm-ranked__by, .mm-ranked .mm-rating__summary { font-size: .9em; opacity: .85; }

/* Contests */
.mm-contest { border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 1rem; margin: 0 0 1.25rem; }
.mm-contest__heading { margin-top: 0; }
.mm-contest__status { font-weight: 600; }
.mm-contest__rules { margin: .5rem 0 1rem; }
.mm-contest__enter > summary, .mm-contest__manage > summary, .mm-contest-settings-box > summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }
.mm-contest__terms { border-left: 4px solid var(--mm-line); padding: .25rem .75rem; margin: .5rem 0; max-height: 16rem; overflow: auto; }
.mm-contest__answers { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; font-size: .9em; margin: .5rem 0; }
.mm-contest__answers dt { font-weight: 600; }
.mm-contest__answers dd { margin: 0; }
.mm-contest__note { font-style: italic; }
.mm-badge--contest { background: #1e3a8a; }
.mm-contest-list { list-style: none; margin: .75rem 0; padding: 0; }
.mm-contest-card { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 .75rem; }
.mm-contest-card a { display: inline-flex; align-items: center; gap: .6rem; color: inherit; }
.mm-contest-card img { width: 4rem; height: 4rem; object-fit: cover; border-radius: 4px; }
.mm-contest-card__title { font-weight: 600; }
.mm-contest-card__status { font-size: .9em; opacity: .85; }
.mm-cs-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .25rem 1rem; }
.mm-vote { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin: .5em 0; font-size: .9em; }
.mm-vote__heart { border-radius: 999px; }
.mm-vote__heart[aria-pressed="true"] { background: #b32d2e; border-color: #b32d2e; color: #fff; }
.mm-vote__stars { display: inline-flex; }
.mm-vote__star { background: transparent; border: 0; padding: 0 .1em; font: inherit; font-size: 1.4em; line-height: 1; color: #b45309; cursor: pointer; min-width: 24px; min-height: 24px; }
.mm-vote__star:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 1px; border-radius: 2px; }
.mm-vote__star[disabled], .mm-vote__heart[disabled] { cursor: default; opacity: .7; }
.mm-vote__score { opacity: .85; }
.mm-vote__form[aria-busy="true"] { opacity: .6; }
.mm-place { display: inline-block; font-size: .8rem; font-weight: 700; padding: .05em .5em; border-radius: 999px; background: #e5e7eb; color: #111; }
.mm-place--1 { background: #fde68a; }
.mm-place--2 { background: #e5e7eb; }
.mm-place--3 { background: #fed7aa; }
.mm-lb__info .mm-vote__star, .mm-lb__info .mm-rate__star, .mm-lb__info .mm-stars { color: #fbbf24; }

@media (forced-colors: active) {
	.mm-stars::before { color: CanvasText; background: none; }
	.mm-vote__heart[aria-pressed="true"], .mm-feature__button[aria-pressed="true"] { border: 2px solid Highlight; }
}

/* Picture displays: slideshows, collections, search (phase 4). */
.mppd-gallery a:focus-visible,.mppd-album a:focus-visible,.mppd-pages a:focus-visible,.mppd-tagcloud a:focus-visible,.mppd-browser a:focus-visible,.mppd-single a:focus-visible,
.mppd-slideshow .mppd-stage > button:focus-visible{outline:3px solid currentColor;outline-offset:2px;box-shadow:0 0 0 5px rgba(255,255,255,.9)}
.mppd-gallery{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none}
.mppd-gallery .mppd-item{margin:0;padding:0;width:var(--mppd-w,240px);max-width:100%}
.mppd-gallery figure{margin:0}
.mppd-gallery .mppd-item a{display:block;line-height:0;overflow:hidden;border-radius:3px}
.mppd-gallery img{width:100%;height:auto;display:block;transition:transform .25s ease}
.mppd-gallery a:hover img,.mppd-gallery a:focus-visible img{transform:scale(1.03)}
.mppd-gallery figcaption{font-size:.875em;line-height:1.4;padding:.3em 0}
.mppd-gallery.mppd-cols{display:grid;grid-template-columns:repeat(var(--mppd-cols),minmax(0,1fr))}
.mppd-gallery.mppd-cols .mppd-item{width:auto}
.mppd-gallery.mppd-masonry{display:block;columns:var(--mppd-w,240px);column-gap:8px}
.mppd-gallery.mppd-masonry .mppd-item{width:auto;break-inside:avoid;margin-bottom:8px}
.mppd-gallery.mppd-blog{display:block}
.mppd-gallery.mppd-blog .mppd-item{width:auto;margin-bottom:1.5em}
.mppd-gallery.mppd-widget{gap:4px}
@media (max-width:600px){.mppd-gallery.mppd-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.mppd-gallery .mppd-item{width:calc(50% - 4px)}.mppd-gallery.mppd-cols .mppd-item,.mppd-gallery.mppd-masonry .mppd-item,.mppd-gallery.mppd-blog .mppd-item{width:auto}}

.mppd-pages{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 1.5em}
.mppd-pages a,.mppd-pages span{min-width:2.75em;min-height:2.75em;display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:3px;text-decoration:none;box-sizing:border-box}
.mppd-pages span{border-color:transparent}
.mppd-pages .mppd-current{font-weight:700;text-decoration:underline;text-underline-offset:3px}

.mppd-single{margin:0 0 1em;max-width:100%}
.mppd-single img{max-width:100%;height:auto}
.mppd-float-left{float:left;margin-right:1em}
.mppd-float-right{float:right;margin-left:1em}
.mppd-float-center{margin-left:auto;margin-right:auto;text-align:center}

.mppd-slideshow{margin:0 0 1em}
.mppd-stage{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#111;border-radius:3px}
.mppd-slides,.mppd-slideshow figure{position:absolute;inset:0;margin:0}
.mppd-slideshow figure{opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s .8s}
.mppd-slideshow figure.mppd-on{opacity:1;visibility:visible;transition:opacity .8s ease}
.mppd-tr-slide figure{opacity:1;transform:translateX(100%);transition:transform .5s ease,visibility 0s .5s}
.mppd-tr-slide figure.mppd-left{transform:translateX(-100%)}
.mppd-tr-slide figure.mppd-on{transform:none;transition:transform .5s ease}
.mppd-slideshow figure.mppd-notr{transition:none!important}
.mppd-slideshow img{width:100%;height:100%;object-fit:contain}
.mppd-slideshow figcaption{position:absolute;left:0;right:0;bottom:0;padding:.6em 4.5em .6em 1em;color:#fff;background:rgba(0,0,0,.75);font-size:.9em}
.mppd-slideshow .mppd-stage > button{position:absolute;background:rgba(0,0,0,.7);color:#fff;border:2px solid rgba(255,255,255,.8);font-size:1.75rem;line-height:1;width:44px;height:44px;cursor:pointer;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center}
.mppd-slideshow .mppd-prev,.mppd-slideshow .mppd-next{top:50%;transform:translateY(-50%)}
.mppd-slideshow .mppd-prev{left:8px}.mppd-slideshow .mppd-next{right:8px}
.mppd-slideshow .mppd-pause{right:8px;bottom:8px;font-size:.9rem}
.mppd-filmstrip figcaption{padding-right:1em}

.mppd-picker{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px}
.mppd-picker button{flex:0 0 auto;cursor:pointer;scroll-snap-align:center}
.mppd-picker-dots{justify-content:center;flex-wrap:wrap;overflow:visible}
.mppd-picker-dots button{width:24px;height:24px;border-radius:50%;border:2px solid currentColor;background:transparent;padding:0;opacity:.6}
.mppd-picker-dots button[aria-current]{background:currentColor;opacity:1}
.mppd-picker-thumbs button{padding:0;border:3px solid transparent;border-radius:3px;background:none;line-height:0;opacity:.7}
.mppd-picker-thumbs button[aria-current]{border-color:currentColor;opacity:1}
.mppd-picker-thumbs img{width:88px;height:60px;object-fit:cover;display:block}
.mppd-picker button:focus-visible{outline:3px solid currentColor;outline-offset:2px}

.mppd-browser{margin:0 0 1em;text-align:center}
.mppd-browser img{max-width:100%;height:auto}
.mppd-browser-nav{display:flex;justify-content:space-between;align-items:center;margin:.5em 0;gap:1em}
.mppd-browser-desc{text-align:left}

.mppd-album{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:0 0 1em}
.mppd-album-item{display:flex;flex-direction:column;gap:.35em}
.mppd-album-thumb{display:block;line-height:0;overflow:hidden;border-radius:3px;aspect-ratio:3/2;background:rgba(128,128,128,.15)}
.mppd-album-thumb img{width:100%;height:100%;object-fit:cover}
.mppd-album-title{font-weight:600}
.mppd-album-count{display:block;font-size:.875em}
.mppd-album-extended{grid-template-columns:1fr}
.mppd-album-extended .mppd-album-item{flex-direction:row;gap:1em;align-items:flex-start}
.mppd-album-extended .mppd-album-thumb{flex:0 0 200px}
.mppd-album-extended .mppd-album-text{flex:1}
@media (max-width:600px){.mppd-album-extended .mppd-album-item{flex-direction:column}.mppd-album-extended .mppd-album-thumb{flex:none;width:100%}}
.mppd-back{margin:0 0 .5em}

.mppd-tagcloud{list-style:none;margin:0 0 1em;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.25em .75em;line-height:1.5}

@media (prefers-reduced-motion:reduce){.mppd-slideshow figure,.mppd-slideshow figure.mppd-on,.mppd-tr-slide figure,.mppd-gallery img{transition:none}.mppd-gallery a:hover img{transform:none}}
.mppd-album-date{display:block;font-size:.875em}
.mppd-search{margin:0 0 1.25em}
.mppd-search label{font-weight:600}
.mppd-search-row{display:flex;gap:6px;margin:.25em 0 .5em;flex-wrap:wrap}
.mppd-search-row input{flex:1 1 16em;min-height:44px;padding:0 .6em;font-size:1em}
.mppd-search-row button{min-height:44px;padding:0 1.2em;cursor:pointer}
.mppd-search-mode{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25em 1em}
.mppd-search-mode legend{padding:0;font-weight:600;margin-bottom:.15em;width:100%}
.mppd-search-mode label{font-weight:normal}
.mppd-search-hint{font-size:.875em;margin:.4em 0 0}
.mppd-search-title:focus{outline:none}
.mppd-search-title:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.mppd-gallery-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mppd-gallery-list a{display:block;text-decoration:none}
.mppd-gallery-list img{display:block;width:100%;height:auto;border-radius:3px;margin-bottom:.25em}
.mppd-gallery-list-title{display:block}
dl.mppd-exif{display:flex;flex-wrap:wrap;gap:.25em 1.25em;font-size:.875em;margin:.75em 0 0;text-align:left}
dl.mppd-exif dt{font-weight:600}
dl.mppd-exif dd{margin:0}
.mppd-exif-line{font-size:.875em;margin:.25em 0 0}
.mppd-missing{border-left:4px solid #dba617;padding:.25em .75em}
@media (forced-colors:active){.mppd-picker button[aria-current]{outline:3px solid Highlight}.mppd-slideshow .mppd-stage > button{border:2px solid ButtonText}}
.mppd-slideshow figure:not(.mppd-on) figcaption{visibility:hidden}

/* Upload details (asked before files are sent). */
.mm .mm-ud { margin: 1rem 0; }
.mm .mm-ud h3 { margin: 0 0 .25rem; }
.mm .mm-ud__file { border: 1px solid currentColor; border-color: rgba(127,127,127,.45); border-radius: 6px; padding: .5rem 1rem; margin: 0 0 1rem; min-width: 0; }
.mm .mm-ud__file legend { font-weight: 600; padding: 0 .25rem; overflow-wrap: anywhere; }
.mm .mm-ud input[type="text"], .mm .mm-ud textarea { width: 100%; max-width: 40rem; box-sizing: border-box; }
.mm .mm-ud__name { display: flex; align-items: center; gap: .25rem; max-width: 40rem; }
.mm .mm-ud__name input { flex: 1 1 auto; min-width: 0; }
.mm .mm-ud .mm-help { display: block; }

/* Audio covers: shape (square, wide, as uploaded) and position. */
.mm-audio--top, .mm-audio--bottom { flex-direction: column; align-items: stretch; }
.mm-audio--top .mm-audio__cover, .mm-audio--bottom .mm-audio__cover { width: 100%; max-width: 24rem; height: auto; align-self: center; }
.mm-audio--bottom .mm-audio__cover { order: 2; }
.mm-audio--right .mm-audio__cover { order: 2; }
.mm-audio--left .mm-audio__cover, .mm-audio--right .mm-audio__cover { width: 10rem; height: auto; }
.mm-audio--square .mm-audio__cover { aspect-ratio: 1 / 1; object-fit: cover; }
.mm-audio--wide .mm-audio__cover { aspect-ratio: 16 / 9; object-fit: cover; }
.mm-audio--original .mm-audio__cover { object-fit: contain; }
.mm-audio--wide.mm-audio--left .mm-audio__cover, .mm-audio--wide.mm-audio--right .mm-audio__cover { width: 16rem; }
@media (max-width: 36em) {
	.mm-audio--left, .mm-audio--right { flex-direction: column; align-items: stretch; }
	.mm-audio--left .mm-audio__cover, .mm-audio--right .mm-audio__cover { order: 0; width: 100%; max-width: 24rem; align-self: center; }
}
.mm-audio audio { width: 100%; }

/* Cover picker. */
.mm-cover-pick { margin: 1rem 0; }
.mm-cover-pick > summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.mm-cover-pick > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.mm-cover-pick .mm-pager { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }

/* Document preview (Google viewer, when switched on). */
.mm-docview { display: block; width: 100%; height: 80vh; border: 1px solid var(--mm-line); }
.mm-lb__stage .mm-docview { height: calc(100vh - 10rem); }

/* Playlists. */
.mm-playlist { margin: 1rem 0; }
.mm-playlist__stage { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.mm-playlist__art { width: 10rem; height: 10rem; object-fit: cover; border-radius: var(--mm-radius); flex: 0 0 auto; }
.mm-playlist__player { flex: 1 1 18rem; min-width: 0; }
.mm-playlist--video .mm-playlist__player { flex-basis: 100%; }
.mm-playlist__player audio, .mm-playlist__player video { width: 100%; }
.mm-playlist__now { margin: 0 0 .5rem; }
.mm-playlist__label { font-weight: 600; margin-right: .25em; }
.mm-playlist__tracks { margin: 1rem 0 0; padding: 0 0 0 2rem; }
.mm-playlist__track { padding: .35rem 0; border-bottom: 1px solid var(--mm-line); overflow-wrap: anywhere; }
.mm-playlist__track a { margin-right: .5rem; }
.mm-playlist__track a[aria-current="true"] { font-weight: 700; }
.mm-playlist__track a[aria-current="true"]::before { content: "\25B6\FE0E\00A0"; content: "\25B6\FE0E\00A0" / ""; } /* aria-current already says which is playing. */
.mm-playlist__len, .mm-playlist__note { font-size: .9em; font-variant-numeric: tabular-nums; }

/* An album cover that opens the lightbox carries a small "enlarge" mark. */
.mm-card__cover .mm-card__pic::after { content: "\2922"; content: "\2922" / ""; position: absolute; right: .4rem; top: .4rem; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: 1rem; }
.mm-card__cover[aria-busy="true"] .mm-card__pic { opacity: .6; }

/* Lightbox: messages, edit details, comments. */
.mm-lb__msg { padding: .5rem .75rem; border-left: 4px solid var(--mm-accent); background: var(--mm-soft); }
.mm-lb__msg--error { border-left-color: #b32d2e; }
.mm-lb__msg:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.mm-lb__edit { margin: 1rem 0; }
.mm-lb__edit > summary { cursor: pointer; font-weight: 600; }
.mm-lb__comments { margin-top: 1rem; }
.mm-lb__comments h3 { font-size: 1rem; }
.mm-lb__comments .mm-comment-list { padding-left: 1.25rem; }
.mm-lb__comments textarea { width: 100%; box-sizing: border-box; }
.mm-lb__info:has(.mm-lb__edit[open]), .mm-lb__info:has(.mm-comment-form :focus) { max-height: 60vh; }
.mm-lb__msg { color: inherit; background: rgba(255,255,255,.08); }
.mm-lb__info input[type="text"], .mm-lb__info textarea, .mm-lb__info select { color: #111; background: #fff; }
.mm-button--small { font-size: .85em; padding: .2rem .6rem; }
.mm-edit-item__cover { margin: .25rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ---- Step uploader (2.0.0-alpha.13) ------------------------------------ */
.mm-st { padding: 1rem; margin: 0 0 1.25rem; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); }
.mm-st__head h3 { margin: 0 0 .5rem; }
.mm-st__head h3:focus { outline: none; }
.mm-st__steps { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 .75rem; padding: 0; list-style: none; counter-reset: mmst; font-size: .9em; }
.mm-st__steps li { counter-increment: mmst; opacity: .7; }
.mm-st__steps li::before { content: counter(mmst) ". "; }
.mm-st__steps li[aria-current] { opacity: 1; font-weight: 700; }
.mm-st__strip { display: flex; gap: .5rem; overflow-x: auto; margin: 0 0 .5rem; padding: 0 0 .35rem; list-style: none; }
.mm-st__file { flex: 0 0 6.5rem; font-size: .8em; }
.mm-st__pick { display: block; width: 100%; padding: 0; color: inherit; text-align: left; background: none; border: 2px solid transparent; border-radius: var(--mm-radius); cursor: pointer; }
.mm-st__pick:focus-visible { outline: 3px solid var(--mm-accent); outline-offset: 1px; }
.mm-st__file.is-current .mm-st__pick { border-color: var(--mm-accent); }
.mm-st__pick img, .mm-st__icon { display: grid; place-items: center; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--mm-soft); border-radius: calc(var(--mm-radius) - 2px); font-weight: 700; }
.mm-st__name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: .15rem; }
.mm-st__file progress { width: 100%; height: .4rem; }
.mm-st__state { display: block; opacity: .8; }
.mm-st__file.is-error .mm-st__state, .mm-st__file.is-missing .mm-st__state, .mm-st__problem { color: var(--mm-danger); }
.mm-st__file.is-held .mm-st__state, .mm-st__file.is-sent .mm-st__state { color: var(--mm-ok); }
.mm-st__more { margin: 0 0 1rem; }
.mm-st__more label { cursor: pointer; }
.mm-st__more label:focus-within { outline: 3px solid var(--mm-accent); outline-offset: 2px; }
.mm-st__item { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 640px) { .mm-st__item { grid-template-columns: 1fr; } .mm-st__file { flex-basis: 5rem; } }
.mm-st__preview { margin: 0; }
.mm-st__preview img { display: block; width: 100%; max-height: 50vh; object-fit: contain; background: var(--mm-soft); border-radius: var(--mm-radius); }
.mm-st__preview figcaption { margin-top: .25rem; font-size: .85em; opacity: .8; word-break: break-all; }
.mm-st__icon--big { font-size: 1.5rem; }
.mm-st .mm-field input[type="text"], .mm-st .mm-field select, .mm-st .mm-field textarea { width: 100%; box-sizing: border-box; }
.mm-st__field--geo input { width: auto !important; min-width: 14rem; }
.mm-st__err:empty { display: none; }
.mm-st__err { display: block; color: var(--mm-danger); font-weight: 600; font-size: .9em; }
.mm-st [aria-invalid="true"] { border-color: var(--mm-danger); box-shadow: 0 0 0 1px var(--mm-danger); }
.mm-st__own { padding: .75rem; margin-top: .5rem; background: var(--mm-soft); border-radius: var(--mm-radius); }
.mm-st__nav { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.mm-st__nav .mm-button--primary { margin-left: auto; }
.mm-st__summary { padding: .75rem; margin: 0 0 1rem; background: var(--mm-soft); border-radius: var(--mm-radius); }
.mm-st__summary h4 { margin: 0 0 .4rem; }
.mm-st__summary dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: 0 0 .5rem; }
.mm-st__summary dt { font-weight: 600; }
.mm-st__summary dd { margin: 0; }
.mm-st__list { margin: 0; padding: 0; list-style: none; }
.mm-st__row { display: grid; grid-template-columns: 4rem 1fr auto; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-st__row img, .mm-st__row .mm-st__icon { width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--mm-radius); }
.mm-st__row strong { display: block; }
.mm-st__row.has-problem { box-shadow: inset 4px 0 0 var(--mm-danger); padding-left: .5rem; }
.mm-st__problem { display: block; font-weight: 600; font-size: .9em; }
.mm-st__approval { padding: .6rem .8rem; margin: 1rem 0 0; border-left: 4px solid var(--mm-accent); background: var(--mm-soft); }
.mm-st__sending { font-weight: 600; }
.mm-st progress[data-st-bar] { width: 100%; }
.mm-st-resume { margin-bottom: 1rem; }
.mm-st-resume p { margin: .25rem 0; }