/* ============================================================
   Community compose sheet (New Post)
   ============================================================
   Own file, loaded after every other stylesheet, because
   `create-modal` is referenced ~355 times inside mobile.html.
   Editing rules in there meant competing with hundreds of older
   declarations and losing on source order or specificity; the
   form kept reverting no matter what was changed.

   Everything the sheet needs is declared here, once, scoped to
   .cpx-*. Declarations carry !important because the template's
   own composer rules already use it — loading last is not enough
   to beat an !important, so this file has to answer in kind.
   ============================================================ */

html body #create-modal.create-modal .cpx {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body #create-modal.create-modal .cpx > * {
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ---------- header ---------- */

html body #create-modal.create-modal .cpx-head {
    position: relative !important;
    margin: 0 0 22px !important;
    padding-right: 52px !important;
}

html body #create-modal.create-modal .cpx-identity {
    display: block !important;
    margin-bottom: 6px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html body #create-modal.create-modal .cpx-title {
    margin: 0 0 8px !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.05 !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html body #create-modal.create-modal .cpx-sub {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

/* Cancel sits under Send Post as a plain text button. The old floating close
   control in the header corner is gone. */
html body #create-modal.create-modal .cpx-cancel {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 12px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #create-modal.create-modal .cpx-cancel:active {
    opacity: 0.6 !important;
}

/* ---------- fields ---------- */

html body #create-modal.create-modal .cpx-field {
    display: block !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
}

html body #create-modal.create-modal .cpx-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 9px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

/* 17px, never under 16px: iOS zooms the page when a focused field
   has smaller text. */
html body #create-modal.create-modal .cpx-select,
html body #create-modal.create-modal .cpx-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px !important;
    border: 1px solid rgba(9, 9, 11, 0.14) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 650 !important;
    line-height: 1.3 !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

html body #create-modal.create-modal .cpx-select {
    min-height: 60px !important;
    padding-right: 44px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
}

html body #create-modal.create-modal .cpx-textarea {
    min-height: 176px !important;
    max-height: none !important;
    resize: none !important;
}

html body #create-modal.create-modal .cpx-select:focus,
html body #create-modal.create-modal .cpx-textarea:focus {
    border-color: var(--primary-color, #ff4d2e) !important;
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.16) !important;
}

/* ---------- media preview ---------- */

html body #create-modal.create-modal .cpx-preview {
    display: none !important;
    width: 100% !important;
    margin: 0 0 18px !important;
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: transparent !important;
}

html body #create-modal.create-modal .cpx-preview img,
html body #create-modal.create-modal .cpx-preview video {
    display: block !important;
    width: 100% !important;
    max-height: 220px !important;
    object-fit: cover !important;
}

/* ---------- actions ---------- */

html body #create-modal.create-modal .cpx-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Both buttons share the original Send Post metrics so they read
   as a pair: 54px tall, 16px, weight 950, 22px radius. */
html body #create-modal.create-modal .cpx-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border-radius: 22px !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: opacity 0.2s ease, transform 0.15s ease, background 0.16s ease !important;
}

html body #create-modal.create-modal .cpx-btn--media {
    border: 1px solid rgba(9, 9, 11, 0.14) !important;
    background: #ffffff !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

html body #create-modal.create-modal .cpx-btn--media:active {
    background: rgba(9, 9, 11, 0.04) !important;
}

html body #create-modal.create-modal .cpx-btn--media[data-has-media="1"] {
    border-color: color-mix(in srgb, var(--primary-color, #ff4d2e) 55%, transparent) !important;
    color: var(--primary-color, #ff4d2e) !important;
    -webkit-text-fill-color: var(--primary-color, #ff4d2e) !important;
}

/* The label and icon are targeted too: the app-wide typography
   override colours descendants directly, so styling only the
   button left dark text on the black fill. */
html body #create-modal.create-modal .cpx-btn--send,
html body #create-modal.create-modal .cpx-btn--send span,
html body #create-modal.create-modal .cpx-btn--send i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

html body #create-modal.create-modal .cpx-btn--send {
    border: none !important;
    background: #09090b !important;
}

html body #create-modal.create-modal .cpx-btn--send:active {
    opacity: 0.9 !important;
}

html body #create-modal.create-modal .cpx-btn--send[disabled] {
    opacity: 0.45 !important;
    cursor: default !important;
}

