/* Groups pages (/groups, /groups/new, /g/:slug). Header copied from videos.html; the rest is local to groups. */
:root { --v-bg:#f2f5fa; --v-panel:rgba(255,255,255,.86); --v-soft:rgba(226,233,246,.9); --v-soft2:rgba(226,233,246,.5); --v-line:rgba(60,85,140,.18); --v-line2:rgba(60,85,140,.12);
  --v-text:#0b1220; --v-text2:#3b4660; --v-muted:#5f6b86; --v-accent:#0e7490; --v-shadow:0 10px 40px rgba(20,40,80,.12); --v-on:#fff; --v-danger:#b91c1c }
[data-theme="dark"] { --v-bg:#070b16; --v-panel:rgba(12,18,36,.86); --v-soft:rgba(20,29,56,.9); --v-soft2:rgba(20,29,56,.5); --v-line:rgba(120,150,220,.18); --v-line2:rgba(120,150,220,.12);
  --v-text:#e8edf7; --v-text2:#c7d0e6; --v-muted:#8b97b5; --v-accent:#6ee7ff; --v-shadow:0 10px 40px rgba(0,0,0,.35); --v-on:#04121a; --v-danger:#f87171 }
* { box-sizing:border-box } html, body { margin:0; min-height:100%; background:var(--v-bg); color:var(--v-text); font:14px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing:antialiased }
a { color:var(--v-accent) } input:focus, button:focus, select:focus, textarea:focus { outline:none } [hidden] { display:none !important }
:focus-visible { outline:2px solid var(--v-accent) !important; outline-offset:2px }
.glass { background:var(--v-panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--v-line); border-radius:16px; box-shadow:var(--v-shadow) }
header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; padding:10px 16px; margin:12px; height:54px }
.sk-wordmark { font:800 21px/1 "Inter Tight", Inter, sans-serif; letter-spacing:-.02em; color:var(--v-text); text-decoration:none; white-space:nowrap } .sk-wordmark span { color:var(--v-accent) }
header nav { display:flex; gap:3px; background:var(--v-soft); border-radius:10px; padding:3px; white-space:nowrap }
header nav a { color:var(--v-muted); padding:5px 11px; font-weight:600; font-size:12.5px; border-radius:8px; text-decoration:none } header nav a.on { background:var(--v-accent); color:#fff } [data-theme="dark"] header nav a.on { color:#04121a }
.hspace { flex:1 }
.btn { background:var(--v-soft); color:var(--v-text); border:1px solid rgba(60,85,140,.22); border-radius:10px; padding:8px 13px; font:600 13px Inter, sans-serif; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px }
.btn:hover { border-color:rgba(14,116,144,.6) } .btn:disabled { opacity:.55; cursor:default }
.btn.primary { background:var(--v-accent); color:var(--v-on); border-color:transparent } .btn.primary:hover { filter:brightness(1.08) }
.btn.ghost { background:none; border-color:transparent; color:var(--v-muted) } .btn.ghost:hover { color:var(--v-text); background:var(--v-soft) }
.btn.danger { color:var(--v-danger) } .btn.sm { min-height:32px; padding:5px 10px; font-size:12.5px }
.ibtn { width:38px; height:38px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--v-soft); border:1px solid rgba(60,85,140,.22); color:var(--v-muted); cursor:pointer; flex:none } .ibtn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2 }

