/* NET-BUILD-FEED-1025 H1 — Threads (/feed) in direction B: sub-menu of lenses (fsn-submenu.css) · page head · one stream
   column · one side column (the live Pulse #f2-mid above the live right rail #f2-right). Every live panel and road kept.
   Specificity `body #sn-x.fsnf-b` beats the in-document #sn-x token blocks (graph trap: assets/fsn.css is not the token
   authority). Light default; html.fs-dark / [data-theme=dark] = dark. 8px radius; no pills. */
/* the page tint goes through the shell's own token (body + .page-wrapper are forced to var(--fs-shell-bg)) */
html body:has(#sn-x.fsnf-b){--fs-shell-bg:#f4f5fb;background:#f4f5fb!important}
html.fs-dark body:has(#sn-x.fsnf-b),html[data-theme="dark"] body:has(#sn-x.fsnf-b){--fs-shell-bg:#0c1320;background:#0c1320!important}
body #sn-x.fsnf-b{--f2-panel:#fff;--f2-panel2:#f8f9fd;--f2-line:#e6e8ef;--f2-line2:#dbdbea;--f2-text:#16171f;--f2-muted:#5d5f77;--f2-hover:#eff0f7;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;gap:20px 24px;max-width:1240px;margin-left:0;margin-right:auto}
html.fs-dark body #sn-x.fsnf-b,[data-theme="dark"] body #sn-x.fsnf-b{--f2-panel:#1d1e2b;--f2-panel2:#191a26;--f2-line:#2a2b3e;--f2-line2:#33344b;--f2-text:#f3f3f8;--f2-muted:#a3a5bb;--f2-hover:#151622}
body #sn-x.fsnf-b #f2-center{grid-column:1;grid-row:1 / span 2;min-width:0}
body #sn-x.fsnf-b #f2-mid{grid-column:2;grid-row:1;position:static;max-height:none;overflow:visible;top:auto}
body #sn-x.fsnf-b #f2-right{grid-column:2;grid-row:2;display:block;align-self:start}
body #sn-x.fsnf-b #f2-tabs{display:none}
/* page head */
body #sn-x.fsnf-b .fsnf-hello{margin:4px 0 18px}
body #sn-x.fsnf-b .fsnf-eyebrow{font:700 11px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--f2-muted)}
body #sn-x.fsnf-b .fsnf-title{margin:7px 0 0;font:800 28px/1.15 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:-.02em;color:var(--f2-text)}
/* panels: 8px, B's hairline + soft lift */
body #sn-x.fsnf-b .pnl{border-radius:8px;border-color:var(--f2-line);box-shadow:0 1px 2px rgba(22,23,31,.04),0 8px 24px -12px rgba(40,36,120,.12)}
html.fs-dark body #sn-x.fsnf-b .pnl,[data-theme="dark"] body #sn-x.fsnf-b .pnl{box-shadow:0 1px 2px rgba(0,0,0,.3)}
body #sn-x.fsnf-b .pnl+.pnl{margin-top:14px}
body #sn-x.fsnf-b #f2-feed-list>.pnl{margin-top:14px}
body #sn-x.fsnf-b #f2-comp{margin-bottom:4px}
body #sn-x.fsnf-b #f2-right>*+*{margin-top:14px}
/* 1024–1199: the side column narrows */
@media (min-width:1024px) and (max-width:1199.98px){body #sn-x.fsnf-b{grid-template-columns:minmax(0,1fr) 248px;gap:18px}}
/* 641–1023 (sub-menu = Sections picker): two columns, side 260 */
@media (min-width:641px) and (max-width:1023.98px){body #sn-x.fsnf-b{grid-template-columns:minmax(0,1fr) 260px}body #sn-x.fsnf-b #f2-right{display:block}}
/* phone: one column — stream, then the Pulse, then the rail (the live order) */
@media (max-width:640px){
  body #sn-x.fsnf-b{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  body #sn-x.fsnf-b #f2-center,body #sn-x.fsnf-b #f2-mid,body #sn-x.fsnf-b #f2-right{grid-column:auto;grid-row:auto}
  body #sn-x.fsnf-b .fsnf-title{font-size:22px}
}
/* A-P6 Ask the square — the composer's Ask tab and its one-line hint */
body #sn-x.fsnf-b #f2-comp .fsnf-askhint{display:flex;align-items:center;gap:8px;margin:0 16px 10px;padding:8px 10px;border-radius:8px;background:#ebeafe;color:#4f4ae6;font:600 12.5px/1.4 Inter,sans-serif}
body #sn-x.fsnf-b #f2-comp .fsnf-askhint[hidden]{display:none}
body #sn-x.fsnf-b #f2-comp .fsnf-askhint svg,body #sn-x.fsnf-b #f2-comp .fsnf-askhint i{width:15px;height:15px;flex:none}
html.fs-dark body #sn-x.fsnf-b #f2-comp .fsnf-askhint,[data-theme="dark"] body #sn-x.fsnf-b #f2-comp .fsnf-askhint{background:#22264a;color:#c9c7ff}
/* A-P8 Who can answer — the composer's Tools-menu dropdown (plain icons, no tile) */
body #sn-x.fsnf-b #f2-comp .fsnf-wca{position:relative}
body #sn-x.fsnf-b #f2-comp .fsnf-wca>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--f2-line2);background:var(--f2-panel);color:var(--f2-text);font:600 12.5px/1 Inter,sans-serif;cursor:pointer;white-space:nowrap}
body #sn-x.fsnf-b #f2-comp .fsnf-wca>summary::-webkit-details-marker{display:none}
body #sn-x.fsnf-b #f2-comp .fsnf-wca>summary svg,body #sn-x.fsnf-b #f2-comp .fsnf-wca>summary i{width:14px;height:14px}
body #sn-x.fsnf-b #f2-comp .fsnf-wca-m{position:absolute;left:0;bottom:calc(100% + 6px);z-index:40;width:260px;padding:6px;border-radius:8px;border:1px solid var(--f2-line);background:var(--f2-panel);box-shadow:0 12px 32px -8px rgba(22,23,31,.22)}
body #sn-x.fsnf-b #f2-comp .fsnf-wca-h{padding:6px 10px 4px;font:700 10.5px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--f2-muted)}
body #sn-x.fsnf-b #f2-comp .fsnf-wca-m button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--f2-text);font:500 13px/1.2 Inter,sans-serif;text-align:left;cursor:pointer}
body #sn-x.fsnf-b #f2-comp .fsnf-wca-m button:hover{background:var(--f2-hover)}
body #sn-x.fsnf-b #f2-comp .fsnf-wca-m button[aria-checked="true"]{color:#4f4ae6;font-weight:700}
html.fs-dark body #sn-x.fsnf-b #f2-comp .fsnf-wca-m button[aria-checked="true"]{color:#a3a0ff}
body #sn-x.fsnf-b #f2-comp .fsnf-wca-m button svg,body #sn-x.fsnf-b #f2-comp .fsnf-wca-m button i{width:16px;height:16px;color:var(--f2-muted)}
body #sn-x.fsnf-b #f2-comp .fsnf-wca-q{display:flex;align-items:center;gap:8px;margin-top:4px;padding:9px 10px 6px;border-top:1px solid var(--f2-line);font:500 12.5px/1.2 Inter,sans-serif;color:var(--f2-text)}