/* A continuous writing surface: words first, media tools at the end of the thought. */
body[data-ui-shell="community"] #dialog[data-kind="compose"]{width:800px;max-width:calc(100vw - 48px);background:#fffaf3;border:1px solid #d8c3ad70;border-radius:16px;box-shadow:0 24px 80px #49311e28}
body[data-ui-shell="community"] #dialog[data-kind="compose"] .dialog-header{background:#fffaf3;border:0;padding:16px 30px 0;min-height:48px}
body[data-ui-shell="community"] #dialog[data-kind="compose"] .dialog-header h2{font-size:13px;color:#8b786a;font-weight:500;letter-spacing:0}
body[data-ui-shell="community"] #dialog[data-kind="compose"] .dialog-header button{width:44px;height:44px;background:transparent;border-radius:50%}
body[data-ui-shell="community"] #dialog[data-kind="compose"] .dialog-header button:hover{background:#a249330b;color:#a24933}
body[data-ui-shell="community"] #dialog[data-kind="compose"] .dialog-body{max-height:calc(100dvh - 120px);background:transparent}
#compose-form{color:#382b24;min-height:min(640px,calc(100dvh - 120px))}
#compose-form .compose-topline{padding:14px 36px 12px;gap:16px}
#compose-form .compose-author{align-items:center;gap:10px}
#compose-form .compose-author .hub-avatar{width:36px;height:36px;border:0}
#compose-form .compose-author strong{font-size:14px;color:#4b382c;font-weight:600;max-width:230px}
#compose-form .compose-author small{font-size:12px;color:#8b786a;line-height:1.6}
#compose-form .compose-view-switch{gap:20px}
#compose-form .compose-view-switch button{min-height:44px;font-size:13px;font-weight:500;padding:8px 0;color:#8b786a}
#compose-form .compose-view-switch button[aria-pressed=true]{color:#a24933;border-bottom-color:#a24933}
#compose-form .compose-view-switch button svg{transition:transform .22s}
#compose-form .compose-view-switch button:hover svg{transform:translateY(-2px)}
#compose-form .compose-tools{padding:0 36px 10px;border:0;gap:12px;flex-wrap:wrap;background:transparent}
#compose-form .compose-board-trigger{min-height:44px;font-size:13px;color:#a24933;border-radius:6px;padding:8px 10px;margin-left:-10px}
#compose-form .compose-board-trigger:hover{background:#a249330b}
#compose-form .compose-board-caption{font-size:12px;line-height:1.7;color:#8b786a;min-width:0}
#compose-form .compose-count{font-size:12px;margin-left:auto;color:#8b786a}
#compose-form .compose-count small{font-size:11px;color:#9b8879}
#compose-form .compose-topic-picker{margin:0 36px;padding:10px 0 14px;background:linear-gradient(110deg,#edddcb50,transparent);border:0}
#compose-form .compose-topic-picker>header{font-size:12px;padding:2px 12px;color:#8b786a}
#compose-form .compose-topic-picker>header button{min-height:44px;min-width:44px}
#compose-form .compose-topics{display:grid;grid-template-columns:1fr;gap:0;padding:0 12px}
#compose-form .compose-topics button{min-height:60px;padding:10px 8px;border:0;border-bottom:1px solid #91745c1c;background:transparent;box-shadow:none;border-radius:0;gap:14px;color:#a16d50}
#compose-form .compose-topics button:last-child{border-bottom:0}
#compose-form .compose-topics button.active{background:linear-gradient(90deg,#a249330b,transparent);color:#a24933;box-shadow:none;border-color:#91745c1c}
#compose-form .compose-topics button:hover{background:#a2493308}
#compose-form .compose-topics strong{font-size:14px;color:#4b382c;font-weight:600}
#compose-form .compose-topics small{font-size:12px;color:#8b786a}
#compose-form .compose-topic-check{background:#a24933}
#compose-form .compose-workspace{min-height:280px}
#compose-form .compose-canvas{padding:22px 36px 20px;box-shadow:none;position:relative}
#compose-form .compose-canvas:focus-within{box-shadow:none}
#compose-form .compose-writing-kicker{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#a24933;font-size:12px;margin-bottom:4px}
#compose-form .compose-writing-kicker small{font-size:11px;color:#9b8879}
body[data-ui-shell="community"] #compose-form .compose-title{font-size:30px;font-weight:680;line-height:1.45;letter-spacing:-.03em;color:#382b24;min-height:66px;padding:12px 0 14px;border:0;border-radius:0;box-shadow:none;background:transparent;caret-color:#a24933}
body[data-ui-shell="community"] #compose-form .compose-title::placeholder{font-weight:500;color:#ad9886}
body[data-ui-shell="community"] #compose-form .compose-text{font-size:17px;line-height:1.9;color:#4b382c;border:0;background:transparent;box-shadow:none;padding:8px 0 20px;caret-color:#a24933}
body[data-ui-shell="community"] #compose-form .compose-text::placeholder{color:#a18d7b;font-size:16px;line-height:1.9}
#compose-form .compose-media-dock{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;min-height:48px;margin-top:4px;padding-top:8px;border-top:1px solid #91745c22}
#compose-form .compose-media-dock::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:#a2493360;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.22,.8,.25,1);pointer-events:none}
#compose-form .compose-canvas:focus-within .compose-media-dock::before{transform:scaleX(1)}
#compose-form .compose-media-dock .media-toolbar{order:1;gap:4px}
#compose-form .compose-media-dock .media-add,#compose-form .compose-media-dock .mention-launch{min-height:44px;padding:8px 10px;border:0;border-radius:6px;font-size:13px;font-weight:400;color:#756254;background:transparent;transition:color .2s,background .2s,transform .18s}
#compose-form .compose-media-dock .media-add:first-child{margin-left:-10px}
#compose-form .compose-media-dock .media-add:hover,#compose-form .compose-media-dock .mention-launch:hover{background:#a249330b;color:#a24933}
#compose-form .compose-media-dock .media-add:active,#compose-form .compose-media-dock .mention-launch:active{transform:scale(.96)}
#compose-form .compose-media-dock .mention-composer{display:contents;margin:0}
#compose-form .compose-media-dock .mention-actions{order:2;gap:0;margin:0}
#compose-form .compose-media-dock .mention-actions>small{display:none}
#compose-form .compose-media-dock .mention-chips{order:3;flex-basis:100%;margin:4px 0 0}
#compose-form .compose-media-dock .mention-picker{order:4;flex-basis:100%;width:100%;min-width:0;margin:10px 0 0;border:0;border-top:1px solid #91745c22;border-radius:0;background:#f7eee2;box-shadow:none}
#compose-form .compose-media-dock .mention-picker input{font-size:16px}
#compose-form .attachment-list{gap:12px;margin-top:16px}
#compose-form .attachment-item{border:0;border-radius:7px;background:transparent;box-shadow:none}
#compose-form .attachment-item figcaption{padding:8px 0;color:#8b786a}
#compose-form .attachment-item>button{min-height:36px;min-width:36px}
#compose-form .compose-footer{background:#fffaf3;border:0;box-shadow:0 -12px 20px #fffaf3ed;padding:18px 36px 20px}
#compose-form .compose-footer-main{align-items:center;gap:18px}
#compose-form .compose-draft-feedback{min-width:0;gap:8px}
#compose-form .compose-draft-label{font-size:12px;color:#8b786a}
#compose-form .compose-draft-icon{background:transparent;color:#a16d50;border:0;width:20px;height:20px}
#compose-form .compose-media-caption{font-size:11px;color:#9b8879;margin-top:4px}
#compose-form .compose-publish{background:#a24933!important;border-color:#a24933!important;border-radius:8px!important;min-height:46px;font-size:14px;padding:10px 20px;box-shadow:none!important}
#compose-form .compose-publish:not(:disabled):hover{background:#883e2c!important;border-color:#883e2c!important}
#compose-form .compose-save-close{font-size:13px;color:#8b786a}
#compose-form .media-help{font-size:11px;line-height:1.7;color:#9b8879;margin-top:10px}
#compose-form .form-feedback:empty{display:none}
#compose-form .compose-preview{padding:24px 36px;background:transparent}
#compose-form .compose-preview-post{padding:0;border:0;background:transparent;border-radius:0;box-shadow:none}
#compose-form .compose-preview-post h3{font-size:30px;line-height:1.45;letter-spacing:-.03em;color:#382b24;font-weight:680}
#compose-form .compose-preview-body{font-size:17px;line-height:1.9;color:#4b382c}

