#full-page {
    display: flex;
    flex-direction: row;
    min-height: 50vh;
}
 
/* Reserved ad space — currently unused on every page (no real ad markup
   exists yet anywhere on the site), so this is styled as an obvious,
   intentional placeholder rather than the plain solid block it was
   before, which read as broken/empty rather than "space reserved for
   something." The label is a pseudo-element rather than real markup so
   nothing needs to change on the ~20 pages that include this div — once
   real ad content/markup exists, this whole rule (and its ::after) can
   just be deleted. */
#ad-content {
    flex: 0 0 25vw;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    background-color: rgb(var(--backgroundFaint));
    border: var(--borderThickness) dashed rgb(var(--textFaint));
}

#ad-content::after {
    content: "Advertisement space";
    font-size: var(--fontSmallest);
    font-weight: var(--fontWeightNormal);
    color: rgb(var(--textFaint));
    text-align: center;
    padding: var(--paddingMinimum);
}
 
#page-content {
    box-sizing: border-box;
    /* box-sizing: border-box only folds padding/border into the declared
       width — it never accounts for margin. The previous width:100% +
       max-width:90% plus a *separate* margin-left/right of paddingLarge
       meant the total footprint (box + both margins) could add up to
       more than 100% of the available space, since paddingLarge is a
       viewport-scaled token, not a fixed value — genuinely causing
       overflow at some widths. Subtracting the margins directly in the
       width calculation guarantees box + both margins always equals
       exactly 100%, never more, regardless of what paddingLarge computes
       to at any given viewport size. */
    width: calc(100% - var(--paddingLarge) * 2);
    min-width: 0;
    margin-top: var(--paddingSmall);
    margin-bottom: var(--paddingSmall);
    margin-left: var(--paddingLarge);
    margin-right: var(--paddingLarge);
}
 
#page-content h2 {
    margin-top: var(--paddingLarge);
    color: rgb(var(--text));
    font-size: var(--fontLarge);
    font-family: HighlightFont;
}
 
#page-content h3 {
    margin-top: var(--paddingSmall);
    color: rgb(var(--text));
    font-size: var(--fontMedium);
    font-weight: var(--fontWeightBold);
}
 
#page-content p {
    margin-top: var(--paddingSmall);
    color: rgb(var(--textFaint));
    font-size: var(--fontSmall);
}
 
#page-content p a {
    color: rgb(var(--highlight2));
}
 
#page-content p a:hover {
    color: rgb(var(--highlight2Faint));
}
 
/* ---------- Tablet / phone: ad bar goes horizontal, above the content ---------- */
@media only screen and (max-width: 949px) {
 
    #full-page {
        flex-direction: column;
    }
    
    #page-content {
        max-width: calc(100% - (var(--paddingSmall) * 2));
        margin-left: var(--paddingSmall);
        margin-right: var(--paddingSmall);
    }
 
    #ad-content {
        flex: 0 0 auto; /* no longer taking a fixed share of viewport width */
        width: 100%;
        min-height: 90px; /* adjust to whatever a horizontal ad banner actually needs */
    }
}



.account-subtext {
    margin-top: var(--paddingMinimum);
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}
 
.account-actions {
    margin-top: var(--paddingLarge);
    max-width: 400px;
    border-radius: var(--borderRadiusLarge);
    background-color: rgb(var(--background));
    overflow: hidden;
    box-shadow: var(--shadowSoft);
}
 
.account-action-row {
    display: flex;
    align-items: center;
    gap: var(--paddingSmall);
    padding: var(--paddingSmall) calc(var(--paddingSmall));
    color: rgb(var(--text));
    text-decoration: none;
    transition: box-shadow var(--transitionTime) ease, transform var(--transitionTime) ease, background var(--transitionTime) ease;
    background-color: rgb(var(--background));
}
 
.account-action-row:hover {
    background-color: rgb(var(--backgroundFaint));
    
    box-shadow: var(--shadowSoft);
    transform: translateY(-2px);
}
 
.account-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--fontMedium);
    font-size: var(--fontMedium);
    color: rgb(var(--textFaint));
}
 
