/* -------------------------------------------------------------------------
   De Tectis Reports — R22.2 split mobile CSS
   Purpose: preserve R22 desktop exactly while applying mobile-only search
   dialog behavior below mobile/tablet breakpoints.
------------------------------------------------------------------------- */

.mobile-search-button,
.mobile-search-dialog {
  display: none;
}

@media (max-width: 820px) {
  .mobile-nav-head {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
  }

  .mobile-search-button {
    display: inline-grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(68,159,218,.34) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% 45%, rgba(68,159,218,.12), transparent 62%),
      linear-gradient(180deg, rgba(4,10,12,.78), rgba(4,10,12,.82)) !important;
    color: var(--social-green) !important;
    box-shadow:
      inset 0 0 15px rgba(68,159,218,.06),
      0 0 0 1px rgba(0,0,0,.22) !important;
    cursor: pointer !important;
  }

  .mobile-search-button > span {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    background-color: currentColor !important;
    -webkit-mask: url("../icons/de-tectis-search-icon.svg") center / contain no-repeat;
    mask: url("../icons/de-tectis-search-icon.svg") center / contain no-repeat;
  }

  .mobile-search-button[aria-expanded="true"] {
    border-color: rgba(68,159,218,.68) !important;
    background:
      radial-gradient(circle at 50% 45%, rgba(68,159,218,.18), transparent 62%),
      linear-gradient(180deg, rgba(12,31,20,.90), rgba(4,10,12,.90)) !important;
  }

  .mobile-nav-button {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
  }
}

@media (max-width: 720px) {
  .social-utility-bar .social-search {
    display: none !important;
  }

  .social-utility-bar {
    grid-template-rows: 38px !important;
    align-items: center !important;
  }

  body[data-de-tectis-admin="0"] .social-utility-bar {
    grid-template-columns:
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      minmax(104px, var(--r22-chip-width))
      minmax(0, 1fr) !important;
  }

  body[data-de-tectis-admin="1"] .social-utility-bar {
    grid-template-columns:
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      var(--r22-utility-icon)
      minmax(104px, var(--r22-chip-width)) !important;
  }

  body[data-de-tectis-admin="0"] .notification-button,
  body[data-de-tectis-admin="1"] .notification-button {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-de-tectis-admin="1"] .moderation-queue-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-de-tectis-admin="0"] .message-button {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-de-tectis-admin="1"] .message-button {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  body[data-de-tectis-admin="0"] .social-user-pill {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: start !important;
  }

  body[data-de-tectis-admin="1"] .social-user-pill {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }

  .mobile-search-dialog {
    position: fixed !important;
    inset: 0 !important;
    z-index: 90 !important;
    display: grid !important;
    place-items: start center !important;
    padding: calc(18px + env(safe-area-inset-top)) 14px 14px !important;
    background: rgba(1, 5, 6, .58) !important;
    backdrop-filter: blur(10px) !important;
  }

  .mobile-search-dialog[hidden] {
    display: none !important;
  }

  .mobile-search-form {
    width: min(100%, 520px) !important;
    display: grid !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(68,159,218,.32) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 10% 0%, rgba(68,159,218,.08), transparent 45%),
      rgba(2, 9, 10, .96) !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,.58),
      inset 0 0 0 1px rgba(255,255,255,.018) !important;
  }

  .mobile-search-dialog-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .mobile-search-dialog-head strong {
    color: var(--social-text) !important;
    font-family: "Rajdhani", "Inter", sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
  }

  .mobile-search-dialog-head div {
    display: flex !important;
    gap: 8px !important;
  }

  .mobile-search-dialog-head button {
    width: 36px !important;
    height: 34px !important;
    border: 1px solid rgba(68,159,218,.28) !important;
    border-radius: 10px !important;
    background: rgba(7,18,13,.84) !important;
    color: var(--social-green) !important;
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .mobile-search-field {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 50px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(68,159,218,.28) !important;
    border-radius: 14px !important;
    background: rgba(0, 7, 8, .82) !important;
  }

  .mobile-search-field span {
    width: 22px !important;
    height: 22px !important;
    background-color: var(--social-green) !important;
    -webkit-mask: url("../icons/de-tectis-search-icon.svg") center / contain no-repeat;
    mask: url("../icons/de-tectis-search-icon.svg") center / contain no-repeat;
  }

  .mobile-search-field input {
    width: 100% !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--social-text) !important;
    font-size: 16px !important;
  }

  .mobile-search-field input::placeholder {
    color: rgba(194,206,193,.62) !important;
  }

  .mobile-search-submit {
    min-height: 46px !important;
    border: 1px solid rgba(68,159,218,.38) !important;
    border-radius: 13px !important;
    background: rgba(68,159,218,.13) !important;
    color: var(--social-green) !important;
    font-family: "Rajdhani", "Inter", sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
  }
}


