/* media-app/assets/css/style.css — hand-written, no framework */

:root {
    --mc-bg: #fbf8f3;
    --mc-surface: #ffffff;
    --mc-surface-alt: #f2ede3;
    --mc-border: #ece4d6;
    --mc-text: #2b2622;
    --mc-text-dim: #8a8074;
    --mc-accent: #0fa3ad;
    --mc-accent-hover: #0c8891;
    --mc-warm: #f2994a;
    --mc-warm-hover: #e08324;
    /* The app's own chrome (edit bar, preview strip). A branded share page overrides --mc-warm with the
       rep's accent; these never change, so the chrome looks the same on every page. */
    --mc-chrome: #2b2622;
    --mc-chrome-accent: #f2994a;
    --mc-chrome-accent-hover: #e08324;
    --mc-danger: #e0555f;
    --mc-success: #2f9e63;
    --mc-radius: 14px;
    --mc-gap: 16px;
    --mc-shadow: 0 4px 16px rgba(60, 45, 20, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--mc-bg);
    color: var(--mc-text);
    line-height: 1.5;
}

a { color: var(--mc-accent); text-decoration: none; }
a:hover { color: var(--mc-accent-hover); }

h1 { font-size: 1.6rem; margin: 0.4em 0; }
h2 { font-size: 1.15rem; margin: 1.2em 0 0.6em; }

/* ---------- Topbars ---------- */
.admin-topbar, .public-topbar {
    display: flex;
    align-items: center;
    gap: var(--mc-gap);
    padding: 14px 20px;
    background: var(--mc-surface);
    box-shadow: var(--mc-shadow);
    position: sticky;
    top: 0;
    z-index: 10;
}
.admin-brand, .public-brand { font-weight: 700; font-size: 1.15rem; color: var(--mc-accent); }
.admin-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--mc-text); font-size: 1.05rem; }
.admin-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .admin-topbar { padding: 10px 14px; } }

/* ---------- Site menu (includes/nav_menu.php, assets/js/nav-menu.js) ----------
   One "Menu" button on every signed-in page; a sheet from the right (full width on a phone) with big rows. */
.nav-menu-btn {
    margin-left: auto; flex: none;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 16px 0 12px;
    border: 1px solid var(--mc-border); border-radius: 999px;
    background: var(--mc-surface); color: var(--mc-text);
    font: inherit; font-weight: 600; font-size: 0.98rem; cursor: pointer;
}
button.nav-menu-btn:hover, .nav-menu-btn[aria-expanded="true"] { background: var(--mc-surface); border-color: var(--mc-accent); color: var(--mc-accent); }
button.nav-menu-close:hover { background: var(--mc-border); }
.nav-menu-btn:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.nav-menu { position: fixed; inset: 0; z-index: 9500; } /* above the upload bar (.iu-bar, 9000), under the recorder */
.nav-menu[hidden] { display: none; }
html.nav-menu-open, html.nav-menu-open body { overflow: hidden; }
.nav-menu-backdrop { position: absolute; inset: 0; background: rgba(30, 24, 18, 0.45); touch-action: none; }
.nav-menu-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(380px, 100%); overflow-y: auto; overscroll-behavior: contain;
    background: var(--mc-bg); box-shadow: -8px 0 30px rgba(0, 0, 0, 0.18);
    padding: 0 12px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: nav-menu-in .18s ease-out;
}
@keyframes nav-menu-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nav-menu-panel { animation: none; } }
.nav-menu-head {
    position: sticky; top: 0; z-index: 1; background: var(--mc-bg);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 4px 10px 8px;
}
.nav-menu-who { color: var(--mc-text-dim); font-size: 0.92rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-menu-who strong { color: var(--mc-text); }
.nav-menu-close {
    flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--mc-surface-alt); color: var(--mc-text); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.nav-menu-group {
    background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius);
    margin-bottom: 12px; overflow: hidden;
}
.nav-menu-title {
    padding: 10px 16px 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--mc-text-dim);
}
.nav-menu-item {
    display: flex; align-items: center; gap: 14px;
    min-height: 56px; padding: 8px 16px; color: var(--mc-text);
}
.nav-menu-item + .nav-menu-item { border-top: 1px solid var(--mc-border); }
.nav-menu-item:hover, .nav-menu-item:focus-visible { background: var(--mc-surface-alt); color: var(--mc-text); outline: none; }
.nav-menu-item[aria-current="page"] { background: rgba(15, 163, 173, 0.08); box-shadow: inset 4px 0 0 var(--mc-accent); }
.nav-menu-item[aria-current="page"] .nav-menu-label { color: var(--mc-accent); }
.nav-menu-ic { flex: none; width: 28px; text-align: center; font-size: 1.3rem; line-height: 1; }
.nav-menu-text { display: flex; flex-direction: column; min-width: 0; }
.nav-menu-label { font-weight: 600; font-size: 1.02rem; }
.nav-menu-sub { font-size: 0.85rem; color: var(--mc-text-dim); line-height: 1.3; }
.nav-menu-foot .nav-menu-label { color: var(--mc-danger); }
@media (max-width: 480px) {
    .nav-menu-btn { min-height: 40px; padding: 0 12px 0 10px; }
}
/* Plain view on album pages is what a customer sees over your shoulder: just the three-line icon, no word. */
.public:not(.editing) .nav-menu-btn, .public:not(.editing) button.nav-menu-btn:hover { padding: 0; width: 44px; justify-content: center; border-color: transparent; background: transparent; }
.public:not(.editing) .nav-menu-btn span { display: none; }

.admin-main, .public-main { padding: 20px; max-width: 1100px; margin: 0 auto; }

.breadcrumbs { font-size: 0.9rem; color: var(--mc-text-dim); margin-bottom: 6px; }
.breadcrumbs a { color: var(--mc-text-dim); }
.node-description { color: var(--mc-text-dim); }

/* ---------- Forms ---------- */
.admin-form-card {
    background: var(--mc-surface);
    box-shadow: var(--mc-shadow);
    border-radius: var(--mc-radius);
    padding: 18px;
    margin-bottom: var(--mc-gap);
}
.admin-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.admin-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--mc-text-dim); }
.admin-form input[type="text"],
.admin-form input[type="password"],
.admin-form input[type="date"],
.admin-form input[type="email"],
.admin-form input[type="tel"],
.admin-form input[type="search"],
.admin-form textarea {
    background: var(--mc-surface-alt);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--mc-text);
    font-size: 1rem;
}
.checkbox-label { flex-direction: row !important; align-items: center; gap: 8px !important; }

button, .btn-primary {
    background: var(--mc-warm);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    min-height: 40px;
}
button:hover, .btn-primary:hover { background: var(--mc-warm-hover); }
.btn-move { background: var(--mc-surface-alt); color: var(--mc-text); padding: 6px 10px; min-height: 34px; }
.btn-toggle-active { background: var(--mc-surface-alt); color: var(--mc-text); }
.btn-delete-media { background: var(--mc-danger); }

/* ---------- Hierarchy list (admin CRUD) ---------- */
.hierarchy-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hierarchy-list li {
    background: var(--mc-surface);
    box-shadow: var(--mc-shadow);
    border-radius: var(--mc-radius);
    padding: 12px 16px;
}
.hierarchy-list li.inactive { opacity: 0.55; }
.hierarchy-row { display: flex; align-items: flex-start; gap: 14px; }
.reorder-buttons { display: flex; flex-direction: column; gap: 4px; }
.hierarchy-info { flex: 1; }
.hierarchy-info p { margin: 4px 0; color: var(--mc-text-dim); font-size: 0.9rem; }
.hierarchy-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.media-link { font-size: 0.85rem; }
.badge { display: inline-block; background: var(--mc-surface-alt); color: var(--mc-text-dim); font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; }

details summary { cursor: pointer; color: var(--mc-accent); font-size: 0.9rem; }
details .admin-form { margin-top: 10px; }

/* ---------- Summary tiles ---------- */
.admin-summary { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: var(--mc-gap); }
.summary-tile { background: var(--mc-surface); box-shadow: var(--mc-shadow); border-radius: var(--mc-radius); padding: 14px; display: flex; flex-direction: column; align-items: center; }
.summary-count { font-size: 1.8rem; font-weight: 700; color: var(--mc-accent); }
.summary-label { color: var(--mc-text-dim); font-size: 0.85rem; }

/* ---------- Page toolbar (New Album / Import ZIP) ---------- */
.page-toolbar { display: flex; gap: 10px; margin-top: var(--mc-gap); }
.page-toolbar button, .page-toolbar a.btn-primary { width: auto; }

/* Edit-mode: management icons, the New Album/Import ZIP toolbar, and the
   upload form are hidden by default to keep the main browsing view clean,
   revealed by the #edit-fab toggle (assets/js/manage.js sets body.editing).
   Scoped to .public so this never affects /admin pages, which have no
   edit-mode concept and always show their controls. */
.public .page-toolbar,
.public .tile-manage-actions,
.public .media-tile-actions,
.public #upload-media-section {
    display: none;
}
.public.editing .page-toolbar { display: flex; }
.public.editing .tile-manage-actions { display: flex; }
.public.editing .media-tile-actions { display: flex; }
.public.editing #upload-media-section { display: block; }

/* ---------- Browse grid (public drill-down) ---------- */
.browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--mc-gap);
    margin-top: var(--mc-gap);
}
.browse-tile-wrap { display: flex; flex-direction: column; }
.tile-manage-actions { gap: 4px; margin-top: 6px; justify-content: center; flex-wrap: wrap; }
.btn-manage {
    background: var(--mc-surface-alt); color: var(--mc-text);
    padding: 4px 8px; min-height: 30px; font-size: 0.85rem; border-radius: 6px;
}
.btn-manage-danger { background: var(--mc-danger); color: #fff; }
body.selecting .tile-manage-actions, body.selecting .media-tile-actions { display: none; }
.browse-tile {
    background: var(--mc-surface);
    box-shadow: var(--mc-shadow);
    border-radius: var(--mc-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: var(--mc-text);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.browse-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(60, 45, 20, 0.14); }
.browse-tile-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--mc-surface-alt); }
.browse-tile-placeholder {
    width: 100%; aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; background: linear-gradient(135deg, #e8f6f7, #fdf1e3); color: var(--mc-accent);
}
.browse-tile-name { padding: 12px 14px; font-size: 1.02rem; font-weight: 600; text-align: center; }

/* ---------- Media grid: admin (fixed-height crop + action buttons) ---------- */
.admin-main .media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--mc-gap);
    margin-top: var(--mc-gap);
}
.admin-main .media-tile img, .admin-main .media-tile video { width: 100%; height: 200px; object-fit: cover; display: block; background: #000; }
.media-tile {
    position: relative;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius);
    overflow: hidden;
    display: block;
}
.media-tile.inactive { opacity: 0.5; }
.media-tile-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px; background: var(--mc-surface-alt); }
.media-tile-actions button { font-size: 0.78rem; padding: 6px 8px; min-height: 32px; }

