/* The X thread maker (/x-thread-maker): the previewers' page (tool.css) with a thread on the stage. Each post is its own
   card, the desk's X renderer at its true width with a tray under it (post number, X's count, the split arrows, Copy).
   The painting stays where it is behind the cards while a long thread scrolls past; nothing on the page animates. */
.thread-maker .stage { display: block; min-height: 560px; padding: 0; overflow: clip; }
.thread-maker .stage > picture { position: absolute; inset: 0; }
/* The painting is one screen tall and sticks to the top of the screen inside the stage, so a thread of any length sits
   on the same crop. */
.thread-maker .stage > picture img { position: sticky; inset: auto; top: 0; display: block; width: 100%; height: 100svh; max-height: 100%; }

.posts { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; margin: 0; padding: 64px 40px; list-style: none; }
.post { display: flex; flex-direction: column; border-radius: 12px; overflow: clip; box-shadow: var(--frame-shadow); background: var(--paper); }
.post .frame { border-radius: 12px 12px 0 0; box-shadow: none; }
.post .fit { position: relative; flex: none; }
.post .fit > div { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.tray { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px 0 14px; font-size: 13.5px; letter-spacing: -0.005em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tray .at-n { margin-right: auto; white-space: nowrap; }
.tray .at-n b { font-weight: 500; color: var(--ink); }
.tray .moves { display: inline-flex; }
.tray button {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 36px; padding: 0 12px; border: 0;
  border-radius: 999px; background: none; color: var(--ink); cursor: pointer; font-size: 14px; letter-spacing: -0.005em;
  transition: background .15s ease-out, color .15s ease-out;
}
.tray button::after { content: ""; position: absolute; inset: -4px 0; }
.tray button { position: relative; }
.tray .move { min-width: 40px; padding: 0; font-size: 16px; }
/* Wide enough for "Copied", so the arrows beside it stay put when it changes. */
.tray .copy { min-width: 76px; }
.tray button:hover:not(:disabled) { background: var(--field); }
.tray button:disabled { color: var(--muted); opacity: .45; cursor: default; }

.result .numbers { text-wrap: pretty; }

@media (max-width: 759px) {
  .posts { gap: 20px; padding: 16px; }
  .thread-maker .stage { min-height: 0; }
}

.link[hidden] { display: none; }
/* X's thread line in its light theme (x.css draws the dark one). */
.fh-x.light .xt-thread, .fh-x.light .xt.connect-above::before { background: rgb(207, 217, 222); }