/* A board introduction opens into real discussions, without another tile grid. */
body[data-ui-shell="community"] .fd-page{max-width:1100px;color:#382b24}
body[data-ui-shell="community"] .fd-hero{margin:0;padding:12px 0 26px}
body[data-ui-shell="community"] .fd-hero h1{font-size:clamp(30px,3.2vw,40px);font-weight:720;line-height:1.35;letter-spacing:-.035em;color:#382b24;margin:0 0 10px}
body[data-ui-shell="community"] .fd-hero p{font-size:14px;line-height:1.8;color:#756254}
.fd-page .fd-breadcrumb{font-size:12px;margin-bottom:12px}
.fd-page .fd-breadcrumb a{min-height:44px;display:inline-flex;align-items:center}
.fd-page .fd-toolbar{border-color:#91745c22}
.fd-page .fd-modes{gap:28px}
.fd-page .fd-modes a{min-height:52px;font-size:14px;padding:12px 0;box-sizing:border-box}
.fd-page .fd-modes a.active{color:#a24933;border-bottom-color:#a24933}
.fd-page .fd-ranges a{min-height:44px;font-size:12px;color:#8b786a}
.fd-page .fd-ranges a.active{background:#a249330b;color:#a24933}
.fd-page .fd-boards{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:24px;padding:6px 0;border:0;overscroll-behavior-inline:contain}
.fd-page .fd-boards a{min-height:48px;font-size:13px;flex-shrink:0}
.fd-page .fd-boards small{font-size:11px}
.fd-page .fd-boards a.active{color:#a24933}
.fd-page .fd-board-context{display:flex;align-items:flex-start;gap:20px;padding:22px 24px;margin:8px 0 26px;border:0;border-radius:0;background:linear-gradient(110deg,#edddcb80,#f1e5d738 65%,transparent)}
.fd-page .fd-board-glyph{display:flex;color:#a16d50;flex:none;margin-top:7px}
.fd-page .fd-board-glyph svg{width:30px;height:30px;transition:transform .3s}
.fd-page .fd-board-context:hover .fd-board-glyph svg{transform:translateY(-3px)}
.fd-page .fd-board-context>div{min-width:0}
.fd-page .fd-board-context h2{font-size:25px;line-height:1.45;font-weight:660;letter-spacing:-.03em;color:#382b24;margin:0 0 8px}
.fd-page .fd-board-context p{font-size:14px;line-height:1.85;color:#756254;margin:0}
.fd-page .fd-board-context nav{display:flex;align-items:center;flex-wrap:wrap;gap:0 24px;margin-top:12px}
.fd-page .fd-board-context nav :is(a,button){min-height:44px;display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#a24933;background:transparent;border:0;padding:6px 0}
.fd-page .fd-board-context nav svg{width:16px;height:16px;transition:transform .22s}
.fd-page .fd-board-context nav a:hover svg{transform:translateX(4px)}
.fd-page .fd-board-context nav button:hover svg{transform:rotate(90deg)}
.fd-page .fd-heading{border:0;margin-top:4px;padding-bottom:4px}
.fd-page .fd-heading h2{font-size:16px;color:#756254;font-weight:600}
.fd-page .fd-heading h2>span,.fd-page .fd-heading p{font-size:12px;color:#8b786a}
.fd-page .fd-heading button{font-size:12px;min-height:44px;padding:8px;border-radius:6px}
.fd-page .fd-heading button:hover{background:#a249330b;color:#a24933}
.fd-page .fd-heading button[aria-busy=true] svg{animation:forum-writing-spin 1.3s linear infinite}
.fd-page .fd-results[aria-busy=true]>.fd-grid{opacity:.65;transition:opacity .2s}
.fd-page .fd-card{border-bottom-color:#91745c22;background:transparent}
.fd-page .fd-card:last-child{border-bottom:0}
.fd-page .fd-card:hover{background:linear-gradient(90deg,#edddcb44,transparent)}
.fd-page .fd-card-main{padding:26px 0 8px 44px}
.fd-page .fd-card-top{font-size:12px;color:#8b786a}
.fd-page .fd-rank{font-size:23px;color:#baa48f;top:27px;font-weight:500}
.fd-page .fd-rank.is-leading{color:#a24933}
.fd-page .fd-story h2{font-size:22px;line-height:1.5;color:#382b24;font-weight:650;letter-spacing:-.025em;transition:color .2s}
.fd-page .fd-card-main:hover h2{color:#a24933}
.fd-page .fd-story p{font-size:15px;line-height:1.85;color:#756254}
.fd-page .fd-story>img{width:110px;height:96px;border-radius:6px}
.fd-page .fd-proof,.fd-page .fd-author{font-size:12px;color:#8b786a}
.fd-page .fd-card footer{margin-left:44px;justify-content:flex-start;flex-wrap:wrap;gap:4px 12px}
.fd-page .fd-card .resident-author-badges{opacity:.8}
.fd-page .fd-card .resident-badge-trigger{min-height:36px}
.fd-page .fd-card .resident-badge-skin{width:60px!important;height:25px!important}
.fd-page .fd-card .resident-level-badge{width:52px!important;height:22px!important}
.fd-page .fd-join{min-height:44px;font-size:13px;color:#a24933;margin-left:auto}
.fd-page .fd-explainer{border-color:#91745c22}
.fd-page .fd-explainer summary,.fd-page .fd-explainer p{font-size:12px;line-height:1.85;color:#8b786a}
.fd-page .fd-explainer summary{min-height:44px}
@keyframes forum-writing-spin{to{transform:rotate(360deg)}}
@media(max-width:760px){
 body[data-ui-shell="community"] #dialog[data-kind="compose"]{width:100%;max-width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
 body[data-ui-shell="community"] #dialog[data-kind="compose"] .dialog-header{padding:8px 16px 0;padding-top:max(8px,env(safe-area-inset-top));min-height:50px}
 body[data-ui-shell="community"] #dialog[data-kind="compose"] .dialog-body{max-height:none;flex:1;min-height:0}
 #compose-form{min-height:100%}
 #compose-form .compose-topline{padding:12px 20px;gap:12px;flex-wrap:wrap}
 #compose-form .compose-author{flex:1;min-width:0}
 #compose-form .compose-author strong{max-width:150px;font-size:13px}
 #compose-form .compose-author small{font-size:11px}
 #compose-form .compose-view-switch{gap:14px}
 #compose-form .compose-view-switch button{font-size:12px;gap:4px}
 #compose-form .compose-tools{padding:0 20px 8px;gap:4px 10px}
 #compose-form .compose-board-caption{display:none}
 #compose-form .compose-topic-picker{margin:0 20px;padding:4px 0 10px}
 #compose-form .compose-topic-picker>header{padding:0 8px}
 #compose-form .compose-topics{padding:0 6px}
 #compose-form .compose-topics button{min-height:62px}
 #compose-form .compose-canvas{padding:18px 20px}
 body[data-ui-shell="community"] #compose-form .compose-title{font-size:26px;min-height:60px;line-height:1.45;padding:12px 0}
 body[data-ui-shell="community"] #compose-form .compose-text{font-size:16px;line-height:1.9}
 body[data-ui-shell="community"] #compose-form .compose-text::placeholder{font-size:15px}
 #compose-form .compose-preview{padding:20px}
 #compose-form .compose-preview-post h3{font-size:26px}
 #compose-form .compose-preview-body{font-size:16px}
 #compose-form .compose-footer{padding:14px 20px calc(14px + env(safe-area-inset-bottom))}
 #compose-form .compose-footer-main{gap:10px;flex-wrap:wrap}
 #compose-form .compose-draft-feedback{flex-basis:100%}
 #compose-form .compose-submit-actions{width:100%;justify-content:space-between}
 #compose-form .compose-publish{min-width:110px}
 #compose-form .compose-media-dock{gap:0 4px}
 #compose-form .compose-media-dock .media-add,#compose-form .compose-media-dock .mention-launch{padding:8px;font-size:13px}
 #compose-form .compose-media-dock .media-add:first-child{margin-left:-8px}
 body[data-ui-shell="community"] .fd-hero h1{font-size:28px}
 .fd-page .fd-hero p{font-size:13px}
 .fd-page .fd-boards{gap:22px}
 .fd-page .fd-board-context{padding:20px 16px;gap:14px;margin-bottom:22px}
 .fd-page .fd-board-glyph svg{width:24px;height:24px}
 .fd-page .fd-board-context h2{font-size:22px}
 .fd-page .fd-board-context p{font-size:13px}
 .fd-page .fd-board-context nav{gap:0 18px}
 .fd-page .fd-card-main{padding:22px 0 8px 32px}
 .fd-page .fd-rank{font-size:19px;top:25px;width:25px}
 .fd-page .fd-story h2{font-size:19px;line-height:1.55}
 .fd-page .fd-story p{font-size:14px}
 .fd-page .fd-story>img{width:76px;height:82px}
 .fd-page .fd-card-top,.fd-page .fd-proof,.fd-page .fd-author{font-size:11px}
 .fd-page .fd-card footer{margin-left:32px}
 .fd-page .fd-card .resident-author-badges{flex:0 1 auto;max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 #compose-form *,#compose-form *::before,.fd-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Readable attachment captions, with touch targets separate from their visual size. */
#compose-form .attachment-item figcaption{flex-wrap:wrap;gap:4px 8px;align-items:baseline;background:transparent}
#compose-form .attachment-item figcaption small{font-size:12px;line-height:1.7;color:#806b5b;flex:1 1 90px}
#compose-form .attachment-item figcaption span{font-size:11px;line-height:1.7;color:#8b705c}
#compose-form .attachment-item figcaption svg{width:13px;height:13px;flex:none}
#compose-form .attachment-item>button:focus-visible{outline:2px solid #a24933;outline-offset:2px}
@media(hover:none),(pointer:coarse){
 #compose-form .attachment-item>button{width:44px;height:44px;min-width:44px;min-height:44px;right:2px;top:2px;background:transparent;box-shadow:none;isolation:isolate}
 #compose-form .attachment-item>button::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fffaf3ed;box-shadow:0 1px 5px #61432120;z-index:-1}
 #compose-form .attachment-item>button:hover{transform:none;background:transparent}
 #compose-form .attachment-item>button:active{transform:scale(.97)}
}