/* ---------- Media grid: public (Google Photos-style masonry) ---------- */
.public-main .media-grid {
    columns: 2 200px;
    column-gap: 8px;
    margin-top: var(--mc-gap);
}
.public-main .media-tile {
    break-inside: avoid;
    margin-bottom: 8px;
    cursor: pointer;
    box-shadow: var(--mc-shadow);
}
.public-main .media-tile img, .public-main .media-tile video { width: 100%; height: auto; display: block; background: #000; }
.public-main .media-tile:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.play-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; pointer-events: none;
}
@media (min-width: 700px) { .public-main .media-grid { columns: 3 220px; } }
@media (min-width: 1000px) { .public-main .media-grid { columns: 4 220px; } }

/* ---------- Lightbox ---------- */
body.lightbox-locked { overflow: hidden; }
.lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 4000; /* above the top bar and the Menu button */
    background: rgba(20, 16, 12, 0.97);
    align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox-content { max-width: 92vw; max-height: 92vh; display: flex; align-items: center; justify-content: center; }
.lightbox-content img, .lightbox-content video { max-width: 92vw; max-height: 92vh; object-fit: contain; }
.lightbox-content iframe.lightbox-youtube { width: 92vw; height: min(92vh, 51.75vw); max-width: 1100px; max-height: 618px; border: none; background: #000; }
.lightbox-close, .lightbox-fullscreen, .lightbox-prev, .lightbox-next {
    position: absolute;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 1.6rem; background: rgba(0, 0, 0, 0.55); }
.lightbox-fullscreen { top: 16px; right: 70px; width: 44px; height: 44px; font-size: 1.2rem; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.3rem; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-close:hover, .lightbox-fullscreen:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, 0.18); }
/* Zooming into a photo (RET-264, browse.js): the page never zooms, the photo does. */
.lightbox { overflow: hidden; }
.lightbox.has-photo { touch-action: none; }
.lightbox-close, .lightbox-fullscreen, .lightbox-prev, .lightbox-next, .lightbox-count { z-index: 2; }
.lightbox-content img {
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    transform-origin: 50% 50%; transition: transform 0.2s ease; cursor: zoom-in;
}
.lightbox-content img.is-gesturing { transition: none; }
.lightbox-content img.is-zoomed { cursor: grab; }
.lightbox-content img.is-zoomed:active { cursor: grabbing; }

