/* 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;
}

/* Dark only (light mode was retired on 2026-10-03). Rules written for :root[data-theme="dark"] still apply:
   base.html always sets it. */
:root {
  --radius:7px;  /* every rounded corner on the site (the Saved Posts button's) */
  color-scheme: dark;
  --bg:#121212; --fg:#f2f2f2; --muted:#9a9a9f; --accent:#6cc497;
  --border:#3a3a3c; --field:#1c1c1e; --danger:#ff6b5e; --secure-red:color-mix(in srgb, #8e1b15 34%, transparent); --secure-red-hover:color-mix(in srgb, #8e1b15 48%, transparent); --logo:#6cc497; --field-border:#6b6b70;
  --picked-bg:color-mix(in srgb, #6cc497 20%, transparent); --picked-border:#6cc497; --check:#6cc497;
  /* --green: solid buttons and switches (white text 5.6:1). --green-soft: tints and borders.
     --green-button / --green-button-fg: the Log In style button. */
  --green:#22764a; --green-hover:#1b6840; --green-soft:#6cc497; --green-button:#6cc497; --green-button-fg:#0d2b1c;
}

* { 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; }

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

.splash { flex:1 0 auto; display:grid; place-content:center; padding:24px 16px; }
/* Computers: the logo always starts about 185px down, even in a short window (the page scrolls instead) */
@media (min-width:901px) { .splash { align-content:start; padding-top:185px; } }
.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:var(--radius); 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:var(--radius);
               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:var(--radius); 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:var(--radius); 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:var(--radius); 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.is-fading { opacity:0; transition:opacity .4s; }
@media (prefers-reduced-motion: reduce) { .message.is-fading { transition:none; } }
.message-error { color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.message-success { color:var(--green-button-fg); background:var(--green-button); font-weight:500; }
.message-success a:not([class]) { color:inherit; }

/* 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); }
.offline-bar { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:30px; padding:4px 16px;
               font-size:.8rem; font-weight:700; color:var(--muted); background:var(--surface-2); }
.offline-bar:empty { display:none; }
.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:var(--radius); 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:var(--radius); }
.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:var(--radius);
             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:var(--radius); 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:var(--radius); 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:var(--radius); 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:var(--radius);
        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:var(--radius); 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:var(--radius); 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:var(--radius); 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:var(--radius);
              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:var(--radius); 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:var(--radius); }
.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:var(--radius); 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:var(--radius); 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:var(--radius); 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:var(--radius); }
.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:var(--radius); 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:var(--radius); 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; }
/* Long posts in feeds: the first 4 lines, then Read More (static/js/read-more.js). All of it without JavaScript. */
html.js .post-body-long:not(.is-open) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden; }
html.js .post-body-long:not(.is-open):has(+ .read-more) { margin-bottom:.35rem; }
.post-body-long:focus { outline:none; }
.read-more { display:block; margin:0 0 .75rem; font-weight:600; color:var(--inline-link); text-decoration:none; }
.read-more:hover { color:var(--inline-link-hover); }
html:not(.js) .read-more, .read-more[hidden] { display:none; }
.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:var(--radius); 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:var(--radius); }

/* 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:var(--radius); 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:var(--radius); }
.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; }
/* Signed out: the logo and Request Invitation line up with the page's content edges (same width as <main>) */
body:has(main.page-narrow) .doc-header-public { max-width:520px; }
body:has(main.page-home) .doc-header-public { max-width:1100px; }
.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; }
.contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
/* Invite Someone: the form, and beside it (below it on phones and tablets) the email they'll get */
.page-invite { max-width:1100px; }
.invite-layout { display:grid; gap:2.5rem; }
@media (min-width:901px) { .invite-layout { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:3rem; align-items:start; } }
.invite-preview h2 { font-size:1.15rem; font-weight:700; margin:0 0 .35rem; }
.invite-preview > .help { margin:0 0 1rem; }
.invite-mail { border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.invite-mail-head { margin:0; padding:.85rem 1rem; display:grid; gap:.3rem; font-size:.9rem; }
.invite-mail-head div { display:flex; gap:.6rem; min-width:0; }
.invite-mail-head dt { flex:none; width:4.2rem; color:var(--muted); }
.invite-mail-head dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.invite-mail-address { color:var(--muted); }
.invite-mail-body { display:block; width:100%; height:640px; border:0; background:#faf9f6; }

/* 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:var(--radius); 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:var(--radius); 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:var(--radius); 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:var(--radius); 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:var(--radius); }
.avatar-sm { border-radius:var(--radius); }
.avatar-lg { border-radius:var(--radius); }
.account-button { border-radius:var(--radius); }
.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; padding-top:20px; }
.home-layout { display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 3fr); gap:1.25rem; align-items:start; }  /* the same gap as between the sidebar's cards (.home-side) */
.home-side { position:sticky; top:84px; display:grid; gap:1.25rem; }
.side-section { padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--radius); 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:var(--radius); 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; }
/* The group's photo (or initials) in its own column on the left, pinned to the top when the name wraps */
.side-groups a { display:grid; grid-template-columns:40px minmax(0, 1fr); column-gap:.7rem; align-items:start; }
.side-group-photo { width:40px; height:40px; border-radius:var(--radius); font-size:.85rem; overflow:hidden; }
.side-group-text { display:flex; flex-direction:column; min-width:0; overflow-wrap:anywhere; }
.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:var(--radius); 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; }
.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:var(--radius); }
.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:var(--radius);
             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:var(--radius); flex:none; text-decoration:none; }

/* Replies */
.replies { margin-top:1.25rem; display:grid; gap:1.35rem; }
.reply { display:flex; gap:.75rem; align-items:flex-start; }
.reply > .avatar { width:32px; height:32px; font-size:.72rem; margin-top:.1rem; }
.reply-main { flex:1; min-width:0; }
.reply-head { font-size:.88rem; line-height:1.3; }
.reply-head a { color:var(--fg); font-weight:600; text-decoration:none; }
.reply-body { margin-top:.2rem; font-size:.95rem; line-height:1.55; overflow-wrap:anywhere; }
.reply-remove { font-size:.8rem; }
/* Remove stays quiet until you point at its reply (always there on touch screens and for the keyboard) */
.icon-button.reply-remove { color:var(--muted); opacity:.55; transition:opacity .15s; }
@media (hover:hover) {
  .reply .icon-button.reply-remove { opacity:0; }
  .reply:hover .icon-button.reply-remove, .reply:focus-within .icon-button.reply-remove { opacity:1; }
}
.reply-form { display:flex; gap:.5rem; align-items:flex-start; margin-top:.1rem; }
.reply-form textarea { flex:1; min-height:2.4rem; }
/* Reply to a reply (replies.js): answers sit one step in, under the reply they answer */
.reply-answers { display:grid; gap:1.1rem; margin:-.35rem 0 0 15px; padding-left:27px; border-left:2px solid var(--surface-2); }  /* line under the avatar; answers line up with the reply text */
.reply-form { flex-wrap:wrap; }
.reply-form.is-answering { margin-left:44px; }
.reply-answering { flex-basis:100%; margin:0; font-size:.82rem; color:var(--muted); }
.reply-to { padding:0; border:0; background:none; font:inherit; font-size:.8rem; font-weight:600; color:var(--muted); cursor:pointer; }
.reply-to { margin-top:.35rem; }
.reply-to:hover { color:var(--fg); }
/* The X at the end of the reply box (replies.js): stop answering, clear, or close the replies */
.reply-form .reply-close { flex:none; width:40px; height:40px; margin-left:-.15rem; }
html:not(.js) .reply-close { display:none; }
html:not(.js) .reply-to { display:none; }

/* 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:var(--radius); 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:var(--radius); }
.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); }
/* The closed So, What's Up? field has no box of its own: it sits right on the card, next to your photo. */
.composer-compact:not(.is-open) textarea { background:transparent; }
.post-actions-bar { border-top:0; padding-top:0; }
.replies { border-top:0; }
.reply-form textarea { border-color:transparent; background:var(--surface-2); }
.reply-form textarea:focus { border-color:var(--field-border); outline:none; }
/* Reply button: dark gray, the same height as the one-line field beside it */
.reply-form textarea { min-height:40px; }
.reply-form .btn { flex:none; box-sizing:border-box; height:40px; padding:0 1rem; display:inline-flex; align-items:center;
                   color:var(--fg); background:var(--surface-3); border-color:transparent; }
.reply-form .btn:hover { background:color-mix(in srgb, var(--fg) 18%, 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; }
a.avatar { text-decoration:none; }  /* a profile photo that opens the person's profile */
.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:var(--radius); 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:var(--radius);
               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:var(--radius); 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:var(--radius);
         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); }
/* Pass It On: roomy and easy to read. Wider on computers; on phones it fills the screen like a sheet,
   with the buttons at the bottom. (In the apps it's the app's own modal sheet instead.) */
.modal-forward { width:min(600px, calc(100% - 32px)); }
.forward-form .forward-preview .forwarded-body { font-size:1rem; line-height:1.55; max-height:40vh; overflow-y:auto; }
.forward-form textarea { min-height:6.5rem; font-size:1rem; line-height:1.5; }
@media (max-width:560px) {
  .modal-forward { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .modal-forward .forward-form { min-height:100%; box-sizing:border-box; grid-template-rows:auto auto auto 1fr auto;
                                 padding:calc(1rem + env(safe-area-inset-top)) 16px calc(1rem + env(safe-area-inset-bottom)); }
  .modal-forward .forward-form textarea { align-self:start; }
  .modal-forward .modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
}
.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:var(--radius); 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:var(--radius); 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; }
/* Delete: a quiet × at the row's top right (the app swipes instead) */
.notice { position:relative; }
.notice .notice-link { padding-right:2.9rem; }
.notice-delete { position:absolute; top:.45rem; right:.4rem; margin:0; }
.notice-delete .icon-button { color:var(--muted); opacity:.55; transition:opacity .15s; }
.notice:hover .notice-delete .icon-button, .notice-delete .icon-button:focus-visible { opacity:1; }

/* 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:var(--radius); 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: the post dims and its trash icon turns into a spinner for a second */
.post { position:relative; }
.post.is-deleting > :not(.post-actions-bar), .post.is-deleting .post-actions-bar > :not(:has(.is-busy)):not(.is-busy) { opacity:.35; transition:opacity .2s; }
.post.is-deleting .owner-actions > :not(.is-busy) { opacity:.35; }
.post.is-deleting .is-busy button { cursor:default; }
.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; }
.spinner.spinner-small { width:18px; height:18px; border-width:2px; }
.inline-notice { padding:.85rem 1.1rem; border-radius:var(--radius); 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 completion (static/js/mentions.js): gray text laid over the field, lined up with what's typed */
.mention-ghost { position:fixed; z-index:60; box-sizing:border-box; margin:0; overflow:hidden; pointer-events:none;
                 border-style:solid; border-color:transparent; white-space:pre-wrap; overflow-wrap:break-word; color:transparent; }
.mention-ghost-typed { color:transparent; }
.mention-ghost-hint { color:var(--muted); }
.mention-ghost-name { color:var(--muted); font-size:.85em; }
.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:var(--radius);
             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:var(--radius); 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:var(--radius); 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; } }
/* Phones and tablets: the same 14px from the top bar's line to the post box, from it to the curiosity chips, and from
   the chips to the first post's divider. */
@media (max-width:900px) {
  main.page-feed { padding-top:14px; }
  .page-feed .composer-wrap { margin-bottom:14px; }
  .page-feed .feed-filter { padding-top:0; padding-bottom:2px; margin-bottom:12px; }
}
@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:var(--radius); }
.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:var(--radius); 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:var(--radius);
              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:var(--radius); 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:var(--radius); 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-name { flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.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; }
