/* Wedding Moments — guest page
   Navy #152039, gold #ba9b4e, chartreuse #d3ce1c
   Mobile-first: nearly every guest is on a phone, at night, on poor wifi. */

:root {
    --navy:       #152039;
    --navy-lift:  #1d2a47;
    --navy-deep:  #0f1829;
    --gold:       #ba9b4e;
    --chartreuse: #d3ce1c;
    --paper:      #f2efe6;
    --muted:      #9aa4bb;
    --danger:     #e07a6b;

    --bg:           var(--navy);
    --surface:      var(--navy-lift);
    --surface-deep: var(--navy-deep);
    --ink:          var(--paper);
    --ink-muted:    var(--muted);
    --accent:       var(--gold);
    --accent-ink:   #1c2436;   /* dark text on gold, always — gold is a
                                   mid-tone colour and needs dark text on it
                                   regardless of anything else */
    --field-bg:     rgba(0, 0, 0, 0.22);
    --line:         rgba(186, 155, 78, 0.28);
    --shadow:       0 10px 28px rgba(8, 12, 22, 0.35);
    --shadow-lg:    0 18px 44px rgba(8, 12, 22, 0.45);

    --display: "Playfair Display", Georgia, serif;
    --body:    "Work Sans", system-ui, -apple-system, sans-serif;

    --r-sm:   10px;
    --r-md:   16px;
    --r-lg:   22px;
    --r-pill: 999px;
    --radius: 10px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    transition: background 0.25s ease, color 0.25s ease;
    font-family: var(--body);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}

/* ---------- Accessibility ----------------------------------------------- */

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

/* ---------- Masthead ---------------------------------------------------- */

.masthead {
    text-align: center;
    padding-bottom: 2rem;
}

.crest {
    display: block;
    width: min(8rem, 34vw);
    height: auto;
    margin: 0 auto 1rem;
}

.eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1rem;
}

.masthead h1 {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(2.1rem, 9vw, 2.9rem);
    line-height: 1.1;
    margin: 0;
    color: var(--ink);
}

/* A thin rule under the names, in the gold — the one decorative flourish. */
.masthead h1::after {
    content: "";
    display: block;
    width: 3rem;
    height: 1px;
    margin: 1.1rem auto 0;
    background: var(--gold);
}

.date {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--ink-muted);
    margin: 0.9rem 0 0;
}

/* ---------- Card -------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1.5rem 1.25rem;
}

.lede {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: var(--ink-muted);
    text-align: center;
}

/* ---------- File pickers ------------------------------------------------ */

.pickers {
    display: grid;
    gap: 0.55rem;
}

.picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 0.75rem;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--field-bg);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.picker:hover,
.picker:focus-within {
    border-color: var(--gold);
    background: var(--field-bg);
}

.picker input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.picker-icon {
    display: block;
    width: 2.1rem;
    height: 2.1rem;
    color: var(--gold);
}

.picker-icon svg {
    width: 100%;
    height: 100%;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.picker-label {
    font-size: 1rem;
    color: var(--ink);
}

.picker-label {
    line-height: 1.3;
}

.picker-hint {
    font-size: 0.78rem;
    color: var(--ink-muted);
    text-align: center;
    margin: 0.75rem 0 0;
}

/* Library first and larger: most guests share shots they already took.
   The camera is a secondary route, styled as a quiet strip beneath. */
.picker-library {
    border-style: solid;
    border-color: var(--gold);
    background: rgba(186, 155, 78, 0.07);
    padding: 1.9rem 1rem;
}

.picker-library .picker-label {
    font-size: 1.05rem;
    color: var(--ink);
}

.picker-sub {
    font-size: 0.78rem;
    color: var(--ink-muted);
}

.picker-camera {
    flex-direction: row;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-style: solid;
    border-color: var(--line);
    background: transparent;
}

.picker-camera .picker-icon { width: 1.15rem; height: 1.15rem; }

.picker-camera .picker-label {
    font-size: 0.88rem;
    color: var(--ink-muted);
}

.picker-camera:hover .picker-label { color: var(--ink); }

/* ---------- Chosen files ------------------------------------------------ */

.chosen {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.chosen li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.83rem;
    color: var(--ink-muted);
    padding: 0.5rem 0.7rem;
    background: var(--field-bg);
    border-left: 2px solid var(--gold);
}

.chosen .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chosen .size {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.chosen li.too-big {
    border-left-color: #e07a6b;
    color: #e6a99f;
}

.chosen li.big {
    border-left-color: var(--chartreuse);
}

.size-note {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--chartreuse);
    background: rgba(211, 206, 28, 0.08);
    border-left: 2px solid var(--chartreuse);
    padding: 0.6rem 0.7rem;
    margin: 0.6rem 0 0;
}

/* ---------- Optional name and message ----------------------------------- */

.extras {
    margin: 1.1rem 0;
}

.extras summary {
    list-style: none;
    cursor: pointer;
    text-align: center;
    font-size: 0.83rem;
    color: var(--gold);
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--line);
}

