/* Campfire — a Basecamp-style message board. Warm, roomy, friendly. */
:root{
--bg:#fdf9f3; /* warm paper */
--panel:#ffffff;
--ink:#1c1c1c;
--ink-soft:#6b6b6b;
--muted:#8a8579;
--line:#ece6db;
--line-strong:#ddd5c7;
--accent:#16a34a; /* basecamp green */
--accent-ink:#0f7a37;
--link:#1f6fd6;
--shadow:0 1px 2px rgba(40,30,10,.06), 0 6px 18px rgba(40,30,10,.05);
--radius:14px;
--maxw:1560px; /* wide central column, narrow side margins */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--bg); color:var(--ink);
font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
-webkit-font-smoothing:antialiased;
}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none !important}
/* ---- top bar ---- */
#topbar{position:sticky;top:0;z-index:30;background:rgba(253,249,243,.92);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.topbar-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 18px}
.brand{font-weight:800;font-size:19px;color:var(--ink);display:flex;align-items:center;gap:7px;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand-mark{height:30px;width:auto;display:block}
#crumbs{flex:1;color:var(--muted);font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#crumbs a{color:var(--muted)}
#crumbs .sep{margin:0 7px;opacity:.5}
#crumbs .here{color:var(--ink);font-weight:600}
.topbar-right{display:flex;align-items:center;gap:14px}
/* narrow prev/next thread buttons (mirror the ← / → keys); shown only on a thread */
.thread-nav{display:flex;align-items:center;gap:2px;flex:none}
.thread-nav.hidden{display:none}
.tnav-btn{width:22px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:14px;line-height:1;color:var(--muted);background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer}
.tnav-btn:hover:not(:disabled){color:var(--ink);background:rgba(0,0,0,.04)}
.tnav-btn:disabled{opacity:.35;cursor:default}
.ghost-link{color:var(--muted);font-size:14px}
.me-chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-soft)}
/* ---- layout ---- */
/* the shell is a flex row: [pinned-summary sidebar][drag splitter][app column].
the sidebar/splitter are display:none until a summary is pinned. --topbar-h is
measured in JS so the sticky sidebar sits just under the (variable-height) header. */
#dc-shell{display:flex;align-items:flex-start}
#app-wrap{flex:1 1 auto;min-width:0}
#app{max-width:var(--maxw);margin:0 auto;padding:12px 18px 80px}
#dc-sidebar{flex:0 0 var(--sbw,320px);width:var(--sbw,320px);position:sticky;top:var(--topbar-h,56px);
height:calc(100vh - var(--topbar-h,56px));overflow:auto;background:var(--panel,#fff);
border-right:1px solid var(--line);padding:14px 16px 24px;box-sizing:border-box}
#dc-splitter{flex:0 0 7px;position:sticky;top:var(--topbar-h,56px);height:calc(100vh - var(--topbar-h,56px));
cursor:col-resize;background:transparent}
#dc-splitter::before{content:"";position:absolute;left:3px;top:0;bottom:0;width:1px;background:var(--line)}
#dc-splitter:hover::before,#dc-splitter.dragging::before{width:3px;left:2px;background:var(--link)}
body.dc-resizing{cursor:col-resize;user-select:none}
.dc-sb-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.dc-sb-title{flex:1;min-width:0;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;
color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-sb-close{border:0;background:none;color:var(--muted);cursor:pointer;font-size:13px;padding:2px 4px;white-space:nowrap}
.dc-sb-close:hover{color:var(--ink)}
.dc-sb-body .summarize-bar{margin-bottom:12px}
.dc-sb-body .summary-out{margin-bottom:0}
@media(max-width:760px){
#dc-shell{flex-direction:column}
#dc-sidebar{flex:none;width:auto!important;position:static;height:auto;max-height:55vh;border-right:0;border-bottom:1px solid var(--line)}
#dc-splitter{display:none!important}
}
.loading{padding:60px 0;text-align:center;color:var(--muted)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.page-head h1{margin:0;font-size:27px;letter-spacing:-.02em}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:3px}
/* forum title + (on Problems) its status chooser, side by side to the right */
.title-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);
padding:8px 14px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:.12s;line-height:1}
.btn:hover{border-color:#cfc6b4;background:#fffdf8;text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn.small{padding:5px 10px;font-size:13px;border-radius:8px}
.btn.subtle{border-color:transparent;background:transparent;color:var(--muted)}
.btn.subtle:hover{background:#f1ebe0;color:var(--ink)}
.btn.danger:hover{color:#c0392b;border-color:#e7b7af}
.btn:disabled{opacity:.45;cursor:not-allowed;background:#ececec;color:#8a8a8a;border-color:#dcdcdc;box-shadow:none}
.btn:disabled:hover{background:#ececec;color:#8a8a8a;border-color:#dcdcdc}
/* ---- project cards (home) ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.proj-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:20px;box-shadow:var(--shadow);cursor:pointer;transition:.14s;overflow:hidden}
.proj-card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(40,30,10,.08),0 14px 30px rgba(40,30,10,.07)}
.proj-card .swatch{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;border-radius:8px;
font-size:12px;letter-spacing:.06em;color:#fff;font-weight:800;margin-bottom:14px}
.proj-card h3{margin:0 0 6px;font-size:18px;letter-spacing:-.01em}
.proj-card p{margin:0;color:var(--muted);font-size:14px;min-height:20px}
.proj-card .meta{margin-top:14px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px}
.proj-card.new{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
border-style:dashed;color:var(--muted);cursor:pointer;box-shadow:none;min-height:150px}
.proj-card.new:hover{color:var(--accent-ink);border-color:var(--accent)}
.proj-card.new .plus{font-size:30px;line-height:1;margin-bottom:6px}
/* ---- category pill ---- */
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink-soft);
background:#f3eee4;border:1px solid var(--line);padding:3px 9px;border-radius:999px;line-height:1}
.pill .emo{font-size:13px}
/* ---- message list ---- */
.msg-list{display:flex;flex-direction:column;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
a.proj-card,a.msg-row,a.conv{text-decoration:none;color:inherit}
.msg-row{display:flex;gap:14px;padding:18px 20px;border-bottom:1px solid var(--line);cursor:pointer;transition:.1s}
.msg-row:last-child{border-bottom:none}
/* infinite-scroll sentinel: invisible trigger, shows a spinner while loading the next page */
.list-sentinel{height:1px}
.list-sentinel.loading{height:auto;padding:18px 0;text-align:center;border-top:1px solid var(--line)}
.list-sentinel.loading::after{content:"";display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--link);border-radius:50%;animation:dcspin .7s linear infinite;vertical-align:middle}
@keyframes dcspin{to{transform:rotate(360deg)}}
.msg-row:hover{background:#fffdf8}
.msg-row .body{flex:1;min-width:0}
.msg-row .titleline{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.msg-row h3{margin:0;font-size:17px;letter-spacing:-.01em;font-weight:700}
.msg-row .pin{color:#d8a200}
.msg-row .excerpt{color:var(--muted);font-size:14px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-row .sub{margin-top:7px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.msg-row .sub .dot{opacity:.4}
.count-bubble{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:13px}
.empty{padding:48px 24px;text-align:center;color:var(--muted)}
/* ---- avatars ---- */
.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm{width:28px;height:28px;font-size:11px}
.avatar.lg{width:46px;height:46px;font-size:17px}
/* ---- message detail ---- */
.msg-detail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 34px}
.msg-detail .head{display:flex;gap:14px;align-items:flex-start}
.msg-detail h1{margin:6px 0 0;font-size:26px;letter-spacing:-.02em;flex:1}
.msg-detail .byline{color:var(--muted);font-size:14px;margin-top:9px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Match Trix/Basecamp content metrics exactly: zero block margins + line-height
1.5, so paragraph gaps come ONLY from the explicit empty
lines that
Basecamp content uses (otherwise our margins double the spacing). */
.msg-detail .content{margin-top:22px;font-size:16.5px;line-height:1.5}
.msg-detail .content p{margin:0}
.msg-detail .content ul,.msg-detail .content ol{margin:0;padding-left:24px}
.msg-detail .content blockquote{margin:0;padding:6px 16px;border-left:3px solid var(--line-strong);color:var(--ink-soft)}
.msg-detail .content img{width:auto;height:auto;max-width:50%;max-height:60vh;border-radius:8px;border:1px solid var(--line);cursor:zoom-in}
/* imported Basecamp attachments */
.dc-att{margin:12px 0}
.dc-att img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block}
.dc-att figcaption{color:var(--muted);font-size:13px;margin-top:5px}
/* gallery: a container holding 2+ adjacent images is laid out in a row (like
Basecamp's attachment-gallery: ~3-up, growing to fill — 2→50%, 3→33%). */
.content div:has(> figure.dc-att + figure.dc-att){display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.content div:has(> figure.dc-att + figure.dc-att) > figure.dc-att{margin:0;flex:1 1 30%;max-width:calc(50% - 4px)}
.content div:has(> figure.dc-att + figure.dc-att) > figure.dc-att img{width:auto;max-width:100%;max-height:none;border-radius:8px}
.content div:has(> figure.dc-att + figure.dc-att) > :not(figure){flex-basis:100%;max-width:100%}
.content .dc-file,.comment .dc-file,.bubble .dc-file{display:inline-flex;align-items:center;gap:6px;background:#f3eee4;border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:14px;font-weight:600;margin:4px 0}
/* dc-mention spans from the import can wrap a person's whole bio; don't colour
the whole span — only the linked @name inside (the ) is styled as a mention */
.dc-mention{color:inherit;font-weight:inherit}
.dc-mention a[href^="#/p/"]{color:var(--accent-ink);font-weight:700;text-decoration:none}
.dc-embed{display:inline-block;position:relative;margin:10px 0;max-width:480px}
.dc-embed img{max-width:100%;border-radius:10px;border:1px solid var(--line);display:block}
.comment .content img,.chat-line .content img,.bubble img{width:auto;height:auto;max-width:50%;max-height:60vh;border-radius:8px;border:1px solid var(--line);cursor:zoom-in}
/* Basecamp @mentions imported from pings/posts arrive as
![]()
Name.
Basecamp shows that as a small inline pill (text-height avatar + first name on
the baseline). Left alone, our .bubble img / .content img rules ignore the
width/height attrs and blow the avatar up to its intrinsic size, while the bare
/ stack it as a block. Detect it by the Basecamp-only
data-avatar-for-person-id attr (native dcamp avatars have no such attr) and
render it inline at text height, name styled like a native @mention. */
bc-attachment[content-type="application/vnd.basecamp.mention"],
bc-attachment[content-type="application/vnd.basecamp.mention"] figure{display:inline;margin:0;padding:0}
bc-attachment[content-type="application/vnd.basecamp.mention"] figcaption{display:inline;margin:0;font-size:inherit;font-weight:700;color:var(--accent-ink)}
/* dcamp.js bcInlineMentions() rewrites each imported mention to an inline pill:
![]()
Name
(the ![]()
is still sized by the img[data-avatar-for-person-id] rule below).
This is what actually renders — the bc-attachment/figure rules above are a
CSS-only fallback for any body not passed through embedYouTube/bcInlineMentions. */
.bc-mention{white-space:nowrap;font-weight:700;color:var(--accent-ink)}
img[data-avatar-for-person-id]{display:inline-block!important;width:1.15em!important;height:1.15em!important;
max-width:1.15em!important;max-height:1.15em!important;min-width:0!important;
margin:0 .18em 0 0!important;border:0!important;border-radius:50%!important;
object-fit:cover;vertical-align:middle;cursor:default!important;box-shadow:none}
.msg-detail .content a{color:var(--link)}
.msg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
/* ---- boosts ---- */
.boosts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:18px}
.boost{display:inline-flex;align-items:center;gap:5px;background:#f3eee4;border:1px solid var(--line);
border-radius:999px;padding:3px 9px;font-size:13px;cursor:pointer;line-height:1.4;transition:.1s}
.boost:hover{border-color:var(--line-strong)}
.boost.add{color:var(--muted);font-weight:700}
.boost .n{color:var(--muted);font-weight:600}
/* ---- comments ---- */
.comments{margin-top:30px}
.comments-h{font-size:14px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.comment{display:flex;gap:13px;padding:20px 0;border-top:1px solid var(--line)}
.comment .body{flex:1;min-width:0}
.comment .who{font-weight:700;font-size:14.5px}
.comment .when{color:var(--muted);font-size:13px;margin-left:8px;font-weight:400}
.when.copy-link{cursor:pointer}
.when.copy-link:hover{text-decoration:underline}
.comment .content{margin-top:5px;line-height:1.5}
.comment .content p{margin:0}
.comment .content ul,.comment .content ol{margin:0;padding-left:22px}
.comment-tools{margin-top:7px;display:flex;gap:4px;opacity:0;transition:.1s}
.comment:hover .comment-tools{opacity:1}
/* ---- composer / rich editor ---- */
.composer{margin-top:26px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px}
.composer.flat{box-shadow:none}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:5px}
.input,.select{width:100%;border:1px solid var(--line-strong);border-radius:9px;padding:10px 12px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
.input:focus,.select:focus,.editor:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.input.big{font-size:19px;font-weight:700;letter-spacing:-.01em}
.toolbar{display:flex;gap:2px;border:1px solid var(--line-strong);border-bottom:none;border-radius:9px 9px 0 0;padding:5px 6px;background:#faf6ee;flex-wrap:wrap}
.toolbar button{border:none;background:transparent;width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:15px;color:var(--ink-soft)}
.toolbar button:hover{background:#ece5d8;color:var(--ink)}
.toolbar .attach-btn{width:auto;padding:0 9px;gap:5px;display:inline-flex;align-items:center;font-size:13px;font-weight:600}
.editor{border:1px solid var(--line-strong);border-radius:0 0 9px 9px;min-height:120px;padding:12px 14px;font-size:16px;line-height:1.6;background:#fff;overflow-y:auto;transition:.12s}
.editor.dragover{border-color:var(--accent);background:#f3fbf5;box-shadow:0 0 0 3px rgba(22,163,74,.15)}
.editor figure.dc-att{margin:8px 0}
.upload-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:6px}
.editor:empty:before{content:attr(data-ph);color:var(--muted)}
.editor p{margin:0 0 10px}
.editor ul,.editor ol{margin:0 0 10px;padding-left:22px}
/* ---- Trix editor, themed to match dcamp ---- */
.trix-wrap{margin-top:2px}
trix-toolbar .trix-button-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:#faf6ee;border:1px solid var(--line-strong);border-bottom:none;border-radius:9px 9px 0 0;padding:4px 6px}
trix-toolbar .trix-button-row::-webkit-scrollbar{display:none} /* no visible horizontal scrollbar */
trix-toolbar .trix-button-group{border:1px solid var(--line);border-radius:7px;margin:0 8px 0 0;background:#fff}
trix-toolbar .trix-button{border-bottom:none;background:transparent;color:var(--ink-soft)}
trix-toolbar .trix-button:hover{background:#ece5d8}
trix-toolbar .trix-button.trix-active{background:#e3dccd;color:var(--ink)}
trix-toolbar .dc-attach-btn,trix-toolbar .trix-hr-btn,trix-toolbar .trix-table-btn{text-indent:0;font-size:15px;width:auto;padding:0 10px}
.dc-trix{display:block;border:1px solid var(--line-strong);border-radius:0 0 9px 9px;min-height:120px;padding:12px 14px;
font-size:16px;line-height:1.5;background:#fff;transition:.12s}
.dc-trix:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.dc-trix p{margin:0}
.dc-trix ul,.dc-trix ol{margin:0;padding-left:22px}
/* attachments — in the editor AND the read view (Trix's ) */
.dc-trix .attachment img{max-width:50%;height:auto;border-radius:8px;border:1px solid var(--line)}
.content .attachment img,.comment .attachment img,.bubble .attachment img{width:auto;height:auto;max-width:50%;max-height:60vh;border-radius:8px;border:1px solid var(--line);cursor:zoom-in}
/* Trix image galleries: Trix's own gallery flex CSS is scoped to .trix-content,
which dcamp's editor (.dc-trix) and read view (.content) do NOT carry, so lay
out the wrapper here for BOTH the composer (.dc-trix) and the read view
(.content). 2 images -> 50% each, 3+ -> 33%. Single images stay <=50% above. */
.content .attachment-gallery,.dc-trix .attachment-gallery{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.content .attachment-gallery .attachment,.dc-trix .attachment-gallery .attachment{margin:0;flex:1 1 30%;max-width:calc(50% - 4px)}
.content .attachment-gallery .attachment img,.dc-trix .attachment-gallery .attachment img{width:auto;max-width:100%;max-height:none;border:1px solid var(--line)}
.content .attachment-gallery--3 .attachment,.dc-trix .attachment-gallery--3 .attachment,
.content .attachment-gallery--5 .attachment,.dc-trix .attachment-gallery--5 .attachment,
.content .attachment-gallery--6 .attachment,.dc-trix .attachment-gallery--6 .attachment{max-width:calc(33% - 6px)}
/* code blocks: thin rectangle */
.content pre,.comment .content pre,.chat-line .content pre,.bubble pre,.dc-trix pre{border:1px solid #d9d9de;border-radius:6px;padding:10px 12px;background:#f2f2f4;overflow-x:auto;margin:8px 0}
.content .attachment,.comment .attachment{margin:10px 0}
.content .attachment--file,.comment .attachment--file{display:inline-block;padding:6px 11px;background:#f3eee4;border:1px solid var(--line);border-radius:8px;font-size:14px}
.composer-actions{display:flex;align-items:center;gap:10px;margin-top:12px}
.composer-actions .spacer{flex:1}
.row{display:flex;gap:12px}
.row>*{flex:1}
/* composer: subject + category on one row; editor grows with content and caps
at 20 rows (then scrolls). .dc-trix font-size 16px, line-height 1.5 -> a row
is 1.5em; 20 rows = 30em, + 24px editor padding. */
.composer-top{display:flex;gap:10px;align-items:stretch}
.composer-top .input{flex:1 1 auto;min-width:0}
.composer-top .cat-select{flex:0 0 auto;width:auto;font-weight:700}
.composer-full .composer-body{margin-top:12px}
.composer-full .composer-body .dc-trix{min-height:calc(6em + 24px);max-height:calc(30em + 24px);overflow-y:auto}
/* ---- modal ---- */
#modal-overlay{position:fixed;inset:0;background:rgba(30,22,8,.4);display:flex;align-items:flex-start;justify-content:center;
padding:60px 18px;z-index:50;overflow-y:auto}
#modal{background:var(--panel);border-radius:var(--radius);box-shadow:0 12px 50px rgba(0,0,0,.25);width:100%;max-width:560px;padding:26px 28px}
#modal.wide{max-width:70vw}
#modal h2{margin:0 0 18px;font-size:21px}
.emoji-pick{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.emoji-pick button{font-size:20px;border:1px solid var(--line);background:#fff;border-radius:9px;width:42px;height:42px;cursor:pointer}
.emoji-pick button:hover{border-color:var(--accent);background:#f3fbf5}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#1c1c1c;color:#fff;padding:10px 18px;border-radius:10px;font-size:14px;z-index:80;box-shadow:0 6px 24px rgba(0,0,0,.25);opacity:0;transition:.2s}
.toast.show{opacity:1}
/* cold-load translation progress panel: shown in place of a thread/DM/chat while
the server translates the page in the background (client polls tr_progress). */
.tr-prog{max-width:420px;margin:48px auto;padding:22px 24px;background:var(--card,#fff);border:1px solid var(--line,#e6e3dd);border-radius:14px;box-shadow:0 6px 30px rgba(0,0,0,.06);text-align:center;animation:tr-prog-in .25s ease-out}
@keyframes tr-prog-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tr-prog-head{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:600;color:var(--ink,#1c1c1c);margin-bottom:16px}
.tr-prog-head svg{width:18px;height:18px;opacity:.8}
.tr-prog-track{height:8px;border-radius:999px;background:var(--line,#ece9e3);overflow:hidden}
.tr-prog-track i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#c8963e,#e0b667);transition:width .35s ease}
.tr-prog-meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;font-size:13px;color:var(--ink,#1c1c1c)}
.tr-prog-eta{color:var(--muted,#8a8578);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-prog-note{margin-top:14px;font-size:12px;line-height:1.45;color:var(--muted,#8a8578)}
/* notification popups: wider, with the sender's avatar, click to open */
.notif-toast{display:flex;align-items:center;gap:10px;max-width:380px;text-align:left}
.notif-toast.clickable{cursor:pointer}
.notif-toast .notif-toast-body{flex:1;min-width:0}
.notif-toast .notif-toast-msg{display:block;line-height:1.3}
/* the referenced text (subject / comment / dm) shown under the headline, clamped
to two lines so a long post never blows out the toast */
.notif-toast .notif-toast-prev{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;font-size:12px;line-height:1.35;color:var(--muted,#888)}
.notif-toast .notif-toast-ic{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e0567a;color:#fff;font-size:15px}
/* status filter — matches the .btn.small "Show popular" button chrome (border,
panel bg, ink text, 13px, radius 8px) with the same blue active state */
.seg-filter{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg-filter .seg-btn{display:inline-flex;align-items:center;gap:7px;border:0;border-left:1px solid var(--line-strong);background:transparent;color:var(--ink);padding:5px 10px;font-size:13px;line-height:1.2;cursor:pointer;white-space:nowrap}
.seg-filter .seg-btn:first-child{border-left:0}
.seg-filter .seg-btn:hover{background:#fffdf8}
.seg-filter .seg-btn.active{background:var(--link);color:#fff}
.seg-filter .seg-btn.active:hover{background:#1559b0;color:#fff}
.byline .seg-filter.status-set{vertical-align:middle;margin-right:8px}
.byline .seg-filter.status-set .seg-btn{padding:3px 9px;font-size:12px}
/* My-settings notification matrix (types × Email/Popup) */
.set-notif-hint{font-size:12px;color:var(--muted);margin:-2px 0 8px}
.notif-loading{font-size:13px;color:var(--muted);padding:4px 0}
.notif-matrix{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.notif-row{display:flex;align-items:center;border-top:1px solid var(--line)}
.notif-row:first-child{border-top:0}
.notif-row .notif-label{flex:1;padding:9px 12px;font-size:14px}
.notif-row .notif-col{width:72px;flex:none;text-align:center;padding:9px 4px}
.notif-head{background:#f7f3ec}
.notif-head .notif-col{font-size:12px;font-weight:700;color:var(--muted)}
.notif-row .notif-cb{width:17px;height:17px;cursor:pointer;accent-color:var(--accent)}
.notif-row .notif-cb-off{cursor:not-allowed;opacity:.4}
.notif-email-off{border-top:1px solid var(--line);padding:9px 12px;font-size:12.5px;color:var(--muted);line-height:1.45}
.notif-email-off a{color:var(--accent)}
/* floating popover (boost picker, person card) */
.dc-pop{position:absolute;z-index:90;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 8px 30px rgba(40,30,10,.2);padding:8px}
.pop-emoji{display:flex;gap:4px;flex-wrap:wrap;max-width:230px;margin:0}
/* rich tabbed emoji picker — wide enough for 10 icons, uniform tab/grid spacing */
.emoji-picker{width:480px}
.emoji-search{width:100%;margin-bottom:6px;font-size:14px;padding:7px 10px}
.emoji-addtext{margin-bottom:6px}
.emoji-lbl{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:8px 0 4px}
.emoji-tabs{display:flex;flex-wrap:nowrap;gap:4px;border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:4px}
.emoji-tab{flex:1 1 0;min-width:0;border:none;background:transparent;font-size:18px;height:38px;border-radius:7px;cursor:pointer;opacity:.6}
.emoji-tab:hover{background:#f1ece2;opacity:1}
.emoji-tab.active{background:#e3dccd;opacity:1}
.emoji-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:4px;max-height:240px;overflow-y:auto}
.ep-emoji{border:none;background:transparent;font-size:21px;height:38px;border-radius:7px;cursor:pointer;padding:0}
.ep-emoji:hover{background:#f1ece2}
.boost.text{font-size:12px;font-weight:700}
.boost.mine{background:#e7f6ec;border-color:#bfe6cb}
/* your own reaction: reveal a trash hint on hover (space reserved so no jitter) */
.boost.mine .trash{font-size:11px;margin-left:3px;opacity:0;transition:opacity .12s}
.boost.mine:hover .trash{opacity:.85}
.boost.mine:hover{background:#fdece9;border-color:#e8b4ab}
/* ⋯ action menu (top-right of messages & comments) */
.msg-detail{position:relative}
.comment{position:relative}
.action-menu{position:absolute;top:14px;right:16px}
.comment .action-menu{top:6px;right:2px}
.am-btn{border:1px solid transparent;background:transparent;color:var(--muted);font-size:20px;line-height:1;width:30px;height:28px;border-radius:7px;cursor:pointer;font-weight:700}
.am-btn:hover{background:#f1ece2;color:var(--ink)}
.am-list{position:absolute;top:30px;right:0;min-width:150px;background:var(--panel);border:1px solid var(--line-strong);border-radius:9px;box-shadow:0 6px 24px rgba(40,30,10,.18);padding:5px;z-index:40}
.am-item{display:block;width:100%;text-align:left;border:none;background:transparent;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--ink)}
.am-item:hover{background:#f1ece2}
.am-item.danger:hover{background:#fdece9;color:#c0392b}
.person-card{width:1020px;max-width:calc(100vw - 48px);padding:6px 14px 14px}
.pc-head{text-align:center}
.pc-avatar{display:flex;justify-content:center;margin:4px 0 9px}
.avatar.xl{width:76px;height:76px;font-size:28px}
.pc-badges{margin-bottom:6px;line-height:1.8}
.pc-name{font-size:18px;font-weight:800;letter-spacing:-.01em}
.pc-sub{color:var(--muted);font-size:13px;margin-top:3px}
.pc-about{color:var(--ink-soft);font-size:13.5px;margin:7px 2px 0;line-height:1.4}
.pc-loc{color:var(--muted);font-size:13px;margin-top:6px}
.pc-ping{margin-top:12px;width:100%;justify-content:center}
.pc-act-h{text-align:left;text-transform:uppercase;font-size:11px;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:15px 2px 0}
.pc-act{text-align:left;max-height:270px;overflow-y:auto;margin:2px -4px 0}
.pc-act .act-row{gap:8px;padding:7px 6px;font-size:13px}
.pc-act .act-kind{width:auto;flex:none}
.pc-act .act-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-act .act-when{margin-left:auto;flex:none}
.pc-seeall{margin-top:8px;width:100%;justify-content:center}
.pc-mute{margin-top:8px;width:100%;justify-content:center;color:var(--muted)}
.pc-moderate{margin-top:8px;width:100%;justify-content:center;color:var(--muted)}
.pc-moderate.on{color:#c0392b}
.pc-report{margin-top:8px;width:100%;justify-content:center;color:#c0392b}
/* DM / Mute / Report / Moderate laid out side by side in one row */
.pc-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;margin-top:12px}
.pc-actions .btn{flex:1 1 0;min-width:130px;width:auto;margin-top:0;justify-content:center}
/* thin rounded outline on the subtle (Mute / Report / Moderate) buttons so they read as buttons */
.pc-actions .btn.subtle{border-color:var(--line-strong)}
.pc-actions .btn.subtle:hover{border-color:#cfc6b4}
/* Report-a-person dialog */
.report-dialog h2{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.report-who{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:10px}
.report-who .avatar{flex:none}
.report-intro{margin:0 0 10px}
.report-reason{width:100%;box-sizing:border-box;resize:vertical;min-height:120px}
.report-url{margin:8px 0 0;word-break:break-all}
.report-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
/* Reported-members list in Adminland > Moderators */
.rep-row{padding:10px 4px;border-bottom:1px solid var(--line)}
.rep-row:last-child{border-bottom:none}
.rep-head{display:flex;align-items:center;gap:10px}
.rep-head .avatar{flex:none}
.rep-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-when{margin-left:auto;flex:none}
.rep-by{margin:6px 0 0}
.rep-reason{white-space:pre-wrap;background:#151515;border-radius:8px;padding:10px;margin:8px 0}
.rep-url{word-break:break-all}
.rep-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rep-rm{color:#c0392b}
/* People-under-moderation list in Adminland > Moderators */
.mod-person-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line)}
.mod-person-row:last-child{border-bottom:none}
.mod-person-row .avatar{flex:none}
.mod-person-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mod-person-since{flex:1;min-width:0}
.mod-person-rm{flex:none;color:#c0392b}
/* Muted-people list in My settings */
.muted-list{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.muted-row{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid var(--line)}
.muted-row:last-child{border-bottom:none}
.muted-row .avatar{flex:none}
.muted-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.muted-rm{flex:none;color:#c0392b}
.muted-empty{color:var(--muted);font-size:13.5px;padding:8px 2px}
.dc-person{cursor:pointer}
.byline .dc-person:hover,.comment .who .dc-person:hover,.who.dc-person:hover{text-decoration:underline}
.dc-person>.avatar{transition:box-shadow .12s}
.dc-person:hover>.avatar{box-shadow:0 0 0 3px rgba(22,163,74,.3)}
/* @mention autocomplete dropdown */
.mention-pop{position:absolute;z-index:95;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 28px rgba(40,30,10,.2);padding:4px;width:max-content;min-width:200px;max-width:90vw}
.mention-row{display:flex;align-items:flex-start;gap:9px;padding:6px 9px;border-radius:7px;cursor:pointer;font-size:14px}
.mention-row.sel{background:#f1ece2}
.mention-row .mn-wrap{min-width:0;flex:1}
.mention-row .mn-line{white-space:nowrap}
.mention-row .mn{font-weight:600}
.mention-row .mn-about{font-size:12px;color:var(--muted);margin-left:8px}
.mention-row .mn-meta{font-size:11px;color:var(--muted);white-space:nowrap;margin-top:1px}
/* "Quote and reply" floating button */
.quote-btn{position:absolute;z-index:96;background:#1c1c1c;color:#fff;border:none;border-radius:8px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.quote-btn:hover{background:var(--accent)}
/* touch-only per-block quote affordance (see addQuoteChip in dcamp.js) — an
explicit tap target where dragging out a text selection is awkward */
.quote-chip{display:inline-flex;align-items:center;gap:6px;margin:10px 0 2px;background:#1c1c1c;color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.quote-chip:hover,.quote-chip:active{background:var(--accent)}
/* @mention link (in bodies + the editor) */
/* @mentions get a thin rounded outline so they read as a tappable badge */
.content a[href^="#/p/"],.dc-trix a[href^="#/p/"],.bubble a[href^="#/p/"],.chat-line a[href^="#/p/"]{
color:var(--accent-ink);font-weight:600;text-decoration:none;white-space:nowrap;
border:1px solid #bfe0c8;border-radius:6px;padding:0 5px;background:#eef7f0;line-height:1.4}
.content a[href^="#/p/"]:hover,.dc-trix a[href^="#/p/"]:hover,.bubble a[href^="#/p/"]:hover,.chat-line a[href^="#/p/"]:hover{
background:#e0efe4;border-color:#9fd0ad;text-decoration:none}
/* quoted text — vertical line on the left */
.content blockquote,.bubble blockquote,.dc-trix blockquote{margin:8px 0;padding:4px 0 4px 14px;border-left:3px solid var(--line-strong);color:var(--ink-soft)}
/* tables in message/comment/chat bodies — styled like Basecamp: thin framed grid, tinted header row.
border-collapse:separate (not collapse) so the outer border + rounded corners render reliably;
cells carry only right+bottom gridlines and the last column/row drop theirs so nothing doubles the frame. */
:is(.content,.comment .content,.chat-line .content,.bubble,.dc-trix) table{
border-collapse:separate;border-spacing:0;margin:12px 0;max-width:100%;font-size:.95em;line-height:1.45;
border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
:is(.content,.comment .content,.chat-line .content,.bubble,.dc-trix) th,
:is(.content,.comment .content,.chat-line .content,.bubble,.dc-trix) td{
border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 12px;text-align:left;vertical-align:top}
:is(.content,.comment .content,.chat-line .content,.bubble,.dc-trix) tr>:last-child{border-right:none}
:is(.content,.comment .content,.chat-line .content,.bubble,.dc-trix) tr:last-child>*{border-bottom:none}
:is(.content,.comment .content,.chat-line .content,.bubble,.dc-trix) th{
background:#f7f2e9;font-weight:600;color:var(--ink)}
:is(.content,.comment .content,.chat-line .content,.bubble,.dc-trix) tbody tr:nth-child(even) td{background:#fbf8f2}
/* a table block in the composer is an opaque, atomic attachment — hint that it
is double-click-editable via the modal grid editor (openTableEditor) */
.dc-trix figure:has(table){cursor:pointer;position:relative}
.dc-trix figure:has(table)::after{content:"Double-click to edit";position:absolute;top:5px;right:5px;
background:rgba(28,28,28,.82);color:#fff;font-size:11px;line-height:1;padding:4px 7px;border-radius:5px;
opacity:0;transition:opacity .12s;pointer-events:none}
.dc-trix figure:has(table):hover::after{opacity:1}
/* the modal grid table editor */
.tbl-editor h2{margin:0 0 12px}
.tbl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.tbl-bar .tbl-hdr{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:14px;color:var(--ink-soft);cursor:pointer}
.tbl-scroll{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:8px}
table.tbl-grid{border-collapse:separate;border-spacing:0;width:100%;font-size:.95em}
table.tbl-grid th,table.tbl-grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
padding:7px 10px;text-align:left;vertical-align:top;min-width:70px;outline:none}
table.tbl-grid tr>:last-child{border-right:none}
table.tbl-grid tr:last-child>*{border-bottom:none}
table.tbl-grid th{background:#f7f2e9;font-weight:600}
table.tbl-grid td:focus,table.tbl-grid th:focus{box-shadow:inset 0 0 0 2px var(--accent,#0ea5e9)}
.tbl-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:14px}
/* recent-activity modal */
.activity .act-list{max-height:60vh;overflow-y:auto;margin-top:8px}
.act-row{display:flex;align-items:baseline;gap:10px;padding:9px 6px;border-top:1px solid var(--line);text-decoration:none;color:var(--ink)}
.act-row:first-child{border-top:none}
.act-row:hover{background:#fffdf8;text-decoration:none}
.act-kind{flex:none;font-size:13px;color:var(--muted);width:104px}
.act-label{flex:1;font-weight:600;min-width:0}
.act-snip{font-weight:400;color:var(--muted)}
.act-when{flex:none;color:var(--muted);font-size:12px}
/* adminland */
.del-tools{display:flex;gap:6px;align-items:center;flex:none}
.comment-edit{margin-top:6px}
/* attachment lightbox (full-size viewer with prev/next) */
#lightbox{position:fixed;inset:0;z-index:100;background:rgba(15,12,8,.93);display:flex;align-items:center;justify-content:center}
#lightbox.hidden{display:none}
.lb-stage{max-width:94vw;max-height:88vh;display:flex;align-items:center;justify-content:center}
.lb-media{max-width:94vw;max-height:88vh;border-radius:8px;box-shadow:0 12px 50px rgba(0,0,0,.55)}
.lb-frame{width:90vw;height:88vh;border:none;border-radius:8px;background:#fff}
.lb-text{max-width:820px;max-height:88vh;overflow:auto;background:#fff;color:#1c1c1c;padding:24px 28px;border-radius:8px;white-space:pre-wrap;font:14px/1.65 ui-monospace,Menlo,Consolas,monospace}
.lb-other{color:#fff;text-align:center;font-size:15px}
.lb-bar{position:fixed;top:0;left:0;right:0;height:50px;display:flex;align-items:center;gap:12px;padding:0 16px;color:#fff;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:2}
.lb-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-count{font-size:13px;opacity:.8;white-space:nowrap}
.lb-dl,.lb-close{color:#fff;font-size:20px;background:none;border:none;cursor:pointer;text-decoration:none;width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.lb-dl:hover,.lb-close:hover{background:rgba(255,255,255,.16)}
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%);color:#fff;font-size:46px;line-height:1;background:rgba(0,0,0,.32);border:none;cursor:pointer;width:58px;height:92px;border-radius:10px;z-index:2}
.lb-prev{left:14px}.lb-next{right:14px}
.lb-prev:hover,.lb-next:hover{background:rgba(0,0,0,.6)}
/* show attachments are clickable */
.content figure.dc-att img,.content figure.attachment img,.bubble figure.dc-att img{cursor:zoom-in}
.content a.dc-file,.bubble a.dc-file{cursor:pointer}
/* site-wide status banner (bottom of every page) */
#status-banner{max-width:70vw;margin:8px auto 28px;padding:12px 18px;text-align:center;
font-size:13px;font-weight:800;letter-spacing:.05em;color:#8a5a00;background:#fff7e6;
border:1px solid #f0d79a;border-radius:10px}
/* ---- people badges (machine owned + Decent staff) ---- */
.machine-ico{height:17px;width:auto;border-radius:3px;vertical-align:middle;display:inline-block}
.owner-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--accent-ink);
background:#fff;border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px;line-height:1.5;vertical-align:middle}
.decent-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#fff;
background:#1c1c1c;border-radius:999px;padding:1px 8px;line-height:1.6;vertical-align:middle}
/* "me" pill next to the logged-in member's own name on their posts/comments */
.me-badge{display:inline-flex;align-items:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#fff;
background:var(--link);border-radius:999px;padding:1px 8px;line-height:1.6;vertical-align:middle;text-transform:lowercase}
/* identity line in the person card (dcamp id, and user id on your own card) */
.pc-ids{color:var(--muted);font-size:12px;margin-top:6px;font-variant-numeric:tabular-nums}
#members-link{font-weight:600}
.members-bar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.members-bar .count{font-size:14px;color:var(--muted)}
.members-bar input{flex:1;min-width:200px;max-width:360px}
.member-list{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.member-row{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--line)}
.member-row:last-child{border-bottom:none}
.member-row .who{flex:1;min-width:0}
.member-row .who .nm{font-weight:600;font-size:15px}
.member-row .who .em{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member-row .who a.em{display:block;text-decoration:none;cursor:pointer}
.member-row .who a.em:hover{text-decoration:underline;color:var(--accent)}
.member-row .mc{color:var(--muted);font-size:13px;white-space:nowrap}
.synced{color:var(--muted);font-size:12.5px}
/* nav unread pip */
.pip{display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;font-size:11px;font-weight:700;
color:#fff;background:#e0567a;border-radius:9px;padding:0 5px;margin-left:3px;vertical-align:middle}
/* ---- chat room ---- */
#app:has(> .chat-page){padding-bottom:0} /* the chat fills the viewport; no #app bottom padding */
.chat-page{display:flex;flex-direction:column;height:calc(100vh - 86px)} /* JS sets the exact height; this is a fallback */
.chat-page .page-head{margin-bottom:8px} /* tuck the chat up under the title */
.chat-page > .summary-out{flex:0 1 auto;min-height:0;max-height:40vh;overflow:auto} /* a long summary scrolls, never pushes the composer off */
.chat-wrap{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.chat-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 20px}
.chat-line{display:flex;gap:11px;padding:7px 14px;position:relative;border-top:1px solid var(--line)}
.chat-scroll > .chat-line:first-child{border-top:none} /* no divider above the very first */
.chat-line .action-menu{top:4px;right:6px}
.chat-line .am-btn{opacity:0;transition:opacity .12s} /* reveal ⋯ on hover (dense list) */
.chat-line:hover .am-btn{opacity:1}
.chat-line .body{flex:1;min-width:0}
.chat-line .who{font-weight:700;font-size:14px}
.chat-line .when{color:var(--muted);font-size:12px;margin-left:7px;font-weight:400}
.chat-line .content{line-height:1.5;font-size:15px;min-width:0;overflow-wrap:break-word;word-break:break-word}
.chat-line .content p{margin:0 0 4px}
.chat-line.cont{padding-top:1px;border-top:none} /* continuation of same author: tight, no divider */
.chat-line.cont .who{display:none}
/* chat composer always uses the "narrow" stacked layout: full-width editor with
SEND below it, at every screen width (not just under 900px). */
.chat-compose{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px 24px;border-top:1px solid var(--line);background:#faf6ee}
.chat-compose .trix-wrap{flex:1;min-width:0}
.chat-compose .dc-trix{min-height:48px;max-height:150px;overflow-y:auto;background:#fff}
.chat-compose .chat-send{flex:none;align-self:flex-end}
/* YouTube embeds (landscape + portrait/Shorts) */
.yt-embed{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;margin:10px 0;border-radius:10px;overflow:hidden;background:#000}
.yt-embed.portrait{max-width:300px;aspect-ratio:9/16}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ---- pings ---- */
.pings-layout{display:flex;gap:18px;align-items:flex-start}
.ping-list{width:var(--dm-listw,300px);flex:none;max-height:calc(100vh - 150px);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow-y:auto}
/* drag handle between the conversation list and the active thread; the -12px
margins claw back the two extra flex gaps this third child would add, so the
6px grab-target sits centred in the layout's original 18px gutter */
.ping-resizer{flex:none;align-self:stretch;width:6px;margin:0 -12px;cursor:col-resize;border-radius:3px;background:transparent;transition:background .15s;touch-action:none}
.ping-resizer:hover,.ping-resizer.drag{background:var(--line)}
.ping-list .newbtn{margin:12px;width:calc(100% - 24px)}
.conv{display:flex;gap:11px;padding:12px 14px;border-top:1px solid var(--line);cursor:pointer}
.conv:hover{background:#fffdf8}
.conv.active{background:#f1f7f3}
.conv .body{flex:1;min-width:0}
.conv .nm{font-weight:700;font-size:14.5px;display:flex;align-items:center;gap:5px}
.conv .last{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ping-main{flex:1;min-width:0;display:flex;flex-direction:column}
.conv-dropdown{display:none;margin-bottom:12px;font-weight:600} /* only shown on narrow screens */
.ping-thread{flex:1;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
/* content-height: only as tall as the conversation needs, capped + scrollable */
.ping-compose{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px 20px;border-top:1px solid var(--line);background:#faf6ee}
.ping-compose .trix-wrap{flex:1;min-width:0}
.ping-compose .dc-trix{min-height:48px;max-height:150px;overflow-y:auto;background:#fff}
.ping-compose .chat-send{flex:none;align-self:flex-end}
.ping-thread .th-head{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;display:flex;align-items:center;gap:10px}
.ping-scroll{flex:none;max-height:55vh;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px}
.bubble p{margin:0 0 6px}.bubble p:last-child{margin:0}
/* DM speech bubbles: an avatar beside each message, bubble tail pointing to it */
.dm-row{display:flex;align-items:flex-end;gap:9px;max-width:85%}
.dm-row.them{align-self:flex-start}
.dm-row.me{align-self:flex-end;flex-direction:row-reverse}
.dm-row > .dc-person{flex:none;display:flex;align-items:flex-end;line-height:0}
.dm-bub{position:relative;padding:9px 13px;border-radius:14px;font-size:15px;line-height:1.45;min-width:0}
.dm-bub .t{font-size:11px;opacity:.6;margin-top:3px}
.dm-name{font-size:12px;font-weight:700;color:var(--accent-ink);margin-bottom:2px}
.dm-row.them .dm-bub{background:var(--dm-bg,#f4f4f6);color:#111;border-bottom-left-radius:4px}
.dm-row.me .dm-bub{background:var(--link);color:#fff;border-bottom-right-radius:4px}
.dm-row.me .dm-bub .t{color:#fff}
.dm-row.them .dm-bub::before{content:"";position:absolute;left:-6px;bottom:7px;width:0;height:0;border:6px solid transparent;border-right-color:var(--dm-bg,#f4f4f6);border-left:0}
.dm-row.me .dm-bub::before{content:"";position:absolute;right:-6px;bottom:7px;width:0;height:0;border:6px solid transparent;border-left-color:var(--link);border-right:0}
/* overlapping avatar stack (conversation list + thread header) */
.dm-avs{display:inline-flex;flex:none}
.dm-avs .avatar{margin-left:-9px;box-shadow:0 0 0 2px var(--panel)}
.dm-avs .avatar:first-child{margin-left:0}
/* thread header: people on the left, +Invite pushed to the right */
.th-head .th-people{display:flex;align-items:center;gap:9px;flex:1;min-width:0}
.th-head .th-names{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-invite{flex:none}
/* people picker (new conversation / invite) */
.picker-results{max-height:220px;overflow-y:auto;margin-top:4px}
.picker-bar{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.picker-chosen{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:140px}
.pick-chip{display:inline-flex;align-items:center;gap:6px;background:#f3eee4;border:1px solid var(--line);border-radius:999px;padding:3px 8px 3px 3px;font-size:13px}
.pick-chip .pn{font-weight:600}
.pick-rm{border:none;background:transparent;cursor:pointer;font-size:13px;line-height:1;padding:0;opacity:.65}
.pick-rm:hover{opacity:1}
.ping-empty{color:var(--muted);text-align:center;padding:48px 30px}
.recipient-row{display:flex;gap:10px;align-items:center;padding:9px 8px;border-radius:9px;cursor:pointer}
.recipient-row:hover{background:#f3eee4}
.recipient-row .em{color:var(--muted);font-size:12.5px}
/* search */
.search-bar{display:flex;gap:10px;margin:8px 0 10px}
.search-input{flex:1}
.search-types{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px}
.facet-types .search-types{flex-direction:column;gap:0;margin-bottom:0}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;user-select:none}
.chk input{cursor:pointer}
.search-layout{display:flex;gap:20px;align-items:flex-start}
.search-facet{width:220px;flex:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;max-height:72vh;overflow-y:auto}
.search-facet:empty{display:none}
.facet-h{font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.search-facet .chk{display:flex;padding:4px 0;font-size:13.5px}
.search-results{flex:1;min-width:0}
.search-count{color:var(--muted);font-size:13px;margin-bottom:10px}
.search-hit{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--panel);text-decoration:none;color:inherit}
.search-hit:hover{border-color:var(--line-strong);background:#faf6ee}
.hit-type{flex:none;width:84px;box-sizing:border-box;text-align:center;align-self:flex-start;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;height:fit-content;background:#e9e2d2;color:var(--ink-soft)}
.hit-type.t-message{background:#dbeafe;color:#1e40af}
.hit-type.t-comment{background:#dcfce7;color:#166534}
.hit-type.t-chat{background:#fef3c7;color:#92400e}
.hit-type.t-ping{background:#f3e8ff;color:#6b21a8}
.hit-title{font-weight:700;font-size:15px}
.hit-snip{color:var(--ink-soft);font-size:14px;margin:3px 0;line-height:1.4}
.hit-meta{color:var(--muted);font-size:12px}
/* account dropdown (top-right name) */
.me-menu{position:relative}
.me-chip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:20px;padding:3px 9px 3px 4px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink)}
.me-chip:hover{background:#f1ece2}
.me-chip .caret{font-size:10px;color:var(--muted)}
.me-dropdown{position:absolute;top:40px;right:0;min-width:210px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 28px rgba(40,30,10,.2);padding:6px;z-index:60}
.me-item{display:block;width:100%;text-align:left;border:none;background:transparent;padding:9px 11px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--ink)}
.me-item:hover{background:#f1ece2}
/* home "Other" section */
.section-h{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:24px 2px 12px;font-weight:700}
/* ---- help / feature guide ---- */
.help{max-width:960px}
.help-lead{color:var(--ink-soft);font-size:17px;margin:-6px 0 20px}
.help-body{display:flex;gap:36px;align-items:flex-start}
.help-toc{position:sticky;top:78px;flex:none;width:172px;display:flex;flex-direction:column;gap:1px}
.help-toc button{text-align:left;background:none;border:0;border-left:2px solid transparent;color:var(--ink-soft);padding:5px 12px;font-size:13.5px;line-height:1.3;cursor:pointer;border-radius:0 6px 6px 0}
.help-toc button:hover{background:var(--panel);color:var(--ink);border-left-color:var(--accent,var(--line-strong))}
.help-content{flex:1;min-width:0}
.help-content .help-sec:first-child{border-top:0;padding-top:0}
@media(max-width:760px){.help-body{flex-direction:column;gap:0}.help-toc{position:static;width:auto;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:6px}.help-toc button{border-left:0;border:1px solid var(--line);border-radius:999px;padding:4px 11px}}
.help-sec{padding:22px 0;border-top:1px solid var(--line);scroll-margin-top:78px}
.help-sec h2{margin:0 0 10px;font-size:20px;letter-spacing:-.01em}
.help-sec p{margin:0 0 10px;color:var(--ink-soft)}
.help-sec ul{margin:0 0 10px;padding-left:22px;color:var(--ink-soft)}
.help-sec li{margin:6px 0}
.help-sec b,.help-sec strong{color:var(--ink);font-weight:650}
.help-note{font-size:14px;color:var(--muted);border-left:3px solid var(--line-strong);padding-left:12px}
.help kbd{font:12px/1 ui-monospace,Menlo,Monaco,monospace;background:#f3efe6;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;padding:2px 6px;color:var(--ink);white-space:nowrap}
.help-sub{font-weight:650;color:var(--ink);margin:14px 0 6px}
.help-forums{list-style:none;padding:0;margin:0 0 12px}
.help-forums li{margin:7px 0;color:var(--ink-soft)}
.help-forums a:hover,.help-open a:hover{text-decoration:underline}
.help-open{margin:12px 0 2px}
.help-open a{font-weight:600;font-size:14px}
.help-shot{display:block;max-width:720px;width:100%;margin:14px 0 4px;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.help-shot-cap{font-size:12px;color:var(--muted);margin:0 0 12px}
/* opt-in (regional / roaster) forum sections */
.section-h.join-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-find{text-transform:none;letter-spacing:normal;font-size:12.5px;font-weight:600;color:var(--accent-ink,#1d6fd6);text-decoration:none;white-space:nowrap}
.section-find:hover{text-decoration:underline}
.proj-card.find-card{border-style:dashed}
.proj-card.find-card .swatch{color:#fff;font-size:20px;line-height:1}
.proj-card.discover-card{display:flex;flex-direction:column;align-items:flex-start}
.proj-card.discover-card .join-btn{margin-top:14px}
.find-empty{color:var(--muted);font-size:14px;padding:8px 2px}
.proj-card.opt-card{cursor:pointer}
/* forum-vs-chatroom chooser (popover) */
.chooser{min-width:210px;padding:6px}
.chooser-title{font-weight:700;font-size:15px;padding:4px 8px 0}
.chooser-sub{color:var(--muted);font-size:12.5px;padding:2px 8px 8px}
.chooser-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;
padding:10px 8px;border-radius:8px;font-size:14.5px;cursor:pointer;color:inherit}
.chooser-opt:hover{background:#f1ece2}
/* discovery: location note + suggestion pills */
.find-loc{font-size:13px;color:var(--muted);margin:2px 2px 14px}
.find-loc-edit{color:var(--accent-ink,#1d6fd6);text-decoration:none}
.find-loc-edit:hover{text-decoration:underline}
.proj-card.discover-card.suggested{border-color:var(--accent,#1d6fd6)}
.sugg-pill{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;vertical-align:middle;
background:#e6f1fb;color:#0c447c;border-radius:999px;padding:2px 9px;text-transform:none;letter-spacing:0}
/* settings: location field */
.set-loc-hint{font-size:12px;color:var(--muted);margin:-2px 0 6px}
.set-loc-row{display:flex;gap:8px;align-items:flex-start}
.set-loc-row .input{margin:0}
.set-loc-row .set-loc-country{flex:1 1 0;min-width:0}
.set-loc-row .set-loc-city{flex:1 1 0;min-width:0}
.set-loc-show{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;color:var(--ink-soft);cursor:pointer}
.set-loc-show input{margin:0;width:auto}
/* searchable country combobox */
.country-pick{position:relative}
.country-pick .country-input{width:100%;margin:0}
.country-menu{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;max-height:280px;overflow:auto;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);padding:4px}
.country-it{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--ink)}
.country-it:hover{background:#f3efe6}
.country-it .cc{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
/* request-a-forum panel + admin pending queue */
.find-request{margin-top:8px}
.req-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;max-width:560px}
.req-form .input{margin:0;flex:1;min-width:120px}
.req-form select.input{flex:0 0 auto;min-width:120px}
.pending-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.pending-row .pend-main{flex:1;min-width:0}
.pending-row .pend-name{font-weight:600}
.pending-row .pend-sub{font-size:12.5px;color:var(--muted)}
.pend-src{font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;background:#f1ece2;color:#5b5446}
/* visualizer admin status grid */
.viz-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.viz-stat{background:#f6f1e7;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.viz-stat .vl{font-size:12px;color:var(--muted)}
.viz-stat .vv{font-size:16px;font-weight:600;margin-top:2px}
/* Adminland catalog editors (regions / roasters / beans) */
.cat-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:14px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px}
.cat-fld{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-soft);font-weight:600}
.cat-fld > span{padding-left:2px}
.cat-fld .input,.cat-fld .select{font-weight:400;margin:0;width:100%}
.cat-card textarea.input{width:100%}
.cat-check{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:600;cursor:pointer}
.cat-check input{width:16px;height:16px}
.cat-actions{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.cat-meta{color:var(--muted);font-size:12.5px;margin-right:auto}
.beans-wrap{margin-top:14px;border-top:1px dashed var(--line-strong);padding-top:12px}
.beans-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bean-card{background:#faf7f0;border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.cat-bar{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.cat-bar .cat-search{flex:1;min-width:200px;max-width:420px;margin:0}
.cat-mode{display:inline-flex;gap:4px}
.cat-mode .mode-btn .mode-n{opacity:.55;font-weight:400;margin-left:2px}
/* message-list one-line previews */
.msg-row .body{min-width:0}
.row-preview,.row-comment{font-size:13.5px;line-height:1.4;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.row-preview{color:var(--ink-soft)}
.row-comment{color:var(--muted)}
.row-comment b{color:var(--ink-soft);font-weight:700}
/* read-only notice (non-owners) */
.readonly-note{background:#fdf3e3;border:1px solid #ecd9b0;color:#8a6d3b;border-radius:10px;padding:14px 16px;font-size:14px;font-weight:600;margin-top:14px}
/* beta: "link Basecamp to post" notice under a composer's submit button */
.bc-warn{background:#fdf3e3;border:1px solid #ecd9b0;color:#8a6d3b;border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;margin-top:10px}
.bc-warn-link{color:var(--accent-ink);font-weight:700;text-decoration:underline;cursor:pointer}
/* discreet reminder (shown once linked): posts are mirrored to Basecamp */
.bc-note{color:var(--muted);font-size:12px;margin-top:8px}
/* "clearer subject?" offer modal (DeepSeek subject-vs-body rewrite) */
.subj-offer h3{margin:0 0 6px}
.subj-offer .muted{margin:0 0 14px}
.subj-compare{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.subj-row{display:flex;gap:10px;align-items:baseline}
.subj-tag{flex:0 0 84px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.subj-old{color:var(--muted);text-decoration:line-through}
.subj-new{font-weight:700;color:var(--ink)}
.set-ava-row{margin-top:6px}
/* search: info button, sort, forum facet, highlight, help popover */
.search-head h1{display:flex;align-items:center;gap:9px}
.search-info{border:none;background:none;color:var(--muted);cursor:pointer;font-size:26px;line-height:1;padding:0;flex:none}
.search-info:hover{color:var(--accent-ink)}
.search-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.search-controls .search-types{margin-bottom:0}
.search-sort{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px}
.search-since,.search-quality{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.since-slider{width:120px;cursor:pointer}
.since-lbl{min-width:4.5em;font-weight:600;color:var(--ink-soft)}
.facet-block{margin-bottom:18px}
.facet-block:last-child{margin-bottom:0}
.search-help{max-width:300px}
.search-help h4{margin:0 0 6px}
.search-help p{margin:0 0 8px;font-size:13.5px;color:var(--ink-soft)}
.search-help ul{margin:0;padding-left:18px;font-size:13.5px}
.search-help li{margin:4px 0}
.search-help code{background:#f2f2f4;border:1px solid #e3e3e7;border-radius:4px;padding:1px 5px;font-size:12.5px}
.search-help .muted{color:var(--muted);font-size:12.5px;margin-top:8px}
mark{background:#fde68a;color:inherit;padding:0 1px;border-radius:2px}
/* render subtle settings buttons as outlined (override .btn.subtle's transparent border) */
.btn.subtle.set-ava-btn{display:inline-block;margin-top:10px;cursor:pointer;border:1px solid var(--line-strong);border-radius:8px}
.btn.subtle.bc-unlink-btn{border:1px solid var(--line-strong);border-radius:8px}
.btn.subtle.set-sum-btn{border:1px solid var(--line-strong);border-radius:8px}
/* "Summarize past N days" controls + DeepSeek summary output */
.summarize-bar{display:flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--ink-soft);font-size:14px;flex-wrap:wrap}
.msg-detail .head{flex-wrap:wrap}
.msg-detail > .summarize-bar{margin-top:16px}
.sum-lbl{white-space:nowrap}
.days-sel{border:1px solid var(--line-strong);border-radius:8px;padding:5px 8px;font-size:14px;background:var(--panel);cursor:pointer}
.summary-out{margin-bottom:18px}
.summary-out:empty{margin:0}
.summary-box{background:#f6f8fb;border:1px solid #d9e2f0;border-radius:12px;padding:16px 18px;font-size:15px;line-height:1.55}
.summary-box.loading{color:var(--muted);font-style:italic}
.summary-box.err{background:#fdece9;border-color:#e8b4ab;color:#a23}
.summary-box.mine{background:#eef7fc;border-color:#bfe2f3;border-left:3px solid #0ea5e9;margin-bottom:14px}
.summary-h{font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#3b6ea5;margin-bottom:8px}
/* home page "what's new since your last visit" panel */
.home-summary{margin:0 0 20px}
.home-summary .summarize-bar{margin-bottom:0}
.home-summary .summary-out{margin-top:14px}
.hs-all{margin-left:auto;white-space:nowrap;font-size:13px;color:var(--muted);text-decoration:none}
.hs-all:hover{color:var(--ink-soft);text-decoration:underline}
.summary-box p{margin:0 0 8px}.summary-box p:last-child{margin:0}
.summary-box ul{margin:6px 0;padding-left:22px}
.summary-box li{margin:3px 0;cursor:pointer}
.summary-box .sum-h{font-weight:700;margin:10px 0 4px}
.summary-box a{color:var(--link);font-weight:600}
/* a "reply" bullet cites an older thread that only got new comments: the title
links to the thread, then a "↳ reply" link jumps straight to the comment */
.summary-box a.sum-reply{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#0369a1;background:#e0f2fe;border:1px solid #bae6fd;border-radius:8px;padding:0 6px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.summary-box a.sum-reply:hover{background:#bae6fd}
/* a thread's new replies, grouped as sub-bullets under its header bullet */
.summary-box ul.sum-sub{margin:3px 0 6px 0;padding-left:20px;list-style:none}
.summary-box ul.sum-sub>li{margin:3px 0}
.summary-box ul.sum-sub a.sum-reply{margin-left:0;margin-right:4px}
/* people's names mentioned in a summary, given a slight (not full) bold */
.summary-box .sum-name{font-weight:500}
/* collapsible summary categories (fold state remembered in a cookie) */
.summary-box .sum-h.sum-h-toggle{cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.summary-box .sum-caret{font-size:.8em;color:var(--muted);transition:transform .15s ease}
.summary-box .sum-section.collapsed .sum-caret{transform:rotate(-90deg)}
.summary-box .sum-section.collapsed .sum-section-body{display:none}
.sum-cached{font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0;font-size:11px;background:#eef1f6;border:1px solid #d9e2f0;border-radius:10px;padding:1px 7px;margin-left:6px}
/* Summaries page */
.sum-panel{max-width:680px}
.sum-field{margin-bottom:18px}
.sum-field > label{display:block;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.sum-btns{display:flex;gap:8px}
.sum-sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.sum-src{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}
.sum-src input{width:16px;height:16px;cursor:pointer}
.sum-actions{margin:4px 0 16px}
.sum-email{display:flex;align-items:center;gap:9px;cursor:pointer;font-weight:600;font-size:14px}
.sum-email input{width:16px;height:16px;cursor:pointer}
.sum-email-hint{color:var(--muted);font-size:12px;margin:6px 0 0 25px}
.sum-sample{margin:12px 0 0 25px}
/* "Since your last visit" unread marker in a thread */
.since-divider{display:flex;align-items:center;gap:12px;margin:20px 0 8px;color:#c0392b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;scroll-margin-top:74px}
.since-divider::before,.since-divider::after{content:"";flex:1;height:1px;background:#e8b4ab}
.since-divider span{flex:none;white-space:nowrap}
/* forum head: title + New button aligned to top; summarize line under the title */
.page-head{align-items:flex-start}
.page-head .summarize-bar{margin:10px 0 0}
/* message-list first-column media thumbnail (image / youtube / video / pdf) */
.row-thumb{width:46px;height:46px;flex:none;border-radius:8px;overflow:hidden;position:relative;background:#f1ece2;border:1px solid var(--line)}
.row-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row-thumb.t-video::after,.row-thumb.t-youtube::after{content:"\f04b";font-family:"Font Awesome 7 Pro";font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;text-shadow:0 1px 3px rgba(0,0,0,.75)}
.row-thumb.t-pdf::after{content:"PDF";position:absolute;right:0;bottom:0;font-size:9px;font-weight:800;color:#fff;background:#c0392b;padding:1px 3px;border-radius:3px 0 0 0}
.row-thumb.broken img{display:none}
.row-thumb.broken{display:flex;align-items:center;justify-content:center}
.row-thumb.broken::before{content:"\f0c6";font-family:"Font Awesome 7 Pro";font-weight:900;font-size:18px}
/* deep-linked comment (?c=) — scroll target + brief highlight */
.comment{scroll-margin-top:74px}
.comment.flash{animation:cflash 2.2s ease-out}
.dm-row.flash{animation:cflash 2.2s ease-out;border-radius:8px}
@keyframes cflash{0%,28%{background:#fff6d4}100%{background:transparent}}
/* inline video player for attached movies (replaces the dc-file download link) */
.dc-video{margin:10px 0;max-width:480px}
.dc-video video{width:100%;max-height:65vh;border-radius:10px;background:#000;display:block}
/* reactions + the +emoji add button, in a cluster top-right (left of the ⋯ menu) */
.react-cluster{display:flex;align-items:center;gap:6px}
.react-cluster .boosts{margin:0;flex-wrap:nowrap}
.react-add{border:1px solid transparent;background:transparent;color:var(--muted);font-size:15px;height:28px;padding:0 8px;border-radius:7px;cursor:pointer;line-height:1;font-weight:700;flex:none}
.react-add:hover{background:#f1ece2;color:var(--ink)}
.msg-detail > .react-cluster{position:absolute;top:12px;right:50px}
.comment .react-cluster{position:absolute;top:5px;right:34px}
.msg-detail .head{padding-right:96px} /* room for the reactions + +emoji + ⋯ cluster */
/* ---- language picker (top bar, right of Search) ---- */
.lang-menu{position:relative}
.lang-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--ink-soft);font-size:13px;cursor:pointer;padding:5px 9px;border-radius:8px}
.lang-chip:hover{background:#f1ece2;color:var(--ink)}
.lang-chip .caret{opacity:.5;font-size:11px}
.lang-dropdown{position:absolute;top:36px;right:0;min-width:180px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 8px 28px rgba(40,30,10,.18);padding:4px;z-index:60}
.lang-item{display:block;width:100%;text-align:left;border:none;background:transparent;padding:7px 11px;border-radius:7px;font-size:14px;cursor:pointer;color:var(--ink)}
.lang-item:hover{background:#f1ece2}
.lang-item.current{font-weight:700;color:var(--accent-ink)}
.lang-item.lang-toggle{border-top:1px solid var(--line);margin-top:4px;color:var(--muted);font-size:13px}
/* per-block translation toggle — a small beige button (AI translations) */
.tr-toggle{display:inline-block;margin:8px 0 0;border:1px solid var(--line-strong);background:#f3eee4;color:var(--ink-soft);
font-size:12px;font-weight:600;cursor:pointer;padding:2px 9px;border-radius:7px;line-height:1.4}
.tr-toggle:hover{background:#ece3d3;color:var(--ink);border-color:#cfc6b4;text-decoration:none}
/* RTL (Arabic): the whole UI mirrors via */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .lang-dropdown,html[dir="rtl"] .me-dropdown{right:auto;left:0}
/* ---- Adminland > Translations (backfill progress) ---- */
.tr-run-note{margin-left:12px;color:var(--muted);font-size:13px}
.tr-lang-row{display:flex;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.tr-lang-name{width:170px;font-weight:600;font-size:14px}
.tr-bar{flex:1;height:10px;background:#eee6d8;border-radius:6px;overflow:hidden}
.tr-bar-fill{height:100%;background:var(--accent);transition:width .3s}
.tr-lang-count{width:140px;text-align:right;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
/* English fallback results in a non-English search */
.hit-untranslated{font-size:11px;font-weight:600;color:#b06a00;background:#fff3df;border:1px solid #f0d79a;border-radius:5px;padding:1px 6px;margin-left:6px;white-space:nowrap}
.dm-body{display:block}
/* Derek (AI bot) mid-stream: blinking caret after the growing text */
.dm-bub.streaming .dm-body::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-2px;background:currentColor;opacity:.65;border-radius:1px;animation:dmCaret 1s steps(1) infinite}
@keyframes dmCaret{50%{opacity:0}}
/* My Settings: Basecamp link row */
.set-bc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bc-link-btn{border:1px solid var(--line-strong);border-radius:10px;padding:9px 16px;background:#fff;font-weight:600;cursor:pointer}
.bc-link-btn:hover{background:#f3eee4;border-color:var(--accent)}
.bc-linked{color:#16723a;font-weight:700;font-size:14px}
.set-sum-on{color:#16723a;font-weight:700;font-size:14px;margin-bottom:2px}
.bc-hint{flex-basis:100%;color:var(--muted);font-size:12.5px;margin-top:4px}
/* "New conversation" picker: Derek tip, bottom-left of the action bar */
.picker-tip{font-size:12.5px;color:var(--muted);align-self:center;margin-right:auto;max-width:60%}
/* Derek mid-stream in the chat room / forum comment: same blinking caret as DMs */
.chat-line.streaming .content::after,
.comment.streaming .content::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-2px;background:currentColor;opacity:.55;border-radius:1px;animation:dmCaret 1s steps(1) infinite}
/* Derek "Sources" footer appended to a finished answer */
.dm-sources{margin-top:7px;padding-top:6px;border-top:1px solid rgba(0,0,0,.12);font-size:12.5px;opacity:.85}
.dm-sources-h{font-weight:700;margin-bottom:2px}
.dm-src{line-height:1.4}
/* DM thread header: each member is a chip; hover reveals a remove (trash) button */
.th-head .th-people{display:flex;align-items:center;gap:0;flex-wrap:wrap;flex:1;min-width:0}
.th-member{display:inline-flex;align-items:center;gap:5px;background:#f3eee4;border:1px solid var(--line);border-radius:999px;padding:2px 5px 2px 2px;margin:2px 6px 2px 0;font-size:13px}
.th-member .th-mname{font-weight:600}
.th-rm{border:none;background:transparent;cursor:pointer;font-size:11px;line-height:1;padding:0 1px;opacity:0;transition:opacity .1s}
.th-member:hover .th-rm{opacity:.65}
.th-rm:hover{opacity:1}
/* draggable column-width handle — resize the central column (symmetric gutters).
Shared across pages via the --maxw var + dcamp_maxw cookie. Double-click resets. */
#app.resizable{position:relative}
.gutter-handle{position:absolute;top:0;bottom:0;right:5px;width:12px;cursor:ew-resize;z-index:6;
display:flex;align-items:stretch;justify-content:center;touch-action:none}
.gutter-handle::before{content:"";width:2px;border-radius:2px;background:transparent;transition:background .12s}
.gutter-handle:hover::before{background:var(--line-strong)}
.gutter-handle.drag::before{background:var(--accent)}
/* deep-linked chat line (from a search hit) briefly highlights */
.chat-line.flash{animation:cflash 2.2s ease-out;border-radius:8px}
/* flash TWICE — used when arriving on a chat line via a (often slow) deep link */
.chat-line.flash2{animation:cflash2 1.5s ease-out;border-radius:8px}
@keyframes cflash2{0%,8%{background:#fff6d4}33%{background:transparent}50%,58%{background:#fff6d4}100%{background:transparent}}
/* ---- My settings: a rule between each setting ---- */
.set-sep{border:0;border-top:1px solid var(--line);margin:18px 0}
/* My Settings: larger, bold labels for each setting */
.set-modal .field label,.set-page .field label{font-size:16px;font-weight:800;color:var(--ink)}
/* My Settings as a page (not a modal): constrain width for readability */
.set-page{max-width:640px}
/* ---- composer text-colour + highlight popover ---- */
.dc-color-btn{font-size:15px;line-height:1}
.dc-color-pop{position:absolute;z-index:1200;background:var(--panel);border:1px solid var(--line-strong);
border-radius:10px;box-shadow:var(--shadow);padding:12px 14px;min-width:200px}
.dc-color-sec+.dc-color-sec{margin-top:12px}
.dc-color-lbl{font-size:12px;font-weight:800;color:var(--ink-soft);text-transform:uppercase;
letter-spacing:.03em;margin-bottom:7px}
.dc-color-row{display:flex;flex-wrap:wrap;gap:7px}
.dc-swatch{width:24px;height:24px;padding:0;border:1px solid var(--line-strong);border-radius:6px;
cursor:pointer;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.dc-swatch:hover{outline:2px solid var(--accent);outline-offset:1px}
.dc-swatch-custom{position:relative;background:conic-gradient(red,#ff0,lime,aqua,blue,magenta,red)}
.dc-swatch-custom input{position:absolute;inset:0;opacity:0;width:100%;height:100%;padding:0;border:0;cursor:pointer}
.dc-swatch-clear{background:var(--panel);color:var(--ink-soft);font-size:13px;font-weight:700}
/* =================== narrow screens (phones) =================== */
/* The toolbar never wraps (nowrap is set on the base rule). On narrower windows
we shrink the icons AND, in chat/DMs, drop SEND below the composer so the editor
gets full width — both relieve the toolbar so it fits on one line without scrolling. */
@media (max-width:768px){
trix-toolbar .trix-button-row{gap:0}
trix-toolbar .trix-button-group{margin:0 5px 0 0;flex:0 0 auto}
trix-toolbar .trix-button{width:1.7em;padding:1px 2px;background-size:56% 56%}
trix-toolbar .dc-attach-btn,trix-toolbar .trix-hr-btn,trix-toolbar .trix-table-btn{padding:0 5px;font-size:13px}
trix-toolbar .dc-color-btn{font-size:13px}
.gutter-handle{display:none} /* no gutter to drag on a narrow screen */
}
@media (max-width:480px){
trix-toolbar .trix-button{width:1.45em;background-size:54% 54%}
trix-toolbar .trix-button-group{margin-right:3px}
trix-toolbar .dc-attach-btn,trix-toolbar .trix-hr-btn,trix-toolbar .trix-table-btn{padding:0 3px;font-size:12px}
/* chat & DM composers are more cramped — even smaller icons */
.chat-compose trix-toolbar .trix-button,.ping-compose trix-toolbar .trix-button{width:1.3em;background-size:50% 50%}
}
@media (max-width:380px){
trix-toolbar .trix-button{width:1.3em}
.chat-compose trix-toolbar .trix-button,.ping-compose trix-toolbar .trix-button{width:1.2em}
}
/* =================== phones: never let the page grow wider than the screen ===================
On a phone the layout viewport widens to fit the WIDEST element on the page, and then
every paragraph reflows to that width and spills off the right edge (this is why dcamp
"zoomed out" / got clipped on narrow screens). The culprits were: the topbar's
right-hand controls, imported tables, long unbroken URLs, and the forum "involvement"
filter bar. These rules collapse or scroll each offender so nothing forces the page
wide. Gated to phone widths, so the desktop / tablet layout is untouched. */
@media (max-width:640px){
/* the content-column width is driven by --maxw (default 1560px), but the
reading-width resizer persists a chosen width by setting --maxw inline on
(e.g. 1938px). Inline wins over normal stylesheet rules, so a phone
would inherit that huge width and blow the whole layout past the screen.
Pin the column to the viewport here (!important beats the inline value). */
html{--maxw:100%!important}
#app-wrap{max-width:100%}
#app{max-width:100%}
/* topbar — collapse the right-hand controls to icons so the whole bar fits.
(Search / Help labels and the account name are bare text nodes, so we
shrink them away with font-size:0 and restore the icons/avatar.) */
.topbar-inner{gap:9px;padding:9px 11px}
.topbar-right{gap:12px}
.ghost-link{font-size:0}
.ghost-link i{font-size:17px}
.lang-chip .lc-name,.lang-chip .caret{display:none} /* language: globe icon only */
.me-chip{font-size:0;gap:0} /* account: avatar only */
.me-chip .avatar{font-size:11px}
.me-chip .caret{display:none}
.brand-mark{display:none} /* just the "dcamp" wordmark, no icon */
/* post / comment / chat bodies — break long URLs instead of stretching wide */
.msg-detail .content,.comment .content,.chat-line .content,.bubble{overflow-wrap:anywhere}
/* imported tables scroll inside themselves rather than widening the whole page */
.msg-detail .content table,.comment .content table,
.chat-line .content table,.bubble table{display:block;width:100%;max-width:100%;
overflow-x:auto;-webkit-overflow-scrolling:touch}
/* forum page-head — drop the actions onto their own full-width row and let the
segmented "involvement" filter (Popular / posted / commented / mentioned) scroll
horizontally instead of overflowing the screen */
.page-head{flex-wrap:wrap}
.head-actions{width:100%;align-items:stretch}
.head-actions .filter-row{flex-wrap:nowrap;max-width:100%;justify-content:flex-start;
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.seg-filter{flex:none;max-width:none}
/* emoji / reaction picker popover: it's a fixed 480px, wider than a phone —
cap it to the screen and use fewer, roomier columns */
.emoji-picker{max-width:calc(100vw - 16px)}
.emoji-grid{grid-template-columns:repeat(8,1fr)}
/* composer: stack the subject + category select so the subject gets full width
instead of being squeezed next to the category dropdown */
.composer-top{flex-wrap:wrap}
.composer-top .cat-select{width:100%}
/* reclaim the wide side padding so text isn't crammed into a sliver */
.msg-detail{padding:20px 16px}
#app{padding:12px 12px 80px}
/* reactions: on a wide screen they float top-right, but with many emoji on a
narrow screen that cluster grows leftward and overlaps the title/body.
Drop it out of the absolute corner and let it flow below the post, wrapping
onto as many rows as it needs. (The ⋯ menu stays in the corner; leave room
for it only.) */
.msg-detail > .react-cluster,.comment > .react-cluster{
position:static;top:auto;right:auto;margin-top:12px;flex-wrap:wrap;justify-content:flex-start}
.react-cluster .boosts{flex-wrap:wrap}
.msg-detail .head{padding-right:40px} /* room for the ⋯ menu only now */
.comment{flex-wrap:wrap} /* let the reactions row drop below the body */
.comment > .react-cluster{flex-basis:100%;margin-left:0}
}
/* Adminland > Translations: "Correct a translation" UI-string editor */
.tr-correct{margin-top:34px;border-top:1px solid var(--line);padding-top:22px}
.tr-correct h2{margin:0 0 4px}
.tcr-ctrl{display:flex;gap:10px;margin:14px 0}
.tcr-lang{flex:0 0 auto;width:auto;font-weight:700}
.tcr-search{flex:1 1 auto;width:auto;min-width:0}
.tcr-results{display:flex;flex-direction:column}
.tcr-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.tcr-src{flex:1 1 45%;min-width:0;color:var(--ink-soft);font-size:14px}
.tcr-input{flex:1 1 45%;width:auto;min-width:0;resize:vertical;min-height:38px;font:inherit}
.tcr-save{flex:0 0 auto}
.tr-sub-h{margin:20px 0 8px;font-size:15px;color:var(--ink-soft);font-weight:700}
/* any embedded iframe (incl. stragglers) must fit its container */
.content iframe,.chat-line .content iframe,.bubble iframe,.dc-trix iframe{max-width:100%}
/* hover a reaction to see who left it (avatar + name) */
.boost{position:relative}
.boost-who{display:none;position:absolute;left:0;bottom:calc(100% - 2px);z-index:40;
background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow);
padding:7px 9px;min-width:150px;max-width:260px;text-align:left;cursor:default}
.boost:hover .boost-who{display:block}
.bw-row{display:flex;align-items:center;gap:7px;padding:2px 0;font-size:13px;font-weight:600;color:var(--ink)}
.bw-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* forum page-head: New message + the "popular" toggle stacked top-right */
.head-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.head-actions .filter-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.popular-btn{white-space:nowrap}
.popular-btn.active{background:var(--link);border-color:var(--link);color:#fff}
.popular-btn.active:hover{background:#1559b0;border-color:#1559b0;color:#fff}
.msg-list.popular-only .msg-row.few-comments{display:none}
/* narrower-than-comfortable screens: hide the 300px DM sidebar and switch
conversations via the dropdown so the current conversation gets full width.
Kicks in fairly wide since the sidebar eats a lot of horizontal room. */
@media (max-width:960px){
.pings-layout .ping-list{display:none}
.pings-layout .ping-resizer{display:none}
.pings-layout .conv-dropdown{display:block}
}
/* ---- native login card (logged-out) -------------------------------------
Shown by viewLogin()/startLogin() in dcamp.js when DCAMP_AUTHED is false,
replacing the old redirect to the legacy /support/ page. The topbar chrome
is hidden until the visitor is authenticated. */
body.login-mode #topbar{display:none}
.login-card{max-width:400px;margin:9vh auto 0;background:var(--panel);border:1px solid var(--line-strong);
border-radius:16px;padding:32px 30px 30px;box-shadow:0 8px 30px rgba(40,30,10,.07)}
.login-brand{display:flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:22px;
color:var(--ink);letter-spacing:-.01em;margin-bottom:18px}
.login-logo{height:30px;width:auto;border-radius:7px}
.login-h{font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px;text-align:center}
.login-sub{font-size:14px;color:var(--muted);margin:0 0 20px;text-align:center;line-height:1.45}
.login-email-row{font-size:13px;color:var(--ink-soft);text-align:center;margin:0 0 18px;word-break:break-all}
.login-email{font-weight:700;color:var(--ink)}
.login-form .field{margin-bottom:16px}
.login-form input{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:9px;
padding:11px 12px;font-size:16px;font-family:inherit;background:#fff;color:var(--ink)}
.login-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.login-go{width:100%;justify-content:center;font-size:15px;padding:11px 16px}
.login-go.busy{opacity:.6;pointer-events:none}
.login-error{background:#fdecea;border:1px solid #f5c6c0;color:#b3261e;border-radius:9px;
padding:9px 11px;font-size:13.5px;margin:0 0 14px;line-height:1.4}
.login-forgot{text-align:center;margin-top:14px}
.login-link{color:var(--accent-ink);font-size:13px;cursor:pointer}
.login-link:hover{text-decoration:underline}
/* Member merges */
.page-head-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.merge-panel{margin:6px 0 24px}
.merge-panel:empty{display:none}
.merge-panelhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.merge-panelhead h2{font-size:17px;margin:0;display:flex;align-items:center;gap:8px}
.merge-badge{background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px;min-width:20px;text-align:center}
.merge-card{background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.merge-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.merge-score{background:#f3eee4;border:1px solid var(--line-strong);color:var(--accent-ink);font-weight:700;font-size:13px;border-radius:999px;padding:2px 10px;white-space:nowrap}
.merge-reason{color:var(--muted);font-size:13px;line-height:1.4}
.merge-sides{display:flex;align-items:center;gap:14px}
.merge-side{flex:1;min-width:0;display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:9px;padding:11px 12px}
.merge-side .who{min-width:0}
.merge-side .nm{font-weight:600;display:flex;align-items:center;gap:6px}
.merge-side .em{color:var(--muted);font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.merge-meta{color:var(--muted);font-size:12.5px;margin-top:4px}
.merge-arrow{color:var(--muted);flex:0 0 auto}
.merge-acts{display:flex;gap:9px;margin-top:13px}
@media (max-width:640px){.merge-sides{flex-direction:column;align-items:stretch}.merge-arrow{transform:rotate(90deg);align-self:center}}