/* Mobile styles remain authoritative below 1024px. Only new desktop markup is hidden here. */
.desktop-only { display: none !important; }
@media (max-width: 1023px) {
    .desktop-event-showcase { display: contents; }
    /* .event-card is shared by Events page's "Popular Today" (.desktop-event-showcase) and Home's
       "Upcoming events" rail (.home-events) -- the date badge is a desktop-only overlay (styled
       further down as an absolute overlay on the image); on mobile, with no such positioning, it
       fell into the card's flex row as raw unstyled text between the image and the title. Hidden
       on both, not just the Events page, since the card's own date line already shows the date. */
    .desktop-event-showcase .desktop-event-date-badge,
    .home-events .desktop-event-date-badge { display: none !important; }
    .desktop-event-showcase .desktop-event-company,
    .desktop-event-showcase .desktop-event-price { display: none !important; }
}
@media (min-width: 1024px) {
    .desktop-home-rail { display: contents; }
    .app-body, .desktop-account-body { --desktop-side-width: 330px; --desktop-yellow: #ffd700; --desktop-pink: #ff1493; --desktop-cream: #fff9e9; --desktop-border: 3px solid #111; --desktop-shadow: 5px 5px 0 #111; background: var(--desktop-cream); color: #111; padding-top: 102px; }
    .desktop-only { display: flex !important; }
    .desktop-member-header { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 78px; background: var(--desktop-yellow); border-bottom: var(--desktop-border); align-items: center; justify-content: space-between; gap: 24px; padding: 0 max(24px, calc((100vw - 1560px)/2)); }
    .desktop-member-brand { display: flex; align-items: center; width: 132px; height: 73px; text-decoration: none; }
    .desktop-member-brand img { width: 100%; height: 100%; object-fit: contain; }
    .desktop-member-brand > span { color: var(--desktop-pink); font-size: 35px; }
    .desktop-member-header-actions { display: flex; align-items: center; gap: 20px; }
    .desktop-icon-link { display: grid; place-items: center; width: 40px; height: 40px; color: #111; border-radius: 8px; }
    .desktop-icon-link .icon { width: 26px; height: 26px; }
    .desktop-member-greeting { display: flex; align-items: center; gap: 10px; color: #111; text-decoration: none; font-weight: 800; }
    .desktop-member-greeting > span:nth-child(2) { display: flex; gap: 5px; align-items: center; max-width: none; white-space: nowrap; }
    .desktop-member-greeting > span:nth-child(2) strong { font-weight: 900; }
    .desktop-member-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; background: #ffc4e3; color: #111; border: 2px solid #111; border-radius: 50%; font-size: 19px; font-weight: 900; overflow: hidden; }
    .desktop-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .desktop-member-sidebar { position: absolute; left: max(24px, calc((100vw - 1560px)/2)); top: 102px; width: var(--desktop-side-width); max-height: none; overflow: visible; flex-direction: column; border: var(--desktop-border); box-shadow: var(--desktop-shadow); background: #fff; border-radius: 9px; padding: 10px 0; scrollbar-width: thin; }
    .desktop-member-nav, .desktop-member-secondary { display: grid; gap: 5px; padding: 0 8px; }
    /* Logout (added after FAQ, 2026-10-07) is a <form><button> -- POST, same as the mobile Settings
       list's logout row -- not a plain link, so it needs its own selector alongside the `a` rules
       below rather than a GET <a href> that would skip the server's session-destroy logic. The <form>
       itself is display:contents so it doesn't disturb the nav's own grid layout/gap. */
    .desktop-member-logout { display: contents; }
    .desktop-member-nav a, .desktop-member-secondary a, .desktop-member-logout button { display: flex; gap: 12px; align-items: center; min-height: 49px; padding: 10px; border: 2px solid transparent; border-radius: 7px; text-decoration: none; background: none; color: #111; font-size: 14px; font-weight: 750; line-height: 1.3; width: 100%; text-align: left; font-family: inherit; cursor: pointer; }
    .desktop-member-sidebar .icon { width: 23px; height: 23px; flex: 0 0 23px; }
    .desktop-member-nav a.active, .desktop-member-secondary a.active { background: var(--desktop-pink); border-color: #111; box-shadow: 3px 3px 0 #111; }
    .desktop-member-sidebar a:hover:not(.active), .desktop-member-logout button:hover { background: #fff6c7; }
    .desktop-member-secondary { border-top: 2px solid #111; margin-top: 14px; padding-top: 14px; }
    .desktop-member-profile { display: flex; align-items: center; gap: 9px; border-top: 2px solid #111; margin-top: 14px; padding: 16px 12px; color: #111; text-decoration: none; min-width: 0; }
    .desktop-member-profile > span:nth-child(2) { min-width: 0; flex: 1; overflow-wrap: anywhere; }
    .desktop-member-profile strong { display: block; font-size: 13px; }
    .desktop-member-profile small { display: block; font-size: 11px; color: #66566b; margin-top: 5px; }
    .desktop-member-profile > .icon { width: 15px; flex-basis: 15px; }
    .desktop-member-motto { color: #a90060; font-size: 22px; font-weight: 900; font-style: italic; line-height: 1.25; padding: 10px 18px; margin: 0; }
    .desktop-member-motto span { padding-left: 10px; color: var(--desktop-pink); }
    .app-shell { max-width: 1560px; min-height: calc(100vh - 102px); margin: 0 auto; padding: 0 24px 30px calc(var(--desktop-side-width) + 48px); background: transparent; }
    /* A guest page (layouts/member-settings.ejs's `isGuest`) never includes partials/member-desktop,
       so there is no left sidebar to reserve this space FOR -- the padding-left above became a dead
       gap with no matching padding on the right, visibly off-center (user screenshot, 2026-10-07:
       "left and right side space is not same"). Reset to match the right padding once there is
       nothing on the left to make room for. */
    /* Follow-up (2026-10-07, user screenshot): guest view's content was still stretching edge to edge
       with only a thin 24px gutter -- for a logged-OUT visitor there's no sidebar competing for width,
       so give it real breathing room on both sides instead of just mirroring the old sidebar gap. */
    .app-shell-guest { padding-left: max(110px, calc((100vw - 1000px)/2)); padding-right: max(110px, calc((100vw - 1000px)/2)); }
    .app-header-group { display: none; }
    .app-main { padding: 0; gap: 24px; min-width: 0; }
    .settings-topbar { background: #fff; color: #111; border: var(--desktop-border); box-shadow: var(--desktop-shadow); border-radius: 9px; margin: 0 0 26px; padding: 15px 18px; }
    .settings-title { color: #111; font-size: 22px; text-align: left; }
    /* the yellow back arrow is redundant on desktop -- the left sidebar is always visible, so there's
       no "how do I get back" need the way there is on a mobile single-screen flow. Mobile keeps it. */
    .settings-back { display: none; }
    .desktop-home-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--desktop-side-width); grid-template-rows: auto auto 1fr; align-items: start; gap: 24px; }
    .desktop-home-welcome { grid-column: 1; grid-row: 1; flex-direction: column; justify-content: center; padding: 26px; background: var(--desktop-yellow); border: var(--desktop-border); border-radius: 8px; box-shadow: var(--desktop-shadow); }
    .desktop-home-welcome h1 { font-size: clamp(29px, 2.9vw, 43px); letter-spacing: -1.4px; line-height: 1.1; margin: 0 0 12px; font-weight: 900; }
    .desktop-home-welcome p { font-size: 16px; margin: 0; line-height: 1.5; }
    .desktop-home-welcome span { color: #a90060; }
    .desktop-home-main > .post-composer-row { grid-column: 1; grid-row: 2; margin: 0; border: var(--desktop-border); border-radius: 8px; box-shadow: var(--desktop-shadow); padding: 16px; background: #fff; min-width: 0; }
    .desktop-home-main .post-composer-input { min-width: 0; flex: 1; }
    .desktop-home-main .post-composer-placeholder { font-size: 13px; }
    .desktop-compose-action { align-items: center; justify-content: center; border: 2px solid #111; box-shadow: 3px 3px 0 #111; background: var(--desktop-pink); padding: 12px 14px; border-radius: 6px; white-space: nowrap; color: #111; font-weight: 900; font-size: 13px; }
    .desktop-home-feed { grid-column: 1; grid-row: 3; min-width: 0; }
    .desktop-home-feed .home-section-head h2 { font-size: 23px; }
    .desktop-home-feed .post-feed { gap: 22px; }
    .desktop-home-feed .post-card { border-radius: 8px; box-shadow: var(--desktop-shadow); padding: 18px; }
    .desktop-home-feed .post-author-name { font-size: 16px; }
    .desktop-home-feed .post-time { font-size: 12px; }
    .desktop-home-feed .post-caption { font-size: 15px; line-height: 1.6; grid-row: 2; }
    .desktop-home-feed .post-images { height: clamp(260px, 27vw, 440px); border-radius: 6px; }
    .desktop-home-feed .post-actions { border-top: 1px solid #d9d2cf; padding-top: 12px; flex-wrap: wrap; }
    .desktop-home-feed .post-action { border: 0; border-radius: 4px; padding: 7px 8px; font-size: 13px; }
    .desktop-home-rail { display: grid; grid-column: 2; grid-row: 1 / span 3; align-content: start; gap: 24px; min-width: 0; }
    .desktop-home-rail .home-section { padding: 16px; background: #fff; border: var(--desktop-border); border-radius: 8px; box-shadow: var(--desktop-shadow); gap: 16px; min-width: 0; }
    .desktop-home-rail .home-section-head { flex-wrap: wrap; gap: 6px; }
    .desktop-home-rail .home-section-head h2 { font-size: 17px; text-transform: none; }
    .desktop-home-rail .home-section-head h2 .icon { display: none; }
    .desktop-home-rail .home-jobs .home-section-head { padding: 10px; background: #ffe4f0; border-radius: 7px; }
    .desktop-home-rail .home-hscroll { display: grid; gap: 16px; overflow-x: hidden; overflow-y: auto; max-height: 460px; padding: 0 4px 3px 0; scrollbar-width: thin; }
    .desktop-home-rail .job-card { width: 100%; flex-basis: auto; min-width: 0; border: 1px solid #dcd6cf; box-shadow: none; background: #fffdf7; border-radius: 7px; padding: 13px; }
    .desktop-home-rail .job-card-title { font-size: 15px; }
    .desktop-home-rail .job-card-meta { font-size: 12px; }
    .desktop-home-rail .job-card-apply { background: var(--desktop-yellow); color: #111; border: 2px solid #111; border-radius: 5px; padding: 8px 14px; box-shadow: 2px 2px 0 #111; }
    /* Event card sizing/appearance for the rail is unified with every other page's event cards
       in the "Consistent desktop event sizing" block below (.desktop-home-rail selectors added
       there) -- previously this block gave the rail's own fixed 290x400px/190px-image card, which
       only applied on non-Home pages (Home nests the rail inside .app-main, so it got the other
       block's sizing instead), making the same widget render two different sizes depending on page. */
    .desktop-event-action { display: block; text-align: center; background: var(--desktop-yellow); color: #111; border: 3px solid #111; box-shadow: 3px 3px 0 #111; border-radius: 0; padding: 10px; text-transform: uppercase; font-size: 12px; font-weight: 900; }
    /* visible badge styling lives in the "Consistent desktop event sizing" block below, the single
       source of truth for every event card everywhere. */
    .app-main > .home-hscroll { display: grid; grid-template-columns: repeat(4, minmax(230px, 1fr)); gap: 18px; overflow-x: auto; padding: 2px 4px 10px 2px; }
    /* Per-card sizing for this section is unified with every other event card in the
       "Consistent desktop event sizing" block below -- see .app-body .app-main .event-card there. */
    .desktop-event-showcase { background: transparent; margin: -8px -24px 0; padding: 22px 24px 28px; }
    .desktop-event-showcase .jobs-section-title { color: #111; margin-top: 0; }
    /* Card sizing/company/price/date styling for this showcase is unified with every other event
       card in the "Consistent desktop event sizing" block below (.desktop-event-showcase is nested
       inside .app-main, so those higher-specificity rules already applied here in practice; the
       rules removed from this block were dead code that no longer matched anything on screen). */
    .desktop-event-showcase .desktop-event-action { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 20px; height: 56px; padding: 14px 10px; font-size: 16px; line-height: 20px; }
    .desktop-member-perks { flex-direction: column; gap: 15px; padding: 22px; border: var(--desktop-border); border-radius: 8px; background: #ffc4e3; box-shadow: var(--desktop-shadow); }
    .desktop-member-perks h2 { display: flex; align-items: center; gap: 9px; font-size: 20px; margin: 0; }
    .desktop-member-perks p { margin: 0; font-size: 14px; line-height: 1.6; }
    .desktop-member-perks a { align-self: flex-start; padding: 10px 15px; background: var(--desktop-yellow); border: 2px solid #111; box-shadow: 3px 3px 0 #111; border-radius: 5px; font-weight: 900; color: #111; text-decoration: none; }
    .app-main > .offer-card-list, .app-main > .event-card-list { display: grid; grid-template-columns: repeat(auto-fit, 290px); justify-content: start; gap: 24px; }
    /* .event-card-big sizing for this grid is unified with every other event card in the
       "Consistent desktop event sizing" block below (higher-specificity, applied later). */
    .app-main > .offer-card-list .offer-card { box-shadow: var(--desktop-shadow); border-radius: 9px; }
    .app-main > .offer-card-list .offer-card-photo { height: 220px; }
    .offer-card-body { flex-wrap: wrap; }
    .offer-card-text { flex-basis: 150px; }
    .settings-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .settings-row { margin: 0; }
    .jobs-section-title { margin: 4px 0 0; font-size: 24px; letter-spacing: -.4px; }
    .job-card-list, .event-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .job-card-big, .event-card-big { min-width: 0; background: #fff; border: var(--desktop-border); border-radius: 8px; box-shadow: var(--desktop-shadow); }
    .job-card-big-body, .event-card-big-body { min-width: 0; padding: 17px; }
    .job-card-big-title, .event-card-big-title { font-size: 18px; font-weight: 900; }
    .jobs-search-row { max-width: 760px; margin: 0 auto; }
    .search-input-wrap { box-shadow: 3px 3px 0 #111; border-color: #111; background: #fff; }
    .notification-list, .participation-list, .saved-job-list, .saved-event-list { display: grid; gap: 16px; max-width: 920px; margin: 0 auto; width: 100%; }
    .notification-card, .participation-card, .saved-job-card, .saved-event-card { background: #fff; border: var(--desktop-border); border-radius: 8px; box-shadow: 4px 4px 0 #111; }
    .member-faq-intro { box-shadow: 5px 5px 0 #111; }
    .member-faq-item { box-shadow: 3px 3px 0 #111; }
    .detail-card, .detail-panel, .profile-card { background: #fff; border: var(--desktop-border); box-shadow: var(--desktop-shadow); border-radius: 8px; }
    .app-placeholder { min-height: 340px; background: #fff; border: var(--desktop-border); border-radius: 8px; box-shadow: var(--desktop-shadow); }
    .post-composer-row { min-width: 0; }
    .member-faq { max-width: 960px; margin: 0 auto; }
    .detail-card { border-radius: 10px; box-shadow: 4px 4px 0 #111; }
    .detail-section p, .rich-text { font-size: 15px; line-height: 1.7; }
    /* mobile's fixed-height object-fit:cover (member-app.css) crops a poster-style banner image
       whenever it isn't wide enough for that fixed box. height:auto scales the image to the card's
       real width at its own aspect ratio first -- a WIDE image never hits max-height, so it shows
       in full, uncropped (object-fit is a no-op once the box already matches the image exactly).
       Only a tall/square image gets capped by max-height, and THAT box is filled edge-to-edge with
       cover (crops the overflow) rather than letterboxed with contain, so there is never a dead gutter.
       img-only selector: .detail-banner-empty (the no-image placeholder) shares the .detail-banner
       class but is a flex box centering an icon, not an image -- it still needs a real fixed height. */
    img.detail-banner { height: auto; max-height: 480px; object-fit: cover; }
    .detail-banner-empty { height: 320px; }
    /* mobile's near-zero 2px horizontal padding on .detail-card only looks right because .detail-card
       has no visible border/background there -- it's an invisible wrapper. On desktop the card gets a
       real white background + border + shadow (rule above), so that same 2px padding made every
       section's text touch the card edge. Give the card real inset here (banner stays full-bleed to
       match its own rounded top corners; every other direct child gets a side margin instead). */
    .detail-card { padding: 28px 0 28px; gap: 20px; }
    .detail-card > *:not(.detail-banner):not(.detail-banner-wrap) { margin-left: 28px; margin-right: 28px; }
    /* `.detail-card` is `display: grid` (member-app.css) -- every plain child (p/dl/ul) already gets
       sized correctly by Grid's default stretch alignment, which fills the track MINUS the item's own
       margin. `.btn.block`'s mobile `width: 100%` (member-form.css) fights that: 100% of the track
       PLUS the 28px+28px margin above overflows the card by 56px, spilling the button's right edge
       into the desktop right rail -- bug report (2026-10-07): "Back to Home" button broken on
       /member/enrollment/:id. `width: auto` removes the conflicting explicit width and lets Grid's
       own stretch sizing (same mechanism `.detail-action` below already relies on) do the right thing. */
    .detail-card > .btn.block { width: auto; }
    /* pages with a hero banner (event-detail, some participation-detail states) need it flush against
       the card's top edge to match its own rounded corners -- pages with no banner (job-detail,
       job-profile, jobs-filter, participation-success) fall through to the 28px padding-top above,
       which they need since their first child would otherwise touch the top border directly. The
       banner is sometimes wrapped in .detail-banner-wrap (clickable lightbox hook on event-detail),
       so both the bare image and the wrapper qualify as the card's flush-top banner. */
    .detail-card:has(> .detail-banner:first-child), .detail-card:has(> .detail-banner-wrap:first-child) { padding-top: 0; }
    /* the mobile "Join Now"/status button is intentionally full-width for a narrow phone card;
       stretched to a wide desktop card it became a huge yellow bar. Cap it to a normal button size. */
    .detail-action { width: auto; max-width: 320px; display: inline-block; text-align: center; padding: 14px 32px; }
    .desktop-account-body .member-shell { max-width: 1560px; margin: 0 auto; padding: 0 24px 30px calc(var(--desktop-side-width) + 48px); min-height: calc(100vh - 102px); }
    .desktop-account-body .member-page { display: block; padding: 0; }
    .desktop-account-body .member-hero { display: none; }
    .desktop-account-body .member-card { width: 100%; max-width: none; }
    .desktop-account-body .member-topbar { background: var(--desktop-yellow); }
    .desktop-account-body .member-topbar-title { color: #111; }
    /* both redundant on desktop -- the desktop shell's own left sidebar already gets you back to
       Settings/Home (the back arrow is only load-bearing on mobile, which has no persistent nav),
       and the desktop masthead already shows the Lipstick Society brand/logo up top, so this
       second circular mascot logo inside the card is a duplicate. Mobile keeps both unchanged --
       this whole block only loads on Account among layouts/member.ejs's 3 pages (Register/Login
       never set desktopMember, so member-desktop.css never reaches them at all). */
    .desktop-account-body .member-back { display: none; }
    .desktop-account-body .member-avatar { display: none; }
    .desktop-account-body .member-body { padding: 30px; }
    .desktop-member-header a:focus-visible, .desktop-member-sidebar a:focus-visible, .desktop-member-perks a:focus-visible { outline: 3px solid #85004c; outline-offset: 4px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
    .app-body, .desktop-account-body { --desktop-side-width: 320px; }
    .desktop-member-nav a, .desktop-member-secondary a { font-size: 12px; gap: 8px; }
    .app-shell, .desktop-account-body .member-shell { padding-left: calc(var(--desktop-side-width) + 48px); }
    .app-shell-guest { padding-left: max(110px, calc((100vw - 1000px)/2)); padding-right: max(110px, calc((100vw - 1000px)/2)); }
    .desktop-home-main { grid-template-columns: minmax(0, 1fr) var(--desktop-side-width); gap: 18px; }
    .desktop-home-welcome { padding: 20px; }
    .desktop-compose-action { padding: 10px; font-size: 11px; }
    .desktop-home-main .post-composer-input .icon { display: none; }
    .desktop-home-main .post-composer-row { flex-wrap: wrap; }
    .desktop-home-rail .home-section { padding: 12px; }
    .app-main > .offer-card-list, .app-main > .event-card-list, .job-card-list, .event-card-list { grid-template-columns: 1fr; }
}

/* Shared desktop frame; wrappers do not participate in the mobile layout. */
.desktop-page-content { display: contents; }
.desktop-shared-rail { display: none; }
@media (min-width: 1024px) {
    .desktop-shared-shell { display: grid; grid-template-columns: minmax(0, 1fr) var(--desktop-side-width); align-items: start; gap: 24px; }
    .desktop-page-content { display: block; min-width: 0; }
    .desktop-shared-rail { display: block; min-width: 0; }
    .desktop-shared-rail .desktop-home-rail { display: grid; }
    .desktop-shared-shell .app-main > .event-card-list,
    .desktop-shared-shell .job-card-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
    .desktop-shared-shell .app-main > .event-card-list .event-card-big { width: 100%; min-width: 0; }
}

/* Consistent desktop event sizing. Mobile keeps member-app.css unchanged. */
@media (min-width: 1024px) {
    .app-body .app-main .event-card-list,
    .desktop-event-showcase .home-hscroll {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
        gap: 18px; padding: 0 8px 8px 0; overflow: visible;
    }
    .desktop-home-rail .home-events .home-hscroll { padding: 0 10px 10px 0; }
    /* .desktop-home-rail variants below make the "Upcoming Events" rail widget use this exact same
       card design everywhere it appears -- whether the rail sits inside .app-main (Home page, which
       embeds member-right-rail.ejs directly in its feed column) or as the sibling <aside
       class="desktop-shared-rail"> used by every other app-shell page. Before this fix the two
       placements picked up different, unrelated sizing rules and rendered at different widths/heights. */
    .app-body .app-main .event-card,
    .app-body .app-main .event-card-list .event-card-big,
    .desktop-home-rail .event-card {
        width: 100%; min-width: 0; height: auto; min-height: 0;
        display: flex; flex-direction: column; position: relative;
        background: #fff; border: 4px solid #111; border-radius: 16px;
        box-shadow: 6px 6px 0 #111; padding: 0; gap: 0; overflow: hidden;
    }
    .app-body .app-main .event-card-photo,
    .app-body .app-main .event-card-image,
    .app-body .app-main .event-card-big-photo-wrap,
    .desktop-home-rail .event-card-photo,
    .desktop-home-rail .event-card-image {
        width: 100%; height: 140px; min-height: 0; aspect-ratio: auto;
        flex: none; margin: 0; border: 0; border-bottom: 4px solid #111;
        border-radius: 0; object-fit: cover; background: #ffe3ef;
    }
    .app-body .app-main .event-card-big-photo { height: 100%; width: 100%; object-fit: cover; }
    .app-body .app-main .event-card-body,
    .app-body .app-main .event-card-big-body,
    .desktop-home-rail .event-card-body {
        display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 200px;
        box-sizing: border-box; padding: 12px; gap: 6px; background: #fff;
    }
    .app-body .app-main .event-card-title,
    .app-body .app-main .event-card-big-title,
    .desktop-home-rail .event-card-title {
        font-size: 14px; line-height: 18px; height: 36px; min-height: 36px;
        margin: 0; color: var(--desktop-pink); font-weight: 900; text-transform: uppercase;
        white-space: normal; overflow-wrap: anywhere; display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .app-body .app-main .desktop-event-company,
    .app-body .app-main .event-card-big-company,
    .desktop-home-rail .desktop-event-company { display: flex; align-items: center; gap: 8px; min-height: 28px; min-width: 0; color: #5b6472; font-size: 12px; }
    .app-body .app-main .desktop-event-company img,
    .app-body .app-main .desktop-event-company > span,
    .app-body .app-main .event-card-big-logo,
    .app-body .app-main .event-card-big-avatar,
    .desktop-home-rail .desktop-event-company img,
    .desktop-home-rail .desktop-event-company > span { width: 28px; height: 28px; flex: 0 0 28px; border: 2px solid #111; border-radius: 50%; object-fit: cover; }
    .app-body .app-main .desktop-event-company strong,
    .app-body .app-main .event-card-big-company > span:last-child,
    .desktop-home-rail .desktop-event-company strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-body .app-main .event-card-meta,
    .app-body .app-main .event-card-big-venue,
    .desktop-home-rail .event-card-meta { display: flex; font-size: 12px; line-height: 18px; color: #111; margin: 0; }
    /* the date/time line is redundant now that the date badge (below) overlays the image --
       hidden on desktop only; mobile still shows it (no badge there, see member-app.css). */
    .app-body .app-main .event-card-date,
    .app-body .app-main .event-card-big-meta,
    .desktop-home-rail .event-card-date { display: none; }
    .app-body .app-main .desktop-event-date-badge,
    .desktop-home-rail .desktop-event-date-badge {
        display: grid; position: absolute; z-index: 2; top: 10px; left: 10px;
        min-width: 54px; padding: 6px 8px; background: #fff; color: #111;
        border: 3px solid #111; border-radius: 10px; box-shadow: 4px 4px 0 #111;
        text-align: center; line-height: 1.1;
    }
    .app-body .app-main .desktop-event-date-badge strong,
    .desktop-home-rail .desktop-event-date-badge strong { display: block; font-size: 20px; font-weight: 900; }
    .app-body .app-main .desktop-event-date-badge small,
    .desktop-home-rail .desktop-event-date-badge small { display: block; margin-top: 2px; color: var(--desktop-pink); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .3px; }
    /* Coming Soon events have no date to show in the badge -- same box, just its own two-line label
       instead of a day number, in the brand pink so it reads as a status rather than a date. */
    .app-body .app-main .desktop-event-date-badge.coming-soon,
    .desktop-home-rail .desktop-event-date-badge.coming-soon { background: var(--desktop-pink); border-color: #111; }
    .app-body .app-main .desktop-event-date-badge.coming-soon small,
    .desktop-home-rail .desktop-event-date-badge.coming-soon small { color: #fff; font-size: 11px; margin-top: 0; }
    .app-body .app-main .desktop-event-price,
    .app-body .app-main .event-card-big-bottom,
    .desktop-home-rail .desktop-event-price { position: static; order: 10; align-self: flex-end; margin-top: auto; padding-top: 8px; }
    .app-body .app-main .desktop-event-price,
    .app-body .app-main .event-card-price,
    .desktop-home-rail .desktop-event-price { width: max-content; max-width: 100%; padding: 6px 16px; margin-bottom: 0; background: #22c55e; color: #fff; border: 2px solid #111; border-radius: 999px; box-shadow: none; font-size: 12px; line-height: 18px; font-weight: 900; }
    .app-body .app-main .event-card-price { margin-top: 0; }
}

.desktop-event-save-wrap { display: contents; }
@media (min-width: 1024px) {
    .desktop-event-save-wrap { display: block; position: relative; min-width: 0; }
    .desktop-event-save-wrap > .event-card { height: 100%; }
    .desktop-event-save { position: absolute; top: 10px; right: 10px; z-index: 5; margin: 0; }
}

/* Report form: desktop only; mobile retains its existing layout. */
@media (min-width: 1024px) {
    .app-main > .safety-report-form {
        display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0;
        box-sizing: border-box; padding: clamp(18px, 2vw, 30px); gap: 18px;
        background: #fff; border: 3px solid #111; border-radius: 14px; box-shadow: 5px 5px 0 #111;
    }
    .safety-report-form > * { min-width: 0; grid-column: 1 / -1; }
    .safety-report-form .report-target-summary {
        width: 100%; box-sizing: border-box; padding: 18px !important; margin: 0 0 6px !important;
        background: #fff9e9 !important; border: 2px solid #111 !important; box-shadow: none !important;
    }
    .safety-report-form .report-target-summary p { overflow-wrap: anywhere; font-size: 14px !important; line-height: 1.65 !important; white-space: pre-line; }
    .safety-report-form .post-avatar { flex-shrink: 0; }
    .safety-report-form .form-section-label { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
    .safety-report-form .safety-report-reasons { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin-bottom: 4px !important; gap: 12px !important; }
    .safety-report-reasons .checkbox { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; box-sizing: border-box; margin: 0; padding: 14px !important; transition: background .15s; }
    .safety-report-reasons .checkbox:hover { background: #fff9e9 !important; }
    .safety-report-reasons .checkbox:has(input:checked) { background: #ffe3ef !important; border-color: #c40068 !important; }
    .safety-report-reasons .checkbox:focus-within { outline: 3px solid #ffd700; outline-offset: 2px; }
    .safety-report-reasons input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: #c40068; }
    .safety-report-reasons .checkbox > span { line-height: 1.45; overflow-wrap: anywhere; }
    .safety-report-form textarea.input { width: 100%; box-sizing: border-box; min-height: 150px; resize: vertical; border: 2px solid #111; border-radius: 10px; padding: 16px; box-shadow: none; font-size: 14px; line-height: 1.6; }
    .safety-report-form textarea:focus { outline: 3px solid #ffd700; outline-offset: 2px; }
    .safety-report-form .safety-report-actions { display: flex !important; flex-wrap: wrap; gap: 14px !important; margin-top: 0 !important; padding-top: 18px; border-top: 1px solid #e5dfe2; }
    .safety-report-actions .btn { width: auto; min-height: 48px; border: 2px solid #111; border-radius: 9px; padding: 12px 20px; font-size: 13px; }
    .safety-report-actions button.btn { background: #ffd700; color: #111; box-shadow: 3px 3px 0 #111; }
}
/* Member reporting on phones/tablets; deliberately scoped to this form. */
@media (max-width: 1023px) {
    .app-main > .safety-report-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; min-width: 0; box-sizing: border-box; padding: 16px; background: #fff; border: 3px solid #111; border-radius: 18px; box-shadow: 4px 4px 0 #111; }
    .safety-report-form > * { grid-column: 1 / -1; min-width: 0; }
    .safety-report-form .report-target-summary { width: 100%; box-sizing: border-box; padding: 14px !important; margin-bottom: 4px !important; background: #fff9e9 !important; border: 2px solid #111 !important; box-shadow: none !important; }
    .safety-report-form .report-target-summary p { overflow-wrap: anywhere; white-space: pre-line; line-height: 1.6 !important; }
    .safety-report-form .report-target-summary strong { overflow-wrap: anywhere; }
    .safety-report-form .post-avatar { flex-shrink: 0; }
    .safety-report-form .form-section-label { font-size: 12px; letter-spacing: .5px; line-height: 1.5; margin: 0; }
    .safety-report-form .safety-report-reasons { grid-template-columns: minmax(0, 1fr); gap: 10px !important; margin-bottom: 4px !important; }
    .safety-report-reasons .checkbox { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; margin: 0; padding: 12px !important; box-sizing: border-box; }
    .safety-report-reasons .checkbox > span { font-size: 14px !important; line-height: 1.5; overflow-wrap: anywhere; }
    .safety-report-reasons input { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: #c40068; }
    .safety-report-reasons .checkbox:has(input:checked) { background: #ffe3ef !important; border-color: #c40068 !important; }
    .safety-report-reasons .checkbox:focus-within { outline: 3px solid #ffd700; outline-offset: 2px; }
    .safety-report-form textarea.input { width: 100%; min-width: 0; box-sizing: border-box; min-height: 144px; padding: 14px; font-size: 16px; line-height: 1.5; border: 2px solid #111; border-radius: 12px; box-shadow: none; resize: vertical; }
    .safety-report-form textarea:focus { outline: 3px solid #ffd700; outline-offset: 2px; }
    .safety-report-form .safety-report-actions { grid-template-columns: minmax(0, 1fr); gap: 12px !important; margin-top: 0 !important; padding-top: 16px; border-top: 1px solid #e5dfe2; }
    .safety-report-actions .btn { width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px; border: 2px solid #111; border-radius: 12px; font-size: 13px; white-space: normal; text-align: center; }
    .safety-report-actions button.btn { background: #ffd700; color: #111; box-shadow: 3px 3px 0 #111; }
}