.extras summary::-webkit-details-marker { display: none; }

.extras .extras-shut { display: none; }
.extras[open] .extras-open { display: none; }
.extras[open] .extras-shut { display: inline; color: var(--ink-muted); }

.extras[open] summary { border-bottom-color: transparent; }

.reassure {
    text-align: center;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--ink-muted);
    margin: 0.75rem 0 0;
}

/* ---------- Fields ------------------------------------------------------ */

.fields {
    display: grid;
    gap: 0.9rem;
    margin: 0.9rem 0 0;
}

.field {
    display: block;
}

.field-label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.field-label em {
    font-style: normal;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: none;
    font-size: 0.75rem;
}

.field input,
.field textarea {
    width: 100%;
    font-family: var(--body);
    font-size: 1rem;  /* 16px minimum, or iOS zooms the page on focus */
    font-weight: 300;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.7rem 0.8rem;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: rgba(154, 164, 187, 0.6);
}

.field input:focus,
.field textarea:focus {
    outline: 2px solid var(--chartreuse);
    outline-offset: 1px;
    border-color: transparent;
}

/* ---------- Share button ------------------------------------------------ */

.share,
.again {
    width: 100%;
    font-family: var(--body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--accent-ink);
    background: var(--gold);
    border: 0;
    border-radius: var(--r-pill);
    padding: 0.95rem 1rem;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.1s ease;
}

.share:hover:not(:disabled),
.again:hover {
    background: var(--chartreuse);
}

.share:active:not(:disabled) { transform: translateY(1px); }

.share:disabled {
    background: rgba(186, 155, 78, 0.24);
    color: rgba(242, 239, 230, 0.45);
    cursor: default;
}

.share:focus-visible,
.again:focus-visible,
.picker:focus-within {
    outline: 2px solid var(--chartreuse);
    outline-offset: 2px;
}

.error {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
    color: #e6a99f;
    text-align: center;
}

/* Same trap as the viewer: any of these panels given a display value would
   ignore [hidden]. Guard them all in one place. */
[hidden] { display: none !important; }

/* ---------- Busy state -------------------------------------------------- */

.busy {
    text-align: center;
    padding: 1.5rem 0;
}

.spinner {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto 1.1rem;
    border: 2px solid rgba(186, 155, 78, 0.25);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.busy-title {
    font-family: var(--display);
    font-size: 1.15rem;
    margin: 0 0 0.4rem;
}

.busy-note {
    font-size: 0.82rem;
    color: var(--ink-muted);
    margin: 0 0 1.2rem;
}

.bar {
    height: 2px;
    background: rgba(186, 155, 78, 0.2);
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0;
    background: var(--chartreuse);
    transition: width 0.25s ease;
}

/* ---------- Done state -------------------------------------------------- */

.done {
    text-align: center;
    padding: 1.25rem 0 0.5rem;
}

.done-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--chartreuse);
}

.done-mark svg {
    width: 1.4rem;
    height: 1.4rem;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.done h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.5rem;
    margin: 0 0 0.4rem;
}

.done p {
    color: var(--ink-muted);
    font-size: 0.92rem;
    margin: 0 0 1.5rem;
}

.again {
    width: auto;
    padding: 0.7rem 1.6rem;
    background: transparent;
    border: 1px solid var(--gold);
    color: var(--gold);
}

.again:hover {
    background: var(--gold);
    color: var(--accent-ink);
}

/* ---------- Gallery ----------------------------------------------------- */

.gallery {
    margin-top: 2.75rem;
}

.gallery-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.1rem;
}

.gallery-head h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.15rem;
    margin: 0;
}

.count {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    flex: none;
}

.empty {
    color: var(--ink-muted);
    font-size: 0.92rem;
    text-align: center;
    padding: 2.5rem 1rem;
    margin: 0;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
}

