/* Mosaic Houses — community spaces. Uses the theme variables defined in
   host/index.html (--ink, --muted, --faint, --line, --white, --cream, --blue,
   --blue-bg, --danger), so light and dark mode follow the rest of the app. */

/* ---------- sidebar ---------- */
.sidebar .sb-nav { flex:0 0 auto; }
#sbSpaces { flex:1; min-height:0; overflow-y:auto; margin-top:14px; }
.sb-section-label { display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); padding:10px 12px 6px; }
button.sb-fold { width:100%; background:none; border:none; text-align:left; cursor:pointer; border-radius:8px; }
button.sb-fold:hover { color:var(--ink); }
.sb-fold .chev { font-size:10px; }
.sb-section-label button { background:none; border:none; color:var(--faint); font-size:16px; line-height:1; padding:0 2px; border-radius:6px; }
.sb-section-label button:hover { color:var(--ink); }
.sb-space-emoji { width:18px; flex:0 0 18px; text-align:center; font-size:15px; line-height:1; }
.sb-nav button.sb-space-btn .nav-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-count { min-width:20px; height:20px; padding:0 6px; border-radius:999px; border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.sb-nav button.active .sb-count { border-color:var(--blue); color:var(--blue); }
#appView.sb-collapsed .sb-section-label, #appView.sb-collapsed .sb-count { display:none; }
#appView.sb-collapsed #sbSpaces { margin-top:6px; }
@media (max-width:760px) {
  #sbSpaces { flex:0 0 auto; margin-top:0; overflow:visible; display:flex; }
  #sbSpaces .sb-section-label { display:none; }
  #sbSpaces .sb-nav { flex-direction:row; }
}

/* ---------- shared bits ---------- */
.sp-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:10px; padding:8px 14px; font-size:13px; font-weight:600; }
.sp-btn:hover { background:var(--cream); }
.sp-btn.primary { background:var(--ink); border-color:var(--ink); color:var(--white); }
.sp-btn.primary:hover { opacity:.88; background:var(--ink); }
.sp-btn.primary:disabled { opacity:.35; cursor:not-allowed; }
.sp-btn.icon { padding:8px; }
.sp-btn.blue { background:var(--blue); border-color:var(--blue); color:#fff; }
.sp-icon-btn { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; border-radius:8px; color:var(--muted); }
.sp-icon-btn:hover { background:rgba(0,0,0,.06); color:var(--ink); }
.sp-icon-btn.on { color:var(--blue); background:var(--blue-bg); }
.sp-badge { display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:2px 8px; border-radius:6px; background:var(--ink); color:var(--white); }
.sp-badge.pastor { background:#5B2B9A; color:#fff; }
.sp-badge.leader { background:var(--blue-bg); color:var(--blue); }
.sp-muted { color:var(--muted); }
.sp-card { background:var(--white); border:1px solid var(--line); border-radius:16px; }
.sp-avatar { width:38px; height:38px; flex:0 0 38px; border-radius:999px; background:var(--blue-bg); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; overflow:hidden; }
.sp-avatar img { width:100%; height:100%; object-fit:cover; }
.sp-avatar.sm { width:28px; height:28px; flex-basis:28px; font-size:11px; }
.sp-stack { display:flex; }
.sp-stack .sp-avatar { width:30px; height:30px; flex-basis:30px; font-size:11px; border:2px solid var(--white); margin-left:-8px; }
.sp-stack .sp-avatar:first-child { margin-left:0; }
.sp-error { background:#FDECEC; color:#A3201B; font-size:13px; padding:10px 12px; border-radius:10px; margin:10px 0; }
.sp-toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:var(--white); padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,.2); }

/* ---------- space page ---------- */
.sp-head { padding:22px 26px 16px; margin-bottom:18px; overflow:hidden; }
.sp-head.has-banner { padding-top:0; }
.sp-banner { display:block; width:calc(100% + 52px); margin:0 -26px 18px; aspect-ratio:3.2/1; object-fit:cover; background:var(--cream); }
.sp-head-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sp-head h1 { font-size:clamp(22px,2.6vw,28px); font-weight:700; letter-spacing:-.01em; flex:1; min-width:200px; display:flex; align-items:center; gap:10px; }
.sp-head .sp-desc { color:var(--muted); font-size:14px; margin-top:8px; padding-top:12px; border-top:1px solid var(--line); }
.sp-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.sp-side .sp-card { padding:18px 20px; margin-bottom:16px; }
.sp-side h4 { font-size:14px; margin-bottom:10px; }
.sp-pin-item { display:flex; gap:10px; align-items:flex-start; padding:8px 0; background:none; border:none; text-align:left; width:100%; color:var(--ink); }
.sp-pin-item .t { font-size:13.5px; font-weight:600; }
.sp-pin-item .s { font-size:12px; color:var(--muted); }
@media (max-width:980px) { .sp-layout { grid-template-columns:1fr; } .sp-side { order:-1; } }

.sp-start { display:flex; align-items:center; gap:12px; padding:14px 18px; margin-bottom:18px; cursor:text; }
.sp-start .ph { flex:1; color:var(--muted); font-size:14.5px; }
.sp-join-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; margin-bottom:18px; }