html body #create-modal.create-modal .cpx-btn-clear {
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* ------------------------------------------------------------
   ID-level overrides.
   The template styles these buttons as `html body #create-modal
   #community-post-media-btn` — two IDs. A class selector cannot
   outrank that no matter how late it loads, so the same elements
   are re-declared here by ID.
   ------------------------------------------------------------ */

html body #create-modal.create-modal #community-post-media-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid rgba(9, 9, 11, 0.14) !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    letter-spacing: 0.01em !important;
}

html body #create-modal.create-modal #community-post-media-btn[data-has-media="1"] {
    border-color: color-mix(in srgb, var(--primary-color, #ff4d2e) 55%, transparent) !important;
    color: var(--primary-color, #ff4d2e) !important;
    -webkit-text-fill-color: var(--primary-color, #ff4d2e) !important;
}

html body #create-modal.create-modal #community-post-media-clear {
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* ------------------------------------------------------------
   Sheet position. Kept here rather than in the template so the
   top offset is not competing with the other create-modal
   padding rules.
   ------------------------------------------------------------ */
html body.community-active #create-modal.create-modal .modal-content,
html body #create-modal.create-modal .modal-content {
    /* A flat 210px offset put the form near the middle of the screen. The page
       is served with interactive-widget=resizes-visual, so opening the keyboard
       slides the VISUAL viewport up over an unchanged layout instead of
       shrinking it — which dragged the header up under the status bar.
       Sit just below the status bar and stay there; the keyboard follow-along
       is handled in mobile-community-compose.js. */
    padding-top: max(56px, calc(20px + env(safe-area-inset-top, 0px))) !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ============================================================
   Composer look, matching the Create sheet: paper, white cards,
   mono eyebrows, a Post that wakes up when there is something to
   send. Scoped to .cpx--composer so the older rules above do not
   fight it; !important because everything else in here is.
   ============================================================ */
html body #create-modal.create-modal .modal-content {
    background: #FBFBF9 !important;
    font-family: var(--font-family, Manrope), -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
}
html body #create-modal.create-modal .modal-header { display: none !important; }
html body #create-modal.create-modal .cpx--composer { gap: 0 !important; padding: 0 2px 24px !important; }

html body #create-modal.create-modal .cpx-bar {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    margin: 0 0 14px !important; padding: 6px 0 0 !important;
}
html body #create-modal.create-modal .cpx-bar-cancel,
html body #create-modal.create-modal .cpx-bar-spacer { width: 64px !important; flex: 0 0 64px !important; }
html body #create-modal.create-modal .cpx-bar-cancel {
    margin: 0 !important; padding: 8px 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    text-align: left !important; font-size: 13px !important; font-weight: 600 !important;
    color: #63635F !important; -webkit-text-fill-color: #63635F !important; cursor: pointer;
}
html body #create-modal.create-modal .cpx-bar-title {
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 2px !important;
    font-size: 15px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
html body #create-modal.create-modal .cpx-bar-title small {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #70706B !important; -webkit-text-fill-color: #70706B !important; text-decoration: none !important;
}

html body #create-modal.create-modal .cpx-posting {
    display: flex !important; align-items: center !important; gap: 12px !important;
    padding: 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important;
    background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important;
}
html body #create-modal.create-modal .cpx-posting-avatar {
    width: 38px !important; height: 38px !important; flex: 0 0 38px !important; border-radius: 12px !important; overflow: hidden !important;
    background: #111214 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 13px !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
}
html body #create-modal.create-modal .cpx-posting-avatar span { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
html body #create-modal.create-modal .cpx-posting-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
html body #create-modal.create-modal .cpx-posting-copy { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; }
html body #create-modal.create-modal .cpx-posting-label {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important;
}
html body #create-modal.create-modal .cpx--composer .cpx-identity {
    margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-transform: none !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}

html body #create-modal.create-modal .cpx-eyebrow {
    display: flex !important; align-items: baseline !important; justify-content: space-between !important;
    margin: 14px 4px 8px !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #70706B !important; -webkit-text-fill-color: #70706B !important;
}
html body #create-modal.create-modal .cpx-eyebrow span:last-child { letter-spacing: 0.08em !important; text-transform: none !important; }