/* CSS columns rather than a JS masonry library: photos flow into two columns
   at their natural height, which suits a mix of portrait and landscape phone
   shots far better than square crops. Each tile carries its real aspect ratio
   so the layout doesn't jump as lazy-loaded images arrive.

   column-width rather than a fixed column-count: with only two or three
   photos, forcing two columns stretches each one too wide and looks sparse.
   column-width lets the browser drop to a single column until there's
   enough content to fill more, and grow to three on wider screens. */
.masonry {
    column-width: 9.5rem;
    column-gap: 0.5rem;
}

@media (min-width: 34rem) {
    .masonry { column-width: 12rem; }
}

.tile {
    position: relative;
    display: block;
    margin: 0 0 0.5rem;
    break-inside: avoid;
    overflow: hidden;
    background: var(--surface-deep);
    border-radius: var(--radius);
    /* Without this, Safari occasionally splits a figure across columns. */
    -webkit-column-break-inside: avoid;
}

.tile img {
    width: 100%;
    height: auto;
    display: block;
    background: var(--surface-deep);
}

.tile-open {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tile-open:focus-visible {
    outline: 2px solid var(--chartreuse);
    outline-offset: -2px;
}

.tile.is-video .video-mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    color: var(--gold);
    pointer-events: none;
}

.tile.is-video .video-mark svg {
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(15, 24, 41, 0.6);
    border-radius: 50%;
    padding: 0.5rem;
}

/* ---------- Hearts ------------------------------------------------------ */

.heart {
    position: absolute;
    z-index: 3;
    top: 0.3rem;
    right: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    /* Visually the same size as before, but the tap target is at least 44px
       in each direction — the usual minimum for a reliable one-handed tap,
       which matters more than usual here given the setting. */
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.3rem 0.5rem;
    background: rgba(15, 24, 41, 0.55);
    border: 0;
    border-radius: 999px;
    color: rgba(242, 239, 230, 0.85);
    font-family: var(--body);
    font-size: 0.72rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.heart svg {
    width: 0.95rem;
    height: 0.95rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.heart.on {
    color: var(--chartreuse);
}

.heart.on svg {
    fill: var(--chartreuse);
    stroke: var(--chartreuse);
}

.heart .n {
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.heart .n:empty { display: none; }

.heart:focus-visible {
    outline: 2px solid var(--chartreuse);
    outline-offset: 1px;
}

/* A quick pulse on tap — the only animation on the page, and it earns its
   place: it confirms the tap landed before the server has answered. */
.heart.pop svg { animation: pop 0.32s ease; }

@keyframes pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ---------- Tile caption ------------------------------------------------ */

.tile-meta {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.75rem 0.55rem 0.5rem;
    background: linear-gradient(to top, rgba(15, 24, 41, 0.92), transparent);
    font-size: 0.72rem;
    line-height: 1.35;
    pointer-events: none;
}

.tile-meta strong {
    display: block;
    font-weight: 500;
    color: var(--ink);
}

.tile-meta span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(242, 239, 230, 0.75);
}

/* ---------- Load more --------------------------------------------------- */

.more {
    display: block;
    width: 100%;
    margin-top: 1rem;
    font-family: var(--body);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 0.75rem;
    cursor: pointer;
}

.more:hover { background: rgba(186, 155, 78, 0.1); }
.more:disabled { color: var(--ink-muted); cursor: default; }

/* ---------- Toast ------------------------------------------------------- */

.tally {
    text-align: center;
    font-size: 0.83rem;
    color: var(--accent-ink);
    background: var(--chartreuse);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    margin: 1rem auto 0;
    width: fit-content;
    max-width: 100%;
}

/* Sits above the iOS home indicator, and never covers the share button. */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: calc(100vw - 2rem);
    padding: 0.7rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--gold);
    border-radius: 999px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    font-size: 0.88rem;
    animation: rise 0.24s ease;
}

@keyframes rise {
    from { opacity: 0; transform: translate(-50%, 0.75rem); }
}

.toast-mark {
    display: grid;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
    color: var(--chartreuse);
}