.sp-post { padding:22px 26px; margin-bottom:18px; }
.sp-post-top { display:flex; align-items:flex-start; gap:10px; }
.sp-post-title { flex:1; font-size:21px; font-weight:800; letter-spacing:-.01em; line-height:1.25; }
.sp-pinned-tag { font-size:11px; font-weight:700; color:var(--blue); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.sp-author { display:flex; align-items:center; gap:12px; margin:12px 0 14px; }
.sp-author .n { font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sp-author .m { font-size:12.5px; color:var(--muted); margin-top:2px; }
.sp-cover { width:100%; border-radius:12px; margin:4px 0 14px; display:block; max-height:420px; object-fit:cover; background:var(--cream); }
.sp-body { font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.sp-body.clamped { max-height:220px; overflow:hidden; -webkit-mask-image:linear-gradient(#000 70%, transparent); mask-image:linear-gradient(#000 70%, transparent); }
.sp-body p { margin:0 0 10px; }
.sp-body h2 { font-size:19px; margin:16px 0 8px; }
.sp-body h3 { font-size:16px; margin:14px 0 6px; }
.sp-body ul, .sp-body ol { margin:0 0 10px 22px; }
.sp-body li { margin:3px 0; }
.sp-body blockquote { border-left:3px solid var(--line); padding:2px 0 2px 14px; color:var(--muted); margin:0 0 10px; }
.sp-body pre { background:var(--cream); border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:13px; overflow-x:auto; white-space:pre-wrap; margin:0 0 10px; }
.sp-body hr { border:none; border-top:1px solid var(--line); margin:14px 0; }
.sp-body a { color:var(--blue); text-decoration:none; }
.sp-body a:hover { text-decoration:underline; }
.sp-body a[data-space-link] { font-weight:600; }
.sp-more { background:none; border:none; color:var(--muted); font-size:14px; padding:6px 0 0; }
.sp-more:hover { color:var(--ink); }

.sp-media { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin:12px 0 4px; }
.sp-media img { width:100%; height:180px; object-fit:cover; border-radius:10px; display:block; background:var(--cream); }
.sp-video { width:100%; border-radius:12px; margin:12px 0 4px; background:#000; display:block; max-height:460px; }
.sp-embed { position:relative; width:100%; padding-top:56.25%; margin:12px 0 4px; border-radius:12px; overflow:hidden; background:#000; }
.sp-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.sp-files { display:flex; flex-direction:column; gap:6px; margin:12px 0 4px; }
.sp-file { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); font-size:13.5px; background:var(--white); }
.sp-file:hover { background:var(--cream); }
.sp-file .sz { margin-left:auto; color:var(--faint); font-size:12px; }

.sp-poll { border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:12px 0 4px; }
.sp-poll .q { font-weight:700; font-size:15px; margin-bottom:10px; }
.sp-poll-opt { position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:10px; padding:10px 12px; margin-bottom:8px; font-size:14px; overflow:hidden; }
.sp-poll-opt:not(:disabled):hover { border-color:var(--blue); }
.sp-poll-opt .bar { position:absolute; inset:0 auto 0 0; background:var(--blue-bg); z-index:0; }
.sp-poll-opt span { position:relative; z-index:1; }
.sp-poll-opt.mine { border-color:var(--blue); font-weight:600; }
.sp-poll .meta { font-size:12.5px; color:var(--muted); }

.sp-actions { display:flex; align-items:center; gap:4px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.sp-act { display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:7px 10px; border-radius:8px; color:var(--muted); font-size:13.5px; font-weight:600; }
.sp-act:hover { background:rgba(0,0,0,.05); color:var(--ink); }
.sp-act.on { color:var(--blue); }
.sp-comments { margin-top:12px; }
.sp-comment { display:flex; gap:10px; padding:8px 0; }
.sp-comment .bubble { background:var(--cream); border-radius:12px; padding:8px 12px; flex:1; min-width:0; }
.sp-comment .who { font-size:13px; font-weight:600; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.sp-comment .who .t { font-weight:400; color:var(--faint); font-size:12px; }
.sp-comment .txt { font-size:14px; margin-top:2px; white-space:pre-wrap; overflow-wrap:anywhere; }
.sp-comment .del { background:none; border:none; color:var(--faint); font-size:12px; margin-left:auto; }
.sp-comment-form { display:flex; gap:8px; align-items:flex-end; margin-top:8px; }
.sp-comment-form textarea { flex:1; resize:none; min-height:40px; max-height:160px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; background:var(--white); color:var(--ink); }
.sp-comment-form textarea:focus { outline:2px solid var(--blue); outline-offset:0; }

.sp-menu { position:fixed; z-index:150; min-width:190px; background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.16); padding:6px; }
.sp-menu button { width:100%; display:flex; align-items:center; gap:10px; background:none; border:none; padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--ink); text-align:left; }
.sp-menu button:hover, .sp-menu button.active { background:var(--cream); }
.sp-menu button.danger { color:#B42318; }
.sp-menu .lbl { font-size:11.5px; color:var(--muted); padding:8px 10px 4px; }
.sp-menu input { width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; font-size:13.5px; margin-bottom:4px; background:var(--white); color:var(--ink); }
.sp-menu .scroll { max-height:300px; overflow-y:auto; }

.sp-empty { text-align:center; padding:46px 24px; color:var(--muted); font-size:14px; }
.sp-empty .big { font-size:34px; margin-bottom:8px; }
.sp-empty h3 { color:var(--ink); font-size:17px; margin-bottom:6px; }

/* ---------- browse spaces (Host Hub) ---------- */
.sp-browse { margin-bottom:28px; }
.sp-browse-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.sp-browse-head h3 { font-size:17px; }
.sp-browse-sec { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:16px 0 8px; }
.sp-browse-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.sp-space-card { padding:16px 18px; display:flex; flex-direction:column; gap:8px; text-align:left; }
.sp-space-card .nm { font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; }
.sp-space-card .ds { font-size:13px; color:var(--muted); flex:1; }
.sp-space-card .ft { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--faint); }

/* ---------- library ---------- */
.sp-lib-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.sp-lib-item { padding:18px 20px; }
.sp-lib-item h4 { font-size:15px; margin-bottom:4px; }
.sp-lib-item .how { font-size:13px; color:var(--muted); margin-bottom:10px; }
.sp-lib-item .copy { background:var(--cream); border-radius:10px; padding:10px 12px; font-size:13px; white-space:pre-wrap; margin-bottom:10px; max-height:160px; overflow:auto; }

/* ---------- composer ---------- */
.overlay.sp-top { justify-content:center; align-items:flex-start; padding:7vh 16px 24px; }
.panel.sp-composer { background:var(--white); width:min(840px,100%); height:auto; max-height:86vh; border-radius:18px; padding:0; display:flex; flex-direction:column; overflow:visible; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.panel.sp-composer.expanded { width:min(1200px,100%); height:88vh; max-height:none; }
.sp-c-head { display:flex; align-items:center; gap:10px; padding:20px 26px 14px; border-bottom:1px solid var(--line); }
.sp-c-head h2 { flex:1; font-size:19px; font-weight:800; }
.sp-c-body { flex:1; min-height:0; overflow-y:auto; padding:16px 26px; position:relative; }
.sp-c-cover { position:relative; margin-bottom:12px; }
.sp-c-cover img { width:100%; max-height:220px; object-fit:cover; border-radius:12px; display:block; }
.sp-c-cover button { position:absolute; top:8px; right:8px; }
.sp-c-title { width:100%; border:none; outline:none; font:inherit; font-size:24px; font-weight:800; color:var(--ink); background:none; padding:6px 0; }
.sp-c-title::placeholder { color:var(--faint); }
.sp-editor { min-height:200px; outline:none; font-size:15px; line-height:1.6; padding:8px 0 20px; color:var(--ink); }
.panel.sp-composer.expanded .sp-editor { min-height:50vh; }
.sp-editor:empty::before { content:attr(data-placeholder); color:var(--faint); pointer-events:none; }
.sp-editor p { margin:0 0 8px; }
.sp-editor h2 { font-size:20px; margin:12px 0 6px; } .sp-editor h3 { font-size:17px; margin:10px 0 6px; }
.sp-editor ul, .sp-editor ol { margin:0 0 8px 22px; }
.sp-editor blockquote { border-left:3px solid var(--line); padding-left:14px; color:var(--muted); margin:0 0 8px; }
.sp-editor pre { background:var(--cream); border-radius:8px; padding:10px 12px; font-size:13px; white-space:pre-wrap; }
.sp-editor hr { border:none; border-top:1px solid var(--line); margin:12px 0; }
.sp-editor a { color:var(--blue); font-weight:600; text-decoration:none; }
.sp-c-attach { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.sp-chip { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 12px; font-size:12.5px; max-width:100%; background:var(--white); }
.sp-chip .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.sp-chip button { background:none; border:none; color:var(--faint); font-size:15px; line-height:1; }
.sp-c-poll { border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:10px; display:flex; align-items:center; gap:10px; font-size:13.5px; }
.sp-c-poll .q { flex:1; font-weight:600; }
.sp-c-tools { display:flex; align-items:center; gap:2px; padding:8px 20px; border-top:1px solid var(--line); flex-wrap:wrap; }
.sp-c-foot { display:flex; align-items:center; gap:10px; padding:14px 26px; border-top:1px solid var(--line); background:var(--cream); border-radius:0 0 18px 18px; }
.sp-c-foot .posting { flex:1; font-size:13.5px; color:var(--muted); }
.sp-c-foot .posting button { background:none; border:none; font:inherit; font-weight:700; color:var(--ink); padding:2px 4px; border-radius:6px; }
.sp-c-foot .posting button:hover { background:rgba(0,0,0,.05); }
.sp-c-err { color:#B42318; font-size:13px; padding:0 26px 10px; }
.sp-emoji-grid { display:grid; grid-template-columns:repeat(8, 32px); gap:2px; padding:4px; }
.sp-emoji-grid button { width:32px; height:32px; font-size:18px; border:none; background:none; border-radius:6px; }
.sp-emoji-grid button:hover { background:var(--cream); }

/* nested dialogs (cover, files, video, poll, record, new space) */
.sp-dialog-overlay { position:fixed; inset:0; z-index:120; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:20px; }
.sp-dialog { background:var(--white); color:var(--ink); width:min(560px,100%); max-height:90vh; overflow:auto; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.sp-dialog.wide { width:min(760px,100%); }
.sp-d-head { display:flex; align-items:center; justify-content:space-between; padding:22px 26px 10px; }
.sp-d-head h3 { font-size:19px; font-weight:800; }
.sp-d-body { padding:8px 26px 18px; }
.sp-d-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 26px; border-top:1px solid var(--line); background:var(--cream); border-radius:0 0 18px 18px; }
.sp-tabs { display:flex; gap:6px; margin-bottom:14px; }
.sp-tabs button { border:1px solid transparent; background:none; padding:7px 14px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--muted); }
.sp-tabs button.active { border-color:var(--line); color:var(--ink); background:var(--white); box-shadow:0 1px 2px rgba(0,0,0,.05); }
.sp-drop { border:1.5px dashed var(--line); border-radius:14px; padding:30px 20px; text-align:center; color:var(--muted); font-size:13.5px; }
.sp-drop.over { border-color:var(--blue); background:var(--blue-bg); }
.sp-drop strong { display:block; color:var(--ink); font-size:15px; margin:8px 0 4px; }
.sp-field { margin-bottom:14px; }
.sp-field label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.sp-field input[type=text], .sp-field input[type=url], .sp-field input[type=datetime-local], .sp-field textarea, .sp-field select { width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; background:var(--white); color:var(--ink); }
.sp-field .hint { font-size:12px; color:var(--faint); margin-top:4px; }
.sp-check { display:flex; align-items:center; gap:10px; font-size:14px; margin:10px 0; }
.sp-opt-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.sp-opt-row input { flex:1; border:1px solid var(--line); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; background:var(--white); color:var(--ink); }
.sp-rec { background:#2b2b2f; border-radius:14px; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; color:#ddd; font-size:13.5px; }
.sp-rec video { width:100%; height:100%; object-fit:cover; }
.sp-rec .timer { position:absolute; top:10px; left:12px; background:#D4302B; color:#fff; font-size:12px; font-weight:700; padding:3px 8px; border-radius:999px; }

/* keep page headers clear of the fixed top-right search / messages / profile buttons */
#view-space, #view-library { padding-top:44px; }
@media (max-width:760px) { #view-space, #view-library { padding-top:8px; } }

/* Host Hub: "From your spaces" — a forest card with the newest post */
.sp-latest-wrap { margin:28px 0 0; }
.sp-latest { background:#1E3A24; color:#F3EDDC; border-radius:18px; padding:24px 26px; }
.sp-latest .eyebrow { color:#C9D2C3; margin:0; }
.sp-latest-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sp-latest-open { background:none; border:none; color:#E9C46A; font-weight:700; font-size:13.5px; padding:6px 0; }
.sp-latest-open:hover { text-decoration:underline; }
.sp-latest .sp-author .n { color:#F3EDDC; }
.sp-latest .sp-author .m { color:#A9B7A3; }
.sp-latest .sp-avatar { background:#2F4B34; color:#E9C46A; }
.sp-latest .sp-badge { background:#E9C46A; color:#172A1B; }
.sp-latest-title { font-family:var(--display, Georgia, serif); font-size:28px; line-height:1.2; margin:2px 0 6px; }
.sp-latest-body { margin:0; font-size:14.5px; line-height:1.55; color:#D9DFD3; }
.sp-latest-foot { display:flex; gap:18px; margin-top:16px; padding-top:14px; border-top:1px solid #2F4B34; font-size:13px; font-weight:600; color:#C9D2C3; }