/* ═══════════════════════════════════════════════════════════════════════════
   Glass layer (Sep 2026): the site's surface recipe, applied to the forum.
   Surfaces are the site's --surface-1/2 (tinted, near-transparent) with
   backdrop blur and hairlines; rows lift on hover; heroes get the radial glow.
   Reading first: post bodies run at a measure, never the full 1180px.
   Loaded after forum-theme.css; everything here overrides, nothing there
   needs editing. Remove this file and the classic layout returns.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --surface-1:rgba(126,156,214,.045);--surface-2:rgba(126,156,214,.085);--surface-3:rgba(126,156,214,.12);
  --hair-bright:rgba(178,202,245,.42);--blur:18px;--lift:0 10px 30px rgba(0,0,0,.28);--lift-high:0 18px 48px rgba(0,0,0,.36);
  --accent-glow:rgba(207,168,96,.16);--blue-glow:rgba(74,111,174,.22);--measure:46rem;--column:46rem;--ink-read:#d8d2c5;
}
body{background:
  radial-gradient(1100px 520px at 50% -160px,var(--blue-glow),transparent 70%),
  radial-gradient(900px 600px at 100% 100%,rgba(207,168,96,.07),transparent 65%),
  linear-gradient(180deg,#080b14,#060910 60%)}

/* Glass surfaces. */
.forum-list,.thread-list,.panel,.post,.join-strip,.profile-activity-list,.stat,.whim-message,.dm-list,.dm-main,.post-preview{
  background:var(--surface-1);border:1px solid var(--hair);backdrop-filter:blur(var(--blur)) saturate(120%);-webkit-backdrop-filter:blur(var(--blur)) saturate(120%);box-shadow:var(--lift)}
