/* Moment Story Videos — X/Twitter post preview.
   Geometry, type scale and media rules follow X exactly; only the palette is
   Sway's. Everything colour-related lives in the one token block below, so
   swapping to X's real colours is a single-block edit (see README). */

:root {
  /* ---- SWAY PALETTE — swap this whole block for X's real colours ---- */
  --tw-bg:        #160809;
  --tw-bg-elev:   #220f14;
  --tw-hover:     rgba(255, 255, 255, .035);
  --tw-border:    rgba(255, 255, 255, .12);
  --tw-text:      #fff;
  --tw-text-2:    #8d7378;   /* X: #71767B */
  --tw-link:      #e8536a;   /* X: #1D9BF0 */
  --tw-brand:     #e8536a;   /* X: #1D9BF0 */
  --tw-brand-ink: #160809;   /* X: #fff — dark ink because white on #e8536a is 3.4:1 */
  --tw-like:      #f0176b;   /* X: #F91880 */
  --tw-repost:    #f26e83;   /* X: #00BA7C — Sway has no green */
  --tw-scrim:     rgba(0, 0, 0, .77);
  /* the Sway mark used as the account avatar — stays Sway pink even under
     X's palette, because it IS the account's avatar */
  --tw-avatar-ink: #f0176b;
  --tw-avatar-bg:  #2a1218;
  /* ---- end palette ----
     Every colour on the page comes from here. Swapping this block for the X
     values commented beside each token turns the page into a faithful X mock
     with no other edit. */

  --tw-font: Manrope, ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB", sans-serif;

  --tw-col: 600px;
  --tw-nav: 275px;
  --tw-side: 350px;
  --tw-gap: 28px;

  --tw-avatar: 40px;
  --tw-radius: 16px;

  /* The one calibration knob. X caps portrait media height and lets the width
     fall out of it; 510 * 9/16 = 287px, ~56% of the 516px content column. */
  --tw-media-cap: 510px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--tw-bg);
}

body {
  font-family: var(--tw-font);
  color: var(--tw-text);
  -webkit-font-smoothing: antialiased;
  /* Manrope runs wider than X's Chirp; this claws back some of the gap so
     line breaks land closer to a real screenshot. */
  letter-spacing: -.003em;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Desktop shell — left nav / 600px column / right sidebar
   ========================================================================== */

.tw-shell {
  display: grid;
  grid-template-columns: var(--tw-nav) minmax(0, var(--tw-col)) var(--tw-side);
  column-gap: var(--tw-gap);
  max-width: calc(var(--tw-nav) + var(--tw-col) + var(--tw-side) + var(--tw-gap) * 2 + 32px);
  margin: 0 auto;
  padding: 0 16px;
  align-items: start;
}

/* --- left nav --- */

.tw-nav {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 4px 8px 20px;
  min-width: 0;
}

.tw-nav-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin: 2px 0 4px;
  padding-left: 12px;
}
.tw-nav-logo:hover { background: var(--tw-hover); }

.tw-nav-list { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.tw-nav-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 12px;
  border-radius: 9999px;
  font-size: 20px;
  line-height: 24px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}
.tw-nav-item:hover { background: var(--tw-hover); }
.tw-nav-item.is-active { font-weight: 700; }
.tw-nav-item svg { flex: 0 0 auto; }
.tw-nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tw-nav-post {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  margin-top: 16px;
  border-radius: 26px;
  background: var(--tw-brand);
  color: var(--tw-brand-ink);
  font-size: 17px;
  font-weight: 700;
}
.tw-nav-post:hover { filter: brightness(1.08); }
.tw-nav-post .tw-nav-post-icon { display: none; }

.tw-nav-account {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 12px;
  border-radius: 9999px;
  min-width: 0;
}
.tw-nav-account:hover { background: var(--tw-hover); }
.tw-nav-account-text { min-width: 0; overflow: hidden; }
.tw-nav-account-name {
  display: block;   /* a <span>: without this the ellipsis below never applies */
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-nav-account-handle {
  display: block;   /* a <span>: without this the ellipsis below never applies */
  font-size: 15px;
  line-height: 20px;
  color: var(--tw-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-nav-account-more { margin-left: auto; flex: 0 0 auto; color: var(--tw-text-2); }

/* --- centre column --- */

.tw-main {
  min-width: 0;
  border-left: 1px solid var(--tw-border);
  border-right: 1px solid var(--tw-border);
  min-height: 100vh;
}

.tw-colhead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--tw-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--tw-border);
}

.tw-colhead-title {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 53px;
  padding: 0 16px;
  font-size: 20px;
  font-weight: 700;
  min-width: 0;
}
.tw-colhead-title span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tw-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  margin-left: -6px;
}
.tw-back:hover { background: var(--tw-hover); }