html body #create-modal.create-modal .cpx-card {
    margin: 0 !important; padding: 10px !important;
    border: 1px solid #EAEAE6 !important; border-radius: 18px !important;
    background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important;
}
/* Media: the dashed card is the button itself. */
html body #create-modal.create-modal .cpx--composer .cpx-btn--media,
html body #create-modal.create-modal .cpx--composer #community-post-media-btn {
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important;
    width: 100% !important; min-height: 74px !important; margin: 0 !important; padding: 16px !important;
    border: 1px dashed #D6D6D0 !important; border-radius: 16px !important; background: #FFFFFF !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; text-align: left !important;
    color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
html body #create-modal.create-modal .cpx--composer #community-post-media-btn i {
    width: 42px !important; height: 42px !important; flex: 0 0 42px !important; border-radius: 13px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    background: #0FBFA4 !important; color: #08322C !important; -webkit-text-fill-color: #08322C !important; font-size: 18px !important;
    box-shadow: 0 6px 14px -6px rgba(15, 191, 164, 0.7) !important; margin: 0 !important;
}
html body #create-modal.create-modal .cpx--composer #community-post-media-btn[data-has-media="1"] { border-style: solid !important; border-color: #EAEAE6 !important; }
html body #create-modal.create-modal .cpx--composer .cpx-preview {
    width: 104px !important; height: 104px !important; margin: 10px 0 0 !important; border-radius: 14px !important; overflow: hidden !important;
    border: 1px solid #EAEAE6 !important; background: #F1F1ED !important;
}
html body #create-modal.create-modal .cpx--composer .cpx-preview:empty { display: none !important; }
html body #create-modal.create-modal .cpx--composer .cpx-preview img,
html body #create-modal.create-modal .cpx--composer .cpx-preview video {
    width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover !important; display: block !important;
}
html body #create-modal.create-modal .cpx--composer .cpx-btn-clear {
    display: none; margin: 8px 0 0 !important; padding: 6px 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 12px !important; font-weight: 700 !important; color: #A83E29 !important; -webkit-text-fill-color: #A83E29 !important;
}

/* Message card. */
html body #create-modal.create-modal .cpx-card--message { padding: 2px 4px !important; }
html body #create-modal.create-modal .cpx--composer .cpx-textarea,
html body #create-modal.create-modal .cpx--composer #post-message {
    width: 100% !important; min-height: 96px !important; margin: 0 !important; padding: 14px 12px !important;
    border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; resize: none !important;
    font-size: 14px !important; line-height: 1.5 !important; font-weight: 500 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
html body #create-modal.create-modal .cpx--composer #post-message::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; }

/* Post. */
html body #create-modal.create-modal .cpx-foot { margin: 14px 0 0 !important; }
html body #create-modal.create-modal .cpx--composer .cpx-btn--send {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
    width: 100% !important; height: 54px !important; margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 16px !important;
    background: #EDEDE8 !important; box-shadow: none !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    opacity: 1 !important; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
html body #create-modal.create-modal .cpx--composer .cpx-btn--send,
html body #create-modal.create-modal .cpx--composer .cpx-btn--send i,
html body #create-modal.create-modal .cpx--composer .cpx-btn--send span { color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important; }
html body #create-modal.create-modal .cpx--composer .cpx-btn--send.is-ready { background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; }
html body #create-modal.create-modal .cpx--composer .cpx-btn--send.is-ready,
html body #create-modal.create-modal .cpx--composer .cpx-btn--send.is-ready i,
html body #create-modal.create-modal .cpx--composer .cpx-btn--send.is-ready span { color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
html body #create-modal.create-modal .cpx--composer .cpx-btn--send i { font-size: 11px !important; }
html body #create-modal.create-modal .cpx-note {
    margin: 9px 0 0 !important; text-align: center !important;
    font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important;
}

/* More options: Room. */
html body #create-modal.create-modal .cpx-more { margin: 18px 0 0 !important; border-top: 1px solid #EAEAE6 !important; }
html body #create-modal.create-modal .cpx-more-summary {
    display: flex !important; align-items: center !important; justify-content: space-between !important; list-style: none !important;
    padding: 16px 4px 14px !important; cursor: pointer;
    font-size: 14px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}
html body #create-modal.create-modal .cpx-more-summary::-webkit-details-marker { display: none !important; }
html body #create-modal.create-modal .cpx-more-meta { display: inline-flex !important; align-items: center !important; gap: 10px !important; }
html body #create-modal.create-modal .cpx-more-meta em {
    font-style: normal !important; font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important;
}
html body #create-modal.create-modal .cpx-more-meta i { font-size: 11px !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; transition: transform 160ms ease; }
html body #create-modal.create-modal .cpx-more[open] .cpx-more-meta i { transform: rotate(180deg); }
html body #create-modal.create-modal .cpx-card--room { padding: 4px !important; }
html body #create-modal.create-modal .cpx--composer .cpx-select {
    width: 100% !important; height: 46px !important; margin: 0 !important; padding: 0 40px 0 12px !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important;
}