.forum-list,.thread-list,.profile-activity-list{overflow:hidden}
.forum-row,.thread-row,.profile-activity{transition:background .18s,transform .18s}
.forum-row:hover,.thread-row:hover,.profile-activity:hover{background:var(--surface-2);transform:translateY(-1px)}
.private-row{background:linear-gradient(90deg,rgba(207,168,96,.07),transparent 70%)}
.thread-row.pinned{box-shadow:inset 3px 0 0 var(--brand-dim)}
.thread-row.pinned .thread-title{color:#f1ecdf}
.unread-row .thread-title{color:#fff}

/* Hero: glow behind the title, the way the site's page heads do it. */
.hero{position:relative;padding:38px 0 26px}
html,body{overflow-x:hidden}
.hero::before{content:"";position:absolute;inset:-40px 0 0;background:radial-gradient(900px 320px at 12% 0%,var(--accent-glow),transparent 70%);pointer-events:none;z-index:-1}
.hero h1,.panel h1{letter-spacing:.02em}
.hero p{max-width:var(--measure)}

/* Buttons: the site's outline style; gold for the one action that matters. */
.btn{border-radius:5px;letter-spacing:.09em;text-transform:uppercase;font-size:11px;font-weight:600;transition:box-shadow .2s,border-color .2s,background .2s}
.btn:hover{box-shadow:0 0 22px var(--accent-glow);border-color:var(--brand)}
.btn.secondary{background:var(--surface-1);color:var(--ink-dim)}
.btn.secondary:hover{color:var(--ink);border-color:var(--hair-bright);box-shadow:none;background:var(--surface-2)}
.input,.textarea,.select{background:rgba(6,9,16,.65);backdrop-filter:blur(var(--blur));-webkit-backdrop-filter:blur(var(--blur))}

/* Posts: author strip above the body, body at a reading measure. */
.post{display:block;grid-template-columns:none;border-radius:var(--radius);margin:0 0 14px}
/* Thread pages are one centred reading column: crumbs, title, toolbar, posts, reply. */
body.page-thread main.wrap{width:min(var(--column),calc(100% - (var(--forum-pad) * 2)))}
.post-side,.post-main,.post-head{display:none}
.post-strip{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--hair);background:rgba(126,156,214,.03)}
.avatar{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:600 12px var(--sans);letter-spacing:.04em;color:#e8e3d8;
  background:linear-gradient(150deg,hsl(var(--h,220) 34% 30%),hsl(var(--h,220) 30% 18%));border:1px solid hsl(var(--h,220) 40% 45% / .55)}
.avatar-gone{background:var(--surface-2);color:var(--ink-muted);border-color:var(--hair)}
.post-who{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.post-name{font:600 14px var(--sans);color:var(--ink)}
.post-tag{font:12px var(--sans);color:#9fb1d0}
.post-meta{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px;font:10px var(--mono);color:var(--ink-muted);text-align:right}
.post-meta a{color:var(--ink-muted)}.post-meta a:hover{color:var(--brand-bright)}
.post-anchor{color:var(--brand-dim)}
.post-body{max-width:none;padding:24px 28px 20px;font:500 18px/1.72 var(--serif);color:var(--ink-read);letter-spacing:.004em}
.post-body strong{color:var(--ink)}
/* A calmer ground under the text than the glass: the blur and tint stay on the card
   edges, the reading surface is near-solid so nothing shimmers behind the letters. */
.post-body{background:rgba(9,12,21,.55)}
.post-body ul,.post-body ol{padding-left:1.3em;margin:.6em 0}.post-body li{margin:.25em 0}
.post-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brand-dim)}
.post-body a:hover{text-decoration-color:var(--brand-bright)}
.post-actions{padding:9px 18px;border-top:1px solid var(--hair);text-align:right;background:rgba(126,156,214,.02)}
.removed-post{opacity:.72}
.reply-state{max-width:var(--measure)}
#reply-box{border-color:var(--brand-dim)}
#reply-box .textarea{max-width:none}

/* Messages: two panes on wide screens, one on narrow. */
.dm-shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:16px;margin:14px 0 24px;min-height:60vh}
.dm-list{border-radius:var(--radius);overflow:hidden;align-self:start;position:sticky;top:78px;max-height:calc(100vh - 100px);display:flex;flex-direction:column}
.dm-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 12px;border-bottom:1px solid var(--hair)}
.dm-list-head h1{margin:0;font:600 18px Cinzel,serif;color:var(--ink)}
.dm-list-head .btn{min-height:32px;padding:5px 10px}
.dm-item{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--hair);color:var(--ink-dim);position:relative;transition:background .15s}
.dm-item:hover{background:var(--surface-2);color:var(--ink)}
.dm-item.active{background:var(--surface-3);box-shadow:inset 3px 0 0 var(--brand)}
.dm-item.unread .dm-item-name{color:#fff}
.dm-item .avatar{width:32px;height:32px;font-size:11px}
.dm-item-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.dm-item-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.dm-item-name{font:600 13px var(--sans);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-item-time{font:10px var(--mono);color:var(--ink-muted);flex:0 0 auto}
.dm-item-title{font:12px var(--sans);color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-item-snippet{font:13px/1.35 var(--serif);color:var(--ink-muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dm-item-dot{position:absolute;right:12px;bottom:14px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.dm-list>.dm-item:last-of-type{border-bottom:0}
.dm-list-pager{padding:8px 12px}
.dm-empty,.dm-placeholder{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:22px 16px;color:var(--ink-muted);font:15px/1.5 var(--serif)}
.dm-empty strong,.dm-placeholder strong{font:600 14px var(--sans);color:var(--ink)}
.dm-placeholder{align-items:center;text-align:center;justify-content:center;height:100%;padding:40px 20px}
.dm-main{border-radius:var(--radius);display:flex;flex-direction:column;min-width:0}
.dm-main-empty{justify-content:center}
.dm-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hair);background:rgba(126,156,214,.03)}
.dm-back{display:none;font-size:18px;color:var(--ink-dim);padding:4px 8px}
.dm-head-who{display:flex;flex-direction:column;min-width:0}
.dm-head-who strong{font:600 14px var(--sans);color:var(--ink)}
.dm-head-who span{font:12px var(--sans);color:var(--ink-dim)}
.dm-head-actions{margin-left:auto}.dm-head-actions .btn{min-height:32px;padding:5px 10px}
.dm-pager{padding:8px 16px 0}.dm-pager .pagination{margin:0}
.dm-thread{flex:1;padding:18px 16px;display:flex;flex-direction:column;gap:12px;overflow:visible}
.whim-message{max-width:min(78%,var(--measure));margin:0;border-radius:12px;box-shadow:none}
.whim-message.mine{align-self:flex-end;background:rgba(207,168,96,.10);border-color:rgba(207,168,96,.28);border-bottom-right-radius:4px}
.whim-message.theirs{align-self:flex-start;border-bottom-left-radius:4px}
.whim-message .post-body{padding:12px 16px 6px;font-size:16px;line-height:1.55;max-width:none;background:transparent}
.whim-meta{padding:0 16px 9px;font:10px var(--mono);color:var(--ink-muted);text-align:right}
.whim-meta a{color:var(--ink-muted)}
.whim-message.theirs .whim-meta{text-align:left}
.dm-compose{padding:12px 16px 16px;border-top:1px solid var(--hair);background:rgba(126,156,214,.02)}
.dm-compose form{display:flex;gap:10px;align-items:flex-end}
.dm-compose .dm-input{min-height:52px;font-size:16px;flex:1}
.dm-compose .btn{min-height:44px}

/* Breakpoints for the new pieces (the earlier rules for header/footer/rows still apply). */
@media(max-width:1080px){.dm-shell{grid-template-columns:280px minmax(0,1fr)}}
/* Tablet band: rows keep two columns (title | count + last) instead of stacking into tall cards. */
@media(max-width:900px) and (min-width:601px){
  .forum-row,.thread-row{grid-template-columns:minmax(0,1fr) 168px;grid-template-rows:auto auto;gap:2px 12px;align-items:center;padding:13px 15px}
  .forum-row>div:first-child,.thread-row>div:first-child{grid-column:1;grid-row:1/3}
  .forum-row>.count{display:block}
  .forum-row>.count,.thread-row>.count{grid-column:2;grid-row:1;text-align:right;font-size:10px;align-self:end}
  .forum-row>.last,.thread-row>.last{grid-column:2;grid-row:2;text-align:right;border-top:0;padding-top:0;font-size:11px;align-self:start}
}
@media(max-width:600px){
  .thread-row{display:flex;flex-wrap:wrap;gap:3px 12px;align-items:baseline}
  .thread-row>div:first-child{flex:1 1 100%}
  .thread-row>.count,.thread-row>.last{flex:0 0 auto;text-align:left;border-top:0;padding-top:0;font-size:11px}
}
@media(max-width:900px){
  .dm-shell{grid-template-columns:1fr;gap:0;min-height:0}
  .dm-list{position:static;max-height:none}
  .dm-shell.has-active .dm-list,.dm-shell.has-active .dm-main-empty{display:none}
  .dm-shell:not(.has-active) .dm-main{display:none}
  .dm-back{display:inline-block}
  .whim-message{max-width:92%}
  .post-body{padding:18px 18px 14px}
}
@media(max-width:600px){
  .post-strip{flex-wrap:wrap;gap:8px 10px;padding:10px 13px}
  .post-meta{margin-left:0;justify-content:flex-start;text-align:left;flex-basis:100%;gap:4px 10px}
  .post-body{padding:16px 14px 12px;font-size:17px;line-height:1.65}
  .post-actions{padding:9px 13px}
  .dm-thread{padding:14px 10px}
  .whim-message{max-width:96%}
  .dm-compose{padding:10px}
  .dm-compose form{flex-direction:column;align-items:stretch}
  .hero::before{inset:-20px 0 0}
}
@media(prefers-reduced-motion:reduce){.forum-row:hover,.thread-row:hover,.profile-activity:hover{transform:none}}

/* Header: forum links first, then the main-site links as a visibly separate, quieter group. */
.nav-site{display:flex;align-items:center;gap:18px;margin-left:8px;padding-left:18px;border-left:1px solid var(--hair-strong)}
.nav-site-label{font:600 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-dim);margin-right:-6px}
.nav-site a{color:var(--ink-muted)}.nav-site a:hover{color:var(--ink)}
.mobile-site-label{display:block;margin:8px 9px 2px;padding-top:8px;border-top:1px solid var(--hair);font:600 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-dim)}

/* Thread moderation: one button, a panel underneath, instead of three rows of controls. */
.mod-tools{display:inline-block;position:relative}
.mod-tools>summary{list-style:none;display:inline-flex;cursor:pointer}
.mod-tools>summary::-webkit-details-marker{display:none}
.mod-tools[open]>summary{border-color:var(--brand-dim);color:var(--brand-bright)}
.mod-tools-panel{position:absolute;z-index:30;left:0;top:calc(100% + 8px);min-width:min(560px,calc(100vw - 2*var(--forum-pad)));padding:12px;display:flex;flex-direction:column;gap:10px;border:1px solid var(--hair-strong);border-radius:8px;background:rgba(7,10,17,.97);box-shadow:var(--lift-high)}
.mod-tools-panel form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;width:100%}
.mod-tools-panel .compact-select{flex:1 1 180px;max-width:none}
.mod-tools-panel .compact-input{flex:1 1 240px;max-width:none}
@media(max-width:600px){
  .mod-tools{display:block;width:100%}
  .mod-tools-panel{position:static;min-width:0;margin-top:8px}
  .mod-tools-panel .btn{flex:1 1 auto}
}

/* Signed-out prompts: sign in and register side by side; stack on phones. */
.join-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.join-copy{display:flex;flex-direction:column;gap:2px;flex:1 1 320px;min-width:0}
.join-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.join-strip .btn{margin-left:0}
.reply-state .toolbar{margin:10px 0 8px}
.reply-state p{margin:0}
.reply-state p.muted{font-size:13px}
@media(max-width:600px){
  .join-strip{flex-direction:column;align-items:stretch;gap:10px}
  .join-copy{flex:0 0 auto}
  .join-actions{margin-left:0;width:100%}
  .join-actions .btn{flex:1 1 auto;width:auto}
  .reply-state .toolbar .btn{flex:1 1 auto}
}

/* Reading comfort, applied everywhere text is read rather than scanned. Same
   ink (--ink-read), same Garamond 500, so a post, a rule, a DM and the composer
   all read the same. Scanning surfaces (lists, meta, mono) stay compact but are
   lifted off the muted grey that was hardest to read on the dark ground. */
.rules-copy,.setup-intro,.hero p,.dm-placeholder,.dm-empty,.reply-state p{font-weight:500;color:var(--ink-read)}
.rules-copy{font-size:18px;line-height:1.7}
.rules-copy strong{color:var(--ink)}
.textarea{font:500 17px/1.65 var(--serif);color:var(--ink-read)}
.whim-message .post-body{font:500 17px/1.6 var(--serif);color:var(--ink-read)}
.dm-item-snippet{font-size:13.5px;color:var(--ink-dim)}
.forum-desc,.thread-meta,.last-meta{font-size:13px;color:var(--ink-dim);line-height:1.45}
.forum-desc{max-width:62rem}
.thread-meta a,.last-meta a{color:var(--ink-dim)}
.post-body blockquote{color:var(--ink-dim);font-style:italic}
.post-body blockquote em{font-style:normal}
.post-body code{font-size:13px;color:#cbd5e7}
.post-body pre{background:rgba(5,7,12,.9)}
.spoiler{background:rgba(6,9,16,.7)}
.spoiler div{padding-top:8px}
.hint,.muted{color:#8d98ab}
.crumbs,.crumbs a{color:#8d98ab}
.count,.post-meta,.whim-meta,.dm-item-time{color:#8d98ab}
/* Placeholder text in inputs was the dimmest thing on the page. */
.input::placeholder,.textarea::placeholder{color:#7f8a9c;opacity:1}

/* Reading typeface: a low-stroke-contrast serif built for screens. EB Garamond's
   hairlines vanish on a dark ground; Source Serif 4 (Georgia as fallback) keeps
   the warmth with strokes that hold. Headings, badges and lists are unchanged. */
:root{--read-serif:"Source Serif 4",Georgia,"Times New Roman",serif}
.post-body,.rules-copy,.textarea,.whim-message .post-body,.hero p,.dm-placeholder,.dm-empty,.reply-state p,.setup-intro{font-family:var(--read-serif)}
.post-body{font-size:17px;line-height:1.7;font-weight:400}
.rules-copy{font-size:17px}
.textarea{font-size:16px}
.whim-message .post-body{font-size:16px;font-weight:400}
@media(max-width:600px){.post-body{font-size:16px;line-height:1.65}}


/* Header: the site-group label sits in the muted ink, not gold; the signed-in name
   is capped so a long username cannot push the bar around. */
.nav-site-label{color:var(--ink-muted)}
.desktop-auth>a.auth-name{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.desktop-auth{gap:10px}
/* Width bands: the name gives way first, then nav spacing, then (at 1080, in
   forum-theme.css) the whole bar collapses into the Menu. */
@media(max-width:1400px){.desktop-auth>a.auth-name{max-width:120px}}
@media(max-width:1280px){.desktop-auth>a.auth-name{max-width:90px}.desktop-nav{gap:14px}.nav-site{gap:14px;padding-left:14px}}
@media(max-width:1180px){.desktop-auth>a.auth-name{max-width:70px}.desktop-nav{gap:12px}.nav-site-label{display:none}}
/* Phone menu: the account line wraps the name rather than overflowing the panel. */
.mobile-auth>a{overflow-wrap:anywhere}