.tw-tabs { display: flex; min-width: 0; }

.tw-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--tw-text-2);
  position: relative;
}
.tw-tab:hover { background: var(--tw-hover); }
.tw-tab.is-active { font-weight: 700; color: var(--tw-text); }
.tw-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 56px;
  max-width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--tw-brand);
}

/* --- right sidebar (decorative: its only job is to hold the column width) --- */

.tw-aside {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 4px 0 20px 8px;
  min-width: 0;
  scrollbar-width: none;
}
.tw-aside::-webkit-scrollbar { display: none; }

.tw-search {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--tw-bg);
  padding: 4px 0 12px;
}
.tw-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-radius: 9999px;
  background: var(--tw-bg-elev);
  border: 1px solid transparent;
  color: var(--tw-text-2);
  font-size: 15px;
  min-width: 0;
}
.tw-search-field span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-search-field svg { flex: 0 0 auto; }

.tw-card {
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  margin-bottom: 16px;
  overflow: hidden;
  min-width: 0;
}
.tw-card-title {
  font-size: 20px;
  font-weight: 800;
  padding: 12px 16px 4px;
  min-width: 0;
  overflow-wrap: break-word;
}
.tw-card-row { padding: 12px 16px; min-width: 0; }
.tw-card-row:hover { background: var(--tw-hover); }
.tw-card-k { font-size: 13px; color: var(--tw-text-2); overflow-wrap: break-word; }
.tw-card-v { font-size: 15px; font-weight: 700; overflow-wrap: break-word; }
.tw-card-more { padding: 12px 16px; font-size: 15px; color: var(--tw-link); }

