/* 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:#66666b; --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; margin-inline:auto; 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; }
@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 { position:relative; padding-bottom:2.6rem; }
.side-edit { position:absolute; right:.5rem; bottom:.5rem; width:34px; height:34px; }

/* Messages (end-to-end encrypted) */
.dm-callout { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:1.25rem; padding:.8rem 1rem; border-radius:10px;
              font-size:.92rem; line-height:1.45; background:var(--picked-bg); box-shadow:var(--box-shadow); }
.dm-callout-icon { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:8px; color:var(--check);
                   background:color-mix(in srgb, var(--bg) 70%, transparent); }
:root[data-theme="dark"] .dm-callout { background:color-mix(in srgb, #6cc497 30%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .dm-callout { background:color-mix(in srgb, #6cc497 30%, var(--bg)); } }
.dm-panel h2 { font-size:1.2rem; margin-bottom:.75rem; }
.dm-panel form { margin-top:1rem; }
.dm-forgot { margin-top:1.5rem; }
.dm-forgot[open] summary { margin-bottom:.75rem; }
.dm-device { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem; }
.dm-device details[open] { flex-basis:100%; }
.dm-device form { margin-top:1rem; max-width:400px; }

.dm-list { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.35rem; }
.dm-row { display:flex; align-items:center; gap:.75rem; padding:.75rem .85rem; border-radius:10px; color:var(--fg); text-decoration:none; }
.dm-row:hover { background:var(--surface); }
.dm-row:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dm-row-unread { background:var(--surface); box-shadow:var(--box-shadow); }
.dm-row-main { flex:1; min-width:0; display:grid; gap:.1rem; }
.dm-row-name { font-weight:600; }
.dm-row-unread .dm-row-name::after { content:""; display:inline-block; width:.5rem; height:.5rem; margin-left:.45rem; border-radius:2px;
                                     background:var(--badge); vertical-align:.1em; }
.dm-row-preview { color:var(--muted); font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dm-row-time { flex:none; color:var(--muted); font-size:.8rem; }

.dm-chat-head { margin-bottom:1rem; }
.dm-chat-head h1 { margin:0; font-size:1.5rem; }
.dm-messages { list-style:none; margin:0 0 1rem; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.dm { max-width:80%; display:grid; gap:.15rem; }
.dm-mine { align-self:flex-end; justify-items:end; }
.dm-theirs { align-self:flex-start; }
.dm-body { padding:.55rem .8rem; border-radius:12px; line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.dm-mine .dm-body { color:var(--bg); background:var(--fg); border-bottom-right-radius:4px; }
.dm-theirs .dm-body { background:var(--surface-2); border-bottom-left-radius:4px; }
.dm-locked .dm-body { font-style:italic; color:var(--muted); background:var(--surface); }
.dm-time { font-size:.75rem; color:var(--muted); padding:0 .25rem; }
.dm-compose { position:sticky; bottom:0; display:flex; gap:.5rem; align-items:flex-end; padding:.75rem 0; background:var(--bg); }
.dm-compose textarea { flex:1; min-height:2.6rem; max-height:10rem; padding:.6rem .8rem; font:inherit; font-size:1rem; color:var(--fg); resize:vertical;
                       background:var(--field); border:1px solid var(--field-border); border-radius:8px; }
.dm-compose textarea:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
@media (max-width:560px) { .dm-compose { bottom:calc(56px + env(safe-area-inset-bottom)); } .dm { max-width:88%; } }

/* Logged-out home: selling points */
.selling-points { list-style:none; margin:3rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem;
                  max-width:640px; text-align:left; }
.selling-points li { display:grid; gap:.35rem; align-content:start; padding:1.1rem 1.2rem; border-radius:10px; background:var(--surface); box-shadow:var(--box-shadow); }
.selling-points strong { font-size:1.05rem; }
.selling-points li > span:last-child { color:var(--muted); line-height:1.5; font-size:.95rem; }
.selling-icon { display:grid; place-items:center; width:40px; height:40px; margin-bottom:.25rem; border-radius:8px; color:var(--check); background:var(--picked-bg); }
@media (max-width:560px) { .selling-points { grid-template-columns:1fr; margin-top:2rem; } }

/* Light mode boxes: a touch more tone */
:root { --surface:color-mix(in srgb, var(--fg) 3.5%, var(--bg)); --surface-2:color-mix(in srgb, var(--fg) 6.5%, var(--bg));
        --surface-3:color-mix(in srgb, var(--fg) 10%, var(--bg)); }

/* Phones: nothing may make the page wider than the screen */
html, body { overflow-x:clip; }
.reply-form textarea, .dm-compose textarea, .chip-add input { min-width:0; }
.reply-form { min-width:0; }
.post, .post-body, .reply-main { min-width:0; }

/* Post card: a quiet divider above the actions */
.post-actions-bar { margin-top:.8rem; padding-top:.45rem; border-top:1px solid color-mix(in srgb, var(--fg) 9%, transparent); }
.post-reason { margin-top:.6rem; }
.post-actions-bar .report summary { margin-left:0; font-size:.9rem; }

/* Curiosity chips: tap to show only (green), again to hide (red), again to clear */
a.tag-link { color:var(--fg); text-decoration:none; }
a.tag-link:hover { background:var(--surface-3); }
a.tag-link.tag-shared:hover { background:color-mix(in srgb, #6cc497 34%, transparent); }
a.tag-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.side-hint { margin:-.4rem 0 .7rem; font-size:.78rem; }
.side-interest, .filter-pill { display:inline-flex; align-items:center; gap:.3rem; }
.side-interests .side-interest.is-in, .feed-filter .filter-pill.is-in { font-weight:600; color:var(--fg); background:var(--picked-bg); }
.side-interests .side-interest.is-out, .feed-filter .filter-pill.is-out { color:var(--danger); background:color-mix(in srgb, var(--danger) 13%, transparent); text-decoration:line-through; text-decoration-thickness:1px; }
.side-interest.is-in .chip-mark { color:var(--check); }
.filter-banner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem;
                 padding:.7rem .9rem; border-radius:10px; background:var(--surface); box-shadow:var(--box-shadow); }
.filter-banner form { margin:0; }
.inviter-help { margin:-.4rem 0 .6rem; }


/* Logged-out home: three selling points */
.selling-points { grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:900px; }
@media (max-width:760px) { .selling-points { grid-template-columns:1fr; max-width:460px; } }

@media (max-width:560px) { .post-actions-bar .report .action-label { display:none; } }

/* Group stats and admins */
.stat-grid { list-style:none; margin:1.25rem 0 .5rem; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; }
.stat { display:grid; gap:.1rem; padding:.9rem 1rem; border-radius:10px; background:var(--surface); box-shadow:var(--box-shadow); }
.stat-value { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; }
.stat-label { font-weight:600; font-size:.9rem; }
.stat-note { font-size:.8rem; color:var(--muted); }
@media (max-width:560px) { .stat-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.rank-list { margin:0; padding-left:1.25rem; display:grid; gap:.35rem; }
.rank-list li span:last-child, .rank-list li a + span { float:right; color:var(--muted); font-size:.9rem; }
.admin-list { margin:.75rem 0; }
.select { 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; }
.profile-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.profile-actions .connect-row { margin:0; }
.profile-block { font-size:.9rem; }

/* Search: magnifier next to the wordmark; a row with a big box under the top bar */
.topbar-start { justify-self:start; display:flex; align-items:center; gap:.35rem; min-width:0; }
.search-toggle { display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:7px; background:none; color:var(--muted); cursor:pointer; }
.search-toggle:hover, .search-toggle[aria-expanded="true"] { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); }
.search-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.search-row { max-width:1100px; margin:0 auto; padding:0 16px 14px; }
.search-input { width:100%; padding:.85rem 1.1rem; font:inherit; font-size:1.2rem; color:var(--fg); background:var(--field);
                border:1px solid var(--field-border); border-radius:10px; }
.search-input:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.search-dropdown { display:block; }
.search-dropdown:not(:empty) { margin-top:.6rem; max-height:min(70vh, 640px); overflow-y:auto; padding:.75rem 1rem; border-radius:10px;
                               background:var(--bg); box-shadow:0 12px 32px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.06); }
.search-section + .search-section { margin-top:1rem; }
.search-section h2 { font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.search-list { list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.search-hit { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem .5rem; margin:0 -.5rem; border-radius:7px; color:var(--fg); text-decoration:none; }
.search-hit:hover, .search-hit:focus-visible { background:var(--surface-2); outline:none; }
.search-sub { color:var(--muted); font-size:.88rem; }
.search-body { display:block; color:var(--muted); font-size:.92rem; line-height:1.4; overflow-wrap:anywhere; }
.search-group-mark { background:var(--surface-3); }
.search-more { margin-top:.9rem; font-size:.9rem; }
.search-note { margin:.25rem 0; }
.search-page-form { margin-bottom:1.5rem; }
@media (max-width:560px) {
  .topbar-start { grid-column:1; }
  .topbar-start .topbar-wordmark { display:flex; }
}

.dm-suggest { margin:-.25rem 0 1rem; }
.dm-phrase { margin-top:.6rem; padding:.7rem .85rem; border-radius:8px; background:var(--surface-2); line-height:1.5; }
.dm-phrase strong { font-size:1.1rem; letter-spacing:.01em; }

/* Profile: hero card, then posts with an About sidebar */
.page-profile { padding-top:32px; }
.profile-hero { position:relative; z-index:2; margin-bottom:1.75rem; border-radius:12px; background:var(--surface); box-shadow:var(--box-shadow); }
.profile-cover { height:120px; border-radius:12px 12px 0 0;
                 background:linear-gradient(120deg, color-mix(in srgb, #6cc497 38%, var(--bg)), color-mix(in srgb, #6cc497 12%, var(--bg)) 55%, color-mix(in srgb, var(--fg) 6%, var(--bg))); }
.profile-hero-body { display:flex; align-items:flex-end; gap:1.25rem; flex-wrap:wrap; padding:0 1.5rem; margin-top:-48px; }
.profile-avatar { flex:none; width:112px; height:112px; border-radius:16px; font-size:2.3rem; box-shadow:0 0 0 5px var(--surface), 0 6px 18px rgba(0,0,0,.12); }
.profile-id { flex:1; min-width:220px; padding-top:56px; }
.profile-id h1 { margin:0; font-size:clamp(1.7rem, 4vw, 2.3rem); line-height:1.15; }
.profile-handle { color:var(--muted); margin-top:.15rem; }
.profile-meta { display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin-top:.6rem; font-size:.9rem; color:var(--muted); }
.profile-meta span { display:inline-flex; align-items:center; gap:.35rem; }
.icon-inline { flex:none; color:var(--muted); }
.profile-cta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-bottom:.25rem; }
.profile-cta .connect-row { margin:0; }
.profile-more { position:relative; }
.profile-more summary { list-style:none; cursor:pointer; }
.profile-more summary::-webkit-details-marker { display:none; }
.profile-more .member-menu { right:0; left:auto; min-width:200px; }
.profile-more .member-menu .link-button { white-space:nowrap; }
.profile-stats { list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; margin:1.1rem 0 0; padding:1rem 1.5rem 1.2rem;
                 border-top:1px solid color-mix(in srgb, var(--fg) 7%, transparent); color:var(--muted); font-size:.92rem; }
.profile-stats strong { color:var(--fg); font-size:1.1rem; margin-right:.2rem; }
.profile-shared strong { color:var(--check); }
.profile-note { padding:0 1.5rem 1.1rem; margin-top:-.4rem; }
.profile-section-title { font-size:1.15rem; font-weight:700; margin:0 0 .85rem; }
.profile-empty { padding:1.25rem; }
.side-facts { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.side-facts li { display:flex; align-items:flex-start; gap:.55rem; line-height:1.35; }
.side-facts .icon-inline { margin-top:.15rem; }
.side-foot { margin-top:.7rem; font-size:.8rem; }
.profile-side .tag-list { gap:.4rem; }
@media (max-width:560px) {
  .profile-cover { height:88px; }
  .profile-hero-body { padding:0 1rem; margin-top:-40px; gap:.75rem; }
  .profile-avatar { width:84px; height:84px; font-size:1.7rem; }
  .profile-id { padding-top:0; min-width:100%; }
  .profile-stats { padding:.9rem 1rem 1rem; gap:.35rem 1.1rem; }
  .profile-note { padding:0 1rem 1rem; }
}

.connected-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; border-radius:7px; font-size:.9rem;
                   font-weight:600; color:var(--check); background:var(--picked-bg); }
.page-profile .post-reason { display:none; }
.profile-side .side-interests { display:block; }
.profile-more .member-menu form { margin:0; }

/* No drop shadows on boxes; tone alone sets them apart. (Pop-up menus and dialogs keep theirs.) */
:root, :root[data-theme="dark"] { --box-shadow:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --box-shadow:none; } }
.profile-avatar { box-shadow:0 0 0 5px var(--surface); }

/* Post time sits in the action row, below the divider */
.post-actions-bar .post-time { margin-left:0; padding:0 .4rem; font-size:.82rem; color:var(--muted); white-space:nowrap; }

/* Group posts: one rectangle, darker "Group Post" then the group's name, both purple */
:root { --group-dark:#6a4bc4; --group-light:#ece6fb; --group-light-fg:#4a2f99; }
:root[data-theme="dark"] { --group-dark:#7d5fe0; --group-light:#30264f; --group-light-fg:#ddd2ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --group-dark:#7d5fe0; --group-light:#30264f; --group-light-fg:#ddd2ff; } }
.group-pill { margin-left:auto; display:inline-flex; align-items:stretch; max-width:60%; border-radius:6px; overflow:hidden;
              font-size:.8rem; line-height:1.2; text-decoration:none; }
.group-pill-label { flex:none; padding:.3rem .55rem; font-weight:700; color:#ffffff; background:var(--group-dark); }
.group-pill-name { min-width:0; padding:.3rem .6rem; font-weight:600; color:var(--group-light-fg); background:var(--group-light);
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.group-pill:hover .group-pill-name { text-decoration:underline; text-underline-offset:2px; }
.group-pill:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Share dialog */
.share-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.5rem; margin-top:.25rem; }
.share-option { display:grid; justify-items:center; gap:.4rem; padding:.85rem .5rem; border:0; border-radius:8px; font:inherit; font-size:.88rem;
                font-weight:600; color:var(--fg); background:var(--surface-2); text-decoration:none; cursor:pointer; }
.share-option:hover { background:var(--surface-3); }
.share-option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.share-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:8px; font-weight:800; font-size:1rem; color:#ffffff; background:#555; }
.share-tiktok { background:#111111; }
.share-instagram { background:linear-gradient(135deg, #f58529, #dd2a7b 55%, #8134af); }
.share-facebook { background:#1877f2; font-size:1.3rem; }
.share-reddit { background:#ff4500; font-size:.85rem; }
.share-status { min-height:1.2em; margin-top:.5rem; }
.detail-join { margin-top:1.25rem; }
@media (max-width:420px) { .share-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* Logged-out pages: leave room for the fixed light/dark button */
.doc-header-public { padding-right:64px; }

/* Curiosity filter chips in a state: split rectangle, darker label then the name */
:root { --hide-dark:#6b6b72; --hide-light:color-mix(in srgb, var(--fg) 7%, var(--bg)); --show-dark:#2e8b57; }
:root[data-theme="dark"] { --hide-dark:#55555c; --show-dark:#3f9e6c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --hide-dark:#55555c; --show-dark:#3f9e6c; } }
.side-interests .side-interest.chip-split, .feed-filter .filter-pill.chip-split {
  display:inline-flex; align-items:stretch; gap:0; padding:0; overflow:hidden; text-decoration:none; font-weight:600; }
.chip-split-label { display:inline-flex; align-items:center; gap:.3rem; padding:.35rem .5rem; font-size:.78rem; font-weight:700; color:#ffffff; }
.chip-split-name { display:inline-flex; align-items:center; padding:.35rem .65rem; }
.chip-split.is-in .chip-split-label { background:var(--show-dark); }
.chip-split.is-in .chip-split-name { color:var(--fg); background:var(--picked-bg); }
.chip-split.is-out .chip-split-label { background:var(--hide-dark); }
.chip-split.is-out .chip-split-name { color:var(--muted); background:var(--hide-light); }
.side-interests .side-interest.chip-split.is-in, .side-interests .side-interest.chip-split.is-out,
.feed-filter .filter-pill.chip-split.is-in, .feed-filter .filter-pill.chip-split.is-out { color:inherit; background:none; text-decoration:none; }
.chip-split:hover .chip-split-name { text-decoration:underline; text-underline-offset:2px; }

/* Endless scroll: each batch is a frame that fits into the feed's grid */
turbo-frame.feed-more { display:grid; gap:.85rem; }
.feed-more-link { display:flex; justify-content:center; padding:.5rem 0 1rem; }
turbo-frame.feed-more[aria-busy="true"] .feed-more-link a { opacity:.5; pointer-events:none; }
turbo-frame.feed-more[aria-busy="true"] .feed-more-link a::after { content:"…"; }

/* Post header: never squeeze a name. If the name and the group label don't fit on one line,
   the label wraps to the next line instead. Names break between words only. */
.post-head { flex-wrap:wrap; row-gap:.45rem; }
.post-person { min-width:auto; flex:0 1 auto; }
.post-author { overflow-wrap:normal; }
.group-pill { max-width:100%; }

/* Just My Connections floats on the page background (no box) */
.feed-mode, :root[data-theme="dark"] .feed-mode { padding:.35rem .15rem; background:none; box-shadow:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .feed-mode { background:none; } }
.feed-mode-icon { background:var(--picked-bg); }

/* Sidebar curiosities, a little bigger */
.side-interests .side-interest { padding:.45rem .85rem; font-size:.95rem; }
.side-interests .side-list { gap:.5rem; }
.chip-split-label { padding:.45rem .6rem; font-size:.82rem; }
.chip-split-name { padding:.45rem .8rem; }

/* Group label, swapped and richer: light "Group Post", deep purple group name */
:root { --group-label-bg:#d6c6ff; --group-label-fg:#34138f; --group-name-bg:#5a28d6; --group-name-fg:#ffffff; }
:root[data-theme="dark"] { --group-label-bg:#c5b0ff; --group-label-fg:#1f0b5c; --group-name-bg:#6a3cf0; --group-name-fg:#ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --group-label-bg:#c5b0ff; --group-label-fg:#1f0b5c; --group-name-bg:#6a3cf0; --group-name-fg:#ffffff; } }
.group-pill-label { color:var(--group-label-fg); background:var(--group-label-bg); }
.group-pill-name { color:var(--group-name-fg); background:var(--group-name-bg); }

.profile-curiosities { margin-top:1.1rem; padding:1rem 1.5rem 1.2rem; border-top:1px solid color-mix(in srgb, var(--fg) 7%, transparent); }
.profile-curiosities .tag-list { gap:.45rem; }
.profile-curiosities .tag { padding:.4rem .8rem; font-size:.92rem; }
.profile-curiosities .help { margin-top:.6rem; font-size:.8rem; }
@media (max-width:560px) { .profile-curiosities { padding:.9rem 1rem 1rem; } }

/* Group page: same layout as profiles, in the group purple */
.group-cover { background:linear-gradient(120deg, color-mix(in srgb, #6a3cf0 34%, var(--bg)), color-mix(in srgb, #6a3cf0 12%, var(--bg)) 55%, color-mix(in srgb, var(--fg) 6%, var(--bg))); }
.group-avatar { color:var(--group-name-fg); background:var(--group-name-bg); }
.group-hero-about { margin:1rem 1.5rem 0; line-height:1.6; }
.avatar-staff { box-shadow:inset 0 0 0 2px var(--group-name-bg); }
.thumb-role { font-size:.68rem; font-weight:600; color:var(--muted); margin-top:-.15rem; }
.profile-side .member-list { gap:.5rem; }
.profile-side .member-list li { flex-wrap:wrap; }
.profile-side .chip-add { flex-wrap:wrap; }
.profile-side .invite-connections { max-height:260px; }
@media (max-width:560px) { .group-hero-about { margin:1rem 1rem 0; } }

/* My Curiosities: pencil sits in the heading row, so the box has even padding */
.side-interests { padding-bottom:1rem; }
.side-head-actions { display:inline-flex; align-items:center; gap:.4rem; }
.side-interests .side-head { align-items:center; }
.side-interests .side-edit { position:static; width:30px; height:30px; margin:-.4rem -.45rem -.4rem 0; }

/* Posts: even space top and bottom. The action buttons carry their own padding (for easy tapping),
   so the row is pulled out by that much and the visible edges line up with the card's padding. */
.post-actions-bar { margin:.8rem -.6rem -.5rem; padding-left:0; padding-right:0; }
.post-actions-bar::before { content:""; }
.post-actions-bar { border-top:0; position:relative; padding-top:.45rem; }
.post-actions-bar::before { position:absolute; top:0; left:.6rem; right:.6rem; height:1px; background:color-mix(in srgb, var(--fg) 9%, transparent); }

/* Sidebar boxes: equal space top and bottom, whatever comes last */
.side-section > :last-child, .side-section > :last-child > :last-child { margin-bottom:0; }

/* Manage Members in the narrow sidebar: avatar | name over handle | role or Manage */
.profile-side .member-list li { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; column-gap:.6rem; row-gap:0; }
.profile-side .member-list .member-name { display:grid; line-height:1.3; font-size:.95rem; }
.profile-side .member-list .member-username { font-size:.8rem; }
.profile-side .member-list .member-role { margin:0; grid-column:3; }
.profile-side .member-list .member-manage { margin:0; grid-column:3; justify-self:end; }
.profile-side .member-list .member-role + .member-manage { grid-row:2; }

/* Sidebar boxes: a quiet divider between the title row and what's below it */
.side-head { padding-bottom:.7rem; margin-bottom:.85rem; border-bottom:1px solid color-mix(in srgb, var(--fg) 9%, transparent); }

/* Logged-out home: four selling points in a 2x2 grid */
.selling-points { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:720px; }
@media (max-width:640px) { .selling-points { grid-template-columns:1fr; max-width:460px; } }

/* Friend Suggestions */
.friend-suggestions > .help { margin-bottom:.8rem; }
.suggestion-list { list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.suggestion { display:flex; align-items:center; gap:.65rem; padding:.4rem .5rem; margin:0 -.5rem; border-radius:7px; color:var(--fg); text-decoration:none; }
.suggestion:hover { background:var(--surface-2); }
.suggestion:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.suggestion-main { display:grid; min-width:0; line-height:1.3; }
.suggestion-name { font-weight:600; }
.suggestion-meta { font-size:.8rem; color:var(--muted); }

/* Just My Connections: just the words and the switch */
.feed-mode, :root[data-theme="dark"] .feed-mode { display:flex; align-items:center; justify-content:flex-start; gap:.75rem; padding:0; margin-bottom:1rem; }
.feed-mode .feed-mode-title { font-weight:600; }

/* Group posts: small "Posted in:" then the group's name on deep red */
.group-posted { margin-left:auto; display:inline-flex; align-items:center; gap:.45rem; max-width:100%; min-width:0; }
.group-posted-label { flex:none; font-size:.75rem; color:var(--muted); }
.group-posted .group-pill { margin-left:0; min-width:0; }
.group-posted .group-pill-name { color:#ffffff; background:#661938; }
@media (max-width:560px) {
  /* Phones: the group goes on its own line, left-aligned under the poster's name (past the avatar) */
  .group-posted { flex:1 0 100%; box-sizing:border-box; margin-left:0; padding-left:calc(32px + .6rem); }
  .feed > turbo-frame { min-width:0; }  /* grid items won't shrink below a long group name otherwise */
  .post-head { row-gap:.3rem; }
}

/* Saved posts */
.save-button[aria-pressed="true"] { color:var(--fg); }
.save-button[aria-pressed="true"] path { fill-opacity:1; }
.save-lists { list-style:none; margin:.25rem 0 .75rem; padding:0; display:grid; gap:.25rem; max-height:280px; overflow-y:auto; }
.save-lists:empty { display:none; }
.save-option { display:flex; align-items:center; gap:.65rem; padding:.55rem .7rem; border-radius:7px; background:var(--surface-2); cursor:pointer; font-weight:500; }
.save-option:hover { background:var(--surface-3); }
.save-option input { width:1.1rem; height:1.1rem; accent-color:var(--check); }
.save-new { margin:0; }
.save-status { margin-top:.6rem; min-height:1.2em; }
.saved-button { display:flex; align-items:center; justify-content:center; gap:.5rem; }
.saved-lists { list-style:none; margin:1rem 0; padding:0; display:grid; gap:.5rem; }
.saved-list-link { display:flex; align-items:center; gap:.8rem; padding:.85rem 1rem; border-radius:10px; background:var(--surface); color:var(--fg); text-decoration:none; }
.saved-list-link:hover { background:var(--surface-2); }
.saved-list-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.saved-list-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:7px; color:var(--check); background:var(--picked-bg); }
.saved-list-name { flex:1; font-weight:600; }
.saved-list-count { font-size:.88rem; color:var(--muted); }
.saved-list-menu { min-width:280px; padding:.75rem; gap:.5rem; }
.saved-list-menu .chip-add { margin:0; }

/* Links: never underlined, not even on hover.
   Text-only links get a little brighter on hover; links with a background change background (set per component).
   Links inside sentences use the green so they still read as links without an underline. */
:root { --link-hover:#000000; --inline-link:#22764a; --inline-link-hover:#2f9a62; }
:root[data-theme="dark"] { --link-hover:#ffffff; --inline-link:#6cc497; --inline-link-hover:#8fdab3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --link-hover:#ffffff; --inline-link:#6cc497; --inline-link-hover:#8fdab3; } }
a, a:hover, a:focus, a *, a:hover *, .link-button, .link-button:hover, .footer-link, .footer-link:hover, summary { text-decoration:none !important; }
:where(a:not(.btn)):hover, .link-button:hover, .footer-link:hover { color:var(--link-hover); }
:where(.post-body, .reply-body, .lede, .help, .doc, .inline-notice, .feed-empty, .message, .invite-banner, .welcome-note, .form-foot, .field-link, .notice-text, .detail-join, .dm-callout, .side-section > p) a:not([class]) {
  color:var(--inline-link); font-weight:600; }
:where(.post-body, .reply-body, .lede, .help, .doc, .inline-notice, .feed-empty, .message, .invite-banner, .welcome-note, .form-foot, .field-link, .notice-text, .detail-join, .dm-callout, .side-section > p) a:not([class]):hover {
  color:var(--inline-link-hover); }
/* Text-only links that used to underline on hover now brighten instead */
.post-person:hover .post-author, .person-link:hover, .thumb:hover .thumb-name, .menu-header:hover .menu-username,
.chip-split:hover .chip-split-name, .group-pill:hover .group-pill-name, .side-head a:hover, .post-reason a:hover, .mention:hover { color:var(--link-hover); }
.group-pill:hover .group-pill-name { color:#ffffff; background:#7a2045; }
.text-link, .side-head a, .post-reason a, .back-link a { color:var(--muted); }
.text-link:hover, .back-link a:hover { color:var(--link-hover); }
.mention { color:var(--inline-link); }

/* Only Show Connections: compact switch in the top bar, left of the color mode button (the switch keeps a full-size tap area) */
.feed-mode, :root[data-theme="dark"] .feed-mode { justify-content:flex-start; gap:.5rem; margin:0 .35rem 0 0; white-space:nowrap; }
.feed-mode .feed-mode-title { font-size:.8rem; color:var(--muted); }
.feed-mode-mark { display:none; color:var(--muted); }
@media (max-width:560px) {
  /* Phones: no room for the words, so a people icon stands in (screen readers still hear the full name) */
  .feed-mode .feed-mode-title { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .feed-mode-mark { display:grid; place-items:center; }
  .feed-mode-mark svg { width:20px; height:20px; }
  .feed-mode, :root[data-theme="dark"] .feed-mode { gap:.35rem; margin-right:.1rem; }
}
.feed-mode .switch { width:30px; height:18px; border-radius:9px; }
.feed-mode .switch::after { content:""; position:absolute; inset:-12px -8px; }
.feed-mode .switch-thumb { top:2px; left:2px; width:14px; height:14px; }
.feed-mode .switch[aria-checked="true"] .switch-thumb { transform:translateX(12px); }

/* Passkeys */
.or-divider { display:flex; align-items:center; gap:.75rem; margin:1.25rem 0 1rem; font-size:.85rem; color:var(--muted); }
.or-divider::before, .or-divider::after { content:""; flex:1; height:1px; background:color-mix(in srgb, var(--fg) 12%, transparent); }
.passkey-button { display:flex; align-items:center; justify-content:center; gap:.55rem; }
.passkey-login .errorlist { margin-top:.6rem; }
.passkey-list { margin-bottom:1rem; }
.passkeys .lede:last-of-type { margin-bottom:1rem; }

/* Logged-out home: six selling points, three across */
.selling-points { grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:980px; }
@media (max-width:860px) { .selling-points { grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:680px; } }
@media (max-width:560px) { .selling-points { grid-template-columns:1fr; max-width:460px; } }

.group-hero-about:last-child { margin-bottom:1.25rem; }

/* Logged-out home: Sign Up and Log In side by side; Log In in simpler green */
.splash-actions { flex-direction:row; justify-content:center; flex-wrap:wrap; gap:.75rem; }
.splash-actions .btn { min-width:9rem; }
.btn.btn-green, :where(a).btn-green:hover { color:#0d2b1c; background:#6cc497; border-color:#6cc497; }
.btn.btn-green:hover { opacity:.88; }

/* Logged-out home: the featured card spans the full width above the others */
.selling-points .selling-featured { grid-column:1 / -1; display:flex; align-items:center; gap:1.1rem; padding:1.4rem 1.6rem; background:var(--picked-bg); }
.selling-featured .selling-icon { flex:none; width:52px; height:52px; margin:0; background:color-mix(in srgb, var(--bg) 70%, transparent); }
.selling-featured-text { display:grid; gap:.35rem; }
.selling-featured strong { font-size:1.25rem; }
.selling-featured-text > span { color:var(--fg); opacity:.85; line-height:1.55; font-size:1.02rem; }
@media (max-width:560px) { .selling-points .selling-featured { flex-direction:column; align-items:flex-start; padding:1.2rem; } }

.selling-points li.selling-featured > .selling-featured-text { color:var(--fg); font-size:inherit; }

/* Curiosity picker: chosen chips, a search box, then a dozen suggestions */
.picker-selected { margin:.4rem 0 .75rem; }
.picker-selected:empty { display:none; }
.picker-search { width:100%; padding:.7rem .85rem; font:inherit; font-size:1rem; color:var(--fg); background:var(--field);
                 border:1px solid var(--field-border); border-radius:7px; }
.picker-search:focus { outline:none; border-color:var(--fg); box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 12%, transparent); }
.picker-hint { margin:.5rem 0 .5rem; }
.picker-suggested { margin-bottom:0; min-height:2.5rem; }

.passkey-hint { margin-top:.6rem; text-align:center; font-size:.82rem; }

.turnstile { min-height:65px; margin:.25rem 0 1rem; }

/* Profile photos: fill the avatar's rounded square; initials show when there's no photo. */
.avatar:has(> img) { overflow:hidden; background:var(--picked-bg); border-color:transparent; }
.avatar > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }

/* Account Settings: Profile Photo and the crop step */
.photo-row { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.avatar.photo-current { flex:none; width:96px; height:96px; border-radius:14px; font-size:2rem; }
.photo-controls { flex:1; min-width:14rem; }
.photo-buttons { display:flex; flex-wrap:wrap; gap:.6rem; }
.photo-choose { cursor:pointer; }
.photo-choose:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
photo-upload[aria-busy="true"] .photo-choose { opacity:.6; pointer-events:none; }
.photo-controls .help { margin-top:.75rem; }
.crop-frame { position:relative; width:min(100%, 360px); aspect-ratio:1; overflow:hidden; border-radius:14px; background:var(--surface-2); touch-action:none; user-select:none; }
.crop-frame img { display:block; width:100%; height:100%; object-fit:cover; }
photo-crop.is-live .crop-frame { cursor:grab; }
photo-crop.is-live .crop-frame:active { cursor:grabbing; }
photo-crop.is-live .crop-frame img { position:absolute; top:0; left:0; max-width:none; object-fit:fill; transform-origin:0 0; }
.crop-frame:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.crop-help { max-width:360px; }
.crop-zoom { display:flex; align-items:center; gap:.75rem; width:min(100%, 360px); margin-top:1rem; font-weight:600; }
.crop-zoom[hidden] { display:none; }
.crop-zoom input { flex:1; accent-color:var(--accent); }
.crop-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }

/* Home page: note under the selling points. */
.splash .splash-note { margin-top:2rem; max-width:460px; font-size:.95rem; line-height:1.5; }

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

/* Changelog: the pipeline (vote up or down) and the list of updates */
.doc .pipeline, .doc .changelog-list { list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:.75rem; }
.pipeline-item { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-radius:10px; background:var(--surface); }
.pipeline-text { min-width:0; }
.doc .pipeline h3, .doc .changelog-list h3 { margin:0 0 .3rem; }
.doc .pipeline p { margin:0; color:var(--muted); }
.doc .pipeline .pipeline-limit { margin-top:.5rem; color:var(--danger); }
.pipeline-vote { flex:none; display:flex; gap:.4rem; margin:0; }
.vote-button { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; font:inherit; font-size:.88rem; font-weight:600;
               color:var(--muted); background:var(--surface-2); border:0; border-radius:8px; cursor:pointer; }
.vote-button:hover { color:var(--fg); background:var(--surface-3); }
.vote-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.vote-button[aria-pressed="true"] { color:#0d2b1c; background:#6cc497; }
.changelog-list li { padding:1rem 1.2rem; border-radius:10px; background:var(--surface); }
.doc .changelog-list p { margin:0; }
.doc .changelog-date { margin-bottom:.2rem; font-size:.85rem; color:var(--muted); }
@media (max-width:560px) {
  .pipeline-item { flex-direction:column; }
}

/* Brand: the logo mark to the left of "simpler", everywhere, the mark only a little taller than the word.
   Last in the file so it wins over the older header, splash and sign-in rules above. */
.brand, .wordmark.brand { display:inline-flex; align-items:center; gap:.28em; flex:none; margin:0; color:var(--fg); text-decoration:none;
                          font-weight:700; letter-spacing:-.03em; line-height:1; }
.brand .logo, .splash .brand .logo, .wordmark.brand .logo { height:1.05em; width:auto; margin:0; color:var(--logo); }
.brand .brand-text, .splash h1.brand .brand-text { color:var(--fg); }
.topbar-inner { display:flex; justify-content:space-between; }
.topbar .brand { font-size:1.4rem; }
.doc-header .brand { font-size:1.5rem; }
.wordmark.brand { font-size:2.4rem; margin-bottom:2.25rem; }
.splash h1.brand { font-size:clamp(2.4rem, 8vw, 4rem); }
@media (max-width:560px) {
  .topbar-inner { display:flex; }
  .topbar .brand, .topbar-start .topbar-wordmark { display:inline-flex; font-size:1.3rem; }
}