body {
    font-family: sans-serif;
    background-color: #f4f4f9;
    color: #333;
    margin: 0;
}

.profile-container {
    padding: 100px 2rem 2rem 2rem;
    max-width: 1200px;
    width: 90%;
    margin: 2rem auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
}

.recipe-card-mini {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s;
}

.recipe-card-mini:hover {
    transform: translateY(-2px);
}

#other-recipes-list {
    list-style: none;
    padding: 0;
}

#other-recipes-list li {
    background-color: #f8f9fa;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    border-radius: 4px;
    cursor: pointer;
}

#other-recipes-list li:hover {
    background-color: #e9ecef;
}

/* Fix for recipe actions overlapping tags on profile page */
.recipe-card .recipe-actions {
    position: static;
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
}



/* Vertical Stack Layout for Profile Page Recipe Cards */
#featured-recipes-container .recipe-card .recipe-body {
    flex-direction: column;
}

#featured-recipes-container .recipe-card .recipe-image,
#featured-recipes-container .recipe-card .recipe-content {
    width: 100%;
}

#featured-recipes-container .recipe-card .recipe-tags {
    margin-bottom: 1rem;
}

#featured-recipes-container .recipe-card .recipe-image {
    min-height: 250px;
    /* Reducing height slightly for vertical card balance */
    border-radius: 8px 8px 0 0;
    /* Rounded top only */
}

#featured-recipes-container .recipe-card .recipe-image img {
    border-radius: 8px 8px 0 0;
}

/* Author Card Styles */
.author-card {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}

.author-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.author-info i {
    font-size: 2.5rem;
    color: #6c757d;
}

.author-info span {
    font-weight: 600;
    color: #333;
    font-size: 1.1rem;
}

/* Profile Tabs Styling */
.profile-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 0px;
    /* Wrap onto multiple rows instead of forcing a horizontal scrollbar on
       normal desktop widths. Mobile media query overrides to nowrap + scroll. */
    overflow-x: visible;
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #ccc transparent;
}

/* Custom Scrollbar for Webkit (Chrome/Safari/Edge) */
.profile-tabs::-webkit-scrollbar {
    height: 6px;
}

.profile-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.profile-tabs::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

.profile-tabs::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

.tab-btn {
    background: none;
    border: none;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    color: #555;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    /* Prevent tabs from shrinking */
}