.tw-follow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  min-width: 0;
}
.tw-follow:hover { background: var(--tw-hover); }
.tw-follow-text { min-width: 0; flex: 1 1 auto; }
.tw-follow-name {
  display: block;   /* a <span>: without this the ellipsis below never applies */
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-follow-handle {
  display: block;   /* a <span>: without this the ellipsis below never applies */
  font-size: 15px;
  line-height: 20px;
  color: var(--tw-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-follow-btn {
  flex: 0 0 auto;
  padding: 0 16px;
  height: 32px;
  border-radius: 16px;
  background: var(--tw-text);
  color: var(--tw-bg);
  font-size: 14px;
  font-weight: 700;
}

/* ==========================================================================
   Tweet cell — shared by both pages, both views
   ========================================================================== */

.tw-feed { min-width: 0; }

.tw-cell {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tw-border);
  min-width: 0;
  cursor: pointer;
  transition: background .12s;
}
.tw-cell:hover { background: var(--tw-hover); }
.tw-cell:focus-visible { outline: 2px solid var(--tw-link); outline-offset: -2px; }

.tw-avatar {
  flex: 0 0 auto;
  width: var(--tw-avatar);
  height: var(--tw-avatar);
  border-radius: 50%;
  background: var(--tw-avatar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tw-avatar svg { width: 58%; height: auto; fill: var(--tw-avatar-ink); }
.tw-avatar img { width: 100%; height: 100%; object-fit: cover; }

.tw-cell-avatar { margin-right: 12px; }

/* min-width:0 is what stops long unbroken text from bursting the column. */
.tw-body { flex: 1 1 auto; min-width: 0; }

.tw-head {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.tw-head-ident {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 20px;
}
.tw-name {
  font-weight: 700;
  color: var(--tw-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.tw-handle {
  color: var(--tw-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: 4px;
}
.tw-dot { color: var(--tw-text-2); margin: 0 4px; flex: 0 0 auto; }
.tw-time { color: var(--tw-text-2); white-space: nowrap; flex: 0 0 auto; }

.tw-head-acts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin: -4px -6px 0 4px;
  color: var(--tw-text-2);
}
.tw-head-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.tw-head-btn:hover { background: var(--tw-hover); color: var(--tw-link); }

.tw-text {
  margin-top: 2px;
  font-size: 15px;
  line-height: 20px;
  color: var(--tw-text);
  /* pre-wrap is the whole point — X preserves the caption's line breaks, and
     predicting those breaks is why this page exists. */
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-width: 0;
}
.tw-link { color: var(--tw-link); overflow-wrap: anywhere; }
.tw-link:hover { text-decoration: underline; }

/* ==========================================================================
   Media
   ========================================================================== */

.tw-media {
  position: relative;
  margin-top: 12px;
  border-radius: var(--tw-radius);
  border: 1px solid var(--tw-border);
  overflow: hidden;
  background: #000;
  max-width: 100%;
}

/* X caps portrait height and derives the width. min() rather than max-height
   so the same rule clamps to 100% on a narrow phone column. */
.tw-media--portrait {
  width: min(100%, calc(var(--tw-media-cap) * 9 / 16));
  aspect-ratio: 9 / 16;
}
.tw-media--landscape { width: 100%; }

/* Poster sits underneath; the video paints over it once it has frames, so a
   clip that fades in from black never reads as a broken card. */
.tw-media-poster,
.tw-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tw-media video { background: transparent; }

.tw-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  height: 20px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--tw-scrim);
  color: #fff;
  font: 700 12px/20px var(--tw-font);
  letter-spacing: 0;
  pointer-events: none;
}

.tw-mute {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tw-scrim);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- image grids: 2px gutters, rounded outside, square inside --- */

.tw-grid {
  display: grid;
  gap: 2px;
  margin-top: 12px;
  border-radius: var(--tw-radius);
  border: 1px solid var(--tw-border);
  overflow: hidden;
  background: var(--tw-bg);
  max-width: 100%;
}
.tw-grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-width: 0;
}
/* Every layout pins its rows with minmax(0, 1fr). Without that the implicit
   row sizes to the image's intrinsic height, the img overflows the container
   and `overflow: hidden` crops it from the TOP — where X centre-crops. */

/* 1 image: the renderer inlines aspect-ratio, clamped to X's 3:4..2:1 crop. */
.tw-grid--1 {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.tw-grid--2,
.tw-grid--3,
.tw-grid--4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  aspect-ratio: 16 / 9;
}
.tw-grid--2 { grid-template-rows: minmax(0, 1fr); }
.tw-grid--3,
.tw-grid--4 { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.tw-grid--3 > :first-child { grid-row: span 2; }

/* ==========================================================================
   Action bar — 7 items
   ========================================================================== */

.tw-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 12px;
  min-width: 0;
  color: var(--tw-text-2);
}
.tw-actions-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 340px;
}
.tw-actions-side {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.tw-act {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
  color: var(--tw-text-2);
  font-size: 13px;
  line-height: 16px;
  border-radius: 9999px;
}
.tw-act svg { flex: 0 0 auto; width: 18.75px; height: 18.75px; }
.tw-act-hit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.75px;
  height: 34.75px;
  margin: -8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.tw-act-n {
  padding-left: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-act:hover .tw-act-hit { background: color-mix(in srgb, currentColor 12%, transparent); }
.tw-act--reply:hover,
.tw-act--views:hover,
.tw-act--bookmark:hover,
.tw-act--share:hover,
.tw-act--download:hover { color: var(--tw-link); }
.tw-act--repost:hover { color: var(--tw-repost); }
.tw-act--like:hover { color: var(--tw-like); }

.tw-act.is-on.tw-act--like { color: var(--tw-like); }
.tw-act.is-on.tw-act--repost { color: var(--tw-repost); }
.tw-act.is-on.tw-act--bookmark { color: var(--tw-link); }

/* ==========================================================================
   Detail (focal) view
   ========================================================================== */

.tw-focal { padding: 12px 16px 0; min-width: 0; border-bottom: 1px solid var(--tw-border); }

.tw-focal-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
.tw-focal-ident { flex: 1 1 auto; min-width: 0; }
.tw-focal-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-focal-handle {
  font-size: 15px;
  line-height: 20px;
  color: var(--tw-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-focal .tw-text {
  margin-top: 12px;
  font-size: 17px;
  line-height: 24px;
}

.tw-focal-stamp {
  padding: 16px 0;
  font-size: 15px;
  color: var(--tw-text-2);
  overflow-wrap: break-word;
}
.tw-focal-stamp b { color: var(--tw-text); font-weight: 700; }

.tw-focal-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--tw-border);
  font-size: 15px;
  color: var(--tw-text-2);
  min-width: 0;
}
.tw-focal-counts b { color: var(--tw-text); font-weight: 700; }

.tw-focal .tw-actions {
  margin-top: 0;
  padding: 4px 0;
  border-top: 1px solid var(--tw-border);
  justify-content: space-around;
}
.tw-focal .tw-actions-main {
  max-width: none;
  justify-content: space-around;
  flex: 1 1 auto;
}
.tw-focal .tw-act svg { width: 22px; height: 22px; }
.tw-focal .tw-act-hit { width: 39px; height: 39px; }

.tw-reply-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--tw-border);
  min-width: 0;
}
.tw-reply-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  color: var(--tw-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tw-reply-btn {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--tw-brand);
  color: var(--tw-brand-ink);
  font-size: 15px;
  font-weight: 700;
  opacity: .5;
}

.tw-end {
  padding: 32px 16px 64px;
  text-align: center;
  font-size: 14px;
  color: var(--tw-text-2);
}


/* ==========================================================================
   Responsive ladder.

   Each breakpoint is the exact minimum width the layout above it needs, so
   the 600px centre column NEVER gets squeezed — that column width is the
   whole basis of the media-size prediction this page exists to make.

     full 3-col   275 + 600 + 350 + 2*28 gap + 32 pad = 1313
     compact 3-col 275 + 600 + 290 + 2*16 gap + 32 pad = 1229
     2-col         275 + 600 +       16 gap + 32 pad =  923
     2-col icons    88 + 600 +       16 gap + 32 pad =  736
     below that: nav becomes a bottom bar, column goes full-bleed

   (X's own breakpoints are ~1265 and ~1005; these are derived from our token
   values instead, which keeps the column exact.)
   ========================================================================== */

@media (max-width: 1313px) {
  :root { --tw-gap: 16px; --tw-side: 290px; }
}

/* drop the sidebar */
@media (max-width: 1229px) {
  .tw-shell { grid-template-columns: var(--tw-nav) minmax(0, var(--tw-col)); justify-content: center; }
  .tw-aside { display: none; }
}

/* collapse the nav to icons */
@media (max-width: 923px) {
  :root { --tw-nav: 88px; }
  .tw-nav { align-items: center; padding-left: 0; padding-right: 0; }
  .tw-nav-list { align-items: center; }
  .tw-nav-item { justify-content: center; gap: 0; padding: 12px; }
  .tw-nav-label { display: none; }
  .tw-nav-logo { justify-content: center; width: 50px; padding-left: 0; }
  .tw-nav-post { width: 52px; align-self: center; border-radius: 50%; }
  .tw-nav-post .tw-nav-post-label { display: none; }
  .tw-nav-post .tw-nav-post-icon { display: block; }
  .tw-nav-account { justify-content: center; padding: 12px; }
  .tw-nav-account-text,
  .tw-nav-account-more { display: none; }
}

/* nav becomes a bottom bar — same move X makes */
@media (max-width: 736px) {
  .tw-shell {
    display: block;
    max-width: none;
    padding: 0;
  }
  .tw-main {
    border-left: 0;
    border-right: 0;
    padding-bottom: calc(56px + var(--safe-b));
  }
  .tw-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 50;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px var(--safe-b);
    background: color-mix(in srgb, var(--tw-bg) 92%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--tw-border);
  }
  .tw-nav-logo,
  .tw-nav-post,
  .tw-nav-account { display: none; }
  .tw-nav-list {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    gap: 0;
  }
  .tw-nav-item { padding: 14px 10px; }
  /* only the five primary destinations survive, as on X mobile */
  .tw-nav-item[data-optional="1"] { display: none; }
}

/* --------------------------------------------------------------------------
   Card-level rules key off the COLUMN width, not the window.

   The mobile page renders inside a 390px phone frame on a wide desktop
   window, so a viewport media query would hand it desktop padding. A
   container query asks the right question, and it is the more correct
   question for the desktop page too — the card only ever cares how wide its
   own column is.
   -------------------------------------------------------------------------- */

.tw-main { container-type: inline-size; container-name: twcol; }

@container twcol (max-width: 500px) {
  .tw-cell,
  .tw-focal,
  .tw-reply-box,
  .tw-colhead-title { padding-left: 12px; padding-right: 12px; }
  .tw-actions-main { max-width: none; }
}

/* Below ~380px the 7 icons plus their counts genuinely do not fit. X drops
   the share affordance first; hiding beats overlapping. */
@container twcol (max-width: 380px) {
  .tw-act--share { display: none; }
}
@container twcol (max-width: 340px) {
  .tw-act--bookmark { display: none; }
  .tw-act-n { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Publish affordance + 预览发布 modal — ours, not X's.

   Uses only the token block at the top of this file, so a palette swap keeps
   working. The publish controls are deliberately the ONE place that reads as
   "our tool" inside an otherwise faithful X surface.
   ========================================================================== */

.tw-pub-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex: 0 0 auto;
  color: var(--tw-text-2);
}
.tw-pub-btn:hover { background: var(--tw-hover); color: var(--tw-brand); }
.tw-pub-btn.is-pending   { color: var(--tw-brand); }
.tw-pub-btn.is-published { color: var(--tw-repost); }
.tw-pub-btn.is-failed    { color: var(--tw-like); }
.tw-pub-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.tw-pub-badge {
  flex: 0 0 auto;
  margin-left: 8px;
  padding: 0 8px;
  height: 18px;
  line-height: 18px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.tw-pub-badge.is-pending   { color: var(--tw-brand); }
.tw-pub-badge.is-published { color: var(--tw-repost); }
.tw-pub-badge.is-failed    { color: var(--tw-like); }

/* --- modal shell --------------------------------------------------------- */

body.pub-open { overflow: hidden; }

.pub-root { position: fixed; inset: 0; z-index: 200; }

.pub-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.pub-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1080px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--tw-bg);
  border: 1px solid var(--tw-border);
  border-radius: 18px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.pub-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--tw-border);
  min-width: 0;
}
.pub-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pub-x {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--tw-text-2);
}
.pub-x:hover { background: var(--tw-hover); color: var(--tw-text); }

