/*
 * JR Memory Tables Mobile Layout Refresh
 * v1.0.5
 *
 * Deliberately dormant until JS confirms this is a Memory Table page.
 */

@media (max-width: 767px) {

    /*
     * PAGE WIDTH
     * Use substantially more of the phone width, but keep a small,
     * even page gutter so the premium card treatment remains visible.
     */
    body.jr-mt-mobile-refresh #primary,
    body.jr-mt-mobile-refresh .content-area,
    body.jr-mt-mobile-refresh #main,
    body.jr-mt-mobile-refresh .site-main,
    body.jr-mt-mobile-refresh article.entry,
    body.jr-mt-mobile-refresh article.page,
    body.jr-mt-mobile-refresh .entry-content-wrap {
        box-sizing: border-box !important;
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.jr-mt-mobile-refresh .entry-content-wrap {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    body.jr-mt-mobile-refresh .entry-content {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*
     * MEMORY PAGE SHELLS / FORMS / ENTRY CARDS
     *
     * These selectors intentionally cover both legacy and consolidated
     * Memory Table markup. They affect only pages confirmed by JS.
     */
    body.jr-mt-mobile-refresh .memory-entry,
    body.jr-mt-mobile-refresh .memory-entry-wrapper,
    body.jr-mt-mobile-refresh .memory-form,
    body.jr-mt-mobile-refresh .memory-form-container,
    body.jr-mt-mobile-refresh .memory-table-wrapper,
    body.jr-mt-mobile-refresh .memory-table-container,
    body.jr-mt-mobile-refresh .jr-memory-entry,
    body.jr-mt-mobile-refresh .jr-memory-form,
    body.jr-mt-mobile-refresh .jr-memory-table-wrapper,
    body.jr-mt-mobile-refresh .jr-memory-table-container,
    body.jr-mt-mobile-refresh .ttv2-wrapper,
    body.jr-mt-mobile-refresh .ttv2-container,
    body.jr-mt-mobile-refresh [class*="memory-entry"],
    body.jr-mt-mobile-refresh [class*="memory-form"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * The screenshot shows the editor/table block being considerably
     * narrower than its parent. Make the wrapper use the available card
     * width, while the table remains the thing that scrolls.
     */
    body.jr-mt-mobile-refresh .table-container,
    body.jr-mt-mobile-refresh .jr-mt-scroll,
    body.jr-mt-mobile-refresh [class*="table-container"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.jr-mt-mobile-refresh .table-container table,
    body.jr-mt-mobile-refresh .jr-mt-scroll table {
        max-width: none !important;
    }

    /*
     * Description / controls above each table.
     */
    body.jr-mt-mobile-refresh .jr-mt-mobile-wide,
    body.jr-mt-mobile-refresh .memory-description,
    body.jr-mt-mobile-refresh .memory-description-container,
    body.jr-mt-mobile-refresh [class*="memory-description"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * Stats / totals blocks should follow the same width as the editor.
     */
    body.jr-mt-mobile-refresh .memory-stats,
    body.jr-mt-mobile-refresh [class*="memory-stats"],
    body.jr-mt-mobile-refresh [class*="stats-grid"],
    body.jr-mt-mobile-refresh [class*="memory-summary"] {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /*
     * COMMENTS
     * The comments and Leave a Reply areas in the screenshots are also
     * narrower than necessary. Let them follow the same mobile gutter.
     */
    body.jr-mt-mobile-refresh #comments,
    body.jr-mt-mobile-refresh .comments-area,
    body.jr-mt-mobile-refresh .comment-list,
    body.jr-mt-mobile-refresh .comment,
    body.jr-mt-mobile-refresh .comment-body,
    body.jr-mt-mobile-refresh #respond,
    body.jr-mt-mobile-refresh .comment-respond,
    body.jr-mt-mobile-refresh .comment-form {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.jr-mt-mobile-refresh .comment-list {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.jr-mt-mobile-refresh .comment-form textarea,
    body.jr-mt-mobile-refresh #comment {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * NEW JR BUTTON DESIGN
     */
    body.jr-mt-mobile-refresh .jr-mt-btn-primary,
    body.jr-mt-mobile-refresh .jr-mt-btn-compact,
    body.jr-mt-mobile-refresh input.jr-mt-btn-primary,
    body.jr-mt-mobile-refresh input.jr-mt-btn-compact {
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 12px 24px !important;
        border: 1px solid #aa8247 !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, #d5b26d 0%, #bd914d 100%) !important;
        color: #ffffff !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: none !important;
        box-shadow: 0 8px 20px rgba(91, 68, 55, .18) !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    body.jr-mt-mobile-refresh .jr-mt-btn-primary {
        width: min(100%, 310px) !important;
        min-height: 54px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
        font-size: 17px !important;
    }

    body.jr-mt-mobile-refresh .jr-mt-btn-compact {
        width: auto !important;
        min-width: 132px !important;
        min-height: 44px !important;
        padding: 10px 19px !important;
        font-size: 14px !important;
    }

    body.jr-mt-mobile-refresh .jr-mt-btn-primary:hover,
    body.jr-mt-mobile-refresh .jr-mt-btn-primary:focus,
    body.jr-mt-mobile-refresh .jr-mt-btn-compact:hover,
    body.jr-mt-mobile-refresh .jr-mt-btn-compact:focus {
        background: linear-gradient(180deg, #ddbc79 0%, #c69a54 100%) !important;
        border-color: #9e753e !important;
        color: #fff !important;
        transform: translateY(-1px) !important;
    }

    /*
     * Delete stays recognisably destructive rather than looking like
     * another Save/Continue action.
     */
    body.jr-mt-mobile-refresh .jr-mt-btn-danger,
    body.jr-mt-mobile-refresh input.jr-mt-btn-danger {
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 132px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 10px 19px !important;
        border: 1px solid #b87359 !important;
        border-radius: 999px !important;
        background: #fffaf5 !important;
        color: #9b553e !important;
        font-family: inherit !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-decoration: none !important;
        text-shadow: none !important;
        box-shadow: 0 6px 16px rgba(116, 68, 52, .10) !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /*
     * Center the main actions cleanly after their legacy width rules are
     * overridden.
     */
    body.jr-mt-mobile-refresh .jr-mt-action-row,
    body.jr-mt-mobile-refresh .jr-mt-main-action-wrap {
        box-sizing: border-box !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /*
     * Remove legacy giant dimensions from detected buttons.
     */
    body.jr-mt-mobile-refresh button.jr-mt-btn-primary,
    body.jr-mt-mobile-refresh a.jr-mt-btn-primary,
    body.jr-mt-mobile-refresh input.jr-mt-btn-primary,
    body.jr-mt-mobile-refresh button.jr-mt-btn-compact,
    body.jr-mt-mobile-refresh a.jr-mt-btn-compact,
    body.jr-mt-mobile-refresh input.jr-mt-btn-compact,
    body.jr-mt-mobile-refresh button.jr-mt-btn-danger,
    body.jr-mt-mobile-refresh a.jr-mt-btn-danger,
    body.jr-mt-mobile-refresh input.jr-mt-btn-danger {
        max-width: 100% !important;
        height: auto !important;
    }

    /*
     * v1.0.1 — POSITIONING FIX
     *
     * The live page has an extra BuddyPress/Memory Table wrapper:
     *   #bp-memory-form-wrapper
     *     #memory-forms-container
     *
     * That wrapper remained around 342px wide while the page content is
     * roughly 392px wide, which made the whole editor/table appear shifted
     * to the right. Expand and centre those exact wrappers rather than
     * forcing viewport widths on every WordPress ancestor.
     */
    body.jr-mt-mobile-refresh #bp-memory-form-wrapper {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    body.jr-mt-mobile-refresh #bp-memory-form-wrapper #memory-forms-container,
    body.jr-mt-mobile-refresh #memory-forms-container.jrmt-pr-memory-root {
        box-sizing: border-box !important;
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }

    body.jr-mt-mobile-refresh #memory-forms-container > .memory-entry,
    body.jr-mt-mobile-refresh #memory-forms-container .memory-entry.jr-mt-mobile-wide {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        transform: none !important;
    }

    /*
     * Keep the large top/bottom actions centred to the now-wider memory
     * wrapper. Their v1.0.0 visual design remains unchanged.
     */
    body.jr-mt-mobile-refresh #bp-memory-form-wrapper > .jr-mt-main-action-wrap,
    body.jr-mt-mobile-refresh #memory-forms-container + .jr-mt-main-action-wrap,
    body.jr-mt-mobile-refresh #bp-memory-form-wrapper .jr-mt-main-action-wrap {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /*
     * The actual table viewport should fill the wider Memory entry but keep
     * its horizontal swipe/scroll behaviour.
     */
    body.jr-mt-mobile-refresh #memory-forms-container .table-container,
    body.jr-mt-mobile-refresh #memory-forms-container [class*="table-container"],
    body.jr-mt-mobile-refresh #memory-forms-container .jr-mt-scroll {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /*
     * Comments were still carrying an additional Kadence/comments inset.
     * Bring them closer to the same left/right line as the Memory area
     * without removing the small premium gutter entirely.
     */
    body.jr-mt-mobile-refresh #comments.comments-area,
    body.jr-mt-mobile-refresh #comments,
    body.jr-mt-mobile-refresh .comments-area {
        box-sizing: border-box !important;
        width: calc(100% - 8px) !important;
        max-width: calc(100% - 8px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.jr-mt-mobile-refresh #comments .comment-list,
    body.jr-mt-mobile-refresh #comments #respond,
    body.jr-mt-mobile-refresh #comments .comment-respond,
    body.jr-mt-mobile-refresh #comments .comment-form {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /*
     * Neutralise the v1.0.0 viewport-width rule on nested page wrappers.
     * On this Kadence layout it can compound with the existing mobile
     * padding. Let the established parent layout own the page position.
     */
    body.jr-mt-mobile-refresh #primary,
    body.jr-mt-mobile-refresh .content-area,
    body.jr-mt-mobile-refresh #main,
    body.jr-mt-mobile-refresh .site-main,
    body.jr-mt-mobile-refresh article.entry,
    body.jr-mt-mobile-refresh article.page,
    body.jr-mt-mobile-refresh .entry-content-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * v1.0.3 — MOBILE SPACING / ALIGNMENT POLISH
     * These rules are intentionally scoped to the existing Memory page
     * body class so they apply immediately, without waiting for JS.
     */

    /* 1) Reduce the large blank area around the memory title. */
    body.jr-memory-page .jr-mt-title-shell {
        box-sizing: border-box !important;
        min-height: 0 !important;
        height: auto !important;
        padding-top: 26px !important;
        padding-bottom: 26px !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
    }

    body.jr-memory-page .jr-mt-title-shell .jr-mt-page-kicker,
    body.jr-memory-page .jr-mt-title-shell .jr-mt-page-title {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    body.jr-memory-page .jr-mt-page-kicker {
        margin-bottom: 6px !important;
    }

    body.jr-memory-page .jr-mt-page-title {
        line-height: 1.02 !important;
    }

    /*
     * Fallback for the existing premium title wrapper if JS has not yet
     * attached the helper class.
     */
    body.jr-memory-page .jrmt-pr-article [class*="hero"]:has(h1),
    body.jr-memory-page .jrmt-pr-article [class*="header"]:has(h1) {
        min-height: 0 !important;
    }

    /* 2) Smaller Add New Memory Table button. */
    body.jr-memory-page .jr-mt-btn-add-table {
        width: min(76%, 255px) !important;
        max-width: 255px !important;
        min-width: 0 !important;
        min-height: 48px !important;
        padding: 11px 22px !important;
        font-size: 16px !important;
        white-space: nowrap !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3) Centre the Add Memory Description title. */
    body.jr-memory-page .jr-mt-description-title {
        box-sizing: border-box !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 10px !important;
        text-align: center !important;
    }

    /* 4) Centre Add New Row. */
    body.jr-memory-page .jr-mt-add-row-wrap {
        box-sizing: border-box !important;
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    body.jr-memory-page .jr-mt-btn-add-row {
        width: auto !important;
        min-width: 132px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 5) Reduce Save all changes while preserving its existing navy style. */
    body.jr-memory-page .jr-mt-btn-save-all-changes {
        width: min(78%, 270px) !important;
        max-width: 270px !important;
        min-width: 0 !important;
        min-height: 50px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.jr-memory-page .jr-mt-main-action-wrap:has(.jr-mt-btn-add-table),
    body.jr-memory-page .jr-mt-main-action-wrap:has(.jr-mt-btn-save-all-changes) {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /*
     * Direct-ID fallbacks so the anti-flash styling is already close to the
     * final layout before JS runs.
     */
    body.jr-memory-page #bp-memory-form-wrapper,
    body.jr-memory-page #memory-forms-container {
        box-sizing: border-box !important;
    }



    /*
     * v1.0.5 — ROUND THE LEGACY MOBILE FRAME
     *
     * Keep the thin outer frame visible, but round it so it matches the
     * rest of the premium card styling.
     */
    body.jr-memory-page #bp-memory-form-wrapper #memory-forms-container,
    body.jr-mt-mobile-refresh #bp-memory-form-wrapper #memory-forms-container,
    body.jr-memory-page #memory-forms-container.jrmt-pr-memory-root,
    body.jr-mt-mobile-refresh #memory-forms-container.jrmt-pr-memory-root,
    body.jr-memory-page #memory-forms-container > .memory-entry,
    body.jr-mt-mobile-refresh #memory-forms-container > .memory-entry,
    body.jr-memory-page .memory-entry.jr-mt-mobile-wide,
    body.jr-mt-mobile-refresh .memory-entry.jr-mt-mobile-wide {
        border-radius: 22px !important;
    }

    /*
     * Some Memory Table builds draw that frame on a direct nested wrapper,
     * so round those layers too. We deliberately do not set overflow:hidden,
     * preserving horizontal table scrolling.
     */
    body.jr-memory-page #memory-forms-container > div,
    body.jr-mt-mobile-refresh #memory-forms-container > div {
        border-radius: 22px !important;
    }


    /*
     * v1.0.6 — GOLD OUTER FRAME
     * Keep the rounded frame from v1.0.5 and switch its visible line
     * from grey to the site's existing gold border colour.
     */
    body.jr-memory-page #bp-memory-form-wrapper #memory-forms-container,
    body.jr-mt-mobile-refresh #bp-memory-form-wrapper #memory-forms-container,
    body.jr-memory-page #memory-forms-container.jrmt-pr-memory-root,
    body.jr-mt-mobile-refresh #memory-forms-container.jrmt-pr-memory-root,
    body.jr-memory-page #memory-forms-container > .memory-entry,
    body.jr-mt-mobile-refresh #memory-forms-container > .memory-entry,
    body.jr-memory-page .memory-entry.jr-mt-mobile-wide,
    body.jr-mt-mobile-refresh .memory-entry.jr-mt-mobile-wide,
    body.jr-memory-page #memory-forms-container > div,
    body.jr-mt-mobile-refresh #memory-forms-container > div {
        border-color: transparent !important;
    }


    /*
     * v1.0.8 — MOBILE TABLE SCROLL HINT
     */
    body.jr-memory-page .jr-mt-scroll-hint,
    body.jr-mt-mobile-refresh .jr-mt-scroll-hint {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 10px 0 8px !important;
        padding: 0 12px !important;
        text-align: center !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        font-weight: 500 !important;
        color: #7a7064 !important;
        letter-spacing: 0 !important;
    }

    body.jr-memory-page .jr-mt-scroll-hint::before,
    body.jr-mt-mobile-refresh .jr-mt-scroll-hint::before {
        content: "↔";
        display: inline-block;
        margin-right: 6px;
        font-size: 14px;
        font-weight: 700;
        color: #aa8247;
        vertical-align: 0;
    }


    /*
     * v1.0.9 — SEPARATE INDIVIDUAL MEMORY BLOCKS
     *
     * Give each memory entry breathing room after its table/actions so the
     * next memory no longer appears visually joined to the previous one.
     */
    body.jr-memory-page #memory-forms-container > .memory-entry,
    body.jr-mt-mobile-refresh #memory-forms-container > .memory-entry,
    body.jr-memory-page #memory-forms-container .memory-entry.jr-mt-mobile-wide,
    body.jr-mt-mobile-refresh #memory-forms-container .memory-entry.jr-mt-mobile-wide {
        margin-bottom: 30px !important;
    }

    /*
     * Where the legacy build uses a generic direct wrapper instead of the
     * memory-entry class, add the same spacing only when that wrapper
     * contains the Delete Memory action.
     */
    body.jr-memory-page #memory-forms-container > div:has(.jr-mt-btn-danger),
    body.jr-mt-mobile-refresh #memory-forms-container > div:has(.jr-mt-btn-danger) {
        margin-bottom: 30px !important;
    }


    /*
     * v1.0.10 — REAL BREAK BETWEEN INDIVIDUAL MEMORIES
     *
     * v1.0.9 was spacing a higher-level wrapper which is not the element
     * separating consecutive memories on this build.  v1.0.10 inserts a
     * dedicated spacer immediately after each Delete Memory action row.
     */
    body.jr-memory-page .jr-mt-memory-separator,
    body.jr-mt-mobile-refresh .jr-mt-memory-separator {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        flex: 0 0 40px !important;
        clear: both !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }


    /*
     * v1.0.12 — SAFE MEMORY-TO-MEMORY SPACING
     *
     * Each memory is a sibling .memory-entry in the live DOM.  Put the
     * breathing room before every memory after the first instead of trying
     * to insert a spacer inside one of the scaled table wrappers.
     */
    body.jr-memory-page #memory-forms-container > .memory-entry + .memory-entry,
    body.jr-mt-mobile-refresh #memory-forms-container > .memory-entry + .memory-entry {
        box-sizing: border-box !important;
        padding-top: 44px !important;
    }

    /*
     * v1.0.12 supersedes the v1.0.10 injected spacer.  Keeping it out of
     * layout prevents double spacing and avoids interaction with the scale
     * wrappers.
     */
    body.jr-memory-page .jr-mt-memory-separator,
    body.jr-mt-mobile-refresh .jr-mt-memory-separator {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        flex: 0 0 0 !important;
    }

    /*
     * Consistent premium counter card for legacy/newly-created memories.
     * This visual is only added by JS when the source summary is positively
     * identified as a small, non-interactive five-line stats block.
     */
    body.jr-memory-page .jr-mt-stats-source-safe,
    body.jr-mt-mobile-refresh .jr-mt-stats-source-safe {
        display: none !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe,
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto 10px !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid #c49a58 !important;
        border-radius: 20px !important;
        background: rgba(246, 241, 231, .92) !important;
        box-shadow: none !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe__cell,
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__cell {
        box-sizing: border-box !important;
        min-width: 0 !important;
        min-height: 92px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 14px 10px !important;
        text-align: center !important;
        background: transparent !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe__cell:nth-child(1),
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__cell:nth-child(1),
    body.jr-memory-page .jr-mt-stats-card-safe__cell:nth-child(3),
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__cell:nth-child(3) {
        border-right: 1px solid rgba(170, 130, 71, .22) !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe__cell:nth-child(-n+4),
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__cell:nth-child(-n+4) {
        border-bottom: 1px solid rgba(170, 130, 71, .22) !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe__cell--complete,
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__cell--complete {
        grid-column: 1 / -1 !important;
        min-height: 90px !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe__label,
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__label {
        color: #746b5d !important;
        font-family: inherit !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: .09em !important;
        text-transform: uppercase !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe__value,
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__value {
        color: #17233f !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 28px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    body.jr-memory-page .jr-mt-stats-card-safe__cell--complete .jr-mt-stats-card-safe__value,
    body.jr-mt-mobile-refresh .jr-mt-stats-card-safe__cell--complete .jr-mt-stats-card-safe__value {
        color: #aa7b2d !important;
        font-size: 31px !important;
    }


    /*
     * v1.0.13 — use a real sibling spacer for the memory-to-memory break.
     * Reset v1.0.12's padding method so the spacing is controlled in one
     * predictable place.
     */
    body.jr-memory-page #memory-forms-container > .memory-entry + .memory-entry,
    body.jr-mt-mobile-refresh #memory-forms-container > .memory-entry + .memory-entry {
        padding-top: 0 !important;
    }

    body.jr-memory-page #memory-forms-container > .jr-mt-memory-gap-safe,
    body.jr-mt-mobile-refresh #memory-forms-container > .jr-mt-memory-gap-safe {
        display: block !important;
        position: relative !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        flex: 0 0 46px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    /*
     * v1.0.14 — visible premium divider between separate memories.
     * The spacer was already creating the gap; this adds the missing line.
     */
    body.jr-memory-page #memory-forms-container > .jr-mt-memory-gap-safe::before,
    body.jr-mt-mobile-refresh #memory-forms-container > .jr-mt-memory-gap-safe::before {
        content: "" !important;
        position: absolute !important;
        left: 12px !important;
        right: 12px !important;
        top: 50% !important;
        height: 1px !important;
        background: rgba(170, 130, 71, .58) !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: translateY(-50%) !important;
    }

}


/* v1.0.16 — preserve native Create Memory Table -> Save All behaviour */
@media (max-width: 767px) {
    body.jr-mt-mobile-refresh .jr-mt-btn-create-table {
        display: flex !important;
        width: min(78%, 265px) !important;
        max-width: 265px !important;
        min-width: 0 !important;
        min-height: 44px !important;
        margin: 12px auto 0 !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* If the native script has already changed the label to Save All, keep
       the same centred position and let the compact Save All treatment apply. */
    body.jr-mt-mobile-refresh .jr-mt-btn-create-table.jr-mt-btn-compact {
        width: min(78%, 265px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================
 * v1.0.21 — AI Search "Coming soon" tooltip (all viewports)
 * ============================================================ */
#memory-forms-container .jrmt-coming-soon-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    overflow: visible !important;
    max-width: 100% !important;
    outline: none !important;
}

/* The Search control is deliberately disabled. Let the wrapper receive
 * hover/touch/focus so the explanatory tooltip still works. */
#memory-forms-container .jrmt-coming-soon-wrap > .Search-btn,
#memory-forms-container .jrmt-coming-soon-wrap > button.Search-btn {
    pointer-events: none !important;
    cursor: help !important;
}

#memory-forms-container .jrmt-coming-soon-tooltip {
    position: absolute !important;
    z-index: 99999 !important;
    left: 50% !important;
    bottom: calc(100% + 9px) !important;
    transform: translate(-50%, 4px) !important;
    min-width: max-content !important;
    max-width: 150px !important;
    padding: 7px 11px !important;
    border: 1px solid rgba(168, 116, 41, 0.72) !important;
    border-radius: 10px !important;
    background: #152443 !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(18, 31, 56, 0.20) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease !important;
}

#memory-forms-container .jrmt-coming-soon-tooltip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    border-top-color: #152443 !important;
}

#memory-forms-container .jrmt-coming-soon-wrap:hover .jrmt-coming-soon-tooltip,
#memory-forms-container .jrmt-coming-soon-wrap:focus .jrmt-coming-soon-tooltip,
#memory-forms-container .jrmt-coming-soon-wrap:focus-within .jrmt-coming-soon-tooltip,
#memory-forms-container .jrmt-coming-soon-wrap.jrmt-tooltip-open .jrmt-coming-soon-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, 0) !important;
}

@media (max-width: 767px) {
    #memory-forms-container .jrmt-coming-soon-tooltip {
        font-size: 11px !important;
        padding: 6px 9px !important;
        bottom: calc(100% + 7px) !important;
    }
}


/* ============================================================
 * v1.0.22 — desktop-safe AI Search tooltip
 * Rendered directly under <body> so scroll/table overflow cannot clip it.
 * ============================================================ */
@media (min-width: 768px) {
    /* Desktop uses the fixed body-level tooltip below. */
    #memory-forms-container .jrmt-coming-soon-tooltip {
        display: none !important;
    }

    .jrmt-coming-soon-tooltip-fixed {
        position: fixed !important;
        z-index: 2147483646 !important;
        transform: translate(-50%, -100%) translateY(-4px) !important;
        min-width: max-content !important;
        max-width: 180px !important;
        padding: 7px 11px !important;
        border-radius: 9px !important;
        border: 1px solid rgba(199, 161, 91, 0.65) !important;
        background: #152443 !important;
        color: #fff !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.20) !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        white-space: nowrap !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 120ms ease, visibility 120ms ease, transform 120ms ease !important;
    }

    .jrmt-coming-soon-tooltip-fixed::after {
        content: '' !important;
        position: absolute !important;
        left: 50% !important;
        top: 100% !important;
        transform: translateX(-50%) !important;
        border: 6px solid transparent !important;
        border-top-color: #152443 !important;
    }

    .jrmt-coming-soon-tooltip-fixed.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -100%) translateY(0) !important;
    }
}

/* ============================================================
 * v1.0.31 — remove the decorative centre diamond above the
 * Memory Table/Test Memory title while keeping its divider lines.
 * JS adds these helper classes only to the detected top ornament.
 * ============================================================ */
body.jr-memory-page .jr-mt-top-diamond-remove,
body.jrmt-premium-redesign-active .jr-mt-top-diamond-remove,
body.jr-mt-mobile-refresh .jr-mt-top-diamond-remove {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.jr-memory-page .jr-mt-top-diamond-before::before,
body.jrmt-premium-redesign-active .jr-mt-top-diamond-before::before,
body.jr-mt-mobile-refresh .jr-mt-top-diamond-before::before {
    content: none !important;
    display: none !important;
}

body.jr-memory-page .jr-mt-top-diamond-after::after,
body.jrmt-premium-redesign-active .jr-mt-top-diamond-after::after,
body.jr-mt-mobile-refresh .jr-mt-top-diamond-after::after {
    content: none !important;
    display: none !important;
}