.tab-btn:hover {
    color: var(--primary-color, #2c3e50);
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.tab-btn.active {
    color: var(--primary-color, #2c3e50);
    border-bottom: 3px solid var(--primary-color, #2c3e50);
    background-color: transparent;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Public / private profile modes ---------------------------------
   The mode is stamped on <html> (and <body>) by the inline script in
   profile.html's <head>. Anything marked `.owner-only` is hidden whenever
   the page is being viewed publicly — a CSS-level backstop so a JS error
   can never leak edit controls to a visitor. */
html[data-profile-mode="public"] .owner-only,
body[data-profile-mode="public"] .owner-only {
    display: none !important;
}

/* Each tab belongs to exactly one mode. Hiding the wrong-mode tabs up front
   means neither view flashes the other's navigation during load. */
html[data-profile-mode="public"] .profile-tabs .tab-btn[data-visibility="private"],
html[data-profile-mode="private"] .profile-tabs .tab-btn[data-visibility="public"] {
    display: none !important;
}

/* ---- Merged edit-mode tabs ---- */
.merged-section {
    margin-bottom: 2.5rem;
}

.merged-section:last-child {
    margin-bottom: 0;
}

.merged-section > h2 {
    margin: 0 0 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #eee;
}

.merged-hint {
    margin: 0 0 1rem;
    color: #6b7280;
    font-size: 0.88rem;
}

/* Per-card action button (remove from collection, unfollow). Pinned to the
   card's top-right; cards are given position:relative at decoration time. */
.card-action-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    min-width: 32px;
    min-height: 32px;
    padding: 0 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    color: #4a5568;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background 0.15s, color 0.15s;
}

.card-action-btn:hover {
    background: #fff;
    color: var(--primary-color, #1f4836);
}

.card-action-btn.is-remove {
    font-size: 1.1rem;
}

.card-action-btn.is-remove:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

.card-action-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Featured recipes already carry a toggle; mark the active state. */
.card-feature-btn.is-active {
    background: #6c757d;
}

@media (max-width: 768px) {
    /* Match the 44px touch target used elsewhere on mobile. */
    .card-action-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Owner action cluster on Recipe Archive cards. Sits at the end of the card
   as a flex item and wraps, so it can never overlap the recipe title. */
.card-owner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.card-owner-btn {
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px 12px;
    min-height: 44px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a5568;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.card-owner-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e1;
    color: var(--primary-color, #1f4836);
}

.card-owner-btn.danger:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

/* Featured cards use the wide layout, so their controls float over the card
   rather than sitting inline at the end of a compact row. */
.card-owner-actions.is-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    margin-left: 0;
    justify-content: flex-end;
    max-width: calc(100% - 20px);
}

.card-owner-actions.is-overlay .card-owner-btn,
.card-owner-actions.is-overlay .card-feature-btn {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.card-owner-actions.is-overlay .card-feature-btn.is-active {
    background: rgba(108, 117, 125, 0.95);
    color: #fff;
}

/* Explicit two-column grid rather than a flex row — at every width, not just
   on phones. The thumbnail is width:90px !important and the button cluster is
   flex-shrink:0, so in a flex row the text column is the only thing that can
   give: it collapses toward zero and the title renders one letter per line.
   These cards sit in a 2-column .recipe-grid, so even a desktop card is only
   ~490px wide and hits exactly that. Grid pins the thumb and text to row 1 and
   drops the buttons onto their own full-width row, independent of shrinking. */
.recipe-card-compact {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    overflow: visible;
}

.recipe-card-compact .compact-content {
    min-width: 0;
}

/* Span both columns so the buttons always get their own row. */
.recipe-card-compact > .card-owner-actions {
    grid-column: 1 / -1;
    width: auto;
    margin-left: 0;
    justify-content: flex-start;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.card-owner-btn,
.card-owner-actions .card-feature-btn {
    flex: 0 1 auto;
}

@media (max-width: 768px) {
    /* Featured cards float their cluster over the image. At phone width that
       covers the photo, so drop it back into normal flow above the card. */
    .card-owner-actions.is-overlay {
        position: static;
        max-width: none;
        justify-content: flex-start;
        margin-bottom: 0.5rem;
        border-top: none;
        padding-top: 0;
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .profile-container {
        padding: 80px 1rem 1rem 1rem;
        /* Reduced padding, keeping top for header */
        width: 95%;
        margin-top: 1rem;
    }

    /* Stack Profile Header */
    .profile-header-container>div {
        flex-direction: column;
        text-align: center;
        gap: 1rem !important;
    }

    #profile-bio {
        margin: 0 auto !important;
        /* Center bio */
    }

    #profile-stats {
        justify-content: center;
    }

    /* Adjust Action Buttons */
    .profile-header-container>div>div:last-child {
        margin-left: 0 !important;
        align-items: center !important;
        width: 100%;
        flex-direction: row !important;
        /* Keep buttons side-by-side if they fit, or wrap */
        justify-content: center;
        gap: 1rem;
    }

    /* Tabs Scrolling */
    .profile-tabs {
        justify-content: flex-start;
        /* Align start to allow scrolling */
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
    }

    .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    /* Recipe Grid on Mobile */
    .recipe-grid {
        grid-template-columns: 1fr;
        /* Single column */
    }

    #mutual-list {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    }
}

/* =====================================================================
   Profile redesign — modelled on the supplied mobile mockup.
   Centred header, stat blocks, pill tab bar, cleaner cards.
   Stat blocks and pills apply at all widths; the tighter mobile layout
   is scoped to <=768px so desktop keeps its roomier proportions.
   ===================================================================== */

/* ---- Stat blocks: big number over a small muted label ---- */
#profile-stats {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}

.profile-stat .stat-num {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--header-text-color, #1f4836);
}

.profile-stat .stat-label {
    font-size: 0.78rem;
    color: var(--muted-text, #6b7263);
}

/* ---- Pill tab bar ---- */
.profile-tabs {
    gap: 0.5rem;
    border-bottom: none;
    padding-bottom: 0.25rem;
}

.profile-tabs .tab-btn {
    border: 1px solid rgba(31, 72, 54, 0.14);
    border-radius: 999px;
    background: #f4f6f3;
    color: var(--text-color);
    padding: 0.5rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.profile-tabs .tab-btn:hover {
    background: #e8ede7;
    border-radius: 999px;
    color: var(--primary-color);
}

.profile-tabs .tab-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    /* The old style used a bottom border as the active marker; the pill
       fill replaces it. */
    border-bottom: 1px solid var(--primary-color);
}

@media (max-width: 768px) {
    /* ---- Centred header, mockup-style ---- */
    .profile-container {
        padding: 88px 1rem 1.5rem !important;
        width: 100% !important;
        border-radius: 0;
        box-shadow: none;
        margin-top: 0 !important;
    }

    .profile-header-container > div {
        align-items: center !important;
    }

    #profile-avatar {
        width: 92px !important;
        height: 92px !important;
        border: 3px solid #fff;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    }

    #profile-username {
        font-size: 1.5rem !important;
        text-align: center;
        margin-bottom: 0.15rem !important;
    }

    #profile-bio-display {
        text-align: center;
        font-size: 0.92rem !important;
        max-width: 34ch;
        margin: 0.35rem auto 0 !important;
    }

    #profile-website-display {
        text-align: center;
    }

    /* Evenly spaced stat blocks, like the mockup's three columns. */
    #profile-stats {
        width: 100%;
        justify-content: space-around;
        gap: 0.5rem !important;
        margin-top: 1rem !important;
        padding-top: 0.9rem;
        border-top: 1px solid rgba(0, 0, 0, 0.07);
    }

    .profile-stat .stat-num { font-size: 1.25rem; }

    /* Header buttons sit as a centred row under the stats. */
    .profile-header-container > div > div:last-child {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem !important;
        margin-top: 0.25rem;
    }

    /* ---- Tabs: single scrollable row of pills ---- */
    .profile-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        gap: 0.45rem;
        padding: 0.25rem 0 0.6rem;
        margin-bottom: 1.25rem;
        /* Let the row bleed to the screen edges so pills can scroll off. */
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .profile-tabs::-webkit-scrollbar { display: none; }

    .profile-tabs .tab-btn {
        flex: 0 0 auto;
        padding: 0.5rem 0.95rem;
        font-size: 0.85rem;
    }

    /* ---- Section headings ---- */
    .merged-section > h2,
    .tab-content > h2 {
        font-size: 1.25rem;
        margin-bottom: 0.2rem;
    }

    .merged-hint { font-size: 0.82rem; }
}

/* =====================================================================
   Mobile: recipe tiles + scrollable tab affordance
   Matches the mockup's grid of small image cards instead of a single
   stacked column of wide rows.
   ===================================================================== */
@media (max-width: 768px) {

    /* ---- 1. Tab row: show that it scrolls -----------------------------
       The pills run past the right edge with no hint more exist. A fade
       mask makes the overflow legible, and scroll-snap stops pills from
       being left half-cut when you flick. */
    .profile-tabs {
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
        scroll-snap-type: x proximity;
        scroll-padding-left: 1rem;
    }

    .profile-tabs .tab-btn {
        scroll-snap-align: start;
    }

    /* The container clips the bleed, which is what truncated the row. */
    .profile-container {
        overflow-x: hidden;
    }

    /* Tighten the first section so content starts right under the tabs. */
    .tab-content > .merged-section:first-child { margin-top: 0; }
    .tab-content.active { animation: none; }
    .merged-section { margin-bottom: 1.75rem; }

    /* ---- 2. Recipe tiles ----------------------------------------------
       Every recipe list on the profile becomes a 2-up grid of tiles:
       image on top, title beneath. Overrides the base two-column
       (90px thumb + text) card layout. */
    /* Only lists built from .recipe-card-compact. Featured and Shared render
       .recipe-card-wide — a horizontal card with a 30%-width image — and
       forcing those into a 170px column shrinks the photo to a sliver and
       breaks the text into vertical strips. They stay single-column below. */
    #mr-all,
    #mr-attempted,
    #col-favorites,
    #col-weekly,
    #other-recipes-container,
    #attempted-recipes-container,
    #favorites-container,
    #weekly-menu-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
        align-items: start;
    }

    /* Wide-card lists: one per row, stacked internally. */
    #mr-featured,
    #featured-recipes-container,
    #col-shared,
    #shared-container {
        display: block !important;
        grid-template-columns: none !important;
    }

    #mr-featured .recipe-card-wrapper,
    #featured-recipes-container .recipe-card-wrapper,
    #col-shared .recipe-card-wrapper,
    #shared-container .recipe-card-wrapper {
        margin-bottom: 1rem;
    }

    /* search-filter.css stacks these at <=900px but pins a 250px image and
       leaves the columns at 100%; make sure nothing stays side-by-side. */
    .recipe-card-wide {
        flex-direction: column !important;
        height: auto !important;
    }

    .recipe-card-wide .wide-image,
    .recipe-card-wide .wide-info,
    .recipe-card-wide .wide-details {
        width: 100% !important;
        border-right: none !important;
    }

    .recipe-card-wide .wide-image {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .recipe-card-wide .wide-info,
    .recipe-card-wide .wide-details {
        padding: 0.9rem !important;
    }

    .recipe-card-wide .wide-title {
        font-size: 1.05rem !important;
    }

    .recipe-card-compact {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 0 0.55rem !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        height: 100%;
    }

    /* Full-bleed image cap. styles.css pins these to 90px with !important,
       so this has to shout back. */
    .recipe-card-compact img,
    .recipe-card-compact .compact-thumb,
    body .recipe-card-compact img {
        width: 100% !important;
        height: 108px !important;
        max-width: none !important;
        border-radius: 14px 14px 0 0 !important;
        margin: 0 0 0.5rem 0 !important;
        object-fit: cover !important;
        flex-shrink: 0;
    }

    .recipe-card-compact .compact-content {
        width: auto !important;
        padding: 0 0.6rem !important;
        gap: 0.15rem !important;
    }

    .recipe-card-compact .compact-content h4 {
        font-size: 0.85rem !important;
        line-height: 1.25;
        margin: 0 0 0.15rem !important;
        /* Two lines max so tiles stay a consistent height. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .recipe-card-compact .compact-meta {
        font-size: 0.72rem !important;
        gap: 0.3rem !important;
    }

    /* ---- 3. Owner actions inside a tile --------------------------------
       Five text buttons cannot sit on one row in a ~170px tile, so they
       become small wrapped chips pinned to the bottom of the card. */
    .recipe-card-compact > .card-owner-actions {
        margin-top: auto;
        padding: 0.5rem 0.6rem 0 !important;
        gap: 4px !important;
    }

    .card-owner-btn,
    .card-owner-actions .card-feature-btn {
        padding: 5px 8px !important;
        min-height: 32px !important;
        font-size: 0.68rem !important;
        border-radius: 999px !important;
    }

    /* The × on attempted tiles overlays the image corner. */
    .recipe-card-compact > .card-action-btn {
        top: 6px;
        right: 6px;
        min-width: 32px !important;
        min-height: 32px !important;
        border-radius: 999px;
    }

    /* Wide featured cards keep their own stacked layout — they are a
       different component and already read well on a phone. */
    .recipe-card-wide {
        border-radius: 16px !important;
    }
}

/* =====================================================================
   Two-up recipe tiles — every list, every screen size.
   Featured sits at the top of My Recipes (two side by side), everything
   else follows below in the same grid. Appended last so it supersedes the
   earlier mobile-only tile rules.
   ===================================================================== */

#mr-featured,
#featured-recipes-container,
#mr-all,
#other-recipes-container,
#mr-attempted,
#attempted-recipes-container,
#col-favorites,
#favorites-container,
#col-weekly,
#weekly-menu-container,
#col-shared,
#shared-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: start;
    /* Two columns across a 1200px page would make each tile ~600px, which is
       not a tile. Cap the grid so the images stay small at any width. */
    max-width: 720px;
    margin-left: 0;
    margin-right: 0;
}

/* Wrappers are only there to host the overlay button; they must not add
   their own box or spacing inside a grid cell. */
#mr-featured .recipe-card-wrapper,
#featured-recipes-container .recipe-card-wrapper,
#col-shared .recipe-card-wrapper,
#shared-container .recipe-card-wrapper {
    margin: 0 !important;
    height: 100%;
}

/* ---- Compact cards as tiles ---- */
.recipe-card-compact {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 0 0.6rem !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    height: 100%;
}

body .recipe-card-compact img,
.recipe-card-compact .compact-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-width: none !important;
    margin: 0 0 0.55rem 0 !important;
    border-radius: 14px 14px 0 0 !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

.recipe-card-compact .compact-content {
    width: auto !important;
    min-width: 0;
    padding: 0 0.65rem !important;
}

.recipe-card-compact .compact-content h4 {
    font-size: 0.92rem !important;
    line-height: 1.3;
    margin: 0 0 0.2rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.recipe-card-compact .compact-meta {
    font-size: 0.75rem !important;
    gap: 0.3rem !important;
    flex-wrap: wrap;
}

/* ---- Wide cards (Featured, Shared) as tiles ---- */
#mr-featured .recipe-card-wide,
#featured-recipes-container .recipe-card-wide,
#col-shared .recipe-card-wide,
#shared-container .recipe-card-wide {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

#mr-featured .wide-image,
#featured-recipes-container .wide-image,
#col-shared .wide-image,
#shared-container .wide-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    border-right: none !important;
}

#mr-featured .wide-image img,
#featured-recipes-container .wide-image img,
#col-shared .wide-image img,
#shared-container .wide-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#mr-featured .wide-info,
#featured-recipes-container .wide-info,
#col-shared .wide-info,
#shared-container .wide-info {
    width: 100% !important;
    padding: 0.65rem !important;
    border-right: none !important;
    border-bottom: none !important;
}