.pub-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
}
.pub-col {
  min-width: 0;
  overflow-y: auto;
  padding: 16px;
}
.pub-col--edit { border-right: 1px solid var(--tw-border); }
.pub-col--preview { background: color-mix(in srgb, var(--tw-bg) 88%, #000); }

/* --- facts: what the operator needs in order to actually review ---------- */

.pub-facts {
  border: 1px solid var(--tw-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  min-width: 0;
}
.pub-facts-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
  margin-bottom: 10px;
}
.pub-char {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.pub-chip {
  flex: 0 0 auto;
  padding: 0 8px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid currentColor;
}
.pub-chip--pass   { color: #4ec38a; }
.pub-chip--review { color: #e8a33f; }

.pub-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}
.pub-meta dt { color: var(--tw-text-2); white-space: nowrap; }
.pub-meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.pub-mono { font-family: ui-monospace, Menlo, monospace; }

.pub-warn {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--tw-border);
  font-size: 12px;
  line-height: 17px;
  color: var(--tw-text-2);
}
.pub-warn b { color: var(--tw-like); font-weight: 700; }

/* --- form ---------------------------------------------------------------- */

.pub-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  min-width: 0;
}
.pub-hint { font-weight: 400; color: var(--tw-text-2); font-size: 12px; }

.pub-text,
.pub-when {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--tw-bg-elev);
  border: 1px solid var(--tw-border);
  border-radius: 10px;
  color: var(--tw-text);
  font-family: inherit;
  padding: 10px 12px;
}
.pub-text {
  font-size: 15px;
  line-height: 21px;
  resize: vertical;
  min-height: 160px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.pub-text:focus,
.pub-when:focus { outline: none; border-color: var(--tw-brand); }
.pub-when { font-size: 14px; color-scheme: dark; }

.pub-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 16px;
  font-size: 12px;
  color: var(--tw-text-2);
  min-width: 0;
}

.pub-preview-label {
  font-size: 12px;
  color: var(--tw-text-2);
  margin-bottom: 10px;
}
/* the preview is a real column, so the media rule resolves exactly as it
   would in the feed — container query included */
.pub-preview {
  border: 1px solid var(--tw-border);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}

/* --- footer -------------------------------------------------------------- */

.pub-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--tw-border);
  min-width: 0;
}
.pub-save {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--tw-text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pub-save[data-state="saved"]  { color: var(--tw-repost); }
.pub-save[data-state="failed"] { color: var(--tw-like); cursor: pointer; text-decoration: underline; }

.pub-cancel,
.pub-post {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 18px;
  border-radius: 19px;
  font-size: 15px;
  font-weight: 700;
}
.pub-cancel { color: var(--tw-text-2); border: 1px solid var(--tw-border); }
.pub-cancel:hover { background: var(--tw-hover); color: var(--tw-text); }
.pub-post { background: var(--tw-brand); color: var(--tw-brand-ink); }
.pub-post:hover { filter: brightness(1.08); }

/* --- narrow: stack the two columns, then become a bottom sheet ----------- */

@media (max-width: 900px) {
  .pub-body { grid-template-columns: minmax(0, 1fr); }
  .pub-col--edit { border-right: 0; border-bottom: 1px solid var(--tw-border); }
  .pub-col { overflow-y: visible; }
  .pub-body { overflow-y: auto; }
}

@media (max-width: 620px) {
  .pub-panel {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-bottom: var(--safe-b);
  }
  .pub-col { padding: 12px; }
  .pub-head { padding: 12px; }
  .pub-foot { padding: 10px 12px calc(10px + var(--safe-b)); }
  .pub-cancel { display: none; }
  .pub-post { flex: 1 1 auto; }
}