/* StaqOn Community — visual layer over the real, already-built backend.
   Teal / warm-neutral system, ported from the approved design reference.
   Responsive treatment (rail drawer, stacked sidebar, sticky-composer opt-out on
   small viewports) is NOT in the reference (1200px-desktop-only default) — added
   per the confirmed real requirement. */
.cm2-page{
  --ink:#1A1917; --accent:#0D6E6E; --accent-dark:#0B5E5E; --green-strip:#3FBF9C; --warn:#E5B23C;
  --muted1:#56534E; --muted2:#6B6862; --muted3:#8C8880; --muted4:#A39E96; --muted5:#A9A49B;
  --line:#E6E3DE; --line-soft:#EDEAE4; --line-soft2:#E0DCD5;
  --bg:#FBFAF8; --card:#FFFFFF; --tint:#F6F4F1; --tint2:#F4F2EE;
  --pill-bg:#E6F1F0; --pill-line:#CFE6E4;
  background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:'Instrument Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.cm2-page *{box-sizing:border-box}
.cm2-page a{color:var(--accent); text-decoration:none}
.cm2-page a:hover{color:var(--accent-dark); text-decoration:underline; text-underline-offset:2px}
.cm2-mono{font-family:'IBM Plex Mono',monospace}

/* header */
.cm2-head{display:flex; align-items:center; justify-content:space-between; height:58px; padding:0 24px; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40; gap:12px}
.cm2-head-l{display:flex; align-items:center; gap:20px; min-width:0}
.cm2-logo{display:flex; align-items:center; gap:9px; flex:none}
.cm2-logo-box{width:24px; height:24px; background:var(--accent); border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12.5px; font-weight:700; letter-spacing:-.02em}
.cm2-logo-name{font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.cm2-logo-sub{font-size:10.5px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--muted2); padding:2px 6px; border:1px solid var(--line); border-radius:4px}
.cm2-search{position:relative; display:flex; align-items:center; gap:9px; width:290px; max-width:100%; height:34px; padding:0 10px; background:var(--tint2); border:1px solid var(--line); border-radius:8px; font-size:13px; color:var(--muted3); flex:none}
.cm2-search:focus-within{border-color:var(--accent); background:#fff}
.cm2-search-icon{flex:none}
.cm2-search-input{flex:1; min-width:0; border:0; outline:none; background:transparent; font:inherit; font-size:13px; color:var(--ink)}
.cm2-search-input::placeholder{color:var(--muted3)}
.cm2-search-kbd{flex:none; font-size:10.5px; color:var(--muted4); border:1px solid var(--line-soft2); border-radius:4px; padding:2px 5px; background:#fff}
.cm2-search-results{position:absolute; top:calc(100% + 8px); left:0; width:360px; max-width:80vw; max-height:60vh; overflow-y:auto; background:#fff; border:1px solid var(--line-soft2); border-radius:10px; box-shadow:0 8px 24px -8px rgba(20,32,31,.18); padding:6px; z-index:55}
.cm2-search-results-h{padding:8px 10px 4px; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted4)}
.cm2-search-result{display:block; padding:8px 10px; border-radius:6px; color:var(--ink)}
.cm2-search-result:hover{background:var(--tint); text-decoration:none}
.cm2-search-result .n{font-size:13px; font-weight:500}
.cm2-search-result .m{font-size:11px; color:var(--muted3); margin-top:2px}
.cm2-search-empty{padding:14px 10px; text-align:center; font-size:12.5px; color:var(--muted3)}

/* @-mention autocomplete dropdown + rendered-mention style. The rendered .mention style is
   copied from the main app's real .mention class (app.css) for visual consistency, not the
   whole stylesheet. */
.cm2-mention-drop{position:absolute; top:100%; left:0; margin-top:4px; width:280px; max-width:90vw; max-height:220px; overflow-y:auto; background:#fff; border:1px solid var(--line-soft2); border-radius:8px; box-shadow:0 8px 24px -8px rgba(20,32,31,.18); padding:4px; z-index:65}
.cm2-mention-item{display:flex; align-items:baseline; gap:8px; padding:7px 9px; border-radius:6px; cursor:pointer}
.cm2-mention-item:hover{background:var(--tint)}
.cm2-mention-item-n{font-size:13px; font-weight:500; color:var(--ink)}
.cm2-mention-item-u{font-size:11.5px; color:var(--muted3)}
.mention{background:var(--pill-bg); color:var(--accent); border-radius:3px; padding:0 4px; font-size:inherit; font-weight:500}
.mention:hover{color:var(--accent-dark); text-decoration:none}
/* Real (2026-09-11) — flex:none removed: it forbade this group (search + Login/Signup, or the
   logged-in user menu) from ever shrinking against .cm2-head-l, so any content wider than
   expected (a long real display name, a locale with longer "Log in"/"Sign up" labels, etc.) could
   only push straight past the viewport rather than compress. flex-shrink:1 (the default, now
   unblocked) + min-width:0 lets it genuinely shrink; no flex-wrap here deliberately — .cm2-head
   has a fixed height:58px (a sticky bar), so wrapping this group onto two lines would overflow
   that fixed height rather than the more contained, already-safe shrink behavior. No visible
   change to the current, already-fitting real content. */
.cm2-head-r{display:flex; align-items:center; gap:10px; min-width:0}
.cm2-user{position:relative}
.cm2-user-btn{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted1); font-family:inherit; background:transparent; border:0; padding:4px; border-radius:20px; cursor:pointer}
.cm2-user-btn:hover{background:var(--tint)}
.cm2-avatar{width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-size:11px; font-weight:600; display:flex; align-items:center; justify-content:center; flex:none; object-fit:cover}
img.cm2-avatar{border:1px solid var(--line)}
.cm2-user-drop{position:absolute; top:calc(100% + 8px); right:0; min-width:180px; background:#fff; border:1px solid var(--line-soft2); border-radius:10px; box-shadow:0 8px 24px -8px rgba(20,32,31,.18); padding:6px; z-index:50}
.cm2-user-drop a{display:block; padding:8px 10px; border-radius:6px; font-size:13.5px; font-weight:500; color:var(--ink)}
.cm2-user-drop a:hover{background:var(--tint); text-decoration:none}
.cm2-user-drop-logout{color:#B4543C !important}
.cm2-btn{font-family:inherit; font-size:13.5px; font-weight:500; border-radius:7px; padding:8px 14px; cursor:pointer; border:1px solid var(--line-soft2); background:#fff; color:var(--ink)}
.cm2-btn:hover{background:var(--tint); text-decoration:none}
.cm2-btn-dark{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.cm2-btn-dark:hover{background:var(--accent-dark)}
.cm2-btn-sm{font-size:12.5px; padding:6px 11px}

/* horizontal room selector — replaces the left rail entirely. Colors reuse the same
   room.id%8 palette (cm2-c0..cm2-c7) already defined below for the browse tiles. */
.cm2-roomrow-wrap{border-bottom:1px solid var(--line); background:var(--bg); position:sticky; top:58px; z-index:30}
.cm2-roomrow{display:flex; align-items:center; gap:8px; padding:12px 32px; overflow-x:auto; scrollbar-width:thin}
.cm2-pill{display:flex; align-items:center; gap:7px; flex:none; font-size:13px; font-weight:500; padding:8px 14px; border-radius:100px; border:1.5px solid transparent; white-space:nowrap; color:inherit}
.cm2-pill:hover{text-decoration:none; filter:brightness(0.97)}
.cm2-pill-dot{width:7px; height:7px; border-radius:50%; flex:none}
.cm2-pill.active{border-color:currentColor}
.cm2-pill-new{background:var(--tint2); border:1.5px dashed var(--line-soft2); color:var(--muted2)}
.cm2-pill-new:hover{background:var(--tint); border-color:var(--muted4); color:var(--ink)}

/* full page width — no more max-width:1440px shell wrapper. Inner content (cards, thread
   body, etc.) keeps its own sane internal max-widths for readability; only the page frame
   itself is unconstrained now. */
.cm2-main{padding:40px 32px 80px; max-width:1600px; margin:0 auto}

/* browse hero — white bordered card, scoped to the top of the browse page only, not a
   site-wide re-theme. --hero-border mirrors assets/css/global.css's real --border token
   (#E5E7EB) — that stylesheet isn't loaded on Community pages, so the value is copied
   locally rather than pulling in the whole global stylesheet for one variable. */
.cm2-welcome{text-align:center; max-width:520px; margin:8px auto 32px}
.cm2-welcome-h1{margin:0 0 8px; font-size:28px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
.cm2-welcome-sub{margin:0; font-size:14.5px; line-height:1.6; color:var(--muted1)}

/* room tiles — colors are derived per room.id % 8 from the app's real avatar-color palette
   (app/_topbar.php's id%8 cycling, hues in global.css .av0-.av7), not invented from scratch.
   Each cN class carries three tones of the same base hue: a pastel tile background, the base
   hue for the icon square, and a darkened shade for the room-name text. */
.cm2-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; margin-bottom:32px}
.cm2-tile{display:block; padding:20px; border-radius:14px; color:inherit}
.cm2-tile:hover{text-decoration:none; filter:brightness(0.98)}
.cm2-tile-icon{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; margin-bottom:14px; color:#fff}
.cm2-tile-name{font-size:15px; font-weight:500; letter-spacing:-.01em; margin-bottom:4px}
.cm2-tile-count{font-size:12.5px; opacity:.72}

.cm2-c0{background:#E8E7FC} .cm2-c0 .cm2-tile-icon{background:#4F46E5} .cm2-c0 .cm2-tile-name{color:#312B8E}
.cm2-c1{background:#E0F3FC} .cm2-c1 .cm2-tile-icon{background:#0EA5E9} .cm2-c1 .cm2-tile-name{color:#096690}
.cm2-c2{background:#DFF1EC} .cm2-c2 .cm2-tile-icon{background:#059669} .cm2-c2 .cm2-tile-name{color:#035D41}
.cm2-c3{background:#FAEDDF} .cm2-c3 .cm2-tile-icon{background:#D97706} .cm2-c3 .cm2-tile-name{color:#874A04}
.cm2-c4{background:#FAE3E3} .cm2-c4 .cm2-tile-icon{background:#DC2626} .cm2-c4 .cm2-tile-name{color:#881818}
.cm2-c5{background:#EEE5FD} .cm2-c5 .cm2-tile-icon{background:#7C3AED} .cm2-c5 .cm2-tile-name{color:#4D2493}
.cm2-c6{background:#FAE3ED} .cm2-c6 .cm2-tile-icon{background:#DB2777} .cm2-c6 .cm2-tile-name{color:#88184A}
.cm2-c7{background:#E0F1F0} .cm2-c7 .cm2-tile-icon{background:#0D9488} .cm2-c7 .cm2-tile-name{color:#085C54}

/* same palette, applied directly to a pill (background=pastel, text=dark shade, dot=base hue) */
.cm2-pill.cm2-c0{color:#312B8E} .cm2-pill.cm2-c0 .cm2-pill-dot{background:#4F46E5}
.cm2-pill.cm2-c1{color:#096690} .cm2-pill.cm2-c1 .cm2-pill-dot{background:#0EA5E9}
.cm2-pill.cm2-c2{color:#035D41} .cm2-pill.cm2-c2 .cm2-pill-dot{background:#059669}
.cm2-pill.cm2-c3{color:#874A04} .cm2-pill.cm2-c3 .cm2-pill-dot{background:#D97706}
.cm2-pill.cm2-c4{color:#881818} .cm2-pill.cm2-c4 .cm2-pill-dot{background:#DC2626}
.cm2-pill.cm2-c5{color:#4D2493} .cm2-pill.cm2-c5 .cm2-pill-dot{background:#7C3AED}
.cm2-pill.cm2-c6{color:#88184A} .cm2-pill.cm2-c6 .cm2-pill-dot{background:#DB2777}
.cm2-pill.cm2-c7{color:#085C54} .cm2-pill.cm2-c7 .cm2-pill-dot{background:#0D9488}

/* browse */
.cm2-browse-head{display:flex; align-items:flex-start; justify-content:space-between; gap:40px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.cm2-h1{margin:0 0 10px; font-size:30px; font-weight:600; letter-spacing:-.025em}
.cm2-lead{margin:0; font-size:14.5px; line-height:1.65; color:var(--muted1); max-width:620px; text-wrap:pretty}
.cm2-stats{display:flex; border:1px solid var(--line); border-radius:10px; background:#fff; overflow:hidden; flex:none}
.cm2-stat{padding:14px 18px; border-left:1px solid var(--line-soft)}
.cm2-stat:first-child{border-left:none}
.cm2-stat-v{font-family:'IBM Plex Mono',monospace; font-size:21px; font-weight:500; letter-spacing:-.02em}
.cm2-stat-l{font-size:11px; font-weight:500; color:var(--muted3); text-transform:uppercase; letter-spacing:.05em; margin-top:3px}

.cm2-grid2{display:grid; grid-template-columns:minmax(0,1fr) 304px; gap:24px; align-items:start; margin-top:24px}
.cm2-cardlist{background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.cm2-room-row{display:flex; gap:16px; padding:17px 18px; border-top:1px solid var(--line-soft); cursor:pointer; color:inherit}
.cm2-room-row:first-child{border-top:none}
.cm2-room-row:hover{background:var(--bg); text-decoration:none}
.cm2-mark{flex:none; width:38px; height:38px; border-radius:9px; background:var(--pill-bg); border:1px solid var(--pill-line); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--accent)}
.cm2-room-name{font-size:14.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.cm2-room-desc{margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--muted1); max-width:500px; text-wrap:pretty}
.cm2-room-meta{display:flex; align-items:center; gap:14px; font-size:12px; color:var(--muted2); flex-wrap:wrap; margin-top:8px}
.cm2-room-meta .dim{color:var(--muted4)}
.cm2-latest{flex:none; width:172px; border-left:1px solid var(--line-soft); padding-left:16px}
.cm2-latest-l{font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted4); margin-bottom:5px}
.cm2-latest-v{font-size:12.5px; line-height:1.45; color:var(--ink)}

.cm2-side-card{background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:16px; overflow:hidden}
.cm2-side-h{margin:0; padding:13px 16px; border-bottom:1px solid var(--line-soft); font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted2)}
.cm2-side-card > .cm2-side-h + *{padding-top:0}
.cm2-side-card:not(:has(.cm2-side-h)){padding:16px 18px}
.cm2-trend{display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line-soft)}
.cm2-side-h + .cm2-trend{border-top:none}
.cm2-trend-n{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted4); padding-top:1px}
.cm2-trend-t{font-size:13px; font-weight:500; line-height:1.45; color:var(--ink); text-wrap:pretty}
.cm2-trend-m{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted3); margin-top:5px}

/* room view */
.cm2-crumb{font-size:12.5px; color:var(--muted3); margin-bottom:20px}
.cm2-crumb a{color:var(--muted3)}
.cm2-crumb a:hover{color:var(--ink)}
.cm2-crumb .sep{padding:0 8px; color:var(--muted5)}
.cm2-room-head{background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px 22px; display:flex; gap:16px; align-items:flex-start}
.cm2-room-head .cm2-mark{width:44px; height:44px; font-size:14px; border-radius:10px}
.cm2-room-head h1{margin:0 0 6px; font-size:19px; font-weight:600; letter-spacing:-.02em}
.cm2-room-head p{margin:0 0 11px; font-size:13.5px; line-height:1.6; color:var(--muted1); max-width:70ch}

.cm2-newthread-row{display:flex; justify-content:flex-end; margin:18px 0 0}
.cm2-newthread{display:none; background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px 18px; margin-top:12px}
.cm2-newthread.open{display:block}
.cm2-newthread input,.cm2-newthread textarea{width:100%; font:inherit; font-size:13.5px; padding:9px 11px; border:1px solid var(--line); border-radius:7px; margin-bottom:10px; outline:none}
.cm2-newthread input:focus,.cm2-newthread textarea:focus{border-color:var(--accent)}
.cm2-newthread textarea{min-height:90px; resize:vertical}
.cm2-newthread-actions{display:flex; justify-content:flex-end; gap:8px}
.cm2-newthread-msg{font-size:12.5px; margin-top:8px}

.cm2-sort{display:flex; align-items:center; justify-content:space-between; margin:18px 0 16px; font-size:12.5px; color:var(--muted3)}
.cm2-sort a{color:var(--muted2); margin-left:10px}
.cm2-sort a.active{color:var(--ink); font-weight:600}

.cm2-thread{display:block; padding:16px 18px; border-top:1px solid var(--line-soft); color:inherit}
.cm2-thread:first-child{border-top:none}
.cm2-thread:hover{background:#fff; text-decoration:none}
.cm2-thread h3{margin:0 0 6px; font-size:14.5px; font-weight:600; letter-spacing:-.01em}

/* thread grid — default room view, capped at 11 real cards + an optional dark "see all" card */
.cm2-threadgrid{display:grid; grid-template-columns:repeat(6, 1fr); gap:12px}
.cm2-threadcard{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; color:inherit; min-height:120px}
.cm2-threadcard:hover{border-color:var(--line-soft2); text-decoration:none}
.cm2-threadcard h3{margin:0 0 10px; font-size:13px; font-weight:500; letter-spacing:-.01em; line-height:1.4; color:var(--ink); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.cm2-threadcard-meta{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; font-size:11px; color:var(--muted3)}
.cm2-threadcard-meta .cm2-mono{font-size:10.5px; color:var(--muted4)}
.cm2-threadcard-stats{display:flex; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--line-soft); font-size:11px; font-weight:500; color:var(--muted2)}

.cm2-threadcard-dark{background:#14201F; border-color:#14201F; color:#fff; align-items:flex-start; justify-content:center; gap:6px}
.cm2-threadcard-dark:hover{background:#0E1615; text-decoration:none}
.cm2-threadcard-dark-n{font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:500; color:#fff}
.cm2-threadcard-dark-t{font-size:12.5px; font-weight:500; color:#C9D6D4}

/* pagination */
.cm2-pagination{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; padding:14px 4px}
.cm2-pagination .cm2-mono{font-size:12px; color:var(--muted3)}
.cm2-pagination-btns{display:flex; gap:8px}
.cm2-pagination a.cm2-btn, .cm2-pagination span.cm2-btn{font-size:12.5px; padding:6px 12px}
.cm2-pagination span.cm2-btn{opacity:.4; cursor:default}
.cm2-pagination span.cm2-btn:hover{background:#fff}

/* thread view — tightened typography: 20px/500 title, 14.5px/1.65 body, ~13px muted meta,
   reduced vertical rhythm throughout. Thread bodies are currently rendered as plain
   nl2br() text (no markdown/heading parsing exists), so the h1-h6/p rules below are a
   defensive baseline for if rich content is ever rendered there — nothing in today's
   real content exercises them yet. */
.cm2-post-card{background:#fff; border:1px solid var(--line); border-radius:10px}
.cm2-post-head{padding:16px 22px 12px; border-bottom:1px solid var(--line-soft)}
.cm2-post-head h2{margin:0 0 6px; font-size:20px; font-weight:500; letter-spacing:-.01em; line-height:1.3; text-wrap:pretty}
.cm2-thread-meta{font-size:11.5px; color:var(--muted3)}
.cm2-post{display:flex; gap:14px; padding:16px 22px; border-top:1px solid var(--line-soft)}
.cm2-post-head + .cm2-post{border-top:none}
.cm2-post-av{flex:none; width:34px; height:34px; border-radius:50%; background:var(--pill-bg); border:1px solid var(--pill-line); color:var(--accent); font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center}
.cm2-post-name-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cm2-post-name{font-size:13px; font-weight:500; color:var(--ink)}
.cm2-post-user{font-size:12.5px; color:var(--muted3)}
.cm2-post-time{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted3)}
.cm2-post-body{margin:6px 0 0; font-size:14.5px; line-height:1.65; color:var(--ink); white-space:pre-wrap; text-wrap:pretty}
.cm2-post-body h1,.cm2-post-body h2,.cm2-post-body h3,.cm2-post-body h4{margin:24px 0 8px; font-size:15px; font-weight:500; letter-spacing:-.005em; color:var(--ink); white-space:normal}
.cm2-post-body h1:first-child,.cm2-post-body h2:first-child,.cm2-post-body h3:first-child{margin-top:0}
.cm2-post-body p{margin:0 0 16px}
.cm2-post-body p:last-child{margin-bottom:0}
.cm2-post-foot{display:flex; align-items:center; gap:14px; margin-top:10px; font-size:12px; color:var(--muted3)}

/* vertical vote control */
.cm2-post-row{display:flex; gap:16px; padding:16px 22px; border-top:1px solid var(--line-soft)}
.cm2-post-head + .cm2-post-row{border-top:none}
.cm2-vote-vert{display:flex; flex-direction:column; align-items:center; gap:3px; flex:none; padding-top:2px}
.cm2-vote-vert button{display:flex; align-items:center; justify-content:center; width:26px; height:22px; background:transparent; border:1px solid transparent; border-radius:6px; cursor:pointer; color:var(--muted4)}
.cm2-vote-vert button:hover{background:var(--pill-bg); border-color:var(--pill-line); color:var(--accent)}
.cm2-vote-vert button.up.voted{color:var(--accent)}
.cm2-vote-vert .score{font-family:'IBM Plex Mono',monospace; font-size:13.5px; font-weight:500; color:var(--ink)}
.cm2-vote-vert.static{color:var(--muted3)}
.cm2-vote-vert.static span{font-family:'IBM Plex Mono',monospace; font-size:12px}

.cm2-gate{padding:22px 24px; margin:18px 0; background:#FDFCFA; border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:10px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cm2-gate-body{flex:1; min-width:220px}
.cm2-gate-title{font-size:15px; font-weight:600; letter-spacing:-.01em; margin:0 0 6px}
.cm2-gate-sub{margin:0; max-width:480px; font-size:13.5px; line-height:1.6; color:var(--muted1); text-wrap:pretty}
.cm2-gate-btns{display:flex; gap:10px; flex:none}

.cm2-gated{opacity:.45; filter:blur(1.5px); pointer-events:none; user-select:none}

.cm2-composer{position:sticky; bottom:0; margin-top:20px; padding-top:20px; background:linear-gradient(to bottom, rgba(251,250,248,0) 0%, var(--bg) 22%)}
.cm2-composer-inner{background:#fff; border:1px solid var(--line-soft2); border-radius:11px; box-shadow:0 1px 2px rgba(26,25,23,.04), 0 8px 24px -12px rgba(26,25,23,.10)}
.cm2-composer-row{display:flex; gap:12px; align-items:flex-start; padding:14px 16px 0}
.cm2-composer textarea{width:100%; resize:vertical; min-height:56px; font:inherit; font-size:14px; line-height:1.55; color:var(--ink); border:0; outline:none; background:transparent; padding:0}
.cm2-composer-foot{display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:10px; padding:10px 16px; border-top:1px solid var(--line-soft)}
.cm2-composer-hint{font-size:12px; color:var(--muted3)}
.cm2-composer-msg{font-size:12.5px; padding:0 16px 10px}

/* modal */
.cm2-modal-ov{position:fixed; inset:0; background:rgba(20,32,31,.42); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; z-index:60; padding:24px}
.cm2-modal-ov.open{display:flex}
.cm2-modal{width:468px; max-width:100%; background:#fff; border:1px solid var(--line-soft2); border-radius:14px; box-shadow:0 24px 60px -20px rgba(20,32,31,.4); overflow:hidden}
.cm2-modal-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding:24px 26px 0}
.cm2-modal h2{margin:8px 26px 6px; font-size:19px; font-weight:600; letter-spacing:-.02em}
.cm2-modal > p{margin:0 26px 18px; font-size:13.5px; line-height:1.6; color:var(--muted1)}
.cm2-guideline{display:flex; gap:12px; padding:14px 26px; border-top:1px solid var(--line-soft)}
.cm2-guidelines-list{padding-bottom:4px}
.cm2-guidelines-list .cm2-guideline:first-child{border-top:1px solid var(--line-soft)}
.cm2-guideline-n{flex:none; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted4); padding-top:1px}
.cm2-guideline-t{font-size:13.5px; font-weight:600}
.cm2-guideline-d{font-size:13px; line-height:1.5; color:var(--muted1); margin-top:3px; text-wrap:pretty}
.cm2-modal-foot{display:flex; align-items:center; justify-content:space-between; padding:18px 26px 20px}

.cm2-empty{padding:40px 0; text-align:center; color:var(--muted2)}

/* ===== Responsive: thread grid column steps (independent of the sidebar/rail breakpoints
   below — 6 is too many to hold well before 1200px, so this steps down earlier) ===== */
@media(max-width:1199px){
  .cm2-threadgrid{grid-template-columns:repeat(4, 1fr)}
}

/* ===== Responsive: 768–1023px — stacked sidebar, rail stays ===== */
@media(max-width:1023px){
  .cm2-grid2{grid-template-columns:1fr}
  .cm2-latest{display:none}
  .cm2-stats{overflow-x:auto}
  .cm2-threadgrid{grid-template-columns:repeat(3, 1fr)}
}

/* ===== Responsive: <768px — drawer rail, icon-only search, non-sticky composer ===== */
@media(max-width:767px){
  .cm2-logo-sub{display:none}
  .cm2-head{padding:0 12px; gap:8px}
  .cm2-head-l{gap:10px}
  .cm2-search{width:34px; height:32px; padding:0; justify-content:center; cursor:pointer; border-radius:50%; transition:width 160ms ease-out}
  .cm2-search-input, .cm2-search-kbd{display:none}
  .cm2-search.expanded{width:calc(100vw - 24px); max-width:280px; justify-content:flex-start; padding:0 10px; border-radius:8px; position:fixed; top:12px; left:12px; z-index:80; background:#fff}
  .cm2-search.expanded .cm2-search-input{display:block}
  .cm2-search-results{left:12px; right:12px; width:auto; max-width:none; position:fixed; top:56px}
  .cm2-head-r{gap:6px}
  .cm2-user span{display:none}
  .cm2-btn{padding:7px 10px; font-size:12.5px}

  .cm2-roomrow{padding:10px 16px; gap:6px}
  .cm2-pill{padding:7px 12px; font-size:12.5px}

  .cm2-main{padding:24px 16px 60px}
  .cm2-welcome-h1{font-size:23px}
  .cm2-tiles{grid-template-columns:1fr}
  .cm2-browse-head{flex-direction:column; gap:18px}
  .cm2-stats{width:100%}
  .cm2-stat{flex:1 1 50%; min-width:50%}
  .cm2-h1{font-size:24px}

  .cm2-room-row{flex-wrap:wrap}
  .cm2-latest{display:none}

  .cm2-threadgrid{grid-template-columns:repeat(2, 1fr); gap:8px}
  .cm2-threadcard{min-height:100px; padding:11px}

  .cm2-post-head h2{font-size:19px}
  .cm2-post-row{padding:16px}
  .cm2-vote-vert{gap:2px}
  .cm2-vote-vert button{width:32px; height:28px}
  .cm2-post-av{width:30px; height:30px}

  .cm2-gate{flex-direction:column; align-items:stretch; text-align:left}
  .cm2-gate-btns{flex-direction:column}
  .cm2-gate-btns a{text-align:center}

  .cm2-composer{position:static; background:none; padding-top:16px}
  .cm2-composer-row{flex-wrap:wrap}

  .cm2-pagination{flex-direction:column; align-items:stretch; gap:10px}
  .cm2-pagination-btns{justify-content:space-between}
}