/* ========================================================================
   THERANTITWALL — MOBILE.CSS
   Tablet/mobile overrides extracted from app.css in original cascade order.
   Load this stylesheet AFTER app.css; only viewport-specific rules here.
   ======================================================================== */

@media (max-width: 1199.98px) {
    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .header-shell {
        gap: 12px;
    }

    .header-search {
        width: 210px;
    }

}

/* Responsive rules: (max-width: 991.98px) */

@media (max-width: 991.98px) {
    /* ============================================================
       01. Base and design tokens
       ============================================================ */

    :root {
        --wall-bg-width: 1160px;
    }

    body {
        background-attachment: scroll, scroll;
    }

    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .header-shell {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .brand-logo {
        width: 250px;
    }

    .site-header .header-shell {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }

    .site-header .brand-logo {
        width: 46px;
        height: 46px;
        max-width: 46px;
        max-height: 46px;
        flex-basis: 46px;
    }

    .site-header .brand-text {
        font-size: 1.16rem;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .rantitude-card {
        position: static;
    }

    .page-sidebar {
        position: static;
        max-width: none;
        margin-left: 0;
    }

    /* ============================================================
       09. General components and utilities
       ============================================================ */


    .page-layout-inner {
        max-width: 760px;
    }

}

/* Responsive rules: (max-width: 767.98px) */

@media (max-width: 767.98px) {
    /* ============================================================
       01. Base and design tokens
       ============================================================ */

    body {
        background-attachment: scroll;
    }

    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .site-header {
        min-height: 66px;
    }

    .header-shell {
        min-height: 66px;
        gap: 10px;
    }

    .brand-logo {
        width: 245px;
        max-height: 64px;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .site-main {
        padding-top: 24px;
    }

    .feed-shell {
        width: min(100% - 22px, 900px);
    }

    .hero-copy h1 {
        font-size: 2rem;
    }

    .hero-copy p {
        font-size: 0.9rem;
    }

    .community-stats {
        width: 100%;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 8px;
        overflow: hidden;
        background: rgba(53, 105, 151, 0.30);
    }

    .stat-item {
        gap: 7px;
        justify-content: flex-start;
        min-height: 70px;
        padding: 12px 15px;
        background: rgba(4, 17, 31, 0.97);
    }

    .stat-item > i {
        font-size: 1.3rem;
        width: 28px;
        text-align: center;
    }

    .stat-item strong {
        font-size: 1rem;
    }

    .stat-item span {
        font-size: 0.62rem;
    }

    .feed-tabs {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 3px;
        display: flex;
        scrollbar-width: none;
    }

    .feed-tab {
        white-space: nowrap;
        min-width: 128px;
        flex: 0 0 auto;
    }

    .content-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 22px 18px;
    }

    .wall-hero {
        margin-bottom: 18px;
        padding: 28px 19px;
        border-radius: 16px;
        min-height: 285px;
    }

    .wall-hero-kicker {
        font-size: 0.62rem;
        min-height: 34px;
        margin-bottom: 11px;
        padding: 7px 10px;
        white-space: normal;
        text-align: center;
    }

    .wall-hero h1 {
        font-size: clamp(1.85rem, 8vw, 2.45rem);
        line-height: 1.05;
    }

    .wall-hero > p {
        font-size: 0.9rem;
    }

    .stat-divider {
        display: none;
    }

    .stat-item:nth-of-type(5) > i {
        width: 28px;
        text-align: center;
    }

    .wall-hero-lead {
        font-size: 0.9rem;
        margin-top: 11px;
        line-height: 1.5;
    }

    .community-stats .stat-item {
        min-height: 72px;
        border-right: 1px solid rgba(49, 89, 125, 0.58);
        border-bottom: 1px solid rgba(49, 89, 125, 0.58);
        padding: 10px;
        justify-content: flex-start;
    }

    .community-stats .stat-item:nth-child(2n) {
        border-right: 0;
    }

    .community-stats .stat-item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

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

    .wall-hero::after {
        right: -28px;
        bottom: -32px;
        font-size: 8rem;
    }

    .wall-hero-guest-note {
        width: 100%;
        max-width: 100%;
        margin-top: 15px;
        padding: 9px 11px;
    }

    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .rant-body {
        margin-left: 0;
    }

    .rant-actions {
        margin-left: 0;
    }

    .comment-form-avatar {
        align-self: flex-start;
    }

    .login-to-rant-card {
        align-items: stretch;
        flex-direction: column;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .comments-panel {
        margin-left: 12px;
        margin-right: 12px;
    }

    .reply-children {
        margin-left: 9px;
        padding-left: 18px;
    }

    .reply-children > .comment-item::before {
        left: -18px;
        width: 12px;
    }

    .comment-form {
        flex-wrap: wrap;
    }

    .comment-input-wrap {
        flex-basis: calc(100% - 40px);
    }

    .btn-comment {
        margin-left: auto;
    }

    .comment-item {
        --tree-avatar: 28px;
        --tree-indent: 34px;
        --tree-child-pad-top: 11px;
    }

    /* ============================================================
       08. Content pages, empty states, and footer
       ============================================================ */

    .footer-shell {
        padding-top: 18px;
        padding-bottom: 18px;
        flex-direction: column;
    }

    .rules-grid {
        grid-template-columns: 1fr;
    }

    .legal-page {
        margin-top: 22px;
        padding: 24px 18px;
        border-radius: 15px;
    }

    .content-page {
        margin-top: 18px;
    }

    .content-icon {
        width: 52px;
        height: 52px;
        border-radius: 15px;
        font-size: 1.4rem;
    }

    .terms-summary {
        grid-template-columns: 1fr;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .content-card-wide {
        grid-column: auto;
    }

    .rules-intro-card {
        padding: 16px;
    }

    .privacy-explainer {
        padding: 16px;
    }

    .terms-callout {
        padding: 16px;
    }

    .rules-strip span {
        justify-content: flex-start;
        text-align: left;
    }

    .privacy-strip span {
        justify-content: flex-start;
        text-align: left;
    }

    /* ============================================================
       09. General components and utilities
       ============================================================ */

    .story-strip {
        grid-template-columns: 1fr;
    }

    .policy-section {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 16px;
    }

    .numbered-policy .policy-section {
        grid-template-columns: 40px minmax(0, 1fr);
        padding: 16px;
    }

    .policy-section-icon {
        width: 36px;
        height: 36px;
    }

    .policy-number {
        width: 36px;
        height: 36px;
    }

    .policy-jump {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .policy-jump a {
        white-space: nowrap;
    }

    .rule-card {
        padding-top: 50px;
    }

    .home-stack {
        max-width: 100%;
        width: min(100%, 680px);
    }

    body::before {
        position: absolute;
    }

    body::after {
        position: absolute;
    }

}

/* Responsive rules: (max-width: 575.98px) */

@media (max-width: 575.98px) {
    /* ============================================================
       01. Base and design tokens
       ============================================================ */

    :root {
        --wall-bg-width: 860px;
    }

    body {
        background-attachment: scroll, scroll;
    }

    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .site-header {
        min-height: 70px;
    }

    .header-shell {
        min-height: 66px;
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .brand-logo {
        width: 36px;
        max-width: 62vw;
        max-height: 58px;
        height: 36px;
    }

    .header-right {
        gap: 6px;
    }

    .site-header .header-shell {
        gap: 7px;
    }

    .site-header .brand-link {
        gap: 6px;
    }

    .site-header .brand-logo {
        width: 38px;
        height: 38px;
        max-width: 38px;
        max-height: 38px;
        flex-basis: 38px;
    }

    .site-header .brand-text {
        font-size: .97rem;
    }

    .site-header .header-right {
        gap: 6px;
    }

    .feeling-feed-header {
        margin-bottom: 18px;
    }

    .excluded-words-panel-header {
        padding: 18px;
    }

    .brand-text {
        font-size: 0.93rem;
    }

    .mobile-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-account-toggle {
        width: 40px;
        min-height: 40px;
        padding: 0;
    }

    .header-account-label {
        display: none;
    }

    .header-account-chevron {
        display: none;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .wall-hero-guest-note {
        border-radius: 10px;
    }

    .community-stats {
        margin-top: 14px;
    }

    .page-layout .wall-hero-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .feed-filter-banner {
        gap: 10px;
        padding: 12px;
        margin-bottom: 15px;
    }

    .feed-filter-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 1.3rem;
    }

    .feed-filter-title {
        font-size: .86rem;
    }

    .feed-filter-description {
        font-size: .73rem;
    }

    .feed-filter-clear {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .comment-item > .comment-line > .comment-avatar {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
        font-size: 0.72rem;
    }

    .reply-form .reply-form-avatar {
        flex-basis: 26px;
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .signup-avatar-picker {
        gap: 12px;
        padding: 12px;
    }

    .signup-avatar-preview {
        width: 54px;
        height: 54px;
        font-size: 1.35rem;
    }

    .signup-avatar-hex {
        font-size: 0.8rem;
    }

    .avatar-picker {
        padding: 12px;
    }

    .avatar-color-square {
        height: 125px;
    }

    .avatar-picker-preview {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
        font-size: 1.2rem;
    }

    .avatar-hue-slider {
        height: 20px;
    }

    .avatar-hex-field input {
        font-size: 16px;
    }

    .avatar-picker-toggle {
        gap: 9px;
        min-height: 62px;
        padding: 9px 10px;
    }

    .compact-avatar-picker .avatar-picker-preview {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
        font-size: 1rem;
    }

    .avatar-picker-toggle-info strong {
        font-size: .8rem;
    }

    .avatar-picker-toggle-info small {
        font-size: .67rem;
    }

    .avatar-picker-toggle-hex {
        font-size: .67rem;
    }

    .compact-avatar-picker .avatar-color-square {
        height: 120px;
    }

    .avatar-picker-details-inner {
        padding: 11px;
    }

    .feeling-feed-heading {
        gap: 12px;
    }

    .feeling-feed-emoji {
        font-size: 2.5rem;
    }

    .feeling-feed-heading h1 {
        font-size: 1.35rem;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .comment-item > .comment-line {
        gap: 8px;
    }

    .comment-item[data-visual-depth="0"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="1"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="2"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="3"] > .reply-children {
        margin-left: 9px;
        padding-left: 9px;
    }

    .comment-item[data-visual-depth="4"] > .reply-children {
        margin-left: 0;
        padding-left: 0;
    }

    .comment-body {
        font-size: 0.84rem;
    }

    .comment-content > .reply-quote {
        padding: 7px 9px;
    }

    .comment-list > .comment-item {
        padding: 14px 0;
    }

    .reply-form {
        padding: 10px;
        margin-top: 10px;
    }

    .reply-form .reply-entry-row {
        gap: 7px;
    }

    .reply-form .reply-input-wrap textarea {
        min-height: 42px;
        padding: 10px 10px;
        font-size: 0.82rem;
    }

    .reply-form .reply-input-wrap .comment-counter {
        position: static;
        display: block;
        text-align: right;
        margin-top: 4px;
        font-size: 0.66rem;
    }

    .reply-form .reply-form-footer {
        align-items: stretch;
        gap: 12px;
    }

    .reply-form .reply-form-buttons {
        width: 100%;
        justify-content: flex-end;
    }

    .reply-form .reply-form-buttons .btn {
        font-size: 0.74rem;
        padding: 8px 10px;
    }

    /* ============================================================
       06. Authentication, modals, and profiles
       ============================================================ */

    .auth-modal-card {
        padding: 26px 20px 22px;
        border-radius: 16px;
    }

    .auth-modal-heading h2 {
        font-size: 1.4rem;
    }

    .btn-login {
        min-width: 0;
        height: 38px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.76rem;
    }

    .btn-signup {
        min-width: 0;
        height: 38px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 0.76rem;
    }

    .signup-color-picker-row {
        gap: 9px;
    }

    .signup-color-input {
        width: 48px;
        height: 44px;
        flex-basis: 48px;
    }

    #signupModal .modal-dialog {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    #signupModal .modal-content {
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }

    /* ============================================================
       07. Excluded Words and filters
       ============================================================ */

    .excluded-words-panel-body {
        padding: 18px;
    }

    .excluded-words-panel-footer {
        flex-direction: column;
        align-items: stretch;
        padding: 18px;
    }

    .excluded-words-save {
        width: 100%;
    }

    .excluded-words-input-group button {
        min-width: 76px;
        padding: 0 12px;
    }

    .excluded-words-hint {
        align-items: flex-start;
    }

    .excluded-words-intro {
        padding: 18px;
    }

    /* ============================================================
       09. General components and utilities
       ============================================================ */


}

/* Responsive rules: (max-width: 520px) */

@media (max-width: 520px) {
    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .brand-logo {
        width: 220px;
        max-height: 60px;
    }

    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .hero-copy h1 {
        font-size: 1.65rem;
    }

    .community-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat-divider {
        display: none;
    }

    .stat-item {
        justify-content: center;
        width: 100%;
        margin: 0;
    }

    .wall-hero-kicker {
        font-size: 0.65rem;
        letter-spacing: 0.08em;
    }

    .wall-hero-guest-note {
        align-items: flex-start;
        text-align: left;
        line-height: 1.4;
    }

    .community-stats .stat-item {
        justify-content: flex-start;
        padding-inline: 12px;
    }

    .community-stats .stat-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .rant-main {
        padding: 12px;
    }

    .letter-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .comment-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .comment-form-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .reply-form-avatar {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        align-self: flex-start;
    }

    .feeling-badge {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
        border-radius: 9px;
    }

    .feeling-badge::before {
        inset: 3px;
        border-radius: 6px;
    }

    .feeling-emoji {
        font-size: 1.08rem;
    }

    .rant-card .feeling-badge {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        margin-left: 4px;
        border-radius: 10px;
    }

    .rant-card .feeling-badge::before {
        width: 28px;
        height: 22px;
    }

    .rant-card .feeling-badge::after {
        bottom: 4px;
        width: 20px;
        height: 6px;
    }

    .rant-card .feeling-emoji {
        font-size: 1.18rem;
    }

    .rant-avatar-wrap {
        width: 44px;
        height: 46px;
        flex-basis: 44px;
    }

    .rant-avatar-wrap .letter-avatar {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .avatar-feeling {
        right: -1px;
        bottom: 0;
        width: 24px;
        height: 24px;
        font-size: 1.02rem;
    }

    .avatar-feeling::before {
        width: 28px;
        height: 22px;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .reply-entry-row {
        flex-wrap: wrap;
    }

    .reply-input-wrap {
        flex-basis: calc(100% - 38px);
    }

    /* ============================================================
       06. Authentication, modals, and profiles
       ============================================================ */

    .btn-login {
        min-width: auto;
        height: 38px;
        padding-inline: 10px;
    }

    .btn-signup {
        min-width: auto;
        height: 38px;
        padding-inline: 10px;
    }

}

/* Responsive rules: (max-width: 480px) */

@media (max-width: 480px) {
    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .wall-hero-auth-actions {
        gap: 8px;
    }

    .wall-hero-signup-btn {
        flex: 1 1 120px;
        padding: 9px 12px;
    }

    .wall-hero-login-btn {
        flex: 1 1 120px;
        padding: 9px 12px;
    }

}

/* Responsive rules: (max-width: 420px) */

@media (max-width: 420px) {
    /* ============================================================
       03. Page layout, feed navigation, and statistics
       ============================================================ */

    .wall-hero-kicker {
        font-size: 0.58rem;
        letter-spacing: 0.08em;
    }

    .community-stats .stat-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 1.05rem;
    }

    .community-stats .stat-item strong {
        font-size: 1.08rem;
    }

    .community-stats .stat-item span:not(.stat-icon) {
        font-size: 0.62rem;
    }

    .wall-hero {
        min-height: 270px;
        padding: 25px 14px;
    }

    .wall-hero-guest-note {
        align-items: flex-start;
        text-align: left;
    }

    .wall-hero-guest-copy strong {
        font-size: 0.78rem;
    }

    .wall-hero-guest-copy small {
        font-size: 0.71rem;
    }

}

/* Responsive rules: (max-width: 390px) */

@media (max-width: 390px) {
    /* ============================================================
       04. Rant cards, voting, and avatars
       ============================================================ */

    .reply-form .reply-form-avatar {
        display: none;
    }

    /* ============================================================
       05. Support, comments, and nested replies
       ============================================================ */

    .reply-form .reply-entry-row {
        display: block;
    }

    .reply-form .reply-input-wrap {
        width: 100%;
    }

    .reply-form .reply-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .reply-form .reply-form-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .reply-form .reply-form-buttons .btn {
        width: 100%;
    }

}

/* Responsive rules: (max-width: 359.98px) */

@media (max-width: 359.98px) {
    /* ============================================================
       02. Header, navigation, search, and menus
       ============================================================ */

    .brand-text {
        font-size: 0.8rem;
    }

    .brand-link {
        gap: 6px;
    }

}

/* Responsive rules: (min-width: 992px) */

@media (max-width: 767px) {
    .rant-detail-page {
        padding: 0 0 35px;
    }

    .rant-detail-panel {
        border-radius: 14px;
    }

    .rant-detail-panel-top {
        padding: 14px 16px;
        border-radius: 14px 14px 0 0;
    }

    .rant-detail-header {
        padding: 22px 16px;
        gap: 13px;
    }

    .rant-detail-heading-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 11px;
        font-size: 1.35rem;
    }

    .rant-detail-header h1 {
        font-size: 1.5rem;
    }

    .rant-detail-conversation {
        padding: 16px;
    }

    .rant-detail-section-bar {
        padding: 12px 13px;
    }

    .rant-detail-footer {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px;
        border-radius: 0 0 14px 14px;
    }
}

@media (max-width: 420px) {
    .rant-detail-heading-icon {
        display: none;
    }

    .rant-detail-section-label {
        font-size: 0.76rem;
    }

    .rant-detail-thread-id {
        font-size: 0.69rem;
    }
}
/* ============================================================
   TheRantItWall — CodeIgniter 4 Default Pagination
   Supports both CI4 default and Bootstrap 5 markup
   ============================================================ */

@media (max-width: 576px) {
    .pagination {
        gap: 5px;
        margin: 24px 0;
    }

    .pagination li a,
    .pagination li.active span,
    .pagination .page-link {
        min-width: 35px;
        height: 36px;
        padding: 7px 10px;
        font-size: 0.78rem;
    }
}
/* TheRantItWall - Edit Profile only. Shared avatar builder styles remain in app.css. */
/* Edit Profile: scoped to the same colors and surfaces as profile/show.php. */

@media (max-width:575.98px) {
    .rtw-edit-profile .edit-heading { padding:0 15px 18px; }
    .rtw-edit-profile .edit-body { padding:18px 15px; }
    .rtw-edit-profile .edit-identity { gap:12px; margin-top:-33px; }
    .rtw-edit-profile .edit-avatar.letter-avatar { width:72px; height:72px; flex-basis:72px; font-size:1.7rem; }
    .rtw-edit-profile .edit-identity h1 { font-size:1.35rem; }
    .rtw-edit-profile .edit-actions > * { flex:1; }
}

/* ============================================================
   TheRantItWall - Load More Comments / Replies
   ============================================================ */

@media (max-width: 576px) {

    .rant-view-link {
        padding: 6px 8px;
        font-size: 12px;
        gap: 5px;
    }

    .rant-view-link i {
        font-size: 13px;
    }

}
/* ========================================
   FIX RANT DROPDOWN CLIPPING
======================================== */

@media (max-width: 575px) {
    .excluded-words-panel-body {
        padding: 12px;
    }

    .excluded-words-section {
        margin-bottom: 14px;
    }

    .excluded-match-options {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .excluded-match-option {
        padding: 9px;
    }

    .excluded-words-list {
        max-height: 120px;
    }

    .excluded-words-panel-footer {
        padding: 10px 12px;
    }
}
/* ============================================================
   Rant Author - Profile Links
   ============================================================ */

@media (max-width: 575px) {
    .rant-author-line {
        gap: 6px;
    }

    .rant-author-link,
    .rant-author-anonymous {
        padding: 4px 8px;
        font-size: 0.78rem;
    }

    .rant-author-name {
        max-width: 150px;
    }

    .rant-post-time {
        font-size: 0.72rem;
    }
}

/* ============================================================
   COMPACT SITE LAYOUT — Minimal outer gutters
   ============================================================ */

/* Fill the viewport instead of adding nested outer margins. */

@media (max-width: 767.98px) {
    .page-layout,
    .page-layout-inner,
    .page-main {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .page-layout > .container-fluid,
    .site-main > .container,
    .site-main > .container-fluid {
        padding-left: 4px;
        padding-right: 4px;
    }

    .feed-shell,
    .page-layout .feed-shell {
        width: 100% !important;
        max-width: none !important;
    }

    .site-main {
        padding-top: 4px;
        padding-bottom: 10px;
    }
}

/* ============================================================
   MENTIONS — Plain colored links, never underlined
   ============================================================ */

@media (max-width: 767.98px) {
    .site-main #excludedWordsForm,
    .site-main .excluded-words-page {
        width: 100%;
    }
}
/* ============================================================
   TheRantItWall — Emoji Picker
   Complete stylesheet for rant, comment, and reply forms.

   Replaces previous emoji-picker.css and emoji-picker-layout-fix.css.
   Uses existing PHP partial and emoji-picker.js unchanged.
   Dark theme only.
   ============================================================ */

/* TheRantItWall — reusable emoji picker; dark theme by default. */

@media (max-width: 575px) {
    .emoji-picker-panel { position: fixed; left: 8px; right: 8px; top: auto; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; max-height: min(65vh, 470px); max-height: min(65dvh, 470px); z-index: 2000; }
    .emoji-picker-results { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .emoji-picker-option { min-height: 44px; }
}

/* ============================================================
   Form integration — three identical emoji buttons
   ============================================================ */

/* The original layout controls remain untouched. */

@media (max-width: 575px) {
    .rant-composer .composer-body > .emoji-picker,
    .comment-form .comment-input-wrap > .emoji-picker,
    .reply-form .reply-input-wrap > .emoji-picker {
        top: 6px;
        right: 6px;
    }

    .comment-form .comment-input-wrap > textarea,
    .reply-form .reply-input-wrap > textarea {
        min-height: 74px;
    }
}


/* ============================================================
   Final picker behavior and accessibility
   ============================================================ */

/* The JavaScript positions this panel using viewport coordinates. */

@media (max-width: 575px) {
    .emoji-picker .emoji-picker-panel {
        width: min(340px, calc(100vw - 16px));
        max-height: min(360px, 55vh);
        max-height: min(360px, 55dvh);
    }
}
/* ============================================================
   Global Error Messages
   ============================================================ */

@media (max-width: 575px) {
    .global-error-container {
        margin-top: 10px;
        padding: 0 10px;
    }

    .global-error-alert {
        gap: 9px;
        min-height: 52px;
        padding: 11px 42px 11px 11px;
        border-radius: 10px;
    }

    .global-error-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .global-error-text {
        font-size: 0.82rem;
    }
}

@media (max-width: 767.98px) {
    .rant-composer .composer-toolbar {
        gap: 5px;
        padding: 6px 7px;
    }

    .rant-composer .composer-select {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }

    .rant-composer .identity-switch {
        width: 100%;
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .rant-composer .composer-body {
        margin: 0 8px;
    }

    .rant-composer .composer-bottom-row {
        gap: 5px;
        padding: 4px 6px 6px;
    }

    .rant-composer .composer-bottom-row .composer-encouragement {
        font-size: 0.73rem;
    }

    .rant-composer .composer-bottom-row .post-rant-btn {
        min-height: 25px;
        padding: 3px 7px;
    }
}

@media (max-width: 390px) {
    .rant-composer .composer-bottom-row {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .rant-composer .composer-bottom-row .composer-encouragement {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .rant-composer .composer-bottom-row .composer-counter {
        grid-column: 1;
        grid-row: 2;
    }

    .rant-composer .composer-bottom-row .post-rant-btn {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

/* ============================================================
   13. Reply-tree junctions — aligned dots and zero ending tails

   Each curved elbow ends at the reply avatar's midpoint.
   The dot is centered exactly where the spine meets that elbow.
   The final sibling's spine ends at that same midpoint.

   NOTE: The dot is drawn on .comment-line, whose origin is
   BELOW the .comment-item top padding. Do not add the padding
   again: doing so places the dot BELOW the curve (the old bug).
   ============================================================ */

@media (max-width: 575.98px) {
    .comment-item {
        --tree-node-size: 6px;
    }
}

/* Junction dots use a fixed light-blue palette in both themes.
   Connector geometry and final-sibling cutoff remain unchanged. */

/* ============================================================
   Newly posted support — comment and reply highlight
   ============================================================ */

/*
 * The AJAX handler applies .new-comment-flash to the newly inserted
 * .comment-item. Keep these keyframes defined: without them the
 * existing animation declaration has no visual effect.
 * Color fades away, leaving the original card background intact.
 */

@media (min-width: 576px) and (max-width: 991.98px) {
    .comment-item {
        --tree-indent: 28px;
    }
}

@media (max-width: 575.98px) {
    .comment-item {
        --tree-indent: 24px;
        --tree-node-size: 6px;
    }
}

/* ============================================================
   21. Responsive visual-depth limits (restored)
   ============================================================
   The nested DOM and AJAX replies remain unlimited.
   data-visual-depth comes from comments.js.

   Desktop: 8 indentation steps.
   Tablet:  5 indentation steps.
   Mobile:  3 indentation steps.

   At the visual limit, children stay in their parent's conversation
   but occupy the available width rather than shrinking text further.
   This section ONLY changes the reply indentation and hides the
   connector of the unindented overflow segment. All normal junction
   dots, elbows and no-tail endings keep the existing geometry.
   ============================================================ */

/* Desktop: undo the old four-level flattening, through level seven. */

@media (min-width: 576px) and (max-width: 991.98px) {
    .comment-item {
        --tree-indent: 27px;
    }

    .comment-item[data-visual-depth="5"] > .reply-children,
    .comment-item[data-visual-depth="6"] > .reply-children,
    .comment-item[data-visual-depth="7"] > .reply-children,
    .comment-item[data-visual-depth="8"] > .reply-children {
        padding: 0 !important;
        margin: var(--tree-top-gap) 0 0 !important;
    }

    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item > .comment-line::before {
        content: none !important;
        display: none !important;
    }

}

/* Phones: cap after three visual nesting levels. */

@media (max-width: 575.98px) {
    .comment-item {
        --tree-indent: 24px;
    }

    .comment-item[data-visual-depth="3"] > .reply-children,
    .comment-item[data-visual-depth="4"] > .reply-children,
    .comment-item[data-visual-depth="5"] > .reply-children,
    .comment-item[data-visual-depth="6"] > .reply-children,
    .comment-item[data-visual-depth="7"] > .reply-children,
    .comment-item[data-visual-depth="8"] > .reply-children {
        padding: 0 !important;
        margin: var(--tree-top-gap) 0 0 !important;
    }

    .comment-item[data-visual-depth="3"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="3"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="3"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="3"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="3"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="3"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="4"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="4"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="4"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="5"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="6"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="7"] > .reply-children > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .replies-ajax-content > .comment-item > .comment-line::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::before,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item::after,
    .comment-item[data-visual-depth="8"] > .reply-children > .comment-item > .comment-line::before {
        content: none !important;
        display: none !important;
    }

}

/* ==========================================
   Notifications — Read / Unread States
   ========================================== */

@media (max-width: 575.98px) {
    .notification-item {
        gap: 10px;
        padding: 12px;
    }

    .notification-status-label {
        display: none;
    }
}

/* ==========================================
   Notifications dropdown - bounded scrolling
   ========================================== */

/* Let Bootstrap control whether the menu is displayed. */

@media (max-width: 575.98px) {
    .notifications-menu {
        width: 340px;
        max-width: calc(100vw - 16px);
    }

    .notifications-menu.show {
        max-height: calc(100dvh - 100px);
    }

    .notifications-menu .notifications-list {
        max-height: min(380px, calc(100dvh - 165px));
    }
}

/* ============================================================
   Notification comment navigation — temporary flash
   Applies only to the selected comment/reply box, never its children.
   ============================================================ */

@media (max-width: 767px) {

    .reports-page {
        padding: 18px 10px 40px;
    }

    .reports-header {
        padding: 20px;
        gap: 13px;
    }

    .reports-header-icon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        font-size: 21px;
    }

    .reports-header h1 {
        font-size: 22px;
    }

    .reports-summary {
        padding: 15px;
    }

    .reports-summary-info div > span {
        font-size: 11px;
    }

    .report-card-header {
        padding: 16px;
    }

    .report-card-body {
        padding: 18px 16px;
    }

    .report-card-footer {
        padding: 15px 16px;
    }

    .report-info-grid {
        gap: 17px 13px;
    }

    .report-card-actions {
        width: 100%;
    }

    .report-card-actions > a,
    .report-card-actions > form {
        flex: 1;
    }

    .report-card-actions form button {
        width: 100%;
    }

}

@media (max-width: 450px) {

    .report-info-grid {
        grid-template-columns: 1fr;
    }

    .report-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .reports-summary-count {
        min-width: 66px;
        padding: 8px;
    }

    .report-card-actions {
        flex-direction: column;
    }

    .report-card-actions > a,
    .report-card-actions > form {
        width: 100%;
    }

}/* ============================================================
   ADMIN REPORTS DROPDOWN
============================================================ */

@media (max-width: 575px) {

    .header-account-toggle {
        gap: 6px;
    }

    .header-account-label {
        max-width: 90px;
    }

    .header-reports-badge {
        min-width: 18px;
        height: 18px;
        padding: 2px 5px;
        font-size: 9px;
    }

}
/* ============================================================
   SITE STATISTICS
============================================================ */

@media (max-width: 575px) {

    .site-stats {
        padding: 9px 0;
    }

    .site-stats-inner {
        gap: 8px 14px;
    }

    .site-stat {
        gap: 4px;
        font-size: 11px;
    }

    .site-stat i {
        font-size: 12px;
    }

    .site-stat strong {
        font-size: 12px;
    }

}
/* ==========================================================
   THERANTITWALL — CARTOON NOTIFICATIONS
========================================================== */


/* ==========================================================
   NOTIFICATION LIST
========================================================== */

@media (max-width: 575.98px) {

    .notifications-list {
        padding: 8px;
        gap: 7px;
    }

    .notification-item {
        gap: 11px;
        padding: 12px 10px;
        border-radius: 14px;
    }

    .notification-message {
        font-size: 12px;
    }

    .notification-username {
        font-size: 12.5px;
    }

    .notification-avatar-wrap {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .notification-cartoon-avatar {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

}


/* ==========================================================
   TOUCH DEVICES
========================================================== */

@media (max-width: 575.98px) {
    .notifications-list {
        gap: 10px;
        padding: 10px;
    }

    .notification-item {
        border-radius: 0;
    }
}
/* ==========================================================
   THERANTITWALL — DOWNVOTE NOTIFICATION EXPLANATIONS
========================================================== */

/* Explanation container */

@media (max-width: 575.98px) {

    .notification-downvote-explanation {
        gap: 7px;
        padding: 8px 9px;

        font-size: 10.5px;
        line-height: 1.5;
    }

    .notification-downvote-explanation > i {
        font-size: 12px;
    }

}
/* ==========================================================
   THERANTITWALL — CARTOON MENTION SUGGESTIONS
   Dark-only design. Uses the existing autocomplete class names.
   Keep this section inside app.css; no HTML or JS changes needed.
========================================================== */

/* Popup — chunky outline, compact comic-style panel. */

@media (max-width: 575.98px) {
    .mention-suggestions {
        width: 300px;
        max-width: calc(100vw - 20px);
        max-height: 260px;
        padding: 7px;
        border-radius: 12px;
    }

    .mention-suggestion {
        gap: 10px;
        min-height: 56px;
        padding: 9px;
    }

    .mention-suggestion-avatar {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .mention-suggestion-username {
        font-size: 12.5px;
    }

    .mention-suggestion-bio {
        font-size: 10.5px;
    }
}

@media (max-width: 359.98px) {
    .mention-suggestions {
        width: 270px;
        max-width: calc(100vw - 16px);
    }

    .mention-suggestion {
        gap: 8px;
        padding: 8px;
    }
}

/* Touchscreens shouldn't shift rows during tap interactions. */

@media (max-width: 575.98px) {

    .notification-rep {
        gap: 5px;
        padding: 4px 8px;
        font-size: 10px;
    }

    .notification-rep > i {
        font-size: 11px;
    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (max-width: 575.98px) {
    .site-header .notification-toggle.notification-bell-btn { width: 40px; height: 40px; }
    .notification-bell-icon { font-size: 27px; }
    .notification-bell-face { top: 10px; width: 21px; height: 16px; }
    .notifications-empty { padding: 28px 16px 34px; }
    .notifications-empty-art { width: 155px; height: 145px; }
    .notifications-empty-title { font-size: 16px; }
    .notifications-empty-description { font-size: 11.5px; }
    .notifications-empty-tag { font-size: 11px; }
}

@media (max-width: 359.98px) {
    .notifications-empty-art { width: 145px; }
    .notifications-empty { padding-inline: 12px; }
}

@media (pointer: coarse) {
    .site-header .notification-toggle.notification-bell-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Fit the dropdown within small phone viewports. */

@media (max-width: 575.98px) {
    .header-notifications .notifications-menu {
        max-width: calc(100vw - 16px);
        min-width: 0;
    }

    .notifications-empty {
        max-width: 100%;
    }
}

/* Respect user preferences in Safari, Firefox, Chrome and Edge. */

@media (max-width: 575.98px) {
    .excluded-words-panel-body { padding: 13px; }
    .excluded-words-panel-footer { padding: 0 13px 13px; }
    .excluded-words-section + .excluded-words-section { margin-top: 15px; padding-top: 15px; }
    .excluded-words-input-group { gap: 8px; }
    #excludedWordsInput { min-height: 44px; padding: 9px 10px; }
    #addExcludedWord { min-height: 44px; padding: 8px 12px; }
    .excluded-words-suggestions { max-height: min(280px, 50vh); padding: 6px 4px; }
    .excluded-suggest-option { margin: 6px; min-height: 47px; }
    .excluded-match-options { grid-template-columns: 1fr; gap: 9px; }
    .excluded-match-option { padding: 11px; }
}

@media (max-width: 380px) {
    #addExcludedWord span { display: none; }
    #addExcludedWord { min-width: 44px; padding: 8px; }
    .excluded-suggest-heading { font-size: .66rem; }
}

@media (max-width: 575.98px) {
    .excluded-words-section-heading { gap: 11px; }
    .excluded-words-mascot {
        flex-basis: 67px;
        width: 67px;
        transform: scale(.82);
        transform-origin: left center;
        margin-right: -9px;
    }
    .excluded-words-section-description { font-size: .79rem; }
}

@media (hover: none) and (pointer: coarse) {
    body {
        background-attachment: scroll, scroll;
    }
}

/* Avoid mobile Safari zoom when a text field receives focus. */

@media (max-width: 47.99875rem) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    input[type="tel"],
    textarea,
    select,
    #excludedWordsInput {
        font-size: max(1rem, 16px);
    }
}

/* Decorative mascot scales as a single unit; its internal pixel-art face
   retains its proportions instead of stretching individual facial features. */

@media (pointer: coarse) {
    .excluded-word-remove {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    .excluded-suggest-option {
        min-height: 2.75rem;
    }
}

@media (max-width: 47.99875rem) {
    .notifications-empty-art {
        width: min(10.625rem, 100%);
        max-width: 100%;
    }

    .excluded-words-panel,
    .excluded-words-panel-body,
    .excluded-words-section {
        min-width: 0;
    }

    .excluded-match-options > *,
    .excluded-words-input-group > * {
        min-width: 0;
    }

    .excluded-suggest-option {
        overflow-wrap: anywhere;
    }
}

/* Smaller phones: reserve the mascot's visual space without overflowing
   its row; keep the internal dimensions and scale the complete character. */

@media (max-width: 35.99875rem) {
    .excluded-words-section-heading {
        align-items: center;
        gap: 0.5rem;
    }

    .excluded-words-mascot {
        flex: 0 0 4.25rem;
        width: 5.125rem;
        height: 5.6875rem;
        margin-right: -0.375rem;
        transform-origin: left center;
        animation-name: ew-mascot-bounce-small;
    }

    .excluded-words-section-heading-content {
        min-width: 0;
    }

    .excluded-words-section-heading .excluded-words-label {
        font-size: clamp(0.9375rem, 3.65vw, 1.075rem);
    }

    .excluded-words-section-description {
        font-size: 0.8125rem;
        line-height: 1.5;
    }

    .notifications-empty-art {
        transform: scale(0.88);
        transform-origin: center center;
        margin-block: -0.4rem;
    }
}

@media (max-width: 22.5rem) {
    .excluded-words-section-heading {
        gap: 0.25rem;
    }

    .excluded-words-mascot {
        flex-basis: 3.45rem;
        margin-right: -0.75rem;
        animation-name: ew-mascot-bounce-tiny;
    }

    .excluded-words-section-description {
        font-size: 0.75rem;
    }

    .notifications-empty-art {
        transform: scale(0.75);
        margin-block: -1rem;
    }
}

@media (max-width: 35.99875rem) {
    .notifications-menu .notifications-list {
        gap: 0.5rem;
        padding: 0.625rem;
    }
}


/* ============================================================
   NOTIFICATIONS — EDGE-TO-EDGE CONTENT WITH SMALL CARD GUTTERS
   ============================================================
   The menu controls the total width. The scrolling list has just one
   compact gutter. Both direct rows and nested notification wrappers
   stretch to fill the remaining width without extra inset margins.
   ============================================================ */

@media (max-width: 35.99875rem) {
    .notifications-menu .notifications-list {
        padding: 0.625rem;
        gap: 0.625rem;
    }

    .notifications-menu .notifications-list .notification-item {
        padding: 0.8125rem 0.6875rem;
    }
}
/* ============================================================
   AVATAR COLOR PICKER — CROSS-DEVICE SUPPORT
   ============================================================ */

@media (max-width: 767.98px) {
    #signupAvatarHex,
    #profileAvatarHex {
        font-size: 16px;
    }
}

/* Keyboard focus indicator. */

@media (max-width: 575.98px) {
    .notifications-empty .notifications-empty-art {
        width: 150px;
        height: 150px;
    }
    .notifications-empty .notifications-bell {
        transform-origin: center 20%;
        width: 98px;
        height: 105px;
    }
    .notifications-empty .notifications-empty-art::before,
    .notifications-empty .notifications-empty-art::after { bottom: 13px; }
    .site-header .notification-toggle.notification-bell-btn {
        min-width: 40px;
        min-height: 40px;
    }
}

@media (max-width: 359.98px) {
    .notifications-empty .notifications-empty-art { width: 140px; height: 140px; }
    .notifications-empty .notifications-bell { scale: .82; }
}

@media (max-width: 575.98px) {
    .notifications-empty .notifications-empty-art {
        width: 145px;
        height: 150px;
    }
    .notifications-empty .notifications-bell {
        width: 76px;
        height: 78px;
    }
    .notifications-empty .notifications-bell > .bi-bell-fill {
        top: 8px;
        right: -37px;
        width: 34px;
        font-size: 33px;
    }
    .notifications-empty .notifications-bell-face {
        top: 12px;
        width: 59px;
        height: 54px;
    }
    .notifications-empty .notifications-bell::before {
        top: 42px;
    }
    .notifications-empty .notifications-bell::after {
        top: 22px;
        right: -24px;
        width: 28px;
    }
    .site-header .notification-bell-icon-wrap > .notification-bell-icon {
        right: -15px;
        font-size: 16px;
    }
}

@media (max-width: 359.98px) {
    .notifications-empty .notifications-bell {
        scale: 1;
    }
    .notifications-empty .notifications-bell > .bi-bell-fill {
        right: -34px;
        font-size: 30px;
        width: 30px;
    }
}

@media (max-width: 575.98px) {
    .excluded-words-section-heading {
        gap: 8px;
        align-items: center;
    }
    .excluded-words-mascot {
        flex: 0 0 82px;
        width: 82px;
        min-width: 82px;
        height: 91px;
        min-height: 91px;
        margin: 0;
        transform: none;
        animation-name: ew-mascot-bounce-solid;
    }
    .excluded-words-section-heading-content {
        flex: 1 1 0;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .excluded-words-section-heading .excluded-words-label {
        font-size: clamp(0.875rem, 3.7vw, 1.0625rem);
        overflow-wrap: break-word;
    }
    .excluded-words-section-description {
        font-size: clamp(0.75rem, 3.1vw, 0.8125rem);
        line-height: 1.45;
    }
    .notifications-empty .notifications-empty-art {
        width: 170px;
        height: 160px;
        margin: 0 auto 14px;
        transform: none;
    }
    .notifications-empty .notifications-bell {
        width: 83px;
        height: 84px;
    }
    .notifications-empty .notifications-bell > .bi-bell-fill {
        top: 8px;
        right: -43px;
        width: 38px;
        font-size: 37px;
    }
    .notifications-empty .notifications-bell-face {
        top: 14px;
        width: 66px;
        height: 57px;
    }
    .notifications-empty .notifications-bell::before { top: 47px; }
    .notifications-empty .notifications-bell::after {
        top: 24px;
        right: -26px;
        width: 31px;
    }
}

@media (max-width: 359.98px) {
    .excluded-words-section-heading { gap: 4px; }
    .excluded-words-mascot {
        flex-basis: 82px;
        width: 82px;
        min-width: 82px;
        transform: none;
        animation-name: ew-mascot-bounce-solid;
    }
    .notifications-empty .notifications-empty-art { transform: none; }
    .notifications-empty .notifications-bell { scale: 1; }
}

/* Avoid permanently turning on hover animations on touch-only devices. */

@media (max-width: 767.98px) {
    .rules-hero.rules-hero-with-keeper {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        text-align: center;
    }
    .rules-hero .rules-keeper-spot { min-height: 120px; }
    .rules-hero .rules-keeper { flex-basis: 110px; }
}

@media (max-width: 359.98px) {
    .rules-hero .rules-keeper-spot { min-height: 113px; }
    .rules-hero .rules-keeper { margin-top: -6px; }
}

@media (max-width: 575.98px) {
    .rant-composer .rant-composer-main {
        gap: 5px;
        padding-left: 7px;
        padding-right: 7px;
    }

    .rant-composer .rant-composer-main > .composer-body {
        margin: 0;
    }

    .rant-composer .rant-composer-main > .rant-composer-avatar {
        flex-basis: 32px;
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
}

@media (max-width: 359.98px) {
    .rant-composer .rant-composer-main {
        gap: 4px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .rant-composer .rant-composer-main > .rant-composer-avatar {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}


/* ============================================================================
   COMMENT FORM — STABLE TWO-ROW LAYOUT
   Row 1: avatar | textarea with emoji picker and counter
   Row 2:        | identity switch and Post Comment button
   Does not change the nested reply form layout.
   ============================================================================ */

@media (max-width: 575.98px) {
    .comment-form {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 6px;
        row-gap: 7px;
    }

    .comment-form > .comment-form-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .comment-form .comment-form-controls > .comment-anon-switch > .form-check-label {
        font-size: 11px;
    }
}

@media (max-width: 359.98px) {
    .comment-form > .comment-form-controls {
        gap: 6px;
    }

    .comment-form .comment-form-controls > .btn-comment {
        min-width: 0;
    }
}


/* ============================================================================
   REPLY FORM — STABLE TWO-ROW LAYOUT (MATCHES COMMENT COMPOSER)
   Row 1: avatar | textarea with emoji picker and counter
   Row 2:        | identity switch and Cancel / Post Reply buttons
   The footer occupies its own grid row, so the switch cannot squeeze the textarea.
   ============================================================================ */

@media (max-width: 575.98px) {
    .reply-form {
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 6px;
        row-gap: 7px;
    }

    .reply-form > .reply-entry-row > .reply-form-avatar {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .reply-form > .reply-form-footer > .comment-anon-switch > .form-check-label {
        font-size: 11px;
    }
}

@media (max-width: 359.98px) {
    .reply-form > .reply-form-footer {
        gap: 6px;
    }

    .reply-form > .reply-form-footer > .reply-form-buttons {
        gap: 5px;
    }
}


/* ========================================================================
   ADMIN DROPDOWN COLORS
   Source: admin-dropdown-colors.css
   ======================================================================== */

/* ==========================================
   ADMIN DROPDOWN ACTIONS
   Applies to rant, comment and reply menus.
========================================== */

/* Delete rant, comment or reply - orange */

@media (max-width: 767.98px) {
    input, select, textarea {
        font-size: max(16px, 1rem);
    }
    img, video, iframe { max-width: 100%; }
}

@media (hover: none) and (pointer: coarse) {
    button, [role="button"], a { touch-action: manipulation; }
}

@media (max-width: 575.98px) {

    .comment-removed-author {
        padding: 4px 8px;
        gap: 6px;

        font-size: 0.74rem;
    }

    .comment-removed-author i {
        font-size: 0.87rem;
    }

    .comment-item.is-removed .comment-removed-message {
        font-size: 0.8rem;
    }

}
/* ========================================================================
   CONVERSATION PARTICIPANTS
   Matches the existing rant-detail navy and blue visual theme.
   ======================================================================== */

@media (max-width: 575.98px) {
    .rant-participants-toggle {
        min-height: 58px;
        padding: 10px 12px;
    }

    .rant-participants-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
    }

    .rant-participant {
        gap: 10px;
        padding: 11px 12px;
    }

    .rant-participant-stats {
        gap: 10px;
    }

    .rant-participant-stat {
        gap: 4px;
        font-size: 0.68rem;
    }
}

@media (max-width: 380px) {
    .rant-participant {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .rant-participant-stats {
        justify-content: flex-start;
        padding-left: 1px;
    }
}

@media (max-width: 576px) {
    .terms-page-v2 .policy-jump-nav {
        padding: 15px;
        margin: 20px 0 25px;
    }

    .terms-page-v2 .policy-jump-links {
        gap: 7px;
    }

    .terms-page-v2 .policy-jump-links a {
        flex: 1 1 calc(50% - 7px);
        padding: 10px 8px;
        font-size: 0.76rem;
        text-align: center;
    }
}

/* --------------------------------------------------
   FEEDBACK PAGE
-------------------------------------------------- */

@media (max-width: 576px) {

    .feedback-create-card {
        padding: 20px;
    }

    .feedback-card-heading {
        align-items: flex-start;
    }

    .feedback-form-actions {
        flex-direction: column;
    }

    .feedback-form-actions .btn {
        width: 100%;
    }

}
/* =========================================================
   HIDDEN RANT PLACEHOLDER
   Used for both newly hidden rants and refreshed page loads.
   Dark-theme styling; preserve visible dropdown menus.
========================================================= */

/*
 * Keep overflow visible so Bootstrap dropdown menus are not clipped.
 * The hide overlay is contained by its own border radius instead.
 */

@media (max-width: 575.98px) {
    .hidden-rant-expanded-notice {
        align-items: flex-start;
        flex-direction: column;
    }

    .hidden-rant-expanded-actions {
        justify-content: flex-start;
    }
}
/* Keep Hide/Unhide typography identical to other dropdown items */

@media (max-width: 576px) {

    .feed-sort-bar {
        gap: 7px;
    }

    .feed-sort-button {
        min-height: 37px;
        padding: 8px 11px;
        font-size: 0.8rem;
    }

}

/* ========================================================================
   FEED SORTING — CENTERED, RESPONSIVE FINAL RULES
   Keep after earlier feed-tab and mobile overrides.
   ======================================================================== */

@media (max-width: 575.98px) {
    .feed-tabs,
    .page-layout .feed-tabs {
        display: grid;
        justify-content: center;
        gap: 6px;
        padding: 6px;
        overflow: visible;
    }

}

/* Compact text and icons for very narrow phones. */

@media (max-width: 359.98px) {
    .feed-tabs .feed-tab {
        gap: 4px;
        padding-inline: 4px;
        font-size: 0.69rem;
    }
}

/* ========================================================================
   24. SITE-WIDE RESPONSIVE HARDENING
   ------------------------------------------------------------------------
   Single final responsive layer, following the existing cascade.
   Covers layout, header, feed, threads, forms, modals, menus and pages.
   Preserves the original theme, JS selectors, and nesting connector limits.
   ======================================================================== */

/* Layout: prevent wide descendants from expanding grid and flex tracks. */

@media (min-width: 992px) and (max-width: 1199.98px) {
    .site-header .header-shell {
        gap: 10px;
    }

    .site-header .brand-text {
        font-size: clamp(0.92rem, 1.3vw, 1.08rem);
    }

    .main-nav .nav-link {
        padding-inline: 7px;
        gap: 5px;
        font-size: 0.78rem;
    }

    .site-header .header-search {
        flex-basis: 155px;
        width: 155px;
    }

    .header-right {
        gap: 6px;
    }
}

/* Tablet and smaller: keep panels within available width. */

@media (max-width: 991.98px) {
    .page-layout,
    .page-layout .feed-shell,
    .page-main,
    .page-sidebar,
    .content-hero,
    .wall-hero,
    .community-stats {
        max-width: 100%;
    }


    .page-sidebar {
        margin-inline: auto;
    }

    .rantitude-card {
        position: static;
    }

    .header-shell,
    .site-header .header-shell {
        min-width: 0;
    }

    .site-header .brand-link {
        min-width: 0;
    }

    .site-header .brand-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Match the existing 5-level tablet visual limit. */
    .comment-item {
        --tree-indent: 27px;
    }
}

/* Phones and portrait tablets. */

@media (max-width: 767.98px) {
    .site-main {
        padding-top: 20px;
        padding-bottom: 48px;
    }

    .feed-shell {
        width: calc(100% - 20px);
    }


    .page-layout-inner,
    .page-main,
    .home-stack,
    .rant-feed {
        width: 100%;
    }

    .site-header .header-shell {
        gap: 8px;
    }

    .site-header .brand-logo {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        max-width: 42px;
        max-height: 42px;
    }

    .site-header .brand-text {
        font-size: clamp(0.89rem, 3.1vw, 1.12rem);
    }

    .header-right {
        gap: 6px;
    }

    .wall-hero {
        width: 100%;
        min-height: 0;
        padding: clamp(18px, 4vw, 28px);
    }

    .page-layout .wall-hero-content {
        padding-inline: 0;
    }

    .wall-hero h1 {
        overflow-wrap: anywhere;
        font-size: clamp(1.75rem, 6.7vw, 2.45rem);
    }

    .content-hero,
    .rules-grid,
    .rules-card-grid {
        min-width: 0;
    }

    .comments-panel {
        margin-inline: 10px;
    }

    .comments-panel-inner {
        padding: 10px;
    }

    .comment-form,
    .reply-form {
        max-width: 100%;
    }

    .comment-input-wrap,
    .reply-input-wrap {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Rant actions stay visible, even with long translated labels. */
    .rant-main {
        padding-inline: 12px;
    }

    .rant-actions,
    .rant-actions-row,
    .comment-actions-row {
        row-gap: 8px;
    }

    .footer-shell,
    .footer-shell nav {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    /* Notifications are usable above the on-screen keyboard. */
    .notifications-menu.show {
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
    }
}

/* Small-screen component spacing. */

@media (max-width: 575.98px) {
    .feed-tabs,
    .page-layout .feed-tabs {
        gap: 6px;
        padding: 6px;
    }


    .feed-sort-bar {
        gap: 7px;
    }

    .feed-sort-button {
        min-height: 44px;
        padding: 9px 11px;
    }

    .community-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .community-stats .stat-item {
        min-width: 0;
        min-height: 68px;
        padding: 9px;
        gap: 7px;
    }

    .community-stats .stat-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
    }

    .community-stats .stat-item span:not(.stat-icon) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .comments-panel {
        margin-inline: 6px;
    }

    .comments-panel-inner {
        padding: 8px;
    }

    .comment-line {
        gap: 7px;
    }

    /* Same three-level phone cap as the existing tree connector rules. */
    .comment-item {
        --tree-indent: 24px;
    }

    .reply-form-buttons,
    .comment-form-controls,
    .rant-composer .composer-footer {
        max-width: 100%;
    }

    .excluded-words-input-group,
    .mobile-nav-search,
    .auth-input-group {
        min-width: 0;
        max-width: 100%;
    }

    .notifications-menu {
        width: min(330px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }
}

/* Minimum supported phone widths and large browser zoom. */

@media (max-width: 359.98px) {
    .site-header .header-shell {
        gap: 5px;
    }

    .site-header .brand-link {
        gap: 5px;
    }

    .site-header .brand-logo {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        max-width: 36px;
        max-height: 36px;
    }

    .site-header .brand-text {
        font-size: 0.88rem;
    }

    .header-right {
        gap: 4px;
    }


    .feed-shell {
        width: calc(100% - 12px);
    }

    .rant-main {
        padding-inline: 9px;
    }

    .comments-panel {
        margin-inline: 4px;
    }

    .comments-panel-inner {
        padding: 7px;
    }

    .feed-tabs .feed-tab {
        gap: 4px;
        padding-inline: 4px;
        font-size: 0.7rem;
    }
}

/* Short mobile landscape viewports, including device rotation. */

@media (max-height: 540px) and (pointer: coarse) {
    .auth-modal .modal-content,
    #signupModal .modal-content {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .notifications-menu.show {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

/* Touch-specific targets without expanding dense desktop navigation. */

@media (pointer: coarse) {
    .feed-tab,
    .feed-sort-button,
    .thread-load-more,
    .mobile-nav-link,
    .mobile-menu-toggle,
    .site-header .icon-button,
    .header-account-toggle,
    .vote-btn,
    .emoji-picker-option,
    .emoji-picker-category {
        min-height: 44px;
        touch-action: manipulation;
    }

    .reply-toggle,
    .replies-toggle,
    .comments-toggle {
        touch-action: manipulation;
    }
}

/* Accessibility: preserve the site's colors while reducing animation. */

@media (max-width: 575.98px) {
    .site-header .header-notifications .notifications-menu,
    .site-header .notifications-menu,
    .notifications-menu {
        width: min(380px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }

    .notifications-menu .notifications-list {
        gap: 10px;
        padding: 10px;
    }

    .notifications-menu .notifications-list .notification-item {
        gap: 10px;
        padding: 12px 10px;
    }
}
/* ============================================================
   Global Success Messages
   ============================================================ */

@media (max-width: 575px) {
    .global-success-container {
        margin-top: 10px;
        padding: 0 10px;
    }

    .global-success-alert {
        gap: 9px;
        min-height: 52px;
        padding: 11px 42px 11px 11px;
        border-radius: 10px;
    }

    .global-success-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .global-success-text {
        font-size: 0.82rem;
    }
}
/* ========================================================================
   FEEDBACK PAGE — append this section to assets/css/app.css
   ======================================================================== */

/* ============================================================
   THERANTITWALL — FEEDBACK PAGE
   Scope all rules to .feedback-page to avoid affecting the feed.
   Designed for the site's existing dark/light theme and bg.png.
   ============================================================ */

@media (max-width: 900px) { .feedback-page .feedback-layout { grid-template-columns: minmax(0, 1fr); } .feedback-page .feedback-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .feedback-page .feedback-side-foot { grid-column: 1/-1; } }

@media (max-width: 560px) { .feedback-page .feedback-shell { padding: 28px 14px 55px; } .feedback-page .feedback-topbar-inner { padding: 14px; } .feedback-page .feedback-back { font-size: .78rem; } .feedback-page .feedback-intro { margin-bottom: 24px; } .feedback-page .feedback-types { grid-template-columns: minmax(0, 1fr); } .feedback-page .feedback-panel-heading { align-items: flex-start; } .feedback-page .feedback-aside { display: flex; } .feedback-page .feedback-actions { flex-direction: column; align-items: stretch; } .feedback-page .feedback-cancel { text-align: center; padding: 8px; } }

/* AJAX feedback validation */

@media (max-width: 575.98px) {

    .about-creators {
        padding: 22px 14px;
    }

    .about-mascots {
        gap: 8px;
        min-height: 205px;
    }

    .about-mascot {
        flex: 0 0 118px;
        width: 142px;
        height: 218px;
        transform: scale(0.83);
        transform-origin: bottom left;
    }

    .about-mascots__heart {
        margin-bottom: 18px;
        font-size: 28px;
    }

    .about-creators-message {
        margin-top: 16px;
    }

    .about-creators-message h3 {
        font-size: 1.15rem;
    }

}


/* ============================================================
   GUEST HERO — AUTHENTICATION BUTTONS
   ============================================================ */

@media (max-width: 575.98px) {

    .wall-hero-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }

    .wall-hero-btn {
        width: 100%;
        padding: 11px 12px;
    }

}

@media (max-width: 991.98px) {
    :root { --site-page-gutter: 5px; }
}

@media (max-width: 767.98px) {
    :root { --site-page-gutter: 2px; }
}

/* Apply the outer gutter ONCE, at the parent layout level. */

@media (max-width: 767.98px) {
    /* These classes formerly introduced 10–32px of additional gutters. */
    body .site-main .page-layout,
    body .site-main .content-page,
    body .site-main .legal-page,
    body .site-main .feedback-page,
    body .site-main .profile-page,
    body .site-main .report-page,
    body .site-main .feed-shell,
    body .site-main .page-layout-inner,
    body .site-main .page-main,
    body .site-main .home-stack,
    body .site-main .rant-feed {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    body .site-main .page-layout .container,
    body .site-main .page-layout .container-fluid,
    body .site-main .content-page .container,
    body .site-main .content-page .container-fluid {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }

    body .site-main .page-layout .row,
    body .site-main .page-layout-inner.row {
        --bs-gutter-x: 0;
    }

    /* Feed cards and form wrappers should not consume the available width. */
    body .site-main .rant-card,
    body .site-main .rant-feed,
    body .site-main .rant-composer,
    body .site-main .wall-hero,
    body .site-main .community-stats,
    body .site-main .content-hero,
    body .site-main .content-card {
        width: 100%;
        max-width: 100%;
    }

    body .site-main .rant-main { padding-inline: 9px; }
    body .site-main .comments-panel {
        margin-left: 2px;
        margin-right: 2px;
    }
    body .site-main .comments-panel-inner { padding: 7px; }

    /* Preserve threading but reduce indentation on phones. */
    body .site-main .reply-children {
        margin-left: 4px;
        padding-left: 12px;
    }
    body .site-main .comment-item { --tree-indent: 17px; }

    /* Keep writing fields usable: the text area can take the full row. */
    body .site-main .comment-form,
    body .site-main .reply-form,
    body .site-main .reply-form .reply-entry-row {
        min-width: 0;
        max-width: 100%;
        gap: 7px;
    }
    body .site-main .comment-input-wrap,
    body .site-main .reply-input-wrap,
    body .site-main .reply-form .reply-input-wrap {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    body .site-main .comment-form textarea,
    body .site-main .reply-form textarea,
    body .site-main .rant-composer textarea {
        width: 100%;
        min-width: 0;
        font-size: 1rem;
        line-height: 1.55;
    }

    /* About, legal pages and feed: same outside brick-wall margin. */
    body .site-main .wall-hero,
    body .site-main .content-hero,
    body .site-main .content-card { padding: 18px 12px; }
    body .site-main .page-layout .wall-hero-content { padding-inline: 0; }

    body .site-main .feed-tabs,
    body .site-main .page-layout .feed-tabs,
    body .site-main .feed-sort-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        padding: 4px;
    }
    body .site-main .feed-tab,
    body .site-main .feed-sort-button {
        flex-direction: column;
        min-height: 52px;
        gap: 3px;
        padding: 6px 2px;
        font-size: 0.8125rem;
        font-weight: 750;
        line-height: 1.2;
    }
    body .site-main .feed-tab i,
    body .site-main .feed-sort-button i { font-size: 1rem; flex-shrink: 0; }

    /* Readable font sizes throughout the mobile site. */
    body .site-main .rant-body,
    body .site-main .rant-body p,
    body .site-main .comment-body,
    body .site-main .comment-body p,
    body .site-main .reply-body,
    body .site-main .reply-body p,
    body .site-main .content-page p,
    body .site-main .content-card p,
    body .site-main .legal-page p,
    body .site-main .policy-section p {
        font-size: 1.0625rem;
        line-height: 1.65;
    }
    body .site-main .rant-author,
    body .site-main .rant-username,
    body .site-main .comment-author,
    body .site-main .comment-username { font-size: 1rem; }
    body .site-main .rant-post-time,
    body .site-main .comment-time,
    body .site-main .reply-time,
    body .site-main .rant-actions,
    body .site-main .comment-actions-row { font-size: 0.875rem; }
    body .site-main .wall-hero-lead,
    body .site-main .wall-hero > p,
    body .site-main .content-page .page-lead,
    body .site-main .wall-hero-guest-copy small {
        font-size: 1rem;
        line-height: 1.6;
    }
    body .site-main input,
    body .site-main textarea,
    body .site-main select,
    body .site-main .form-control,
    body .site-main .form-select { font-size: 1rem; }
    body .site-main .community-stats .stat-item strong { font-size: 1.125rem; }
    body .site-main .community-stats .stat-item span:not(.stat-icon) {
        font-size: 0.75rem;
        line-height: 1.35;
        letter-spacing: 0.02em;
    }

    /* Enlarged brand: keep available room for account and menu buttons. */
    body .site-header .brand-logo {
        width: 52px;
        height: 52px;
        max-width: 52px;
        max-height: 52px;
        flex: 0 0 52px;
    }
    body .site-header .brand-text {
        font-size: clamp(1.05rem, 3.7vw, 1.2rem);
        line-height: 1.12;
    }
    body .site-header .brand-link { gap: 7px; }

    /* Full-width dropdown independent of the tiny account-toggle. */
    body .site-header .header-account-menu {
        width: min(270px, calc(100vw - 16px));
        min-width: 0;
        max-width: calc(100vw - 16px);
        right: 0;
        left: auto;
    }
}

@media (max-width: 359.98px) {
    body .site-main .feed-tab,
    body .site-main .feed-sort-button { font-size: 0.75rem; padding-inline: 1px; }
    body .site-header .brand-logo {
        width: 46px;
        height: 46px;
        max-width: 46px;
        max-height: 46px;
        flex: 0 0 46px;
    }
}

/* ========================================================================
   26. RESPONSIVE FINISH — DESKTOP SPACING AND RULES-PAGE ICONS
   Desktop has larger wall borders and more compact type. Mobile retains the
   nearly edge-to-edge feed, readable type, and four-column sorting buttons.
   ======================================================================== */

/* Keep decorative rule icons from sitting on headings or descriptions. */

@media (max-width: 767.98px) {
    :root { --site-page-gutter: 2px; }

    body .site-main {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* Rules content gets its own row below the absolutely positioned icon. */
    body .site-main .rules-page-v2 .rule-card,
    body .site-main .rules-card-grid .rule-card {
        padding: 66px 12px 16px !important;
    }

    body .site-main .rules-page-v2 .rule-card h2,
    body .site-main .rules-card-grid .rule-card h2,
    body .site-main .rules-page-v2 .rule-card h3,
    body .site-main .rules-card-grid .rule-card h3 {
        margin-top: 0;
        line-height: 1.35;
        overflow-wrap: break-word;
    }

    body .site-main .rules-page-v2 .rule-card p,
    body .site-main .rules-card-grid .rule-card p {
        overflow-wrap: break-word;
        line-height: 1.6;
    }

    /* Give icon plus title separate columns in enforcement notices. */
    body .site-main .rules-page-v2 .rules-enforcement-header {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: start;
        column-gap: 12px;
    }

    body .site-main .rules-page-v2 .rules-intro-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
        gap: 10px;
    }

    body .site-main .rules-page-v2 .rules-enforcement-title,
    body .site-main .rules-page-v2 .rules-intro-card > div:last-child {
        min-width: 0;
    }
}

/* ========================================================================
   MOBILE CANONICAL LAYOUT
   ------------------------------------------------------------------------
   Last mobile rules are authoritative. Desktop and large-screen layout are
   untouched. Keep app.css loaded BEFORE mobile.css.
   ======================================================================== */

@media (max-width: 767.98px) {
    :root {
        --site-page-gutter: 3px;
    }

    /* Keep a 3px outer edge on phones without doubling nested gutters. */
    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    body .site-main {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: var(--site-page-gutter) !important;
        padding-left: var(--site-page-gutter) !important;
    }

    body .site-main > .container,
    body .site-main > .container-fluid,
    body .site-main.container,
    body .site-main.container-fluid,
    body .site-main > .page-layout,
    body .site-main > .content-page,
    body .site-main > .legal-page,
    body .site-main > .profile-page,
    body .site-main > .report-page,
    body .site-main > .feedback-page {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* Feed/form and informational pages receive identical usable widths. */
    body .site-main .page-layout,
    body .site-main .page-layout-inner,
    body .site-main .page-main,
    body .site-main .home-stack,
    body .site-main .feed-shell,
    body .site-main .rant-feed,
    body .site-main .content-page,
    body .site-main .legal-page,
    body .site-main .profile-page,
    body .site-main .report-page,
    body .site-main .feedback-page {
        box-sizing: border-box;
        min-width: 0;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body .site-main .page-layout .container,
    body .site-main .page-layout .container-fluid,
    body .site-main .content-page .container,
    body .site-main .content-page .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding-inline: 0 !important;
    }

    body .site-main .page-layout .row,
    body .site-main .page-layout-inner.row {
        --bs-gutter-x: 0;
        margin-inline: 0;
    }

    body .site-main .page-layout .row > *,
    body .site-main .page-layout-inner.row > * {
        min-width: 0;
        padding-inline: 0;
    }

    /* Do not add a second gutter to individual content panels. */
    body .site-main .rant-card,
    body .site-main .rant-composer,
    body .site-main .comments-panel,
    body .site-main .wall-hero,
    body .site-main .community-stats,
    body .site-main .content-hero,
    body .site-main .content-card {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body .site-main .rant-main { padding-inline: 8px; }
    body .site-main .comments-panel-inner { padding-inline: 5px; }
    body .site-main .reply-children { margin-left: 3px; padding-left: 8px; }

    body .site-main .comment-form,
    body .site-main .reply-form,
    body .site-main .comment-input-wrap,
    body .site-main .reply-input-wrap {
        box-sizing: border-box;
        min-width: 0;
        max-width: 100%;
    }

    body .site-main .comment-form textarea,
    body .site-main .reply-form textarea,
    body .site-main .rant-composer textarea {
        min-width: 0;
        width: 100%;
        font-size: 1rem;
    }

    /* Four sorting choices on one row, including Most Commented. */
    body .site-main .feed-tabs,
    body .site-main .feed-sort-bar {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 3px;
        padding: 3px;
    }

    body .site-main .feed-tab,
    body .site-main .feed-sort-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        width: 100%;
        padding: 6px 2px;
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        font-size: 0.8125rem;
        line-height: 1.2;
    }

    /* Mobile text stays larger than desktop; menus do not squash to letters. */
    body .site-main .rant-body,
    body .site-main .rant-body p,
    body .site-main .comment-body,
    body .site-main .comment-body p,
    body .site-main .reply-body,
    body .site-main .reply-body p,
    body .site-main .content-page p,
    body .site-main .content-card p,
    body .site-main .legal-page p {
        font-size: 1.0625rem;
        line-height: 1.65;
    }

    .site-header .header-account-menu,
    .site-header .dropdown-menu.header-account-menu {
        width: min(270px, calc(100vw - 8px)) !important;
        max-width: calc(100vw - 8px) !important;
        min-width: 0 !important;
        right: 0;
        left: auto;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }

    .site-header .header-account-menu .dropdown-item {
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* Separate each Rules icon from its heading and description. */
    body .site-main .rules-page-v2 .rule-card,
    body .site-main .rules-card-grid .rule-card {
        padding: 66px 10px 16px !important;
    }

    body .site-main .rules-page-v2 .rules-enforcement-header {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 12px;
    }
}
/* ============================================================
   Single Rant — Mobile Spacing Only
   ============================================================ */

@media (max-width: 767.98px) {

    .rant-detail-panel-top {
        padding: 8px 10px;
    }

    .rant-detail-header {
        gap: 10px;
        padding: 10px 12px;
    }

    .rant-detail-heading-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .rant-detail-header-copy h1 {
        font-size: 1.15rem;
    }

    .rant-detail-header-copy p {
        margin-top: 3px;
        font-size: 0.85rem;
    }

    .rant-detail-section-bar {
        padding: 8px 10px;
    }

    .rant-participants {
        margin: 6px 0;
    }

    .rant-participants-toggle {
        min-height: 44px;
        padding: 8px 10px;
    }
}