/* POSTS-2: the post page, feed cards as links, the photo picker, allowlisted links. Uses the site tokens; no inline styles. */
.account__wrap:has([data-post-page]) { width: min(100% - 2 * var(--s5), 760px); }
.post-page { display: grid; gap: var(--s3); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--s5); }
.post-page__scope { color: var(--ink-3); font-size: var(--fs-sm); font-weight: 650; text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.post-page__title { margin: 0; overflow-wrap: anywhere; }
.post-page__meta, .post-reply__meta { color: var(--ink-2); font-size: var(--fs-sm); margin: 0; }
.post-page__meta a, .post-reply__meta a { color: inherit; }
.post-page__edited, .post-reply__meta [data-post-edited] { font-style: italic; }
.post-page__context { margin: 0; font-size: var(--fs-sm); }
.post-page__body, .post-reply__body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.post-page__actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin: 0; }
.post-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.post-gallery li { aspect-ratio: 4 / 3; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.post-gallery__link, .post-gallery img { display: block; width: 100%; height: 100%; }
.post-gallery img { object-fit: cover; }
.post-gallery__link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.post-replies { display: grid; gap: var(--s3); }
.post-replies h2 { font-size: var(--fs-lg); margin: 0; }
.post-replies__count { color: var(--ink-3); font-weight: 500; font-size: var(--fs-md); }
.post-replies__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.post-reply, .post-reply--none { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s4); display: grid; gap: var(--s2); }
.post-reply--none { color: var(--ink-3); }
.post-reply--deleted { background: transparent; border-style: dashed; color: var(--ink-3); }
.post-reply__deleted { margin: 0; font-style: italic; }
.post-reply:target { box-shadow: var(--focus); }
.post-reply-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); display: grid; gap: var(--s3); }
.post-reply-box h2 { font-size: var(--fs-lg); margin: 0; }
.post-reply-box textarea, .account-form textarea { width: 100%; min-height: 6rem; padding: var(--s3); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: inherit; background: #fff; }
.post-reply-box textarea:focus-visible, .account-form textarea:focus-visible { outline: none; box-shadow: var(--focus); }
.post-history { border-top: 1px solid var(--line); padding-top: var(--s3); font-size: var(--fs-sm); }
.post-history ol, .mod-history ol { margin: var(--s2) 0 0; padding-left: 1.2rem; display: grid; gap: var(--s2); }
.mod-history { margin: var(--s2) 0; font-size: var(--fs-sm); }
.ugc-domain { color: var(--ink-3); font-size: .9em; }
.ugc-link, [data-ugc-link] { color: var(--accent); text-decoration: underline; overflow-wrap: anywhere; position: relative; z-index: 2; }

/* Feed cards: the whole card is one link. */
li.vibe-item.vibe-item--resident { position: relative; padding: 0; overflow: visible; }
li.vibe-item--resident > .resident-card__link { border-radius: var(--radius-sm); }
.resident-card__link { display: grid; gap: var(--s2); color: inherit; text-decoration: none; padding: var(--s4); border-radius: var(--radius); }
.resident-card__link:hover .resident-card__title { text-decoration: underline; }
.resident-card__link:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.resident-card__title { font-size: var(--fs-md); overflow-wrap: anywhere; }
.resident-card__photo { display: block; aspect-ratio: 4 / 3; max-width: 480px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.resident-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.resident-post--linked { position: relative; }
.resident-post__open { color: inherit; text-decoration: none; }
.resident-post__open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.resident-post--linked:hover .resident-post__open { text-decoration: underline; }
.resident-post--linked:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.resident-post--linked .resident-post__open:focus-visible { outline: none; }
.resident-post--linked .resident-post__actions, .resident-post--linked .resident-report { position: relative; z-index: 2; }
.resident-post__replies { color: var(--ink-3); font-size: var(--fs-sm); margin: 0; }

/* Photo picker (composer, reply box, edit page) */
.photo-picker { border: 1px dashed var(--line-2); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); display: grid; gap: var(--s2); margin: 0; }
.photo-picker[hidden] { display: none; }
.photo-picker__input--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo-picker__add { justify-self: start; min-height: 44px; }
.photo-picker__status--error { color: var(--red); font-weight: 600; }
.photo-picker__list, .photo-existing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.photo-picker__item, .photo-existing { display: grid; gap: var(--s2); grid-template-columns: 96px 1fr; align-items: start; }
.photo-picker__item img, .photo-existing img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); grid-row: span 2; background: var(--line); }
.photo-picker__item .btn { justify-self: start; }
.lightbox { padding: var(--s3); max-width: min(96vw, 1200px); border: 0; border-radius: var(--radius); background: #111; }
.lightbox::backdrop { background: rgba(0, 0, 0, .8); }
.lightbox__img { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto var(--s3); }
@media (max-width: 480px) { .post-page, .post-reply-box { padding: var(--s4); } .post-gallery { grid-template-columns: minmax(0, 1fr); } .photo-picker__item, .photo-existing { grid-template-columns: 72px 1fr; } .photo-picker__item img, .photo-existing img { width: 72px; height: 54px; } }