/* Composer follow-ups: older rules in this file hid the preview and the
   remove link outright, boxed the cancel, and bordered the textarea. */
html body #create-modal.create-modal { background: #FBFBF9 !important; }
html body #create-modal.create-modal .cpx--composer .cpx-preview:not(:empty) { display: block !important; }
html body #create-modal.create-modal .cpx--composer #community-post-media-clear[style*="block"] { display: inline-flex !important; }
html body #create-modal.create-modal .cpx--composer .cpx-bar .cpx-bar-cancel {
    background: transparent !important; background-color: transparent !important; background-image: none !important;
    border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
html body #create-modal.create-modal .cpx--composer .cpx-card--message #post-message,
html body #create-modal.create-modal .cpx--composer .cpx-card--message #post-message:focus,
html body #create-modal.create-modal .cpx--composer .cpx-card--message #post-message:not(:placeholder-shown),
html body #create-modal.create-modal .cpx--composer .cpx-card--message .text-area {
    border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important;
}
html body #create-modal.create-modal .cpx--composer .cpx-eyebrow { width: auto !important; margin: 14px 0 8px !important; padding: 0 4px !important; box-sizing: border-box !important; }
html body #create-modal.create-modal .cpx--composer .cpx-more-body .cpx-eyebrow,
html body #create-modal.create-modal .cpx--composer .cpx-more-body .cpx-eyebrow span {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important;
    font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important;
    color: #70706B !important; -webkit-text-fill-color: #70706B !important;
}
/* mobile-button-safety.css repaints every button inside an id containing
   "modal" with an id-strength !important; the doubled id outranks it. */
html body #create-modal#create-modal .cpx--composer .cpx-bar .cpx-bar-cancel,
html body #create-modal#create-modal .cpx--composer .cpx-bar .cpx-bar-cancel:hover,
html body #create-modal#create-modal .cpx--composer .cpx-bar .cpx-bar-cancel:active {
    background: transparent !important; background-color: transparent !important; background-image: none !important;
    border: 0 !important; box-shadow: none !important; filter: none !important;
    color: #63635F !important; -webkit-text-fill-color: #63635F !important;
}
html body #create-modal#create-modal .cpx--composer #community-post-media-btn { background: #FFFFFF !important; background-color: #FFFFFF !important; }
html body #create-modal#create-modal .cpx--composer .cpx-btn--send { background-color: #EDEDE8 !important; }
html body #create-modal#create-modal .cpx--composer .cpx-btn--send.is-ready { background-color: #111214 !important; }
html body #create-modal#create-modal.create-modal,
html body #create-modal#create-modal.create-modal.active,
html body #create-modal#create-modal.create-modal .modal-content { background: #FBFBF9 !important; background-color: #FBFBF9 !important; }