#mr-featured .wide-title,
#featured-recipes-container .wide-title,
#col-shared .wide-title,
#shared-container .wide-title {
    font-size: 0.92rem !important;
    margin: 0 0 0.35rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#mr-featured .wide-author-row,
#featured-recipes-container .wide-author-row,
#col-shared .wide-author-row,
#shared-container .wide-author-row,
#mr-featured .wide-date,
#featured-recipes-container .wide-date,
#col-shared .wide-date,
#shared-container .wide-date {
    font-size: 0.75rem !important;
    gap: 0.35rem !important;
    margin: 0 0 0.15rem !important;
}

/* Description + the 4-item meta grid are far too much for a tile. */
#mr-featured .wide-details,
#featured-recipes-container .wide-details,
#col-shared .wide-details,
#shared-container .wide-details {
    display: none !important;
}

/* ---- Owner actions inside a tile ---- */
.recipe-card-compact > .card-owner-actions,
.card-owner-actions.is-overlay {
    gap: 4px !important;
}

.recipe-card-compact > .card-owner-actions {
    margin-top: auto;
    padding: 0.5rem 0.65rem 0 !important;
}

.card-owner-btn,
.card-owner-actions .card-feature-btn {
    padding: 5px 9px !important;
    min-height: 30px !important;
    font-size: 0.68rem !important;
    border-radius: 999px !important;
}

