/* Stack reader: post first, then three actions, then decoration. */
.stack-open { overflow: hidden; }
.stack-overlay { position: fixed; inset: 0; z-index: 50; color: #fff1eb; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 25% 0%,#453263 0,transparent 59%),radial-gradient(ellipse at 100% 85%,#282d62 0,transparent 48%),#10152d; }
.stack-overlay::before { content: '✦            ⋆              ✧        ✦              ✧'; position: absolute; inset: 7% 0 auto; pointer-events: none; color: #ffdb7759; white-space: pre-wrap; letter-spacing: 24px; font-size: 20px; }
.stack-shell { position: relative; box-sizing: border-box; width: min(100%,620px); height: 100%; height: 100dvh; margin: auto; display: flex; flex-direction: column; gap: 10px;
  padding: max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }

.stack-header { flex: none; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 12px; min-height: 48px; }
.stack-close { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff2e; background: #ffffff12; color: #efe2f2; font-size: 19px; line-height: 1; }
.stack-close:hover { background: #ffffff21; }
.stack-heading { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; }
.stack-heading strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: #ffead3; }
.stack-heading span { font-size: .8125rem; color: #d3badf; font-variant-numeric: tabular-nums; }

/* The stage keeps a fixed size, so short and long posts don't move the controls. */
.stack-stage { position: relative; flex: 1 1 auto; min-height: 0; max-height: 40rem; margin-block: auto; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); place-items: center; isolation: isolate; outline: none; }
.stack-stage:focus-visible { outline: 2px solid #ffe0a6; outline-offset: 4px; border-radius: 26px; }
.stack-back { position: absolute; inset: 20px 14px 4px; border-radius: 24px; pointer-events: none; }
.stack-back-far { background: #b49edc; transform: translateY(9px) rotate(-1.8deg) scale(.965); opacity: .26; }
.stack-back-near { background: #f7d991; transform: translateY(4px) rotate(1deg) scale(.985); opacity: .42; }

.stack-front { position: relative; z-index: 1; width: 100%; height: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: center;
  transform: translate(var(--stack-x,0px),var(--stack-y,0px)) rotate(var(--stack-angle,0deg)); transition: transform .18s ease, opacity .18s ease; }
.stack-front.stack-dragging { transition: none; user-select: none; -webkit-user-select: none; }
.stack-front .tweet-card { --pad-x: clamp(18px,5vw,26px); --pad-top: 18px;
  display: flex; flex-direction: column; width: 100%; min-width: 0; height: calc(100% - 28px); max-height: none; margin: 0;
  padding: var(--pad-top) var(--pad-x) 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  border-radius: 24px; background: #fff2dd; box-shadow: 0 14px 40px #0b0a2066; opacity: 1;
  touch-action: pan-y; touch-action: pan-y pinch-zoom; /* long posts scroll natively; horizontal swipes are ours */ }
.stack-front .tweet-card:focus { outline: none; }
.stack-front .tweet-card:focus-visible { outline: 3px solid #ffe0a6; outline-offset: 3px; }
.stack-front .tweet-card[data-fits] { touch-action: pan-y; touch-action: pinch-zoom; /* nothing to scroll: the whole card can be pulled down */ }
.stack-front[data-tone="1"] .tweet-card { background: #f1e7ff; }
.stack-front[data-tone="2"] .tweet-card { background: #ffe3ef; }
.stack-front[data-tone="3"] .tweet-card { background: #fff1cc; }
.stack-front .tweet-card.was-read { opacity: 1; }

/* Header stays visible while a long post scrolls; it is also the pull-down handle. */
.stack-front .tweet-card .tweet-top { position: sticky; top: calc(-1 * var(--pad-top)); z-index: 2; flex: none;
  margin: calc(-1 * var(--pad-top)) calc(-1 * var(--pad-x)) 0; padding: calc(var(--pad-top) + 8px) var(--pad-x) 12px;
  background: inherit; border-radius: 24px 24px 0 0; touch-action: pan-x; touch-action: pinch-zoom; }
.stack-front .tweet-card .tweet-top::before { content: ''; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: #2f294024; }
.stack-front .tweet-card .open-tweet { top: 4px; right: calc(var(--pad-x) - 14px); }
.stack-front .avatar-star { width: 40px; height: 40px; }
.stack-front .tweet-author strong { font-size: .9375rem; }
.stack-front .tweet-author small { font-size: .8125rem; }
.stack-front .tweet-text { font-family: var(--font-reading); font-size: clamp(1.1875rem,1.15rem + .25vw,1.25rem); font-weight: 400; line-height: 1.53; letter-spacing: normal; margin: 12px 0 18px; padding: 0; flex: none; max-width: none; }
.stack-front .tweet-media { margin: 0 0 6px; }
.stack-has-feedback .stack-front .tweet-card:not([data-fits])::after { content: ''; flex: none; height: 60px; }
.stack-front .tweet-media img { max-height: 46dvh; }

/* Pending action: a restrained label that strengthens with the gesture. */
.stack-swipe-mark { position: absolute; top: 50%; left: 50%; z-index: 3; pointer-events: none; transform: translate(-50%,-50%) scale(calc(.92 + var(--stack-progress,0) * .08)); opacity: var(--stack-progress,0); }
.stack-swipe-mark span { display: none; align-items: center; min-height: 40px; padding: 8px 18px; border-radius: 999px; font-weight: 700; font-size: .9375rem; white-space: nowrap; box-shadow: 0 8px 24px #0b0a2040; }
.stack-swipe-mark [data-mark="next"] { background: #35304ef0; color: #ffecc4; }
.stack-swipe-mark [data-mark="keep"] { background: #ffabd0f2; color: #3a2140; }
.stack-swipe-mark [data-mark="hide"] { background: #252638f0; color: #e6dbe9; }
.stack-front[data-direction="next"] [data-mark="next"],
.stack-front[data-direction="keep"] [data-mark="keep"],
.stack-front[data-direction="hide"] [data-mark="hide"] { display: inline-flex; }
.stack-front[data-direction="hide"] { opacity: calc(1 - var(--stack-progress,0) * .25); }
.stack-front.stack-leaving { pointer-events: none; opacity: 0; transition: transform .2s ease-in, opacity .2s ease-in; }
.stack-front.stack-leaving-next { transform: translateX(-120%) rotate(-8deg); }
.stack-front.stack-leaving-keep { transform: translateX(120%) rotate(8deg); }
.stack-front.stack-leaving-hide { transform: translateY(35%) scale(.94); }

/* Footer: one row of actions; hint, Undo and errors float above it as overlays. */
.stack-footer { position: relative; flex: none; }
.stack-feedback { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 5; display: flex; justify-content: center; pointer-events: none; }
.stack-feedback > * { pointer-events: auto; max-width: 100%; }
.stack-feedback [hidden] { display: none !important; }
.stack-hint { margin: 0; padding: 7px 14px; border-radius: 999px; background: #161a35d9; border: 1px solid #ffffff1f; color: #e8d3ec; font-size: .8125rem; text-align: center; pointer-events: none; }
.stack-toast, .stack-error { display: flex; align-items: center; gap: 6px 10px; padding: 4px 6px 4px 16px; min-height: 48px; border-radius: 16px; box-shadow: 0 12px 32px #05071acc; font-size: .9375rem; }
.stack-toast { background: #2c2645f5; border: 1px solid #8b77a8; color: #fff1eb; }
.stack-toast button { min-height: 44px; padding: 8px 12px; border-radius: 12px; background: transparent; color: #ffdf76; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.stack-error { background: #4a2232f5; border: 1px solid #ff9fb3; color: #ffe8ee; }
.stack-error button { flex: none; width: 44px; height: 44px; border-radius: 12px; background: transparent; color: #ffe8ee; font-size: 16px; }
.stack-actions { display: flex; gap: 8px; }
.stack-actions button { flex: 1 1 auto; min-height: 52px; padding: 8px 10px; border-radius: 16px; font-size: .875rem; font-weight: 700; line-height: 1.15; }
.stack-actions [data-stack-hide] { background: transparent; border: 1px solid #ffffff29; color: #d8cbe0; font-weight: 600; }
.stack-actions [data-stack-keep] { flex-grow: 1.4; background: #ffabd0; border: 1px solid #ffabd0; color: #3a2140; box-shadow: 0 8px 22px #ff8fc226; }
.stack-actions [data-stack-next] { background: #35304e; border: 1px solid #71638e; color: #ffecc4; }
.stack-actions button:disabled { opacity: .35; box-shadow: none; }
.stack-close:focus-visible, .stack-actions button:focus-visible, .stack-feedback button:focus-visible, .stack-finished button:focus-visible { outline: 3px solid #ffe0a6; outline-offset: 3px; }

.stack-finished { text-align: center; padding: 28px; }
.stack-finished > span { font-size: 46px; color: #ffde7c; text-shadow: 0 0 24px #ffca7c; }
.stack-finished h2 { margin: 12px 0; }
.stack-finished p { max-width: 280px; margin: 0 auto; color: #c6b8cf; font-size: .9375rem; text-wrap: balance; }
.stack-finished button { margin-top: 18px; min-height: 48px; padding: 12px 22px; border-radius: 14px; background: #ffdf76; color: #2b2140; font-weight: 700; box-shadow: 0 8px 24px #ffcf5a24; }
.stack-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 360px) {
  .stack-shell { padding-left: max(12px,env(safe-area-inset-left)); padding-right: max(12px,env(safe-area-inset-right)); }
  .stack-actions { gap: 6px; }
  .stack-actions button { padding-inline: 8px; }
}
/* Landscape phones: give the post every pixel; the onboarding hint waits. */
@media (max-height: 520px) {
  .stack-shell { gap: 6px; }
  .stack-header { min-height: 44px; }
  .stack-front .tweet-card { height: calc(100% - 10px); --pad-top: 12px; padding-bottom: 10px; }
  .stack-front .tweet-text { padding-block: 8px; }
  .stack-hint { display: none; }
  .stack-actions button { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-front, .stack-front.stack-leaving { transition: none !important; }
  .stack-front.stack-leaving { transform: none !important; }
}