/* ---- Community settings inside the composer (owner only) ---- */
#create-modal#create-modal .cpx-bar-settings {
    width: 64px !important; flex: 0 0 64px !important; margin: 0 !important; padding: 8px 0 !important; border: 0 !important;
    background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    text-align: right !important; cursor: pointer;
}
#create-modal#create-modal .cpx-bar-settings i { font-size: 16px !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
/* Keep the gear's slot so the title stays centered for members. */
#create-modal#create-modal .cpx-bar-settings[hidden] { display: block !important; visibility: hidden !important; pointer-events: none !important; }
#create-modal#create-modal.is-settings .cpx-bar-settings { visibility: hidden !important; }
#create-modal#create-modal.is-settings .cpx--composer > :not(.cpx-settings):not(.cpx-bar) { display: none !important; }
#create-modal#create-modal .cpx-settings-done {
    display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 54px !important; min-height: 54px !important;
    margin: 6px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important;
    color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; cursor: pointer;
}
#create-modal#create-modal .cpx-settings-done::before, #create-modal#create-modal .cpx-settings-done::after { content: none !important; }
#create-modal#create-modal.is-settings .cpx-settings { display: block !important; }
#create-modal#create-modal .cpx-settings[hidden] { display: none !important; }
#create-modal#create-modal .cpx-settings-card {
    margin: 0 0 12px !important; padding: 16px !important; border: 1px solid #EAEAE6 !important; border-radius: 18px !important;
    background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03) !important;
}
#create-modal#create-modal .cpx-settings-card h4 { margin: 0 0 6px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#create-modal#create-modal .cpx-settings-card h4 i { color: #0FBFA4 !important; -webkit-text-fill-color: #0FBFA4 !important; margin-right: 8px !important; font-size: 13px !important; }
#create-modal#create-modal .cpx-settings-card p { margin: 0 0 12px !important; font-size: 12px !important; font-weight: 500 !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#create-modal#create-modal .cpx-settings-card label {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    margin: 0 0 8px !important; padding: 10px 12px !important; border: 1px solid #EAEAE6 !important; border-radius: 12px !important; background: #FBFBF9 !important; cursor: pointer;
}
#create-modal#create-modal .cpx-settings-card label:last-of-type { margin-bottom: 0 !important; }
#create-modal#create-modal .cpx-settings-card label:not(.is-switch) { justify-content: flex-start !important; }
#create-modal#create-modal .cpx-settings-card label span { font-size: 13px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#create-modal#create-modal .cpx-settings-card label span i { width: 18px !important; margin-right: 6px !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; font-size: 12px !important; }
#create-modal#create-modal .cpx-settings-card input[type="radio"],
#create-modal#create-modal .cpx-settings-card input[type="checkbox"] { width: 20px !important; height: 20px !important; margin: 0 !important; accent-color: #0FBFA4 !important; flex: 0 0 auto !important; }
#create-modal#create-modal .cpx-settings-card h5 { margin: 14px 0 8px !important; font-size: 12px !important; font-weight: 700 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#create-modal#create-modal .cpx-settings-card h5 i { margin-right: 6px !important; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#create-modal#create-modal .cpx-settings-code { display: flex !important; gap: 8px !important; }
#create-modal#create-modal#create-modal .cpx-settings-code input,
#create-modal#create-modal#create-modal .cpx-settings-code input:focus {
    flex: 1 1 auto !important; min-width: 0 !important; height: 42px !important; margin: 0 !important; padding: 0 12px !important;
    border: 1px solid #EAEAE6 !important; border-radius: 12px !important; outline: none !important; box-shadow: none !important; background: #FFFFFF !important;
    font-size: 13px !important; font-weight: 600 !important; color: #111214 !important; -webkit-text-fill-color: #111214 !important; -webkit-appearance: none !important;
}
#create-modal#create-modal .cpx-settings-code button {
    flex: 0 0 auto !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: 12px !important;
    background: #111214 !important; box-shadow: none !important; font-size: 12.5px !important; font-weight: 700 !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; cursor: pointer;
}
#create-modal#create-modal .cpx-settings-card small { display: block !important; margin: 8px 0 0 !important; font-size: 11.5px !important; font-weight: 500 !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#create-modal#create-modal #cpx-access-code-section[hidden] { display: none !important; }

/* Engagement hidden: the whole action row goes, on the feed and on post detail. */
html.community-engagement-hidden .mobile-community-actions,
body.community-engagement-hidden .mobile-community-actions,
html.community-engagement-hidden .post-detail-engagement,
body.community-engagement-hidden .post-detail-engagement { display: none !important; }
/* Comments off: no reply button, no reply list, no reply box. */
html.community-comments-off .community-feed-action--comment,
body.community-comments-off .community-feed-action--comment,
html.community-comments-off #global-comment-input,
body.community-comments-off #global-comment-input,
html.community-comments-off body #global-comment-input,
html.community-comments-off body.post-detail-open #global-comment-input,
html.community-comments-off .post-detail-replies-head,
body.community-comments-off .post-detail-replies-head,
html.community-comments-off .post-detail-inline-replies,
body.community-comments-off .post-detail-inline-replies { display: none !important; }