/* Featured tiles keep their overlay cluster on the image corner. */
#mr-featured .card-owner-actions.is-overlay,
#featured-recipes-container .card-owner-actions.is-overlay {
    position: absolute;
    top: 6px;
    right: 6px;
    max-width: calc(100% - 12px);
    justify-content: flex-end;
}

@media (max-width: 768px) {
    #mr-featured,
    #featured-recipes-container,
    #mr-all,
    #other-recipes-container,
    #mr-attempted,
    #attempted-recipes-container,
    #col-favorites,
    #favorites-container,
    #col-weekly,
    #weekly-menu-container,
    #col-shared,
    #shared-container {
        gap: 0.7rem !important;
        max-width: none;
    }

    .recipe-card-compact .compact-content h4,
    #mr-featured .wide-title,
    #featured-recipes-container .wide-title {
        font-size: 0.85rem !important;
    }

    /* Overlay controls would swamp a phone-width tile. */
    #mr-featured .card-owner-actions.is-overlay,
    #featured-recipes-container .card-owner-actions.is-overlay {
        position: static;
        max-width: none;
        justify-content: flex-start;
        padding: 0 0.65rem 0.5rem;
    }
}

/* =====================================================================
   Corrections: nested grids + tab overflow
   ===================================================================== */

/* movePrivateSections() moves the real card container *inside* these
   section wrappers. Making both a 2-column grid nested one inside the
   other, so each card ended up a quarter of the width. The wrappers are
   plain blocks; only the inner container is a grid. */
