/* /tweets — Phase 21 rewrite. Markup: Views/Tweets/Index.cshtml. Scoped under .tw-page. */
.tw-page { --tw-ac: hsl(199 89% 52%); --tw-ac2: hsl(250 80% 64%); position: relative; isolation: isolate; color: var(--ds-text); padding-bottom: 2.5rem; }
.tw-page svg:not(.icon) { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tw-wrap { max-width: 1120px; }

.tw-hero { position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; margin-top: .5rem;
  padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--ds-r-xl); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-1);
  background: radial-gradient(480px 240px at 100% 0%, color-mix(in srgb, var(--tw-ac) 15%, transparent), transparent 70%),
              radial-gradient(420px 220px at 0% 100%, color-mix(in srgb, var(--tw-ac2) 13%, transparent), transparent 70%), var(--ds-surface-1); }
.tw-hero__txt { min-width: 0; }
.tw-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .8rem; border-radius: var(--ds-r-pill); font-size: .76rem; font-weight: 800;
  color: var(--tw-ac); background: color-mix(in srgb, var(--tw-ac) 12%, transparent); border: 1px solid color-mix(in srgb, var(--tw-ac) 28%, transparent); }
.tw-eyebrow svg { width: 15px; height: 15px; }
.tw-title { margin: .7rem 0 .45rem; font-size: clamp(1.55rem, 3.4vw, 2.3rem); font-weight: 900; line-height: 1.35; }
.tw-lead { margin: 0; max-width: 58ch; color: var(--ds-text-2); line-height: 2; font-size: .93rem; }
.tw-active { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tw-pill { display: inline-flex; gap: .3rem; padding: .35rem .75rem; border-radius: var(--ds-r-pill); background: var(--ds-surface-2); border: 1px solid var(--ds-line); font-size: .82rem; color: var(--ds-text-2); }
.tw-pill b { color: var(--ds-text); }
.tw-clear { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 800; color: var(--ds-link, var(--tw-ac)); text-decoration: none; }
.tw-clear svg { width: 14px; height: 14px; }
.tw-hero__act { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.tw-guest { margin: 0; font-size: .82rem; color: var(--ds-text-2); }
.tw-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 46px; padding: .55rem 1.15rem; border-radius: var(--ds-r-md); font: inherit; font-weight: 800; font-size: .9rem;
  text-decoration: none; white-space: nowrap; cursor: pointer; color: var(--ds-text); background: var(--ds-surface-1); border: 1px solid var(--ds-line);
  transition: transform .15s var(--ds-ease), border-color .15s, box-shadow .15s; }
.tw-btn .icon { width: 1em; height: 1em; }
.tw-btn:hover { transform: translateY(-1px); color: var(--ds-text); border-color: color-mix(in srgb, var(--tw-ac) 50%, transparent); }
.tw-btn--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, hsl(199 89% 42%), hsl(222 84% 56%)); box-shadow: 0 12px 24px -12px hsl(199 89% 48% / .9); }
.tw-btn--pri:hover { color: #fff; }
.tw-btn:focus-visible { outline: 2px solid var(--ds-focus, var(--tw-ac)); outline-offset: 2px; }
.tw-btn[aria-expanded="true"] .disclosure-caret { transform: rotate(180deg); }
.tw-compose { grid-column: 1 / -1; }
.tw-compose.is-open { margin-top: .25rem; }

.tw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; margin-top: 1.25rem; }
.tw-feed { min-width: 0; position: relative; }
.tw-bar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tw-bar__h { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 900; font-size: 1rem; }
.tw-bar__h svg { width: 18px; height: 18px; color: var(--tw-ac); }
.tw-list > div { display: flex; flex-direction: column; gap: 1rem; }
.tw-list > div > * { margin: 0 !important; max-width: none !important; }
.tw-loader { position: absolute; inset-inline: 0; top: 4rem; z-index: 50; display: flex; justify-content: center; }
.tw-loader.hidden { display: none; }
.tw-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--tw-ac) 25%, transparent); border-top-color: var(--tw-ac); animation: tw-spin .8s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }

.tw-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 1rem; }
.tw-card { padding: 1.1rem 1.15rem; border-radius: var(--ds-r-xl); background: var(--ds-surface-1); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-1); }
.tw-h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; font-size: .95rem; font-weight: 900; }
.tw-h2 svg { width: 18px; height: 18px; color: var(--tw-ac); }
.tw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.tw-rules li { position: relative; padding-inline-start: 1rem; font-size: .82rem; line-height: 1.9; color: var(--ds-text-2); }
.tw-rules li::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: 6px; height: 6px; border-radius: 2px; background: var(--tw-ac); }
.tw-more { display: inline-block; margin-top: .7rem; font-size: .8rem; font-weight: 800; color: var(--ds-link, var(--tw-ac)); text-decoration: none; }
.tw-more:hover { text-decoration: underline; }
.tw-tools { display: flex; flex-direction: column; gap: .4rem; }
.tw-page .tw-tools a { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: var(--ds-r-md); text-decoration: none; color: var(--ds-text); border: 1px solid transparent; transition: background-color .15s, border-color .15s; }
.tw-page .tw-tools a:hover { background: var(--ds-surface-2); border-color: var(--ds-line); }
.tw-ti { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: var(--ds-r-md); color: var(--tw-ac); background: color-mix(in srgb, var(--tw-ac) 12%, transparent); flex: none; }
.tw-ti svg { width: 19px; height: 19px; }
.tw-tools b { display: block; font-size: .86rem; font-weight: 800; }
.tw-tools small { display: block; font-size: .74rem; color: var(--ds-text-2); }

@media (max-width: 1023px) {
  .tw-layout { grid-template-columns: 1fr; }
  .tw-side { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .tw-hero { grid-template-columns: 1fr; }
  .tw-hero__act { align-items: stretch; }
  .tw-btns .tw-btn, #tweet-btn-container .tw-btn { flex: 1; width: 100%; }
  .tw-side { grid-template-columns: 1fr; }
}