/* ---- Access gate: by-request posting, before the composer ---- */
#create-modal#create-modal .cpx-gate { display: block; padding: 8px 0 0; }
#create-modal#create-modal .cpx-gate-icon { width: 56px; height: 56px; margin: 8px auto 14px; border-radius: 18px; background: #111214; display: grid; place-items: center; }
#create-modal#create-modal .cpx-gate-icon i { font-size: 20px; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#create-modal#create-modal .cpx-gate-title { margin: 0 0 6px !important; text-align: center; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.03em; color: #111214 !important; -webkit-text-fill-color: #111214 !important; }
#create-modal#create-modal .cpx-gate-copy { margin: 0 auto 18px !important; max-width: 300px; text-align: center; font-size: 13px !important; font-weight: 500; line-height: 1.5; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#create-modal#create-modal .cpx-gate-eyebrow, #create-modal#create-modal .cpx-gate-eyebrow span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #70706B !important; -webkit-text-fill-color: #70706B !important; }
#create-modal#create-modal .cpx-gate-eyebrow { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 8px; padding: 0 4px; }
#create-modal#create-modal .cpx-gate-eyebrow span:last-child:not(:first-child) { letter-spacing: 0.08em !important; text-transform: none !important; }
#create-modal#create-modal .cpx-gate-card { display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 12px; border: 1px solid #EAEAE6 !important; border-radius: 18px !important; background: #FFFFFF !important; box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03); }
#create-modal#create-modal .cpx-gate-lock { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; background: #F1F1ED; display: grid; place-items: center; }
#create-modal#create-modal .cpx-gate-lock i { font-size: 13px; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#create-modal#create-modal .cpx-gate-card input, #create-modal#create-modal .cpx-gate-card input:focus {
    flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 46px !important; min-height: 46px !important; margin: 0 !important; padding: 0 8px !important;
    border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important; background-color: transparent !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase; color: #111214 !important; -webkit-text-fill-color: #111214 !important; caret-color: #0FBFA4 !important; -webkit-appearance: none !important; appearance: none !important;
}
#create-modal#create-modal .cpx-gate-card input::placeholder { color: #A3A3A0 !important; -webkit-text-fill-color: #A3A3A0 !important; opacity: 1 !important; letter-spacing: 0.04em; text-transform: none; }
#create-modal#create-modal .cpx-gate-card--rows { display: block; padding: 0; }
#create-modal#create-modal .cpx-gate-row { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; }
#create-modal#create-modal .cpx-gate-row + .cpx-gate-row { border-top: 1px solid #EFEFEB; }
#create-modal#create-modal .cpx-gate-row > span { flex: 0 0 56px; font-size: 13px !important; font-weight: 600; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }
#create-modal#create-modal .cpx-gate-row input, #create-modal#create-modal .cpx-gate-row input:focus { text-align: right; font-family: inherit !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none; padding: 0 !important; }
#create-modal#create-modal .cpx-gate-row input[type="password"] { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; letter-spacing: 0.2em !important; }
#create-modal#create-modal .cpx-gate-error { margin: 10px 4px 0; font-size: 12px; font-weight: 600; color: #E24B3B !important; -webkit-text-fill-color: #E24B3B !important; }
#create-modal#create-modal .cpx-gate-error[hidden] { display: none !important; }
#create-modal#create-modal .cpx-gate-verify, #create-modal#create-modal button.cpx-gate-verify {
    display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 14px 0 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 16px !important; background: #EDEDE8 !important; box-shadow: none !important; transform: none !important; opacity: 1 !important;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; color: #8A8A84 !important; -webkit-text-fill-color: #8A8A84 !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important; text-shadow: none !important; cursor: pointer;
}
#create-modal#create-modal .cpx-gate-verify::before, #create-modal#create-modal .cpx-gate-verify::after { content: none !important; display: none !important; }
#create-modal#create-modal .cpx-gate-verify.is-ready { background: #111214 !important; box-shadow: 0 12px 24px -12px rgba(17, 18, 20, 0.55) !important; color: #FBFBF9 !important; -webkit-text-fill-color: #FBFBF9 !important; }
#create-modal#create-modal .cpx-gate-verify.is-busy { letter-spacing: 0.16em !important; }
#create-modal#create-modal .cpx-gate-note { margin: 9px 0 0 !important; text-align: center; font-size: 11.5px !important; font-weight: 500; color: #63635F !important; -webkit-text-fill-color: #63635F !important; }

#create-modal#create-modal.is-gated .cpx--composer > :not(.cpx-gate):not(.cpx-bar) { display: none !important; }
#create-modal#create-modal.is-gated .cpx-gate { display: block !important; }
#create-modal#create-modal .cpx-gate[hidden] { display: none !important; }
#create-modal#create-modal.is-gated .cpx-bar-settings { visibility: hidden !important; }