/* Inter: fallback for non-Apple devices. Apple devices use San Francisco and never download these. */
@font-face {
  font-family:"Inter"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../fonts/inter-latin-wght-normal.260c81a4759b.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"Inter"; font-style:normal; font-display:swap; font-weight:100 900;
  src:url("../fonts/inter-latin-ext-wght-normal.1ad231aac0a8.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Light: near-black text, gray accent. Dark: green accent. */
:root {
  color-scheme: light;
  --bg:#faf9f6; --fg:#111111; --muted:#6e6e73; --accent:#8e8e93;
  --border:#d2d2d7; --field:#ffffff; --danger:#c0362c; --logo:#111111; --field-border:#8a8a8f;
  --picked-bg:color-mix(in srgb, #6cc497 24%, transparent); --picked-border:#6cc497; --check:#2e8b57;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#121212; --fg:#f2f2f2; --muted:#9a9a9f; --accent:#6cc497;
  --border:#3a3a3c; --field:#1c1c1e; --danger:#ff6b5e; --logo:#6cc497; --field-border:#6b6b70;
  --picked-bg:color-mix(in srgb, #6cc497 20%, transparent); --picked-border:#6cc497; --check:#6cc497;
}
/* No-JS fallback: follow the system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:#121212; --fg:#f2f2f2; --muted:#9a9a9f; --accent:#6cc497;
    --border:#3a3a3c; --field:#1c1c1e; --danger:#ff6b5e; --logo:#6cc497; --field-border:#6b6b70;
    --picked-bg:color-mix(in srgb, #6cc497 20%, transparent); --picked-border:#6cc497; --check:#6cc497;
  }
}

* { box-sizing:border-box; margin:0; }
html { height:100%; }
body { min-height:100%; display:flex; flex-direction:column; background:var(--bg); color:var(--fg); font-family:-apple-system,BlinkMacSystemFont,"Inter",sans-serif;
       transition:background-color .2s, color .2s; }

.theme-toggle { flex:none; width:40px; height:40px; display:grid; place-items:center;
                border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer;
                transition:color .2s, background-color .2s; }
.theme-toggle-fixed { position:fixed; top:16px; right:16px; z-index:20; }
.theme-toggle:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); }
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle .icon-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
:root:not([data-theme]) .theme-toggle { display:none; }

.logo { display:block; width:auto; color:var(--logo); transition:color .2s; }

.splash { flex:1 0 auto; display:grid; place-content:center; padding:24px 16px; }
.splash-inner { display:flex; flex-direction:column; align-items:center; text-align:center; }
.splash .logo { height:clamp(44px, 9vw, 60px); margin-bottom:1.5rem; }
.splash h1 { font-size:clamp(2.2rem,7vw,4rem); font-weight:700; letter-spacing:-.03em; }
.splash h1 span { color:var(--accent); transition:color .2s; }
.splash p { margin-top:1rem; font-size:1.15rem; color:var(--muted); }
.dot { display:inline-block; width:.5em; height:.5em; border-radius:7px; background:var(--accent);
       margin-right:.5em; vertical-align:middle; animation:pulse 2s ease-in-out infinite; transition:background-color .2s; }
@keyframes pulse { 50% { opacity:.3; } }
@media (prefers-reduced-motion: reduce) {
  .dot, .chip.is-error .chip-body { animation:none; }
  .chip.is-saving .chip-icon::before { animation-duration:1.6s; }
  * { transition:none !important; }
}

.splash-actions { margin-top:2rem; display:flex; flex-direction:column; align-items:center; gap:1rem; }
.btn.btn-inline { display:inline-block; width:auto; padding:.75rem 1.75rem; }
.text-link { color:var(--muted); text-underline-offset:3px; }
.text-link:hover { color:var(--fg); }
.splash .messages { margin-bottom:2rem; }

a { color:var(--fg); }
.link-button { border:0; background:none; padding:0; font:inherit; color:var(--muted); text-decoration:underline;
               text-underline-offset:3px; cursor:pointer; }
.link-button:hover { color:var(--fg); }

/* Auth pages */
.auth { flex:1 0 auto; display:grid; place-items:center; padding:72px 16px 48px; }
.auth-card { width:100%; max-width:400px; }
.wordmark { display:inline-block; margin-bottom:2.25rem; font-size:2.4rem; line-height:1.1; font-weight:700;
            letter-spacing:-.03em; color:var(--fg); text-decoration:none; }
.wordmark span { color:var(--accent); }
.auth h1 { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin-bottom:1.5rem; }
.lede { color:var(--muted); line-height:1.5; margin-bottom:1rem; }
.lede strong { color:var(--fg); font-weight:600; overflow-wrap:anywhere; }
.lede:last-of-type { margin-bottom:1.5rem; }

.field { margin-bottom:1.1rem; }
.field label { display:block; margin-bottom:.4rem; font-size:.9rem; font-weight:600; }
.field input { width:100%; padding:.75rem .85rem; font:inherit; font-size:1rem; color:var(--fg);
               background:var(--field); border:1px solid var(--field-border); border-radius:7px;
               transition:border-color .15s, box-shadow .15s; }
.field input[type="date"] { min-height:2.9rem; }
.field input:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.field-error input { border-color:var(--danger); }
.help { margin-top:.35rem; font-size:.82rem; line-height:1.4; color:var(--muted); }
.errorlist { list-style:none; padding:0; margin-top:.35rem; font-size:.85rem; line-height:1.4; color:var(--danger); }
.field-link { margin:-.25rem 0 1.25rem; font-size:.9rem; text-align:right; }
.field-link a { color:var(--muted); }
.field-link a:hover { color:var(--fg); }

.btn { display:block; width:100%; padding:.85rem 1rem; font:inherit; font-weight:600; text-align:center;
       text-decoration:none; color:var(--bg); background:var(--fg); border:1px solid var(--fg);
       border-radius:7px; cursor:pointer; transition:opacity .15s; }
.btn:hover { opacity:.85; }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.btn-secondary { color:var(--fg); background:transparent; border-color:var(--border); }

.form-foot { margin-top:1.75rem; text-align:center; font-size:.95rem; color:var(--muted); }

.alert { margin-bottom:1.25rem; padding:.8rem 1rem; border-radius:7px; font-size:.92rem; line-height:1.45;
         color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.messages { list-style:none; padding:0; margin-bottom:1.5rem; }
.message { padding:.8rem 1rem; border-radius:7px; font-size:.92rem; line-height:1.45; text-align:left;
           background:color-mix(in srgb, var(--fg) 6%, transparent); }
.message + .message { margin-top:.5rem; }
.message-error { color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }

/* Signed-in pages */
.topbar { position:sticky; top:0; z-index:10;
          background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.topbar-inner { max-width:960px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.6rem; flex:none; color:var(--fg); text-decoration:none;
         font-size:1.5rem; font-weight:700; letter-spacing:-.03em; }
.brand .logo { height:28px; }
.brand-dot { color:var(--accent); }

.page { flex:1 0 auto; width:100%; max-width:960px; margin:0 auto; padding:48px 16px 64px; }
.page-narrow { max-width:520px; }
.page h1 { font-size:clamp(1.8rem, 5vw, 2.4rem); font-weight:700; letter-spacing:-.03em; margin-bottom:1rem; }
.page .messages { margin-bottom:1.5rem; }
.back-link { margin-bottom:1rem; font-size:.95rem; }
.back-link a { color:var(--muted); text-decoration:none; }
.back-link a:hover { color:var(--fg); }

.settings-section { padding:1.75rem 0; border-top:1px solid var(--border); }
.page h1 + .settings-section { margin-top:1.5rem; }
.settings-section h2 { font-size:1.1rem; font-weight:700; margin-bottom:1rem; }
.settings-section .lede:last-of-type { margin-bottom:1rem; }
.field-label { display:block; margin-bottom:.4rem; font-size:.9rem; font-weight:600; }
.field-static { color:var(--muted); overflow-wrap:anywhere; }

.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Chip picker (checkboxes styled as toggle pills; saved instantly by chips.js) */
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; padding:0; border:0; }
.chip { position:relative; }
.chip input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.chip-body { display:inline-flex; align-items:center; padding:.5rem .95rem; font-size:.95rem; line-height:1.2; color:var(--fg);
             border:1px solid var(--border); border-radius:6px; background:var(--field);
             transition:background-color .2s, border-color .2s; user-select:none; }
.chip:hover .chip-body { border-color:var(--muted); }
.chip input:checked + .chip-body { background:var(--picked-bg); border-color:var(--picked-border); }
.chip input:focus-visible + .chip-body { outline:2px solid var(--accent); outline-offset:2px; }
.chip-pending .chip-body { border-style:dashed; }

/* Check mark on saved chips; spinner while saving */
.chip-icon { display:inline-grid; place-items:center; width:0; height:1em; margin-left:0; overflow:hidden; color:var(--check);
             transition:width .15s, margin-left .15s; }
.chip input:checked + .chip-body .chip-icon, .chip.is-saving .chip-icon { width:1em; margin-left:.45rem; }
.chip-check { display:block; }
.chip.is-saving .chip-check { display:none; }
.chip.is-saving .chip-icon::before { content:""; width:.8em; height:.8em; border:2px solid var(--muted);
                                     border-right-color:transparent; border-radius:50%; animation:chip-spin .7s linear infinite; }
.chip.is-saving input { cursor:progress; }
.chip.is-error .chip-body { border-color:var(--danger); animation:chip-shake .3s; }
@keyframes chip-spin { to { transform:rotate(360deg); } }
@keyframes chip-shake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
.js .no-js-only { display:none; }

.chip-add { display:flex; gap:.5rem; margin:-.5rem 0 1.5rem; }
.chip-add input { flex:1; min-width:0; padding:.6rem .85rem; font:inherit; font-size:1rem; color:var(--fg);
                  background:var(--field); border:1px solid var(--field-border); border-radius:7px; }
.chip-add input:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.chip-add .btn.btn-inline { flex:none; padding:.6rem 1.2rem; }

.btn.btn-danger { color:#ffffff; background:var(--danger); border-color:var(--danger); }
.btn.btn-danger-outline { color:var(--danger); }
.lede-list { margin:0 0 1.5rem; padding-left:1.25rem; color:var(--muted); line-height:1.6; }

/* Skip link: hidden until focused with the keyboard */
.skip-link { position:absolute; left:16px; top:-100px; z-index:100; padding:.6rem 1rem; border-radius:7px;
             color:var(--bg); background:var(--fg); font-weight:600; text-decoration:none; }
.skip-link:focus { top:12px; }

/* Footer */
.site-footer { position:relative; display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem 1.5rem; padding:28px 16px 32px; font-size:.9rem; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

/* Long-form documents (policies) */
.doc { max-width:680px; line-height:1.65; }
.doc h1 { margin-bottom:.5rem; }
.doc .doc-meta { color:var(--muted); margin-bottom:2rem; }
.doc .doc-summary { padding:1rem 1.25rem; border-radius:8px; background:color-mix(in srgb, var(--fg) 5%, transparent); margin-bottom:2rem; }
.doc h2 { font-size:1.35rem; font-weight:700; letter-spacing:-.01em; margin:2.5rem 0 .75rem; }
.doc h3 { font-size:1.05rem; font-weight:700; margin:1.75rem 0 .5rem; }
.doc p, .doc ul { margin-bottom:1rem; }
.doc ul { padding-left:1.25rem; }
.doc li + li { margin-top:.35rem; }
.doc a { color:var(--fg); text-underline-offset:3px; }
.doc .table-wrap { overflow-x:auto; margin-bottom:1rem; }
.doc table { width:100%; border-collapse:collapse; font-size:.95rem; }
.doc th, .doc td { text-align:left; vertical-align:top; padding:.6rem .75rem; border-bottom:1px solid var(--border); }
.doc th { font-weight:600; }
.doc-header { max-width:960px; width:100%; margin:0 auto; padding:14px 16px; }

/* Top bar actions + account menu */
.topbar-actions { display:flex; align-items:center; gap:.5rem; }
.account-menu { position:relative; }
.account-button { display:flex; align-items:center; gap:.35rem; padding:3px 6px 3px 3px; border:1px solid transparent;
                  border-radius:6px; background:none; color:var(--fg); cursor:pointer; font:inherit; }
.account-button:hover, .account-button[aria-expanded="true"] { border-color:var(--border); }
.account-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:7px; font-size:.85rem; font-weight:700;
          letter-spacing:.02em; color:var(--fg); background:var(--picked-bg); border:1px solid var(--picked-border); }
.caret { color:var(--muted); transition:transform .15s; }
.account-button[aria-expanded="true"] .caret { transform:rotate(180deg); }
.menu { position:absolute; right:0; top:calc(100% + 8px); z-index:30; min-width:240px; padding:.4rem;
        background:var(--field); border:1px solid var(--border); border-radius:10px;
        box-shadow:0 12px 32px rgba(0,0,0,.14); }
.menu[hidden] { display:none; }
.menu-header { display:flex; flex-direction:column; padding:.6rem .75rem .7rem; border-bottom:1px solid var(--border); margin-bottom:.3rem; }
.menu-name { font-weight:600; overflow-wrap:anywhere; }
.menu-username { color:var(--muted); font-size:.9rem; }
.menu-list { list-style:none; margin:0; padding:0; }
.menu-list a, .menu-signout { display:block; width:100%; padding:.6rem .75rem; border-radius:6px; text-align:left;
                              color:var(--fg); text-decoration:none; font:inherit; font-size:1rem; background:none; border:0; cursor:pointer; }
.menu-list a:hover, .menu-signout:hover, .menu-list a:focus-visible, .menu-signout:focus-visible { background:color-mix(in srgb, var(--fg) 7%, transparent); outline:none; }
.menu-list a[aria-current="page"] { font-weight:600; }
.menu-footer { border-top:1px solid var(--border); margin-top:.3rem; padding-top:.3rem; }

/* Private / Public options */
.option-row { position:relative; display:grid; grid-template-columns:1fr auto auto; gap:.15rem .6rem; align-items:center;
              margin:0; padding:.9rem 0; border:0; border-top:1px solid var(--border); }
.option-row:first-of-type { border-top:0; padding-top:0; }
.option-label { float:left; padding:0; font-weight:600; grid-column:1; }
.option-help { grid-column:1; margin:0; }
.segmented { grid-column:2; grid-row:1 / span 2; display:inline-flex; padding:3px; border:1px solid var(--field-border); border-radius:6px; background:var(--field); }
.segment { position:relative; }
.segment input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.segment span { display:block; padding:.4rem .95rem; border-radius:6px; font-size:.92rem; color:var(--muted); transition:background-color .15s, color .15s; }
.segment input:checked + span { color:var(--fg); font-weight:600; background:var(--picked-bg); box-shadow:inset 0 0 0 1px var(--picked-border); }
.segment input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.option-status { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:1rem; height:1rem; color:var(--check); }
.segmented { grid-column:3; }
.option-row.is-saving .option-status::before { content:""; display:block; width:.8rem; height:.8rem; border:2px solid var(--muted);
                                               border-right-color:transparent; border-radius:50%; animation:chip-spin .7s linear infinite; }
.option-row.is-saved .option-status::before { content:"\2713"; font-weight:700; }
.option-row.is-error .segmented { border-color:var(--danger); }
@media (max-width:560px) {
  .option-row { grid-template-columns:auto 1fr; }
  .option-label, .option-help { grid-column:1 / span 2; }
  .segmented { grid-column:1; grid-row:auto; justify-self:start; margin-top:.5rem; }
  .option-status { grid-column:2; grid-row:auto; margin-top:.5rem; justify-self:start; }
}

/* Groups */
.group-list { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.group-link { display:flex; flex-direction:column; gap:.25rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px;
              color:var(--fg); text-decoration:none; background:var(--field); transition:border-color .15s; }
.group-link:hover { border-color:var(--muted); }
.group-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.group-name { font-weight:700; font-size:1.05rem; }
.group-description { color:var(--muted); line-height:1.45; }
.group-meta { color:var(--muted); font-size:.9rem; }
.page h1 + .group-meta { margin-top:-.5rem; margin-bottom:1rem; }
.group-about { line-height:1.6; margin-bottom:1.5rem; }
.tag-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.tag { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border:1px solid var(--border); border-radius:6px; font-size:.95rem; }
.tag-shared { background:var(--picked-bg); border-color:var(--picked-border); }
.tag-shared .chip-check { color:var(--check); }


/* Top bar layout: wordmark left, logo mark centered, account menu right (desktop) */
.topbar-inner { display:grid; grid-template-columns:1fr auto 1fr; }
.topbar-wordmark { justify-self:start; }
.topbar-mark { justify-self:center; display:flex; color:var(--logo); }
.topbar-mark .logo { height:28px; }
.topbar-actions { justify-self:end; }
@media (max-width:560px) {
  /* Phones: just the mark on the left */
  .topbar-inner { grid-template-columns:auto 1fr; }
  .topbar-wordmark { display:none; }
  .topbar-mark { justify-self:start; }
}

.page-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.page-head h1 { margin-bottom:0; }
.button-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.field textarea { width:100%; padding:.75rem .85rem; font:inherit; font-size:1rem; line-height:1.5; color:var(--fg); resize:vertical;
                  background:var(--field); border:1px solid var(--field-border); border-radius:7px; }
.field textarea:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
fieldset.field { border:0; padding:0; margin:0 0 1.25rem; min-width:0; }
fieldset.field .segmented { margin-bottom:.35rem; }
.chip-group-label { margin:1rem 0 .5rem; font-size:.85rem; font-weight:600; color:var(--muted); }
fieldset.field .chips { margin-bottom:.5rem; }
.invite-banner { padding:1rem 1.1rem; margin-bottom:1rem; border-radius:10px; background:var(--picked-bg); border:1px solid var(--picked-border); }
.invite-banner p { margin-bottom:.75rem; }
.invite-card { display:flex; flex-direction:column; gap:.4rem; padding:1rem 1.1rem; border:1px solid var(--picked-border); border-radius:10px; background:var(--picked-bg); }
.invite-card .group-name { color:var(--fg); text-decoration:none; }
.invite-card .button-row { margin-top:.35rem; }
.member-list { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.member-list li { display:flex; align-items:center; gap:.7rem; }
.avatar-sm { width:32px; height:32px; font-size:.75rem; flex:none; }
.member-name { min-width:0; overflow-wrap:anywhere; }
.member-username { color:var(--muted); }
.member-role { margin-left:auto; font-size:.8rem; font-weight:600; color:var(--muted); }
.message-list { list-style:none; margin:0; padding:0; }
/* Chips and segments inside form fields shouldn't inherit field-label styling */
.field label.chip, .field label.segment { display:block; margin:0; font-size:inherit; font-weight:400; }

/* Footer log out */
.footer-form { display:inline; margin:0; }
.footer-link { border:0; background:none; padding:0; font:inherit; color:var(--muted); cursor:pointer; }
.footer-link:hover { color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

/* Home feed */
.feed-tagline { color:var(--muted); margin-bottom:1rem; }
.composer { padding:1.25rem; margin-bottom:1.25rem; border:1px solid var(--border); border-radius:10px; background:var(--field); }
.composer-label { display:block; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.6rem; }
.composer .field label.composer-label { font-size:1.35rem; font-weight:700; margin-bottom:.6rem; }
.composer textarea { width:100%; padding:.75rem .85rem; font:inherit; font-size:1.05rem; line-height:1.5; color:var(--fg); resize:vertical;
                     background:var(--bg); border:1px solid var(--field-border); border-radius:7px; }
.composer textarea:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.chips-compact .chip-body { padding:.4rem .8rem; font-size:.9rem; }
.feed-filter { display:flex; gap:.4rem; overflow-x:auto; padding:.15rem .1rem .6rem; margin-bottom:.75rem; scrollbar-width:thin; }
.filter-pill { flex:none; padding:.4rem .85rem; border-radius:6px; border:1px solid var(--border); font-size:.9rem; color:var(--muted); text-decoration:none; white-space:nowrap; }
.filter-pill:hover { color:var(--fg); border-color:var(--muted); }
.filter-pill[aria-current="true"] { color:var(--fg); font-weight:600; background:var(--picked-bg); border-color:var(--picked-border); }
.filter-pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.feed { display:grid; gap:.85rem; }
.post { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--field); }
.post-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.6rem; }
.post-author { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.post-author .member-username { font-weight:400; }
.post-time { margin-left:auto; flex:none; font-size:.85rem; color:var(--muted); }
.post-body { line-height:1.55; margin-bottom:.75rem; overflow-wrap:anywhere; }
.post-body a { color:var(--fg); text-underline-offset:3px; }
.tag-list-sm .tag { padding:.25rem .65rem; font-size:.82rem; }
.post-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.7rem; }
.post-reason { font-size:.85rem; color:var(--muted); }
.post-reason a { color:var(--muted); text-underline-offset:3px; }
.post-reason a:hover { color:var(--fg); }
.feed-empty { padding:1.5rem 0; }
.pager { display:flex; justify-content:space-between; gap:.6rem; margin-top:1.25rem; }

/* Faded divider lines: footer top (max 500px visible) and top bar bottom */
:root { --divider:rgba(17, 17, 17, .28); }
:root[data-theme="dark"] { --divider:rgba(255, 255, 255, .5); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --divider:rgba(255, 255, 255, .5); } }
.site-footer::before, .topbar::after { content:""; position:absolute; left:50%; height:1px; transform:translateX(-50%);
                                       background:linear-gradient(90deg, transparent, var(--divider), transparent); pointer-events:none; }
.site-footer::before { top:0; width:min(500px, 90%); }
.topbar::after { bottom:0; width:min(960px, 100%); }

/* Posts: author link, actions, edited, report */
.post-person { display:flex; align-items:center; gap:.6rem; min-width:0; color:var(--fg); text-decoration:none; }
.post-person:hover .post-author { text-decoration:underline; text-underline-offset:3px; }
.post-actions { display:flex; gap:1rem; align-items:center; }
.post-actions .link-button, .report summary { font-size:.85rem; }
.report { position:relative; }
.report summary { list-style:none; cursor:pointer; }
.report summary::-webkit-details-marker { display:none; }
.report[open] summary { color:var(--fg); }
.report-form { position:absolute; right:0; bottom:calc(100% + 8px); z-index:5; width:260px; padding:1rem; border:1px solid var(--border);
               border-radius:8px; background:var(--field); box-shadow:0 12px 32px rgba(0,0,0,.14); }
.report-form fieldset { border:0; padding:0; margin:0 0 .8rem; display:grid; gap:.45rem; }
.report-form legend { font-weight:600; margin-bottom:.4rem; font-size:.95rem; }
.report-form label { display:flex; gap:.5rem; align-items:center; font-size:.95rem; }
.composer-hint { margin-top:.35rem; }
.post-editing .field label { font-weight:600; }
.post-editing textarea { width:100%; padding:.75rem .85rem; font:inherit; font-size:1rem; line-height:1.5; color:var(--fg); resize:vertical;
                         background:var(--bg); border:1px solid var(--field-border); border-radius:7px; }

/* Profiles + connections */
.profile-head { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.profile-head h1 { margin:0; }
.avatar-lg { width:72px; height:72px; font-size:1.5rem; flex:none; }
.connect-row { margin-bottom:1.25rem; }
.connect-state { font-weight:600; color:var(--check); }
.person-list { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.person-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.person-row .connect-row { margin:0; }
.person-link { display:flex; align-items:center; gap:.7rem; color:var(--fg); text-decoration:none; min-width:0; }
.person-link:hover { text-decoration:underline; text-underline-offset:3px; }
.member-list a.member-name { color:var(--fg); text-decoration:none; }
.menu-header { text-decoration:none; color:var(--fg); }
.menu-header:hover .menu-username, .menu-header:focus-visible .menu-username { text-decoration:underline; }

/* Account Settings: left nav + panel */
.settings-layout { display:grid; grid-template-columns:180px 1fr; gap:2rem; align-items:start; margin-top:1rem; }
.settings-nav ul { list-style:none; margin:0; padding:0; display:grid; gap:.2rem; position:sticky; top:84px; }
.settings-nav a { display:block; padding:.55rem .8rem; border-radius:6px; color:var(--muted); text-decoration:none; }
.settings-nav a:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 6%, transparent); }
.settings-nav a[aria-current="page"] { color:var(--fg); font-weight:600; background:var(--picked-bg); }
.settings-nav a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.settings-panel { min-width:0; max-width:560px; }
.settings-panel .settings-first { border-top:0; padding-top:0; }
.panel-title { font-size:1.35rem; font-weight:700; margin-bottom:1rem; }
turbo-frame[aria-busy="true"] .settings-panel { opacity:.6; transition:opacity .15s; }
@media (max-width:700px) {
  .settings-layout { grid-template-columns:1fr; gap:1rem; }
  .settings-nav ul { position:static; display:flex; gap:.4rem; overflow-x:auto; }
  .settings-nav a { white-space:nowrap; }
}

/* Interests search */
.interest-search { margin-bottom:1.25rem; }
.interest-search input { width:100%; margin-top:.4rem; padding:.8rem .95rem; font:inherit; font-size:1.05rem; color:var(--fg);
                         background:var(--field); border:1px solid var(--field-border); border-radius:8px; }
.interest-search input:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.results-title { font-size:1rem; font-weight:700; margin-bottom:.75rem; }
.interest-results { margin-bottom:1.5rem; min-height:4rem; }
.chip-category { color:var(--muted); font-size:.85em; }
.add-interest { margin-top:1rem; }
.add-interest .help { margin-bottom:.5rem; }
.btn.btn-small { padding:.45rem .9rem; font-size:.9rem; }
.chip input:checked + .chip-body .chip-category { color:var(--fg); }
.chip-category { margin-left:.35em; }
.add-interest .button-row { gap:.5rem; }

/* Fail Pail error page */
.fail-pail img { width:200px; height:200px; margin-bottom:.5rem; }
.fail-pail p { margin-top:.75rem; max-width:28rem; color:var(--muted); line-height:1.5; }
.doc-header-public { display:flex; align-items:center; justify-content:space-between; }
.privacy-key { margin-bottom:1rem; }
.segment span { padding:.4rem .8rem; }
.splash .mantra { margin-top:.75rem; font-size:clamp(1.05rem, 2.6vw, 1.25rem); color:var(--muted); }
.settings-layout { margin-top:2rem; }
.post-group { font-size:.85rem; color:var(--muted); text-decoration:none; white-space:nowrap; }
.post-group:hover { color:var(--fg); text-decoration:underline; text-underline-offset:3px; }
.group-posts .composer { margin-bottom:1rem; }
.invite-note { margin-top:1rem; }

/* Compact composer: one-line pill that expands smoothly on focus */
.composer-wrap { margin-bottom:1.25rem; }
.composer-compact { padding:.85rem 1rem; margin:0; border:1px solid var(--border); border-radius:10px; background:var(--field);
                    box-shadow:0 1px 3px rgba(0,0,0,.05); }
.composer-row { display:flex; align-items:flex-start; gap:.75rem; }
.composer-row .avatar { flex:none; width:44px; height:44px; }
.composer-compact textarea { flex:1; min-width:0; min-height:44px; height:44px; padding:.65rem 1.1rem; font:inherit; font-size:1.05rem;
                             line-height:1.4; color:var(--fg); resize:none; overflow:hidden; border:1px solid transparent;
                             border-radius:7px; background:color-mix(in srgb, var(--fg) 6%, var(--field));
                             transition:height .25s ease, border-radius .25s ease, background-color .2s, border-color .2s; }
.composer-compact textarea::placeholder { color:var(--muted); }
.composer-compact textarea:focus { outline:none; border-color:var(--field-border); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent); }
.composer-compact.is-open textarea { height:7.5rem; overflow:auto; border-radius:10px; background:var(--bg); border-color:var(--field-border); }
.composer-extra { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s ease; }
.composer-compact.is-open .composer-extra { grid-template-rows:1fr; }
.composer-extra-inner { overflow:hidden; min-height:0; padding-left:calc(44px + .75rem); }
.composer-compact.is-open .composer-extra-inner { padding-top:.9rem; }
.composer-actions { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.composer-compact fieldset.field { margin-bottom:.9rem; }
@media (max-width:560px) { .composer-extra-inner { padding-left:0; } .composer-row .avatar { display:none; } }
@media (prefers-reduced-motion: reduce) { .composer-extra, .composer-compact textarea { transition:none; } }
.welcome-note { padding:1rem 1.15rem; margin-bottom:1.5rem; border-radius:10px; background:var(--picked-bg); border:1px solid var(--picked-border); line-height:1.55; }
.welcome-note p + p { margin-top:.5rem; }
.welcome-actions { position:sticky; bottom:16px; display:flex; justify-content:flex-end; margin-top:1.5rem; }

/* Squares with rounded edges, not circles */
.avatar { border-radius:7px; }
.avatar-sm { border-radius:6px; }
.avatar-lg { border-radius:10px; }
.theme-toggle { border-radius:7px; }
.account-button { border-radius:8px; }
.dot { border-radius:3px; }

/* Logo mark on log in / sign up / password screens */
.wordmark { display:flex; align-items:center; gap:.7rem; }
.wordmark .logo { height:2.4rem; }

/* Password strength meter */
.strength { display:flex; align-items:center; gap:.6rem; margin-top:.45rem; }
.strength-bar { flex:1; height:6px; border-radius:3px; background:var(--border); overflow:hidden; }
.strength-bar span { display:block; height:100%; width:0; border-radius:3px; transition:width .2s, background-color .2s; }
.strength[data-level="1"] .strength-bar span { width:33%; background:var(--danger); }
.strength[data-level="2"] .strength-bar span { width:66%; background:#c98a1b; }
.strength[data-level="3"] .strength-bar span { width:100%; background:var(--check); }
.strength-label { font-size:.82rem; color:var(--muted); white-space:nowrap; }

/* Home: posts ~70%, side column ~30% */
.page-home { max-width:1100px; }
.home-layout { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 3fr); gap:2rem; align-items:start; }
.home-side { position:sticky; top:84px; display:grid; gap:1.25rem; }
.side-section { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:10px; background:var(--field); }
.side-head { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.8rem; }
.side-head h2 { font-size:1rem; font-weight:700; }
.side-head a { font-size:.85rem; color:var(--muted); }
.side-head a:hover { color:var(--fg); }
.side-count { color:var(--muted); font-weight:500; }
.thumb-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:.75rem .5rem; }
.thumb { display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--fg); text-decoration:none; }
.thumb .avatar { width:48px; height:48px; }
.thumb-name { font-size:.78rem; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumb:hover .thumb-name { text-decoration:underline; text-underline-offset:2px; }
.side-groups { list-style:none; margin:0; padding:0; display:grid; gap:.25rem; }
.side-groups a { display:flex; flex-direction:column; padding:.45rem .55rem; margin:0 -.55rem; border-radius:6px; color:var(--fg); text-decoration:none; }
.side-groups a:hover { background:color-mix(in srgb, var(--fg) 6%, transparent); }
.side-group-name { font-weight:600; font-size:.95rem; }
.home-side .help a { color:var(--fg); }
@media (max-width:900px) {
  .home-layout { grid-template-columns:1fr; }
  .home-side { position:static; }
}
@media (max-width:900px) { .home-layout { grid-template-columns:minmax(0, 1fr); } }
.home-main, .home-side { min-width:0; }
.wordmark .wordmark-text { color:var(--fg); }
.wordmark .wordmark-text span { color:var(--accent); }

/* Post actions: Like / Reply / Pass It On (no like counts, ever) */
.post-actions-bar { display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; margin-top:.75rem; padding-top:.5rem; border-top:1px solid var(--border); }
.post-actions-bar form { margin:0; }
.action-button { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border:0; border-radius:6px; background:none;
                 color:var(--muted); font:inherit; font-size:.9rem; cursor:pointer; text-decoration:none; list-style:none; }
.action-button::-webkit-details-marker { display:none; }
.action-button:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 6%, transparent); }
.action-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.like-button[aria-pressed="true"] { color:var(--liked); }
.like-button[aria-pressed="true"] path { fill-opacity:1; }
.like-button:active svg { transform:scale(1.2); transition:transform .1s; }
.actions-spacer { flex:1; }
.post-actions-bar .link-button, .post-actions-bar .report summary { font-size:.85rem; margin-left:.5rem; }
.post-reason { margin-top:.5rem; }
.liked-by { margin-top:.6rem; font-size:.85rem; color:var(--muted); }
.forward-form textarea, .reply-form textarea { width:100%; padding:.55rem .7rem; font:inherit; font-size:.95rem; color:var(--fg); resize:vertical;
                                               background:var(--bg); border:1px solid var(--field-border); border-radius:6px; }
.forward-note, .pending-note { font-size:.85rem; color:var(--muted); margin:-.2rem 0 .5rem; }
.pending-note { color:#9a6a12; }
.post-pending { border-style:dashed; }
.forwarded { display:block; padding:.75rem .85rem; margin:.25rem 0 .75rem; border:1px solid var(--border); border-radius:8px;
             color:var(--fg); text-decoration:none; background:var(--bg); }
.forwarded:hover { border-color:var(--muted); }
.forwarded-head { display:flex; align-items:center; gap:.45rem; font-size:.88rem; margin-bottom:.35rem; flex-wrap:wrap; }
.forwarded-body { display:block; line-height:1.5; font-size:.95rem; }
.forwarded-gone { color:var(--muted); font-size:.9rem; }
.avatar-xs { width:24px; height:24px; font-size:.62rem; border-radius:6px; flex:none; text-decoration:none; }

/* Replies */
.replies { margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); display:grid; gap:.7rem; }
.reply { display:flex; gap:.6rem; align-items:flex-start; }
.reply-main { flex:1; min-width:0; }
.reply-head { font-size:.85rem; }
.reply-head a { color:var(--fg); font-weight:600; text-decoration:none; }
.reply-body { font-size:.95rem; line-height:1.5; overflow-wrap:anywhere; }
.reply-remove { font-size:.8rem; }
.reply-form { display:flex; gap:.5rem; align-items:flex-start; }
.reply-form textarea { flex:1; min-height:2.4rem; }

/* Group member management + moderation */
.member-manage { position:relative; margin-left:.5rem; }
.member-manage summary { list-style:none; font-size:.85rem; cursor:pointer; }
.member-manage summary::-webkit-details-marker { display:none; }
.member-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:5; min-width:180px; padding:.5rem; display:grid; gap:.2rem;
               border:1px solid var(--border); border-radius:7px; background:var(--field); box-shadow:0 12px 32px rgba(0,0,0,.14); }
.member-menu .link-button { display:block; width:100%; text-align:left; padding:.4rem .5rem; text-decoration:none; border-radius:6px; }
.member-menu .link-button:hover { background:color-mix(in srgb, var(--fg) 6%, transparent); }
.danger-link { color:var(--danger) !important; }
.mod-item { padding:1rem 0; border-top:1px solid var(--border); }
.mod-item:first-of-type { border-top:0; padding-top:0; }
.mod-meta { font-size:.88rem; color:var(--muted); margin-bottom:.4rem; }
.checkbox-field label { display:flex; align-items:center; gap:.55rem; font-weight:600; }
.checkbox-field input { width:auto; }

:root { --liked:#b83a55; }
:root[data-theme="dark"] { --liked:#ff7a93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --liked:#ff7a93; } }
/* Header spans the wider home layout on desktop */
.topbar-inner { max-width:1100px; }
.topbar::after { width:min(1100px, 100%); }

/* Tone on tone: contained areas are a slight shift of the page color, not a border.
   Borders stay transparent (not removed) so error states and Windows high contrast
   mode still draw them. Form field edges keep their border for contrast. */
:root { --surface:color-mix(in srgb, var(--fg) 4%, var(--bg)); --surface-2:color-mix(in srgb, var(--fg) 7.5%, var(--bg));
        --surface-3:color-mix(in srgb, var(--fg) 11%, var(--bg)); }
:root[data-theme="dark"] { --surface:color-mix(in srgb, var(--fg) 6%, var(--bg)); --surface-2:color-mix(in srgb, var(--fg) 10%, var(--bg));
                           --surface-3:color-mix(in srgb, var(--fg) 15%, var(--bg)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --surface:color-mix(in srgb, var(--fg) 6%, var(--bg)); --surface-2:color-mix(in srgb, var(--fg) 10%, var(--bg));
                            --surface-3:color-mix(in srgb, var(--fg) 15%, var(--bg)); }
}
.post, .composer, .composer-compact, .side-section, .group-link { background:var(--surface); border-color:transparent; box-shadow:none; }
.group-link:hover { border-color:transparent; background:var(--surface-2); }
.post-pending { border-color:var(--field-border); }
.forwarded { border-color:transparent; background:var(--surface-2); }
.forwarded:hover { border-color:transparent; background:var(--surface-3); }
.composer-compact textarea { background:var(--surface-2); }
.composer-compact.is-open textarea, .composer textarea, .post-editing textarea { background:var(--bg); }
.post-actions-bar { border-top:0; padding-top:0; }
.replies { border-top:0; padding:.75rem; border-radius:8px; background:color-mix(in srgb, var(--fg) 3.5%, var(--surface)); }
.reply-form textarea { background:var(--bg); }

.tag, .filter-pill { border-color:transparent; background:var(--surface-2); }
.post .tag { background:var(--surface-3); }
.tag-shared, .filter-pill[aria-current="true"] { border-color:transparent; background:var(--picked-bg); }
.filter-pill:hover { border-color:transparent; background:var(--surface-3); }
.chip-body { border-color:transparent; background:var(--surface-2); }
.chip:hover .chip-body { border-color:transparent; background:var(--surface-3); }
.chip input:checked + .chip-body { border-color:transparent; background:var(--picked-bg); }
.chip-pending .chip-body { border-color:var(--muted); }
.segmented { border-color:transparent; background:var(--surface-2); }
.segment input:checked + span { box-shadow:none; background:var(--bg); }
.btn-secondary { border-color:transparent; background:var(--surface-2); }
.btn-secondary:hover { opacity:1; background:var(--surface-3); }
.invite-banner, .invite-card, .welcome-note { border-color:transparent; }
.avatar { border:0; }
.account-button:hover, .account-button[aria-expanded="true"] { border-color:transparent; background:var(--surface-2); }

/* Pop-overs float on a shadow instead of an outline */
.menu, .report-form, .member-menu { border-color:transparent; box-shadow:0 12px 32px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06); }
.menu-header { border-bottom:0; }
.menu-footer { border-top:0; }

/* Lists and sections separate by space, not rules */
.settings-section { border-top:0; padding:1.25rem 0; }
.option-row { border-top:0; padding:.75rem 0; }
.mod-item { border-top:0; padding:1rem 1.1rem; margin-bottom:.75rem; border-radius:10px; background:var(--surface); }
.mod-item:first-of-type { padding-top:1rem; }

/* Icon-only actions (edit, delete) */
.icon-button { display:inline-grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:6px;
               background:none; color:var(--muted); cursor:pointer; text-decoration:none; }
.icon-button:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 7%, transparent); }
.icon-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.icon-button.reply-remove { width:28px; height:28px; }
.owner-actions { display:inline-flex; align-items:center; gap:.25rem; }
.owner-actions form { margin:0; }

/* Password show/hide */
.password-wrap { position:relative; display:block; }
.field .password-wrap input { padding-right:3rem; }
.password-toggle { position:absolute; top:50%; right:6px; transform:translateY(-50%); display:grid; place-items:center;
                   width:36px; height:36px; padding:0; border:0; border-radius:6px; background:none; color:var(--muted); cursor:pointer; }
.password-toggle:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 7%, transparent); }
.password-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:0; }
.password-toggle .eye-slash { display:none; }
.password-toggle[aria-pressed="true"] .eye-slash { display:inline; }
.password-toggle[aria-pressed="true"] { color:var(--fg); }