.account-action-label {
    flex: 1 1 auto;
    font-size: var(--fontSmall);
    font-weight: var(--fontWeightNormal);
}
 
.account-action-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}
 
.account-action-signout .account-action-icon,
.account-action-signout .account-action-label {
    color: rgb(var(--highlight2));
}
 
/* ---------- Phone display ---------- */
@media only screen and (max-width: 480px) {
 
    .account-actions {
        max-width: 100%;
    }
 
}

/* ==========================================================================
   Homepage hero search section — moved to #page-head-home in
   css/page-head.css (it's now the page's actual header, matching how
   #page-head-simple works elsewhere, rather than a section living
   inside #page-content)
   ========================================================================== */

/* ==========================================================================
   Homepage: stats strip, popular tags, recently added — index.php
   ========================================================================== */

.home-stats-section {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin-top: var(--paddingLarge);
    /* .result-card's height comes from its image (aspect-ratio 16/9 at
       the card's own width) plus a fixed-height body below it — since
       that can't be pixel-matched exactly by a full-width sibling using
       pure CSS, this approximates it: a result card is roughly half this
       section's width in the 2-column grid, so doubling the ratio's
       width component (32/9 instead of 16/9) gives this section
       approximately the same height a single card's image portion would
       have at half this width. Not pixel-perfect (doesn't account for
       the card's body/text height too), but token-driven and close. */
    aspect-ratio: 32 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--borderRadiusLarge);
    overflow: hidden;
}

/* Darkens the background photo so the light stat numbers/labels stay
   readable regardless of what image is used */
.home-stats-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.home-stats-strip {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: var(--paddingLarge);
    flex-wrap: wrap;
    padding: var(--paddingSmall);
}

.home-stat {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--paddingMinimum) / 4);
    min-width: 120px;
    background: rgb(var(--background));
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadowSoft);
    padding: var(--paddingSmall) var(--paddingMinimum);
}

.home-stat-number {
    font-size: var(--fontLarge);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
}

.home-stat-label {
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}

.home-section {
    margin-top: var(--paddingLarge);
}

.home-section h2 {
    margin: 0 0 var(--paddingSmall) 0;
    font-size: var(--fontLarge);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
}

/* Popular tag cards reuse .result-card's exact shape/sizing — the image
   area is a plain placeholder for now until tag images exist */
.popular-tag-card .result-card-body {
    text-align: center;
}

@media only screen and (max-width: 480px) {

    .home-stats-strip {
        gap: var(--paddingSmall);
    }

}


/* ==========================================================================
   Public profile card — used on account/public.php (viewing anyone's
   profile) and account/index.php (an account viewing their own summary)
   ========================================================================== */

.public-profile-card {
    box-sizing: border-box;
    max-width: 480px;
    margin: 0 auto var(--paddingLarge) auto;
    background: rgb(var(--background));
    border-radius: var(--borderRadiusLarge);
    box-shadow: var(--shadowSoft);
    padding: var(--paddingLarge);
    text-align: center;
}

.public-profile-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto calc(var(--paddingMinimum) / 2) auto;
    border-radius: 50%;
    background: rgb(var(--highlight1));
    color: rgb(var(--text));
    font-size: var(--fontLargest);
    font-weight: var(--fontWeightBold);
}

.public-profile-card h1,
.public-profile-card h2 {
    margin: 0 0 calc(var(--paddingMinimum) / 3) 0;
    font-size: var(--fontLarge);
    color: rgb(var(--text));
}

.public-profile-joined {
    margin: 0 0 var(--paddingSmall) 0;
    font-size: var(--fontSmall);
    color: rgb(var(--textFaint));
}

.public-profile-stats {
    display: flex;
    justify-content: center;
    gap: var(--paddingLarge);
}

.public-profile-stat-number {
    display: block;
    font-size: var(--fontLarge);
    font-weight: var(--fontWeightBold);
    color: rgb(var(--text));
}

.public-profile-stat-label {
    font-size: var(--fontSmallest);
    color: rgb(var(--textFaint));
}