.toast-mark svg {
    width: 100%;
    height: 100%;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Foot -------------------------------------------------------- */

.foot {
    margin-top: 2.5rem;
    text-align: center;
}

.foot p {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: rgba(154, 164, 187, 0.65);
    margin: 0;
}

/* ---------- Motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ---------- Gallery tiles: open button ---------------------------------- */

.tile-open {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tile-open:focus-visible {
    outline: 2px solid var(--chartreuse);
    outline-offset: -2px;
}

.tile.is-video {
    display: block;
    border: 1px solid var(--line);
}

.tile.is-video .poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tile.is-video .video-mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    color: var(--gold);
    pointer-events: none;
}

.tile.is-video .video-mark svg {
    width: 2.4rem;
    height: 2.4rem;
    background: rgba(15, 24, 41, 0.6);
    border-radius: 50%;
    padding: 0.5rem;
}

/* ---------- Viewer ------------------------------------------------------ */

/* display:grid below would override the hidden attribute's display:none,
   leaving the viewer open on page load — so hidden has to win explicitly. */
.viewer[hidden] { display: none; }

.viewer {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(9, 15, 26, 0.97);
    display: grid;
    grid-template-rows: 1fr auto;
    animation: fade 0.18s ease;
}

@keyframes fade { from { opacity: 0; } }

.viewer-stage {
    display: grid;
    place-items: center;
    padding: 3.5rem 1rem 0.5rem;
    min-height: 0;
}

.viewer-stage img,
.viewer-stage video {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: var(--radius);
}

/* On a phone, 100% of the viewport is a sensible photo size. On a large
   desktop monitor it isn't — a full-resolution photo stretched edge to edge
   reads as oversized rather than "viewing a photo". Cap it once the screen
   is wide enough that the difference actually matters. */
@media (min-width: 48rem) {
    .viewer-stage img,
    .viewer-stage video {
        max-width: min(90vw, 60rem);
        max-height: min(85vh, 40rem);
    }
}

.viewer-stage .loading {
    color: var(--ink-muted);
    font-size: 0.85rem;
}

.viewer-meta {
    padding: 1rem 1.25rem 2rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--ink-muted);
}

.viewer-meta strong {
    display: block;
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--ink);
    margin-bottom: 0.25rem;
}

.viewer-close,
.viewer-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--ink);
    background: rgba(21, 32, 57, 0.85);
    border: 1px solid var(--line);
    border-radius: 50%;
    cursor: pointer;
}

.viewer-close { top: 0.9rem; right: 0.9rem; }

.viewer-nav { top: 50%; transform: translateY(-50%); }
.viewer-nav.prev { left: 0.6rem; }
.viewer-nav.next { right: 0.6rem; }

.viewer-close svg,
.viewer-nav svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.viewer-close:focus-visible,
.viewer-nav:focus-visible {
    outline: 2px solid var(--chartreuse);
    outline-offset: 2px;
}

.viewer-nav[hidden] { display: none; }

body.viewer-open { overflow: hidden; }


/* ---------- Pending / offline queue ------------------------------------- */

.pending {
    text-align: center;
    font-size: 0.8rem;
    color: var(--chartreuse);
    margin: 0.6rem 0 0;
}

.countdown { color: var(--gold); }

/* ---------- Add to home screen ------------------------------------------ */

.a2hs {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
    padding: 0.9rem 2.2rem 0.9rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    font-size: 0.82rem;
    color: var(--ink-muted);
}

.a2hs img { border-radius: 6px; flex: none; }
.a2hs p { margin: 0; }

.a2hs-close {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ink-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

/* ---------- My moments -------------------------------------------------- */

.mine-link {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.82rem;
}

.mine-link a {
    color: var(--gold);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 0.15rem;
}

.own { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.own-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
}

.own-item img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: cover;
    border-radius: 2px;
    flex: none;
}

.own-meta { flex: 1; min-width: 0; }

.own-msg {
    margin: 0;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.own-when { margin: 0.2rem 0 0; font-size: 0.72rem; color: var(--ink-muted); }

.own-remove {
    font-family: var(--body);
    font-size: 0.75rem;
    color: var(--ink-muted);
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    flex: none;
}

.own-remove:hover { color: #e6a99f; border-color: rgba(224, 122, 107, 0.5); }

.card .more { display: block; text-align: center; text-decoration: none; margin-top: 1rem; }


.noscript {
    margin: 0;
    padding: 0.9rem 1.25rem;
    background: var(--gold);
    color: var(--accent-ink);
    font-size: 0.88rem;
    text-align: center;
}


/* ---------- Resume banner ------------------------------------------------ */
/* If a guest switches apps mid-upload and comes back, the busy panel is still
   showing progress, but it's easy to land back on the page and not notice
   anything happened while away. This banner appears briefly on return. */

.resume {
    position: fixed;
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 61;
    background: var(--surface);
    border: 1px solid var(--gold);
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--ink);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    animation: rise 0.24s ease;
}

.resume[hidden] { display: none; }