/* Swipe to Delete (dm-swipe.js): the row slides left over a red Delete button. */
.dm-item { position:relative; overflow:hidden; border-radius:var(--radius); }
.dm-item .dm-row { position:relative; z-index:1; background:var(--bg); touch-action:pan-y; }
.dm-item .dm-row:hover { background:var(--surface); }
.dm-item .dm-row-unread { background:var(--surface); }
/* Conversations with Secure Chat on: the same red as secure messages. */
.dm-item .dm-row.dm-row-secure { color:#ffffff; background:var(--secure-red); }
.dm-item .dm-row.dm-row-secure:hover { background:var(--secure-red-hover); }
.dm-swipe-delete { position:absolute; inset:0 0 0 auto; display:flex; visibility:hidden; }
.dm-item.is-open .dm-swipe-delete, .dm-item:has(.dm-row[style*="translateX"]) .dm-swipe-delete { visibility:visible; }
.dm-swipe-delete button { width:88px; border:0; font:inherit; font-weight:600; color:#ffffff; background:#c4322a; cursor:pointer; }
.dm-item.is-deleting { opacity:.5; pointer-events:none; }

.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:var(--radius); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
/* Yours: simpler green; theirs: gray. In a Secure Chat (encrypted messages), yours are a see-through darker red. */
.dm-mine .dm-body { color:#ffffff; background:var(--green); }
.dm-theirs .dm-body { background:var(--surface-2); }
.dm-mine.dm-secure .dm-body { background:var(--secure-red); }
/* Secure Chat off: older secure messages are hidden (not deleted) behind one line per stretch of them (dms.js). */
.dm-secure-hidden { display:none; }
.dm-hide-secure .dm-secure-hidden { display:block; }
.dm-hide-secure .dm.dm-secure { display:none; }
.dm-locked .dm-body, .dm-mine.dm-locked .dm-body { font-style:italic; color:var(--muted); background:var(--surface); }
/* One date line per day; a time only after 30 minutes or more without messages (dms.js). */
.dm-stamp { align-self:center; margin:.6rem 0 .2rem; font-size:.75rem; font-weight:600; color:var(--muted); }
/* A post sent in a message: a card that opens it. */
.dm-post { display:grid; gap:.3rem; width:min(280px, 100%); padding:.6rem; border-radius:var(--radius); color:var(--fg);
           text-decoration:none; background:var(--surface-2); border-left:3px solid var(--green-soft); }
.dm-post:hover { background:var(--surface-3); }
/* Its picture (or a video's still, with a play mark) whole at its own shape, no taller than 4:5: the surface shows
   either side of a taller one. Without a known size it shows at its natural shape until dms.js measures it. */
.dm-post-media { position:relative; display:block; width:260px; max-width:100%; overflow:hidden; border-radius:calc(var(--radius) - 2px); background:var(--surface); }
.dm-post-media.has-ratio { aspect-ratio:var(--ratio); }
.dm-post-media img { display:block; width:100%; height:auto; }
.dm-post-media.has-ratio img { position:absolute; inset:0; height:100%; object-fit:contain; }
.dm-post-play { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:44px; height:44px; display:grid; place-items:center;
  padding-left:3px; border-radius:50%; color:#ffffff; background:rgba(17, 17, 17, .65); }
.dm-post strong { font-size:.9rem; }
.dm-post-text { font-size:.9rem; line-height:1.4; color:var(--muted); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.dm-post-site { display:block; font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-post .dm-post-title, .dm-post-title { display:-webkit-box; font-size:.95rem; line-height:1.35; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dm-share .dm-post-title { margin-bottom:.45rem; }
.dm-waiting .dm-body { opacity:.55; }
.dm-waiting-note { font-size:.75rem; color:var(--muted); }
.dm-failed-note { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:.15rem .6rem; font-size:.8rem; color:var(--badge); }
.dm-failed-note button { padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--accent); cursor:pointer; }
.dm-post-gone { font-style:italic; color:var(--muted); background:var(--surface); }
/* Send in a Message: the picker (dms/share.html), in a dialog or on its own page. */
.dm-share .forward-preview { margin:.25rem 0 1rem; }
.dm-share .dm-post-media { width:min(280px, 100%); margin-bottom:.45rem; }
.dm-share-find { width:100%; margin-bottom:.5rem; }
.dm-share-people { border:0; padding:0; margin:0 0 1rem; display:grid; gap:.2rem; max-height:min(40vh, 320px); overflow-y:auto; }
.dm-share-people legend { margin-bottom:.4rem; }
.dm-share-person { display:flex; align-items:center; gap:.65rem; padding:.45rem .55rem; border-radius:var(--radius); cursor:pointer; }
.dm-share-person:hover { background:var(--surface); }
.dm-share-person:has(input:checked), .dm-share-person.is-picked { background:var(--picked-bg); }
.dm-share-section { display:grid; gap:.2rem; }
.dm-share-section[hidden], .dm-share-head[hidden] { display:none; }
.dm-share-head { margin:.5rem 0 .1rem; font-size:.8rem; font-weight:600; color:var(--muted); }
.dm-share-section:first-of-type .dm-share-head:first-child { margin-top:0; }
.dm-share-none { margin:.4rem .55rem; }
.dm-share-person[hidden] { display:none; }
.dm-share-person input { accent-color:var(--green); margin:0; }
.dm-share-form textarea { width:100%; }
.dm-share-sent { margin:.5rem 0 1rem; font-weight:600; }
main .dm-share [data-modal-close] { display:none; }
.dm-compose { position:sticky; bottom:0; display:flex; gap:.5rem; align-items:flex-end; padding:.75rem 0; background:var(--bg); }
/* The message field: a soft tone, no white box, one line tall until you write more (dms.js grows it).
   Send is the Log In green and exactly as tall as one line of the field, so they line up. */
.dm-compose textarea { flex:1; box-sizing:border-box; height:44px; min-height:44px; max-height:10rem; padding:11px .9rem;
                       font:inherit; font-size:1rem; line-height:20px; color:var(--fg); resize:none; overflow-y:auto;
                       background:var(--surface-2); border:1px solid transparent; border-radius:var(--radius); }
.dm-compose textarea::placeholder { color:var(--muted); }
.dm-compose textarea:focus { outline:none; border-color:color-mix(in srgb, var(--fg) 22%, transparent); box-shadow:none; }
.dm-compose .btn { flex:none; box-sizing:border-box; height:44px; padding:0 1.1rem; display:inline-flex; align-items:center;
                   color:#ffffff; background:var(--green); border-color:var(--green); }
.dm-compose .btn:hover { opacity:1; background:var(--green-hover); border-color:var(--green-hover); }
/* Secure Chat on: Send is the same red as your secure messages. */
.dm-compose.dm-compose-secure .btn, .dm-compose.dm-compose-secure .btn:hover { background:var(--secure-red); border-color:transparent; }
.dm-compose.dm-compose-secure .btn:hover { background:var(--secure-red-hover); }
@media (max-width:560px) { .dm-compose { bottom:calc(56px + env(safe-area-inset-bottom)); } .dm { max-width:88%; } }

/* Secure Chat: a switch in the chat's header, markers in the thread, a lock on encrypted messages.
   Regular chats get a plain (gray) callout; the green one means Secure Chat is on. */
.dm-chat-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.dm-head-actions { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.dm-secure-toggle { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .55rem .4rem .7rem; border:0; border-radius:var(--radius); font:inherit;
                    font-size:.88rem; font-weight:600; color:var(--muted); background:var(--surface-2); cursor:pointer; }
.dm-secure-toggle:hover { color:var(--fg); background:var(--surface-3); }
.dm-secure-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.dm-secure-toggle[aria-checked="true"] { color:var(--check); background:var(--picked-bg); }
.dm-switch { position:relative; width:30px; height:18px; border-radius:9px; background:color-mix(in srgb, var(--fg) 25%, var(--bg)); transition:background .15s; }
.dm-switch::after { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#ffffff; transition:transform .15s; }
[aria-checked="true"] > .dm-switch { background:var(--green); }
[aria-checked="true"] > .dm-switch::after { transform:translateX(12px); }
@media (prefers-reduced-motion: reduce) { .dm-switch, .dm-switch::after { transition:none; } }
:root .dm-callout[data-dm-callout="regular"] { background:var(--surface); }
.dm-callout[data-dm-callout="regular"] .dm-callout-icon { color:var(--muted); background:var(--surface-2); }
.dm-event { align-self:center; max-width:90%; margin:.4rem 0; padding:.3rem .75rem; border-radius:var(--radius); font-size:.82rem; text-align:center;
            color:var(--muted); background:var(--surface); }
.dm-ready > .inline-notice { margin:.75rem 0; }

/* 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:var(--radius); 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:var(--radius); 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, var(--green-soft) 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); }
/* A curiosity you're viewing but don't have: listed first, with + (lighter green than the Showing label) to add it. */
.chip-new { flex:none; display:inline-flex; align-items:stretch; border-radius:var(--radius); overflow:hidden; }
.chip-new form { display:flex; margin:0; }
.chip-plus { display:grid; place-items:center; width:2rem; padding:0; border:0; color:#0d2b1c; background:var(--green-button); cursor:pointer; }
.chip-plus:hover { background:#86d3ab; }
.chip-plus:focus-visible { outline:2px solid var(--fg); outline-offset:-2px; }
.chip-new > a { border-top-left-radius:0; border-bottom-left-radius: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:var(--radius); 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:var(--radius); }
.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:var(--radius); 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:var(--radius); }
.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:var(--radius);
                               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:var(--radius); 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; }
}
/* Wide screens: the box grows out of the magnifier to the right, behind it (search.js moves the form here).
   --search-room is the space before the icons on the right, so it never covers them. */
.search-wrap { position:relative; display:flex; }
.search-wrap .search-toggle { position:relative; z-index:2; }
@media (min-width:900px) {
  .search-wrap .search-form { position:absolute; left:0; top:0; z-index:1; width:40px; height:40px; opacity:0; visibility:hidden;
                              transition:width .3s cubic-bezier(.2, .8, .2, 1), opacity .15s .1s, visibility 0s .3s; }
  .search-wrap.is-open .search-form { width:min(450px, var(--search-room, 450px)); opacity:1; visibility:visible;
                                      transition:width .3s cubic-bezier(.2, .8, .2, 1), opacity .1s, visibility 0s; }
  .search-wrap .search-input { height:40px; padding:0 .9rem 0 42px; font-size:1rem; border-radius:var(--radius); }
  .search-wrap .search-input, .search-wrap .search-input:focus { border-color:var(--border); box-shadow:none; }  /* a quiet gray edge, not white */
  .search-wrap.is-open .search-toggle { color:var(--fg); background:none; }
  .search-wrap .search-dropdown { position:absolute; left:0; top:calc(100% + 8px); z-index:3; width:min(450px, var(--search-room, 450px)); }
  .search-wrap .search-dropdown:not(:empty) { margin-top:0; }
  .search-wrap:not(.is-open) .search-dropdown { display:none; }
}
@media (max-width:560px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .post-actions-bar .action-group { background:linear-gradient(#191919, #1f1f1f); }
}
@media (min-width:900px) and (prefers-reduced-motion: reduce) {
  .search-wrap .search-form, .search-wrap.is-open .search-form { transition:none; }
}

.dm-suggest { margin:-.25rem 0 1rem; }
.dm-phrase { margin-top:.6rem; padding:.7rem .85rem; border-radius:var(--radius); 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:var(--radius); background:var(--surface); box-shadow:var(--box-shadow); }
.profile-cover { height:120px; border-radius:var(--radius) var(--radius) 0 0;
                 background:linear-gradient(120deg, color-mix(in srgb, var(--green-soft) 38%, var(--bg)), color-mix(in srgb, var(--green-soft) 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; }
/* Nothing below (no curiosities): the card still needs its bottom padding */
.profile-hero-body:last-child { padding-bottom:1.5rem; }
.profile-avatar { flex:none; width:112px; height:112px; border-radius:var(--radius); 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; }
.profile-intro { margin-top:.6rem; max-width:36rem; line-height:1.5; overflow-wrap:anywhere; }
.profile-links { list-style:none; display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; margin:.55rem 0 0; padding:0; font-size:.9rem; }
.profile-links a { display:inline-flex; align-items:center; gap:.35rem; color:var(--inline-link); text-decoration:none; overflow-wrap:anywhere; }
.profile-links .icon-inline { color:currentColor; }
.profile-links a:hover { color:var(--inline-link-hover); }
.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-section-title { font-size:1.15rem; font-weight:700; margin:0 0 .85rem; }
/* Posts or Grid on a profile: the settings' segmented look, as two links */
.view-switch { display:inline-flex; padding:3px; margin:0 0 .85rem; border-radius:var(--radius); background:var(--surface-2); }
.view-switch a { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem 1rem; border-radius:var(--radius); font-size:.92rem; color:var(--muted); transition:background-color .15s, color .15s; }
.view-switch a:hover { color:var(--fg); }
.view-switch a[aria-current="page"] { color:var(--fg); font-weight:600; background:var(--bg); }
.view-switch a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.view-switch a.view-switch-edit { padding:.4rem .7rem; }
.view-switch-edit svg { width:16px; height:16px; }
/* Tablets and desktop: the switch sits at the right, with the same gap above it as below
   (above it is the hero, or on tablets the Connections & Groups box) */
@media (min-width:561px) {
  .view-switch { display:flex; width:fit-content; margin-left:auto; }
  .page-profile .profile-hero:has(~ .profile-layout .view-switch),
  .page-profile .profile-side-box:has(~ section .view-switch) { margin-bottom:.85rem; }
}
/* Phones: the switch spans the posts area, Posts and Grid each centred in their half */
@media (max-width:560px) {
  .page-profile .profile-hero { margin-bottom:.85rem; }
  .view-switch { display:flex; width:100%; }
  .view-switch a { flex:1; justify-content:center; }
  .view-switch a.view-switch-edit { flex:0 0 48px; }
}
turbo-frame#profile-posts { display:block; }
turbo-frame#profile-posts[aria-busy="true"] > * { opacity:.5; transition:opacity .15s; }
.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-hero-body:last-child { padding-bottom:1rem; }
  .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; }

}

.connected-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .75rem; border-radius:var(--radius); font-size:.9rem;
                   font-weight:600; color:var(--check); background:var(--picked-bg); }
/* Message, next to Connected: the same size, dark gray with white text (#333336 gives white 12.6:1, in both themes) */
.btn.btn-message { display:inline-flex; align-items:center; padding:.45rem .75rem; border:0; border-radius:var(--radius); font-size:.9rem;
                   color:#ffffff; background:#333336; }
.btn.btn-message:hover { opacity:1; background:#3f3f43; }
.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:var(--radius); 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:var(--radius); 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:var(--radius); 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)); } }

/* Post actions (Like, Reply, Pass It On, Save, Share): on wider screens the group is invisible and the buttons sit in the row.
   On phones they become icons in one bar on the left (297px at most, near-black with a faint gradient) with very faint dividers, with the time and Edit/Delete/Report
   on a line below. The names stay for screen readers; the reply count stays visible. */
.action-group { display:contents; }
@media (max-width:560px) {
  .post-actions-bar .action-group { order:1; display:flex; flex:1 1 auto; max-width:297px; margin:0 .6rem .35rem; overflow:hidden; border-radius:var(--radius); background:linear-gradient(#0a0a0a, #121212); }
  .post-actions-bar::after { content:""; order:1; flex-basis:100%; }  /* the time and Edit/Delete go on the next line */
  .post-actions-bar .post-time { order:2; }
  .post-actions-bar .actions-spacer { order:3; }
  .post-actions-bar .owner-actions, .post-actions-bar > form, .post-actions-bar .report { order:4; }
  .action-group > :not(dialog) { flex:1 1 0; min-width:0; display:flex; }
  .action-group > :not(dialog) ~ :not(dialog) { border-left:1px solid rgba(255, 255, 255, .04); }
  :root[data-theme="dark"] .post-actions-bar .action-group { background:linear-gradient(#191919, #1f1f1f); }
  .action-group > form { margin:0; }
  .action-group .action-button { flex:1; justify-content:center; gap:.3rem; padding:.4rem 0; border-radius:0; color:#d6d6d6; font-size:.8rem; }
  .action-group .action-button:hover { color:#ffffff; background:rgba(255, 255, 255, .07); }
  .action-group .action-button:focus-visible { outline-offset:-3px; outline-color:#ffffff; }
  .action-group .action-button svg { width:22px; height:22px; }
  .action-group .like-button[aria-pressed="true"] { color:#ff7a93; }
  .action-group .save-button[aria-pressed="true"] { color:#ffffff; }
  .action-group .action-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
}


/* 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:#1f6b43; }
: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); }
/* With replies showing, the bar gets a line along its bottom (half as bright as the top one), so the replies read as their own section.
   Wider screens: drawn as a background so it lines up with the top line (the row is pulled out .6rem each side).
   Phones: the bar's faint bottom line gets stronger (further down, with the phone bar rules). */
@media (min-width:561px) {
  .post:has(.replies:not([hidden])) .post-actions-bar { padding-bottom:.45rem; background:linear-gradient(color-mix(in srgb, var(--fg) 4.5%, transparent), color-mix(in srgb, var(--fg) 4.5%, transparent)) no-repeat .6rem 100% / calc(100% - 1.2rem) 1px; }
  .post:has(.replies:not([hidden])) .replies { margin-top:1.5rem; }
}

/* 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:var(--radius); 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); }
/* Friend Suggestions page (/connections/suggestions/): one card per person, photo and name, curiosities, Connect */
.suggestion-cards { list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.75rem; }
.suggestion-card { display:grid; gap:.85rem; padding:1rem 1.1rem; border-radius:var(--radius); background:var(--surface); }
.suggestion-card-person { display:flex; align-items:center; gap:.85rem; min-width:0; color:var(--fg); text-decoration:none; }
.suggestion-card-person:hover .suggestion-name { color:var(--link-hover); }
.suggestion-card-person:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--radius); }
.suggestion-card-photo { width:64px; height:64px; font-size:1.25rem; border-radius:var(--radius); flex:none; overflow:hidden; }
.suggestion-card-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.suggestion-card .suggestion-name { font-size:1.05rem; }
.suggestion-card .suggestion-meta { font-size:.88rem; }
.suggestion-card form { margin:0; }

/* 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; }

@media (max-width:560px) {
  .feed > turbo-frame { min-width:0; }  /* grid items won't shrink below a long group name otherwise */
}

/* 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:var(--radius); 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:var(--radius); 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:var(--radius); 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:#1a5c39; --inline-link-hover:#22764a; }
: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, .help-tip-body, .lede, .help, .doc, .inline-notice, .feed-empty, .message, .invite-banner, .welcome-note, .form-foot, .field-link, .notice-text, .detail-join, .dm-callout, .dm-share-sent, .side-section > p) a:not([class]) {
  color:var(--inline-link); font-weight:600; }
:where(.post-body, .reply-body, .help-tip-body, .lede, .help, .doc, .inline-notice, .feed-empty, .message, .invite-banner, .welcome-note, .form-foot, .field-link, .notice-text, .detail-join, .dm-callout, .dm-share-sent, .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; }
/* In the apps there's no top bar, so the switch sits above the feed with its words showing */
.feed-mode-row .feed-mode, :root[data-theme="dark"] .feed-mode-row .feed-mode { justify-content:space-between; gap:.75rem; margin:0 0 1rem; }
.feed-mode-row .feed-mode .feed-mode-title { position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; font-size:.9rem; }
.feed-mode-row .feed-mode-mark { display:none; }
.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; }
/* A plain list with an action at the end of each row (passkeys, blocked people) */
.row-list { margin:0 0 1rem; padding:0; list-style:none; display:grid; gap:.25rem; }
.row-list li { display:flex; align-items:center; gap:.5rem; min-height:40px; }
.row-list form { flex:none; margin:0; }
.row-list-end li > :first-child { flex:1; min-width:0; }  /* actions lined up on the right */
.signin-list li { padding:.35rem 0; }
.signin-list .help { display:block; margin-top:.1rem; }
.signin-current { display:inline-block; margin-left:.35rem; padding:.05rem .5rem; border-radius:99px; font-size:.75rem; font-weight:600;
  background:color-mix(in srgb, var(--green, #22764a) 14%, transparent); color:var(--fg); vertical-align:1px; }
.signin-facts { margin:0 0 1rem; padding-left:1.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:var(--green-button-fg); background:var(--green-button); border-color:var(--green-button); }
.btn.btn-green:hover { opacity:.88; }
/* Solid green with white text (Log In page): the inline-link green, dark enough for white text in both themes */
.btn.btn-solid-green { color:#ffffff; background:var(--green); border-color:var(--green); }
.btn.btn-solid-green:hover { opacity:1; background:var(--green-hover); border-color:var(--green-hover); }
/* What's Up box: Post stays the usual black in light mode, Log In green in dark mode */
:root[data-theme="dark"] .btn.composer-post { color:#ffffff; background:var(--green); border-color:var(--green); }
:root[data-theme="dark"] .btn.composer-post:hover { opacity:1; background:var(--green-hover); border-color:var(--green-hover); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .btn.composer-post { color:#ffffff; background:var(--green); border-color:var(--green); }
  :root:not([data-theme]) .btn.composer-post:hover { opacity:1; background:var(--green-hover); border-color:var(--green-hover); }
}

/* 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:var(--radius); }
.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:var(--radius); 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:var(--radius); 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:var(--radius); 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:var(--radius); 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:var(--green-button-fg); background:var(--green-button); }
.changelog-list li { padding:1rem 1.2rem; border-radius:var(--radius); 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 about the height of 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:calc(.28em + 3px); 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:.945em; 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); }
/* The motto under the hero wordmark: same type as "simpler", smaller and off-white so the green mark stays the star. */
.splash .mantra { margin-top:1rem; font-size:clamp(1.3rem, 3.4vw, 1.6rem); font-weight:600; letter-spacing:-.02em; line-height:1.2; color:#d4d4d8; }
@media (max-width:560px) {
  .topbar-inner { display:flex; }
  .topbar .brand, .topbar-start .topbar-wordmark { display:inline-flex; font-size:1.3rem; }
}

/* Curiosity links review page (interests/links.html) */
.link-row { padding:1rem 1.25rem; margin-bottom:.75rem; border-radius:var(--radius); background:var(--surface); }
.link-row .link-names { margin:0; line-height:1.5; }
.link-row .link-count { color:var(--muted); font-size:.9rem; }
.link-row .link-and { color:var(--muted); margin:0 .25rem; }
.link-row .help { margin:.25rem 0 0; }
.link-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.link-hand { margin-bottom:2rem; }
.link-kind { border:0; padding:0; }
.link-kind label { display:flex; gap:.6rem; align-items:baseline; margin:.35rem 0; font-weight:400; }
.field .link-kind input[type="radio"], .link-kind input[type="radio"] { width:auto; flex:none; margin:0; padding:0; }

/* More (/more/): the top bar menu and footer links on one page, for the apps */
.more-me { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; padding:.75rem; border-radius:var(--radius); background:var(--surface); color:var(--fg); text-decoration:none; }
.more-me > span:last-child { display:flex; flex-direction:column; min-width:0; }
.more-section { margin:0 0 1rem; padding:.3rem; border-radius:var(--radius); background:var(--surface); }
.picker-new { margin:0 0 .6rem; }
/* Create / Edit Group: settings on the left, curiosities on the right (one column on phones) */
.page-group-edit { max-width:1000px; }
/* Friend Suggestions: Curiosities in Common slider (shared-slider.js); Show is only for no-JS */
.shared-slider { margin:0 0 1.5rem; }
.shared-slider-row { display:flex; align-items:center; gap:.9rem; max-width:340px; }
.shared-slider input[type=range] { flex:1; min-width:0; margin:0; accent-color:var(--green); height:28px; cursor:pointer; }
.shared-slider-value { min-width:2.2rem; font-weight:600; font-variant-numeric:tabular-nums; }
.shared-slider-go { margin-top:.5rem; }
html.js .shared-slider-go { display:none; }
.group-edit-layout { display:grid; grid-template-columns:minmax(0, 1fr); grid-template-areas:"images" "main" "side" "actions"; gap:0; }
.group-edit-form { display:contents; }
.group-edit-images { grid-area:images; }
.group-edit-main { grid-area:main; min-width:0; }
.group-edit-side { grid-area:side; min-width:0; }
.group-edit-actions { grid-area:actions; }
@media (min-width:901px) {
  .group-edit-layout { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:auto auto 1fr;
                       grid-template-areas:"images side" "main side" "actions side"; column-gap:3rem; }
  fieldset.field.group-edit-side { align-self:start; padding:1.1rem 1.25rem; border-radius:var(--radius); background:var(--surface); }
  .group-edit-side > legend { float:left; width:100%; }  /* inside the panel, not on its edge */
  .group-edit-side > legend + * { clear:both; }
  .group-edit-actions { align-self:start; }
}
.picker-status:empty { display:none; }
.invite-shared { display:block; font-size:.82rem; color:var(--muted); }
.invite-done { margin:0; }
.invite-status:empty { display:none; }
.invite-connections .person-row { flex-wrap:nowrap; }
.invite-connections .person-link { flex:1; }
.invite-connections .person-row > form, .invite-connections .invite-done, .invite-connections .invite-sent { flex:none; }
.invite-sent:disabled { opacity:.5; cursor:default; }
[data-group-invites] .person-row .btn[aria-busy] { cursor:default; opacity:1; }

/* Photos in posts: the picker in the composer and edit page (static/js/post-photos.js) */
html:not(.js) .photo-picker { display:none; }
.photo-picker { margin:0 0 .9rem; }
.photo-drafts { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.photo-drafts:not(:empty) { margin-bottom:.6rem; }
.photo-draft { display:flex; align-items:center; gap:.6rem; padding:.4rem; border-radius:var(--radius); background:var(--surface-2); }
.photo-draft img { flex:none; width:72px; height:72px; object-fit:cover; border-radius:var(--radius); background:var(--surface-3); }
.photo-draft input[type=text] { flex:1; min-width:0; padding:.55rem .7rem; font:inherit; font-size:.92rem; color:var(--fg);
  background:var(--bg); border:1px solid var(--field-border); border-radius:var(--radius); }
.photo-draft input[type=text]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.photo-draft .icon-button { flex:none; }
.photo-draft.is-uploading { min-height:calc(72px + .8rem); color:var(--muted); font-size:.9rem; }
.photo-spinner { width:18px; height:18px; margin:0 .3rem 0 .6rem; border-radius:50%; border:2px solid var(--surface-3); border-top-color:var(--fg);
  animation:photo-spin .8s linear infinite; }
@keyframes photo-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .photo-spinner { animation-duration:2.4s; } }
.btn.photo-add { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; }  /* .btn.btn-inline would make it inline-block, and the icon sat high */
.photo-add:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.btn.photo-add[hidden] { display:none; }
/* An uploaded video in the composer (post-video.js): a preview (or spinner), how it's going, and a description */
.video-draft-preview { flex:none; display:grid; place-items:center; width:72px; height:72px; border-radius:var(--radius); overflow:hidden; background:var(--surface-3); }
.video-draft-preview img { width:72px; height:72px; object-fit:cover; }
.video-draft-preview .photo-spinner { margin:0; }
.video-draft-main { flex:1; min-width:0; display:grid; gap:.35rem; }
.video-draft-status { font-size:.85rem; color:var(--muted); }
.video-draft-main input[type=text] { width:100%; min-width:0; padding:.55rem .7rem; font:inherit; font-size:.92rem; color:var(--fg);
                                     background:var(--bg); border:1px solid var(--field-border); border-radius:var(--radius); }
.video-draft-main input[type=text]:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.video-processing { margin:.75rem 0; }
.photo-status:empty { display:none; }
.photo-status { margin-top:.4rem; }

/* Photos in posts: one photo, or a carousel you swipe (static/js/carousel.js) */
.carousel { position:relative; margin:.75rem 0; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); }
.carousel-track { display:flex; aspect-ratio:var(--ratio); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-track:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.carousel-slide { position:relative; flex:0 0 100%; height:100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always; }
.carousel-slide img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.carousel-button { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; display:grid; place-items:center;
  padding:0; border:0; border-radius:50%; cursor:pointer; color:#ffffff; background:rgba(17, 17, 17, .55); }
.carousel-button:hover { background:rgba(17, 17, 17, .75); }
.carousel-button:focus-visible { outline:2px solid #ffffff; outline-offset:2px; }
.carousel-button:disabled { display:none; }
/* No arrows on screen: swipe, or use the dots as a guide. The buttons only appear when reached with the
   keyboard (Tab), so keyboard and switch users can still move between photos. */
.carousel-button:not(:focus-visible) { opacity:0; pointer-events:none; }
.carousel-prev { left:10px; }
.carousel-next { right:10px; }
/* Computers (a mouse): small, soft frosted arrows, faint until you point at the photo. Phones swipe. */
@media (hover:hover) and (pointer:fine) {
  .carousel-button { width:28px; height:28px; color:#1c1c1e; background:rgba(255, 255, 255, .72);
                     -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:opacity .2s, background .2s, transform .2s; }
  .carousel-button svg { width:15px; height:15px; }
  .carousel-button:not(:focus-visible) { opacity:.45; pointer-events:auto; }
  .carousel:hover .carousel-button:not(:disabled) { opacity:1; }
  .carousel-button:hover { background:rgba(255, 255, 255, .92); transform:translateY(-50%) scale(1.08); }
  .carousel-button:focus-visible { outline-color:var(--fg); }
  .carousel-prev { left:12px; }
  .carousel-next { right:12px; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: reduce) {
  .carousel-button { transition:none; }
  .carousel-button:hover { transform:translateY(-50%); }
}
.carousel-dots { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:0; padding:0 3px; border-radius:999px;
  background:rgba(17, 17, 17, .45); }
/* Each dot is a mouse target too (a 17px square around the 7px dot); keyboards use the Tab-only buttons */
.carousel-dot { --dot:rgba(255, 255, 255, .55); width:13px; height:17px; cursor:pointer;
  background:radial-gradient(circle, var(--dot) 3.5px, transparent 4px); }
.carousel-dot.is-current { --dot:#ffffff; }
.forwarded + .carousel { margin-top:.5rem; }

/* So, What's Up? box: pencil, photo and video icons on the right, inside the box */
.composer-row { position:relative; }
.composer-compact textarea { padding-right:calc(3 * 34px + 1rem); }
.composer-tools { position:absolute; top:5px; right:6px; display:flex; gap:0; }
.composer-tool { width:34px; height:34px; display:grid; place-items:center; padding:0; border:0; border-radius:var(--radius); cursor:pointer;
  color:var(--muted); background:transparent; }
.composer-tool:hover { color:var(--fg); background:color-mix(in srgb, var(--fg) 8%, transparent); }
.composer-tool:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
html:not(.js) .composer-tools { display:none; }
html:not(.js) .composer-compact textarea { padding-right:1.1rem; }
.composer-tool.has-video { color:var(--check); }
/* "Video Added": shows for a moment when a video link is taken out of the text (static/js/composer.js) */
.video-added-host { position:relative; }
.video-added { position:absolute; right:.6rem; bottom:.6rem; padding:.2rem .6rem; font-size:.85rem; font-weight:600; color:var(--fg);
  background:var(--picked-bg); border-radius:999px; pointer-events:none; opacity:0; transition:opacity .3s; }
.video-added:empty { display:none; }
.video-added.is-showing { opacity:1; transition:opacity .15s; }
@media (prefers-reduced-motion: reduce) { .video-added, .video-added.is-showing { transition:none; } }
.video-field { margin:0 0 .9rem; }
.video-field[hidden] { display:none; }
.video-field input { width:100%; padding:.6rem .75rem; font:inherit; font-size:.95rem; color:var(--fg); background:var(--bg);
  border:1px solid var(--field-border); border-radius:var(--radius); }

/* Videos in posts: our copy of the preview, then the player after Play (static/js/video.js) */
.video { position:relative; margin:.75rem 0; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); }
.link-card { display:block; margin:.75rem 0; border-radius:var(--radius); overflow:hidden; color:var(--fg); text-decoration:none; background:var(--surface-2); }
.link-card:hover { background:var(--surface-3); }
.link-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.link-card-image { display:block; width:100%; aspect-ratio:1.91 / 1; object-fit:cover; background:var(--surface); }
.link-card-text { display:grid; gap:.2rem; padding:.7rem .9rem .8rem; }
.link-card-site { font-size:.8rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-card-title { font-size:1rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.link-card-description { font-size:.9rem; line-height:1.4; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.video::before { content:""; display:block; aspect-ratio:16 / 9; }
.video-vertical { max-width:340px; }
.video-vertical::before { aspect-ratio:9 / 16; }
.video-thumb, .video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.video-play { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:68px; height:68px; display:grid; place-items:center;
  padding:0 0 0 4px; border:0; border-radius:50%; cursor:pointer; color:#ffffff; background:rgba(17, 17, 17, .65); }
.video-play:hover { background:rgba(17, 17, 17, .82); }
.video-play:focus-visible { outline:3px solid #ffffff; outline-offset:2px; }
/* The caption sits under the video, hidden until View Caption (More Info menu) */
.video-caption { display:grid; gap:.1rem; margin:-.25rem 0 .85rem; font-size:.85rem; color:var(--muted); }
.video-caption[hidden] { display:none; }
.video-title { font-weight:600; font-size:.95rem; color:var(--fg); overflow-wrap:anywhere; }
.video-caption a { color:var(--check); font-weight:600; text-decoration:none; }
/* The player loads behind the preview image and fades in once it has drawn, so there's no white flash.
   color-scheme:light matches the players' own pages; a mismatch with our dark page makes browsers paint the
   frame solid white while it loads. */
.video.is-playing { background:#000000; }
.video iframe { color-scheme:light; background:#000000; opacity:0; transition:opacity .2s; }
.video iframe.is-loaded { opacity:1; }
/* An uploaded video in a carousel with photos (posts/_media.html): its whole picture fits the slide, on black */
.carousel-video { background:#000000; }
.carousel-video .video-thumb { object-fit:contain; }
.carousel-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; color-scheme:light; background:#000000; opacity:0; transition:opacity .2s; }
.carousel-video iframe.is-loaded { opacity:1; }
.carousel:has(.carousel-video.is-playing) .carousel-dots { display:none; }  /* they'd cover the player's controls */
@media (prefers-reduced-motion: reduce) { .video iframe { transition:none; } }

/* Photos and videos reach the card's edges (the card's sides are 1.1rem of padding plus a 1px border) */
.post .carousel, .post .video:not(.video-vertical) { margin-left:calc(-1.1rem - 1px); margin-right:calc(-1.1rem - 1px); border-radius:0; }

/* Phones: no cards in the feed, just a thin divider between posts, and photos and videos edge to edge
   (the page has 16px sides). Applies wherever posts are listed: home, profiles, groups, saved, one post. */
@media (max-width:560px) {
  .feed { gap:0; }
  .feed .post, :root[data-theme="dark"] .feed .post { padding:24px 0 calc(.75rem + 5px); border:0; border-radius:0; background:transparent; box-shadow:none; }
  /* A 7px groove between posts, full screen width: a shadow line (3px), a bright line, then a soft line (2px each).
     Below it the post has 24px of space before the photo and name. */
  .feed > * + * .post, :root[data-theme="dark"] .feed > * + * .post { padding-top:calc(24px + 7px); }
  .feed > * + * .post::before { content:""; position:absolute; top:0; left:-16px; right:-16px; height:7px; pointer-events:none;
    background:linear-gradient(var(--groove-1) 0 3px, var(--groove-2) 3px 5px, var(--groove-3) 5px 7px); }
  .feed .post { --groove-1:color-mix(in srgb, var(--fg) 55%, var(--bg)); --groove-2:color-mix(in srgb, var(--fg) 12%, #ffffff); --groove-3:color-mix(in srgb, var(--fg) 26%, var(--bg)); }
  :root[data-theme="dark"] .feed .post { --groove-1:#000000; --groove-2:color-mix(in srgb, var(--fg) 16%, var(--bg)); --groove-3:color-mix(in srgb, var(--fg) 5%, var(--bg)); }
  .feed .post.post-pending { padding-left:.75rem; border-left:3px dashed color-mix(in srgb, var(--fg) 25%, transparent); }
  .feed .post-actions-bar { border-top:0; padding-top:0; margin-top:.5rem; }
  .feed .post-actions-bar::before { display:none; }  /* one divider between posts is enough */
  .feed .post .carousel, .feed .post .video:not(.video-vertical) { margin-left:-16px; margin-right:-16px; border-radius:0; }
  .feed .post .video-vertical { margin-left:auto; margin-right:auto; }
}
@media (max-width:560px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .feed .post { --groove-1:#000000; --groove-2:color-mix(in srgb, var(--fg) 16%, var(--bg)); --groove-3:color-mix(in srgb, var(--fg) 5%, var(--bg)); }
}

/* Group photo and header image (groups/photos.py). The header is shown at the 3:1 shape it was cropped to. */
.group-cover.has-image { height:auto; aspect-ratio:3 / 1; overflow:hidden; background:var(--surface-2); }
.group-cover.has-image img { display:block; width:100%; height:100%; object-fit:cover; }
.group-avatar img, .group-card-photo img, .search-group-mark img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.group-link.has-photo { display:grid; grid-template-columns:48px 1fr; column-gap:.85rem; align-items:start; }
.group-link.has-photo > :not(.group-card-photo) { grid-column:2; }
.group-card-photo { grid-row:1 / span 3; width:48px; height:48px; border-radius:var(--radius); overflow:hidden; }
.crop-frame-wide { width:100%; aspect-ratio:3 / 1; border-radius:var(--radius); }
.group-images { margin:0 0 2rem; padding:1.1rem; border-radius:var(--radius); background:var(--surface); }
.group-images h2 { font-size:1.1rem; margin:0 0 .9rem; }
.group-images-preview { position:relative; margin-bottom:3rem; }
.group-images-cover { aspect-ratio:3 / 1; border-radius:var(--radius); overflow:hidden;
  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-images-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.group-images-photo { position:absolute; left:1rem; bottom:-2.25rem; width:72px; height:72px; font-size:1.4rem; overflow:hidden; }
.group-image-row { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; padding:.55rem 0; }
.group-image-label { flex:1 0 9rem; font-weight:600; }
.group-image-row form { margin:0; }

/* iPhone Safari zooms the page in (and leaves it off-center) when you tap a text field smaller than
   16px. On touch screens every text field is at least 16px, so tapping Reply or any box never zooms. */
@media (pointer:coarse) {
  :is(input, textarea, select):not([type=checkbox], [type=radio], [type=range], [type=file]) { font-size:max(16px, 1em) !important; }
}

/* Invite People (group pages): one size for the field and its button, one size for every row button,
   names over @usernames in both lists, and small labels under the box's heading. */
[data-group-invites] .chip-add { margin:0 0 .25rem; align-items:stretch; }
[data-group-invites] .chip-add input { height:40px; box-sizing:border-box; padding:0 .85rem; font-size:.95rem; }
[data-group-invites] .chip-add .btn.btn-inline { height:40px; box-sizing:border-box; padding:0 1rem; font-size:.9rem; display:inline-flex; align-items:center; }
[data-group-invites] .invite-status { margin:.4rem 0 0; }
[data-group-invites] .subhead { margin:1.1rem 0 .55rem; font-size:.82rem; font-weight:600; color:var(--muted); }
[data-group-invites] .person-list { gap:.6rem; }
[data-group-invites] .person-link { display:flex; align-items:center; gap:.6rem; min-width:0; }
[data-group-invites] .invite-who { display:grid; min-width:0; line-height:1.3; }
[data-group-invites] .invite-name { font-size:.92rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-group-invites] .invite-who .member-username { font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-group-invites] .person-row .btn, [data-group-invites] .invite-done { height:32px; min-width:4.75rem; box-sizing:border-box; padding:0 .75rem;
                                                                          display:inline-flex; align-items:center; justify-content:center; font-size:.85rem; }
[data-group-invites] .invite-connections { margin-bottom:0; }

/* Add a Curiosity, under Tag a Curiosity in the post box (tag-curiosity.js) */
.tag-add { display:grid; gap:.5rem; margin-top:.25rem; max-width:420px; }
.tag-add .tag-add-input { height:38px; width:100%; box-sizing:border-box; padding:0 .8rem; font:inherit; font-size:.92rem; color:var(--fg);
                 background:var(--surface-2); border:1px solid transparent; border-radius:var(--radius); }
.tag-add .tag-add-input::placeholder { color:var(--muted); }
.tag-add .tag-add-input:focus { outline:none; border-color:color-mix(in srgb, var(--fg) 22%, transparent); box-shadow:none; }
.tag-add-results { display:flex; flex-wrap:wrap; gap:.4rem; }
.tag-add-option { padding:.35rem .7rem; border:0; border-radius:var(--radius); font:inherit; font-size:.88rem; color:var(--fg);
                  background:var(--surface-2); cursor:pointer; }
.tag-add-option:hover { background:var(--surface-3); }
.tag-add-option:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tag-add-new { color:var(--inline-link); font-weight:600; }
.tag-add-status:empty { display:none; }

/* Profile header image (accounts/covers.py). Without one, the green band is slim (24px, a fifth of the old
   120px) and the photo sits below it instead of overlapping it. */
.profile-cover.has-image { height:auto; aspect-ratio:3 / 1; overflow:hidden; background:var(--surface-2); }
.profile-cover.has-image img { display:block; width:100%; height:100%; object-fit:cover; }
.profile-hero-slim .profile-cover { height:24px; }
.profile-hero-slim .profile-hero-body { margin-top:1rem; }
@media (max-width:560px) {
  .profile-hero-slim .profile-cover { height:18px; }
  .profile-hero-slim .profile-hero-body { margin-top:.85rem; }
}
/* Account Settings: the current header image (or an empty strip) */
.cover-current { max-width:480px; aspect-ratio:3 / 1; margin-bottom:.85rem; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); }
.cover-current img { display:block; width:100%; height:100%; object-fit:cover; }

/* Profile curiosities: past the first 5, » shows the rest (tag-more.js). Without JavaScript they all show. */
.js [data-tag-more-list]:not(.is-open) .tag-more-item { display:none; }
html:not(.js) .tag-more-toggle-item { display:none; }
.tag-more-toggle { min-width:2.5rem; justify-content:center; border:0; font:inherit; font-weight:700; color:var(--muted); background:var(--surface-2); cursor:pointer; }
.tag-more-toggle:hover { color:var(--fg); background:var(--surface-3); }
.tag-more-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* My Connections: wide cards in a grid (one per row for now). Photo on the left; name, @username and
   curiosities on the right, the shared ones first in green. The whole card opens their profile. */
.connection-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:.75rem; }
.connection-card { display:flex; align-items:flex-start; gap:1rem; padding:1rem 1.1rem; border-radius:var(--radius);
                   color:var(--fg); text-decoration:none; background:var(--surface); transition:background .15s; }
.connection-card:hover { background:var(--surface-2); }
.connection-card:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.connection-card-photo { flex:none; width:76px; height:76px; font-size:1.4rem; border-radius:var(--radius); overflow:hidden; }
.connection-card-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.connection-card-main { display:grid; gap:.1rem; min-width:0; padding-top:.15rem; }
.connection-card-name { font-size:1.05rem; font-weight:700; line-height:1.3; }
.connection-card:hover .connection-card-name { color:var(--link-hover); }
.connection-card-username { font-size:.85rem; color:var(--muted); }
.connection-card-tags { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin-top:.55rem; }
.connection-card-tags .tag { padding:.22rem .6rem; font-size:.8rem; }
.connection-card:hover .connection-card-tags .tag:not(.tag-shared) { background:var(--surface-3); }
.connection-card-more { font-size:.8rem; color:var(--muted); }
@media (max-width:560px) {
  .connection-card { gap:.85rem; padding:.9rem; }
  .connection-card-photo { width:64px; height:64px; }
}
@media (prefers-reduced-motion: reduce) { .connection-card { transition:none; } }

/* Phones: the black bar is the bottom of the post. Every icon sits on the left in it (Like, Reply, Pass It On,
   Save, Share, then Report or Edit/Delete) and the time on the right, all in one row. The whole actions row
   becomes the bar; the old icon group just lays its buttons into it. */
@media (max-width:560px) {
  .post-actions-bar, .feed .post-actions-bar { display:flex; flex-wrap:nowrap; align-items:stretch; gap:0; margin:.6rem 0 0; padding:0; border-top:0;
    overflow:visible; border-radius:var(--radius); background:linear-gradient(#0a0a0a, #121212); }
  :root[data-theme="dark"] .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { background:linear-gradient(#191919, #1f1f1f); }
  .post-actions-bar::before, .post-actions-bar::after { display:none; content:none; }
  .post-actions-bar .action-group, :root[data-theme="dark"] .post-actions-bar .action-group { display:contents; }
  .post-actions-bar > *, .action-group > :not(dialog) { order:0; flex:none; margin:0; }
  .post-actions-bar .owner-actions, .post-actions-bar > form, .post-actions-bar .report { order:0; }  /* with the icons, before the time */
  .action-group > :not(dialog) ~ :not(dialog) { border-left:0; }
  .post-actions-bar .action-button, .post-actions-bar .icon-button { width:44px; height:38px; padding:0; justify-content:center; border-radius:0;
    color:#d6d6d6; background:none; font-size:.8rem; }
  .post-actions-bar .action-button:hover, .post-actions-bar .icon-button:hover { color:#ffffff; background:rgba(255, 255, 255, .07); }
  .post-actions-bar :is(.action-button, .icon-button):focus-visible { outline-offset:-3px; outline-color:#ffffff; }
  .post-actions-bar :is(.action-button, .icon-button) svg { width:22px; height:22px; }
  .post-actions-bar .owner-actions { display:flex; gap:0; }
  .post-actions-bar .owner-actions .icon-button { width:44px; height:38px; }
  .post-actions-bar .report summary { display:flex; align-items:center; margin:0; }
  .post-actions-bar .report[open] summary { color:#ffffff; }
  .post-actions-bar .report { position:static; }  /* its form opens above the bar, from the left edge */
  .post-actions-bar .report-form { left:0; right:auto; max-width:calc(100vw - 32px); }
  .post-actions-bar .actions-spacer { order:1; flex:1 1 auto; }
  .post-actions-bar .post-time { order:2; align-self:center; margin:0; padding:0 .75rem 0 .5rem; font-size:.8rem; color:#a3a3a8; white-space:nowrap; }
  .post-actions-bar .post-time span[title] { color:inherit; }
}

/* Phones: So, What's Up? (no photo here) — a little larger, and half as far from the left edge (about 18px instead of 36px) */
@media (max-width:560px) {
  .composer-compact { padding-left:.5rem; }
  .composer-compact textarea { padding-left:.55rem; font-size:1.15rem; }
}

/* Phones: the post bar runs the full width of the post (edge to edge in lists, like photos), square, flush with the
   post's bottom. Posts are divided by a plain 4px black line instead of the groove. */
@media (max-width:560px) {
  .feed .post, :root[data-theme="dark"] .feed .post { padding-bottom:0; }
  .feed .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { margin:.75rem -16px 0; padding:0 5px; border-radius:0; }  /* icons line up with the text */
  .feed .post .replies { margin:1.25rem 0 1rem; }
  .feed > * + * .post, :root[data-theme="dark"] .feed > * + * .post { padding-top:calc(24px + 4px); }
  .feed > * + * .post::before { height:4px; background:#000000; }
  .post:not(.feed .post) .post-actions-bar { margin:.75rem calc(-1.1rem - 1px) -1rem; border-radius:0 0 var(--radius) var(--radius); }
  .post:not(.feed .post):has(.replies:not([hidden])) .post-actions-bar { margin-bottom:0; border-radius:0; }
}

/* Phones, post bar: 3px more room above and 6px more below, icons and time centered on one line, a little darker,
   with very faint dividers so each icon reads as a button. 7px black line between posts. */
@media (max-width:560px) {
  .post-actions-bar, .feed .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { align-items:center; padding-top:3px; padding-bottom:6px; }
  :root[data-theme="dark"] .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { background:linear-gradient(#141414, #171717); }
  .post-actions-bar :is(.action-button, .icon-button) { border-right:1px solid rgba(255, 255, 255, .06); }
  .feed > * + * .post, :root[data-theme="dark"] .feed > * + * .post { padding-top:calc(24px + 7px); }
  .feed > * + * .post::before { height:7px; }
}
@media (max-width:560px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .post-actions-bar { background:linear-gradient(#141414, #171717); }
}

/* Phones, post bar: a little darker; the faint dividers run its full height (the extra room moves into the buttons),
   and the same faint line runs along its top and bottom. */
@media (max-width:560px) {
  .post-actions-bar, .feed .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar {
    align-items:stretch; padding-top:0; padding-bottom:0; background:linear-gradient(#050505, #0c0c0c);
    border-top:1px solid rgba(255, 255, 255, .06); border-bottom:1px solid rgba(255, 255, 255, .06); }
  :root .post:has(.replies:not([hidden])) .post-actions-bar { border-bottom-color:color-mix(in srgb, var(--fg) 8%, var(--bg)); }  /* replies below */
  :root[data-theme="dark"] .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { background:linear-gradient(#0f0f0f, #121212); }
  .post-actions-bar > form, .post-actions-bar .owner-actions, .post-actions-bar .owner-actions form, .post-actions-bar .report,
  .post-actions-bar .action-group > form { display:flex; align-self:stretch; }
  .post-actions-bar .report summary { align-self:stretch; }
  .post-actions-bar :is(.action-button, .icon-button), .post-actions-bar .owner-actions .icon-button { box-sizing:border-box; height:auto; min-height:47px; padding-top:3px; padding-bottom:6px; }
  .post-actions-bar .post-time { align-self:stretch; display:flex; align-items:center; padding-top:3px; padding-bottom:6px; }
}
@media (max-width:560px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .post-actions-bar { background:linear-gradient(#0f0f0f, #121212); }
}

/* Phones, post bar: icons and time exactly centered top to bottom (the room above and below is even), and darker still */
@media (max-width:560px) {
  .post-actions-bar, .feed .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { background:linear-gradient(#000000, #060606); }
  :root[data-theme="dark"] .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { background:linear-gradient(#090909, #0c0c0c); }
  .post-actions-bar :is(.action-button, .icon-button), .post-actions-bar .owner-actions .icon-button,
  .post-actions-bar .post-time { padding-top:0; padding-bottom:0; align-items:center; }
  .post-actions-bar .action-button, .post-actions-bar .icon-button { display:flex; }
}
@media (max-width:560px) and (prefers-color-scheme: dark) {
  :root:not([data-theme]) .post-actions-bar { background:linear-gradient(#090909, #0c0c0c); }
}

/* Phones, post bar: every icon box the same width */
@media (max-width:560px) {
  .post-actions-bar :is(.action-button, .icon-button), .post-actions-bar .owner-actions .icon-button { box-sizing:border-box; width:52px; min-width:52px; padding-left:0; padding-right:0; gap:.2rem; }
  /* never stretch into spare room (group posts have no Pass It On, which left space for the others to grow) */
  .post-actions-bar .action-group .action-button, .post-actions-bar :is(.action-button, .icon-button) { flex:0 0 52px; }
}

/* Phones: 18px above each post's name (was 24px), and the 7px black line above every post, the first one too */
@media (max-width:560px) {
  .feed .post, :root[data-theme="dark"] .feed .post,
  .feed > * + * .post, :root[data-theme="dark"] .feed > * + * .post { padding-top:calc(18px + 7px); }
  .feed .post::before { content:""; position:absolute; top:0; left:-16px; right:-16px; height:7px; pointer-events:none; background:#000000; }
}

/* Phones: the post bar shows only the time, not "Edited" */
@media (max-width:560px) { .post-actions-bar .post-edited { display:none; } }

/* Post bar: no reply counts. The Reply icon turns yellow when a post has replies, and Saved is a rich red. */
.post-actions-bar .reply-button.has-replies svg { color:#f2c94c; }
.post-actions-bar .reply-button.has-replies svg path { fill:currentColor; }  /* solid, not an outline */
.post-actions-bar .save-button[aria-pressed="true"], .post-actions-bar .save-button[aria-pressed="true"]:hover { color:#e0313f; }

/* Phones, post bar: lighter at the top, darker at the bottom */
@media (max-width:560px) {
  :root[data-theme="dark"] .post-actions-bar, :root[data-theme="dark"] .feed .post-actions-bar { background:linear-gradient(#0c0c0c, #090909); }
}

/* Phones: the curiosity pills under So, What's Up? show their state with just the icon (no "Showing"/"Hidden") */
@media (max-width:560px) { .filter-pill .chip-state-word { display:none; } }

/* Notifications from simpler.social itself (reported posts): the mark instead of a person's photo */
.notice-site { display:grid; place-items:center; background:var(--surface-2); }

/* So, What's Up?: the prompt larger and brighter than other gray text (#dcdce0 on the card is about 13:1), and
   about 10px closer to the photo (a .4rem gap and .8rem inside the field, instead of .75rem and 1.1rem) */
.composer-compact textarea::placeholder { color:#dcdce0; font-size:1.2rem; }
.composer-compact textarea:placeholder-shown { padding-top:.5rem; padding-bottom:.5rem; }  /* the larger prompt, centered */
@media (min-width:561px) {
  .composer-row { gap:.4rem; }
  .composer-compact textarea { padding-left:.8rem; }
  .composer-extra-inner { padding-left:calc(44px + .4rem); }
}
@media (max-width:560px) { .composer-compact textarea::placeholder { font-size:1.3rem; } }

/* More Info: the post's photo and name sit in a header row with a faint line under it, the three dots on the right.
   The menu lists each option as an icon and words. */
.post-head { align-items:center; padding-bottom:.6rem; margin-bottom:.75rem; border-bottom:1px solid color-mix(in srgb, var(--fg) 8%, transparent); }
.post-more { position:relative; flex:none; margin-left:auto; }
.post-more summary { list-style:none; cursor:pointer; }
.post-more summary::-webkit-details-marker { display:none; }
.post-more-button { width:32px; height:32px; color:var(--muted); }
.post-more-button:hover, .post-more[open] .post-more-button { color:var(--fg); }
.post-more-menu { min-width:210px; }
.post-more-menu form { margin:0; }
.post-more-menu .post-more-item { display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem; font:inherit; font-size:.95rem; color:var(--fg); white-space:nowrap; cursor:pointer; }
.post-more-menu .post-more-item svg { flex:none; }
@media (max-width:560px) {
  /* the group line wraps below the name, so the dots stay on the name's row */
  .post-head .post-more { order:1; margin-left:auto; }
}

/* The header line runs the full width of the post, and the photo sits midway between the top of the post
   and that line: the space under it matches the post's top padding (+1px for the post's border on wider screens). */
.post-head { margin-left:-1.1rem; margin-right:-1.1rem; padding:0 1.1rem 16px; }
@media (max-width:560px) {
  .feed .post-head { margin-left:-16px; margin-right:-16px; padding:0 16px 14px; }  /* edge to edge, like the post bar */
}
/* A post that's only photos (or a video): they sit right against the header line */
.post-head:has(+ :is(.carousel, .video:not(.video-vertical))) { margin-bottom:0; }
.post-head + :is(.carousel, .video:not(.video-vertical)) { margin-top:0; }
/* ...and with nothing under them (no curiosities), they sit right on top of the post bar */
:root .post :is(.carousel, .video:not(.video-vertical)):has(+ .post-actions-bar) { margin-bottom:0; }
:root .post :is(.carousel, .video:not(.video-vertical)) + .post-actions-bar { margin-top:0; }
/* Profiles and groups hide the reason line, so it doesn't count as something under them */
.page-profile .post :is(.carousel, .video:not(.video-vertical)):has(+ .post-reason + .post-actions-bar) { margin-bottom:0; }
.page-profile .post :is(.carousel, .video:not(.video-vertical)) + .post-reason + .post-actions-bar { margin-top:0; }

/* A group post outside its group: the whole header, up to the top of the post, is in the group color: a dark
   burgundy, darkest at the sides and lighter in the middle,
   and reads "Name From Group". */
.post-head-group { --group-color:#470f29; --group-color-edge:#270816; margin:calc(-1rem - 1px) calc(-1.1rem - 1px) .75rem; padding:16px calc(1.1rem + 1px);  /* over the post's 1px border too */
  border-bottom-color:transparent; color:#ffffff;
  background:linear-gradient(90deg, var(--group-color-edge), var(--group-color) 50%, var(--group-color-edge)); border-radius:var(--radius) var(--radius) 0 0; flex-wrap:nowrap; }
.post-byline { flex:1 1 auto; display:flex; align-items:center; gap:.6rem; min-width:0; }
.post-byline .post-person { flex:none; }
.post-byline-text { min-width:0; overflow-wrap:anywhere; }
.post-head-group .post-author, .post-head-group .post-from-group { color:#ffffff; text-decoration:none; }
.post-from { color:color-mix(in srgb, #ffffff 75%, var(--group-color)); }
.post-from-group { font-weight:600; }
.post-head-group .post-author:hover, .post-from-group:hover { color:#ffd6e6; }  /* brighten, never underline */
.post-head-group .post-more-button { color:color-mix(in srgb, #ffffff 75%, var(--group-color)); }
.post-head-group .post-more-button:hover, .post-head-group .post-more[open] .post-more-button { color:#ffffff; }
@media (max-width:560px) {
  /* Phones: the header starts right under the 7px black line above each post (posts have 15px + 7px on top) */
  .feed .post-head-group { margin-top:-15px; padding-top:14px; border-radius:0; }
}

/* Profile: Connected is a button. Tap it to remove the connection; unfilled "Connect" when you aren't connected. */
.connect-toggle { border:0; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; }
.connect-toggle:hover { background:color-mix(in srgb, var(--check) 28%, transparent); }
.connect-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.connect-toggle.is-off { padding:calc(.45rem - 1px) calc(.75rem - 1px); color:var(--check); background:transparent; border:1px solid var(--picked-border); }
.connect-toggle.is-off:hover { background:var(--picked-bg); }
.connect-toggle-form { margin:0; }

/* Privacy: under New Posts, the button that applies it to every existing post */
.option-extra { display:grid; justify-items:start; gap:.4rem; margin:-.25rem 0 1.4rem; }

/* Phones and tablets: no sidebars beside a feed (Home, profiles, groups); they'd sit below an endless feed, out of
   reach. Home's links are in the account menu (Curiosities, Connections, Groups, Friend Suggestions, Saved Posts); a
   group's member tools open as the Manage Group page for owners and admins; a profile's connections and groups are
   in a collapsed box above its posts. Computers keep the sidebars. */
@media (max-width:900px) { .home-side { display:none; } }
.btn.manage-group-button { display:none; }
@media (max-width:900px) { .btn.manage-group-button { display:inline-flex; } }
.manage-group { display:grid; gap:1.25rem; margin-top:1.25rem; }

/* Endless scroll: a spinner holds the next batch's place (it starts loading early, static/js/feed-more.js).
   The Load More Posts button shows only without JavaScript or if loading fails. The footer waits until
   the feed has really ended, so it never flashes at the bottom while more posts are on the way. */
.feed-more-spinner { justify-self:center; margin:1.5rem 0 2.5rem; }
html:not(.js) .feed-more-spinner, turbo-frame.feed-more.is-failed .feed-more-spinner { display:none; }
html.js turbo-frame.feed-more:not(.is-failed) .feed-more-link { display:none; }
html.js body:has(turbo-frame.feed-more[src]:not([complete]):not(.is-failed)) .site-footer { display:none; }

/* Profiles on phones and tablets: the sidebar as a box above the posts, closed until tapped */
.profile-side-box { display:none; }
@media (max-width:900px) {
  .profile-side-box { display:block; margin-bottom:1.5rem; border-radius:var(--radius); background:var(--surface); }
  .profile-side-box summary { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.9rem 1.1rem;
    list-style:none; cursor:pointer; font-weight:700; border-radius:var(--radius); }
  .profile-side-box summary::-webkit-details-marker { display:none; }
  .profile-side-box summary::after { content:""; flex:none; width:.55rem; height:.55rem; margin-right:.2rem; border-right:2px solid var(--muted);
    border-bottom:2px solid var(--muted); transform:translateY(-25%) rotate(45deg); transition:transform .15s; }
  .profile-side-box[open] summary::after { transform:translateY(25%) rotate(-135deg); }
  .profile-side-box summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
  .profile-side-box-body { display:grid; gap:.25rem; padding:0 0 .4rem; }
  .profile-side-box-body .side-section { background:transparent; padding-top:.25rem; }
}
@media (prefers-reduced-motion: reduce) { .profile-side-box summary::after { transition:none; } }
/* A profile in Grid View, on phones and tablets: just the photos. No curiosities, no connections & groups box. */
@media (max-width:900px) { .profile-is-grid .profile-curiosities, .profile-is-grid .profile-side-box { display:none; } }
/* With the curiosities hidden, the header's body is the card's last visible part: give it the bottom padding. */
@media (max-width:900px) { .profile-is-grid .profile-hero-body { padding-bottom:1.5rem; } }
@media (max-width:560px) { .profile-is-grid .profile-hero-body { padding-bottom:1rem; } }
/* ...and on computers: no sidebar, so the grid spans the whole content width (the header's width). */
@media (min-width:901px) {
  .profile-is-grid .profile-layout { grid-template-columns:minmax(0, 1fr); }
  .profile-is-grid .profile-side { display:none; }
}

/* Invite only: the note under the homepage buttons, and the count on Invite Someone */
.splash .splash-invite { margin-top:1.25rem; max-width:420px; font-size:.92rem; line-height:1.5; color:var(--muted); }
.splash .splash-invite a, .invites-left a { color:var(--check); font-weight:600; text-decoration:none; }
.invites-left { margin:0 0 1.25rem; padding:.7rem .9rem; border-radius:var(--radius); background:var(--surface); color:var(--muted); font-size:.92rem; }
.invites-left strong { color:var(--fg); }
.code-input { font-family:"SF Mono", Menlo, Consolas, monospace; letter-spacing:.2em; text-transform:uppercase; font-size:1.2rem; }

/* Phones: 15px above each post's name (was 18px) */
@media (max-width:560px) {
  .feed .post, :root[data-theme="dark"] .feed .post,
  .feed > * + * .post, :root[data-theme="dark"] .feed > * + * .post { padding-top:calc(15px + 7px); }
}

/* Footer: one The Details button; its menu opens upward (it's the bottom of the page) */
/* Footer links (signed out): two set lines, each centered; a line wraps, still centered, only on the narrowest phones. */
.footer-links { display:flex; flex-direction:column; align-items:center; gap:.55rem; width:100%; }
.footer-links ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem 1.5rem; }
.footer-links li { white-space:nowrap; }
@media (max-width:360px) { .footer-links ul { column-gap:1rem; } }

/* Request Invitation (homepage, and the signed-out top bar): darker gray with light text (#f2f2f2 on #232326 is 14:1) */
.btn.btn-dark { color:#f2f2f2; background:#232326; border-color:#232326; }
.btn.btn-dark:hover { opacity:1; background:#2e2e32; border-color:#2e2e32; }

/* Grid View (Profile Display): an Instagram-style grid of a profile's photo posts, and its preview in Account Settings.
   data-ratio, data-columns and data-divider come from the person's options. The divider is each tile's 1px
   outline meeting its neighbor's across a 2px gap, so an unfinished last row leaves no colored block; the
   outer edge is clipped, with square corners. Each batch of 24 (a turbo-frame) spans the full width and repeats the columns. */
.post-grid { --cols:3; --tile-ratio:4 / 5; --divider:#fff; --line:2px;
             display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); gap:var(--line); overflow:clip; }
.post-grid[data-columns="2"] { --cols:2; }
.post-grid[data-columns="4"] { --cols:4; }
.post-grid[data-ratio="3x2"] { --tile-ratio:3 / 2; }
.post-grid[data-ratio="4x3"] { --tile-ratio:4 / 3; }
.post-grid[data-ratio="9x16"] { --tile-ratio:9 / 16; }
.post-grid[data-divider="gray"] { --divider:#8e8e93; }
.post-grid[data-divider="black"] { --divider:#000; }
/* Line Thickness: each tile's outline is half the line, meeting its neighbor's across the gap. */
.post-grid[data-border="0"] { --line:0px; }
.post-grid[data-border="4"] { --line:4px; }
.post-grid[data-border="8"] { --line:8px; }
.post-grid turbo-frame.feed-more { grid-column:1 / -1; display:grid; grid-template-columns:inherit; gap:inherit; }
.post-grid .feed-more-spinner, .post-grid .feed-more-link { grid-column:1 / -1; }
.post-tile { position:relative; display:block; aspect-ratio:var(--tile-ratio); overflow:hidden; outline:calc(var(--line) / 2) solid var(--divider);
             background:var(--field); color:var(--fg); text-decoration:none; }
/* Mixed: every photo whole, in columns like a collage. masonry.js places every tile (all batches) under the shortest
   column and pads the grid's top to the collage's height; without it, tiles keep their own shape in plain rows. */
.post-grid[data-ratio="mixed"] { align-items:start; }
.post-grid[data-ratio="mixed"] .post-tile { aspect-ratio:var(--photo-ratio, 1); }
.post-grid.is-masonry { display:block; position:relative; }
.post-grid.is-masonry turbo-frame.feed-more { display:block; }
.post-grid.is-masonry .post-tile { position:absolute; aspect-ratio:auto; }
.post-grid.is-masonry .feed-more-spinner { display:block; margin:1rem auto; }
.post-tile img { display:block; width:100%; height:100%; object-fit:cover; }
.post-tile:hover img { opacity:.88; }
.post-tile:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; z-index:1; }
.post-tile-badge { position:absolute; top:.4rem; right:.4rem; display:grid; color:#fff; filter:drop-shadow(0 0 2px rgb(0 0 0 / .6)); }
/* Grid Settings on Edit Your Grid; the grids below them are the preview. */
.grid-look { margin:0 0 1.5rem; }
.grid-look > summary { cursor:pointer; list-style:none; }
.grid-look > summary::-webkit-details-marker { display:none; }
.grid-look > summary::after { content:""; display:inline-block; width:.45rem; height:.45rem; margin-left:.55rem; border:solid currentColor;
                              border-width:0 2px 2px 0; transform:translateY(-.2rem) rotate(45deg); transition:transform .15s; }
.grid-look[open] > summary::after { transform:translateY(0) rotate(-135deg); }
.post-tile:nth-child(3n+2) .post-tile:nth-child(3n) 
/* Account menu (the profile drop-down): a tone-on-tone panel with your photo at the top, an icon beside each
   item, and Log Out set apart below a divider. Overrides the older menu rules above (no shadow). */
.menu { min-width:264px; padding:.45rem; background:var(--surface); border:1px solid var(--border); box-shadow:none;
        transform-origin:top right; animation:menu-in .14s ease-out; }
@keyframes menu-in { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.menu-header { flex-direction:row; align-items:center; gap:.7rem; margin:0 0 .35rem; padding:.6rem .65rem; border-radius:var(--radius);
               background:var(--surface-2); }
.menu-header:hover, .menu-header:focus-visible { background:var(--surface-3); outline:none; }
.menu-header:hover .menu-username, .menu-header:focus-visible .menu-username { text-decoration:none; color:var(--fg); }
.menu-avatar { flex:none; width:42px; height:42px; font-size:.95rem; }
.menu-who { display:flex; flex-direction:column; min-width:0; }
.menu-username { font-size:.85rem; }
.menu-list a, .menu-signout { display:flex; align-items:center; gap:.75rem; padding:.55rem .65rem; font-size:.97rem; }
.menu-icon { flex:none; color:var(--muted); transition:color .12s; }
.menu-list a:hover .menu-icon, .menu-list a:focus-visible .menu-icon { color:var(--fg); }
.menu-list a[aria-current="page"] { background:var(--picked-bg); }
.menu-list a[aria-current="page"] .menu-icon { color:var(--green-soft); }
.menu .menu-footer { margin-top:.35rem; padding-top:.35rem; border-top:1px solid var(--border); }
.menu-signout { color:var(--muted); }
.menu-signout:hover, .menu-signout:focus-visible { color:var(--danger); background:color-mix(in srgb, var(--danger) 10%, transparent); }
.menu-signout:hover .menu-icon, .menu-signout:focus-visible .menu-icon { color:var(--danger); }
@media (prefers-reduced-motion: reduce) { .menu { animation:none; } }

/* A settings panel's description, then its options (Profile Display): room before the first option */
.settings-section > .help + form { margin-top:1.5rem; }
.grid-options > .option-row:first-of-type { padding-top:.9rem; border-top:1px solid var(--border); }  /* Image Shape, after Default View */

/* Messages on computers: your conversations in the left column (35%), the chat on the right (65%), across the
   full page width. The inbox's right column waits for you to pick a chat. Phones and tablets keep one column. */
.dm-pick { display:none; }
@media (max-width:900px) {
  .page-dm { max-width:520px; }
  .dm-split > .dm-side[data-dm-side] { display:none; }
}
@media (min-width:901px) {
  .page-dm { max-width:1100px; padding-top:28px; }
  .dm-split { display:grid; grid-template-columns:minmax(0, 35fr) minmax(0, 65fr); gap:2rem; align-items:start; }
  .dm-side[data-dm-side] { position:sticky; top:84px; max-height:calc(100vh - 104px); overflow-y:auto; padding:.6rem;
                           border-radius:var(--radius); background:var(--surface); scrollbar-width:thin; }
  .dm-side-title { margin:.25rem .3rem .6rem; font-size:1.1rem; font-weight:700; }
  .dm-side-title a { color:var(--fg); text-decoration:none; }
  .dm-side .dm-list { margin:0; gap:.15rem; }
  .dm-side .dm-item .dm-row { padding:.6rem .65rem; background:var(--surface); }
  .dm-side .dm-item .dm-row-unread { background:var(--surface-2); box-shadow:none; }
  .dm-side .dm-item .dm-row:hover { background:var(--surface-2); }
  .dm-item .dm-row[aria-current="page"] { background:color-mix(in srgb, #6cc497 20%, var(--surface)); }
  .dm-side .dm-item .dm-row.dm-row-secure { background:var(--secure-red); }
  .dm-side .dm-item .dm-row.dm-row-secure:hover, .dm-item .dm-row.dm-row-secure[aria-current="page"] { background:var(--secure-red-hover); }
  .dm-split > .dm-chat > .back-link { display:none; }
  .dm-pick { position:sticky; top:84px; display:grid; place-content:center; justify-items:center; gap:.75rem; min-height:min(60vh, 520px);
             padding:2rem; border-radius:var(--radius); background:var(--surface); color:var(--muted); text-align:center; }
  .dm-pick-icon { display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--surface-2); color:var(--fg); }
}

/* Saved Posts: the posts themselves, with a row of your lists to filter by */
.saved-actions { display:flex; align-items:center; gap:.4rem; }
.saved-new summary.btn { display:inline-flex; align-items:center; gap:.35rem; list-style:none; cursor:pointer; }
.saved-new summary::-webkit-details-marker { display:none; }
.saved-lede { margin-bottom:1rem; }
.saved-filter { margin-bottom:1rem; }
.saved-pill-count { color:var(--muted); font-weight:400; font-size:.82rem; }

/* So, What's Up?, open: the text box, its icons and Add Photos (with Show on Grid) share one box. The box is the
   field's look; the textarea inside it has none of its own. Add Photos only shows once the box is open. */
.composer-field { position:relative; flex:1; min-width:0; border:1px solid transparent; border-radius:var(--radius); }
.composer-compact.is-open .composer-field { background:var(--bg); border-color:var(--field-border); }
.composer-compact.is-open .composer-field:focus-within { box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent); }
.composer-compact.is-open .composer-field textarea { background:transparent; border-color:transparent; box-shadow:none; }
.composer-field-photos { display:none; padding:0 .6rem .6rem; }
.composer-compact.is-open .composer-field-photos { display:block; }
.composer-field-photos .photo-picker { margin:0; }
.photo-picker-actions { display:flex; align-items:center; gap:.5rem 1.1rem; flex-wrap:wrap; }
/* Show on Grid: a checkbox drawn as a small switch */
.grid-switch { display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; font-weight:600; cursor:pointer; }
.grid-switch[hidden] { display:none; }
.grid-switch input { appearance:none; -webkit-appearance:none; flex:none; position:relative; width:30px; height:18px; margin:0; border-radius:9px;
  cursor:pointer; background:color-mix(in srgb, var(--fg) 22%, var(--bg)); transition:background .15s; }
.grid-switch input::before { content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#ffffff;
  transition:transform .15s; }
.grid-switch input:checked { background:var(--check); }
.grid-switch input:checked::before { transform:translateX(12px); }
.grid-switch input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .grid-switch input, .grid-switch input::before { transition:none; } }

/* Curiosities: search and suggestions on the left; My Curiosities on the right, in a panel that stays in view.
   Phones and tablets: one column, My Curiosities last. */
.page-curiosities { max-width:1000px; }
.page-curiosities .lede, .page-curiosities .welcome-note { max-width:640px; }
.curiosities-layout { display:grid; grid-template-columns:minmax(0, 1fr); }
@media (min-width:901px) {
  .curiosities-layout { grid-template-columns:minmax(0, 1fr) minmax(0, 340px); gap:2.5rem; align-items:start; }
  .settings-section.curiosities-mine { position:sticky; top:1.25rem; padding:1.1rem 1.25rem; border-radius:var(--radius); background:var(--surface); }
  .curiosities-mine h2 { margin-top:0; }
}
.curiosities-mine .chips[hidden] { display:none; }
.curiosities-mine[hidden] { display:none; }

/* A post opened from its author's grid by someone the post itself isn't for: just the photos */
.photos-only-note { margin:.5rem 0 0; }
.grid-hidden-note { margin:-.45rem 0 .85rem; }

/* Edit Your Grid (/posts/grid/; static/js/grid-edit.js): the grid as it looks on your profile, with buttons on
   each photo. Drag to rearrange (a finger holds a moment first). Below, your other photo posts: tap to add. */
.page-grid-edit { max-width:760px; }
.grid-edit-list { list-style:none; margin:0 0 1.25rem; padding:0; }
.grid-edit-list:empty { display:none; }
.grid-edit-more { margin-top:2rem; }
.grid-edit-more .help { margin:-.4rem 0 .85rem; }
.grid-edit-tile { -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.grid-edit-tile.is-placed { cursor:grab; }
.grid-edit-tile form { margin:0; }
.grid-edit-actions { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:.25rem; padding:.35rem; }
.grid-edit-actions form:last-child { margin-left:auto; }
.grid-edit-button { width:32px; height:32px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; cursor:pointer;
  color:#ffffff; background:rgb(17 17 17 / .62); }
.grid-edit-button:hover { background:rgb(17 17 17 / .82); }
.grid-edit-button:focus-visible, .grid-edit-add:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.grid-edit-tile.is-dragging { z-index:5; cursor:grabbing; opacity:.85; outline:3px solid var(--check); }
.grid-edit-tile.is-dragging .grid-edit-actions { visibility:hidden; }
html.grid-dragging, html.grid-dragging * { cursor:grabbing; }
.grid-edit-off .grid-edit-tile img { opacity:.55; }
.grid-edit-add-form { position:absolute; inset:0; }
.grid-edit-add { position:absolute; inset:0; display:grid; place-items:center; width:100%; padding:0; border:0; cursor:pointer; background:transparent; color:#ffffff; }
.grid-edit-plus { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:rgb(17 17 17 / .62); }
.grid-edit-add:hover .grid-edit-plus { background:var(--green); }
.grid-edit-off .grid-edit-tile:hover img { opacity:.8; }
/* Edit Post: the text and its photos in one box, like the open composer */
.edit-field-box { margin-top:.4rem; border:1px solid var(--field-border); border-radius:var(--radius); background:var(--bg); }
.edit-field-box:focus-within { box-shadow:0 0 0 3px color-mix(in srgb, var(--fg) 10%, transparent); }
.post-editing .edit-field-box textarea { display:block; margin:0; border-color:transparent; background:transparent; box-shadow:none; }
.post-editing .edit-field-box textarea:focus { outline:none; border-color:transparent; box-shadow:none; }
.edit-field-photos { padding:0 .6rem .6rem; }
.edit-field-photos .photo-picker { margin:0; }
/* Show on Grid's "?": a short explanation that opens below it */
.grid-switch-help { position:relative; margin-left:-.6rem; }
.grid-switch-help[hidden] { display:none; }
.grid-switch-help summary { width:22px; height:22px; display:grid; place-items:center; list-style:none; cursor:pointer; border-radius:50%;
  font-size:.8rem; font-weight:700; color:var(--muted); background:var(--surface-2); }
.grid-switch-help summary::-webkit-details-marker { display:none; }
.grid-switch-help summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.grid-switch-help p { position:absolute; z-index:6; top:calc(100% + .4rem); left:50%; transform:translateX(-50%); width:min(280px, 80vw); margin:0;
  padding:.7rem .85rem; font-size:.88rem; line-height:1.45; border-radius:var(--radius); background:var(--surface-3); color:var(--fg); }
.grid-edit-list.post-grid { overflow:visible; }  /* a dragged photo can leave the grid's edge */
.grid-edit-tile { container-type:inline-size; }
.grid-edit-button { width:min(32px, 27cqi); height:min(32px, 27cqi); }
.grid-edit-button svg { width:min(16px, 14cqi); height:min(16px, 14cqi); }
.field .grid-switch input, .grid-switch input { width:30px; height:18px; padding:0; border:0; box-shadow:none; }
.field .grid-switch input:focus { box-shadow:none; }
.field label.grid-switch { display:inline-flex; margin:0; font-size:.92rem; font-weight:600; }

/* » at the end of a chip list (chips-more.js): a chip of its own that shows the rest */
.chip-more { display:inline-grid; place-items:center; min-width:2.6rem; padding:.35rem .8rem; border:0; border-radius:var(--radius);
             font:inherit; font-size:1.05rem; font-weight:700; line-height:1; color:var(--fg); background:var(--surface-2); cursor:pointer; }
.chip-more:hover { background:var(--surface-3); }
.chip-more:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.side-interests .chip-more { padding:.45rem .85rem; }
.tag-list .chip-more { padding:.4rem .85rem; }
html:not(.js) li[data-chip-extra][hidden] { display:list-item; }  /* without JavaScript, every chip shows */
html:not(.js) label[data-chip-extra][hidden] { display:inline-flex; }
html:not(.js) .chips-more-item { display:none; }

/* The smallest profile photos (24px and 32px: post headers, replies, member lists, messages) get 3px corners;
   7px looked too round at that size. Bigger photos keep --radius. */
.avatar-xs, .avatar-sm, .reply > .avatar { border-radius:3px; }

/* "?" tips (includes/help_tip.html): a short explanation that opens beside the label instead of sitting under it */
.field-label-row { display:flex; align-items:center; gap:.45rem; margin-bottom:.4rem; }
.field-label-row > .field-label, .field-label-row > label { margin-bottom:0; }
.help-tip { position:relative; flex:none; }
.help-tip summary { width:22px; height:22px; display:grid; place-items:center; list-style:none; cursor:pointer; border-radius:50%;
  font-size:.8rem; font-weight:700; color:var(--muted); background:var(--surface-2); }
.help-tip summary::-webkit-details-marker { display:none; }
.help-tip summary:hover, .help-tip[open] summary { color:var(--fg); background:var(--surface-3); }
.help-tip summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.help-tip-body { position:absolute; z-index:6; top:calc(100% + .4rem); left:-.4rem; width:min(300px, calc(100vw - 48px)); margin:0;
  padding:.7rem .85rem; font-size:.88rem; font-weight:400; line-height:1.45; border-radius:var(--radius); background:var(--surface-3); color:var(--fg); }
.composer-actions .help-tip summary { width:26px; height:26px; }
.composer-actions .help-tip-body { top:auto; bottom:calc(100% + .4rem); }  /* the bottom of the box: opens upward */

/* Home sidebar folds (side-folds.js): each card is a <details> that opens and closes on its own, so any or all can
   be open. A closed card is just its header. The sidebar scrolls on its own if the open cards are taller than the
   window (it's sticky, so it would otherwise run off the bottom). */
.home-feed-side { gap:.75rem; max-height:calc(100vh - 84px - 16px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.side-fold > summary { list-style:none; cursor:pointer; align-items:center; }
.side-fold > summary::-webkit-details-marker { display:none; }
.side-fold > summary:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:2px; }
.side-fold:not([open]) { padding-top:.8rem; padding-bottom:.8rem; }
.side-fold:not([open]) > summary { margin-bottom:0; padding-bottom:0; border-bottom:0; }
.side-fold:not([open]) > summary:hover h2 { color:var(--link-hover); }
.side-fold-chevron { flex:none; color:var(--muted); transition:transform .2s; }
.side-fold[open] .side-fold-chevron { transform:rotate(180deg); }
.side-fold > summary .side-head-actions { margin-left:auto; }
.side-fold:not([open]) > summary .side-head-actions > a { display:none; }  /* closed: just the title and the arrow; See All (and edit, Clear) once it's open */
@media (prefers-reduced-motion: reduce) { .side-fold-chevron { transition:none; } }

/* Pinned grid posts: a pushpin in the top-left corner (on the profile grid and Edit Your Grid), and Pin First lit
   when it's pinned. Four buttons fit on a tile even at 4 columns. */
.post-tile-pin { position:absolute; top:.4rem; left:.4rem; display:grid; color:#fff; filter:drop-shadow(0 0 2px rgb(0 0 0 / .6)); pointer-events:none; }
.grid-edit-tile:not(.is-pinned) .post-tile-pin { display:none; }
.grid-edit-button { width:min(32px, 22cqi); height:min(32px, 22cqi); }
.grid-edit-button svg { width:min(16px, 11cqi); height:min(16px, 11cqi); }
.grid-edit-pin[aria-pressed="true"] { color:var(--green-button-fg); background:var(--green-button); }

/* The composer's prompt is written like the logo: lowercase "so, what's up?", bold and tight like "simpler". */
.composer-compact textarea::placeholder { font-weight:700; letter-spacing:-.03em; }

/* Logged-out homepage: Enter It Here » on its own line under the invitation paragraph */
.splash-enter { margin:0; padding:1rem 0; font-weight:600; }
.splash-code { display:flex; flex-direction:column; align-items:center; gap:.3rem; margin-top:1rem; padding:1rem 0; }
.splash .splash-code .splash-enter { margin:0; padding:0; }
.splash .splash-code-q { margin:0; font-size:.92rem; line-height:1.4; color:var(--muted); }
.splash .splash-enter a { color:var(--check); text-decoration:none; }

/* Composer, simplified: no headings or "?" tips. Add A Curiosity sits a little below the chips; the visibility
   choices sit under a faint line; Post on the right on its own. */
.composer .tag-add, .composer-compact .tag-add { margin-top:.85rem; }
fieldset.field.post-visibility { padding-top:.9rem; border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.composer-actions { justify-content:flex-end; }
/* The visibility choices sit on the left of Post's row, the faint line above them both */
.composer-actions:has(.post-visibility) { justify-content:space-between; padding-top:.9rem; border-top:1px solid color-mix(in srgb, var(--fg) 10%, transparent); }
.new-post-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.page .new-post-head h1 { margin:0; }
.composer-actions fieldset.field.post-visibility { margin:0; padding-top:0; border-top:0; min-width:0; }
.composer-actions .post-visibility .segmented { margin:0; }  /* phones give .segmented a top margin elsewhere */
.composer-actions .composer-post { margin-left:auto; }
@media (max-width:560px) {
  /* Phones: a little tighter, so the choices and Post fit one row on most phones (the narrowest put Post below) */
  .composer-actions:has(.post-visibility) { column-gap:.5rem; }
  .composer-actions .segment span { padding:.4rem .45rem; font-size:.85rem; }
  .composer-actions:has(.post-visibility) .composer-post { padding-left:1rem; padding-right:1rem; }
}
/* Add Photos and Add Video: the gap between them matches their distance from the box's edges (border + padding) */
.composer-field-photos .photo-picker-actions, .edit-field-photos .photo-picker-actions { column-gap:calc(.6rem + 1px); }

/* Characters left (char-count.js): small and muted; yellow under 100, red at none */
.char-count { font-size:.8rem; font-variant-numeric:tabular-nums; color:var(--muted); white-space:nowrap; }
.char-count[hidden] { display:none; }
.char-count.is-low { color:#f2c94c; }
.char-count.is-out { color:var(--danger); }
.photo-picker-actions .char-count { line-height:1; }  /* right after Add Media (and Show on Grid) */
.reply-form .reply-count { flex-basis:100%; margin-top:-.15rem; padding-left:.1rem; }


/* Sidebar accordions: See All is a small green button, with room before the arrow */
.side-fold > summary .side-head-actions { gap:.75rem; }
.side-head a.side-see-all { display:inline-flex; align-items:center; padding:.2rem .6rem; border-radius:var(--radius);
  font-size:.78rem; font-weight:600; line-height:1.3; color:var(--green-soft);
  background:color-mix(in srgb, var(--green-soft) 14%, transparent); border:1px solid color-mix(in srgb, var(--green-soft) 35%, transparent); }
.side-head a.side-see-all:hover { color:var(--inline-link-hover); background:color-mix(in srgb, var(--green-soft) 22%, transparent); border-color:color-mix(in srgb, var(--green-soft) 55%, transparent); }

/* Policies (pages/policies.html): each policy folds; tone-on-tone, no lines or shadows. */
.policy-fold { border-radius:var(--radius); background:var(--surface); margin-bottom:.75rem; }
.policy-fold > summary { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; list-style:none; cursor:pointer; border-radius:var(--radius); }
.policy-fold > summary::-webkit-details-marker { display:none; }
.policy-fold > summary:hover { background:var(--surface-2); }
.policy-fold > summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.policy-fold > summary h2 { margin:0; font-size:1.2rem; }
.policy-fold-chevron { flex:none; margin-left:auto; color:var(--muted); transition:transform .2s; }
.policy-fold[open] .policy-fold-chevron { transform:rotate(180deg); }
.policy-body { padding:.25rem 1.25rem 1.25rem; }
.policy-body > :first-child { margin-top:0; }
.policy-body .doc-summary { background:var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .policy-fold-chevron { transition:none; } }

/* Logged-out home: Mental Health Matters, a full-width row under the nine cards, linking to /mental-health/. */
.selling-points li.selling-wide { grid-column:1 / -1; padding:0; background:var(--picked-bg); }
.selling-wide-link { display:flex; align-items:center; gap:1.1rem; padding:1.3rem 1.5rem; border-radius:var(--radius); color:var(--fg); }
.selling-wide-link:hover, .selling-wide-link:focus-visible { background:color-mix(in srgb, var(--fg) 5%, transparent); }
.selling-wide-link .selling-icon { flex:none; width:48px; height:48px; margin:0; background:color-mix(in srgb, var(--bg) 70%, transparent); }
.selling-wide-text { display:grid; gap:.3rem; flex:1; min-width:0; }
.selling-wide-text strong { font-size:1.15rem; }
.selling-wide-text > span { color:var(--fg); opacity:.85; line-height:1.5; font-size:.98rem; }
.selling-wide-arrow { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--check);
  background:color-mix(in srgb, var(--bg) 70%, transparent); transition:transform .2s; }
.selling-wide-link:hover .selling-wide-arrow, .selling-wide-link:focus-visible .selling-wide-arrow { transform:translateX(3px); }
@media (max-width:560px) { .selling-wide-link { padding:1.1rem 1.2rem; gap:.9rem; } }
@media (prefers-reduced-motion: reduce) { .selling-wide-arrow { transition:none; } }

/* A group's pages (groups/_pages_nav.html): Posts, then its extra pages, then + for the owner and moderators. */
.group-pages { display:flex; gap:.35rem; overflow-x:auto; margin:0 0 1rem; padding:3px; border-radius:var(--radius); background:var(--surface-2); scrollbar-width:thin; }
.group-pages a { flex:none; display:inline-flex; align-items:center; padding:.4rem .9rem; border-radius:var(--radius); font-size:.92rem; color:var(--muted); white-space:nowrap; }
.group-pages a:hover { color:var(--fg); }
.group-pages a[aria-current="page"] { color:var(--fg); font-weight:600; background:var(--bg); }
.group-pages a:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.group-pages .group-pages-add { margin-left:auto; padding:.4rem .6rem; }
.group-page-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.group-page-head h1 { margin:0; }
.danger-zone { margin-top:2rem; padding-top:1rem; border-top:1px solid var(--border); }
/* Frame Photos (Edit Your Grid): each tile crops its photo around the point its owner dragged it to (--focus).
   Mixed shows every photo whole, so it has no framing. */
.post-tile img { object-position:var(--focus, 50% 50%); }
.post-grid[data-ratio="mixed"] .post-tile img { object-position:50% 50%; }
.grid-mode { display:inline-flex; padding:3px; margin:0 0 .85rem; border-radius:var(--radius); background:var(--surface-2); }
.grid-mode[hidden], .grid-frame-help[hidden] { display:none; }
.grid-mode button { padding:.4rem 1rem; border:0; border-radius:var(--radius); font:inherit; font-size:.92rem; color:var(--muted); background:transparent; cursor:pointer;
                    transition:background-color .15s, color .15s; }
.grid-mode button:hover { color:var(--fg); }
.grid-mode button[aria-pressed="true"] { color:var(--fg); font-weight:600; background:var(--bg); }
.grid-mode button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.grid-frame-help { margin:-.35rem 0 .85rem; }
[data-grid-edit]:has([data-grid-list][data-ratio="mixed"]) :is(.grid-mode, .grid-frame-help) { display:none; }
.is-framing [data-grid-list]:not([data-ratio="mixed"]) .grid-edit-actions { display:none; }
.is-framing [data-grid-list]:not([data-ratio="mixed"]) .grid-edit-tile.is-placed { cursor:move; }
.is-framing [data-grid-list]:not([data-ratio="mixed"]) .grid-edit-tile:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; z-index:1; }
.grid-edit-tile.is-framing-now { z-index:2; outline:3px solid var(--check); outline-offset:-3px; }
.grid-edit-tile.is-framing-now img, .is-framing .grid-edit-tile:hover img { opacity:1; }
@media (max-width:560px) { .grid-mode { display:flex; } .grid-mode button { flex:1; } }

/* The grid viewer (posts/_viewer.html, static/js/grid-viewer.js): a tile's post in a dialog over the profile. On computers
   the photos fill the left, on black, and the post is on the right, scrolling on its own; on phones the photos are on
   top and the post below, the whole dialog scrolling. Clicking around the box closes it (modal.js). */
.grid-viewer-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; inset:0; border-radius:0;
                      background:transparent; box-shadow:none; overflow:hidden; }
.grid-viewer-dialog[open] { display:grid; place-items:center; }
.grid-viewer-dialog::backdrop { background:rgba(0, 0, 0, .8); }
.grid-viewer-dialog turbo-frame { display:contents; }
.grid-viewer-close { position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:999px;
                     color:#ffffff; background:rgba(17, 17, 17, .6); }
.grid-viewer-close:hover { color:#ffffff; background:rgba(17, 17, 17, .85); }
.grid-viewer-step { position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:44px; height:44px; margin-top:-22px; padding:0;
                    border:0; border-radius:999px; color:#ffffff; background:rgba(17, 17, 17, .6); cursor:pointer; }
.grid-viewer-step:hover { background:rgba(17, 17, 17, .85); }
.grid-viewer-step:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.grid-viewer-step[hidden] { display:none; }
.grid-viewer-prev { left:10px; }
.grid-viewer-next { right:10px; }
.viewer { display:grid; grid-template-columns:minmax(0, 1fr) 380px; width:min(1240px, calc(100vw - 128px)); height:min(880px, calc(100dvh - 64px));
          border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.viewer-media { position:relative; display:grid; place-items:center; min-height:0; background:#000000; }
.viewer-media .carousel { width:100%; height:100%; margin:0; border-radius:0; background:#000000; }
.viewer-media .carousel-track { aspect-ratio:auto; height:100%; }
.viewer-media .video { width:100%; margin:0; border-radius:0; }
.viewer-media .video-vertical { width:auto; height:100%; aspect-ratio:9 / 16; }
.viewer-media .video-vertical::before { display:none; }
.viewer-details { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
/* While the first photo loads: black, then a spinner if it takes more than a moment; the photo fades in once it's all there. */
.viewer-media .carousel-slide:first-child img { transition:opacity .2s; }
.viewer-media.is-waiting .carousel-slide:first-child img { opacity:0; transition:none; }
.viewer-media.is-waiting .carousel-dots, .viewer-media.is-waiting .carousel-button { visibility:hidden; }
.viewer-media.is-waiting::after { content:""; position:absolute; left:50%; top:50%; width:32px; height:32px; margin:-16px 0 0 -16px; box-sizing:border-box;
  border:3px solid rgba(255, 255, 255, .25); border-top-color:#ffffff; border-radius:50%; opacity:0;
  animation:chip-spin .8s linear infinite, viewer-spinner-in .2s .4s forwards; }
@keyframes viewer-spinner-in { to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .viewer-media.is-waiting::after { animation-duration:2s, .2s; } .viewer-media .carousel-slide:first-child img { transition:none; } }
.viewer-details .post, :root[data-theme="dark"] .viewer-details .post { min-height:100%; box-sizing:border-box; padding:1rem 1.1rem; border:0; border-radius:0; background:var(--field); box-shadow:none; }
.viewer-details .post-head { padding-right:2.75rem; }  /* room for the close button */
.viewer.is-loading .viewer-details { background:var(--field); }
@media (max-width:900px) {
  .viewer { grid-template-columns:minmax(0, 1fr) 320px; width:calc(100vw - 112px); }  /* room for Previous and Next Post */
}
@media (max-width:700px) {
  .grid-viewer-dialog[open] { display:block; overflow-y:auto; overscroll-behavior:contain; background:var(--bg); }
  .viewer { display:block; width:100%; height:auto; min-height:100%; border-radius:0; }
  .viewer-media { display:block; }
  .viewer.is-loading .viewer-media { height:min(100vw, 75dvh); }
  .viewer-media .carousel { height:auto; }
  .viewer-media .carousel-track { aspect-ratio:var(--ratio); height:auto; max-height:75dvh; }
  .viewer-media .video-vertical { width:100%; max-height:75dvh; }
  .viewer-details { overflow:visible; }
  .viewer-details .post, :root[data-theme="dark"] .viewer-details .post { min-height:0; padding:1rem 16px 1.5rem; }
  .viewer-details .post-head { padding-right:0; }
  .grid-viewer-close { position:fixed; }
  /* Previous and Next Post at the top left, clear of the photos' own arrows */
  .grid-viewer-step { position:fixed; top:12px; width:40px; height:40px; margin-top:0; }
  .grid-viewer-prev { left:12px; }
  .grid-viewer-next { left:60px; right:auto; }
}

/* Phones: the app's bars (2026-10-09). The top bar is a row of cells split by hairlines: Search and New Post on
   the left, the brand in the middle, Find Connections and the bell on the right. The bottom bar is the app's:
   Profile, Messages, Home, Connections and the account menu, on a dark gradient. The account menu opens as a
   drawer from the right over the dimmed page, with the feed's Only Show Connections switch inside it.
   Desktop keeps the drop-down; the phone-only pieces stay hidden there. */
:root { --bar-icon:color-mix(in srgb, var(--fg) 72%, var(--bg)); --bar-line:rgba(17, 17, 17, .14); --bar-divider:rgba(17, 17, 17, .1); --bar-top:var(--surface-2); --bar-bottom:var(--surface); --drawer:var(--bg); }
:root[data-theme="dark"] { --bar-icon:#bdbdc2; --bar-line:rgba(255, 255, 255, .2); --bar-divider:rgba(255, 255, 255, .09); --bar-top:#1c1c1c; --bar-bottom:#080808; --drawer:#141414; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --bar-icon:#bdbdc2; --bar-line:rgba(255, 255, 255, .2); --bar-divider:rgba(255, 255, 255, .09); --bar-top:#1c1c1c; --bar-bottom:#080808; --drawer:#141414; }
}
.topbar-tools { display:flex; align-items:center; }
/* The header's icons: a little brighter than the muted grey (the app's top bar too). */
.search-toggle, .topbar-bell, .topbar-cell { color:var(--bar-icon); }
.topbar-phone, .menu-backdrop, .topbar .menu .feed-mode-menu, .menu-close { display:none; }

@media (max-width:560px) {
  /* The top bar: 57px tall on the page background, the line fading out at both ends below it. A plain background,
     not blurred, so the menu's drawer inside it is placed against the screen. */
  .topbar { z-index:20; background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none;
            border-top:1px solid var(--border); }  /* set apart from the browser's address bar above it */
  .topbar-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0; height:57px; max-width:none; padding:0; }
  .topbar-start { display:contents; }
  .topbar-tools { grid-column:1; grid-row:1; justify-self:start; align-self:stretch; align-items:stretch; }
  .topbar .brand, .topbar-start .topbar-wordmark { grid-column:2; grid-row:1; align-self:center; margin:0; position:relative; top:-1px;
                                                   display:inline-flex; gap:10px; font-size:24px; letter-spacing:-.03em; }
  .topbar .brand .logo { height:28px; }
  .topbar .brand-tail { display:none; }
  .topbar-actions { grid-column:3; grid-row:1; justify-self:end; align-self:stretch; align-items:stretch; gap:0; }
  .topbar .topbar-actions > .feed-mode, .topbar-actions > [data-badge="messages"], .account-button { display:none; }

  .search-wrap { display:flex; align-items:stretch; }
  .search-toggle, .topbar-cell, .topbar-bell { position:relative; display:grid; place-items:center; width:60px; height:auto; padding:0;
                                               align-self:stretch; border-radius:0; background:none; color:var(--bar-icon); }
  .search-toggle svg, .topbar-cell svg, .topbar-bell svg { display:block; }
  .search-toggle svg, .topbar-cell svg, .topbar-bell svg { width:20px; height:20px; }
  .topbar-tools > * { border-right:1px solid var(--bar-divider); }
  .topbar-actions > .topbar-cell, .topbar-actions > .topbar-bell { border-left:1px solid var(--bar-divider); }
  .search-toggle:hover, .search-toggle[aria-expanded="true"], .topbar-cell:hover, .topbar-bell:hover { color:var(--fg); background:none; }
  .topbar-cell[aria-current="page"], .topbar-bell[aria-current="page"] { color:var(--logo); background:none; }
  .topbar-bell .badge { top:10px; right:12px; }
  .topbar-cell:focus-visible, .search-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }

  /* The bottom bar: five equal cells split by hairlines, 52px plus the home indicator's room. */
  .tabbar { display:grid; grid-template-columns:repeat(5, 1fr); gap:0; padding:4px 0 env(safe-area-inset-bottom);
            background:linear-gradient(var(--bar-top), var(--bar-bottom)); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .tabbar::before { display:none; }
  .tab { width:auto; height:48px; border:0; border-radius:0; background:none; color:var(--muted); font:inherit; cursor:pointer; }
  .tab + .tab { border-left:1px solid var(--bar-divider); }
  .tab svg { width:21px; height:21px; }
  .tab[aria-current="page"], .tab[aria-expanded="true"] { color:var(--logo); background:none; }
  .tab .badge { top:4px; right:calc(50% - 22px); }
  .tab:focus-visible { outline-offset:-4px; }
  body:has(.tabbar) { padding-bottom:calc(52px + env(safe-area-inset-bottom)); }
  /* Anything scrolled into view (a focused box, a link to #something) stops above the bottom bar and below the header. */
  /* The line under the header, softer than the site's dividers (.5 white in dark). */
  .topbar::after { background:linear-gradient(90deg, transparent, var(--bar-line) 12%, var(--bar-line) 88%, transparent); }
  /* New Post: closer under the header, a smaller title, Cancel at its right. */
  .page:has(.new-post-head) { padding-top:20px; }
  .page .new-post-head h1 { font-size:1.55rem; }
  .new-post-head { margin-bottom:.85rem; }
  .new-post-head .composer-cancel { padding:.5rem 1rem; font-size:.95rem; }
  html:has(.tabbar) { scroll-padding-top:69px; scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

  /* The account menu: a drawer from the right edge, 300px (a strip of the page still showing on narrow phones). */
  .menu { position:fixed; top:0; right:0; bottom:0; left:auto; z-index:31; width:min(300px, calc(100% - 44px)); min-width:0;
          margin:0; padding:calc(12px + env(safe-area-inset-top)) 8px calc(64px + env(safe-area-inset-bottom)); overflow-y:auto;
          border:0; border-left:1px solid var(--border); border-radius:0; background:var(--drawer); box-shadow:none;
          animation:drawer-in .25s ease-out; }
  @keyframes drawer-in { from { transform:translateX(100%); } }
  .menu-backdrop { position:fixed; inset:0; z-index:30; background:rgba(0, 0, 0, .55); animation:backdrop-in .25s ease-out; }
  @keyframes backdrop-in { from { opacity:0; } }
  body:has(#account-menu:not([hidden])) .menu-backdrop { display:block; }
  /* The X: a large plain X in a rounded rectangle on the drawer's own colour, centred where the hamburger is in the
     bottom bar's last cell (a fifth of the width; the drawer covers it). */
  .menu-close { position:fixed; right:calc(10vw - 28px); bottom:calc(4px + env(safe-area-inset-bottom)); display:grid; place-items:center;
                width:56px; height:44px; padding:0; border:1px solid var(--border); border-radius:var(--radius); color:var(--fg);
                background:var(--drawer); cursor:pointer; }
  .menu-close svg { width:20px; height:20px; }
  .menu-close:focus-visible { outline:2px solid var(--accent); outline-offset:-4px; }
  body:has(#account-menu:not([hidden])) { overflow:hidden; }

  /* Only Show Connections, as a menu row: the people icon, the words, the switch at the right. */
  .topbar .menu .feed-mode-menu { display:flex; align-items:center; gap:.75rem; margin:0 0 .35rem; padding:.55rem .65rem; font-size:.97rem; }
  .feed-mode-menu .feed-mode-mark { display:flex; color:var(--muted); }
  .feed-mode-menu .feed-mode-mark svg { width:20px; height:20px; }
  .topbar .feed-mode-menu .feed-mode-title { position:static; flex:1; width:auto; height:auto; margin:0; overflow:visible; clip:auto;
                                             font-size:inherit; font-weight:400; color:var(--fg); }
}
@media (max-width:560px) and (prefers-reduced-motion: reduce) { .menu, .menu-backdrop { animation:none; } }

/* The one-time invitation popup: the group posts' deep red, white words, a white button to the Invite page. */
.invite-prompt { position:relative; width:min(440px, calc(100% - 32px)); padding:2.25rem 2rem 2rem; text-align:left; color:#ffffff;
                 background:linear-gradient(160deg, #470f29, #270816); }
.invite-prompt::backdrop { background:rgba(0, 0, 0, .6); }
.invite-prompt-close { position:absolute; top:.9rem; right:.9rem; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0;
                       border-radius:var(--radius); background:none; color:color-mix(in srgb, #ffffff 75%, #470f29); cursor:pointer; }
.invite-prompt-close:hover { color:#ffffff; background:rgba(255, 255, 255, .08); }
.invite-prompt-close:focus-visible, .invite-prompt-button:focus-visible { outline:2px solid #ffffff; outline-offset:2px; }
.invite-prompt-mark { display:block; margin:0 0 .9rem; color:#ffd6e6; }
.invite-prompt-title { margin:0 0 .75rem; font-size:1.35rem; font-weight:700; letter-spacing:-.02em; line-height:1.25; text-wrap:pretty; }
.invite-prompt p { margin:0 0 .75rem; line-height:1.5; color:#f3e3ea; }
.invite-prompt-button { display:block; margin-top:1.25rem; padding:.85rem 1rem; text-align:center; border-radius:var(--radius); font-weight:700;
                        color:#270816; background:#ffffff; text-decoration:none; }
.invite-prompt-button:hover { background:#ffe9f2; }

/* A group's sign-up pages (groups/_cobrand.html): the group's header image, photo and name above the form. */
.cobrand { margin:-1rem 0 1.75rem; padding-bottom:1rem; border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.cobrand-cover img { display:block; width:100%; aspect-ratio:3 / 1; object-fit:cover; }
.cobrand-id { display:flex; align-items:center; gap:.85rem; padding:1rem 1rem 0; }
.cobrand-cover + .cobrand-id { align-items:flex-end; margin-top:-2rem; }
.cobrand-avatar { width:60px; height:60px; flex:none; font-size:1.1rem; }
.cobrand-cover + .cobrand-id .cobrand-avatar { box-shadow:0 0 0 3px var(--surface); }
.cobrand-name { display:flex; flex-direction:column; min-width:0; margin:0; line-height:1.3; }
.cobrand-name strong { font-size:1.1rem; overflow-wrap:anywhere; }
.cobrand-on { color:var(--muted); font-size:.9rem; }
.cobrand-welcome { margin:0; padding:.85rem 1rem 0; line-height:1.5; }

/* A group's Posts page (groups/posts_page.html) and its posts (groups/entry.html). */
.entry-list { display:grid; gap:1rem; margin-top:1.5rem; }
.entry-card { display:grid; grid-template-columns:1fr; overflow:hidden; border-radius:var(--radius); background:var(--surface); }
.entry-card-photo img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; }
.entry-card-text { padding:1rem 1.1rem 1.1rem; }
.entry-card h2 { margin:0 0 .3rem; font-size:1.2rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.entry-card h2 a { color:var(--fg); text-decoration:none; }
.entry-meta { margin:0 0 .5rem; color:var(--muted); font-size:.9rem; }
.entry-meta a { color:inherit; }
.entry-excerpt { margin:0; line-height:1.55; }
.entry-pager { display:flex; justify-content:space-between; gap:.75rem; margin-top:1.5rem; }
.entry-photo { margin:1rem 0 1.5rem; }
.entry-photo img { display:block; width:100%; height:auto; border-radius:var(--radius); }
.entry-photo-current { max-width:320px; }
@media (min-width:720px) {
  .entry-card:has(.entry-card-photo) { grid-template-columns:240px 1fr; }
  .entry-card-photo img { height:100%; aspect-ratio:auto; min-height:160px; }
}

/* Group shops (shops/): the Shop page's products, one product, and the cart. */
.page-shop .doc { margin-inline:0; }
.quantity-select { min-height:2.75rem; padding:.45rem .7rem; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:1rem; margin:1.5rem 0 0; padding:0; list-style:none; }
.product-card a { display:flex; flex-direction:column; gap:.3rem; color:var(--fg); text-decoration:none; }
.product-photo { display:block; aspect-ratio:1; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); }
.product-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.product-name { font-weight:600; line-height:1.3; }
.product-price { color:var(--muted); }
.product-card.is-sold-out .product-photo { opacity:.55; }
.product { display:grid; gap:1.5rem; margin-top:.5rem; }
.product-media img, .product-media .product-photo { display:block; width:100%; height:auto; border-radius:var(--radius); }
.product-info h1 { margin:0 0 .35rem; }
.product-price-large { margin:0 0 1rem; font-size:1.3rem; color:var(--fg); font-weight:600; }
.product-buy { display:flex; gap:.6rem; align-items:center; margin-bottom:.5rem; }
.quantity-select { width:auto; min-width:4.5rem; }
.product-sold-out { margin:0 0 1rem; font-weight:600; color:var(--muted); }
.product-description { margin:1.25rem 0; max-width:none; }
@media (min-width:760px) { .product { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:start; } }
.cart-shop h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; }
.cart-shop h2 a { color:var(--fg); text-decoration:none; }
.cart-shop-group { color:var(--muted); font-size:.9rem; font-weight:400; }
.cart-items { margin:0; padding:0; list-style:none; }
.cart-item { display:grid; grid-template-columns:56px 1fr auto; grid-template-areas:"photo text total" "photo qty remove"; gap:.4rem .85rem; align-items:center; padding:.85rem 0; border-top:1px solid var(--border); }
.cart-item-photo { grid-area:photo; display:block; width:56px; height:56px; overflow:hidden; border-radius:var(--radius); background:var(--surface-2); }
.cart-item-photo img { width:100%; height:100%; object-fit:cover; }
.cart-item-text { grid-area:text; display:flex; flex-direction:column; min-width:0; }
.cart-item-name { color:var(--fg); font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.cart-item-qty { grid-area:qty; display:flex; gap:.5rem; align-items:center; }
.cart-item-total { grid-area:total; font-weight:600; }
.cart-item > form:last-child { grid-area:remove; justify-self:end; }
.cart-item.is-sold-out .cart-item-name { color:var(--muted); }
.cart-shop-total, .cart-total { margin:.75rem 0 0; text-align:right; }
.cart-checkout { display:grid; justify-items:end; gap:.6rem; margin-top:1.5rem; }
.cart-total { font-size:1.15rem; }

/* ---------------------------------------------------------------------------------------------- group Dashboard */
/* groups/dash_base.html: the menu on the left, the page on the right; on phones the menu is a row of tabs. */
/* A web-portal layout: the whole window wide, the menu down the left edge, the page filling the rest. */
.page.page-dash { max-width:none; padding:0; }
.dash-main > .messages { margin-bottom:1.25rem; }
body:has(main.page-dash) .topbar-inner { max-width:none; padding-inline:24px; }
.dash { display:grid; grid-template-columns:248px minmax(0, 1fr); align-items:stretch; min-height:calc(100vh - 68px); }
.dash-nav { position:sticky; top:68px; align-self:start; height:calc(100vh - 68px); overflow-y:auto; display:flex; flex-direction:column;
            gap:.75rem; padding:20px 12px; border-right:1px solid var(--border); background:var(--surface); }
.dash-group { display:flex; align-items:center; gap:.65rem; padding:.5rem; border-radius:var(--radius); text-decoration:none; }
.dash-group:hover { background:var(--surface); }
.dash-group-name { display:grid; min-width:0; line-height:1.25; }
.dash-group-name strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-group-name span { color:var(--muted); font-size:.85rem; }
.dash-links { list-style:none; padding:0; display:grid; gap:2px; }
.dash-links a { display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border-radius:var(--radius); color:var(--muted);
                text-decoration:none; font-weight:500; }
.dash-links a:hover { color:var(--fg); background:var(--surface); }
.dash-links a[aria-current="page"] { color:var(--fg); background:var(--surface-2); }
.dash-links a[aria-current="page"] svg { color:var(--accent); }
.dash-badge { margin-left:auto; min-width:1.4rem; padding:.05rem .4rem; border-radius:var(--radius); background:var(--green); color:#fff;
              font-size:.78rem; font-weight:700; text-align:center; }
.dash-main { min-width:0; padding:28px clamp(16px, 2.5vw, 40px) 64px; }
.page .dash-main h1 { font-size:1.75rem; letter-spacing:-.02em; margin-bottom:.25rem; }
.dash-main > .lede, .dash-head .lede { margin-bottom:1.5rem; font-size:.95rem; }
.dash-head { display:flex; justify-content:space-between; align-items:center; gap:1rem 2rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.dash-head .lede { margin-bottom:0; }
.dash-main > .dash-card + .dash-card, .dash-main section.settings-section + section.settings-section { margin-top:1rem; }
.dash-card { padding:1rem 1.15rem; border-radius:var(--radius); background:var(--surface); box-shadow:var(--box-shadow); }
.dash-card h2 { font-size:1rem; font-weight:600; margin-bottom:.75rem; }
.dash-range { display:inline-flex; }
.segment-link { display:block; padding:.4rem .85rem; border-radius:var(--radius); color:var(--muted); font-size:.92rem; text-decoration:none; }
.segment-link:hover { color:var(--fg); }
.segment-link[aria-current="true"] { color:var(--fg); font-weight:600; background:var(--bg); }

.dash-stats { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:.75rem; margin-bottom:1rem; }
.dash-stat { display:grid; gap:.15rem; align-content:start; }
.dash-stat-label { display:flex; align-items:center; gap:.45rem; color:var(--muted); font-size:.88rem; font-weight:500; }
.dash-stat-value { font-size:1.9rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.dash-stat-note { color:var(--muted); font-size:.82rem; }
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
            animation:live-pulse 2s ease-out infinite; }
@keyframes live-pulse { 70% { box-shadow:0 0 0 7px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation:none; } }

.dash-todo { margin-bottom:1rem; border-left:3px solid var(--accent); }
.dash-todo h2 { margin-bottom:.4rem; }
.dash-todo ul { padding-left:1.1rem; display:grid; gap:.25rem; }

.dash-charts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; margin-bottom:1rem; }
.dash-chart { margin:0; }
.dash-chart-head { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.dash-chart-head h2 { margin-bottom:.6rem; }
.dash-chart-total { color:var(--muted); font-size:.85rem; font-variant-numeric:tabular-nums; }
.dash-plot { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.5rem; }
.dash-scale { display:flex; flex-direction:column; justify-content:space-between; height:160px; padding-top:1px; color:var(--muted);
              font-size:.72rem; text-align:right; font-variant-numeric:tabular-nums; line-height:1; transform:translateY(-.3em); }
.dash-scale span:last-child { transform:translateY(.6em); }
.dash-svg-wrap { position:relative; height:160px; }
.dash-svg { display:block; width:100%; height:100%; overflow:visible; }
.dash-grid { stroke:var(--border); stroke-width:1; stroke-dasharray:2 4; }
.dash-axis { stroke:var(--border); stroke-width:1; }
.dash-bar { fill:var(--accent); }
.dash-line { fill:none; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.dash-area { fill:color-mix(in srgb, var(--accent) 14%, transparent); }
.dash-hits { position:absolute; inset:0; }
.dash-hit { position:absolute; top:0; bottom:0; cursor:default; }
.dash-hit.is-active { background:color-mix(in srgb, var(--fg) 6%, transparent); }
.dash-svg-line ~ .dash-hits .dash-hit.is-active::after { content:""; position:absolute; left:50%; top:var(--dot-y); width:9px; height:9px;
                                                        border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px var(--surface);
                                                        transform:translate(-50%, -50%); }
.dash-tip { position:absolute; top:-.5rem; transform:translate(-50%, -100%); padding:.35rem .6rem; border-radius:var(--radius);
            background:var(--surface-2); border:1px solid var(--border); box-shadow:0 4px 14px rgba(0,0,0,.35); white-space:nowrap;
            pointer-events:none; display:grid; font-size:.82rem; z-index:2; }
.dash-tip[hidden] { display:none; }
.dash-tip-day { color:var(--muted); font-size:.75rem; }
.dash-dates { display:flex; justify-content:space-between; margin:.4rem 0 0 2rem; color:var(--muted); font-size:.75rem; }
.dash-table { margin-top:.6rem; font-size:.85rem; }
.dash-table summary { color:var(--muted); cursor:pointer; width:max-content; }
.dash-table summary:hover { color:var(--fg); }
.dash-table table { margin-top:.5rem; width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.dash-table :is(th, td) { padding:.25rem .4rem; border-bottom:1px solid var(--border); text-align:left; }
.dash-table :is(th, td):last-child { text-align:right; }
.dash-table tbody { display:block; max-height:220px; overflow:auto; }
.dash-table thead, .dash-table tbody tr { display:table; width:100%; table-layout:fixed; }

.dash-lists { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; }
@media (min-width:1600px) { .dash-charts { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.dash-facts { display:grid; gap:.4rem; margin-bottom:.6rem; }
.dash-facts div { display:flex; justify-content:space-between; }
.dash-facts dt { color:var(--muted); }
.dash-facts dd { font-weight:600; font-variant-numeric:tabular-nums; }

.dash-rows { list-style:none; padding:.25rem 1.15rem; }
.dash-rows li { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.85rem 0; }
.dash-rows li + li { border-top:1px solid var(--border); }
.dash-row-main { display:grid; gap:.15rem; min-width:0; }
.dash-row-main a { text-decoration:none; }
.dash-main .manage-group, .dash-main .settings-section:first-of-type { margin-top:0; }
.page-dash.page-group-edit .group-edit-layout { margin-top:1rem; }

@media (max-width:1000px) {
  .dash-lists { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px) {
  .dash { grid-template-columns:minmax(0, 1fr); min-height:0; }
  .dash-nav { position:static; height:auto; padding:16px 16px 0; border-right:0; border-bottom:1px solid var(--border); }
  .dash-main { padding:20px 16px 48px; }
  .dash-group { padding:0; }
  .dash-group:hover { background:none; }
  .dash-links { display:flex; overflow-x:auto; gap:.25rem; margin:0 -16px; padding:0 16px .25rem; scrollbar-width:none; }
  .dash-links::-webkit-scrollbar { display:none; }
  .dash-links a { white-space:nowrap; padding:.45rem .7rem; }
  .dash-links svg { display:none; }
  .dash-badge { margin-left:.35rem; }
  .dash-charts, .dash-lists { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:560px) {
  .dash-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .dash-stat-value { font-size:1.6rem; }
}

/* Design (groups/design.html): each choice as a little picture of the page. */
.design-section { margin-bottom:1rem; }
.design-section > .help { margin:-.4rem 0 .9rem; }
.design-choices { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.75rem; }
.design-choices-two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.design-choice { position:relative; display:grid; gap:.35rem; align-content:start; padding:.7rem; border-radius:var(--radius);
                 border:1px solid var(--border); cursor:pointer; }
.design-choice input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.design-choice:has(input:checked) { border-color:var(--picked-border); background:var(--picked-bg); }
.design-choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.design-choice-name { font-weight:600; }
.design-choice .help { font-size:.82rem; }
.design-preview { display:grid; grid-template-rows:8px 30px auto; gap:4px; height:96px; padding:6px; border-radius:5px; background:var(--bg);
                  overflow:hidden; }
.dp-bar { background:var(--surface-2); border-radius:2px; }
.dp-hero { display:block; background:var(--surface-2); border-radius:3px; overflow:hidden; }
.dp-cover { display:block; height:60%; background:color-mix(in srgb, var(--accent) 45%, transparent); }
.dp-body { display:grid; gap:4px; align-content:start; }
.dp-line { display:block; height:6px; border-radius:2px; background:var(--surface-2); }
.dp-short { width:60%; }
.design-preview-contained :is(.dp-hero, .dp-body) { margin:0 18%; }
.design-preview-content .dp-body { margin:0 18%; }
.design-preview-content .dp-hero { margin:0 -6px; border-radius:0; }
.design-section .design-width { margin-top:1.4rem; }
.design-choices + .help { margin-top:.75rem; }
.design-width-row { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.design-width-row input[type="number"] { width:8rem; }
.design-width-row .segmented { grid-column:auto; grid-row:auto; }
.design-bar { display:flex; align-items:center; gap:6px; height:30px; padding:0 8px; border-radius:5px; background:var(--bg); }
.design-bar > span { display:block; border-radius:2px; background:var(--surface-2); }
.db-mark { width:12px; height:12px; border-radius:3px !important; background:var(--logo) !important; }
.db-word { width:42px; height:7px; }
.db-gap { flex:1; background:none !important; }
.db-icon { width:10px; height:10px; }
.db-avatar { width:14px; height:14px; border-radius:50% !important; }
@media (max-width:560px) {
  .design-choices, .design-choices-two { grid-template-columns:minmax(0, 1fr); }
  .design-preview { height:80px; }
}

/* A group's Design on its own pages (app_layout.html and public_layout.html add these to <main>; --group-width is its
   Max Content Width). Contained is simpler's usual column. */
.group-site { max-width:var(--group-width, 1100px); }
.group-site.page-narrow { max-width:var(--group-width, 760px); }
.group-site.group-layout-full { max-width:none; padding-inline:clamp(16px, 3vw, 40px); }
/* Full Width with a Max Content Width: the header runs edge to edge, what's under it keeps to the width. */
.group-layout-full > :not(.group-hero) { max-width:var(--group-width, none); margin-inline:auto; }
.group-layout-full.page-narrow > * { max-width:var(--group-width, 760px); }  /* pages and posts keep a reading width */
.group-layout-full .group-hero, .group-layout-content .group-hero { border-radius:0; }
.group-layout-full .group-hero { margin-inline:calc(-1 * clamp(16px, 3vw, 40px)); }
.group-layout-full .group-hero .profile-hero-body, .group-layout-full .group-hero > :not(.profile-cover) { padding-inline:clamp(0px, 2vw, 24px); }
.group-layout-full .group-hero .profile-cover, .group-layout-content .group-hero .profile-cover { border-radius:0; }
/* Content Contained: the header's background runs to the window's edges (a full-width band behind it); the content
   stays in its column. */
.group-layout-content .group-hero { box-shadow:0 0 0 100vmax var(--surface); clip-path:inset(0 -100vmax); }
.group-layout-content .group-hero .profile-cover { margin-inline:calc(50% - 50vw); }
body:has(main.group-layout-content), body:has(main.group-layout-full) { overflow-x:clip; }
body:has(main.group-site) .topbar-inner { max-width:var(--group-width, 1100px); }
body:has(main.group-layout-full) .topbar-inner { max-width:none; padding-inline:clamp(16px, 3vw, 40px); }
body:has(main.group-site) .doc-header-public { max-width:var(--group-width, 1100px); }
body:has(main.group-layout-full) .doc-header-public { max-width:none; padding-inline:clamp(16px, 3vw, 40px); }
.brand-mark-only .brand-text, .brand-mark-only .brand-tail { display:none; }

/* The Compact top bar (a group's Design): the simpler mark on the left, the account menu on the right. */
.topbar-compact .topbar-inner { display:flex; justify-content:space-between; align-items:center; padding-block:8px; }
.topbar-compact .brand { font-size:1.35rem; }
.topbar-compact .brand .logo { height:26px; }
@media (max-width:560px) {
  .topbar-compact .topbar-inner { display:flex; height:48px; padding:0 16px; }
  .topbar-compact .brand { position:static; grid-column:auto; }
  .topbar-compact .brand .logo { height:24px; }
}

/* Posts on a Posts page: rich text (groups/richtext.py), videos and replies. */
.entry-body blockquote { margin:0 0 1rem; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--accent); color:color-mix(in srgb, var(--fg) 85%, var(--muted)); }
.entry-body ol { padding-left:1.4rem; margin-bottom:1rem; }
.entry-body hr { border:0; border-top:1px solid var(--border); margin:2rem 0; }
.entry-body > :first-child { margin-top:0; }
.entry-video { margin:1.5rem 0; }
.entry-video .video { border-radius:var(--radius); overflow:hidden; }
.entry-video-caption { margin-top:.45rem; color:var(--muted); font-size:.85rem; }
.entry-video-caption a { color:var(--muted); }
.entry-replies { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.entry-replies h2 { font-size:1.15rem; margin-bottom:.25rem; }
.entry-replies .replies { margin-top:1rem; }

/* The editor (static/js/rich-editor.js). */
.rich-editor { border:1px solid var(--field-border); border-radius:var(--radius); background:var(--field); }
.rich-editor:focus-within { border-color:var(--accent); }
.re-toolbar { position:sticky; top:64px; z-index:3; display:flex; flex-wrap:wrap; gap:2px; padding:4px; border-bottom:1px solid var(--border);
              background:var(--field); border-radius:var(--radius) var(--radius) 0 0; }
.re-button { display:grid; place-items:center; width:36px; height:34px; border:0; border-radius:var(--radius); background:none;
             color:var(--muted); cursor:pointer; }
.re-button:hover { color:var(--fg); background:var(--surface-2); }
.re-button[aria-pressed="true"], .re-button[aria-expanded="true"], .re-button.is-on { color:var(--fg); background:var(--picked-bg); }
.re-button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.re-button:nth-child(2), .re-button:nth-child(5), .re-button:nth-child(7) { margin-right:8px; }
.re-panel { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.6rem; border-bottom:1px solid var(--border); }
.re-panel[hidden] { display:none; }
.re-panel-input { flex:1 1 240px; min-width:0; }
.re-panel-note { flex-basis:100%; margin:0; }
.re-panel-note:empty { display:none; }
.re-body { position:relative; max-width:none; min-height:320px; padding:1rem 1.1rem; outline:none; overflow-wrap:anywhere; }
.re-body:has(> p:only-child > br:only-child)::before { content:attr(data-placeholder); position:absolute; color:var(--muted); pointer-events:none; }
.re-body > :first-child { margin-top:0; }
.re-body blockquote { margin:0 0 1rem; padding:.2rem 0 .2rem 1rem; border-left:3px solid var(--accent); }
.re-body ol { padding-left:1.4rem; margin-bottom:1rem; }
.re-body hr { border:0; border-top:1px solid var(--border); margin:1.5rem 0; }
.re-video { display:flex; align-items:center; gap:.75rem; margin:1rem 0; padding:.7rem .8rem; border-radius:var(--radius);
            background:var(--surface-2); border:1px solid var(--border); user-select:none; }
.re-video-icon { display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:var(--radius); background:var(--bg); color:var(--accent); }
.re-video-text { display:grid; min-width:0; flex:1; line-height:1.35; }
.re-video-url { color:var(--muted); font-size:.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:560px) { .re-toolbar { top:57px; } .re-body { min-height:240px; } }
.page-entry-form { max-width:780px; }
.doc.entry-body { max-width:none; margin:1.5rem 0 0; }
/* Dashboard forms and lists keep a readable width; the Dashboard's own cards and charts use the whole page. */
.dash-main > * { max-width:900px; }
.dash-main > :is(.dash-head, .dash-stats, .dash-todo, .dash-charts, .dash-lists, .dash-rows) { max-width:none; }
.dash-main > .group-edit-layout { max-width:1200px; }
/* Members: what each moderator can also do (groups/_admin.html). */
.abilities-form { padding:1rem 0; border-top:1px solid var(--border); display:grid; gap:.75rem; justify-items:start; }
.abilities-who { display:flex; align-items:center; gap:.6rem; margin:0; }
.abilities-list { border:0; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.5rem; width:100%; }
.ability { display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .7rem; border:1px solid var(--border); border-radius:var(--radius); cursor:pointer; }
.ability:has(input:checked) { border-color:var(--picked-border); background:var(--picked-bg); }
.ability input { margin-top:.2rem; accent-color:var(--green); }
.ability > span { display:grid; gap:.1rem; }
.ability .help { font-size:.82rem; }

/* Design: the Home Layout pictures (groups/design.html). */
.design-choices-homes { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.design-default { margin-left:.35rem; padding:.05rem .4rem; border-radius:var(--radius); background:var(--surface-2); color:var(--muted);
                  font-size:.72rem; font-weight:600; vertical-align:middle; }
.home-preview { display:flex; flex-direction:column; gap:4px; height:110px; padding:6px; border-radius:5px; background:var(--bg); overflow:hidden; }
.home-preview span { display:block; border-radius:2px; }
.home-preview .hp-cover { height:18px; background:color-mix(in srgb, var(--accent) 45%, transparent); }
.home-preview .hp-thin { height:7px; flex:none; background:color-mix(in srgb, var(--accent) 45%, transparent); }
.home-preview .hp-id { height:8px; width:45%; background:var(--surface-2); }
.home-preview .hp-cols { display:flex; gap:4px; flex:1; }
.home-preview .hp-col { flex:7; display:flex; flex-direction:column; gap:4px; }
.home-preview .hp-side { flex:3; background:var(--surface-2); }
.home-preview .hp-card { flex:1; min-height:12px; background:var(--surface-2); }
.home-preview .hp-hero { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:3px; height:44px; flex:none;
                         background:color-mix(in srgb, var(--accent) 30%, transparent); }
.home-preview .hp-dot { width:12px; height:12px; border-radius:50% !important; background:var(--fg); opacity:.7; }
.home-preview .hp-line { height:4px; width:50%; background:var(--fg); opacity:.5; }
.home-preview .hp-short { width:35%; }
.home-preview .hp-pill { width:22px; height:6px; background:var(--accent); }
.home-preview :is(.hp-row3, .hp-row4) { display:grid !important; gap:4px; flex:1; }
.home-preview .hp-row3 { grid-template-columns:repeat(3, 1fr); }
.home-preview .hp-row4 { grid-template-columns:repeat(4, 1fr); }
.home-preview :is(.hp-row3, .hp-row4) span { background:var(--surface-2); }
.home-preview .hp-feature { display:flex !important; gap:4px; height:44px; flex:none; }
.home-preview .hp-big { flex:3; background:var(--surface-2); }
.home-preview .hp-list { flex:2; display:flex !important; flex-direction:column; gap:3px; }
.home-preview .hp-list span { flex:1; background:var(--surface-2); }
.home-preview .hp-wide { display:flex !important; flex-direction:column; gap:4px; flex:1; margin:0 12%; }
.home-preview .hp-center { display:flex !important; flex-direction:column; align-items:center; gap:4px; flex:1; padding-top:4px; }
.home-preview .hp-btn { width:55%; height:9px; background:var(--surface-2); }
@media (max-width:1100px) { .design-choices-homes { grid-template-columns:repeat(2, minmax(0, 1fr)); } }

/* The group's home page in each Home Layout (groups/home/). */
.home-stack { display:grid; gap:1.75rem; margin-bottom:1.75rem; }
.home-stack .group-pages { margin-bottom:-.5rem; }
.home-section-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.85rem; }
.home-section-head h2, .home-section-title { font-size:1.2rem; font-weight:700; letter-spacing:-.01em; }
.home-section-title { margin-bottom:.85rem; }
.home-section-more { color:var(--muted); font-size:.9rem; }
.home-entries { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.9rem; }
.home-entry { display:flex; flex-direction:column; border-radius:var(--radius); background:var(--surface); box-shadow:var(--box-shadow); overflow:hidden; }
.home-entry-photo { display:block; aspect-ratio:16 / 9; background:var(--surface-2); }
.home-entry-photo.is-empty { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2)); }
.home-entry-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.home-entry-text { padding:.8rem 1rem 1rem; display:grid; gap:.3rem; }
.home-entry-text h3 { font-size:1.02rem; line-height:1.3; }
.home-entry-text h3 a { text-decoration:none; }
.home-entry-text .entry-excerpt { color:var(--muted); font-size:.9rem; line-height:1.5; }
/* Blog: the newest post large on the left, the next ones listed on the right. */
.home-entries-featured { grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); grid-auto-rows:auto; }
.home-entries-featured .home-entry:first-child { grid-row:span 6; }
.home-entries-featured .home-entry:first-child h3 { font-size:1.45rem; }
.home-entries-featured .home-entry:not(:first-child) { flex-direction:row; align-items:center; }
.home-entries-featured .home-entry:not(:first-child) .home-entry-photo { width:96px; flex:none; aspect-ratio:1; }
.home-entries-featured .home-entry:not(:first-child) .entry-excerpt { display:none; }
.home-entries-featured .home-entry:not(:first-child) .home-entry-text { padding:.6rem .8rem; }
.home-members { margin:0; }
/* Landing Page: the header image behind a centered welcome. */
.home-landing-hero { position:relative; display:grid; place-items:center; min-height:360px; margin-bottom:1.75rem; padding:48px 20px;
                     border-radius:var(--radius); background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--surface)), var(--surface));
                     overflow:hidden; text-align:center; }
.home-landing-cover { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.home-landing-hero.has-image::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.7)); }
.home-landing-inner { position:relative; z-index:1; display:grid; justify-items:center; gap:.75rem; max-width:640px; }
.home-landing-inner .profile-avatar { margin:0; }
.home-landing-inner h1 { font-size:clamp(2rem, 5vw, 3.2rem); margin:0; }
.home-landing-hero.has-image :is(h1, .home-landing-about) { color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4); }
.home-landing-about { font-size:1.1rem; line-height:1.55; color:color-mix(in srgb, var(--fg) 88%, transparent); }
.home-landing-inner .profile-cta { justify-content:center; }
.group-layout-full .home-landing-hero, .group-layout-content .home-landing-hero { border-radius:0; margin-inline:calc(50% - 50vw); }
/* Discussion: one wide column. */
.home-discussion { max-width:820px; margin-inline:auto; width:100%; }
/* Link Page: one centered column of big buttons. */
.home-links { display:grid; justify-items:center; gap:.6rem; max-width:520px; margin:12px auto 2rem; text-align:center; }
.home-links .profile-avatar { margin:0; }
.home-links h1 { margin:.25rem 0 0; }
.home-links .profile-handle { margin:0; }
.home-links-about { color:color-mix(in srgb, var(--fg) 85%, transparent); line-height:1.55; }
.home-links .profile-cta { justify-content:center; margin:.25rem 0; }
.home-link-list { display:grid; gap:.6rem; width:100%; margin:.75rem 0; }
.home-link { display:block; padding:1rem 1.25rem; border-radius:var(--radius); background:var(--surface); box-shadow:var(--box-shadow);
             border:1px solid var(--border); font-weight:600; text-decoration:none; }
.home-link:hover { border-color:var(--accent); }
.home-link-add { color:var(--muted); border-style:dashed; background:none; box-shadow:none; }
.home-links .profile-curiosities { padding:0; }
.home-links .tag-list { justify-content:center; }
.home-links-feed { max-width:640px; margin-inline:auto; width:100%; }
@media (max-width:900px) {
  .home-entries { grid-template-columns:minmax(0, 1fr); }
  .home-entries-featured .home-entry:first-child { grid-row:auto; }
}

/* Payments (shops/payments.html) and checkout. */
.payments-start p + p, .payments-start form { margin-top:.75rem; }
.payments-state { display:flex; align-items:center; gap:.5rem; font-weight:600; margin:0 0 .25rem; }
.payments-state .live-dot { background:var(--muted); animation:none; }
.payments-state.is-on .live-dot { background:var(--accent); }
.stripe-connect { display:grid; gap:1rem; margin:1rem 0; }
.stripe-connect [data-component="notification-banner"]:empty { display:none; }
.orders { margin-top:1rem; }
.order { border-top:1px solid var(--border); padding:.7rem 0; }
.order summary { display:grid; grid-template-columns:auto 1fr auto auto; gap:1rem; align-items:baseline; cursor:pointer; }
.order-number { font-variant-numeric:tabular-nums; color:var(--muted); }
.order-lines { list-style:none; padding:0; margin:.6rem 0; display:grid; gap:.3rem; }
.order-lines li { display:flex; justify-content:space-between; gap:1rem; }
.order-total { font-weight:700; border-top:1px solid var(--border); padding-top:.3rem; }
.order-ship { margin:.4rem 0 0; line-height:1.5; }
.cart-shop-foot { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.75rem; }
.cart-shop-foot .cart-shop-total { margin:0; }
@media (max-width:560px) { .order summary { grid-template-columns:auto 1fr auto; } .order summary .help { display:none; } }

/* ------------------------------------------------------------------------------- a group's own website (Design) */
/* Light theme: only a group's own pages can be light (base.html sets data-theme from its Design). The light values of
   most colours are still the :root rules above (written before light mode was retired); these are the rest. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#fafaf7; --fg:#18181a; --muted:#5f5f66; --accent:#1f7a4d; --border:#dedcd5; --field:#ffffff; --field-border:#9c9a94;
  --danger:#b3261e; --logo:#1f7a4d; --picked-bg:color-mix(in srgb, #1f7a4d 14%, transparent); --picked-border:#1f7a4d; --check:#1f7a4d;
  --green:#1f7a4d; --green-hover:#196540; --green-soft:#1f7a4d; --green-button:#1f7a4d; --green-button-fg:#ffffff;
  --surface:#ffffff; --surface-2:#f1efe9; --box-shadow:0 1px 2px rgba(0,0,0,.05), 0 2px 10px rgba(0,0,0,.05);
  --bar-icon:#55555c; --bar-line:rgba(0, 0, 0, .12); --bar-divider:rgba(0, 0, 0, .08); --bar-top:#ffffff; --bar-bottom:#f4f3ef; --drawer:#ffffff;
  --inline-link:#1f7a4d; --inline-link-hover:#145c39; --link-hover:#000000; --divider:rgba(0, 0, 0, .12);
}
:root[data-theme="light"] .topbar { background:color-mix(in srgb, var(--bg) 90%, transparent); }

/* Fonts (groups/brand.py FONTS): headings, and for some the body too. */
.group-font-classic :is(h1, h2, h3, .brand-site-name) { font-family:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; letter-spacing:-.01em; }
.group-font-editorial :is(h1, h2, h3, .brand-site-name), .group-font-editorial body { font-family:Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif; }
.group-font-rounded :is(h1, h2, h3, .brand-site-name), .group-font-rounded body { font-family:ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", Quicksand, Nunito, sans-serif; }
.group-font-bold :is(h1, h2, h3, .brand-site-name) { font-family:"Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0; }
.group-font-typewriter :is(h1, h2, h3, .brand-site-name) { font-family:ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; letter-spacing:-.02em; }

/* The website header and footer (groups/_site_header.html, _site_footer.html). */
.site-header { border-bottom:1px solid var(--border); background:var(--bg); }
.site-header-inner { max-width:var(--group-width, 1100px); margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:1.25rem; }
body:has(main.group-layout-full) :is(.site-header-inner, .site-footer-inner) { max-width:none; padding-inline:clamp(16px, 3vw, 40px); }
.site-brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; min-width:0; flex:none; }
.site-logo { width:44px; height:44px; flex:none; }
.site-brand-text { display:grid; line-height:1.2; min-width:0; }
.site-brand .brand-site-name { font-size:1.2rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-tagline { color:var(--muted); font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-nav { flex:1; min-width:0; }
.site-links { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.25rem; justify-content:flex-end; }
.site-links a { display:block; padding:.45rem .75rem; border-radius:var(--radius); color:var(--muted); text-decoration:none; font-weight:500; }
.site-links a:hover { color:var(--fg); background:var(--surface); }
.site-links a[aria-current="page"] { color:var(--fg); box-shadow:inset 0 -2px 0 var(--accent); border-radius:var(--radius) var(--radius) 0 0; }
.site-cta { display:flex; align-items:center; gap:.5rem; flex:none; }
.site-member { color:var(--muted); font-size:.85rem; }
.site-menu-toggle { display:none; margin-left:auto; }
.page.has-site-header { padding-top:28px; }
.site-footer-group { margin-top:3rem; border-top:1px solid var(--border); background:var(--surface); }
.site-footer-inner { max-width:var(--group-width, 1100px); margin:0 auto; padding:32px 16px 16px; display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.site-footer-name { font-size:1.1rem; font-weight:700; margin:0 0 .35rem; }
.site-footer-text { color:var(--muted); max-width:46ch; line-height:1.5; margin:0 0 .75rem; white-space:pre-line; }
.site-social, .site-footer-links { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
.site-footer-links { flex-direction:column; }
.site-social a, .site-footer-links a { color:var(--muted); text-decoration:none; }
.site-social a:hover, .site-footer-links a:hover { color:var(--fg); }
.site-footer-simpler { max-width:var(--group-width, 1100px); margin:0 auto; padding:12px 16px 28px; color:var(--muted); font-size:.82rem; }
.site-footer-simpler a { color:var(--muted); }
body:has(.site-footer-group) .site-footer { display:none; }  /* simpler's own footer: the group's carries its links */
/* Signed out: a slim "on simpler" bar above the group's header. */
.doc-header-slim { padding:6px 16px; max-width:none; border-bottom:1px solid var(--border); }
.on-simpler { display:inline-flex; align-items:center; gap:.4rem; color:var(--muted); font-size:.8rem; text-decoration:none; }
.on-simpler .logo { height:14px; color:var(--logo); }
@media (max-width:760px) {
  .site-header-inner { flex-wrap:wrap; gap:.75rem; }
  .site-menu-toggle { display:grid; }
  .site-nav { order:3; flex-basis:100%; display:none; }
  .site-header.is-menu-open .site-nav { display:block; }
  .site-links { flex-direction:column; align-items:stretch; }
  .site-cta { order:2; }
  .site-tagline { display:none; }
}

/* Design: swatches and font samples. */
.swatches { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.swatch { width:34px; height:34px; border-radius:50%; border:2px solid var(--border); background:var(--swatch); cursor:pointer; padding:0; }
.swatch.is-picked { box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--fg); border-color:transparent; }
.swatch-custom input { width:42px; height:34px; padding:0; border:1px solid var(--border); border-radius:var(--radius); background:none; cursor:pointer; }
.design-fonts { grid-template-columns:repeat(6, minmax(0, 1fr)); }
.font-choice { justify-items:center; text-align:center; }
.font-sample { font-size:2rem; line-height:1.1; }
.design-links { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 1rem; }
@media (max-width:900px) { .design-fonts { grid-template-columns:repeat(3, minmax(0, 1fr)); } .design-links { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:760px) {
  .site-brand { flex:1 1 auto; }
  .site-brand .brand-site-name { white-space:normal; font-size:1.05rem; }
  .site-cta .btn { padding:.45rem .8rem; }
}
.page-group-page .group-page-body > .doc { margin-inline:0; max-width:none; }

/* The page builder's sections (groups/_section.html) and its screens (groups/sections.html, section_form.html). */
.blocks { display:grid; gap:2.5rem; margin:1.5rem 0 2.5rem; }
.block h2 { font-size:1.45rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.9rem; }
.group-site.page-built { max-width:var(--group-width, 1100px); }
.block-body { max-width:72ch; }
.block-hero { position:relative; display:grid; place-items:center; text-align:center; min-height:420px; padding:56px 24px; border-radius:var(--radius);
              overflow:hidden; background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 28%, var(--surface)), var(--surface)); }
.block-hero-medium { min-height:280px; }
.block-hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.block-hero.has-image::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.65)); }
.block-hero-inner { position:relative; z-index:1; display:grid; justify-items:center; gap:1rem; max-width:720px; }
.block-hero h1 { font-size:clamp(2.1rem, 5.5vw, 3.6rem); margin:0; line-height:1.05; }
.block-hero-text { font-size:1.15rem; line-height:1.55; margin:0; }
.block-hero.has-image :is(h1, .block-hero-text) { color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.group-layout-full .block-hero, .group-layout-content .block-hero { border-radius:0; margin-inline:calc(50% - 50vw); }
.block-split { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:2rem; align-items:center; }
.photo-left .block-split-photo { order:-1; }
.block-split-photo { width:100%; border-radius:var(--radius); object-fit:cover; aspect-ratio:4 / 3; }
.block-gallery { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:.5rem; }
.block-gallery img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius); display:block; transition:opacity .15s; }
.block-gallery a:hover img { opacity:.85; }
.block-cta { padding:2rem; border-radius:var(--radius); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.block-cta-inner { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.block-cta h2 { margin-bottom:.35rem; }
.block-cta p { margin:0; color:color-mix(in srgb, var(--fg) 85%, transparent); }
.block-faq { display:grid; gap:.5rem; max-width:820px; }
.block-faq details { padding:.9rem 1.1rem; border-radius:var(--radius); background:var(--surface); box-shadow:var(--box-shadow); }
.block-faq summary { font-weight:600; cursor:pointer; }
.block-faq details p { margin:.6rem 0 0; line-height:1.6; color:color-mix(in srgb, var(--fg) 88%, transparent); }
.block-quotes { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; }
.block-quotes figure { margin:0; padding:1.25rem; border-radius:var(--radius); background:var(--surface); box-shadow:var(--box-shadow); }
.block-quotes blockquote { margin:0; font-size:1.05rem; line-height:1.55; }
.block-quotes blockquote::before { content:"\201C"; display:block; font-size:2.4rem; line-height:.6; color:var(--accent); margin-bottom:.4rem; }
.block-quotes figcaption { margin-top:.75rem; color:var(--muted); font-weight:600; }
.block-pages { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:.75rem; }
.block-pages .home-link { display:grid; gap:.2rem; }
.builder-edit-link { margin:-1rem 0 2rem; text-align:center; }
@media (max-width:760px) {
  .block-split { grid-template-columns:minmax(0, 1fr); }
  .photo-left .block-split-photo { order:0; }
  .block-hero { min-height:320px; }
}
.builder-list { list-style:none; padding:0; display:grid; gap:.6rem; margin-bottom:1.25rem; max-width:none !important; }
.builder-item { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.builder-item.is-hidden { opacity:.55; }
.builder-item-main { display:flex; align-items:center; gap:.8rem; min-width:0; }
.builder-kind { color:var(--muted); font-size:.82rem; min-width:9rem; }
.builder-thumb { width:56px; height:38px; object-fit:cover; border-radius:5px; }
.builder-actions { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.builder-actions form { display:inline; }
.builder-actions .icon-button:disabled { opacity:.3; cursor:default; }
.builder-kinds { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:.6rem; }
.builder-kind-button { display:grid; gap:.25rem; text-align:left; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--radius);
                       background:none; color:var(--fg); font:inherit; cursor:pointer; }
.builder-kind-button:hover { border-color:var(--accent); background:var(--picked-bg); }
.section-row { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:0 1rem; padding-top:.5rem; border-top:1px solid var(--border); }
.section-current-photo { max-width:280px; border-radius:var(--radius); margin:-.5rem 0 1rem; display:block; }
.gallery-edit { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:.5rem; }
.gallery-edit img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:5px; display:block; }
.gallery-edit label { display:flex; gap:.3rem; align-items:center; font-size:.85rem; margin-top:.25rem; }
@media (max-width:760px) { .section-row { grid-template-columns:minmax(0, 1fr); } }
.home-preview .hp-split { display:grid !important; grid-template-columns:1fr 1fr; gap:4px; height:22px; flex:none; }
.home-preview .hp-split span { background:var(--surface-2); }
.home-preview .hp-short-hero { height:26px !important; }
.home-preview .hp-plus { align-self:center; color:var(--accent); font-weight:700; line-height:1; }
.section-form { margin-top:1rem; }

/* Events (groups/events_page.html, event.html, _event_card.html), Contact and Inbox. */
.event-list { display:grid; gap:.6rem; margin:1rem 0; }
.event-card { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; border-radius:var(--radius); background:var(--surface); box-shadow:var(--box-shadow); }
.event-date { display:grid; place-items:center; width:58px; flex:none; padding:.35rem 0; border-radius:var(--radius); text-decoration:none;
              background:color-mix(in srgb, var(--accent) 16%, var(--surface)); line-height:1.1; }
.event-date span { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); }
.event-date strong { font-size:1.5rem; }
.event-card-text { flex:1; min-width:0; }
.event-card h2 { font-size:1.05rem; margin:0 0 .2rem; }
.event-card h2 a { text-decoration:none; }
.event-card .entry-meta { margin:0; }
.event-card-photo img { width:84px; height:60px; object-fit:cover; border-radius:5px; display:block; }
.event-facts { display:grid; gap:.6rem; margin:1rem 0; }
.event-facts div { display:grid; grid-template-columns:5rem 1fr; gap:.5rem; }
.event-facts dt { color:var(--muted); }
.event-actions { margin-bottom:1rem; }
.event-rsvp { margin-top:2.25rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.event-rsvp h2 { font-size:1.15rem; margin-bottom:.25rem; }
.rsvp-buttons { display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0 1rem; }
.event-when { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0 .75rem; }
@media (max-width:640px) { .event-when { grid-template-columns:repeat(2, minmax(0, 1fr)); } .event-card-photo { display:none; } }
.contact-form { margin-top:1.25rem; }
.inbox-message { padding:1rem 0; border-top:1px solid var(--border); }
.inbox-message:first-child { border-top:0; }
.inbox-message.is-new .inbox-head strong::after { content:" · New"; color:var(--accent); font-weight:600; }
.inbox-head { display:flex; flex-wrap:wrap; gap:.25rem .75rem; align-items:baseline; margin:0 0 .4rem; }
.inbox-body { margin:0; line-height:1.55; }

/* Donate and Membership pages, and membership tiers on Payments. */
.donate-form { display:grid; gap:1rem; margin-top:1rem; max-width:520px; }
.donate-amounts { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.5rem; }
.donate-amount { position:relative; }
.donate-amount input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.donate-amount span { display:block; padding:.85rem 0; text-align:center; font-weight:700; font-size:1.1rem; border:1px solid var(--border); border-radius:var(--radius); }
.donate-amount input:checked + span { border-color:var(--picked-border); background:var(--picked-bg); }
.donate-amount input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.tier-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:.75rem; margin:1rem 0; }
.tier-card { display:grid; gap:.5rem; align-content:start; }
.tier-card h2 { font-size:1.15rem; margin:0; }
.tier-price { font-size:1.3rem; font-weight:700; margin:0; }
.membership-current { margin:1rem 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.membership-current p { margin:0; }
.tier-row { display:grid; grid-template-columns:minmax(0, 1.2fr) 6rem 7rem minmax(0, 2fr) auto auto auto; gap:.5rem; align-items:center; padding:.5rem 0; border-top:1px solid var(--border); }
.tier-row input, .tier-row select { min-width:0; }
@media (max-width:900px) { .tier-row { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }
/* On a group's own pages, its main buttons wear its accent (groups/brand.py keeps the text on it readable). */
:is(.group-site, .site-header) .btn:not(.btn-secondary):not(.btn-dark):not(.link-button) { background:var(--green-button); color:var(--green-button-fg); border-color:transparent; }
:is(.group-site, .site-header) .btn:not(.btn-secondary):not(.btn-dark):not(.link-button):hover { background:color-mix(in srgb, var(--green-button) 88%, var(--fg)); }
.domain-form { display:grid; gap:1rem; justify-items:start; }
.domain-form .field { width:100%; max-width:480px; }
.dns-records { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.9rem; }
.dns-records :is(th, td) { text-align:left; padding:.5rem; border-bottom:1px solid var(--border); vertical-align:top; }
.dns-records code { overflow-wrap:anywhere; }
.product-options .option-row { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 5rem; gap:.5rem; align-items:center; margin-bottom:.4rem; }
.option-head { color:var(--muted); font-size:.82rem; }
.option-available { display:flex; justify-content:center; }
.variant-select { min-width:12rem; }
.order-ship-status { font-size:.78rem; color:var(--muted); }
.order-ship-status.is-shipped { color:var(--accent); }
.order-shipping { display:grid; grid-template-columns:10rem 8rem minmax(0, 1fr) minmax(0, 1fr) auto; gap:.4rem; margin-top:.6rem; }
@media (max-width:760px) { .order-shipping { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); } }

/* Apps (apps/): the install screen and Dashboard → Apps. */
.app-icon { width:44px; height:44px; border-radius:10px; object-fit:cover; flex:none; }
.app-icon-blank { display:grid; place-items:center; background:var(--surface-2); font-weight:700; color:var(--accent); }
.authorize-head { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.authorize-head .app-icon { width:56px; height:56px; }
.authorize-head h1 { margin:0; }
.authorize-form { display:grid; gap:.75rem; }
.authorize-scopes { margin:0; padding-left:1.2rem; display:grid; gap:.3rem; }
.app-row { display:flex; align-items:center; gap:.9rem; padding:.85rem 0; border-top:1px solid var(--border); }
.app-row:first-of-type { border-top:0; }
.app-row-main { flex:1; display:grid; gap:.15rem; min-width:0; }
.app-allowed ul { margin:.3rem 0; padding-left:1.1rem; }
.app-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:.6rem; }
.app-card { display:flex; align-items:center; gap:.75rem; padding:.75rem; border:1px solid var(--border); border-radius:var(--radius); }
.app-card > div { flex:1; min-width:0; }
.app-card p { margin:0; }

/* developers.simpler.social (templates/developers/). */
.dev-header { border-bottom:1px solid var(--border); }
.dev-header-inner { max-width:1100px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.dev-brand { display:flex; align-items:center; gap:.55rem; text-decoration:none; font-size:1.15rem; }
.dev-brand .logo { height:24px; }
.dev-brand strong { color:var(--accent); font-weight:700; }
.dev-nav { display:flex; align-items:center; gap:1.1rem; }
.dev-nav a:not(.btn) { color:var(--muted); text-decoration:none; }
.dev-nav a[aria-current="page"], .dev-nav a:hover { color:var(--fg); }
.dev-page { max-width:1100px; }
.dev-hero { padding:2rem 0 2.5rem; max-width:720px; }
.dev-hero h1 { font-size:clamp(2.2rem, 5vw, 3.2rem); }
.dev-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:.75rem; }
.dev-cards h2 { font-size:1.05rem; }
.dev-docs { display:grid; grid-template-columns:200px minmax(0, 1fr); gap:2rem; align-items:start; }
.dev-toc { position:sticky; top:20px; display:grid; gap:.35rem; }
.dev-toc a { color:var(--muted); text-decoration:none; }
.dev-toc a:hover { color:var(--fg); }
.dev-doc { max-width:780px; margin:0; }
.dev-doc pre { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.9rem 1rem; overflow-x:auto;
               font-size:.85rem; line-height:1.5; margin:0 0 1rem; }
.dev-doc code, .dev-keys code, .dev-check code, .dev-delivery code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.88em; }
.dev-table { width:100%; border-collapse:collapse; margin:0 0 1rem; font-size:.92rem; }
.dev-table :is(th, td) { text-align:left; vertical-align:top; padding:.5rem; border-bottom:1px solid var(--border); }
.dev-keys { margin-bottom:1rem; }
.dev-key-list { display:grid; gap:.75rem; margin:0 0 .75rem; }
.dev-key-list > div { display:grid; grid-template-columns:9rem minmax(0, 1fr); gap:1rem; }
.dev-key-list dt { color:var(--muted); }
.dev-key-list dd { display:grid; gap:.3rem; justify-items:start; margin:0; }
.dev-secret { overflow-wrap:anywhere; padding:.2rem .4rem; border-radius:5px; background:var(--surface-2); }
.dev-app-form { display:grid; gap:.25rem; }
.dev-check { display:flex; gap:.5rem; align-items:baseline; margin:.25rem 0; }
.dev-delivery { margin:0 0 .4rem; font-size:.9rem; }
@media (max-width:860px) { .dev-docs { grid-template-columns:minmax(0, 1fr); } .dev-toc { position:static; display:flex; flex-wrap:wrap; gap:.6rem; } }
.dev-footer { max-width:1100px; margin:0 auto; padding:24px 16px 40px; color:var(--muted); font-size:.85rem; } .dev-footer a { color:var(--muted); }