#mr-featured,
#mr-all,
#mr-attempted,
#col-favorites,
#col-weekly,
#col-shared,
#net-following,
#net-followers,
#net-comments {
    display: block !important;
    grid-template-columns: none !important;
    max-width: none !important;
}

/* The actual card containers carry the grid. */
#featured-recipes-container,
#other-recipes-container,
#attempted-recipes-container,
#favorites-container,
#weekly-menu-container,
#shared-container {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
    align-items: start;
    max-width: 720px;
    width: 100%;
    box-sizing: border-box;
}

/* Wide-card tile rules keyed off the wrappers need to reach the inner
   container too, now that the wrapper is no longer the grid. */
#featured-recipes-container .recipe-card-wrapper,
#shared-container .recipe-card-wrapper {
    margin: 0 !important;
    height: 100%;
}

@media (max-width: 768px) {
    #featured-recipes-container,
    #other-recipes-container,
    #attempted-recipes-container,
    #favorites-container,
    #weekly-menu-container,
    #shared-container {
        gap: 0.7rem !important;
        max-width: none;
    }

    /* ---- Tabs: wrap instead of scroll --------------------------------
       A scrolling row kept reading as "cut off" because the last pill sits
       hard against the edge. Wrapping onto a second line shows every tab
       at once, with nothing clipped and nothing to discover by swiping. */
    .profile-tabs {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        row-gap: 0.45rem !important;
        justify-content: flex-start;
    }

    .profile-tabs .tab-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Same treatment for the site-wide section nav, which had the identical
       problem in the header. */
    .nav-links.secondary-links {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        row-gap: 0.45rem;
        justify-content: center;
    }
}