/* Modal dialogs (Pass It On) */
.modal { width:min(520px, calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:0; border-radius:12px;
         color:var(--fg); background:var(--bg); box-shadow:0 24px 64px rgba(0,0,0,.28); }
.modal[open] { animation:modal-in .18s ease-out; }
.modal::backdrop { background:rgba(0,0,0,.45); }
@keyframes modal-in { from { opacity:0; transform:translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation:none; } }
body:has(dialog[open]) { overflow:hidden; }
.forward-form { display:grid; gap:.6rem; }
.modal .forward-form { padding:1.1rem 1.25rem 1.25rem; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.25rem; }
.modal-title { font-size:1.25rem; font-weight:700; letter-spacing:-.01em; }
.modal-close { margin-right:-.4rem; }
.forward-preview { margin:0 0 .4rem; background:var(--surface-2); }
.forward-form textarea { padding:.65rem .8rem; font-size:1rem; }
.modal-actions { justify-content:flex-end; margin-top:.35rem; }
.forward-page [data-modal-close] { display:none; }
.forward-page .modal-actions { justify-content:flex-start; }

/* Notifications: bell + badge */
:root { --badge:#d93a2f; }
:root[data-theme="dark"] { --badge:#e5484d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --badge:#e5484d; } }
.topbar-bell { position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:7px; color:var(--muted); text-decoration:none; }
.topbar-bell:hover, .topbar-bell[aria-current="page"] { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); }
.topbar-bell:focus-visible, .tab:focus-visible, .topbar-mark:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.badge { position:absolute; top:3px; right:1px; display:grid; place-items:center; min-width:18px; height:18px; padding:0 5px;
         border-radius:9px; font-size:.68rem; font-weight:700; line-height:1; color:#ffffff; background:var(--badge);
         box-shadow:0 0 0 2px var(--bg); }

.notice-list { list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.notice-link { display:flex; align-items:flex-start; gap:.75rem; padding:.8rem .9rem; border-radius:10px; color:var(--fg); text-decoration:none; }
.notice-link:hover { background:var(--surface); }
.notice-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.notice-unread .notice-link { background:var(--surface); }
.notice-unread .notice-link:hover { background:var(--surface-2); }
.notice-unread .notice-text::before { content:""; display:inline-block; width:.5rem; height:.5rem; margin-right:.45rem; border-radius:2px;
                                      background:var(--badge); vertical-align:.1em; }
.notice-main { display:grid; gap:.2rem; min-width:0; line-height:1.4; }
.notice-text strong { font-weight:600; }
.notice-excerpt { color:var(--muted); font-size:.92rem; overflow-wrap:anywhere; }
.notice-time { color:var(--muted); font-size:.82rem; }

/* Phones: logo mark centered in the header; shortcuts in a bar along the bottom */
.tabbar { display:none; }
@media (max-width:560px) {
  .topbar-inner { grid-template-columns:1fr auto 1fr; }
  .topbar-wordmark { display:flex; grid-column:1; font-size:1.35rem; }
  .brand-tail { display:none; }
  .topbar-mark { grid-column:2; justify-self:center; }
  .topbar-mark .logo { height:34px; }
  .topbar-actions { grid-column:3; }
  .topbar-bell { display:none; }

  .tabbar { position:fixed; left:0; right:0; bottom:0; z-index:15; display:flex; justify-content:space-around; align-items:center;
            padding:6px 12px calc(6px + env(safe-area-inset-bottom));
            background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .tabbar::before { content:""; position:absolute; top:0; left:50%; width:100%; height:1px; transform:translateX(-50%);
                    background:linear-gradient(90deg, transparent, var(--divider), transparent); }
  .tab { position:relative; display:grid; place-items:center; width:56px; height:44px; border-radius:8px; color:var(--muted); text-decoration:none; }
  .tab[aria-current="page"] { color:var(--fg); background:var(--surface-2); }
  .tab .badge { top:2px; right:8px; }
  body:has(.tabbar) { padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  .welcome-actions { bottom:calc(72px + env(safe-area-inset-bottom)); }
}

/* Softer boxes: a lighter tone shift plus a small drop shadow */
:root { --surface:color-mix(in srgb, var(--fg) 2.5%, var(--bg)); --surface-2:color-mix(in srgb, var(--fg) 5%, var(--bg));
        --surface-3:color-mix(in srgb, var(--fg) 8%, var(--bg));
        --box-shadow:0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04); }
:root[data-theme="dark"] { --surface:color-mix(in srgb, var(--fg) 4.5%, var(--bg)); --surface-2:color-mix(in srgb, var(--fg) 7.5%, var(--bg));
                           --surface-3:color-mix(in srgb, var(--fg) 11%, var(--bg));
                           --box-shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --surface:color-mix(in srgb, var(--fg) 4.5%, var(--bg)); --surface-2:color-mix(in srgb, var(--fg) 7.5%, var(--bg));
                            --surface-3:color-mix(in srgb, var(--fg) 11%, var(--bg));
                            --box-shadow:0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.25); }
}
.post, .composer, .composer-compact, .side-section, .group-link, .mod-item, .notice-unread .notice-link { box-shadow:var(--box-shadow); }

/* Edit + delete: larger icons, sitting together */
.owner-actions { gap:0; }
.owner-actions .icon-button { width:38px; height:38px; }
.owner-actions .icon-button svg { width:21px; height:21px; }

/* Post delete with undo: dimmed, spinner on top, Undo Delete where the icons were */
.post { position:relative; }
.post.is-deleting > :not(.delete-overlay) { opacity:.35; transition:opacity .2s; }
.post.is-deleting .post-actions-bar { opacity:1; }
.post.is-deleting .post-actions-bar > :not(.undo-button) { opacity:.35; }
.delete-overlay { position:absolute; inset:0; z-index:2; display:grid; place-items:center; border-radius:inherit;
                  background:color-mix(in srgb, var(--fg) 10%, transparent); }
.spinner { width:28px; height:28px; border:3px solid color-mix(in srgb, var(--fg) 25%, transparent); border-top-color:var(--fg);
           border-radius:50%; animation:chip-spin .8s linear infinite; }
.undo-button { position:relative; z-index:3; display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .7rem; border:0; border-radius:6px;
               font:inherit; font-size:.88rem; font-weight:600; color:var(--bg); background:var(--fg); cursor:pointer; }
.undo-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.inline-notice { padding:.85rem 1.1rem; border-radius:10px; font-size:.92rem; color:var(--muted); background:var(--surface); }
.inline-error { margin-top:.6rem; color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.reply-deleted { padding:.35rem .6rem; font-size:.85rem; background:none; }

/* Reply delete: shrinks from right to left */
.reply.is-shrinking { transform-origin:left center; animation:reply-shrink .35s ease-in forwards; }
@keyframes reply-shrink { to { transform:scaleX(0); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration:2s; } }

/* @mention picker */
.mention-list { position:fixed; z-index:60; max-height:250px; overflow-y:auto; margin:0; padding:.35rem; list-style:none;
                border-radius:8px; background:var(--field); box-shadow:0 12px 32px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); }
.mention-option { display:flex; align-items:center; gap:.5rem; padding:.45rem .55rem; border-radius:6px; cursor:pointer; font-size:.92rem; }
.mention-option[aria-selected="true"], .mention-option:hover { background:var(--surface-2); }
.mention-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mention-option .member-username { font-size:.85rem; white-space:nowrap; }
.mention { font-weight:600; text-decoration:none; color:var(--fg); }
.mention:hover { text-decoration:underline; text-underline-offset:3px; }

html:not(.js) .js-only { display:none; }

/* Just My Connections: a highlighted switch above the feed */
.feed-mode { display:flex; align-items:center; gap:.85rem; margin-bottom:1rem; padding:.85rem 1rem; border-radius:10px;
             background:var(--picked-bg); box-shadow:var(--box-shadow); }
.feed-mode-icon { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:8px; color:var(--check);
                  background:color-mix(in srgb, var(--bg) 70%, transparent); }
.feed-mode-text { flex:1; min-width:0; display:grid; gap:.1rem; }
.feed-mode-title { font-weight:700; }
.feed-mode-help { font-size:.88rem; line-height:1.4; color:var(--muted); }
.switch { flex:none; position:relative; width:52px; height:30px; padding:0; border:0; border-radius:15px; cursor:pointer;
          background:var(--field-border); transition:background-color .2s; }
.switch-thumb { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#ffffff;
                box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.switch[aria-checked="true"] { background:var(--check); }
.switch[aria-checked="true"] .switch-thumb { transform:translateX(22px); }
.switch:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Your Interests in the sidebar (desktop); pills above the feed on smaller screens */
.side-list { list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.side-interest { display:block; padding:.45rem .55rem; margin:0 -.55rem; border-radius:6px; color:var(--fg); text-decoration:none; font-size:.95rem; }
.side-interest:hover { background:var(--surface-2); }
.side-interest[aria-current="true"] { font-weight:600; background:var(--picked-bg); }
.side-interest:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.side-more { display:grid; grid-template-rows:1fr; }
.js .side-more { grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.js .side-more.is-open { grid-template-rows:1fr; }
.side-more-inner { overflow:hidden; min-height:0; padding-top:.15rem; }
.side-more-toggle { margin-top:.5rem; padding:0; border:0; background:none; font:inherit; font-size:.85rem; color:var(--muted);
                    text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.side-more-toggle:hover { color:var(--fg); }
@media (prefers-reduced-motion: reduce) { .js .side-more { transition:none; } }
@media (min-width:901px) { .home-main .feed-filter { display:none; } }
@media (max-width:900px) { .side-interests { display:none; } }

/* Birthdate: month / day / year dropdowns */
fieldset.field legend { padding:0; margin-bottom:.4rem; font-size:.9rem; font-weight:600; }
.date-selects { display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:.5rem; }
.field select { width:100%; min-width:0; padding:.75rem .85rem; font:inherit; font-size:1rem; color:var(--fg);
                background:var(--field); border:1px solid var(--field-border); border-radius:7px; }
.field select:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.field-error select { border-color:var(--danger); }

/* Group pages: confirm dialogs, invite your connections */
.modal .modal-body { display:grid; gap:.6rem; padding:1.1rem 1.25rem 1.25rem; }
.modal .modal-body .lede { margin:0; }
.subhead { margin:1.25rem 0 .6rem; font-size:.95rem; font-weight:700; }
.invite-connections { max-height:340px; overflow-y:auto; margin-bottom:.75rem; }
.invite-connections form { margin:0; }
.welcome-actions { align-items:center; gap:.85rem; }
.welcome-later { font-size:.9rem; color:var(--muted); }

/* Feed frame: switching Just My Connections reloads only the feed */
turbo-frame#feed { display:block; }
turbo-frame#feed[aria-busy="true"] .feed { opacity:.5; transition:opacity .15s; }
/* Dark mode: a bolder, solid green card */
:root[data-theme="dark"] .feed-mode { background:color-mix(in srgb, #6cc497 30%, var(--bg)); }
:root[data-theme="dark"] .feed-mode-help { color:color-mix(in srgb, var(--fg) 78%, transparent); }
:root[data-theme="dark"] .switch[aria-checked="false"] { background:color-mix(in srgb, var(--bg) 55%, var(--field-border)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .feed-mode { background:color-mix(in srgb, #6cc497 30%, var(--bg)); }
  :root:not([data-theme]) .feed-mode-help { color:color-mix(in srgb, var(--fg) 78%, transparent); }
}

/* Sidebar interests as boxed tags */
.side-interests .side-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.side-interests .side-interest { margin:0; padding:.35rem .7rem; font-size:.88rem; border-radius:6px; background:var(--surface-2); }
.side-interests .side-interest:hover { background:var(--surface-3); }
.side-interests .side-interest[aria-current="true"] { background:var(--picked-bg); }
.side-interests .side-more-inner { padding-top:.4rem; }

/* Anything marked hidden stays hidden, even if a rule above sets display. */
[hidden] { display:none !important; }