/* -------------------------------------------------------------------------
   De Tectis Reports — R22.4 mobile CSS adjustments
   Desktop validation passed after R22.3. This file only affects mobile widths
   and corrects the remaining mobile release issues:
   - popover layering/height/opacity
   - browser tap-highlight/focus artifact on utility icons
   - post action row stacking vertically instead of staying as a compact row
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-icon-button,
  .mobile-search-button,
  .mobile-nav-button,
  .social-user-pill,
  .social-card-actions button,
  .post-delete-button,
  .post-menu,
  .profile-bridge-button {
    -webkit-tap-highlight-color: transparent !important;
  }

  .social-icon-button:focus,
  .mobile-search-button:focus,
  .mobile-nav-button:focus,
  .social-user-pill:focus,
  .social-card-actions button:focus {
    outline: none !important;
  }

  .social-icon-button:focus-visible,
  .mobile-search-button:focus-visible,
  .mobile-nav-button:focus-visible,
  .social-user-pill:focus-visible,
  .social-card-actions button:focus-visible {
    outline: 2px solid rgba(68,159,218,.58) !important;
    outline-offset: 3px !important;
  }

  .social-icon-button.is-open,
  .social-icon-button[aria-expanded="true"] {
    background:
      radial-gradient(circle at 50% 48%, rgba(68,159,218,.13), transparent 60%),
      rgba(4, 10, 12, .82) !important;
    border-color: rgba(68,159,218,.66) !important;
    box-shadow:
      0 0 0 1px rgba(68,159,218,.16),
      0 0 18px rgba(68,159,218,.16) !important;
  }

  .social-utility-popovers {
    position: fixed !important;
    z-index: 92 !important;
    top: calc(238px + env(safe-area-inset-top)) !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    max-width: none !important;
    pointer-events: none !important;
  }

  .social-popover {
    pointer-events: auto !important;
    width: 100% !important;
    max-height: min(48vh, 430px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: 12px 14px 14px !important;
    border: 1px solid rgba(68,159,218,.40) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(3, 12, 12, .985), rgba(1, 7, 8, .975)),
      radial-gradient(circle at 8% 0%, rgba(68,159,218,.10), transparent 44%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:
      0 22px 66px rgba(0,0,0,.64),
      inset 0 0 0 1px rgba(255,255,255,.016) !important;
  }

  .social-popover[hidden] {
    display: none !important;
  }

  .social-popover-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    min-height: 44px !important;
    padding: 0 0 10px !important;
    margin-bottom: 10px !important;
    background: linear-gradient(180deg, rgba(3, 12, 12, .985), rgba(3, 12, 12, .90)) !important;
  }

  .social-popover-head strong {
    font-size: clamp(17px, 4.4vw, 22px) !important;
    letter-spacing: clamp(2px, .72vw, 4px) !important;
  }

  .social-popover-head button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    color: var(--social-soft) !important;
    font-size: 20px !important;
  }

  .social-popover-row,
  .social-popover-account {
    min-height: 54px !important;
    padding: 9px 6px !important;
  }

  .social-popover-action {
    min-height: 44px !important;
    margin-top: 10px !important;
  }
}

@media (max-width: 720px) {
  /* Keep post actions as a compact horizontal social row on mobile.
     Earlier mobile rules turned this into a tall vertical stack. */
  .social-card .social-card-actions,
  .social-card-actions {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(68,159,218,.16) !important;
  }

  .social-card-actions button,
  .social-card-actions a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  .social-card-actions span[data-count] {
    margin-left: 0 !important;
    min-width: 1ch !important;
  }

  .social-action-icon {
    width: 17px !important;
    height: 17px !important;
  }

  /* Place mobile popovers below the top utility controls but above the feed. */
  .social-utility-popovers {
    top: calc(224px + env(safe-area-inset-top)) !important;
    left: 20px !important;
    right: 20px !important;
  }
}

@media (max-width: 430px) {
  .social-utility-popovers {
    top: calc(218px + env(safe-area-inset-top)) !important;
    left: 12px !important;
    right: 12px !important;
  }

  .social-popover {
    max-height: min(46vh, 390px) !important;
    border-radius: 16px !important;
  }

  .social-popover-head strong {
    font-size: clamp(15px, 4.6vw, 20px) !important;
    letter-spacing: clamp(1.6px, .8vw, 3.2px) !important;
  }

  .social-popover-head button {
    width: 42px !important;
    height: 42px !important;
  }

  .social-card-actions button,
  .social-card-actions a {
    min-height: 42px !important;
    gap: 5px !important;
  }

  .social-action-icon {
    width: 16px !important;
    height: 16px !important;
  }
}