/* ---------- Upload progress ---------- */
.upload-progress { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.upload-progress[hidden] { display: none; }
.upload-progress-bar { flex: 1; height: 8px; background: var(--mc-surface-alt); border-radius: 4px; overflow: hidden; }
.upload-progress-fill { height: 100%; width: 0%; background: var(--mc-accent); transition: width 0.15s ease; }
.upload-progress-text { font-size: 0.85rem; color: var(--mc-text-dim); white-space: nowrap; }

/* ---------- Login ---------- */
.login-page {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: linear-gradient(135deg, #e8f6f7 0%, #fbf8f3 50%, #fdf1e3 100%);
}
.login-card {
    background: var(--mc-surface);
    box-shadow: 0 8px 30px rgba(60, 45, 20, 0.12);
    border-radius: var(--mc-radius);
    padding: 32px;
    width: 100%;
    max-width: 360px;
}
.login-card h1 { text-align: center; margin-bottom: 20px; font-size: 1.3rem; color: var(--mc-accent); }
.error { color: var(--mc-danger); }
.notice { color: var(--mc-text-dim); }
/* Sign in with Retail Composer (RET-309), above the username form */
.sso-button {
    display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px;
    border-radius: 10px; background: var(--mc-accent); color: #fff; font-weight: 700; text-decoration: none;
    text-align: center;
}
.sso-button:hover, .sso-button:focus-visible { background: var(--mc-accent-hover); color: #fff; }
.sso-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; color: var(--mc-text-dim); font-size: 0.85rem; text-align: center; }
.sso-or::before, .sso-or::after { content: ""; flex: 1; height: 1px; background: var(--mc-border); }
/* The Composer product switcher (MediaSso::cpsRender) sits just left of the Menu button */
.public-topbar .cps, .admin-topbar .cps { margin-left: auto; flex: none; }
.public-topbar .cps + .nav-menu-btn, .admin-topbar .cps + .nav-menu-btn { margin-left: 0; }
/* Plain view is what a customer sees over your shoulder: no product menu there, only in edit mode. */
.public:not(.editing) .public-topbar .cps { display: none; }
.public:not(.editing) .public-topbar .cps + .nav-menu-btn { margin-left: auto; }

@media (max-width: 600px) {
    /* Info on top, buttons on their own row underneath: with overflow-wrap: anywhere a short card's text
       could shrink to a sliver beside the buttons instead of pushing them down (seen on Share Links). */
    .hierarchy-row { flex-wrap: wrap; }
    .hierarchy-info { flex: 1 1 100%; min-width: 0; }
    .hierarchy-actions { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; }
}

/* ---------- Share link picker tree ---------- */
.share-picker-form { max-width: 640px; }
.tree-all {
    background: var(--mc-surface-alt);
    border-radius: 8px;
    padding: 10px 14px;
    margin: 6px 0 4px;
    cursor: pointer;
}
.share-tree { margin-top: 4px; }
.share-tree details { margin: 2px 0; }
.share-tree summary { list-style: revert; cursor: pointer; }
.share-tree summary::marker { color: var(--mc-text-dim); }
.tree-node { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.tree-leaf { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.9rem; color: var(--mc-text-dim); cursor: pointer; }
.tree-children { margin-left: 20px; padding-left: 12px; border-left: 2px solid var(--mc-border); margin-top: 4px; margin-bottom: 4px; }

/* ---------- Set Cover Photo picker ---------- */
.cover-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}
.cover-picker-item {
    padding: 0; border: 2px solid transparent; border-radius: 8px;
    overflow: hidden; cursor: pointer; background: none; min-height: auto;
}
.cover-picker-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.cover-picker-item:hover { border-color: var(--mc-accent); }

/* ---------- Public quick-share widget ---------- */
#share-fab, #edit-fab {
    position: fixed;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 500;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(60, 45, 20, 0.25);
    cursor: pointer;
}
#share-fab { right: 20px; background: var(--mc-warm); }
#share-fab:hover { background: var(--mc-warm-hover); }
/* Nothing gets shared while editing (RET-243): the round Share button goes away in edit mode. */
body.editing #share-fab { display: none; }
/* In edit mode the edit bar's Done is the way out: the pencil (once a red "Close Edit Mode" pill that
   covered the last row of tiles) goes away too. */
body.editing #edit-fab { display: none; }
/* Room under the last row for the round buttons and the Feedback pill, at every width. */
body.public .public-main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ---------- Edit-mode toggle (mirrors #share-fab, left side, accent color) ---------- */
#edit-fab { left: 20px; background: var(--mc-accent); }
#edit-fab:hover { background: var(--mc-accent-hover); }
/* In edit mode the round pencil becomes a red "Close Edit Mode" pill (RET-236). */
body.editing #edit-fab {
    width: auto; padding: 0 20px; border-radius: 26px;
    background: #c62828; font-size: 0.95rem; font-weight: 700; white-space: nowrap;
}
body.editing #edit-fab:hover { background: #a61f1f; }
body.selecting #edit-fab { display: none; }

.share-panel {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(20, 16, 12, 0.55);
    display: flex; align-items: flex-end; justify-content: center;
}
.share-panel[hidden] { display: none; }
@media (min-width: 640px) {
    .share-panel { align-items: center; }
}
.share-panel-inner {
    position: relative;
    background: var(--mc-surface);
    border-radius: 16px 16px 0 0;
    padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 -8px 30px rgba(60, 45, 20, 0.2);
}
@media (min-width: 640px) {
    .share-panel-inner { border-radius: var(--mc-radius); padding: 24px; }
}
.share-panel-close {
    position: absolute; top: 10px; right: 10px;
    background: var(--mc-surface-alt); color: var(--mc-text);
    border: none; border-radius: 50%; width: 44px; height: 44px;
    font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.share-panel-back {
    display: inline-block; margin: 0 0 10px; padding: 10px 12px 10px 0; min-height: 44px;
    background: none; border: none; color: var(--mc-text-dim); font-size: 0.95rem; cursor: pointer;
}
.share-panel-back:hover { background: none; color: var(--mc-text); }
.share-panel-back[hidden] { display: none; }
.share-step h2 { margin-top: 0; }
.share-step button { display: block; width: 100%; margin-bottom: 10px; }
.share-step button:last-child { margin-bottom: 0; }
.share-step button[hidden] { display: none; }
.share-step-actions button, .share-step-actions label.btn-manage { margin-bottom: 0; }
.share-step-actions label.btn-manage { display: inline-flex; width: auto; }
/* The three share choices each get their own color (RET-235): orange, teal, slate blue. */
#share-create-customer { background: #4a5fa8; color: #fff; }
#share-create-customer:hover { background: #3c4f8f; }

/* Handing a link to the customer (share-handoff.js): QR code, then Text / Email / Share / Copy. */
.handoff { display: flex; flex-direction: column; gap: 10px; }
/* The link is made while its introduction video is still uploading (share.js attachWhenDone()) */
.handoff.is-waiting { opacity: .4; pointer-events: none; }
.iv-banner { background: #fdf1e4; border: 1px solid #f2c79a; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.iv-banner p { margin: 0; font-size: .95rem; }
.iv-banner.is-done { background: #e8f6ee; border-color: #9fd5b3; }
.iv-banner.is-error { background: #fdeaea; border-color: #eea5a5; }
.iv-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.iv-banner-actions:empty { display: none; }
.share-step .iv-banner-actions button { margin: 0; }
#share-iv-status { font-size: .9rem; margin: 6px 0; }
.handoff-qr {
    display: block; width: min(240px, 70vw); margin: 0 auto; padding: 0;
    background: #fff; border: 1px solid var(--mc-border); border-radius: 12px; overflow: hidden; cursor: zoom-in;
}
.handoff-qr:hover { background: #fff; }
.handoff-qr svg { display: block; width: 100%; height: auto; }
.handoff-qr.is-big {
    position: fixed; z-index: 1000; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 92vh); margin: 0; box-shadow: 0 0 0 100vmax rgba(20, 16, 12, 0.75); cursor: zoom-out;
}
.handoff-hint { margin: 0; text-align: center; font-size: 0.85rem; color: var(--mc-text-dim); }
.handoff-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.share-step .handoff-actions button, .handoff-actions button { width: 100%; margin: 0; }
.handoff-actions button:nth-child(n+2) { background: var(--mc-surface-alt); color: var(--mc-text); }
.handoff-actions button:nth-child(n+2):hover { background: var(--mc-border); }
.handoff-form { max-width: none; padding: 12px; background: var(--mc-surface-alt); border-radius: 10px; }
.handoff-form[hidden] { display: none; }
.handoff-form input, .handoff-form textarea { width: 100%; box-sizing: border-box; background: var(--mc-surface) !important; font-family: inherit; }
.handoff-url {
    width: 100%; box-sizing: border-box; padding: 10px 12px;
    border: 1px solid var(--mc-border); border-radius: 8px;
    background: var(--mc-surface-alt); color: var(--mc-text-dim); font-size: 0.85rem;
}
.handoff-status { margin: 0; min-height: 1.2em; font-size: 0.9rem; color: var(--mc-text-dim); text-align: center; }
.share-alerts-form { margin: 0 0 16px; font-size: 0.9rem; color: var(--mc-text-dim); }
.share-alerts-form label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.share-alerts-form select { padding: 8px 10px; border: 1px solid var(--mc-border); border-radius: 8px; background: var(--mc-surface); color: var(--mc-text); font-size: 0.95rem; }
.share-alerts-form .notice { margin-left: 8px; }
.engagement-card h3 { margin: 14px 0 6px; font-size: 1rem; }
.engagement-card h3:first-child { margin-top: 0; }
.engagement-list { margin: 0; padding: 0; list-style: none; }
.engagement-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--mc-border); font-size: 0.92rem; overflow-wrap: anywhere; }
.engagement-list li:last-child { border-bottom: none; }
.engagement-meta { color: var(--mc-text-dim); }
.share-recipients { margin: 4px 0; font-size: 0.85rem; color: var(--mc-text-dim); }
.share-recipients div::before { content: "\2192  "; }
.hierarchy-info p { overflow-wrap: anywhere; }

/* A customer who scanned the QR code at the booth gives a number or email first (s.php). */
.contact-gate { max-width: 420px; margin: 24px auto; padding: 24px; background: var(--mc-surface); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow); }
.contact-gate p:first-child { margin-top: 0; }
.contact-gate .admin-form { max-width: none; }
.contact-gate .hp { position: absolute; left: -9999px; }

/* Selection mode: show a tappable checkbox indicator on every shareable tile. */
.browse-tile { position: relative; }
body.selecting .browse-tile::after,
body.selecting .media-tile::after {
    content: '';
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid var(--mc-border);
    pointer-events: none;
}
body.selecting .browse-tile.share-selected::after,
body.selecting .media-tile.share-selected::after {
    background: var(--mc-accent);
    border-color: var(--mc-accent);
    box-shadow: 0 0 0 3px rgba(15, 163, 173, 0.25);
}
body.selecting .browse-tile.share-selected,
body.selecting .media-tile.share-selected {
    outline: 2px solid var(--mc-accent);
    outline-offset: 2px;
}
body.selecting #share-fab { display: none; }

/* ---------- Move / Copy destination picker ----------
   The picker's radio rows live inside .admin-form, whose label rule stacks a
   caption above an input. That is wrong for a tree row, so the row layout is
   restored here, the tree is given its own scroll area, and the confirm
   button is pinned to the bottom of the dialog. */
.picker-hint { margin: 0 0 6px; font-size: 0.9rem; color: var(--mc-text-dim); }
.intro-video-picker { display: flex; flex-direction: column; gap: 6px; }
.intro-video-picker #iv-file { margin-top: 4px; padding: 10px; background: var(--mc-bg); border-radius: 10px; }

/* ---------- Customer share wizard (round Share button, assets/js/share.js) ---------- */
.share-step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.share-step-actions label.btn-manage { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cust-capture-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cust-capture-list li {
    position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
    background: var(--mc-surface-alt);
}
.cust-capture-list img, .cust-capture-list video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cust-capture-list button {
    position: absolute; top: 2px; right: 2px; z-index: 2;
    width: 30px; height: 30px; min-height: 0; padding: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 1rem; line-height: 1;
}
/* The walkthrough's photo / video pickers and the Next button are the main taps on a phone. */
.share-step-actions .btn-manage { min-height: 44px; padding: 8px 14px; font-size: 0.95rem; }
.share-step button:disabled { opacity: 0.45; cursor: default; }
.cust-capture-list .cust-capture-status {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.7rem; text-align: center; padding: 4px;
}
#cust-video-preview:not(:empty) { margin-bottom: 10px; }
#cust-video-preview video { width: 100%; max-width: 320px; border-radius: 10px; display: block; background: #000; }
/* "Include anything you already have?" picker (RET-239): album rows with
   covers that open on tap, a separate labeled "+ Add all" button well away from
   the open target, and a thumbnail grid inside each album. The .share-step
   button rule above (block, full width) is overridden here on purpose. */
.xp-picker {
    max-height: 48vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 10px 10px; margin-bottom: 6px;
    background: var(--mc-surface-alt); border: 1px solid var(--mc-border); border-radius: 10px;
}
.xp-section { margin: 12px 2px 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mc-text-dim); }
.xp-album {
    display: flex; align-items: stretch; gap: 0; margin: 0 0 8px;
    background: var(--mc-surface); border: 2px solid transparent; border-radius: 12px; overflow: hidden;
}
.xp-album.is-on { border-color: var(--mc-accent); }
.xp-picker .xp-open {
    flex: 1 1 auto; min-width: 0; width: auto; margin: 0; padding: 8px;
    display: flex; align-items: center; gap: 12px; text-align: left;
    background: transparent; color: var(--mc-text); border-radius: 0; font-weight: 400;
}
.xp-picker .xp-open:hover { background: var(--mc-bg); }
.xp-cover {
    flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
    background: var(--mc-surface-alt); display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.xp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-album-text { display: flex; flex-direction: column; min-width: 0; }
.xp-album-name { font-weight: 700; font-size: 0.98rem; line-height: 1.25; overflow-wrap: anywhere; }
.xp-album-meta { font-size: 0.8rem; color: var(--mc-text-dim); }
.xp-album-look { font-size: 0.8rem; font-weight: 600; color: var(--mc-accent); }
.xp-picker .xp-add {
    flex: none; width: 86px; margin: 0; padding: 0 8px; border-radius: 0;
    border-left: 1px solid var(--mc-border);
    background: var(--mc-surface); color: var(--mc-accent); font-size: 0.88rem; font-weight: 700;
}
.xp-picker .xp-add:hover { background: var(--mc-bg); }
.xp-picker .xp-add[aria-pressed="true"] { background: var(--mc-accent); color: #fff; border-left-color: var(--mc-accent); }
.xp-picker .xp-add:disabled { cursor: default; opacity: 0.85; }
.xp-head {
    position: sticky; top: -4px; z-index: 2; display: flex; align-items: center; gap: 10px;
    margin: 0 -10px 8px; padding: 8px 10px; background: var(--mc-surface-alt); border-bottom: 1px solid var(--mc-border);
}
.xp-picker .xp-back {
    flex: none; width: auto; margin: 0; padding: 8px 14px; min-height: 40px;
    background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border);
}
.xp-crumbs { min-width: 0; font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.xp-picker .xp-whole {
    width: 100%; margin: 0 0 10px; min-height: 44px;
    background: var(--mc-surface); color: var(--mc-accent); border: 2px dashed var(--mc-accent);
}
.xp-picker .xp-whole.is-on { background: var(--mc-accent); color: #fff; border-style: solid; }
.xp-picker .xp-whole:disabled { cursor: default; }
.xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (min-width: 520px) { .xp-grid { grid-template-columns: repeat(4, 1fr); } }
.xp-picker .xp-item {
    position: relative; width: auto; margin: 0; padding: 0; aspect-ratio: 1 / 1; overflow: hidden;
    border-radius: 8px; background: #d9d2c5; border: 3px solid transparent;
}
.xp-picker .xp-item:hover { background: #d9d2c5; }
.xp-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-thumb-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.6rem; }
.xp-type {
    position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 6px;
    background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.68rem; font-weight: 700;
}
.xp-check {
    position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.85); border: 2px solid rgba(0, 0, 0, 0.25);
    color: transparent; font-size: 0.85rem; font-weight: 700;
}
.xp-picker .xp-item.is-on { border-color: var(--mc-accent); }
.xp-item.is-on img { opacity: 0.85; }
.xp-item.is-on .xp-check { background: var(--mc-accent); border-color: #fff; color: #fff; }
.xp-picker .xp-item:disabled { cursor: default; }
.xp-count { margin: 4px 2px 0; font-size: 0.88rem; font-weight: 600; color: var(--mc-text-dim); }
.picker-scroll {
    max-height: 45vh;
    overflow-y: auto;
    padding: 6px 10px;
    background: var(--mc-surface-alt);
    border: 1px solid var(--mc-border);
    border-radius: 8px;
}
.admin-form .picker-scroll .tree-node {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 6px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mc-text);
    text-align: left;
}
.picker-scroll .tree-node:hover { background: var(--mc-surface); }
.picker-scroll .tree-node input[type="radio"] { flex: none; margin: 0; }
/* Selected row reads as selected without needing to find the radio dot. */
.picker-scroll .tree-node:has(input[type="radio"]:checked) {
    background: var(--mc-surface);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--mc-accent);
}
.picker-scroll .tree-children { margin-left: 14px; padding-left: 10px; }
.admin-form .picker-submit {
    position: sticky;
    bottom: 0;
    margin-top: 12px;
    width: 100%;
}

/* The shared .admin-form input rule predates the Users page, which is the
   first form here to use an email field. */
.admin-form input[type="email"] {
    background: var(--mc-surface-alt);
    border: 1px solid var(--mc-border);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--mc-text);
    font-size: 1rem;
}

/* ---------- Per-user hidden albums ----------
   A hidden album is gone from normal browsing (that is the point -- it must
   not come up in front of a customer) but stays visible, dimmed, in edit mode
   so it can be brought back. */
.browse-tile-wrap.album-hidden { display: none; }
.public.editing .browse-tile-wrap.album-hidden { display: block; }
.public.editing .browse-tile-wrap.album-hidden .browse-tile { opacity: 0.4; }
.public.editing .browse-tile-wrap.album-hidden .browse-tile-name::after {
    content: ' (hidden)';
    color: var(--mc-text-dim);
    font-weight: 500;
}

/* ---------- Bulk move selection ----------
   Same affordance as the share selection mode, on its own body class so the
   two modes can't be active at once or fight over the same tile clicks. */
body.move-selecting .browse-tile::after,
body.move-selecting .media-tile::after {
    content: '';
    position: absolute; top: 8px; right: 8px; z-index: 5;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 2px solid var(--mc-border);
    pointer-events: none;
}
body.move-selecting .browse-tile.move-selected::after,
body.move-selecting .media-tile.move-selected::after {
    background: var(--mc-accent);
    border-color: var(--mc-accent);
    box-shadow: 0 0 0 3px rgba(15, 163, 173, 0.25);
}
body.move-selecting .browse-tile.move-selected,
body.move-selecting .media-tile.move-selected {
    outline: 2px solid var(--mc-accent);
    outline-offset: 2px;
}
/* The tile action icons and both FABs would only get in the way mid-selection.
   Bulk select is only reachable from edit mode, so these have to outrank
   ".public.editing .tile-manage-actions { display: flex }" above. */
body.public.editing.move-selecting .tile-manage-actions,
body.public.editing.move-selecting .media-tile-actions,
body.move-selecting #share-fab,
body.move-selecting #edit-fab { display: none; }

/* Collapsible rows in the destination picker. */
.picker-scroll details > summary {
    list-style: revert;
    cursor: pointer;
    padding: 4px 2px;
}
.admin-form .picker-scroll details > summary .tree-node {
    display: inline-flex;
    width: auto;
}
.picker-scroll details[open] > summary { font-weight: 700; }

/* ---------- Drag to reorder ----------
   The grip is the only drag surface, so tapping a tile still opens it.
   touch-action:none stops the browser scrolling the page instead of
   reporting the pointermove events the drag needs. */
.btn-drag { cursor: grab; touch-action: none; }
.btn-drag:active { cursor: grabbing; }
.browse-tile-wrap.drag-active,
.media-tile.drag-active {
    opacity: 0.55;
    outline: 2px dashed var(--mc-accent);
    outline-offset: 2px;
    pointer-events: none; /* so elementFromPoint sees the tile underneath */
}
/* Kill text selection and the long-press callout mid-drag. */
body.dragging-tile {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
body.dragging-tile .browse-tile,
body.dragging-tile .media-tile { cursor: grabbing; }

/* ---------- Crop tool ---------- */
.crop-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 8px 0;
    touch-action: none; /* the drag needs the pointer events, not a page scroll */
    user-select: none;
    -webkit-user-select: none;
    line-height: 0;
}
.crop-stage img {
    max-width: 100%;
    max-height: 50vh;
    width: auto;
    display: block;
    border-radius: 8px;
}
.crop-box {
    position: absolute;
    border: 2px solid var(--mc-accent);
    box-shadow: 0 0 0 9999px rgba(20, 16, 12, 0.45);
    pointer-events: none;
}
.crop-box[hidden] { display: none; }
#crop-revert { display: block; width: 100%; margin-top: 10px; }
/* Revert is a separate, deliberate action -- kept away from the Crop button. */
.crop-revert-zone {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--mc-border);
}
#crop-revert { display: block; width: 100%; }
#crop-revert-confirm[hidden] { display: none; }
#crop-revert-confirm button { width: auto; }
/* Rotate buttons and aspect-ratio presets above the crop stage. */
.crop-tools { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.crop-tools button { width: auto; }
.crop-tools .is-active {
    background: var(--mc-accent);
    color: #fff;
}

/* ---------- Offline / caching ---------- */
.btn-offline.is-marked, .public.editing .btn-offline[data-offline="1"] {
    background: var(--mc-accent);
    color: #fff;
}
.offline-album-list { margin: 8px 0 0; padding-left: 20px; }
.offline-progress { margin-top: 12px; }
.offline-progress-bar {
    background: var(--mc-surface-alt);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}
.offline-progress-fill { background: var(--mc-accent); height: 100%; width: 0; transition: width 0.2s ease; }
.offline-progress-text { font-size: 0.85rem; color: var(--mc-text-dim); }
.offline-autosync {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 900;
    background: var(--mc-surface); color: var(--mc-text);
    box-shadow: var(--mc-shadow); border-radius: 999px;
    padding: 8px 16px; font-size: 0.85rem;
}

/* ---------- Albums page sections (My albums / Shared with me / Catalog / Team) ---------- */
.album-section { margin-top: 8px; }
.album-section + .album-section { margin-top: 28px; }
.section-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.section-head h2 { margin: 0; }
.section-note { font-size: 0.85rem; color: var(--mc-text-dim); flex-basis: 100%; }
.browse-tile-sub {
    display: block; margin-top: 2px;
    font-size: 0.8rem; font-weight: 500; color: var(--mc-text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Small secondary buttons that stay visible outside edit mode. */
.btn-pill {
    background: var(--mc-surface); color: var(--mc-text);
    border: 1px solid var(--mc-border);
    border-radius: 999px; padding: 6px 14px; min-height: 36px;
    font-size: 0.9rem; font-weight: 600;
}
.btn-pill:hover { background: var(--mc-surface-alt); }
.btn-pill-accent { background: var(--mc-accent); border-color: var(--mc-accent); color: #fff; }
.btn-pill-accent:hover { background: var(--mc-accent-hover); }

.album-owner-line { margin: -4px 0 8px; font-size: 0.9rem; color: var(--mc-text-dim); }
/* Adding and sharing change the album, so like the tile controls they only
   show in edit mode (the pencil button); the plain view stays clean for a
   customer looking over your shoulder. */
.album-actions { display: none; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.public.editing .album-actions { display: flex; }
.empty-card .view-only-hint { margin: 0; }
body.selecting .album-actions, body.move-selecting .album-actions { display: none; }

.empty-card {
    background: var(--mc-surface);
    border: 2px dashed var(--mc-border);
    border-radius: var(--mc-radius);
    padding: 22px 20px;
    margin-top: var(--mc-gap);
    text-align: center;
}
.empty-card p { margin: 0 0 14px; color: var(--mc-text-dim); }
.empty-card strong { color: var(--mc-text); }

/* ---------- Video tiles: duration and "optimizing" badges ---------- */
.media-duration, .media-processing {
    position: absolute; bottom: 8px; z-index: 2;
    background: rgba(0, 0, 0, 0.62); color: #fff;
    font-size: 0.75rem; font-weight: 600; line-height: 1;
    padding: 4px 7px; border-radius: 6px; pointer-events: none;
}
.media-duration { right: 8px; }
.media-processing { left: 8px; background: rgba(15, 163, 173, 0.9); }
.public.editing .media-tile .media-duration,
.public.editing .media-tile .media-processing { bottom: auto; top: 8px; }

/* ---------- Lightbox position counter ---------- */
.lightbox-count {
    position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.lightbox-prev[hidden], .lightbox-next[hidden] { display: none; }
.lightbox-share {
    position: absolute; top: 16px; left: 16px; z-index: 2;
    min-height: 44px; padding: 0 16px; border: none; border-radius: 22px;
    background: var(--mc-warm); color: #fff; font: inherit; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.lightbox-share:hover { background: var(--mc-warm-hover); }
.lightbox-share[hidden], body.editing .lightbox-share { display: none; }
@media (max-width: 380px) { .lightbox-share-more { display: none; } }
@media (max-width: 600px) {
    .lightbox-prev, .lightbox-next { width: 44px; height: 44px; background: rgba(0, 0, 0, 0.35); }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
    .lightbox-content, .lightbox-content img, .lightbox-content video { max-width: 100vw; }
    .lightbox-content iframe.lightbox-youtube { width: 100vw; height: 56.25vw; max-width: none; }
}

/* ---------- Toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
    z-index: 1100; background: var(--mc-text); color: #fff;
    padding: 10px 18px; border-radius: 999px; font-size: 0.92rem; font-weight: 600;
    box-shadow: var(--mc-shadow); transition: opacity 0.3s ease;
}
.toast-out { opacity: 0; }

/* ---------- Upload tray (assets/js/upload.js) ---------- */
.upload-tray {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 850; /* under the manage / share sheets (900) */
    background: var(--mc-surface);
    box-shadow: 0 -8px 30px rgba(60, 45, 20, 0.2);
    border-radius: 16px 16px 0 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    max-height: 60vh; display: flex; flex-direction: column; gap: 10px;
}
.upload-tray[hidden] { display: none; }
@media (min-width: 640px) {
    .upload-tray { left: auto; right: 20px; bottom: 20px; width: 420px; border-radius: var(--mc-radius); }
}
.upload-tray-head { display: flex; align-items: center; gap: 10px; }
.upload-tray-head strong { flex: 1; }
.upload-tray-close {
    background: var(--mc-surface-alt); color: var(--mc-text);
    width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; font-size: 1.2rem;
}
.upload-tray-close:disabled { opacity: 0.4; cursor: default; }
.upload-tray-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.upload-row { display: grid; grid-template-columns: 1fr; gap: 3px; font-size: 0.85rem; }
.upload-row-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-row-status { color: var(--mc-text-dim); }
.upload-row[data-state="done"] .upload-row-status { color: var(--mc-success); }
.upload-row[data-state="error"] .upload-row-status { color: var(--mc-danger); }
.upload-row[data-state="error"] .upload-row-bar { display: none; }
.upload-row[data-state="dup"] .upload-row-status { color: var(--mc-text-muted, #7a7066); }
.upload-row[data-state="dup"] .upload-row-bar { display: none; }
.upload-row[data-state="dup"] .upload-row-name { opacity: .65; }
.upload-row-bar { height: 4px; background: var(--mc-surface-alt); border-radius: 2px; overflow: hidden; }
.upload-row-fill { display: block; height: 100%; width: 0; background: var(--mc-accent); transition: width 0.15s ease; }
.upload-tray-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upload-tray-summary { flex: 1 1 100%; font-size: 0.85rem; color: var(--mc-text-dim); }
.upload-tray-summary:empty { display: none; }
.upload-tray-foot .btn-primary { margin-left: auto; }
body.uploading #share-fab, body.uploading #edit-fab, body.uploading .fb-launch { display: none; }

.upload-drop {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(15, 163, 173, 0.18);
    border: 4px dashed var(--mc-accent);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}
.upload-drop[hidden] { display: none; }
.upload-drop div {
    background: var(--mc-surface); padding: 16px 24px; border-radius: var(--mc-radius);
    font-weight: 700; box-shadow: var(--mc-shadow);
}

/* ---------- Share with people ---------- */
.member-list { display: flex; flex-direction: column; gap: 2px; }
.admin-form .member-row {
    display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
    padding: 8px 6px; border-radius: 6px; color: var(--mc-text); font-size: 0.95rem; cursor: pointer;
}
.admin-form .member-row:hover { background: var(--mc-surface); }
.member-row input { margin-top: 4px; flex: none; }
.member-row small { color: var(--mc-text-dim); }
.picker-owner { color: var(--mc-text-dim); font-weight: 500; }
.picker-empty { margin: 8px 4px; }

/* ---------- Admin Media Library ---------- */
.library-filters { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.library-filters a.is-current { font-weight: 700; color: var(--mc-text); }
.library-meta { width: 100%; margin: 2px 0; font-size: 0.78rem; color: var(--mc-text-dim); }
.library-video { position: relative; display: block; }

/* ---------- Phones: page gutters and tighter album tiles ---------- */
@media (max-width: 480px) {
    .admin-main, .public-main { padding: 14px 16px 90px; }
    .public-topbar { padding: 12px 16px; gap: 10px; }
    .public-brand { font-size: 1rem; }
    .browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .browse-tile-name { padding: 9px 10px; font-size: 0.95rem; }
}

/* ---------- Showing a customer ----------
   Outside edit mode an album page is what a customer sees over your shoulder:
   album names, photos and videos, nothing else. Who owns or shares an album,
   setup help, background work (optimizing, offline caching) and the Feedback
   button are edit mode
   only -- the same rule as the tile controls. s.php (a customer's own link) is
   never in edit mode, so none of it shows there either. */
.public:not(.editing) .edit-only,
.public:not(.editing) .album-owner-line,
.public:not(.editing) .browse-tile-sub,
.public:not(.editing) .section-head,
.public:not(.editing) .setup-card,
.public:not(.editing) .media-processing,
.public:not(.editing) .offline-autosync,
.public:not(.editing) .fb-launch { display: none !important; }
.public.editing .view-only-hint { display: none; }

/* First run (RET-265): an empty page the account can fill says one neutral line in
   plain view, with a round pencil like the real one, and the real pencil pulses. */
.first-run-hint { position: relative; padding: 28px 20px 30px; }
.first-run-hint p { margin: 12px 0 0; font-size: 1.05rem; font-weight: 600; color: var(--mc-text); }
.first-run-pencil {
    width: 52px; height: 52px; border-radius: 50%; border: none;
    background: var(--mc-accent); color: #fff; font-size: 1.3rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.first-run-pencil:hover { background: var(--mc-accent-hover); }
.first-run-arrow {
    position: absolute; left: 14px; bottom: 6px;
    font-size: 1.6rem; line-height: 1; color: var(--mc-accent);
}
@keyframes first-run-pulse {
    0% { box-shadow: 0 0 0 0 rgba(15, 163, 173, 0.55); }
    70% { box-shadow: 0 0 0 16px rgba(15, 163, 173, 0); }
    100% { box-shadow: 0 0 0 0 rgba(15, 163, 173, 0); }
}
.public:not(.editing):has(.first-run-hint) #edit-fab { animation: first-run-pulse 1.8s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .public:not(.editing):has(.first-run-hint) #edit-fab { animation: none; outline: 3px solid var(--mc-accent); outline-offset: 3px; }
}

/* =====================================================================
   Look and feel, 2026-09-28
   Standard mode is what a customer sees: album covers fill their tiles with
   the name on a soft shade, photos sit in a tight masonry, and every video is
   framed in the accent color with a big play button and a duration pill so it
   stands out from the photos. Edit mode adds a teal bar of page actions under
   the top bar, and on each tile only a drag grip and a menu button with
   labeled actions (assets/js/manage.js) instead of rows of bare icons.
   ===================================================================== */
:root { --topbar-h: 56px; }

/* Top bar */
.public-topbar {
    min-height: var(--topbar-h);
    padding: 0 20px;
    gap: 12px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    box-shadow: 0 1px 0 var(--mc-border);
}
.public-brand {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    color: var(--mc-text); font-size: 1.05rem; letter-spacing: -0.01em;
}
.public-brand:hover { color: var(--mc-accent); }
.public-brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.public-brand-icon { flex: none; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
@media (max-width: 480px) {
    .public-topbar { padding: 0 14px; gap: 10px; }
}

/* Page heading */
.public-main { padding-top: 16px; }
.public-main > h1 {
    font-size: clamp(1.55rem, 4.2vw, 2.2rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 4px 0 2px;
}
.page-subtitle { margin: 0 0 16px; color: var(--mc-text-dim); font-size: 0.95rem; }
.breadcrumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
    margin: 0 0 8px; font-size: 0.85rem; color: var(--mc-text-dim);
}
.breadcrumbs a, .breadcrumbs > span {
    padding: 4px 11px; border-radius: 999px;
    background: var(--mc-surface); border: 1px solid var(--mc-border);
    color: var(--mc-text); font-weight: 500;
}
.breadcrumbs a:hover { border-color: var(--mc-accent); color: var(--mc-accent); }

/* Album tiles: the cover fills the tile, the name sits on a shade */
.browse-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.browse-tile-wrap { position: relative; display: block; }
.browse-tile {
    position: relative; display: block;
    aspect-ratio: 4 / 3;
    border-radius: 18px; overflow: hidden;
    background: #d6e8e9; color: #fff;
    box-shadow: 0 6px 18px rgba(40, 30, 15, 0.13);
}
.browse-tile:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(40, 30, 15, 0.2); }
.browse-tile-cover {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; object-fit: cover;
    transition: transform 0.45s ease;
}
.browse-tile:hover .browse-tile-cover { transform: scale(1.045); }
.browse-tile-placeholder {
    position: absolute; inset: 0; aspect-ratio: auto;
    display: flex; align-items: center; justify-content: center; padding-bottom: 30px;
    background: linear-gradient(135deg, #0fa3ad 0%, #56c3bd 55%, #f1c08a 100%);
    color: rgba(255, 255, 255, 0.85); font-size: inherit;
}
.browse-tile-text {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; gap: 2px;
    padding: 40px 14px 12px;
    background: linear-gradient(to top, rgba(8, 20, 24, 0.82) 0%, rgba(8, 20, 24, 0.4) 60%, rgba(8, 20, 24, 0) 100%);
    text-align: left;
}
.browse-tile-name {
    padding: 0; text-align: left;
    font-size: 1.1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.browse-tile-count { font-size: 0.8rem; font-weight: 500; opacity: 0.9; }
.browse-tile-sub { margin-top: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.78rem; }
.public.editing .browse-tile-wrap.album-hidden .browse-tile-name::after { content: none; }

/* Photos and videos */
.public-main .media-grid { column-gap: 10px; }
.public-main .media-tile {
    margin-bottom: 10px;
    border: none; border-radius: 14px;
    background: #1e1b18;
    box-shadow: 0 3px 10px rgba(40, 30, 15, 0.1);
    transition: box-shadow 0.2s ease;
}
.public-main .media-tile:hover { box-shadow: 0 8px 22px rgba(40, 30, 15, 0.2); }

/* Videos: framed in the accent color, shaded, with a play button and length */
.public-main .media-tile.is-video {
    box-shadow: 0 0 0 3px var(--mc-accent), 0 6px 18px rgba(15, 163, 173, 0.3);
}
.public-main .media-tile.is-video:hover {
    box-shadow: 0 0 0 3px var(--mc-accent-hover), 0 10px 26px rgba(15, 163, 173, 0.38);
}
.media-tile.is-video::before, .media-tile.is-youtube::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 45%);
}
/* A pasted YouTube link (RET-226): red frame instead of the accent teal, and a badge. */
.public-main .media-tile.is-youtube {
    box-shadow: 0 0 0 3px #ff0000, 0 6px 18px rgba(255, 0, 0, 0.3);
}
.public-main .media-tile.is-youtube:hover {
    box-shadow: 0 0 0 3px #d90000, 0 10px 26px rgba(255, 0, 0, 0.38);
}
.media-tile.is-youtube .play-icon { color: #ff0000; }
.yt-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 999px;
    background: #ff0000; color: #fff;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.play-icon {
    z-index: 2;
    width: 56px; height: 56px; padding-left: 3px;
    background: rgba(255, 255, 255, 0.94); color: var(--mc-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.media-tile.is-video:hover .play-icon { transform: translate(-50%, -50%) scale(1.08); }
.media-duration,
.public.editing .media-tile .media-duration {
    top: auto; bottom: 10px; left: 10px; right: auto; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 999px;
    background: var(--mc-accent); color: #fff;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}
.media-processing,
.public.editing .media-tile .media-processing {
    top: auto; bottom: 10px; left: auto; right: 10px; z-index: 2;
    border-radius: 999px; background: rgba(20, 16, 12, 0.72);
}

/* Edit mode: a slightly tinted page, so it is obvious you are editing */
body.public.editing { background: #eef5f4; }

/* The edit bar under the top bar: warm charcoal (RET-238; was teal, which blended into the
   teal status bar, the logo and the teal page tint) */
.edit-bar {
    display: none;
    position: sticky; top: var(--topbar-h); z-index: 9;
    background: var(--mc-chrome); color: #fff;
    border-bottom: 3px solid var(--mc-warm);
    box-shadow: 0 4px 14px rgba(20, 16, 12, 0.3);
}
.public.editing .edit-bar { display: block; }
body.selecting .edit-bar, body.move-selecting .edit-bar { display: none !important; }
.edit-bar-inner {
    max-width: 1100px; margin: 0 auto; padding: 8px 20px;
    display: flex; align-items: center; gap: 10px;
}
.edit-bar-label {
    flex: none; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.85;
}
.edit-bar-actions {
    flex: 1; min-width: 0;
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.edit-bar-actions::-webkit-scrollbar { display: none; }
/* More buttons off to the right (RET-238): fade that edge and show a round arrow that scrolls to them */
.edit-bar.has-more .edit-bar-actions {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
.edit-bar-more {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; min-height: 0; padding: 0 0 3px; margin-left: -6px; border-radius: 50%;
    background: #fff; color: #2b2622; border: none;
    font-size: 1.7rem; font-weight: 700; line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    animation: edit-bar-nudge 1.4s ease-in-out 0.4s 3;
}
.edit-bar-more[hidden] { display: none; }
.edit-bar-more:hover { background: #f2ede3; color: #2b2622; }
@keyframes edit-bar-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .edit-bar-more { animation: none; } }
.bar-btn {
    flex: none; display: inline-flex; align-items: center;
    min-height: 38px; padding: 7px 14px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.14); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}
.bar-btn:hover { background: rgba(255, 255, 255, 0.26); color: #fff; }
.bar-btn-primary, .bar-btn-primary:hover { background: #fff; border-color: #fff; color: #0b6d74; }
.bar-btn-primary:hover { background: #e9f8f8; }
.bar-done { background: var(--mc-warm); border-color: var(--mc-warm); }
.bar-done:hover { background: var(--mc-warm-hover); }

/* Section headings (edit mode only) */
.section-head h2 {
    font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--mc-text-dim);
}

/* Tile grip, menu button and status chips (edit mode only) */
.tile-grip, .tile-menu-btn, .tile-chips { display: none; }
.public.editing .tile-grip, .public.editing .tile-menu-btn { display: flex; }
.public.editing .tile-chips { display: flex; }
.tile-grip, .tile-menu-btn {
    position: absolute; top: 8px; z-index: 4;
    width: 38px; height: 38px; min-height: 0; padding: 0; border-radius: 50%;
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.94); color: var(--mc-text);
    border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 1.35rem; line-height: 1;
}
.tile-grip:hover, .tile-menu-btn:hover, .menu-open > .tile-menu-btn { background: #fff; color: var(--mc-accent); }
.tile-grip { left: 8px; cursor: grab; }
.tile-menu-btn { right: 8px; font-weight: 800; }
.tile-chips { position: absolute; top: 15px; left: 54px; z-index: 4; gap: 4px; pointer-events: none; }
.browse-tile-wrap:not(:has(.tile-grip)) .tile-chips { left: 10px; }
.tile-chip {
    padding: 3px 9px; border-radius: 999px;
    background: rgba(20, 16, 12, 0.72); color: #fff;
    font-size: 0.72rem; font-weight: 700;
}
.tile-chip-accent { background: var(--mc-accent); }
body.selecting .tile-grip, body.selecting .tile-menu-btn, body.selecting .tile-chips,
body.move-selecting .tile-grip, body.move-selecting .tile-menu-btn, body.move-selecting .tile-chips { display: none !important; }

/* The menu: a popover by the button, a sheet along the bottom on a phone */
.tile-menu {
    position: fixed; z-index: 960;
    display: flex; flex-direction: column;
    min-width: 240px; max-width: calc(100vw - 16px);
    padding: 6px;
    background: var(--mc-surface); color: var(--mc-text);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(20, 16, 12, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05);
    cursor: default; text-align: left;
}
.tile-menu[hidden] { display: none; }
.tile-menu-title {
    margin: 6px 10px 4px; font-size: 0.78rem; font-weight: 700; color: var(--mc-text-dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-item {
    display: flex; align-items: center; gap: 12px; width: 100%;
    min-height: 44px; padding: 10px 12px; border-radius: 10px;
    background: none; color: var(--mc-text);
    font-size: 0.95rem; font-weight: 500; text-align: left;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--mc-surface-alt); color: var(--mc-text); outline: none; }
.menu-icon { width: 22px; flex: none; text-align: center; opacity: 0.8; }
.menu-item-danger, .menu-item-danger:hover { color: var(--mc-danger); }
.menu-item-danger:hover { background: #fdecee; }
@media (max-width: 600px) {
    .tile-menu {
        left: 0 !important; right: 0; top: auto !important; bottom: 0;
        min-width: 0; max-width: none;
        padding: 8px 8px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 20px 20px 0 0;
    }
    body.tile-menu-showing::after {
        content: ""; position: fixed; inset: 0; z-index: 950;
        background: rgba(20, 16, 12, 0.4);
    }
    .menu-item { min-height: 50px; font-size: 1rem; }
}

/* Phones */
@media (max-width: 600px) {
    .public-topbar { padding: 0 14px; }
    .edit-bar-inner { padding: 8px 12px; }
    .edit-bar-label { display: none; }
    .edit-bar-inner { gap: 8px; }
}
@media (max-width: 480px) {
    .browse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .browse-tile { aspect-ratio: 1 / 1; border-radius: 16px; }
    .browse-tile-text { padding: 30px 10px 10px; }
    .browse-tile-name { padding: 0; font-size: 0.98rem; }
    .browse-tile-count { font-size: 0.74rem; }
    .public-main .media-grid { column-gap: 8px; }
    .public-main .media-tile { margin-bottom: 8px; border-radius: 12px; }
    .play-icon { width: 46px; height: 46px; }
}

/* ---------- The rep's card and branding on share links (RET-213, includes/rep_card.php) ---------- */
body.branded { font-family: var(--brand-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); }
body.branded button, body.branded input, body.branded textarea, body.branded select { font-family: inherit; }
body.branded .public-topbar { background: var(--brand-header, var(--mc-surface)); }
body.branded .public-brand { color: var(--brand-header-text, var(--mc-accent)); }
body.branded .public-main > h1, body.branded .breadcrumbs, body.branded .breadcrumbs a { color: var(--mc-text-on-bg, inherit); }
.public-brand-logo { display: block; max-height: 40px; max-width: 220px; width: auto; height: auto; }
/* RET-246: a bar showing the rep's logo is a little taller so the logo can be bigger, and a logo with
   its own solid background (a JPEG, is-plated) gets a rounded plate with padding instead of running edge
   to edge. The logo's max-height plus the 8px + 8px padding is exactly --topbar-h (sticky offsets use it). */
body.brand-logo { --topbar-h: 72px; }
body.brand-logo .public-topbar { padding-top: 8px; padding-bottom: 8px; }
body.brand-logo .public-brand-logo { max-height: 56px; max-width: 260px; }
body.brand-logo .public-brand-logo.is-plated {
    padding: 6px 10px; box-sizing: border-box;
    background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
@media (max-width: 480px) {
    body.brand-logo { --topbar-h: 68px; }
    body.brand-logo .public-brand-logo { max-height: 52px; max-width: 210px; }
}

.rep-card {
    display: flex; gap: 14px; align-items: flex-start;
    margin: 0 0 18px; padding: 16px;
    background: var(--mc-surface); border-radius: var(--mc-radius); box-shadow: var(--mc-shadow);
}
.rep-card-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.rep-card-body { min-width: 0; flex: 1; }
.rep-card-name { margin: 0; color: var(--mc-text-dim); }
.rep-card-name strong { color: var(--mc-text); }
.rep-card-message { margin: 6px 0 0; white-space: normal; }
.rep-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rep-card-btn {
    display: inline-block; padding: 8px 18px; border-radius: 999px;
    background: var(--mc-warm); color: #fff; font-weight: 600; font-size: 0.95rem;
}
.rep-card-btn:hover { background: var(--mc-warm-hover); color: #fff; }
.rep-card.is-compact { align-items: center; padding: 10px 14px; }
.rep-card.is-compact .rep-card-photo { width: 44px; height: 44px; }
.rep-card.is-compact .rep-card-actions { margin-top: 6px; }
.rep-card.is-compact .rep-card-btn { padding: 5px 14px; font-size: 0.88rem; }

/* The rep's introduction video (RET-230) as the hero of the share page (RET-260):
   full width above the card, at the video's own shape (inline aspect-ratio) up to 70% of the screen's height. */
.intro-hero { margin: 0 0 18px; }
.public-main .media-tile.intro-hero-tile {
    width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; max-height: 70svh; min-height: 200px;
    margin: 0; background: #000; border-radius: var(--mc-radius); cursor: pointer;
}
.public-main .intro-hero-tile .intro-hero-fill {
    position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px);
    object-fit: cover; filter: blur(18px) brightness(0.7);
}
.public-main .intro-hero-tile .intro-hero-poster {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent;
}
.intro-hero-tile .play-icon { width: 84px; height: 84px; padding-left: 5px; }
.intro-hero-caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 28px 16px 14px; text-align: center;
    color: #fff; font-size: 1.15rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.intro-hero-length { font-weight: 600; opacity: 0.9; }
@media (max-width: 700px) {
    .intro-hero-tile .play-icon { width: 72px; height: 72px; }
    .intro-hero-caption { font-size: 1.05rem; }
}

/* My Card (admin/profile.php) */
.profile-form { max-width: 560px; }
.profile-form .admin-form-card { display: flex; flex-direction: column; gap: 10px; }
.profile-form h2 { margin: 0 0 4px; }
.profile-form textarea { font-family: inherit; }
.profile-photo-row { display: flex; align-items: center; gap: 14px; }
.profile-photo-row label { flex: 1; }
.profile-form .card-buttons { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.profile-form .card-buttons legend { padding: 0; margin-bottom: 4px; width: 100%; }
.profile-form .card-buttons .node-description { width: 100%; margin: 0; }
.profile-logo { max-height: 50px; max-width: 160px; }
/* "Preview my card" (RET-244): the buttons on My Card and the bar on card_preview.php. */
.profile-preview-link { margin: 0 0 12px; }
.profile-preview-link .btn-primary { display: inline-block; text-decoration: none; }
.profile-save-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* A slim strip above the top bar (RET-246): everything under it is exactly what the customer sees. */
.card-preview-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    padding: 6px 14px; background: var(--mc-chrome); color: #fff; font-size: 0.85rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* never the rep's brand font */
    border-bottom: 2px solid var(--mc-chrome-accent); /* nor their colors */
}
.card-preview-label { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; margin-right: auto; }
.card-preview-bar a { display: inline-block; text-decoration: none; padding: 4px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.card-preview-label .card-preview-more { text-transform: none; letter-spacing: 0; font-weight: 400; opacity: 0.8; }
@media (max-width: 600px) {
    .card-preview-more { display: none; }
    .card-preview-bar { gap: 4px 6px; padding: 6px 10px; font-size: 0.8rem; }
    .card-preview-bar a { padding: 4px 8px; }
}
.card-preview-toggle { background: rgba(255, 255, 255, 0.14); color: #fff; }
.card-preview-toggle:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
.card-preview-back { background: var(--mc-chrome-accent); color: #fff; }
.card-preview-back:hover { background: var(--mc-chrome-accent-hover); color: #fff; }
.card-preview-note { color: var(--mc-text-on-bg, var(--mc-text-dim)); font-size: 0.9rem; }
.profile-color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-color-row input[type="color"] { width: 56px; height: 36px; padding: 2px; border: 1px solid var(--mc-border); border-radius: 8px; background: var(--mc-surface); }
.admin-form select { padding: 10px 12px; border: 1px solid var(--mc-border); border-radius: 6px; background: var(--mc-surface-alt); color: var(--mc-text); font-size: 1rem; }

/* Take photo (RET-224): the phone's camera, straight into the album. A computer has no camera to open this way. */
.upload-tray-foot .upload-tray-camera { flex: 1 1 100%; margin-left: 0; order: -1; padding: 14px; font-size: 1.05rem; }
@media (hover: hover) and (pointer: fine) {
    [data-action="take-photo"] { display: none !important; }
}

/* ---- Retail Composer CRM (includes/rc_share_fields.php + assets/js/rc-crm.js, share-handoff.js, My Card) ---- */
.rc-crm { border: 1px solid var(--mc-border); border-radius: 10px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rc-crm legend { font-weight: 600; padding: 0 4px; }
.rc-crm .rc-body { display: flex; flex-direction: column; gap: 10px; }
.rc-crm .rc-body[hidden], .rc-crm [hidden] { display: none !important; }
.rc-crm input[type="search"], .rc-crm input[type="tel"], .rc-crm input[type="email"] { width: 100%; box-sizing: border-box; }
.rc-results { display: flex; flex-direction: column; gap: 6px; }
.rc-results:empty { display: none; }
.rc-crm button.rc-result, .rc-crm .rc-chip, .rc-match-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; margin: 0; text-align: left;
    background: var(--mc-surface-alt); color: var(--mc-text); border: 1px solid var(--mc-border); border-radius: 8px; padding: 8px 10px; font-weight: 400;
}
.rc-crm button.rc-result:hover { background: var(--mc-surface); border-color: var(--mc-accent); }
.rc-crm small { color: var(--mc-text-dim); font-size: 0.82rem; }
.rc-crm .rc-chip { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; border-color: var(--mc-accent); }
.rc-crm .rc-chip > span, .rc-match-row > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.rc-crm .rc-chip button.rc-change { width: auto; margin: 0; min-height: 32px; padding: 4px 12px; background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border); }
.rc-match { background: var(--mc-surface-alt); border: 2px solid var(--mc-accent); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.rc-match p { margin: 0; }
.rc-match-row { background: var(--mc-surface); gap: 8px; }
.rc-crm .rc-match button { margin: 0; }
.rc-crm .rc-match button.rc-no { background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border); }
.rc-empty, .rc-hint { margin: 0; font-size: 0.85rem; color: var(--mc-text-dim); }
.rc-hint:empty { display: none; }
.handoff-crm { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--mc-surface-alt); font-size: 0.9rem; text-align: center; overflow-wrap: anywhere; }
.handoff-crm.is-error .handoff-crm-error { color: var(--mc-danger); }
.share-step button.handoff-own, button.handoff-own { background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border); }
.rc-connect-card { margin-top: var(--mc-gap, 16px); max-width: 560px; box-sizing: border-box; }
.rc-connect-card a.btn-primary { display: inline-block; text-decoration: none; }

/* In-page introduction video recorder (assets/js/intro-recorder.js) */
body.rec-open { overflow: hidden; }
.rec-overlay { position: fixed; inset: 0; z-index: 10000; background: #000; color: #fff; display: flex; flex-direction: column; font-family: system-ui, sans-serif; }
.rec-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec-preview.is-mirrored { transform: scaleX(-1); }
.rec-top, .rec-bottom { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.rec-top { padding-top: max(14px, env(safe-area-inset-top)); background: linear-gradient(rgba(0,0,0,.55), transparent); }
.rec-bottom { margin-top: auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.rec-overlay button { font: inherit; }
.rec-cancel, .rec-flip, .rec-saved, .rec-native { background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 8px 14px; font-size: .95rem; min-width: 0; width: auto; margin: 0; }
.rec-flip:disabled { opacity: .4; }
.rec-timer { font-variant-numeric: tabular-nums; font-size: 1.05rem; background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 999px; }
.rec-overlay.is-recording .rec-timer { background: #d32f2f; }
.rec-msg { position: relative; margin: auto 24px; text-align: center; font-size: 1.05rem; line-height: 1.4; }
.rec-button { width: 76px; height: 76px; flex: 0 0 76px; border-radius: 50%; border: 5px solid #fff; background: #e53935; margin: 0; padding: 0; }
.rec-button:disabled { opacity: .4; }
.rec-overlay.is-recording .rec-button { background: #e53935; box-shadow: inset 0 0 0 18px #000; border-radius: 50%; }
.rec-bottom { display: grid; grid-template-columns: 1fr auto 1fr; }
.rec-saved, .rec-native { justify-self: start; }
.rec-spacer { display: flex; justify-content: flex-end; grid-column: 3; }
.rec-bottom .rec-button { grid-column: 2; } /* stays centered when "Choose from my phone" hides */
/* Pause / Resume while recording (RET-290) */
.rec-pause { background: rgba(0,0,0,.45); color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 8px 16px; font-size: .95rem; min-width: 0; min-height: 44px; width: auto; margin: 0; }
.rec-pause[hidden] { display: none; }
.rec-pause:disabled { opacity: .4; }
.rec-overlay.is-paused .rec-timer { background: #f2994a; color: #1a1a1a; }
.rec-overlay.is-paused .rec-pause { background: #fff; color: #1a1a1a; border-color: #fff; font-weight: 600; }

/* "Choose a saved video" beside every record input (intro-video-check.js) */
button.iv-saved-btn, .share-step button.iv-saved-btn, .admin-form button.iv-saved-btn { display: inline-block; width: auto; margin: 8px 0 0; padding: 8px 14px; background: var(--mc-surface, #fff); color: var(--mc-text, #222); border: 1px solid var(--mc-border, #ccc); border-radius: 8px; font: inherit; font-size: .95rem; cursor: pointer; }
.share-step button.iv-saved-btn { width: 100%; }
.iv-form-status { margin: 6px 0 0; }

/* Ready to send / upload still in progress (includes/intro_uploads.php renderShareReadiness(), share-ready.js) */
[data-share-ready-show][hidden] { display: none !important; }
.share-ready { margin: 6px 0; padding: 8px 12px; border-radius: 8px; font-size: .95rem; }
.share-ready p { margin: 0 0 6px; }
.share-ready p:last-child { margin-bottom: 0; }
.share-ready.is-ready { background: #e8f6ee; color: #1d6b3a; font-weight: 600; }
.share-ready.is-ready span { font-weight: 400; }
.share-ready.is-pending { background: #fdf1e4; border: 1px solid #f2c79a; color: #6b4412; }
.iv-link-status, .iv-form-status { margin: 6px 0 0; font-size: .95rem; }
.iv-form-status.is-done { color: #1d6b3a; font-weight: 600; }
.iv-form-status.is-error { color: #b3261e; }
/* The upload bar at the bottom of every page (intro-upload.js) */
.iu-bar { position: fixed; left: 12px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); z-index: 9000; max-width: calc(100% - 100px); background: #2b2622; color: #fff; padding: 9px 14px; border-radius: 999px; font-size: .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.iu-bar.is-done { background: #1d6b3a; }
.iu-bar.is-error { background: #b3261e; border-radius: 12px; }
.iu-bar[hidden] { display: none; }

/* What a link holds (renderShareContents() in includes/intro_uploads.php) */
.share-contents { list-style: none; margin: 6px 0; padding: 0; font-size: .92rem; line-height: 1.45; }
.share-contents li { margin: 0; }
.share-contents li.is-warn { color: #b3261e; }

.share-links-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Share pages: album tiles read as albums to open (stacked edge + "Tap to open") */
body[data-share-token] .browse-grid { padding-top: 8px; }
body[data-share-token] .browse-tile { box-shadow: 0 -6px 0 -2px #cfc6b8, 0 -12px 0 -5px #e2dbd0, 0 4px 14px rgba(0,0,0,.14); }
body[data-share-token] .browse-tile-count { display: block; margin-top: 3px; }

/* The upload bar is background work: never in plain view on album pages, where a customer may be looking */
body.public:not(.editing) .iu-bar { display: none; }
.share-ready.is-archived { background: #f1ede7; color: #6b6259; }

/* My Card: "Use one you've already made" (admin/profile.php) */
.reuse-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.reuse-video { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid var(--mc-border, #e5ded3); border-radius: 10px; cursor: pointer; font-size: .9rem; position: relative; }
.reuse-video input { position: absolute; opacity: 0; pointer-events: none; }
.reuse-video img, .reuse-video-blank { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #2b2622; color: #fff; display: flex; align-items: center; justify-content: center; }
.reuse-video:has(input:checked) { border-color: var(--mc-accent, #0fa3ad); box-shadow: 0 0 0 2px var(--mc-accent, #0fa3ad); }
.reuse-video small { color: var(--mc-text-muted, #7a7066); }

/* My Card: the record button looks like its "Choose from my phone" neighbor */
.card-record-btn { display: inline-block; margin: 8px 8px 0 0; padding: 8px 14px; background: var(--mc-surface, #fff); color: var(--mc-text, #222); border: 1px solid var(--mc-border, #ccc); border-radius: 8px; font-size: .95rem; cursor: pointer; }

/* My Card: intro video library (admin/profile.php) */
.intro-library { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; }
.intro-library li { display: flex; gap: 12px; align-items: flex-start; padding: 8px; border: 1px solid var(--mc-border, #e5ded3); border-radius: 10px; }
.intro-library img, .intro-library .reuse-video-blank { width: 96px; height: 64px; flex: 0 0 96px; object-fit: cover; border-radius: 6px; }
.intro-library-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.intro-library-info small { color: #6e655b; }
.intro-library-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-form .intro-library-actions button { width: auto; margin: 0; padding: 6px 12px; min-height: 36px; font-size: .9rem; background: var(--mc-surface, #fff); color: var(--mc-text, #222); border: 1px solid var(--mc-border, #ccc); border-radius: 8px; }
.intro-library-add { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--mc-border, #e5ded3); }
.intro-library-add h3 { margin: 0 0 6px; font-size: 1rem; }
.intro-library-select { margin: 2px 0 8px 28px; max-width: calc(100% - 28px); }
.admin-form label.card-record-btn { display: inline-block; width: auto; color: var(--mc-text, #222); font-weight: 600; }

/* Saved shares and "Send to someone new" (share_links.php, the Share panel) */
.share-star { background: none; border: 0; padding: 0 6px 0 0; margin: 0; font-size: 1.35rem; line-height: 1; color: #b3a99c; cursor: pointer; min-width: 44px; min-height: 44px; vertical-align: middle; }
.share-star.is-on { color: #e0a800; }
.btn-send-new { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; margin-bottom: 8px; border-radius: 10px; background: var(--mc-accent, #0fa3ad); color: #fff; font-weight: 600; text-decoration: none; }
.share-saved-select { width: 100%; min-height: 48px; margin-top: 4px; }
.share-copy-note { background: #eef7f7; border: 1px solid #bfe3e5; border-radius: 10px; padding: 8px 12px; font-size: .92rem; }
.hierarchy-list .share-contents li { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0; display: block; }
.share-saved-select { font-size: 1rem; padding: 0 12px; border-radius: 10px; border: 1px solid var(--mc-border, #ccc); background: var(--mc-surface, #fff); }

.share-copy-note p { margin: 0 0 6px; }
.share-copy-note .copy-choice { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; font-size: .92rem; }
.share-copy-note .copy-choice input { margin-top: 3px; flex: 0 0 auto; }

.share-step .share-again { margin-bottom: 14px; }

/* ---------- Teams (admin/teams.php) and the Share box's Teams / People groups ---------- */
.member-group-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mc-text-dim); margin: 14px 0 6px; }
.team-new { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; max-width: 560px; }
.team-new label { flex: 1; }
.team-new button { width: auto; flex: none; }
.team-form fieldset { border: 0; padding: 0; margin: 6px 0 0; }
.team-form legend { font-weight: 600; margin-bottom: 4px; }
.team-form .btn-primary { width: auto; align-self: flex-start; }
.team-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; max-width: 560px; }
.team-list a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--mc-surface); border: 1px solid var(--mc-border); border-radius: var(--mc-radius); color: var(--mc-text); }
.team-list a:hover { border-color: var(--mc-accent); }
.team-list small, .team-albums small { color: var(--mc-text-dim); }
.team-people, .team-albums { margin: 6px 0 0; padding-left: 20px; line-height: 1.8; }
.team-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 40px; }
.team-actions button { width: auto; }
.team-actions .btn-secondary { background: var(--mc-surface); color: var(--mc-text); border: 1px solid var(--mc-border); }
.team-actions .btn-danger { background: var(--mc-danger); }
@media (max-width: 480px) { .team-new { flex-direction: column; align-items: stretch; } .team-new button { width: 100%; } }

/* ---------- Audit 2026-09-29: tap targets, overflow, small chrome ---------- */
.breadcrumbs a, .breadcrumbs > span { padding: 8px 13px; min-height: 36px; display: inline-flex; align-items: center; }
.admin-form .picker-scroll .tree-node { padding: 10px 6px; }
.library-filters a { padding: 8px 4px; display: inline-block; }
.library-pager { display: flex; gap: 10px; margin: 0 0 12px; }
.library-pager .btn-manage { min-height: 40px; padding: 8px 14px; text-decoration: none; display: inline-flex; align-items: center; }
.admin-form input[type="file"] { max-width: 100%; box-sizing: border-box; }
a.summary-tile { text-decoration: none; color: inherit; }
a.summary-tile:hover .summary-count { color: var(--mc-accent-hover, var(--mc-accent)); }
.upload-tray-close { width: 44px; height: 44px; }

/* ---------- Highlight reels (RET-216, assets/js/reel.js) ----------
   Picking: tap photos and videos in play order; each shows its number. Albums and YouTube tiles dim. */
body.reel-selecting .media-tile { cursor: pointer; }
body.reel-selecting .browse-tile,
body.reel-selecting .media-tile.is-youtube { opacity: 0.35; }
body.reel-selecting .media-tile.reel-picked { outline: 3px solid var(--mc-accent); outline-offset: 2px; }
body.reel-selecting .tile-grip,
body.reel-selecting .tile-menu-btn,
body.reel-selecting #share-fab,
body.reel-selecting #edit-fab,
body.reel-selecting .fb-launch { display: none !important; }
.reel-badge {
    position: absolute; top: 8px; right: 8px; z-index: 5;
    min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
    background: var(--mc-accent); color: #fff; font-weight: 700; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); pointer-events: none;
}
.reel-bar {
    position: fixed; left: 50%; transform: translateX(-50%); z-index: 860;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: min(560px, calc(100% - 24px)); box-sizing: border-box;
    background: var(--mc-surface); color: var(--mc-text);
    border: 1px solid var(--mc-border); border-radius: 16px; box-shadow: var(--mc-shadow);
    padding: 12px 14px;
}
.reel-bar[hidden] { display: none; }
.reel-bar-hint { margin: 0 0 8px; font-size: 0.92rem; color: var(--mc-text-dim); }
.reel-bar-row { display: flex; align-items: center; gap: 10px; }
.reel-bar-count { flex: 1; font-weight: 700; }
.reel-bar-row button { min-height: 44px; padding: 8px 16px; border-radius: 999px; font-weight: 600; }
.reel-bar-cancel { background: var(--mc-surface-alt); color: var(--mc-text); border: 1px solid var(--mc-border); }
.reel-bar-next:disabled { opacity: 0.45; }
.reel-list { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.reel-row {
    display: flex; align-items: center; gap: 10px; padding: 6px 8px;
    background: var(--mc-surface-alt); border: 1px solid var(--mc-border); border-radius: 10px;
}
.reel-row-num { width: 24px; text-align: center; font-weight: 700; color: var(--mc-accent); }
.reel-row img, .reel-row-noimg { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--mc-border); flex: none; }
.reel-row-kind { flex: 1; font-size: 0.92rem; }
.reel-row-btns { display: flex; gap: 4px; }
.reel-row-btns button {
    width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--mc-border);
    background: var(--mc-surface); color: var(--mc-text); font-size: 1rem; cursor: pointer;
}
.reel-row-btns button:disabled { opacity: 0.3; cursor: default; }
.reel-estimate { font-size: 0.9rem; color: var(--mc-text-dim); margin: 6px 0 12px; }
.reel-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.reel-actions .btn-primary { min-height: 44px; padding: 10px 18px; }
.reel-note {
    margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
    background: var(--mc-surface-alt); border: 1px solid var(--mc-border); font-size: 0.95rem;
}
.reel-note.is-failed { border-color: #d9534f; }

/* ---------- Trim a video (assets/js/video-trim.js, RET-217) ---------- */
html.vt-open, html.vt-open body { overflow: hidden; }
.vt-overlay {
    position: fixed; inset: 0; z-index: 1300; /* above the upload tray, the sheets and toasts; under the Menu */
    background: rgba(30, 24, 18, 0.55);
    display: flex; align-items: flex-end; justify-content: center;
}
.vt-sheet {
    background: var(--mc-surface); color: var(--mc-text);
    width: 100%; max-width: 680px; max-height: 100%; overflow-y: auto;
    border-radius: 16px 16px 0 0;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 10px;
}
@media (min-width: 640px) {
    .vt-overlay { align-items: center; padding: 20px; }
    .vt-sheet { border-radius: var(--mc-radius); }
}
.vt-head { display: flex; align-items: center; gap: 10px; }
.vt-head strong { flex: 1; font-size: 1.1rem; }
button.vt-close {
    background: var(--mc-surface-alt); color: var(--mc-text);
    width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; font-size: 1.3rem;
}
button.vt-close:hover { background: var(--mc-border); }
.vt-note { margin: 0; font-size: 0.9rem; color: var(--mc-text-dim); }
.vt-stage { background: #000; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 120px; }
.vt-video { display: block; width: 100%; max-height: 46vh; background: #000; }
.vt-cannot { color: #fff; margin: 0; padding: 20px; text-align: center; font-size: 0.9rem; }
.vt-track {
    position: relative; height: 48px; margin: 4px 14px;
    background: var(--mc-surface-alt); border-radius: 8px;
    touch-action: none; cursor: pointer; user-select: none;
}
.vt-range {
    position: absolute; top: 0; bottom: 0;
    background: rgba(15, 163, 173, 0.28);
    border-top: 3px solid var(--mc-accent); border-bottom: 3px solid var(--mc-accent);
    cursor: grab;
}
.vt-playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--mc-text); pointer-events: none; left: 0; }
button.vt-handle {
    position: absolute; top: -4px; bottom: -4px; width: 28px; margin-left: -14px; min-height: 0;
    padding: 0; border-radius: 8px; background: var(--mc-accent); color: #fff; cursor: ew-resize; touch-action: none;
}
button.vt-handle:hover { background: var(--mc-accent-hover); }
button.vt-handle::after { content: ""; position: absolute; left: 12px; top: 14px; bottom: 14px; width: 4px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
button.vt-handle:focus-visible { outline: 3px solid var(--mc-warm); outline-offset: 1px; }
.vt-readout { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; color: var(--mc-text-dim); font-variant-numeric: tabular-nums; }
.vt-length { font-weight: 600; color: var(--mc-text); text-align: center; }
.vt-error { margin: 0; color: var(--mc-danger); font-size: 0.9rem; }
.vt-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vt-spacer { flex: 1; }
.vt-actions .btn-pill, .vt-actions .btn-primary { min-height: 44px; }
.vt-confirm:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 420px) {
    .vt-play { flex: 1 1 100%; }
    .vt-spacer { display: none; }
    .vt-cancel, .vt-confirm { flex: 1; }
}
/* The tray's "Trim" on a video that is too long */
button.upload-row-trim { justify-self: start; margin-top: 2px; }

/* ---------- Captions (RET-291) ---------- */
/* A strip under a photo or video, only when one was written (.has-caption);
   an uncaptioned tile is exactly as before. The badges that normally sit on
   the tile's bottom edge move to its top so they stay on the picture. */
.media-caption {
    position: relative; z-index: 3; margin: 0;
    padding: 8px 11px 9px;
    background: #1e1b18; color: #f4efe9;
    font-size: 0.86rem; line-height: 1.35;
    overflow-wrap: anywhere;
}
.media-tile.has-caption .media-duration,
.public.editing .media-tile.has-caption .media-duration { top: 10px; bottom: auto; }
.media-tile.has-caption .media-processing,
.public.editing .media-tile.has-caption .media-processing { top: 10px; bottom: auto; }
/* Edit mode: clear of the drag grip and the ⋯ button in the top corners. */
.public.editing .media-tile.has-caption .media-duration { top: 14px; left: 54px; }
.public.editing .media-tile.has-caption .media-processing { top: 14px; right: 54px; }
/* The lightbox: the caption sits under the photo or video, never over its controls. */
.lightbox { flex-direction: column; }
.lightbox-caption {
    position: relative; z-index: 2;
    max-width: min(92vw, 760px); max-height: 5.4em; overflow-y: auto;
    margin: 12px 0 0; padding: 0 16px;
    color: #fff; font-size: 1rem; line-height: 1.4; text-align: center;
    overflow-wrap: anywhere;
}
.lightbox-caption[hidden] { display: none; }
.lightbox.has-caption .lightbox-content { max-height: calc(86vh - 5.4em); }
.lightbox.has-caption .lightbox-content img,
.lightbox.has-caption .lightbox-content video { max-height: calc(86vh - 5.4em); }
.lightbox.has-caption .lightbox-content iframe.lightbox-youtube { height: min(calc(86vh - 5.4em), 51.75vw); }
.mp-hint { margin: -4px 0 0; font-size: 0.85rem; color: var(--mc-text-dim); }