/* Home feed: composer and posts. Builds on .composer, .post and .action in urbanx.css. */

/* Composer */
.composer-top { align-items: flex-start; }
.composer textarea.composer-input { display: block; min-height: 42px; max-height: 320px; resize: none; overflow-y: auto; color: var(--ink); font: inherit; font-size: 12px; line-height: 1.5; outline: 0; }
.composer textarea.composer-input:focus { border-color: #9ccc4c; box-shadow: 0 0 0 3px #b9e85c33; }
.composer-attachments { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin: 12px 0 0 49px; }
.composer-attachments[hidden], .composer-photo[hidden], .composer-chip[hidden], .composer-error[hidden] { display: none; }
.composer-photo { position: relative; margin: 0; }
.composer-photo img { display: block; max-width: min(320px, 100%); max-height: 200px; border-radius: 12px; border: 1px solid var(--line); }
.composer-photo button { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #101918cc; color: #fff; font-size: 11px; }
.composer-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 11px; border-radius: 99px; background: var(--surface-2); font-size: 11px; font-weight: 700; }
.composer-chip button { width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--muted); font-size: 9px; }
.composer-error { margin: 10px 0 0 49px; font-size: 11px; color: var(--red); }
.composer-actions { gap: 12px; }
.composer-tools { align-items: center; flex-wrap: wrap; }
.composer-tool { display: inline-flex; align-items: center; gap: 5px; margin: -6px -8px; padding: 6px 8px; border-radius: 9px; color: var(--muted); font-size: 11px; cursor: pointer; list-style: none; user-select: none; }
.composer-tool::-webkit-details-marker { display: none; }
.composer-tool:hover, .composer-menu[open] > .composer-tool { background: var(--surface-2); color: var(--ink); }
.composer-tool.is-set { color: #5c8a26; font-weight: 800; }
label.composer-tool:has(input:focus-visible), summary.composer-tool:focus-visible { outline: 3px solid var(--brand); outline-offset: 1px; }
.composer-menu { position: relative; }
.composer-panel { position: absolute; left: -8px; top: calc(100% + 10px); z-index: 12; width: 290px; display: grid; gap: 10px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px #0002; }
.composer-panel label { display: grid; gap: 5px; color: var(--ink); font-size: 10px; font-weight: 800; }
.composer-panel select, .composer-panel input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 11px; font-weight: 500; }
.composer-panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.composer-panel .btn { justify-self: end; }
.composer-submit { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.composer-submit .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.feed-signed-out .composer-top { align-items: center; }

/* A composer that stands out from the posts below it: a lime-tinted card, a bright text box and colour-coded tools. */
.composer { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 10%, var(--surface)), var(--surface) 60%); box-shadow: 0 10px 30px color-mix(in srgb, var(--brand) 12%, transparent); }
.composer textarea.composer-input { padding: 13px 15px; border-color: color-mix(in srgb, var(--ink) 16%, transparent); background: var(--surface); font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.composer textarea.composer-input::placeholder { color: color-mix(in srgb, var(--ink) 58%, transparent); }
.composer textarea.composer-input:hover { border-color: color-mix(in srgb, var(--brand) 55%, transparent); }
.composer .composer-actions { flex-wrap: wrap; row-gap: 12px; }
.composer .composer-tools { flex-wrap: nowrap; gap: 6px; }
.composer .composer-submit .btn { white-space: nowrap; }
.composer .composer-tool { --tint: #4f9d2c; gap: 6px; margin: 0; padding: 7px 12px; border-radius: 99px; white-space: nowrap; background: color-mix(in srgb, var(--tint) 13%, transparent); color: var(--ink); font-size: 12px; font-weight: 700; transition: background .15s, transform .15s; }
.composer .tool-checkin { --tint: #e8603c; }
.composer .tool-activity { --tint: #2f8fdc; }
.composer .composer-tool .line-icon { width: 16px; height: 16px; color: var(--tint); stroke-width: 2.2; }
.composer .composer-tool:hover, .composer .composer-menu[open] > .composer-tool { background: color-mix(in srgb, var(--tint) 24%, transparent); color: var(--ink); transform: translateY(-1px); }
.composer .composer-tool.is-set { background: color-mix(in srgb, var(--tint) 28%, transparent); box-shadow: inset 0 0 0 1.5px var(--tint); color: var(--ink); font-weight: 800; }
[data-theme=dark] .composer .composer-tool { --tint: #7ed957; }
[data-theme=dark] .composer .tool-checkin { --tint: #ff8a65; }
[data-theme=dark] .composer .tool-activity { --tint: #5fb3ff; }
.composer-submit .btn[disabled] { opacity: .6; }
.feed-signed-out strong { display: block; font-size: 13px; }
.feed-signed-out small { color: var(--muted); font-size: 11px; }

/* Posts */
.post-did { color: var(--muted); font-size: 12px; }
.post-meta small a:hover { text-decoration: underline; }
.post-copy { overflow-wrap: anywhere; }
.post-copy a { color: #4f7d1f; text-decoration: underline; }
.post-activity { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 13px; background: color-mix(in srgb, var(--brand) 20%, var(--surface)); }
.post-copy + .post-activity { margin-top: 0; }
.post-activity-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); font-size: 21px; }
.post-activity strong { display: block; font-size: 12px; }
.post-activity small { color: var(--muted); font-size: 11px; font-weight: 700; }
.post-photo { display: block; margin-top: 12px; border-radius: 13px; overflow: hidden; background: var(--surface-2); }
.post-photo img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; }
/* A meetup on the feed: lime-tinted card with a bright date block (grey once cancelled) */
.post-meetup { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 14px; border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--brand) 9%, var(--surface)); transition: border-color .15s, box-shadow .15s; }
.post-meetup:hover { border-color: var(--brand); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 22%, transparent); }
.post-meetup .meet-date { flex: none; width: 54px; height: 58px; border-radius: 13px; background: var(--brand); color: var(--brand-ink); font-size: 10px; letter-spacing: .6px; box-shadow: 0 4px 12px color-mix(in srgb, var(--brand) 45%, transparent); }
.post-meetup .meet-date strong { font-size: 21px; line-height: 1.05; color: var(--brand-ink); }
.post-meetup .meet-text strong { font-size: 14px; white-space: normal; }
.post-meetup.is-cancelled { border-color: var(--line); background: var(--bg); box-shadow: none; }
.post-meetup.is-cancelled .meet-date { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.post-meetup.is-cancelled .meet-date strong { color: var(--muted); }
.post-meetup .meet-text small { display: block; margin-top: 3px; font-size: 11px; }
.post-actions form { margin: 0; }
/* Like, comment, share: slim green line icons (Lucide), bold labels, a green pill on hover; a liked heart fills in */
.post-actions { --action-green: #417b14; gap: 4px; padding-top: 10px; margin-left: -10px; }
[data-theme=dark] .post-actions { --action-green: #9ed65c; }
.post-actions .action { gap: 7px; padding: 8px 12px; border-radius: 99px; color: var(--ink); font-size: 12px; font-weight: 700; transition: background-color .15s, color .15s; }
.post-actions .line-icon { display: block; flex: none; width: 18px; height: 18px; color: var(--action-green); stroke-width: 1.6; transition: transform .15s, fill .15s; }
.post-actions .action:hover, .post-actions .action:focus-visible { background: color-mix(in srgb, var(--action-green) 12%, var(--surface)); outline: 0; }
.post-actions .action:hover .line-icon { transform: scale(1.08); }
.post-actions .action:focus-visible { box-shadow: 0 0 0 2px var(--action-green); }
.action-like.liked { color: var(--action-green); background: color-mix(in srgb, var(--action-green) 12%, var(--surface)); }
.action-like.liked .line-icon { fill: currentColor; }
.action-like.pop .line-icon { animation: like-pop .35s ease; }
@keyframes like-pop { 40% { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .action-like.pop .line-icon { animation: none; } }
.post-menu { position: relative; }
.post-menu > summary { list-style: none; cursor: pointer; }
.post-menu > summary::-webkit-details-marker { display: none; }
.post-menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; min-width: 160px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px #0002; }
.post-menu-panel form { margin: 0; }
.post-menu-panel button { width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--red); text-align: left; font-size: 12px; font-weight: 700; }
.post-menu-panel button:hover, .post-menu-panel button:focus-visible { background: var(--surface-2); outline: 0; }

/* Comments */
.post-comments { display: grid; gap: 9px; }
.post-comments:has(.comment, .comment-form:not([hidden]), .post-comments-more) { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.post-comments-more { color: var(--muted); font-size: 11px; font-weight: 700; }
.comment-list { display: grid; gap: 9px; }
.comment { display: flex; align-items: flex-start; gap: 8px; }
.comment .avatar, .comment-form .avatar { width: 28px; height: 28px; font-size: 9px; }
.comment-bubble { min-width: 0; padding: 8px 11px; border-radius: 4px 12px 12px 12px; background: var(--surface-2); font-size: 11px; }
.comment-time { color: var(--muted); font-size: 9px; }
.comment-bubble p { margin: 3px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.comment form { margin: 0; }
.comment-delete { padding: 4px; border: 0; background: none; color: var(--muted); font-size: 10px; visibility: hidden; }
.comment:hover .comment-delete, .comment-delete:focus-visible { visibility: visible; }
@media (hover: none) { .comment-delete { visibility: visible; } }
.comment-form { display: flex; align-items: center; gap: 8px; }
.comment-form[hidden] { display: none; }
.comment-form input { flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); color: var(--ink); font-size: 11px; outline: 0; }
.comment-form input:focus { border-color: #9ccc4c; }
.post-page { max-width: 720px; }

/* The home feed in Instagram's proportions: a 470 px column of posts beside a 320 px side column, centred together
   with the greeting above them. On narrower screens the side column gives way first; on phones it moves below. */
.feed-page { max-width: 838px; margin: 0 auto; }
.feed-page .feed-layout { grid-template-columns: minmax(0, 470px) 320px; gap: 48px; justify-content: center; }
@media (max-width: 1100px) { .feed-page .feed-layout { grid-template-columns: minmax(0, 470px) 250px; gap: 28px; } }
@media (max-width: 820px) {
  .feed-page { max-width: 470px; }
  .feed-page .feed-layout { grid-template-columns: 1fr; }
  .feed-page .feed-side { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .composer-attachments, .composer-error { margin-left: 0; }
  .composer-actions { flex-wrap: wrap; position: relative; }
  .composer-menu { position: static; }
  .composer-panel { left: 0; right: 0; width: auto; }
  .composer-submit { width: 100%; }
  .composer-submit .btn { flex: 1; }
}