/* =====================================================================
   Centred tabs + tighter vertical rhythm
   ===================================================================== */

.profile-tabs {
    justify-content: center;
    margin-bottom: 1rem;
}

/* Sections sat ~2.5rem apart with a further 1rem under each hint line,
   which left large empty bands between lists. */
.merged-section {
    margin-bottom: 1.5rem;
}

.merged-section > h2 {
    margin: 0 0 0.2rem;
    padding-bottom: 0.3rem;
}

.merged-hint {
    margin: 0 0 0.7rem;
}

.tab-content > h2 {
    margin-bottom: 0.6rem;
}

@media (max-width: 768px) {
    .profile-tabs {
        justify-content: center !important;
        margin-bottom: 0.85rem !important;
        padding-bottom: 0 !important;
    }

    .merged-section {
        margin-bottom: 1.25rem;
    }

    .merged-hint {
        margin: 0 0 0.6rem;
        font-size: 0.8rem;
    }

    /* Trim the gap between the header block and the tabs. */
    .profile-header-container {
        margin-bottom: 1rem !important;
    }

    #profile-stats {
        margin-top: 0.75rem !important;
        padding-top: 0.7rem;
    }

    .profile-container {
        padding-top: 80px !important;
        padding-bottom: 1rem !important;
    }
}

/* These use a <section> tag, so they inherited the global
   "section { padding: 6rem 2rem }" rule — 96px of dead space above every
   heading. The earlier mobile override only reset left/right padding,
   which left the vertical padding untouched. */
.merged-section,
#profile-map-section,
#shared-section {
    padding: 0 !important;
}

/* =====================================================================
   Tile action buttons: two per row, below the card
   ===================================================================== */

/* Wider tiles so two buttons fit comfortably side by side. */
#featured-recipes-container,
#other-recipes-container,
#attempted-recipes-container,
#favorites-container,
#weekly-menu-container,
#shared-container {
    max-width: 860px;
}

/* Nothing floats over the artwork any more — the cluster sits in flow at
   the bottom of the card, two buttons per row. */
.card-owner-actions,
.card-owner-actions.is-overlay {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 5px !important;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    padding: 0.55rem 0.65rem 0 !important;
    box-sizing: border-box;
}

/* An odd button out spans the full width rather than leaving a gap. */
.card-owner-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.card-owner-btn,
.card-owner-actions .card-feature-btn {
    width: 100%;
    padding: 7px 8px !important;
    min-height: 34px !important;
    font-size: 0.72rem !important;
    border-radius: 8px !important;
    text-align: center;
    justify-content: center;
}

/* The wrapper is the card body for featured/shared tiles, so it needs the
   card chrome and must hold the buttons inside it. */
