/* BTB Social — editorial trust polish, October 2026.
   Visual overrides only. The feed, Pulse, profiles, messaging, and posting
   retain their existing JS state and accessible actions.
   Quiet charcoal, warm whites and a controlled cobalt accent replace
   the wall-to-wall blue/grey treatment without a brand redesign. */
:root { --btb-editorial-accent:#91b9e2; }
body {
  background:#111820;
  color:#edf1f5;
  line-height:1.48;
}
.topbar {
  background:rgba(19,26,34,.97);
  border-bottom:1px solid #34414f;
  box-shadow:0 2px 13px rgba(0,0,0,.13);
}
.brand {letter-spacing:-.025em}
.brand b {color:#b4d2eb}
.brand-pill {
  background:#263445;
  color:#cbdde9;
  border:1px solid #3b5062;
}
.layout {gap:20px}
.rail-head .eyebrow,.social-head .eyebrow,
.rail-head h1 em {color:#b4cde4}
.rail-head p,.social-head p {color:#b7c2cb}
.rail-nav button {color:#c2ccd7}
.rail-nav button:hover,.rail-nav button.is-active {
  background:#283747;color:#fff;
}
.rail-nav button.is-active {
  box-shadow:inset 3px 0 0 #c5d8e8;
}
.panel,.post,.side-card,.rail-box,.person {
  background:#1b2630;
  border:1px solid #344352;
  box-shadow:0 4px 20px rgba(0,0,0,.09);
}
.side-card.mini {background:#19232d}
.panel,.post {border-radius:14px}
.post {padding:16px}
.post-author small,.person-header small,
.composer-title small,.side-card p,.muted {color:#b6c4d0}
.post-text {line-height:1.55;letter-spacing:0}
.post-actions {border-top-color:#384756}
.post-actions button {color:#d0dbe4}
.post-actions button:hover {background:#304050;color:#fff}
.post-actions button.active {color:#f3b1b1}
.composer textarea,.search-row input,
.profile-form input,.profile-form textarea,.profile-form select {
  background:#141e28;color:#f4f7fa;
  border:1px solid #425669;border-radius:11px;
}
.composer textarea::placeholder {color:#a9bac8}
:where(.composer,.profile-form,.search-row) :is(textarea,input,select):focus-visible,
:where(.post,.panel,.topbar,.bottom-dock) :is(a,button,summary):focus-visible {
  outline:3px solid #a8cdf0;outline-offset:2px;
}
.btn {
  background:#263646;border:1px solid #496073;
  color:#ecf4fc;box-shadow:none;
}
.btn:hover {background:#354a5d}
.btn.primary {
  background:#315f91;border-color:#6a95bd;
  color:#fff;font-weight:800;
}
.btn.primary:hover {background:#3b6fa5}
.eyebrow {letter-spacing:.075em;color:#a9c9e6}
.avatar,.avatar-empty {
  background:#2e567b;color:#fff;
}
.comments,.comment-form input {
  background:#17222d;border-color:#3f5365;
}
.empty {background:#19232d;border-color:#485667;color:#bbcad5}
.empty strong {color:#f2f7fb}
.profile-tabs button {
  background:#1c2833;color:#cfdae4;border-color:#465767;
}
.profile-tabs button.is-active {
  background:#355e86;border-color:#759fc2;color:#fff;
}
.creator-cover {
  background:linear-gradient(125deg,#24384a,#315779 70%,#253b51);
}
.creator-profile-identity>.avatar {border-color:#1b2630}
.creator-profile-identity small,.creator-profile-stats {color:#c0d1dd}
.creator-portal-shortcut {
  background:#22394d;border-color:#5a84aa;
}
.creator-account-menu {
  background:#202d3a;border-color:#50697f;
}
.creator-account-menu :is(button,a):hover {background:#304457}
.creator-video-status {background:#213444;border-color:#55738c}
.creator-reels-view .creator-video-status {color:#f0f5fa}
@media(max-width:780px) {
  body {background:#111820}
  .layout {padding:10px 10px 20px}
  .topbar {background:#17212b}
  .mobile-tabs {
    background:#141f29;
    border-bottom:1px solid #374858;
  }
  .mobile-tabs button {background:#253442;color:#d5e1e9}
  .mobile-tabs button.is-active {background:#385e81;color:#fff}
  .post,.panel {border-radius:13px}
  .bottom-dock {
    background:#17232d;
    border-top:1px solid #46596a;
  }
  .bottom-dock :is(button,a) {color:#d6e1eb}
}
@media(prefers-reduced-motion:reduce){
  .panel,.post,.btn {transition:none!important}
}


/* BTB visual discipline: feed and profile surfaces only.
   Never restyle the Pulse player, motion layer, or fixed navigation. */
:where(.post-author,.composer-title,.person) .avatar,
:where(.post-author,.composer-title,.person) .avatar-empty{
  width:40px;height:40px;min-width:40px;min-height:40px;
  flex:0 0 40px;border-radius:50%;overflow:hidden;aspect-ratio:1;
}
:where(.post-author,.composer-title,.person) .avatar img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;
}
.post,.panel,.person,.side-card{min-width:0;border-radius:12px}
.post-text,.comment{overflow-wrap:anywhere}
.post-author,.composer-title,.person-header{min-width:0;gap:11px}
.post-actions button:not(:disabled),
.comment-form button:not(:disabled){
  border-radius:12px;font-weight:700;
  transition:opacity .2s ease,background-color .2s ease,border-color .2s ease;
}
.post-actions button:not(:disabled):hover,.comment-form button:not(:disabled):hover{opacity:.9}
.composer textarea,.search-row input,.profile-form :is(input,textarea,select),
.comment-form input{border-radius:12px}
:where(.post,.comments,.composer,.profile-form) :is(a,button,input,textarea,select):focus-visible{
  outline:3px solid #a8cdf0;outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  .post-actions button,.comment-form button{transition:none}
}

/* App wrapper presentation pass: social chrome, never player/viewport geometry. */
:root{--btb-social-depth:#101925;--btb-social-hairline:rgba(213,228,244,.11)}
.topbar,.rail-nav,.layout>main{min-width:0}
.rail-head h1,.social-head h2,.creator-cover strong{letter-spacing:-.032em;text-wrap:balance}
:where(.post,.composer,.panel,.profile-panel-group .panel){
 box-shadow:0 10px 32px rgba(0,0,0,.10);
}
.rail-nav button,.profile-tabs button,.creator-account-menu :is(a,button){
 min-height:44px;touch-action:manipulation;
}
:where(.rail-nav,.profile-tabs,.creator-account-menu) :is(button,a):focus-visible{
 outline:3px solid #a8d0f5;outline-offset:2px;
}
@media(max-width:780px){
 .bottom-dock{
  min-height:calc(65px + env(safe-area-inset-bottom,0px));
  padding:7px 6px max(8px,env(safe-area-inset-bottom,0px));
  align-items:center;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
 }
 .bottom-dock>button{
  flex:1 1 0;
  min-width:44px;
  min-height:50px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  font-size:10px;line-height:1.2;
  border-radius:12px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:color .18s ease,background-color .18s ease,transform .18s ease;
 }
 .bottom-dock>button>span:first-child{
  display:grid;place-items:center;min-height:25px;line-height:1;
 }
 .bottom-dock>button>span:first-child>svg{width:24px;height:24px;display:block}
 .bottom-dock>button:active{transform:scale(.98)}
 .bottom-dock>button:focus-visible{outline:2px solid #b1d9ff;outline-offset:-2px}
 .layout>main{min-width:0}
 .section-head .refresh{min-width:44px;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 .bottom-dock>button{transition:none}
 .bottom-dock>button:active{transform:none}
}

/* Material depth for the community layer — not a theme replacement. */
body{
 background:linear-gradient(165deg,#0b1329 0%,#101a27 48%,#101821 100%);
}
.topbar{
 background:rgba(11,19,41,.94);
 border-bottom-color:rgba(214,230,246,.12);
}
.panel,.post,.side-card,.rail-box,.person{
 background:#162231;
 border-color:rgba(216,231,249,.12);
 box-shadow:0 14px 36px rgba(0,0,0,.13);
}
.composer textarea,.search-row input,.profile-form input,.profile-form textarea,.profile-form select{
 background:#101b29;border-color:#425a74;
}
@media(max-width:780px){
 body{background:#0b1329}
 .bottom-dock{background:rgba(12,21,35,.96);border-top-color:rgba(211,231,253,.14)}
 .bottom-dock .btb-dock-line-icon{width:26px;height:26px}
 .bottom-dock .btb-dock-line-icon svg{width:23px;height:23px}
}