.wrap { max-width:1100px; margin:0 auto; padding:0 12px 60px }
.gwrap { max-width:1240px }   /* a group page carries two columns; the one-column pages stay at 1100 */
h1.page { font:800 30px/1.1 "Inter Tight", Inter, sans-serif; letter-spacing:-.02em; margin:0 }
.lede { color:var(--v-muted); margin:6px 0 0; font-size:14.5px }
.h { font:700 11px "Inter Tight", Inter, sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--v-muted); margin:0 0 8px }
.muted { color:var(--v-muted) } .small { font-size:12.5px }
.field { display:grid; gap:5px } .field > span { font-weight:600; font-size:13px } .field small { color:var(--v-muted); font-size:12px }
.input, select.input, textarea.input { width:100%; background:var(--v-soft); color:var(--v-text); border:1px solid var(--v-line); border-radius:10px; padding:9px 11px; font:14px Inter, sans-serif; min-height:40px }
.input:focus { border-color:rgba(14,116,144,.7); box-shadow:0 0 0 3px rgba(14,116,144,.14) }
textarea.input { resize:vertical; min-height:90px; line-height:1.45 }
.seg { display:flex; background:var(--v-soft); border-radius:10px; padding:3px; gap:3px; flex-wrap:wrap }
.seg button { flex:1; background:none; border:0; border-radius:8px; padding:7px 10px; font:600 12.5px Inter, sans-serif; color:var(--v-muted); cursor:pointer; min-height:34px; white-space:nowrap }
.seg button.on { background:rgba(14,116,144,.16); color:var(--v-accent) }
.chip { display:inline-flex; align-items:center; gap:5px; background:var(--v-soft2); border:1px solid var(--v-line2); color:var(--v-text2); border-radius:999px; padding:2px 9px; font-size:11.5px; font-weight:600; white-space:nowrap }
.chip.accent { color:var(--v-accent); border-color:rgba(14,116,144,.35) }
.err { color:var(--v-danger); font-size:13px } .ok { color:#15803d; font-size:13px } [data-theme="dark"] .ok { color:#4ade80 }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:90; background:var(--v-text); color:var(--v-bg); padding:10px 16px; border-radius:12px; font-weight:600; box-shadow:var(--v-shadow); max-width:calc(100vw - 32px) }
.empty { color:var(--v-muted); padding:28px 6px; text-align:center }

/* avatars: photo, or the first letter on a gradient like the profile gallery */
.av { border-radius:50%; object-fit:cover; background:linear-gradient(135deg, #0e7490, #a78bfa); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:800 14px "Inter Tight", Inter, sans-serif; flex:none; overflow:hidden }
.gav { border-radius:18px; object-fit:cover; background:linear-gradient(135deg, #2a5d93, #7fb0de); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:800 22px "Inter Tight", Inter, sans-serif; flex:none; overflow:hidden }
.cover { background:linear-gradient(160deg, rgba(8,14,28,.05), rgba(8,14,28,.45)), linear-gradient(135deg, #2a5d93 0%, #7fb0de 45%, #e8f1fa 100%); background-size:cover; background-position:center }

/* discover */
.disc { display:grid; grid-template-columns:260px minmax(0,1fr); gap:14px; align-items:start; margin-top:16px }
.rail { position:sticky; top:84px; padding:16px; display:grid; gap:16px }
.gcards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px }
.gcard { background:var(--v-panel); border:1px solid var(--v-line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:transform .15s, border-color .15s }
.gcard:hover { transform:translateY(-2px); border-color:rgba(14,116,144,.5) }
.gcard .cover { height:92px } .gcard .gb { padding:0 14px 14px; display:grid; gap:6px }
.gcard .gav { width:56px; height:56px; margin-top:-28px; border:3px solid var(--v-bg); font-size:20px; border-radius:14px }
.gcard h3 { margin:0; font:700 16px/1.25 "Inter Tight", Inter, sans-serif } .gcard p { margin:0; color:var(--v-text2); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.gcard .meta { display:flex; gap:5px; flex-wrap:wrap; align-items:center }
.mine { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin }
.mine a { display:flex; align-items:center; gap:9px; padding:8px 12px 8px 8px; border-radius:14px; background:var(--v-panel); border:1px solid var(--v-line); text-decoration:none; color:inherit; flex:none; min-height:48px }
.mine a b { font-weight:600; font-size:13.5px; white-space:nowrap } .mine .gav { width:34px; height:34px; border-radius:10px; font-size:14px }

/* create */
.form { padding:20px; display:grid; gap:16px; max-width:720px; margin:16px auto 0 }
.two { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.pickimg { display:flex; align-items:center; gap:12px }
.pickimg .prev { width:120px; height:60px; border-radius:10px; flex:none } .pickimg .prev.sq { width:60px }
.rsel { position:relative } .rpop { position:absolute; left:0; right:0; top:100%; z-index:10; margin-top:4px; background:var(--v-panel); backdrop-filter:blur(14px); border:1px solid var(--v-line); border-radius:12px; box-shadow:var(--v-shadow); padding:4px; max-height:260px; overflow:auto }
.rpop button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--v-text); padding:9px 10px; border-radius:8px; cursor:pointer; font:14px Inter, sans-serif; min-height:40px }
.rpop button:hover { background:var(--v-soft) }

/* group page */
.ghead { overflow:hidden; margin-top:4px; padding:0 }
.ghead .cover { height:clamp(140px, 18vw, 210px); position:relative }
.ghead .gi { display:flex; gap:16px; padding:0 20px 16px; align-items:flex-end; flex-wrap:wrap }
/* the avatar is pulled up over the cover, but .cover is position:relative and so paints above anything static —
   which hid the top half of the tile behind the photo. Give the avatar its own stacking position. */
.ghead .gav { width:108px; height:108px; margin-top:-54px; border:4px solid var(--v-bg); border-radius:24px; font-size:40px; position:relative; z-index:1 }
.ghead .gt { flex:1; min-width:220px; padding-top:10px }
.ghead h1 { font:800 28px/1.1 "Inter Tight", Inter, sans-serif; letter-spacing:-.02em; margin:0 0 6px; word-break:break-word }
.ghead .acts { display:flex; gap:8px; flex-wrap:wrap; padding-top:10px }
.tabs { display:flex; gap:4px; border-top:1px solid var(--v-line); padding:0 12px; overflow-x:auto; scrollbar-width:none }
.tabs button { background:none; border:0; border-bottom:2px solid transparent; color:var(--v-muted); font:600 14px Inter, sans-serif; padding:12px 14px; cursor:pointer; min-height:46px; white-space:nowrap }
.tabs button.on { color:var(--v-text); border-bottom-color:var(--v-accent) }
.tabs .pip { background:var(--v-accent); color:var(--v-on); border-radius:999px; font-size:11px; padding:0 6px; margin-left:5px }
.gbody { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; margin-top:14px; align-items:start }
/* the page width is chosen so these two tracks fill it exactly: a wider feed than ~820px makes a line of text
   tiring to read, and anything left over belongs in the page margin, not in a gutter between the columns */
.side { display:grid; gap:14px } .side .glass { padding:16px }
.card { padding:16px }
.stack { display:grid; gap:14px; align-content:start }
.gbody { min-height:min(52vh, 460px) }   /* a one-post group should not end halfway up the window */

.composer { padding:14px; display:grid; gap:10px }
.composer .row { display:flex; gap:10px; align-items:flex-start }
.composer textarea { min-height:70px }
.thumbs { display:flex; gap:8px; flex-wrap:wrap } .thumbs .t { position:relative; width:76px; height:76px; border-radius:10px; overflow:hidden; background:var(--v-soft) }
.thumbs .t img { width:100%; height:100%; object-fit:cover; display:block } .thumbs .t button { position:absolute; top:3px; right:3px; width:26px; height:26px; border-radius:50%; border:0; background:rgba(8,14,28,.7); color:#fff; cursor:pointer }
.thumbs .t.busy::after { content:""; position:absolute; inset:0; background:rgba(8,14,28,.45) }

.post { padding:0; overflow:hidden }
.post .ph { display:flex; gap:10px; align-items:center; padding:14px 14px 0 }
.post .ph .nm { flex:1; min-width:0 } .post .ph .nm a { color:var(--v-text); font-weight:700; text-decoration:none } .post .ph .nm span { display:block; color:var(--v-muted); font-size:12px }
.post .pb { padding:10px 14px 0; white-space:pre-wrap; word-wrap:break-word; font-size:14.5px; line-height:1.5 }
.post .pins { color:var(--v-accent); font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px 0 }
.photos { display:grid; gap:3px; margin-top:10px } .photos img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; background:var(--v-soft) }
.photos.n1 img { max-height:560px; height:auto } .photos.n2 { grid-template-columns:1fr 1fr } .photos.n2 img { aspect-ratio:1 }
.photos.n3 { grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr } .photos.n3 img:first-child { grid-row:span 2 } .photos.n3 { aspect-ratio:3/2 }
.photos.n4 { grid-template-columns:1fr 1fr } .photos.n4 img { aspect-ratio:4/3 }
.post .pa { display:flex; gap:4px; padding:6px 8px; border-top:1px solid var(--v-line2); margin-top:10px }
.post .pa button { background:none; border:0; color:var(--v-muted); font:600 13px Inter, sans-serif; padding:6px 10px; border-radius:8px; cursor:pointer; min-height:40px; display:inline-flex; gap:6px; align-items:center }
.post .pa button:hover { background:var(--v-soft); color:var(--v-text) } .post .pa button.on { color:#e11d48 } .post .pa svg { width:18px; height:18px }
.post .pa .sp { flex:1 }
.cmts { padding:0 14px 12px; display:grid; gap:10px }
.cmt { display:flex; gap:9px; align-items:flex-start } .cmt .cb { flex:1; min-width:0; background:var(--v-soft2); border-radius:12px; padding:7px 11px; word-wrap:break-word; white-space:pre-wrap }
.cmt .cb a { color:var(--v-text); font-weight:700; text-decoration:none } .cmt .when { color:var(--v-muted); font-size:11.5px; margin-left:4px }
.cmt .rm { background:none; border:0; color:var(--v-muted); cursor:pointer; min-height:32px; font-size:12px }
.addc { display:flex; gap:8px; padding:0 14px 14px } .addc input { flex:1; min-width:0 }
.more-c { background:none; border:0; color:var(--v-muted); font:600 12.5px Inter, sans-serif; cursor:pointer; text-align:left; padding:0; min-height:32px }
.menu { position:relative } .menu .pop { position:absolute; right:0; top:100%; z-index:15; background:var(--v-panel); backdrop-filter:blur(14px); border:1px solid var(--v-line); border-radius:12px; box-shadow:var(--v-shadow); padding:4px; min-width:170px }
.menu .pop button { display:block; width:100%; text-align:left; background:none; border:0; color:var(--v-text); padding:9px 11px; border-radius:8px; font:14px Inter, sans-serif; cursor:pointer; min-height:40px } .menu .pop button:hover { background:var(--v-soft) }

.event { padding:14px; display:grid; gap:10px }
.event .eh { display:flex; gap:12px; align-items:flex-start }
.date { width:54px; flex:none; border-radius:12px; overflow:hidden; text-align:center; border:1px solid var(--v-line); background:var(--v-panel) }
.date b { display:block; background:var(--v-accent); color:var(--v-on); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:2px 0 } .date span { display:block; font:800 22px/1.3 "Inter Tight", Inter, sans-serif }
.event h3 { margin:0; font:700 17px/1.25 "Inter Tight", Inter, sans-serif } .event .em { color:var(--v-muted); font-size:13px }
.event .det { white-space:pre-wrap; color:var(--v-text2) }
.faces { display:flex; align-items:center } .faces .av { width:30px; height:30px; margin-right:-8px; border:2px solid var(--v-bg); font-size:12px }
.rsvp { display:flex; gap:6px; flex-wrap:wrap }
.rsvp button.on { background:rgba(14,116,144,.16); color:var(--v-accent); border-color:rgba(14,116,144,.55) }

.mrow { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--v-line2) } .mrow:last-child { border-bottom:0 }
.mrow .nm { flex:1; min-width:0 } .mrow .nm a { color:var(--v-text); font-weight:600; text-decoration:none } .mrow .nm span { display:block; color:var(--v-muted); font-size:12px }
.mrow .ma { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end }

.modal { position:fixed; inset:0; z-index:70; background:rgba(8,14,28,.55); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:16px }
.modal .win { width:min(620px, 100%); max-height:92vh; overflow:auto; padding:20px; display:grid; gap:14px; background:var(--v-bg); border:1px solid var(--v-line); border-radius:18px; box-shadow:var(--v-shadow) }
.modal .win h2 { margin:0; font:800 20px "Inter Tight", Inter, sans-serif }
.modal .foot { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap }
.lightbox { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; cursor:zoom-out } .lightbox img { max-width:96vw; max-height:94vh; object-fit:contain }
.locked { padding:28px 20px; text-align:center; display:grid; gap:10px; justify-items:center }
.locked svg { width:34px; height:34px; stroke:var(--v-muted); fill:none; stroke-width:1.8 }

@media (max-width:900px) { .disc, .gbody { grid-template-columns:1fr } .rail { position:static } }
@media (max-width:720px) {
  header { margin:8px; }
  .wrap { padding:0 10px 60px }
  h1.page { font-size:24px }
  .two { grid-template-columns:1fr }
  .gcards { grid-template-columns:1fr }
  .ghead .gi { padding:0 14px 14px; gap:10px }
  .ghead .gav { width:84px; height:84px; margin-top:-42px; font-size:32px; border-radius:20px }
  .ghead h1 { font-size:23px }
  .ghead .acts { width:100% } .ghead .acts .btn { flex:1 }
  .btn, .ibtn { min-height:40px } .ibtn { min-width:40px }
  .input, select.input, textarea.input, input, select, textarea { font-size:16px }
  .post .pa button { min-height:44px }
  .modal { align-items:flex-end; padding:0 } .modal .win { border-radius:18px 18px 0 0; max-height:90vh; padding-bottom:calc(20px + env(safe-area-inset-bottom)) }
  .mrow { flex-wrap:wrap } .mrow .ma { width:100%; justify-content:flex-start; padding-left:50px }
}
/* narrow phones: the header holds menu, wordmark, account, chat, bell and theme; the account link is also in the menu */
@media (max-width:480px) { header { margin:6px; padding:8px !important } header .hspace { display:none } #acct { max-width:92px; overflow:hidden; text-overflow:ellipsis; display:inline-block; padding:8px 9px; line-height:22px } }
@media (max-width:420px) { #acct { display:none } }

/* composer footer: the photo hint belongs to the photo button, not to the gap in the middle of the row */
.composer .crow { display:flex; gap:8px; align-items:center }
.composer .crow #c-note { margin-left:-2px }
.composer .crow .sp { flex:1 }

/* the "Older posts" wrapper is always in the DOM and usually holds a hidden button, which left a stray grid gap
   between the last post and the sidebar once the two columns stack on a phone */
.morerow { display:flex; justify-content:center }
.morerow:has(> button[hidden]) { display:none }