:root { --ink:#25312c; --muted:#737b75; --paper:#f7f4ec; --card:#fffdf8; --line:#e8e3d8; --green:#436a59; --green-dark:#315345; --peach:#d98564; --shadow:0 10px 30px rgba(62,55,41,.07); }
[hidden] { display:none!important; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; }
button,textarea,select,input { font:inherit; }
button { color:inherit; }
.topbar { height:72px; padding:0 max(24px,calc((100vw - 1400px)/2)); display:flex; align-items:center; border-bottom:1px solid var(--line); background:rgba(255,253,248,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(15px); }
.brand { width:260px; display:flex; align-items:center; gap:10px; color:var(--green-dark); text-decoration:none; font:600 27px "Newsreader",serif; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:11px 11px 11px 4px; background:var(--green); color:white; font:600 20px "Newsreader",serif; }
.main-nav { display:flex; align-self:stretch; margin:auto; }
.nav-item { min-width:116px; border:0; border-bottom:2px solid transparent; background:transparent; display:flex; justify-content:center; align-items:center; gap:8px; color:var(--muted); cursor:pointer; }
.nav-item.active { color:var(--green); border-color:var(--green); font-weight:600; }
.icon { font-size:22px; }
.top-actions { width:260px; display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.circle-btn { border:0; width:38px; height:38px; border-radius:50%; background:#f0ede5; cursor:pointer; font-size:20px; }
.notice { position:relative; }.notice:after { content:""; position:absolute; right:4px; top:2px; width:7px; height:7px; border:2px solid var(--card); border-radius:50%; background:var(--peach); }
.avatar { border:0; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; overflow:hidden; color:white; background:#7b998b; font-size:12px; font-weight:700; letter-spacing:.04em; flex:0 0 auto; }
.avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.avatar-maya { background:linear-gradient(145deg,#cf8e71,#7a5146); }.avatar-james { background:#718b9b; }.avatar-nina { background:#b27770; }.avatar-emily { background:#7f9b75; }.avatar-theo { background:#9d8068; }
.page-shell { max-width:1400px; margin:0 auto; display:grid; grid-template-columns:260px minmax(480px,660px) 280px; gap:36px; padding:34px 24px 80px; }
.view-panel { display:none; }.view-panel.active-view { display:block; }
.left-rail,.right-rail { position:sticky; top:106px; align-self:start; }
.profile-card,.card,.side-card { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.profile-card { overflow:hidden; }.cover-art { height:82px; position:relative; overflow:hidden; background:#d8ded2; }.sun { position:absolute; width:25px; height:25px; border-radius:50%; background:#eccf95; left:31px; top:18px; }.hill { position:absolute; border-radius:50%; }.hill-one { width:260px; height:100px; background:#8ca693; left:42px; top:38px; }.hill-two { width:200px; height:80px; background:#637f6b; left:-50px; top:54px; }
.profile-content { padding:0 20px 18px; }.avatar-large { width:58px; height:58px; margin-top:-29px; position:relative; border:4px solid var(--card); }.profile-content h2 { margin:12px 0 4px; font:600 22px "Newsreader",serif; }.profile-content p { margin:0; color:var(--muted); line-height:1.5; font-size:13px; }.profile-stats { display:flex; gap:22px; margin-top:16px; font-size:12px; color:var(--muted); }.profile-stats strong { color:var(--ink); display:block; font-size:15px; }
.space-switcher { margin:18px 0; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }.space-title { display:flex; justify-content:space-between; align-items:center; padding:2px 4px 8px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.space-title button { width:20px; height:20px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; }.space-button { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; width:100%; padding:9px; border:0; border-radius:10px; background:transparent; text-align:left; cursor:pointer; }.space-button:hover,.space-button.active { background:#e8eee8; }.space-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#dfe9e1; color:var(--green); }.space-icon.warm { background:#f2e2d9; color:#aa684f; }.space-button strong,.space-button small { display:block; }.space-button strong { font-size:12px; }.space-button small { margin-top:2px; color:var(--muted); font-size:9px; }.space-button b { min-width:22px; padding:3px 6px; border-radius:10px; background:#f0ede5; color:var(--muted); font-size:9px; text-align:center; }.mobile-space-picker { display:none; }
.space-icon.blue-space { background:#e1e9ef; color:#627f91; }
.side-menu { display:grid; gap:4px; margin:18px 0; }.side-link { border:0; background:transparent; border-radius:10px; padding:11px 12px; text-align:left; cursor:pointer; color:#69716c; }.side-link span { display:inline-block; width:27px; font-size:17px; }.side-link.active,.side-link:hover { background:#e8eee8; color:var(--green-dark); font-weight:600; }
.quiet-note { display:flex; gap:12px; padding:17px; background:#ece9dd; border-radius:14px; }.quiet-note>span { font-size:20px; color:var(--peach); }.quiet-note strong { font:600 15px "Newsreader",serif; }.quiet-note p { font-size:11px; color:var(--muted); line-height:1.4; margin:4px 0 0; }
.feed-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; }.eyebrow { margin:0 0 4px; color:#9a725e; font-size:10px; font-weight:700; letter-spacing:.14em; }.feed-heading h1 { margin:0; font:600 32px "Newsreader",serif; }.filter-button { border:0; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }
.heading-actions { display:flex; align-items:center; gap:8px; }.secondary-button { border:1px solid var(--line); border-radius:10px; background:var(--card); padding:9px 13px; color:var(--green-dark); cursor:pointer; font-size:11px; font-weight:600; }
.composer { padding:18px; margin-bottom:20px; }.composer-row { display:flex; gap:12px; align-items:center; }.composer-prompt { flex:1; padding:12px 16px; border:1px solid var(--line); border-radius:22px; background:#faf8f2; color:#92958f; text-align:left; cursor:pointer; }.composer-actions { display:flex; justify-content:space-around; border-top:1px solid var(--line); margin-top:16px; padding-top:13px; }.composer-actions button { border:0; background:transparent; font-size:12px; cursor:pointer; }.action-icon { margin-right:6px; font-size:17px; }.peach { color:var(--peach); }.sage { color:#73907d; }.blue { color:#718da0; }
.post { padding:20px; margin-bottom:20px; }.post-head { display:flex; align-items:center; gap:11px; }.post-author { flex:1; }.post-author h3 { margin:0; font-size:14px; }.post-meta { margin-top:3px; font-size:11px; color:#92958f; }.more { border:0; background:transparent; cursor:pointer; color:var(--muted); }.post-text { margin:16px 0; line-height:1.6; font-size:14px; white-space:pre-wrap; }.post-image { width:100%; max-height:390px; object-fit:cover; display:block; border-radius:12px; background:#e7e3da; }.photo-placeholder { height:310px; border-radius:12px; overflow:hidden; position:relative; background:linear-gradient(#b4c7d3 0 43%,#78966c 43%); }.photo-placeholder:before { content:""; position:absolute; width:170px; height:170px; border-radius:50%; background:#d9e0d4; left:50%; top:100px; transform:translateX(-50%); box-shadow:-115px 32px 0 #638263,120px 50px 0 #587958; }.photo-placeholder:after { content:"KELLER FAMILY PICNIC · '26"; position:absolute; bottom:18px; right:18px; padding:7px 10px; background:rgba(255,253,248,.85); border-radius:5px; color:#59675e; font-size:9px; letter-spacing:.08em; }
.post-stats { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; padding:12px 2px; border-bottom:1px solid var(--line); }.post-actions { display:flex; justify-content:space-around; padding-top:5px; }.post-actions button { border:0; background:transparent; padding:9px 18px; color:var(--muted); cursor:pointer; border-radius:8px; font-size:12px; }.post-actions button:hover { background:#f3f0e8; }.post-actions button.liked { color:#a45c4a; font-weight:700; }
.comments { display:none; padding-top:12px; }.comments.open { display:block; }.comment { font-size:12px; padding:9px 12px; background:#f4f1e9; border-radius:10px; margin-bottom:7px; }.comment strong { margin-right:6px; }.comment-form { display:flex; gap:8px; }.comment-form input { flex:1; min-width:0; padding:9px 12px; border:1px solid var(--line); background:white; border-radius:18px; outline:none; }.comment-form button { border:0; background:var(--green); color:white; border-radius:18px; padding:0 14px; cursor:pointer; }
.side-card { padding:18px; margin-bottom:18px; }.section-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.section-title h3 { margin:0; font:600 19px "Newsreader",serif; }.section-title button { border:0; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }.event-row { display:flex; align-items:center; gap:12px; padding:10px 0; }.date-tile { width:43px; height:47px; border-radius:9px; background:#f2ded5; display:grid; place-content:center; text-align:center; color:#9e5946; }.date-tile.green { background:#dfe9dd; color:#557057; }.date-tile span { font-size:8px; font-weight:700; }.date-tile strong { font:600 19px "Newsreader",serif; }.event-row h4 { margin:0 0 3px; font-size:12px; }.event-row p { margin:0; color:var(--muted); font-size:10px; }.text-button { border:0; background:transparent; color:var(--green); font-size:11px; padding:11px 0 0; cursor:pointer; }
.family-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }.family-person { border:0; background:transparent; display:grid; justify-items:center; gap:6px; padding:0; cursor:pointer; font-size:10px; }.family-person .avatar { width:43px; height:43px; } footer { padding:10px; color:#aaa69d; font-size:9px; line-height:1.7; } footer span { font-family:"Newsreader",serif; font-size:11px; }
.upcoming-button { width:100%; border:0; background:transparent; text-align:left; cursor:pointer; }.upcoming-button:hover { background:#f6f3ec; border-radius:10px; }
dialog { width:min(540px,calc(100% - 32px)); border:0; border-radius:20px; padding:0; background:var(--card); color:var(--ink); box-shadow:0 25px 80px rgba(30,35,31,.25); }dialog::backdrop { background:rgba(35,42,38,.45); backdrop-filter:blur(3px); }dialog form { padding:24px; }.dialog-head { display:flex; justify-content:space-between; }.dialog-head h2 { font:600 25px "Newsreader",serif; margin:0; }.close-button { border:0; background:#efede6; width:32px; height:32px; border-radius:50%; font-size:20px; cursor:pointer; }.author-line { display:flex; align-items:center; gap:10px; margin:22px 0 12px; font-size:12px; }.author-line strong { display:block; }.author-line select { border:0; padding:0; color:var(--muted); background:transparent; font-size:10px; }textarea { width:100%; min-height:140px; resize:vertical; border:0; outline:0; background:transparent; font:500 18px/1.5 "Newsreader",serif; } .dialog-tools { display:flex; gap:8px; }.dialog-tools button { border:1px solid var(--line); background:#f8f5ed; padding:8px 12px; border-radius:9px; cursor:pointer; font-size:11px; }#photoUrl { display:none; width:100%; margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:8px; outline:none; }.dialog-footer { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); margin-top:18px; padding-top:16px; font-size:10px; color:var(--muted); }.primary-button { border:0; border-radius:10px; background:var(--green); color:white; padding:10px 17px; cursor:pointer; font-weight:600; }.primary-button:hover { background:var(--green-dark); }
#toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#283a31; color:white; padding:10px 18px; border-radius:22px; font-size:12px; transition:.25s; z-index:30; }#toast.show { opacity:1; transform:translate(-50%,0); }
.album-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }.album-card { min-height:210px; position:relative; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#dfe6dc; cursor:pointer; box-shadow:var(--shadow); }.album-card .album-art { position:absolute; inset:0; background:linear-gradient(145deg,#a8bdac,#5f806a); }.album-card:nth-child(2) .album-art { background:linear-gradient(145deg,#e6c5ad,#a87764); }.album-card:nth-child(3) .album-art { background:linear-gradient(145deg,#b9ccd5,#738c99); }.album-card img { width:100%; height:100%; object-fit:cover; }.album-card-info { position:absolute; inset:auto 0 0; padding:38px 16px 15px; color:white; background:linear-gradient(transparent,rgba(27,37,31,.75)); }.album-card-info h3 { margin:0; font:600 20px "Newsreader",serif; }.album-card-info p { margin:3px 0 0; font-size:10px; opacity:.85; }
.directory-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.person-card { display:flex; align-items:center; gap:13px; padding:17px; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); }.person-card .avatar { width:50px; height:50px; }.person-card h3 { margin:0 0 3px; font-size:14px; }.person-card p { margin:0; color:var(--muted); font-size:10px; }.online-dot { width:7px; height:7px; margin-left:auto; border-radius:50%; background:#6e9b71; }
.person-card { width:100%; color:inherit; text-align:left; cursor:pointer; }.person-card:hover { border-color:#cbd8cc; transform:translateY(-1px); }.pending-badge { margin-left:auto; padding:4px 7px; border-radius:9px; background:#f2e2d9; color:#995d48; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }.member-detail { display:flex; align-items:center; gap:14px; padding:4px 0 8px; }.member-detail .avatar-large { margin:0; border:0; }.member-detail p { margin:4px 0 0; color:var(--muted); font-size:11px; }.danger-button { border:0; background:transparent; color:#a6564c; cursor:pointer; font-size:11px; }.dialog-footer:has(.danger-button) { justify-content:space-between; }
.connection-filters { display:flex; gap:7px; margin:-7px 0 16px; padding-bottom:2px; overflow-x:auto; scrollbar-width:none; }.connection-filters::-webkit-scrollbar { display:none; }.connection-filters button { flex:0 0 auto; padding:7px 11px; border:1px solid var(--line); border-radius:15px; background:var(--card); color:var(--muted); cursor:pointer; font-size:10px; }.connection-filters button.active { border-color:var(--green); background:#e8eee8; color:var(--green-dark); font-weight:700; }.degree-badge { margin-left:auto; padding:4px 7px; border-radius:9px; background:#e5ece3; color:var(--green); font-size:9px; font-weight:700; }.degree-badge.second { background:#e8e5ef; color:#665c83; }.connect-mini { margin-left:auto; padding:6px 9px; border:0; border-radius:9px; background:var(--green); color:white; cursor:pointer; font-size:9px; font-weight:700; }.mutual-copy { display:block; margin-top:3px; color:#8a8f8b; font-size:9px; }
.month-strip { display:flex; justify-content:space-between; align-items:center; padding:18px; margin-bottom:15px; border:1px solid var(--line); border-radius:15px; background:var(--card); box-shadow:var(--shadow); }.month-strip button { width:34px; height:34px; border:0; border-radius:50%; background:#f0ede5; cursor:pointer; }.month-strip div { display:grid; text-align:center; }.month-strip strong { font:600 19px "Newsreader",serif; }.month-strip span,.view-intro { color:var(--muted); font-size:11px; }.event-list { display:grid; gap:12px; }.calendar-event { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:15px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:var(--shadow); }.calendar-date { display:grid; place-content:center; height:62px; border-radius:11px; background:#e5ece3; text-align:center; color:var(--green); }.calendar-date span { font-size:9px; font-weight:700; }.calendar-date strong { font:600 26px "Newsreader",serif; }.calendar-event h3 { margin:0 0 5px; font-size:14px; }.calendar-event p { margin:0; color:var(--muted); font-size:10px; }.calendar-event>button { border:0; background:transparent; color:var(--muted); cursor:pointer; }.empty-state { padding:45px 25px; border:1px dashed #d8d2c6; border-radius:16px; text-align:center; color:var(--muted); }.empty-state strong { display:block; margin-bottom:6px; color:var(--ink); font:600 19px "Newsreader",serif; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.calendar-event { cursor:pointer; }.calendar-event:hover { border-color:#cbd8cc; }.calendar-event .rsvp-chip { display:inline-block; margin-top:6px; padding:3px 7px; border-radius:9px; background:#e5ece3; color:var(--green); font-size:8px; font-weight:700; }.event-detail-date { display:flex; align-items:center; gap:14px; margin:2px 0 16px; }.event-detail-date .date-tile { flex:0 0 auto; width:54px; height:58px; }.event-detail-date p { margin:4px 0 0; color:var(--muted); font-size:11px; }.rsvp-row { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin:14px 0; }.rsvp-row button { padding:9px 5px; border:1px solid var(--line); border-radius:9px; background:white; cursor:pointer; font-size:10px; }.rsvp-row button.active { border-color:var(--green); background:#e8eee8; color:var(--green-dark); font-weight:700; }
.remove-saved { border:0; background:transparent; color:var(--green); cursor:pointer; font-size:10px; }
#photoPreview img { width:100%; max-height:230px; object-fit:cover; border-radius:10px; margin-bottom:12px; }.compact-dialog { width:min(480px,calc(100% - 28px)); }.search-box { display:flex; align-items:center; gap:10px; padding:15px 18px; }.search-box input { flex:1; border:0; outline:0; background:transparent; font-size:15px; }.compact-dialog form { padding:0; }.search-results { border-top:1px solid var(--line); padding:12px 18px 18px; min-height:110px; max-height:400px; overflow:auto; }.search-results>p { color:var(--muted); font-size:12px; }.search-result { display:flex; gap:10px; align-items:center; padding:10px 6px; border-bottom:1px solid var(--line); font-size:12px; }.search-result p { margin:2px 0 0; color:var(--muted); }.compact-dialog#inviteDialog form { padding:24px; }.form-copy { color:var(--muted); font-size:12px; line-height:1.5; }.compact-dialog label { display:block; margin:14px 0; font-size:11px; font-weight:600; }.compact-dialog label input,.compact-dialog label select { display:block; width:100%; margin-top:6px; border:1px solid var(--line); border-radius:9px; padding:11px; background:white; outline:none; }
.popover { display:none; position:fixed; z-index:25; right:max(24px,calc((100vw - 1400px)/2 + 52px)); top:64px; width:320px; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:0 18px 50px rgba(34,42,37,.18); overflow:hidden; }.popover.open { display:block; }.popover-head { display:flex; justify-content:space-between; padding:15px; border-bottom:1px solid var(--line); }.popover-head button { border:0; background:transparent; color:var(--green); font-size:10px; cursor:pointer; }.notification-item { display:flex; gap:10px; padding:13px 15px; }.notification-item.unread { background:#edf2ec; }.notification-item p { margin:0; font-size:11px; line-height:1.4; }.notification-item small { display:block; color:var(--muted); margin-top:3px; }.profile-popover { width:205px; right:max(24px,calc((100vw - 1400px)/2)); padding:7px; }.profile-popover button { display:block; width:100%; border:0; border-radius:8px; background:transparent; padding:10px; text-align:left; font-size:11px; cursor:pointer; }.profile-popover button:hover { background:#f0ede5; }
/* Dialog and media reliability overrides */
dialog { width:min(560px,calc(100vw - 40px)); max-height:calc(100dvh - 48px); overflow:auto; }
dialog form,.compact-dialog form,.compact-dialog#inviteDialog form { padding:26px; }
#searchDialog form { padding:0; }
.post-image { width:100%; height:auto; max-height:520px; object-fit:contain; background:#eeebe3; }
#photoPreview { display:grid; place-items:center; max-height:300px; overflow:hidden; margin:8px 0 12px; border-radius:12px; background:#eeebe3; }
#photoPreview:empty { display:none; }
#photoPreview img { display:block; width:auto; max-width:100%; height:auto; max-height:300px; object-fit:contain; margin:0; }
.compact-dialog label textarea { display:block; width:100%; min-height:90px; margin-top:6px; padding:11px; resize:vertical; border:1px solid var(--line); border-radius:9px; background:white; font:inherit; outline:none; }.toggle-setting { display:flex!important; align-items:center; justify-content:space-between; gap:18px; padding:12px 0; border-bottom:1px solid var(--line); }.toggle-setting span { display:grid; gap:3px; }.toggle-setting small { color:var(--muted); font-weight:400; }.toggle-setting input { width:19px!important; height:19px; margin:0!important; accent-color:var(--green); }.settings-tools { padding-top:10px; }.settings-tools button { border:0; background:transparent; padding:7px 0; color:var(--green); cursor:pointer; font-size:11px; font-weight:600; }body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
.album-dialog { width:min(820px,calc(100vw - 40px)); padding:26px; }.album-dialog-head,.photo-viewer-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.album-dialog-head h2,.photo-viewer-head h2 { margin:0; font:600 27px "Newsreader",serif; }.album-dialog-head>div>span { color:var(--muted); font-size:11px; }.album-detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.album-photo { position:relative; min-height:170px; overflow:hidden; border:0; border-radius:12px; background:#dfe6dc; cursor:pointer; }.album-photo img { width:100%; height:100%; min-height:170px; object-fit:cover; display:block; }.album-photo.placeholder-one { background:linear-gradient(145deg,#a8bdac,#5f806a); }.album-photo.placeholder-two { background:linear-gradient(145deg,#e6c5ad,#a87764); }.album-photo.placeholder-three { background:linear-gradient(145deg,#b9ccd5,#738c99); }.album-photo span { position:absolute; inset:auto 0 0; padding:25px 10px 9px; color:white; background:linear-gradient(transparent,rgba(27,37,31,.7)); font-size:9px; text-align:left; }.photo-viewer-dialog { width:min(1000px,calc(100vw - 40px)); padding:22px; background:#252c28; color:white; }.photo-viewer-dialog .eyebrow { color:#d8a88f; }.photo-viewer-dialog .close-button { background:#3a443f; color:white; }.photo-stage { display:grid; place-items:center; min-height:240px; max-height:calc(100dvh - 170px); overflow:hidden; border-radius:12px; background:#171c19; }.photo-stage img { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 170px); object-fit:contain; }
.mobile-more-nav { display:none; }.mobile-menu-dialog { width:min(500px,calc(100vw - 20px)); margin:auto auto 74px; padding:20px; border-radius:20px; }.mobile-menu-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }.mobile-menu-head h2 { margin:0; font:600 26px "Newsreader",serif; }.mobile-menu-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.mobile-menu-grid button { display:grid; place-items:center; gap:6px; min-height:80px; padding:10px 5px; border:1px solid var(--line); border-radius:12px; background:#faf8f2; cursor:pointer; font-size:10px; }.mobile-menu-grid button span { color:var(--green); font-size:21px; }
footer button { border:0; padding:0; background:transparent; color:inherit; cursor:pointer; font:inherit; text-decoration:underline; text-underline-offset:2px; }.utility-list { display:grid; gap:10px; margin-top:20px; }.utility-list>button { display:flex; align-items:center; gap:13px; width:100%; padding:14px; border:1px solid var(--line); border-radius:12px; background:#faf8f2; text-align:left; cursor:pointer; }.utility-list>button>span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#e5ece3; color:var(--green); font-size:19px; }.utility-list strong,.utility-list small { display:block; }.utility-list strong { font-size:12px; }.utility-list small { margin-top:3px; color:var(--muted); font-size:9px; }.policy-copy { margin-top:18px; color:var(--muted); font-size:12px; line-height:1.65; }.policy-copy strong { color:var(--ink); }.help-list { display:grid; margin-top:18px; }.help-list details { padding:12px 0; border-bottom:1px solid var(--line); }.help-list summary { cursor:pointer; font-size:12px; font-weight:600; }.help-list p { margin:8px 0 0; color:var(--muted); font-size:11px; line-height:1.55; }
:where(button,a,input,textarea,select,[tabindex]):focus-visible { outline:3px solid rgba(67,106,89,.42); outline-offset:2px; }.primary-button:disabled { cursor:wait; opacity:.65; }.post-image[role="button"] { cursor:zoom-in; }
.view-panel :where(h1,h2)[tabindex]:focus-visible { outline:none; }
@media(max-width:1180px){.page-shell{grid-template-columns:220px minmax(0,1fr)}.right-rail{display:none}.brand,.top-actions{width:200px}}
@media(max-width:760px){.topbar{height:62px;padding:0 14px}.brand{width:auto}.brand>span:last-child{display:none}.main-nav{position:fixed;bottom:0;left:0;right:0;height:62px;background:var(--card);border-top:1px solid var(--line);z-index:20}.nav-item,.mobile-more-nav{min-width:0;flex:1;flex-direction:column;justify-content:center;align-items:center;gap:0;font-size:9px}.mobile-more-nav{display:flex;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer}.top-actions{width:auto;margin-left:auto}.circle-btn{display:none}.page-shell{display:block;padding:24px 12px 85px}.left-rail{display:none}.feed-heading h1{font-size:27px}.mobile-space-picker{display:flex;align-items:center;justify-content:space-between;margin:-8px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--muted);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.mobile-space-picker select{border:0;background:transparent;color:var(--green-dark);font-size:12px;font-weight:600;outline:0;text-transform:none;letter-spacing:0}.composer-actions button{font-size:0}.composer-actions .action-icon{font-size:19px}.post{padding:16px}.photo-placeholder{height:260px}.album-grid,.directory-grid{grid-template-columns:1fr}.feed-heading .primary-button{padding:9px 11px;font-size:10px}.popover{right:12px;left:12px;width:auto}}
@media(max-width:560px){dialog,.compact-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px}dialog form,.compact-dialog form,.compact-dialog#inviteDialog form{padding:20px}.search-dialog form{padding:0}.dialog-footer{gap:12px}.dialog-footer>span{max-width:58%}.rsvp-row{grid-template-columns:1fr}}
@media(max-width:700px){.album-dialog{padding:18px}.album-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.album-photo,.album-photo img{min-height:135px}.photo-viewer-dialog{padding:14px}}

/* Usability beta */
.demo-badge { padding:3px 6px; border:1px solid #d8c7b7; border-radius:8px; background:#f6ebe2; color:#8f624d; font:700 8px "DM Sans",sans-serif; letter-spacing:.12em; }
.beta-banner { position:sticky; top:72px; z-index:9; display:flex; align-items:center; justify-content:center; gap:14px; min-height:38px; padding:7px 18px; border-bottom:1px solid #ded7c9; background:#eee9dc; color:#5f655f; text-align:center; }
.beta-banner p { margin:0; font-size:10px; line-height:1.45; }
.beta-banner strong { color:var(--ink); }
.beta-banner button { flex:0 0 auto; border:0; border-bottom:1px solid currentColor; background:transparent; color:var(--green-dark); padding:2px 0; cursor:pointer; font-size:10px; font-weight:700; }
.popover-head { gap:12px; }
.popover-head>div { display:grid; gap:3px; }
.popover-head small { color:var(--muted); font-size:8px; font-weight:400; }
.popover-head button { flex:0 0 auto; }
.profile-popover { width:220px; }
.profile-popover button:disabled { cursor:default; color:var(--green); font-weight:700; }
.compact-dialog select:disabled { color:#8e918d; background:#f1efe9; cursor:not-allowed; }
.settings-tools { display:grid; }
.settings-tools button { text-align:left; }
.preview-checklist { display:grid; gap:9px; margin:16px 0; padding-left:22px; color:var(--muted); font-size:11px; line-height:1.5; }
.preview-actions { gap:10px; }
.feedback-details { display:flex!important; align-items:flex-start; gap:9px; color:var(--muted); font-weight:400!important; line-height:1.45; }
.feedback-details input { flex:0 0 auto; display:block!important; width:17px!important; height:17px; margin:1px 0 0!important; accent-color:var(--green); }

/* Dedicated profiles */
.profile-card-link { display:block; width:100%; padding:0; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.profile-card-link:hover { border-color:#cbd8cc; transform:translateY(-1px); }
.profile-card-link:focus-visible { outline-offset:3px; }
.person-profile-button { display:flex; flex:1; align-items:center; gap:13px; min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.person-profile-button>span:last-child { min-width:0; }
.person-card { cursor:default; }
.person-card:hover { border-color:var(--line); transform:none; }
.person-card:has(.person-profile-button:hover) { border-color:#cbd8cc; transform:translateY(-1px); }
.composer-row>.avatar { padding:0; cursor:pointer; }
.post-profile-link { display:flex; flex:1; align-items:center; gap:11px; min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.post-profile-link:hover h3 { color:var(--green); }
.post-profile-link .post-author { min-width:0; }
.post-profile-link .post-meta { display:block; }
.unavailable-profile { cursor:default; }
.unavailable-profile:hover h3 { color:inherit; }
.unavailable-copy { color:var(--muted); font-size:8px; white-space:nowrap; }
.search-result { width:100%; border-width:0 0 1px; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.search-result:hover { background:#f5f2ea; }
.search-result>span:nth-child(2) { display:grid; flex:1; min-width:0; gap:2px; }
.search-result small { overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.search-result b { margin-left:auto; color:var(--green); font-size:9px; white-space:nowrap; }
.member-actions>span { display:flex; gap:8px; }
.request-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; margin-left:auto; }
.request-actions .pending-badge { margin-left:0; }
.request-actions button { padding:6px 9px; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--green-dark); cursor:pointer; font-size:9px; font-weight:700; }
.request-actions button:first-of-type { border-color:var(--green); background:var(--green); color:white; }
.request-actions button:disabled { opacity:.55; cursor:wait; }
.profile-photo-editor { display:flex; align-items:center; gap:14px; margin:18px 0 8px; padding:14px; border:1px solid var(--line); border-radius:13px; background:#faf8f2; }
.profile-photo-editor .avatar { width:72px; height:72px; font-size:18px; }
.profile-photo-editor>div { display:grid; justify-items:start; gap:5px; }
.profile-photo-editor strong,.profile-photo-editor small { display:block; }
.profile-photo-editor small { color:var(--muted); font-size:10px; line-height:1.4; }
.profile-photo-editor .secondary-button { margin-top:3px; padding:7px 10px; }
.notification-empty { display:grid; gap:3px; padding:20px 15px; color:var(--muted); font-size:10px; }
.notification-empty strong { color:var(--ink); font-size:11px; }
.intro-task-card { grid-column:1 / -1; border-color:#cad9ca; background:#f5f8f3; }
.intro-task-copy { display:grid; flex:1; min-width:0; gap:4px; }
.intro-task-copy h3,.intro-task-copy p { margin:0; }
@media (max-width:560px) { .person-card:has(.request-actions) { align-items:flex-start; flex-wrap:wrap; } .person-card .request-actions { width:100%; margin-left:63px; justify-content:flex-start; } }
.member-circle-controls { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; padding:14px; border:1px solid var(--line); border-radius:12px; }
.member-circle-controls legend { padding:0 5px; color:var(--green-dark); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.member-circle-controls p { flex-basis:100%; margin:0 0 4px; color:var(--muted); font-size:10px; line-height:1.45; }
.member-circle-controls label { display:flex!important; align-items:center; gap:6px; margin:0!important; padding:7px 9px; border:1px solid var(--line); border-radius:10px; background:white; font-size:10px!important; cursor:pointer; }
.member-circle-controls input { width:auto!important; margin:0!important; padding:0!important; }
.profile-page-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.profile-page-nav button { border:0; background:transparent; color:var(--green-dark); padding:7px 0; cursor:pointer; font-size:11px; font-weight:700; }
.profile-page-nav>span { color:var(--muted); font-size:8px; font-weight:700; letter-spacing:.12em; }
.profile-hero { overflow:hidden; margin-bottom:18px; }
.profile-cover { position:relative; height:150px; overflow:hidden; background:linear-gradient(135deg,#dfe5d9,#c5d2c6); }
.profile-cover .sun { width:42px; height:42px; left:11%; top:28px; }
.profile-cover .hill-one { width:72%; height:190px; left:31%; top:74px; }
.profile-cover .hill-two { width:60%; height:150px; left:-9%; top:94px; }
.profile-hero-content { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; padding:0 26px; }
.profile-identity { display:flex; align-items:flex-end; gap:16px; min-width:0; }
.profile-avatar { width:92px; height:92px; margin-top:-46px; border:5px solid var(--card); font-size:20px; }
.profile-identity>div { padding:18px 0 3px; min-width:0; }
.profile-identity h1 { overflow:hidden; margin:0; font:600 31px "Newsreader",serif; text-overflow:ellipsis; white-space:nowrap; }
.profile-identity p:last-child { margin:3px 0 0; color:var(--muted); font-size:11px; }
.profile-page-actions { display:flex; gap:8px; padding-bottom:6px; }
.profile-bio { max-width:570px; margin:20px 26px 16px; color:#545e58; font:500 17px/1.5 "Newsreader",serif; }
.profile-page-stats { display:flex; gap:32px; padding:15px 26px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.profile-page-stats strong { display:block; margin-bottom:2px; color:var(--ink); font-size:16px; }
.profile-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:25px; }
.profile-info-card { padding:20px; }
.profile-info-card h2 { margin:0 0 14px; font:600 21px "Newsreader",serif; }
.profile-info-card dl { display:grid; gap:0; margin:0; }
.profile-info-card dl>div { display:grid; grid-template-columns:96px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
.profile-info-card dt { color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.profile-info-card dd { margin:0; font-size:11px; line-height:1.45; }
.connection-path { display:flex; align-items:center; flex-wrap:wrap; gap:7px; min-height:42px; padding:8px 0 14px; }
.path-node { border:1px solid var(--line); border-radius:16px; background:#faf8f2; padding:7px 10px; color:var(--green-dark); font-size:10px; font-weight:700; }
button.path-node { cursor:pointer; }
.path-node.current { border-color:#b9cabd; background:#e5ece3; }
.path-arrow { color:#a6aaa5; }
.profile-circles { display:flex; flex-wrap:wrap; gap:6px; }
.profile-circle-chip { padding:6px 9px; border-radius:13px; background:#f0ede5; color:#59665e; font-size:9px; font-weight:700; }
.profile-visibility-note { margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
.profile-moments-section .section-title { align-items:flex-end; }
.profile-moments-section { scroll-margin-top:125px; }
.profile-moments-section .section-title h2 { margin:0; font:600 25px "Newsreader",serif; }
.profile-moments-section .section-title>span { color:var(--muted); font-size:10px; }
#profileMoments { display:grid; gap:12px; }
.profile-moment { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:18px; overflow:hidden; padding:18px; }
.profile-moment.text-only { grid-template-columns:1fr; }
.profile-moment h3 { margin:7px 0 6px; font:600 17px/1.35 "Newsreader",serif; }
.profile-moment p { margin:0; color:var(--muted); font-size:9px; }
.profile-moment button { margin-top:16px; border:0; background:transparent; padding:0; color:var(--green); cursor:pointer; font-size:10px; font-weight:700; }
.profile-moment-audience { color:#9a725e; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.profile-moment img,.profile-moment-placeholder { width:140px; height:112px; align-self:center; border-radius:10px; object-fit:cover; }
.profile-moment-placeholder { position:relative; overflow:hidden; background:linear-gradient(#b4c7d3 0 43%,#78966c 43%); }
.profile-moment-placeholder:after { content:""; position:absolute; width:75px; height:75px; left:34px; top:42px; border-radius:50%; background:#d9e0d4; box-shadow:-55px 17px 0 #638263,55px 22px 0 #587958; }
.profile-empty { background:rgba(255,253,248,.55); }
.profile-primary-action:disabled,.profile-page-actions .primary-button:disabled { cursor:default; opacity:.7; }

@media(max-width:760px){
  .brand>span:last-of-type { display:none; }
  .demo-badge { font-size:7px; }
  .beta-banner { top:62px; align-items:flex-start; gap:8px; padding:7px 10px; }
  .beta-banner p { font-size:9px; text-align:left; }
  .beta-banner p span { display:none; }
  .beta-banner button { font-size:9px; }
  .profile-hero-content { align-items:flex-start; flex-direction:column; padding:0 18px; }
  .profile-identity { width:100%; }
  .profile-avatar { width:78px; height:78px; margin-top:-39px; }
  .profile-identity>div { padding-top:12px; }
  .profile-identity h1 { font-size:26px; }
  .profile-page-actions { width:100%; padding:0 0 4px; }
  .profile-page-actions button { flex:1; }
  .profile-bio { margin:15px 18px; }
  .profile-page-stats { gap:20px; padding:14px 18px 18px; }
  .profile-info-grid { grid-template-columns:1fr; }
}
@media(max-width:500px){
  .profile-cover { height:125px; }
  .profile-identity { align-items:center; gap:11px; }
  .profile-identity h1 { font-size:23px; }
  .profile-page-stats { justify-content:space-between; gap:8px; }
  .profile-moment { grid-template-columns:1fr; }
  .profile-moment img,.profile-moment-placeholder { width:100%; height:170px; grid-row:1; }
  .profile-info-card dl>div { grid-template-columns:84px 1fr; }
  .member-actions { align-items:flex-end; flex-direction:column-reverse; }
  .member-actions>span { width:100%; max-width:none; }
  .member-actions>span button { flex:1; }
}