Purpose: R22.2 keeps the mobile fix in a separate file. This file restores
   the desktop/laptop target layout without touching mobile widths.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .mobile-search-button,
  .mobile-search-dialog {
    display: none !important;
  }

  .mobile-nav-head {
    display: contents !important;
  }

  .coalition-social-shell {
    width: min(100%, var(--social-shell-max)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns:
      var(--social-sidebar)
      var(--social-main-gutter)
      var(--social-feed-width)
      var(--social-feed-rail-gutter)
      var(--social-rail) !important;
    gap: 0 !important;
    padding: 0 0 70px !important;
  }

  .social-sidebar {
    grid-column: 1 / 2 !important;
    width: var(--social-sidebar) !important;
  }

  .coalition-social-main {
    grid-column: 3 / 4 !important;
    width: var(--social-feed-width) !important;
    min-width: 0 !important;
    padding-top: 14px !important;
  }

  .coalition-social-rail {
    grid-column: 5 / 6 !important;
    width: var(--social-rail) !important;
    display: grid !important;
    padding-top: 86px !important;
    position: relative !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .social-header {
    display: grid !important;
    gap: 12px !important;
    padding-top: 2px !important;
    margin-bottom: 15px !important;
  }

  .social-title-wrap {
    width: var(--social-feed-width) !important;
    max-width: var(--social-feed-width) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 2px 0 14px !important;
    text-align: center !important;
  }

  .social-title-wrap h1 {
    font-size: 30px !important;
    line-height: .95 !important;
    letter-spacing: 10px !important;
  }

  .social-title-wrap p {
    margin: 10px 0 0 !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 3.1px !important;
  }

  .social-utility-bar {
    position: fixed !important;
    z-index: 28 !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    left: auto !important;
    bottom: auto !important;
    right: calc(((100vw - min(100vw, var(--social-shell-max))) / 2) + 16px) !important;
    display: grid !important;
    gap: 8px !important;
    align-items: center !important;
    min-height: 40px !important;
    max-width: calc(100vw - 24px) !important;
    padding: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  body[data-de-tectis-admin="0"] .social-utility-bar {
    width: 372px !important;
    grid-template-columns: 172px 32px 32px 112px !important;
  }

  body[data-de-tectis-admin="1"] .social-utility-bar {
    width: 412px !important;
    grid-template-columns: 172px 32px 32px 32px 112px !important;
  }

  .social-utility-spacer {
    display: none !important;
  }

  .social-account-cluster {
    display: contents !important;
  }

  .social-search {
    display: grid !important;
    grid-column: 1 !important;
    width: 172px !important;
    min-width: 172px !important;
    max-width: 172px !important;
    height: 35px !important;
    grid-template-columns: 24px minmax(0, 1fr) 18px !important;
    align-items: center !important;
  }

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

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

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

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

  body[data-de-tectis-admin="0"] .social-user-pill {
    grid-column: 4 !important;
  }

  body[data-de-tectis-admin="1"] .social-user-pill {
    grid-column: 5 !important;
  }

  .social-utility-bar .social-icon-button {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }

  .social-user-pill {
    width: 112px !important;
    min-width: 112px !important;
    max-width: 112px !important;
    height: 38px !important;
    min-height: 38px !important;
    grid-template-columns: 28px minmax(0, 1fr) 10px !important;
  }

  .social-feed-controls {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }
}

/* Standard desktop browser view: align the utility cluster with the canonical
   right-side target band, not the left side of the feed. */
@media (min-width: 1200px) and (max-width: 1500px) {
  .social-utility-bar {
    right: calc(((100vw - var(--social-shell-max)) / 2) + 16px) !important;
  }
}

/* Wide displays: keep the app canvas together instead of pushing controls to
   the physical screen edge. */
@media (min-width: 1920px) {
  .social-utility-bar {
    right: max(24px, calc((100vw - 1440px) / 2)) !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R22.5 — desktop utility interaction repair
   Mobile R22.4 CANNON passed. This desktop-only layer restores interaction
   reliability for the desktop bell, moderator flag, messages, and user chip
   controls without changing mobile CSS.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .social-utility-bar {
    z-index: 220 !important;
    pointer-events: auto !important;
    overflow: visible !important;
    isolation: isolate !important;
  }

  .social-utility-bar::before,
  .social-utility-bar::after {
    pointer-events: none !important;
  }

  .social-account-cluster {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 224 !important;
  }

  .social-utility-bar .social-search,
  .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 {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 226 !important;
  }

  .social-utility-bar .social-icon-button,
  .social-utility-bar .social-user-pill {
    touch-action: manipulation !important;
  }

  .social-utility-popovers {
    position: fixed !important;
    top: 54px !important;
    right: calc(((100vw - min(100vw, var(--social-shell-max))) / 2) + 16px) !important;
    left: auto !important;
    width: 360px !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    z-index: 260 !important;
    pointer-events: none !important;
    overflow: visible !important;
  }

  .social-popover {
    position: relative !important;
    z-index: 261 !important;
    pointer-events: auto !important;
    max-height: min(72vh, 640px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

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

  .social-popover-notifications,
  .social-popover-moderation,
  .social-popover-messages,
  .social-popover[data-social-popover="account"] {
    width: 100% !important;
  }

  .social-header,
  .social-title-wrap,
  .social-composer,
  .social-feed-controls,
  .social-card,
  .coalition-social-rail {
    position: relative !important;
  }

  .social-header {
    z-index: 40 !important;
  }

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

@media (min-width: 1200px) and (max-width: 1500px) {
  .social-utility-popovers {
    right: calc(((100vw - var(--social-shell-max)) / 2) + 16px) !important;
  }
}

@media (min-width: 1920px) {
  .social-utility-popovers {
    right: max(24px, calc((100vw - 1440px) / 2)) !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R23 — left navigation cross-device hardening
   Desktop/tablet-left-nav layer. Keeps the De Tectis left rail stable,
   scrollable, clickable, and visually consistent while preserving the R22.5
   desktop utility interaction repair.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .social-sidebar {
    position: sticky !important;
    top: 0 !important;
    z-index: 62 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .social-sidebar::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  .social-logo {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .social-logo-mark {
    width: clamp(68px, 6vw, 86px) !important;
    max-width: 100% !important;
  }

  .social-logo strong {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .social-nav {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .social-nav a {
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 38px !important;
    grid-template-columns: 20px minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .social-nav a span:first-child {
    width: 20px !important;
    min-width: 20px !important;
  }

  .social-nav a em {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .social-nav a b {
    min-width: 18px !important;
    max-width: 34px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .social-nav a:focus-visible,
  .social-nav a:hover {
    border-color: rgba(68, 159, 218, .38) !important;
    background:
      linear-gradient(90deg, rgba(68, 159, 218, .10), rgba(68, 159, 218, .035)) !important;
    color: var(--social-text) !important;
  }

  .social-nav a.active {
    border-color: rgba(68, 159, 218, .48) !important;
    box-shadow:
      inset 0 0 0 1px rgba(68, 159, 218, .05),
      0 0 18px rgba(68, 159, 218, .055) !important;
  }

  .sidebar-status-card,
  .sidebar-quote-card {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .sidebar-status-card dl,
  .sidebar-status-card div,
  .sidebar-quote-card p {
    min-width: 0 !important;
  }
}

/* Laptop/tablet band: compact the side rail before it can crowd the feed. */
@media (min-width: 821px) and (max-width: 1130px) {
  :root {
    --social-sidebar: clamp(118px, 15vw, 136px);
  }

  .social-sidebar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .social-logo-mark {
    transform: scale(.90);
    transform-origin: center;
  }

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

  .social-nav a {
    gap: 7px !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }

  .sidebar-status-card {
    margin-top: clamp(36px, 18vh, 180px) !important;
  }

  .sidebar-quote-card {
    margin-top: 18px !important;
  }
}

/* Full desktop: preserve canonical left-rail density and prevent long status
   content from pushing the rail beyond the viewport. */
@media (min-width: 1131px) {
  .social-sidebar {
    padding-bottom: 22px !important;
  }

  .sidebar-status-card {
    margin-top: min(262px, 28vh) !important;
  }

  .sidebar-quote-card {
    margin-top: min(28px, 4vh) !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R23.3 — desktop shell left-align correction
   R23.1/R23.2 treated the left gap as a background-fill issue. Validation
   shows the real issue is the centered app shell: the entire desktop canvas
   starts too far from the browser's left edge. This correction left-aligns the
   desktop shell itself instead of adding hidden/fixed background overlays.
------------------------------------------------------------------------- */

@media (min-width: 1131px) {
  .coalition-social-shell {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: min(100%, var(--social-shell-max)) !important;
    max-width: var(--social-shell-max) !important;
  }

  .social-footer {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: min(100%, var(--social-shell-max)) !important;
    max-width: var(--social-shell-max) !important;
  }

  .social-sidebar {
    background:
      linear-gradient(180deg, rgba(2, 7, 9, .90), rgba(2, 7, 9, .72)),
      linear-gradient(90deg, rgba(159, 230, 83, .025), transparent) !important;
  }

  /* Remove failed left-fill experiments if a browser still has older rules
     cached in cascade order. The corrected solution is shell alignment. */
  .social-sidebar::before {
    content: none !important;
    display: none !important;
  }
}

/* Larger desktop and zoomed browser releases keep the canvas pinned left so
   the sidebar touches the browser edge and no empty left band remains. */
@media (min-width: 1501px) {
  .coalition-social-shell,
  .social-footer {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

/* Tablet/mobile layouts remain governed by the existing responsive stack. */
@media (max-width: 1130px) {
  .coalition-social-shell,
  .social-footer {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R23.4 — expanded left rail canvas alignment
   R23.3 proved the rail can touch the browser's left edge, but it moved the
   whole canvas left. R23.4 expands the left rail column by the former centered
   margin so the rail touches the edge while feed/right-rail content stays in
   its prior centered target position.
------------------------------------------------------------------------- */

@media (min-width: 1131px) {
  body.reports-social-page {
    --r23-left-extension: max(0px, calc((100vw - var(--social-shell-max)) / 2));
    --r23-expanded-sidebar: calc(var(--social-sidebar) + var(--r23-left-extension));
    --r23-expanded-shell: calc(var(--social-shell-max) + var(--r23-left-extension));
  }

  .coalition-social-shell {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: min(100%, var(--r23-expanded-shell)) !important;
    max-width: var(--r23-expanded-shell) !important;
    grid-template-columns:
      var(--r23-expanded-sidebar)
      var(--social-main-gutter)
      var(--social-feed-width)
      var(--social-feed-rail-gutter)
      var(--social-rail) !important;
  }

  .social-sidebar {
    grid-column: 1 / 2 !important;
    width: var(--r23-expanded-sidebar) !important;
    padding-left: calc(var(--r23-left-extension) + 13px) !important;
    padding-right: 13px !important;
    background:
      linear-gradient(180deg, rgba(2, 7, 9, .90), rgba(2, 7, 9, .72)),
      linear-gradient(90deg, rgba(1, 5, 5, .98), rgba(1, 5, 5, .72) var(--r23-left-extension), rgba(159, 230, 83, .025)) !important;
  }

  .coalition-social-main {
    grid-column: 3 / 4 !important;
    width: var(--social-feed-width) !important;
  }

  .coalition-social-rail {
    grid-column: 5 / 6 !important;
    width: var(--social-rail) !important;
  }

  .social-footer {
    margin-left: 0 !important;
    margin-right: auto !important;
    width: min(100%, var(--r23-expanded-shell)) !important;
    max-width: var(--r23-expanded-shell) !important;
  }

  /* The expanded rail solution replaces the failed fill overlays. */
  .social-sidebar::before {
    content: none !important;
    display: none !important;
  }
}

/* At the known 1200–1500 desktop validation band, keep feed/right rail in the
   same visual lanes they occupied before the shell was left-aligned. */
@media (min-width: 1200px) and (max-width: 1500px) {
  body.reports-social-page {
    --r23-left-extension: max(0px, calc((100vw - var(--social-shell-max)) / 2));
  }

  .coalition-social-shell {
    grid-template-columns:
      calc(var(--social-sidebar) + var(--r23-left-extension))
      var(--social-main-gutter)
      var(--social-feed-width)
      var(--social-feed-rail-gutter)
      var(--social-rail) !important;
  }
}

/* Tablet/mobile remain on their existing responsive paths. */
@media (max-width: 1130px) {
  body.reports-social-page {
    --r23-left-extension: 0px;
    --r23-expanded-sidebar: var(--social-sidebar);
    --r23-expanded-shell: var(--social-shell-max);
  }

  .coalition-social-shell {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R24 — desktop feed column density + typography scale
   Release target: keep the feed readable and visually centered after R23.4,
   without excessive blank space, cramped text, or oversized cards at laptop,
   desktop, and wide-display sizes.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .coalition-social-main {
    min-width: 0 !important;
  }

  .social-header,
  .social-composer,
  .social-feed-controls,
  .social-feed,
  .social-empty-state {
    width: min(100%, var(--social-feed-width)) !important;
    max-width: var(--social-feed-width) !important;
  }

  .social-composer {
    min-height: 176px !important;
  }

  .composer-body-row {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 18px !important;
    min-height: 78px !important;
  }

  .composer-body-row textarea {
    font-size: clamp(15px, 1.05vw, 18px) !important;
    line-height: 1.42 !important;
  }

  .composer-type-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px 18px !important;
  }

  .composer-type-tabs button {
    min-height: 34px !important;
    padding-inline: 8px !important;
  }

  .composer-status,
  .composer-submit-row {
    max-width: calc(var(--social-feed-width) - 96px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .social-feed-controls {
    min-height: 50px !important;
    align-items: center !important;
  }

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

  .social-tabset a {
    min-height: 34px !important;
    padding: 0 18px !important;
    line-height: 34px !important;
  }

  .social-card {
    padding: clamp(16px, 1.25vw, 20px) clamp(18px, 1.4vw, 22px) 15px !important;
    border-radius: 10px !important;
  }

  .social-card + .social-card {
    margin-top: 8px !important;
  }

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

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

  .author-meta strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }

  .author-meta span {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .author-meta div {
    margin-top: 4px !important;
  }

  .author-meta b {
    min-height: 18px !important;
    padding: 2px 7px !important;
  }

  .social-post-body {
    margin: 10px 0 11px !important;
    font-size: var(--r24-feed-body-size) !important;
    line-height: var(--r24-feed-line-height) !important;
  }

  .social-embed-card,
  .social-uploaded-image-card {
    margin-top: 10px !important;
    border-radius: 9px !important;
  }

  .social-embed-card {
    grid-template-columns: minmax(104px, 126px) minmax(0, 1fr) auto !important;
    gap: 13px !important;
    padding: 10px !important;
  }

  .embed-icon {
    min-height: 92px !important;
  }

  .social-embed-card strong {
    font-size: clamp(14px, 1vw, 16px) !important;
    line-height: 1.22 !important;
  }

  .social-embed-card p {
    font-size: clamp(12px, .86vw, 13px) !important;
    line-height: 1.45 !important;
    margin: 5px 0 !important;
  }

  .social-card-actions {
    min-height: 38px !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    align-items: center !important;
  }

  .social-card-actions button {
    min-height: 34px !important;
  }

  .social-comments-panel {
    margin-top: 8px !important;
  }
}

/* 1366-ish and zoomed laptop widths: prioritize density without squeezing text. */
@media (min-width: 1200px) and (max-width: 1500px) {
  .social-composer {
    min-height: 174px !important;
  }

  .social-card {
    padding: 15px 18px 14px !important;
  }

  .social-post-body {
    font-size: 13px !important;
  }

  .social-card-actions {
    margin-top: 10px !important;
  }
}

/* Large displays: do not overexpand the feed; preserve target column density. */
@media (min-width: 1920px) {
  .social-header,
  .social-composer,
  .social-feed-controls,
  .social-feed {
    max-width: var(--social-feed-width) !important;
  }

  .social-post-body {
    font-size: 14px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R25 — desktop composer + attachment compatibility
   Keeps composer modes, file upload, picker, report/link/poll/event/transmission
   attachment fields, and submit feedback stable across laptop/desktop widths.
------------------------------------------------------------------------- */

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

  .composer-body-row {
    align-items: center !important;
  }

  .composer-type-tabs {
    border-top: 1px solid rgba(68, 159, 218, .12) !important;
    border-bottom: 1px solid rgba(68, 159, 218, .10) !important;
    background: rgba(1, 7, 8, .24) !important;
  }

  .composer-type-tabs button {
    border-radius: 999px !important;
    white-space: nowrap !important;
    color: var(--social-soft) !important;
  }

  .composer-type-tabs button.active,
  .composer-type-tabs button[aria-pressed="true"] {
    color: var(--social-blue) !important;
    background: rgba(4, 10, 12,.10) !important;
  }

  .composer-attachment-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    padding: 12px clamp(16px, 1.3vw, 24px) 4px !important;
    border-top: 1px solid rgba(68, 159, 218, .10) !important;
  }

  .composer-attachment-fields label,
  .composer-image-upload-field {
    display: grid !important;
    gap: 6px !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: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
  }

  .composer-attachment-fields input,
  .composer-attachment-fields textarea,
  .composer-image-upload-field input {
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 11px !important;
    border: 1px solid rgba(68, 159, 218, .22) !important;
    border-radius: 9px !important;
    background: rgba(2, 9, 10, .72) !important;
    color: var(--social-text) !important;
    outline: none !important;
  }

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

  .composer-attachment-fields input:focus,
  .composer-attachment-fields textarea:focus,
  .composer-image-upload-field input:focus-visible {
    border-color: rgba(68, 159, 218, .50) !important;
    box-shadow: 0 0 0 2px rgba(68, 159, 218, .10) !important;
  }

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

  .composer-submit-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .composer-submit-button {
    min-width: 140px !important;
    white-space: nowrap !important;
  }

  .attachment-picker {
    position: relative !important;
    z-index: 54 !important;
    width: min(100%, var(--social-feed-width)) !important;
    max-width: var(--social-feed-width) !important;
    margin: 10px auto 0 !important;
    border-radius: 13px !important;
    overflow: hidden !important;
  }

  .attachment-picker-search {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .attachment-picker-search input {
    min-height: 38px !important;
    padding: 9px 11px !important;
    border-radius: 9px !important;
  }

  .attachment-picker-results {
    max-height: min(45vh, 430px) !important;
    overflow-y: auto !important;
  }

  .attachment-picker-result,
  .attachment-picker-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }

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


/* -------------------------------------------------------------------------
   Phase R26.1 — desktop post-card rollback / regression containment
   R26 mobile CSS passed, but the R26 desktop post-card/media/action block
   regressed the desktop layout. This desktop file intentionally returns to
   the R25 validated desktop composer/feed/card baseline while reports.php
   receives the multi-user profile-photo lookup repair.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .social-card-header {
    align-items: start !important;
  }

  .social-uploaded-image-card,
  .image-grid-embed {
    max-width: 100% !important;
  }

  .social-uploaded-image-card img,
  .image-grid-embed img {
    max-width: 100% !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R27.1 — desktop right rail overlay rollback / safe rail mode
   R27 desktop validation failed: the sticky/internal-scroll rail moved under
   the fixed top utility/search layer and visually clipped/overlapped the rail.
   R27.1 restores the R26.1 validated desktop baseline and forces the rail to
   stay in normal page flow on desktop. Mobile R27 behavior is preserved.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .coalition-social-rail {
    position: relative !important;
    top: auto !important;
    align-self: start !important;
    z-index: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 22px !important;
  }

  .rail-card {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
  }

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

  .rail-card h2,
  .rail-card h3,
  .rail-card strong,
  .rail-card span,
  .rail-card small,
  .rail-card p {
    min-width: 0 !important;
  }

  .rail-row,
  .rail-topic,
  .rail-node,
  .rail-report,
  .rail-room,
  .rail-suggestion {
    min-width: 0 !important;
  }

  .social-utility-bar {
    z-index: 240 !important;
  }

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

/* Keep the validated R23.4/R26.1 desktop layout from becoming rail-sticky at
   1366-ish widths or browser zoom levels. */
@media (min-width: 821px) and (max-width: 1500px) {
  .coalition-social-rail {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R28 — desktop keyboard/accessibility hardening
   Ensures desktop nav, utility controls, composer tabs, post actions, and rail
   controls are keyboard-visible without changing the R27.1 validated layout.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .social-nav a,
  .social-utility-bar .social-icon-button,
  .social-utility-bar .social-user-pill,
  .social-search input,
  .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 {
    min-height: 38px !important;
  }

  .social-utility-bar .social-icon-button,
  .social-utility-bar .social-user-pill {
    min-width: 36px !important;
    min-height: 36px !important;
  }

  .social-search input {
    font-size: 13px !important;
  }

  .social-popover {
    isolation: isolate !important;
  }

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

  .composer-type-tabs button:focus-visible,
  .social-tabset a:focus-visible,
  .social-card-actions button:focus-visible,
  .social-card-actions a:focus-visible {
    border-color: rgba(68, 159, 218, .60) !important;
  }

  .attachment-picker-results {
    scroll-padding-block: 12px !important;
  }

  .social-comments-panel textarea {
    font-size: 14px !important;
  }
}


/* -------------------------------------------------------------------------
   Phase R29 — desktop cross-browser compatibility
   Browser-safe desktop fixes for viewport units, sticky behavior, grid overflow,
   icon masks, utility controls, and Safari/Firefox rendering.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .coalition-social-shell {
    min-width: 0 !important;
  }

  .social-sidebar,
  .coalition-social-main,
  .coalition-social-rail {
    min-width: 0 !important;
  }

  .social-sidebar {
    height: 100vh !important;
    height: 100dvh !important;
    transform: translateZ(0);
  }

  .social-utility-bar {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .social-utility-bar .social-icon-button,
  .social-utility-bar .social-user-pill {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .social-search input::-webkit-search-decoration,
  .social-search input::-webkit-search-cancel-button,
  .social-search input::-webkit-search-results-button,
  .social-search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

  .social-card,
  .rail-card,
  .social-composer {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .social-card-actions {
    min-width: 0 !important;
  }

  .social-card-actions button,
  .social-card-actions a {
    min-width: 0 !important;
  }

  .rail-card {
    contain: layout style;
  }
}

/* Firefox keeps form controls and grid text from expanding the layout. */
@-moz-document url-prefix() {
  @media (min-width: 821px) {
    .social-search input,
    .composer-type-tabs button,
    .social-tabset a,
    .social-card-actions button,
    .social-card-actions a {
      min-width: 0 !important;
    }

    .social-card,
    .social-composer,
    .rail-card {
      scrollbar-width: none;
    }
  }
}

/* Safari/WebKit guardrails for sticky/fixed layers and backdrop rendering. */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 821px) {
    .social-sidebar {
      position: sticky !important;
    }

    .social-utility-bar,
    .social-utility-popovers {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    .social-popover,
    .mobile-search-dialog {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
  }
}


/* -------------------------------------------------------------------------
   Phase R30.1 — desktop top/header/utility restore
   Restores the R29 validated desktop top-of-page layout after R30 performance
   containment shifted the utility cluster into the title/header lane.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .coalition-social-shell,
  .coalition-social-main,
  .social-header,
  .social-title-wrap,
  .social-utility-bar,
  .social-utility-popovers {
    contain: none !important;
    content-visibility: visible !important;
  }

  .social-header {
    position: relative !important;
    z-index: 40 !important;
  }

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

  .social-utility-bar {
    position: fixed !important;
    z-index: 240 !important;
    pointer-events: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  .social-utility-popovers {
    position: fixed !important;
    z-index: 270 !important;
    pointer-events: none !important;
  }

  .social-utility-popovers .social-popover {
    pointer-events: auto !important;
  }
}


/* -------------------------------------------------------------------------
   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 — desktop degraded/empty state hardening
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  .social-degraded-banner {
    width: min(100%, var(--social-feed-width));
    max-width: var(--social-feed-width);
    margin: 0 auto 12px;
  }

  .social-empty-state {
    min-height: 220px;
  }

  .empty-state-actions a:hover,
  .social-degraded-banner a:hover {
    border-color: rgba(68, 159, 218, .55);
    background: rgba(68, 159, 218, .10);
  }
}


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

@media (min-width: 821px) {
  .social-load-banner {
    width: min(100%, var(--social-feed-width));
    max-width: var(--social-feed-width);
    margin: 0 auto 12px;
  }
}
/* -------------------------------------------------------------------------
   Phase R34 — Coalition blue desktop theme layer
   Purpose:
   - Preserve the social-platform features and layout from the current cannon.
   - Replace the green social skin with Coalition blue over rgb(4, 10, 12).
   - Do not change grid, positioning, hidden states, popovers, upload fields,
     composer modes, feed actions, or mobile behavior.
------------------------------------------------------------------------- */

@media (min-width: 821px) {
  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);

    /* Map the existing De Tectis social variables to blue so features stay wired. */
    --social-bg: rgb(4, 10, 12);
    --social-panel: rgba(4, 10, 12, .92);
    --social-panel-strong: rgba(4, 10, 12, .97);
    --social-text: #e9f4f7;
    --social-soft: #b7cad0;
    --social-muted: #7f989f;
    --social-green: var(--coalition-blue-bright);
    --social-blue: var(--coalition-blue);
  }

  body.reports-social-page {
    background-color: rgb(4, 10, 12) !important;
  }

  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 {
    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 .social-sidebar {
    background:
      linear-gradient(180deg, rgba(4, 10, 12, .96), rgba(4, 10, 12, .80)),
      linear-gradient(90deg, rgba(68, 159, 218, .055), transparent) !important;
  }

  body.reports-social-page .social-logo strong,
  body.reports-social-page .social-title-wrap h1,
  body.reports-social-page .rail-card h2,
  body.reports-social-page .rail-card h3,
  body.reports-social-page .social-card strong,
  body.reports-social-page .author-meta strong,
  body.reports-social-page .composer-attachment-fields span,
  body.reports-social-page .composer-image-upload-field span {
    color: var(--social-text) !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 {
    color: var(--social-soft) !important;
  }

  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 .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 {
    border-color: rgba(68, 159, 218, .26) !important;
    background-color: rgba(4, 10, 12, .72) !important;
    color: var(--social-soft) !important;
  }

  body.reports-social-page .social-nav a:hover,
  body.reports-social-page .social-nav a:focus-visible,
  body.reports-social-page .social-tabset a:hover,
  body.reports-social-page .composer-type-tabs button:hover,
  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, .11), rgba(68, 159, 218, .035)) !important;
    color: var(--social-text) !important;
  }

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

  body.reports-social-page .social-search 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 {
    background: rgba(4, 10, 12, .80) !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 .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 {
    border-color: rgba(68, 159, 218, .58) !important;
    box-shadow: 0 0 0 2px rgba(68, 159, 218, .10) !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: rgba(4, 10, 12, .78) !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 {
    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 {
    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 {
    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 {
    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"] {
    color: #ff4f4f !important;
  }
}