#featured-recipes-container .recipe-card-wrapper,
#shared-container .recipe-card-wrapper {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid rgba(31, 72, 54, 0.08);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(31, 72, 54, 0.06), 0 8px 24px -12px rgba(31, 72, 54, 0.12);
    overflow: hidden;
    padding-bottom: 0.6rem;
}

/* The inner card no longer needs its own border/shadow. */
#featured-recipes-container .recipe-card-wide,
#shared-container .recipe-card-wide {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    flex: 1;
}

@media (max-width: 768px) {
    #featured-recipes-container,
    #other-recipes-container,
    #attempted-recipes-container,
    #favorites-container,
    #weekly-menu-container,
    #shared-container {
        max-width: none;
    }

    .card-owner-btn,
    .card-owner-actions .card-feature-btn {
        font-size: 0.68rem !important;
        min-height: 32px !important;
        padding: 6px 6px !important;
    }
}

/* Clearance comes from the measured header height (--header-h in script.js);
   the old fixed 80px went stale when the section pills made the header taller. */
@media (max-width: 768px) {
    .profile-container {
        padding-top: calc(var(--header-h) + 0.75rem) !important;
    }
}

/* Featured and Shared now render compact tiles, which carry their own card
   chrome. The wrapper styling added for the old wide-card layout would draw a
   second frame around them. */
#featured-recipes-container .recipe-card-wrapper,
#shared-container .recipe-card-wrapper {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding-bottom: 0;
    display: block;
}


/* =====================================================================
   Featured tile height + edge-to-edge tiles on phones.
   ===================================================================== */

/* The gap under Featured was a leftover from the old single-column layout:
   .recipe-image carried `min-height: 250px`, sized for a full-width card.
   In the 2-up tile grid the column is ~160px wide, so the photo filled only
   the top third and the rest of the 250px box stayed blank. Let the box be
   as tall as the picture. */
#featured-recipes-container .recipe-card .recipe-image {
    min-height: 0;
}

@media (max-width: 768px) {
    #featured-recipes-container .recipe-card .recipe-image {
        min-height: 0 !important;
        aspect-ratio: 4 / 3;
        overflow: hidden;
    }

    #featured-recipes-container .recipe-card .recipe-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Give the photos the width instead of the margins: 1rem of container
       padding plus the card's own inset pushed the tiles well inside the
       screen. Trim to a hairline so two tiles nearly span the display. */
    .profile-container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    #mr-all,
    #mr-attempted,
    #col-favorites,
    #col-weekly,
    #mr-featured,
    #featured-recipes-container,
    #other-recipes-container,
    #attempted-recipes-container,
    #favorites-container,
    #weekly-menu-container {
        gap: 0.5rem !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* Featured is a wide-card list elsewhere but renders as tiles here. */
    #featured-recipes-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start;
    }

    #featured-recipes-container .recipe-card-wrapper,
    #mr-featured .recipe-card-wrapper {
        margin-bottom: 0 !important;
    }
}


/* =====================================================================
   Phone styling pass against the design mockup: content starts right
   under the tabs, tiles carry the page, chrome gets out of the way.
   ===================================================================== */
