/* Sway Story — 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; }

/* Same crop, same reason as .player-video in styles.css: cover is right only
   while the video sits in the 9 / 16 .tw-media box, and fullscreen takes it out
   of that box onto a landscape screen. Only the focal variant carries native
   controls, so this is the only place here that can reach fullscreen at all —
   on twitter.html and twitter-mobile.html both. */
.tw-media video:fullscreen { object-fit: contain; }
.tw-media video:-webkit-full-screen { object-fit: contain; }

.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;
}

/* The detail view hands the bottom edge to the native controls, so the duration
   chip would sit across the scrubber. The runtime is in the control bar there
   anyway. Cursor too: the media is no longer a click target of ours. */
.tw-focal .tw-badge { display: none; }
.tw-focal .tw-media { cursor: default; }

.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 carries .tw-main so the media rule and the container query
   resolve exactly as they do in the feed. But .tw-main also carries
   min-height:100vh, which inside the modal became 1460px of empty scroll —
   the one thing worth undoing. */
.pub-preview {
  border: 1px solid var(--tw-border);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
  min-height: 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; }
}

/* ==========================================================================
   Lightbox — see the whole image, not X's crop
   ========================================================================== */

body.lb-open { overflow: hidden; }

.lb-root { position: fixed; inset: 0; z-index: 300; }

.lb-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .92); }

.lb-figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  pointer-events: none;
}
.lb-img {
  /* the whole point: contain, never cover — no crop at any viewport */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  pointer-events: auto;
  cursor: zoom-out;
}

.lb-x {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-x:hover { background: rgba(255, 255, 255, .16); }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-nav:hover { background: rgba(255, 255, 255, .16); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }

.lb-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 13px;
}

@media (max-width: 500px) {
  .lb-figure { padding: 56px 12px 44px; }
  .lb-nav { width: 34px; height: 34px; }
  .lb-prev { left: 4px; }
  .lb-next { right: 4px; }
}

/* the grid images are now interactive */
.tw-grid img { cursor: zoom-in; }
.tw-media { cursor: pointer; }