/* Workshop Hub (/community). Built on site.css + studio.css tokens: warm near-black, amber, Rajdhani display, Barlow body.
   Layout: the sections as horizontal tabs over the feed / post, a side panel on the right (you, Discord, house rules,
   numbers). Phones: one column, the tabs scroll sideways, the side panel follows the feed.
   Every box that JS fills has its size before the data comes (no layout shift); cards skip work off screen. */

.cm { padding-block: 22px 8px; }
.cm-grid { display: grid; grid-template-columns: minmax(0, 860px) 300px; gap: 32px; align-items: start; justify-content: center; }
.cm-main { position: relative; min-width: 0; outline: none; }
/* post view: the page head folds away, the bell stays (top right, next to Back) */
.cm-pvl #feedView { display: none; } /* a deep link to a post, before community.js takes over */
.cm-pvl #postView { display: block !important; }
.cm-pvl .cm-main .cm-head, .cm-main.pv-mode .cm-head { position: absolute; top: 0; right: 0; z-index: 20; min-height: 0; padding: 0; }
.cm-pvl .cm-title, .cm-pvl .cm-chips, .cm-main.pv-mode .cm-title, .cm-main.pv-mode .cm-chips { display: none; }
.cm-pvl .cm-tools, .cm-main.pv-mode .cm-tools { margin-top: 0; }
.pv-back { min-height: 46px; display: flex; align-items: center; padding-right: 56px; }
.cm-skip:focus { position: fixed; z-index: 100; top: 10px; left: 10px; width: auto; height: auto; clip: auto; padding: 10px 14px; background: var(--amber); color: var(--ink); border-radius: 4px; font-weight: 600; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-t { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; font-size: 13px; line-height: 1; }
html.cm-lock { overflow: hidden; }

/* ---------- rail ---------- */
.cm-rail { position: sticky; top: calc(var(--hdr, 69px) + 18px); max-height: calc(100svh - var(--hdr, 69px) - 36px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.rail-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 4px 12px 0; }
.rail-skel { display: grid; gap: 10px; } .rail-skel .skel { min-height: 120px; }
.rail-skel .skel:first-child { min-height: 64px; }
.rl-top { display: flex; align-items: center; justify-content: space-between; min-height: 32px; padding: 0 10px 6px; }
.rl-ib { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: border-color .2s, color .2s; }
.rl-ib:hover { border-color: var(--amber); color: var(--amber); }
.rl-ib .ic { width: 15px; height: 15px; }
.rl-x { display: none; }
.rl-me { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.rl-me-t { min-width: 0; line-height: 1.2; }
.rl-me-t b { font-family: var(--display); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; margin-right: 6px; }
.rl-me-t small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-all, .rl-s, .rl-gh { position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: 8px; text-decoration: none; color: var(--muted); font-size: 15px; transition: background .2s, color .2s; }
.rl-all:hover, .rl-s:hover, .rl-gh:hover { background: rgba(var(--ov), .035); color: var(--fg); }
.rl-all.on, .rl-s.on, .rl-gh.on { background: rgba(var(--acc), .08); color: var(--fg); }
.rl-all.on::before, .rl-s.on::before, .rl-gh.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--gc, var(--amber)); box-shadow: 0 0 10px var(--gc, var(--amber)); }
.rl-all { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.rl-all .ic { color: var(--amber); }
.nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-in .n { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.tg { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 3px; color: var(--dim); }
.rl-g { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rl-gh { color: var(--fg); font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: .06em; text-transform: uppercase; }
.rl-gi { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: color-mix(in srgb, var(--gc) 16%, transparent); color: var(--gc); }
.rl-gi .ic, .rl-gi .ic-t { width: 16px; height: 16px; }
.rl-ss { list-style: none; margin: 2px 0 0; padding: 0 0 0 10px; display: grid; gap: 1px; }
.rl-s .ic { width: 16px; height: 16px; color: var(--gc); opacity: .9; }
.rl-g.soon { border-top-style: dashed; }
.rl-g.soon .rl-gh { color: var(--muted); }
.rl-g.soon .rl-gi { background: rgba(var(--ov), .04); color: var(--muted); }
.rl-g .pill.soon { padding: 1px 7px; font-size: 11px; }
.rl-g.hid { opacity: .7; }
.rl-soon { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); display: grid; gap: 1px; }
.rl-sh { margin: 0 0 4px; padding: 0 10px; }
.rl-sr { display: flex; align-items: center; gap: 4px; }
.rl-sr .rl-gh { flex: 1; min-width: 0; color: var(--muted); font-size: 14.5px; }
.rl-sr .rl-gi { width: 26px; height: 26px; background: rgba(var(--ov), .04); color: var(--muted); }
.rl-sr .rl-gh:hover .rl-gi, .rl-sr .rl-gh.on .rl-gi { background: color-mix(in srgb, var(--gc) 16%, transparent); color: var(--gc); }
.rl-bell { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; margin-right: 4px; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.rl-bell .ic { width: 15px; height: 15px; transform-origin: 50% 20%; }
.rl-bell:hover { border-color: var(--gc); color: var(--gc); }
.rl-bell[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gc) 60%, transparent); background: color-mix(in srgb, var(--gc) 14%, transparent); color: var(--gc); }
.rl-bell[disabled] { opacity: .5; }
.rl-wait { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px 48px; padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.rl-wait .ic { width: 13px; height: 13px; }
.rl-wait:hover { border-color: var(--gc); color: var(--fg); }
.rl-wait[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gc) 60%, transparent); background: color-mix(in srgb, var(--gc) 10%, transparent); color: var(--gc); }
.rl-wait[disabled] { opacity: .5; }
[data-act="wait"].ring .ic { animation: cm-ring .8s ease-in-out; transform-origin: 50% 20%; }
@keyframes cm-ring { 20% { transform: rotate(18deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(9deg); } 80% { transform: rotate(-5deg); } }
.rl-rules { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 8px; }
.rl-rules summary { cursor: pointer; padding: 6px 10px; list-style: none; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rl-rules summary::-webkit-details-marker { display: none; }
.rl-rules summary::after { content: " +"; color: var(--amber); }
.rl-rules[open] summary::after { content: " −"; }
.rl-rules ol { margin: 4px 0 0; padding: 0 10px 0 30px; display: grid; gap: 6px; color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.rl-rules li::marker { color: var(--amber); font-family: var(--mono); font-size: 11px; }
.rl-stats { margin: 10px 0 0; padding: 0 10px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

/* ---------- page head (fixed height: filled in place) ---------- */
.cm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 112px; padding: 4px 0 16px; }
.cm-title { min-width: 0; flex: 1; }
.cm-head .eyebrow { margin: 0 0 8px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.cm-head .eyebrow > * + *::before { content: "/"; margin-right: 10px; color: var(--dim); }
.cm-head .eyebrow a { color: inherit; text-decoration: none; }
.cm-head .eyebrow a:hover { color: var(--amber); }
.cm-head h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: .04em; }
.cm-desc { margin: 8px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.4; height: 1.4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-tools { position: relative; flex: none; display: flex; gap: 8px; height: 46px; margin-top: 6px; }
.cm-dc { color: #aab2ff; } .cm-dc:hover { border-color: #5865f2; color: #fff; background: #5865f2; } .cm-dc .dc-ic { width: 22px; height: 22px; }
.cm-bell { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--card); color: var(--fg); cursor: pointer; transition: border-color .2s, color .2s; }
.cm-bell:hover, .cm-bell[aria-expanded="true"] { border-color: var(--amber); color: var(--amber); }
.cm-bell svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 15%; }
.cm-bell .n { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 11px; background: var(--refuse); color: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; line-height: 21px; text-align: center; box-shadow: 0 0 0 3px var(--bg); }
.cm-bell .n[data-n="0"] { display: none; }
.cm-bell:has(.n:not([data-n="0"])) svg { animation: cm-ring 1s ease-in-out .8s 2; }

/* notifications */
.cm-notif { position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; width: min(390px, calc(100vw - 32px)); max-height: min(72vh, 540px); overflow-y: auto; overscroll-behavior: contain; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: 0 26px 70px rgba(0,0,0,.6); animation: cm-in .18s ease-out; }
.nf-h { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--card); }
.nf-h b { font-family: var(--display); font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.nf-h .linkbtn { font-size: 13.5px; }
.nf-l { list-style: none; margin: 0; padding: 6px; display: grid; gap: 2px; }
.nf-l a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; border-radius: 10px; text-decoration: none; color: var(--muted); font-size: 14px; line-height: 1.35; }
.nf-l a:hover, .nf-l a:focus-visible { background: rgba(var(--ov), .045); }
.nf-l a.unread { background: rgba(var(--acc), .065); color: var(--fg); }
.nf-t { display: grid; gap: 3px; min-width: 0; }
.nf-t b { color: var(--fg); font-weight: 600; }
.nf-t i { font-style: normal; color: var(--amber-2); }
.nf-t small { color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-l .dot { width: 8px; height: 8px; margin-top: 6px; color: var(--amber); box-shadow: 0 0 8px var(--amber); }
.nf-e { margin: 0; padding: 20px 16px; color: var(--muted); font-size: 14.5px; }
.nf-skel { display: grid; gap: 8px; padding: 10px; } .nf-skel .skel { min-height: 56px; }

/* ---------- tabs: the sections, every screen size ---------- */
.hb-tabs { position: sticky; top: var(--hdr, 69px); z-index: 30; margin: 0 0 16px; padding: 8px 0; background: linear-gradient(var(--bg) 78%, transparent); }
.hb-tabs-in { position: relative; display: flex; gap: 4px; height: 46px; padding: 4px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px); scroll-padding-inline: 12px; }
.hb-tabs-in::-webkit-scrollbar { display: none; }
.hb-tabs.fr .hb-tabs-in { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.hb-tabs.fl .hb-tabs-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.hb-tabs.fl.fr .hb-tabs-in { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.chp { position: relative; z-index: 1; display: inline-flex; flex: none; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 14.5px; white-space: nowrap; text-decoration: none; cursor: pointer; transition: color .2s, background .2s; }
.chp:hover { color: var(--fg); background: rgba(var(--ov), .04); }
.chp .ic { width: 16px; height: 16px; color: var(--gc, var(--amber)); }
.chp.on { color: var(--fg); background: transparent; }
.chp .tg { margin-left: 2px; }
.chp.hid { opacity: .65; }
.chp-all { font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 15px; }
.chp-g { font-family: var(--display); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 13.5px; color: var(--dim); margin-left: 6px; }
.chp-g::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 1px; background: var(--line-2); }
.chp-admin { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border: 1px dashed var(--line-2); }
.chp-admin:hover { color: var(--amber); border-color: var(--amber); }
.hb-glide { position: absolute; z-index: 0; left: 0; top: 4px; height: 36px; width: 0; border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--amber) 22%, transparent), color-mix(in srgb, var(--amber) 9%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent), 0 6px 22px -8px rgba(var(--acc), .55); opacity: 0; transition: transform .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), opacity .2s; pointer-events: none; }
.skel-chip { width: 110px; background: rgba(var(--ov), .04); }

/* ---------- side panel ---------- */
.hb-side .rail-in { gap: 12px; padding: 0; }
.hb-side .rl-me { margin: 0; }
.hb-dc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; text-decoration: none; color: var(--fg); background: radial-gradient(120% 140% at 0% 0%, rgba(88,101,242,.32), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(255,184,76,.16), transparent 60%), var(--card); border: 1px solid rgba(88,101,242,.45); overflow: hidden; isolation: isolate; transition: transform .2s, border-color .2s; }
.hb-dc::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(150,160,255,.9) 80%, rgba(255,184,76,.9) 88%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hb-orbit 5s linear infinite; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hb-orbit { to { --a: 360deg; } }
.hb-dc:hover { transform: translateY(-2px); border-color: rgba(120,132,255,.8); }
.hb-dc-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #5865f2; color: #fff; box-shadow: 0 8px 22px -8px rgba(88,101,242,.9); }
.dc-ic { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dc-ic circle { fill: currentColor; stroke: none; }
.hb-dc-t { display: grid; gap: 2px; min-width: 0; }
.hb-dc-t b { font-family: var(--display); font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.hb-dc-t small { color: var(--muted); font-size: 13px; line-height: 1.3; }
.hb-dc-go { color: var(--muted); } .hb-dc-go .ic { width: 16px; height: 16px; }
.tz-dc { margin-top: 18px; text-align: left; }
.hb-stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.hb-stats div { display: grid; gap: 2px; padding: 12px 10px; text-align: center; }
.hb-stats div + div { border-left: 1px solid var(--line); }
.hb-stats b { font-family: var(--display); font-size: 26px; line-height: 1; color: var(--fg); }
.hb-stats small { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.hb-side .rl-rules { margin: 0; padding: 4px 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.hb-admin { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 14px; text-decoration: none; color: var(--muted); transition: border-color .2s, color .2s; }
.hb-admin:hover { border-color: var(--amber); color: var(--fg); }
.hb-admin span { display: grid; gap: 2px; } .hb-admin b { font-family: var(--display); font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); } .hb-admin small { font-size: 12.5px; }
.hb-admin .ic { color: var(--amber); }

/* ---------- composer slot ---------- */
.cm-slot { min-height: 62px; margin-bottom: 14px; }
.cm-slot > .skel { min-height: 62px; border-radius: 14px; }
.cmp-open { display: flex; align-items: center; gap: 12px; width: 100%; height: 62px; padding: 0 10px 0 12px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); color: var(--muted); font-size: 16px; text-align: left; cursor: text; transition: border-color .2s, background .2s; }
.cmp-open:hover { border-color: rgba(var(--acc), .6); background: var(--card-2); }
.cmp-ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-go { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 4px; background: var(--amber); color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.cmp-go .ic { width: 16px; height: 16px; stroke-width: 2; }
.cmp { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--amber); border-radius: 14px; background: radial-gradient(ellipse at 0 0, rgba(var(--acc), .09), transparent 60%), var(--card); animation: cm-in .2s ease-out; }
.cmp-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.cmp-top > b { font-family: var(--display); font-size: 16px; letter-spacing: .05em; text-transform: uppercase; }
.cmp-in { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cmp-sp { min-width: 0; }
.cmp-sp select { width: auto; max-width: 100%; min-height: 36px; padding: 4px 34px 4px 14px; border-radius: 999px; font-size: 14px; background-position: calc(100% - 18px) 15px, calc(100% - 13px) 15px; }
.cmp .fld input[name="title"] { min-height: 46px; padding: 6px 2px; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: .01em; }
.cmp .fld input[name="title"]:focus { border-bottom-color: var(--amber); }
.cmp .fld textarea { min-height: 120px; max-height: 50vh; font-size: 16px; line-height: 1.5; field-sizing: content; }
.cmp-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.cmp-hint { flex: 1 1 200px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dim); }
kbd { display: inline-block; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.cmp .cnt { font-size: 12px; color: var(--warn); }
.cmp .form-msg:empty { display: none; }
.cm-nudge { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 9px 10px 9px 16px; border: 1px dashed rgba(var(--acc), .45); border-radius: 14px; background: rgba(var(--acc), .05); color: var(--muted); font-size: 14.5px; line-height: 1.35; }
.cm-nudge > .ic { width: 20px; height: 20px; color: var(--amber); }
.cm-nudge > span { flex: 1; min-width: 0; }
.cm-nudge b { color: var(--fg); font-family: var(--display); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; margin-right: 4px; }
.cm-nudge .btn { flex: none; }
.cm-nudge .sm { display: none; }

/* ---------- sort + search ---------- */
.cm-bar { display: flex; align-items: center; gap: 12px; height: 42px; margin-bottom: 14px; }
.cm-sort { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); }
.cm-sort button { height: 34px; padding: 0 15px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--display); font-weight: 700; font-size: 14.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.cm-sort button:hover { color: var(--fg); }
.cm-sort button[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.cm-search { position: relative; flex: 1; min-width: 0; }
.cm-search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; }
.cm-search input { width: 100%; height: 42px; padding: 0 14px 0 40px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); color: var(--fg); font: inherit; font-size: 15px; transition: border-color .2s; }
.cm-search input:focus { outline: none; border-color: var(--amber); }

/* ---------- post cards ---------- */
.cm-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
#pinned:not(:empty) { margin-bottom: 12px; }
.cm-lbl { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.cm-lbl .ic { width: 14px; height: 14px; }
.pc-skel { min-height: 152px; border-radius: 14px; }
.pc { position: relative; padding: 16px 18px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); cursor: pointer; transition: border-color .2s, background .2s; content-visibility: auto; contain-intrinsic-size: auto 172px; }
.pc:hover { border-color: rgba(var(--acc), .45); background: var(--card-2); }
.pc.mopen { content-visibility: visible; z-index: 6; }
.pc.pinned { border-color: rgba(var(--acc), .32); background: linear-gradient(135deg, rgba(var(--acc), .07), transparent 45%), var(--card); }
.pc.fresh { animation: cm-pop .6s cubic-bezier(.2,1.3,.4,1); border-color: var(--amber); }
.pa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pa-t { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.pa-n { display: flex; align-items: center; gap: 7px; min-width: 0; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; }
.pa-m { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-m .sp { color: var(--muted); text-decoration: none; }
.pa-m .sp:hover { color: var(--amber); }
.av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: hsl(var(--h, 36) 82% 64%); color: #140d05; font-family: var(--display); font-weight: 700; font-size: 18px; line-height: 1; }
.av.sm { width: 30px; height: 30px; font-size: 15px; }
.av.lg { width: 44px; height: 44px; font-size: 22px; }
.av.team { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--amber); }
.av.ghost { background: var(--line-2); color: var(--muted); }
.bdg { flex: none; padding: 2px 6px; border: 1px solid var(--line-2); border-radius: 3px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bdg.team { background: var(--amber); border-color: var(--amber); color: var(--ink); font-weight: 700; }
.bdg.guide { border-style: dashed; }
.fl { display: inline-grid; place-items: center; flex: none; color: var(--amber); }
.fl .ic { width: 16px; height: 16px; }
.fl.pin { height: auto; } /* site.css has a .pin (300vh) from the landing page */
.pc-t { margin: 10px 0 0; font-size: 23px; line-height: 1.1; text-transform: none; letter-spacing: .005em; overflow-wrap: anywhere; text-wrap: pretty; }
.pc-t a { color: var(--fg); text-decoration: none; }
.pc-t a:hover { color: var(--amber-2); }
.pc-x { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pc-x .u { color: var(--amber-2); }
.cm footer { border-top: 0; padding: 0; }
.pc-f { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 8px 0 0 -9px; }
.lk, .cbtn, .ca { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.lk:hover, .cbtn:hover, .ca:hover { background: rgba(var(--ov), .05); color: var(--fg); }
.lk.sm, .ca { height: 30px; padding: 0 8px; font-size: 13px; }
.lk.sm .ic, .ca .ic { width: 16px; height: 16px; }
.lk .c:empty { display: none; }
.cbtn span:empty { display: none; }
.lk .ic { transition: transform .3s cubic-bezier(.2,1.6,.4,1), fill .2s; }
.lk[aria-pressed="true"] { color: #ff6b8b; }
.lk[aria-pressed="true"] .ic { fill: currentColor; }
.lk[aria-disabled="true"] { cursor: default; }
.lk:active .ic { transform: scale(.85); }
.lk::before, .lk::after { content: ""; position: absolute; top: 50%; pointer-events: none; opacity: 0; border-radius: 50%; }
.lk::before { left: 10px; width: 18px; height: 18px; margin-top: -9px; }
.lk::after { left: 17px; width: 4px; height: 4px; margin-top: -2px; }
.lk.sm::before { left: 8px; width: 16px; height: 16px; margin-top: -8px; } .lk.sm::after { left: 14px; }
.lk.burst .ic { animation: cm-heart .5s cubic-bezier(.2,1.6,.4,1); }
.lk.burst::before { animation: cm-ringo .5s ease-out; }
.lk.burst::after { animation: cm-sparks .6s ease-out; }
@keyframes cm-heart { 0% { transform: scale(.6); } 50% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes cm-ringo { 0% { opacity: 1; transform: scale(.5); box-shadow: 0 0 0 0 rgba(255,107,139,.8); } 100% { opacity: 0; transform: scale(1.4); box-shadow: 0 0 0 10px rgba(255,107,139,0); } }
@keyframes cm-sparks { 0% { opacity: 1; box-shadow: 0 0 #ffb84c, 0 0 #ff6b8b, 0 0 #4cc9f0, 0 0 #a78bfa, 0 0 #34d399, 0 0 #ff6b8b; } 100% { opacity: 0; box-shadow: 0 -17px #ffb84c, 15px -8px #ff6b8b, 15px 8px #4cc9f0, 0 17px #a78bfa, -15px 8px #34d399, -15px -8px #ffcf85; } }
.ptag { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; padding: 2px 8px 2px 4px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ptag .plat { width: 16px; height: 16px; }
.ptag .plat svg { width: 12px; height: 12px; }
.ptag.youtube .plat { color: #ff3355; } .ptag.instagram .plat { color: #e1306c; } .ptag.tiktok .plat { color: #25f4ee; }
.pc-act { margin-left: auto; padding-right: 2px; color: var(--dim); font-size: 12.5px; white-space: nowrap; }

/* ⋯ menu */
.mn { position: relative; flex: none; }
.mn-b { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.mn-b .ic { stroke-width: 3.2; }
.mn-b:hover, .mn-b[aria-expanded="true"] { background: rgba(var(--ov), .06); color: var(--fg); }
.mn-p { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: grid; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 20px 56px rgba(0,0,0,.6); animation: cm-in .15s ease-out; cursor: default; }
.mn-p button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--fg); font-size: 14.5px; text-align: left; cursor: pointer; white-space: nowrap; }
.mn-p button .ic { width: 16px; height: 16px; color: var(--muted); }
.mn-p button:hover, .mn-p button:focus-visible { background: rgba(var(--acc), .1); outline: none; }
.mn-p button.bad, .mn-p button.bad .ic { color: var(--bad); }
.mn-p hr { margin: 5px 4px; border: 0; border-top: 1px solid var(--line); }
.mn-p hr:first-child { display: none; }

/* empty + more */
.cm-empty { display: grid; justify-items: center; gap: 8px; padding: 46px 20px; border: 1px dashed var(--line-2); border-radius: 14px; text-align: center; }
.cm-empty-mk { font-size: 44px; color: var(--amber); opacity: .85; }
.cm-empty b { font-family: var(--display); font-size: 25px; letter-spacing: .03em; text-transform: uppercase; line-height: 1; }
.cm-empty p { margin: 0; max-width: 44ch; color: var(--muted); }
.cm-empty .btn { margin-top: 8px; }
.cm-more { display: flex; justify-content: center; padding: 18px 0 0; }
.cm-end { margin: 0; color: var(--dim); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- the post ---------- */
.pv-back { margin: 0 0 12px; }
.tz, .soon-box, .pv, .cmts { min-width: 0; }
.pv-back a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px 8px 0; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.pv-back a:hover { color: var(--amber); }
.pv-back .ic { width: 16px; height: 16px; }
.pv { position: relative; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.pv.loading .pv-x { opacity: .55; }
.pv-t { margin: 16px 0 0; font-size: clamp(30px, 4.2vw, 46px); line-height: 1; text-transform: none; letter-spacing: .005em; overflow-wrap: anywhere; }
.rich { color: #e9e4db; font-size: 16.5px; line-height: 1.6; overflow-wrap: anywhere; }
.rich p { margin: 0 0 .8em; }
.rich p:last-child { margin-bottom: 0; }
.rich a { color: var(--amber-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.rich a:hover { color: var(--amber); }
.pv-x { margin-top: 14px; }
.lcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 14px; }
.lcard { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: rgba(var(--ov), .02); color: var(--fg); text-decoration: none; transition: border-color .2s, background .2s; }
.lcard:hover { border-color: var(--amber); background: rgba(var(--acc), .05); }
.lcard .plat { width: 42px; height: 42px; border-radius: 10px; background: var(--pc, #333); color: #fff; }
.lcard .plat svg { width: 20px; height: 20px; }
.lcard.youtube { --pc: #ff0033; }
.lcard.tiktok { --pc: linear-gradient(135deg, #25f4ee, #000 42%, #000 58%, #fe2c55); }
.lcard.instagram { --pc: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.lcard b { display: block; font-family: var(--display); font-size: 17px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.lcard small { display: block; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard .go { width: 16px; height: 16px; color: var(--muted); transition: transform .25s, color .2s; }
.lcard:hover .go { color: var(--amber); transform: translate(2px, -2px); }
.cm .pv-f { margin: 16px 0 0 -9px; padding-top: 8px; border-top: 1px solid var(--line); }
.pv-edit { display: grid; gap: 12px; margin-top: 16px; }

/* comments */
.cmts { margin-top: 24px; }
.cmts-h { margin-bottom: 14px; font-size: 26px; }
.ccmp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-bottom: 20px; }
.ccmp .fld { gap: 4px; }
.ccmp .fld textarea { min-height: 46px; max-height: 40vh; padding: 11px 14px; border-radius: 12px; font-size: 15.5px; line-height: 1.45; resize: none; field-sizing: content; }
.ccmp > .btn { min-height: 46px; }
.ccmp .form-msg { grid-column: 2 / -1; }
.ccmp .form-msg:empty, .ce .form-msg:empty { display: none; }
.ccmp.reply { grid-template-columns: auto minmax(0, 1fr); margin: 0; }
.ccmp-b { grid-column: 2; display: flex; justify-content: flex-end; gap: 8px; }
.ce { display: grid; gap: 8px; margin: 6px 0 8px; }
.ce .ccmp-b { grid-column: auto; }
.cl, .cr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cr { margin: 12px 0 0 15px; padding-left: 22px; border-left: 2px solid var(--line); }
.cr:empty { display: none; }
.rslot:not(:empty) { margin: 12px 0 0 37px; }
.cc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.cc-b { min-width: 0; padding: 9px 14px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .4s, box-shadow .4s; }
.cc-h { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 14.5px; }
.cc-h > b { font-weight: 600; }
.cc-h .mn { margin: -4px -8px -4px auto; }
.cc-h .mn-b { width: 30px; height: 30px; }
.cc-x { margin-top: 2px; font-size: 15.5px; }
.cc-a { display: flex; align-items: center; gap: 2px; margin: 2px 0 0 -8px; }
.cmc.hl > .cc .cc-b { border-color: rgba(var(--acc), .65); box-shadow: 0 0 0 3px rgba(var(--acc), .12); }
.cmc.fresh > .cc { animation: cm-pop .5s cubic-bezier(.2,1.3,.4,1); }
.cmc.del > .cc .cc-b { background: transparent; border-style: dashed; }
.cc-del { margin: 2px 0 6px; color: var(--dim); font-size: 14.5px; font-style: italic; }

/* ---------- locked teaser ---------- */
.tz { display: none; }
.cm-guest .tz { display: grid; }
.cm-guest #composeSlot, .cm-guest #cmBar, .cm-guest #pinned, .cm-guest #feed, .cm-guest #more, .cm-guest #bell { display: none; }
.tz-stats { min-height: 1.4em; margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.tz-next:empty, .tz-spaces:empty { display: none; }
.tz > * { grid-area: 1 / 1; }
.tz-fake { display: grid; gap: 12px; align-content: start; opacity: .45; filter: blur(2px); pointer-events: none; -webkit-mask-image: linear-gradient(#000 10%, transparent 85%); mask-image: linear-gradient(#000 10%, transparent 85%); }
.tz-card { display: grid; align-content: start; gap: 12px; height: 150px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.tz-card i { display: block; height: 12px; border-radius: 6px; background: var(--line-2); }
.tz-card i:nth-child(1) { width: 28%; } .tz-card i:nth-child(2) { width: 82%; height: 20px; } .tz-card i:nth-child(3) { width: 64%; }
.tz-box { z-index: 1; align-self: start; justify-self: center; display: grid; justify-items: start; gap: 12px; width: min(580px, calc(100% - 20px)); margin: 26px 0 0; padding: clamp(22px, 4vw, 34px); border: 1px solid rgba(var(--acc), .5); border-radius: 16px; background: radial-gradient(ellipse at 100% 0, rgba(var(--acc), .15), transparent 60%), var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.tz-lock { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--amber); color: var(--ink); box-shadow: 0 0 30px rgba(var(--acc), .35); }
.tz-lock .ic { width: 22px; height: 22px; stroke-width: 2.2; }
.tz-box h2 { font-size: clamp(32px, 4.4vw, 48px); }
.tz-box p { margin: 0; color: var(--muted); }
.tz-spaces { list-style: none; display: grid; gap: 6px; width: 100%; margin: 4px 0 0; padding: 0; }
.tz-spaces li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ov), .02); }
.tz-spaces .ic, .tz-spaces .ic-t { grid-row: span 2; color: var(--amber); }
.tz-spaces b { font-family: var(--display); font-size: 16px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; }
.tz-spaces small { grid-column: 2; color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tz-spaces .n { grid-row: 1 / span 2; grid-column: 3; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.tz-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tz-next .k { margin-right: 4px; }
.tz-soon { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px dashed var(--line-2); border-radius: 999px; color: var(--muted); font-size: 13px; }
.tz-soon .ic, .tz-soon .ic-t { width: 14px; height: 14px; color: var(--gc); }
.tz .cta-row { margin-top: 4px; }

/* coming-soon group */
.soon-box { display: grid; justify-items: start; gap: 12px; padding: clamp(24px, 4vw, 40px); border: 1px dashed color-mix(in srgb, var(--gc) 55%, transparent); border-radius: 16px; background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--gc) 16%, transparent), transparent 60%), var(--card); }
.soon-ic { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: color-mix(in srgb, var(--gc) 18%, transparent); color: var(--gc); }
.soon-ic .ic, .soon-ic .ic-t { width: 32px; height: 32px; font-size: 26px; }
.soon-box h2 { font-size: clamp(38px, 5vw, 62px); }
.soon-box h2 em { color: var(--gc); }
.soon-box p { margin: 0; max-width: 52ch; color: var(--muted); }
.soon-box .cta-row { margin-top: 8px; }
.soon-box .btn .ic { width: 17px; height: 17px; }

/* dialog */
#cmDlg .dlg-p { margin: 6px 0 18px; color: var(--muted); overflow-wrap: anywhere; }
#cmDlg .form-actions { margin-top: 20px; }
#cmDlg h2 { padding-right: 40px; }

@keyframes cm-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes cm-pop { 0% { transform: scale(.97); opacity: .4; } 100% { transform: none; opacity: 1; } }

/* ---------- tablets + phones: one column; the side panel follows the feed ---------- */
@media (max-width: 979px) {
  .cm-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cm-rail.hb-side { position: static; max-height: none; overflow: visible; }
  .hb-side .rail-in { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
  .hb-tabs { margin-inline: -16px; padding-inline: 16px; }
  .cm-head { min-height: 104px; }
}
@media (max-width: 560px) {
  .cm { padding-top: 16px; }
  .cm-head { min-height: 96px; padding-bottom: 12px; }
  .cm-head h1 { font-size: 36px; }
  .cm-desc { height: 2.8em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14.5px; }
  .cm-notif { position: fixed; left: 12px; right: 12px; top: calc(var(--hdr, 69px) + 8px); width: auto; max-height: calc(100svh - var(--hdr, 69px) - 24px); }
  .cmp-open { gap: 10px; font-size: 15px; }
  .cmp-go { padding: 0 12px; }
  .cm-nudge { gap: 10px; padding-left: 12px; font-size: 13.5px; }
  .cm-nudge .lg { display: none; }
  .cm-nudge .sm { display: inline; }
  .cm-bar { gap: 8px; }
  .cm-sort button { padding: 0 11px; font-size: 13.5px; letter-spacing: .08em; }
  .cm-search input { padding-left: 36px; font-size: 16px; }
  .cm-search svg { left: 12px; }
  .pc { padding: 14px 14px 8px; }
  .pc-t { font-size: 21px; }
  .pc-act { display: none; }
  .pv { padding: 16px; }
  .pv .pa .av.lg { width: 38px; height: 38px; font-size: 19px; }
  .rich { font-size: 16px; }
  .lcards { grid-template-columns: minmax(0, 1fr); }
  .ccmp { grid-template-columns: minmax(0, 1fr) auto; }
  .ccmp > .av { display: none; }
  .ccmp .form-msg { grid-column: 1 / -1; }
  .ccmp.reply { grid-template-columns: minmax(0, 1fr); }
  .ccmp.reply > .av { display: none; }
  .ccmp.reply .ccmp-b { grid-column: 1; }
  .cc { gap: 8px; }
  .cr { margin-left: 6px; padding-left: 12px; }
  .rslot:not(:empty) { margin-left: 18px; }
  .cc-b { padding: 8px 12px 4px; }
  .tz-box { width: 100%; margin-top: 12px; }
  .tz .cta-row .btn { flex: 1 1 auto; }
}

@media (max-width: 360px) { .cm-nudge .btn { min-height: 36px; padding: 6px 10px; font-size: 13px; letter-spacing: .08em; } .cm-nudge > .ic { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cm-rail, .cm-rail.open, .hb-glide { transition: none; }
  .hb-dc::before { animation: none; }
  .lk.burst .ic, .lk.burst::before, .lk.burst::after, .pc.fresh, .cmc.fresh > .cc, .cmp, .mn-p, .cm-notif, [data-act="wait"].ring .ic, .cm-bell:has(.n:not([data-n="0"])) svg { animation: none; }
}

/* ---------- v2.15: emojis + GIFs (GIPHY, G/PG only) ---------- */
.hb-tools { display: flex; gap: 4px; margin-top: 4px; }
.hb-tb { display: inline-grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; font: 700 11.5px/1 var(--mono); letter-spacing: .04em; }
.hb-tb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hb-tb:hover, .hb-tb:focus-visible { background: rgba(var(--ov), .07); color: var(--fg); }
.hb-tb.gif { box-shadow: inset 0 0 0 1.5px currentColor; height: 24px; margin-top: 3px; padding: 0 7px; border-radius: 7px; }
.fld:has(> .hb-tools) { position: relative; }
.hb-pop { position: absolute; z-index: 40; inset-inline-start: 0; top: 100%; margin-top: 6px; width: min(340px, calc(100vw - 32px)); padding: 10px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--line-2); }
.hb-et { display: flex; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hb-et button { width: 38px; height: 32px; border: 0; border-radius: 10px; background: transparent; font-size: 18px; cursor: pointer; }
.hb-et button[aria-selected="true"] { background: rgba(var(--ov), .08); }
.hb-eg { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; margin-top: 8px; max-height: 190px; overflow-y: auto; }
.hb-eg button { height: 38px; border: 0; border-radius: 10px; background: transparent; font-size: 22px; line-height: 1; cursor: pointer; transition: transform .15s; }
.hb-eg button:hover, .hb-eg button:focus-visible { background: rgba(var(--ov), .08); transform: scale(1.15); }
.hb-gq { width: 100%; min-height: 38px !important; border-radius: 999px !important; padding: 0 14px !important; font-size: 14px !important; }
.hb-gg { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; max-height: 300px; overflow-y: auto; align-items: start; }
.hb-gg .skel { grid-column: 1 / -1; height: 200px; border-radius: 12px; }
.hb-gg button { display: block; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: rgba(var(--ov), .06); cursor: pointer; }
.hb-gg img { display: block; width: 100%; height: auto; }
.hb-gg button:hover, .hb-gg button:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; }
.hb-gm { grid-column: 1 / -1; margin: 12px 4px; font-size: 13px; color: var(--muted); }
.hb-attr { margin: 8px 2px 0; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: end; }
.hb-gifs { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-gifs:empty { display: none; }
.hb-gp { position: relative; display: block; }
.hb-gp img { display: block; height: 72px; width: auto; border-radius: 10px; }
.hb-gp button { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 11px; cursor: pointer; }
/* a GIF in a post or a comment */
.hgif { display: block; max-width: min(300px, 100%); height: auto; max-height: 260px; margin: 6px 0; border-radius: 12px; background: rgba(var(--ov), .06); }