/* 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;
    --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-nav { display: flex; gap: 12px; margin-right: auto; }
.admin-logout { margin-left: auto; }
.admin-link { margin-left: auto; font-weight: 600; display: none; }
.public.editing .admin-link { display: inline; }

.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 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: 1000;
    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-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; }
.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); }

/* ---------- Upload progress ---------- */
.upload-progress { margin-top: 10px; display: flex; align-items: center; gap: 10px; }
.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); }

@media (max-width: 600px) {
    .hierarchy-row { flex-wrap: wrap; }
    .hierarchy-actions { flex-direction: row; align-items: center; }
}

/* ---------- 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: 20px;
    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); }

/* ---------- 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); }
body.editing #edit-fab { background: var(--mc-accent-hover); }
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: 12px; right: 12px;
    background: var(--mc-surface-alt); color: var(--mc-text);
    border: none; border-radius: 50%; width: 36px; height: 36px;
    font-size: 1.3rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.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-select-items { background: var(--mc-surface-alt); color: var(--mc-text); }

/* Handing a link to the customer (share-handoff.js): QR code, then Text / Email / Share / Copy. */
.handoff { display: flex; flex-direction: column; gap: 10px; }
.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; }

/* Slim non-blocking bar shown during selection mode -- unlike .share-panel
   this never covers the tiles, so they stay tappable underneath it. */
.share-selection-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 500;
    background: var(--mc-surface);
    box-shadow: 0 -4px 16px rgba(60, 45, 20, 0.15);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 10px;
}
.share-selection-bar[hidden] { display: none; }
.share-selection-bar span { flex: 1; font-weight: 600; }
.share-selection-bar button { width: auto; min-width: 84px; }
#share-selection-cancel { background: var(--mc-surface-alt); color: var(--mc-text); }

/* 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); }
.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-link { margin-left: auto; }
.public.editing .offline-link { display: inline; }
.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; }
@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; }
}

/* ---------- 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: 950;
    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-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; }

/* =====================================================================
   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); }
.public-topbar .offline-link + .admin-link { margin-left: 0; }

/* 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 {
    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%);
}
.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 */
.edit-bar {
    display: none;
    position: sticky; top: var(--topbar-h); z-index: 9;
    background: #0d7f87; color: #fff;
    box-shadow: 0 4px 14px rgba(13, 100, 106, 0.25);
}
.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; }
.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; }
    /* More buttons may be off to the right: fade the edge so it reads as scrollable. */
    .edit-bar-actions {
        -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
        mask-image: linear-gradient(to right, #000 82%, transparent);
        padding-right: 28px;
    }
}
@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; }

.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; }

/* 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-logo { max-height: 50px; max-width: 160px; }
.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; }
}