@media (max-width: 768px) {

    /* ---- 1. Group labels -------------------------------------------
       "Featured" / "All Recipes" inherited section h2: 2.5rem centred
       serif. At phone width that is a banner above every group. Demote
       them to a quiet eyebrow label that still separates the groups. */
    .merged-section > h2,
    .tab-content > h2 {
        font-family: var(--body-font) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: left !important;
        color: var(--muted-text) !important;
        margin: 0 0 0.4rem !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    /* The explanatory sentence under each heading costs two lines and
       repeats what the label says. */
    .merged-hint {
        display: none !important;
    }

    .merged-section {
        margin-bottom: 1rem !important;
    }

    /* ---- 2. Owner actions: one compact icon row under each tile ------
       Five text buttons in a 2-up grid were taller than the photo they
       belonged to. Same five actions, one row, driven off the existing
       title attributes so every template picks this up without markup
       changes. */
    .card-owner-actions {
        display: flex !important;
        grid-template-columns: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 0.15rem !important;
        justify-content: flex-start;
        align-items: center;
        margin: 0.3rem 0 0 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        position: static !important;
        max-width: none !important;
    }

    .card-owner-actions .card-owner-btn,
    .card-owner-actions .card-feature-btn {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        min-width: 0 !important;
        padding: 0 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* Text out, glyph in. Scoped to known titles so any button this pass
       does not recognise keeps its label rather than going blank. */
    .card-owner-actions .card-owner-btn[title="Edit Recipe"],
    .card-owner-actions .card-owner-btn[title="Create your own version"],
    .card-owner-actions .card-owner-btn[title="Share Recipe"],
    .card-owner-actions .card-owner-btn[title="Delete Recipe"],
    .card-owner-actions .card-feature-btn[title="Show this on your public profile"],
    .card-owner-actions .card-feature-btn[title="Remove from your featured recipes"] {
        font-size: 0 !important;
    }

    /* One template already ships its own <i>; suppress it so the
       pseudo-element is the single source of the glyph. */
    .card-owner-actions .card-owner-btn > i,
    .card-owner-actions .card-feature-btn > i {
        display: none !important;
    }

    .card-owner-actions .card-owner-btn::before,
    .card-owner-actions .card-feature-btn::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 0.82rem;
        line-height: 1;
    }

    .card-owner-actions .card-owner-btn[title="Edit Recipe"]::before { content: "\f044"; }
    .card-owner-actions .card-owner-btn[title="Create your own version"]::before { content: "\f074"; }
    .card-owner-actions .card-owner-btn[title="Share Recipe"]::before { content: "\f1e0"; }
    .card-owner-actions .card-owner-btn[title="Delete Recipe"]::before { content: "\f2ed"; }
    .card-owner-actions .card-feature-btn::before { content: "\f005"; }

    /* Featured vs not reads off the star's fill. */
    .card-owner-actions .card-feature-btn.is-active::before {
        color: #d97706;
    }

    /* ---- 3. Tiles ---------------------------------------------------- */
    .recipe-card-compact .compact-content h4 {
        font-size: 0.78rem !important;
        line-height: 1.25 !important;
    }
}


/* =====================================================================
   Wider tiles, and an action row that cannot be clipped.

   Five 30px buttons plus gaps need ~160px, but each tile column was only
   ~140px, so Delete overflowed and the card's overflow:hidden cut it off.
   Two changes, belt and braces:

     1. Reclaim the side margins so the columns are genuinely wider.
     2. Let the buttons flex instead of holding a fixed 30px, so the row
        divides whatever width the tile has. Five buttons always fit, at
        any screen size, however the padding above changes later.
   ===================================================================== */
@media (max-width: 768px) {
    .profile-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.4rem !important;
        padding-right: 0.4rem !important;
    }

    /* Nothing between the container and the grid should re-inset. */
    .tab-content,
    .merged-section,
    #mr-featured,
    #mr-all,
    #featured-recipes-container,
    #other-recipes-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* The row divides the tile rather than demanding a fixed width. */
    .card-owner-actions {
        gap: 2px !important;
        justify-content: space-between !important;
        width: 100%;
        overflow: visible !important;
    }

    .card-owner-actions .card-owner-btn,
    .card-owner-actions .card-feature-btn {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 34px;
        height: 28px !important;
    }

    .card-owner-actions .card-owner-btn::before,
    .card-owner-actions .card-feature-btn::before {
        font-size: 0.76rem;
    }

    /* No overflow override here on purpose. Cards clip deliberately, for the
       image's rounded corners; unclipping them let a mis-sized card spill
       across everything below it. The flex row above is what keeps the five
       buttons inside the tile, so nothing needs to escape. */
}

/* Feature toggle, two clearly different states.

   A solid star in both states made "add to featured" and "remove from
   featured" identical, and one tap on the wrong one silently un-features a
   recipe. An outline star fixed the ambiguity but the thin stroke was hard
   to see, so the distinction moves to the button: both stars stay solid and
   legible, and the filled amber chip is what says "featured". */
@media (max-width: 768px) {
    .card-owner-actions .card-feature-btn {
        background: var(--white) !important;
        border: 1.5px solid var(--primary-color) !important;
    }

    .card-owner-actions .card-feature-btn::before {
        font-weight: 900;
        color: var(--primary-color);
    }

    .card-owner-actions .card-feature-btn.is-active {
        background: #d97706 !important;
        border-color: #d97706 !important;
    }

    .card-owner-actions .card-feature-btn.is-active::before {
        color: #fff;
    }
}