@media (max-width: 360px) {
  .social-utility-popovers {
    top: calc(210px + env(safe-area-inset-top)) !important;
  }

  .social-card-actions button,
  .social-card-actions a {
    min-height: 40px !important;
    gap: 4px !important;
  }

  .social-action-icon {
    width: 15px !important;
    height: 15px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R22.4 CANNON — merged mobile utility layer repair
   Base: uploaded R22.4 mobile CSS adjustments package.
   Added back from utility-layer repair: bell/admin/messages/user controls must
   render above feed, composer, title, and other page layers on mobile.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .coalition-social-shell,
  .social-sidebar,
  .mobile-nav-head,
  .coalition-social-main,
  .social-header,
  .social-utility-bar {
    overflow: visible !important;
  }

  .social-sidebar {
    position: relative !important;
    z-index: 70 !important;
  }

  .mobile-nav-head {
    position: relative !important;
    z-index: 96 !important;
    isolation: isolate !important;
  }

  .mobile-search-button,
  .mobile-nav-button {
    position: relative !important;
    z-index: 99 !important;
  }

  .coalition-social-main {
    position: relative !important;
    z-index: 20 !important;
  }

  .social-header {
    position: relative !important;
    z-index: 86 !important;
    isolation: isolate !important;
  }

  .social-title-wrap {
    position: relative !important;
    z-index: 1 !important;
  }

  .social-composer,
  .social-feed-controls,
  .social-card,
  .coalition-social-rail {
    position: relative !important;
    z-index: 1 !important;
  }

  .social-utility-bar {
    position: sticky !important;
    z-index: 94 !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  .social-account-cluster {
    position: relative !important;
    z-index: 96 !important;
  }

  .social-utility-bar .social-icon-button,
  .social-utility-bar .notification-button,
  .social-utility-bar .moderation-queue-button,
  .social-utility-bar .message-button,
  .social-utility-bar .social-user-pill {
    position: relative !important;
    z-index: 98 !important;
    pointer-events: auto !important;
  }

  .social-utility-bar .notification-button::before,
  .social-utility-bar .moderation-queue-button::before,
  .social-utility-bar .message-button::before,
  .social-utility-bar .notification-button::after,
  .social-utility-bar .message-button::after {
    position: relative;
    z-index: 2 !important;
  }

  .social-utility-popovers {
    z-index: 118 !important;
  }

  .social-popover {
    z-index: 119 !important;
  }

  .mobile-search-dialog {
    z-index: 140 !important;
  }
}

@media (max-width: 720px) {
  .social-utility-bar {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }

  .social-utility-bar .notification-button,
  .social-utility-bar .moderation-queue-button,
  .social-utility-bar .message-button {
    box-shadow:
      0 0 0 1px rgba(68,159,218,.08),
      0 8px 18px rgba(0,0,0,.28),
      inset 0 0 12px rgba(68,159,218,.035) !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R23 — left navigation mobile hardening
   Mobile hamburger/nav layer. Preserves the R22.4 CANNON mobile pass while
   strengthening the left navigation menu for touch devices and narrow screens.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-sidebar {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(68,159,218,.14) !important;
  }

  .mobile-nav-head {
    min-height: 58px !important;
    align-items: center !important;
  }

  .mobile-nav-head .social-logo {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .mobile-nav-head .social-logo strong {
    max-width: 42vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar {
    position: relative !important;
    z-index: 105 !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav {
    max-height: min(58vh, 520px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(2,9,9,.66), rgba(2,9,9,.38)),
      radial-gradient(circle at 0% 0%, rgba(68,159,218,.06), transparent 46%) !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav a {
    min-height: 46px !important;
    border-color: rgba(68,159,218,.12) !important;
    background: rgba(2, 8, 9, .62) !important;
    touch-action: manipulation !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav a.active {
    border-color: rgba(68,159,218,.55) !important;
    background:
      linear-gradient(90deg, rgba(68,159,218,.16), rgba(68,159,218,.055)) !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav a:focus-visible {
    outline: 2px solid rgba(68,159,218,.62) !important;
    outline-offset: 3px !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav a em {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .sidebar-status-card,
  .mobile-nav-toggle:checked + .social-sidebar .sidebar-quote-card {
    max-height: min(38vh, 340px) !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .sidebar-status-card::-webkit-scrollbar,
  .mobile-nav-toggle:checked + .social-sidebar .sidebar-quote-card::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }
}

@media (max-width: 390px) {
  .mobile-nav-head {
    grid-template-columns: minmax(0, 1fr) 46px auto !important;
    gap: 8px !important;
  }

  .mobile-nav-head .social-logo {
    grid-template-columns: 58px minmax(0, auto) !important;
    gap: 7px !important;
  }

  .mobile-nav-head .social-logo-mark {
    width: 58px !important;
    transform: scale(.88);
    transform-origin: left center;
  }

  .mobile-nav-head .social-logo strong {
    font-size: 13px !important;
    letter-spacing: 3px !important;
  }

  .mobile-search-button {
    width: 46px !important;
    height: 46px !important;
  }

  .mobile-nav-button {
    min-width: 68px !important;
    padding-inline: 12px !important;
  }

  .mobile-nav-toggle:checked + .social-sidebar .social-nav {
    grid-template-columns: 1fr !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R24 — mobile feed density + typography scale
   Keeps the composer, tabs, feed cards, media, and action row readable across
   narrow phones and large phones without excessive vertical stacking.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .coalition-social-main,
  .social-header,
  .social-title-wrap,
  .social-composer,
  .social-feed-controls,
  .social-feed {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .social-title-wrap h1 {
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .social-composer {
    padding: 0 !important;
    border-radius: 18px !important;
  }

  .composer-body-row {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 96px !important;
    padding: 18px 18px 14px !important;
  }

  .composer-body-row textarea {
    min-height: 78px !important;
    font-size: clamp(22px, 7vw, 30px) !important;
    line-height: 1.28 !important;
  }

  .composer-type-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    padding: 10px 18px !important;
  }

  .composer-type-tabs button {
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 5px !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.1 !important;
  }

  .composer-status {
    padding: 8px 18px 0 !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
    line-height: 1.45 !important;
  }

  .composer-submit-row {
    padding: 16px 18px 18px !important;
  }

  .composer-submit-button {
    width: 100% !important;
    min-height: 54px !important;
    font-size: clamp(18px, 5vw, 23px) !important;
  }

  .social-feed-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .social-tabset {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .social-tabset a {
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: clamp(15px, 4.4vw, 18px) !important;
  }

  .feed-sort-row {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .social-card {
    padding: 16px 16px 13px !important;
    border-radius: 18px !important;
  }

  .social-card-header {
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }

  .social-avatar {
    width: 42px !important;
    height: 42px !important;
  }

  .author-meta strong {
    font-size: clamp(16px, 4.4vw, 19px) !important;
    line-height: 1.1 !important;
  }

  .author-meta span {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    line-height: 1.25 !important;
  }

  .social-post-body {
    margin: 12px 0 !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.55 !important;
  }

  .social-embed-card {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  .embed-icon {
    width: 100% !important;
    min-height: 140px !important;
  }

  .social-embed-card strong {
    font-size: clamp(16px, 4.6vw, 20px) !important;
    line-height: 1.2 !important;
  }

  .social-embed-card p {
    font-size: clamp(13px, 3.7vw, 16px) !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 390px) {
  .composer-type-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .composer-body-row {
    grid-template-columns: 1fr !important;
  }

  .composer-body-row .composer-avatar {
    display: none !important;
  }

  .social-card {
    padding: 14px 13px 12px !important;
  }

  .social-card-header {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    column-gap: 9px !important;
  }

  .social-avatar {
    width: 38px !important;
    height: 38px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R25 — mobile composer + attachment compatibility
   Touch-first composer/attachment hardening. Keeps modes, image upload, picker,
   report/link/poll/event/transmission fields, and submit action usable on
   narrow and large phones without damaging desktop behavior.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-composer {
    overflow: visible !important;
  }

  .composer-type-tabs {
    align-items: stretch !important;
  }

  .composer-type-tabs button {
    border-radius: 13px !important;
    background: rgba(2, 9, 10, .50) !important;
    touch-action: manipulation !important;
  }

  .composer-type-tabs button.active,
  .composer-type-tabs button[aria-pressed="true"] {
    border-color: rgba(68,159,218,.58) !important;
    background: rgba(68,159,218,.13) !important;
    box-shadow: inset 0 -2px 0 rgba(68,159,218,.78) !important;
  }

  .composer-attachment-fields {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 12px 18px 4px !important;
    border-top: 1px solid rgba(68,159,218,.12) !important;
  }

  .composer-attachment-fields label,
  .composer-image-upload-field {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
  }

  .composer-attachment-fields span,
  .composer-image-upload-field span {
    color: var(--social-green) !important;
    font-family: "Rajdhani", "Inter", sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
  }

  .composer-attachment-fields input,
  .composer-attachment-fields textarea,
  .composer-image-upload-field input {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 13px !important;
    border: 1px solid rgba(68,159,218,.25) !important;
    border-radius: 13px !important;
    background: rgba(1, 8, 9, .78) !important;
    color: var(--social-text) !important;
    font-size: 16px !important;
  }

  .composer-attachment-fields textarea {
    min-height: 96px !important;
    resize: vertical !important;
  }

  .composer-image-upload-field input[type="file"] {
    padding: 10px !important;
    font-size: 14px !important;
  }

  .composer-image-upload-field small,
  [data-composer-image-file-label] {
    color: var(--social-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .composer-submit-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .composer-submit-button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .attachment-picker {
    position: relative !important;
    z-index: 58 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .attachment-picker-search {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    padding: 12px !important;
  }

  .attachment-picker-search input,
  .attachment-picker-search button {
    width: 100% !important;
    min-height: 46px !important;
  }

  .attachment-picker-results {
    max-height: min(50vh, 460px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .attachment-picker-result,
  .attachment-picker-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    min-height: 58px !important;
    padding: 10px 12px !important;
  }

  .attachment-picker-result button,
  .attachment-picker-row button,
  [data-attachment-picker-select] {
    min-height: 42px !important;
    width: 100% !important;
  }

  .attachment-picker-selection {
    padding: 10px 12px 12px !important;
  }
}

@media (max-width: 390px) {
  .composer-attachment-fields {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .composer-attachment-fields input,
  .composer-attachment-fields textarea,
  .composer-image-upload-field input {
    font-size: 15px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R26 — mobile post card media + action row hardening
   Touch-first post card/media/action hardening for small phones through large
   phones. Preserves the R22.4 CANNON mobile action row behavior.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-card {
    overflow: hidden !important;
  }

  .social-card-header {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: start !important;
  }

  .post-header-tools {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    max-width: 112px !important;
  }

  .author-meta {
    min-width: 0 !important;
    padding-right: 4px !important;
  }

  .author-meta strong,
  .author-meta span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .author-meta div {
    gap: 5px !important;
  }

  .author-meta b {
    max-width: 100% !important;
  }

  .social-post-body {
    overflow-wrap: anywhere !important;
  }

  .social-uploaded-image-card {
    display: block !important;
    width: 100% !important;
    max-height: 70vh !important;
    border-radius: 15px !important;
    border: 1px solid rgba(68,159,218,.18) !important;
    background: rgba(2,8,9,.72) !important;
  }

  .social-uploaded-image-card img {
    max-height: 70vh !important;
    object-fit: contain !important;
    background: rgba(0,0,0,.32) !important;
  }

  .social-embed-card {
    min-width: 0 !important;
    border-radius: 15px !important;
  }

  .social-embed-card strong,
  .social-embed-card p,
  .social-embed-card small {
    overflow-wrap: anywhere !important;
  }

  .social-card .social-card-actions,
  .social-card-actions {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  .social-card-actions button,
  .social-card-actions a {
    min-height: 44px !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    gap: 4px !important;
    padding-inline: 0 !important;
  }

  .social-card-actions span[data-count] {
    font-size: clamp(12px, 3.5vw, 14px) !important;
    min-width: 1ch !important;
    font-variant-numeric: tabular-nums !important;
  }

  .social-action-icon {
    width: clamp(15px, 4.4vw, 18px) !important;
    height: clamp(15px, 4.4vw, 18px) !important;
  }

  .social-comments-panel {
    margin-top: 10px !important;
    border-radius: 15px !important;
    background:
      linear-gradient(180deg, rgba(5,13,14,.76), rgba(2,8,9,.66)) !important;
  }

  .social-comments-panel textarea {
    width: 100% !important;
    min-height: 86px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
  }
}

@media (max-width: 360px) {
  .social-card-actions button,
  .social-card-actions a {
    gap: 3px !important;
  }

  .social-card-actions span[data-count] {
    font-size: 12px !important;
  }

  .social-action-icon {
    width: 15px !important;
    height: 15px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R26.1 — mobile pass preservation
   The R26 mobile card/media/action behavior was validated by user screenshot.
   This marker documents that no mobile rollback is applied in R26.1.
------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Phase R27 — mobile right rail adaptive layout
   The right rail becomes a normal stacked research context section on mobile.
   It must not overlay the feed, utility layer, mobile nav, composer, or cards.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .coalition-social-rail {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 18px !important;
  }

  .rail-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 18px !important;
    padding: 15px !important;
  }

  .rail-card + .rail-card {
    margin-top: 12px !important;
  }

  .rail-card-header,
  .rail-head,
  .rail-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .rail-card h2,
  .rail-card h3,
  .rail-card-header strong,
  .rail-head strong,
  .rail-section-head strong {
    min-width: 0 !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    letter-spacing: 2.6px !important;
  }

  .rail-card-header a,
  .rail-head a,
  .rail-section-head a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: clamp(11px, 3.2vw, 13px) !important;
  }

  .rail-list,
  .rail-card-list,
  .rail-topics,
  .rail-nodes,
  .rail-reports,
  .rail-rooms,
  .rail-suggestions {
    display: grid !important;
    gap: 9px !important;
  }

  .rail-row,
  .rail-topic,
  .rail-node,
  .rail-report,
  .rail-room,
  .rail-suggestion {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 44px !important;
    min-width: 0 !important;
  }

  .rail-topic strong,
  .rail-node strong,
  .rail-report strong,
  .rail-room strong,
  .rail-suggestion strong,
  .rail-row strong {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rail-topic small,
  .rail-node small,
  .rail-report small,
  .rail-room small,
  .rail-suggestion small,
  .rail-row small {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .rail-count,
  .rail-score,
  .rail-status,
  .rail-badge,
  .rail-live,
  .rail-action,
  .rail-suggestion button,
  .rail-row button {
    min-width: max-content !important;
  }
}

@media (max-width: 390px) {
  .rail-card {
    padding: 13px !important;
  }

  .rail-row,
  .rail-topic,
  .rail-node,
  .rail-report,
  .rail-room,
  .rail-suggestion {
    grid-template-columns: 1fr !important;
    gap: 5px !important;
  }

  .rail-count,
  .rail-score,
  .rail-status,
  .rail-badge,
  .rail-live,
  .rail-action,
  .rail-suggestion button,
  .rail-row button {
    justify-self: start !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R27.1 — mobile R27 preservation
   R27.1 repairs the desktop overlay issue only. Mobile right-rail stacking from
   R27 is preserved.
------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Phase R28 — mobile touch/accessibility hardening
   Applies touch-friendly controls, form legibility, and keyboard/focus
   protections while preserving the R27 mobile right-rail pass.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .mobile-nav-button,
  .mobile-search-button,
  .social-icon-button,
  .social-user-pill,
  .composer-type-tabs button,
  .composer-submit-button,
  .social-tabset a,
  .feed-sort-row button,
  .post-header-tools button,
  .social-card-actions button,
  .social-card-actions a,
  .rail-card a,
  .rail-card button,
  .attachment-picker button,
  .social-popover button {
    min-height: 46px !important;
    min-width: 46px !important;
  }

  .social-composer textarea,
  .social-composer input,
  .composer-attachment-fields input,
  .composer-attachment-fields textarea,
  .attachment-picker input,
  .mobile-search-dialog input,
  .social-comments-panel textarea,
  .social-comments-panel input {
    font-size: max(16px, 1rem) !important;
  }

  .composer-type-tabs button,
  .social-tabset a,
  .social-card-actions button,
  .social-card-actions a {
    line-height: 1.15 !important;
  }

  .social-popover,
  .mobile-search-dialog {
    scroll-padding-block: 14px !important;
  }

  .social-popover-head button,
  .mobile-search-dialog button {
    min-width: 46px !important;
    min-height: 46px !important;
  }

  .social-card-actions button:focus-visible,
  .social-card-actions a:focus-visible {
    border-radius: 14px !important;
  }
}

@media (max-width: 360px) {
  .social-card-actions button,
  .social-card-actions a {
    min-width: 0 !important;
  }

  .composer-type-tabs button,
  .social-tabset a {
    min-width: 0 !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R28.1 — mobile composer field restore
   R28 validation failed on mobile: the composer text field collapsed into a
   narrow focused box. This restores the text input area to a full-width mobile
   field while preserving R28 touch/focus accessibility rules elsewhere.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-composer .composer-body-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 18px 18px 14px !important;
    box-sizing: border-box !important;
  }

  .social-composer .composer-avatar,
  .composer-body-row .composer-avatar {
    display: none !important;
  }

  .social-composer .composer-body-row textarea,
  .composer-body-row textarea,
  textarea[name="body"],
  textarea[name="content"],
  textarea[data-composer-body] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 132px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline-offset: 5px !important;
    resize: vertical !important;
    font-size: clamp(24px, 6.8vw, 30px) !important;
    line-height: 1.24 !important;
  }

  .social-composer .composer-body-row textarea:focus,
  .social-composer .composer-body-row textarea:focus-visible,
  .composer-body-row textarea:focus,
  .composer-body-row textarea:focus-visible {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .social-composer .composer-type-tabs {
    clear: both !important;
    width: 100% !important;
  }

  .social-composer .composer-status,
  .social-composer .composer-submit-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 390px) {
  .social-composer .composer-body-row {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .social-composer .composer-body-row textarea,
  .composer-body-row textarea,
  textarea[name="body"],
  textarea[name="content"],
  textarea[data-composer-body] {
    min-height: 118px !important;
    font-size: clamp(22px, 6.7vw, 28px) !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R28.2 — mobile composer actual-class width repair
   R28.1 targeted legacy `.composer-body-row` selectors, but current reports.php
   uses `.composer-main`, `.composer-input-wrap`, and `.composer-textarea`.
   This repair targets the live classes so the textarea fills the composer.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-composer .composer-main,
  .social-composer-form .composer-main {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 20px 28px 18px !important;
    border-bottom: 1px solid rgba(68,159,218,.15) !important;
  }

  .social-composer .composer-main .composer-avatar,
  .social-composer .composer-main .composer-sigil {
    display: none !important;
  }

  .social-composer .composer-input-wrap,
  .social-composer-form .composer-input-wrap {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .social-composer .composer-input,
  .social-composer .composer-textarea,
  .social-composer textarea.composer-input,
  .social-composer textarea.composer-textarea,
  .social-composer textarea[data-composer-body],
  #de_tectis_composer_body {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 132px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--social-text) !important;
    outline-offset: 6px !important;
    resize: vertical !important;
    font-size: clamp(24px, 6.8vw, 30px) !important;
    line-height: 1.24 !important;
  }

  .social-composer .composer-input:focus,
  .social-composer .composer-textarea:focus,
  .social-composer textarea.composer-input:focus,
  .social-composer textarea.composer-textarea:focus,
  .social-composer textarea[data-composer-body]:focus,
  #de_tectis_composer_body:focus,
  .social-composer .composer-input:focus-visible,
  .social-composer .composer-textarea:focus-visible,
  .social-composer textarea.composer-input:focus-visible,
  .social-composer textarea.composer-textarea:focus-visible,
  .social-composer textarea[data-composer-body]:focus-visible,
  #de_tectis_composer_body:focus-visible {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 390px) {
  .social-composer .composer-main,
  .social-composer-form .composer-main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .social-composer .composer-input,
  .social-composer .composer-textarea,
  .social-composer textarea[data-composer-body],
  #de_tectis_composer_body {
    min-height: 118px !important;
    font-size: clamp(22px, 6.7vw, 28px) !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R29 — mobile cross-browser compatibility
   Stabilizes Android Chrome, Samsung Internet, Firefox Android, and iOS Safari
   behavior while preserving the R28.2 composer-width pass.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  body.reports-social-page {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overscroll-behavior-x: none !important;
  }

  .coalition-social-shell,
  .social-sidebar,
  .coalition-social-main,
  .coalition-social-rail,
  .social-composer,
  .social-feed-controls,
  .social-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mobile-nav-head,
  .social-utility-bar,
  .mobile-search-dialog,
  .social-popover {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }

  .mobile-nav-head {
    padding-top: max(18px, env(safe-area-inset-top)) !important;
  }

  .social-composer .composer-main,
  .social-composer-form .composer-main {
    width: 100% !important;
    inline-size: 100% !important;
  }

  .social-composer .composer-input,
  .social-composer .composer-textarea,
  .social-composer textarea.composer-input,
  .social-composer textarea.composer-textarea,
  .social-composer textarea[data-composer-body],
  #de_tectis_composer_body {
    width: 100% !important;
    inline-size: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    overflow-x: hidden !important;
  }

  .social-composer textarea::-webkit-input-placeholder {
    color: rgba(238,255,240,.48) !important;
  }

  .social-composer textarea::placeholder {
    color: rgba(238,255,240,.48) !important;
    opacity: 1 !important;
  }

  .composer-type-tabs button,
  .social-tabset a,
  .social-card-actions button,
  .social-card-actions a,
  .mobile-nav-button,
  .mobile-search-button,
  .social-icon-button {
    -webkit-user-select: none;
    user-select: none;
  }

  .social-popover,
  .mobile-search-dialog,
  .attachment-picker-results {
    -webkit-overflow-scrolling: touch;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 820px) {
    .mobile-search-dialog,
    .social-popover {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    .social-composer .composer-textarea,
    #de_tectis_composer_body {
      transform: translateZ(0);
    }
  }
}

@supports not (height: 100dvh) {
  @media (max-width: 820px) {
    body.reports-social-page {
      min-height: 100vh !important;
    }

    .mobile-search-dialog,
    .social-popover {
      max-height: 78vh !important;
    }
  }
}


/* -------------------------------------------------------------------------
   Phase R30 — mobile performance/cache hardening
   Mobile scroll/render optimization while preserving the R28.2 composer width
   fix and R29 cross-browser safeguards.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .coalition-social-shell,
  .coalition-social-main,
  .coalition-social-rail {
    contain: layout style;
  }

  .social-sidebar {
    contain: layout style paint;
  }

  .mobile-nav-head,
  .social-utility-bar {
    contain: layout style;
  }

  .social-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 520px;
  }

  .rail-card {
    content-visibility: auto;
    contain-intrinsic-size: 1px 300px;
  }

  .social-composer {
    content-visibility: visible;
    contain: layout style paint;
  }

  .social-uploaded-image-card,
  .image-grid-embed,
  .social-embed-card {
    contain: layout paint;
  }

  .social-popover,
  .mobile-search-dialog {
    contain: layout style paint;
  }
}

/* Very small phones keep intrinsic placeholders smaller to reduce scroll jump. */
@media (max-width: 390px) {
  .social-card {
    contain-intrinsic-size: 1px 470px;
  }

  .rail-card {
    contain-intrinsic-size: 1px 250px;
  }
}


/* -------------------------------------------------------------------------
   Phase R30.1 — mobile pass preservation
   Mobile R30 validation passed. R30.1 repairs desktop only and leaves mobile
   performance/cache behavior intact.
------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Phase R31.1 — live stream route correction
   `live.php` is a dedicated live streaming surface, not an Events redirect.
   Visual behavior remains unchanged for reports.php.
------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   Phase R32 — mobile degraded/empty state hardening
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-degraded-banner {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  .social-degraded-banner a {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
  }

  .social-empty-state {
    border-radius: 18px !important;
    padding: 22px 18px !important;
  }

  .social-empty-state h2 {
    font-size: clamp(22px, 6.2vw, 30px);
  }

  .empty-state-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .empty-state-actions a {
    width: 100%;
    min-height: 46px;
  }
}


/* -------------------------------------------------------------------------
   Phase R33 — mobile load profile presentation
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  .social-load-banner {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
  }

  .social-load-banner small {
    grid-column: 1 / -1;
  }
}

/* -------------------------------------------------------------------------
   Phase R35M — Coalition Blue Mobile Social Theme
   Purpose:
   - Use the architecture map route: reports.php → reports-social-mobile.css.
   - Apply the accepted Coalition blue + rgb(4, 10, 12) direction to the
     mobile De Tectis social platform.
   - Color/theme only. No mobile layout, composer, upload, moderation,
     notifications, popovers, or action wiring changed.
------------------------------------------------------------------------- */

@media (max-width: 820px) {
  body.reports-social-page {
    --coalition-deep-rgb: 4, 10, 12;
    --coalition-deep: rgb(4, 10, 12);
    --coalition-blue: #449fda;
    --coalition-blue-bright: #67bdf2;
    --coalition-blue-soft: #a6d8f6;
    --coalition-blue-muted: #6f9fb8;
    --coalition-blue-border: rgba(68, 159, 218, .30);
    --coalition-blue-border-strong: rgba(68, 159, 218, .48);
    --coalition-blue-wash: rgba(68, 159, 218, .085);

    --social-bg: rgb(4, 10, 12);
    --social-panel: rgba(4, 10, 12, .92);
    --social-panel-soft: rgba(4, 10, 12, .76);
    --social-border: rgba(68, 159, 218, .22);
    --social-border-hot: rgba(68, 159, 218, .48);
    --social-green: var(--coalition-blue-bright);
    --social-green-2: var(--coalition-blue);
    --social-blue: var(--coalition-blue);
    --social-text: #e9f4f7;
    --social-soft: #b7cad0;
    --social-muted: #7f989f;

    background-color: rgb(4, 10, 12) !important;
    color: var(--social-text) !important;
  }

  body.reports-social-page .coalition-social-shell,
  body.reports-social-page .social-sidebar,
  body.reports-social-page .coalition-social-main,
  body.reports-social-page .coalition-social-rail {
    background-color: transparent !important;
  }

  body.reports-social-page .mobile-nav-head,
  body.reports-social-page .mobile-search-button,
  body.reports-social-page .mobile-search-dialog__panel,
  body.reports-social-page .mobile-search-dialog__close,
  body.reports-social-page .social-sidebar,
  body.reports-social-page .social-composer,
  body.reports-social-page .social-feed-controls,
  body.reports-social-page .social-card,
  body.reports-social-page .rail-card,
  body.reports-social-page .social-popover,
  body.reports-social-page .attachment-picker,
  body.reports-social-page .sidebar-status-card,
  body.reports-social-page .sidebar-quote-card {
    background:
      linear-gradient(180deg, rgba(4, 10, 12, .94), rgba(4, 10, 12, .82)) !important;
    border-color: var(--coalition-blue-border) !important;
  }

  body.reports-social-page .mobile-search-button,
  body.reports-social-page .social-nav a,
  body.reports-social-page .social-tabset a,
  body.reports-social-page .composer-type-tabs button,
  body.reports-social-page .feed-sort-row button,
  body.reports-social-page .post-header-tools button,
  body.reports-social-page .social-card-actions button,
  body.reports-social-page .social-card-actions a,
  body.reports-social-page .rail-card a,
  body.reports-social-page .rail-card button,
  body.reports-social-page .social-utility-bar .social-icon-button,
  body.reports-social-page .social-utility-bar .social-user-pill,
  body.reports-social-page .social-search,
  body.reports-social-page .attachment-picker button,
  body.reports-social-page .attachment-picker a {
    border-color: rgba(68, 159, 218, .26) !important;
    background-color: rgba(4, 10, 12, .72) !important;
    color: var(--social-soft) !important;
    box-shadow: none !important;
  }

  body.reports-social-page .social-nav a:hover,
  body.reports-social-page .social-nav a:focus-visible,
  body.reports-social-page .social-nav a.active,
  body.reports-social-page .social-tabset a:hover,
  body.reports-social-page .social-tabset a:focus-visible,
  body.reports-social-page .social-tabset a.active,
  body.reports-social-page .composer-type-tabs button:hover,
  body.reports-social-page .composer-type-tabs button:focus-visible,
  body.reports-social-page .composer-type-tabs button.active,
  body.reports-social-page .composer-type-tabs button[aria-pressed="true"],
  body.reports-social-page .rail-card a:hover,
  body.reports-social-page .rail-card button:hover,
  body.reports-social-page .social-card-actions button:hover,
  body.reports-social-page .social-card-actions a:hover {
    border-color: var(--coalition-blue-border-strong) !important;
    background:
      linear-gradient(90deg, rgba(68, 159, 218, .13), rgba(68, 159, 218, .04)) !important;
    color: var(--coalition-blue-soft) !important;
    box-shadow: inset 3px 0 0 rgba(68, 159, 218, .58) !important;
  }

  body.reports-social-page .social-title-wrap h1,
  body.reports-social-page .social-logo strong,
  body.reports-social-page .rail-card h2,
  body.reports-social-page .rail-card h3,
  body.reports-social-page .author-meta strong,
  body.reports-social-page .social-card strong,
  body.reports-social-page .composer-attachment-fields span,
  body.reports-social-page .composer-image-upload-field span {
    color: var(--social-text) !important;
    text-shadow: none !important;
  }

  body.reports-social-page .social-title-wrap p,
  body.reports-social-page .social-post-body,
  body.reports-social-page .author-meta span,
  body.reports-social-page .rail-card p,
  body.reports-social-page .rail-card small,
  body.reports-social-page .mobile-search-dialog label,
  body.reports-social-page .mobile-search-dialog small {
    color: var(--social-soft) !important;
  }

  body.reports-social-page .social-search input,
  body.reports-social-page .mobile-search-dialog input,
  body.reports-social-page .composer-body-row textarea,
  body.reports-social-page .composer-attachment-fields input,
  body.reports-social-page .composer-attachment-fields textarea,
  body.reports-social-page .composer-image-upload-field input,
  body.reports-social-page .attachment-picker-search input,
  body.reports-social-page .social-comments-panel textarea {
    background: rgba(4, 10, 12, .82) !important;
    border-color: rgba(68, 159, 218, .28) !important;
    color: var(--social-text) !important;
  }

  body.reports-social-page .social-search input:focus,
  body.reports-social-page .mobile-search-dialog input:focus,
  body.reports-social-page .composer-body-row textarea:focus,
  body.reports-social-page .composer-attachment-fields input:focus,
  body.reports-social-page .composer-attachment-fields textarea:focus,
  body.reports-social-page .composer-image-upload-field input:focus-visible,
  body.reports-social-page .attachment-picker-search input:focus,
  body.reports-social-page .social-comments-panel textarea:focus {
    border-color: rgba(68, 159, 218, .58) !important;
    box-shadow: 0 0 0 2px rgba(68, 159, 218, .10) !important;
    outline-color: rgba(68, 159, 218, .62) !important;
  }

  body.reports-social-page .composer-submit-button,
  body.reports-social-page .social-card a[href],
  body.reports-social-page .social-card button,
  body.reports-social-page .rail-card a[href],
  body.reports-social-page .rail-card button {
    border-color: rgba(68, 159, 218, .38) !important;
  }

  body.reports-social-page .composer-submit-button {
    color: var(--coalition-blue-soft) !important;
    background:
      linear-gradient(180deg, rgba(68, 159, 218, .13), rgba(4, 10, 12, .84)) !important;
  }

  body.reports-social-page .author-meta b,
  body.reports-social-page .social-badge,
  body.reports-social-page .rail-badge,
  body.reports-social-page .live-badge,
  body.reports-social-page .social-nav a b,
  body.reports-social-page .notification-count,
  body.reports-social-page .social-counter,
  body.reports-social-page .mobile-count-badge {
    border-color: rgba(68, 159, 218, .34) !important;
    background: rgba(68, 159, 218, .11) !important;
    color: var(--coalition-blue-soft) !important;
  }

  body.reports-social-page .social-avatar,
  body.reports-social-page .social-logo-mark,
  body.reports-social-page .embed-icon,
  body.reports-social-page .mobile-nav-icon {
    border-color: rgba(68, 159, 218, .34) !important;
  }

  body.reports-social-page .social-uploaded-image-card,
  body.reports-social-page .social-embed-card,
  body.reports-social-page .image-grid-embed,
  body.reports-social-page .attachment-picker-result,
  body.reports-social-page .attachment-picker-row {
    border-color: rgba(68, 159, 218, .24) !important;
    background: rgba(4, 10, 12, .76) !important;
  }

  body.reports-social-page .social-card-actions,
  body.reports-social-page .composer-type-tabs,
  body.reports-social-page .composer-attachment-fields,
  body.reports-social-page .mobile-search-dialog__head,
  body.reports-social-page .mobile-search-dialog__body {
    border-color: rgba(68, 159, 218, .14) !important;
  }

  /* Preserve destructive and live-state semantics. */
  body.reports-social-page .danger,
  body.reports-social-page [data-action="delete"],
  body.reports-social-page .delete-button {
    border-color: rgba(255, 78, 78, .46) !important;
    color: #ff6b6b !important;
  }

  body.reports-social-page .live,
  body.reports-social-page [data-state="live"],
  body.reports-social-page .live-badge.is-live {
    color: #ff4f4f !important;
  }
}